@effect-app/vue-components 4.0.0-beta.244 → 4.0.0-beta.245

package/dist/types/components/CommandButton.vue.d.ts

@@ -1,20 +1,37 @@
 import type { CommandBase, Progress } from "@effect-app/vue/makeClient";
+import * as Option from "effect-app/Option";
 import type * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
 import type { VBtn } from "vuetify/components";
 export type VBtnProps = VBtn["$props"];
 export interface ButtonProps extends /* @vue-ignore */ VBtnProps {
 }
-/** Command Button is an easy way to connect commands and have it execute on click, while keeping track of disabled/loading states automatically */
+/**
+ * CommandButton connects a command to a button and tracks disabled / loading state.
+ *
+ * Input variants:
+ * - `input`: pass a validated value; button enabled when command + disabled allow it.
+ * - `optionalInput`: pass an `Option<I>`. `Some` → enabled, click fires with the value.
+ *   `None` → disabled. Use this when the input is gated by a `computed` instead of
+ *   a `v-if` on the button itself.
+ * - neither: command takes no input.
+ */
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: <I = never, RA = unknown, RE = unknown>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         input: NoInfer<I>;
+        optionalInput?: undefined;
+        command: CommandBase<I, any, RA, RE>;
+        empty?: boolean;
+    } | {
+        optionalInput: Option.Option<NoInfer<I>>;
+        input?: undefined;
         command: CommandBase<I, any, RA, RE>;
         empty?: boolean;
     } | {
         command: CommandBase<any, any, RA, RE>;
         input?: undefined;
+        optionalInput?: undefined;
         empty?: boolean;
     }) & {
         disabled?: ButtonProps["disabled"];

package/dist/vue-components15.es.js

@@ -1,12 +1,12 @@
 import { isNullableOrUndefined as e, unwrapDeclaration as t } from "./vue-components14.es.js";
-import * as n from "effect-app/Schema";
-import * as r from "effect-app/Effect";
-import * as i from "effect-app/Option";
+import * as n from "effect-app/Option";
+import * as r from "effect-app/Schema";
+import * as i from "effect-app/Effect";
 //#region src/components/OmegaForm/meta/defaults.ts
 var a = (e) => {
 	if (e?.transformation?.decode?.run) try {
-		let t = r.runSync(e.transformation.decode.run(i.none()));
-		return i.isSome(t) ? t.value : void 0;
+		let t = i.runSync(e.transformation.decode.run(n.none()));
+		return n.isSome(t) ? t.value : void 0;
 	} catch {
 		return;
 	}
@@ -19,33 +19,33 @@ var a = (e) => {
 function s(e) {
 	return e && "members" in e && Array.isArray(e.members);
 }
-var c = (e) => typeof e == "object" && !!e && !Array.isArray(e), l = (e) => n.AST.isNull(e) || n.AST.isUndefined(e), u = (e) => {
-	let r = t(e);
-	return n.AST.isUnion(r) ? r.types.flatMap(u) : [r];
+var c = (e) => typeof e == "object" && !!e && !Array.isArray(e), l = (e) => r.AST.isNull(e) || r.AST.isUndefined(e), u = (e) => {
+	let n = t(e);
+	return r.AST.isUnion(n) ? n.types.flatMap(u) : [n];
 }, d = (e) => {
-	let r = t(e);
-	if (n.AST.isLiteral(r)) return r.literal;
-	if (n.AST.isUnion(r) && r.types.length === 1) return d(r.types[0]);
+	let n = t(e);
+	if (r.AST.isLiteral(n)) return n.literal;
+	if (r.AST.isUnion(n) && n.types.length === 1) return d(n.types[0]);
 }, f = (e, t) => {
 	if (!(!c(t) || t._tag === void 0)) return e.find((e) => {
 		let n = e.propertySignatures.find((e) => e.name.toString() === "_tag");
 		return n ? d(n.type) === t._tag : !1;
 	});
-}, p = (r, i = {}) => {
-	let a = r.ast, c = o(a);
+}, p = (n, i = {}) => {
+	let a = n.ast, c = o(a);
 	if (c !== void 0) return c;
-	if (e(r.ast) === "null") return null;
-	if (e(r.ast) === "undefined") return;
-	let l = n.AST.isObjects(a) ? a : n.AST.isDeclaration(a) ? t(a) : void 0;
-	if (l && n.AST.isObjects(l)) {
+	if (e(n.ast) === "null") return null;
+	if (e(n.ast) === "undefined") return;
+	let l = r.AST.isObjects(a) ? a : r.AST.isDeclaration(a) ? t(a) : void 0;
+	if (l && r.AST.isObjects(l)) {
 		let t = {};
-		for (let r of l.propertySignatures) {
-			let a = r.name.toString(), s = r.type, c = o(s);
+		for (let n of l.propertySignatures) {
+			let a = n.name.toString(), s = n.type, c = o(s);
 			if (c !== void 0) {
 				t[a] = c;
 				continue;
 			}
-			let l = p(n.make(s), i[a] || {});
+			let l = p(r.make(s), i[a] || {});
 			l === void 0 ? e(s) === "undefined" && (t[a] = void 0) : t[a] = l;
 		}
 		return {
@@ -53,31 +53,31 @@ var c = (e) => typeof e == "object" && !!e && !Array.isArray(e), l = (e) => n.AS
 			...i
 		};
 	}
-	let u = n.AST.isUnion(a) ? a.types : s(r) ? r.members.map((e) => e.ast) : void 0;
+	let u = r.AST.isUnion(a) ? a.types : s(n) ? n.members.map((e) => e.ast) : void 0;
 	if (u) {
 		let e = {};
-		for (let r of u) {
-			let i = t(r);
-			if (n.AST.isObjects(i)) for (let t of i.propertySignatures) {
+		for (let n of u) {
+			let i = t(n);
+			if (r.AST.isObjects(i)) for (let t of i.propertySignatures) {
 				let n = t.name.toString(), r = o(t.type), i = e[n] ? o(e[n].ast) : void 0;
 				(!e[n] || r !== void 0 && i === void 0) && (e[n] = { ast: t.type });
 			}
 		}
-		return Object.keys(e).length === 0 ? Object.keys(i).length > 0 ? i : void 0 : Object.entries(e).reduce((e, [t, { ast: r }]) => (e[t] = p(n.make(r), i[t] || {}), e), i);
+		return Object.keys(e).length === 0 ? Object.keys(i).length > 0 ? i : void 0 : Object.entries(e).reduce((e, [t, { ast: n }]) => (e[t] = p(r.make(n), i[t] || {}), e), i);
 	}
 	if (Object.keys(i).length === 0) {
-		if (n.AST.isString(a)) return "";
-		if (n.AST.isBoolean(a)) return !1;
+		if (r.AST.isString(a)) return "";
+		if (r.AST.isBoolean(a)) return !1;
 	}
-}, m = (r, i, a = !1) => {
-	let s = t(r);
+}, m = (n, i, a = !1) => {
+	let s = t(n);
 	switch (s._tag) {
 		case "Union": {
 			if (i == null) return i;
-			let e = u(s), t = e.filter(n.AST.isObjects);
+			let e = u(s), t = e.filter(r.AST.isObjects);
 			if (t.length === 0) return i;
-			let r = e.some(l), o = f(t, i);
-			return o ? m(o, i, a || r) : r && t.length === 1 ? m(t[0], i, !0) : i;
+			let n = e.some(l), o = f(t, i);
+			return o ? m(o, i, a || n) : n && t.length === 1 ? m(t[0], i, !0) : i;
 		}
 		case "Arrays": {
 			if (!Array.isArray(i)) return i;

package/dist/vue-components19.es.js

@@ -1,5 +1,5 @@
-import * as e from "effect-app/Schema";
-import * as t from "effect-app/Option";
+import * as e from "effect-app/Option";
+import * as t from "effect-app/Schema";
 //#region src/components/OmegaForm/validation/localized.ts
 var n = (n) => ({
 	leafHook: (r) => {
@@ -9,18 +9,18 @@ var n = (n) => ({
 			case "MissingKey": return n("validation.empty");
 			case "InvalidType": {
 				let i = r.ast;
-				return t.isNone(r.actual) || t.isSome(r.actual) && r.actual.value === void 0 || e.AST.isString(i) ? n("validation.empty") : e.AST.isBoolean(i) ? n("validation.not_a_valid", { type: "boolean" }) : e.AST.isNumber(i) ? n("validation.number.expected", { actualValue: t.isSome(r.actual) ? String(r.actual.value) : "NaN" }) : n("validation.not_a_valid");
+				return e.isNone(r.actual) || e.isSome(r.actual) && r.actual.value === void 0 || t.AST.isString(i) ? n("validation.empty") : t.AST.isBoolean(i) ? n("validation.not_a_valid", { type: "boolean" }) : t.AST.isNumber(i) ? n("validation.number.expected", { actualValue: e.isSome(r.actual) ? String(r.actual.value) : "NaN" }) : n("validation.not_a_valid");
 			}
 			default: return n("validation.not_a_valid");
 		}
 	},
-	checkHook: (t) => {
-		if (t.filter.annotations?.identifier === "Email") return n("validation.email.invalid");
-		let r = t.filter.annotations?.meta ?? {};
+	checkHook: (e) => {
+		if (e.filter.annotations?.identifier === "Email") return n("validation.email.invalid");
+		let r = e.filter.annotations?.meta ?? {};
 		switch (r._tag) {
 			case "isMinLength": return r.minLength === 1 ? n("validation.empty") : n("validation.string.minLength", { minLength: r.minLength });
 			case "isMaxLength": return n("validation.string.maxLength", { maxLength: r.maxLength });
-			case "isInt": return n("validation.integer.expected", { actualValue: t.actual === void 0 ? "NaN" : String(t.actual) });
+			case "isInt": return n("validation.integer.expected", { actualValue: e.actual === void 0 ? "NaN" : String(e.actual) });
 			case "isGreaterThanOrEqualTo": return n(r.minimum === 0 ? "validation.number.positive" : "validation.number.min", {
 				minimum: r.minimum,
 				isExclusive: !0
@@ -37,57 +37,57 @@ var n = (n) => ({
 				maximum: r.exclusiveMaximum,
 				isExclusive: !1
 			});
-			default: return e.SchemaIssue.defaultCheckHook(t);
+			default: return t.SchemaIssue.defaultCheckHook(e);
 		}
 	}
-}), r = (t, r) => {
+}), r = (e, r) => {
 	let { checkHook: i, leafHook: a } = n(r);
-	return e.toStandardSchemaV1(t, {
+	return t.toStandardSchemaV1(e, {
 		leafHook: a,
 		checkHook: i
 	});
-}, i = (t) => e.AST.isUnion(t) && t.types.every(e.AST.isLiteral), a = (t, n) => {
-	if (i(t)) {
-		if (t.annotations?.message !== void 0) return t;
-		let r = t.types.map((e) => e.literal);
-		return new e.AST.Union(t.types, t.mode, {
-			...t.annotations,
+}, i = (e) => t.AST.isUnion(e) && e.types.every(t.AST.isLiteral), a = (e, n) => {
+	if (i(e)) {
+		if (e.annotations?.message !== void 0) return e;
+		let r = e.types.map((e) => e.literal);
+		return new t.AST.Union(e.types, e.mode, {
+			...e.annotations,
 			message: n("validation.not_a_valid", {
 				type: "select",
 				message: r.join(", ")
 			})
-		}, t.checks, t.encoding, t.context);
+		}, e.checks, e.encoding, e.context);
 	}
-	if (e.AST.isUnion(t)) {
-		let r = t.types.map((e) => a(e, n));
-		return r.some((e, n) => e !== t.types[n]) ? new e.AST.Union(r, t.mode, t.annotations, t.checks, t.encoding, t.context) : t;
+	if (t.AST.isUnion(e)) {
+		let r = e.types.map((e) => a(e, n));
+		return r.some((t, n) => t !== e.types[n]) ? new t.AST.Union(r, e.mode, e.annotations, e.checks, e.encoding, e.context) : e;
 	}
-	if (e.AST.isArrays(t)) {
-		let r = t.rest.map((e) => a(e, n)), o = t.elements.map((e) => a(e, n)), s = t.annotations;
-		if (t.annotations?.message === void 0 && t.rest.length === 1 && i(t.rest[0])) {
-			let e = t.rest[0].types.map((e) => e.literal);
+	if (t.AST.isArrays(e)) {
+		let r = e.rest.map((e) => a(e, n)), o = e.elements.map((e) => a(e, n)), s = e.annotations;
+		if (e.annotations?.message === void 0 && e.rest.length === 1 && i(e.rest[0])) {
+			let t = e.rest[0].types.map((e) => e.literal);
 			s = {
-				...t.annotations,
+				...e.annotations,
 				message: n("validation.not_a_valid", {
 					type: "multiple",
-					message: e.join(", ")
+					message: t.join(", ")
 				})
 			};
 		}
-		let c = r.some((e, n) => e !== t.rest[n]), l = o.some((e, n) => e !== t.elements[n]);
-		return !c && !l && s === t.annotations ? t : new e.AST.Arrays(t.isMutable, o, r, s, t.checks, t.encoding, t.context);
+		let c = r.some((t, n) => t !== e.rest[n]), l = o.some((t, n) => t !== e.elements[n]);
+		return !c && !l && s === e.annotations ? e : new t.AST.Arrays(e.isMutable, o, r, s, e.checks, e.encoding, e.context);
 	}
-	if (e.AST.isObjects(t)) {
-		let r = t.propertySignatures.map((t) => {
-			let r = a(t.type, n);
-			return r === t.type ? t : new e.AST.PropertySignature(t.name, r);
+	if (t.AST.isObjects(e)) {
+		let r = e.propertySignatures.map((e) => {
+			let r = a(e.type, n);
+			return r === e.type ? e : new t.AST.PropertySignature(e.name, r);
 		});
-		return r.some((e, n) => e !== t.propertySignatures[n]) ? new e.AST.Objects(r, t.indexSignatures, t.annotations, t.checks, t.encoding, t.context) : t;
+		return r.some((t, n) => t !== e.propertySignatures[n]) ? new t.AST.Objects(r, e.indexSignatures, e.annotations, e.checks, e.encoding, e.context) : e;
 	}
-	return t;
-}, o = (t, n) => {
-	let r = a(t.ast, n);
-	return r === t.ast ? t : e.make(r);
+	return e;
+}, o = (e, n) => {
+	let r = a(e.ast, n);
+	return r === e.ast ? e : t.make(r);
 };
 //#endregion
 export { o as annotateLiteralUnionMessages, n as makeStandardSchemaV1Hooks, r as toLocalizedStandardSchemaV1 };

package/dist/vue-components3.es.js

@@ -1,9 +1,11 @@
 import { computed as e, createBlock as t, createCommentVNode as n, createElementVNode as r, createSlots as i, createTextVNode as a, createVNode as o, defineComponent as s, mergeProps as c, openBlock as l, renderSlot as u, resolveComponent as d, toDisplayString as f, withCtx as p } from "vue";
+import * as m from "effect-app/Option";
 //#region src/components/CommandButton.vue?vue&type=script&setup=true&lang.ts
-var m = { class: "ml-2" }, h = { class: "ml-2" }, g = /* @__PURE__ */ s({
+var h = { class: "ml-2" }, g = { class: "ml-2" }, _ = /* @__PURE__ */ s({
 	name: "CommandButton",
 	props: {
 		input: {},
+		optionalInput: {},
 		command: {},
 		empty: { type: Boolean },
 		disabled: {},
@@ -11,70 +13,80 @@ var m = { class: "ml-2" }, h = { class: "ml-2" }, g = /* @__PURE__ */ s({
 		mapProgress: { type: Function }
 	},
 	setup(s) {
-		let g = s, _ = e(() => g.command.blocked || g.disabled), v = e(() => {
-			if (g.mapProgress) {
-				let e = g.command.result;
-				return e === void 0 ? void 0 : g.mapProgress(e);
+		let _ = s, v = e(() => "optionalInput" in _ && _.optionalInput !== void 0 ? m.isSome(_.optionalInput) ? {
+			_tag: "ready",
+			value: _.optionalInput.value
+		} : { _tag: "missing" } : "input" in _ && _.input !== void 0 ? {
+			_tag: "ready",
+			value: _.input
+		} : { _tag: "void" }), y = e(() => _.command.blocked || _.disabled || v.value._tag === "missing"), b = e(() => {
+			if (_.mapProgress) {
+				let e = _.command.result;
+				return e === void 0 ? void 0 : _.mapProgress(e);
 			}
-			return g.command.progress;
-		}), y = e(() => {
-			let e = v.value;
+			return _.command.progress;
+		}), x = e(() => {
+			let e = b.value;
 			if (e !== void 0) return typeof e == "string" ? e : e.text;
-		}), b = e(() => {
-			let e = v.value;
+		}), S = e(() => {
+			let e = b.value;
 			return typeof e == "object" && e ? e.percentage : void 0;
-		}), x = () => {
-			if (_.value) return;
-			let e = "input" in g && g.input ? g.input : void 0, t = g.command.handle;
-			t(e);
+		}), C = () => {
+			if (y.value) return;
+			let e = v.value, t = _.command.handle;
+			e._tag === "ready" ? t(e.value) : e._tag === "void" && t(void 0);
 		};
-		return (e, g) => {
-			let v = d("v-progress-circular"), S = d("v-btn");
-			return s.command.allowed && !s.empty ? (l(), t(S, c({ key: 0 }, e.$attrs, {
+		return (e, m) => {
+			let _ = d("v-progress-circular"), v = d("v-btn");
+			return s.command.allowed && !s.empty ? (l(), t(v, c({ key: 0 }, e.$attrs, {
 				loading: s.command.waiting,
-				"aria-disabled": _.value,
+				disabled: y.value,
+				"aria-disabled": y.value,
 				title: s.title ?? s.command.action,
-				class: { "v-btn--disabled": _.value },
-				onClick: x
+				class: { "v-btn--disabled": y.value },
+				onClick: C
 			}), i({
 				default: p(() => [u(e.$slots, "default", {
 					loading: s.command.waiting,
-					disabled: _.value,
+					disabled: y.value,
 					label: s.command.label,
 					title: s.title ?? s.command.action
 				}, () => [a(f(s.command.label), 1)])]),
 				_: 2
-			}, [y.value === void 0 ? void 0 : {
+			}, [x.value === void 0 ? void 0 : {
 				name: "loader",
-				fn: p(() => [o(v, {
-					indeterminate: b.value === void 0,
-					"model-value": b.value,
+				fn: p(() => [o(_, {
+					indeterminate: S.value === void 0,
+					"model-value": S.value,
 					size: "20",
 					width: "2"
-				}, null, 8, ["indeterminate", "model-value"]), r("span", m, f(y.value), 1)]),
+				}, null, 8, ["indeterminate", "model-value"]), r("span", h, f(x.value), 1)]),
 				key: "0"
 			}]), 1040, [
 				"loading",
+				"disabled",
 				"aria-disabled",
 				"title",
 				"class"
-			])) : s.command.allowed ? (l(), t(S, c({ key: 1 }, e.$attrs, {
+			])) : s.command.allowed ? (l(), t(v, c({ key: 1 }, e.$attrs, {
 				loading: s.command.waiting,
-				"aria-disabled": _.value,
+				disabled: y.value,
+				"aria-disabled": y.value,
 				title: s.title ?? s.command.action,
-				class: { "v-btn--disabled": _.value },
-				onClick: x
-			}), i({ _: 2 }, [y.value === void 0 ? void 0 : {
+				class: { "v-btn--disabled": y.value },
+				onClick: C
+			}), i({ _: 2 }, [x.value === void 0 ? void 0 : {
 				name: "loader",
-				fn: p(() => [o(v, {
-					indeterminate: b.value === void 0,
-					"model-value": b.value,
+				fn: p(() => [o(_, {
+					indeterminate: S.value === void 0,
+					"model-value": S.value,
 					size: "20",
 					width: "2"
-				}, null, 8, ["indeterminate", "model-value"]), r("span", h, f(y.value), 1)]),
+				}, null, 8, ["indeterminate", "model-value"]), r("span", g, f(x.value), 1)]),
 				key: "0"
 			}]), 1040, [
 				"loading",
+				"disabled",
 				"aria-disabled",
 				"title",
 				"class"
@@ -83,4 +95,4 @@ var m = { class: "ml-2" }, h = { class: "ml-2" }, g = /* @__PURE__ */ s({
 	}
 });
 //#endregion
-export { g as default };
+export { _ as default };

package/dist/vue-components67.es.js

@@ -1,21 +1,21 @@
 import { context as e } from "./vue-components64.es.js";
 import { trace as t } from "./vue-components66.es.js";
-import * as n from "effect-app/Effect";
-import * as r from "effect-app/Option";
+import * as n from "effect-app/Option";
+import * as r from "effect-app/Effect";
 import { runtimeFiberAsPromise as i } from "effect-app/utils";
 import * as a from "effect/Data";
 import * as o from "effect/Fiber";
 //#region src/components/OmegaForm/submit.ts
-var s = class extends a.TaggedError("FormErrors") {}, c = (n, r) => n ? e.with(t.setSpan(e.active(), n), r) : r(), l = (e, t, r) => {
+var s = class extends a.TaggedError("FormErrors") {}, c = (n, r) => n ? e.with(t.setSpan(e.active(), n), r) : r(), l = (e, t, n) => {
 	if (e) return ({ formApi: a, meta: s, value: l }) => c(s?.currentSpan, async () => {
 		let c = e({
 			formApi: a,
 			meta: s,
-			value: await r(t(l))
+			value: await n(t(l))
 		});
 		if (o.isFiber(c)) return await i(c);
-		if (n.isEffect(c)) {
-			let e = await r(c);
+		if (r.isEffect(c)) {
+			let e = await n(c);
 			return o.isFiber(e) ? await i(e) : e;
 		}
 		return c;
@@ -24,15 +24,15 @@ var s = class extends a.TaggedError("FormErrors") {}, c = (n, r) => n ? e.with(t
 	let a = i.handleSubmit.bind(i), o = async (e) => await a(e), c = (n) => o({
 		currentSpan: t.getSpan(e.active()),
 		...n
-	}), l = (e) => n.currentSpan.pipe(n.option, n.flatMap((t) => n.promise(() => o(r.isSome(t) ? {
+	}), l = (e) => r.currentSpan.pipe(r.option, r.flatMap((t) => r.promise(() => o(n.isSome(t) ? {
 		currentSpan: t.value,
 		...e
 	} : e))));
 	return {
 		handleSubmit: c,
-		handleSubmitEffect: (e) => e?.checkErrors ? l(e?.meta).pipe(n.flatMap(n.fnUntraced(function* () {
+		handleSubmitEffect: (e) => e?.checkErrors ? l(e?.meta).pipe(r.flatMap(r.fnUntraced(function* () {
 			let e = i.getAllErrors();
-			if (Object.keys(e.fields).length || e.form.errors.length) return yield* n.fail(new s({
+			if (Object.keys(e.fields).length || e.form.errors.length) return yield* r.fail(new s({
 				form: e.form,
 				fields: e.fields
 			}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "4.0.0-beta.244",
+  "version": "4.0.0-beta.245",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "effect": "^4.0.0-beta.70",
@@ -57,8 +57,8 @@
     "highlight.js": "^11.11.1",
     "mitt": "^3.0.1",
     "vue3-highlightjs": "^1.0.5",
-    "@effect-app/vue": "4.0.0-beta.244",
-    "effect-app": "4.0.0-beta.244"
+    "@effect-app/vue": "4.0.0-beta.245",
+    "effect-app": "4.0.0-beta.245"
   },
   "scripts": {
     "check": "vue-tsc",

package/src/components/CommandButton.vue

@@ -4,6 +4,7 @@
   generic="I = never, RA = unknown, RE = unknown"
 >
 import type { CommandBase, Progress } from "@effect-app/vue/makeClient"
+import * as Option from "effect-app/Option"
 import type * as AsyncResult from "effect/unstable/reactivity/AsyncResult"
 import { computed } from "vue"
 import type { VBtn } from "vuetify/components"
@@ -15,12 +16,20 @@ const props = defineProps<
   & (
     | {
       input: NoInfer<I>
+      optionalInput?: undefined
+      command: CommandBase<I, any, RA, RE>
+      empty?: boolean
+    }
+    | {
+      optionalInput: Option.Option<NoInfer<I>>
+      input?: undefined
       command: CommandBase<I, any, RA, RE>
       empty?: boolean
     }
     | {
       command: CommandBase<any, any, RA, RE>
       input?: undefined
+      optionalInput?: undefined
       empty?: boolean
     }
   )
@@ -32,7 +41,23 @@ const props = defineProps<
   & ButtonProps
 >()
 
-const isDisabled = computed(() => props.command.blocked || props.disabled)
+const resolvedInput = computed<{ _tag: "ready"; value: I } | { _tag: "missing" } | { _tag: "void" }>(() => {
+  if ("optionalInput" in props && props.optionalInput !== undefined) {
+    return Option.isSome(props.optionalInput)
+      ? { _tag: "ready", value: props.optionalInput.value }
+      : { _tag: "missing" }
+  }
+  if ("input" in props && props.input !== undefined) {
+    return { _tag: "ready", value: props.input as I }
+  }
+  return { _tag: "void" }
+})
+
+const isDisabled = computed(() =>
+  props.command.blocked
+  || props.disabled
+  || resolvedInput.value._tag === "missing"
+)
 
 const resolvedProgress = computed(() => {
   if (props.mapProgress) {
@@ -54,21 +79,26 @@ const progressPercentage = computed(() => {
 })
 
 const handleClick = () => {
-  // Block execution if button is disabled
-  if (isDisabled.value) {
-    return
-  }
-
-  const input = ("input" in props && props.input
-    ? props.input
-    : undefined) as unknown as I
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- command.handle has a generic signature mismatched by erased input type
+  if (isDisabled.value) return
+  const ri = resolvedInput.value
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handle = props.command.handle as any
-  handle(input)
+  if (ri._tag === "ready") handle(ri.value)
+  else if (ri._tag === "void") handle(undefined)
+  // _tag === "missing" can't reach here — guarded by isDisabled
 }
 </script>
 <script lang="ts">
-/** Command Button is an easy way to connect commands and have it execute on click, while keeping track of disabled/loading states automatically */
+/**
+ * CommandButton connects a command to a button and tracks disabled / loading state.
+ *
+ * Input variants:
+ * - `input`: pass a validated value; button enabled when command + disabled allow it.
+ * - `optionalInput`: pass an `Option<I>`. `Some` → enabled, click fires with the value.
+ *   `None` → disabled. Use this when the input is gated by a `computed` instead of
+ *   a `v-if` on the button itself.
+ * - neither: command takes no input.
+ */
 export default {
   name: "CommandButton"
 }
@@ -78,6 +108,7 @@ export default {
     v-if="command.allowed && !empty"
     v-bind="$attrs"
     :loading="command.waiting"
+    :disabled="isDisabled"
     :aria-disabled="isDisabled"
     :title="title ?? command.action"
     :class="{ 'v-btn--disabled': isDisabled }"
@@ -108,6 +139,7 @@ export default {
     v-else-if="command.allowed"
     v-bind="$attrs"
     :loading="command.waiting"
+    :disabled="isDisabled"
     :aria-disabled="isDisabled"
     :title="title ?? command.action"
     :class="{ 'v-btn--disabled': isDisabled }"