@prestack/thread-ui 0.0.1 → 0.0.2

package/dist/ui/fonts.ts

@@ -0,0 +1,355 @@
+import type { Threaded } from '@prestack/thread/core/thread'
+
+import { sheeted, type Holds } from './token.ts'
+
+export const FACES = ['body', 'heading', 'display', 'mono'] as const
+export type Face = (typeof FACES)[number]
+
+export interface FontFamily {
+
+  readonly name: string
+
+  readonly module: string
+
+  readonly file: string
+
+  readonly weight: string
+
+  readonly range: string
+
+  readonly licence: string
+
+  readonly fallback: string
+}
+
+export interface FontSet {
+  readonly name: string
+
+  readonly families: Readonly<Partial<Record<Face, FontFamily>>>
+}
+
+const SANS_FALLBACK = 'ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif'
+const SERIF_FALLBACK = 'ui-serif, Georgia, Cambria, Times New Roman, serif'
+const MONO_FALLBACK = 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace'
+
+const LATIN =
+  'U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD'
+
+const OFL = 'SIL Open Font Licence 1.1'
+
+const INTER: FontFamily = {
+  name: 'Inter Variable',
+  module: '@fontsource-variable/inter',
+  file: 'files/inter-latin-wght-normal.woff2',
+  weight: '100 900',
+  range: LATIN,
+  licence: OFL,
+  fallback: SANS_FALLBACK,
+}
+
+const JETBRAINS_MONO: FontFamily = {
+  name: 'JetBrains Mono Variable',
+  module: '@fontsource-variable/jetbrains-mono',
+  file: 'files/jetbrains-mono-latin-wght-normal.woff2',
+  weight: '100 800',
+  range: LATIN,
+  licence: OFL,
+  fallback: MONO_FALLBACK,
+}
+
+const WORK_SANS: FontFamily = {
+  name: 'Work Sans Variable',
+  module: '@fontsource-variable/work-sans',
+  file: 'files/work-sans-latin-wght-normal.woff2',
+  weight: '100 900',
+  range: LATIN,
+  licence: OFL,
+  fallback: SANS_FALLBACK,
+}
+
+const SPACE_GROTESK: FontFamily = {
+  name: 'Space Grotesk Variable',
+  module: '@fontsource-variable/space-grotesk',
+  file: 'files/space-grotesk-latin-wght-normal.woff2',
+  weight: '300 700',
+  range: LATIN,
+  licence: OFL,
+  fallback: SANS_FALLBACK,
+}
+
+const ROBOTO_MONO: FontFamily = {
+  name: 'Roboto Mono Variable',
+  module: '@fontsource-variable/roboto-mono',
+  file: 'files/roboto-mono-latin-wght-normal.woff2',
+  weight: '100 700',
+  range: LATIN,
+  licence: OFL,
+  fallback: MONO_FALLBACK,
+}
+
+const SOURCE_SERIF: FontFamily = {
+  name: 'Source Serif 4 Variable',
+  module: '@fontsource-variable/source-serif-4',
+  file: 'files/source-serif-4-latin-wght-normal.woff2',
+  weight: '200 900',
+  range: LATIN,
+  licence: OFL,
+  fallback: SERIF_FALLBACK,
+}
+
+const PLAYFAIR_DISPLAY: FontFamily = {
+  name: 'Playfair Display Variable',
+  module: '@fontsource-variable/playfair-display',
+  file: 'files/playfair-display-latin-wght-normal.woff2',
+  weight: '400 900',
+  range: LATIN,
+  licence: OFL,
+  fallback: SERIF_FALLBACK,
+}
+
+const SOURCE_CODE_PRO: FontFamily = {
+  name: 'Source Code Pro Variable',
+  module: '@fontsource-variable/source-code-pro',
+  file: 'files/source-code-pro-latin-wght-normal.woff2',
+  weight: '200 900',
+  range: LATIN,
+  licence: OFL,
+  fallback: MONO_FALLBACK,
+}
+
+const LIBRE_BASKERVILLE: FontFamily = {
+  name: 'Libre Baskerville Variable',
+  module: '@fontsource-variable/libre-baskerville',
+  file: 'files/libre-baskerville-latin-wght-normal.woff2',
+  weight: '400 700',
+  range: LATIN,
+  licence: OFL,
+  fallback: SERIF_FALLBACK,
+}
+
+const SETS: Readonly<Record<string, FontSet>> = {
+
+  inter: {
+    name: 'inter',
+    families: { body: INTER, heading: INTER, display: INTER, mono: JETBRAINS_MONO },
+  },
+
+  grotesk: {
+    name: 'grotesk',
+    families: { body: WORK_SANS, heading: SPACE_GROTESK, display: SPACE_GROTESK, mono: ROBOTO_MONO },
+  },
+
+  editorial: {
+    name: 'editorial',
+    families: { body: SOURCE_SERIF, heading: SOURCE_SERIF, display: PLAYFAIR_DISPLAY, mono: SOURCE_CODE_PRO },
+  },
+
+  libre: {
+    name: 'libre',
+    families: { body: LIBRE_BASKERVILLE, heading: LIBRE_BASKERVILLE, display: LIBRE_BASKERVILLE, mono: SOURCE_CODE_PRO },
+  },
+}
+
+const SET_REGISTRY = new Map<string, FontSet>(Object.entries(SETS))
+
+export function defineFontSet(set: FontSet): void {
+  if (SET_REGISTRY.has(set.name)) throw new Error(`font set "${set.name}" is already registered`)
+
+  const faces = new Set<string>(FACES)
+  for (const face of Object.keys(set.families).sort()) {
+    if (!faces.has(face)) {
+      throw new Error(
+        `font set "${set.name}" serves "${face}", which is not a face. Faces: ${[...FACES].sort().join(', ')}`,
+      )
+    }
+  }
+
+  SET_REGISTRY.set(set.name, set)
+}
+
+export function fontSets(): readonly FontSet[] {
+  return [...SET_REGISTRY.values()].sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0))
+}
+
+export function fontSet(name: string): FontSet | undefined {
+  return SET_REGISTRY.get(name)
+}
+
+export function fontFaces(): readonly string[] {
+  return [...FACES].sort()
+}
+
+export function fontModules(): readonly string[] {
+  const modules = new Set<string>()
+  for (const set of fontSets()) {
+    for (const family of Object.values(set.families)) modules.add(family.module)
+  }
+  return [...modules].sort()
+}
+
+export function fontIn(set: string, face: string): FontFamily | undefined {
+  return SET_REGISTRY.get(set)?.families[face as Face]
+}
+
+export function fontVariable(face: string): string {
+  return `--thread-font-${face}`
+}
+
+export function fontStack(family: FontFamily): string {
+  return `'${family.name}', ${family.fallback}`
+}
+
+const GENERIC: Readonly<Record<Face, string>> = {
+  body: 'sans-serif',
+  heading: 'sans-serif',
+  display: 'sans-serif',
+  mono: 'monospace',
+}
+
+export function fontFor(face: Face): string {
+  return `var(${fontVariable(face)}, ${GENERIC[face]})`
+}
+
+export interface FontRole {
+  readonly face: Face
+
+  readonly size: string
+
+  readonly weight: string
+
+  readonly leading: string
+
+  readonly tracking: string
+
+  readonly case?: 'uppercase' | 'none'
+
+  readonly style?: 'italic' | 'normal'
+}
+
+type Row = Omit<Threaded, 'at'> & {
+  readonly section?: string
+  readonly is?: string
+  readonly sets?: Readonly<Record<string, string>>
+}
+
+const sectionOf = (face: string, id: string): string => {
+  if (id === 'mono') return 'fixed-width'
+  if (face === 'body') return 'reading'
+  return 'headline'
+}
+
+const role = <Id extends string>(
+  id: Id,
+  sets: FontRole,
+  describes: string,
+): { readonly id: Id; readonly sets: FontRole; readonly describes: string } => ({ id, sets, describes })
+
+const ROLES = [
+  role('display', { face: 'display', size: '40px', weight: '700', leading: '1.15', tracking: '-0.02em' },
+    'The one line a screen is built around, used once. Large enough that its leading has to be pulled in and its letters set tight, which is why it is its own role rather than a bigger heading.'),
+  role('title', { face: 'heading', size: '32px', weight: '700', leading: '1.15', tracking: '-0.02em' },
+    'What the page is called. The first wording a reader resolves after the display line, and the last one allowed to be this heavy.'),
+  role('heading', { face: 'heading', size: '24px', weight: '600', leading: '1.15', tracking: '-0.02em' },
+    'What a section is called — the size that gives a screen its structure, and the one a reader scans for.'),
+  role('subheading', { face: 'heading', size: '20px', weight: '600', leading: '1.5', tracking: '0' },
+    'What a part of a section is called. Set at running leading rather than tight, because at this size the lines are read rather than scanned.'),
+  role('lead', { face: 'body', size: '20px', weight: '400', leading: '1.5', tracking: '0' },
+    'The paragraph that opens a page — body wording at a heading\'s size, so it carries weight without being a heading.'),
+  role('body', { face: 'body', size: '16px', weight: '400', leading: '1.5', tracking: '0' },
+    'Running text, and the size every other role is judged against. What wording is set in unless something says otherwise.'),
+  role('label', { face: 'body', size: '13px', weight: '500', leading: '1.5', tracking: '0' },
+    'Wording attached to a control — the name above a field, the words on a button. Slightly forward of body, because a label names a thing rather than describing it.'),
+  role('caption', { face: 'body', size: '12px', weight: '400', leading: '1.5', tracking: '0.02em' },
+    'The small print — a hint under a field, a timestamp, a legal line. Its letters are opened up, because small type set tight closes into a block.'),
+  role('overline', { face: 'body', size: '12px', weight: '600', leading: '1.5', tracking: '0.02em', case: 'uppercase' },
+    'A micro label above the thing it names — a category, a section marker. The one role forced to capitals, which is what makes it read as a marker rather than a sentence.'),
+  role('mono', { face: 'mono', size: '13px', weight: '400', leading: '1.5', tracking: '0' },
+    'Wording where every character asks the same width — code, keys, anything meant to be compared column by column.'),
+] as const
+
+export type FontRoleId = (typeof ROLES)[number]['id']
+
+export const ROLE_IDS: readonly FontRoleId[] = ROLES.map((one) => one.id)
+
+export const DEFAULT_ROLE: FontRoleId = 'body'
+
+export const SET_ROW = 'family-set'
+
+export const holds: readonly Row[] = [
+
+  {
+    id: SET_ROW,
+    section: 'the set',
+    is: 'inter',
+    describes:
+      'Which set of families every face is drawn from. One name, because a set provides all four faces at once — changing it changes the whole app rather than one heading.',
+    version: 1,
+  },
+  ...ROLES.map((one): Row => ({
+    id: one.id,
+    section: sectionOf(one.sets.face, one.id),
+    sets: one.sets as unknown as Readonly<Record<string, string>>,
+    describes: one.describes,
+    version: 1,
+  })),
+]
+
+export const FONTS = {
+  id: 'font',
+  at: 'thread/ui/fonts.ts',
+  describes:
+    'Every way wording is set, and the only place that is decided. A role names one of the four faces a set provides and states the size, weight, leading, tracking and case that job is set at — so `Text.body` needs to be told nothing beyond which job it is doing. It holds no colour and shifts under no mode or theme: colour belongs to the material or variant the wording is worn by, where a coloured control can overrule the theme it sits in. The style guide holds no font, because a font is not a token — this file is the source, and an app changes its typography by changing a row here or by naming a different set.',
+  version: 1,
+  cites: [
+    {
+      on: '2026-08-28',
+      said: 'Styleguide DOES NOT DEFINE FONTS. It takes care of token values. Let\'s leave fonts.ts as the SSOT for font family per type + size and appearence per type for the entire app. So UI puts Text.body("this is the label") and it reads from fonts to see what is the body, the font, the size, everything.',
+    },
+    {
+      on: '2026-08-28',
+      said: 'Fonts now are SSOT for fonts. So font is not a token anymore.',
+    },
+  ],
+  holds,
+} satisfies Threaded & { readonly holds: readonly Row[] }
+
+export function classOfRole(id: string): string {
+  return `f-${id}`
+}
+
+export function settingsOf(id: string, role: FontRole): Readonly<Record<string, Holds>> {
+  return {
+    fontFamily: sheeted(id, `var(${fontVariable(role.face)})`),
+    fontSize: sheeted(id, role.size),
+    fontWeight: sheeted(id, role.weight),
+    lineHeight: sheeted(id, role.leading),
+    letterSpacing: sheeted(id, role.tracking),
+    ...(role.case === undefined ? {} : { textTransform: sheeted(id, role.case) }),
+    ...(role.style === undefined ? {} : { fontStyle: sheeted(id, role.style) }),
+  }
+}
+
+export function roleClass(is: FontRoleId | undefined, className: string | undefined): string {
+  const own = classOfRole(is ?? DEFAULT_ROLE)
+  return className === undefined || className === '' ? own : `${own} ${className}`
+}
+
+export function familyFor(set: FontSet, face: string, by: string): FontFamily {
+  const found = set.families[face as Face]
+  if (found !== undefined) return found
+  const has = Object.keys(set.families).sort().map((one) => `\`${one}\``)
+  throw new Error(
+    `\`${by}\` is set in the \`${face}\` face, and the \`${set.name}\` set does not provide one. ` +
+      `It provides ${has.join(', ')}. Name a face the set has, or give the set that one.`,
+  )
+}
+
+export function setNamed(name: string): FontSet {
+  const found = SET_REGISTRY.get(name)
+  if (found !== undefined) return found
+  const has = [...SET_REGISTRY.keys()].sort().map((one) => `\`${one}\``)
+  throw new Error(
+    `\`${name}\` is named as the font set, and no set by that name is registered. ` +
+      `The registered sets are ${has.join(', ')}.`,
+  )
+}

