@tangle-network/sandbox-ui 0.23.0 → 0.23.2

package/dist/{chunk-CB3KBKYN.js → chunk-MBYBQWRN.js}

@@ -17,7 +17,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from "@tangle-network/ui/primitives";
-import { Skeleton } from "@tangle-network/ui/primitives";
+import { Skeleton, useTheme } from "@tangle-network/ui/primitives";
 
 // src/dashboard/sidebar-context.tsx
 import * as React from "react";
@@ -142,6 +142,41 @@ function LogOutIcon({ className }) {
     /* @__PURE__ */ jsx2("line", { x1: "21", x2: "9", y1: "12", y2: "12" })
   ] });
 }
+function SunIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+    /* @__PURE__ */ jsx2("title", { children: "Light mode icon" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "4" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" })
+  ] });
+}
+function MoonIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+    /* @__PURE__ */ jsx2("title", { children: "Dark mode icon" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+  ] });
+}
+function RailThemeToggle({ className }) {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = React2.useState(false);
+  React2.useEffect(() => setMounted(true), []);
+  const isDark = mounted && (theme === "dark" || theme === "system" && typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches);
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      onClick: () => setTheme(isDark ? "light" : "dark"),
+      "aria-label": "Toggle theme",
+      title: isDark ? "Switch to light mode" : "Switch to dark mode",
+      className: cn(
+        "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors",
+        "hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+        className
+      ),
+      children: isDark ? /* @__PURE__ */ jsx2(SunIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx2(MoonIcon, { className: "h-4 w-4" })
+    }
+  );
+}
 function Sidebar({ children, className, style }) {
   const { panelOpen, hidden, hasPanels, railWidth } = useSidebar();
   return /* @__PURE__ */ jsx2(
@@ -174,20 +209,20 @@ function SidebarRail({ children, className, wide = false }) {
   );
 }
 function SidebarRailHeader({ children, className }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center justify-center border-b border-border", className), children });
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 shrink-0 items-center justify-center border-b border-border", 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 });
+  return /* @__PURE__ */ jsx2("nav", { className: cn("flex flex-col items-center gap-1 py-3 flex-1 min-h-0 overflow-y-auto", className), children });
 }
 function SidebarRailFooter({ children, className }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col items-center gap-1 pb-3", className), children });
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col items-center gap-1 pb-3 shrink-0", className), children });
 }
 function RailSeparator({ className }) {
   return /* @__PURE__ */ jsx2("div", { className: cn("my-2 h-px w-10 bg-[var(--md3-outline-variant)]", className) });
 }
 function RailButton({ icon: Icon, label, isActive, badge, onClick, className, showLabel, asChild, children }) {
   const classes = cn(
-    "group relative flex items-center justify-center rounded-xl transition-all duration-200",
+    "group relative flex shrink-0 items-center justify-center rounded-xl transition-all duration-200",
     showLabel ? "w-full justify-start px-3 h-11 gap-3" : "w-11 h-11 justify-center",
     "hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]",
     "active:scale-95",
@@ -289,13 +324,7 @@ function ProfileAvatar({
             user?.avatarUrl && /* @__PURE__ */ jsx2(AvatarImage, { src: user.avatarUrl, alt: "" }),
             /* @__PURE__ */ jsx2(AvatarFallback, { className: "text-[10px] bg-violet-500/20 text-violet-300", children: getInitials(user?.name, user?.email) })
           ] }),
-          showDetails && /* @__PURE__ */ jsx2("div", { className: "min-w-0 flex-1", children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx2(Skeleton, { className: "mb-1 h-3.5 w-20" }),
-            /* @__PURE__ */ jsx2(Skeleton, { className: "h-3 w-28" })
-          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx2("p", { className: "truncate text-sm font-medium text-foreground", children: user?.name ?? user?.email ?? "Not signed in" }),
-            user?.email && user?.name && /* @__PURE__ */ jsx2("p", { className: "truncate text-xs text-muted-foreground", children: user.email })
-          ] }) })
+          showDetails && /* @__PURE__ */ jsx2("div", { className: "min-w-0 flex-1", children: isLoading ? /* @__PURE__ */ jsx2(Skeleton, { className: "h-3.5 w-24" }) : /* @__PURE__ */ jsx2("p", { className: "truncate text-sm font-medium text-foreground", children: user?.name ?? user?.email ?? "Not signed in" }) })
         ]
       }
     ) }),
