@nukleas/react-cyberdesign 0.1.0

package/dist/index.cjs

@@ -0,0 +1,3340 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/lib/cn.ts
+function cn(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+var ThemeContext = react.createContext("orange");
+function useTheme() {
+  return react.useContext(ThemeContext);
+}
+function ThemeProvider({
+  theme = "orange",
+  a11y = false,
+  className,
+  children,
+  ...rest
+}) {
+  const value = react.useMemo(() => theme, [theme]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(`theme-${theme}`, a11y && "cd-a11y", className),
+      "data-cd-theme": theme,
+      ...rest,
+      children
+    }
+  ) });
+}
+function AccordionItem({ title, icon, children, className = "", ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("details", { className: cn("cd-accordion__item", className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "cd-accordion__trigger", children: [
+      icon != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-accordion__icon", children: icon }),
+      title
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-accordion__body", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-accordion__content", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-accordion__content-inner", children }) }) })
+  ] });
+}
+function AccordionRoot({
+  items,
+  variant = "default",
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "cd-accordion",
+        variant !== "default" && `cd-accordion--${variant}`,
+        className
+      ),
+      ...rest,
+      children: items ? items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        AccordionItem,
+        {
+          title: item.title,
+          icon: item.icon,
+          open: item.defaultOpen,
+          children: item.content
+        },
+        i
+      )) : children
+    }
+  );
+}
+var Accordion = Object.assign(AccordionRoot, { Item: AccordionItem });
+function Alert({
+  variant = "info",
+  size,
+  inline = false,
+  title,
+  icon,
+  onDismiss,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "cd-alert",
+        `cd-alert--${variant}`,
+        size === "sm" && "cd-alert--sm",
+        inline && "cd-alert--inline",
+        className
+      ),
+      ...rest,
+      children: [
+        icon != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-alert__icon", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-alert__content", children: [
+          title != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-alert__title", children: title }),
+          children != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-alert__body", children })
+        ] }),
+        onDismiss && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "cd-alert__dismiss", onClick: onDismiss, "aria-label": "Dismiss", children: "\u2715" })
+      ]
+    }
+  );
+}
+function Modal({
+  open,
+  onClose,
+  title,
+  footer,
+  size = "default",
+  hideClose = false,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("cd-modal-overlay", open && "is-open"),
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onClose?.();
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn("cd-modal", size !== "default" && `cd-modal--${size}`, className),
+          role: "dialog",
+          "aria-modal": "true",
+          ...rest,
+          children: [
+            (title != null || !hideClose) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-modal__header", children: [
+              title != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-modal__title", children: title }),
+              !hideClose && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "cd-modal__close", onClick: onClose, "aria-label": "Close", children: "\u2715" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-modal__body", children }),
+            footer != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-modal__footer", children: footer })
+          ]
+        }
+      )
+    }
+  );
+}
+function Button({
+  variant = "default",
+  size = "md",
+  icon = false,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      className: cn(
+        "cd-btn",
+        variant !== "default" && `cd-btn--${variant}`,
+        size === "sm" && "cd-btn--sm",
+        icon && "cd-btn--icon",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+function AlertDialog({
+  open,
+  onClose,
+  title = "Confirm",
+  children,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  destructive = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Modal,
+    {
+      open,
+      onClose,
+      title,
+      size: "sm",
+      footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", onClick: onClose, children: cancelLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            variant: destructive ? "danger" : "primary",
+            onClick: () => {
+              onConfirm?.();
+              onClose?.();
+            },
+            children: confirmLabel
+          }
+        )
+      ] }),
+      children
+    }
+  );
+}
+function AspectRatio({
+  ratio = 16 / 9,
+  className = "",
+  style,
+  children,
+  ...rest
+}) {
+  const merged = {
+    ...style,
+    paddingBottom: `${1 / ratio * 100}%`
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("cd-aspect-ratio", className), style: merged, ...rest, children });
+}
+function AugButton({
+  variant = "default",
+  size = "md",
+  reverse = false,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      className: cn(
+        "cd-aug-btn",
+        variant === "primary" && "cd-aug-btn--primary",
+        size === "sm" && "cd-aug-btn--sm",
+        size === "lg" && "cd-aug-btn--lg",
+        reverse && "cd-aug-btn--rev",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+function AugPanel({
+  size = "md",
+  corners4 = false,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "cd-aug-panel",
+        size === "sm" && "cd-aug-panel--sm",
+        size === "lg" && "cd-aug-panel--lg",
+        corners4 && "cd-aug-panel--4",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+function Avatar({
+  src,
+  alt = "",
+  fallback,
+  size = "md",
+  glow = false,
+  status,
+  className = "",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "cd-avatar",
+        size !== "md" && `cd-avatar--${size}`,
+        glow && "cd-avatar--glow",
+        className
+      ),
+      "data-status": status,
+      ...rest,
+      children: src != null ? /* @__PURE__ */ jsxRuntime.jsx("img", { className: "cd-avatar__image", src, alt }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-avatar__fallback", children: fallback })
+    }
+  );
+}
+function AvatarGroup({ more, className = "", children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-avatar-group", className), ...rest, children: [
+    children,
+    more != null && more > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cd-avatar-group__more", children: [
+      "+",
+      more
+    ] })
+  ] });
+}
+Avatar.Group = AvatarGroup;
+function Badge({
+  color = "orange",
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("cd-badge", `cd-badge--${color}`, className), ...rest, children });
+}
+function BottomNav({
+  items,
+  value,
+  onValueChange,
+  className = "",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cn("cd-bottom-nav", className), ...rest, children: items.map((item) => {
+    const active = value === item.id;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        disabled: item.disabled,
+        className: cn("cd-bottom-nav__item", active && "is-active"),
+        "data-active": active || void 0,
+        onClick: () => onValueChange?.(item.id),
+        children: [
+          item.icon != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-bottom-nav__icon", children: item.icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-bottom-nav__label", children: item.label }),
+          item.badge != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-bottom-nav__badge", children: item.badge })
+        ]
+      },
+      item.id
+    );
+  }) });
+}
+function Breadcrumb({
+  items,
+  variant = "default",
+  className = "",
+  "aria-label": ariaLabel = "breadcrumb",
+  ...rest
+}) {
+  const lastIndex = items.length - 1;
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": ariaLabel, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "ol",
+    {
+      className: cn(
+        "cd-breadcrumb",
+        variant === "arrow" && "cd-breadcrumb--arrow",
+        variant === "dot" && "cd-breadcrumb--dot",
+        className
+      ),
+      children: items.map((item, i) => {
+        const isActive = item.active ?? i === lastIndex;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "li",
+          {
+            className: cn("cd-breadcrumb__item", isActive && "cd-breadcrumb__item--active"),
+            children: isActive || item.href == null ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx("a", { className: "cd-breadcrumb__link", href: item.href, children: item.label })
+          },
+          i
+        );
+      })
+    }
+  ) });
+}
+function ButtonGroup({
+  vertical = false,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("cd-btn-group", vertical && "cd-btn-group--vertical", className),
+      role: "group",
+      ...rest,
+      children
+    }
+  );
+}
+var WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function startOfMonth(d) {
+  return new Date(d.getFullYear(), d.getMonth(), 1);
+}
+function daysInMonth(d) {
+  return new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();
+}
+function sameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function formatMonth(d) {
+  return d.toLocaleString(void 0, { month: "long", year: "numeric" });
+}
+function Calendar({
+  selected,
+  defaultSelected,
+  month,
+  defaultMonth,
+  onSelect,
+  onMonthChange,
+  className = "",
+  ...rest
+}) {
+  const [internalMonth, setInternalMonth] = react.useState(
+    () => startOfMonth(defaultMonth ?? defaultSelected ?? /* @__PURE__ */ new Date())
+  );
+  const [internalSelected, setInternalSelected] = react.useState(defaultSelected);
+  const view = startOfMonth(month ?? internalMonth);
+  const value = selected ?? internalSelected;
+  const today = react.useMemo(() => /* @__PURE__ */ new Date(), []);
+  const setView = (d) => {
+    const next = startOfMonth(d);
+    if (month == null) setInternalMonth(next);
+    onMonthChange?.(next);
+  };
+  const cells = react.useMemo(() => {
+    const firstDow = view.getDay();
+    const total = daysInMonth(view);
+    const prevTotal = daysInMonth(new Date(view.getFullYear(), view.getMonth() - 1, 1));
+    const out = [];
+    for (let i = firstDow - 1; i >= 0; i--) {
+      out.push({
+        date: new Date(view.getFullYear(), view.getMonth() - 1, prevTotal - i),
+        outside: true
+      });
+    }
+    for (let d = 1; d <= total; d++) {
+      out.push({ date: new Date(view.getFullYear(), view.getMonth(), d), outside: false });
+    }
+    while (out.length % 7 !== 0) {
+      const last = out[out.length - 1].date;
+      out.push({
+        date: new Date(last.getFullYear(), last.getMonth(), last.getDate() + 1),
+        outside: true
+      });
+    }
+    return out;
+  }, [view]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-calendar", className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-calendar__header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-calendar__title", children: formatMonth(view) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-calendar__nav", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "cd-calendar__nav-btn",
+            "aria-label": "Previous month",
+            onClick: () => setView(new Date(view.getFullYear(), view.getMonth() - 1, 1)),
+            children: "\u2039"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "cd-calendar__nav-btn",
+            "aria-label": "Next month",
+            onClick: () => setView(new Date(view.getFullYear(), view.getMonth() + 1, 1)),
+            children: "\u203A"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-calendar__grid", children: [
+      WEEKDAYS.map((w) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-calendar__weekday", children: w }, w)),
+      cells.map(({ date, outside }) => {
+        const isSelected = value ? sameDay(date, value) : false;
+        const isToday = sameDay(date, today);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "cd-calendar__day",
+              outside && "is-outside",
+              isToday && "is-today",
+              isSelected && "is-selected"
+            ),
+            onClick: () => {
+              if (selected == null) setInternalSelected(date);
+              onSelect?.(date);
+            },
+            children: date.getDate()
+          },
+          date.toISOString()
+        );
+      })
+    ] })
+  ] });
+}
+function Card({ glow = false, className = "", children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("cd-card", glow && "cd-card--glow", className), ...rest, children });
+}
+function CardHeader({ row = false, className = "", children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("cd-card__header", row && "cd-card__header--row", className), ...rest, children });
+}
+function CardTitle({ className = "", children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("cd-card__title", className), ...rest, children });
+}
+function CardDescription({ className = "", children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("cd-card__description", className), ...rest, children });
+}
+function CardContent({ className = "", children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("cd-card__content", className), ...rest, children });
+}
+function CardFooter({ end = false, className = "", children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("cd-card__footer", end && "cd-card__footer--end", className), ...rest, children });
+}
+Object.assign(Card, {
+  Header: CardHeader,
+  Title: CardTitle,
+  Description: CardDescription,
+  Content: CardContent,
+  Footer: CardFooter
+});
+function Carousel({
+  children,
+  defaultIndex = 0,
+  showDots = true,
+  showControls = true,
+  className = "",
+  ...rest
+}) {
+  const slides = react.Children.toArray(children).filter(react.isValidElement);
+  const [index, setIndex] = react.useState(defaultIndex);
+  const count = slides.length;
+  const go = (i) => setIndex((i % count + count) % count);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-carousel", className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-carousel__viewport", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "cd-carousel__track",
+        style: { transform: `translateX(-${index * 100}%)` },
+        children: slides.map((slide, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-carousel__slide", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-carousel__slide-inner", children: slide }) }, i))
+      }
+    ) }),
+    (showControls || showDots) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-carousel__controls", children: [
+      showControls && /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", size: "sm", onClick: () => go(index - 1), "aria-label": "Previous", children: "\u2039" }),
+      showDots && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-carousel__dots", children: slides.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: cn("cd-carousel__dot", i === index && "is-active"),
+          "aria-label": `Go to slide ${i + 1}`,
+          onClick: () => setIndex(i)
+        },
+        i
+      )) }),
+      showControls && /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", size: "sm", onClick: () => go(index + 1), "aria-label": "Next", children: "\u203A" })
+    ] })
+  ] });
+}
+function Chip({
+  active = false,
+  size = "md",
+  className = "",
+  children,
+  type = "button",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type,
+      className: cn("cd-chip", size === "sm" && "cd-chip--sm", active && "is-active", className),
+      "data-active": active || void 0,
+      "aria-pressed": active,
+      ...rest,
+      children
+    }
+  );
+}
+function ChipRow({ className = "", children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("cd-chip-row", className), ...rest, children });
+}
+function Input({
+  size = "md",
+  accent = false,
+  error = false,
+  className = "",
+  type = "text",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type,
+      className: cn(
+        "cd-input",
+        size === "sm" && "cd-input--sm",
+        size === "lg" && "cd-input--lg",
+        accent && "cd-input--accent",
+        error && "cd-input--error",
+        className
+      ),
+      ...rest
+    }
+  );
+}
+function PanelHeader({
+  actions,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-panel-header", className), ...rest, children: [
+    children,
+    actions != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-panel-header__actions", children: actions })
+  ] });
+}
+function Spinner({
+  size = "md",
+  variant = "ring",
+  label = "Loading",
+  className = "",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": label,
+      className: cn(
+        "cd-spinner",
+        size !== "md" && `cd-spinner--${size}`,
+        variant === "dual" && "cd-spinner--dual",
+        variant === "dots" && "cd-spinner--dots",
+        className
+      ),
+      ...rest,
+      children: variant === "dots" && /* @__PURE__ */ jsxRuntime.jsx("span", {})
+    }
+  );
+}
+function ChatAction({
+  icon,
+  label,
+  active = false,
+  danger = false,
+  showLabel = false,
+  className = "",
+  type = "button",
+  title,
+  children,
+  ...rest
+}) {
+  const tip = title ?? (typeof label === "string" ? label : void 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type,
+      title: tip,
+      "aria-label": typeof tip === "string" ? tip : void 0,
+      className: cn(
+        "cd-chat-action",
+        active && "is-active",
+        danger && "cd-chat-action--danger",
+        className
+      ),
+      ...rest,
+      children: [
+        icon != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-chat-action__icon", children: icon }),
+        (showLabel || !icon && label != null) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-chat-action__label", children: label }),
+        children
+      ]
+    }
+  );
+}
+function ChatActions({
+  placement = "overlay",
+  visible = false,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "cd-chat-actions",
+        placement === "overlay" ? "cd-chat-actions--overlay" : "cd-chat-actions--below",
+        visible && "is-visible",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+function ChatCodeBlock({
+  code,
+  language = "code",
+  onCopy,
+  onInsert,
+  onRun,
+  className = "",
+  ...rest
+}) {
+  const [copied, setCopied] = react.useState(false);
+  const copy = async () => {
+    try {
+      await navigator.clipboard?.writeText(code);
+    } catch {
+    }
+    setCopied(true);
+    onCopy?.(code);
+    window.setTimeout(() => setCopied(false), 1400);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-chat-code", className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-chat-code__header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: language }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-chat-code__header-actions", children: [
+        onRun && /* @__PURE__ */ jsxRuntime.jsx(ChatAction, { icon: "\u25B6", label: "Run", title: "Run / play", onClick: () => onRun(code) }),
+        onInsert && /* @__PURE__ */ jsxRuntime.jsx(ChatAction, { icon: "\u21A7", label: "Insert", title: "Insert into editor", onClick: () => onInsert(code) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ChatAction,
+          {
+            icon: copied ? "\u2713" : "\u29C9",
+            label: copied ? "Copied" : "Copy",
+            title: "Copy code",
+            active: copied,
+            onClick: copy
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("pre", { children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: code }) })
+  ] });
+}
+var ROLE_AUTHOR = {
+  user: "You",
+  assistant: "AI",
+  system: "System",
+  error: "Error"
+};
+function ChatMessage({
+  role,
+  children,
+  code,
+  codeLang = "strudel",
+  time,
+  author,
+  actions,
+  actionsVisible = false,
+  onCopyCode,
+  onInsertCode,
+  onRunCode,
+  className = "",
+  ...rest
+}) {
+  const showMeta = author != null || time != null || role !== "system";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-chat-row", `cd-chat-row--${role}`, className), ...rest, children: [
+    showMeta && role !== "system" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-chat-row__meta", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: author ?? ROLE_AUTHOR[role] }),
+      time != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-chat-row__meta-right", children: time })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-chat-msg", `cd-chat-msg--${role}`), style: { position: "relative", maxWidth: "100%" }, children: [
+      children,
+      actions != null && /* @__PURE__ */ jsxRuntime.jsx(ChatActions, { placement: "overlay", visible: actionsVisible, children: actions })
+    ] }),
+    code != null && /* @__PURE__ */ jsxRuntime.jsx(
+      ChatCodeBlock,
+      {
+        code,
+        language: codeLang,
+        onCopy: onCopyCode,
+        onInsert: onInsertCode,
+        onRun: onRunCode,
+        style: { width: "100%", maxWidth: 420 }
+      }
+    )
+  ] });
+}
+function ChatTyping({ label = "Thinking", className = "", ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-chat-typing", className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cd-chat-typing__dots", "aria-hidden": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+      /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+      /* @__PURE__ */ jsxRuntime.jsx("span", {})
+    ] }),
+    label
+  ] });
+}
+function Chat({
+  title = "AI",
+  actions,
+  messages = [],
+  prompts,
+  onPrompt,
+  value,
+  onValueChange,
+  placeholder = "Ask for a pattern\u2026",
+  onSubmit,
+  submitLabel = "Send",
+  composerTools,
+  typing = false,
+  typingLabel,
+  disabled = false,
+  renderMessage,
+  className = "",
+  children,
+  ...rest
+}) {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (disabled) return;
+    if (value?.trim()) onSubmit?.(value.trim());
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-chat", className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PanelHeader, { actions, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-chat__messages", children: [
+      messages.map(
+        (m, i) => renderMessage ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderMessage(m, i) }, m.id ?? i) : /* @__PURE__ */ jsxRuntime.jsx(
+          ChatMessage,
+          {
+            role: m.role,
+            code: m.code,
+            codeLang: m.codeLang,
+            time: m.time,
+            author: m.author,
+            children: m.content
+          },
+          m.id ?? i
+        )
+      ),
+      typing && /* @__PURE__ */ jsxRuntime.jsx(ChatTyping, { label: typingLabel }),
+      children
+    ] }),
+    prompts != null && prompts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-chat__prompts", children: prompts.map((p) => /* @__PURE__ */ jsxRuntime.jsx(Chip, { size: "sm", onClick: () => onPrompt?.(p.value), children: p.label }, String(p.value))) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-chat__composer-wrap", children: [
+      composerTools != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-chat__composer-tools", children: composerTools }),
+      /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "cd-chat__composer", onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            value,
+            onChange: (e) => onValueChange?.(e.target.value),
+            placeholder,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", variant: "primary", size: "sm", disabled: disabled || !value?.trim(), children: disabled ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "xs" }) : submitLabel })
+      ] })
+    ] })
+  ] });
+}
+function Checkbox({ label, description, className = "", ...rest }) {
+  const input = /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: cn("cd-checkbox", !label && className), ...rest });
+  if (label == null && description == null) return input;
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cn("cd-control", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: "cd-checkbox", ...rest }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cd-control__label", children: [
+      label,
+      description != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-control__desc", children: description })
+    ] })
+  ] });
+}
+function Clock({
+  timeZone,
+  showDate = true,
+  hour12 = false,
+  className = "",
+  ...rest
+}) {
+  const [now, setNow] = react.useState(() => /* @__PURE__ */ new Date());
+  react.useEffect(() => {
+    const id = window.setInterval(() => setNow(/* @__PURE__ */ new Date()), 1e3);
+    return () => window.clearInterval(id);
+  }, []);
+  const time = now.toLocaleTimeString(void 0, {
+    hour12,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    timeZone
+  });
+  const date = now.toLocaleDateString(void 0, {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    timeZone
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("cd-clock", className), ...rest, children: [
+    showDate && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-clock__date", children: date }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-clock__time", children: time })
+  ] });
+}
+function Collapsible({
+  trigger,
+  defaultOpen = false,
+  open,
+  onOpenChange,
+  className = "",
+  children,
+  ...rest
+}) {
+  const [internal, setInternal] = react.useState(defaultOpen);
+  const isOpen = open ?? internal;
+  const toggle = () => {
+    const next = !isOpen;
+    if (open == null) setInternal(next);
+    onOpenChange?.(next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-collapsible", isOpen && "is-open", className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "cd-collapsible__trigger", onClick: toggle, "aria-expanded": isOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: trigger }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-collapsible__chevron", "aria-hidden": true, children: "\u25BE" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-collapsible__content", children })
+  ] });
+}
+function Combobox({
+  options,
+  value,
+  defaultValue = "",
+  onChange,
+  placeholder = "Select\u2026",
+  emptyText = "No matches",
+  disabled = false,
+  className = "",
+  ...rest
+}) {
+  const [open, setOpen] = react.useState(false);
+  const [internal, setInternal] = react.useState(defaultValue);
+  const [query, setQuery] = react.useState("");
+  const selected = value ?? internal;
+  const selectedLabel = options.find((o) => o.value === selected)?.label ?? "";
+  const filtered = react.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return options;
+    return options.filter(
+      (o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q)
+    );
+  }, [options, query]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-combobox", open && "is-open", className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        disabled,
+        placeholder,
+        value: open ? query : selectedLabel,
+        onFocus: () => {
+          setOpen(true);
+          setQuery("");
+        },
+        onChange: (e) => {
+          setQuery(e.target.value);
+          setOpen(true);
+        },
+        onBlur: () => {
+          window.setTimeout(() => setOpen(false), 120);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-combobox__menu", role: "listbox", children: [
+      filtered.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-command__empty", style: { padding: 12 }, children: emptyText }),
+      filtered.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          disabled: opt.disabled,
+          "aria-selected": opt.value === selected,
+          className: "cd-combobox__option",
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => {
+            if (value == null) setInternal(opt.value);
+            onChange?.(opt.value);
+            setOpen(false);
+          },
+          children: opt.label
+        },
+        opt.value
+      ))
+    ] })
+  ] });
+}
+function Command({
+  items,
+  placeholder = "Type a command\u2026",
+  emptyText = "No results",
+  onSelect,
+  className = "",
+  ...rest
+}) {
+  const [query, setQuery] = react.useState("");
+  const [active, setActive] = react.useState(0);
+  const filtered = react.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return items;
+    return items.filter((item) => {
+      const hay = `${item.value} ${item.keywords ?? ""} ${typeof item.label === "string" ? item.label : ""}`.toLowerCase();
+      return hay.includes(q);
+    });
+  }, [items, query]);
+  const groups = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const item of filtered) {
+      const g = item.group ?? "";
+      if (!map.has(g)) map.set(g, []);
+      map.get(g).push(item);
+    }
+    return map;
+  }, [filtered]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-command", className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-command__input-wrap", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        className: "cd-command__input",
+        value: query,
+        placeholder,
+        onChange: (e) => {
+          setQuery(e.target.value);
+          setActive(0);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setActive((i) => Math.min(i + 1, filtered.length - 1));
+          } else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setActive((i) => Math.max(i - 1, 0));
+          } else if (e.key === "Enter" && filtered[active] && !filtered[active].disabled) {
+            filtered[active].onSelect?.();
+            onSelect?.(filtered[active]);
+          }
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-command__list", role: "listbox", children: [
+      filtered.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-command__empty", children: emptyText }),
+      Array.from(groups.entries()).map(([group, groupItems]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        group && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-command__group-label", children: group }),
+        groupItems.map((item) => {
+          const idx = filtered.indexOf(item);
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              disabled: item.disabled,
+              className: cn("cd-command__item", idx === active && "is-selected"),
+              "data-selected": idx === active,
+              onMouseEnter: () => setActive(idx),
+              onClick: () => {
+                item.onSelect?.();
+                onSelect?.(item);
+              },
+              children: [
+                item.label,
+                item.kbd != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-command__item-kbd", children: item.kbd })
+              ]
+            },
+            item.value
+          );
+        })
+      ] }, group || "__default"))
+    ] })
+  ] });
+}
+function ContextMenu({ items, children, className = "", ...rest }) {
+  const [open, setOpen] = react.useState(false);
+  const [pos, setPos] = react.useState({ x: 0, y: 0 });
+  react.useEffect(() => {
+    if (!open) return;
+    const close = () => setOpen(false);
+    window.addEventListener("click", close);
+    window.addEventListener("scroll", close, true);
+    return () => {
+      window.removeEventListener("click", close);
+      window.removeEventListener("scroll", close, true);
+    };
+  }, [open]);
+  const onContextMenu = (e) => {
+    e.preventDefault();
+    setPos({ x: e.clientX, y: e.clientY });
+    setOpen(true);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(className), onContextMenu, ...rest, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn("cd-context-menu", open && "is-open"),
+        style: { left: pos.x, top: pos.y },
+        role: "menu",
+        children: items.map(
+          (item, i) => item.sep ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-context-menu__sep" }, i) : /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              disabled: item.disabled,
+              className: cn("cd-context-menu__item", item.danger && "cd-context-menu__item--danger"),
+              onClick: (e) => {
+                e.stopPropagation();
+                item.onSelect?.();
+                setOpen(false);
+              },
+              children: [
+                item.label,
+                item.kbd != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-context-menu__kbd", children: item.kbd })
+              ]
+            },
+            i
+          )
+        )
+      }
+    )
+  ] });
+}
+function Table({
+  compact = false,
+  bordered = false,
+  scroll = false,
+  wrapProps,
+  className = "",
+  children,
+  ...rest
+}) {
+  const table = /* @__PURE__ */ jsxRuntime.jsx(
+    "table",
+    {
+      className: cn(
+        "cd-table",
+        compact && "cd-table--compact",
+        bordered && "cd-table--bordered",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+  if (!scroll) return table;
+  const { className: wrapClassName = "", ...wrapRest } = wrapProps ?? {};
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("cd-table-wrap", wrapClassName), ...wrapRest, children: table });
+}
+function TableHead({ children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("thead", { ...rest, children });
+}
+function TableBody({ children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { ...rest, children });
+}
+function TableRow({ children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("tr", { ...rest, children });
+}
+function TableHeaderCell({
+  numeric = false,
+  sort,
+  className = "",
+  children,
+  ...rest
+}) {
+  const dataSort = sort === true ? "" : sort || void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "th",
+    {
+      className: cn(numeric && "cd-table__num", className),
+      "data-sort": dataSort,
+      ...rest,
+      children
+    }
+  );
+}
+function TableCell({
+  numeric = false,
+  status,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      className: cn(numeric && "cd-table__num", className),
+      "data-status": status,
+      ...rest,
+      children
+    }
+  );
+}
+Table.Head = TableHead;
+Table.Body = TableBody;
+Table.Row = TableRow;
+Table.HeaderCell = TableHeaderCell;
+Table.Cell = TableCell;
+function Empty({
+  icon = "\u2B21",
+  title = "No data",
+  description,
+  actions,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-empty", className), ...rest, children: [
+    icon != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-empty__icon", children: icon }),
+    title != null && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "cd-empty__title", children: title }),
+    description != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "cd-empty__description", children: description }),
+    children,
+    actions != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-empty__actions", children: actions })
+  ] });
+}
+function DataTable({
+  columns,
+  data,
+  getRowId,
+  compact,
+  bordered,
+  emptyTitle = "No rows",
+  emptyDescription = "There is nothing to display yet.",
+  className
+}) {
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Empty, { title: emptyTitle, description: emptyDescription });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Table, { compact, bordered, scroll: true, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Table.Head, { children: /* @__PURE__ */ jsxRuntime.jsx(Table.Row, { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(Table.HeaderCell, { children: col.header }, col.key)) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Table.Body, { children: data.map((row, i) => /* @__PURE__ */ jsxRuntime.jsx(Table.Row, { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(Table.Cell, { numeric: col.numeric, children: col.cell(row, i) }, col.key)) }, getRowId?.(row, i) ?? i)) })
+  ] });
+}
+function formatDate(d) {
+  return d.toLocaleDateString(void 0, {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+}
+function DatePicker({
+  value,
+  defaultValue,
+  onChange,
+  placeholder = "Pick a date",
+  disabled = false,
+  className = "",
+  ...rest
+}) {
+  const [open, setOpen] = react.useState(false);
+  const [internal, setInternal] = react.useState(defaultValue);
+  const selected = value ?? internal;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-date-picker", open && "is-open", className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        readOnly: true,
+        disabled,
+        value: selected ? formatDate(selected) : "",
+        placeholder,
+        onClick: () => !disabled && setOpen((o) => !o),
+        "aria-expanded": open
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-date-picker__panel", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Calendar,
+      {
+        selected,
+        onSelect: (d) => {
+          if (value == null) setInternal(d);
+          onChange?.(d);
+          setOpen(false);
+        }
+      }
+    ) })
+  ] });
+}
+function Dialog(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Modal, { ...props });
+}
+function Sheet({
+  open,
+  onClose,
+  side = "right",
+  size = "default",
+  title,
+  description,
+  footer,
+  hideClose = false,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("cd-sheet-overlay", open && "is-open"),
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onClose?.();
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "cd-sheet",
+            `cd-sheet--${side}`,
+            size !== "default" && `cd-sheet--${size}`,
+            className
+          ),
+          role: "dialog",
+          "aria-modal": "true",
+          ...rest,
+          children: [
+            (title != null || description != null || !hideClose) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-sheet__header", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                title != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-sheet__title", children: title }),
+                description != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "cd-sheet__description", children: description })
+              ] }),
+              !hideClose && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "cd-sheet__close", onClick: onClose, "aria-label": "Close", children: "\u2715" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-sheet__body", children }),
+            footer != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-sheet__footer", children: footer })
+          ]
+        }
+      )
+    }
+  );
+}
+function Drawer({ side = "bottom", ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Sheet, { side, ...rest });
+}
+function Dropdown({
+  trigger,
+  items,
+  align = "left",
+  triggerClassName = "cd-btn",
+  defaultOpen = false,
+  className = "",
+  ...rest
+}) {
+  const [open, setOpen] = react.useState(defaultOpen);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-dropdown", open && "is-open", className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: cn(triggerClassName, "cd-dropdown__trigger"),
+        "aria-expanded": open,
+        onClick: () => setOpen((o) => !o),
+        children: trigger
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn("cd-dropdown__menu", align === "right" && "cd-dropdown__menu--right"),
+        role: "menu",
+        children: items.map((entry, i) => {
+          if ("sep" in entry && entry.sep) {
+            return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-dropdown__sep" }, i);
+          }
+          if ("heading" in entry && entry.heading) {
+            return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-dropdown__label", children: entry.label }, i);
+          }
+          const item = entry;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: cn("cd-dropdown__item", item.danger && "cd-dropdown__item--danger"),
+              disabled: item.disabled,
+              "aria-disabled": item.disabled || void 0,
+              onClick: () => {
+                item.onSelect?.();
+                setOpen(false);
+              },
+              children: [
+                item.icon != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-dropdown__item-icon", children: item.icon }),
+                item.label,
+                item.kbd != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-dropdown__item-kbd", children: item.kbd })
+              ]
+            },
+            i
+          );
+        })
+      }
+    )
+  ] });
+}
+function DropdownMenu(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Dropdown, { ...props });
+}
+function FeedItem({
+  badge,
+  title,
+  subtitle,
+  time,
+  selected = false,
+  className = "",
+  children,
+  type = "button",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type,
+      className: cn("cd-feed-item", selected && "is-selected", className),
+      "data-active": selected || void 0,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-feed-item__meta", children: [
+          badge,
+          time != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-feed-item__time", children: time })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-feed-item__title", children: title }),
+        subtitle != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-feed-item__subtitle", children: subtitle }),
+        children
+      ]
+    }
+  );
+}
+function Feed({ className = "", children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("cd-feed", className), ...rest, children });
+}
+function Field({
+  inline = false,
+  description,
+  error,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("cd-field", inline && "cd-field--inline", className),
+      ...rest,
+      children: [
+        children,
+        description != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "cd-field-desc", children: description }),
+        error != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "cd-field-error", children: error })
+      ]
+    }
+  );
+}
+function Gauge({
+  value,
+  display,
+  label,
+  size,
+  variant,
+  radar = false,
+  className = "",
+  style,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "cd-gauge",
+        size === "small" && "cd-gauge--small",
+        variant && `cd-gauge--${variant}`,
+        radar && "cd-gauge--radar",
+        className
+      ),
+      style: { ["--value"]: value, ...style },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-gauge__track" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-gauge__fill" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-gauge__center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-gauge__value", children: display ?? value }),
+          label != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-gauge__label", children: label }),
+          children
+        ] })
+      ]
+    }
+  );
+}
+function GlowCard({
+  color = "orange",
+  active,
+  className,
+  onClick,
+  style,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("cd-glow-card", `cd-glow-card--${color}`, className),
+      "data-active": active ? "true" : void 0,
+      onClick,
+      style,
+      ...rest,
+      children
+    }
+  );
+}
+function HBar({
+  label,
+  value,
+  display,
+  color,
+  className = "",
+  ...rest
+}) {
+  const pct = Math.max(0, Math.min(100, value));
+  const fillStyle = {
+    width: `${pct}%`,
+    ...color ? { background: color } : null
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-hbar-row", className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-hbar-row__label", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-hbar-row__track", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-hbar-row__fill", style: fillStyle }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-hbar-row__value", children: display ?? Math.round(pct) })
+  ] });
+}
+function HoverCard({
+  trigger,
+  title,
+  description,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-hover-card", className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { tabIndex: 0, children: trigger }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-hover-card__content", role: "tooltip", children: [
+      title != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-popover__title", children: title }),
+      description != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "cd-popover__description", children: description }),
+      children
+    ] })
+  ] });
+}
+function HudSegment({
+  label,
+  value,
+  status,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-hud-segment", className), ...rest, children: [
+    label != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-hud-segment__label", children: label }),
+    value != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("cd-hud-segment__value", status && `cd-hud-segment__value--${status}`), children: value }),
+    children
+  ] });
+}
+function HudBar({
+  segments,
+  position,
+  compact = false,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "cd-hud-bar",
+        position && `cd-hud-bar--${position}`,
+        compact && "cd-hud-bar--compact",
+        className
+      ),
+      ...rest,
+      children: [
+        segments?.map((seg, i) => /* @__PURE__ */ jsxRuntime.jsx(HudSegment, { label: seg.label, value: seg.value, status: seg.status }, i)),
+        children
+      ]
+    }
+  );
+}
+function HudFrame({
+  label,
+  value,
+  status,
+  compact = false,
+  floating = false,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "cd-hud-frame",
+        compact && "cd-hud--compact",
+        floating && "cd-hud--floating",
+        className
+      ),
+      ...rest,
+      children: [
+        label != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-hud__label", children: label }),
+        value != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("cd-hud__value", status && `cd-hud__value--${status}`), children: value }),
+        children
+      ]
+    }
+  );
+}
+function InputGroup({ className = "", children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("cd-input-group", className), ...rest, children });
+}
+function InputGroupAddon({ className = "", children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("cd-input-addon", className), ...rest, children });
+}
+Object.assign(InputGroup, { Addon: InputGroupAddon });
+function InputOTP({
+  length = 6,
+  value = "",
+  onChange,
+  disabled = false,
+  size = "md",
+  separatorAfter,
+  className = "",
+  ...rest
+}) {
+  const refs = react.useRef([]);
+  const digits = value.padEnd(length, " ").slice(0, length).split("");
+  const setAt = (index, char) => {
+    const next = digits.map((d, i) => i === index ? char : d === " " ? "" : d);
+    const joined = next.join("").replace(/\s/g, "").slice(0, length);
+    onChange?.(joined);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("cd-input-otp", size === "sm" && "cd-input-otp--sm", className), ...rest, children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "contents" }, children: [
+    separatorAfter != null && i === separatorAfter && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-input-otp__sep", "aria-hidden": true, children: "-" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: (el) => {
+          refs.current[i] = el;
+        },
+        className: cn("cd-input-otp__slot", digits[i] && digits[i] !== " " && "is-filled"),
+        inputMode: "numeric",
+        autoComplete: "one-time-code",
+        maxLength: 1,
+        disabled,
+        value: digits[i] === " " ? "" : digits[i],
+        "aria-label": `Digit ${i + 1}`,
+        onChange: (e) => {
+          const v = e.target.value.replace(/\D/g, "").slice(-1);
+          setAt(i, v);
+          if (v && i < length - 1) refs.current[i + 1]?.focus();
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Backspace" && !digits[i]?.trim() && i > 0) {
+            refs.current[i - 1]?.focus();
+          }
+        },
+        onPaste: (e) => {
+          e.preventDefault();
+          const paste = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
+          if (paste) onChange?.(paste);
+        }
+      }
+    )
+  ] }, i)) });
+}
+function Interference({
+  intensity,
+  intense = false,
+  glitch = false,
+  corruptText,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "cd-interference",
+        intensity && `cd-interference--${intensity}`,
+        intense && "cd-interference--intense",
+        glitch && "cd-interference--glitch",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-interference__noise" }),
+        glitch ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-interference__content", "data-text": corruptText, children }) : children
+      ]
+    }
+  );
+}
+function Item({
+  media,
+  title,
+  description,
+  actions,
+  bordered = false,
+  interactive = false,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "cd-item",
+        bordered && "cd-item--bordered",
+        interactive && "cd-item--interactive",
+        className
+      ),
+      ...rest,
+      children: [
+        media != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-item__media", children: media }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-item__content", children: [
+          title != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-item__title", children: title }),
+          description != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-item__description", children: description }),
+          children
+        ] }),
+        actions != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-item__actions", children: actions })
+      ]
+    }
+  );
+}
+function ItemGroup({ className = "", children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("cd-item-group", className), ...rest, children });
+}
+function Kbd({
+  size = "md",
+  accent = false,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "kbd",
+    {
+      className: cn(
+        "cd-kbd",
+        size === "lg" && "cd-kbd--lg",
+        accent && "cd-kbd--accent",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+function KbdGroup({
+  separator = "+",
+  className = "",
+  children,
+  ...rest
+}) {
+  const keys = Array.isArray(children) ? children : [children];
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("cd-kbd-group", className), ...rest, children: keys.map((key, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "contents" }, children: [
+    i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-kbd-group__sep", children: separator }),
+    key
+  ] }, i)) });
+}
+function Label({
+  required = false,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "label",
+    {
+      className: cn(
+        "cd-form-label",
+        required && "cd-form-label--required",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+function Menubar({ menus, className = "", ...rest }) {
+  const [open, setOpen] = react.useState(null);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("cd-menubar", className), role: "menubar", ...rest, children: menus.map((menu, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("cd-menubar__item", open === i && "is-open"),
+      onMouseLeave: () => setOpen(null),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "cd-menubar__trigger",
+            onClick: () => setOpen(open === i ? null : i),
+            onMouseEnter: () => open != null && setOpen(i),
+            children: menu.label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-menubar__menu", role: "menu", children: menu.items.map((item, j) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            disabled: item.disabled,
+            className: "cd-menubar__action",
+            onClick: () => {
+              item.onSelect?.();
+              setOpen(null);
+            },
+            children: item.label
+          },
+          j
+        )) })
+      ]
+    },
+    i
+  )) });
+}
+function Select({
+  size = "md",
+  label = false,
+  error = false,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-select-wrap", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "select",
+    {
+      className: cn(
+        "cd-select",
+        size === "sm" && "cd-select--sm",
+        label && "cd-select--label",
+        error && "cd-select--error",
+        className
+      ),
+      ...rest,
+      children
+    }
+  ) });
+}
+function NativeSelect(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Select, { ...props });
+}
+function NavigationMenu({ items, className = "", ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cn("cd-nav-menu", className), ...rest, children: items.map((item, i) => {
+    const cls = cn("cd-nav-menu__link", item.active && "is-active");
+    if (item.href) {
+      return /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href, className: cls, onClick: item.onClick, children: item.label }, i);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: cls, onClick: item.onClick, children: item.label }, i);
+  }) });
+}
+function buildPages(page, pageCount, siblingCount) {
+  const total = pageCount;
+  const left = Math.max(2, page - siblingCount);
+  const right = Math.min(total - 1, page + siblingCount);
+  const pages = [1];
+  if (left > 2) pages.push("\u2026");
+  for (let p = left; p <= right; p++) pages.push(p);
+  if (right < total - 1) pages.push("\u2026");
+  if (total > 1) pages.push(total);
+  return pages;
+}
+function Pagination({
+  page,
+  pageCount,
+  onPageChange,
+  siblingCount = 1,
+  size = "default",
+  compact = false,
+  showInfo = false,
+  prevLabel = "\u2039 Prev",
+  nextLabel = "Next \u203A",
+  className = "",
+  ...rest
+}) {
+  const go = (p) => {
+    if (p < 1 || p > pageCount || p === page) return;
+    onPageChange?.(p);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "nav",
+    {
+      className: cn(
+        "cd-pagination",
+        size !== "default" && `cd-pagination--${size}`,
+        compact && "cd-pagination--compact",
+        className
+      ),
+      "aria-label": "Pagination",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "cd-pagination__prev cd-pagination__item",
+            disabled: page <= 1,
+            "aria-disabled": page <= 1 || void 0,
+            onClick: () => go(page - 1),
+            children: prevLabel
+          }
+        ),
+        buildPages(page, pageCount, siblingCount).map(
+          (p, i) => p === "\u2026" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-pagination__ellipsis", children: "\xB7\xB7\xB7" }, `e${i}`) : /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: cn("cd-pagination__item", p === page && "is-active"),
+              "aria-current": p === page ? "page" : void 0,
+              onClick: () => go(p),
+              children: p
+            },
+            p
+          )
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "cd-pagination__next cd-pagination__item",
+            disabled: page >= pageCount,
+            "aria-disabled": page >= pageCount || void 0,
+            onClick: () => go(page + 1),
+            children: nextLabel
+          }
+        ),
+        showInfo && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cd-pagination__info", children: [
+          "Page ",
+          page,
+          " of ",
+          pageCount
+        ] })
+      ]
+    }
+  );
+}
+function Popover({
+  trigger,
+  defaultOpen = false,
+  open,
+  onOpenChange,
+  side = "bottom",
+  title,
+  description,
+  className = "",
+  children,
+  ...rest
+}) {
+  const [internal, setInternal] = react.useState(defaultOpen);
+  const isOpen = open ?? internal;
+  const setOpen = (next) => {
+    if (open == null) setInternal(next);
+    onOpenChange?.(next);
+  };
+  const sideClass = side === "top" ? "cd-popover__content--top" : side === "right" ? "cd-popover__content--right" : side === "bottom-end" ? "cd-popover__content--bottom-end" : "cd-popover__content--bottom";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-popover", isOpen && "is-open", className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => setOpen(!isOpen), "aria-expanded": isOpen, children: trigger }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-popover__content", sideClass), role: "dialog", children: [
+      title != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-popover__title", children: title }),
+      description != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "cd-popover__description", children: description }),
+      children
+    ] })
+  ] });
+}
+function Progress({
+  value = 0,
+  variant = "default",
+  thick = false,
+  indeterminate = false,
+  className = "",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "cd-progress",
+        variant !== "default" && `cd-progress--${variant}`,
+        thick && "cd-progress--thick",
+        indeterminate && "cd-progress--indeterminate",
+        className
+      ),
+      role: "progressbar",
+      "aria-valuenow": indeterminate ? void 0 : value,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "cd-progress__bar",
+          style: indeterminate ? void 0 : { width: `${value}%` }
+        }
+      )
+    }
+  );
+}
+function Radio({ label, description, className = "", ...rest }) {
+  const input = /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: cn("cd-radio", !label && className), ...rest });
+  if (label == null && description == null) return input;
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cn("cd-control", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "cd-radio", ...rest }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cd-control__label", children: [
+      label,
+      description != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-control__desc", children: description })
+    ] })
+  ] });
+}
+function RadioGroup({
+  name,
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  orientation = "vertical",
+  className = "",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(className),
+      role: "radiogroup",
+      style: {
+        display: "flex",
+        flexDirection: orientation === "horizontal" ? "row" : "column",
+        gap: orientation === "horizontal" ? 16 : 8
+      },
+      ...rest,
+      children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+        Radio,
+        {
+          name,
+          value: item.value,
+          label: item.label,
+          description: item.description,
+          disabled: item.disabled,
+          defaultChecked: defaultValue === item.value,
+          checked: value != null ? value === item.value : void 0,
+          onChange: () => onValueChange?.(item.value)
+        },
+        item.value
+      ))
+    }
+  );
+}
+function Resizable({
+  first,
+  second,
+  orientation = "horizontal",
+  defaultSize = 50,
+  minSize = 15,
+  maxSize = 85,
+  className = "",
+  ...rest
+}) {
+  const [size, setSize] = react.useState(defaultSize);
+  const rootRef = react.useRef(null);
+  const dragging = react.useRef(false);
+  const onMove = react.useCallback(
+    (clientX, clientY) => {
+      const el = rootRef.current;
+      if (!el || !dragging.current) return;
+      const rect = el.getBoundingClientRect();
+      const pct = orientation === "horizontal" ? (clientX - rect.left) / rect.width * 100 : (clientY - rect.top) / rect.height * 100;
+      setSize(Math.min(maxSize, Math.max(minSize, pct)));
+    },
+    [orientation, minSize, maxSize]
+  );
+  const onMouseDown = (e) => {
+    e.preventDefault();
+    dragging.current = true;
+    const move = (ev) => onMove(ev.clientX, ev.clientY);
+    const up = () => {
+      dragging.current = false;
+      window.removeEventListener("mousemove", move);
+      window.removeEventListener("mouseup", up);
+    };
+    window.addEventListener("mousemove", move);
+    window.addEventListener("mouseup", up);
+  };
+  const firstStyle = orientation === "horizontal" ? { width: `${size}%`, flex: "none" } : { height: `${size}%`, flex: "none" };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: cn(
+        "cd-resizable",
+        orientation === "vertical" && "cd-resizable--vertical",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-resizable__panel", style: firstStyle, children: first }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "cd-resizable__handle",
+            role: "separator",
+            "aria-orientation": orientation,
+            onMouseDown
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-resizable__panel", style: { flex: 1 }, children: second })
+      ]
+    }
+  );
+}
+function Scanner({
+  vertical = false,
+  ping = false,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "cd-scanner",
+        vertical && "cd-scanner--vertical",
+        ping && "cd-scanner--ping",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-scanner__line" }),
+        children
+      ]
+    }
+  );
+}
+function ScrollArea({
+  thin = true,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("cd-scroll-area", thin && "cd-scroll-area--thin", className), ...rest, children });
+}
+function SectionHeader({
+  title,
+  caret = "\u25B8",
+  actions,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-section-header", className), ...rest, children: [
+    caret != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-section-header__caret", children: caret }),
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "cd-section-header__title", children: title }),
+    children,
+    actions != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-section-header__actions", children: actions })
+  ] });
+}
+function Separator({
+  orientation = "horizontal",
+  neon = false,
+  className = "",
+  children,
+  ...rest
+}) {
+  const hasLabel = children != null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "cd-separator",
+        orientation === "vertical" && "cd-separator--vertical",
+        neon && "cd-separator--neon",
+        hasLabel && "cd-separator--label",
+        !hasLabel && orientation === "horizontal" && "cd-separator--plain",
+        className
+      ),
+      role: "separator",
+      ...rest,
+      children
+    }
+  );
+}
+function Sidebar({
+  title = "Nav",
+  links,
+  children,
+  defaultCollapsed = false,
+  collapsed,
+  onCollapsedChange,
+  className = "",
+  ...rest
+}) {
+  const [internal, setInternal] = react.useState(defaultCollapsed);
+  const isCollapsed = collapsed ?? internal;
+  const toggle = () => {
+    const next = !isCollapsed;
+    if (collapsed == null) setInternal(next);
+    onCollapsedChange?.(next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-sidebar-layout", className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: cn("cd-sidebar", isCollapsed && "cd-sidebar--collapsed"), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-sidebar__header", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-sidebar__title", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", size: "sm", icon: true, onClick: toggle, "aria-label": "Toggle sidebar", children: isCollapsed ? "\u203A" : "\u2039" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "cd-sidebar__nav", children: links.map((link, i) => {
+        const cls = cn("cd-sidebar__link", link.active && "is-active");
+        const body = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          link.icon != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-sidebar__link-icon", children: link.icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-sidebar__link-label", children: link.label })
+        ] });
+        if (link.href) {
+          return /* @__PURE__ */ jsxRuntime.jsx("a", { href: link.href, className: cls, onClick: link.onClick, children: body }, i);
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: cls, onClick: link.onClick, children: body }, i);
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("main", { className: "cd-sidebar__main", children })
+  ] });
+}
+function Skeleton({
+  shape = "plain",
+  width,
+  className = "",
+  children,
+  ...rest
+}) {
+  if (shape === "card" || shape === "block") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(`cd-skeleton-${shape}`, className), ...rest, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "cd-skeleton",
+        shape !== "plain" && `cd-skeleton--${shape}`,
+        width && `cd-skeleton--w-${width}`,
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+function SkeletonRow({ className = "", children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("cd-skeleton-block__row", className), ...rest, children });
+}
+function Slider({ valueLabel, className = "", ...rest }) {
+  const input = /* @__PURE__ */ jsxRuntime.jsx("input", { type: "range", className: cn("cd-slider", !valueLabel && className), ...rest });
+  if (valueLabel == null) return input;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-slider-wrap", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "range", className: "cd-slider", ...rest }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-slider-value", children: valueLabel })
+  ] });
+}
+function colToLetter(index) {
+  let n = index;
+  let s = "";
+  do {
+    s = String.fromCharCode(65 + n % 26) + s;
+    n = Math.floor(n / 26) - 1;
+  } while (n >= 0);
+  return s;
+}
+function parseCellRef(ref) {
+  const m = ref.trim().toUpperCase().match(/^([A-Z]+)(\d+)$/);
+  if (!m) return null;
+  const letters = m[1];
+  const row = parseInt(m[2], 10) - 1;
+  let col = 0;
+  for (let i = 0; i < letters.length; i++) {
+    col = col * 26 + (letters.charCodeAt(i) - 64);
+  }
+  col -= 1;
+  if (row < 0 || col < 0) return null;
+  return { row, col };
+}
+function cellAddress(row, col) {
+  return `${colToLetter(col)}${row + 1}`;
+}
+function createMatrix(rows, cols, fill = "") {
+  return Array.from({ length: rows }, () => Array.from({ length: cols }, () => fill));
+}
+function cloneMatrix(data) {
+  return data.map((row) => [...row]);
+}
+function ensureSize(data, rows, cols) {
+  const next = data.map((row) => {
+    const r = [...row];
+    while (r.length < cols) r.push("");
+    return r.slice(0, cols);
+  });
+  while (next.length < rows) next.push(Array.from({ length: cols }, () => ""));
+  return next.slice(0, rows);
+}
+function isNumericDisplay(value) {
+  if (value === "" || value.startsWith("=")) return false;
+  return !Number.isNaN(Number(value)) && value.trim() !== "";
+}
+function evaluateFormula(raw, data, stack = /* @__PURE__ */ new Set()) {
+  const expr = raw.slice(1).trim();
+  if (!expr) return "";
+  const getCell = (row, col) => {
+    if (row < 0 || col < 0 || row >= data.length || col >= (data[0]?.length ?? 0)) return 0;
+    const v = data[row][col] ?? "";
+    if (v.startsWith("=")) {
+      const addr = cellAddress(row, col);
+      if (stack.has(addr)) return "#CYCLE!";
+      const next = new Set(stack);
+      next.add(addr);
+      const out = evaluateFormula(v, data, next);
+      if (out.startsWith("#")) return out;
+      const n2 = Number(out);
+      return Number.isNaN(n2) ? out : n2;
+    }
+    if (v === "") return 0;
+    const n = Number(v);
+    return Number.isNaN(n) ? v : n;
+  };
+  const rangeValues = (a, b) => {
+    const start = parseCellRef(a);
+    const end = parseCellRef(b);
+    if (!start || !end) return [];
+    const r0 = Math.min(start.row, end.row);
+    const r1 = Math.max(start.row, end.row);
+    const c0 = Math.min(start.col, end.col);
+    const c1 = Math.max(start.col, end.col);
+    const vals = [];
+    for (let r = r0; r <= r1; r++) {
+      for (let c = c0; c <= c1; c++) {
+        const v = getCell(r, c);
+        if (typeof v === "number") vals.push(v);
+        else if (typeof v === "string" && !v.startsWith("#")) {
+          const n = Number(v);
+          if (!Number.isNaN(n)) vals.push(n);
+        }
+      }
+    }
+    return vals;
+  };
+  const fnMatch = expr.match(/^(SUM|AVG|AVERAGE|MIN|MAX|COUNT)\(([^)]+)\)$/i);
+  if (fnMatch) {
+    const fn = fnMatch[1].toUpperCase();
+    const arg = fnMatch[2].trim();
+    let vals = [];
+    if (arg.includes(":")) {
+      const [a, b] = arg.split(":");
+      vals = rangeValues(a, b);
+    } else {
+      const parts = arg.split(",").map((p) => p.trim());
+      for (const p of parts) {
+        const ref = parseCellRef(p);
+        if (ref) {
+          const v = getCell(ref.row, ref.col);
+          if (typeof v === "number") vals.push(v);
+        } else {
+          const n = Number(p);
+          if (!Number.isNaN(n)) vals.push(n);
+        }
+      }
+    }
+    if (fn === "COUNT") return String(vals.length);
+    if (vals.length === 0) return "0";
+    if (fn === "SUM") return String(vals.reduce((a, b) => a + b, 0));
+    if (fn === "AVG" || fn === "AVERAGE")
+      return String(vals.reduce((a, b) => a + b, 0) / vals.length);
+    if (fn === "MIN") return String(Math.min(...vals));
+    if (fn === "MAX") return String(Math.max(...vals));
+  }
+  try {
+    let replaced = expr.replace(/[A-Z]+\d+/gi, (ref) => {
+      const coord = parseCellRef(ref);
+      if (!coord) return "0";
+      const v = getCell(coord.row, coord.col);
+      if (typeof v === "string" && v.startsWith("#")) throw new Error(v);
+      if (typeof v === "number") return String(v);
+      const n = Number(v);
+      if (Number.isNaN(n)) throw new Error("#VALUE!");
+      return String(n);
+    });
+    if (!/^[\d+\-*/().\s]+$/.test(replaced)) return "#NAME?";
+    const result = Function(`"use strict"; return (${replaced});`)();
+    if (typeof result !== "number" || !Number.isFinite(result)) return "#NUM!";
+    return String(Math.round(result * 1e10) / 1e10);
+  } catch (e) {
+    if (e instanceof Error && e.message.startsWith("#")) return e.message;
+    return "#ERROR!";
+  }
+}
+function displayValue(raw, data, formulas) {
+  if (!formulas || !raw.startsWith("=")) return raw;
+  return evaluateFormula(raw, data);
+}
+function inRange(cell, a, b) {
+  const r0 = Math.min(a.row, b.row);
+  const r1 = Math.max(a.row, b.row);
+  const c0 = Math.min(a.col, b.col);
+  const c1 = Math.max(a.col, b.col);
+  return cell.row >= r0 && cell.row <= r1 && cell.col >= c0 && cell.col <= c1;
+}
+function Spreadsheet({
+  data: controlledData,
+  defaultData,
+  onChange,
+  onCellChange,
+  rows: rowsProp,
+  cols: colsProp,
+  columnWidth = 96,
+  maxHeight = 420,
+  compact = false,
+  readOnly = false,
+  formulas = true,
+  showFormulaBar = true,
+  showStatus = true,
+  columnLabels,
+  rowLabels,
+  className = "",
+  style,
+  ...rest
+}) {
+  const rows = rowsProp ?? controlledData?.length ?? defaultData?.length ?? 12;
+  const cols = colsProp ?? controlledData?.[0]?.length ?? defaultData?.[0]?.length ?? 8;
+  const [internal, setInternal] = react.useState(
+    () => ensureSize(defaultData ?? createMatrix(rows, cols), rows, cols)
+  );
+  const matrix = react.useMemo(() => {
+    const source = controlledData ?? internal;
+    return ensureSize(source, rows, cols);
+  }, [controlledData, internal, rows, cols]);
+  const [active, setActive] = react.useState({ row: 0, col: 0 });
+  const [anchor, setAnchor] = react.useState({ row: 0, col: 0 });
+  const [editing, setEditing] = react.useState(false);
+  const [draft, setDraft] = react.useState("");
+  const [editOrigin, setEditOrigin] = react.useState("edit");
+  const rootRef = react.useRef(null);
+  const cellInputRef = react.useRef(null);
+  const fxInputRef = react.useRef(null);
+  const setMatrix = react.useCallback(
+    (next, cell) => {
+      if (controlledData == null) setInternal(next);
+      onChange?.(next);
+      if (cell) onCellChange?.(cell.row, cell.col, cell.value, next);
+    },
+    [controlledData, onChange, onCellChange]
+  );
+  const commit = react.useCallback(
+    (row, col, value) => {
+      const next = cloneMatrix(matrix);
+      next[row][col] = value;
+      setMatrix(next, { row, col, value });
+    },
+    [matrix, setMatrix]
+  );
+  const beginEdit = react.useCallback(
+    (mode, seed) => {
+      if (readOnly) return;
+      const raw = matrix[active.row]?.[active.col] ?? "";
+      setDraft(seed !== void 0 ? seed : raw);
+      setEditOrigin(mode);
+      setEditing(true);
+    },
+    [readOnly, matrix, active]
+  );
+  const endEdit = react.useCallback(
+    (save, move) => {
+      if (editing && save) {
+        commit(active.row, active.col, draft);
+      }
+      setEditing(false);
+      setDraft("");
+      if (move) {
+        setActive(move);
+        setAnchor(move);
+      }
+      requestAnimationFrame(() => rootRef.current?.focus());
+    },
+    [editing, draft, active, commit]
+  );
+  react.useEffect(() => {
+    if (editing) {
+      const el = cellInputRef.current;
+      if (el) {
+        el.focus();
+        if (editOrigin === "edit") el.select();
+        else {
+          const len = el.value.length;
+          el.setSelectionRange(len, len);
+        }
+      }
+    }
+  }, [editing, editOrigin]);
+  const activeRaw = matrix[active.row]?.[active.col] ?? "";
+  const activeDisplay = displayValue(activeRaw, matrix, formulas);
+  const selectionCount = react.useMemo(() => {
+    const r0 = Math.min(active.row, anchor.row);
+    const r1 = Math.max(active.row, anchor.row);
+    const c0 = Math.min(active.col, anchor.col);
+    const c1 = Math.max(active.col, anchor.col);
+    return (r1 - r0 + 1) * (c1 - c0 + 1);
+  }, [active, anchor]);
+  const moveActive = (row, col, extend) => {
+    const next = {
+      row: Math.max(0, Math.min(rows - 1, row)),
+      col: Math.max(0, Math.min(cols - 1, col))
+    };
+    setActive(next);
+    if (!extend) setAnchor(next);
+  };
+  const onGridKeyDown = (e) => {
+    if (editing) return;
+    const { key, shiftKey, metaKey, ctrlKey } = e;
+    const mod = metaKey || ctrlKey;
+    if (key === "F2" || key === "Enter") {
+      e.preventDefault();
+      if (key === "Enter" && !shiftKey) {
+        beginEdit("edit");
+      } else if (key === "F2") {
+        beginEdit("edit");
+      } else if (key === "Enter" && shiftKey) {
+        moveActive(active.row - 1, active.col, false);
+      }
+      return;
+    }
+    if (key === "Delete" || key === "Backspace") {
+      if (readOnly) return;
+      e.preventDefault();
+      if (key === "Backspace") {
+        beginEdit("type", "");
+      } else {
+        const next = cloneMatrix(matrix);
+        for (let r = 0; r < rows; r++) {
+          for (let c = 0; c < cols; c++) {
+            if (inRange({ row: r, col: c }, active, anchor)) next[r][c] = "";
+          }
+        }
+        setMatrix(next);
+      }
+      return;
+    }
+    if (mod && key.toLowerCase() === "c") {
+      e.preventDefault();
+      const text = activeRaw;
+      void navigator.clipboard?.writeText(text);
+      return;
+    }
+    if (mod && key.toLowerCase() === "v" && !readOnly) {
+      e.preventDefault();
+      void navigator.clipboard?.readText().then((text) => {
+        const lines = text.replace(/\r/g, "").split("\n").filter((l, i, arr) => !(i === arr.length - 1 && l === ""));
+        const next = cloneMatrix(matrix);
+        lines.forEach((line, ri) => {
+          const cells = line.split("	");
+          cells.forEach((val, ci) => {
+            const r = active.row + ri;
+            const c = active.col + ci;
+            if (r < rows && c < cols) next[r][c] = val;
+          });
+        });
+        setMatrix(next);
+      });
+      return;
+    }
+    const nav = {
+      ArrowUp: [-1, 0],
+      ArrowDown: [1, 0],
+      ArrowLeft: [0, -1],
+      ArrowRight: [0, 1],
+      Tab: [0, shiftKey ? -1 : 1],
+      Home: [0, -active.col],
+      End: [0, cols - 1 - active.col]
+    };
+    if (key in nav) {
+      e.preventDefault();
+      const [dr, dc] = nav[key];
+      if (key === "Tab") {
+        moveActive(active.row + dr, active.col + dc, false);
+      } else {
+        moveActive(active.row + dr, active.col + dc, shiftKey);
+      }
+      return;
+    }
+    if (!readOnly && key.length === 1 && !mod && !e.altKey) {
+      e.preventDefault();
+      beginEdit("type", key);
+    }
+  };
+  const onEditorKeyDown = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      endEdit(false);
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      endEdit(true, {
+        row: Math.min(rows - 1, active.row + (e.shiftKey ? -1 : 1)),
+        col: active.col
+      });
+      return;
+    }
+    if (e.key === "Tab") {
+      e.preventDefault();
+      endEdit(true, {
+        row: active.row,
+        col: Math.max(0, Math.min(cols - 1, active.col + (e.shiftKey ? -1 : 1)))
+      });
+      return;
+    }
+  };
+  const styleVars = {
+    ...style,
+    ["--cd-sheetgrid-col-width"]: `${columnWidth}px`,
+    ["--cd-sheetgrid-max-height"]: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: cn(
+        "cd-sheetgrid",
+        compact && "cd-sheetgrid--compact",
+        readOnly && "cd-sheetgrid--readonly",
+        className
+      ),
+      style: styleVars,
+      tabIndex: 0,
+      role: "grid",
+      "aria-rowcount": rows,
+      "aria-colcount": cols,
+      "aria-label": "Spreadsheet",
+      onKeyDown: onGridKeyDown,
+      ...rest,
+      children: [
+        showFormulaBar && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-sheetgrid__bar", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-sheetgrid__addr", children: cellAddress(active.row, active.col) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-sheetgrid__fx-label", children: "\u0192x" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: fxInputRef,
+              className: "cd-sheetgrid__fx-input",
+              value: editing ? draft : activeRaw,
+              disabled: readOnly,
+              spellCheck: false,
+              "aria-label": "Formula bar",
+              onFocus: () => {
+                if (!readOnly && !editing) beginEdit("edit");
+              },
+              onChange: (e) => {
+                if (!editing) beginEdit("type", e.target.value);
+                else setDraft(e.target.value);
+              },
+              onKeyDown: onEditorKeyDown,
+              onBlur: () => {
+                if (editing) endEdit(true);
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-sheetgrid__viewport", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "cd-sheetgrid__table", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("th", { className: "cd-sheetgrid__corner", scope: "col" }),
+            Array.from({ length: cols }, (_, c) => /* @__PURE__ */ jsxRuntime.jsx(
+              "th",
+              {
+                className: cn(
+                  "cd-sheetgrid__col-head",
+                  (active.col === c || inRange({ row: active.row, col: c }, active, anchor)) && "is-active"
+                ),
+                scope: "col",
+                children: columnLabels?.[c] ?? colToLetter(c)
+              },
+              c
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: Array.from({ length: rows }, (_, r) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "th",
+              {
+                className: cn(
+                  "cd-sheetgrid__row-head",
+                  (active.row === r || inRange({ row: r, col: active.col }, active, anchor)) && "is-active"
+                ),
+                scope: "row",
+                children: rowLabels?.[r] ?? r + 1
+              }
+            ),
+            Array.from({ length: cols }, (_2, c) => {
+              const raw = matrix[r]?.[c] ?? "";
+              const shown = displayValue(raw, matrix, formulas);
+              const isActive = active.row === r && active.col === c;
+              const isSelected = inRange({ row: r, col: c }, active, anchor);
+              const isEditing = isActive && editing;
+              const isErr = formulas && raw.startsWith("=") && shown.startsWith("#");
+              const isNum = !raw.startsWith("=") && isNumericDisplay(raw) || raw.startsWith("=") && isNumericDisplay(shown);
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "td",
+                {
+                  role: "gridcell",
+                  "aria-selected": isSelected,
+                  "aria-colindex": c + 1,
+                  className: cn(
+                    "cd-sheetgrid__cell",
+                    isActive && "is-active",
+                    isSelected && "is-selected",
+                    isEditing && "is-editing",
+                    isNum && "cd-sheetgrid__cell--number",
+                    raw.startsWith("=") && "cd-sheetgrid__cell--formula",
+                    isErr && "cd-sheetgrid__cell--error"
+                  ),
+                  onMouseDown: (e) => {
+                    if (editing && isActive) return;
+                    if (editing) endEdit(true);
+                    e.preventDefault();
+                    rootRef.current?.focus();
+                    const next = { row: r, col: c };
+                    setActive(next);
+                    if (e.shiftKey) ; else {
+                      setAnchor(next);
+                    }
+                  },
+                  onDoubleClick: () => {
+                    if (!readOnly) beginEdit("edit");
+                  },
+                  children: isEditing ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      ref: cellInputRef,
+                      className: cn(
+                        "cd-sheetgrid__cell-input",
+                        isNum && "cd-sheetgrid__cell-input--number"
+                      ),
+                      value: draft,
+                      spellCheck: false,
+                      "aria-label": `Edit ${cellAddress(r, c)}`,
+                      onChange: (e) => setDraft(e.target.value),
+                      onKeyDown: onEditorKeyDown,
+                      onBlur: () => {
+                        requestAnimationFrame(() => {
+                          if (document.activeElement === fxInputRef.current) return;
+                          if (document.activeElement === cellInputRef.current) return;
+                          if (editing) endEdit(true);
+                        });
+                      }
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-sheetgrid__cell-display", children: shown })
+                },
+                c
+              );
+            })
+          ] }, r)) })
+        ] }) }),
+        showStatus && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-sheetgrid__status", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            "cell ",
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: cellAddress(active.row, active.col) })
+          ] }),
+          selectionCount > 1 && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            "sel ",
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: selectionCount })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: readOnly ? "read-only" : editing ? "editing" : "ready" }),
+          formulas && activeRaw.startsWith("=") && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            "\u2192 ",
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: activeDisplay })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { marginLeft: "auto" }, children: [
+            rows,
+            "\xD7",
+            cols
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function createSpreadsheetData(rows, cols, fill = "") {
+  return createMatrix(rows, cols, fill);
+}
+function Stat({
+  label,
+  value,
+  delta,
+  trend,
+  variant = "default",
+  className = "",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("cd-stat", variant !== "default" && `cd-stat--${variant}`, className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-stat__label", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-stat__value", children: value }),
+        delta != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("cd-stat__delta", trend && `cd-stat__delta--${trend}`), children: delta })
+      ]
+    }
+  );
+}
+function StatGrid({ className = "", children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("cd-stats", className), ...rest, children });
+}
+Stat.Grid = StatGrid;
+function StatusBar({
+  message,
+  cursor = true,
+  leading,
+  meta,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-status-bar", className), ...rest, children: [
+    leading,
+    message != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("cd-status-bar__message", cursor && "cd-status-bar__message--cursor"), children: message }),
+    children,
+    meta != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-status-bar__meta", children: meta })
+  ] });
+}
+function StatusDot({
+  status = "live",
+  children,
+  orbOnly = false,
+  className = "",
+  ...rest
+}) {
+  const statusClass = status === "idle" ? void 0 : status === "success" ? "cd-status-dot--success" : `cd-status-dot--${status}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("cd-status-dot", statusClass, className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-status-dot__orb", "aria-hidden": true }),
+    !orbOnly && children != null && /* @__PURE__ */ jsxRuntime.jsx("span", { children })
+  ] });
+}
+function StatusPill({
+  variant = "default",
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn(
+        "cd-status-pill",
+        variant !== "default" && `cd-status-pill--${variant}`,
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+function Switch({ size = "md", label, className = "", ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cn("cd-switch", size === "sm" && "cd-switch--sm", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: "cd-switch__input", ...rest }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-switch__track", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-switch__thumb" }) }),
+    label != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-switch__label", children: label })
+  ] });
+}
+function Tabs({
+  items,
+  variant = "underline",
+  defaultActive = 0,
+  active,
+  onTabChange,
+  hidePanels = false,
+  className = ""
+}) {
+  const [internal, setInternal] = react.useState(defaultActive);
+  const current = active ?? internal;
+  const select = (i) => {
+    if (items[i]?.disabled) return;
+    if (active == null) setInternal(i);
+    onTabChange?.(i);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "cd-tabs",
+        variant === "pills" && "cd-tabs--pills",
+        variant === "vertical" && "cd-tabs--vertical",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-tabs__list", role: "tablist", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": i === current,
+            disabled: item.disabled,
+            className: cn("cd-tabs__trigger", i === current && "is-active"),
+            onClick: () => select(i),
+            children: [
+              item.label,
+              item.badge != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-badge cd-badge--orange", style: { marginLeft: 4 }, children: item.badge })
+            ]
+          },
+          i
+        )) }),
+        !hidePanels && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-tabs__panels", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            role: "tabpanel",
+            className: cn("cd-tabs__panel", i === current && "is-active"),
+            children: item.content
+          },
+          i
+        )) })
+      ]
+    }
+  );
+}
+function Terminal({
+  title,
+  controls = false,
+  lines = [],
+  compact = false,
+  crt = false,
+  input = false,
+  inputPrompt = "root@net> ",
+  inputProps,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "cd-terminal",
+        compact && "cd-terminal--compact",
+        crt && "cd-terminal--crt",
+        className
+      ),
+      ...rest,
+      children: [
+        (title != null || controls) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-terminal__header", children: [
+          title != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-terminal__title", children: title }),
+          controls && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-terminal__controls", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-terminal__dot cd-terminal__dot--min", title: "Minimize" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-terminal__dot cd-terminal__dot--max", title: "Maximize" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-terminal__dot cd-terminal__dot--close", title: "Close" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-terminal__body cd-scrollbar", children: [
+          lines.map((line, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn("cd-terminal__line", line.type && `cd-terminal__line--${line.type}`),
+              children: [
+                line.prompt != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-terminal__prompt", children: line.prompt }),
+                line.text
+              ]
+            },
+            i
+          )),
+          children
+        ] }),
+        input && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-terminal__input", children: [
+          inputPrompt != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-terminal__prompt", children: inputPrompt }),
+          /* @__PURE__ */ jsxRuntime.jsx("input", { className: "cd-terminal__field", placeholder: "type command...", ...inputProps })
+        ] })
+      ]
+    }
+  );
+}
+function Textarea({ error = false, className = "", ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      className: cn("cd-textarea", error && "cd-textarea--error", className),
+      ...rest
+    }
+  );
+}
+function Ticker({
+  items,
+  speed,
+  fast = false,
+  vertical = false,
+  className = "",
+  ...rest
+}) {
+  const resolvedSpeed = fast ? "fast" : speed;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "cd-ticker",
+        resolvedSpeed && `cd-ticker--${resolvedSpeed}`,
+        vertical && "cd-ticker--vertical",
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-ticker__inner", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-ticker__item", children: item }, i)) })
+    }
+  );
+}
+function Toast({
+  variant = "info",
+  icon,
+  title,
+  onDismiss,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-toast", `cd-toast--${variant}`, className), ...rest, children: [
+    icon != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cd-toast__icon", children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-toast__content", children: [
+      title != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-toast__title", children: title }),
+      children != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cd-toast__body", children })
+    ] }),
+    onDismiss && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "cd-toast__dismiss", onClick: onDismiss, "aria-label": "Dismiss", children: "\u2715" })
+  ] });
+}
+var ToasterContext = react.createContext(null);
+function useToast() {
+  const ctx = react.useContext(ToasterContext);
+  if (!ctx) throw new Error("useToast must be used within <ToasterProvider>");
+  return ctx;
+}
+function ToasterProvider({
+  children,
+  position = "bottom-right",
+  duration = 4e3
+}) {
+  const [items, setItems] = react.useState([]);
+  const dismiss = react.useCallback((id) => {
+    setItems((list) => list.filter((t) => t.id !== id));
+  }, []);
+  const toast = react.useCallback(
+    (input) => {
+      const id = input.id ?? `t-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+      const rec = { ...input, id };
+      setItems((list) => [...list, rec]);
+      const ms = input.duration ?? duration;
+      if (ms > 0) window.setTimeout(() => dismiss(id), ms);
+      return id;
+    },
+    [duration, dismiss]
+  );
+  const value = react.useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ToasterContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("cd-toaster", `cd-toaster--${position}`), "aria-live": "polite", children: items.map(({ id, duration: _d, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(Toast, { ...props, onDismiss: () => dismiss(id) }, id)) })
+  ] });
+}
+function Toaster(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ToasterProvider, { ...props });
+}
+function Toggle({
+  pressed,
+  defaultPressed = false,
+  onPressedChange,
+  size = "md",
+  variant = "default",
+  className = "",
+  children,
+  ...rest
+}) {
+  const [internal, setInternal] = react.useState(defaultPressed);
+  const isOn = pressed ?? internal;
+  const { onClick, ...buttonRest } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "cd-toggle",
+        size === "sm" && "cd-toggle--sm",
+        variant === "outline" && "cd-toggle--outline",
+        isOn && "is-on",
+        className
+      ),
+      "data-state": isOn ? "on" : "off",
+      "aria-pressed": isOn,
+      onClick: (e) => {
+        onClick?.(e);
+        const next = !isOn;
+        if (pressed == null) setInternal(next);
+        onPressedChange?.(next);
+      },
+      ...buttonRest,
+      children
+    }
+  );
+}
+function ToggleGroup({
+  items,
+  value,
+  defaultValue,
+  multiple = false,
+  onValueChange,
+  size = "md",
+  className = "",
+  ...rest
+}) {
+  const [internal, setInternal] = react.useState(
+    defaultValue ?? (multiple ? [] : "")
+  );
+  const current = value ?? internal;
+  const isOn = (v) => multiple ? current.includes(v) : current === v;
+  const select = (v) => {
+    let next;
+    if (multiple) {
+      const arr = [...current];
+      const i = arr.indexOf(v);
+      if (i >= 0) arr.splice(i, 1);
+      else arr.push(v);
+      next = arr;
+    } else {
+      next = current === v ? "" : v;
+    }
+    if (value == null) setInternal(next);
+    onValueChange?.(next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("cd-toggle-group", className), role: "group", ...rest, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      disabled: item.disabled,
+      className: cn("cd-toggle", size === "sm" && "cd-toggle--sm", isOn(item.value) && "is-on"),
+      "data-state": isOn(item.value) ? "on" : "off",
+      "aria-pressed": isOn(item.value),
+      onClick: () => select(item.value),
+      children: item.label
+    },
+    item.value
+  )) });
+}
+function Tooltip({
+  tip,
+  below = false,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn("cd-tooltip", below && "cd-tooltip--below", className),
+      "data-tip": tip,
+      ...rest,
+      children
+    }
+  );
+}
+function Transport({
+  playing = false,
+  onPlay,
+  onStop,
+  playLabel = "\u25B6 Play",
+  stopLabel = "\u25A0 Stop",
+  disabled = false,
+  className = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("cd-transport", className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cd-transport__group", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "button",
+          variant: "primary",
+          disabled: disabled || playing,
+          onClick: onPlay,
+          children: playLabel
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "button",
+          variant: "danger",
+          disabled: disabled || !playing,
+          onClick: onStop,
+          children: stopLabel
+        }
+      )
+    ] }),
+    children
+  ] });
+}
+function H1({ className = "", ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("cd-h1", className), ...rest });
+}
+function H2({ className = "", ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("cd-h2", className), ...rest });
+}
+function H3({ className = "", ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("cd-h3", className), ...rest });
+}
+function H4({ className = "", ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("h4", { className: cn("cd-h4", className), ...rest });
+}
+function P({ className = "", ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("cd-p", className), ...rest });
+}
+function Lead({ className = "", ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("cd-lead", className), ...rest });
+}
+function Muted({ className = "", ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("cd-muted", className), ...rest });
+}
+function Small({ className = "", ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("small", { className: cn("cd-small", className), ...rest });
+}
+function InlineCode({ className = "", ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("code", { className: cn("cd-code", className), ...rest });
+}
+function Pre({ className = "", ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("pre", { className: cn("cd-pre", className), ...rest });
+}
+function Blockquote({ className = "", ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("blockquote", { className: cn("cd-blockquote", className), ...rest });
+}
+function List({ className = "", ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("cd-list", className), ...rest });
+}
+function InlineLink({ className = "", ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("a", { className: cn("cd-inline-link", className), ...rest });
+}
+function Typography({ className = "", children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("cd-typography", className), ...rest, children });
+}
+
+exports.Accordion = Accordion;
+exports.Alert = Alert;
+exports.AlertDialog = AlertDialog;
+exports.AspectRatio = AspectRatio;
+exports.AugButton = AugButton;
+exports.AugPanel = AugPanel;
+exports.Avatar = Avatar;
+exports.AvatarGroup = AvatarGroup;
+exports.Badge = Badge;
+exports.Blockquote = Blockquote;
+exports.BottomNav = BottomNav;
+exports.Breadcrumb = Breadcrumb;
+exports.Button = Button;
+exports.ButtonGroup = ButtonGroup;
+exports.Calendar = Calendar;
+exports.Card = Card;
+exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardTitle = CardTitle;
+exports.Carousel = Carousel;
+exports.Chat = Chat;
+exports.ChatAction = ChatAction;
+exports.ChatActions = ChatActions;
+exports.ChatCodeBlock = ChatCodeBlock;
+exports.ChatMessage = ChatMessage;
+exports.ChatTyping = ChatTyping;
+exports.Checkbox = Checkbox;
+exports.Chip = Chip;
+exports.ChipRow = ChipRow;
+exports.Clock = Clock;
+exports.Collapsible = Collapsible;
+exports.Combobox = Combobox;
+exports.Command = Command;
+exports.ContextMenu = ContextMenu;
+exports.DataTable = DataTable;
+exports.DatePicker = DatePicker;
+exports.Dialog = Dialog;
+exports.Drawer = Drawer;
+exports.Dropdown = Dropdown;
+exports.DropdownMenu = DropdownMenu;
+exports.Empty = Empty;
+exports.Feed = Feed;
+exports.FeedItem = FeedItem;
+exports.Field = Field;
+exports.Gauge = Gauge;
+exports.GlowCard = GlowCard;
+exports.H1 = H1;
+exports.H2 = H2;
+exports.H3 = H3;
+exports.H4 = H4;
+exports.HBar = HBar;
+exports.HoverCard = HoverCard;
+exports.HudBar = HudBar;
+exports.HudFrame = HudFrame;
+exports.HudSegment = HudSegment;
+exports.InlineCode = InlineCode;
+exports.InlineLink = InlineLink;
+exports.Input = Input;
+exports.InputGroup = InputGroup;
+exports.InputGroupAddon = InputGroupAddon;
+exports.InputOTP = InputOTP;
+exports.Interference = Interference;
+exports.Item = Item;
+exports.ItemGroup = ItemGroup;
+exports.Kbd = Kbd;
+exports.KbdGroup = KbdGroup;
+exports.Label = Label;
+exports.Lead = Lead;
+exports.List = List;
+exports.Menubar = Menubar;
+exports.Modal = Modal;
+exports.Muted = Muted;
+exports.NativeSelect = NativeSelect;
+exports.NavigationMenu = NavigationMenu;
+exports.P = P;
+exports.Pagination = Pagination;
+exports.PanelHeader = PanelHeader;
+exports.Popover = Popover;
+exports.Pre = Pre;
+exports.Progress = Progress;
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
+exports.Resizable = Resizable;
+exports.Scanner = Scanner;
+exports.ScrollArea = ScrollArea;
+exports.SectionHeader = SectionHeader;
+exports.Select = Select;
+exports.Separator = Separator;
+exports.Sheet = Sheet;
+exports.Sidebar = Sidebar;
+exports.Skeleton = Skeleton;
+exports.SkeletonRow = SkeletonRow;
+exports.Slider = Slider;
+exports.Small = Small;
+exports.Spinner = Spinner;
+exports.Spreadsheet = Spreadsheet;
+exports.Stat = Stat;
+exports.StatGrid = StatGrid;
+exports.StatusBar = StatusBar;
+exports.StatusDot = StatusDot;
+exports.StatusPill = StatusPill;
+exports.Switch = Switch;
+exports.Table = Table;
+exports.Tabs = Tabs;
+exports.Terminal = Terminal;
+exports.Textarea = Textarea;
+exports.ThemeProvider = ThemeProvider;
+exports.Ticker = Ticker;
+exports.Toast = Toast;
+exports.Toaster = Toaster;
+exports.ToasterProvider = ToasterProvider;
+exports.Toggle = Toggle;
+exports.ToggleGroup = ToggleGroup;
+exports.Tooltip = Tooltip;
+exports.Transport = Transport;
+exports.Typography = Typography;
+exports.cn = cn;
+exports.createSpreadsheetData = createSpreadsheetData;
+exports.useTheme = useTheme;
+exports.useToast = useToast;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map