@prestack/thread-ui 0.1.1 → 0.1.3

package/dist/ui/compositions.ts

@@ -1,8 +1,7 @@
-import { existsSync, readFileSync, readdirSync, rmSync, writeFileSync } from '@prestack/thread/core/files'
+import { existsSync, readFileSync, readdirSync, rmSync, writeFileSync } from '@prestack/thread/integrations/disk'
 import { basename, dirname, join, relative } from 'node:path'
 import { argv, stdout } from 'node:process'
 
-import { TYPED, wrapped } from '@prestack/thread/core/answers'
 import { exit, invoked } from '@prestack/thread/core/invoked'
 import { valuesIn } from '@prestack/thread/core/rows'
 import type { Threaded } from '@prestack/thread/core/thread'
@@ -12,92 +11,6 @@ import { findTree, inTree } from '@prestack/thread/core/tree'
 
 import { compiled } from './generators/react.ts'
 
-export const TEACHES: readonly string[] = [
-  '  what the body may reach, and how a premium state is written:',
-  '',
-  '    `useUi()` is the door. It carries `actor` — who is asking, with the roles read from',
-  '    the row that declared itself the caller — and `translate`, `clock` and `dispatch`. Name',
-  '    it in the body and the import is written for you.',
-  '',
-  '    A premium look is not decided at the call site. A grant already says who may run an',
-  '    operation, in words your own entity declares, and a signal that names that operation',
-  '    holds for exactly the callers the grant refuses. The rule is written once, on the',
-  '    grant, and every screen follows it:',
-  '',
-  '      <FeatureBox.paywalled>',
-  '        <Text k=\'feature.title\' />',
-  '      </FeatureBox.paywalled>',
-  '',
-  '    Read it in three parts, and each is its own command:',
-  '',
-  '      `locked` is a signal the ELEMENT declares it raises — `thread create element` with',
-  '      `raises: locked`. A signal this app declares cannot be raised on an element that',
-  '      never said it raises one, so `Box` will not take it. Nothing passes it here: it is',
-  '      set for you wherever the gate refuses the operation the signal names.',
-  '      `.paywalled` is a variant worn as the TAG, never passed as a prop, and it is what',
-  '      carries the look — `thread create variant` with a `state: locked` and what it sets.',
-  '      Declare that state on a MATERIAL instead and every variant made of it locks the same',
-  '      way, which is how one overlay dresses a whole app from one row.',
-  '      The rule itself is `thread grant`, and the words in it are options on the value your',
-  '      entity names as saying what a caller may do — `thread create entity`.',
-  '',
-  '    THE MEMBER IS THE VARIANT\'S WHOLE ID, CAMELCASED — never the part after the element',
-  '    name. A variant `button-fill` is worn `<Button.buttonFill>`, and `<Button.fill>` is not',
-  '    a thing. `.paywalled` above reads short only because that variant is itself named',
-  '    `paywalled`; most carry the element in their id and wear all of it.',
-  '',
-  '  how a control reaches an operation:',
-  '',
-  '    Wiring is imperative. There is no `run=`, `operation=` or `dispatch=` prop on any',
-  '    element, and the compiler is what will tell you so. A control calls dispatch in its own',
-  '    handler:',
-  '',
-  '      <Button.buttonFill label=\'common.save\'',
-  '        onPress={() => useUi().dispatch?.(\'wf_save\')} />',
-  '',
-  '    `dispatch` is optional on the hook, so `?.` is required — without it the compiler says',
-  '    "Cannot invoke an object which is possibly \'undefined\'". The name is the operation\'s own',
-  '    id from `thread create operation`, and one this app never declared is refused before it',
-  '    runs. An operation whose `to:` named nobody is refused however the button looks — and',
-  '    `to:` takes roles off an entity, which is a noun that arrives with `thread attach',
-  `    ${packageOf('data')}\`.`,
-  '',
-  '    Nothing here decides access. The gate still refuses the operation behind the lock',
-  '    whatever the screen shows, so a screen that got this wrong shows the wrong thing and',
-  '    still cannot do the wrong thing.',
-  '',
-  '  how a press moves to another screen:',
-  '',
-  '    Name the screen. `navigateTo` takes the screen\'s export name — its id in PascalCase, so',
-  '    `order-detail` is reached as `navigateTo="OrderDetail"`:',
-  '',
-  '      <Button.buttonNormal label=\'home.orders\' navigateTo="Orders" />',
-  '',
-  '    That is the whole of it. `thread routes` reads every `navigateTo` the screens and their',
-  '    compositions hold and writes the map — from which screen, through which button, to which',
-  '    screen — and the pages. A page is reached by its route, and a sheet, popover, overlay or',
-  '    toast opens where somebody already is, so the press is written the same way for both.',
-  '    A name no screen has and a destination not written out as a name are each refused there.',
-  '    Never an `href` and never',
-  '    a router: a move the map cannot see is a screen the map reads as unreachable.',
-  '',
-  '  how a screen shows data:',
-  '',
-  '    A screen NAMES the reads it binds, and never fetches. `views` takes the ids of declared',
-  '    views, the framework runs each one, and `useView` hands back what came out:',
-  '',
-  '      export const Orders = screen(\'orders\', { as: \'page\', views: [\'vw_orders\'] }, () => (',
-  '        <Each rows={useView<readonly Row[]>(\'vw_orders\') ?? []} by="id">',
-  '          {(row) => <Text k="orders.line" with={{ name: row.name }} />}',
-  '        </Each>',
-  '      ))',
-  '',
-  '    `useView` comes through the same door as `useUi`, and it refuses a name the screen did not',
-  '    bind. `thread routes` refuses a view this app declares no operation for, and writes what each',
-  '    screen shows into the map. A fetch of your own, or a hook you wrote, is how a screen ends up',
-  '    showing something nothing declared, and there is no second way in.',
-]
-
 export const REACHES = /\buseUi\s*\(/
 
 const here = 'thread/ui/compositions.ts'
@@ -130,7 +43,7 @@ export const COMPOSITIONS: Threaded & { readonly files: string } = {
   declares,
 }
 
-const PASCAL = (id: string): string =>
+export const PASCAL = (id: string): string =>
   id
     .split('-')
     .map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`)
@@ -141,7 +54,7 @@ export function nameOf(at: string): string {
   return PASCAL(file.replace(/^cmp_/, '').replace(/\.[^.]+$/, ''))
 }
 
-type Listed = {
+export type Listed = {
   readonly id: string
   readonly at?: string
   readonly describes?: string
@@ -149,96 +62,19 @@ type Listed = {
   readonly arranges?: boolean
 }
 
-function sheetOf(tree: Tree, file: string, ...named: readonly string[]): readonly Listed[] {
+export function sheetOf(tree: Tree, file: string, ...named: readonly string[]): readonly Listed[] {
   const at = inTree(tree, file)
   if (!existsSync(at)) return []
   const held = valuesIn(readFileSync(at)) as Readonly<
-    Record<string, { readonly declares?: readonly Listed[] } | undefined>
+    Record<string, { readonly derives?: readonly Listed[]; readonly declares?: readonly Listed[] } | undefined>
   >
   for (const one of named) {
-    const found = held[one]?.declares
+    const found = held[one]?.derives ?? held[one]?.declares
     if (found !== undefined) return found
   }
   return []
 }
 
-const camelOf = (id: string): string => id.replace(/-([a-z0-9])/g, (_, one: string) => one.toUpperCase())
-
-const sentence = (one: Listed, pad: string): readonly string[] =>
-  String(one.describes ?? '').trim() === '' ? [] : wrapped(String(one.describes), pad)
-
-function listed(tree: Tree, making: 'composition' | 'screen'): readonly string[] {
-  const elements = sheetOf(tree, `elements.${'ts'}`, 'ELEMENT', 'ELEMENTS')
-  const variants = sheetOf(tree, `variants.${'ts'}`, 'VARIANT', 'VARIANTS')
-  const compositions = sheetOf(tree, `compositions.${'ts'}`, 'COMPOSITION', 'COMPOSITIONS')
-  const screens = making === 'screen' ? sheetOf(tree, `screens.${'ts'}`, 'SCREEN', 'SCREENS') : []
-
-  const worn = new Map<string, string[]>()
-  for (const one of variants) {
-    for (const each of one.wears ?? []) {
-      const key = PASCAL(each)
-      const already = worn.get(key) ?? []
-      if (!already.includes(one.id)) worn.set(key, [...already, one.id])
-    }
-  }
-
-  const writes = (one: Listed): string => {
-    const name = PASCAL(one.id)
-    const members = (worn.get(name) ?? []).sort().map((each) => `<${name}.${camelOf(each)}>`)
-    if (members.length === 0) return `<${name}>`
-    return one.arranges === true ? `<${name}>, or ${members.join(' ')}` : members.join(' ')
-  }
-
-  const section = (title: string, rows: readonly Listed[], write: (one: Listed) => string): readonly string[] =>
-    rows.length === 0
-      ? [`  ${title}: none yet.`, '']
-      : [
-          `  ${title} (${String(rows.length)}):`,
-          ...rows.flatMap((one) => [`    ${write(one)}`, ...sentence(one, '      ')]),
-          '',
-        ]
-
-  return [
-    '',
-    ...(making === 'screen'
-      ? section('SCREENS that exist, and the name a press reaches each one by', screens, (one) => `${one.id} — navigateTo="${PASCAL(one.id)}"`)
-      : []),
-    ...section('COMPOSITIONS you can place', compositions, (one) =>
-      `<${typeof one.at === 'string' && one.at !== '' ? nameOf(one.at) : PASCAL(one.id)}>`,
-    ),
-    ...section('ELEMENTS, written as the tags they can actually be typed as', elements, writes),
-    ...(variants.length === 0
-      ? ['  VARIANTS: none yet.', '']
-      : [
-          `  VARIANTS (${String(variants.length)}), under the elements that accept them:`,
-          ...[...worn.keys()].sort().map((name) =>
-            `    ${name} — ${(worn.get(name) ?? []).sort().map(camelOf).join(', ')}`,
-          ),
-          ...(() => {
-            const nobody = variants.filter((one) => (one.wears ?? []).length === 0).map((one) => one.id)
-            return nobody.length === 0
-              ? []
-              : [`    worn by nothing, so writable nowhere: ${nobody.sort().join(', ')}`]
-          })(),
-          '',
-        ]),
-    '  Materials, style guide values, fonts and animations are chosen inside a VARIANT, never inside',
-    `  a body — \`${TYPED} create variant\` prints every one of them at the moment one is needed.`,
-    '',
-
-    `  Every element and the tags it is written as: \`${TYPED} create element\`. Every variant and`,
-    `  the tag it is worn as: \`${TYPED} create variant\`. Then open the one nearest to what you are`,
-    `  about to build with \`${TYPED} read <id>\` — it already answers how a body is arranged, how a`,
-    '  variant is worn and how a control reaches an operation, and a file cannot be wrong in the way',
-    '  a remembered example can.',
-    '',
-  ]
-}
-
-export const catalogue = async (): Promise<readonly string[]> => listed(findTree(), 'composition')
-
-export const screening = async (): Promise<readonly string[]> => listed(findTree(), 'screen')
-
 const TAG = /<([A-Z][A-Za-z0-9]*)/g
 
 export function composed(

package/dist/ui/content.js

@@ -1,11 +1,8 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { formatValue, runValidator, validatorFor } from "./validators.js";
+import { formatValue, runValidator } from './validators.js';
 export function renderValue({ validator, value, context }, surface) {
-    const entry = validatorFor(validator);
     const result = runValidator(validator, value, context ?? {});
-    if (!result.ok) {
-        return (_jsx("span", { className: surface.className, ...surface.marks, "data-invalid": "true", children: surface.text(result.errorKey) }));
-    }
-    return (_jsx("span", { className: surface.className, ...surface.marks, "data-validator": entry.name, children: formatValue(validator, result.value, context ?? {}) }));
+    if (!result.ok)
+        return surface.text(result.errorKey);
+    return formatValue(validator, result.value, context ?? {});
 }

package/dist/ui/content.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useSyncExternalStore, type ReactNode } from 'react'
-import { formatValue, runValidator, validatorFor } from './validators.ts'
+import { formatValue, runValidator } from './validators.ts'
 import { ICON_TARGET, strokeFor } from './icons.ts'
 
 import { element, useSurface, useUi, useVisibility } from './wrappers.tsx'
