@prestack/thread-ui 0.0.1 → 0.1.0

package/dist/ui/generators/react.ts

@@ -0,0 +1,269 @@
+import { createHash } from 'node:crypto'
+import { readFileSync as bytesAt } from 'node:fs'
+import { existsSync, readFileSync, statSync } from '@prestack/thread/core/files'
+import { cwd } from 'node:process'
+import { dirname, join, resolve } from 'node:path'
+
+import ts from 'typescript'
+
+import { idOf } from '../checked.ts'
+import { classOf } from '../variant.ts'
+
+const OWNED = /\.(t|j)sx$/
+
+const VARIANT_MEMBER = /^[a-z]/
+
+interface Edit {
+  readonly from: number
+  readonly to: number
+  readonly text: string
+}
+
+interface Arranging {
+  readonly from: number
+  readonly to: number
+  readonly own: string
+}
+
+const ARRANGERS = new Set(['composition', 'screen'])
+
+const HOST = /^[a-z]/
+
+const MAKES = 'element'
+
+const ONE_WORD = /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/
+
+function prefixed(called: string): string {
+  return called === 'screen' ? 's-' : 'c-'
+}
+
+function quoted(node: ts.Node): string | undefined {
+  return ts.isStringLiteral(node) ? node.text : undefined
+}
+
+function joined(held: readonly string[]): string {
+  return held.filter((one) => one !== '').join(' ')
+}
+
+function arranging(held: readonly Arranging[], at: number): string | undefined {
+  let found: Arranging | undefined
+  for (const one of held) {
+    if (at < one.from || at >= one.to) continue
+    if (found === undefined || one.from > found.from) found = one
+  }
+  return found?.own
+}
+
+function within(held: readonly { readonly from: number; readonly to: number }[], at: number): boolean {
+  return held.some((one) => at >= one.from && at < one.to)
+}
+
+function tagOf(node: ts.JsxOpeningElement | ts.JsxSelfClosingElement | ts.JsxClosingElement): ts.JsxTagNameExpression {
+  return node.tagName
+}
+
+function attributes(node: ts.JsxOpeningElement | ts.JsxSelfClosingElement): ts.JsxAttributes {
+  return node.attributes
+}
+
+interface Held {
+  readonly at?: ts.JsxAttribute
+  readonly className?: ts.JsxAttribute
+}
+
+function named(held: ts.JsxAttributes): Held {
+  let at: ts.JsxAttribute | undefined
+  let className: ts.JsxAttribute | undefined
+  for (const one of held.properties) {
+    if (!ts.isJsxAttribute(one) || !ts.isIdentifier(one.name)) continue
+    if (one.name.text === 'at') at = one
+    if (one.name.text === 'className') className = one
+  }
+  return {
+    ...(at === undefined ? {} : { at }),
+    ...(className === undefined ? {} : { className }),
+  }
+}
+
+function wearing(held: ts.JsxAttribute | undefined, added: string, text: string): string {
+  if (held?.initializer === undefined) return `className="${added}"`
+  const value = held.initializer
+  if (ts.isStringLiteral(value)) return `className="${joined([value.text, added])}"`
+  const inner = text.slice(value.getStart() + 1, value.getEnd() - 1)
+  return `className={\`\${${inner}} ${added}\`}`
+}
+
+export function compiled(text: string, at: string): { readonly text?: string; readonly because?: string } {
+  const file = ts.createSourceFile(at, text, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX)
+
+  const arranges: Arranging[] = []
+  const edits: Edit[] = []
+  let because: string | undefined
+  const writing: { readonly from: number; readonly to: number }[] = []
+
+  const calls = (node: ts.Node): void => {
+    if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && node.expression.text === MAKES) {
+      writing.push({ from: node.getStart(), to: node.getEnd() })
+    }
+    if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && ARRANGERS.has(node.expression.text)) {
+      const first = node.arguments[0]
+      const said = first === undefined ? undefined : quoted(first)
+      if (first !== undefined && said !== undefined) {
+        if (!ONE_WORD.test(said)) {
+          because =
+            `${at} names a ${node.expression.text} "${said}", and that name becomes the class everything inside ` +
+            'it is arranged against. This one is not a single word, so it would become two classes and neither ' +
+            'would be the one the stylesheet writes'
+        }
+        const own = `${prefixed(node.expression.text)}${idOf(said)}`
+        arranges.push({ from: node.getStart(), to: node.getEnd(), own })
+        edits.push({ from: first.getStart(), to: first.getEnd(), text: `'${own}'` })
+      }
+    }
+    ts.forEachChild(node, calls)
+  }
+  calls(file)
+
+  const tags = (node: ts.Node): void => {
+    if (ts.isJsxClosingElement(node)) {
+      const tag = tagOf(node)
+      if (ts.isPropertyAccessExpression(tag) && VARIANT_MEMBER.test(tag.name.text)) {
+        edits.push({ from: tag.getStart(), to: tag.getEnd(), text: tag.expression.getText() })
+      }
+    }
+
+    if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+      const tag = tagOf(node)
+      const held = named(attributes(node))
+      const worn: string[] = []
+
+      if (ts.isIdentifier(tag) && HOST.test(tag.text) && !within(writing, node.getStart())) {
+        because =
+          `${at} writes <${tag.text}>, which is a host element: it wears no declared style, sits in no ` +
+          'catalogue, and the style guide, a rebrand and every overlay read past it. Declare the element ' +
+          'and wear its look, or use the declared groupings where a host element would have gone'
+      }
+
+      if (held.className !== undefined && !within(writing, node.getStart())) {
+        because =
+          `${at} writes a \`className\` by hand, which is CSS written in place: it names no style guide ` +
+          'row, wears no declared variant, and the style guide, a rebrand and every overlay read past ' +
+          'it. Declare a variant and wear it — `Box.card` — or name a place with `at`, which the build ' +
+          'turns into the class the arrangement already declares'
+      }
+
+      if (ts.isPropertyAccessExpression(tag) && VARIANT_MEMBER.test(tag.name.text)) {
+        worn.push(classOf(idOf(tag.name.text)))
+        edits.push({ from: tag.getStart(), to: tag.getEnd(), text: tag.expression.getText() })
+      }
+
+      if (held.at !== undefined) {
+        const place = held.at.initializer === undefined ? undefined : quoted(held.at.initializer)
+        if (place === undefined) {
+          because = `${at} gives a place that is not written out where it is used. A place is a class the build joins, so it has to be a plain word here`
+        } else {
+          const own = arranging(arranges, node.getStart())
+          if (own === undefined) {
+            because =
+              `${at} names the place "${place}" outside any composition or screen, and a place is declared by ` +
+              'whatever arranges it. Nothing arranges this one, so the name points at nothing'
+          } else {
+            worn.push(`${own}-${place}`)
+          }
+        }
+        edits.push({ from: held.at.getFullStart(), to: held.at.getEnd(), text: '' })
+      }
+
+      if (worn.length > 0) {
+        const wrote = wearing(held.className, joined(worn), text)
+        if (held.className === undefined) edits.push({ from: tag.getEnd(), to: tag.getEnd(), text: ` ${wrote}` })
+        else edits.push({ from: held.className.getStart(), to: held.className.getEnd(), text: wrote })
+      }
+    }
+
+    ts.forEachChild(node, tags)
+  }
+  tags(file)
+
+  if (because !== undefined) return { because }
+  if (edits.length === 0) return { text }
+
+  let made = text
+  for (const one of [...edits].sort((a, b) => b.from - a.from)) {
+    made = made.slice(0, one.from) + one.text + made.slice(one.to)
+  }
+  return { text: made }
+}
+
+interface Loading {
+  readonly onLoad: (
+    opts: { filter: RegExp },
+    run: (args: { path: string }) => { contents?: string; loader?: string; errors?: readonly { text: string }[] } | undefined,
+  ) => void
+}
+
+let checked: string | null | undefined
+let against: string | undefined
+
+function treeAt(from: string): string | undefined {
+  for (const start of [dirname(resolve(from)), resolve(cwd())]) {
+    let root = start
+    while (root !== dirname(root)) {
+      if (existsSync(join(root, '.thread', 'gate.json')) || existsSync(join(root, '_threads'))) return root
+      root = dirname(root)
+    }
+  }
+  return undefined
+}
+
+export function ungated(from: string): string | null {
+  const root = treeAt(from)
+  const at = root === undefined ? '' : join(root, '.thread', 'gate.json')
+
+  const stamp = at !== '' && existsSync(at) ? `${String(statSync(at).mtimeMs)}:${String(statSync(at).size)}` : `none:${from}`
+  if (checked !== undefined && against === stamp) return checked
+  against = stamp
+  checked = null
+
+  if (at === '' || !existsSync(at)) {
+    checked =
+      'this tree has no passing gate, so nothing in it may compile. Run `thread gate` — or the ' +
+      '`dev`, `build` and `start` scripts, which run it for you. A gate that has never run is not a ' +
+      'gate that passed, and the file you are compiling was never measured. Compiling ' +
+      `\`${from}\`, it looked for a gate receipt from \`${dirname(resolve(from))}\` and from ` +
+      `\`${resolve(cwd())}\` upwards${at === '' ? ', and neither reached a tree' : `, and found none at ${at}`}`
+    return checked
+  }
+  const held = JSON.parse(readFileSync(at, 'utf8')) as { of?: Record<string, string> }
+  for (const [named, was] of Object.entries(held.of ?? {})) {
+    const now = existsSync(join(dirname(dirname(at)), named))
+      ? createHash('sha256').update(bytesAt(join(dirname(dirname(at)), named))).digest('hex').slice(0, 16)
+      : 'gone'
+    if (now === was) continue
+    checked = `${named} has changed since the gate last passed, so what this tree declares and what it was measured as no longer agree. Run \`thread gate\``
+    return checked
+  }
+  return checked
+}
+
+export default function loader(this: { readonly resourcePath?: string } | void, source: string): string {
+  const at = typeof this?.resourcePath === 'string' ? this.resourcePath : ''
+  const skipped = at === '' ? null : ungated(at)
+  if (skipped !== null) throw new Error(`thread: ${skipped}.`)
+  const made = compiled(source, at)
+
+  if (made.because !== undefined) throw new Error(made.because)
+  return made.text ?? source
+}
+
+export const plugin: { readonly name: string; readonly setup: (build: Loading) => void } = {
+  name: 'thread-react',
+  setup(build) {
+    build.onLoad({ filter: OWNED }, (args) => {
+      const text = readFileSync(args.path, 'utf8')
+      const made = compiled(text, args.path)
+      if (made.because !== undefined) return { errors: [{ text: made.because }] }
+      return { contents: made.text ?? text, loader: 'tsx' }
+    })
+  },
+}

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

