AdminApp

The Sheen application baseline with placement-safe chrome, scoped services, retained content, and responsive details.@gemologic/sheen-patterns · application

Playground

preset

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.
Give each page one focal working region: a metric/chart overview, a collection toolbar and rows, a registry and create form, or settings with save/discard controls.
Use at most one filled accent action per active task surface; dialogs own a separate task and destructive confirmations use danger semantics.
Use semantic surface depth and explicit locale-aware numeric precision. Keep counts factual and consistent with the accepted workspace scope.
Compose structured fields from named controls with group counts and field-specific errors; preserve native form values and drafts through refresh.

Do not

Do not remount AdminApp during refresh or use it as a global arbitrary-content modal manager.
Do not invent historical trends, account-creation actions, or low-contrast text to fill a composition. Keep developer diagnostics in the explicit design lab.
Do not count accent actions across unrelated runtime surfaces with a global JSX rule or animate layout content on mount.

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. Optional group presentation='overflow' puts infrequent controls in a scoped, keyboard-operable popover; use icon factories for deferred rendering there.
`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.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.