@prestack/thread-ui 0.0.1

package/dist/ui/materials/mat_clay.d.ts

@@ -0,0 +1,22 @@
+export declare const CLAY: {
+    readonly id: "clay";
+    readonly sets: readonly [{
+        readonly property: "background";
+        readonly is: "colour-surface";
+    }, {
+        readonly property: "borderWidth";
+        readonly is: "edge-thin";
+    }, {
+        readonly property: "borderStyle";
+        readonly is: "line-solid";
+    }, {
+        readonly property: "borderColor";
+        readonly is: "colour-edge-clay";
+    }, {
+        readonly property: "boxShadow";
+        readonly is: "shadow-2";
+    }, {
+        readonly property: "color";
+        readonly is: "colour-ink";
+    }];
+};

package/dist/ui/materials/mat_clay.js

@@ -0,0 +1,12 @@
+import { material } from "../material.js";
+export const CLAY = material({
+    id: 'clay',
+    sets: [
+        { property: 'background', is: 'colour-surface' },
+        { property: 'borderWidth', is: 'edge-thin' },
+        { property: 'borderStyle', is: 'line-solid' },
+        { property: 'borderColor', is: 'colour-edge-clay' },
+        { property: 'boxShadow', is: 'shadow-2' },
+        { property: 'color', is: 'colour-ink' },
+    ],
+});

package/dist/ui/materials/mat_elevated.d.ts

@@ -0,0 +1,32 @@
+export declare const ELEVATED: {
+    readonly id: "elevated";
+    readonly sets: readonly [{
+        readonly property: "background";
+        readonly is: "colour-surface";
+    }, {
+        readonly property: "boxShadow";
+        readonly is: "shadow-2";
+    }, {
+        readonly property: "color";
+        readonly is: "colour-ink";
+    }];
+    readonly states: readonly [{
+        readonly when: readonly ["hover"];
+        readonly sets: readonly [{
+            readonly property: "boxShadow";
+            readonly is: "shadow-3";
+        }];
+    }, {
+        readonly when: readonly ["active"];
+        readonly sets: readonly [{
+            readonly property: "boxShadow";
+            readonly is: "shadow-1";
+        }];
+    }, {
+        readonly when: readonly ["active", "hover"];
+        readonly sets: readonly [{
+            readonly property: "boxShadow";
+            readonly is: "shadow-1";
+        }];
+    }];
+};

package/dist/ui/materials/mat_elevated.js

@@ -0,0 +1,23 @@
+import { material } from "../material.js";
+export const ELEVATED = material({
+    id: 'elevated',
+    sets: [
+        { property: 'background', is: 'colour-surface' },
+        { property: 'boxShadow', is: 'shadow-2' },
+        { property: 'color', is: 'colour-ink' },
+    ],
+    states: [
+        {
+            when: ['hover'],
+            sets: [{ property: 'boxShadow', is: 'shadow-3' }],
+        },
+        {
+            when: ['active'],
+            sets: [{ property: 'boxShadow', is: 'shadow-1' }],
+        },
+        {
+            when: ['active', 'hover'],
+            sets: [{ property: 'boxShadow', is: 'shadow-1' }],
+        },
+    ],
+});

package/dist/ui/materials/mat_flat.d.ts

