@happyvertical/smrt-svelte 0.55.1 → 0.55.2

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

@@ -0,0 +1,196 @@
+<script lang="ts">
+import { 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 { M } from '../../../i18n/strings.workspace.js';
+import Sortable from '../../sortable/Sortable.svelte';
+import type {
+  SortableContainer,
+  SortableContainerMove,
+  SortableItem,
+  SortableItemMove,
+} from '../../sortable/types.js';
+import { useShellLayout } from './layout-context.js';
+import type { ShellLayoutController } from './layout-controller.svelte.js';
+import TenantNav from './TenantNav.svelte';
+
+interface Props {
+  /** The layout API to edit; defaults to the nearest `AppShell`'s. */
+  controller?: ShellLayoutController;
+  /** Show a live preview of the resulting navigation (default true). */
+  preview?: boolean;
+  /** Icon renderer for the preview, as for `TenantNav`. */
+  iconComponent?: Component<{ name: string; size?: number }>;
+}
+
+let { controller: provided, preview = true, iconComponent }: Props = $props();
+
+const { t } = useI18n();
+const layout = untrack(() => provided ?? useShellLayout());
+const instanceId = $props.id();
+const headingId = `${instanceId}-heading`;
+
+const sections = $derived(layout.sections);
+const panels = $derived(layout.panels);
+const applied = $derived(layout.applied);
+
+interface NavContainer extends SortableContainer {
+  hidden: boolean;
+  root: boolean;
+}
+
+const containers = $derived<NavContainer[]>(
+  sections.map((section) => ({
+    id: section.id,
+    label: section.heading ?? t(M['ui.shell_layout_editor.top_level']),
+    fixed: section.group === null,
+    root: section.group === null,
+    hidden: section.hidden,
+  })),
+);
+const items = $derived<SortableItem[]>(
+  sections.flatMap((section) =>
+    section.items.map((entry) => ({
+      id: entry.id,
+      containerId: section.id,
+      label: entry.item.label,
+    })),
+  ),
+);
+
+function setShown(id: string, shown: boolean): void {
+  if (shown) layout.show(id);
+  else layout.hide(id);
+}
+
+function onmove(move: SortableItemMove<SortableItem, NavContainer>): void {
+  layout.moveItem(move.item.id, move.target.containerId, move.target.index);
+}
+
+function oncontainermove(move: SortableContainerMove<NavContainer>): void {
+  layout.moveSection(move.container.id, move.target);
+}
+</script>
+
+<section class="smrt-shell-layout-editor" aria-labelledby={headingId}>
+  <header>
+    <div>
+      <h2 id={headingId}>{t(M['ui.shell_layout_editor.heading'])}</h2>
+      <p>{t(M['ui.shell_layout_editor.description'])}</p>
+    </div>
+    <Button
+      variant="secondary"
+      size="sm"
+      disabled={!layout.customized}
+      onclick={() => layout.reset()}
+    >
+      {t(M['ui.shell_layout_editor.reset'])}
+    </Button>
+  </header>
+
+  <fieldset class="smrt-shell-layout-editor__panels">
+    <legend>{t(M['ui.shell_layout_editor.panels'])}</legend>
+    {#each panels as panel (panel.edge)}
+      <div class="smrt-shell-layout-editor__row" data-edge={panel.edge}>
+        {#if panel.available}
+          <Switch
+            interaction={false}
+            checked={panel.visible}
+            label={t(M['ui.shell_layout_editor.show_panel'], { panel: panel.label })}
+            onchange={(event) =>
+              layout.setPanel(panel.edge, { visible: event.currentTarget.checked })}
+          />
+          <Switch
+            interaction={false}
+            checked={panel.initial === 'expanded'}
+            disabled={!panel.visible}
+            label={t(M['ui.shell_layout_editor.start_expanded'], { panel: panel.label })}
+            onchange={(event) =>
+              layout.setPanel(panel.edge, {
+                initial: event.currentTarget.checked ? 'expanded' : 'collapsed',
+              })}
+          />
+        {:else}
+          <span class="smrt-shell-layout-editor__muted">
+            {t(M['ui.shell_layout_editor.panel_unavailable'], { panel: panel.label })}
+          </span>
+        {/if}
+      </div>
+    {/each}
+  </fieldset>
+
+  <div class="smrt-shell-layout-editor__body">
+    <div class="smrt-shell-layout-editor__nav">
+      <h3>{t(M['ui.shell_layout_editor.navigation'])}</h3>
+      <Sortable
+        {containers}
+        {items}
+        label={t(M['ui.shell_layout_editor.sortable_label'])}
+        reorderContainers={true}
+        {onmove}
+        {oncontainermove}
+      >
+        {#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
+              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)}
+            />
+          {/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)}
+          />
+        {/snippet}
+      </Sortable>
+    </div>
+
+    {#if preview}
+      <div class="smrt-shell-layout-editor__preview">
+        <h3>{t(M['ui.shell_layout_editor.preview'])}</h3>
+        <div
+          class="smrt-shell-layout-editor__preview-frame"
+          role="group"
+          aria-label={t(M['ui.shell_layout_editor.preview_label'])}
+          inert
+        >
+          <TenantNav
+            items={applied.nav}
+            groups={applied.groups}
+            {iconComponent}
+            aria-label={t(M['ui.shell_layout_editor.preview_label'])}
+          />
+        </div>
+      </div>
+    {/if}
+  </div>
+</section>
+
+<style>
+  .smrt-shell-layout-editor { display: grid; gap: var(--smrt-spacing-4); min-inline-size: 0; overflow-wrap: anywhere; }
+  .smrt-shell-layout-editor header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--smrt-spacing-3); }
+  .smrt-shell-layout-editor h2, .smrt-shell-layout-editor h3, .smrt-shell-layout-editor p { margin: 0; }
+  .smrt-shell-layout-editor p, .smrt-shell-layout-editor__muted { color: var(--smrt-color-on-surface-variant); }
+  .smrt-shell-layout-editor h3 { font: var(--smrt-typography-title-small-font); margin-block-end: var(--smrt-spacing-2); }
+  .smrt-shell-layout-editor__panels { display: grid; gap: var(--smrt-spacing-2); margin: 0; padding: var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-md); }
+  .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__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)); }
+  @media (max-width: 48rem) {
+    .smrt-shell-layout-editor header { flex-direction: column; }
+    .smrt-shell-layout-editor__body { grid-template-columns: minmax(0, 1fr); }
+  }
+</style>

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

