@vitavision/ui 0.9.0 → 0.11.0

package/dist/index.js

@@ -6,6 +6,8 @@ import { twMerge } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Slot, Slottable } from "@radix-ui/react-slot";
 import * as RadixDialog from "@radix-ui/react-dialog";
+import * as RadixMenu from "@radix-ui/react-dropdown-menu";
+import * as RadixPopover from "@radix-ui/react-popover";
 import * as RadixSelect from "@radix-ui/react-select";
 import * as RadixSlider from "@radix-ui/react-slider";
 import * as RadixCheckbox from "@radix-ui/react-checkbox";
@@ -351,7 +353,7 @@ const VARIANT_CLASSES = {
 	ghost: "text-fg-muted hover:bg-raised hover:text-fg",
 	danger: "bg-defect/10 text-defect ring-1 ring-inset ring-defect/30 hover:bg-defect/15"
 };
-const SIZE_CLASSES = {
+const SIZE_CLASSES$1 = {
 	sm: "h-7 gap-1.5 px-2.5 text-xs",
 	md: "h-8 gap-2 px-3 text-sm"
 };
@@ -365,7 +367,7 @@ const SIZE_CLASSES = {
 * @returns The class string.
 */
 function buttonClasses({ variant = "secondary", size = "md", className } = {}) {
-	return cn("inline-flex shrink-0 items-center justify-center rounded-control font-medium transition-colors", "disabled:cursor-not-allowed disabled:opacity-45", SIZE_CLASSES[size], VARIANT_CLASSES[variant], focusRing, className);
+	return cn("inline-flex shrink-0 items-center justify-center rounded-control font-medium transition-colors", "disabled:cursor-not-allowed disabled:opacity-45", SIZE_CLASSES$1[size], VARIANT_CLASSES[variant], focusRing, className);
 }
 function ButtonIcon({ icon }) {
 	return /* @__PURE__ */ jsx("span", {
@@ -563,6 +565,109 @@ function Disclosure({ summary, count, defaultOpen = false, className, children }
 	});
 }
 //#endregion
+//#region src/components/ui/Kbd.tsx
+/**
+* A keyboard key or chord (`F`, `⌘K`, `[`), set in mono on a raised key cap.
+*
+* Renders `<kbd>`, which screen readers announce as text. Write the key as the user's keyboard
+* labels it; for a chord, one `Kbd` with the whole chord reads better than several. Takes
+* every `<kbd>` prop, `ref` included.
+*/
+function Kbd({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		...rest,
+		className: cn("inline-flex min-w-[1.5em] items-center justify-center rounded-control border border-line-strong", "bg-raised px-1 font-mono text-[10px] leading-4 text-fg-muted", className)
+	});
+}
+//#endregion
+//#region src/components/ui/DropdownMenu.tsx
+/**
+* A menu (`role="menu"`) that opens from `trigger`, with arrow-key navigation, typeahead,
+* Escape or a press outside to close, and focus returned to the trigger. It is non-modal: the
+* page behind stays readable and operable. Toggling a `MenuCheckboxItem` keeps the menu open,
+* so several layers can be switched in one visit.
+*/
+function DropdownMenu({ trigger, children, open, onOpenChange, align = "start", side = "bottom", className }) {
+	return /* @__PURE__ */ jsxs(RadixMenu.Root, {
+		modal: false,
+		...open === void 0 ? {} : { open },
+		...onOpenChange === void 0 ? {} : { onOpenChange },
+		children: [/* @__PURE__ */ jsx(RadixMenu.Trigger, {
+			asChild: true,
+			children: trigger
+		}), /* @__PURE__ */ jsx(RadixMenu.Portal, { children: /* @__PURE__ */ jsx(RadixMenu.Content, {
+			side,
+			align,
+			sideOffset: 6,
+			collisionPadding: 8,
+			className: cn("z-50 min-w-44 rounded-panel border border-line bg-overlay p-1 text-sm text-fg shadow-lg shadow-black/25", className),
+			children
+		}) })]
+	});
+}
+const itemClasses = cn("relative flex h-7 cursor-default items-center gap-2 rounded-control pr-2 pl-7 text-sm outline-none select-none", "data-[highlighted]:bg-raised data-[disabled]:pointer-events-none data-[disabled]:opacity-50");
+/**
+* A command. `onSelect` runs when it is clicked or chosen with Enter, and the menu then
+* closes. `tone="defect"` marks a destructive command.
+*/
+function MenuItem({ children, onSelect, shortcut, disabled, icon, tone }) {
+	return /* @__PURE__ */ jsxs(RadixMenu.Item, {
+		...disabled === void 0 ? {} : { disabled },
+		onSelect: () => onSelect?.(),
+		className: cn(itemClasses, tone === "defect" && "text-defect"),
+		children: [
+			icon && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "absolute left-2 flex size-3.5 items-center [&>svg]:size-3.5",
+				children: icon
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate",
+				children
+			}),
+			shortcut && /* @__PURE__ */ jsx(Kbd, { children: shortcut })
+		]
+	});
+}
+/**
+* A toggle (`role="menuitemcheckbox"`): a layer on or off. A check marks it on. Choosing it
+* leaves the menu open.
+*/
+function MenuCheckboxItem({ children, checked, onCheckedChange, shortcut, disabled }) {
+	return /* @__PURE__ */ jsxs(RadixMenu.CheckboxItem, {
+		checked,
+		onCheckedChange,
+		...disabled === void 0 ? {} : { disabled },
+		onSelect: (event) => event.preventDefault(),
+		className: itemClasses,
+		children: [
+			/* @__PURE__ */ jsx(RadixMenu.ItemIndicator, {
+				className: "absolute left-2 flex items-center text-signal",
+				children: /* @__PURE__ */ jsx(Check, {
+					className: "size-3.5",
+					"aria-hidden": true
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate",
+				children
+			}),
+			shortcut && /* @__PURE__ */ jsx(Kbd, { children: shortcut })
+		]
+	});
+}
+/** A heading over a group of items, in the eyebrow role. Not focusable. */
+function MenuLabel({ children }) {
+	return /* @__PURE__ */ jsx(RadixMenu.Label, {
+		className: "px-2 pt-1.5 pb-1 text-[11px] font-semibold tracking-wider text-fg-muted uppercase",
+		children
+	});
+}
+/** A divider between groups of items. */
+function MenuSeparator() {
+	return /* @__PURE__ */ jsx(RadixMenu.Separator, { className: "my-1 h-px bg-line" });
+}
+//#endregion
 //#region src/components/ui/Feedback.tsx
 const CALLOUT = {
 	info: {
@@ -780,6 +885,33 @@ function Field({ label, description, error, required = false, annotation, as = "
 	});
 }
 //#endregion
+//#region src/components/ui/numberText.ts
+/**
+* A number at a fixed number of decimals, without a negative zero (`-0.000` reads as a sign
+* error in a coordinate readout).
+*
+* @param value - The number. Non-finite values print as `NaN`, `Infinity`, `-Infinity`.
+* @param precision - Decimals, 0–20.
+* @returns The text.
+*/
+function formatNumber(value, precision) {
+	if (!Number.isFinite(value)) return String(value);
+	const text = value.toFixed(precision);
+	return /^-0(?:\.0*)?$/.test(text) ? text.slice(1) : text;
+}
+/**
+* The number a field's text means, if it means one.
+*
+* @param text - What is in the field.
+* @returns The number, or `null` for empty, partial (`-`, `1e`) or non-numeric text.
+*/
+function parseNumber(text) {
+	const trimmed = text.trim();
+	if (trimmed === "") return null;
+	const value = Number(trimmed);
+	return Number.isFinite(value) ? value : null;
+}
+//#endregion
 //#region src/components/ui/Input.tsx
 /**
 * The shared look of a text-like control — border, palette, placeholder, hover, disabled and
@@ -823,11 +955,94 @@ function Input({ className, "aria-describedby": describedBy, ...rest }) {
 * With a `unit`, the input sits in a `relative` full-width wrapper carrying `data-unit`, keeps
 * room on its right for the unit, and is described by it; size such a field through its
 * container. Without one — or with `""` — the markup is exactly the plain input.
+*
+* With `onValueChange` the field is number-valued: `value` is a number (`null` shows empty), the
+* typed text survives while the field has focus, and only finite numbers inside `[min, max]`
+* are reported (see `onValueChange`; `onClear` reports an emptied field). Without it the field
+* is the native text-valued input.
 */
-function NumberInput({ unit, ...props }) {
-	return unit === void 0 || unit === "" ? /* @__PURE__ */ jsx(PlainNumberInput, { ...props }) : /* @__PURE__ */ jsx(UnitNumberInput, {
+function NumberInput({ onValueChange, onClear, precision, ...props }) {
+	if (onValueChange) return /* @__PURE__ */ jsx(ValueNumberInput, {
+		...props,
+		onValueChange,
+		onClear,
+		precision
+	});
+	const { unit, ...rest } = props;
+	const text = rest.value === null ? {
+		...rest,
+		value: ""
+	} : rest;
+	return unit === void 0 || unit === "" ? /* @__PURE__ */ jsx(PlainNumberInput, { ...text }) : /* @__PURE__ */ jsx(UnitNumberInput, {
 		unit,
-		...props
+		...text
+	});
+}
+/** The number-valued field: formatted at rest, the typed text while focused. */
+function ValueNumberInput({ value, onValueChange, onClear, precision, step, min, max, onFocus, onBlur, onChange, onKeyDown, ...rest }) {
+	const numeric = typeof value === "number" ? value : null;
+	const show = (v) => v === null ? "" : precision === void 0 ? String(v) : formatNumber(v, precision);
+	const [draft, setDraft] = useState(null);
+	/** The number `text` commits, or `null` while it is empty, partial or out of range. */
+	const parse = (text) => {
+		const parsed = parseNumber(text);
+		if (parsed === null) return null;
+		if (min !== void 0 && parsed < min || max !== void 0 && parsed > max) return null;
+		return parsed;
+	};
+	/** An emptied field, committed: cleared if the caller allows it and it was not already empty. */
+	const commitEmpty = (text) => {
+		if (text.trim() === "" && numeric !== null) onClear?.();
+	};
+	const keyDown = (event) => {
+		if (draft && event.key === "Enter") {
+			commitEmpty(draft.text);
+			setDraft({
+				...draft,
+				text: draft.text.trim() === "" && onClear ? "" : show(numeric)
+			});
+		} else if (draft && event.key === "Escape") {
+			event.preventDefault();
+			if (draft.initial !== numeric) {
+				if (draft.initial === null) onClear?.();
+				else onValueChange(draft.initial);
+			}
+			setDraft({
+				...draft,
+				text: show(draft.initial)
+			});
+		}
+		onKeyDown?.(event);
+	};
+	return /* @__PURE__ */ jsx(NumberInput, {
+		...rest,
+		value: draft?.text ?? show(numeric),
+		step: step ?? "any",
+		min,
+		max,
+		onFocus: (event) => {
+			setDraft({
+				text: show(numeric),
+				initial: numeric
+			});
+			onFocus?.(event);
+		},
+		onBlur: (event) => {
+			if (draft) commitEmpty(draft.text);
+			setDraft(null);
+			onBlur?.(event);
+		},
+		onKeyDown: keyDown,
+		onChange: (event) => {
+			const text = event.currentTarget.value;
+			setDraft((current) => ({
+				text,
+				initial: current?.initial ?? numeric
+			}));
+			const parsed = parse(text);
+			if (parsed !== null && parsed !== numeric) onValueChange(parsed);
+			onChange?.(event);
+		}
 	});
 }
 function PlainNumberInput({ className, "aria-describedby": describedBy, ...rest }) {
@@ -871,6 +1086,146 @@ function Textarea({ className, "aria-describedby": describedBy, ...rest }) {
 	});
 }
 //#endregion
+//#region src/components/ui/listboxModel.ts
+/**
+* The option a key moves the active one to, skipping disabled options.
+*
+* Arrows move by one and stop at the ends (no wrap: a long list that wraps loses its place).
+* Home and End go to the first and last enabled option. Page keys move by `page` options.
+* From no active option (`-1`), Down and Page Down go to the first enabled option, and Up and
+* Page Up to the last.
+*
+* @param disabled - Per option, whether it is disabled.
+* @param from - The active index, or -1.
+* @param key - The key pressed.
+* @param page - Options per page, for Page Up/Down. Defaults to 10.
+* @returns The new active index; `from` when there is nowhere to go; -1 when every option is
+*   disabled.
+*/
+function moveActive(disabled, from, key, page = 10) {
+	const enabled = disabled.flatMap((off, index) => off ? [] : [index]);
+	if (enabled.length === 0) return -1;
+	const first = enabled[0];
+	const last = enabled[enabled.length - 1];
+	if (key === "Home") return first;
+	if (key === "End") return last;
+	if (from < 0) return key === "ArrowDown" || key === "PageDown" ? first : last;
+	const forward = key === "ArrowDown" || key === "PageDown";
+	const steps = key === "PageDown" || key === "PageUp" ? Math.max(1, page) : 1;
+	let target = from;
+	let moved = 0;
+	for (let index = from + (forward ? 1 : -1); index >= 0 && index < disabled.length; index += forward ? 1 : -1) {
+		if (disabled[index]) continue;
+		target = index;
+		moved += 1;
+		if (moved === steps) break;
+	}
+	return target;
+}
+/**
+* The first enabled option at or after `index`, or before it when none is after. Used to place
+* the active option when the list opens or changes.
+*
+* @param disabled - Per option, whether it is disabled.
+* @param index - The preferred index.
+* @returns An enabled index, or -1 when every option is disabled.
+*/
+function nearestEnabled(disabled, index) {
+	for (let i = Math.max(0, index); i < disabled.length; i += 1) if (!disabled[i]) return i;
+	for (let i = Math.min(index, disabled.length) - 1; i >= 0; i -= 1) if (!disabled[i]) return i;
+	return -1;
+}
+//#endregion
+//#region src/components/ui/Listbox.tsx
+const KEYS = /* @__PURE__ */ new Set([
+	"ArrowDown",
+	"ArrowUp",
+	"Home",
+	"End",
+	"PageDown",
+	"PageUp"
+]);
+/**
+* A single-select list (`role="listbox"`) of options that each render their own content.
+*
+* The list is one tab stop. The arrow keys, Home, End and Page keys move the active option
+* (`aria-activedescendant`), skipping disabled ones, and Enter or Space choose it. A click
+* chooses the option under the pointer. Controlled: the caller keeps `value`. Each option
+* carries `aria-selected`, `data-selected` and `data-active`; the list scrolls the active
+* option into view.
+*/
+function Listbox({ options, value, onValueChange, renderOption = defaultRender, "aria-label": ariaLabel, autoFocus, className }) {
+	const id = useId();
+	const listRef = useRef(null);
+	const disabled = options.map((option) => option.disabled === true);
+	const selectedIndex = options.findIndex((option) => option.value === value);
+	const [active, setActive] = useState(() => nearestEnabled(disabled, Math.max(0, selectedIndex)));
+	const current = active >= 0 && active < options.length && !disabled[active] ? active : nearestEnabled(disabled, active);
+	const optionId = (index) => `${id}-option-${index}`;
+	const activate = (index) => {
+		setActive(index);
+		listRef.current?.querySelector(`#${CSS.escape(optionId(index))}`)?.scrollIntoView({ block: "nearest" });
+	};
+	const choose = (index) => {
+		const option = options[index];
+		if (!option || option.disabled) return;
+		onValueChange?.(option.value);
+	};
+	const onKeyDown = (event) => {
+		if (KEYS.has(event.key)) {
+			event.preventDefault();
+			const next = moveActive(disabled, current, event.key);
+			if (next >= 0) activate(next);
+		} else if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			choose(current);
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: listRef,
+		role: "listbox",
+		"aria-label": ariaLabel,
+		tabIndex: 0,
+		autoFocus,
+		"aria-activedescendant": current >= 0 ? optionId(current) : void 0,
+		onKeyDown,
+		className: cn("flex flex-col gap-px rounded-control p-0.5 outline-none", focusRing, className),
+		children: options.map((option, index) => {
+			const selected = index === selectedIndex;
+			const isActive = index === current;
+			return /* @__PURE__ */ jsx("div", {
+				id: optionId(index),
+				role: "option",
+				"aria-selected": selected,
+				"aria-disabled": option.disabled ? true : void 0,
+				"data-selected": selected ? "" : void 0,
+				"data-active": isActive ? "" : void 0,
+				onPointerMove: () => {
+					if (!option.disabled && !isActive) setActive(index);
+				},
+				onClick: () => choose(index),
+				className: cn("flex min-w-0 cursor-default items-center gap-2 rounded-control px-2 py-1 text-sm text-fg", "data-[selected]:text-signal data-[selected]:shadow-[inset_2px_0_0_var(--color-signal)]", "data-[active]:bg-raised", option.disabled && "opacity-50"),
+				children: renderOption(option, {
+					selected,
+					active: isActive
+				})
+			}, option.value);
+		})
+	});
+}
+function defaultRender(option) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 flex-col",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: option.label
+		}), option.description && /* @__PURE__ */ jsx("span", {
+			className: "truncate text-xs text-fg-muted",
+			children: option.description
+		})]
+	});
+}
+//#endregion
 //#region src/components/ui/Panel.tsx
 /**
 * A bordered surface with an optional header (a title and actions) above a padded body.
@@ -1006,31 +1361,43 @@ function ReadoutStrip({ items, className }) {
 	});
 }
 //#endregion
-//#region src/components/ui/numberText.ts
+//#region src/components/ui/Popover.tsx
 /**
-* A number at a fixed number of decimals, without a negative zero (`-0.000` reads as a sign
-* error in a coordinate readout).
+* Floating content anchored to `trigger`, on the `overlay` surface with a shadow (floating
+* layers are the only ones that cast one).
 *
-* @param value - The number. Non-finite values print as `NaN`, `Infinity`, `-Infinity`.
-* @param precision - Decimals, 0–20.
-* @returns The text.
+* Controlled (`open` / `onOpenChange`) or not (`defaultOpen`). Focus moves into the content
+* when it opens and back to the trigger when it closes. Escape and a press outside close it.
+* The content carries `data-state` and `data-side`.
 */
