From 044d643938c54747b55a38a119d8bb806534f873 Mon Sep 17 00:00:00 2001
From: Davide Di Pumpo <davidemak@gmail.com>
Date: Fri, 21 Aug 2026 15:39:46 +0200
Subject: [PATCH 1/4] feat(vue): use v-number-input for OmegaForm number fields

Vuetify 4 promotes VNumberInput to a first-class component; the OmegaForm
"number" type now renders it instead of v-text-field type="number"
("range" keeps its own v-slider branch, behavior unchanged).

Precision is schema-driven: S.Int fields get precision 0 (no decimal
separator), plain S.Number gets free decimals (precision null), and an
explicit :precision via attrs still wins. The int refinement already
detected in the field meta is now forwarded through inputProps.

Adds a NumberInput story covering min/max clamping, decimals, attrs
passthrough (step/control-variant) and a per-field decimal-separator.
---
 .../src/components/OmegaForm/InputProps.ts    |  1 +
 .../OmegaForm/OmegaInputVuetify.vue           | 39 +++++++++---
 .../OmegaForm/OmegaInternalInput.vue          |  1 +
 .../stories/OmegaForm.stories.ts              |  8 +++
 .../stories/OmegaForm/NumberInput.vue         | 62 +++++++++++++++++++
 5 files changed, 103 insertions(+), 8 deletions(-)
 create mode 100644 packages/vue-components/stories/OmegaForm/NumberInput.vue

diff --git a/packages/vue-components/src/components/OmegaForm/InputProps.ts b/packages/vue-components/src/components/OmegaForm/InputProps.ts
index eaec0cf14..a67a6b540 100644
--- a/packages/vue-components/src/components/OmegaForm/InputProps.ts
+++ b/packages/vue-components/src/components/OmegaForm/InputProps.ts
@@ -36,6 +36,7 @@ export type InputProps<From extends Record<PropertyKey, any>, TName extends Deep
     maxLength?: number | false
     max?: number | false
     min?: number | false
+    refinement?: "int"
     errorMessages: string[]
     error: boolean
     label: string
diff --git a/packages/vue-components/src/components/OmegaForm/OmegaInputVuetify.vue b/packages/vue-components/src/components/OmegaForm/OmegaInputVuetify.vue
index b78221509..412b2d905 100644
--- a/packages/vue-components/src/components/OmegaForm/OmegaInputVuetify.vue
+++ b/packages/vue-components/src/components/OmegaForm/OmegaInputVuetify.vue
@@ -87,20 +87,43 @@
         />
       </template>
     </v-textarea>
-    <component
-      :is="inputProps.type === 'range' ? 'v-slider' : 'v-text-field'"
-      v-if="inputProps.type === 'number' || inputProps.type === 'range'"
+    <v-number-input
+      v-if="inputProps.type === 'number'"
       :id="inputProps.id"
       :required="inputProps.required"
-      :min="inputProps.min"
-      :max="inputProps.max"
-      :type="inputProps.type"
+      :min="typeof inputProps.min === 'number' ? inputProps.min : undefined"
+      :max="typeof inputProps.max === 'number' ? inputProps.max : undefined"
       :name="field.name"
       :label="inputProps.label"
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
+      :precision="inputProps.refinement === 'int' ? 0 : null"
       v-bind="$attrs"
