@tangle-network/sandbox-ui 0.10.1 → 0.10.2

package/dist/{chunk-A5ALUT2B.js → chunk-HEXQVHXJ.js}

@@ -1658,7 +1658,7 @@ function CheckRow({ check }) {
 
 // src/workspace/task-board.tsx
 import { useMemo as useMemo5 } from "react";
-import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 function TaskBoard({
   items,
   columns,
@@ -1669,7 +1669,9 @@ function TaskBoard({
   renderColumnAction,
   renderBadge,
   columnEmptyState,
-  header
+  header,
+  renderColumnBody,
+  renderItemWrapper
 }) {
   const grouped = useMemo5(() => {
     const map = /* @__PURE__ */ new Map();
@@ -1685,6 +1687,40 @@ function TaskBoard({
     header,
     /* @__PURE__ */ jsx11("div", { className: "flex flex-1 gap-3 overflow-x-auto p-4", children: columns.map((col) => {
       const colItems = grouped.get(col.id) ?? [];
+      const itemCards = /* @__PURE__ */ jsxs11(Fragment2, { children: [
+        colItems.length === 0 && columnEmptyState,
+        colItems.map((item, index) => {
+          const card = /* @__PURE__ */ jsxs11(
+            "button",
+            {
+              type: "button",
+              onClick: () => onClickItem?.(item),
+              className: "group w-full rounded-lg border border-border bg-card p-3 text-left transition-colors hover:border-accent/50",
+              children: [
+                /* @__PURE__ */ jsx11("p", { className: "text-sm font-medium text-foreground", children: item.title }),
+                item.description && /* @__PURE__ */ jsx11("p", { className: "mt-1 text-xs text-muted-foreground line-clamp-2", children: item.description }),
+                (item.priority || item.tags?.length) && /* @__PURE__ */ jsxs11("div", { className: "mt-2 flex flex-wrap gap-1.5", children: [
+                  item.priority && (renderBadge ? renderBadge(item.priority, "priority") : /* @__PURE__ */ jsx11("span", { className: "rounded-full border border-border px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: item.priority })),
+                  item.tags?.map(
+                    (tag) => renderBadge ? /* @__PURE__ */ jsx11("span", { children: renderBadge(tag, "tag") }, tag) : /* @__PURE__ */ jsx11(
+                      "span",
+                      {
+                        className: "rounded-full border border-border px-2 py-0.5 text-[10px] text-muted-foreground",
+                        children: tag
+                      },
+                      tag
+                    )
+                  )
+                ] }),
+                renderItemMeta?.(item)
+              ]
+            },
+            item.id
+          );
+          return renderItemWrapper ? /* @__PURE__ */ jsx11("span", { children: renderItemWrapper(item, index, card) }, item.id) : card;
+        })
+      ] });
+      const columnBody = /* @__PURE__ */ jsx11("div", { className: "flex flex-1 flex-col gap-2 overflow-y-auto px-2 pb-2 min-h-[80px]", children: renderColumnBody ? renderColumnBody(col.id, itemCards, colItems) : itemCards });
       return /* @__PURE__ */ jsxs11(
         "div",
         {
@@ -1700,36 +1736,7 @@ function TaskBoard({
               ] }),
               renderColumnAction?.(col)
             ] }),
-            /* @__PURE__ */ jsxs11("div", { className: "flex flex-1 flex-col gap-2 overflow-y-auto px-2 pb-2 min-h-[80px]", children: [
-              colItems.length === 0 && columnEmptyState,
-              colItems.map((item) => /* @__PURE__ */ jsxs11(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => onClickItem?.(item),
-                  className: "group w-full rounded-lg border border-border bg-card p-3 text-left transition-colors hover:border-accent/50",
-                  children: [
-                    /* @__PURE__ */ jsx11("p", { className: "text-sm font-medium text-foreground", children: item.title }),
-                    item.description && /* @__PURE__ */ jsx11("p", { className: "mt-1 text-xs text-muted-foreground line-clamp-2", children: item.description }),
-                    (item.priority || item.tags?.length) && /* @__PURE__ */ jsxs11("div", { className: "mt-2 flex flex-wrap gap-1.5", children: [
-                      item.priority && (renderBadge ? renderBadge(item.priority, "priority") : /* @__PURE__ */ jsx11("span", { className: "rounded-full border border-border px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: item.priority })),
-                      item.tags?.map(
-                        (tag) => renderBadge ? /* @__PURE__ */ jsx11("span", { children: renderBadge(tag, "tag") }, tag) : /* @__PURE__ */ jsx11(
-                          "span",
-                          {
-                            className: "rounded-full border border-border px-2 py-0.5 text-[10px] text-muted-foreground",
-                            children: tag
-                          },
-                          tag
-                        )
-                      )
-                    ] }),
-                    renderItemMeta?.(item)
-                  ]
-                },
-                item.id
-              ))
-            ] })
+            columnBody
           ]
         },
         col.id
@@ -1740,7 +1747,7 @@ function TaskBoard({
 
 // src/workspace/calendar-view.tsx
 import { useState as useState6, useMemo as useMemo6 } from "react";
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 function toDateKey(d) {
   return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
 }
@@ -1929,7 +1936,7 @@ function CalendarView({
         );
       }) })
     ] }),
-    showDayPanel && /* @__PURE__ */ jsx12("div", { className: "w-80 shrink-0 flex flex-col overflow-hidden", children: renderDayDetail ? renderDayDetail(selectedDay ?? todayKey, selectedDayEvents) : /* @__PURE__ */ jsxs12(Fragment2, { children: [
+    showDayPanel && /* @__PURE__ */ jsx12("div", { className: "w-80 shrink-0 flex flex-col overflow-hidden", children: renderDayDetail ? renderDayDetail(selectedDay ?? todayKey, selectedDayEvents) : /* @__PURE__ */ jsxs12(Fragment3, { children: [
       /* @__PURE__ */ jsxs12("div", { className: "px-4 py-3 border-b border-border shrink-0", children: [
         /* @__PURE__ */ jsx12("h3", { className: "text-sm font-semibold text-foreground", children: selectedDay === todayKey ? "Today" : selectedDay ? (/* @__PURE__ */ new Date(selectedDay + "T00:00:00")).toLocaleDateString(
           "en-US",

package/dist/globals.css

@@ -2116,9 +2116,6 @@
       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;
   }

package/dist/index.js

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

package/dist/styles.css

@@ -2116,9 +2116,6 @@
       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;
   }

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.2",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",