@tangle-network/sandbox-ui 0.10.1 → 0.10.3

package/dist/styles.css

@@ -705,6 +705,9 @@
   .-top-1 {
     top: calc(var(--spacing) * -1);
   }
+  .-top-1\.5 {
+    top: calc(var(--spacing) * -1.5);
+  }
   .-top-4 {
     top: calc(var(--spacing) * -4);
   }
@@ -744,6 +747,9 @@
   .-right-1 {
     right: calc(var(--spacing) * -1);
   }
+  .-right-1\.5 {
+    right: calc(var(--spacing) * -1.5);
+  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
@@ -1164,9 +1170,6 @@
   .min-h-\[200px\] {
     min-height: 200px;
   }
-  .min-h-\[240px\] {
-    min-height: 240px;
-  }
   .min-h-full {
     min-height: 100%;
   }
@@ -1631,6 +1634,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .justify-start {
+    justify-content: flex-start;
+  }
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
@@ -2116,30 +2122,18 @@
       border-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
     }
   }
-  .border-t-blue-500 {
-    border-top-color: var(--color-blue-500);
-  }
   .border-t-transparent {
     border-top-color: transparent;
   }
   .bg-\[\#8E59FF\] {
     background-color: #8E59FF;
   }
-  .bg-\[\#27c93f\]\/80 {
-    background-color: color-mix(in oklab, #27c93f 80%, transparent);
-  }
   .bg-\[\#FEBC2E\] {
     background-color: #FEBC2E;
   }
   .bg-\[\#FF5F57\] {
     background-color: #FF5F57;
   }
-  .bg-\[\#ff5f56\]\/80 {
-    background-color: color-mix(in oklab, #ff5f56 80%, transparent);
-  }
-  .bg-\[\#ffbd2e\]\/80 {
-    background-color: color-mix(in oklab, #ffbd2e 80%, transparent);
-  }
   .bg-\[color\:color-mix\(in_srgb\,var\(--bg-card\)_94\%\,transparent\)\] {
     background-color: var(--bg-card);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2409,9 +2403,6 @@
   .bg-\[linear-gradient\(180deg\,rgba\(255\,255\,255\,0\.04\)\,transparent\)\] {
     background-image: linear-gradient(180deg,rgba(255,255,255,0.04),transparent);
   }
-  .bg-\[radial-gradient\(circle_at_top\,rgba\(173\,163\,255\,0\.05\)_0\,transparent_100\%\)\] {
-    background-image: radial-gradient(circle at top,rgba(173,163,255,0.05) 0,transparent 100%);
-  }
   .from-white\/5 {
     --tw-gradient-from: color-mix(in srgb, #fff 5%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2651,9 +2642,6 @@
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
-  .pl-3 {
-    padding-left: calc(var(--spacing) * 3);
-  }
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
@@ -4186,9 +4174,9 @@
       grid-column: span 1 / span 1;
     }
   }
-  .lg\:block {
+  .lg\:ml-\[var\(--sb-content-margin\,0px\)\] {
     @media (width >= 64rem) {
-      display: block;
+      margin-left: var(--sb-content-margin,0px);
     }
   }
   .lg\:flex {
@@ -4226,6 +4214,11 @@
       padding: calc(var(--spacing) * 4);
     }
   }
+  .lg\:px-8 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+  }
   .xl\:col-span-4 {
     @media (width >= 80rem) {
       grid-column: span 4 / span 4;

package/dist/{variant-list-BNwUOSgz.d.ts → variant-list-DHP2OXFE.d.ts}

@@ -16,8 +16,14 @@ declare function Sidebar({ children, className, style }: SidebarProps): react_js
 interface SidebarRailProps {
     children: React.ReactNode;
     className?: string;
-}
-declare function SidebarRail({ children, className }: SidebarRailProps): react_jsx_runtime.JSX.Element;
+    /**
+     * Render the rail at the wider mobile-drawer width so labels fit
+     * beside the icons. Defaults to the 64px icon-only rail used on
+     * desktop.
+     */
+    wide?: boolean;
+}
+declare function SidebarRail({ children, className, wide }: SidebarRailProps): react_jsx_runtime.JSX.Element;
 interface SidebarRailHeaderProps {
     children: React.ReactNode;
     className?: string;
@@ -46,8 +52,10 @@ interface RailButtonProps {
     badge?: number;
     onClick?: () => void;
     className?: string;
+    /** Show label text next to icon (for mobile drawer) */
+    showLabel?: boolean;
 }
-declare function RailButton({ icon: Icon, label, isActive, badge, onClick, className }: RailButtonProps): react_jsx_runtime.JSX.Element;
+declare function RailButton({ icon: Icon, label, isActive, badge, onClick, className, showLabel }: RailButtonProps): react_jsx_runtime.JSX.Element;
 interface RailModeButtonProps {
     mode: string;
     icon: React.ComponentType<{
@@ -56,8 +64,10 @@ interface RailModeButtonProps {
     label: string;
     badge?: number;
     className?: string;
+    /** Show label text next to icon (for mobile drawer) */
+    showLabel?: boolean;
 }
-declare function RailModeButton({ mode, icon, label, badge, className }: RailModeButtonProps): react_jsx_runtime.JSX.Element;
+declare function RailModeButton({ mode, icon, label, badge, className, showLabel }: RailModeButtonProps): react_jsx_runtime.JSX.Element;
 interface SidebarPanelProps {
     children: React.ReactNode;
     className?: string;
@@ -96,6 +106,12 @@ declare function ProfileAvatar({ user, isLoading, onLogout, onSettingsClick, set
 declare const SIDEBAR_RAIL_WIDTH = 64;
 declare const SIDEBAR_PANEL_WIDTH = 260;
 declare const SIDEBAR_TOTAL_WIDTH: number;
+/**
+ * Width of the mobile drawer when the rail is rendered with labels
+ * (`showLabel` on {@link RailButton}). The standard 64px rail is only
+ * wide enough for icons; labels need a wider container to avoid truncation.
+ */
+declare const SIDEBAR_MOBILE_WIDTH = 256;
 interface SidebarContextValue {
     /** Whether the content panel beside the rail is open */
     panelOpen: boolean;
@@ -389,4 +405,4 @@ interface VariantListProps {
 }
 declare function VariantList({ variants, selectedId, onSelect, onAccept, onReject, isActioning, className, }: VariantListProps): react_jsx_runtime.JSX.Element;
 
-export { type SidebarPanelProps as $, type RailSeparatorProps as A, type Backend as B, ClusterStatusBar as C, DashboardLayout as D, ResourceMeter as E, type ResourceMeterProps as F, SIDEBAR_RAIL_WIDTH as G, SIDEBAR_TOTAL_WIDTH as H, type Invoice as I, SandboxCard as J, type SandboxCardData as K, type SandboxCardProps as L, type SandboxStatus as M, type NavItem as N, SandboxTable as O, type PanelConfig as P, type SandboxTableProps as Q, RailButton as R, SIDEBAR_PANEL_WIDTH as S, Sidebar as T, SidebarContent as U, type SidebarContentProps as V, SidebarPanel as W, SidebarPanelContent as X, type SidebarPanelContentProps as Y, SidebarPanelHeader as Z, type SidebarPanelHeaderProps as _, BackendSelector as a, type SidebarProps as a0, SidebarProvider as a1, type SidebarProviderProps as a2, SidebarRail as a3, SidebarRailFooter as a4, type SidebarRailFooterProps as a5, SidebarRailHeader as a6, type SidebarRailHeaderProps as a7, SidebarRailNav as a8, type SidebarRailNavProps as a9, type SidebarRailProps as aa, type SidebarUser as ab, type TopNavLink as ac, VariantList as ad, type VariantListProps as ae, useSidebar as af, type Profile as ag, type PlanFeature as ah, type Variant as ai, type VariantOutcome as aj, type VariantStatus as ak, type BackendSelectorProps as b, type ClusterStatusBarProps as c, type ClusterStatusItem as d, CreditBalance as e, type CreditBalanceProps as f, type DashboardLayoutProps as g, type DashboardUser as h, InvoiceTable as i, type InvoiceTableProps as j, NewSandboxCard as k, type NewSandboxCardProps as l, type PlanCardData as m, PlanCards as n, type PlanCardsProps as o, type ProductVariant as p, ProfileAvatar as q, type ProfileAvatarProps as r, ProfileComparison as s, type ProfileComparisonProps as t, ProfileSelector as u, type ProfileSelectorProps as v, type RailButtonProps as w, RailModeButton as x, type RailModeButtonProps as y, RailSeparator as z };
+export { type SidebarPanelHeaderProps as $, type RailSeparatorProps as A, type Backend as B, ClusterStatusBar as C, DashboardLayout as D, ResourceMeter as E, type ResourceMeterProps as F, SIDEBAR_PANEL_WIDTH as G, SIDEBAR_RAIL_WIDTH as H, type Invoice as I, SIDEBAR_TOTAL_WIDTH as J, SandboxCard as K, type SandboxCardData as L, type SandboxCardProps as M, type NavItem as N, type SandboxStatus as O, type PanelConfig as P, SandboxTable as Q, RailButton as R, SIDEBAR_MOBILE_WIDTH as S, type SandboxTableProps as T, Sidebar as U, SidebarContent as V, type SidebarContentProps as W, SidebarPanel as X, SidebarPanelContent as Y, type SidebarPanelContentProps as Z, SidebarPanelHeader as _, BackendSelector as a, type SidebarPanelProps as a0, type SidebarProps as a1, SidebarProvider as a2, type SidebarProviderProps as a3, SidebarRail as a4, SidebarRailFooter as a5, type SidebarRailFooterProps as a6, SidebarRailHeader as a7, type SidebarRailHeaderProps as a8, SidebarRailNav as a9, type SidebarRailNavProps as aa, type SidebarRailProps as ab, type SidebarUser as ac, type TopNavLink as ad, VariantList as ae, type VariantListProps as af, useSidebar as ag, type Profile as ah, type PlanFeature as ai, type Variant as aj, type VariantOutcome as ak, type VariantStatus as al, type BackendSelectorProps as b, type ClusterStatusBarProps as c, type ClusterStatusItem as d, CreditBalance as e, type CreditBalanceProps as f, type DashboardLayoutProps as g, type DashboardUser as h, InvoiceTable as i, type InvoiceTableProps as j, NewSandboxCard as k, type NewSandboxCardProps as l, type PlanCardData as m, PlanCards as n, type PlanCardsProps as o, type ProductVariant as p, ProfileAvatar as q, type ProfileAvatarProps as r, ProfileComparison as s, type ProfileComparisonProps as t, ProfileSelector as u, type ProfileSelectorProps as v, type RailButtonProps as w, RailModeButton as x, type RailModeButtonProps as y, RailSeparator as z };

package/dist/workspace.d.ts

@@ -348,13 +348,11 @@ interface TaskBoardItem {
     tags?: string[];
     dueDate?: Date | null;
     assigneeId?: string | null;
-    /** Arbitrary metadata rendered by renderItemMeta */
     meta?: Record<string, unknown>;
 }
 interface TaskBoardColumn {
     id: string;
     label: string;
-    /** Tailwind border-top color class, e.g. "border-t-blue-500" */
     accent?: string;
 }
 interface TaskBoardProps {
@@ -363,27 +361,33 @@ interface TaskBoardProps {
     className?: string;
     onMoveItem?: (itemId: string, toColumnId: string) => void;
     onClickItem?: (item: TaskBoardItem) => void;
-    /** Render custom content inside each card below the title/description */
     renderItemMeta?: (item: TaskBoardItem) => ReactNode;
-    /** Render actions in the column header (e.g. "+" button) */
     renderColumnAction?: (column: TaskBoardColumn) => ReactNode;
-    /** Badge renderer for priority/tags — receives the raw value */
     renderBadge?: (value: string, type: "priority" | "tag") => ReactNode;
-    /** Empty state shown when a column has no items */
     columnEmptyState?: ReactNode;
-    /** Header slot above the board */
     header?: ReactNode;
-}
-/**
- * TaskBoard — flexible kanban board for task/work-item management.
- *
- * Renders items grouped by status into columns. Does NOT manage drag-drop
- * internally — consumers wire @hello-pangea/dnd or similar and call
- * onMoveItem. This keeps the component lightweight and DnD-library-agnostic.
- *
- * All visual customization happens through render props and slots.
- */
-declare function TaskBoard({ items, columns, className, onMoveItem, onClickItem, renderItemMeta, renderColumnAction, renderBadge, columnEmptyState, header, }: TaskBoardProps): react_jsx_runtime.JSX.Element;
+    /**
+     * Wrap each column's item list container. Use this to inject a DnD
+     * droppable zone (e.g. Droppable from @hello-pangea/dnd).
+     *
+     * Receives the column ID, the default item list element, and the column's items.
+     * Return a ReactNode that wraps/replaces the default element.
+     *
+     * If not provided, the default unstyled div is rendered.
+     */
+    renderColumnBody?: (columnId: string, defaultChildren: ReactNode, items: TaskBoardItem[]) => ReactNode;
+    /**
+     * Wrap each item card. Use this to inject a DnD draggable
+     * (e.g. Draggable from @hello-pangea/dnd).
+     *
+     * Receives the item, its index, and the default card element.
+     * Return a ReactNode that wraps/replaces the default element.
+     *
+     * If not provided, the default button card is rendered.
+     */
+    renderItemWrapper?: (item: TaskBoardItem, index: number, defaultCard: ReactNode) => ReactNode;
+}
+declare function TaskBoard({ items, columns, className, onMoveItem, onClickItem, renderItemMeta, renderColumnAction, renderBadge, columnEmptyState, header, renderColumnBody, renderItemWrapper, }: TaskBoardProps): react_jsx_runtime.JSX.Element;
 
 interface CalendarEvent {
     id: string;

package/dist/workspace.js

@@ -13,7 +13,7 @@ import {
   TaskBoard,
   TerminalPanel,
   WorkspaceLayout
-} from "./chunk-A5ALUT2B.js";
+} from "./chunk-HEXQVHXJ.js";
 import "./chunk-OEX7NZE3.js";
 import "./chunk-MA7YKRUP.js";
 import "./chunk-WKSGQVLI.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",