@prestack/thread-ui 0.0.1

package/dist/ui/variant.d.ts

@@ -0,0 +1,122 @@
+import { FREE, type Material, type Setting } from './material.ts';
+import type { MATERIALS } from './materials.ts';
+import type { Holds, Token, Wearing } from './token.ts';
+import { holds } from './signals.ts';
+interface Stateful {
+    readonly id: string;
+    readonly states?: readonly {
+        readonly when: readonly string[];
+        readonly sets: readonly Setting[];
+    }[];
+}
+type SignalId = (typeof holds)[number]['id'] | (string & {});
+type MaterialId = (typeof MATERIALS)['declares'][number]['id'] | (string & {});
+declare const BOUND: {
+    readonly background: readonly ["colour", "gradient", "texture", "noise", "img"];
+    readonly borderColor: readonly ["colour"];
+    readonly color: readonly ["colour"];
+    readonly borderRadius: readonly ["radius"];
+    readonly borderWidth: readonly ["edge"];
+    readonly borderStyle: readonly ["line"];
+    readonly boxShadow: readonly ["shadow"];
+    readonly cursor: readonly ["cursor"];
+    readonly gap: readonly ["space"];
+    readonly padding: readonly ["space"];
+    readonly outlineOffset: readonly ["space"];
+    readonly minHeight: readonly ["control", "space"];
+    readonly minWidth: readonly ["space"];
+    readonly maxWidth: readonly ["space"];
+    readonly opacity: readonly ["opacity"];
+    readonly transform: readonly ["transform"];
+    readonly animation: readonly ["animation"];
+    readonly width: readonly ["icon"];
+    readonly height: readonly ["control", "icon"];
+    readonly display: readonly ["layout"];
+    readonly flexDirection: readonly ["flow"];
+    readonly alignItems: readonly ["align"];
+    readonly justifyContent: readonly ["align"];
+    readonly flexWrap: readonly ["wrap"];
+    readonly position: readonly ["position"];
+    readonly visibility: readonly ["visibility"];
+    readonly pointerEvents: readonly ["reach"];
+    readonly userSelect: readonly ["picking"];
+    readonly touchAction: readonly ["touch"];
+    readonly willChange: readonly ["readying"];
+    readonly transformOrigin: readonly ["origin"];
+    readonly overflow: readonly ["overflow"];
+    readonly zIndex: readonly ["layer"];
+    readonly top: readonly ["space"];
+    readonly left: readonly ["space"];
+    readonly aspectRatio: readonly ["ratio"];
+};
+type Property = keyof typeof BOUND;
+type BoundSettingFor<P extends Property> = {
+    readonly property: P;
+    readonly is?: string;
+    readonly token?: (typeof BOUND)[P][number];
+    readonly asks?: Readonly<Record<string, string | number>>;
+};
+type FreeProperty = (typeof FREE)[number];
+type FreeSettingFor<P extends FreeProperty> = {
+    readonly property: P;
+    readonly is: string;
+};
+type VariantSetting = {
+    [P in Property]: BoundSettingFor<P>;
+}[Property] | {
+    [P in FreeProperty]: FreeSettingFor<P>;
+}[FreeProperty];
+export interface Variant {
+    readonly id: string;
+    readonly version?: number;
+    readonly material?: MaterialId;
+    readonly type?: string;
+    readonly icon?: string;
+    readonly sets: readonly VariantSetting[];
+    readonly states?: readonly {
+        readonly when: readonly SignalId[];
+        readonly sets: readonly VariantSetting[];
+    }[];
+    readonly reacts: readonly SignalId[];
+    readonly plays?: {
+        readonly in?: string;
+        readonly out?: string;
+    };
+}
+export declare function propertiesHeld(): Readonly<Record<string, readonly string[]>>;
+export declare function freeHeld(): readonly string[];
+export declare const structural: Set<string>;
+export declare function looking(made: Readonly<Record<string, string>>): boolean;
+export declare const variant: <const T extends Variant>(one: T & {
+    readonly sets: { readonly [I in keyof T["sets"]]: T["sets"][I] extends {
+        readonly is: infer Said;
+    } ? {
+        readonly is: Wearing<Said & string>;
+    } : unknown; };
+} & (T extends {
+    readonly states: infer States;
+} ? {
+    readonly states: { readonly [S in keyof States]: States[S] extends {
+        readonly sets: infer Sets;
+    } ? {
+        readonly sets: { readonly [I in keyof Sets]: Sets[I] extends {
+            readonly is: infer Said;
+        } ? {
+            readonly is: Wearing<Said & string>;
+        } : unknown; };
+    } : unknown; };
+} : unknown)) => T;
+export declare function boundHeld(): Readonly<Record<string, readonly string[]>>;
+export declare function classOf(id: string): string;
+export declare function classOfElement(id: string): string;
+export declare function classOfComposition(id: string): string;
+export declare function classOfScreen(id: string): string;
+export declare function unreacted(variant: Variant, materials: Readonly<Record<string, Material>>): readonly string[];
+export declare function complete(variant: Variant, materials: Readonly<Record<string, Material>>, named: ReadonlySet<string>, tokens: Readonly<Record<string, Token>>, kinds: Readonly<Record<string, string>>): Readonly<Record<string, Holds>>;
+export declare function statesOf(variant: Variant, materials: Readonly<Record<string, Material>>): Stateful;
+export declare function under(variant: Stateful, named: ReadonlySet<string>, tokens: Readonly<Record<string, Token>>, kinds: Readonly<Record<string, string>>): readonly {
+    readonly marks: string;
+    readonly made: Readonly<Record<string, Holds>>;
+}[];
+export declare function undeclaredStates(variant: Stateful): readonly string[];
+export {};

