@happyvertical/smrt-svelte 0.55.16 → 0.55.18

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

@@ -19,6 +19,7 @@ import Sortable from '../../sortable/Sortable.svelte';
 import type { SortableItem, SortableItemMove } from '../../sortable/types.js';
 import { useShellLayout } from './layout-context.js';
 import type { ShellLayoutController } from './layout-controller.svelte.js';
+import { flipRow } from './motion.js';
 import ShellIconButton from './ShellIconButton.svelte';
 import ShellSectionIcon from './ShellSectionIcon.svelte';
 import { SHELL_DEFAULT_SECTION_ICON, SHELL_ICON_PATHS } from './shell-icons.js';
@@ -130,7 +131,7 @@ function onmove(move: SortableItemMove<SortableItem>): void {
   class="smrt-section-menu"
   class:smrt-section-menu--cards={layoutMode === 'cards'}
   bind:this={rootEl}
-  data-editing={editing ? '' : undefined}
+  data-editing={editing ? '' : undefined} data-smrt-component="ShellSectionMenu"
 >
   {#if editing}
     <Sortable
@@ -203,12 +204,14 @@ function onmove(move: SortableItemMove<SortableItem>): void {
   {:else if layoutMode === 'cards'}
     <ul class="smrt-section-menu__cards" aria-label={listLabel}>
       {#each entries as entry (entry.id)}
-        <li class="smrt-section-menu__card">
+        <li class="smrt-section-menu__card" animate:flipRow>
           <a class="smrt-section-menu__card-link" href={entry.href} onclick={onNavigate}>
-            <span class="smrt-section-menu__card-icon">
-              <ShellSectionIcon name={entry.icon ?? SHELL_DEFAULT_SECTION_ICON} size={32} iconComponent={IconComponent} />
+            <span class="smrt-section-menu__card-heading">
+              <span class="smrt-section-menu__card-icon">
+                <ShellSectionIcon name={entry.icon ?? SHELL_DEFAULT_SECTION_ICON} size={28} iconComponent={IconComponent} />
+              </span>
+              <span class="smrt-section-menu__card-title">{entry.label}</span>
             </span>
-            <span class="smrt-section-menu__card-title">{entry.label}</span>
             {#if entry.item.description}
               <span class="smrt-section-menu__desc">{entry.item.description}</span>
             {/if}
@@ -225,7 +228,7 @@ function onmove(move: SortableItemMove<SortableItem>): void {
   {:else}
     <ul class="smrt-section-menu__list" aria-label={listLabel}>
       {#each entries as entry (entry.id)}
-        <li class="smrt-section-menu__item">
+        <li class="smrt-section-menu__item" animate:flipRow>
           <a class="smrt-section-menu__link" href={entry.href} onclick={onNavigate}>
             {#if entry.icon}
               <ShellSectionIcon name={entry.icon} iconComponent={IconComponent} />
@@ -242,33 +245,36 @@ function onmove(move: SortableItemMove<SortableItem>): void {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-section-menu { min-inline-size: 0; }
   .smrt-section-menu__list { display: grid; gap: var(--smrt-spacing-1); margin: 0; padding: 0; list-style: none; }
-  .smrt-section-menu__item { position: relative; display: flex; align-items: center; gap: var(--smrt-spacing-3); min-inline-size: 0; padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-medium); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); }
-  .smrt-section-menu__item:hover { background: var(--smrt-color-surface-container-high); }
+  .smrt-section-menu__item { position: relative; display: flex; align-items: center; gap: var(--smrt-spacing-3); min-inline-size: 0; padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: var(--smrt-hairline); border-radius: var(--smrt-control-radius); background: var(--smrt-surface-panel); color: var(--smrt-color-on-surface); }
+  .smrt-section-menu__item:hover { background: color-mix(in srgb, var(--smrt-surface-panel), currentColor calc(var(--smrt-state-hover) * 100%)); }
+  .smrt-section-menu__item:active { background: color-mix(in srgb, var(--smrt-surface-panel), currentColor calc(var(--smrt-state-pressed) * 100%)); }
   .smrt-section-menu__link { flex: 1 1 auto; display: flex; align-items: center; gap: var(--smrt-spacing-3); min-inline-size: 0; min-block-size: var(--smrt-control-target-min, 2rem); color: inherit; text-decoration: none; }
   /* The whole row follows the link; actions sit above the stretched target. */
   .smrt-section-menu__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
   .smrt-section-menu__link:focus-visible { outline: none; }
-  .smrt-section-menu__link:focus-visible::after { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
+  .smrt-section-menu__link:focus-visible::after { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   .smrt-section-menu__label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--smrt-typography-weight-medium, 500); }
   .smrt-section-menu__meta { flex: 0 0 auto; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-label-large-size); }
   .smrt-section-menu__actions { position: relative; z-index: 1; flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--smrt-spacing-1); }
   .smrt-section-menu__chevron { flex: 0 0 auto; color: var(--smrt-color-on-surface-variant); }
   /* Fixed icon column so labels align whatever the glyph (or a missing one). */
   .smrt-section-menu :global(.smrt-shell-section-icon) { inline-size: 20px; block-size: 20px; }
-  /* Cards draw a 32px icon: its box must match, or the glyph spills out of
-     the centred circle. */
-  .smrt-section-menu__card-icon :global(.smrt-shell-section-icon) { inline-size: 32px; block-size: 32px; }
+  .smrt-section-menu__card-icon :global(.smrt-shell-section-icon) { inline-size: 28px; block-size: 28px; }
   /* Cards: a responsive grid; the whole card is one stretched link. */
   .smrt-section-menu__cards, .smrt-section-menu--cards :global(.smrt-sortable__items) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: var(--smrt-spacing-3); margin: 0; padding: 0; list-style: none; }
-  .smrt-section-menu__card { position: relative; display: flex; flex-direction: column; gap: var(--smrt-spacing-3); min-inline-size: 0; padding: var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-large, var(--smrt-radius-medium)); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); transition: background-color 120ms, border-color 120ms, transform 120ms; }
-  .smrt-section-menu__card:hover { background: var(--smrt-color-surface-container-high); border-color: var(--smrt-color-outline); transform: translateY(-2px); }
+  .smrt-section-menu__card { position: relative; display: flex; flex-direction: column; gap: var(--smrt-spacing-3); min-inline-size: 0; padding: var(--smrt-spacing-4); border: var(--smrt-hairline); border-radius: var(--smrt-radius-large, var(--smrt-radius-medium)); background: var(--smrt-surface-panel); color: var(--smrt-color-on-surface); transition: background-color var(--smrt-duration-short2), border-color var(--smrt-duration-short2), transform var(--smrt-duration-short2); }
+  .smrt-section-menu__card:hover { background: color-mix(in srgb, var(--smrt-surface-panel), currentColor calc(var(--smrt-state-hover) * 100%)); border-color: var(--smrt-hairline-strong-color); }
+  .smrt-section-menu__card:active { background: color-mix(in srgb, var(--smrt-surface-panel), currentColor calc(var(--smrt-state-pressed) * 100%)); }
   .smrt-section-menu__card-link { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--smrt-spacing-2); color: inherit; text-decoration: none; }
   .smrt-section-menu__card-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
   .smrt-section-menu__card-link:focus-visible { outline: none; }
-  .smrt-section-menu__card-link:focus-visible::after { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
-  .smrt-section-menu__card-icon { display: inline-grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: var(--smrt-radius-full, 9999px); background: var(--smrt-color-primary-container); color: var(--smrt-color-on-primary-container); }
+  .smrt-section-menu__card-link:focus-visible::after { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
+  .smrt-section-menu__card-heading { display: flex; align-items: center; gap: var(--smrt-spacing-2); min-inline-size: 0; }
+  .smrt-section-menu__card-icon { display: inline-grid; place-items: center; flex: 0 0 28px; inline-size: 28px; block-size: 28px; color: var(--smrt-color-primary); }
   .smrt-section-menu__card-title { font-size: var(--smrt-typography-title-medium-size, 1rem); font-weight: var(--smrt-typography-weight-medium, 500); overflow-wrap: anywhere; }
   .smrt-section-menu__desc { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-medium-size, 0.875rem); }
   .smrt-section-menu__card-foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--smrt-spacing-2); }
