@effect-app/vue-components 4.0.0-beta.22 → 4.0.0-beta.221

package/dist/vue-components94.es.js

@@ -0,0 +1,44 @@
+import { Number as e, mapInput as t } from "./vue-components27.es.js";
+import { Fragment as n, computed as r, createElementBlock as i, createVNode as a, defineComponent as o, mergeProps as s, openBlock as c, renderList as l, renderSlot as u, unref as d } from "vue";
+//#region src/components/OmegaForm/OmegaAutoGen.vue?vue&type=script&setup=true&lang.ts
+var f = /* @__PURE__ */ o({
+	__name: "OmegaAutoGen",
+	props: {
+		form: {},
+		pick: {},
+		omit: {},
+		labelMap: { type: Function },
+		filterMap: { type: Function },
+		order: {},
+		sort: {}
+	},
+	setup(o) {
+		let f = (e) => (t) => Object.fromEntries(Object.entries(t).map(([t, n]) => [t, e(n, t)])), p = (e) => (t) => Object.fromEntries(Object.entries(t).filter(([t, n]) => e(n, t))), m = (e) => (t) => Object.entries(t).reduce((t, [n, r]) => {
+			let i = e(r, n);
+			return i !== !1 && (t[n] = i), t;
+		}, {}), h = o, g = (e, t) => {
+			let n = t?.indexOf(e) ?? -1;
+			return n === -1 ? 2 ** 53 - 1 : n;
+		}, _ = t(e, (e) => g(e.name, h.order || [])), v = r(() => {
+			let e = p((e, t) => !!e && (h.pick ? h.pick.includes(t) && !h.omit?.includes(t) : !h.omit?.includes(t)))(h.form.meta), t = f((e, t) => ({
+				name: t,
+				label: h.labelMap?.(t) || t,
+				...e
+			}))(e), n = h.filterMap ? m((e) => {
+				let t = h.filterMap?.(e.name, e);
+				return t === void 0 || t === !0 ? e : t;
+			})(t) : t, r = [...Object.values(n)].sort(_);
+			return h.sort ? r.sort(h.sort) : r;
+		});
+		return (e, t) => (c(!0), i(n, null, l(v.value, ({ name: t, label: n, ...r }) => u(e.$slots, "default", { child: {
+			name: t,
+			label: n,
+			...r
+		} }, () => [a(d(o.form).Input, s({
+			name: t,
+			label: n
+		}, { ref_for: !0 }, r), null, 16, ["name", "label"])])), 256));
+	}
+});
+//#endregion
+export { f as default };

package/dist/vue-components95.es.js

@@ -0,0 +1,5 @@
+import e from "./vue-components94.es.js";
+//#region src/components/OmegaForm/OmegaAutoGen.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/vue-components96.es.js

