@prestack/thread-ui 0.1.10 → 0.1.12

package/dist/ui/generators/styles.ts

@@ -1,677 +0,0 @@
-import { existsSync, readFileSync, writeFileSync } from '@prestack/thread/integrations/disk'
-import { dirname, join, relative, 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 { findTree, inTree } from '@prestack/thread/core/tree'
-import { CHECKED_AT } from '@prestack/thread/operations/capabilities'
-
-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, 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[] = [
-    `@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
-}
-
-const STYLESHEET = 'app/_generated/tokens.css'
-
-const DECLARED = 'app/_generated/declared.ts'
-
-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 checked = `./${relative(dirname(DECLARED), CHECKED_AT)}`
-
-  const wearingSource = [
-    `import type {} from '${checked}'`,
-    '',
-    `declare module '${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, STYLESHEET)
-  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')) {
-    const drifted = [
-      { named: STYLESHEET, text: made },
-      { named: DECLARED, text: wearingSource },
-    ].filter((one) => {
-      try {
-        return readFileSync(join(root, one.named), 'utf8') !== one.text
-      } catch {
-        return true
-      }
-    })
-    if (drifted.length === 0) {
-      stdout.write(`styles: ${STYLESHEET} and ${DECLARED} are the bytes the declarations produce\n`)
-      return 0
-    }
-    stderr.write(
-      `styles: ${drifted.map((one) => one.named).join(' and ')} ${drifted.length === 1 ? 'is' : 'are'} 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, DECLARED), wearingSource, 'utf8')
-
-  stdout.write(
-    `thread: wrote ${STYLESHEET} and ${DECLARED} — ${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())