@happyvertical/smrt-ui 0.51.39 → 0.53.0

package/dist/components/data/__tests__/SortableHeader.test.js

@@ -0,0 +1,101 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { fireEvent, render, screen } from '@testing-library/svelte';
+import { describe, expect, it, vi } from 'vitest';
+import ListSortSelect from '../ListSortSelect.svelte';
+import SortableHeader from '../SortableHeader.svelte';
+const spec = {
+    columns: [{ id: 'published', firstDirection: 'desc' }, 'title'],
+    default: { columnId: 'published', direction: 'desc' },
+};
+describe('SortableHeader', () => {
+    it('marks the sorted column with aria-sort and an arrow, and labels the next action', () => {
+        render(SortableHeader, {
+            props: {
+                columnId: 'published',
+                label: 'Published',
+                sort: spec.default,
+                spec,
+                as: 'div',
+            },
+        });
+        const header = screen.getByRole('columnheader');
+        expect(header.getAttribute('aria-sort')).toBe('descending');
+        expect(header.textContent).toContain('↓');
+        expect(screen.getByRole('button', { name: 'Sort by Published, ascending' })).toBeTruthy();
+    });
+    it('calls onSort from a button (keyboard-activatable) for client lists', async () => {
+        const onSort = vi.fn();
+        render(SortableHeader, {
+            props: {
+                columnId: 'title',
+                label: 'Title',
+                sort: spec.default,
+                spec,
+                onSort,
+                as: 'div',
+            },
+        });
+        const header = screen.getByRole('columnheader');
+        expect(header.getAttribute('aria-sort')).toBe('none');
+        const button = screen.getByRole('button', {
+            name: 'Sort by Title, ascending',
+        });
+        await fireEvent.click(button);
+        expect(onSort).toHaveBeenCalledWith('title');
+    });
+    it('renders a link for server-sorted lists', () => {
+        render(SortableHeader, {
+            props: {
+                columnId: 'title',
+                label: 'Title',
+                sort: { columnId: 'title', direction: 'asc' },
+                spec,
+                href: '/list?sort=title&dir=desc',
+                as: 'div',
+            },
+        });
+        const link = screen.getByRole('link', {
+            name: 'Sort by Title, descending',
+        });
+        expect(link.getAttribute('href')).toBe('/list?sort=title&dir=desc');
+        expect(screen.getByRole('columnheader').getAttribute('aria-sort')).toBe('ascending');
+    });
+});
+describe('ListSortSelect', () => {
+    it('offers plain-language orders and reports the chosen sort', async () => {
+        const onChange = vi.fn();
+        render(ListSortSelect, {
+            props: {
+                columns: [
+                    { id: 'published', label: 'Published', kind: 'date' },
+                    { id: 'title', label: 'Title' },
+                ],
+                sort: spec.default,
+                onChange,
+            },
+        });
+        const select = screen.getByLabelText('Sort by');
+        expect([...select.options].map((option) => option.textContent)).toEqual([
+            'Published, newest first',
+            'Published, oldest first',
+            'Title, A–Z',
+            'Title, Z–A',
+        ]);
+        expect(select.value).toBe('published:desc');
+        await fireEvent.change(select, { target: { value: 'title:asc' } });
+        expect(onChange).toHaveBeenCalledWith({
+            columnId: 'title',
+            direction: 'asc',
+        });
+    });
+});
+describe('SortableHeader style hooks', () => {
+    it('reads its control weight from --sortable-header-font-weight (default 600)', () => {
+        const source = readFileSync(join(process.cwd().endsWith('packages/smrt-ui')
+            ? process.cwd()
+            : join(process.cwd(), 'packages/smrt-ui'), 'src/components/data/SortableHeader.svelte'), 'utf8');
+        expect(source).toMatch(/font-weight:\s*var\(--sortable-header-font-weight,\s*600\)/);
+        expect(source).toMatch(/padding:\s*var\(--sortable-header-padding,/);
+    });
+});

package/dist/components/data/__tests__/link-step-surface.test.js

@@ -0,0 +1,172 @@
+import { describe, expect, it, vi } from 'vitest';
+import { createDataSurfaceRegistry } from '../data-surface.js';
+import { registerLinkSurface, resolveLinkTarget } from '../link-surface.js';
+import { registerStepSurface } from '../step-surface.js';
+const links = [
+    { id: 'events', label: 'Events', href: '/s/events', group: 'Content' },
+    { id: 'articles', label: 'Articles', href: '/s/articles', group: 'Content' },
+    { id: 'ads', label: 'Advertising', href: '/s/ads' },
+];
+let sequence = 0;
+function command(surfaceId, kind, controlId, expectedRevision, payload) {
+    sequence += 1;
+    return {
+        version: 1,
+        commandId: `c${sequence}`,
+        identity: { surfaceId, kind },
+        expectedRevision,
+        controlId,
+        ...(payload === undefined ? {} : { payload: payload }),
+    };
+}
+describe('link surface', () => {
+    it('resolves by id, label, and unique prefix; refuses ambiguity', () => {
+        expect(resolveLinkTarget('events', links)).toBe('/s/events');
+        expect(resolveLinkTarget({ target: 'ARTICLES' }, links)).toBe('/s/articles');
+        expect(resolveLinkTarget({ page: 'adv' }, links)).toBe('/s/ads');
+        expect(resolveLinkTarget('a', links)).toBeNull();
+        expect(resolveLinkTarget({ nope: 1 }, links)).toBeNull();
+    });
+    it('publishes links without hrefs and navigates through the open control', async () => {
+        const registry = createDataSurfaceRegistry();
+        const navigate = vi.fn();
+        const handle = registerLinkSurface({
+            registry,
+            surfaceId: 'site-sections',
+            label: 'Site sections',
+            description: 'Pages in this site',
+            links,
+            navigate,
+        });
+        const snapshot = registry.inspect({
+            surfaceId: 'site-sections',
+            kind: 'list',
+        });
+        expect(JSON.stringify(snapshot?.state)).not.toContain('/s/');
+        expect(snapshot?.state.links).toEqual([
+            { id: 'events', label: 'Events', group: 'Content' },
+            { id: 'articles', label: 'Articles', group: 'Content' },
+            { id: 'ads', label: 'Advertising' },
+        ]);
+        const ok = await registry.execute(command('site-sections', 'list', 'open', snapshot?.revision ?? 0, {
+            target: 'Events',
+        }));
+        expect(ok.ok).toBe(true);
+        expect(navigate).toHaveBeenCalledWith('/s/events');
+        const refused = await registry.execute(command('site-sections', 'list', 'open', snapshot?.revision ?? 0, {
+            target: 'https://evil.example',
+        }));
+        expect(refused.ok).toBe(false);
+        handle.update({ state: { active: 'events' } });
+        expect(registry.inspect({ surfaceId: 'site-sections', kind: 'list' })?.revision).toBe((snapshot?.revision ?? 0) + 1);
+        handle.destroy();
+        expect(registry.list()).toHaveLength(0);
+    });
+});
+describe('step surface', () => {
+    const steps = [
+        { id: 'town', label: 'Your town' },
+        { id: 'features', label: 'Features' },
+        { id: 'live', label: 'Go live' },
+    ];
+    const identity = { surfaceId: 'new-site-steps', kind: 'custom' };
+    it('advances a non-writing step through the page handler', async () => {
+        const registry = createDataSurfaceRegistry();
+        const next = vi.fn(() => true);
+        const handle = registerStepSurface({
+            registry,
+            surfaceId: 'new-site-steps',
+            label: 'New site steps',
+            description: 'Start a new town site',
+            steps,
+            current: 'town',
+            next,
+        });
+        const before = registry.inspect(identity);
+        expect(before?.state).toMatchObject({
+            current: 'town',
+            currentLabel: 'Your town',
+            stepNumber: 1,
+            stepCount: 3,
+            nextWrites: false,
+            awaitingPerson: false,
+        });
+        const result = await registry.execute(command('new-site-steps', 'custom', 'next', before?.revision ?? 0));
+        expect(result.ok).toBe(true);
+        expect(next).toHaveBeenCalledTimes(1);
+        handle.update({
+            current: 'features',
+            steps: [{ ...steps[0], complete: true }, steps[1], steps[2]],
+        });
+        const after = registry.inspect(identity);
+        expect(after?.state.current).toBe('features');
+        expect(after?.state.steps).toEqual([
+            { id: 'town', label: 'Your town', status: 'complete' },
+            { id: 'features', label: 'Features', status: 'current' },
+            { id: 'live', label: 'Go live', status: 'upcoming' },
+        ]);
+    });
+    it('refuses when the page handler rejects the step (validation failed)', async () => {
+        const registry = createDataSurfaceRegistry();
+        registerStepSurface({
+            registry,
+            surfaceId: 'new-site-steps',
+            label: 'New site steps',
+            description: 'Start a new town site',
+            steps,
+            current: 'town',
+            next: () => false,
+        });
+        const result = await registry.execute(command('new-site-steps', 'custom', 'next', 1));
+        expect(result.ok).toBe(false);
+    });
+    it('never presses a writing step: it shows the button and waits for the person', async () => {
+        const registry = createDataSurfaceRegistry();
+        const create = vi.fn();
+        const showNext = vi.fn();
+        const handle = registerStepSurface({
+            registry,
+            surfaceId: 'new-site-steps',
+            label: 'New site steps',
+            description: 'Start a new town site',
+            steps,
+            current: 'features',
+            next: create,
+            nextWrites: true,
+            showNext,
+        });
+        const result = await registry.execute(command('new-site-steps', 'custom', 'next', 1));
+        expect(result.ok).toBe(true);
+        expect(create).not.toHaveBeenCalled();
+        expect(showNext).toHaveBeenCalledTimes(1);
+        expect(registry.inspect(identity)?.state).toMatchObject({
+            nextWrites: true,
+            awaitingPerson: true,
+        });
+        handle.update({ current: 'live', nextWrites: false });
+        expect(registry.inspect(identity)?.state.awaitingPerson).toBe(false);
+    });
+    it('goes back and jumps only to available steps', async () => {
+        const registry = createDataSurfaceRegistry();
+        const back = vi.fn();
+        const goTo = vi.fn();
+        registerStepSurface({
+            registry,
+            surfaceId: 'new-site-steps',
+            label: 'New site steps',
+            description: 'Start a new town site',
+            steps: [{ ...steps[0], complete: true }, steps[1], steps[2]],
+            current: 'features',
+            back,
+            goTo,
+        });
+        expect((await registry.execute(command('new-site-steps', 'custom', 'back', 1)))
+            .ok).toBe(true);
+        expect(back).toHaveBeenCalled();
+        expect((await registry.execute(command('new-site-steps', 'custom', 'go-to', 1, {
+            target: 'Go live',
+        }))).ok).toBe(false);
+        expect((await registry.execute(command('new-site-steps', 'custom', 'go-to', 1, 'your town'))).ok).toBe(true);
+        expect(goTo).toHaveBeenCalledWith('town');
+    });
+});

package/dist/components/data/__tests__/list-sort-state.svelte.test.js

@@ -0,0 +1,71 @@
+import { fireEvent, render, screen } from '@testing-library/svelte';
+import { describe, expect, it, vi } from 'vitest';
+import ListSortSelect from '../ListSortSelect.svelte';
+import { createLocalListSort, createUrlListSort, } from '../list-sort-state.svelte.js';
+import SortableHeader from '../SortableHeader.svelte';
+const spec = {
+    columns: [{ id: 'published', firstDirection: 'desc' }, 'title'],
+    default: { columnId: 'published', direction: 'desc' },
+};
+describe('list sort state', () => {
+    it('local: starts at the default and toggles', () => {
+        const list = createLocalListSort(spec);
+        expect(list.sort).toEqual(spec.default);
+        list.toggle('title');
+        expect(list.sort).toEqual({ columnId: 'title', direction: 'asc' });
+        list.toggle('title');
+        expect(list.sort).toEqual({ columnId: 'title', direction: 'desc' });
+        expect(list.href('title')).toBeUndefined();
+    });
+    it('url: reads the URL, links headers, and navigates on set', async () => {
+        let url = new URL('https://x.test/list?sort=title&dir=asc&page=3');
+        const navigate = vi.fn((href) => {
+            url = new URL(href, url);
+        });
+        const list = createUrlListSort(spec, { url: () => url, navigate });
+        expect(list.sort).toEqual({ columnId: 'title', direction: 'asc' });
+        expect(list.href('title')).toBe('/list?sort=title&dir=desc');
+        expect(list.href('published')).toBe('/list');
+        await list.set({ columnId: 'published', direction: 'asc' });
+        expect(navigate).toHaveBeenCalledWith('/list?sort=published&dir=asc');
+    });
+    it('ignores an undeclared column or unknown direction on set', async () => {
+        const local = createLocalListSort(spec);
+        local.set({ columnId: 'secret_score', direction: 'asc' });
+        expect(local.sort).toEqual(spec.default);
+        local.set({ columnId: 'title', direction: 'sideways' });
+        expect(local.sort).toEqual(spec.default);
+        local.set({ columnId: 'title', direction: 'asc' });
+        expect(local.sort).toEqual({ columnId: 'title', direction: 'asc' });
+        // An invalid initial sort starts at the default.
+        expect(createLocalListSort(spec, { columnId: 'nope', direction: 'asc' }).sort).toEqual(spec.default);
+        const navigate = vi.fn();
+        const url = new URL('https://x.test/list');
+        const remote = createUrlListSort(spec, { url: () => url, navigate });
+        await remote.set({ columnId: 'secret_score', direction: 'desc' });
+        await remote.set(null);
+        expect(navigate).not.toHaveBeenCalled();
+    });
+    it('drives SortableHeader and ListSortSelect through `list`', async () => {
+        const list = createLocalListSort(spec);
+        render(SortableHeader, {
+            props: { list, columnId: 'title', label: 'Title', as: 'div' },
+        });
+        const header = screen.getByRole('columnheader');
+        expect(header.getAttribute('aria-sort')).toBe('none');
+        await fireEvent.click(screen.getByRole('button', { name: 'Sort by Title, ascending' }));
+        expect(list.sort).toEqual({ columnId: 'title', direction: 'asc' });
+        render(ListSortSelect, {
+            props: {
+                list,
+                columns: [
+                    { id: 'published', label: 'Published', kind: 'date' },
+                    { id: 'title', label: 'Title' },
+                ],
+            },
+        });
+        const select = screen.getByLabelText('Sort by');
+        await fireEvent.change(select, { target: { value: 'published:desc' } });
+        expect(list.sort).toEqual(spec.default);
+    });
+});

package/dist/components/data/__tests__/list-sort.test.js

@@ -0,0 +1,91 @@
+import { describe, expect, it } from 'vitest';
+import { compareListValues, isValidListSort, listSortAria, listSortHref, listSortOrderBy, listSortSearchParams, parseListSort, sortListRows, toggleListSort, } from '../list-sort.js';
+const spec = {
+    columns: [
+        { id: 'published', firstDirection: 'desc' },
+        'title',
+        { id: 'views', firstDirection: 'desc' },
+    ],
+    default: { columnId: 'published', direction: 'desc' },
+};
+describe('list sort', () => {
+    it('parses the URL, falling back to the default for unknown values', () => {
+        expect(parseListSort(new URLSearchParams(''), spec)).toEqual(spec.default);
+        expect(parseListSort(new URLSearchParams('sort=title&dir=desc'), spec)).toEqual({
+            columnId: 'title',
+            direction: 'desc',
+        });
+        expect(parseListSort(new URLSearchParams('sort=title'), spec)).toEqual({
+            columnId: 'title',
+            direction: 'asc',
+        });
+        expect(parseListSort(new URLSearchParams('sort=views'), spec)).toEqual({
+            columnId: 'views',
+            direction: 'desc',
+        });
+        expect(parseListSort(new URLSearchParams('sort=password&dir=asc'), spec)).toEqual(spec.default);
+        expect(parseListSort(new URLSearchParams('dir=asc'), spec)).toEqual({
+            columnId: 'published',
+            direction: 'asc',
+        });
+        expect(parseListSort(new URLSearchParams('sort=title&dir=sideways'), spec)).toEqual({
+            columnId: 'title',
+            direction: 'asc',
+        });
+    });
+    it('toggles asc/desc and starts a new column at its first direction', () => {
+        const start = spec.default;
+        expect(toggleListSort(start, 'published', spec)).toEqual({
+            columnId: 'published',
+            direction: 'asc',
+        });
+        expect(toggleListSort({ columnId: 'published', direction: 'asc' }, 'published', spec)).toEqual(start);
+        expect(toggleListSort(start, 'title', spec)).toEqual({
+            columnId: 'title',
+            direction: 'asc',
+        });
+        expect(toggleListSort(start, 'views', spec)).toEqual({
+            columnId: 'views',
+            direction: 'desc',
+        });
+        expect(toggleListSort(start, 'nope', spec)).toBe(start);
+        expect(isValidListSort(spec, { columnId: 'nope', direction: 'asc' })).toBe(false);
+    });
+    it('writes the sort to the URL, omits the default, and resets the page', () => {
+        const params = listSortSearchParams('status=draft&page=3', { columnId: 'title', direction: 'asc' }, spec);
+        expect(params.toString()).toBe('status=draft&sort=title&dir=asc');
+        expect(listSortSearchParams('sort=title&dir=asc&page=2', spec.default, spec).toString()).toBe('');
+        expect(listSortSearchParams('sort=title&dir=asc&page=2', { columnId: 'title', direction: 'asc' }, spec).toString()).toBe('sort=title&dir=asc&page=2');
+        expect(listSortHref(new URL('https://x.test/a?page=2'), { columnId: 'views', direction: 'desc' }, spec)).toBe('/a?sort=views&dir=desc');
+        expect(listSortHref(new URL('https://x.test/a?page=2'), spec.default, spec)).toBe('/a?page=2');
+    });
+    it('reports aria-sort', () => {
+        expect(listSortAria(spec.default, 'published')).toBe('descending');
+        expect(listSortAria({ columnId: 'title', direction: 'asc' }, 'title')).toBe('ascending');
+        expect(listSortAria(spec.default, 'title')).toBe('none');
+    });
+    it('sorts rows stably with empty values last in both directions', () => {
+        const rows = [
+            { id: 1, at: '2026-01-02' },
+            { id: 2, at: null },
+            { id: 3, at: '2026-03-01' },
+            { id: 4, at: '2026-01-02' },
+        ];
+        const value = (row) => row.at;
+        expect(sortListRows(rows, { columnId: 'at', direction: 'desc' }, value).map((r) => r.id)).toEqual([3, 1, 4, 2]);
+        expect(sortListRows(rows, { columnId: 'at', direction: 'asc' }, value).map((r) => r.id)).toEqual([1, 4, 3, 2]);
+        expect(compareListValues('item 2', 'item 10', 'asc')).toBeLessThan(0);
+        expect(compareListValues(new Date('2026-01-01'), new Date('2025-01-01'), 'desc')).toBeLessThan(0);
+    });
+    it('builds ORDER BY only from the allow-list', () => {
+        const map = {
+            published: 'COALESCE(c.publish_date, c.created_at)',
+            title: 'c.title',
+        };
+        expect(listSortOrderBy(spec.default, map)).toBe('COALESCE(c.publish_date, c.created_at) DESC NULLS LAST');
+        expect(listSortOrderBy({ columnId: 'title', direction: 'asc' }, map, {
+            nulls: false,
+        })).toBe('c.title ASC');
+        expect(() => listSortOrderBy({ columnId: 'title; drop', direction: 'asc' }, map)).toThrow();
+    });
+});

package/dist/components/data/__tests__/responsive-table.fixture.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+import ThemeProvider from '../../../themes/ThemeProvider.svelte';
+import DataTable from '../DataTable.svelte';
+
+let { mode = 'hide-columns' }: { mode?: 'scroll' | 'hide-columns' } = $props();
+const columns = Array.from({ length: 7 }, (_, index) => ({
+  id: `c${index}`,
+  label: `Column ${index}`,
+  sortable: true,
+  width: '200px',
+  minWidth: '180px',
+  responsive: { priority: index, keepVisible: index === 0 },
+  headerPath: [{ id: 'group', label: 'Group' }],
+}));
+const data = [
+  {
+    id: 'one',
+    ...Object.fromEntries(
+      columns.map((column) => [
+        column.id,
+        `${column.label}LongUnbrokenTextThatMustWrap`,
+      ]),
+    ),
+  },
+];
+</script>
+<ThemeProvider density="touch" persist={false} inlineVariables>
+  <DataTable {columns} {data} responsiveMode={mode} rowKey="id" sortable caption="Responsive table" />
+</ThemeProvider>

package/dist/components/data/__tests__/responsive-table.fixture.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    mode?: 'scroll' | 'hide-columns';
+};
+declare const ResponsiveTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type ResponsiveTable = ReturnType<typeof ResponsiveTable>;
+export default ResponsiveTable;
+//# sourceMappingURL=responsive-table.fixture.svelte.d.ts.map

