@effect-app/vue-components 2.6.2 → 2.7.1

package/dist/vue-components.es50.js

@@ -1,50 +1,33 @@
-import { NoopContextManager as f } from "./vue-components.es59.js";
-import { registerGlobal as s, getGlobal as p, unregisterGlobal as g } from "./vue-components.es57.js";
-import { DiagAPI as u } from "./vue-components.es54.js";
-var y = function(t, e) {
-  var a = typeof Symbol == "function" && t[Symbol.iterator];
-  if (!a) return t;
-  var n = a.call(t), o, r = [], i;
-  try {
-    for (; (e === void 0 || e-- > 0) && !(o = n.next()).done; ) r.push(o.value);
-  } catch (c) {
-    i = { error: c };
-  } finally {
-    try {
-      o && !o.done && (a = n.return) && a.call(n);
-    } finally {
-      if (i) throw i.error;
-    }
-  }
-  return r;
-}, d = function(t, e, a) {
-  if (a || arguments.length === 2) for (var n = 0, o = e.length, r; n < o; n++)
-    (r || !(n in e)) && (r || (r = Array.prototype.slice.call(e, 0, n)), r[n] = e[n]);
-  return t.concat(r || Array.prototype.slice.call(e));
-}, l = "context", _ = new f(), A = (
+import { INVALID_SPAN_CONTEXT as o } from "./vue-components.es49.js";
+var i = (
   /** @class */
   (function() {
-    function t() {
+    function t(n) {
+      n === void 0 && (n = o), this._spanContext = n;
     }
-    return t.getInstance = function() {
-      return this._instance || (this._instance = new t()), this._instance;
-    }, t.prototype.setGlobalContextManager = function(e) {
-      return s(l, e, u.instance());
-    }, t.prototype.active = function() {
-      return this._getContextManager().active();
-    }, t.prototype.with = function(e, a, n) {
-      for (var o, r = [], i = 3; i < arguments.length; i++)
-        r[i - 3] = arguments[i];
-      return (o = this._getContextManager()).with.apply(o, d([e, a, n], y(r), !1));
-    }, t.prototype.bind = function(e, a) {
-      return this._getContextManager().bind(e, a);
-    }, t.prototype._getContextManager = function() {
-      return p(l) || _;
-    }, t.prototype.disable = function() {
-      this._getContextManager().disable(), g(l, u.instance());
+    return t.prototype.spanContext = function() {
+      return this._spanContext;
+    }, t.prototype.setAttribute = function(n, e) {
+      return this;
+    }, t.prototype.setAttributes = function(n) {
+      return this;
+    }, t.prototype.addEvent = function(n, e) {
+      return this;
+    }, t.prototype.addLink = function(n) {
+      return this;
+    }, t.prototype.addLinks = function(n) {
+      return this;
+    }, t.prototype.setStatus = function(n) {
+      return this;
+    }, t.prototype.updateName = function(n) {
+      return this;
+    }, t.prototype.end = function(n) {
+    }, t.prototype.isRecording = function() {
+      return !1;
+    }, t.prototype.recordException = function(n, e) {
     }, t;
   })()
 );
 export {
-  A as ContextAPI
+  i as NonRecordingSpan
 };

package/dist/vue-components.es51.js

@@ -1,28 +1,50 @@
-import { registerGlobal as a, getGlobal as p, unregisterGlobal as s } from "./vue-components.es57.js";
-import { ProxyTracerProvider as i } from "./vue-components.es44.js";
-import { wrapSpanContext as c, isSpanContextValid as h } from "./vue-components.es47.js";
-import { deleteSpan as g, getSpan as S, getActiveSpan as x, getSpanContext as d, setSpan as f, setSpanContext as l } from "./vue-components.es58.js";
-import { DiagAPI as o } from "./vue-components.es54.js";
-var n = "trace", y = (
+import { NoopContextManager as f } from "./vue-components.es59.js";
+import { registerGlobal as s, getGlobal as p, unregisterGlobal as g } from "./vue-components.es57.js";
+import { DiagAPI as u } from "./vue-components.es54.js";
+var y = function(t, e) {
+  var a = typeof Symbol == "function" && t[Symbol.iterator];
+  if (!a) return t;
+  var n = a.call(t), o, r = [], i;
+  try {
+    for (; (e === void 0 || e-- > 0) && !(o = n.next()).done; ) r.push(o.value);
+  } catch (c) {
+    i = { error: c };
+  } finally {
+    try {
+      o && !o.done && (a = n.return) && a.call(n);
+    } finally {
+      if (i) throw i.error;
+    }
+  }
+  return r;
+}, d = function(t, e, a) {
+  if (a || arguments.length === 2) for (var n = 0, o = e.length, r; n < o; n++)
+    (r || !(n in e)) && (r || (r = Array.prototype.slice.call(e, 0, n)), r[n] = e[n]);
+  return t.concat(r || Array.prototype.slice.call(e));
+}, l = "context", _ = new f(), A = (
   /** @class */
   (function() {
     function t() {
-      this._proxyTracerProvider = new i(), this.wrapSpanContext = c, this.isSpanContextValid = h, this.deleteSpan = g, this.getSpan = S, this.getActiveSpan = x, this.getSpanContext = d, this.setSpan = f, this.setSpanContext = l;
     }
     return t.getInstance = function() {
       return this._instance || (this._instance = new t()), this._instance;
-    }, t.prototype.setGlobalTracerProvider = function(r) {
-      var e = a(n, this._proxyTracerProvider, o.instance());
-      return e && this._proxyTracerProvider.setDelegate(r), e;
-    }, t.prototype.getTracerProvider = function() {
-      return p(n) || this._proxyTracerProvider;
-    }, t.prototype.getTracer = function(r, e) {
-      return this.getTracerProvider().getTracer(r, e);
+    }, t.prototype.setGlobalContextManager = function(e) {
+      return s(l, e, u.instance());
+    }, t.prototype.active = function() {
+      return this._getContextManager().active();
+    }, t.prototype.with = function(e, a, n) {
+      for (var o, r = [], i = 3; i < arguments.length; i++)
+        r[i - 3] = arguments[i];
+      return (o = this._getContextManager()).with.apply(o, d([e, a, n], y(r), !1));
+    }, t.prototype.bind = function(e, a) {
+      return this._getContextManager().bind(e, a);
+    }, t.prototype._getContextManager = function() {
+      return p(l) || _;
     }, t.prototype.disable = function() {
-      s(n, o.instance()), this._proxyTracerProvider = new i();
+      this._getContextManager().disable(), g(l, u.instance());
     }, t;
   })()
 );
 export {
-  y as TraceAPI
+  A as ContextAPI
 };

package/dist/vue-components.es52.js

@@ -1,13 +1,28 @@
-import { useStore as u } from "@tanstack/vue-form";
-import { computed as f } from "vue";
-function c(o, t) {
-  return f(() => t ? u(o.store, (n) => {
-    const r = {};
-    for (const e of t)
-      r[e] = n[e];
-    return r;
-  }).value : {});
-}
+import { registerGlobal as a, getGlobal as p, unregisterGlobal as s } from "./vue-components.es57.js";
+import { ProxyTracerProvider as i } from "./vue-components.es45.js";
+import { wrapSpanContext as c, isSpanContextValid as h } from "./vue-components.es48.js";
+import { deleteSpan as g, getSpan as S, getActiveSpan as x, getSpanContext as d, setSpan as f, setSpanContext as l } from "./vue-components.es58.js";
+import { DiagAPI as o } from "./vue-components.es54.js";
+var n = "trace", y = (
+  /** @class */
+  (function() {
+    function t() {
+      this._proxyTracerProvider = new i(), this.wrapSpanContext = c, this.isSpanContextValid = h, this.deleteSpan = g, this.getSpan = S, this.getActiveSpan = x, this.getSpanContext = d, this.setSpan = f, this.setSpanContext = l;
+    }
+    return t.getInstance = function() {
+      return this._instance || (this._instance = new t()), this._instance;
+    }, t.prototype.setGlobalTracerProvider = function(r) {
+      var e = a(n, this._proxyTracerProvider, o.instance());
+      return e && this._proxyTracerProvider.setDelegate(r), e;
+    }, t.prototype.getTracerProvider = function() {
+      return p(n) || this._proxyTracerProvider;
+    }, t.prototype.getTracer = function(r, e) {
+      return this.getTracerProvider().getTracer(r, e);
+    }, t.prototype.disable = function() {
+      s(n, o.instance()), this._proxyTracerProvider = new i();
+    }, t;
+  })()
+);
 export {
-  c as getOmegaStore
+  y as TraceAPI
 };

package/dist/vue-components.es53.js

@@ -1,6 +1,13 @@
-(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 o from "./vue-components.es38.js";
-
+import { useStore as u } from "@tanstack/vue-form";
+import { computed as f } from "vue";
+function c(o, t) {
+  return f(() => t ? u(o.store, (n) => {
+    const r = {};
+    for (const e of t)
+      r[e] = n[e];
+    return r;
+  }).value : {});
+}
 export {
-  o as default
+  c as getOmegaStore
 };

package/dist/vue-components.es54.js

@@ -1,6 +1,6 @@
 import { DiagComponentLogger as m } from "./vue-components.es55.js";
 import { createLogLevelDiagLogger as y } from "./vue-components.es56.js";
-import { DiagLogLevel as d } from "./vue-components.es41.js";
+import { DiagLogLevel as d } from "./vue-components.es42.js";
 import { unregisterGlobal as p, getGlobal as v, registerGlobal as w } from "./vue-components.es57.js";
 var b = function(i, n) {
   var r = typeof Symbol == "function" && i[Symbol.iterator];

package/dist/vue-components.es56.js

@@ -1,4 +1,4 @@
-import { DiagLogLevel as r } from "./vue-components.es41.js";
+import { DiagLogLevel as r } from "./vue-components.es42.js";
 function c(n, o) {
   n < r.NONE ? n = r.NONE : n > r.ALL && (n = r.ALL), o = o || {};
   function i(t, f) {

package/dist/vue-components.es58.js

@@ -1,6 +1,6 @@
-import { createContextKey as o } from "./vue-components.es40.js";
-import { NonRecordingSpan as a } from "./vue-components.es49.js";
-import { ContextAPI as u } from "./vue-components.es50.js";
+import { createContextKey as o } from "./vue-components.es41.js";
+import { NonRecordingSpan as a } from "./vue-components.es50.js";
+import { ContextAPI as u } from "./vue-components.es51.js";
 var n = o("OpenTelemetry Context Key SPAN");
 function r(e) {
   return e.getValue(n) || void 0;

package/dist/vue-components.es59.js

@@ -1,4 +1,4 @@
-import { ROOT_CONTEXT as l } from "./vue-components.es40.js";
+import { ROOT_CONTEXT as l } from "./vue-components.es41.js";
 var c = function(t, o) {
   var n = typeof Symbol == "function" && t[Symbol.iterator];
   if (!n) return t;

package/dist/vue-components.es8.js

@@ -1,6 +1,6 @@
-import { defineComponent as d, onMounted as c, createElementBlock as p, openBlock as g, Fragment as v, createVNode as m, unref as i, withCtx as u, renderSlot as f, createCommentVNode as V, createSlots as b, renderList as y, normalizeProps as F, guardReactiveProps as $ } from "vue";
-import k from "./vue-components.es9.js";
-const B = /* @__PURE__ */ d({
+import { defineComponent as d, createBlock as u, openBlock as g, unref as l, withCtx as o, renderSlot as n, createVNode as r, createCommentVNode as c, normalizeProps as s, guardReactiveProps as f, createSlots as $, renderList as y } from "vue";
+import C from "./vue-components.es9.js";
+const h = /* @__PURE__ */ d({
   __name: "OmegaTaggedUnion",
   props: {
     name: {},
@@ -9,46 +9,38 @@ const B = /* @__PURE__ */ d({
     options: {},
     label: {}
   },
-  setup(n) {
-    const e = n;
-    return c(() => {
-      const t = e.form.getFieldValue(e.name), o = e.form.meta[e.name];
-      if (t === void 0)
-        if (o?.nullableOrUndefined === "null" || !o?.required)
-          e.form.setFieldValue(e.name, null);
-        else {
-          const a = e.options.find((l) => l.value !== null);
-          a && a.value && e.form.setFieldValue(e.name, {
-            _tag: a.value
-          });
-        }
-    }), (t, o) => (g(), p(v, null, [
-      m(i(n.form).Input, {
-        name: `${n.name}._tag`,
-        label: n.label,
-        type: n.type ?? "select",
-        options: n.options
-      }, null, 8, ["name", "label", "type", "options"]),
-      m(i(n.form).Field, { name: n.name }, {
-        default: u(({ field: a, state: l }) => [
-          l.value ? f(t.$slots, "default", { key: 0 }) : V("", !0),
-          m(k, {
-            field: a,
-            state: l.value
-          }, b({ _: 2 }, [
-            y(t.$slots, (C, r) => ({
-              name: r,
-              fn: u((s) => [
-                f(t.$slots, r, F($(s)))
-              ])
-            }))
-          ]), 1032, ["field", "state"])
+  setup(e) {
+    return (a, b) => (g(), u(l(e.form).Field, {
+      name: e.name ? `${e.name}._tag` : "_tag"
+    }, {
+      default: o((t) => [
+        n(a.$slots, "OmegaCustomInput", s(f(t)), () => [
+          r(l(e.form).Input, {
+            name: e.name ? `${e.name}._tag` : "_tag",
+            label: e.label,
+            type: e.type ?? "select",
+            options: e.options
+          }, null, 8, ["name", "label", "type", "options"])
         ]),
-        _: 3
-      }, 8, ["name"])
-    ], 64));
+        n(a.$slots, "default"),
+        r(C, {
+          field: t.field,
+          state: t.state.value,
+          name: e.name
+        }, $({ _: 2 }, [
+          y(a.$slots, (k, m) => ({
+            name: m,
+            fn: o((i) => [
+              n(a.$slots, m, s(f(i)))
+            ])
+          }))
+        ]), 1032, ["field", "state", "name"]),
+        t.state.value ? n(a.$slots, "OmegaCommon", { key: 0 }) : c("", !0)
+      ]),
+      _: 3
+    }, 8, ["name"]));
   }
 });
 export {
-  B as default
+  h as default
 };

package/dist/vue-components.es9.js

@@ -1,19 +1,20 @@
-import { defineComponent as l, watch as s, renderSlot as i, createCommentVNode as o, normalizeProps as r, mergeProps as d } from "vue";
-const m = /* @__PURE__ */ l({
+import { defineComponent as l, watch as i, renderSlot as m, createCommentVNode as s, normalizeProps as o, mergeProps as r } from "vue";
+const f = /* @__PURE__ */ l({
   __name: "OmegaTaggedUnionInternal",
   props: {
     state: {},
-    field: {}
+    field: {},
+    name: {}
   },
   setup(e) {
     const a = e;
-    return s(() => a.state?._tag, (t, n) => {
+    return i(() => a.state, (t, n) => {
       t === null && a.field.setValue(null), t !== n && setTimeout(() => {
         a.field.validate("change");
       }, 0);
-    }), (t, n) => e.state?._tag ? i(t.$slots, e.state?._tag, r(d({ key: 0 }, { field: e.field, state: e.state }))) : o("", !0);
+    }), (t, n) => e.state ? m(t.$slots, `${e.name ? `${e.name}.` : ""}${e.state}`, o(r({ key: 0 }, { field: e.field, state: e.state }))) : s("", !0);
   }
 });
 export {
-  m as default
+  f as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "2.6.2",
+  "version": "2.7.1",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "effect": "^3.18.0",
@@ -53,8 +53,8 @@
     "highlight.js": "^11.11.1",
     "mitt": "^3.0.1",
     "vue3-highlightjs": "^1.0.5",
-    "effect-app": "3.12.0",
-    "@effect-app/vue": "2.92.2"
+    "@effect-app/vue": "2.92.2",
+    "effect-app": "3.12.0"
   },
   "scripts": {
     "build": "pnpm build:run",

package/src/components/OmegaForm/InputProps.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { DeepKeys, DeepValue, FieldApi, FieldAsyncValidateOrFn, FieldValidateAsyncFn, FieldValidateFn, FieldValidateOrFn, FormAsyncValidateOrFn, FormValidateOrFn, StandardSchemaV1 } from "@tanstack/vue-form"
+import { type IsUnion } from "effect-app/utils"
 
 export type OmegaFieldInternalApi<From extends Record<PropertyKey, any>, TName extends DeepKeys<From>> = FieldApi<
   /* in out TParentData*/ From,
@@ -60,10 +61,13 @@ export type VuetifyInputProps<From extends Record<PropertyKey, any>, TName exten
 // Utility type to extract _tag literal values from a discriminated union
 // For a union like { _tag: "A", ... } | { _tag: "B", ... }, this returns "A" | "B"
 // For nullable unions like { _tag: "A" } | { _tag: "B" } | null, this still returns "A" | "B" (excluding null)
-export type ExtractTagValue<From extends Record<PropertyKey, any>, TName extends DeepKeys<From>> =
-  DeepValue<From, TName> extends infer U ? U extends { _tag: infer Tag } ? Tag
-    : never
+export type ExtractTagValue<
+  From extends Record<PropertyKey, any>,
+  TName extends DeepKeys<From> | undefined
+> = IsUnion<TName> extends true ? From extends { _tag: infer Tag } ? Tag : never
+  : DeepValue<From, TName> extends infer U ? U extends { _tag: infer Tag } ? Tag
     : never
+  : never
 
 // Utility type to extract a specific branch from a discriminated union based on _tag value
 // For union { _tag: "A", foo: string } | { _tag: "B", bar: number } and Tag="A", returns { _tag: "A", foo: string }
@@ -72,16 +76,21 @@ export type ExtractUnionBranch<T, Tag> = T extends { _tag: Tag } ? T
 
 // Option type for TaggedUnion component with strongly-typed value
 // The value can be either one of the _tag values OR null (for the placeholder)
-export type TaggedUnionOption<From extends Record<PropertyKey, any>, TName extends DeepKeys<From>> = {
+export type TaggedUnionOption<From extends Record<PropertyKey, any>, TName extends DeepKeys<From> | undefined> = {
   readonly title: string
   readonly value: ExtractTagValue<From, TName> | null
 }
 
 // Options array must ALWAYS start with a null option (placeholder), followed by the actual options
-export type TaggedUnionOptionsArray<From extends Record<PropertyKey, any>, TName extends DeepKeys<From>> = readonly [
-  { readonly title: string; readonly value: null },
-  ...ReadonlyArray<{ readonly title: string; readonly value: ExtractTagValue<From, TName> }>
-]
+export type TaggedUnionOptionsArray<
+  From extends Record<PropertyKey, any>,
+  TName extends DeepKeys<From> | undefined
+> =
+  | readonly [
+    { readonly title: string; readonly value: null },
+    ...ReadonlyArray<{ readonly title: string; readonly value: ExtractTagValue<From, TName> }>
+  ]
+  | ReadonlyArray<{ readonly title: string; readonly value: ExtractTagValue<From, TName> }>
 
 // Props for TaggedUnion component
 export type TaggedUnionProps<From extends Record<PropertyKey, any>, TName extends DeepKeys<From>> = {

package/src/components/OmegaForm/OmegaFormStuff.ts

@@ -695,6 +695,58 @@ const flattenMeta = <From, To>(
     return flattenMeta(S.make(ast.from))
   }
 
+  // Handle root-level Union types (discriminated unions)
+  if (ast._tag === "Union") {
+    const unionAst = ast as any
+    const types = unionAst.types || []
+
+    // Filter out null/undefined types and unwrap transformations
+    const nonNullTypes = types
+      .filter((t: any) => t._tag !== "UndefinedKeyword" && t !== S.Null.ast)
+      .map(getTransformationFrom)
+
+    // Check if this is a discriminated union (all members are structs)
+    const allStructs = nonNullTypes.every((t: any) => t._tag === "TypeLiteral" && "propertySignatures" in t)
+
+    if (allStructs && nonNullTypes.length > 0) {
+      // Extract discriminator values from each union member
+      const discriminatorValues: any[] = []
+
+      // Merge metadata from all union members
+      for (const memberType of nonNullTypes) {
+        if ("propertySignatures" in memberType) {
+          // Find the discriminator field (usually _tag)
+          const tagProp = memberType.propertySignatures.find(
+            (p: any) => p.name.toString() === "_tag"
+          )
+
+          if (tagProp && S.AST.isLiteral(tagProp.type)) {
+            discriminatorValues.push(tagProp.type.literal)
+          }
+
+          // Create metadata for this member's properties
+          const memberMeta = createMeta<To>({
+            propertySignatures: memberType.propertySignatures
+          })
+
+          // Merge into result
+          Object.assign(result, memberMeta)
+        }
+      }
+
+      // Create metadata for the discriminator field
+      if (discriminatorValues.length > 0) {
+        result["_tag" as DeepKeys<To>] = {
+          type: "select",
+          members: discriminatorValues,
+          required: true
+        } as FieldMeta
+      }
+
+      return result
+    }
+  }
+
   if ("propertySignatures" in ast) {
     const meta = createMeta<To>({
       propertySignatures: ast.propertySignatures

package/src/components/OmegaForm/OmegaTaggedUnion.vue

@@ -4,59 +4,43 @@
   generic="
   From extends Record<PropertyKey, any>,
   To extends Record<PropertyKey, any>,
-  Name extends DeepKeys<From>
+  Name extends DeepKeys<From> | undefined = DeepKeys<From>
 "
 >
-import { type DeepKeys, type DeepValue } from "@tanstack/vue-form"
-import { onMounted } from "vue"
-import { type TaggedUnionOption, type TaggedUnionOptionsArray } from "./InputProps"
+import { type DeepKeys } from "@tanstack/vue-form"
+import { type TaggedUnionOption } from "./InputProps"
 import { type FieldPath } from "./OmegaFormStuff"
 import OmegaTaggedUnionInternal from "./OmegaTaggedUnionInternal.vue"
 import { type useOmegaForm } from "./useOmegaForm"
 
-const props = defineProps<{
-  name: Name
+defineProps<{
+  name?: Name
   form: ReturnType<typeof useOmegaForm<From, To>>
   type?: "select" | "radio"
-  options: TaggedUnionOptionsArray<From, Name>
+  options: TaggedUnionOption<From, Name>[]
   label?: string
 }>()
-
-// Initialize the union field on mount
-onMounted(() => {
-  const currentValue = props.form.getFieldValue(props.name)
-  const meta = props.form.meta[props.name as keyof typeof props.form.meta]
-
-  if (currentValue === undefined) {
-    if (meta?.nullableOrUndefined === "null" || !meta?.required) {
-      // Initialize to null for nullable/optional unions
-      props.form.setFieldValue(props.name, null as DeepValue<From, Name>)
-    } else {
-      // For required unions, initialize with first non-null option
-      const firstOption = props.options.find((opt) => opt.value !== null)
-      if (firstOption && firstOption.value) {
-        props.form.setFieldValue(props.name, {
-          _tag: firstOption.value
-        } as DeepValue<From, Name>)
-      }
-    }
-  }
-})
 </script>
 
 <template>
-  <form.Input
-    :name="`${name}._tag` as FieldPath<From>"
-    :label="label"
-    :type="type ?? 'select'"
-    :options="options as unknown as TaggedUnionOption<From, Name>[]"
-  />
-  <form.Field :name="name">
-    <template #default="{ field, state }">
-      <slot v-if="state.value" />
+  <form.Field :name="(name ? `${name}._tag` : '_tag') as any">
+    <template #default="inputProps">
+      <slot
+        name="OmegaCustomInput"
+        v-bind="inputProps"
+      >
+        <form.Input
+          :name="(name ? `${name}._tag` : '_tag') as FieldPath<From>"
+          :label="label"
+          :type="type ?? 'select'"
+          :options="options"
+        />
+      </slot>
+      <slot />
       <OmegaTaggedUnionInternal
-        :field="field as any"
-        :state="state.value"
+        :field="inputProps.field as any"
+        :state="inputProps.state.value"
+        :name="name"
       >
         <template
           v-for="(_, slotname) in $slots"
@@ -68,6 +52,10 @@ onMounted(() => {
           />
         </template>
       </OmegaTaggedUnionInternal>
+      <slot
+        v-if="inputProps.state.value"
+        name="OmegaCommon"
+      />
     </template>
   </form.Field>
 </template>

package/src/components/OmegaForm/OmegaTaggedUnionInternal.vue

@@ -1,7 +1,7 @@
 <template>
   <slot
-    v-if="state?._tag"
-    :name="state?._tag"
+    v-if="state"
+    :name="`${name ? `${name}.` : ''}${state}`"
     v-bind="{ field, state }"
   />
 </template>
@@ -22,10 +22,11 @@ import { type OmegaFieldInternalApi } from "./InputProps"
 const props = defineProps<{
   state: DeepValue<From, Name>
   field: OmegaFieldInternalApi<From, Name>
+  name?: DeepKeys<From>
 }>()
 
 // Watch for _tag changes
-watch(() => props.state?._tag, (newTag, oldTag) => {
+watch(() => props.state, (newTag, oldTag) => {
   if (newTag === null) {
     props.field.setValue(null as DeepValue<From, Name>)
   }