@texaryn/vue 0.0.0 → 0.1.0

package/dist/use-field-array.js

@@ -0,0 +1,43 @@
+import { computed, toValue } from 'vue';
+import { useFormRuntime } from './context.js';
+import { useStore } from './use-store.js';
+export function useFieldArray(nodeId) {
+    const runtime = useFormRuntime();
+    const document = useStore(runtime.document, runtime.document.getSnapshot());
+    const container = computed(() => {
+        const node = document.value.nodes[toValue(nodeId)];
+        return node?.type === 'container' && node.containerType === 'array'
+            ? node
+            : undefined;
+    });
+    const items = computed(() => {
+        const meta = container.value?.arrayMeta;
+        if (!meta)
+            return [];
+        return meta.itemIds.map((id, index) => ({
+            id,
+            nodeId: container.value?.children[index],
+        }));
+    });
+    return {
+        items,
+        canAdd: computed(() => container.value?.arrayMeta?.canAdd ?? false),
+        canRemove: computed(() => container.value?.arrayMeta?.canRemove ?? false),
+        canReorder: computed(() => container.value?.arrayMeta?.canReorder ?? false),
+        add: (value) => {
+            runtime.dispatch({
+                type: 'InsertItem',
+                containerId: toValue(nodeId),
+                index: items.value.length,
+                value,
+            });
+        },
+        remove: (index) => {
+            runtime.dispatch({ type: 'RemoveItem', containerId: toValue(nodeId), index });
+        },
+        move: (from, to) => {
+            runtime.dispatch({ type: 'MoveItem', containerId: toValue(nodeId), from, to });
+        },
+    };
+}
+//# sourceMappingURL=use-field-array.js.map

package/dist/use-field-array.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-field-array.js","sourceRoot":"","sources":["../src/use-field-array.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AAGvC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAoBzC,MAAM,UAAU,aAAa,CAAC,MAAgC;IAC5D,MAAM,OAAO,GAAG,cAAc,EAAE,CAAA;IAChC,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAA;IAE3E,MAAM,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC9B,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAA;QAClD,OAAO,IAAI,EAAE,IAAI,KAAK,WAAW,IAAI,IAAI,CAAC,aAAa,KAAK,OAAO;YACjE,CAAC,CAAE,IAAsB;YACzB,CAAC,CAAC,SAAS,CAAA;IACf,CAAC,CAAC,CAAA;IAEF,MAAM,KAAK,GAAG,QAAQ,CAAmB,GAAG,EAAE;QAC5C,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,SAAS,CAAA;QACvC,IAAI,CAAC,IAAI;YAAE,OAAO,EAAE,CAAA;QACpB,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;YACtC,EAAE;YACF,MAAM,EAAE,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC;SACzC,CAAC,CAAC,CAAA;IACL,CAAC,CAAC,CAAA;IAEF,OAAO;QACL,KAAK;QACL,MAAM,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,IAAI,KAAK,CAAC;QACnE,SAAS,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,IAAI,KAAK,CAAC;QACzE,UAAU,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,EAAE,SAAS,EAAE,UAAU,IAAI,KAAK,CAAC;QAC3E,GAAG,EAAE,CAAC,KAAe,EAAE,EAAE;YACvB,OAAO,CAAC,QAAQ,CAAC;gBACf,IAAI,EAAE,YAAY;gBAClB,WAAW,EAAE,OAAO,CAAC,MAAM,CAAC;gBAC5B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM;gBACzB,KAAK;aACN,CAAC,CAAA;QACJ,CAAC;QACD,MAAM,EAAE,CAAC,KAAa,EAAE,EAAE;YACxB,OAAO,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;QAC/E,CAAC;QACD,IAAI,EAAE,CAAC,IAAY,EAAE,EAAU,EAAE,EAAE;YACjC,OAAO,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAA;QAChF,CAAC;KACF,CAAA;AACH,CAAC"}

package/dist/use-field-widget.d.ts

@@ -0,0 +1,33 @@
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
+import type { FieldNode, ValidationError } from '@texaryn/core';
+import type { FieldAria } from './field-props.js';
+export type FieldKind = 'enum' | 'boolean' | 'number' | 'string';
+export declare function fieldKind(node: FieldNode): FieldKind;
+export declare function displayValue(kind: FieldKind, value: unknown): string | number;
+export declare function coerce(kind: FieldKind, node: FieldNode, raw: string): unknown;
+export interface FieldWidget {
+    node: ComputedRef<FieldNode>;
+    kind: ComputedRef<FieldKind>;
+    value: Ref<unknown>;
+    display: ComputedRef<string | number>;
+    label: ComputedRef<string>;
+    description: ComputedRef<string | undefined>;
+    descriptionId: ComputedRef<string>;
+    errorId: ComputedRef<string>;
+    labelFor: ComputedRef<string>;
+    aria: ComputedRef<FieldAria>;
+    /** Visible errors only: empty until the display policy says to show them. */
+    errors: ComputedRef<readonly ValidationError[]>;
+    invalid: ComputedRef<boolean>;
+    setRaw(raw: string): void;
+    setValue(value: unknown): void;
+    onBlur(): void;
+}
+/**
+ * Everything a native widget needs, derived from a node that is allowed to
+ * change under it. The node arrives as a getter for the same reason the node
+ * id does in useField: an array move hands a widget a different node while
+ * keeping its component instance.
+ */
+export declare function useFieldWidget(nodeSource: MaybeRefOrGetter<FieldNode>): FieldWidget;
+//# sourceMappingURL=use-field-widget.d.ts.map

