@happyvertical/smrt-svelte 0.51.39 → 0.53.0

package/dist/components/workspace/admin-shell/TenantNav.svelte

@@ -2,11 +2,17 @@
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import type { Component } from 'svelte';
 import { M } from '../../../i18n/strings.workspace.js';
-import type { ShellNavItem } from './types.js';
+import type { ShellNavGroup, ShellNavItem } from './types.js';
 
 interface Props {
   /** Navigation items with href, label, icon, and optional children. */
-  items: ShellNavItem[];
+  items?: ShellNavItem[];
+  /** Labelled, collapsible navigation groups, rendered after flat items. */
+  groups?: ShellNavGroup[];
+  /** Accessible name for this navigation landmark. */
+  'aria-label'?: string;
+  /** Target density; omit to inherit the theme density. */
+  density?: 'comfortable' | 'touch';
   /** Current URL to highlight the active navigation link. */
   currentHref?: string;
   /** Component used to render icon names as SVG or custom icons. */
@@ -18,7 +24,10 @@ interface Props {
 }
 
 let {
-  items,
+  items = [],
+  groups = [],
+  'aria-label': ariaLabel,
+  density,
   currentHref = '',
   iconComponent: IconComponent,
   collapsed = false,
@@ -35,17 +44,33 @@ function isVisibleActive(item: ShellNavItem): boolean {
   return collapsed && !!item.children?.some((child) => isActive(child));
 }
 
+/** Accessible label of an item's attention dot, or null when it has none. */
+function attentionLabel(item: ShellNavItem): string | null {
+  if (!item.attention) return null;
+  return typeof item.attention === 'string' && item.attention.trim()
+    ? item.attention.trim()
+    : t(M['ui.tenant_nav.needs_attention']);
+}
+
 function fallbackIcon(label: string): string {
   return label.trim().charAt(0).toLocaleUpperCase() || '?';
 }
 </script>
 
-<nav
-  class="smrt-tenant-nav"
-  class:smrt-tenant-nav--collapsed={collapsed}
-  aria-label={t(M['ui.tenant_nav.tenant_navigation'])}
->
-  {#each items as item (item.href)}
+{#snippet attention(item: ShellNavItem)}
+  {@const label = attentionLabel(item)}
+  {#if label}
+    <span
+      class="smrt-tenant-nav__attention"
+      data-attention
+      aria-hidden="true"
+    ></span>
+    <span class="smrt-tenant-nav__sr-only">({label})</span>
+  {/if}
+{/snippet}
+
+{#snippet navItems(entries: ShellNavItem[])}
+  {#each entries as item (item.href)}
     <div class="smrt-tenant-nav__section">
       <a
         href={item.href}
@@ -78,6 +103,7 @@ function fallbackIcon(label: string): string {
             <small>{item.badge}</small>
           {/if}
         {/if}
+        {@render attention(item)}
       </a>
       {#if item.children?.length && !collapsed}
         <div class="smrt-tenant-nav__children">
@@ -100,25 +126,82 @@ function fallbackIcon(label: string): string {
               {#if child.badge !== null && child.badge !== undefined}
                 <small>{child.badge}</small>
               {/if}
+              {@render attention(child)}
             </a>
           {/each}
         </div>
       {/if}
     </div>
   {/each}
+{/snippet}
+
+<nav
+  class="smrt-tenant-nav"
+  data-density={density}
+  class:smrt-tenant-nav--collapsed={collapsed}
+  aria-label={ariaLabel || t(M['ui.tenant_nav.tenant_navigation'])}
+>
+
+  {@render navItems(items)}
+  {#each groups as group}
+    <details class="smrt-tenant-nav__group" aria-label={group.heading} open>
+      <summary class="smrt-tenant-nav__heading">
+        {#if collapsed}
+          <span aria-hidden="true">{fallbackIcon(group.heading)}</span>
+          <span class="smrt-tenant-nav__sr-only">{group.heading}</span>
+        {:else}
+          <span>{group.heading}</span>
+        {/if}
+      </summary>
+      <div class="smrt-tenant-nav__group-items">{@render navItems(group.items)}</div>
+    </details>
+  {/each}
 </nav>
 
 <style>
   .smrt-tenant-nav,
   .smrt-tenant-nav__section,
-  .smrt-tenant-nav__children {
+  .smrt-tenant-nav__children,
+  .smrt-tenant-nav__group-items {
     display: grid;
     gap: var(--smrt-spacing-1);
   }
 
+  .smrt-tenant-nav__heading {
+    box-sizing: border-box;
+    min-block-size: var(--smrt-control-target-min, 0px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    color: var(--smrt-color-on-surface-variant);
+    font-size: var(--smrt-typography-label-large-size);
+    font-weight: var(--smrt-typography-weight-semibold);
+    border-radius: var(--smrt-radius-medium);
+    cursor: pointer;
+  }
+  .smrt-tenant-nav__heading:focus-visible {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: 2px;
+  }
+  .smrt-tenant-nav__group-items { margin-block-start: var(--smrt-spacing-1); }
+  .smrt-tenant-nav--collapsed .smrt-tenant-nav__heading {
+    display: grid;
+    place-items: center;
+    list-style: none;
+    inline-size: max(2.25rem, var(--smrt-control-target-min, 0px));
+    block-size: max(2.25rem, var(--smrt-control-target-min, 0px));
+    padding: 0;
+  }
+  .smrt-tenant-nav--collapsed .smrt-tenant-nav__heading::-webkit-details-marker { display: none; }
+
+  .smrt-tenant-nav[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min, 48px); }
+  .smrt-tenant-nav[data-density='comfortable'] { --smrt-control-target-min: 0px; }
   .smrt-tenant-nav a {
+    box-sizing: border-box;
+    min-block-size: var(--smrt-control-target-min, 0px);
     display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
+    /* Icon, label, then one auto column per trailing mark (badge, dot). */
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-auto-flow: column;
+    grid-auto-columns: auto;
     align-items: center;
     gap: var(--smrt-spacing-2);
     min-inline-size: 0;
@@ -136,8 +219,8 @@ function fallbackIcon(label: string): string {
   .smrt-tenant-nav--collapsed a {
     grid-template-columns: minmax(0, 1fr);
     place-items: center;
-    inline-size: 2.25rem;
-    block-size: 2.25rem;
+    inline-size: max(2.25rem, var(--smrt-control-target-min, 0px));
+    block-size: max(2.25rem, var(--smrt-control-target-min, 0px));
     padding: 0;
   }
 
@@ -178,6 +261,26 @@ function fallbackIcon(label: string): string {
     padding-inline-start: var(--smrt-spacing-4);
   }
 
+  .smrt-tenant-nav a {
+    position: relative;
+  }
+
+  .smrt-tenant-nav__attention {
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-error);
+    justify-self: end;
+  }
+
+  /* Collapsed: the dot sits on the icon's corner. */
+  .smrt-tenant-nav--collapsed .smrt-tenant-nav__attention {
+    position: absolute;
+    inset-block-start: 0.125rem;
+    inset-inline-end: 0.125rem;
+    box-shadow: 0 0 0 2px var(--smrt-color-surface);
+  }
+
   .smrt-tenant-nav__sr-only {
     position: absolute;
     inline-size: 1px;

package/dist/components/workspace/admin-shell/TenantNav.svelte.d.ts

@@ -1,8 +1,14 @@
 import type { Component } from 'svelte';
-import type { ShellNavItem } from './types.js';
+import type { ShellNavGroup, ShellNavItem } from './types.js';
 interface Props {
     /** Navigation items with href, label, icon, and optional children. */
-    items: ShellNavItem[];
+    items?: ShellNavItem[];
+    /** Labelled, collapsible navigation groups, rendered after flat items. */
+    groups?: ShellNavGroup[];
+    /** Accessible name for this navigation landmark. */
+    'aria-label'?: string;
+    /** Target density; omit to inherit the theme density. */
+    density?: 'comfortable' | 'touch';
     /** Current URL to highlight the active navigation link. */
     currentHref?: string;
     /** Component used to render icon names as SVG or custom icons. */

package/dist/components/workspace/admin-shell/TenantNav.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TenantNav.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/TenantNav.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,UAAU,KAAK;IACb,sEAAsE;IACtE,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kEAAkE;IAClE,aAAa,CAAC,EAAE,SAAS,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC3D,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAsFD,QAAA,MAAM,SAAS,0BAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TenantNav.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/TenantNav.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG9D,UAAU,KAAK;IACb,sEAAsE;IACtE,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC;IAClC,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kEAAkE;IAClE,aAAa,CAAC,EAAE,SAAS,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC3D,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AA6HD,QAAA,MAAM,SAAS,0BAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/workspace/admin-shell/WorkspaceAccountMenu.svelte

@@ -11,6 +11,8 @@ const TENANT_PREFIX = 'workspace-account:tenant:';
 export interface Props {
   /** Username or identifier displayed in the account menu. */
   userName: string;
+  /** Target density; omit to inherit the theme density. */
+  density?: 'comfortable' | 'touch';
   /** Custom display name for the user, falls back to userName. */
   userLabel?: string;
   /** URL for the user's avatar image. */
@@ -35,6 +37,7 @@ export interface Props {
 
 let {
   userName,
+  density,
   userLabel = '',
   avatarUrl,
   tenantLabel = '',
@@ -100,7 +103,7 @@ function handleSelect(id: string): void {
 }
 </script>
 
-<div class="smrt-workspace-account-menu" title={summaryTitle}>
+<div data-density={density} class="smrt-workspace-account-menu" title={summaryTitle}>
   <Dropdown
     {items}
     {placement}
@@ -129,6 +132,17 @@ function handleSelect(id: string): void {
     width: 100%;
   }
 
+  .smrt-workspace-account-menu[data-density='touch'] {
+    --smrt-control-target-min: var(--smrt-touch-target-min, 48px);
+  }
+  .smrt-workspace-account-menu[data-density='comfortable'] {
+    --smrt-control-target-min: 0px;
+  }
+  .smrt-workspace-account-menu :global(.dropdown__item) {
+    min-block-size: var(--smrt-control-target-min, 0px);
+    box-sizing: border-box;
+  }
+
   .smrt-workspace-account-menu :global(.dropdown) {
     display: flex;
     width: 100%;
@@ -141,7 +155,7 @@ function handleSelect(id: string): void {
     gap: var(--smrt-spacing-2);
     width: 100%;
     min-width: 0;
-    min-height: 2.75rem;
+    min-height: max(2.75rem, var(--smrt-control-target-min, 0px));
     padding: var(--smrt-spacing-2);
     border-radius: var(--smrt-radius-large);
     text-align: start;

package/dist/components/workspace/admin-shell/WorkspaceAccountMenu.svelte.d.ts

@@ -3,6 +3,8 @@ import type { WorkspaceAccountTenant } from './types.js';
 export interface Props {
     /** Username or identifier displayed in the account menu. */
     userName: string;
+    /** Target density; omit to inherit the theme density. */
+    density?: 'comfortable' | 'touch';
     /** Custom display name for the user, falls back to userName. */
     userLabel?: string;
     /** URL for the user's avatar image. */

package/dist/components/workspace/admin-shell/WorkspaceAccountMenu.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WorkspaceAccountMenu.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/WorkspaceAccountMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAY,MAAM,wBAAwB,CAAC;AAI1E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAGzD,MAAM,WAAW,KAAK;IACpB,4DAA4D;IAC5D,QAAQ,EAAE,MAAM,CAAC;IACjB,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,OAAO,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACnC,2CAA2C;IAC3C,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,sEAAsE;IACtE,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAqGD,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"WorkspaceAccountMenu.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/WorkspaceAccountMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAY,MAAM,wBAAwB,CAAC;AAI1E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAGzD,MAAM,WAAW,KAAK;IACpB,4DAA4D;IAC5D,QAAQ,EAAE,MAAM,CAAC;IACjB,yDAAyD;IACzD,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC;IAClC,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,OAAO,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACnC,2CAA2C;IAC3C,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,sEAAsE;IACtE,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAsGD,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/components/workspace/admin-shell/mobile-shell-dom.d.ts

@@ -0,0 +1,37 @@
+import { type ScrollChromeOptions } from './mobile-shell.js';
+import { type ShellState } from './state.svelte.js';
+/**
+ * Keep `shell.viewport` in step with the phone/desktop media queries (which
+ * applies each edge's `viewportDefaults` when the class changes).
+ */
+export declare function installShellViewport(shell: ShellState): () => void;
+/**
+ * Keep `shell.overlayMatches` in step with each side edge's `overlayMedia`
+ * query (edges without one are skipped).
+ */
+export declare function installShellOverlayMedia(shell: ShellState): () => void;
+/**
+ * Hide-on-scroll for one scroller (AdminShell's main region). Samples once
+ * per animation frame and reports changes of the hidden state.
+ */
+export declare function installScrollChrome(scroller: HTMLElement, options: {
+    onChange: (hidden: boolean) => void;
+    isPinned: () => boolean;
+    tuning?: ScrollChromeOptions;
+}): {
+    recheck: () => void;
+    reset: () => void;
+    destroy: () => void;
+};
+/**
+ * Watch for the on-screen keyboard. Sets `data-keyboard-open` on `<html>`
+ * (phone bars and `FormActionBar` hide on it) and keeps the focused field in
+ * view when the keyboard opens.
+ */
+export declare function installKeyboardWatcher(onChange: (open: boolean) => void): () => void;
+/**
+ * Report whether `container` holds a form action bar
+ * (`[data-form-action-bar]`), now and whenever its subtree changes.
+ */
+export declare function watchFormActionBar(container: HTMLElement, onChange: (present: boolean) => void): () => void;
+//# sourceMappingURL=mobile-shell-dom.d.ts.map

package/dist/components/workspace/admin-shell/mobile-shell-dom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-shell-dom.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/mobile-shell-dom.ts"],"names":[],"mappings":"AAOA,OAAO,EAIL,KAAK,mBAAmB,EAEzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAGL,KAAK,UAAU,EAChB,MAAM,mBAAmB,CAAC;AAE3B;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,IAAI,CAoBlE;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,IAAI,CAoBtE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE;IACP,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,MAAM,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,mBAAmB,CAAC;CAC9B,GACA;IAAE,OAAO,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAqCjE;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,GAChC,MAAM,IAAI,CA6BZ;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,WAAW,EACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,GACnC,MAAM,IAAI,CAYZ"}

package/dist/components/workspace/admin-shell/mobile-shell-dom.js

@@ -0,0 +1,150 @@
+/**
+ * DOM wiring for AdminShell's responsive chrome. Every installer returns a
+ * disposer and is a no-op without the browser API it needs, so callers can
+ * run them from `onMount` without guards. The decisions live in
+ * `./mobile-shell.ts`.
+ */
+import { isEditableTarget } from './hotkeys.js';
+import { FORM_ACTION_BAR_SELECTOR, keyboardLikelyOpen, ScrollChrome, viewportFor, } from './mobile-shell.js';
+import { ADMIN_SHELL_DESKTOP_QUERY, ADMIN_SHELL_PHONE_QUERY, } from './state.svelte.js';
+/**
+ * Keep `shell.viewport` in step with the phone/desktop media queries (which
+ * applies each edge's `viewportDefaults` when the class changes).
+ */
+export function installShellViewport(shell) {
+    if (typeof window === 'undefined' ||
+        typeof window.matchMedia !== 'function') {
+        return () => { };
+    }
+    const phone = window.matchMedia(ADMIN_SHELL_PHONE_QUERY);
+    const desktop = window.matchMedia(ADMIN_SHELL_DESKTOP_QUERY);
+    const sync = () => shell.setViewport(viewportFor({ phone: phone.matches, desktop: desktop.matches }));
+    sync();
+    phone.addEventListener('change', sync);
+    desktop.addEventListener('change', sync);
+    return () => {
+        phone.removeEventListener('change', sync);
+        desktop.removeEventListener('change', sync);
+    };
+}
+/**
+ * Keep `shell.overlayMatches` in step with each side edge's `overlayMedia`
+ * query (edges without one are skipped).
+ */
+export function installShellOverlayMedia(shell) {
+    if (typeof window === 'undefined' ||
+        typeof window.matchMedia !== 'function') {
+        return () => { };
+    }
+    const disposers = [];
+    for (const edge of ['left', 'right']) {
+        const query = shell.config.panels[edge].overlayMedia;
+        if (!query)
+            continue;
+        const media = window.matchMedia(query);
+        const sync = () => shell.setOverlayMatch(edge, media.matches);
+        sync();
+        media.addEventListener('change', sync);
+        disposers.push(() => media.removeEventListener('change', sync));
+    }
+    return () => {
+        for (const dispose of disposers)
+            dispose();
+    };
+}
+/**
+ * Hide-on-scroll for one scroller (AdminShell's main region). Samples once
+ * per animation frame and reports changes of the hidden state.
+ */
+export function installScrollChrome(scroller, options) {
+    const chrome = new ScrollChrome(options.tuning);
+    let frame = 0;
+    let last = false;
+    function sample() {
+        frame = 0;
+        const hidden = chrome.update({
+            y: scroller.scrollTop,
+            maxY: scroller.scrollHeight - scroller.clientHeight,
+            pinned: options.isPinned(),
+        });
+        if (hidden !== last) {
+            last = hidden;
+            options.onChange(hidden);
+        }
+    }
+    function onScroll() {
+        if (!frame)
+            frame = requestAnimationFrame(sample);
+    }
+    scroller.addEventListener('scroll', onScroll, { passive: true });
+    return {
+        recheck: sample,
+        reset() {
+            chrome.reset();
+            if (last) {
+                last = false;
+                options.onChange(false);
+            }
+        },
+        destroy() {
+            if (frame)
+                cancelAnimationFrame(frame);
+            scroller.removeEventListener('scroll', onScroll);
+        },
+    };
+}
+/**
+ * Watch for the on-screen keyboard. Sets `data-keyboard-open` on `<html>`
+ * (phone bars and `FormActionBar` hide on it) and keeps the focused field in
+ * view when the keyboard opens.
+ */
+export function installKeyboardWatcher(onChange) {
+    if (typeof window === 'undefined' || !window.visualViewport) {
+        return () => { };
+    }
+    const viewport = window.visualViewport;
+    let open = false;
+    function sync() {
+        const next = keyboardLikelyOpen({
+            layoutHeight: window.innerHeight,
+            visualHeight: viewport.height,
+            scale: viewport.scale,
+        });
+        if (next === open)
+            return;
+        open = next;
+        if (open)
+            document.documentElement.dataset.keyboardOpen = '';
+        else
+            delete document.documentElement.dataset.keyboardOpen;
+        onChange(open);
+        const active = document.activeElement;
+        if (open && active instanceof HTMLElement && isEditableTarget(active)) {
+            active.scrollIntoView({ block: 'center' });
+        }
+    }
+    viewport.addEventListener('resize', sync);
+    return () => {
+        viewport.removeEventListener('resize', sync);
+        delete document.documentElement.dataset.keyboardOpen;
+    };
+}
+/**
+ * Report whether `container` holds a form action bar
+ * (`[data-form-action-bar]`), now and whenever its subtree changes.
+ */
+export function watchFormActionBar(container, onChange) {
+    let present = Boolean(container.querySelector(FORM_ACTION_BAR_SELECTOR));
+    onChange(present);
+    if (typeof MutationObserver === 'undefined')
+        return () => { };
+    const observer = new MutationObserver(() => {
+        const next = Boolean(container.querySelector(FORM_ACTION_BAR_SELECTOR));
+        if (next === present)
+            return;
+        present = next;
+        onChange(present);
+    });
+    observer.observe(container, { childList: true, subtree: true });
+    return () => observer.disconnect();
+}

package/dist/components/workspace/admin-shell/mobile-shell.d.ts

@@ -0,0 +1,191 @@
+/**
+ * Pure logic behind AdminShell's phone chrome: the hide-on-scroll state
+ * machine, the on-screen keyboard heuristic, the phone top-bar model, and the
+ * bottom-bar mode. DOM-free and SSR-safe so it can be unit tested; the DOM
+ * wiring lives in `./mobile-shell-dom.ts`.
+ */
+import type { Component, ComponentType, SvelteComponent } from 'svelte';
+import type { ShellViewport } from './types.js';
+/** Classify a viewport from the phone and desktop media-query matches. */
+export declare function viewportFor(matches: {
+    phone: boolean;
+    desktop: boolean;
+}): ShellViewport;
+/** Tuning for {@link ScrollChrome}. */
+export interface ScrollChromeOptions {
+    /** Always show the chrome within this many px of the top (default 56). */
+    revealWithin?: number;
+    /** Downward travel in px before the chrome hides (default 12). */
+    hideAfter?: number;
+    /** Upward travel in px before it comes back (default 4, "first scroll up"). */
+    showAfter?: number;
+}
+/** One scroll position fed to {@link ScrollChrome.update}. */
+export interface ScrollSample {
+    /** Current scrollTop. */
+    y: number;
+    /** Largest reachable scrollTop, to ignore iOS overscroll bounce. */
+    maxY?: number;
+    /** Keep the chrome shown (a banner is visible, a drawer is open, …). */
+    pinned?: boolean;
+}
+/**
+ * Hide-on-scroll state machine for the phone top bar (and anything that
+ * slides with it). Feed it every scroll position; read `hidden`. Travel
+ * accumulates in one direction and resets when the direction reverses.
+ */
+export declare class ScrollChrome {
+    #private;
+    hidden: boolean;
+    constructor(options?: ScrollChromeOptions);
+    /** Feed a scroll sample; returns whether the chrome is now hidden. */
+    update(sample: ScrollSample): boolean;
+    /** Show the chrome and forget the scroll history (e.g. after navigating). */
+    reset(): void;
+}
+/**
+ * `visualViewport` heuristic: the keyboard is open when the visible viewport
+ * is much shorter than the layout viewport. `scale` undoes pinch zoom, which
+ * also shrinks `visualViewport.height`.
+ */
+export declare function keyboardLikelyOpen(input: {
+    layoutHeight: number;
+    visualHeight: number;
+    scale?: number;
+    threshold?: number;
+}): boolean;
+/** A nav entry as far as path matching is concerned. */
+export interface ShellNavPathItem {
+    href: string;
+    exact?: boolean;
+    children?: ShellNavPathItem[];
+}
+/** Drop trailing slashes (`/` stays `/`). */
+export declare function normalizeShellPath(path: string): string;
+/** Whether `path` is the item's page or (unless `exact`) below it. */
+export declare function shellNavItemMatches(item: ShellNavPathItem, path: string): boolean;
+/** The chain of nav items from the top level down to the one matching `path`. */
+export declare function findShellNavTrail<T extends ShellNavPathItem>(items: T[], path: string): T[];
+/** One ancestor of the current page: a breadcrumb and a possible back target. */
+export interface ShellCrumb {
+    label: string;
+    href: string;
+}
+/** Input for {@link shellPageTrailFor}. */
+export interface ShellPageTrailInput<T extends ShellNavPathItem & {
+    label: string;
+}> {
+    /** Current pathname. */
+    path: string;
+    /** The workspace home (overview) page. */
+    homeHref: string;
+    /** Workspace name: the first ancestor of every non-home page. */
+    homeTitle: string;
+    /** The workspace nav. */
+    navItems: T[];
+    /**
+     * Ancestors deeper than the nav knows (an article above its video, a
+     * council above its meeting), nearest last. They follow the nav trail.
+     */
+    parents?: readonly ShellCrumb[] | null;
+}
+/** Where a page sits: a section home, or a page with ancestors. */
+export interface ShellPageTrail {
+    /** The home page or a top-level nav page (and no page-given parents). */
+    sectionHome: boolean;
+    /** Ancestors only, never the current page; empty on section homes. */
+    crumbs: ShellCrumb[];
+    /** The nav item for the current page itself, if it is one. */
+    current: {
+        label: string;
+        href: string;
+    } | null;
+}
+/**
+ * The single source for a page's place in the workspace: breadcrumbs on
+ * wider screens and the phone top bar's back target both come from here.
+ *
+ * Section homes (the home page and top-level nav pages) have no ancestors.
+ * Anything else lists the workspace home, the nav items above it (a nested
+ * nav page's parent item counts, even when its URL is not below it), then the
+ * page-given `parents`. The current page is never a crumb.
+ */
+export declare function shellPageTrailFor<T extends ShellNavPathItem & {
+    label: string;
+}>(input: ShellPageTrailInput<T>): ShellPageTrail;
+/**
+ * What the phone top bar shows: the workspace name on section home pages, or
+ * a back arrow (to the parent, never `history.back()`) plus the page's
+ * title on every other page.
+ */
+export type PhoneTopBarModel = {
+    kind: 'home';
+    title: string;
+} | {
+    kind: 'detail';
+    title: string;
+    backHref: string;
+    backLabel: string;
+};
+/** Input for {@link phoneTopBarFor}. */
+export interface PhoneTopBarInput<T extends ShellNavPathItem & {
+    label: string;
+}> extends ShellPageTrailInput<T> {
+    /** Title the page provided (article headline, person's name, …). */
+    pageTitle?: string | null;
+    /**
+     * Explicit back target. Prefer `parents` (the same ancestors the page's
+     * breadcrumbs show); this overrides the last one.
+     */
+    backHref?: string | null;
+    /** Back label used with an explicit `backHref` (default "Back"). */
+    backLabel?: string;
+}
+/**
+ * Section homes (see {@link shellPageTrailFor}) show the workspace name.
+ * Every other page shows a back arrow to its nearest ancestor (the last
+ * breadcrumb) and the page's title.
+ */
+export declare function phoneTopBarFor<T extends ShellNavPathItem & {
+    label: string;
+}>(input: PhoneTopBarInput<T>): PhoneTopBarModel;
+/**
+ * What sits at the bottom of a phone screen: the nav bar, a form's own
+ * action bar (which replaces it), or nothing while the keyboard is open.
+ */
+export type BottomBarMode = 'nav' | 'form' | 'none';
+/** Decide the {@link BottomBarMode}. */
+export declare function bottomBarMode(input: {
+    formActions: boolean;
+    keyboardOpen: boolean;
+}): BottomBarMode;
+/** Selector a form's action row carries to replace the phone bottom bar. */
+export declare const FORM_ACTION_BAR_SELECTOR = "[data-form-action-bar]";
+/**
+ * An icon component: a Svelte 5 function component or a legacy class
+ * component (e.g. lucide-svelte icons).
+ */
+export type ShellIcon = Component<{
+    size?: number | string;
+}> | ComponentType<SvelteComponent<{
+    size?: number | string;
+}>>;
+/** One phone bottom bar entry: a link (`href`; `onclick` also runs) or a button. */
+export interface PhoneBottomBarItem {
+    id: string;
+    label: string;
+    icon: ShellIcon;
+    href?: string;
+    onclick?: () => void;
+    active?: boolean;
+    /** Count badge (hidden at 0). */
+    badge?: number;
+    /** Small dot, e.g. an unread reply. */
+    dot?: boolean;
+    /** Accessible description of the dot (default "new"). */
+    dotLabel?: string;
+    /** For items that open a panel: its expanded state and id. */
+    expanded?: boolean;
+    controls?: string;
+}
+//# sourceMappingURL=mobile-shell.d.ts.map