@happyvertical/smrt-svelte 0.30.0

package/dist/components/workspace/__tests__/nav-helpers.test.js

@@ -0,0 +1,95 @@
+/**
+ * Tests for NavTree's pure active/expanded helpers.
+ *
+ * The Svelte component itself is a thin renderer over these helpers,
+ * so covering the helpers gives us full behavioral coverage of:
+ *  - 1-/2-/3-level active detection
+ *  - `exact` flag
+ *  - `isActive` override
+ *  - expansion (default + descendant-driven)
+ */
+import { describe, expect, it } from 'vitest';
+import { defaultIsActive, isExpanded, isItemOrChildActive, } from '../nav-helpers.js';
+const home = {
+    href: '/',
+    label: 'Home',
+    exact: true,
+};
+const content = {
+    href: '/content',
+    label: 'Content',
+    children: [
+        { href: '/content/articles', label: 'Articles' },
+        {
+            href: '/content/media',
+            label: 'Media',
+            children: [
+                { href: '/content/media/images', label: 'Images' },
+                { href: '/content/media/videos', label: 'Videos' },
+            ],
+        },
+    ],
+};
+const settings = {
+    href: '/settings',
+    label: 'Settings',
+    defaultExpanded: true,
+    children: [{ href: '/settings/users', label: 'Users' }],
+};
+const _allItems = [home, content, settings];
+describe('defaultIsActive', () => {
+    it('matches exact paths', () => {
+        expect(defaultIsActive({ href: '/content', label: '' }, '/content')).toBe(true);
+    });
+    it('matches descendant paths when not exact', () => {
+        expect(defaultIsActive({ href: '/content', label: '' }, '/content/articles')).toBe(true);
+    });
+    it('respects the exact flag', () => {
+        expect(defaultIsActive({ href: '/', label: '', exact: true }, '/content')).toBe(false);
+        expect(defaultIsActive({ href: '/', label: '', exact: true }, '/')).toBe(true);
+    });
+    it('does not match unrelated paths that share a prefix', () => {
+        // '/foo' should not match '/foobar' — the '/' boundary matters.
+        expect(defaultIsActive({ href: '/foo', label: '' }, '/foobar')).toBe(false);
+    });
+    // Regression for #1231: the descendant-path fallback used to be
+    // `currentPath.startsWith(item.href + '/')`. For `item.href === '/'`,
+    // that expands to `startsWith('//')`, which never matches a real path —
+    // and even if it did, we don't want every nested route to count the
+    // root item as active by ancestry.
+    it('treats a root-href item as exact-only even without the exact flag', () => {
+        const root = { href: '/', label: 'Home' };
+        expect(defaultIsActive(root, '/')).toBe(true);
+        expect(defaultIsActive(root, '/content')).toBe(false);
+        expect(defaultIsActive(root, '/content/articles')).toBe(false);
+    });
+});
+describe('isItemOrChildActive', () => {
+    it('returns true when the item itself is active', () => {
+        expect(isItemOrChildActive(content, '/content')).toBe(true);
+    });
+    it('returns true when a deep descendant is active', () => {
+        expect(isItemOrChildActive(content, '/content/media/images')).toBe(true);
+    });
+    it('returns false when neither item nor descendants are active', () => {
+        expect(isItemOrChildActive(content, '/settings/users')).toBe(false);
+    });
+    it('honors a custom isActive override', () => {
+        const customIsActive = (item, _path) => item.href === '/content/media/videos';
+        expect(isItemOrChildActive(content, '/anything', customIsActive)).toBe(true);
+    });
+});
+describe('isExpanded', () => {
+    it('is false for items without children', () => {
+        expect(isExpanded({ href: '/x', label: '' }, '/x')).toBe(false);
+    });
+    it('is true when defaultExpanded is set, regardless of path', () => {
+        expect(isExpanded(settings, '/unrelated')).toBe(true);
+    });
+    it('is true when a descendant is active', () => {
+        expect(isExpanded(content, '/content/media/images')).toBe(true);
+    });
+    it('is false when no descendant is active and not defaultExpanded', () => {
+        expect(isExpanded(content, '/unrelated')).toBe(false);
+    });
+});

