@reopt-ai/opt-ui 1.5.0 → 1.6.0

package/dist/shader-surface-DxLLfrE6.cjs

@@ -0,0 +1,4108 @@
+"use client";
+const require_pagination = require("./pagination-Uv3CnGJz.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+react = require_pagination.__toESM(react, 1);
+let _reopt_ai_opt_ui_primitives = require("@reopt-ai/opt-ui-primitives");
+let lucide_react = require("lucide-react");
+let react_resizable_panels = require("react-resizable-panels");
+let ogl = require("ogl");
+let _reopt_ai_opt_palette = require("@reopt-ai/opt-palette");
+//#region src/core/text.tsx
+const _excluded$18 = [
+	"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 = require_pagination._objectWithoutProperties(_ref, _excluded$18);
+	return (0, react.createElement)(as !== null && as !== void 0 ? as : "span", require_pagination._objectSpread2(require_pagination._objectSpread2({}, props), {}, {
+		className: require_pagination.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
+	}), children);
+}
+//#endregion
+//#region src/core/heading.tsx
+const _excluded$17 = [
+	"level",
+	"variant",
+	"className",
+	"children"
+];
+/** Semantic heading with independently selectable visual hierarchy. */
+function Heading(_ref) {
+	let { level = 2, variant = `heading-${level}`, className, children } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded$17);
+	const Component = {
+		1: "h1",
+		2: "h2",
+		3: "h3",
+		4: "h4",
+		5: "h5",
+		6: "h6"
+	}[level];
+	return (0, react.createElement)(Component, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.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$1({ orientation = "horizontal", decorative = false, children, className }) {
+	if (orientation === "horizontal" && children != null) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_pagination.cn("gap-element flex items-center", className),
+		"data-opt-id": "7PWJS",
+		"data-opt-slug": "separator.Separator",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Separator, {
+				decorative: true,
+				orientation: "horizontal",
+				className: "bg-border h-px flex-1"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-text-tertiary shrink-0 text-xs",
+				children
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Separator, {
+				decorative: true,
+				orientation: "horizontal",
+				className: "bg-border h-px flex-1"
+			})
+		]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Separator, {
+		orientation,
+		decorative,
+		className: require_pagination.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$1.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] = require_pagination.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);
+				break;
+			default: break;
+		}
+	}, [
+		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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_pagination.cn("flex flex-col gap-1.5", className),
+		"data-opt-id": "0083Q",
+		"data-opt-slug": "otp-field.OtpField",
+		children: [
+			label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "text-sm font-medium text-text-primary",
+				id: labelId,
+				children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.RequiredMark, {})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				role: "group",
+				"aria-label": groupAriaLabel,
+				"aria-labelledby": groupLabelledBy,
+				"aria-describedby": require_pagination.getDescribedBy(fieldId, error, hint),
+				className: "gap-element flex items-center",
+				children: cells.map((cell, i) => /* @__PURE__ */ (0, react_jsx_runtime.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: require_pagination.cn(require_pagination.OPT_INPUT, "h-12 w-10 text-center text-lg font-medium", hasError && "border-danger focus-visible:outline-danger")
+				}, i))
+			}),
+			name && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "hidden",
+				name,
+				value,
+				disabled
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FieldMessages, {
+				id: fieldId,
+				error,
+				hint
+			})
+		]
+	});
+}
+OtpField.displayName = "OtpField";
+//#endregion
+//#region src/core/toggle.tsx
+const _excluded$16 = [
+	"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 = require_pagination.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", require_pagination.OPT_FOCUS_VISIBLE);
+/** A two-state (pressed) button. Use standalone or inside `ToggleGroup`. */
+function Toggle(_ref) {
+	let { size = "md", className, children } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded$16);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Toggle, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn(toggleBase, sizeStyles$5[size], className) }, props), {}, {
+		"data-opt-id": "GFCMY",
+		"data-opt-slug": "toggle.Toggle",
+		children
+	}));
+}
+Toggle.displayName = "Toggle";
+/** A set of related toggles with shared selection and keyboard navigation. */
+function ToggleGroup(_ref2) {
+	let { className, children, orientation = "horizontal" } = _ref2, props = require_pagination._objectWithoutProperties(_ref2, _excluded2$8);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.ToggleGroup, require_pagination._objectSpread2(require_pagination._objectSpread2({
+		orientation,
+		"aria-orientation": orientation,
+		className: require_pagination.cn("inline-flex gap-1", orientation === "vertical" ? "flex-col" : "flex-row", className)
+	}, props), {}, {
+		"data-opt-id": "47J37",
+		"data-opt-slug": "toggle.ToggleGroup",
+		children
+	}));
+}
+ToggleGroup.displayName = "ToggleGroup";
+//#endregion
+//#region src/core/accordion.tsx
+const _excluded$15 = ["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 ${require_pagination.OPT_FOCUS} disabled:cursor-not-allowed disabled:opacity-50`;
+const contentClass = `overflow-hidden text-sm text-text-secondary ${require_pagination.OPT_ANIMATE_ENTER_EXIT}`;
+/** A vertically stacked set of expandable panels (single or multiple open). */
+function AccordionRoot(_ref) {
+	let { className } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded$15);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_pagination.cn("border-border border-y", className),
+		"data-opt-id": "CSBA9",
+		"data-opt-slug": "accordion.AccordionRoot",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.AccordionRoot, require_pagination._objectSpread2({}, props))
+	});
+}
+AccordionRoot.displayName = "AccordionRoot";
+/** A single accordion entry, identified by its `value`. */
+function AccordionItem(_ref2) {
+	let { className } = _ref2, props = require_pagination._objectWithoutProperties(_ref2, _excluded2$7);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.AccordionItem, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn("border-border border-b last:border-b-0", className) }, props), {}, {
+		"data-opt-id": "JTY9M",
+		"data-opt-slug": "accordion.AccordionItem"
+	}));
+}
+AccordionItem.displayName = "AccordionItem";
+/** The clickable header that expands/collapses its panel. */
+function AccordionTrigger(_ref3) {
+	let { className, children } = _ref3, props = require_pagination._objectWithoutProperties(_ref3, _excluded3$4);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.AccordionTrigger, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn(triggerClass, className) }, props), {}, {
+		"data-opt-id": "CWJZZ",
+		"data-opt-slug": "accordion.AccordionTrigger",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "flex-1",
+			children
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.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.displayName = "AccordionTrigger";
+/** The collapsible panel body associated with a trigger. */
+function AccordionContent(_ref4) {
+	let { className, children } = _ref4, props = require_pagination._objectWithoutProperties(_ref4, _excluded4$3);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.AccordionContent, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn(contentClass, className) }, props), {}, {
+		"data-opt-id": "J98AG",
+		"data-opt-slug": "accordion.AccordionContent",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "pb-4",
+			children
+		})
+	}));
+}
+AccordionContent.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__ */ (0, react_jsx_runtime.jsx)("nav", {
+		"aria-label": ariaLabel,
+		className: require_pagination.cn("flex items-center gap-1 px-1.5 text-sm", className),
+		"data-opt-id": "3FR0Y",
+		"data-opt-slug": "breadcrumb.Breadcrumb",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+			className: "flex items-center gap-1",
+			children: items.map((item, index) => {
+				const isLast = index === items.length - 1;
+				const linkClassName = require_pagination.cn(`flex items-center gap-1.5 rounded-sm ${require_pagination.OPT_FOCUS} transition-colors`, item.disabled ? `${require_pagination.OPT_TEXT_TERTIARY} cursor-not-allowed` : `${require_pagination.OPT_TEXT_SECONDARY} hover:text-text-primary cursor-pointer`);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+					className: "flex items-center gap-1",
+					children: isLast ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						"aria-current": "page",
+						className: `flex items-center gap-1.5 font-medium ${require_pagination.OPT_TEXT_PRIMARY}`,
+						children: [item.icon, item.label]
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [item.href ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						disabled: item.disabled,
+						"aria-label": interpolate(require_pagination.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__ */ (0, react_jsx_runtime.jsx)("span", {
+						"aria-hidden": "true",
+						className: require_pagination.OPT_TEXT_TERTIARY,
+						children: separator
+					})] })
+				}, item.id);
+			})
+		})
+	});
+}
+//#endregion
+//#region src/core/card.tsx
+const _excluded$14 = [
+	"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 = require_pagination._objectWithoutProperties(_ref, _excluded$14);
+	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__ */ (0, react_jsx_runtime.jsx)("div", require_pagination._objectSpread2(require_pagination._objectSpread2(require_pagination._objectSpread2({}, props), {}, { className: require_pagination.cn("rounded-xl", variant === "default" && require_pagination.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 = require_pagination._objectWithoutProperties(_ref2, _excluded2$6);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.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 = require_pagination._objectWithoutProperties(_ref3, _excluded3$3);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn(`text-lg font-semibold ${require_pagination.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 = require_pagination._objectWithoutProperties(_ref4, _excluded4$2);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn(`text-sm ${require_pagination.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 = require_pagination._objectWithoutProperties(_ref5, _excluded5);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.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 = require_pagination._objectWithoutProperties(_ref6, _excluded6);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.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/input.tsx
+const _excluded$13 = [
+	"label",
+	"error",
+	"hint",
+	"leftIcon",
+	"rightIcon",
+	"fullWidth",
+	"size",
+	"required",
+	"className",
+	"id"
+];
+const inputSizeStyles = require_pagination.OPT_INPUT_SIZE;
+const Input = (0, react.forwardRef)((_ref, ref) => {
+	var _useInputId;
+	let { label, error, hint, leftIcon, rightIcon, fullWidth = false, size = "md", required, className, id } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded$13);
+	const fallbackId = (0, react.useId)().replace(/:/g, "");
+	const inputId = (_useInputId = require_pagination.useInputId(id, label, "input")) !== null && _useInputId !== void 0 ? _useInputId : `input-${fallbackId}`;
+	const hasError = Boolean(error);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_pagination.cn("flex flex-col gap-1.5", fullWidth && "w-full"),
+		"data-opt-id": "7BY1Q",
+		"data-opt-slug": "input.Input",
+		children: [
+			label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				htmlFor: inputId,
+				className: "text-text-primary text-sm font-medium",
+				children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.RequiredMark, {})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "relative",
+				children: [
+					leftIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-text-tertiary pointer-events-none absolute top-1/2 left-3 -translate-y-1/2",
+						children: leftIcon
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", require_pagination._objectSpread2({
+						ref,
+						id: inputId,
+						className: require_pagination.cn(require_pagination.OPT_INPUT, inputSizeStyles[size], leftIcon && (size === "sm" ? "pl-8" : "pl-10"), rightIcon && (size === "sm" ? "pr-8" : "pr-10"), hasError && "border-danger focus-visible:outline-danger", !fullWidth && "w-auto", className),
+						"aria-invalid": hasError,
+						"aria-required": required,
+						"aria-describedby": require_pagination.getDescribedBy(inputId, error, hint),
+						required
+					}, props)),
+					rightIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-text-tertiary pointer-events-none absolute top-1/2 right-3 -translate-y-1/2",
+						children: rightIcon
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FieldMessages, {
+				id: inputId,
+				error,
+				hint
+			})
+		]
+	});
+});
+Input.displayName = "Input";
+//#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 = (0, react.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 = require_pagination._objectWithoutProperties(_ref, _excluded$12);
+	const fallbackId = (0, react.useId)();
+	const switchId = (_useInputId = require_pagination.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] = (0, react.useState)(defaultChecked);
+	const checked = isControlled ? controlledChecked : internalChecked;
+	const handleClick = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_pagination.cn("flex flex-col gap-1.5", className),
+		"data-opt-id": "51Z9R",
+		"data-opt-slug": "switch.Switch",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-start gap-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", require_pagination._objectSpread2(require_pagination._objectSpread2({
+				ref,
+				type: "button",
+				role: "switch",
+				id: switchId,
+				"aria-checked": checked,
+				"aria-label": switchAriaLabel,
+				"aria-labelledby": switchLabelledBy,
+				disabled,
+				className: require_pagination.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", require_pagination.OPT_FOCUS_VISIBLE),
+				"aria-invalid": hasError,
+				"aria-required": required,
+				"aria-describedby": require_pagination.getDescribedBy(switchId, error, hintText),
+				onClick: handleClick
+			}, props), {}, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_pagination.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col",
+				children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					id: labelId,
+					className: require_pagination.cn("text-text-primary text-sm font-medium", disabled && "opacity-50"),
+					children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.RequiredMark, {})]
+				}), hintText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					id: `${switchId}-hint`,
+					className: require_pagination.cn("text-text-tertiary text-sm", disabled && "opacity-50"),
+					children: hintText
+				})]
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.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 = require_pagination._objectWithoutProperties(_ref, _excluded$11);
+	const baseClass = require_pagination.cn("bg-bg-subtle", animated && "animate-pulse", variantStyles$2[variant], className);
+	const computedStyle = require_pagination._objectSpread2({
+		width: typeof width === "number" ? `${width}px` : width,
+		height: typeof height === "number" ? `${height}px` : height
+	}, style);
+	if (variant === "text" && lines > 1) return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", require_pagination._objectSpread2({
+			className: require_pagination.cn(baseClass, i === lines - 1 && "w-4/5"),
+			style: i === lines - 1 ? void 0 : computedStyle
+		}, props), i)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "sr-only",
+			children: "Loading..."
+		})]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_pagination._objectSpread2(require_pagination._objectSpread2({
+		className: baseClass,
+		style: computedStyle,
+		role: "status",
+		"aria-label": "Loading"
+	}, props), {}, {
+		"data-opt-id": "EJT87",
+		"data-opt-slug": "skeleton.Skeleton",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "sr-only",
+			children: "Loading..."
+		})
+	}));
+}
+/** Renders the skeleton text component. */
+function SkeletonText(_ref2) {
+	let { lines = 3, className } = _ref2, props = require_pagination._objectWithoutProperties(_ref2, _excluded2$5);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, require_pagination._objectSpread2(require_pagination._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 = require_pagination._objectWithoutProperties(_ref3, _excluded3$2);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, require_pagination._objectSpread2(require_pagination._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 = require_pagination._objectWithoutProperties(_ref4, _excluded4$1);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn("gap-group flex flex-col", className) }, props), {}, {
+		"data-opt-id": "34V5D",
+		"data-opt-slug": "skeleton.SkeletonCard",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+				variant: "rectangular",
+				height: 120
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+				variant: "text",
+				width: "60%"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+				variant: "text",
+				lines: 2
+			})
+		]
+	}));
+}
+/** Renders the skeleton table component. */
+function SkeletonTable({ rows = 5, columns = 4, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_pagination.cn("gap-element flex flex-col", className),
+		role: "status",
+		"aria-label": "Loading table",
+		"data-opt-id": "3KEDN",
+		"data-opt-slug": "skeleton.SkeletonTable",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "border-border-subtle gap-group flex border-b pb-2",
+				children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+					variant: "text",
+					className: "flex-1",
+					height: 16
+				}, i))
+			}),
+			Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "gap-group flex py-2",
+				children: Array.from({ length: columns }).map((_, colIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+					variant: "text",
+					className: "flex-1",
+					height: 14
+				}, colIndex))
+			}, rowIndex)),
+			/* @__PURE__ */ (0, react_jsx_runtime.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 = require_pagination.OPT_TEXTAREA_SIZE;
+const resizeStyles = {
+	none: "resize-none",
+	vertical: "resize-y",
+	horizontal: "resize-x",
+	both: "resize"
+};
+const Textarea = (0, react.forwardRef)((_ref, ref) => {
+	var _useInputId;
+	let { label, error, hint, fullWidth = false, required, resize = "vertical", size = "md", className, id, rows = 4 } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded$10);
+	const fallbackId = (0, react.useId)().replace(/:/g, "");
+	const textareaId = (_useInputId = require_pagination.useInputId(id, label, "textarea")) !== null && _useInputId !== void 0 ? _useInputId : `textarea-${fallbackId}`;
+	const hasError = Boolean(error);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_pagination.cn("flex flex-col gap-1.5", fullWidth && "w-full"),
+		"data-opt-id": "6T58H",
+		"data-opt-slug": "textarea.Textarea",
+		children: [
+			label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				htmlFor: textareaId,
+				className: "text-text-primary text-sm font-medium",
+				children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.RequiredMark, {})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", require_pagination._objectSpread2({
+				ref,
+				id: textareaId,
+				rows,
+				className: require_pagination.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", require_pagination.OPT_FOCUS_VISIBLE, textareaSizeStyles[size], resizeStyles[resize], hasError && "border-danger focus-visible:outline-danger", !fullWidth && "w-auto", className),
+				"aria-invalid": hasError,
+				"aria-describedby": require_pagination.getDescribedBy(textareaId, error, hint)
+			}, props)),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.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" ? react.useLayoutEffect : react.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] = (0, react.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 = require_pagination._objectWithoutProperties(_ref, _excluded$9);
+	const loadingStatus = useImageLoadingStatus(src, {
+		srcSet,
+		sizes,
+		crossOrigin,
+		referrerPolicy
+	});
+	(0, react.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "font-medium text-white",
+		children: initials
+	});
+	else avatarContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		className: "text-text-tertiary h-3/5 w-3/5",
+		fill: "currentColor",
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("span", require_pagination._objectSpread2(require_pagination._objectSpread2({
+		role: "img",
+		"aria-label": avatarLabel,
+		className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_pagination.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 = require_pagination._objectWithoutProperties(_ref5, _excluded2$4);
+	const avatars = Array.isArray(children) ? children : [children];
+	const visibleAvatars = avatars.slice(0, max);
+	const remainingCount = avatars.length - max;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn("flex", className) }, props), {}, {
+		"data-opt-id": "MVB53",
+		"data-opt-slug": "avatar.AvatarGroup",
+		children: [visibleAvatars.map((child, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "ring-surface relative -ml-2 inline-block rounded-full ring-2 first:ml-0",
+			children: child
+		}, index)), remainingCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: require_pagination.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 = require_pagination._objectWithoutProperties(_ref, _excluded$8);
+	const progress = indeterminate || value === void 0 ? null : getProgressValue(value, max);
+	const shouldRenderHeader = Boolean(label) || showLabel && progress;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn("w-full", className) }, props), {}, {
+		"data-opt-id": "Y5N8R",
+		"data-opt-slug": "progress.Progress",
+		children: [shouldRenderHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "mb-1.5 flex items-center justify-between text-sm",
+			children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-text-primary font-medium",
+				children: label
+			}), showLabel && progress && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-text-tertiary",
+				children: progress.valueText
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_pagination.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 = require_pagination._objectWithoutProperties(_ref2, _excluded2$3);
+	const labelId = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative inline-flex items-center justify-center",
+		"data-opt-id": "Q69KP",
+		"data-opt-slug": "progress.CircularProgress",
+		children: [
+			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				id: labelId,
+				className: "sr-only",
+				children: label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", require_pagination._objectSpread2(require_pagination._objectSpread2({
+				width: size,
+				height: size,
+				className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: size / 2,
+				cy: size / 2,
+				r: radius,
+				fill: "none",
+				strokeWidth,
+				className: "stroke-border-subtle"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: size / 2,
+				cy: size / 2,
+				r: radius,
+				fill: "none",
+				strokeWidth,
+				strokeLinecap: "round",
+				className: require_pagination.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__ */ (0, react_jsx_runtime.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(_ref) {
+	let { value, min = 0, max = 100, size = "md", variant = "default", showValue = false, label, getValueLabel, className } = _ref, props = require_pagination._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__ */ (0, react_jsx_runtime.jsxs)("div", require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn("w-full", className) }, props), {}, {
+		"data-opt-id": "G01TE",
+		"data-opt-slug": "meter.Meter",
+		children: [(showValue || label) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "mb-1.5 flex items-center justify-between text-sm",
+			children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-text-primary font-medium",
+				children: label
+			}), showValue && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "text-text-tertiary",
+				children: [Math.round(percentage), "%"]
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Meter, {
+			value: clamped,
+			min,
+			max,
+			getValueLabel,
+			"aria-label": label !== null && label !== void 0 ? label : `${Math.round(percentage)}%`,
+			className: require_pagination.cn("bg-bg-subtle w-full overflow-hidden rounded-full", sizeStyles$1[size]),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_pagination.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] = (0, react.useState)(null);
+	const nextStepIdRef = (0, react.useRef)(1);
+	const createStepId = (0, react.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 = (0, react.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 = (0, react.useCallback)((id) => {
+		onChange(steps.filter((s) => s.id !== id));
+		if (editingId === id) setEditingId(null);
+	}, [
+		steps,
+		onChange,
+		editingId
+	]);
+	const updateStep = (0, react.useCallback)((id, updates) => {
+		onChange(steps.map((s) => s.id === id ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, s), updates) : s));
+	}, [steps, onChange]);
+	const moveStep = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-sm font-medium text-text-primary",
+				children: label
+			}),
+			steps.map((step, index) => {
+				var _step$description;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: require_pagination.cn(require_pagination.OPT_SURFACE, require_pagination.OPT_BORDER, "flex items-start gap-3 p-3"),
+					role: "listitem",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "min-w-0 flex-1",
+							children: editingId === step.id ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex flex-col gap-2",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.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: require_pagination.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", require_pagination.OPT_TEXT_PRIMARY, require_pagination.OPT_FOCUS_VISIBLE),
+										"aria-label": "Step label",
+										autoFocus: true
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.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: require_pagination.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", require_pagination.OPT_TEXT_PRIMARY, "placeholder:text-text-tertiary", require_pagination.OPT_FOCUS_VISIBLE),
+										"aria-label": "Step description"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Button, {
+										variant: "ghost",
+										size: "sm",
+										onClick: () => setEditingId(null),
+										children: "Done"
+									})
+								]
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: "w-full text-left",
+								onClick: () => setEditingId(step.id),
+								"aria-label": `Edit ${step.label}`,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: require_pagination.cn(require_pagination.OPT_TEXT_PRIMARY, "text-sm font-medium"),
+									children: step.label
+								}), step.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: require_pagination.cn("text-text-secondary", "mt-0.5 block text-xs"),
+									children: step.description
+								})]
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex flex-shrink-0 items-center gap-1",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									onClick: () => moveStep(index, -1),
+									disabled: index === 0,
+									className: require_pagination.cn("rounded p-1 text-sm", require_pagination.OPT_TEXT_TERTIARY, "hover:bg-bg-subtle", "disabled:opacity-30", require_pagination.OPT_FOCUS_VISIBLE),
+									"aria-label": "Move up",
+									children: "▲"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									onClick: () => moveStep(index, 1),
+									disabled: index === steps.length - 1,
+									className: require_pagination.cn("rounded p-1 text-sm", require_pagination.OPT_TEXT_TERTIARY, "hover:bg-bg-subtle", "disabled:opacity-30", require_pagination.OPT_FOCUS_VISIBLE),
+									"aria-label": "Move down",
+									children: "▼"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									onClick: () => removeStep(step.id),
+									className: require_pagination.cn("text-danger-fg hover:bg-danger-subtle rounded p-1 text-sm", require_pagination.OPT_FOCUS_VISIBLE),
+									"aria-label": `Remove ${step.label}`,
+									children: "✕"
+								})
+							]
+						})
+					]
+				}, step.id);
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.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 = 540 * 60 * 1e3;
+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 = (0, react.useCallback)(() => collectConditionBuilderIds(groups), [groups]);
+	const localIdScope = react.useMemo(() => ({
+		nextGroupIdRef,
+		nextConditionIdRef,
+		getReservedIds: getLocalReservedIds
+	}), [getLocalReservedIds]);
+	const idScope = inheritedIdScope !== null && inheritedIdScope !== void 0 ? inheritedIdScope : localIdScope;
+	const createGroupId = (0, react.useCallback)((suffix = "") => {
+		const { groupIds } = idScope.getReservedIds();
+		let id = "";
+		do
+			id = `group-${idScope.nextGroupIdRef.current++}${suffix}`;
+		while (groupIds.has(id));
+		return id;
+	}, [idScope]);
+	const createConditionId = (0, react.useCallback)((suffix = "") => {
+		const { conditionIds } = idScope.getReservedIds();
+		let id = "";
+		do
+			id = `cond-${idScope.nextConditionIdRef.current++}${suffix}`;
+		while (conditionIds.has(id));
+		return id;
+	}, [idScope]);
+	(0, react.useEffect)(() => {
+		onPreview === null || onPreview === void 0 || onPreview(groups);
+	}, [groups, onPreview]);
+	const addGroup = (0, react.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 = (0, react.useCallback)((groupId) => {
+		onChange(groups.filter((g) => g.id !== groupId));
+	}, [groups, onChange]);
+	const updateGroupLogic = (0, react.useCallback)((groupId, logic) => {
+		onChange(groups.map((g) => g.id === groupId ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, g), {}, { logic }) : g));
+	}, [groups, onChange]);
+	const addCondition = (0, react.useCallback)((groupId) => {
+		onChange(groups.map((g) => {
+			var _properties$2;
+			return g.id === groupId ? require_pagination._objectSpread2(require_pagination._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 = (0, react.useCallback)((groupId, condId) => {
+		onChange(groups.map((g) => g.id === groupId ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, g), {}, { conditions: g.conditions.filter((c) => c.id !== condId) }) : g));
+	}, [groups, onChange]);
+	const updateCondition = (0, react.useCallback)((groupId, condId, updates) => {
+		onChange(groups.map((g) => g.id === groupId ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, g), {}, { conditions: g.conditions.map((c) => c.id === condId ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, c), updates) : c) }) : g));
+	}, [groups, onChange]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConditionBuilderIdScopeContext.Provider, {
+		value: idScope,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-sm font-medium text-text-primary",
+					children: label
+				}),
+				groups.map((group, groupIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [groupIndex > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "my-2 flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-border-subtle h-px flex-1" }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-warning-fg text-xs font-semibold uppercase",
+							children: "OR"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-border-subtle h-px flex-1" })
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: require_pagination.cn(require_pagination.OPT_SURFACE, require_pagination.OPT_BORDER, "p-3"),
+					role: "group",
+					"aria-label": `Condition group ${groupIndex + 1}`,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "mb-2 flex items-center justify-between",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: require_pagination.cn(require_pagination.OPT_TEXT_SECONDARY, "text-xs font-medium"),
+										children: "Match"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+										value: group.logic,
+										onChange: (e) => {
+											const v = e.target.value;
+											if (v === "and" || v === "or") updateGroupLogic(group.id, v);
+										},
+										className: require_pagination.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", require_pagination.OPT_TEXT_PRIMARY, require_pagination.OPT_FOCUS_VISIBLE),
+										"aria-label": "Group logic",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+											value: "and",
+											children: "ALL"
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+											value: "or",
+											children: "ANY"
+										})]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: require_pagination.cn(require_pagination.OPT_TEXT_SECONDARY, "text-xs"),
+										children: "of the following"
+									})
+								]
+							}), groups.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								onClick: () => removeGroup(group.id),
+								className: require_pagination.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex items-center gap-2",
+									children: [
+										condIndex > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)("span", { className: "w-8" }),
+										customRenderer ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+												value: cond.property,
+												onChange: (e) => updateCondition(group.id, cond.id, { property: e.target.value }),
+												className: require_pagination.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", require_pagination.OPT_TEXT_PRIMARY, require_pagination.OPT_FOCUS_VISIBLE),
+												"aria-label": "Property",
+												children: properties.map((p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+													value: p,
+													children: p
+												}, p))
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+												value: cond.operator,
+												onChange: (e) => {
+													const v = e.target.value;
+													if (isConditionOperator(v)) updateCondition(group.id, cond.id, { operator: v });
+												},
+												className: require_pagination.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", require_pagination.OPT_TEXT_PRIMARY, require_pagination.OPT_FOCUS_VISIBLE),
+												"aria-label": "Operator",
+												children: Object.entries(OPERATOR_LABELS).map(([key, lbl]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+													value: key,
+													children: lbl
+												}, key))
+											}),
+											!NO_VALUE_OPS.includes(cond.operator) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+												type: "text",
+												value: cond.value,
+												onChange: (e) => updateCondition(group.id, cond.id, { value: e.target.value }),
+												placeholder: "Value",
+												className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											onClick: () => removeCondition(group.id, cond.id),
+											className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "border-accent/30 mt-2 ml-4 border-l-2 pl-3",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConditionBuilder, {
+								groups: group.children,
+								onChange: (newChildren) => {
+									onChange(groups.map((g) => g.id === group.id ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, g), {}, { children: newChildren }) : g));
+								},
+								properties,
+								addConditionLabel,
+								addGroupLabel,
+								addNestedGroupLabel,
+								nested,
+								maxDepth: maxDepth - 1,
+								conditionTypes
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "mt-2 flex items-center gap-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.Button, {
+								variant: "ghost",
+								size: "sm",
+								onClick: () => addCondition(group.id),
+								children: ["+ ", addConditionLabel]
+							}), nested && maxDepth > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.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 ? require_pagination._objectSpread2(require_pagination._objectSpread2({}, g), {}, { children: [...(_g$children = g.children) !== null && _g$children !== void 0 ? _g$children : [], nestedGroup] }) : g;
+									}));
+								},
+								children: ["+ ", addNestedGroupLabel]
+							})]
+						})
+					]
+				})] }, group.id)),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_pagination.Button, {
+						variant: "secondary",
+						size: "sm",
+						onClick: addGroup,
+						className: "self-start",
+						children: ["+ ", addGroupLabel]
+					}), previewCount != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: require_pagination.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 = require_pagination.MenuRoot;
+/** Renders the dropdown trigger component. */
+function DropdownTrigger(_ref) {
+	let { className } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded$6);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenuTrigger, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.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 = require_pagination._objectWithoutProperties(_ref2, _excluded2$2);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenuPopover, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.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 = require_pagination._objectWithoutProperties(_ref3, _excluded3$1);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenuItem, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.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 = require_pagination._objectWithoutProperties(_ref4, _excluded4);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.MenuSeparator, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.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 = (0, react.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 = (0, react.useMemo)(() => ({
+		size,
+		disabled
+	}), [size, disabled]);
+	const hasError = Boolean(error);
+	const fallbackGroupId = (0, react.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__ */ (0, react_jsx_runtime.jsx)(RadioGroupContext.Provider, {
+		value: ctxValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_pagination.cn("flex flex-col gap-1.5", className),
+			"data-opt-id": "2F20H",
+			"data-opt-slug": "radio-group.RadioGroup",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_reopt_ai_opt_ui_primitives.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": require_pagination.getDescribedBy(groupId, error, void 0),
+				className: require_pagination.cn("flex", orientation === "vertical" ? "flex-col gap-3" : "flex-row gap-6"),
+				children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					id: labelId,
+					className: "text-text-secondary mb-1 text-sm font-medium",
+					children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.RequiredMark, {})]
+				}), children]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.FieldMessages, {
+				id: groupId,
+				error
+			})]
+		})
+	});
+}
+const Radio = (0, react.forwardRef)((_ref, ref) => {
+	var _ref2;
+	let { label, hint, description, value, name: _name, size: sizeProp, disabled: disabledProp, className } = _ref, props = require_pagination._objectWithoutProperties(_ref, _excluded$5);
+	const groupContext = (0, react.useContext)(RadioGroupContext);
+	const primContext = (0, _reopt_ai_opt_ui_primitives.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-${(0, react.useId)().replace(/:/g, "")}`;
+	const labelId = label ? `${radioId}-label` : void 0;
+	const hintId = hintText ? `${radioId}-hint` : void 0;
+	const handleChange = (0, react.useCallback)(() => {
+		if (!disabled && value != null) primContext === null || primContext === void 0 || primContext.setValue(value);
+	}, [
+		disabled,
+		value,
+		primContext
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", require_pagination._objectSpread2(require_pagination._objectSpread2({
+		ref,
+		"aria-checked": isChecked,
+		className: require_pagination.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)("span", { className: require_pagination.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col",
+				children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					id: labelId,
+					className: require_pagination.cn("text-text-primary font-medium", styles.text),
+					children: label
+				}), hintText && /* @__PURE__ */ (0, react_jsx_runtime.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;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", require_pagination._objectSpread2(require_pagination._objectSpread2({
+		"data-opt-id": "380ZR",
+		"data-opt-slug": "loading-overlay.LoadingOverlay"
+	}, require_pagination._objectWithoutProperties(_ref, _excluded$4)), {}, {
+		className: require_pagination.cn("relative", className),
+		children: [children, loading && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col items-center gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Spinner, {
+					size: "md",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.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 = require_pagination._objectWithoutProperties(_ref, _excluded$3);
+	const layoutClassName = require_pagination.cn("flex flex-col", spacingClass[spacing], inset ? insetClass[inset] : void 0, className);
+	if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingOverlay, require_pagination._objectSpread2(require_pagination._objectSpread2({
+		"data-opt-id": "9D8QR",
+		"data-opt-slug": "block-layout.BlockLayout"
+	}, props), {}, {
+		className: layoutClassName,
+		loading,
+		label: loadingLabel,
+		children
+	}));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", require_pagination._objectSpread2(require_pagination._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 = require_pagination._objectWithoutProperties(props, _excluded$2);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BlockLayout, {
+			loading,
+			className: (options === null || options === void 0 ? void 0 : options.layoutClassName) ? `${options.layoutClassName}${className ? ` ${className}` : ""}` : className,
+			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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_pagination.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "gap-element flex min-w-0 flex-col",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+				className: "text-text-primary text-lg font-semibold",
+				children: title
+			}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-text-tertiary text-sm",
+				children: description
+			})]
+		}), actions && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_pagination.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 = `${(0, react.useId)()}-title`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: require_pagination.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "gap-element flex flex-col",
+			children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				id: titleId,
+				className: "text-text-primary text-base font-semibold",
+				children: title
+			}), description && /* @__PURE__ */ (0, react_jsx_runtime.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 = require_pagination._objectWithoutProperties(_ref, _excluded$1);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.Group, require_pagination._objectSpread2(require_pagination._objectSpread2({
+		orientation: direction,
+		id: id !== null && id !== void 0 ? id : autoSaveId,
+		className: require_pagination.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 = require_pagination._objectWithoutProperties(_ref2, _excluded2$1);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.Panel, require_pagination._objectSpread2(require_pagination._objectSpread2({
+		collapsedSize: toPanelSize(collapsedSize),
+		defaultSize: toPanelSize(defaultSize),
+		minSize: toPanelSize(minSize),
+		maxSize: toPanelSize(maxSize),
+		className: require_pagination.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 = require_pagination._objectWithoutProperties(_ref3, _excluded3);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.Separator, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.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__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "border-border bg-surface z-10 flex h-4 w-3 items-center justify-center rounded-sm border",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.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] = (0, react.useState)(false);
+	const showImage = src && !imageError;
+	const fallbackLetter = text ? text.charAt(0).toUpperCase() : null;
+	let mark = null;
+	if (showImage) mark = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		src,
+		alt,
+		className: require_pagination.cn("object-contain", markSizeStyles[size]),
+		onError: () => setImageError(true)
+	});
+	else if (icon) mark = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: require_pagination.cn("flex shrink-0 items-center justify-center", markSizeStyles[size]),
+		"aria-hidden": "true",
+		children: icon
+	});
+	else if (fallbackLetter) mark = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: require_pagination.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [mark, text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: require_pagination.cn("text-text-primary font-semibold", textSizeStyles[size]),
+		children: text
+	})] });
+	const sharedClassName = require_pagination.cn("inline-flex items-center gap-element", className);
+	if (href) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		href,
+		onClick,
+		className: require_pagination.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.DialogRoot, require_pagination._objectSpread2(require_pagination._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 = require_pagination._objectWithoutProperties(_ref, _excluded);
+	const isHorizontal = side === "left" || side === "right";
+	const close = (0, _reopt_ai_opt_ui_primitives.useDialogClose)();
+	const dragStart = (0, react.useRef)(null);
+	const [offset, setOffset] = (0, react.useState)(0);
+	const [dragging, setDragging] = (0, react.useState)(false);
+	const axis = side === "bottom" ? "Y" : "X";
+	const DRAG_ACTIVATE = 6;
+	const handlePointerDown = (0, react.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 = (0, react.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 = (0, react.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] = (0, react.useState)(0);
+	(0, react.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__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.DialogPanel, require_pagination._objectSpread2(require_pagination._objectSpread2({
+		className: require_pagination.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" : require_pagination.OPT_ANIMATE_DRAWER[side], positionClass[side], isHorizontal ? ["h-full w-full", sizeMap[size]] : ["w-full", heightMap[size]], className),
+		style: require_pagination._objectSpread2(require_pagination._objectSpread2(require_pagination._objectSpread2(require_pagination._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 = require_pagination._objectWithoutProperties(_ref2, _excluded2);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.DialogDismiss, require_pagination._objectSpread2(require_pagination._objectSpread2({ className: require_pagination.cn("hover:bg-bg-subtle rounded-md p-1.5 transition-colors", "cursor-pointer data-[disabled]:cursor-not-allowed", require_pagination.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 = (0, react.useRef)(null);
+	const scrollTopRef = (0, react.useRef)(0);
+	const containerHeightRef = (0, react.useRef)(0);
+	const rafIdRef = (0, react.useRef)(0);
+	const [visibleRange, setVisibleRange] = (0, react.useState)({
+		start: 0,
+		end: 0
+	});
+	const totalHeight = items.length * itemHeight;
+	const computeRange = (0, react.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 = (0, react.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 = (0, react.useCallback)(() => {
+		const el = containerRef.current;
+		if (el) {
+			scrollTopRef.current = el.scrollTop;
+			if (el.clientHeight !== containerHeightRef.current) containerHeightRef.current = el.clientHeight;
+			scheduleUpdate();
+		}
+	}, [scheduleUpdate]);
+	const handleRef = (0, react.useCallback)((el) => {
+		containerRef.current = el;
+		if (el) {
+			containerHeightRef.current = el.clientHeight;
+			const range = computeRange(0, el.clientHeight);
+			setVisibleRange(range);
+		}
+	}, [computeRange]);
+	(0, react.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]);
+	(0, react.useEffect)(() => {
+		scheduleUpdate();
+		return () => {
+			if (rafIdRef.current) {
+				cancelAnimationFrame(rafIdRef.current);
+				rafIdRef.current = 0;
+			}
+		};
+	}, [
+		scheduleUpdate,
+		items.length,
+		itemHeight,
+		overscan
+	]);
+	const visibleItems = (0, react.useMemo)(() => {
+		const result = [];
+		for (let i = visibleRange.start; i <= visibleRange.end && i < items.length; i++) result.push(/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: handleRef,
+		onScroll: handleScroll,
+		className: require_pagination.cn("overflow-auto", className),
+		style: require_pagination._objectSpread2({ position: "relative" }, style),
+		role: "list",
+		"data-opt-id": "VT2NP",
+		"data-opt-slug": "virtual-list.VirtualList",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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] = (0, _reopt_ai_opt_palette.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 = (0, react.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 = (0, react.useRef)(null);
+	const canvasRef = (0, react.useRef)(null);
+	const stateRef = (0, react.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 = (0, react.useRef)(null);
+	const programRef = (0, react.useRef)(null);
+	const renderAtRef = (0, react.useRef)(null);
+	const loopRef = (0, react.useRef)(null);
+	const mouseRef = (0, react.useRef)([.5, .5]);
+	const fallbackBackground = (0, react.useMemo)(() => {
+		const [c1, c2, c3] = resolveColors(preset, colors);
+		return `linear-gradient(${resolveParam(preset, "angle", angle) + 120}deg, ${c1}, ${c2}, ${c3})`;
+	}, [
+		preset,
+		colors,
+		angle
+	]);
+	(0, react.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;
+		}
+	} }), []);
+	(0, react.useEffect)(() => {
+		const container = containerRef.current;
+		const canvas = canvasRef.current;
+		if (!container || !canvas) return;
+		let renderer;
+		try {
+			renderer = new ogl.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]);
+	(0, react.useEffect)(() => {
+		var _renderAtRef$current, _stateRef$current$tim3;
+		const engine = rendererRef.current;
+		if (!engine) return;
+		const { gl } = engine;
+		const presetDef = getShaderPreset(preset);
+		const geometry = new ogl.Triangle(gl);
+		const program = new ogl.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 ogl.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]);
+	(0, react.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: containerRef,
+		"aria-hidden": ariaHidden,
+		className: require_pagination.cn("relative overflow-hidden", className),
+		style: require_pagination._objectSpread2({ background: fallbackBackground }, style),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
+			ref: canvasRef,
+			className: "absolute inset-0 block h-full w-full"
+		})
+	});
+});
+ShaderSurfaceComponent.displayName = "ShaderSurface";
+const ShaderSurface = ShaderSurfaceComponent;
+//#endregion
+Object.defineProperty(exports, "AccordionContent", {
+	enumerable: true,
+	get: function() {
+		return AccordionContent;
+	}
+});
+Object.defineProperty(exports, "AccordionItem", {
+	enumerable: true,
+	get: function() {
+		return AccordionItem;
+	}
+});
+Object.defineProperty(exports, "AccordionRoot", {
+	enumerable: true,
+	get: function() {
+		return AccordionRoot;
+	}
+});
+Object.defineProperty(exports, "AccordionTrigger", {
+	enumerable: true,
+	get: function() {
+		return AccordionTrigger;
+	}
+});
+Object.defineProperty(exports, "Avatar", {
+	enumerable: true,
+	get: function() {
+		return Avatar;
+	}
+});
+Object.defineProperty(exports, "AvatarGroup", {
+	enumerable: true,
+	get: function() {
+		return AvatarGroup;
+	}
+});
+Object.defineProperty(exports, "BlockLayout", {
+	enumerable: true,
+	get: function() {
+		return BlockLayout;
+	}
+});
+Object.defineProperty(exports, "Breadcrumb", {
+	enumerable: true,
+	get: function() {
+		return Breadcrumb;
+	}
+});
+Object.defineProperty(exports, "Card", {
+	enumerable: true,
+	get: function() {
+		return Card;
+	}
+});
+Object.defineProperty(exports, "CardContent", {
+	enumerable: true,
+	get: function() {
+		return CardContent;
+	}
+});
+Object.defineProperty(exports, "CardDescription", {
+	enumerable: true,
+	get: function() {
+		return CardDescription;
+	}
+});
+Object.defineProperty(exports, "CardFooter", {
+	enumerable: true,
+	get: function() {
+		return CardFooter;
+	}
+});
+Object.defineProperty(exports, "CardHeader", {
+	enumerable: true,
+	get: function() {
+		return CardHeader;
+	}
+});
+Object.defineProperty(exports, "CardTitle", {
+	enumerable: true,
+	get: function() {
+		return CardTitle;
+	}
+});
+Object.defineProperty(exports, "CircularProgress", {
+	enumerable: true,
+	get: function() {
+		return CircularProgress;
+	}
+});
+Object.defineProperty(exports, "ConditionBuilder", {
+	enumerable: true,
+	get: function() {
+		return ConditionBuilder;
+	}
+});
+Object.defineProperty(exports, "Container", {
+	enumerable: true,
+	get: function() {
+		return Container;
+	}
+});
+Object.defineProperty(exports, "DrawerClose", {
+	enumerable: true,
+	get: function() {
+		return DrawerClose;
+	}
+});
+Object.defineProperty(exports, "DrawerPanel", {
+	enumerable: true,
+	get: function() {
+		return DrawerPanel;
+	}
+});
+Object.defineProperty(exports, "DrawerRoot", {
+	enumerable: true,
+	get: function() {
+		return DrawerRoot;
+	}
+});
+Object.defineProperty(exports, "DropdownContent", {
+	enumerable: true,
+	get: function() {
+		return DropdownContent;
+	}
+});
+Object.defineProperty(exports, "DropdownItem", {
+	enumerable: true,
+	get: function() {
+		return DropdownItem;
+	}
+});
+Object.defineProperty(exports, "DropdownMenu", {
+	enumerable: true,
+	get: function() {
+		return DropdownMenu;
+	}
+});
+Object.defineProperty(exports, "DropdownSeparator", {
+	enumerable: true,
+	get: function() {
+		return DropdownSeparator;
+	}
+});
+Object.defineProperty(exports, "DropdownTrigger", {
+	enumerable: true,
+	get: function() {
+		return DropdownTrigger;
+	}
+});
+Object.defineProperty(exports, "Heading", {
+	enumerable: true,
+	get: function() {
+		return Heading;
+	}
+});
+Object.defineProperty(exports, "Input", {
+	enumerable: true,
+	get: function() {
+		return Input;
+	}
+});
+Object.defineProperty(exports, "LoadingOverlay", {
+	enumerable: true,
+	get: function() {
+		return LoadingOverlay;
+	}
+});
+Object.defineProperty(exports, "Logo", {
+	enumerable: true,
+	get: function() {
+		return Logo;
+	}
+});
+Object.defineProperty(exports, "Meter", {
+	enumerable: true,
+	get: function() {
+		return Meter;
+	}
+});
+Object.defineProperty(exports, "OtpField", {
+	enumerable: true,
+	get: function() {
+		return OtpField;
+	}
+});
+Object.defineProperty(exports, "PageHeader", {
+	enumerable: true,
+	get: function() {
+		return PageHeader;
+	}
+});
+Object.defineProperty(exports, "Progress", {
+	enumerable: true,
+	get: function() {
+		return Progress;
+	}
+});
+Object.defineProperty(exports, "Radio", {
+	enumerable: true,
+	get: function() {
+		return Radio;
+	}
+});
+Object.defineProperty(exports, "RadioGroup", {
+	enumerable: true,
+	get: function() {
+		return RadioGroup;
+	}
+});
+Object.defineProperty(exports, "ResizableHandle", {
+	enumerable: true,
+	get: function() {
+		return ResizableHandle;
+	}
+});
+Object.defineProperty(exports, "ResizablePanel", {
+	enumerable: true,
+	get: function() {
+		return ResizablePanel;
+	}
+});
+Object.defineProperty(exports, "ResizablePanelGroup", {
+	enumerable: true,
+	get: function() {
+		return ResizablePanelGroup;
+	}
+});
+Object.defineProperty(exports, "SHADER_OVERLAY_PARAM_KEYS", {
+	enumerable: true,
+	get: function() {
+		return SHADER_OVERLAY_PARAM_KEYS;
+	}
+});
+Object.defineProperty(exports, "SHADER_PARAM_FALLBACK", {
+	enumerable: true,
+	get: function() {
+		return SHADER_PARAM_FALLBACK;
+	}
+});
+Object.defineProperty(exports, "SHADER_PARAM_KEYS", {
+	enumerable: true,
+	get: function() {
+		return SHADER_PARAM_KEYS;
+	}
+});
+Object.defineProperty(exports, "SHADER_PRESETS", {
+	enumerable: true,
+	get: function() {
+		return SHADER_PRESETS;
+	}
+});
+Object.defineProperty(exports, "SHADER_PRESET_IDS", {
+	enumerable: true,
+	get: function() {
+		return SHADER_PRESET_IDS;
+	}
+});
+Object.defineProperty(exports, "ScrollArea", {
+	enumerable: true,
+	get: function() {
+		return ScrollArea;
+	}
+});
+Object.defineProperty(exports, "Section", {
+	enumerable: true,
+	get: function() {
+		return Section;
+	}
+});
+Object.defineProperty(exports, "Separator", {
+	enumerable: true,
+	get: function() {
+		return Separator$1;
+	}
+});
+Object.defineProperty(exports, "ShaderSurface", {
+	enumerable: true,
+	get: function() {
+		return ShaderSurface;
+	}
+});
+Object.defineProperty(exports, "Skeleton", {
+	enumerable: true,
+	get: function() {
+		return Skeleton;
+	}
+});
+Object.defineProperty(exports, "SkeletonAvatar", {
+	enumerable: true,
+	get: function() {
+		return SkeletonAvatar;
+	}
+});
+Object.defineProperty(exports, "SkeletonCard", {
+	enumerable: true,
+	get: function() {
+		return SkeletonCard;
+	}
+});
+Object.defineProperty(exports, "SkeletonTable", {
+	enumerable: true,
+	get: function() {
+		return SkeletonTable;
+	}
+});
+Object.defineProperty(exports, "SkeletonText", {
+	enumerable: true,
+	get: function() {
+		return SkeletonText;
+	}
+});
+Object.defineProperty(exports, "StepBuilder", {
+	enumerable: true,
+	get: function() {
+		return StepBuilder;
+	}
+});
+Object.defineProperty(exports, "Switch", {
+	enumerable: true,
+	get: function() {
+		return Switch;
+	}
+});
+Object.defineProperty(exports, "Text", {
+	enumerable: true,
+	get: function() {
+		return Text;
+	}
+});
+Object.defineProperty(exports, "Textarea", {
+	enumerable: true,
+	get: function() {
+		return Textarea;
+	}
+});
+Object.defineProperty(exports, "Toggle", {
+	enumerable: true,
+	get: function() {
+		return Toggle;
+	}
+});
+Object.defineProperty(exports, "ToggleGroup", {
+	enumerable: true,
+	get: function() {
+		return ToggleGroup;
+	}
+});
+Object.defineProperty(exports, "VirtualList", {
+	enumerable: true,
+	get: function() {
+		return VirtualList;
+	}
+});
+Object.defineProperty(exports, "createBlock", {
+	enumerable: true,
+	get: function() {
+		return createBlock;
+	}
+});
+Object.defineProperty(exports, "formatOptDateTime", {
+	enumerable: true,
+	get: function() {
+		return formatOptDateTime;
+	}
+});
+Object.defineProperty(exports, "formatOptNumber", {
+	enumerable: true,
+	get: function() {
+		return formatOptNumber;
+	}
+});
+Object.defineProperty(exports, "formatOptShortDate", {
+	enumerable: true,
+	get: function() {
+		return formatOptShortDate;
+	}
+});
+Object.defineProperty(exports, "formatOptTime", {
+	enumerable: true,
+	get: function() {
+		return formatOptTime;
+	}
+});
+Object.defineProperty(exports, "getShaderFragment", {
+	enumerable: true,
+	get: function() {
+		return getShaderFragment;
+	}
+});
+Object.defineProperty(exports, "getShaderPreset", {
+	enumerable: true,
+	get: function() {
+		return getShaderPreset;
+	}
+});