@happyvertical/smrt-svelte 0.38.26 → 0.39.0

package/dist/components/settings/__tests__/SettingsCatalog.test.js

@@ -0,0 +1,69 @@
+import { expectNoA11yViolations } from '@happyvertical/smrt-ui/test-support/a11y';
+import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { describe, expect, it } from 'vitest';
+import SettingsCatalog from '../SettingsCatalog.svelte';
+const first = {
+    id: 'first',
+    label: 'First setting',
+    description: 'First description',
+    eyebrow: 'General',
+    status: 'Default',
+    template: 'First template',
+};
+const second = {
+    id: 'second',
+    label: 'Second setting',
+    description: 'Second description',
+    eyebrow: 'Advanced',
+    status: 'Override',
+    template: 'Second template',
+};
+function detailSnippet() {
+    return createRawSnippet((context) => ({
+        render: () => `<h2>${context().item.label} editor</h2><p>${context().item.template}</p>`,
+    }));
+}
+describe('SettingsCatalog', () => {
+    it('renders a compact page, selected detail, and query-preserving links', () => {
+        const { container } = render((SettingsCatalog), {
+            props: {
+                baseUrl: '/settings/prompts',
+                detail: detailSnippet(),
+                preservedParams: { locale: 'fr-CA' },
+                page: {
+                    items: [first, second],
+                    selected: second,
+                    query: 'tenant copy',
+                    page: 2,
+                    pageSize: 2,
+                    total: 6,
+                },
+            },
+        });
+        expect(screen.getByRole('searchbox')).toHaveValue('tenant copy');
+        expect(screen.getByRole('heading', { name: 'Second setting editor' })).toBeInTheDocument();
+        expect(container.querySelector('a[aria-current="true"]')).toHaveAttribute('href', '/settings/prompts?locale=fr-CA&q=tenant+copy&page=2&selected=second');
+        expect(screen.getByRole('link', { name: 'Previous' })).toHaveAttribute('href', '/settings/prompts?locale=fr-CA&q=tenant+copy');
+        expect(screen.getByRole('link', { name: 'Next' })).toHaveAttribute('href', '/settings/prompts?locale=fr-CA&q=tenant+copy&page=3');
+    });
+    it('renders an empty state and remains axe-clean', async () => {
+        const { container } = render((SettingsCatalog), {
+            props: {
+                baseUrl: '/settings/prompts',
+                detail: detailSnippet(),
+                page: {
+                    items: [],
+                    selected: null,
+                    query: 'missing',
+                    page: 1,
+                    pageSize: 50,
+                    total: 0,
+                },
+            },
+        });
+        expect(screen.getByText('No settings match this search.')).toBeInTheDocument();
+        expect(screen.getByText('Select a setting to edit.')).toBeInTheDocument();
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/settings/__tests__/catalog.test.js

@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest';
+import { paginateSettingsCatalog } from '../catalog.js';
+const items = Array.from({ length: 125 }, (_, index) => ({
+    id: `setting-${index + 1}`,
+    label: `Setting ${index + 1}`,
+    description: index % 2 === 0 ? 'Alpha group' : 'Beta group',
+}));
+describe('paginateSettingsCatalog', () => {
+    it('filters before paging and keeps the DOM-sized slice bounded', () => {
+        const page = paginateSettingsCatalog(items, {
+            query: 'alpha',
+            page: 2,
+            pageSize: 20,
+        });
+        expect(page.total).toBe(63);
+        expect(page.items).toHaveLength(20);
+        expect(page.page).toBe(2);
+        expect(page.items.every((item) => item.description === 'Alpha group')).toBe(true);
+    });
+    it('clamps invalid pages and page sizes', () => {
+        const page = paginateSettingsCatalog(items, {
+            page: 999,
+            pageSize: 1_000,
+        });
+        expect(page.pageSize).toBe(100);
+        expect(page.page).toBe(2);
+        expect(page.items).toHaveLength(25);
+    });
+    it('selects an explicit item or falls back to the first visible item', () => {
+        expect(paginateSettingsCatalog(items, { selectedId: 'setting-73' }).selected?.id).toBe('setting-73');
+        expect(paginateSettingsCatalog(items).selected?.id).toBe('setting-1');
+    });
+    it('keeps a very large code-first registry to one bounded result page', () => {
+        const largeRegistry = Array.from({ length: 10_000 }, (_, index) => ({
+            id: `large-${index}`,
+            label: `Large setting ${index}`,
+        }));
+        const page = paginateSettingsCatalog(largeRegistry, {
+            page: 100,
+            pageSize: 50,
+        });
+        expect(page.total).toBe(10_000);
+        expect(page.items).toHaveLength(50);
+        expect(page.items[0]?.id).toBe('large-4950');
+    });
+});

package/dist/components/settings/catalog.d.ts

@@ -0,0 +1,11 @@
+import type { PaginateSettingsCatalogOptions, SettingsCatalogItem, SettingsCatalogPage } from './types.js';
+/**
+ * Search and page an in-memory settings registry before it reaches the DOM.
+ *
+ * Applications backed by a database can construct {@link SettingsCatalogPage}
+ * directly from their server-side query instead. This helper is for code-first
+ * registries that already exist in memory, such as prompt and language
+ * definitions.
+ */
+export declare function paginateSettingsCatalog<T extends SettingsCatalogItem>(source: readonly T[], options?: PaginateSettingsCatalogOptions<T>): SettingsCatalogPage<T>;
+//# sourceMappingURL=catalog.d.ts.map

package/dist/components/settings/catalog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalog.d.ts","sourceRoot":"","sources":["../../../src/components/settings/catalog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,8BAA8B,EAC9B,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AAKpB;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,mBAAmB,EACnE,MAAM,EAAE,SAAS,CAAC,EAAE,EACpB,OAAO,GAAE,8BAA8B,CAAC,CAAC,CAAM,GAC9C,mBAAmB,CAAC,CAAC,CAAC,CA4BxB"}

package/dist/components/settings/catalog.js

@@ -0,0 +1,40 @@
+const DEFAULT_PAGE_SIZE = 50;
+const MAX_PAGE_SIZE = 100;
+/**
+ * Search and page an in-memory settings registry before it reaches the DOM.
+ *
+ * Applications backed by a database can construct {@link SettingsCatalogPage}
+ * directly from their server-side query instead. This helper is for code-first
+ * registries that already exist in memory, such as prompt and language
+ * definitions.
+ */
+export function paginateSettingsCatalog(source, options = {}) {
+    const query = options.query?.trim() ?? '';
+    const needle = query.toLocaleLowerCase();
+    const getSearchText = options.getSearchText ?? defaultSearchText;
+    const filtered = needle
+        ? source.filter((item) => getSearchText(item).toLocaleLowerCase().includes(needle))
+        : [...source];
+    const pageSize = clampInteger(options.pageSize, 1, MAX_PAGE_SIZE, DEFAULT_PAGE_SIZE);
+    const total = filtered.length;
+    const totalPages = Math.max(1, Math.ceil(total / pageSize));
+    const page = clampInteger(options.page, 1, totalPages, 1);
+    const offset = (page - 1) * pageSize;
+    const items = filtered.slice(offset, offset + pageSize);
+    const selected = (options.selectedId
+        ? filtered.find((item) => item.id === options.selectedId)
+        : null) ??
+        items[0] ??
+        null;
+    return { items, selected, query, page, pageSize, total };
+}
+function defaultSearchText(item) {
+    return [item.label, item.description, item.eyebrow, item.status]
+        .filter(Boolean)
+        .join(' ');
+}
+function clampInteger(value, minimum, maximum, fallback) {
+    if (!Number.isFinite(value))
+        return fallback;
+    return Math.min(maximum, Math.max(minimum, Math.trunc(value)));
+}

package/dist/components/settings/index.d.ts

@@ -0,0 +1,4 @@
+export { paginateSettingsCatalog } from './catalog.js';
+export { default as SettingsCatalog } from './SettingsCatalog.svelte';
+export type { PaginateSettingsCatalogOptions, SettingsCatalogItem, SettingsCatalogPage, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/settings/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/settings/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,YAAY,EACV,8BAA8B,EAC9B,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,YAAY,CAAC"}

package/dist/components/settings/index.js

@@ -0,0 +1,2 @@
+export { paginateSettingsCatalog } from './catalog.js';
+export { default as SettingsCatalog } from './SettingsCatalog.svelte';

package/dist/components/settings/types.d.ts

@@ -0,0 +1,25 @@
+export interface SettingsCatalogItem {
+    id: string;
+    label: string;
+    description?: string;
+    eyebrow?: string;
+    status?: string;
+}
+export interface SettingsCatalogPage<T extends SettingsCatalogItem, D extends {
+    id: string;
+} = T> {
+    items: T[];
+    selected: D | null;
+    query: string;
+    page: number;
+    pageSize: number;
+    total: number;
+}
+export interface PaginateSettingsCatalogOptions<T extends SettingsCatalogItem> {
+    query?: string | null;
+    page?: number | null;
+    pageSize?: number | null;
+    selectedId?: string | null;
+    getSearchText?: (item: T) => string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/settings/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/settings/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB,CAClC,CAAC,SAAS,mBAAmB,EAC7B,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,GAAG,CAAC;IAE5B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,8BAA8B,CAAC,CAAC,SAAS,mBAAmB;IAC3E,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;CACrC"}

package/dist/components/settings/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/workspace/README.md

@@ -20,11 +20,21 @@ SvelteKit route APIs; apps pass data, endpoints, and permission-filtered nav in.
 - `AdminShell`
 - `ShellState` / `createShellState`
 - `ShellSettingsPanel`, `HotkeyInput`, `ShortcutsOverlay`
-- `ShellDockTool`, `TenantNav`
+- `ShellCorner`, `ShellDockTool`, `TenantNav`, `WorkspaceAccountMenu`
 - `ActivityBadge`, `ActivityList`, `ActivityItem`, `ActivityToasts`
 - `AppScopePanel`, `SystemStatusChips`, `SystemScopePanel`
 - `tenantNavFromManifest`
 
+Use `AdminShell`'s `tenantFooter` snippet with `WorkspaceAccountMenu` to keep a
+single-line tenant/account control pinned below scrolling tenant navigation.
+Tenant switching and sign-out stay app-owned callbacks, so the workspace core
+remains independent of SvelteKit and `smrt-users` route conventions.
+
+Keep the `appBar` snippet for content in the center header band. Side-aligned
+identity and action content belongs in `topLeftCorner` / `topRightCorner`,
+wrapped in `ShellCorner side="left"` or `ShellCorner side="right"` so it follows
+the corresponding shell track as that edge expands and collapses.
+
 ## Migration
 
 See [MIGRATION.md](./MIGRATION.md) for the first-generation workspace migration

package/dist/components/workspace/__tests__/AdminShell.test.js

@@ -1,12 +1,18 @@
 import { createRawSnippet, flushSync, mount, tick, unmount } from 'svelte';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import AdminShell from '../admin-shell/AdminShell.svelte';
+import adminShellSource from '../admin-shell/AdminShell.svelte?raw';
 import { createShellState } from '../admin-shell/state.svelte.js';
 function textSnippet(text) {
     return createRawSnippet(() => ({
         render: () => `<span>${text}</span>`,
     }));
 }
+function activeToolSnippet() {
+    return createRawSnippet((context) => ({
+        render: () => `<span>${context().tool?.id ?? 'none'} panel</span>`,
+    }));
+}
 let container;
 beforeEach(() => {
     container = document.createElement('div');
@@ -34,6 +40,9 @@ describe('AdminShell', () => {
             unmount(component);
         }
     });
+    it('pins the shell to the viewport so long workspace content scrolls inside main', () => {
+        expect(adminShellSource).toMatch(/\.smrt-admin-shell\s*\{[^}]*\bblock-size:\s*100svh\s*;/);
+    });
     it('toggles a physical-code panel hotkey', async () => {
         const component = mount(AdminShell, {
             target: container,
@@ -53,6 +62,24 @@ describe('AdminShell', () => {
             unmount(component);
         }
     });
+    it('hides hotkey badges when shell hotkeys are disabled', () => {
+        const state = createShellState({
+            settings: { hotkeysEnabled: false },
+        });
+        const component = mount(AdminShell, {
+            target: container,
+            props: {
+                state,
+                children: textSnippet('main work'),
+            },
+        });
+        try {
+            expect(container.querySelector('.smrt-admin-shell__edge-toggle-kbd')).toBeNull();
+        }
+        finally {
+            unmount(component);
+        }
+    });
     it('keeps the focus rail visible when the right panel is expanded', () => {
         const state = createShellState({
             config: {
@@ -82,6 +109,61 @@ describe('AdminShell', () => {
             unmount(component);
         }
     });
+    it('renders the active registered focus tool after switching tools', async () => {
+        const state = createShellState({
+            config: { right: { initial: 'expanded' } },
+        });
+        state.registerFocusTool({
+            id: 'usage',
+            label: 'Usage',
+        });
+        state.registerFocusTool({
+            id: 'tasks',
+            label: 'Tasks',
+        });
+        const component = mount(AdminShell, {
+            target: container,
+            props: {
+                state,
+                children: textSnippet('main work'),
+                focusPanel: activeToolSnippet(),
+            },
+        });
+        try {
+            const panel = container.querySelector('.smrt-admin-shell__panel--right');
+            expect(panel?.textContent).toContain('usage panel');
+            state.openFocusTool('tasks');
+            await tick();
+            expect(panel?.textContent).toContain('tasks panel');
+            expect(panel?.textContent).not.toContain('usage panel');
+        }
+        finally {
+            unmount(component);
+        }
+    });
+    it('pins a tenant footer below the scrolling tenant panel', () => {
+        const state = createShellState({
+            config: { left: { initial: 'expanded' } },
+        });
+        const component = mount(AdminShell, {
+            target: container,
+            props: {
+                state,
+                children: textSnippet('main work'),
+                tenantPanel: textSnippet('tenant navigation'),
+                tenantFooter: textSnippet('account menu'),
+            },
+        });
+        try {
+            expect(container.querySelector('.smrt-admin-shell__tenant-content')
+                ?.textContent).toContain('tenant navigation');
+            expect(container.querySelector('.smrt-admin-shell__tenant-footer')
+                ?.textContent).toContain('account menu');
+        }
+        finally {
+            unmount(component);
+        }
+    });
     it('publishes collapsed side sizes for stable top and bottom chrome', () => {
         const state = createShellState({
             config: {

package/dist/components/workspace/__tests__/WorkspaceAccountMenu.test.js

@@ -0,0 +1,73 @@
+import { expectNoA11yViolations } from '@happyvertical/smrt-ui/test-support/a11y';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import WorkspaceAccountMenu from '../admin-shell/WorkspaceAccountMenu.svelte';
+const tenants = [
+    { id: 'tenant-a', label: 'Acme', roleLabel: 'Owner' },
+    { id: 'tenant-b', label: 'Beta', roleLabel: 'Member' },
+];
+describe('WorkspaceAccountMenu', () => {
+    it('switches tenant and signs out through app-owned callbacks', async () => {
+        const user = userEvent.setup();
+        const onTenantSelect = vi.fn();
+        const onSignOut = vi.fn();
+        render(WorkspaceAccountMenu, {
+            props: {
+                userName: 'Ada Lovelace',
+                userLabel: 'ada@example.com',
+                tenantLabel: 'Acme',
+                roleLabel: 'Owner',
+                currentTenantId: 'tenant-a',
+                tenants,
+                onTenantSelect,
+                onSignOut,
+            },
+        });
+        const trigger = screen.getByRole('button', {
+            name: /Open account menu ada@example.com Acme · Owner/,
+        });
+        await user.click(trigger);
+        expect(screen.getByRole('menuitem', { name: 'Acme — current — Owner' })).toBeDisabled();
+        await user.click(screen.getByRole('menuitem', { name: 'Beta — Member' }));
+        expect(onTenantSelect).toHaveBeenCalledWith('tenant-b');
+        await user.click(trigger);
+        await user.click(screen.getByRole('menuitem', { name: 'Sign out' }));
+        expect(onSignOut).toHaveBeenCalledOnce();
+    });
+    it('keeps tenant switching out of the menu when only one tenant is available', async () => {
+        const user = userEvent.setup();
+        render(WorkspaceAccountMenu, {
+            props: {
+                userName: 'Ada Lovelace',
+                userLabel: 'ada@example.com',
+                tenantLabel: 'Acme',
+                roleLabel: 'Owner',
+                currentTenantId: 'tenant-a',
+                tenants: tenants.slice(0, 1),
+                onTenantSelect: vi.fn(),
+                onSignOut: vi.fn(),
+            },
+        });
+        const trigger = screen.getByRole('button', {
+            name: /Open account menu ada@example.com Acme · Owner/,
+        });
+        await user.click(trigger);
+        expect(screen.queryByRole('menuitem', { name: /Acme/ })).toBeNull();
+        expect(screen.getByRole('menuitem', { name: 'Sign out' })).toBeVisible();
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(WorkspaceAccountMenu, {
+            props: {
+                userName: 'Ada Lovelace',
+                userLabel: 'ada@example.com',
+                tenantLabel: 'Acme',
+                currentTenantId: 'tenant-a',
+                tenants,
+                onTenantSelect: vi.fn(),
+                onSignOut: vi.fn(),
+            },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

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

@@ -62,8 +62,9 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     appPanel?: Snippet;
     tenantRail?: Snippet;
     tenantPanel?: Snippet;
+    tenantFooter?: Snippet;
     focusRail?: Snippet;
-    focusPanel?: Snippet;
+    focusPanel?: Snippet<[{ tool: ShellFocusTool | null }]>;
     systemBar?: Snippet;
     systemPanel?: Snippet;
     topLeftCorner?: Snippet;
@@ -86,6 +87,7 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     appPanel,
     tenantRail,
     tenantPanel,
+    tenantFooter,
     focusRail,
     focusPanel,
     systemBar,
@@ -112,11 +114,13 @@ function buildLayoutStyle(shell: ModuleShellState): string {
   setAdminShell(shell);
 
   let shortcutsOpen = $state(false);
-  const activeFocusTool = $derived(
-    shell.focusTools.find((tool) => tool.id === shell.activeFocusToolId) ??
+  function resolveActiveFocusTool(): ShellFocusTool | null {
+    return (
+      shell.focusTools.find((tool) => tool.id === shell.activeFocusToolId) ??
       shell.focusTools[0] ??
-      null,
-  );
+      null
+    );
+  }
   const shortcutEdges: PanelEdge[] = ['top', 'left', 'bottom', 'right'];
 
   onMount(() => {
@@ -171,6 +175,13 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     );
   }
 
+  function showsHotkeyFor(edge: PanelEdge): boolean {
+    return (
+      shell.settings.hotkeysEnabled !== false &&
+      resolveHotkey(edge, shell.config.panels[edge], shell.settings) !== null
+    );
+  }
+
   // Focus containment for the modal shortcuts dialog. Runs on mount of the
   // dialog node and tears down when it unmounts (Escape / close), restoring
   // focus to whatever opened it. Keeps `aria-modal="true"` honest.
@@ -226,14 +237,16 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     onclick={() => shell.togglePanel(edge)}
   >
     <span>{labelFor(edge)}</span>
-    <kbd class="smrt-admin-shell__edge-toggle-kbd">{hotkeyFor(edge)}</kbd>
+    {#if showsHotkeyFor(edge)}
+      <kbd class="smrt-admin-shell__edge-toggle-kbd">{hotkeyFor(edge)}</kbd>
+    {/if}
     <ActivityBadge {edge} />
   </Button>
 {/snippet}
 
 {#snippet focusContent(tool: ShellFocusTool | null)}
   {#if focusPanel}
-    {@render focusPanel()}
+    {@render focusPanel({ tool })}
   {:else if tool?.render}
     {@render tool.render({ tool })}
   {:else if tool?.component}
@@ -312,13 +325,22 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     >
       <div class="smrt-admin-shell__rail">
         {#if edgeExpanded('left')}
-          {#if tenantPanel}
-            {@render tenantPanel()}
-          {:else if tenantRail}
-            {@render tenantRail()}
-          {:else}
-            {@render edgeToggle('left')}
-          {/if}
+          <div class="smrt-admin-shell__tenant-stack">
+            <div class="smrt-admin-shell__tenant-content">
+              {#if tenantPanel}
+                {@render tenantPanel()}
+              {:else if tenantRail}
+                {@render tenantRail()}
+              {:else}
+                {@render edgeToggle('left')}
+              {/if}
+            </div>
+            {#if tenantFooter}
+              <div class="smrt-admin-shell__tenant-footer">
+                {@render tenantFooter()}
+              </div>
+            {/if}
+          </div>
         {:else if tenantRail}
           {@render tenantRail()}
         {:else}
@@ -349,7 +371,9 @@ function buildLayoutStyle(shell: ModuleShellState): string {
       </div>
       {#if edgeExpanded('right')}
         <div class="smrt-admin-shell__panel smrt-admin-shell__panel--right">
-          {@render focusContent(activeFocusTool)}
+          {#key shell.activeFocusToolId}
+            {@render focusContent(resolveActiveFocusTool())}
+          {/key}
         </div>
       {/if}
     </aside>
@@ -457,6 +481,7 @@ function buildLayoutStyle(shell: ModuleShellState): string {
       var(--smrt-admin-shell-top-track) minmax(0, 1fr)
       var(--smrt-admin-shell-bottom-track);
     min-block-size: 100svh;
+    block-size: 100svh;
     background: var(--smrt-color-surface);
     color: var(--smrt-color-on-surface);
     overflow: hidden;
@@ -561,6 +586,32 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     padding: var(--smrt-spacing-3);
   }
 
+  .smrt-admin-shell__edge--left[data-state='expanded']
+    .smrt-admin-shell__rail {
+    overflow: hidden;
+  }
+
+  .smrt-admin-shell__tenant-stack {
+    display: grid;
+    grid-template-rows: minmax(0, 1fr) auto;
+    gap: var(--smrt-spacing-3);
+    min-width: 0;
+    min-height: 0;
+    block-size: 100%;
+  }
+
+  .smrt-admin-shell__tenant-content {
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  .smrt-admin-shell__tenant-footer {
+    min-width: 0;
+    padding-block-start: var(--smrt-spacing-3);
+    border-block-start: 1px solid var(--smrt-color-outline-variant);
+  }
+
   .smrt-admin-shell__edge--right[data-state='expanded']
     .smrt-admin-shell__rail {
     grid-column: 2;

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

@@ -1,14 +1,17 @@
 import type { Snippet } from 'svelte';
 import { type ShellState } from './state.svelte.js';
-import type { AdminShellProps } from './types.js';
+import type { AdminShellProps, ShellFocusTool } from './types.js';
 interface Props extends AdminShellProps {
     state?: ShellState;
     appBar?: Snippet;
     appPanel?: Snippet;
     tenantRail?: Snippet;
     tenantPanel?: Snippet;
+    tenantFooter?: Snippet;
     focusRail?: Snippet;
-    focusPanel?: Snippet;
+    focusPanel?: Snippet<[{
+        tool: ShellFocusTool | null;
+    }]>;
     systemBar?: Snippet;
     systemPanel?: Snippet;
     topLeftCorner?: Snippet;

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":"AA2CA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAStC,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EACR,eAAe,EAGhB,MAAM,YAAY,CAAC;AAGpB,UAAU,KAAM,SAAQ,eAAe;IACrC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;CACnB;AA0UH,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":"AA2CA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAStC,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EACR,eAAe,EAEf,cAAc,EACf,MAAM,YAAY,CAAC;AAGpB,UAAU,KAAM,SAAQ,eAAe;IACrC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,IAAI,EAAE,cAAc,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC,CAAC;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAiWH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}