@prestack/thread-ui 0.0.1

package/dist/ui/islands/map.d.ts

@@ -0,0 +1,33 @@
+import { z } from 'zod';
+export declare const ViewId: z.ZodString;
+export declare const ScreenName: z.ZodString;
+export declare const ScreenSchema: z.ZodObject<{
+    id: z.ZodString;
+    nameKey: z.ZodString;
+    path: z.ZodOptional<z.ZodString>;
+    entry: z.ZodDefault<z.ZodBoolean>;
+    shows: z.ZodDefault<z.ZodArray<z.ZodString>>;
+}, z.core.$strict>;
+export type Screen = z.infer<typeof ScreenSchema>;
+export declare const LinkSchema: z.ZodObject<{
+    from: z.ZodString;
+    to: z.ZodString;
+    labelKey: z.ZodOptional<z.ZodString>;
+}, z.core.$strict>;
+export type Link = z.infer<typeof LinkSchema>;
+export declare const MapSchema: z.ZodObject<{
+    specVersion: z.ZodLiteral<1>;
+    screens: z.ZodDefault<z.ZodArray<z.ZodObject<{
+        id: z.ZodString;
+        nameKey: z.ZodString;
+        path: z.ZodOptional<z.ZodString>;
+        entry: z.ZodDefault<z.ZodBoolean>;
+        shows: z.ZodDefault<z.ZodArray<z.ZodString>>;
+    }, z.core.$strict>>>;
+    links: z.ZodDefault<z.ZodArray<z.ZodObject<{
+        from: z.ZodString;
+        to: z.ZodString;
+        labelKey: z.ZodOptional<z.ZodString>;
+    }, z.core.$strict>>>;
+}, z.core.$strict>;
+export type MapIsland = z.infer<typeof MapSchema>;

package/dist/ui/islands/map.js

@@ -0,0 +1,44 @@
+import { z } from 'zod';
+const ElementName = z
+    .string()
+    .regex(/^[A-Z][A-Za-z0-9]*$/, 'must be a component name, e.g. "Card"')
+    .describe('The export name. A screen is reached by importing it, so this is its address.');
+export const ViewId = z
+    .string()
+    .regex(/^vw_[a-z][a-z0-9]*(?:_[a-z0-9]+)*$/, 'Expected a view id ("vw_" + snake_case)')
+    .describe('The id of a declared read. A screen names one; it never states what the read does.');
+export const ScreenName = ElementName.describe('The screen’s export name — `Home`, `Pricing`, `SignIn`. What `navigateTo` names, and its whole address.');
+export const ScreenSchema = z
+    .strictObject({
+    id: ScreenName,
+    nameKey: z
+        .string()
+        .min(1)
+        .describe('The i18n key naming this screen — in a breadcrumb, a tab, a title. Never prose (rule: every user-facing string is a key).'),
+    path: z
+        .string()
+        .regex(/^\/(?:[a-z0-9-]+|\[[a-z][a-zA-Z0-9]*\])(?:\/(?:[a-z0-9-]+|\[[a-z][a-zA-Z0-9]*\]))*$|^\/$/, 'must be an App Router path, e.g. "/campaign/[id]"')
+        .optional()
+        .describe('Where this screen lives. `/`, `/settings`, `/campaign/[id]`. Absent for a sheet, popover, overlay or toast, which a press opens where somebody already is, so it has no address of its own.'),
+    entry: z.boolean().default(false).describe('True when somebody can arrive here without following a link from inside the app.'),
+    shows: z.array(ViewId).default([]).describe('Declared views this screen binds to. A screen binds; it never fetches.'),
+})
+    .describe('One screen: where it lives, what it rests on, and whether somebody can arrive at it directly.');
+export const LinkSchema = z
+    .strictObject({
+    from: ScreenName.describe('The screen somebody is on.'),
+    to: ScreenName.describe('The screen they arrive at.'),
+    labelKey: z
+        .string()
+        .min(1)
+        .optional()
+        .describe('The i18n key of the button or link somebody presses to get there. Read off the press itself, and absent only when the press carries no wording.'),
+})
+    .describe('One edge: somebody on `from` can reach `to`.');
+export const MapSchema = z
+    .strictObject({
+    specVersion: z.literal(1),
+    screens: z.array(ScreenSchema).default([]),
+    links: z.array(LinkSchema).default([]),
+})
+    .describe('The map: the screens an app has and how somebody moves between them.');

