@texaryn/svelte 0.0.0-stage → 0.2.0

package/dist/components/DocumentRoot.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { DocumentNode, DocumentRuntime } from '@texaryn/core'
+  import type { RendererRegistry } from '@texaryn/core'
+  import type { DocumentWidgetComponent } from '../widget.js'
+  import DocumentNodeView from './DocumentNode.svelte'
+
+  interface Props {
+    runtime: DocumentRuntime
+    registry?: RendererRegistry<DocumentWidgetComponent, DocumentNode>
+    onActionError?: (error: unknown) => void
+    children?: import('svelte').Snippet
+  }
+
+  let { runtime, registry, onActionError, children }: Props = $props()
+  let document = $state<import('@texaryn/core').UIDocumentV2 | undefined>()
+  $effect(() => {
+    const store = runtime.document
+    document = store.getSnapshot()
+    return store.subscribe(() => { document = store.getSnapshot() })
+  })
+</script>
+
+{#if document?.nodes[document.rootId]}
+  <DocumentNodeView
+    nodeId={document.rootId}
+    {runtime}
+    {document}
+    {registry}
+    {onActionError}
+  />
+{/if}
+
+{@render children?.()}

package/dist/components/DocumentRoot.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { DocumentNode, DocumentRuntime } from '@texaryn/core';
+import type { RendererRegistry } from '@texaryn/core';
+import type { DocumentWidgetComponent } from '../widget.js';
+interface Props {
+    runtime: DocumentRuntime;
+    registry?: RendererRegistry<DocumentWidgetComponent, DocumentNode>;
+    onActionError?: (error: unknown) => void;
+    children?: import('svelte').Snippet;
+}
+declare const DocumentRoot: import("svelte").Component<Props, {}, "">;
+type DocumentRoot = ReturnType<typeof DocumentRoot>;
+export default DocumentRoot;
+//# sourceMappingURL=DocumentRoot.svelte.d.ts.map

package/dist/components/DocumentRoot.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentRoot.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/DocumentRoot.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAClE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAA;AAIzD,UAAU,KAAK;IACb,OAAO,EAAE,eAAe,CAAA;IACxB,QAAQ,CAAC,EAAE,gBAAgB,CAAC,uBAAuB,EAAE,YAAY,CAAC,CAAA;IAClE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAA;CACpC;AAyBH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/DocumentTable.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { DocumentCollectionRow, DocumentRuntime, TableNode } from '@texaryn/core'
+
+  let { node, runtime }: { node: TableNode; runtime: DocumentRuntime } = $props()
+  let rows = $state<readonly DocumentCollectionRow[]>([])
+
+  $effect(() => {
+    const store = runtime.getCollection(node.id)
+    if (!store) {
+      rows = []
+      return
+    }
+    rows = store.getSnapshot()
+    return store.subscribe(() => { rows = store.getSnapshot() })
+  })
+</script>
+
+<table>
+  <thead>
+    <tr>
+      {#each node.columns as column (column.id)}
+        <th scope="col">{column.label}</th>
+      {/each}
+    </tr>
+  </thead>
+  <tbody>
+    {#each rows as row (row.id)}
+      <tr>
+        {#each node.columns as column, index (column.id)}
+          <td>{row.cells[index] === null ? '' : String(row.cells[index])}</td>
+        {/each}
+      </tr>
+    {/each}
+  </tbody>
+</table>

package/dist/components/DocumentTable.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { DocumentRuntime, TableNode } from '@texaryn/core';
+type $$ComponentProps = {
+    node: TableNode;
+    runtime: DocumentRuntime;
+};
+declare const DocumentTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocumentTable = ReturnType<typeof DocumentTable>;
+export default DocumentTable;
+//# sourceMappingURL=DocumentTable.svelte.d.ts.map

package/dist/components/DocumentTable.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentTable.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/DocumentTable.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAyB,eAAe,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAEtF,KAAK,gBAAgB,GAAI;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,OAAO,EAAE,eAAe,CAAA;CAAE,CAAC;AAuCxE,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/ErrorSummary.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { tick } from 'svelte'
+  import { createFailedSubmitTracker, visibleErrorLabel, visibleErrorMessages } from '@texaryn/core'
+  import type { VisibleError } from '@texaryn/core'
+  import { useFormContext } from '../context.js'
+  import { makeId } from '../field-props.js'
+
+  export let focus = true
+
+  const context = useFormContext()
+  const visibleErrors = context.form.visibleErrors
+  const submission = context.form.submission
+  const messages = context.messages
+  const tracker = createFailedSubmitTracker(context.form.runtime.submission.getSnapshot())
+  const headingId = makeId(context.idPrefix, 'error-summary', 'heading')
+  let container: HTMLDivElement | undefined
+
+  $: if (tracker.settle($submission, $visibleErrors)) {
+    void tick().then(() => {
+      if (focus && container?.isConnected) container.focus()
+    })
+  }
+
+  function details(entry: VisibleError): string {
+    return $messages.errorSummaryDetail({ messages: visibleErrorMessages(entry) })
+  }
+</script>
+
+{#if $visibleErrors.length > 0}
+  <div bind:this={container} role="group" tabindex="-1" aria-labelledby={headingId}>
+    <h2 id={headingId}>{$messages.errorSummaryHeading({ count: $visibleErrors.length })}</h2>
+    <ul>
+      {#each $visibleErrors as entry (entry.nodeId)}
+        <li>
+          <a href={`#${makeId(context.idPrefix, entry.nodeId, 'input')}`}>{visibleErrorLabel(entry)}</a>
+          {details(entry)}
+        </li>
+      {/each}
+    </ul>
+  </div>
+{/if}

package/dist/components/ErrorSummary.svelte.d.ts

@@ -0,0 +1,21 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ErrorSummary: $$__sveltets_2_IsomorphicComponent<{
+    focus?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ErrorSummary = InstanceType<typeof ErrorSummary>;
+export default ErrorSummary;
+//# sourceMappingURL=ErrorSummary.svelte.d.ts.map

package/dist/components/ErrorSummary.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorSummary.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ErrorSummary.svelte.ts"],"names":[],"mappings":"AAqDA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,YAAY;;;;kBAA+E,CAAC;AAChF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,eAAe,YAAY,CAAC"}

package/dist/components/FieldErrors.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { ValidationError } from '@texaryn/core'
+
+  export let id: string
+  export let errors: readonly ValidationError[] = []
+</script>
+
+<div {id} aria-live="polite" aria-atomic="true">
+  {#each errors as error, index (`${error.instancePointer}:${error.keyword}:${index}`)}
+    <div>{error.message ?? error.keyword}</div>
+  {/each}
+</div>

package/dist/components/FieldErrors.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { ValidationError } from '@texaryn/core';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FieldErrors: $$__sveltets_2_IsomorphicComponent<{
+    id: string;
+    errors?: readonly ValidationError[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FieldErrors = InstanceType<typeof FieldErrors>;
+export default FieldErrors;
+//# sourceMappingURL=FieldErrors.svelte.d.ts.map

package/dist/components/FieldErrors.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldErrors.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/FieldErrors.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAiBrD,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,WAAW;QAViC,MAAM;aAAW,SAAS,eAAe,EAAE;;;kBAUG,CAAC;AAC/E,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}

package/dist/components/FieldWidget.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import { writable } from 'svelte/store'
+  import type { FieldNode, UINode } from '@texaryn/core'
+  import { useFormContext } from '../context.js'
+  import { createFieldBinding, sameEnumValue } from '../field.js'
+  import FieldErrors from './FieldErrors.svelte'
+
+  export let node: UINode
+
+  const context = useFormContext()
+  const nodeId = writable(node.id)
+  $: nodeId.set(node.id)
+
+  const field = createFieldBinding(context.form, nodeId, context.idPrefix, context.messages)
+  const {
+    node: fieldNode,
+    value,
+    visibleErrors,
+    display,
+    label,
+    description,
+    labelFor,
+    descriptionId,
+    errorId,
+    aria,
+    messages,
+  } = field
+
+  $: enumOptions = ($fieldNode?.enumValues ?? []).map((entry, index) => ({
+    token: String(index),
+    value: entry.value,
+    title: entry.title ?? String(entry.value),
+  }))
+  $: selectedToken = enumOptions.find((option) => sameEnumValue(option.value, $value))?.token ?? ''
+
+  function handleInput(event: Event): void {
+    field.setRaw((event.currentTarget as HTMLInputElement | HTMLTextAreaElement).value)
+  }
+
+  function handleSelect(event: Event): void {
+    const select = event.currentTarget as HTMLSelectElement
+    if ($fieldNode?.readOnly) {
+      select.value = selectedToken
+      return
+    }
+    field.setRaw(select.value, select.value)
+  }
+
+  function handleCheckbox(event: Event): void {
+    const checkbox = event.currentTarget as HTMLInputElement
+    if ($fieldNode?.readOnly) {
+      checkbox.checked = Boolean($value)
+      return
+    }
+    field.setValue(checkbox.checked)
+  }
+
+  function handleBlur(): void {
+    field.onBlur()
+  }
+</script>
+
+{#if $fieldNode && $aria}
+  <div>
+    <label for={$labelFor}>
+      {#if $aria['aria-required'] && $messages.requiredIndicator().placement === 'before'}
+        {@const indicator = $messages.requiredIndicator()}
+        <span aria-hidden="true">{indicator.text} </span>
+      {/if}
+      {$label}
+      {#if $aria['aria-required'] && $messages.requiredIndicator().placement === 'after'}
+        {@const indicator = $messages.requiredIndicator()}
+        <span aria-hidden="true"> {indicator.text}</span>
+      {/if}
+    </label>
+
+    {#if $fieldNode.enumValues != null && $fieldNode.enumValues.length > 0}
+      <select {...$aria} value={selectedToken} on:change={handleSelect} on:blur={handleBlur}>
+        <option value=""></option>
+        {#each enumOptions as option (option.token)}
+          <option value={option.token}>{option.title}</option>
+        {/each}
+      </select>
+    {:else if $fieldNode.fieldType === 'boolean'}
+      <input
+        {...$aria}
+        type="checkbox"
+        checked={Boolean($value)}
+        on:change={handleCheckbox}
+        on:blur={handleBlur}
+      />
+    {:else if $fieldNode.widget === 'textarea'}
+      <textarea {...$aria} value={$display} on:input={handleInput} on:blur={handleBlur}></textarea>
+    {:else}
+      <input
+        {...$aria}
+        type={$fieldNode.fieldType === 'number' || $fieldNode.fieldType === 'integer' ? 'number' : 'text'}
+        value={$display}
+        on:input={handleInput}
+        on:blur={handleBlur}
+      />
+    {/if}
+
+    {#if $description}
+      <div id={$descriptionId}>{$description}</div>
+    {/if}
+    <FieldErrors id={$errorId} errors={$visibleErrors} />
+  </div>
+{/if}

package/dist/components/FieldWidget.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { UINode } from '@texaryn/core';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FieldWidget: $$__sveltets_2_IsomorphicComponent<{
+    node: UINode;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FieldWidget = InstanceType<typeof FieldWidget>;
+export default FieldWidget;
+//# sourceMappingURL=FieldWidget.svelte.d.ts.map

package/dist/components/FieldWidget.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldWidget.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/FieldWidget.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAa,MAAM,EAAE,MAAM,eAAe,CAAA;AAyGtD,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,WAAW;UAVsB,MAAM;;;kBAUmD,CAAC;AAC/E,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}

package/dist/components/FormRoot.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte'
+  import type { Snippet } from 'svelte'
+  import { englishMessages } from '@texaryn/core'
+  import type { FormMessages, RendererRegistry, UINode } from '@texaryn/core'
+  import { derived, get, writable } from 'svelte/store'
+  import type { SvelteFormBinding } from '../form.js'
+  import type { WidgetComponent } from '../widget.js'
+  import { provideFormContext } from '../context.js'
+  import { createDefaultRegistry } from '../registry.js'
+  import ErrorSummary from './ErrorSummary.svelte'
+  import NodeRenderer from './NodeRenderer.svelte'
+
+  interface Props {
+    form: SvelteFormBinding
+    registry?: RendererRegistry<WidgetComponent>
+    messages?: FormMessages
+    idPrefix?: string
+    destroyOnUnmount?: boolean
+    children?: Snippet
+  }
+
+  let {
+    form,
+    registry = createDefaultRegistry(),
+    messages = englishMessages,
+    idPrefix,
+    destroyOnUnmount = true,
+    children,
+  }: Props = $props()
+
+  function capture<T>(read: () => T): T {
+    return read()
+  }
+
+  const formStore = writable(capture(() => form))
+  const currentForm: SvelteFormBinding = {
+    get runtime() {
+      return get(formStore).runtime
+    },
+    document: derived(formStore, ($form, set) => $form.document.subscribe(set)),
+    data: derived(formStore, ($form, set) => $form.data.subscribe(set)),
+    submission: derived(formStore, ($form, set) => $form.submission.subscribe(set)),
+    visibleErrors: derived(formStore, ($form, set) => $form.visibleErrors.subscribe(set)),
+    dispatch: (command) => get(formStore).dispatch(command),
+    getNodeState: (nodeId) => get(formStore).getNodeState(nodeId),
+  }
+  const registryStore = writable(capture(() => registry))
+  const messagesStore = writable(capture(() => messages))
+  const generatedId = $props.id()
+  const generatedPrefix = `texaryn-${Array.from(generatedId, (char) => char.codePointAt(0)!.toString(36)).join('_')}`
+  const resolvedIdPrefix = capture(() => idPrefix ?? generatedPrefix)
+  const runtime = derived(formStore, ($form) => $form.runtime)
+  const context = {
+    form: currentForm,
+    registry: registryStore,
+    messages: messagesStore,
+    idPrefix: resolvedIdPrefix,
+  }
+  provideFormContext(context)
+
+  const document = currentForm.document
+  const rootNode = $derived($document.nodes[$document.rootId] as UINode | undefined)
+
+  let previousForm = capture(() => form)
+  $effect(() => {
+    registryStore.set(registry)
+    messagesStore.set(messages)
+    const nextForm = form
+    if (nextForm === previousForm) return
+
+    const replacedForm = previousForm
+    previousForm = nextForm
+    formStore.set(nextForm)
+    if (destroyOnUnmount && replacedForm.runtime !== nextForm.runtime) {
+      replacedForm.runtime.destroy()
+    }
+  })
+
+  onDestroy(() => {
+    if (destroyOnUnmount) get(formStore).runtime.destroy()
+  })
+
+  function handleSubmit(event: SubmitEvent): void {
+    event.preventDefault()
+    currentForm.dispatch({ type: 'Submit' })
+  }
+</script>
+
+<form onsubmit={handleSubmit}>
+  {#key $runtime}
+    <ErrorSummary />
+  {/key}
+  {#if rootNode}
+    <NodeRenderer node={rootNode} />
+  {/if}
+  {@render children?.()}
+</form>

package/dist/components/FormRoot.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { FormMessages, RendererRegistry } from '@texaryn/core';
+import type { SvelteFormBinding } from '../form.js';
+import type { WidgetComponent } from '../widget.js';
+interface Props {
+    form: SvelteFormBinding;
+    registry?: RendererRegistry<WidgetComponent>;
+    messages?: FormMessages;
+    idPrefix?: string;
+    destroyOnUnmount?: boolean;
+    children?: Snippet;
+}
+declare const FormRoot: import("svelte").Component<Props, {}, "">;
+type FormRoot = ReturnType<typeof FormRoot>;
+export default FormRoot;
+//# sourceMappingURL=FormRoot.svelte.d.ts.map

package/dist/components/FormRoot.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormRoot.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/FormRoot.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAU,MAAM,eAAe,CAAA;AAE3E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AACnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAOjD,UAAU,KAAK;IACb,IAAI,EAAE,iBAAiB,CAAA;IACvB,QAAQ,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAA;IAC5C,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AA8FH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/NodeRenderer.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { UINode } from '@texaryn/core'
+  import { useFormContext } from '../context.js'
+  import type { WidgetComponent } from '../widget.js'
+
+  interface Props {
+    node: UINode
+  }
+
+  let { node }: Props = $props()
+  const context = useFormContext()
+  const registry = context.registry
+  const widget = $derived($registry.resolve(node) as WidgetComponent | undefined)
+</script>
+
+{#if node.visible && widget}
+  {@const Widget = widget}
+  <Widget {node} />
+{/if}

package/dist/components/NodeRenderer.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { UINode } from '@texaryn/core';
+interface Props {
+    node: UINode;
+}
+declare const NodeRenderer: import("svelte").Component<Props, {}, "">;
+type NodeRenderer = ReturnType<typeof NodeRenderer>;
+export default NodeRenderer;
+//# sourceMappingURL=NodeRenderer.svelte.d.ts.map

package/dist/components/NodeRenderer.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeRenderer.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/NodeRenderer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAKzC,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAA;CACb;AAoBH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/ObjectLayout.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { objectChildKey } from '@texaryn/core'
+  import type { ContainerNode, UINode } from '@texaryn/core'
+  import { englishMessages } from '@texaryn/core'
+  import { useFormContext } from '../context.js'
+  import NodeRenderer from './NodeRenderer.svelte'
+
+  interface Props {
+    node: UINode
+  }
+
+  let { node }: Props = $props()
+  const context = useFormContext()
+  const document = context.form.document
+  const messages = context.messages
+  const current = $derived(($document.nodes[node.id] ?? node) as ContainerNode)
+  const nested = $derived(node.parentId !== null)
+  const title = $derived(current.annotations.title)
+  const children = $derived(
+    current.children
+      .map((id) => $document.nodes[id])
+      .filter((child): child is UINode => child != null),
+  )
+  const actions = $derived(firstTargets(current.boundaryTargets ?? []))
+
+  function firstTargets(targets: NonNullable<ContainerNode['boundaryTargets']>) {
+    const byReason = new Map<string, (typeof targets)[number]>()
+    for (const target of targets) {
+      if (!byReason.has(target.reason)) byReason.set(target.reason, target)
+    }
+    return [...byReason.values()]
+  }
+
+  function expand(target: (typeof actions)[number]): void {
+    context.form.dispatch({
+      type: 'ExpandBoundary',
+      containerId: current.id,
+      targetToken: target.token,
+    })
+  }
+
+  function expandMessage(target: (typeof actions)[number]) {
+    const makeMessage = $messages.expandBoundary ?? englishMessages.expandBoundary!
+    return makeMessage({
+      boundary: target.reason,
+      containerTitle: title,
+      position: 1,
+      count: 1,
+    })
+  }
+</script>
+
+{#snippet renderedChildren()}
+  {#each children as child (objectChildKey(child))}
+    <NodeRenderer node={child} />
+  {/each}
+  {#each actions as target (target.reason)}
+    {@const message = expandMessage(target)}
+    <button type="button" aria-label={message.accessibleName} onclick={() => expand(target)}>
+      {message.label}
+    </button>
+  {/each}
+{/snippet}
+
+{#if nested}
+  <fieldset role={title === undefined ? 'none' : undefined}>
+    {#if title !== undefined}<legend>{title}</legend>{/if}
+    <div>{@render renderedChildren()}</div>
+  </fieldset>
+{:else}
+  <div>{@render renderedChildren()}</div>
+{/if}

package/dist/components/ObjectLayout.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { UINode } from '@texaryn/core';
+interface Props {
+    node: UINode;
+}
+declare const ObjectLayout: import("svelte").Component<Props, {}, "">;
+type ObjectLayout = ReturnType<typeof ObjectLayout>;
+export default ObjectLayout;
+//# sourceMappingURL=ObjectLayout.svelte.d.ts.map

package/dist/components/ObjectLayout.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectLayout.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ObjectLayout.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAiB,MAAM,EAAE,MAAM,eAAe,CAAA;AAMxD,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAA;CACb;AAyEH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/context.d.ts

@@ -0,0 +1,13 @@
+import type { FormMessages, RendererRegistry } from '@texaryn/core';
+import type { Readable } from 'svelte/store';
+import type { SvelteFormBinding } from './form.js';
+import type { WidgetComponent } from './widget.js';
+export interface SvelteFormContext {
+    form: SvelteFormBinding;
+    registry: Readable<RendererRegistry<WidgetComponent>>;
+    messages: Readable<FormMessages>;
+    idPrefix: string;
+}
+export declare function provideFormContext(context: SvelteFormContext): void;
+export declare function useFormContext(): SvelteFormContext;
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/lib/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AACnE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAClD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAIlD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,iBAAiB,CAAA;IACvB,QAAQ,EAAE,QAAQ,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAA;IACrD,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAA;IAChC,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI,CAEnE;AAED,wBAAgB,cAAc,IAAI,iBAAiB,CAMlD"}

package/dist/context.js

@@ -0,0 +1,12 @@
+import { getContext, setContext } from 'svelte';
+const FORM_CONTEXT = Symbol('texaryn.svelte.form');
+export function provideFormContext(context) {
+    setContext(FORM_CONTEXT, context);
+}
+export function useFormContext() {
+    const context = getContext(FORM_CONTEXT);
+    if (!context) {
+        throw new Error('Svelte form widgets must be rendered below FormRoot');
+    }
+    return context;
+}

package/dist/field-props.d.ts

@@ -0,0 +1,20 @@
+import type { FieldNode, ValidationError } from '@texaryn/core';
+export interface FieldAria {
+    id: string;
+    name: string;
+    disabled: boolean;
+    readonly?: boolean;
+    'aria-readonly'?: true;
+    'aria-required': boolean;
+    'aria-invalid'?: boolean;
+    'aria-describedby'?: string;
+    placeholder?: string;
+}
+export declare function makeId(idPrefix: string, nodeId: string, suffix: string): string;
+export declare function fieldAria(node: FieldNode, state: {
+    disabled: boolean;
+    showErrors: boolean;
+    errors: readonly ValidationError[];
+}, idPrefix: string, nativeReadOnly?: boolean): FieldAria;
+export declare function fieldLabel(node: FieldNode): string;
+//# sourceMappingURL=field-props.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field-props.d.ts","sourceRoot":"","sources":["../src/lib/field-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE/D,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,EAAE,IAAI,CAAA;IACtB,eAAe,EAAE,OAAO,CAAA;IACxB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,MAAM,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAE/E;AAED,wBAAgB,SAAS,CACvB,IAAI,EAAE,SAAS,EACf,KAAK,EAAE;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,SAAS,eAAe,EAAE,CAAA;CAAE,EACrF,QAAQ,EAAE,MAAM,EAChB,cAAc,UAAO,GACpB,SAAS,CAyBX;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAElD"}