package/dist/use-field-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-field-widget.d.ts","sourceRoot":"","sources":["../src/use-field-widget.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAG/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAIjD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAGhE,wBAAgB,SAAS,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,CAKpD;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAI7E;AAED,wBAAgB,MAAM,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAO7E;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAC5B,IAAI,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAC5B,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACnB,OAAO,EAAE,WAAW,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;IACrC,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC1B,WAAW,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC5C,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAClC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC5B,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC7B,IAAI,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAC5B,6EAA6E;IAC7E,MAAM,EAAE,WAAW,CAAC,SAAS,eAAe,EAAE,CAAC,CAAA;IAC/C,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC7B,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAA;IAC9B,MAAM,IAAI,IAAI,CAAA;CACf;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,UAAU,EAAE,gBAAgB,CAAC,SAAS,CAAC,GAAG,WAAW,CA+BnF"}

package/dist/use-field-widget.js

@@ -0,0 +1,66 @@
+import { computed } from 'vue';
+import { toValue } from 'vue';
+import { useField } from './use-field.js';
+import { fieldAria, fieldLabel, makeId } from './field-props.js';
+const NO_ERRORS = Object.freeze([]);
+// Mirrors the default registry's ranking: enum outranks the primitive kind.
+export function fieldKind(node) {
+    if (node.enumValues != null && node.enumValues.length > 0)
+        return 'enum';
+    if (node.fieldType === 'boolean')
+        return 'boolean';
+    if (node.fieldType === 'number' || node.fieldType === 'integer')
+        return 'number';
+    return 'string';
+}
+export function displayValue(kind, value) {
+    if (kind === 'number' && typeof value === 'number')
+        return value;
+    if (kind === 'string' && typeof value === 'string')
+        return value;
+    return value == null ? '' : String(value);
+}
+export function coerce(kind, node, raw) {
+    if (kind === 'number')
+        return raw === '' ? undefined : Number(raw);
+    if (kind === 'enum') {
+        const option = (node.enumValues ?? []).find((o) => String(o.value) === raw);
+        return option ? option.value : raw;
+    }
+    return raw;
+}
+/**
+ * Everything a native widget needs, derived from a node that is allowed to
+ * change under it. The node arrives as a getter for the same reason the node
+ * id does in useField: an array move hands a widget a different node while
+ * keeping its component instance.
+ */
+export function useFieldWidget(nodeSource) {
+    const node = computed(() => toValue(nodeSource));
+    const field = useField(() => node.value.id);
+    const kind = computed(() => fieldKind(node.value));
+    const errors = computed(() => (field.showErrors.value ? field.errors.value : NO_ERRORS));
+    const invalid = computed(() => errors.value.length > 0);
+    return {
+        node,
+        kind,
+        value: field.value,
+        display: computed(() => displayValue(kind.value, field.value.value)),
+        label: computed(() => fieldLabel(node.value)),
+        description: computed(() => node.value.helpText ?? node.value.annotations.description),
+        descriptionId: computed(() => makeId(node.value.id, 'description')),
+        errorId: computed(() => makeId(node.value.id, 'error')),
+        labelFor: computed(() => makeId(node.value.id, 'input')),
+        aria: computed(() => fieldAria(node.value, {
+            disabled: field.disabled.value,
+            showErrors: field.showErrors.value,
+            errors: field.errors.value,
+        })),
+        errors,
+        invalid,
+        setRaw: (raw) => { field.onChange(coerce(kind.value, node.value, raw)); },
+        setValue: field.onChange,
+        onBlur: field.onBlur,
+    };
+}
+//# sourceMappingURL=use-field-widget.js.map

