@prestack/thread-ui 0.0.1

package/dist/ui/attach.js

@@ -0,0 +1,497 @@
+import { named } from "@prestack/thread/core/scope";
+import { ANIMATIONS } from "./animations.js";
+import { COMPOSITIONS } from "./compositions.js";
+import { FONTS } from "./fonts.js";
+import { ICONS } from "./icons.js";
+import { LOCALIZATIONS } from "./localizations.js";
+import { ELEMENTS } from "./elements.js";
+import { MATERIALS } from "./materials.js";
+import { MODES } from "./modes.js";
+import { SCREENS } from "./screens.js";
+import { STYLEGUIDES } from "./styleguides.js";
+import { SIGNALS } from "./signals.js";
+import { THEMES } from "./themes.js";
+import { TOKENS } from "./tokens.js";
+import { VARIANTS } from "./variants.js";
+const SEEDED = {
+    attaches: ['@prestack/thread'],
+    id: 'ui',
+    declares: [
+        '    {',
+        '      id: \'ui\',',
+        '      at: \'_threads/ui.ts\',',
+        '      describes: \'Draws things. An app declares its elements, variants and screens, and the components, stylesheet and translations follow.\',',
+        '      version: 1,',
+        '    },',
+    ].join('\n'),
+};
+const SHIPPED = [
+    {
+        into: 'ui.ts',
+        list: 'GENERATORS',
+        id: 'styles-generator',
+        source: "  {\n    id: 'styles-generator',\n    at: 'node_modules/@prestack/thread-ui/dist/ui/generators/styles.js',\n    describes: 'The generator of the stylesheet — it reads the tokens, materials, variants and style guide an app declares and writes one class per variant, so what an app looks like is a consequence of its declarations rather than a file somebody maintains beside them.',\n    version: 1,\n    by: 'thread styles',\n    runs: 'thread styles --check',\n    derives: [\n      {\n        id: 'stylesheet',\n        at: 'app/_generated/tokens.css',\n        describes: 'One class per variant and one variable per value, written from the declarations rather than kept beside them.',\n        version: 1,\n        by: 'thread styles',\n        runs: 'thread styles --check',\n      },\n      {\n        id: 'declared',\n        at: 'app/_generated/declared.ts',\n        describes: 'What this app declared for itself, said in types so an element offers it — a variant an app wrote is a member on the element that wears it, the way a shipped one is. A declaration file because it weighs nothing: it is gone at build, so an app gets its own variants without a registry being shipped into the artifact.',\n        version: 1,\n        by: 'thread styles',\n        runs: 'thread styles --check',\n      },\n    ],\n  },",
+    },
+    {
+        into: 'ui.ts',
+        list: 'GENERATORS',
+        id: 'tokens-generator',
+        source: "  {\n    id: 'tokens-generator',\n    at: 'node_modules/@prestack/thread-ui/dist/ui/tokens.js',\n    describes: 'The seeder of token files — it reads the tokens an app declares and writes the file each `declares` row names when that file is not there yet, so a token that carries a rule begins by being declared rather than by somebody remembering to add a file beside the row. A `holds` row names no file, because a token that is only a name has nothing to seed. Run with `--check`, the mode the gate runs it in, it writes nothing and refuses instead: a file that disagrees with its row, a file under tokens no row names, or a row with no file at all — so an unseeded token is a gate failure, not something the gate quietly fixes.',\n    version: 1,\n    by: 'thread tokens',\n    runs: 'thread tokens --check',\n  },",
+    },
+    {
+        into: 'ui.ts',
+        list: 'GENERATORS',
+        id: 'materials-generator',
+        source: "  {\n    id: 'materials-generator',\n    at: 'node_modules/@prestack/thread-ui/dist/ui/materials.js',\n    describes: 'The seeder of material files — it reads the materials an app declares and writes the `mat_` file each row names when that file is not there yet. Run with `--check`, the mode the gate runs it in, it writes nothing and refuses instead: a file that disagrees with its row, a `mat_` file no row names, or a row with no file at all — so an unseeded material is a gate failure, not something the gate quietly fixes.',\n    version: 1,\n    by: 'thread materials',\n    runs: 'thread materials --check',\n  },",
+    },
+    {
+        into: 'ui.ts',
+        list: 'GENERATORS',
+        id: 'i18n-generator',
+        source: "  {\n    id: 'i18n-generator',\n    at: 'node_modules/@prestack/thread-ui/dist/ui/generators/i18n.js',\n    describes: 'The generator of an app\\'s wording — it reads the languages the app declares and every message key its interface names, and writes one file per language holding a line for each. It cannot invent a sentence, so a key it has just found arrives holding nothing; run with `--check`, the mode the gate runs it in, it writes nothing and refuses a language file that is not what the declarations produce, and refuses any key left unanswered. It also writes the module the app imports, which states the keys the interface uses as a type, so a language missing one is a compiler error before it is a gate error.',\n    version: 1,\n    by: 'thread i18n',\n    runs: 'thread i18n --check',\n    derives: [\n      {\n        id: 'wording',\n        at: 'app/_generated/wording.ts',\n        describes: 'Every language this app is in, as one module the layout hands to the provider, with the keys the interface names stated as a type so a language missing one is a compiler error.',\n        version: 1,\n        by: 'thread i18n',\n        runs: 'thread i18n --check',\n      },\n    ],\n  },",
+    },
+    {
+        into: 'ui.ts',
+        list: 'GENERATORS',
+        id: 'routes-generator',
+        source: "  {\n    id: 'routes-generator',\n    at: 'node_modules/@prestack/thread-ui/dist/ui/generators/routes.js',\n    describes: 'The generator of the routes, the map, the pages a browser reaches, and the root layout. Nobody types a route. The first page an app declares answers `/`, every other page answers its own name, and a sheet, popover, overlay or toast has no route, so the page under each route follows from the screens sheet. It reads every `navigateTo` the screens and their compositions hold and writes the map: from which screen, through which button, to which screen. A button is the only thing that makes a link. A press that names a sheet, popover, overlay or toast is a link like any other, and the client half opens that screen where somebody already is. A name no screen has, a destination not written out as a name, and a route typed into a screen are each refused by name. The layout imports what the other generators produce. Run with `--check`, the mode the gate runs it in, it writes nothing and refuses a hand edit to any of these files, exactly as the stylesheet is refused.',\n    version: 1,\n    by: 'thread routes',\n    runs: 'thread routes --check',\n    derives: [\n      {\n        id: 'layout',\n        at: 'app/layout.tsx',\n        describes: 'The root layout — it imports what the other generators produce and hands the wording to the provider, so the one file every page passes through is a consequence of the declarations rather than something somebody keeps in step with them.',\n        version: 1,\n        by: 'thread routes',\n        runs: 'thread routes --check',\n      },\n      {\n        id: 'door',\n        at: 'app/_generated/door.tsx',\n        describes: 'This app\\'s own client half. It is written when the app has operations a page can reach, or screens a press can move between. The provider takes something to run an operation with and something to move between screens with, and the layout cannot hand either over: the layout is a server component and the provider is a client one, and a function does not cross that line — \"Functions cannot be passed directly to Client Components\", measured 2026-09-01 as a page that returned 500 on every request while the gate was green. So both are made on the side that uses them. This file imports what the operations half derived and the map, and hands them over itself. The layout renders this and passes only the actor, which is data and crosses the way data does.',\n        version: 1,\n        by: 'thread routes',\n        runs: 'thread routes --check',\n      },\n      {\n        id: 'bundler',\n        at: 'next.config.js',\n        describes: 'Where the bundler resolves from, derived from where the packages actually are. Only written when they live outside this app, which is when a bundler cannot see them and every import fails at run time while the compiler is content.',\n        version: 1,\n        by: 'thread routes',\n        runs: 'thread routes --check',\n      },\n      {\n        id: 'map',\n        at: 'app/_generated/map.ts',\n        describes: 'Every screen this app has, where each one lives, and every way from one to another: from which screen, through which button, to which screen. It is read off every `navigateTo` the screens and their compositions hold, so a button is the only thing that makes a link. The client half moves through it: a press that names a page goes to the address held here, and a press that names a sheet, popover, overlay or toast opens it where somebody already is. A screen no button reaches is printed by `thread routes` rather than found by somebody looking for it.',\n        version: 1,\n        by: 'thread routes',\n        runs: 'thread routes --check',\n      },\n    ],\n  },",
+    },
+    {
+        into: 'ui.ts',
+        list: 'GENERATORS',
+        id: 'dev-generator',
+        source: "  {\n    id: 'dev-generator',\n    at: 'node_modules/@prestack/thread-ui/dist/ui/generators/dev.js',\n    describes: 'The command that runs the app, and the only one here that puts a pixel on a screen — until it existed the framework could build an interface nothing in it could start, because a gate answers whether declarations agree with files and cannot answer whether a button is where somebody says it is not. It is two halves in one word. First it settles this tree: every generator the declarations name is run until the checks stop complaining, which is what `thread create` and `thread run trial` already did and what starting the app was alone in not doing — an app had `thread gate` in front of `next dev`, and a gate refuses a stale file rather than writing it. Then it runs the entry the manifest declares, which is where the gate hook fires and Next is reached. Neither half is written down here: the generators are read off the rows, and `next dev` appears nowhere, so a package attached tomorrow is run by this without this changing and an app served by something else needs no edit. `--ship` swaps the entry for the build. Alone among the generators it carries no `runs:`, because a server stays up until it is stopped and a gate step that never returns is a gate that hangs.',\n    version: 1,\n    by: 'thread dev',\n  },",
+    },
+    {
+        into: 'ui.ts',
+        list: 'GENERATORS',
+        id: 'message-maker',
+        source: "  {\n    id: 'message-maker',\n    at: 'node_modules/@prestack/thread-ui/dist/ui/makers/message.js',\n    describes: 'The maker of a message — asked for in every declared language at the moment the key is made, and refused while any answer is blank, so a key cannot be brought into existence half translated. It is also the only safe way to rename one: a rename moves the wording in every language and rewrites every file in the interface that names it, in one run, where doing it by hand leaves a key half moved and one sentence missing at run time.',\n    version: 1,\n    by: 'thread create message',\n  },",
+    },
+    {
+        into: 'ui.ts',
+        list: 'GENERATORS',
+        id: 'show-generator',
+        source: "  {\n    id: 'show-generator',\n    at: 'node_modules/@prestack/thread-ui/dist/ui/generators/show.js',\n    describes: 'The reader of what nothing reaches — style guide rows nothing names, variants no element accepts, elements wearing nothing, and signals no element is seen to raise. It writes nothing and refuses nothing, because none of those is wrong on its own: a value declared ahead of the thing that will use it is ordinary, and a report that refused it would teach people to stop reading. It exists because the gate answers whether declarations agree with each other and cannot answer whether anything reaches them, and the difference between those two questions cost six capabilities in one week — each declared, typechecked, generated, and unable to run.',\n    version: 1,\n    by: 'thread show',\n  },",
+    },
+    {
+        into: 'ui.ts',
+        list: 'GENERATORS',
+        id: 'variants-generator',
+        source: "  {\n    id: 'variants-generator',\n    at: 'node_modules/@prestack/thread-ui/dist/ui/generators/variants.js',\n    describes: 'The seeder of variant files — it reads the variants an app declares and writes the `var_` file each row names when that file is not there yet. Run with `--check`, the mode the gate runs it in, it writes nothing and refuses instead: a file that disagrees with its row, a `var_` file no row names, or a row with no file at all. It is the last of the three file-backed sheets to get this, and it was the one that needed it — a variant file nothing declared sat in the framework unnoticed until two readers found it by hand, because no gate could.',\n    version: 1,\n    by: 'thread variants',\n    runs: 'thread variants --check',\n  },",
+    },
+    {
+        into: 'ui.ts',
+        list: 'GENERATORS',
+        id: 'elements-generator',
+        source: "  {\n    id: 'elements-generator',\n    at: 'node_modules/@prestack/thread-ui/dist/ui/generators/elements.js',\n    describes: 'The writer of element files — it reads the tag an element row states, whether it arranges other things and the signals it raises, and writes the component out of those three facts. An element file stops being a place a tag is typed and becomes a derived thing. Founder, 2026-08-31: \"elements does not hold anything that can render anything, its functionality only . only our compiler can translate things into proper css and html and only at build time do we produce a renderable result.\" Only a row that names this generator in its own `derives` is written, so an element carrying real behaviour is left exactly as it is until it is converted. Run with `--check`, the mode the gate runs it in, it writes nothing and refuses a file that differs from what its row produces.',\n    version: 1,\n    by: 'thread elements',\n    runs: 'thread elements --check',\n  },",
+    },
+    {
+        into: 'ui.ts',
+        list: 'GENERATORS',
+        id: 'icons-generator',
+        source: "  {\n    id: 'icons-generator',\n    at: 'node_modules/@prestack/thread-ui/dist/ui/generators/icons.js',\n    describes: 'The generator of the icon module — it reads which library the icon rows name and which meanings they declare, and writes the one module that imports exactly those symbols and installs them. A meaning is what an element asks for, so changing the library row redraws every icon in the app and rewrites nothing else. Run with `--check`, the mode the gate runs it in, it writes nothing and refuses a generated file that does not match the rows.',\n    version: 1,\n    by: 'thread icons',\n    runs: 'thread icons --check',\n    derives: [\n      {\n        id: 'symbols',\n        at: 'app/_generated/icons.ts',\n        describes: 'The one module importing exactly the symbols the icon rows name, from the one library they name.',\n        version: 1,\n        by: 'thread icons',\n        runs: 'thread icons --check',\n      },\n    ],\n  },",
+    },
+    {
+        into: 'ui.ts',
+        list: 'GENERATORS',
+        id: 'animations-generator',
+        source: "  {\n    id: 'animations-generator',\n    at: 'node_modules/@prestack/thread-ui/dist/ui/animations.js',\n    describes: 'The seeder of animation files — it reads the animations an app declares and writes the `anm_` file each row names when that file is not there yet. Run with `--check`, the mode the gate runs it in, it writes nothing and refuses instead: a file that disagrees with its row, an `anm_` file no row names, or a row with no file at all — so an unseeded animation is a gate failure, not something the gate quietly fixes.',\n    version: 1,\n    by: 'thread animations',\n    runs: 'thread animations --check',\n  },",
+    },
+    {
+        into: 'ui.ts',
+        list: 'GENERATORS',
+        id: 'compositions-generator',
+        source: "  {\n    id: 'compositions-generator',\n    at: 'node_modules/@prestack/thread-ui/dist/ui/compositions.js',\n    describes: 'The seeder of composition files — it reads the compositions an app declares and writes the `cmp_` file each row names when that file is not there yet, so a composition begins by being declared rather than by somebody remembering to add a file beside the row. Run with `--check`, the mode the gate runs it in, it writes nothing and refuses instead: a row whose file is absent, a `cmp_` file no row names, and an import that is not a declared element, a declared composition or the door — so a composition that did not come from the CLI, or that reaches something nothing declares, stops the build rather than rendering.',\n    version: 1,\n    by: 'thread compositions',\n    runs: 'thread compositions --check',\n  },",
+    },
+    {
+        into: 'ui.ts',
+        list: 'GENERATORS',
+        id: 'screens-generator',
+        source: "  {\n    id: 'screens-generator',\n    at: 'node_modules/@prestack/thread-ui/dist/ui/screens.js',\n    describes: 'The seeder of screen files — it reads the screens an app declares and writes the `scr_` file each row names when that file is not there yet, so a screen begins by being declared and wears the arrangement its row states rather than carrying one somebody wrote beside it. Run with `--check`, the mode the gate runs it in, it writes nothing and refuses instead: a row whose file is absent, a `scr_` file no row names, and an import that is not a declared composition, a declared element or the door.',\n    version: 1,\n    by: 'thread screens',\n    runs: 'thread screens --check',\n  },",
+    },
+    {
+        into: 'ui.ts',
+        list: 'GENERATORS',
+        id: 'react-compiler',
+        source: "  {\n    id: 'react-compiler',\n    at: 'node_modules/@prestack/thread-ui/dist/ui/generators/react.js',\n    describes: 'The compiler of compositions and screens — it runs inside `thread build`, on every file on its way into the artifact, and turns what a person wrote into what React runs. `Button.primary` becomes a tag wearing the class its variant resolves to, and a name of a place becomes the class the composition or screen around it arranges, so neither is worked out again on every render. It writes nothing to disk: the file a person wrote stays the file a person wrote, and the compiled form exists only in the artifact. Everything it does not own — a condition, a list, a hook somebody wrote — is copied through unchanged.',\n    version: 1,\n    by: 'thread build',\n  },",
+    },
+];
+export const ATTACH_HOME = `node_modules/${named('ui')}/dist`;
+const SAID = {
+    on: '2026-09-09',
+    said: 'No reason at all for 15....elements are all ONE THING, screens ONE THING, ompositions ONE THING, tokens ONE THING....and so on.',
+};
+const FIELDS = {
+    section: { is: 'string', means: 'The heading a row sits under in its sheet, so rows that belong together are read together.' },
+    token: { is: 'string' },
+    is: {
+        is: 'string',
+        means: 'What a row is, written out as its value: a colour, a media query, the name of a language, the library every icon is drawn from.',
+    },
+    asks: {
+        is: 'Readonly<Record<string, string | number>>',
+        means: 'What a token\'s rule is handed instead of a value, written name=value and separated by commas: offset=2, blur=4.',
+    },
+    sets: {
+        is: 'Readonly<Record<string, string>>',
+        means: 'What a row sets, written name=value and separated by commas. For a font role, a composition or an element it is a property and the style guide row it takes, gap=space-3; for an icon it is a library and what this meaning is called there.',
+    },
+    modes: {
+        is: 'Readonly<Record<string, string | Readonly<Record<string, string>>>>',
+        means: 'How what a row sets changes under a mode, written mode.property=row and separated by commas, dark.background=colour-surface, or mode=row where the row itself is the value.',
+    },
+    places: {
+        is: 'Readonly<Record<string, Readonly<Record<string, string>>>>',
+        means: 'The named places inside a thing and what each one sets, written place.property=row and separated by commas: hero.display=layout-flex.',
+    },
+    works: {
+        is: 'string',
+        means: 'The file beside an element that holds the code it runs, as a path from the element\'s own file: ./price-tag.works.tsx.',
+    },
+    measures: {
+        is: 'readonly string[]',
+        means: 'The values an element works out while it runs and hands to the stylesheet by name, separated by commas.',
+    },
+    reads: { is: 'string', means: 'What an element reads as to assistive technology: picture, progress, divider, grouping.' },
+    gives: { is: 'readonly string[]', means: 'The attributes an element hands its tag from what it carries, separated by commas.' },
+    keeps: { is: 'boolean', means: 'Whether an element keeps state of its own between renders.' },
+    animates: { is: 'boolean', means: 'Whether an element plays the animation the variant it wears names.' },
+    shows: { is: 'string', means: 'Which of the things an element carries is shown as its wording.' },
+    called: { is: 'string', means: 'The landmark an element is announced as: nav.breadcrumb.' },
+    wires: { is: 'string', means: 'The function in an element\'s works file that wires its events.' },
+    dresses: {
+        is: 'string',
+        means: 'The named place inside an element that wears the variant, when the variant is not worn by the element itself.',
+    },
+    themes: {
+        is: 'Readonly<Record<string, { readonly is?: string; readonly modes?: Readonly<Record<string, string>> }>>',
+        means: 'How a value changes under a theme, written theme.is=value, or theme.modes.mode=value where the theme has a dark and a light of its own, separated by commas.',
+    },
+    wears: { is: 'readonly string[]', means: 'The elements that accept a variant, by their names and separated by commas: Button, Link.' },
+    selector: {
+        is: 'string',
+        means: 'The CSS selector that is true while a signal holds. One the browser sets has its own, :hover; one an element raises is a data attribute named after the signal, and that is what is used when this is left blank.',
+    },
+    arranges: { is: 'boolean', means: 'Whether a thing arranges other things inside it, which is what lets it take children.' },
+    tag: {
+        is: 'string | Readonly<Record<string, string>>',
+        means: 'The HTML tag an element is written as: button, div, svg. When the tag depends on what the element carries, name that prop as by and give one entry per value, separated by commas: by=as, image=img, video=video.',
+    },
+    raises: { is: 'readonly string[]', means: 'The signals an element raises, separated by commas, each one a row in the signals sheet.' },
+    carries: {
+        is: 'Readonly<Record<string, string>>',
+        means: 'What an element takes as props, written name=kind and separated by commas: label=wording, disabled=flag.',
+    },
+    always: { is: 'readonly string[]', means: 'The signals that hold for as long as an element is on screen, separated by commas.' },
+    plays: {
+        is: 'Readonly<Record<string, string>>',
+        means: 'What a screen or a composition plays arriving and leaving, each naming an animation: in=rise, out=fall.',
+    },
+    derives: { is: 'readonly Threaded[]' },
+};
+const SHAPES = Object.fromEntries(Object.entries(FIELDS).map(([key, one]) => [key, `    readonly ${key}?: ${one.is}`]));
+const CONCEPTS = Object.entries(FIELDS).flatMap(([id, one]) => one.means === undefined ? [] : [{ id, means: one.means }]);
+function concept(one) {
+    return [
+        '  {',
+        `    id: ${quoted(one.id)},`,
+        "    at: '_threads/concepts.ts',",
+        `    describes: ${quoted(one.means)},`,
+        '    version: 1,',
+        '    cites: [',
+        `      { on: ${quoted(SAID.on)}, said: ${quoted(SAID.said)} },`,
+        '    ],',
+        '  },',
+    ].join('\n');
+}
+function stated(rows, always = []) {
+    const held = new Set(always);
+    for (const one of rows) {
+        for (const key of Object.keys(SHAPES)) {
+            if (one[key] !== undefined)
+                held.add(key);
+        }
+    }
+    return Object.keys(SHAPES).filter((key) => held.has(key));
+}
+function inside(node) {
+    return [...(node.holds ?? []), ...(node.declares ?? [])];
+}
+function quoted(value) {
+    return `'${value.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`;
+}
+function installed(at) {
+    return at.replace(/^thread\/ui\/(.*)\.tsx?$/, `${ATTACH_HOME}/$1.js`);
+}
+function literal(value) {
+    return typeof value === 'number' ? String(value) : quoted(value);
+}
+const BARE = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+function pairs(held) {
+    const each = Object.entries(held).map(([key, value]) => `${BARE.test(key) ? key : quoted(key)}: ${typeof value === 'object' ? pairs(value) : literal(value)}`);
+    return `{ ${each.join(', ')} }`;
+}
+function listed(held) {
+    return `[${held.map(quoted).join(', ')}]`;
+}
+function themed(held) {
+    const each = Object.entries(held).map(([key, one]) => {
+        const parts = [
+            ...(one.is === undefined ? [] : [`is: ${quoted(one.is)}`]),
+            ...(one.modes === undefined ? [] : [`modes: ${pairs(one.modes)}`]),
+        ];
+        return `${key}: { ${parts.join(', ')} }`;
+    });
+    return `{ ${each.join(', ')} }`;
+}
+const WRITTEN = new Set([
+    'id', 'at', 'describes', 'version', 'derives', 'holds',
+    'section', 'token', 'is', 'asks', 'sets', 'modes', 'places', 'themes', 'wears', 'selector',
+    'arranges', 'plays',
+]);
+function valued(held) {
+    if (typeof held === 'string')
+        return quoted(held);
+    if (typeof held === 'boolean' || typeof held === 'number')
+        return String(held);
+    if (Array.isArray(held))
+        return held.every((one) => typeof one === 'string') ? listed(held) : undefined;
+    if (held !== null && typeof held === 'object') {
+        return pairs(held);
+    }
+    return undefined;
+}
+function rest(one) {
+    const out = [];
+    for (const [key, held] of Object.entries(one)) {
+        if (WRITTEN.has(key) || held === undefined)
+            continue;
+        const said = valued(held);
+        if (said !== undefined)
+            out.push(`      ${key}: ${said},`);
+    }
+    return out;
+}
+function row(one, file, sheet) {
+    const held = one.at === undefined || one.at === sheet;
+    const derives = (one.derives ?? []).filter((each) => installed(each.at) === each.at);
+    return [
+        '    {',
+        `      id: ${quoted(one.id)},`,
+        ...(one.section === undefined ? [] : [`      section: ${quoted(one.section)},`]),
+        ...(one.token === undefined ? [] : [`      token: ${quoted(one.token)},`]),
+        ...(one.is === undefined ? [] : [`      is: ${quoted(one.is)},`]),
+        ...(one.asks === undefined ? [] : [`      asks: ${pairs(one.asks)},`]),
+        ...(one.sets === undefined ? [] : [`      sets: ${pairs(one.sets)},`]),
+        ...(one.modes === undefined ? [] : [`      modes: ${pairs(one.modes)},`]),
+        ...(one.places === undefined ? [] : [`      places: ${pairs(one.places)},`]),
+        ...(one.themes === undefined ? [] : [`      themes: ${themed(one.themes)},`]),
+        ...(one.wears === undefined ? [] : [`      wears: ${listed(one.wears)},`]),
+        ...(one.selector === undefined ? [] : [`      selector: ${quoted(one.selector)},`]),
+        ...(one.arranges === undefined ? [] : [`      arranges: ${String(one.arranges)},`]),
+        ...(one.plays === undefined ? [] : [`      plays: ${pairs(one.plays)},`]),
+        ...rest(one),
+        ...(derives.length === 0
+            ? []
+            : [
+                '      derives: [',
+                ...derives.flatMap((each) => [
+                    '        {',
+                    `          id: ${quoted(each.id)},`,
+                    `          at: ${quoted(each.at)},`,
+                    ...(each.by === undefined ? [] : [`          by: ${quoted(each.by)},`]),
+                    ...(each.runs === undefined ? [] : [`          runs: ${quoted(each.runs)},`]),
+                    `          describes: ${quoted(each.describes)},`,
+                    '          version: 1,',
+                    '        },',
+                ]),
+                '      ],',
+            ]),
+        ...(held ? [] : [`      at: ${quoted(installed(one.at ?? ''))},`]),
+        `      describes: ${quoted(one.describes)},`,
+        '      version: 1,',
+        '    },',
+    ].join('\n');
+}
+const ARRANGES = {
+    composition: ['sets', 'modes', 'places', 'plays'],
+    screen: ['sets', 'modes', 'places', 'plays'],
+    styleguide: ['themes'],
+    element: ['tag', 'raises', 'carries', 'always', 'places', 'works', 'measures', 'reads', 'gives', 'keeps', 'animates', 'shows', 'called', 'wires', 'dresses'],
+};
+function source(node, file, rows) {
+    const extra = stated(rows, ARRANGES[node.id] ?? []).map((key) => SHAPES[key] ?? '');
+    const authors = node.declares !== undefined || rows.some((one) => one.at !== undefined && one.at !== node.at);
+    const values = node.holds !== undefined || rows.some((one) => one.at === undefined || one.at === node.at);
+    const own = node.id
+        .split('-')
+        .map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`)
+        .join('');
+    const widened = (base) => extra.length === 0 ? base : `(${base} & {\n${extra.join('\n')}\n  })`;
+    const lists = [
+        ...(authors || !values ? [`  readonly declares?: readonly ${widened('Threaded')}[]`] : []),
+        ...(values ? [`  readonly holds?: readonly ${widened("Omit<Threaded, 'at'>")}[]`] : []),
+    ];
+    const bespoke = extra.length > 0 || values || node.files !== undefined;
+    const shape = bespoke
+        ? `
+export interface ${own} extends Threaded {
+${[...(node.files === undefined ? [] : ['  readonly files?: string']), ...lists].join('\n')}
+}
+`
+        : '';
+    const held = [
+        ...(node.files === undefined ? [] : [`  files: ${quoted(node.files)},`]),
+        ...(authors || !values ? ['  declares: [],'] : []),
+        ...(values ? ['  holds: [],'] : []),
+    ];
+    const wants = shape.includes('Condition');
+    return `import type { Threaded } from '../core/thread.ts'${wants ? `\nimport type { Condition } from '../core/condition.ts'` : ''}
+${shape}
+export const ${node.id.toUpperCase()}: ${bespoke ? own : 'Threaded'} = {
+  id: ${quoted(node.id)},
+  at: ${quoted(`_threads/${file}`)},
+  describes: ${quoted(node.describes)},
+  version: 1,
+${held.join('\n')}
+}
+`;
+}
+const LISTS = [
+    { node: TOKENS, file: 'tokens.ts' },
+    { node: FONTS, file: 'fonts.ts' },
+    { node: ICONS, file: 'icons.ts' },
+    { node: ANIMATIONS, file: 'animations.ts' },
+    { node: SIGNALS, file: 'signals.ts' },
+    { node: MATERIALS, file: 'materials.ts' },
+    { node: VARIANTS, file: 'variants.ts' },
+    { node: STYLEGUIDES, file: 'styleguides.ts' },
+    { node: LOCALIZATIONS, file: 'localizations.ts' },
+    { node: MODES, file: 'modes.ts' },
+    { node: THEMES, file: 'themes.ts' },
+    { node: ELEMENTS, file: 'elements.ts' },
+    { node: COMPOSITIONS, file: 'compositions.ts' },
+    { node: SCREENS, file: 'screens.ts' },
+];
+function child(one) {
+    return [
+        '    {',
+        `      id: ${quoted(one.node.id)},`,
+        `      at: ${quoted(`_threads/${one.file}`)},`,
+        `      describes: ${quoted(one.node.describes)},`,
+        '      version: 1,',
+        '    },',
+    ].join('\n');
+}
+function sectioned(one) {
+    const last = new Map();
+    return (one.rows ?? inside(one.node)).map((held) => {
+        const list = held.at === undefined || held.at === one.node.at ? 'holds' : 'declares';
+        const before = last.get(list);
+        const section = held.section ?? '';
+        last.set(list, section);
+        const turned = before !== undefined && before !== section;
+        return {
+            into: one.file,
+            list,
+            id: held.id,
+            source: `${turned ? '\n' : ''}${row(held, one.file, one.node.at)}`,
+        };
+    });
+}
+const UI_SOURCE = `import type { Threaded } from '../core/thread.ts'
+
+export const UI: Threaded = {
+${SEEDED.declares.split('\n').slice(1, -1).map((line) => line.slice(4)).join('\n')}
+  declares: [],
+}
+
+export const GENERATORS: readonly Threaded[] = []
+`;
+const RETIRED = [
+    {
+        into: 'tokens.ts',
+        list: 'holds',
+        id: 'font',
+        why: 'a font is not a token — the fonts sheet holds faces, sizes and appearance directly, so there is no variable of this kind for a style guide to give a value to',
+    },
+    ...['sm', 'md', 'lg'].map((one) => ({
+        into: 'styleguides.ts',
+        list: 'holds',
+        id: `icon-${one}`,
+        why: 'the style guide holds no icon size — `icons.ts` does, and it is the one place a symbol is measured. These rows and a constant inside the package were both claiming to decide it, and the constant was what anything actually drew at, so changing the row moved the CSS variable and left every icon the size it already was',
+    })),
+    ...['link', 'glyph', 'avatar', 'skeleton', 'spinner'].map((one) => ({
+        into: 'variants.ts',
+        list: 'declares',
+        id: one,
+        why: `a variant sharing a word with the element that wears it — \`${one}\` was coined twice, once as the element and once as the look, with two different meanings. The framework's own rule refuses that, and an app made entirely by these commands failed its own descent on five words this package had shipped. Renamed to \`${one}-\` plus what distinguishes it`,
+    })),
+    ...['icon', 'icon-ghost', 'icon-border', 'label-icon', 'elevated'].map((one) => ({
+        into: 'variants.ts',
+        list: 'declares',
+        id: `button-${one}`,
+        why: 'a variant may not decide what a button CONTAINS — a symbol, a word or both is the composition\'s to arrange, and four variants existed only to answer it. `button-ghost`, `button-fill` and the rest each serve every shape of content. `button-elevated` is withdrawn as simply poor',
+    })),
+    ...['filled', 'outlined', 'plain'].map((one) => ({
+        into: 'materials.ts',
+        list: 'declares',
+        id: one,
+        why: 'not a material — a background, an ink and a border width are three style guide rows, and wrapping them in a material only added a second place to look. A material is for what composes into one appearance worth naming: glass, a real relief, a glaze. The variants that wore these now name the rows directly',
+    })),
+    ...['primary', 'secondary'].map((one) => ({
+        into: 'variants.ts',
+        list: 'declares',
+        id: `button-${one}`,
+        why: 'a second name for something the button family already carries — `button-primary` is `button-fill` and `button-secondary` is `button-border`. Two names for one look is the defect this framework refuses everywhere else, and it was shipping it in the one place an app looks first',
+    })),
+    ...['sans', 'serif', 'mono', 'display'].map((one) => ({
+        into: 'styleguides.ts',
+        list: 'holds',
+        id: `font-${one}`,
+        why: 'the style guide holds no font — a font is not a token value, and the fonts sheet is the source for faces',
+    })),
+    ...['display', 'heading', 'body', 'label'].map((one) => ({
+        into: 'variants.ts',
+        list: 'declares',
+        id: one,
+        why: 'a type role, not a variant — it set a face, a size and a weight, all of which the fonts sheet now decides',
+    })),
+];
+export const ATTACH = {
+    attaches: SEEDED.attaches,
+    id: SEEDED.id,
+    needs: {
+        '@types/react': '^19.0.0',
+        '@types/react-dom': '^19.0.0',
+        next: '^16.0.0',
+        react: '^19.0.0',
+        'react-dom': '^19.0.0',
+    },
+    rows: [
+        ...CONCEPTS.map((one) => ({
+            into: 'concepts.ts',
+            list: 'CONCEPTS',
+            id: one.id,
+            source: concept(one),
+        })),
+        ...LISTS.map((one) => ({
+            into: 'ui.ts',
+            list: 'declares',
+            id: one.node.id,
+            source: child(one),
+        })),
+        ...LISTS.flatMap((one) => sectioned(one)),
+        ...SHIPPED,
+    ],
+    retires: RETIRED,
+    declares: SEEDED.declares,
+    writes: [
+        { file: 'ui.ts', source: UI_SOURCE },
+        ...LISTS.map((one) => ({
+            file: one.file,
+            source: source(one.node, one.file, one.rows ?? inside(one.node)),
+        })),
+    ],
+};