package/dist/components/workspace/__tests__/render-harness.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+/**
+ * Render harness — wires defineToolsDock + <ToolsDock> into a single
+ * component so tests can render the actual DOM. Accepts a thin shape that
+ * lets each test express only the behavior it cares about.
+ */
+import { type Component, onMount } from 'svelte';
+import { defineToolsDock } from '../tools-dock/define-tools-dock.svelte.js';
+import ToolsDock from '../tools-dock/ToolsDock.svelte';
+import type { AvailableTool, ToolsDockContext } from '../types.js';
+
+interface ToolProp {
+  id: string;
+  label: string;
+  badge?: number | string | null;
+  icon?: string;
+  iconComponent?: Component;
+}
+
+interface Props {
+  tools: ToolProp[];
+  fetchAvailability?: (
+    ctx: ToolsDockContext | null,
+  ) => Promise<AvailableTool[]>;
+  initialOpen?: boolean;
+  layout?: 'rail' | 'topbar';
+  /** Activate this tool on mount via dock.open(id). */
+  activateOnMount?: string | null;
+  /** Call dock.setContext(...) on mount. */
+  setContextOnMount?: ToolsDockContext | null;
+  /** Force the dock open after setup (for empty-state assertions). */
+  forceOpen?: boolean;
+  /** Pass-through `context` prop to <ToolsDock>. */
+  context?: ToolsDockContext | null;
+}
+
+const props: Props = $props();
+
+// Use a trivial inline component as the tool body; the renderer only checks
+// that ActiveTool is defined and renders a header — the body is irrelevant
+// for these tests.
+const NoopBody = (() => null) as never;
+
+// This harness intentionally snapshots initial render options during setup.
+// svelte-ignore state_referenced_locally
+const dock = defineToolsDock({
+  tools: props.tools.map((t) => ({ ...t, component: NoopBody })),
+  fetchAvailability: props.fetchAvailability,
+  initialOpen: props.initialOpen,
+  layout: props.layout,
+});
+
+onMount(() => {
+  if (props.setContextOnMount !== undefined) {
+    dock.setContext(props.setContextOnMount);
+  }
+  if (props.activateOnMount) {
+    dock.open(props.activateOnMount);
+  }
+  if (props.forceOpen) {
+    dock.open();
+  }
+});
+</script>
+
+<ToolsDock {dock} context={props.context} />

package/dist/components/workspace/__tests__/render-harness.svelte.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Render harness — wires defineToolsDock + <ToolsDock> into a single
+ * component so tests can render the actual DOM. Accepts a thin shape that
+ * lets each test express only the behavior it cares about.
+ */
+import { type Component } from 'svelte';
+import type { AvailableTool, ToolsDockContext } from '../types.js';
+interface ToolProp {
+    id: string;
+    label: string;
+    badge?: number | string | null;
+    icon?: string;
+    iconComponent?: Component;
+}
+interface Props {
+    tools: ToolProp[];
+    fetchAvailability?: (ctx: ToolsDockContext | null) => Promise<AvailableTool[]>;
+    initialOpen?: boolean;
+    layout?: 'rail' | 'topbar';
+    /** Activate this tool on mount via dock.open(id). */
+    activateOnMount?: string | null;
+    /** Call dock.setContext(...) on mount. */
+    setContextOnMount?: ToolsDockContext | null;
+    /** Force the dock open after setup (for empty-state assertions). */
+    forceOpen?: boolean;
+    /** Pass-through `context` prop to <ToolsDock>. */
+    context?: ToolsDockContext | null;
+}
+declare const RenderHarness: Component<Props, {}, "">;
+type RenderHarness = ReturnType<typeof RenderHarness>;
+export default RenderHarness;
+//# sourceMappingURL=render-harness.svelte.d.ts.map

