AdminApp
The Sheen application baseline with placement-safe chrome, scoped services, retained content, and responsive details.@gemologic/sheen-patterns · applicationPlayground
Application content
<ThemeProvider><AdminApp label="Operations" pathname="/orders" product={{ name: "Northstar", href: "/" }} primaryNavigation={{ id: "primary", label: "Primary", items: [{ kind: "link", id: "orders", label: "Orders", href: "/orders" }] }} preset="standard"><p>Application content</p></AdminApp></ThemeProvider>Variant matrix
Standard admin baseline
Application content
preset: standard
Application content
preset: workspace
Application content
preset: horizontal
Application content
preset: inspector
Application content
Anatomy
- Package
@gemologic/sheen-patterns- Source
packages/patterns/src/AdminApp.tsx- Tokens
--sheen-admin-color-canvas--sheen-admin-color-topbar--sheen-admin-color-sidebar--sheen-admin-color-details--sheen-admin-color-status--sheen-admin-color-nav-hover--sheen-admin-color-nav-active--sheen-admin-color-nav-active-fg--sheen-color-focus-ring
Accessibility
Role: banner, navigation, main, complementary, contentinfo, dialog, statusKeyboard: Tab, Shift+Tab, ArrowLeft, ArrowRight, Home, End, Escape, mod+k, mod+/, ?Do
- Treat placements and appearance as stable server input; use themes and accents for global brand axes and admin aliases for shell-specific surfaces.
Do not
- Do not remount AdminApp during refresh or use it as a global arbitrary-content modal manager.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
label * | string | — | Accessible name for the primary content scrolling region. |
documentTitle | string | — | Optional accepted-route document title. Requires an app-owned MetaProvider. |
preset | AdminPreset | standard | Named deterministic placement configuration. |
appearance | AdminAppearance | — | Independent semantic chrome, navigation, and action treatments. Exact brand colors use the documented --sheen-admin-color-* aliases. |
theme | ThemeOverrides | — | Optional scoped theme, mode, accent, density, radius, motion, direction, and locale overrides. Omitted axes inherit; density alone defaults to comfortable. |
placements | readonly AdminPlacementOverride[] | — | Per-zone validated overrides. A zone may occur at most once. |
pathname * | string | — | Accepted app pathname for native navigation matching. |
router | RouterAdapter | — | Optional app-injected navigation and unsaved-change adapter. |
product | AdminProductModel | undefined | — | Optional app-owned product identity. |
workspace | AdminWorkspaceModel | undefined | — | Optional app-owned workspace selector model. |
primaryNavigation | AdminNavigationModel | undefined | — | Optional app-owned primary navigation tree. Links may expose named sibling action menus without nesting controls inside destinations. |
secondaryNavigation | AdminNavigationModel | undefined | — | Optional app-owned secondary navigation tree. Links may expose named sibling action menus without changing link semantics. |
currentView | JSX.Element | — | Optional breadcrumb or accepted current-view label. |
globalSearch | JSX.Element | — | Optional app-owned search control. Sheen does not perform the search. |
actionGroups | readonly AdminActionGroup[] | undefined | — | Semantic primary, utility, and help action groups with native Button or Link behavior. |
notifications | AdminNotificationModel | undefined | — | Optional app-owned notification model. |
account | AdminAccountModel | undefined | — | Optional app-owned account identity and menu. Sheen does not authenticate. |
commandPalette | AdminCommandPaletteModel | undefined | — | Optional scoped command sources, state, persistence, and error hooks. |
details | AdminDetailsModel | undefined | — | Optional controlled or URL-backed details identity and its single content owner. |
statusBar | JSX.Element | — | Optional fixed application status content. |
refreshing | boolean | false | Marks accepted page content busy without replacing or remounting it. |
contentReady | boolean | — | Forwarded route readiness for pane-scroll restoration. |
sidebarCollapsed | boolean | — | Controlled desktop icon-rail state. Phone navigation remains a full drawer. |
defaultSidebarCollapsed | boolean | false | Server-resolved uncontrolled initial icon-rail state. |
onSidebarCollapsedChange | (collapsed: boolean) => void | — | Collapse proposals from the shell toggle and mod+/ shortcut. |
sidebarPersistence | AdminSidebarPersistence | — | Explicit server-resolved initial preference plus app-owned save and safe error handling. No localStorage read occurs. |
mobileSidebarOpen | boolean | — | Optional app-owned phone drawer state, independent of desktop collapse. |
onMobileSidebarOpenChange | (open: boolean) => void | — | Phone drawer visibility proposals. |
shortcutHelp | boolean | true | Enable the shared question-mark shortcut sheet and pending shortcut status. |
development | boolean | false | Enable development-only shortcut diagnostics. |
authorizationKey | string | — | Optional diagnostic boundary identity. Apps must clear unauthorized models and content synchronously when it changes. |
class | string | — | Additional class on the low-level AppShell root. |
children * | JSX.Element | — | Accepted page content. Background refresh keeps this owner mounted. |