package/dist/ui/charts.d.ts

@@ -0,0 +1,32 @@
+import type { MessageKey } from './content.tsx';
+export type Row = Readonly<Record<string, unknown>>;
+export type WhenTight = 'scroll' | 'bucket' | 'wrap' | 'shrink';
+export interface ChartBase {
+    readonly rows: readonly Row[];
+    readonly titleKey?: MessageKey;
+    readonly whenTight?: WhenTight;
+    readonly format?: string;
+}
+export declare const num: (row: Row, key: string) => number;
+export declare const str: (row: Row, key: string) => string;
+export declare function useRamp(count: number): readonly string[];
+export declare function placed(element: string, place: string): string;
+export declare function measured(held: Readonly<Record<string, string | number>>): Record<string, string | number>;
+export declare function EmptyFrame({ className }: {
+    className?: string;
+}): React.ReactElement;
+export interface SeriesProps extends ChartBase {
+    readonly value: string;
+    readonly at: string;
+    readonly by?: string;
+}
+export declare function polyline(values: readonly number[], width: number, height: number): string;
+export interface CategoryProps extends ChartBase {
+    readonly value: string;
+    readonly by: string;
+}
+export interface TwoAxisProps extends ChartBase {
+    readonly x: string;
+    readonly y: string;
+    readonly value?: string;
+}