package/dist/ui/localizations.d.ts

@@ -0,0 +1,33 @@
+import type { Threaded } from '@prestack/thread/core/thread';
+type Row = Omit<Threaded, 'at'> & {
+    readonly section?: string;
+    readonly is?: string;
+    readonly sets?: Readonly<Record<string, string>>;
+};
+export declare function fileFor(language: string): string;
+export declare const SOURCE_ROW = "source";
+export declare const holds: readonly Row[];
+export declare const declares: readonly (Row & {
+    readonly at: string;
+})[];
+export declare const LOCALIZATIONS: Threaded & {
+    readonly files: string;
+    readonly holds: readonly Row[];
+    readonly declares: readonly (Row & {
+        readonly at: string;
+    })[];
+};
+export declare function languagesIn(rows: readonly {
+    readonly id: string;
+    readonly is?: string;
+    readonly sets?: Readonly<Record<string, string>>;
+}[]): readonly {
+    readonly id: string;
+    readonly name: string;
+    readonly flag: string;
+}[];
+export declare function sourceIn(rows: readonly {
+    readonly id: string;
+    readonly is?: string;
+}[]): string | undefined;
+export {};

package/dist/ui/localizations.js

@@ -0,0 +1,51 @@
+export function fileFor(language) {
+    return `i18n/${language}.json`;
+}
+export const SOURCE_ROW = 'source';
+export const holds = [
+    {
+        id: SOURCE_ROW,
+        section: 'the source',
+        is: 'en',
+        describes: 'Which language this app is written in. One name, and it has to be one of the languages declared below — everything else is a translation of it, and the wording commands ask for those and never for this one twice.',
+        version: 1,
+    },
+];
+export const declares = [
+    {
+        id: 'en',
+        at: fileFor('en'),
+        section: 'languages',
+        is: 'English',
+        sets: { flag: '🇬🇧' },
+        describes: 'English, and everything this app says in it. Named in its own language, because the list this feeds is read by somebody who cannot yet read the language the app is currently in.',
+        version: 1,
+    },
+];
+export const LOCALIZATIONS = {
+    id: 'localization',
+    at: 'thread/ui/localizations.ts',
+    files: fileFor('*'),
+    describes: 'Every language an app is in, and which one it is written in. A row is a language tag, the language’s name in itself and a flag to show beside it, so a settings screen offering a choice is built from declarations rather than from a list somebody keeps in a component. Adding a row is what brings a wording file for that language into existence, and every key the interface names has to be answered in every language declared here — an unanswered one is a build error rather than a word that silently comes out in the wrong language.',
+    version: 1,
+    cites: [
+        {
+            on: '2026-08-29',
+            said: 'i18n ships by default, nothing hardcoded in the UI at all. i18n is REQUIRED. We define the languages the app will have, this generates automatically the i18n files so that we can add the stuff there.',
+        },
+        {
+            on: '2026-08-29',
+            said: 'This means that we need a new Localization.ts file under UI, where we declare the languages the app is in, must be threaded on attach. This might maybe include an emoji for the country flag? And name of the language so we can reuse this in settings later',
+        },
+    ],
+    holds,
+    declares,
+};
+export function languagesIn(rows) {
+    return rows
+        .filter((row) => row.id !== SOURCE_ROW)
+        .map((row) => ({ id: row.id, name: row.is ?? row.id, flag: row.sets?.flag ?? '' }));
+}
+export function sourceIn(rows) {
+    return rows.find((row) => row.id === SOURCE_ROW)?.is;
+}