package/dist/use-field-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-field-widget.js","sourceRoot":"","sources":["../src/use-field-widget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAA;AAE9B,OAAO,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AAE7B,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAGhE,MAAM,SAAS,GAA+B,MAAM,CAAC,MAAM,CAAoB,EAAE,CAAC,CAAA;AAIlF,4EAA4E;AAC5E,MAAM,UAAU,SAAS,CAAC,IAAe;IACvC,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,MAAM,CAAA;IACxE,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS;QAAE,OAAO,SAAS,CAAA;IAClD,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS;QAAE,OAAO,QAAQ,CAAA;IAChF,OAAO,QAAQ,CAAA;AACjB,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,IAAe,EAAE,KAAc;IAC1D,IAAI,IAAI,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAA;IAChE,IAAI,IAAI,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAA;IAChE,OAAO,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;AAC3C,CAAC;AAED,MAAM,UAAU,MAAM,CAAC,IAAe,EAAE,IAAe,EAAE,GAAW;IAClE,IAAI,IAAI,KAAK,QAAQ;QAAE,OAAO,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;IAClE,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;QACpB,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAA;QAC3E,OAAO,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAA;IACpC,CAAC;IACD,OAAO,GAAG,CAAA;AACZ,CAAC;AAqBD;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAAC,UAAuC;IACpE,MAAM,IAAI,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAA;IAChD,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;IAC3C,MAAM,IAAI,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;IAElD,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;IACxF,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;IAEvD,OAAO;QACL,IAAI;QACJ,IAAI;QACJ,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,OAAO,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACpE,KAAK,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7C,WAAW,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC;QACtF,aAAa,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,aAAa,CAAC,CAAC;QACnE,OAAO,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;QACvD,QAAQ,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;QACxD,IAAI,EAAE,QAAQ,CAAC,GAAG,EAAE,CAClB,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE;YACpB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK;YAC9B,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK;YAClC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;SAC3B,CAAC,CACH;QACD,MAAM;QACN,OAAO;QACP,MAAM,EAAE,CAAC,GAAW,EAAE,EAAE,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAA,CAAC,CAAC;QAChF,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,MAAM,EAAE,KAAK,CAAC,MAAM;KACrB,CAAA;AACH,CAAC"}

package/dist/use-field.d.ts

@@ -0,0 +1,28 @@
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import type { NodeId, ValidationError } from '@texaryn/core';
+export interface UseFieldReturn {
+    value: Ref<unknown>;
+    errors: Ref<ValidationError[]>;
+    dirty: Ref<boolean>;
+    touched: Ref<boolean>;
+    visible: Ref<boolean>;
+    disabled: Ref<boolean>;
+    showErrors: Ref<boolean>;
+    onChange(value: unknown): void;
+    onBlur(): void;
+}
+/**
+ * The node id is accepted as a ref or getter, not a value, and that is load
+ * bearing rather than a convenience.
+ *
+ * Node ids are assigned by traversal order, so an array item's id follows its
+ * position. Item identity is carried separately, by `StableItemId`, and a
+ * widget keyed on that correctly survives a move with its component instance
+ * intact while the id underneath it changes. React re-reads the id on every
+ * render, so it follows along for free. A Vue composable that captured the id
+ * in `setup` would keep subscribing to the old position and, worse, keep
+ * dispatching to it: typing into a moved row would write to the row that took
+ * its place.
+ */
+export declare function useField(nodeId: MaybeRefOrGetter<NodeId>): UseFieldReturn;
+//# sourceMappingURL=use-field.d.ts.map

package/dist/use-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-field.d.ts","sourceRoot":"","sources":["../src/use-field.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAChD,OAAO,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAI5D,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACnB,MAAM,EAAE,GAAG,CAAC,eAAe,EAAE,CAAC,CAAA;IAC9B,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACnB,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACrB,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACrB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACtB,UAAU,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACxB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAA;IAC9B,MAAM,IAAI,IAAI,CAAA;CACf;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC,GAAG,cAAc,CA+BzE"}

package/dist/use-field.js

@@ -0,0 +1,47 @@
+import { computed, toValue } from 'vue';
+import { useFormRuntime } from './context.js';
+import { useStore } from './use-store.js';
+/**
+ * The node id is accepted as a ref or getter, not a value, and that is load
+ * bearing rather than a convenience.
+ *
+ * Node ids are assigned by traversal order, so an array item's id follows its
+ * position. Item identity is carried separately, by `StableItemId`, and a
+ * widget keyed on that correctly survives a move with its component instance
+ * intact while the id underneath it changes. React re-reads the id on every
+ * render, so it follows along for free. A Vue composable that captured the id
+ * in `setup` would keep subscribing to the old position and, worse, keep
+ * dispatching to it: typing into a moved row would write to the row that took
+ * its place.
+ */
+export function useField(nodeId) {
+    const runtime = useFormRuntime();
+    const document = useStore(runtime.document, runtime.document.getSnapshot());
+    // `getNodeState` is a map lookup, so nothing about it is reactive on its
+    // own. Reading the document ref here is what makes a recompile re-resolve
+    // the bundle: a node id that disappeared and came back is a different
+    // bundle, and without this the field would hold the discarded one.
+    const state = computed(() => {
+        void document.value;
+        return runtime.getNodeState(toValue(nodeId));
+    });
+    return {
+        value: useStore(() => state.value?.value, undefined),
+        errors: useStore(() => state.value?.errors, []),
+        dirty: useStore(() => state.value?.dirty, false),
+        touched: useStore(() => state.value?.touched, false),
+        visible: useStore(() => state.value?.visible, true),
+        disabled: useStore(() => state.value?.disabled, false),
+        showErrors: useStore(() => state.value?.showErrors, false),
+        // Read at call time, never captured. Subscriptions following the id is
+        // only half of it: a dispatch carrying a stale id writes to the wrong
+        // data pointer, and no amount of correct reading would show it.
+        onChange: (value) => {
+            runtime.dispatch({ type: 'SetValue', nodeId: toValue(nodeId), value });
+        },
+        onBlur: () => {
+            runtime.dispatch({ type: 'SetTouched', nodeId: toValue(nodeId) });
+        },
+    };
+}
+//# sourceMappingURL=use-field.js.map

