@tangle-network/sandbox-ui 0.5.1 → 0.5.2

package/dist/{chunk-7DVFZEVW.js → chunk-STHB4N22.js}

@@ -158,7 +158,7 @@ function Sidebar({ children, className }) {
     {
       "data-sidebar": "true",
       className: cn(
-        "fixed inset-y-0 left-0 z-40 flex bg-sidebar border-r border-sidebar-border transition-[transform,width] duration-200 ease-in-out",
+        "fixed inset-y-0 left-0 z-40 flex bg-[var(--depth-1)] border-r border-[var(--border-subtle)] transition-[transform,width] duration-200 ease-in-out",
         hidden && "-translate-x-full",
         className
       ),
@@ -168,10 +168,10 @@ function Sidebar({ children, className }) {
   );
 }
 function SidebarRail({ children, className }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col h-full w-16 shrink-0", className), children });
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col h-full w-16 shrink-0 bg-[var(--depth-2)]", className), children });
 }
 function SidebarRailHeader({ children, className }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center justify-center border-b border-sidebar-border", className), children });
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center justify-center border-b border-[var(--border-subtle)]", className), children });
 }
 function SidebarRailNav({ children, className }) {
   return /* @__PURE__ */ jsx2("nav", { className: cn("flex flex-col items-center gap-1 py-3 flex-1", className), children });
@@ -180,7 +180,7 @@ function SidebarRailFooter({ children, className }) {
   return /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col items-center gap-1 pb-3", className), children });
 }
 function RailSeparator({ className }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("my-2 h-px w-10 bg-sidebar-border", className) });
+  return /* @__PURE__ */ jsx2("div", { className: cn("my-2 h-px w-10 bg-[var(--border-subtle)]", className) });
 }
 function RailButton({ icon: Icon2, label, isActive, badge, onClick, className }) {
   return /* @__PURE__ */ jsxs(
@@ -190,17 +190,21 @@ function RailButton({ icon: Icon2, label, isActive, badge, onClick, className })
       onClick,
       title: label,
       className: cn(
-        "relative flex items-center justify-center w-10 h-10 rounded-lg transition-all duration-150",
-        "hover:bg-sidebar-accent/80 hover:text-sidebar-accent-foreground",
+        "group relative flex flex-col items-center justify-center gap-0.5 w-12 h-12 rounded-lg transition-all duration-150",
+        "hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]",
         "active:scale-95",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
-        isActive && "bg-sidebar-accent text-sidebar-accent-foreground",
-        !isActive && "text-sidebar-foreground/70",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]",
+        isActive && "bg-[var(--accent-surface-strong)] text-[var(--accent-text)] shadow-[0_0_12px_-2px_rgba(130,99,255,0.3)]",
+        !isActive && "text-[var(--text-muted)]",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx2(Icon2, { className: "h-5 w-5" }),
-        badge !== void 0 && badge > 0 && /* @__PURE__ */ jsx2("span", { className: "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-sidebar-primary text-[10px] font-medium text-white px-1", children: badge > 99 ? "99+" : badge })
+        /* @__PURE__ */ jsx2(Icon2, { className: "h-[18px] w-[18px]" }),
+        /* @__PURE__ */ jsx2("span", { className: cn(
+          "text-[9px] leading-none font-medium tracking-tight truncate max-w-[44px]",
+          isActive ? "text-[var(--accent-text)]" : "text-[var(--text-dim)] group-hover:text-[var(--accent-text)]"
+        ), children: label }),
+        badge !== void 0 && badge > 0 && /* @__PURE__ */ jsx2("span", { className: "absolute -top-0.5 -right-0.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-[var(--brand-primary)] text-[8px] font-medium text-white px-0.5", children: badge > 99 ? "99+" : badge })
       ]
     }
   );
