# XWUIShellApp Universal adaptive shell for sites and apps - layout presets (`dashboard`, `website`, `docs`, `blank`), nav renderers, dockable inspector/bottom panel, status bar, and responsive tiers. Composes `XWUIShell` + `XWUIShellPart` into full app chrome. ## Activity Bar + Views (VS Code style) `activityBar: true` + `data.views` renders an icon rail; each view swaps the ```example file: examples/ActivityBarViews.ts html: examples/ActivityBarViews.html title: Activity Bar + Views (VS Code style) description: `activityBar: true` + `data.views` renders an icon rail; each view swaps the ``` ## Basic Usage - the app-shell regions Every region is given a label + its own colour so the structure is obvious: ```example file: examples/BasicUsage.ts html: examples/BasicUsage.html title: Basic Usage - the app-shell regions description: Every region is given a label + its own colour so the structure is obvious: ``` ## Blank Layout `layout: 'blank'` is the chrome-less variant - no header, sidebar, or footer, ```example file: examples/BlankLayout.ts html: examples/BlankLayout.html title: Blank Layout description: `layout: 'blank'` is the chrome-less variant - no header, sidebar, or footer, ``` ## Collapsed sidebar Starts collapsed; after 1.5s `toggleSidebar()` expands it so you can watch ```example file: examples/CollapsedSidebar.ts html: examples/CollapsedSidebar.html title: Collapsed sidebar description: Starts collapsed; after 1.5s `toggleSidebar()` expands it so you can watch ``` ## Command Palette (Ctrl+K) `commandPalette: true` turns every nav leaf into a searchable "go to…" command ```example file: examples/CommandPalette.ts html: examples/CommandPalette.html title: Command Palette (Ctrl+K) description: `commandPalette: true` turns every nav leaf into a searchable "go to…" command ``` ## Compact Density `density: 'compact'` tightens the app chrome - header, main-header, tab strip ```example file: examples/DensityCompact.ts html: examples/DensityCompact.html title: Compact Density description: `density: 'compact'` tightens the app chrome - header, main-header, tab strip ``` ## Docs Layout `layout: 'docs'` is a documentation shell - a persistent sidebar nav tree over ```example file: examples/DocsLayout.ts html: examples/DocsLayout.html title: Docs Layout description: `layout: 'docs'` is a documentation shell - a persistent sidebar nav tree over ``` ## Editor Split-Panes `splitMain()` carves the main content into N resizable panes (an IDE editor ```example file: examples/EditorSplitPanes.ts html: examples/EditorSplitPanes.html title: Editor Split-Panes description: `splitMain()` carves the main content into N resizable panes (an IDE editor ``` ## Full layout - every region populated Header · sidebar · main · inspector (right) · bottom dock · footer, each ```example file: examples/FullLayout.ts html: examples/FullLayout.html title: Full layout - every region populated description: Header · sidebar · main · inspector (right) · bottom dock · footer, each ``` ## Agent-DX Layout State (AI-native surface) `getLayoutState()` returns a structured snapshot, `describeLayout()` a one-line ```example file: examples/LayoutStateAI.ts html: examples/LayoutStateAI.html title: Agent-DX Layout State (AI-native surface) description: `getLayoutState()` returns a structured snapshot, `describeLayout()` a one-line ``` ## Mix Nav Mode `navMode: 'mix'` puts the top-level sections in a top tab strip and the active ```example file: examples/MixNav.ts html: examples/MixNav.html title: Mix Nav Mode description: `navMode: 'mix'` puts the top-level sections in a top tab strip and the active ``` ## Multi-App Switching + App Launcher Register several apps (each with its own nav); the header waffle button opens ```example file: examples/MultiApp.ts html: examples/MultiApp.html title: Multi-App Switching + App Launcher description: Register several apps (each with its own nav); the header waffle button opens ``` ## Nav Modes + Renderers (switch live) The same nav menu can render as a sidebar tree, a top tab strip, or mix ```example file: examples/NavModes.ts html: examples/NavModes.html title: Nav Modes + Renderers (switch live) description: The same nav menu can render as a sidebar tree, a top tab strip, or mix ``` ## Phone Bottom-Sheet Morph In a phone-width frame, the right inspector morphs into a bottom sheet - ```example file: examples/PhoneBottomSheet.ts html: examples/PhoneBottomSheet.html title: Phone Bottom-Sheet Morph description: In a phone-width frame, the right inspector morphs into a bottom sheet - ``` ## Relocatable Inspector The inspector docks to the side or the bottom; `setInspectorDock` re-parents ```example file: examples/RelocatablePanels.ts html: examples/RelocatablePanels.html title: Relocatable Inspector description: The inspector docks to the side or the bottom; `setInspectorDock` re-parents ``` ## Custom Nav Item Renderer `renderNavItem` replaces a nav row's content - here we add a count badge to ```example file: examples/RenderNavItem.ts html: examples/RenderNavItem.html title: Custom Nav Item Renderer description: `renderNavItem` replaces a nav row's content - here we add a count badge to ``` ## Contextual Save Bar A sticky save/discard strip that appears when there are unsaved changes. ```example file: examples/SaveBar.ts html: examples/SaveBar.html title: Contextual Save Bar description: A sticky save/discard strip that appears when there are unsaved changes. ``` ## Settings Drawer `settingsDrawer: true` adds a gear button to the header; clicking it opens a ```example file: examples/SettingsDrawer.ts html: examples/SettingsDrawer.html title: Settings Drawer description: `settingsDrawer: true` adds a gear button to the header; clicking it opens a ``` ## Status-Bar Item Groups The status bar has START / CENTRE / END slots (`statusBarStart` / `statusBar` ```example file: examples/StatusBarGroups.ts html: examples/StatusBarGroups.html title: Status-Bar Item Groups description: The status bar has START / CENTRE / END slots (`statusBarStart` / `statusBar` ``` ## Built-in Theme Switcher `themeSwitcher: true` mounts an XWUIStyleSwitch in the header - light / dark / ```example file: examples/ThemeSwitcher.ts html: examples/ThemeSwitcher.html title: Built-in Theme Switcher description: `themeSwitcher: true` mounts an XWUIStyleSwitch in the header - light / dark / ``` ## Toast Notifications `shell.notify({...})` raises a toast (composes XWUIToast). Four variants, an ```example file: examples/Toasts.ts html: examples/Toasts.html title: Toast Notifications description: `shell.notify({...})` raises a toast (composes XWUIToast). Four variants, an ``` ## Utility Bar (pinned tool popovers) A thin vertical icon rail on the end edge; each button toggles a pinned ```example file: examples/UtilityBar.ts html: examples/UtilityBar.html title: Utility Bar (pinned tool popovers) description: A thin vertical icon rail on the end edge; each button toggles a pinned ``` ## Watermark `watermark` tiles non-interactive diagonal text across the shell (security / ```example file: examples/Watermark.ts html: examples/Watermark.html title: Watermark description: `watermark` tiles non-interactive diagonal text across the shell (security / ``` ## Website Layout `layout: 'website'` composes a marketing-site shell - XWUIBarSiteHeader (top ```example file: examples/WebsiteLayout.ts html: examples/WebsiteLayout.html title: Website Layout description: `layout: 'website'` composes a marketing-site shell - XWUIBarSiteHeader (top ``` ## Header + collapsible sidebar + main Classic admin layout. The colour-coded sidebar lists nav links; the header is ```example file: examples/WithSidebar.ts html: examples/WithSidebar.html title: Header + collapsible sidebar + main description: Classic admin layout. The colour-coded sidebar lists nav links; the header is ``` ## Named Workspace Layouts Arrange the shell (collapse the sidebar, toggle the inspector) then SAVE the ```example file: examples/WorkspaceLayouts.ts html: examples/WorkspaceLayouts.html title: Named Workspace Layouts description: Arrange the shell (collapse the sidebar, toggle the inspector) then SAVE the ``` ```api ```