@kinetixui/ui 0.11.0 → 0.12.0

package/dist/index.js

@@ -3712,14 +3712,14 @@ var NumberInput = React62.forwardRef(
   ({ className, value, defaultValue = 0, min, max, step = 1, onChange, disabled, ...props }, ref) => {
     const [internal, setInternal] = React62.useState(defaultValue);
     const current = value ?? internal;
-    const clamp = (n) => {
+    const clamp2 = (n) => {
       let v = n;
       if (min != null) v = Math.max(min, v);
       if (max != null) v = Math.min(max, v);
       return v;
     };
     const set = (n) => {
-      const v = clamp(n);
+      const v = clamp2(n);
       setInternal(v);
       onChange?.(v);
     };
@@ -4330,6 +4330,1692 @@ var PageHeader = React76.forwardRef(
   )
 );
 PageHeader.displayName = "PageHeader";
+
+// src/components/notification-center.tsx
+import * as React77 from "react";
+import { Bell } from "lucide-react";
+import { jsx as jsx82, jsxs as jsxs48 } from "react/jsx-runtime";
+var NotificationCenter = Popover;
+var NotificationCenterTrigger = React77.forwardRef(
+  ({ className, unreadCount = 0, children, ...props }, ref) => /* @__PURE__ */ jsx82(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs48(
+    Button,
+    {
+      ref,
+      variant: "Ghost",
+      size: "icon",
+      "aria-label": unreadCount > 0 ? `Notifications, ${unreadCount} unread` : "Notifications",
+      className: cn("relative", className),
+      ...props,
+      children: [
+        children ?? /* @__PURE__ */ jsx82(Bell, { className: "size-5" }),
+        unreadCount > 0 && /* @__PURE__ */ jsx82("span", { className: "absolute right-1.5 top-1.5 flex size-2 rounded-full bg-destructive ring-2 ring-background" })
+      ]
+    }
+  ) })
+);
+NotificationCenterTrigger.displayName = "NotificationCenterTrigger";
+var NotificationCenterContent = React77.forwardRef(
+  ({ className, onMarkAllRead, children, align = "end", ...props }, ref) => /* @__PURE__ */ jsxs48(PopoverContent, { ref, align, className: cn("w-80 p-0", className), ...props, children: [
+    /* @__PURE__ */ jsxs48("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
+      /* @__PURE__ */ jsx82("p", { className: "text-title-sm font-medium text-foreground", children: "Notifications" }),
+      onMarkAllRead && /* @__PURE__ */ jsx82(
+        "button",
+        {
+          type: "button",
+          onClick: onMarkAllRead,
+          className: "text-label-md font-medium text-primary outline-none hover:underline focus-visible:underline",
+          children: "Mark all read"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx82("div", { className: "flex max-h-80 flex-col divide-y divide-border overflow-y-auto", children })
+  ] })
+);
+NotificationCenterContent.displayName = "NotificationCenterContent";
+var NotificationItem = React77.forwardRef(
+  ({ className, title, description, time, unread, onSelect, ...props }, ref) => {
+    const interactive = !!onSelect;
+    return /* @__PURE__ */ jsxs48(
+      "div",
+      {
+        ref,
+        role: interactive ? "button" : void 0,
+        tabIndex: interactive ? 0 : void 0,
+        onClick: onSelect,
+        onKeyDown: interactive ? (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onSelect?.();
+          }
+        } : void 0,
+        className: cn(
+          "flex items-start gap-3 px-4 py-3 font-sans outline-none",
+          interactive && "cursor-pointer hover:bg-accent focus-visible:bg-accent",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx82("span", { className: cn("mt-1.5 size-2 shrink-0 rounded-full", unread ? "bg-primary" : "bg-transparent") }),
+          /* @__PURE__ */ jsxs48("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx82("p", { className: cn("truncate text-body-sm", unread ? "font-medium text-foreground" : "text-muted-foreground"), children: title }),
+            description && /* @__PURE__ */ jsx82("p", { className: "truncate text-body-sm text-muted-foreground", children: description }),
+            time && /* @__PURE__ */ jsx82("p", { className: "mt-0.5 text-label-sm text-muted-foreground", children: time })
+          ] })
+        ]
+      }
+    );
+  }
+);
+NotificationItem.displayName = "NotificationItem";
+
+// src/components/tree-view.tsx
+import * as React78 from "react";
+import { ChevronRight as ChevronRight7 } from "lucide-react";
+import { jsx as jsx83, jsxs as jsxs49 } from "react/jsx-runtime";
+var TreeViewContext = React78.createContext(null);
+function useTreeViewContext() {
+  const ctx = React78.useContext(TreeViewContext);
+  if (!ctx) throw new Error("TreeItem must be rendered inside a TreeView");
+  return ctx;
+}
+var TreeLevelContext = React78.createContext(0);
+var TreeView = React78.forwardRef(
+  ({
+    className,
+    checkable = false,
+    expanded,
+    defaultExpanded = [],
+    onExpandedChange,
+    selected,
+    onSelectedChange,
+    checkedValues,
+    defaultCheckedValues = [],
+    onCheckedChange,
+    children,
+    ...props
+  }, ref) => {
+    const [internalExpanded, setInternalExpanded] = React78.useState(defaultExpanded);
+    const currentExpanded = expanded ?? internalExpanded;
+    const [internalChecked, setInternalChecked] = React78.useState(defaultCheckedValues);
+    const currentChecked = checkedValues ?? internalChecked;
+    const [tabbableValue, setTabbableValue] = React78.useState(null);
+    const firstValueRef = React78.useRef(null);
+    const toggleExpanded = React78.useCallback(
+      (value) => {
+        const next = currentExpanded.includes(value) ? currentExpanded.filter((v) => v !== value) : [...currentExpanded, value];
+        setInternalExpanded(next);
+        onExpandedChange?.(next);
+      },
+      [currentExpanded, onExpandedChange]
+    );
+    const toggleChecked = React78.useCallback(
+      (value) => {
+        const next = currentChecked.includes(value) ? currentChecked.filter((v) => v !== value) : [...currentChecked, value];
+        setInternalChecked(next);
+        onCheckedChange?.(next);
+      },
+      [currentChecked, onCheckedChange]
+    );
+    const contextValue = {
+      isExpanded: (value) => currentExpanded.includes(value),
+      toggleExpanded,
+      selected,
+      select: (value) => onSelectedChange?.(value),
+      checkable,
+      isChecked: (value) => currentChecked.includes(value),
+      toggleChecked,
+      tabbableValue,
+      setTabbableValue,
+      firstValueRef
+    };
+    return /* @__PURE__ */ jsx83(
+      "div",
+      {
+        ref,
+        role: "tree",
+        "aria-multiselectable": checkable || void 0,
+        className: cn("flex flex-col font-sans", className),
+        ...props,
+        children: /* @__PURE__ */ jsx83(TreeViewContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx83(TreeLevelContext.Provider, { value: 0, children }) })
+      }
+    );
+  }
+);
+TreeView.displayName = "TreeView";
+var TreeItem = React78.forwardRef(
+  ({ className, value, label, icon, disabled, children, onClick, onKeyDown, ...props }, ref) => {
+    const ctx = useTreeViewContext();
+    const level = React78.useContext(TreeLevelContext);
+    const hasChildren = React78.Children.count(children) > 0;
+    const expanded = ctx.isExpanded(value);
+    const isChecked = ctx.isChecked(value);
+    if (ctx.firstValueRef.current === null) ctx.firstValueRef.current = value;
+    const isTabbable = (ctx.tabbableValue ?? ctx.firstValueRef.current) === value;
+    const localRef = React78.useRef(null);
+    const setRefs = (node) => {
+      localRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const activate = () => {
+      ctx.select(value);
+      if (ctx.checkable) ctx.toggleChecked(value);
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented || disabled) return;
+      const root = localRef.current?.closest('[role="tree"]');
+      const items = root ? Array.from(root.querySelectorAll('[role="treeitem"]')) : [];
+      const idx = items.indexOf(e.currentTarget);
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          items[idx + 1]?.focus();
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          items[idx - 1]?.focus();
+          break;
+        case "Home":
+          e.preventDefault();
+          items[0]?.focus();
+          break;
+        case "End":
+          e.preventDefault();
+          items[items.length - 1]?.focus();
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          if (hasChildren && !expanded) ctx.toggleExpanded(value);
+          else if (hasChildren) items[idx + 1]?.focus();
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          if (hasChildren && expanded) ctx.toggleExpanded(value);
+          else {
+            const parent = localRef.current?.parentElement?.closest('[role="treeitem"]');
+            parent?.focus();
+          }
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          activate();
+          break;
+      }
+    };
+    return /* @__PURE__ */ jsxs49(
+      "div",
+      {
+        ref: setRefs,
+        role: "treeitem",
+        "aria-expanded": hasChildren ? expanded : void 0,
+        "aria-selected": ctx.selected === value,
+        "aria-disabled": disabled || void 0,
+        tabIndex: disabled ? void 0 : isTabbable ? 0 : -1,
+        onFocus: () => ctx.setTabbableValue(value),
+        onKeyDown: handleKeyDown,
+        onClick: (e) => {
+          onClick?.(e);
+          if (e.defaultPrevented || disabled) return;
+          activate();
+        },
+        className: cn("outline-none", disabled && "pointer-events-none opacity-disabled", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs49(
+            "div",
+            {
+              style: { paddingLeft: level * 20 + 8 },
+              className: cn(
+                "flex items-center gap-1.5 rounded-sm py-1.5 pr-2 text-body-sm text-foreground",
+                "hover:bg-accent",
+                ctx.selected === value && "bg-accent",
+                "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring"
+              ),
+              children: [
+                hasChildren ? /* @__PURE__ */ jsx83(
+                  ChevronRight7,
+                  {
+                    className: cn("size-4 shrink-0 text-muted-foreground transition-transform", expanded && "rotate-90"),
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      ctx.toggleExpanded(value);
+                    }
+                  }
+                ) : /* @__PURE__ */ jsx83("span", { className: "size-4 shrink-0" }),
+                ctx.checkable && /* @__PURE__ */ jsx83(
+                  Checkbox,
+                  {
+                    checked: isChecked,
+                    onCheckedChange: () => ctx.toggleChecked(value),
+                    onClick: (e) => e.stopPropagation(),
+                    tabIndex: -1
+                  }
+                ),
+                icon,
+                /* @__PURE__ */ jsx83("span", { className: "truncate", children: label })
+              ]
+            }
+          ),
+          hasChildren && expanded && /* @__PURE__ */ jsx83("div", { role: "group", children: /* @__PURE__ */ jsx83(TreeLevelContext.Provider, { value: level + 1, children }) })
+        ]
+      }
+    );
+  }
+);
+TreeItem.displayName = "TreeItem";
+
+// src/components/multi-select.tsx
+import * as React79 from "react";
+import { Check as Check8 } from "lucide-react";
+import { jsx as jsx84, jsxs as jsxs50 } from "react/jsx-runtime";
+var MultiSelect = React79.forwardRef(
+  ({ className, options, value, defaultValue = [], onValueChange, placeholder = "Select\u2026", creatable = false, ...props }, ref) => {
+    const [internal, setInternal] = React79.useState(defaultValue);
+    const current = value ?? internal;
+    const [open, setOpen] = React79.useState(false);
+    const [query, setQuery] = React79.useState("");
+    const set = (next) => {
+      setInternal(next);
+      onValueChange?.(next);
+    };
+    const toggle = (v) => set(current.includes(v) ? current.filter((x) => x !== v) : [...current, v]);
+    const remove = (v) => set(current.filter((x) => x !== v));
+    const labelFor = (v) => options.find((o) => o.value === v)?.label ?? v;
+    const trimmed = query.trim();
+    const canCreate = creatable && trimmed.length > 0 && !options.some((o) => o.label.toLowerCase() === trimmed.toLowerCase());
+    const visibleOptions = creatable ? options.filter((o) => o.label.toLowerCase().includes(trimmed.toLowerCase())) : options;
+    return /* @__PURE__ */ jsxs50(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx84(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs50(
+        "div",
+        {
+          ref,
+          role: "combobox",
+          "aria-expanded": open,
+          "aria-haspopup": "listbox",
+          tabIndex: 0,
+          onClick: () => setOpen(true),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              setOpen(true);
+            }
+          },
+          className: cn(
+            "flex min-h-11 w-full flex-wrap items-center gap-1.5 border border-input bg-background px-3 py-2 font-sans",
+            "outline-none focus-visible:border-primary focus-visible:shadow-focus",
+            "aria-expanded:border-primary aria-expanded:shadow-focus",
+            className
+          ),
+          ...props,
+          children: [
+            current.length === 0 && /* @__PURE__ */ jsx84("span", { className: "text-body-sm text-muted-foreground", children: placeholder }),
+            current.map((v) => /* @__PURE__ */ jsx84(Tag, { variant: "secondary", onRemove: () => remove(v), onClick: (e) => e.stopPropagation(), children: labelFor(v) }, v))
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx84(
+        PopoverContent,
+        {
+          align: "start",
+          className: "w-[var(--radix-popover-trigger-width)] p-0",
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          children: /* @__PURE__ */ jsxs50(Command, { shouldFilter: !creatable, children: [
+            /* @__PURE__ */ jsx84(CommandInput, { placeholder: "Search\u2026", value: query, onValueChange: setQuery }),
+            /* @__PURE__ */ jsxs50(CommandList, { children: [
+              /* @__PURE__ */ jsx84(CommandEmpty, { children: canCreate ? /* @__PURE__ */ jsxs50(
+                "button",
+                {
+                  type: "button",
+                  className: "flex w-full items-center px-2 py-1.5 text-left text-body-sm text-foreground hover:bg-accent",
+                  onClick: () => {
+                    toggle(trimmed);
+                    setQuery("");
+                  },
+                  children: [
+                    "Create \u201C",
+                    trimmed,
+                    "\u201D"
+                  ]
+                }
+              ) : "No results." }),
+              /* @__PURE__ */ jsx84(CommandGroup, { children: visibleOptions.map((option) => /* @__PURE__ */ jsxs50(CommandItem, { value: option.label, onSelect: () => toggle(option.value), children: [
+                /* @__PURE__ */ jsx84(Check8, { className: cn("size-4", current.includes(option.value) ? "opacity-100" : "opacity-0") }),
+                option.label
+              ] }, option.value)) })
+            ] })
+          ] })
+        }
+      )
+    ] });
+  }
+);
+MultiSelect.displayName = "MultiSelect";
+
+// src/components/message-bubble.tsx
+import * as React80 from "react";
+import { Check as Check9, CheckCheck } from "lucide-react";
+import { jsx as jsx85, jsxs as jsxs51 } from "react/jsx-runtime";
+var MessageBubble = React80.forwardRef(
+  ({ className, variant = "received", timestamp, status, grouped = false, avatar, children, ...props }, ref) => {
+    const sent = variant === "sent";
+    return /* @__PURE__ */ jsxs51("div", { ref, className: cn("flex items-end gap-2 font-sans", sent && "flex-row-reverse", className), ...props, children: [
+      avatar && !sent && /* @__PURE__ */ jsx85("div", { className: "shrink-0 self-end", children: avatar }),
+      /* @__PURE__ */ jsxs51("div", { className: cn("flex max-w-[75%] flex-col gap-1", sent ? "items-end" : "items-start"), children: [
+        /* @__PURE__ */ jsx85(
+          "div",
+          {
+            className: cn(
+              "min-w-0 rounded-2xl px-3.5 py-2 text-body-sm",
+              sent ? "bg-primary text-primary-foreground" : "bg-muted text-foreground",
+              sent && grouped && "rounded-tr-md",
+              !sent && grouped && "rounded-tl-md"
+            ),
+            children
+          }
+        ),
+        (timestamp || sent && status) && /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-1 px-1 text-label-sm text-muted-foreground", children: [
+          timestamp,
+          sent && status && /* @__PURE__ */ jsx85("span", { className: cn(status === "read" && "text-primary"), children: status === "sent" ? /* @__PURE__ */ jsx85(Check9, { className: "size-3.5" }) : /* @__PURE__ */ jsx85(CheckCheck, { className: "size-3.5" }) })
+        ] })
+      ] })
+    ] });
+  }
+);
+MessageBubble.displayName = "MessageBubble";
+var TypingIndicator = React80.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx85(
+    "div",
+    {
+      ref,
+      role: "status",
+      "aria-label": "Typing",
+      className: cn("flex w-fit items-center gap-1 rounded-2xl bg-muted px-3.5 py-2.5", className),
+      ...props,
+      children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx85(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "size-1.5 animate-typing-dot rounded-full bg-muted-foreground",
+          style: { animationDelay: `${i * 150}ms` }
+        },
+        i
+      ))
+    }
+  )
+);
+TypingIndicator.displayName = "TypingIndicator";
+
+// src/components/tour.tsx
+import * as React81 from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx as jsx86, jsxs as jsxs52 } from "react/jsx-runtime";
+var SPOTLIGHT_PADDING = 8;
+var Tour = ({
+  steps,
+  open,
+  stepIndex,
+  onStepIndexChange,
+  onOpenChange,
+  nextLabel = "Next",
+  backLabel = "Back",
+  skipLabel = "Skip",
+  doneLabel = "Done"
+}) => {
+  const [mounted, setMounted] = React81.useState(false);
+  const [rect, setRect] = React81.useState(null);
+  const step = steps[stepIndex];
+  React81.useEffect(() => setMounted(true), []);
+  React81.useEffect(() => {
+    if (!open || !step) return;
+    const update = () => {
+      const el = document.querySelector(step.target);
+      if (el) {
+        setRect(el.getBoundingClientRect());
+        el.scrollIntoView({ behavior: "smooth", block: "center" });
+      } else {
+        setRect(null);
+      }
+    };
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [open, step]);
+  React81.useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") onOpenChange(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, onOpenChange]);
+  if (!mounted || !open || !step) return null;
+  const isFirst = stepIndex === 0;
+  const isLast = stepIndex === steps.length - 1;
+  const spotlightStyle = rect ? {
+    top: rect.top - SPOTLIGHT_PADDING,
+    left: rect.left - SPOTLIGHT_PADDING,
+    width: rect.width + SPOTLIGHT_PADDING * 2,
+    height: rect.height + SPOTLIGHT_PADDING * 2,
+    boxShadow: "0 0 0 9999px rgb(0 0 0 / 0.6)"
+  } : { inset: 0, background: "rgb(0 0 0 / 0.6)" };
+  const cardStyle = rect ? {
+    top: Math.min(rect.bottom + SPOTLIGHT_PADDING + 8, window.innerHeight - 220),
+    left: Math.min(Math.max(rect.left, 16), window.innerWidth - 336)
+  } : { top: "50%", left: "50%", transform: "translate(-50%, -50%)" };
+  return createPortal(
+    /* @__PURE__ */ jsxs52(Fragment, { children: [
+      /* @__PURE__ */ jsx86(
+        "div",
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none fixed z-overlay rounded-lg transition-all duration-fast",
+          style: spotlightStyle
+        }
+      ),
+      /* @__PURE__ */ jsxs52(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          className: "fixed z-overlay w-80 rounded-lg border border-border bg-popover p-4 font-sans text-popover-foreground shadow-lg transition-all duration-fast",
+          style: cardStyle,
+          children: [
+            /* @__PURE__ */ jsx86("p", { className: "text-title-sm font-medium text-foreground", children: step.title }),
+            /* @__PURE__ */ jsx86("div", { className: "mt-1.5 text-body-sm text-muted-foreground", children: step.content }),
+            /* @__PURE__ */ jsxs52("div", { className: "mt-4 flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxs52("span", { className: "text-label-sm text-muted-foreground", children: [
+                stepIndex + 1,
+                " / ",
+                steps.length
+              ] }),
+              /* @__PURE__ */ jsxs52("div", { className: "flex items-center gap-2", children: [
+                !isFirst && /* @__PURE__ */ jsx86(Button, { variant: "Ghost", size: "sm", onClick: () => onStepIndexChange(stepIndex - 1), children: backLabel }),
+                !isLast ? /* @__PURE__ */ jsxs52(Fragment, { children: [
+                  /* @__PURE__ */ jsx86(Button, { variant: "Link", size: "sm", onClick: () => onOpenChange(false), children: skipLabel }),
+                  /* @__PURE__ */ jsx86(Button, { size: "sm", onClick: () => onStepIndexChange(stepIndex + 1), children: nextLabel })
+                ] }) : /* @__PURE__ */ jsx86(Button, { size: "sm", onClick: () => onOpenChange(false), children: doneLabel })
+              ] })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+};
+
+// src/components/virtual-list.tsx
+import * as React82 from "react";
+import { jsx as jsx87 } from "react/jsx-runtime";
+function VirtualList({
+  items,
+  itemHeight,
+  height,
+  renderItem,
+  overscan = 4,
+  getItemKey,
+  className,
+  style,
+  onScroll,
+  ...props
+}) {
+  const containerRef = React82.useRef(null);
+  const [scrollTop, setScrollTop] = React82.useState(0);
+  const [viewportHeight, setViewportHeight] = React82.useState(typeof height === "number" ? height : 0);
+  React82.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setViewportHeight(entry.contentRect.height);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const totalHeight = items.length * itemHeight;
+  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+  const visibleCount = Math.ceil(viewportHeight / itemHeight) + overscan * 2;
+  const endIndex = Math.min(items.length, startIndex + Math.max(visibleCount, 0));
+  const visibleItems = items.slice(startIndex, endIndex);
+  return /* @__PURE__ */ jsx87(
+    "div",
+    {
+      ref: containerRef,
+      role: "list",
+      className: cn("overflow-y-auto font-sans", className),
+      style: { height, ...style },
+      onScroll: (e) => {
+        onScroll?.(e);
+        setScrollTop(e.currentTarget.scrollTop);
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx87("div", { style: { height: totalHeight, position: "relative" }, children: visibleItems.map((item, i) => {
+        const index = startIndex + i;
+        return /* @__PURE__ */ jsx87(
+          "div",
+          {
+            role: "listitem",
+            style: { position: "absolute", top: index * itemHeight, left: 0, right: 0, height: itemHeight },
+            children: renderItem(item, index)
+          },
+          getItemKey ? getItemKey(item, index) : index
+        );
+      }) })
+    }
+  );
+}
+
+// src/components/data-grid.tsx
+import * as React83 from "react";
+import { jsx as jsx88, jsxs as jsxs53 } from "react/jsx-runtime";
+var DEFAULT_WIDTH = 160;
+var DEFAULT_MIN_WIDTH = 60;
+var DEFAULT_ROW_HEIGHT = 40;
+function DataGrid({
+  columns,
+  data,
+  height,
+  rowHeight = DEFAULT_ROW_HEIGHT,
+  overscan = 6,
+  getRowId,
+  className
+}) {
+  const columnById = React83.useMemo(() => new Map(columns.map((c) => [c.id, c])), [columns]);
+  const [order, setOrder] = React83.useState(() => columns.map((c) => c.id));
+  const [widths, setWidths] = React83.useState(
+    () => Object.fromEntries(columns.map((c) => [c.id, c.width ?? DEFAULT_WIDTH]))
+  );
+  const [sort, setSort] = React83.useState(null);
+  const [editing, setEditing] = React83.useState(null);
+  const dragIdRef = React83.useRef(null);
+  React83.useEffect(() => {
+    const knownIds = columns.map((c) => c.id);
+    const known = new Set(knownIds);
+    setOrder((prev) => {
+      const kept = prev.filter((id) => known.has(id));
+      const added = knownIds.filter((id) => !kept.includes(id));
+      return [...kept, ...added];
+    });
+    setWidths((prev) => {
+      const next = { ...prev };
+      for (const c of columns) if (!(c.id in next)) next[c.id] = c.width ?? DEFAULT_WIDTH;
+      return next;
+    });
+  }, [columns]);
+  const leftPinned = columns.filter((c) => c.pinned === "left");
+  const rightPinned = columns.filter((c) => c.pinned === "right");
+  const unpinnedOrdered = order.filter((id) => columnById.get(id) && !columnById.get(id).pinned).map((id) => columnById.get(id));
+  const renderedColumns = [...leftPinned, ...unpinnedOrdered, ...rightPinned];
+  const leftOffsets = React83.useMemo(() => {
+    const offsets = {};
+    let acc = 0;
+    for (const c of leftPinned) {
+      offsets[c.id] = acc;
+      acc += widths[c.id] ?? c.width ?? DEFAULT_WIDTH;
+    }
+    return offsets;
+  }, [columns, widths]);
+  const rightOffsets = React83.useMemo(() => {
+    const offsets = {};
+    let acc = 0;
+    for (const c of [...rightPinned].reverse()) {
+      offsets[c.id] = acc;
+      acc += widths[c.id] ?? c.width ?? DEFAULT_WIDTH;
+    }
+    return offsets;
+  }, [columns, widths]);
+  const totalWidth = renderedColumns.reduce((sum, c) => sum + (widths[c.id] ?? c.width ?? DEFAULT_WIDTH), 0);
+  const sortedData = React83.useMemo(() => {
+    if (!sort) return data;
+    const col = columnById.get(sort.columnId);
+    if (!col?.value) return data;
+    const indexed = data.map((row, index) => ({ row, index }));
+    indexed.sort((a, b) => {
+      const av = col.value(a.row);
+      const bv = col.value(b.row);
+      if (av === bv) return a.index - b.index;
+      const cmp = av < bv ? -1 : 1;
+      return sort.direction === "asc" ? cmp : -cmp;
+    });
+    return indexed.map((entry) => entry.row);
+  }, [data, sort, columnById]);
+  const containerRef = React83.useRef(null);
+  const [scrollTop, setScrollTop] = React83.useState(0);
+  const [viewportHeight, setViewportHeight] = React83.useState(typeof height === "number" ? height : 0);
+  React83.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setViewportHeight(entry.contentRect.height);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const totalHeight = sortedData.length * rowHeight;
+  const startIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
+  const visibleCount = Math.ceil(viewportHeight / rowHeight) + overscan * 2;
+  const endIndex = Math.min(sortedData.length, startIndex + Math.max(visibleCount, 0));
+  const visibleRows = sortedData.slice(startIndex, endIndex);
+  function toggleSort(columnId) {
+    setSort((prev) => {
+      if (!prev || prev.columnId !== columnId) return { columnId, direction: "asc" };
+      if (prev.direction === "asc") return { columnId, direction: "desc" };
+      return null;
+    });
+  }
+  function beginResize(columnId, minWidth, startX, startWidth) {
+    const handleMove = (ev) => {
+      setWidths((prev) => ({ ...prev, [columnId]: Math.max(minWidth, startWidth + (ev.clientX - startX)) }));
+    };
+    const handleUp = () => {
+      window.removeEventListener("pointermove", handleMove);
+      window.removeEventListener("pointerup", handleUp);
+    };
+    window.addEventListener("pointermove", handleMove);
+    window.addEventListener("pointerup", handleUp);
+  }
+  function commitEdit(column, row, rowIndex, value) {
+    column.onCellEdit?.(row, rowIndex, value);
+    setEditing(null);
+  }
+  return /* @__PURE__ */ jsx88(
+    "div",
+    {
+      ref: containerRef,
+      role: "grid",
+      className: cn("relative overflow-auto rounded-md border font-sans text-sm", className),
+      style: { height },
+      onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+      children: /* @__PURE__ */ jsxs53("div", { style: { width: totalWidth, minWidth: "100%" }, children: [
+        /* @__PURE__ */ jsx88("div", { role: "row", className: "sticky top-0 z-[2] flex border-b bg-background", children: renderedColumns.map((column) => {
+          const width = widths[column.id] ?? column.width ?? DEFAULT_WIDTH;
+          const pinnedStyle = column.pinned === "left" ? { position: "sticky", left: leftOffsets[column.id], zIndex: 3 } : column.pinned === "right" ? { position: "sticky", right: rightOffsets[column.id], zIndex: 3 } : {};
+          const isSorted = sort?.columnId === column.id;
+          return /* @__PURE__ */ jsxs53(
+            "div",
+            {
+              role: "columnheader",
+              ...column.sortable ? { "aria-sort": isSorted ? sort.direction === "asc" ? "ascending" : "descending" : "none" } : {},
+              draggable: !column.pinned,
+              onDragStart: () => {
+                dragIdRef.current = column.id;
+              },
+              onDragOver: (e) => {
+                if (!column.pinned) e.preventDefault();
+              },
+              onDrop: (e) => {
+                e.preventDefault();
+                const draggedId = dragIdRef.current;
+                dragIdRef.current = null;
+                if (!draggedId || draggedId === column.id) return;
+                setOrder((prev) => {
+                  const next = prev.filter((id) => id !== draggedId);
+                  const targetIndex = next.indexOf(column.id);
+                  next.splice(targetIndex, 0, draggedId);
+                  return next;
+                });
+              },
+              onClick: () => column.sortable && toggleSort(column.id),
+              className: cn(
+                "relative flex h-10 shrink-0 select-none items-center gap-1 px-2 font-medium text-muted-foreground",
+                column.sortable && "cursor-pointer hover:text-foreground",
+                column.pinned && "bg-background"
+              ),
+              style: { width, ...pinnedStyle },
+              children: [
+                /* @__PURE__ */ jsx88("span", { className: "truncate", children: column.header }),
+                column.sortable && isSorted && /* @__PURE__ */ jsx88("span", { "aria-hidden": "true", className: "text-xs", children: sort.direction === "asc" ? "\u25B2" : "\u25BC" }),
+                /* @__PURE__ */ jsx88(
+                  "div",
+                  {
+                    onPointerDown: (e) => {
+                      e.stopPropagation();
+                      beginResize(column.id, column.minWidth ?? DEFAULT_MIN_WIDTH, e.clientX, width);
+                    },
+                    className: "absolute right-0 top-0 h-full w-1 touch-none cursor-col-resize hover:bg-primary/50"
+                  }
+                )
+              ]
+            },
+            column.id
+          );
+        }) }),
+        /* @__PURE__ */ jsx88("div", { style: { height: totalHeight, position: "relative" }, children: visibleRows.map((row, i) => {
+          const rowIndex = startIndex + i;
+          return /* @__PURE__ */ jsx88(
+            "div",
+            {
+              role: "row",
+              className: "absolute flex w-full border-b hover:bg-muted/50",
+              style: { top: rowIndex * rowHeight, height: rowHeight },
+              children: renderedColumns.map((column) => {
+                const width = widths[column.id] ?? column.width ?? DEFAULT_WIDTH;
+                const pinnedStyle = column.pinned === "left" ? { position: "sticky", left: leftOffsets[column.id], zIndex: 1 } : column.pinned === "right" ? { position: "sticky", right: rightOffsets[column.id], zIndex: 1 } : {};
+                const isEditing = editing?.rowIndex === rowIndex && editing.columnId === column.id;
+                return /* @__PURE__ */ jsx88(
+                  "div",
+                  {
+                    role: "gridcell",
+                    onDoubleClick: () => column.editable && setEditing({ rowIndex, columnId: column.id }),
+                    className: cn("flex shrink-0 items-center px-2", column.pinned && "bg-background"),
+                    style: { width, ...pinnedStyle },
+                    children: isEditing ? /* @__PURE__ */ jsx88(
+                      "input",
+                      {
+                        autoFocus: true,
+                        defaultValue: column.value ? String(column.value(row)) : "",
+                        className: "h-7 w-full rounded-sm border-0 bg-transparent px-1 text-sm outline-none ring-1 ring-inset ring-ring",
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter") commitEdit(column, row, rowIndex, e.currentTarget.value);
+                          else if (e.key === "Escape") setEditing(null);
+                        },
+                        onBlur: (e) => commitEdit(column, row, rowIndex, e.currentTarget.value)
+                      }
+                    ) : /* @__PURE__ */ jsx88("span", { className: "truncate", children: column.cell(row, rowIndex) })
+                  },
+                  column.id
+                );
+              })
+            },
+            getRowId ? getRowId(row, rowIndex) : rowIndex
+          );
+        }) })
+      ] })
+    }
+  );
+}
+
+// src/components/json-viewer.tsx
+import * as React84 from "react";
+import { Check as Check10, ChevronRight as ChevronRight8, Copy as Copy2 } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx89, jsxs as jsxs54 } from "react/jsx-runtime";
+var JsonViewer = React84.forwardRef(
+  ({ data, expandDepth = 1, hideCopy, className, ...props }, ref) => {
+    const [copied, setCopied] = React84.useState(false);
+    const copy = async () => {
+      try {
+        await navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 1500);
+      } catch {
+      }
+    };
+    return /* @__PURE__ */ jsxs54(
+      "div",
+      {
+        ref,
+        className: cn("relative overflow-auto rounded-md border bg-muted/30 p-3 font-mono text-xs", className),
+        ...props,
+        children: [
+          !hideCopy && /* @__PURE__ */ jsx89(
+            "button",
+            {
+              type: "button",
+              onClick: copy,
+              "aria-label": "Copy JSON",
+              className: "absolute right-2 top-2 inline-flex size-6 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground",
+              children: copied ? /* @__PURE__ */ jsx89(Check10, { className: "size-3.5" }) : /* @__PURE__ */ jsx89(Copy2, { className: "size-3.5" })
+            }
+          ),
+          /* @__PURE__ */ jsx89("div", { role: "tree", children: /* @__PURE__ */ jsx89(JsonNode, { value: data, depth: 0, expandDepth, isLast: true }) })
+        ]
+      }
+    );
+  }
+);
+JsonViewer.displayName = "JsonViewer";
+function JsonNode({
+  name,
+  value,
+  depth,
+  expandDepth,
+  isLast
+}) {
+  const isContainer = value !== null && typeof value === "object";
+  const [expanded, setExpanded] = React84.useState(depth < expandDepth);
+  if (!isContainer) {
+    return /* @__PURE__ */ jsxs54("div", { role: "treeitem", style: { paddingLeft: depth * 16 }, children: [
+      name !== void 0 && /* @__PURE__ */ jsxs54("span", { className: "text-muted-foreground", children: [
+        JSON.stringify(name),
+        ": "
+      ] }),
+      /* @__PURE__ */ jsx89(JsonPrimitive, { value }),
+      !isLast && /* @__PURE__ */ jsx89("span", { className: "text-muted-foreground", children: "," })
+    ] });
+  }
+  const isArray = Array.isArray(value);
+  const entries = isArray ? value.map((v, i) => [String(i), v]) : Object.entries(value);
+  const openBracket = isArray ? "[" : "{";
+  const closeBracket = isArray ? "]" : "}";
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsxs54("div", { role: "treeitem", style: { paddingLeft: depth * 16 + 20 }, children: [
+      name !== void 0 && /* @__PURE__ */ jsxs54("span", { className: "text-muted-foreground", children: [
+        JSON.stringify(name),
+        ": "
+      ] }),
+      /* @__PURE__ */ jsxs54("span", { children: [
+        openBracket,
+        closeBracket
+      ] }),
+      !isLast && /* @__PURE__ */ jsx89("span", { className: "text-muted-foreground", children: "," })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs54("div", { role: "treeitem", "aria-expanded": expanded, children: [
+    /* @__PURE__ */ jsxs54("div", { style: { paddingLeft: depth * 16 }, className: "flex items-start gap-1", children: [
+      /* @__PURE__ */ jsx89(
+        "button",
+        {
+          type: "button",
+          onClick: () => setExpanded((e) => !e),
+          "aria-label": expanded ? "Collapse" : "Expand",
+          className: "mt-0.5 inline-flex size-4 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground",
+          children: /* @__PURE__ */ jsx89(ChevronRight8, { className: cn("size-3 transition-transform", expanded && "rotate-90") })
+        }
+      ),
+      /* @__PURE__ */ jsxs54("span", { children: [
+        name !== void 0 && /* @__PURE__ */ jsxs54("span", { className: "text-muted-foreground", children: [
+          JSON.stringify(name),
+          ": "
+        ] }),
+        /* @__PURE__ */ jsx89("span", { children: openBracket }),
+        !expanded && /* @__PURE__ */ jsxs54("span", { className: "text-muted-foreground", children: [
+          " ",
+          entries.length,
+          " ",
+          isArray ? "item" : "key",
+          entries.length === 1 ? "" : "s",
+          " "
+        ] }),
+        !expanded && /* @__PURE__ */ jsx89("span", { children: closeBracket }),
+        !expanded && !isLast && /* @__PURE__ */ jsx89("span", { className: "text-muted-foreground", children: "," })
+      ] })
+    ] }),
+    expanded && /* @__PURE__ */ jsxs54(Fragment2, { children: [
+      entries.map(([key, val], i) => /* @__PURE__ */ jsx89(
+        JsonNode,
+        {
+          name: isArray ? void 0 : key,
+          value: val,
+          depth: depth + 1,
+          expandDepth,
+          isLast: i === entries.length - 1
+        },
+        key
+      )),
+      /* @__PURE__ */ jsxs54("div", { style: { paddingLeft: depth * 16 }, children: [
+        /* @__PURE__ */ jsx89("span", { children: closeBracket }),
+        !isLast && /* @__PURE__ */ jsx89("span", { className: "text-muted-foreground", children: "," })
+      ] })
+    ] })
+  ] });
+}
+function JsonPrimitive({ value }) {
+  if (value === null) return /* @__PURE__ */ jsx89("span", { className: "italic text-muted-foreground", children: "null" });
+  if (value === void 0) return /* @__PURE__ */ jsx89("span", { className: "italic text-muted-foreground", children: "undefined" });
+  if (typeof value === "string") return /* @__PURE__ */ jsx89("span", { className: "text-success", children: JSON.stringify(value) });
+  if (typeof value === "number") return /* @__PURE__ */ jsx89("span", { className: "text-info", children: value });
+  if (typeof value === "boolean") return /* @__PURE__ */ jsx89("span", { className: "text-warning", children: String(value) });
+  return /* @__PURE__ */ jsx89("span", { children: String(value) });
+}
+
+// src/components/diff-viewer.tsx
+import * as React85 from "react";
+import { jsx as jsx90, jsxs as jsxs55 } from "react/jsx-runtime";
+function computeLineDiff(oldText, newText) {
+  const oldLines = oldText.split("\n");
+  const newLines = newText.split("\n");
+  const n = oldLines.length;
+  const m = newLines.length;
+  const dp = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0));
+  for (let i2 = n - 1; i2 >= 0; i2--) {
+    for (let j2 = m - 1; j2 >= 0; j2--) {
+      dp[i2][j2] = oldLines[i2] === newLines[j2] ? dp[i2 + 1][j2 + 1] + 1 : Math.max(dp[i2 + 1][j2], dp[i2][j2 + 1]);
+    }
+  }
+  const ops = [];
+  let i = 0;
+  let j = 0;
+  while (i < n && j < m) {
+    if (oldLines[i] === newLines[j]) {
+      ops.push({ type: "equal", oldLine: i + 1, newLine: j + 1, text: oldLines[i] });
+      i++;
+      j++;
+    } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+      ops.push({ type: "remove", oldLine: i + 1, text: oldLines[i] });
+      i++;
+    } else {
+      ops.push({ type: "add", newLine: j + 1, text: newLines[j] });
+      j++;
+    }
+  }
+  while (i < n) {
+    ops.push({ type: "remove", oldLine: i + 1, text: oldLines[i] });
+    i++;
+  }
+  while (j < m) {
+    ops.push({ type: "add", newLine: j + 1, text: newLines[j] });
+    j++;
+  }
+  return ops;
+}
+var DiffViewer = React85.forwardRef(
+  ({ oldText, newText, mode = "unified", oldLabel = "Before", newLabel = "After", className, ...props }, ref) => {
+    const ops = React85.useMemo(() => computeLineDiff(oldText, newText), [oldText, newText]);
+    return /* @__PURE__ */ jsx90("div", { ref, className: cn("overflow-auto rounded-md border font-mono text-xs", className), ...props, children: mode === "split" ? /* @__PURE__ */ jsx90(SplitDiff, { ops, oldLabel, newLabel }) : /* @__PURE__ */ jsx90(UnifiedDiff, { ops }) });
+  }
+);
+DiffViewer.displayName = "DiffViewer";
+function UnifiedDiff({ ops }) {
+  return /* @__PURE__ */ jsx90("div", { role: "table", children: ops.map((op, i) => /* @__PURE__ */ jsxs55(
+    "div",
+    {
+      role: "row",
+      className: cn("flex", op.type === "add" && "bg-success/10", op.type === "remove" && "bg-destructive/10"),
+      children: [
+        /* @__PURE__ */ jsx90("span", { className: "w-9 shrink-0 select-none border-r px-1.5 text-right text-muted-foreground", children: op.type !== "add" ? op.oldLine : "" }),
+        /* @__PURE__ */ jsx90("span", { className: "w-9 shrink-0 select-none border-r px-1.5 text-right text-muted-foreground", children: op.type !== "remove" ? op.newLine : "" }),
+        /* @__PURE__ */ jsx90(
+          "span",
+          {
+            className: cn(
+              "w-4 shrink-0 select-none text-center",
+              op.type === "add" && "text-success",
+              op.type === "remove" && "text-destructive"
+            ),
+            children: op.type === "add" ? "+" : op.type === "remove" ? "\u2212" : ""
+          }
+        ),
+        /* @__PURE__ */ jsx90("span", { className: "min-w-0 flex-1 whitespace-pre px-1", children: op.text })
+      ]
+    },
+    i
+  )) });
+}
+function SplitDiff({ ops, oldLabel, newLabel }) {
+  return /* @__PURE__ */ jsxs55("div", { role: "table", children: [
+    /* @__PURE__ */ jsxs55("div", { className: "flex border-b bg-muted/40 text-muted-foreground", children: [
+      /* @__PURE__ */ jsx90("div", { className: "flex-1 px-2 py-1", children: oldLabel }),
+      /* @__PURE__ */ jsx90("div", { className: "flex-1 border-l px-2 py-1", children: newLabel })
+    ] }),
+    ops.map((op, i) => /* @__PURE__ */ jsxs55("div", { role: "row", className: "flex", children: [
+      /* @__PURE__ */ jsxs55("div", { className: cn("flex flex-1 items-start", op.type === "remove" && "bg-destructive/10"), children: [
+        /* @__PURE__ */ jsx90("span", { className: "w-9 shrink-0 select-none px-1.5 text-right text-muted-foreground", children: op.type !== "add" ? op.oldLine : "" }),
+        /* @__PURE__ */ jsx90("span", { className: "min-w-0 flex-1 whitespace-pre px-1", children: op.type !== "add" ? op.text : "" })
+      ] }),
+      /* @__PURE__ */ jsxs55("div", { className: cn("flex flex-1 items-start border-l", op.type === "add" && "bg-success/10"), children: [
+        /* @__PURE__ */ jsx90("span", { className: "w-9 shrink-0 select-none px-1.5 text-right text-muted-foreground", children: op.type !== "remove" ? op.newLine : "" }),
+        /* @__PURE__ */ jsx90("span", { className: "min-w-0 flex-1 whitespace-pre px-1", children: op.type !== "remove" ? op.text : "" })
+      ] })
+    ] }, i))
+  ] });
+}
+
+// src/components/color-picker.tsx
+import * as React86 from "react";
+import * as SliderPrimitive3 from "@radix-ui/react-slider";
+import { Pipette } from "lucide-react";
+import { jsx as jsx91, jsxs as jsxs56 } from "react/jsx-runtime";
+var clamp = (v, min, max) => Math.min(max, Math.max(min, v));
+function hexToRgba(hex) {
+  const h = hex.replace("#", "");
+  if (h.length === 8) {
+    const n2 = parseInt(h, 16);
+    return [n2 >>> 24 & 255, n2 >>> 16 & 255, n2 >>> 8 & 255, (n2 & 255) / 255];
+  }
+  const n = parseInt(h.length === 3 ? h.replace(/(.)/g, "$1$1") : h, 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255, 1];
+}
+function rgbaToHex(r, g, b, a, includeAlpha) {
+  const toHex = (v) => clamp(Math.round(v), 0, 255).toString(16).padStart(2, "0");
+  const base = `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+  return includeAlpha ? `${base}${toHex(a * 255)}` : base;
+}
+function hsvToRgb(h, s, v) {
+  s /= 100;
+  v /= 100;
+  const c = v * s;
+  const hh = h / 60;
+  const x = c * (1 - Math.abs(hh % 2 - 1));
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (hh < 1) [r, g, b] = [c, x, 0];
+  else if (hh < 2) [r, g, b] = [x, c, 0];
+  else if (hh < 3) [r, g, b] = [0, c, x];
+  else if (hh < 4) [r, g, b] = [0, x, c];
+  else if (hh < 5) [r, g, b] = [x, 0, c];
+  else [r, g, b] = [c, 0, x];
+  const m = v - c;
+  return [(r + m) * 255, (g + m) * 255, (b + m) * 255];
+}
+function rgbToHsv(r, g, b) {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const d = max - min;
+  let h = 0;
+  if (d !== 0) {
+    switch (max) {
+      case r:
+        h = (g - b) / d % 6;
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      default:
+        h = (r - g) / d + 4;
+    }
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  const s = max === 0 ? 0 : d / max;
+  return [h, s * 100, max * 100];
+}
+var HEX_PATTERN_ALPHA = /^[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/;
+var HEX_PATTERN = /^[0-9a-fA-F]{6}$/;
+var ColorPicker = React86.forwardRef(
+  ({ value, onChange, alpha = false, swatches, className, ...props }, ref) => {
+    const [hsv, setHsv] = React86.useState(() => {
+      const [r, g, b] = hexToRgba(value);
+      return rgbToHsv(r, g, b);
+    });
+    const [a, setA] = React86.useState(() => hexToRgba(value)[3]);
+    const lastEmitted = React86.useRef(value);
+    const [h, s, v] = hsv;
+    React86.useEffect(() => {
+      if (value === lastEmitted.current) return;
+      const [r, g, b, na] = hexToRgba(value);
+      setHsv(rgbToHsv(r, g, b));
+      setA(na);
+      lastEmitted.current = value;
+    }, [value]);
+    const commit = React86.useCallback(
+      (nh, ns, nv, na) => {
+        setHsv([nh, ns, nv]);
+        setA(na);
+        const [r, g, b] = hsvToRgb(nh, ns, nv);
+        const hex = rgbaToHex(r, g, b, na, alpha);
+        lastEmitted.current = hex;
+        onChange(hex);
+      },
+      [alpha, onChange]
+    );
+    const squareRef = React86.useRef(null);
+    const draggingRef = React86.useRef(false);
+    const updateFromPoint = React86.useCallback(
+      (clientX, clientY) => {
+        const el = squareRef.current;
+        if (!el) return;
+        const rect = el.getBoundingClientRect();
+        const ns = clamp((clientX - rect.left) / rect.width * 100, 0, 100);
+        const nv = clamp(100 - (clientY - rect.top) / rect.height * 100, 0, 100);
+        commit(h, ns, nv, a);
+      },
+      [commit, h, a]
+    );
+    const handleSquarePointerDown = (e) => {
+      draggingRef.current = true;
+      e.currentTarget.setPointerCapture(e.pointerId);
+      updateFromPoint(e.clientX, e.clientY);
+    };
+    const handleSquarePointerMove = (e) => {
+      if (!draggingRef.current) return;
+      updateFromPoint(e.clientX, e.clientY);
+    };
+    const handleSquarePointerUp = () => {
+      draggingRef.current = false;
+    };
+    const handleSquareKeyDown = (e) => {
+      const step = e.shiftKey ? 10 : 1;
+      if (e.key === "ArrowLeft") commit(h, clamp(s - step, 0, 100), v, a);
+      else if (e.key === "ArrowRight") commit(h, clamp(s + step, 0, 100), v, a);
+      else if (e.key === "ArrowUp") commit(h, s, clamp(v + step, 0, 100), a);
+      else if (e.key === "ArrowDown") commit(h, s, clamp(v - step, 0, 100), a);
+      else return;
+      e.preventDefault();
+    };
+    const [supportsEyeDropper, setSupportsEyeDropper] = React86.useState(false);
+    React86.useEffect(() => setSupportsEyeDropper(typeof window !== "undefined" && !!window.EyeDropper), []);
+    const pickFromScreen = async () => {
+      if (!window.EyeDropper) return;
+      try {
+        const result = await new window.EyeDropper().open();
+        const [r, g, b] = hexToRgba(result.sRGBHex);
+        commit(...rgbToHsv(r, g, b), a);
+      } catch {
+      }
+    };
+    return /* @__PURE__ */ jsxs56("div", { ref, className: cn("flex w-64 flex-col gap-3 font-sans", className), ...props, children: [
+      /* @__PURE__ */ jsx91(
+        "div",
+        {
+          ref: squareRef,
+          role: "slider",
+          tabIndex: 0,
+          "aria-label": "Saturation and value",
+          "aria-valuetext": `saturation ${Math.round(s)}%, value ${Math.round(v)}%`,
+          onPointerDown: handleSquarePointerDown,
+          onPointerMove: handleSquarePointerMove,
+          onPointerUp: handleSquarePointerUp,
+          onKeyDown: handleSquareKeyDown,
+          className: "relative h-40 w-full touch-none rounded-md outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          style: {
+            backgroundColor: `hsl(${h} 100% 50%)`,
+            backgroundImage: "linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent)"
+          },
+          children: /* @__PURE__ */ jsx91(
+            "div",
+            {
+              className: "absolute size-3.5 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow",
+              style: { left: `${s}%`, bottom: `${v}%`, backgroundColor: `hsl(${h} ${s}% ${v}%)` }
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs56(
+        SliderPrimitive3.Root,
+        {
+          value: [h],
+          min: 0,
+          max: 360,
+          step: 1,
+          onValueChange: ([nh]) => commit(nh ?? h, s, v, a),
+          "aria-label": "Hue",
+          className: "relative flex h-4 w-full touch-none select-none items-center",
+          children: [
+            /* @__PURE__ */ jsx91(
+              SliderPrimitive3.Track,
+              {
+                className: "relative h-3 w-full grow rounded-full",
+                style: {
+                  backgroundImage: "linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%))"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx91(SliderPrimitive3.Thumb, { className: "block size-4 rounded-full border-2 border-white bg-background shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" })
+          ]
+        }
+      ),
+      alpha && /* @__PURE__ */ jsxs56(
+        SliderPrimitive3.Root,
+        {
+          value: [Math.round(a * 100)],
+          min: 0,
+          max: 100,
+          step: 1,
+          onValueChange: ([na]) => commit(h, s, v, (na ?? a * 100) / 100),
+          "aria-label": "Alpha",
+          className: "relative flex h-4 w-full touch-none select-none items-center",
+          children: [
+            /* @__PURE__ */ jsx91(
+              SliderPrimitive3.Track,
+              {
+                className: "relative h-3 w-full grow overflow-hidden rounded-full",
+                style: {
+                  backgroundImage: "conic-gradient(#0000001a 90deg, transparent 90deg 180deg, #0000001a 180deg 270deg, transparent 270deg)",
+                  backgroundSize: "8px 8px"
+                },
+                children: /* @__PURE__ */ jsx91(
+                  "div",
+                  {
+                    className: "absolute inset-0",
+                    style: { backgroundImage: `linear-gradient(to right, transparent, hsl(${h} ${s}% ${v}%))` }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx91(SliderPrimitive3.Thumb, { className: "block size-4 rounded-full border-2 border-white bg-background shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs56("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx91(
+          "div",
+          {
+            className: "size-8 shrink-0 rounded-md border",
+            style: {
+              backgroundImage: "conic-gradient(#0000001a 90deg, transparent 90deg 180deg, #0000001a 180deg 270deg, transparent 270deg), linear-gradient(hsl(0 0% 0% / 0), hsl(0 0% 0% / 0))",
+              backgroundSize: "8px 8px"
+            },
+            children: /* @__PURE__ */ jsx91("div", { className: "size-full rounded-md", style: { backgroundColor: value } })
+          }
+        ),
+        /* @__PURE__ */ jsxs56("div", { className: "flex flex-1 items-center gap-1", children: [
+          /* @__PURE__ */ jsx91("span", { className: "text-muted-foreground", children: "#" }),
+          /* @__PURE__ */ jsx91(HexField, { value, alpha, onCommit: onChange })
+        ] }),
+        supportsEyeDropper && /* @__PURE__ */ jsx91(
+          Button,
+          {
+            type: "button",
+            variant: "Ghost",
+            size: "icon",
+            "aria-label": "Pick color from screen",
+            onClick: pickFromScreen,
+            children: /* @__PURE__ */ jsx91(Pipette, { className: "size-4" })
+          }
+        )
+      ] }),
+      swatches && swatches.length > 0 && /* @__PURE__ */ jsx91("div", { className: "flex flex-wrap gap-1.5", children: swatches.map((sw) => /* @__PURE__ */ jsx91(
+        "button",
+        {
+          type: "button",
+          "aria-label": sw,
+          onClick: () => {
+            const [r, g, b] = hexToRgba(sw);
+            commit(...rgbToHsv(r, g, b), a);
+          },
+          className: "size-6 rounded-sm border transition-shadow hover:ring-1 hover:ring-ring hover:ring-offset-1",
+          style: { backgroundColor: sw }
+        },
+        sw
+      )) })
+    ] });
+  }
+);
+ColorPicker.displayName = "ColorPicker";
+function HexField({
+  value,
+  alpha,
+  onCommit
+}) {
+  const [draft, setDraft] = React86.useState(value.replace("#", "").toUpperCase());
+  React86.useEffect(() => setDraft(value.replace("#", "").toUpperCase()), [value]);
+  const commit = () => {
+    const pattern = alpha ? HEX_PATTERN_ALPHA : HEX_PATTERN;
+    if (pattern.test(draft)) {
+      onCommit(`#${draft.toLowerCase()}`);
+    } else {
+      setDraft(value.replace("#", "").toUpperCase());
+    }
+  };
+  return /* @__PURE__ */ jsx91(
+    Input,
+    {
+      value: draft,
+      onChange: (e) => setDraft(e.target.value.replace(/[^0-9a-fA-F]/g, "").slice(0, alpha ? 8 : 6)),
+      onBlur: commit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          commit();
+          e.currentTarget.blur();
+        }
+      },
+      className: "h-8 flex-1 px-2 py-1 font-mono text-xs uppercase"
+    }
+  );
+}
+
+// src/components/kanban-board.tsx
+import * as React87 from "react";
+import {
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  getFirstCollision,
+  pointerWithin,
+  rectIntersection,
+  useDroppable,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { jsx as jsx92, jsxs as jsxs57 } from "react/jsx-runtime";
+var KanbanBoard = React87.forwardRef(
+  ({ columns, onColumnsChange, className, ...props }, ref) => {
+    const sensors = useSensors(
+      useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+      useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+    );
+    const [activeCard, setActiveCard] = React87.useState(null);
+    const lastOverId = React87.useRef(null);
+    const findColumn = React87.useCallback(
+      (id) => columns.find((col) => col.id === id || col.cards.some((c) => c.id === id)),
+      [columns]
+    );
+    const collisionDetectionStrategy = React87.useCallback(
+      (args) => {
+        const pointerIntersections = pointerWithin(args);
+        const intersections = pointerIntersections.length > 0 ? pointerIntersections : rectIntersection(args);
+        let overId = getFirstCollision(intersections, "id");
+        if (overId != null) {
+          const overColumn = columns.find((col) => col.id === overId);
+          if (overColumn && overColumn.cards.length > 0) {
+            const cardIds = new Set(overColumn.cards.map((c) => c.id));
+            const cardCollision = getFirstCollision(
+              closestCenter({
+                ...args,
+                droppableContainers: args.droppableContainers.filter((c) => cardIds.has(String(c.id)))
+              }),
+              "id"
+            );
+            if (cardCollision != null) overId = cardCollision;
+          }
+          lastOverId.current = String(overId);
+          return [{ id: overId }];
+        }
+        return lastOverId.current ? [{ id: lastOverId.current }] : [];
+      },
+      [columns]
+    );
+    function handleDragStart(event) {
+      lastOverId.current = String(event.active.id);
+      const column = findColumn(String(event.active.id));
+      const card = column?.cards.find((c) => c.id === event.active.id);
+      setActiveCard(card ?? null);
+    }
+    function handleDragOver(event) {
+      const { active, over } = event;
+      if (!over) return;
+      const activeId = String(active.id);
+      const overId = String(over.id);
+      if (activeId === overId) return;
+      const activeColumn = findColumn(activeId);
+      const overColumn = findColumn(overId);
+      if (!activeColumn || !overColumn || activeColumn.id === overColumn.id) return;
+      onColumnsChange(
+        columns.map((col) => {
+          if (col.id === activeColumn.id) {
+            return { ...col, cards: col.cards.filter((c) => c.id !== activeId) };
+          }
+          if (col.id === overColumn.id) {
+            const movedCard = activeColumn.cards.find((c) => c.id === activeId);
+            if (!movedCard) return col;
+            const overIndex = col.cards.findIndex((c) => c.id === overId);
+            const insertAt = overIndex >= 0 ? overIndex : col.cards.length;
+            const nextCards = [...col.cards];
+            nextCards.splice(insertAt, 0, movedCard);
+            return { ...col, cards: nextCards };
+          }
+          return col;
+        })
+      );
+    }
+    function handleDragEnd(event) {
+      setActiveCard(null);
+      lastOverId.current = null;
+      const { active, over } = event;
+      if (!over) return;
+      const activeId = String(active.id);
+      const overId = String(over.id);
+      const activeColumn = findColumn(activeId);
+      const overColumn = columns.find((col) => col.id === overId) ?? findColumn(overId);
+      if (!activeColumn || !overColumn || activeColumn.id !== overColumn.id) return;
+      const activeIndex = activeColumn.cards.findIndex((c) => c.id === activeId);
+      const rawOverIndex = overColumn.cards.findIndex((c) => c.id === overId);
+      const overIndex = rawOverIndex >= 0 ? rawOverIndex : overColumn.cards.length - 1;
+      if (activeIndex === -1 || overIndex === -1 || activeIndex === overIndex) return;
+      onColumnsChange(
+        columns.map(
+          (col) => col.id === activeColumn.id ? { ...col, cards: arrayMove(col.cards, activeIndex, overIndex) } : col
+        )
+      );
+    }
+    return /* @__PURE__ */ jsxs57(
+      DndContext,
+      {
+        sensors,
+        collisionDetection: collisionDetectionStrategy,
+        onDragStart: handleDragStart,
+        onDragOver: handleDragOver,
+        onDragEnd: handleDragEnd,
+        onDragCancel: () => {
+          setActiveCard(null);
+          lastOverId.current = null;
+        },
+        children: [
+          /* @__PURE__ */ jsx92("div", { ref, role: "group", className: cn("flex items-start gap-4 overflow-x-auto font-sans", className), ...props, children: columns.map((column) => /* @__PURE__ */ jsx92(KanbanColumnView, { column }, column.id)) }),
+          /* @__PURE__ */ jsx92(DragOverlay, { children: activeCard ? /* @__PURE__ */ jsx92(KanbanCardView, { card: activeCard }) : null })
+        ]
+      }
+    );
+  }
+);
+KanbanBoard.displayName = "KanbanBoard";
+function KanbanColumnView({ column }) {
+  const { setNodeRef } = useDroppable({ id: column.id });
+  return /* @__PURE__ */ jsxs57("div", { className: "flex w-64 shrink-0 flex-col gap-2 rounded-md border bg-muted/30 p-2", children: [
+    /* @__PURE__ */ jsxs57("div", { className: "flex items-center justify-between px-1 py-1", children: [
+      /* @__PURE__ */ jsx92("span", { className: "text-sm font-medium text-foreground", children: column.title }),
+      /* @__PURE__ */ jsx92("span", { className: "text-xs text-muted-foreground", children: column.cards.length })
+    ] }),
+    /* @__PURE__ */ jsx92(SortableContext, { items: column.cards.map((c) => c.id), strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx92("div", { ref: setNodeRef, className: "flex min-h-10 flex-col gap-2", children: column.cards.map((card) => /* @__PURE__ */ jsx92(SortableKanbanCard, { card }, card.id)) }) })
+  ] });
+}
+function SortableKanbanCard({ card }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: card.id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.4 : 1
+  };
+  return /* @__PURE__ */ jsx92("div", { ref: setNodeRef, style, ...attributes, ...listeners, children: /* @__PURE__ */ jsx92(KanbanCardView, { card }) });
+}
+function KanbanCardView({ card }) {
+  return /* @__PURE__ */ jsx92("div", { className: "cursor-grab touch-none rounded-md border bg-background p-3 text-sm text-foreground shadow-sm outline-none active:cursor-grabbing focus-visible:ring-1 focus-visible:ring-ring", children: card.content });
+}
+
+// src/components/markdown-editor.tsx
+import * as React88 from "react";
+import { Bold, Code, Eye as Eye2, EyeOff as EyeOff2, Heading2, Italic, Link as LinkIcon, List as List4, ListOrdered, Quote as Quote2 } from "lucide-react";
+import { jsx as jsx93, jsxs as jsxs58 } from "react/jsx-runtime";
+function wrapSelection(text, start, end, before, after, placeholder) {
+  const selected = text.slice(start, end) || placeholder;
+  const next = text.slice(0, start) + before + selected + after + text.slice(end);
+  return { text: next, selectionStart: start + before.length, selectionEnd: start + before.length + selected.length };
+}
+function prefixLines(text, start, end, prefix) {
+  const lineStart = text.lastIndexOf("\n", Math.max(start - 1, 0)) + 1;
+  let lineEnd = text.indexOf("\n", Math.max(end, lineStart));
+  if (lineEnd === -1) lineEnd = text.length;
+  const block = text.slice(lineStart, lineEnd);
+  const lines = block.split("\n");
+  const prefixed = lines.map((line, i) => prefix(i) + line).join("\n");
+  return {
+    text: text.slice(0, lineStart) + prefixed + text.slice(lineEnd),
+    selectionStart: start + prefix(0).length,
+    selectionEnd: end + (prefixed.length - block.length)
+  };
+}
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function renderInline(escaped) {
+  return escaped.replace(/`([^`]+)`/g, "<code>$1</code>").replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>").replace(/\*([^*]+)\*/g, "<em>$1</em>").replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, label, url) => {
+    const safe = /^(https?:|mailto:|\/|#)/i.test(url.trim());
+    return safe ? `<a href="${url}" target="_blank" rel="noopener noreferrer">${label}</a>` : match;
+  });
+}
+function matchMarker(line, markerRe) {
+  const m = markerRe.exec(line);
+  if (!m) return null;
+  let i = m[0].length;
+  if (line[i] !== " " && line[i] !== "	") return null;
+  while (line[i] === " " || line[i] === "	") i++;
+  return { marker: m[0], content: line.slice(i) };
+}
+function renderMarkdown(source) {
+  const lines = source.split("\n");
+  const out = [];
+  let inCode = false;
+  let codeLines = [];
+  let listType = null;
+  const closeList = () => {
+    if (listType) {
+      out.push(`</${listType}>`);
+      listType = null;
+    }
+  };
+  for (const line of lines) {
+    if (line.trim().startsWith("```")) {
+      if (inCode) {
+        out.push(`<pre><code>${escapeHtml(codeLines.join("\n"))}</code></pre>`);
+        codeLines = [];
+        inCode = false;
+      } else {
+        closeList();
+        inCode = true;
+      }
+      continue;
+    }
+    if (inCode) {
+      codeLines.push(line);
+      continue;
+    }
+    const heading = matchMarker(line, /^#{1,6}/);
+    if (heading) {
+      closeList();
+      const level = heading.marker.length;
+      out.push(`<h${level}>${renderInline(escapeHtml(heading.content))}</h${level}>`);
+      continue;
+    }
+    const quote = line.match(/^>\s?(.*)$/);
+    if (quote) {
+      closeList();
+      out.push(`<blockquote>${renderInline(escapeHtml(quote[1]))}</blockquote>`);
+      continue;
+    }
+    const bullet = matchMarker(line, /^[-*]/);
+    if (bullet) {
+      if (listType !== "ul") {
+        closeList();
+        out.push("<ul>");
+        listType = "ul";
+      }
+      out.push(`<li>${renderInline(escapeHtml(bullet.content))}</li>`);
+      continue;
+    }
+    const numbered = matchMarker(line, /^\d+\./);
+    if (numbered) {
+      if (listType !== "ol") {
+        closeList();
+        out.push("<ol>");
+        listType = "ol";
+      }
+      out.push(`<li>${renderInline(escapeHtml(numbered.content))}</li>`);
+      continue;
+    }
+    closeList();
+    if (line.trim() === "") continue;
+    out.push(`<p>${renderInline(escapeHtml(line))}</p>`);
+  }
+  closeList();
+  if (inCode) out.push(`<pre><code>${escapeHtml(codeLines.join("\n"))}</code></pre>`);
+  return out.join("\n");
+}
+var MarkdownEditor = React88.forwardRef(
+  ({ value, onChange, placeholder, rows = 10, className, ...props }, ref) => {
+    const textareaRef = React88.useRef(null);
+    const [showPreview, setShowPreview] = React88.useState(false);
+    const pendingSelection = React88.useRef(null);
+    React88.useEffect(() => {
+      if (pendingSelection.current && textareaRef.current) {
+        const { start, end } = pendingSelection.current;
+        textareaRef.current.focus();
+        textareaRef.current.setSelectionRange(start, end);
+        pendingSelection.current = null;
+      }
+    }, [value]);
+    const applyInline = (before, after, placeholder2) => {
+      const el = textareaRef.current;
+      if (!el) return;
+      const result = wrapSelection(value, el.selectionStart, el.selectionEnd, before, after, placeholder2);
+      pendingSelection.current = { start: result.selectionStart, end: result.selectionEnd };
+      onChange(result.text);
+    };
+    const applyLinePrefix = (prefix) => {
+      const el = textareaRef.current;
+      if (!el) return;
+      const result = prefixLines(value, el.selectionStart, el.selectionEnd, prefix);
+      pendingSelection.current = { start: result.selectionStart, end: result.selectionEnd };
+      onChange(result.text);
+    };
+    return /* @__PURE__ */ jsxs58("div", { ref, className: cn("overflow-hidden rounded-md border font-sans", className), ...props, children: [
+      /* @__PURE__ */ jsxs58("div", { role: "toolbar", "aria-label": "Formatting", className: "flex items-center gap-0.5 border-b bg-muted/40 p-1", children: [
+        /* @__PURE__ */ jsx93(ToolbarButton, { label: "Bold", onClick: () => applyInline("**", "**", "bold text"), children: /* @__PURE__ */ jsx93(Bold, { className: "size-4" }) }),
+        /* @__PURE__ */ jsx93(ToolbarButton, { label: "Italic", onClick: () => applyInline("*", "*", "italic text"), children: /* @__PURE__ */ jsx93(Italic, { className: "size-4" }) }),
+        /* @__PURE__ */ jsx93(ToolbarButton, { label: "Heading", onClick: () => applyLinePrefix(() => "## "), children: /* @__PURE__ */ jsx93(Heading2, { className: "size-4" }) }),
+        /* @__PURE__ */ jsx93(ToolbarButton, { label: "Link", onClick: () => applyInline("[", "](https://)", "link text"), children: /* @__PURE__ */ jsx93(LinkIcon, { className: "size-4" }) }),
+        /* @__PURE__ */ jsx93(ToolbarButton, { label: "Bulleted list", onClick: () => applyLinePrefix(() => "- "), children: /* @__PURE__ */ jsx93(List4, { className: "size-4" }) }),
+        /* @__PURE__ */ jsx93(ToolbarButton, { label: "Numbered list", onClick: () => applyLinePrefix((i) => `${i + 1}. `), children: /* @__PURE__ */ jsx93(ListOrdered, { className: "size-4" }) }),
+        /* @__PURE__ */ jsx93(ToolbarButton, { label: "Code", onClick: () => applyInline("`", "`", "code"), children: /* @__PURE__ */ jsx93(Code, { className: "size-4" }) }),
+        /* @__PURE__ */ jsx93(ToolbarButton, { label: "Quote", onClick: () => applyLinePrefix(() => "> "), children: /* @__PURE__ */ jsx93(Quote2, { className: "size-4" }) }),
+        /* @__PURE__ */ jsx93(
+          ToolbarButton,
+          {
+            label: showPreview ? "Hide preview" : "Show preview",
+            onClick: () => setShowPreview((v) => !v),
+            active: showPreview,
+            className: "ml-auto",
+            children: showPreview ? /* @__PURE__ */ jsx93(EyeOff2, { className: "size-4" }) : /* @__PURE__ */ jsx93(Eye2, { className: "size-4" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs58("div", { className: cn("grid", showPreview && "grid-cols-2 divide-x"), children: [
+        /* @__PURE__ */ jsx93(
+          Textarea,
+          {
+            ref: textareaRef,
+            value,
+            onChange: (e) => onChange(e.target.value),
+            placeholder,
+            rows,
+            className: "resize-none rounded-none border-0 font-mono text-[13px] focus-visible:border-transparent focus-visible:shadow-none"
+          }
+        ),
+        showPreview && /* @__PURE__ */ jsx93(
+          "div",
+          {
+            className: "overflow-auto p-3 text-sm [&_a]:text-primary [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground [&_code]:rounded-sm [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em] [&_h1]:text-xl [&_h1]:font-semibold [&_h2]:text-lg [&_h2]:font-semibold [&_h3]:font-semibold [&_li]:ml-5 [&_ol]:list-decimal [&_p]:mb-2 [&_pre]:overflow-auto [&_pre]:rounded-sm [&_pre]:bg-muted [&_pre]:p-2 [&_ul]:list-disc",
+            dangerouslySetInnerHTML: { __html: renderMarkdown(value) }
+          }
+        )
+      ] })
+    ] });
+  }
+);
+MarkdownEditor.displayName = "MarkdownEditor";
+function ToolbarButton({
+  label,
+  onClick,
+  active,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx93(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": label,
+      "aria-pressed": active,
+      className: cn(
+        "inline-flex size-7 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground",
+        active && "bg-accent text-foreground",
+        className
+      ),
+      children
+    }
+  );
+}
 export {
   Accordion,
   AccordionContent,
@@ -4397,6 +6083,7 @@ export {
   Collapsible,
   CollapsibleContent2 as CollapsibleContent,
   CollapsibleTrigger2 as CollapsibleTrigger,
+  ColorPicker,
   Command,
   CommandDialog,
   CommandEmpty,
@@ -4422,6 +6109,7 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
+  DataGrid,
   DataTable,
   DatePicker,
   DescriptionList,
@@ -4436,6 +6124,7 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
+  DiffViewer,
   Drawer,
   DrawerClose,
   DrawerContent,
@@ -4501,11 +6190,14 @@ export {
   InputOTPGroup,
   InputOTPSeparator,
   InputOTPSlot,
+  JsonViewer,
+  KanbanBoard,
   Kbd,
   KbdGroup,
   Label2 as Label,
   List3 as List,
   ListItem,
+  MarkdownEditor,
   Marquee,
   Menubar,
   MenubarCheckboxItem,
@@ -4523,8 +6215,10 @@ export {
   MenubarSubContent,
   MenubarSubTrigger,
   MenubarTrigger,
+  MessageBubble,
   Metric,
   Modal,
+  MultiSelect,
   NativeSelect,
   NativeSelectOptGroup,
   NativeSelectOption,
@@ -4537,6 +6231,10 @@ export {
   NavigationMenuList,
   NavigationMenuTrigger,
   NavigationMenuViewport,
+  NotificationCenter,
+  NotificationCenterContent,
+  NotificationCenterTrigger,
+  NotificationItem,
   NumberInput,
   PageHeader,
   Pagination,
@@ -4629,6 +6327,11 @@ export {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  Tour,
+  TreeItem,
+  TreeView,
+  TypingIndicator,
+  VirtualList,
   badgeVariants,
   bannerVariants,
   buttonVariants,