@prestack/thread-ui 0.0.1

package/dist/ui/positioning.js

@@ -0,0 +1,48 @@
+'use client';
+import { arrow as arrowMiddleware, computePosition, flip, offset, shift, size, } from '@floating-ui/dom';
+import { useFloating, autoUpdate } from '@floating-ui/react-dom';
+const DEFAULT_GAP = 4;
+const DEFAULT_PADDING = 8;
+function middleware(options) {
+    const padding = options.padding ?? DEFAULT_PADDING;
+    const list = [
+        offset(options.gap ?? DEFAULT_GAP),
+        flip({ padding }),
+        shift({ padding }),
+        size({
+            padding,
+            apply({ availableWidth, availableHeight, elements }) {
+                Object.assign(elements.floating.style, {
+                    maxWidth: `${Math.max(0, availableWidth)}px`,
+                    maxHeight: `${Math.max(0, availableHeight)}px`,
+                    overflow: 'auto',
+                });
+            },
+        }),
+    ];
+    if (options.arrowRef !== undefined) {
+        list.push(arrowMiddleware({ element: options.arrowRef.current, padding }));
+    }
+    return list;
+}
+export async function positionOf(reference, floating, options = {}) {
+    const result = await computePosition(reference, floating, {
+        placement: options.placement ?? 'bottom',
+        middleware: middleware(options),
+        ...(options.platform === undefined ? {} : { platform: options.platform }),
+    });
+    const arrowData = result.middlewareData.arrow;
+    return {
+        x: result.x,
+        y: result.y,
+        placement: result.placement,
+        ...(arrowData === undefined ? {} : { arrow: { ...(arrowData.x === undefined ? {} : { x: arrowData.x }), ...(arrowData.y === undefined ? {} : { y: arrowData.y }) } }),
+    };
+}
+export function useAnchored(options = {}) {
+    return useFloating({
+        placement: options.placement ?? 'bottom',
+        middleware: middleware(options),
+        whileElementsMounted: autoUpdate,
+    });
+}

package/dist/ui/presented.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+import { type Presentation } from './door.ts';
+export interface PresentedProps {
+    readonly presentation: Presentation;
+    readonly open?: boolean;
+    readonly onDismiss?: () => void;
+    readonly className?: string;
+    readonly children: ReactNode;
+}
+export declare function Presented(props: PresentedProps): ReactNode;

package/dist/ui/presented.js