@@ -281,10 +287,11 @@ function onmove(move: SortableItemMove<SortableItem>): void {
   .smrt-section-menu :global(.smrt-sortable__container) { padding: 0; border: 0; background: transparent; gap: var(--smrt-spacing-1); }
   .smrt-section-menu :global(.smrt-sortable__header) { display: none; }
   .smrt-section-menu :global(.smrt-sortable__items) { gap: var(--smrt-spacing-1); }
-  .smrt-section-menu :global(.smrt-sortable__item) { border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-medium); background: var(--smrt-color-surface); }
+  .smrt-section-menu :global(.smrt-sortable__item) { border: var(--smrt-hairline); border-radius: var(--smrt-control-radius); background: var(--smrt-surface-panel); }
   .smrt-section-menu :global(.smrt-sortable__handle) { inline-size: 1.5rem; block-size: 2rem; }
   .smrt-section-menu__row { flex: 1 1 auto; min-inline-size: 0; display: flex; align-items: center; gap: var(--smrt-spacing-3); padding: var(--smrt-spacing-2) var(--smrt-spacing-1); }
   .smrt-section-menu__row--muted { opacity: 0.55; }
   .smrt-section-menu__row strong { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--smrt-typography-weight-medium, 500); }
   :global(.smrt-section-menu__name) { flex: 1 1 auto; min-inline-size: 0; }