@@ -1,4 +1,5 @@
 export declare function typedRoute(source: string): string | undefined;
+export declare function viewsIn(source: string): readonly string[];
 interface Move {
     readonly to?: string;
     readonly through?: string;

package/dist/ui/generators/routes.js

@@ -1,20 +1,13 @@
-var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
-    if (typeof path === "string" && /^\.\.?\//.test(path)) {
-        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
-            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
-        });
-    }
-    return path;
-};
-import { existsSync, mkdirSync, readFileSync, realpathSync, writeFileSync } from 'node:fs';
 import { dirname, join, relative } from 'node:path';
 import { argv, stderr, stdout } from 'node:process';
-import { pathToFileURL } from 'node:url';
 import ts from 'typescript';
+import { existsSync, readFileSync, realpathSync, writeFileSync } from "@prestack/thread/core/files";
 import { exit, invoked } from "@prestack/thread/core/invoked";
+import { valuesIn } from "@prestack/thread/core/rows";
 import { named as packageOf } from "@prestack/thread/core/scope";
 import { findTree, inTree } from "@prestack/thread/core/tree";
-import { nameOf as compositionOf } from "../compositions.js";
+import { PERMITS_AT } from "@prestack/thread/operations/access";
+import { COMPILED, compiledAt, nameOf as compositionOf } from "../compositions.js";
 import { PRESENTATIONS } from "../door.js";
 import { PAGE, entryAmong, nameOf, pageAt, presentedIn, routeFor } from "../screens.js";
 import { keyProps } from "./i18n.js";
