@happyvertical/smrt-svelte 0.55.16 → 0.55.18

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

@@ -1,11 +1,13 @@
 <script lang="ts">
-import type { DropdownPlacement, MenuItem } from '@happyvertical/smrt-ui';
+import type { DropdownPlacement } from '@happyvertical/smrt-ui';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
-import { Avatar, Dropdown } from '@happyvertical/smrt-ui/ui';
+import { Avatar } from '@happyvertical/smrt-ui/ui';
+import { tick } from 'svelte';
 import { M } from '../../../i18n/strings.workspace.js';
 import type { WorkspaceAccountTenant } from './types.js';
 
 const SIGN_OUT_ID = 'workspace-account:sign-out';
+const SETTINGS_ID = 'workspace-account:settings';
 const TENANT_PREFIX = 'workspace-account:tenant:';
 
 export interface Props {
@@ -17,6 +19,8 @@ export interface Props {
   compact?: boolean;
   /** Custom display name for the user, falls back to userName. */
   userLabel?: string;
+  /** Email shown under the name at the top of the open menu. */
+  email?: string;
   /** URL for the user's avatar image. */
   avatarUrl?: string;
   /** Custom display name for the current tenant. */
@@ -27,10 +31,21 @@ export interface Props {
   tenants?: WorkspaceAccountTenant[];
   /** ID of the currently selected tenant. */
   currentTenantId?: string | null;
-  /** Where the dropdown menu appears relative to the trigger button. */
-  placement?: DropdownPlacement;
+  /**
+   * Where the menu appears relative to the trigger. `inline-end` opens beside
+   * the trigger, bottom-aligned (a compact trigger in a narrow rail).
+   */
+  placement?: DropdownPlacement | 'inline-end';
   /** Disables the account menu button. */
   disabled?: boolean;
+  /** Adds a Settings link to the menu. */
+  settingsHref?: string;
+  /**
+   * Adds a Sign out link (a GET navigation) to the menu. Never point it at a
+   * POST-only route such as the runtime's `/sign-out`; use `onSignOut` for
+   * those. Use `onSignOut` for a callback.
+   */
+  signOutHref?: string;
   /** Called when the user selects a different tenant. */
   onTenantSelect?: (tenantId: string) => void;
   /** Called when the user clicks sign out. */
@@ -42,6 +57,7 @@ let {
   density,
   compact = false,
   userLabel = '',
+  email = '',
   avatarUrl,
   tenantLabel = '',
   roleLabel = '',
@@ -49,11 +65,22 @@ let {
   currentTenantId = null,
   placement = 'top-start',
   disabled = false,
+  settingsHref,
+  signOutHref,
   onTenantSelect,
   onSignOut,
 }: Props = $props();
 
+interface Entry {
+  id: string;
+  label: string;
+  disabled?: boolean;
+  href?: string;
+}
+
 const { t } = useI18n();
+const instanceId = $props.id();
+const menuId = `smrt-account-menu-${instanceId}`;
 const identityLabel = $derived(userLabel || userName);
 const activeTenantLabel = $derived(
   tenantLabel ||
@@ -66,14 +93,15 @@ const accountContext = $derived(
 const summaryTitle = $derived(
   [identityLabel, activeTenantLabel, roleLabel].filter(Boolean).join(' · '),
 );
-const items = $derived.by(() => {
-  const menuItems: MenuItem[] = [];
+const showEmail = $derived(Boolean(email) && email !== identityLabel);
+const entries = $derived.by(() => {
+  const out: Entry[] = [];
 
   if (tenants.length > 1 && onTenantSelect) {
     for (const tenant of tenants) {
       const isCurrent = tenant.id === currentTenantId;
       const detail = tenant.roleLabel ? ` — ${tenant.roleLabel}` : '';
-      menuItems.push({
+      out.push({
         id: `${TENANT_PREFIX}${tenant.id}`,
         label: isCurrent
           ? `${t(M['ui.workspace_account_menu.current_tenant'], {
@@ -85,105 +113,343 @@ const items = $derived.by(() => {
     }
   }
 
-  if (onSignOut) {
-    menuItems.push({
+  if (settingsHref) {
+    out.push({
+      id: SETTINGS_ID,
+      label: t(M['ui.app_shell.account_settings']),
+      href: settingsHref,
+    });
+  }
+
+  if (onSignOut || signOutHref) {
+    out.push({
       id: SIGN_OUT_ID,
       label: t(M['ui.workspace_account_menu.sign_out']),
+      href: onSignOut ? undefined : signOutHref,
     });
   }
 
-  return menuItems;
+  return out;
 });
 
-function handleSelect(id: string): void {
-  if (id === SIGN_OUT_ID) {
-    onSignOut?.();
-    return;
+let open = $state(false);
+let wrapEl = $state<HTMLElement | null>(null);
+let triggerEl = $state<HTMLButtonElement | null>(null);
+let itemEls = $state<Array<HTMLElement | null>>([]);
+const enabled = $derived(
+  entries.map((entry, i) => (entry.disabled ? -1 : i)).filter((i) => i >= 0),
+);
+
+async function openMenu(focusLast = false) {
+  open = true;
+  await tick();
+  const target = focusLast ? enabled[enabled.length - 1] : enabled[0];
+  if (target != null) itemEls[target]?.focus();
+}
+
+function closeMenu(refocus = true) {
+  open = false;
+  if (refocus) triggerEl?.focus();
+}
+
+function select(entry: Entry) {
+  if (entry.disabled) return;
+  if (entry.id === SIGN_OUT_ID) onSignOut?.();
+  else if (entry.id.startsWith(TENANT_PREFIX)) {
+    onTenantSelect?.(entry.id.slice(TENANT_PREFIX.length));
   }
-  if (id.startsWith(TENANT_PREFIX)) {
-    onTenantSelect?.(id.slice(TENANT_PREFIX.length));
+  // A link navigates on its own: leave focus to the destination.
+  closeMenu(!entry.href);
+}
+
+function focusByOffset(offset: number) {
+  if (enabled.length === 0) return;
+  const current = itemEls.indexOf(document.activeElement as HTMLElement);
+  const pos = enabled.indexOf(current);
+  itemEls[enabled[(pos + offset + enabled.length) % enabled.length]]?.focus();
+}
+
+function onTriggerKeydown(event: KeyboardEvent) {
+  if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+    event.preventDefault();
+    openMenu(event.key === 'ArrowUp');
+  }
+}
+
+function onMenuKeydown(event: KeyboardEvent) {
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault();
+      focusByOffset(1);
+      break;
+    case 'ArrowUp':
+      event.preventDefault();
+      focusByOffset(-1);
+      break;
+    case 'Home':
+      event.preventDefault();
+      itemEls[enabled[0]]?.focus();
+      break;
+    case 'End':
+      event.preventDefault();
+      itemEls[enabled[enabled.length - 1]]?.focus();
+      break;
+    case 'Escape':
+      event.preventDefault();
+      event.stopPropagation();
+      closeMenu();
+      break;
+    case 'Tab':
+      closeMenu(false);
+      break;
   }
 }
+
+// Dismiss on an outside click while open.
+$effect(() => {
+  if (!open) return;
+  const onDocPointer = (event: MouseEvent) => {
+    if (wrapEl && !wrapEl.contains(event.target as Node)) closeMenu(false);
+  };
+  document.addEventListener('click', onDocPointer, true);
+  return () => document.removeEventListener('click', onDocPointer, true);
+});
 </script>
 
-<div data-density={density} data-compact={compact ? '' : undefined} class="smrt-workspace-account-menu" title={summaryTitle}>
-  <Dropdown
-    {items}
-    {placement}
-    triggerLabel={compact ? `${t(M['ui.workspace_account_menu.open'])} ${summaryTitle}` : undefined}
-    onselect={handleSelect}
-    disabled={disabled || items.length === 0}
+<div
+  bind:this={wrapEl}
+  data-density={density}
+  data-compact={compact ? '' : undefined}
+  class="smrt-workspace-account-menu"
+  title={summaryTitle}
+  data-smrt-component="WorkspaceAccountMenu"
+>
+  <!-- raw-primitive-allow: menu trigger owns aria-haspopup/aria-expanded/aria-controls and an avatar + identity layout the Button primitive does not model -->
+  <button
+    bind:this={triggerEl}
+    type="button"
+    class="smrt-workspace-account-menu__trigger"
+    data-smrt-part="trigger"
+    aria-label={compact ? `${t(M['ui.workspace_account_menu.open'])} ${summaryTitle}` : undefined}
+    aria-haspopup="menu"
+    aria-expanded={open}
+    aria-controls={open ? menuId : undefined}
+    disabled={disabled || entries.length === 0}
+    onclick={() => (open ? closeMenu(false) : openMenu())}
+    onkeydown={onTriggerKeydown}
   >
-    {#snippet trigger()}
-      <span class="smrt-workspace-account-menu__open">
-        {t(M['ui.workspace_account_menu.open'])}
-      </span>
-      <Avatar src={avatarUrl} name={userName} size="sm" aria-hidden="true" />
-      <span class="smrt-workspace-account-menu__identity">
-        <span class="smrt-workspace-account-menu__summary">{identityLabel}</span>
-        {#if accountContext}
-          <span class="smrt-workspace-account-menu__context">{accountContext}</span>
-        {/if}
-      </span>
-      <span class="smrt-workspace-account-menu__indicator" aria-hidden="true">•••</span>
-    {/snippet}
-  </Dropdown>
+    <span class="smrt-workspace-account-menu__open">
+      {t(M['ui.workspace_account_menu.open'])}
+    </span>
+    <Avatar src={avatarUrl} name={userName} size="sm" aria-hidden="true" />
+    <span class="smrt-workspace-account-menu__identity">
+      <span class="smrt-workspace-account-menu__summary">{identityLabel}</span>
+      {#if accountContext}
+        <span class="smrt-workspace-account-menu__context">{accountContext}</span>
+      {/if}
+    </span>
+    <span class="smrt-workspace-account-menu__indicator" aria-hidden="true">•••</span>
+  </button>
+
+  {#if open}
+    <div class="smrt-workspace-account-menu__popover smrt-workspace-account-menu__popover--{placement}" data-smrt-part="panel">
+      {#if identityLabel || showEmail}
+        <div class="smrt-workspace-account-menu__header">
+          <span class="smrt-workspace-account-menu__name">{identityLabel}</span>
+          {#if showEmail}<span class="smrt-workspace-account-menu__email">{email}</span>{/if}
+        </div>
+      {/if}
+      <!-- svelte-ignore a11y_interactive_supports_focus -->
+      <div id={menuId} role="menu" tabindex="-1" class="smrt-workspace-account-menu__menu" aria-label={t(M['ui.app_shell.account_item'])} onkeydown={onMenuKeydown}>
+        {#each entries as entry, i (entry.id)}
+          {#if entry.href}
+            <a
+              bind:this={itemEls[i]}
+              role="menuitem"
+              class="smrt-workspace-account-menu__item"
+              href={entry.href}
+              tabindex="-1"
+              onclick={() => select(entry)}
+            >{entry.label}</a>
+          {:else}
+            <!-- raw-primitive-allow: role="menuitem" with roving tabindex inside a role="menu"; not a content button -->
+            <button
+              bind:this={itemEls[i]}
+              type="button"
+              role="menuitem"
+              class="smrt-workspace-account-menu__item"
+              disabled={entry.disabled}
+              tabindex="-1"
+              onclick={() => select(entry)}
+            >{entry.label}</button>
+          {/if}
+        {/each}
+      </div>
+    </div>
+  {/if}
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-workspace-account-menu {
+    position: relative;
+    display: flex;
     min-width: 0;
     width: 100%;
   }
 
   .smrt-workspace-account-menu[data-density='touch'] {
-    --smrt-control-target-min: var(--smrt-touch-target-min, 48px);
+    --smrt-control-target-min: var(--smrt-touch-target-min);
   }
   .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%;
-  }
 
-  .smrt-workspace-account-menu :global(.dropdown__trigger) {
+  .smrt-workspace-account-menu__trigger {
+    appearance: none;
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;
     align-items: center;
     gap: var(--smrt-spacing-2);
+    box-sizing: border-box;
     width: 100%;
     min-width: 0;
     min-height: max(2.75rem, var(--smrt-control-target-min, 0px));
     padding: var(--smrt-spacing-2);
-    border-radius: var(--smrt-radius-large);
+    position: relative;
+    border: var(--smrt-hairline);
+    border-radius: var(--smrt-control-radius);
+    background: var(--smrt-surface-control);
+    color: var(--smrt-color-on-surface);
+    font: inherit;
     text-align: start;
+    cursor: pointer;
+  }
+  /* State layer: a currentColor veil over the trigger. */
+  .smrt-workspace-account-menu__trigger::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: currentColor;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .smrt-workspace-account-menu__trigger:hover:not(:disabled)::after {
+    opacity: var(--smrt-state-hover);
+  }
+  .smrt-workspace-account-menu__trigger[aria-expanded='true']::after {
+    opacity: var(--smrt-state-selected);
+  }
+  .smrt-workspace-account-menu__trigger:active:not(:disabled)::after {
+    opacity: var(--smrt-state-pressed);
+  }
+  .smrt-workspace-account-menu__trigger:focus-visible {
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
+  }
+  .smrt-workspace-account-menu__trigger:disabled {
+    opacity: var(--smrt-state-disabled);
+    cursor: default;
   }
 
-  .smrt-workspace-account-menu[data-compact] :global(.dropdown__trigger) {
+  .smrt-workspace-account-menu[data-compact] {
+    width: auto;
+  }
+  .smrt-workspace-account-menu[data-compact] .smrt-workspace-account-menu__trigger {
     display: grid;
     place-items: center;
     grid-template-columns: minmax(0, 1fr);
+    min-width: max(2.75rem, var(--smrt-control-target-min, 0px));
     padding: var(--smrt-spacing-1);
+    border-color: transparent;
+    border-radius: var(--smrt-radius-full);
+    background: transparent;
   }
-
   .smrt-workspace-account-menu[data-compact] .smrt-workspace-account-menu__identity,
-  .smrt-workspace-account-menu[data-compact] .smrt-workspace-account-menu__indicator,
-  .smrt-workspace-account-menu[data-compact] .smrt-workspace-account-menu__open {
+  .smrt-workspace-account-menu[data-compact] .smrt-workspace-account-menu__indicator {
     display: none;
   }
 
-  .smrt-workspace-account-menu :global(.dropdown__menu) {
+  .smrt-workspace-account-menu__popover {
+    position: absolute;
+    z-index: var(--smrt-z-index-dropdown);
     box-sizing: border-box;
-    width: 100%;
     min-width: 12rem;
     max-height: min(24rem, 70vh);
     overflow-y: auto;
+    margin: var(--smrt-spacing-1) 0;
+    padding: var(--smrt-spacing-1);
+    border: var(--smrt-hairline);
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-surface-raised);
+    box-shadow: var(--smrt-elevation-3), var(--smrt-inset-highlight);
+  }
+  .smrt-workspace-account-menu__popover--bottom-start { inset-block-start: 100%; inset-inline-start: 0; }
+  .smrt-workspace-account-menu__popover--bottom-end { inset-block-start: 100%; inset-inline-end: 0; }
+  .smrt-workspace-account-menu__popover--top-start { inset-block-end: 100%; inset-inline-start: 0; }
+  .smrt-workspace-account-menu__popover--top-end { inset-block-end: 100%; inset-inline-end: 0; }
+  .smrt-workspace-account-menu__popover--inline-end {
+    inset-block-end: 0;
+    inset-inline-start: 100%;
+    margin: 0 var(--smrt-spacing-2);
+  }
+
+  .smrt-workspace-account-menu__header {
+    display: grid;
+    gap: var(--smrt-spacing-1);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    border-block-end: var(--smrt-hairline);
+    margin-block-end: var(--smrt-spacing-1);
+  }
+  .smrt-workspace-account-menu__name {
+    color: var(--smrt-color-on-surface);
+    font-size: var(--smrt-typography-body-small-size);
+    font-weight: var(--smrt-typography-weight-medium);
+    overflow-wrap: anywhere;
+  }
+  .smrt-workspace-account-menu__email {
+    color: var(--smrt-color-on-surface-variant);
+    font-size: var(--smrt-typography-label-small-size);
+    overflow-wrap: anywhere;
+  }
+
+  .smrt-workspace-account-menu__menu {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-1);
+  }
+  .smrt-workspace-account-menu__item {
+    appearance: none;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-block-size: max(2.75rem, var(--smrt-control-target-min, 0px));
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    border: none;
+    border-radius: var(--smrt-control-radius-small);
+    background: none;
+    color: var(--smrt-color-on-surface);
+    font: inherit;
+    text-align: start;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+  .smrt-workspace-account-menu__item:hover:not(:disabled) {
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
+  }
+  .smrt-workspace-account-menu__item:active:not(:disabled) {
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-pressed) * 100%), transparent);
+  }
+  .smrt-workspace-account-menu__item:focus-visible {
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: calc(-1 * var(--smrt-focus-ring-width));
+  }
+  .smrt-workspace-account-menu__item:disabled {
+    opacity: var(--smrt-state-disabled);
+    cursor: default;
   }
 
   .smrt-workspace-account-menu__identity {
@@ -227,4 +493,5 @@ function handleSelect(id: string): void {
     white-space: nowrap;
     border: 0;
   }
+}
 </style>

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

@@ -9,6 +9,8 @@ export interface Props {
     compact?: boolean;
     /** Custom display name for the user, falls back to userName. */
     userLabel?: string;
+    /** Email shown under the name at the top of the open menu. */
+    email?: string;
     /** URL for the user's avatar image. */
     avatarUrl?: string;
     /** Custom display name for the current tenant. */
@@ -19,10 +21,21 @@ export interface Props {
     tenants?: WorkspaceAccountTenant[];
     /** ID of the currently selected tenant. */
     currentTenantId?: string | null;
-    /** Where the dropdown menu appears relative to the trigger button. */
-    placement?: DropdownPlacement;
+    /**
+     * Where the menu appears relative to the trigger. `inline-end` opens beside
+     * the trigger, bottom-aligned (a compact trigger in a narrow rail).
+     */
+    placement?: DropdownPlacement | 'inline-end';
     /** Disables the account menu button. */
     disabled?: boolean;
+    /** Adds a Settings link to the menu. */
+    settingsHref?: string;
+    /**
+     * Adds a Sign out link (a GET navigation) to the menu. Never point it at a
+     * POST-only route such as the runtime's `/sign-out`; use `onSignOut` for
+     * those. Use `onSignOut` for a callback.
+     */
+    signOutHref?: string;
     /** Called when the user selects a different tenant. */
     onTenantSelect?: (tenantId: string) => void;
     /** Called when the user clicks sign out. */

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,yDAAyD;IACzD,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC;IAClC,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,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;AAuGD,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,EAAE,MAAM,wBAAwB,CAAC;AAKhE,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,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,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;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,GAAG,YAAY,CAAC;IAC7C,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AA8ND,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/motion.d.ts

@@ -0,0 +1,19 @@
+/** True when the user asked for reduced motion (false off the browser). */
+export declare function prefersReducedMotion(): boolean;
+/** Parses a CSS `<time>` (`200ms`, `0.2s`) to milliseconds; 0 when unparsable. */
+export declare function parseCssTime(value: string): number;
+/**
+ * Reads a duration token (`--smrt-duration-short4`) off `element` (or the
+ * document root) and returns it in milliseconds. Returns 0 under reduced
+ * motion, off the browser, or when the token is missing, so callers can pass
+ * the result straight to a Svelte `duration` option.
+ */
+export declare function tokenDuration(name: string, element?: Element | null): number;
+/** `animate:` function: FLIP reorder with a token-driven duration. */
+export declare function flipRow(node: Element, rects: {
+    from: DOMRect;
+    to: DOMRect;
+}, params?: {
+    token?: string;
+}): import("svelte/animate").AnimationConfig;
+//# sourceMappingURL=motion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/motion.ts"],"names":[],"mappings":"AAUA,2EAA2E;AAC3E,wBAAgB,oBAAoB,IAAI,OAAO,CAM9C;AAED,kFAAkF;AAClF,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKlD;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,MAAM,CAU5E;AAED,sEAAsE;AACtE,wBAAgB,OAAO,CACrB,IAAI,EAAE,OAAO,EACb,KAAK,EAAE;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,EAAE,EAAE,OAAO,CAAA;CAAE,EACrC,MAAM,GAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAO,4CAKhC"}

package/dist/components/workspace/admin-shell/motion.js

@@ -0,0 +1,44 @@
+/**
+ * Motion helpers shared by the shell lists. Durations come from the
+ * `--smrt-duration-*` theme tokens (never literals) so a theme controls the
+ * pace, and everything collapses to zero under `prefers-reduced-motion`.
+ */
+import { flip } from 'svelte/animate';
+const REDUCED_MOTION = '(prefers-reduced-motion: reduce)';
+const DEFAULT_TOKEN = '--smrt-duration-short4';
+/** True when the user asked for reduced motion (false off the browser). */
+export function prefersReducedMotion() {
+    return (typeof window !== 'undefined' &&
+        typeof window.matchMedia === 'function' &&
+        window.matchMedia(REDUCED_MOTION).matches);
+}
+/** Parses a CSS `<time>` (`200ms`, `0.2s`) to milliseconds; 0 when unparsable. */
+export function parseCssTime(value) {
+    const match = /^(-?\d*\.?\d+)(ms|s)$/.exec(value.trim());
+    if (!match)
+        return 0;
+    const amount = Number(match[1]) * (match[2] === 's' ? 1000 : 1);
+    return Number.isFinite(amount) && amount > 0 ? amount : 0;
+}
+/**
+ * Reads a duration token (`--smrt-duration-short4`) off `element` (or the
+ * document root) and returns it in milliseconds. Returns 0 under reduced
+ * motion, off the browser, or when the token is missing, so callers can pass
+ * the result straight to a Svelte `duration` option.
+ */
+export function tokenDuration(name, element) {
+    if (prefersReducedMotion())
+        return 0;
+    if (typeof document === 'undefined' ||
+        typeof getComputedStyle !== 'function') {
+        return 0;
+    }
+    const target = element ?? document.documentElement;
+    return parseCssTime(getComputedStyle(target).getPropertyValue(name));
+}
+/** `animate:` function: FLIP reorder with a token-driven duration. */
+export function flipRow(node, rects, params = {}) {
+    return flip(node, rects, {
+        duration: tokenDuration(params.token ?? DEFAULT_TOKEN, node),
+    });
+}

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

@@ -1,6 +1,7 @@
 import { type ShellLayoutPanel } from './layout.js';
 import type { PanelEdge, PanelState, ResolvedShellConfig, ShellHotkeyBinding, ShellPanelConfig, ShellPanelDefaults, ShellPanelResize, ShellSettingsAdapter, ShellSettingsDelta, ShellViewport } from './types.js';
 export declare const DEFAULT_SHELL_KEYMAP: Record<PanelEdge, ShellHotkeyBinding>;
+export declare const DEFAULT_PANEL_CONFIG: Record<PanelEdge, ShellPanelConfig>;
 export declare function resolveShellConfig(appDefaults?: ShellPanelDefaults): ResolvedShellConfig;
 /**
  * An edge's state: hidden edges (by the host or the user's layout) stay

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

@@ -1 +1 @@
-{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/settings.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EACV,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,EAClB,aAAa,EACd,MAAM,YAAY,CAAC;AAGpB,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,SAAS,EAAE,kBAAkB,CAKtE,CAAC;AA6CF,wBAAgB,kBAAkB,CAChC,WAAW,GAAE,kBAAuB,GACnC,mBAAmB,CA2BrB;AAED;;;;;GAKG;AACH,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,gBAAgB,EACxB,QAAQ,GAAE,kBAAuB,EACjC,QAAQ,CAAC,EAAE,aAAa,EACxB,WAAW,CAAC,EAAE,gBAAgB,GAC7B,UAAU,CASZ;AAED,yDAAyD;AACzD,eAAO,MAAM,0BAA0B,EAAE,QAAQ,CAAC,gBAAgB,CAIjE,CAAC;AAEF;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,gBAAgB,GACvB,QAAQ,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAUnC;AAED,4EAA4E;AAC5E,wBAAgB,cAAc,CAC5B,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,QAAQ,CAAC,gBAAgB,CAAC,GACjC,MAAM,CAER;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,gBAAgB,EACxB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,OAAO,CAKT;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,kBAAkB,EACzB,MAAM,EAAE,mBAAmB,GAC1B,kBAAkB,CAqBpB;AAED,wBAAgB,aAAa,CAC3B,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,gBAAgB,EACxB,QAAQ,GAAE,kBAAuB,GAChC,kBAAkB,GAAG,IAAI,CAM3B;AAED,wBAAgB,uBAAuB,CACrC,IAAI,EAAE,kBAAkB,EACxB,IAAI,EAAE,kBAAkB,GACvB,kBAAkB,CAiBpB;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,kBAAkB,GACxB,kBAAkB,CA2BpB;AAED,qBAAa,gCAAiC,YAAW,oBAAoB;IAC/D,OAAO,CAAC,QAAQ,CAAC,GAAG;gBAAH,GAAG,EAAE,MAAM;IAExC,IAAI,IAAI,kBAAkB,GAAG,IAAI;IAWjC,KAAK,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI;CAOvC"}
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/settings.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EACV,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,EAClB,aAAa,EACd,MAAM,YAAY,CAAC;AAGpB,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,SAAS,EAAE,kBAAkB,CAKtE,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,SAAS,EAAE,gBAAgB,CAyCpE,CAAC;AAEF,wBAAgB,kBAAkB,CAChC,WAAW,GAAE,kBAAuB,GACnC,mBAAmB,CA2BrB;AAED;;;;;GAKG;AACH,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,gBAAgB,EACxB,QAAQ,GAAE,kBAAuB,EACjC,QAAQ,CAAC,EAAE,aAAa,EACxB,WAAW,CAAC,EAAE,gBAAgB,GAC7B,UAAU,CASZ;AAED,yDAAyD;AACzD,eAAO,MAAM,0BAA0B,EAAE,QAAQ,CAAC,gBAAgB,CAIjE,CAAC;AAEF;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,gBAAgB,GACvB,QAAQ,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAUnC;AAED,4EAA4E;AAC5E,wBAAgB,cAAc,CAC5B,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,QAAQ,CAAC,gBAAgB,CAAC,GACjC,MAAM,CAER;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,gBAAgB,EACxB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,OAAO,CAKT;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,kBAAkB,EACzB,MAAM,EAAE,mBAAmB,GAC1B,kBAAkB,CAqBpB;AAED,wBAAgB,aAAa,CAC3B,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,gBAAgB,EACxB,QAAQ,GAAE,kBAAuB,GAChC,kBAAkB,GAAG,IAAI,CAM3B;AAED,wBAAgB,uBAAuB,CACrC,IAAI,EAAE,kBAAkB,EACxB,IAAI,EAAE,kBAAkB,GACvB,kBAAkB,CAiBpB;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,kBAAkB,GACxB,kBAAkB,CA2BpB;AAED,qBAAa,gCAAiC,YAAW,oBAAoB;IAC/D,OAAO,CAAC,QAAQ,CAAC,GAAG;gBAAH,GAAG,EAAE,MAAM;IAExC,IAAI,IAAI,kBAAkB,GAAG,IAAI;IAWjC,KAAK,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI;CAOvC"}

package/dist/components/workspace/admin-shell/settings.js

@@ -6,7 +6,7 @@ export const DEFAULT_SHELL_KEYMAP = {
     bottom: { code: 'KeyS' },
     right: { code: 'KeyD' },
 };
-const DEFAULT_PANEL_CONFIG = {
+export const DEFAULT_PANEL_CONFIG = {
     top: {
         edge: 'top',
         scope: 'app',

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

@@ -33,11 +33,19 @@ export declare const SHELL_ICON_PATHS: {
     readonly repeat: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z";
     readonly tag: "M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58s1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41s-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z";
     readonly archive: "M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z";
+    readonly placeholder: "M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm0 3a5 5 0 1 1 0 10 5 5 0 0 1 0-10z";
     readonly chevronRight: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z";
+    readonly menu: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z";
+    readonly chat: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z";
+    readonly close: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z";
 };
 export type ShellIconName = keyof typeof SHELL_ICON_PATHS;
+/** Icon used for a dock or focus tool that does not bring its own. */
+export declare const SHELL_DEFAULT_TOOL_ICON: ShellIconName;
 /** Section icon used when neither the host nor the user chose one. */
 export declare const SHELL_DEFAULT_SECTION_ICON: ShellIconName;
+/** Rail glyph for an entry that has no icon of its own. */
+export declare const SHELL_PLACEHOLDER_ICON: ShellIconName;
 /** Icons the section icon picker offers (a subset of the shell icon set). */
 export declare const SHELL_SECTION_ICONS: readonly ShellIconName[];
 /** True when `name` is one of the shell's built-in icon names. */

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

@@ -1 +1 @@
-{"version":3,"file":"shell-icons.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/shell-icons.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDnB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAE1D,sEAAsE;AACtE,eAAO,MAAM,0BAA0B,EAAE,aAAwB,CAAC;AAElE,6EAA6E;AAC7E,eAAO,MAAM,mBAAmB,EAAE,SAAS,aAAa,EAqBvD,CAAC;AAEF,kEAAkE;AAClE,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,IAAI,aAAa,CAEnE"}
+{"version":3,"file":"shell-icons.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/shell-icons.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDnB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAE1D,sEAAsE;AACtE,eAAO,MAAM,uBAAuB,EAAE,aAAwB,CAAC;AAE/D,sEAAsE;AACtE,eAAO,MAAM,0BAA0B,EAAE,aAAwB,CAAC;AAElE,2DAA2D;AAC3D,eAAO,MAAM,sBAAsB,EAAE,aAA6B,CAAC;AAEnE,6EAA6E;AAC7E,eAAO,MAAM,mBAAmB,EAAE,SAAS,aAAa,EAqBvD,CAAC;AAEF,kEAAkE;AAClE,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,IAAI,aAAa,CAEnE"}