@reopt-ai/opt-ui 1.5.0 → 1.7.0

package/dist/shader-surface-BUPZ0P-n.js

@@ -0,0 +1,3654 @@
+"use client";
+import { $t as koBreadcrumbLabels, Bn as _objectSpread2, Cn as OPT_FOCUS, En as OPT_INPUT, In as OPT_TEXT_PRIMARY, Ln as OPT_TEXT_SECONDARY, Pn as OPT_TEXTAREA_SIZE, Qt as Button, Rn as OPT_TEXT_TERTIARY, Un as cn, Vn as _objectWithoutProperties, Yt as Spinner, an as RequiredMark, at as MenuPopover$1, cn as OPT_ANIMATE_DRAWER, ct as MenuTrigger$1, hn as OPT_BORDER, in as FieldMessages, kn as OPT_SURFACE, ln as OPT_ANIMATE_ENTER_EXIT, nt as MenuItem$1, on as getDescribedBy, ot as MenuRoot$1, qt as useInputId, rn as useControlledState, st as MenuSeparator$1, wn as OPT_FOCUS_VISIBLE } from "./pagination-DWbvACuN.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { createContext, createElement, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, DialogDismiss, DialogPanel, DialogRoot, Meter, RadioGroupRoot, Separator, Toggle, ToggleGroup, useDialogClose, useRadioGroupContext } from "@reopt-ai/opt-ui-primitives";
+import { ChevronDown, GripVertical } from "lucide-react";
+import { Group, Panel, Separator as Separator$1 } from "react-resizable-panels";
+import { Mesh, Program, Renderer, Triangle } from "ogl";
+import { hexToSrgb } from "@reopt-ai/opt-palette";
+//#region src/core/text.tsx
+const _excluded$17 = [
+	"as",
+	"variant",
+	"tone",
+	"truncate",
+	"className",
+	"children"
+];
+const toneStyles = {
+	primary: "text-text-primary",
+	secondary: "text-text-secondary",
+	tertiary: "text-text-tertiary",
+	inherit: "text-inherit"
+};
+/** Semantic body text whose visual role is controlled by foundation tokens. */
+function Text(_ref) {
+	let { as, variant = "body", tone = "primary", truncate = false, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$17);
+	const Component = as !== null && as !== void 0 ? as : "span";
+	const elementProps = _objectSpread2(_objectSpread2({}, props), {}, {
+		className: cn(`opt-type-${variant}`, toneStyles[tone], truncate && "truncate", className),
+		"data-opt-component": "text",
+		"data-opt-part": "root",
+		"data-opt-id": "NFKP2",
+		"data-opt-slug": "text.Text",
+		"data-role": variant,
+		"data-tone": tone
+	});
+	return createElement(Component, elementProps, children);
+}
+//#endregion
+//#region src/core/heading.tsx
+const _excluded$16 = [
+	"level",
+	"variant",
+	"className",
+	"children"
+];
+/** Semantic heading with independently selectable visual hierarchy. */
+function Heading(_ref) {
+	let { level = 2, variant = `heading-${level}`, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$16);
+	const Component = {
+		1: "h1",
+		2: "h2",
+		3: "h3",
+		4: "h4",
+		5: "h5",
+		6: "h6"
+	}[level];
+	return createElement(Component, _objectSpread2(_objectSpread2({ className: cn(`opt-type-${variant}`, "text-text-primary", className) }, props), {}, {
+		"data-opt-component": "heading",
+		"data-opt-part": "root",
+		"data-opt-id": "NF0BT",
+		"data-opt-slug": "heading.Heading",
+		"data-level": level,
+		"data-role": variant
+	}), children);
+}
+//#endregion
+//#region src/core/separator.tsx
+/**
+* Visual divider between content. Wraps the headless primitive with design
+* tokens. With `children`, renders a centered label flanked by rules.
+*/
+function Separator$2({ orientation = "horizontal", decorative = false, children, className }) {
+	if (orientation === "horizontal" && children != null) return /* @__PURE__ */ jsxs("div", {
+		className: cn("gap-element flex items-center", className),
+		"data-opt-id": "7PWJS",
+		"data-opt-slug": "separator.Separator",
+		children: [
+			/* @__PURE__ */ jsx(Separator, {
+				decorative: true,
+				orientation: "horizontal",
+				className: "bg-border h-px flex-1"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-text-tertiary shrink-0 text-xs",
+				children
+			}),
+			/* @__PURE__ */ jsx(Separator, {
+				decorative: true,
+				orientation: "horizontal",
+				className: "bg-border h-px flex-1"
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Separator, {
+		orientation,
+		decorative,
+		className: cn("bg-border shrink-0", orientation === "horizontal" ? "h-px w-full" : "h-full w-px self-stretch", className),
+		"data-opt-id": "7PWJS",
+		"data-opt-slug": "separator.Separator"
+	});
+}
+Separator$2.displayName = "Separator";
+//#endregion
+//#region src/core/otp-field.tsx
+const PATTERNS = {
+	numeric: /[0-9]/,
+	alphanumeric: /[a-zA-Z0-9]/
+};
+/**
+* One-time-code / PIN entry split into per-character cells, with paste
+* distribution, auto-advancing focus, and arrow/backspace navigation.
+*/
+function OtpField({ length = 6, value: controlledValue, defaultValue = "", onChange, onComplete, type = "numeric", mask = false, disabled = false, autoFocus = false, name, label, required, error, hint, className, id, "aria-label": ariaLabel }) {
+	const reactId = React.useId();
+	const fieldId = id !== null && id !== void 0 ? id : `otp-${reactId}`;
+	const hasError = Boolean(error);
+	const pattern = PATTERNS[type];
+	const inputsRef = React.useRef([]);
+	const labelId = label ? `${fieldId}-label` : void 0;
+	const groupLabelledBy = ariaLabel ? void 0 : labelId;
+	const groupAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : groupLabelledBy ? void 0 : "One-time code";
+	const [value, setRawValue] = useControlledState(defaultValue, controlledValue, onChange);
+	const completedRef = React.useRef(false);
+	const setValue = React.useCallback((next) => {
+		const clipped = next.slice(0, length);
+		setRawValue(clipped);
+		if (clipped.length === length) {
+			if (!completedRef.current) {
+				completedRef.current = true;
+				onComplete === null || onComplete === void 0 || onComplete(clipped);
+			}
+		} else completedRef.current = false;
+	}, [
+		length,
+		setRawValue,
+		onComplete
+	]);
+	const focusCell = React.useCallback((index) => {
+		var _inputsRef$current$ta, _inputsRef$current$ta2;
+		const target = Math.max(0, Math.min(index, inputsRef.current.length - 1));
+		(_inputsRef$current$ta = inputsRef.current[target]) === null || _inputsRef$current$ta === void 0 || _inputsRef$current$ta.focus();
+		(_inputsRef$current$ta2 = inputsRef.current[target]) === null || _inputsRef$current$ta2 === void 0 || _inputsRef$current$ta2.select();
+	}, []);
+	const cells = React.useMemo(() => Array.from({ length }, (_, i) => {
+		var _value$i;
+		return (_value$i = value[i]) !== null && _value$i !== void 0 ? _value$i : "";
+	}), [length, value]);
+	const setCell = React.useCallback((index, char) => {
+		const arr = Array.from({ length }, (_, i) => {
+			var _value$i2;
+			return (_value$i2 = value[i]) !== null && _value$i2 !== void 0 ? _value$i2 : "";
+		});
+		arr[index] = char;
+		setValue(arr.join(""));
+	}, [
+		length,
+		value,
+		setValue
+	]);
+	const handleChange = React.useCallback((index) => (e) => {
+		var _chars;
+		const raw = e.target.value;
+		const chars = raw.split("").filter((c) => pattern.test(c));
+		const char = (_chars = chars[chars.length - 1]) !== null && _chars !== void 0 ? _chars : "";
+		if (char === "" && raw !== "") return;
+		setCell(index, char);
+		if (char) focusCell(index + 1);
+	}, [
+		pattern,
+		setCell,
+		focusCell
+	]);
+	const handleKeyDown = React.useCallback((index) => (e) => {
+		switch (e.key) {
+			case "Backspace":
+				e.preventDefault();
+				if (cells[index]) setCell(index, "");
+				else if (index > 0) {
+					setCell(index - 1, "");
+					focusCell(index - 1);
+				}
+				break;
+			case "ArrowLeft":
+				e.preventDefault();
+				focusCell(index - 1);
+				break;
+			case "ArrowRight":
+				e.preventDefault();
+				focusCell(index + 1);
+		}
+	}, [
+		cells,
+		setCell,
+		focusCell
+	]);
+	const handlePaste = React.useCallback((index) => (e) => {
+		e.preventDefault();
+		const pasted = e.clipboardData.getData("text").split("").filter((c) => pattern.test(c)).join("");
+		if (!pasted) return;
+		const arr = Array.from({ length }, (_, i) => {
+			var _value$i3;
+			return (_value$i3 = value[i]) !== null && _value$i3 !== void 0 ? _value$i3 : "";
+		});
+		for (let i = 0; i < pasted.length && index + i < length; i++) arr[index + i] = pasted[i];
+		setValue(arr.join(""));
+		focusCell(index + pasted.length);
+	}, [
+		pattern,
+		length,
+		value,
+		setValue,
+		focusCell
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1.5", className),
+		"data-opt-id": "0083Q",
+		"data-opt-slug": "otp-field.OtpField",
+		children: [
+			label && /* @__PURE__ */ jsxs("span", {
+				className: "text-sm font-medium text-text-primary",
+				id: labelId,
+				children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "group",
+				"aria-label": groupAriaLabel,
+				"aria-labelledby": groupLabelledBy,
+				"aria-describedby": getDescribedBy(fieldId, error, hint),
+				className: "gap-element flex items-center",
+				children: cells.map((cell, i) => /* @__PURE__ */ jsx("input", {
+					ref: (node) => {
+						inputsRef.current[i] = node;
+					},
+					type: mask ? "password" : "text",
+					inputMode: type === "numeric" ? "numeric" : "text",
+					autoComplete: i === 0 ? "one-time-code" : "off",
+					autoFocus: autoFocus && i === 0,
+					maxLength: 1,
+					disabled,
+					"aria-label": `${i + 1}번째 자리`,
+					"aria-invalid": hasError || void 0,
+					value: cell,
+					onChange: handleChange(i),
+					onKeyDown: handleKeyDown(i),
+					onPaste: handlePaste(i),
+					onFocus: (e) => e.target.select(),
+					className: cn(OPT_INPUT, "h-12 w-10 text-center text-lg font-medium", hasError && "border-danger focus-visible:outline-danger")
+				}, i))
+			}),
+			name && /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value,
+				disabled
+			}),
+			/* @__PURE__ */ jsx(FieldMessages, {
+				id: fieldId,
+				error,
+				hint
+			})
+		]
+	});
+}
+OtpField.displayName = "OtpField";
+//#endregion
+//#region src/core/toggle.tsx
+const _excluded$15 = [
+	"size",
+	"className",
+	"children"
+];
+const _excluded2$8 = [
+	"className",
+	"children",
+	"orientation"
+];
+const sizeStyles$5 = {
+	sm: "h-8 min-w-8 px-2 text-xs gap-1.5",
+	md: "h-10 min-w-10 px-3 text-sm gap-2"
+};
+const toggleBase = cn("inline-flex cursor-pointer items-center justify-center rounded-md border border-border bg-surface font-medium text-text-secondary", "hover:bg-bg-subtle hover:text-text-primary", "data-[pressed]:border-accent data-[pressed]:bg-accent-subtle data-[pressed]:text-accent", "disabled:pointer-events-none disabled:opacity-40", OPT_FOCUS_VISIBLE);
+/** A two-state (pressed) button. Use standalone or inside `ToggleGroup`. */
+function Toggle$1(_ref) {
+	let { size = "md", className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$15);
+	return /* @__PURE__ */ jsx(Toggle, _objectSpread2(_objectSpread2({ className: cn(toggleBase, sizeStyles$5[size], className) }, props), {}, {
+		"data-opt-id": "GFCMY",
+		"data-opt-slug": "toggle.Toggle",
+		children
+	}));
+}
+Toggle$1.displayName = "Toggle";
+/** A set of related toggles with shared selection and keyboard navigation. */
+function ToggleGroup$1(_ref2) {
+	let { className, children, orientation = "horizontal" } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$8);
+	return /* @__PURE__ */ jsx(ToggleGroup, _objectSpread2(_objectSpread2({
+		orientation,
+		"aria-orientation": orientation,
+		className: cn("inline-flex gap-1", orientation === "vertical" ? "flex-col" : "flex-row", className)
+	}, props), {}, {
+		"data-opt-id": "47J37",
+		"data-opt-slug": "toggle.ToggleGroup",
+		children
+	}));
+}
+ToggleGroup$1.displayName = "ToggleGroup";
+//#endregion
+//#region src/core/accordion.tsx
+const _excluded$14 = ["className"];
+const _excluded2$7 = ["className"];
+const _excluded3$4 = ["className", "children"];
+const _excluded4$3 = ["className", "children"];
+const triggerClass = `group/acc-trigger flex w-full cursor-pointer items-center justify-between gap-2 py-4 text-left text-sm font-medium text-text-primary transition-colors hover:text-text-secondary ${OPT_FOCUS} disabled:cursor-not-allowed disabled:opacity-50`;
+const contentClass = `overflow-hidden text-sm text-text-secondary ${OPT_ANIMATE_ENTER_EXIT}`;
+/** A vertically stacked set of expandable panels (single or multiple open). */
+function AccordionRoot$1(_ref) {
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$14);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("border-border border-y", className),
+		"data-opt-id": "CSBA9",
+		"data-opt-slug": "accordion.AccordionRoot",
+		children: /* @__PURE__ */ jsx(AccordionRoot, _objectSpread2({}, props))
+	});
+}
+AccordionRoot$1.displayName = "AccordionRoot";
+/** A single accordion entry, identified by its `value`. */
+function AccordionItem$1(_ref2) {
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$7);
+	return /* @__PURE__ */ jsx(AccordionItem, _objectSpread2(_objectSpread2({ className: cn("border-border border-b last:border-b-0", className) }, props), {}, {
+		"data-opt-id": "JTY9M",
+		"data-opt-slug": "accordion.AccordionItem"
+	}));
+}
+AccordionItem$1.displayName = "AccordionItem";
+/** The clickable header that expands/collapses its panel. */
+function AccordionTrigger$1(_ref3) {
+	let { className, children } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$4);
+	return /* @__PURE__ */ jsxs(AccordionTrigger, _objectSpread2(_objectSpread2({ className: cn(triggerClass, className) }, props), {}, {
+		"data-opt-id": "CWJZZ",
+		"data-opt-slug": "accordion.AccordionTrigger",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "flex-1",
+			children
+		}), /* @__PURE__ */ jsx(ChevronDown, {
+			"aria-hidden": "true",
+			className: "text-text-tertiary h-4 w-4 shrink-0 transition-transform duration-200 group-data-[state=open]/acc-trigger:rotate-180"
+		})]
+	}));
+}
+AccordionTrigger$1.displayName = "AccordionTrigger";
+/** The collapsible panel body associated with a trigger. */
+function AccordionContent$1(_ref4) {
+	let { className, children } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$3);
+	return /* @__PURE__ */ jsx(AccordionContent, _objectSpread2(_objectSpread2({ className: cn(contentClass, className) }, props), {}, {
+		"data-opt-id": "J98AG",
+		"data-opt-slug": "accordion.AccordionContent",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "pb-4",
+			children
+		})
+	}));
+}
+AccordionContent$1.displayName = "AccordionContent";
+//#endregion
+//#region src/core/breadcrumb.tsx
+function interpolate(template, values) {
+	return template.replace(/\{(\w+)\}/g, (_, key) => key in values ? String(values[key]) : `{${key}}`);
+}
+/** Renders the breadcrumb component. */
+function Breadcrumb({ items, separator = "/", className, onNavigate, "aria-label": ariaLabel = "Breadcrumb" }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": ariaLabel,
+		className: cn("flex items-center gap-1 px-1.5 text-sm", className),
+		"data-opt-id": "3FR0Y",
+		"data-opt-slug": "breadcrumb.Breadcrumb",
+		children: /* @__PURE__ */ jsx("ol", {
+			className: "flex items-center gap-1",
+			children: items.map((item, index) => {
+				const isLast = index === items.length - 1;
+				const linkClassName = cn(`flex items-center gap-1.5 rounded-sm ${OPT_FOCUS} transition-colors`, item.disabled ? `${OPT_TEXT_TERTIARY} cursor-not-allowed` : `${OPT_TEXT_SECONDARY} hover:text-text-primary cursor-pointer`);
+				return /* @__PURE__ */ jsx("li", {
+					className: "flex items-center gap-1",
+					children: isLast ? /* @__PURE__ */ jsxs("span", {
+						"aria-current": "page",
+						className: `flex items-center gap-1.5 font-medium ${OPT_TEXT_PRIMARY}`,
+						children: [item.icon, item.label]
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [item.href ? /* @__PURE__ */ jsxs("a", {
+						href: item.disabled ? void 0 : item.href,
+						"aria-disabled": item.disabled || void 0,
+						className: linkClassName,
+						onClick: () => !item.disabled && (onNavigate === null || onNavigate === void 0 ? void 0 : onNavigate(item)),
+						children: [item.icon, item.label]
+					}) : /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						disabled: item.disabled,
+						"aria-label": interpolate(koBreadcrumbLabels.navAriaLabel, { label: item.label }),
+						className: linkClassName,
+						onClick: () => !item.disabled && (onNavigate === null || onNavigate === void 0 ? void 0 : onNavigate(item)),
+						children: [item.icon, item.label]
+					}), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: OPT_TEXT_TERTIARY,
+						children: separator
+					})] })
+				}, item.id);
+			})
+		})
+	});
+}
+//#endregion
+//#region src/core/card.tsx
+const _excluded$13 = [
+	"variant",
+	"padding",
+	"shadow",
+	"selectable",
+	"selected",
+	"onSelectedChange",
+	"className",
+	"children",
+	"onClick",
+	"onKeyDown",
+	"role",
+	"tabIndex"
+];
+const _excluded2$6 = [
+	"gap",
+	"className",
+	"children"
+];
+const _excluded3$3 = [
+	"as",
+	"className",
+	"children"
+];
+const _excluded4$2 = ["className", "children"];
+const _excluded5 = [
+	"spacing",
+	"className",
+	"children"
+];
+const _excluded6 = [
+	"divider",
+	"className",
+	"children"
+];
+/** Renders the card component. */
+function Card(_ref) {
+	let { variant = "default", padding = "md", shadow = true, selectable = false, selected = false, onSelectedChange, className, children, onClick, onKeyDown, role, tabIndex } = _ref, props = _objectWithoutProperties(_ref, _excluded$13);
+	const isInteractive = selectable || !!onClick;
+	const handleClick = selectable ? (e) => {
+		onSelectedChange === null || onSelectedChange === void 0 || onSelectedChange(!selected);
+		onClick === null || onClick === void 0 || onClick(e);
+	} : onClick;
+	const handleKeyDown = selectable ? (e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			onSelectedChange === null || onSelectedChange === void 0 || onSelectedChange(!selected);
+		}
+		onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+	} : isInteractive ? (e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			e.currentTarget.click();
+		}
+		onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+	} : onKeyDown;
+	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2(_objectSpread2({}, props), {}, { className: cn("rounded-xl", variant === "default" && cn(`border border-border bg-surface`, shadow && "shadow-sm"), variant === "outline" && "border-border border-2 bg-transparent", variant === "ghost" && "bg-bg-subtle", padding === "none" && "p-0", padding === "sm" && "p-3", padding === "md" && "p-5", padding === "lg" && "p-8", selectable && "cursor-pointer transition-colors", selectable && selected && "ring-accent border-accent ring-2 ring-offset-1", selectable && !selected && "hover:border-accent/50", className) }, isInteractive ? {
+		role: selectable ? "option" : "button",
+		tabIndex: 0,
+		"aria-selected": selectable ? selected : void 0,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown
+	} : {
+		role,
+		tabIndex,
+		"aria-selected": selectable ? selected : void 0,
+		onKeyDown
+	}), {}, {
+		"data-opt-id": "0A18R",
+		"data-opt-slug": "card.Card",
+		children
+	}));
+}
+const headerGapClasses = {
+	sm: "gap-1",
+	md: "gap-1.5",
+	lg: "gap-2"
+};
+/** Renders the card header component. */
+function CardHeader(_ref2) {
+	let { gap = "sm", className, children } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$6);
+	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2({ className: cn("flex flex-col", headerGapClasses[gap], className) }, props), {}, {
+		"data-opt-id": "JST3J",
+		"data-opt-slug": "card.CardHeader",
+		children
+	}));
+}
+/** Renders the card title component. */
+function CardTitle(_ref3) {
+	let { as: Tag = "h3", className, children } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$3);
+	return /* @__PURE__ */ jsx(Tag, _objectSpread2(_objectSpread2({ className: cn(`text-lg font-semibold ${OPT_TEXT_PRIMARY}`, className) }, props), {}, {
+		"data-opt-id": "V15TX",
+		"data-opt-slug": "card.CardTitle",
+		children
+	}));
+}
+/** Renders the card description component. */
+function CardDescription(_ref4) {
+	let { className, children } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$2);
+	return /* @__PURE__ */ jsx("p", _objectSpread2(_objectSpread2({ className: cn(`text-sm ${OPT_TEXT_SECONDARY}`, className) }, props), {}, {
+		"data-opt-id": "YB1RN",
+		"data-opt-slug": "card.CardDescription",
+		children
+	}));
+}
+const contentSpacingClasses = {
+	none: "",
+	sm: "mt-2",
+	md: "mt-4",
+	lg: "mt-6"
+};
+/** Renders the card content component. */
+function CardContent(_ref5) {
+	let { spacing = "md", className, children } = _ref5, props = _objectWithoutProperties(_ref5, _excluded5);
+	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2({ className: cn(contentSpacingClasses[spacing], className) }, props), {}, {
+		"data-opt-id": "9Y68R",
+		"data-opt-slug": "card.CardContent",
+		children
+	}));
+}
+/** Renders the card footer component. */
+function CardFooter(_ref6) {
+	let { divider = true, className, children } = _ref6, props = _objectWithoutProperties(_ref6, _excluded6);
+	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2({ className: cn("mt-4 flex items-center justify-end gap-2 pt-4", divider && `border-t border border-border`, className) }, props), {}, {
+		"data-opt-id": "GRNTR",
+		"data-opt-slug": "card.CardFooter",
+		children
+	}));
+}
+//#endregion
+//#region src/core/switch.tsx
+const _excluded$12 = [
+	"label",
+	"required",
+	"error",
+	"hint",
+	"description",
+	"checked",
+	"defaultChecked",
+	"onChange",
+	"size",
+	"disabled",
+	"className",
+	"id",
+	"onClick",
+	"aria-label",
+	"aria-labelledby"
+];
+const sizeStyles$4 = {
+	sm: {
+		track: "h-5 w-9",
+		thumb: "h-4 w-4",
+		translate: "translate-x-4"
+	},
+	md: {
+		track: "h-6 w-11",
+		thumb: "h-5 w-5",
+		translate: "translate-x-5"
+	},
+	lg: {
+		track: "h-7 w-14",
+		thumb: "h-6 w-6",
+		translate: "translate-x-7"
+	}
+};
+const Switch = forwardRef((_ref, ref) => {
+	var _useInputId;
+	let { label, required, error, hint, description, checked: controlledChecked, defaultChecked = false, onChange, size = "md", disabled, className, id, onClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = _ref, props = _objectWithoutProperties(_ref, _excluded$12);
+	const fallbackId = useId();
+	const switchId = (_useInputId = useInputId(id, label, "switch")) !== null && _useInputId !== void 0 ? _useInputId : `switch-${fallbackId}`;
+	const hintText = hint !== null && hint !== void 0 ? hint : description;
+	const hasError = Boolean(error);
+	const styles = sizeStyles$4[size];
+	const labelId = label ? `${switchId}-label` : void 0;
+	const switchLabelledBy = ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : ariaLabel ? void 0 : labelId;
+	const switchAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : switchLabelledBy ? void 0 : "Switch";
+	const isControlled = controlledChecked !== void 0;
+	const [internalChecked, setInternalChecked] = useState(defaultChecked);
+	const checked = isControlled ? controlledChecked : internalChecked;
+	const handleClick = useCallback((e) => {
+		const next = !checked;
+		if (!isControlled) setInternalChecked(next);
+		onChange === null || onChange === void 0 || onChange(next);
+		onClick === null || onClick === void 0 || onClick(e);
+	}, [
+		checked,
+		isControlled,
+		onChange,
+		onClick
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1.5", className),
+		"data-opt-id": "51Z9R",
+		"data-opt-slug": "switch.Switch",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-3",
+			children: [/* @__PURE__ */ jsx("button", _objectSpread2(_objectSpread2({
+				ref,
+				type: "button",
+				role: "switch",
+				id: switchId,
+				"aria-checked": checked,
+				"aria-label": switchAriaLabel,
+				"aria-labelledby": switchLabelledBy,
+				disabled,
+				className: cn("group relative inline-flex shrink-0 cursor-pointer rounded-full p-0.5 transition-colors", styles.track, "bg-bg-muted", "aria-[checked=true]:bg-accent", "disabled:cursor-not-allowed disabled:opacity-50", OPT_FOCUS_VISIBLE),
+				"aria-invalid": hasError,
+				"aria-required": required,
+				"aria-describedby": getDescribedBy(switchId, error, hintText),
+				onClick: handleClick
+			}, props), {}, { children: /* @__PURE__ */ jsx("span", { className: cn("pointer-events-none inline-block transform rounded-full bg-white shadow-sm ring-0 transition-transform", styles.thumb, "translate-x-0", size === "sm" && "group-aria-[checked=true]:translate-x-4", size === "md" && "group-aria-[checked=true]:translate-x-5", size === "lg" && "group-aria-[checked=true]:translate-x-7") }) })), (label || hintText) && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [label && /* @__PURE__ */ jsxs("span", {
+					id: labelId,
+					className: cn("text-text-primary text-sm font-medium", disabled && "opacity-50"),
+					children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+				}), hintText && /* @__PURE__ */ jsx("p", {
+					id: `${switchId}-hint`,
+					className: cn("text-text-tertiary text-sm", disabled && "opacity-50"),
+					children: hintText
+				})]
+			})]
+		}), /* @__PURE__ */ jsx(FieldMessages, {
+			id: switchId,
+			error
+		})]
+	});
+});
+Switch.displayName = "Switch";
+//#endregion
+//#region src/core/skeleton.tsx
+const _excluded$11 = [
+	"variant",
+	"width",
+	"height",
+	"lines",
+	"animated",
+	"className",
+	"style"
+];
+const _excluded2$5 = ["lines", "className"];
+const _excluded3$2 = ["size", "className"];
+const _excluded4$1 = ["className"];
+const variantStyles$2 = {
+	text: "rounded h-4",
+	circular: "rounded-full",
+	rectangular: "rounded-lg"
+};
+/** Renders the skeleton component. */
+function Skeleton(_ref) {
+	let { variant = "text", width, height, lines = 1, animated = true, className, style } = _ref, props = _objectWithoutProperties(_ref, _excluded$11);
+	const baseClass = cn("bg-bg-subtle", animated && "animate-pulse", variantStyles$2[variant], className);
+	const computedStyle = _objectSpread2({
+		width: typeof width === "number" ? `${width}px` : width,
+		height: typeof height === "number" ? `${height}px` : height
+	}, style);
+	if (variant === "text" && lines > 1) return /* @__PURE__ */ jsxs("div", {
+		className: "gap-element flex flex-col",
+		role: "status",
+		"aria-label": "Loading",
+		"data-opt-id": "EJT87",
+		"data-opt-slug": "skeleton.Skeleton",
+		children: [Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx("div", _objectSpread2({
+			className: cn(baseClass, i === lines - 1 && "w-4/5"),
+			style: i === lines - 1 ? void 0 : computedStyle
+		}, props), i)), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Loading..."
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2({
+		className: baseClass,
+		style: computedStyle,
+		role: "status",
+		"aria-label": "Loading"
+	}, props), {}, {
+		"data-opt-id": "EJT87",
+		"data-opt-slug": "skeleton.Skeleton",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Loading..."
+		})
+	}));
+}
+/** Renders the skeleton text component. */
+function SkeletonText(_ref2) {
+	let { lines = 3, className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$5);
+	return /* @__PURE__ */ jsx(Skeleton, _objectSpread2(_objectSpread2({
+		variant: "text",
+		lines,
+		className
+	}, props), {}, {
+		"data-opt-id": "MX3D5",
+		"data-opt-slug": "skeleton.SkeletonText"
+	}));
+}
+/** Renders the skeleton avatar component. */
+function SkeletonAvatar(_ref3) {
+	let { size = 40, className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$2);
+	return /* @__PURE__ */ jsx(Skeleton, _objectSpread2(_objectSpread2({
+		variant: "circular",
+		width: size,
+		height: size,
+		className
+	}, props), {}, {
+		"data-opt-id": "MP0HZ",
+		"data-opt-slug": "skeleton.SkeletonAvatar"
+	}));
+}
+/** Renders the skeleton card component. */
+function SkeletonCard(_ref4) {
+	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$1);
+	return /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({ className: cn("gap-group flex flex-col", className) }, props), {}, {
+		"data-opt-id": "34V5D",
+		"data-opt-slug": "skeleton.SkeletonCard",
+		children: [
+			/* @__PURE__ */ jsx(Skeleton, {
+				variant: "rectangular",
+				height: 120
+			}),
+			/* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				width: "60%"
+			}),
+			/* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				lines: 2
+			})
+		]
+	}));
+}
+/** Renders the skeleton table component. */
+function SkeletonTable({ rows = 5, columns = 4, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("gap-element flex flex-col", className),
+		role: "status",
+		"aria-label": "Loading table",
+		"data-opt-id": "3KEDN",
+		"data-opt-slug": "skeleton.SkeletonTable",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "border-border-subtle gap-group flex border-b pb-2",
+				children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, {
+					variant: "text",
+					className: "flex-1",
+					height: 16
+				}, i))
+			}),
+			Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsx("div", {
+				className: "gap-group flex py-2",
+				children: Array.from({ length: columns }).map((_, colIndex) => /* @__PURE__ */ jsx(Skeleton, {
+					variant: "text",
+					className: "flex-1",
+					height: 14
+				}, colIndex))
+			}, rowIndex)),
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Loading..."
+			})
+		]
+	});
+}
+//#endregion
+//#region src/core/textarea.tsx
+const _excluded$10 = [
+	"label",
+	"error",
+	"hint",
+	"fullWidth",
+	"required",
+	"resize",
+	"size",
+	"className",
+	"id",
+	"rows"
+];
+const textareaSizeStyles = OPT_TEXTAREA_SIZE;
+const resizeStyles = {
+	none: "resize-none",
+	vertical: "resize-y",
+	horizontal: "resize-x",
+	both: "resize"
+};
+const Textarea = forwardRef((_ref, ref) => {
+	var _useInputId;
+	let { label, error, hint, fullWidth = false, required, resize = "vertical", size = "md", className, id, rows = 4 } = _ref, props = _objectWithoutProperties(_ref, _excluded$10);
+	const fallbackId = useId().replace(/:/g, "");
+	const textareaId = (_useInputId = useInputId(id, label, "textarea")) !== null && _useInputId !== void 0 ? _useInputId : `textarea-${fallbackId}`;
+	const hasError = Boolean(error);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1.5", fullWidth && "w-full"),
+		"data-opt-id": "6T58H",
+		"data-opt-slug": "textarea.Textarea",
+		children: [
+			label && /* @__PURE__ */ jsxs("label", {
+				htmlFor: textareaId,
+				className: "text-text-primary text-sm font-medium",
+				children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+			}),
+			/* @__PURE__ */ jsx("textarea", _objectSpread2({
+				ref,
+				id: textareaId,
+				rows,
+				className: cn("border-border bg-surface text-text-primary placeholder:text-text-tertiary w-full rounded-lg border px-4 py-3 text-sm outline-transparent", OPT_FOCUS_VISIBLE, textareaSizeStyles[size], resizeStyles[resize], hasError && "border-danger focus-visible:outline-danger", !fullWidth && "w-auto", className),
+				"aria-invalid": hasError,
+				"aria-describedby": getDescribedBy(textareaId, error, hint)
+			}, props)),
+			/* @__PURE__ */ jsx(FieldMessages, {
+				id: textareaId,
+				error,
+				hint
+			})
+		]
+	});
+});
+Textarea.displayName = "Textarea";
+//#endregion
+//#region src/core/avatar.tsx
+const _excluded$9 = [
+	"src",
+	"srcSet",
+	"sizes",
+	"crossOrigin",
+	"referrerPolicy",
+	"alt",
+	"name",
+	"size",
+	"fallback",
+	"status",
+	"className",
+	"onLoadingStatusChange"
+];
+const _excluded2$4 = [
+	"max",
+	"size",
+	"children",
+	"className"
+];
+const useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+/**
+* Tracks an image's loading status by preloading it off-DOM, so the avatar can
+* show its fallback until the image is actually decoded (no broken-image flash)
+* and recover from late `error`/`load` events. Supports responsive `srcSet`/`sizes`.
+*/
+function useImageLoadingStatus(src, { srcSet, sizes, crossOrigin, referrerPolicy }) {
+	const [status, setStatus] = useState("idle");
+	useIsoLayoutEffect(() => {
+		if (!src && !srcSet) {
+			setStatus("error");
+			return;
+		}
+		let isMounted = true;
+		const image = new window.Image();
+		const update = (next) => () => {
+			if (isMounted) setStatus(next);
+		};
+		setStatus("loading");
+		image.onload = update("loaded");
+		image.onerror = update("error");
+		if (referrerPolicy) image.referrerPolicy = referrerPolicy;
+		image.crossOrigin = crossOrigin !== null && crossOrigin !== void 0 ? crossOrigin : null;
+		if (sizes) image.sizes = sizes;
+		if (srcSet) image.srcset = srcSet;
+		if (src) image.src = src;
+		if (image.complete) setStatus(image.naturalWidth > 0 ? "loaded" : "error");
+		return () => {
+			isMounted = false;
+		};
+	}, [
+		src,
+		srcSet,
+		sizes,
+		crossOrigin,
+		referrerPolicy
+	]);
+	return status;
+}
+const sizeStyles$3 = {
+	xs: "h-6 w-6 text-[10px]",
+	sm: "h-8 w-8 text-xs",
+	md: "h-10 w-10 text-sm",
+	lg: "h-12 w-12 text-base",
+	xl: "h-16 w-16 text-lg"
+};
+const statusStyles = {
+	online: "bg-success",
+	offline: "bg-bg-muted",
+	busy: "bg-danger",
+	away: "bg-warning"
+};
+const statusSizeStyles = {
+	xs: "h-1.5 w-1.5 border",
+	sm: "h-2 w-2 border",
+	md: "h-2.5 w-2.5 border-2",
+	lg: "h-3 w-3 border-2",
+	xl: "h-4 w-4 border-2"
+};
+function getInitials(name) {
+	const parts = name.trim().split(/\s+/);
+	if (parts.length === 1) return parts[0].charAt(0).toUpperCase();
+	return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+}
+const bgColors = [
+	"bg-blue-500",
+	"bg-emerald-500",
+	"bg-amber-500",
+	"bg-rose-500",
+	"bg-purple-500",
+	"bg-cyan-500",
+	"bg-orange-500",
+	"bg-indigo-500"
+];
+function getColorFromName(name) {
+	let hash = 0;
+	for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
+	return bgColors[Math.abs(hash) % bgColors.length];
+}
+/** Renders the avatar component. */
+function Avatar(_ref) {
+	var _ref2, _ref3;
+	let { src, srcSet, sizes, crossOrigin, referrerPolicy, alt, name, size = "md", fallback, status, className, onLoadingStatusChange } = _ref, props = _objectWithoutProperties(_ref, _excluded$9);
+	const loadingStatus = useImageLoadingStatus(src, {
+		srcSet,
+		sizes,
+		crossOrigin,
+		referrerPolicy
+	});
+	useEffect(() => {
+		onLoadingStatusChange === null || onLoadingStatusChange === void 0 || onLoadingStatusChange(loadingStatus);
+	}, [loadingStatus, onLoadingStatusChange]);
+	const showImage = (Boolean(src) || Boolean(srcSet)) && loadingStatus === "loaded";
+	const initials = name ? getInitials(name) : null;
+	const bgColor = name ? getColorFromName(name) : "bg-bg-subtle";
+	const avatarLabel = status ? `${(_ref2 = name !== null && name !== void 0 ? name : alt) !== null && _ref2 !== void 0 ? _ref2 : "Avatar"} (${status})` : (_ref3 = name !== null && name !== void 0 ? name : alt) !== null && _ref3 !== void 0 ? _ref3 : "Avatar";
+	let avatarContent;
+	if (showImage) {
+		var _ref4;
+		avatarContent = /* @__PURE__ */ jsx("img", {
+			src,
+			srcSet,
+			sizes,
+			crossOrigin,
+			referrerPolicy,
+			alt: (_ref4 = alt !== null && alt !== void 0 ? alt : name) !== null && _ref4 !== void 0 ? _ref4 : "Avatar",
+			className: "h-full w-full object-cover"
+		});
+	} else if (fallback) avatarContent = fallback;
+	else if (initials) avatarContent = /* @__PURE__ */ jsx("span", {
+		className: "font-medium text-white",
+		children: initials
+	});
+	else avatarContent = /* @__PURE__ */ jsx("svg", {
+		className: "text-text-tertiary h-3/5 w-3/5",
+		fill: "currentColor",
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
+	});
+	return /* @__PURE__ */ jsxs("span", _objectSpread2(_objectSpread2({
+		role: "img",
+		"aria-label": avatarLabel,
+		className: cn("relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full", sizeStyles$3[size], !showImage && bgColor, className)
+	}, props), {}, {
+		"data-opt-id": "SCMM0",
+		"data-opt-slug": "avatar.Avatar",
+		children: [avatarContent, status && /* @__PURE__ */ jsx("span", {
+			className: cn("border-surface absolute right-0 bottom-0 rounded-full", statusStyles[status], statusSizeStyles[size]),
+			"aria-hidden": "true"
+		})]
+	}));
+}
+/** Renders the avatar group component. */
+function AvatarGroup(_ref5) {
+	let { max = 4, size = "md", children, className } = _ref5, props = _objectWithoutProperties(_ref5, _excluded2$4);
+	const avatars = Array.isArray(children) ? children : [children];
+	const visibleAvatars = avatars.slice(0, max);
+	const remainingCount = avatars.length - max;
+	return /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({ className: cn("flex", className) }, props), {}, {
+		"data-opt-id": "MVB53",
+		"data-opt-slug": "avatar.AvatarGroup",
+		children: [visibleAvatars.map((child, index) => /* @__PURE__ */ jsx("span", {
+			className: "ring-surface relative -ml-2 inline-block rounded-full ring-2 first:ml-0",
+			children: child
+		}, index)), remainingCount > 0 && /* @__PURE__ */ jsxs("span", {
+			className: cn("bg-bg-subtle text-text-secondary ring-surface relative inline-flex items-center justify-center rounded-full font-medium ring-2", sizeStyles$3[size]),
+			children: ["+", remainingCount]
+		})]
+	}));
+}
+//#endregion
+//#region src/core/progress.tsx
+const _excluded$8 = [
+	"value",
+	"max",
+	"size",
+	"variant",
+	"showLabel",
+	"label",
+	"animated",
+	"indeterminate",
+	"className"
+];
+const _excluded2$3 = [
+	"value",
+	"max",
+	"size",
+	"strokeWidth",
+	"variant",
+	"showLabel",
+	"label",
+	"indeterminate",
+	"className"
+];
+const sizeStyles$2 = {
+	sm: "h-1",
+	md: "h-2",
+	lg: "h-3"
+};
+const variantStyles$1 = {
+	default: "bg-accent",
+	success: "bg-success",
+	warning: "bg-warning",
+	error: "bg-danger"
+};
+function getProgressValue(value, max) {
+	const safeMax = Number.isFinite(max) ? Math.max(0, max) : 100;
+	const clampedValue = safeMax > 0 ? Math.min(Math.max(Number.isFinite(value) ? value : 0, 0), safeMax) : 0;
+	const percentage = safeMax > 0 ? clampedValue / safeMax * 100 : 0;
+	return {
+		clampedValue,
+		max: safeMax,
+		percentage,
+		valueText: `${Math.round(percentage)}%`
+	};
+}
+/** Renders the progress component. */
+function Progress(_ref) {
+	let { value, max = 100, size = "md", variant = "default", showLabel = false, label, animated = true, indeterminate = false, className } = _ref, props = _objectWithoutProperties(_ref, _excluded$8);
+	const progress = indeterminate || value === void 0 ? null : getProgressValue(value, max);
+	const shouldRenderHeader = Boolean(label) || showLabel && progress;
+	return /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({ className: cn("w-full", className) }, props), {}, {
+		"data-opt-id": "Y5N8R",
+		"data-opt-slug": "progress.Progress",
+		children: [shouldRenderHeader && /* @__PURE__ */ jsxs("div", {
+			className: "mb-1.5 flex items-center justify-between text-sm",
+			children: [label && /* @__PURE__ */ jsx("span", {
+				className: "text-text-primary font-medium",
+				children: label
+			}), showLabel && progress && /* @__PURE__ */ jsx("span", {
+				className: "text-text-tertiary",
+				children: progress.valueText
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: cn("bg-bg-subtle w-full overflow-hidden rounded-full", sizeStyles$2[size]),
+			role: "progressbar",
+			"aria-valuenow": progress === null || progress === void 0 ? void 0 : progress.clampedValue,
+			"aria-valuemin": progress ? 0 : void 0,
+			"aria-valuemax": progress === null || progress === void 0 ? void 0 : progress.max,
+			"aria-valuetext": progress === null || progress === void 0 ? void 0 : progress.valueText,
+			"aria-label": label !== null && label !== void 0 ? label : progress ? `${progress.valueText} complete` : "Loading",
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("h-full rounded-full", variantStyles$1[variant], !progress && "w-1/3 animate-pulse", animated && (progress ? "transition-all duration-300 ease-out" : "transition-opacity duration-700 ease-in-out")),
+				style: progress ? { width: `${progress.percentage}%` } : void 0
+			})
+		})]
+	}));
+}
+const circularVariantStyles = {
+	default: "text-accent",
+	success: "text-success",
+	warning: "text-warning",
+	error: "text-danger"
+};
+/** Renders the circular progress component. */
+function CircularProgress(_ref2) {
+	var _progress$percentage;
+	let { value, max = 100, size = 48, strokeWidth = 4, variant = "default", showLabel = false, label, indeterminate = false, className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$3);
+	const labelId = useId();
+	const isIndeterminate = indeterminate || value === void 0;
+	const progress = isIndeterminate ? null : getProgressValue(value, max);
+	const accessibleName = label !== null && label !== void 0 ? label : progress ? `${progress.valueText} complete` : "Loading";
+	const radius = (size - strokeWidth) / 2;
+	const circumference = radius * 2 * Math.PI;
+	const strokeDashoffset = circumference - ((_progress$percentage = progress === null || progress === void 0 ? void 0 : progress.percentage) !== null && _progress$percentage !== void 0 ? _progress$percentage : 0) / 100 * circumference;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative inline-flex items-center justify-center",
+		"data-opt-id": "Q69KP",
+		"data-opt-slug": "progress.CircularProgress",
+		children: [
+			label && /* @__PURE__ */ jsx("span", {
+				id: labelId,
+				className: "sr-only",
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("svg", _objectSpread2(_objectSpread2({
+				width: size,
+				height: size,
+				className: cn(isIndeterminate ? "animate-spin" : "-rotate-90", className),
+				role: isIndeterminate ? "progressbar" : "meter",
+				"aria-labelledby": label ? labelId : void 0,
+				"aria-valuenow": progress === null || progress === void 0 ? void 0 : progress.clampedValue,
+				"aria-valuemin": progress ? 0 : void 0,
+				"aria-valuemax": progress === null || progress === void 0 ? void 0 : progress.max,
+				"aria-valuetext": progress === null || progress === void 0 ? void 0 : progress.valueText,
+				"aria-label": label ? void 0 : accessibleName
+			}, props), {}, { children: [/* @__PURE__ */ jsx("circle", {
+				cx: size / 2,
+				cy: size / 2,
+				r: radius,
+				fill: "none",
+				strokeWidth,
+				className: "stroke-border-subtle"
+			}), /* @__PURE__ */ jsx("circle", {
+				cx: size / 2,
+				cy: size / 2,
+				r: radius,
+				fill: "none",
+				strokeWidth,
+				strokeLinecap: "round",
+				className: cn("transition-all duration-300 ease-out", circularVariantStyles[variant]),
+				style: {
+					strokeDasharray: isIndeterminate ? `${circumference * .28} ${circumference}` : circumference,
+					strokeDashoffset: isIndeterminate ? 0 : strokeDashoffset,
+					stroke: "currentColor"
+				}
+			})] })),
+			showLabel && progress && /* @__PURE__ */ jsx("span", {
+				className: "text-text-primary absolute text-xs font-medium",
+				children: progress.valueText
+			})
+		]
+	});
+}
+//#endregion
+//#region src/core/meter.tsx
+const _excluded$7 = [
+	"value",
+	"min",
+	"max",
+	"size",
+	"variant",
+	"showValue",
+	"label",
+	"getValueLabel",
+	"className"
+];
+const sizeStyles$1 = {
+	sm: "h-1",
+	md: "h-2",
+	lg: "h-3"
+};
+const variantStyles = {
+	default: "bg-accent",
+	success: "bg-success",
+	warning: "bg-warning",
+	error: "bg-danger"
+};
+/**
+* A scalar measurement within a known range (disk usage, score, capacity) —
+* `role="meter"`, distinct from Progress (task completion). Built on the
+* opt-ui-primitives Meter primitive, which owns the role/aria/valuetext.
+*/
+function Meter$1(_ref) {
+	let { value, min = 0, max = 100, size = "md", variant = "default", showValue = false, label, getValueLabel, className } = _ref, props = _objectWithoutProperties(_ref, _excluded$7);
+	const clamped = Math.min(Math.max(value, min), max);
+	const percentage = max === min ? 0 : (clamped - min) / (max - min) * 100;
+	return /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({ className: cn("w-full", className) }, props), {}, {
+		"data-opt-id": "G01TE",
+		"data-opt-slug": "meter.Meter",
+		children: [(showValue || label) && /* @__PURE__ */ jsxs("div", {
+			className: "mb-1.5 flex items-center justify-between text-sm",
+			children: [label && /* @__PURE__ */ jsx("span", {
+				className: "text-text-primary font-medium",
+				children: label
+			}), showValue && /* @__PURE__ */ jsxs("span", {
+				className: "text-text-tertiary",
+				children: [Math.round(percentage), "%"]
+			})]
+		}), /* @__PURE__ */ jsx(Meter, {
+			value: clamped,
+			min,
+			max,
+			getValueLabel,
+			"aria-label": label !== null && label !== void 0 ? label : `${Math.round(percentage)}%`,
+			className: cn("bg-bg-subtle w-full overflow-hidden rounded-full", sizeStyles$1[size]),
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("h-full rounded-full transition-all duration-300 ease-out", variantStyles[variant]),
+				style: { width: `${percentage}%` }
+			})
+		})]
+	}));
+}
+//#endregion
+//#region src/core/step-builder.tsx
+/** Renders the step builder component. */
+function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps, className, "aria-label": ariaLabel }) {
+	var _ref;
+	const [editingId, setEditingId] = useState(null);
+	const nextStepIdRef = useRef(1);
+	const createStepId = useCallback(() => {
+		const existingIds = new Set(steps.map((step) => step.id));
+		let id = "";
+		do
+			id = `step-${nextStepIdRef.current++}`;
+		while (existingIds.has(id));
+		return id;
+	}, [steps]);
+	const addStep = useCallback(() => {
+		if (maxSteps && steps.length >= maxSteps) return;
+		const newStep = {
+			id: createStepId(),
+			label: `Step ${steps.length + 1}`
+		};
+		onChange([...steps, newStep]);
+		setEditingId(newStep.id);
+	}, [
+		steps,
+		onChange,
+		maxSteps,
+		createStepId
+	]);
+	const removeStep = useCallback((id) => {
+		onChange(steps.filter((s) => s.id !== id));
+		if (editingId === id) setEditingId(null);
+	}, [
+		steps,
+		onChange,
+		editingId
+	]);
+	const updateStep = useCallback((id, updates) => {
+		onChange(steps.map((s) => s.id === id ? _objectSpread2(_objectSpread2({}, s), updates) : s));
+	}, [steps, onChange]);
+	const moveStep = useCallback((index, direction) => {
+		const target = index + direction;
+		if (target < 0 || target >= steps.length) return;
+		const newSteps = [...steps];
+		[newSteps[index], newSteps[target]] = [newSteps[target], newSteps[index]];
+		onChange(newSteps);
+	}, [steps, onChange]);
+	const atLimit = Boolean(maxSteps && steps.length >= maxSteps);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-3", className),
+		role: "list",
+		"aria-label": (_ref = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label) !== null && _ref !== void 0 ? _ref : "Step builder",
+		"data-opt-id": "7BQDT",
+		"data-opt-slug": "step-builder.StepBuilder",
+		children: [
+			label && /* @__PURE__ */ jsx("span", {
+				className: "text-sm font-medium text-text-primary",
+				children: label
+			}),
+			steps.map((step, index) => {
+				var _step$description;
+				return /* @__PURE__ */ jsxs("div", {
+					className: cn(OPT_SURFACE, OPT_BORDER, "flex items-start gap-3 p-3"),
+					role: "listitem",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "bg-accent text-accent-fg flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full text-xs font-bold",
+							"aria-hidden": "true",
+							children: index + 1
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "min-w-0 flex-1",
+							children: editingId === step.id ? /* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col gap-2",
+								children: [
+									/* @__PURE__ */ jsx("input", {
+										type: "text",
+										value: step.label,
+										onChange: (e) => updateStep(step.id, { label: e.target.value }),
+										onKeyDown: (e) => {
+											if (e.key === "Enter") setEditingId(null);
+										},
+										className: cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset w-full rounded-md border px-2 py-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", OPT_TEXT_PRIMARY, OPT_FOCUS_VISIBLE),
+										"aria-label": "Step label",
+										autoFocus: true
+									}),
+									/* @__PURE__ */ jsx("input", {
+										type: "text",
+										value: (_step$description = step.description) !== null && _step$description !== void 0 ? _step$description : "",
+										onChange: (e) => updateStep(step.id, { description: e.target.value }),
+										placeholder: "Description (optional)",
+										className: cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset w-full rounded-md border px-2 py-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", OPT_TEXT_PRIMARY, "placeholder:text-text-tertiary", OPT_FOCUS_VISIBLE),
+										"aria-label": "Step description"
+									}),
+									/* @__PURE__ */ jsx(Button, {
+										variant: "ghost",
+										size: "sm",
+										onClick: () => setEditingId(null),
+										children: "Done"
+									})
+								]
+							}) : /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								className: "w-full text-left",
+								onClick: () => setEditingId(step.id),
+								"aria-label": `Edit ${step.label}`,
+								children: [/* @__PURE__ */ jsx("span", {
+									className: cn(OPT_TEXT_PRIMARY, "text-sm font-medium"),
+									children: step.label
+								}), step.description && /* @__PURE__ */ jsx("span", {
+									className: cn("text-text-secondary", "mt-0.5 block text-xs"),
+									children: step.description
+								})]
+							})
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-shrink-0 items-center gap-1",
+							children: [
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: () => moveStep(index, -1),
+									disabled: index === 0,
+									className: cn("rounded p-1 text-sm", OPT_TEXT_TERTIARY, "hover:bg-bg-subtle", "disabled:opacity-30", OPT_FOCUS_VISIBLE),
+									"aria-label": "Move up",
+									children: "▲"
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: () => moveStep(index, 1),
+									disabled: index === steps.length - 1,
+									className: cn("rounded p-1 text-sm", OPT_TEXT_TERTIARY, "hover:bg-bg-subtle", "disabled:opacity-30", OPT_FOCUS_VISIBLE),
+									"aria-label": "Move down",
+									children: "▼"
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: () => removeStep(step.id),
+									className: cn("text-danger-fg hover:bg-danger-subtle rounded p-1 text-sm", OPT_FOCUS_VISIBLE),
+									"aria-label": `Remove ${step.label}`,
+									children: "✕"
+								})
+							]
+						})
+					]
+				}, step.id);
+			}),
+			/* @__PURE__ */ jsxs(Button, {
+				variant: "secondary",
+				size: "sm",
+				onClick: addStep,
+				disabled: atLimit,
+				className: "self-start",
+				children: ["+ ", addLabel]
+			})
+		]
+	});
+}
+StepBuilder.displayName = "StepBuilder";
+//#endregion
+//#region src/lib/formatters.ts
+const OPT_UI_DEFAULT_LOCALE = "ko-KR";
+const KST_OFFSET_MS = 324e5;
+function getKstDateParts(input) {
+	const date = input instanceof Date ? input : new Date(input);
+	if (Number.isNaN(date.getTime())) return null;
+	const kstDate = new Date(date.getTime() + KST_OFFSET_MS);
+	return {
+		year: kstDate.getUTCFullYear(),
+		month: kstDate.getUTCMonth() + 1,
+		day: kstDate.getUTCDate(),
+		hour: kstDate.getUTCHours(),
+		minute: kstDate.getUTCMinutes(),
+		second: kstDate.getUTCSeconds()
+	};
+}
+function pad2(value) {
+	return String(value).padStart(2, "0");
+}
+function meridiem(hour) {
+	return hour < 12 ? "오전" : "오후";
+}
+function hour12(hour) {
+	const normalized = hour % 12;
+	return normalized === 0 ? 12 : normalized;
+}
+/** Formats a date as Korean short date text in the opt-ui default timezone. */
+function formatOptShortDate(input) {
+	const parts = getKstDateParts(input);
+	if (!parts) return "-";
+	return `${parts.month}월 ${parts.day}일`;
+}
+/** Formats a date as Korean clock time in the opt-ui default timezone. */
+function formatOptTime(input) {
+	const parts = getKstDateParts(input);
+	if (!parts) return "-";
+	return `${meridiem(parts.hour)} ${pad2(hour12(parts.hour))}:${pad2(parts.minute)}`;
+}
+/** Formats a date as Korean date-time text in the opt-ui default timezone. */
+function formatOptDateTime(input) {
+	const parts = getKstDateParts(input);
+	if (!parts) return "-";
+	return `${parts.year}. ${parts.month}. ${parts.day}. ${meridiem(parts.hour)} ${hour12(parts.hour)}:${pad2(parts.minute)}:${pad2(parts.second)}`;
+}
+/** Formats numbers without depending on the runtime default locale. */
+function formatOptNumber(value) {
+	return new Intl.NumberFormat(OPT_UI_DEFAULT_LOCALE).format(value);
+}
+//#endregion
+//#region src/core/condition-builder.tsx
+const OPERATOR_LABELS = {
+	equals: "equals",
+	not_equals: "does not equal",
+	contains: "contains",
+	not_contains: "does not contain",
+	gt: ">",
+	lt: "<",
+	gte: ">=",
+	lte: "<=",
+	is_set: "is set",
+	is_not_set: "is not set"
+};
+const OPERATORS = /* @__PURE__ */ new Set([
+	"equals",
+	"not_equals",
+	"contains",
+	"not_contains",
+	"gt",
+	"lt",
+	"gte",
+	"lte",
+	"is_set",
+	"is_not_set"
+]);
+function isConditionOperator(v) {
+	return OPERATORS.has(v);
+}
+const NO_VALUE_OPS = ["is_set", "is_not_set"];
+const DEFAULT_PROPERTIES = [
+	"event_name",
+	"user_id",
+	"email",
+	"country",
+	"browser",
+	"os",
+	"device",
+	"page_url",
+	"referrer",
+	"amount"
+];
+const ConditionBuilderIdScopeContext = React.createContext(null);
+function collectConditionBuilderIds(groups) {
+	const groupIds = /* @__PURE__ */ new Set();
+	const conditionIds = /* @__PURE__ */ new Set();
+	const visit = (items) => {
+		for (const group of items) {
+			groupIds.add(group.id);
+			for (const condition of group.conditions) conditionIds.add(condition.id);
+			if (group.children) visit(group.children);
+		}
+	};
+	visit(groups);
+	return {
+		groupIds,
+		conditionIds
+	};
+}
+/** Renders the condition builder component. */
+function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, label, addConditionLabel = "Add condition", addGroupLabel = "Add group", addNestedGroupLabel = "Add nested group", nested = false, maxDepth = 3, conditionTypes, onPreview, previewCount, className, "aria-label": ariaLabel }) {
+	var _ref;
+	const inheritedIdScope = React.useContext(ConditionBuilderIdScopeContext);
+	const nextGroupIdRef = React.useRef(1);
+	const nextConditionIdRef = React.useRef(1);
+	const getLocalReservedIds = useCallback(() => collectConditionBuilderIds(groups), [groups]);
+	const localIdScope = React.useMemo(() => ({
+		nextGroupIdRef,
+		nextConditionIdRef,
+		getReservedIds: getLocalReservedIds
+	}), [getLocalReservedIds]);
+	const idScope = inheritedIdScope !== null && inheritedIdScope !== void 0 ? inheritedIdScope : localIdScope;
+	const createGroupId = useCallback((suffix = "") => {
+		const { groupIds } = idScope.getReservedIds();
+		let id = "";
+		do
+			id = `group-${idScope.nextGroupIdRef.current++}${suffix}`;
+		while (groupIds.has(id));
+		return id;
+	}, [idScope]);
+	const createConditionId = useCallback((suffix = "") => {
+		const { conditionIds } = idScope.getReservedIds();
+		let id = "";
+		do
+			id = `cond-${idScope.nextConditionIdRef.current++}${suffix}`;
+		while (conditionIds.has(id));
+		return id;
+	}, [idScope]);
+	useEffect(() => {
+		onPreview === null || onPreview === void 0 || onPreview(groups);
+	}, [groups, onPreview]);
+	const addGroup = useCallback(() => {
+		var _properties$;
+		const newGroup = {
+			id: createGroupId(),
+			logic: "and",
+			conditions: [{
+				id: createConditionId(),
+				property: (_properties$ = properties[0]) !== null && _properties$ !== void 0 ? _properties$ : "",
+				operator: "equals",
+				value: ""
+			}]
+		};
+		onChange([...groups, newGroup]);
+	}, [
+		groups,
+		onChange,
+		properties,
+		createGroupId,
+		createConditionId
+	]);
+	const removeGroup = useCallback((groupId) => {
+		onChange(groups.filter((g) => g.id !== groupId));
+	}, [groups, onChange]);
+	const updateGroupLogic = useCallback((groupId, logic) => {
+		onChange(groups.map((g) => g.id === groupId ? _objectSpread2(_objectSpread2({}, g), {}, { logic }) : g));
+	}, [groups, onChange]);
+	const addCondition = useCallback((groupId) => {
+		onChange(groups.map((g) => {
+			var _properties$2;
+			return g.id === groupId ? _objectSpread2(_objectSpread2({}, g), {}, { conditions: [...g.conditions, {
+				id: createConditionId(),
+				property: (_properties$2 = properties[0]) !== null && _properties$2 !== void 0 ? _properties$2 : "",
+				operator: "equals",
+				value: ""
+			}] }) : g;
+		}));
+	}, [
+		groups,
+		onChange,
+		properties,
+		createConditionId
+	]);
+	const removeCondition = useCallback((groupId, condId) => {
+		onChange(groups.map((g) => g.id === groupId ? _objectSpread2(_objectSpread2({}, g), {}, { conditions: g.conditions.filter((c) => c.id !== condId) }) : g));
+	}, [groups, onChange]);
+	const updateCondition = useCallback((groupId, condId, updates) => {
+		onChange(groups.map((g) => g.id === groupId ? _objectSpread2(_objectSpread2({}, g), {}, { conditions: g.conditions.map((c) => c.id === condId ? _objectSpread2(_objectSpread2({}, c), updates) : c) }) : g));
+	}, [groups, onChange]);
+	return /* @__PURE__ */ jsx(ConditionBuilderIdScopeContext.Provider, {
+		value: idScope,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("flex flex-col gap-3", className),
+			"aria-label": (_ref = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label) !== null && _ref !== void 0 ? _ref : "Condition builder",
+			"data-opt-id": "SXXKJ",
+			"data-opt-slug": "condition-builder.ConditionBuilder",
+			children: [
+				label && /* @__PURE__ */ jsx("span", {
+					className: "text-sm font-medium text-text-primary",
+					children: label
+				}),
+				groups.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { children: [groupIndex > 0 && /* @__PURE__ */ jsxs("div", {
+					className: "my-2 flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx("div", { className: "bg-border-subtle h-px flex-1" }),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-warning-fg text-xs font-semibold uppercase",
+							children: "OR"
+						}),
+						/* @__PURE__ */ jsx("div", { className: "bg-border-subtle h-px flex-1" })
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: cn(OPT_SURFACE, OPT_BORDER, "p-3"),
+					role: "group",
+					"aria-label": `Condition group ${groupIndex + 1}`,
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "mb-2 flex items-center justify-between",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: cn(OPT_TEXT_SECONDARY, "text-xs font-medium"),
+										children: "Match"
+									}),
+									/* @__PURE__ */ jsxs("select", {
+										value: group.logic,
+										onChange: (e) => {
+											const v = e.target.value;
+											if (v === "and" || v === "or") updateGroupLogic(group.id, v);
+										},
+										className: cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset rounded border px-2 py-0.5 text-xs font-semibold outline-none focus-visible:ring-2 focus-visible:ring-offset-1", OPT_TEXT_PRIMARY, OPT_FOCUS_VISIBLE),
+										"aria-label": "Group logic",
+										children: [/* @__PURE__ */ jsx("option", {
+											value: "and",
+											children: "ALL"
+										}), /* @__PURE__ */ jsx("option", {
+											value: "or",
+											children: "ANY"
+										})]
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: cn(OPT_TEXT_SECONDARY, "text-xs"),
+										children: "of the following"
+									})
+								]
+							}), groups.length > 1 && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => removeGroup(group.id),
+								className: cn("text-danger-fg hover:bg-danger-subtle rounded p-1 text-xs", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
+								"aria-label": "Remove group",
+								children: "✕"
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "flex flex-col gap-2",
+							children: group.conditions.map((cond, condIndex) => {
+								const customRenderer = cond.type != null ? conditionTypes === null || conditionTypes === void 0 ? void 0 : conditionTypes[cond.type] : void 0;
+								return /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-2",
+									children: [
+										condIndex > 0 && /* @__PURE__ */ jsx("span", {
+											className: cn("w-8 text-center text-[10px] font-semibold uppercase", group.logic === "and" ? "text-info-fg" : "text-warning-fg"),
+											children: group.logic
+										}),
+										condIndex === 0 && /* @__PURE__ */ jsx("span", { className: "w-8" }),
+										customRenderer ? /* @__PURE__ */ jsx("div", {
+											className: "min-w-[100px] flex-1",
+											role: "group",
+											"aria-label": customRenderer.label,
+											children: customRenderer.render(cond, (updates) => updateCondition(group.id, cond.id, updates))
+										}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+											/* @__PURE__ */ jsx("select", {
+												value: cond.property,
+												onChange: (e) => updateCondition(group.id, cond.id, { property: e.target.value }),
+												className: cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset min-w-[120px] rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", OPT_TEXT_PRIMARY, OPT_FOCUS_VISIBLE),
+												"aria-label": "Property",
+												children: properties.map((p) => /* @__PURE__ */ jsx("option", {
+													value: p,
+													children: p
+												}, p))
+											}),
+											/* @__PURE__ */ jsx("select", {
+												value: cond.operator,
+												onChange: (e) => {
+													const v = e.target.value;
+													if (isConditionOperator(v)) updateCondition(group.id, cond.id, { operator: v });
+												},
+												className: cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset min-w-[130px] rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", OPT_TEXT_PRIMARY, OPT_FOCUS_VISIBLE),
+												"aria-label": "Operator",
+												children: Object.entries(OPERATOR_LABELS).map(([key, lbl]) => /* @__PURE__ */ jsx("option", {
+													value: key,
+													children: lbl
+												}, key))
+											}),
+											!NO_VALUE_OPS.includes(cond.operator) && /* @__PURE__ */ jsx("input", {
+												type: "text",
+												value: cond.value,
+												onChange: (e) => updateCondition(group.id, cond.id, { value: e.target.value }),
+												placeholder: "Value",
+												className: cn("border-border bg-surface focus-visible:ring-ring focus-visible:ring-offset-ring-offset min-w-[100px] flex-1 rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-1", "text-text-primary", "placeholder:text-text-tertiary", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
+												"aria-label": "Value"
+											})
+										] }),
+										group.conditions.length > 1 && /* @__PURE__ */ jsx("button", {
+											type: "button",
+											onClick: () => removeCondition(group.id, cond.id),
+											className: cn("text-danger-fg hover:bg-danger-subtle rounded p-1 text-sm", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset"),
+											"aria-label": "Remove condition",
+											children: "✕"
+										})
+									]
+								}, cond.id);
+							})
+						}),
+						nested && group.children && group.children.length > 0 && /* @__PURE__ */ jsx("div", {
+							className: "border-accent/30 mt-2 ml-4 border-l-2 pl-3",
+							children: /* @__PURE__ */ jsx(ConditionBuilder, {
+								groups: group.children,
+								onChange: (newChildren) => {
+									onChange(groups.map((g) => g.id === group.id ? _objectSpread2(_objectSpread2({}, g), {}, { children: newChildren }) : g));
+								},
+								properties,
+								addConditionLabel,
+								addGroupLabel,
+								addNestedGroupLabel,
+								nested,
+								maxDepth: maxDepth - 1,
+								conditionTypes
+							})
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "mt-2 flex items-center gap-2",
+							children: [/* @__PURE__ */ jsxs(Button, {
+								variant: "ghost",
+								size: "sm",
+								onClick: () => addCondition(group.id),
+								children: ["+ ", addConditionLabel]
+							}), nested && maxDepth > 1 && /* @__PURE__ */ jsxs(Button, {
+								variant: "ghost",
+								size: "sm",
+								onClick: () => {
+									var _properties$3;
+									const nestedGroup = {
+										id: createGroupId("-nested"),
+										logic: group.logic === "and" ? "or" : "and",
+										conditions: [{
+											id: createConditionId("-nested"),
+											property: (_properties$3 = properties[0]) !== null && _properties$3 !== void 0 ? _properties$3 : "",
+											operator: "equals",
+											value: ""
+										}]
+									};
+									onChange(groups.map((g) => {
+										var _g$children;
+										return g.id === group.id ? _objectSpread2(_objectSpread2({}, g), {}, { children: [...(_g$children = g.children) !== null && _g$children !== void 0 ? _g$children : [], nestedGroup] }) : g;
+									}));
+								},
+								children: ["+ ", addNestedGroupLabel]
+							})]
+						})
+					]
+				})] }, group.id)),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ jsxs(Button, {
+						variant: "secondary",
+						size: "sm",
+						onClick: addGroup,
+						className: "self-start",
+						children: ["+ ", addGroupLabel]
+					}), previewCount != null && /* @__PURE__ */ jsxs("span", {
+						className: cn("text-text-secondary", "text-sm"),
+						children: [formatOptNumber(previewCount), " matches"]
+					})]
+				})
+			]
+		})
+	});
+}
+ConditionBuilder.displayName = "ConditionBuilder";
+//#endregion
+//#region src/core/dropdown-menu.tsx
+const _excluded$6 = ["className"];
+const _excluded2$2 = ["className"];
+const _excluded3$1 = ["className", "variant"];
+const _excluded4 = ["className"];
+const DropdownMenu = MenuRoot$1;
+/** Renders the dropdown trigger component. */
+function DropdownTrigger(_ref) {
+	let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$6);
+	return /* @__PURE__ */ jsx(MenuTrigger$1, _objectSpread2(_objectSpread2({ className: cn("cursor-pointer gap-2", className) }, props), {}, {
+		"data-opt-id": "C4BSS",
+		"data-opt-slug": "dropdown-menu.DropdownTrigger"
+	}));
+}
+/** Renders the dropdown content component. */
+function DropdownContent(_ref2) {
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$2);
+	return /* @__PURE__ */ jsx(MenuPopover$1, _objectSpread2(_objectSpread2({ className: cn(className) }, props), {}, {
+		"data-opt-id": "J6NF7",
+		"data-opt-slug": "dropdown-menu.DropdownContent"
+	}));
+}
+/** Renders the dropdown item component. */
+function DropdownItem(_ref3) {
+	let { className, variant = "default" } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$1);
+	return /* @__PURE__ */ jsx(MenuItem$1, _objectSpread2(_objectSpread2({ className: cn("cursor-pointer data-[disabled]:cursor-not-allowed", variant === "destructive" && "text-danger-fg data-[active-item]:bg-danger-subtle data-[active-item]:text-danger-fg", className) }, props), {}, {
+		"data-opt-id": "5M6GA",
+		"data-opt-slug": "dropdown-menu.DropdownItem"
+	}));
+}
+/** Renders the dropdown separator component. */
+function DropdownSeparator(_ref4) {
+	let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4);
+	return /* @__PURE__ */ jsx(MenuSeparator$1, _objectSpread2(_objectSpread2({ className: cn(className) }, props), {}, {
+		"data-opt-id": "K9Y54",
+		"data-opt-slug": "dropdown-menu.DropdownSeparator"
+	}));
+}
+//#endregion
+//#region src/core/radio-group.tsx
+const _excluded$5 = [
+	"label",
+	"hint",
+	"description",
+	"value",
+	"name",
+	"size",
+	"disabled",
+	"className"
+];
+const sizeStyles = {
+	sm: {
+		radio: "h-4 w-4",
+		dot: "h-2 w-2",
+		text: "text-sm"
+	},
+	md: {
+		radio: "h-5 w-5",
+		dot: "h-2.5 w-2.5",
+		text: "text-sm"
+	},
+	lg: {
+		radio: "h-6 w-6",
+		dot: "h-3 w-3",
+		text: "text-base"
+	}
+};
+const RadioGroupContext = createContext({ size: "md" });
+/** Renders the radio group component. */
+function RadioGroup({ children, value, defaultValue = "", onChange, disabled, size = "md", error, required, className, orientation = "vertical", label, name }) {
+	const ctxValue = useMemo(() => ({
+		size,
+		disabled
+	}), [size, disabled]);
+	const hasError = Boolean(error);
+	const fallbackGroupId = useId().replace(/:/g, "");
+	const groupId = label ? `radio-group-${label.replace(/\s+/g, "-").toLowerCase()}` : `radio-group-${fallbackGroupId}`;
+	const labelId = label ? `${groupId}-label` : void 0;
+	return /* @__PURE__ */ jsx(RadioGroupContext.Provider, {
+		value: ctxValue,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("flex flex-col gap-1.5", className),
+			"data-opt-id": "2F20H",
+			"data-opt-slug": "radio-group.RadioGroup",
+			children: [/* @__PURE__ */ jsxs(RadioGroupRoot, {
+				value,
+				defaultValue,
+				onChange,
+				disabled,
+				orientation,
+				name,
+				id: groupId,
+				"aria-label": label ? void 0 : "Radio group",
+				"aria-labelledby": labelId,
+				"aria-required": required,
+				"aria-invalid": hasError,
+				"aria-describedby": getDescribedBy(groupId, error, void 0),
+				className: cn("flex", orientation === "vertical" ? "flex-col gap-3" : "flex-row gap-6"),
+				children: [label && /* @__PURE__ */ jsxs("div", {
+					id: labelId,
+					className: "text-text-secondary mb-1 text-sm font-medium",
+					children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+				}), children]
+			}), /* @__PURE__ */ jsx(FieldMessages, {
+				id: groupId,
+				error
+			})]
+		})
+	});
+}
+const Radio = forwardRef((_ref, ref) => {
+	var _ref2;
+	let { label, hint, description, value, name: _name, size: sizeProp, disabled: disabledProp, className } = _ref, props = _objectWithoutProperties(_ref, _excluded$5);
+	const groupContext = useContext(RadioGroupContext);
+	const primContext = useRadioGroupContext();
+	const size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : groupContext.size;
+	const disabled = (_ref2 = disabledProp !== null && disabledProp !== void 0 ? disabledProp : groupContext.disabled) !== null && _ref2 !== void 0 ? _ref2 : primContext === null || primContext === void 0 ? void 0 : primContext.disabled;
+	const hintText = hint !== null && hint !== void 0 ? hint : description;
+	const styles = sizeStyles[size];
+	const isChecked = (primContext === null || primContext === void 0 ? void 0 : primContext.value) === value;
+	const radioId = `radio-${useId().replace(/:/g, "")}`;
+	const labelId = label ? `${radioId}-label` : void 0;
+	const hintId = hintText ? `${radioId}-hint` : void 0;
+	const handleChange = useCallback(() => {
+		if (!disabled && value != null) primContext === null || primContext === void 0 || primContext.setValue(value);
+	}, [
+		disabled,
+		value,
+		primContext
+	]);
+	return /* @__PURE__ */ jsxs("label", _objectSpread2(_objectSpread2({
+		ref,
+		"aria-checked": isChecked,
+		className: cn("group flex items-start gap-3", disabled && "cursor-not-allowed opacity-50", !disabled && "cursor-pointer", className)
+	}, props), {}, {
+		"data-opt-id": "HY7YG",
+		"data-opt-slug": "radio-group.Radio",
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				id: radioId,
+				type: "radio",
+				name: primContext === null || primContext === void 0 ? void 0 : primContext.name,
+				value,
+				checked: isChecked,
+				disabled,
+				onChange: handleChange,
+				"aria-label": label ? void 0 : value !== null && value !== void 0 ? value : "Radio option",
+				"aria-labelledby": labelId,
+				"aria-describedby": hintId,
+				className: "sr-only"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("relative mt-0.5 inline-flex shrink-0 items-center justify-center rounded-full", styles.radio, "border-border border-2", "bg-surface", "group-aria-checked:border-accent", "transition-colors", "group-has-[:focus-visible]:outline-ring outline-transparent group-has-[:focus-visible]:outline-2 group-has-[:focus-visible]:-outline-offset-1"),
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("span", { className: cn(styles.dot, "bg-accent rounded-full", "scale-0 opacity-0 transition-all", "group-aria-checked:scale-100 group-aria-checked:opacity-100") })
+			}),
+			(label || hintText) && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [label && /* @__PURE__ */ jsx("span", {
+					id: labelId,
+					className: cn("text-text-primary font-medium", styles.text),
+					children: label
+				}), hintText && /* @__PURE__ */ jsx("span", {
+					id: hintId,
+					className: "text-text-tertiary text-sm",
+					children: hintText
+				})]
+			})
+		]
+	}));
+});
+Radio.displayName = "Radio";
+//#endregion
+//#region src/core/loading-overlay.tsx
+const _excluded$4 = [
+	"loading",
+	"children",
+	"label",
+	"className"
+];
+/** Renders the loading overlay component. */
+function LoadingOverlay(_ref) {
+	let { loading, children, label = "Loading…", className } = _ref, props = _objectWithoutProperties(_ref, _excluded$4);
+	return /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({
+		"data-opt-id": "380ZR",
+		"data-opt-slug": "loading-overlay.LoadingOverlay"
+	}, props), {}, {
+		className: cn("relative", className),
+		children: [children, loading && /* @__PURE__ */ jsx("div", {
+			className: "bg-surface/60 absolute inset-0 z-10 flex items-center justify-center rounded-lg backdrop-blur-[1px]",
+			role: "status",
+			"aria-live": "polite",
+			"aria-label": label,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Spinner, {
+					size: "md",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-text-tertiary text-sm",
+					children: label
+				})]
+			})
+		})]
+	}));
+}
+LoadingOverlay.displayName = "LoadingOverlay";
+//#endregion
+//#region src/core/block-layout.tsx
+const _excluded$3 = [
+	"children",
+	"className",
+	"spacing",
+	"inset",
+	"loading",
+	"loadingLabel"
+];
+const spacingClass = {
+	section: "gap-section",
+	group: "gap-group",
+	element: "gap-element",
+	none: "gap-0"
+};
+const insetClass = {
+	section: "p-section",
+	group: "p-group",
+	element: "p-element",
+	none: "p-0"
+};
+/** Renders the block layout component. */
+function BlockLayout(_ref) {
+	let { children, className, spacing = "section", inset, loading, loadingLabel } = _ref, props = _objectWithoutProperties(_ref, _excluded$3);
+	const layoutClassName = cn("flex flex-col", spacingClass[spacing], inset ? insetClass[inset] : void 0, className);
+	if (loading) return /* @__PURE__ */ jsx(LoadingOverlay, _objectSpread2(_objectSpread2({
+		"data-opt-id": "9D8QR",
+		"data-opt-slug": "block-layout.BlockLayout"
+	}, props), {}, {
+		className: layoutClassName,
+		loading,
+		label: loadingLabel,
+		children
+	}));
+	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2({
+		"data-opt-id": "9D8QR",
+		"data-opt-slug": "block-layout.BlockLayout"
+	}, props), {}, {
+		className: layoutClassName,
+		children
+	}));
+}
+BlockLayout.displayName = "BlockLayout";
+//#endregion
+//#region src/core/create-block.tsx
+const _excluded$2 = ["loading", "className"];
+/**
+* Block 팩토리. BlockLayout 래핑을 구조적으로 강제합니다.
+*
+* @param name - displayName으로 사용할 컴포넌트 이름
+* @param render - 나머지 props를 받아 콘텐츠를 반환하는 렌더 함수
+* @param options - layoutClassName: BlockLayout에 전달할 추가 className
+*/
+function createBlock(name, render, options) {
+	const Component = (props) => {
+		const { loading, className } = props, rest = _objectWithoutProperties(props, _excluded$2);
+		const layoutCn = (options === null || options === void 0 ? void 0 : options.layoutClassName) ? `${options.layoutClassName}${className ? ` ${className}` : ""}` : className;
+		return /* @__PURE__ */ jsx(BlockLayout, {
+			loading,
+			className: layoutCn,
+			children: render(rest)
+		});
+	};
+	Component.displayName = name;
+	return Component;
+}
+//#endregion
+//#region src/core/page-header.tsx
+/** Renders the page header component. */
+function PageHeader({ title, description, actions, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("gap-group flex flex-col items-stretch sm:flex-row sm:items-center sm:justify-between", className),
+		"data-opt-id": "7AK8Z",
+		"data-opt-slug": "page-header.PageHeader",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "gap-element flex min-w-0 flex-col",
+			children: [/* @__PURE__ */ jsx("h2", {
+				className: "text-text-primary text-lg font-semibold",
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-text-tertiary text-sm",
+				children: description
+			})]
+		}), actions && /* @__PURE__ */ jsx("div", {
+			className: "gap-element flex w-full shrink-0 items-center sm:w-auto",
+			children: actions
+		})]
+	});
+}
+PageHeader.displayName = "PageHeader";
+//#endregion
+//#region src/core/scroll-area.tsx
+const overflowMap = {
+	vertical: "overflow-y-auto overflow-x-hidden",
+	horizontal: "overflow-x-auto overflow-y-hidden",
+	both: "overflow-auto"
+};
+/** Renders the scroll area component. */
+function ScrollArea({ children, className, orientation = "vertical" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(overflowMap[orientation], "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border hover:scrollbar-thumb-border-hover", className),
+		"data-opt-id": "A9X4K",
+		"data-opt-slug": "scroll-area.ScrollArea",
+		children
+	});
+}
+ScrollArea.displayName = "ScrollArea";
+//#endregion
+//#region src/core/container.tsx
+const maxWidthMap = {
+	sm: "max-w-screen-sm",
+	md: "max-w-screen-md",
+	lg: "max-w-screen-lg",
+	xl: "max-w-screen-xl",
+	"2xl": "max-w-screen-2xl",
+	full: "max-w-full"
+};
+/** Renders the container component. */
+function Container({ children, maxWidth = "xl", center = true, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(maxWidthMap[maxWidth], center && "mx-auto", "px-4", className),
+		"data-opt-id": "H3G96",
+		"data-opt-slug": "container.Container",
+		children
+	});
+}
+Container.displayName = "Container";
+//#endregion
+//#region src/core/section.tsx
+/** Renders the section component. */
+function Section({ children, title, description, className }) {
+	const titleId = `${useId()}-title`;
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("gap-group flex flex-col", className),
+		"aria-labelledby": title ? titleId : void 0,
+		"data-opt-id": "M3QXW",
+		"data-opt-slug": "section.Section",
+		children: [(title || description) && /* @__PURE__ */ jsxs("div", {
+			className: "gap-element flex flex-col",
+			children: [title && /* @__PURE__ */ jsx("h3", {
+				id: titleId,
+				className: "text-text-primary text-base font-semibold",
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-text-tertiary text-sm",
+				children: description
+			})]
+		}), children]
+	});
+}
+Section.displayName = "Section";
+//#endregion
+//#region src/core/resizable.tsx
+const _excluded$1 = [
+	"direction",
+	"children",
+	"className",
+	"id",
+	"autoSaveId"
+];
+const _excluded2$1 = [
+	"collapsedSize",
+	"defaultSize",
+	"minSize",
+	"maxSize",
+	"children",
+	"className"
+];
+const _excluded3 = ["className", "withHandle"];
+function toPanelSize(size) {
+	return typeof size === "number" ? `${size}%` : size;
+}
+/** Renders the resizable panel group component. */
+function ResizablePanelGroup(_ref) {
+	let { direction, children, className, id, autoSaveId } = _ref, props = _objectWithoutProperties(_ref, _excluded$1);
+	return /* @__PURE__ */ jsx(Group, _objectSpread2(_objectSpread2({
+		orientation: direction,
+		id: id !== null && id !== void 0 ? id : autoSaveId,
+		className: cn("flex h-full w-full", className)
+	}, props), {}, {
+		"data-opt-id": "BM5RR",
+		"data-opt-slug": "resizable.ResizablePanelGroup",
+		children
+	}));
+}
+ResizablePanelGroup.displayName = "ResizablePanelGroup";
+/** Renders the resizable panel component. */
+function ResizablePanel(_ref2) {
+	let { collapsedSize, defaultSize, minSize, maxSize, children, className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$1);
+	return /* @__PURE__ */ jsx(Panel, _objectSpread2(_objectSpread2({
+		collapsedSize: toPanelSize(collapsedSize),
+		defaultSize: toPanelSize(defaultSize),
+		minSize: toPanelSize(minSize),
+		maxSize: toPanelSize(maxSize),
+		className: cn("overflow-auto", className)
+	}, props), {}, {
+		"data-opt-id": "88X4V",
+		"data-opt-slug": "resizable.ResizablePanel",
+		children
+	}));
+}
+ResizablePanel.displayName = "ResizablePanel";
+/** Renders the resizable handle component. */
+function ResizableHandle(_ref3) {
+	let { className, withHandle = false } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3);
+	return /* @__PURE__ */ jsx(Separator$1, _objectSpread2(_objectSpread2({ className: cn("bg-border relative flex items-center justify-center", "after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2", "data-[resize-handle-active]:bg-accent", "[&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full", "[&[data-orientation=horizontal]]:h-full [&[data-orientation=horizontal]]:w-px", className) }, props), {}, {
+		"data-opt-id": "6Z22W",
+		"data-opt-slug": "resizable.ResizableHandle",
+		children: withHandle && /* @__PURE__ */ jsx("div", {
+			className: "border-border bg-surface z-10 flex h-4 w-3 items-center justify-center rounded-sm border",
+			children: /* @__PURE__ */ jsx(GripVertical, {
+				"aria-hidden": "true",
+				className: "text-text-tertiary h-3 w-3"
+			})
+		})
+	}));
+}
+ResizableHandle.displayName = "ResizableHandle";
+//#endregion
+//#region src/core/logo.tsx
+const markSizeStyles = {
+	sm: "h-6 w-6",
+	md: "h-8 w-8",
+	lg: "h-10 w-10"
+};
+const textSizeStyles = {
+	sm: "text-sm",
+	md: "text-base",
+	lg: "text-lg"
+};
+/** Renders the logo component. */
+function Logo({ src, icon, text, alt = "Logo", size = "md", href, onClick, className }) {
+	const [imageError, setImageError] = useState(false);
+	const showImage = src && !imageError;
+	const fallbackLetter = text ? text.charAt(0).toUpperCase() : null;
+	let mark = null;
+	if (showImage) mark = /* @__PURE__ */ jsx("img", {
+		src,
+		alt,
+		className: cn("object-contain", markSizeStyles[size]),
+		onError: () => setImageError(true)
+	});
+	else if (icon) mark = /* @__PURE__ */ jsx("span", {
+		className: cn("flex shrink-0 items-center justify-center", markSizeStyles[size]),
+		"aria-hidden": "true",
+		children: icon
+	});
+	else if (fallbackLetter) mark = /* @__PURE__ */ jsx("span", {
+		className: cn("bg-accent text-on-accent flex shrink-0 items-center justify-center rounded-lg font-bold", markSizeStyles[size], textSizeStyles[size]),
+		"aria-hidden": "true",
+		children: fallbackLetter
+	});
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [mark, text && /* @__PURE__ */ jsx("span", {
+		className: cn("text-text-primary font-semibold", textSizeStyles[size]),
+		children: text
+	})] });
+	const sharedClassName = cn("inline-flex items-center gap-element", className);
+	if (href) return /* @__PURE__ */ jsx("a", {
+		href,
+		onClick,
+		className: cn(sharedClassName, "no-underline"),
+		"aria-label": text !== null && text !== void 0 ? text : alt,
+		"data-opt-id": "R906A",
+		"data-opt-slug": "logo.Logo",
+		children: content
+	});
+	if (onClick) return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		className: sharedClassName,
+		"aria-label": text !== null && text !== void 0 ? text : alt,
+		"data-opt-id": "R906A",
+		"data-opt-slug": "logo.Logo",
+		children: content
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: sharedClassName,
+		"data-opt-id": "R906A",
+		"data-opt-slug": "logo.Logo",
+		children: content
+	});
+}
+//#endregion
+//#region src/core/drawer.tsx
+const _excluded = [
+	"className",
+	"side",
+	"size",
+	"swipeToDismiss",
+	"swipeDismissThreshold",
+	"style",
+	"onPointerDown"
+];
+const _excluded2 = ["className"];
+const sizeMap = {
+	sm: "max-w-xs",
+	md: "max-w-md",
+	lg: "max-w-xl",
+	full: "max-w-full"
+};
+const heightMap = {
+	sm: "max-h-[320px]",
+	md: "max-h-[480px]",
+	lg: "max-h-[640px]",
+	full: "max-h-full"
+};
+const positionClass = {
+	right: "fixed inset-y-0 right-0",
+	left: "fixed inset-y-0 left-0",
+	bottom: "fixed inset-x-0 bottom-0"
+};
+/** Renders the drawer root component. */
+function DrawerRoot(props) {
+	return /* @__PURE__ */ jsx(DialogRoot, _objectSpread2(_objectSpread2({ animated: true }, props), {}, {
+		"data-opt-id": "YGJ0M",
+		"data-opt-slug": "drawer.DrawerRoot"
+	}));
+}
+/** Maps a drag delta to the dismiss offset for a given side (0 = no progress). */
+function dismissOffset(side, dx, dy) {
+	switch (side) {
+		case "right": return Math.max(0, dx);
+		case "left": return Math.min(0, dx);
+		case "bottom": return Math.max(0, dy);
+		default: return 0;
+	}
+}
+/** Renders the drawer panel component. */
+function DrawerPanel(_ref) {
+	let { className, side = "right", size = "md", swipeToDismiss = true, swipeDismissThreshold = 80, style, onPointerDown } = _ref, props = _objectWithoutProperties(_ref, _excluded);
+	const isHorizontal = side === "left" || side === "right";
+	const close = useDialogClose();
+	const dragStart = useRef(null);
+	const [offset, setOffset] = useState(0);
+	const [dragging, setDragging] = useState(false);
+	const axis = side === "bottom" ? "Y" : "X";
+	const DRAG_ACTIVATE = 6;
+	const handlePointerDown = useCallback((e) => {
+		onPointerDown === null || onPointerDown === void 0 || onPointerDown(e);
+		if (!swipeToDismiss || e.button !== 0) return;
+		dragStart.current = {
+			x: e.clientX,
+			y: e.clientY
+		};
+	}, [swipeToDismiss, onPointerDown]);
+	const handlePointerMove = useCallback((e) => {
+		const start = dragStart.current;
+		if (!start) return;
+		const next = dismissOffset(side, e.clientX - start.x, e.clientY - start.y);
+		if (!dragging) {
+			if (Math.abs(next) < DRAG_ACTIVATE) return;
+			setDragging(true);
+			try {
+				e.currentTarget.setPointerCapture(e.pointerId);
+			} catch (_unused) {}
+		}
+		setOffset(next);
+	}, [side, dragging]);
+	const endDrag = useCallback((e) => {
+		const wasDragging = dragging;
+		dragStart.current = null;
+		setDragging(false);
+		try {
+			e.currentTarget.releasePointerCapture(e.pointerId);
+		} catch (_unused2) {}
+		if (wasDragging && Math.abs(offset) >= swipeDismissThreshold) close();
+		setOffset(0);
+	}, [
+		dragging,
+		offset,
+		swipeDismissThreshold,
+		close
+	]);
+	const [keyboardInset, setKeyboardInset] = useState(0);
+	useEffect(() => {
+		if (side !== "bottom" || typeof window === "undefined") return;
+		const vv = window.visualViewport;
+		if (!vv) return;
+		const onResize = () => {
+			const inset = Math.max(0, window.innerHeight - vv.height - vv.offsetTop);
+			setKeyboardInset(inset);
+		};
+		onResize();
+		vv.addEventListener("resize", onResize);
+		vv.addEventListener("scroll", onResize);
+		return () => {
+			vv.removeEventListener("resize", onResize);
+			vv.removeEventListener("scroll", onResize);
+		};
+	}, [side]);
+	const dragStyle = offset !== 0 ? { transform: `translate${axis}(${offset}px)` } : void 0;
+	return /* @__PURE__ */ jsx(DialogPanel, _objectSpread2(_objectSpread2({
+		className: cn("border-border bg-surface z-50 m-0 flex flex-col border p-0 shadow-2xl", "data-[enter]:fade-in data-[leave]:fade-out", dragging ? "touch-none" : OPT_ANIMATE_DRAWER[side], positionClass[side], isHorizontal ? ["h-full w-full", sizeMap[size]] : ["w-full", heightMap[size]], className),
+		style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, style), dragStyle), keyboardInset > 0 ? { marginBottom: keyboardInset } : null), dragging ? { transition: "none" } : null),
+		onPointerDown: handlePointerDown,
+		onPointerMove: swipeToDismiss ? handlePointerMove : void 0,
+		onPointerUp: swipeToDismiss ? endDrag : void 0,
+		onPointerCancel: swipeToDismiss ? endDrag : void 0
+	}, props), {}, {
+		"data-opt-id": "RQERV",
+		"data-opt-slug": "drawer.DrawerPanel"
+	}));
+}
+/** Renders the drawer close component. */
+function DrawerClose(_ref2) {
+	let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2);
+	return /* @__PURE__ */ jsx(DialogDismiss, _objectSpread2(_objectSpread2({ className: cn("hover:bg-bg-subtle rounded-md p-1.5 transition-colors", "cursor-pointer data-[disabled]:cursor-not-allowed", OPT_FOCUS, className) }, props), {}, {
+		"data-opt-id": "M6D6D",
+		"data-opt-slug": "drawer.DrawerClose"
+	}));
+}
+//#endregion
+//#region src/core/virtual-list.tsx
+/** Renders the virtual list component. */
+function VirtualList({ items, renderItem, itemHeight, overscan = 3, className, style }) {
+	const containerRef = useRef(null);
+	const scrollTopRef = useRef(0);
+	const containerHeightRef = useRef(0);
+	const rafIdRef = useRef(0);
+	const [visibleRange, setVisibleRange] = useState({
+		start: 0,
+		end: 0
+	});
+	const totalHeight = items.length * itemHeight;
+	const computeRange = useCallback((scrollTop, height) => {
+		const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+		const visibleCount = Math.ceil(height / itemHeight);
+		return {
+			start,
+			end: Math.min(items.length - 1, start + visibleCount + overscan * 2)
+		};
+	}, [
+		itemHeight,
+		overscan,
+		items.length
+	]);
+	const scheduleUpdate = useCallback(() => {
+		if (rafIdRef.current) return;
+		rafIdRef.current = requestAnimationFrame(() => {
+			rafIdRef.current = 0;
+			const newRange = computeRange(scrollTopRef.current, containerHeightRef.current);
+			setVisibleRange((prev) => prev.start === newRange.start && prev.end === newRange.end ? prev : newRange);
+		});
+	}, [computeRange]);
+	const handleScroll = useCallback(() => {
+		const el = containerRef.current;
+		if (el) {
+			scrollTopRef.current = el.scrollTop;
+			if (el.clientHeight !== containerHeightRef.current) containerHeightRef.current = el.clientHeight;
+			scheduleUpdate();
+		}
+	}, [scheduleUpdate]);
+	const handleRef = useCallback((el) => {
+		containerRef.current = el;
+		if (el) {
+			containerHeightRef.current = el.clientHeight;
+			const range = computeRange(0, el.clientHeight);
+			setVisibleRange(range);
+		}
+	}, [computeRange]);
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			const nextHeight = el.clientHeight;
+			if (nextHeight !== containerHeightRef.current) {
+				containerHeightRef.current = nextHeight;
+				scheduleUpdate();
+			}
+		});
+		observer.observe(el);
+		return () => {
+			observer.disconnect();
+		};
+	}, [scheduleUpdate]);
+	useEffect(() => {
+		scheduleUpdate();
+		return () => {
+			if (rafIdRef.current) {
+				cancelAnimationFrame(rafIdRef.current);
+				rafIdRef.current = 0;
+			}
+		};
+	}, [
+		scheduleUpdate,
+		items.length,
+		itemHeight,
+		overscan
+	]);
+	const visibleItems = useMemo(() => {
+		const result = [];
+		for (let i = visibleRange.start; i <= visibleRange.end && i < items.length; i++) result.push(/* @__PURE__ */ jsx("div", {
+			role: "listitem",
+			style: {
+				position: "absolute",
+				top: i * itemHeight,
+				left: 0,
+				right: 0,
+				height: itemHeight
+			},
+			children: renderItem(items[i], i)
+		}, i));
+		return result;
+	}, [
+		visibleRange.start,
+		visibleRange.end,
+		items,
+		itemHeight,
+		renderItem
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: handleRef,
+		onScroll: handleScroll,
+		className: cn("overflow-auto", className),
+		style: _objectSpread2({ position: "relative" }, style),
+		role: "list",
+		"data-opt-id": "VT2NP",
+		"data-opt-slug": "virtual-list.VirtualList",
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				height: totalHeight,
+				position: "relative"
+			},
+			children: visibleItems
+		})
+	});
+}
+//#endregion
+//#region src/core/shader-presets.ts
+/** 모든 프리셋이 공유하는 풀스크린 정점 셰이더. */
+const SHADER_VERTEX = `
+attribute vec2 position;
+attribute vec2 uv;
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+/**
+* 모든 프래그먼트 본문 앞에 붙는 공유 프렐류드.
+* uniform 선언 + 공통 helper(rotate/value noise/fbm/grain/lux/coords).
+*/
+const SHADER_PRELUDE = `
+precision highp float;
+varying vec2 vUv;
+uniform float u_time;
+uniform vec2  u_resolution;
+uniform float u_scale;
+uniform float u_speed;
+uniform float u_distortion;
+uniform float u_grain;
+uniform float u_contrast;
+uniform float u_angle;
+uniform float u_dim;
+uniform float u_vignette;
+uniform float u_scrim;
+uniform vec2  u_mouse;
+uniform float u_interactive;
+uniform float u_bars;
+uniform float u_blur;
+uniform float u_peak;
+uniform float u_valley;
+uniform vec3  u_color1;
+uniform vec3  u_color2;
+uniform vec3  u_color3;
+
+const float PI = 3.14159265359;
+
+mat2 rot(float a){ float c = cos(a), s = sin(a); return mat2(c, -s, s, c); }
+
+float hash21(vec2 p){
+  p = fract(p * vec2(123.34, 345.45));
+  p += dot(p, p + 34.345);
+  return fract(p.x * p.y);
+}
+
+float vnoise(vec2 p){
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float a = hash21(i);
+  float b = hash21(i + vec2(1.0, 0.0));
+  float c = hash21(i + vec2(0.0, 1.0));
+  float d = hash21(i + vec2(1.0, 1.0));
+  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
+}
+
+float fbm(vec2 p){
+  float v = 0.0;
+  float amp = 0.5;
+  for (int i = 0; i < 5; i++){
+    v += amp * vnoise(p);
+    p = rot(0.5) * p * 2.0;
+    amp *= 0.5;
+  }
+  return v;
+}
+
+// fine film grain — subtle, premium texture
+vec3 grain(vec3 col, vec2 uv){
+  float g = hash21(uv * u_resolution.xy + fract(u_time));
+  return col + (g - 0.5) * u_grain;
+}
+
+// premium finish: gentle desaturation for an understated, refined look.
+vec3 lux(vec3 col){
+  float l = dot(col, vec3(0.299, 0.587, 0.114));
+  return clamp(mix(vec3(l), col, 0.82), 0.0, 1.0);
+}
+
+// shared output finish: refine + legibility overlays (dim / vignette / bottom
+// scrim) + film grain. Every preset ends with finish(col, vUv).
+vec3 finish(vec3 col, vec2 uv){
+  col = lux(col);
+  col *= 1.0 - u_dim * 0.85;
+  float edge = length(uv - 0.5);
+  col *= 1.0 - u_vignette * smoothstep(0.35, 0.85, edge);
+  col *= 1.0 - u_scrim * smoothstep(0.2, 1.0, uv.y);
+  col = grain(col, uv);
+  return col;
+}
+
+// aspect-correct, angle-rotated, centered coords + pointer parallax
+vec2 coords(){
+  vec2 uv = vUv - 0.5;
+  uv.x *= u_resolution.x / max(u_resolution.y, 1.0);
+  uv += (u_mouse - 0.5) * u_interactive * 0.3;
+  uv = rot(radians(u_angle)) * uv;
+  return uv;
+}
+`;
+const PARAM_RANGE = {
+	scale: {
+		min: .4,
+		max: 3,
+		step: .1,
+		default: 1
+	},
+	speed: {
+		min: 0,
+		max: 3,
+		step: .1,
+		default: .5
+	},
+	distortion: {
+		min: 0,
+		max: 1,
+		step: .01,
+		default: .4
+	},
+	grain: {
+		min: 0,
+		max: .5,
+		step: .01,
+		default: .04
+	},
+	contrast: {
+		min: 0,
+		max: 1,
+		step: .01,
+		default: .4
+	},
+	angle: {
+		min: 0,
+		max: 360,
+		step: 1,
+		default: 0
+	},
+	dim: {
+		min: 0,
+		max: 1,
+		step: .01,
+		default: 0
+	},
+	vignette: {
+		min: 0,
+		max: 1,
+		step: .01,
+		default: 0
+	},
+	scrim: {
+		min: 0,
+		max: 1,
+		step: .01,
+		default: 0
+	},
+	interactive: {
+		min: 0,
+		max: 1,
+		step: .01,
+		default: 0
+	},
+	bars: {
+		min: 2,
+		max: 40,
+		step: 1,
+		default: 19
+	},
+	blur: {
+		min: 0,
+		max: 1,
+		step: .01,
+		default: .29
+	},
+	peak: {
+		min: 0,
+		max: 1,
+		step: .01,
+		default: .98
+	},
+	valley: {
+		min: 0,
+		max: 1,
+		step: .01,
+		default: .55
+	}
+};
+/** 프리셋이 선언하지 않은 파라미터의 전역 기본값 (uniform 폴백). */
+const SHADER_PARAM_FALLBACK = {
+	scale: PARAM_RANGE.scale.default,
+	speed: PARAM_RANGE.speed.default,
+	distortion: PARAM_RANGE.distortion.default,
+	grain: PARAM_RANGE.grain.default,
+	contrast: PARAM_RANGE.contrast.default,
+	angle: PARAM_RANGE.angle.default,
+	dim: PARAM_RANGE.dim.default,
+	vignette: PARAM_RANGE.vignette.default,
+	scrim: PARAM_RANGE.scrim.default,
+	interactive: PARAM_RANGE.interactive.default,
+	bars: PARAM_RANGE.bars.default,
+	blur: PARAM_RANGE.blur.default,
+	peak: PARAM_RANGE.peak.default,
+	valley: PARAM_RANGE.valley.default
+};
+function param(key, defaultValue) {
+	const range = PARAM_RANGE[key];
+	return {
+		key,
+		min: range.min,
+		max: range.max,
+		step: range.step,
+		default: defaultValue !== null && defaultValue !== void 0 ? defaultValue : range.default
+	};
+}
+const SHADER_PRESETS = [
+	{
+		id: "felix-metallic",
+		category: "luxury",
+		colorSlots: 3,
+		defaultColors: [
+			"#0a1424",
+			"#3a5a8c",
+			"#c4d4e8"
+		],
+		params: [
+			param("scale"),
+			param("speed", .4),
+			param("distortion", .45),
+			param("contrast", .4),
+			param("grain", .04)
+		],
+		body: `
+void main(){
+  vec2 uv = coords() * u_scale;
+  float t = u_time * u_speed * 0.3;
+  vec2 q = vec2(fbm(uv + t), fbm(uv - t + 5.2));
+  vec2 r = vec2(
+    fbm(uv + q * 2.0 + vec2(1.7, 9.2) + t),
+    fbm(uv + q * 2.0 + vec2(8.3, 2.8) - t)
+  );
+  float f = fbm(uv + r * (1.0 + u_distortion * 2.0));
+  float band = sin((f + r.x * 0.5) * 6.2831 * 2.0);
+  float spec = pow(abs(band), mix(2.0, 5.0, u_contrast));
+  vec3 col = mix(u_color1, u_color2, smoothstep(0.0, 1.0, f + r.y * 0.4));
+  col = mix(col, u_color3, spec * 0.5);
+  gl_FragColor = vec4(finish(col, vUv), 1.0);
+}
+`
+	},
+	{
+		id: "liquid-silk",
+		category: "luxury",
+		colorSlots: 3,
+		defaultColors: [
+			"#1c1428",
+			"#6a5a8c",
+			"#d8cfe4"
+		],
+		params: [
+			param("scale"),
+			param("speed", .4),
+			param("distortion", .4),
+			param("grain", .04),
+			param("angle", 30)
+		],
+		body: `
+void main(){
+  vec2 uv = coords() * u_scale;
+  float t = u_time * u_speed * 0.25;
+  float warp = fbm(uv * 1.5 + t);
+  float folds = sin((uv.x * 3.0 + uv.y * 1.5 + warp * (2.0 + u_distortion * 4.0)) * PI);
+  float sheen = 0.5 + 0.5 * folds;
+  vec3 col = mix(u_color1, u_color2, sheen);
+  col = mix(col, u_color3, pow(sheen, 5.0) * 0.6);
+  gl_FragColor = vec4(finish(col, vUv), 1.0);
+}
+`
+	},
+	{
+		id: "iridescent-pearl",
+		category: "luxury",
+		colorSlots: 3,
+		defaultColors: [
+			"#c9b8d6",
+			"#a8c4d4",
+			"#e4d4dc"
+		],
+		params: [
+			param("scale"),
+			param("speed", .35),
+			param("distortion", .4),
+			param("grain", .04)
+		],
+		body: `
+vec3 palette3(float t){
+  t = fract(t);
+  float s = t * 3.0;
+  if (s < 1.0) return mix(u_color1, u_color2, smoothstep(0.0, 1.0, s));
+  if (s < 2.0) return mix(u_color2, u_color3, smoothstep(0.0, 1.0, s - 1.0));
+  return mix(u_color3, u_color1, smoothstep(0.0, 1.0, s - 2.0));
+}
+void main(){
+  vec2 uv = coords() * u_scale;
+  float t = u_time * u_speed * 0.2;
+  float n = fbm(uv * 1.2 + vec2(t, -t));
+  float thin = fbm(uv * 2.5 - n * (1.0 + u_distortion * 3.0) + t * 0.5);
+  vec3 col = palette3(thin * 1.5 + n * 0.5 + t * 0.1);
+  col += pow(thin, 3.0) * 0.12;
+  gl_FragColor = vec4(finish(col, vUv), 1.0);
+}
+`
+	},
+	{
+		id: "molten-gold",
+		category: "luxury",
+		colorSlots: 3,
+		defaultColors: [
+			"#1c1208",
+			"#b08848",
+			"#e8d4a8"
+		],
+		params: [
+			param("scale"),
+			param("speed", .4),
+			param("contrast", .4),
+			param("grain", .05)
+		],
+		body: `
+void main(){
+  vec2 uv = coords() * u_scale;
+  float t = u_time * u_speed * 0.3;
+  vec2 q = vec2(fbm(uv + t), fbm(uv * 1.3 - t));
+  float f = fbm(uv * 1.5 + q * 2.5);
+  float heat = smoothstep(0.25, 0.95, f);
+  vec3 col = mix(u_color1, u_color2, heat);
+  float hot = pow(smoothstep(0.6, 1.0, f + q.x * 0.3), mix(3.0, 6.0, u_contrast));
+  col = mix(col, u_color3, hot * 0.7);
+  gl_FragColor = vec4(finish(col, vUv), 1.0);
+}
+`
+	},
+	{
+		id: "liquid-glass",
+		category: "luxury",
+		colorSlots: 3,
+		defaultColors: [
+			"#0c1c2c",
+			"#3a6a88",
+			"#bcdce4"
+		],
+		params: [
+			param("scale"),
+			param("speed", .4),
+			param("distortion", .4),
+			param("grain", .03)
+		],
+		body: `
+void main(){
+  vec2 uv = coords() * u_scale;
+  float t = u_time * u_speed * 0.2;
+  vec2 p = uv;
+  for (int i = 1; i < 5; i++){
+    float fi = float(i);
+    p += (1.0 + u_distortion) * vec2(
+      0.3 / fi * sin(fi * p.y + t + 0.3 * fi),
+      0.3 / fi * cos(fi * p.x + t + 0.3 * fi)
+    );
+  }
+  float caustic = 0.5 + 0.5 * sin(p.x * 3.0) * cos(p.y * 3.0);
+  vec3 col = mix(u_color1, u_color2, caustic);
+  col = mix(col, u_color3, pow(caustic, 6.0) * 0.6);
+  gl_FragColor = vec4(finish(col, vUv), 1.0);
+}
+`
+	},
+	{
+		id: "aurora-veil",
+		category: "luxury",
+		colorSlots: 3,
+		defaultColors: [
+			"#050d18",
+			"#2a8a8c",
+			"#6a5a9c"
+		],
+		params: [
+			param("scale"),
+			param("speed", .4),
+			param("distortion", .45),
+			param("grain", .03),
+			param("angle", 0)
+		],
+		body: `
+void main(){
+  vec2 uv = coords() * u_scale;
+  float t = u_time * u_speed * 0.3;
+  vec3 col = u_color1;
+  for (int i = 0; i < 3; i++){
+    float fi = float(i);
+    float band = uv.y * 1.5
+      + sin(uv.x * 2.0 + t + fi * 1.7) * (0.3 + u_distortion * 0.5)
+      + fbm(uv * 1.5 + t * 0.5 + fi) * 0.6;
+    float glow = exp(-abs(band) * 3.0);
+    vec3 rib = mix(u_color2, u_color3, fi * 0.5);
+    col += rib * glow * 0.5;
+  }
+  gl_FragColor = vec4(finish(col, vUv), 1.0);
+}
+`
+	},
+	{
+		id: "holographic",
+		category: "luxury",
+		colorSlots: 3,
+		defaultColors: [
+			"#14101e",
+			"#8a6a9c",
+			"#7a9caa"
+		],
+		params: [
+			param("scale"),
+			param("speed", .35),
+			param("distortion", .4),
+			param("grain", .03)
+		],
+		body: `
+vec3 hsv2rgb(vec3 c){
+  vec3 p = abs(fract(c.xxx + vec3(0.0, 2.0 / 3.0, 1.0 / 3.0)) * 6.0 - 3.0);
+  return c.z * mix(vec3(1.0), clamp(p - 1.0, 0.0, 1.0), c.y);
+}
+void main(){
+  vec2 uv = coords() * u_scale;
+  float t = u_time * u_speed * 0.2;
+  float n = fbm(uv * 1.5 + t);
+  float ripple = fbm(uv * 3.0 - n * (1.0 + u_distortion * 2.0) + t);
+  float hue = fract(ripple * 1.2 + n * 0.5 + length(uv) * 0.3 + t * 0.1);
+  vec3 holo = hsv2rgb(vec3(hue, 0.3, 0.92));
+  vec3 base = mix(u_color1, u_color2, n);
+  vec3 col = mix(base, holo, 0.35);
+  col = mix(col, u_color3, pow(ripple, 4.0) * 0.5);
+  gl_FragColor = vec4(finish(col, vUv), 1.0);
+}
+`
+	},
+	{
+		id: "chrome-ripple",
+		category: "luxury",
+		colorSlots: 3,
+		defaultColors: [
+			"#0e1420",
+			"#6a7a92",
+			"#d4dce4"
+		],
+		params: [
+			param("scale"),
+			param("speed", .4),
+			param("contrast", .4),
+			param("grain", .04)
+		],
+		body: `
+void main(){
+  vec2 uv = coords() * u_scale;
+  float t = u_time * u_speed * 0.3;
+  vec2 p = uv;
+  for (int i = 1; i < 6; i++){
+    float fi = float(i);
+    p.x += (0.4 / fi) * sin(fi * 1.5 * p.y + t + fi);
+    p.y += (0.4 / fi) * cos(fi * 1.5 * p.x + t + fi);
+  }
+  float sheen = 0.5 + 0.5 * sin(p.x * 3.0 + p.y * 2.0);
+  float spec = pow(sheen, mix(3.0, 6.0, u_contrast));
+  vec3 col = mix(u_color1, u_color2, sheen);
+  col = mix(col, u_color3, spec * 0.5);
+  gl_FragColor = vec4(finish(col, vUv), 1.0);
+}
+`
+	},
+	{
+		id: "mesh-flow",
+		category: "flow",
+		colorSlots: 3,
+		defaultColors: [
+			"#3a4a6a",
+			"#6a5a7c",
+			"#4a7a82"
+		],
+		params: [
+			param("scale"),
+			param("speed", .5),
+			param("grain", .04)
+		],
+		body: `
+void main(){
+  vec2 uv = coords() * u_scale;
+  float t = u_time * u_speed * 0.4;
+  vec2 p1 = vec2(sin(t * 0.7), cos(t * 0.9)) * 0.5;
+  vec2 p2 = vec2(cos(t * 0.8 + 1.0), sin(t * 0.6 + 2.0)) * 0.5;
+  vec2 p3 = vec2(sin(t * 0.5 + 3.0), cos(t * 0.7 + 4.0)) * 0.5;
+  float d1 = 1.0 / (0.15 + dot(uv - p1, uv - p1));
+  float d2 = 1.0 / (0.15 + dot(uv - p2, uv - p2));
+  float d3 = 1.0 / (0.15 + dot(uv - p3, uv - p3));
+  float sum = d1 + d2 + d3;
+  vec3 col = (u_color1 * d1 + u_color2 * d2 + u_color3 * d3) / sum;
+  gl_FragColor = vec4(finish(col, vUv), 1.0);
+}
+`
+	},
+	{
+		id: "plasma-wave",
+		category: "flow",
+		colorSlots: 3,
+		defaultColors: [
+			"#2a2440",
+			"#4a5a7c",
+			"#8a6a7c"
+		],
+		params: [
+			param("scale"),
+			param("speed", .4),
+			param("distortion", .4),
+			param("grain", .03)
+		],
+		body: `
+void main(){
+  vec2 uv = coords() * u_scale * 3.0;
+  float t = u_time * u_speed * 0.5;
+  float v = sin(uv.x + t)
+    + sin(uv.y + t * 1.3)
+    + sin((uv.x + uv.y) * 0.7 + t)
+    + sin(length(uv) * (1.0 + u_distortion * 2.0) - t * 1.5);
+  v *= 0.25;
+  float m = 0.5 + 0.5 * sin(v * PI);
+  vec3 col = mix(u_color1, u_color2, m);
+  col = mix(col, u_color3, (0.5 + 0.5 * sin(v * 6.2831)) * 0.5);
+  gl_FragColor = vec4(finish(col, vUv), 1.0);
+}
+`
+	},
+	{
+		id: "swirl-vortex",
+		category: "flow",
+		colorSlots: 3,
+		defaultColors: [
+			"#0a0e16",
+			"#7c4a5c",
+			"#3a7a72"
+		],
+		params: [
+			param("scale"),
+			param("speed", .4),
+			param("distortion", .45),
+			param("grain", .03)
+		],
+		body: `
+void main(){
+  vec2 uv = coords() * u_scale;
+  float t = u_time * u_speed * 0.3;
+  float r = length(uv);
+  float a = atan(uv.y, uv.x);
+  a += (1.0 + u_distortion * 3.0) * (0.5 / (r + 0.2)) + t;
+  vec2 p = vec2(cos(a), sin(a)) * r;
+  float n = fbm(p * 2.0 + t);
+  float bands = sin((a * 3.0 + r * 6.0 - t * 2.0) + n * 4.0);
+  float m = 0.5 + 0.5 * bands;
+  vec3 col = mix(u_color1, u_color2, m);
+  col = mix(col, u_color3, pow(m, 3.0) * 0.6);
+  gl_FragColor = vec4(finish(col, vUv), 1.0);
+}
+`
+	},
+	{
+		id: "caustics",
+		category: "flow",
+		colorSlots: 3,
+		defaultColors: [
+			"#04161f",
+			"#2a6a7c",
+			"#a8d4d0"
+		],
+		params: [
+			param("scale"),
+			param("speed", .4),
+			param("distortion", .4),
+			param("grain", .03)
+		],
+		body: `
+void main(){
+  vec2 uv = coords() * u_scale * 3.0;
+  float t = u_time * u_speed * 0.4;
+  vec2 p = uv;
+  float c = 0.0;
+  for (int i = 0; i < 4; i++){
+    float fi = float(i);
+    p += vec2(sin(p.y * 1.5 + t + fi), cos(p.x * 1.5 + t * 1.1 + fi))
+      * (0.4 + u_distortion * 0.5);
+    c += 1.0 / (length(fract(p) - 0.5) + 0.1);
+  }
+  c = pow(c * 0.06, 2.0);
+  vec3 col = mix(u_color1, u_color2, clamp(c, 0.0, 1.0));
+  col += u_color3 * pow(clamp(c - 0.6, 0.0, 1.0), 2.0) * 0.6;
+  gl_FragColor = vec4(finish(col, vUv), 1.0);
+}
+`
+	},
+	{
+		id: "nebula",
+		category: "flow",
+		colorSlots: 3,
+		defaultColors: [
+			"#06040e",
+			"#4a3a6c",
+			"#8a5a7c"
+		],
+		params: [
+			param("scale"),
+			param("speed", .35),
+			param("distortion", .5),
+			param("grain", .03)
+		],
+		body: `
+void main(){
+  vec2 uv = coords() * u_scale;
+  float t = u_time * u_speed * 0.15;
+  vec2 q = vec2(fbm(uv + t), fbm(uv * 1.2 - t + 3.0));
+  float density = fbm(uv * 1.5 + q * (2.0 + u_distortion * 2.0));
+  density = pow(density, 2.0);
+  vec3 col = mix(u_color1, u_color2, density);
+  col = mix(col, u_color3, pow(density, 3.0) * 0.8);
+  float stars = step(0.99, hash21(floor(vUv * u_resolution.xy / 2.5)));
+  col += vec3(stars) * 0.35;
+  gl_FragColor = vec4(finish(col, vUv), 1.0);
+}
+`
+	},
+	{
+		id: "voronoi-crystal",
+		category: "geometric",
+		colorSlots: 3,
+		defaultColors: [
+			"#121a30",
+			"#3a5a82",
+			"#c4d0e0"
+		],
+		params: [
+			param("scale"),
+			param("speed", .35),
+			param("contrast", .4),
+			param("grain", .03)
+		],
+		body: `
+vec2 hash22(vec2 p){
+  p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));
+  return fract(sin(p) * 43758.5453);
+}
+void main(){
+  vec2 uv = coords() * u_scale * 3.0;
+  float t = u_time * u_speed * 0.3;
+  vec2 ip = floor(uv);
+  vec2 fp = fract(uv);
+  float f1 = 8.0;
+  float f2 = 8.0;
+  vec2 cellId = vec2(0.0);
+  for (int j = -1; j <= 1; j++){
+    for (int i = -1; i <= 1; i++){
+      vec2 n = vec2(float(i), float(j));
+      vec2 pnt = n + 0.5 + 0.4 * sin(t + 6.2831 * hash22(ip + n));
+      float d = length(pnt - fp);
+      if (d < f1){ f2 = f1; f1 = d; cellId = ip + n; }
+      else if (d < f2){ f2 = d; }
+    }
+  }
+  float facet = f2 - f1;
+  float cell = hash22(cellId).x;
+  vec3 col = mix(u_color1, u_color2, cell);
+  col = mix(col, u_color3, smoothstep(0.05, 0.0, facet) * mix(0.4, 0.7, u_contrast));
+  col += pow(max(0.0, 1.0 - f1), 4.0) * 0.1;
+  gl_FragColor = vec4(finish(col, vUv), 1.0);
+}
+`
+	},
+	{
+		id: "kaleidoscope",
+		category: "geometric",
+		colorSlots: 3,
+		defaultColors: [
+			"#1a1428",
+			"#7c5a6c",
+			"#b09a6a"
+		],
+		params: [
+			param("scale"),
+			param("speed", .35),
+			param("distortion", .4),
+			param("grain", .03)
+		],
+		body: `
+void main(){
+  vec2 uv = coords() * u_scale;
+  float t = u_time * u_speed * 0.3;
+  float r = length(uv);
+  float a = atan(uv.y, uv.x);
+  float seg = 6.0 + floor(u_distortion * 6.0);
+  a = mod(a, 6.2831 / seg);
+  a = abs(a - 3.14159 / seg);
+  vec2 p = vec2(cos(a), sin(a)) * r;
+  float pattern = fbm(p * 3.0 + t);
+  float m = 0.5 + 0.5 * sin(pattern * 6.2831 + r * 4.0 - t);
+  vec3 col = mix(u_color1, u_color2, m);
+  col = mix(col, u_color3, pow(m, 3.0) * 0.6);
+  gl_FragColor = vec4(finish(col, vUv), 1.0);
+}
+`
+	},
+	{
+		id: "dither-gradient",
+		category: "retro",
+		colorSlots: 3,
+		defaultColors: [
+			"#14202e",
+			"#7c4a54",
+			"#d4d0c8"
+		],
+		params: [
+			param("scale"),
+			param("speed", .35),
+			param("distortion", .35)
+		],
+		body: `
+float bayer2(vec2 a){ a = floor(a); return fract(dot(a, vec2(0.5, a.y * 0.75))); }
+float bayer4(vec2 a){ return bayer2(0.5 * a) * 0.25 + bayer2(a); }
+void main(){
+  vec2 uv = coords() * u_scale;
+  float t = u_time * u_speed * 0.2;
+  float g = fbm(uv * 1.5 + vec2(t, -t) * (0.5 + u_distortion));
+  float levels = 5.0;
+  float d = bayer4(gl_FragCoord.xy);
+  float q = floor(g * levels + d) / levels;
+  vec3 col = mix(u_color1, u_color2, clamp(q, 0.0, 1.0));
+  col = mix(col, u_color3, smoothstep(0.7, 1.0, q));
+  gl_FragColor = vec4(finish(col, vUv), 1.0);
+}
+`
+	},
+	{
+		id: "halftone",
+		category: "retro",
+		colorSlots: 3,
+		defaultColors: [
+			"#161616",
+			"#8a5a3a",
+			"#c4a06a"
+		],
+		params: [
+			param("scale"),
+			param("speed", .35),
+			param("distortion", .45)
+		],
+		body: `
+void main(){
+  vec2 uv = coords() * u_scale;
+  float t = u_time * u_speed * 0.2;
+  float g = fbm(uv * 1.5 + t);
+  vec2 gp = gl_FragCoord.xy / mix(22.0, 9.0, clamp(u_distortion, 0.0, 1.0));
+  vec2 cell = fract(gp) - 0.5;
+  float radius = g * 0.7;
+  float dot = smoothstep(radius, radius - 0.12, length(cell));
+  vec3 col = mix(u_color1, u_color2, g);
+  col = mix(col, u_color3, dot * 0.85);
+  gl_FragColor = vec4(finish(col, vUv), 1.0);
+}
+`
+	},
+	{
+		id: "dia-gradient",
+		category: "gradient",
+		colorSlots: 3,
+		defaultColors: [
+			"#FF9ECF",
+			"#A9C9FF",
+			"#FFF3A8"
+		],
+		params: [
+			param("bars"),
+			param("blur"),
+			param("peak"),
+			param("valley"),
+			param("speed", .3)
+		],
+		body: `
+void main(){
+  vec2 uv = vUv;
+  float t = u_time * u_speed * 0.15;
+  float cx = 0.5 + sin(t) * 0.04;
+  float peakShape = clamp(1.0 - abs(uv.x - cx) * 2.0, 0.0, 1.0);
+  peakShape = pow(peakShape, 0.85);
+  float profile = mix(u_valley, u_peak, peakShape);
+  float heightFromBottom = 1.0 - uv.y;
+  float h = heightFromBottom / max(profile, 0.02);
+  float bars = max(1.0, floor(u_bars));
+  float hb = h * bars;
+  float band = floor(hb);
+  float frac = hb - band;
+  float soft = mix(0.04, 0.5, clamp(u_blur, 0.0, 1.0));
+  float sm = smoothstep(0.5 - soft, 0.5 + soft, frac);
+  float hv = clamp((band + sm) / bars, 0.0, 1.0);
+  vec3 col;
+  if (hv < 0.33) col = mix(u_color1, u_color2, smoothstep(0.0, 0.33, hv));
+  else if (hv < 0.66) col = mix(u_color2, u_color3, smoothstep(0.33, 0.66, hv));
+  else col = mix(u_color3, vec3(1.0), smoothstep(0.66, 1.0, hv));
+  float above = smoothstep(1.0, 1.0 + soft * 0.5, h);
+  col = mix(col, vec3(1.0), above);
+  gl_FragColor = vec4(finish(col, vUv), 1.0);
+}
+`
+	}
+];
+const SHADER_PRESET_IDS = SHADER_PRESETS.map((preset) => preset.id);
+const SHADER_PARAM_KEYS = [
+	"scale",
+	"speed",
+	"distortion",
+	"grain",
+	"contrast",
+	"angle",
+	"dim",
+	"vignette",
+	"scrim",
+	"interactive",
+	"bars",
+	"blur",
+	"peak",
+	"valley"
+];
+/** 패턴과 무관하게 모든 프리셋에 공통 적용되는 마감(가독성) 파라미터 키. */
+const SHADER_OVERLAY_PARAM_KEYS = [
+	"dim",
+	"vignette",
+	"scrim"
+];
+const PRESET_BY_ID = new Map(SHADER_PRESETS.map((preset) => [preset.id, preset]));
+/** id로 프리셋 조회 (없으면 첫 프리셋 폴백). */
+function getShaderPreset(id) {
+	var _PRESET_BY_ID$get;
+	return (_PRESET_BY_ID$get = PRESET_BY_ID.get(id)) !== null && _PRESET_BY_ID$get !== void 0 ? _PRESET_BY_ID$get : SHADER_PRESETS[0];
+}
+/** 공유 프렐류드 + 프리셋 본문을 합친 완성 프래그먼트 셰이더 소스. */
+function getShaderFragment(preset) {
+	return `${SHADER_PRELUDE}\n${preset.body}`;
+}
+//#endregion
+//#region src/core/shader-surface.tsx
+/** 정지(`paused`) 프레임에 사용하는 고정 시간 — t=0의 밋밋함 회피. */
+const STATIC_TIME = 8;
+/** hex → 0..1 RGB. 잘못된 hex는 검정으로 폴백. */
+function toRgbFloat(hex) {
+	try {
+		const [r, g, b] = hexToSrgb(hex);
+		return [
+			r / 255,
+			g / 255,
+			b / 255
+		];
+	} catch (_unused) {
+		return [
+			0,
+			0,
+			0
+		];
+	}
+}
+function resolveColors(presetId, colors) {
+	var _source$, _ref, _source$2, _ref2, _ref3, _source$3;
+	const preset = getShaderPreset(presetId);
+	const source = colors && colors.length > 0 ? colors : preset.defaultColors;
+	return [
+		(_source$ = source[0]) !== null && _source$ !== void 0 ? _source$ : preset.defaultColors[0],
+		(_ref = (_source$2 = source[1]) !== null && _source$2 !== void 0 ? _source$2 : source[0]) !== null && _ref !== void 0 ? _ref : preset.defaultColors[1],
+		(_ref2 = (_ref3 = (_source$3 = source[2]) !== null && _source$3 !== void 0 ? _source$3 : source[1]) !== null && _ref3 !== void 0 ? _ref3 : source[0]) !== null && _ref2 !== void 0 ? _ref2 : preset.defaultColors[2]
+	];
+}
+function resolveParam(presetId, key, override) {
+	var _spec$default;
+	if (typeof override === "number" && Number.isFinite(override)) return override;
+	const spec = getShaderPreset(presetId).params.find((p) => p.key === key);
+	return (_spec$default = spec === null || spec === void 0 ? void 0 : spec.default) !== null && _spec$default !== void 0 ? _spec$default : SHADER_PARAM_FALLBACK[key];
+}
+function prefersReducedMotion() {
+	return typeof window !== "undefined" && window.matchMedia ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false;
+}
+const ShaderSurfaceComponent = forwardRef(function ShaderSurface({ preset, colors, scale, speed, distortion, grain, contrast, angle, dim, vignette, scrim, interactive, params, time, paused = false, dpr, className, style, "aria-hidden": ariaHidden = true }, ref) {
+	const containerRef = useRef(null);
+	const canvasRef = useRef(null);
+	const stateRef = useRef({
+		preset,
+		colors,
+		scale,
+		speed,
+		distortion,
+		grain,
+		contrast,
+		angle,
+		dim,
+		vignette,
+		scrim,
+		interactive,
+		params,
+		time,
+		paused
+	});
+	stateRef.current = {
+		preset,
+		colors,
+		scale,
+		speed,
+		distortion,
+		grain,
+		contrast,
+		angle,
+		dim,
+		vignette,
+		scrim,
+		interactive,
+		params,
+		time,
+		paused
+	};
+	const rendererRef = useRef(null);
+	const programRef = useRef(null);
+	const renderAtRef = useRef(null);
+	const loopRef = useRef(null);
+	const mouseRef = useRef([.5, .5]);
+	const fallbackBackground = useMemo(() => {
+		const [c1, c2, c3] = resolveColors(preset, colors);
+		return `linear-gradient(${resolveParam(preset, "angle", angle) + 120}deg, ${c1}, ${c2}, ${c3})`;
+	}, [
+		preset,
+		colors,
+		angle
+	]);
+	useImperativeHandle(ref, () => ({ capture: () => {
+		var _stateRef$current$tim;
+		const canvas = canvasRef.current;
+		if (!canvas || !renderAtRef.current || !programRef.current) return null;
+		const now = stateRef.current.paused ? (_stateRef$current$tim = stateRef.current.time) !== null && _stateRef$current$tim !== void 0 ? _stateRef$current$tim : STATIC_TIME : performance.now() / 1e3;
+		renderAtRef.current(now);
+		try {
+			return canvas.toDataURL("image/png");
+		} catch (_unused2) {
+			return null;
+		}
+	} }), []);
+	useEffect(() => {
+		const container = containerRef.current;
+		const canvas = canvasRef.current;
+		if (!container || !canvas) return;
+		let renderer;
+		try {
+			renderer = new Renderer({
+				canvas,
+				dpr: dpr !== null && dpr !== void 0 ? dpr : typeof window !== "undefined" ? Math.min(window.devicePixelRatio || 1, 2) : 1,
+				alpha: true,
+				premultipliedAlpha: false
+			});
+		} catch (_unused3) {
+			return;
+		}
+		const gl = renderer.gl;
+		rendererRef.current = {
+			renderer,
+			gl
+		};
+		const resize = () => {
+			const rect = container.getBoundingClientRect();
+			renderer.setSize(Math.max(1, rect.width), Math.max(1, rect.height));
+		};
+		resize();
+		const renderAt = (timeSeconds) => {
+			const current = programRef.current;
+			if (!current) return;
+			const s = stateRef.current;
+			const [c1, c2, c3] = resolveColors(s.preset, s.colors);
+			const u = current.program.uniforms;
+			const val = (key, override) => {
+				var _s$params;
+				return resolveParam(s.preset, key, override !== null && override !== void 0 ? override : (_s$params = s.params) === null || _s$params === void 0 ? void 0 : _s$params[key]);
+			};
+			u.u_time.value = timeSeconds;
+			u.u_resolution.value = [gl.canvas.width, gl.canvas.height];
+			u.u_scale.value = val("scale", s.scale);
+			u.u_speed.value = val("speed", s.speed);
+			u.u_distortion.value = val("distortion", s.distortion);
+			u.u_grain.value = val("grain", s.grain);
+			u.u_contrast.value = val("contrast", s.contrast);
+			u.u_angle.value = val("angle", s.angle);
+			u.u_dim.value = val("dim", s.dim);
+			u.u_vignette.value = val("vignette", s.vignette);
+			u.u_scrim.value = val("scrim", s.scrim);
+			u.u_interactive.value = val("interactive", s.interactive);
+			u.u_bars.value = val("bars", void 0);
+			u.u_blur.value = val("blur", void 0);
+			u.u_peak.value = val("peak", void 0);
+			u.u_valley.value = val("valley", void 0);
+			u.u_mouse.value = mouseRef.current;
+			u.u_color1.value = toRgbFloat(c1);
+			u.u_color2.value = toRgbFloat(c2);
+			u.u_color3.value = toRgbFloat(c3);
+			renderer.render({ scene: current.mesh });
+		};
+		renderAtRef.current = renderAt;
+		const staticTime = () => {
+			var _stateRef$current$tim2;
+			return (_stateRef$current$tim2 = stateRef.current.time) !== null && _stateRef$current$tim2 !== void 0 ? _stateRef$current$tim2 : STATIC_TIME;
+		};
+		const reduced = prefersReducedMotion();
+		let inView = true;
+		const isAnimating = () => !stateRef.current.paused && !reduced && inView;
+		let raf = 0;
+		let startTime = performance.now();
+		const loop = (nowMs) => {
+			renderAt((nowMs - startTime) / 1e3);
+			raf = requestAnimationFrame(loop);
+		};
+		const start = () => {
+			if (raf) return;
+			startTime = performance.now();
+			raf = requestAnimationFrame(loop);
+		};
+		const stop = () => {
+			if (raf) cancelAnimationFrame(raf);
+			raf = 0;
+		};
+		loopRef.current = {
+			start,
+			stop,
+			isAnimating
+		};
+		const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+			resize();
+			if (!isAnimating()) renderAt(staticTime());
+		}) : null;
+		resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(container);
+		const intersectionObserver = typeof IntersectionObserver !== "undefined" ? new IntersectionObserver((entries) => {
+			var _entries$0$isIntersec, _entries$;
+			inView = (_entries$0$isIntersec = (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : _entries$.isIntersecting) !== null && _entries$0$isIntersec !== void 0 ? _entries$0$isIntersec : true;
+			if (inView && isAnimating()) start();
+			else stop();
+		}, { threshold: 0 }) : null;
+		intersectionObserver === null || intersectionObserver === void 0 || intersectionObserver.observe(container);
+		const handlePointer = (event) => {
+			const rect = container.getBoundingClientRect();
+			mouseRef.current = [(event.clientX - rect.left) / Math.max(1, rect.width), (event.clientY - rect.top) / Math.max(1, rect.height)];
+			const s = stateRef.current;
+			if (!isAnimating() && resolveParam(s.preset, "interactive", s.interactive) > 0) renderAt(staticTime());
+		};
+		container.addEventListener("pointermove", handlePointer);
+		if (isAnimating()) start();
+		return () => {
+			stop();
+			resizeObserver === null || resizeObserver === void 0 || resizeObserver.disconnect();
+			intersectionObserver === null || intersectionObserver === void 0 || intersectionObserver.disconnect();
+			container.removeEventListener("pointermove", handlePointer);
+			loopRef.current = null;
+			renderAtRef.current = null;
+			rendererRef.current = null;
+		};
+	}, [dpr]);
+	useEffect(() => {
+		var _renderAtRef$current, _stateRef$current$tim3;
+		const engine = rendererRef.current;
+		if (!engine) return;
+		const { gl } = engine;
+		const presetDef = getShaderPreset(preset);
+		const geometry = new Triangle(gl);
+		const program = new Program(gl, {
+			vertex: SHADER_VERTEX,
+			fragment: getShaderFragment(presetDef),
+			uniforms: {
+				u_time: { value: 0 },
+				u_resolution: { value: [1, 1] },
+				u_scale: { value: 1 },
+				u_speed: { value: 1 },
+				u_distortion: { value: .5 },
+				u_grain: { value: 0 },
+				u_contrast: { value: .5 },
+				u_angle: { value: 0 },
+				u_dim: { value: 0 },
+				u_vignette: { value: 0 },
+				u_scrim: { value: 0 },
+				u_mouse: { value: [.5, .5] },
+				u_interactive: { value: 0 },
+				u_bars: { value: 19 },
+				u_blur: { value: .29 },
+				u_peak: { value: .98 },
+				u_valley: { value: .55 },
+				u_color1: { value: [
+					0,
+					0,
+					0
+				] },
+				u_color2: { value: [
+					0,
+					0,
+					0
+				] },
+				u_color3: { value: [
+					0,
+					0,
+					0
+				] }
+			}
+		});
+		const mesh = new Mesh(gl, {
+			geometry,
+			program
+		});
+		programRef.current = {
+			program,
+			mesh,
+			geometry
+		};
+		const loop = loopRef.current;
+		if (loop === null || loop === void 0 ? void 0 : loop.isAnimating()) loop.start();
+		else (_renderAtRef$current = renderAtRef.current) === null || _renderAtRef$current === void 0 || _renderAtRef$current.call(renderAtRef, (_stateRef$current$tim3 = stateRef.current.time) !== null && _stateRef$current$tim3 !== void 0 ? _stateRef$current$tim3 : STATIC_TIME);
+		return () => {
+			programRef.current = null;
+			program.remove();
+			geometry.remove();
+		};
+	}, [preset]);
+	useEffect(() => {
+		const loop = loopRef.current;
+		if (!loop) return;
+		if (loop.isAnimating()) loop.start();
+		else {
+			var _renderAtRef$current2, _stateRef$current$tim4;
+			loop.stop();
+			(_renderAtRef$current2 = renderAtRef.current) === null || _renderAtRef$current2 === void 0 || _renderAtRef$current2.call(renderAtRef, (_stateRef$current$tim4 = stateRef.current.time) !== null && _stateRef$current$tim4 !== void 0 ? _stateRef$current$tim4 : STATIC_TIME);
+		}
+	}, [
+		paused,
+		colors,
+		scale,
+		speed,
+		distortion,
+		grain,
+		contrast,
+		angle,
+		dim,
+		vignette,
+		scrim,
+		interactive,
+		params,
+		time
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		"aria-hidden": ariaHidden,
+		className: cn("relative overflow-hidden", className),
+		style: _objectSpread2({ background: fallbackBackground }, style),
+		children: /* @__PURE__ */ jsx("canvas", {
+			ref: canvasRef,
+			className: "absolute inset-0 block h-full w-full"
+		})
+	});
+});
+ShaderSurfaceComponent.displayName = "ShaderSurface";
+const ShaderSurface = ShaderSurfaceComponent;
+//#endregion
+export { CardHeader as $, DropdownTrigger as A, Avatar as B, LoadingOverlay as C, DropdownItem as D, DropdownContent as E, formatOptTime as F, SkeletonCard as G, Textarea as H, StepBuilder as I, Switch as J, SkeletonTable as K, Meter$1 as L, formatOptDateTime as M, formatOptNumber as N, DropdownMenu as O, formatOptShortDate as P, CardFooter as Q, CircularProgress as R, BlockLayout as S, RadioGroup as T, Skeleton as U, AvatarGroup as V, SkeletonAvatar as W, CardContent as X, Card as Y, CardDescription as Z, Section as _, SHADER_PRESETS as a, AccordionTrigger$1 as at, PageHeader as b, getShaderPreset as c, OtpField as ct, DrawerPanel as d, Text as dt, CardTitle as et, DrawerRoot as f, ResizablePanelGroup as g, ResizablePanel as h, SHADER_PARAM_KEYS as i, AccordionRoot$1 as it, ConditionBuilder as j, DropdownSeparator as k, VirtualList as l, Separator$2 as lt, ResizableHandle as m, SHADER_OVERLAY_PARAM_KEYS as n, AccordionContent$1 as nt, SHADER_PRESET_IDS as o, Toggle$1 as ot, Logo as p, SkeletonText as q, SHADER_PARAM_FALLBACK as r, AccordionItem$1 as rt, getShaderFragment as s, ToggleGroup$1 as st, ShaderSurface as t, Breadcrumb as tt, DrawerClose as u, Heading as ut, Container as v, Radio as w, createBlock as x, ScrollArea as y, Progress as z };
+
+//# sourceMappingURL=shader-surface-BUPZ0P-n.js.map