@tangle-network/sandbox-ui 0.2.2 → 0.3.4

package/dist/chunk-YDBXQQLC.js

@@ -0,0 +1,336 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "./chunk-TQN3VR4F.js";
+import {
+  Markdown
+} from "./chunk-LTFK464G.js";
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "./chunk-MXCSSOGH.js";
+import {
+  Button
+} from "./chunk-HWLX5NME.js";
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/primitives/code-block.tsx
+import { clsx } from "clsx";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CodeBlock({
+  code,
+  language,
+  showCopy = true,
+  showLineNumbers = false,
+  className,
+  ...props
+}) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  const lines = code.split("\n");
+  return /* @__PURE__ */ jsxs("div", { className: "group relative", children: [
+    /* @__PURE__ */ jsx(
+      "pre",
+      {
+        className: clsx(
+          "overflow-x-auto rounded-lg border border-[#262626] bg-[#0a0a0a] p-4 font-mono text-sm",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx("code", { className: language ? `language-${language}` : void 0, children: showLineNumbers ? /* @__PURE__ */ jsx("table", { className: "w-full", children: /* @__PURE__ */ jsx("tbody", { children: lines.map((line, i) => /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("td", { className: "w-8 select-none pr-4 text-right text-[#525252]", children: i + 1 }),
+          /* @__PURE__ */ jsx("td", { className: "text-[#a1a1a1]", children: line || " " })
+        ] }, i)) }) }) : /* @__PURE__ */ jsx("span", { className: "text-[#a1a1a1]", children: code }) })
+      }
+    ),
+    showCopy && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: handleCopy,
+        className: clsx(
+          "absolute top-2 right-2 rounded px-2 py-1 text-xs",
+          "bg-[#262626] text-[#a1a1a1] hover:bg-[#363636] hover:text-white",
+          "opacity-0 transition-opacity group-hover:opacity-100"
+        ),
+        children: copied ? "Copied!" : "Copy"
+      }
+    )
+  ] });
+}
+function InlineCode({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "code",
+    {
+      className: clsx(
+        "rounded border border-[#262626] bg-[#1a1a1a] px-1.5 py-0.5 font-mono text-sm",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+
+// src/openui/openui-artifact-renderer.tsx
+import { Fragment } from "react";
+import { ArrowRight, Minus } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var GAP_STYLES = {
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6"
+};
+var GRID_STYLES = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 md:grid-cols-2",
+  3: "grid-cols-1 md:grid-cols-3",
+  4: "grid-cols-1 md:grid-cols-2 xl:grid-cols-4"
+};
+var ALIGN_STYLES = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+};
+function formatValue(value) {
+  if (value === null || value === void 0) {
+    return /* @__PURE__ */ jsx2("span", { className: "text-[var(--text-muted)]", children: "\u2014" });
+  }
+  if (typeof value === "boolean") {
+    return value ? "Yes" : "No";
+  }
+  return value;
+}
+function renderActions(actions, onAction) {
+  if (actions.length === 0) return null;
+  return /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap items-center gap-2", children: actions.map((action) => /* @__PURE__ */ jsx2(
+    Button,
+    {
+      type: "button",
+      size: "sm",
+      variant: action.tone ?? "outline",
+      disabled: action.disabled,
+      onClick: () => {
+        action.onPress?.();
+        onAction?.(action);
+      },
+      children: action.label
+    },
+    action.id
+  )) });
+}
+function renderNode(node, onAction) {
+  switch (node.type) {
+    case "heading": {
+      const level = node.level ?? 2;
+      const HeadingTag = `h${level}`;
+      return /* @__PURE__ */ jsxs2("div", { className: "space-y-1", children: [
+        node.kicker && /* @__PURE__ */ jsx2("div", { className: "text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--text-muted)]", children: node.kicker }),
+        /* @__PURE__ */ jsx2(
+          HeadingTag,
+          {
+            className: cn(
+              "font-semibold tracking-tight text-[var(--text-primary)]",
+              level === 1 && "text-2xl",
+              level === 2 && "text-xl",
+              level === 3 && "text-lg",
+              level === 4 && "text-base"
+            ),
+            children: node.text
+          }
+        ),
+        node.meta && /* @__PURE__ */ jsx2("p", { className: "text-sm text-[var(--text-muted)]", children: node.meta })
+      ] });
+    }
+    case "text":
+      return /* @__PURE__ */ jsx2(
+        "p",
+        {
+          className: cn(
+            "text-sm leading-6 text-[var(--text-secondary)]",
+            node.tone === "muted" && "text-[var(--text-muted)]",
+            node.tone === "success" && "text-emerald-300",
+            node.tone === "warning" && "text-amber-200",
+            node.tone === "error" && "text-red-200",
+            node.mono && "font-[var(--font-mono)] text-[13px]"
+          ),
+          children: node.text
+        }
+      );
+    case "badge":
+      return /* @__PURE__ */ jsx2(Badge, { variant: node.tone ?? "outline", children: node.label });
+    case "stat":
+      return /* @__PURE__ */ jsx2(Card, { variant: "glass", className: "border-[var(--border-subtle)] shadow-[var(--shadow-card)]", children: /* @__PURE__ */ jsxs2(CardContent, { className: "space-y-2 p-4", children: [
+        /* @__PURE__ */ jsx2("div", { className: "text-xs uppercase tracking-[0.12em] text-[var(--text-muted)]", children: node.label }),
+        /* @__PURE__ */ jsx2("div", { className: "text-2xl font-semibold tracking-tight text-[var(--text-primary)]", children: node.value }),
+        node.change && /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: cn(
+              "text-xs",
+              node.tone === "success" && "text-emerald-300",
+              node.tone === "warning" && "text-amber-200",
+              node.tone === "error" && "text-red-200",
+              node.tone === "info" && "text-sky-200",
+              !node.tone || node.tone === "default" ? "text-[var(--text-muted)]" : void 0
+            ),
+            children: node.change
+          }
+        )
+      ] }) });
+    case "key_value":
+      return /* @__PURE__ */ jsx2("dl", { className: "grid gap-3 sm:grid-cols-2", children: node.items.map((item, index) => /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          className: "rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-4 py-3",
+          children: [
+            /* @__PURE__ */ jsx2("dt", { className: "text-[11px] uppercase tracking-[0.12em] text-[var(--text-muted)]", children: item.label }),
+            /* @__PURE__ */ jsx2(
+              "dd",
+              {
+                className: cn(
+                  "mt-1 text-sm font-medium text-[var(--text-primary)]",
+                  item.tone === "muted" && "text-[var(--text-secondary)]"
+                ),
+                children: formatValue(item.value)
+              }
+            )
+          ]
+        },
+        item.id ?? `${item.label}-${index}`
+      )) });
+    case "code":
+      return /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+        node.title && /* @__PURE__ */ jsx2("div", { className: "text-xs uppercase tracking-[0.12em] text-[var(--text-muted)]", children: node.title }),
+        /* @__PURE__ */ jsx2(
+          CodeBlock,
+          {
+            code: node.code,
+            language: node.language,
+            showLineNumbers: node.showLineNumbers,
+            className: "border-[var(--border-subtle)] bg-[var(--bg-input)]"
+          }
+        )
+      ] });
+    case "markdown":
+      return /* @__PURE__ */ jsx2("div", { className: "rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)] p-5", children: /* @__PURE__ */ jsx2(Markdown, { className: "prose-sm max-w-none", children: node.content }) });
+    case "table":
+      return /* @__PURE__ */ jsxs2("div", { className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)]", children: [
+        /* @__PURE__ */ jsxs2(Table, { children: [
+          /* @__PURE__ */ jsx2(TableHeader, { children: /* @__PURE__ */ jsx2(TableRow, { className: "border-[var(--border-subtle)]", children: node.columns.map((column) => /* @__PURE__ */ jsx2(
+            TableHead,
+            {
+              className: cn(
+                "h-10 text-[11px] uppercase tracking-[0.1em] text-[var(--text-muted)]",
+                column.align === "right" && "text-right"
+              ),
+              children: column.header
+            },
+            column.key
+          )) }) }),
+          /* @__PURE__ */ jsx2(TableBody, { children: node.rows.map((row, rowIndex) => /* @__PURE__ */ jsx2(TableRow, { className: "border-[var(--border-subtle)]", children: node.columns.map((column) => /* @__PURE__ */ jsx2(
+            TableCell,
+            {
+              className: cn(
+                "py-3 text-sm text-[var(--text-secondary)]",
+                column.align === "right" && "text-right tabular-nums"
+              ),
+              children: formatValue(row[column.key])
+            },
+            column.key
+          )) }, rowIndex)) })
+        ] }),
+        node.caption && /* @__PURE__ */ jsx2("div", { className: "border-t border-[var(--border-subtle)] px-4 py-2 text-xs text-[var(--text-muted)]", children: node.caption })
+      ] });
+    case "actions":
+      return renderActions(node.actions, onAction);
+    case "separator":
+      return /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx2("div", { className: "h-px flex-1 bg-[var(--border-subtle)]" }),
+        node.label && /* @__PURE__ */ jsx2("span", { className: "text-[10px] uppercase tracking-[0.14em] text-[var(--text-muted)]", children: node.label }),
+        /* @__PURE__ */ jsx2("div", { className: "h-px flex-1 bg-[var(--border-subtle)]" })
+      ] });
+    case "stack":
+      return /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: cn(
+            "flex",
+            node.direction === "row" ? "flex-row" : "flex-col",
+            GAP_STYLES[node.gap ?? "md"],
+            ALIGN_STYLES[node.align ?? "stretch"],
+            node.wrap && "flex-wrap"
+          ),
+          children: node.children.map((child, index) => /* @__PURE__ */ jsx2(Fragment, { children: renderNode(child, onAction) }, child.id ?? `${child.type}-${index}`))
+        }
+      );
+    case "grid":
+      return /* @__PURE__ */ jsx2("div", { className: cn("grid", GRID_STYLES[node.columns ?? 2], GAP_STYLES[node.gap ?? "md"]), children: node.children.map((child, index) => /* @__PURE__ */ jsx2(Fragment, { children: renderNode(child, onAction) }, child.id ?? `${child.type}-${index}`)) });
+    case "card":
+      return /* @__PURE__ */ jsxs2(Card, { variant: "glass", className: "border-[var(--border-subtle)] shadow-[var(--shadow-card)]", children: [
+        (node.eyebrow || node.title || node.description || node.badge || node.actions) && /* @__PURE__ */ jsxs2(CardHeader, { className: "gap-2 p-4 pb-0", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1 space-y-1", children: [
+              node.eyebrow && /* @__PURE__ */ jsx2("div", { className: "text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--text-muted)]", children: node.eyebrow }),
+              node.title && /* @__PURE__ */ jsx2(CardTitle, { className: "text-base text-[var(--text-primary)]", children: node.title }),
+              node.description && /* @__PURE__ */ jsx2(CardDescription, { className: "text-[var(--text-muted)]", children: node.description })
+            ] }),
+            node.badge && /* @__PURE__ */ jsx2(Badge, { variant: node.badge.tone ?? "outline", children: node.badge.label })
+          ] }),
+          node.actions && renderActions(node.actions, onAction)
+        ] }),
+        node.children && node.children.length > 0 && /* @__PURE__ */ jsx2(CardContent, { className: "space-y-4 p-4", children: node.children.map((child, index) => /* @__PURE__ */ jsx2(Fragment, { children: renderNode(child, onAction) }, child.id ?? `${child.type}-${index}`)) })
+      ] });
+  }
+}
+function OpenUIArtifactRenderer({
+  schema,
+  onAction,
+  className
+}) {
+  const nodes = Array.isArray(schema) ? schema : [schema];
+  if (nodes.length === 0) {
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: cn(
+          "flex h-full min-h-[16rem] items-center justify-center rounded-[var(--radius-xl)] border border-dashed border-[var(--border-subtle)] bg-[var(--bg-card)] p-6 text-center",
+          className
+        ),
+        children: /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx2("div", { className: "mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-[var(--bg-elevated)] text-[var(--text-muted)]", children: /* @__PURE__ */ jsx2(Minus, { className: "h-4 w-4" }) }),
+          /* @__PURE__ */ jsx2("div", { className: "text-sm font-medium text-[var(--text-primary)]", children: "No structured artifact payload" }),
+          /* @__PURE__ */ jsx2("div", { className: "text-sm text-[var(--text-muted)]", children: "Pass an OpenUI-like schema to render dynamic result panels with sandbox-ui primitives." })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: cn("space-y-4 p-4", className), children: [
+    nodes.map((node, index) => /* @__PURE__ */ jsx2(Fragment, { children: renderNode(node, onAction) }, node.id ?? `${node.type}-${index}`)),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-3 py-2 text-xs text-[var(--text-muted)]", children: [
+      /* @__PURE__ */ jsx2(ArrowRight, { className: "h-3.5 w-3.5" }),
+      "Structured artifact rendered through sandbox-ui primitives"
+    ] })
+  ] });
+}
+
+export {
+  CodeBlock,
+  InlineCode,
+  OpenUIArtifactRenderer
+};