@@ -1562,6 +1591,7 @@ function SidebarLayoutInner({
   onSettingsClick,
   settingsHref,
   profileMenuItems,
+  showThemeToggle = false,
   railFooter,
   LinkComponent,
   hideBelow,
@@ -1603,19 +1633,29 @@ function SidebarLayoutInner({
         ) }),
         (railFooter !== void 0 || hasProfile) && /* @__PURE__ */ jsxs13(SidebarRailFooter, { className: cn("border-t border-border pt-2", railLabels && "items-stretch px-2"), children: [
           railFooter,
-          hasProfile && /* @__PURE__ */ jsx14(
-            ProfileAvatar,
-            {
-              user: user ?? void 0,
-              isLoading,
-              onLogout,
-              onSettingsClick,
-              settingsHref,
-              showDetails: railLabels,
-              LinkComponent: Link,
-              children: profileMenuItems
-            }
-          )
+          hasProfile && (() => {
+            const profile = /* @__PURE__ */ jsx14(
+              ProfileAvatar,
+              {
+                user: user ?? void 0,
+                isLoading,
+                onLogout,
+                onSettingsClick,
+                settingsHref,
+                showDetails: railLabels,
+                LinkComponent: Link,
+                children: profileMenuItems
+              }
+            );
+            if (!showThemeToggle) return profile;
+            return railLabels ? /* @__PURE__ */ jsxs13("div", { className: "flex w-full items-center gap-1", children: [
+              /* @__PURE__ */ jsx14("div", { className: "min-w-0 flex-1", children: profile }),
+              /* @__PURE__ */ jsx14(RailThemeToggle, {})
+            ] }) : /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-center gap-1", children: [
+              /* @__PURE__ */ jsx14(RailThemeToggle, {}),
+              profile
+            ] });
+          })()
         ] })
       ] }),
       panel != null && /* @__PURE__ */ jsx14(SidebarPanel, { children: panel })