@@ -0,0 +1,84 @@
+import { useIntl as e } from "./vue-components6.es.js";
+import { Fragment as t, Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, getCurrentInstance as u, guardReactiveProps as d, normalizeClass as f, normalizeProps as p, openBlock as m, renderList as h, renderSlot as g, resolveDynamicComponent as _, toDisplayString as v, unref as y, withCtx as b } from "vue";
+//#region src/components/OmegaForm/OmegaErrorsInternal.vue?vue&type=script&setup=true&lang.ts
+var x = {
+	key: 0,
+	class: "error-alert"
+}, S = { class: "container" }, C = {
+	key: 0,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg"
+}, w = { class: "text-h6" }, T = {
+	key: 0,
+	class: "error-list"
+}, E = ["for"], D = { key: 1 }, O = /* @__PURE__ */ l({
+	__name: "OmegaErrorsInternal",
+	props: {
+		generalErrors: {},
+		errors: {},
+		hideErrorDetails: { type: Boolean }
+	},
+	setup(l) {
+		let O = u()?.appContext.components.VAlert, k = l, { trans: A } = e(), j = r(() => k.generalErrors ? k.generalErrors.filter((e) => !!e).flatMap((e) => Object.values(e).filter((e) => !!e).flatMap((e) => e.filter((e) => !!e?.message).map((e) => e.message))) : []);
+		return (e, r) => (m(), i(n, null, {
+			default: b(() => [l.errors.length || j.value.length ? (m(), o("div", x, [g(e.$slots, "default", p(d({
+				errors: l.errors,
+				showedGeneralErrors: j.value
+			})), () => [(m(), i(_(y(O) ? "v-alert" : "div"), {
+				class: f([y(O) ? "mb-4" : "error-alert-content", "mb-4"]),
+				type: "error",
+				variant: "tonal",
+				role: "alert",
+				"aria-live": "polite"
+			}, {
+				default: b(() => [s("div", S, [g(e.$slots, "icon", {}, () => [y(O) ? a("", !0) : (m(), o("svg", C, [...r[0] ||= [
+					s("path", {
+						d: "M16 2H8L2 8V16L8 22H16L22 16V8L16 2Z",
+						stroke: "currentColor",
+						"stroke-width": "2",
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round"
+					}, null, -1),
+					s("path", {
+						d: "M12 8V12",
+						stroke: "currentColor",
+						"stroke-width": "2",
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round"
+					}, null, -1),
+					s("path", {
+						d: "M12 16.0195V16",
+						stroke: "currentColor",
+						"stroke-width": "2",
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round"
+					}, null, -1)
+				]]))], !0), s("div", null, [s("div", w, v(y(A)("form.includes_error")) + ": ", 1), l.errors.length ? (m(), o("ul", T, [(m(!0), o(t, null, h(l.errors, (e) => (m(), o("li", {
+					key: e.inputId,
+					class: "error-item"
+				}, [s("div", null, [
+					s("label", {
+						for: e.inputId,
+						class: "error-link"
+					}, v(e.label), 9, E),
+					r[1] ||= c(" " + v(" ") + " ", -1),
+					l.hideErrorDetails ? a("", !0) : (m(), o("div", {
+						key: 0,
+						class: f(["error-message", e.errors.length < 2 && "single-error"])
+					}, [(m(), i(_(e.errors.length > 1 ? "ul" : "div"), { class: "error-list" }, {
+						default: b(() => [(m(!0), o(t, null, h(e.errors, (t) => (m(), i(_(e.errors.length > 1 ? "li" : "span"), { key: t }, {
+							default: b(() => [c(v(t), 1)]),
+							_: 2
+						}, 1024))), 128))]),
+						_: 2
+					}, 1024))], 2))
+				])]))), 128))])) : (m(), o("span", D, v(j.value[0]), 1))])])]),
+				_: 3
+			}, 8, ["class"]))], !0)])) : a("", !0)]),
+			_: 3
+		}));
+	}
+});
+//#endregion
+export { O as default };

package/dist/vue-components98.es.js

@@ -0,0 +1,8 @@
+//#region \0plugin-vue:export-helper
+var e = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+};
+//#endregion
+export { e as default };

package/dist/vue-components99.es.js

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

package/package.json

@@ -1,39 +1,39 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "4.0.0-beta.22",
+  "version": "4.0.0-beta.221",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
-    "effect": "^4.0.0-beta.36",
-    "intl-messageformat": "^11.1.2",
+    "effect": "^4.0.0-beta.62",
+    "intl-messageformat": "^11.2.4",
     "mdi-js": "^1.0.1",
     "primeflex": "^4.0.0",
     "primeicons": "^7.0.0",
