Svelte · App

AppShell

No summary has been written for AppShell. Everything below is generated from the declaration shipped in 0.57.40 and describes the real contract.

Public export

typescript

import { AppShell } from '@happyvertical/smrt-svelte/app';

Import path: @happyvertical/smrt-svelte/app
Props: 45
Props described: 44 of 45
Bindable state: 0
Callback events: 2
Verified release: 0.57.40

Props

NameTypeRequiredDescription

titlestringNoApplication name shown in the shell brand and app panel.

subtitlestringNoSecondary line under the application name in the shell brand.

logoSrcstringNoLogo shown before the title in the shell brand (and as the compact rail mark).

logoAltstringNoAlternative text for the logo (decorative by default: the title names the app).

homeHrefstringNoWhere the brand links to (e.g. the app's home); unlinked when omitted.

storageKeystringNolocalStorage key for the user's shell layout preferences.

navShellNavItem[]NoNavigation rendered in the tenant (left) panel.

navGroupsShellNavGroup[]NoGrouped navigation sections rendered below the flat `nav` items.

currentHrefstringNoCurrent path, used to highlight the active link (e.g. `page.url.pathname`).

tenantLabelstringNoTenant label shown in the app panel.

environmentstringNoEnvironment badge text (e.g. `local`).

settingsHrefstringNoWhen set, the app panel links here (e.g. a settings route).

accountMenuAppShellAccountMenuNoThe signed-in user's account menu: the built-in item `item:account` (shown when `user` is set). Default slot `leftSidebar.footer`: the full identity in the expanded sidebar footer, the avatar alone at the bottom of the collapsed rail; on phones the avatar sits at the end of the header band. Menu: name and email, Settings (`settingsHref`) and Sign out (`onSignOut` or `signOutHref`). `false` opts out; `{ slot }` overrides the default slot (users can still move it in the layout editor).

onSignOut() => unknownNoCalled when the account menu's Sign out is chosen (wins over `signOutHref`). May be async: the menu awaits it, shows a busy state, and on rejection stays open with an inline error.

signOutHrefstringNoWhere the account menu's Sign out link goes when there is no `onSignOut`. A link is a GET: never point it at the runtime's POST-only `/sign-out` route; pass `onSignOut` for that.

colorSchemeToggleboolean | { slot?: ShellSlot; }NoThe light/dark switch as the built-in item `item:color-scheme`: an icon-only toggle (moon or sun, "Dark mode" with `aria-pressed`). Default slot `leftSidebar.footer`, where it renders in the sidebar's utility row beside the collapse chevron, above the account menu, and stays a compact icon in the collapsed rail; on phones it defaults to `header.end`. On by default; `false` opts out, `{ slot }` sets the default slot (users can still move it in the layout editor).

commandPaletteAppShellCommandPaletteNoThe command palette as the built-in item `item:command-palette` (default slot `header.center`): a search-shaped trigger with the shortcut hint, a search icon button on phones. Mounts the existing `CommandPalette` (trigger, dialog and global shortcut). Off unless given.

webmcpboolean | WebMcpProviderConfigNoOptions for the Provider's WebMCP integration; passed through unchanged.

userShellUserNoThe signed-in identity (`ShellUser`): the runtime's `SessionLayoutUser` (`data.session.user`) or a full `User` both fit without a cast. It is forwarded to the Provider unchanged; `null` renders the shell signed out.

permissionsstring[]NoThe user's resolved permission slugs, forwarded to the Provider for permission-gated UI.

runtimeDiagnosticsbooleanNoRegister the read-only runtime diagnostics WebMCP tool.

configShellPanelDefaultsNoInitial panel states and presentation; forwarded to AdminShell.

layoutShellLayout | nullNoThe user's layout customization (panel visibility, navigation order and visibility), applied over `nav`, `navGroups` and `config`. Passing it makes the host the owner: the shell never stores it, and reports edits through `onlayoutchange` for the host to pass back. Pass `null` for "no customization yet". Omit both `layout` and `onlayoutchange` to let the shell keep the layout in the user's settings (`storageKey`).

onlayoutchange(layout: ShellLayout) => voidNoCalled with the next layout whenever the user (or an assistant) edits it.

presetThemePresetNoTheme preset applied by the ThemeProvider.

colorSchemeColorSchemeNoLight, dark or system color scheme; the user's persisted choice wins.

borderRadiusThemeConfig['borderRadius']NoCorner radius scale passed to the ThemeProvider; the user's persisted choice wins.

densityThemeConfig['density']NoControl target density passed to the ThemeProvider; the user's persisted choice wins.

contrastContrastPreferenceNoContrast preference passed to the ThemeProvider (`auto` follows the OS); the user's persisted choice wins.

appPanelDocsSnippetNoExtra app-panel content (e.g. selected-tenant notes).

dockSnippet<[DataSurfaceRegistry]>NoDock slot, rendered inside the shell so a host can place an assistant in a `ShellDockTool` without this package depending on it. It receives the `DataSurfaceRegistry` of the Provider the shell mounts, the same instance mounted routes register their surfaces on, so `<AssistantDock {registry} />` sees them with no second registry. Routes register on it when the `webmcp` UI is enabled (`webmcp: true`).

dockTogglesDockToggle[]NoIcon buttons, each placed in a shell `slot` (default `header.end`), each toggling the `ShellDockTool` with the same id open and closed. `aria-pressed` and `aria-expanded` follow the dock, focus moves into the dock when it opens and back to the button when it closes (Escape included). The `assistant` tool defaults to a chat-bubble icon. Hosts and assistants can drive the same dock from code with `useShellDock()`.

slotsPartial<Record<ShellSlot, Snippet>>NoHost content for any shell slot (`header.start|center|end`, `footer.start|center|end`, `leftSidebar.header|footer`, `rightSidebar.header|footer`). Rendered before dock toggles placed in the same slot. Each snippet is one movable item with id `slot:<slot>`; use `slotItems` for individually movable content.

slotItemsShellSlotItem[]NoHost items with stable ids, each in a default slot. Users can move them between slots in the layout editor (`ShellLayout.placements`). Rendered after `slots` content and before dock toggles in the same slot.

layoutEditingboolean | { slot?: ShellSlot; floating?: boolean; }NoOpt in to editing the layout in place. Adds the built-in shell item `item:layout-edit` (a pencil toggle, default slot `header.end`, or `{ slot }`); while on, slots render as labelled drop zones, items and navigation get grips, section headings get overlay icons and a floating toolbar, and hidden regions render as strips with a show control. Hosts and assistants drive it with `useShellLayout()` (`editing`, `setEditing`). Off (the default) leaves existing apps unchanged. `{ floating: true }` instead renders the toggle as a fixed round button in the top-right corner of the shell: not a placeable item (no slot, no grip), so hidden regions never displace it. The header and right sidebar reserve room for it so it covers none of their controls.

sectionActionsSnippet<[ShellSectionActionsContext]>NoHost icon buttons for each navigation section while the layout is edited (e.g. an Options gear or Help), rendered in the section's overlay icons and its floating toolbar. Receives the section id, label, whether it is user-created, and `editing`.

navMode'items' | 'sections' | 'sections-with-items'No`'items'` (default) lists every section's entries in the left sidebar. `'sections'` lists only the sections, one icon link each, to the section's own page (`ShellNavGroup.href`, else `sectionHref`, else its first entry); render the entries there with `ShellSectionMenu`. In edit mode the sidebar edits sections (grip, rename, hide, icon); entries are edited on the section page.

sectionHref(sectionId: string) => string | undefinedNoSection page for groups without an `href` (e.g. user-created ones).

iconComponentComponent<{ name: string; size?: number; }>NoRenders host icon names for sections and entries.

edgeTogglesAdminShellProps['edgeToggles']NoEdge toggle buttons and WASD drop-down panels (see `AdminShell`). Default `false`: regions are laid out inline and no toggles or hotkeys exist. Pass `true` (or a per-edge map) for the previous behaviour.

hotkeysbooleanNoKeyboard shortcuts; default follows `edgeToggles` (see `AdminShell`).

phoneTabBarboolean | PhoneTabBarOptionsNoPhone bottom tab bar (default `false`): on phones, the footer region's phone presentation (conceptually the footer's center slot) shows the first N navigation items as icon + label tabs (`aria-current` from `currentHref`), then a tab for the first `dockToggles` entry (or a "Tools" tab when the right edge has tools), then "More" opening the left drawer when navigation overflows. `N` defaults to 4 and counts the dock tab; `{ items }` overrides it. While on, the header "Tools" opener and the header copy of the dock tab's toggle are not rendered on phones. Read once at mount, like `config`.

phoneDock'sheet' | 'drawer'NoHow the right edge (dock tools) presents on phones: `'sheet'` rises from the bottom above the tab bar (grabber, swipe down or Escape to close), `'drawer'` slides in from the side. Default `'sheet'` when `phoneTabBar` is on, else `'drawer'`. An explicit value wins over `config.right.phone`. Read once at mount.

chromebooleanNoRender the shell chrome (default). `false` mounts only the Provider and ThemeProvider around `children`, retaining the canonical shell and layout contexts: no navigation, sidebars, header, or footer. Hosts can compose their own chrome and still render ShellSettingsPage against the same state.

childrenSnippetYesNot described

Bindable state

This component has no bindable public state.

Callback events

onSignOut() => unknown
onlayoutchange(layout: ShellLayout) => void

Public export

Props

Bindable state

Callback events

Examples and explanation