@vitavision/ui 0.7.0 → 0.9.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { AlertTriangle, Check, CheckCircle2, ChevronDown, ChevronRight, HelpCircle, Info, Loader2, Minus, Moon, Sun, SunMoon, XCircle } from "lucide-react";
-import { createContext, isValidElement, use, useCallback, useId, useMemo, useState, useSyncExternalStore } from "react";
+import { AlertTriangle, Check, CheckCircle2, ChevronDown, ChevronRight, CircleCheck, CircleX, HelpCircle, Info, Loader2, Minus, Moon, Sun, SunMoon, TriangleAlert, X, XCircle } from "lucide-react";
+import { createContext, isValidElement, use, useCallback, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import * as RadixTooltip from "@radix-ui/react-tooltip";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -813,12 +813,24 @@ function Input({ className, "aria-describedby": describedBy, ...rest }) {
 	});
 }
 /**
-* A number, with the schema's own bounds attached.
+* A number, with the schema's own bounds attached and, optionally, its unit written in the
+* field.
 *
 * `font-mono` because these are read as quantities and compared down a column. Takes every
-* `<input>` prop, `ref` included (`type` is always `number`).
+* `<input>` prop, `ref` included (`type` is always `number`); `className`, `style` and `ref`
+* always go to the `<input>`.
+*
+* 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.
 */