package/dist/{chunk-4EIWPJMJ.js → chunk-ZP6GSX4D.js}

@@ -1,3 +1,6 @@
+import {
+  Progress
+} from "./chunk-FRGMMANX.js";
 import {
   Badge,
   Card,
@@ -5,12 +8,11 @@ import {
   CardDescription,
   CardFooter,
   CardHeader,
-  CardTitle,
-  Progress
-} from "./chunk-2UHPE5T7.js";
+  CardTitle
+} from "./chunk-MXCSSOGH.js";
 import {
   Button
-} from "./chunk-E6FS7R4X.js";
+} from "./chunk-HWLX5NME.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -19,9 +21,10 @@ import {
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var variantColors = {
   sandbox: {
-    accent: "text-purple-400",
-    accentBg: "bg-purple-500/10",
-    border: "border-purple-500/20"
+    accent: "text-[var(--accent-text)]",
+    accentBg: "bg-[var(--accent-surface-soft)]",
+    border: "border-[var(--border-accent)]",
+    progress: "bg-[image:var(--accent-gradient-strong)]"
   }
 };
 function formatCredits(value) {
@@ -123,7 +126,9 @@ function BillingDashboard({
   usage,
   onManageSubscription,
   onAddCredits,
-  variant = "sandbox"
+  variant = "sandbox",
+  className,
+  cardClassName
 }) {
   const colors = variantColors[variant];
   const totalCredits = balance.available + balance.used;
@@ -131,8 +136,8 @@ function BillingDashboard({
   const sortedModels = Object.entries(usage.byModel).sort(
     ([, a], [, b]) => b - a
   );
-  return /* @__PURE__ */ jsxs("div", { className: "grid gap-6 lg:grid-cols-3", children: [
-    /* @__PURE__ */ jsxs(Card, { variant, className: "lg:col-span-1", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("grid gap-6 lg:grid-cols-3", className), children: [
+    /* @__PURE__ */ jsxs(Card, { variant, className: cn("lg:col-span-1", cardClassName), children: [
       /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
           /* @__PURE__ */ jsx(CreditCardIcon, { className: colors.accent }),
@@ -173,7 +178,7 @@ function BillingDashboard({
         )
       ] }) })
     ] }),
-    /* @__PURE__ */ jsxs(Card, { variant, className: "lg:col-span-1", children: [
+    /* @__PURE__ */ jsxs(Card, { variant, className: cn("lg:col-span-1", cardClassName), children: [
       /* @__PURE__ */ jsxs(CardHeader, { children: [
         /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
           /* @__PURE__ */ jsx(CoinsIcon, { className: colors.accent }),
@@ -199,7 +204,7 @@ function BillingDashboard({
         /* @__PURE__ */ jsx(Button, { variant, className: "w-full", onClick: onAddCredits, children: "Add Credits" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs(Card, { variant, className: "lg:col-span-1", children: [
+    /* @__PURE__ */ jsxs(Card, { variant, className: cn("lg:col-span-1", cardClassName), children: [
       /* @__PURE__ */ jsxs(CardHeader, { children: [
         /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
           /* @__PURE__ */ jsx(ChartIcon, { className: colors.accent }),
@@ -227,7 +232,7 @@ function BillingDashboard({
                   {
                     className: cn(
                       "h-full rounded-full transition-all",
-                      variant === "sandbox" && "bg-purple-500"
+                      variant === "sandbox" && colors.progress
                     ),
                     style: { width: `${modelPercent}%` }
                   }
@@ -251,10 +256,10 @@ function BillingDashboard({
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var variantColors2 = {
   sandbox: {
-    accent: "text-purple-400",
-    border: "border-purple-500",
-    bg: "bg-purple-500/10",
-    ring: "ring-purple-500/50"
+    accent: "text-[var(--accent-text)]",
+    border: "border-[var(--border-accent)]",
+    bg: "bg-[var(--accent-surface-soft)]",
+    ring: "ring-[hsl(var(--primary)/0.35)]"
   }
 };
 function formatPrice(cents) {
@@ -294,10 +299,12 @@ function PricingPage({
   onBillingPeriodChange,
   onSelectTier,
   variant = "sandbox",
-  loading = false
+  loading = false,
+  className,
+  cardClassName
 }) {
   const colors = variantColors2[variant];
-  return /* @__PURE__ */ jsxs2("div", { className: "w-full space-y-8", children: [
+  return /* @__PURE__ */ jsxs2("div", { className: cn("w-full space-y-8", className), children: [
     /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-center gap-4", children: [
       /* @__PURE__ */ jsx2(
         "button",
@@ -337,6 +344,7 @@ function PricingPage({
           variant,
           className: cn(
             "relative flex flex-col",
+            cardClassName,
             tier.recommended && cn(colors.border, "border-2 ring-2", colors.ring),
             isCurrentTier && "ring-2 ring-offset-2 ring-offset-background",
             isCurrentTier && colors.ring
@@ -405,9 +413,9 @@ var variantColors3 = {
     text: "text-blue-400"
   },
   automateai: {
-    bar: "bg-gradient-to-t from-violet-600 to-violet-400",
-    barHover: "hover:from-violet-500 hover:to-violet-300",
-    text: "text-violet-400"
+    bar: "bg-[image:linear-gradient(to_top,var(--brand-purple),var(--brand-cool))]",
+    barHover: "hover:brightness-110",
+    text: "text-[var(--brand-purple)]"
   },
   tradingbots: {
     bar: "bg-gradient-to-t from-green-600 to-green-400",
@@ -415,9 +423,9 @@ var variantColors3 = {
     text: "text-green-400"
   },
   sandbox: {
-    bar: "bg-gradient-to-t from-purple-600 to-purple-400",
-    barHover: "hover:from-purple-500 hover:to-purple-300",
-    text: "text-purple-400"
+    bar: "bg-[image:var(--accent-gradient-strong)]",
+    barHover: "hover:brightness-110",
+    text: "text-[var(--accent-text)]"
   }
 };
 function formatDate2(dateStr) {
@@ -437,13 +445,14 @@ function UsageChart({
   data,
   title,
   unit,
-  variant = "agentrun"
+  variant = "agentrun",
+  className
 }) {
   const colors = variantColors3[variant];
   const maxValue = Math.max(...data.map((d) => d.value), 1);
   const total = data.reduce((sum, d) => sum + d.value, 0);
   const [hoveredIndex, setHoveredIndex] = React.useState(null);
-  return /* @__PURE__ */ jsxs3(Card, { children: [
+  return /* @__PURE__ */ jsxs3(Card, { className, children: [
     /* @__PURE__ */ jsxs3(CardHeader, { className: "flex flex-row items-center justify-between pb-2", children: [
       /* @__PURE__ */ jsx3(CardTitle, { className: "font-medium text-base", children: title }),
       /* @__PURE__ */ jsxs3("div", { className: "text-right", children: [

package/dist/dashboard.d.ts

@@ -1,111 +1,4 @@
-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 };
+export { A as AppSidebar, a as AppSidebarProps, B as Backend, b as BackendSelector, c as BackendSelectorProps, C as ClusterStatusBar, d as ClusterStatusBarProps, e as ClusterStatusItem, D as DashboardLayout, f as DashboardLayoutProps, v as DashboardProfile, g as DashboardUser, N as NavItem, h as NewSandboxCard, i as NewSandboxCardProps, w as ProductVariant, P as ProfileComparison, j as ProfileComparisonProps, k as ProfileSelector, l as ProfileSelectorProps, R as ResourceMeter, m as ResourceMeterProps, S as SandboxCard, n as SandboxCardData, o as SandboxCardProps, p as SandboxStatus, q as SandboxTable, r as SandboxTableProps, s as SidebarNavItem, t as SidebarSandbox, x as Variant, V as VariantList, u as VariantListProps, y as VariantOutcome, z as VariantStatus } from './index-BOjBJwzD.js';
+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-CY9xo3KX.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/dashboard.js

@@ -1,27 +1,40 @@
 import {
+  AppSidebar,
   BackendSelector,
+  ClusterStatusBar,
   DashboardLayout,
+  NewSandboxCard,
   ProfileComparison,
   ProfileSelector,
+  ResourceMeter,
+  SandboxCard,
+  SandboxTable,
   VariantList
-} from "./chunk-J4OADEUK.js";
+} from "./chunk-HY5IBRCE.js";
 import {
   BillingDashboard,
   PricingPage,
   UsageChart
-} from "./chunk-4EIWPJMJ.js";
+} from "./chunk-ZP6GSX4D.js";
 import "./chunk-OKCIKTXQ.js";
 import "./chunk-MCGKDCOR.js";
-import "./chunk-2UHPE5T7.js";
-import "./chunk-E6FS7R4X.js";
+import "./chunk-FRGMMANX.js";
+import "./chunk-MXCSSOGH.js";
+import "./chunk-HWLX5NME.js";
 import "./chunk-RQHJBTEU.js";
 export {
+  AppSidebar,
   BackendSelector,
   BillingDashboard,
+  ClusterStatusBar,
   DashboardLayout,
+  NewSandboxCard,
   PricingPage,
   ProfileComparison,
   ProfileSelector,
+  ResourceMeter,
+  SandboxCard,
+  SandboxTable,
   UsageChart,
   VariantList
 };