@molecule/app-kanban-board-react 1.0.0

package/LICENSE

@@ -0,0 +1,115 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work.
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship.
+
+      "Contribution" shall mean any work of authorship, including the
+      original version of the Work and any modifications or additions
+      to that Work, that is intentionally submitted to the Licensor for
+      inclusion in the Work by the copyright owner or by an individual or
+      Legal Entity authorized to submit on behalf of the copyright owner.
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by the Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      patent license to make, have made, use, offer to sell, sell, import,
+      and otherwise transfer the Work.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file.
+
+   5. Submission of Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND.
+
+   8. Limitation of Liability. In no event and under no legal theory shall
+      any Contributor be liable to You for damages.
+
+   9. Accepting Warranty or Additional Liability.
+
+   Copyright 2026 Molecule Dev, Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/dist/KanbanBoard.d.ts

@@ -0,0 +1,38 @@
+import type { JSX, ReactNode } from 'react';
+import type { KanbanCardData, KanbanColumnData } from './types.js';
+/** Props for {@link KanbanBoard}. */
+export interface KanbanBoardProps {
+    columns: KanbanColumnData[];
+    /** Called when a card moves from one column to another. */
+    onCardMove?: (cardId: string, fromColumnId: string, toColumnId: string) => void;
+    /** Called when a card is clicked. */
+    onCardClick?: (card: KanbanCardData, column: KanbanColumnData) => void;
+    /** Optional per-column header action renderer. */
+    renderHeaderActions?: (column: KanbanColumnData) => ReactNode;
+    /** Optional per-column footer renderer (e.g. "+ Add card"). */
+    renderFooter?: (column: KanbanColumnData) => ReactNode;
+    /** Extra classes on the outer board wrapper. */
+    className?: string;
+}
+/**
+ * Kanban board with HTML5 drag-drop between columns.
+ *
+ * Pure UI — consumers own the card data and call back on `onCardMove`
+ * to persist reorder. For fancier drag experiences, wire
+ * `@molecule/app-drag-drop` at the column level instead.
+ *
+ * @param props - Component props (see {@link KanbanBoardProps}).
+ * @example
+ * ```tsx
+ * <KanbanBoard
+ *   columns={[
+ *     { id: 'todo', title: 'To do', cards: [...] },
+ *     { id: 'doing', title: 'In progress', cards: [...] },
+ *     { id: 'done', title: 'Done', cards: [...] },
+ *   ]}
+ *   onCardMove={(cardId, from, to) => moveCard(cardId, to)}
+ * />
+ * ```
+ */
+export declare function KanbanBoard({ columns, onCardMove, onCardClick, renderHeaderActions, renderFooter, className, }: KanbanBoardProps): JSX.Element;
+//# sourceMappingURL=KanbanBoard.d.ts.map

package/dist/KanbanBoard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanBoard.d.ts","sourceRoot":"","sources":["../src/KanbanBoard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAK3C,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAElE,qCAAqC;AACrC,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,2DAA2D;IAC3D,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/E,qCAAqC;IACrC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAA;IACtE,kDAAkD;IAClD,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,SAAS,CAAA;IAC7D,+DAA+D;IAC/D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,SAAS,CAAA;IACtD,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,UAAU,EACV,WAAW,EACX,mBAAmB,EACnB,YAAY,EACZ,SAAS,GACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAyDhC"}

