@tangle-network/sandbox-ui 0.6.1 → 0.9.0

package/dist/{chunk-OVNLOE3Y.js → chunk-PLTZB5BC.js}

@@ -5,11 +5,11 @@ import {
   TableHead,
   TableHeader,
   TableRow
-} from "./chunk-JP725R4W.js";
+} from "./chunk-34I7UFSX.js";
 import {
   CodeBlock,
   Markdown
-} from "./chunk-3HW53XTH.js";
+} from "./chunk-T7HMZEVO.js";
 import {
   Badge,
   Card,
@@ -17,10 +17,10 @@ import {
   CardDescription,
   CardHeader,
   CardTitle
-} from "./chunk-TDYQBLL5.js";
+} from "./chunk-ZMNSRDMH.js";
 import {
   Button
-} from "./chunk-TSE423UF.js";
+} from "./chunk-MKTSMWVD.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -32,7 +32,7 @@ function InlineCode({ className, children, ...props }) {
     "code",
     {
       className: cn(
-        "rounded border border-[var(--border-subtle)] bg-[var(--depth-2)] px-1.5 py-0.5 font-mono text-[0.85em] text-[var(--code-keyword)]",
+        "rounded border border-border bg-card px-1.5 py-0.5 font-mono text-[0.85em] text-[var(--code-keyword)]",
         className
       ),
       ...props,
@@ -64,7 +64,7 @@ var ALIGN_STYLES = {
 };
 function formatValue(value) {
   if (value === null || value === void 0) {
-    return /* @__PURE__ */ jsx2("span", { className: "text-[var(--text-muted)]", children: "\u2014" });
+    return /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground", children: "\u2014" });
   }
   if (typeof value === "boolean") {
     return value ? "Yes" : "No";
@@ -95,12 +95,12 @@ function renderNode(node, onAction) {
       const level = node.level ?? 2;
       const HeadingTag = `h${level}`;
       return /* @__PURE__ */ jsxs("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 }),
+        node.kicker && /* @__PURE__ */ jsx2("div", { className: "text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground", children: node.kicker }),
         /* @__PURE__ */ jsx2(
           HeadingTag,
           {
             className: cn(
-              "font-semibold tracking-tight text-[var(--text-primary)]",
+              "font-semibold tracking-tight text-foreground",
               level === 1 && "text-2xl",
               level === 2 && "text-xl",
               level === 3 && "text-lg",
@@ -109,7 +109,7 @@ function renderNode(node, onAction) {
             children: node.text
           }
         ),
-        node.meta && /* @__PURE__ */ jsx2("p", { className: "text-sm text-[var(--text-muted)]", children: node.meta })
+        node.meta && /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground", children: node.meta })
       ] });
     }
     case "text":
@@ -117,12 +117,12 @@ function renderNode(node, onAction) {
         "p",
         {
           className: cn(
-            "text-sm leading-6 text-[var(--text-secondary)]",
-            node.tone === "muted" && "text-[var(--text-muted)]",
+            "text-sm leading-6 text-foreground",
+            node.tone === "muted" && "text-muted-foreground",
             node.tone === "success" && "text-[var(--surface-success-text)]",
             node.tone === "warning" && "text-[var(--surface-warning-text)]",
             node.tone === "error" && "text-[var(--surface-danger-text)]",
-            node.mono && "font-[var(--font-mono)] text-[13px]"
+            node.mono && "font-mono text-[13px]"
           ),
           children: node.text
         }
@@ -130,9 +130,9 @@ function renderNode(node, onAction) {
     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__ */ jsxs(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 }),
+      return /* @__PURE__ */ jsx2(Card, { variant: "glass", className: "border-border shadow-[var(--shadow-card)]", children: /* @__PURE__ */ jsxs(CardContent, { className: "space-y-2 p-4", children: [
+        /* @__PURE__ */ jsx2("div", { className: "text-xs uppercase tracking-[0.12em] text-muted-foreground", children: node.label }),
+        /* @__PURE__ */ jsx2("div", { className: "text-2xl font-semibold tracking-tight text-foreground", children: node.value }),
         node.change && /* @__PURE__ */ jsx2(
           "div",
           {
@@ -142,7 +142,7 @@ function renderNode(node, onAction) {
               node.tone === "warning" && "text-[var(--surface-warning-text)]",
               node.tone === "error" && "text-[var(--surface-danger-text)]",
               node.tone === "info" && "text-[var(--surface-info-text)]",
-              !node.tone || node.tone === "default" ? "text-[var(--text-muted)]" : void 0
+              !node.tone || node.tone === "default" ? "text-muted-foreground" : void 0
             ),
             children: node.change
           }
@@ -152,15 +152,15 @@ function renderNode(node, onAction) {
       return /* @__PURE__ */ jsx2("dl", { className: "grid gap-3 sm:grid-cols-2", children: node.items.map((item, index) => /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-4 py-3",
+          className: "rounded-[var(--radius-lg)] border border-border 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("dt", { className: "text-[11px] uppercase tracking-[0.12em] text-muted-foreground", 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)]"
+                  "mt-1 text-sm font-medium text-foreground",
+                  item.tone === "muted" && "text-foreground"
                 ),
                 children: formatValue(item.value)
               }
@@ -171,38 +171,38 @@ function renderNode(node, onAction) {
       )) });
     case "code":
       return /* @__PURE__ */ jsxs("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 }),
+        node.title && /* @__PURE__ */ jsx2("div", { className: "text-xs uppercase tracking-[0.12em] text-muted-foreground", children: node.title }),
         /* @__PURE__ */ jsx2(
           CodeBlock,
           {
             code: node.code,
             language: node.language,
             showLineNumbers: node.showLineNumbers,
-            className: "border-[var(--border-subtle)] bg-[var(--bg-input)]"
+            className: "border-border bg-background"
           }
         )
       ] });
     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 }) });
+      return /* @__PURE__ */ jsx2("div", { className: "rounded-[var(--radius-lg)] border border-border bg-card p-5", children: /* @__PURE__ */ jsx2(Markdown, { className: "prose-sm max-w-none", children: node.content }) });
     case "table":
-      return /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)]", children: [
+      return /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-[var(--radius-lg)] border border-border bg-card", children: [
         /* @__PURE__ */ jsxs(Table, { children: [
-          /* @__PURE__ */ jsx2(TableHeader, { children: /* @__PURE__ */ jsx2(TableRow, { className: "border-[var(--border-subtle)]", children: node.columns.map((column) => /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx2(TableHeader, { children: /* @__PURE__ */ jsx2(TableRow, { className: "border-border", children: node.columns.map((column) => /* @__PURE__ */ jsx2(
             TableHead,
             {
               className: cn(
-                "h-10 text-[11px] uppercase tracking-[0.1em] text-[var(--text-muted)]",
+                "h-10 text-[11px] uppercase tracking-[0.1em] text-muted-foreground",
                 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(
+          /* @__PURE__ */ jsx2(TableBody, { children: node.rows.map((row, rowIndex) => /* @__PURE__ */ jsx2(TableRow, { className: "border-border", children: node.columns.map((column) => /* @__PURE__ */ jsx2(
             TableCell,
             {
               className: cn(
-                "py-3 text-sm text-[var(--text-secondary)]",
+                "py-3 text-sm text-foreground",
                 column.align === "right" && "text-right tabular-nums"
               ),
               children: formatValue(row[column.key])
@@ -210,15 +210,15 @@ function renderNode(node, onAction) {
             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 })
+        node.caption && /* @__PURE__ */ jsx2("div", { className: "border-t border-border px-4 py-2 text-xs text-muted-foreground", children: node.caption })
       ] });
     case "actions":
       return renderActions(node.actions, onAction);
     case "separator":
       return /* @__PURE__ */ jsxs("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)]" })
+        /* @__PURE__ */ jsx2("div", { className: "h-px flex-1 bg-border" }),
+        node.label && /* @__PURE__ */ jsx2("span", { className: "text-[10px] uppercase tracking-[0.14em] text-muted-foreground", children: node.label }),
+        /* @__PURE__ */ jsx2("div", { className: "h-px flex-1 bg-border" })
       ] });
     case "stack":
       return /* @__PURE__ */ jsx2(
@@ -237,13 +237,13 @@ function renderNode(node, onAction) {
     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__ */ jsxs(Card, { variant: "glass", className: "border-[var(--border-subtle)] shadow-[var(--shadow-card)]", children: [
+      return /* @__PURE__ */ jsxs(Card, { variant: "glass", className: "border-border shadow-[var(--shadow-card)]", children: [
         (node.eyebrow || node.title || node.description || node.badge || node.actions) && /* @__PURE__ */ jsxs(CardHeader, { className: "gap-2 p-4 pb-0", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
             /* @__PURE__ */ jsxs("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.eyebrow && /* @__PURE__ */ jsx2("div", { className: "text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground", children: node.eyebrow }),
+              node.title && /* @__PURE__ */ jsx2(CardTitle, { className: "text-base text-foreground", children: node.title }),
+              node.description && /* @__PURE__ */ jsx2(CardDescription, { className: "text-muted-foreground", children: node.description })
             ] }),
             node.badge && /* @__PURE__ */ jsx2(Badge, { variant: node.badge.tone ?? "outline", children: node.badge.label })
           ] }),
@@ -264,20 +264,20 @@ function OpenUIArtifactRenderer({
       "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",
+          "flex h-full min-h-[16rem] items-center justify-center rounded-[var(--radius-xl)] border border-dashed border-border bg-card p-6 text-center",
           className
         ),
         children: /* @__PURE__ */ jsxs("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." })
+          /* @__PURE__ */ jsx2("div", { className: "mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-muted/50 text-muted-foreground", children: /* @__PURE__ */ jsx2(Minus, { className: "h-4 w-4" }) }),
+          /* @__PURE__ */ jsx2("div", { className: "text-sm font-medium text-foreground", children: "No structured artifact payload" }),
+          /* @__PURE__ */ jsx2("div", { className: "text-sm text-muted-foreground", children: "Pass an OpenUI-like schema to render dynamic result panels with sandbox-ui primitives." })
         ] })
       }
     );
   }
   return /* @__PURE__ */ jsxs("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__ */ jsxs("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__ */ jsxs("div", { className: "flex items-center gap-2 rounded-[var(--radius-lg)] border border-border bg-card px-3 py-2 text-xs text-muted-foreground", children: [
       /* @__PURE__ */ jsx2(ArrowRight, { className: "h-3.5 w-3.5" }),
       "Structured artifact rendered through sandbox-ui primitives"
     ] })