@tangle-network/sandbox-ui 0.2.0

package/dist/chunk-ZOL2TR5M.js

@@ -0,0 +1,475 @@
+import {
+  Card
+} from "./chunk-2UHPE5T7.js";
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/primitives/select.tsx
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  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 bg-popover text-popover-foreground shadow-md 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__ */ jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx(
+        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__ */ jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 font-semibold text-sm", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  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-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// src/primitives/table.tsx
+import * as React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Table = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx2(
+  "table",
+  {
+    ref,
+    className: cn("w-full caption-bottom text-sm", className),
+    ...props
+  }
+) }));
+Table.displayName = "Table";
+var TableHeader = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+TableHeader.displayName = "TableHeader";
+var TableBody = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  "tbody",
+  {
+    ref,
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableFooter = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var TableRow = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  "tr",
+  {
+    ref,
+    className: cn(
+      "border-border border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    ),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+var TableHead = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  "th",
+  {
+    ref,
+    className: cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    ),
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+var TableCell = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  "td",
+  {
+    ref,
+    className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+var TableCaption = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  "caption",
+  {
+    ref,
+    className: cn("mt-4 text-muted-foreground text-sm", className),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+
+// src/primitives/switch.tsx
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React3 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Switch = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  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__ */ jsx3(
+      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/toast.tsx
+import { cva } from "class-variance-authority";
+import {
+  AlertCircle,
+  AlertTriangle,
+  CheckCircle2,
+  Info,
+  X
+} from "lucide-react";
+import * as React4 from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var toastVariants = cva(
+  "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-green-500/20 bg-green-500/10 text-green-400",
+        error: "border-red-500/20 bg-red-500/10 text-red-400",
+        warning: "border-yellow-500/20 bg-yellow-500/10 text-yellow-400",
+        info: "border-blue-500/20 bg-blue-500/10 text-blue-400"
+      }
+    },
+    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__ */ jsxs2(
+    "div",
+    {
+      className: cn(toastVariants({ variant })),
+      role: "alert",
+      "aria-live": "polite",
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx4(Icon2, { className: "h-5 w-5 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs2("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsx4("p", { className: "font-medium text-sm", children: title }),
+            description && /* @__PURE__ */ jsx4("p", { className: "mt-1 text-sm opacity-80", children: description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx4(
+          "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__ */ jsx4(X, { className: "h-4 w-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function ToastContainer({ toasts, onDismiss }) {
+  return /* @__PURE__ */ jsx4(
+    "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__ */ jsx4(ToastComponent, { ...toast, onDismiss }, toast.id))
+    }
+  );
+}
+var ToastContext = React4.createContext(null);
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = React4.useState([]);
+  const dismiss = React4.useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const toast = React4.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 = React4.useCallback(
+    (title, description) => {
+      toast({ title, description, variant: "success" });
+    },
+    [toast]
+  );
+  const error = React4.useCallback(
+    (title, description) => {
+      toast({ title, description, variant: "error" });
+    },
+    [toast]
+  );
+  const warning = React4.useCallback(
+    (title, description) => {
+      toast({ title, description, variant: "warning" });
+    },
+    [toast]
+  );
+  const info = React4.useCallback(
+    (title, description) => {
+      toast({ title, description, variant: "info" });
+    },
+    [toast]
+  );
+  const value = React4.useMemo(
+    () => ({ toasts, toast, success, error, warning, info, dismiss }),
+    [toasts, toast, success, error, warning, info, dismiss]
+  );
+  return /* @__PURE__ */ jsxs2(ToastContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsx4(ToastContainer, { toasts, onDismiss: dismiss })
+  ] });
+}
+function useToast() {
+  const context = React4.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 cva2 } from "class-variance-authority";
+import * as React5 from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var labelVariants = cva2(
+  "font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label2 = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label2.displayName = LabelPrimitive.Root.displayName;
+
+// src/primitives/stat-card.tsx
+import * as React6 from "react";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var StatCard = React6.forwardRef(
+  ({
+    className,
+    variant = "default",
+    title,
+    value,
+    subtitle,
+    icon,
+    trend,
+    ...props
+  }, ref) => {
+    const iconColors = {
+      default: "text-muted-foreground",
+      sandbox: "text-purple-400"
+    };
+    const trendColors = {
+      positive: "text-green-400",
+      negative: "text-red-400",
+      neutral: "text-muted-foreground"
+    };
+    const trendStatus = trend ? trend.value > 0 ? "positive" : trend.value < 0 ? "negative" : "neutral" : null;
+    return /* @__PURE__ */ jsx6(
+      Card,
+      {
+        ref,
+        variant,
+        className: cn("p-6", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx6("p", { className: "text-muted-foreground text-sm", children: title }),
+            /* @__PURE__ */ jsx6("p", { className: "font-bold text-3xl tracking-tight", children: value }),
+            subtitle && /* @__PURE__ */ jsx6("p", { className: "text-muted-foreground/70 text-xs", children: subtitle }),
+            trend && trendStatus && /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                className: cn(
+                  "flex items-center gap-1 text-sm",
+                  trendColors[trendStatus]
+                ),
+                children: [
+                  trend.value > 0 ? "\u2191" : trend.value < 0 ? "\u2193" : "\u2192",
+                  /* @__PURE__ */ jsxs3("span", { children: [
+                    Math.abs(trend.value),
+                    "%"
+                  ] }),
+                  trend.label && /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground", children: trend.label })
+                ]
+              }
+            )
+          ] }),
+          icon && /* @__PURE__ */ jsx6(
+            "div",
+            {
+              className: cn("rounded-lg bg-muted/50 p-2", iconColors[variant]),
+              children: icon
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+StatCard.displayName = "StatCard";
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+  Switch,
+  ToastContainer,
+  ToastProvider,
+  useToast,
+  Label2 as Label,
+  StatCard
+};

package/dist/dashboard.d.ts

@@ -0,0 +1,111 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+export { a as BillingBalance, c as BillingDashboard, d as BillingDashboardProps, B as BillingSubscription, b as BillingUsage, e as PricingPage, f as PricingPageProps, P as PricingTier, g as UsageChart, h as UsageChartProps, U as UsageDataPoint } from './usage-chart-DINgSVL5.js';
+import * as React from 'react';
+
+type ProductVariant = "sandbox";
+interface NavItem {
+    id: string;
+    label: string;
+    href: string;
+    icon: React.ComponentType<{
+        className?: string;
+    }>;
+}
+interface DashboardUser {
+    email: string;
+    name?: string;
+    tier?: string;
+    avatarUrl?: string;
+}
+interface DashboardLayoutProps {
+    children: React.ReactNode;
+    variant?: ProductVariant;
+    navItems: NavItem[];
+    activeNavId?: string;
+    user?: DashboardUser | null;
+    isLoading?: boolean;
+    onLogout?: () => void;
+    onSettingsClick?: () => void;
+    settingsHref?: string;
+    /** Custom link component (e.g., Next.js Link). Use any type to support various router implementations. */
+    LinkComponent?: React.ComponentType<any>;
+}
+declare function DashboardLayout({ children, variant, navItems, activeNavId, user, isLoading, onLogout, onSettingsClick, settingsHref, LinkComponent, }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface Backend {
+    type: string;
+    label: string;
+    description?: string;
+}
+interface BackendSelectorProps {
+    backends: Backend[];
+    selected: string[];
+    onChange: (selected: string[]) => void;
+    label?: string;
+    hint?: string;
+    multiSelect?: boolean;
+    className?: string;
+}
+declare function BackendSelector({ backends, selected, onChange, label, hint, multiSelect, className, }: BackendSelectorProps): react_jsx_runtime.JSX.Element;
+
+interface Profile {
+    id: string;
+    name: string;
+    description?: string;
+    is_builtin?: boolean;
+    extends?: string;
+    model?: string;
+    metrics?: {
+        total_runs: number;
+        success_rate: number;
+        avg_duration_ms: number;
+    };
+}
+interface ProfileSelectorProps {
+    profiles: Profile[];
+    selectedId?: string | null;
+    onSelect: (profile: Profile | null) => void;
+    onCreateClick?: () => void;
+    onManageClick?: () => void;
+    label?: string;
+    placeholder?: string;
+    showMetrics?: boolean;
+    className?: string;
+}
+declare function ProfileSelector({ profiles, selectedId, onSelect, onCreateClick, onManageClick, label, placeholder, showMetrics, className, }: ProfileSelectorProps): react_jsx_runtime.JSX.Element;
+/**
+ * Profile performance comparison card.
+ * Shows metrics from multiple profiles side by side.
+ */
+interface ProfileComparisonProps {
+    profiles: Profile[];
+    className?: string;
+}
+declare function ProfileComparison({ profiles, className, }: ProfileComparisonProps): react_jsx_runtime.JSX.Element | null;
+
+type VariantStatus = "pending" | "running" | "completed" | "failed" | "cancelled";
+type VariantOutcome = "pending_review" | "accepted" | "rejected" | "merged_with_conflicts" | "expired";
+interface Variant {
+    id: string;
+    label: string;
+    sublabel?: string;
+    status: VariantStatus;
+    outcome?: VariantOutcome;
+    durationMs?: number;
+    error?: string;
+    summary?: string;
+    /** Link to view variant details (e.g., chat UI) */
+    detailsUrl?: string;
+}
+interface VariantListProps {
+    variants: Variant[];
+    selectedId?: string | null;
+    onSelect?: (id: string) => void;
+    onAccept?: (id: string) => void;
+    onReject?: (id: string) => void;
+    isActioning?: string | null;
+    className?: string;
+}
+declare function VariantList({ variants, selectedId, onSelect, onAccept, onReject, isActioning, className, }: VariantListProps): react_jsx_runtime.JSX.Element;
+
+export { type Backend, BackendSelector, type BackendSelectorProps, DashboardLayout, type DashboardLayoutProps, type Profile as DashboardProfile, type DashboardUser, type NavItem, type ProductVariant, ProfileComparison, type ProfileComparisonProps, ProfileSelector, type ProfileSelectorProps, type Variant, VariantList, type VariantListProps, type VariantOutcome, type VariantStatus };

package/dist/dashboard.js

@@ -0,0 +1,26 @@
+import {
+  BackendSelector,
+  DashboardLayout,
+  ProfileComparison,
+  ProfileSelector,
+  VariantList
+} from "./chunk-HMND7JPA.js";
+import {
+  BillingDashboard,
+  PricingPage,
+  UsageChart
+} from "./chunk-4EIWPJMJ.js";
+import "./chunk-MCGKDCOR.js";
+import "./chunk-2UHPE5T7.js";
+import "./chunk-E6FS7R4X.js";
+import "./chunk-RQHJBTEU.js";
+export {
+  BackendSelector,
+  BillingDashboard,
+  DashboardLayout,
+  PricingPage,
+  ProfileComparison,
+  ProfileSelector,
+  UsageChart,
+  VariantList
+};