@@ -0,0 +1,17 @@
+import { type Component } from 'svelte';
+import type { ShellLayoutController } from './layout-controller.svelte.js';
+interface Props {
+    /** The layout API to edit; defaults to the nearest `AppShell`'s. */
+    controller?: ShellLayoutController;
+    /** Show a live preview of the resulting navigation (default true). */
+    preview?: boolean;
+    /** Icon renderer for the preview, as for `TenantNav`. */
+    iconComponent?: Component<{
+        name: string;
+        size?: number;
+    }>;
+}
+declare const ShellLayoutEditor: Component<Props, {}, "">;
+type ShellLayoutEditor = ReturnType<typeof ShellLayoutEditor>;
+export default ShellLayoutEditor;
+//# sourceMappingURL=ShellLayoutEditor.svelte.d.ts.map

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

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

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

@@ -4,6 +4,9 @@ import type { Component } from 'svelte';
 import { M } from '../../../i18n/strings.workspace.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. */
   items?: ShellNavItem[];
@@ -39,9 +42,27 @@ function isActive(item: ShellNavItem): boolean {
   return item.href === currentHref || currentHref.startsWith(`${item.href}/`);
 }
 
+/** True when the item, any child, or its action link is the current page. */
+function isItemCurrent(item: ShellNavItem): boolean {
+  return (
+    isActive(item) ||
+    !!item.children?.some((child) => isActive(child)) ||
+    (!!item.action && isActive(item.action))
+  );
+}
+
+function isGroupCurrent(group: ShellNavGroup): boolean {
+  return group.items.some(isItemCurrent);
+}
+
+function showAction(item: ShellNavItem, sectionCurrent: boolean): boolean {
+  if (collapsed || !item.action) return false;
+  return item.action.visibility !== 'active' || sectionCurrent;
+}
+
 function isVisibleActive(item: ShellNavItem): boolean {
   if (isActive(item)) return true;
-  return collapsed && !!item.children?.some((child) => isActive(child));
+  return collapsed && isItemCurrent(item);
 }
 
 /** Accessible label of an item's attention dot, or null when it has none. */