package/dist/components/workspace/__tests__/render-harness.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-harness.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/__tests__/render-harness.svelte.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,QAAQ,CAAC;AAGjD,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGnE,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED,UAAU,KAAK;IACb,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,iBAAiB,CAAC,EAAE,CAClB,GAAG,EAAE,gBAAgB,GAAG,IAAI,KACzB,OAAO,CAAC,aAAa,EAAE,CAAC,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC3B,qDAAqD;IACrD,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC5C,oEAAoE;IACpE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kDAAkD;IAClD,OAAO,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;CACnC;AA2CD,QAAA,MAAM,aAAa,0BAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/workspace/__tests__/render-tools-dock.test.js

@@ -0,0 +1,243 @@
+/**
+ * Tests for the <ToolsDock> renderer.
+ *
+ * Verifies that rail buttons are rendered for available tools, that clicking
+ * one opens the panel and activates the tool, that the close button closes
+ * the panel, and that the empty state renders when fetchAvailability filters
+ * everything away.
+ */
+import { flushSync, mount, tick, unmount } from 'svelte';
+import { afterEach, describe, expect, it } from 'vitest';
+import ContextForwardingHarness from './context-forwarding-harness.svelte';
+import RenderHarness from './render-harness.svelte';
+import TestIcon from './test-icon.svelte';
+const mountedComponents = [];
+function render(props) {
+    const target = document.createElement('div');
+    document.body.appendChild(target);
+    const component = mount(RenderHarness, { target, props });
+    mountedComponents.push(component);
+    flushSync();
+    return target;
+}
+afterEach(() => {
+    while (mountedComponents.length > 0) {
+        const c = mountedComponents.pop();
+        if (c)
+            unmount(c);
+    }
+    while (document.body.firstChild) {
+        document.body.removeChild(document.body.firstChild);
+    }
+});
+describe('<ToolsDock> rail layout', () => {
+    it('renders a rail button for every available tool', () => {
+        const target = render({
+            tools: [
+                { id: 'chat', label: 'Chat' },
+                { id: 'jobs', label: 'Jobs' },
+            ],
+        });
+        const buttons = target.querySelectorAll('.tools-dock__rail-button');
+        expect(buttons.length).toBe(2);
+        expect(buttons[0].getAttribute('aria-label')).toBe('Chat tool');
+        expect(buttons[1].getAttribute('aria-label')).toBe('Jobs tool');
+    });
+    it('opens the panel and marks the active button with aria-pressed when clicked', () => {
+        const target = render({
+            tools: [
+                { id: 'chat', label: 'Chat' },
+                { id: 'jobs', label: 'Jobs' },
+            ],
+        });
+        const chatBtn = target.querySelectorAll('.tools-dock__rail-button')[0];
+        chatBtn.click();
+        flushSync();
+        expect(chatBtn.classList.contains('active')).toBe(true);
+        // aria-pressed is the right semantics for a toggle button. aria-current
+        // is reserved for navigation sets (breadcrumbs, paginators, etc.) — using
+        // both on the same control conflicts and should not appear here.
+        expect(chatBtn.getAttribute('aria-pressed')).toBe('true');
+        expect(chatBtn.getAttribute('aria-current')).toBeNull();
+        // Panel header reflects the active tool.
+        const heading = target.querySelector('.tools-dock__panel-header h3');
+        expect(heading?.textContent).toBe('Chat');
+    });
+    it('panel exposes role="dialog" and is inert when closed', () => {
+        const target = render({
+            tools: [{ id: 'chat', label: 'Chat' }],
+        });
+        const panel = target.querySelector('.tools-dock__panel');
+        expect(panel?.getAttribute('role')).toBe('dialog');
+        // Closed state: inert is set so tab order skips the off-screen panel.
+        // Svelte 5 sets `inert` via the IDL property; jsdom reflects the property
+        // rather than the HTML attribute, so check both.
+        expect(panel?.inert === true || panel?.hasAttribute('inert')).toBe(true);
+        const chatBtn = target.querySelector('.tools-dock__rail-button');
+        chatBtn?.click();
+        flushSync();
+        // Open: inert is cleared so descendants are focusable.
+        expect(panel?.inert === false && !panel?.hasAttribute('inert')).toBe(true);
+    });
+    it('closes when the close button is clicked', () => {
+        const target = render({
+            tools: [{ id: 'chat', label: 'Chat' }],
+            initialOpen: true,
+            activateOnMount: 'chat',
+        });
+        const aside = target.querySelector('.tools-dock--rail');
+        expect(aside?.classList.contains('tools-dock--open')).toBe(true);
+        const closeBtn = target.querySelector('.tools-dock__close');
+        closeBtn?.click();
+        flushSync();
+        expect(aside?.classList.contains('tools-dock--open')).toBe(false);
+    });
+    it('forwards a late-populated `context` prop into the dock', async () => {
+        const target = document.createElement('div');
+        document.body.appendChild(target);
+        let dock = null;
+        let setContextProp = null;
+        const component = mount(ContextForwardingHarness, {
+            target,
+            props: {
+                onReady: (api) => {
+                    dock = api.dock;
+                    setContextProp = api.setContextProp;
+                },
+            },
+        });
+        mountedComponents.push(component);
+        flushSync();
+        // Initial value is undefined — nothing forwarded yet.
+        expect(dock?.context).toBeNull();
+        // Populate the prop after mount (simulating async route data arrival).
+        setContextProp?.({ type: 'route', title: 'Hello' });
+        flushSync();
+        await tick();
+        expect(dock?.context).toEqual({ type: 'route', title: 'Hello' });
+        // Change the prop again — the effect should run idempotently.
+        setContextProp?.({ type: 'route', title: 'World' });
+        flushSync();
+        await tick();
+        expect(dock?.context).toEqual({ type: 'route', title: 'World' });
+    });
+    describe('rail glyph rendering', () => {
+        it('renders ToolDef.iconComponent inside the rail glyph when provided', () => {
+            const target = render({
+                tools: [{ id: 'chat', label: 'Chat', iconComponent: TestIcon }],
+            });
+            const glyph = target.querySelector('.tools-dock__rail-glyph');
+            expect(glyph).not.toBeNull();
+            // iconComponent rendered → SVG present, first-letter fallback absent.
+            const svg = glyph?.querySelector('svg[data-testid="custom-icon"]');
+            expect(svg).not.toBeNull();
+            // No stray "C" letter text node — only the icon component.
+            expect(glyph?.textContent?.trim()).toBe('');
+        });
+        it('renders ToolDef.icon string when no iconComponent is provided', () => {
+            const target = render({
+                tools: [{ id: 'chat', label: 'Chat', icon: 'X' }],
+            });
+            const glyph = target.querySelector('.tools-dock__rail-glyph');
+            expect(glyph?.textContent?.trim()).toBe('X');
+            // No iconComponent rendered.
+            expect(glyph?.querySelector('svg')).toBeNull();
+        });
+        it('falls back to label.charAt(0).toUpperCase() when neither iconComponent nor icon is set', () => {
+            const target = render({
+                tools: [{ id: 'chat', label: 'chat' }],
+            });
+            const glyph = target.querySelector('.tools-dock__rail-glyph');
+            // First letter, uppercased — existing behaviour preserved.
+            expect(glyph?.textContent?.trim()).toBe('C');
+        });
+        it('iconComponent takes precedence over icon string when both are provided', () => {
+            const target = render({
+                tools: [
+                    { id: 'chat', label: 'Chat', icon: 'X', iconComponent: TestIcon },
+                ],
+            });
+            const glyph = target.querySelector('.tools-dock__rail-glyph');
+            // iconComponent wins; the icon string is not rendered.
+            expect(glyph?.querySelector('svg[data-testid="custom-icon"]')).not.toBeNull();
+            expect(glyph?.textContent?.trim()).toBe('');
+        });
+    });
+    describe('topbar button icon rendering', () => {
+        it('renders ToolDef.iconComponent before the label in topbar layout', () => {
+            const target = render({
+                layout: 'topbar',
+                tools: [{ id: 'chat', label: 'Chat', iconComponent: TestIcon }],
+            });
+            const btn = target.querySelector('.tools-dock__topbar-button');
+            expect(btn).not.toBeNull();
+            const icon = btn?.querySelector('.tools-dock__topbar-button-icon');
+            const label = btn?.querySelector('.tools-dock__topbar-button-label');
+            expect(icon).not.toBeNull();
+            expect(label?.textContent).toBe('Chat');
+            // Icon hosts the test SVG.
+            expect(icon?.querySelector('svg[data-testid="custom-icon"]')).not.toBeNull();
+            // Icon precedes the label in document order so screen-magnifier /
+            // visual layout matches reading order.
+            if (icon && label) {
+                expect(icon.compareDocumentPosition(label) &
+                    Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+            }
+        });
+        it('renders ToolDef.icon string before the label in topbar layout', () => {
+            const target = render({
+                layout: 'topbar',
+                tools: [{ id: 'chat', label: 'Chat', icon: 'X' }],
+            });
+            const btn = target.querySelector('.tools-dock__topbar-button');
+            const icon = btn?.querySelector('.tools-dock__topbar-button-icon');
+            expect(icon?.textContent?.trim()).toBe('X');
+            // No SVG when only the string icon was supplied.
+            expect(icon?.querySelector('svg')).toBeNull();
+        });
+        it('omits the icon span entirely when neither iconComponent nor icon is set', () => {
+            const target = render({
+                layout: 'topbar',
+                tools: [{ id: 'chat', label: 'Chat' }],
+            });
+            const btn = target.querySelector('.tools-dock__topbar-button');
+            const icon = btn?.querySelector('.tools-dock__topbar-button-icon');
+            const label = btn?.querySelector('.tools-dock__topbar-button-label');
+            // Topbar buttons stay label-only when no icon is provided — unlike
+            // the rail, where we fall back to the first letter of the label.
+            expect(icon).toBeNull();
+            expect(label?.textContent).toBe('Chat');
+        });
+        it('iconComponent takes precedence over icon string in topbar layout', () => {
+            const target = render({
+                layout: 'topbar',
+                tools: [
+                    { id: 'chat', label: 'Chat', icon: 'X', iconComponent: TestIcon },
+                ],
+            });
+            const btn = target.querySelector('.tools-dock__topbar-button');
+            const icon = btn?.querySelector('.tools-dock__topbar-button-icon');
+            // SVG wins, the string "X" must not appear.
+            expect(icon?.querySelector('svg[data-testid="custom-icon"]')).not.toBeNull();
+            expect(icon?.textContent?.trim()).toBe('');
+        });
+    });
+    it('renders an empty state when no tools are available', async () => {
+        const target = render({
+            tools: [{ id: 'chat', label: 'Chat' }],
+            // fetchAvailability that returns nothing means no tools surface.
+            fetchAvailability: async () => [],
+            activateOnMount: null,
+            setContextOnMount: { type: 'route' },
+            forceOpen: true,
+        });
+        // Wait for the microtask resolving fetchAvailability.
+        await new Promise((r) => setTimeout(r, 0));
+        flushSync();
+        const buttons = target.querySelectorAll('.tools-dock__rail-button');
+        expect(buttons.length).toBe(0);
+        // When forced open, the panel body renders the empty state.
+        const empty = target.querySelector('.tools-dock__empty');
+        expect(empty?.textContent).toContain('No tools');
+    });
+});

package/dist/components/workspace/__tests__/role-shell-bind-harness.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+/**
+ * Test harness for `bind:mobileNavOpen` on `RoleShell`. Mirrors the
+ * `workspace-shell-bind-harness` pattern — exposes the bindable drawer
+ * state so tests can drive and observe it from outside the component.
+ */
+import { createRawSnippet } from 'svelte';
+import RoleShell from '../RoleShell.svelte';
+import type { RoleConfig } from '../types.js';
+
+interface Props {
+  roles: RoleConfig[];
+  currentRole: string;
+  currentPath?: string;
+  initial?: boolean;
+  onNavigate?: () => void;
+  onReady?: (controls: {
+    setMobileNavOpen: (next: boolean) => void;
+    getMobileNavOpen: () => boolean;
+  }) => void;
+}
+
+const {
+  roles,
+  currentRole,
+  currentPath = '/',
+  initial = false,
+  onNavigate,
+  onReady,
+}: Props = $props();
+
+// This harness intentionally snapshots the initial bindable value.
+// svelte-ignore state_referenced_locally
+let mobileNavOpen = $state(initial);
+
+const content = createRawSnippet(() => ({
+  render: () => '<span>content</span>',
+}));
+
+// This harness intentionally snapshots the callback during setup.
+// svelte-ignore state_referenced_locally
+onReady?.({
+  setMobileNavOpen: (next: boolean) => {
+    mobileNavOpen = next;
+  },
+  getMobileNavOpen: () => mobileNavOpen,
+});
+</script>
+
+<RoleShell
+  {roles}
+  {currentRole}
+  {currentPath}
+  {onNavigate}
+  bind:mobileNavOpen
+>
+  {@render content()}
+</RoleShell>

package/dist/components/workspace/__tests__/role-shell-bind-harness.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { RoleConfig } from '../types.js';
+interface Props {
+    roles: RoleConfig[];
+    currentRole: string;
+    currentPath?: string;
+    initial?: boolean;
+    onNavigate?: () => void;
+    onReady?: (controls: {
+        setMobileNavOpen: (next: boolean) => void;
+        getMobileNavOpen: () => boolean;
+    }) => void;
+}
+declare const RoleShellBindHarness: import("svelte").Component<Props, {}, "">;
+type RoleShellBindHarness = ReturnType<typeof RoleShellBindHarness>;
+export default RoleShellBindHarness;
+//# sourceMappingURL=role-shell-bind-harness.svelte.d.ts.map

package/dist/components/workspace/__tests__/role-shell-bind-harness.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"role-shell-bind-harness.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/__tests__/role-shell-bind-harness.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,UAAU,KAAK;IACb,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE;QACnB,gBAAgB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;QAC1C,gBAAgB,EAAE,MAAM,OAAO,CAAC;KACjC,KAAK,IAAI,CAAC;CACZ;AAyCD,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/components/workspace/__tests__/role-shell-switch-harness.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+/**
+ * Test harness for verifying RoleShell re-renders when `currentRole` changes.
+ *
+ * Exposes a `setCurrentRole` setter via the `onReady` callback so the test
+ * can flip the active role from the outside, then assert the rendered nav
+ * tree + role color update accordingly.
+ */
+import { createRawSnippet } from 'svelte';
+import RoleShell from '../RoleShell.svelte';
+import type { RoleConfig } from '../types.js';
+
+interface Props {
+  roles: RoleConfig[];
+  initialRole: string;
+  currentPath: string;
+  onReady?: (controls: { setCurrentRole: (id: string) => void }) => void;
+}
+
+const { roles, initialRole, currentPath, onReady }: Props = $props();
+
+// This harness intentionally snapshots the initial role.
+// svelte-ignore state_referenced_locally
+let currentRole = $state(initialRole);
+
+const content = createRawSnippet(() => ({
+  render: () => '<span>switch-harness</span>',
+}));
+
+// This harness intentionally snapshots the callback during setup.
+// svelte-ignore state_referenced_locally
+onReady?.({
+  setCurrentRole: (id: string) => {
+    currentRole = id;
+  },
+});
+</script>
+
+<RoleShell {roles} {currentRole} {currentPath}>
+  {@render content()}
+</RoleShell>

package/dist/components/workspace/__tests__/role-shell-switch-harness.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { RoleConfig } from '../types.js';
+interface Props {
+    roles: RoleConfig[];
+    initialRole: string;
+    currentPath: string;
+    onReady?: (controls: {
+        setCurrentRole: (id: string) => void;
+    }) => void;
+}
+declare const RoleShellSwitchHarness: import("svelte").Component<Props, {}, "">;
+type RoleShellSwitchHarness = ReturnType<typeof RoleShellSwitchHarness>;
+export default RoleShellSwitchHarness;
+//# sourceMappingURL=role-shell-switch-harness.svelte.d.ts.map

package/dist/components/workspace/__tests__/role-shell-switch-harness.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"role-shell-switch-harness.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/__tests__/role-shell-switch-harness.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,UAAU,KAAK;IACb,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE;QAAE,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;CACxE;AAiCD,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/components/workspace/__tests__/test-icon.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+/**
+ * Trivial icon component used by render-tools-dock tests to verify that
+ * `ToolDef.iconComponent` is rendered inside `.tools-dock__rail-glyph`
+ * instead of the first-letter fallback.
+ */
+</script>
+
+<svg
+  data-testid="custom-icon"
+  width="18"
+  height="18"
+  viewBox="0 0 24 24"
+  aria-hidden="true"
+>
+  <circle cx="12" cy="12" r="10" />
+</svg>

package/dist/components/workspace/__tests__/test-icon.svelte.d.ts

@@ -0,0 +1,19 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const TestIcon: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TestIcon = InstanceType<typeof TestIcon>;
+export default TestIcon;
+//# sourceMappingURL=test-icon.svelte.d.ts.map

package/dist/components/workspace/__tests__/test-icon.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-icon.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/__tests__/test-icon.svelte.ts"],"names":[],"mappings":"AAiBA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,QAAQ;;kBAA+E,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}

