@effect-app/vue-components 4.0.0-beta.18 → 4.0.0-beta.180

package/package.json

@@ -1,39 +1,39 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "4.0.0-beta.18",
+  "version": "4.0.0-beta.180",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
-    "effect": "^4.0.0-beta.31",
-    "intl-messageformat": "^11.1.2",
+    "effect": "^4.0.0-beta.59",
+    "intl-messageformat": "^11.2.2",
     "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.33",
+    "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",
+    "@storybook/vue3": "^10.3.5",
+    "@storybook/vue3-vite": "^10.3.5",
+    "@types/node": "^25.6.0",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vue/test-utils": "^2.4.9",
     "@vueuse/core": "^14.2.1",
-    "dprint": "^0.52.0",
-    "jsdom": "^28.1.0",
+    "jsdom": "^29.1.0",
     "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.5",
+    "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.7",
+    "vuetify": "^4.0.6",
+    "@effect-app/eslint-shared-config": "0.6.0-beta.18"
   },
   "files": [
     "src",
@@ -45,28 +45,32 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/vue-components.es.js"
     },
-    "./dist/vue-components.css": "./dist/vue-components.css"
+    "./dist/vue-components.css": "./dist/vue-components.css",
+    "./reset.css": {
+      "development": "./src/reset.css",
+      "default": "./dist/reset.css"
+    }
   },
   "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.18",