@@ -0,0 +1,50 @@
+export declare const FLAT: {
+    readonly id: "flat";
+    readonly sets: readonly [{
+        readonly property: "background";
+        readonly is: "colour-surface";
+    }, {
+        readonly property: "borderWidth";
+        readonly is: "edge-hair";
+    }, {
+        readonly property: "borderStyle";
+        readonly is: "line-solid";
+    }, {
+        readonly property: "borderColor";
+        readonly is: "colour-edge-faint";
+    }, {
+        readonly property: "boxShadow";
+        readonly is: "shadow-1";
+    }, {
+        readonly property: "color";
+        readonly is: "colour-ink";
+    }];
+    readonly states: readonly [{
+        readonly when: readonly ["hover"];
+        readonly sets: readonly [{
+            readonly property: "boxShadow";
+            readonly is: "shadow-2";
+        }];
+    }, {
+        readonly when: readonly ["focus"];
+        readonly sets: readonly [{
+            readonly property: "borderColor";
+            readonly is: "colour-accent";
+        }, {
+            readonly property: "borderWidth";
+            readonly is: "edge-thick";
+        }];
+    }, {
+        readonly when: readonly ["focus", "hover"];
+        readonly sets: readonly [{
+            readonly property: "borderColor";
+            readonly is: "colour-accent";
+        }, {
+            readonly property: "borderWidth";
+            readonly is: "edge-thick";
+        }, {
+            readonly property: "boxShadow";
+            readonly is: "shadow-2";
+        }];
+    }];
+};

package/dist/ui/materials/mat_flat.js

@@ -0,0 +1,33 @@
+import { material } from "../material.js";
+export const FLAT = material({
+    id: 'flat',
+    sets: [
+        { property: 'background', is: 'colour-surface' },
+        { property: 'borderWidth', is: 'edge-hair' },
+        { property: 'borderStyle', is: 'line-solid' },
+        { property: 'borderColor', is: 'colour-edge-faint' },
+        { property: 'boxShadow', is: 'shadow-1' },
+        { property: 'color', is: 'colour-ink' },
+    ],
+    states: [
+        {
+            when: ['hover'],
+            sets: [{ property: 'boxShadow', is: 'shadow-2' }],
+        },
+        {
+            when: ['focus'],
+            sets: [
+                { property: 'borderColor', is: 'colour-accent' },
+                { property: 'borderWidth', is: 'edge-thick' },
+            ],
+        },
+        {
+            when: ['focus', 'hover'],
+            sets: [
+                { property: 'borderColor', is: 'colour-accent' },
+                { property: 'borderWidth', is: 'edge-thick' },
+                { property: 'boxShadow', is: 'shadow-2' },
+            ],
+        },
+    ],
+});

package/dist/ui/materials/mat_glass.d.ts

@@ -0,0 +1,32 @@
+export declare const GLASS: {
+    readonly id: "glass";
+    readonly sets: readonly [{
+        readonly property: "background";
+        readonly is: "colour-glass";
+    }, {
+        readonly property: "backdropFilter";
+        readonly is: "blur-md";
+    }, {
+        readonly property: "borderWidth";
+        readonly is: "edge-hair";
+    }, {
+        readonly property: "borderStyle";
+        readonly is: "line-solid";
+    }, {
+        readonly property: "borderColor";
+        readonly is: "colour-edge-glass";
+    }, {
+        readonly property: "boxShadow";
+        readonly is: "shadow-3";
+    }, {
+        readonly property: "color";
+        readonly is: "colour-ink";
+    }];
+    readonly states: readonly [{
+        readonly when: readonly ["hover"];
+        readonly sets: readonly [{
+            readonly property: "backdropFilter";
+            readonly is: "blur-lg";
+        }];
+    }];
+};

package/dist/ui/materials/mat_glass.js

@@ -0,0 +1,19 @@
+import { material } from "../material.js";
+export const GLASS = material({
+    id: 'glass',
+    sets: [
+        { property: 'background', is: 'colour-glass' },
+        { property: 'backdropFilter', is: 'blur-md' },
+        { property: 'borderWidth', is: 'edge-hair' },
+        { property: 'borderStyle', is: 'line-solid' },
+        { property: 'borderColor', is: 'colour-edge-glass' },
+        { property: 'boxShadow', is: 'shadow-3' },
+        { property: 'color', is: 'colour-ink' },
+    ],
+    states: [
+        {
+            when: ['hover'],
+            sets: [{ property: 'backdropFilter', is: 'blur-lg' }],
+        },
+    ],
+});

