@prestack/thread-ui 0.0.1

package/dist/ui/wrappers.js

@@ -0,0 +1,220 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { idOf } from "./checked.js";
+import { PRESENTATION_BEHAVIOUR } from "./door.js";
+import { selectorOf } from "./signals.js";
+import { classOf, classOfElement } from "./variant.js";
+import { ELEMENTS } from "./elements.js";
+import { VARIANTS } from "./variants.js";
+import { Presented } from "./presented.js";
+import { useRenderLoopDetector } from "./render-loop.js";
+export const UiContext = createContext(null);
+const MISSING = 'No UI context. Every element resolves its look, its text and its clock through the door, so it ' +
+    'must render inside <UiProvider>. An element rendering without one would silently have no theme ' +
+    'and no locale — which looks like a styling bug and is a wiring bug.';
+export function UiProvider({ config, children }) {
+    return _jsx(UiContext.Provider, { value: config, children: children });
+}
+export function useUi() {
+    const config = useContext(UiContext);
+    if (config === null)
+        throw new Error(MISSING);
+    return config;
+}
+export function useSurface(request = {}) {
+    const { translate, appearance, clock, asking, dispatch: run } = useUi();
+    const [t, setT] = useState(0);
+    const animates = request.animates === true && !appearance.reduceMotion;
+    useEffect(() => {
+        if (!animates)
+            return undefined;
+        return clock.subscribe(setT);
+    }, [animates, clock]);
+    const holds = request.holds ?? [];
+    const held = new Set(holds);
+    const raised = (signal) => held.has(signal);
+    const a11y = {};
+    if (raised('loading') || raised('pending'))
+        a11y['aria-busy'] = true;
+    const marks = {};
+    for (const one of holds) {
+        const selector = selectorOf(one) ?? (asking ?? []).find((row) => row.id === one)?.selector;
+        if (selector === undefined || !selector.startsWith('[data-'))
+            continue;
+        marks[selector.slice(1, -1)] = true;
+    }
+    const [arriving, setArriving] = useState(true);
+    if (arriving)
+        marks['data-arriving'] = true;
+    const began = useRef(false);
+    useEffect(() => {
+        if (!arriving)
+            return undefined;
+        let live = true;
+        const outer = requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                if (live && !began.current)
+                    setArriving(false);
+            });
+        });
+        return () => {
+            live = false;
+            cancelAnimationFrame(outer);
+        };
+    }, [arriving]);
+    const measures = {};
+    for (const [name, value] of Object.entries(request.measures ?? {}))
+        measures[`--${name}`] = value;
+    const asked = request.invokes;
+    const named = asked?.dispatch;
+    const carried = asked?.input;
+    const when = asked?.on ?? 'press';
+    useEffect(() => {
+        if (named === undefined || when !== 'shown')
+            return;
+        if (asking === undefined)
+            return;
+        void run?.(named, carried);
+    }, [named, when, carried, run, asking]);
+    const invokes = {
+        onAnimationStart: (event) => {
+            if (event.target !== event.currentTarget)
+                return;
+            began.current = true;
+        },
+        onAnimationEnd: (event) => {
+            if (event.target !== event.currentTarget)
+                return;
+            setArriving(false);
+        },
+        ...(named === undefined || when === 'shown'
+            ? {}
+            : {
+                onClick: () => {
+                    if (run === undefined)
+                        throw new Error(`\`${named}\` cannot be invoked from here — no dispatch is wired`);
+                    void run(named, carried);
+                },
+            }),
+    };
+    return {
+        ...(request.className === undefined ? {} : { className: request.className }),
+        holds,
+        marks,
+        measures,
+        invokes,
+        marked: raised,
+        text: translate,
+        a11y,
+        t: animates ? t : 0,
+    };
+}
+export function pressOf(props) {
+    if (props.onPress !== undefined)
+        return { onPress: props.onPress };
+    if (props.navigateTo !== undefined)
+        return { navigateTo: props.navigateTo };
+    if (props.dispatch === undefined)
+        return {};
+    return props.input === undefined ? { dispatch: props.dispatch } : { dispatch: props.dispatch, input: props.input };
+}
+const NO_DISPATCH = 'No dispatch. An operation runs one way here and that way is `dispatch`, handed the name, so a thing that names ' +
+    'one must render inside a <UiProvider> whose config supplies it. Without it the press has nowhere to go, which ' +
+    'reads as a dead control and is a wiring gap.';
+const NO_NAVIGATE = 'No navigateTo. Moving between screens is its own thing, supplied beside dispatch rather than through it, so a ' +
+    'thing that names a screen must render inside a <UiProvider> whose config supplies it.';
+export function usePress(press, origin) {
+    const { collector, dispatch, navigateTo } = useUi();
+    const reported = (run) => {
+        if (collector === undefined || origin === undefined)
+            return run;
+        return () => {
+            collector.record({
+                property: 'interaction',
+                element: origin.element,
+                ...(origin.name === undefined ? {} : { name: origin.name }),
+                action: 'pressed',
+            });
+            run();
+        };
+    };
+    if (press.onPress !== undefined)
+        return reported(press.onPress);
+    if (press.navigateTo !== undefined) {
+        const where = press.navigateTo;
+        return reported(() => {
+            if (navigateTo === undefined)
+                throw new Error(NO_NAVIGATE);
+            navigateTo(where);
+        });
+    }
+    if (press.dispatch !== undefined) {
+        const named = press.dispatch;
+        const input = press.input;
+        return reported(() => {
+            if (dispatch === undefined)
+                throw new Error(NO_DISPATCH);
+            void dispatch(named, input);
+        });
+    }
+    return undefined;
+}
+export function useVisibility(active) {
+    const { clock } = useUi();
+    return useMemo(() => {
+        return (node) => {
+            if (!active || node === null || typeof IntersectionObserver !== 'function')
+                return;
+            const observer = new IntersectionObserver(([entry]) => {
+                clock.setVisible(entry?.isIntersecting ?? true);
+            });
+            observer.observe(node);
+        };
+    }, [active, clock]);
+}
+function wearing(held, added) {
+    if (added === undefined)
+        return held;
+    return held === undefined || held === '' ? added : `${held} ${added}`;
+}
+function camel(id) {
+    return id.replace(/-([a-z0-9])/g, (_, one) => one.toUpperCase());
+}
+export function element(name, fn, own) {
+    const arranged = ELEMENTS.declares.find((row) => row.id === idOf(name) && 'sets' in row);
+    const laid = own ?? (arranged === undefined ? undefined : classOfElement(arranged.id));
+    const Made = (props) => fn(props, wearing(laid, props.className));
+    named(Made, name);
+    for (const row of VARIANTS.declares) {
+        if (!row.wears.includes(name))
+            continue;
+        const worn = wearing(laid, classOf(row.id));
+        const Worn = (props) => fn(props, wearing(worn, props.className));
+        named(Worn, `${name}.${camel(row.id)}`);
+        Object.defineProperty(Made, camel(row.id), { value: Worn, enumerable: false, configurable: true });
+    }
+    return Made;
+}
+function named(component, value) {
+    Object.defineProperty(component, 'displayName', { value, enumerable: false, configurable: true });
+}
+export function composition(own, fn) {
+    const Made = (props) => (_jsx("div", { className: wearing(own, props.className), children: fn(props) }));
+    named(Made, own);
+    return Made;
+}
+export function screen(own, options, fn) {
+    const Screen = (props) => {
+        useRenderLoopDetector(own, props);
+        const laid = _jsx("div", { className: own, children: fn(props) });
+        if (options.as === undefined)
+            return laid;
+        return (_jsx(Presented, { presentation: options.as, ...(props.open === undefined ? {} : { open: props.open }), ...(props.onDismiss === undefined ? {} : { onDismiss: props.onDismiss }), children: laid }));
+    };
+    Screen.displayName = own;
+    return Screen;
+}
+export function behaviourOf(presentation) {
+    return PRESENTATION_BEHAVIOUR[presentation];
+}

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@prestack/thread-ui",
+  "version": "0.0.1",
+  "type": "module",
+  "files": [
+    "dist",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./*": "./dist/*.js"
+  },
+  "dependencies": {
+    "@prestack/thread": "0.0.1"
+  }
+}