package/dist/KanbanBoard.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassMap } from '@molecule/app-ui';
+import { KanbanColumn } from './KanbanColumn.js';
+/**
+ * Kanban board with HTML5 drag-drop between columns.
+ *
+ * Pure UI — consumers own the card data and call back on `onCardMove`
+ * to persist reorder. For fancier drag experiences, wire
+ * `@molecule/app-drag-drop` at the column level instead.
+ *
+ * @param props - Component props (see {@link KanbanBoardProps}).
+ * @example
+ * ```tsx
+ * <KanbanBoard
+ *   columns={[
+ *     { id: 'todo', title: 'To do', cards: [...] },
+ *     { id: 'doing', title: 'In progress', cards: [...] },
+ *     { id: 'done', title: 'Done', cards: [...] },
+ *   ]}
+ *   onCardMove={(cardId, from, to) => moveCard(cardId, to)}
+ * />
+ * ```
+ */
+export function KanbanBoard({ columns, onCardMove, onCardClick, renderHeaderActions, renderFooter, className, }) {
+    const cm = getClassMap();
+    /**
+     * Stores card identity in the drag payload so the drop handler knows the source column.
+     * @param card
+     * @param column
+     * @param e
+     */
+    function onCardDragStart(card, column, e) {
+        e.dataTransfer.setData('text/molecule-kanban', JSON.stringify({ cardId: card.id, fromColumnId: column.id }));
+        e.dataTransfer.effectAllowed = 'move';
+    }
+    /**
+     * Handles a card drop onto a column, parsing the drag payload and invoking onCardMove.
+     * @param column
+     * @param e
+     */
+    function onDrop(column, e) {
+        e.preventDefault();
+        const payload = e.dataTransfer.getData('text/molecule-kanban');
+        if (!payload || !onCardMove)
+            return;
+        try {
+            const { cardId, fromColumnId } = JSON.parse(payload);
+            if (fromColumnId !== column.id)
+                onCardMove(cardId, fromColumnId, column.id);
+        }
+        catch (_error) {
+            // Safe to ignore: dataTransfer payload is untrusted/malformed — we simply cancel the drop.
+        }
+    }
+    return (_jsx("div", { className: cm.cn(cm.flex({ align: 'start', gap: 'md' }), className), children: columns.map((col) => (_jsx("div", { className: cm.flex1, children: _jsx(KanbanColumn, { column: col, onCardClick: onCardClick, onDrop: onCardMove ? onDrop : undefined, onCardDragStart: onCardDragStart, headerActions: renderHeaderActions?.(col), footer: renderFooter?.(col) }) }, col.id))) }));
+}

package/dist/KanbanCard.d.ts

@@ -0,0 +1,23 @@
+import type { DragEvent, JSX } from 'react';
+import type { KanbanCardData } from './types.js';
+/** Props for {@link KanbanCard}. */
+export interface KanbanCardProps {
+    card: KanbanCardData;
+    /** Called when the card is clicked (e.g. open detail modal). */
+    onClick?: (card: KanbanCardData) => void;
+    /** HTML5 drag start — integrate with `@molecule/app-drag-drop` bond. */
+    onDragStart?: (card: KanbanCardData, e: DragEvent<HTMLDivElement>) => void;
+    /** Extra classes. */
+    className?: string;
+}
+/**
+ * Single card inside a Kanban column. Drag-drop is opt-in via the
+ * `onDragStart` prop — wire it to the `@molecule/app-drag-drop` bond or
+ * HTML5 drag-drop directly.
+ *
+ * The outer `<div>` wrapper carries the drag handlers so we don't rely
+ * on `<Card>` forwarding drag events (which it doesn't).
+ * @param props - Component props (see {@link KanbanCardProps}).
+ */
+export declare function KanbanCard({ card, onClick, onDragStart, className, }: KanbanCardProps): JSX.Element;
+//# sourceMappingURL=KanbanCard.d.ts.map

package/dist/KanbanCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanCard.d.ts","sourceRoot":"","sources":["../src/KanbanCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAa,MAAM,OAAO,CAAA;AAKtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAEhD,oCAAoC;AACpC,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,cAAc,CAAA;IACpB,gEAAgE;IAChE,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAA;IACxC,wEAAwE;IACxE,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,IAAI,CAAA;IAC1E,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,GACV,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAsB/B"}

package/dist/KanbanCard.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getClassMap } from '@molecule/app-ui';
+import { Card } from '@molecule/app-ui-react';
+/**
+ * Single card inside a Kanban column. Drag-drop is opt-in via the
+ * `onDragStart` prop — wire it to the `@molecule/app-drag-drop` bond or
+ * HTML5 drag-drop directly.
+ *
+ * The outer `<div>` wrapper carries the drag handlers so we don't rely
+ * on `<Card>` forwarding drag events (which it doesn't).
+ * @param props - Component props (see {@link KanbanCardProps}).
+ */
+export function KanbanCard({ card, onClick, onDragStart, className, }) {
+    const cm = getClassMap();
+    const body = (_jsx(Card, { className: cm.cn(cm.cursorPointer, className), onClick: onClick ? () => onClick(card) : undefined, children: _jsxs("div", { className: cm.stack(2), children: [_jsx("h4", { className: cm.cn(cm.textSize('sm'), cm.fontWeight('semibold')), children: card.title }), card.body && _jsx("div", { className: cm.textSize('sm'), children: card.body }), card.footer && (_jsx("div", { className: cm.flex({ align: 'center', gap: 'sm' }), children: card.footer }))] }) }));
+    if (!onDragStart)
+        return _jsx(_Fragment, { children: body });
+    return (_jsx("div", { draggable: true, onDragStart: (e) => onDragStart(card, e), children: body }));
+}