package/dist/ui/variant.js

@@ -0,0 +1,201 @@
+import { BOUND as MATERIAL_BOUND, compose, composed, FREE } from "./material.js";
+import { coexist, isSignal, selectorOf, signalNames } from "./signals.js";
+const BOUND = {
+    background: ['colour', 'gradient', 'texture', 'noise', 'img'],
+    borderColor: ['colour'],
+    color: ['colour'],
+    borderRadius: ['radius'],
+    borderWidth: ['edge'],
+    borderStyle: ['line'],
+    boxShadow: ['shadow'],
+    cursor: ['cursor'],
+    gap: ['space'],
+    padding: ['space'],
+    outlineOffset: ['space'],
+    minHeight: ['control', 'space'],
+    minWidth: ['space'],
+    maxWidth: ['space'],
+    opacity: ['opacity'],
+    transform: ['transform'],
+    animation: ['animation'],
+    width: ['icon'],
+    height: ['control', 'icon'],
+    display: ['layout'],
+    flexDirection: ['flow'],
+    alignItems: ['align'],
+    justifyContent: ['align'],
+    flexWrap: ['wrap'],
+    position: ['position'],
+    visibility: ['visibility'],
+    pointerEvents: ['reach'],
+    userSelect: ['picking'],
+    touchAction: ['touch'],
+    willChange: ['readying'],
+    transformOrigin: ['origin'],
+    overflow: ['overflow'],
+    zIndex: ['layer'],
+    top: ['space'],
+    left: ['space'],
+    aspectRatio: ['ratio'],
+};
+export function propertiesHeld() {
+    return BOUND;
+}
+export function freeHeld() {
+    return FREE;
+}
+export const structural = new Set(['tag', 'shows', 'reads', 'holds', 'each', 'by', 'takes', 'marks', 'gives', 'keyed', 'when']);
+export function looking(made) {
+    return Object.keys(made).some((key) => !structural.has(key));
+}
+export const variant = (one) => one;
+export function boundHeld() {
+    return BOUND;
+}
+export function classOf(id) {
+    return `thread-${id}`;
+}
+export function classOfElement(id) {
+    return `e-${id}`;
+}
+export function classOfComposition(id) {
+    return `c-${id}`;
+}
+export function classOfScreen(id) {
+    return `s-${id}`;
+}
+export function unreacted(variant, materials) {
+    const whole = statesOf(variant, materials);
+    const described = new Set((whole.states ?? []).flatMap((one) => one.when));
+    const claimed = new Set(variant.reacts);
+    const missing = [];
+    for (const name of [...described].sort()) {
+        if (claimed.has(name))
+            continue;
+        missing.push(`\`${variant.id}\` looks different under "${name}" and does not say it reacts to it. A ` +
+            'variant states what it answers to, so reading one tells you without opening its material.');
+    }
+    for (const name of [...claimed].sort()) {
+        if (!isSignal(name)) {
+            missing.push(`\`${variant.id}\` says it reacts to "${name}", and no signal by that name is declared. ` +
+                `Declared: ${signalNames().join(' · ')}.`);
+            continue;
+        }
+        if (described.has(name))
+            continue;
+        missing.push(`\`${variant.id}\` says it reacts to "${name}" and never says how it looks under it, so it ` +
+            'reacts to nothing.');
+    }
+    return missing;
+}
+export function complete(variant, materials, named, tokens, kinds) {
+    const made = {};
+    if (variant.material !== undefined) {
+        const material = materials[variant.material];
+        if (material === undefined) {
+            throw new Error(`\`${variant.id}\` is made of \`${variant.material}\`, and no material by that name is ` +
+                'declared. A variant is material plus the rest, so without the material there is no rest.');
+        }
+        Object.assign(made, compose(material, named, tokens, kinds));
+    }
+    Object.assign(made, composed(variant.sets, named, tokens, variant.id, kinds, { ...MATERIAL_BOUND, ...BOUND }));
+    return made;
+}
+export function statesOf(variant, materials) {
+    const material = variant.material === undefined ? undefined : materials[variant.material];
+    const merged = new Map();
+    for (const state of [...(material?.states ?? []), ...(variant.states ?? [])]) {
+        const at = [...state.when].sort((a, b) => (a < b ? -1 : a > b ? 1 : 0)).join('+');
+        const already = merged.get(at);
+        if (already === undefined)
+            merged.set(at, { when: state.when, sets: [...state.sets] });
+        else
+            already.sets.push(...state.sets);
+    }
+    return { id: variant.id, states: [...merged.values()] };
+}
+function marked(when) {
+    return [...when]
+        .sort((a, b) => (a < b ? -1 : a > b ? 1 : 0))
+        .map((one) => selectorOf(one) ?? '')
+        .join('');
+}
+export function under(variant, named, tokens, kinds) {
+    const found = [];
+    for (const state of variant.states ?? []) {
+        if (state.when.length === 0) {
+            throw new Error(`\`${variant.id}\` declares a state that names no signal. A state is the set of truths it ` +
+                'holds under, and the empty set is the resting look, which is already declared.');
+        }
+        for (const name of state.when) {
+            if (isSignal(name))
+                continue;
+            throw new Error(`\`${variant.id}\` declares a state under \`${name}\`, and no signal by that name is ` +
+                `declared. Declared: ${signalNames().join(' · ')}.`);
+        }
+        found.push({
+            marks: marked(state.when),
+            made: composed(state.sets, named, tokens, variant.id, kinds, { ...MATERIAL_BOUND, ...BOUND }),
+        });
+    }
+    return found;
+}
+const key = (when) => [...when].sort((a, b) => (a < b ? -1 : a > b ? 1 : 0)).join('+');
+function sized(all, size) {
+    if (size === 0)
+        return [[]];
+    const found = [];
+    for (let at = 0; at <= all.length - size; at += 1) {
+        const head = all[at];
+        if (head === undefined)
+            continue;
+        for (const rest of sized(all.slice(at + 1), size - 1))
+            found.push([head, ...rest]);
+    }
+    return found;
+}
+function together(all) {
+    for (let i = 0; i < all.length; i += 1) {
+        for (let j = i + 1; j < all.length; j += 1) {
+            if (!coexist(all[i] ?? '', all[j] ?? ''))
+                return false;
+        }
+    }
+    return true;
+}
+export function undeclaredStates(variant) {
+    const states = variant.states ?? [];
+    const declared = new Set(states.map((one) => key(one.when)));
+    const named = [...new Set(states.flatMap((one) => one.when))].sort((a, b) => (a < b ? -1 : a > b ? 1 : 0));
+    const missing = [];
+    for (let size = 2; size <= named.length; size += 1) {
+        for (const combination of sized(named, size)) {
+            if (!together(combination))
+                continue;
+            if (declared.has(key(combination)))
+                continue;
+            const applying = states.filter((one) => one.when.every((name) => combination.includes(name)));
+            const deepest = new Map();
+            const tied = new Map();
+            for (const state of applying) {
+                for (const property of new Set(state.sets.map((set) => set.property))) {
+                    const depth = deepest.get(property) ?? 0;
+                    if (state.when.length > depth) {
+                        deepest.set(property, state.when.length);
+                        tied.set(property, 1);
+                    }
+                    else if (state.when.length === depth) {
+                        tied.set(property, (tied.get(property) ?? 0) + 1);
+                    }
+                }
+            }
+            const clash = new Set([...tied.entries()].filter(([, held]) => held > 1).map(([property]) => property));
+            if (clash.size === 0)
+                continue;
+            missing.push(`${combination.map((one) => `"${one}"`).join(' and ')} can all hold at once and they all ` +
+                `set ${[...clash].sort().join(', ')}, so which one wins would be an accident of file ` +
+                `order. "${key(combination)}" is not declared — declare it, or say the signals cannot coexist`);
+        }
+    }
+    return missing;
+}