@@ -19,21 +19,10 @@ export function renderValue(
   { validator, value, context }: ValueProps,
   surface: ReturnType<typeof useSurface>,
 ): ReactNode {
-  const entry = validatorFor(validator)
   const result = runValidator(validator, value, context ?? {})
 
-  if (!result.ok) {
-    return (
-      <span className={surface.className} {...surface.marks} data-invalid="true">
-        {surface.text(result.errorKey)}
-      </span>
-    )
-  }
-
-  return (
-    <span className={surface.className} {...surface.marks} data-validator={entry.name}>
-      {formatValue(validator, result.value, context ?? {})}
-    </span>
-  )
+  if (!result.ok) return surface.text(result.errorKey)
+
+  return formatValue(validator, result.value, context ?? {})
 }
 

package/dist/ui/controls.js

@@ -1,2 +1,2 @@
 'use client';
-export { Menu } from "./elements/menu.js";
+export { Menu } from './elements/menu.js';

package/dist/ui/door.d.ts

@@ -1,4 +1,4 @@
-export declare const PRESENTATIONS: readonly ["page", "sheet", "popover", "overlay", "toast"];
+export declare const PRESENTATIONS: readonly ['page', 'sheet', 'popover', 'overlay', 'toast'];
 export type Presentation = (typeof PRESENTATIONS)[number];
 export declare const PRESENTATION_BEHAVIOUR: Readonly<Record<Presentation, {
     readonly portal: boolean;

package/dist/ui/elements/accordion.d.ts

@@ -1,11 +1,12 @@
 import type { TabItem } from '../disclosure.tsx';
+import type { Dispatching } from '../checked.ts';
 import { type Element } from '../wrappers.tsx';
 export interface AccordionProps {
     readonly items: readonly TabItem[];
     readonly initial: readonly string[];
     readonly exclusive?: boolean;
     readonly onChange?: (said: readonly string[]) => void;
-    readonly dispatch?: string;
+    readonly dispatch?: keyof Dispatching;
     readonly input?: Readonly<Record<string, unknown>>;
     readonly invokeOn?: 'press' | 'shown';
 }

package/dist/ui/elements/accordion.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { roleClass } from "../fonts.js";
-import { element, useSurface } from "../wrappers.js";
-import { Each } from "../elements/each.js";
-import { shown, section, header, region, uses } from "./accordion.works.js";
+import { roleClass } from '../fonts.js';
+import { element, useSurface } from '../wrappers.js';
+import { Each } from '../elements/each.js';
+import { shown, section, header, region, uses } from './accordion.works.js';
 export const Accordion = element('Accordion', (props, className) => {
     const kept = uses(props);
     const surface = useSurface({ className: roleClass(undefined, className),

package/dist/ui/elements/accordion.tsx

@@ -4,6 +4,7 @@ import type { MessageKey } from '../content.tsx'
 import { roleClass } from '../fonts.ts'
 import type { TabItem } from '../disclosure.tsx'
 
+import type { Dispatching } from '../checked.ts'
 import { type Element, element, useSurface } from '../wrappers.tsx'
 import { Each } from '../elements/each.tsx'
 import { shown, section, header, region, uses } from './accordion.works.ts'
@@ -14,7 +15,7 @@ export interface AccordionProps {
   readonly initial: readonly string[]
   readonly exclusive?: boolean
   readonly onChange?: (said: readonly string[]) => void
-  readonly dispatch?: string
+  readonly dispatch?: keyof Dispatching
   readonly input?: Readonly<Record<string, unknown>>
   readonly invokeOn?: 'press' | 'shown'
 }

package/dist/ui/elements/aspect-ratio.d.ts

@@ -1,9 +1,10 @@
 import type { ReactNode } from 'react';
+import type { Dispatching } from '../checked.ts';
 import { type Element } from '../wrappers.tsx';
 export interface AspectRatioProps {
     readonly children: ReactNode;
     readonly ratio: number;
-    readonly dispatch?: string;
+    readonly dispatch?: keyof Dispatching;
     readonly input?: Readonly<Record<string, unknown>>;
     readonly invokeOn?: 'press' | 'shown';
 }

package/dist/ui/elements/aspect-ratio.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { element, useSurface } from "../wrappers.js";
+import { element, useSurface } from '../wrappers.js';
 export const AspectRatio = element('AspectRatio', (props, className) => {
     const surface = useSurface({ className,
         invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },

package/dist/ui/elements/aspect-ratio.tsx

@@ -2,13 +2,14 @@
 
 import type { ReactNode } from 'react'
 
+import type { Dispatching } from '../checked.ts'
 import { type Element, element, useSurface } from '../wrappers.tsx'
 
 
 export interface AspectRatioProps {
   readonly children: ReactNode
   readonly ratio: number
-  readonly dispatch?: string
+  readonly dispatch?: keyof Dispatching
   readonly input?: Readonly<Record<string, unknown>>
   readonly invokeOn?: 'press' | 'shown'
 }

package/dist/ui/elements/avatar.d.ts

@@ -1,10 +1,11 @@
 import type { MessageKey } from '../content.tsx';
+import type { Dispatching } from '../checked.ts';
 import { type Element } from '../wrappers.tsx';
 export interface AvatarProps {
     readonly labelKey: MessageKey;
     readonly src?: string;
     readonly initials?: string;
-    readonly dispatch?: string;
+    readonly dispatch?: keyof Dispatching;
     readonly input?: Readonly<Record<string, unknown>>;
     readonly invokeOn?: 'press' | 'shown';
 }

package/dist/ui/elements/avatar.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { roleClass } from "../fonts.js";
-import { element, useSurface } from "../wrappers.js";
-import { shown } from "./avatar.works.js";
+import { roleClass } from '../fonts.js';
+import { element, useSurface } from '../wrappers.js';
+import { shown } from './avatar.works.js';
 export const Avatar = element('Avatar', (props, className) => {
     const surface = useSurface({ className: roleClass(undefined, className),
         invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, });

package/dist/ui/elements/avatar.tsx

@@ -3,6 +3,7 @@
 import type { MessageKey } from '../content.tsx'
 import { roleClass } from '../fonts.ts'
 
+import type { Dispatching } from '../checked.ts'
 import { type Element, element, useSurface } from '../wrappers.tsx'
 import { shown } from './avatar.works.ts'
 
@@ -11,7 +12,7 @@ export interface AvatarProps {
   readonly labelKey: MessageKey
   readonly src?: string
   readonly initials?: string
-  readonly dispatch?: string
+  readonly dispatch?: keyof Dispatching
   readonly input?: Readonly<Record<string, unknown>>
   readonly invokeOn?: 'press' | 'shown'
 }

package/dist/ui/elements/badge.d.ts

@@ -1,10 +1,11 @@
 import type { MessageKey } from '../content.tsx';
+import type { Dispatching } from '../checked.ts';
 import { type Element } from '../wrappers.tsx';
 export interface BadgeProps {
     readonly labelKey: MessageKey;
     readonly count?: number;
     readonly max?: number;
-    readonly dispatch?: string;
+    readonly dispatch?: keyof Dispatching;
     readonly input?: Readonly<Record<string, unknown>>;
     readonly invokeOn?: 'press' | 'shown';
 }

package/dist/ui/elements/badge.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { roleClass } from "../fonts.js";
-import { element, useSurface } from "../wrappers.js";
-import { shows } from "./badge.works.js";
+import { roleClass } from '../fonts.js';
+import { element, useSurface } from '../wrappers.js';
+import { shows } from './badge.works.js';
 export const Badge = element('Badge', (props, className) => {
     const surface = useSurface({ className: roleClass(undefined, className),
         invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, });

package/dist/ui/elements/badge.tsx

@@ -3,6 +3,7 @@
 import type { MessageKey } from '../content.tsx'
 import { roleClass } from '../fonts.ts'
 
+import type { Dispatching } from '../checked.ts'
 import { type Element, element, useSurface } from '../wrappers.tsx'
 import { shows } from './badge.works.ts'
 
@@ -11,7 +12,7 @@ export interface BadgeProps {
   readonly labelKey: MessageKey
   readonly count?: number
   readonly max?: number
-  readonly dispatch?: string
+  readonly dispatch?: keyof Dispatching
   readonly input?: Readonly<Record<string, unknown>>
   readonly invokeOn?: 'press' | 'shown'
 }

package/dist/ui/elements/bars.d.ts

@@ -1,5 +1,6 @@
 import type { MessageKey } from '../content.tsx';
 import type { Row } from '../charts.tsx';
+import type { Dispatching } from '../checked.ts';
 import { type Element } from '../wrappers.tsx';
 export interface BarsProps {
     readonly rows: readonly Row[];
@@ -7,7 +8,7 @@ export interface BarsProps {
     readonly value: string;
     readonly format?: string;
     readonly titleKey?: MessageKey;
-    readonly dispatch?: string;
+    readonly dispatch?: keyof Dispatching;
     readonly input?: Readonly<Record<string, unknown>>;
     readonly invokeOn?: 'press' | 'shown';
 }

package/dist/ui/elements/bars.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { roleClass } from "../fonts.js";
-import { measured as marking } from "../charts.js";
-import { element, useSurface } from "../wrappers.js";
-import { Each } from "../elements/each.js";
-import { shown, sized, uses } from "./bars.works.js";
+import { roleClass } from '../fonts.js';
+import { measured as marking } from '../charts.js';
+import { element, useSurface } from '../wrappers.js';
+import { Each } from '../elements/each.js';
+import { shown, sized, uses } from './bars.works.js';
 export const Bars = element('Bars', (props, className) => {
     const kept = uses(props);
     const surface = useSurface({ className: roleClass(undefined, className),

package/dist/ui/elements/bars.tsx

@@ -5,6 +5,7 @@ import type { Row } from '../charts.tsx'
 import { roleClass } from '../fonts.ts'
 import { measured as marking } from '../charts.tsx'
 
+import type { Dispatching } from '../checked.ts'
 import { type Element, element, useSurface } from '../wrappers.tsx'
 import { Each } from '../elements/each.tsx'
 import { shown, sized, uses } from './bars.works.ts'
@@ -16,7 +17,7 @@ export interface BarsProps {
   readonly value: string
   readonly format?: string
   readonly titleKey?: MessageKey
-  readonly dispatch?: string
+  readonly dispatch?: keyof Dispatching
   readonly input?: Readonly<Record<string, unknown>>
   readonly invokeOn?: 'press' | 'shown'
 }

package/dist/ui/elements/bars.works.js

@@ -1,6 +1,6 @@
-import { formatValue } from "../validators.js";
-import { seriesColour } from "../series.js";
-import { num, str, useRamp } from "../charts.js";
+import { formatValue } from '../validators.js';
+import { seriesColour } from '../series.js';
+import { num, str, useRamp } from '../charts.js';
 export function uses(props) {
     const ramp = useRamp(props.rows.length);
     return { ...(props.rows.length === 0 ? { holds: ['empty'] } : {}), ramp };

package/dist/ui/elements/box.d.ts

@@ -1,11 +1,12 @@
 import type { ReactNode } from 'react';
 import type { MessageKey } from '../content.tsx';
+import type { Dispatching } from '../checked.ts';
 import { type Element } from '../wrappers.tsx';
 export interface BoxProps {
     readonly children: ReactNode;
     readonly labelKey?: MessageKey;
     readonly scrolling?: boolean;
-    readonly dispatch?: string;
+    readonly dispatch?: keyof Dispatching;
     readonly input?: Readonly<Record<string, unknown>>;
     readonly invokeOn?: 'press' | 'shown';
 }

package/dist/ui/elements/box.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { element, useSurface } from "../wrappers.js";
+import { element, useSurface } from '../wrappers.js';
 export const Box = element('Box', (props, className) => {
     const surface = useSurface({ className,
         invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },

package/dist/ui/elements/box.tsx

@@ -3,6 +3,7 @@
 import type { ReactNode } from 'react'
 import type { MessageKey } from '../content.tsx'
 
+import type { Dispatching } from '../checked.ts'
 import { type Element, element, useSurface } from '../wrappers.tsx'
 
 
@@ -10,7 +11,7 @@ export interface BoxProps {
   readonly children: ReactNode
   readonly labelKey?: MessageKey
   readonly scrolling?: boolean
-  readonly dispatch?: string
+  readonly dispatch?: keyof Dispatching
   readonly input?: Readonly<Record<string, unknown>>
   readonly invokeOn?: 'press' | 'shown'
 }

package/dist/ui/elements/breadcrumb.d.ts

@@ -1,9 +1,10 @@
 import type { MapIsland } from '../islands/map.ts';
+import type { Dispatching } from '../checked.ts';
 import { type Element } from '../wrappers.tsx';
 export interface BreadcrumbProps {
     readonly map: MapIsland;
     readonly current: string;
-    readonly dispatch?: string;
+    readonly dispatch?: keyof Dispatching;
     readonly input?: Readonly<Record<string, unknown>>;
     readonly invokeOn?: 'press' | 'shown';
 }

package/dist/ui/elements/breadcrumb.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { roleClass } from "../fonts.js";
-import { Link } from "./link.js";
-import { element, useSurface } from "../wrappers.js";
-import { Each } from "../elements/each.js";
-import { crumb, steps } from "./breadcrumb.works.js";
+import { roleClass } from '../fonts.js';
+import { Link } from './link.js';
+import { element, useSurface } from '../wrappers.js';
+import { Each } from '../elements/each.js';
+import { crumb, steps } from './breadcrumb.works.js';
 export const Breadcrumb = element('Breadcrumb', (props, className) => {
     const surface = useSurface({ className: roleClass(undefined, className),
         invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, });

package/dist/ui/elements/breadcrumb.tsx

@@ -4,6 +4,7 @@ import { roleClass } from '../fonts.ts'
 import type { MapIsland } from '../islands/map.ts'
 import { Link } from './link.tsx'
 
+import type { Dispatching } from '../checked.ts'
 import { type Element, element, useSurface } from '../wrappers.tsx'
 import { Each } from '../elements/each.tsx'
 import { crumb, steps } from './breadcrumb.works.ts'
@@ -12,7 +13,7 @@ import { crumb, steps } from './breadcrumb.works.ts'
 export interface BreadcrumbProps {
   readonly map: MapIsland
   readonly current: string
-  readonly dispatch?: string
+  readonly dispatch?: keyof Dispatching
   readonly input?: Readonly<Record<string, unknown>>
   readonly invokeOn?: 'press' | 'shown'
 }

package/dist/ui/elements/breadcrumb.works.js

@@ -1,4 +1,4 @@
-import { trailTo } from "../navigation.js";
+import { trailTo } from '../navigation.js';
 export function steps(props) {
     const known = new Map(props.map.screens.map((one) => [one.id, one]));
     if (!known.has(props.current))

package/dist/ui/elements/button.d.ts

@@ -1,4 +1,5 @@
 import type { MessageKey } from '../content.tsx';
+import type { Dispatching } from '../checked.ts';
 import { type Element } from '../wrappers.tsx';
 export interface ButtonProps {
     readonly label: MessageKey;
@@ -8,10 +9,10 @@ export interface ButtonProps {
     readonly type?: string;
     readonly disabled?: boolean;
     readonly loading?: boolean;
-    readonly dispatch?: string;
     readonly input?: Readonly<Record<string, unknown>>;
     readonly navigateTo?: string;
     readonly onPress?: () => void;
+    readonly dispatch?: keyof Dispatching;
     readonly invokeOn?: 'press' | 'shown';
 }
 export declare const Button: Element<'Button', ButtonProps>;