@prestack/thread-ui 0.0.1

package/dist/ui/elements/hit-box.works.js

@@ -0,0 +1,451 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { gestureFor, gestureNames, holds as declared, recognise } from "../signals.js";
+import { useCallback, useEffect, useId, useRef, useState, useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+import { accepted, beginDrag, claimGesture, collect, currentLayout, dragSession, dragStatusOf, dwell, endDrag, innermostTarget, moveDrag, pullEdges, registerTarget, releaseGesture, subscribeDrag, } from "../drag.js";
+import { measured, placed } from "../charts.js";
+import { nameOf } from "../token.js";
+import { useUi } from "../wrappers.js";
+const held = (row) => `var(${nameOf(row)})`;
+const TOUCH_ACTION = {
+    x: 'touch-down',
+    y: 'touch-across',
+    both: 'touch-own',
+};
+const wallClock = () => (typeof performance === 'object' ? performance.now() : Date.now()) / 1000;
+const settleMs = () => {
+    if (typeof document !== 'object')
+        return 0;
+    const said = getComputedStyle(document.documentElement).getPropertyValue('--motion-normal').trim();
+    const ms = /^([\d.]+)ms$/.exec(said);
+    if (ms !== null)
+        return Number(ms[1]);
+    const seconds = /^([\d.]+)s$/.exec(said);
+    return seconds === null ? 0 : Number(seconds[1]) * 1000;
+};
+const SWING_AT = 220;
+const SWING_MAX = 12;
+const STIFFNESS = 180;
+const DAMPING = 14;
+const SETTLED = 0.05;
+const EMPTY = {};
+export function uses(props) {
+    const id = useId();
+    const { edgeScroll: pull } = useUi();
+    const claimed = gestureFor(props.gesture);
+    if (claimed === undefined) {
+        throw new Error(`<HitBox gesture="${props.gesture}"> — nothing registered that gesture, so this region would ` +
+            `take the pointer and do nothing. Registered: ${gestureNames().join(' · ')}. Contribute one with defineGesture.`);
+    }
+    const [down, setDown] = useState(false);
+    const [phase, setPhase] = useState('idle');
+    const [produced, setProduced] = useState({});
+    const released = useRef(Number.NEGATIVE_INFINITY);
+    const took = useRef(null);
+    const [pointer, setPointer] = useState(null);
+    const [settling, setSettling] = useState(false);
+    const speed = useRef(0);
+    const moved = useRef(0);
+    const [lean, setLean] = useState(0);
+    const leanSpeed = useRef(0);
+    const lastTick = useRef(0);
+    const grabbed = useRef(props.grabs);
+    grabbed.current = props.grabs;
+    const grabsKey = props.grabs === undefined ? '' : JSON.stringify(props.grabs);
+    const tuned = useRef(props.tuning);
+    tuned.current = props.tuning;
+    const tuningKey = props.tuning === undefined ? '' : JSON.stringify(props.tuning);
+    const node = useRef(null);
+    const clockNow = useRef(0);
+    const wants = props.gesture === 'pinch' || props.gesture === 'rotate';
+    const synthesised = useRef(null);
+    useEffect(() => {
+        const surfaceNode = node.current;
+        if (!wants || surfaceNode === null)
+            return undefined;
+        const SPAN = 100;
+        const put = (scale, radians) => {
+            const box = surfaceNode.getBoundingClientRect();
+            const cx = box.left + box.width / 2;
+            const cy = box.top + box.height / 2;
+            const reach = (SPAN / 2) * scale;
+            const dxr = Math.cos(radians) * reach;
+            const dyr = Math.sin(radians) * reach;
+            tracked.current.set(-1, { id: -1, x: cx + dxr, y: cy + dyr, startX: cx + SPAN / 2, startY: cy, startT: clockNow.current, down: true });
+            tracked.current.set(-2, { id: -2, x: cx - dxr, y: cy - dyr, startX: cx - SPAN / 2, startY: cy, startT: clockNow.current, down: true });
+            at.current = { x: cx, y: cy };
+            setDown(true);
+            if (synthesised.current !== null)
+                clearTimeout(synthesised.current);
+            synthesised.current = window.setTimeout(() => {
+                tracked.current.delete(-1);
+                tracked.current.delete(-2);
+                setDown(false);
+                releaseGesture(id);
+                setPhase('idle');
+                setProduced(EMPTY);
+            }, 140);
+        };
+        let scale = 1;
+        let radians = 0;
+        const onWheel = (e) => {
+            if (!e.ctrlKey)
+                return;
+            e.preventDefault();
+            scale = Math.min(4, Math.max(0.25, scale * Math.exp(-e.deltaY / 100)));
+            put(scale, radians);
+        };
+        const onGesture = (e) => {
+            const held = e;
+            e.preventDefault();
+            scale = held.scale ?? scale;
+            radians = ((held.rotation ?? 0) * Math.PI) / 180;
+            put(scale, radians);
+        };
+        surfaceNode.addEventListener('wheel', onWheel, { passive: false });
+        surfaceNode.addEventListener('gesturechange', onGesture);
+        return () => {
+            surfaceNode.removeEventListener('wheel', onWheel);
+            surfaceNode.removeEventListener('gesturechange', onGesture);
+            if (synthesised.current !== null)
+                clearTimeout(synthesised.current);
+        };
+    }, [wants, id]);
+    const tracked = useRef(new Map());
+    const at = useRef({ x: 0, y: 0 });
+    const lastFrame = useRef(0);
+    const key = props.accepts?.join(',') ?? '';
+    const status = useSyncExternalStore(subscribeDrag, useCallback(() => dragStatusOf(id, key === '' ? undefined : key.split(',')), [id, key]), useCallback(() => 'idle', []));
+    const carrying = status === 'carrying';
+    const raises = claimed.raises;
+    return {
+        on: {},
+        pull,
+        animates: down || carrying || settling,
+        holds: [
+            ...(phase === 'active' || phase === 'done'
+                ? declared.filter((one) => raises.some((s) => s.name === one.id)).map((one) => one.id)
+                : []),
+            ...(carrying ? ['carrying'] : []),
+            ...(status === 'over' && dwell() >= (props.dwell ?? 0) ? ['draggedOver'] : []),
+            ...(status === 'refusing' ? ['refusing'] : []),
+        ],
+        id,
+        claimed,
+        down,
+        setDown,
+        phase,
+        setPhase,
+        produced,
+        setProduced,
+        released,
+        took,
+        pointer,
+        setPointer,
+        settling,
+        setSettling,
+        speed,
+        moved,
+        lean,
+        setLean,
+        leanSpeed,
+        lastTick,
+        grabbed,
+        grabsKey,
+        tuned,
+        tuningKey,
+        node,
+        clockNow,
+        wants,
+        synthesised,
+        tracked,
+        at,
+        lastFrame,
+        key,
+        status,
+        carrying,
+        raises,
+    };
+}
+export function wires(props, kept, surface) {
+    const { dispatch: invoke } = useUi();
+    const { pull, id, claimed, down, setDown, phase, setPhase, produced, setProduced, released, took, pointer, setPointer, settling, setSettling, speed, moved, lean, setLean, leanSpeed, lastTick, grabbed, grabsKey, tuned, tuningKey, node, clockNow, wants, synthesised, tracked, at, lastFrame, key, status, carrying, raises } = kept;
+    useEffect(() => {
+        if (!down)
+            return undefined;
+        const give = (e) => {
+            const session = dragSession();
+            if (session?.from === id) {
+                const target = innermostTarget(currentLayout().hitBoxesAt(e.clientX, e.clientY));
+                const finished = endDrag();
+                if (target?.onDrop !== undefined && finished !== undefined && accepted(target.accepts, finished)) {
+                    target.onDrop(finished);
+                }
+            }
+            tracked.current.clear();
+            setDown(false);
+            setPointer(null);
+            took.current = null;
+            releaseGesture(id);
+            setPhase('idle');
+        };
+        const follow = (e) => {
+            advance(e.pointerId, e.clientX, e.clientY);
+        };
+        window.addEventListener('pointermove', follow);
+        window.addEventListener('pointerup', give);
+        window.addEventListener('pointercancel', give);
+        return () => {
+            window.removeEventListener('pointermove', follow);
+            window.removeEventListener('pointerup', give);
+            window.removeEventListener('pointercancel', give);
+        };
+    }, [down, id]);
+    useEffect(() => () => {
+        releaseGesture(id);
+        if (dragSession()?.from === id)
+            endDrag();
+    }, [id]);
+    const onDrop = props.onDrop;
+    const named = props.dispatch;
+    const carriedInput = props.input;
+    const collects = props.collects;
+    useEffect(() => {
+        if (props.accepts === undefined)
+            return undefined;
+        const target = {
+            id,
+            accepts: key.split(','),
+            ...(props.dwell === undefined ? {} : { dwell: props.dwell }),
+            ...(collects === undefined ? {} : { collects: () => collects }),
+            ...(onDrop === undefined && named === undefined
+                ? {}
+                : {
+                    onDrop: (finished) => {
+                        if (onDrop !== undefined)
+                            onDrop();
+                        if (named === undefined)
+                            return;
+                        if (invoke === undefined)
+                            throw new Error(`\`${named}\` cannot be invoked from here — no dispatch is wired`);
+                        void invoke(named, { ...(carriedInput ?? {}), ...(finished.subject[0] ?? {}) });
+                    },
+                }),
+        };
+        return registerTarget(target);
+    }, [id, key, props.accepts, props.dwell, collects, onDrop, named, carriedInput, invoke]);
+    const t = surface.t;
+    clockNow.current = t;
+    useEffect(() => {
+        if (!down)
+            return;
+        const dt = Math.max(0, t - lastFrame.current);
+        lastFrame.current = t;
+        const pointers = [...tracked.current.values()].map((p) => ({
+            id: p.id,
+            x: p.x,
+            y: p.y,
+            startX: p.startX,
+            startY: p.startY,
+            held: t - p.startT,
+            down: p.down,
+        }));
+        const result = recognise(props.gesture, {
+            pointers,
+            t,
+            params: tuned.current ?? {},
+            sinceRelease: wallClock() - released.current,
+        });
+        const takesPointer = grabbed.current !== undefined;
+        const mine = result.phase === 'idle' || !takesPointer ? true : claimGesture(id);
+        setPhase(mine ? result.phase : 'idle');
+        setProduced(mine && result.values !== undefined ? result.values : EMPTY);
+        if (!mine)
+            return;
+        const session = dragSession();
+        if (result.phase !== 'idle' && grabbed.current !== undefined && session === undefined) {
+            beginDrag({ gesture: props.gesture, subject: grabbed.current, from: id, x: at.current.x, y: at.current.y, t });
+            return;
+        }
+        if (session === undefined || session.from !== id)
+            return;
+        const target = innermostTarget(currentLayout().hitBoxesAt(at.current.x, at.current.y));
+        moveDrag({ x: at.current.x, y: at.current.y, ...(target === undefined ? {} : { over: target.id }), t });
+        if (target?.collects !== undefined && dwell() >= (target.dwell ?? 0))
+            collect(target.collects());
+        pullEdges(at.current.x, at.current.y, dt, pull ?? {});
+    }, [down, t, pointer, id, props.gesture, grabsKey, tuningKey, pull]);
+    useEffect(() => {
+        if (phase !== 'done')
+            return undefined;
+        const frame = requestAnimationFrame(() => {
+            releaseGesture(id);
+            setPhase('idle');
+            setProduced(EMPTY);
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [phase, id]);
+    const onPointerDown = (e) => {
+        if (grabbed.current !== undefined) {
+            e.currentTarget.setPointerCapture?.(e.pointerId);
+            e.preventDefault();
+        }
+        const box = e.currentTarget.getBoundingClientRect();
+        setPointer({ x: e.clientX, y: e.clientY });
+        took.current =
+            box.width > 0 && box.height > 0
+                ? { width: box.width, height: box.height, gripX: e.clientX - box.left, gripY: e.clientY - box.top }
+                : null;
+        speed.current = 0;
+        moved.current = wallClock();
+        tracked.current.set(e.pointerId, { id: e.pointerId, x: e.clientX, y: e.clientY, startX: e.clientX, startY: e.clientY, startT: t, down: true });
+        at.current = { x: e.clientX, y: e.clientY };
+        lastFrame.current = t;
+        setDown(true);
+    };
+    const advance = (pointerId, x, y) => {
+        const p = tracked.current.get(pointerId);
+        if (p === undefined)
+            return;
+        if (p.x === x && p.y === y)
+            return;
+        const e = { pointerId, clientX: x, clientY: y };
+        const at2 = wallClock();
+        const dt = Math.max(1 / 240, at2 - moved.current);
+        const raw = (e.clientX - p.x) / dt;
+        speed.current = speed.current * 0.7 + raw * 0.3;
+        moved.current = at2;
+        p.x = e.clientX;
+        p.y = e.clientY;
+        at.current = { x: e.clientX, y: e.clientY };
+        setPointer({ x: e.clientX, y: e.clientY });
+    };
+    const onPointerMove = (e) => {
+        advance(e.pointerId, e.clientX, e.clientY);
+    };
+    const finish = (e, cancelled) => {
+        const p = tracked.current.get(e.pointerId);
+        if (p !== undefined) {
+            p.x = e.clientX;
+            p.y = e.clientY;
+            p.down = false;
+            at.current = { x: e.clientX, y: e.clientY };
+        }
+        const session = dragSession();
+        if (session?.from === id) {
+            const target = cancelled ? undefined : innermostTarget(currentLayout().hitBoxesAt(e.clientX, e.clientY));
+            const finished = endDrag();
+            if (target?.onDrop !== undefined && finished !== undefined && accepted(target.accepts, finished)) {
+                target.onDrop(finished);
+            }
+            releaseGesture(id);
+            speed.current = 0;
+        }
+        const last = p !== undefined && tracked.current.size === 1 && !cancelled ? p : undefined;
+        let completed = false;
+        if (last !== undefined) {
+            const result = recognise(props.gesture, {
+                pointers: [
+                    { id: last.id, x: last.x, y: last.y, startX: last.startX, startY: last.startY, held: t - last.startT, down: false },
+                ],
+                t,
+                params: props.tuning ?? {},
+                sinceRelease: wallClock() - released.current,
+            });
+            if (result.phase !== 'idle' && claimGesture(id)) {
+                setPhase(result.phase);
+                setProduced(result.values ?? EMPTY);
+                completed = true;
+            }
+        }
+        tracked.current.delete(e.pointerId);
+        if (tracked.current.size === 0) {
+            setDown(false);
+            releaseGesture(id);
+            setPointer(null);
+            took.current = null;
+            if (!completed)
+                setPhase('idle');
+            if (!cancelled)
+                released.current = wallClock();
+        }
+    };
+    const session = dragSession();
+    const mine = carrying && session !== undefined && session.from === id;
+    useEffect(() => {
+        if (!mine && !settling) {
+            lastTick.current = t;
+            return;
+        }
+        const step = Math.min(1 / 20, Math.max(0, t - lastTick.current));
+        lastTick.current = t;
+        if (step === 0)
+            return;
+        const target = mine ? Math.max(-SWING_MAX, Math.min(SWING_MAX, speed.current / SWING_AT)) : 0;
+        const force = -STIFFNESS * (lean - target) - DAMPING * leanSpeed.current;
+        const next = lean + leanSpeed.current * step;
+        leanSpeed.current += force * step;
+        if (!mine && Math.abs(next) < SETTLED && Math.abs(leanSpeed.current) < SETTLED) {
+            leanSpeed.current = 0;
+            if (lean !== 0)
+                setLean(0);
+            return;
+        }
+        setLean(next);
+    }, [t, mine, settling, lean]);
+    useEffect(() => {
+        if (mine) {
+            setSettling(true);
+            return undefined;
+        }
+        if (!settling)
+            return undefined;
+        if (Math.abs(lean) < SETTLED && Math.abs(leanSpeed.current) < SETTLED) {
+            const timer = setTimeout(() => setSettling(false), settleMs());
+            return () => clearTimeout(timer);
+        }
+        return undefined;
+    }, [mine, settling, lean]);
+    const swing = lean;
+    useEffect(() => {
+        if (!mine)
+            return undefined;
+        const root = document.documentElement;
+        const was = root.style.userSelect;
+        root.style.userSelect = held('picking-off');
+        return () => {
+            root.style.userSelect = was;
+        };
+    }, [mine]);
+    const travels = props.moves !== false;
+    const flying = mine && travels && took.current !== null && pointer !== null;
+    const layer = flying && took.current !== null && pointer !== null ? (_jsx("div", { "aria-hidden": true, className: placed('hit-box', 'carried'), style: measured({
+            width: `${String(took.current.width)}px`,
+            height: `${String(took.current.height)}px`,
+            carry: `translate3d(${String(pointer.x - took.current.gripX)}px, ${String(pointer.y - took.current.gripY)}px, 0)` +
+                ' var(--transform-carried, scale(1)) var(--transform-carried-turn, rotate(0deg))' +
+                ` rotate(${swing.toFixed(2)}deg)`,
+            grip: `${took.current.gripX.toFixed(1)}px ${took.current.gripY.toFixed(1)}px`,
+        }), children: props.children })) : null;
+    return {
+        on: {
+            ref: node,
+            'data-hitbox': id,
+            style: measured({
+                touch: held(props.grabs === undefined ? 'touch-page' : (TOUCH_ACTION[(props.axis ?? 'both')] ?? 'touch-own')),
+                pick: held(props.grabs === undefined ? 'picking-open' : 'picking-off'),
+                shown: held(flying ? 'visibility-hidden' : 'visibility-shown'),
+                flow: held(flying ? 'position-lifted' : 'position-flow'),
+            }),
+            onPointerDown,
+            onPointerMove,
+            onPointerUp: (e) => finish(e, false),
+            onPointerCancel: (e) => finish(e, true),
+        },
+        layer,
+    };
+}
+export function shown(_props, _surface, _kept, wired) {
+    return { carried: wired.layer === null ? null : createPortal(wired.layer, document.body) };
+}

package/dist/ui/elements/image.d.ts

@@ -0,0 +1,10 @@
+import type { MessageKey } from '../content.tsx';
+import { type Element } from '../wrappers.tsx';
+export interface ImageProps {
+    readonly src: string;
+    readonly altKey: MessageKey;
+    readonly dispatch?: string;
+    readonly input?: Readonly<Record<string, unknown>>;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const Image: Element<'Image', ImageProps>;

package/dist/ui/elements/image.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { roleClass } from "../fonts.js";
+import { element, useSurface } from "../wrappers.js";
+export const Image = element('Image', (props, className) => {
+    const surface = useSurface({ className: roleClass(undefined, className),
+        invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, });
+    return (_jsx("img", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, src: props.src, alt: surface.text(props.altKey) }));
+}, 'e-image');

package/dist/ui/elements/line-chart.d.ts

@@ -0,0 +1,13 @@
+import type { MessageKey } from '../content.tsx';
+import type { Row } from '../charts.tsx';
+import { type Element } from '../wrappers.tsx';
+export interface LineChartProps {
+    readonly rows: readonly Row[];
+    readonly by?: string;
+    readonly value: string;
+    readonly titleKey?: MessageKey;
+    readonly dispatch?: string;
+    readonly input?: Readonly<Record<string, unknown>>;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const LineChart: Element<'LineChart', LineChartProps>;

package/dist/ui/elements/line-chart.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { roleClass } from "../fonts.js";
+import { element, useSurface } from "../wrappers.js";
+import { Each } from "./each.js";
+import { drawing, lines, uses } from "./line-chart.works.js";
+export const LineChart = element('LineChart', (props, className) => {
+    const kept = uses(props);
+    const surface = useSurface({ className: roleClass(undefined, className),
+        invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
+        holds: [
+            ...(kept.holds ?? []),
+        ],
+        ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
+    return (_jsx("svg", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), role: "img", ...(props.titleKey === undefined ? {} : { 'aria-label': surface.text(props.titleKey) }), children: _jsx(Each, { rows: lines(props, kept), by: 'group', children: (each0, at) => (_jsx("polyline", { ...drawing(props, kept, each0, at) })) }) }));
+}, 'e-line-chart');

package/dist/ui/elements/line-chart.works.d.ts

@@ -0,0 +1,12 @@
+import { type Row } from '../charts.tsx';
+import type { LineChartProps } from './line-chart.tsx';
+export declare function lines(props: LineChartProps, _kept?: unknown): readonly Row[];
+export declare function uses(props: LineChartProps): {
+    readonly holds?: readonly string[];
+    readonly animates?: boolean;
+    readonly on?: Readonly<Record<string, unknown>>;
+    readonly ramp: readonly string[];
+};
+export declare function drawing(props: LineChartProps, kept: {
+    readonly ramp: readonly string[];
+}, row: Row, at: number): Readonly<Record<string, string | number>>;

package/dist/ui/elements/line-chart.works.js

@@ -0,0 +1,27 @@
+import { seriesColour } from "../series.js";
+import { num, polyline, str, useRamp } from "../charts.js";
+const WIDE = 300;
+const TALL = 120;
+export function lines(props, _kept) {
+    if (props.by === undefined)
+        return [{ group: '' }];
+    return [...new Set(props.rows.map((one) => str(one, props.by)))].map((group) => ({ group }));
+}
+export function uses(props) {
+    const ramp = useRamp(lines(props).length);
+    return {
+        ...(props.rows.length === 0 ? { holds: ['empty'] } : {}),
+        on: { viewBox: `0 0 ${String(WIDE)} ${String(TALL)}` },
+        ramp,
+    };
+}
+export function drawing(props, kept, row, at) {
+    const group = str(row, 'group');
+    const mine = props.rows.filter((one) => props.by === undefined || str(one, props.by) === group);
+    return {
+        points: polyline(mine.map((one) => num(one, props.value)), WIDE, TALL),
+        fill: 'none',
+        stroke: seriesColour(kept.ramp, at),
+        strokeWidth: 2,
+    };
+}

package/dist/ui/elements/link.d.ts

@@ -0,0 +1,12 @@
+import type { MessageKey } from '../content.tsx';
+import { type FontRoleId } from '../fonts.ts';
+import { type Element } from '../wrappers.tsx';
+export interface LinkProps {
+    readonly navigateTo: string;
+    readonly labelKey: MessageKey;
+    readonly is?: FontRoleId;
+    readonly dispatch?: string;
+    readonly input?: Readonly<Record<string, unknown>>;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const Link: Element<'Link', LinkProps>;

package/dist/ui/elements/link.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { roleClass } from "../fonts.js";
+import { element, useSurface } from "../wrappers.js";
+import { uses } from "./link.works.js";
+export const Link = element('Link', (props, className) => {
+    const kept = uses(props);
+    const surface = useSurface({ className: roleClass(props.is, className),
+        invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
+        holds: [
+            ...(kept.holds ?? []),
+        ],
+        ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
+    return (_jsx("a", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), children: surface.text(props.labelKey) }));
+}, 'e-link');

package/dist/ui/elements/link.works.d.ts

@@ -0,0 +1,10 @@
+import type { MouseEvent } from 'react';
+import type { LinkProps } from './link.tsx';
+export declare function uses(props: LinkProps): {
+    readonly holds?: readonly string[];
+    readonly animates?: boolean;
+    readonly on: {
+        readonly href: string;
+        readonly onClick: (event: MouseEvent<HTMLAnchorElement>) => void;
+    };
+};

package/dist/ui/elements/link.works.js

@@ -0,0 +1,15 @@
+import { usePress } from "../wrappers.js";
+export function uses(props) {
+    const press = usePress({ navigateTo: props.navigateTo }, { element: 'Link', name: props.labelKey });
+    return {
+        on: {
+            href: `#${props.navigateTo}`,
+            onClick: (event) => {
+                if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0)
+                    return;
+                event.preventDefault();
+                press?.();
+            },
+        },
+    };
+}

package/dist/ui/elements/media.d.ts

@@ -0,0 +1,11 @@
+import type { MessageKey } from '../content.tsx';
+import { type Element } from '../wrappers.tsx';
+export interface MediaProps {
+    readonly as: 'image' | 'video' | 'audio' | 'file';
+    readonly src: string;
+    readonly altKey: MessageKey;
+    readonly dispatch?: string;
+    readonly input?: Readonly<Record<string, unknown>>;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const Media: Element<'Media', MediaProps>;

package/dist/ui/elements/media.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { roleClass } from "../fonts.js";
+import { element, useSurface } from "../wrappers.js";
+export const Media = element('Media', (props, className) => {
+    const surface = useSurface({ className: roleClass(undefined, className),
+        invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, });
+    return ((() => {
+        switch (props.as) {
+            case 'image':
+                return (_jsx("img", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, src: props.src, alt: surface.text(props.altKey) }));
+            case 'video':
+                return (_jsx("video", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, src: props.src, "aria-label": surface.text(props.altKey), controls: true, preload: "metadata", children: null }));
+            case 'audio':
+                return (_jsx("audio", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, src: props.src, "aria-label": surface.text(props.altKey), controls: true, preload: "metadata", children: null }));
+            case 'file':
+                return (_jsx("a", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, href: props.src, download: true, children: surface.text(props.altKey) }));
+            default:
+                return null;
+        }
+    })());
+}, 'e-media');

package/dist/ui/elements/menu.d.ts

@@ -0,0 +1,12 @@
+import type { MessageKey } from '../content.tsx';
+import type { Row } from '../charts.tsx';
+import { type Element } from '../wrappers.tsx';
+export interface MenuProps {
+    readonly labelKey: MessageKey;
+    readonly items: readonly Row[];
+    readonly side?: string;
+    readonly dispatch?: string;
+    readonly input?: Readonly<Record<string, unknown>>;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const Menu: Element<'Menu', MenuProps>;

package/dist/ui/elements/menu.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { roleClass } from "../fonts.js";
+import { Presented, MenuRow } from "./menu.works.js";
+import { element, useSurface } from "../wrappers.js";
+import { Each } from "./each.js";
+import { measured, opener, portal, listing, row, uses } from "./menu.works.js";
+export const Menu = element('Menu', (props, className) => {
+    const kept = uses(props);
+    const surface = useSurface({ className: roleClass(undefined, className),
+        invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
+        holds: [
+            ...(kept.holds ?? []),
+        ],
+        measures: measured(props, kept),
+        ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
+    return (_jsxs("span", { ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), style: surface.measures, children: [_jsx("button", { className: `e-menu-opener ${surface.className ?? ''}`, ...opener(props, kept), children: surface.text(props.labelKey) }), _jsx(Presented, { ...portal(props, kept), children: _jsx("div", { className: "e-menu-layer", ...listing(props, kept), children: _jsx(Each, { rows: props.items, by: props.labelKey, children: (each0, at) => (_jsx(MenuRow, { ...row(props, kept, each0, at) })) }) }) })] }));
+}, 'e-menu');