package/dist/ui/variants/var_avatar-round.d.ts

@@ -0,0 +1,23 @@
+export declare const AVATAR_ROUND: {
+    readonly id: "avatar-round";
+    readonly sets: readonly [{
+        readonly property: "width";
+        readonly is: "icon-lg";
+    }, {
+        readonly property: "height";
+        readonly is: "icon-lg";
+    }, {
+        readonly property: "borderRadius";
+        readonly is: "radius-pill";
+    }, {
+        readonly property: "background";
+        readonly is: "colour-sunken";
+    }, {
+        readonly property: "display";
+        readonly is: "layout-flex";
+    }, {
+        readonly property: "alignItems";
+        readonly is: "align-centre";
+    }];
+    readonly reacts: readonly [];
+};

package/dist/ui/variants/var_avatar-round.js

@@ -0,0 +1,13 @@
+import { variant } from "../variant.js";
+export const AVATAR_ROUND = variant({
+    id: 'avatar-round',
+    sets: [
+        { property: 'width', is: 'icon-lg' },
+        { property: 'height', is: 'icon-lg' },
+        { property: 'borderRadius', is: 'radius-pill' },
+        { property: 'background', is: 'colour-sunken' },
+        { property: 'display', is: 'layout-flex' },
+        { property: 'alignItems', is: 'align-centre' },
+    ],
+    reacts: [],
+});

