@snap-rail/framework-shadcn 0.0.0-stage → 0.2.0

package/lib/ui/index.js

@@ -0,0 +1,1101 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { z } from "zod";
+//#region lib/types/ui/utils.js
+/**
+* Class-name combiner: clsx joins, tailwind-merge resolves conflicting
+* Tailwind utilities with the last one winning — the shadcn convention.
+*
+* @module @snap-rail/framework-shadcn/ui/utils
+*/
+/**
+* Merge conditional class names into one Tailwind-aware string.
+* @param inputs - class values (strings, arrays, conditional objects).
+* @returns the merged class string.
+*/
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+//#region lib/types/ui/hooks.js
+/**
+* Shared React recipes over the client runtime's event fabric.
+*
+* @module @snap-rail/framework-shadcn/ui/hooks
+*/
+/**
+* Re-render the component whenever any of the named ctx events fires —
+* the standard "surface follows the seam" tick. The cordis import is
+* type-only: this module stays a pure React utility at runtime.
+*
+* @param ctx - the plugin context whose events drive the refresh.
+* @param events - event names to listen on (identity is not part of the
+* effect key; a freshly built array literal is fine).
+*/
+function useRefresh(ctx, events) {
+	const [, setTick] = useState(0);
+	const key = events.join("\n");
+	useEffect(() => {
+		const bump = () => setTick((value) => value + 1);
+		const detachers = (key === "" ? [] : key.split("\n")).map((event) => ctx.on(event, bump));
+		return () => {
+			for (const detach of detachers) detach();
+		};
+	}, [ctx, key]);
+}
+//#endregion
+//#region lib/types/ui/button.js
+/**
+* Button: cva variants over a native button. Ghost/outline cover chrome
+* surfaces (titlebar, panel toggles); `icon` size squares the padding for
+* glyph-only controls.
+*
+* @module @snap-rail/framework-shadcn/ui/button
+*/
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			destructive: "bg-destructive/90 text-destructive-foreground hover:bg-destructive",
+			outline: "border border-border bg-transparent hover:bg-accent hover:text-accent-foreground",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			xl: "h-16 px-8 text-lg",
+			lg: "h-14 px-6 text-lg",
+			default: "h-12 px-5 py-1.5",
+			sm: "h-10 px-4 text-sm",
+			icon: "h-12 w-12"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+/** A themed button; `asChild` renders the child element instead. */
+function Button({ className, variant, size, asChild = false, ...props }) {
+	return jsx(asChild ? Slot : "button", {
+		className: cn(buttonVariants({
+			variant,
+			size
+		}), className),
+		...props
+	});
+}
+//#endregion
+//#region lib/types/ui/card.js
+/** The container surface. */
+function Card({ className, ...props }) {
+	return jsx("div", {
+		className: cn("rounded-lg border border-border bg-card text-card-foreground", className),
+		...props
+	});
+}
+/** Top padding/heading zone of a card. */
+function CardHeader({ className, ...props }) {
+	return jsx("div", {
+		className: cn("flex flex-col gap-1 p-5", className),
+		...props
+	});
+}
+/** Card heading line. */
+function CardTitle({ className, ...props }) {
+	return jsx("h3", {
+		className: cn("text-sm font-medium text-muted-foreground", className),
+		...props
+	});
+}
+/** Body zone of a card. */
+function CardContent({ className, ...props }) {
+	return jsx("div", {
+		className: cn("p-5 pt-0", className),
+		...props
+	});
+}
+//#endregion
+//#region lib/types/ui/badge.js
+/**
+* Badge: small status/label chip. `success` carries the online/live state,
+* `warning` the attention state (e.g. partial failure, float type),
+* `destructive` the offline/abnormal one.
+*
+* @module @snap-rail/framework-shadcn/ui/badge
+*/
+const badgeVariants = cva("inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-sm font-medium whitespace-nowrap", {
+	variants: { variant: {
+		default: "border-transparent bg-primary text-primary-foreground",
+		secondary: "border-transparent bg-secondary text-secondary-foreground",
+		success: "border-transparent bg-success/15 text-success",
+		warning: "border-transparent bg-warning/15 text-warning",
+		destructive: "border-transparent bg-destructive/15 text-destructive",
+		outline: "text-muted-foreground"
+	} },
+	defaultVariants: { variant: "default" }
+});
+/** A themed status chip. */
+function Badge({ className, variant, ...props }) {
+	return jsx("span", {
+		className: cn(badgeVariants({ variant }), className),
+		...props
+	});
+}
+//#endregion
+//#region lib/types/ui/switch.js
+/**
+* Switch: the Radix switch with snap-rail chrome — boolean control for
+* toggles like the offline simulation.
+*
+* @module @snap-rail/framework-shadcn/ui/switch
+*/
+/** A themed on/off control. */
+function Switch({ className, ...props }) {
+	return jsx(SwitchPrimitive.Root, {
+		className: cn("peer inline-flex h-6 w-12 shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-secondary", className),
+		...props,
+		children: jsx(SwitchPrimitive.Thumb, { className: "pointer-events-none block h-5 w-5 rounded-full bg-foreground shadow transition-transform data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-1" })
+	});
+}
+//#endregion
+//#region lib/types/ui/tooltip.js
+/**
+* Tooltip: Radix tooltip wrapping its own provider so occupants mount it
+* standalone (no app-level provider requirement).
+*
+* @module @snap-rail/framework-shadcn/ui/tooltip
+*/
+/** Hover/focus tip over any trigger. */
+function Tooltip({ content, children, delay = 200 }) {
+	return jsx(TooltipPrimitive.Provider, {
+		delayDuration: delay,
+		children: jsxs(TooltipPrimitive.Root, { children: [jsx(TooltipPrimitive.Trigger, {
+			asChild: true,
+			children
+		}), jsx(TooltipPrimitive.Portal, { children: jsx(TooltipPrimitive.Content, {
+			sideOffset: 4,
+			className: cn("z-50 rounded-md border border-border bg-popover px-2 py-1 text-xs text-popover-foreground"),
+			children: content
+		}) })] })
+	});
+}
+/** Re-export the primitive root for direct composition. */
+const TooltipRoot = TooltipPrimitive.Root;
+//#endregion
+//#region lib/types/ui/scroll-area.js
+/**
+* ScrollArea: Radix scroll area with a themed slim scrollbar — panels keep
+* native scrolling semantics without OS chrome.
+*
+* @module @snap-rail/framework-shadcn/ui/scroll-area
+*/
+/** A themed scrollable viewport. */
+function ScrollArea({ className, children, ...props }) {
+	return jsxs(ScrollAreaPrimitive.Root, {
+		className: cn("overflow-hidden", className),
+		...props,
+		children: [
+			jsx(ScrollAreaPrimitive.Viewport, {
+				className: "h-full w-full",
+				children
+			}),
+			jsx(ScrollAreaPrimitive.Scrollbar, {
+				orientation: "vertical",
+				className: "flex w-1.5 touch-none select-none border-l border-transparent p-px",
+				children: jsx(ScrollAreaPrimitive.Thumb, { className: "relative flex-1 rounded-full bg-muted-foreground/40" })
+			}),
+			jsx(ScrollAreaPrimitive.Corner, {})
+		]
+	});
+}
+//#endregion
+//#region lib/types/ui/dialog.js
+/**
+* Dialog: modal overlay + panel over Radix Dialog. Chrome surfaces use it
+* for confirmations (window close, technician id entry); content pages use
+* it for small forms. No built-in close affordance — callers render their
+* own buttons in the footer.
+*
+* @module @snap-rail/framework-shadcn/ui/dialog
+*/
+/** Controlled/uncontrolled root; re-exported so callers need one import. */
+const Dialog = DialogPrimitive.Root;
+/** The overlay + centered panel; mounts through a portal into body. */
+function DialogContent({ className, children, ...props }) {
+	return jsxs(DialogPrimitive.Portal, { children: [jsx(DialogPrimitive.Overlay, { className: "overlay-in fixed inset-0 z-50 bg-background/80 backdrop-blur-[1px]" }), jsx(DialogPrimitive.Content, {
+		className: cn("dialog-in fixed left-1/2 top-1/2 z-50 w-[calc(100%-2.5rem)] max-w-md -translate-x-1/2 -translate-y-1/2", "rounded-lg border border-border bg-card text-card-foreground shadow-xl", "p-5 focus:outline-none", className),
+		...props,
+		children
+	})] });
+}
+/** Title bar block inside a dialog. */
+function DialogHeader({ className, ...props }) {
+	return jsx("div", {
+		className: cn("mb-4 space-y-1", className),
+		...props
+	});
+}
+/** The dialog's accessible title. */
+const DialogTitle = DialogPrimitive.Title;
+/** Optional supporting line under the title. */
+const DialogDescription = DialogPrimitive.Description;
+/** Action row (buttons) at the bottom; defaults to right-aligned. */
+function DialogFooter({ className, ...props }) {
+	return jsx("div", {
+		className: cn("mt-5 flex justify-end gap-3", className),
+		...props
+	});
+}
+//#endregion
+//#region lib/types/ui/input.js
+/** A themed text input. */
+function Input({ className, type = "text", ...props }) {
+	return jsx("input", {
+		type,
+		className: cn("flex h-12 w-full rounded-md border border-input bg-transparent px-4 py-2 text-base", "placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "disabled:cursor-not-allowed disabled:opacity-50", className),
+		...props
+	});
+}
+//#endregion
+//#region lib/types/ui/textarea.js
+/** A themed multi-line text area. */
+function Textarea({ className, ...props }) {
+	return jsx("textarea", {
+		className: cn("flex min-h-24 w-full rounded-md border border-input bg-transparent px-4 py-3 text-base", "placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "disabled:cursor-not-allowed disabled:opacity-50", className),
+		...props
+	});
+}
+//#endregion
+//#region lib/types/ui/label.js
+/**
+* Label: form field caption over Radix Label (click focuses the control).
+*
+* @module @snap-rail/framework-shadcn/ui/label
+*/
+/** A themed field label. */
+function Label({ className, ...props }) {
+	return jsx(LabelPrimitive.Root, {
+		className: cn("text-sm font-medium text-muted-foreground select-none", className),
+		...props
+	});
+}
+//#endregion
+//#region lib/types/ui/checkbox.js
+/**
+* Checkbox: themed check entry over Radix Checkbox; the indicator is an
+* inline stroke so the UI seam needs no icon dependency.
+*
+* @module @snap-rail/framework-shadcn/ui/checkbox
+*/
+/** A themed checkbox. */
+function Checkbox({ className, ...props }) {
+	return jsx(CheckboxPrimitive.Root, {
+		className: cn("h-6 w-6 shrink-0 rounded-sm border border-input bg-transparent", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "data-[state=checked]:border-primary data-[state=checked]:bg-primary", "disabled:cursor-not-allowed disabled:opacity-50", className),
+		...props,
+		children: jsx(CheckboxPrimitive.Indicator, {
+			className: "flex items-center justify-center text-primary-foreground",
+			children: jsx("svg", {
+				viewBox: "0 0 12 12",
+				className: "h-4 w-4",
+				fill: "none",
+				"aria-hidden": "true",
+				children: jsx("path", {
+					d: "M2 6.5 4.8 9 10 3.5",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			})
+		})
+	});
+}
+//#endregion
+//#region lib/types/ui/progress.js
+/**
+* Progress: the Radix progress bar with snap-rail chrome — determinate
+* download/scan progress for long-running host work.
+*
+* @module @snap-rail/framework-shadcn/ui/progress
+*/
+/** A themed linear progress bar (`value` 0–100, `aria-valuenow` included). */
+function Progress({ className, value, ...props }) {
+	const percent = typeof value === "number" ? Math.min(100, Math.max(0, value)) : 0;
+	return jsx(ProgressPrimitive.Root, {
+		className: cn("relative h-2 w-full overflow-hidden rounded-full bg-secondary", className),
+		...props,
+		children: jsx(ProgressPrimitive.Indicator, {
+			className: "h-full w-full rounded-full bg-primary transition-transform",
+			style: { transform: `translateX(-${100 - percent}%)` }
+		})
+	});
+}
+//#endregion
+//#region lib/types/ui/radio-group.js
+/**
+* RadioGroup: exclusive choice over Radix RadioGroup (是/否 switches, model
+* picks); the indicator is a plain dot so the UI seam needs no icon dep.
+*
+* @module @snap-rail/framework-shadcn/ui/radio-group
+*/
+/** The exclusive group root. */
+function RadioGroup({ className, ...props }) {
+	return jsx(RadioGroupPrimitive.Root, {
+		className: cn("grid gap-3", className),
+		...props
+	});
+}
+/** One themed choice. */
+function RadioGroupItem({ className, ...props }) {
+	return jsx(RadioGroupPrimitive.Item, {
+		className: cn("aspect-square h-6 w-6 shrink-0 rounded-full border border-input bg-transparent", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "data-[state=checked]:border-primary disabled:cursor-not-allowed disabled:opacity-50", className),
+		...props,
+		children: jsx(RadioGroupPrimitive.Indicator, {
+			className: "flex items-center justify-center",
+			children: jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-primary" })
+		})
+	});
+}
+//#endregion
+//#region lib/types/ui/drag-scroll.js
+/**
+* DragScroll: an overflow-auto container that also pans when held and
+* dragged with the mouse (both axes). Touch and pen keep Chromium's native
+* pan, so only mouse pointers are intercepted. A 6px threshold separates a
+* pan from a press; the click that follows a pan is swallowed so dragged
+* rows never fire. DragScrolls nest (a table inside a scrolled page); only
+* the innermost container under the pressed target takes the gesture.
+*
+* @module @snap-rail/framework-shadcn/ui/drag-scroll
+*/
+/** Movement (px) before a held press turns into a pan. */
+const PAN_THRESHOLD = 6;
+/** An auto-scrolling div that pans under a held mouse drag. */
+function DragScroll({ className, children, ...props }) {
+	const container = useRef(null);
+	const pan = useRef(null);
+	const swallowClick = useRef(false);
+	const onPointerDown = (event) => {
+		if (event.pointerType !== "mouse" || event.button !== 0) return;
+		if (container.current === null) return;
+		const innermost = event.target instanceof Element ? event.target.closest("[data-drag-scroll]") : null;
+		if (innermost !== null && innermost !== container.current) return;
+		pan.current = {
+			id: event.pointerId,
+			x: event.clientX,
+			y: event.clientY,
+			moved: false
+		};
+	};
+	const onPointerMove = (event) => {
+		const state = pan.current;
+		if (state === null || state.id !== event.pointerId) return;
+		if (event.buttons === 0) {
+			pan.current = null;
+			return;
+		}
+		const el = container.current;
+		if (el === null) return;
+		const dx = state.x - event.clientX;
+		const dy = state.y - event.clientY;
+		if (!state.moved) {
+			if (Math.hypot(dx, dy) < PAN_THRESHOLD) return;
+			state.moved = true;
+			el.setPointerCapture(event.pointerId);
+			el.dataset.panning = "true";
+		}
+		el.scrollLeft += dx;
+		el.scrollTop += dy;
+		state.x = event.clientX;
+		state.y = event.clientY;
+	};
+	const endPan = (event) => {
+		const state = pan.current;
+		if (state === null || state.id !== event.pointerId) return;
+		pan.current = null;
+		const el = container.current;
+		if (el === null) return;
+		if (state.moved) {
+			if (el.hasPointerCapture(event.pointerId)) el.releasePointerCapture(event.pointerId);
+			delete el.dataset.panning;
+			swallowClick.current = true;
+		}
+	};
+	return jsx("div", {
+		ref: container,
+		"data-drag-scroll": "",
+		className: cn("overflow-auto", className),
+		onPointerDown,
+		onPointerMove,
+		onPointerUp: endPan,
+		onPointerCancel: endPan,
+		onClickCapture: (event) => {
+			if (!swallowClick.current) return;
+			swallowClick.current = false;
+			event.preventDefault();
+			event.stopPropagation();
+		},
+		...props,
+		children
+	});
+}
+//#endregion
+//#region lib/types/ui/touch-select.js
+/**
+* TouchSelect: a touch-first single-choice picker. The trigger opens a
+* modal listing one full-width button row per option — no popover aiming,
+* every row a 56px target; tapping a row commits and closes. Replaces
+* dropdown selects across the touch terminal.
+*
+* @module @snap-rail/framework-shadcn/ui/touch-select
+*/
+/** A chevron pointing up: the picker opens an upward modal, not a dropdown. */
+function ChevronUp() {
+	return jsx("svg", {
+		viewBox: "0 0 12 12",
+		className: "h-4 w-4 shrink-0 opacity-60",
+		fill: "none",
+		"aria-hidden": "true",
+		children: jsx("path", {
+			d: "m2.5 7.5 3.5-3.5 3.5 3.5",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+/** The committed row's check mark, mirroring the Checkbox indicator stroke. */
+function CheckIcon() {
+	return jsx("svg", {
+		viewBox: "0 0 12 12",
+		className: "h-4 w-4 text-primary",
+		fill: "none",
+		"aria-hidden": "true",
+		children: jsx("path", {
+			d: "M2 6.5 4.8 9 10 3.5",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+/** A modal-based picker: an outline trigger plus a Dialog list of rows. */
+function TouchSelect(props) {
+	const { label, value, options, onValueChange, placeholder = "请选择", disabled = false, className } = props;
+	const [open, setOpen] = useState(false);
+	const selected = options.find((option) => option.value === value);
+	return jsxs(Fragment, { children: [jsxs(Button, {
+		type: "button",
+		variant: "outline",
+		disabled,
+		"aria-label": label,
+		"data-touch-select-trigger": label,
+		className: cn("h-12 w-full justify-between px-4 text-base font-normal", className),
+		onClick: () => {
+			setOpen(true);
+		},
+		children: [selected === void 0 ? jsx("span", {
+			className: "truncate text-muted-foreground",
+			children: placeholder
+		}) : jsx("span", {
+			className: "min-w-0 truncate",
+			children: selected.triggerLabel ?? selected.label
+		}), jsx(ChevronUp, {})]
+	}), jsx(Dialog, {
+		open,
+		onOpenChange: setOpen,
+		children: jsxs(DialogContent, {
+			"aria-describedby": void 0,
+			className: "max-w-md p-0",
+			children: [jsx("div", {
+				className: "border-b border-border px-5 py-4",
+				children: jsx(DialogTitle, {
+					className: "text-base font-medium",
+					children: label
+				})
+			}), jsxs(DragScroll, {
+				className: "max-h-[65vh] p-2",
+				children: [options.length === 0 && jsx("div", {
+					className: "px-4 py-6 text-center text-sm text-muted-foreground",
+					children: "暂无选项"
+				}), options.map((option) => {
+					const isSelected = option.value === value;
+					return jsxs(Button, {
+						type: "button",
+						variant: "ghost",
+						disabled: option.disabled,
+						"data-option": option.value,
+						"aria-pressed": isSelected,
+						className: cn("h-14 w-full justify-between px-4 text-base font-normal", isSelected && "bg-secondary channel-keyline"),
+						onClick: () => {
+							onValueChange(option.value);
+							setOpen(false);
+						},
+						children: [jsx("span", {
+							className: "min-w-0 truncate",
+							children: option.label
+						}), jsxs("span", {
+							className: "flex shrink-0 items-center gap-2 text-sm text-muted-foreground",
+							children: [option.hint, isSelected && jsx(CheckIcon, {})]
+						})]
+					}, option.value);
+				})]
+			})]
+		})
+	})] });
+}
+//#endregion
+//#region lib/types/ui/number-input.js
+/**
+* NumberInput / NumberPad: numeric entry for the touch terminal. The field
+* is a button styled as an input (no system soft keyboard ever pops); a tap
+* opens the NumberPad modal — a 3×4 keypad plus 清除/确定. NumberPad also
+* mounts inline where the keypad should stay visible (the login card).
+*
+* @module @snap-rail/framework-shadcn/ui/number-input
+*/
+/** The keypad's backspace glyph; inline so the seam carries no icon dep. */
+function BackspaceIcon() {
+	return jsxs("svg", {
+		viewBox: "0 0 24 24",
+		className: "h-6 w-6",
+		fill: "none",
+		"aria-hidden": "true",
+		children: [jsx("path", {
+			d: "M9 5h11a1.5 1.5 0 0 1 1.5 1.5v11A1.5 1.5 0 0 1 20 19H9l-6.5-7L9 5Z",
+			stroke: "currentColor",
+			strokeWidth: "1.6",
+			strokeLinejoin: "round"
+		}), jsx("path", {
+			d: "m12.5 9.5 5 5m0-5-5 5",
+			stroke: "currentColor",
+			strokeWidth: "1.6",
+			strokeLinecap: "round"
+		})]
+	});
+}
+/** An inline 3×4 keypad (digits, optional decimal point, backspace) with a
+* clear/confirm action row; every key is a full-size Button. */
+function NumberPad(props) {
+	const { value, onChange, onConfirm, allowDecimal = false, confirmLabel = "确定", className } = props;
+	const press = (key) => {
+		if (key === "." && (value.includes(".") || value === "")) return;
+		onChange(value + key);
+	};
+	const backspace = () => {
+		onChange(value.slice(0, -1));
+	};
+	const clear = () => {
+		onChange("");
+	};
+	return jsxs("div", {
+		className: cn("grid grid-cols-3 gap-2", className),
+		children: [
+			[
+				"1",
+				"2",
+				"3",
+				"4",
+				"5",
+				"6",
+				"7",
+				"8",
+				"9"
+			].map((digit) => jsx(Button, {
+				type: "button",
+				variant: "secondary",
+				"data-key": digit,
+				className: "h-14 font-mono text-xl",
+				onClick: () => {
+					press(digit);
+				},
+				children: digit
+			}, digit)),
+			allowDecimal ? jsx(Button, {
+				type: "button",
+				variant: "secondary",
+				"data-key": "dot",
+				className: "h-14 font-mono text-xl",
+				onClick: () => {
+					press(".");
+				},
+				children: "·"
+			}) : jsx("div", { "aria-hidden": "true" }),
+			jsx(Button, {
+				type: "button",
+				variant: "secondary",
+				"data-key": "0",
+				className: "h-14 font-mono text-xl",
+				onClick: () => {
+					press("0");
+				},
+				children: "0"
+			}),
+			jsx(Button, {
+				type: "button",
+				variant: "secondary",
+				"aria-label": "退格",
+				"data-key": "back",
+				className: "h-14",
+				onClick: backspace,
+				children: jsx(BackspaceIcon, {})
+			}),
+			jsx(Button, {
+				type: "button",
+				variant: "outline",
+				"data-key": "clear",
+				className: "h-14 text-base",
+				onClick: clear,
+				children: "清除"
+			}),
+			jsx(Button, {
+				type: "button",
+				"data-key": "confirm",
+				className: "col-span-2 h-14 text-base",
+				onClick: () => {
+					onConfirm?.();
+				},
+				children: confirmLabel
+			})
+		]
+	});
+}
+/** A numeric field: an input-styled button that opens the NumberPad modal;
+* `onChange` commits on 确定 only — a cancelled edit changes nothing. */
+function NumberInput(props) {
+	const { label, value, onChange, placeholder = "", allowDecimal = false, disabled = false, className } = props;
+	const [open, setOpen] = useState(false);
+	const [draft, setDraft] = useState(value);
+	useEffect(() => {
+		if (open) setDraft(value);
+	}, [open, value]);
+	const confirm = () => {
+		onChange(draft);
+		setOpen(false);
+	};
+	return jsxs(Fragment, { children: [jsx("button", {
+		type: "button",
+		disabled,
+		"aria-label": label,
+		"data-number-input": label,
+		className: cn("flex h-12 w-full items-center rounded-md border border-input bg-transparent px-4 text-left", "font-mono text-base tabular-nums", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "disabled:cursor-not-allowed disabled:opacity-50", className),
+		onClick: () => {
+			setOpen(true);
+		},
+		children: value === "" ? jsx("span", {
+			className: "text-muted-foreground",
+			children: placeholder
+		}) : value
+	}), jsx(Dialog, {
+		open,
+		onOpenChange: setOpen,
+		children: jsxs(DialogContent, {
+			"aria-describedby": void 0,
+			className: "max-w-sm p-0",
+			children: [jsx("div", {
+				className: "border-b border-border px-5 py-4",
+				children: jsx(DialogTitle, {
+					className: "text-base font-medium",
+					children: label
+				})
+			}), jsxs("div", {
+				className: "px-5 pb-5 pt-4",
+				children: [jsx("div", {
+					className: "mb-4 min-h-14 rounded-md border border-border bg-muted px-4 py-3 text-right font-mono text-2xl tabular-nums",
+					"data-number-display": true,
+					children: draft === "" ? jsx("span", {
+						className: "text-muted-foreground",
+						children: "—"
+					}) : draft
+				}), jsx(NumberPad, {
+					value: draft,
+					onChange: setDraft,
+					onConfirm: confirm,
+					allowDecimal
+				})]
+			})]
+		})
+	})] });
+}
+//#endregion
+//#region lib/types/ui/schema-form.js
+function isPropertySchema(raw) {
+	return typeof raw === "object" && raw !== null;
+}
+/** Plan the renderable fields of an object schema (property order kept). */
+function planSchemaFields(schema, hidden = []) {
+	const properties = schema.properties;
+	const required = new Set(Array.isArray(schema.required) ? schema.required.filter((name) => typeof name === "string") : []);
+	const fields = [];
+	if (!isPropertySchema(properties)) return fields;
+	for (const [name, rawProperty] of Object.entries(properties)) {
+		if (hidden.includes(name)) continue;
+		const property = rawProperty;
+		const field = {
+			name,
+			label: typeof property.title === "string" && property.title !== "" ? property.title : name,
+			required: required.has(name),
+			kind: "string"
+		};
+		const literals = Array.isArray(property.enum) ? property.enum : Array.isArray(property.anyOf) ? property.anyOf.map((entry) => isPropertySchema(entry) && "const" in entry ? entry.const : void 0) : void 0;
+		const typed = literals?.filter((value) => typeof value === "string" || typeof value === "number" || typeof value === "boolean");
+		if (literals !== void 0 && typed !== void 0 && typed.length > 0 && typed.length === literals.length) {
+			const valueOf = {};
+			field.kind = "enum";
+			field.options = typed.map((value) => {
+				const key = String(value);
+				valueOf[key] = value;
+				return {
+					value: key,
+					label: key
+				};
+			});
+			field.literalOf = valueOf;
+		} else switch (property.type) {
+			case "integer":
+				field.kind = "integer";
+				break;
+			case "number":
+				field.kind = "number";
+				break;
+			case "boolean":
+				field.kind = "boolean";
+				break;
+			case "string":
+				field.kind = "string";
+				break;
+			default: field.kind = "text";
+		}
+		if (typeof property.description === "string") field.placeholder = property.description;
+		fields.push(field);
+	}
+	return fields;
+}
+/** Initial values from an object schema's `default`s (create dialogs). */
+function schemaDefaults(schema) {
+	const value = {};
+	const properties = schema.properties;
+	if (!isPropertySchema(properties)) return value;
+	for (const [name, rawProperty] of Object.entries(properties)) {
+		const fallback = rawProperty.default;
+		if (typeof fallback === "string" || typeof fallback === "number" || typeof fallback === "boolean") value[name] = fallback;
+	}
+	return value;
+}
+/** Strip keys whose value is `undefined` so unset optionals ride clean. */
+function compactSchemaValue(value) {
+	const out = {};
+	for (const [key, entry] of Object.entries(value)) if (entry !== void 0) out[key] = entry;
+	return out;
+}
+/** One labeled control. */
+function SchemaField(props) {
+	const { field, value, onChange, disabled = false } = props;
+	const setString = (next) => {
+		onChange(next === "" ? void 0 : next);
+	};
+	return jsxs("div", {
+		className: "grid gap-2",
+		"data-schema-field": field.name,
+		children: [
+			jsxs(Label, {
+				htmlFor: `schema-${field.name}`,
+				children: [field.label, field.required && jsx("span", {
+					className: "ml-1 text-destructive",
+					children: "*"
+				})]
+			}),
+			field.kind === "enum" && field.options !== void 0 && jsx(TouchSelect, {
+				label: field.label,
+				value: value === void 0 ? "" : String(value),
+				options: field.options,
+				onValueChange: (next) => {
+					onChange(field.literalOf?.[next] ?? next);
+				},
+				disabled
+			}),
+			(field.kind === "integer" || field.kind === "number") && jsx(NumberInput, {
+				label: field.label,
+				value: value === void 0 ? "" : String(value),
+				onChange: (text) => {
+					if (text === "") {
+						onChange(void 0);
+						return;
+					}
+					const parsed = field.kind === "integer" ? Number.parseInt(text, 10) : Number.parseFloat(text);
+					onChange(Number.isNaN(parsed) ? void 0 : parsed);
+				},
+				allowDecimal: field.kind === "number",
+				placeholder: field.placeholder ?? "—",
+				disabled
+			}),
+			field.kind === "boolean" && jsx("div", {
+				className: "flex h-12 items-center",
+				children: jsx(Switch, {
+					id: `schema-${field.name}`,
+					checked: value === true,
+					onCheckedChange: onChange,
+					disabled
+				})
+			}),
+			(field.kind === "string" || field.kind === "text") && jsx(Input, {
+				id: `schema-${field.name}`,
+				value: value === void 0 ? "" : String(value),
+				onChange: (event) => {
+					setString(event.target.value);
+				},
+				placeholder: field.placeholder,
+				disabled
+			})
+		]
+	});
+}
+/** A controlled, schema-driven form body (labels + controls, no buttons). */
+function SchemaForm(props) {
+	const { schema, value, onChange, hidden = [], disabled = false, className } = props;
+	const fields = planSchemaFields(schema, hidden);
+	return jsxs("div", {
+		className: cn("grid gap-5", className),
+		"data-schema-form": true,
+		children: [fields.map((field) => jsx(SchemaField, {
+			field,
+			value: value[field.name],
+			disabled,
+			onChange: (next) => {
+				onChange({
+					...value,
+					[field.name]: next
+				});
+			}
+		}, field.name)), fields.length === 0 && jsx("div", {
+			className: "rounded-md border border-dashed border-border px-4 py-6 text-center text-sm text-muted-foreground",
+			children: "此驱动无额外配置项"
+		})]
+	});
+}
+//#endregion
+//#region lib/types/ui/table.js
+/** The grid container with a hairline bottom rule; the wrapper pans under
+* a held mouse drag (see {@link DragScroll}). */
+function Table({ className, ...props }) {
+	return jsx(DragScroll, {
+		className: "w-full",
+		children: jsx("table", {
+			className: cn("w-full caption-bottom text-sm", className),
+			...props
+		})
+	});
+}
+/** Header group. */
+function TableHeader({ className, ...props }) {
+	return jsx("thead", {
+		className: cn("[&_tr]:border-b", className),
+		...props
+	});
+}
+/** Body group. */
+function TableBody({ className, ...props }) {
+	return jsx("tbody", {
+		className: cn("[&_tr:last-child]:border-0", className),
+		...props
+	});
+}
+/** One row: hairline separators, hover affordance when interactive. */
+function TableRow({ className, ...props }) {
+	return jsx("tr", {
+		className: cn("border-b border-border transition-colors hover:bg-accent/40 data-[state=selected]:bg-accent", className),
+		...props
+	});
+}
+/** One column head: muted, left-aligned unless overridden. */
+function TableHead({ className, ...props }) {
+	return jsx("th", {
+		className: cn("h-11 px-3 text-left align-middle text-sm font-medium text-muted-foreground", className),
+		...props
+	});
+}
+/** One cell. */
+function TableCell({ className, ...props }) {
+	return jsx("td", {
+		className: cn("px-3 py-3 align-middle", className),
+		...props
+	});
+}
+//#endregion
+//#region lib/types/ui/tabs.js
+/**
+* Tabs: themed pager over Radix Tabs (list, trigger, content). Icons are
+* inline strokes so the UI seam needs no icon dependency.
+*
+* @module @snap-rail/framework-shadcn/ui/tabs
+*/
+/** Controlled/uncontrolled root; re-exported so callers need one import. */
+const Tabs = TabsPrimitive.Root;
+/** The tab strip; triggers rest on the muted surface, the active one lifts. */
+function TabsList({ className, ...props }) {
+	return jsx(TabsPrimitive.List, {
+		className: cn("inline-flex h-12 items-center gap-1 rounded-lg bg-muted p-1 text-muted-foreground", className),
+		...props
+	});
+}
+/** One tab button; the data attributes carry the active/hover styling. */
+function TabsTrigger({ className, ...props }) {
+	return jsx(TabsPrimitive.Trigger, {
+		className: cn("inline-flex items-center gap-1.5 whitespace-nowrap rounded-md px-5 py-1.5 text-base font-medium", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "disabled:pointer-events-none disabled:opacity-50", "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm", className),
+		...props
+	});
+}
+/** The panel of one tab; mounted only while its trigger is active. */
+function TabsContent({ className, ...props }) {
+	return jsx(TabsPrimitive.Content, {
+		className: cn("mt-4 focus-visible:outline-none", className),
+		...props
+	});
+}
+//#endregion
+//#region lib/types/ui/collapsible.js
+/**
+* Collapsible: the shadcn collapsible over Radix Collapsible — an
+* independently controlled show/hide section. The root carries the card
+* surface. A section may carry several triggers (title zone, chevron zone);
+* each renders the shared {@link CollapsibleChevron} where it wants the
+* rotating arrow. Icons are inline strokes so the UI seam needs no icon
+* dependency.
+*
+* @module @snap-rail/framework-shadcn/ui/collapsible
+*/
+/** Controlled/uncontrolled root; renders the bordered card surface. */
+function Collapsible({ className, ...props }) {
+	return jsx(CollapsiblePrimitive.Root, {
+		className: cn("rounded-md border border-border bg-card", className),
+		...props
+	});
+}
+/** The header button. The `group` class lets a nested chevron sense the
+* open state (see {@link CollapsibleChevron}). */
+function CollapsibleTrigger({ className, ...props }) {
+	return jsx(CollapsiblePrimitive.CollapsibleTrigger, {
+		className: cn("group flex w-full items-center gap-2 text-sm font-medium", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className),
+		...props
+	});
+}
+/** The rotating disclosure arrow; renders inside a trigger and turns with
+* that trigger's open state. */
+function CollapsibleChevron({ className }) {
+	return jsx("svg", {
+		viewBox: "0 0 12 12",
+		className: cn("h-4 w-4 shrink-0 opacity-60 transition-transform duration-200 group-data-[state=open]:rotate-180", className),
+		fill: "none",
+		"aria-hidden": "true",
+		children: jsx("path", {
+			d: "m2.5 4.5 3.5 3.5 3.5-3.5",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+/** The body; mounted only while open. */
+function CollapsibleContent({ className, ...props }) {
+	return jsx(CollapsiblePrimitive.CollapsibleContent, {
+		className: cn("overflow-hidden", className),
+		...props
+	});
+}
+//#endregion
+//#region lib/types/ui/icons.js
+/** The shared stroke skeleton every icon renders. */
+function icon(path, className) {
+	return jsx("svg", {
+		viewBox: "0 0 24 24",
+		className: cn("h-4 w-4 shrink-0", className),
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: path
+	});
+}
+/** A plus glyph — the "add / install something" affordance. */
+function IconPlus({ className }) {
+	return icon(jsxs(Fragment, { children: [jsx("path", { d: "M5 12h14" }), jsx("path", { d: "M12 5v14" })] }), className);
+}
+/** Chevrons pointing together (down-up) — the "collapse all" affordance. */
+function IconChevronsDownUp({ className }) {
+	return icon(jsxs(Fragment, { children: [jsx("path", { d: "m7 20 5-5 5 5" }), jsx("path", { d: "m7 4 5 5 5-5" })] }), className);
+}
+/** Chevrons pointing apart (up-down) — the "expand all" affordance. */
+function IconChevronsUpDown({ className }) {
+	return icon(jsxs(Fragment, { children: [jsx("path", { d: "m7 15 5 5 5-5" }), jsx("path", { d: "m7 9 5-5 5 5" })] }), className);
+}
+//#endregion
+//#region lib/types/ui/led.js
+const TONE_CLASS = {
+	green: "bg-success",
+	yellow: "bg-warning",
+	red: "bg-destructive"
+};
+/** One pulsing dot; pass `aria-label` when it is the only status surface. */
+function Led({ tone, className, ...props }) {
+	return jsx("span", {
+		"data-tone": tone,
+		className: cn("inline-block h-3 w-3 shrink-0 animate-pulse rounded-full", TONE_CLASS[tone], className),
+		...props
+	});
+}
+//#endregion
+//#region lib/types/ui/theme.js
+/**
+* Theme settings: the `ui.theme` settings.json row (a mode choice — the
+* cobalt accent is fixed per mode) and its DOM application. The renderer
+* resident that owns the 主题 settings page reads and writes the row; the
+* `settings/changed` frame hot-applies it on every surface without a
+* restart.
+*
+* @module @snap-rail/framework-shadcn/ui/theme
+*/
+/** settings.json key carrying the theme row. */
+const THEME_SETTINGS_KEY = "ui.theme";
+/** The theme row; invalid stored rows fall back to {@link DEFAULT_THEME}. */
+const themeSettingsSchema = z.object({ mode: z.enum([
+	"system",
+	"light",
+	"dark"
+]) });
+/** Applied before any settings arrive; keeps the terminal dark as before. */
+const DEFAULT_THEME = { mode: "dark" };
+/** The mode a setting resolves to (`system` consults the OS preference). */
+function resolveThemeMode(mode, prefersLight) {
+	if (mode === "system") return prefersLight ? "light" : "dark";
+	return mode;
+}
+/** Apply a theme row: sets `data-mode` on the document element (the token
+* blocks in theme.css key off it). A missing matchMedia — as in tests —
+* resolves `system` to dark. */
+function applyTheme(document, theme) {
+	const view = document.defaultView;
+	const prefersLight = view !== null && typeof view.matchMedia === "function" && view.matchMedia("(prefers-color-scheme: light)").matches;
+	document.documentElement.dataset.mode = resolveThemeMode(theme.mode, prefersLight);
+}
+//#endregion
+export { Badge, Button, Card, CardContent, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleChevron, CollapsibleContent, CollapsibleTrigger, DEFAULT_THEME, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DragScroll, IconChevronsDownUp, IconChevronsUpDown, IconPlus, Input, Label, Led, NumberInput, NumberPad, Progress, RadioGroup, RadioGroupItem, SchemaForm, ScrollArea, Switch, THEME_SETTINGS_KEY, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Tooltip, TooltipRoot, TouchSelect, applyTheme, cn, compactSchemaValue, planSchemaFields, resolveThemeMode, schemaDefaults, themeSettingsSchema, useRefresh };