package/dist/use-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-field.js","sourceRoot":"","sources":["../src/use-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AAGvC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAczC;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,QAAQ,CAAC,MAAgC;IACvD,MAAM,OAAO,GAAG,cAAc,EAAE,CAAA;IAChC,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAA;IAE3E,yEAAyE;IACzE,0EAA0E;IAC1E,sEAAsE;IACtE,mEAAmE;IACnE,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC1B,KAAK,QAAQ,CAAC,KAAK,CAAA;QACnB,OAAO,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAA;IAC9C,CAAC,CAAC,CAAA;IAEF,OAAO;QACL,KAAK,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,CAAC;QACpD,MAAM,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,EAAuB,CAAC;QACpE,KAAK,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;QAChD,OAAO,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC;QACpD,OAAO,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC;QACnD,QAAQ,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC;QACtD,UAAU,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC;QAC1D,uEAAuE;QACvE,sEAAsE;QACtE,gEAAgE;QAChE,QAAQ,EAAE,CAAC,KAAc,EAAE,EAAE;YAC3B,OAAO,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;QACxE,CAAC;QACD,MAAM,EAAE,GAAG,EAAE;YACX,OAAO,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;QACnE,CAAC;KACF,CAAA;AACH,CAAC"}

package/dist/use-form.d.ts

@@ -0,0 +1,26 @@
+import type { Ref } from 'vue';
+import type { Command, FormRuntime, FormRuntimeOptions, NodeId, NodeState, SchemaEvaluationPort, SubmissionState, UIDocument, VisibleError } from '@texaryn/core';
+export interface UseFormReturn {
+    runtime: FormRuntime;
+    document: Ref<UIDocument>;
+    data: Ref<unknown>;
+    submission: Ref<SubmissionState>;
+    visibleErrors: Ref<VisibleError[]>;
+    dispatch(command: Command): void;
+    getNodeState(nodeId: NodeId): NodeState | undefined;
+}
+/**
+ * Creates the runtime once and ties its lifetime to the calling scope.
+ *
+ * React needs a ref plus an effect to avoid recreating the runtime on every
+ * render. `setup` runs once, so the runtime is simply a local, and the whole
+ * question disappears rather than being solved differently. What replaces it
+ * is the requirement of a scope: the runtime's lifetime is the scope's.
+ *
+ * Providing is deliberately not folded in here. React's equivalent is a
+ * component in the template, `<FormProvider value={form.runtime}>`, and Vue's
+ * is a setup call, so `provideFormRuntime` stays the caller's explicit second
+ * step rather than a side effect of construction.
+ */
+export declare function useForm(port: SchemaEvaluationPort, options?: FormRuntimeOptions): UseFormReturn;
+//# sourceMappingURL=use-form.d.ts.map

package/dist/use-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-form.d.ts","sourceRoot":"","sources":["../src/use-form.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAE9B,OAAO,KAAK,EACV,OAAO,EACP,WAAW,EACX,kBAAkB,EAClB,MAAM,EACN,SAAS,EACT,oBAAoB,EACpB,eAAe,EACf,UAAU,EACV,YAAY,EACb,MAAM,eAAe,CAAA;AAGtB,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,WAAW,CAAA;IACpB,QAAQ,EAAE,GAAG,CAAC,UAAU,CAAC,CAAA;IACzB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAClB,UAAU,EAAE,GAAG,CAAC,eAAe,CAAC,CAAA;IAChC,aAAa,EAAE,GAAG,CAAC,YAAY,EAAE,CAAC,CAAA;IAClC,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAA;IAChC,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;CACpD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,oBAAoB,EAAE,OAAO,CAAC,EAAE,kBAAkB,GAAG,aAAa,CAsB/F"}

package/dist/use-form.js