package/dist/ui/generators/dev.ts

@@ -0,0 +1,79 @@
+import { spawnSync } from 'node:child_process'
+import { existsSync, readFileSync, writeSync } from 'node:fs'
+import { basename, join } from 'node:path'
+import { argv } from 'node:process'
+
+import { generators, settling } from '@prestack/thread/core/chain'
+import { exit, invoked } from '@prestack/thread/core/invoked'
+import { named } from '@prestack/thread/core/scope'
+import { findTree } from '@prestack/thread/core/tree'
+
+const MANIFEST = 'package.json'
+
+const SHIP = '--ship'
+
+const ENTRY = 'dev'
+
+const SHIPPED = 'build'
+
+const say = (line: string): void => {
+  writeSync(1, line)
+}
+
+interface Manifest {
+  readonly scripts?: Record<string, string>
+}
+
+export function declared(at: string, entry: string, read: (where: string) => string | undefined): string | undefined {
+  const source = read(join(at, MANIFEST))
+  if (source === undefined) return undefined
+  return (JSON.parse(source) as Manifest).scripts?.[entry]
+}
+
+export function unrunnable(entry: string, said: string | undefined): string | undefined {
+  if (said !== undefined) return undefined
+  return (
+    `this app's ${MANIFEST} declares no \`${entry}\` script, so there is nothing here to run. ` +
+    `\`thread attach ${named('integrity')}\` is what writes it, along with the \`thread gate\` hook that ` +
+    'stands in front of it — run the attach and try again.'
+  )
+}
+
+async function run(): Promise<number> {
+  const tree = findTree()
+  const shipping = argv.includes(SHIP)
+  const entry = shipping ? SHIPPED : ENTRY
+  const read = (where: string): string | undefined => (existsSync(where) ? readFileSync(where, 'utf8') : undefined)
+
+  const refused = unrunnable(entry, declared(tree.at, entry, read))
+  if (refused !== undefined) {
+    say(`thread: ${refused}\n`)
+    return 1
+  }
+
+  const settled = settling(tree.at, await generators(tree))
+  for (const said of settled.ran) if (said.trim() !== '') say(`${said}\n`)
+
+  if (settled.unsettled.length > 0) {
+    say(
+      `thread: ${settled.unsettled.join(', ')} would not settle after ${String(settled.rounds)} rounds, ` +
+        'so what this tree declares and what is written from it still disagree. Nothing is served over that.\n',
+    )
+    return 1
+  }
+
+  say(`thread: ${basename(tree.at)} settled in ${String(settled.rounds)} round(s); running \`${entry}\`\n`)
+
+  const extra = argv.slice(2).filter((one) => one !== SHIP)
+  const held = spawnSync('npm', ['run', entry, ...(extra.length === 0 ? [] : ['--', ...extra])], {
+    cwd: tree.at,
+    stdio: 'inherit',
+  })
+  if (held.error !== undefined) {
+    say(`thread: could not start \`npm run ${entry}\` — ${held.error.message}\n`)
+    return 1
+  }
+  return held.status ?? 1
+}
+
+if (invoked(import.meta.url)) exit(await run())

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

