@tangle-network/sandbox-ui 0.4.0 → 0.5.1

package/dist/chunk-TDYQBLL5.js

@@ -0,0 +1,127 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/primitives/card.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Card = React.forwardRef(({ className, variant = "default", hover = false, ...props }, ref) => {
+  const variants = {
+    default: "bg-card border-[var(--border-default)]",
+    elevated: "bg-[var(--bg-elevated)] border-[var(--border-subtle)] shadow-[var(--shadow-card)]",
+    glass: "bg-[var(--depth-2)] border-[var(--border-subtle)] shadow-[var(--shadow-card)]",
+    sandbox: "bg-[var(--depth-3)] border-[var(--border-accent)] shadow-[var(--shadow-accent)]"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-[var(--radius-lg)] border text-card-foreground transition-[border-color,box-shadow]",
+        "duration-[var(--transition-default)]",
+        variants[variant],
+        hover && "cursor-pointer hover:border-[var(--border-hover)]",
+        className
+      ),
+      ...props
+    }
+  );
+});
+Card.displayName = "Card";
+var CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1 p-4", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "h3",
+  {
+    ref,
+    className: cn("font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    ref,
+    className: cn("text-muted-foreground text-sm", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-4 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+
+// src/primitives/badge.tsx
+import { cva } from "class-variance-authority";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var badgeVariants = cva(
+  "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 font-medium text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive: "border-transparent bg-destructive/15 border-destructive/25 text-destructive",
+        outline: "text-foreground border-border",
+        success: "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
+        warning: "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]",
+        error: "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]",
+        info: "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]",
+        sandbox: "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-[var(--accent-text)]",
+        /* Operational status variants */
+        running: "border-[var(--surface-teal-border)] bg-[var(--surface-teal-bg)] text-[var(--surface-teal-text)]",
+        creating: "border-[var(--surface-violet-border)] bg-[var(--surface-violet-bg)] text-[var(--surface-violet-text)]",
+        stopped: "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]",
+        warm: "border-[var(--surface-orange-border)] bg-[var(--surface-orange-bg)] text-[var(--surface-orange-text)]",
+        cold: "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]",
+        deleted: "border-[var(--surface-neutral-border)] bg-[var(--surface-neutral-bg)] text-[var(--surface-neutral-text)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var statusDotClass = {
+  running: "status-dot status-dot-running",
+  creating: "status-dot status-dot-creating",
+  stopped: "status-dot status-dot-stopped",
+  warm: "status-dot status-dot-warm",
+  cold: "status-dot status-dot-cold",
+  error: "status-dot status-dot-error",
+  deleted: "status-dot status-dot-deleted"
+};
+function Badge({ className, variant, dot, children, ...props }) {
+  const dotClass = dot && variant ? statusDotClass[variant] : null;
+  return /* @__PURE__ */ jsxs("div", { className: cn(badgeVariants({ variant }), className), ...props, children: [
+    dotClass && /* @__PURE__ */ jsx2("span", { className: dotClass, "aria-hidden": true }),
+    children
+  ] });
+}
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  badgeVariants,
+  Badge
+};

package/dist/{chunk-HWLX5NME.js → chunk-TSE423UF.js}

@@ -8,24 +8,24 @@ import { cva } from "class-variance-authority";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium text-sm transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium text-sm transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:scale-[0.98]",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 active:scale-[0.98]",
-        outline: "border border-border bg-transparent hover:bg-accent hover:text-accent-foreground active:scale-[0.98]",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 active:scale-[0.98]",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+        default: "bg-[var(--btn-primary-bg)] text-primary-foreground shadow-[var(--shadow-accent)] hover:bg-[var(--btn-primary-hover)] active:scale-[0.97] duration-[var(--transition-fast)]",
+        destructive: "bg-destructive/15 border border-destructive/25 text-destructive hover:bg-destructive/22 active:scale-[0.97] duration-[var(--transition-fast)]",
+        outline: "border border-[var(--border-default)] bg-transparent hover:bg-[var(--bg-hover)] hover:border-[var(--border-hover)] active:scale-[0.97] duration-[var(--transition-fast)]",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/70 active:scale-[0.97] duration-[var(--transition-fast)]",
+        ghost: "hover:bg-[var(--bg-hover)] hover:text-foreground duration-[var(--transition-fast)]",
         link: "text-primary underline-offset-4 hover:underline",
-        sandbox: "bg-[image:var(--accent-gradient-strong)] text-white shadow-[var(--shadow-accent)] hover:brightness-110 active:scale-[0.98]"
+        sandbox: "bg-[image:var(--accent-gradient-strong)] text-white shadow-[var(--shadow-accent)] hover:brightness-110 active:scale-[0.97] duration-[var(--transition-fast)]"
       },
       size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3 text-xs",
-        lg: "h-12 rounded-lg px-8 text-base",
-        xl: "h-14 rounded-xl px-10 text-lg",
-        icon: "h-10 w-10"
+        default: "h-[var(--control-height)] px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-11 rounded-lg px-7 text-sm",
+        xl: "h-13 rounded-xl px-9 text-base",
+        icon: "h-[var(--control-height)] w-[var(--control-height)]"
       }
     },
     defaultVariants: {

package/dist/{chunk-YDBXQQLC.js → chunk-VBWY44UU.js}

@@ -5,10 +5,11 @@ import {
   TableHead,
   TableHeader,
   TableRow
-} from "./chunk-TQN3VR4F.js";
+} from "./chunk-JP725R4W.js";
 import {
+  CodeBlock,
   Markdown
-} from "./chunk-LTFK464G.js";
+} from "./chunk-H5XYSFYE.js";
 import {
   Badge,
   Card,
@@ -16,68 +17,22 @@ import {
   CardDescription,
   CardHeader,
   CardTitle
-} from "./chunk-MXCSSOGH.js";
+} from "./chunk-TDYQBLL5.js";
 import {
   Button
-} from "./chunk-HWLX5NME.js";
+} from "./chunk-TSE423UF.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"
-      }
-    )
-  ] });
-}
+import { jsx } from "react/jsx-runtime";
 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: 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)]",
         className
       ),
       ...props,
