@reopt-ai/opt-ui 1.4.1

package/dist/chunk-N4NDU5ET.cjs

@@ -0,0 +1,4745 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _chunkAFF2HPE5cjs = require('./chunk-AFF2HPE5.cjs');
+
+
+
+
+var _chunkONE3C5RVcjs = require('./chunk-ONE3C5RV.cjs');
+
+// src/core/text.tsx
+
+
+var _react = require('react'); var React = _interopRequireWildcard(_react); var React2 = _interopRequireWildcard(_react);
+var toneStyles = {
+  primary: "text-text-primary",
+  secondary: "text-text-secondary",
+  tertiary: "text-text-tertiary",
+  inherit: "text-inherit"
+};
+function Text(_a) {
+  var _b = _a, {
+    as,
+    variant = "body",
+    tone = "primary",
+    truncate = false,
+    className,
+    children
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "as",
+    "variant",
+    "tone",
+    "truncate",
+    "className",
+    "children"
+  ]);
+  const Component = as != null ? as : "span";
+  const elementProps = _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {}, props), {
+    className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+      `opt-type-${variant}`,
+      toneStyles[tone],
+      truncate && "truncate",
+      className
+    ),
+    "data-opt-component": "text",
+    "data-opt-part": "root",
+    "data-opt-id": "NFKP2",
+    "data-opt-slug": "text.Text",
+    "data-role": variant,
+    "data-tone": tone
+  });
+  return _react.createElement.call(void 0, 
+    Component,
+    elementProps,
+    children
+  );
+}
+
+// src/core/heading.tsx
+
+function Heading(_a) {
+  var _b = _a, {
+    level = 2,
+    variant = `heading-${level}`,
+    className,
+    children
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "level",
+    "variant",
+    "className",
+    "children"
+  ]);
+  const Component = {
+    1: "h1",
+    2: "h2",
+    3: "h3",
+    4: "h4",
+    5: "h5",
+    6: "h6"
+  }[level];
+  return _react.createElement.call(void 0, 
+    Component,
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, `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
+  );
+}
+
+// src/core/separator.tsx
+var _optuiprimitives = require('@reopt-ai/opt-ui-primitives');
+var _jsxruntime = require('react/jsx-runtime');
+function Separator({
+  orientation = "horizontal",
+  decorative = false,
+  children,
+  className
+}) {
+  if (orientation === "horizontal" && children != null) {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: _chunkAFF2HPE5cjs.cn.call(void 0, "gap-element flex items-center", className),
+        "data-opt-id": "7PWJS",
+        "data-opt-slug": "separator.Separator",
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _optuiprimitives.Separator,
+            {
+              decorative: true,
+              orientation: "horizontal",
+              className: "bg-border h-px flex-1"
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-text-tertiary shrink-0 text-xs", children }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _optuiprimitives.Separator,
+            {
+              decorative: true,
+              orientation: "horizontal",
+              className: "bg-border h-px flex-1"
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _optuiprimitives.Separator,
+    {
+      orientation,
+      decorative,
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+        "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.displayName = "Separator";
+
+// src/core/otp-field.tsx
+
+
+var PATTERNS = {
+  numeric: /[0-9]/,
+  alphanumeric: /[a-zA-Z0-9]/
+};
+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 : `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 : groupLabelledBy ? void 0 : "One-time code";
+  const [value, setRawValue] = _chunkAFF2HPE5cjs.useControlledState.call(void 0, 
+    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 ? void 0 : onComplete(clipped);
+        }
+      } else {
+        completedRef.current = false;
+      }
+    },
+    [length, setRawValue, onComplete]
+  );
+  const focusCell = React.useCallback((index) => {
+    var _a, _b;
+    const target = Math.max(0, Math.min(index, inputsRef.current.length - 1));
+    (_a = inputsRef.current[target]) == null ? void 0 : _a.focus();
+    (_b = inputsRef.current[target]) == null ? void 0 : _b.select();
+  }, []);
+  const cells = React.useMemo(
+    () => Array.from({ length }, (_, i) => {
+      var _a;
+      return (_a = value[i]) != null ? _a : "";
+    }),
+    [length, value]
+  );
+  const setCell = React.useCallback(
+    (index, char) => {
+      const arr = Array.from({ length }, (_, i) => {
+        var _a;
+        return (_a = value[i]) != null ? _a : "";
+      });
+      arr[index] = char;
+      setValue(arr.join(""));
+    },
+    [length, value, setValue]
+  );
+  const handleChange = React.useCallback(
+    (index) => (e) => {
+      var _a;
+      const raw = e.target.value;
+      const chars = raw.split("").filter((c) => pattern.test(c));
+      const char = (_a = chars[chars.length - 1]) != null ? _a : "";
+      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 _a;
+        return (_a = value[i]) != null ? _a : "";
+      });
+      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__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, "flex flex-col gap-1.5", className),
+      "data-opt-id": "0083Q",
+      "data-opt-slug": "otp-field.OtpField",
+      children: [
+        label && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: _chunkAFF2HPE5cjs.OPT_TEXT_LABEL, id: labelId, children: [
+          label,
+          required && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAFF2HPE5cjs.RequiredMark, {})
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            role: "group",
+            "aria-label": groupAriaLabel,
+            "aria-labelledby": groupLabelledBy,
+            "aria-describedby": _chunkAFF2HPE5cjs.getDescribedBy.call(void 0, fieldId, error, hint),
+            className: "gap-element flex items-center",
+            children: cells.map((cell, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "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}\uBC88\uC9F8 \uC790\uB9AC`,
+                "aria-invalid": hasError || void 0,
+                value: cell,
+                onChange: handleChange(i),
+                onKeyDown: handleKeyDown(i),
+                onPaste: handlePaste(i),
+                onFocus: (e) => e.target.select(),
+                className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                  _chunkAFF2HPE5cjs.OPT_INPUT,
+                  "h-12 w-10 text-center text-lg font-medium",
+                  hasError && _chunkAFF2HPE5cjs.OPT_INPUT_ERROR
+                )
+              },
+              i
+            ))
+          }
+        ),
+        name && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { type: "hidden", name, value, disabled }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAFF2HPE5cjs.FieldMessages, { id: fieldId, error, hint })
+      ]
+    }
+  );
+}
+OtpField.displayName = "OtpField";
+
+// src/core/toggle.tsx
+
+
+
+
+
+var sizeStyles = {
+  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"
+};
+var toggleBase = _chunkAFF2HPE5cjs.cn.call(void 0, 
+  "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",
+  _chunkAFF2HPE5cjs.OPT_FOCUS_VISIBLE
+);
+function Toggle(_a) {
+  var _b = _a, {
+    size = "md",
+    className,
+    children
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "size",
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _optuiprimitives.Toggle,
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, toggleBase, sizeStyles[size], className)
+    }, props), {
+      "data-opt-id": "GFCMY",
+      "data-opt-slug": "toggle.Toggle",
+      children
+    })
+  );
+}
+Toggle.displayName = "Toggle";
+function ToggleGroup(_a) {
+  var _b = _a, {
+    className,
+    children,
+    orientation = "horizontal"
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "className",
+    "children",
+    "orientation"
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _optuiprimitives.ToggleGroup,
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      orientation,
+      "aria-orientation": orientation,
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+        "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";
+
+// src/core/accordion.tsx
+var _lucidereact = require('lucide-react');
+
+
+
+
+
+
+
+var 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 ${_chunkAFF2HPE5cjs.OPT_FOCUS} disabled:cursor-not-allowed disabled:opacity-50`;
+var contentClass = `overflow-hidden text-sm text-text-secondary ${_chunkAFF2HPE5cjs.OPT_ANIMATE_ENTER_EXIT}`;
+function AccordionRoot(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, "border-border border-y", className),
+      "data-opt-id": "CSBA9",
+      "data-opt-slug": "accordion.AccordionRoot",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _optuiprimitives.AccordionRoot, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {}, props))
+    }
+  );
+}
+AccordionRoot.displayName = "AccordionRoot";
+function AccordionItem(_a) {
+  var _b = _a, { className } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, ["className"]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _optuiprimitives.AccordionItem,
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, "border-border border-b last:border-b-0", className)
+    }, props), {
+      "data-opt-id": "JTY9M",
+      "data-opt-slug": "accordion.AccordionItem"
+    })
+  );
+}
+AccordionItem.displayName = "AccordionItem";
+function AccordionTrigger(_a) {
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _optuiprimitives.AccordionTrigger,
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, triggerClass, className)
+    }, props), {
+      "data-opt-id": "CWJZZ",
+      "data-opt-slug": "accordion.AccordionTrigger",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex-1", children }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _lucidereact.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";
+function AccordionContent(_a) {
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _optuiprimitives.AccordionContent,
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, contentClass, className)
+    }, props), {
+      "data-opt-id": "J98AG",
+      "data-opt-slug": "accordion.AccordionContent",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pb-4", children })
+    })
+  );
+}
+AccordionContent.displayName = "AccordionContent";
+
+// src/core/breadcrumb.tsx
+
+function interpolate(template, values) {
+  return template.replace(
+    /\{(\w+)\}/g,
+    (_, key) => key in values ? String(values[key]) : `{${key}}`
+  );
+}
+function Breadcrumb({
+  items,
+  separator = "/",
+  className,
+  onNavigate,
+  "aria-label": ariaLabel = "Breadcrumb"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "nav",
+    {
+      "aria-label": ariaLabel,
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, "flex items-center gap-1 px-1.5 text-sm", className),
+      "data-opt-id": "3FR0Y",
+      "data-opt-slug": "breadcrumb.Breadcrumb",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ol", { className: "flex items-center gap-1", children: items.map((item, index) => {
+        const isLast = index === items.length - 1;
+        const linkClassName = _chunkAFF2HPE5cjs.cn.call(void 0, 
+          `flex items-center gap-1.5 rounded-sm ${_chunkAFF2HPE5cjs.OPT_FOCUS} transition-colors`,
+          item.disabled ? `${_chunkAFF2HPE5cjs.OPT_TEXT_TERTIARY} cursor-not-allowed` : `${_chunkAFF2HPE5cjs.OPT_TEXT_SECONDARY} hover:text-text-primary cursor-pointer`
+        );
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { className: "flex items-center gap-1", children: isLast ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "span",
+          {
+            "aria-current": "page",
+            className: `flex items-center gap-1.5 font-medium ${_chunkAFF2HPE5cjs.OPT_TEXT_PRIMARY}`,
+            children: [
+              item.icon,
+              item.label
+            ]
+          }
+        ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          item.href ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "a",
+            {
+              href: item.disabled ? void 0 : item.href,
+              "aria-disabled": item.disabled || void 0,
+              className: linkClassName,
+              onClick: () => !item.disabled && (onNavigate == null ? void 0 : onNavigate(item)),
+              children: [
+                item.icon,
+                item.label
+              ]
+            }
+          ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "button",
+            {
+              type: "button",
+              disabled: item.disabled,
+              "aria-label": interpolate(_chunkAFF2HPE5cjs.koBreadcrumbLabels.navAriaLabel, {
+                label: item.label
+              }),
+              className: linkClassName,
+              onClick: () => !item.disabled && (onNavigate == null ? void 0 : onNavigate(item)),
+              children: [
+                item.icon,
+                item.label
+              ]
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "aria-hidden": "true", className: _chunkAFF2HPE5cjs.OPT_TEXT_TERTIARY, children: separator })
+        ] }) }, item.id);
+      }) })
+    }
+  );
+}
+
+// src/core/card.tsx
+
+function Card(_a) {
+  var _b = _a, {
+    variant = "default",
+    padding = "md",
+    shadow = true,
+    selectable = false,
+    selected = false,
+    onSelectedChange,
+    className,
+    children,
+    onClick,
+    onKeyDown,
+    role,
+    tabIndex
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "variant",
+    "padding",
+    "shadow",
+    "selectable",
+    "selected",
+    "onSelectedChange",
+    "className",
+    "children",
+    "onClick",
+    "onKeyDown",
+    "role",
+    "tabIndex"
+  ]);
+  const isInteractive = selectable || !!onClick;
+  const handleClick = selectable ? (e) => {
+    onSelectedChange == null ? void 0 : onSelectedChange(!selected);
+    onClick == null ? void 0 : onClick(e);
+  } : onClick;
+  const handleKeyDown = selectable ? (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onSelectedChange == null ? void 0 : onSelectedChange(!selected);
+    }
+    onKeyDown == null ? void 0 : onKeyDown(e);
+  } : isInteractive ? (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      e.currentTarget.click();
+    }
+    onKeyDown == null ? void 0 : onKeyDown(e);
+  } : onKeyDown;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {}, props), {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+        "rounded-xl",
+        variant === "default" && _chunkAFF2HPE5cjs.cn.call(void 0, `${_chunkAFF2HPE5cjs.OPT_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
+    })
+  );
+}
+var headerGapClasses = {
+  sm: "gap-1",
+  md: "gap-1.5",
+  lg: "gap-2"
+};
+function CardHeader(_a) {
+  var _b = _a, {
+    gap = "sm",
+    className,
+    children
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "gap",
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, "flex flex-col", headerGapClasses[gap], className)
+    }, props), {
+      "data-opt-id": "JST3J",
+      "data-opt-slug": "card.CardHeader",
+      children
+    })
+  );
+}
+function CardTitle(_a) {
+  var _b = _a, {
+    as: Tag = "h3",
+    className,
+    children
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "as",
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Tag,
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, `text-lg font-semibold ${_chunkAFF2HPE5cjs.OPT_TEXT_PRIMARY}`, className)
+    }, props), {
+      "data-opt-id": "V15TX",
+      "data-opt-slug": "card.CardTitle",
+      children
+    })
+  );
+}
+function CardDescription(_a) {
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "p",
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, `text-sm ${_chunkAFF2HPE5cjs.OPT_TEXT_SECONDARY}`, className)
+    }, props), {
+      "data-opt-id": "YB1RN",
+      "data-opt-slug": "card.CardDescription",
+      children
+    })
+  );
+}
+var contentSpacingClasses = {
+  none: "",
+  sm: "mt-2",
+  md: "mt-4",
+  lg: "mt-6"
+};
+function CardContent(_a) {
+  var _b = _a, {
+    spacing = "md",
+    className,
+    children
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "spacing",
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, contentSpacingClasses[spacing], className)
+    }, props), {
+      "data-opt-id": "9Y68R",
+      "data-opt-slug": "card.CardContent",
+      children
+    })
+  );
+}
+function CardFooter(_a) {
+  var _b = _a, {
+    divider = true,
+    className,
+    children
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "divider",
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+        "mt-4 flex items-center justify-end gap-2 pt-4",
+        divider && `border-t ${_chunkAFF2HPE5cjs.OPT_BORDER}`,
+        className
+      )
+    }, props), {
+      "data-opt-id": "GRNTR",
+      "data-opt-slug": "card.CardFooter",
+      children
+    })
+  );
+}
+
+// src/core/input.tsx
+
+
+
+
+
+var inputSizeStyles = _chunkAFF2HPE5cjs.OPT_INPUT_SIZE;
+var Input = _react.forwardRef.call(void 0, 
+  (_a, ref) => {
+    var _b = _a, {
+      label,
+      error,
+      hint,
+      leftIcon,
+      rightIcon,
+      fullWidth = false,
+      size = "md",
+      required,
+      className,
+      id
+    } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+      "label",
+      "error",
+      "hint",
+      "leftIcon",
+      "rightIcon",
+      "fullWidth",
+      "size",
+      "required",
+      "className",
+      "id"
+    ]);
+    var _a2;
+    const fallbackId = _react.useId.call(void 0, ).replace(/:/g, "");
+    const inputId = (_a2 = _chunkAFF2HPE5cjs.useInputId.call(void 0, id, label, "input")) != null ? _a2 : `input-${fallbackId}`;
+    const hasError = Boolean(error);
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: _chunkAFF2HPE5cjs.cn.call(void 0, "flex flex-col gap-1.5", fullWidth && "w-full"),
+        "data-opt-id": "7BY1Q",
+        "data-opt-slug": "input.Input",
+        children: [
+          label && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "label",
+            {
+              htmlFor: inputId,
+              className: "text-text-primary text-sm font-medium",
+              children: [
+                label,
+                required && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAFF2HPE5cjs.RequiredMark, {})
+              ]
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative", children: [
+            leftIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-text-tertiary pointer-events-none absolute top-1/2 left-3 -translate-y-1/2", children: leftIcon }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "input",
+              _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+                ref,
+                id: inputId,
+                className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                  _chunkAFF2HPE5cjs.OPT_INPUT,
+                  inputSizeStyles[size],
+                  leftIcon && (size === "sm" ? "pl-8" : "pl-10"),
+                  rightIcon && (size === "sm" ? "pr-8" : "pr-10"),
+                  hasError && _chunkAFF2HPE5cjs.OPT_INPUT_ERROR,
+                  !fullWidth && "w-auto",
+                  className
+                ),
+                "aria-invalid": hasError,
+                "aria-required": required,
+                "aria-describedby": _chunkAFF2HPE5cjs.getDescribedBy.call(void 0, inputId, error, hint),
+                required
+              }, props)
+            ),
+            rightIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-text-tertiary pointer-events-none absolute top-1/2 right-3 -translate-y-1/2", children: rightIcon })
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAFF2HPE5cjs.FieldMessages, { id: inputId, error, hint })
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/core/switch.tsx
+
+
+
+
+
+
+
+var sizeStyles2 = {
+  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"
+  }
+};
+var Switch = _react.forwardRef.call(void 0, 
+  (_a, ref) => {
+    var _b = _a, {
+      label,
+      required,
+      error,
+      hint,
+      description,
+      checked: controlledChecked,
+      defaultChecked = false,
+      onChange,
+      size = "md",
+      disabled,
+      className,
+      id,
+      onClick,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy
+    } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+      "label",
+      "required",
+      "error",
+      "hint",
+      "description",
+      "checked",
+      "defaultChecked",
+      "onChange",
+      "size",
+      "disabled",
+      "className",
+      "id",
+      "onClick",
+      "aria-label",
+      "aria-labelledby"
+    ]);
+    var _a2;
+    const fallbackId = _react.useId.call(void 0, );
+    const switchId = (_a2 = _chunkAFF2HPE5cjs.useInputId.call(void 0, id, label, "switch")) != null ? _a2 : `switch-${fallbackId}`;
+    const hintText = hint != null ? hint : description;
+    const hasError = Boolean(error);
+    const styles = sizeStyles2[size];
+    const labelId = label ? `${switchId}-label` : void 0;
+    const switchLabelledBy = ariaLabelledBy != null ? ariaLabelledBy : ariaLabel ? void 0 : labelId;
+    const switchAriaLabel = ariaLabel != null ? ariaLabel : switchLabelledBy ? void 0 : "Switch";
+    const isControlled = controlledChecked !== void 0;
+    const [internalChecked, setInternalChecked] = _react.useState.call(void 0, defaultChecked);
+    const checked = isControlled ? controlledChecked : internalChecked;
+    const handleClick = _react.useCallback.call(void 0, 
+      (e) => {
+        const next = !checked;
+        if (!isControlled) setInternalChecked(next);
+        onChange == null ? void 0 : onChange(next);
+        onClick == null ? void 0 : onClick(e);
+      },
+      [checked, isControlled, onChange, onClick]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: _chunkAFF2HPE5cjs.cn.call(void 0, "flex flex-col gap-1.5", className),
+        "data-opt-id": "51Z9R",
+        "data-opt-slug": "switch.Switch",
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+                ref,
+                type: "button",
+                role: "switch",
+                id: switchId,
+                "aria-checked": checked,
+                "aria-label": switchAriaLabel,
+                "aria-labelledby": switchLabelledBy,
+                disabled,
+                className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                  "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",
+                  _chunkAFF2HPE5cjs.OPT_FOCUS_VISIBLE
+                ),
+                "aria-invalid": hasError,
+                "aria-required": required,
+                "aria-describedby": _chunkAFF2HPE5cjs.getDescribedBy.call(void 0, switchId, error, hintText),
+                onClick: handleClick
+              }, props), {
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "span",
+                  {
+                    className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                      // eslint-disable-next-line opt-ui/no-raw-color -- switch thumb은 라이트/다크 공통 흰색 (디자인 시스템 표준)
+                      "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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col", children: [
+              label && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                "span",
+                {
+                  id: labelId,
+                  className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                    "text-text-primary text-sm font-medium",
+                    disabled && "opacity-50"
+                  ),
+                  children: [
+                    label,
+                    required && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAFF2HPE5cjs.RequiredMark, {})
+                  ]
+                }
+              ),
+              hintText && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "p",
+                {
+                  id: `${switchId}-hint`,
+                  className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                    "text-text-tertiary text-sm",
+                    disabled && "opacity-50"
+                  ),
+                  children: hintText
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAFF2HPE5cjs.FieldMessages, { id: switchId, error })
+        ]
+      }
+    );
+  }
+);
+Switch.displayName = "Switch";
+
+// src/core/skeleton.tsx
+
+var variantStyles = {
+  text: "rounded h-4",
+  circular: "rounded-full",
+  rectangular: "rounded-lg"
+};
+function Skeleton(_a) {
+  var _b = _a, {
+    variant = "text",
+    width,
+    height,
+    lines = 1,
+    animated = true,
+    className,
+    style
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "variant",
+    "width",
+    "height",
+    "lines",
+    "animated",
+    "className",
+    "style"
+  ]);
+  const baseClass = _chunkAFF2HPE5cjs.cn.call(void 0, 
+    "bg-bg-subtle",
+    animated && "animate-pulse",
+    variantStyles[variant],
+    className
+  );
+  const computedStyle = _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+    width: typeof width === "number" ? `${width}px` : width,
+    height: typeof height === "number" ? `${height}px` : height
+  }, style);
+  if (variant === "text" && lines > 1) {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "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__ */ _jsxruntime.jsx.call(void 0, 
+            "div",
+            _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+              className: _chunkAFF2HPE5cjs.cn.call(void 0, baseClass, i === lines - 1 && "w-4/5"),
+              style: i === lines - 1 ? void 0 : computedStyle
+            }, props),
+            i
+          )),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Loading..." })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      className: baseClass,
+      style: computedStyle,
+      role: "status",
+      "aria-label": "Loading"
+    }, props), {
+      "data-opt-id": "EJT87",
+      "data-opt-slug": "skeleton.Skeleton",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Loading..." })
+    })
+  );
+}
+function SkeletonText(_a) {
+  var _b = _a, {
+    lines = 3,
+    className
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "lines",
+    "className"
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Skeleton,
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      variant: "text",
+      lines,
+      className
+    }, props), {
+      "data-opt-id": "MX3D5",
+      "data-opt-slug": "skeleton.SkeletonText"
+    })
+  );
+}
+function SkeletonAvatar(_a) {
+  var _b = _a, {
+    size = 40,
+    className
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "size",
+    "className"
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Skeleton,
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      variant: "circular",
+      width: size,
+      height: size,
+      className
+    }, props), {
+      "data-opt-id": "MP0HZ",
+      "data-opt-slug": "skeleton.SkeletonAvatar"
+    })
+  );
+}
+function SkeletonCard(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, "gap-group flex flex-col", className)
+    }, props), {
+      "data-opt-id": "34V5D",
+      "data-opt-slug": "skeleton.SkeletonCard",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { variant: "rectangular", height: 120 }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { variant: "text", width: "60%" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { variant: "text", lines: 2 })
+      ]
+    })
+  );
+}
+function SkeletonTable({
+  rows = 5,
+  columns = 4,
+  className
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, "gap-element flex flex-col", className),
+      role: "status",
+      "aria-label": "Loading table",
+      "data-opt-id": "3KEDN",
+      "data-opt-slug": "skeleton.SkeletonTable",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "border-border-subtle gap-group flex border-b pb-2", children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Skeleton, { variant: "text", className: "flex-1", height: 16 }, i)) }),
+        Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "gap-group flex py-2", children: Array.from({ length: columns }).map((_2, colIndex) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          Skeleton,
+          {
+            variant: "text",
+            className: "flex-1",
+            height: 14
+          },
+          colIndex
+        )) }, rowIndex)),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Loading..." })
+      ]
+    }
+  );
+}
+
+// src/core/textarea.tsx
+
+
+var textareaSizeStyles = _chunkAFF2HPE5cjs.OPT_TEXTAREA_SIZE;
+var resizeStyles = {
+  none: "resize-none",
+  vertical: "resize-y",
+  horizontal: "resize-x",
+  both: "resize"
+};
+var Textarea = _react.forwardRef.call(void 0, 
+  (_a, ref) => {
+    var _b = _a, {
+      label,
+      error,
+      hint,
+      fullWidth = false,
+      required,
+      resize = "vertical",
+      size = "md",
+      className,
+      id,
+      rows = 4
+    } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+      "label",
+      "error",
+      "hint",
+      "fullWidth",
+      "required",
+      "resize",
+      "size",
+      "className",
+      "id",
+      "rows"
+    ]);
+    var _a2;
+    const fallbackId = _react.useId.call(void 0, ).replace(/:/g, "");
+    const textareaId = (_a2 = _chunkAFF2HPE5cjs.useInputId.call(void 0, id, label, "textarea")) != null ? _a2 : `textarea-${fallbackId}`;
+    const hasError = Boolean(error);
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: _chunkAFF2HPE5cjs.cn.call(void 0, "flex flex-col gap-1.5", fullWidth && "w-full"),
+        "data-opt-id": "6T58H",
+        "data-opt-slug": "textarea.Textarea",
+        children: [
+          label && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "label",
+            {
+              htmlFor: textareaId,
+              className: "text-text-primary text-sm font-medium",
+              children: [
+                label,
+                required && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAFF2HPE5cjs.RequiredMark, {})
+              ]
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "textarea",
+            _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+              ref,
+              id: textareaId,
+              rows,
+              className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                "border-border bg-surface text-text-primary placeholder:text-text-tertiary w-full rounded-lg border px-4 py-3 text-sm outline-transparent",
+                _chunkAFF2HPE5cjs.OPT_FOCUS_VISIBLE,
+                textareaSizeStyles[size],
+                resizeStyles[resize],
+                hasError && _chunkAFF2HPE5cjs.OPT_INPUT_ERROR,
+                !fullWidth && "w-auto",
+                className
+              ),
+              "aria-invalid": hasError,
+              "aria-describedby": _chunkAFF2HPE5cjs.getDescribedBy.call(void 0, textareaId, error, hint)
+            }, props)
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAFF2HPE5cjs.FieldMessages, { id: textareaId, error, hint })
+        ]
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+// src/core/avatar.tsx
+
+
+
+
+
+
+var useIsoLayoutEffect = typeof window !== "undefined" ? _react.useLayoutEffect : _react.useEffect;
+function useImageLoadingStatus(src, {
+  srcSet,
+  sizes,
+  crossOrigin,
+  referrerPolicy
+}) {
+  const [status, setStatus] = _react.useState.call(void 0, "idle");
+  useIsoLayoutEffect(() => {
+    if (!src && !srcSet) {
+      setStatus("error");
+      return void 0;
+    }
+    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 : 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;
+}
+var sizeStyles3 = {
+  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"
+};
+var statusStyles = {
+  online: "bg-success",
+  offline: "bg-bg-muted",
+  busy: "bg-danger",
+  away: "bg-warning"
+};
+var 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();
+}
+var 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];
+}
+function Avatar(_a) {
+  var _b = _a, {
+    src,
+    srcSet,
+    sizes,
+    crossOrigin,
+    referrerPolicy,
+    alt,
+    name,
+    size = "md",
+    fallback,
+    status,
+    className,
+    onLoadingStatusChange
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "src",
+    "srcSet",
+    "sizes",
+    "crossOrigin",
+    "referrerPolicy",
+    "alt",
+    "name",
+    "size",
+    "fallback",
+    "status",
+    "className",
+    "onLoadingStatusChange"
+  ]);
+  var _a2, _b2, _c;
+  const loadingStatus = useImageLoadingStatus(src, {
+    srcSet,
+    sizes,
+    crossOrigin,
+    referrerPolicy
+  });
+  _react.useEffect.call(void 0, () => {
+    onLoadingStatusChange == null ? 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 ? `${(_a2 = name != null ? name : alt) != null ? _a2 : "Avatar"} (${status})` : (_b2 = name != null ? name : alt) != null ? _b2 : "Avatar";
+  let avatarContent;
+  if (showImage) {
+    avatarContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "img",
+      {
+        src,
+        srcSet,
+        sizes,
+        crossOrigin,
+        referrerPolicy,
+        alt: (_c = alt != null ? alt : name) != null ? _c : "Avatar",
+        className: "h-full w-full object-cover"
+      }
+    );
+  } else if (fallback) {
+    avatarContent = fallback;
+  } else if (initials) {
+    avatarContent = // eslint-disable-next-line opt-ui/no-raw-color -- saturated bg-{color}-500 위 흰 텍스트는 contrast 의도
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium text-white", children: initials });
+  } else {
+    avatarContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "svg",
+      {
+        className: "text-text-tertiary h-3/5 w-3/5",
+        fill: "currentColor",
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, 
+    "span",
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      role: "img",
+      "aria-label": avatarLabel,
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+        "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full",
+        sizeStyles3[size],
+        !showImage && bgColor,
+        className
+      )
+    }, props), {
+      "data-opt-id": "SCMM0",
+      "data-opt-slug": "avatar.Avatar",
+      children: [
+        avatarContent,
+        status && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "span",
+          {
+            className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+              "border-surface absolute right-0 bottom-0 rounded-full",
+              statusStyles[status],
+              statusSizeStyles[size]
+            ),
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    })
+  );
+}
+function AvatarGroup(_a) {
+  var _b = _a, {
+    max = 4,
+    size = "md",
+    children,
+    className
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "max",
+    "size",
+    "children",
+    "className"
+  ]);
+  const avatars = Array.isArray(children) ? children : [children];
+  const visibleAvatars = avatars.slice(0, max);
+  const remainingCount = avatars.length - max;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, "flex", className)
+    }, props), {
+      "data-opt-id": "MVB53",
+      "data-opt-slug": "avatar.AvatarGroup",
+      children: [
+        visibleAvatars.map((child, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "span",
+          {
+            className: "ring-surface relative -ml-2 inline-block rounded-full ring-2 first:ml-0",
+            children: child
+          },
+          index
+        )),
+        remainingCount > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "span",
+          {
+            className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+              "bg-bg-subtle text-text-secondary ring-surface relative inline-flex items-center justify-center rounded-full font-medium ring-2",
+              sizeStyles3[size]
+            ),
+            children: [
+              "+",
+              remainingCount
+            ]
+          }
+        )
+      ]
+    })
+  );
+}
+
+// src/core/progress.tsx
+
+
+var sizeStyles4 = {
+  sm: "h-1",
+  md: "h-2",
+  lg: "h-3"
+};
+var variantStyles2 = {
+  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 safeValue = Number.isFinite(value) ? value : 0;
+  const clampedValue = safeMax > 0 ? Math.min(Math.max(safeValue, 0), safeMax) : 0;
+  const percentage = safeMax > 0 ? clampedValue / safeMax * 100 : 0;
+  const roundedPercentage = Math.round(percentage);
+  return {
+    clampedValue,
+    max: safeMax,
+    percentage,
+    valueText: `${roundedPercentage}%`
+  };
+}
+function Progress(_a) {
+  var _b = _a, {
+    value,
+    max = 100,
+    size = "md",
+    variant = "default",
+    showLabel = false,
+    label,
+    animated = true,
+    indeterminate = false,
+    className
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "value",
+    "max",
+    "size",
+    "variant",
+    "showLabel",
+    "label",
+    "animated",
+    "indeterminate",
+    "className"
+  ]);
+  const isIndeterminate = indeterminate || value === void 0;
+  const progress = isIndeterminate ? null : getProgressValue(value, max);
+  const shouldRenderHeader = Boolean(label) || showLabel && progress;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, "w-full", className)
+    }, props), {
+      "data-opt-id": "Y5N8R",
+      "data-opt-slug": "progress.Progress",
+      children: [
+        shouldRenderHeader && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mb-1.5 flex items-center justify-between text-sm", children: [
+          label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-text-primary font-medium", children: label }),
+          showLabel && progress && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-text-tertiary", children: progress.valueText })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+              "bg-bg-subtle w-full overflow-hidden rounded-full",
+              sizeStyles4[size]
+            ),
+            role: "progressbar",
+            "aria-valuenow": progress == null ? void 0 : progress.clampedValue,
+            "aria-valuemin": progress ? 0 : void 0,
+            "aria-valuemax": progress == null ? void 0 : progress.max,
+            "aria-valuetext": progress == null ? void 0 : progress.valueText,
+            "aria-label": label != null ? label : progress ? `${progress.valueText} complete` : "Loading",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "div",
+              {
+                className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                  "h-full rounded-full",
+                  variantStyles2[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
+              }
+            )
+          }
+        )
+      ]
+    })
+  );
+}
+var circularVariantStyles = {
+  default: "text-accent",
+  success: "text-success",
+  warning: "text-warning",
+  error: "text-danger"
+};
+function CircularProgress(_a) {
+  var _b = _a, {
+    value,
+    max = 100,
+    size = 48,
+    strokeWidth = 4,
+    variant = "default",
+    showLabel = false,
+    label,
+    indeterminate = false,
+    className
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "value",
+    "max",
+    "size",
+    "strokeWidth",
+    "variant",
+    "showLabel",
+    "label",
+    "indeterminate",
+    "className"
+  ]);
+  var _a2;
+  const labelId = _react.useId.call(void 0, );
+  const isIndeterminate = indeterminate || value === void 0;
+  const progress = isIndeterminate ? null : getProgressValue(value, max);
+  const accessibleName = label != null ? label : progress ? `${progress.valueText} complete` : "Loading";
+  const radius = (size - strokeWidth) / 2;
+  const circumference = radius * 2 * Math.PI;
+  const strokeDashoffset = circumference - ((_a2 = progress == null ? void 0 : progress.percentage) != null ? _a2 : 0) / 100 * circumference;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: "relative inline-flex items-center justify-center",
+      "data-opt-id": "Q69KP",
+      "data-opt-slug": "progress.CircularProgress",
+      children: [
+        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { id: labelId, className: "sr-only", children: label }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "svg",
+          _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+            width: size,
+            height: size,
+            className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+              isIndeterminate ? "animate-spin" : "-rotate-90",
+              className
+            ),
+            role: isIndeterminate ? "progressbar" : "meter",
+            "aria-labelledby": label ? labelId : void 0,
+            "aria-valuenow": progress == null ? void 0 : progress.clampedValue,
+            "aria-valuemin": progress ? 0 : void 0,
+            "aria-valuemax": progress == null ? void 0 : progress.max,
+            "aria-valuetext": progress == null ? void 0 : progress.valueText,
+            "aria-label": label ? void 0 : accessibleName
+          }, props), {
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "circle",
+                {
+                  cx: size / 2,
+                  cy: size / 2,
+                  r: radius,
+                  fill: "none",
+                  strokeWidth,
+                  className: "stroke-border-subtle"
+                }
+              ),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "circle",
+                {
+                  cx: size / 2,
+                  cy: size / 2,
+                  r: radius,
+                  fill: "none",
+                  strokeWidth,
+                  strokeLinecap: "round",
+                  className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                    "transition-all duration-300 ease-out",
+                    circularVariantStyles[variant]
+                  ),
+                  style: {
+                    strokeDasharray: isIndeterminate ? `${circumference * 0.28} ${circumference}` : circumference,
+                    strokeDashoffset: isIndeterminate ? 0 : strokeDashoffset,
+                    stroke: "currentColor"
+                  }
+                }
+              )
+            ]
+          })
+        ),
+        showLabel && progress && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-text-primary absolute text-xs font-medium", children: progress.valueText })
+      ]
+    }
+  );
+}
+
+// src/core/meter.tsx
+
+
+var sizeStyles5 = {
+  sm: "h-1",
+  md: "h-2",
+  lg: "h-3"
+};
+var variantStyles3 = {
+  default: "bg-accent",
+  success: "bg-success",
+  warning: "bg-warning",
+  error: "bg-danger"
+};
+function Meter(_a) {
+  var _b = _a, {
+    value,
+    min = 0,
+    max = 100,
+    size = "md",
+    variant = "default",
+    showValue = false,
+    label,
+    getValueLabel,
+    className
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "value",
+    "min",
+    "max",
+    "size",
+    "variant",
+    "showValue",
+    "label",
+    "getValueLabel",
+    "className"
+  ]);
+  const clamped = Math.min(Math.max(value, min), max);
+  const percentage = max === min ? 0 : (clamped - min) / (max - min) * 100;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, "w-full", className)
+    }, props), {
+      "data-opt-id": "G01TE",
+      "data-opt-slug": "meter.Meter",
+      children: [
+        (showValue || label) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mb-1.5 flex items-center justify-between text-sm", children: [
+          label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-text-primary font-medium", children: label }),
+          showValue && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "text-text-tertiary", children: [
+            Math.round(percentage),
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _optuiprimitives.Meter,
+          {
+            value: clamped,
+            min,
+            max,
+            getValueLabel,
+            "aria-label": label != null ? label : `${Math.round(percentage)}%`,
+            className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+              "bg-bg-subtle w-full overflow-hidden rounded-full",
+              sizeStyles5[size]
+            ),
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "div",
+              {
+                className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                  "h-full rounded-full transition-all duration-300 ease-out",
+                  variantStyles3[variant]
+                ),
+                style: { width: `${percentage}%` }
+              }
+            )
+          }
+        )
+      ]
+    })
+  );
+}
+
+// src/core/step-builder.tsx
+
+
+function StepBuilder({
+  steps,
+  onChange,
+  label,
+  addLabel = "Add step",
+  maxSteps,
+  className,
+  "aria-label": ariaLabel
+}) {
+  var _a;
+  const [editingId, setEditingId] = _react.useState.call(void 0, null);
+  const nextStepIdRef = _react.useRef.call(void 0, 1);
+  const createStepId = _react.useCallback.call(void 0, () => {
+    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 = _react.useCallback.call(void 0, () => {
+    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 = _react.useCallback.call(void 0, 
+    (id) => {
+      onChange(steps.filter((s) => s.id !== id));
+      if (editingId === id) setEditingId(null);
+    },
+    [steps, onChange, editingId]
+  );
+  const updateStep = _react.useCallback.call(void 0, 
+    (id, updates) => {
+      onChange(steps.map((s) => s.id === id ? _chunkONE3C5RVcjs.__spreadValues.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {}, s), updates) : s));
+    },
+    [steps, onChange]
+  );
+  const moveStep = _react.useCallback.call(void 0, 
+    (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__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, "flex flex-col gap-3", className),
+      role: "list",
+      "aria-label": (_a = ariaLabel != null ? ariaLabel : label) != null ? _a : "Step builder",
+      "data-opt-id": "7BQDT",
+      "data-opt-slug": "step-builder.StepBuilder",
+      children: [
+        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunkAFF2HPE5cjs.OPT_TEXT_LABEL, children: label }),
+        steps.map((step, index) => {
+          var _a2;
+          return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "div",
+            {
+              className: _chunkAFF2HPE5cjs.cn.call(void 0, _chunkAFF2HPE5cjs.OPT_SURFACE, _chunkAFF2HPE5cjs.OPT_BORDER, "flex items-start gap-3 p-3"),
+              role: "listitem",
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "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__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-w-0 flex-1", children: editingId === step.id ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-2", children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    "input",
+                    {
+                      type: "text",
+                      value: step.label,
+                      onChange: (e) => updateStep(step.id, { label: e.target.value }),
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter") setEditingId(null);
+                      },
+                      className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                        "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",
+                        _chunkAFF2HPE5cjs.OPT_TEXT_PRIMARY,
+                        _chunkAFF2HPE5cjs.OPT_FOCUS_VISIBLE
+                      ),
+                      "aria-label": "Step label",
+                      autoFocus: true
+                    }
+                  ),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    "input",
+                    {
+                      type: "text",
+                      value: (_a2 = step.description) != null ? _a2 : "",
+                      onChange: (e) => updateStep(step.id, { description: e.target.value }),
+                      placeholder: "Description (optional)",
+                      className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                        "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",
+                        _chunkAFF2HPE5cjs.OPT_TEXT_PRIMARY,
+                        "placeholder:text-text-tertiary",
+                        _chunkAFF2HPE5cjs.OPT_FOCUS_VISIBLE
+                      ),
+                      "aria-label": "Step description"
+                    }
+                  ),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    _chunkAFF2HPE5cjs.Button,
+                    {
+                      variant: "ghost",
+                      size: "sm",
+                      onClick: () => setEditingId(null),
+                      children: "Done"
+                    }
+                  )
+                ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                  "button",
+                  {
+                    type: "button",
+                    className: "w-full text-left",
+                    onClick: () => setEditingId(step.id),
+                    "aria-label": `Edit ${step.label}`,
+                    children: [
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunkAFF2HPE5cjs.cn.call(void 0, _chunkAFF2HPE5cjs.OPT_TEXT_PRIMARY, "text-sm font-medium"), children: step.label }),
+                      step.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                        "span",
+                        {
+                          className: _chunkAFF2HPE5cjs.cn.call(void 0, _chunkAFF2HPE5cjs.OPT_TEXT_SECONDARY, "mt-0.5 block text-xs"),
+                          children: step.description
+                        }
+                      )
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-shrink-0 items-center gap-1", children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => moveStep(index, -1),
+                      disabled: index === 0,
+                      className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                        "rounded p-1 text-sm",
+                        _chunkAFF2HPE5cjs.OPT_TEXT_TERTIARY,
+                        "hover:bg-bg-subtle",
+                        "disabled:opacity-30",
+                        _chunkAFF2HPE5cjs.OPT_FOCUS_VISIBLE
+                      ),
+                      "aria-label": "Move up",
+                      children: "\u25B2"
+                    }
+                  ),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => moveStep(index, 1),
+                      disabled: index === steps.length - 1,
+                      className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                        "rounded p-1 text-sm",
+                        _chunkAFF2HPE5cjs.OPT_TEXT_TERTIARY,
+                        "hover:bg-bg-subtle",
+                        "disabled:opacity-30",
+                        _chunkAFF2HPE5cjs.OPT_FOCUS_VISIBLE
+                      ),
+                      "aria-label": "Move down",
+                      children: "\u25BC"
+                    }
+                  ),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => removeStep(step.id),
+                      className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                        "text-danger-fg hover:bg-danger-subtle rounded p-1 text-sm",
+                        _chunkAFF2HPE5cjs.OPT_FOCUS_VISIBLE
+                      ),
+                      "aria-label": `Remove ${step.label}`,
+                      children: "\u2715"
+                    }
+                  )
+                ] })
+              ]
+            },
+            step.id
+          );
+        }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _chunkAFF2HPE5cjs.Button,
+          {
+            variant: "secondary",
+            size: "sm",
+            onClick: addStep,
+            disabled: atLimit,
+            className: "self-start",
+            children: [
+              "+ ",
+              addLabel
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+StepBuilder.displayName = "StepBuilder";
+
+// src/lib/formatters.ts
+var OPT_UI_DEFAULT_LOCALE = "ko-KR";
+var KST_OFFSET_MS = 9 * 60 * 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 ? "\uC624\uC804" : "\uC624\uD6C4";
+}
+function hour12(hour) {
+  const normalized = hour % 12;
+  return normalized === 0 ? 12 : normalized;
+}
+function formatOptShortDate(input) {
+  const parts = getKstDateParts(input);
+  if (!parts) {
+    return "-";
+  }
+  return `${parts.month}\uC6D4 ${parts.day}\uC77C`;
+}
+function formatOptTime(input) {
+  const parts = getKstDateParts(input);
+  if (!parts) {
+    return "-";
+  }
+  return `${meridiem(parts.hour)} ${pad2(hour12(parts.hour))}:${pad2(
+    parts.minute
+  )}`;
+}
+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)}`;
+}
+function formatOptNumber(value) {
+  return new Intl.NumberFormat(OPT_UI_DEFAULT_LOCALE).format(value);
+}
+
+// src/core/condition-builder.tsx
+
+
+
+var 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"
+};
+var 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);
+}
+var NO_VALUE_OPS = ["is_set", "is_not_set"];
+var DEFAULT_PROPERTIES = [
+  "event_name",
+  "user_id",
+  "email",
+  "country",
+  "browser",
+  "os",
+  "device",
+  "page_url",
+  "referrer",
+  "amount"
+];
+var ConditionBuilderIdScopeContext = React2.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 };
+}
+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 _a;
+  const inheritedIdScope = React2.useContext(ConditionBuilderIdScopeContext);
+  const nextGroupIdRef = React2.useRef(1);
+  const nextConditionIdRef = React2.useRef(1);
+  const getLocalReservedIds = _react.useCallback.call(void 0, 
+    () => collectConditionBuilderIds(groups),
+    [groups]
+  );
+  const localIdScope = React2.useMemo(
+    () => ({
+      nextGroupIdRef,
+      nextConditionIdRef,
+      getReservedIds: getLocalReservedIds
+    }),
+    [getLocalReservedIds]
+  );
+  const idScope = inheritedIdScope != null ? inheritedIdScope : localIdScope;
+  const createGroupId = _react.useCallback.call(void 0, 
+    (suffix = "") => {
+      const { groupIds } = idScope.getReservedIds();
+      let id = "";
+      do {
+        id = `group-${idScope.nextGroupIdRef.current++}${suffix}`;
+      } while (groupIds.has(id));
+      return id;
+    },
+    [idScope]
+  );
+  const createConditionId = _react.useCallback.call(void 0, 
+    (suffix = "") => {
+      const { conditionIds } = idScope.getReservedIds();
+      let id = "";
+      do {
+        id = `cond-${idScope.nextConditionIdRef.current++}${suffix}`;
+      } while (conditionIds.has(id));
+      return id;
+    },
+    [idScope]
+  );
+  _react.useEffect.call(void 0, () => {
+    onPreview == null ? void 0 : onPreview(groups);
+  }, [groups, onPreview]);
+  const addGroup = _react.useCallback.call(void 0, () => {
+    var _a2;
+    const newGroup = {
+      id: createGroupId(),
+      logic: "and",
+      conditions: [
+        {
+          id: createConditionId(),
+          property: (_a2 = properties[0]) != null ? _a2 : "",
+          operator: "equals",
+          value: ""
+        }
+      ]
+    };
+    onChange([...groups, newGroup]);
+  }, [groups, onChange, properties, createGroupId, createConditionId]);
+  const removeGroup = _react.useCallback.call(void 0, 
+    (groupId) => {
+      onChange(groups.filter((g) => g.id !== groupId));
+    },
+    [groups, onChange]
+  );
+  const updateGroupLogic = _react.useCallback.call(void 0, 
+    (groupId, logic) => {
+      onChange(groups.map((g) => g.id === groupId ? _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {}, g), { logic }) : g));
+    },
+    [groups, onChange]
+  );
+  const addCondition = _react.useCallback.call(void 0, 
+    (groupId) => {
+      onChange(
+        groups.map(
+          (g) => {
+            var _a2;
+            return g.id === groupId ? _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {}, g), {
+              conditions: [
+                ...g.conditions,
+                {
+                  id: createConditionId(),
+                  property: (_a2 = properties[0]) != null ? _a2 : "",
+                  operator: "equals",
+                  value: ""
+                }
+              ]
+            }) : g;
+          }
+        )
+      );
+    },
+    [groups, onChange, properties, createConditionId]
+  );
+  const removeCondition = _react.useCallback.call(void 0, 
+    (groupId, condId) => {
+      onChange(
+        groups.map(
+          (g) => g.id === groupId ? _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {}, g), {
+            conditions: g.conditions.filter((c) => c.id !== condId)
+          }) : g
+        )
+      );
+    },
+    [groups, onChange]
+  );
+  const updateCondition = _react.useCallback.call(void 0, 
+    (groupId, condId, updates) => {
+      onChange(
+        groups.map(
+          (g) => g.id === groupId ? _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {}, g), {
+            conditions: g.conditions.map(
+              (c) => c.id === condId ? _chunkONE3C5RVcjs.__spreadValues.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {}, c), updates) : c
+            )
+          }) : g
+        )
+      );
+    },
+    [groups, onChange]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ConditionBuilderIdScopeContext.Provider, { value: idScope, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, "flex flex-col gap-3", className),
+      "aria-label": (_a = ariaLabel != null ? ariaLabel : label) != null ? _a : "Condition builder",
+      "data-opt-id": "SXXKJ",
+      "data-opt-slug": "condition-builder.ConditionBuilder",
+      children: [
+        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunkAFF2HPE5cjs.OPT_TEXT_LABEL, children: label }),
+        groups.map((group, groupIndex) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+          groupIndex > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "my-2 flex items-center gap-2", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "bg-border-subtle h-px flex-1" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-warning-fg text-xs font-semibold uppercase", children: "OR" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "bg-border-subtle h-px flex-1" })
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "div",
+            {
+              className: _chunkAFF2HPE5cjs.cn.call(void 0, _chunkAFF2HPE5cjs.OPT_SURFACE, _chunkAFF2HPE5cjs.OPT_BORDER, "p-3"),
+              role: "group",
+              "aria-label": `Condition group ${groupIndex + 1}`,
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mb-2 flex items-center justify-between", children: [
+                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      "span",
+                      {
+                        className: _chunkAFF2HPE5cjs.cn.call(void 0, _chunkAFF2HPE5cjs.OPT_TEXT_SECONDARY, "text-xs font-medium"),
+                        children: "Match"
+                      }
+                    ),
+                    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                      "select",
+                      {
+                        value: group.logic,
+                        onChange: (e) => {
+                          const v = e.target.value;
+                          if (v === "and" || v === "or")
+                            updateGroupLogic(group.id, v);
+                        },
+                        className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                          "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",
+                          _chunkAFF2HPE5cjs.OPT_TEXT_PRIMARY,
+                          _chunkAFF2HPE5cjs.OPT_FOCUS_VISIBLE
+                        ),
+                        "aria-label": "Group logic",
+                        children: [
+                          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "and", children: "ALL" }),
+                          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "or", children: "ANY" })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunkAFF2HPE5cjs.cn.call(void 0, _chunkAFF2HPE5cjs.OPT_TEXT_SECONDARY, "text-xs"), children: "of the following" })
+                  ] }),
+                  groups.length > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => removeGroup(group.id),
+                      className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                        "text-danger-fg hover:bg-danger-subtle rounded p-1 text-xs",
+                        _chunkAFF2HPE5cjs.OPT_FOCUS_VISIBLE
+                      ),
+                      "aria-label": "Remove group",
+                      children: "\u2715"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex flex-col gap-2", children: group.conditions.map((cond, condIndex) => {
+                  const customRenderer = cond.type != null ? conditionTypes == null ? void 0 : conditionTypes[cond.type] : void 0;
+                  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
+                    condIndex > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      "span",
+                      {
+                        className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                          "w-8 text-center text-[10px] font-semibold uppercase",
+                          group.logic === "and" ? "text-info-fg" : "text-warning-fg"
+                        ),
+                        children: group.logic
+                      }
+                    ),
+                    condIndex === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "w-8" }),
+                    customRenderer ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      "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__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                        "select",
+                        {
+                          value: cond.property,
+                          onChange: (e) => updateCondition(group.id, cond.id, {
+                            property: e.target.value
+                          }),
+                          className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                            "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",
+                            _chunkAFF2HPE5cjs.OPT_TEXT_PRIMARY,
+                            _chunkAFF2HPE5cjs.OPT_FOCUS_VISIBLE
+                          ),
+                          "aria-label": "Property",
+                          children: properties.map((p) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: p, children: p }, p))
+                        }
+                      ),
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                        "select",
+                        {
+                          value: cond.operator,
+                          onChange: (e) => {
+                            const v = e.target.value;
+                            if (isConditionOperator(v))
+                              updateCondition(group.id, cond.id, {
+                                operator: v
+                              });
+                          },
+                          className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                            "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",
+                            _chunkAFF2HPE5cjs.OPT_TEXT_PRIMARY,
+                            _chunkAFF2HPE5cjs.OPT_FOCUS_VISIBLE
+                          ),
+                          "aria-label": "Operator",
+                          children: Object.entries(OPERATOR_LABELS).map(
+                            ([key, lbl]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: key, children: lbl }, key)
+                          )
+                        }
+                      ),
+                      !NO_VALUE_OPS.includes(cond.operator) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                        "input",
+                        {
+                          type: "text",
+                          value: cond.value,
+                          onChange: (e) => updateCondition(group.id, cond.id, {
+                            value: e.target.value
+                          }),
+                          placeholder: "Value",
+                          className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                            "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",
+                            _chunkAFF2HPE5cjs.OPT_TEXT_PRIMARY,
+                            "placeholder:text-text-tertiary",
+                            _chunkAFF2HPE5cjs.OPT_FOCUS_VISIBLE
+                          ),
+                          "aria-label": "Value"
+                        }
+                      )
+                    ] }),
+                    group.conditions.length > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => removeCondition(group.id, cond.id),
+                        className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                          "text-danger-fg hover:bg-danger-subtle rounded p-1 text-sm",
+                          _chunkAFF2HPE5cjs.OPT_FOCUS_VISIBLE
+                        ),
+                        "aria-label": "Remove condition",
+                        children: "\u2715"
+                      }
+                    )
+                  ] }, cond.id);
+                }) }),
+                nested && group.children && group.children.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "border-accent/30 mt-2 ml-4 border-l-2 pl-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  ConditionBuilder,
+                  {
+                    groups: group.children,
+                    onChange: (newChildren) => {
+                      onChange(
+                        groups.map(
+                          (g) => g.id === group.id ? _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {}, g), { children: newChildren }) : g
+                        )
+                      );
+                    },
+                    properties,
+                    addConditionLabel,
+                    addGroupLabel,
+                    addNestedGroupLabel,
+                    nested,
+                    maxDepth: maxDepth - 1,
+                    conditionTypes
+                  }
+                ) }),
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-2 flex items-center gap-2", children: [
+                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                    _chunkAFF2HPE5cjs.Button,
+                    {
+                      variant: "ghost",
+                      size: "sm",
+                      onClick: () => addCondition(group.id),
+                      children: [
+                        "+ ",
+                        addConditionLabel
+                      ]
+                    }
+                  ),
+                  nested && maxDepth > 1 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                    _chunkAFF2HPE5cjs.Button,
+                    {
+                      variant: "ghost",
+                      size: "sm",
+                      onClick: () => {
+                        var _a2;
+                        const nestedGroup = {
+                          id: createGroupId("-nested"),
+                          logic: group.logic === "and" ? "or" : "and",
+                          conditions: [
+                            {
+                              id: createConditionId("-nested"),
+                              property: (_a2 = properties[0]) != null ? _a2 : "",
+                              operator: "equals",
+                              value: ""
+                            }
+                          ]
+                        };
+                        onChange(
+                          groups.map(
+                            (g) => {
+                              var _a3;
+                              return g.id === group.id ? _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {}, g), {
+                                children: [...(_a3 = g.children) != null ? _a3 : [], nestedGroup]
+                              }) : g;
+                            }
+                          )
+                        );
+                      },
+                      children: [
+                        "+ ",
+                        addNestedGroupLabel
+                      ]
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ] }, group.id)),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            _chunkAFF2HPE5cjs.Button,
+            {
+              variant: "secondary",
+              size: "sm",
+              onClick: addGroup,
+              className: "self-start",
+              children: [
+                "+ ",
+                addGroupLabel
+              ]
+            }
+          ),
+          previewCount != null && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: _chunkAFF2HPE5cjs.cn.call(void 0, _chunkAFF2HPE5cjs.OPT_TEXT_SECONDARY, "text-sm"), children: [
+            formatOptNumber(previewCount),
+            " matches"
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}
+ConditionBuilder.displayName = "ConditionBuilder";
+
+// src/core/dropdown-menu.tsx
+
+var DropdownMenu = _chunkAFF2HPE5cjs.MenuRoot;
+function DropdownTrigger(_a) {
+  var _b = _a, { className } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, ["className"]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkAFF2HPE5cjs.MenuTrigger,
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, "cursor-pointer gap-2", className)
+    }, props), {
+      "data-opt-id": "C4BSS",
+      "data-opt-slug": "dropdown-menu.DropdownTrigger"
+    })
+  );
+}
+function DropdownContent(_a) {
+  var _b = _a, { className } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, ["className"]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkAFF2HPE5cjs.MenuPopover,
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, className)
+    }, props), {
+      "data-opt-id": "J6NF7",
+      "data-opt-slug": "dropdown-menu.DropdownContent"
+    })
+  );
+}
+function DropdownItem(_a) {
+  var _b = _a, {
+    className,
+    variant = "default"
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "className",
+    "variant"
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkAFF2HPE5cjs.MenuItem,
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+        "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"
+    })
+  );
+}
+function DropdownSeparator(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkAFF2HPE5cjs.MenuSeparator,
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, className)
+    }, props), {
+      "data-opt-id": "K9Y54",
+      "data-opt-slug": "dropdown-menu.DropdownSeparator"
+    })
+  );
+}
+
+// src/core/radio-group.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+var sizeStyles6 = {
+  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"
+  }
+};
+var RadioGroupContext = _react.createContext.call(void 0, {
+  size: "md"
+});
+function RadioGroup({
+  children,
+  value,
+  defaultValue = "",
+  onChange,
+  disabled,
+  size = "md",
+  error,
+  required,
+  className,
+  orientation = "vertical",
+  label,
+  name
+}) {
+  const ctxValue = _react.useMemo.call(void 0, () => ({ size, disabled }), [size, disabled]);
+  const hasError = Boolean(error);
+  const fallbackGroupId = _react.useId.call(void 0, ).replace(/:/g, "");
+  const groupId = label ? `radio-group-${label.replace(/\s+/g, "-").toLowerCase()}` : `radio-group-${fallbackGroupId}`;
+  const labelId = label ? `${groupId}-label` : void 0;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RadioGroupContext.Provider, { value: ctxValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, "flex flex-col gap-1.5", className),
+      "data-opt-id": "2F20H",
+      "data-opt-slug": "radio-group.RadioGroup",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _optuiprimitives.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": _chunkAFF2HPE5cjs.getDescribedBy.call(void 0, groupId, error, void 0),
+            className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+              "flex",
+              orientation === "vertical" ? "flex-col gap-3" : "flex-row gap-6"
+            ),
+            children: [
+              label && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                "div",
+                {
+                  id: labelId,
+                  className: "text-text-secondary mb-1 text-sm font-medium",
+                  children: [
+                    label,
+                    required && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAFF2HPE5cjs.RequiredMark, {})
+                  ]
+                }
+              ),
+              children
+            ]
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAFF2HPE5cjs.FieldMessages, { id: groupId, error })
+      ]
+    }
+  ) });
+}
+var Radio = _react.forwardRef.call(void 0, 
+  (_a, ref) => {
+    var _b = _a, {
+      label,
+      hint,
+      description,
+      value,
+      name: _name,
+      size: sizeProp,
+      disabled: disabledProp,
+      className
+    } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+      "label",
+      "hint",
+      "description",
+      "value",
+      "name",
+      "size",
+      "disabled",
+      "className"
+    ]);
+    var _a2;
+    const groupContext = _react.useContext.call(void 0, RadioGroupContext);
+    const primContext = _optuiprimitives.useRadioGroupContext.call(void 0, );
+    const size = sizeProp != null ? sizeProp : groupContext.size;
+    const disabled = (_a2 = disabledProp != null ? disabledProp : groupContext.disabled) != null ? _a2 : primContext == null ? void 0 : primContext.disabled;
+    const hintText = hint != null ? hint : description;
+    const styles = sizeStyles6[size];
+    const isChecked = (primContext == null ? void 0 : primContext.value) === value;
+    const fallbackRadioId = _react.useId.call(void 0, ).replace(/:/g, "");
+    const radioId = `radio-${fallbackRadioId}`;
+    const labelId = label ? `${radioId}-label` : void 0;
+    const hintId = hintText ? `${radioId}-hint` : void 0;
+    const handleChange = _react.useCallback.call(void 0, () => {
+      if (!disabled && value != null) {
+        primContext == null ? void 0 : primContext.setValue(value);
+      }
+    }, [disabled, value, primContext]);
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "label",
+      _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+        ref,
+        "aria-checked": isChecked,
+        className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+          "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__ */ _jsxruntime.jsx.call(void 0, 
+            "input",
+            {
+              id: radioId,
+              type: "radio",
+              name: primContext == null ? void 0 : primContext.name,
+              value,
+              checked: isChecked,
+              disabled,
+              onChange: handleChange,
+              "aria-label": label ? void 0 : value != null ? value : "Radio option",
+              "aria-labelledby": labelId,
+              "aria-describedby": hintId,
+              className: "sr-only"
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "span",
+            {
+              className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                "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__ */ _jsxruntime.jsx.call(void 0, 
+                "span",
+                {
+                  className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+                    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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col", children: [
+            label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "span",
+              {
+                id: labelId,
+                className: _chunkAFF2HPE5cjs.cn.call(void 0, "text-text-primary font-medium", styles.text),
+                children: label
+              }
+            ),
+            hintText && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { id: hintId, className: "text-text-tertiary text-sm", children: hintText })
+          ] })
+        ]
+      })
+    );
+  }
+);
+Radio.displayName = "Radio";
+
+// src/core/loading-overlay.tsx
+
+function LoadingOverlay(_a) {
+  var _b = _a, {
+    loading,
+    children,
+    label = "Loading\u2026",
+    className
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "loading",
+    "children",
+    "label",
+    "className"
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      "data-opt-id": "380ZR",
+      "data-opt-slug": "loading-overlay.LoadingOverlay"
+    }, props), {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, "relative", className),
+      children: [
+        children,
+        loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-center gap-2", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAFF2HPE5cjs.Spinner, { size: "md", "aria-hidden": "true" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-text-tertiary text-sm", children: label })
+            ] })
+          }
+        )
+      ]
+    })
+  );
+}
+LoadingOverlay.displayName = "LoadingOverlay";
+
+// src/core/block-layout.tsx
+
+var spacingClass = {
+  section: "gap-section",
+  group: "gap-group",
+  element: "gap-element",
+  none: "gap-0"
+};
+function BlockLayout(_a) {
+  var _b = _a, {
+    children,
+    className,
+    spacing = "section",
+    loading,
+    loadingLabel
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "children",
+    "className",
+    "spacing",
+    "loading",
+    "loadingLabel"
+  ]);
+  const layoutClassName = _chunkAFF2HPE5cjs.cn.call(void 0, "flex flex-col", spacingClass[spacing], className);
+  if (loading) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      LoadingOverlay,
+      _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+        "data-opt-id": "6RHZW",
+        "data-opt-slug": "block-layout.BlockLayout"
+      }, props), {
+        className: layoutClassName,
+        loading,
+        label: loadingLabel,
+        children
+      })
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      "data-opt-id": "6RHZW",
+      "data-opt-slug": "block-layout.BlockLayout"
+    }, props), {
+      className: layoutClassName,
+      children
+    })
+  );
+}
+BlockLayout.displayName = "BlockLayout";
+
+// src/core/create-block.tsx
+
+function createBlock(name, render, options) {
+  const Component = (props) => {
+    const _a = props, { loading, className } = _a, rest = _chunkONE3C5RVcjs.__objRest.call(void 0, _a, ["loading", "className"]);
+    const layoutCn = (options == null ? void 0 : options.layoutClassName) ? `${options.layoutClassName}${className ? ` ${className}` : ""}` : className;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BlockLayout, { loading, className: layoutCn, children: render(rest) });
+  };
+  Component.displayName = name;
+  return Component;
+}
+
+// src/core/page-header.tsx
+
+function PageHeader({
+  title,
+  description,
+  actions,
+  className
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, "gap-group flex items-center justify-between", className),
+      "data-opt-id": "7AK8Z",
+      "data-opt-slug": "page-header.PageHeader",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "gap-element flex flex-col", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "text-text-primary text-lg font-semibold", children: title }),
+          description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-text-tertiary text-sm", children: description })
+        ] }),
+        actions && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "gap-element flex shrink-0 items-center", children: actions })
+      ]
+    }
+  );
+}
+PageHeader.displayName = "PageHeader";
+
+// src/core/scroll-area.tsx
+
+var overflowMap = {
+  vertical: "overflow-y-auto overflow-x-hidden",
+  horizontal: "overflow-x-auto overflow-y-hidden",
+  both: "overflow-auto"
+};
+function ScrollArea({
+  children,
+  className,
+  orientation = "vertical"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+        overflowMap[orientation],
+        // Custom scrollbar styling
+        "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";
+
+// src/core/container.tsx
+
+var 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"
+};
+function Container({
+  children,
+  maxWidth = "xl",
+  center = true,
+  className
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+        maxWidthMap[maxWidth],
+        center && "mx-auto",
+        "px-4",
+        className
+      ),
+      "data-opt-id": "H3G96",
+      "data-opt-slug": "container.Container",
+      children
+    }
+  );
+}
+Container.displayName = "Container";
+
+// src/core/section.tsx
+
+
+function Section({
+  children,
+  title,
+  description,
+  className
+}) {
+  const id = _react.useId.call(void 0, );
+  const titleId = `${id}-title`;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "section",
+    {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "gap-element flex flex-col", children: [
+          title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "h3",
+            {
+              id: titleId,
+              className: "text-text-primary text-base font-semibold",
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-text-tertiary text-sm", children: description })
+        ] }),
+        children
+      ]
+    }
+  );
+}
+Section.displayName = "Section";
+
+// src/core/resizable.tsx
+var _reactresizablepanels = require('react-resizable-panels');
+
+function ResizablePanelGroup({
+  direction,
+  children,
+  className,
+  autoSaveId
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactresizablepanels.Group,
+    {
+      orientation: direction,
+      id: autoSaveId,
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, "flex h-full w-full", className),
+      "data-opt-id": "MW6TZ",
+      "data-opt-slug": "resizable.ResizablePanelGroup",
+      children
+    }
+  );
+}
+ResizablePanelGroup.displayName = "ResizablePanelGroup";
+function ResizablePanel({
+  defaultSize,
+  minSize,
+  maxSize,
+  collapsible,
+  children,
+  className,
+  id
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactresizablepanels.Panel,
+    {
+      id,
+      defaultSize,
+      minSize,
+      maxSize,
+      collapsible,
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, "overflow-auto", className),
+      "data-opt-id": "QRQV9",
+      "data-opt-slug": "resizable.ResizablePanel",
+      children
+    }
+  );
+}
+ResizablePanel.displayName = "ResizablePanel";
+function ResizableHandle({
+  className,
+  withHandle = false
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactresizablepanels.Separator,
+    {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+        "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
+      ),
+      "data-opt-id": "7QWEQ",
+      "data-opt-slug": "resizable.ResizableHandle",
+      children: withHandle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "border-border bg-surface z-10 flex h-4 w-3 items-center justify-center rounded-sm border", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "svg",
+        {
+          width: "6",
+          height: "10",
+          viewBox: "0 0 6 10",
+          fill: "none",
+          className: "text-text-tertiary",
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "1", cy: "2", r: "0.75", fill: "currentColor" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "1", cy: "5", r: "0.75", fill: "currentColor" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "1", cy: "8", r: "0.75", fill: "currentColor" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "5", cy: "2", r: "0.75", fill: "currentColor" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "5", cy: "5", r: "0.75", fill: "currentColor" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "5", cy: "8", r: "0.75", fill: "currentColor" })
+          ]
+        }
+      ) })
+    }
+  );
+}
+ResizableHandle.displayName = "ResizableHandle";
+
+// src/core/logo.tsx
+
+
+var markSizeStyles = {
+  sm: "h-6 w-6",
+  md: "h-8 w-8",
+  lg: "h-10 w-10"
+};
+var textSizeStyles = {
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg"
+};
+function Logo({
+  src,
+  icon,
+  text,
+  alt = "Logo",
+  size = "md",
+  href,
+  onClick,
+  className
+}) {
+  const [imageError, setImageError] = _react.useState.call(void 0, false);
+  const showImage = src && !imageError;
+  const fallbackLetter = text ? text.charAt(0).toUpperCase() : null;
+  let mark = null;
+  if (showImage) {
+    mark = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "img",
+      {
+        src,
+        alt,
+        className: _chunkAFF2HPE5cjs.cn.call(void 0, "object-contain", markSizeStyles[size]),
+        onError: () => setImageError(true)
+      }
+    );
+  } else if (icon) {
+    mark = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "span",
+      {
+        className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+          "flex shrink-0 items-center justify-center",
+          markSizeStyles[size]
+        ),
+        "aria-hidden": "true",
+        children: icon
+      }
+    );
+  } else if (fallbackLetter) {
+    mark = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "span",
+      {
+        className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+          "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__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    mark,
+    text && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "span",
+      {
+        className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+          "text-text-primary font-semibold",
+          textSizeStyles[size]
+        ),
+        children: text
+      }
+    )
+  ] });
+  const sharedClassName = _chunkAFF2HPE5cjs.cn.call(void 0, "inline-flex items-center gap-element", className);
+  if (href) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "a",
+      {
+        href,
+        onClick,
+        className: _chunkAFF2HPE5cjs.cn.call(void 0, sharedClassName, "no-underline"),
+        "aria-label": text != null ? text : alt,
+        "data-opt-id": "R906A",
+        "data-opt-slug": "logo.Logo",
+        children: content
+      }
+    );
+  }
+  if (onClick) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "button",
+      {
+        type: "button",
+        onClick,
+        className: sharedClassName,
+        "aria-label": text != null ? text : alt,
+        "data-opt-id": "R906A",
+        "data-opt-slug": "logo.Logo",
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: sharedClassName,
+      "data-opt-id": "R906A",
+      "data-opt-slug": "logo.Logo",
+      children: content
+    }
+  );
+}
+
+// src/core/drawer.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+var sizeMap = {
+  sm: "max-w-xs",
+  md: "max-w-md",
+  lg: "max-w-xl",
+  full: "max-w-full"
+};
+var heightMap = {
+  sm: "max-h-[320px]",
+  md: "max-h-[480px]",
+  lg: "max-h-[640px]",
+  full: "max-h-full"
+};
+var positionClass = {
+  right: "fixed inset-y-0 right-0",
+  left: "fixed inset-y-0 left-0",
+  bottom: "fixed inset-x-0 bottom-0"
+};
+function DrawerRoot(props) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _optuiprimitives.DialogRoot,
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      animated: true
+    }, props), {
+      "data-opt-id": "YGJ0M",
+      "data-opt-slug": "drawer.DrawerRoot"
+    })
+  );
+}
+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;
+  }
+}
+function DrawerPanel(_a) {
+  var _b = _a, {
+    className,
+    side = "right",
+    size = "md",
+    swipeToDismiss = true,
+    swipeDismissThreshold = 80,
+    style,
+    onPointerDown
+  } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, [
+    "className",
+    "side",
+    "size",
+    "swipeToDismiss",
+    "swipeDismissThreshold",
+    "style",
+    "onPointerDown"
+  ]);
+  const isHorizontal = side === "left" || side === "right";
+  const close = _optuiprimitives.useDialogClose.call(void 0, );
+  const dragStart = _react.useRef.call(void 0, null);
+  const [offset, setOffset] = _react.useState.call(void 0, 0);
+  const [dragging, setDragging] = _react.useState.call(void 0, false);
+  const axis = side === "bottom" ? "Y" : "X";
+  const DRAG_ACTIVATE = 6;
+  const handlePointerDown = _react.useCallback.call(void 0, 
+    (e) => {
+      onPointerDown == null ? void 0 : onPointerDown(e);
+      if (!swipeToDismiss || e.button !== 0) return;
+      dragStart.current = { x: e.clientX, y: e.clientY };
+    },
+    [swipeToDismiss, onPointerDown]
+  );
+  const handlePointerMove = _react.useCallback.call(void 0, 
+    (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 (e2) {
+        }
+      }
+      setOffset(next);
+    },
+    [side, dragging]
+  );
+  const endDrag = _react.useCallback.call(void 0, 
+    (e) => {
+      const wasDragging = dragging;
+      dragStart.current = null;
+      setDragging(false);
+      try {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+      } catch (e2) {
+      }
+      if (wasDragging && Math.abs(offset) >= swipeDismissThreshold) {
+        close();
+      }
+      setOffset(0);
+    },
+    [dragging, offset, swipeDismissThreshold, close]
+  );
+  const [keyboardInset, setKeyboardInset] = _react.useState.call(void 0, 0);
+  _react.useEffect.call(void 0, () => {
+    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__ */ _jsxruntime.jsx.call(void 0, 
+    _optuiprimitives.DialogPanel,
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+        "border-border bg-surface z-50 m-0 flex flex-col border p-0 shadow-2xl",
+        "data-[enter]:fade-in data-[leave]:fade-out",
+        // Suppress the slide animation while actively dragging.
+        dragging ? "touch-none" : _chunkAFF2HPE5cjs.OPT_ANIMATE_DRAWER[side],
+        positionClass[side],
+        isHorizontal ? ["h-full w-full", sizeMap[size]] : ["w-full", heightMap[size]],
+        className
+      ),
+      style: _chunkONE3C5RVcjs.__spreadValues.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {}, 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"
+    })
+  );
+}
+function DrawerClose(_a) {
+  var _b = _a, { className } = _b, props = _chunkONE3C5RVcjs.__objRest.call(void 0, _b, ["className"]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _optuiprimitives.DialogDismiss,
+    _chunkONE3C5RVcjs.__spreadProps.call(void 0, _chunkONE3C5RVcjs.__spreadValues.call(void 0, {
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, 
+        "hover:bg-bg-subtle rounded-md p-1.5 transition-colors",
+        "cursor-pointer data-[disabled]:cursor-not-allowed",
+        _chunkAFF2HPE5cjs.OPT_FOCUS,
+        className
+      )
+    }, props), {
+      "data-opt-id": "M6D6D",
+      "data-opt-slug": "drawer.DrawerClose"
+    })
+  );
+}
+
+// src/core/virtual-list.tsx
+
+
+
+
+
+
+
+
+function VirtualList({
+  items,
+  renderItem,
+  itemHeight,
+  overscan = 3,
+  className,
+  style
+}) {
+  const containerRef = _react.useRef.call(void 0, null);
+  const scrollTopRef = _react.useRef.call(void 0, 0);
+  const containerHeightRef = _react.useRef.call(void 0, 0);
+  const rafIdRef = _react.useRef.call(void 0, 0);
+  const [visibleRange, setVisibleRange] = _react.useState.call(void 0, { start: 0, end: 0 });
+  const totalHeight = items.length * itemHeight;
+  const computeRange = _react.useCallback.call(void 0, 
+    (scrollTop, height) => {
+      const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+      const visibleCount = Math.ceil(height / itemHeight);
+      const end = Math.min(
+        items.length - 1,
+        start + visibleCount + overscan * 2
+      );
+      return { start, end };
+    },
+    [itemHeight, overscan, items.length]
+  );
+  const scheduleUpdate = _react.useCallback.call(void 0, () => {
+    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 = _react.useCallback.call(void 0, () => {
+    const el = containerRef.current;
+    if (el) {
+      scrollTopRef.current = el.scrollTop;
+      if (el.clientHeight !== containerHeightRef.current) {
+        containerHeightRef.current = el.clientHeight;
+      }
+      scheduleUpdate();
+    }
+  }, [scheduleUpdate]);
+  const handleRef = _react.useCallback.call(void 0, 
+    (el) => {
+      containerRef.current = el;
+      if (el) {
+        containerHeightRef.current = el.clientHeight;
+        const range = computeRange(0, el.clientHeight);
+        setVisibleRange(range);
+      }
+    },
+    [computeRange]
+  );
+  _react.useEffect.call(void 0, () => {
+    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]);
+  _react.useEffect.call(void 0, () => {
+    scheduleUpdate();
+    return () => {
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = 0;
+      }
+    };
+  }, [scheduleUpdate, items.length, itemHeight, overscan]);
+  const visibleItems = _react.useMemo.call(void 0, () => {
+    const result = [];
+    for (let i = visibleRange.start; i <= visibleRange.end && i < items.length; i++) {
+      result.push(
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "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__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ref: handleRef,
+      onScroll: handleScroll,
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, "overflow-auto", className),
+      style: _chunkONE3C5RVcjs.__spreadValues.call(void 0, { position: "relative" }, style),
+      role: "list",
+      "data-opt-id": "VT2NP",
+      "data-opt-slug": "virtual-list.VirtualList",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { height: totalHeight, position: "relative" }, children: visibleItems })
+    }
+  );
+}
+
+// src/core/shader-presets.ts
+var SHADER_VERTEX = (
+  /* glsl */
+  `
+attribute vec2 position;
+attribute vec2 uv;
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = vec4(position, 0.0, 1.0);
+}
+`
+);
+var SHADER_PRELUDE = (
+  /* glsl */
+  `
+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 \u2014 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;
+}
+`
+);
+var PARAM_RANGE = {
+  scale: { min: 0.4, max: 3, step: 0.1, default: 1 },
+  speed: { min: 0, max: 3, step: 0.1, default: 0.5 },
+  distortion: { min: 0, max: 1, step: 0.01, default: 0.4 },
+  grain: { min: 0, max: 0.5, step: 0.01, default: 0.04 },
+  contrast: { min: 0, max: 1, step: 0.01, default: 0.4 },
+  angle: { min: 0, max: 360, step: 1, default: 0 },
+  dim: { min: 0, max: 1, step: 0.01, default: 0 },
+  vignette: { min: 0, max: 1, step: 0.01, default: 0 },
+  scrim: { min: 0, max: 1, step: 0.01, default: 0 },
+  interactive: { min: 0, max: 1, step: 0.01, default: 0 },
+  bars: { min: 2, max: 40, step: 1, default: 19 },
+  blur: { min: 0, max: 1, step: 0.01, default: 0.29 },
+  peak: { min: 0, max: 1, step: 0.01, default: 0.98 },
+  valley: { min: 0, max: 1, step: 0.01, default: 0.55 }
+};
+var 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 : range.default
+  };
+}
+var SHADER_PRESETS = [
+  {
+    id: "felix-metallic",
+    category: "luxury",
+    colorSlots: 3,
+    defaultColors: ["#0a1424", "#3a5a8c", "#c4d4e8"],
+    params: [
+      param("scale"),
+      param("speed", 0.4),
+      param("distortion", 0.45),
+      param("contrast", 0.4),
+      param("grain", 0.04)
+    ],
+    body: (
+      /* glsl */
+      `
+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", 0.4),
+      param("distortion", 0.4),
+      param("grain", 0.04),
+      param("angle", 30)
+    ],
+    body: (
+      /* glsl */
+      `
+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", 0.35),
+      param("distortion", 0.4),
+      param("grain", 0.04)
+    ],
+    body: (
+      /* glsl */
+      `
+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", 0.4),
+      param("contrast", 0.4),
+      param("grain", 0.05)
+    ],
+    body: (
+      /* glsl */
+      `
+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", 0.4),
+      param("distortion", 0.4),
+      param("grain", 0.03)
+    ],
+    body: (
+      /* glsl */
+      `
+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", 0.4),
+      param("distortion", 0.45),
+      param("grain", 0.03),
+      param("angle", 0)
+    ],
+    body: (
+      /* glsl */
+      `
+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", 0.35),
+      param("distortion", 0.4),
+      param("grain", 0.03)
+    ],
+    body: (
+      /* glsl */
+      `
+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", 0.4),
+      param("contrast", 0.4),
+      param("grain", 0.04)
+    ],
+    body: (
+      /* glsl */
+      `
+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", 0.5), param("grain", 0.04)],
+    body: (
+      /* glsl */
+      `
+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", 0.4),
+      param("distortion", 0.4),
+      param("grain", 0.03)
+    ],
+    body: (
+      /* glsl */
+      `
+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", 0.4),
+      param("distortion", 0.45),
+      param("grain", 0.03)
+    ],
+    body: (
+      /* glsl */
+      `
+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", 0.4),
+      param("distortion", 0.4),
+      param("grain", 0.03)
+    ],
+    body: (
+      /* glsl */
+      `
+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", 0.35),
+      param("distortion", 0.5),
+      param("grain", 0.03)
+    ],
+    body: (
+      /* glsl */
+      `
+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", 0.35),
+      param("contrast", 0.4),
+      param("grain", 0.03)
+    ],
+    body: (
+      /* glsl */
+      `
+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", 0.35),
+      param("distortion", 0.4),
+      param("grain", 0.03)
+    ],
+    body: (
+      /* glsl */
+      `
+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", 0.35), param("distortion", 0.35)],
+    body: (
+      /* glsl */
+      `
+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", 0.35), param("distortion", 0.45)],
+    body: (
+      /* glsl */
+      `
+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", 0.3)
+    ],
+    body: (
+      /* glsl */
+      `
+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);
+}
+`
+    )
+  }
+];
+var SHADER_PRESET_IDS = SHADER_PRESETS.map(
+  (preset) => preset.id
+);
+var SHADER_PARAM_KEYS = [
+  "scale",
+  "speed",
+  "distortion",
+  "grain",
+  "contrast",
+  "angle",
+  "dim",
+  "vignette",
+  "scrim",
+  "interactive",
+  "bars",
+  "blur",
+  "peak",
+  "valley"
+];
+var SHADER_OVERLAY_PARAM_KEYS = [
+  "dim",
+  "vignette",
+  "scrim"
+];
+var PRESET_BY_ID = new Map(
+  SHADER_PRESETS.map((preset) => [preset.id, preset])
+);
+function getShaderPreset(id) {
+  var _a;
+  return (_a = PRESET_BY_ID.get(id)) != null ? _a : SHADER_PRESETS[0];
+}
+function getShaderFragment(preset) {
+  return `${SHADER_PRELUDE}
+${preset.body}`;
+}
+
+// src/core/shader-surface.tsx
+
+
+
+
+
+
+
+var _ogl = require('ogl');
+var _optpalette = require('@reopt-ai/opt-palette');
+
+var STATIC_TIME = 8;
+function toRgbFloat(hex) {
+  try {
+    const [r, g, b] = _optpalette.hexToSrgb.call(void 0, hex);
+    return [r / 255, g / 255, b / 255];
+  } catch (e) {
+    return [0, 0, 0];
+  }
+}
+function resolveColors(presetId, colors) {
+  var _a, _b, _c, _d, _e, _f;
+  const preset = getShaderPreset(presetId);
+  const source = colors && colors.length > 0 ? colors : preset.defaultColors;
+  return [
+    (_a = source[0]) != null ? _a : preset.defaultColors[0],
+    (_c = (_b = source[1]) != null ? _b : source[0]) != null ? _c : preset.defaultColors[1],
+    (_f = (_e = (_d = source[2]) != null ? _d : source[1]) != null ? _e : source[0]) != null ? _f : preset.defaultColors[2]
+  ];
+}
+function resolveParam(presetId, key, override) {
+  var _a;
+  if (typeof override === "number" && Number.isFinite(override))
+    return override;
+  const spec = getShaderPreset(presetId).params.find((p) => p.key === key);
+  return (_a = spec == null ? void 0 : spec.default) != null ? _a : SHADER_PARAM_FALLBACK[key];
+}
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && window.matchMedia ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false;
+}
+var ShaderSurfaceComponent = _react.forwardRef.call(void 0, 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 = _react.useRef.call(void 0, null);
+  const canvasRef = _react.useRef.call(void 0, null);
+  const stateRef = _react.useRef.call(void 0, {
+    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 = _react.useRef.call(void 0, null);
+  const programRef = _react.useRef.call(void 0, null);
+  const renderAtRef = _react.useRef.call(void 0, null);
+  const loopRef = _react.useRef.call(void 0, null);
+  const mouseRef = _react.useRef.call(void 0, [0.5, 0.5]);
+  const fallbackBackground = _react.useMemo.call(void 0, () => {
+    const [c1, c2, c3] = resolveColors(preset, colors);
+    const deg = resolveParam(preset, "angle", angle);
+    return `linear-gradient(${deg + 120}deg, ${c1}, ${c2}, ${c3})`;
+  }, [preset, colors, angle]);
+  _react.useImperativeHandle.call(void 0, 
+    ref,
+    () => ({
+      capture: () => {
+        var _a;
+        const canvas = canvasRef.current;
+        if (!canvas || !renderAtRef.current || !programRef.current) return null;
+        const now = stateRef.current.paused ? (_a = stateRef.current.time) != null ? _a : STATIC_TIME : performance.now() / 1e3;
+        renderAtRef.current(now);
+        try {
+          return canvas.toDataURL("image/png");
+        } catch (e) {
+          return null;
+        }
+      }
+    }),
+    []
+  );
+  _react.useEffect.call(void 0, () => {
+    const container = containerRef.current;
+    const canvas = canvasRef.current;
+    if (!container || !canvas) return;
+    let renderer;
+    try {
+      renderer = new (0, _ogl.Renderer)({
+        canvas,
+        dpr: dpr != null ? dpr : typeof window !== "undefined" ? Math.min(window.devicePixelRatio || 1, 2) : 1,
+        alpha: true,
+        premultipliedAlpha: false
+      });
+    } catch (e) {
+      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 _a;
+        return resolveParam(s.preset, key, override != null ? override : (_a = s.params) == null ? void 0 : _a[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 _a;
+      return (_a = stateRef.current.time) != null ? _a : 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 ? void 0 : resizeObserver.observe(container);
+    const intersectionObserver = typeof IntersectionObserver !== "undefined" ? new IntersectionObserver(
+      (entries) => {
+        var _a, _b;
+        inView = (_b = (_a = entries[0]) == null ? void 0 : _a.isIntersecting) != null ? _b : true;
+        if (inView && isAnimating()) start();
+        else stop();
+      },
+      { threshold: 0 }
+    ) : null;
+    intersectionObserver == null ? 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 ? void 0 : resizeObserver.disconnect();
+      intersectionObserver == null ? void 0 : intersectionObserver.disconnect();
+      container.removeEventListener("pointermove", handlePointer);
+      loopRef.current = null;
+      renderAtRef.current = null;
+      rendererRef.current = null;
+    };
+  }, [dpr]);
+  _react.useEffect.call(void 0, () => {
+    var _a, _b;
+    const engine = rendererRef.current;
+    if (!engine) return;
+    const { gl } = engine;
+    const presetDef = getShaderPreset(preset);
+    const geometry = new (0, _ogl.Triangle)(gl);
+    const program = new (0, _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: 0.5 },
+        u_grain: { value: 0 },
+        u_contrast: { value: 0.5 },
+        u_angle: { value: 0 },
+        u_dim: { value: 0 },
+        u_vignette: { value: 0 },
+        u_scrim: { value: 0 },
+        u_mouse: { value: [0.5, 0.5] },
+        u_interactive: { value: 0 },
+        u_bars: { value: 19 },
+        u_blur: { value: 0.29 },
+        u_peak: { value: 0.98 },
+        u_valley: { value: 0.55 },
+        u_color1: { value: [0, 0, 0] },
+        u_color2: { value: [0, 0, 0] },
+        u_color3: { value: [0, 0, 0] }
+      }
+    });
+    const mesh = new (0, _ogl.Mesh)(gl, { geometry, program });
+    programRef.current = { program, mesh, geometry };
+    const loop = loopRef.current;
+    if (loop == null ? void 0 : loop.isAnimating()) loop.start();
+    else (_b = renderAtRef.current) == null ? void 0 : _b.call(renderAtRef, (_a = stateRef.current.time) != null ? _a : STATIC_TIME);
+    return () => {
+      programRef.current = null;
+      program.remove();
+      geometry.remove();
+    };
+  }, [preset]);
+  _react.useEffect.call(void 0, () => {
+    var _a, _b;
+    const loop = loopRef.current;
+    if (!loop) return;
+    if (loop.isAnimating()) loop.start();
+    else {
+      loop.stop();
+      (_b = renderAtRef.current) == null ? void 0 : _b.call(renderAtRef, (_a = stateRef.current.time) != null ? _a : STATIC_TIME);
+    }
+  }, [
+    paused,
+    colors,
+    scale,
+    speed,
+    distortion,
+    grain,
+    contrast,
+    angle,
+    dim,
+    vignette,
+    scrim,
+    interactive,
+    params,
+    time
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ref: containerRef,
+      "aria-hidden": ariaHidden,
+      className: _chunkAFF2HPE5cjs.cn.call(void 0, "relative overflow-hidden", className),
+      style: _chunkONE3C5RVcjs.__spreadValues.call(void 0, { background: fallbackBackground }, style),
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "canvas",
+        {
+          ref: canvasRef,
+          className: "absolute inset-0 block h-full w-full"
+        }
+      )
+    }
+  );
+});
+ShaderSurfaceComponent.displayName = "ShaderSurface";
+var ShaderSurface2 = ShaderSurfaceComponent;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.Text = Text; exports.Heading = Heading; exports.Separator = Separator; exports.OtpField = OtpField; exports.Toggle = Toggle; exports.ToggleGroup = ToggleGroup; exports.AccordionRoot = AccordionRoot; exports.AccordionItem = AccordionItem; exports.AccordionTrigger = AccordionTrigger; exports.AccordionContent = AccordionContent; exports.Breadcrumb = Breadcrumb; exports.Card = Card; exports.CardHeader = CardHeader; exports.CardTitle = CardTitle; exports.CardDescription = CardDescription; exports.CardContent = CardContent; exports.CardFooter = CardFooter; exports.Input = Input; exports.Switch = Switch; exports.Skeleton = Skeleton; exports.SkeletonText = SkeletonText; exports.SkeletonAvatar = SkeletonAvatar; exports.SkeletonCard = SkeletonCard; exports.SkeletonTable = SkeletonTable; exports.Textarea = Textarea; exports.Avatar = Avatar; exports.AvatarGroup = AvatarGroup; exports.Progress = Progress; exports.CircularProgress = CircularProgress; exports.Meter = Meter; exports.StepBuilder = StepBuilder; exports.formatOptShortDate = formatOptShortDate; exports.formatOptTime = formatOptTime; exports.formatOptDateTime = formatOptDateTime; exports.formatOptNumber = formatOptNumber; exports.ConditionBuilder = ConditionBuilder; exports.DropdownMenu = DropdownMenu; exports.DropdownTrigger = DropdownTrigger; exports.DropdownContent = DropdownContent; exports.DropdownItem = DropdownItem; exports.DropdownSeparator = DropdownSeparator; exports.RadioGroup = RadioGroup; exports.Radio = Radio; exports.LoadingOverlay = LoadingOverlay; exports.BlockLayout = BlockLayout; exports.createBlock = createBlock; exports.PageHeader = PageHeader; exports.ScrollArea = ScrollArea; exports.Container = Container; exports.Section = Section; exports.ResizablePanelGroup = ResizablePanelGroup; exports.ResizablePanel = ResizablePanel; exports.ResizableHandle = ResizableHandle; exports.Logo = Logo; exports.DrawerRoot = DrawerRoot; exports.DrawerPanel = DrawerPanel; exports.DrawerClose = DrawerClose; exports.VirtualList = VirtualList; exports.SHADER_PARAM_FALLBACK = SHADER_PARAM_FALLBACK; exports.SHADER_PRESETS = SHADER_PRESETS; exports.SHADER_PRESET_IDS = SHADER_PRESET_IDS; exports.SHADER_PARAM_KEYS = SHADER_PARAM_KEYS; exports.SHADER_OVERLAY_PARAM_KEYS = SHADER_OVERLAY_PARAM_KEYS; exports.getShaderPreset = getShaderPreset; exports.getShaderFragment = getShaderFragment; exports.ShaderSurface = ShaderSurface2;