package/dist/components/workspace/__tests__/typed-tool-fixture/TypedTool.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+/**
+ * Fixture for the typed tool-component pattern documented on
+ * `ToolDef.component`. The dock erases tool-specific types at registration,
+ * but the tool component itself locally annotates `context` with the
+ * narrowed `ToolsDockContext<TData, TActions>` shape — see
+ * `register-typed-tool.ts` for the registration site that must accept this
+ * component without a cast.
+ *
+ * If any of the type assertions below fail at `svelte-check` / `tsc` time,
+ * either the `ToolDef.component` erasure relaxation or the
+ * `ToolsDockContext` action-map constraint regressed.
+ */
+import type { ToolsDockApi, ToolsDockContext } from '../../types.js';
+import type { MyActions, MyData } from './typed-tool-types.js';
+
+let {
+  context,
+  dock,
+}: {
+  context: ToolsDockContext<MyData, MyActions> | null;
+  dock: ToolsDockApi;
+} = $props();
+
+// These reads must compile — they exercise the typed `data` / `actions`
+// surface that motivated the U3/U4/U5 work.
+const slug = $derived(context?.data?.siteSlug ?? '');
+const onSave = () => context?.actions?.triggerSave();
+const onReview = () => context?.actions?.triggerReview('manual');
+
+// Dock reference must still be usable.
+const isOpen = $derived(dock.isOpen);
+</script>
+
+<section data-tool="typed-tool" data-slug={slug} data-open={isOpen}>
+  <button type="button" onclick={onSave}>Save</button>
+  <button type="button" onclick={onReview}>Review</button>
+</section>