@prestack/thread-ui 0.0.1 → 0.1.0

package/dist/ui/generators/styles.ts

@@ -0,0 +1,669 @@
+import { existsSync, readFileSync, writeFileSync } from '@prestack/thread/core/files'
+import { dirname, join, resolve } from 'node:path'
+import { argv, stderr, stdout } from 'node:process'
+import { fileURLToPath, pathToFileURL } from 'node:url'
+
+import { exit } from '@prestack/thread/core/invoked'
+import { named as packageOf } from '@prestack/thread/core/scope'
+import { findTree, inTree } from '@prestack/thread/core/tree'
+
+import { keyframeName, shorthandOf, stopsOf, type Animation } from '../animations.ts'
+import { classOfRole, familyFor, fontStack, fontVariable, setNamed, settingsOf, type FontRole } from '../fonts.ts'
+import { sizeNamed, sizeRows, SIZE_PREFIX } from '../icons.ts'
+import { compose, composed, keyframesOf, type Material } from '../material.ts'
+import { checkInteractions, knowSignals } from '../signals.ts'
+import { chosen, shifted, themedBy, type StyleGuide } from '../styleguide.ts'
+import { naming, nameOf, sheeted, type Holds, type Token } from '../token.ts'
+import { classOf, classOfComposition, classOfElement, classOfScreen, complete, statesOf, structural, under, undeclaredStates, unreacted, boundHeld, type Variant } from '../variant.ts'
+
+interface Row {
+  readonly id: string
+  readonly at?: string
+  readonly token?: string
+  readonly is?: string
+  readonly asks?: Readonly<Record<string, string | number>>
+  readonly wears?: readonly string[]
+  readonly sets?: Readonly<Record<string, string>>
+  readonly places?: Readonly<Record<string, Readonly<Record<string, string>>>>
+  readonly modes?: Readonly<Record<string, string | Readonly<Record<string, string>>>>
+  readonly themes?: Readonly<Record<string, { readonly is?: string; readonly modes?: Readonly<Record<string, string>> }>>
+  readonly plays?: { readonly in?: string; readonly out?: string }
+  readonly measures?: readonly string[]
+}
+
+interface Node {
+  readonly id?: string
+  readonly at?: string
+  readonly declares?: readonly Row[]
+  readonly holds?: readonly Row[]
+}
+
+function inside(node: Node): readonly Row[] {
+  return [...(node.holds ?? []), ...(node.declares ?? [])]
+}
+
+const LAYERS = ['token', 'font', 'animation', 'material', 'element', 'variant', 'composition', 'screen'] as const
+
+const compare = (a: string, b: string): number => (a < b ? -1 : a > b ? 1 : 0)
+
+const exported = (id: string): string => id.replace(/-/g, '_').toUpperCase()
+
+function dashed(property: string): string {
+  return property.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+function block(selector: string, made: Readonly<Record<string, Holds>>, indent: string): readonly string[] {
+  const properties = Object.keys(made).sort(compare)
+  if (properties.length === 0) return []
+  const lines = [`${indent}${selector} {`]
+  for (const property of properties) lines.push(`${indent}  ${dashed(property)}: ${made[property] ?? ''};`)
+  lines.push(`${indent}}`, '')
+  return lines
+}
+
+function sheet(
+  tokens: Readonly<Record<string, Token>>,
+  guide: StyleGuide,
+  materials: Readonly<Record<string, Material>>,
+  variants: Readonly<Record<string, Variant>>,
+  modes: readonly { readonly id: string; readonly is: string }[],
+  themes: readonly { readonly id: string }[],
+  screens: readonly Row[],
+  compositions: readonly Row[],
+  elements: readonly Row[],
+  fonts: Node,
+  icons: Node,
+  animations: Readonly<Record<string, Animation>>,
+): string {
+  const wrong = checkInteractions()[0]
+  if (wrong !== undefined) throw new Error(`${wrong.path}: ${wrong.message}`)
+
+  const sizes = sizeRows(inside(icons))
+  if (sizes.length === 0) {
+    throw new Error(
+      'The icons sheet declares no size row, so nothing says how large a symbol is drawn. The style ' +
+        'guide holds no icon size — one row per size in `icons.ts`, holding a length.',
+    )
+  }
+
+  const values = { ...chosen(guide, tokens), ...Object.fromEntries(sizes.map((one) => [one.id, sheeted(one.id, one.is)])) }
+  const named = new Set(Object.keys(values))
+  const themeIds = new Set(themes.map((theme) => theme.id))
+
+  const kinds: Record<string, string> = {}
+  for (const pick of guide.picks) kinds[pick.id] = pick.token
+  for (const size of sizes) kinds[size.id] = 'icon'
+
+  const played = (made: Readonly<Record<string, Holds>>): Readonly<Record<string, Holds>> => {
+    const out: Record<string, Holds> = {}
+    for (const [id, value] of Object.entries(made)) {
+      if (kinds[id] !== 'animation') {
+        out[id] = value
+        continue
+      }
+      const animation = animations[value]
+      if (animation === undefined) {
+        const has = Object.keys(animations).sort().map((one) => `\`${one}\``)
+        throw new Error(
+          `\`${id}\` names the animation \`${value}\`, and no row declares one by that name. ` +
+            (has.length === 0
+              ? 'The app declares no animations.'
+              : `The declared animations are ${has.join(', ')}.`),
+        )
+      }
+      out[id] = sheeted(value, shorthandOf(animation, named))
+    }
+    return out
+  }
+
+  const variables = (
+    made: Readonly<Record<string, Holds>>,
+    selector: string,
+    indent: string,
+  ): readonly string[] => {
+    const names = Object.keys(made).sort(compare)
+    if (names.length === 0) return []
+    const held = [`${indent}${selector} {`]
+    for (const id of names) held.push(`${indent}  ${nameOf(id)}: ${made[id] ?? ''};`)
+    held.push(`${indent}}`, '')
+    return held
+  }
+
+  const lines: string[] = [
+    '/* GENERATED by thread — do not edit. Change the declarations and regenerate. */',
+    '',
+    `@layer ${LAYERS.join(', ')};`,
+    '',
+    '@layer token {',
+    ...variables(played(values), ':root', '  '),
+  ]
+
+  for (const mode of modes) {
+    const held = variables(played(shifted(guide, tokens, mode.id, undefined, themeIds)), ':root', '    ')
+    if (held.length === 0) continue
+    lines.push(`  @media ${mode.is} {`, ...held, '  }', '')
+  }
+
+  for (const theme of themes) {
+    lines.push(...variables(played(shifted(guide, tokens, undefined, theme.id, themeIds)), themedBy(theme.id), '  '))
+    for (const mode of modes) {
+      const held = variables(played(shifted(guide, tokens, mode.id, theme.id, themeIds)), themedBy(theme.id), '    ')
+      if (held.length === 0) continue
+      lines.push(`  @media ${mode.is} {`, ...held, '  }', '')
+    }
+  }
+
+  const asked = modes.map((mode) => mode.id).join(' ')
+  lines.push(
+    ...(asked === '' ? [] : ['  :root {', `    color-scheme: ${asked};`, '  }', '']),
+    '  body {',
+    '    background: var(--colour-page);',
+    '    color: var(--colour-ink);',
+    '  }',
+    '',
+  )
+
+  lines.push('}', '')
+
+  const type = typography(fonts)
+  lines.push('@layer font {', ...type.lines, '}', '')
+
+  lines.push('@layer animation {')
+  for (const id of Object.keys(animations).sort(compare)) {
+    const animation = animations[id]
+    if (animation === undefined) continue
+    lines.push(`  @keyframes ${keyframeName(id)} {`)
+    for (const stop of stopsOf(animation, named, tokens, kinds)) lines.push(...block(stop.stop, stop.made, '    '))
+    lines.push('  }', '')
+  }
+  lines.push('}', '')
+
+  const moving = new Map<
+    string,
+    {
+      readonly by: string
+      readonly stops: readonly { readonly stop: string; readonly made: Readonly<Record<string, Holds>> }[]
+    }
+  >()
+  for (const id of Object.keys(materials).sort(compare)) {
+    const material = materials[id]
+    if (material === undefined) continue
+    for (const one of keyframesOf(material, named, tokens, kinds)) {
+      const already = moving.get(one.id)
+      if (already !== undefined) {
+        throw new Error(
+          `\`${id}\` and \`${already.by}\` both declare keyframes called \`${one.id}\`, and a ` +
+            'stylesheet holds one rule per name, so whichever came last would silently win.',
+        )
+      }
+      moving.set(one.id, { by: id, stops: one.stops })
+    }
+  }
+
+  lines.push('@layer material {')
+  for (const name of [...moving.keys()].sort(compare)) {
+    lines.push(`  @keyframes ${name} {`)
+    for (const stop of moving.get(name)?.stops ?? []) lines.push(...block(stop.stop, stop.made, '    '))
+    lines.push('  }', '')
+  }
+  for (const id of Object.keys(materials).sort(compare)) {
+    const material = materials[id]
+    if (material === undefined) continue
+    const gap = undeclaredStates(material)[0]
+    if (gap !== undefined) throw new Error(`\`${id}\`: ${gap}`)
+    compose(material, named, tokens, kinds)
+    under(material, named, tokens, kinds)
+  }
+  lines.push('}', '')
+
+  lines.push('@layer variant {')
+  for (const id of Object.keys(variants).sort(compare)) {
+    const variant = variants[id]
+    if (variant === undefined) continue
+    const whole = statesOf(variant, materials)
+    const first = undeclaredStates(whole)[0]
+    if (first !== undefined) throw new Error(`\`${id}\`: ${first}`)
+    const unclaimed = unreacted(variant, materials)[0]
+    if (unclaimed !== undefined) throw new Error(unclaimed)
+
+    let typed: Readonly<Record<string, Holds>> = {}
+    if (variant.type !== undefined) {
+      const role = type.roles.get(variant.type)
+      if (role === undefined) {
+        const has = [...type.roles.keys()].sort(compare).map((one) => `\`${one}\``)
+        throw new Error(
+          `\`${id}\` sets its wording in the \`${variant.type}\` role, and the fonts sheet declares ` +
+            `no role by that name. The declared roles are ${has.join(', ')}.`,
+        )
+      }
+      typed = role
+    }
+
+    const made = { ...typed, ...complete(variant, materials, named, tokens, kinds) }
+    lines.push(...block(`.${classOf(id)}`, made, '  '))
+    lines.push(...playing(`.${classOf(id)}`, variant.plays, named, id))
+    lines.push(...symbols(id, variant.icon, named, made['display'] !== undefined))
+    for (const state of under(whole, named, tokens, kinds)) {
+      lines.push(...block(`.${classOf(id)}${state.marks}`, state.made, '  '))
+    }
+  }
+  lines.push('}', '')
+
+  for (const held of [
+
+    { layer: 'element', named: classOfElement, rows: elements },
+    { layer: 'composition', named: classOfComposition, rows: compositions },
+    { layer: 'screen', named: classOfScreen, rows: screens },
+  ]) {
+    lines.push(`@layer ${held.layer} {`)
+    for (const row of [...held.rows].sort((one, two) => compare(one.id, two.id))) {
+      const selector = `.${held.named(row.id)}`
+      lines.push(...block(selector, resolved(row.sets ?? {}, guide, row.id, row.measures), '  '))
+      lines.push(...playing(selector, row.plays, named, row.id))
+      for (const [id, made] of Object.entries(row.places ?? {})) {
+        if (!PLACE.test(id)) {
+          throw new Error(
+            `\`${row.id}\` gives a place the name "${id}", and a place is named in the markup as \`at="${id}"\` ` +
+              'and becomes part of a class, so it has to be lowercase words joined by dashes. Anything else ' +
+              'produces a class the child can never match, and nothing would look wrong until you saw the screen.',
+          )
+        }
+
+        const looks = Object.fromEntries(Object.entries(made).filter(([key]) => !SAID.has(key)))
+        lines.push(...block(`${selector}-${id}`, resolved(looks, guide, `${row.id} place \`${id}\``, row.measures), '  '))
+      }
+      for (const [id, made] of Object.entries(row.modes ?? {})) {
+        if (typeof made === 'string') continue
+        const query = modes.find((one) => one.id === id)?.is
+        if (query === undefined) {
+          throw new Error(
+            `\`${row.id}\` arranges itself under "${id}", and no mode by that name is declared, so nothing ` +
+              'can tell when it applies. A breakpoint is a mode — declare it beside dark and light, with the ' +
+              'width as its query.',
+          )
+        }
+        lines.push(`  @media ${query} {`, ...block(selector, resolved(made, guide, row.id), '    '), '  }', '')
+      }
+    }
+    lines.push('}', '')
+  }
+
+  return lines.join('\n')
+}
+
+const LAID = 'layout-flex'
+
+const CENTRED = 'align-centre'
+
+function symbols(id: string, size: string | undefined, named: ReadonlySet<string>, laid: boolean): readonly string[] {
+  if (size === undefined) return []
+  const row = sizeNamed(size)
+  if (!named.has(row)) {
+    const has = [...named].filter((one) => one.startsWith(SIZE_PREFIX)).sort(compare).map((one) => `\`${one}\``)
+    throw new Error(
+      `\`${id}\` draws the symbol inside it at \`${row}\`, and the icons sheet declares no size by ` +
+        `that name. The declared sizes are ${has.join(', ')}.`,
+    )
+  }
+  const drawn = naming(named, row, id, 'the size its symbol is drawn at')
+
+  const centred =
+    laid || !named.has(LAID) || !named.has(CENTRED)
+      ? []
+      : block(
+          `.${classOf(id)}`,
+          {
+            display: naming(named, LAID, id, 'how what it holds is laid out'),
+            alignItems: naming(named, CENTRED, id, 'where its symbol sits across that'),
+          },
+          '  ',
+        )
+
+  return [
+    ...centred,
+    ...block(`.${classOf(id)} > svg`, { width: drawn, height: drawn, minWidth: drawn, minHeight: drawn }, '  '),
+  ]
+}
+
+function typography(node: Node): {
+  readonly lines: readonly string[]
+  readonly roles: ReadonlyMap<string, Readonly<Record<string, Holds>>>
+} {
+  const rows = inside(node)
+  const roles = new Map<string, Readonly<Record<string, Holds>>>()
+
+  const picked = rows.find((row) => row.id === 'family-set')
+  if (picked?.is === undefined) {
+    throw new Error(
+      'The fonts sheet declares no `family-set` row, so nothing says which set of families the app ' +
+        'draws from. One row, naming a registered set — every face is drawn from it.',
+    )
+  }
+  const set = setNamed(picked.is)
+
+  const faces: Record<string, string> = {}
+  const classes: string[] = []
+
+  for (const row of rows) {
+    if (row.id === 'family-set') continue
+    if (row.sets === undefined) {
+      throw new Error(
+        `\`${row.id}\` is declared a font role and states nothing about how it is set. A role names a ` +
+          'face and states its size, weight, leading and tracking.',
+      )
+    }
+    const role = row.sets as unknown as FontRole
+    const family = familyFor(set, role.face, row.id)
+    faces[role.face] = fontStack(family)
+
+    const made = settingsOf(row.id, role)
+    roles.set(row.id, made)
+
+    classes.push(...block(`.${classOfRole(row.id)}`, made, '  '))
+
+  }
+
+  const held = ['  :root {']
+  for (const face of Object.keys(faces).sort(compare)) held.push(`    ${fontVariable(face)}: ${faces[face] ?? ''};`)
+  held.push('  }', '')
+
+  return { lines: [...held, ...classes], roles }
+}
+
+function playing(
+  selector: string,
+  plays: { readonly in?: string; readonly out?: string } | undefined,
+  named: ReadonlySet<string>,
+  by: string,
+): readonly string[] {
+  const held: string[] = []
+  for (const [moment, row, on] of [
+    ['in', plays?.in, `${selector}[data-arriving]`],
+    ['out', plays?.out, `${selector}[data-leaving]`],
+  ] as const) {
+    if (row === undefined) continue
+    if (!named.has(row)) {
+      throw new Error(
+        `\`${by}\` plays \`${row}\` on the way ${moment}, and the style guide holds no row by that name. ` +
+          'What a thing plays is a style guide value like any other — name a row, and the row names the animation.',
+      )
+    }
+    held.push(...block(on, { animation: naming(named, row, by, `what it plays on the way ${moment}`) }, '  '))
+  }
+  return held
+}
+
+const PLACE = /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/
+
+const SAID = structural
+
+const RAW = /\d\s*(px|rem|em|ch|vh|vw)\b|\d%|#[0-9a-fA-F]{3,8}\b|\brgba?\(|\bhsla?\(/
+
+function resolved(
+  sets: Readonly<Record<string, string>>,
+  guide: StyleGuide,
+  by: string,
+  measures: readonly string[] = [],
+): Readonly<Record<string, Holds>> {
+  const made: Record<string, Holds> = {}
+  const bound = boundHeld()
+  for (const [property, whole] of Object.entries(sets)) {
+
+    const words = whole.trim().split(/\s+/)
+    const held: string[] = []
+    for (const value of words) {
+    if (measures.includes(value)) {
+      held.push(`var(--${value})`)
+      continue
+    }
+    if (RAW.test(value)) {
+      throw new Error(
+        `\`${by}\` sets ${property} to "${value}", and that is a value written where a name belongs. ` +
+          'An arrangement names a style guide row and the row holds the value — so the whole app moves ' +
+          'when the row moves. Add a row for it, or name one that exists.',
+      )
+    }
+    const row = guide.picks.find((one) => one.id === value)
+    if (row === undefined) {
+      throw new Error(
+        `\`${by}\` sets ${property} to "${value}", and that names neither a style guide row nor one ` +
+          "of this element's measures. A name that is neither is written into the stylesheet as-is " +
+          'and thrown away by the browser. Declare it in `measures`, or name a row.',
+      )
+    }
+
+    const kinds = bound[property]
+    if (kinds !== undefined && !kinds.includes(String(row.token))) {
+      throw new Error(
+        `\`${by}\` sets ${property} to \`${value}\`, which is a \`${String(row.token)}\` row. ` +
+          `${property} takes ${kinds.map((one) => `\`${one}\``).join(' or ')}. A row of the wrong kind ` +
+          'is written into the stylesheet and dropped by the browser without a word.',
+      )
+    }
+
+    held.push(`var(--${value})`)
+    }
+    made[property] = sheeted(whole, held.join(' '))
+  }
+  return made
+}
+
+async function fileFor<T>(root: string, at: string, id: string, what: string): Promise<T> {
+  const module = (await import(pathToFileURL(resolve(root, at)).href)) as Record<string, unknown>
+  const one = module[exported(id)]
+  if (one === undefined) {
+    throw new Error(
+      `${what} \`${id}\` is declared at ${at}, and that file exports no \`${exported(id)}\`. ` +
+        'A row names a file, and the file is the thing.',
+    )
+  }
+  return one as T
+}
+
+async function loaded<T>(root: string, node: Node, what: string): Promise<Readonly<Record<string, T>>> {
+  const found: Record<string, T> = {}
+  for (const row of inside(node)) {
+    if (row.at === undefined) {
+      throw new Error(`${what} \`${row.id}\` names no file, so there is nothing to read it from.`)
+    }
+    found[row.id] = await fileFor<T>(root, row.at, row.id, what)
+  }
+  return found
+}
+
+async function tokensIn(root: string, node: Node): Promise<Readonly<Record<string, Token>>> {
+  const found: Record<string, Token> = {}
+  for (const row of inside(node)) {
+    found[row.id] =
+      row.at === undefined || row.at === node.at
+        ? { id: row.id }
+        : await fileFor<Token>(root, row.at, row.id, 'token')
+  }
+  return found
+}
+
+function guideIn(node: Node): StyleGuide {
+  return {
+    id: node.id ?? 'styleguide',
+    picks: inside(node).map((row) => {
+      if (row.token === undefined) {
+        throw new Error(
+          `\`${row.id}\` names no token. A style guide row is one value OF a token, so it has to ` +
+            'say which token it is one of.',
+        )
+      }
+      return {
+        id: row.id,
+
+        token: row.token as StyleGuide['picks'][number]['token'],
+        ...(row.is === undefined ? {} : { is: row.is }),
+        ...(row.asks === undefined ? {} : { asks: row.asks }),
+        ...(row.modes === undefined
+          ? {}
+          : {
+              modes: Object.fromEntries(
+                Object.entries(row.modes).filter((one): one is [string, string] => typeof one[1] === 'string'),
+              ),
+            }),
+
+        ...(row.themes === undefined ? {} : { themes: row.themes }),
+      }
+    }),
+  }
+}
+
+function pascal(id: string): string {
+  return id
+    .split('-')
+    .map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`)
+    .join('')
+}
+
+function unwearable(variants: Node, elements: Node): readonly string[] {
+  const declared = new Set((elements.declares ?? []).map((row) => pascal(row.id)))
+  const missing: string[] = []
+  for (const row of variants.declares ?? []) {
+    for (const element of row.wears ?? []) {
+      if (declared.has(element)) continue
+      missing.push(
+        `\`${row.id}\` says \`${element}\` accepts it, and no element by that name is declared, ` +
+          'so nothing would ever wear it.',
+      )
+    }
+  }
+  return missing
+}
+
+function modesIn(node: Node): readonly { readonly id: string; readonly is: string }[] {
+  return inside(node).map((row) => {
+    if (row.is === undefined) {
+      throw new Error(
+        `\`${row.id}\` is declared a mode and states no query, so nothing could tell when it applies. ` +
+          'A mode is the question a device asks — give it the media query that answers it.',
+      )
+    }
+    return { id: row.id, is: row.is }
+  })
+}
+
+const OWN_AT = '../..'
+
+async function node(root: string, file: string, name: string): Promise<Node> {
+  const own = argv.includes('--own')
+  const at = own ? resolve(fileURLToPath(import.meta.url), OWN_AT, file) : inTree(findTree(), file)
+  if (!own && !existsSync(at)) {
+    stdout.write(`styles: this tree has no ${findTree().name}/${file}, so it declares nothing to style and there is no stylesheet to write or check.\n`)
+    exit(0)
+  }
+  const module = (await import(pathToFileURL(at).href)) as Record<string, unknown>
+  const one = module[own ? `${name}S` : name]
+  if (one === undefined) {
+    throw new Error(
+      own ? `this package's own ${file} exports no \`${name}S\`.` : `_threads/${file} exports no \`${name}\`.`,
+    )
+  }
+  return one as Node
+}
+
+async function run(): Promise<number> {
+  const own = argv.includes('--own')
+  const root = own ? resolve(fileURLToPath(import.meta.url), '../../../../..') : findTree().at
+
+  knowSignals(inside(await node(root, 'signals.ts', 'SIGNAL')).map((one) => one.id))
+
+  const tokens = await tokensIn(root, await node(root, 'tokens.ts', 'TOKEN'))
+  const guide = guideIn(await node(root, 'styleguides.ts', 'STYLEGUIDE'))
+  const materials = await loaded<Material>(root, await node(root, 'materials.ts', 'MATERIAL'), 'material')
+  const declaring = await node(root, 'variants.ts', 'VARIANT')
+  const variants = await loaded<Variant>(root, declaring, 'variant')
+
+  const unworn = unwearable(declaring, await node(root, 'elements.ts', 'ELEMENT'))[0]
+  if (unworn !== undefined) throw new Error(unworn)
+
+  const fonts = await node(root, 'fonts.ts', 'FONT')
+  const icons = await node(root, `icons.${'ts'}`, 'ICON')
+  const animations = await loaded<Animation>(root, await node(root, 'animations.ts', 'ANIMATION'), 'animation')
+
+  const modes = modesIn(await node(root, 'modes.ts', 'MODE'))
+  const themes = inside(await node(root, 'themes.ts', 'THEME'))
+  const screens = (await node(root, 'screens.ts', 'SCREEN')).declares ?? []
+  const compositions = (await node(root, 'compositions.ts', 'COMPOSITION')).declares ?? []
+
+  const elements = ((await node(root, 'elements.ts', 'ELEMENT')).declares ?? []).filter(
+    (one) => one.sets !== undefined || one.places !== undefined,
+  )
+
+  const camelOf = (id: string): string => id.replace(/-([a-z0-9])/g, (_, c: string) => c.toUpperCase())
+
+  const worn = ((declaring.declares ?? []) as readonly { readonly id?: string; readonly wears?: readonly string[] }[])
+    .filter((one) => typeof one.id === 'string' && (one.wears ?? []).length > 0)
+    .map((one) => `    readonly ${camelOf(String(one.id))}: ${(one.wears ?? []).map((e) => `'${e}'`).join(' | ')}`)
+
+  const asking = (((await node(root, 'signals.ts', 'SIGNAL')).holds ?? []) as readonly {
+    readonly id?: string
+    readonly selector?: string
+    readonly when?: string
+  }[]).filter((one) => typeof one.id === 'string')
+
+  const wearingSource = [
+    '/* GENERATED by thread — do not edit. It is derived from what this app declares. */',
+    '',
+    `declare module '${packageOf('ui')}/checked' {`,
+    ...(worn.length === 0 ? ['  interface Wearing {}'] : ['  interface Wearing {', ...worn, '  }']),
+    '}',
+    '',
+    'export const ASKING = [',
+    ...asking.map(
+      (one) =>
+        `  { id: '${String(one.id)}', selector: '${one.selector ?? `[data-${String(one.id)}]`}'${typeof one.when === 'string' ? `, when: '${one.when}'` : ''} },`,
+    ),
+    '] as const',
+    '',
+  ].join('\n')
+
+  const at = join(root, 'app/_generated/tokens.css')
+  const made = sheet(tokens, guide, materials, variants, modes, themes, screens, compositions, elements, fonts, icons, animations)
+
+  if (own) {
+    stdout.write(
+      `styles: this framework's own declarations build a stylesheet — ${String(guide.picks.length)} values, ` +
+        `${String(Object.keys(materials).length)} materials, ${String(Object.keys(variants).length)} variants, ` +
+        `${String(Object.keys(animations).length)} animations, every one naming rows that exist. ` +
+        'Nothing is written: a stylesheet belongs to an app, and building it is the check.\n',
+    )
+    return 0
+  }
+
+  if (argv.includes('--check')) {
+    let current = ''
+    try {
+      current = readFileSync(at, 'utf8')
+    } catch {
+      current = ''
+    }
+    if (current === made) {
+      stdout.write('styles: app/_generated/tokens.css is the bytes the declarations produce\n')
+      return 0
+    }
+    stderr.write(
+      'styles: app/_generated/tokens.css is not what the declarations produce. A derived file that ' +
+        'differs from its generator is a hand edit wearing a generated name, and every reader downstream ' +
+        'believes the wrong one. Run `thread styles` and commit what it writes.\n',
+    )
+    return 1
+  }
+
+  writeFileSync(at, made, 'utf8')
+  writeFileSync(join(root, 'app/_generated/declared.ts'), wearingSource, 'utf8')
+
+  stdout.write(
+    `thread: wrote app/_generated/tokens.css — ${String(Object.keys(tokens).length)} tokens, ` +
+      `${String(guide.picks.length)} values, ${String(Object.keys(materials).length)} materials, ` +
+      `${String(Object.keys(variants).length)} variants, ${String(inside(fonts).length - 1)} font roles, ` +
+      `${String(Object.keys(animations).length)} animations, ${String(modes.length)} modes, ` +
+      `${String(themes.length)} themes, ${String(compositions.length)} compositions, ${String(screens.length)} screens\n`,
+  )
+  return 0
+}
+
+if (argv[1] !== undefined) exit(await run())

package/dist/ui/generators/variants.js

@@ -6,8 +6,8 @@ var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExte
     }
     return path;
 };
-import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
-import { basename, dirname, join, resolve } from 'node:path';
+import { existsSync, readFileSync, writeFileSync } from "@prestack/thread/core/files";
+import { basename, 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";
@@ -117,7 +117,6 @@ async function run() {
     }
     else {
         for (const seed of made) {
-            mkdirSync(dirname(join(root, seed.path)), { recursive: true });
             writeFileSync(join(root, seed.path), seed.content, 'utf8');
             stdout.write(`thread: seeded ${seed.path}\n`);
         }