@@ -0,0 +1,81 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { PRESENTATION_BEHAVIOUR } from "./door.js";
+import { useDismissLayer } from "./dismiss-layer.js";
+import { useFocusScope } from "./focus-scope.js";
+import { lockScroll } from "./scroll-lock.js";
+export function Presented(props) {
+    const behaviour = PRESENTATION_BEHAVIOUR[props.presentation];
+    const open = props.open ?? true;
+    const ref = useRef(null);
+    const [leaving, setLeaving] = useState(false);
+    const [was, setWas] = useState(open);
+    const labelId = useId();
+    useFocusScope(ref, {
+        active: open,
+        trapFocus: behaviour.trapFocus,
+        returnFocus: behaviour.returnFocus,
+    });
+    useDismissLayer(ref, {
+        active: open && (behaviour.dismissOnEscape || behaviour.dismissOnOutside),
+        dismissOnEscape: behaviour.dismissOnEscape,
+        dismissOnOutside: behaviour.dismissOnOutside,
+        onDismiss: props.onDismiss ?? (() => undefined),
+    });
+    useEffect(() => {
+        if (!open || !behaviour.backdrop)
+            return;
+        return lockScroll();
+    }, [open, behaviour.backdrop]);
+    if (was !== open) {
+        setWas(open);
+        setLeaving(!open);
+    }
+    useEffect(() => {
+        if (!leaving)
+            return undefined;
+        const node = ref.current;
+        if (node === null) {
+            setLeaving(false);
+            return undefined;
+        }
+        const running = typeof globalThis.getComputedStyle === 'function' &&
+            globalThis.getComputedStyle(node).animationName !== 'none';
+        if (!running) {
+            setLeaving(false);
+            return undefined;
+        }
+        const done = () => setLeaving(false);
+        node.addEventListener('animationend', done);
+        const style = globalThis.getComputedStyle(node);
+        const seconds = (one) => one.split(',').reduce((most, part) => Math.max(most, Number.parseFloat(part) || 0), 0);
+        const after = (seconds(style.animationDuration) + seconds(style.animationDelay)) * 1000 + 50;
+        const timer = setTimeout(done, after);
+        return () => {
+            node.removeEventListener('animationend', done);
+            clearTimeout(timer);
+        };
+    }, [leaving]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const root = ref.current;
+        if (root === null)
+            return;
+        const title = root.querySelector('[data-screen-title], h1, h2, h3, h4, h5, h6');
+        if (title === null)
+            return;
+        if (title.id === '')
+            title.id = labelId;
+        root.setAttribute('aria-labelledby', title.id);
+    }, [open, labelId]);
+    if (!open && !leaving)
+        return null;
+    const surface = (_jsx("div", { ref: ref, className: props.className, "data-presentation": props.presentation, ...(leaving ? { 'data-leaving': '' } : {}), ...(behaviour.trapFocus ? { role: 'dialog', 'aria-modal': true } : {}), ...(props.presentation === 'toast' ? { role: 'status', 'aria-live': 'polite' } : {}), children: props.children }));
+    const content = behaviour.backdrop ? (_jsxs(_Fragment, { children: [_jsx("div", { "data-backdrop": "true", "aria-hidden": "true" }), surface] })) : (surface);
+    if (!behaviour.portal)
+        return content;
+    return createPortal(content, document.body);
+}

package/dist/ui/provider.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+import { type UiConfig } from './wrappers.tsx';
+export interface ThreadUiProps {
+    readonly children: ReactNode;
+    readonly palette?: {
+        readonly accent: string;
+        readonly surface: string;
+    };
+    readonly mode?: 'light' | 'dark';
+    readonly locale?: string;
+    readonly wording?: Readonly<Record<string, Readonly<Record<string, string>>>>;
+    readonly actor?: {
+        readonly id: string | null;
+        readonly roles: readonly string[];
+        readonly entitlements: readonly string[];
+    };
+    readonly asking?: readonly {
+        readonly id: string;
+        readonly selector: string;
+    }[];
+    readonly platform?: string;
+    readonly telemetry?: {
+        readonly endpoint?: string;
+        readonly allowed: () => boolean;
+        readonly sample?: number;
+    };
+    readonly dispatch?: (name: string, input?: Readonly<Record<string, unknown>>) => Promise<unknown>;
+    readonly navigateTo?: (screen: string) => void;
+    readonly config?: UiConfig;
+}
+export declare function ThreadUi(props: ThreadUiProps): ReactNode;

package/dist/ui/provider.js