package/dist/ui/charts.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { seriesRamp } from "./series.js";
+import { classOfElement } from "./variant.js";
+import { useUi } from "./wrappers.js";
+export const num = (row, key) => {
+    const v = row[key];
+    return typeof v === 'number' ? v : Number(v ?? 0);
+};
+export const str = (row, key) => String(row[key] ?? '');
+export function useRamp(count) {
+    const { palette } = useUi();
+    return seriesRamp(palette.accent, palette.surface, Math.max(1, count));
+}
+export function placed(element, place) {
+    return `${classOfElement(element)}-${place}`;
+}
+export function measured(held) {
+    const out = {};
+    for (const [name, value] of Object.entries(held))
+        out[`--${name}`] = value;
+    return out;
+}
+export function EmptyFrame({ className }) {
+    return _jsx("div", { className: className, "data-empty": "true" });
+}
+export function polyline(values, width, height) {
+    if (values.length === 0)
+        return '';
+    const max = Math.max(...values);
+    const min = Math.min(...values, 0);
+    const span = max - min || 1;
+    const step = values.length === 1 ? 0 : width / (values.length - 1);
+    return values.map((v, i) => `${(i * step).toFixed(2)},${(height - ((v - min) / span) * height).toFixed(2)}`).join(' ');
+}

