my-you-eye 0.1.0

package/dist/index.js

@@ -0,0 +1,2225 @@
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/ui/spinner/Spinner.tsx
+import { forwardRef } from "react";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var spinnerVariants = cva("animate-spin rounded-full border-2 border-current border-t-transparent", {
+  variants: {
+    size: {
+      sm: "size-4",
+      md: "size-6",
+      lg: "size-8"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var Spinner = forwardRef(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "status",
+      "aria-label": "Loading",
+      className: cn(spinnerVariants({ size }), className),
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading..." })
+    }
+  )
+);
+Spinner.displayName = "Spinner";
+
+// src/ui/button/Button.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var buttonVariants = cva2(
+  "inline-flex items-center justify-center gap-inline rounded-ui font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-fg hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-fg hover:bg-secondary/80",
+        ghost: "text-fg hover:bg-secondary",
+        danger: "bg-danger text-primary-fg hover:bg-danger/90"
+      },
+      size: {
+        sm: "h-8 px-3 text-xs",
+        md: "h-10 px-4 text-sm",
+        lg: "h-12 px-6 text-base"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+var Button = forwardRef2(
+  ({ className, variant, size, loading, disabled, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      className: cn(buttonVariants({ variant, size }), className),
+      disabled: disabled || loading,
+      ...props,
+      children: [
+        loading && /* @__PURE__ */ jsx2(Spinner, { size: "sm" }),
+        children
+      ]
+    }
+  )
+);
+Button.displayName = "Button";
+
+// src/ui/input/Input.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var inputVariants = cva3(
+  "flex w-full rounded-ui border bg-bg px-3 py-2 text-sm ring-offset-bg placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "border-border",
+        filled: "border-transparent bg-secondary"
+      },
+      size: {
+        sm: "h-8 text-xs",
+        md: "h-10 text-sm"
+      },
+      invalid: {
+        true: "border-danger ring-danger/30"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var Input = forwardRef3(
+  ({ className, variant, size, invalid, ...props }, ref) => /* @__PURE__ */ jsx3(
+    "input",
+    {
+      ref,
+      className: cn(inputVariants({ variant, size, invalid }), className),
+      ...props
+    }
+  )
+);
+Input.displayName = "Input";
+
+// src/ui/label/Label.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { Root } from "@radix-ui/react-label";
+import { cva as cva4 } from "class-variance-authority";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var labelVariants = cva4(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = forwardRef4(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx4(Root, { ref, className: cn(labelVariants(), className), ...props })
+);
+Label.displayName = "Label";
+
+// src/ui/card/Card.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { cva as cva5 } from "class-variance-authority";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var cardVariants = cva5("rounded-ui bg-bg text-fg", {
+  variants: {
+    variant: {
+      default: "border border-border",
+      outlined: "border-2 border-border",
+      elevated: "border border-border shadow-lg"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var Card = forwardRef5(
+  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx5("div", { ref, className: cn(cardVariants({ variant }), className), ...props })
+);
+Card.displayName = "Card";
+
+// src/ui/card/CardHeader.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var CardHeader = forwardRef6(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx6("div", { ref, className: cn("flex flex-col gap-1.5 p-6", className), ...props })
+);
+CardHeader.displayName = "CardHeader";
+
+// src/ui/card/CardTitle.tsx
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var CardTitle = forwardRef7(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx7("h3", { ref, className: cn("text-lg font-semibold leading-tight", className), ...props })
+);
+CardTitle.displayName = "CardTitle";
+
+// src/ui/card/CardContent.tsx
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var CardContent = forwardRef8(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx8("div", { ref, className: cn("p-6 pt-0", className), ...props })
+);
+CardContent.displayName = "CardContent";
+
+// src/ui/card/CardFooter.tsx
+import { forwardRef as forwardRef9 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var CardFooter = forwardRef9(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx9("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
+);
+CardFooter.displayName = "CardFooter";
+
+// src/ui/badge/Badge.tsx
+import { forwardRef as forwardRef10 } from "react";
+import { cva as cva6 } from "class-variance-authority";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var badgeVariants = cva6(
+  "inline-flex items-center rounded-ui-sm px-2.5 py-0.5 text-xs font-medium",
+  {
+    variants: {
+      variant: {
+        neutral: ["text-secondary-fg", "bg-secondary/60"],
+        primary: ["text-primary", "bg-primary/15"],
+        success: ["text-success", "bg-success/15"],
+        warning: ["text-warning", "bg-warning/15"],
+        danger: ["text-danger", "bg-danger/15"]
+      },
+      style: {
+        solid: "",
+        soft: ""
+      }
+    },
+    compoundVariants: [
+      {
+        style: "solid",
+        variant: "neutral",
+        className: "bg-secondary text-secondary-fg"
+      },
+      {
+        style: "solid",
+        variant: "primary",
+        className: "bg-primary text-primary-fg"
+      },
+      {
+        style: "solid",
+        variant: "success",
+        className: "bg-success text-bg"
+      },
+      {
+        style: "solid",
+        variant: "warning",
+        className: "bg-warning text-bg"
+      },
+      {
+        style: "solid",
+        variant: "danger",
+        className: "bg-danger text-primary-fg"
+      }
+    ],
+    defaultVariants: {
+      variant: "neutral",
+      style: "solid"
+    }
+  }
+);
+var Badge = forwardRef10(
+  ({ className, variant, style, ...props }, ref) => /* @__PURE__ */ jsx10("span", { ref, className: cn(badgeVariants({ variant, style }), className), ...props })
+);
+Badge.displayName = "Badge";
+
+// src/ui/alert/Alert.tsx
+import { forwardRef as forwardRef11 } from "react";
+import { cva as cva7 } from "class-variance-authority";
+import { jsx as jsx11, jsxs as jsxs2 } from "react/jsx-runtime";
+var alertVariants = cva7(
+  "relative w-full rounded-ui border p-panel",
+  {
+    variants: {
+      variant: {
+        info: "border-primary/20 bg-primary/5 text-primary",
+        success: "border-success/20 bg-success/5 text-success",
+        warning: "border-warning/20 bg-warning/5 text-warning",
+        danger: "border-danger/20 bg-danger/5 text-danger"
+      }
+    },
+    defaultVariants: {
+      variant: "info"
+    }
+  }
+);
+var Alert = forwardRef11(
+  ({ className, variant, title, icon, children, ...props }, ref) => /* @__PURE__ */ jsx11("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props, children: /* @__PURE__ */ jsxs2("div", { className: "flex gap-stack", children: [
+    icon && /* @__PURE__ */ jsx11("span", { className: "mt-0.5 shrink-0", children: icon }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-tight", children: [
+      title && /* @__PURE__ */ jsx11("h5", { className: "text-sm font-semibold", children: title }),
+      /* @__PURE__ */ jsx11("div", { className: "text-sm", children })
+    ] })
+  ] }) })
+);
+Alert.displayName = "Alert";
+
+// src/ui/checkbox/Checkbox.tsx
+import { forwardRef as forwardRef12 } from "react";
+import { Root as Root2, Indicator } from "@radix-ui/react-checkbox";
+import { cva as cva8 } from "class-variance-authority";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var checkboxVariants = cva8(
+  "peer shrink-0 rounded-ui-sm border border-border bg-bg ring-offset-bg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-fg data-[state=checked]:border-primary",
+  {
+    variants: {
+      size: {
+        sm: "size-4",
+        md: "size-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var Checkbox = forwardRef12(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx12(Root2, { ref, className: cn(checkboxVariants({ size }), className), ...props, children: /* @__PURE__ */ jsx12(Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ jsx12("svg", { viewBox: "0 0 12 12", className: "size-3 fill-current", children: /* @__PURE__ */ jsx12("path", { d: "M3 6l2 2 4-4", stroke: "currentColor", strokeWidth: "2", fill: "none" }) }) }) })
+);
+Checkbox.displayName = "Checkbox";
+
+// src/ui/radio-group/RadioGroup.tsx
+import { forwardRef as forwardRef13 } from "react";
+import { Root as Root3, Item, Indicator as Indicator2 } from "@radix-ui/react-radio-group";
+import { cva as cva9 } from "class-variance-authority";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var radioVariants = cva9(
+  "aspect-square size-4 rounded-full border border-border bg-bg ring-offset-bg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary"
+);
+var RadioGroup = forwardRef13(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx13(Root3, { ref, className: cn("grid gap-inline", className), ...props })
+);
+RadioGroup.displayName = "RadioGroup";
+var RadioGroupItem = forwardRef13(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx13(Item, { ref, className: cn(radioVariants(), className), ...props, children: /* @__PURE__ */ jsx13(Indicator2, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx13("span", { className: "size-2 rounded-full bg-primary" }) }) })
+);
+RadioGroupItem.displayName = "RadioGroupItem";
+
+// src/ui/switch/Switch.tsx
+import { forwardRef as forwardRef14 } from "react";
+import { Root as Root4, Thumb } from "@radix-ui/react-switch";
+import { cva as cva10 } from "class-variance-authority";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var switchVariants = cva10(
+  "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-secondary ring-offset-bg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary",
+  {
+    variants: {
+      size: {
+        sm: "h-5 w-9",
+        md: "h-6 w-11"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var thumbVariants = cva10(
+  "pointer-events-none block rounded-full bg-bg shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-full",
+  {
+    variants: {
+      size: {
+        sm: "size-4",
+        md: "size-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var Switch = forwardRef14(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx14(Root4, { ref, className: cn(switchVariants({ size }), className), ...props, children: /* @__PURE__ */ jsx14(Thumb, { className: cn(thumbVariants({ size })) }) })
+);
+Switch.displayName = "Switch";
+
+// src/ui/textarea/Textarea.tsx
+import { forwardRef as forwardRef15, useRef, useEffect, useCallback } from "react";
+import { cva as cva11 } from "class-variance-authority";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var textareaVariants = cva11(
+  "flex w-full rounded-ui border bg-bg px-3 py-2 text-sm ring-offset-bg placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "border-border",
+        filled: "border-transparent bg-secondary"
+      },
+      invalid: {
+        true: "border-danger ring-danger/30"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Textarea = forwardRef15(
+  ({ className, variant, invalid, autoResize, ...props }, ref) => {
+    const internalRef = useRef(null);
+    const setRef = useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    useEffect(() => {
+      if (!autoResize || !internalRef.current) return;
+      const el = internalRef.current;
+      el.style.height = "auto";
+      el.style.height = `${el.scrollHeight}px`;
+    }, [autoResize]);
+    return /* @__PURE__ */ jsx15(
+      "textarea",
+      {
+        ref: setRef,
+        className: cn(textareaVariants({ variant, invalid }), "min-h-[80px]", className),
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+// src/ui/select/Select.tsx
+import { forwardRef as forwardRef16 } from "react";
+import {
+  Root as Root5,
+  Trigger,
+  Value,
+  Icon,
+  Content,
+  Viewport,
+  Item as Item2,
+  ItemText,
+  ItemIndicator
+} from "@radix-ui/react-select";
+import { cva as cva12 } from "class-variance-authority";
+import { jsx as jsx16, jsxs as jsxs3 } from "react/jsx-runtime";
+var triggerVariants = cva12(
+  "flex w-full items-center justify-between rounded-ui border bg-bg px-3 py-2 text-sm ring-offset-bg placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted",
+  {
+    variants: {
+      size: {
+        sm: "h-8 text-xs",
+        md: "h-10 text-sm"
+      },
+      invalid: {
+        true: "border-danger ring-danger/30"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var SelectTrigger = forwardRef16(
+  ({ className, size, invalid, children, ...props }, ref) => /* @__PURE__ */ jsxs3(Trigger, { ref, className: cn(triggerVariants({ size, invalid }), className), ...props, children: [
+    children,
+    /* @__PURE__ */ jsx16(Icon, { className: "ml-2 shrink-0 opacity-50", children: /* @__PURE__ */ jsx16("svg", { viewBox: "0 0 8 8", className: "size-3 fill-current", children: /* @__PURE__ */ jsx16("path", { d: "M0 2l4 4 4-4" }) }) })
+  ] })
+);
+SelectTrigger.displayName = "SelectTrigger";
+var SelectContent = forwardRef16(
+  ({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx16(
+    Content,
+    {
+      ref,
+      position,
+      className: cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-ui border border-border bg-bg text-fg shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx16(Viewport, { className: "p-1", children })
+    }
+  )
+);
+SelectContent.displayName = "SelectContent";
+var SelectItem = forwardRef16(
+  ({ className, children, showIndicator = true, ...props }, ref) => /* @__PURE__ */ jsxs3(
+    Item2,
+    {
+      ref,
+      className: cn(
+        "relative flex w-full cursor-default select-none items-center rounded-ui-sm py-1.5 pr-2 text-sm outline-none focus:bg-secondary focus:text-secondary-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        showIndicator ? "pl-8" : "pl-2",
+        className
+      ),
+      ...props,
+      children: [
+        showIndicator && /* @__PURE__ */ jsx16("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx16(ItemIndicator, { children: /* @__PURE__ */ jsx16("svg", { viewBox: "0 0 8 8", className: "size-3 fill-current", children: /* @__PURE__ */ jsx16("path", { d: "M1 4l2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }) }) }) }),
+        /* @__PURE__ */ jsx16(ItemText, { children })
+      ]
+    }
+  )
+);
+SelectItem.displayName = "SelectItem";
+
+// src/ui/patterns/form-field/FormField.tsx
+import { forwardRef as forwardRef17, useId } from "react";
+import { jsx as jsx17, jsxs as jsxs4 } from "react/jsx-runtime";
+var FormField = forwardRef17(
+  ({ label, error, hint, required, className, children, ...props }, ref) => {
+    const id = useId();
+    return /* @__PURE__ */ jsxs4("div", { ref, className: cn("flex flex-col gap-1.5", className), ...props, children: [
+      /* @__PURE__ */ jsxs4(Label, { htmlFor: id, children: [
+        label,
+        required && /* @__PURE__ */ jsx17("span", { className: "ml-1 text-danger", children: "*" })
+      ] }),
+      children,
+      hint && !error && /* @__PURE__ */ jsx17("p", { className: "text-xs text-muted", children: hint }),
+      error && /* @__PURE__ */ jsx17("p", { className: "text-xs text-danger", children: error })
+    ] });
+  }
+);
+FormField.displayName = "FormField";
+
+// src/ui/dialog/Dialog.tsx
+import { forwardRef as forwardRef18 } from "react";
+import { Root as Root6, Trigger as Trigger2, Portal, Overlay, Content as Content2, Title, Description, Close } from "@radix-ui/react-dialog";
+import { cva as cva13 } from "class-variance-authority";
+import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
+var dialogOverlay = "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out";
+var dialogContentVariants = cva13(
+  "fixed left-1/2 top-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 rounded-ui bg-bg p-6 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      size: {
+        sm: "max-w-sm",
+        md: "max-w-md",
+        lg: "max-w-lg"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var DialogContent = forwardRef18(
+  ({ className, size, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Portal, { children: [
+    /* @__PURE__ */ jsx18(Overlay, { className: dialogOverlay }),
+    /* @__PURE__ */ jsxs5(Content2, { ref, className: cn(dialogContentVariants({ size }), className), ...props, children: [
+      children,
+      /* @__PURE__ */ jsx18(Close, { className: "absolute right-panel top-panel rounded-ui-sm opacity-70 hover:opacity-100", children: /* @__PURE__ */ jsx18("svg", { viewBox: "0 0 15 15", className: "size-4 fill-current", children: /* @__PURE__ */ jsx18("path", { d: "M2 2l11 11M13 2L2 13", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }) }) })
+    ] })
+  ] })
+);
+DialogContent.displayName = "DialogContent";
+var DialogHeader = forwardRef18(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx18("div", { ref, className: cn("flex flex-col gap-1.5 mb-4", className), ...props })
+);
+DialogHeader.displayName = "DialogHeader";
+var DialogTitle = forwardRef18(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx18(Title, { ref, className: cn("text-lg font-semibold leading-tight", className), ...props })
+);
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = forwardRef18(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx18(Description, { ref, className: cn("text-sm text-muted", className), ...props })
+);
+DialogDescription.displayName = "DialogDescription";
+var DialogFooter = forwardRef18(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx18("div", { ref, className: cn("flex items-center justify-end gap-inline mt-6", className), ...props })
+);
+DialogFooter.displayName = "DialogFooter";
+
+// src/ui/tooltip/Tooltip.tsx
+import { forwardRef as forwardRef19 } from "react";
+import { Provider, Root as Root7, Trigger as Trigger3, Portal as Portal2, Content as Content3 } from "@radix-ui/react-tooltip";
+import { jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
+var TooltipProvider = Provider;
+var Tooltip = ({ content, side = "top", children }) => /* @__PURE__ */ jsxs6(Root7, { children: [
+  /* @__PURE__ */ jsx19(Trigger3, { asChild: true, children }),
+  /* @__PURE__ */ jsx19(Portal2, { children: /* @__PURE__ */ jsx19(
+    Content3,
+    {
+      side,
+      sideOffset: 4,
+      className: cn(
+        "z-50 overflow-hidden rounded-ui-sm bg-bg text-fg border border-border px-2.5 py-1 text-xs shadow-lg",
+        "data-[state=delayed-open]:animate-in data-[state=closed]:animate-out"
+      ),
+      children: content
+    }
+  ) })
+] });
+var TooltipContent = forwardRef19(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
+    Content3,
+    {
+      ref,
+      sideOffset: 4,
+      className: cn(
+        "z-50 overflow-hidden rounded-ui-sm bg-bg text-fg border border-border px-2.5 py-1 text-xs shadow-lg",
+        "data-[state=delayed-open]:animate-in data-[state=closed]:animate-out",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TooltipContent.displayName = "TooltipContent";
+
+// src/ui/dropdown-menu/DropdownMenu.tsx
+import { forwardRef as forwardRef20 } from "react";
+import {
+  Root as Root8,
+  Trigger as Trigger4,
+  Portal as Portal3,
+  Content as Content4,
+  Item as Item3,
+  Separator,
+  Label as Label2
+} from "@radix-ui/react-dropdown-menu";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var DropdownMenuContent = forwardRef20(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx20(Portal3, { children: /* @__PURE__ */ jsx20(
+    Content4,
+    {
+      ref,
+      sideOffset: 4,
+      className: cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-ui border border-border bg-bg p-1 shadow-lg",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        className
+      ),
+      ...props
+    }
+  ) })
+);
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var DropdownMenuItem = forwardRef20(
+  ({ className, destructive, ...props }, ref) => /* @__PURE__ */ jsx20(
+    Item3,
+    {
+      ref,
+      className: cn(
+        "relative flex cursor-default select-none items-center rounded-ui-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        destructive ? "text-danger focus:bg-danger/10" : "text-fg focus:bg-secondary focus:text-secondary-fg",
+        className
+      ),
+      ...props
+    }
+  )
+);
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuSeparator = forwardRef20(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx20(Separator, { ref, className: cn("-mx-1 my-1 h-px bg-border", className), ...props })
+);
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+var DropdownMenuLabel = forwardRef20(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx20(Label2, { ref, className: cn("px-2 py-1.5 text-xs font-semibold text-muted", className), ...props })
+);
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+
+// src/ui/popover/Popover.tsx
+import { forwardRef as forwardRef21 } from "react";
+import { Root as Root9, Trigger as Trigger5, Portal as Portal4, Content as Content5, Close as Close2 } from "@radix-ui/react-popover";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var PopoverContent = forwardRef21(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx21(Portal4, { children: /* @__PURE__ */ jsx21(
+    Content5,
+    {
+      ref,
+      sideOffset: 4,
+      className: cn(
+        "z-50 w-72 rounded-ui border border-border bg-bg p-panel shadow-lg outline-none",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        className
+      ),
+      ...props
+    }
+  ) })
+);
+PopoverContent.displayName = "PopoverContent";
+
+// src/ui/toast/Toast.tsx
+import { forwardRef as forwardRef22, useCallback as useCallback2, useState, createContext, useContext } from "react";
+import {
+  Provider as Provider2,
+  Root as Root10,
+  Title as Title2,
+  Description as Description2,
+  Close as Close3,
+  Viewport as Viewport2
+} from "@radix-ui/react-toast";
+import { cva as cva14 } from "class-variance-authority";
+import { jsx as jsx22, jsxs as jsxs7 } from "react/jsx-runtime";
+var toastVariants = cva14(
+  "group pointer-events-auto relative flex w-full items-center justify-between gap-stack rounded-ui border p-panel shadow-lg data-[swipe=end]:animate-out data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0",
+  {
+    variants: {
+      variant: {
+        default: "border-border bg-bg text-fg",
+        success: "border-success/30 bg-success/10 text-success",
+        danger: "border-danger/30 bg-danger/10 text-danger"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var ToastContext = createContext(null);
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within <Toaster />");
+  return ctx;
+}
+var ToastItem = forwardRef22(
+  ({ title, description, variant = "default", ...props }, ref) => /* @__PURE__ */ jsxs7(
+    Root10,
+    {
+      ref,
+      className: cn(toastVariants({ variant })),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1", children: [
+          title && /* @__PURE__ */ jsx22(Title2, { className: "text-sm font-semibold", children: title }),
+          description && /* @__PURE__ */ jsx22(Description2, { className: "text-sm opacity-90", children: description })
+        ] }),
+        /* @__PURE__ */ jsx22(Close3, { className: "shrink-0 opacity-dim hover:opacity-100", children: /* @__PURE__ */ jsx22("svg", { viewBox: "0 0 15 15", className: "size-4 fill-current", children: /* @__PURE__ */ jsx22("path", { d: "M2 2l11 11M13 2L2 13", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }) }) })
+      ]
+    }
+  )
+);
+ToastItem.displayName = "ToastItem";
+function Toaster({ children }) {
+  const [toasts, setToasts] = useState([]);
+  const toast = useCallback2(
+    (data) => {
+      const id = Math.random().toString(36).slice(2);
+      setToasts((prev) => [...prev, { ...data, id }]);
+      setTimeout(() => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+      }, 5e3);
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxs7(ToastContext.Provider, { value: { toast }, children: [
+    children,
+    /* @__PURE__ */ jsxs7(Provider2, { children: [
+      toasts.map((t) => /* @__PURE__ */ jsx22(ToastItem, { ...t }, t.id)),
+      /* @__PURE__ */ jsx22(Viewport2, { className: "fixed bottom-panel right-panel z-[100] flex flex-col gap-inline w-full max-w-sm" })
+    ] })
+  ] });
+}
+
+// src/ui/patterns/confirm-dialog/ConfirmDialog.tsx
+import { jsx as jsx23, jsxs as jsxs8 } from "react/jsx-runtime";
+function ConfirmDialog({
+  title,
+  description,
+  confirmLabel = "Confirm",
+  destructive,
+  onConfirm,
+  trigger,
+  open,
+  onOpenChange
+}) {
+  return /* @__PURE__ */ jsxs8(Root6, { open, onOpenChange, children: [
+    trigger && /* @__PURE__ */ jsx23(Trigger2, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs8(DialogContent, { size: "sm", children: [
+      /* @__PURE__ */ jsxs8(DialogHeader, { children: [
+        /* @__PURE__ */ jsx23(DialogTitle, { children: title }),
+        description && /* @__PURE__ */ jsx23(DialogDescription, { children: description })
+      ] }),
+      /* @__PURE__ */ jsxs8(DialogFooter, { children: [
+        /* @__PURE__ */ jsx23(Close, { asChild: true, children: /* @__PURE__ */ jsx23(Button, { variant: "ghost", children: "Cancel" }) }),
+        /* @__PURE__ */ jsx23(Button, { variant: destructive ? "danger" : "primary", onClick: onConfirm, children: confirmLabel })
+      ] })
+    ] })
+  ] });
+}
+
+// src/ui/tabs/Tabs.tsx
+import { forwardRef as forwardRef23 } from "react";
+import { Root as Root11, List, Trigger as Trigger6, Content as Content6 } from "@radix-ui/react-tabs";
+import { cva as cva15 } from "class-variance-authority";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var tabsListVariants = cva15("inline-flex items-center", {
+  variants: {
+    variant: {
+      underline: "border-b border-border gap-0",
+      pills: "gap-1"
+    }
+  },
+  defaultVariants: {
+    variant: "underline"
+  }
+});
+var tabsTriggerVariants = cva15(
+  "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-bg transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        underline: "border-b-2 border-transparent px-3 py-2 -mb-px data-[state=active]:border-primary data-[state=active]:text-primary",
+        pills: "rounded-ui-sm px-3 py-1.5 data-[state=active]:bg-primary data-[state=active]:text-primary-fg"
+      }
+    },
+    defaultVariants: {
+      variant: "underline"
+    }
+  }
+);
+var Tabs = Root11;
+var TabsList = forwardRef23(
+  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx24(List, { ref, className: cn(tabsListVariants({ variant }), className), ...props })
+);
+TabsList.displayName = "TabsList";
+var TabsTrigger = forwardRef23(
+  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx24(Trigger6, { ref, className: cn(tabsTriggerVariants({ variant }), className), ...props })
+);
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = forwardRef23(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx24(Content6, { ref, className: cn("mt-2 ring-offset-bg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className), ...props })
+);
+TabsContent.displayName = "TabsContent";
+
+// src/ui/breadcrumbs/Breadcrumbs.tsx
+import { forwardRef as forwardRef24 } from "react";
+import { jsx as jsx25, jsxs as jsxs9 } from "react/jsx-runtime";
+var Breadcrumbs = forwardRef24(
+  ({ items, separator = "/", className, ...props }, ref) => /* @__PURE__ */ jsx25("nav", { ref, "aria-label": "Breadcrumb", className: cn("flex items-center gap-tight text-sm", className), ...props, children: /* @__PURE__ */ jsx25("ol", { className: "flex items-center gap-tight", children: items.map((item, i) => {
+    const isLast = i === items.length - 1;
+    return /* @__PURE__ */ jsxs9("li", { className: "flex items-center gap-tight", children: [
+      i > 0 && /* @__PURE__ */ jsx25("span", { className: "text-muted", children: separator }),
+      item.href && !isLast ? /* @__PURE__ */ jsx25("a", { href: item.href, className: "text-muted hover:text-fg transition-colors", children: item.label }) : /* @__PURE__ */ jsx25("span", { className: isLast ? "text-fg font-medium" : "text-muted", children: item.label })
+    ] }, i);
+  }) }) })
+);
+Breadcrumbs.displayName = "Breadcrumbs";
+
+// src/ui/pagination/Pagination.tsx
+import { forwardRef as forwardRef25 } from "react";
+import { jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
+function getPageNumbers(current, total) {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const pages = [];
+  if (current <= 3) {
+    pages.push(1, 2, 3, "...", total);
+  } else if (current >= total - 2) {
+    pages.push(1, "...", total - 2, total - 1, total);
+  } else {
+    pages.push(1, "...", current - 1, current, current + 1, "...", total);
+  }
+  return pages;
+}
+var Pagination = forwardRef25(
+  ({ currentPage, totalPages, onPageChange, className, ...props }, ref) => /* @__PURE__ */ jsxs10("nav", { ref, "aria-label": "Pagination", className: cn("flex items-center gap-tight", className), ...props, children: [
+    /* @__PURE__ */ jsx26(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        disabled: currentPage <= 1,
+        onClick: () => onPageChange(currentPage - 1),
+        children: "Prev"
+      }
+    ),
+    getPageNumbers(currentPage, totalPages).map(
+      (page, i) => page === "..." ? /* @__PURE__ */ jsx26("span", { className: "px-2 text-muted text-sm", children: "..." }, `ellipsis-${i}`) : /* @__PURE__ */ jsx26(
+        Button,
+        {
+          variant: page === currentPage ? "primary" : "ghost",
+          size: "sm",
+          onClick: () => onPageChange(page),
+          children: page
+        },
+        page
+      )
+    ),
+    /* @__PURE__ */ jsx26(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        disabled: currentPage >= totalPages,
+        onClick: () => onPageChange(currentPage + 1),
+        children: "Next"
+      }
+    )
+  ] })
+);
+Pagination.displayName = "Pagination";
+
+// src/ui/avatar/Avatar.tsx
+import { forwardRef as forwardRef26 } from "react";
+import { Root as Root12, Image, Fallback } from "@radix-ui/react-avatar";
+import { cva as cva16 } from "class-variance-authority";
+import { jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
+var avatarVariants = cva16(
+  "relative flex shrink-0 overflow-hidden rounded-full",
+  {
+    variants: {
+      size: {
+        sm: "size-8",
+        md: "size-10",
+        lg: "size-12"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var fallbackVariants = cva16(
+  "flex size-full items-center justify-center rounded-full bg-secondary text-secondary-fg font-medium",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var Avatar = forwardRef26(
+  ({ className, size, src, alt, fallback, ...props }, ref) => /* @__PURE__ */ jsxs11(Root12, { ref, className: cn(avatarVariants({ size }), className), ...props, children: [
+    src && /* @__PURE__ */ jsx27(Image, { src, alt, className: "size-full object-cover" }),
+    /* @__PURE__ */ jsx27(Fallback, { className: cn(fallbackVariants({ size })), children: fallback.slice(0, 2).toUpperCase() })
+  ] })
+);
+Avatar.displayName = "Avatar";
+
+// src/ui/skeleton/Skeleton.tsx
+import { forwardRef as forwardRef27 } from "react";
+import { cva as cva17 } from "class-variance-authority";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var skeletonVariants = cva17("animate-pulse bg-secondary", {
+  variants: {
+    shape: {
+      text: "h-4 w-full rounded-ui-sm",
+      circle: "rounded-full",
+      rect: "rounded-ui"
+    }
+  },
+  defaultVariants: {
+    shape: "text"
+  }
+});
+var Skeleton = forwardRef27(
+  ({ className, shape, width, height, style, ...props }, ref) => /* @__PURE__ */ jsx28(
+    "div",
+    {
+      ref,
+      className: cn(skeletonVariants({ shape }), className),
+      style: { width, height, ...style },
+      ...props
+    }
+  )
+);
+Skeleton.displayName = "Skeleton";
+
+// src/ui/empty-state/EmptyState.tsx
+import { forwardRef as forwardRef28 } from "react";
+import { jsx as jsx29, jsxs as jsxs12 } from "react/jsx-runtime";
+var EmptyState = forwardRef28(
+  ({ icon, title, description, action, className, ...props }, ref) => /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col items-center justify-center py-12 text-center", className),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx29("div", { className: "mb-4 text-muted", children: icon }),
+        /* @__PURE__ */ jsx29("h3", { className: "text-lg font-semibold", children: title }),
+        description && /* @__PURE__ */ jsx29("p", { className: "mt-1 text-sm text-muted max-w-sm", children: description }),
+        action && /* @__PURE__ */ jsx29("div", { className: "mt-4", children: action })
+      ]
+    }
+  )
+);
+EmptyState.displayName = "EmptyState";
+
+// src/ui/table/Table.tsx
+import { forwardRef as forwardRef29 } from "react";
+import { cva as cva18 } from "class-variance-authority";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var tableVariants = cva18("w-full caption-bottom text-sm", {
+  variants: {
+    variant: {
+      default: "",
+      striped: " [&_tbody_tr:nth-child(odd)]:bg-secondary/50"
+    },
+    density: {
+      compact: "",
+      normal: ""
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    density: "normal"
+  }
+});
+var Table = forwardRef29(
+  ({ className, variant, density, ...props }, ref) => /* @__PURE__ */ jsx30("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx30("table", { ref, className: cn(tableVariants({ variant, density }), className), ...props }) })
+);
+Table.displayName = "Table";
+
+// src/ui/table/TableHeader.tsx
+import { forwardRef as forwardRef30 } from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var TableHeader = forwardRef30(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx31("thead", { ref, className: cn("[&_tr]:border-b", className), ...props })
+);
+TableHeader.displayName = "TableHeader";
+
+// src/ui/table/TableBody.tsx
+import { forwardRef as forwardRef31 } from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var TableBody = forwardRef31(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx32("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props })
+);
+TableBody.displayName = "TableBody";
+
+// src/ui/table/TableRow.tsx
+import { forwardRef as forwardRef32 } from "react";
+import { cva as cva19 } from "class-variance-authority";
+import { jsx as jsx33 } from "react/jsx-runtime";
+var rowVariants = cva19("border-b transition-colors hover:bg-secondary/50 data-[state=selected]:bg-secondary", {
+  variants: {
+    density: {
+      compact: "",
+      normal: ""
+    }
+  },
+  defaultVariants: {
+    density: "normal"
+  }
+});
+var TableRow = forwardRef32(
+  ({ className, density, ...props }, ref) => /* @__PURE__ */ jsx33("tr", { ref, className: cn(rowVariants({ density }), className), ...props })
+);
+TableRow.displayName = "TableRow";
+
+// src/ui/table/TableHead.tsx
+import { forwardRef as forwardRef33 } from "react";
+import { cva as cva20 } from "class-variance-authority";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var headVariants = cva20("text-left font-medium text-muted", {
+  variants: {
+    density: {
+      compact: "h-8 px-2 text-xs",
+      normal: "h-10 px-3 text-sm"
+    }
+  },
+  defaultVariants: {
+    density: "normal"
+  }
+});
+var TableHead = forwardRef33(
+  ({ className, density, ...props }, ref) => /* @__PURE__ */ jsx34("th", { ref, className: cn(headVariants({ density }), className), ...props })
+);
+TableHead.displayName = "TableHead";
+
+// src/ui/table/TableCell.tsx
+import { forwardRef as forwardRef34 } from "react";
+import { cva as cva21 } from "class-variance-authority";
+import { jsx as jsx35 } from "react/jsx-runtime";
+var cellVariants = cva21("", {
+  variants: {
+    density: {
+      compact: "p-2 text-xs",
+      normal: "p-3 text-sm"
+    }
+  },
+  defaultVariants: {
+    density: "normal"
+  }
+});
+var TableCell = forwardRef34(
+  ({ className, density, ...props }, ref) => /* @__PURE__ */ jsx35("td", { ref, className: cn(cellVariants({ density }), className), ...props })
+);
+TableCell.displayName = "TableCell";
+
+// src/ui/patterns/page-shell/PageShell.tsx
+import { forwardRef as forwardRef35 } from "react";
+import { jsx as jsx36, jsxs as jsxs13 } from "react/jsx-runtime";
+var PageShell = forwardRef35(
+  ({ title, description, actions, children, className, ...props }, ref) => /* @__PURE__ */ jsxs13("div", { ref, className: cn("flex flex-col gap-6", className), ...props, children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-tight sm:flex-row sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ jsxs13("div", { children: [
+        /* @__PURE__ */ jsx36("h1", { className: "text-2xl font-bold", children: title }),
+        description && /* @__PURE__ */ jsx36("p", { className: "text-sm text-muted mt-1", children: description })
+      ] }),
+      actions && /* @__PURE__ */ jsx36("div", { className: "flex items-center gap-inline mt-2 sm:mt-0", children: actions })
+    ] }),
+    /* @__PURE__ */ jsx36("div", { children })
+  ] })
+);
+PageShell.displayName = "PageShell";
+
+// src/ui/patterns/toolbar/Toolbar.tsx
+import { forwardRef as forwardRef36 } from "react";
+import { jsx as jsx37, jsxs as jsxs14 } from "react/jsx-runtime";
+var Toolbar = forwardRef36(
+  ({ search, filters, actions, className, ...props }, ref) => /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col gap-stack sm:flex-row sm:items-center sm:justify-between", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-inline sm:flex-row sm:items-center sm:gap-stack", children: [
+          search && /* @__PURE__ */ jsx37("div", { className: "w-full sm:w-auto", children: search }),
+          filters && /* @__PURE__ */ jsx37("div", { className: "flex items-center gap-inline", children: filters })
+        ] }),
+        actions && /* @__PURE__ */ jsx37("div", { className: "flex items-center gap-inline", children: actions })
+      ]
+    }
+  )
+);
+Toolbar.displayName = "Toolbar";
+
+// src/ui/patterns/stat-card/StatCard.tsx
+import { forwardRef as forwardRef37 } from "react";
+import { jsx as jsx38, jsxs as jsxs15 } from "react/jsx-runtime";
+var StatCard = forwardRef37(
+  ({ label, value, delta, icon, className, ...props }, ref) => /* @__PURE__ */ jsx38(Card, { ref, className: cn(className), ...props, children: /* @__PURE__ */ jsx38(CardContent, { className: "pt-4", children: /* @__PURE__ */ jsxs15("div", { className: "flex items-start justify-between", children: [
+    /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx38("p", { className: "text-sm text-muted", children: label }),
+      /* @__PURE__ */ jsx38("p", { className: "text-2xl font-bold", children: value }),
+      delta && /* @__PURE__ */ jsxs15("p", { className: "flex items-center gap-1 text-sm", children: [
+        /* @__PURE__ */ jsxs15(
+          Badge,
+          {
+            variant: delta.direction === "up" ? "success" : "danger",
+            style: "soft",
+            children: [
+              delta.direction === "up" ? "\u2191" : "\u2193",
+              " ",
+              delta.value
+            ]
+          }
+        ),
+        delta.label && /* @__PURE__ */ jsx38("span", { className: "text-muted", children: delta.label })
+      ] })
+    ] }),
+    icon && /* @__PURE__ */ jsx38("div", { className: "text-muted", children: icon })
+  ] }) }) })
+);
+StatCard.displayName = "StatCard";
+
+// src/ui/separator/Separator.tsx
+import { forwardRef as forwardRef38 } from "react";
+import { cva as cva22 } from "class-variance-authority";
+import { jsx as jsx39 } from "react/jsx-runtime";
+var separatorVariants = cva22("shrink-0 bg-border", {
+  variants: {
+    orientation: {
+      horizontal: "h-px w-full",
+      vertical: "h-full w-px"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+var Separator2 = forwardRef38(
+  ({ className, orientation, ...props }, ref) => /* @__PURE__ */ jsx39(
+    "div",
+    {
+      ref,
+      role: "separator",
+      "aria-orientation": orientation === "vertical" ? "vertical" : void 0,
+      className: cn(separatorVariants({ orientation }), className),
+      ...props
+    }
+  )
+);
+Separator2.displayName = "Separator";
+
+// src/ui/progress/Progress.tsx
+import { forwardRef as forwardRef39 } from "react";
+import { cva as cva23 } from "class-variance-authority";
+import { jsx as jsx40, jsxs as jsxs16 } from "react/jsx-runtime";
+var barVariants = cva23("h-full rounded-full transition-all duration-300", {
+  variants: {
+    variant: {
+      default: "bg-primary",
+      success: "bg-success",
+      warning: "bg-warning",
+      danger: "bg-danger"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var Progress = forwardRef39(
+  ({ value, variant, label, className, ...props }, ref) => /* @__PURE__ */ jsxs16("div", { className: cn("flex flex-col gap-tight", className), ...props, children: [
+    label && /* @__PURE__ */ jsxs16("div", { className: "flex justify-between text-xs", children: [
+      /* @__PURE__ */ jsx40("span", { className: "text-muted", children: label }),
+      /* @__PURE__ */ jsxs16("span", { className: "text-fg font-medium", children: [
+        Math.round(value),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx40("div", { ref, role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": 100, className: "h-2 w-full overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsx40(
+      "div",
+      {
+        className: cn(barVariants({ variant })),
+        style: { width: `${Math.min(100, Math.max(0, value))}%` }
+      }
+    ) })
+  ] })
+);
+Progress.displayName = "Progress";
+
+// src/ui/status-dot/StatusDot.tsx
+import { forwardRef as forwardRef40 } from "react";
+import { cva as cva24 } from "class-variance-authority";
+import { jsx as jsx41 } from "react/jsx-runtime";
+var statusDotVariants = cva24("inline-block shrink-0 rounded-full", {
+  variants: {
+    variant: {
+      neutral: "bg-muted",
+      success: "bg-success",
+      warning: "bg-warning",
+      danger: "bg-danger",
+      info: "bg-primary"
+    },
+    size: {
+      sm: "size-2",
+      md: "size-3"
+    }
+  },
+  defaultVariants: {
+    variant: "neutral",
+    size: "md"
+  }
+});
+var StatusDot = forwardRef40(
+  ({ className, variant, size, pulse, ...props }, ref) => /* @__PURE__ */ jsx41(
+    "span",
+    {
+      ref,
+      className: cn(
+        statusDotVariants({ variant, size }),
+        pulse && "animate-pulse",
+        className
+      ),
+      ...props
+    }
+  )
+);
+StatusDot.displayName = "StatusDot";
+
+// src/ui/kbd/Kbd.tsx
+import { forwardRef as forwardRef41 } from "react";
+import { jsx as jsx42 } from "react/jsx-runtime";
+var Kbd = forwardRef41(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx42(
+    "kbd",
+    {
+      ref,
+      className: cn(
+        "inline-flex items-center justify-center rounded-ui-sm border border-border bg-secondary px-1.5 py-0.5 text-xs font-mono text-muted shadow-card",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Kbd.displayName = "Kbd";
+
+// src/ui/code-block/CodeBlock.tsx
+import { forwardRef as forwardRef42, useState as useState2, useCallback as useCallback3 } from "react";
+import { cva as cva25 } from "class-variance-authority";
+import { jsx as jsx43, jsxs as jsxs17 } from "react/jsx-runtime";
+var codeBlockVariants = cva25(
+  "group relative overflow-hidden rounded-ui border border-border bg-secondary text-sm",
+  {
+    variants: {
+      variant: {
+        default: "",
+        elevated: "shadow-card"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var CodeBlock = forwardRef42(
+  ({ className, variant, code, language, header, wrap = true, ...props }, ref) => {
+    const [copied, setCopied] = useState2(false);
+    const copy = useCallback3(() => {
+      navigator.clipboard.writeText(code).then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      });
+    }, [code]);
+    return /* @__PURE__ */ jsxs17("div", { className: cn(codeBlockVariants({ variant }), className), children: [
+      (header || language) && /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-between px-compact-x py-compact-y border-b border-border text-xs text-muted", children: [
+        /* @__PURE__ */ jsx43("span", { children: header }),
+        language && /* @__PURE__ */ jsx43("span", { className: "font-mono uppercase", children: language })
+      ] }),
+      /* @__PURE__ */ jsx43(
+        "button",
+        {
+          type: "button",
+          onClick: copy,
+          className: "absolute top-1.5 right-1.5 z-10 size-7 rounded-ui-sm flex items-center justify-center bg-bg/80 hover:bg-bg border border-border opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer",
+          title: "Copy code",
+          children: copied ? /* @__PURE__ */ jsx43("svg", { viewBox: "0 0 12 12", className: "size-3.5 fill-success", children: /* @__PURE__ */ jsx43("path", { d: "M2 6l3 3 5-5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }) }) : /* @__PURE__ */ jsxs17("svg", { viewBox: "0 0 12 12", className: "size-3.5 fill-muted", children: [
+            /* @__PURE__ */ jsx43("path", { d: "M3 1h6l2 2v6a1 1 0 01-1 1H3a1 1 0 01-1-1V2a1 1 0 011-1zm0 1v7h7V3.5L8.5 2H3z" }),
+            /* @__PURE__ */ jsx43("path", { d: "M2 4H1v6a1 1 0 001 1h6v-1" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx43(
+        "pre",
+        {
+          ref,
+          className: cn("p-panel text-xs leading-relaxed overflow-x-auto", wrap && "whitespace-pre-wrap"),
+          ...props,
+          children: /* @__PURE__ */ jsx43("code", { children: code })
+        }
+      )
+    ] });
+  }
+);
+CodeBlock.displayName = "CodeBlock";
+
+// src/ui/cell-value/CellValue.tsx
+import { jsx as jsx44, jsxs as jsxs18 } from "react/jsx-runtime";
+function BooleanDisplay({ value }) {
+  const truthy = Boolean(value);
+  return /* @__PURE__ */ jsx44("span", { className: cn("inline-flex items-center", truthy ? "text-success" : "text-muted"), children: truthy ? /* @__PURE__ */ jsx44("svg", { viewBox: "0 0 12 12", className: "size-icon fill-current", children: /* @__PURE__ */ jsx44("path", { d: "M2 6l3 3 5-5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }) }) : /* @__PURE__ */ jsx44("svg", { viewBox: "0 0 12 12", className: "size-icon fill-current", children: /* @__PURE__ */ jsx44("path", { d: "M2 2l8 8M10 2L2 10", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }) }) });
+}
+function JsonDisplay({ value }) {
+  const str = JSON.stringify(value, null, 2);
+  const preview = str.length > 50 ? str.slice(0, 50) + "\u2026" : str;
+  return /* @__PURE__ */ jsxs18(Root9, { children: [
+    /* @__PURE__ */ jsx44(Trigger5, { className: "font-mono text-xs cursor-pointer hover:text-primary transition-colors max-w-[120px] inline-block truncate align-middle", children: preview }),
+    /* @__PURE__ */ jsx44(PopoverContent, { side: "bottom", align: "start", className: "max-w-md p-0 overflow-hidden", children: /* @__PURE__ */ jsx44(CodeBlock, { code: str }) })
+  ] });
+}
+function applyReplacements(str, replacements) {
+  if (!replacements || replacements.length === 0) return str;
+  let result = str;
+  for (const r of replacements) {
+    result = result.replaceAll(r.pattern, r.label);
+  }
+  return result;
+}
+function CellValue({
+  type = "text",
+  value,
+  badgeVariant,
+  badgeStyle,
+  statusVariant,
+  statusPulse,
+  replacements
+}) {
+  if (value === null || value === void 0 || type === "null") {
+    return /* @__PURE__ */ jsx44("span", { className: "text-muted", children: "\u2014" });
+  }
+  switch (type) {
+    case "boolean":
+      return /* @__PURE__ */ jsx44(BooleanDisplay, { value });
+    case "email":
+      return /* @__PURE__ */ jsx44(
+        "a",
+        {
+          href: `mailto:${String(value)}`,
+          className: "text-primary hover:underline",
+          children: String(value)
+        }
+      );
+    case "url":
+      return /* @__PURE__ */ jsxs18(
+        "a",
+        {
+          href: String(value),
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "inline-flex items-center gap-tight text-primary hover:underline",
+          children: [
+            applyReplacements(String(value), replacements),
+            /* @__PURE__ */ jsx44("svg", { viewBox: "0 0 12 12", className: "size-icon-sm shrink-0 fill-current opacity-dim", children: /* @__PURE__ */ jsx44("path", { d: "M2 2h3v1H3v6h6V7h1v3H2V2zm4 0h4v4H9V4.5L6.5 7 6 6.5 8.5 4H6V2z" }) })
+          ]
+        }
+      );
+    case "json":
+      return /* @__PURE__ */ jsx44(JsonDisplay, { value });
+    case "badge":
+      return /* @__PURE__ */ jsx44(Badge, { variant: badgeVariant ?? "neutral", style: badgeStyle ?? "solid", children: String(value) });
+    case "status":
+      return /* @__PURE__ */ jsxs18("span", { className: "inline-flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx44(StatusDot, { variant: statusVariant ?? "neutral", size: "sm", pulse: statusPulse }),
+        /* @__PURE__ */ jsx44("span", { children: String(value) })
+      ] });
+    default:
+      return /* @__PURE__ */ jsx44("span", { children: String(value) });
+  }
+}
+
+// src/ui/canvas/Canvas.tsx
+import { forwardRef as forwardRef43, useRef as useRef2, useState as useState3, useCallback as useCallback4, useEffect as useEffect2 } from "react";
+import { jsx as jsx45, jsxs as jsxs19 } from "react/jsx-runtime";
+var btn = "inline-flex items-center justify-center size-7 rounded-ui-sm border border-border bg-bg text-xs text-fg hover:bg-secondary cursor-pointer";
+var Canvas = forwardRef43(
+  ({ className, gridSize = 20, initialZoom = 1, minZoom = 0.25, maxZoom = 3, zoomStep = 0.1, children, style, ...props }, ref) => {
+    const containerRef = useRef2(null);
+    const [offset, setOffset] = useState3({ x: 0, y: 0 });
+    const [zoom, setZoom] = useState3(initialZoom);
+    const dragging = useRef2(false);
+    const dragStart = useRef2({ x: 0, y: 0 });
+    const dragOffset = useRef2({ x: 0, y: 0 });
+    const handleMouseDown = useCallback4((e) => {
+      if (e.button !== 0) return;
+      dragging.current = true;
+      dragStart.current = { x: e.clientX, y: e.clientY };
+      dragOffset.current = { x: offset.x, y: offset.y };
+    }, [offset]);
+    const handleMouseMove = useCallback4((e) => {
+      if (!dragging.current) return;
+      setOffset({
+        x: dragOffset.current.x + (e.clientX - dragStart.current.x),
+        y: dragOffset.current.y + (e.clientY - dragStart.current.y)
+      });
+    }, []);
+    const handleMouseUp = useCallback4(() => {
+      dragging.current = false;
+    }, []);
+    const handleWheel = useCallback4((e) => {
+      if (!e.ctrlKey && !e.metaKey) return;
+      e.preventDefault();
+      setZoom((z) => {
+        const next = e.deltaY < 0 ? z + zoomStep : z - zoomStep;
+        return Math.min(maxZoom, Math.max(minZoom, Math.round(next * 10) / 10));
+      });
+    }, [minZoom, maxZoom, zoomStep]);
+    useEffect2(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      el.addEventListener("wheel", handleWheel, { passive: false });
+      return () => el.removeEventListener("wheel", handleWheel);
+    }, [handleWheel]);
+    const zoomIn = () => setZoom((z) => Math.min(maxZoom, Math.round((z + zoomStep) * 10) / 10));
+    const zoomOut = () => setZoom((z) => Math.max(minZoom, Math.round((z - zoomStep) * 10) / 10));
+    const resetView = () => {
+      setOffset({ x: 0, y: 0 });
+      setZoom(1);
+    };
+    const scaledGrid = gridSize * zoom;
+    const bgPos = `${offset.x}px ${offset.y}px`;
+    return /* @__PURE__ */ jsxs19(
+      "div",
+      {
+        ref: (node) => {
+          containerRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        className: cn("relative overflow-hidden bg-bg select-none", className),
+        style,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx45(
+            "div",
+            {
+              className: "absolute inset-0",
+              style: {
+                backgroundImage: "radial-gradient(circle,var(--color-border)_1.5px,transparent_1.5px)",
+                backgroundSize: `${scaledGrid}px ${scaledGrid}px`,
+                backgroundPosition: bgPos
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx45(
+            "div",
+            {
+              className: "absolute inset-0",
+              onMouseDown: handleMouseDown,
+              onMouseMove: handleMouseMove,
+              onMouseUp: handleMouseUp,
+              onMouseLeave: handleMouseUp,
+              style: { transform: `translate(${offset.x}px, ${offset.y}px) scale(${zoom})`, transformOrigin: "0 0" },
+              children
+            }
+          ),
+          /* @__PURE__ */ jsxs19("div", { className: "absolute bottom-3 right-3 flex items-center gap-0.5 rounded-ui border border-border bg-bg p-0.5 shadow-card z-10", children: [
+            /* @__PURE__ */ jsx45("button", { type: "button", className: btn, onClick: zoomOut, title: "Zoom out", children: "\u2212" }),
+            /* @__PURE__ */ jsxs19("button", { type: "button", className: cn(btn, "w-auto px-2 font-mono"), onClick: resetView, title: "Reset view", children: [
+              Math.round(zoom * 100),
+              "%"
+            ] }),
+            /* @__PURE__ */ jsx45("button", { type: "button", className: btn, onClick: zoomIn, title: "Zoom in", children: "+" })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Canvas.displayName = "Canvas";
+
+// src/ui/graph-node/GraphNode.tsx
+import { forwardRef as forwardRef44 } from "react";
+import { cva as cva26 } from "class-variance-authority";
+import { jsx as jsx46, jsxs as jsxs20 } from "react/jsx-runtime";
+var graphNodeVariants = cva26(
+  "absolute flex flex-col rounded-ui border bg-bg shadow-card min-w-[160px]",
+  {
+    variants: {
+      variant: {
+        default: "border-border",
+        selected: "border-primary ring-2 ring-primary/20",
+        muted: "border-border opacity-dim"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var GraphNode = forwardRef44(
+  ({ className, variant, x, y, header, accent, ports, footer, rows, children, style, ...props }, ref) => /* @__PURE__ */ jsxs20(
+    "div",
+    {
+      ref,
+      className: cn(graphNodeVariants({ variant }), className),
+      style: { left: x, top: y, ...style },
+      ...props,
+      children: [
+        accent && /* @__PURE__ */ jsx46("div", { className: "h-1 shrink-0 rounded-t-ui bg-primary" }),
+        header && /* @__PURE__ */ jsx46("div", { className: "flex items-center px-3 py-2 border-b border-border", children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-inline flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "flex gap-0.5", children: [
+            /* @__PURE__ */ jsx46("span", { className: "size-1.5 rounded-full bg-muted" }),
+            /* @__PURE__ */ jsx46("span", { className: "size-1.5 rounded-full bg-muted" }),
+            /* @__PURE__ */ jsx46("span", { className: "size-1.5 rounded-full bg-muted" })
+          ] }),
+          /* @__PURE__ */ jsx46("span", { className: "text-xs font-semibold truncate", children: header })
+        ] }) }),
+        ports && ports.length > 0 && /* @__PURE__ */ jsx46("div", { className: "absolute inset-0 pointer-events-none", children: ports.map((p, i) => /* @__PURE__ */ jsxs20(
+          "div",
+          {
+            className: cn(
+              "absolute flex items-center gap-1.5 pointer-events-auto whitespace-nowrap",
+              p.side === "left" ? "right-full flex-row-reverse mr-1.5" : "left-full flex-row ml-1.5",
+              "top-1/2 -translate-y-1/2"
+            ),
+            children: [
+              /* @__PURE__ */ jsx46(
+                "div",
+                {
+                  className: cn(
+                    "size-3 rounded-full border-2 bg-bg transition-colors shrink-0",
+                    p.state === "connected" ? "border-primary bg-primary" : "border-muted",
+                    p.state === "highlighted" && "border-primary ring-2 ring-primary/30"
+                  )
+                }
+              ),
+              p.label && /* @__PURE__ */ jsx46("span", { className: "text-xs text-muted", children: p.label })
+            ]
+          },
+          i
+        )) }),
+        rows && rows.length > 0 && /* @__PURE__ */ jsx46("div", { className: "divide-y divide-border/50", children: rows.map((row, i) => /* @__PURE__ */ jsxs20("div", { className: "grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 px-3 py-1.5 text-xs items-center", children: [
+          /* @__PURE__ */ jsx46("span", { className: "text-muted truncate", children: row.label }),
+          /* @__PURE__ */ jsx46("span", { className: "text-fg text-right", children: row.value })
+        ] }, i)) }),
+        !rows && children && /* @__PURE__ */ jsx46("div", { className: "px-3 py-2 text-xs", children }),
+        footer && /* @__PURE__ */ jsx46("div", { className: "px-3 py-1.5 border-t border-border text-xs text-muted", children: footer })
+      ]
+    }
+  )
+);
+GraphNode.displayName = "GraphNode";
+
+// src/ui/port/Port.tsx
+import { forwardRef as forwardRef45 } from "react";
+import { cva as cva27 } from "class-variance-authority";
+import { jsx as jsx47, jsxs as jsxs21 } from "react/jsx-runtime";
+var portVariants = cva27(
+  "size-3 rounded-full border-2 bg-bg transition-colors",
+  {
+    variants: {
+      side: {
+        in: "",
+        out: ""
+      },
+      state: {
+        default: "border-muted",
+        connected: "border-primary bg-primary",
+        highlighted: "border-primary ring-2 ring-primary/30"
+      }
+    },
+    defaultVariants: {
+      side: "in",
+      state: "default"
+    }
+  }
+);
+var Port = forwardRef45(
+  ({ className, side, state, label, ...props }, ref) => /* @__PURE__ */ jsxs21("div", { ref, className: cn("relative flex items-center gap-2", side === "in" ? "flex-row" : "flex-row-reverse"), children: [
+    /* @__PURE__ */ jsx47("div", { className: cn(portVariants({ side, state }), className), ...props }),
+    label && /* @__PURE__ */ jsx47("span", { className: "text-xs text-muted", children: label })
+  ] })
+);
+Port.displayName = "Port";
+
+// src/ui/typography/Typography.tsx
+import { forwardRef as forwardRef46 } from "react";
+import { jsx as jsx48 } from "react/jsx-runtime";
+var Typography = forwardRef46(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx48("div", { ref, className: cn("space-y-4", className), ...props, children })
+);
+Typography.displayName = "Typography";
+
+// src/ui/tree-view/TreeView.tsx
+import { useState as useState4 } from "react";
+import { cva as cva28 } from "class-variance-authority";
+import { jsx as jsx49, jsxs as jsxs22 } from "react/jsx-runtime";
+var treeVariants = cva28("", {
+  variants: {
+    variant: {
+      default: "space-y-0.5",
+      condensed: "space-y-0"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function Chevron({ expanded }) {
+  return /* @__PURE__ */ jsx49(
+    "svg",
+    {
+      viewBox: "0 0 12 12",
+      className: cn("size-3 fill-current text-muted transition-transform", expanded && "rotate-90"),
+      children: /* @__PURE__ */ jsx49("path", { d: "M4 2l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", fill: "none" })
+    }
+  );
+}
+function TreeItem({
+  node,
+  depth,
+  variant,
+  indent,
+  replacements
+}) {
+  const [collapsed, setCollapsed] = useState4(node.defaultCollapsed ?? true);
+  const hasChildren = node.children && node.children.length > 0;
+  return /* @__PURE__ */ jsxs22("li", { className: cn(variant === "condensed" ? "py-0" : "py-0.5"), children: [
+    /* @__PURE__ */ jsxs22(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-1 rounded-ui-sm px-1 py-0.5 hover:bg-secondary cursor-pointer"
+        ),
+        style: { paddingLeft: `${depth * indent + 4}px` },
+        onClick: () => hasChildren && setCollapsed(!collapsed),
+        children: [
+          hasChildren ? /* @__PURE__ */ jsx49(Chevron, { expanded: !collapsed }) : /* @__PURE__ */ jsx49("span", { className: "size-3 shrink-0" }),
+          node.icon && /* @__PURE__ */ jsx49("span", { className: "shrink-0", children: node.icon }),
+          /* @__PURE__ */ jsx49("span", { className: "text-xs truncate flex-1", children: node.label }),
+          node.value && /* @__PURE__ */ jsx49("span", { className: "shrink-0", children: /* @__PURE__ */ jsx49(CellValue, { ...node.value, replacements }) })
+        ]
+      }
+    ),
+    hasChildren && !collapsed && /* @__PURE__ */ jsx49("ul", { className: "list-none m-0 p-0", children: node.children.map((child) => /* @__PURE__ */ jsx49(
+      TreeItem,
+      {
+        node: child,
+        depth: depth + 1,
+        variant,
+        indent,
+        replacements
+      },
+      child.id
+    )) })
+  ] });
+}
+function TreeView({ data, variant = "default", indent = 16, replacements }) {
+  const v = variant ?? "default";
+  return /* @__PURE__ */ jsx49("ul", { className: cn(treeVariants({ variant: v }), "list-none m-0 p-0"), children: data.map((node) => /* @__PURE__ */ jsx49(
+    TreeItem,
+    {
+      node,
+      depth: 0,
+      variant: v,
+      indent,
+      replacements
+    },
+    node.id
+  )) });
+}
+
+// src/ui/combobox/Combobox.tsx
+import { useState as useState5, useMemo, useRef as useRef3 } from "react";
+import { jsx as jsx50, jsxs as jsxs23 } from "react/jsx-runtime";
+function Combobox({
+  options,
+  value,
+  onChange,
+  placeholder = "Search...",
+  emptyText = "No results found",
+  className,
+  disabled
+}) {
+  const [open, setOpen] = useState5(false);
+  const [query, setQuery] = useState5("");
+  const inputRef = useRef3(null);
+  const filtered = useMemo(
+    () => options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase())),
+    [options, query]
+  );
+  const selectedLabel = options.find((o) => o.value === value)?.label ?? "";
+  return /* @__PURE__ */ jsxs23(Root9, { open, onOpenChange: (v) => {
+    setOpen(v);
+    if (!v) setQuery("");
+  }, children: [
+    /* @__PURE__ */ jsx50(Trigger5, { asChild: true, children: /* @__PURE__ */ jsxs23(
+      "button",
+      {
+        type: "button",
+        role: "combobox",
+        disabled,
+        className: cn(
+          "flex w-full items-center justify-between rounded-ui border border-border bg-bg px-3 py-2 text-sm text-left ring-offset-bg",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          !selectedLabel && "text-muted",
+          className
+        ),
+        onClick: () => {
+          setOpen(true);
+          setTimeout(() => inputRef.current?.focus(), 0);
+        },
+        children: [
+          selectedLabel || placeholder,
+          /* @__PURE__ */ jsx50("svg", { viewBox: "0 0 8 8", className: "size-3 shrink-0 fill-current opacity-dim", children: /* @__PURE__ */ jsx50("path", { d: "M0 2l4 4 4-4" }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs23(
+      PopoverContent,
+      {
+        side: "bottom",
+        align: "start",
+        className: "w-[var(--radix-popover-trigger-width)] p-0 overflow-hidden",
+        children: [
+          /* @__PURE__ */ jsx50("div", { className: "border-b border-border", children: /* @__PURE__ */ jsx50(
+            Input,
+            {
+              ref: inputRef,
+              value: query,
+              onChange: (e) => setQuery(e.target.value),
+              placeholder,
+              variant: "filled",
+              className: "border-0 rounded-none ring-0 focus-visible:ring-0"
+            }
+          ) }),
+          /* @__PURE__ */ jsx50("div", { className: "max-h-60 overflow-y-auto p-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx50("p", { className: "px-2 py-4 text-sm text-muted text-center", children: emptyText }) : filtered.map((option) => /* @__PURE__ */ jsx50(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "w-full text-left px-2 py-1.5 rounded-ui-sm text-sm hover:bg-secondary focus:bg-secondary outline-none",
+                option.value === value && "bg-primary/10 text-primary font-medium"
+              ),
+              onClick: () => {
+                onChange?.(option.value);
+                setOpen(false);
+                setQuery("");
+              },
+              children: option.label
+            },
+            option.value
+          )) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/ui/command-palette/CommandPalette.tsx
+import { useState as useState6, useMemo as useMemo2, useRef as useRef4, useEffect as useEffect3, useCallback as useCallback5 } from "react";
+import { jsx as jsx51, jsxs as jsxs24 } from "react/jsx-runtime";
+function CommandPalette({
+  open,
+  onOpenChange,
+  actions,
+  onSelect,
+  placeholder = "Search commands...",
+  emptyText = "No results found",
+  groups
+}) {
+  const [query, setQuery] = useState6("");
+  const [activeIdx, setActiveIdx] = useState6(0);
+  const inputRef = useRef4(null);
+  const filtered = useMemo2(
+    () => actions.filter((a) => {
+      const q = query.toLowerCase();
+      return a.label.toLowerCase().includes(q) || a.keywords && a.keywords.some((k) => k.toLowerCase().includes(q));
+    }),
+    [actions, query]
+  );
+  const groupedFiltered = useMemo2(() => {
+    if (!groups) return null;
+    const filteredIds = new Set(filtered.map((a) => a.id));
+    return groups.map((g) => ({
+      ...g,
+      actions: g.actionIds.map((id) => actions.find((a) => a.id === id)).filter((a) => a && filteredIds.has(a.id))
+    })).filter((g) => g.actions.length > 0);
+  }, [groups, filtered, actions]);
+  useEffect3(() => {
+    if (open) {
+      setQuery("");
+      setActiveIdx(0);
+      setTimeout(() => inputRef.current?.focus(), 0);
+    }
+  }, [open]);
+  const handleKeyDown = useCallback5(
+    (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIdx((i) => Math.min(i + 1, filtered.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIdx((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter" && filtered[activeIdx]) {
+        e.preventDefault();
+        onSelect(filtered[activeIdx]);
+        onOpenChange(false);
+      } else if (e.key === "Escape") {
+        onOpenChange(false);
+      }
+    },
+    [filtered, activeIdx, onSelect, onOpenChange]
+  );
+  const flatItems = groupedFiltered ? groupedFiltered.flatMap((g) => g.actions) : filtered;
+  return /* @__PURE__ */ jsx51(Root6, { open, onOpenChange, children: /* @__PURE__ */ jsxs24(DialogContent, { size: "lg", className: "p-0 overflow-hidden gap-0", children: [
+    /* @__PURE__ */ jsx51("div", { className: "border-b border-border", children: /* @__PURE__ */ jsx51(
+      "input",
+      {
+        ref: inputRef,
+        value: query,
+        onChange: (e) => {
+          setQuery(e.target.value);
+          setActiveIdx(0);
+        },
+        onKeyDown: handleKeyDown,
+        placeholder,
+        className: "w-full bg-transparent px-4 py-3 text-sm outline-none placeholder:text-muted"
+      }
+    ) }),
+    /* @__PURE__ */ jsx51("div", { className: "max-h-80 overflow-y-auto p-2", onKeyDown: handleKeyDown, children: flatItems.length === 0 ? /* @__PURE__ */ jsx51("p", { className: "px-2 py-8 text-sm text-muted text-center", children: emptyText }) : groupedFiltered ? groupedFiltered.map((group) => /* @__PURE__ */ jsxs24("div", { children: [
+      /* @__PURE__ */ jsx51("p", { className: "px-2 py-1 text-xs font-semibold text-muted uppercase tracking-wider", children: group.label }),
+      group.actions.map((action) => {
+        const idx = flatItems.indexOf(action);
+        return /* @__PURE__ */ jsx51(
+          CommandItem,
+          {
+            action,
+            active: idx === activeIdx,
+            onSelect: () => {
+              onSelect(action);
+              onOpenChange(false);
+            },
+            onMouseEnter: () => setActiveIdx(idx)
+          },
+          action.id
+        );
+      })
+    ] }, group.label)) : filtered.map((action, idx) => /* @__PURE__ */ jsx51(
+      CommandItem,
+      {
+        action,
+        active: idx === activeIdx,
+        onSelect: () => {
+          onSelect(action);
+          onOpenChange(false);
+        },
+        onMouseEnter: () => setActiveIdx(idx)
+      },
+      action.id
+    )) })
+  ] }) });
+}
+function CommandItem({
+  action,
+  active,
+  onSelect,
+  onMouseEnter
+}) {
+  return /* @__PURE__ */ jsxs24(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "flex w-full items-center gap-3 rounded-ui-sm px-2 py-1.5 text-sm text-left",
+        active ? "bg-secondary text-secondary-fg" : "text-fg"
+      ),
+      onClick: onSelect,
+      onMouseEnter,
+      children: [
+        action.icon && /* @__PURE__ */ jsx51("span", { className: "shrink-0 size-4 text-muted", children: action.icon }),
+        /* @__PURE__ */ jsx51("span", { className: "flex-1 truncate", children: action.label }),
+        action.shortcut && /* @__PURE__ */ jsx51("span", { className: "shrink-0 text-xs text-muted", children: action.shortcut })
+      ]
+    }
+  );
+}
+
+// src/ui/drawer/Drawer.tsx
+import { forwardRef as forwardRef47 } from "react";
+import { Root as Root13, Trigger as Trigger7, Portal as Portal5, Overlay as Overlay2, Content as Content7, Title as Title3, Description as Description3, Close as Close4 } from "@radix-ui/react-dialog";
+import { cva as cva29 } from "class-variance-authority";
+import { jsx as jsx52, jsxs as jsxs25 } from "react/jsx-runtime";
+var drawerOverlay = "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out";
+var drawerContentVariants = cva29(
+  "fixed z-50 flex flex-col bg-bg shadow-lg transition-transform duration-200",
+  {
+    variants: {
+      side: {
+        left: "left-0 top-0 bottom-0 data-[state=open]:translate-x-0 data-[state=closed]:-translate-x-full",
+        right: "right-0 top-0 bottom-0 data-[state=open]:translate-x-0 data-[state=closed]:translate-x-full"
+      },
+      size: {
+        sm: "w-72",
+        md: "w-96",
+        lg: "w-[480px]"
+      }
+    },
+    defaultVariants: {
+      side: "right",
+      size: "md"
+    }
+  }
+);
+var DrawerContent = forwardRef47(
+  ({ className, side, size, children, ...props }, ref) => /* @__PURE__ */ jsxs25(Portal5, { children: [
+    /* @__PURE__ */ jsx52(Overlay2, { className: drawerOverlay }),
+    /* @__PURE__ */ jsxs25(Content7, { ref, className: cn(drawerContentVariants({ side, size }), className), ...props, children: [
+      children,
+      /* @__PURE__ */ jsx52(Close4, { className: "absolute right-panel top-panel rounded-ui-sm opacity-70 hover:opacity-100", children: /* @__PURE__ */ jsx52("svg", { viewBox: "0 0 15 15", className: "size-4 fill-current", children: /* @__PURE__ */ jsx52("path", { d: "M2 2l11 11M13 2L2 13", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }) }) })
+    ] })
+  ] })
+);
+DrawerContent.displayName = "DrawerContent";
+var DrawerHeader = forwardRef47(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx52("div", { ref, className: cn("flex flex-col gap-1.5 p-panel border-b border-border", className), ...props })
+);
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerTitle = forwardRef47(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx52(Title3, { ref, className: cn("text-lg font-semibold leading-tight", className), ...props })
+);
+DrawerTitle.displayName = "DrawerTitle";
+var DrawerDescription = forwardRef47(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx52(Description3, { ref, className: cn("text-sm text-muted", className), ...props })
+);
+DrawerDescription.displayName = "DrawerDescription";
+var DrawerBody = forwardRef47(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx52("div", { ref, className: cn("flex-1 overflow-y-auto p-panel", className), ...props })
+);
+DrawerBody.displayName = "DrawerBody";
+var DrawerFooter = forwardRef47(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx52("div", { ref, className: cn("flex items-center justify-end gap-inline p-panel border-t border-border", className), ...props })
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+// src/ui/data-list/DataList.tsx
+import { forwardRef as forwardRef48 } from "react";
+import { cva as cva30 } from "class-variance-authority";
+import { jsx as jsx53, jsxs as jsxs26 } from "react/jsx-runtime";
+var dataListVariants = cva30("divide-y divide-border", {
+  variants: {
+    variant: {
+      default: "",
+      compact: ""
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var DataList = forwardRef48(
+  ({ className, variant, items, replacements, ...props }, ref) => /* @__PURE__ */ jsx53(
+    "dl",
+    {
+      ref,
+      className: cn(dataListVariants({ variant }), className),
+      ...props,
+      children: items.map((item, i) => /* @__PURE__ */ jsxs26(
+        "div",
+        {
+          className: cn(
+            "flex items-center justify-between gap-4",
+            variant === "compact" ? "py-1 px-2" : "py-2 px-3"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs26("dt", { className: "flex items-center gap-2 text-sm text-muted", children: [
+              item.icon && /* @__PURE__ */ jsx53("span", { className: "shrink-0", children: item.icon }),
+              item.label
+            ] }),
+            /* @__PURE__ */ jsx53("dd", { className: "text-sm text-fg font-medium shrink-0", children: item.value !== void 0 ? /* @__PURE__ */ jsx53(
+              CellValue,
+              {
+                type: item.type ?? "text",
+                value: item.value,
+                badgeVariant: item.badgeVariant,
+                badgeStyle: item.badgeStyle,
+                statusVariant: item.statusVariant,
+                statusPulse: item.statusPulse,
+                replacements
+              }
+            ) : /* @__PURE__ */ jsx53("span", { className: "text-muted", children: "\u2014" }) })
+          ]
+        },
+        i
+      ))
+    }
+  )
+);
+DataList.displayName = "DataList";
+
+// src/ui/slider/Slider.tsx
+import { forwardRef as forwardRef49 } from "react";
+import { jsx as jsx54, jsxs as jsxs27 } from "react/jsx-runtime";
+var Slider = forwardRef49(
+  ({ className, label, showValue, value, min = 0, max = 100, step = 1, ...props }, ref) => /* @__PURE__ */ jsxs27("div", { className: cn("flex flex-col gap-1", className), children: [
+    (label || showValue) && /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-between", children: [
+      label && /* @__PURE__ */ jsx54("span", { className: "text-sm text-fg", children: label }),
+      showValue && /* @__PURE__ */ jsx54("span", { className: "text-sm text-muted font-mono", children: String(value ?? 0) })
+    ] }),
+    /* @__PURE__ */ jsx54(
+      "input",
+      {
+        ref,
+        type: "range",
+        value,
+        min,
+        max,
+        step,
+        className: "w-full h-2 rounded-full bg-secondary appearance-none cursor-pointer accent-primary [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-bg [&::-webkit-slider-thumb]:shadow-card",
+        ...props
+      }
+    )
+  ] })
+);
+Slider.displayName = "Slider";
+
+// src/ui/markdown/Markdown.tsx
+import { useMemo as useMemo3 } from "react";
+import { Fragment, jsx as jsx55 } from "react/jsx-runtime";
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function renderInline(text) {
+  const parts = [];
+  const regex = /(`[^`]+`)|(\*\*(.+?)\*\*)|(\*(.+?)\*)|(\[([^\]]+)\]\(([^)]+)\))/g;
+  let lastIndex = 0;
+  let match;
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(escapeHtml(text.slice(lastIndex, match.index)));
+    }
+    if (match[1]) {
+      parts.push(/* @__PURE__ */ jsx55("code", { className: "rounded-ui-sm bg-secondary px-1 py-0.5 text-xs font-mono", children: match[1].slice(1, -1) }, match.index));
+    } else if (match[3]) {
+      parts.push(/* @__PURE__ */ jsx55("strong", { children: escapeHtml(match[3]) }, match.index));
+    } else if (match[5]) {
+      parts.push(/* @__PURE__ */ jsx55("em", { children: escapeHtml(match[5]) }, match.index));
+    } else if (match[7]) {
+      parts.push(/* @__PURE__ */ jsx55("a", { href: match[8], className: "text-primary hover:underline", children: escapeHtml(match[7]) }, match.index));
+    }
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < text.length) {
+    parts.push(escapeHtml(text.slice(lastIndex)));
+  }
+  return parts.length === 1 ? parts[0] : parts.length > 1 ? /* @__PURE__ */ jsx55(Fragment, { children: parts }) : "";
+}
+function parseBlocks(content) {
+  const lines = content.split("\n");
+  const blocks = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    if (line === "") {
+      i++;
+      continue;
+    }
+    const heading = line.match(/^(#{1,6})\s+(.+)/);
+    if (heading) {
+      blocks.push({ type: "heading", level: heading[1].length, text: heading[2] });
+      i++;
+      continue;
+    }
+    if (line.startsWith("```")) {
+      const codeLines = [];
+      i++;
+      while (i < lines.length && !lines[i].startsWith("```")) {
+        codeLines.push(lines[i]);
+        i++;
+      }
+      i++;
+      blocks.push({ type: "code", code: codeLines.join("\n") });
+      continue;
+    }
+    const listItem = line.match(/^[-*]\s+(.+)/);
+    if (listItem) {
+      const items = [listItem[1]];
+      i++;
+      while (i < lines.length) {
+        const next = lines[i].match(/^[-*]\s+(.+)/);
+        if (next) {
+          items.push(next[1]);
+          i++;
+        } else break;
+      }
+      blocks.push({ type: "list", items });
+      continue;
+    }
+    const paraLines = [line];
+    i++;
+    while (i < lines.length && lines[i] !== "") {
+      paraLines.push(lines[i]);
+      i++;
+    }
+    blocks.push({ type: "paragraph", text: paraLines.join(" ") });
+  }
+  return blocks;
+}
+function Markdown({ content, className, ...props }) {
+  const blocks = useMemo3(() => parseBlocks(content), [content]);
+  return /* @__PURE__ */ jsx55("div", { className: cn("space-y-3", className), ...props, children: blocks.map((block, i) => {
+    switch (block.type) {
+      case "heading": {
+        const sizes = ["", "text-lg", "text-base", "text-sm", "text-xs", "text-xs"];
+        const cls = cn(sizes[block.level - 1] ?? "text-base", "font-semibold text-fg");
+        const h = block.level;
+        return h === 1 ? /* @__PURE__ */ jsx55("h1", { className: cls, children: renderInline(block.text) }, i) : h === 2 ? /* @__PURE__ */ jsx55("h2", { className: cls, children: renderInline(block.text) }, i) : h === 3 ? /* @__PURE__ */ jsx55("h3", { className: cls, children: renderInline(block.text) }, i) : h === 4 ? /* @__PURE__ */ jsx55("h4", { className: cls, children: renderInline(block.text) }, i) : h === 5 ? /* @__PURE__ */ jsx55("h5", { className: cls, children: renderInline(block.text) }, i) : /* @__PURE__ */ jsx55("h6", { className: cls, children: renderInline(block.text) }, i);
+      }
+      case "paragraph":
+        return /* @__PURE__ */ jsx55("p", { className: "text-sm leading-relaxed text-fg", children: renderInline(block.text) }, i);
+      case "list":
+        return /* @__PURE__ */ jsx55("ul", { className: "list-disc pl-5 space-y-0.5", children: block.items.map((item, j) => /* @__PURE__ */ jsx55("li", { className: "text-sm text-fg", children: renderInline(item) }, j)) }, i);
+      case "code":
+        return /* @__PURE__ */ jsx55(CodeBlock, { code: block.code }, i);
+      default:
+        return null;
+    }
+  }) });
+}
+export {
+  Alert,
+  Avatar,
+  Badge,
+  Breadcrumbs,
+  Button,
+  Canvas,
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  CellValue,
+  Checkbox,
+  CodeBlock,
+  Combobox,
+  CommandPalette,
+  ConfirmDialog,
+  DataList,
+  Root6 as Dialog,
+  Close as DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Trigger2 as DialogTrigger,
+  Root13 as Drawer,
+  DrawerBody,
+  Close4 as DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  Trigger7 as DrawerTrigger,
+  Root8 as DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  Trigger4 as DropdownMenuTrigger,
+  EmptyState,
+  FormField,
+  GraphNode,
+  Input,
+  Kbd,
+  Label,
+  Markdown,
+  PageShell,
+  Pagination,
+  Root9 as Popover,
+  Close2 as PopoverClose,
+  PopoverContent,
+  Trigger5 as PopoverTrigger,
+  Port,
+  Progress,
+  RadioGroup,
+  RadioGroupItem,
+  Root5 as Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  Value as SelectValue,
+  Separator2 as Separator,
+  Skeleton,
+  Slider,
+  Spinner,
+  StatCard,
+  StatusDot,
+  Switch,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Textarea,
+  Toaster,
+  Toolbar,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TreeView,
+  Typography,
+  cn,
+  useToast
+};