@prestack/thread-ui 0.0.1 → 0.0.2

package/dist/ui/provider.tsx

@@ -0,0 +1,182 @@
+'use client'
+
+import { useCallback, useContext, useEffect, useMemo, useSyncExternalStore, type ReactNode } from 'react'
+
+import { en } from './i18n/catalogs/en.ts'
+import { createTranslator } from './i18n/translator.ts'
+import { EDGE_SCROLL_DEFAULTS } from './drag.ts'
+
+import { createCollector, INERT_COLLECTOR } from './collector.ts'
+import { Clock, Ticker } from './door.ts'
+import { UiContext, UiProvider, type Appearance, type UiConfig } from './wrappers.tsx'
+
+export interface ThreadUiProps {
+  readonly children: ReactNode
+
+  readonly palette?: { readonly accent: string; readonly surface: string }
+
+  readonly mode?: 'light' | 'dark'
+  readonly locale?: string
+
+  readonly wording?: Readonly<Record<string, Readonly<Record<string, string>>>>
+
+  readonly actor?: { readonly id: string | null; readonly roles: readonly string[]; readonly entitlements: readonly string[] }
+
+  readonly asking?: readonly { readonly id: string; readonly selector: string; readonly when?: string }[]
+
+  readonly permits?: (action: string) => boolean
+
+  readonly platform?: string
+
+  readonly telemetry?: {
+
+    readonly endpoint?: string
+    readonly allowed: () => boolean
+
+    readonly sample?: number
+  }
+
+  readonly dispatch?: (name: string, input?: Readonly<Record<string, unknown>>) => Promise<unknown>
+
+  readonly navigateTo?: (screen: string) => void
+
+  readonly config?: UiConfig
+}
+
+function useMedia(query: string, fallback: boolean): boolean {
+
+  const subscribe = useCallback(
+    (onChange: () => void) => {
+      if (typeof globalThis.matchMedia !== 'function') return () => {}
+      const list = globalThis.matchMedia(query)
+      list.addEventListener('change', onChange)
+      return () => list.removeEventListener('change', onChange)
+    },
+    [query],
+  )
+
+  const read = useCallback(
+    () => (typeof globalThis.matchMedia === 'function' ? globalThis.matchMedia(query).matches : fallback),
+    [query, fallback],
+  )
+
+  return useSyncExternalStore(subscribe, read, () => fallback)
+}
+
+function readPalette(): { accent: string; surface: string } {
+  if (typeof globalThis.getComputedStyle !== 'function' || typeof globalThis.document !== 'object') {
+    return { accent: '', surface: '' }
+  }
+  const style = globalThis.getComputedStyle(globalThis.document.documentElement)
+  const read = (name: string): string => style.getPropertyValue(name).trim()
+  return {
+    accent: read('--thread-palette-accent'),
+    surface: read('--thread-palette-surface'),
+  }
+}
+
+function readEdgeScroll(): { band: number; speed: number } {
+  if (typeof globalThis.getComputedStyle !== 'function' || typeof globalThis.document !== 'object') return { ...EDGE_SCROLL_DEFAULTS }
+  const style = globalThis.getComputedStyle(globalThis.document.documentElement)
+  const read = (name: string, fallback: number): number => {
+    const value = Number.parseFloat(style.getPropertyValue(name))
+    return Number.isFinite(value) ? value : fallback
+  }
+  return {
+    band: read('--thread-edge-scroll-band', EDGE_SCROLL_DEFAULTS.band),
+    speed: read('--thread-edge-scroll-speed', EDGE_SCROLL_DEFAULTS.speed),
+  }
+}
+
+export function ThreadUi(props: ThreadUiProps): ReactNode {
+
+  const existing = useContext(UiContext)
+  const opinionated =
+    props.mode !== undefined ||
+    props.locale !== undefined ||
+    props.palette !== undefined ||
+    props.platform !== undefined ||
+    props.telemetry !== undefined ||
+    props.wording !== undefined ||
+    props.config !== undefined
+
+  const prefersDark = useMedia('(prefers-color-scheme: dark)', false)
+  const reduceMotion = useMedia('(prefers-reduced-motion: reduce)', false)
+
+  const appearance: Appearance = {
+    mode: props.mode ?? (prefersDark ? 'dark' : 'light'),
+    reduceMotion,
+  }
+
+  const language = props.locale ?? 'en'
+  const translate = useMemo(() => {
+    const held = props.wording?.[language]
+    if (props.wording !== undefined && held === undefined) {
+      throw new Error(
+        `This app was handed wording and none of it is in "${language}". It has ` +
+          `${Object.keys(props.wording).sort().join(', ')} — declare the language in ` +
+          '`_threads/localizations.ts` and run `thread i18n`, or ask for one it is in.',
+      )
+    }
+    return createTranslator(held ?? en, { locale: language })
+  }, [language, props.wording])
+
+  const clock = useMemo(() => new Clock(), [])
+
+  const ticker = useMemo(() => new Ticker(), [])
+
+  const telemetryOff = props.telemetry === undefined
+
+  const collector = useMemo(() => {
+    if (props.telemetry === undefined) return INERT_COLLECTOR
+    return createCollector({
+      endpoint: props.telemetry.endpoint ?? '/obs/client',
+      allowed: props.telemetry.allowed,
+      ...(props.telemetry.sample === undefined ? {} : { sample: props.telemetry.sample }),
+      ...(typeof navigator === 'object' && typeof navigator.sendBeacon === 'function'
+        ? { beacon: (url: string, body: string) => navigator.sendBeacon(url, new Blob([body], { type: 'application/json' })) }
+        : {}),
+    })
+
+  }, [telemetryOff, props.telemetry?.endpoint, props.telemetry?.sample, props.telemetry?.allowed])
+
+  useEffect(() => () => collector.stop(), [collector])
+
+  const gate = props.permits
+  const asked = props.asking
+
+  const holding = useMemo(
+    () =>
+      gate === undefined
+        ? []
+        : (asked ?? []).filter((one) => one.when !== undefined && !gate(one.when)).map((one) => one.id),
+    [gate, asked],
+  )
+
+  const derived: UiConfig = useMemo(
+    () => ({
+      palette: props.palette ?? readPalette(),
+      appearance,
+      clock,
+      ticker,
+
+      now: () => Date.now(),
+      edgeScroll: readEdgeScroll(),
+
+      ...(props.actor === undefined ? {} : { actor: props.actor }),
+      ...(props.asking === undefined ? {} : { asking: props.asking }),
+      ...(holding.length === 0 ? {} : { holding }),
+      ...(props.platform === undefined ? {} : { platform: props.platform }),
+      ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }),
+      ...(props.navigateTo === undefined ? {} : { navigateTo: props.navigateTo }),
+      collector,
+      translate: (key, params) => translate(key as never, params as never),
+    }),
+
+    [props.actor, props.asking, props.palette, props.platform, props.dispatch, props.navigateTo, holding, appearance.mode, appearance.reduceMotion, clock, ticker, collector, translate],
+  )
+
+  if (existing !== null && !opinionated) return props.children
+
+  return <UiProvider config={props.config ?? derived}>{props.children}</UiProvider>
+}