package/dist/KanbanColumn.d.ts

@@ -0,0 +1,24 @@
+import type { JSX, ReactNode } from 'react';
+import type { KanbanCardData, KanbanColumnData } from './types.js';
+/** Props for {@link KanbanColumn}. */
+export interface KanbanColumnProps {
+    column: KanbanColumnData;
+    /** Called when a card is clicked. */
+    onCardClick?: (card: KanbanCardData, column: KanbanColumnData) => void;
+    /** Called when a card is dragged into this column. */
+    onDrop?: (column: KanbanColumnData, e: React.DragEvent) => void;
+    /** Called when a card drag-start fires. */
+    onCardDragStart?: (card: KanbanCardData, column: KanbanColumnData, e: React.DragEvent) => void;
+    /** Optional header actions. */
+    headerActions?: ReactNode;
+    /** Optional footer (e.g. "Add card" button). */
+    footer?: ReactNode;
+    /** Extra classes. */
+    className?: string;
+}
+/**
+ * One Kanban column — sticky header + scrollable card list + optional footer.
+ * @param props - Component props (see {@link KanbanColumnProps}).
+ */
+export declare function KanbanColumn({ column, onCardClick, onDrop, onCardDragStart, headerActions, footer, className, }: KanbanColumnProps): JSX.Element;
+//# sourceMappingURL=KanbanColumn.d.ts.map

package/dist/KanbanColumn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanColumn.d.ts","sourceRoot":"","sources":["../src/KanbanColumn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAM3C,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAElE,sCAAsC;AACtC,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,gBAAgB,CAAA;IACxB,qCAAqC;IACrC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAA;IACtE,sDAAsD;IACtD,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,EAAE,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAA;IAC/D,2CAA2C;IAC3C,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,MAAM,EAAE,gBAAgB,EAAE,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAA;IAC9F,+BAA+B;IAC/B,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,gDAAgD;IAChD,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,WAAW,EACX,MAAM,EACN,eAAe,EACf,aAAa,EACb,MAAM,EACN,SAAS,GACV,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CA0BjC"}

package/dist/KanbanColumn.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassMap } from '@molecule/app-ui';
+import { KanbanCard } from './KanbanCard.js';
+import { KanbanColumnHeader } from './KanbanColumnHeader.js';
+/**
+ * One Kanban column — sticky header + scrollable card list + optional footer.
+ * @param props - Component props (see {@link KanbanColumnProps}).
+ */
+export function KanbanColumn({ column, onCardClick, onDrop, onCardDragStart, headerActions, footer, className, }) {
+    const cm = getClassMap();
+    return (_jsxs("section", { className: cm.cn(cm.stack(2), className), onDragOver: onDrop ? (e) => e.preventDefault() : undefined, onDrop: onDrop ? (e) => onDrop(column, e) : undefined, children: [_jsx(KanbanColumnHeader, { title: column.title, count: column.cards.length, actions: headerActions }), _jsx("div", { className: cm.stack(2), children: column.cards.map((card) => (_jsx(KanbanCard, { card: card, onClick: onCardClick ? (c) => onCardClick(c, column) : undefined, onDragStart: onCardDragStart ? (c, e) => onCardDragStart(c, column, e) : undefined }, card.id))) }), footer] }));
+}

package/dist/KanbanColumnHeader.d.ts

@@ -0,0 +1,17 @@
+import type { JSX, ReactNode } from 'react';
+/** Props for {@link KanbanColumnHeader}. */
+export interface KanbanColumnHeaderProps {
+    title: ReactNode;
+    /** Card count shown in parentheses. */
+    count?: number;
+    /** Optional right-side actions (add card button, menu). */
+    actions?: ReactNode;
+    /** Extra classes. */
+    className?: string;
+}
+/**
+ * Kanban column heading row — title + count + right actions.
+ * @param props - Component props (see {@link KanbanColumnHeaderProps}).
+ */
+export declare function KanbanColumnHeader({ title, count, actions, className, }: KanbanColumnHeaderProps): JSX.Element;
+//# sourceMappingURL=KanbanColumnHeader.d.ts.map