package/dist/ui/variants/var_bubble-me.d.ts

@@ -0,0 +1,21 @@
+export declare const BUBBLE_ME: {
+    readonly id: "bubble-me";
+    readonly material: "flat";
+    readonly sets: readonly [{
+        readonly property: "background";
+        readonly is: "colour-accent";
+    }, {
+        readonly property: "color";
+        readonly is: "colour-on-accent";
+    }, {
+        readonly property: "borderRadius";
+        readonly is: "radius-lg";
+    }, {
+        readonly property: "padding";
+        readonly is: "space-3 space-4";
+    }, {
+        readonly property: "gap";
+        readonly is: "space-2";
+    }];
+    readonly reacts: readonly ["focus", "hover"];
+};

package/dist/ui/variants/var_bubble-me.js

@@ -0,0 +1,13 @@
+import { variant } from "../variant.js";
+export const BUBBLE_ME = variant({
+    id: 'bubble-me',
+    material: 'flat',
+    sets: [
+        { property: 'background', is: 'colour-accent' },
+        { property: 'color', is: 'colour-on-accent' },
+        { property: 'borderRadius', is: 'radius-lg' },
+        { property: 'padding', is: 'space-3 space-4' },
+        { property: 'gap', is: 'space-2' },
+    ],
+    reacts: ['focus', 'hover'],
+});