-function formatNumber(value, precision) {
-	if (!Number.isFinite(value)) return String(value);
-	const text = value.toFixed(precision);
-	return /^-0(?:\.0*)?$/.test(text) ? text.slice(1) : text;
+function Popover({ trigger, children, open, defaultOpen, onOpenChange, side = "bottom", align = "start", "aria-label": ariaLabel, className }) {
+	return /* @__PURE__ */ jsxs(RadixPopover.Root, {
+		...open === void 0 ? {} : { open },
+		...defaultOpen === void 0 ? {} : { defaultOpen },
+		...onOpenChange === void 0 ? {} : { onOpenChange },
+		children: [/* @__PURE__ */ jsx(RadixPopover.Trigger, {
+			asChild: true,
+			children: trigger
+		}), /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(RadixPopover.Content, {
+			side,
+			align,
+			sideOffset: 6,
+			collisionPadding: 8,
+			"aria-label": ariaLabel,
+			className: cn("z-50 max-h-[var(--radix-popover-content-available-height)] overflow-y-auto", "rounded-panel border border-line bg-overlay p-1 text-sm text-fg shadow-lg shadow-black/25", className),
+			children
+		}) })]
+	});
 }
 /**
-* The number a field's text means, if it means one.
-*
-* @param text - What is in the field.
-* @returns The number, or `null` for empty, partial (`-`, `1e`) or non-numeric text.
+* Closes the surrounding `Popover` when its child is activated. Wraps one element (Radix
+* `asChild`).
 */