-    "primevue": "^4.5.4",
-    "vue": "^3.5.29",
-    "vuetify": "^4.0.1"
+    "primevue": "^4.5.5",
+    "vue": "^3.5.34",
+    "vuetify": "^4.0.6"
   },
   "devDependencies": {
-    "@storybook/vue3": "^10.2.15",
-    "@storybook/vue3-vite": "^10.2.15",
-    "@types/node": "^25.3.3",
-    "@vitejs/plugin-vue": "^6.0.4",
-    "@vue/test-utils": "^2.4.6",
-    "@vueuse/core": "^14.2.1",
-    "dprint": "^0.52.0",
-    "jsdom": "^28.1.0",
+    "@storybook/vue3": "^10.3.6",
+    "@storybook/vue3-vite": "^10.3.6",
+    "@types/node": "^25.6.0",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vue/test-utils": "^2.4.10",
+    "@vueuse/core": "^14.3.0",
+    "jsdom": "^29.1.1",
     "rimraf": "^6.1.3",
-    "sass": "^1.97.3",
-    "storybook": "^10.2.15",
-    "typescript": "~5.9.3",
-    "vite": "^7.3.1",
-    "vite-plugin-css-injected-by-js": "^4.0.1",
+    "sass": "^1.99.0",
+    "storybook": "^10.3.6",
+    "storybook-vue3-router": "^7.0.0",
+    "typescript": "~6.0.3",
+    "vite": "^8.0.10",
+    "vite-plugin-css-injected-by-js": "^5.0.1",
     "vitepress": "^1.6.4",
-    "vitest": "^4.0.18",
-    "vue-router": "^5.0.3",
+    "vitest": "^4.1.5",
+    "vue-router": "^5.0.6",
     "vue-toastification": "^2.0.0-rc.5",
-    "vue-tsc": "^3.2.5",
-    "vuetify": "^4.0.1",
-    "@effect-app/eslint-shared-config": "0.5.7-beta.2"
+    "vue-tsc": "^3.2.8",
+    "vuetify": "^4.0.6",
+    "@effect-app/eslint-shared-config": "0.6.0-beta.25"
   },
   "files": [
     "src",
@@ -52,13 +52,13 @@
     }
   },
   "dependencies": {
-    "@opentelemetry/api": "^1.9.0",
+    "@opentelemetry/api": "^1.9.1",
     "@tanstack/vue-form": "^1.23.5",
     "highlight.js": "^11.11.1",
     "mitt": "^3.0.1",
     "vue3-highlightjs": "^1.0.5",
-    "@effect-app/vue": "4.0.0-beta.22",
-    "effect-app": "4.0.0-beta.22"
+    "@effect-app/vue": "4.0.0-beta.221",
+    "effect-app": "4.0.0-beta.221"
   },
   "scripts": {
     "check": "vue-tsc",
@@ -67,10 +67,10 @@
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:serve": "vitepress serve docs",
-    "lint": "NODE_OPTIONS=--max-old-space-size=8192 eslint src stories .storybook",
+    "lint": "oxlint --quiet --type-aware src stories && NODE_OPTIONS=--max-old-space-size=8192 ESLINT_TS=1 eslint --quiet src stories .storybook && pnpm exec dprint check --config ../../dprint.jsonc .",
     "ncu": "ncu",
     "clean": "rm -rf dist",
-    "lint-fix": "pnpm lint --fix",
+    "lint-fix": "oxlint --quiet --type-aware --fix src stories && NODE_OPTIONS=--max-old-space-size=8192 ESLINT_TS=1 eslint --quiet --fix src stories .storybook && pnpm exec dprint fmt --config ../../dprint.jsonc .",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "vitest",

package/src/components/CommandButton.vue

@@ -1,9 +1,10 @@
 <script
   setup
   lang="ts"
-  generic="I = never"
+  generic="I = never, RA = unknown, RE = unknown"
 >
-import type { CommandBase } from "@effect-app/vue"
+import type { CommandBase, Progress } from "@effect-app/vue/makeClient"
+import type * as AsyncResult from "effect/unstable/reactivity/AsyncResult"
 import { computed } from "vue"
 import type { VBtn } from "vuetify/components"
 
@@ -14,11 +15,11 @@ const props = defineProps<
   & (
     | {
       input: NoInfer<I>
-      command: CommandBase<I>
+      command: CommandBase<I, any, RA, RE>
       empty?: boolean
     }
     | {
-      command: CommandBase
+      command: CommandBase<any, any, RA, RE>
       input?: undefined
       empty?: boolean
     }
@@ -26,12 +27,32 @@ const props = defineProps<
   & {
     disabled?: ButtonProps["disabled"]
     title?: string // why isn't it part of VBtnProps??
+    mapProgress?: (result: AsyncResult.AsyncResult<RA, RE>) => Progress | undefined
   }
   & ButtonProps
 >()
 
 const isDisabled = computed(() => props.command.blocked || props.disabled)
 
+const resolvedProgress = computed(() => {
+  if (props.mapProgress) {
+    const result = props.command.result
+    return result !== undefined ? props.mapProgress(result) : undefined
+  }
+  return props.command.progress
+})
+
+const progressText = computed(() => {
+  const p = resolvedProgress.value
+  if (p === undefined) return undefined
+  return typeof p === "string" ? p : p.text
+})
+
+const progressPercentage = computed(() => {
+  const p = resolvedProgress.value
+  return typeof p === "object" && p !== null ? p.percentage : undefined
+})
+
 const handleClick = () => {
   // Block execution if button is disabled
   if (isDisabled.value) {
@@ -41,7 +62,9 @@ const handleClick = () => {
   const input = ("input" in props && props.input
     ? props.input
     : undefined) as unknown as I
-  ;(props.command.handle as any)(input)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- command.handle has a generic signature mismatched by erased input type
+  const handle = props.command.handle as any
+  handle(input)
 }
 </script>
 <script lang="ts">
@@ -60,13 +83,25 @@ export default {
     :class="{ 'v-btn--disabled': isDisabled }"
     @click="handleClick"
   >
+    <template
+      v-if="progressText !== undefined"
+      #loader
+    >
+      <v-progress-circular
+        :indeterminate="progressPercentage === undefined"
+        :model-value="progressPercentage"
+        size="20"
+        width="2"
+      />
+      <span class="ml-2">{{ progressText }}</span>
+    </template>
     <slot
       :loading="command.waiting"
       :disabled="isDisabled"
       :label="command.label"
       :title="title ?? command.action"
     >
-      <span>{{ command.label }}</span>
+      {{ command.label }}
     </slot>
   </v-btn>
   <v-btn
@@ -77,5 +112,18 @@ export default {
     :title="title ?? command.action"
     :class="{ 'v-btn--disabled': isDisabled }"
     @click="handleClick"
-  />
+  >
+    <template
+      v-if="progressText !== undefined"
+      #loader
+    >
+      <v-progress-circular
+        :indeterminate="progressPercentage === undefined"
+        :model-value="progressPercentage"
+        size="20"
+        width="2"
+      />
+      <span class="ml-2">{{ progressText }}</span>
+    </template>
+  </v-btn>
 </template>

package/src/components/OmegaForm/OmegaArray.vue

@@ -12,9 +12,7 @@
         :is="form.Field"
         v-for="(_, i) of items"
         :key="`${name}[${Number(i)}]`"
-        :name="// eslint-disable-next-line
-          `${name}[${Number(i)}]` as DeepKeys<From>
-        "
+        :name="`${name}[${Number(i)}]` as DeepKeys<From>"
       >
         <template #default="{ field: subField, state: subState }">
           <slot
@@ -46,7 +44,7 @@
 >
 import { type DeepKeys } from "@tanstack/vue-form"
 import { computed, onMounted, provide } from "vue"
-import { type OmegaArrayProps } from "./OmegaFormStuff"
+import { type OmegaArrayProps } from "./types"
 
 const props = defineProps<OmegaArrayProps<From, To, Name>>()
 

package/src/components/OmegaForm/OmegaAutoGen.vue

@@ -20,9 +20,10 @@
   Name extends DeepKeys<From>"
 >
 import { type DeepKeys } from "@tanstack/vue-form"
-import { Order } from "effect-app"
+import * as Order from "effect/Order"
 import { computed } from "vue"
-import { type FieldMeta, type FieldPath, type OmegaAutoGenMeta, type OmegaInputProps } from "./OmegaFormStuff"
+import { type FieldMeta } from "./meta/types"
+import { type FieldPath, type OmegaAutoGenMeta, type OmegaInputProps } from "./types"
 
 type NewMeta = OmegaAutoGenMeta<From, To, Name>
 

package/src/components/OmegaForm/OmegaErrorsInternal.vue

@@ -102,7 +102,7 @@
 import type { StandardSchemaV1Issue } from "@tanstack/vue-form"
 import { computed, getCurrentInstance } from "vue"
 import { useIntl } from "../../utils"
-import { type OmegaError } from "./OmegaFormStuff"
+import { type OmegaError } from "./types"
 
 const instance = getCurrentInstance()
 const vuetified = instance?.appContext.components["VAlert"]

package/src/components/OmegaForm/OmegaFormInput.vue

@@ -17,8 +17,8 @@
 import { type DeepKeys } from "@tanstack/vue-form"
 import { inject } from "vue"
 import type { MergedInputProps } from "./InputProps"
-import type { BaseProps, DefaultTypeProps, OmegaInputProps } from "./OmegaFormStuff"
 import OmegaInput from "./OmegaInput.vue"
+import type { BaseProps, DefaultTypeProps, OmegaInputProps } from "./types"
 import { OmegaFormKey } from "./useOmegaForm"
 
 const form = inject(OmegaFormKey) as unknown as OmegaInputProps<

package/src/components/OmegaForm/OmegaInput.vue

@@ -1,18 +1,14 @@
 <template>
   <component
     :is="form.Field"
-    :key="fieldKey"
     :name="name"
-    :validators="{
-      onChange: schema,
-      ...validators
-    }"
+    :validators="validators"
   >
     <template #default="{ field, state }">
       <OmegaInternalInput
         v-if="meta"
         v-bind="{ ...$attrs, ...$props, inputClass: computedClass }"
-        :field="field"
+        :field="field as any"
         :state="state"
         :register="form.registerField"
         :label="label ?? errori18n(propsName)"
@@ -40,12 +36,13 @@
   lang="ts"
   generic="From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
 >
+/* eslint-disable @typescript-eslint/no-explicit-any -- TanStack Form Field generic interop and slot prop typing */
 import { type DeepKeys } from "@tanstack/vue-form"
 import { computed, inject, type Ref, useAttrs } from "vue"
-import { useIntl } from "../../utils"
-import { type FieldMeta, generateInputStandardSchemaFromFieldMeta, type OmegaInputPropsBase } from "./OmegaFormStuff"
+import { useErrorLabel } from "./errors"
+import { type FieldMeta } from "./meta/types"
 import OmegaInternalInput from "./OmegaInternalInput.vue"
-import { useErrorLabel } from "./useOmegaForm"
+import { type OmegaInputPropsBase } from "./types"
 
 const props = defineProps<OmegaInputPropsBase<From, To, Name>>()
 
@@ -57,13 +54,10 @@ defineSlots<{
   default?: (props: any) => any
 }>()
 
-defineOptions({
-  inheritAttrs: false
-})
+defineOptions({ inheritAttrs: false })
 
 const attrs = useAttrs()
 
-// Compute the class to use based on inputClass prop
 const computedClass = computed(() => {
   if (props.inputClass === null) return undefined
   if (props.inputClass !== undefined) return props.inputClass
@@ -82,28 +76,5 @@ 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()
-
-const schema = computed(() => {
-  if (!meta.value) {
-    console.log(props.name, Object.keys(props.form.meta), props.form.meta)
-    throw new Error("Meta is undefined")
-  }
-  return generateInputStandardSchemaFromFieldMeta(meta.value, trans)
-})
-
 const errori18n = useErrorLabel(props.form)
 </script>

package/src/components/OmegaForm/OmegaInputVuetify.vue

@@ -1,7 +1,10 @@
 <template>
   <div
     class="omega-input"
-    @focusout="$emit('blur', $event)"
+    @focusout="(e) => {
+      $emit('blur', e)
+      field.handleBlur()
+    }"
     @focusin="$emit('focus', $event)"
   >
     <component
@@ -204,8 +207,8 @@
   generic="From extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
 >
 import { type DeepKeys } from "@tanstack/vue-form"
-import { getInputType } from "../OmegaForm/OmegaFormStuff"
 import type { VuetifyInputProps } from "./InputProps"
+import { getInputType } from "./inputs"
 
 defineProps<VuetifyInputProps<From, Name>>()
 

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -24,11 +24,13 @@
   lang="ts"
   generic="From extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
 >
+/* eslint-disable @typescript-eslint/no-explicit-any -- TanStack Form / Vue attrs interop */
 import { type DeepKeys, useStore } from "@tanstack/vue-form"
 import { computed, type ComputedRef, getCurrentInstance, useAttrs, useId, useSlots } from "vue"
 import type { InputProps, OmegaFieldInternalApi } from "./InputProps"
-import type { FieldValidators, MetaRecord, NestedKeyOf, TypeOverride } from "./OmegaFormStuff"
+import type { MetaRecord, NestedKeyOf } from "./meta/types"
 import OmegaInputVuetify from "./OmegaInputVuetify.vue"
+import type { FieldValidators, TypeOverride } from "./types"
 
 defineOptions({
   inheritAttrs: false
@@ -84,7 +86,8 @@ const id = useId()
 
 const fieldApi = props.field
 
-const fieldState = useStore(fieldApi.store, (state) => state)
+// Subscribed for side-effect: keeps component reactive to fieldApi.store changes
+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)
@@ -128,6 +131,13 @@ const handleChange: OmegaFieldInternalApi<From, Name>["handleChange"] = (value)
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           : null as any
       )
+    } else if (props.meta?.isOptionalKey) {
+      // `S.optionalKey` expects the key to be ABSENT from the submitted
+      // object, not present-with-undefined. Remove it from form state
+      // rather than setting it to `undefined`. Note: this is distinct
+      // from `required: false`, which may also just mean "empty string
+      // is valid" for unconstrained `S.String` fields.
+      props.field.form.deleteField(props.field.name)
     } else {
       // Keep the actual value (e.g., empty string for S.String fields)
       props.field.handleChange(value)
@@ -135,10 +145,6 @@ const handleChange: OmegaFieldInternalApi<From, Name>["handleChange"] = (value)
   } else {
     props.field.handleChange(value)
   }
-
-  // whenever we change the field, regardless if we set it to null, we should reset onSubmit.
-  // not sure why this is not the case in tanstack form.
-  props.field.setMeta((m) => ({ ...m, errorMap: { ...m.errorMap, onSubmit: undefined } }))
 }
 
 // Note: Default value normalization (converting empty strings to null/undefined for nullable fields)

package/src/components/OmegaForm/OmegaTaggedUnion.vue

@@ -8,8 +8,8 @@
 import { type DeepKeys } from "@tanstack/vue-form"
 import { computed, provide, ref, watch } from "vue"
 import { type TaggedUnionOption } from "./InputProps"
-import { type FieldPath } from "./OmegaFormStuff"
 import OmegaTaggedUnionInternal from "./OmegaTaggedUnionInternal.vue"
+import { type FieldPath } from "./types"
 import { type useOmegaForm } from "./useOmegaForm"
 
 const props = defineProps<{
@@ -30,6 +30,7 @@ watch(
   () => {
     const path = tagPath.value
     // Navigate to the nested value
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- traversing arbitrary nested values
     return path.split(".").reduce((acc: any, key) => acc?.[key], formValues.value) as string | null
   },
   (newTag) => {

package/src/components/OmegaForm/OmegaTaggedUnionInternal.vue

@@ -34,7 +34,7 @@ watch(() => props.state, (newTag, oldTag) => {
   if (newTag !== oldTag) {
     props.form.reset(values.value)
     setTimeout(() => {
-      props.field.validate("change")
+      void props.field.validate("change")
     }, 0)
   }
 }, { immediate: true })

package/src/components/OmegaForm/OmegaWrapper.vue

@@ -30,7 +30,7 @@
 import { useStore } from "@tanstack/vue-form"
 import { usePreventClose } from "./blockDialog"
 import { getOmegaStore } from "./getOmegaStore"
-import { type DefaultTypeProps, type OmegaFormApi, type OmegaFormState } from "./OmegaFormStuff"
+import { type DefaultTypeProps, type OmegaFormApi, type OmegaFormState } from "./types"
 import { type OmegaFormReturn } from "./useOmegaForm"
 
 type OmegaWrapperProps = {