@assistant-ui/react-generative-ui 0.0.21 → 0.0.22

package/dist/vocabulary/interactive.js

@@ -1,35 +1,383 @@
-import { GENERATED_NAME_ATTR } from "../constants.js";
+import { useRadioGroupName } from "../RadioGroupScope.js";
+import { CHECKBOX_GROUP_ATTR, FIELD_NAME_ATTR, GENERATED_NAME_ATTR } from "../constants.js";
 import { BUTTON_STYLES } from "../ir.js";
+import { A2uiBindingContext, useA2uiBinding } from "../a2ui/BindingContext.js";
+import { useAnsweredValue } from "../answeredValues.js";
 import { toTextContent } from "./toTextContent.js";
 import { actionAttr, fire } from "./dispatch.js";
-import { useId } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { z } from "zod";
 //#region src/vocabulary/interactive.tsx
 const optionSchema = z.object({
 	label: z.string(),
 	value: z.string()
 });
-const isOption = (option) => option !== null && typeof option === "object" && "label" in option && typeof option.label === "string" && "value" in option && typeof option.value === "string";
-function RadioGroupRender({ options, name, label, defaultValue, children, $action, $dispatch }) {
-	const generatedName = useId();
-	const fieldName = name ?? generatedName;
-	const safeOptions = Array.isArray(options) ? options : [];
+const describedOptionSchema = optionSchema.extend({ description: z.string().optional() });
+const isOption = (option) => option !== null && typeof option === "object" && "label" in option && typeof option.label === "string" && (!("description" in option) || typeof option.description === "string") && "value" in option && typeof option.value === "string";
+const mapOptions = (options, render) => {
+	const occurrences = /* @__PURE__ */ new Map();
+	return (Array.isArray(options) ? options : []).map((option) => {
+		if (!isOption(option)) return null;
+		const occurrence = occurrences.get(option.value) ?? 0;
+		occurrences.set(option.value, occurrence + 1);
+		return render(option, JSON.stringify([option.value, occurrence]));
+	});
+};
+function RadioGroupRender({ value, options, name, label, defaultValue, children, $action, $dispatch }) {
+	const groupName = useRadioGroupName(name);
+	const answeredValue = useAnsweredValue(name);
+	const updateBinding = useA2uiBinding(name);
+	const isBound = updateBinding !== void 0;
+	const initialValue = typeof answeredValue === "string" ? answeredValue : defaultValue;
 	return /* @__PURE__ */ jsxs("fieldset", {
 		"data-aui": "radiogroup",
 		"data-aui-action": actionAttr($action),
 		"aria-label": label,
-		children: [safeOptions.map((option, i) => isOption(option) ? /* @__PURE__ */ jsxs("label", {
+		children: [mapOptions(options, (option, key) => /* @__PURE__ */ jsxs("label", {
 			"data-aui": "radiogroup-option",
 			children: [/* @__PURE__ */ jsx("input", {
 				type: "radio",
+				name: groupName,
+				[FIELD_NAME_ATTR]: name,
+				...name == null ? { [GENERATED_NAME_ATTR]: "" } : {},
+				value: option.value,
+				...isBound ? { checked: (answeredValue ?? value) === option.value } : { defaultChecked: initialValue === option.value },
+				onChange: (e) => {
+					updateBinding?.(option.value);
+					fire($action, $dispatch, option.value, e.currentTarget);
+				}
+			}), option.description ? /* @__PURE__ */ jsxs("span", {
+				"data-aui": "option-content",
+				children: [/* @__PURE__ */ jsx("span", {
+					"data-aui": "option-label",
+					children: option.label
+				}), /* @__PURE__ */ jsx("span", {
+					"data-aui": "option-description",
+					children: option.description
+				})]
+			}) : option.label]
+		}, key)), children]
+	}, initialValue);
+}
+const checkedGroupValues = (input) => Array.from(input.closest("fieldset")?.querySelectorAll(`:scope > label > input[data-aui-checkbox-group]:checked`) ?? [], (checkbox) => checkbox.value);
+function CheckboxGroupRender({ value, options, name, label, defaultValue, children, $action, $dispatch }) {
+	const generatedName = React.useId();
+	const fieldName = name ?? generatedName;
+	const answeredValue = useAnsweredValue(name);
+	const updateBinding = useA2uiBinding(name);
+	const isBound = updateBinding !== void 0;
+	const checkedValues = Array.isArray(answeredValue) && answeredValue.every((value) => typeof value === "string") ? answeredValue : Array.isArray(defaultValue) ? defaultValue : [];
+	return /* @__PURE__ */ jsxs("fieldset", {
+		"data-aui": "checkboxgroup",
+		"data-aui-action": actionAttr($action),
+		"aria-label": label,
+		children: [mapOptions(options, (option, key) => /* @__PURE__ */ jsxs("label", {
+			"data-aui": "checkboxgroup-option",
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "checkbox",
 				name: fieldName,
+				[CHECKBOX_GROUP_ATTR]: "",
 				...name == null ? { [GENERATED_NAME_ATTR]: "" } : {},
 				value: option.value,
-				defaultChecked: defaultValue === option.value,
-				onChange: () => fire($action, $dispatch, option.value)
-			}), option.label]
-		}, i) : null), children]
+				...isBound ? { checked: (Array.isArray(answeredValue) ? checkedValues : value ?? []).includes(option.value) } : { defaultChecked: checkedValues.includes(option.value) },
+				onChange: (e) => {
+					const selected = checkedGroupValues(e.currentTarget);
+					updateBinding?.(selected);
+					fire($action, $dispatch, selected, e.currentTarget);
+				}
+			}), option.description ? /* @__PURE__ */ jsxs("span", {
+				"data-aui": "option-content",
+				children: [/* @__PURE__ */ jsx("span", {
+					"data-aui": "option-label",
+					children: option.label
+				}), /* @__PURE__ */ jsx("span", {
+					"data-aui": "option-description",
+					children: option.description
+				})]
+			}) : option.label]
+		}, key)), children]
+	}, JSON.stringify(checkedValues));
+}
+function SelectRender({ value, options, placeholder, label, name, defaultValue, $action, $dispatch, children }) {
+	const answeredValue = useAnsweredValue(name);
+	const updateBinding = useA2uiBinding(name);
+	const isBound = updateBinding !== void 0;
+	const placeholderText = toTextContent(placeholder);
+	const initialValue = typeof answeredValue === "string" ? answeredValue : typeof defaultValue === "string" ? defaultValue : "";
+	return /* @__PURE__ */ jsxs("select", {
+		"data-aui": "select",
+		"data-aui-action": actionAttr($action),
+		name,
+		"aria-label": label,
+		...isBound ? { value: typeof answeredValue === "string" ? answeredValue : value ?? "" } : { defaultValue: initialValue },
+		onChange: (e) => {
+			updateBinding?.(e.currentTarget.value);
+			fire($action, $dispatch, e.currentTarget.value, e.currentTarget);
+		},
+		children: [
+			placeholderText ? /* @__PURE__ */ jsx("option", {
+				value: "",
+				disabled: true,
+				children: placeholderText
+			}) : null,
+			mapOptions(options, (option, key) => /* @__PURE__ */ jsx("option", {
+				value: option.value,
+				children: option.label
+			}, key)),
+			children
+		]
+	}, initialValue);
+}
+function InputRender({ value, inputType, placeholder, multiline, label, name, defaultValue, $action, $dispatch }) {
+	const answeredValue = useAnsweredValue(name);
+	const updateBinding = useA2uiBinding(name);
+	const isBound = updateBinding !== void 0;
+	const initialValue = typeof answeredValue === "string" ? answeredValue : defaultValue;
+	const submit = (control) => fire($action, $dispatch, control.value, control);
+	return multiline && (inputType === void 0 || inputType === "text") ? /* @__PURE__ */ jsx("textarea", {
+		"data-aui": "input",
+		"data-aui-multiline": true,
+		"data-aui-action": actionAttr($action),
+		name,
+		"aria-label": label,
+		placeholder,
+		...isBound ? { value: typeof answeredValue === "string" ? answeredValue : value ?? "" } : { defaultValue: initialValue },
+		onChange: updateBinding ? (e) => updateBinding(e.currentTarget.value) : void 0,
+		onKeyDown: (e) => {
+			if (e.key !== "Enter" || !(e.ctrlKey || e.metaKey) || e.nativeEvent.isComposing) return;
+			if (e.currentTarget.form) {
+				e.preventDefault();
+				HTMLFormElement.prototype.requestSubmit.call(e.currentTarget.form);
+			} else submit(e.currentTarget);
+		}
+	}, initialValue) : /* @__PURE__ */ jsx("input", {
+		type: inputType,
+		step: inputType === "number" ? "any" : void 0,
+		"data-aui": "input",
+		"data-aui-action": actionAttr($action),
+		name,
+		"aria-label": label,
+		placeholder,
+		...isBound ? { value: typeof answeredValue === "string" ? answeredValue : value ?? "" } : { defaultValue: initialValue },
+		onChange: updateBinding ? (e) => updateBinding(e.currentTarget.value) : void 0,
+		onKeyDown: (e) => {
+			if (e.key === "Enter" && !e.nativeEvent.isComposing && !e.currentTarget.form) submit(e.currentTarget);
+		}
+	}, initialValue);
+}
+function DatePickerRender({ value, min, max, label, name, $action, $dispatch }) {
+	const answeredValue = useAnsweredValue(name);
+	const updateBinding = useA2uiBinding(name);
+	const isBound = updateBinding !== void 0;
+	const initialValue = typeof answeredValue === "string" ? answeredValue : value;
+	return /* @__PURE__ */ jsx("input", {
+		type: "date",
+		"data-aui": "datepicker",
+		"data-aui-action": actionAttr($action),
+		name,
+		"aria-label": label,
+		...isBound ? { value: typeof answeredValue === "string" ? answeredValue : value ?? "" } : { defaultValue: initialValue },
+		min,
+		max,
+		onChange: (e) => {
+			updateBinding?.(e.currentTarget.value);
+			fire($action, $dispatch, e.currentTarget.value, e.currentTarget);
+		}
+	}, isBound ? void 0 : initialValue);
+}
+function CheckboxRender({ checked, label, name, defaultChecked, variant = "checkbox", $action, $dispatch }) {
+	const answeredValue = useAnsweredValue(name);
+	const updateBinding = useA2uiBinding(name);
+	const isBound = updateBinding !== void 0;
+	const initialChecked = typeof answeredValue === "boolean" ? answeredValue : defaultChecked;
+	return /* @__PURE__ */ jsxs("label", {
+		"data-aui": "checkbox",
+		"data-aui-variant": variant === "switch" ? variant : void 0,
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "checkbox",
+			role: variant === "switch" ? "switch" : void 0,
+			"data-aui-action": actionAttr($action),
+			name,
+			...isBound ? { checked: typeof answeredValue === "boolean" ? answeredValue : checked === true } : { defaultChecked: initialChecked },
+			onChange: (e) => {
+				updateBinding?.(e.currentTarget.checked);
+				fire($action, $dispatch, e.currentTarget.checked, e.currentTarget);
+			}
+		}, String(initialChecked)), /* @__PURE__ */ jsx("span", {
+			"data-aui": "checkbox-label",
+			children: toTextContent(label)
+		})]
+	});
+}
+const finiteNumber = (value) => typeof value === "number" && Number.isFinite(value);
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+function SliderControl({ controlledValue, name, label, min, max, step, initialValue, unit, $action, $dispatch }) {
+	const updateBinding = useA2uiBinding(name);
+	const [localValue, setValue] = React.useState(initialValue);
+	const value = controlledValue ?? localValue;
+	const pointerActive = React.useRef(false);
+	const keyboardActive = React.useRef(false);
+	const lastCommitted = React.useRef(initialValue);
+	const currentValue = (input) => clamp(Number(input.value), min, max);
+	const commit = (input) => {
+		if (controlledValue !== void 0) return;
+		const nextValue = currentValue(input);
+		setValue(nextValue);
+		if (lastCommitted.current === nextValue) return;
+		lastCommitted.current = nextValue;
+		fire($action, $dispatch, nextValue, input);
+	};
+	return /* @__PURE__ */ jsxs("label", {
+		"data-aui": "slider-field",
+		children: [
+			label ? /* @__PURE__ */ jsx("span", {
+				"data-aui": "slider-label",
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsx("input", {
+				type: "range",
+				"data-aui": "slider",
+				"data-aui-action": actionAttr($action),
+				name,
+				"aria-label": label,
+				"aria-valuetext": unit ? `${value} ${unit}` : String(value),
+				min,
+				max,
+				step,
+				...controlledValue !== void 0 ? { value } : { defaultValue: initialValue },
+				onInput: (e) => {
+					const nextValue = currentValue(e.currentTarget);
+					if (controlledValue !== void 0) updateBinding?.(nextValue);
+					else setValue(nextValue);
+				},
+				onPointerDown: () => {
+					pointerActive.current = true;
+				},
+				onPointerUp: (e) => {
+					pointerActive.current = false;
+					commit(e.currentTarget);
+				},
+				onKeyDown: (e) => {
+					keyboardActive.current = [
+						"ArrowDown",
+						"ArrowLeft",
+						"ArrowRight",
+						"ArrowUp",
+						"End",
+						"Home",
+						"PageDown",
+						"PageUp"
+					].includes(e.key);
+				},
+				onKeyUp: (e) => {
+					if (!keyboardActive.current) return;
+					keyboardActive.current = false;
+					commit(e.currentTarget);
+				},
+				onChange: (e) => {
+					if (!pointerActive.current && !keyboardActive.current) commit(e.currentTarget);
+				}
+			}),
+			/* @__PURE__ */ jsxs("output", {
+				"data-aui": "slider-value",
+				children: [value, unit ? ` ${unit}` : ""]
+			})
+		]
+	});
+}
+function SliderRender({ value, name, label, min, max, step, defaultValue, unit, $action, $dispatch }) {
+	const answeredValue = useAnsweredValue(name);
+	const isBound = useA2uiBinding(name) !== void 0;
+	const safeMin = finiteNumber(min) ? min : 0;
+	const safeMax = finiteNumber(max) ? Math.max(max, safeMin) : safeMin + 100;
+	const safeStep = finiteNumber(step) && step > 0 ? step : 1;
+	const defaultNumber = finiteNumber(isBound ? value : defaultValue) ? isBound ? value : defaultValue : safeMin;
+	const initialValue = clamp(finiteNumber(answeredValue) ? answeredValue : defaultNumber, safeMin, safeMax);
+	return /* @__PURE__ */ jsx(SliderControl, {
+		...isBound ? { controlledValue: initialValue } : {},
+		min: safeMin,
+		max: safeMax,
+		step: safeStep,
+		initialValue,
+		...name !== void 0 ? { name } : {},
+		...label !== void 0 ? { label } : {},
+		...unit !== void 0 ? { unit } : {},
+		...$action !== void 0 ? { $action } : {},
+		...$dispatch !== void 0 ? { $dispatch } : {}
+	}, `${safeMin}:${safeMax}:${safeStep}:${isBound ? "bound" : initialValue}`);
+}
+const UNDO_WINDOW_SECONDS = 5;
+function ButtonRender({ label, buttonStyle, block, submit, undoable, children, $action, $dispatch }) {
+	const bindings = React.useContext(A2uiBindingContext)?.fields;
+	const bindingsRef = React.useRef(bindings);
+	bindingsRef.current = bindings;
+	const [remaining, setRemaining] = React.useState(void 0);
+	const labelText = String(toTextContent(label) ?? "");
+	const undoLabel = labelText.trim();
+	const pendingAction = React.useRef(void 0);
+	const canUndo = undoable && !submit && $action !== void 0 && $dispatch !== void 0;
+	React.useEffect(() => {
+		if (remaining === void 0) return;
+		const timer = setTimeout(() => {
+			if (remaining > 1) {
+				setRemaining(remaining - 1);
+				return;
+			}
+			const action = pendingAction.current;
+			pendingAction.current = void 0;
+			setRemaining(void 0);
+			if (action) fire(action.$action, action.$dispatch, void 0, action.source, bindingsRef.current);
+		}, 1e3);
+		return () => clearTimeout(timer);
+	}, [remaining]);
+	const cancelUndo = () => {
+		pendingAction.current = void 0;
+		setRemaining(void 0);
+	};
+	return /* @__PURE__ */ jsx("button", {
+		type: submit ? "submit" : "button",
+		"data-aui": "button",
+		"data-aui-style": buttonStyle,
+		"data-aui-block": block || void 0,
+		"data-aui-submit": submit || void 0,
+		"data-aui-state": remaining === void 0 ? void 0 : "pending",
+		"data-aui-action": actionAttr($action),
+		"aria-label": remaining === void 0 ? void 0 : undoLabel ? `Undo ${undoLabel}` : "Undo",
+		onClick: submit ? void 0 : canUndo ? (e) => {
+			if (remaining !== void 0) {
+				cancelUndo();
+				return;
+			}
+			pendingAction.current = {
+				$action,
+				$dispatch,
+				source: e.currentTarget
+			};
+			setRemaining(UNDO_WINDOW_SECONDS);
+		} : (e) => fire($action, $dispatch, void 0, e.currentTarget, bindings),
+		onKeyDown: canUndo ? (e) => {
+			if (e.key !== "Escape" || remaining === void 0) return;
+			e.preventDefault();
+			cancelUndo();
+		} : void 0,
+		children: remaining === void 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [labelText, children] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			"Undo ",
+			/* @__PURE__ */ jsx("span", {
+				"data-aui": "button-countdown",
+				children: remaining
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				"data-aui": "button-undo-status",
+				role: "status",
+				children: [
+					labelText,
+					" in ",
+					UNDO_WINDOW_SECONDS,
+					" seconds"
+				]
+			})
+		] })
 	});
 }
 const interactiveVocabulary = {
@@ -39,18 +387,10 @@ const interactiveVocabulary = {
 			label: z.string().describe("Button label."),
 			buttonStyle: z.enum(BUTTON_STYLES).optional().describe("Visual style."),
 			block: z.boolean().optional().describe("Whether the button spans the full width."),
-			submit: z.boolean().optional().describe("Render as a submit button for an ancestor Form/Card instead of a click button.")
+			submit: z.boolean().optional().describe("Render as a submit button for an ancestor Form/Card instead of a click button."),
+			undoable: z.boolean().optional().describe("Delay the action with an undo control, for sends and other hard-to-reverse actions.")
 		}),