@@ -0,0 +1,104 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useContext, useEffect, useMemo, useSyncExternalStore } from 'react';
+import { en } from "./i18n/catalogs/en.js";
+import { createTranslator } from "./i18n/translator.js";
+import { EDGE_SCROLL_DEFAULTS } from "./drag.js";
+import { createCollector, INERT_COLLECTOR } from "./collector.js";
+import { Clock, Ticker } from "./door.js";
+import { UiContext, UiProvider } from "./wrappers.js";
+function useMedia(query, fallback) {
+    const subscribe = useCallback((onChange) => {
+        if (typeof globalThis.matchMedia !== 'function')
+            return () => { };
+        const list = globalThis.matchMedia(query);
+        list.addEventListener('change', onChange);
+        return () => list.removeEventListener('change', onChange);
+    }, [query]);
+    const read = useCallback(() => (typeof globalThis.matchMedia === 'function' ? globalThis.matchMedia(query).matches : fallback), [query, fallback]);
+    return useSyncExternalStore(subscribe, read, () => fallback);
+}
+function readPalette() {
+    if (typeof globalThis.getComputedStyle !== 'function' || typeof globalThis.document !== 'object') {
+        return { accent: '', surface: '' };
+    }
+    const style = globalThis.getComputedStyle(globalThis.document.documentElement);
+    const read = (name) => style.getPropertyValue(name).trim();
+    return {
+        accent: read('--thread-palette-accent'),
+        surface: read('--thread-palette-surface'),
+    };
+}
+function readEdgeScroll() {
+    if (typeof globalThis.getComputedStyle !== 'function' || typeof globalThis.document !== 'object')
+        return { ...EDGE_SCROLL_DEFAULTS };
+    const style = globalThis.getComputedStyle(globalThis.document.documentElement);
+    const read = (name, fallback) => {
+        const value = Number.parseFloat(style.getPropertyValue(name));
+        return Number.isFinite(value) ? value : fallback;
+    };
+    return {
+        band: read('--thread-edge-scroll-band', EDGE_SCROLL_DEFAULTS.band),
+        speed: read('--thread-edge-scroll-speed', EDGE_SCROLL_DEFAULTS.speed),
+    };
+}
+export function ThreadUi(props) {
+    const existing = useContext(UiContext);
+    const opinionated = props.mode !== undefined ||
+        props.locale !== undefined ||
+        props.palette !== undefined ||
+        props.platform !== undefined ||
+        props.telemetry !== undefined ||
+        props.wording !== undefined ||
+        props.config !== undefined;
+    const prefersDark = useMedia('(prefers-color-scheme: dark)', false);
+    const reduceMotion = useMedia('(prefers-reduced-motion: reduce)', false);
+    const appearance = {
+        mode: props.mode ?? (prefersDark ? 'dark' : 'light'),
+        reduceMotion,
+    };
+    const language = props.locale ?? 'en';
+    const translate = useMemo(() => {
+        const held = props.wording?.[language];
+        if (props.wording !== undefined && held === undefined) {
+            throw new Error(`This app was handed wording and none of it is in "${language}". It has ` +
+                `${Object.keys(props.wording).sort().join(', ')} — declare the language in ` +
+                '`_threads/localizations.ts` and run `thread i18n`, or ask for one it is in.');
+        }
+        return createTranslator(held ?? en, { locale: language });
+    }, [language, props.wording]);
+    const clock = useMemo(() => new Clock(), []);
+    const ticker = useMemo(() => new Ticker(), []);
+    const telemetryOff = props.telemetry === undefined;
+    const collector = useMemo(() => {
+        if (props.telemetry === undefined)
+            return INERT_COLLECTOR;
+        return createCollector({
+            endpoint: props.telemetry.endpoint ?? '/obs/client',
+            allowed: props.telemetry.allowed,
+            ...(props.telemetry.sample === undefined ? {} : { sample: props.telemetry.sample }),
+            ...(typeof navigator === 'object' && typeof navigator.sendBeacon === 'function'
+                ? { beacon: (url, body) => navigator.sendBeacon(url, new Blob([body], { type: 'application/json' })) }
+                : {}),
+        });
+    }, [telemetryOff, props.telemetry?.endpoint, props.telemetry?.sample, props.telemetry?.allowed]);
+    useEffect(() => () => collector.stop(), [collector]);
+    const derived = useMemo(() => ({
+        palette: props.palette ?? readPalette(),
+        appearance,
+        clock,
+        ticker,
+        now: () => Date.now(),
+        edgeScroll: readEdgeScroll(),
+        ...(props.actor === undefined ? {} : { actor: props.actor }),
+        ...(props.asking === undefined ? {} : { asking: props.asking }),
+        ...(props.platform === undefined ? {} : { platform: props.platform }),
+        ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }),
+        ...(props.navigateTo === undefined ? {} : { navigateTo: props.navigateTo }),
+        collector,
+        translate: (key, params) => translate(key, params),
+    }), [props.actor, props.asking, props.palette, props.platform, props.dispatch, props.navigateTo, appearance.mode, appearance.reduceMotion, clock, ticker, collector, translate]);
+    if (existing !== null && !opinionated)
+        return props.children;
+    return _jsx(UiProvider, { config: props.config ?? derived, children: props.children });
+}

