@happyvertical/smrt-svelte 0.55.6 → 0.55.8

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

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
 import { type BottomBarMode } from './mobile-shell.js';
 import { type ShellState } from './state.svelte.js';
-import type { AdminShellPhoneOptions, AdminShellProps, ShellFocusTool, ShellViewport } from './types.js';
+import { type ShellSlot } from './slots.js';
+import type { AdminShellPhoneOptions, AdminShellProps, ShellLayoutEditSurface, ShellFocusTool, ShellViewport } from './types.js';
 interface Props extends AdminShellProps {
     /** Pre-configured shell state. Creates one from config if omitted. */
     state?: ShellState;
@@ -17,6 +18,30 @@ interface Props extends AdminShellProps {
     tenantRailFooter?: Snippet;
     /** Content for the left tenant panel. */
     tenantPanel?: Snippet;
+    /**
+     * Host content for the region slots (`header.start|center|end`,
+     * `footer.start|center|end`, `leftSidebar.header|footer`,
+     * `rightSidebar.header|footer`). A slot whose region is not visible moves
+     * along its documented fallback chain (see `slotFallbackChain`).
+     */
+    slots?: Partial<Record<ShellSlot, Snippet>>;
+    /**
+     * In-place layout editing (`AppShell` supplies it): while `active`,
+     * slots render as drop zones and hidden regions as strips.
+     */
+    layoutEdit?: ShellLayoutEditSurface;
+    /** The shell's root element (bindable), e.g. to confine drag hit-testing. */
+    rootElement?: HTMLElement;
+    /**
+     * Room kept clear for a floating control (AppShell's floating layout
+     * toggle): CSS lengths for the header's end, the right sidebar's top and
+     * main's top. Part of the root's style so re-renders never drop it.
+     */
+    floatingReserve?: {
+        inline?: string;
+        block?: string;
+        main?: string;
+    };
     /** Content for the tenant panel footer. */
     tenantFooter?: Snippet;
     /** Content for the right focus rail. */
@@ -89,7 +114,7 @@ interface Props extends AdminShellProps {
     path?: string;
     children: Snippet;
 }
-declare const AdminShell: import("svelte").Component<Props, {}, "">;
+declare const AdminShell: import("svelte").Component<Props, {}, "rootElement">;
 type AdminShell = ReturnType<typeof AdminShell>;
 export default AdminShell;
 //# sourceMappingURL=AdminShell.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AdminShell.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/AdminShell.svelte.ts"],"names":[],"mappings":"AA+CA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAQtC,OAAO,EAAE,KAAK,aAAa,EAAiB,MAAM,mBAAmB,CAAC;AAStE,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EACR,sBAAsB,EACtB,eAAe,EAEf,cAAc,EACd,aAAa,EACd,MAAM,YAAY,CAAC;AAGpB,UAAU,KAAM,SAAQ,eAAe;IACrC,sEAAsE;IACtE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,mCAAmC;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,IAAI,EAAE,cAAc,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC,CAAC;IACxD;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wCAAwC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,2CAA2C;IAC3C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,QAAQ,EAAE,aAAa,CAAA;KAAE,CAAC,CAAC,CAAC;IAChD;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,MAAM,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,CAAC;IAC7C;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,QAAQ,EAAE,aAAa,CAAC;QAAC,SAAS,EAAE,aAAa,CAAA;KAAE,CAAC,CAAC,CAAC;IAC5E,uEAAuE;IACvE,KAAK,CAAC,EAAE,sBAAsB,CAAC;IAC/B,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB;AAs5BH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"AdminShell.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/AdminShell.svelte.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,86 @@
+<script lang="ts">
+/**
+ * The shell brand: logo, title, subtitle and an optional home link. Rendered
+ * by `AdminShell` in its top band, or by `AppShell` as the movable
+ * `item:brand` slot item (default slot `header.start`).
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type { Snippet } from 'svelte';
+import { M } from '../../../i18n/strings.workspace.js';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  homeHref?: string;
+  logoSrc?: string;
+  logoAlt?: string;
+  /** Custom brand content, receiving whether it is in the compact rail. */
+  brand?: Snippet<[{ compact: boolean }]>;
+  /** Compact (rail) form: logo or the title's first letter. */
+  compact?: boolean;
+}
+
+let {
+  title = 'SMRT',
+  subtitle = '',
+  homeHref,
+  logoSrc,
+  logoAlt = '',
+  brand,
+  compact = false,
+}: Props = $props();
+const { t } = useI18n();
+</script>
+
+{#snippet content()}
+  {#if brand}
+    {@render brand({ compact })}
+  {:else}
+    {#if logoSrc}<img class="smrt-admin-shell__logo" src={logoSrc} alt={logoAlt} />{/if}
+    {#if compact}
+      {#if !logoSrc}<span aria-hidden="true">{title.charAt(0)}</span>{/if}
+    {:else}
+      <div class="smrt-admin-shell__brand-text" class:wordmark={Boolean(logoSrc) && !subtitle}><strong>{title}</strong>{#if subtitle}<span>{subtitle}</span>{/if}</div>
+    {/if}
+  {/if}
+{/snippet}
+
+{#if homeHref}
+  <a class="smrt-admin-shell__brand smrt-admin-shell__brand-link" class:compact href={homeHref} aria-label={title || t(M['ui.admin_shell.home'])}>
+    {@render content()}
+  </a>
+{:else}
+  <div class="smrt-admin-shell__brand" class:compact>{@render content()}</div>
+{/if}
+
+<style>
+  .smrt-admin-shell__brand {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2);
+    min-width: 0;
+    color: inherit;
+    text-decoration: none;
+  }
+  .smrt-admin-shell__brand-text { display: grid; min-width: 0; }
+  .smrt-admin-shell__brand.compact { justify-content: center; margin-block-end: var(--smrt-spacing-2); }
+  .smrt-admin-shell__brand-link:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
+  .smrt-admin-shell__logo { inline-size: 2rem; block-size: 2rem; object-fit: contain; flex-shrink: 0; }
+
+  .smrt-admin-shell__brand strong,
+  .smrt-admin-shell__brand span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .smrt-admin-shell__brand span {
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  /* Logo and title alone ([logo] Planner): the title reads as a wordmark,
+     its line as tall as the 2rem logo. */
+  .smrt-admin-shell__brand-text.wordmark strong {
+    font: var(--smrt-typography-headline-small-font, 500 1.5rem/2rem sans-serif);
+  }
+</style>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title?: string;
+    subtitle?: string;
+    homeHref?: string;
+    logoSrc?: string;
+    logoAlt?: string;
+    /** Custom brand content, receiving whether it is in the compact rail. */
+    brand?: Snippet<[{
+        compact: boolean;
+    }]>;
+    /** Compact (rail) form: logo or the title's first letter. */
+    compact?: boolean;
+}
+declare const ShellBrand: import("svelte").Component<Props, {}, "">;
+type ShellBrand = ReturnType<typeof ShellBrand>;
+export default ShellBrand;
+//# sourceMappingURL=ShellBrand.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShellBrand.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/ShellBrand.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,CAAC;IACxC,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA6CD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,77 @@
+<script lang="ts">
+/**
+ * Icon-only button used by the layout-editing chrome: a labelled `<button>`
+ * with the label as tooltip, `aria-pressed` for toggles, and a 2rem hit area
+ * (the same visual language as a nav row's `action`).
+ */
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { SHELL_ICON_PATHS, type ShellIconName } from './shell-icons.js';
+
+interface Props
+  extends Omit<HTMLButtonAttributes, 'aria-label' | 'title' | 'children'> {
+  /** Accessible name and tooltip. */
+  label: string;
+  /** Which filled icon to draw (omit when passing `children`). */
+  icon?: ShellIconName;
+  /** Custom icon content, drawn instead of `icon` (decorative). */
+  children?: Snippet;
+  /** Toggle state; omit for a plain action button. */
+  pressed?: boolean;
+  /** Tooltip text when it should differ from the label (default: the label). */
+  tooltip?: string;
+  /** Icon edge length in pixels (default 18). */
+  size?: number;
+}
+
+let {
+  label,
+  icon,
+  children,
+  pressed,
+  tooltip,
+  size = 18,
+  type = 'button',
+  class: className = '',
+  ...rest
+}: Props = $props();
+</script>
+
+<!-- raw-primitive-allow: icon-only shell chrome control (tooltip + aria-pressed) -->
+<button
+  {...rest}
+  {type}
+  class="smrt-shell-icon-button {className}"
+  aria-label={label}
+  title={tooltip ?? label}
+  aria-pressed={pressed}
+>
+  {#if children}
+    {@render children()}
+  {:else if icon}
+    <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" aria-hidden="true" focusable="false">
+      <path d={SHELL_ICON_PATHS[icon]} />
+    </svg>
+  {/if}
+</button>
+
+<style>
+  .smrt-shell-icon-button {
+    flex: 0 0 auto;
+    display: inline-grid;
+    place-items: center;
+    box-sizing: border-box;
+    inline-size: max(2rem, var(--smrt-control-target-min, 0px));
+    block-size: max(2rem, var(--smrt-control-target-min, 0px));
+    padding: 0;
+    border: 0;
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+    background: transparent;
+    color: var(--smrt-color-on-surface-variant);
+    cursor: pointer;
+  }
+  .smrt-shell-icon-button:hover { background: var(--smrt-color-surface-container-high); color: var(--smrt-color-on-surface); }
+  .smrt-shell-icon-button[aria-pressed='true'] { color: var(--smrt-color-on-surface); }
+  .smrt-shell-icon-button:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
+  .smrt-shell-icon-button:disabled { opacity: 0.5; cursor: not-allowed; }
+</style>

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

@@ -0,0 +1,26 @@
+/**
+ * Icon-only button used by the layout-editing chrome: a labelled `<button>`
+ * with the label as tooltip, `aria-pressed` for toggles, and a 2rem hit area
+ * (the same visual language as a nav row's `action`).
+ */
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type ShellIconName } from './shell-icons.js';
+interface Props extends Omit<HTMLButtonAttributes, 'aria-label' | 'title' | 'children'> {
+    /** Accessible name and tooltip. */
+    label: string;
+    /** Which filled icon to draw (omit when passing `children`). */
+    icon?: ShellIconName;
+    /** Custom icon content, drawn instead of `icon` (decorative). */
+    children?: Snippet;
+    /** Toggle state; omit for a plain action button. */
+    pressed?: boolean;
+    /** Tooltip text when it should differ from the label (default: the label). */
+    tooltip?: string;
+    /** Icon edge length in pixels (default 18). */
+    size?: number;
+}
+declare const ShellIconButton: import("svelte").Component<Props, {}, "">;
+type ShellIconButton = ReturnType<typeof ShellIconButton>;
+export default ShellIconButton;
+//# sourceMappingURL=ShellIconButton.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShellIconButton.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/ShellIconButton.svelte.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAoB,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGxE,UAAU,KACR,SAAQ,IAAI,CAAC,oBAAoB,EAAE,YAAY,GAAG,OAAO,GAAG,UAAU,CAAC;IACvE,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAoCD,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-import { Switch } from '@happyvertical/smrt-ui/forms';
+import { Input, Switch } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { Button } from '@happyvertical/smrt-ui/ui';
-import { type Component, untrack } from 'svelte';
+import { type Component, tick, untrack } from 'svelte';
 import { M } from '../../../i18n/strings.workspace.js';
 import Sortable from '../../sortable/Sortable.svelte';
 import type {
@@ -13,6 +13,7 @@ import type {
 } from '../../sortable/types.js';
 import { useShellLayout } from './layout-context.js';
 import type { ShellLayoutController } from './layout-controller.svelte.js';
+import ShellIconButton from './ShellIconButton.svelte';
 import TenantNav from './TenantNav.svelte';
 
 interface Props {
@@ -38,6 +39,9 @@ const applied = $derived(layout.applied);
 interface NavContainer extends SortableContainer {
   hidden: boolean;
   root: boolean;
+  custom: boolean;
+  titleVisible: boolean;
+  count: number;
 }
 
 const containers = $derived<NavContainer[]>(
@@ -47,6 +51,9 @@ const containers = $derived<NavContainer[]>(
     fixed: section.group === null,
     root: section.group === null,
     hidden: section.hidden,
+    custom: section.custom,
+    titleVisible: section.titleVisible,
+    count: section.items.length,
   })),
 );
 const items = $derived<SortableItem[]>(
@@ -54,7 +61,7 @@ const items = $derived<SortableItem[]>(
     section.items.map((entry) => ({
       id: entry.id,
       containerId: section.id,
-      label: entry.item.label,
+      label: entry.label,
     })),
   ),
 );
@@ -64,6 +71,40 @@ function setShown(id: string, shown: boolean): void {
   else layout.hide(id);
 }
 
+let rootEl: HTMLElement | undefined = $state();
+
+function rename(id: string, event: Event): void {
+  const input = event.currentTarget as HTMLInputElement;
+  layout.renameSection(id, input.value);
+  // Blank or rejected input snaps back to the section's real name.
+  input.value = containers.find((entry) => entry.id === id)?.label ?? '';
+}
+
+async function createSection(): Promise<void> {
+  const id = layout.createSection(
+    t(M['ui.shell_layout_editor.new_section_label']),
+  );
+  if (!id) return;
+  await tick();
+  const input = rootEl?.querySelector<HTMLInputElement>(
+    `input[data-section-name="${CSS.escape(id)}"]`,
+  );
+  input?.focus();
+  input?.select();
+}
+
+function deleteSection(id: string, label: string, count: number): void {
+  if (
+    count > 0 &&
+    !globalThis.confirm?.(
+      t(M['ui.shell_layout_editor.delete_confirm'], { label }),
+    )
+  ) {
+    return;
+  }
+  layout.deleteSection(id);
+}
+
 function onmove(move: SortableItemMove<SortableItem, NavContainer>): void {
   layout.moveItem(move.item.id, move.target.containerId, move.target.index);
 }
@@ -73,7 +114,7 @@ function oncontainermove(move: SortableContainerMove<NavContainer>): void {
 }
 </script>
 
-<section class="smrt-shell-layout-editor" aria-labelledby={headingId}>
+<section class="smrt-shell-layout-editor" aria-labelledby={headingId} bind:this={rootEl}>
   <header>
     <div>
       <h2 id={headingId}>{t(M['ui.shell_layout_editor.heading'])}</h2>
@@ -122,7 +163,12 @@ function oncontainermove(move: SortableContainerMove<NavContainer>): void {
 
   <div class="smrt-shell-layout-editor__body">
     <div class="smrt-shell-layout-editor__nav">
-      <h3>{t(M['ui.shell_layout_editor.navigation'])}</h3>
+      <div class="smrt-shell-layout-editor__nav-head">
+        <h3>{t(M['ui.shell_layout_editor.navigation'])}</h3>
+        <Button variant="secondary" size="sm" onclick={createSection}>
+          {t(M['ui.shell_layout_editor.new_section'])}
+        </Button>
+      </div>
       <Sortable
         {containers}
         {items}
@@ -133,24 +179,46 @@ function oncontainermove(move: SortableContainerMove<NavContainer>): void {
       >
         {#snippet containerHeader({ container })}
           {@const entry = containers.find((candidate) => candidate.id === container.id)}
-          <strong class:smrt-shell-layout-editor__muted={entry?.hidden}>{container.label}</strong>
-          {#if !entry?.root}
-            <Switch
+          {#if entry?.root}
+            <strong>{container.label}</strong>
+          {:else}
+            <Input
+              class="smrt-shell-layout-editor__name"
               interaction={false}
-              checked={!entry?.hidden}
-              aria-label={t(M['ui.shell_layout_editor.show_entry'], { label: container.label })}
-              onchange={(event) => setShown(container.id, event.currentTarget.checked)}
+              data-section-name={container.id}
+              aria-label={t(M['ui.shell_layout_editor.section_name'], { label: container.label })}
+              value={container.label}
+              onchange={(event) => rename(container.id, event)}
+            />
+            <ShellIconButton
+              icon={entry?.hidden ? 'eyeOff' : 'eye'}
+              pressed={!entry?.hidden}
+              label={t(M['ui.shell_layout_editor.show_entry'], { label: container.label })}
+              onclick={() => setShown(container.id, !!entry?.hidden)}
             />
+            <ShellIconButton
+              icon={entry?.titleVisible === false ? 'headingOff' : 'heading'}
+              pressed={entry?.titleVisible ?? true}
+              label={t(M['ui.shell_layout_editor.show_title_for'], { label: container.label })}
+              onclick={() => layout.setSectionTitleVisible(container.id, !(entry?.titleVisible ?? true))}
+            />
+            {#if entry?.custom}
+              <ShellIconButton
+                icon="trash"
+                label={t(M['ui.shell_layout_editor.delete_section'], { label: container.label })}
+                onclick={() => deleteSection(container.id, container.label, entry.count)}
+              />
+            {/if}
           {/if}
         {/snippet}
         {#snippet item({ item: entry, container })}
           {@const hidden = layout.isHidden(entry.id)}
           <span class="smrt-shell-layout-editor__label" class:smrt-shell-layout-editor__muted={hidden || layout.isHidden(container.id)}>{entry.label}</span>
-          <Switch
-            interaction={false}
-            checked={!hidden}
-            aria-label={t(M['ui.shell_layout_editor.show_entry'], { label: entry.label })}
-            onchange={(event) => setShown(entry.id, event.currentTarget.checked)}
+          <ShellIconButton
+            icon={hidden ? 'eyeOff' : 'eye'}
+            pressed={!hidden}
+            label={t(M['ui.shell_layout_editor.show_entry'], { label: entry.label })}
+            onclick={() => setShown(entry.id, hidden)}
           />
         {/snippet}
       </Sortable>
@@ -187,8 +255,12 @@ function oncontainermove(move: SortableContainerMove<NavContainer>): void {
   .smrt-shell-layout-editor__panels legend { padding-inline: var(--smrt-spacing-1); font: var(--smrt-typography-title-small-font); }
   .smrt-shell-layout-editor__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--smrt-spacing-4); }
   .smrt-shell-layout-editor__body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--smrt-spacing-4); align-items: start; }
+  .smrt-shell-layout-editor__nav-head { display: flex; align-items: center; justify-content: space-between; gap: var(--smrt-spacing-3); }
+  .smrt-shell-layout-editor__nav-head h3 { margin-block-end: 0; }
+  :global(.smrt-shell-layout-editor__name) { flex: 1 1 8rem; min-inline-size: 0; }
   .smrt-shell-layout-editor__label { flex: 1 1 auto; min-inline-size: 0; }
   .smrt-shell-layout-editor__preview-frame { padding: var(--smrt-spacing-3); border: 1px dashed var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-md); background: var(--smrt-color-surface-container-low, var(--smrt-color-surface)); }
+  /* Label on its own line (never broken mid-word); the select and Reset share the next line. */
   @media (max-width: 48rem) {
     .smrt-shell-layout-editor header { flex-direction: column; }
     .smrt-shell-layout-editor__body { grid-template-columns: minmax(0, 1fr); }

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

@@ -1 +1 @@
-{"version":3,"file":"ShellLayoutEditor.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/ShellLayoutEditor.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,QAAQ,CAAC;AAUjD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAI3E,UAAU,KAAK;IACb,oEAAoE;IACpE,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yDAAyD;IACzD,aAAa,CAAC,EAAE,SAAS,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC5D;AAiID,QAAA,MAAM,iBAAiB,0BAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ShellLayoutEditor.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/ShellLayoutEditor.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,SAAS,EAAiB,MAAM,QAAQ,CAAC;AAUvD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAK3E,UAAU,KAAK;IACb,oEAAoE;IACpE,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yDAAyD;IACzD,aAAa,CAAC,EAAE,SAAS,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC5D;AAqLD,QAAA,MAAM,iBAAiB,0BAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}