@happyvertical/smrt-svelte 0.51.39 → 0.53.0

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-state.test.js

@@ -28,6 +28,31 @@ function mountMutationEffect(shell, run) {
     };
 }
 describe('ShellState', () => {
+    it('persists runtime hide/show and restores hidden preferences on hydration', async () => {
+        const write = vi.fn();
+        const shell = createShellState({
+            settingsAdapter: { read: () => null, write },
+        });
+        shell.setPanelState('left', 'hidden');
+        expect(shell.panels.left).toBe('hidden');
+        expect(write).toHaveBeenLastCalledWith(expect.objectContaining({ panels: { left: 'hidden' } }));
+        const restored = createShellState({
+            settingsAdapter: { read: () => shell.snapshot().settings, write },
+        });
+        await restored.hydrate();
+        expect(restored.panels.left).toBe('hidden');
+        restored.setPanelState('left', 'expanded');
+        expect(restored.panels.left).toBe('expanded');
+        restored.setPanelState('left', 'collapsed');
+        expect(restored.panels.left).toBe('collapsed');
+    });
+    it('keeps app-disabled edges hidden and rejects unknown runtime panel states', () => {
+        const shell = createShellState({ config: { right: false } });
+        shell.setPanelState('right', 'expanded');
+        expect(shell.panels.right).toBe('hidden');
+        shell.setPanelState('left', 'unknown');
+        expect(shell.panels.left).toBe('collapsed');
+    });
     it('allows panels to expand independently by default', () => {
         const shell = createShellState();
         shell.expandPanel('top');

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();
+    });
+});