package/dist/KanbanColumnHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanColumnHeader.d.ts","sourceRoot":"","sources":["../src/KanbanColumnHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAI3C,4CAA4C;AAC5C,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,SAAS,CAAA;IAChB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2DAA2D;IAC3D,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,KAAK,EACL,OAAO,EACP,SAAS,GACV,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CAiBvC"}

package/dist/KanbanColumnHeader.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassMap } from '@molecule/app-ui';
+/**
+ * Kanban column heading row — title + count + right actions.
+ * @param props - Component props (see {@link KanbanColumnHeaderProps}).
+ */
+export function KanbanColumnHeader({ title, count, actions, className, }) {
+    const cm = getClassMap();
+    return (_jsxs("header", { className: cm.cn(cm.flex({ align: 'center', justify: 'between', gap: 'sm' }), cm.sp('pb', 2), className), children: [_jsxs("div", { className: cm.flex({ align: 'center', gap: 'xs' }), children: [_jsx("span", { className: cm.cn(cm.textSize('sm'), cm.fontWeight('semibold')), children: title }), typeof count === 'number' && _jsxs("span", { className: cm.textSize('xs'), children: ["(", count, ")"] })] }), actions] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,53 @@
+/**
+ * React Kanban board primitives (pure presentational — you own the data).
+ *
+ * Exports:
+ * - `<KanbanBoard>` — columns side-by-side with HTML5 drag-drop between columns.
+ *   Props: `columns`, `onCardMove?(cardId, fromColumnId, toColumnId)`,
+ *   `onCardClick?(card, column)`, `renderHeaderActions?(column)`,
+ *   `renderFooter?(column)`, `className?`.
+ * - `<KanbanColumn>` / `<KanbanColumnHeader>` / `<KanbanCard>` — the building blocks,
+ *   usable standalone for custom board layouts.
+ * - `KanbanColumnData` (`{ id, title, accent?, cards }`), `KanbanCardData`
+ *   (`{ id, title, body?, footer? }`) types.
+ *
+ * This package is standalone UI: it does NOT use the headless
+ * `@molecule/app-kanban` core or the `app-kanban-default` bond. Reach for those
+ * when you want board STATE management (move/add/remove logic) behind a bond;
+ * use this package when you just need the rendered board and will persist moves
+ * yourself in `onCardMove`.
+ *
+ * @remarks
+ * - Drag-drop is native HTML5 DnD: it does not fire on touch devices — provide
+ *   an alternate affordance (e.g. a move menu in `renderHeaderActions`) for mobile.
+ * - `onCardMove` fires only when a card is dropped on a DIFFERENT column, and no
+ *   insertion index is reported — same-column reordering is not supported; movers
+ *   can only append to the target column.
+ * - Consumers own the data: update your `columns` state in `onCardMove` or the
+ *   board will snap back on re-render.
+ * - `accent` on a column is currently cosmetic metadata only.
+ * - Styling resolves through `getClassMap()`; `<KanbanCard>` uses `<Card>` from
+ *   `@molecule/app-ui-react` — wire a ClassMap bond first.
+ *
+ * @example
+ * ```tsx
+ * import { KanbanBoard } from '@molecule/app-kanban-board-react'
+ *
+ * <KanbanBoard
+ *   columns={[
+ *     { id: 'todo', title: 'To Do', cards: [{ id: 'c1', title: 'Research API' }] },
+ *     { id: 'doing', title: 'In Progress', accent: 'primary', cards: [{ id: 'c2', title: 'Build UI' }] },
+ *     { id: 'done', title: 'Done', accent: 'success', cards: [] },
+ *   ]}
+ *   onCardMove={(cardId, fromColumnId, toColumnId) => moveCard(cardId, toColumnId)}
+ *   onCardClick={(card, column) => openCardDetail(card.id)}
+ * />
+ * ```
+ * @module
+ */
+export * from './KanbanBoard.js';
+export * from './KanbanCard.js';
+export * from './KanbanColumn.js';
+export * from './KanbanColumnHeader.js';
+export * from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AAEH,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,yBAAyB,CAAA;AACvC,cAAc,YAAY,CAAA"}

package/dist/index.js

@@ -0,0 +1,52 @@
+/**
+ * React Kanban board primitives (pure presentational — you own the data).
+ *
+ * Exports:
+ * - `<KanbanBoard>` — columns side-by-side with HTML5 drag-drop between columns.
+ *   Props: `columns`, `onCardMove?(cardId, fromColumnId, toColumnId)`,
+ *   `onCardClick?(card, column)`, `renderHeaderActions?(column)`,
+ *   `renderFooter?(column)`, `className?`.
+ * - `<KanbanColumn>` / `<KanbanColumnHeader>` / `<KanbanCard>` — the building blocks,
+ *   usable standalone for custom board layouts.
+ * - `KanbanColumnData` (`{ id, title, accent?, cards }`), `KanbanCardData`
+ *   (`{ id, title, body?, footer? }`) types.
+ *
+ * This package is standalone UI: it does NOT use the headless
+ * `@molecule/app-kanban` core or the `app-kanban-default` bond. Reach for those
+ * when you want board STATE management (move/add/remove logic) behind a bond;
+ * use this package when you just need the rendered board and will persist moves
+ * yourself in `onCardMove`.
+ *
+ * @remarks
+ * - Drag-drop is native HTML5 DnD: it does not fire on touch devices — provide
+ *   an alternate affordance (e.g. a move menu in `renderHeaderActions`) for mobile.
+ * - `onCardMove` fires only when a card is dropped on a DIFFERENT column, and no
+ *   insertion index is reported — same-column reordering is not supported; movers
+ *   can only append to the target column.
+ * - Consumers own the data: update your `columns` state in `onCardMove` or the
+ *   board will snap back on re-render.
+ * - `accent` on a column is currently cosmetic metadata only.
+ * - Styling resolves through `getClassMap()`; `<KanbanCard>` uses `<Card>` from
+ *   `@molecule/app-ui-react` — wire a ClassMap bond first.
+ *
+ * @example
+ * ```tsx
+ * import { KanbanBoard } from '@molecule/app-kanban-board-react'
+ *
+ * <KanbanBoard
+ *   columns={[
+ *     { id: 'todo', title: 'To Do', cards: [{ id: 'c1', title: 'Research API' }] },
+ *     { id: 'doing', title: 'In Progress', accent: 'primary', cards: [{ id: 'c2', title: 'Build UI' }] },
+ *     { id: 'done', title: 'Done', accent: 'success', cards: [] },
+ *   ]}
+ *   onCardMove={(cardId, fromColumnId, toColumnId) => moveCard(cardId, toColumnId)}
+ *   onCardClick={(card, column) => openCardDetail(card.id)}
+ * />
+ * ```
+ * @module
+ */
+export * from './KanbanBoard.js';
+export * from './KanbanCard.js';
+export * from './KanbanColumn.js';
+export * from './KanbanColumnHeader.js';
+export * from './types.js';

package/dist/types.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+/**
+ * Kanban board types.
+ *
+ * @module
+ */
+export interface KanbanCardData {
+    /** Card id. */
+    id: string;
+    /** Title / summary. */
+    title: ReactNode;
+    /** Optional body / description. */
+    body?: ReactNode;
+    /** Optional footer row (avatars, tags, timestamps). */
+    footer?: ReactNode;
+}
+/** Data for a single kanban column, including its heading, optional accent, and ordered card list. */
+export interface KanbanColumnData {
+    /** Column id. */
+    id: string;
+    /** Column heading. */
+    title: ReactNode;
+    /** Optional accent color token. */
+    accent?: 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    /** Cards in the column, in display order. */
+    cards: KanbanCardData[];
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,eAAe;IACf,EAAE,EAAE,MAAM,CAAA;IACV,uBAAuB;IACvB,KAAK,EAAE,SAAS,CAAA;IAChB,mCAAmC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB;AAED,sGAAsG;AACtG,MAAM,WAAW,gBAAgB;IAC/B,iBAAiB;IACjB,EAAE,EAAE,MAAM,CAAA;IACV,sBAAsB;IACtB,KAAK,EAAE,SAAS,CAAA;IAChB,mCAAmC;IACnC,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;IACzE,6CAA6C;IAC7C,KAAK,EAAE,cAAc,EAAE,CAAA;CACxB"}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@molecule/app-kanban-board-react",
+  "version": "1.0.0",
+  "description": "React Kanban board, column, and card primitives",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "molecule",
+    "kanban-board",
+    "react"
+  ],
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "@molecule/app-react": "^1.0.0",
+    "@molecule/app-ui": "^1.0.0",
+    "@molecule/app-ui-react": "^1.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@molecule/app-react": "1.0.0",
+    "@molecule/app-ui": "1.0.0",
+    "@molecule/app-ui-react": "1.0.0",
+    "@types/node": "26.1.2",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "typescript": "6.0.3",
+    "vitest": "4.1.10"
+  }
+}