package/dist/ui/render-loop.d.ts

@@ -0,0 +1,12 @@
+export interface RenderLoop {
+    readonly component: string;
+    readonly renders: number;
+    readonly withinMs: number;
+    readonly unstable: readonly string[];
+    readonly differing: readonly string[];
+}
+export declare class RenderLoopError extends Error {
+    readonly loop: RenderLoop;
+    constructor(loop: RenderLoop);
+}
+export declare function useRenderLoopDetector(component: string, props: Record<string, unknown>): void;

package/dist/ui/render-loop.js

@@ -0,0 +1,94 @@
+'use client';
+import { useRef } from 'react';
+const RENDER_LIMIT = 40;
+const WINDOW_MS = 1000;
+const COMPARE_DEPTH = 3;
+function armed() {
+    return process.env.NODE_ENV !== 'production';
+}
+export class RenderLoopError extends Error {
+    loop;
+    constructor(loop) {
+        super(describe(loop));
+        this.name = 'RenderLoopError';
+        this.loop = loop;
+    }
+}
+function describe(loop) {
+    const head = `${loop.component} rendered ${loop.renders} times in ${loop.withinMs}ms, which is a render loop.`;
+    if (loop.unstable.length > 0) {
+        const props = loop.unstable.join(', ');
+        return (`${head} ${props} arrived with a new identity every render while its value stayed equal, so ` +
+            `every render caused the next one. Return the same object for the same answer — that is the ` +
+            `read layer's job (ADR-180 rule 10), not the component's — or compute the value inside render ` +
+            `instead of syncing it into state from an effect (rule 11).`);
+    }
+    if (loop.differing.length > 0) {
+        return (`${head} ${loop.differing.join(', ')} changed VALUE on every render, so this is not an identity ` +
+            `problem: something is writing during render. Move the write to an event or an action.`);
+    }
+    return (`${head} No prop changed at all, so the re-render comes from state or context inside the ` +
+        `component — look for a setter called from an effect body (ADR-180 rule 11).`);
+}
+function equalValue(a, b, depth = 0) {
+    if (Object.is(a, b))
+        return true;
+    if (depth >= COMPARE_DEPTH)
+        return false;
+    if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null)
+        return false;
+    if (Array.isArray(a) || Array.isArray(b)) {
+        if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length)
+            return false;
+        return a.every((item, index) => equalValue(item, b[index], depth + 1));
+    }
+    const left = a;
+    const right = b;
+    const keys = Object.keys(left);
+    if (keys.length !== Object.keys(right).length)
+        return false;
+    return keys.every((key) => key in right && equalValue(left[key], right[key], depth + 1));
+}
+function compare(previous, next) {
+    const unstable = [];
+    const differing = [];
+    for (const key of [...new Set([...Object.keys(previous), ...Object.keys(next)])].sort()) {
+        if (Object.is(previous[key], next[key]))
+            continue;
+        if (equalValue(previous[key], next[key]))
+            unstable.push(key);
+        else
+            differing.push(key);
+    }
+    return { unstable, differing };
+}
+export function useRenderLoopDetector(component, props) {
+    const renders = useRef(0);
+    const openedAt = useRef(0);
+    const previous = useRef(undefined);
+    const tripped = useRef(undefined);
+    if (armed()) {
+        if (tripped.current !== undefined)
+            throw new RenderLoopError(tripped.current);
+        const now = Date.now();
+        const elapsed = now - openedAt.current;
+        if (openedAt.current === 0 || elapsed > WINDOW_MS) {
+            openedAt.current = now;
+            renders.current = 0;
+        }
+        renders.current += 1;
+        if (renders.current > RENDER_LIMIT) {
+            const loop = {
+                component,
+                renders: renders.current,
+                withinMs: now - openedAt.current,
+                ...compare(previous.current ?? {}, props),
+            };
+            tripped.current = loop;
+            renders.current = 0;
+            openedAt.current = now;
+            throw new RenderLoopError(loop);
+        }
+    }
+    previous.current = props;
+}

