@texaryn/web-components 0.0.0 → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @texaryn/web-components
+
+## 0.1.0
+
+### Minor Changes
+
+- b87dd23: First release. A `<texaryn-form>` custom element over the unchanged `FormRuntime`, rendering native controls in light DOM and usable from any framework or none. Registration is explicit through `defineTexarynForm()`. The element either creates a runtime from a `port` and destroys it on removal, or borrows one assigned through `runtime` and never destroys it. Native events are left alone and the element adds only `texaryn-data-change` and `texaryn-submission-change`. One `<form novalidate>` turns its submit into the `Submit` command, and every DOM id carries a per-element prefix so two forms on one page share none.

package/LICENSE

@@ -0,0 +1,190 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to the Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by the Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding any notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   Copyright 2024-2026 Hamza Hamidi
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,111 @@
+# @texaryn/web-components
+
+A `<texaryn-form>` custom element for Texaryn, rendering native form controls
+in light DOM. Usable from any framework, or from none.
+
+> Status: pre-1.0. Public APIs may change before 1.0.
+
+## Install
+
+```bash
+pnpm add @texaryn/core @texaryn/schema-json @texaryn/web-components
+```
+
+The package depends on `@texaryn/core` only. It has no framework dependency
+and loads no stylesheet.
+
+## Quick start
+
+Registration is explicit, so importing the package defines nothing on its own:
+
+```ts
+import { createJsonSchemaAdapter } from '@texaryn/schema-json'
+import { createDefaultRegistry, defineTexarynForm } from '@texaryn/web-components'
+import type { TexarynFormElement } from '@texaryn/web-components'
+
+defineTexarynForm()
+
+const port = await createJsonSchemaAdapter({
+  type: 'object',
+  properties: { name: { type: 'string', title: 'Name' } },
+  required: ['name'],
+})
+
+const form = document.createElement('texaryn-form') as TexarynFormElement
+form.registry = createDefaultRegistry()
+form.options = { initialData: { name: '' }, onSubmit: (data) => console.log(data) }
+form.port = port
+document.body.append(form)
+```
+
+## Two ownership modes
+
+The element either creates a runtime or borrows one, and the two are mutually
+exclusive: setting both throws.
+
+- `port` plus `options` is the managed mode. The element creates a runtime and
+  destroys it when the element is removed from the document. `options` is read
+  when that runtime is created, so set it before `port`; setting `port` again
+  rebuilds the runtime with the current options.
+- `runtime` is the primitive input. A runtime assigned this way is borrowed
+  and never destroyed by the element, which is what lets an application own
+  one runtime and render it through several bindings.
+
+Being removed from the document is not the same as being discarded. Moving the
+element between parents fires `disconnectedCallback` too, so disposal is
+deferred and skipped if the element is connected again, and a reparent keeps
+the runtime, the controls and their values.
+
+## Events
+
+Native events are left alone. The controls are real elements in light DOM, so
+`input`, `change` and `blur` bubble on their own. The element adds only its own
+namespaced events, each carrying a store snapshot as `detail`:
+
+- `texaryn-data-change`, the current form data
+- `texaryn-submission-change`, the current submission state
+
+## Submission
+
+The element renders one `<form novalidate>` and turns its `submit` event into
+the `Submit` command, so a `type="submit"` button placed inside the form works
+the way a consumer expects. The runtime owns validation, which is why the
+native `novalidate` is set and required fields carry `aria-required` rather
+than the native `required` attribute.
+
+## Ids
+
+Every id is `<prefix>-<nodeId>-<suffix>`, where the prefix is the element's own
+`id` attribute when it has one and an allocated value otherwise. Two forms on
+one page therefore share no ids, and every `for` and `aria-describedby`
+resolves inside its own element.
+
+## Key exports
+
+- `defineTexarynForm`
+- `TexarynFormElement`
+- `createDefaultRegistry`
+- `mountForm`
+- `makeId`
+- `textInput`, `numberInput`, `checkbox`, `select`, `textarea`
+- `objectLayout`, `arrayControl`
+- types: `DomWidget`, `WidgetFactory`, `NodeBinding`, `RenderContext`, `Mount`
+
+## Not in this release
+
+Shadow DOM, `formAssociated` and `ElementInternals`, nesting inside another
+`<form>`, group and layout containers beyond objects and arrays, text and
+action nodes, and focus management after a failed submit.
+
+## Related packages
+
+- [`@texaryn/core`](../core/README.md), runtime and renderer contracts
+- [`@texaryn/schema-json`](../schema-json/README.md), JSON Schema adapter
+- [`@texaryn/react`](../react/README.md), the React binding over the same runtime
+- [`@texaryn/vue`](../vue/README.md), the Vue binding over the same runtime
+
+See the [repository README](../../README.md) for the complete architecture.
+
+## License
+
+Apache-2.0

