@tangle-network/ui 1.0.0

package/dist/chunk-LISXUB4D.js

@@ -0,0 +1,1222 @@
+import {
+  Card
+} from "./chunk-GYPQXTJU.js";
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/primitives/dialog.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogClose = DialogPrimitive.Close;
+var DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/40",
+      "data-[state=closed]:animate-out data-[state=open]:animate-in",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = React.forwardRef(({ className, children, variant = "default", ...props }, ref) => {
+  const variants = {
+    default: "border-border",
+    sandbox: "border-[var(--border-accent)] shadow-[var(--shadow-accent)]"
+  };
+  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        ref,
+        className: cn(
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]",
+          "gap-4 rounded-lg border bg-card p-6 shadow-lg duration-200",
+          "data-[state=closed]:animate-out data-[state=open]:animate-in",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+          "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+          variants[variant],
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      }
+    )
+  ] });
+});
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn(
+      "font-semibold text-lg leading-none tracking-tight",
+      className
+    ),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-muted-foreground text-sm", className),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+// src/primitives/input.tsx
+import * as React2 from "react";
+import { cva } from "class-variance-authority";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var inputVariants = cva(
+  "flex w-full rounded-lg border bg-card px-4 py-2 text-sm transition-all duration-200 placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm",
+  {
+    variants: {
+      variant: {
+        default: "border-input focus:ring-ring",
+        sandbox: "border-border focus:border-[var(--border-accent-hover)] focus:ring-[var(--border-accent)]",
+        error: "border-[var(--surface-danger-border)] focus:ring-[var(--surface-danger-border)]"
+      },
+      size: {
+        default: "h-11",
+        sm: "h-9 px-3",
+        lg: "h-12 px-5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Input = React2.forwardRef(
+  ({ className, type, variant, size, label, error, hint, id, ...props }, ref) => {
+    const inputId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
+    const input = /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type,
+        id: inputId,
+        className: cn(inputVariants({ variant: error ? "error" : variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+    if (!label && !error && !hint) return input;
+    return /* @__PURE__ */ jsxs2("div", { className: "w-full space-y-1.5", children: [
+      label && /* @__PURE__ */ jsx2(
+        "label",
+        {
+          htmlFor: inputId,
+          className: "block font-medium text-foreground text-sm",
+          children: label
+        }
+      ),
+      input,
+      error && /* @__PURE__ */ jsx2("p", { className: "text-[var(--surface-danger-text)] text-sm font-medium", children: error }),
+      hint && !error && /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground/70 text-sm", children: hint })
+    ] });
+  }
+);
+Input.displayName = "Input";
+var Textarea = React2.forwardRef(
+  ({ className, variant = "default", label, error, hint, id, ...props }, ref) => {
+    const textareaId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
+    const variants = {
+      default: "border-input focus:ring-ring",
+      sandbox: "border-border focus:border-[var(--border-accent-hover)] focus:ring-[var(--border-accent)]"
+    };
+    const textarea = /* @__PURE__ */ jsx2(
+      "textarea",
+      {
+        id: textareaId,
+        className: cn(
+          "flex min-h-[120px] w-full resize-y rounded-lg border bg-card px-4 py-3 text-sm transition-all duration-200",
+          "placeholder:text-muted-foreground",
+          "focus:outline-none focus:ring-2 focus:ring-offset-0",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          error ? "border-[var(--surface-danger-border)] focus:ring-[var(--surface-danger-border)]" : variants[variant],
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+    if (!label && !error && !hint) return textarea;
+    return /* @__PURE__ */ jsxs2("div", { className: "w-full space-y-1.5", children: [
+      label && /* @__PURE__ */ jsx2(
+        "label",
+        {
+          htmlFor: textareaId,
+          className: "block font-medium text-muted-foreground text-sm",
+          children: label
+        }
+      ),
+      textarea,
+      error && /* @__PURE__ */ jsx2("p", { className: "text-[var(--surface-danger-text)] text-sm", children: error }),
+      hint && !error && /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground/70 text-sm", children: hint })
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
+
+// src/primitives/select.tsx
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import * as React3 from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs3(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-border bg-card px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx3(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx3(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx3(ChevronUp, { className: "h-4 w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx3(ChevronDown, { className: "h-4 w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React3.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx3(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs3(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card text-foreground shadow-[var(--shadow-card)] data-[state=closed]:animate-out data-[state=open]:animate-in",
+      position === "popper" && "data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx3(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx3(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx3(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 font-semibold text-sm", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs3(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none focus:bg-muted/50 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx3("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx3(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx3(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx3(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-border", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// src/primitives/segmented-control.tsx
+import * as React4 from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function SegmentedControl({
+  value,
+  onValueChange,
+  options,
+  variant = "row",
+  className,
+  ...rest
+}) {
+  if (typeof process !== "undefined" && process?.env?.NODE_ENV !== "production" && !rest["aria-label"] && !rest["aria-labelledby"]) {
+    console.warn(
+      '[SegmentedControl] role="radiogroup" requires either aria-label or aria-labelledby for accessibility.'
+    );
+  }
+  const optionRefs = React4.useRef(/* @__PURE__ */ new Map());
+  const hasMatch = options.some((o) => o.value === value);
+  const handleKeyDown = (e) => {
+    if (options.length === 0) return;
+    let idx = options.findIndex((o) => o.value === value);
+    if (idx === -1) idx = 0;
+    let next;
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") next = (idx + 1) % options.length;
+    else if (e.key === "ArrowLeft" || e.key === "ArrowUp") next = (idx - 1 + options.length) % options.length;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = options.length - 1;
+    if (next !== void 0) {
+      e.preventDefault();
+      if (options[next].value !== value) {
+        onValueChange(options[next].value);
+      }
+      optionRefs.current.get(options[next].value)?.focus();
+    }
+  };
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      role: "radiogroup",
+      id: rest.id,
+      "aria-label": rest["aria-label"],
+      "aria-labelledby": rest["aria-labelledby"],
+      onKeyDown: handleKeyDown,
+      className: cn(
+        "flex gap-1",
+        variant === "row" && "flex-wrap items-center rounded-lg border border-border bg-card p-1",
+        variant === "tabs" && "flex-nowrap items-end border-b border-border pb-0 overflow-x-auto",
+        className
+      ),
+      children: options.map((option, i) => {
+        const active = option.value === value;
+        const focusable = active || !hasMatch && i === 0;
+        return /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            ref: (el) => {
+              if (el) optionRefs.current.set(option.value, el);
+              else optionRefs.current.delete(option.value);
+            },
+            type: "button",
+            role: "radio",
+            "aria-checked": active,
+            tabIndex: focusable ? 0 : -1,
+            onClick: () => {
+              if (!active) onValueChange(option.value);
+            },
+            className: cn(
+              "relative inline-flex items-center gap-2 whitespace-nowrap text-sm transition-colors",
+              variant === "row" && "rounded-md px-3 py-1.5",
+              variant === "tabs" && "rounded-none border-b-2 -mb-px px-4 py-2",
+              // Active styling is the ONLY styled state — unselected
+              // segments stay transparent on purpose so they don't
+              // compete visually with the selection.
+              active ? variant === "row" ? "border border-transparent bg-[var(--accent-surface)] text-[var(--accent-text)] font-semibold" : "border-[var(--accent-text)] text-[var(--accent-text)] font-semibold" : variant === "row" ? "border border-transparent text-muted-foreground hover:text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsx4("span", { children: option.label }),
+              option.adornment && /* @__PURE__ */ jsx4(
+                "span",
+                {
+                  className: cn(
+                    "text-xs",
+                    active ? "text-[var(--accent-text)]/80" : "text-muted-foreground"
+                  ),
+                  children: option.adornment
+                }
+              )
+            ]
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+
+// src/primitives/progress.tsx
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as React5 from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var Progress = React5.forwardRef(
+  ({ className, value, variant = "default", showValue = false, ...props }, ref) => {
+    const indicatorVariants = {
+      default: "bg-primary",
+      sandbox: "bg-[image:var(--accent-gradient-strong)]"
+    };
+    return /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx5(
+        ProgressPrimitive.Root,
+        {
+          ref,
+          className: cn(
+            "relative h-2 w-full overflow-hidden rounded-full bg-muted",
+            className
+          ),
+          ...props,
+          children: /* @__PURE__ */ jsx5(
+            ProgressPrimitive.Indicator,
+            {
+              className: cn(
+                "h-full w-full flex-1 transition-all duration-300 ease-out",
+                indicatorVariants[variant]
+              ),
+              style: { transform: `translateX(-${100 - (value || 0)}%)` }
+            }
+          )
+        }
+      ),
+      showValue && /* @__PURE__ */ jsxs5("span", { className: "absolute -top-6 right-0 text-muted-foreground text-xs", children: [
+        value,
+        "%"
+      ] })
+    ] });
+  }
+);
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+// src/primitives/switch.tsx
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React6 from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Switch = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  SwitchPrimitives.Root,
+  {
+    className: cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    ),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ jsx6(
+      SwitchPrimitives.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+// src/primitives/skeleton.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function Skeleton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: cn("animate-pulse rounded-lg bg-muted/50", className),
+      ...props
+    }
+  );
+}
+function SkeletonCard({ className }) {
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: cn(
+        "space-y-4 rounded-xl border border-border bg-card p-6",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx7(Skeleton, { className: "h-4 w-3/4" }),
+        /* @__PURE__ */ jsx7(Skeleton, { className: "h-4 w-1/2" }),
+        /* @__PURE__ */ jsxs6("div", { className: "space-y-2 pt-4", children: [
+          /* @__PURE__ */ jsx7(Skeleton, { className: "h-3 w-full" }),
+          /* @__PURE__ */ jsx7(Skeleton, { className: "h-3 w-5/6" }),
+          /* @__PURE__ */ jsx7(Skeleton, { className: "h-3 w-4/6" })
+        ] })
+      ]
+    }
+  );
+}
+function SkeletonTable({ rows = 5 }) {
+  return /* @__PURE__ */ jsxs6("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex gap-4 border-border border-b pb-2", children: [
+      /* @__PURE__ */ jsx7(Skeleton, { className: "h-4 w-1/4" }),
+      /* @__PURE__ */ jsx7(Skeleton, { className: "h-4 w-1/4" }),
+      /* @__PURE__ */ jsx7(Skeleton, { className: "h-4 w-1/4" }),
+      /* @__PURE__ */ jsx7(Skeleton, { className: "h-4 w-1/4" })
+    ] }),
+    Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs6("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsx7(Skeleton, { className: "h-4 w-1/4" }),
+      /* @__PURE__ */ jsx7(Skeleton, { className: "h-4 w-1/4" }),
+      /* @__PURE__ */ jsx7(Skeleton, { className: "h-4 w-1/4" }),
+      /* @__PURE__ */ jsx7(Skeleton, { className: "h-4 w-1/4" })
+    ] }, i))
+  ] });
+}
+
+// src/primitives/toast.tsx
+import { cva as cva2 } from "class-variance-authority";
+import {
+  AlertCircle,
+  AlertTriangle,
+  CheckCircle2,
+  Info,
+  X as X2
+} from "lucide-react";
+import * as React7 from "react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var toastVariants = cva2(
+  "pointer-events-auto relative flex w-full items-center justify-between gap-3 overflow-hidden rounded-lg border p-4 shadow-lg transition-all",
+  {
+    variants: {
+      variant: {
+        default: "border-border bg-background text-foreground",
+        success: "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
+        error: "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]",
+        warning: "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]",
+        info: "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var icons = {
+  success: CheckCircle2,
+  error: AlertCircle,
+  warning: AlertTriangle,
+  info: Info,
+  default: Info
+};
+function ToastComponent({
+  id,
+  title,
+  description,
+  variant = "default",
+  onDismiss
+}) {
+  const Icon2 = icons[variant];
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: cn(toastVariants({ variant })),
+      role: "alert",
+      "aria-live": "polite",
+      children: [
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx8(Icon2, { className: "h-5 w-5 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs7("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsx8("p", { className: "font-medium text-sm", children: title }),
+            description && /* @__PURE__ */ jsx8("p", { className: "mt-1 text-sm opacity-80", children: description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            onClick: () => onDismiss(id),
+            className: "shrink-0 rounded-md p-1 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2",
+            "aria-label": "Dismiss notification",
+            children: /* @__PURE__ */ jsx8(X2, { className: "h-4 w-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function ToastContainer({ toasts, onDismiss }) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className: "fixed right-4 bottom-4 z-50 flex max-w-md flex-col gap-2",
+      "aria-label": "Notifications",
+      children: toasts.map((toast) => /* @__PURE__ */ jsx8(ToastComponent, { ...toast, onDismiss }, toast.id))
+    }
+  );
+}
+var ToastContext = React7.createContext(null);
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = React7.useState([]);
+  const dismiss = React7.useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const toast = React7.useCallback(
+    (input) => {
+      const id = Math.random().toString(36).slice(2);
+      const newToast = { id, ...input };
+      setToasts((prev) => [...prev, newToast]);
+      const duration = input.duration ?? 5e3;
+      if (duration > 0) {
+        setTimeout(() => dismiss(id), duration);
+      }
+    },
+    [dismiss]
+  );
+  const success = React7.useCallback(
+    (title, description) => {
+      toast({ title, description, variant: "success" });
+    },
+    [toast]
+  );
+  const error = React7.useCallback(
+    (title, description) => {
+      toast({ title, description, variant: "error" });
+    },
+    [toast]
+  );
+  const warning = React7.useCallback(
+    (title, description) => {
+      toast({ title, description, variant: "warning" });
+    },
+    [toast]
+  );
+  const info = React7.useCallback(
+    (title, description) => {
+      toast({ title, description, variant: "info" });
+    },
+    [toast]
+  );
+  const value = React7.useMemo(
+    () => ({ toasts, toast, success, error, warning, info, dismiss }),
+    [toasts, toast, success, error, warning, info, dismiss]
+  );
+  return /* @__PURE__ */ jsxs7(ToastContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsx8(ToastContainer, { toasts, onDismiss: dismiss })
+  ] });
+}
+function useToast() {
+  const context = React7.useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+}
+
+// src/primitives/label.tsx
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva as cva3 } from "class-variance-authority";
+import * as React8 from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var labelVariants = cva3(
+  "font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label2 = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label2.displayName = LabelPrimitive.Root.displayName;
+
+// src/primitives/empty-state.tsx
+import * as React9 from "react";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var EmptyState = React9.forwardRef(
+  ({ className, icon, title, description, action, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col items-center justify-center px-4 py-16 text-center",
+          className
+        ),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx10("div", { className: "mb-4 rounded-full bg-muted p-4 text-muted-foreground", children: icon }),
+          /* @__PURE__ */ jsx10("h3", { className: "font-semibold text-lg", children: title }),
+          description && /* @__PURE__ */ jsx10("p", { className: "mt-2 max-w-sm text-muted-foreground text-sm", children: description }),
+          action && /* @__PURE__ */ jsx10("div", { className: "mt-6", children: action })
+        ]
+      }
+    );
+  }
+);
+EmptyState.displayName = "EmptyState";
+
+// src/primitives/stat-card.tsx
+import * as React10 from "react";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var StatCard = React10.forwardRef(
+  ({
+    className,
+    variant = "default",
+    title,
+    value,
+    subtitle,
+    icon,
+    trend,
+    ...props
+  }, ref) => {
+    const iconColors = {
+      default: "text-muted-foreground",
+      sandbox: "text-[var(--accent-text)]"
+    };
+    const trendColors = {
+      positive: "text-[var(--surface-success-text)]",
+      negative: "text-[var(--surface-danger-text)]",
+      neutral: "text-muted-foreground"
+    };
+    const trendStatus = trend ? trend.value > 0 ? "positive" : trend.value < 0 ? "negative" : "neutral" : null;
+    return /* @__PURE__ */ jsx11(
+      Card,
+      {
+        ref,
+        variant,
+        className: cn("p-6", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs9("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ jsxs9("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx11("p", { className: "text-muted-foreground text-sm", children: title }),
+            /* @__PURE__ */ jsx11("p", { className: "font-bold text-3xl tracking-tight", children: value }),
+            subtitle && /* @__PURE__ */ jsx11("p", { className: "text-muted-foreground opacity-70 text-xs", children: subtitle }),
+            trend && trendStatus && /* @__PURE__ */ jsxs9(
+              "div",
+              {
+                className: cn(
+                  "flex items-center gap-1 text-sm",
+                  trendColors[trendStatus]
+                ),
+                children: [
+                  trend.value > 0 ? "\u2191" : trend.value < 0 ? "\u2193" : "\u2192",
+                  /* @__PURE__ */ jsxs9("span", { children: [
+                    Math.abs(trend.value),
+                    "%"
+                  ] }),
+                  trend.label && /* @__PURE__ */ jsx11("span", { className: "text-muted-foreground", children: trend.label })
+                ]
+              }
+            )
+          ] }),
+          icon && /* @__PURE__ */ jsx11(
+            "div",
+            {
+              className: cn(
+                "rounded-lg bg-muted/50 p-2",
+                variant === "sandbox" && "bg-[var(--accent-surface-soft)]",
+                iconColors[variant]
+              ),
+              children: icon
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+StatCard.displayName = "StatCard";
+
+// src/primitives/index.ts
+import { Logo, TangleKnot } from "@tangle-network/brand";
+
+// src/primitives/terminal-display.tsx
+import * as React11 from "react";
+import { useEffect, useRef as useRef2 } from "react";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var TerminalDisplay = React11.forwardRef(
+  ({
+    className,
+    variant = "default",
+    title = "Terminal",
+    showHeader = true,
+    autoScroll = true,
+    maxHeight = "400px",
+    children,
+    ...props
+  }, ref) => {
+    const containerRef = useRef2(null);
+    useEffect(() => {
+      if (autoScroll && containerRef.current) {
+        containerRef.current.scrollTop = containerRef.current.scrollHeight;
+      }
+    }, [autoScroll]);
+    const variants = {
+      default: "border-border",
+      sandbox: "border-border shadow-[var(--shadow-accent)]"
+    };
+    return /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        ref,
+        className: cn(
+          "overflow-hidden rounded-xl border bg-background font-mono text-sm",
+          variants[variant],
+          className
+        ),
+        ...props,
+        children: [
+          showHeader && /* @__PURE__ */ jsx12("div", { className: "flex items-center border-b border-border bg-card px-4 py-3", children: /* @__PURE__ */ jsx12("span", { className: "text-muted-foreground text-xs", children: title }) }),
+          /* @__PURE__ */ jsx12(
+            "div",
+            {
+              ref: containerRef,
+              className: "overflow-auto p-4",
+              style: { maxHeight },
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TerminalDisplay.displayName = "TerminalDisplay";
+var TerminalLine = React11.forwardRef(
+  ({ className, type = "output", prompt = "$", timestamp, children, ...props }, ref) => {
+    const typeStyles = {
+      input: "text-foreground",
+      output: "text-foreground",
+      error: "text-[var(--surface-danger-text)]",
+      success: "text-[var(--surface-success-text)]",
+      info: "text-[var(--surface-info-text)]",
+      thinking: "text-[var(--surface-warning-text)] animate-pulse",
+      command: "text-foreground",
+      warning: "text-[var(--surface-warning-text)]"
+    };
+    return /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-start gap-2 py-0.5 leading-relaxed",
+          typeStyles[type],
+          className
+        ),
+        ...props,
+        children: [
+          (type === "input" || type === "command") && /* @__PURE__ */ jsx12("span", { className: "shrink-0 select-none text-[var(--surface-success-text)]", children: prompt }),
+          type === "thinking" && /* @__PURE__ */ jsx12("span", { className: "shrink-0 select-none", children: "..." }),
+          timestamp && /* @__PURE__ */ jsxs10("span", { className: "shrink-0 select-none text-muted-foreground opacity-50", children: [
+            "[",
+            timestamp,
+            "]"
+          ] }),
+          /* @__PURE__ */ jsx12("span", { className: "whitespace-pre-wrap break-all", children })
+        ]
+      }
+    );
+  }
+);
+TerminalLine.displayName = "TerminalLine";
+var TerminalCursor = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
+  "span",
+  {
+    ref,
+    className: cn(
+      "ml-0.5 inline-block h-4 w-2 animate-pulse bg-foreground",
+      className
+    ),
+    ...props
+  }
+));
+TerminalCursor.displayName = "TerminalCursor";
+var TerminalInput = React11.forwardRef(
+  ({ className, onSubmit, variant = "default", ...props }, ref) => {
+    const [value, setValue] = React11.useState("");
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" && value.trim() && onSubmit) {
+        onSubmit(value.trim());
+        setValue("");
+      }
+    };
+    const variants = {
+      default: "border-border focus-within:border-border",
+      sandbox: "border-border focus-within:border-[var(--border-accent-hover)]"
+    };
+    return /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        className: cn(
+          "flex items-center rounded-lg border bg-background px-4 py-2.5 font-mono text-sm transition-colors",
+          variants[variant],
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx12("span", { className: "mr-2 select-none text-[var(--surface-success-text)]", children: "$" }),
+          /* @__PURE__ */ jsx12(
+            "input",
+            {
+              ref,
+              type: "text",
+              value,
+              onChange: (e) => setValue(e.target.value),
+              onKeyDown: handleKeyDown,
+              className: "flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground",
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx12(TerminalCursor, {})
+        ]
+      }
+    );
+  }
+);
+TerminalInput.displayName = "TerminalInput";
+
+// src/primitives/drop-zone.tsx
+import { useCallback as useCallback2, useRef as useRef3, useState as useState3 } from "react";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function DropZone({
+  onDrop,
+  accept,
+  disabled,
+  overlay,
+  title = "Drop files to upload",
+  description = "Your files will be securely stored in the workspace.",
+  icon = "cloud_upload",
+  children,
+  className
+}) {
+  const [dragOver, setDragOver] = useState3(false);
+  const counter = useRef3(0);
+  const isAccepted = useCallback2(
+    (file) => {
+      if (!accept) return true;
+      const extensions = accept.split(",").map((ext) => ext.trim().toLowerCase());
+      const fileName = file.name.toLowerCase();
+      return extensions.some((ext) => fileName.endsWith(ext));
+    },
+    [accept]
+  );
+  const handleDragEnter = useCallback2(
+    (e) => {
+      e.preventDefault();
+      if (disabled) return;
+      counter.current++;
+      if (e.dataTransfer?.types.includes("Files")) setDragOver(true);
+    },
+    [disabled]
+  );
+  const handleDragLeave = useCallback2((e) => {
+    e.preventDefault();
+    counter.current--;
+    if (counter.current === 0) setDragOver(false);
+  }, []);
+  const handleDragOver = useCallback2(
+    (e) => {
+      e.preventDefault();
+      if (!disabled) e.dataTransfer.dropEffect = "copy";
+    },
+    [disabled]
+  );
+  const handleDrop = useCallback2(
+    (e) => {
+      e.preventDefault();
+      counter.current = 0;
+      setDragOver(false);
+      if (disabled) return;
+      const allFiles = Array.from(e.dataTransfer?.files || []);
+      const accepted = accept ? allFiles.filter(isAccepted) : allFiles;
+      if (accepted.length > 0) onDrop(accepted);
+    },
+    [disabled, accept, isAccepted, onDrop]
+  );
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      className: cn("relative", className),
+      children: [
+        dragOver && (overlay || /* @__PURE__ */ jsx13("div", { className: "fixed inset-0 z-[100] flex items-center justify-center pointer-events-none bg-background", children: /* @__PURE__ */ jsxs11("div", { className: "rounded-2xl border-2 border-dashed border-border bg-card p-16 text-center shadow-[var(--shadow-dropdown)] max-w-lg mx-auto", children: [
+          /* @__PURE__ */ jsx13("div", { className: "mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-2xl border border-border bg-[var(--accent-surface-soft)]", children: typeof icon === "string" ? /* @__PURE__ */ jsxs11("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "h-10 w-10 text-[var(--accent-text)]", children: [
+            /* @__PURE__ */ jsx13("title", { children: "Upload" }),
+            /* @__PURE__ */ jsx13("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+            /* @__PURE__ */ jsx13("polyline", { points: "17 8 12 3 7 8" }),
+            /* @__PURE__ */ jsx13("line", { x1: "12", x2: "12", y1: "3", y2: "15" })
+          ] }) : icon }),
+          /* @__PURE__ */ jsx13("h2", { className: "text-2xl font-bold text-foreground", children: title }),
+          /* @__PURE__ */ jsx13("p", { className: "mt-2 text-sm text-muted-foreground", children: description })
+        ] }) })),
+        children
+      ]
+    }
+  );
+}
+
+// src/primitives/upload-progress.tsx
+import { AlertCircle as AlertCircle2, CheckCircle2 as CheckCircle22, FileText, Loader2, RefreshCw, X as X3 } from "lucide-react";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)}KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+}
+function UploadProgress({ files, onRemove, onRetry, className }) {
+  if (files.length === 0) return null;
+  return /* @__PURE__ */ jsx14("div", { className: cn("space-y-2", className), children: files.map((file) => /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-3 rounded-lg border px-3 py-2 text-sm",
+        file.status === "error" ? "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)]" : file.status === "complete" ? "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]" : "border-border bg-card"
+      ),
+      children: [
+        file.status === "complete" && /* @__PURE__ */ jsx14(CheckCircle22, { className: "h-4 w-4 shrink-0 text-[var(--surface-success-text)]" }),
+        file.status === "error" && /* @__PURE__ */ jsx14(AlertCircle2, { className: "h-4 w-4 shrink-0 text-[var(--surface-danger-text)]" }),
+        file.status === "uploading" && /* @__PURE__ */ jsx14(Loader2, { className: "h-4 w-4 shrink-0 animate-spin text-primary" }),
+        file.status === "pending" && /* @__PURE__ */ jsx14(FileText, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsxs12("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx14("span", { className: "truncate font-medium text-foreground", children: file.name }),
+            /* @__PURE__ */ jsx14("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatSize(file.size) })
+          ] }),
+          file.status === "uploading" && file.progress !== void 0 && /* @__PURE__ */ jsx14("div", { className: "mt-1 h-1 w-full overflow-hidden rounded-full bg-muted/50", children: /* @__PURE__ */ jsx14(
+            "div",
+            {
+              className: "h-full rounded-full bg-primary transition-all",
+              style: { width: `${file.progress}%` }
+            }
+          ) }),
+          file.status === "error" && file.error && /* @__PURE__ */ jsx14("p", { className: "mt-0.5 text-xs text-[var(--surface-danger-text)]", children: file.error })
+        ] }),
+        /* @__PURE__ */ jsxs12("div", { className: "flex shrink-0 items-center gap-1", children: [
+          file.status === "error" && onRetry && /* @__PURE__ */ jsx14(
+            "button",
+            {
+              type: "button",
+              onClick: () => onRetry(file.id),
+              className: "rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+              children: /* @__PURE__ */ jsx14(RefreshCw, { className: "h-3.5 w-3.5" })
+            }
+          ),
+          onRemove && /* @__PURE__ */ jsx14(
+            "button",
+            {
+              type: "button",
+              onClick: () => onRemove(file.id),
+              className: "rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+              children: /* @__PURE__ */ jsx14(X3, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] })
+      ]
+    },
+    file.id
+  )) });
+}
+
+// src/primitives/sidebar-drop-zone.tsx
+import { useCallback as useCallback3, useRef as useRef4, useState as useState4 } from "react";
+import { Upload } from "lucide-react";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+function SidebarDropZone({
+  onDrop,
+  accept,
+  disabled,
+  title = "Drop files here",
+  description,
+  icon,
+  persistent = false,
+  className
+}) {
+  const [dragOver, setDragOver] = useState4(false);
+  const counter = useRef4(0);
+  const isAccepted = useCallback3(
+    (file) => {
+      if (!accept) return true;
+      const extensions = accept.split(",").map((ext) => ext.trim().toLowerCase());
+      const fileName = file.name.toLowerCase();
+      return extensions.some((ext) => fileName.endsWith(ext));
+    },
+    [accept]
+  );
+  const handleDragEnter = useCallback3(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (disabled) return;
+      counter.current++;
+      if (e.dataTransfer?.types.includes("Files")) setDragOver(true);
+    },
+    [disabled]
+  );
+  const handleDragLeave = useCallback3((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    counter.current--;
+    if (counter.current === 0) setDragOver(false);
+  }, []);
+  const handleDragOver = useCallback3(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!disabled) e.dataTransfer.dropEffect = "copy";
+    },
+    [disabled]
+  );
+  const handleDrop = useCallback3(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      counter.current = 0;
+      setDragOver(false);
+      if (disabled) return;
+      const allFiles = Array.from(e.dataTransfer?.files || []);
+      const accepted = accept ? allFiles.filter(isAccepted) : allFiles;
+      if (accepted.length > 0) onDrop(accepted);
+    },
+    [disabled, accept, isAccepted, onDrop]
+  );
+  const isVisible = persistent || dragOver;
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      className: cn(
+        "rounded-lg border-2 border-dashed transition-all duration-150",
+        isVisible ? "p-4" : "p-0 border-transparent",
+        dragOver ? "border-[var(--brand-cool,hsl(var(--ring)))] bg-[var(--accent-surface-soft)]" : persistent ? "border-[var(--border-subtle,hsl(var(--border)))] bg-transparent hover:border-[var(--border-default,hsl(var(--border)))] hover:bg-[var(--bg-hover,hsl(var(--accent)))]" : "",
+        disabled && "opacity-50 pointer-events-none",
+        className
+      ),
+      children: isVisible && /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-center gap-2 text-center", children: [
+        /* @__PURE__ */ jsx15("div", { className: cn(
+          "flex h-8 w-8 items-center justify-center rounded-lg transition-colors",
+          dragOver ? "bg-[var(--brand-cool,hsl(var(--primary)))]/15 text-[var(--brand-cool,hsl(var(--primary)))]" : "text-[var(--text-muted,hsl(var(--muted-foreground)))]"
+        ), children: icon ?? /* @__PURE__ */ jsx15(Upload, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx15("p", { className: cn(
+          "text-xs font-medium",
+          dragOver ? "text-[var(--text-primary,hsl(var(--foreground)))]" : "text-[var(--text-muted,hsl(var(--muted-foreground)))]"
+        ), children: title }),
+        description && /* @__PURE__ */ jsx15("p", { className: "text-[10px] text-[var(--text-muted,hsl(var(--muted-foreground)))]", children: description })
+      ] })
+    }
+  );
+}
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogClose,
+  DialogOverlay,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  Input,
+  Textarea,
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SegmentedControl,
+  Progress,
+  Switch,
+  Skeleton,
+  SkeletonCard,
+  SkeletonTable,
+  ToastContainer,
+  ToastProvider,
+  useToast,
+  Label2 as Label,
+  EmptyState,
+  StatCard,
+  TerminalDisplay,
+  TerminalLine,
+  TerminalCursor,
+  TerminalInput,
+  DropZone,
+  UploadProgress,
+  SidebarDropZone,
+  Logo,
+  TangleKnot
+};