package/dist/ui/materials/mat_lit.d.ts

@@ -0,0 +1,22 @@
+export declare const LIT: {
+    readonly id: "lit";
+    readonly sets: readonly [{
+        readonly property: "background";
+        readonly is: "colour-surface-lit";
+    }, {
+        readonly property: "borderWidth";
+        readonly is: "edge-thin";
+    }, {
+        readonly property: "borderStyle";
+        readonly is: "line-solid";
+    }, {
+        readonly property: "borderColor";
+        readonly is: "colour-edge-lit";
+    }, {
+        readonly property: "boxShadow";
+        readonly is: "shadow-glow";
+    }, {
+        readonly property: "color";
+        readonly is: "colour-ink";
+    }];
+};

package/dist/ui/materials/mat_lit.js

@@ -0,0 +1,12 @@
+import { material } from "../material.js";
+export const LIT = material({
+    id: 'lit',
+    sets: [
+        { property: 'background', is: 'colour-surface-lit' },
+        { property: 'borderWidth', is: 'edge-thin' },
+        { property: 'borderStyle', is: 'line-solid' },
+        { property: 'borderColor', is: 'colour-edge-lit' },
+        { property: 'boxShadow', is: 'shadow-glow' },
+        { property: 'color', is: 'colour-ink' },
+    ],
+});

package/dist/ui/materials/mat_moulded.d.ts

@@ -0,0 +1,16 @@
+export declare const MOULDED: {
+    readonly id: "moulded";
+    readonly sets: readonly [{
+        readonly property: "background";
+        readonly is: "colour-page";
+    }, {
+        readonly property: "borderStyle";
+        readonly is: "line-off";
+    }, {
+        readonly property: "boxShadow";
+        readonly is: "shadow-moulded";
+    }, {
+        readonly property: "color";
+        readonly is: "colour-ink";
+    }];
+};

package/dist/ui/materials/mat_moulded.js

@@ -0,0 +1,10 @@
+import { material } from "../material.js";
+export const MOULDED = material({
+    id: 'moulded',
+    sets: [
+        { property: 'background', is: 'colour-page' },
+        { property: 'borderStyle', is: 'line-off' },
+        { property: 'boxShadow', is: 'shadow-moulded' },
+        { property: 'color', is: 'colour-ink' },
+    ],
+});

package/dist/ui/materials.d.ts