package/dist/ui/variants/var_bubble-them.d.ts

@@ -0,0 +1,18 @@
+export declare const BUBBLE_THEM: {
+    readonly id: "bubble-them";
+    readonly material: "flat";
+    readonly sets: readonly [{
+        readonly property: "color";
+        readonly is: "colour-ink";
+    }, {
+        readonly property: "borderRadius";
+        readonly is: "radius-lg";
+    }, {
+        readonly property: "padding";
+        readonly is: "space-3 space-4";
+    }, {
+        readonly property: "gap";
+        readonly is: "space-2";
+    }];
+    readonly reacts: readonly ["focus", "hover"];
+};

package/dist/ui/variants/var_bubble-them.js

@@ -0,0 +1,12 @@
+import { variant } from "../variant.js";
+export const BUBBLE_THEM = variant({
+    id: 'bubble-them',
+    material: 'flat',
+    sets: [
+        { property: 'color', is: 'colour-ink' },
+        { property: 'borderRadius', is: 'radius-lg' },
+        { property: 'padding', is: 'space-3 space-4' },
+        { property: 'gap', is: 'space-2' },
+    ],
+    reacts: ['focus', 'hover'],
+});

package/dist/ui/variants/var_button-border.d.ts

@@ -0,0 +1,116 @@
+export declare const BUTTON_BORDER: {
+    readonly id: "button-border";
+    readonly type: "label";
+    readonly icon: "md";
+    readonly sets: readonly [{
+        readonly property: "display";
+        readonly is: "layout-flex";
+    }, {
+        readonly property: "alignItems";
+        readonly is: "align-centre";
+    }, {
+        readonly property: "justifyContent";
+        readonly is: "align-centre";
+    }, {
+        readonly property: "borderRadius";
+        readonly is: "control-radius";
+    }, {
+        readonly property: "height";
+        readonly is: "control-md";
+    }, {
+        readonly property: "padding";
+        readonly is: "control-pad-y control-pad-x";
+    }, {
+        readonly property: "gap";
+        readonly is: "control-gap";
+    }, {
+        readonly property: "cursor";
+        readonly is: "cursor-press";
+    }, {
+        readonly property: "transition";
+        readonly is: "motion-quick ease-out";
+    }, {
+        readonly property: "background";
+        readonly is: "colour-clear";
+    }, {
+        readonly property: "color";
+        readonly is: "colour-accent";
+    }, {
+        readonly property: "borderWidth";
+        readonly is: "control-edge";
+    }, {
+        readonly property: "borderStyle";
+        readonly is: "line-solid";
+    }, {
+        readonly property: "borderColor";
+        readonly is: "colour-accent";
+    }, {
+        readonly property: "boxShadow";
+        readonly is: "shadow-0";
+    }];
+    readonly states: readonly [{
+        readonly when: readonly ["hover"];
+        readonly sets: readonly [{
+            readonly property: "background";
+            readonly is: "colour-surface-lit";
+        }, {
+            readonly property: "transform";
+            readonly is: "transform-lift";
+        }];
+    }, {
+        readonly when: readonly ["active"];
+        readonly sets: readonly [{
+            readonly property: "background";
+            readonly is: "colour-surface-lit";
+        }, {
+            readonly property: "transform";
+            readonly is: "transform-press";
+        }];
+    }, {
+        readonly when: readonly ["active", "hover"];
+        readonly sets: readonly [{
+            readonly property: "background";
+            readonly is: "colour-surface-lit";
+        }, {
+            readonly property: "transform";
+            readonly is: "transform-press";
+        }];
+    }, {
+        readonly when: readonly ["focus"];
+        readonly sets: readonly [{
+            readonly property: "outline";
+            readonly is: "control-ring line-solid colour-accent";
+        }, {
+            readonly property: "outlineOffset";
+            readonly is: "control-ring-offset";
+        }];
+    }, {
+        readonly when: readonly ["loading"];
+        readonly sets: readonly [{
+            readonly property: "opacity";
+            readonly is: "opacity-muted";
+        }];
+    }, {
+        readonly when: readonly ["disabled"];
+        readonly sets: readonly [{
+            readonly property: "cursor";
+            readonly is: "cursor-refuse";
+        }, {
+            readonly property: "borderColor";
+            readonly is: "colour-edge";
+        }, {
+            readonly property: "color";
+            readonly is: "colour-ink-faint";
+        }];
+    }, {
+        readonly when: readonly ["disabled", "hover"];
+        readonly sets: readonly [{
+            readonly property: "background";
+            readonly is: "colour-clear";
+        }, {
+            readonly property: "transform";
+            readonly is: "transform-rest";
+        }];
+    }];
+    readonly reacts: readonly ["active", "disabled", "focus", "hover", "loading"];
+};