+}
 </style>

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

@@ -1 +1 @@
-{"version":3,"file":"ShellSectionMenu.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/ShellSectionMenu.svelte.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,OAAO,EAAiB,MAAM,QAAQ,CAAC;AAKrE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAI3E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAGxD,UAAU,KAAK;IACb,wDAAwD;IACxD,SAAS,EAAE,MAAM,CAAC;IAClB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,aAAa,CAAC,EAAE,SAAS,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC3D,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC;IACxC,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAC3C;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAuLD,QAAA,MAAM,gBAAgB,0BAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ShellSectionMenu.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/ShellSectionMenu.svelte.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,OAAO,EAAiB,MAAM,QAAQ,CAAC;AAKrE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAK3E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAGxD,UAAU,KAAK;IACb,wDAAwD;IACxD,SAAS,EAAE,MAAM,CAAC;IAClB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,aAAa,CAAC,EAAE,SAAS,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC3D,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC;IACxC,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAC3C;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AA0LD,QAAA,MAAM,gBAAgB,0BAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

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

@@ -1,15 +1,70 @@
 <script lang="ts">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import {
+  ColorSchemeToggle,
+  ThemeSwitcher,
+} from '@happyvertical/smrt-ui/themes';
 import { Button } from '@happyvertical/smrt-ui/ui';
+import { useAuth } from '../../../hooks/useAuth.svelte.js';
 import { M } from '../../../i18n/strings.workspace.js';
 import { useAdminShell } from './context.js';
 import HotkeyInput from './HotkeyInput.svelte';
+import { tryUseShellLayout } from './layout-context.js';
 import { resolveHotkey } from './settings.js';
+import { SHELL_REGION_MESSAGES } from './slot-labels.js';
+import type { ShellRegion } from './slots.js';
 import type { PanelEdge, ShellHotkeyBinding } from './types.js';
 
+interface Props {
+  /** Show the Appearance section (needs a `ThemeProvider` above). */
+  appearance?: boolean;
+  /** Show the Account section (needs the Provider's `useAuth()` above). */
+  account?: boolean;
+  /** Where the sign-out control goes; the control is hidden when neither this nor `onSignOut` is given. */
+  signOutHref?: string;
+  /** Called by the sign-out control instead of following `signOutHref`. */
+  onSignOut?: () => void;
+}
+
+const {
+  appearance = false,
+  account = false,
+  signOutHref,
+  onSignOut,
+}: Props = $props();
+
 const { t } = useI18n();
 const shell = useAdminShell();
+const layout = tryUseShellLayout();
+const auth = account ? useAuth() : null;
 const edges: PanelEdge[] = ['top', 'left', 'bottom', 'right'];
+/** The identity `User` carries no display name; hosts may attach one (e.g. from the profile). */
+const accountName = $derived.by(() => {
+  const name = (auth?.user as { name?: unknown } | null)?.name;
+  return typeof name === 'string' && name ? name : null;
+});
+const REGION_OF_EDGE: Record<PanelEdge, ShellRegion> = {
+  top: 'header',
+  bottom: 'footer',
+  left: 'leftSidebar',
+  right: 'rightSidebar',
+};
+const regionLabel = (edge: PanelEdge) =>
+  t(SHELL_REGION_MESSAGES[REGION_OF_EDGE[edge]]);
+
+/** The areas this shell offers; hidden ones stay listed when a layout can restore them. */
+const rows = $derived(
+  layout
+    ? layout.panels
+        .filter((panel) => panel.available)
+        .map((panel) => ({ edge: panel.edge, visible: panel.visible }))
+    : edges
+        .filter((edge) => shell.panels[edge] !== 'hidden')
+        .map((edge) => ({ edge, visible: true })),
+);
+const visibleCount = $derived(rows.filter((row) => row.visible).length);
+const shortcutRows = $derived(rows.filter((row) => row.visible));
+const canSignOut = $derived(Boolean(signOutHref || onSignOut));
 const hotkeysEnabled = $derived(shell.settings.hotkeysEnabled !== false);
 
 function bindingFor(edge: PanelEdge): ShellHotkeyBinding | null {
@@ -34,64 +89,170 @@ function conflictFor(edge: PanelEdge): string | null {
 
 <section
   class="smrt-shell-settings-panel"
-  aria-label={t(M['ui.shell_settings_panel.shell_settings'])}
+  aria-label={t(M['ui.shell_settings_panel.shell_settings'])} data-smrt-component="ShellSettingsPanel"
 >
-  <header>
-    <div>
-      <h2>{t(M['ui.shell_settings_panel.shell_settings'])}</h2>
-      <p>{t(M['ui.shell_settings_panel.description'])}</p>
-    </div>
-    <Button
-      variant={hotkeysEnabled ? 'secondary' : 'primary'}
-      size="sm"
-      onclick={() => shell.setHotkeysEnabled(!hotkeysEnabled)}
-    >
-      {hotkeysEnabled
-        ? t(M['ui.shell_settings_panel.disable_hotkeys'])
-        : t(M['ui.shell_settings_panel.enable_hotkeys'])}
-    </Button>
-  </header>
-
-  <div class="smrt-shell-settings-panel__grid">
-    {#each edges as edge}
-      {@const panel = shell.config.panels[edge]}
-      {#if shell.panels[edge] !== 'hidden'}
-        <div class="smrt-shell-settings-panel__row">
+  {#if appearance}
+    <section data-smrt-part="appearance" aria-labelledby="smrt-shell-settings-appearance">
+      <h3 id="smrt-shell-settings-appearance">{t(M['ui.shell_settings.appearance'])}</h3>
+      <div class="smrt-shell-settings-panel__controls">
+        <ThemeSwitcher label={t(M['ui.shell_settings.theme'])} />
+        <ColorSchemeToggle ariaLabel={t(M['ui.shell_settings.color_scheme'])} />
+      </div>
+    </section>
+  {/if}
+
+  {#if auth}
+    <section data-smrt-part="account" aria-labelledby="smrt-shell-settings-account">
+      <h3 id="smrt-shell-settings-account">{t(M['ui.shell_settings.account'])}</h3>
+      {#if auth.user}
+        <dl>
+          {#if accountName}
+            <dt>{t(M['ui.shell_settings.account_name'])}</dt>
+            <dd>{accountName}</dd>
+          {/if}
+          <dt>{t(M['ui.shell_settings.account_email'])}</dt>
+          <dd>{auth.user.email}</dd>
+        </dl>
+      {:else}
+        <p>{t(M['ui.shell_settings.account_signed_out'])}</p>
+      {/if}
+      {#if canSignOut}
+        {#if onSignOut}
+          <Button variant="secondary" size="sm" onclick={onSignOut}>
+            {t(M['ui.shell_settings.sign_out'])}
+          </Button>
+        {:else}
+          <Button variant="secondary" size="sm" href={signOutHref}>
+            {t(M['ui.shell_settings.sign_out'])}
+          </Button>
+        {/if}
+      {/if}
+    </section>
+  {/if}
+
+  <section data-smrt-part="layout" aria-labelledby="smrt-shell-settings-layout">
+    <h3 id="smrt-shell-settings-layout">{t(M['ui.shell_settings.layout'])}</h3>
+    <p>{t(M['ui.shell_settings_panel.description'])}</p>
+    {#if layout?.editable}
+      <div class="smrt-shell-settings-panel__controls">
+        <Button
+          variant={layout.editing ? 'primary' : 'secondary'}
+          size="sm"
+          aria-pressed={layout.editing}
+          onclick={() => layout.setEditing(!layout.editing)}
+        >
+          {layout.editing
+            ? t(M['ui.shell_settings.edit_layout_on'])
+            : t(M['ui.shell_settings.edit_layout_off'])}
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          disabled={!layout.customized}
+          onclick={() => layout.reset()}
+        >
+          {t(M['ui.shell_settings.reset_layout'])}
+        </Button>
+      </div>
+    {:else if layout}
+      <div class="smrt-shell-settings-panel__controls">
+        <Button
+          variant="ghost"
+          size="sm"
+          disabled={!layout.customized}
+          onclick={() => layout.reset()}
+        >
+          {t(M['ui.shell_settings.reset_layout'])}
+        </Button>
+      </div>
+    {/if}
+    <div class="smrt-shell-settings-panel__grid">
+      {#each rows as row (row.edge)}
+        {@const label = regionLabel(row.edge)}
+        <div class="smrt-shell-settings-panel__row" data-edge={row.edge}>
           <div>
-            <strong>{panel.label}</strong>
-            <span>{shell.panels[edge]}</span>
+            <strong>{label}</strong>
+            <span>
+              {row.visible
+                ? t(M['ui.shell_settings.region_shown'])
+                : t(M['ui.shell_settings.region_hidden'])}
+            </span>
           </div>
           <div class="smrt-shell-settings-panel__actions">
-            <Button
-              variant="ghost"
-              size="sm"
-              onclick={() =>
-                shell.setPanel(
-                  edge,
-                  shell.panels[edge] === 'expanded'
-                    ? 'collapsed'
-                    : 'expanded',
-                )}
-            >
-              {shell.panels[edge] === 'expanded'
-                ? t(M['ui.shell_settings_panel.collapse'])
-                : t(M['ui.shell_settings_panel.expand'])}
-            </Button>
+            {#if layout}
+              <Button
+                variant="ghost"
+                size="sm"
+                disabled={row.visible && visibleCount <= 1}
+                aria-label={row.visible
+                  ? t(M['ui.shell_settings.hide_region'], { region: label })
+                  : t(M['ui.shell_settings.show_region'], { region: label })}
+                onclick={() =>
+                  layout.setPanel(row.edge, { visible: !row.visible })}
+              >
+                {row.visible
+                  ? t(M['ui.shell_settings.hide'])
+                  : t(M['ui.shell_settings.show'])}
+              </Button>
+            {/if}
+            {#if row.visible && !shell.isInline(row.edge)}
+              <Button
+                variant="ghost"
+                size="sm"
+                onclick={() =>
+                  shell.setPanel(
+                    row.edge,
+                    shell.panels[row.edge] === 'expanded'
+                      ? 'collapsed'
+                      : 'expanded',
+                  )}
+              >
+                {shell.panels[row.edge] === 'expanded'
+                  ? t(M['ui.shell_settings_panel.collapse'])
+                  : t(M['ui.shell_settings_panel.expand'])}
+              </Button>
+            {/if}
+          </div>
+        </div>
+      {/each}
+    </div>
+  </section>
+
+  {#if shell.hotkeysAvailable}
+    <section data-smrt-part="shortcuts" aria-labelledby="smrt-shell-settings-shortcuts">
+      <header>
+        <h3 id="smrt-shell-settings-shortcuts">{t(M['ui.shell_settings.shortcuts'])}</h3>
+        <Button
+          variant={hotkeysEnabled ? 'secondary' : 'primary'}
+          size="sm"
+          onclick={() => shell.setHotkeysEnabled(!hotkeysEnabled)}
+        >
+          {hotkeysEnabled
+            ? t(M['ui.shell_settings_panel.disable_hotkeys'])
+            : t(M['ui.shell_settings_panel.enable_hotkeys'])}
+        </Button>
+      </header>
+      <div class="smrt-shell-settings-panel__grid">
+        {#each shortcutRows as row (row.edge)}
+          <div class="smrt-shell-settings-panel__row" data-edge={row.edge}>
+            <strong>{regionLabel(row.edge)}</strong>
             <HotkeyInput
-              value={bindingFor(edge)}
+              value={bindingFor(row.edge)}
               disabled={!hotkeysEnabled}
-              conflictsWith={conflictFor(edge)}
+              conflictsWith={conflictFor(row.edge)}
               oncapture={(binding) =>
-                shell.setHotkey(edge, binding?.code ?? null)}
+                shell.setHotkey(row.edge, binding?.code ?? null)}
             />
           </div>
-        </div>
-      {/if}
-    {/each}
-  </div>
+        {/each}
+      </div>
+    </section>
+  {/if}
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-shell-settings-panel {
     display: grid;
     grid-template-columns: minmax(0, 1fr);
@@ -113,11 +274,37 @@ function conflictFor(edge: PanelEdge): string | null {
     justify-content: space-between;
   }
 
-  .smrt-shell-settings-panel h2,
-  .smrt-shell-settings-panel p {
+  .smrt-shell-settings-panel h3,
+  .smrt-shell-settings-panel p,
+  .smrt-shell-settings-panel dl,
+  .smrt-shell-settings-panel dd {
     margin: 0;
   }
 
+  .smrt-shell-settings-panel > section {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+    justify-items: start;
+  }
+
+  .smrt-shell-settings-panel > section > .smrt-shell-settings-panel__grid,
+  .smrt-shell-settings-panel > section > header {
+    justify-self: stretch;
+  }
+
+  .smrt-shell-settings-panel__controls {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--smrt-spacing-3);
+  }
+
+  .smrt-shell-settings-panel dl {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: var(--smrt-spacing-1) var(--smrt-spacing-4);
+  }
+
   .smrt-shell-settings-panel p,
   .smrt-shell-settings-panel span {
     color: var(--smrt-color-on-surface-variant);
@@ -146,4 +333,5 @@ function conflictFor(edge: PanelEdge): string | null {
       flex-direction: column;
     }
   }
+}
 </style>

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

@@ -1,4 +1,14 @@
-declare const ShellSettingsPanel: import("svelte").Component<Record<string, never>, {}, "">;
+interface Props {
+    /** Show the Appearance section (needs a `ThemeProvider` above). */
+    appearance?: boolean;
+    /** Show the Account section (needs the Provider's `useAuth()` above). */
+    account?: boolean;
+    /** Where the sign-out control goes; the control is hidden when neither this nor `onSignOut` is given. */
+    signOutHref?: string;
+    /** Called by the sign-out control instead of following `signOutHref`. */
+    onSignOut?: () => void;
+}
+declare const ShellSettingsPanel: import("svelte").Component<Props, {}, "">;
 type ShellSettingsPanel = ReturnType<typeof ShellSettingsPanel>;
 export default ShellSettingsPanel;
 //# sourceMappingURL=ShellSettingsPanel.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ShellSettingsPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/ShellSettingsPanel.svelte.ts"],"names":[],"mappings":"AA4FA,QAAA,MAAM,kBAAkB,2DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ShellSettingsPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/ShellSettingsPanel.svelte.ts"],"names":[],"mappings":"AAoBA,UAAU,KAAK;IACb,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yGAAyG;IACzG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AA+MD,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

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

@@ -10,9 +10,11 @@ interface Props {
 let { title, href }: Props = $props();
 </script>
 
-<a class="smrt-shell-title" {href} data-testid="shell-title">{title}</a>
+<a class="smrt-shell-title" {href} data-testid="shell-title" data-smrt-component="ShellTitle">{title}</a>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-shell-title {
     display: inline-flex;
     align-items: center;
@@ -39,4 +41,5 @@ let { title, href }: Props = $props();
     outline: 2px solid var(--smrt-color-primary);
     outline-offset: 2px;
   }
+}
 </style>

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

@@ -20,7 +20,7 @@ const edges: PanelEdge[] = ['top', 'left', 'bottom', 'right'];
 
 <section
   class="smrt-shortcuts-overlay"
-  aria-label={t(M['ui.admin_shell.shell_shortcuts'])}
+  aria-label={t(M['ui.admin_shell.shell_shortcuts'])} data-smrt-component="ShortcutsOverlay"
 >
   <header>
     <h2>{t(M['ui.admin_shell.shell_shortcuts'])}</h2>
@@ -56,6 +56,8 @@ const edges: PanelEdge[] = ['top', 'left', 'bottom', 'right'];
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-shortcuts-overlay {
     display: grid;
     gap: var(--smrt-spacing-4);
@@ -79,4 +81,5 @@ const edges: PanelEdge[] = ['top', 'left', 'bottom', 'right'];
     display: grid;
     gap: var(--smrt-spacing-3);
   }
+}
 </style>

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

@@ -17,7 +17,7 @@ const { t } = useI18n();
 
 <section
   class="smrt-system-scope-panel"
-  aria-label={t(M['ui.system_scope_panel.system_scope'])}
+  aria-label={t(M['ui.system_scope_panel.system_scope'])} data-smrt-component="SystemScopePanel"
 >
   {#each panels as panel (panel.id)}
     <section class="smrt-system-scope-panel__group" aria-label={panel.label}>
@@ -65,6 +65,8 @@ const { t } = useI18n();
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-system-scope-panel {
     display: grid;
     gap: var(--smrt-spacing-5);
@@ -117,4 +119,5 @@ const { t } = useI18n();
   .smrt-system-scope-panel__items small {
     grid-column: 1 / -1;
   }
+}
 </style>

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

@@ -15,7 +15,7 @@ const { t } = useI18n();
 
 <div
   class="smrt-system-status-chips"
-  aria-label={t(M['ui.system_status_chips.system_status'])}
+  aria-label={t(M['ui.system_status_chips.system_status'])} data-smrt-component="SystemStatusChips"
 >
   {#each chips as chip (chip.id)}
     {#if chip.href}
@@ -41,6 +41,8 @@ const { t } = useI18n();
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-system-status-chips {
     display: flex;
     flex-wrap: nowrap;
@@ -77,7 +79,7 @@ const { t } = useI18n();
     flex: none;
     inline-size: 0.5rem;
     block-size: 0.5rem;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
   }
 
   .smrt-system-status-chips [data-tone='success']::before {
@@ -91,4 +93,5 @@ const { t } = useI18n();
   .smrt-system-status-chips [data-tone='error']::before {
     background: var(--smrt-color-error);
   }
+}
 </style>