@prestack/thread-ui 0.1.0 → 0.1.2

package/dist/ui/elements/stat.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 "./stat.works.js";
+import { roleClass } from '../fonts.js';
+import { element, useSurface } from '../wrappers.js';
+import { shown } from './stat.works.js';
 export const Stat = element('Stat', (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/stat.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 './stat.works.ts'
 
@@ -12,7 +13,7 @@ export interface StatProps {
   readonly value?: unknown
   readonly compare?: number
   readonly format?: string
-  readonly dispatch?: string
+  readonly dispatch?: keyof Dispatching
   readonly input?: Readonly<Record<string, unknown>>
   readonly invokeOn?: 'press' | 'shown'
 }

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

@@ -1,4 +1,4 @@
-import { formatValue } from "../validators.js";
+import { formatValue } from '../validators.js';
 export function shown(props, _surface) {
     const current = typeof props.value === 'number' ? props.value : Number(props.value ?? 0);
     const against = props.compare;

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

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

package/dist/ui/elements/surface.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { element, useSurface } from "../wrappers.js";
-import { uses } from "./surface.works.js";
+import { element, useSurface } from '../wrappers.js';
+import { uses } from './surface.works.js';
 export const Surface = element('Surface', (props, className) => {
     const kept = uses(props);
     const surface = useSurface({ className,

package/dist/ui/elements/surface.tsx

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

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

@@ -1,4 +1,4 @@
-import { useVisibility } from "../wrappers.js";
+import { useVisibility } from '../wrappers.js';
 export function uses(_props) {
     return { on: { ref: useVisibility(true) } };
 }

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

@@ -1,12 +1,13 @@
 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 TableProps {
     readonly rows: readonly Row[];
     readonly columns: readonly Row[];
     readonly by: 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/table.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, heading, uses } from "./table.works.js";
+import { roleClass } from '../fonts.js';
+import { element, useSurface } from '../wrappers.js';
+import { Each } from '../elements/each.js';
+import { shown, heading, uses } from './table.works.js';
 export const Table = element('Table', (props, className) => {
     const kept = uses(props);
     const surface = useSurface({ className: roleClass(undefined, className),

package/dist/ui/elements/table.tsx

@@ -4,6 +4,7 @@ import type { MessageKey } from '../content.tsx'
 import type { Row } from '../charts.tsx'
 import { roleClass } from '../fonts.ts'
 
+import type { Dispatching } from '../checked.ts'
 import { type Element, element, useSurface } from '../wrappers.tsx'
 import { Each } from '../elements/each.tsx'
 import { shown, heading, uses } from './table.works.ts'
@@ -14,7 +15,7 @@ export interface TableProps {
   readonly columns: readonly Row[]
   readonly by: 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/table.works.js

@@ -1,4 +1,4 @@
-import { formatValue } from "../validators.js";
+import { formatValue } from '../validators.js';
 export function uses(props) {
     return props.rows.length === 0 ? { holds: ['empty'] } : {};
 }

package/dist/ui/elements/tabs.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 TabsProps {
     readonly items: readonly TabItem[];
     readonly initial?: string;
     readonly onChange?: (said: string) => void;
     readonly orientation?: string;
-    readonly dispatch?: string;
+    readonly dispatch?: keyof Dispatching;
     readonly input?: Readonly<Record<string, unknown>>;
     readonly invokeOn?: 'press' | 'shown';
 }

package/dist/ui/elements/tabs.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, strip, tab, panel, opened, uses } from "./tabs.works.js";
+import { roleClass } from '../fonts.js';
+import { element, useSurface } from '../wrappers.js';
+import { Each } from '../elements/each.js';
+import { shown, strip, tab, panel, opened, uses } from './tabs.works.js';
 export const Tabs = element('Tabs', (props, className) => {
     const kept = uses(props);
     const surface = useSurface({ className: roleClass(undefined, className),

package/dist/ui/elements/tabs.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, strip, tab, panel, opened, uses } from './tabs.works.ts'
@@ -14,7 +15,7 @@ export interface TabsProps {
   readonly initial?: string
   readonly onChange?: (said: string) => void
   readonly orientation?: string
-  readonly dispatch?: string
+  readonly dispatch?: keyof Dispatching
   readonly input?: Readonly<Record<string, unknown>>
   readonly invokeOn?: 'press' | 'shown'
 }

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

@@ -1,5 +1,5 @@
 import { useId, useRef, useState } from 'react';
-import { ITEM_ATTR, useRovingFocus } from "../roving-focus.js";
+import { ITEM_ATTR, useRovingFocus } from '../roving-focus.js';
 export function uses(props) {
     const list = useRef(null);
     const base = useId();

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

@@ -1,12 +1,13 @@
 import type { MessageKey } from '../content.tsx';
 import { type FontRoleId } from '../fonts.ts';
+import type { Dispatching } from '../checked.ts';
 import { type Element } from '../wrappers.tsx';
 export interface TextProps {
     readonly k: MessageKey;
     readonly with?: Readonly<Record<string, unknown>>;
     readonly is?: FontRoleId;
     readonly announce?: 'alert' | 'status';
-    readonly dispatch?: string;
+    readonly dispatch?: keyof Dispatching;
     readonly input?: Readonly<Record<string, unknown>>;
     readonly invokeOn?: 'press' | 'shown';
 }

package/dist/ui/elements/text.js

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

package/dist/ui/elements/text.tsx

@@ -3,6 +3,7 @@
 import type { MessageKey } from '../content.tsx'
 import { roleClass, type FontRoleId } from '../fonts.ts'
 
+import type { Dispatching } from '../checked.ts'
 import { type Element, element, useSurface } from '../wrappers.tsx'
 
 
@@ -11,7 +12,7 @@ export interface TextProps {
   readonly with?: Readonly<Record<string, unknown>>
   readonly is?: FontRoleId
   readonly announce?: 'alert' | 'status'
-  readonly dispatch?: string
+  readonly dispatch?: keyof Dispatching
   readonly input?: Readonly<Record<string, unknown>>
   readonly invokeOn?: 'press' | 'shown'
 }

package/dist/ui/elements/textarea.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 TextareaProps {
     readonly labelKey: MessageKey;
@@ -7,7 +8,7 @@ export interface TextareaProps {
     readonly onValue?: (said: string) => void;
     readonly validator?: string;
     readonly rows?: number;
-    readonly dispatch?: string;
+    readonly dispatch?: keyof Dispatching;
     readonly input?: Readonly<Record<string, unknown>>;
     readonly invokeOn?: 'press' | 'shown';
 }

package/dist/ui/elements/textarea.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 { limited } from "../validators.js";
-import { does } from "./textarea.works.js";
+import { roleClass } from '../fonts.js';
+import { element, useSurface } from '../wrappers.js';
+import { limited } from '../validators.js';
+import { does } from './textarea.works.js';
 export const Textarea = element('Textarea', (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/textarea.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 { limited } from '../validators.ts'
 import { does } from './textarea.works.ts'
@@ -15,7 +16,7 @@ export interface TextareaProps {
   readonly onValue?: (said: string) => void
   readonly validator?: string
   readonly rows?: number
-  readonly dispatch?: string
+  readonly dispatch?: keyof Dispatching
   readonly input?: Readonly<Record<string, unknown>>
   readonly invokeOn?: 'press' | 'shown'
 }

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

@@ -1,10 +1,12 @@
 import { type FontRoleId } from '../fonts.ts';
+import type { Dispatching } from '../checked.ts';
 import { type Element } from '../wrappers.tsx';
 export interface TimeProps {
     readonly value?: unknown;
     readonly relative?: boolean;
     readonly is?: FontRoleId;
-    readonly dispatch?: string;
+    readonly invalid?: boolean;
+    readonly dispatch?: keyof Dispatching;
     readonly input?: Readonly<Record<string, unknown>>;
     readonly invokeOn?: 'press' | 'shown';
 }

package/dist/ui/elements/time.js

@@ -1,14 +1,17 @@
 'use client';
-import { roleClass } from "../fonts.js";
-import { element, useSurface } from "../wrappers.js";
-import { shows, uses } from "./time.works.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { roleClass } from '../fonts.js';
+import { element, useSurface } from '../wrappers.js';
+import { shows, uses } from './time.works.js';
 export const Time = element('Time', (props, className) => {
     const kept = uses(props);
     const surface = useSurface({ className: roleClass(props.is, className),
         invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
         holds: [
+            ...(props.invalid === true ? ['invalid'] : []),
             ...(kept.holds ?? []),
         ],
+        raises: ['invalid'],
         ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
-    return (shows(props, surface, kept));
+    return (_jsx("span", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), children: shows(props, surface, kept) }));
 }, 'e-time', {});

package/dist/ui/elements/time.tsx

@@ -1,7 +1,9 @@
 'use client'
 
+import type { MessageKey } from '../content.tsx'
 import { roleClass, type FontRoleId } from '../fonts.ts'
 
+import type { Dispatching } from '../checked.ts'
 import { type Element, element, useSurface } from '../wrappers.tsx'
 import { shows, uses } from './time.works.ts'
 
@@ -10,7 +12,8 @@ export interface TimeProps {
   readonly value?: unknown
   readonly relative?: boolean
   readonly is?: FontRoleId
-  readonly dispatch?: string
+  readonly invalid?: boolean
+  readonly dispatch?: keyof Dispatching
   readonly input?: Readonly<Record<string, unknown>>
   readonly invokeOn?: 'press' | 'shown'
 }
@@ -22,11 +25,15 @@ export const Time: Element<'Time', TimeProps> = element(
     const surface = useSurface({ className: roleClass(props.is, className),
     invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
     holds: [
+      ...(props.invalid === true ? ['invalid' as const] : []),
       ...(kept.holds ?? []),
     ],
+    raises: ['invalid' as const],
     ...(kept.animates === undefined ? {} : { animates: kept.animates }), })
     return (
-      shows(props, surface, kept)
+      <span className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})}>
+        {shows(props, surface, kept)}
+      </span>
     )
   },
   'e-time',

package/dist/ui/elements/time.works.d.ts

@@ -4,6 +4,7 @@ import type { TimeProps } from './time.tsx';
 export declare function uses(props: TimeProps): {
     readonly holds?: readonly string[];
     readonly animates?: boolean;
+    readonly on?: Readonly<Record<string, unknown>>;
     readonly at: number | undefined;
 };
 export declare function shows(props: TimeProps, surface: Surface, kept: {

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

@@ -1,12 +1,16 @@
 import { useCallback, useSyncExternalStore } from 'react';
-import { renderValue } from "../content.js";
-import { useUi } from "../wrappers.js";
+import { renderValue } from '../content.js';
+import { runValidator } from '../validators.js';
+import { useUi } from '../wrappers.js';
 const NO_CLOCK_YET = () => undefined;
 export function uses(props) {
     const { now, ticker } = useUi();
     const subscribe = useCallback((onChange) => (props.relative === true && ticker !== undefined ? ticker.subscribe(onChange) : () => undefined), [props.relative, ticker]);
     const read = useCallback(() => now?.(), [now]);
-    return { at: useSyncExternalStore(subscribe, read, NO_CLOCK_YET) };
+    const at = useSyncExternalStore(subscribe, read, NO_CLOCK_YET);
+    const { relative, value } = props;
+    const { ok } = runValidator(relative === true ? 'relativeTime' : 'datetime', value, relative === true ? { now: at } : {});
+    return ok ? { at } : { at, holds: ['invalid'] };
 }
 export function shows(props, surface, kept) {
     if (props.relative !== true || kept.at === undefined) {

package/dist/ui/elements/time.works.ts

@@ -1,20 +1,24 @@
 import { useCallback, useSyncExternalStore, type ReactNode } from 'react'
 
 import { renderValue } from '../content.tsx'
+import { runValidator } from '../validators.ts'
 import type { Surface } from '../door.ts'
 import { useUi } from '../wrappers.tsx'
 import type { TimeProps } from './time.tsx'
 
 const NO_CLOCK_YET = (): number | undefined => undefined
 
-export function uses(props: TimeProps): { readonly holds?: readonly string[]; readonly animates?: boolean; readonly at: number | undefined } {
+export function uses(props: TimeProps): { readonly holds?: readonly string[]; readonly animates?: boolean; readonly on?: Readonly<Record<string, unknown>>; readonly at: number | undefined } {
   const { now, ticker } = useUi()
   const subscribe = useCallback(
     (onChange: () => void) => (props.relative === true && ticker !== undefined ? ticker.subscribe(onChange) : () => undefined),
     [props.relative, ticker],
   )
   const read = useCallback(() => now?.(), [now])
-  return { at: useSyncExternalStore(subscribe, read, NO_CLOCK_YET) }
+  const at = useSyncExternalStore(subscribe, read, NO_CLOCK_YET)
+  const { relative, value } = props
+  const { ok } = runValidator(relative === true ? 'relativeTime' : 'datetime', value, relative === true ? { now: at } : {})
+  return ok ? { at } : { at, holds: ['invalid'] }
 }
 
 export function shows(props: TimeProps, surface: Surface, kept: { readonly at: number | undefined }): ReactNode {

package/dist/ui/elements/toggle.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 ToggleProps {
     readonly labelKey: MessageKey;
     readonly on?: boolean;
     readonly onToggle?: (said: boolean) => void;
-    readonly dispatch?: string;
+    readonly dispatch?: keyof Dispatching;
     readonly input?: Readonly<Record<string, unknown>>;
     readonly invokeOn?: 'press' | 'shown';
 }

package/dist/ui/elements/toggle.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 { does } from "./toggle.works.js";
+import { roleClass } from '../fonts.js';
+import { element, useSurface } from '../wrappers.js';
+import { does } from './toggle.works.js';
 export const Toggle = element('Toggle', (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/toggle.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 { does } from './toggle.works.ts'
 
@@ -11,7 +12,7 @@ export interface ToggleProps {
   readonly labelKey: MessageKey
   readonly on?: boolean
   readonly onToggle?: (said: boolean) => void
-  readonly dispatch?: string
+  readonly dispatch?: keyof Dispatching
   readonly input?: Readonly<Record<string, unknown>>
   readonly invokeOn?: 'press' | 'shown'
 }

package/dist/ui/elements/tooltip.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 TooltipProps {
     readonly children: ReactNode;
     readonly labelKey: MessageKey;
     readonly side?: string;
-    readonly dispatch?: string;
+    readonly dispatch?: keyof Dispatching;
     readonly input?: Readonly<Record<string, unknown>>;
     readonly invokeOn?: 'press' | 'shown';
 }

package/dist/ui/elements/tooltip.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { element, useSurface } from "../wrappers.js";
-import { measured, bubble, showing, uses } from "./tooltip.works.js";
+import { element, useSurface } from '../wrappers.js';
+import { measured, bubble, showing, uses } from './tooltip.works.js';
 export const Tooltip = element('Tooltip', (props, className) => {
     const kept = uses(props);
     const surface = useSurface({ className,

package/dist/ui/elements/tooltip.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'
 import { measured, bubble, showing, uses } from './tooltip.works.ts'
 
@@ -11,7 +12,7 @@ export interface TooltipProps {
   readonly children: ReactNode
   readonly labelKey: MessageKey
   readonly side?: string
-  readonly dispatch?: string
+  readonly dispatch?: keyof Dispatching
   readonly input?: Readonly<Record<string, unknown>>
   readonly invokeOn?: 'press' | 'shown'
 }

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

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
-import { useDismissLayer } from "../dismiss-layer.js";
-import { positionOf } from "../positioning.js";
+import { useDismissLayer } from '../dismiss-layer.js';
+import { positionOf } from '../positioning.js';
 export function uses(props) {
     const trigger = useRef(null);
     const layer = useRef(null);

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

@@ -1,11 +1,13 @@
 import { type FontRoleId } from '../fonts.ts';
+import type { Dispatching } from '../checked.ts';
 import { type Element } from '../wrappers.tsx';
 export interface ValueProps {
     readonly validator: string;
     readonly value?: unknown;
     readonly context?: Readonly<Record<string, unknown>>;
     readonly is?: FontRoleId;
-    readonly dispatch?: string;
+    readonly invalid?: boolean;
+    readonly dispatch?: keyof Dispatching;
     readonly input?: Readonly<Record<string, unknown>>;
     readonly invokeOn?: 'press' | 'shown';
 }

package/dist/ui/elements/value.js

@@ -1,9 +1,14 @@
 'use client';
-import { roleClass } from "../fonts.js";
-import { element, useSurface } from "../wrappers.js";
-import { shows } from "./value.works.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { roleClass } from '../fonts.js';
+import { element, useSurface } from '../wrappers.js';
+import { shows } from './value.works.js';
 export const Value = element('Value', (props, className) => {
     const surface = useSurface({ className: roleClass(props.is, className),
-        invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, });
-    return (shows(props, surface));
+        invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
+        holds: [
+            ...(props.invalid === true ? ['invalid'] : []),
+        ],
+        raises: ['invalid'], });
+    return (_jsx("span", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, children: shows(props, surface) }));
 }, 'e-value', {});

package/dist/ui/elements/value.tsx

@@ -1,7 +1,9 @@
 'use client'
 
+import type { MessageKey } from '../content.tsx'
 import { roleClass, type FontRoleId } from '../fonts.ts'
 
+import type { Dispatching } from '../checked.ts'
 import { type Element, element, useSurface } from '../wrappers.tsx'
 import { shows } from './value.works.ts'
 
@@ -11,7 +13,8 @@ export interface ValueProps {
   readonly value?: unknown
   readonly context?: Readonly<Record<string, unknown>>
   readonly is?: FontRoleId
-  readonly dispatch?: string
+  readonly invalid?: boolean
+  readonly dispatch?: keyof Dispatching
   readonly input?: Readonly<Record<string, unknown>>
   readonly invokeOn?: 'press' | 'shown'
 }
@@ -20,9 +23,15 @@ export const Value: Element<'Value', ValueProps> = element(
   'Value',
   (props: ValueProps, className) => {
     const surface = useSurface({ className: roleClass(props.is, className),
-    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, })
+    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
+    holds: [
+      ...(props.invalid === true ? ['invalid' as const] : []),
+    ],
+    raises: ['invalid' as const], })
     return (
-      shows(props, surface)
+      <span className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y}>
+        {shows(props, surface)}
+      </span>
     )
   },
   'e-value',

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

@@ -1,4 +1,4 @@
-import { renderValue } from "../content.js";
+import { renderValue } from '../content.js';
 export function shows(props, surface) {
     return renderValue({ validator: props.validator, value: props.value, ...(props.context === undefined ? {} : { context: props.context }) }, surface);
 }