@effect-app/vue-components 3.0.0 → 3.0.2

package/dist/vue-components.es10.js

@@ -1,17 +1,17 @@
 import { useForm as K } from "@tanstack/vue-form";
-import { Data as T, S as W, Effect as d, Fiber as $, Option as P, Array as F } from "effect-app";
-import { runtimeFiberAsPromise as z } from "./vue-components.es17.js";
+import { Data as T, S as W, Effect as d, Fiber as $, Option as j, Array as F } from "effect-app";
+import { runtimeFiberAsPromise as z } from "./vue-components.es18.js";
 import { computed as x, onUnmounted as D, onMounted as G, onBeforeUnmount as Z, watch as R, ref as Q, h as J } from "vue";
 import { useIntl as X } from "./vue-components.es3.js";
-import Y from "./vue-components.es18.js";
-import C from "./vue-components.es19.js";
-import ee from "./vue-components.es20.js";
+import Y from "./vue-components.es19.js";
+import C from "./vue-components.es20.js";
+import ee from "./vue-components.es21.js";
 import { generateMetaFromSchema as re, deepMerge as N, defaultsValueFromSchema as te } from "./vue-components.es12.js";
 import se from "./vue-components.es6.js";
 import ne from "./vue-components.es8.js";
-import oe from "./vue-components.es21.js";
-import { trace as H } from "./vue-components.es22.js";
-import { context as U } from "./vue-components.es23.js";
+import oe from "./vue-components.es22.js";
+import { trace as H } from "./vue-components.es23.js";
+import { context as U } from "./vue-components.es24.js";
 class ie extends T.TaggedError("FormErrors") {
 }
 const M = (i) => function(s) {
@@ -29,19 +29,19 @@ const M = (i) => function(s) {
 }, ce = (i) => function(s) {
   return {
     setup() {
-      const { fieldMap: f, form: m } = i, a = m.useStore((v) => v.errors), g = m.useStore((v) => v.fieldMeta), p = m.useStore((v) => v.errorMap), j = ae(m), A = x(() => {
+      const { fieldMap: f, form: m } = i, a = m.useStore((v) => v.errors), g = m.useStore((v) => v.fieldMeta), p = m.useStore((v) => v.errorMap), A = ae(m), L = x(() => {
         const v = F.filterMap(
           Object.entries(g.value),
           ([O, h]) => {
             const w = h.errors ?? [];
-            if (!w.length) return P.none();
+            if (!w.length) return j.none();
             const u = f.value.get(O);
-            return u ? P.some({
+            return u ? j.some({
               label: u.label,
               inputId: u.id,
               // Only show the first error
               errors: [w[0]?.message].filter(Boolean)
-            }) : P.none();
+            }) : j.none();
           }
         ), o = [];
         if (p.value.onSubmit) {
@@ -53,7 +53,7 @@ const M = (i) => function(s) {
                   const E = u.path.join(".");
                   if (!f.value.has(E)) {
                     o.push({
-                      label: j(E),
+                      label: A(E),
                       inputId: E,
                       errors: [u.message].filter(Boolean)
                     });
@@ -66,7 +66,7 @@ const M = (i) => function(s) {
       });
       return {
         generalErrors: a,
-        errors: A
+        errors: L
       };
     },
     render({ errors: f, generalErrors: m }) {
@@ -84,12 +84,12 @@ const M = (i) => function(s) {
       return s.persistency.id;
     const e = window.location.pathname, r = Object.keys(a);
     return `${e}-${r.join("-")}`;
-  }), j = () => {
+  }), A = () => {
     const e = new URLSearchParams(window.location.search);
     e.delete(p.value);
     const r = new URL(window.location.href);
     r.search = e.toString(), window.history.replaceState({}, "", r.toString());
-  }, A = x(() => {
+  }, L = x(() => {
     let e;
     const r = s?.persistency;
     if (
@@ -110,7 +110,7 @@ const M = (i) => function(s) {
     if (r?.policies && b(r.policies, "querystring"))
       try {
         const t = new URLSearchParams(window.location.search).get(p.value);
-        j(), t && (e = N(e || {}, JSON.parse(t)));
+        A(), t && (e = N(e || {}, JSON.parse(t)));
       } catch (n) {
         console.error(n);
       }
@@ -145,7 +145,7 @@ const M = (i) => function(s) {
         )
       ) : t;
     }) : void 0,
-    defaultValues: A.value
+    defaultValues: L.value
   }), O = () => {
     Object.keys(a).forEach((e) => {
       o.setFieldValue(e, void 0);
@@ -195,13 +195,13 @@ const M = (i) => function(s) {
   const I = (e) => d.currentSpan.pipe(
     d.option,
     d.flatMap(
-      (r) => d.promise(() => o.handleSubmit(P.isSome(r) ? { currentSpan: r.value, ...e } : e))
+      (r) => d.promise(() => o.handleSubmit(j.isSome(r) ? { currentSpan: r.value, ...e } : e))
     )
   ), q = (e) => e?.checkErrors ? I(e?.meta).pipe(d.flatMap(d.fnUntraced(function* () {
     const r = o.getAllErrors();
     if (Object.keys(r.fields).length || r.form.errors.length)
       return yield* new ie({ form: r.form, fields: r.fields });
-  }))) : I(e?.meta), B = o.handleSubmit, L = Q(/* @__PURE__ */ new Map()), y = Object.assign(o, {
+  }))) : I(e?.meta), B = o.handleSubmit, P = Q(/* @__PURE__ */ new Map()), y = Object.assign(o, {
     i18nNamespace: s?.i18nNamespace,
     ignorePreventCloseEvents: s?.ignorePreventCloseEvents,
     meta: a,
@@ -214,9 +214,13 @@ const M = (i) => function(s) {
     // /** @experimental */
     handleSubmitEffect: q,
     registerField: (e) => {
-      R(e, (r) => L.value.set(r.name, { label: r.label, id: r.id }), { immediate: !0 }), D(() => L.value.delete(e.value.name));
+      R(e, (r) => {
+        P.value.set(r.name, { label: r.label, id: r.id });
+      }, { immediate: !0 }), D(() => {
+        P.value.get(e.value.name)?.id === e.value.id && P.value.delete(e.value.name);
+      });
     }
-  }), V = { form: y, fieldMap: L };
+  }), V = { form: y, fieldMap: P };
   return Object.assign(y, {
     // Type-level properties for performance optimization (not used at runtime)
     _paths: void 0,

package/dist/vue-components.es11.js

@@ -1,6 +1,6 @@
-import l from "./vue-components.es28.js";
+import l from "./vue-components.es29.js";
 import { inject as c, provide as u } from "vue";
-import { onMountedWithCleanup as f } from "./vue-components.es29.js";
+import { onMountedWithCleanup as f } from "./vue-components.es16.js";
 const p = () => l(), i = Symbol("DialogBus"), r = () => c(i, null), g = () => {
   const n = p();
   return u(i, n), n;

package/dist/vue-components.es12.js

@@ -1,7 +1,7 @@
 import { S as i, Option as q } from "effect-app";
 import { getMetadataFromSchema as V } from "@effect-app/vue/form";
 import { useIntl as E, getTransformationFrom as U } from "./vue-components.es3.js";
-import { isObject as $ } from "./vue-components.es16.js";
+import { isObject as $ } from "./vue-components.es17.js";
 const j = (e) => i.AST.isUnion(e) && e.types.find((n) => n._tag === "UndefinedKeyword" || n === i.Null.ast), g = (e) => !e || !i.AST.isUnion(e) ? !1 : e.types.find((n) => n._tag === "UndefinedKeyword") ? "undefined" : e.types.find((n) => n === i.Null.ast) ? "null" : !1, _ = (e) => {
   const n = [];
   for (const t of e)

package/dist/vue-components.es16.js

@@ -1,6 +1,13 @@
-import "vue";
-typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const t = Object.prototype.toString, c = (o) => t.call(o) === "[object Object]";
+import { onMounted as e, onUnmounted as u } from "vue";
+function p(t) {
+  let n;
+  e(() => {
+    const o = t();
+    o && (n = o);
+  }), u(() => {
+    n && n();
+  });
+}
 export {
-  c as isObject
+  p as onMountedWithCleanup
 };

package/dist/vue-components.es17.js

@@ -1,12 +1,6 @@
-import { Exit as c, Runtime as u } from "effect";
-import { dual as n, isFunction as m } from "./vue-components.es30.js";
-const i = Symbol.for("clone-trait"), a = n(2, (e, t) => i in e ? e[i](t) : Object.setPrototypeOf(t, Object.getPrototypeOf(e)));
-n(2, (e, t) => a(e, { ...e, ...m(t) ? t(e) : t }));
-const p = (e, t) => new Promise((o, s) => e.addObserver((r) => {
-  c.isSuccess(r) ? o(r.value) : s(u.makeFiberFailure(r.cause));
-}));
+import "vue";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const t = Object.prototype.toString, c = (o) => t.call(o) === "[object Object]";
 export {
-  a as clone,
-  i as cloneTrait,
-  p as runtimeFiberAsPromise
+  c as isObject
 };

package/dist/vue-components.es18.js

@@ -1,57 +1,12 @@
-import { defineComponent as F, computed as f, onMounted as M, provide as P, createBlock as c, openBlock as s, resolveDynamicComponent as p, withCtx as g, renderSlot as o, createElementBlock as k, normalizeProps as l, guardReactiveProps as u, Fragment as A, renderList as C, mergeProps as b } from "vue";
-const N = /* @__PURE__ */ F({
-  inheritAttrs: !1,
-  __name: "OmegaArray",
-  props: {
-    form: {},
-    inputClass: {},
-    name: {},
-    defaultItems: {},
-    items: {}
-  },
-  setup(n) {
-    const a = n, y = a.form.useStore((e) => e.values), i = f(() => {
-      const e = a.name.replace(/\[/g, ".").replace(/\]/g, "");
-      try {
-        return e.split(".").reduce((r, t) => r && r[t], y.value);
-      } catch (r) {
-        return console.error(r), [];
-      }
-    });
-    M(async () => {
-      a.defaultItems && !i.value && a.form.setFieldValue(a.name, a.defaultItems);
-    });
-    const $ = f(() => (r) => {
-      const t = r.replace(/\[\d+\]/g, "");
-      return a.form.meta[t];
-    });
-    return P("getMetaFromArray", $), (e, r) => (s(), c(p(n.form.Field), { name: n.name }, {
-      default: g(({ field: t, state: d }) => [
-        o(e.$slots, "pre-array", l(u({ field: t, state: d }))),
-        (s(!0), k(A, null, C(i.value, (B, m) => (s(), c(p(n.form.Field), {
-          key: `${n.name}[${Number(m)}]`,
-          name: (
-            // eslint-disable-next-line
-            `${n.name}[${Number(m)}]`
-          )
-        }, {
-          default: g(({ field: v, state: h }) => [
-            o(e.$slots, "default", b({ ref_for: !0 }, {
-              subField: v,
-              subState: h,
-              index: Number(m),
-              field: t
-            }))
-          ]),
-          _: 2
-        }, 1032, ["name"]))), 128)),
-        o(e.$slots, "post-array", l(u({ field: t, state: d }))),
-        o(e.$slots, "field", l(u({ field: t })))
-      ]),
-      _: 3
-    }, 8, ["name"]));
-  }
-});
+import { Exit as c, Runtime as u } from "effect";
+import { dual as n, isFunction as m } from "./vue-components.es30.js";
+const i = Symbol.for("clone-trait"), a = n(2, (e, t) => i in e ? e[i](t) : Object.setPrototypeOf(t, Object.getPrototypeOf(e)));
+n(2, (e, t) => a(e, { ...e, ...m(t) ? t(e) : t }));
+const p = (e, t) => new Promise((o, s) => e.addObserver((r) => {
+  c.isSuccess(r) ? o(r.value) : s(u.makeFiberFailure(r.cause));
+}));
 export {
-  N as default
+  a as clone,
+  i as cloneTrait,
+  p as runtimeFiberAsPromise
 };

package/dist/vue-components.es19.js

@@ -1,70 +1,57 @@
-import { defineComponent as O, computed as j, createElementBlock as M, openBlock as _, Fragment as E, renderList as A, renderSlot as F, createVNode as g, unref as h, mergeProps as k } from "vue";
-import { Order as l, pipe as v, Array as u } from "effect-app";
-const I = /* @__PURE__ */ O({
-  __name: "OmegaAutoGen",
+import { defineComponent as F, computed as f, onMounted as M, provide as P, createBlock as c, openBlock as s, resolveDynamicComponent as p, withCtx as g, renderSlot as o, createElementBlock as k, normalizeProps as l, guardReactiveProps as u, Fragment as A, renderList as C, mergeProps as b } from "vue";
+const N = /* @__PURE__ */ F({
+  inheritAttrs: !1,
+  __name: "OmegaArray",
   props: {
     form: {},
-    pick: {},
-    omit: {},
-    labelMap: { type: Function },
-    filterMap: { type: Function },
-    order: {},
-    sort: {}
+    inputClass: {},
+    name: {},
+    defaultItems: {},
+    items: {}
   },
-  setup(i) {
-    const p = (e) => (r) => Object.fromEntries(
-      Object.entries(r).map(([t, o]) => [t, e(o, t)])
-    ), a = (e) => (r) => Object.fromEntries(
-      Object.entries(r).filter(([t, o]) => e(o, t))
-    ), m = (e) => (r) => Object.entries(r).reduce(
-      (t, [o, c]) => {
-        const s = e(c, o);
-        return s !== !1 && (t[o] = s), t;
-      },
-      {}
-    ), n = i, f = (e, r) => {
-      const t = r?.indexOf(e) ?? -1;
-      return t === -1 ? Number.MAX_SAFE_INTEGER : t;
-    }, d = l.mapInput(
-      l.number,
-      (e) => f(e.name, n.order || [])
-    ), b = j(
-      () => v(
-        n.form.meta,
-        // include / exclude
-        a(
-          (e, r) => n.pick ? n.pick.includes(r) && !n.omit?.includes(r) : !n.omit?.includes(r)
-        ),
-        (e) => e,
-        // labelMap and adding name
-        p((e, r) => ({
-          name: r,
-          label: n.labelMap?.(r) || r,
-          ...e
-        })),
-        // filterMap
-        n.filterMap ? m((e) => {
-          const r = n.filterMap?.(e.name, e);
-          return r === void 0 || r === !0 ? e : r;
-        }) : (e) => e,
-        // transform to array
-        (e) => Object.values(e),
-        // order
-        u.sort(d),
-        // sort
-        n.sort ? u.sort(n.sort) : (e) => e
-      )
-    );
-    return (e, r) => (_(!0), M(E, null, A(b.value, ({ name: t, label: o, ...c }) => F(e.$slots, "default", {
-      child: { name: t, label: o, ...c }
-    }, () => [
-      g(h(i.form).Input, k({
-        name: t,
-        label: o
-      }, { ref_for: !0 }, c), null, 16, ["name", "label"])
-    ])), 256));
+  setup(n) {
+    const a = n, y = a.form.useStore((e) => e.values), i = f(() => {
+      const e = a.name.replace(/\[/g, ".").replace(/\]/g, "");
+      try {
+        return e.split(".").reduce((r, t) => r && r[t], y.value);
+      } catch (r) {
+        return console.error(r), [];
+      }
+    });
+    M(async () => {
+      a.defaultItems && !i.value && a.form.setFieldValue(a.name, a.defaultItems);
+    });
+    const $ = f(() => (r) => {
+      const t = r.replace(/\[\d+\]/g, "");
+      return a.form.meta[t];
+    });
+    return P("getMetaFromArray", $), (e, r) => (s(), c(p(n.form.Field), { name: n.name }, {
+      default: g(({ field: t, state: d }) => [
+        o(e.$slots, "pre-array", l(u({ field: t, state: d }))),
+        (s(!0), k(A, null, C(i.value, (B, m) => (s(), c(p(n.form.Field), {
+          key: `${n.name}[${Number(m)}]`,
+          name: (
+            // eslint-disable-next-line
+            `${n.name}[${Number(m)}]`
+          )
+        }, {
+          default: g(({ field: v, state: h }) => [
+            o(e.$slots, "default", b({ ref_for: !0 }, {
+              subField: v,
+              subState: h,
+              index: Number(m),
+              field: t
+            }))
+          ]),
+          _: 2
+        }, 1032, ["name"]))), 128)),
+        o(e.$slots, "post-array", l(u({ field: t, state: d }))),
+        o(e.$slots, "field", l(u({ field: t })))
+      ]),
+      _: 3
+    }, 8, ["name"]));
   }
 });
 export {
-  I as default
+  N as default
 };

package/dist/vue-components.es20.js

@@ -1,8 +1,70 @@
-(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");if(a.appendChild(document.createTextNode('.v-enter-from[data-v-6b2bf87e],.v-leave-to[data-v-6b2bf87e]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-6b2bf87e],.v-leave-active[data-v-6b2bf87e]{display:grid;transition:all .15s}.v-enter-to[data-v-6b2bf87e],.v-leave-from[data-v-6b2bf87e]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-6b2bf87e]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-6b2bf87e]{min-height:0}.error-list[data-v-6b2bf87e]{list-style-position:inside}.error-list [data-v-6b2bf87e]::marker{margin:0;padding:0}.error-alert-content[data-v-6b2bf87e]{background-color:var(--error-background, #fff5f5);color:var(--error-color, #c92a2a);padding:1em}.error-link[data-v-6b2bf87e]{font-weight:700;position:relative;color:var(--error-color, #c92a2a);cursor:pointer}.error-link[data-v-6b2bf87e]:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(from var(--error-color, #c92a2a) r g b / .5)}.text-h6[data-v-6b2bf87e]{font-weight:700;font-size:1.25em}.error-message[data-v-6b2bf87e]{font-style:italic}.error-item[data-v-6b2bf87e]{margin-bottom:.5em;overflow:hidden}.error-item>div[data-v-6b2bf87e]{float:right;width:100%;max-width:calc(100% - 1.5em)}.container[data-v-6b2bf87e]{display:flex;gap:1.5em}.container svg[data-v-6b2bf87e]{width:3em}.container .single-error[data-v-6b2bf87e]{display:inline-block}')),document.head.appendChild(a),window.customElements){const e=window.customElements.define;window.customElements.define=function(i,t){const r=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(r&&r.call(this),this.shadowRoot){const o=document.createElement("style");o.appendChild(document.createTextNode('.v-enter-from[data-v-6b2bf87e],.v-leave-to[data-v-6b2bf87e]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-6b2bf87e],.v-leave-active[data-v-6b2bf87e]{display:grid;transition:all .15s}.v-enter-to[data-v-6b2bf87e],.v-leave-from[data-v-6b2bf87e]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-6b2bf87e]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-6b2bf87e]{min-height:0}.error-list[data-v-6b2bf87e]{list-style-position:inside}.error-list [data-v-6b2bf87e]::marker{margin:0;padding:0}.error-alert-content[data-v-6b2bf87e]{background-color:var(--error-background, #fff5f5);color:var(--error-color, #c92a2a);padding:1em}.error-link[data-v-6b2bf87e]{font-weight:700;position:relative;color:var(--error-color, #c92a2a);cursor:pointer}.error-link[data-v-6b2bf87e]:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(from var(--error-color, #c92a2a) r g b / .5)}.text-h6[data-v-6b2bf87e]{font-weight:700;font-size:1.25em}.error-message[data-v-6b2bf87e]{font-style:italic}.error-item[data-v-6b2bf87e]{margin-bottom:.5em;overflow:hidden}.error-item>div[data-v-6b2bf87e]{float:right;width:100%;max-width:calc(100% - 1.5em)}.container[data-v-6b2bf87e]{display:flex;gap:1.5em}.container svg[data-v-6b2bf87e]{width:3em}.container .single-error[data-v-6b2bf87e]{display:inline-block}')),this.shadowRoot.appendChild(o)}},e.call(window.customElements,i,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import r from "./vue-components.es33.js";
-
-import o from "./vue-components.es35.js";
-const m = /* @__PURE__ */ o(r, [["__scopeId", "data-v-6b2bf87e"]]);
+import { defineComponent as O, computed as j, createElementBlock as M, openBlock as _, Fragment as E, renderList as A, renderSlot as F, createVNode as g, unref as h, mergeProps as k } from "vue";
+import { Order as l, pipe as v, Array as u } from "effect-app";
+const I = /* @__PURE__ */ O({
+  __name: "OmegaAutoGen",
+  props: {
+    form: {},
+    pick: {},
+    omit: {},
+    labelMap: { type: Function },
+    filterMap: { type: Function },
+    order: {},
+    sort: {}
+  },
+  setup(i) {
+    const p = (e) => (r) => Object.fromEntries(
+      Object.entries(r).map(([t, o]) => [t, e(o, t)])
+    ), a = (e) => (r) => Object.fromEntries(
+      Object.entries(r).filter(([t, o]) => e(o, t))
+    ), m = (e) => (r) => Object.entries(r).reduce(
+      (t, [o, c]) => {
+        const s = e(c, o);
+        return s !== !1 && (t[o] = s), t;
+      },
+      {}
+    ), n = i, f = (e, r) => {
+      const t = r?.indexOf(e) ?? -1;
+      return t === -1 ? Number.MAX_SAFE_INTEGER : t;
+    }, d = l.mapInput(
+      l.number,
+      (e) => f(e.name, n.order || [])
+    ), b = j(
+      () => v(
+        n.form.meta,
+        // include / exclude
+        a(
+          (e, r) => n.pick ? n.pick.includes(r) && !n.omit?.includes(r) : !n.omit?.includes(r)
+        ),
+        (e) => e,
+        // labelMap and adding name
+        p((e, r) => ({
+          name: r,
+          label: n.labelMap?.(r) || r,
+          ...e
+        })),
+        // filterMap
+        n.filterMap ? m((e) => {
+          const r = n.filterMap?.(e.name, e);
+          return r === void 0 || r === !0 ? e : r;
+        }) : (e) => e,
+        // transform to array
+        (e) => Object.values(e),
+        // order
+        u.sort(d),
+        // sort
+        n.sort ? u.sort(n.sort) : (e) => e
+      )
+    );
+    return (e, r) => (_(!0), M(E, null, A(b.value, ({ name: t, label: o, ...c }) => F(e.$slots, "default", {
+      child: { name: t, label: o, ...c }
+    }, () => [
+      g(h(i.form).Input, k({
+        name: t,
+        label: o
+      }, { ref_for: !0 }, c), null, 16, ["name", "label"])
+    ])), 256));
+  }
+});
 export {
-  m as default
+  I as default
 };

package/dist/vue-components.es21.js

@@ -1,8 +1,8 @@
-(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.appendChild(document.createTextNode("fieldset[data-v-8c9cb27c]{display:contents}fieldset[disabled][data-v-8c9cb27c]>*{pointer-events:none}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(o,t){const d=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(d&&d.call(this),this.shadowRoot){const c=document.createElement("style");c.appendChild(document.createTextNode("fieldset[data-v-8c9cb27c]{display:contents}fieldset[disabled][data-v-8c9cb27c]>*{pointer-events:none}")),this.shadowRoot.appendChild(c)}},e.call(window.customElements,o,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import o from "./vue-components.es36.js";
+(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");if(a.appendChild(document.createTextNode('.v-enter-from[data-v-6b2bf87e],.v-leave-to[data-v-6b2bf87e]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-6b2bf87e],.v-leave-active[data-v-6b2bf87e]{display:grid;transition:all .15s}.v-enter-to[data-v-6b2bf87e],.v-leave-from[data-v-6b2bf87e]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-6b2bf87e]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-6b2bf87e]{min-height:0}.error-list[data-v-6b2bf87e]{list-style-position:inside}.error-list [data-v-6b2bf87e]::marker{margin:0;padding:0}.error-alert-content[data-v-6b2bf87e]{background-color:var(--error-background, #fff5f5);color:var(--error-color, #c92a2a);padding:1em}.error-link[data-v-6b2bf87e]{font-weight:700;position:relative;color:var(--error-color, #c92a2a);cursor:pointer}.error-link[data-v-6b2bf87e]:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(from var(--error-color, #c92a2a) r g b / .5)}.text-h6[data-v-6b2bf87e]{font-weight:700;font-size:1.25em}.error-message[data-v-6b2bf87e]{font-style:italic}.error-item[data-v-6b2bf87e]{margin-bottom:.5em;overflow:hidden}.error-item>div[data-v-6b2bf87e]{float:right;width:100%;max-width:calc(100% - 1.5em)}.container[data-v-6b2bf87e]{display:flex;gap:1.5em}.container svg[data-v-6b2bf87e]{width:3em}.container .single-error[data-v-6b2bf87e]{display:inline-block}')),document.head.appendChild(a),window.customElements){const e=window.customElements.define;window.customElements.define=function(i,t){const r=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(r&&r.call(this),this.shadowRoot){const o=document.createElement("style");o.appendChild(document.createTextNode('.v-enter-from[data-v-6b2bf87e],.v-leave-to[data-v-6b2bf87e]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-6b2bf87e],.v-leave-active[data-v-6b2bf87e]{display:grid;transition:all .15s}.v-enter-to[data-v-6b2bf87e],.v-leave-from[data-v-6b2bf87e]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-6b2bf87e]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-6b2bf87e]{min-height:0}.error-list[data-v-6b2bf87e]{list-style-position:inside}.error-list [data-v-6b2bf87e]::marker{margin:0;padding:0}.error-alert-content[data-v-6b2bf87e]{background-color:var(--error-background, #fff5f5);color:var(--error-color, #c92a2a);padding:1em}.error-link[data-v-6b2bf87e]{font-weight:700;position:relative;color:var(--error-color, #c92a2a);cursor:pointer}.error-link[data-v-6b2bf87e]:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(from var(--error-color, #c92a2a) r g b / .5)}.text-h6[data-v-6b2bf87e]{font-weight:700;font-size:1.25em}.error-message[data-v-6b2bf87e]{font-style:italic}.error-item[data-v-6b2bf87e]{margin-bottom:.5em;overflow:hidden}.error-item>div[data-v-6b2bf87e]{float:right;width:100%;max-width:calc(100% - 1.5em)}.container[data-v-6b2bf87e]{display:flex;gap:1.5em}.container svg[data-v-6b2bf87e]{width:3em}.container .single-error[data-v-6b2bf87e]{display:inline-block}')),this.shadowRoot.appendChild(o)}},e.call(window.customElements,i,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import r from "./vue-components.es33.js";
 
-import m from "./vue-components.es35.js";
-const a = /* @__PURE__ */ m(o, [["__scopeId", "data-v-8c9cb27c"]]);
+import o from "./vue-components.es35.js";
+const m = /* @__PURE__ */ o(r, [["__scopeId", "data-v-6b2bf87e"]]);
 export {
-  a as default
+  m as default
 };

package/dist/vue-components.es22.js

@@ -1,5 +1,8 @@
-import { TraceAPI as r } from "./vue-components.es52.js";
-var t = r.getInstance();
+(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.appendChild(document.createTextNode("fieldset[data-v-8c9cb27c]{display:contents}fieldset[disabled][data-v-8c9cb27c]>*{pointer-events:none}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(o,t){const d=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(d&&d.call(this),this.shadowRoot){const c=document.createElement("style");c.appendChild(document.createTextNode("fieldset[data-v-8c9cb27c]{display:contents}fieldset[disabled][data-v-8c9cb27c]>*{pointer-events:none}")),this.shadowRoot.appendChild(c)}},e.call(window.customElements,o,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import o from "./vue-components.es36.js";
+
+import m from "./vue-components.es35.js";
+const a = /* @__PURE__ */ m(o, [["__scopeId", "data-v-8c9cb27c"]]);
 export {
-  t as trace
+  a as default
 };

package/dist/vue-components.es23.js

@@ -1,5 +1,5 @@
-import { ContextAPI as t } from "./vue-components.es51.js";
-var o = t.getInstance();
+import { TraceAPI as r } from "./vue-components.es52.js";
+var t = r.getInstance();
 export {
-  o as context
+  t as trace
 };

package/dist/vue-components.es24.js

@@ -1,4 +1,5 @@
-import f from "./vue-components.es6.js";
+import { ContextAPI as t } from "./vue-components.es51.js";
+var o = t.getInstance();
 export {
-  f as default
+  o as context
 };

package/dist/vue-components.es25.js

@@ -1,4 +1,4 @@
-import f from "./vue-components.es7.js";
+import f from "./vue-components.es6.js";
 export {
   f as default
 };

package/dist/vue-components.es26.js

@@ -1,4 +1,4 @@
-import f from "./vue-components.es8.js";
+import f from "./vue-components.es7.js";
 export {
   f as default
 };

package/dist/vue-components.es27.js

@@ -1,4 +1,4 @@
-import f from "./vue-components.es9.js";
+import f from "./vue-components.es8.js";
 export {
   f as default
 };

package/dist/vue-components.es28.js

@@ -1,19 +1,4 @@
-function c(t) {
-  return { all: t = t || /* @__PURE__ */ new Map(), on: function(e, f) {
-    var i = t.get(e);
-    i ? i.push(f) : t.set(e, [f]);
-  }, off: function(e, f) {
-    var i = t.get(e);
-    i && (f ? i.splice(i.indexOf(f) >>> 0, 1) : t.set(e, []));
-  }, emit: function(e, f) {
-    var i = t.get(e);
-    i && i.slice().map(function(a) {
-      a(f);
-    }), (i = t.get("*")) && i.slice().map(function(a) {
-      a(e, f);
-    });
-  } };
-}
+import f from "./vue-components.es9.js";
 export {
-  c as default
+  f as default
 };

package/dist/vue-components.es29.js

@@ -1,13 +1,19 @@
-import { onMounted as e, onUnmounted as u } from "vue";
-function p(t) {
-  let n;
-  e(() => {
-    const o = t();
-    o && (n = o);
-  }), u(() => {
-    n && n();
-  });
+function c(t) {
+  return { all: t = t || /* @__PURE__ */ new Map(), on: function(e, f) {
+    var i = t.get(e);
+    i ? i.push(f) : t.set(e, [f]);
+  }, off: function(e, f) {
+    var i = t.get(e);
+    i && (f ? i.splice(i.indexOf(f) >>> 0, 1) : t.set(e, []));
+  }, emit: function(e, f) {
+    var i = t.get(e);
+    i && i.slice().map(function(a) {
+      a(f);
+    }), (i = t.get("*")) && i.slice().map(function(a) {
+      a(e, f);
+    });
+  } };
 }
 export {
-  p as onMountedWithCleanup
+  c as default
 };

package/dist/vue-components.es31.js

@@ -1,4 +1,4 @@
-import f from "./vue-components.es18.js";
+import f from "./vue-components.es19.js";
 export {
   f as default
 };

package/dist/vue-components.es32.js

@@ -1,4 +1,4 @@
-import f from "./vue-components.es19.js";
+import f from "./vue-components.es20.js";
 export {
   f as default
 };

package/dist/vue-components.es5.js

@@ -1,6 +1,6 @@
 import { defineComponent as v, mergeModels as C, useModel as k, useSlots as V, computed as _, resolveComponent as g, createBlock as y, openBlock as B, unref as a, createSlots as E, withCtx as u, renderSlot as d, renderList as M, normalizeProps as S, guardReactiveProps as w } from "vue";
 import { useOnClose as L } from "./vue-components.es11.js";
-import { onMountedWithCleanup as h } from "./vue-components.es29.js";
+import { onMountedWithCleanup as h } from "./vue-components.es16.js";
 const z = /* @__PURE__ */ v({
   __name: "Dialog",
   props: /* @__PURE__ */ C({

package/dist/vue-components.es6.js

@@ -1,8 +1,8 @@
-import { defineComponent as F, computed as l, useAttrs as A, inject as M, createBlock as i, openBlock as f, resolveDynamicComponent as S, withCtx as u, createCommentVNode as w, mergeProps as I, unref as L, createSlots as P, renderSlot as c, normalizeProps as d, guardReactiveProps as v } from "vue";
-import { useIntl as j } from "./vue-components.es3.js";
-import { generateInputStandardSchemaFromFieldMeta as B } from "./vue-components.es12.js";
-import E from "./vue-components.es7.js";
-import { useErrorLabel as N } from "./vue-components.es10.js";
+import { defineComponent as F, computed as o, useAttrs as $, inject as k, createBlock as u, openBlock as i, resolveDynamicComponent as A, withCtx as m, createCommentVNode as M, mergeProps as S, unref as w, createSlots as I, renderSlot as f, normalizeProps as c, guardReactiveProps as d } from "vue";
+import { useIntl as P } from "./vue-components.es3.js";
+import { generateInputStandardSchemaFromFieldMeta as j } from "./vue-components.es12.js";
+import B from "./vue-components.es7.js";
+import { useErrorLabel as E } from "./vue-components.es10.js";
 const V = /* @__PURE__ */ F({
   inheritAttrs: !1,
   __name: "OmegaInput",
@@ -13,52 +13,46 @@ const V = /* @__PURE__ */ F({
     name: {},
     inputClass: {}
   },
-  setup(a) {
-    const e = a, n = l(() => e.name), p = A(), g = l(() => {
+  setup(t) {
+    const e = t, l = o(() => e.name), v = $(), p = o(() => {
       if (e.inputClass !== null)
-        return e.inputClass !== void 0 ? e.inputClass : p.class;
-    }), s = M(
+        return e.inputClass !== void 0 ? e.inputClass : v.class;
+    }), n = k(
       "getMetaFromArray",
       null
-    ), o = l(() => s?.value && s.value(e.name) ? s.value(n.value) : e.form.meta[n.value]), $ = l(() => {
-      const t = o.value;
-      if (!t) return n.value;
-      const r = t;
-      return `${n.value}-${r.type}-${r.minLength ?? ""}-${r.maxLength ?? ""}-${r.minimum ?? ""}-${r.maximum ?? ""}`;
-    }), { trans: C } = j(), b = l(() => {
-      if (!o.value)
+    ), r = o(() => n?.value && n.value(e.name) ? n.value(l.value) : e.form.meta[l.value]), { trans: g } = P(), C = o(() => {
+      if (!r.value)
         throw console.log(e.name, Object.keys(e.form.meta), e.form.meta), new Error("Meta is undefined");
-      return B(o.value, C);
-    }), h = N(e.form);
-    return (t, r) => (f(), i(S(a.form.Field), {
-      key: $.value,
-      name: a.name,
+      return j(r.value, g);
+    }), b = E(e.form);
+    return (a, N) => (i(), u(A(t.form.Field), {
+      name: t.name,
       validators: {
-        onChange: b.value,
-        ...a.validators
+        onChange: C.value,
+        ...t.validators
       }
     }, {
-      default: u(({ field: y, state: k }) => [
-        o.value ? (f(), i(E, I({ key: 0 }, { ...t.$attrs, ...t.$props, inputClass: g.value }, {
-          field: y,
-          state: k,
-          register: a.form.registerField,
-          label: a.label ?? L(h)(n.value),
-          meta: o.value
-        }), P({
-          default: u((m) => [
-            c(t.$slots, "default", d(v(m)))
+      default: m(({ field: h, state: y }) => [
+        r.value ? (i(), u(B, S({ key: 0 }, { ...a.$attrs, ...a.$props, inputClass: p.value }, {
+          field: h,
+          state: y,
+          register: t.form.registerField,
+          label: t.label ?? w(b)(l.value),
+          meta: r.value
+        }), I({
+          default: m((s) => [
+            f(a.$slots, "default", c(d(s)))
           ]),
           _: 2
         }, [
-          t.$slots.label ? {
+          a.$slots.label ? {
             name: "label",
-            fn: u((m) => [
-              c(t.$slots, "label", d(v(m)))
+            fn: m((s) => [
+              f(a.$slots, "label", c(d(s)))
             ]),
             key: "0"
           } : void 0
-        ]), 1040, ["field", "state", "register", "label", "meta"])) : w("", !0)
+        ]), 1040, ["field", "state", "register", "label", "meta"])) : M("", !0)
       ]),
       _: 3
     }, 8, ["name", "validators"]));

package/dist/vue-components.es7.js

@@ -1,9 +1,9 @@
 (function(){"use strict";try{if(typeof document<"u"){var i=document.createElement("style");if(i.appendChild(document.createTextNode(".omega-input .v-input__details:has(.v-messages:empty){grid-template-rows:0fr;transition:all .2s}.omega-input .v-messages:empty{min-height:0}.omega-input .v-input__details:has(.v-messages){transition:all .2s;overflow:hidden;min-height:0;display:grid;grid-template-rows:1fr}.omega-input .v-messages{transition:all .2s}.omega-input .v-messages>*{transition-duration:0s!important}.omega-input [role=alert]:has(.v-messages:empty){padding:0}.omega-input .v-btn{cursor:pointer;width:auto;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),document.head.appendChild(i),window.customElements){const e=window.customElements.define;window.customElements.define=function(s,t){const n=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(n&&n.call(this),this.shadowRoot){const a=document.createElement("style");a.appendChild(document.createTextNode(".omega-input .v-input__details:has(.v-messages:empty){grid-template-rows:0fr;transition:all .2s}.omega-input .v-messages:empty{min-height:0}.omega-input .v-input__details:has(.v-messages){transition:all .2s;overflow:hidden;min-height:0;display:grid;grid-template-rows:1fr}.omega-input .v-messages{transition:all .2s}.omega-input .v-messages>*{transition-duration:0s!important}.omega-input [role=alert]:has(.v-messages:empty){padding:0}.omega-input .v-btn{cursor:pointer;width:auto;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),this.shadowRoot.appendChild(a)}},e.call(window.customElements,s,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import { defineComponent as $, computed as n, getCurrentInstance as N, useAttrs as S, useSlots as k, useId as q, renderSlot as u, normalizeProps as s, guardReactiveProps as d, createElementVNode as B, normalizeClass as w, createBlock as I, createCommentVNode as L, unref as A, openBlock as F, mergeProps as O, createSlots as R, withCtx as V } from "vue";
-import { useStore as z } from "@tanstack/vue-form";
+import { defineComponent as N, computed as n, getCurrentInstance as k, useAttrs as q, useSlots as B, useId as S, renderSlot as d, normalizeProps as s, guardReactiveProps as p, createElementVNode as w, normalizeClass as F, createBlock as I, createCommentVNode as L, unref as A, openBlock as O, mergeProps as R, createSlots as V, withCtx as z } from "vue";
+import { useStore as f } from "@tanstack/vue-form";
 import T from "./vue-components.es38.js";
 
-const H = /* @__PURE__ */ $({
+const H = /* @__PURE__ */ N({
   inheritAttrs: !1,
   __name: "OmegaInternalInput",
   props: {
@@ -18,25 +18,27 @@ const H = /* @__PURE__ */ $({
     register: {},
     options: { default: void 0 }
   },
-  setup(p) {
-    const e = p, l = n(() => e.required ?? e?.meta?.required), f = N()?.appContext.components.VTextField, c = S(), g = k(), v = n(() => {
-      const { class: t, ...a } = c;
+  setup(c) {
+    const e = c, l = n(() => e.required ?? e?.meta?.required), g = k()?.appContext.components.VTextField, v = q(), y = B(), h = n(() => {
+      const { class: t, ...a } = v;
       return a;
-    }), i = q(), y = e.field, h = z(y.store, (t) => t), b = n(() => e.type ? e.type : e.meta?.type === "string" ? e.meta.format === "email" ? "email" : "string" : e.meta?.type || "unknown");
+    }), i = S(), o = e.field;
+    f(o.store, (t) => t);
+    const b = f(o.form.store, (t) => t.fieldMeta), C = n(() => e.type ? e.type : e.meta?.type === "string" ? e.meta.format === "email" ? "email" : "string" : e.meta?.type || "unknown");
     e.register(n(() => ({ name: e.field.name, label: e.label, id: i })));
-    const C = n(() => h.value.meta.errors ?? []), o = n(
+    const x = n(() => b.value[e.field.name]?.errors ?? []), m = n(
       () => (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        C.value.map((t) => t?.message).filter(Boolean)
+        x.value.map((t) => t?.message).filter(Boolean)
       )
-    ), x = (t) => t == null || t === !1 || t === "" || Number.isNaN(t), _ = (t) => {
-      x(t) && e.meta?.type !== "boolean" && e.meta?.nullableOrUndefined ? e.field.handleChange(
+    ), M = (t) => t == null || t === !1 || t === "" || Number.isNaN(t), _ = (t) => {
+      M(t) && e.meta?.type !== "boolean" && e.meta?.nullableOrUndefined ? e.field.handleChange(
         e.meta.nullableOrUndefined === "undefined" ? void 0 : null
       ) : e.field.handleChange(t), e.field.setMeta((a) => ({ ...a, errorMap: { ...a.errorMap, onSubmit: void 0 } }));
-    }, M = (t) => {
+    }, P = (t) => {
       const a = {
-        get(E, P, W) {
-          return P === "handleChange" ? _ : Reflect.get(...arguments);
+        get(E, $, W) {
+          return $ === "handleChange" ? _ : Reflect.get(...arguments);
         }
       };
       return new Proxy(t, a);
@@ -48,26 +50,26 @@ const H = /* @__PURE__ */ $({
         maxLength: e.meta?.type === "string" && e.meta?.maxLength,
         max: e.meta?.type === "number" && (e.meta?.maximum ?? (typeof e.meta?.exclusiveMaximum == "number" && e.meta.exclusiveMaximum - 1)),
         min: e.meta?.type === "number" && (e.meta?.minimum ?? (typeof e.meta?.exclusiveMinimum == "number" && e.meta.exclusiveMinimum + 1)),
-        errorMessages: o.value,
-        error: !!o.value.length,
-        type: b.value,
+        errorMessages: m.value,
+        error: !!m.value.length,
+        type: C.value,
         // Only add asterisk if label slot is not provided (slot has full control)
-        label: g.label ? e.label : `${e.label}${l.value ? " *" : ""}`,
+        label: y.label ? e.label : `${e.label}${l.value ? " *" : ""}`,
         options: e.options,
         inputClass: e.inputClass
       },
       state: e.state,
-      field: M(e.field)
+      field: P(e.field)
     }));
-    return (t, a) => u(t.$slots, "default", s(d({ ...r.value.inputProps, field: r.value.field, state: r.value.state })), () => [
-      B("div", {
-        class: w(t.$attrs.class)
+    return (t, a) => d(t.$slots, "default", s(p({ ...r.value.inputProps, field: r.value.field, state: r.value.state })), () => [
+      w("div", {
+        class: F(t.$attrs.class)
       }, [
-        A(f) ? (F(), I(T, s(O({ key: 0 }, { ...v.value, ...r.value, class: e.inputClass })), R({ _: 2 }, [
+        A(g) ? (O(), I(T, s(R({ key: 0 }, { ...h.value, ...r.value, class: e.inputClass })), V({ _: 2 }, [
           t.$slots.label ? {
             name: "label",
-            fn: V((m) => [
-              u(t.$slots, "label", s(d(m)))
+            fn: z((u) => [
+              d(t.$slots, "label", s(p(u)))
             ]),
             key: "0"
           } : void 0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "effect": "^3.19.3",
@@ -53,8 +53,8 @@
     "highlight.js": "^11.11.1",
     "mitt": "^3.0.1",
     "vue3-highlightjs": "^1.0.5",
-    "effect-app": "3.15.1",
-    "@effect-app/vue": "2.93.6"
+    "@effect-app/vue": "2.93.6",
+    "effect-app": "3.15.1"
   },
   "scripts": {
     "build": "pnpm build:run",

package/src/components/OmegaForm/OmegaInput.vue

@@ -1,7 +1,6 @@
 <template>
   <component
     :is="form.Field"
-    :key="fieldKey"
     :name="name"
     :validators="{
       onChange: schema,
@@ -82,18 +81,6 @@ const meta = computed(() => {
   return props.form.meta[propsName.value]
 })
 
-// Key to force Field re-mount when meta type changes (for TaggedUnion support)
-const fieldKey = computed(() => {
-  const m = meta.value
-  if (!m) return propsName.value
-  // Include type and key constraints in the key so Field re-mounts when validation rules change
-  // Cast to any since not all FieldMeta variants have these properties
-  const fm = m as any
-  return `${propsName.value}-${fm.type}-${fm.minLength ?? ""}-${fm.maxLength ?? ""}-${fm.minimum ?? ""}-${
-    fm.maximum ?? ""
-  }`
-})
-
 // Call useIntl during setup to avoid issues when computed re-evaluates
 const { trans } = useIntl()
 

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -84,6 +84,9 @@ const fieldApi = props.field
 
 const fieldState = useStore(fieldApi.store, (state) => state)
 
+// Get errors from form-level fieldMeta (persists across Field re-mounts)
+const formFieldMeta = useStore(fieldApi.form.store, (state) => state.fieldMeta)
+
 const fieldType = computed(() => {
   if (props.type) return props.type
   if (props.meta?.type === "string") {
@@ -95,8 +98,13 @@ const fieldType = computed(() => {
 
 props.register(computed(() => ({ name: props.field.name, label: props.label, id })))
 
-// workaround strange tanstack form issue where the errors key becomes undefined ???
-const _errors = computed(() => fieldState.value.meta.errors ?? [])
+// Get errors from form-level fieldMeta instead of field-level state
+// This ensures errors persist when Field components re-mount due to :key changes
+const _errors = computed(() => {
+  const fieldMeta = formFieldMeta.value[props.field.name] as any
+  // Treat errors as an array (like useOmegaForm does)
+  return fieldMeta?.errors ?? []
+})
 const errors = computed(() =>
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   _errors.value.map((e: any) => e?.message).filter(Boolean)

package/src/components/OmegaForm/useOmegaForm.ts

@@ -962,8 +962,18 @@ export const useOmegaForm = <
     // /** @experimental */
     handleSubmitEffect,
     registerField: (field: ComputedRef<{ name: string; label: string; id: string }>) => {
-      watch(field, (f) => fieldMap.value.set(f.name, { label: f.label, id: f.id }), { immediate: true })
-      onUnmounted(() => fieldMap.value.delete(field.value.name)) // todo; perhap only when owned (id match)
+      watch(field, (f) => {
+        fieldMap.value.set(f.name, { label: f.label, id: f.id })
+      }, { immediate: true })
+      onUnmounted(() => {
+        // Only delete if we still own this entry (id matches)
+        // This prevents old components from deleting entries registered by new components
+        // during re-mount transitions (e.g., when :key changes)
+        const currentEntry = fieldMap.value.get(field.value.name)
+        if (currentEntry?.id === field.value.id) {
+          fieldMap.value.delete(field.value.name)
+        }
+      })
     }
   })
 

package/src/components/OmegaForm/useRegisterField.ts

@@ -5,7 +5,9 @@ const Key = Symbol("injected") as InjectionKey<Map<string, { label: string; id:
 
 export const useRegisterField = (field: ComputedRef<{ name: string; label: string; id: string }>) => {
   const map = injectCertain(Key)
-  watch(field, (f) => map.set(f.name, { label: f.label, id: f.id }), { immediate: true })
+  watch(field, (f) => {
+    map.set(f.name, { label: f.label, id: f.id })
+  }, { immediate: true })
   onUnmounted(() => map.delete(field.value.name)) // todo; perhap only when owned
 }