@@ -0,0 +1,36 @@
+import { getCurrentScope, onScopeDispose } from 'vue';
+import { createFormRuntime } from '@texaryn/core';
+import { useStore } from './use-store.js';
+/**
+ * Creates the runtime once and ties its lifetime to the calling scope.
+ *
+ * React needs a ref plus an effect to avoid recreating the runtime on every
+ * render. `setup` runs once, so the runtime is simply a local, and the whole
+ * question disappears rather than being solved differently. What replaces it
+ * is the requirement of a scope: the runtime's lifetime is the scope's.
+ *
+ * Providing is deliberately not folded in here. React's equivalent is a
+ * component in the template, `<FormProvider value={form.runtime}>`, and Vue's
+ * is a setup call, so `provideFormRuntime` stays the caller's explicit second
+ * step rather than a side effect of construction.
+ */
+export function useForm(port, options) {
+    // Before the runtime exists, so a misuse cannot leak one. A FormRuntime
+    // holds validation timers and subscriptions and is only released by
+    // `destroy`, so an owner that will eventually call it is a requirement.
+    if (!getCurrentScope()) {
+        throw new Error('useForm must be called inside setup() or an active effectScope, which owns the runtime');
+    }
+    const runtime = createFormRuntime(port, options);
+    onScopeDispose(() => { runtime.destroy(); });
+    return {
+        runtime,
+        document: useStore(runtime.document, runtime.document.getSnapshot()),
+        data: useStore(runtime.data, undefined),
+        submission: useStore(runtime.submission, runtime.submission.getSnapshot()),
+        visibleErrors: useStore(runtime.visibleErrors, []),
+        dispatch: (command) => { runtime.dispatch(command); },
+        getNodeState: (nodeId) => runtime.getNodeState(nodeId),
+    };
+}
+//# sourceMappingURL=use-form.js.map

package/dist/use-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-form.js","sourceRoot":"","sources":["../src/use-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAErD,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAYjD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAYzC;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,OAAO,CAAC,IAA0B,EAAE,OAA4B;IAC9E,wEAAwE;IACxE,oEAAoE;IACpE,wEAAwE;IACxE,IAAI,CAAC,eAAe,EAAE,EAAE,CAAC;QACvB,MAAM,IAAI,KAAK,CACb,wFAAwF,CACzF,CAAA;IACH,CAAC;IAED,MAAM,OAAO,GAAG,iBAAiB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;IAChD,cAAc,CAAC,GAAG,EAAE,GAAG,OAAO,CAAC,OAAO,EAAE,CAAA,CAAC,CAAC,CAAC,CAAA;IAE3C,OAAO;QACL,OAAO;QACP,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;QACpE,IAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC;QACvC,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,UAAU,EAAE,OAAO,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;QAC1E,aAAa,EAAE,QAAQ,CAAC,OAAO,CAAC,aAAa,EAAE,EAAE,CAAC;QAClD,QAAQ,EAAE,CAAC,OAAgB,EAAE,EAAE,GAAG,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA,CAAC,CAAC;QAC7D,YAAY,EAAE,CAAC,MAAc,EAAE,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC;KAC/D,CAAA;AACH,CAAC"}

package/dist/use-store.d.ts

@@ -0,0 +1,19 @@
+import type { Ref } from 'vue';
+import type { Store } from '@texaryn/core';
+/**
+ * A Texaryn store, read as a Vue ref.
+ *
+ * This is where the two bindings genuinely diverge rather than differ in
+ * spelling. React's `useStore` re-runs on every render, so it re-reads the
+ * store expression each time and `useSyncExternalStore` swaps subscriptions
+ * for free. A Vue composable runs once in `setup`, so the subscription has to
+ * be managed: accepting a getter and watching it is what replaces the
+ * re-render.
+ *
+ * `shallowRef` rather than `ref`: snapshots are plain data owned by the
+ * runtime, and deep reactive conversion would both cost a proxy walk per
+ * update and hand callers a mutable view of state they do not own.
+ */
+export declare function useStore<T>(source: Store<T> | (() => Store<T> | undefined), fallback: T): Ref<T>;
+export declare function useStore<T>(source: Store<T> | (() => Store<T> | undefined)): Ref<T | undefined>;
+//# sourceMappingURL=use-store.d.ts.map

package/dist/use-store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-store.d.ts","sourceRoot":"","sources":["../src/use-store.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC9B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAE1C;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;AACjG,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,SAAS,CAAC,CAAA"}

package/dist/use-store.js