@@ -24,29 +17,38 @@ const DECLARED = `src/_generated/seams.${'ts'}`;
 const CLIENT = `app/_generated/dispatching.${'ts'}`;
 const DOOR = `app/_generated/door.${'tsx'}`;
 const MAP = `app/_generated/map.${'ts'}`;
-const PROVIDER = `${packageOf('ui')}/provider`;
-const GRAMMAR = `${packageOf('ui')}/islands/map`;
+const PROVIDER = `${COMPILED}/ui/provider.tsx`;
+const GRAMMAR = `${COMPILED}/ui/islands/map.ts`;
 const MOVES = 'navigateTo';
+const sheetAt = (at) => {
+    if (!existsSync(at))
+        return {};
+    return valuesIn(readFileSync(at));
+};
 function door(knowing, wording, dispatching, moving, presenting) {
     const opening = presenting.length > 0;
-    const props = `asking={ASKING}${knowing ? ' actor={actor}' : ''}${dispatching ? ' dispatch={dispatchTo}' : ''}` +
+    const props = `asking={ASKING}${knowing ? ' actor={actor} permits={gate}' : ''}${dispatching ? ' dispatch={dispatchTo}' : ''}` +
         `${moving ? ' navigateTo={navigateTo}' : ''}${wording ? ' locale={SOURCE} wording={WORDING}' : ''}`;
     return [
         "'use client'",
         '',
         '/* GENERATED by thread — do not edit. It is derived from what this app declares. */',
         '',
-        ...(moving
-            ? [`import { useCallback, ${opening ? 'useState, ' : ''}type ReactNode } from 'react'`, "import { useRouter } from 'next/navigation'"]
+        ...(moving || knowing
+            ? [
+                `import { useCallback, ${moving && opening ? 'useState, ' : ''}type ReactNode } from 'react'`,
+                ...(moving ? ["import { useRouter } from 'next/navigation'"] : []),
+            ]
             : ["import type { ReactNode } from 'react'"]),
         '',
-        `import { ThreadUi } from '${PROVIDER}'`,
+        `import { ThreadUi } from '${reaching(DOOR, PROVIDER)}'`,
         '',
         "import { ASKING } from './declared.ts'",
+        ...(knowing ? [`import { permits } from '${reaching(DOOR, PERMITS_AT)}'`] : []),
         ...(dispatching ? ["import { dispatchTo } from './dispatching.ts'"] : []),
         ...(moving ? ["import { MAP } from './map.ts'"] : []),
         ...(wording ? ["import { SOURCE, WORDING } from './wording.ts'"] : []),
-        ...(opening ? ['', ...presenting.map((one) => `import { ${one.name} } from '${reaching(DOOR, one.at)}'`)] : []),
+        ...(opening ? ['', ...presenting.map((one) => `import { ${one.name} } from '${reaching(DOOR, compiledAt(one.at))}'`)] : []),
         '',
         'export function Door({',
         ...(knowing
@@ -59,6 +61,14 @@ function door(knowing, wording, dispatching, moving, presenting) {
             : []),
         '  readonly children: ReactNode',
         '}) {',
+        ...(knowing
+            ? [
+                '  const gate = useCallback(',
+                '    (action: string): boolean => (actor === undefined ? false : permits(actor, action, null).allow),',
+                '    [actor],',
+                '  )',
+            ]
+            : []),
         ...(moving
             ? [
                 '  const router = useRouter()',
@@ -115,6 +125,21 @@ const TYPED = /screen\(\s*'[^']*'\s*,\s*\{[^}]*route:\s*'([^']*)'/;
 export function typedRoute(source) {
     return TYPED.exec(source)?.[1];
 }
+const SHOWING = /screen\(\s*'[^']*'\s*,\s*\{[^}]*views:\s*\[([^\]]*)\]/;
+export function viewsIn(source) {
+    const held = SHOWING.exec(source)?.[1];
+    if (held === undefined)
+        return [];
+    return [...held.matchAll(QUOTED)].map(([, single, double]) => single ?? double ?? '').filter((one) => one !== '');
+}
+const VIEW = /^vw_[a-z][a-z0-9]*(?:_[a-z0-9]+)*$/;
+const OPERATION = /operation:\s*"([^"]+)"/g;
+function reachable(at) {
+    const held = join(at, CLIENT);
+    if (!existsSync(held))
+        return [];
+    return [...readFileSync(held, 'utf8').matchAll(OPERATION)].map(([, one]) => one ?? '');
+}
 function written(node) {
     if (node === undefined)
         return undefined;
@@ -243,7 +268,7 @@ function mapModule(map) {
     return [
         '/* GENERATED by thread — do not edit. It is derived from the screens, and from every navigateTo they and their compositions hold. */',
         '',
-        `import type { MapIsland } from '${GRAMMAR}'`,
+        `import type { MapIsland } from '${reaching(MAP, GRAMMAR)}'`,
         '',
         'export const MAP: MapIsland = {',
         '  specVersion: 1,',
@@ -275,7 +300,7 @@ function reaching(file, at) {
     return `${up}${at.replace(/\.tsx?$/, '')}`;
 }
 function page(name, at, route) {
-    const from = reaching(pageAt(route), at);
+    const from = reaching(pageAt(route), compiledAt(at));
     return [
         '/* GENERATED by thread — do not edit. It follows from the screen\'s name and its place among the pages. */',
         '',
@@ -287,32 +312,47 @@ function page(name, at, route) {
         '',
     ].join('\n');
 }
-function guarding(checker) {
-    if (checker === undefined) {
-        return [
-            "throw new Error('thread: the compiler that checks this tree cannot be found, so nothing here " +
-                "can be compiled. Reinstall the framework packages. A check that cannot run is not a check " +
-                "that passed.')",
-            '',
-        ];
-    }
+function gate(typed) {
+    const said = typed ? ' as { of?: Record<string, string> }' : '';
     return [
-        "import { ungated } from './react.ts'",
+        "import { createHash } from 'node:crypto'",
+        "import { existsSync, readFileSync, statSync } from 'node:fs'",
+        "import { join } from 'node:path'",
         '',
-        "const why = ungated(`${process.cwd()}/app/layout.tsx`)",
-        'if (why !== null) throw new Error(`thread: ${why}`)',
+        "const receipt = join(process.cwd(), '.thread', 'gate.json')",
+        'if (!existsSync(receipt)) {',
+        '  throw new Error(',
+        "    'thread: this tree has no passing gate, so nothing in it may compile. Run `thread gate` — or the ' +",
+        "      'dev, build and start scripts, which run it for you. A gate that has never run is not a gate that passed.',",
+        '  )',
+        '}',
+        "const passed = Symbol.for('thread.gate')",
+        "const stamp = String(statSync(receipt).mtimeMs) + ':' + String(statSync(receipt).size)",
+        'if (Reflect.get(globalThis, passed) !== stamp) {',
+        `  const measured = JSON.parse(readFileSync(receipt, 'utf8'))${said}`,
+        '  for (const [named, was] of Object.entries(measured.of ?? {})) {',
+        '    const at = join(process.cwd(), named)',
+        "    const now = existsSync(at) ? createHash('sha256').update(readFileSync(at)).digest('hex').slice(0, 16) : 'gone'",
+        '    if (now === was) continue',
+        '    throw new Error(',
+        "      'thread: ' + named + ' has changed since the gate last passed, so what this tree declares and what ' +",
+        "        'it was measured as no longer agree. Run `thread gate`',",
+        '    )',
+        '  }',
+        '  Reflect.set(globalThis, passed, stamp)',
+        '}',
         '',
     ];
 }
-function layout(wording, icons, source, checker, knowing, doored) {
+function layout(wording, icons, source, knowing, doored) {
     return [
         '/* GENERATED by thread — do not edit. It is derived from what the other generators produce. */',
         '',
         '/// <reference types="next/types/global" />',
         '',
-        ...guarding(checker),
+        ...gate(true),
         "import type { ReactNode } from 'react'",
-        ...(doored ? ["import { Door } from './_generated/door.tsx'"] : [`import { ThreadUi } from '${PROVIDER}'`]),
+        ...(doored ? ["import { Door } from './_generated/door.tsx'"] : [`import { ThreadUi } from '${reaching(LAYOUT, PROVIDER)}'`]),
         ...(doored ? [] : ["import { ASKING } from './_generated/declared.ts'"]),
         ...(knowing
             ? ["import { headers } from 'next/headers'", `import { actor } from '../${DECLARED}'`]
@@ -365,14 +405,6 @@ function rootFor(at) {
     const common = shared.join('/');
     return relative(here, common) || '.';
 }
-function loaderFor(at) {
-    try {
-        return realpathSync(join(at, 'node_modules', packageOf('ui'), 'dist', 'generators', 'react.js'));
-    }
-    catch {
-        return undefined;
-    }
-}
 const DRIVER = /export\s+const\s+driver\s*:[^=\n]*=\s*\[([^\]]*)\]/;
 const QUOTED = /'([^']+)'|"([^"]+)"/g;
 const RELATIVE = /(?:^|[\s;{(])import\s+(?!type\s)(?:[\w*{][^'"]*from\s+)?['"](\.[^'"]+)['"]/g;
@@ -414,45 +446,14 @@ function externalFor(at) {
     }
     return [...found].sort();
 }
-function builtAs(loader) {
-    try {
-        const held = JSON.parse(readFileSync(join(dirname(loader), '..', '..', 'package.json'), 'utf8'));
-        return held.version ?? 'unknown';
-    }
-    catch {
-        return 'unknown';
-    }
-}
-function config(root, loader, external) {
+function config(root, external) {
     const turbopack = [
         ...(root === undefined ? [] : [`    root: join(import.meta.dirname, ${JSON.stringify(root)}),`]),
-        ...(loader === undefined
-            ? []
-            : [
-                '    rules: {',
-                `      '**/*.tsx': { loaders: [{ loader: ${JSON.stringify(loader)}, options: ${JSON.stringify({ built: builtAs(loader) })} }] },`,
-                '    },',
-            ]),
     ];
-    const gate = loader === undefined
-        ? [
-            "throw new Error('thread: the compiler that checks this tree cannot be found, so nothing here " +
-                "can be compiled. Reinstall the framework packages. A check that cannot run is not a check " +
-                "that passed.')",
-            '',
-        ]
-        : [
-            `import { ungated } from ${JSON.stringify(loader)}`,
-            '',
-            'const why = ungated(import.meta.filename)',
-            'if (why !== null) throw new Error(`thread: ${why}`)',
-            '',
-        ];
     return [
         '/* GENERATED by thread — do not edit. It is derived from where the packages resolve. */',
         '',
-        ...(root === undefined ? [] : ["import { join } from 'node:path'", '']),
-        ...gate,
+        ...gate(false),
         'export default {',
         ...(turbopack.length === 0 ? [] : ['  turbopack: {', ...turbopack, '  },']),
         ...(external.length === 0
@@ -471,14 +472,14 @@ async function run() {
         stdout.write(`routes: this tree has no ${relative(at, screensAt)}, so it declares no screen and there is no map, page or layout to write or check.\n`);
         return 0;
     }
-    const sheet = (await import(__rewriteRelativeImportExtension(pathToFileURL(screensAt).href)));
+    const sheet = valuesIn(readFileSync(screensAt));
     if (sheet.SCREEN === undefined) {
         stderr.write('routes: _threads/screens.ts exports no `SCREEN`, so nothing declares a screen here.\n');
         return 1;
     }
-    const held = (await import(__rewriteRelativeImportExtension(pathToFileURL(inTree(tree, `localizations.${'ts'}`)).href)).catch(() => ({})));
+    const held = sheetAt(inTree(tree, `localizations.${'ts'}`));
     const source = held.LOCALIZATION?.holds?.find((one) => one.id === 'source')?.is ?? 'en';
-    const placed = (await import(__rewriteRelativeImportExtension(pathToFileURL(inTree(tree, `compositions.${'ts'}`)).href)).catch(() => ({})));
+    const placed = sheetAt(inTree(tree, `compositions.${'ts'}`));
     const compositions = placed.COMPOSITION?.declares ?? [];
     const rows = sheet.SCREEN.declares ?? [];
     const texts = new Map();
@@ -495,6 +496,7 @@ async function run() {
     const made = [];
     const routes = new Map();
     const screens = [];
+    const reaches = reachable(at);
     for (const row of rows) {
         const text = texts.get(row.id) ?? '';
         const typed = typedRoute(text);
@@ -514,12 +516,27 @@ async function run() {
         }
         const route = shownAs === PAGE ? routeFor(row.id, row.id === entry) : undefined;
         routes.set(name, route);
+        const shows = viewsIn(text);
+        for (const one of shows) {
+            if (!VIEW.test(one)) {
+                stderr.write(`routes: ${row.at} shows \`${one}\`, and that is not the name of a view. A view is ` +
+                    '`vw_` and then lower case words joined by underscores. A screen names a declared read, ' +
+                    'and never states what the read does.\n');
+                return 1;
+            }
+            if (!reaches.includes(one)) {
+                stderr.write(`routes: ${row.at} shows \`${one}\`, and this app reaches no operation by that name. It reaches ` +
+                    `${reaches.length === 0 ? 'nothing yet — \`thread capabilities\` writes that list, and the settle runs it before this' : reaches.join(', ')}. Declare the view with ` +
+                    '`thread create operation`, or name one of those.\n');
+                return 1;
+            }
+        }
         screens.push({
             id: name,
             nameKey: `screen.${row.id}`,
             ...(route === undefined ? {} : { path: route }),
             entry: row.id === entry,
-            shows: [],
+            shows: [...shows],
         });
         if (route === undefined)
             continue;
@@ -541,7 +558,7 @@ async function run() {
     }
     const map = { specVersion: 1, screens, links };
     made.push({ path: MAP, text: mapModule(map) });
-    made.push({ path: CONFIG, text: config(rootFor(at), loaderFor(at), externalFor(at)) });
+    made.push({ path: CONFIG, text: config(rootFor(at), externalFor(at)) });
     const dispatching = existsSync(join(at, CLIENT));
     const moving = rows.length > 0;
     const doored = dispatching || moving;
@@ -552,7 +569,7 @@ async function run() {
         made.push({ path: DOOR, text: door(existsSync(join(at, DECLARED)), existsSync(join(at, WORDING)), dispatching, moving, presenting) });
     made.push({
         path: LAYOUT,
-        text: layout(existsSync(join(at, WORDING)), existsSync(join(at, 'app/_generated/icons.ts')), source, loaderFor(at), existsSync(join(at, DECLARED)), doored),
+        text: layout(existsSync(join(at, WORDING)), existsSync(join(at, 'app/_generated/icons.ts')), source, existsSync(join(at, DECLARED)), doored),
     });
     const paged = map.screens.filter((one) => one.path !== undefined).length;
     const counted = `${String(map.screens.length)} screen(s), ${String(paged)} route(s), ${String(map.links.length)} link(s)`;
@@ -584,7 +601,6 @@ async function run() {
         return 0;
     }
     for (const one of made) {
-        mkdirSync(dirname(join(at, one.path)), { recursive: true });
         writeFileSync(join(at, one.path), one.text, 'utf8');
     }
     stdout.write(`routes: the map — ${counted}\n`);