@schandlergarcia/sf-web-components 2.4.0 → 2.5.0

package/.a4drules/skills/command-center-builder/SKILL.md

@@ -3,7 +3,7 @@ name: command-center-builder
 description: >-
   Conventions and patterns for building Command Center dashboards.
   Covers layout patterns (visualization-hero, grid), component selection
-  (MetricCard, ChartCard, GeoMap, ListCard, ActivityCard), dark mode,
+  (MetricCard, ChartCard, GeoMap, ListCard, KanbanBoard, ActivityCard), dark mode,
   brand colors, styling, and wiring dashboards into the app. Use when
   scaffolding, building, or editing any dashboard page in this project.
 ---
@@ -92,7 +92,7 @@ Use these exact imports. Do NOT read component source files to discover imports
 ```tsx
 // Library components — named imports from barrel
 import {
-  BaseCard, MetricCard, ChartCard, TableCard, ListCard, ActivityCard,
+  BaseCard, MetricCard, ChartCard, TableCard, ListCard, KanbanBoard, ActivityCard,
   StatusCard, WidgetCard, SectionCard, FeedPanel, CalloutCard, ActionList,
   MetricsStrip, D3Chart, D3ChartTemplates, GeoMap, Avatar, UIButton,
   UIChip, UIText, EmptyState, Spinner, ChatBar, FilterBar,
@@ -164,6 +164,7 @@ The component library (`@/components/library`) provides pre-built, themed, dark-
 | Activity feed (display only) | `ActivityCard` or `FeedPanel` | `<div>` with hand-rolled interaction rows |
 | **Activity feed (with per-item actions like "Assign to Agent")** | **Custom markup inside `BaseCard`** | **`ActivityCard` (doesn't support per-item buttons)** |
 | Data table | `TableCard` | `<table>` or custom grid of rows |
+| Board / swim-lanes (cards across columns, optional DnD) | `KanbanBoard` | Stacked `ListCard`s or hand-rolled grid of columns |
 | Stats panel | `WidgetCard` or `SectionCard` | `<div className="bg-white ... p-6">` with label/value pairs |
 | Custom interactive content (expand/collapse, inline details) | `WidgetCard` (sections accept arbitrary JSX) or `ListCard` (with `onItemClick` + `itemActions`) | Hand-rolled `<div>` card with custom expand/collapse logic |
 | Status items | `StatusCard` | `<div>` with custom status badges |

package/.a4drules/skills/component-library/SKILL.md

@@ -3,10 +3,11 @@ name: component-library
 description: >-
   API reference for the command center component library at
   @/components/library. Documents every component (MetricCard, ChartCard,
-  D3Chart, D3ChartTemplates, GeoMap, ListCard, ActivityCard, TableCard,
-  StatusCard, WidgetCard, BaseCard, ChatBar, Avatar, UIChip, FilterBar),
-  their props, data shapes, and import patterns. Use when looking up how
-  to use a specific component or choosing which component fits a need.
+  D3Chart, D3ChartTemplates, GeoMap, ListCard, KanbanBoard, ActivityCard,
+  TableCard, StatusCard, WidgetCard, BaseCard, ChatBar, Avatar, UIChip,
+  FilterBar), their props, data shapes, and import patterns. Use when
+  looking up how to use a specific component or choosing which component
+  fits a need.
 ---
 
 # Component Library
@@ -64,6 +65,9 @@ import type { MetricCardProps } from "@/components/library";
 - Pass initials strings as `avatar` in ListCard items — `avatar: "MR"` is treated as an image URL and breaks. Instead, omit `avatar` to auto-generate initials from `title`/`name`, or pass a ReactNode like `<Avatar initials="MR" />`
 - Hand-roll a card container (`<div className="bg-white border rounded ...">`) when `WidgetCard` with a single section can wrap your custom content
 - Use Recharts, Chart.js, or any third-party chart library — only `D3Chart` and `GeoMap` are allowed
+- Use `react-beautiful-dnd`, `react-dnd`, or any other DnD library — `KanbanBoard` is built on `@dnd-kit/*` (peer deps); do not introduce a second DnD system
+- Forget `columnId` on a `KanbanBoard` card — every card MUST have `columnId` matching one of `columns[].id`, otherwise it won't render
+- Wrap `KanbanBoard` in another card (`WidgetCard`, `BaseCard`) — it already renders inside its own `BaseCard`
 - Dismiss `validate:dashboard` errors as "justified" — every error has a library component fix
 
 ---
@@ -76,6 +80,7 @@ import type { MetricCardProps } from "@/components/library";
 | A row of 2–4 KPIs | Grid of `MetricCard` | `MetricsStrip` (for compact inline) |
 | A data table | `TableCard` | `<table>` HTML |
 | A scrollable item list | `ListCard` | Custom divs with `.map()` |
+| A board / swim-lanes (cards in columns, optional drag-and-drop) | `KanbanBoard` | Stacked `ListCard`s or hand-rolled grid |
 | An activity log with status icons | `ActivityCard` | ListCard (no status icons) |
 | A chart (line, bar) | `ChartCard` + `D3Chart` | Raw `<svg>` |
 | A donut/pie chart | `ChartCard` + `D3Chart` + custom renderChart | Any chart library |
@@ -358,6 +363,47 @@ Status aliases: `"ok"/"healthy"/"up"` → `"operational"`, `"warn"` → `"degrad
 />
 ```
 
+### KanbanBoard
+**When:** Display items as cards across labeled swim-lanes (statuses, pipeline stages, sprint board). Includes drag-and-drop powered by `@dnd-kit/*`.
+
+**Peer deps required:** `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/utilities`. Install in your project if missing:
+```bash
+npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
+```
+
+```jsx
+<KanbanBoard
+  title="Sprint Board"
+  subtitle="Q2 · Sprint 4"
+  columns={[
+    { id: "todo",  title: "To Do",       limit: 5, accent: "default" },
+    { id: "doing", title: "In Progress", limit: 3, accent: "warning" },
+    { id: "done",  title: "Done",                  accent: "success" },
+  ]}
+  cards={[
+    { id: "C-1", columnId: "todo",  title: "Onboard Acme", subtitle: "Owner: Aria", badges: ["Priority"], status: "warning" },
+    { id: "C-2", columnId: "doing", title: "Renew SLA",     status: "danger", badges: [{ label: "Risk", color: "danger" }] },
+    { id: "C-3", columnId: "done",  title: "Q2 review prep", status: "success" },
+  ]}
+  isDraggable                                     // default true
+  showColumnCounts                                // default true
+  showWipLimits                                   // default true; renders "count / limit"
+  dense={false}
+  accent="default"                                // fallback accent
+  onCardClick={(card) => {/* row click */}}
+  onCardMove={({ cardId, fromColumnId, toColumnId, fromIndex, toIndex }) => {
+    // Optional. If provided, you own the state. If omitted, the board manages reorder/move internally.
+  }}
+  emptyMessage="No items"
+  loading={false}
+  error={null}
+/>
+```
+
+**Card shape:** `{ id, columnId, title, subtitle?, description?, status?, accent?, avatar?, badges?, meta?, actions? }`
+**Column shape:** `{ id, title, accent?, limit?, emptyMessage?, footer?, actions? }`
+**Mistakes:** ❌ Missing `columnId` on a card → it won't render. ❌ Wrapping `KanbanBoard` in another card. ❌ Using a non-`@dnd-kit` DnD library alongside it.
+
 ---
 
 ## Chart Components

package/.a4drules/skills/component-library/card-components.md

@@ -249,5 +249,93 @@ Status aliases: `"ok"/"healthy"/"up"` → `"operational"`, `"warn"` → `"degrad
 />
 ```
 
+### KanbanBoard
+**When:** Display items as cards across labeled swim-lanes (To Do → In Progress → Done, pipeline stages, status boards). Supports drag-and-drop between columns out of the box.
+
+**Peer deps:** `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/utilities` are required peer dependencies. Install in your project if they're not already there:
+```bash
+npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
+```
+
+```jsx
+import { KanbanBoard } from "@/components/library";
+import useDataSource from "@/components/library/data/useDataSource";
+
+const SAMPLE_CARDS = [
+  { id: "C-1", columnId: "todo",  title: "Onboard Acme",      subtitle: "Owner: Aria",    badges: ["Priority"], status: "warning" },
+  { id: "C-2", columnId: "doing", title: "Renew SLA",          subtitle: "Owner: Devin",   badges: [{ label: "Risk", color: "danger" }], status: "danger" },
+  { id: "C-3", columnId: "done",  title: "Q2 review prep",     subtitle: "Owner: Priya",   status: "success" },
+];
+
+const COLUMNS = [
+  { id: "todo",  title: "To Do",       limit: 5, accent: "default" },
+  { id: "doing", title: "In Progress", limit: 3, accent: "warning" },  // count > limit shows red ring on chip
+  { id: "done",  title: "Done",                  accent: "success" },
+];
+
+export default function PipelineBoard() {
+  const cards = useDataSource({ sample: SAMPLE_CARDS, live: [] });
+
+  return (
+    <KanbanBoard
+      title="Sprint Board"
+      subtitle="Q2 · Sprint 4"
+      columns={COLUMNS}
+      cards={cards}
+      isDraggable                                  // enable @dnd-kit DnD (default true)
+      showColumnCounts                             // chip on each column header (default true)
+      showWipLimits                                // render "count / limit" when limit set (default true)
+      dense={false}                                // tighter card padding when true
+      accent="default"                             // fallback accent: default|primary|success|warning|danger|info
+      onCardClick={(card) => console.log(card.id)} // optional row click
+      onCardMove={({ cardId, fromColumnId, toColumnId, fromIndex, toIndex }) => {
+        // Optional. If provided, you own the state and must update `cards`.
+        // If omitted, KanbanBoard manages reorder/move internally.
+      }}
+      emptyMessage="No items"                      // shown in empty columns
+      loading={false}
+      error={null}
+    />
+  );
+}
+```
+
+**Card shape:**
+```js
+{
+  id:          "C-1",            // required, unique
+  columnId:    "todo",           // required, must match one of columns[].id
+  title:       "Onboard Acme",   // required
+  subtitle:    "Owner: Aria",
+  description: "Long-form text (clamped to 3 lines)",
+  status:      "warning",        // dot color: default|primary|success|warning|danger|info
+  accent:      "primary",        // overrides board accent for the card's left border
+  avatar:      "/url" | <Icon /> | "AR" (auto-initials when omitted),
+  badges:      ["Priority", { label: "Risk", color: "danger", size: "sm" }],
+  meta:        ["Due Mon", { icon: <ClockIcon />, label: "2d" }],
+  actions:     <UIButton size="sm">Open</UIButton>
+}
+```
+
+**Column shape:**
+```js
+{
+  id:           "todo",                   // required, unique
+  title:        "To Do",                  // required
+  accent:       "default" | "primary" | "success" | "warning" | "danger" | "info",
+  limit:        5,                        // WIP limit; over-limit columns get a red ring on the count chip
+  emptyMessage: "Nothing here yet",       // overrides board-level emptyMessage
+  footer:       <span>Capacity: 80%</span>,
+  actions:      <UIButton size="xs">+</UIButton>
+}
+```
+
+**Mistakes:**
+- ❌ Forgetting `columnId` on a card → card won't render. Every card MUST have `columnId` matching a column.
+- ❌ Passing the full cards list back into a `setCards` from `onCardMove` (the callback fires on intent only — you decide if/how to update). If you want default reorder behavior, just omit `onCardMove`.
+- ❌ Using `KanbanBoard` for a simple sortable list — use `ListCard` instead.
+- ❌ Wrapping `KanbanBoard` in another card (`WidgetCard`, `BaseCard`) — it already renders inside a `BaseCard`.
+- ❌ Installing `react-beautiful-dnd` or `react-dnd` — only `@dnd-kit/*` is supported.
+
 ---
 

package/.a4drules/skills/component-library/when-to-use.md

@@ -6,6 +6,7 @@
 | A row of 2–4 KPIs | Grid of `MetricCard` | `MetricsStrip` (for compact inline) |
 | A data table | `TableCard` | `<table>` HTML |
 | A scrollable item list | `ListCard` | Custom divs with `.map()` |
+| A board / swim-lanes (cards in columns) | `KanbanBoard` | Multiple stacked `ListCard`s |
 | An activity log with status icons | `ActivityCard` | ListCard (no status icons) |
 | A chart (line, bar) | `ChartCard` + `D3Chart` | Raw `<svg>` |
 | A donut/pie chart | `ChartCard` + `D3Chart` + custom renderChart | Any chart library |

package/CHANGELOG.md

@@ -5,6 +5,30 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.5.0] - 2026-05-07
+
+### Added
+- **`KanbanBoard` component** — board / swim-lane view for items in columns with drag-and-drop. Lives at `src/components/library/cards/KanbanBoard.jsx`, exported from the library barrel as `KanbanBoard`.
+  - Structured card shape: `{ id, columnId, title, subtitle?, description?, status?, accent?, avatar?, badges?, meta?, actions? }`.
+  - Structured column shape: `{ id, title, accent?, limit?, emptyMessage?, footer?, actions? }`.
+  - Drag-and-drop powered by `@dnd-kit/core` + `@dnd-kit/sortable` + `@dnd-kit/utilities` (new peer dependencies).
+  - Pointer + keyboard sensors for full a11y; drag overlay shows the active card; over-limit columns show a red ring on the count chip.
+  - `onCardMove({ cardId, fromColumnId, toColumnId, fromIndex, toIndex })` callback for state-owning parents; if omitted, the board manages reorder/move internally.
+  - `onCardClick(card)`, `loading`, `error`, `dense`, `accent`, `showColumnCounts`, `showWipLimits`, `emptyMessage` props.
+  - Renders inside its own `BaseCard` (do not wrap in another card).
+- **Peer dependencies:** `@dnd-kit/core ^6.0.0`, `@dnd-kit/sortable ^8.0.0 || ^9.0.0 || ^10.0.0`, `@dnd-kit/utilities ^3.0.0`. Consuming projects must install these for `KanbanBoard` to work.
+- **`vite.config.ts` externals updated** so `@dnd-kit/*` is not bundled into the library output.
+
+### Documentation
+- Added `KanbanBoard` row to `.a4drules/skills/component-library/when-to-use.md` and the corresponding "When to Use" table in `SKILL.md`.
+- Added full `KanbanBoard` API reference to `.a4drules/skills/component-library/card-components.md` (card shape, column shape, mistakes, peer-dep install hint).
+- Added `KanbanBoard` API summary to `.a4drules/skills/component-library/SKILL.md` Card Components section.
+- Updated `.a4drules/skills/command-center-builder/SKILL.md`: added `KanbanBoard` to the frontmatter description, the canonical import block, and the "Need / MUST use" table.
+- Added Do-Not entries forbidding alternative DnD libraries (`react-beautiful-dnd`, `react-dnd`), forgetting `columnId` on a card, and double-wrapping `KanbanBoard` in another card.
+
+### Context
+- Many command-center use cases (sprint boards, opportunity pipelines, ticket triage, approval queues) need a board layout. Without a library component, agents would either stack `ListCard`s (no DnD, no column counts/limits) or hand-roll a grid of columns (violates "every section is a library component"). `KanbanBoard` gives agents a single structured component that follows the same data-driven, sample/live-aware patterns as `ListCard` and `TableCard`.
+
 ## [2.4.0] - 2026-05-07
 
 ### Removed

package/dist/components/library/cards/KanbanBoard.js

@@ -0,0 +1,313 @@
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import K, { useState as F, useMemo as re, useCallback as U } from "react";
+import { useSensors as ne, useSensor as V, PointerSensor as se, KeyboardSensor as le, DndContext as ae, closestCenter as ie, DragOverlay as de, useDroppable as oe } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates as ce, arrayMove as ue, SortableContext as me, verticalListSortingStrategy as fe, useSortable as he } from "@dnd-kit/sortable";
+import { CSS as pe } from "@dnd-kit/utilities";
+import ge from "./BaseCard.js";
+import N from "../ui/Text.js";
+import T from "../ui/Chip.js";
+const B = {
+  default: "bg-slate-400",
+  primary: "bg-brand-500",
+  success: "bg-emerald-500",
+  warning: "bg-amber-500",
+  danger: "bg-rose-500",
+  info: "bg-sky-500"
+}, _ = {
+  default: "border-l-slate-300 dark:border-l-slate-700",
+  primary: "border-l-brand-500",
+  success: "border-l-emerald-500",
+  warning: "border-l-amber-500",
+  danger: "border-l-rose-500",
+  info: "border-l-sky-500"
+};
+function be({ badges: e }) {
+  return !e || e.length === 0 ? null : /* @__PURE__ */ t("div", { className: "mt-2 flex flex-wrap gap-1.5", children: e.map((r, a) => K.isValidElement(r) ? /* @__PURE__ */ t("span", { children: r }, a) : typeof r == "string" ? /* @__PURE__ */ t(T, { size: "sm", variant: "default", children: r }, a) : /* @__PURE__ */ t(
+    T,
+    {
+      size: r.size ?? "sm",
+      variant: r.variant ?? "default",
+      color: r.color,
+      children: r.label ?? r.text
+    },
+    r.id ?? a
+  )) });
+}
+function xe({ avatar: e, title: r }) {
+  return e ? typeof e == "string" ? /* @__PURE__ */ t(
+    "img",
+    {
+      src: e,
+      alt: "",
+      className: "h-7 w-7 shrink-0 rounded-full border border-slate-200 object-cover dark:border-slate-800"
+    }
+  ) : K.isValidElement(e) ? /* @__PURE__ */ t("div", { className: "grid h-7 w-7 shrink-0 place-items-center rounded-full border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-800", children: e }) : /* @__PURE__ */ t("div", { className: "grid h-7 w-7 shrink-0 place-items-center rounded-full border border-slate-200 bg-slate-100 text-[10px] font-semibold text-slate-700 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-200", children: String(r ?? "??").slice(0, 2).toUpperCase() }) : null;
+}
+function M({ card: e, accent: r, dragging: a, onClick: s, dense: f }) {
+  const d = _[e?.accent ?? r ?? "default"] ?? _.default;
+  return /* @__PURE__ */ c(
+    s ? "button" : "div",
+    {
+      type: s ? "button" : void 0,
+      onClick: s ? () => s(e) : void 0,
+      className: [
+        "group block w-full rounded-xl border bg-white text-left shadow-sm transition",
+        "border-slate-200 dark:border-slate-800 dark:bg-slate-900",
+        "border-l-4",
+        d,
+        f ? "p-2.5" : "p-3",
+        a ? "opacity-60 ring-2 ring-brand-500" : "hover:-translate-y-[1px] hover:shadow-md"
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ c("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ t(xe, { avatar: e.avatar, title: e.title }),
+          /* @__PURE__ */ c("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ t(N, { as: "div", size: "sm", weight: "medium", className: "truncate", children: e.title }),
+            e.subtitle ? /* @__PURE__ */ t(N, { as: "div", size: "xs", muted: !0, className: "mt-0.5 truncate", children: e.subtitle }) : null
+          ] }),
+          e.status ? /* @__PURE__ */ t(
+            "span",
+            {
+              "aria-label": String(e.status),
+              className: [
+                "mt-1.5 h-2 w-2 shrink-0 rounded-full",
+                B[e.status] ?? B.default
+              ].join(" ")
+            }
+          ) : null
+        ] }),
+        e.description ? /* @__PURE__ */ t(N, { as: "div", size: "xs", muted: !0, className: "mt-2 line-clamp-3 text-left", children: e.description }) : null,
+        /* @__PURE__ */ t(be, { badges: e.badges }),
+        e.meta && e.meta.length > 0 ? /* @__PURE__ */ t("div", { className: "mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-slate-500 dark:text-slate-400", children: e.meta.map((l, x) => K.isValidElement(l) ? /* @__PURE__ */ t("span", { children: l }, x) : typeof l == "string" ? /* @__PURE__ */ t("span", { children: l }, x) : /* @__PURE__ */ c("span", { className: "inline-flex items-center gap-1", children: [
+          l.icon ? /* @__PURE__ */ t("span", { className: "opacity-70", children: l.icon }) : null,
+          /* @__PURE__ */ t("span", { children: l.label ?? l.text })
+        ] }, l.id ?? x)) }) : null,
+        e.actions ? /* @__PURE__ */ t(
+          "div",
+          {
+            className: "mt-2 flex justify-end gap-1.5",
+            onClick: (l) => l.stopPropagation(),
+            children: e.actions
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function ve({ card: e, accent: r, onClick: a, isDraggable: s, dense: f }) {
+  const d = he({
+    id: e.id,
+    data: { columnId: e.columnId, type: "card" },
+    disabled: !s
+  }), b = {
+    transform: pe.Translate.toString(d.transform),
+    transition: d.transition
+  };
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ref: d.setNodeRef,
+      style: b,
+      ...s ? d.attributes : {},
+      ...s ? d.listeners : {},
+      className: s ? "touch-none" : void 0,
+      children: /* @__PURE__ */ t(
+        M,
+        {
+          card: e,
+          accent: r,
+          dragging: d.isDragging,
+          onClick: a,
+          dense: f
+        }
+      )
+    }
+  );
+}
+function Ne({
+  column: e,
+  cards: r,
+  accent: a,
+  onCardClick: s,
+  isDraggable: f,
+  dense: d,
+  showCounts: b,
+  showLimits: l,
+  emptyMessage: x
+}) {
+  const k = oe({
+    id: `column:${e.id}`,
+    data: { columnId: e.id, type: "column" }
+  }), y = r.length, w = e.limit != null && y > e.limit;
+  return /* @__PURE__ */ c("div", { className: "flex w-72 shrink-0 flex-col rounded-2xl border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900/60", children: [
+    /* @__PURE__ */ c("div", { className: "flex items-center justify-between gap-2 border-b border-slate-200 px-3 py-2 dark:border-slate-800", children: [
+      /* @__PURE__ */ c("div", { className: "flex min-w-0 items-center gap-2", children: [
+        /* @__PURE__ */ t(
+          "span",
+          {
+            "aria-hidden": !0,
+            className: [
+              "h-2 w-2 shrink-0 rounded-full",
+              B[e.accent ?? a ?? "default"] ?? B.default
+            ].join(" ")
+          }
+        ),
+        /* @__PURE__ */ t(N, { as: "div", size: "sm", weight: "medium", className: "truncate", children: e.title }),
+        b ? /* @__PURE__ */ t(
+          T,
+          {
+            size: "sm",
+            variant: "default",
+            className: w ? "ring-1 ring-rose-500" : void 0,
+            children: l && e.limit != null ? `${y} / ${e.limit}` : y
+          }
+        ) : null
+      ] }),
+      e.actions ? /* @__PURE__ */ t("div", { className: "shrink-0", children: e.actions }) : null
+    ] }),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        ref: k.setNodeRef,
+        className: [
+          "flex flex-1 flex-col gap-2 overflow-y-auto p-2",
+          k.isOver ? "bg-brand-50/50 dark:bg-brand-950/30" : ""
+        ].filter(Boolean).join(" "),
+        style: { minHeight: 80 },
+        children: /* @__PURE__ */ t(
+          me,
+          {
+            items: r.map((h) => h.id),
+            strategy: fe,
+            children: r.length === 0 ? /* @__PURE__ */ t("div", { className: "grid flex-1 place-items-center px-2 py-6", children: /* @__PURE__ */ t(N, { as: "div", size: "xs", muted: !0, className: "text-center", children: e.emptyMessage ?? x ?? "No items" }) }) : r.map((h) => /* @__PURE__ */ t(
+              ve,
+              {
+                card: h,
+                accent: a,
+                onClick: s,
+                isDraggable: f,
+                dense: d
+              },
+              h.id
+            ))
+          }
+        )
+      }
+    ),
+    e.footer ? /* @__PURE__ */ t("div", { className: "border-t border-slate-200 px-3 py-2 text-xs text-slate-500 dark:border-slate-800 dark:text-slate-400", children: e.footer }) : null
+  ] });
+}
+function De({
+  columns: e = [],
+  cards: r = [],
+  title: a,
+  subtitle: s,
+  accent: f = "default",
+  isDraggable: d = !0,
+  dense: b = !1,
+  showColumnCounts: l = !0,
+  showWipLimits: x = !0,
+  emptyMessage: k = "No items",
+  loading: y = !1,
+  error: w,
+  actions: h,
+  onCardClick: P,
+  onCardMove: R,
+  className: G = "",
+  ...H
+}) {
+  const [A, D] = F(null), [W, q] = F(null), u = W ?? r, J = ne(
+    V(se, { activationConstraint: { distance: 4 } }),
+    V(le, { coordinateGetter: ce })
+  ), E = re(() => {
+    const n = {};
+    for (const o of e) n[o.id] = [];
+    for (const o of u) {
+      const i = o.columnId;
+      n[i] || (n[i] = []), n[i].push(o);
+    }
+    return n;
+  }, [e, u]), Q = U(
+    (n) => u.find((i) => i.id === n)?.columnId ?? null,
+    [u]
+  ), X = U(
+    (n) => n ? typeof n == "string" && n.startsWith("column:") ? n.slice(7) : u.find((i) => i.id === n)?.columnId ?? null : null,
+    [u]
+  ), Y = (n) => D(n.active.id), Z = (n) => {
+    D(null);
+    const { active: o, over: i } = n;
+    if (!i) return;
+    const p = Q(o.id), m = X(i.id);
+    if (!p || !m) return;
+    const C = (E[p] ?? []).slice(), I = p === m ? C : (E[m] ?? []).slice(), S = C.findIndex((v) => v.id === o.id);
+    let g;
+    if (i.data?.current?.type === "column" || i.id === `column:${m}` ? g = I.length : (g = I.findIndex((v) => v.id === i.id), g === -1 && (g = I.length)), p === m && S === g) return;
+    let L;
+    if (p === m) {
+      const v = ue(C, S, g);
+      L = [...u.filter((z) => z.columnId !== p), ...v];
+    } else {
+      const v = { ...C[S], columnId: m }, $ = C.filter((j) => j.id !== o.id), z = I.slice();
+      z.splice(g, 0, v), L = [...u.filter(
+        (j) => j.columnId !== p && j.columnId !== m
+      ), ...$, ...z];
+    }
+    R ? R({
+      cardId: o.id,
+      fromColumnId: p,
+      toColumnId: m,
+      fromIndex: S,
+      toIndex: g
+    }) : q(L);
+  }, O = A ? u.find((n) => n.id === A) : null, ee = a || s || h ? /* @__PURE__ */ c("div", { className: "mb-3 flex items-start justify-between gap-3", children: [
+    /* @__PURE__ */ c("div", { className: "min-w-0", children: [
+      a ? /* @__PURE__ */ t(N, { as: "div", size: "sm", weight: "medium", children: a }) : null,
+      s ? /* @__PURE__ */ t(N, { as: "div", size: "xs", muted: !0, className: "mt-1", children: s }) : null
+    ] }),
+    h ? /* @__PURE__ */ t("div", { className: "shrink-0", children: h }) : null
+  ] }) : null, te = /* @__PURE__ */ t("div", { className: "flex gap-3 overflow-x-auto pb-1", children: e.map((n) => /* @__PURE__ */ t(
+    Ne,
+    {
+      column: n,
+      cards: E[n.id] ?? [],
+      accent: f,
+      onCardClick: P,
+      isDraggable: d,
+      dense: b,
+      showCounts: l,
+      showLimits: x,
+      emptyMessage: k
+    },
+    n.id
+  )) });
+  return /* @__PURE__ */ c(
+    ge,
+    {
+      padding: "default",
+      isLoading: y,
+      className: G,
+      ...H,
+      children: [
+        ee,
+        w ? /* @__PURE__ */ t("div", { className: "rounded-md border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700 dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-300", children: String(w) }) : /* @__PURE__ */ c(
+          ae,
+          {
+            sensors: J,
+            collisionDetection: ie,
+            onDragStart: Y,
+            onDragEnd: Z,
+            onDragCancel: () => D(null),
+            children: [
+              te,
+              /* @__PURE__ */ t(de, { children: O ? /* @__PURE__ */ t(M, { card: O, accent: f, dragging: !0, dense: b }) : null })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  De as default
+};
+//# sourceMappingURL=KanbanBoard.js.map

package/dist/components/library/cards/KanbanBoard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanBoard.js","sources":["../../../../src/components/library/cards/KanbanBoard.jsx"],"sourcesContent":["import React, { useMemo, useState, useCallback } from \"react\";\nimport {\n  DndContext,\n  DragOverlay,\n  PointerSensor,\n  KeyboardSensor,\n  useSensor,\n  useSensors,\n  closestCenter,\n  useDroppable,\n} from \"@dnd-kit/core\";\nimport {\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n  sortableKeyboardCoordinates,\n  arrayMove,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport BaseCard from \"./BaseCard\";\nimport UIText from \"../ui/Text\";\nimport UIChip from \"../ui/Chip\";\n\n/**\n * KanbanBoard\n *\n * A swim-lane / board view with structured cards and (optional) drag-and-drop\n * powered by @dnd-kit. Designed to live inside a CommandCenter dashboard and\n * to behave consistently with ListCard / TableCard.\n *\n * Data shapes:\n *   columns: [{ id, title, accent?, limit?, footer?, emptyMessage? }]\n *   cards:   [{ id, columnId, title, subtitle?, description?, badges?,\n *               status?, avatar?, meta?, actions?, accent? }]\n *\n * Callbacks:\n *   onCardClick(card)\n *   onCardMove({ cardId, fromColumnId, toColumnId, fromIndex, toIndex })\n */\n\nconst ACCENT_RING = {\n  default: \"ring-slate-200 dark:ring-slate-800\",\n  primary: \"ring-brand-500/40\",\n  success: \"ring-emerald-500/40\",\n  warning: \"ring-amber-500/40\",\n  danger: \"ring-rose-500/40\",\n  info: \"ring-sky-500/40\",\n};\n\nconst ACCENT_DOT = {\n  default: \"bg-slate-400\",\n  primary: \"bg-brand-500\",\n  success: \"bg-emerald-500\",\n  warning: \"bg-amber-500\",\n  danger: \"bg-rose-500\",\n  info: \"bg-sky-500\",\n};\n\nconst ACCENT_BORDER_LEFT = {\n  default: \"border-l-slate-300 dark:border-l-slate-700\",\n  primary: \"border-l-brand-500\",\n  success: \"border-l-emerald-500\",\n  warning: \"border-l-amber-500\",\n  danger: \"border-l-rose-500\",\n  info: \"border-l-sky-500\",\n};\n\nfunction CardBadges({ badges }) {\n  if (!badges || badges.length === 0) return null;\n  return (\n    <div className=\"mt-2 flex flex-wrap gap-1.5\">\n      {badges.map((b, i) => {\n        if (React.isValidElement(b)) return <span key={i}>{b}</span>;\n        if (typeof b === \"string\") {\n          return (\n            <UIChip key={i} size=\"sm\" variant=\"default\">\n              {b}\n            </UIChip>\n          );\n        }\n        return (\n          <UIChip\n            key={b.id ?? i}\n            size={b.size ?? \"sm\"}\n            variant={b.variant ?? \"default\"}\n            color={b.color}\n          >\n            {b.label ?? b.text}\n          </UIChip>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction CardAvatar({ avatar, title }) {\n  if (!avatar) return null;\n  if (typeof avatar === \"string\") {\n    return (\n      <img\n        src={avatar}\n        alt=\"\"\n        className=\"h-7 w-7 shrink-0 rounded-full border border-slate-200 object-cover dark:border-slate-800\"\n      />\n    );\n  }\n  if (React.isValidElement(avatar)) {\n    return (\n      <div className=\"grid h-7 w-7 shrink-0 place-items-center rounded-full border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-800\">\n        {avatar}\n      </div>\n    );\n  }\n  return (\n    <div className=\"grid h-7 w-7 shrink-0 place-items-center rounded-full border border-slate-200 bg-slate-100 text-[10px] font-semibold text-slate-700 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-200\">\n      {String(title ?? \"??\")\n        .slice(0, 2)\n        .toUpperCase()}\n    </div>\n  );\n}\n\nfunction KanbanCardBody({ card, accent, dragging, onClick, dense }) {\n  const accentBorder =\n    ACCENT_BORDER_LEFT[card?.accent ?? accent ?? \"default\"] ?? ACCENT_BORDER_LEFT.default;\n\n  const Comp = onClick ? \"button\" : \"div\";\n\n  return (\n    <Comp\n      type={onClick ? \"button\" : undefined}\n      onClick={onClick ? () => onClick(card) : undefined}\n      className={[\n        \"group block w-full rounded-xl border bg-white text-left shadow-sm transition\",\n        \"border-slate-200 dark:border-slate-800 dark:bg-slate-900\",\n        \"border-l-4\",\n        accentBorder,\n        dense ? \"p-2.5\" : \"p-3\",\n        dragging ? \"opacity-60 ring-2 ring-brand-500\" : \"hover:-translate-y-[1px] hover:shadow-md\",\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n    >\n      <div className=\"flex items-start gap-2\">\n        <CardAvatar avatar={card.avatar} title={card.title} />\n        <div className=\"min-w-0 flex-1\">\n          <UIText as=\"div\" size=\"sm\" weight=\"medium\" className=\"truncate\">\n            {card.title}\n          </UIText>\n          {card.subtitle ? (\n            <UIText as=\"div\" size=\"xs\" muted className=\"mt-0.5 truncate\">\n              {card.subtitle}\n            </UIText>\n          ) : null}\n        </div>\n        {card.status ? (\n          <span\n            aria-label={String(card.status)}\n            className={[\n              \"mt-1.5 h-2 w-2 shrink-0 rounded-full\",\n              ACCENT_DOT[card.status] ?? ACCENT_DOT.default,\n            ].join(\" \")}\n          />\n        ) : null}\n      </div>\n\n      {card.description ? (\n        <UIText as=\"div\" size=\"xs\" muted className=\"mt-2 line-clamp-3 text-left\">\n          {card.description}\n        </UIText>\n      ) : null}\n\n      <CardBadges badges={card.badges} />\n\n      {card.meta && card.meta.length > 0 ? (\n        <div className=\"mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-slate-500 dark:text-slate-400\">\n          {card.meta.map((m, i) => {\n            if (React.isValidElement(m)) return <span key={i}>{m}</span>;\n            if (typeof m === \"string\") return <span key={i}>{m}</span>;\n            return (\n              <span key={m.id ?? i} className=\"inline-flex items-center gap-1\">\n                {m.icon ? <span className=\"opacity-70\">{m.icon}</span> : null}\n                <span>{m.label ?? m.text}</span>\n              </span>\n            );\n          })}\n        </div>\n      ) : null}\n\n      {card.actions ? (\n        <div\n          className=\"mt-2 flex justify-end gap-1.5\"\n          onClick={(e) => e.stopPropagation()}\n        >\n          {card.actions}\n        </div>\n      ) : null}\n    </Comp>\n  );\n}\n\nfunction SortableKanbanCard({ card, accent, onClick, isDraggable, dense }) {\n  const sortable = useSortable({\n    id: card.id,\n    data: { columnId: card.columnId, type: \"card\" },\n    disabled: !isDraggable,\n  });\n\n  const style = {\n    transform: CSS.Translate.toString(sortable.transform),\n    transition: sortable.transition,\n  };\n\n  return (\n    <div\n      ref={sortable.setNodeRef}\n      style={style}\n      {...(isDraggable ? sortable.attributes : {})}\n      {...(isDraggable ? sortable.listeners : {})}\n      className={isDraggable ? \"touch-none\" : undefined}\n    >\n      <KanbanCardBody\n        card={card}\n        accent={accent}\n        dragging={sortable.isDragging}\n        onClick={onClick}\n        dense={dense}\n      />\n    </div>\n  );\n}\n\nfunction KanbanColumn({\n  column,\n  cards,\n  accent,\n  onCardClick,\n  isDraggable,\n  dense,\n  showCounts,\n  showLimits,\n  emptyMessage,\n}) {\n  const droppable = useDroppable({\n    id: `column:${column.id}`,\n    data: { columnId: column.id, type: \"column\" },\n  });\n\n  const count = cards.length;\n  const overLimit = column.limit != null && count > column.limit;\n\n  return (\n    <div className=\"flex w-72 shrink-0 flex-col rounded-2xl border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900/60\">\n      <div className=\"flex items-center justify-between gap-2 border-b border-slate-200 px-3 py-2 dark:border-slate-800\">\n        <div className=\"flex min-w-0 items-center gap-2\">\n          <span\n            aria-hidden\n            className={[\n              \"h-2 w-2 shrink-0 rounded-full\",\n              ACCENT_DOT[column.accent ?? accent ?? \"default\"] ?? ACCENT_DOT.default,\n            ].join(\" \")}\n          />\n          <UIText as=\"div\" size=\"sm\" weight=\"medium\" className=\"truncate\">\n            {column.title}\n          </UIText>\n          {showCounts ? (\n            <UIChip\n              size=\"sm\"\n              variant=\"default\"\n              className={overLimit ? \"ring-1 ring-rose-500\" : undefined}\n            >\n              {showLimits && column.limit != null ? `${count} / ${column.limit}` : count}\n            </UIChip>\n          ) : null}\n        </div>\n        {column.actions ? <div className=\"shrink-0\">{column.actions}</div> : null}\n      </div>\n\n      <div\n        ref={droppable.setNodeRef}\n        className={[\n          \"flex flex-1 flex-col gap-2 overflow-y-auto p-2\",\n          droppable.isOver ? \"bg-brand-50/50 dark:bg-brand-950/30\" : \"\",\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        style={{ minHeight: 80 }}\n      >\n        <SortableContext\n          items={cards.map((c) => c.id)}\n          strategy={verticalListSortingStrategy}\n        >\n          {cards.length === 0 ? (\n            <div className=\"grid flex-1 place-items-center px-2 py-6\">\n              <UIText as=\"div\" size=\"xs\" muted className=\"text-center\">\n                {column.emptyMessage ?? emptyMessage ?? \"No items\"}\n              </UIText>\n            </div>\n          ) : (\n            cards.map((card) => (\n              <SortableKanbanCard\n                key={card.id}\n                card={card}\n                accent={accent}\n                onClick={onCardClick}\n                isDraggable={isDraggable}\n                dense={dense}\n              />\n            ))\n          )}\n        </SortableContext>\n      </div>\n\n      {column.footer ? (\n        <div className=\"border-t border-slate-200 px-3 py-2 text-xs text-slate-500 dark:border-slate-800 dark:text-slate-400\">\n          {column.footer}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport default function KanbanBoard({\n  columns = [],\n  cards = [],\n  title,\n  subtitle,\n  accent = \"default\",\n  isDraggable = true,\n  dense = false,\n  showColumnCounts = true,\n  showWipLimits = true,\n  emptyMessage = \"No items\",\n  loading = false,\n  error,\n  actions,\n  onCardClick,\n  onCardMove,\n  className = \"\",\n  ...cardProps\n}) {\n  const [activeId, setActiveId] = useState(null);\n  const [internalCards, setInternalCards] = useState(null);\n\n  const liveCards = internalCards ?? cards;\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })\n  );\n\n  const cardsByColumn = useMemo(() => {\n    const map = {};\n    for (const col of columns) map[col.id] = [];\n    for (const c of liveCards) {\n      const colId = c.columnId;\n      if (!map[colId]) map[colId] = [];\n      map[colId].push(c);\n    }\n    return map;\n  }, [columns, liveCards]);\n\n  const findColumnIdForCard = useCallback(\n    (cardId) => {\n      const card = liveCards.find((c) => c.id === cardId);\n      return card?.columnId ?? null;\n    },\n    [liveCards]\n  );\n\n  const resolveColumnId = useCallback(\n    (id) => {\n      if (!id) return null;\n      if (typeof id === \"string\" && id.startsWith(\"column:\")) return id.slice(\"column:\".length);\n      const card = liveCards.find((c) => c.id === id);\n      return card?.columnId ?? null;\n    },\n    [liveCards]\n  );\n\n  const handleDragStart = (event) => setActiveId(event.active.id);\n\n  const handleDragEnd = (event) => {\n    setActiveId(null);\n    const { active, over } = event;\n    if (!over) return;\n\n    const fromColumnId = findColumnIdForCard(active.id);\n    const toColumnId = resolveColumnId(over.id);\n    if (!fromColumnId || !toColumnId) return;\n\n    const fromList = (cardsByColumn[fromColumnId] ?? []).slice();\n    const toList =\n      fromColumnId === toColumnId ? fromList : (cardsByColumn[toColumnId] ?? []).slice();\n\n    const fromIndex = fromList.findIndex((c) => c.id === active.id);\n    let toIndex;\n\n    if (over.data?.current?.type === \"column\" || over.id === `column:${toColumnId}`) {\n      toIndex = toList.length;\n    } else {\n      toIndex = toList.findIndex((c) => c.id === over.id);\n      if (toIndex === -1) toIndex = toList.length;\n    }\n\n    if (fromColumnId === toColumnId && fromIndex === toIndex) return;\n\n    let nextCards;\n    if (fromColumnId === toColumnId) {\n      const reordered = arrayMove(fromList, fromIndex, toIndex);\n      const others = liveCards.filter((c) => c.columnId !== fromColumnId);\n      nextCards = [...others, ...reordered];\n    } else {\n      const moved = { ...fromList[fromIndex], columnId: toColumnId };\n      const newFrom = fromList.filter((c) => c.id !== active.id);\n      const newTo = toList.slice();\n      newTo.splice(toIndex, 0, moved);\n      const others = liveCards.filter(\n        (c) => c.columnId !== fromColumnId && c.columnId !== toColumnId\n      );\n      nextCards = [...others, ...newFrom, ...newTo];\n    }\n\n    if (onCardMove) {\n      onCardMove({\n        cardId: active.id,\n        fromColumnId,\n        toColumnId,\n        fromIndex,\n        toIndex,\n      });\n    } else {\n      setInternalCards(nextCards);\n    }\n  };\n\n  const activeCard = activeId ? liveCards.find((c) => c.id === activeId) : null;\n\n  const header =\n    title || subtitle || actions ? (\n      <div className=\"mb-3 flex items-start justify-between gap-3\">\n        <div className=\"min-w-0\">\n          {title ? (\n            <UIText as=\"div\" size=\"sm\" weight=\"medium\">\n              {title}\n            </UIText>\n          ) : null}\n          {subtitle ? (\n            <UIText as=\"div\" size=\"xs\" muted className=\"mt-1\">\n              {subtitle}\n            </UIText>\n          ) : null}\n        </div>\n        {actions ? <div className=\"shrink-0\">{actions}</div> : null}\n      </div>\n    ) : null;\n\n  const board = (\n    <div className=\"flex gap-3 overflow-x-auto pb-1\">\n      {columns.map((col) => (\n        <KanbanColumn\n          key={col.id}\n          column={col}\n          cards={cardsByColumn[col.id] ?? []}\n          accent={accent}\n          onCardClick={onCardClick}\n          isDraggable={isDraggable}\n          dense={dense}\n          showCounts={showColumnCounts}\n          showLimits={showWipLimits}\n          emptyMessage={emptyMessage}\n        />\n      ))}\n    </div>\n  );\n\n  return (\n    <BaseCard\n      padding=\"default\"\n      isLoading={loading}\n      className={className}\n      {...cardProps}\n    >\n      {header}\n      {error ? (\n        <div className=\"rounded-md border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700 dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-300\">\n          {String(error)}\n        </div>\n      ) : (\n        <DndContext\n          sensors={sensors}\n          collisionDetection={closestCenter}\n          onDragStart={handleDragStart}\n          onDragEnd={handleDragEnd}\n          onDragCancel={() => setActiveId(null)}\n        >\n          {board}\n          <DragOverlay>\n            {activeCard ? (\n              <KanbanCardBody card={activeCard} accent={accent} dragging dense={dense} />\n            ) : null}\n          </DragOverlay>\n        </DndContext>\n      )}\n    </BaseCard>\n  );\n}\n"],"names":["ACCENT_DOT","ACCENT_BORDER_LEFT","CardBadges","badges","jsx","b","i","React","UIChip","CardAvatar","avatar","title","KanbanCardBody","card","accent","dragging","onClick","dense","accentBorder","jsxs","UIText","m","e","SortableKanbanCard","isDraggable","sortable","useSortable","style","CSS","KanbanColumn","column","cards","onCardClick","showCounts","showLimits","emptyMessage","droppable","useDroppable","count","overLimit","SortableContext","c","verticalListSortingStrategy","KanbanBoard","columns","subtitle","showColumnCounts","showWipLimits","loading","error","actions","onCardMove","className","cardProps","activeId","setActiveId","useState","internalCards","setInternalCards","liveCards","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","cardsByColumn","useMemo","map","col","colId","findColumnIdForCard","useCallback","cardId","resolveColumnId","id","handleDragStart","event","handleDragEnd","active","over","fromColumnId","toColumnId","fromList","toList","fromIndex","toIndex","nextCards","reordered","arrayMove","moved","newFrom","newTo","activeCard","header","board","BaseCard","DndContext","closestCenter","DragOverlay"],"mappings":"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"}