-      :model-value="state.value"
+      :model-value="state.value as any"
+      @update:model-value="(v: number | null) => field.handleChange((v ?? undefined) as any)"
+    >
+      <template
+        v-if="$slots.label"
+        #label
+      >
+        <slot
+          name="label"
+          v-bind="{ required: inputProps.required, id: inputProps.id, label: inputProps.label }"
+        />
+      </template>
+    </v-number-input>
+    <v-slider
+      v-if="inputProps.type === 'range'"
+      :id="inputProps.id"
+      :required="inputProps.required"
+      :min="typeof inputProps.min === 'number' ? inputProps.min : undefined"
+      :max="typeof inputProps.max === 'number' ? inputProps.max : undefined"
+      :name="field.name"
+      :label="inputProps.label"
+      :error-messages="inputProps.errorMessages"
+      :error="inputProps.error"
+      v-bind="$attrs"
+      :model-value="state.value as any"
       @update:model-value="(e: any) => {
         if (e || e === 0) {
           field.handleChange(Number(e) as any)
@@ -118,7 +141,7 @@
           v-bind="{ required: inputProps.required, id: inputProps.id, label: inputProps.label }"
         />
       </template>
-    </component>
+    </v-slider>
     <template v-if="inputProps.type === 'radio'">
       <v-radio-group
         :id="inputProps.id"
diff --git a/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue b/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
index a5a9b1205..44ad78c52 100644
--- a/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
+++ b/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
@@ -191,6 +191,7 @@ const inputProps: ComputedRef<InputProps<From, Name>> = computed(() => ({
       ? (props.meta?.minimum
         ?? (typeof props.meta?.exclusiveMinimum === "number" ? props.meta.exclusiveMinimum + 1 : undefined))
       : undefined,
+    refinement: props.meta?.type === "number" ? props.meta?.refinement : undefined,
     errorMessages: errors.value,
     error: !!errors.value.length,
     type: fieldType.value,
diff --git a/packages/vue-components/stories/OmegaForm.stories.ts b/packages/vue-components/stories/OmegaForm.stories.ts
index 8ebac46a0..98b8dfb53 100644
--- a/packages/vue-components/stories/OmegaForm.stories.ts
+++ b/packages/vue-components/stories/OmegaForm.stories.ts
@@ -26,6 +26,7 @@ import MetaFormComponent from "./OmegaForm/Meta.vue"
 import NullComponent from "./OmegaForm/Null.vue"
 import NullableComponent from "./OmegaForm/Nullable.vue"
 import NullableNestedStructComponent from "./OmegaForm/NullableNestedStruct.vue"
+import NumberInputComponent from "./OmegaForm/NumberInput.vue"
 import OmitConstructorDefaultsComponent from "./OmegaForm/OmitConstructorDefaults.vue"
 import OptionalKeyComponent from "./OmegaForm/OptionalKey.vue"
 import PersistencyFormComponent from "./OmegaForm/PersistencyForm.vue"
@@ -156,6 +157,13 @@ export const NullableNestedStruct: Story = {
   })
 }
 
+export const NumberInput: Story = {
+  render: () => ({
+    components: { NumberInputComponent },
+    template: "<NumberInputComponent />"
+  })
+}
+
 export const CreateUseFormWIthCustomInput: Story = {
   render: () => ({
     components: { CreateUseFormWithCustomInputComponent },
diff --git a/packages/vue-components/stories/OmegaForm/NumberInput.vue b/packages/vue-components/stories/OmegaForm/NumberInput.vue
new file mode 100644
index 000000000..96325e46d
--- /dev/null
+++ b/packages/vue-components/stories/OmegaForm/NumberInput.vue
@@ -0,0 +1,62 @@
+<template>
+  <form.Form :subscribe="['values']">
+    <template #default="{ subscribedValues: { values } }">
+      <pre>{{ values }}</pre>
+
+      <!-- S.Int with min/max from the schema: precision 0 is automatic (no decimal separator), stepper clamps to 1-20 -->
+      <form.Input
+        name="quantity"
+        label="Quantity (1-20)"
+      />
+
+      <!-- S.Number: free decimals (precision null is automatic), clearing sets undefined -->
+      <form.Input
+        name="price"
+        label="Price (optional, decimals)"
+      />
+
+      <!-- extra VNumberInput props pass through attrs and win over the schema-driven defaults -->
+      <form.Input
+        name="steps"
+        label="Steps of 5, stacked controls"
+        :step="5"
+        control-variant="stacked"
+      />
+
+      <!-- decimal separator follows the Vuetify locale (this Storybook is "en", so "." elsewhere);
+           it can be forced per field, here comma: typing "." is rejected, "," starts the decimals -->
+      <form.Input
+        name="commaPrice"
+        label="Comma price (decimal-separator ,)"
+        decimal-separator=","
+      />
+
+      <v-btn type="submit">
+        submit
+      </v-btn>
+      <form.Errors />
+    </template>
+  </form.Form>
+</template>
+
+<script setup lang="ts">
+import * as S from "effect-app/Schema"
+import { useOmegaForm } from "../../src/components/OmegaForm"
+
+const form = useOmegaForm(
+  S.Struct({
+    quantity: S.Int.pipe(S.check(S.isBetween({ minimum: 1, maximum: 20 }))),
+    price: S.optionalKey(S.Number),
+    steps: S.optionalKey(S.Int),
+    commaPrice: S.optionalKey(S.Number)
+  }),
+  {
+    defaultValues: {
+      price: 12.34
+    },
+    onSubmit: async ({ value }) => {
+      console.log("Form submitted:", value)
+    }
+  }
+)
+</script>

From 17528507609e52916841714be9c498fd6ee1a1cf Mon Sep 17 00:00:00 2001
From: Davide Di Pumpo <davidemak@gmail.com>
Date: Fri, 21 Aug 2026 16:03:05 +0200
Subject: [PATCH 2/4] fix(vue): keep schema validation authoritative for number
 bounds

Passing min/max as VNumberInput props makes the component withhold
out-of-range values from the model (schema errors never fire) and clamp
on blur. Drop the props and expose the bounds via spinbutton ARIA attrs
on the native input instead, matching what input type=number offered.

Also default number controls to the stacked variant (overridable per
field via attrs) and update the story accordingly.
---
 .changeset/omegaform-vnumber-input.md                |  5 +++++
 .../src/components/OmegaForm/OmegaInputVuetify.vue   | 12 ++++++++++--
 .../vue-components/stories/OmegaForm/NumberInput.vue | 12 ++++++++----
 3 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/omegaform-vnumber-input.md

diff --git a/.changeset/omegaform-vnumber-input.md b/.changeset/omegaform-vnumber-input.md
new file mode 100644
index 000000000..72e0ffa69
--- /dev/null
+++ b/.changeset/omegaform-vnumber-input.md
@@ -0,0 +1,5 @@
+---
+"@effect-app/vue-components": minor
+---
+
+OmegaForm number fields now render Vuetify 4's `v-number-input` instead of `v-text-field type="number"` (`range` keeps its `v-slider`). Precision is schema-driven (`S.Int` → 0, plain numbers → free decimals), controls default to the stacked variant, and any `VNumberInput` prop (`precision`, `step`, `control-variant`, `decimal-separator`, ...) can be overridden per field via attrs. Schema `min`/`max` are exposed to assistive tech as spinbutton ARIA bounds but are deliberately not passed as component props, so out-of-range values keep reaching schema validation and show its localized error instead of being silently clamped.
diff --git a/packages/vue-components/src/components/OmegaForm/OmegaInputVuetify.vue b/packages/vue-components/src/components/OmegaForm/OmegaInputVuetify.vue
index 412b2d905..6e677a4a4 100644
--- a/packages/vue-components/src/components/OmegaForm/OmegaInputVuetify.vue
+++ b/packages/vue-components/src/components/OmegaForm/OmegaInputVuetify.vue
@@ -87,17 +87,25 @@
         />
       </template>
     </v-textarea>
+    <!-- min/max are deliberately NOT passed as VNumberInput props: the component
+         silently withholds out-of-range values from the model (so schema errors
+         would never show) and clamps on blur. Validation stays schema-driven; the
+         bounds are exposed to AT via the spinbutton ARIA attrs, which fall through
+         to the native input. -->
     <v-number-input
       v-if="inputProps.type === 'number'"
       :id="inputProps.id"
       :required="inputProps.required"
-      :min="typeof inputProps.min === 'number' ? inputProps.min : undefined"
-      :max="typeof inputProps.max === 'number' ? inputProps.max : undefined"
+      role="spinbutton"
+      :aria-valuemin="typeof inputProps.min === 'number' ? inputProps.min : undefined"
+      :aria-valuemax="typeof inputProps.max === 'number' ? inputProps.max : undefined"
+      :aria-valuenow="typeof state.value === 'number' ? state.value : undefined"
       :name="field.name"
       :label="inputProps.label"
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
       :precision="inputProps.refinement === 'int' ? 0 : null"
+      control-variant="stacked"
       v-bind="$attrs"
       :model-value="state.value as any"
       @update:model-value="(v: number | null) => field.handleChange((v ?? undefined) as any)"
diff --git a/packages/vue-components/stories/OmegaForm/NumberInput.vue b/packages/vue-components/stories/OmegaForm/NumberInput.vue
index 96325e46d..ceb00cae0 100644
--- a/packages/vue-components/stories/OmegaForm/NumberInput.vue
+++ b/packages/vue-components/stories/OmegaForm/NumberInput.vue
@@ -3,7 +3,9 @@
     <template #default="{ subscribedValues: { values } }">
       <pre>{{ values }}</pre>
 
-      <!-- S.Int with min/max from the schema: precision 0 is automatic (no decimal separator), stepper clamps to 1-20 -->
+      <!-- S.Int with min/max from the schema: precision 0 is automatic (no decimal
+           separator); out-of-range values (e.g. 21) show the schema validation error,
+           the bounds are exposed to assistive tech via aria-valuemin/valuemax -->
       <form.Input
         name="quantity"
         label="Quantity (1-20)"
@@ -15,12 +17,14 @@
         label="Price (optional, decimals)"
       />
 
-      <!-- extra VNumberInput props pass through attrs and win over the schema-driven defaults -->
+      <!-- extra VNumberInput props pass through attrs and win over OmegaForm's
+           defaults: OmegaForm renders stacked controls, here overridden back to
+           Vuetify's "default" split buttons, with a custom step -->
       <form.Input
         name="steps"
-        label="Steps of 5, stacked controls"
+        label="Steps of 5, default controls"
         :step="5"
-        control-variant="stacked"
+        control-variant="default"
       />
 
       <!-- decimal separator follows the Vuetify locale (this Storybook is "en", so "." elsewhere);

From f9a58644145b0d00109cdae59e582d410ff8c945 Mon Sep 17 00:00:00 2001
From: Davide Di Pumpo <davidemak@gmail.com>
Date: Fri, 21 Aug 2026 16:03:11 +0200
Subject: [PATCH 3/4] fix(vue): localize isBetween failures and correct
 isExclusive flags

S.isBetween checks fell through to Effect's default English formatter;
map them to validation.number.min/max based on which bound the value
violated. The existing min/max cases passed isExclusive inverted
(inclusive checks rendered as strict and vice versa); swap them and
document the catalog semantics.
---
 .changeset/omegaform-between-localization.md  |  5 +++++
 .../OmegaForm/validation/localized.ts         | 19 +++++++++++++++----
 2 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/omegaform-between-localization.md

diff --git a/.changeset/omegaform-between-localization.md b/.changeset/omegaform-between-localization.md
new file mode 100644
index 000000000..7bb347b0c
--- /dev/null
+++ b/.changeset/omegaform-between-localization.md
@@ -0,0 +1,5 @@
+---
+"@effect-app/vue-components": patch
+---
+
+Localize `S.isBetween` validation failures: the violated side now maps to the `validation.number.min` / `validation.number.max` messages instead of falling back to the English default formatter. Also fixes the inverted `isExclusive` flag on the min/max messages for `isGreaterThan[OrEqualTo]` / `isLessThan[OrEqualTo]` (inclusive checks now say "at least/at most", strict ones "greater/less than").
diff --git a/packages/vue-components/src/components/OmegaForm/validation/localized.ts b/packages/vue-components/src/components/OmegaForm/validation/localized.ts
index 8386e056d..d61d62dc9 100644
--- a/packages/vue-components/src/components/OmegaForm/validation/localized.ts
+++ b/packages/vue-components/src/components/OmegaForm/validation/localized.ts
@@ -13,6 +13,7 @@ type FilterMeta =
   | { readonly _tag: "isGreaterThan"; readonly exclusiveMinimum: number }
   | { readonly _tag: "isLessThanOrEqualTo"; readonly maximum: number }
   | { readonly _tag: "isLessThan"; readonly exclusiveMaximum: number }
+  | { readonly _tag: "isBetween"; readonly minimum: number; readonly maximum: number }
   | { readonly _tag?: undefined }
 
 /** Map filter annotations (representation since beta.107, legacy meta before) to FilterMeta. */
@@ -85,20 +86,30 @@ export const makeStandardSchemaV1Hooks = (
         const actual = input !== undefined ? String(input) : "NaN"
         return trans("validation.integer.expected", { actualValue: actual })
       }
+      // isExclusive semantics in the message catalog: true = strict bound
+      // ("greater/less than"), false = inclusive bound ("at least/at most").
       case "isGreaterThanOrEqualTo":
         return trans(
           meta.minimum === 0 ? "validation.number.positive" : "validation.number.min",
-          { minimum: meta.minimum, isExclusive: true }
+          { minimum: meta.minimum, isExclusive: false }
         )
       case "isGreaterThan":
         return trans(
           meta.exclusiveMinimum === 0 ? "validation.number.positive" : "validation.number.min",
-          { minimum: meta.exclusiveMinimum, isExclusive: false }
+          { minimum: meta.exclusiveMinimum, isExclusive: true }
         )
       case "isLessThanOrEqualTo":
-        return trans("validation.number.max", { maximum: meta.maximum, isExclusive: true })
+        return trans("validation.number.max", { maximum: meta.maximum, isExclusive: false })
       case "isLessThan":
-        return trans("validation.number.max", { maximum: meta.exclusiveMaximum, isExclusive: false })
+        return trans("validation.number.max", { maximum: meta.exclusiveMaximum, isExclusive: true })
+      case "isBetween": {
+        // Inclusive on both ends; report the side the value actually violated.
+        const input = reportedInput(issue)
+        const below = typeof input === "number" && input < meta.minimum
+        return below
+          ? trans("validation.number.min", { minimum: meta.minimum, isExclusive: false })
+          : trans("validation.number.max", { maximum: meta.maximum, isExclusive: false })
+      }
       default:
         // Fall back to the default check hook so custom S.makeFilter messages
         // (which surface as InvalidValue.annotations.message on issue.issue)

From bcb29fdff2f9517f8b7a1a8e9f8227114eb7db5b Mon Sep 17 00:00:00 2001
From: Davide Di Pumpo <davidemak@gmail.com>
Date: Fri, 21 Aug 2026 16:03:38 +0200
Subject: [PATCH 4/4] chore: bump .nvmrc to v22.23

---
 .nvmrc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.nvmrc b/.nvmrc
index e85bf595b..b6f5ce1e9 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v22.12
+v22.23