package/dist/ui/checked.d.ts

@@ -0,0 +1,19 @@
+import { ELEMENTS } from './elements.ts';
+import { VARIANTS } from './variants.ts';
+type Shipped = (typeof VARIANTS)['declares'][number];
+export interface Wearing {
+}
+export interface Dispatching {
+}
+export type VariantsFor<E extends string> = Shipped extends infer One ? One extends {
+    readonly id: string;
+    readonly wears: readonly string[];
+} ? E extends One['wears'][number] ? Camel<One['id']> : never : never : never;
+type Pascal<S extends string> = S extends `${infer Head}-${infer Rest}` ? `${Capitalize<Head>}${Pascal<Rest>}` : Capitalize<S>;
+type Camel<S extends string> = S extends `${infer Head}-${infer Rest}` ? `${Head}${Pascal<Rest>}` : S;
+export type ArrangementElement = (typeof ELEMENTS)['declares'][number] extends infer One ? One extends {
+    readonly arranges: true;
+    readonly id: infer Id extends string;
+} ? Pascal<Id> : never : never;
+export declare function idOf(name: string): string;
+export {};

package/dist/ui/checked.js

@@ -0,0 +1,3 @@
+export function idOf(name) {
+    return name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}

package/dist/ui/collector.d.ts

@@ -0,0 +1,32 @@
+export interface ClientEvent {
+    readonly property: 'interaction' | 'visit' | 'consent';
+    readonly screen?: string;
+    readonly element?: string;
+    readonly name?: string;
+    readonly action?: string;
+    readonly refusedBy?: string;
+    readonly attempt?: number;
+    readonly at: number;
+    readonly seq: number;
+}
+export interface CollectorOptions {
+    readonly endpoint: string;
+    readonly allowed: () => boolean;
+    readonly sample?: number;
+    readonly maxBatch?: number;
+    readonly intervalMs?: number;
+    readonly now?: () => number;
+    readonly random?: () => number;
+    readonly fetch?: typeof globalThis.fetch;
+    readonly beacon?: (url: string, body: string) => boolean;
+}
+export type RecordedEvent = Omit<ClientEvent, 'at' | 'seq'>;
+export interface Collector {
+    record: (event: RecordedEvent) => void;
+    flush: () => Promise<void>;
+    stop: () => void;
+    dropped: () => number;
+    pending: () => number;
+}
+export declare const INERT_COLLECTOR: Collector;
+export declare function createCollector(options: CollectorOptions): Collector;