@@ -0,0 +1,29 @@
+import { getCurrentScope, onScopeDispose, shallowRef, watch } from 'vue';
+export function useStore(source, fallback) {
+    // Checked before anything is created, so a misuse cannot leak the thing it
+    // was about to subscribe to. This composable owns a subscription it never
+    // hands back, so an owner that will eventually stop it is a requirement
+    // rather than a convention: without a scope there is nobody to unsubscribe.
+    if (!getCurrentScope()) {
+        throw new Error('useStore must be called inside setup() or an active effectScope, which owns its subscription');
+    }
+    const getStore = typeof source === 'function' ? source : () => source;
+    // Presence of a store decides the fallback, never the snapshot's value. A
+    // field holding null or undefined is a real value, not an absent store.
+    const initial = getStore();
+    const state = shallowRef(initial ? initial.getSnapshot() : fallback);
+    const stop = watch(getStore, (store, _previous, onCleanup) => {
+        if (!store) {
+            state.value = fallback;
+            return;
+        }
+        // Between the previous read and this subscribe the store may already
+        // have moved, so seed from the snapshot rather than waiting for a
+        // notification that has been and gone.
+        state.value = store.getSnapshot();
+        onCleanup(store.subscribe(() => { state.value = store.getSnapshot(); }));
+    }, { immediate: true });
+    onScopeDispose(stop);
+    return state;
+}
+//# sourceMappingURL=use-store.js.map

package/dist/use-store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-store.js","sourceRoot":"","sources":["../src/use-store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,CAAA;AAoBxE,MAAM,UAAU,QAAQ,CACtB,MAA+C,EAC/C,QAAY;IAEZ,2EAA2E;IAC3E,0EAA0E;IAC1E,wEAAwE;IACxE,4EAA4E;IAC5E,IAAI,CAAC,eAAe,EAAE,EAAE,CAAC;QACvB,MAAM,IAAI,KAAK,CACb,8FAA8F,CAC/F,CAAA;IACH,CAAC;IAED,MAAM,QAAQ,GAAG,OAAO,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,CAAA;IACrE,0EAA0E;IAC1E,wEAAwE;IACxE,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAA;IAC1B,MAAM,KAAK,GAAG,UAAU,CAAgB,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;IAEnF,MAAM,IAAI,GAAG,KAAK,CAChB,QAAQ,EACR,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE;QAC9B,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,KAAK,CAAC,KAAK,GAAG,QAAQ,CAAA;YACtB,OAAM;QACR,CAAC;QACD,qEAAqE;QACrE,kEAAkE;QAClE,uCAAuC;QACvC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,WAAW,EAAE,CAAA;QACjC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,WAAW,EAAE,CAAA,CAAC,CAAC,CAAC,CAAC,CAAA;IACzE,CAAC,EACD,EAAE,SAAS,EAAE,IAAI,EAAE,CACpB,CAAA;IAED,cAAc,CAAC,IAAI,CAAC,CAAA;IAEpB,OAAO,KAAK,CAAA;AACd,CAAC"}

package/dist/widget.d.ts

@@ -0,0 +1,11 @@
+import type { Component } from 'vue';
+import type { UINode } from '@texaryn/core';
+/**
+ * A widget receives only the node it renders, matching React's contract,
+ * because `RendererRegistry<T>` fixes the widget prop shape. Everything else
+ * a container needs (the document, the registry) arrives through inject.
+ */
+export type WidgetComponent = Component<{
+    node: UINode;
+}>;
+//# sourceMappingURL=widget.d.ts.map

package/dist/widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget.d.ts","sourceRoot":"","sources":["../src/widget.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AACpC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,CAAC;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAAA"}

package/dist/widget.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=widget.js.map

package/dist/widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget.js","sourceRoot":"","sources":["../src/widget.ts"],"names":[],"mappings":""}

package/dist/widgets/FieldErrors.d.ts