package/dist/ui/render-loop.ts

@@ -0,0 +1,133 @@
+'use client'
+
+import { useRef } from 'react'
+
+const RENDER_LIMIT = 40
+
+const WINDOW_MS = 1000
+
+const COMPARE_DEPTH = 3
+
+function armed(): boolean {
+
+  return process.env.NODE_ENV !== 'production'
+}
+
+export interface RenderLoop {
+
+  readonly component: string
+  readonly renders: number
+  readonly withinMs: number
+
+  readonly unstable: readonly string[]
+
+  readonly differing: readonly string[]
+}
+
+export class RenderLoopError extends Error {
+  readonly loop: RenderLoop
+
+  constructor(loop: RenderLoop) {
+    super(describe(loop))
+    this.name = 'RenderLoopError'
+    this.loop = loop
+  }
+}
+
+function describe(loop: RenderLoop): string {
+  const head = `${loop.component} rendered ${loop.renders} times in ${loop.withinMs}ms, which is a render loop.`
+
+  if (loop.unstable.length > 0) {
+    const props = loop.unstable.join(', ')
+    return (
+      `${head} ${props} arrived with a new identity every render while its value stayed equal, so ` +
+      `every render caused the next one. Return the same object for the same answer — that is the ` +
+      `read layer's job (ADR-180 rule 10), not the component's — or compute the value inside render ` +
+      `instead of syncing it into state from an effect (rule 11).`
+    )
+  }
+
+  if (loop.differing.length > 0) {
+    return (
+      `${head} ${loop.differing.join(', ')} changed VALUE on every render, so this is not an identity ` +
+      `problem: something is writing during render. Move the write to an event or an action.`
+    )
+  }
+
+  return (
+    `${head} No prop changed at all, so the re-render comes from state or context inside the ` +
+    `component — look for a setter called from an effect body (ADR-180 rule 11).`
+  )
+}
+
+function equalValue(a: unknown, b: unknown, depth = 0): boolean {
+  if (Object.is(a, b)) return true
+  if (depth >= COMPARE_DEPTH) return false
+  if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) return false
+
+  if (Array.isArray(a) || Array.isArray(b)) {
+    if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) return false
+    return a.every((item, index) => equalValue(item, b[index], depth + 1))
+  }
+
+  const left = a as Record<string, unknown>
+  const right = b as Record<string, unknown>
+  const keys = Object.keys(left)
+  if (keys.length !== Object.keys(right).length) return false
+  return keys.every((key) => key in right && equalValue(left[key], right[key], depth + 1))
+}
+
+function compare(
+  previous: Record<string, unknown>,
+  next: Record<string, unknown>,
+): { unstable: string[]; differing: string[] } {
+  const unstable: string[] = []
+  const differing: string[] = []
+
+  for (const key of [...new Set([...Object.keys(previous), ...Object.keys(next)])].sort()) {
+    if (Object.is(previous[key], next[key])) continue
+    if (equalValue(previous[key], next[key])) unstable.push(key)
+    else differing.push(key)
+  }
+
+  return { unstable, differing }
+}
+
+export function useRenderLoopDetector(component: string, props: Record<string, unknown>): void {
+  const renders = useRef(0)
+  const openedAt = useRef(0)
+  const previous = useRef<Record<string, unknown> | undefined>(undefined)
+  const tripped = useRef<RenderLoop | undefined>(undefined)
+
+  if (armed()) {
+
+    if (tripped.current !== undefined) throw new RenderLoopError(tripped.current)
+
+    const now = Date.now()
+    const elapsed = now - openedAt.current
+
+    if (openedAt.current === 0 || elapsed > WINDOW_MS) {
+      openedAt.current = now
+      renders.current = 0
+    }
+
+    renders.current += 1
+
+    if (renders.current > RENDER_LIMIT) {
+      const loop: RenderLoop = {
+        component,
+        renders: renders.current,
+
+        withinMs: now - openedAt.current,
+        ...compare(previous.current ?? {}, props),
+      }
+
+      tripped.current = loop
+      renders.current = 0
+      openedAt.current = now
+      throw new RenderLoopError(loop)
+    }
+  }
+
+  previous.current = props
+}