package/dist/binding.d.ts

@@ -0,0 +1,9 @@
+import type { UINode } from '@texaryn/core';
+import type { NodeBinding, RenderContext } from './widget.js';
+/**
+ * Resolves a widget for a node and keeps it across updates while the same
+ * factory still matches. Visibility is a `hidden` toggle rather than an
+ * unmount, so a conditional reveal never rebuilds the subtree.
+ */
+export declare function createNodeBinding(initial: UINode, ctx: RenderContext): NodeBinding;
+//# sourceMappingURL=binding.d.ts.map

package/dist/binding.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"binding.d.ts","sourceRoot":"","sources":["../src/binding.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,KAAK,EAAa,WAAW,EAAE,aAAa,EAAiB,MAAM,aAAa,CAAA;AAQvF;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,aAAa,GAAG,WAAW,CA0BlF"}

package/dist/binding.js

@@ -0,0 +1,38 @@
+function placeholder() {
+    const element = document.createElement('span');
+    element.hidden = true;
+    return { element, update() { }, destroy() { } };
+}
+/**
+ * Resolves a widget for a node and keeps it across updates while the same
+ * factory still matches. Visibility is a `hidden` toggle rather than an
+ * unmount, so a conditional reveal never rebuilds the subtree.
+ */
+export function createNodeBinding(initial, ctx) {
+    let factory = ctx.registry.resolve(initial);
+    let widget = factory ? factory(initial, ctx) : placeholder();
+    widget.element.hidden = !initial.visible;
+    return {
+        get element() {
+            return widget.element;
+        },
+        update(node) {
+            const next = ctx.registry.resolve(node);
+            if (next !== factory) {
+                const replacement = next ? next(node, ctx) : placeholder();
+                widget.element.replaceWith(replacement.element);
+                widget.destroy();
+                widget = replacement;
+                factory = next;
+            }
+            else {
+                widget.update(node);
+            }
+            widget.element.hidden = !node.visible;
+        },
+        destroy() {
+            widget.destroy();
+        },
+    };
+}
+//# sourceMappingURL=binding.js.map

package/dist/binding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"binding.js","sourceRoot":"","sources":["../src/binding.ts"],"names":[],"mappings":"AAGA,SAAS,WAAW;IAClB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;IAC9C,OAAO,CAAC,MAAM,GAAG,IAAI,CAAA;IACrB,OAAO,EAAE,OAAO,EAAE,MAAM,KAAI,CAAC,EAAE,OAAO,KAAI,CAAC,EAAE,CAAA;AAC/C,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,OAAe,EAAE,GAAkB;IACnE,IAAI,OAAO,GAA8B,GAAG,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;IACtE,IAAI,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAA;IAC5D,MAAM,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,OAAO,CAAA;IAExC,OAAO;QACL,IAAI,OAAO;YACT,OAAO,MAAM,CAAC,OAAO,CAAA;QACvB,CAAC;QACD,MAAM,CAAC,IAAI;YACT,MAAM,IAAI,GAAG,GAAG,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;YACvC,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;gBACrB,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAA;gBAC1D,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;gBAC/C,MAAM,CAAC,OAAO,EAAE,CAAA;gBAChB,MAAM,GAAG,WAAW,CAAA;gBACpB,OAAO,GAAG,IAAI,CAAA;YAChB,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;YACrB,CAAC;YACD,MAAM,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,OAAO,CAAA;QACvC,CAAC;QACD,OAAO;YACL,MAAM,CAAC,OAAO,EAAE,CAAA;QAClB,CAAC;KACF,CAAA;AACH,CAAC"}

package/dist/containers.d.ts

@@ -0,0 +1,11 @@
+import type { UINode } from '@texaryn/core';
+import type { DomWidget, RenderContext } from './widget.js';
+export declare function objectLayout(initial: UINode, ctx: RenderContext): DomWidget;
+/**
+ * Rows are keyed by `StableItemId`, which survives insert, remove and move,
+ * and each row's binding is re-pointed at whatever positional node now sits
+ * at its index. Buttons resolve their index at click time for the same
+ * reason: an index captured at render time is stale after any mutation.
+ */
+export declare function arrayControl(initial: UINode, ctx: RenderContext): DomWidget;
+//# sourceMappingURL=containers.d.ts.map

package/dist/containers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"containers.d.ts","sourceRoot":"","sources":["../src/containers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAA+B,MAAM,EAAE,MAAM,eAAe,CAAA;AACxE,OAAO,KAAK,EAAE,SAAS,EAAe,aAAa,EAAE,MAAM,aAAa,CAAA;AA4ExE,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,aAAa,GAAG,SAAS,CAqE3E;AAUD;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,aAAa,GAAG,SAAS,CA2F3E"}