-		render: ({ label, buttonStyle, block, submit, $action, $dispatch, children }) => /* @__PURE__ */ jsxs("button", {
-			type: submit ? "submit" : "button",
-			"data-aui": "button",
-			"data-aui-style": buttonStyle,
-			"data-aui-block": block || void 0,
-			"data-aui-submit": submit || void 0,
-			"data-aui-action": actionAttr($action),
-			onClick: submit ? void 0 : () => fire($action, $dispatch),
-			children: [toTextContent(label), children]
-		})
+		render: ButtonRender
 	},
 	Select: {
 		description: "A dropdown selector. Carries `$action` describing the on-select behavior.",
@@ -58,67 +398,26 @@ const interactiveVocabulary = {
 			options: z.array(optionSchema).describe("Selectable options."),
 			placeholder: z.string().optional().describe("Placeholder shown when nothing is selected."),
 			label: z.string().optional().describe("Accessible label for the control."),
-			name: z.string().optional().describe("Field name used inside a Form.")
+			name: z.string().optional().describe("Field name used inside a Form."),
+			defaultValue: z.string().optional().describe("Initially selected value.")
 		}),
-		render: ({ options, placeholder, label, name, $action, $dispatch, children }) => {
-			const placeholderText = toTextContent(placeholder);
-			return /* @__PURE__ */ jsxs("select", {
-				"data-aui": "select",
-				"data-aui-action": actionAttr($action),
-				name,
-				"aria-label": label,
-				defaultValue: "",
-				onChange: (e) => fire($action, $dispatch, e.currentTarget.value),
-				children: [
-					placeholderText ? /* @__PURE__ */ jsx("option", {
-						value: "",
-						disabled: true,
-						children: placeholderText
-					}) : null,
-					(Array.isArray(options) ? options : []).map((option, i) => isOption(option) ? /* @__PURE__ */ jsx("option", {
-						value: option.value,
-						children: option.label
-					}, i) : null),
-					children
-				]
-			});
-		}
+		render: SelectRender
 	},
 	Input: {
 		description: "A text input. Carries `$action` describing the on-submit behavior.",
 		properties: z.object({
+			inputType: z.enum([
+				"text",
+				"password",
+				"number"
+			]).optional().describe("Single-line input type. Values remain strings."),
 			placeholder: z.string().optional().describe("Placeholder text."),
-			multiline: z.boolean().optional().describe("Render a textarea instead of a single-line input."),
+			multiline: z.boolean().optional().describe("Render a textarea instead of a single-line input; ignored when `inputType` is `\"password\"` or `\"number\"`."),
 			label: z.string().optional().describe("Accessible label for the control."),
-			name: z.string().optional().describe("Field name used inside a Form.")
+			name: z.string().optional().describe("Field name used inside a Form."),
+			defaultValue: z.string().optional().describe("Initial text.")
 		}),
-		render: ({ placeholder, multiline, label, name, $action, $dispatch }) => {
-			const submit = (v) => fire($action, $dispatch, v);
-			return multiline ? /* @__PURE__ */ jsx("textarea", {
-				"data-aui": "input",
-				"data-aui-multiline": true,
-				"data-aui-action": actionAttr($action),
-				name,
-				"aria-label": label,
-				placeholder,
-				onKeyDown: (e) => {
-					if (e.key !== "Enter" || !(e.ctrlKey || e.metaKey) || e.nativeEvent.isComposing) return;
-					if (e.currentTarget.form) {
-						e.preventDefault();
-						HTMLFormElement.prototype.requestSubmit.call(e.currentTarget.form);
-					} else submit(e.currentTarget.value);
-				}
-			}) : /* @__PURE__ */ jsx("input", {
-				"data-aui": "input",
-				"data-aui-action": actionAttr($action),
-				name,
-				"aria-label": label,
-				placeholder,
-				onKeyDown: (e) => {
-					if (e.key === "Enter" && !e.nativeEvent.isComposing && !e.currentTarget.form) submit(e.currentTarget.value);
-				}
-			});
-		}
+		render: InputRender
 	},
 	DatePicker: {
 		description: "A date input. Carries `$action` describing the on-select behavior.",
@@ -129,48 +428,50 @@ const interactiveVocabulary = {
 			label: z.string().optional().describe("Accessible label for the control."),
 			name: z.string().optional().describe("Field name used inside a Form.")
 		}),
