@happyvertical/smrt-svelte 0.55.6 → 0.55.8

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

@@ -0,0 +1,290 @@
+<script lang="ts">
+/**
+ * A section's entries as a menu: one row per navigation item, in the layout's
+ * order with the user's renames (hidden entries are left out). Used on a
+ * section's own page when the shell shows only sections
+ * (`navMode: 'sections'`). Hosts add per-row content with `meta(entry)`
+ * (e.g. "8 records") and `actions(entry)` (e.g. a "New course" link).
+ *
+ * While the layout is being edited the rows get the same chrome as the nav
+ * editor: a grip (drag, or Space plus arrows), an inline rename, and a
+ * show/hide toggle, all driving the layout controller. Rows are plain text
+ * then, not links.
+ */
+import { Input } from '@happyvertical/smrt-ui/forms';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { type Component, type Snippet, tick, untrack } from 'svelte';
+import { M } from '../../../i18n/strings.workspace.js';
+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 ShellIconButton from './ShellIconButton.svelte';
+import ShellSectionIcon from './ShellSectionIcon.svelte';
+import { SHELL_DEFAULT_SECTION_ICON, SHELL_ICON_PATHS } from './shell-icons.js';
+import type { ShellSectionMenuEntry } from './types.js';
+
+interface Props {
+  /** The section's id (`ShellNavGroup.id ?? heading`). */
+  sectionId: string;
+  /** The layout API; defaults to the nearest `AppShell`'s. */
+  controller?: ShellLayoutController;
+  /** Accessible name for the list (default "<section> entries"). */
+  'aria-label'?: string;
+  /** Renders host icon names, as for `TenantNav`. */
+  iconComponent?: Component<{ name: string; size?: number }>;
+  /** Content after the label, e.g. a record count. */
+  meta?: Snippet<[ShellSectionMenuEntry]>;
+  /** Trailing links or buttons, e.g. "New <noun>". Not shown while editing. */
+  actions?: Snippet<[ShellSectionMenuEntry]>;
+  /**
+   * `list` (default): compact rows. `cards`: a responsive grid of cards, each
+   * with a large icon, the label, the item's `description`, then `meta` and
+   * `actions` along the bottom.
+   */
+  layout?: 'list' | 'cards';
+  /** Called when the user follows a row link. */
+  onNavigate?: () => void;
+}
+
+let {
+  sectionId,
+  controller: provided,
+  'aria-label': ariaLabel,
+  iconComponent: IconComponent,
+  meta,
+  actions,
+  layout: layoutMode = 'list',
+  onNavigate,
+}: Props = $props();
+
+const { t } = useI18n();
+const layout = untrack(() => provided ?? useShellLayout());
+
+const section = $derived(layout.sections.find((s) => s.id === sectionId));
+const editing = $derived(layout.editing);
+const label = $derived(section?.heading ?? sectionId);
+const entries = $derived<ShellSectionMenuEntry[]>(
+  (section?.items ?? [])
+    .filter((entry) => editing || !entry.hidden)
+    .map((entry) => ({
+      id: entry.id,
+      href: entry.item.href,
+      label: entry.label,
+      defaultLabel: entry.defaultLabel,
+      icon: entry.item.icon,
+      hidden: entry.hidden,
+      item: entry.item,
+    })),
+);
+const listLabel = $derived(
+  ariaLabel || t(M['ui.section_menu.label'], { label }),
+);
+const containers = $derived([{ id: sectionId, label: listLabel }]);
+const sortableItems = $derived<SortableItem[]>(
+  entries.map((entry) => ({
+    id: entry.id,
+    containerId: sectionId,
+    label: entry.label,
+  })),
+);
+const entryById = $derived(new Map(entries.map((entry) => [entry.id, entry])));
+
+let rootEl: HTMLElement | undefined = $state();
+let renaming = $state<string | null>(null);
+
+async function startRename(id: string): Promise<void> {
+  renaming = id;
+  await tick();
+  const input = rootEl?.querySelector<HTMLInputElement>(
+    `input[data-item-name="${CSS.escape(id)}"]`,
+  );
+  input?.focus();
+  input?.select();
+}
+
+function commitRename(id: string, value: string): void {
+  if (renaming !== id) return;
+  renaming = null;
+  layout.renameItem(id, value);
+}
+
+function cancelRename(id: string): void {
+  renaming = null;
+  rootEl
+    ?.querySelector<HTMLElement>(`button[data-item-rename="${CSS.escape(id)}"]`)
+    ?.focus();
+}
+
+function setShown(id: string, shown: boolean): void {
+  if (shown) layout.show(id);
+  else layout.hide(id);
+}
+
+function onmove(move: SortableItemMove<SortableItem>): void {
+  layout.moveItem(move.item.id, sectionId, move.target.index);
+}
+</script>
+
+<div
+  class="smrt-section-menu"
+  class:smrt-section-menu--cards={layoutMode === 'cards'}
+  bind:this={rootEl}
+  data-editing={editing ? '' : undefined}
+>
+  {#if editing}
+    <Sortable
+      {containers}
+      items={sortableItems}
+      label={listLabel}
+      {onmove}
+    >
+      {#snippet item({ item: sortable })}
+        {@const entry = entryById.get(sortable.id)}
+        {#if entry}
+          <span class="smrt-section-menu__row" class:smrt-section-menu__row--muted={entry.hidden}>
+            {#if entry.icon}
+              <ShellSectionIcon name={entry.icon} iconComponent={IconComponent} />
+            {/if}
+            {#if renaming === entry.id}
+              <Input
+                class="smrt-section-menu__name"
+                interaction={false}
+                data-item-name={entry.id}
+                aria-label={t(M['ui.shell_layout_editor.item_name'], { label: entry.label })}
+                value={entry.label}
+                onblur={(event) => commitRename(entry.id, event.currentTarget.value)}
+                onkeydown={(event) => {
+                  if (event.key === 'Enter') {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    const value = event.currentTarget.value;
+                    commitRename(entry.id, value);
+                    cancelRename(entry.id);
+                  } else if (event.key === 'Escape') {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    cancelRename(entry.id);
+                  }
+                }}
+              />
+            {:else}
+              <strong title={entry.defaultLabel !== entry.label ? entry.defaultLabel : undefined}>{entry.label}</strong>
+            {/if}
+            {@render meta?.(entry)}
+            {#if layoutMode === 'cards' && entry.item.description}
+              <span class="smrt-section-menu__desc">{entry.item.description}</span>
+            {/if}
+          </span>
+          <ShellIconButton
+            icon="edit"
+            data-item-rename={entry.id}
+            label={t(M['ui.shell_layout_editor.rename_item'], { label: entry.label })}
+            onclick={() => startRename(entry.id)}
+          />
+          {#if entry.defaultLabel !== entry.label}
+            <ShellIconButton
+              icon="undo"
+              label={t(M['ui.shell_layout_editor.reset_item'], { label: entry.label, original: entry.defaultLabel })}
+              onclick={() => layout.renameItem(entry.id, null)}
+            />
+          {/if}
+          <ShellIconButton
+            icon={entry.hidden ? 'eyeOff' : 'eye'}
+            pressed={!entry.hidden}
+            label={t(M['ui.shell_layout_editor.show_entry'], { label: entry.label })}
+            onclick={() => setShown(entry.id, entry.hidden)}
+          />
+        {/if}
+      {/snippet}
+    </Sortable>
+  {:else if entries.length === 0}
+    <p class="smrt-section-menu__empty">{t(M['ui.section_menu.empty'])}</p>
+  {: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">
+          <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>
+            <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}
+          </a>
+          {#if meta || actions}
+            <div class="smrt-section-menu__card-foot">
+              {#if meta}<span class="smrt-section-menu__meta">{@render meta(entry)}</span>{/if}
+              {#if actions}<span class="smrt-section-menu__actions">{@render actions(entry)}</span>{/if}
+            </div>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {:else}
+    <ul class="smrt-section-menu__list" aria-label={listLabel}>
+      {#each entries as entry (entry.id)}
+        <li class="smrt-section-menu__item">
+          <a class="smrt-section-menu__link" href={entry.href} onclick={onNavigate}>
+            {#if entry.icon}
+              <ShellSectionIcon name={entry.icon} iconComponent={IconComponent} />
+            {/if}
+            <span class="smrt-section-menu__label">{entry.label}</span>
+          </a>
+          {#if meta}<span class="smrt-section-menu__meta">{@render meta(entry)}</span>{/if}
+          {#if actions}<span class="smrt-section-menu__actions">{@render actions(entry)}</span>{/if}
+          <svg class="smrt-section-menu__chevron" viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true" focusable="false"><path d={SHELL_ICON_PATHS.chevronRight} /></svg>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .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__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__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; }
+  /* 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-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-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); }
+  .smrt-section-menu--cards :global(.smrt-sortable__item) { align-items: flex-start; }
+  .smrt-section-menu--cards .smrt-section-menu__row { flex-wrap: wrap; }
+  .smrt-section-menu--cards .smrt-section-menu__row .smrt-section-menu__desc { flex: 1 1 100%; }
+  .smrt-section-menu__empty { margin: 0; color: var(--smrt-color-on-surface-variant); }
+
+  /* Edit mode: the generic Sortable reads as the same rows. */
+  .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__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

@@ -0,0 +1,32 @@
+import { type Component, type Snippet } from 'svelte';
+import type { ShellLayoutController } from './layout-controller.svelte.js';
+import type { ShellSectionMenuEntry } from './types.js';
+interface Props {
+    /** The section's id (`ShellNavGroup.id ?? heading`). */
+    sectionId: string;
+    /** The layout API; defaults to the nearest `AppShell`'s. */
+    controller?: ShellLayoutController;
+    /** Accessible name for the list (default "<section> entries"). */
+    'aria-label'?: string;
+    /** Renders host icon names, as for `TenantNav`. */
+    iconComponent?: Component<{
+        name: string;
+        size?: number;
+    }>;
+    /** Content after the label, e.g. a record count. */
+    meta?: Snippet<[ShellSectionMenuEntry]>;
+    /** Trailing links or buttons, e.g. "New <noun>". Not shown while editing. */
+    actions?: Snippet<[ShellSectionMenuEntry]>;
+    /**
+     * `list` (default): compact rows. `cards`: a responsive grid of cards, each
+     * with a large icon, the label, the item's `description`, then `meta` and
+     * `actions` along the bottom.
+     */
+    layout?: 'list' | 'cards';
+    /** Called when the user follows a row link. */
+    onNavigate?: () => void;
+}
+declare const ShellSectionMenu: Component<Props, {}, "">;
+type ShellSectionMenu = ReturnType<typeof ShellSectionMenu>;
+export default ShellSectionMenu;
+//# sourceMappingURL=ShellSectionMenu.svelte.d.ts.map

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

@@ -0,0 +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"}

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

@@ -2,10 +2,11 @@
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import type { Component } from 'svelte';
 import { M } from '../../../i18n/strings.workspace.js';
+import ShellSectionIcon from './ShellSectionIcon.svelte';
+import { SHELL_DEFAULT_SECTION_ICON, SHELL_ICON_PATHS } from './shell-icons.js';
 import type { ShellNavGroup, ShellNavItem } from './types.js';
 
 const DEFAULT_ACTION_ICON = 'settings';
-const DEFAULT_ACTION_GLYPH = '\u2699';
 
 interface Props {
   /** Navigation items with href, label, icon, and optional children. */
@@ -24,6 +25,14 @@ interface Props {
   collapsed?: boolean;
   /** Called when the user clicks a navigation link. */
   onNavigate?: () => void;
+  /**
+   * `'items'` (default) lists every group's entries. `'sections'` shows only
+   * the sections, one icon link each, to the section's own page
+   * (`ShellNavGroup.href`, else `sectionHref(id)`, else its first entry).
+   */
+  navMode?: 'items' | 'sections';
+  /** Section page for groups without an `href` (e.g. user-created ones). */
+  sectionHref?: (sectionId: string) => string | undefined;
 }
 
 let {
@@ -35,6 +44,8 @@ let {
   iconComponent: IconComponent,
   collapsed = false,
   onNavigate,
+  navMode = 'items',
+  sectionHref,
 }: Props = $props();
 const { t } = useI18n();
 
@@ -55,6 +66,23 @@ function isGroupCurrent(group: ShellNavGroup): boolean {
   return group.items.some(isItemCurrent);
 }
 
+function groupId(group: ShellNavGroup): string {
+  return group.id ?? group.heading;
+}
+
+function groupHref(group: ShellNavGroup): string | undefined {
+  return group.href ?? sectionHref?.(groupId(group)) ?? group.items[0]?.href;
+}
+
+/** A section is current on its own page or on any of its entries' pages. */
+function isSectionCurrent(group: ShellNavGroup): boolean {
+  const href = groupHref(group);
+  return (
+    (!!href && (href === currentHref || currentHref.startsWith(`${href}/`))) ||
+    isGroupCurrent(group)
+  );
+}
+
 function showAction(item: ShellNavItem, sectionCurrent: boolean): boolean {
   if (collapsed || !item.action) return false;
   return item.action.visibility !== 'active' || sectionCurrent;
@@ -142,8 +170,10 @@ function fallbackIcon(label: string): string {
           <span class="smrt-tenant-nav__icon" aria-hidden="true">
             {#if IconComponent}
               <IconComponent name={action.icon ?? DEFAULT_ACTION_ICON} size={16} />
+            {:else if action.icon}
+              {action.icon}
             {:else}
-              {action.icon ?? DEFAULT_ACTION_GLYPH}
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d={SHELL_ICON_PATHS.settings} /></svg>
             {/if}
           </span>
         </a>
@@ -188,6 +218,40 @@ function fallbackIcon(label: string): string {
 
   {@render navItems(items)}
   {#each groups as group}
+    {#if navMode === 'sections'}
+      {@const href = groupHref(group)}
+      {#if href}
+        <div class="smrt-tenant-nav__section" data-nav-section={groupId(group)}>
+          <div class="smrt-tenant-nav__row">
+            <a
+              {href}
+              class="smrt-tenant-nav__section-link"
+              class:smrt-tenant-nav__link--visible-active={isSectionCurrent(group)}
+              aria-current={href === currentHref ? 'page' : isSectionCurrent(group) ? 'true' : undefined}
+              title={collapsed ? group.heading : undefined}
+              onclick={onNavigate}
+            >
+              <span class="smrt-tenant-nav__icon" aria-hidden="true">
+                <ShellSectionIcon
+                  name={group.icon ?? SHELL_DEFAULT_SECTION_ICON}
+                  size={18}
+                  iconComponent={IconComponent}
+                />
+              </span>
+              {#if collapsed}
+                <span class="smrt-tenant-nav__sr-only">{group.heading}</span>
+              {:else}
+                <strong>{group.heading}</strong>
+              {/if}
+            </a>
+          </div>
+        </div>
+      {/if}
+    {:else if group.showTitle === false}
+      <div class="smrt-tenant-nav__group smrt-tenant-nav__group--flat" role="group" aria-label={group.heading}>
+        <div class="smrt-tenant-nav__group-items">{@render navItems(group.items, isGroupCurrent(group))}</div>
+      </div>
+    {:else}
     <details class="smrt-tenant-nav__group" aria-label={group.heading} open>
       <summary class="smrt-tenant-nav__heading">
         {#if collapsed}
@@ -199,6 +263,7 @@ function fallbackIcon(label: string): string {
       </summary>
       <div class="smrt-tenant-nav__group-items">{@render navItems(group.items, isGroupCurrent(group))}</div>
     </details>
+    {/if}
   {/each}
 </nav>
 

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

@@ -20,6 +20,14 @@ interface Props {
     collapsed?: boolean;
     /** Called when the user clicks a navigation link. */
     onNavigate?: () => void;
+    /**
+     * `'items'` (default) lists every group's entries. `'sections'` shows only
+     * the sections, one icon link each, to the section's own page
+     * (`ShellNavGroup.href`, else `sectionHref(id)`, else its first entry).
+     */
+    navMode?: 'items' | 'sections';
+    /** Section page for groups without an `href` (e.g. user-created ones). */
+    sectionHref?: (sectionId: string) => string | undefined;
 }
 declare const TenantNav: Component<Props, {}, "">;
 type TenantNav = ReturnType<typeof TenantNav>;

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,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;AAkKD,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;AAIxC,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;IACxB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC/B,0EAA0E;IAC1E,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;CACzD;AAgND,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/layout-controller.svelte.d.ts

@@ -1,4 +1,5 @@
 import { type ShellLayout, type ShellNavModelSection } from './layout.js';
+import { type ShellPlacementItem, type ShellRegion, type ShellSlot } from './slots.js';
 import type { PanelEdge, ShellNavGroup, ShellNavItem, ShellPanelDefaults } from './types.js';
 export interface ShellLayoutControllerOptions {
     /** The host's flat navigation, before any layout. */
@@ -9,6 +10,16 @@ export interface ShellLayoutControllerOptions {
     panels: () => ShellPanelDefaults | undefined;
     /** The layout currently in force (host-owned, or stored by the shell). */
     layout: () => ShellLayout | null | undefined;
+    /**
+     * The movable shell items (dock toggles, host items) with their default
+     * slots. Omit when the shell has none.
+     */
+    items?: () => ShellPlacementItem[];
+    /**
+     * Whether in-place layout editing is offered (the host opted in). Omit for
+     * "not offered": `editing` stays false and `setEditing(true)` is refused.
+     */
+    editable?: () => boolean;
     /** Store the next layout (and notify the host). */
     commit: (layout: ShellLayout) => void;
 }
@@ -21,6 +32,17 @@ export interface ShellLayoutPanelView {
     visible: boolean;
     initial: 'collapsed' | 'expanded';
 }
+/** One movable shell item as an editor presents it. */
+export interface ShellPlacementView {
+    id: string;
+    label: string;
+    /** The slot the item lives in unless the user moved it. */
+    defaultSlot: ShellSlot;
+    /** The slot the layout puts it in (before any hidden-region fallback). */
+    slot: ShellSlot;
+    /** The user moved it away from its default slot. */
+    moved: boolean;
+}
 /**
  * The layout API: the same changes the `ShellLayoutEditor` makes, as plain
  * calls an assistant (or any host code) can make. Obtain it with
@@ -30,7 +52,17 @@ export interface ShellLayoutPanelView {
  */
 export declare class ShellLayoutController {
     private readonly options;
+    private editingState;
     constructor(options: ShellLayoutControllerOptions);
+    /** Whether in-place layout editing is offered by the host. */
+    get editable(): boolean;
+    /** Whether the shell is in layout edit mode (always false if not `editable`). */
+    get editing(): boolean;
+    /**
+     * Enter or leave layout edit mode. Returns whether the mode changed; entering
+     * is refused (`false`) when the host did not opt in.
+     */
+    setEditing(editing: boolean): boolean;
     /** The layout in force, normalized. */
     get layout(): ShellLayout;
     /** Every section and item in display order, hidden ones flagged. */
@@ -42,6 +74,12 @@ export declare class ShellLayoutController {
     };
     /** Each edge panel with its effective visibility and starting state. */
     get panels(): ShellLayoutPanelView[];
+    /** The movable shell items with their default and current slots. */
+    get placementItems(): ShellPlacementView[];
+    /** Items per slot in display order (every slot present, possibly empty). */
+    get placements(): Record<ShellSlot, ShellPlacementView[]>;
+    /** Whether a region is shown (its edge is available and not hidden). */
+    isRegionVisible(region: ShellRegion): boolean;
     /** Whether a customization is in force. */
     get customized(): boolean;
     /** Whether a section or item is hidden by the layout. */
@@ -63,6 +101,35 @@ export declare class ShellLayoutController {
         visible?: boolean;
         initial?: 'collapsed' | 'expanded';
     }): boolean;
+    /**
+     * Rename a section (host or custom). A blank label restores the host's
+     * suggested heading (custom sections ignore blank labels).
+     */
+    renameSection(sectionId: string, label: string): boolean;
+    /**
+     * Rename a navigation item (by its id). `null` or a blank label restores
+     * the host's label. Returns whether the layout changed.
+     */
+    renameItem(itemId: string, label: string | null): boolean;
+    /**
+     * Set a section's icon (a shell or host icon name). `null` or blank
+     * restores the host's suggested icon.
+     */
+    setSectionIcon(sectionId: string, icon: string | null): boolean;
+    /** Show or hide a section's title; hidden titles render its items flat. */
+    setSectionTitleVisible(sectionId: string, visible: boolean): boolean;
+    /** Create an empty custom section; returns its id, or `null` when blank. */
+    createSection(label: string): string | null;
+    /** Delete a custom section; its items return to their default sections. */
+    deleteSection(sectionId: string): boolean;
+    /**
+     * Move a shell item (`dock:<tool>`, `slot:<slot>`, or a host item id) to
+     * `slot`. Unknown ids and slots are no-ops. If the slot's region is hidden
+     * the item still renders, via the slot's fallback chain.
+     */
+    placeItem(itemId: string, slot: ShellSlot): boolean;
+    /** Return a shell item to its default slot. */
+    resetItem(itemId: string): boolean;
     /** Drop every customization. */
     reset(): boolean;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"layout-controller.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/layout-controller.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,WAAW,EAChB,KAAK,oBAAoB,EAG1B,MAAM,aAAa,CAAC;AAErB,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,YAAY,EACZ,kBAAkB,EACnB,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,4BAA4B;IAC3C,qDAAqD;IACrD,GAAG,EAAE,MAAM,YAAY,EAAE,CAAC;IAC1B,uDAAuD;IACvD,MAAM,EAAE,MAAM,aAAa,EAAE,CAAC;IAC9B,oDAAoD;IACpD,MAAM,EAAE,MAAM,kBAAkB,GAAG,SAAS,CAAC;IAC7C,0EAA0E;IAC1E,MAAM,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IAC7C,mDAAmD;IACnD,MAAM,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CACvC;AAED,+CAA+C;AAC/C,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,WAAW,GAAG,UAAU,CAAC;CACnC;AAED;;;;;;GAMG;AACH,qBAAa,qBAAqB;IACpB,OAAO,CAAC,QAAQ,CAAC,OAAO;gBAAP,OAAO,EAAE,4BAA4B;IAElE,uCAAuC;IACvC,IAAI,MAAM,IAAI,WAAW,CAIxB;IAED,oEAAoE;IACpE,IAAI,QAAQ,IAAI,oBAAoB,EAAE,CAMrC;IAED,uEAAuE;IACvE,IAAI,OAAO,IAAI;QAAE,GAAG,EAAE,YAAY,EAAE,CAAC;QAAC,MAAM,EAAE,aAAa,EAAE,CAAA;KAAE,CAQ9D;IAED,wEAAwE;IACxE,IAAI,MAAM,IAAI,oBAAoB,EAAE,CAgBnC;IAED,2CAA2C;IAC3C,IAAI,UAAU,IAAI,OAAO,CAExB;IAED,yDAAyD;IACzD,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO;IAI7B,OAAO,CAAC,KAAK;IAOb,sEAAsE;IACtE,WAAW,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO;IAYxD;;;OAGG;IACH,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO;IAaxE,8BAA8B;IAC9B,IAAI,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO;IAWzB,qCAAqC;IACrC,IAAI,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO;IAIzB,uEAAuE;IACvE,QAAQ,CACN,IAAI,EAAE,SAAS,EACf,KAAK,EAAE;QAAE,OAAO,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,WAAW,GAAG,UAAU,CAAA;KAAE,GAC/D,OAAO;IAQV,gCAAgC;IAChC,KAAK,IAAI,OAAO;CAGjB"}
+{"version":3,"file":"layout-controller.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/layout-controller.svelte.ts"],"names":[],"mappings":"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"}