package/dist/containers.js

@@ -0,0 +1,243 @@
+function currentNodes(ctx) {
+    return ctx.runtime.document.getSnapshot().nodes;
+}
+/**
+ * Moves `el` before `ref` inside `parent`. `insertBefore` on a connected node
+ * is a remove and an insert, and the removal runs the focus fixup, so a
+ * focused row blurs. `moveBefore` is the atomic move that keeps focus and
+ * selection where the browser has it; the fallback is plain `insertBefore`,
+ * made safe by the anchor rule in `reorder`.
+ */
+function place(parent, el, ref) {
+    if (el.parentNode === parent && typeof parent.moveBefore === 'function') {
+        parent.moveBefore(el, ref);
+    }
+    else {
+        parent.insertBefore(el, ref);
+    }
+}
+/**
+ * Puts `wanted` in order under `parent` without ever moving the element that
+ * contains the focused control. Every other element is placed relative to
+ * that anchor, so the result is the same order and the focus never leaves
+ * the document. Elements that are not wanted must already be gone.
+ */
+function reorder(parent, wanted) {
+    const active = document.activeElement;
+    const anchorIndex = active ? wanted.findIndex((el) => el.contains(active)) : -1;
+    if (anchorIndex < 0) {
+        wanted.forEach((el, index) => {
+            const at = parent.children[index] ?? null;
+            if (at !== el)
+                place(parent, el, at);
+        });
+        return;
+    }
+    const anchor = wanted[anchorIndex];
+    let ref = anchor;
+    for (let i = anchorIndex - 1; i >= 0; i--) {
+        const el = wanted[i];
+        if (el.nextSibling !== ref)
+            place(parent, el, ref);
+        ref = el;
+    }
+    let prev = anchor;
+    for (let i = anchorIndex + 1; i < wanted.length; i++) {
+        const el = wanted[i];
+        if (prev.nextSibling !== el)
+            place(parent, el, prev.nextSibling);
+        prev = el;
+    }
+}
+function button(label, onClick) {
+    const element = document.createElement('button');
+    element.type = 'button';
+    element.textContent = label;
+    element.addEventListener('click', onClick);
+    return element;
+}
+/**
+ * Object children are keyed by their property name, the last pointer
+ * segment, never by node id. Node ids are positional, so when the row that
+ * contains this object moves, every child arrives with a new id; the property
+ * name is what still says "this is the same field", and keeping the binding
+ * is what keeps its input element and the focus on it.
+ */
+function childKey(node) {
+    const pointer = node.dataPointer;
+    if (pointer == null)
+        return node.id;
+    const index = pointer.lastIndexOf('/');
+    return index >= 0 ? pointer.slice(index + 1) : pointer;
+}
+export function objectLayout(initial, ctx) {
+    // Whether a node is nested is fixed for its lifetime, but its title is not:
+    // a conditional subschema can add or drop one on any recompile, and this
+    // widget survives that. So the element is chosen once and the grouping
+    // semantics are re-derived from the node on every reconcile.
+    const nested = initial.parentId !== null;
+    const root = document.createElement(nested ? 'fieldset' : 'div');
+    root.className = 'texaryn-object';
+    const legend = nested ? document.createElement('legend') : null;
+    // Children live in their own element so the legend is never a candidate for reorder.
+    const body = nested ? document.createElement('div') : root;
+    if (body !== root)
+        root.append(body);
+    const bindings = new Map();
+    /** The root object is the form itself, so only a nested titled object names a group. */
+    function applyGrouping(node) {
+        if (!legend)
+            return;
+        const title = node.annotations.title;
+        if (title === undefined) {
+            legend.remove();
+            // An unnamed group is noise, so the fieldset stops being one.
+            root.setAttribute('role', 'none');
+            return;
+        }
+        legend.textContent = title;
+        // A legend names its fieldset only as the first child.
+        if (root.firstChild !== legend)
+            root.prepend(legend);
+        root.removeAttribute('role');
+    }
+    function reconcile(node) {
+        applyGrouping(node);
+        const nodes = currentNodes(ctx);
+        const wanted = node.children.map((id) => nodes[id]).filter((n) => n != null);
+        const keep = new Set();
+        const elements = [];
+        for (const child of wanted) {
+            const key = childKey(child);
+            keep.add(key);
+            let binding = bindings.get(key);
+            if (binding) {
+                binding.update(child);
+            }
+            else {
+                binding = ctx.mountChild(child);
+                bindings.set(key, binding);
+            }
+            elements.push(binding.element);
+        }
+        for (const [key, binding] of bindings) {
+            if (keep.has(key))
+                continue;
+            binding.destroy();
+            binding.element.remove();
+            bindings.delete(key);
+        }
+        reorder(body, elements);
+    }
+    reconcile(initial);
+    return {
+        element: root,
+        update(node) {
+            reconcile(node);
+        },
+        destroy() {
+            for (const binding of bindings.values())
+                binding.destroy();
+            bindings.clear();
+        },
+    };
+}
+/**
+ * Rows are keyed by `StableItemId`, which survives insert, remove and move,
+ * and each row's binding is re-pointed at whatever positional node now sits
+ * at its index. Buttons resolve their index at click time for the same
+ * reason: an index captured at render time is stale after any mutation.
+ */
+export function arrayControl(initial, ctx) {
+    let node = initial;
+    const root = document.createElement('div');
+    root.className = 'texaryn-array';
+    const list = document.createElement('div');
+    const add = button('Add', () => {
+        ctx.runtime.dispatch({
+            type: 'InsertItem',
+            containerId: node.id,
+            index: node.arrayMeta?.itemIds.length ?? 0,
+        });
+    });
+    root.append(list, add);
+    const rows = new Map();
+    function indexOf(itemId) {
+        return node.arrayMeta?.itemIds.indexOf(itemId) ?? -1;
+    }
+    function createRow(itemId) {
+        const element = document.createElement('div');
+        element.className = 'texaryn-array-item';
+        element.dataset.itemId = itemId;
+        const slot = document.createElement('div');
+        const up = button('Up', () => {
+            const index = indexOf(itemId);
+            if (index > 0) {
+                ctx.runtime.dispatch({ type: 'MoveItem', containerId: node.id, from: index, to: index - 1 });
+            }
+        });
+        const remove = button('Remove', () => {
+            const index = indexOf(itemId);
+            if (index >= 0)
+                ctx.runtime.dispatch({ type: 'RemoveItem', containerId: node.id, index });
+        });
+        element.append(slot, up, remove);
+        return { element, slot, binding: null, up, remove };
+    }
+    function reconcile(next) {
+        node = next;
+        const meta = node.arrayMeta;
+        const nodes = currentNodes(ctx);
+        const itemIds = meta?.itemIds ?? [];
+        const keep = new Set();
+        const elements = [];
+        itemIds.forEach((itemId, index) => {
+            keep.add(itemId);
+            let row = rows.get(itemId);
+            if (!row) {
+                row = createRow(itemId);
+                rows.set(itemId, row);
+            }
+            const child = nodes[node.children[index]];
+            if (child) {
+                if (row.binding) {
+                    row.binding.update(child);
+                }
+                else {
+                    row.binding = ctx.mountChild(child);
+                    row.slot.append(row.binding.element);
+                }
+            }
+            else if (row.binding) {
+                row.binding.destroy();
+                row.binding.element.remove();
+                row.binding = null;
+            }
+            row.remove.hidden = !(meta?.canRemove ?? false);
+            row.up.hidden = !(meta?.canReorder ?? false) || index === 0;
+            elements.push(row.element);
+        });
+        for (const [itemId, row] of rows) {
+            if (keep.has(itemId))
+                continue;
+            row.binding?.destroy();
+            row.element.remove();
+            rows.delete(itemId);
+        }
+        reorder(list, elements);
+        add.hidden = !(meta?.canAdd ?? false);
+    }
+    reconcile(node);
+    return {
+        element: root,
+        update(next) {
+            reconcile(next);
+        },
+        destroy() {
+            for (const row of rows.values())
+                row.binding?.destroy();
+            rows.clear();
+        },
+    };
+}
+//# sourceMappingURL=containers.js.map

package/dist/containers.js.map

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

package/dist/define.d.ts

@@ -0,0 +1,3 @@
+/** Registers the element once; a second call for the same tag returns what is already registered. */
+export declare function defineTexarynForm(tagName?: string): CustomElementConstructor;
+//# sourceMappingURL=define.d.ts.map

package/dist/define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../src/define.ts"],"names":[],"mappings":"AAEA,qGAAqG;AACrG,wBAAgB,iBAAiB,CAAC,OAAO,SAAiB,GAAG,wBAAwB,CAMpF"}

package/dist/define.js

@@ -0,0 +1,11 @@
+import { texarynFormElementClass } from './element.js';
+/** Registers the element once; a second call for the same tag returns what is already registered. */
+export function defineTexarynForm(tagName = 'texaryn-form') {
+    const existing = customElements.get(tagName);
+    if (existing)
+        return existing;
+    const constructor = texarynFormElementClass();
+    customElements.define(tagName, constructor);
+    return constructor;
+}
+//# sourceMappingURL=define.js.map