@@ -17,15 +17,5 @@ export declare function translated(name: string, tag: string | Readonly<Record<s
 }, carries?: Readonly<Record<string, string>>, always?: readonly string[], places?: Readonly<Record<string, Readonly<Record<string, string>>>>, works?: string, measures?: readonly string[], reads?: string, gives?: readonly string[], keeps?: boolean, animates?: boolean, says?: string, called?: string, wires?: string, dresses?: string): string;
 export declare const CARRIES: readonly string[];
 export declare const READINGS: readonly string[];
-export declare const APP: {
-    readonly wrappers: `${string}/wrappers`;
-    readonly content: `${string}/content`;
-    readonly rows: `${string}/charts`;
-    readonly validators: `${string}/validators`;
-    readonly fonts: `${string}/fonts`;
-    readonly map: `${string}/islands/map`;
-    readonly parts: `${string}/disclosure`;
-    readonly consent: `${string}/consent`;
-    readonly drag: `${string}/drag`;
-};
 export declare const declared: Set<string>;
+export declare const wears: Map<string, Readonly<Record<string, string>>>;

package/dist/ui/generators/elements.js

@@ -11,9 +11,8 @@ import { join, resolve } from 'node:path';
 import { argv, stdout } from 'node:process';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 import { exit, invoked } from "@prestack/thread/core/invoked";