package/dist/components/data/__tests__/responsive-table.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-table.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/data/__tests__/responsive-table.fixture.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,gBAAgB,GAAI;IAAE,IAAI,CAAC,EAAE,QAAQ,GAAG,cAAc,CAAA;CAAE,CAAC;AAiC/D,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/data/__tests__/surface-navigation.test.js

@@ -0,0 +1,121 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { createDataSurfaceRegistry } from '../data-surface.js';
+import { registerLinkSurface } from '../link-surface.js';
+import { hasPendingSurfaceNavigation, trackSurfaceNavigation, whenSurfaceNavigationSettled, } from '../surface-navigation.js';
+const links = [{ id: 'events', label: 'Events', href: '/s/events' }];
+function deferred() {
+    let resolve;
+    const promise = new Promise((r) => {
+        resolve = r;
+    });
+    return { promise, resolve };
+}
+function openCommand(revision = 1) {
+    return {
+        version: 1,
+        commandId: `open-${Math.random()}`,
+        identity: { surfaceId: 'site-sections', kind: 'list' },
+        expectedRevision: revision,
+        controlId: 'open',
+        payload: { target: 'Events' },
+    };
+}
+describe('whenSurfaceNavigationSettled', () => {
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+    it('waits for a link surface navigation and the new page to register', async () => {
+        const registry = createDataSurfaceRegistry();
+        const navigation = deferred();
+        registerLinkSurface({
+            registry,
+            surfaceId: 'site-sections',
+            label: 'Site sections',
+            description: 'Pages',
+            links,
+            navigate: () => navigation.promise,
+        });
+        const result = await registry.execute(openCommand());
+        // The command answers at once; the page change is still running.
+        expect(result.ok).toBe(true);
+        expect(hasPendingSurfaceNavigation(registry)).toBe(true);
+        let settled = false;
+        const waiting = whenSurfaceNavigationSettled(registry, {
+            quietMs: 20,
+        }).then(() => {
+            settled = true;
+        });
+        await new Promise((r) => setTimeout(r, 30));
+        expect(settled).toBe(false);
+        // The new page mounts its surface as the navigation finishes.
+        navigation.resolve();
+        await Promise.resolve();
+        registry.register({
+            descriptor: {
+                version: 1,
+                identity: { surfaceId: 'events', kind: 'list' },
+                schemaVersion: 1,
+                label: 'Events',
+                rowKey: 'id',
+                columns: [
+                    { id: 'id', label: 'ID', capabilities: ['read'], role: 'row-key' },
+                ],
+                query: { modes: ['rows'], projectableColumnIds: ['id'] },
+                controls: [],
+                actions: [],
+                limits: { maxQueryRows: 1, maxQueryBytes: 1000, maxSelectionSize: 1 },
+            },
+            getSnapshot: () => ({ revision: 1, state: {}, selection: null }),
+        });
+        await waiting;
+        expect(settled).toBe(true);
+        expect(hasPendingSurfaceNavigation(registry)).toBe(false);
+    });
+    it('resolves after a quiet period when nothing navigates', async () => {
+        const registry = createDataSurfaceRegistry();
+        const started = Date.now();
+        await whenSurfaceNavigationSettled(registry, { quietMs: 10 });
+        expect(Date.now() - started).toBeLessThan(1_000);
+    });
+    it('gives up after the timeout, and a failed navigation still settles', async () => {
+        const registry = createDataSurfaceRegistry();
+        void trackSurfaceNavigation(registry, new Promise(() => { }));
+        const started = Date.now();
+        await whenSurfaceNavigationSettled(registry, {
+            quietMs: 5,
+            timeoutMs: 40,
+        });
+        expect(Date.now() - started).toBeLessThan(1_000);
+        const other = createDataSurfaceRegistry();
+        const failing = trackSurfaceNavigation(other, Promise.reject(new Error('nope')));
+        await expect(failing).rejects.toThrow('nope');
+        await whenSurfaceNavigationSettled(other, { quietMs: 5 });
+        expect(hasPendingSurfaceNavigation(other)).toBe(false);
+    });
+    it('keeps waiting while a watched source keeps changing', async () => {
+        const registry = createDataSurfaceRegistry();
+        const listeners = new Set();
+        const tools = {
+            subscribe(listener) {
+                listeners.add(listener);
+                return () => listeners.delete(listener);
+            },
+        };
+        let settled = false;
+        const waiting = whenSurfaceNavigationSettled(registry, {
+            quietMs: 30,
+            alsoWatch: [tools],
+        }).then(() => {
+            settled = true;
+        });
+        for (let i = 0; i < 3; i += 1) {
+            await new Promise((r) => setTimeout(r, 15));
+            for (const listener of listeners)
+                listener({ type: 'registered' });
+        }
+        expect(settled).toBe(false);
+        await waiting;
+        expect(settled).toBe(true);
+        expect(listeners.size).toBe(0);
+    });
+});