package/dist/ui/variants/var_button-border.js

@@ -0,0 +1,75 @@
+import { variant } from "../variant.js";
+export const BUTTON_BORDER = variant({
+    id: 'button-border',
+    type: 'label',
+    icon: 'md',
+    sets: [
+        { property: 'display', is: 'layout-flex' },
+        { property: 'alignItems', is: 'align-centre' },
+        { property: 'justifyContent', is: 'align-centre' },
+        { property: 'borderRadius', is: 'control-radius' },
+        { property: 'height', is: 'control-md' },
+        { property: 'padding', is: 'control-pad-y control-pad-x' },
+        { property: 'gap', is: 'control-gap' },
+        { property: 'cursor', is: 'cursor-press' },
+        { property: 'transition', is: 'motion-quick ease-out' },
+        { property: 'background', is: 'colour-clear' },
+        { property: 'color', is: 'colour-accent' },
+        { property: 'borderWidth', is: 'control-edge' },
+        { property: 'borderStyle', is: 'line-solid' },
+        { property: 'borderColor', is: 'colour-accent' },
+        { property: 'boxShadow', is: 'shadow-0' },
+    ],
+    states: [
+        {
+            when: ['hover'],
+            sets: [
+                { property: 'background', is: 'colour-surface-lit' },
+                { property: 'transform', is: 'transform-lift' },
+            ],
+        },
+        {
+            when: ['active'],
+            sets: [
+                { property: 'background', is: 'colour-surface-lit' },
+                { property: 'transform', is: 'transform-press' },
+            ],
+        },
+        {
+            when: ['active', 'hover'],
+            sets: [
+                { property: 'background', is: 'colour-surface-lit' },
+                { property: 'transform', is: 'transform-press' },
+            ],
+        },
+        {
+            when: ['focus'],
+            sets: [
+                { property: 'outline', is: 'control-ring line-solid colour-accent' },
+                { property: 'outlineOffset', is: 'control-ring-offset' },
+            ],
+        },
+        {
+            when: ['loading'],
+            sets: [
+                { property: 'opacity', is: 'opacity-muted' },
+            ],
+        },
+        {
+            when: ['disabled'],
+            sets: [
+                { property: 'cursor', is: 'cursor-refuse' },
+                { property: 'borderColor', is: 'colour-edge' },
+                { property: 'color', is: 'colour-ink-faint' },
+            ],
+        },
+        {
+            when: ['disabled', 'hover'],
+            sets: [
+                { property: 'background', is: 'colour-clear' },
+                { property: 'transform', is: 'transform-rest' },
+            ],
+        },
+    ],
+    reacts: ['active', 'disabled', 'focus', 'hover', 'loading'],
+});