-function parseNumber(text) {
-	const trimmed = text.trim();
-	if (trimmed === "") return null;
-	const value = Number(trimmed);
-	return Number.isFinite(value) ? value : null;
+function PopoverClose({ children }) {
+	return /* @__PURE__ */ jsx(RadixPopover.Close, {
+		asChild: true,
+		children
+	});
 }
 //#endregion
 //#region src/components/ui/VectorInput.tsx
@@ -1044,8 +1411,8 @@ const DEFAULT_LABELS = [
 * A row of number fields editing one small vector, with the axis labels before the fields
 * and the unit once after them.
 *
-* Controlled. A `role="group"` named by `aria-label`, each field named by its label and
-* described by the unit. While a field has focus it shows what is typed; on blur or Enter it
+* Controlled. A `role="group"` named by `aria-label`. Each field is named by the group and its
+* label ("Translation x"), so two vectors on one screen stay apart, and is described by the unit. While a field has focus it shows what is typed; on blur or Enter it
 * shows the value at `precision`; Escape restores the value it had on focus. With `readOnly`
 * it renders a `ReadoutStrip` (`x 0.100 m · y …`) instead. The row carries `data-readonly`
 * and `data-disabled`.
@@ -1078,6 +1445,7 @@ function VectorInput({ value, onValueChange, labels = DEFAULT_LABELS, unit, step
 				className: "shrink-0 font-mono text-[11px] text-fg-subtle",
 				children: labelOf(index)
 			}), /* @__PURE__ */ jsx(ComponentField, {
+				name: `${ariaLabel} ${labelOf(index)}`,
 				value: component,
 				precision,
 				step,
@@ -1095,7 +1463,7 @@ function VectorInput({ value, onValueChange, labels = DEFAULT_LABELS, unit, step
 	});
 }
 /** One component: formatted at rest, the typed text while focused. */
-function ComponentField({ value, precision, step, min, max, disabled, describedBy, onCommit }) {
+function ComponentField({ name, value, precision, step, min, max, disabled, describedBy, onCommit }) {
 	const [draft, setDraft] = useState(null);
 	const formatted = formatNumber(value, precision);
 	const onKeyDown = (event) => {
@@ -1118,6 +1486,7 @@ function ComponentField({ value, precision, step, min, max, disabled, describedB
 		min,
 		max,
 		disabled,
+		"aria-label": name,
 		"aria-describedby": describedBy,
 		onFocus: () => setDraft({
 			text: formatted,
@@ -1252,6 +1621,16 @@ function PoseInput({ value, onValueChange, rotationView, translationUnit = "m",
 //#endregion
 //#region src/components/ui/SegmentedControl.tsx
 /**
+* The segment's own box, by size. `sm` is the toolbar size and the default. `md` sets the
+* height explicitly rather than leaving it to padding plus line-height: the strip around it
+* is `h-8` with a 1px border and `p-0.5`, which leaves 26px of content box, and `h-full`
+* fills exactly that whatever the font's line height turns out to be.
+*/
+const SEGMENT_SIZE_CLASSES = {
+	sm: "px-2.5 py-1 text-xs",
+	md: "flex h-full items-center px-3.5 text-sm"
+};
+/**
 * A choice among two or three, shown as a strip of segments (native radios in one group, so
 * arrow keys move between them).
 *
@@ -1259,8 +1638,11 @@ function PoseInput({ value, onValueChange, rotationView, translationUnit = "m",
 * or `defaultValue` while `value` is `""` — and choosing the segment that matches
 * `defaultValue` reports `""`, so the default stays defined in one place. Each segment
 * carries `data-state="checked"` or `"unchecked"`; the group carries `data-disabled`.
+*
+* Toolbar-sized by default. In a row with a comfortable-density `Input`, `Select` or
+* `Button`, pass `size="md"` and the strip's outer height matches theirs.
 */
-function SegmentedControl({ value, defaultValue, options, onValueChange, disabled = false, "aria-label": ariaLabel, className }) {
+function SegmentedControl({ value, defaultValue, options, onValueChange, disabled = false, "aria-label": ariaLabel, size = "sm", className }) {
 	const nameId = useId();
 	const described = useFieldDescription();
 	const effective = value === "" ? defaultValue : value;
@@ -1269,12 +1651,12 @@ function SegmentedControl({ value, defaultValue, options, onValueChange, disable
 		"aria-label": ariaLabel,
 		"aria-describedby": described["aria-describedby"],
 		"data-disabled": disabled ? "" : void 0,
-		className: cn("inline-flex w-fit max-w-full shrink-0 items-center gap-0.5 rounded-control border border-line-strong bg-raised p-0.5", disabled && "opacity-50", className),
+		className: cn("inline-flex w-fit max-w-full shrink-0 items-center gap-0.5 rounded-control border border-line-strong bg-raised p-0.5", size === "md" && "h-8", disabled && "opacity-50", className),
 		children: options.map((option) => {
 			const checked = option.value === effective;
 			return /* @__PURE__ */ jsxs("label", {
 				"data-state": checked ? "checked" : "unchecked",
-				className: cn("relative cursor-pointer whitespace-nowrap rounded-[0.3rem] px-2.5 py-1 text-xs font-medium transition-colors", "has-focus-visible:outline-2 has-focus-visible:outline-offset-1 has-focus-visible:outline-signal", checked ? "bg-surface text-fg shadow-sm" : "text-fg-muted hover:text-fg", disabled && "cursor-not-allowed"),
+				className: cn("relative cursor-pointer whitespace-nowrap rounded-[0.3rem]", SEGMENT_SIZE_CLASSES[size], "font-medium transition-colors", "has-focus-visible:outline-2 has-focus-visible:outline-offset-1 has-focus-visible:outline-signal", checked ? "bg-surface text-fg shadow-sm" : "text-fg-muted hover:text-fg", disabled && "cursor-not-allowed"),
 				children: [/* @__PURE__ */ jsx("input", {
 					type: "radio",
 					name: nameId,
@@ -1532,12 +1914,28 @@ function Checkbox({ checked, onCheckedChange, onClick, label, description, disab
 //#endregion
 //#region src/components/ui/ToggleChip.tsx
 /**
+* The chip's box, by size. `sm` is the toolbar size and the default. `md` sets the height
+* explicitly (`h-8`, border included) rather than leaving it to padding plus line-height.
+*/
+const SIZE_CLASSES = {
+	sm: "px-2 py-1 text-xs",
+	md: "h-8 px-3 text-sm"
+};
+/** The swatch dot, by size: a little larger beside `text-sm` so it keeps its weight against the label. */
+const SWATCH_SIZE_CLASSES = {
+	sm: "size-2",
+	md: "size-2.5"
+};
+/**
 * A dense on/off chip for a layer drawn on screen, with an optional swatch in the layer's
 * colour: a toolbar-sized `Switch` (`role="switch"`, `aria-checked`).
 *
 * Controlled. State is exposed as `data-state` (`checked`/`unchecked`).
+*
+* Toolbar-sized by default. In a row with a comfortable-density `Input`, `Select` or
+* `Button`, pass `size="md"` and the chip's outer height matches theirs.
 */
-function ToggleChip({ checked, onCheckedChange, children, swatch, disabled = false, title, className }) {
+function ToggleChip({ checked, onCheckedChange, children, swatch, disabled = false, title, size = "sm", className }) {
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		role: "switch",
@@ -1546,10 +1944,10 @@ function ToggleChip({ checked, onCheckedChange, children, swatch, disabled = fal
 		disabled,
 		title,
 		onClick: () => onCheckedChange(!checked),
-		className: cn("inline-flex items-center gap-1.5 rounded-control border px-2 py-1 text-xs whitespace-nowrap transition-colors", checked ? "border-line-strong bg-raised text-fg" : "border-line bg-transparent text-fg-muted hover:text-fg", "disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-fg-muted", focusRing, className),
+		className: cn("inline-flex items-center gap-1.5 rounded-control border", SIZE_CLASSES[size], "whitespace-nowrap transition-colors", checked ? "border-line-strong bg-raised text-fg" : "border-line bg-transparent text-fg-muted hover:text-fg", "disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-fg-muted", focusRing, className),
 		children: [swatch !== void 0 && /* @__PURE__ */ jsx("span", {
 			"aria-hidden": true,
-			className: cn("size-2 shrink-0 rounded-full border transition-opacity", checked ? "opacity-100" : "opacity-30"),
+			className: cn(SWATCH_SIZE_CLASSES[size], "shrink-0 rounded-full border transition-opacity", checked ? "opacity-100" : "opacity-30"),
 			style: {
 				backgroundColor: swatch,
 				borderColor: swatch
@@ -1801,6 +2199,6 @@ function Tabs({ items, active, onSelect, label, idPrefix, className }) {
 	});
 }
 //#endregion
-export { Badge, Button, ButtonLink, Callout, Checkbox, ConfirmDialog, CountRun, DEFAULT_THEME_STORAGE_KEY, DensityProvider, Dialog, DialogClose, Disclosure, Empty, ErrorBox, Field, InfoHint, Input, NumberInput, PageHeader, Panel, PoseInput, ProgressBar, ReadoutStrip, Section, SegmentedControl, Select, Skeleton, SkeletonRows, Slider, StatusDot, Switch, Table, Tabs, Textarea, ThemeToggle, Toaster, ToggleChip, Tooltip, TooltipProvider, VectorInput, buttonClasses, byDensity, cn, controlClasses, createToastStore, defaultToastStore, focusRing, focusRingInset, initTheme, inputClasses, readThemeChoice, resolveTheme, setThemeChoice, toast, toneColor, useControlHeight, useDensity };
+export { Badge, Button, ButtonLink, Callout, Checkbox, ConfirmDialog, CountRun, DEFAULT_THEME_STORAGE_KEY, DensityProvider, Dialog, DialogClose, Disclosure, DropdownMenu, Empty, ErrorBox, Field, InfoHint, Input, Kbd, Listbox, MenuCheckboxItem, MenuItem, MenuLabel, MenuSeparator, NumberInput, PageHeader, Panel, Popover, PopoverClose, PoseInput, ProgressBar, ReadoutStrip, Section, SegmentedControl, Select, Skeleton, SkeletonRows, Slider, StatusDot, Switch, Table, Tabs, Textarea, ThemeToggle, Toaster, ToggleChip, Tooltip, TooltipProvider, VectorInput, buttonClasses, byDensity, cn, controlClasses, createToastStore, defaultToastStore, focusRing, focusRingInset, formatNumber, initTheme, inputClasses, parseNumber, readThemeChoice, resolveTheme, setThemeChoice, toast, toneColor, useControlHeight, useDensity };
 
 //# sourceMappingURL=index.js.map