@@ -89,7 +44,7 @@ function InlineCode({ className, children, ...props }) {
 // 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";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var GAP_STYLES = {
   sm: "gap-2",
   md: "gap-4",
@@ -139,7 +94,7 @@ function renderNode(node, onAction) {
     case "heading": {
       const level = node.level ?? 2;
       const HeadingTag = `h${level}`;
-      return /* @__PURE__ */ jsxs2("div", { className: "space-y-1", children: [
+      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 }),
         /* @__PURE__ */ jsx2(
           HeadingTag,
@@ -164,9 +119,9 @@ function renderNode(node, onAction) {
           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.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]"
           ),
           children: node.text
@@ -175,7 +130,7 @@ 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__ */ jsxs2(CardContent, { className: "space-y-2 p-4", children: [
+      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 }),
         node.change && /* @__PURE__ */ jsx2(
@@ -183,10 +138,10 @@ function renderNode(node, onAction) {
           {
             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 === "success" && "text-[var(--surface-success-text)]",
+              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
             ),
             children: node.change
@@ -194,7 +149,7 @@ function renderNode(node, onAction) {
         )
       ] }) });
     case "key_value":
-      return /* @__PURE__ */ jsx2("dl", { className: "grid gap-3 sm:grid-cols-2", children: node.items.map((item, index) => /* @__PURE__ */ jsxs2(
+      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",
@@ -215,7 +170,7 @@ function renderNode(node, onAction) {
         item.id ?? `${item.label}-${index}`
       )) });
     case "code":
-      return /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+      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 }),
         /* @__PURE__ */ jsx2(
           CodeBlock,
@@ -230,8 +185,8 @@ function renderNode(node, onAction) {
     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: [
+      return /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--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(
             TableHead,
             {
@@ -260,7 +215,7 @@ function renderNode(node, onAction) {
     case "actions":
       return renderActions(node.actions, onAction);
     case "separator":
-      return /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
+      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)]" })
@@ -282,10 +237,10 @@ 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__ */ 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: [
+      return /* @__PURE__ */ jsxs(Card, { variant: "glass", className: "border-[var(--border-subtle)] 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 })
@@ -312,7 +267,7 @@ function OpenUIArtifactRenderer({
           "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: [
+        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." })
@@ -320,9 +275,9 @@ function OpenUIArtifactRenderer({
       }
     );
   }
-  return /* @__PURE__ */ jsxs2("div", { className: cn("space-y-4 p-4", className), children: [
+  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__ */ 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__ */ 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__ */ jsx2(ArrowRight, { className: "h-3.5 w-3.5" }),
       "Structured artifact rendered through sandbox-ui primitives"
     ] })
@@ -330,7 +285,6 @@ function OpenUIArtifactRenderer({
 }
 
 export {
-  CodeBlock,
   InlineCode,
   OpenUIArtifactRenderer
 };

package/dist/{chunk-IW2JZCOC.js → chunk-WBQ7VULC.js}

@@ -57,7 +57,7 @@ var DropdownMenuSubTrigger = React2.forwardRef(({ className, inset, children, ..
     ref,
     className: cn(
       "flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none",
-      "focus:bg-accent data-[state=open]:bg-accent",
+      "focus:bg-accent data-[state=open]:bg-[var(--depth-3)]",
       inset && "pl-8",
       className
     ),
@@ -74,7 +74,7 @@ var DropdownMenuSubContent = React2.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-xl",
+      "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-[var(--border-subtle)] bg-[var(--depth-2)] p-1 text-[var(--text-primary)] shadow-[var(--shadow-card)]",
       "data-[state=closed]:animate-out data-[state=open]:animate-in",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -92,7 +92,7 @@ var DropdownMenuContent = React2.forwardRef(({ className, sideOffset = 4, ...pro
     ref,
     sideOffset,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-xl",
+      "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-[var(--border-subtle)] bg-[var(--depth-2)] p-1 text-[var(--text-primary)] shadow-[var(--shadow-card)]",
       "data-[state=closed]:animate-out data-[state=open]:animate-in",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -110,7 +110,7 @@ var DropdownMenuItem = React2.forwardRef(({ className, inset, ...props }, ref) =
     ref,
     className: cn(
       "relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors",
-      "focus:bg-accent focus:text-accent-foreground",
+      "focus:bg-[var(--depth-3)] focus:text-[var(--text-primary)]",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
@@ -125,7 +125,7 @@ var DropdownMenuCheckboxItem = React2.forwardRef(({ className, children, checked
     ref,
     className: cn(
       "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-colors",
-      "focus:bg-accent focus:text-accent-foreground",
+      "focus:bg-[var(--depth-3)] focus:text-[var(--text-primary)]",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
@@ -144,7 +144,7 @@ var DropdownMenuRadioItem = React2.forwardRef(({ className, children, ...props }
     ref,
     className: cn(
       "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-colors",
-      "focus:bg-accent focus:text-accent-foreground",
+      "focus:bg-[var(--depth-3)] focus:text-[var(--text-primary)]",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
@@ -173,7 +173,7 @@ var DropdownMenuSeparator = React2.forwardRef(({ className, ...props }, ref) =>
   DropdownMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-border", className),
+    className: cn("-mx-1 my-1 h-px bg-[var(--border-subtle)]", className),
     ...props
   }
 ));