@tangle-network/sandbox-ui 0.9.0 → 0.10.1

package/dist/styles.css

@@ -720,6 +720,9 @@
   .top-0\.5 {
     top: calc(var(--spacing) * 0.5);
   }
+  .top-1 {
+    top: calc(var(--spacing) * 1);
+  }
   .top-1\/2 {
     top: calc(1 / 2 * 100%);
   }
@@ -735,12 +738,18 @@
   .top-\[50\%\] {
     top: 50%;
   }
+  .top-full {
+    top: 100%;
+  }
   .-right-1 {
     right: calc(var(--spacing) * -1);
   }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
+  .right-1 {
+    right: calc(var(--spacing) * 1);
+  }
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
@@ -1116,8 +1125,8 @@
   .max-h-\[90vh\] {
     max-height: 90vh;
   }
-  .max-h-\[120px\] {
-    max-height: 120px;
+  .max-h-\[160px\] {
+    max-height: 160px;
   }
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
@@ -1125,6 +1134,9 @@
   .min-h-\[2px\] {
     min-height: 2px;
   }
+  .min-h-\[6rem\] {
+    min-height: 6rem;
+  }
   .min-h-\[12rem\] {
     min-height: 12rem;
   }
@@ -1134,8 +1146,14 @@
   .min-h-\[16rem\] {
     min-height: 16rem;
   }
-  .min-h-\[32px\] {
-    min-height: 32px;
+  .min-h-\[42px\] {
+    min-height: 42px;
+  }
+  .min-h-\[72px\] {
+    min-height: 72px;
+  }
+  .min-h-\[80px\] {
+    min-height: 80px;
   }
   .min-h-\[120px\] {
     min-height: 120px;
@@ -1149,6 +1167,9 @@
   .min-h-\[240px\] {
     min-height: 240px;
   }
+  .min-h-full {
+    min-height: 100%;
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -1359,8 +1380,8 @@
   .max-w-\[75\%\] {
     max-width: 75%;
   }
-  .max-w-\[82\%\] {
-    max-width: 82%;
+  .max-w-\[78\%\] {
+    max-width: 78%;
   }
   .max-w-\[85\%\] {
     max-width: 85%;
@@ -1407,6 +1428,15 @@
   .min-w-\[8rem\] {
     min-width: 8rem;
   }
+  .min-w-\[20px\] {
+    min-width: 20px;
+  }
+  .min-w-\[120px\] {
+    min-width: 120px;
+  }
+  .min-w-\[160px\] {
+    min-width: 160px;
+  }
   .min-w-\[180px\] {
     min-width: 180px;
   }
@@ -1480,6 +1510,9 @@
   .rotate-90 {
     rotate: 90deg;
   }
+  .rotate-180 {
+    rotate: 180deg;
+  }
   .-skew-x-12 {
     --tw-skew-x: skewX(calc(12deg * -1));
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
@@ -1532,6 +1565,9 @@
   .appearance-none {
     appearance: none;
   }
+  .auto-rows-fr {
+    grid-auto-rows: minmax(0, 1fr);
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -1541,6 +1577,9 @@
   .grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+  .grid-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
   .grid-cols-12 {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
@@ -1628,6 +1667,9 @@
   .gap-\[3px\] {
     gap: 3px;
   }
+  .gap-\[5px\] {
+    gap: 5px;
+  }
   .gap-px {
     gap: 1px;
   }
@@ -1789,12 +1831,21 @@
   .rounded-\[16px\] {
     border-radius: 16px;
   }
+  .rounded-\[18px\] {
+    border-radius: 18px;
+  }
   .rounded-\[20px\] {
     border-radius: 20px;
   }
+  .rounded-\[22px\] {
+    border-radius: 22px;
+  }
   .rounded-\[24px\] {
     border-radius: 24px;
   }
+  .rounded-\[26px\] {
+    border-radius: 26px;
+  }
   .rounded-\[28px\] {
     border-radius: 28px;
   }
@@ -1804,9 +1855,6 @@
   .rounded-\[calc\(var\(--radius-xl\)\+2px\)\] {
     border-radius: calc(var(--radius-xl) + 2px);
   }
-  .rounded-\[var\(--chat-send-radius\,var\(--radius-lg\)\)\] {
-    border-radius: var(--chat-send-radius,var(--radius-lg));
-  }
   .rounded-\[var\(--radius-full\)\] {
     border-radius: var(--radius-full);
   }
@@ -1860,8 +1908,8 @@
     border-bottom-right-radius: var(--radius-sm);
     border-bottom-left-radius: var(--radius-sm);
   }
-  .rounded-br-\[var\(--radius-sm\)\] {
-    border-bottom-right-radius: var(--radius-sm);
+  .rounded-br-\[12px\] {
+    border-bottom-right-radius: 12px;
   }
   .rounded-bl-lg {
     border-bottom-left-radius: var(--radius-lg);
@@ -1886,6 +1934,10 @@
     border-top-style: var(--tw-border-style);
     border-top-width: 0px;
   }
+  .border-t-2 {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 2px;
+  }
   .border-r {
     border-right-style: var(--tw-border-style);
     border-right-width: 1px;
@@ -1920,6 +1972,9 @@
   .border-\[var\(--border-accent\,transparent\)\] {
     border-color: var(--border-accent,transparent);
   }
+  .border-\[var\(--border-subtle\)\] {
+    border-color: var(--border-subtle);
+  }
   .border-\[var\(--border-subtle\,hsl\(var\(--border\)\)\)\] {
     border-color: var(--border-subtle,hsl(var(--border)));
   }
@@ -2061,6 +2116,9 @@
       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;
   }
@@ -2082,12 +2140,21 @@
   .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)) {
+      background-color: color-mix(in srgb,var(--bg-card) 94%,transparent);
+    }
+  }
   .bg-\[var\(--accent-surface-soft\)\] {
     background-color: var(--accent-surface-soft);
   }
   .bg-\[var\(--accent-surface-strong\)\] {
     background-color: var(--accent-surface-strong);
   }
+  .bg-\[var\(--bg-card\)\] {
+    background-color: var(--bg-card);
+  }
   .bg-\[var\(--bg-root\)\] {
     background-color: var(--bg-root);
   }
@@ -2410,6 +2477,9 @@
   .px-0 {
     padding-inline: calc(var(--spacing) * 0);
   }
+  .px-0\.5 {
+    padding-inline: calc(var(--spacing) * 0.5);
+  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
@@ -2425,6 +2495,9 @@
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
+  .px-3\.5 {
+    padding-inline: calc(var(--spacing) * 3.5);
+  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -2479,12 +2552,18 @@
   .py-5 {
     padding-block: calc(var(--spacing) * 5);
   }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
   .py-16 {
     padding-block: calc(var(--spacing) * 16);
   }
+  .py-20 {
+    padding-block: calc(var(--spacing) * 20);
+  }
   .py-\[2px\] {
     padding-block: 2px;
   }
@@ -2668,9 +2747,6 @@
   .text-\[13px\] {
     font-size: 13px;
   }
-  .text-\[14px\] {
-    font-size: 14px;
-  }
   .text-\[15px\] {
     font-size: 15px;
   }
@@ -2684,6 +2760,10 @@
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
   }
+  .leading-6\.5 {
+    --tw-leading: calc(var(--spacing) * 6.5);
+    line-height: calc(var(--spacing) * 6.5);
+  }
   .leading-7 {
     --tw-leading: calc(var(--spacing) * 7);
     line-height: calc(var(--spacing) * 7);
@@ -2857,8 +2937,8 @@
   .text-\[var\(--chat-label-size\,11px\)\] {
     color: var(--chat-label-size,11px);
   }
-  .text-\[var\(--chat-send-color\,var\(--accent-text\)\)\] {
-    color: var(--chat-send-color,var(--accent-text));
+  .text-\[var\(--chat-send-color\,white\)\] {
+    color: var(--chat-send-color,white);
   }
   .text-\[var\(--code-error\)\] {
     color: var(--code-error);
@@ -2929,6 +3009,9 @@
   .text-\[var\(--text-muted\,hsl\(var\(--muted-foreground\)\)\)\] {
     color: var(--text-muted,hsl(var(--muted-foreground)));
   }
+  .text-\[var\(--text-primary\)\] {
+    color: var(--text-primary);
+  }
   .text-\[var\(--text-primary\,hsl\(var\(--foreground\)\)\)\] {
     color: var(--text-primary,hsl(var(--foreground)));
   }
@@ -2971,6 +3054,12 @@
   .text-white {
     color: var(--color-white);
   }
+  .text-white\/60 {
+    color: color-mix(in srgb, #fff 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-white) 60%, transparent);
+    }
+  }
   .text-yellow-400 {
     color: var(--color-yellow-400);
   }
@@ -3035,16 +3124,28 @@
     --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_1px_2px_rgba\(15\,23\,42\,0\.04\)\] {
+    --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(15,23,42,0.04));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0_6px_16px_rgba\(15\,23\,42\,0\.08\)\] {
+    --tw-shadow: 0 6px 16px var(--tw-shadow-color, rgba(15,23,42,0.08));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0_8px_20px_rgba\(15\,23\,42\,0\.12\)\] {
+    --tw-shadow: 0 8px 20px var(--tw-shadow-color, rgba(15,23,42,0.12));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[inset_2px_0_0_hsl\(var\(--primary\)\)\] {
     --tw-shadow: inset 2px 0 0 var(--tw-shadow-color, hsl(var(--primary)));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[var\(--chat-input-shadow\,var\(--shadow-card\)\)\] {
-    --tw-shadow: var(--chat-input-shadow,var(--shadow-card));
+  .shadow-\[var\(--chat-input-shadow\,0_1px_2px_rgba\(15\,23\,42\,0\.05\)\)\] {
+    --tw-shadow: var(--chat-input-shadow,0 1px 2px rgba(15,23,42,0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[var\(--chat-send-shadow\,none\)\] {
-    --tw-shadow: var(--chat-send-shadow,none);
+  .shadow-\[var\(--chat-send-shadow\,0_6px_16px_rgba\(15\,23\,42\,0\.12\)\)\] {
+    --tw-shadow: var(--chat-send-shadow,0 6px 16px rgba(15,23,42,0.12));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-\[var\(--shadow-accent\)\] {
@@ -3075,6 +3176,10 @@
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-sm {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3222,15 +3327,18 @@
     -webkit-user-select: none;
     user-select: none;
   }
-  .\[background\:var\(--chat-input-bg\,var\(--depth-2\)\)\] {
-    background: var(--chat-input-bg,var(--depth-2));
+  .\[background\:var\(--chat-input-bg\,var\(--bg-card\)\)\] {
+    background: var(--chat-input-bg,var(--bg-card));
   }
-  .\[background\:var\(--chat-send-bg\,var\(--accent-surface-soft\)\)\] {
-    background: var(--chat-send-bg,var(--accent-surface-soft));
+  .\[background\:var\(--chat-send-bg\,var\(--brand-primary\)\)\] {
+    background: var(--chat-send-bg,var(--brand-primary));
   }
   .\[scrollbar-gutter\:stable\] {
     scrollbar-gutter: stable;
   }
+  .ring-inset {
+    --tw-ring-inset: inset;
+  }
   .group-open\:rotate-180 {
     &:is(:where(.group):is([open], :popover-open, :open) *) {
       rotate: 180deg;
@@ -3400,6 +3508,12 @@
       }
     }
   }
+  .last\:border-0 {
+    &:last-child {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  }
   .focus-within\:border-\[var\(--border-accent-hover\)\] {
     &:focus-within {
       border-color: var(--border-accent-hover);
@@ -3410,9 +3524,9 @@
       border-color: var(--chat-input-focus-border,var(--border-accent));
     }
   }
-  .focus-within\:shadow-\[var\(--chat-input-focus-shadow\,var\(--shadow-card\)\)\] {
+  .focus-within\:shadow-\[var\(--chat-input-focus-shadow\,0_10px_30px_rgba\(15\,23\,42\,0\.08\)\)\] {
     &:focus-within {
-      --tw-shadow: var(--chat-input-focus-shadow,var(--shadow-card));
+      --tw-shadow: var(--chat-input-focus-shadow,0 10px 30px rgba(15,23,42,0.08));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
@@ -3453,6 +3567,16 @@
       }
     }
   }
+  .hover\:border-emerald-500\/30 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 30%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
+        }
+      }
+    }
+  }
   .hover\:border-red-500\/30 {
     &:hover {
       @media (hover: hover) {
@@ -3532,6 +3656,16 @@
       }
     }
   }
+  .hover\:bg-emerald-500\/10 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-green-600\/30 {
     &:hover {
       @media (hover: hover) {
@@ -3653,10 +3787,10 @@
       }
     }
   }
-  .hover\:\[background\:var\(--chat-send-hover-bg\,var\(--accent-surface-strong\)\)\] {
+  .hover\:\[background\:var\(--chat-send-hover-bg\,var\(--brand-strong\)\)\] {
     &:hover {
       @media (hover: hover) {
-        background: var(--chat-send-hover-bg,var(--accent-surface-strong));
+        background: var(--chat-send-hover-bg,var(--brand-strong));
       }
     }
   }

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

@@ -235,6 +235,19 @@ interface DashboardLayoutProps {
     railFooter?: React.ReactNode;
     /** Extra dropdown items in the profile menu */
     profileMenuItems?: React.ReactNode;
+    /** Notification data for the bell dropdown */
+    notifications?: {
+        items: {
+            id: string;
+            title: string;
+            message: string;
+            read: boolean;
+            createdAt: string;
+        }[];
+        unreadCount: number;
+        onMarkRead?: (id: string) => void;
+        onMarkAllRead?: () => void;
+    };
 }
 declare function DashboardLayout({ defaultPanelOpen, defaultMode, ...props }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
 

package/dist/workspace.d.ts

@@ -339,4 +339,137 @@ interface AuditResultsProps {
 }
 declare function AuditResults({ forms, crossFormChecks, overallScore, className }: AuditResultsProps): react_jsx_runtime.JSX.Element;
 
-export { AgentWorkbench, type AuditCheck, AuditResults, type AuditResultsProps, type BannerType, type ContextBadge, DirectoryPane, type DirectoryPaneProps, type FormAudit, RuntimePane, type RuntimePaneProps, SandboxWorkbench, type SandboxWorkbenchArtifact, type SandboxWorkbenchCustomArtifact, type SandboxWorkbenchFileArtifact, type SandboxWorkbenchLayoutOptions, type SandboxWorkbenchMarkdownArtifact, type SandboxWorkbenchOpenUIArtifact, type SandboxWorkbenchProps, type SandboxWorkbenchSessionProps, SessionActivityMonitor, type SessionActivityMonitorProps, SessionSidebar, type SessionSidebarBadge, type SessionSidebarFilter, type SessionSidebarItem, type SessionSidebarLink, type SessionSidebarProps, StatusBanner, type StatusBannerProps, StatusBar, type StatusBarProps, type TerminalLine, TerminalPanel, type TerminalProps, WorkspaceLayout, type WorkspaceLayoutProps };
+interface TaskBoardItem {
+    id: string;
+    title: string;
+    description?: string | null;
+    status: string;
+    priority?: string | null;
+    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 {
+    items: TaskBoardItem[];
+    columns: TaskBoardColumn[];
+    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;
+
+interface CalendarEvent {
+    id: string;
+    title: string;
+    type?: string;
+    startAt: Date | string;
+    endAt?: Date | string | null;
+    allDay?: boolean;
+    /** Arbitrary data passed through to render props */
+    meta?: Record<string, unknown>;
+}
+interface CalendarViewProps {
+    events: CalendarEvent[];
+    className?: string;
+    /** Controlled month (0-indexed). Defaults to current month. */
+    month?: number;
+    year?: number;
+    onMonthChange?: (year: number, month: number) => void;
+    /** Which day is selected (ISO date string YYYY-MM-DD) */
+    selectedDay?: string | null;
+    onSelectDay?: (dateKey: string) => void;
+    onDoubleClickDay?: (dateKey: string) => void;
+    /** Render an event dot/chip inside a calendar cell */
+    renderEventChip?: (event: CalendarEvent) => ReactNode;
+    /** Render the day detail panel (right side) */
+    renderDayDetail?: (dateKey: string, dayEvents: CalendarEvent[]) => ReactNode;
+    /** Header slot (left of navigation) */
+    headerLeft?: ReactNode;
+    /** Header slot (right of navigation) */
+    headerRight?: ReactNode;
+    /** Whether to show the day detail panel. Default true. */
+    showDayPanel?: boolean;
+}
+/**
+ * CalendarView — month grid calendar with event chips and optional day detail panel.
+ *
+ * Stateless by default (controlled month/selectedDay). Falls back to internal
+ * state when uncontrolled. All rendering is customizable via render props.
+ */
+declare function CalendarView({ events, className, month: controlledMonth, year: controlledYear, onMonthChange, selectedDay: controlledSelectedDay, onSelectDay, onDoubleClickDay, renderEventChip, renderDayDetail, headerLeft, headerRight, showDayPanel, }: CalendarViewProps): react_jsx_runtime.JSX.Element;
+
+interface ApprovalItem {
+    id: string;
+    title: string;
+    description?: string | null;
+    type: string;
+    status: "pending" | "approved" | "rejected" | "executed";
+    createdAt?: Date | string | null;
+    resolvedAt?: Date | string | null;
+    /** Arbitrary metadata — e.g. rejectionReason, confidence, content preview */
+    meta?: Record<string, unknown>;
+}
+interface ApprovalConfidenceStat {
+    type: string;
+    approved: number;
+    rejected: number;
+    total: number;
+    rate: number;
+}
+interface ApprovalQueueProps {
+    items: ApprovalItem[];
+    className?: string;
+    onApprove?: (item: ApprovalItem) => void;
+    onReject?: (item: ApprovalItem, reason?: string) => void;
+    /** Render custom content inside each approval card */
+    renderItemDetail?: (item: ApprovalItem) => ReactNode;
+    /** Render a custom badge for the item type */
+    renderTypeBadge?: (type: string) => ReactNode;
+    /** Render custom stats at the top. If not provided, auto-computed confidence stats shown. */
+    renderStats?: (stats: ApprovalConfidenceStat[]) => ReactNode;
+    /** Whether the user can approve/reject. Default true. */
+    canResolve?: boolean;
+    /** Header slot */
+    header?: ReactNode;
+    /** Empty state */
+    emptyState?: ReactNode;
+    /** Whether to show resolved items. Default: collapsed toggle. */
+    showResolved?: boolean;
+}
+/**
+ * ApprovalQueue — review queue for agent-proposed actions.
+ *
+ * Shows pending items with approve/reject controls, confidence stats per type,
+ * and a collapsible resolved history. Designed for the agent approval feedback
+ * loop: agent proposes → user approves/rejects → rejection reasons feed back.
+ */
+declare function ApprovalQueue({ items, className, onApprove, onReject, renderItemDetail, renderTypeBadge, renderStats, canResolve, header, emptyState, showResolved: controlledShowResolved, }: ApprovalQueueProps): react_jsx_runtime.JSX.Element;
+
+export { AgentWorkbench, type ApprovalConfidenceStat, type ApprovalItem, ApprovalQueue, type ApprovalQueueProps, type AuditCheck, AuditResults, type AuditResultsProps, type BannerType, type CalendarEvent, CalendarView, type CalendarViewProps, type ContextBadge, DirectoryPane, type DirectoryPaneProps, type FormAudit, RuntimePane, type RuntimePaneProps, SandboxWorkbench, type SandboxWorkbenchArtifact, type SandboxWorkbenchCustomArtifact, type SandboxWorkbenchFileArtifact, type SandboxWorkbenchLayoutOptions, type SandboxWorkbenchMarkdownArtifact, type SandboxWorkbenchOpenUIArtifact, type SandboxWorkbenchProps, type SandboxWorkbenchSessionProps, SessionActivityMonitor, type SessionActivityMonitorProps, SessionSidebar, type SessionSidebarBadge, type SessionSidebarFilter, type SessionSidebarItem, type SessionSidebarLink, type SessionSidebarProps, StatusBanner, type StatusBannerProps, StatusBar, type StatusBarProps, TaskBoard, type TaskBoardColumn, type TaskBoardItem, type TaskBoardProps, type TerminalLine, TerminalPanel, type TerminalProps, WorkspaceLayout, type WorkspaceLayoutProps };

package/dist/workspace.js

@@ -1,6 +1,8 @@
 import {
   AgentWorkbench,
+  ApprovalQueue,
   AuditResults,
+  CalendarView,
   DirectoryPane,
   RuntimePane,
   SandboxWorkbench,
@@ -8,18 +10,19 @@ import {
   SessionSidebar,
   StatusBanner,
   StatusBar,
+  TaskBoard,
   TerminalPanel,
   WorkspaceLayout
-} from "./chunk-QC4BJEG6.js";
+} from "./chunk-A5ALUT2B.js";
 import "./chunk-OEX7NZE3.js";
 import "./chunk-MA7YKRUP.js";
-import "./chunk-JLKYXLFN.js";
+import "./chunk-WKSGQVLI.js";
 import "./chunk-54SQQMMM.js";
-import "./chunk-EXSOPXIY.js";
+import "./chunk-QOL4ZB24.js";
 import "./chunk-HRMUF35V.js";
 import "./chunk-MT5FJ3ZT.js";
 import "./chunk-BX6AQMUS.js";
-import "./chunk-PLTZB5BC.js";
+import "./chunk-ZNCEM5CD.js";
 import "./chunk-34I7UFSX.js";
 import "./chunk-QDH5GEGY.js";
 import {
@@ -31,8 +34,10 @@ import "./chunk-MKTSMWVD.js";
 import "./chunk-RQHJBTEU.js";
 export {
   AgentWorkbench,
+  ApprovalQueue,
   ArtifactPane,
   AuditResults,
+  CalendarView,
   DirectoryPane,
   RuntimePane,
   SandboxWorkbench,
@@ -40,6 +45,7 @@ export {
   SessionSidebar,
   StatusBanner,
   StatusBar,
+  TaskBoard,
   TerminalPanel,
   WorkspaceLayout
 };

package/package.json

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