package/dist/components/data/data-surface.d.ts

@@ -21,4 +21,5 @@ export declare function normalizeDataSurfaceQueryRequest(value: DataSurfaceQuery
 export declare function normalizeDataSurfaceActionRequest(value: DataSurfaceActionRequest): DataSurfaceActionRequest;
 /** Create an isolated registry; applications choose how it is exposed. */
 export declare function createDataSurfaceRegistry(): DataSurfaceRegistry;
+export * from './surface-navigation.js';
 //# sourceMappingURL=data-surface.d.ts.map

package/dist/components/data/data-surface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-surface.d.ts","sourceRoot":"","sources":["../../../src/components/data/data-surface.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EACV,wBAAwB,EAOxB,qBAAqB,EAMrB,uBAAuB,EAEvB,mBAAmB,EAMnB,mBAAmB,EAGnB,yBAAyB,EAC1B,MAAM,2BAA2B,CAAC;AAGnC,YAAY,EACV,2BAA2B,EAC3B,wBAAwB,EACxB,uBAAuB,EACvB,2BAA2B,EAC3B,4BAA4B,EAC5B,2BAA2B,EAC3B,2BAA2B,EAC3B,0BAA0B,EAC1B,qBAAqB,EACrB,2BAA2B,EAC3B,2BAA2B,EAC3B,+BAA+B,EAC/B,wBAAwB,EACxB,qBAAqB,EACrB,mBAAmB,EACnB,qBAAqB,EACrB,wBAAwB,EACxB,oBAAoB,EACpB,eAAe,EACf,iBAAiB,EACjB,4BAA4B,EAC5B,oBAAoB,EACpB,uBAAuB,EACvB,sBAAsB,EACtB,uBAAuB,EACvB,mBAAmB,EACnB,wBAAwB,EACxB,gBAAgB,EAChB,6BAA6B,EAC7B,yBAAyB,EACzB,sBAAsB,EACtB,mBAAmB,EACnB,wBAAwB,EACxB,kBAAkB,EAClB,2BAA2B,EAC3B,2BAA2B,EAC3B,yBAAyB,EACzB,yBAAyB,GAC1B,MAAM,2BAA2B,CAAC;AAEnC,iFAAiF;AACjF,eAAO,MAAM,8BAA8B,SAAU,CAAC;AAEtD,sEAAsE;AACtE,eAAO,MAAM,kCAAkC,MAAM,CAAC;AAEtD,mEAAmE;AACnE,eAAO,MAAM,+BAA+B,MAAM,CAAC;AAypBnD,wBAAgB,8BAA8B,CAC5C,KAAK,EAAE,qBAAqB,GAC3B,qBAAqB,CAgSvB;AAED,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,mBAAmB,GACzB,mBAAmB,CAsBrB;AAED,wBAAgB,kCAAkC,CAChD,KAAK,EAAE,yBAAyB,GAC/B,yBAAyB,CAoC3B;AAED,wBAAgB,gCAAgC,CAC9C,KAAK,EAAE,uBAAuB,GAC7B,uBAAuB,CA+FzB;AAED,wBAAgB,iCAAiC,CAC/C,KAAK,EAAE,wBAAwB,GAC9B,wBAAwB,CAmD1B;AAmED,0EAA0E;AAC1E,wBAAgB,yBAAyB,IAAI,mBAAmB,CAka/D"}
+{"version":3,"file":"data-surface.d.ts","sourceRoot":"","sources":["../../../src/components/data/data-surface.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EACV,wBAAwB,EAOxB,qBAAqB,EAMrB,uBAAuB,EAEvB,mBAAmB,EAMnB,mBAAmB,EAGnB,yBAAyB,EAC1B,MAAM,2BAA2B,CAAC;AAGnC,YAAY,EACV,2BAA2B,EAC3B,wBAAwB,EACxB,uBAAuB,EACvB,2BAA2B,EAC3B,4BAA4B,EAC5B,2BAA2B,EAC3B,2BAA2B,EAC3B,0BAA0B,EAC1B,qBAAqB,EACrB,2BAA2B,EAC3B,2BAA2B,EAC3B,+BAA+B,EAC/B,wBAAwB,EACxB,qBAAqB,EACrB,mBAAmB,EACnB,qBAAqB,EACrB,wBAAwB,EACxB,oBAAoB,EACpB,eAAe,EACf,iBAAiB,EACjB,4BAA4B,EAC5B,oBAAoB,EACpB,uBAAuB,EACvB,sBAAsB,EACtB,uBAAuB,EACvB,mBAAmB,EACnB,wBAAwB,EACxB,gBAAgB,EAChB,6BAA6B,EAC7B,yBAAyB,EACzB,sBAAsB,EACtB,mBAAmB,EACnB,wBAAwB,EACxB,kBAAkB,EAClB,2BAA2B,EAC3B,2BAA2B,EAC3B,yBAAyB,EACzB,yBAAyB,GAC1B,MAAM,2BAA2B,CAAC;AAEnC,iFAAiF;AACjF,eAAO,MAAM,8BAA8B,SAAU,CAAC;AAEtD,sEAAsE;AACtE,eAAO,MAAM,kCAAkC,MAAM,CAAC;AAEtD,mEAAmE;AACnE,eAAO,MAAM,+BAA+B,MAAM,CAAC;AAypBnD,wBAAgB,8BAA8B,CAC5C,KAAK,EAAE,qBAAqB,GAC3B,qBAAqB,CAgSvB;AAED,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,mBAAmB,GACzB,mBAAmB,CAsBrB;AAED,wBAAgB,kCAAkC,CAChD,KAAK,EAAE,yBAAyB,GAC/B,yBAAyB,CAoC3B;AAED,wBAAgB,gCAAgC,CAC9C,KAAK,EAAE,uBAAuB,GAC7B,uBAAuB,CA+FzB;AAED,wBAAgB,iCAAiC,CAC/C,KAAK,EAAE,wBAAwB,GAC9B,wBAAwB,CAmD1B;AAmED,0EAA0E;AAC1E,wBAAgB,yBAAyB,IAAI,mBAAmB,CAka/D;AACD,cAAc,yBAAyB,CAAC"}

package/dist/components/data/data-surface.js

@@ -1259,3 +1259,4 @@ export function createDataSurfaceRegistry() {
         },
     };
 }
+export * from './surface-navigation.js';

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

@@ -10,5 +10,11 @@ export * from './DataTablePerformance.js';
 export * from './DataTableVirtualization.js';
 export * from './data-surface.js';
 export * from './data-table-surface.js';
+export { default as ListSortSelect } from './ListSortSelect.svelte';
+export * from './link-surface.js';
+export * from './list-sort.js';
+export * from './list-sort-state.svelte.js';
+export { default as SortableHeader } from './SortableHeader.svelte';
+export * from './step-surface.js';
 export * from './types.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/data/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,OAAO,IAAI,WAAW,GACvB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/data/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,OAAO,IAAI,WAAW,GACvB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC"}

package/dist/components/data/index.js

@@ -10,4 +10,10 @@ export * from './DataTablePerformance.js';
 export * from './DataTableVirtualization.js';
 export * from './data-surface.js';
 export * from './data-table-surface.js';
+export { default as ListSortSelect } from './ListSortSelect.svelte';
+export * from './link-surface.js';
+export * from './list-sort.js';
+export * from './list-sort-state.svelte.js';
+export { default as SortableHeader } from './SortableHeader.svelte';
+export * from './step-surface.js';
 export * from './types.js';