@@ -225,7 +229,7 @@ function SidebarPanel({ children, className }) {
     "div",
     {
       className: cn(
-        "transition-[opacity] duration-150 h-full overflow-hidden border-l border-sidebar-border",
+        "transition-[opacity] duration-150 h-full overflow-hidden border-l border-[var(--border-subtle)] bg-[var(--depth-1)]",
         panelOpen ? "w-[260px] opacity-100" : "w-0 opacity-0 pointer-events-none",
         className
       ),
@@ -234,7 +238,7 @@ function SidebarPanel({ children, className }) {
   );
 }
 function SidebarPanelHeader({ children, title, className }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center px-4 border-b border-sidebar-border shrink-0", className), children: children ?? /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold text-sidebar-foreground", children: title }) });
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center px-4 border-b border-[var(--border-subtle)] shrink-0", className), children: children ?? /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold text-[var(--text-primary)]", children: title }) });
 }
 function SidebarPanelContent({ children, className }) {
   return /* @__PURE__ */ jsx2("div", { className: cn("flex-1 overflow-y-auto px-2 py-2", className), children });
@@ -267,8 +271,8 @@ function ProfileAvatar({
       {
         type: "button",
         className: cn(
-          "flex items-center justify-center w-10 h-10 rounded-lg transition-colors hover:bg-sidebar-accent",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+          "flex items-center justify-center w-12 h-12 rounded-lg transition-colors hover:bg-[var(--accent-surface-soft)]",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]",
           className
         ),
         "aria-label": "User menu",

package/dist/dashboard.js

@@ -30,7 +30,7 @@ import {
   SidebarRailNav,
   VariantList,
   useSidebar
-} from "./chunk-7DVFZEVW.js";
+} from "./chunk-STHB4N22.js";
 import {
   BillingDashboard,
   PricingPage,

package/dist/index.js

@@ -210,7 +210,7 @@ import {
   SidebarRailNav,
   VariantList,
   useSidebar
-} from "./chunk-7DVFZEVW.js";
+} from "./chunk-STHB4N22.js";
 import {
   BillingDashboard,
   PricingPage,

package/dist/tokens.css

@@ -84,6 +84,16 @@
   --error: var(--hsl-destructive);
   --info: var(--hsl-info);
 
+  /* Sidebar tokens */
+  --sidebar-background: 248 52% 5%;
+  --sidebar-foreground: 244 20% 94%;
+  --sidebar-primary: 247 100% 61%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 245 28% 21%;
+  --sidebar-accent-foreground: 240 16% 92%;
+  --sidebar-border: 236 16% 18%;
+  --sidebar-ring: 247 100% 61%;
+
   /* Depth scale — Tangle deep indigo surfaces */
   --depth-1: #08071A;
   --depth-2: #131228;
@@ -323,6 +333,16 @@
   --surface-neutral-border: var(--border-subtle);
   --surface-neutral-text: var(--text-muted);
 
+  /* Sidebar — light */
+  --sidebar-background: 210 17% 97%;
+  --sidebar-foreground: 210 20% 10%;
+  --sidebar-primary: 248 100% 35%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 210 20% 92%;
+  --sidebar-accent-foreground: 210 20% 10%;
+  --sidebar-border: 214 18% 88%;
+  --sidebar-ring: 248 100% 35%;
+
   --mesh-teal: rgba(44, 140, 134, 0.04);
   --mesh-violet: rgba(74, 58, 255, 0.03);
   --mesh-blue: rgba(29, 111, 164, 0.03);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -88,6 +88,7 @@
     },
     "./styles": "./dist/styles.css",
     "./globals.css": "./dist/globals.css",
+    "./tokens.css": "./dist/tokens.css",
     "./tailwind": "./tailwind.config.cjs"
   },
   "files": [

package/tailwind.config.cjs

@@ -88,6 +88,17 @@ module.exports = {
         // MD3 inverse tokens
         "inverse-surface": "var(--md3-inverse-surface)",
         "inverse-primary": "var(--md3-inverse-primary)",
+        // Sidebar
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
       },
       borderRadius: {
         lg: "var(--radius)",