@@ -0,0 +1,56 @@
+import type { Threaded } from '@prestack/thread/core/thread';
+export declare const MATERIALS: {
+    readonly id: "material";
+    readonly at: "thread/ui/materials.ts";
+    readonly files: "ui/mat_*.ts";
+    readonly describes: "A combination of style guide values that gives one specific appearance, worn by any variant that names it: glass, clay, a glaze. It composes and never computes, because every value it sets is a name the style guide holds and never a raw one, which is what lets one material be worn by many variants. Each row names a file prefixed `mat_`, and that file is the material; a file under it that no row names is not a material but a file somebody wrote. An app adds its own to this same list, and a row that goes missing breaks the build, because what the framework offers is not an app’s to withdraw. These are materials and not aesthetics: Neumorphism, Claymorphism and Cyberpunk are templates, and a template is what picks a material.";
+    readonly version: 1;
+    readonly cites: readonly [{
+        readonly on: "2026-08-25";
+        readonly said: "Style guides they can be used for simple pickings that need no thinking. We can pick colours and basic effects for using the app. Materials however are for more complex and detailed work. Materials.ts is a declaration sheet, SSOT, and each row is a file, mat_";
+    }];
+    readonly declares: readonly [{
+        readonly id: "glass";
+        readonly at: "thread/ui/materials/mat_glass.ts";
+        readonly describes: "A pane you can see through, with what is behind it softened and desaturation corrected for.";
+    }, {
+        readonly id: "flat";
+        readonly at: "thread/ui/materials/mat_flat.ts";
+        readonly describes: "Paper. A plain filled panel with a hairline and almost no lift — the same tokens as glass, asked more quietly.";
+    }, {
+        readonly id: "elevated";
+        readonly at: "thread/ui/materials/mat_elevated.ts";
+        readonly describes: "Something lifted off the page, reading by its shadow rather than by any outline.";
+    }, {
+        readonly id: "bordered";
+        readonly at: "thread/ui/materials/mat_bordered.ts";
+        readonly describes: "Ink on paper — a hard outline and a shadow with no blur, offset like a stamp.";
+    }, {
+        readonly id: "moulded";
+        readonly at: "thread/ui/materials/mat_moulded.ts";
+        readonly describes: "Pressed out of the page rather than laid on it. Its fill is the page itself, and its relief is one shadow cast twice in opposite directions.";
+    }, {
+        readonly id: "clay";
+        readonly at: "thread/ui/materials/mat_clay.ts";
+        readonly describes: "Something soft and inflated, lit from above — an outer shadow it sits in and an inset highlight along its top edge.";
+    }, {
+        readonly id: "lit";
+        readonly at: "thread/ui/materials/mat_lit.ts";
+        readonly describes: "Something that emits rather than reflects. Its glow is a shadow cast from nowhere in particular, and it names no colour of its own.";
+    }, {
+        readonly id: "ceramic";
+        readonly at: "thread/ui/materials/mat_ceramic.ts";
+        readonly describes: "A glazed surface with the light falling down its face. The one material that asks for a gradient rather than a fill.";
+    }];
+};
+export declare function nameOf(id: string): string;
+export declare function seeds(rows: readonly Threaded[], held: (at: string) => boolean): readonly {
+    readonly path: string;
+    readonly content: string;
+}[];
+export declare function mismatched(rows: readonly Threaded[], loader: (row: Threaded) => Promise<{
+    readonly id?: string;
+} | undefined>): Promise<readonly string[]>;
+export declare function orphaned(rows: readonly Threaded[], strays: readonly string[]): readonly string[];
+export declare function unguarded(rows: readonly Threaded[], read: (at: string) => string): readonly string[];
+export declare function guarding(source: string): string | undefined;

package/dist/ui/materials.js