package/dist/ui/roving-focus.d.ts

@@ -0,0 +1,15 @@
+import { type RefObject } from 'react';
+export declare const ITEM_ATTR = "data-roving-item";
+export interface RovingOptions {
+    readonly orientation: 'vertical' | 'horizontal';
+    readonly wrap?: boolean;
+    readonly active?: boolean;
+}
+interface Item {
+    readonly element: HTMLElement;
+    readonly disabled: boolean;
+    readonly text: string;
+}
+export declare function typeaheadMatch(list: readonly Item[], buffer: string, current: number): number;
+export declare function useRovingFocus(ref: RefObject<HTMLElement | null>, options: RovingOptions): void;
+export {};

package/dist/ui/roving-focus.js

@@ -0,0 +1,143 @@
+'use client';
+import { useCallback, useEffect, useRef } from 'react';
+export const ITEM_ATTR = 'data-roving-item';
+function items(root) {
+    if (root === null)
+        return [];
+    return [...root.querySelectorAll(`[${ITEM_ATTR}]`)].map((element) => ({
+        element,
+        disabled: element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true',
+        text: (element.textContent ?? '').trim().toLowerCase(),
+    }));
+}
+function step(list, from, direction, wrap) {
+    const count = list.length;
+    if (count === 0)
+        return -1;
+    let index = from;
+    for (let moved = 0; moved < count; moved += 1) {
+        const next = index + direction;
+        if (next < 0 || next >= count) {
+            if (!wrap)
+                return from;
+            index = direction === 1 ? 0 : count - 1;
+        }
+        else {
+            index = next;
+        }
+        if (!list[index].disabled)
+            return index;
+    }
+    return from;
+}
+function firstEnabled(list, from = 0) {
+    for (let i = from; i < list.length; i += 1)
+        if (!list[i].disabled)
+            return i;
+    return -1;
+}
+function lastEnabled(list) {
+    for (let i = list.length - 1; i >= 0; i -= 1)
+        if (!list[i].disabled)
+            return i;
+    return -1;
+}
+function isRtl(element) {
+    const declared = element.closest('[dir]')?.getAttribute('dir')?.toLowerCase();
+    if (declared === 'rtl')
+        return true;
+    if (declared === 'ltr')
+        return false;
+    return getComputedStyle(element).direction === 'rtl';
+}
+const TYPEAHEAD_MS = 1000;
+export function typeaheadMatch(list, buffer, current) {
+    const enabled = list.map((item, index) => ({ item, index })).filter(({ item }) => !item.disabled);
+    if (enabled.length === 0 || buffer.length === 0)
+        return -1;
+    const repeated = buffer.length > 1 && [...buffer].every((c) => c === buffer[0]);
+    const prefix = repeated ? buffer[0] : buffer;
+    const startAt = enabled.findIndex(({ index }) => index === current);
+    for (let i = 0; i < enabled.length; i += 1) {
+        const candidate = enabled[(startAt + 1 + i) % enabled.length];
+        if (candidate.item.text.startsWith(prefix))
+            return candidate.index;
+    }
+    return -1;
+}
+export function useRovingFocus(ref, options) {
+    const { orientation, wrap = false, active = true } = options;
+    const indexRef = useRef(0);
+    const bufferRef = useRef('');
+    const timerRef = useRef(undefined);
+    const applyTabIndex = useCallback((list, index) => {
+        list.forEach((item, i) => {
+            item.element.setAttribute('tabindex', i === index ? '0' : '-1');
+        });
+    }, []);
+    useEffect(() => {
+        if (!active)
+            return;
+        const root = ref.current;
+        if (root === null)
+            return;
+        const list = items(root);
+        const start = firstEnabled(list);
+        indexRef.current = start === -1 ? 0 : start;
+        applyTabIndex(list, indexRef.current);
+        const move = (to) => {
+            const current = items(root);
+            if (to < 0 || to >= current.length)
+                return;
+            indexRef.current = to;
+            applyTabIndex(current, to);
+            current[to].element.focus();
+        };
+        const onKeyDown = (event) => {
+            const current = items(root);
+            if (current.length === 0)
+                return;
+            const rtl = isRtl(root);
+            const forward = orientation === 'horizontal' ? (rtl ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown';
+            const backward = orientation === 'horizontal' ? (rtl ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp';
+            if (event.key === forward) {
+                event.preventDefault();
+                move(step(current, indexRef.current, 1, wrap));
+                return;
+            }
+            if (event.key === backward) {
+                event.preventDefault();
+                move(step(current, indexRef.current, -1, wrap));
+                return;
+            }
+            if (event.key === 'Home') {
+                event.preventDefault();
+                move(firstEnabled(current));
+                return;
+            }
+            if (event.key === 'End') {
+                event.preventDefault();
+                move(lastEnabled(current));
+                return;
+            }
+            if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey)
+                return;
+            event.preventDefault();
+            bufferRef.current += event.key.toLowerCase();
+            if (timerRef.current !== undefined)
+                clearTimeout(timerRef.current);
+            timerRef.current = setTimeout(() => {
+                bufferRef.current = '';
+            }, TYPEAHEAD_MS);
+            const found = typeaheadMatch(current, bufferRef.current, indexRef.current);
+            if (found !== -1)
+                move(found);
+        };
+        root.addEventListener('keydown', onKeyDown);
+        return () => {
+            root.removeEventListener('keydown', onKeyDown);
+            if (timerRef.current !== undefined)
+                clearTimeout(timerRef.current);
+        };
+    }, [active, orientation, wrap, ref, applyTabIndex]);
+}

package/dist/ui/screens.d.ts

@@ -0,0 +1,17 @@
+import type { Threaded } from '@prestack/thread/core/thread';
+export declare const declares: readonly Threaded[];
+export declare const SCREENS: Threaded & {
+    readonly files: string;
+};
+export declare function nameOf(at: string): string;
+export declare const PAGE: "page";
+export declare function presentedIn(source: string): string;
+export declare function routeFor(id: string, entry: boolean): string;
+export declare function pageAt(route: string): string;
+export declare function entryAmong(rows: readonly {
+    readonly id: string;
+}[], shownAs: (id: string) => string): string | undefined;
+export declare function seeds(rows: readonly Threaded[], held: (at: string) => boolean): readonly {
+    readonly path: string;
+    readonly content: string;
+}[];

package/dist/ui/screens.js

@@ -0,0 +1,112 @@
+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, writeFileSync } from 'node:fs';
+import { basename, dirname, join } from 'node:path';
+import { stdout } from 'node:process';
+import { pathToFileURL } from 'node:url';
+import { exit, invoked } from "@prestack/thread/core/invoked";
+import { findTree, inTree } from "@prestack/thread/core/tree";
+import { undeclared } from "./compositions.js";
+import { PRESENTATIONS } from "./door.js";
+const here = 'thread/ui/screens.ts';
+const said = [
+    {
+        on: '2026-08-25',
+        said: 'Screens are basically compositions arranged in a screen. And this is where we have breakpoint, etc. Compositions maybe also have breakpoints.',
+    },
+    {
+        on: '2026-08-25',
+        said: 'Arrangement is a real fucking thing. IT IS HOW THE STUFF LOOKS IN A SCREEN',
+    },
+    {
+        on: '2026-08-25',
+        said: 'Both',
+    },
+    {
+        on: '2026-09-09',
+        said: 'We have one screen or more. A button navigates to other screen. From THAT the routes are generated.',
+    },
+];
+export const declares = [];
+export const SCREENS = {
+    id: 'screen',
+    at: here,
+    files: 'screens/scr_*.tsx',
+    describes: 'Compositions arranged, and the way it is presented: page, sheet, popover, overlay or toast. Where it lives is never typed. The first page an app declares answers `/`, every other page answers its own name, and a sheet, popover, overlay or toast has no route, because a press opens it where somebody already is. The arrangement is the whole of what a screen adds, because how things sit on a screen is declared rather than markup written twice. Each row names a file prefixed `scr_`, sets the properties that lay its compositions out, and may set them differently under a mode, which is where a breakpoint lives: a width is a media query the same way dark is. A composition may set its own arrangement too. The framework ships none, because what an app is made of is the app’s, and this row says what a screen is, never what is inside it.',
+    version: 1,
+    cites: said,
+    declares,
+};
+const PASCAL = (id) => id
+    .split(/[-_]/)
+    .map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`)
+    .join('');
+export function nameOf(at) {
+    const file = at.split('\\').join('/').split('/').at(-1) ?? at;
+    return PASCAL(file.replace(/^scr_/, '').replace(/\.[^.]+$/, ''));
+}
+export const PAGE = PRESENTATIONS[0];
+const PRESENTED = /screen\(\s*'[^']*'\s*,\s*\{[^}]*as:\s*'([^']*)'/;
+export function presentedIn(source) {
+    return PRESENTED.exec(source)?.[1] ?? PAGE;
+}
+export function routeFor(id, entry) {
+    return entry ? '/' : `/${id}`;
+}
+export function pageAt(route) {
+    const trimmed = route.replace(/^\/+|\/+$/g, '');
+    return trimmed === '' ? `app/page.${'tsx'}` : `app/${trimmed}/page.${'tsx'}`;
+}
+export function entryAmong(rows, shownAs) {
+    return rows.find((row) => shownAs(row.id) === PAGE)?.id;
+}
+function starter(row) {
+    const name = nameOf(row.at);
+    return `'use client'
+
+import { screen } from './wrappers.tsx'
+
+export const ${name} = screen('${row.id}', {}, () => (
+  <>
+  </>
+))
+`;
+}
+export function seeds(rows, held) {
+    return rows.filter((row) => !held(row.at)).map((row) => ({ path: row.at, content: starter(row) }));
+}
+async function run() {
+    const tree = findTree();
+    const at = inTree(tree, 'screens.ts');
+    if (!existsSync(at)) {
+        stdout.write(`thread: this tree has no ${tree.name}/${basename(at)}, so it declares no screen and there is nothing to seed or check.\n`);
+        return 0;
+    }
+    const held = (await import(__rewriteRelativeImportExtension(pathToFileURL(at).href)));
+    if (held.SCREEN === undefined) {
+        stdout.write(`thread: ${tree.name}/screens.ts exports no \`SCREEN\`, so nothing declares a screen here.\n`);
+        return 1;
+    }
+    const rows = held.SCREEN.declares ?? [];
+    const made = seeds(rows, (where) => existsSync(join(tree.at, where)));
+    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 loose = await undeclared(tree, rows);
+    for (const one of loose)
+        stdout.write(`thread: ${one}\n`);
+    stdout.write(`thread: ${String(rows.length)} screen(s) declared, ${String(made.length)} seeded, ` +
+        `${String(rows.length - made.length)} already written, ` +
+        `${loose.length === 0 ? 'none reaching anything undeclared' : `${String(loose.length)} reaching something undeclared`}\n`);
+    return loose.length === 0 ? 0 : 1;
+}
+if (invoked(import.meta.url))
+    exit(await run());

package/dist/ui/scroll-lock.d.ts

@@ -0,0 +1,2 @@
+export declare function lockScroll(): () => void;
+export declare function scrollLocks(): number;