NuGet 2.1.37 includes form grids and external labels, content cards, checkbox/radio/list groups, and updated AppBar account-menu behavior. Guidance is imported; newer upstream sample integrations are not automatically copied into this showcase. Ribbon and account-menu APIs introduced in 2.1.36 remain available.
The 2.1.43 baseline requires MudBlazor 9.10.0 and Blazor Components 10.0.12. It includes package-owned MAUI safe-area geometry; see inset ownership and host migration boundaries. Native and CSS environment insets are alternatives, never additive. Existing gallery screenshots retain their original capture version; this upgrade is not native-device certification.
NuGet 2.1.37 guidance now includes UI spacing/non-overlap, input/sidebar refinements, and new component patterns. See the imported source map: new upstream showcase pages and host integrations are reference-only until separately imported. The existing screenshot gallery is unchanged.
Current baseline: NuGet 2.1.43, including opaque sticky lookup headers in Light/Dark. Consumer rules and template audits follow this version; the gallery remains labeled with its actual 2.1.27 capture version.
OPX Flat UI is a NuGet-first UI reference and project template for responsive Blazor Web and .NET MAUI Blazor Hybrid applications. It combines reusable flat operational components, canonical application composition, responsive navigation, theme-aware behavior, and auditable consumer rules.
Web ready. MAUI Hybrid ready by contract. Powered by MudBlazor.
This repository provides samples, templates, skills, and rules so you can build by describing the application or feature you need. Codex reads the repository contracts, selects the closest canonical sample, and adapts the layout, components, forms, grids, spacing, responsive behavior, and Web/MAUI interactions. You do not need to specify each PageId, component name, or padding value.
Open this repository as a workspace in Codex. Start your first task with:
Read RULES.md, .agents/AGENTS.md, .agents/RULES.md, .agents/KNOWLEDGE.md,
.agents/PROMPTING.md, and the local opx-flat-ui-development skill.
Use the canonical samples as the source of truth and consume OPX through NuGet.
Build a supplier master page with search, Add, Edit, and Delete.
Choose a contract-compliant desktop/mobile layout, then run the audits and build.
Once the repository context is loaded, describe the business requirement. Copy-ready examples:
Build an employee leave request form with dates, leave type,
reason, and attachments. Use the closest canonical form pattern.
Build a sales dashboard for managers with monthly trends,
target versus actual results, and drill-down to transactions.
Use demo data for now; do not invent unspecified business formulas.
Build a purchase approval page for supervisors with document details,
Approve, Reject, and a rejection reason. Use sample data and prepare
integration callbacks; keep authorization and transaction decisions in the backend.
Create a MAUI Hybrid version of this application sharing its UI with Web.
Follow the MAUIHost sample for native pull-to-refresh, Back navigation,
AppBar/theme-matched status bars, safe areas, keyboard behavior, and startup loading.
Use Bottom navigation with Bottom Sheet and preserve unsaved-form guards.
Match the employee directory to the profile-grid sample in List mode.
Preserve the canonical layout, padding, typography, and behavior;
replace only application data and integrations.
Open the destination project folder in Codex and make sure the following source checkout is accessible. Adjust the path to your clone location:
Use D:\projects\git\mudblazor-flatui-samples-agents as this project's source of truth.
Read its rules, knowledge, prompting contract, and local skill;
import the relevant guidance into the destination project's .agents folder.
For a new project, start from the canonical template. For an existing project,
audit differences and preserve existing code and business integrations.
Use the NuGet version pinned by the source contract, original package CSS without
overrides, and the closest sample for layout and behavior. Do not add a
ProjectReference to the package source. Keep Settings, default navigation,
Light theme, Device font, Default spacing, and panel padding.
Build a Web and MAUI inventory application with an item master
and goods receipt transactions. Use demo data until the API is available.
Run the audits and build, and report which behaviors still need device testing.
Provide API endpoints, data models, user roles, and transaction rules when available. Codex selects routine UI details from the contract; unclear business rules, permissions, formulas, and integrations still require clarification. Results are checked through audits, builds, and appropriate tests. Device validation and production readiness require their own verification. See the prompting contract.
The reusable component API and original CSS are delivered by Opx.MudBlazor.FlatUi. This repository owns the canonical consumer composition, sample pages, project template, rules, skills, documentation, and validation gates.
The current dependency is 2.1.43, including the responsive report-toolbar and bounded mobile-card scrolling correction. Imported hybrid operations guidance covers document transfer, scanner/outbox coordination and explicit host obligations; new adapters are not automatically wired by a NuGet upgrade. The screenshot gallery below remains labeled with its actual 2.1.27 capture version.
The current package includes shared PDF printing through IFlatPrintService. The Web sample registers the browser service; MAUIHost supplies Android/Windows adapters. Printing uses authorized PDF bytes and reports Submitted when the final outcome is unknown. Native adapters require host integration; printer capability is not physical-printer discovery. See Print support.
NuGet 2.1.43 is the current signed package. In addition to the 2.1.20 Tree Grid and IconPicker APIs, it adds hybrid reliability and productivity contracts: explicit FlatRefreshMode, MAUI refresh/overlay/Back coordination, visual-viewport keyboard avoidance, snapshot-based Model CRUD dirty state, FlatPage.Title as an optional accessible region label, scroll restoration, latest-search cancellation, diagnostics, saved views, guarded context switching, nested filter trees, stable-key record workspaces, and failed-only bulk retry. See Mobile reliability, Hybrid hardening, P0 compatibility, and P1/P2 productivity.
The package remains UI-only: hosts own authentication and authorization, scoped persistence, API queries, transactions, refresh data loaders, cancellation/idempotency, native permissions, notification delivery, and native lifecycle evidence. A NuGet upgrade does not replace the canonical MAUI host adapters.
NuGet 2.1.19 added reusable ERP/HR/IoT operational compositions (FlatWorkInbox, freshness, scan, telemetry, record relationships, and personal workspace), semantic filled-surface contrast, and first-paint restoration of saved Device/Manual font size plus density. The Web and MAUI hosts seed the bootstrap contract before styles so theme or reconnect mounting cannot reset typography. See Multipurpose operational toolkit.
NuGet 2.1.18 added the public FlatCardGrid.SearchTrailingActions slot and package-owned input-boundary positioning, hover/focus treatment, responsive width, and reserved input space. Compact filter toggles therefore stay inside the search field while the separate toolbar action container is omitted when empty. This fixed the prior package integration gap; consumers must not recreate it with local CSS.
NuGet 2.1.17 introduced the FlatMudProviders DI precedence patch: resolve a directly registered FlatUiDisplayOptions instance before IOptions<FlatUiDisplayOptions> and defaults, so an implicit wrapper created by AddOptions() cannot mask the canonical Web/MAUI singleton configuration.
Vertical is the default operational layout. It provides a searchable grouped sidebar, route-aware expansion, status badges, the mandatory Settings entry, and a right-aligned Logout action.
All sidebar groups are expanded below. The sidebar remains scrollable at ordinary desktop heights; open the complete menu image to inspect every entry.
Vertical menu — expand all, complete menu tree
Horizontal is optimized for desktop Web. It moves the product identity and module navigation into a compact menu bar while retaining the same routes, permissions, theme, and page state.
MAUI Hybrid shares the Blazor/MudBlazor UI with Web and integrates platform interactions through the native host. The canonical behavior covers gestures, Back navigation, keyboard, system bars, and lifecycle—not only a responsive mobile layout. Razor content still renders inside BlazorWebView; native adapters own the platform integration.
- Native pull-to-refresh: eligible pages with a real refresh handler use the host's native
RefreshView.FlatRefreshMode.Autoselects the available native adapter in MAUI and the package gesture on Web. Refresh starts only when the actual scroll chain is already at the top; active overlays, busy state, and editing gestures suspend it.Disabledturns off package refresh gestures while ordinary scrolling remains available. Position the native spinner below the measured status-bar inset + 60dp AppBar + 8dp gap without moving the WebView. - Back navigation: Android system/gesture Back follows one pipeline: dismiss the visible keyboard, handle the topmost modal/sheet and its unsaved-change guard, traverse actual Blazor/WebView history, then use native root behavior. Rejected discard keeps the editor and route intact. Bottom navigation restores the visited submenu and parent before the actual origin: General Ledger → Finance → ERP → origin. Direct links do not invent a menu trail.
- System bars and safe areas: the Toolkit host bridge follows the resolved AppBar/theme with contrast-aware status-bar icons. Use measured insets on rotation and layout changes. Native fullscreen editors consume the top inset once at the panel boundary, keep Back aligned with the AppBar, and leave the footer reachable.
- Touch, scrolling, and keyboard: preserve normal scrolling while disabling native bounce/edge glow. Ordinary UI text is not selectable; text-bearing editors retain caret, selection, and clipboard behavior. Device typography and accessibility scaling remain the default. Focused fields stay visible above the keyboard through their actual scroll owner.
- Startup and recovery: show the continuous theme-aware loading spinner (the sample label is
Memuat, Indonesian for “Loading”) before interactivity and during session validation; create the Router only after the root check. Keep visited Bottom history across responsive sidebar transitions. Durable workspace/draft recovery is opt-in and host-scoped; restore drafts only with consent, and authorize deep links before navigation. - Native capabilities: connectivity, notifications, camera/gallery, permissions, and resume behavior use host-owned adapters. Request permissions at the appropriate user action and report unsupported or denied capabilities explicitly.
Use MAUIHost.Sample as the complete native-integration reference. A generated MAUI consumer must wire the required adapters when enabling a capability such as native pull-to-refresh; upgrading NuGet alone does not install those host integrations. Reuse package components/assets and canonical host seams rather than adding consumer CSS or duplicate gesture handlers. See Hybrid hardening, Back navigation, Native editor header, and Recovery.
These are implementation contracts. Validate Android gestures, IME, rotation, resume, and process recovery against the exact built APK on an emulator/device; validate iOS on macOS/Xcode and an iOS simulator/device. Responsive Web screenshots and successful builds do not establish native runtime parity.
The mobile composition is responsive, touch-aware, safe-area ready, and designed for both mobile Web and MAUI Blazor Hybrid. Tables can become equivalent cards, dialogs become full-screen editors, and controls retain usable touch geometry.
| Phone Bottom menu | Bottom Sheet — ERP menu open |
|---|---|
 |
 |