@@ -0,0 +1,175 @@
+var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
+    if (typeof path === "string" && /^\.\.?\//.test(path)) {
+        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+        });
+    }
+    return path;
+};
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { basename, dirname, join } from 'node:path';
+import { argv, stdout } from 'node:process';
+import { pathToFileURL } from 'node:url';
+import { exit, invoked } from "@prestack/thread/core/invoked";
+import { findTree, inTree, strayFiles } from "@prestack/thread/core/tree";
+export const MATERIALS = {
+    id: 'material',
+    at: 'thread/ui/materials.ts',
+    files: 'ui/mat_*.ts',
+    describes: 'A combination of style guide values that gives one specific appearance, worn by any variant that names it: glass, clay, a glaze. It composes and never computes, because every value it sets is a name the style guide holds and never a raw one, which is what lets one material be worn by many variants. Each row names a file prefixed `mat_`, and that file is the material; a file under it that no row names is not a material but a file somebody wrote. An app adds its own to this same list, and a row that goes missing breaks the build, because what the framework offers is not an app’s to withdraw. These are materials and not aesthetics: Neumorphism, Claymorphism and Cyberpunk are templates, and a template is what picks a material.',
+    version: 1,
+    cites: [
+        {
+            on: '2026-08-25',
+            said: 'Style guides they can be used for simple pickings that need no thinking. We can pick colours and basic effects for using the app. Materials however are for more complex and detailed work. Materials.ts is a declaration sheet, SSOT, and each row is a file, mat_',
+        },
+    ],
+    declares: [
+        { id: 'glass', at: 'thread/ui/materials/mat_glass.ts', describes: 'A pane you can see through, with what is behind it softened and desaturation corrected for.' },
+        { id: 'flat', at: 'thread/ui/materials/mat_flat.ts', describes: 'Paper. A plain filled panel with a hairline and almost no lift — the same tokens as glass, asked more quietly.' },
+        { id: 'elevated', at: 'thread/ui/materials/mat_elevated.ts', describes: 'Something lifted off the page, reading by its shadow rather than by any outline.' },
+        { id: 'bordered', at: 'thread/ui/materials/mat_bordered.ts', describes: 'Ink on paper — a hard outline and a shadow with no blur, offset like a stamp.' },
+        { id: 'moulded', at: 'thread/ui/materials/mat_moulded.ts', describes: 'Pressed out of the page rather than laid on it. Its fill is the page itself, and its relief is one shadow cast twice in opposite directions.' },
+        { id: 'clay', at: 'thread/ui/materials/mat_clay.ts', describes: 'Something soft and inflated, lit from above — an outer shadow it sits in and an inset highlight along its top edge.' },
+        { id: 'lit', at: 'thread/ui/materials/mat_lit.ts', describes: 'Something that emits rather than reflects. Its glow is a shadow cast from nowhere in particular, and it names no colour of its own.' },
+        { id: 'ceramic', at: 'thread/ui/materials/mat_ceramic.ts', describes: 'A glazed surface with the light falling down its face. The one material that asks for a gradient rather than a fill.' },
+    ],
+};
+export function nameOf(id) {
+    return id.replace(/-/g, '_').toUpperCase();
+}
+function starter(row) {
+    const name = nameOf(row.id);
+    return `import { material } from './material.ts'
+
+export const ${name} = material({
+  id: '${row.id}',
+  sets: [],
+} as const)
+`;
+}
+export function seeds(rows, held) {
+    return rows.filter((row) => !held(row.at)).map((row) => ({ path: row.at, content: starter(row) }));
+}
+export async function mismatched(rows, loader) {
+    const found = [];
+    for (const row of rows) {
+        const material = await loader(row);
+        if (material === undefined) {
+            found.push(`\`${row.id}\` is declared at \`${row.at}\`, and that file exports no \`${nameOf(row.id)}\`. ` +
+                'A row names a file, and the file is the thing.');
+            continue;
+        }
+        if (material.id !== row.id) {
+            found.push(`\`${row.at}\` declares itself \`${String(material.id)}\`, and the row that names it calls it \`${row.id}\`. ` +
+                "A material file and the row that names it have to be the same material — make the file's `id` match the row, or fix the row.");
+        }
+    }
+    return found;
+}
+function extensionOf(path) {
+    const name = basename(path);
+    const at = name.lastIndexOf('.');
+    return at === -1 ? '' : name.slice(at);
+}
+const MAT_PREFIX = /^mat_/;
+export function orphaned(rows, strays) {
+    const named = new Set(rows.map((row) => row.at));
+    return strays
+        .filter((one) => !named.has(one))
+        .map((one) => `\`${one}\` is under materials and no row names it — not a material, a file somebody wrote. ` +
+        'Add a row for it, or delete the file.');
+}
+const GUARDED = /=\s*material\s*\(/;
+const TYPED = /import type \{ Material \} from '([^']*)'/;
+const OPENS = /export const ([A-Z0-9_]+) = \{/;
+const CLOSES = /\} as const satisfies Material/;
+export function unguarded(rows, read) {
+    return rows
+        .filter((row) => !GUARDED.test(read(row.at)))
+        .map((row) => `\`${row.at}\` declares \`${row.id}\` with \`satisfies Material\`, which accepts a value no ` +
+        'row holds — `satisfies` checks against `string`, so `8px` and `var(--x)` compile. Run ' +
+        '`thread materials` and it rewrites the two lines that wrap the declaration, leaving what is ' +
+        'between them alone.');
+}
+export function guarding(source) {
+    if (GUARDED.test(source))
+        return undefined;
+    const typed = TYPED.exec(source);
+    const opens = OPENS.exec(source);
+    if (typed === null || opens === null || !CLOSES.test(source))
+        return undefined;
+    return source
+        .replace(typed[0], `import { material } from '${typed[1] ?? ''}'`)
+        .replace(opens[0], `export const ${opens[1] ?? ''} = material({`)
+        .replace(CLOSES, '} as const)');
+}
+async function run() {
+    const tree = findTree();
+    const at = inTree(tree, 'materials.ts');
+    if (!existsSync(at)) {
+        stdout.write(`thread: this tree has no ${tree.name}/${basename(at)}, so it declares no material and there is nothing to seed or check.\n`);
+        return 0;
+    }
+    const held = (await import(__rewriteRelativeImportExtension(pathToFileURL(at).href)));
+    if (held.MATERIAL === undefined) {
+        stdout.write(`thread: ${tree.name}/materials.ts exports no \`MATERIAL\`, so nothing declares a material here.\n`);
+        return 1;
+    }
+    const rows = held.MATERIAL.declares ?? [];
+    const checking = argv.includes('--check');
+    const exists = (where) => existsSync(join(tree.at, where));
+    const made = seeds(rows, exists);
+    if (checking) {
+        const unseeded = rows.find((row) => !exists(row.at));
+        if (unseeded !== undefined) {
+            stdout.write(`thread: \`${unseeded.id}\` is declared at \`${unseeded.at}\`, and the file is not there yet. ` +
+                'A row names a file, and `--check` never writes one — run `thread materials` and commit what it seeds.\n');
+            return 1;
+        }
+    }
+    else {
+        for (const one of made) {
+            mkdirSync(dirname(join(tree.at, one.path)), { recursive: true });
+            writeFileSync(join(tree.at, one.path), one.content, 'utf8');
+            stdout.write(`thread: seeded ${one.path}\n`);
+        }
+    }
+    const wrong = (await mismatched(rows, async (row) => {
+        const module = (await import(__rewriteRelativeImportExtension(pathToFileURL(join(tree.at, row.at)).href)));
+        return module[nameOf(row.id)];
+    }))[0];
+    if (wrong !== undefined) {
+        stdout.write(`thread: ${wrong}\n`);
+        return 1;
+    }
+    const read = (at) => readFileSync(join(tree.at, at), 'utf8');
+    if (checking) {
+        const loose = unguarded(rows, read)[0];
+        if (loose !== undefined) {
+            stdout.write(`thread: ${loose}\n`);
+            return 1;
+        }
+    }
+    else {
+        for (const row of rows) {
+            const written = guarding(read(row.at));
+            if (written === undefined)
+                continue;
+            writeFileSync(join(tree.at, row.at), written, 'utf8');
+            stdout.write(`thread: ${row.at} now declares through \`material(...)\`\n`);
+        }
+    }
+    const stray = orphaned(rows, strayFiles(tree.at, 'mat_', '.' + 'ts'))[0];
+    if (stray !== undefined) {
+        stdout.write(`thread: ${stray}\n`);
+        return 1;
+    }
+    stdout.write(checking
+        ? `thread: ${String(rows.length)} material(s) declared, all seeded\n`
+        : `thread: ${String(rows.length)} material(s) declared, ${String(made.length)} seeded, ` +
+            `${String(rows.length - made.length)} already written\n`);
+    return 0;
+}
+if (invoked(import.meta.url))
+    exit(await run());

