@tangle-network/sandbox-ui 0.2.2 → 0.3.3

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,5 +1,5 @@
 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';
+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 * as React from 'react';
 
 type ProductVariant = "sandbox";
@@ -27,10 +27,13 @@ interface DashboardLayoutProps {
     onLogout?: () => void;
     onSettingsClick?: () => void;
     settingsHref?: string;
+    className?: string;
+    sidebarClassName?: string;
+    contentClassName?: 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;
+declare function DashboardLayout({ children, variant, navItems, activeNavId, user, isLoading, onLogout, onSettingsClick, settingsHref, className, sidebarClassName, contentClassName, LinkComponent, }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
 
 interface Backend {
     type: string;

package/dist/dashboard.js

@@ -4,16 +4,17 @@ import {
   ProfileComparison,
   ProfileSelector,
   VariantList
-} from "./chunk-J4OADEUK.js";
+} from "./chunk-OM6ON27W.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 {
   BackendSelector,

package/dist/{expanded-tool-detail-OkXGqTHe.d.ts → expanded-tool-detail-BDi_h_dZ.d.ts}

@@ -3,7 +3,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { R as Run } from './run-CtFZ6s-D.js';
 import { a as SessionPart, b as ToolPart, R as ReasoningPart } from './parts-CyGkM6Fp.js';
 import { A as AgentBranding } from './branding-DCi5VEik.js';
-import { C as CustomToolRenderer } from './tool-display-BvsVW_Ur.js';
+import { C as CustomToolRenderer } from './tool-display-Ct9nFAzJ.js';
 
 interface RunGroupProps {
     run: Run;
@@ -17,27 +17,34 @@ interface RunGroupProps {
  * Collapsible container for a consecutive group of assistant messages (a "run").
  * Shows a summary header with stats and renders tool/thinking/text parts.
  */
-declare const RunGroup: React.MemoExoticComponent<({ run, partMap, collapsed, onToggle, branding, renderToolDetail, }: RunGroupProps) => react_jsx_runtime.JSX.Element>;
+declare const RunGroup: React.MemoExoticComponent<({ run, partMap, collapsed, onToggle, branding, renderToolDetail, }: RunGroupProps) => react_jsx_runtime.JSX.Element | null>;
 
 interface InlineToolItemProps {
     part: ToolPart;
     renderToolDetail?: CustomToolRenderer;
+    groupPosition?: "single" | "first" | "middle" | "last";
+    className?: string;
+    contentClassName?: string;
 }
 /**
  * Compact single-line tool call display (32px height).
  * Shows icon, title, description, duration, and status indicator.
  * Expands on click to show ExpandedToolDetail.
  */
-declare const InlineToolItem: React.MemoExoticComponent<({ part, renderToolDetail }: InlineToolItemProps) => react_jsx_runtime.JSX.Element>;
+declare const InlineToolItem: React.MemoExoticComponent<({ part, renderToolDetail, groupPosition, className, contentClassName, }: InlineToolItemProps) => react_jsx_runtime.JSX.Element>;
 
 interface InlineThinkingItemProps {
     part: ReasoningPart;
+    defaultOpen?: boolean;
+    autoCollapse?: boolean;
+    className?: string;
+    contentClassName?: string;
 }
 /**
  * Minimal collapsible display for thinking/reasoning parts.
  * Shows "Thinking..." with optional preview text and duration.
  */
-declare const InlineThinkingItem: React.MemoExoticComponent<({ part }: InlineThinkingItemProps) => react_jsx_runtime.JSX.Element>;
+declare const InlineThinkingItem: React.MemoExoticComponent<({ part, defaultOpen, autoCollapse, className, contentClassName, }: InlineThinkingItemProps) => react_jsx_runtime.JSX.Element>;
 
 interface ExpandedToolDetailProps {
     part: ToolPart;

package/dist/file-tabs-CmaoDVBI.d.ts

@@ -0,0 +1,72 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface ArtifactPaneProps {
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    meta?: ReactNode;
+    headerActions?: ReactNode;
+    tabs?: ReactNode;
+    toolbar?: ReactNode;
+    footer?: ReactNode;
+    emptyState?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    contentClassName?: string;
+}
+/**
+ * ArtifactPane — shared frame for files, previews, documents, inspectors, and
+ * other artifact-like surfaces inside sandbox applications.
+ */
+declare function ArtifactPane({ eyebrow, title, subtitle, meta, headerActions, tabs, toolbar, footer, emptyState, children, className, contentClassName, }: ArtifactPaneProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * FileTree — directory browser with file type icons.
+ *
+ * Renders a hierarchical file system view. Clicking a file
+ * triggers onSelect with the full path.
+ */
+interface FileNode {
+    name: string;
+    path: string;
+    type: "file" | "directory";
+    children?: FileNode[];
+    size?: number;
+    mimeType?: string;
+}
+interface FileTreeProps {
+    root: FileNode;
+    selectedPath?: string;
+    onSelect?: (path: string, node: FileNode) => void;
+    className?: string;
+    defaultExpanded?: boolean;
+    visibility?: FileTreeVisibilityOptions;
+}
+interface FileTreeVisibilityOptions {
+    hiddenPaths?: string[];
+    hiddenPathPrefixes?: string[];
+    isVisible?: (node: FileNode) => boolean;
+}
+declare function filterFileTree(root: FileNode, visibility?: FileTreeVisibilityOptions): FileNode | null;
+declare function FileTree({ root, selectedPath, onSelect, className, defaultExpanded, visibility, }: FileTreeProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * FileTabs — tab bar for open files in the preview panel.
+ */
+interface FileTabData {
+    id: string;
+    name: string;
+    path: string;
+    dirty?: boolean;
+}
+interface FileTabsProps {
+    tabs: FileTabData[];
+    activeId?: string;
+    onSelect: (id: string) => void;
+    onClose: (id: string) => void;
+    className?: string;
+}
+declare function FileTabs({ tabs, activeId, onSelect, onClose, className }: FileTabsProps): react_jsx_runtime.JSX.Element | null;
+
+export { ArtifactPane as A, type FileNode as F, type ArtifactPaneProps as a, type FileTabData as b, FileTabs as c, type FileTabsProps as d, FileTree as e, type FileTreeProps as f, type FileTreeVisibilityOptions as g, filterFileTree as h };