-    "effect-app": "4.0.0-beta.18"
+    "@effect-app/vue": "4.0.0-beta.180",
+    "effect-app": "4.0.0-beta.180"
   },
   "scripts": {
     "check": "vue-tsc",
     "build": "pnpm build:run",
-    "build:run": "rimraf dist && vue-tsc && vite build",
+    "build:run": "rimraf dist && vue-tsc && vite build && cp src/reset.css dist/reset.css",
     "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 src stories && NODE_OPTIONS=--max-old-space-size=8192 eslint src stories .storybook && pnpm exec dprint check --config ../../dprint.jsonc .",
     "ncu": "ncu",
     "clean": "rm -rf dist",
-    "lint-fix": "pnpm lint --fix",
+    "lint-fix": "oxlint --fix src stories && NODE_OPTIONS=--max-old-space-size=8192 eslint --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

@@ -41,7 +41,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">
@@ -66,7 +68,7 @@ export default {
       :label="command.label"
       :title="title ?? command.action"
     >
-      <span>{{ command.label }}</span>
+      {{ command.label }}
     </slot>
   </v-btn>
   <v-btn

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
@@ -42,11 +40,15 @@
 <script
   setup
   lang="ts"
-  generic="From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
+  generic="
+  From extends Record<PropertyKey, any>,
+  To extends Record<PropertyKey, any>,
+  Name extends DeepKeys<From>
+"
 >
 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

@@ -14,15 +14,17 @@
 <script
   setup
   lang="ts"
-  generic="// dprint-ignore
+  generic="
   From extends Record<PropertyKey, string>,
   To extends Record<PropertyKey, string>,
-  Name extends DeepKeys<From>"
+  Name extends DeepKeys<From>
+"
 >
 import { type DeepKeys } from "@tanstack/vue-form"
 import { Order } from "effect-app"
 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

@@ -12,13 +12,17 @@
 <script
   setup
   lang="ts"
-  generic="From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
+  generic="
+  From extends Record<PropertyKey, any>,
+  To extends Record<PropertyKey, any>,
+  Name extends DeepKeys<From>
+"
 >
 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)"
@@ -38,14 +34,19 @@
 <script
   setup
   lang="ts"
-  generic="From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
+  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 +58,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 +80,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)
@@ -165,11 +171,13 @@ const inputProps: ComputedRef<InputProps<From, Name>> = computed(() => ({
     minLength: props.meta?.type === "string" && props.meta?.minLength,
     maxLength: props.meta?.type === "string" && props.meta?.maxLength,
     max: (props.meta?.type === "number")
-      && (props.meta?.maximum
-        ?? (typeof props.meta?.exclusiveMaximum === "number" && props.meta.exclusiveMaximum - 1)),
+      ? (props.meta?.maximum
+        ?? (typeof props.meta?.exclusiveMaximum === "number" ? props.meta.exclusiveMaximum - 1 : undefined))
+      : undefined,
     min: (props.meta?.type === "number")
-      && (props.meta?.minimum
-        ?? (typeof props.meta?.exclusiveMinimum === "number" && props.meta.exclusiveMinimum + 1)),
+      ? (props.meta?.minimum
+        ?? (typeof props.meta?.exclusiveMinimum === "number" ? props.meta.exclusiveMinimum + 1 : undefined))
+      : undefined,
     errorMessages: errors.value,
     error: !!errors.value.length,
     type: fieldType.value,

package/src/components/OmegaForm/OmegaTaggedUnion.vue

@@ -1,15 +1,17 @@
 <script
   setup
   lang="ts"
-  generic="From extends Record<PropertyKey, any>,
+  generic="
+  From extends Record<PropertyKey, any>,
   To extends Record<PropertyKey, any>,
-  Name extends DeepKeys<From> | undefined = DeepKeys<From>"
+  Name extends DeepKeys<From> | undefined = DeepKeys<From>
+"
 >
 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 +32,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

@@ -9,7 +9,11 @@
 <script
   setup
   lang="ts"
-  generic="From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
+  generic="
+  From extends Record<PropertyKey, any>,
+  To extends Record<PropertyKey, any>,
+  Name extends DeepKeys<From>
+"
 >
 import { type DeepKeys, type DeepValue } from "@tanstack/vue-form"
 import { watch } from "vue"

package/src/components/OmegaForm/OmegaWrapper.vue

@@ -12,10 +12,12 @@
 <script
   setup
   lang="ts"
-  generic="From extends Record<PropertyKey, any>,
+  generic="
+  From extends Record<PropertyKey, any>,
   To extends Record<PropertyKey, any>,
   K extends keyof OmegaFormState<From, To> = keyof OmegaFormState<From, To>,
-  Props = DefaultTypeProps"
+  Props = DefaultTypeProps
+"
 >
 /**
  * Form component that wraps TanStack Form's useForm hook
@@ -30,7 +32,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 = {

package/src/components/OmegaForm/blockDialog.ts

@@ -1,5 +1,6 @@
 import mitt from "mitt"
 import { inject, type InjectionKey, provide, type Ref } from "vue"
+import { useIntl } from "../../utils"
 import { onMountedWithCleanup } from "./onMountedWithCleanup"
 
 export type DialogClosing = { prevent?: boolean | Promise<boolean> }
@@ -19,11 +20,19 @@ export const usePreventClose = (mkIsDirty: () => Ref<boolean>) => {
   if (!bus) {
     return
   }
+  const { formatMessage, trans } = useIntl()
   const isDirty = mkIsDirty()
+  const defaultMessage = "There are unsaved changes. Are you sure you want to close?"
   onMountedWithCleanup(() => {
     const onDialogClosing = (evt: DialogClosing) => {
       if (isDirty.value) {
-        if (!confirm("Es sind ungespeicherte Änderungen vorhanden. Wirklich schließen?")) {
+        // Mirror the guard pattern in errors.ts: a custom `useIntl` mock may
+        // only provide `trans`, so fall back through trans → defaultMessage.
+        const message = formatMessage
+          ? formatMessage({ id: "form.unsaved_changes_confirm", defaultMessage })
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any -- key may not be registered in the locale catalog
+          : trans?.("form.unsaved_changes_confirm" as any) ?? defaultMessage
+        if (!confirm(message)) {
           evt.prevent = true
         }
       }

package/src/components/OmegaForm/createUseFormWithCustomInput.ts

@@ -1,8 +1,9 @@
+/* eslint-disable @typescript-eslint/no-explicit-any -- TanStack Form / Vue render-fn slot interop */
 import type { DeepKeys } from "@tanstack/vue-form"
 import { type Component, h } from "vue"
 import type { MergedInputProps } from "./InputProps"
-import { type DefaultTypeProps } from "./OmegaFormStuff"
 import OmegaInput from "./OmegaInput.vue"
+import { type DefaultTypeProps } from "./types"
 import { useOmegaForm } from "./useOmegaForm"
 
 export const createUseFormWithCustomInput = <

package/src/components/OmegaForm/errors.ts

@@ -0,0 +1,136 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { type Component, computed, type ComputedRef, type ConcreteComponent, h, onUnmounted, type Ref, ref, watch } from "vue"
+import { useIntl } from "../../utils"
+import type { OmegaError } from "./types"
+import type { OF } from "./useOmegaForm"
+
+export const useErrorLabel = (form: OF<any, any>) => {
+  const { formatMessage } = useIntl()
+  const humanize = (str: string) => {
+    return str
+      .replace(/([A-Z])/g, " $1") // Add space before capital letters
+      .replace(/^./, (char) => char.toUpperCase()) // Capitalize the first letter
+      .trim() // Remove leading/trailing spaces
+  }
+  const fallback = (propsName: string) =>
+    formatMessage
+      ? formatMessage({ id: `general.fields.${propsName}`, defaultMessage: humanize(propsName) })
+      : humanize(propsName)
+  const i18n = (propsName: string) =>
+    form.i18nNamespace
+      ? formatMessage({ id: `${form.i18nNamespace}.fields.${propsName}`, defaultMessage: fallback(propsName) })
+      : fallback(propsName)
+
+  return i18n
+}
+
+export const eHoc = (errorProps: {
+  form: OF<any, any>
+  fieldMap: Ref<Map<string, { id: string; label: string }>>
+}) => {
+  return function FormHoc<P>(
+    WrappedComponent: Component<P>
+  ): ConcreteComponent<P> {
+    return {
+      setup() {
+        const { fieldMap, form } = errorProps
+        const generalErrors = form.useStore((state) => state.errors)
+        const fieldMeta = form.useStore((state) => state.fieldMeta)
+        const errorMap = form.useStore((state) => state.errorMap)
+
+        const errorLabel = useErrorLabel(form)
+
+        const errors = computed(() => {
+          // Collect errors from fieldMeta (field-level errors for registered fields)
+          const fieldErrors = Object.entries(fieldMeta.value).reduce<OmegaError[]>((acc, [key, m]) => {
+            const fieldErrors = (m as { errors?: Array<{ message?: string }> } | undefined)?.errors ?? []
+            if (!fieldErrors.length) {
+              return acc
+            }
+
+            const fieldInfo = fieldMap.value.get(key)
+            if (!fieldInfo) {
+              return acc
+            }
+
+            acc.push({
+              label: fieldInfo.label,
+              inputId: fieldInfo.id,
+              errors: [fieldErrors[0]?.message].filter(Boolean) as string[]
+            })
+
+            return acc
+          }, [])
+
+          // Collect errors from errorMap.onDynamic / errorMap.onSubmit ONLY for fields that are NOT registered
+          // (registered fields already have their errors in fieldMeta).
+          // Our localized standard schema writes to onDynamic via validationLogic: revalidateLogic();
+          // caller-provided validators.onSubmit (via tanstackFormOptions spread) writes to onSubmit.
+          const submitErrors: OmegaError[] = []
+          const submitIssueMaps = [errorMap.value.onDynamic, errorMap.value.onSubmit].filter(
+            Boolean
+          ) as unknown as Array<
+            Record<string, unknown>
+          >
+          const seenPaths = new Set<string>()
+          for (const issuesByPath of submitIssueMaps) {
+            for (const [_, issues] of Object.entries(issuesByPath)) {
+              if (Array.isArray(issues) && issues.length) {
+                for (const issue of issues) {
+                  const issAny: any = issue
+                  if (issAny?.path && Array.isArray(issAny.path) && issAny.path.length) {
+                    const fieldPath = issAny.path.join(".")
+                    if (!fieldMap.value.has(fieldPath) && !seenPaths.has(fieldPath)) {
+                      seenPaths.add(fieldPath)
+                      submitErrors.push({
+                        label: errorLabel(fieldPath),
+                        inputId: fieldPath,
+                        errors: [issAny.message].filter(Boolean)
+                      })
+                      break
+                    }
+                  }
+                }
+              }
+            }
+          }
+
+          // Combine both error sources (no need to check for duplicates since they're mutually exclusive)
+          return [...fieldErrors, ...submitErrors]
+        })
+
+        return {
+          generalErrors,
+          errors
+        }
+      },
+      render({ errors, generalErrors }: any) {
+        return h(WrappedComponent, {
+          errors,
+          generalErrors,
+          ...this.$attrs
+        } as any, this.$slots)
+      }
+    }
+  }
+}
+
+export const makeFieldMap = () => {
+  const fieldMap = ref(new Map<string, { label: string; id: string }>())
+  const 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(() => {
+      // 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)
+      }
+    })
+  }
+  return { fieldMap, registerField }
+}

package/src/components/OmegaForm/getOmegaStore.ts

@@ -1,6 +1,6 @@
 import { useStore } from "@tanstack/vue-form"
 import { computed, type Ref } from "vue"
-import type { OmegaFormApi, OmegaFormState } from "./OmegaFormStuff"
+import type { OmegaFormApi, OmegaFormState } from "./types"
 
 export function getOmegaStore<
   To,

package/src/components/OmegaForm/hocs.ts

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { type Component, type ConcreteComponent, h } from "vue"
+import type { OF } from "./useOmegaForm"
+
+export const fHoc = (form: OF<any, any>) => {
+  return function FormHoc<P>(
+    WrappedComponent: Component<P>
+  ): ConcreteComponent<P> {
+    return {
+      render() {
+        return h(WrappedComponent, {
+          form,
+          ...this.$attrs
+        } as any, this.$slots)
+      }
+    }
+  }
+}