package/dist/ui/modes.d.ts

@@ -0,0 +1,25 @@
+import type { Threaded } from '@prestack/thread/core/thread';
+export declare const holds: readonly [Omit<Threaded, "at"> & {
+    readonly id: "dark";
+    readonly is: string;
+}, Omit<Threaded, "at"> & {
+    readonly id: "light";
+    readonly is: string;
+}];
+export declare const MODES: {
+    readonly id: "mode";
+    readonly at: "thread/ui/modes.ts";
+    readonly describes: "Every way a reader’s own device can ask for a different look, and the query that answers it. A mode is chosen for the app rather than by it, which is what tells it from a theme — and a theme has its own modes, so the two are dimensions rather than one list. A mode changes what the variables hold, never what a material or a variant says.";
+    readonly version: 1;
+    readonly cites: {
+        on: string;
+        said: string;
+    }[];
+    readonly holds: readonly [Omit<Threaded, "at"> & {
+        readonly id: "dark";
+        readonly is: string;
+    }, Omit<Threaded, "at"> & {
+        readonly id: "light";
+        readonly is: string;
+    }];
+};

package/dist/ui/modes.js

@@ -0,0 +1,25 @@
+const here = 'thread/ui/modes.ts';
+const said = [
+    {
+        on: '2026-08-25',
+        said: 'themes can have dark and light modes too. So they are not at all the same.',
+    },
+];
+const one = (id, is, describes) => ({
+    id,
+    is,
+    describes,
+    version: 1,
+});
+export const holds = [
+    one('dark', '(prefers-color-scheme: dark)', 'The reader has asked their device for a dark interface. Nothing about the app chooses this and nothing about the app can override it.'),
+    one('light', '(prefers-color-scheme: light)', 'The reader has asked their device for a light interface. Stated rather than assumed, because the resting values are not the same thing as an answer to the question.'),
+];
+export const MODES = {
+    id: 'mode',
+    at: here,
+    describes: 'Every way a reader’s own device can ask for a different look, and the query that answers it. A mode is chosen for the app rather than by it, which is what tells it from a theme — and a theme has its own modes, so the two are dimensions rather than one list. A mode changes what the variables hold, never what a material or a variant says.',
+    version: 1,
+    cites: said,
+    holds,
+};