-import { named as packageOf } from "@prestack/thread/core/scope";
 import { findTree, inTree } from "@prestack/thread/core/tree";
-import { classOfElement, looking } from "../variant.js";
+import { camel, classOf, classOfElement, looking } from "../variant.js";
 const idOf = (name) => name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 export function pascal(id) {
     return id
@@ -39,6 +38,10 @@ export function owned(body, rows) {
 }
 export function translated(name, tag, arranges, raises, from, carries = {}, always = [], places = {}, works, measures = [], reads, gives = [], keeps = false, animates = false, says, called, wires, dresses) {
     const made = pascal(name);
+    const dressing = wears.get(name);
+    if (dressing === undefined) {
+        throw new Error(`\`${name}\` is written before the variant rows that wear it were read, so it would ship wearing none of them`);
+    }
     const invoking = [
         ...(carries['dispatch'] === undefined ? ['  readonly dispatch?: string'] : []),
         ...(carries['input'] === undefined ? ['  readonly input?: Readonly<Record<string, unknown>>'] : []),
@@ -184,7 +187,7 @@ export function translated(name, tag, arranges, raises, from, carries = {}, alwa
                     'reorders. Name the field with `by`, or state `keyed: \'position\'` where position IS identity.');
             }
             return (`${pad}{props.${over}.map((${`each${String(rows.length)}`}, at) => (\n` +
-                `${region(place, depth + 2, [...rows, `each${String(rows.length)}`], true).replace(`<${(places[place] ?? {})['tag'] ?? 'span'}`, `<${(places[place] ?? {})['tag'] ?? 'span'} key={at}`)}\n` +
+                `${region(place, depth + 2, [...rows, `each${String(rows.length)}`], true).replace(`<${as}`, `<${as} key={at}`)}\n` +
                 `${pad}))}`);
         }
         return (`${pad}<Each rows={${carries[over] === undefined ? `${over}(props${keeps ? ', kept' : ''})` : `props.${over}`}} by={${carries[by] === undefined ? `'${by}'` : `props.${by}`}}>\n` +
@@ -290,9 +293,8 @@ export function translated(name, tag, arranges, raises, from, carries = {}, alwa
             ...always.map((one) => `      '${one}' as const,`),
             ...raises.map((one) => `      ...(props.${one} === true ? ['${one}' as const] : []),`),
             ...(keeps ? ['      ...(kept.holds ?? []),'] : []),
-        ].join('\n')}\n    ],`;
-    return `/* GENERATED by thread — do not edit. Change the row and run \`thread elements\`. */
-'use client'
+        ].join('\n')}\n    ],${raises.length === 0 ? '' : `\n    raises: [${raises.map((one) => `'${one}' as const`).join(', ')}],`}`;
+    return `'use client'
 
 ${[
         ...(arranges || stated.some(([, kind]) => KINDS[kind]?.from === 'react' || KINDS[kind]?.from === 'both')
@@ -334,6 +336,7 @@ ${keeps ? '    const kept = uses(props)\n' : ''}    const surface = useSurface({
     )
   },
   '${classOfElement(name)}',
+  ${JSON.stringify(dressing)},
 )
 `;
 }
@@ -424,17 +427,30 @@ const READS = {
 };
 export const CARRIES = Object.keys(KINDS);
 export const READINGS = Object.keys(READS);
-const UI = packageOf('ui');
-export const APP = { wrappers: `${UI}/wrappers`, content: `${UI}/content`, rows: `${UI}/charts`, validators: `${UI}/validators`, fonts: `${UI}/fonts`, map: `${UI}/islands/map`, parts: `${UI}/disclosure`, consent: `${UI}/consent`, drag: `${UI}/drag` };
-const OWN = { wrappers: '../wrappers.tsx', content: '../content.tsx', rows: '../charts.tsx', validators: '../validators.ts', fonts: '../fonts.ts', map: '../islands/map.ts', parts: '../disclosure.tsx', consent: '../consent.ts', drag: '../drag.ts' };
+const BESIDE = { wrappers: '../wrappers.tsx', content: '../content.tsx', rows: '../charts.tsx', validators: '../validators.ts', fonts: '../fonts.ts', map: '../islands/map.ts', parts: '../disclosure.tsx', consent: '../consent.ts', drag: '../drag.ts' };
 export const declared = new Set();
+export const wears = new Map();
 const SHEET = `elements.${'ts'}`;
 const BY = 'thread elements';
 const INSTALLED = 'node_' + 'modules/';
 function derived(row, own) {
+    if (typeof row.at !== 'string' || row.at.startsWith(INSTALLED))
+        return false;
     if ((row.derives ?? []).some((one) => one.by === BY && one.at === row.at))
         return true;
-    return !own && typeof row.at === 'string' && !row.at.startsWith(INSTALLED);
+    return own ? row.by === BY : true;
+}
+const VARIANTS_SHEET = `variants.${'ts'}`;
+async function variants(own) {
+    if (own) {
+        const held = (await import(__rewriteRelativeImportExtension(pathToFileURL(resolve(fileURLToPath(import.meta.url), '../..', VARIANTS_SHEET)).href)));
+        return held.VARIANTS?.declares ?? [];
+    }
+    const at = inTree(findTree(), VARIANTS_SHEET);
+    if (!existsSync(at))
+        return [];
+    const held = (await import(__rewriteRelativeImportExtension(pathToFileURL(at).href)));
+    return held.VARIANT?.declares ?? [];
 }
 async function run() {
     const own = argv.includes('--own');
@@ -442,19 +458,33 @@ async function run() {
         ? (await import(__rewriteRelativeImportExtension(pathToFileURL(resolve(fileURLToPath(import.meta.url), '../../elements.ts')).href)))
         : undefined;
     const tree = own ? undefined : findTree();
+    if (tree !== undefined && !existsSync(inTree(tree, SHEET))) {
+        stdout.write(`thread: this tree has no ${tree.name}/${SHEET}, so it declares no element and there is nothing to write or check.\n`);
+        return 0;
+    }
     const sheet = tree === undefined
         ? { ELEMENT: held?.ELEMENTS }
         : (await import(__rewriteRelativeImportExtension(pathToFileURL(inTree(tree, SHEET)).href)));
     if (sheet.ELEMENT === undefined) {
         stdout.write(own
-            ? 'elements: packages/ui/src/elements.ts exports no `ELEMENTS`.\n'
+            ? 'elements: thread/ui/elements.ts exports no `ELEMENTS`.\n'
             : `thread: ${String(tree?.name)}/${SHEET} exports no \`ELEMENT\`, so nothing declares an element here.\n`);
         return 1;
     }
-    const root = own ? resolve(fileURLToPath(import.meta.url), '../../../../..') : (tree?.at ?? '');
-    const from = own ? OWN : APP;
+    const root = findTree().at;
+    const from = BESIDE;
     for (const one of sheet.ELEMENT.declares ?? [])
         declared.add(one.id);
+    const dressed = await variants(own);
+    for (const one of sheet.ELEMENT.declares ?? []) {
+        const held = {};
+        for (const row of dressed) {
+            if (!row.wears.includes(pascal(one.id)))
+                continue;
+            held[camel(row.id)] = classOf(row.id);
+        }
+        wears.set(one.id, held);
+    }
     const rows = (sheet.ELEMENT.declares ?? []).filter((row) => derived(row, own));
     const checking = argv.includes('--check');
     for (const row of rows) {