@@ -2177,14 +2217,14 @@ function VariantList({
 
 // src/dashboard/system-logs.tsx
 import { Terminal as Terminal3 } from "lucide-react";
-import { useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState5 } from "react";
 import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 function SystemLogsViewer({ apiUrl, token, className }) {
-  const [logs, setLogs] = useState4([]);
-  const [error, setError] = useState4(null);
-  const [isFollowing, setIsFollowing] = useState4(true);
+  const [logs, setLogs] = useState5([]);
+  const [error, setError] = useState5(null);
+  const [isFollowing, setIsFollowing] = useState5(true);
   const scrollRef = useRef2(null);
-  useEffect2(() => {
+  useEffect3(() => {
     let timeoutId;
     let backoff = 2e3;
     const controller = new AbortController();
@@ -2220,7 +2260,7 @@ function SystemLogsViewer({ apiUrl, token, className }) {
       clearTimeout(timeoutId);
     };
   }, [apiUrl, token]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (isFollowing && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }

package/dist/dashboard.d.ts

@@ -535,6 +535,8 @@ interface SidebarLayoutProps {
     settingsHref?: string;
     /** Extra items rendered before settings/logout in the profile menu. */
     profileMenuItems?: React.ReactNode;
+    /** Render a light/dark theme switch in the profile menu (uses the shared `useTheme`). */
+    showThemeToggle?: boolean;
     /** Extra content in the rail footer, above the profile avatar. */
     railFooter?: React.ReactNode;
     LinkComponent?: React.ComponentType<any>;

package/dist/dashboard.js

@@ -47,7 +47,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-CB3KBKYN.js";
+} from "./chunk-MBYBQWRN.js";
 import {
   BillingDashboard,
   InfoPanel,

package/dist/globals.css

@@ -365,6 +365,9 @@
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
+  .bottom-2 {
+    bottom: calc(var(--spacing) * 2);
+  }
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
@@ -380,12 +383,18 @@
   .left-0\.5 {
     left: calc(var(--spacing) * 0.5);
   }
+  .left-1 {
+    left: calc(var(--spacing) * 1);
+  }
   .left-1\/2 {
     left: calc(1 / 2 * 100%);
   }
   .left-2 {
     left: calc(var(--spacing) * 2);
   }
+  .left-2\.5 {
+    left: calc(var(--spacing) * 2.5);
+  }
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
@@ -602,6 +611,9 @@
   .table {
     display: table;
   }
+  .aspect-\[9\/16\] {
+    aspect-ratio: 9/16;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -723,6 +735,9 @@
   .h-screen {
     height: 100vh;
   }
+  .max-h-40 {
+    max-height: calc(var(--spacing) * 40);
+  }
   .max-h-48 {
     max-height: calc(var(--spacing) * 48);
   }
@@ -777,6 +792,9 @@
   .min-h-\[44px\] {
     min-height: 44px;
   }
+  .min-h-\[60px\] {
+    min-height: 60px;
+  }
   .min-h-\[72px\] {
     min-height: 72px;
   }
@@ -792,6 +810,9 @@
   .min-h-\[200px\] {
     min-height: 200px;
   }
+  .min-h-\[300px\] {
+    min-height: 300px;
+  }
   .min-h-full {
     min-height: 100%;
   }
@@ -1065,6 +1086,9 @@
   .min-w-4 {
     min-width: calc(var(--spacing) * 4);
   }
+  .min-w-40 {
+    min-width: calc(var(--spacing) * 40);
+  }
   .min-w-\[8rem\] {
     min-width: 8rem;
   }
@@ -1614,6 +1638,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-l-2 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 2px;
+  }
   .border-dashed {
     --tw-border-style: dashed;
     border-style: dashed;
@@ -1931,6 +1959,9 @@
       background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
     }
   }
+  .bg-black {
+    background-color: var(--color-black);
+  }
   .bg-black\/40 {
     background-color: color-mix(in srgb, #000 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2039,6 +2070,12 @@
       background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
     }
   }
+  .bg-white\/40 {
+    background-color: color-mix(in srgb, #fff 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 40%, transparent);
+    }
+  }
   .bg-yellow-500 {
     background-color: var(--color-yellow-500);
   }
@@ -2078,6 +2115,9 @@
   .object-contain {
     object-fit: contain;
   }
+  .object-cover {
+    object-fit: cover;
+  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
@@ -2270,6 +2310,9 @@
   .pt-16 {
     padding-top: calc(var(--spacing) * 16);
   }
+  .pr-1 {
+    padding-right: calc(var(--spacing) * 1);
+  }
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
@@ -2309,6 +2352,9 @@
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
+  .pl-3 {
+    padding-left: calc(var(--spacing) * 3);
+  }
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
@@ -2678,6 +2724,9 @@
   .text-blue-400 {
     color: var(--color-blue-400);
   }
+  .text-blue-500 {
+    color: var(--color-blue-500);
+  }
   .text-emerald-400 {
     color: var(--color-emerald-400);
   }
@@ -2735,6 +2784,9 @@
   .italic {
     font-style: italic;
   }
+  .not-italic {
+    font-style: normal;
+  }
   .tabular-nums {
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
@@ -2758,6 +2810,9 @@
   .opacity-30 {
     opacity: 30%;
   }
+  .opacity-40 {
+    opacity: 40%;
+  }
   .opacity-50 {
     opacity: 50%;
   }
@@ -3204,6 +3259,16 @@
       }
     }
   }
+  .hover\:bg-black\/60 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #000 60%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-blue-600\/30 {
     &:hover {
       @media (hover: hover) {
@@ -3224,6 +3289,16 @@
       }
     }
   }
+  .hover\:bg-green-600\/5 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(62.7% 0.194 149.214) 5%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-green-600) 5%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-green-600\/30 {
     &:hover {
       @media (hover: hover) {
@@ -3282,6 +3357,13 @@
       }
     }
   }
+  .hover\:text-green-600 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-green-600);
+      }
+    }
+  }
   .hover\:underline {
     &:hover {
       @media (hover: hover) {
@@ -3607,6 +3689,11 @@
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
+  .sm\:grid-cols-3 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
   .sm\:grid-cols-4 {
     @media (width >= 40rem) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -3793,6 +3880,11 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
+  .xl\:grid-cols-5 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
   .dark\:text-neutral-500 {
     @media (prefers-color-scheme: dark) {
       color: var(--color-neutral-500);

package/dist/index.js

@@ -189,7 +189,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-CB3KBKYN.js";
+} from "./chunk-MBYBQWRN.js";
 import {
   BillingDashboard,
   InfoPanel,

package/dist/styles.css

@@ -365,6 +365,9 @@
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
+  .bottom-2 {
+    bottom: calc(var(--spacing) * 2);
+  }
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
@@ -380,12 +383,18 @@
   .left-0\.5 {
     left: calc(var(--spacing) * 0.5);
   }
+  .left-1 {
+    left: calc(var(--spacing) * 1);
+  }
   .left-1\/2 {
     left: calc(1 / 2 * 100%);
   }
   .left-2 {
     left: calc(var(--spacing) * 2);
   }
+  .left-2\.5 {
+    left: calc(var(--spacing) * 2.5);
+  }
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
@@ -602,6 +611,9 @@
   .table {
     display: table;
   }
+  .aspect-\[9\/16\] {
+    aspect-ratio: 9/16;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -723,6 +735,9 @@
   .h-screen {
     height: 100vh;
   }
+  .max-h-40 {
+    max-height: calc(var(--spacing) * 40);
+  }
   .max-h-48 {
     max-height: calc(var(--spacing) * 48);
   }
@@ -777,6 +792,9 @@
   .min-h-\[44px\] {
     min-height: 44px;
   }
+  .min-h-\[60px\] {
+    min-height: 60px;
+  }
   .min-h-\[72px\] {
     min-height: 72px;
   }
@@ -792,6 +810,9 @@
   .min-h-\[200px\] {
     min-height: 200px;
   }
+  .min-h-\[300px\] {
+    min-height: 300px;
+  }
   .min-h-full {
     min-height: 100%;
   }
@@ -1065,6 +1086,9 @@
   .min-w-4 {
     min-width: calc(var(--spacing) * 4);
   }
+  .min-w-40 {
+    min-width: calc(var(--spacing) * 40);
+  }
   .min-w-\[8rem\] {
     min-width: 8rem;
   }
@@ -1614,6 +1638,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-l-2 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 2px;
+  }
   .border-dashed {
     --tw-border-style: dashed;
     border-style: dashed;
@@ -1931,6 +1959,9 @@
       background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
     }
   }
+  .bg-black {
+    background-color: var(--color-black);
+  }
   .bg-black\/40 {
     background-color: color-mix(in srgb, #000 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2039,6 +2070,12 @@
       background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
     }
   }
+  .bg-white\/40 {
+    background-color: color-mix(in srgb, #fff 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 40%, transparent);
+    }
+  }
   .bg-yellow-500 {
     background-color: var(--color-yellow-500);
   }
@@ -2078,6 +2115,9 @@
   .object-contain {
     object-fit: contain;
   }
+  .object-cover {
+    object-fit: cover;
+  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
@@ -2270,6 +2310,9 @@
   .pt-16 {
     padding-top: calc(var(--spacing) * 16);
   }
+  .pr-1 {
+    padding-right: calc(var(--spacing) * 1);
+  }
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
@@ -2309,6 +2352,9 @@
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
+  .pl-3 {
+    padding-left: calc(var(--spacing) * 3);
+  }
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
@@ -2678,6 +2724,9 @@
   .text-blue-400 {
     color: var(--color-blue-400);
   }
+  .text-blue-500 {
+    color: var(--color-blue-500);
+  }
   .text-emerald-400 {
     color: var(--color-emerald-400);
   }
@@ -2735,6 +2784,9 @@
   .italic {
     font-style: italic;
   }
+  .not-italic {
+    font-style: normal;
+  }
   .tabular-nums {
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
@@ -2758,6 +2810,9 @@
   .opacity-30 {
     opacity: 30%;
   }
+  .opacity-40 {
+    opacity: 40%;
+  }
   .opacity-50 {
     opacity: 50%;
   }
@@ -3204,6 +3259,16 @@
       }
     }
   }
+  .hover\:bg-black\/60 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #000 60%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-blue-600\/30 {
     &:hover {
       @media (hover: hover) {
@@ -3224,6 +3289,16 @@
       }
     }
   }
+  .hover\:bg-green-600\/5 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(62.7% 0.194 149.214) 5%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-green-600) 5%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-green-600\/30 {
     &:hover {
       @media (hover: hover) {
@@ -3282,6 +3357,13 @@
       }
     }
   }
+  .hover\:text-green-600 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-green-600);
+      }
+    }
+  }
   .hover\:underline {
     &:hover {
       @media (hover: hover) {
@@ -3607,6 +3689,11 @@
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
+  .sm\:grid-cols-3 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
   .sm\:grid-cols-4 {
     @media (width >= 40rem) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -3793,6 +3880,11 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
+  .xl\:grid-cols-5 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
   .dark\:text-neutral-500 {
     @media (prefers-color-scheme: dark) {
       color: var(--color-neutral-500);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.23.0",
+  "version": "0.23.2",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -90,6 +90,10 @@
       "import": "./dist/utils.js",
       "types": "./dist/utils.d.ts"
     },
+    "./assets": {
+      "import": "./dist/assets.js",
+      "types": "./dist/assets.d.ts"
+    },
     "./styles": "./dist/styles.css",
     "./globals.css": "./dist/globals.css",
     "./tokens.css": "./dist/tokens.css",