package/dist/ui/navigation.d.ts

@@ -0,0 +1,3 @@
+import type { MapIsland, Screen } from './islands/map.ts';
+export type ScreenName = Screen['id'];
+export declare function trailTo(map: MapIsland, to: ScreenName): readonly ScreenName[];

package/dist/ui/navigation.js

@@ -0,0 +1,24 @@
+'use client';
+export function trailTo(map, to) {
+    const entries = map.screens.filter((s) => s.entry).map((s) => s.id);
+    if (entries.includes(to))
+        return [to];
+    const seen = new Set(entries);
+    let frontier = entries.map((id) => [id]);
+    while (frontier.length > 0) {
+        const next = [];
+        for (const path of frontier) {
+            const here = path[path.length - 1];
+            for (const link of map.links.filter((l) => l.from === here)) {
+                if (link.to === to)
+                    return [...path, link.to];
+                if (seen.has(link.to))
+                    continue;
+                seen.add(link.to);
+                next.push([...path, link.to]);
+            }
+        }
+        frontier = next;
+    }
+    return [];
+}

package/dist/ui/positioning.d.ts

@@ -0,0 +1,24 @@
+import { type Placement, type Platform } from '@floating-ui/dom';
+import { useFloating } from '@floating-ui/react-dom';
+import type { RefObject } from 'react';
+export interface AnchorOptions {
+    readonly placement?: Placement;
+    readonly gap?: number;
+    readonly padding?: number;
+    readonly arrowRef?: RefObject<HTMLElement | null>;
+}
+export interface Position {
+    readonly x: number;
+    readonly y: number;
+    readonly placement: Placement;
+    readonly maxWidth?: number;
+    readonly maxHeight?: number;
+    readonly arrow?: {
+        readonly x?: number;
+        readonly y?: number;
+    };
+}
+export declare function positionOf(reference: Element, floating: HTMLElement, options?: AnchorOptions & {
+    readonly platform?: Platform;
+}): Promise<Position>;
+export declare function useAnchored(options?: AnchorOptions): ReturnType<typeof useFloating>;