@@ -69,9 +90,13 @@ function fallbackIcon(label: string): string {
   {/if}
 {/snippet}
 
-{#snippet navItems(entries: ShellNavItem[])}
+{#snippet navItems(entries: ShellNavItem[], groupCurrent?: boolean)}
   {#each entries as item (item.href)}
+    {@const action = showAction(item, groupCurrent ?? isItemCurrent(item))
+      ? item.action
+      : undefined}
     <div class="smrt-tenant-nav__section">
+      <div class="smrt-tenant-nav__row">
       <a
         href={item.href}
         class:smrt-tenant-nav__link--visible-active={isVisibleActive(item)}
@@ -105,6 +130,25 @@ function fallbackIcon(label: string): string {
         {/if}
         {@render attention(item)}
       </a>
+      {#if action}
+        <a
+          href={action.href}
+          class="smrt-tenant-nav__action"
+          aria-label={action.label}
+          aria-current={isActive(action) ? 'page' : undefined}
+          title={action.label}
+          onclick={onNavigate}
+        >
+          <span class="smrt-tenant-nav__icon" aria-hidden="true">
+            {#if IconComponent}
+              <IconComponent name={action.icon ?? DEFAULT_ACTION_ICON} size={16} />
+            {:else}
+              {action.icon ?? DEFAULT_ACTION_GLYPH}
+            {/if}
+          </span>
+        </a>
+      {/if}
+      </div>
       {#if item.children?.length && !collapsed}
         <div class="smrt-tenant-nav__children">
           {#each item.children as child (child.href)}
@@ -153,7 +197,7 @@ function fallbackIcon(label: string): string {
           <span>{group.heading}</span>
         {/if}
       </summary>
-      <div class="smrt-tenant-nav__group-items">{@render navItems(group.items)}</div>
+      <div class="smrt-tenant-nav__group-items">{@render navItems(group.items, isGroupCurrent(group))}</div>
     </details>
   {/each}
 </nav>
@@ -167,6 +211,28 @@ function fallbackIcon(label: string): string {
     gap: var(--smrt-spacing-1);
   }
 
+  .smrt-tenant-nav__row {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-1);
+    min-inline-size: 0;
+  }
+  .smrt-tenant-nav__row > a:first-child { flex: 1 1 auto; min-inline-size: 0; }
+  .smrt-tenant-nav a.smrt-tenant-nav__action {
+    flex: 0 0 auto;
+    display: inline-grid;
+    grid-template-columns: minmax(0, 1fr);
+    place-items: center;
+    inline-size: max(2rem, var(--smrt-control-target-min, 0px));
+    block-size: max(2rem, var(--smrt-control-target-min, 0px));
+    padding: 0;
+    color: var(--smrt-color-on-surface-variant);
+  }
+  .smrt-tenant-nav a.smrt-tenant-nav__action:focus-visible {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: 2px;
+  }
+
   .smrt-tenant-nav__heading {
     box-sizing: border-box;
     min-block-size: var(--smrt-control-target-min, 0px);

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

@@ -0,0 +1,37 @@
+import type { ShellDockOpenOptions } from './types.js';
+/**
+ * Programmatic control of the shell dock (the right edge and the focus tools
+ * registered in it with `ShellDockTool`). Tool ids are the `ShellDockTool`
+ * ids. All reads are reactive.
+ */
+export interface ShellDock {
+    /** Id of the tool shown in the open dock, or `null` when it is closed. */
+    readonly active: string | null;
+    /** Ids of the registered dock tools. */
+    readonly tools: readonly string[];
+    /**
+     * Whether the dock can be shown at all: false when the host removed the
+     * right edge or the user's layout hides it (opening then does nothing).
+     */
+    readonly available: boolean;
+    /** Whether `tool` is registered as a dock tool. */
+    has(tool: string): boolean;
+    /** Whether the dock is open on `tool`. */
+    isOpen(tool: string): boolean;
+    /**
+     * Open the dock on `tool` and move focus into it. Returns false (and does
+     * nothing) when no such tool is registered or the dock is not `available`.
+     */
+    open(tool: string, options?: ShellDockOpenOptions): boolean;
+    /** Close the dock; focus returns to where it was opened from. */
+    close(): void;
+    /** Open `tool`, or close the dock when it is already open on `tool`. */
+    toggle(tool: string, options?: ShellDockOpenOptions): boolean;
+}
+/**
+ * Dock control for the surrounding `AdminShell` / `AppShell`. Call it during
+ * component initialisation inside the shell (for example from the `dock`
+ * snippet, a route, or an assistant); it throws outside a shell.
+ */
+export declare function useShellDock(): ShellDock;
+//# sourceMappingURL=dock.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dock.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/dock.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAEvD;;;;GAIG;AACH,MAAM,WAAW,SAAS;IACxB,0EAA0E;IAC1E,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,wCAAwC;IACxC,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,mDAAmD;IACnD,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,0CAA0C;IAC1C,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,oBAAoB,GAAG,OAAO,CAAC;IAC5D,iEAAiE;IACjE,KAAK,IAAI,IAAI,CAAC;IACd,wEAAwE;IACxE,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,oBAAoB,GAAG,OAAO,CAAC;CAC/D;AAED;;;;GAIG;AACH,wBAAgB,YAAY,IAAI,SAAS,CAkBxC"}

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

@@ -0,0 +1,25 @@
+import { useAdminShell } from './context.js';
+/**
+ * Dock control for the surrounding `AdminShell` / `AppShell`. Call it during
+ * component initialisation inside the shell (for example from the `dock`
+ * snippet, a route, or an assistant); it throws outside a shell.
+ */
+export function useShellDock() {
+    const shell = useAdminShell();
+    return {
+        get active() {
+            return shell.openFocusToolId;
+        },
+        get tools() {
+            return shell.focusTools.map((tool) => tool.id);
+        },
+        get available() {
+            return shell.dockAvailable;
+        },
+        has: (tool) => shell.focusTools.some((t) => t.id === tool),
+        isOpen: (tool) => shell.openFocusToolId === tool,
+        open: (tool, options) => shell.openDockTool(tool, options),
+        close: () => shell.closeFocusTool(),
+        toggle: (tool, options) => shell.toggleDockTool(tool, options),
+    };
+}

package/dist/components/workspace/admin-shell/layout-context.d.ts

@@ -0,0 +1,7 @@
+import type { ShellLayoutController } from './layout-controller.svelte.js';
+export declare const SHELL_LAYOUT_CONTEXT: unique symbol;
+export declare function setShellLayout(controller: ShellLayoutController): ShellLayoutController;
+/** The layout API of the nearest `AppShell`; throws when there is none. */
+export declare function useShellLayout(): ShellLayoutController;
+export declare function tryUseShellLayout(): ShellLayoutController | null;
+//# sourceMappingURL=layout-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout-context.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/layout-context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAE3E,eAAO,MAAM,oBAAoB,eAA8B,CAAC;AAEhE,wBAAgB,cAAc,CAC5B,UAAU,EAAE,qBAAqB,GAChC,qBAAqB,CAGvB;AAED,2EAA2E;AAC3E,wBAAgB,cAAc,IAAI,qBAAqB,CAQtD;AAED,wBAAgB,iBAAiB,IAAI,qBAAqB,GAAG,IAAI,CAIhE"}

package/dist/components/workspace/admin-shell/layout-context.js

@@ -0,0 +1,17 @@
+import { getContext, setContext } from 'svelte';
+export const SHELL_LAYOUT_CONTEXT = Symbol('smrt-shell-layout');
+export function setShellLayout(controller) {
+    setContext(SHELL_LAYOUT_CONTEXT, controller);
+    return controller;
+}
+/** The layout API of the nearest `AppShell`; throws when there is none. */
+export function useShellLayout() {
+    const controller = getContext(SHELL_LAYOUT_CONTEXT);
+    if (!controller) {
+        throw new Error('[useShellLayout] No AppShell layout found on context.');
+    }
+    return controller;
+}
+export function tryUseShellLayout() {
+    return (getContext(SHELL_LAYOUT_CONTEXT) ?? null);
+}

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

@@ -0,0 +1,69 @@
+import { type ShellLayout, type ShellNavModelSection } from './layout.js';
+import type { PanelEdge, ShellNavGroup, ShellNavItem, ShellPanelDefaults } from './types.js';
+export interface ShellLayoutControllerOptions {
+    /** The host's flat navigation, before any layout. */
+    nav: () => ShellNavItem[];
+    /** The host's navigation groups, before any layout. */
+    groups: () => ShellNavGroup[];
+    /** The host's panel defaults, before any layout. */
+    panels: () => ShellPanelDefaults | undefined;
+    /** The layout currently in force (host-owned, or stored by the shell). */
+    layout: () => ShellLayout | null | undefined;
+    /** Store the next layout (and notify the host). */
+    commit: (layout: ShellLayout) => void;
+}
+/** One edge panel as an editor presents it. */
+export interface ShellLayoutPanelView {
+    edge: PanelEdge;
+    label: string;
+    /** `false` when the host removed the panel; a layout cannot restore it. */
+    available: boolean;
+    visible: boolean;
+    initial: 'collapsed' | 'expanded';
+}
+/**
+ * The layout API: the same changes the `ShellLayoutEditor` makes, as plain
+ * calls an assistant (or any host code) can make. Obtain it with
+ * `useShellLayout()` under an `AppShell`. Every mutation returns `true` when
+ * it changed the layout and `false` when it was a no-op (unknown id, already
+ * in that state), so a caller can report accurately.
+ */
+export declare class ShellLayoutController {
+    private readonly options;
+    constructor(options: ShellLayoutControllerOptions);
+    /** The layout in force, normalized. */
+    get layout(): ShellLayout;
+    /** Every section and item in display order, hidden ones flagged. */
+    get sections(): ShellNavModelSection[];
+    /** The navigation as the shell renders it (hidden entries removed). */
+    get applied(): {
+        nav: ShellNavItem[];
+        groups: ShellNavGroup[];
+    };
+    /** Each edge panel with its effective visibility and starting state. */
+    get panels(): ShellLayoutPanelView[];
+    /** Whether a customization is in force. */
+    get customized(): boolean;
+    /** Whether a section or item is hidden by the layout. */
+    isHidden(id: string): boolean;
+    private apply;
+    /** Move a group section to `toIndex` among the groups (0 = first). */
+    moveSection(sectionId: string, toIndex: number): boolean;
+    /**
+     * Move an item into a section (a group id, or `@root` for the top level) at
+     * `toIndex` (default: the end).
+     */
+    moveItem(itemId: string, toSectionId: string, toIndex?: number): boolean;
+    /** Hide a section or item. */
+    hide(id: string): boolean;
+    /** Show a hidden section or item. */
+    show(id: string): boolean;
+    /** Show or hide an edge panel and/or choose the state it starts in. */
+    setPanel(edge: PanelEdge, patch: {
+        visible?: boolean;
+        initial?: 'collapsed' | 'expanded';
+    }): boolean;
+    /** Drop every customization. */
+    reset(): boolean;
+}
+//# sourceMappingURL=layout-controller.svelte.d.ts.map

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

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

package/dist/components/workspace/admin-shell/layout-controller.svelte.js

@@ -0,0 +1,91 @@
+import { applyShellLayout, hideShellEntry, isShellLayoutEmpty, moveShellItem, moveShellSection, normalizeShellLayout, resolveShellNavModel, SHELL_LAYOUT_VERSION, setShellLayoutPanel, showShellEntry, } from './layout.js';
+import { resolveShellConfig } from './settings.js';
+import { PANEL_EDGES } from './types.js';
+/**
+ * The layout API: the same changes the `ShellLayoutEditor` makes, as plain
+ * calls an assistant (or any host code) can make. Obtain it with
+ * `useShellLayout()` under an `AppShell`. Every mutation returns `true` when
+ * it changed the layout and `false` when it was a no-op (unknown id, already
+ * in that state), so a caller can report accurately.
+ */
+export class ShellLayoutController {
+    options;
+    constructor(options) {
+        this.options = options;
+    }
+    /** The layout in force, normalized. */
+    get layout() {
+        return normalizeShellLayout(this.options.layout() ?? { version: SHELL_LAYOUT_VERSION });
+    }
+    /** Every section and item in display order, hidden ones flagged. */
+    get sections() {
+        return resolveShellNavModel(this.options.nav(), this.options.groups(), this.layout);
+    }
+    /** The navigation as the shell renders it (hidden entries removed). */
+    get applied() {
+        const { nav, groups } = applyShellLayout(this.options.nav(), this.options.groups(), this.options.panels(), this.layout);
+        return { nav, groups };
+    }
+    /** Each edge panel with its effective visibility and starting state. */
+    get panels() {
+        const defaults = resolveShellConfig(this.options.panels()).panels;
+        const layout = this.layout;
+        return PANEL_EDGES.map((edge) => {
+            const config = defaults[edge];
+            const override = layout.panels?.[edge];
+            return {
+                edge,
+                label: config.label,
+                available: config.initial !== 'hidden',
+                visible: config.initial !== 'hidden' && override?.visible !== false,
+                initial: override?.initial ??
+                    (config.initial === 'expanded' ? 'expanded' : 'collapsed'),
+            };
+        });
+    }
+    /** Whether a customization is in force. */
+    get customized() {
+        return !isShellLayoutEmpty(this.layout);
+    }
+    /** Whether a section or item is hidden by the layout. */
+    isHidden(id) {
+        return this.layout.hidden?.includes(id) ?? false;
+    }
+    apply(next) {
+        const current = this.layout;
+        if (JSON.stringify(next) === JSON.stringify(current))
+            return false;
+        this.options.commit(next);
+        return true;
+    }
+    /** Move a group section to `toIndex` among the groups (0 = first). */
+    moveSection(sectionId, toIndex) {
+        return this.apply(moveShellSection(this.options.nav(), this.options.groups(), this.layout, sectionId, toIndex));
+    }
+    /**
+     * Move an item into a section (a group id, or `@root` for the top level) at
+     * `toIndex` (default: the end).
+     */
+    moveItem(itemId, toSectionId, toIndex) {
+        return this.apply(moveShellItem(this.options.nav(), this.options.groups(), this.layout, itemId, toSectionId, toIndex));
+    }
+    /** Hide a section or item. */
+    hide(id) {
+        return this.apply(hideShellEntry(this.options.nav(), this.options.groups(), this.layout, id));
+    }
+    /** Show a hidden section or item. */
+    show(id) {
+        return this.apply(showShellEntry(this.layout, id));
+    }
+    /** Show or hide an edge panel and/or choose the state it starts in. */
+    setPanel(edge, patch) {
+        const view = this.panels.find((panel) => panel.edge === edge);
+        if (!view?.available)
+            return false;
+        return this.apply(setShellLayoutPanel(this.layout, edge, patch, this.options.panels()));
+    }
+    /** Drop every customization. */
+    reset() {
+        return this.apply({ version: SHELL_LAYOUT_VERSION });
+    }
+}