@@ -0,0 +1,24 @@
+import type { PropType } from 'vue';
+import type { ValidationError } from '@texaryn/core';
+export declare const FieldErrors: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    errors: {
+        type: PropType<readonly ValidationError[]>;
+        required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    errors: {
+        type: PropType<readonly ValidationError[]>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=FieldErrors.d.ts.map

package/dist/widgets/FieldErrors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldErrors.d.ts","sourceRoot":"","sources":["../../src/widgets/FieldErrors.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAA;AACnC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAEpD,eAAO,MAAM,WAAW;;;;;;cAIK,QAAQ,CAAC,SAAS,eAAe,EAAE,CAAC;;;;;;;;;;;cAApC,QAAQ,CAAC,SAAS,eAAe,EAAE,CAAC;;;iGAe/D,CAAA"}

package/dist/widgets/FieldErrors.js

@@ -0,0 +1,16 @@
+import { defineComponent, h } from 'vue';
+export const FieldErrors = defineComponent({
+    name: 'FieldErrors',
+    props: {
+        id: { type: String, required: true },
+        errors: { type: Array, required: true },
+    },
+    setup(props) {
+        return () => {
+            if (props.errors.length === 0)
+                return null;
+            return h('div', { id: props.id, role: 'alert' }, props.errors.map((error, index) => h('div', { key: `${error.instancePointer}:${error.keyword}:${index}` }, error.message ?? error.keyword)));
+        };
+    },
+});
+//# sourceMappingURL=FieldErrors.js.map

package/dist/widgets/FieldErrors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldErrors.js","sourceRoot":"","sources":["../../src/widgets/FieldErrors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAA;AAIxC,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAC;IACzC,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE;QACL,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;QACpC,MAAM,EAAE,EAAE,IAAI,EAAE,KAA6C,EAAE,QAAQ,EAAE,IAAI,EAAE;KAChF;IACD,KAAK,CAAC,KAAK;QACT,OAAO,GAAG,EAAE;YACV,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC;gBAAE,OAAO,IAAI,CAAA;YAC1C,OAAO,CAAC,CACN,KAAK,EACL,EAAE,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAC/B,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAChC,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,eAAe,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,EAAE,EAAE,EACpE,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,CAClC,CACF,CAAA;QACH,CAAC,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}

package/dist/widgets/containers.d.ts

@@ -0,0 +1,29 @@
+import type { PropType } from 'vue';
+import type { UINode } from '@texaryn/core';
+export declare const ObjectLayout: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly node: {
+        readonly type: PropType<UINode>;
+        readonly required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly node: {
+        readonly type: PropType<UINode>;
+        readonly required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const ArrayControl: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly node: {
+        readonly type: PropType<UINode>;
+        readonly required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly node: {
+        readonly type: PropType<UINode>;
+        readonly required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=containers.d.ts.map

package/dist/widgets/containers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"containers.d.ts","sourceRoot":"","sources":["../../src/widgets/containers.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAA;AACnC,OAAO,KAAK,EAAiB,MAAM,EAAE,MAAM,eAAe,CAAA;AAQ1D,eAAO,MAAM,YAAY;;uBAFkB,QAAQ,CAAC,MAAM,CAAC;;;;;;;uBAAhB,QAAQ,CAAC,MAAM,CAAC;;;iGAoBzD,CAAA;AAEF,eAAO,MAAM,YAAY;;uBAtBkB,QAAQ,CAAC,MAAM,CAAC;;;;;;;uBAAhB,QAAQ,CAAC,MAAM,CAAC;;;iGAyDzD,CAAA"}

package/dist/widgets/containers.js

@@ -0,0 +1,50 @@
+import { computed, defineComponent, h } from 'vue';
+import { useFormRuntime } from '../context.js';
+import { useStore } from '../use-store.js';
+import { useFieldArray } from '../use-field-array.js';
+import { NodeRenderer } from '../components/NodeRenderer.js';
+const nodeProp = { node: { type: Object, required: true } };
+export const ObjectLayout = defineComponent({
+    name: 'ObjectLayout',
+    props: nodeProp,
+    setup(props) {
+        const runtime = useFormRuntime();
+        const document = useStore(runtime.document, runtime.document.getSnapshot());
+        const children = computed(() => props.node.children
+            .map((id) => document.value.nodes[id])
+            .filter((child) => child != null));
+        return () => h('div', children.value.map((child) => h(NodeRenderer, { key: child.id, node: child })));
+    },
+});
+export const ArrayControl = defineComponent({
+    name: 'ArrayControl',
+    props: nodeProp,
+    setup(props) {
+        const runtime = useFormRuntime();
+        const document = useStore(runtime.document, runtime.document.getSnapshot());
+        const array = useFieldArray(() => props.node.id);
+        return () => h('div', [
+            ...array.items.value.map((item, index) => {
+                const child = item.nodeId ? document.value.nodes[item.nodeId] : undefined;
+                return h('div', 
+                // Keyed by the stable item id, never the positional node id. That
+                // is what makes a move preserve the row's component instance and
+                // its DOM, and it is also what hands the surviving instance a
+                // different node than the one it mounted with.
+                { key: item.id }, [
+                    child ? h(NodeRenderer, { node: child }) : null,
+                    array.canRemove.value
+                        ? h('button', { type: 'button', onClick: () => array.remove(index) }, 'Remove')
+                        : null,
+                    array.canReorder.value && index > 0
+                        ? h('button', { type: 'button', onClick: () => array.move(index, index - 1) }, 'Up')
+                        : null,
+                ]);
+            }),
+            array.canAdd.value
+                ? h('button', { type: 'button', onClick: () => array.add() }, 'Add')
+                : null,
+        ]);
+    },
+});
+//# sourceMappingURL=containers.js.map

package/dist/widgets/containers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"containers.js","sourceRoot":"","sources":["../../src/widgets/containers.ts"],"names":[],"mappings":"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"}

package/dist/widgets/default-registry.d.ts

@@ -0,0 +1,9 @@
+import type { RendererRegistry } from '@texaryn/core';
+import type { WidgetComponent } from '../widget.js';
+/**
+ * The same tests and ranks as the React default registry, on purpose. If the
+ * two ever disagree about which widget a node resolves to, the difference is
+ * a renderer's opinion leaking into what the document means.
+ */
+export declare function createDefaultRegistry(): RendererRegistry<WidgetComponent>;
+//# sourceMappingURL=default-registry.d.ts.map

package/dist/widgets/default-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-registry.d.ts","sourceRoot":"","sources":["../../src/widgets/default-registry.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAa,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAInD;;;;GAIG;AACH,wBAAgB,qBAAqB,IAAI,gBAAgB,CAAC,eAAe,CAAC,CAoEzE"}

package/dist/widgets/default-registry.js

@@ -0,0 +1,46 @@
+import { createRendererRegistry } from '@texaryn/core';
+import { Checkbox, NumberInput, Select, Textarea, TextInput } from './inputs.js';
+import { ArrayControl, ObjectLayout } from './containers.js';
+/**
+ * The same tests and ranks as the React default registry, on purpose. If the
+ * two ever disagree about which widget a node resolves to, the difference is
+ * a renderer's opinion leaking into what the document means.
+ */
+export function createDefaultRegistry() {
+    const registry = createRendererRegistry();
+    registry.register({
+        test: (node) => node.type === 'field' &&
+            node.fieldType === 'string' &&
+            node.enumValues == null,
+        rank: 1,
+    }, TextInput);
+    registry.register({
+        test: (node) => node.type === 'field' &&
+            (node.fieldType === 'number' || node.fieldType === 'integer'),
+        rank: 1,
+    }, NumberInput);
+    registry.register({
+        test: (node) => node.type === 'field' && node.fieldType === 'boolean',
+        rank: 1,
+    }, Checkbox);
+    registry.register({
+        test: (node) => node.type === 'field' &&
+            node.enumValues != null &&
+            node.enumValues.length > 0,
+        rank: 2,
+    }, Select);
+    registry.register({
+        test: (node) => node.type === 'field' && node.widget === 'textarea',
+        rank: 5,
+    }, Textarea);
+    registry.register({
+        test: (node) => node.type === 'container' && node.containerType === 'object',
+        rank: 1,
+    }, ObjectLayout);
+    registry.register({
+        test: (node) => node.type === 'container' && node.containerType === 'array',
+        rank: 1,
+    }, ArrayControl);
+    return registry;
+}
+//# sourceMappingURL=default-registry.js.map

package/dist/widgets/default-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-registry.js","sourceRoot":"","sources":["../../src/widgets/default-registry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AAGtD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAChF,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE5D;;;;GAIG;AACH,MAAM,UAAU,qBAAqB;IACnC,MAAM,QAAQ,GAAG,sBAAsB,EAAmB,CAAA;IAE1D,QAAQ,CAAC,QAAQ,CACf;QACE,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CACb,IAAI,CAAC,IAAI,KAAK,OAAO;YACpB,IAAkB,CAAC,SAAS,KAAK,QAAQ;YACzC,IAAkB,CAAC,UAAU,IAAI,IAAI;QACxC,IAAI,EAAE,CAAC;KACR,EACD,SAAS,CACV,CAAA;IAED,QAAQ,CAAC,QAAQ,CACf;QACE,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CACb,IAAI,CAAC,IAAI,KAAK,OAAO;YACrB,CAAE,IAAkB,CAAC,SAAS,KAAK,QAAQ,IAAK,IAAkB,CAAC,SAAS,KAAK,SAAS,CAAC;QAC7F,IAAI,EAAE,CAAC;KACR,EACD,WAAW,CACZ,CAAA;IAED,QAAQ,CAAC,QAAQ,CACf;QACE,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,OAAO,IAAK,IAAkB,CAAC,SAAS,KAAK,SAAS;QACpF,IAAI,EAAE,CAAC;KACR,EACD,QAAQ,CACT,CAAA;IAED,QAAQ,CAAC,QAAQ,CACf;QACE,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CACb,IAAI,CAAC,IAAI,KAAK,OAAO;YACpB,IAAkB,CAAC,UAAU,IAAI,IAAI;YACrC,IAAkB,CAAC,UAAW,CAAC,MAAM,GAAG,CAAC;QAC5C,IAAI,EAAE,CAAC;KACR,EACD,MAAM,CACP,CAAA;IAED,QAAQ,CAAC,QAAQ,CACf;QACE,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,OAAO,IAAK,IAAkB,CAAC,MAAM,KAAK,UAAU;QAClF,IAAI,EAAE,CAAC;KACR,EACD,QAAQ,CACT,CAAA;IAED,QAAQ,CAAC,QAAQ,CACf;QACE,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,IAAI,CAAC,aAAa,KAAK,QAAQ;QAC5E,IAAI,EAAE,CAAC;KACR,EACD,YAAY,CACb,CAAA;IAED,QAAQ,CAAC,QAAQ,CACf;QACE,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,IAAI,CAAC,aAAa,KAAK,OAAO;QAC3E,IAAI,EAAE,CAAC;KACR,EACD,YAAY,CACb,CAAA;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC"}