package/dist/ui/makers/message.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/makers/message.js

@@ -0,0 +1,230 @@
+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 { readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { argv, exit, stdout } from 'node:process';
+import { pathToFileURL } from 'node:url';
+import { ELSEWHERE, RECEIPT, answer, answering, asking, given, guidance, issue, marked, named, needed, only, prompted, refuse, spend, within, wordsIn, wrapped } from "@prestack/thread/core/asking";
+import { named as packageOf } from "@prestack/thread/core/scope";
+import { findTree, inTree } from "@prestack/thread/core/tree";
+import { keyProps, keysIn, readWording, walk, wordingFile } from "../generators/i18n.js";
+import { fileFor, languagesIn, sourceIn } from "../localizations.js";
+const TREE = findTree();
+const DOTTED = /^[a-z][a-z0-9]*(?:[.-][a-z0-9]+)*$/;
+const KEY = { at: 'key', guide: 'lowercase words joined by dots — `checkout.confirm`, `errors.db.not_found.title`' };
+async function languages() {
+    const path = inTree(TREE, `localizations.${'ts'}`);
+    let sheet = {};
+    try {
+        sheet = (await import(__rewriteRelativeImportExtension(pathToFileURL(path).href)));
+    }
+    catch {
+        sheet = {};
+    }
+    if (sheet.LOCALIZATION === undefined) {
+        refuse(`there is no ${within(TREE.at, path)} declaring a \`LOCALIZATION\` here, so this app is in no ` +
+            `language and a message has nowhere to go. Run \`npx thread attach ${packageOf('ui')}\`.`);
+    }
+    const rows = [...(sheet.LOCALIZATION.holds ?? []), ...(sheet.LOCALIZATION.declares ?? [])];
+    const held = languagesIn(rows);
+    const source = sourceIn(rows);
+    if (held.length === 0 || source === undefined) {
+        refuse('no language is declared, so there is nothing to write a message in. Add one with `npx thread create language`.');
+    }
+    return { held, source };
+}
+function usage(props) {
+    const found = new Map();
+    for (const file of walk(TREE.at)) {
+        const text = readFileSync(file, 'utf8');
+        for (const key of new Set(keysIn(text, props))) {
+            const held = found.get(key) ?? [];
+            held.push(within(TREE.at, file));
+            found.set(key, held);
+        }
+    }
+    return found;
+}
+const mark = (key, said) => marked([key, said]);
+function write(at, language, held) {
+    writeFileSync(join(at, fileFor(language)), wordingFile(held), 'utf8');
+}
+async function run() {
+    const { held: spoken, source } = await languages();
+    const props = keyProps(TREE.at);
+    if (props.length === 0) {
+        refuse(`nothing in the installed \`${packageOf('ui')}\` declares a prop of type \`MessageKey\`, so no key could be ` +
+            'recognised anywhere. That is a broken install rather than an app with no wording.');
+    }
+    const LANGUAGES = spoken.map((one) => ({ at: one.id, guide: `what it says in ${one.name}` }));
+    const NEW = [KEY, ...LANGUAGES];
+    const wording = new Map();
+    for (const one of spoken)
+        wording.set(one.id, { ...readWording(TREE.at, one.id) });
+    const written = wording.get(source) ?? {};
+    const keys = Object.keys(written).sort();
+    const used = usage(props);
+    const blank = (key) => spoken.filter((one) => ((wording.get(one.id) ?? {})[key] ?? '') === '').map((one) => one.id);
+    const listing = [
+        `${String(keys.length)} message(s), in ${spoken.map((one) => one.id).join(', ')} — written in ${source}:`,
+        '',
+        ...keys.map((key) => {
+            const missing = blank(key);
+            const said = (written[key] ?? '') || '(nothing yet)';
+            return (`  [${mark(key, written[key] ?? '')}] ${key.padEnd(38)} ${said.length > 46 ? `${said.slice(0, 45)}…` : said}` +
+                `${missing.length === 0 ? '' : `  · still to write: ${missing.join(', ')}`}` +
+                `${(used.get(key) ?? []).length === 0 ? '  · named by nothing here' : ''}`);
+        }),
+    ].join('\n');
+    const words = wordsIn(['new']);
+    const verb = words[0];
+    const flagged = argv.indexOf(RECEIPT);
+    if (flagged === -1) {
+        stdout.write(`${listing}\n`);
+        const nonce = issue(TREE.at, listing);
+        stdout.write([
+            '',
+            ...answering('message'),
+            '',
+            ...guidance(NEW),
+            '',
+            ...wrapped('Every language is asked for and none may be left blank. A key that exists in one language and ' +
+                'not another is what makes a screen come out half translated, and it is refused here rather ' +
+                'than found by whoever is reading the app in the other one.', '  '),
+            '',
+            `  npx thread create message new ${RECEIPT} ${nonce}`,
+            '',
+            ...ELSEWHERE,
+            '',
+            ...wrapped('A rename moves the wording in every language and rewrites every file in the interface that ' +
+                'names it, in one run.', '  '),
+            '',
+        ].join('\n'));
+        stdout.write(`create: receipt ${nonce} — spent on use, and stale the moment the wording changes.\n`);
+        return 0;
+    }
+    spend(TREE.at, listing, argv[flagged + 1], `the wording`);
+    const all = given();
+    const { piped, ask, shut } = asking(all);
+    const ASKS = {
+        new: ['do', ...named(NEW)],
+        edit: ['do', 'mark', ...named(NEW)],
+        remove: ['do', 'mark'],
+    };
+    const doing = verb ?? (await ask('do', 'new, edit or remove: '));
+    const allowed = ASKS[doing];
+    if (allowed === undefined) {
+        shut();
+        refuse(`there is nothing called "${doing}" to do here — say new, edit, remove, or read, which needs no receipt`);
+    }
+    if (piped)
+        only(all, allowed, `\`${doing}\``);
+    if (doing === 'remove' || doing === 'edit') {
+        const which = words[1] ?? (piped ? needed(all, 'mark', `\`${doing}\``) : await ask('mark', 'mark: '));
+        const one = keys.find((key) => mark(key, written[key] ?? '') === which);
+        if (one === undefined) {
+            shut();
+            refuse(`\`${which}\` is not a mark this sheet issued — they are printed in brackets beside each message.`);
+        }
+        if (doing === 'remove') {
+            const where = used.get(one) ?? [];
+            if (where.length > 0) {
+                shut();
+                refuse(`\`${one}\` is named by ${where.slice(0, 6).join(', ')}` +
+                    `${where.length > 6 ? ` and ${String(where.length - 6)} more` : ''}. ` +
+                    'Removing it would leave those asking for wording that does not exist, which throws the moment ' +
+                    'the screen renders. Take it out of the interface first.');
+            }
+            shut();
+            for (const language of spoken) {
+                const made = { ...(wording.get(language.id) ?? {}) };
+                delete made[one];
+                write(TREE.at, language.id, made);
+            }
+            stdout.write(`create: removed ${one} from ${String(spoken.length)} language file(s)\n`);
+            return 0;
+        }
+        const renamed = piped ? (answer(all, KEY.at) ?? '') : await ask(KEY.at, `key (${one}, blank to keep) `);
+        if (renamed !== '' && !DOTTED.test(renamed)) {
+            shut();
+            refuse(`\`${renamed}\` is not a key — lowercase words joined by dots.`);
+        }
+        if (renamed !== '' && written[renamed] !== undefined) {
+            shut();
+            refuse(`\`${renamed}\` is already a message. Two keys with one name is one key, and the other's wording is lost.`);
+        }
+        const said = new Map();
+        for (const language of spoken) {
+            const now = (wording.get(language.id) ?? {})[one] ?? '';
+            const next = piped
+                ? (answer(all, language.id) ?? '')
+                : await ask(language.id, `${language.name} (${now || 'nothing yet'}) `);
+            said.set(language.id, next === '' ? now : next);
+        }
+        shut();
+        const name = renamed === '' ? one : renamed;
+        for (const language of spoken) {
+            const made = { ...(wording.get(language.id) ?? {}) };
+            delete made[one];
+            made[name] = said.get(language.id) ?? '';
+            write(TREE.at, language.id, made);
+        }
+        let moved = 0;
+        if (renamed !== '') {
+            for (const file of walk(TREE.at)) {
+                const text = readFileSync(file, 'utf8');
+                if (!keysIn(text, props).includes(one))
+                    continue;
+                writeFileSync(file, text.replace(new RegExp(`(\\b(?:${props.join('|')})\\s*=\\s*")${one.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}(")`, 'g'), `$1${name}$2`), 'utf8');
+                moved += 1;
+            }
+        }
+        stdout.write(`create: ${one}${renamed === '' ? '' : ` is now ${name}`} — rewritten in ${String(spoken.length)} language file(s)` +
+            `${moved === 0 ? '' : ` and ${String(moved)} file(s) of the interface`}\n`);
+        const still = blankIn(said, spoken);
+        if (still.length > 0) {
+            stdout.write(`create: still nothing in ${still.join(', ')} — the gate refuses while that holds.\n`);
+        }
+        return 0;
+    }
+    const key = piped ? needed(all, KEY.at, '`new`') : await ask(KEY.at, prompted(KEY));
+    if (!DOTTED.test(key)) {
+        shut();
+        refuse(`\`${key}\` is not a key — lowercase words joined by dots, like \`checkout.confirm\`.`);
+    }
+    if (written[key] !== undefined) {
+        shut();
+        refuse(`\`${key}\` is already a message. Edit it by its mark, or choose another key.`);
+    }
+    const said = new Map();
+    for (const language of spoken) {
+        const next = piped
+            ? (answer(all, language.id) ?? '')
+            : await ask(language.id, `what it says in ${language.name}: `);
+        if (next === '') {
+            shut();
+            refuse(`\`${key}\` has nothing to say in ${language.name}. Every language is answered at the moment a key ` +
+                'is made, because a key that exists in one language and not another is a screen that comes out ' +
+                'half translated. There is no way past this on purpose.');
+        }
+        said.set(language.id, next);
+    }
+    shut();
+    for (const language of spoken) {
+        write(TREE.at, language.id, { ...(wording.get(language.id) ?? {}), [key]: said.get(language.id) ?? '' });
+    }
+    stdout.write(`create: wrote ${key} in ${spoken.map((one) => one.id).join(', ')}\n`);
+    stdout.write(`create: name it in the interface with one of: ${props.join(', ')} — for example \`label="${key}"\`.\n`);
+    return 0;
+}
+function blankIn(said, spoken) {
+    return spoken.filter((one) => (said.get(one.id) ?? '') === '').map((one) => one.id);
+}
+if (argv[1] !== undefined)
+    exit(await run());

package/dist/ui/material.d.ts

@@ -0,0 +1,83 @@
+import { type Holds, type Token, type Wearing } from './token.ts';
+export interface Setting {
+    readonly property: string;
+    readonly is?: string;
+    readonly token?: string;
+    readonly asks?: Readonly<Record<string, string | number>>;
+}
+export declare const BOUND: {
+    readonly background: readonly ["colour", "gradient", "texture", "noise", "img"];
+    readonly backgroundImage: readonly ["gradient", "texture", "noise", "img"];
+    readonly backdropFilter: readonly ["blur"];
+    readonly borderWidth: readonly ["edge"];
+    readonly borderStyle: readonly ["line"];
+    readonly borderColor: readonly ["colour"];
+    readonly boxShadow: readonly ["shadow"];
+    readonly color: readonly ["colour"];
+    readonly opacity: readonly ["opacity"];
+};
+type Property = keyof typeof BOUND;
+type MaterialSettingFor<P extends Property> = {
+    readonly property: P;
+    readonly is?: string;
+    readonly token?: (typeof BOUND)[P][number];
+    readonly asks?: Readonly<Record<string, string | number>>;
+};
+type MaterialSetting = {
+    [P in Property]: MaterialSettingFor<P>;
+}[Property];
+export interface Material {
+    readonly id: string;
+    readonly sets: readonly MaterialSetting[];
+    readonly states?: readonly {
+        readonly when: readonly string[];
+        readonly sets: readonly MaterialSetting[];
+    }[];
+    readonly plays?: string;
+    readonly keyframes?: readonly {
+        readonly id: string;
+        readonly sets: Readonly<Record<string, readonly MaterialSetting[]>>;
+    }[];
+}
+export declare const FREE: readonly ["transition", "outline"];
+export declare const material: <const T extends Material>(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 extends {
+    readonly keyframes: infer Frames;
+} ? {
+    readonly keyframes: { readonly [F in keyof Frames]: Frames[F] extends {
+        readonly sets: infer Stops;
+    } ? {
+        readonly sets: { readonly [Stop in keyof Stops]: { readonly [I in keyof Stops[Stop]]: Stops[Stop][I] extends {
+            readonly is: infer Said;
+        } ? {
+            readonly is: Wearing<Said & string>;
+        } : unknown; }; };
+    } : unknown; };
+} : unknown)) => T;
+export declare function composed(sets: readonly Setting[], named: ReadonlySet<string>, tokens: Readonly<Record<string, Token>>, by: string, kinds: Readonly<Record<string, string>>, bound: Readonly<Record<string, readonly string[]>>): Readonly<Record<string, Holds>>;
+export declare function compose(material: Material, named: ReadonlySet<string>, tokens: Readonly<Record<string, Token>>, kinds: Readonly<Record<string, string>>): Readonly<Record<string, Holds>>;
+export declare function keyframesOf(material: Material, named: ReadonlySet<string>, tokens: Readonly<Record<string, Token>>, kinds: Readonly<Record<string, string>>): readonly {
+    readonly id: string;
+    readonly stops: readonly {
+        readonly stop: string;
+        readonly made: Readonly<Record<string, Holds>>;
+    }[];
+}[];
+export {};

