@happyvertical/smrt-svelte 0.51.38 → 0.52.0

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

@@ -35,6 +35,55 @@ describe('TenantNav', () => {
             unmount(component);
         }
     });
+    it('marks items that need attention with a labelled dot', () => {
+        const component = mount(TenantNav, {
+            target: container,
+            props: {
+                currentHref: '/admin/tasks',
+                items: [
+                    { href: '/admin/tasks', label: 'Tasks' },
+                    {
+                        href: '/admin/jobs',
+                        label: 'Jobs',
+                        attention: 'A background job failed recently',
+                    },
+                    { href: '/admin/health', label: 'Health', attention: true },
+                ],
+            },
+        });
+        try {
+            const links = [...container.querySelectorAll('a')];
+            expect(links[0].querySelector('[data-attention]')).toBeNull();
+            expect(links[1].querySelector('[data-attention]')).not.toBeNull();
+            expect(links[1].querySelector('[data-attention]')?.getAttribute('aria-hidden')).toBe('true');
+            expect(links[1].textContent).toContain('(A background job failed recently)');
+            expect(links[2].textContent).toContain('(Needs attention)');
+        }
+        finally {
+            unmount(component);
+        }
+    });
+    it('keeps the attention dot on a collapsed icon link', () => {
+        const component = mount(TenantNav, {
+            target: container,
+            props: {
+                collapsed: true,
+                iconComponent: TestIcon,
+                items: [
+                    { href: '/admin/jobs', icon: 'jobs', label: 'Jobs', attention: true },
+                ],
+            },
+        });
+        try {
+            const link = container.querySelector('a');
+            expect(link?.querySelector('[data-attention]')).not.toBeNull();
+            expect(link?.textContent).toContain('Jobs');
+            expect(link?.textContent).toContain('(Needs attention)');
+        }
+        finally {
+            unmount(component);
+        }
+    });
     it('uses top-level icon links when collapsed', () => {
         const component = mount(TenantNav, {
             target: container,

package/dist/components/workspace/__tests__/admin-shell-header-overflow.test.js

@@ -0,0 +1,25 @@
+/**
+ * The header row hosts actions that open menus (a notifications bell, an
+ * account menu). Its overflow must clip sideways only, or every dropdown
+ * opened from it is cut off at the header's bottom edge.
+ */
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+const packageRoot = process.cwd().endsWith('packages/smrt-svelte')
+    ? process.cwd()
+    : join(process.cwd(), 'packages/smrt-svelte');
+const source = readFileSync(join(packageRoot, 'src/components/workspace/admin-shell/AdminShell.svelte'), 'utf8');
+function ruleBody(selector) {
+    const start = source.indexOf(`${selector} {`);
+    expect(start).toBeGreaterThan(-1);
+    return source.slice(start, source.indexOf('}', start));
+}
+describe('AdminShell header overflow', () => {
+    it('lets header menus drop below the header row', () => {
+        const header = ruleBody('.smrt-admin-shell__header');
+        expect(header).not.toMatch(/(^|\s)overflow:\s*hidden/);
+        expect(header).toMatch(/overflow-x:\s*clip/);
+        expect(header).toMatch(/overflow-y:\s*visible/);
+    });
+});

package/dist/components/workspace/__tests__/admin-shell-mobile.test.js

@@ -0,0 +1,217 @@
+/**
+ * Pure phone-chrome decisions behind AdminShell: hide-on-scroll, keyboard
+ * heuristic, viewport classes, the phone top-bar model, and bottom-bar mode.
+ */
+import { describe, expect, it } from 'vitest';
+import { bottomBarMode, findShellNavTrail, keyboardLikelyOpen, normalizeShellPath, phoneTopBarFor, ScrollChrome, shellPageTrailFor, viewportFor, } from '../admin-shell/mobile-shell.js';
+describe('ScrollChrome (hide on scroll)', () => {
+    function run(chrome, ys, extra = {}) {
+        return ys.map((y) => chrome.update({ y, ...extra }));
+    }
+    it('stays shown near the top of the page', () => {
+        expect(run(new ScrollChrome(), [0, 20, 40, 56])).toEqual([
+            false,
+            false,
+            false,
+            false,
+        ]);
+    });
+    it('hides after scrolling down and comes back on the first scroll up', () => {
+        const chrome = new ScrollChrome();
+        expect(run(chrome, [0, 100, 120, 300])).toEqual([false, true, true, true]);
+        expect(chrome.update({ y: 295 })).toBe(false);
+        expect(run(chrome, [300, 306, 310])).toEqual([false, false, true]);
+    });
+    it('ignores jitter below the thresholds', () => {
+        const chrome = new ScrollChrome();
+        run(chrome, [0, 200, 400]);
+        expect(chrome.update({ y: 398 })).toBe(true);
+    });
+    it('always shows at the top and while pinned', () => {
+        const chrome = new ScrollChrome();
+        run(chrome, [0, 200, 400]);
+        expect(chrome.update({ y: 10 })).toBe(false);
+        run(chrome, [200, 400]);
+        expect(chrome.update({ y: 600, pinned: true })).toBe(false);
+        expect(chrome.update({ y: 800, pinned: true })).toBe(false);
+    });
+    it('does not treat iOS overscroll bounce as a scroll up', () => {
+        const chrome = new ScrollChrome();
+        run(chrome, [0, 300, 500], { maxY: 500 });
+        expect(chrome.update({ y: 540, maxY: 500 })).toBe(true);
+        expect(chrome.update({ y: 500, maxY: 500 })).toBe(true);
+    });
+    it('honours custom tuning and reset', () => {
+        const chrome = new ScrollChrome({ revealWithin: 0, hideAfter: 50 });
+        expect(run(chrome, [10, 40])).toEqual([false, false]);
+        expect(chrome.update({ y: 70 })).toBe(true);
+        chrome.reset();
+        expect(chrome.hidden).toBe(false);
+    });
+});
+describe('viewportFor', () => {
+    it('classifies phone, tablet and desktop', () => {
+        expect(viewportFor({ phone: true, desktop: false })).toBe('phone');
+        expect(viewportFor({ phone: false, desktop: false })).toBe('tablet');
+        expect(viewportFor({ phone: false, desktop: true })).toBe('desktop');
+    });
+});
+describe('keyboardLikelyOpen', () => {
+    it('is open when the visual viewport is much shorter', () => {
+        expect(keyboardLikelyOpen({ layoutHeight: 844, visualHeight: 500 })).toBe(true);
+        expect(keyboardLikelyOpen({ layoutHeight: 844, visualHeight: 780 })).toBe(false);
+    });
+    it('does not mistake pinch zoom for a keyboard', () => {
+        expect(keyboardLikelyOpen({ layoutHeight: 844, visualHeight: 422, scale: 2 })).toBe(false);
+    });
+});
+describe('nav paths', () => {
+    const nav = [
+        { href: '/', label: 'Home' },
+        {
+            href: '/settings',
+            label: 'Settings',
+            children: [{ href: '/settings/health', label: 'Health' }],
+        },
+    ];
+    it('normalizes trailing slashes', () => {
+        expect(normalizeShellPath('/a/b//')).toBe('/a/b');
+        expect(normalizeShellPath('/')).toBe('/');
+    });
+    it('finds the trail to the deepest matching item without the root swallowing everything', () => {
+        expect(findShellNavTrail(nav, '/settings/health/x').map((item) => item.label)).toEqual(['Settings', 'Health']);
+        expect(findShellNavTrail(nav, '/other')).toEqual([]);
+    });
+});
+describe('phoneTopBarFor', () => {
+    const navItems = [
+        { href: '/sites/alpha/articles', label: 'Articles' },
+        {
+            href: '/sites/alpha/settings',
+            label: 'Settings',
+            children: [{ href: '/sites/alpha/settings/health', label: 'Health' }],
+        },
+    ];
+    const base = { homeHref: '/sites/alpha', homeTitle: 'Alpha Times', navItems };
+    it('shows the workspace name on section homes', () => {
+        expect(phoneTopBarFor({ ...base, path: '/sites/alpha' })).toEqual({
+            kind: 'home',
+            title: 'Alpha Times',
+        });
+        expect(phoneTopBarFor({ ...base, path: '/sites/alpha/articles/' }).kind).toBe('home');
+    });
+    it('gives a nested nav page a back arrow to its parent nav item', () => {
+        expect(phoneTopBarFor({ ...base, path: '/sites/alpha/settings/health' })).toEqual({
+            kind: 'detail',
+            title: 'Health',
+            backHref: '/sites/alpha/settings',
+            backLabel: 'Settings',
+        });
+    });
+    it('goes back to the last page-given parent', () => {
+        expect(phoneTopBarFor({
+            ...base,
+            path: '/sites/alpha/articles/a1/video/create',
+            pageTitle: 'Create video',
+            parents: [
+                { label: 'Fair opens Friday', href: '/sites/alpha/articles/a1' },
+                { label: 'Videos', href: '/sites/alpha/articles/a1/videos' },
+            ],
+        })).toEqual({
+            kind: 'detail',
+            title: 'Create video',
+            backHref: '/sites/alpha/articles/a1/videos',
+            backLabel: 'Videos',
+        });
+    });
+    it('shows back to the parent list and the page title on detail pages', () => {
+        expect(phoneTopBarFor({
+            ...base,
+            path: '/sites/alpha/articles/a1/images',
+            pageTitle: 'Fair opens Friday',
+        })).toEqual({
+            kind: 'detail',
+            title: 'Fair opens Friday',
+            backHref: '/sites/alpha/articles',
+            backLabel: 'Articles',
+        });
+    });
+    it('falls back to the parent name, then to home', () => {
+        expect(phoneTopBarFor({ ...base, path: '/sites/alpha/articles/a1' })).toMatchObject({ title: 'Articles', backHref: '/sites/alpha/articles' });
+        expect(phoneTopBarFor({ ...base, path: '/sites/alpha/other/thing' })).toMatchObject({ kind: 'detail', backHref: '/sites/alpha' });
+    });
+    it('uses a page-provided parent and back label', () => {
+        expect(phoneTopBarFor({
+            ...base,
+            path: '/sites/alpha/articles/a1/video/create',
+            pageTitle: 'Create video',
+            backHref: '/sites/alpha/articles/a1/videos',
+            backLabel: 'Videos',
+        })).toEqual({
+            kind: 'detail',
+            title: 'Create video',
+            backHref: '/sites/alpha/articles/a1/videos',
+            backLabel: 'Videos',
+        });
+    });
+});
+describe('shellPageTrailFor', () => {
+    const navItems = [
+        { href: '/sites/alpha/articles', label: 'Content' },
+        {
+            href: '/sites/alpha/settings',
+            label: 'Settings',
+            children: [{ href: '/sites/alpha/health', label: 'Health' }],
+        },
+    ];
+    const base = { homeHref: '/sites/alpha', homeTitle: 'Alpha Times', navItems };
+    const labels = (path, parents) => shellPageTrailFor({ ...base, path, parents }).crumbs.map((c) => c.label);
+    it('has no crumbs on section homes', () => {
+        expect(shellPageTrailFor({ ...base, path: '/sites/alpha' })).toMatchObject({
+            sectionHome: true,
+            crumbs: [],
+        });
+        expect(shellPageTrailFor({ ...base, path: '/sites/alpha/articles/' })).toMatchObject({
+            sectionHome: true,
+            crumbs: [],
+            current: { label: 'Content' },
+        });
+    });
+    it('shows an ancestor once when the page also names it as a parent', () => {
+        expect(labels('/sites/alpha/articles/create', [
+            { label: 'Content', href: '/sites/alpha/articles/' },
+        ])).toEqual(['Alpha Times', 'Content']);
+    });
+    it('lists ancestors only, never the current page', () => {
+        expect(labels('/sites/alpha/articles/a1')).toEqual([
+            'Alpha Times',
+            'Content',
+        ]);
+        // A nested nav page: its parent item is an ancestor even when the URL
+        // is not below it.
+        expect(labels('/sites/alpha/health')).toEqual(['Alpha Times', 'Settings']);
+        expect(labels('/sites/alpha/health/job-1')).toEqual([
+            'Alpha Times',
+            'Settings',
+            'Health',
+        ]);
+        expect(labels('/sites/alpha/other')).toEqual(['Alpha Times']);
+    });
+    it('appends page-given parents after the nav trail', () => {
+        expect(labels('/sites/alpha/articles/a1/videos', [
+            { label: 'Fair opens Friday', href: '/sites/alpha/articles/a1' },
+        ])).toEqual(['Alpha Times', 'Content', 'Fair opens Friday']);
+        // A parent on a section home makes it a child page.
+        expect(labels('/sites/alpha/articles', [
+            { label: 'Somewhere', href: '/sites/alpha/somewhere' },
+        ])).toEqual(['Alpha Times', 'Somewhere']);
+    });
+});
+describe('bottomBarMode', () => {
+    it('swaps the nav bar for a form bar and hides both with the keyboard', () => {
+        expect(bottomBarMode({ formActions: false, keyboardOpen: false })).toBe('nav');
+        expect(bottomBarMode({ formActions: true, keyboardOpen: false })).toBe('form');
+        expect(bottomBarMode({ formActions: true, keyboardOpen: true })).toBe('none');
+        expect(bottomBarMode({ formActions: false, keyboardOpen: true })).toBe('none');
+    });
+});

package/dist/components/workspace/__tests__/admin-shell-page-contracts.test.js

@@ -0,0 +1,30 @@
+/**
+ * AdminShell's page-header contracts on phones. jsdom doesn't apply the
+ * component's scoped styles, so these read the rules themselves: the phone
+ * top bar replaces the page's crumbs and title, and tabs inside a page header
+ * keep sticking under the bar.
+ */
+import { describe, expect, it } from 'vitest';
+import source from '../admin-shell/AdminShell.svelte?raw';
+const css = source.slice(source.indexOf('<style>'));
+function rule(selector) {
+    const start = css.indexOf(selector);
+    expect(start, `missing rule for ${selector}`).toBeGreaterThan(-1);
+    return css.slice(start, css.indexOf('}', start));
+}
+describe('AdminShell page-header contracts', () => {
+    it('hides the breadcrumb row on phones', () => {
+        expect(rule(".smrt-admin-shell[data-viewport='phone'] :global([data-shell-breadcrumbs])")).toContain('display: none');
+    });
+    it('visually hides the page title while the phone top bar shows it', () => {
+        const titleRule = rule('.smrt-admin-shell[data-phone-top] :global([data-shell-page-title])');
+        // Visually hidden, not display:none: screen readers and the document
+        // outline keep the heading.
+        expect(titleRule).toContain('position: absolute');
+        expect(titleRule).toContain('clip-path: inset(50%)');
+        expect(titleRule).not.toContain('display: none');
+    });
+    it("lets a page header's tabs stick under the top bar", () => {
+        expect(rule('.smrt-admin-shell[data-phone-top]\n    :global([data-page-header-extra]:has([data-shell-tabs]))')).toContain('display: contents');
+    });
+});

package/dist/components/workspace/__tests__/admin-shell-responsive-state.test.js

@@ -0,0 +1,184 @@
+/**
+ * ShellState's viewport defaults, resizable-edge sizes, and per-edge
+ * persistence opt-outs.
+ */
+import { describe, expect, it, vi } from 'vitest';
+import { panelPersists, pruneShellSettingsDelta, resolvePanelResize, resolveShellConfig, stripUnpersistedSettings, } from '../admin-shell/settings.js';
+import { createShellState } from '../admin-shell/state.svelte.js';
+function adapter(initial = null) {
+    const writes = [];
+    return {
+        writes,
+        read: vi.fn(() => initial),
+        write: vi.fn((delta) => {
+            writes.push(JSON.parse(JSON.stringify(delta)));
+        }),
+    };
+}
+const navDefaults = {
+    phone: 'collapsed',
+    tablet: 'collapsed',
+    desktop: 'expanded',
+};
+describe('viewport defaults', () => {
+    it('uses the default for the initial viewport', () => {
+        const phone = createShellState({
+            viewport: 'phone',
+            config: { left: { viewportDefaults: navDefaults } },
+        });
+        expect(phone.panels.left).toBe('collapsed');
+        const desktop = createShellState({
+            viewport: 'desktop',
+            config: { left: { viewportDefaults: navDefaults } },
+        });
+        expect(desktop.panels.left).toBe('expanded');
+    });
+    it('applies the new default only when the viewport class changes', () => {
+        const shell = createShellState({
+            viewport: 'desktop',
+            config: { left: { viewportDefaults: navDefaults } },
+        });
+        shell.collapsePanel('left');
+        shell.setViewport('desktop');
+        expect(shell.panels.left).toBe('collapsed');
+        shell.setViewport('tablet');
+        expect(shell.viewport).toBe('tablet');
+        expect(shell.panels.left).toBe('collapsed');
+        shell.expandPanel('left');
+        shell.setViewport('desktop');
+        expect(shell.panels.left).toBe('expanded');
+        // A later settings merge does not resurrect the old class's toggle.
+        shell.applySettings({ activeFocusToolId: 'x' });
+        expect(shell.panels.left).toBe('expanded');
+    });
+    it('never persists the state of an edge that follows the viewport', async () => {
+        const store = adapter({ panels: { left: 'expanded', right: 'expanded' } });
+        const shell = createShellState({
+            viewport: 'phone',
+            config: { left: { viewportDefaults: navDefaults } },
+            settingsAdapter: store,
+        });
+        await shell.hydrate();
+        expect(shell.panels.left).toBe('collapsed');
+        expect(shell.panels.right).toBe('expanded');
+        shell.expandPanel('left');
+        expect(store.writes.at(-1)?.panels).toEqual({ right: 'expanded' });
+    });
+    it('leaves edges without viewport defaults alone (backward compatible)', () => {
+        const shell = createShellState({ viewport: 'desktop' });
+        shell.expandPanel('left');
+        shell.setViewport('phone');
+        expect(shell.panels.left).toBe('expanded');
+        expect(shell.snapshot().viewport).toBe('phone');
+    });
+});
+describe('phone presentation', () => {
+    it('hides a phone-hidden edge only on phones, and Escape skips it there', () => {
+        const shell = createShellState({
+            viewport: 'phone',
+            config: { right: { phone: 'hidden', initial: 'expanded' } },
+        });
+        expect(shell.phonePresentation('right')).toBe('hidden');
+        expect(shell.phonePresentation('left')).toBe('drawer');
+        expect(shell.isEdgeShown('right')).toBe(false);
+        expect(shell.closeTopmostExpanded()).toBe(false);
+        expect(shell.panels.right).toBe('expanded');
+        shell.setViewport('desktop');
+        expect(shell.isEdgeShown('right')).toBe(true);
+        expect(shell.closeTopmostExpanded()).toBe(true);
+        expect(shell.panels.right).toBe('collapsed');
+    });
+});
+describe('resizable edges', () => {
+    it('resolves limits for side edges only', () => {
+        const config = resolveShellConfig({
+            right: { resizable: { min: 300, max: 600 } },
+            left: { resizable: true },
+            top: { resizable: true },
+        });
+        expect(resolvePanelResize('right', config.panels.right)).toEqual({
+            min: 300,
+            max: 600,
+            step: 16,
+        });
+        expect(resolvePanelResize('left', config.panels.left)).toEqual({
+            min: 240,
+            max: 720,
+            step: 16,
+        });
+        expect(resolvePanelResize('top', config.panels.top)).toBeNull();
+        expect(resolvePanelResize('bottom', config.panels.bottom)).toBeNull();
+    });
+    it('clamps, persists, and resets sizes', () => {
+        const store = adapter();
+        const shell = createShellState({
+            config: { right: { resizable: { min: 300, max: 600 } } },
+            settingsAdapter: store,
+        });
+        expect(shell.panelSize('right')).toBeNull();
+        shell.setPanelSize('right', 900);
+        expect(shell.panelSize('right')).toBe(600);
+        expect(store.writes.at(-1)?.sizes).toEqual({ right: 600 });
+        shell.setPanelSize('right', 120.4, { persist: false });
+        expect(shell.panelSize('right')).toBe(300);
+        expect(store.write).toHaveBeenCalledTimes(1);
+        shell.setPanelSize('right', null);
+        expect(shell.panelSize('right')).toBeNull();
+        expect(pruneShellSettingsDelta(shell.settings).sizes).toBeUndefined();
+    });
+    it('ignores sizes for edges that are not resizable', () => {
+        const shell = createShellState({ settings: { sizes: { left: 500 } } });
+        expect(shell.panelSize('left')).toBeNull();
+        shell.setPanelSize('left', 400);
+        expect(shell.settings.sizes).toEqual({ left: 500 });
+        expect(shell.panelSize('left')).toBeNull();
+    });
+    it('keeps a size in memory but not in storage when size persistence is off', () => {
+        const store = adapter({ sizes: { right: 480 } });
+        const shell = createShellState({
+            config: { right: { resizable: true, persist: { size: false } } },
+            settingsAdapter: store,
+        });
+        void shell.hydrate();
+        expect(shell.panelSize('right')).toBeNull();
+        shell.setPanelSize('right', 500);
+        expect(shell.panelSize('right')).toBe(500);
+        expect(store.writes.at(-1)?.sizes).toBeUndefined();
+    });
+});
+describe('persistence opt-out', () => {
+    it('reports what an edge persists', () => {
+        const config = resolveShellConfig({
+            left: { persist: false },
+            right: { persist: { state: false } },
+            bottom: { viewportDefaults: { phone: 'collapsed' } },
+        });
+        expect(panelPersists(config.panels.left, 'state')).toBe(false);
+        expect(panelPersists(config.panels.left, 'size')).toBe(false);
+        expect(panelPersists(config.panels.right, 'state')).toBe(false);
+        expect(panelPersists(config.panels.right, 'size')).toBe(true);
+        expect(panelPersists(config.panels.bottom, 'state')).toBe(false);
+        expect(panelPersists(config.panels.top, 'state')).toBe(true);
+    });
+    it('strips unpersisted panels and sizes on write and on read', async () => {
+        const config = resolveShellConfig({ left: { persist: false } });
+        expect(stripUnpersistedSettings({
+            panels: { left: 'expanded', right: 'collapsed' },
+            sizes: { left: 300 },
+        }, config)).toEqual({ panels: { right: 'collapsed' } });
+        const store = adapter({
+            panels: { left: 'expanded' },
+            hotkeysEnabled: false,
+        });
+        const shell = createShellState({
+            config: { left: { persist: false, initial: 'collapsed' } },
+            settingsAdapter: store,
+        });
+        await shell.hydrate();
+        expect(shell.panels.left).toBe('collapsed');
+        expect(shell.settings.hotkeysEnabled).toBe(false);
+        shell.expandPanel('left');
+        expect(shell.panels.left).toBe('expanded');
+        expect(store.writes.at(-1)?.panels).toBeUndefined();
+    });
+});

package/dist/components/workspace/__tests__/admin-shell-theme-hooks.test.js

@@ -0,0 +1,36 @@
+/**
+ * An app themes the shell through custom properties instead of restyling its
+ * internal classes: the page background, themed thin scrollbars, the shell
+ * title's font family, and a right rail that never pads wider than its track.
+ */
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+const packageRoot = process.cwd().endsWith('packages/smrt-svelte')
+    ? process.cwd()
+    : join(process.cwd(), 'packages/smrt-svelte');
+const shellDir = join(packageRoot, 'src/components/workspace/admin-shell');
+const shell = readFileSync(join(shellDir, 'AdminShell.svelte'), 'utf8');
+const title = readFileSync(join(shellDir, 'ShellTitle.svelte'), 'utf8');
+function ruleBody(source, selector) {
+    const start = source.indexOf(`${selector} {`);
+    expect(start).toBeGreaterThan(-1);
+    return source.slice(start, source.indexOf('\n  }', start));
+}
+describe('AdminShell theme hooks', () => {
+    it('reads its page background from --smrt-admin-shell-background', () => {
+        expect(ruleBody(shell, '.smrt-admin-shell')).toMatch(/background:\s*var\(--smrt-admin-shell-background,\s*var\(--smrt-color-surface\)\)/);
+    });
+    it('themes thin scrollbars from tokens, overridable per app', () => {
+        const root = ruleBody(shell, '.smrt-admin-shell');
+        expect(root).toMatch(/scrollbar-color:[^;]*--smrt-admin-shell-scrollbar-thumb[^;]*--smrt-admin-shell-scrollbar-track/s);
+        expect(ruleBody(shell, '.smrt-admin-shell :global(*)')).toMatch(/scrollbar-width:\s*thin/);
+        expect(shell).toContain('--smrt-admin-shell-scrollbar-thumb-hover');
+    });
+    it('keeps a right rail collapsed to 0 from painting padding', () => {
+        expect(ruleBody(shell, '.smrt-admin-shell__edge--right .smrt-admin-shell__rail')).toMatch(/padding-inline:\s*min\(\s*var\(--smrt-spacing-3\),\s*calc\(var\(--smrt-admin-shell-right-collapsed\) \/ 4\)/);
+    });
+    it('lets an app set the shell title font family', () => {
+        expect(ruleBody(title, '.smrt-shell-title')).toMatch(/font-family:\s*var\(--smrt-shell-title-font-family/);
+    });
+});

package/dist/components/workspace/__tests__/shell-chrome-components.test.js

@@ -0,0 +1,108 @@
+/** ShellNavToggle, ShellTitle, PhoneTopBar and PhoneBottomBar. */
+import { fireEvent, render, screen } from '@testing-library/svelte';
+import { describe, expect, it, vi } from 'vitest';
+import PhoneBottomBar from '../admin-shell/PhoneBottomBar.svelte';
+import PhoneTopBar from '../admin-shell/PhoneTopBar.svelte';
+import ShellNavToggle from '../admin-shell/ShellNavToggle.svelte';
+import TestIcon from './test-icon.svelte';
+describe('ShellNavToggle', () => {
+    it('collapses an open nav and expands a closed one', async () => {
+        const onclick = vi.fn();
+        const { rerender } = render(ShellNavToggle, {
+            props: { expanded: true, onclick, label: 'site navigation' },
+        });
+        const toggle = screen.getByRole('button', {
+            name: 'Collapse site navigation',
+        });
+        expect(toggle).toHaveAttribute('aria-expanded', 'true');
+        expect(toggle).toHaveAttribute('aria-controls', 'smrt-admin-shell-left-panel');
+        await fireEvent.click(toggle);
+        expect(onclick).toHaveBeenCalledTimes(1);
+        await rerender({ expanded: false, onclick });
+        expect(screen.getByRole('button', { name: 'Expand site navigation' })).toHaveAttribute('aria-expanded', 'false');
+    });
+    it('defaults its label', () => {
+        render(ShellNavToggle, { props: { expanded: false, onclick: () => { } } });
+        expect(screen.getByRole('button', { name: 'Expand navigation' })).toBeInTheDocument();
+    });
+});
+describe('PhoneTopBar', () => {
+    it('links the workspace name home on section homes', () => {
+        render(PhoneTopBar, {
+            props: {
+                model: { kind: 'home', title: 'Alpha Times' },
+                homeHref: '/sites/alpha',
+            },
+        });
+        const link = screen.getByRole('link', { name: 'Alpha Times' });
+        expect(link).toHaveAttribute('href', '/sites/alpha');
+    });
+    it('shows a named back link and the page title on detail pages', () => {
+        render(PhoneTopBar, {
+            props: {
+                model: {
+                    kind: 'detail',
+                    title: 'Fair opens Friday',
+                    backHref: '/sites/alpha/articles',
+                    backLabel: 'Articles',
+                },
+                homeHref: '/sites/alpha',
+            },
+        });
+        expect(screen.getByRole('link', { name: 'Back to Articles' })).toHaveAttribute('href', '/sites/alpha/articles');
+        expect(screen.getByTestId('phone-top-bar').textContent).toContain('Fair opens Friday');
+    });
+});
+describe('PhoneBottomBar', () => {
+    it('renders links and buttons with states, badges and dots', async () => {
+        const onMenu = vi.fn();
+        render(PhoneBottomBar, {
+            props: {
+                items: [
+                    {
+                        id: 'menu',
+                        label: 'Menu',
+                        icon: TestIcon,
+                        onclick: onMenu,
+                        expanded: false,
+                        controls: 'nav',
+                    },
+                    {
+                        id: 'home',
+                        label: 'Home',
+                        icon: TestIcon,
+                        href: '/',
+                        active: true,
+                    },
+                    {
+                        id: 'notifications',
+                        label: 'Notifications',
+                        icon: TestIcon,
+                        onclick: () => { },
+                        badge: 12,
+                    },
+                    {
+                        id: 'assistant',
+                        label: 'Assistant',
+                        icon: TestIcon,
+                        onclick: () => { },
+                        dot: true,
+                        dotLabel: 'new reply',
+                    },
+                ],
+            },
+        });
+        expect(screen.getByRole('navigation', { name: 'Main' })).toBeInTheDocument();
+        const menu = screen.getByRole('button', { name: 'Menu' });
+        expect(menu).toHaveAttribute('aria-expanded', 'false');
+        expect(menu).toHaveAttribute('aria-controls', 'nav');
+        await fireEvent.click(menu);
+        expect(onMenu).toHaveBeenCalledTimes(1);
+        expect(screen.getByRole('link', { name: 'Home' })).toHaveAttribute('aria-current', 'page');
+        const notifications = screen.getByRole('button', {
+            name: 'Notifications, 12 unread',
+        });
+        expect(notifications.textContent).toContain('9+');
+        expect(screen.getByRole('button', { name: 'Assistant, new reply' })).toBeInTheDocument();
+    });
+});