-function NumberInput({ className, "aria-describedby": describedBy, ...rest }) {
+function NumberInput({ unit, ...props }) {
+	return unit === void 0 || unit === "" ? /* @__PURE__ */ jsx(PlainNumberInput, { ...props }) : /* @__PURE__ */ jsx(UnitNumberInput, {
+		unit,
+		...props
+	});
+}
+function PlainNumberInput({ className, "aria-describedby": describedBy, ...rest }) {
 	return /* @__PURE__ */ jsx("input", {
 		...useFieldDescription(describedBy),
 		...rest,
@@ -827,6 +839,26 @@ function NumberInput({ className, "aria-describedby": describedBy, ...rest }) {
 		className: cn(controlClasses, useControlHeight(), "font-mono tabular-nums", className)
 	});
 }
+function UnitNumberInput({ unit, style, "aria-describedby": describedBy, ...rest }) {
+	const unitId = useId();
+	return /* @__PURE__ */ jsxs("span", {
+		"data-unit": unit,
+		className: "relative flex w-full min-w-0 items-center",
+		children: [/* @__PURE__ */ jsx(PlainNumberInput, {
+			...rest,
+			"aria-describedby": describedBy ? `${describedBy} ${unitId}` : unitId,
+			style: {
+				paddingInlineEnd: `calc(${unit.length}ch + 1rem)`,
+				...style
+			}
+		}), /* @__PURE__ */ jsx("span", {
+			id: unitId,
+			"aria-hidden": true,
+			className: "pointer-events-none absolute inset-y-0 right-2.5 flex items-center font-mono text-xs text-fg-subtle select-none",
+			children: unit
+		})]
+	});
+}
 /**
 * Multi-line text — set in mono, for JSON and lists. Takes every `<textarea>` prop, `ref`
 * included.
@@ -974,6 +1006,250 @@ function ReadoutStrip({ items, className }) {
 	});
 }
 //#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/VectorInput.tsx
+const DEFAULT_LABELS = [
+	"x",
+	"y",
+	"z",
+	"w"
+];
+/**
+* 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
+* 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`.
+*/
+function VectorInput({ value, onValueChange, labels = DEFAULT_LABELS, unit, step, precision = 3, min, max, readOnly = false, disabled = false, "aria-label": ariaLabel, className }) {
+	const unitId = useId();
+	const labelOf = (index) => labels[index] ?? String(index);
+	if (readOnly) return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-label": ariaLabel,
+		"data-readonly": "",
+		className: cn("min-w-0", className),
+		children: /* @__PURE__ */ jsx(ReadoutStrip, { items: value.map((component, index) => ({
+			label: labelOf(index),
+			value: unit ? `${formatNumber(component, precision)} ${unit}` : formatNumber(component, precision)
+		})) })
+	});
+	const change = (index, component) => {
+		if (component === value[index]) return;
+		onValueChange?.(value.map((current, i) => i === index ? component : current));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": ariaLabel,
+		"data-disabled": disabled ? "" : void 0,
+		className: cn("flex min-w-0 items-center gap-1.5", className),
+		children: [value.map((component, index) => /* @__PURE__ */ jsxs("label", {
+			className: "flex min-w-0 flex-1 items-center gap-1",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "shrink-0 font-mono text-[11px] text-fg-subtle",
+				children: labelOf(index)
+			}), /* @__PURE__ */ jsx(ComponentField, {
+				value: component,
+				precision,
+				step,
+				min,
+				max,
+				disabled,
+				describedBy: unit ? unitId : void 0,
+				onCommit: (next) => change(index, next)
+			})]
+		}, index)), unit && /* @__PURE__ */ jsx("span", {
+			id: unitId,
+			className: "shrink-0 font-mono text-xs text-fg-subtle",
+			children: unit
+		})]
+	});
+}
+/** One component: formatted at rest, the typed text while focused. */
+function ComponentField({ value, precision, step, min, max, disabled, describedBy, onCommit }) {
+	const [draft, setDraft] = useState(null);
+	const formatted = formatNumber(value, precision);
+	const onKeyDown = (event) => {
+		if (event.key === "Enter") setDraft((current) => current && {
+			...current,
+			text: formatted
+		});
+		else if (event.key === "Escape" && draft) {
+			event.preventDefault();
+			onCommit(draft.initial);
+			setDraft({
+				...draft,
+				text: formatNumber(draft.initial, precision)
+			});
+		}
+	};
+	return /* @__PURE__ */ jsx(NumberInput, {
+		value: draft?.text ?? formatted,
+		step: step ?? "any",
+		min,
+		max,
+		disabled,
+		"aria-describedby": describedBy,
+		onFocus: () => setDraft({
+			text: formatted,
+			initial: value
+		}),
+		onBlur: () => setDraft(null),
+		onKeyDown,
+		onChange: (event) => {
+			const text = event.currentTarget.value;
+			setDraft((current) => ({
+				text,
+				initial: current?.initial ?? value
+			}));
+			const parsed = parseNumber(text);
+			if (parsed !== null) onCommit(parsed);
+		},
+		className: "min-w-0 px-1.5"
+	});
+}
+//#endregion
+//#region src/components/ui/PoseInput.tsx
+const DEGREES = 180 / Math.PI;
+const DEFAULT_ANGLE_LABELS = [
+	"roll",
+	"pitch",
+	"yaw"
+];
+const sameQuaternion = (a, b) => a.every((component, index) => component === b[index]);
+/**
+* An SE(3) pose shown and edited as a translation (m or mm) and three angles in degrees,
+* reading and writing the wire form `{ rotation: [qx, qy, qz, qw], translation: [tx, ty, tz] }`.
+*
+* The angles come from `rotationView.toEuler` and go back through `rotationView.fromEuler`.
+* The angles as typed are kept while the pose they produced is the one shown, so a yaw of
+* 190° is not redisplayed as −170° and a gimbal-locked pitch does not scramble the other two
+* angles mid-edit.
+*
+* A `role="group"` named by `aria-label`, holding two `VectorInput` groups ("Translation",
+* "Rotation"). With `readOnly` it renders a `ReadoutStrip` instead
+* (`t 0.1000 0.2000 0.3000 m · rpy 0.00 90.00 0.00 °`). The root carries `data-readonly`.
+*/
+function PoseInput({ value, onValueChange, rotationView, translationUnit = "m", translationPrecision, rotationPrecision = 2, readOnly = false, disabled = false, "aria-label": ariaLabel = "Pose", className }) {
+	const density = useDensity();
+	const [typed, setTyped] = useState(null);
+	const scale = translationUnit === "mm" ? 1e3 : 1;
+	const tPrecision = translationPrecision ?? (translationUnit === "mm" ? 1 : 4);
+	const translation = value.translation.map((component) => component * scale);
+	const degrees = (typed !== null && sameQuaternion(typed.rotation, value.rotation) ? typed.angles : rotationView.toEuler(value.rotation)).map((angle) => angle * DEGREES);
+	const angleLabels = rotationView.labels ?? DEFAULT_ANGLE_LABELS;
+	if (readOnly) {
+		const join = (values, precision) => values.map((component) => formatNumber(component, precision)).join(" ");
+		return /* @__PURE__ */ jsx("div", {
+			role: "group",
+			"aria-label": ariaLabel,
+			"data-readonly": "",
+			className: cn("min-w-0", className),
+			children: /* @__PURE__ */ jsx(ReadoutStrip, { items: [{
+				label: "t",
+				value: `${join(translation, tPrecision)} ${translationUnit}`
+			}, {
+				label: "rpy",
+				value: `${join(degrees, rotationPrecision)} °`
+			}] })
+		});
+	}
+	const onTranslation = (next) => {
+		const [x = 0, y = 0, z = 0] = next.map((component) => component / scale);
+		onValueChange?.({
+			rotation: value.rotation,
+			translation: [
+				x,
+				y,
+				z
+			]
+		});
+	};
+	const onRotation = (next) => {
+		const [a = 0, b = 0, c = 0] = next.map((angle) => angle / DEGREES);
+		const angles = [
+			a,
+			b,
+			c
+		];
+		const rotation = rotationView.fromEuler(angles);
+		setTyped({
+			rotation,
+			angles
+		});
+		onValueChange?.({
+			rotation,
+			translation: value.translation
+		});
+	};
+	const rowLabel = cn("text-fg-muted", byDensity(density, "text-xs", "text-[11px]"));
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": ariaLabel,
+		className: cn("grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-center gap-x-2", byDensity(density, "gap-y-2", "gap-y-1"), className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: rowLabel,
+				children: "Translation"
+			}),
+			/* @__PURE__ */ jsx(VectorInput, {
+				"aria-label": "Translation",
+				value: translation,
+				onValueChange: onTranslation,
+				unit: translationUnit,
+				precision: tPrecision,
+				step: translationUnit === "mm" ? 1 : .001,
+				disabled
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: rowLabel,
+				children: "Rotation"
+			}),
+			/* @__PURE__ */ jsx(VectorInput, {
+				"aria-label": "Rotation",
+				value: degrees,
+				onValueChange: onRotation,
+				labels: angleLabels,
+				unit: "°",
+				precision: rotationPrecision,
+				step: 1,
+				disabled
+			})
+		]
+	});
+}
+//#endregion
 //#region src/components/ui/SegmentedControl.tsx
 /**
 * A choice among two or three, shown as a strip of segments (native radios in one group, so
@@ -1282,6 +1558,187 @@ function ToggleChip({ checked, onCheckedChange, children, swatch, disabled = fal
 	});
 }
 //#endregion
+//#region src/components/ui/toastStore.ts
+const DEFAULT_DURATION = 5e3;
+const ERROR_DURATION = 8e3;
+/**
+* A new, empty toast store. The package keeps one (behind `toast()` and the default
+* `<Toaster />`); create another only to isolate a region or a test.
+*
+* @returns The store.
+*/
+function createToastStore() {
+	let toasts = [];
+	let sequence = 0;
+	const listeners = /* @__PURE__ */ new Set();
+	const commit = (next) => {
+		toasts = next;
+		for (const listener of [...listeners]) listener();
+	};
+	return {
+		toast: (options) => {
+			const tone = options.tone ?? "info";
+			sequence += 1;
+			const record = {
+				id: options.id ?? `toast-${sequence}`,
+				title: options.title,
+				description: options.description,
+				tone,
+				duration: options.duration ?? (tone === "error" ? ERROR_DURATION : DEFAULT_DURATION)
+			};
+			const existing = toasts.findIndex((t) => t.id === record.id);
+			commit(existing === -1 ? [...toasts, record] : toasts.map((t, i) => i === existing ? record : t));
+			return record.id;
+		},
+		dismiss: (id) => {
+			if (id === void 0) {
+				if (toasts.length > 0) commit([]);
+				return;
+			}
+			if (toasts.some((t) => t.id === id)) commit(toasts.filter((t) => t.id !== id));
+		},
+		getSnapshot: () => toasts,
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}
+	};
+}
+/** The store behind `toast()` and a `<Toaster />` given no `store`. */
+const defaultToastStore = createToastStore();
+/**
+* Raise a notification, from anywhere — shown by the mounted `<Toaster />`.
+*
+* `toast({ title: "Scenario loaded", tone: "success" })`. Pass `id` to update a toast in
+* place (a progress message that becomes a result). `toast.dismiss(id)` removes one early,
+* `toast.dismiss()` all of them.
+*
+* @param options - The message, its tone and its duration.
+* @returns The toast's id.
+*/
+const toast = Object.assign((options) => defaultToastStore.toast(options), { dismiss: (id) => defaultToastStore.dismiss(id) });
+//#endregion
+//#region src/components/ui/Toaster.tsx
+const TONE = {
+	info: {
+		border: "border-signal/30",
+		icon: "text-signal",
+		Icon: Info
+	},
+	success: {
+		border: "border-normal/30",
+		icon: "text-normal",
+		Icon: CircleCheck
+	},
+	warn: {
+		border: "border-warn/30",
+		icon: "text-warn",
+		Icon: TriangleAlert
+	},
+	error: {
+		border: "border-defect/30",
+		icon: "text-defect",
+		Icon: CircleX
+	}
+};
+const NO_TOASTS = [];
+/**
+* The stack of notifications raised with `toast()`. Mount it once, near the root.
+*
+* Fixed to the bottom-right corner, newest at the bottom. Each toast dismisses itself after
+* its `duration`; the countdown pauses while the pointer is over the stack or focus is inside
+* it. A `section` landmark ("Notifications") holding a polite live region, so new toasts are
+* announced; an `error` toast is a `role="alert"`, announced at once. Each toast carries
+* `data-tone` and a "Dismiss" button.
+*/
+function Toaster({ store = defaultToastStore, limit = 5, className }) {
+	const toasts = useSyncExternalStore(store.subscribe, store.getSnapshot, () => NO_TOASTS);
+	const [hovered, setHovered] = useState(false);
+	const [focused, setFocused] = useState(false);
+	const shown = toasts.slice(-Math.max(1, limit));
+	const onBlur = (event) => {
+		if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
+	};
+	return /* @__PURE__ */ jsx("section", {
+		"aria-label": "Notifications",
+		onPointerEnter: () => setHovered(true),
+		onPointerLeave: () => setHovered(false),
+		onFocus: () => setFocused(true),
+		onBlur,
+		className: cn("pointer-events-none fixed right-4 bottom-4 z-50 w-80 max-w-[calc(100vw-2rem)]", className),
+		children: /* @__PURE__ */ jsx("ol", {
+			"aria-live": "polite",
+			className: "flex flex-col gap-2",
+			children: shown.map((record) => /* @__PURE__ */ jsx(ToastItem, {
+				record,
+				paused: hovered || focused,
+				onDismiss: () => store.dismiss(record.id)
+			}, record.id))
+		})
+	});
+}
+function ToastItem({ record, paused, onDismiss }) {
+	const { border, icon, Icon } = TONE[record.tone];
+	const remainingRef = useRef({
+		record,
+		ms: record.duration
+	});
+	const dismissRef = useRef(onDismiss);
+	useEffect(() => {
+		dismissRef.current = onDismiss;
+	});
+	useEffect(() => {
+		if (remainingRef.current.record !== record) remainingRef.current = {
+			record,
+			ms: record.duration
+		};
+		if (paused || !Number.isFinite(remainingRef.current.ms)) return;
+		const started = Date.now();
+		const timer = setTimeout(() => dismissRef.current(), remainingRef.current.ms);
+		return () => {
+			clearTimeout(timer);
+			remainingRef.current.ms = Math.max(0, remainingRef.current.ms - (Date.now() - started));
+		};
+	}, [paused, record]);
+	return /* @__PURE__ */ jsx("li", {
+		className: "pointer-events-auto",
+		children: /* @__PURE__ */ jsxs("div", {
+			role: record.tone === "error" ? "alert" : void 0,
+			"data-tone": record.tone,
+			className: cn("flex items-start gap-2.5 rounded-panel border bg-overlay px-3 py-2.5 text-sm leading-snug shadow-lg shadow-black/25", "transition-[opacity,translate] duration-200 starting:translate-y-2 starting:opacity-0", border),
+			children: [
+				/* @__PURE__ */ jsx(Icon, {
+					className: cn("mt-0.5 size-4 shrink-0", icon),
+					"aria-hidden": true
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-0.5",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "font-medium text-fg",
+						children: record.title
+					}), record.description && /* @__PURE__ */ jsx("p", {
+						className: "text-fg-muted",
+						children: record.description
+					})]
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Dismiss",
+					title: "Dismiss",
+					onClick: onDismiss,
+					className: cn("-mr-1 grid size-6 shrink-0 place-items-center rounded-control text-fg-subtle transition-colors hover:bg-raised hover:text-fg", focusRing),
+					children: /* @__PURE__ */ jsx(X, {
+						className: "size-3.5",
+						"aria-hidden": true
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
 //#region src/components/Tabs.tsx
 const NEXT_KEYS = {
 	ArrowRight: (index, length) => (index + 1) % length,
@@ -1344,6 +1801,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, ProgressBar, ReadoutStrip, Section, SegmentedControl, Select, Skeleton, SkeletonRows, Slider, StatusDot, Switch, Table, Tabs, Textarea, ThemeToggle, ToggleChip, Tooltip, TooltipProvider, buttonClasses, byDensity, cn, controlClasses, focusRing, focusRingInset, initTheme, inputClasses, readThemeChoice, resolveTheme, setThemeChoice, toneColor, useControlHeight, useDensity };
+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 };
 
 //# sourceMappingURL=index.js.map