package/dist/ui/material.js

@@ -0,0 +1,95 @@
+import { held, naming, sheeted } from "./token.js";
+export const BOUND = {
+    background: ['colour', 'gradient', 'texture', 'noise', 'img'],
+    backgroundImage: ['gradient', 'texture', 'noise', 'img'],
+    backdropFilter: ['blur'],
+    borderWidth: ['edge'],
+    borderStyle: ['line'],
+    borderColor: ['colour'],
+    boxShadow: ['shadow'],
+    color: ['colour'],
+    opacity: ['opacity'],
+};
+export const FREE = ['transition', 'outline'];
+export const material = (one) => one;
+function rowsIn(value) {
+    return value.split(/\s+/).filter((one) => one !== '');
+}
+function bounded(set, by, kinds, bound) {
+    const value = set.is ?? '';
+    const rows = rowsIn(value);
+    const allowed = bound[set.property];
+    if (allowed === undefined)
+        return;
+    for (const row of rows) {
+        const kind = kinds[row];
+        if (kind === undefined || allowed.includes(kind))
+            continue;
+        const list = allowed.map((one) => `\`${one}\``).join(' · ');
+        throw new Error(`\`${by}\` sets \`${set.property}\` to \`${row}\`, and \`${row}\` is a \`${kind}\` row. ` +
+            `\`${set.property}\` takes: ${list}.`);
+    }
+}
+function valued(set, named, tokens, by, kinds, bound) {
+    if (set.is !== undefined && set.token !== undefined) {
+        throw new Error(`\`${by}\` states both a value and a token for \`${set.property}\`. A property is either a ` +
+            'value the style guide holds or a token asked for one, never both.');
+    }
+    if (set.is !== undefined) {
+        if (kinds !== undefined)
+            bounded(set, by, kinds, bound);
+        return naming(named, set.is, by, set.property);
+    }
+    if (set.token === undefined) {
+        throw new Error(`\`${by}\` sets \`${set.property}\` to nothing. State a value with \`is\`, or name a token ` +
+            'and what to ask it for.');
+    }
+    const token = tokens[set.token];
+    if (token === undefined) {
+        throw new Error(`\`${by}\` asks \`${set.token}\` for \`${set.property}\`, and no token by that name is ` +
+            'declared. A token has to exist before anything can ask it for a value.');
+    }
+    if (token.makes === undefined) {
+        throw new Error(`\`${by}\` asks \`${set.token}\` for \`${set.property}\`, and \`${set.token}\` carries no ` +
+            'rule, so there is nothing to ask. Name a style guide value instead.');
+    }
+    return held(named, token.makes(set.asks ?? {}), by);
+}
+export function composed(sets, named, tokens, by, kinds, bound) {
+    const made = {};
+    for (const set of sets) {
+        if (bound[set.property] === undefined && (set.property === 'animation' || set.property === 'animationName')) {
+            throw new Error(`\`${by}\` sets \`${set.property}\` itself, which buries the keyframes name inside a ` +
+                'string where nothing can check it. Name a style guide row of the `animation` kind, or ' +
+                'declare keyframes and name them with `plays`.');
+        }
+        made[set.property] = valued(set, named, tokens, by, kinds, bound);
+    }
+    return made;
+}
+function playing(material, plays) {
+    if (plays === undefined)
+        return {};
+    if ((material.keyframes ?? []).some((one) => one.id === plays))
+        return { animationName: sheeted(material.id, plays) };
+    const declared = (material.keyframes ?? []).map((one) => one.id);
+    throw new Error(`\`${material.id}\` plays \`${plays}\`, and declares no keyframes by that name. ` +
+        (declared.length === 0
+            ? 'It declares none at all, so there is nothing for it to play.'
+            : `It declares: ${declared.join(' · ')}.`));
+}
+export function compose(material, named, tokens, kinds) {
+    return {
+        ...composed(material.sets, named, tokens, material.id, kinds, BOUND),
+        ...playing(material, material.plays),
+    };
+}
+export function keyframesOf(material, named, tokens, kinds) {
+    return (material.keyframes ?? []).map((one) => ({
+        id: one.id,
+        stops: Object.keys(one.sets).map((stop) => ({
+            stop,
+            made: composed(one.sets[stop] ?? [], named, tokens, material.id, kinds, BOUND),
+        })),
+    }));
+}

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

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