Bottom navigation reuses the same route tree as the other layouts and is selected from viewport width alone. The package default threshold is 600px; this template explicitly uses 900px, so tablet and phone widths receive the bottom bar while wider Web and Windows desktop windows receive the sidebar. It supports up to five root actions, a More entry for overflow, recursive child navigation, and safe-area spacing. Child and overflow navigation defaults to the package Bottom Sheet; the in-content MainView tile presentation is explicit opt-in.
Every initialized consumer keeps Settings → Application preferences in the AppBar overflow menu. The surface previews changes immediately, persists them only after Save, restores the current saved state on Cancel, and returns to host-configured defaults through Restore application defaults.
The canonical Settings surface provides:
- Theme: Light (default), Dark / Night, or Auto following the device preference.
- Navigation: Vertical, Horizontal, or viewport-aware Bottom navigation; Bottom child menus can use a sheet or the main content view.
- Color system: built-in operational palettes plus separate validated sidebar background/foreground colors for Light and Dark.
- Density and fields: spacing defaults to the package
Defaultdensity preset; Compact and Comfortable remain selectable, alongside the supported input presentation style. - Typography: Device ownership by default, or a bounded Manual font-size preference.
- Surface behavior: backdrop opacity and controlled corner radius.
- Recovery: live preview, Cancel rollback, Save persistence, and restoration to
appsettings.jsondefaults. - Host extension: local OS/device notification preferences remain owned by the Web or MAUI host, including permission and scheduling.
The source defaults live under OpxFlatUi:Display in appsettings.json, including the canonical DefaultRoundedSizePx: 7 for ordinary buttons and bottom-sheet top corners. Other standard surfaces remain square, and consumers must not reproduce this package-owned geometry with local CSS. Real per-user storage, authorization, cross-device synchronization, notification delivery, and administrative policy remain consumer responsibilities.
MudBlazor remains the underlying visual component library. Opx.MudBlazor.FlatUi adds higher-level operational components and application contracts so consumers do not have to reconstruct responsive shells, workflows, editors, and enterprise states from individual controls.
| Capability | Principal OPX components |
|---|---|
| Application shell and navigation | FlatAppShell, FlatHorizontalNavigation, FlatDynamicMenu, IFlatNavigationRouteResolver, FlatNavigationBadge, FlatPage, FlatPanel, FlatFab |
| Theme, startup, and system feedback | FlatMudProviders, FlatDisplaySettings, FlatSessionRestore, FlatReconnectModal, FlatProcessingContainer, FlatMessageBoxDialog, FlatUnsavedChangesGuard, FlatDeviceNotification |
| Dashboard and status widgets | FlatWidget, FlatMetricWidget, FlatActionMetricWidget, FlatProgressWidget, FlatSegmentProgressWidget, FlatCompactMetric, FlatStatCard, FlatStatusChip, FlatActivityItem, FlatTaskItem, FlatTimeline |
| Data grids and hierarchy | FlatDataGrid with built-in materialized-view .xlsx export, FlatMobileGrid, FlatGroupedDataGrid, FlatEditableGrid, FlatAdvancedEditableGrid, FlatTreeGrid, FlatPager, FlatGridPreferencesPanel, FlatHierarchyDesigner |
| CRUD, forms, lookup, and input | FlatModelCrud, FlatSchemaForm, FlatModelFormDesigner, FlatFormModal, FlatEditorWorkspace, FlatEntityLookup, FlatSearchComboBox, FlatMultiSelect, FlatNumberInput, FlatMoneyInput, FlatQuantityInput, FlatMaterialIconPicker |
| Files, images, and documents | FlatFileUpload, FlatImageUpload, FlatDataImport, FlatDocumentWorkspace, FlatDocumentAttachmentManager, FlatPdfViewer, FlatPrintLayout |
| Reports and analytics | FlatOperationalReportViewer, FlatPivotGrid, FlatPivotFieldChooser, FlatDataComparisonGrid, FlatQueryBuilder |
| Scheduling and planning | FlatCalendar, FlatScheduler, FlatRecurrenceEditor, FlatKanbanBoard, FlatPlanningBoard, FlatDashboardComposer |
| Transactions, ERP, and operations | FlatTransactionWorkspace, FlatEditableGrid, FlatRecordLifecycleHeader, FlatJournalEntryGrid, FlatReconciliationWorkspace, FlatInventoryAllocationWorkspace, FlatInventoryTraceabilityWorkspace, FlatBomRoutingEditor, FlatMrpCapacityWorkspace, FlatIntegrationCenter, FlatBackgroundOperationCenter |
| Workflow and governance | FlatWorkflowPanel, FlatWorkflowDesigner, FlatApprovalInbox, FlatApprovalMatrixDesigner, FlatRuleBuilder, FlatBulkActionBar, FlatAuditTrail, FlatGovernancePanel |
| Communication and collaboration | FlatChatShell, FlatChatMessage, FlatEmailShell, FlatCollaborationPanel, FlatConflictResolver, FlatNotificationCenter |
| Content, commerce, and profile | FlatProductDetail, FlatCatalogGrid, FlatCatalogCard, FlatJobCard, FlatJobEmailApplicationDialog, FlatVacancyActions, FlatProfileCard, FlatProfileListItem, FlatProfileAvatar, FlatDetailSection, FlatInfoItem, FlatEmptyState |
| Spatial UI | FlatVectorMap, FlatSpatialWorkspace and their typed region, route, marker, layer, and geofence models |
| Application experience | FlatCommandPalette, FlatAccessibilitySettings, FlatPermissionView, FlatFeatureView, FlatMasterDetailWorkspace, FlatOfflineSyncPanel |
The OPX components own presentation, responsive composition, interaction state, and typed intent. APIs, database access, business calculations, authorization, transaction commits, file storage, notifications, realtime transport, and audit persistence stay host-owned.
Browse the complete screenshot catalog for every shared showcase route, named component panels, widgets, and open dialog previews. Each entry links to its canonical Razor source and lists the OPX components used by that page. Expand a section below to view its screenshots without leaving this README.
Captured from the running NuGet 2.1.27 Web sample with original package styles, Light theme, Fluent Blue, Device typography, and Default spacing. Desktop captures use 1440 × 1000; the Bottom menu and Bottom Sheet use 390 × 844. The complete Vertical tree uses a taller viewport, with all eleven groups expanded through their normal controls. Images show sample data, not production records.
Coverage means the shared showcase's rendered pages and named panels—not every state, tab, virtualized row, or public API type. Dialog previews are included separately. Native-only MAUI capabilities and operating-system permission/print dialogs require device screenshots; responsive Web images do not prove native behavior. See the catalog's evidence notes and capture manifest.
Accordions — /accordions
Canonical source · Route: /accordions
FlatAccordion, FlatAccordionItem, FlatPage, FlatPanel.
Default accordion
Accordion flush
Accordions with icons
Accordions without toggle icons
Advanced Editable Grid — /advanced-editable-grid
Canonical source · Route: /advanced-editable-grid
FlatAdvancedEditableGrid, FlatAdvancedGridCommandKind, FlatNumberInput, FlatNumberText, FlatPage.
Advanced editable grid
Ai Chat — /ai-chat
Canonical source · Route: /ai-chat
FlatChatConversationItem, FlatChatMessage, FlatChatShell, FlatChatTypingIndicator, FlatEmptyState, FlatPage.
Business Toolkit — /business-toolkit
Canonical source · Route: /business-toolkit
FlatApprovalLevel, FlatApprovalMatrixDesigner, FlatBomNode, FlatBomRoutingEditor, FlatDataComparisonGrid, FlatDataComparisonRow, FlatDocumentAttachment, FlatDocumentAttachmentManager, FlatInventoryTraceabilityWorkspace, FlatPage, FlatQueryBuilder, FlatQueryField, FlatRecurrenceEditor, FlatRuleBuilder, FlatRuleField, FlatTraceabilityNode.
Inventory Traceability
BOM and Routing
Rule Builder
Approval Matrix
Document Attachments
Recurrence Editor
Query Builder
Data Comparison
Calendar — /calendar
Canonical source · Route: /calendar
FlatCalendar, FlatFormModal, FlatPage, FlatSchedulerItem.
Catalog — /catalog
Canonical source · Route: /catalog
FlatCatalogCard, FlatCatalogGrid, FlatFilterWorkspace, FlatPage.
Charts — /charts
Canonical source · Route: /charts
FlatPage, FlatPanel.
Line
Line
Bar
Stacked Bar
Pie
Donut
Timeseries
Heat Map
Rose
Radar
Sankey
Scatter Plot
Chat — /chat
Canonical source · Route: /chat
FlatChatConversationItem, FlatChatMessage, FlatChatShell, FlatChatTypingIndicator, FlatEmptyState, FlatPage, FlatProfileAvatar.
Components Gallery — /components
Canonical source · Route: /components
FlatDetailSection, FlatEmptyState, FlatFormModal, FlatInfoItem, FlatMaterialIconPicker, FlatMultiSelect, FlatMultiSelectOption, FlatNumberInput, FlatPageHeading, FlatPanel, FlatProcessingContainer, FlatProfileAvatar, FlatReconnectModal, FlatSearchComboBox, FlatSearchComboOption, FlatSessionRestore, FlatStatCard.
Theme Tokens
Empty State
Button States
Info Items
Formatted Number Input
Profile Avatar
Optional Page Heading
Processing State
Message Box
Reconnect Notice
Form Modal
MudBlazor Line Chart
MudBlazor Pie Chart
Multi Select
Search Combo Box
Material Icon Picker
Multi Select with leading visuals
Crud — /crud
Canonical source · Route: /crud
FlatDataGrid, FlatEmptyState, FlatFormModal, FlatInfoItem, FlatMobileGrid, FlatPage, FlatPager.
Data Grid Large — /data-grid-large
Canonical source · Route: /data-grid-large
FlatDataGrid, FlatEmptyState, FlatInfoItem, FlatMobileGrid, FlatPage, FlatPager, FlatStatusChip.
Development Rules — /development-rules
Canonical source · Route: /development-rules
FlatPage, FlatPanel.
Canonical development path
Dynamic Menu — /dynamic-menu
Canonical source · Route: /dynamic-menu
FlatDynamicMenu, FlatDynamicMenuItem, FlatInfoItem, FlatNavigationMenuItem, FlatPage.
Edit Account — /account/edit
Canonical source · Route: /account/edit
FlatMultiSelect, FlatMultiSelectOption, FlatPage, FlatPanel, FlatProfileAvatar.
Profile picture
Account details
Security
Email — /email
Canonical source · Route: /email
FlatEmailFolderItem, FlatEmailMessageItem, FlatEmailShell, FlatEmptyState, FlatFab, FlatPage, FlatProfileAvatar.
Enterprise Toolkit — /enterprise-toolkit
Canonical source · Route: /enterprise-toolkit
FlatAuditEvent, FlatAuditTrail, FlatBulkAction, FlatBulkActionBar, FlatDashboardComposer, FlatDashboardWidgetDefinition, FlatDataImport, FlatDataImportColumn, FlatDataImportField, FlatDataImportRow, FlatDocumentItem, FlatDocumentWorkspace, FlatDocumentWorkspaceAction, FlatFormFieldDefinition, FlatInfoItem, FlatMasterDetailWorkspace, FlatNotificationCenter, FlatNotificationItem, FlatOfflineSyncPanel, FlatPage, FlatPivotFieldChooser, FlatPivotFieldDefinition, FlatPrintLayout, FlatScheduler, FlatSchedulerItem, FlatSchemaForm, FlatSyncItem, FlatWorkflowPanel, FlatWorkflowStep.
Workspace productivity
Workspace productivity
Record workspace
Bulk progress
ERP · HR · IoT work inbox
Telemetry and alarms
My workspace
Data Import Wizard
Pivot Field Chooser
Master–Detail Workspace
Audit Trail and Diff
Schema Form
Approval Workflow
Bulk Actions
Scheduler
Dashboard Composer
Notification Center
Offline Sync
Document Workspace
Print Layout
Erp Finance — /erp/finance
Canonical source · Route: /erp/finance
FlatInfoItem, FlatPage, FlatPanel, FlatStatCard.
Profit and loss trend
Period close
Recent journal activity
Erp Finance — /erp/finance/general-ledger
Canonical source · Route: /erp/finance/general-ledger
FlatInfoItem, FlatPage, FlatPanel, FlatStatCard.
Erp Finance — /erp/finance/payables
Canonical source · Route: /erp/finance/payables
FlatInfoItem, FlatPage, FlatPanel, FlatStatCard.
Supplier open items
Erp Finance — /erp/finance/receivables
Canonical source · Route: /erp/finance/receivables
FlatInfoItem, FlatPage, FlatPanel, FlatStatCard.
Customer open items
Erp Hr — /erp/hr
Canonical source · Route: /erp/hr
FlatInfoItem, FlatPage, FlatPanel, FlatStatCard.
Workforce by department
People actions
Recent employees
Erp Hr — /erp/hr/employees
Canonical source · Route: /erp/hr/employees
FlatInfoItem, FlatPage, FlatPanel, FlatStatCard.
Erp Hr — /erp/hr/attendance
Canonical source · Route: /erp/hr/attendance
FlatInfoItem, FlatPage, FlatPanel, FlatStatCard.
Today's attendance
Erp Overview — /erp
Canonical source · Route: /erp
FlatInfoItem, FlatPage, FlatPanel, FlatStatCard.
Revenue and operating cost
Workflow inbox
Business exceptions
Erp Production — /erp/production
Canonical source · Route: /erp/production
FlatInfoItem, FlatPage, FlatPanel, FlatStatCard.
Output by production line
Shift performance
Active production orders
Erp Production — /erp/production/work-orders
Canonical source · Route: /erp/production/work-orders
FlatInfoItem, FlatPage, FlatPanel, FlatStatCard.
Erp Production — /erp/production/quality
Canonical source · Route: /erp/production/quality
FlatInfoItem, FlatPage, FlatPanel, FlatStatCard.
Quality inspection queue
Erp Release Train — /erp-release-train
Canonical source · Route: /erp-release-train
FlatApprovalInbox, FlatApprovalInboxItem, FlatCapacityBucket, FlatGovernanceCheck, FlatGovernancePanel, FlatIntegrationCenter, FlatIntegrationRun, FlatInventoryAllocation, FlatInventoryAllocationWorkspace, FlatJournalEntryGrid, FlatMaterialRequirement, FlatMrpCapacityWorkspace, FlatNumberText, FlatPage, FlatTransactionEngine, FlatValidationIssue, FlatWorkflowDesigner, FlatWorkflowNode.
2.1 · Transaction Engine
2.2 · Inventory Allocation
2.3 · Finance
2.4 · Workflow Designer
2.4 · Approval Inbox
2.5 · Integration Center
3.0 · MRP and Capacity
3.0 · Governance
Erp Sales — /erp/sales
Canonical source · Route: /erp/sales
FlatInfoItem, FlatPage, FlatPanel, FlatStatCard.
Sales versus target
Fulfillment pipeline
Sales orders
Erp Sales — /erp/sales/orders
Canonical source · Route: /erp/sales/orders
FlatInfoItem, FlatPage, FlatPanel, FlatStatCard.
Sales versus target
Fulfillment pipeline
Sales orders
Erp Supply Chain — /erp/procurement
Canonical source · Route: /erp/procurement
FlatInfoItem, FlatPage, FlatPanel, FlatStatCard.
Spend by category
Procurement actions
Recent purchase orders
Erp Supply Chain — /erp/inventory
Canonical source · Route: /erp/inventory
FlatInfoItem, FlatPage, FlatPanel, FlatStatCard.
Erp Toolkit — /erp-toolkit
Canonical source · Route: /erp-toolkit
FlatBackgroundOperation, FlatBackgroundOperationCenter, FlatEntityLookup, FlatInfoItem, FlatJournalEntryGrid, FlatLifecycleStep, FlatMoneyInput, FlatPage, FlatPlanningBoard, FlatQuantityInput, FlatReconciliationWorkspace, FlatRecordLifecycleHeader, FlatTransactionAction, FlatTransactionWorkspace.
Transaction Workspace
Entity Lookup and Composite Inputs
Background Operations
Journal Entry Grid
Reconciliation Workspace
Planning Board
Experience Toolkit — /experience-toolkit
Canonical source · Route: /experience-toolkit
FlatAccessibilitySettings, FlatCollaborationComment, FlatCollaborationPanel, FlatCommandDefinition, FlatCommandPalette, FlatConflictField, FlatConflictResolver, FlatFeatureView, FlatFormFieldDefinition, FlatFormStepDefinition, FlatFormValidationIssue, FlatOperationState, FlatPage, FlatPermissionView, FlatPresenceUser, FlatSchemaForm, FlatSessionTimeout, FlatUnsavedChangesGuard.
Hybrid recovery
Hybrid recovery
Mobile reliability
Command Palette
Advanced Schema Form
Accessibility Gate
Realtime Collaboration UI
Offline Conflict Workspace
Global Application Foundation
Workspace State & Server Data
Undo, Redo & Observability
Security & Accessibility UX
File Upload — /file-upload
Canonical source · Route: /file-upload
FlatFileUpload, FlatFileUploadResult, FlatImageUpload, FlatPage, FlatPanel.
Flat File Upload
Flat File Upload
Multiple Image Upload
Grid Editor — /grid-editor
Canonical source · Route: /grid-editor
FlatEditableGrid, FlatEmptyState, FlatGridEditResult, FlatInfoItem, FlatPage.
Grid Preferences — /grid-preferences
Canonical source · Route: /grid-preferences
FlatDataGrid, FlatGridCellContext, FlatGridPreferencesPanel, FlatPage, FlatPanel.
Advanced Grid Preferences
Advanced Grid Preferences
Grouped Data Grid — /grouped-data-grid
Canonical source · Route: /grouped-data-grid
FlatGroupedDataGrid, FlatGroupedGridGroup, FlatInfoItem, FlatPage.
Hierarchy Designer — /hierarchy-designer
Canonical source · Route: /hierarchy-designer
FlatHierarchyDesigner, FlatHierarchyDesignerItem, FlatPage, FlatPanel.
Home — /
Canonical source · Route: /
FlatPage, FlatPanel, FlatStatCard.
Ticket Trend
Recent Activity
Priority Assets
Job Landing — /job-landing
Canonical source · Route: /job-landing
FlatEmptyState, FlatJobEmailApplicationDialog.
Jobs — /jobs
Canonical source · Route: /jobs
FlatCardGrid, FlatFormModal, FlatJobCard, FlatPage, FlatPanel, FlatVacancyActions.
Hiring trend
Hiring trend
Recent activity
Open roles
Kanban — /kanban
Canonical source · Route: /kanban
FlatFab, FlatKanbanBoard, FlatKanbanCard, FlatPage.
Model Crud — /model-crud
Canonical source · Route: /model-crud
FlatEntityLookup, FlatFileUploadResult, FlatGridEditResult, FlatImageUpload, FlatModelCrud, FlatModelFieldDefinition, FlatPage.
Model Form Designer — /model-form-designer
Canonical source · Route: /model-form-designer
FlatModelFieldDefinition, FlatModelFormDesigner, FlatPage.
Monitoring — /monitoring
Canonical source · Route: /monitoring
FlatInfoItem, FlatPanel, FlatStatCard.
Live endpoint status
Incident feed
Notebook Finance 01
Notebook HR 02
Production Scanner Gate
Warehouse Packing
Developer Mobile Rig
Quality Station
Monitoring Computers — /monitoring/computers
Canonical source · Route: /monitoring/computers
FlatEmptyState, FlatInfoItem, FlatMobileGrid, FlatPage.
Monitoring Database — /monitoring-database
Canonical source · Route: /monitoring-database
FlatEmptyState, FlatInfoItem, FlatMobileGrid, FlatPage.
Operations Workspace — /operations-workspace
Canonical source · Route: /operations-workspace
FlatEmptyState, FlatInfoItem, FlatOperationalWorkItem, FlatPage, FlatStatusChip.
VPN access is unavailable
Replace warehouse scanner
Pivot — /pivot
Canonical source · Route: /pivot
FlatFormModal, FlatInfoItem, FlatPage, FlatPivotGrid.
Product Detail — /product-detail
Canonical source · Route: /product-detail
FlatFormModal, FlatPage, FlatProductDetail, FlatProductMetric.
Product Editor — /product-editor
Canonical source · Route: /product-editor
FlatEditorSection, FlatEditorWorkspace, FlatFileUpload, FlatFileUploadItem, FlatMultiSelect, FlatMultiSelectOption, FlatPage, FlatUnsavedChangesGuard.
Product Management — /product-management
Canonical source · Route: /product-management
FlatDataGrid, FlatEmptyState, FlatFilterWorkspace, FlatFormModal, FlatInfoItem, FlatMobileGrid, FlatPage, FlatPager.
Profile Grid — /profile-grid
Canonical source · Route: /profile-grid
FlatCardGrid, FlatFab, FlatFormModal, FlatPage, FlatProfileCard, FlatProfileCardStat, FlatProfileListItem, FlatStatusChip.
Reports — /reports
Canonical source · Route: /reports
FlatFormModal, FlatInfoItem, FlatOperationalReportViewer, FlatPage, FlatStatCard.
Sales Pipeline — /sales-pipeline
Canonical source · Route: /sales-pipeline
FlatKanbanBoard, FlatPage, FlatPipelineCard.
Scheduler — /scheduler
Canonical source · Route: /scheduler
FlatPage, FlatScheduler, FlatSchedulerCalendar, FlatSchedulerItem.
Spatial Operations — /spatial-operations
Canonical source · Route: /spatial-operations
FlatMapPoint, FlatPage, FlatSpatialGeofence, FlatSpatialLayer, FlatSpatialWorkspace, FlatVectorMap, FlatVectorMapMarker, FlatVectorMapRegion, FlatVectorMapRoute.
Static Data — /static-data
Canonical source · Route: /static-data
FlatEmptyState, FlatInfoItem, FlatMobileGrid, FlatPage.
Tree Grid — /tree-grid
Canonical source · Route: /tree-grid
FlatEmptyState, FlatPage, FlatPanel, FlatTreeGrid, FlatTreeGridMoveResult.
Vector Map — /vector-map
Canonical source · Route: /vector-map
FlatMapPoint, FlatPage, FlatVectorMap, FlatVectorMapMarker, FlatVectorMapRegion, FlatVectorMapRoute.
Widgets — /widgets
Canonical source · Route: /widgets
FlatActionMetricWidget, FlatActivityItem, FlatCompactMetric, FlatMetricWidget, FlatPage, FlatProgressWidget, FlatSegmentProgressWidget, FlatTaskItem, FlatWidget.
Tile boxes
Compact metrics
Statistics
Other widgets
Open dialogs and command palette
Question message box · /components
Warning message box · /components
Information message box · /components
Error message box · /components
Form modal · /components
Command palette · /experience-toolkit
- Three responsive navigation modes — Vertical sidebar, Horizontal desktop menu, and viewport-aware Bottom navigation from one route tree.
- Adaptive data presentation —
FlatDataGriddesktop tables and equivalent tablet/mobile cards preserve one query, filter, sort, paging, selection, permission, and loading state. - Native Excel export —
FlatDataGridcan export its materialized visible view to.xlsx; permission-sensitive, remote, virtualized, and unbounded exports remain host-owned throughOnExport. - Public and admin recruitment samples — the public Job Landing returns typed email-application intent without sending data, while the admin Jobs page demonstrates create/edit, publish/close, and delete vacancy intent.
- Operational dashboards — compact KPI widgets, charts, activity feeds, status chips, summary lists, quick actions, and responsive panel composition.
- CRUD and transaction workspaces — responsive editor shells, full-screen mobile forms, dirty-state protection, entity lookup, bulk actions, approval flows, and host-owned persistence boundaries.
- Advanced reusable surfaces — Pivot, Kanban, Chat, Email, command palette, schema-driven forms, editable grids, audit trail, collaboration, conflict resolution, document workspaces, import, calendar, and notification samples.
- Theme and display preferences — Light theme with Fluent Blue default palette, Dark / Night, Auto, multiple palettes, density presets, Device or Manual typography, configurable backdrop, and controlled corner sizing.
- Shared loading system — responsive initial skeletons, AppBar operation progress,
FlatReconnectModal, and the mandatory MAUIMemuatspinner using the same package-owned visual. - Secure startup presentation —
FlatSessionRestoreblocks protected UI while the host validates an untrusted saved-session hint. Local storage is never the authorization authority. - MAUI system integration contract — AppBar-synchronized Android/iOS status bar, Device typography, accessibility-scaled text buttons, safe areas, lifecycle resynchronization, audited Android network/notification permission declarations, and native verification gates.
- Native interaction rules — normal scrolling without WebView bounce/edge glow, dedicated pull-to-refresh, and text selection limited to textbox-class inputs and editors.
- Package-owned reusable CSS — consumers load
_content/Opx.MudBlazor.FlatUi/opx-flat-ui.css; host CSS remains limited to application/domain composition. - No destination CSS override — consumer stylesheets may not target
.flat-*/.mud-*, redeclare--opx-*, copy package rules, or patch package geometry with specificity/!important; reusable visual changes go through package options/public APIs or a source/package fix. - Auditable output — versioned JSON schema, consumer audit script, source mapping, responsive rules, Release build checks, and fresh-template validation.
Business data, formulas, permissions, authentication, persistence, integration, transactions, and server-side authorization remain owned by the consuming application.
| Mode | Intended surface | Behavior |
|---|---|---|
| Vertical | Web desktop, tablet fallback, responsive drawer | Searchable grouped sidebar with active-route expansion. |
| Horizontal | Web desktop only | Compact product/menu bar with module dropdowns. |
| Bottom | Responsive Web, MAUI Hybrid, and resized Windows EXE | Package threshold defaults to 600px; this template uses 900px, with sidebar fallback above it. |
Navigation, theme, palette, density, and typography are available from the mandatory Settings → Application preferences surface.
| Dependency | Version |
|---|---|
Opx.MudBlazor.FlatUi |
2.1.27 |
MudBlazor |
9.10.0 |
| MAUI mobile template | 10.0.90 |
CommunityToolkit.Maui |
15.0.1 |
| Target framework | .NET 10 |
| Consumer contract schema | 3.1 |
Install or refresh the repository template:
dotnet new install . --forceCreate a NuGet-only consumer:
dotnet new opx-flatui-web -n MyOpxApp
Set-Location MyOpxApp\MyOpxApp
.\run-clean.ps1The Web template produces sibling MyOpxApp (thin executable host) and Opx.MudBlazor.FlatUi.Showcase (shared page composition) projects. The first run cleans both projects' exact bin and obj, restores reusable OPX UI 2.1.27 from NuGet.org, and starts with the canonical Light theme, Settings menu, default navigation, package-owned CSS, responsive rules, first-paint typography/density restoration, and runtime OPX attribution.
Audit a generated consumer before accepting its output:
..\.agents\skills\opx-flat-ui-development\scripts\audit_flat_ui_consumer.ps1 . -ExactSample
dotnet build -c Release --no-restoreCreate the canonical Android/iOS MAUI Blazor Hybrid consumer:
dotnet new opx-flatui-maui -n MyOpxMobileApp
Set-Location MyOpxMobileApp
.\run-clean.ps1 -PrepareOnly
.\scripts\audit_maui_consumer.ps1 -ExactSample
dotnet build -f net10.0-android -c Release --no-restoreThe MAUI template pins MAUI 10.0.90, CommunityToolkit.Maui 15.0.1, MudBlazor 9.10.0, and OPX Flat UI 2.1.27. It replaces stock .NET/MAUI splash artwork with a neutral white-on-white invisible launch asset, then hands off to the continuous Memuat spinner. It also includes first-paint Device/Manual font and density restoration, the native status-bar bridge, root-before-Router authorization gate, Settings, default sidebar/Bottom navigation, Device typography, no-bounce WebView handlers, textbox-only text selection, package-only reusable CSS, a machine-readable mobile contract, and its audit script. Android 12+ still owns a mandatory system splash frame; the template removes its stock artwork rather than claiming that OS frame can be eliminated. Replace the sample authorization validator and sample business data before production use.
When a prompt requests UI that is the same, exact, canonical, or matches the sample/source of truth, use Exact Sample Mode. Generate a fresh Web or MAUI template, resolve the PageId, and pass -ExactSample before wiring host data or services. The audit rejects drift in canonical shell/page files; branding, wording, data, authorization, callbacks, and persistence may then change through existing seams without changing geometry or behavior.
samples/Opx.MudBlazor.FlatUi.Showcase— single shared source of truth for pages, sample services, navigation metadata, and composition CSS.samples/Opx.MudBlazor.FlatUi.Sample— thin NuGet Web host and one half of the multi-project Web template..agents/skills/opx-flat-ui-development— UI/UX, business/data analysis, implementation, responsive, Web, and MAUI rules.docs/CONSUMER-CONTRACT.md— consumer ownership and integration contract.docs/DATA-GRID-EXCEL-EXPORT.md,docs/JOB-LANDING.md, anddocs/JOBS-DASHBOARD.md— feature and sample ownership contracts.RULES.mdand.agents/RULES.md— mandatory implementation rules.flat-ui.contract.jsonand its schema inside the sample — machine-readable baseline enforced by the audit.templates/Opx.MudBlazor.FlatUi.Maui.Template— Android/iOS Blazor Hybrid source-of-truth template, mobile contract, and native audit.samples/Opx.MudBlazor.FlatUi.MauiHost.Sample— thin NuGet Android/Windows host that loads the shared Showcase routes, with startup gating, native adapters, edge-to-edge AppBar/status-bar integration, and runtime performance measurements.docs/MAUI-HYBRID-HOST.md— ownership, startup, responsive navigation, native status-bar, build, and device-evidence contract for the host sample.
The screenshots above are captured from the real local Blazor Web sample at representative desktop and phone viewports. They prove the rendered Web composition and responsive CSS at capture time.
The repository now includes a real Android/iOS MAUI Blazor Hybrid template in addition to the Web template. A successful Android compile proves source/package compatibility only. Status-bar appearance, safe areas, keyboard/IME, system back, lifecycle, suspend/resume, no-bounce WebView behavior, native text selection, and the Memuat bootstrap transition still require representative emulator or physical-device validation; iOS build and runtime validation require macOS/Xcode.
OPX Flat UI — Web and MAUI Hybrid ready. Powered by MudBlazor.