@prestack/thread-ui 0.0.1 → 0.0.2

package/dist/ui/generators/elements.ts

@@ -0,0 +1,794 @@
+import { existsSync, readFileSync, writeFileSync } from 'node:fs'
+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 { findTree, inTree } from '@prestack/thread/core/tree'
+
+import { camel, classOf, classOfElement, looking } from '../variant.ts'
+
+const idOf = (name: string): string => name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+
+export function pascal(id: string): string {
+  return id
+    .split('-')
+    .map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`)
+    .join('')
+}
+
+const TAG = /<([A-Z][A-Za-z0-9]*)/g
+
+export const OWNED_AT = 'ui/'
+
+export function owned(
+  body: string,
+  rows: readonly { readonly id: string; readonly at?: string }[],
+): readonly string[] {
+  const named = new Map<string, string>()
+  for (const row of rows) {
+    const at = row.at
+    if (typeof at !== 'string' || !at.startsWith(OWNED_AT)) continue
+    named.set(pascal(row.id), at)
+  }
+  const found = new Set<string>()
+  for (const [, tag] of body.matchAll(TAG)) if (tag !== undefined && named.has(tag)) found.add(tag)
+  return [...found].sort().map((one) => `import { ${one} } from '../${named.get(one) ?? ''}'`)
+}
+
+export function translated(
+  name: string,
+  tag: string | Readonly<Record<string, string>>,
+  arranges: boolean,
+  raises: readonly string[],
+  from: { readonly wrappers: string; readonly content: string; readonly rows: string; readonly validators: string; readonly fonts: string; readonly map: string; readonly parts: string; readonly consent: string; readonly drag: string },
+  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 = false,
+  animates = false,
+  says?: string,
+  called?: string,
+  wires?: string,
+  dresses?: string,
+): string {
+  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>>'] : []),
+    "  readonly invokeOn?: 'press' | 'shown'",
+  ]
+
+  const stated = Object.entries(carries)
+
+  const names = stated.find(([, kind]) => NAMES(kind))
+  const source = stated.find(([, kind]) => SOURCES(kind))
+
+  const silent = reads !== undefined && READS[reads]?.hidden === true
+
+  const bare = typeof tag === 'string' && tag === ''
+
+  const worded = silent || bare || called !== undefined || Object.keys(places).length > 0 || (works !== undefined && !arranges) || stated.some(([, kind]) => NAMES(kind) || KINDS[kind]?.from === 'content')
+
+  const chosen = typeof tag === 'string' ? undefined : tag
+  const first = typeof tag === 'string' ? tag : (Object.entries(tag).find(([key]) => key !== 'by')?.[1] ?? 'div')
+
+  const titled = called === undefined ? '' : ` aria-label={surface.text('${called}')}`
+
+  const naming = (one: string): string =>
+    names === undefined || SPEAKS.has(one)
+      ? ''
+      : KINDS[names[1]]?.needed === false
+        ? ` {...(props.${names[0]} === undefined ? {} : { 'aria-label': surface.text(props.${names[0]}) })}`
+        : one === 'img'
+          ? ` alt={surface.text(props.${names[0]})}`
+          : ` aria-label={surface.text(props.${names[0]})}`
+  const sourced = (one: string): string =>
+    source === undefined ? '' : ` ${SOURCE[one] ?? 'src'}={props.${source[0]}}`
+
+  const props = [
+    ...(arranges
+      ? ['  readonly children: ReactNode']
+      : worded
+        ? []
+        : ['  readonly labelKey: MessageKey']),
+
+    ...stated.map(([id, kind]) => {
+      const held = KINDS[kind]
+
+      const picks = chosen !== undefined && chosen['by'] === id
+      const must = held?.needed === true || measures.includes(id) || picks
+      const is = picks
+        ? Object.keys(chosen).filter((key) => key !== 'by').map((key) => `'${key}'`).join(' | ')
+        : (held?.is ?? 'never')
+      return `  readonly ${id}${must ? '' : '?'}: ${is}`
+    }),
+    ...raises.map((one) => `  readonly ${one}?: boolean`),
+  ]
+
+  const SAID = new Set(['tag', 'shows', 'reads', 'holds', 'each', 'by', 'takes', 'marks', 'gives', 'keyed', 'when'])
+
+  const named = [
+    ...new Set(
+      Object.values(places)
+        .map((made) => (made as Record<string, string> | undefined)?.['tag'])
+        .filter((one): one is string => one !== undefined && /^[A-Z]/.test(one))
+        .map((one) => one.split('.')[0] ?? ''),
+    ),
+  ]
+
+  const worn = named.filter((one) => declared.has(idOf(one)))
+  const built = named.filter((one) => !declared.has(idOf(one)))
+
+  const nested = new Set<string>()
+  for (const made of Object.values(places)) {
+    const held = (made as Record<string, string> | undefined)?.['holds']
+    if (typeof held === 'string') for (const one of held.split(/\s+/).filter(Boolean)) nested.add(one)
+  }
+
+  const region = (place: string, depth: number, rows: readonly string[] = [], looped = false): string => {
+    const made = (places[place] ?? {}) as Record<string, string>
+    const row = rows[rows.length - 1]
+    const gave = rows.length === 0 ? '' : `, ${rows.join(', ')}`
+    const pad = '        ' + '  '.repeat(depth)
+    const as = made['tag'] ?? 'span'
+    const meant = made['reads'] === undefined ? undefined : READS[made['reads']]
+    const from = made['shows']
+
+    const kind = from === undefined ? undefined : carries[from]
+    const shape = kind === undefined ? undefined : KINDS[kind]
+
+    const points = shape?.from === 'source' && from !== undefined
+
+    const pointed = points ? ` src={props.${String(from)}}${as === 'img' ? ' alt=""' : ''}` : ''
+
+    const shown =
+      points
+        ? ''
+        : from === undefined
+        ? ''
+        : row !== undefined
+          ? shape === undefined
+            ? `{shown(props${gave}, surface${keeps ? ', kept' : ''}).${from}}`
+            : `{surface.text(String(${row}.${from}))}`
+          : shape === undefined
+            ? `{shown(props, surface${keeps ? ', kept' : ''}${wires === undefined ? '' : ', wired'}).${from}}`
+            : shape.from === 'content'
+              ? `{surface.text(props.${from})}`
+              : `{props.${from}}`
+
+    const facing =
+      meant?.orients === undefined || carries[meant.orients] === undefined
+        ? ''
+        : ` aria-orientation={props.${meant.orients} === 'vertical' ? 'vertical' : 'horizontal'}`
+
+    const taken = (made['takes'] ?? '')
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((one) => GIVES[one] ?? '')
+      .join('')
+
+    const sized =
+      made['marks'] === undefined || row === undefined
+        ? ''
+        : ` style={marking(${made['marks']}(props${keeps ? ', kept' : ''}${gave}, at))}`
+
+    const handed =
+      made['gives'] === undefined
+        ? ''
+        : ` {...${made['gives']}(props${keeps ? ', kept' : ''}${gave}${row === undefined ? '' : ', at'})}`
+
+    const owns =
+      row === undefined || IDENTIFIES[as] === undefined || made['by'] === undefined
+        ? ''
+        : ` ${String(IDENTIFIES[as])}={String(${row}.${String(made['by'])})}`
+
+    const bound =
+      owns +
+      handed +
+      sized +
+      pointed +
+      facing +
+      taken +
+      (meant === undefined
+        ? ''
+        : (meant.control ?? '') +
+
+          (from === undefined || row !== undefined || meant.state === undefined || carries[from] === undefined
+            ? ''
+            : ` ${meant.state}={props.${from}${meant.state === 'checked' ? ' === true' : " ?? ''"}}`) +
+          (meant.answers ?? ''))
+
+    const held = (made['holds'] ?? '').split(/\s+/).filter(Boolean)
+    const within = held.map((one) => region(one, depth + 1, rows)).join('\n')
+
+    const body = within === '' ? (meant?.state === undefined ? shown : '') : `\n${within}\n${pad}`
+
+    const dressed = /^[A-Z]/.test(as)
+      ? ''
+      : place === dresses
+        ? ` className={\`e-${name}-${place} \${surface.className ?? ''}\`}`
+        : looking(made)
+          ? ` className="e-${name}-${place}"`
+          : ''
+
+    const written = SHUT.has(as)
+      ? `<${as}${dressed}${bound} />`
+      : `<${as}${dressed}${bound}>${body}</${as}>`
+
+    const only = made['when']
+
+    const one =
+      only !== undefined
+        ? `${pad}{!${only}(props${keeps ? ', kept' : ''}${gave}) ? null : ${written}}`
+        : shape !== undefined && !shape.needed && from !== undefined && row === undefined
+          ? `${pad}{props.${from} === undefined ? null : ${written}}`
+          : `${pad}${written}`
+
+    const over = made['each']
+    if (looped || over === undefined) return one
+
+    if (KINDS[carries[over] ?? '']?.is === 'number') {
+      return (
+        `${pad}{Array.from({ length: Math.max(1, props.${over} ?? 1) }, (_, at) => (\n` +
+        `${region(place, depth + 2, rows, true).replace(`className="e-${name}-${place}"`, `key={at} className="e-${name}-${place}"`)}\n` +
+        `${pad}))}`
+      )
+    }
+
+    const by = made['by']
+    if (by === undefined) {
+      if (made['keyed'] !== 'position') {
+        throw new Error(
+          `\`${name}\` repeats the place \`${place}\` over \`${String(over)}\` and names no field to identify a ` +
+            'row by. React matches an unkeyed list by position and keeps the previous row\'s state when it ' +
+            '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(`<${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` +
+      `${pad}  {(${`each${String(rows.length)}`}, at) => (\n${region(place, depth + 2, [...rows, `each${String(rows.length)}`], true)}\n${pad}  )}\n` +
+      `${pad}</Each>`
+    )
+  }
+
+  const repeats = Object.values(places).some((made) => {
+    const over = (made as Record<string, string> | undefined)?.['each']
+    return over !== undefined && KINDS[carries[over] ?? '']?.is !== 'number' && (made as Record<string, string>)['keyed'] !== 'position'
+  })
+  const worked = Object.entries(places).some(([, made]) => {
+    const from = (made as Record<string, string> | undefined)?.['shows']
+    return from !== undefined && carries[from] === undefined
+  })
+
+  const answers = (reads !== undefined && READS[reads]?.answers !== undefined) || Object.values(places).some((made) => {
+    const said = (made as Record<string, string> | undefined)?.['reads']
+    return said !== undefined && READS[said]?.answers !== undefined
+  })
+
+  const inside = Object.keys(places)
+    .filter((place) => !nested.has(place))
+    .map((place) => region(place, 0))
+    .join('\n')
+
+  const roles = stated.find(([, kind]) => KINDS[kind]?.from === 'fonts')
+  const roled =
+    roles !== undefined
+      ? `: roleClass(props.${roles[0]}, className)`
+      : arranges
+        ? ''
+        : ': roleClass(undefined, className)'
+
+  const measured = measures.length === 0 || wires !== undefined ? '' : ' style={surface.measures}'
+
+  const meant = reads === undefined ? undefined : READS[reads]
+
+  const wired =
+    meant === undefined
+      ? ''
+      : (meant.control ?? '') +
+        (meant.binds === undefined || carries[meant.binds] === undefined
+          ? ''
+          : ` ${String(meant.state)}={props.${meant.binds} ?? ${KINDS[carries[meant.binds] ?? '']?.is === 'number' ? '0' : "''"}}`) +
+        (meant.answers ?? '')
+
+  const gathered = (gives ?? [])
+    .map((one) => GIVES[one] ?? '')
+    .join('')
+
+  const wired2 = wires === undefined ? '' : ' {...(wired.on ?? {})}'
+
+  const meaning =
+    meant === undefined
+      ? ''
+      : (meant.role === undefined || (meant.needs !== undefined && carries[meant.needs] === undefined)
+          ? ''
+          : meant.needs === undefined || KINDS[carries[meant.needs] ?? '']?.needed === true
+            ? ` role="${meant.role}"`
+            : ` {...(props.${meant.needs} === undefined ? {} : { role: '${meant.role}' as const })}`) +
+        (meant.hidden === true ? ' aria-hidden="true"' : '') +
+        (meant.orients === undefined || carries[meant.orients] === undefined
+          ? ''
+          : ` aria-orientation={props.${meant.orients} === 'vertical' ? 'vertical' : 'horizontal'}`) +
+        (meant.reports === undefined || !measures.includes(meant.reports)
+          ? ''
+          : ` aria-valuenow={Number(measured(props).${meant.reports})} aria-valuemin={0} aria-valuemax={100}`)
+
+  const opening = (one: string): string =>
+    `<${one}${dresses === undefined ? ' className={surface.className}' : ''} {...surface.marks} {...surface.invokes} {...surface.a11y}${keeps ? ' {...(kept.on ?? {})}' : ''}${meaning}${titled}${announcing}${wired}${wired2}${gathered}${measured}${sourced(one)}${naming(one)}${EXTRA[one] ?? ''}${source === undefined ? '' : (FETCHES[one] ?? '')}`
+
+  const empty = typeof tag === 'string' && SHUT.has(tag)
+
+  const holds = stated.find(([, kind]) => kind === 'holding')
+
+  const telling =
+    says === undefined
+      ? undefined
+      : KINDS[carries[says] ?? '']?.from === 'content'
+        ? `{surface.text(props.${says}${holds === undefined ? '' : `, props.${holds[0]}`})}`
+        : `{props.${says}}`
+
+  const announced = stated.find(([, kind]) => kind === 'announcing')
+  const announcing = announced === undefined ? '' : ` role={props.${announced[0]}}`
+
+  const content =
+    telling !== undefined
+      ? telling
+      : works !== undefined && !arranges && !empty && inside === ''
+      ? `{shows(props, surface${keeps ? ', kept' : ''})}`
+      : inside === ''
+        ? `{${arranges ? 'props.children' : names === undefined ? 'surface.text(props.labelKey)' : 'null'}}`
+        : arranges
+          ? `{props.children}\n${inside}`
+          : undefined
+
+  const spoken = (one: string): string =>
+    SPEAKS.has(one) && names !== undefined ? `{surface.text(props.${names[0]})}` : (content ?? inside)
+
+  const written = (one: string): string =>
+    SHUT.has(one)
+      ? `${opening(one)} />`
+      : `${opening(one)}>\n${SPEAKS.has(one) || content !== undefined ? `        ${spoken(one)}` : inside}\n      </${one}>`
+
+  const shut =
+    bare && inside !== ''
+      ? `<>\n${inside}\n      </>`
+      : bare
+      ? `shows(props, surface${keeps ? ', kept' : ''})`
+      : chosen === undefined
+      ? written(first)
+      : `(() => {\n      switch (props.${String(chosen['by'])}) {\n${Object.entries(chosen)
+          .filter(([key]) => key !== 'by')
+          .map(([key, one]) => `        case '${key}':\n          return (\n            ${written(one).split('\n').join('\n      ')}\n          )`)
+          .join('\n')}\n        default:\n          return null\n      }\n    })()`
+
+  const fromProps = measures.filter((one) => carries[one] !== undefined)
+  const computes = measures.filter((one) => carries[one] === undefined)
+  const passed = fromProps.map((one) => `${JSON.stringify(one)}: String(props.${one} ?? '')`).join(', ')
+
+  const taken =
+    measures.length === 0 || wires !== undefined
+      ? ''
+      : computes.length === 0
+      ? `\n    measures: { ${passed} },`
+      : fromProps.length === 0
+      ? `\n    measures: measured(props${keeps ? ', kept' : ''}),`
+      : `\n    measures: { ...measured(props${keeps ? ', kept' : ''}), ${passed} },`
+
+  const wanted = [...(arranges || empty || says !== undefined || inside !== '' ? [] : ['shows']), ...(worked ? ['shown'] : []), ...(computes.length === 0 || wires !== undefined ? [] : ['measured']), ...[...new Set(Object.values(places).flatMap((made) => [(made as Record<string, string> | undefined)?.['marks'], (made as Record<string, string> | undefined)?.['gives'], (made as Record<string, string> | undefined)?.['when'], ((made as Record<string, string> | undefined)?.['each'] !== undefined && carries[(made as Record<string, string>)['each'] ?? ''] === undefined) ? (made as Record<string, string>)['each'] : undefined]).filter((one): one is string => one !== undefined))], ...(answers ? ['does'] : []), ...(keeps ? ['uses'] : []), ...(wires === undefined ? [] : [wires])]
+
+  const held =
+    always.length === 0 && raises.length === 0 && !keeps
+      ? ''
+      : `\n    holds: [\n${[
+          ...always.map((one) => `      '${one}' as const,`),
+          ...raises.map((one) => `      ...(props.${one} === true ? ['${one}' as const] : []),`),
+          ...(keeps ? ['      ...(kept.holds ?? []),'] : []),
+        ].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')
+    ? ["import type { ReactNode } from 'react'"]
+    : []),
+  ...((!arranges && !silent && !bare && called === undefined) || stated.some(([, kind]) => KINDS[kind]?.from === 'content')
+    ? [`import type { MessageKey } from '${from.content}'`]
+    : []),
+  ...(stated.some(([, kind]) => KINDS[kind]?.from === 'rows' || KINDS[kind]?.from === 'both') ? [`import type { Row } from '${from.rows}'`] : []),
+  ...(roles !== undefined
+    ? [`import { roleClass, type FontRoleId } from '${from.fonts}'`]
+    : arranges
+      ? []
+      : [`import { roleClass } from '${from.fonts}'`]),
+  ...(stated.some(([, kind]) => KINDS[kind]?.from === 'map') ? [`import type { MapIsland } from '${from.map}'`] : []),
+  ...(stated.some(([, kind]) => KINDS[kind]?.from === 'parts') ? [`import type { TabItem } from '${from.parts}'`] : []),
+  ...(stated.some(([, kind]) => KINDS[kind]?.from === 'consent') ? [`import type { ConsentDecision } from '${from.consent}'`] : []),
+  ...(stated.some(([, kind]) => KINDS[kind]?.from === 'drag') ? [`import type { Subject } from '${from.drag}'`] : []),
+  ...worn.map((one) => `import { ${one} } from './${idOf(one)}.tsx'`),
+  ...(built.length === 0 || works === undefined ? [] : [`import { ${built.join(', ')} } from '${works}'`]),
+  ...(Object.values(places).some((made) => (made as Record<string, string> | undefined)?.['marks'] !== undefined)
+    ? [`import { measured as marking } from '${from.rows}'`]
+    : []),
+].join('\n')}
+
+import { type Element, element, useSurface } from '${from.wrappers}'
+${Object.values(places).some((made) => ((made as Record<string, string> | undefined)?.['takes'] ?? '').split(/\s+/).includes('validator')) ? `import { limited } from '${from.validators}'\n` : ''}${repeats ? `import { Each } from '../elements/each.tsx'\n` : ''}${works === undefined || wanted.length === 0 ? '' : `import { ${wanted.join(', ')} } from '${works}'\n`}
+
+export interface ${made}Props {
+${[...props, ...invoking].join('\n')}
+}
+
+export const ${made}: Element<'${made}', ${made}Props> = element(
+  '${made}',
+  (props: ${made}Props, className) => {
+${keeps ? '    const kept = uses(props)\n' : ''}    const surface = useSurface({ className${roled},\n    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },${held}${taken}${animates ? '\n    animates: true,' : ''}${keeps ? "\n    ...(kept.animates === undefined ? {} : { animates: kept.animates })," : ''} })${wires === undefined ? '' : `\n    const wired = ${wires}(props${keeps ? ', kept' : ''}, surface)`}
+    return (
+      ${shut}
+    )
+  },
+  '${classOfElement(name)}',
+  ${JSON.stringify(dressing)},
+)
+`
+}
+
+const KINDS: Readonly<Record<string, { readonly is: string; readonly needed: boolean; readonly from?: 'react' | 'content' | 'rows' | 'source' | 'fonts' | 'map' | 'parts' | 'consent' | 'both' | 'drag' }>> = {
+  children: { is: 'ReactNode', needed: true, from: 'react' },
+  wording: { is: 'MessageKey', needed: true, from: 'content' },
+  naming: { is: 'MessageKey', needed: true, from: 'content' },
+  flag: { is: 'boolean', needed: false },
+  count: { is: 'number', needed: false },
+  words: { is: 'string', needed: false },
+
+  source: { is: 'string', needed: true },
+
+  amount: { is: 'unknown', needed: false },
+
+  holding: { is: 'Readonly<Record<string, unknown>>', needed: false },
+
+  tuning: { is: 'Readonly<Record<string, number>>', needed: false },
+
+  mapping: { is: 'MapIsland', needed: true, from: 'map' },
+
+  parting: { is: 'readonly TabItem[]', needed: true, from: 'parts' },
+
+  judging: { is: 'ConsentDecision', needed: false, from: 'consent' },
+  judged: { is: '(said: ConsentDecision) => void', needed: true, from: 'consent' },
+
+  ruling: { is: 'string', needed: true },
+
+  subjecting: { is: 'Subject | readonly Subject[]', needed: false, from: 'drag' },
+
+  announcing: { is: "'alert' | 'status'", needed: false },
+
+  noting: { is: 'MessageKey', needed: false, from: 'content' },
+
+  titling: { is: 'MessageKey', needed: false, from: 'content' },
+
+  picture: { is: 'string', needed: false, from: 'source' },
+
+  styling: { is: 'FontRoleId', needed: false, from: 'fonts' },
+
+  telling: { is: '(said: boolean) => void', needed: false },
+
+  doing: { is: '() => void', needed: false },
+
+  picking: { is: '(said: string) => void', needed: false },
+
+  moving: { is: '(said: number) => void', needed: false },
+
+  choosing: { is: '(said: readonly string[]) => void', needed: false },
+
+  listing: { is: 'readonly Row[]', needed: true, from: 'rows' },
+
+  ordering: { is: 'readonly string[]', needed: true },
+
+  anything: { is: 'readonly object[]', needed: true },
+
+  drawing: { is: '(row: Row, at: number) => ReactNode', needed: true, from: 'both' },
+}
+
+const SOURCES = (kind: string): boolean => kind === 'source'
+
+const NAMES = (kind: string): boolean => kind === 'naming' || kind === 'titling'
+
+const SHUT = new Set(['img', 'hr', 'input', 'br', 'area', 'col', 'embed', 'source', 'track', 'wbr'])
+
+const SOURCE: Readonly<Record<string, string>> = { a: 'href' }
+
+const EXTRA: Readonly<Record<string, string>> = {
+  video: ' controls preload="metadata"',
+  audio: ' controls preload="metadata"',
+}
+
+const FETCHES: Readonly<Record<string, string>> = { a: ' download' }
+
+const SPEAKS = new Set(['a'])
+
+const IDENTIFIES: Readonly<Record<string, string>> = { option: 'value' }
+
+const GIVES: Readonly<Record<string, string>> = {
+  name: ' name={props.name}',
+  rows: ' rows={props.rows ?? 4}',
+  validator: ' {...limited(props.validator)}',
+  min: ' min={props.min}',
+  max: ' max={props.max}',
+  step: ' step={props.step ?? 1}',
+}
+
+interface Reading {
+  readonly role?: string
+  readonly reports?: string
+
+  readonly control?: string
+  readonly state?: string
+  readonly answers?: string
+
+  readonly hidden?: boolean
+
+  readonly needs?: string
+
+  readonly orients?: string
+
+  readonly binds?: string
+}
+
+const READS: Readonly<Record<string, Reading>> = {
+
+  choice: {
+    control: ' type="checkbox" disabled={surface.marked(\'disabled\')}',
+    state: 'checked',
+
+    answers: ' onChange={(event) => does(props).changed(event.target.checked)}',
+  },
+
+  writing: {
+    control: " disabled={surface.marked('disabled')}",
+    state: 'value',
+    answers: ' onChange={(event) => does(props).wrote(event.target.value)}',
+  },
+
+  sliding: {
+    control: " type=\"range\" disabled={surface.marked('disabled')}",
+    state: 'value',
+    binds: 'value',
+    answers: ' onChange={(event) => does(props).moved(Number(event.target.value))}',
+  },
+
+  choosing: {
+    control: " type=\"radio\" disabled={surface.marked('disabled')}",
+  },
+
+  choices: { role: 'radiogroup', needs: 'labelKey' },
+
+  chooser: {
+    control: " disabled={surface.marked('disabled')}",
+    state: 'value',
+    answers: ' onChange={(event) => does(props).chose(event.target.value)}',
+  },
+
+  progress: { role: 'progressbar', reports: 'fraction' },
+  picture: { role: 'img' },
+  divider: { role: 'separator', orients: 'orientation' },
+
+  grouping: { role: 'group', needs: 'labelKey' },
+
+  placeholder: { hidden: true },
+  notice: { role: 'status' },
+  alarm: { role: 'alert' },
+}
+
+export const CARRIES: readonly string[] = Object.keys(KINDS)
+
+export const READINGS: readonly string[] = Object.keys(READS)
+
+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' } as const
+
+interface Row {
+  readonly id: string
+  readonly at?: string
+  readonly by?: string
+  readonly tag?: string | Readonly<Record<string, string>>
+  readonly arranges?: boolean
+  readonly carries?: Readonly<Record<string, string>>
+  readonly always?: readonly string[]
+  readonly places?: Readonly<Record<string, Readonly<Record<string, string>>>>
+  readonly works?: string
+  readonly measures?: readonly string[]
+  readonly reads?: string
+  readonly gives?: readonly string[]
+  readonly keeps?: boolean
+  readonly animates?: boolean
+  readonly shows?: string
+  readonly called?: string
+  readonly wires?: string
+  readonly dresses?: string
+  readonly raises?: readonly string[]
+  readonly derives?: readonly { readonly at?: string; readonly by?: string }[]
+}
+
+export const declared = new Set<string>()
+
+export const wears = new Map<string, Readonly<Record<string, string>>>()
+
+const SHEET = `elements.${'ts'}`
+
+const BY = 'thread elements'
+
+const INSTALLED = 'node_' + 'modules/'
+
+function derived(row: Row, own: boolean): boolean {
+  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 ? row.by === BY : true
+}
+
+const VARIANTS_SHEET = `variants.${'ts'}`
+
+async function variants(own: boolean): Promise<readonly { readonly id: string; readonly wears: readonly string[] }[]> {
+  if (own) {
+    const held = (await import(pathToFileURL(resolve(fileURLToPath(import.meta.url), '../..', VARIANTS_SHEET)).href)) as {
+      VARIANTS?: { readonly declares?: readonly { readonly id: string; readonly wears: readonly string[] }[] }
+    }
+    return held.VARIANTS?.declares ?? []
+  }
+  const at = inTree(findTree(), VARIANTS_SHEET)
+  if (!existsSync(at)) return []
+  const held = (await import(pathToFileURL(at).href)) as {
+    VARIANT?: { readonly declares?: readonly { readonly id: string; readonly wears: readonly string[] }[] }
+  }
+  return held.VARIANT?.declares ?? []
+}
+
+async function run(): Promise<number> {
+  const own = argv.includes('--own')
+
+  const held = own
+    ? ((await import(pathToFileURL(resolve(fileURLToPath(import.meta.url), '../../elements.ts')).href)) as {
+        ELEMENTS?: { readonly declares?: readonly Row[] }
+      })
+    : 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(pathToFileURL(inTree(tree, SHEET)).href)) as {
+          ELEMENT?: { readonly declares?: readonly Row[] }
+        })
+
+  if (sheet.ELEMENT === undefined) {
+    stdout.write(
+      own
+        ? '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 = 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: Record<string, string> = {}
+    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) {
+    if (row.at === undefined) {
+      stdout.write(`elements: \`${row.id}\` derives a file and names none, so nothing can be written for it.\n`)
+      return 1
+    }
+    if (row.tag === undefined && row.works !== undefined) {
+      const made = translated(row.id, '', row.arranges === true, row.raises ?? [], from, row.carries, row.always, row.places, row.works, row.measures, row.reads, row.gives, row.keeps === true, row.animates === true, row.shows, row.called, row.wires, row.dresses)
+      const at = join(root, row.at)
+      if (!checking) {
+        writeFileSync(at, made, 'utf8')
+        stdout.write(`elements: wrote ${row.at}\n`)
+        continue
+      }
+      if (!existsSync(at) || readFileSync(at, 'utf8') !== made) {
+        stdout.write(
+          `elements: ${row.at} is not what the row produces. A derived file that differs from its ` +
+            'generator is a hand edit wearing a generated name. Run `thread elements` and commit what it writes.\n',
+        )
+        return 1
+      }
+      continue
+    }
+    if (row.tag === undefined) {
+      stdout.write(
+        `elements: \`${row.id}\` is written by \`${BY}\` and states no tag, and a tag is what this ` +
+          'writes the element out of. State one on the row, or take the `derives` off and keep the file.\n',
+      )
+      return 1
+    }
+
+    if (row.reads !== undefined && READS[row.reads] === undefined) {
+      stdout.write(
+        `elements: \`${row.id}\` says it reads as \`${String(row.reads)}\`, and that is not something an ` +
+          `element reads as. It reads as one of: ${Object.keys(READS).join(' · ')}.\n`,
+      )
+      return 1
+    }
+
+    const unknown = Object.entries(row.carries ?? {}).find(([, kind]) => KINDS[kind] === undefined)
+    if (unknown !== undefined) {
+      stdout.write(
+        `elements: \`${row.id}\` says it carries \`${unknown[0]}\` as a \`${unknown[1]}\`, and that is ` +
+          `not a kind an element carries. It carries one of: ${Object.keys(KINDS).join(' · ')}.\n`,
+      )
+      return 1
+    }
+
+    const text = translated(row.id, row.tag, row.arranges === true, row.raises ?? [], from, row.carries, row.always, row.places, row.works, row.measures, row.reads, row.gives, row.keeps === true, row.animates === true, row.shows, row.called, row.wires, row.dresses)
+    const where = join(root, row.at)
+
+    if (!checking) {
+      writeFileSync(where, text, 'utf8')
+      stdout.write(`elements: wrote ${row.at}\n`)
+      continue
+    }
+
+    if (!existsSync(where)) {
+      stdout.write(
+        `elements: \`${row.id}\` is declared at \`${row.at}\`, and the file is not there. ` +
+          'A row names a file and `--check` never writes one — run `thread elements` and commit what it writes.\n',
+      )
+      return 1
+    }
+    if (readFileSync(where, 'utf8') !== text) {
+      stdout.write(
+        `elements: ${row.at} is not what the row produces. A derived file that differs from its ` +
+          'generator is a hand edit wearing a generated name. Run `thread elements` and commit what it writes.\n',
+      )
+      return 1
+    }
+  }
+
+  stdout.write(
+    checking
+      ? `thread: ${String(rows.length)} element(s) written from their rows, all agreeing\n`
+      : `thread: wrote ${String(rows.length)} element(s) from their rows\n`,
+  )
+  return 0
+}
+
+if (invoked(import.meta.url)) exit(await run())