@happyvertical/smrt-svelte 0.55.17 → 0.55.19

package/agents/cookbook-shell.md

@@ -18,7 +18,7 @@ sample data source are not part of it.
 | Entry | Contents |
 |---|---|
 | `./cookbook/server` | Svelte-free and Node-safe. `loadCookbookApp` (file + manifests + validation), `readInstalledManifests`, `hasCookbook`, and the pure builder/catalog/theme functions and types. Use it in `+layout.server.ts`. |
-| `./cookbook` | Everything above that is browser-safe, plus `CookbookApp`, `CookbookSectionPage`, `applyCookbookTheme`, `createCookbookRegistry`, `createSectionOverview`. |
+| `./cookbook` | Everything above that is browser-safe, plus `CookbookApp`, `CookbookSectionPage`, `CookbookSectionOverview`, `applyCookbookTheme`, `createCookbookRegistry`, `createSectionOverview`. |
 
 ## Pure core (no DOM, Node-testable)
 
@@ -84,7 +84,8 @@ sample data source are not part of it.
 `slotItems`, `settingsHref`, ...), and:
 
 - `loaders` (`metric` / `records` / `chart` data loaders; with `metric` and
-  `records` the section pages add the count and latest records),
+  `records` the section pages add the count and latest records; `shortcuts`
+  is a `CookbookShortcutsLoader`, below),
 - `widgetContext` (host capabilities for browser-side widget loads),
 - `resolveExport` (a static map of dynamic imports; turns a recipe export
   reference into a component, used for `shell-widget` slot items and recipe
@@ -107,6 +108,19 @@ registry, recipe widgets and slot items are resolved in effects (a bundled
 `resolveExport` is async), so a section page's overview appears after hydration,
 not in the server HTML.
 
+## Host shortcuts loader (#3888)
+
+`CookbookApp loaders.shortcuts` is `(ctx, defaults: ShortcutEntry[]) =>
+Promise<ShortcutEntry[]>` (`ShortcutEntry = { href, label, icon?, description?,
+count? }`, exported from `./cookbook` and `./overview`).
+`createCookbookRegistry` computes the default entries from the shell's resolved
+sections, then, when the host supplies `shortcuts`, passes them through it
+(`composeShortcutsLoader`); with no host loader the registry's loader is
+unchanged. The host returns the entries to show (add `count`, reorder, add or
+drop). If it throws, that load keeps the defaults (the page never empties
+because a count query failed) unless the load itself was aborted. The shortcuts
+widget renders `count` as "N records" (plural-aware i18n, tabular figures).
+
 ## `CookbookSectionPage`
 
 A section's own page: title, icon and description (the user's renames win over
@@ -117,6 +131,16 @@ route: `s/[slug]/+page.svelte` renders
 `<CookbookSectionPage slug={page.params.slug} />`. It must be inside
 `CookbookApp`.
 
+Props (also on `CookbookSectionOverview`, #3888): `presentation?: 'plain' | 'card'`
+(default `'plain'`) is passed to `OverviewGrid`, so the default section body
+lists shortcut entries as unframed rows on the panel surface (the shortcuts
+widget receives the grid's `presentation` and drops its per-entry frame); `'card'`
+keeps the framed look, and editing always keeps its frame.
+`heading?: Snippet<[{ section: CookbookSectionHeadingInfo }]>` replaces the
+default title block (`{ id, title, description?, icon }`) on the page; on a
+standalone `CookbookSectionOverview` it renders above the grid and needs the
+`section` prop.
+
 ## Using it in an app
 
 ```ts

package/agents/overview-surfaces.md

@@ -198,16 +198,26 @@ shape. Data shapes are in `widgets/data.ts`.
 | Type | Options | Data |
 |---|---|---|
 | `metric` | `title`, `model`*, `measure`, `field`, `filter` | `{ value, format?, currency?, label?, change?, href? }` (money = integer minor units) |
-| `chart` | `title`, `model`*, `groupBy`, `measure`, `field`, `period`, `style` (bar/line), `filter` | `{ points: [{ label, value }], format?, currency?, href? }`, one measure of a runtime report |
+| `chart` | `title`, `model`*, `groupBy`, `measure`, `field`, `period`, `style` (bar/line/table/pie/stat), `filter` | `{ points: [{ label, value }], format?, currency?, href?, delta? }`, one measure of a runtime report |
 | `records` | `title`, `model`*, `sort`, `direction`, `limit`, `filter` | `{ rows: [{ id, title, subtitle?, meta?, href? }], total?, href? }`; the loader chooses the title field and the visible records |
-| `shortcuts` | `title`, `section` | `{ items: [{ id, label, href, icon?, description? }] }`; `shortcutsFromNav(sections, sectionId)` maps `resolveShellNavModel` / `useShellLayout().sections` (visible entries, user renames) |
+| `shortcuts` | `title`, `section` | `{ items: [{ id, label, href, icon?, description?, count? }] }` (`count` draws as "N records"; widgets also receive the grid's `presentation` and the shortcuts widget drops its entry frame under `plain`); `shortcutsFromNav(sections, sectionId)` maps `resolveShellNavModel` / `useShellLayout().sections` (visible entries, user renames) |
 | `note` | `title`, `body` (Markdown) | none |
 
 `note` renders `parseMarkdown` output as elements (headings, paragraphs, lists,
 quotes, fenced code, bold/italic/code/links). There is no `{@html}`; raw HTML is
 literal text and `safeHref` limits links to http(s), mailto, same-site paths and
 fragments. Record and shortcut hrefs pass `safeHref` too. Charts carry their
-numbers as text (inline for bars, a visually hidden table for the line).
+numbers as text (inline for bars, a visually hidden table for the line and the
+donut, a visible table for `table`, the value itself for `stat`).
+
+Chart styles (#3888, the renderer half of #3878's runtime-report chart hints):
+`table` is a plain table of the series (tabular figures); `pie` is an SVG donut
+with a legend (value and share) and a visually hidden data table, slices cycling
+through the primary/secondary/tertiary/info tokens then their containers;
+`stat` is the last point as a headline value with its change (`delta`, percent,
+else derived from the last two points). Motion honours `prefers-reduced-motion`.
+The chart option schema is **version 2**: v1 (`style` bar or line, or no version)
+migrates by identity (`migrateChartOptions`), so saved overviews keep validating.
 
 ## Recipe widgets (`recipe-widgets.ts`)
 

package/agents/workspace.md

@@ -226,6 +226,52 @@ dialog and the global shortcut, so it mounts once. Planner-style hosts that
 rendered their own `header.end` assistant toggle should pass `dockToggles`
 (`dock:assistant`) and `user` instead.
 
+Async sign-out (#3860): `onSignOut?: () => void | Promise<void>` (AppShell,
+`WorkspaceAccountMenu`, `ShellSettingsPage`/`ShellSettingsPanel`) is awaited.
+While pending the control is busy (`aria-busy`) and disabled, so a second
+activation never fires the callback again; on success the account menu closes;
+on rejection the menu (or Account section) stays as it was and shows an inline
+`role="alert"` "Couldn't sign out. Try again." (`ui.shell_settings.sign_out_failed`).
+A rejection is caught, never an unhandled rejection; the control is usable again
+for a retry. `signOutHref` links are unchanged.
+
+Unrendered regions in settings (#3860): `ShellState.regionsRendered:
+Record<PanelEdge, boolean>` (read-only for consumers; `AdminShell` writes it
+from the same `topRendered`/`bottomRendered`/`rightRendered`/`isEdgeShown('left')`
+logic that collapses empty bands and edges, default all `true`) says whether a
+region is actually on screen, distinct from the user's visibility choice. The
+Layout rows in `ShellSettingsPanel` list a region when it is rendered, or when
+the user hid it (so Show can always restore it); a shown region that is not
+rendered (empty band, edge not presented at this width) has no row. The
+"cannot hide the last region" guard still counts every shown region. In edit
+mode every band renders, so every available region is listed.
+
+`user` prop type (#3860): `AppShell`'s `user` is `ShellUser` (exported from
+`./app`): `null` or `{ id: string | null | undefined; email?; name?; avatarUrl?
+(string | null) }`, all readonly. The runtime's `SessionLayoutUser`
+(`data.session.user`) and a full `User` both assign without a cast
+(`__tests__/shell-user.test.ts` proves it with `expectTypeOf`). `id` stays
+required but accepts `null`/`undefined` because an unsaved `User` carries
+that. The shell reads `name`, `email` and `avatarUrl` for the account menu
+(the avatar now shows) and forwards the same object to `Provider` untouched
+(one internal cast; the Provider is typed for the full `User`), so nothing is
+added or invented on the way.
+
+DockToggle fallback (#3860): a `dockToggles` entry also takes `href?`, `ready?`
+(reactive, default `true`), `labelNotReady?` and `onpress?(event, { registered,
+ready }) => boolean | void`. Precedence on activation: (1) `onpress` runs first;
+returning `false` or calling `event.preventDefault()` stops everything (no
+toggle, no navigation). (2) If the tool is registered with `useShellDock()`
+(and the dock is available) and `ready !== false`, the dock toggles as before.
+(3) Otherwise `href` is followed, else nothing happens (the inert
+`aria-disabled` button, unchanged). With an `href` in state 3 the toggle renders
+as an `<a>` (middle-click and open-in-new-tab work) with no `aria-pressed` /
+`aria-expanded`. Its name and tooltip are `labelNotReady`, else "Set up {label}"
+(`ui.dock_toggles.set_up`), whenever it is not ready or links. The phone tab
+bar's dock tab (the first toggle) follows the same resolution through the shared
+`resolveDockToggle` / `runDockTogglePress` helpers in `dock-toggle.ts`; that tab
+becomes a link entry. `PhoneBottomBarItem.onclick` now receives the click event.
+
 `ShellLayout.placements?: Record<itemId, ShellSlot>` (additive, still version
 1) overrides default slots. Pure helpers in `layout.ts` (also `./workspace/layout`):
 `placeShellItem(layout, id, slot, defaultSlot?)` (passing the default drops a
@@ -622,3 +668,13 @@ lives beside, not inside, `./workspace` so the AdminShell barrel stays free of
   form is a plain `method="POST"`; pass `enhance` from `$app/forms` to enhance
   it. The token is a hidden field only and is never stored, logged or shown.
   Single-use, loopback-only enforcement stays server-side.
+
+## Theme (premium baseline)
+
+The shell only consumes theme tokens; CSS and tokens changed, DOM and behaviour did not.
+
+- Surface ladder: main and phone top bar on `--smrt-surface-ground`; header, footer and top/bottom bands, corners and the left sidebar on `--smrt-surface-panel`; the dock (right edge), drawers, phone sheet and phone drawers, popovers, toasts and the shortcuts dialog on raised glass (`--smrt-glass-surface-strong`, `--smrt-elevation-3`, drawers and sheet `--smrt-elevation-4`, plus `--smrt-inset-highlight`). Edit-mode strips use `--smrt-surface-sunken`.
+- Region edges are `--smrt-hairline`; no solid outline-variant borders remain in the shell. Edit-mode drop zones and strips use the hairline with `border-style: dashed` and state tokens for fill. The resize separator keeps its own primary affordance.
+- Glass: the header, phone top bar, phone tab bar, dock, drawers, sheet and popovers set `backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation))` over `--smrt-glass-surface` (`-strong` for raised regions). Outside the Glass preset the tokens are opaque with blur 0. `backdrop-filter` makes the element a containing block for fixed descendants; the e2e suite covers the account menu and the floating layout toggle.
+- State layers: rows, tabs, rail buttons, toggles and the account trigger use one `::after` veil (`background: currentColor`, opacity from `--smrt-state-hover` / `-pressed` / `-selected`); transparent icon buttons use the equivalent `color-mix`. The selected nav row keeps its container fill and start indicator under the veil. Disabled uses `--smrt-state-disabled`. Focus rings come from `--smrt-focus-ring-*`; control radius and heights from `--smrt-control-*`.
+- E2E fixture: `ShellFixture` accepts `?theme=glass|material|studio|smrt` and `?scheme=dark` (all presets are imported) for per-preset screenshots.

package/dist/components/app/AppShell.svelte

@@ -70,6 +70,7 @@ import {
   resolvePhoneTabBar,
 } from './phone-tabs.js';
 import RuntimeDiagnosticsWebMcp from './RuntimeDiagnosticsWebMcp.svelte';
+import type { ShellUser } from './shell-user.js';
 import type {
   AppShellAccountMenu,
   AppShellCommandPalette,
@@ -112,8 +113,12 @@ interface Props {
    * default slot (users can still move it in the layout editor).
    */
   accountMenu?: AppShellAccountMenu;
-  /** Called when the account menu's Sign out is chosen (wins over `signOutHref`). */
-  onSignOut?: () => void;
+  /**
+   * Called 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.
+   */
+  onSignOut?: () => unknown;
   /**
    * Where 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`
@@ -136,8 +141,12 @@ interface Props {
   commandPalette?: AppShellCommandPalette;
   /** Options for the Provider's WebMCP integration; passed through unchanged. */
   webmcp?: boolean | WebMcpProviderConfig;
-  /** Authenticated user forwarded to the Provider; `null` renders the shell signed out. */
-  user?: User | null;
+  /**
+   * The 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.
+   */
+  user?: ShellUser;
   /** The user's resolved permission slugs, forwarded to the Provider for permission-gated UI. */
   permissions?: string[];
   /** Register the read-only runtime diagnostics WebMCP tool. */
@@ -571,11 +580,23 @@ function accountPlacement(
   return alignStart ? 'bottom-start' : 'bottom-end';
 }
 const accountIdentity = $derived.by(() => {
-  const record = (user ?? {}) as { name?: unknown; email?: unknown };
+  const record = (user ?? {}) as {
+    name?: unknown;
+    email?: unknown;
+    avatarUrl?: unknown;
+  };
   const name = typeof record.name === 'string' ? record.name.trim() : '';
   const email = typeof record.email === 'string' ? record.email.trim() : '';
-  return { name, email };
+  const avatarUrl =
+    typeof record.avatarUrl === 'string' && record.avatarUrl
+      ? record.avatarUrl
+      : undefined;
+  return { name, email, avatarUrl };
 });
+// The Provider is typed for the full `User`. The shell hands it exactly the
+// object the host passed (no fields added or invented), so a minimal session
+// projection reaches it just as it did when the prop was typed as `User`.
+const providerUser = $derived(user as unknown as User | null);
 // The floating toggle sits over the header's end (header visible), the top of
 // the right sidebar (header hidden) or the top of main (neither); reserve that room so it covers no
 // control. AdminShell reads these custom properties.
@@ -867,6 +888,7 @@ const EDGE_OF_REGION: Record<ShellRegion, PanelEdge> = {
   <WorkspaceAccountMenu
     userName={accountIdentity.name || accountIdentity.email}
     email={accountIdentity.email}
+    avatarUrl={accountIdentity.avatarUrl}
     {compact}
     {tenantLabel}
     {onSignOut}
@@ -949,7 +971,7 @@ const EDGE_OF_REGION: Record<ShellRegion, PanelEdge> = {
   />
 {/snippet}
 
-<Provider {webmcp} {user} {permissions}>
+<Provider {webmcp} user={providerUser} {permissions}>
   <RuntimeDiagnosticsWebMcp enabled={runtimeDiagnostics} />
   <ThemeProvider {preset} {colorScheme} persist={true}>
     {#if !chrome}
@@ -1049,26 +1071,26 @@ const EDGE_OF_REGION: Record<ShellRegion, PanelEdge> = {
     color: var(--smrt-color-primary);
   }
   .smrt-layout-toggle { display: inline-flex; align-items: center; gap: var(--smrt-spacing-1); }
-  .smrt-layout-toggle--floating { position: fixed; z-index: 45; inset-block-start: max(var(--smrt-spacing-3), env(safe-area-inset-top)); inset-inline-end: max(var(--smrt-spacing-3), env(safe-area-inset-right)); border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface-container-high); box-shadow: var(--smrt-elevation-2); }
+  .smrt-layout-toggle--floating { position: fixed; z-index: 45; inset-block-start: max(var(--smrt-spacing-3), env(safe-area-inset-top)); inset-inline-end: max(var(--smrt-spacing-3), env(safe-area-inset-right)); border: var(--smrt-hairline); border-radius: var(--smrt-radius-full); background: var(--smrt-surface-raised); box-shadow: var(--smrt-elevation-3), var(--smrt-inset-highlight); }
   .smrt-layout-toggle--floating :global(.smrt-shell-icon-button) { border-radius: var(--smrt-radius-full); }
   .smrt-layout-toggle :global(.smrt-shell-icon-button[aria-pressed='true']) { background: var(--smrt-color-primary-container); color: var(--smrt-color-on-primary-container); }
   .smrt-app-shell-color-scheme { display: inline-flex; align-items: center; }
   .smrt-app-shell-color-scheme :global(.smrt-color-scheme-toggle__switch) { min-block-size: var(--smrt-control-target-min); }
   .smrt-app-shell-palette { display: inline-flex; min-inline-size: 0; }
-  .smrt-app-shell-palette[data-search] :global(.smrt-command-palette-trigger) { inline-size: min(28rem, 40vw); justify-content: flex-start; border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface-variant); }
+  .smrt-app-shell-palette[data-search] :global(.smrt-command-palette-trigger) { inline-size: min(28rem, 40vw); justify-content: flex-start; border: var(--smrt-hairline-strong); border-radius: var(--smrt-radius-full); background: var(--smrt-surface-control); color: var(--smrt-color-on-surface-variant); }
   .smrt-app-shell-palette[data-search] :global(.smrt-command-palette-trigger__hint) { margin-inline-start: auto; }
   .smrt-layout-live { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
   .smrt-edit-zone__label { flex: 0 0 auto; color: var(--smrt-color-on-surface-variant); font: var(--smrt-typography-label-small-font); white-space: nowrap; }
-  .smrt-edit-item { display: inline-flex; align-items: center; min-inline-size: 0; border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-medium); background: var(--smrt-color-surface); }
-  .smrt-edit-item--dragging { opacity: 0.55; }
+  .smrt-edit-item { display: inline-flex; align-items: center; min-inline-size: 0; border: var(--smrt-hairline); border-radius: var(--smrt-control-radius); background: var(--smrt-surface-raised); }
+  .smrt-edit-item--dragging { opacity: var(--smrt-state-disabled); }
   @media (prefers-reduced-motion: no-preference) {
     .smrt-edit-item { animation: smrt-edit-item-in var(--smrt-duration-short2) var(--smrt-easing-standard) backwards; }
   }
   @keyframes smrt-edit-item-in { from { opacity: 0; transform: scale(0.96); } }
   .smrt-edit-item__body { display: inline-flex; align-items: center; min-inline-size: 0; pointer-events: none; }
   .smrt-edit-item__grip { display: inline-grid; place-items: center; flex: 0 0 auto; inline-size: 1.5rem; block-size: 2rem; padding: 0; border: 0; border-radius: var(--smrt-radius-sm); background: transparent; color: var(--smrt-color-on-surface-variant); cursor: grab; touch-action: none; }
-  .smrt-edit-item__grip:hover { background: var(--smrt-color-surface-container-high); }
-  .smrt-edit-item__grip:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
+  .smrt-edit-item__grip:hover { background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent); }
+  .smrt-edit-item__grip:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   .smrt-edit-item__grip[aria-pressed='true'] { background: var(--smrt-color-primary-container); color: var(--smrt-color-on-primary-container); }
 }
 </style>

package/dist/components/app/AppShell.svelte.d.ts

@@ -4,13 +4,13 @@ import '@happyvertical/smrt-ui/themes/styles/base.css';
 import '@happyvertical/smrt-ui/themes/styles/fonts.css';
 import type { DataSurfaceRegistry } from '@happyvertical/smrt-ui/data';
 import { type Component, type Snippet } from 'svelte';
-import type { User } from '../../state/app-state.js';
 import type { WebMcpProviderConfig } from '../../web/webmcp-provider.js';
 import { type ShellLayout } from '../workspace/admin-shell/layout.js';
 import { type ShellSlot } from '../workspace/admin-shell/slots.js';
 import { type AdminShellProps, type ShellNavGroup, type ShellNavItem, type ShellPanelDefaults, type ShellSectionActionsContext } from '../workspace/admin-shell/types.js';
 import type { DockToggle } from './dock-toggle.js';
 import { type PhoneTabBarOptions } from './phone-tabs.js';
+import type { ShellUser } from './shell-user.js';
 import type { AppShellAccountMenu, AppShellCommandPalette, ShellSlotItem } from './slot-item.js';
 interface Props {
     /** Application name shown in the shell brand and app panel. */
@@ -47,8 +47,12 @@ interface Props {
      * default slot (users can still move it in the layout editor).
      */
     accountMenu?: AppShellAccountMenu;
-    /** Called when the account menu's Sign out is chosen (wins over `signOutHref`). */
-    onSignOut?: () => void;
+    /**
+     * Called 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.
+     */
+    onSignOut?: () => unknown;
     /**
      * Where 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`
@@ -73,8 +77,12 @@ interface Props {
     commandPalette?: AppShellCommandPalette;
     /** Options for the Provider's WebMCP integration; passed through unchanged. */
     webmcp?: boolean | WebMcpProviderConfig;
-    /** Authenticated user forwarded to the Provider; `null` renders the shell signed out. */
-    user?: User | null;
+    /**
+     * The 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.
+     */
+    user?: ShellUser;
     /** The user's resolved permission slugs, forwarded to the Provider for permission-gated UI. */
     permissions?: string[];
     /** Register the read-only runtime diagnostics WebMCP tool. */

package/dist/components/app/AppShell.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/app/AppShell.svelte.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"AppShell.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/app/AppShell.svelte.ts"],"names":[],"mappings":"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"}

package/dist/components/app/DockToggles.svelte

@@ -1,11 +1,18 @@
 <script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../i18n/strings.workspace.js';
 import { useShellDock } from '../workspace/admin-shell/dock.js';
 import {
   isShellIconName,
   SHELL_DEFAULT_TOOL_ICON,
   SHELL_ICON_PATHS,
 } from '../workspace/admin-shell/shell-icons.js';
-import type { DockToggle } from './dock-toggle.js';
+import {
+  type DockToggle,
+  type DockToggleResolution,
+  resolveDockToggle,
+  runDockTogglePress,
+} from './dock-toggle.js';
 
 interface Props {
   toggles: DockToggle[];
@@ -13,67 +20,101 @@ interface Props {
 
 let { toggles }: Props = $props();
 const dock = useShellDock();
+const { t } = useI18n();
 
 function iconFor(toggle: DockToggle): string | undefined {
   return toggle.icon ?? (toggle.tool === 'assistant' ? 'chat' : undefined);
 }
 
+function resolve(toggle: DockToggle): DockToggleResolution {
+  return resolveDockToggle(toggle, dock.has(toggle.tool) && dock.available);
+}
+
+function nameFor(toggle: DockToggle, notReady: boolean): string {
+  if (!notReady) return toggle.label;
+  return (
+    toggle.labelNotReady ??
+    t(M['ui.dock_toggles.set_up'], { label: toggle.label })
+  );
+}
+
 function press(event: MouseEvent, toggle: DockToggle): void {
-  if (!dock.has(toggle.tool) || !dock.available) return;
+  const resolution = resolve(toggle);
+  if (!runDockTogglePress(toggle, event, resolution)) return;
+  if (resolution.mode !== 'toggle') return;
   dock.toggle(toggle.tool, {
     returnFocus: event.currentTarget as HTMLElement,
   });
 }
 </script>
 
+{#snippet glyph(icon: string | undefined)}
+  {#if icon === 'chat'}
+    <svg
+      viewBox="0 0 24 24"
+      width="20"
+      height="20"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M21 11.5a8.5 8.5 0 0 1-12.4 7.5L3 20.5l1.6-5A8.5 8.5 0 1 1 21 11.5z" />
+    </svg>
+  {:else if icon === undefined || isShellIconName(icon)}
+    <svg
+      viewBox="0 0 24 24"
+      width="20"
+      height="20"
+      fill="currentColor"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d={SHELL_ICON_PATHS[icon === undefined ? SHELL_DEFAULT_TOOL_ICON : icon]} />
+    </svg>
+  {:else}
+    <span aria-hidden="true">{icon}</span>
+  {/if}
+{/snippet}
+
 <div class="smrt-dock-toggles" data-testid="dock-toggles">
   {#each toggles as toggle (toggle.tool)}
-    {@const registered = dock.has(toggle.tool) && dock.available}
-    {@const open = dock.isOpen(toggle.tool)}
+    {@const resolution = resolve(toggle)}
+    {@const registered = resolution.mode === 'toggle'}
+    {@const open = registered && dock.isOpen(toggle.tool)}
     {@const icon = iconFor(toggle)}
-    <!-- raw-primitive-allow: shell chrome toggle, not a content button -->
-    <button
-      type="button"
-      class="smrt-dock-toggles__button"
-      class:active={open}
-      data-dock-tool={toggle.tool}
-      aria-label={toggle.label}
-      title={toggle.label}
-      aria-pressed={open}
-      aria-expanded={open}
-      aria-controls="smrt-admin-shell-right-panel"
-      aria-disabled={registered ? undefined : true}
-      onclick={(event) => press(event, toggle)}
-    >
-      {#if icon === 'chat'}
-        <svg
-          viewBox="0 0 24 24"
-          width="20"
-          height="20"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          aria-hidden="true"
-        >
-          <path d="M21 11.5a8.5 8.5 0 0 1-12.4 7.5L3 20.5l1.6-5A8.5 8.5 0 1 1 21 11.5z" />
-        </svg>
-      {:else if icon === undefined || isShellIconName(icon)}
-        <svg
-          viewBox="0 0 24 24"
-          width="20"
-          height="20"
-          fill="currentColor"
-          aria-hidden="true"
-          focusable="false"
-        >
-          <path d={SHELL_ICON_PATHS[icon === undefined ? SHELL_DEFAULT_TOOL_ICON : icon]} />
-        </svg>
-      {:else}
-        <span aria-hidden="true">{icon}</span>
-      {/if}
-    </button>
+    {@const name = nameFor(toggle, resolution.notReady)}
+    {#if resolution.mode === 'link'}
+      <a
+        class="smrt-dock-toggles__button"
+        href={toggle.href}
+        data-dock-tool={toggle.tool}
+        aria-label={name}
+        title={name}
+        onclick={(event) => press(event, toggle)}
+      >
+        {@render glyph(icon)}
+      </a>
+    {:else}
+      <!-- raw-primitive-allow: shell chrome toggle, not a content button -->
+      <button
+        type="button"
+        class="smrt-dock-toggles__button"
+        class:active={open}
+        data-dock-tool={toggle.tool}
+        aria-label={name}
+        title={name}
+        aria-pressed={open}
+        aria-expanded={open}
+        aria-controls="smrt-admin-shell-right-panel"
+        aria-disabled={registered ? undefined : true}
+        onclick={(event) => press(event, toggle)}
+      >
+        {@render glyph(icon)}
+      </button>
+    {/if}
   {/each}
 </div>
 
@@ -88,12 +129,14 @@ function press(event: MouseEvent, toggle: DockToggle): void {
 
   .smrt-dock-toggles__button {
     display: inline-grid;
+    text-decoration: none;
     place-items: center;
-    inline-size: 2.25rem;
-    block-size: 2.25rem;
+    position: relative;
+    inline-size: var(--smrt-control-height-small);
+    block-size: var(--smrt-control-height-small);
     padding: 0;
     border: 1px solid transparent;
-    border-radius: var(--smrt-radius-md, 0.5rem);
+    border-radius: var(--smrt-control-radius);
     background: transparent;
     color: var(--smrt-color-on-surface);
     cursor: pointer;
@@ -106,22 +149,37 @@ function press(event: MouseEvent, toggle: DockToggle): void {
     }
   }
 
-  .smrt-dock-toggles__button:hover {
-    background: var(--smrt-color-surface-container-high);
+  /* State layer over the button; the active container fill sits under it. */
+  .smrt-dock-toggles__button::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: currentColor;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .smrt-dock-toggles__button:hover::after {
+    opacity: var(--smrt-state-hover);
+  }
+
+  .smrt-dock-toggles__button:active::after {
+    opacity: var(--smrt-state-pressed);
   }
 
   .smrt-dock-toggles__button:focus-visible {
-    outline: 2px solid var(--smrt-color-primary);
-    outline-offset: 2px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
   }
 
   .smrt-dock-toggles__button.active {
-    background: var(--smrt-color-primary-container, var(--smrt-color-surface-container-high));
-    color: var(--smrt-color-on-primary-container, var(--smrt-color-primary));
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
   }
 
   .smrt-dock-toggles__button[aria-disabled='true'] {
-    opacity: 0.5;
+    opacity: var(--smrt-state-disabled);
     cursor: default;
   }
 }

package/dist/components/app/DockToggles.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { DockToggle } from './dock-toggle.js';
+import { type DockToggle } from './dock-toggle.js';
 interface Props {
     toggles: DockToggle[];
 }

package/dist/components/app/DockToggles.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DockToggles.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/app/DockToggles.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGnD,UAAU,KAAK;IACb,OAAO,EAAE,UAAU,EAAE,CAAC;CACvB;AAgDD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"DockToggles.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/app/DockToggles.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,EACL,KAAK,UAAU,EAIhB,MAAM,kBAAkB,CAAC;AAG1B,UAAU,KAAK;IACb,OAAO,EAAE,UAAU,EAAE,CAAC;CACvB;AA6ED,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/app/PhoneTabBar.svelte

@@ -18,7 +18,11 @@ import {
   SHELL_PLACEHOLDER_ICON,
 } from '../workspace/admin-shell/shell-icons.js';
 import type { PhoneBottomBarEntry } from '../workspace/admin-shell/types.js';
-import type { DockToggle } from './dock-toggle.js';
+import {
+  type DockToggle,
+  resolveDockToggle,
+  runDockTogglePress,
+} from './dock-toggle.js';
 import {
   isTabCurrent,
   type PhoneTabNavEntry,
@@ -93,17 +97,38 @@ const items = $derived.by(() => {
   }));
   if (dockToggle) {
     const tool = dockToggle.tool;
-    out.push({
-      id: `dock:${tool}`,
-      label: dockToggle.label,
-      iconName: dockIcon(dockToggle),
-      active: dock.isOpen(tool),
-      expanded: dock.isOpen(tool),
-      controls: 'smrt-admin-shell-right-panel',
-      onclick: () => {
-        if (dock.has(tool) && dock.available) dock.toggle(tool);
-      },
-    });
+    const resolution = resolveDockToggle(
+      dockToggle,
+      dock.has(tool) && dock.available,
+    );
+    const toggling = resolution.mode === 'toggle';
+    const label = resolution.notReady
+      ? (dockToggle.labelNotReady ??
+        t(M['ui.dock_toggles.set_up'], { label: dockToggle.label }))
+      : dockToggle.label;
+    const press = (event: MouseEvent) => {
+      if (!runDockTogglePress(dockToggle, event, resolution)) return;
+      if (toggling) dock.toggle(tool);
+    };
+    out.push(
+      resolution.mode === 'link'
+        ? {
+            id: `dock:${tool}`,
+            label,
+            iconName: dockIcon(dockToggle),
+            href: dockToggle.href,
+            onclick: press,
+          }
+        : {
+            id: `dock:${tool}`,
+            label,
+            iconName: dockIcon(dockToggle),
+            active: toggling && dock.isOpen(tool),
+            expanded: toggling ? dock.isOpen(tool) : undefined,
+            controls: toggling ? 'smrt-admin-shell-right-panel' : undefined,
+            onclick: press,
+          },
+    );
   } else if (toolsTab) {
     out.push({
       id: 'tools',

package/dist/components/app/PhoneTabBar.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Component } from 'svelte';
-import type { DockToggle } from './dock-toggle.js';
+import { type DockToggle } from './dock-toggle.js';
 import { type PhoneTabNavEntry } from './phone-tabs.js';
 interface Props {
     /** Navigation destinations in order (see `phoneTabNavEntries`). */