@tangle-network/sandbox-ui 0.6.1 → 0.8.4

package/dist/{chunk-565V6JTN.js → chunk-UXQMIR3D.js}

@@ -1,18 +1,17 @@
 import {
   Progress
-} from "./chunk-YYGECNZZ.js";
+} from "./chunk-66EZOYZR.js";
 import {
   Badge,
   Card,
   CardContent,
   CardDescription,
-  CardFooter,
   CardHeader,
   CardTitle
-} from "./chunk-TDYQBLL5.js";
+} from "./chunk-ZMNSRDMH.js";
 import {
   Button
-} from "./chunk-TSE423UF.js";
+} from "./chunk-2QZ6G7NM.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -253,44 +252,10 @@ function BillingDashboard({
 }
 
 // src/dashboard/pricing-page.tsx
+import { Check, Zap } from "lucide-react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var variantColors2 = {
-  sandbox: {
-    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) {
-  return (cents / 100).toLocaleString("en-US", {
-    style: "currency",
-    currency: "USD",
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 0
-  });
-}
-function CheckIcon({ className }) {
-  return /* @__PURE__ */ jsxs2(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 20 20",
-      fill: "currentColor",
-      className: cn("h-5 w-5", className),
-      children: [
-        /* @__PURE__ */ jsx2("title", { children: "Check icon" }),
-        /* @__PURE__ */ jsx2(
-          "path",
-          {
-            fillRule: "evenodd",
-            d: "M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z",
-            clipRule: "evenodd"
-          }
-        )
-      ]
-    }
-  );
+  return `$${Math.round(cents / 100)}`;
 }
 function PricingPage({
   tiers,
@@ -298,22 +263,23 @@ function PricingPage({
   billingPeriod,
   onBillingPeriodChange,
   onSelectTier,
-  variant = "sandbox",
   loading = false,
-  className,
-  cardClassName
+  className
 }) {
-  const colors2 = variantColors2[variant];
-  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: [
+  const tiersWithRecommended = tiers.map((tier, i) => ({
+    ...tier,
+    recommended: tier.recommended ?? (tiers.length === 3 && i === 1)
+  }));
+  return /* @__PURE__ */ jsxs2("div", { className: cn("w-full space-y-10", className), children: [
+    /* @__PURE__ */ jsx2("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs2("div", { className: "inline-flex items-center rounded-full border border-border bg-muted/50 p-1", children: [
       /* @__PURE__ */ jsx2(
         "button",
         {
           type: "button",
           onClick: () => onBillingPeriodChange("monthly"),
           className: cn(
-            "rounded-lg px-4 py-2 font-medium text-sm transition-all",
-            billingPeriod === "monthly" ? cn("bg-muted text-foreground", colors2.ring, "ring-2") : "text-muted-foreground hover:text-foreground"
+            "rounded-full px-5 py-2 text-sm font-medium transition-all",
+            billingPeriod === "monthly" ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
           ),
           children: "Monthly"
         }
@@ -324,77 +290,72 @@ function PricingPage({
           type: "button",
           onClick: () => onBillingPeriodChange("yearly"),
           className: cn(
-            "rounded-lg px-4 py-2 font-medium text-sm transition-all",
-            billingPeriod === "yearly" ? cn("bg-muted text-foreground", colors2.ring, "ring-2") : "text-muted-foreground hover:text-foreground"
+            "rounded-full px-5 py-2 text-sm font-medium transition-all",
+            billingPeriod === "yearly" ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
           ),
           children: [
             "Yearly",
-            /* @__PURE__ */ jsx2("span", { className: cn("ml-2 text-xs", colors2.accent), children: "Save 20%" })
+            /* @__PURE__ */ jsx2("span", { className: "ml-2 rounded-full bg-[var(--surface-success-bg)] px-2 py-0.5 text-[10px] font-bold text-[var(--surface-success-text)]", children: "Save 20%" })
           ]
         }
       )
-    ] }),
-    /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", children: tiers.map((tier) => {
+    ] }) }),
+    /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-1 gap-6 lg:grid-cols-3 items-start", children: tiersWithRecommended.map((tier) => {
       const isCurrentTier = tier.id === currentTierId;
+      const isRecommended = tier.recommended;
+      const isFree = tier.monthlyPriceCents === 0;
       const price = billingPeriod === "yearly" && tier.yearlyPriceCents !== void 0 ? tier.yearlyPriceCents : tier.monthlyPriceCents;
       const displayPrice = billingPeriod === "yearly" ? Math.round(price / 12) : price;
       return /* @__PURE__ */ jsxs2(
-        Card,
+        "div",
         {
-          variant,
           className: cn(
-            "relative flex flex-col",
-            cardClassName,
-            tier.recommended && cn(colors2.border, "border-2 ring-2", colors2.ring),
-            isCurrentTier && "ring-2 ring-offset-2 ring-offset-background",
-            isCurrentTier && colors2.ring
+            "relative flex flex-col rounded-2xl border transition-all",
+            isRecommended ? "border-primary shadow-[var(--shadow-glow)] scale-[1.02] z-10" : "border-border hover:border-primary/30"
           ),
           children: [
-            tier.recommended && /* @__PURE__ */ jsx2("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx2(Badge, { variant, children: "Recommended" }) }),
-            isCurrentTier && /* @__PURE__ */ jsx2("div", { className: "absolute -top-3 right-4", children: /* @__PURE__ */ jsx2(Badge, { variant: "secondary", children: "Current Plan" }) }),
-            /* @__PURE__ */ jsxs2(CardHeader, { className: "text-center", children: [
-              /* @__PURE__ */ jsx2(CardTitle, { className: "text-xl", children: tier.name }),
-              /* @__PURE__ */ jsx2(CardDescription, { children: tier.description })
-            ] }),
-            /* @__PURE__ */ jsxs2(CardContent, { className: "flex-1 space-y-6", children: [
-              /* @__PURE__ */ jsxs2("div", { className: "text-center", children: [
-                /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline justify-center gap-1", children: [
-                  /* @__PURE__ */ jsx2("span", { className: cn("font-bold text-4xl", colors2.accent), children: formatPrice(displayPrice) }),
-                  /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground", children: "/mo" })
+            isRecommended && /* @__PURE__ */ jsx2("div", { className: "absolute -top-4 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-primary px-4 py-1.5 text-xs font-bold text-primary-foreground shadow-sm", children: [
+              /* @__PURE__ */ jsx2(Zap, { className: "h-3 w-3" }),
+              "Most Popular"
+            ] }) }),
+            isCurrentTier && !isRecommended && /* @__PURE__ */ jsx2("div", { className: "absolute -top-4 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx2("span", { className: "inline-flex items-center rounded-full bg-muted border border-border px-4 py-1.5 text-xs font-bold text-foreground", children: "Current Plan" }) }),
+            /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col p-8", isRecommended && "pt-10"), children: [
+              /* @__PURE__ */ jsxs2("div", { className: "mb-6", children: [
+                /* @__PURE__ */ jsx2("h3", { className: "text-lg font-bold text-foreground", children: tier.name }),
+                /* @__PURE__ */ jsx2("p", { className: "mt-1 text-sm text-muted-foreground", children: tier.description })
+              ] }),
+              /* @__PURE__ */ jsxs2("div", { className: "mb-8", children: [
+                /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-1", children: [
+                  /* @__PURE__ */ jsx2("span", { className: cn("text-5xl font-extrabold tracking-tight", isRecommended ? "text-primary" : "text-foreground"), children: isFree ? "Free" : formatPrice(displayPrice) }),
+                  !isFree && /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground text-sm font-medium", children: "/mo" })
                 ] }),
-                billingPeriod === "yearly" && tier.yearlyPriceCents !== void 0 && /* @__PURE__ */ jsxs2("p", { className: "mt-1 text-muted-foreground text-sm", children: [
+                billingPeriod === "yearly" && tier.yearlyPriceCents !== void 0 && !isFree && /* @__PURE__ */ jsxs2("p", { className: "mt-1 text-xs text-muted-foreground", children: [
                   formatPrice(tier.yearlyPriceCents),
                   " billed annually"
                 ] })
               ] }),
-              tier.creditsPerMonth !== void 0 && /* @__PURE__ */ jsxs2("div", { className: cn("rounded-lg p-3 text-center", colors2.bg), children: [
-                /* @__PURE__ */ jsx2("span", { className: cn("font-semibold", colors2.accent), children: tier.creditsPerMonth.toLocaleString() }),
-                /* @__PURE__ */ jsxs2("span", { className: "text-muted-foreground text-sm", children: [
-                  " ",
-                  "credits/month"
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx2("ul", { className: "space-y-3", children: tier.features.map((feature) => /* @__PURE__ */ jsxs2("li", { className: "flex items-start gap-3", children: [
-                /* @__PURE__ */ jsx2(
-                  CheckIcon,
-                  {
-                    className: cn("mt-0.5 shrink-0", colors2.accent)
-                  }
-                ),
-                /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground text-sm", children: feature })
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onSelectTier(tier.id),
+                  disabled: isCurrentTier || loading,
+                  className: cn(
+                    "w-full rounded-xl py-3 text-sm font-bold transition-all active:scale-[0.98] disabled:opacity-50",
+                    isRecommended ? "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm" : isCurrentTier ? "bg-muted text-muted-foreground border border-border cursor-default" : "bg-card text-foreground border border-border hover:border-primary/50 hover:bg-muted"
+                  ),
+                  children: isCurrentTier ? "Current Plan" : isFree ? "Get Started" : "Subscribe"
+                }
+              ),
+              /* @__PURE__ */ jsx2("div", { className: "my-8 border-t border-border" }),
+              /* @__PURE__ */ jsx2("ul", { className: "space-y-3.5 flex-1", children: tier.features.map((feature) => /* @__PURE__ */ jsxs2("li", { className: "flex items-start gap-3", children: [
+                /* @__PURE__ */ jsx2("div", { className: cn(
+                  "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full",
+                  isRecommended ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
+                ), children: /* @__PURE__ */ jsx2(Check, { className: "h-3 w-3" }) }),
+                /* @__PURE__ */ jsx2("span", { className: "text-sm text-foreground/80", children: feature })
               ] }, feature)) })
-            ] }),
-            /* @__PURE__ */ jsx2(CardFooter, { children: /* @__PURE__ */ jsx2(
-              Button,
-              {
-                variant: isCurrentTier ? "outline" : variant,
-                className: "w-full",
-                disabled: isCurrentTier || loading,
-                loading,
-                onClick: () => onSelectTier(tier.id),
-                children: isCurrentTier ? "Current Plan" : currentTierId ? "Upgrade" : "Subscribe"
-              }
-            ) })
+            ] })
           ]
         },
         tier.id

package/dist/{chunk-XTPAWK7L.js → chunk-VOUV7GGB.js}

@@ -8,10 +8,10 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger
-} from "./chunk-WBQ7VULC.js";
+} from "./chunk-34A66VBG.js";
 import {
   Button
-} from "./chunk-TSE423UF.js";
+} from "./chunk-2QZ6G7NM.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -165,57 +165,35 @@ function AuthHeader({
 }
 
 // src/auth/login-layout.tsx
-import { BookOpen, HelpCircle, Terminal } from "lucide-react";
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Terminal } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function LoginLayout({
-  brandName = "Tangle Sandbox",
-  tagline,
-  subtitle = "Step into the next generation of sandboxed cloud infrastructure. Precise, ethereal, and designed for high-performance development.",
-  terminalLines = [
-    "Initializing secure environment...",
-    "DONE  Encrypted bridge established.",
-    "Awaiting user authentication..."
-  ],
-  footerLinks = [
-    { label: "Documentation", href: "/docs" },
-    { label: "Support", href: "/support" }
-  ],
+  title = "Welcome Back",
+  subtitle = "Sign in to your workspace.",
+  brandIcon,
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxs2("div", { className: cn("bg-[var(--depth-1)] text-[var(--text-primary)] font-sans overflow-hidden", className), children: [
-    /* @__PURE__ */ jsx2("div", { className: "fixed inset-0 z-0 overflow-hidden pointer-events-none", children: /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 opacity-[0.04]", style: { backgroundImage: "radial-gradient(var(--brand-cool) 1px, transparent 1px)", backgroundSize: "40px 40px" } }) }),
-    /* @__PURE__ */ jsxs2("main", { className: "relative z-10 flex flex-col md:flex-row h-screen", children: [
-      /* @__PURE__ */ jsxs2("section", { className: "hidden md:flex flex-col justify-between p-12 lg:p-20 w-1/2 h-full", children: [
-        /* @__PURE__ */ jsx2("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx2("div", { className: "w-10 h-10 bg-[var(--accent-surface-soft)] border border-[var(--border-accent)] rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx2(Terminal, { className: "h-5 w-5 text-[var(--brand-cool)]" }) }),
-          /* @__PURE__ */ jsx2("span", { className: "text-2xl font-extrabold tracking-tighter text-[var(--text-primary)]", children: brandName })
-        ] }) }),
-        /* @__PURE__ */ jsxs2("div", { className: "max-w-lg space-y-6", children: [
-          tagline ? /* @__PURE__ */ jsx2("div", { className: "text-5xl lg:text-7xl font-bold tracking-tight leading-none text-[var(--text-primary)]", children: tagline }) : /* @__PURE__ */ jsxs2("h1", { className: "text-5xl lg:text-7xl font-bold tracking-tight leading-none", children: [
-            "Orchestrate ",
-            /* @__PURE__ */ jsx2("br", {}),
-            /* @__PURE__ */ jsx2("span", { className: "text-[var(--brand-cool)]", children: "Agents" }),
-            " in Flow."
-          ] }),
-          /* @__PURE__ */ jsx2("p", { className: "text-[var(--text-muted)] text-lg leading-relaxed font-light", children: subtitle }),
-          /* @__PURE__ */ jsxs2("div", { className: "mt-12 bg-[var(--depth-2)] rounded-xl border border-[var(--border-subtle)] overflow-hidden", children: [
-            /* @__PURE__ */ jsx2("div", { className: "bg-[var(--depth-1)] border-b border-[var(--border-subtle)] px-4 py-2 flex items-center gap-2", children: /* @__PURE__ */ jsx2("span", { className: "font-mono text-xs text-[var(--text-muted)]", children: "tangle --init-node" }) }),
-            /* @__PURE__ */ jsx2("div", { className: "p-6 font-mono text-xs space-y-2", children: terminalLines.map((line, i) => /* @__PURE__ */ jsxs2("div", { className: "flex gap-4", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-[var(--brand-cool)] opacity-60", children: String(i + 1).padStart(2, "0") }),
-              line.startsWith("DONE") ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-                /* @__PURE__ */ jsx2("span", { className: "text-[var(--code-success)]", children: "DONE" }),
-                /* @__PURE__ */ jsx2("span", { className: "text-[var(--text-primary)]", children: line.replace("DONE  ", "") })
-              ] }) : /* @__PURE__ */ jsx2("span", { className: "text-[var(--text-secondary)]", children: line })
-            ] }, i)) })
-          ] })
+  return /* @__PURE__ */ jsxs2("div", { className: cn("relative flex min-h-screen items-center justify-center bg-[var(--md3-background)] overflow-hidden antialiased font-sans flex-col", className), children: [
+    /* @__PURE__ */ jsxs2("div", { className: "pointer-events-none absolute inset-0 z-0 overflow-hidden", children: [
+      /* @__PURE__ */ jsx2("div", { className: "absolute top-1/4 -right-1/4 h-[800px] w-[800px] rounded-full bg-[var(--md3-primary)] opacity-10 blur-[150px] mix-blend-screen" }),
+      /* @__PURE__ */ jsx2("div", { className: "absolute -bottom-1/4 -left-1/4 h-[800px] w-[800px] rounded-full bg-[var(--md3-primary-dim)] opacity-20 blur-[150px] mix-blend-screen" }),
+      /* @__PURE__ */ jsx2("div", { className: "absolute left-1/2 top-1/2 h-[600px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.03)_0%,transparent_100%)] blur-[50px]" }),
+      /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTIwIDB2MjBIMFYweiIgZmlsbD0ibm9uZSIvPPHBhdGggZD0iTTE5LjUgMEwxOS41IDIwTTIwIC41TDAgLjVIMjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsIDI1NSLCAyNTUsIDAuMDMpIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=')] opacity-30", style: { maskImage: "radial-gradient(circle at center, black, transparent)", WebkitMaskImage: "radial-gradient(circle at center, black 40%, transparent 100%)" } })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "z-10 w-full max-w-md px-6 animate-in flex flex-col items-center", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "mb-10 text-center flex flex-col items-center", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "inline-flex h-16 w-16 mb-4 items-center justify-center rounded-2xl glass-panel shadow-[0_0_30px_rgba(173,163,255,0.15)] glow-primary relative", children: [
+          /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.1)_0,transparent_100%)] pointer-events-none rounded-2xl" }),
+          brandIcon || /* @__PURE__ */ jsx2(Terminal, { className: "h-8 w-8 text-[var(--md3-primary)]" })
         ] }),
-        /* @__PURE__ */ jsx2("nav", { className: "flex gap-8 text-sm font-medium text-[var(--text-muted)]", children: footerLinks.map((link) => /* @__PURE__ */ jsxs2("a", { href: link.href, className: "hover:text-[var(--brand-cool)] transition-colors flex items-center gap-2", children: [
-          link.label === "Documentation" ? /* @__PURE__ */ jsx2(BookOpen, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx2(HelpCircle, { className: "h-4 w-4" }),
-          link.label
-        ] }, link.href)) })
+        /* @__PURE__ */ jsx2("h1", { className: "text-3xl font-bold tracking-tight text-foreground", children: title }),
+        /* @__PURE__ */ jsx2("p", { className: "mt-2 text-[var(--md3-on-surface-variant)]", children: subtitle })
       ] }),
-      /* @__PURE__ */ jsx2("section", { className: "w-full md:w-1/2 flex items-center justify-center p-6 lg:p-24 relative", children: /* @__PURE__ */ jsx2("div", { className: "w-full max-w-md bg-[var(--depth-2)] rounded-[2rem] p-8 lg:p-12 shadow-2xl border border-[var(--border-subtle)]", children }) })
+      /* @__PURE__ */ jsxs2("div", { className: "w-full glass-panel-heavy p-8 border border-border shadow-sm relative overflow-hidden backdrop-blur-3xl rounded-[32px]", children: [
+        /* @__PURE__ */ jsx2("div", { className: "absolute inset-x-0 top-0 h-[1px] bg-gradient-to-r from-transparent via-[var(--md3-primary)] to-transparent opacity-50" }),
+        children
+      ] })
     ] })
   ] });
 }

package/dist/{chunk-OVNLOE3Y.js → chunk-WXK43R62.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-2QZ6G7NM.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"
     ] })