package/dist/ui/roving-focus.ts

@@ -0,0 +1,161 @@
+'use client'
+
+import { useCallback, useEffect, useRef, type RefObject } from 'react'
+
+export const ITEM_ATTR = 'data-roving-item'
+
+export interface RovingOptions {
+  readonly orientation: 'vertical' | 'horizontal'
+
+  readonly wrap?: boolean
+  readonly active?: boolean
+}
+
+interface Item {
+  readonly element: HTMLElement
+  readonly disabled: boolean
+  readonly text: string
+}
+
+function items(root: HTMLElement | null): readonly Item[] {
+  if (root === null) return []
+  return [...root.querySelectorAll<HTMLElement>(`[${ITEM_ATTR}]`)].map((element) => ({
+    element,
+
+    disabled: element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true',
+    text: (element.textContent ?? '').trim().toLowerCase(),
+  }))
+}
+
+function step(list: readonly Item[], from: number, direction: 1 | -1, wrap: boolean): number {
+  const count = list.length
+  if (count === 0) return -1
+  let index = from
+  for (let moved = 0; moved < count; moved += 1) {
+    const next = index + direction
+    if (next < 0 || next >= count) {
+      if (!wrap) return from
+      index = direction === 1 ? 0 : count - 1
+    } else {
+      index = next
+    }
+    if (!(list[index] as Item).disabled) return index
+  }
+  return from
+}
+
+function firstEnabled(list: readonly Item[], from = 0): number {
+  for (let i = from; i < list.length; i += 1) if (!(list[i] as Item).disabled) return i
+  return -1
+}
+
+function lastEnabled(list: readonly Item[]): number {
+  for (let i = list.length - 1; i >= 0; i -= 1) if (!(list[i] as Item).disabled) return i
+  return -1
+}
+
+function isRtl(element: HTMLElement): boolean {
+  const declared = element.closest('[dir]')?.getAttribute('dir')?.toLowerCase()
+  if (declared === 'rtl') return true
+  if (declared === 'ltr') return false
+  return getComputedStyle(element).direction === 'rtl'
+}
+
+const TYPEAHEAD_MS = 1000
+
+export function typeaheadMatch(list: readonly Item[], buffer: string, current: number): number {
+  const enabled = list.map((item, index) => ({ item, index })).filter(({ item }) => !item.disabled)
+  if (enabled.length === 0 || buffer.length === 0) return -1
+
+  const repeated = buffer.length > 1 && [...buffer].every((c) => c === buffer[0])
+  const prefix = repeated ? (buffer[0] as string) : buffer
+
+  const startAt = enabled.findIndex(({ index }) => index === current)
+  for (let i = 0; i < enabled.length; i += 1) {
+    const candidate = enabled[(startAt + 1 + i) % enabled.length] as { item: Item; index: number }
+    if (candidate.item.text.startsWith(prefix)) return candidate.index
+  }
+  return -1
+}
+
+export function useRovingFocus(ref: RefObject<HTMLElement | null>, options: RovingOptions): void {
+  const { orientation, wrap = false, active = true } = options
+  const indexRef = useRef(0)
+  const bufferRef = useRef('')
+  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+
+  const applyTabIndex = useCallback(
+    (list: readonly Item[], index: number): void => {
+      list.forEach((item, i) => {
+        item.element.setAttribute('tabindex', i === index ? '0' : '-1')
+      })
+    },
+    [],
+  )
+
+  useEffect(() => {
+    if (!active) return
+    const root = ref.current
+    if (root === null) return
+
+    const list = items(root)
+    const start = firstEnabled(list)
+    indexRef.current = start === -1 ? 0 : start
+    applyTabIndex(list, indexRef.current)
+
+    const move = (to: number): void => {
+      const current = items(root)
+      if (to < 0 || to >= current.length) return
+      indexRef.current = to
+      applyTabIndex(current, to)
+      ;(current[to] as Item).element.focus()
+    }
+
+    const onKeyDown = (event: KeyboardEvent): void => {
+      const current = items(root)
+      if (current.length === 0) return
+
+      const rtl = isRtl(root)
+      const forward = orientation === 'horizontal' ? (rtl ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown'
+      const backward = orientation === 'horizontal' ? (rtl ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp'
+
+      if (event.key === forward) {
+        event.preventDefault()
+        move(step(current, indexRef.current, 1, wrap))
+        return
+      }
+      if (event.key === backward) {
+        event.preventDefault()
+        move(step(current, indexRef.current, -1, wrap))
+        return
+      }
+      if (event.key === 'Home') {
+        event.preventDefault()
+        move(firstEnabled(current))
+        return
+      }
+      if (event.key === 'End') {
+        event.preventDefault()
+        move(lastEnabled(current))
+        return
+      }
+
+      if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return
+      event.preventDefault()
+      bufferRef.current += event.key.toLowerCase()
+      if (timerRef.current !== undefined) clearTimeout(timerRef.current)
+      timerRef.current = setTimeout(() => {
+        bufferRef.current = ''
+      }, TYPEAHEAD_MS)
+
+      const found = typeaheadMatch(current, bufferRef.current, indexRef.current)
+      if (found !== -1) move(found)
+    }
+
+    root.addEventListener('keydown', onKeyDown)
+    return () => {
+      root.removeEventListener('keydown', onKeyDown)
+      if (timerRef.current !== undefined) clearTimeout(timerRef.current)
+    }
+  }, [active, orientation, wrap, ref, applyTabIndex])
+}

package/dist/ui/screens.js

@@ -8,11 +8,11 @@ var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExte
 };
 import { existsSync, mkdirSync, writeFileSync } from 'node:fs';
 import { basename, dirname, join } from 'node:path';
-import { stdout } from 'node:process';
+import { argv, stdout } from 'node:process';
 import { pathToFileURL } from 'node:url';
 import { exit, invoked } from "@prestack/thread/core/invoked";
 import { findTree, inTree } from "@prestack/thread/core/tree";
-import { undeclared } from "./compositions.js";
+import { HOME, settled, undeclared } from "./compositions.js";
 import { PRESENTATIONS } from "./door.js";
 const here = 'thread/ui/screens.ts';
 const said = [
@@ -70,7 +70,7 @@ function starter(row) {
     const name = nameOf(row.at);
     return `'use client'
 
-import { screen } from './wrappers.tsx'
+import { screen } from '${HOME}/wrappers'
 
 export const ${name} = screen('${row.id}', {}, () => (
   <>
@@ -94,13 +94,22 @@ async function run() {
         return 1;
     }
     const rows = held.SCREEN.declares ?? [];
+    const checking = argv.includes('--check');
     const made = seeds(rows, (where) => existsSync(join(tree.at, where)));
-    for (const one of made) {
-        mkdirSync(dirname(join(tree.at, one.path)), { recursive: true });
-        writeFileSync(join(tree.at, one.path), one.content, 'utf8');
-        stdout.write(`thread: seeded ${one.path}\n`);
+    const unseeded = made[0];
+    if (checking && unseeded !== undefined) {
+        stdout.write(`thread: ${unseeded.path} is declared and the file is not there yet. A row names a file, and ` +
+            '`--check` never writes one — run `thread screens` and commit what it seeds.\n');
+        return 1;
+    }
+    if (!checking) {
+        for (const one of made) {
+            mkdirSync(dirname(join(tree.at, one.path)), { recursive: true });
+            writeFileSync(join(tree.at, one.path), one.content, 'utf8');
+            stdout.write(`thread: seeded ${one.path}\n`);
+        }
     }
-    const loose = await undeclared(tree, rows);
+    const loose = [...(await undeclared(tree, rows)), ...settled(tree.at, rows, checking, 'thread screens', new Set())];
     for (const one of loose)
         stdout.write(`thread: ${one}\n`);
     stdout.write(`thread: ${String(rows.length)} screen(s) declared, ${String(made.length)} seeded, ` +

package/dist/ui/screens.ts

@@ -0,0 +1,142 @@
+import { existsSync, mkdirSync, writeFileSync } from 'node:fs'
+import { basename, dirname, join } from 'node:path'
+import { argv, stdout } from 'node:process'
+import { pathToFileURL } from 'node:url'
+
+import { exit, invoked } from '@prestack/thread/core/invoked'
+import type { Threaded } from '@prestack/thread/core/thread'
+import { findTree, inTree } from '@prestack/thread/core/tree'
+
+import { HOME, settled, undeclared } from './compositions.ts'
+import { PRESENTATIONS } from './door.ts'
+
+const here = 'thread/ui/screens.ts'
+
+const said = [
+  {
+    on: '2026-08-25',
+    said: 'Screens are basically compositions arranged in a screen. And this is where we have breakpoint, etc. Compositions maybe also have breakpoints.',
+  },
+  {
+    on: '2026-08-25',
+    said: 'Arrangement is a real fucking thing. IT IS HOW THE STUFF LOOKS IN A SCREEN',
+  },
+  {
+    on: '2026-08-25',
+    said: 'Both',
+  },
+  {
+    on: '2026-09-09',
+    said: 'We have one screen or more. A button navigates to other screen. From THAT the routes are generated.',
+  },
+]
+
+export const declares: readonly Threaded[] = []
+
+export const SCREENS: Threaded & { readonly files: string } = {
+  id: 'screen',
+  at: here,
+  files: 'screens/scr_*.tsx',
+  describes:
+    'Compositions arranged, and the way it is presented: page, sheet, popover, overlay or toast. Where it lives is never typed. The first page an app declares answers `/`, every other page answers its own name, and a sheet, popover, overlay or toast has no route, because a press opens it where somebody already is. The arrangement is the whole of what a screen adds, because how things sit on a screen is declared rather than markup written twice. Each row names a file prefixed `scr_`, sets the properties that lay its compositions out, and may set them differently under a mode, which is where a breakpoint lives: a width is a media query the same way dark is. A composition may set its own arrangement too. The framework ships none, because what an app is made of is the app’s, and this row says what a screen is, never what is inside it.',
+  version: 1,
+  cites: said,
+  declares,
+}
+
+const PASCAL = (id: string): string =>
+  id
+    .split(/[-_]/)
+    .map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`)
+    .join('')
+
+export function nameOf(at: string): string {
+  const file = at.split('\\').join('/').split('/').at(-1) ?? at
+  return PASCAL(file.replace(/^scr_/, '').replace(/\.[^.]+$/, ''))
+}
+
+export const PAGE = PRESENTATIONS[0]
+
+const PRESENTED = /screen\(\s*'[^']*'\s*,\s*\{[^}]*as:\s*'([^']*)'/
+
+export function presentedIn(source: string): string {
+  return PRESENTED.exec(source)?.[1] ?? PAGE
+}
+
+export function routeFor(id: string, entry: boolean): string {
+  return entry ? '/' : `/${id}`
+}
+
+export function pageAt(route: string): string {
+  const trimmed = route.replace(/^\/+|\/+$/g, '')
+  return trimmed === '' ? `app/page.${'tsx'}` : `app/${trimmed}/page.${'tsx'}`
+}
+
+export function entryAmong(rows: readonly { readonly id: string }[], shownAs: (id: string) => string): string | undefined {
+  return rows.find((row) => shownAs(row.id) === PAGE)?.id
+}
+
+function starter(row: Threaded): string {
+  const name = nameOf(row.at)
+  return `'use client'
+
+import { screen } from '${HOME}/wrappers'
+
+export const ${name} = screen('${row.id}', {}, () => (
+  <>
+  </>
+))
+`
+}
+
+export function seeds(rows: readonly Threaded[], held: (at: string) => boolean): readonly { readonly path: string; readonly content: string }[] {
+  return rows.filter((row) => !held(row.at)).map((row) => ({ path: row.at, content: starter(row) }))
+}
+
+async function run(): Promise<number> {
+  const tree = findTree()
+  const at = inTree(tree, 'screens.ts')
+  if (!existsSync(at)) {
+    stdout.write(`thread: this tree has no ${tree.name}/${basename(at)}, so it declares no screen and there is nothing to seed or check.\n`)
+    return 0
+  }
+  const held = (await import(pathToFileURL(at).href)) as { SCREEN?: { readonly declares?: readonly Threaded[] } }
+
+  if (held.SCREEN === undefined) {
+    stdout.write(`thread: ${tree.name}/screens.ts exports no \`SCREEN\`, so nothing declares a screen here.\n`)
+    return 1
+  }
+
+  const rows = held.SCREEN.declares ?? []
+  const checking = argv.includes('--check')
+  const made = seeds(rows, (where) => existsSync(join(tree.at, where)))
+
+  const unseeded = made[0]
+  if (checking && unseeded !== undefined) {
+    stdout.write(
+      `thread: ${unseeded.path} is declared and the file is not there yet. A row names a file, and ` +
+        '`--check` never writes one — run `thread screens` and commit what it seeds.\n',
+    )
+    return 1
+  }
+
+  if (!checking) {
+    for (const one of made) {
+      mkdirSync(dirname(join(tree.at, one.path)), { recursive: true })
+      writeFileSync(join(tree.at, one.path), one.content, 'utf8')
+      stdout.write(`thread: seeded ${one.path}\n`)
+    }
+  }
+
+  const loose = [...(await undeclared(tree, rows)), ...settled(tree.at, rows, checking, 'thread screens', new Set<string>())]
+  for (const one of loose) stdout.write(`thread: ${one}\n`)
+
+  stdout.write(
+    `thread: ${String(rows.length)} screen(s) declared, ${String(made.length)} seeded, ` +
+      `${String(rows.length - made.length)} already written, ` +
+      `${loose.length === 0 ? 'none reaching anything undeclared' : `${String(loose.length)} reaching something undeclared`}\n`,
+  )
+  return loose.length === 0 ? 0 : 1
+}
+
+if (invoked(import.meta.url)) exit(await run())

package/dist/ui/scroll-lock.ts

@@ -0,0 +1,28 @@
+import { nameOf } from './token.ts'
+
+
+
+let held = 0
+let previous: string | null = null
+
+export function lockScroll(): () => void {
+  if (held === 0) {
+    previous = document.body.style.overflow
+    document.body.style.overflow = `var(${nameOf('overflow-hidden')})`
+  }
+  held += 1
+
+  let released = false
+  return () => {
+    if (released) return
+    released = true
+    held -= 1
+    if (held > 0) return
+    document.body.style.overflow = previous ?? ''
+    previous = null
+  }
+}
+
+export function scrollLocks(): number {
+  return held
+}