package/dist/ui/materials/mat_bordered.js

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

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

@@ -0,0 +1,22 @@
+export declare const CERAMIC: {
+    readonly id: "ceramic";
+    readonly sets: readonly [{
+        readonly property: "backgroundImage";
+        readonly is: "gradient-sheen";
+    }, {
+        readonly property: "borderWidth";
+        readonly is: "edge-hair";
+    }, {
+        readonly property: "borderStyle";
+        readonly is: "line-solid";
+    }, {
+        readonly property: "borderColor";
+        readonly is: "colour-edge-ceramic";
+    }, {
+        readonly property: "boxShadow";
+        readonly is: "shadow-2";
+    }, {
+        readonly property: "color";
+        readonly is: "colour-ink";
+    }];
+};

package/dist/ui/materials/mat_ceramic.js

@@ -0,0 +1,12 @@
+import { material } from "../material.js";
+export const CERAMIC = material({
+    id: 'ceramic',
+    sets: [
+        { property: 'backgroundImage', is: 'gradient-sheen' },
+        { property: 'borderWidth', is: 'edge-hair' },
+        { property: 'borderStyle', is: 'line-solid' },
+        { property: 'borderColor', is: 'colour-edge-ceramic' },
+        { property: 'boxShadow', is: 'shadow-2' },
+        { property: 'color', is: 'colour-ink' },
+    ],
+});