@schandlergarcia/sf-web-components 2.3.17 → 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,46 @@ 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
+- **Engine brand assets** — deleted `brands/engine/` (global.css, app/, sample data, PRD, GraphQL schema, Engine logo, Engine-specific hooks like `useEvaAgent` and `useEngineLiveData`).
+- **Top-level `data/` directory** — removed all Engine Travel Command Center data, schema, agent API config, and the README/USAGE docs that documented Engine-only assets.
+- **`brand:engine` and `demo:engine` npm scripts** — removed from `package.json` and from the postinstall script that adds scripts to consuming projects.
+
+### Changed
+- **`src/styles/global.css` is now truly neutral** — replaced the `--color-engine-*` palette and the Cyan/Engine-Black brand ramp with a slate-based neutral `--color-brand-*` ramp; replaced the Engine-coded `.heroui-scope` (Engine Black `#0D1117`, Cyan `#7DCBD9`, Orange-Red `#FD4B23`, Amber `#FFB200`, Engine Blue `#157DE5`) with neutral `oklch()` defaults. The `:root` `--dash-*` tokens (which previously used Engine amber/cream) now use neutral slate/standard semantic colors.
+- **`scripts/apply-brand.mjs` is now brand-agnostic** — sample-data file copying discovers `*-sample-data.js` / `*-live-data.js` / `*-data.{js,ts}` files dynamically instead of hardcoding `engine-sample-data.js`, `engine-live-data.js`, `partner-hub-sample-data.js`. Logo copying discovers any `*.png|jpg|svg|webp|gif` file at the brand root instead of hardcoding `engine_logo.png`. Updated header docs to remove Engine examples.
+- **`CLAUDE.md` Brand System section rewritten** — removed the "Engine Brand" callout and the `brand:engine` example. Now explains the brand system as optional infrastructure (no brands ship by default) and documents the conventions a `brands/<name>/` folder can use.
+- **`README.md` Sample Data section removed** — the package no longer ships Engine Travel sample data.
+
+### Context
+- The package and its source files no longer carry any Engine Travel branding so it can be used as a neutral baseline for building a new app on top of the component library and Command Center builder. The brand system itself remains available; teams can drop their own brand under `brands/<name>/`.
+
 ## [2.3.17] - 2026-04-15
 
 ### Changed

package/CLAUDE.md

@@ -67,8 +67,7 @@ sf-web-components/
 │   │   └── workspace/         # CommandCenter.tsx.template
 │   ├── lib/                   # Utilities (utils.ts)
 │   └── styles/                # global.css with neutral brand tokens
-├── brands/
-│   └── engine/                # Engine brand (global.css, sample data, PRD, hooks)
+├── brands/                    # Optional brand bundles (none ship by default)
 ├── scripts/
 │   ├── postinstall.mjs        # Runs after npm install in consuming projects
 │   ├── apply-brand.mjs        # Apply/reset brand themes
@@ -86,23 +85,23 @@ sf-web-components/
 
 ## Brand System
 
-The package ships with a **neutral theme** by default. Opt into a specific brand:
+The package ships with a **neutral theme** by default. No brands ship out of the box; the brand system is optional infrastructure for layering custom themes/demo apps on top of the neutral baseline.
 
 ```bash
-npm run brand:engine    # Apply Engine brand (colors, sample data, PRD, hooks)
-npm run brand:reset     # Revert to neutral theme
-npm run brand:list      # Show available brands
+npm run brand:list      # Show available brands (empty by default)
+npm run brand:reset     # Restore neutral theme (clears any active brand)
 ```
 
-When a brand is active, the reset script (`npm run reset:command-center`) preserves the brand's `global.css` instead of restoring neutral. The `.brand` marker file tracks which brand is active.
+To add a brand, drop a folder under `brands/<name>/` containing any of:
 
-### Engine Brand
-- **Primary:** Engine Black `#0D1117`
-- **Accent:** Cyan `#7DCBD9`, Green `#1E9D6D`, Blue `#157DE5`
-- **Secondary:** Orange-Red `#FD4B23`, Amber `#FFB200`
-- **Neutrals:** Dark Gray `#616368`, Mid Gray `#B0B1B3`, Light Gray `#F3F3F4`
+- `global.css` — overrides applied to `src/styles/global.css`
+- `app/` — full demo app (pages, hooks, api, features) installed via `--demo`
+- `*.png` / `*.svg` — logo assets installed into `src/assets/images/`
+- `*-sample-data.js` / `*-live-data.js` — installed into `src/data/`
+- `*_PRD.md` / `*-prd.md` — product requirements docs copied to project root
+- `schema.graphql` — data schema copied to project root
 
-Installs: Engine-branded `global.css`, sample data, live data, PRD, GraphQL schema, Eva agent hook, agent config, and Engine logo.
+When a brand is active, the reset script (`npm run reset:command-center`) preserves the brand's `global.css` instead of restoring neutral. The `.brand` marker file tracks which brand is active.
 
 ## Key Conventions
 

package/README.md

@@ -75,21 +75,6 @@ This library includes:
 - Filter components
 - Layout components
 
-## Sample Data
-
-The package includes pre-seeded sample data in the `data/` directory:
-- **Engine Travel Command Center** sample data with real Salesforce field names
-- Dashboard-ready data (map markers, chart data, metrics, etc.)
-- Easy to swap for live data later
-
-**Copy to your project:**
-```bash
-# From your webapp directory
-cp node_modules/@schandlergarcia/sf-web-components/data/engine-sample-data.js src/data/
-```
-
-See `data/README.md` and `data/USAGE.md` in the package for full documentation.
-
 ## Utilities
 
 ```tsx

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