-		render: ({ value, min, max, label, name, $action, $dispatch }) => /* @__PURE__ */ jsx("input", {
-			type: "date",
-			"data-aui": "datepicker",
-			"data-aui-action": actionAttr($action),
-			name,
-			"aria-label": label,
-			defaultValue: value,
-			min,
-			max,
-			onChange: (e) => fire($action, $dispatch, e.currentTarget.value)
-		})
+		render: DatePickerRender
 	},
 	Checkbox: {
 		description: "A checkbox with a label. Carries `$action` describing the on-change behavior.",
 		properties: z.object({
 			label: z.string().describe("Label text next to the checkbox."),
 			name: z.string().optional().describe("Field name used inside a Form."),
-			defaultChecked: z.boolean().optional().describe("Whether the checkbox starts checked.")
+			defaultChecked: z.boolean().optional().describe("Whether the checkbox starts checked."),
+			variant: z.enum(["checkbox", "switch"]).optional().describe("Whether to render a checkbox or switch.")
 		}),
-		render: ({ label, name, defaultChecked, $action, $dispatch }) => /* @__PURE__ */ jsxs("label", {
-			"data-aui": "checkbox",
-			children: [/* @__PURE__ */ jsx("input", {
-				type: "checkbox",
-				"data-aui-action": actionAttr($action),
-				name,
-				defaultChecked,
-				onChange: (e) => fire($action, $dispatch, e.currentTarget.checked)
-			}), /* @__PURE__ */ jsx("span", {
-				"data-aui": "checkbox-label",
-				children: toTextContent(label)
-			})]
-		})
+		render: CheckboxRender
+	},
+	Slider: {
+		description: "A numeric range control. Carries `$action` describing the committed value.",
+		properties: z.object({
+			name: z.string().optional().describe("Field name used inside a Form."),
+			label: z.string().optional().describe("Accessible label for the control."),
+			min: z.number().describe("Minimum value."),
+			max: z.number().describe("Maximum value."),
+			step: z.number().optional().describe("Value increment. Defaults to 1."),
+			defaultValue: z.number().optional().describe("Initial value."),
+			unit: z.string().optional().describe("Unit shown with the value.")
+		}),
+		render: SliderRender
 	},
 	RadioGroup: {
 		description: "A group of mutually exclusive radio options. Carries `$action` describing the on-change behavior.",
 		properties: z.object({
-			options: z.array(optionSchema).describe("Selectable options."),
+			options: z.array(describedOptionSchema).describe("Selectable options."),
 			name: z.string().optional().describe("Field name used inside a Form."),
 			label: z.string().optional().describe("Accessible name for the group."),
 			defaultValue: z.string().optional().describe("Initially selected value.")
 		}),
 		render: RadioGroupRender
+	},
+	CheckboxGroup: {
+		description: "A group of checkbox options where any number can be checked. Carries `$action` describing the on-change behavior.",
+		properties: z.object({
+			options: z.array(describedOptionSchema).describe("Selectable options."),
+			name: z.string().optional().describe("Field name used inside a Form."),
+			label: z.string().optional().describe("Accessible name for the group."),
+			defaultValue: z.array(z.string()).optional().describe("Initially checked values.")
+		}),
+		render: CheckboxGroupRender
 	}
 };
 //#endregion