4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1ee0,"use client"; import { useEffect, useMemo } from "react"; import { DndContext, KeyboardSensor, PointerSensor, closestCenter, pointerWithin, rectIntersection, useSensor, useSensors, type CollisionDetection, } from "@dnd-kit/core"; import { sortableKeyboardCoordinates } from "@dnd-kit/sortable"; import { cn } from "@/lib/utils"; import { Board } from "./parts/board"; import { KanbanDragOverlay } from "./parts/drag-overlay"; import { useDragHandlers } from "./hooks/use-drag-handlers"; import { useKanbanState } from "./hooks/use-kanban-state"; import { useRendererMap } from "./hooks/use-renderer-map"; import { newColumnId, newItemId } from "./lib/ids"; import { DEFAULT_PALETTE } from "./lib/palette"; import { validateData } from "./lib/data"; import type { AnyKanbanCardRenderer, KanbanBoardProps, KanbanColumn, KanbanItem, } from "./types"; // Pointer-based collision detection so an item drops wherever the cursor is — // onto a card (reorder) or anywhere in a column's empty space / the column // wrapper (append to end), not only when a droppable's *center* is nearest. // Column reorder branches to center-of-columns-only so a card inside the target // column can't swallow the column drop. `rectIntersection` is a fling fallback // when the pointer isn't within any droppable. const kanbanCollisionDetection: CollisionDetection = (args) => { if (args.active.data.current?.kind === "column") { const columnsOnly = args.droppableContainers.filter( (c) => c.data.current?.kind === "column", ); return closestCenter({ ...args, droppableContainers: columnsOnly }); } const pointer = pointerWithin(args); return pointer.length > 0 ? pointer : rectIntersection(args); }; export function KanbanBoard({ renderers, data, defaultData, onChange, onItemCreate, onItemUpdate, onItemDelete, onColumnCreate, onColumnUpdate, onColumnDelete, onItemClick, onItemMove, palette, readOnly = false, "aria-label": ariaLabel = "Kanban board", className, }: KanbanBoardProps) { const [state, dispatch] = useKanbanState({ data, defaultData, onChange }); const rendererMap = useRendererMap(renderers); const palettePinned = useMemo(() => palette ?? DEFAULT_PALETTE, [palette]); // Internal drag handlers + create-handler still use positional shapes for // their internal contract. Adapt the public object-shape callbacks at this // boundary so dispatch / useDragHandlers / handleItemCreate stay untouched. const handlePartItemMove = onItemMove ? ( item: KanbanItem, from: { columnId: string; swimlaneId?: string }, to: { columnId: string; swimlaneId?: string }, ) => onItemMove({ item, from, to }) : undefined; // Mount-time validation (developer feedback only; doesn't block render). useEffect(() => { if (renderers.length === 0) { console.error( "[kanban-board] `renderers` prop is required and must contain at least one entry.", ); return; } const result = validateData(state, renderers); if (!result.valid) { for (const err of result.errors) { console.warn(`[kanban-board] ${err}`); } } // Re-validate when renderers OR data change, so duplicate-id / unknown-renderer // problems introduced by later (controlled) `data` updates are still surfaced. }, [renderers, state]); const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 5 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }), ); const { onDragStart, onDragOver, onDragEnd, onDragCancel, activeItem, activeRendererId, } = useDragHandlers({ data: state, readOnly, dispatch, onItemMove: handlePartItemMove, }); // Internal handlers translating UI events into reducer actions + consumer callbacks. function handleItemCreate(columnId: string, item: KanbanItem) { dispatch({ type: "create-item", columnId, item }); onItemCreate?.({ columnId, item }); } function handleItemUpdate(item: KanbanItem) { dispatch({ type: "update-item", item }); onItemUpdate?.(item); } function handleItemDelete(itemId: string) { dispatch({ type: "delete-item", itemId }); onItemDelete?.(itemId); } function handleColumnCreate(column: KanbanColumn) { dispatch({ type: "create-column", column }); onColumnCreate?.(column); } function handleColumnUpdate(column: KanbanColumn) { dispatch({ type: "update-column", column }); onColumnUpdate?.(column); } function handleColumnDelete(columnId: string) { dispatch({ type: "delete-column", columnId }); onColumnDelete?.(columnId); } function handleSetColor(columnId: string, color: string | undefined) { dispatch({ type: "set-color", columnId, color }); } function handleToggleCollapse(columnId: string) { dispatch({ type: "toggle-collapse", columnId }); } if (renderers.length === 0) { return (

kanban-board requires at least one renderer

); } // In readOnly mode, skip DnD wiring entirely. if (readOnly) { return (

); } return (

); } // Public helper exported for advanced consumers writing custom inline editors. export function findRenderer( renderers: AnyKanbanCardRenderer[], rendererId: string, ): AnyKanbanCardRenderer | undefined { return renderers.find((r) => r.id === rendererId); } // Re-export ID helpers for consumers building items / columns programmatically. export { newItemId, newColumnId }; 51:T11e1,import type { ReactNode } from "react"; export type KanbanRenderContext = { itemId: string; columnId: string; swimlaneId?: string; isDragging: boolean; isLocked: boolean; /** * Persist an edit to this item's `data` back into the board (additive, v0.4). * A renderer that owns its own edit UI (e.g. the card-tree adapter) calls this * with the next data; the board dispatches `update-item` and notifies `onItemUpdate`. * Undefined in read-only mode or when the item is locked. The renderer is * responsible for passing data of its own `TData` shape. */ onDataChange?: (nextData: unknown) => void; }; export type KanbanCardRenderer = { id: string; label: string; render: (data: TData, ctx: KanbanRenderContext) => ReactNode; newItem?: () => TData; editForm?: ( data: TData, onSave: (next: TData) => void, onCancel: () => void, ) => ReactNode; /** * Where the kanban-level drag listeners attach. * - `"shell"` (default): the entire item is the drag activator (cursor-grab on the whole card). * - `"header"`: only a thin grip strip rendered above the item activates dragging; the body * stays fully interactive. Use for renderers that own internal pointer interactions * (inline editors, nested DnD), e.g. the card-tree adapter. */ dragHandle?: "shell" | "header"; }; /** * Type-erased renderer used inside the board's registry. The board never reads * the data shape — it just hands data to the renderer's render fn — so erasing * TData here is sound. Consumers always interact with the typed * `KanbanCardRenderer` surface. */ // eslint-disable-next-line @typescript-eslint/no-explicit-any export type AnyKanbanCardRenderer = KanbanCardRenderer; export type KanbanItem = { id: string; rendererId: string; data: unknown; swimlaneId?: string; locked?: boolean; }; export type KanbanColumn = { id: string; title: string; description?: string; color?: string; collapsed?: boolean; items: KanbanItem[]; allowReorder?: boolean; allowIncoming?: boolean; allowOutgoing?: boolean; acceptsRendererIds?: string[]; maxItems?: number; }; export type KanbanSwimlane = { id: string; title: string; description?: string; color?: string; }; export type KanbanData = { columns: KanbanColumn[]; swimlanes?: KanbanSwimlane[]; }; export type KanbanPaletteSwatch = { id: string; label: string; cssVar: string; }; export type KanbanBoardProps = { renderers: AnyKanbanCardRenderer[]; data?: KanbanData; defaultData?: KanbanData; onChange?: (next: KanbanData) => void; /** Item-create handler — object-shape. v0.2 cutover from `(columnId, item)`. */ onItemCreate?: (args: { columnId: string; item: KanbanItem }) => void; onItemUpdate?: (item: KanbanItem) => void; onItemDelete?: (itemId: string) => void; onColumnCreate?: (column: KanbanColumn) => void; onColumnUpdate?: (column: KanbanColumn) => void; onColumnDelete?: (columnId: string) => void; onItemClick?: (item: KanbanItem) => void; /** Item-move handler — object-shape. v0.2 cutover from `(item, from, to)`. */ onItemMove?: (args: { item: KanbanItem; from: { columnId: string; swimlaneId?: string }; to: { columnId: string; swimlaneId?: string }; }) => void; palette?: KanbanPaletteSwatch[]; readOnly?: boolean; "aria-label"?: string; className?: string; }; export type KanbanCardData = { title: string; description?: string; tags?: { label: string; color?: string }[]; assignees?: { id: string; name: string; avatarUrl?: string }[]; /** Serializable cell value. Arbitrary nodes belong behind a renderer's `render` fn, not in JSON data. */ meta?: { key: string; label: string; value: string | number }[]; }; export type KanbanNoteData = { title: string; body?: string; color?: string; }; export type KanbanAction = | { type: "move-item"; itemId: string; toColumnId: string; toIndex: number; toSwimlaneId?: string } | { type: "reorder-column"; columnId: string; toIndex: number } | { type: "create-item"; columnId: string; item: KanbanItem; index?: number } | { type: "update-item"; item: KanbanItem } | { type: "delete-item"; itemId: string } | { type: "create-column"; column: KanbanColumn; index?: number } | { type: "update-column"; column: KanbanColumn } | { type: "delete-column"; columnId: string } | { type: "toggle-collapse"; columnId: string } | { type: "set-color"; columnId: string; color: string | undefined } | { type: "replace"; data: KanbanData }; 52:T14dd,import type { AnyKanbanCardRenderer, KanbanColumn, KanbanData, KanbanItem, } from "../types"; export function findItem( data: KanbanData, itemId: string, ): { item: KanbanItem; columnId: string; index: number } | null { for (const col of data.columns) { const idx = col.items.findIndex((it) => it.id === itemId); if (idx >= 0) return { item: col.items[idx], columnId: col.id, index: idx }; } return null; } export function findColumn( data: KanbanData, columnId: string, ): { column: KanbanColumn; index: number } | null { const idx = data.columns.findIndex((c) => c.id === columnId); if (idx < 0) return null; return { column: data.columns[idx], index: idx }; } export function moveItem( data: KanbanData, itemId: string, toColumnId: string, toIndex: number, toSwimlaneId?: string, ): KanbanData { const found = findItem(data, itemId); if (!found) return data; const movingItem: KanbanItem = { ...found.item, swimlaneId: toSwimlaneId !== undefined ? toSwimlaneId : found.item.swimlaneId, }; // Remove from source column. const stripped: KanbanColumn[] = data.columns.map((c) => { if (c.id !== found.columnId) return c; return { ...c, items: c.items.filter((it) => it.id !== itemId) }; }); // Insert into target column. Auto-expand if target was collapsed // (locked contract: "drop on collapsed → expand"; bundled into the move // action so it's atomic in both controlled and uncontrolled modes). const result = stripped.map((c) => { if (c.id !== toColumnId) return c; const next = c.items.slice(); const clamped = Math.max(0, Math.min(toIndex, next.length)); next.splice(clamped, 0, movingItem); return { ...c, items: next, collapsed: c.collapsed ? false : c.collapsed }; }); return { ...data, columns: result }; } export function reorderColumn( data: KanbanData, columnId: string, toIndex: number, ): KanbanData { const fromIdx = data.columns.findIndex((c) => c.id === columnId); if (fromIdx < 0) return data; const cols = data.columns.slice(); const [removed] = cols.splice(fromIdx, 1); const clamped = Math.max(0, Math.min(toIndex, cols.length)); cols.splice(clamped, 0, removed); return { ...data, columns: cols }; } export function addItem( data: KanbanData, columnId: string, item: KanbanItem, index?: number, ): KanbanData { return { ...data, columns: data.columns.map((c) => { if (c.id !== columnId) return c; const next = c.items.slice(); const at = index === undefined ? next.length : Math.max(0, Math.min(index, next.length)); next.splice(at, 0, item); return { ...c, items: next }; }), }; } export function updateItem(data: KanbanData, item: KanbanItem): KanbanData { return { ...data, columns: data.columns.map((c) => ({ ...c, items: c.items.map((it) => (it.id === item.id ? item : it)), })), }; } export function deleteItem(data: KanbanData, itemId: string): KanbanData { return { ...data, columns: data.columns.map((c) => ({ ...c, items: c.items.filter((it) => it.id !== itemId), })), }; } export function addColumn( data: KanbanData, column: KanbanColumn, index?: number, ): KanbanData { const next = data.columns.slice(); const at = index === undefined ? next.length : Math.max(0, Math.min(index, next.length)); next.splice(at, 0, column); return { ...data, columns: next }; } export function updateColumn(data: KanbanData, column: KanbanColumn): KanbanData { return { ...data, columns: data.columns.map((c) => (c.id === column.id ? column : c)), }; } export function deleteColumn(data: KanbanData, columnId: string): KanbanData { return { ...data, columns: data.columns.filter((c) => c.id !== columnId) }; } export function toggleCollapse(data: KanbanData, columnId: string): KanbanData { return { ...data, columns: data.columns.map((c) => c.id === columnId ? { ...c, collapsed: !c.collapsed } : c, ), }; } export function setColumnColor( data: KanbanData, columnId: string, color: string | undefined, ): KanbanData { return { ...data, columns: data.columns.map((c) => (c.id === columnId ? { ...c, color } : c)), }; } export type ValidationResult = { valid: boolean; errors: string[] }; export function validateData( data: KanbanData, renderers: AnyKanbanCardRenderer[], ): ValidationResult { const errors: string[] = []; const rendererIds = new Set(renderers.map((r) => r.id)); const swimlaneIds = new Set((data.swimlanes ?? []).map((l) => l.id)); const colIds = new Set(); const itemIds = new Set(); for (const col of data.columns) { if (colIds.has(col.id)) errors.push(`Duplicate column id: ${col.id}`); colIds.add(col.id); for (const item of col.items) { if (itemIds.has(item.id)) errors.push(`Duplicate item id: ${item.id}`); itemIds.add(item.id); if (!rendererIds.has(item.rendererId)) { errors.push(`Item ${item.id} references unknown renderer: ${item.rendererId}`); } if (item.swimlaneId && data.swimlanes && !swimlaneIds.has(item.swimlaneId)) { errors.push(`Item ${item.id} references unknown swimlane: ${item.swimlaneId}`); } } } return { valid: errors.length === 0, errors }; } 53:T4eb,import type { KanbanAction, KanbanData } from "../types"; import { addColumn, addItem, deleteColumn, deleteItem, moveItem, reorderColumn, setColumnColor, toggleCollapse, updateColumn, updateItem, } from "./data"; export function kanbanReducer(state: KanbanData, action: KanbanAction): KanbanData { switch (action.type) { case "move-item": return moveItem(state, action.itemId, action.toColumnId, action.toIndex, action.toSwimlaneId); case "reorder-column": return reorderColumn(state, action.columnId, action.toIndex); case "create-item": return addItem(state, action.columnId, action.item, action.index); case "update-item": return updateItem(state, action.item); case "delete-item": return deleteItem(state, action.itemId); case "create-column": return addColumn(state, action.column, action.index); case "update-column": return updateColumn(state, action.column); case "delete-column": return deleteColumn(state, action.columnId); case "toggle-collapse": return toggleCollapse(state, action.columnId); case "set-color": return setColumnColor(state, action.columnId, action.color); case "replace": return action.data; } } 54:T41e,import type { KanbanData } from "../types"; import { findColumn, findItem } from "./data"; export type CanDropArgs = { data: KanbanData; itemId: string; fromColumnId: string; toColumnId: string; fromSwimlaneId?: string; toSwimlaneId?: string; readOnly: boolean; }; export function canDrop(args: CanDropArgs): boolean { if (args.readOnly) return false; const found = findItem(args.data, args.itemId); if (!found) return false; if (found.item.locked) return false; const fromCol = findColumn(args.data, args.fromColumnId)?.column; const toCol = findColumn(args.data, args.toColumnId)?.column; if (!fromCol || !toCol) return false; const sameColumn = args.fromColumnId === args.toColumnId; if (sameColumn) { if (toCol.allowReorder === false) return false; } else { if (fromCol.allowOutgoing === false) return false; if (toCol.allowIncoming === false) return false; } if (toCol.acceptsRendererIds && !toCol.acceptsRendererIds.includes(found.item.rendererId)) { return false; } return true; } 55:T939,"use client"; import { useCallback, useEffect, useReducer, useRef } from "react"; import type { KanbanAction, KanbanData } from "../types"; import { kanbanReducer } from "../lib/reducer"; const EMPTY: KanbanData = { columns: [] }; export function useKanbanState({ data, defaultData, onChange, }: { data?: KanbanData; defaultData?: KanbanData; onChange?: (next: KanbanData) => void; }): [KanbanData, (action: KanbanAction) => void] { const [internal, internalDispatch] = useReducer(kanbanReducer, defaultData ?? EMPTY); const isControlled = data !== undefined; const state = isControlled ? data : internal; // Latest-state ref: `dispatch` computes `next` from here (and syncs it in // the same dispatch) instead of the render-captured `state`, so two // dispatches in one tick COMPOSE — the second sees the first's result // rather than silently dropping it (controlled mode's re-render, and // therefore a fresh `state` closure, only lands after the parent echoes). const latestRef = useRef(state); const committedRef = useRef(state); useEffect(() => { // Renders remain authoritative: a controlled parent that rejects or // rewrites an update wins back the ref on commit. latestRef.current = state; committedRef.current = state; }, [state]); const onChangeRef = useRef(onChange); useEffect(() => { onChangeRef.current = onChange; }, [onChange]); // The optimistic chain in latestRef only lives for the current tick. A // controlled parent that silently vetoes (no state change → no commit) // must not have the vetoed mutation re-emitted by the NEXT dispatch, so a // microtask falls back to the last committed state; a commit (echo or // rewrite) re-syncs both refs via the effect above and wins either way. const resetQueuedRef = useRef(false); const dispatch = useCallback( (action: KanbanAction) => { const next = kanbanReducer(latestRef.current, action); latestRef.current = next; if (!resetQueuedRef.current) { resetQueuedRef.current = true; queueMicrotask(() => { resetQueuedRef.current = false; latestRef.current = committedRef.current; }); } if (!isControlled) internalDispatch(action); onChangeRef.current?.(next); }, [isControlled], ); return [state, dispatch]; } 56:T17a3,"use client"; import { useCallback, useState } from "react"; import type { DragEndEvent, DragStartEvent } from "@dnd-kit/core"; import { findItem } from "../lib/data"; import { canDrop } from "../lib/permissions"; import type { KanbanAction, KanbanData, KanbanItem } from "../types"; type Active = | { kind: "item"; item: KanbanItem } | { kind: "column"; columnId: string } | null; export function useDragHandlers({ data, readOnly, dispatch, onItemMove, }: { data: KanbanData; readOnly: boolean; dispatch: (action: KanbanAction) => void; onItemMove?: ( item: KanbanItem, from: { columnId: string; swimlaneId?: string }, to: { columnId: string; swimlaneId?: string }, ) => void; }) { const [active, setActive] = useState(null); const onDragStart = useCallback( (event: DragStartEvent) => { if (readOnly) return; const activeData = event.active.data.current as | { kind: "item"; columnId: string; swimlaneId?: string; rendererId: string } | { kind: "column"; columnId: string } | undefined; if (!activeData) return; if (activeData.kind === "item") { const found = findItem(data, String(event.active.id)); if (found) setActive({ kind: "item", item: found.item }); } else if (activeData.kind === "column") { setActive({ kind: "column", columnId: activeData.columnId }); } }, [data, readOnly], ); const onDragOver = useCallback(() => { // Visual rejection is handled inside SwimlaneCell via column.acceptsRendererIds + activeRendererId. }, []); const onDragEnd = useCallback( (event: DragEndEvent) => { const { active: a, over } = event; setActive(null); if (!over || readOnly) return; const activeData = a.data.current as | { kind: "item"; columnId: string; swimlaneId?: string; rendererId: string } | { kind: "column"; columnId: string } | undefined; const overData = over.data.current as | { kind: "item"; columnId: string; swimlaneId?: string; rendererId: string } | { kind: "cell"; columnId: string; swimlaneId?: string } | { kind: "collapsed-column"; columnId: string } | { kind: "column"; columnId: string } | undefined; if (!activeData || !overData) return; // ─── Column reorder ─── if (activeData.kind === "column" && overData.kind === "column") { if (activeData.columnId === overData.columnId) return; const toIndex = data.columns.findIndex((c) => c.id === overData.columnId); if (toIndex < 0) return; dispatch({ type: "reorder-column", columnId: activeData.columnId, toIndex }); return; } // ─── Item move ─── if (activeData.kind !== "item") return; const itemId = String(a.id); const found = findItem(data, itemId); if (!found) return; let toColumnId: string | undefined; let toSwimlaneId: string | undefined; let toIndex = 0; if (overData.kind === "item") { const overFound = findItem(data, String(over.id)); if (!overFound) return; toColumnId = overFound.columnId; toSwimlaneId = overData.swimlaneId; const targetCol = data.columns.find((c) => c.id === toColumnId); if (!targetCol) return; toIndex = targetCol.items.findIndex((it) => it.id === over.id); if (toIndex < 0) toIndex = targetCol.items.length; } else if ( overData.kind === "cell" || overData.kind === "collapsed-column" || // An item released over a column's empty space (or onto the column // wrapper) lands at the end of that column. `kind: "column"` reaches // here only for an item drag — column reorder is handled above and // requires `activeData.kind === "column"`. overData.kind === "column" ) { toColumnId = overData.columnId; toSwimlaneId = "swimlaneId" in overData ? overData.swimlaneId : undefined; const targetCol = data.columns.find((c) => c.id === toColumnId); if (!targetCol) return; toIndex = targetCol.items.length; } else { return; } const allowed = canDrop({ data, itemId, fromColumnId: found.columnId, toColumnId, fromSwimlaneId: found.item.swimlaneId, toSwimlaneId, readOnly, }); if (!allowed) return; // For same-column moves, adjust toIndex to handle the // active-before-over case correctly. When the active item sits before // the over item in the same column, removing the active first shifts // the over item's index down by 1; inserting at the original over // index would land the active *after* over, not at over's slot. if (toColumnId === found.columnId && found.index < toIndex) { toIndex = toIndex - 1; } // No-op when index doesn't actually change in the same column. if ( toColumnId === found.columnId && toIndex === found.index && toSwimlaneId === found.item.swimlaneId ) { return; } // moveItem auto-expands collapsed target columns (locked contract baked // into the action so both controlled and uncontrolled modes apply it // atomically). dispatch({ type: "move-item", itemId, toColumnId, toIndex, toSwimlaneId, }); onItemMove?.( found.item, { columnId: found.columnId, swimlaneId: found.item.swimlaneId }, { columnId: toColumnId, swimlaneId: toSwimlaneId }, ); }, [data, dispatch, onItemMove, readOnly], ); const onDragCancel = useCallback(() => { setActive(null); }, []); const activeItem = active?.kind === "item" ? active.item : null; const activeRendererId = active?.kind === "item" ? active.item.rendererId : undefined; return { onDragStart, onDragOver, onDragEnd, onDragCancel, activeItem, activeRendererId }; } 57:T1066,"use client"; import { useEffect, useRef } from "react"; import { SortableContext, horizontalListSortingStrategy } from "@dnd-kit/sortable"; import { cn } from "@/lib/utils"; import type { AnyKanbanCardRenderer, KanbanColumn, KanbanData, KanbanItem, KanbanPaletteSwatch, KanbanSwimlane, } from "../types"; import { AddColumnButton } from "./add-column-button"; import { Column } from "./column"; export function Board({ data, swimlanes, rendererMap, renderers, palette, readOnly, activeRendererId, onItemCreate, onItemUpdate, onItemDelete, onItemClick, onItemDataChange, onColumnCreate, onColumnUpdate, onColumnDelete, onSetColor, onToggleCollapse, className, }: { data: KanbanData; swimlanes: KanbanSwimlane[] | undefined; rendererMap: Map; renderers: AnyKanbanCardRenderer[]; palette: KanbanPaletteSwatch[]; readOnly: boolean; activeRendererId: string | undefined; onItemCreate?: (columnId: string, item: KanbanItem) => void; onItemUpdate?: (item: KanbanItem) => void; onItemDelete?: (itemId: string) => void; onItemClick?: (item: KanbanItem) => void; onItemDataChange?: (item: KanbanItem) => void; onColumnCreate?: (column: KanbanColumn) => void; onColumnUpdate?: (column: KanbanColumn) => void; onColumnDelete?: (columnId: string) => void; onSetColor: (columnId: string, color: string | undefined) => void; onToggleCollapse: (columnId: string) => void; className?: string; }) { // Translate a vertical mouse-wheel delta into horizontal scroll so a plain // mouse can reach every column (a horizontal-only scroller ignores deltaY). // Yields to a column under the pointer that can still scroll vertically in // that direction. Attached non-passive because React's onWheel is passive — // a passive listener can't preventDefault to stop the page also scrolling. const scrollRef = useRef(null); useEffect(() => { const el = scrollRef.current; if (!el) return; const onWheel = (e: WheelEvent) => { if (e.deltaY === 0 || e.shiftKey) return; // shift+wheel already scrolls X if (el.scrollWidth <= el.clientWidth) return; // nothing to scroll horizontally let node = e.target as HTMLElement | null; while (node && node !== el) { const oy = getComputedStyle(node).overflowY; if ((oy === "auto" || oy === "scroll") && node.scrollHeight > node.clientHeight) { const atTop = node.scrollTop <= 0; const atBottom = Math.ceil(node.scrollTop + node.clientHeight) >= node.scrollHeight; if ((e.deltaY < 0 && !atTop) || (e.deltaY > 0 && !atBottom)) return; } node = node.parentElement; } el.scrollLeft += e.deltaY; e.preventDefault(); }; el.addEventListener("wheel", onWheel, { passive: false }); return () => el.removeEventListener("wheel", onWheel); }, []); return (

c.id)} strategy={horizontalListSortingStrategy} > {data.columns.map((column) => ( onItemCreate(column.id, item) : undefined} onItemUpdate={onItemUpdate} onItemDelete={onItemDelete} onItemClick={onItemClick} onItemDataChange={onItemDataChange} onColumnUpdate={onColumnUpdate} onColumnDelete={onColumnDelete} onSetColor={(color) => onSetColor(column.id, color)} onToggleCollapse={() => onToggleCollapse(column.id)} /> ))} {!readOnly && onColumnCreate ? : null}

); } 58:T10e7,"use client"; import { type CSSProperties, useState } from "react"; import { useSortable } from "@dnd-kit/sortable"; import { CSS } from "@dnd-kit/utilities"; import { cn } from "@/lib/utils"; import { findSwatch, swatchCssColor } from "../lib/palette"; import type { AnyKanbanCardRenderer, KanbanColumn, KanbanItem, KanbanPaletteSwatch, KanbanSwimlane, } from "../types"; import { ColumnBody } from "./column-body"; import { ColumnCollapsed } from "./column-collapsed"; import { ColumnFooter } from "./column-footer"; import { ColumnHeader } from "./column-header"; import { InlineEditEditor } from "./inline-edit-editor"; export function Column({ column, swimlanes, rendererMap, renderers, palette, readOnly, activeRendererId, onItemCreate, onItemUpdate, onItemDelete, onItemClick, onItemDataChange, onColumnUpdate, onColumnDelete, onSetColor, onToggleCollapse, }: { column: KanbanColumn; swimlanes: KanbanSwimlane[] | undefined; rendererMap: Map; renderers: AnyKanbanCardRenderer[]; palette: KanbanPaletteSwatch[]; readOnly: boolean; activeRendererId: string | undefined; onItemCreate?: (item: KanbanItem) => void; onItemUpdate?: (item: KanbanItem) => void; onItemDelete?: (itemId: string) => void; onItemClick?: (item: KanbanItem) => void; onItemDataChange?: (item: KanbanItem) => void; onColumnUpdate?: (column: KanbanColumn) => void; onColumnDelete?: (columnId: string) => void; onSetColor: (color: string | undefined) => void; onToggleCollapse: () => void; }) { const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id: column.id, data: { kind: "column", columnId: column.id }, disabled: readOnly, }); const [editingItem, setEditingItem] = useState(null); const swatch = findSwatch(palette, column.color); const accentColor = swatchCssColor(swatch); const style: CSSProperties = { transform: CSS.Transform.toString(transform), transition, ...(accentColor ? { borderLeftColor: accentColor } : {}), }; if (column.collapsed) { return (

); } const handleEdit = onItemUpdate ? (item: KanbanItem) => { const renderer = rendererMap.get(item.rendererId); if (!renderer?.editForm) { // Renderer doesn't support inline edit; just fire the callback with the existing item. onItemUpdate?.(item); return; } setEditingItem(item); } : undefined; return (

{editingItem ? (

{ onItemUpdate?.(next); setEditingItem(null); }} onCancel={() => setEditingItem(null)} />

) : null} {!readOnly && onItemCreate ? ( ) : null}

); } 59:Tf2d,"use client"; import { ChevronsLeft, MoreHorizontal, Pencil, Trash2 } from "lucide-react"; import { Button, buttonVariants } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { cn } from "@/lib/utils"; import type { KanbanColumn, KanbanPaletteSwatch } from "../types"; import { ColumnColorPicker } from "./color-picker"; export function ColumnHeader({ column, palette, readOnly, itemCount, dragHandleProps, onColorChange, onCollapse, onEdit, onDelete, }: { column: KanbanColumn; palette: KanbanPaletteSwatch[]; readOnly: boolean; itemCount: number; dragHandleProps?: Record; onColorChange: (color: string | undefined) => void; onCollapse: () => void; onEdit?: (column: KanbanColumn) => void; onDelete?: (columnId: string) => void; }) { const showMenu = !readOnly && (onEdit || onDelete); const overCap = column.maxItems !== undefined && itemCount > column.maxItems; return (

{column.title} {column.maxItems !== undefined ? `${itemCount} / ${column.maxItems}` : itemCount}

e.stopPropagation()}> {!readOnly ? ( ) : null} {showMenu ? ( {/* F-cross-13 path-b: trigger IS the button (native

); } 5a:Tb95,"use client"; import { cn } from "@/lib/utils"; import type { AnyKanbanCardRenderer, KanbanColumn, KanbanItem, KanbanSwimlane, } from "../types"; import { SwimlaneCell } from "./swimlane-cell"; export function ColumnBody({ column, swimlanes, rendererMap, readOnly, activeRendererId, onItemClick, onItemDelete, onItemEdit, onItemDataChange, }: { column: KanbanColumn; swimlanes: KanbanSwimlane[] | undefined; rendererMap: Map; readOnly: boolean; activeRendererId: string | undefined; onItemClick?: (item: KanbanItem) => void; onItemDelete?: (itemId: string) => void; onItemEdit?: (item: KanbanItem) => void; onItemDataChange?: (item: KanbanItem) => void; }) { // A drop is rejected if there's an active drag and this column doesn't accept that renderer. const rejectDrop = activeRendererId !== undefined && column.acceptsRendererIds !== undefined && !column.acceptsRendererIds.includes(activeRendererId); const hasSwimlanes = !!(swimlanes && swimlanes.length > 0); const lanes: (KanbanSwimlane | undefined)[] = swimlanes && swimlanes.length > 0 ? swimlanes : [undefined]; return (

{/* In single-lane mode the lone cell grows to fill the column so the whole empty area below the cards is a (highlighted) drop target. In swimlane mode each lane cell stays content-sized so the lanes stack + scroll. */}

{lanes.map((lane) => { const items = column.items.filter((it) => { if (!swimlanes || swimlanes.length === 0) return true; // If item's swimlaneId is missing or unknown, it lands in the first lane. const known = swimlanes.some((l) => l.id === it.swimlaneId); if (!known) return lane?.id === swimlanes[0].id; return it.swimlaneId === lane?.id; }); return (

{lane ? ( {lane.title} ) : null}

); })}

); } 5b:T6c4,"use client"; import { useDroppable } from "@dnd-kit/core"; import { ChevronsRight } from "lucide-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { swatchCssColor, findSwatch } from "../lib/palette"; import type { KanbanColumn, KanbanPaletteSwatch } from "../types"; export function ColumnCollapsed({ column, palette, onExpand, }: { column: KanbanColumn; palette: KanbanPaletteSwatch[]; onExpand: () => void; }) { const { setNodeRef, isOver } = useDroppable({ id: `${column.id}::collapsed`, data: { kind: "collapsed-column", columnId: column.id }, }); const swatch = findSwatch(palette, column.color); const accentColor = swatchCssColor(swatch); return (

{column.title}

{column.items.length}

); } 5c:T7bc,"use client"; import { useState } from "react"; import { Plus } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { newColumnId } from "../lib/ids"; import type { KanbanColumn } from "../types"; export function AddColumnButton({ onCreate, }: { onCreate: (column: KanbanColumn) => void; }) { const [editing, setEditing] = useState(false); const [title, setTitle] = useState(""); function handleSave() { if (!title.trim()) return; onCreate({ id: newColumnId(), title: title.trim(), items: [] }); setTitle(""); setEditing(false); } if (editing) { return ( ); } return ( ); } 5d:Ta9c,"use client"; import { useDroppable } from "@dnd-kit/core"; import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable"; import { cn } from "@/lib/utils"; import type { AnyKanbanCardRenderer, KanbanColumn, KanbanItem, } from "../types"; import { ItemShell } from "./item-shell"; export function makeCellId(columnId: string, swimlaneId: string | undefined): string { return `${columnId}::${swimlaneId ?? "_"}`; } export function SwimlaneCell({ column, swimlaneId, items, rendererMap, readOnly, rejectDrop, grow, onItemClick, onItemDelete, onItemEdit, onItemDataChange, }: { column: KanbanColumn; swimlaneId: string | undefined; items: KanbanItem[]; rendererMap: Map; readOnly: boolean; rejectDrop: boolean; /** Fill the available column height so the whole empty area is a drop target (single-lane mode). */ grow?: boolean; onItemClick?: (item: KanbanItem) => void; onItemDelete?: (itemId: string) => void; onItemEdit?: (item: KanbanItem) => void; onItemDataChange?: (item: KanbanItem) => void; }) { const cellId = makeCellId(column.id, swimlaneId); const { setNodeRef, isOver } = useDroppable({ id: cellId, data: { kind: "cell", columnId: column.id, swimlaneId }, }); return ( it.id)} strategy={verticalListSortingStrategy}>

{items.map((item) => { const renderer = rendererMap.get(item.rendererId); const label = renderer?.label ?? "Item"; return ( ); })} {items.length === 0 ? (

Empty

) : null}

); } 5e:T1cdc,"use client"; import { type CSSProperties, type KeyboardEvent, type MouseEvent, type PointerEvent } from "react"; import { useSortable } from "@dnd-kit/sortable"; import { CSS } from "@dnd-kit/utilities"; import { GripVertical, Lock, X } from "lucide-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import type { AnyKanbanCardRenderer, KanbanItem, KanbanRenderContext, } from "../types"; import { ItemRenderer } from "./item-renderer"; export function ItemShell({ item, columnId, swimlaneId, rendererMap, rendererLabel, readOnly, onClick, onDelete, onEdit, onItemDataChange, }: { item: KanbanItem; columnId: string; swimlaneId?: string; rendererMap: Map; rendererLabel: string; readOnly: boolean; onClick?: (item: KanbanItem) => void; onDelete?: (itemId: string) => void; onEdit?: (item: KanbanItem) => void; /** Persist an in-place data edit from a self-editing renderer back to the board. */ onItemDataChange?: (item: KanbanItem) => void; }) { const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: item.id, data: { kind: "item", columnId, swimlaneId, rendererId: item.rendererId }, disabled: readOnly || item.locked === true, }); const style: CSSProperties = { transform: CSS.Transform.toString(transform), transition, }; const renderer = rendererMap.get(item.rendererId); const handleMode = renderer?.dragHandle ?? "shell"; const dragDisabled = readOnly || item.locked === true; const ctx: KanbanRenderContext = { itemId: item.id, columnId, swimlaneId, isDragging, isLocked: item.locked === true, onDataChange: onItemDataChange && !readOnly && item.locked !== true ? (nextData: unknown) => onItemDataChange({ ...item, data: nextData }) : undefined, }; function handleClick(e: MouseEvent) { if (isDragging) return; // Avoid handling clicks bubbling from interactive children (buttons, links, anything tagged data-stop-click). const target = e.target as HTMLElement; if (target.closest("button, a, [data-stop-click]")) return; onClick?.(item); } function handleKeyDown(e: KeyboardEvent) { if (e.key === "Enter") { e.preventDefault(); onClick?.(item); } } // Stop pointer events on overlay buttons from triggering drag activation. function stopPointer(e: PointerEvent) { e.stopPropagation(); } const ariaLabel = item.locked ? `${rendererLabel}, locked` : `${rendererLabel}, draggable`; // In "shell" mode the whole card is the drag activator (existing behavior). // In "header" mode only the top grip strip activates drag; body is fully interactive. const shellListeners = handleMode === "shell" && !dragDisabled ? listeners : undefined; const headerListeners = handleMode === "header" && !dragDisabled ? listeners : undefined; return (

inside button (Edit/Delete are inner buttons). {...attributes} {...shellListeners} role="article" aria-roledescription={ariaLabel} onClick={handleClick} onKeyDown={handleKeyDown} className={cn( "group relative outline-none", "rounded-md focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background", handleMode === "shell" && !dragDisabled && "cursor-grab active:cursor-grabbing", dragDisabled && "cursor-default", isDragging && "opacity-40", )} > {/* Header drag handle — appears above the item body in "header" mode. Click/tap on the grip activates dnd-kit drag; rest of the body is unaffected. */} {handleMode === "header" && !dragDisabled ? ( // The strip extends a little below the grip (`pb-2`) and the card body // below is pulled up over that extension (`-mt-2 z-10`, see the // ItemRenderer wrapper) so the card's rounded top + opaque surface cover // the strip's square bottom corners — no "notch" beside the rounded card.

drag

) : null} {/* Action overlay — only visible on hover/focus. Pointer events stop propagation so clicks on the buttons don't trigger drag activation or the parent click. */}

{item.locked ? ( ) : null} {!readOnly && !item.locked && onEdit ? ( ) : null} {!readOnly && !item.locked && onDelete ? ( ) : null}

{/* In header mode, overlap the strip's bottom extension so the card body (with its own rounded top + surface) masks the strip's square corners. */}

{handleMode === "shell" && !readOnly && !item.locked ? ( ) : null}

); } 5f:Tc5c,"use client"; import { useState } from "react"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Button, buttonVariants } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { Plus } from "lucide-react"; import { newItemId } from "../lib/ids"; import type { AnyKanbanCardRenderer, KanbanItem } from "../types"; type Mode = | { kind: "idle" } | { kind: "editing"; rendererId: string; data: unknown }; export function InlineCreateEditor({ renderers, onCreate, }: { renderers: AnyKanbanCardRenderer[]; onCreate: (item: KanbanItem) => void; }) { const [mode, setMode] = useState({ kind: "idle" }); function startCreate(renderer: AnyKanbanCardRenderer) { if (renderer.editForm && renderer.newItem) { setMode({ kind: "editing", rendererId: renderer.id, data: renderer.newItem() }); } else { // No inline editor; emit stub item and let consumer handle it. const stub: KanbanItem = { id: newItemId(), rendererId: renderer.id, data: renderer.newItem ? renderer.newItem() : {}, }; onCreate(stub); } } function handleSave(next: unknown) { if (mode.kind !== "editing") return; onCreate({ id: newItemId(), rendererId: mode.rendererId, data: next }); setMode({ kind: "idle" }); } function handleCancel() { setMode({ kind: "idle" }); } if (mode.kind === "editing") { const renderer = renderers.find((r) => r.id === mode.rendererId); if (renderer?.editForm) { return <>{renderer.editForm(mode.data, handleSave, handleCancel)}; } setMode({ kind: "idle" }); return null; } // Idle: show the trigger button. If 1 renderer, click → start. If ≥2, open picker. if (renderers.length === 1) { return ( ); } return ( {/* F-cross-13 path-b: trigger IS the button (native ); })} ); } 61:T847,"use client"; import { useSyncExternalStore } from "react"; import { createPortal } from "react-dom"; import { DragOverlay } from "@dnd-kit/core"; import { cn } from "@/lib/utils"; import type { AnyKanbanCardRenderer, KanbanItem, KanbanRenderContext } from "../types"; import { ItemRenderer } from "./item-renderer"; export function KanbanDragOverlay({ activeItem, rendererMap, }: { activeItem: KanbanItem | null; rendererMap: Map; }) { // Portal the overlay into so a transformed ancestor above the board // can't become the containing block for dnd-kit's `position: fixed` overlay // and offset the drag ghost from the pointer. (`transform`, `filter`, // `perspective`, `will-change: transform`, and `contain: paint` all create a // containing block — entrance-animation wrappers are the common culprit.) // React context flows through portals, so the overlay stays bound to // DndContext. Gate on a client-mount flag so SSR / pre-hydration renders // nothing (document is absent on the server). `useSyncExternalStore` with a // `false` server snapshot is the repo's SSR-safe client-detect primitive — // it avoids the React-19 set-state-in-effect antipattern. const mounted = useSyncExternalStore( () => () => {}, () => true, () => false, ); const overlay = ( {activeItem ? (

) : null} ); if (!mounted) return null; return createPortal(overlay, document.body); } 62:T1144,"use client"; import { useState } from "react"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Textarea } from "@/components/ui/textarea"; import { cn } from "@/lib/utils"; import type { KanbanCardData, KanbanCardRenderer, KanbanRenderContext } from "../types"; function initials(name: string): string { return name .split(/\s+/) .filter(Boolean) .slice(0, 2) .map((p) => p[0]?.toUpperCase() ?? "") .join(""); } export function KanbanCardView({ data, ctx, }: { data: KanbanCardData; ctx: KanbanRenderContext; }) { return (

{data.title}

{data.description ? (

{data.description}

) : null} {data.tags && data.tags.length > 0 ? (

{data.tags.map((tag, i) => ( {tag.label} ))}

) : null} {data.meta && data.meta.length > 0 ? (

{m.label}: {m.value}

) : null} {data.assignees && data.assignees.length > 0 ? (

{data.assignees.slice(0, 5).map((a) => ( {a.avatarUrl ? : null} {initials(a.name)} ))} {data.assignees.length > 5 ? ( +{data.assignees.length - 5} ) : null}

) : null}

); } function KanbanCardEditForm({ data, onSave, onCancel, }: { data: KanbanCardData; onSave: (next: KanbanCardData) => void; onCancel: () => void; }) { const [title, setTitle] = useState(data.title); const [description, setDescription] = useState(data.description ?? ""); function handleSave() { if (!title.trim()) return; onSave({ ...data, title: title.trim(), description: description.trim() || undefined }); } return (

{ e.preventDefault(); handleSave(); }} className="flex flex-col gap-2 rounded-md border border-border bg-card p-3" > setTitle(e.target.value)} placeholder="Card title" autoFocus className="h-8 text-sm" />

setDescription(e.target.value)}
        placeholder="Description (optional)"
        rows={2}
        className="resize-none text-xs"
      />
      <div className="flex justify-end gap-1">
        <Button type="button" variant="ghost" size="sm" onClick={onCancel}>
          Cancel
        </Button>
        <Button type="submit" size="sm" disabled={!title.trim()}>
          Save
        </Button>
      </div>
    </form>
  );
}

export const kanbanCardRenderer: KanbanCardRenderer<KanbanCardData> = {
  id: "kanban-card",
  label: "Card",
  render: (data, ctx) => <KanbanCardView data={data} ctx={ctx} />,
  newItem: () => ({ title: "" }),
  editForm: (data, onSave, onCancel) => (
    <KanbanCardEditForm data={data} onSave={onSave} onCancel={onCancel} />
  ),
};
63:Te1e,"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";
import { DEFAULT_PALETTE, findSwatch, swatchCssColor } from "../lib/palette";
import type { KanbanCardRenderer, KanbanNoteData, KanbanRenderContext } from "../types";

// `data.color` keys into the kanban palette (KanbanNoteData.color); default
// "amber" preserves the v0.1 visual (amber-tinted note) but via the swatch's
// --chart-1 token instead of hardcoded `amber-*` Tailwind classes — keeps the
// component honest to the project's design-system mandate. Consumers using a
// custom board-level `palette` prop see DEFAULT_PALETTE here in v0.2.1; full
// palette propagation through `KanbanRenderContext` is a v0.3 follow-up
// (would be additive — no breaking change).
const NOTE_FALLBACK_COLOR_ID = "amber";

export function KanbanNoteView({
  data,
  ctx,
}: {
  data: KanbanNoteData;
  ctx: KanbanRenderContext;
}) {
  const swatch = findSwatch(DEFAULT_PALETTE, data.color ?? NOTE_FALLBACK_COLOR_ID);
  const accentColor = swatchCssColor(swatch);
  return (
    <div
      className={cn(
        "flex flex-col gap-1 rounded-md border-l-2 border-y border-r border-border bg-muted/40 p-2.5",
        "transition-shadow",
        ctx.isDragging && "shadow-md",
        ctx.isLocked && "opacity-90",
      )}
      style={accentColor ? { borderLeftColor: accentColor } : undefined}
    >
      <span className="text-xs font-semibold tracking-wide uppercase text-foreground">
        {data.title}
      </span>
      {data.body ? (
        <p className="text-xs leading-relaxed text-foreground/80">{data.body}</p>
      ) : null}
    </div>
  );
}

function KanbanNoteEditForm({
  data,
  onSave,
  onCancel,
}: {
  data: KanbanNoteData;
  onSave: (next: KanbanNoteData) => void;
  onCancel: () => void;
}) {
  const [title, setTitle] = useState(data.title);
  const [body, setBody] = useState(data.body ?? "");
  const swatch = findSwatch(DEFAULT_PALETTE, data.color ?? NOTE_FALLBACK_COLOR_ID);
  const accentColor = swatchCssColor(swatch);

function handleSave() {
    if (!title.trim()) return;
    onSave({ ...data, title: title.trim(), body: body.trim() || undefined });
  }

return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        handleSave();
      }}
      className="flex flex-col gap-2 rounded-md border-l-2 border-y border-r border-border bg-muted/40 p-2.5"
      style={accentColor ? { borderLeftColor: accentColor } : undefined}
    >
      <Input
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Note title"
        autoFocus
        className="h-7 text-xs"
      />
      <Textarea
        value={body}
        onChange={(e) => setBody(e.target.value)}
        placeholder="Body (optional)"
        rows={2}
        className="resize-none text-xs"
      />
      <div className="flex justify-end gap-1">
        <Button type="button" variant="ghost" size="sm" onClick={onCancel}>
          Cancel
        </Button>
        <Button type="submit" size="sm" disabled={!title.trim()}>
          Save
        </Button>
      </div>
    </form>
  );
}

export const kanbanNoteRenderer: KanbanCardRenderer<KanbanNoteData> = {
  id: "kanban-note",
  label: "Note",
  render: (data, ctx) => <KanbanNoteView data={data} ctx={ctx} />,
  newItem: () => ({ title: "" }),
  editForm: (data, onSave, onCancel) => (
    <KanbanNoteEditForm data={data} onSave={onSave} onCancel={onCancel} />
  ),
};
4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@dnd-kit/core",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Fcore","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@dnd-kit/core"}]]}]}],["$","li","@dnd-kit/sortable",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Fsortable","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@dnd-kit/sortable"}]]}]}],["$","li","@dnd-kit/utilities",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Futilities","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@dnd-kit/utilities"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@ilinxa","registryDependencies":["avatar","badge","button","dropdown-menu","input","popover","textarea"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/registry/components/data/kanban-board/kanban-board.tsx","content":"$50","type":"registry:component","target":"components/kanban-board/kanban-board.tsx"},{"path":"src/registry/components/data/kanban-board/index.ts","content":"export { KanbanBoard, findRenderer, newColumnId, newItemId } from \"./kanban-board\";\nexport { kanbanCardRenderer, KanbanCardView } from \"./parts/kanban-card\";\nexport { kanbanNoteRenderer, KanbanNoteView } from \"./parts/kanban-note\";\nexport { DEFAULT_PALETTE } from \"./lib/palette\";\nexport { validateData } from \"./lib/data\";\nexport type {\n  // Type-erased renderer. Consumers normally build typed\n  // `KanbanCardRenderer<TData>` values, but this is the declared element type\n  // of `KanbanBoardProps[\"renderers\"]` and of the exported `findRenderer`'s\n  // first parameter, so it has to be nameable\n  // (validate:barrel-exports, 2026-08-17).\n  AnyKanbanCardRenderer,\n  KanbanBoardProps,\n  KanbanCardData,\n  KanbanCardRenderer,\n  KanbanColumn,\n  KanbanData,\n  KanbanItem,\n  KanbanNoteData,\n  KanbanPaletteSwatch,\n  KanbanRenderContext,\n  KanbanSwimlane,\n} from \"./types\";\n","type":"registry:component","target":"components/kanban-board/index.ts"},{"path":"src/registry/components/data/kanban-board/types.ts","content":"$51","type":"registry:component","target":"components/kanban-board/types.ts"},{"path":"src/registry/components/data/kanban-board/lib/data.ts","content":"$52","type":"registry:component","target":"components/kanban-board/lib/data.ts"},{"path":"src/registry/components/data/kanban-board/lib/reducer.ts","content":"$53","type":"registry:component","target":"components/kanban-board/lib/reducer.ts"},{"path":"src/registry/components/data/kanban-board/lib/permissions.ts","content":"$54","type":"registry:component","target":"components/kanban-board/lib/permissions.ts"},{"path":"src/registry/components/data/kanban-board/lib/ids.ts","content":"// Non-authoritative client-side draft ids — stable only within a session.\n// The consumer/server remains the source of truth for persistent ids.\nlet counter = 0;\n\nfunction rand(): string {\n  // Prefer crypto for collision resistance; fall back for older runtimes.\n  if (typeof crypto !== \"undefined\" && typeof crypto.randomUUID === \"function\") {\n    return crypto.randomUUID().slice(0, 8);\n  }\n  return Math.random().toString(36).slice(2, 8);\n}\n\nexport function newItemId(): string {\n  counter += 1;\n  return `item-${rand()}-${counter.toString(36)}`;\n}\n\nexport function newColumnId(): string {\n  counter += 1;\n  return `col-${rand()}-${counter.toString(36)}`;\n}\n","type":"registry:component","target":"components/kanban-board/lib/ids.ts"},{"path":"src/registry/components/data/kanban-board/lib/palette.ts","content":"import type { KanbanPaletteSwatch } from \"../types\";\n\nexport const DEFAULT_PALETTE: KanbanPaletteSwatch[] = [\n  { id: \"slate\", label: \"Slate\", cssVar: \"--muted-foreground\" },\n  { id: \"lime\", label: \"Lime\", cssVar: \"--primary\" },\n  { id: \"amber\", label: \"Amber\", cssVar: \"--chart-1\" },\n  { id: \"emerald\", label: \"Emerald\", cssVar: \"--chart-2\" },\n  { id: \"sky\", label: \"Sky\", cssVar: \"--chart-3\" },\n  { id: \"rose\", label: \"Rose\", cssVar: \"--destructive\" },\n];\n\nexport function findSwatch(\n  palette: KanbanPaletteSwatch[],\n  id: string | undefined,\n): KanbanPaletteSwatch | undefined {\n  if (!id) return undefined;\n  return palette.find((s) => s.id === id);\n}\n\nexport function swatchCssColor(swatch: KanbanPaletteSwatch | undefined): string | undefined {\n  if (!swatch) return undefined;\n  return `var(${swatch.cssVar})`;\n}\n","type":"registry:component","target":"components/kanban-board/lib/palette.ts"},{"path":"src/registry/components/data/kanban-board/hooks/use-kanban-state.ts","content":"$55","type":"registry:component","target":"components/kanban-board/hooks/use-kanban-state.ts"},{"path":"src/registry/components/data/kanban-board/hooks/use-renderer-map.ts","content":"\"use client\";\n\nimport { useMemo } from \"react\";\nimport type { AnyKanbanCardRenderer } from \"../types\";\n\nexport function useRendererMap(\n  renderers: AnyKanbanCardRenderer[],\n): Map<string, AnyKanbanCardRenderer> {\n  return useMemo(() => {\n    const m = new Map<string, AnyKanbanCardRenderer>();\n    for (const r of renderers) m.set(r.id, r);\n    return m;\n  }, [renderers]);\n}\n","type":"registry:component","target":"components/kanban-board/hooks/use-renderer-map.ts"},{"path":"src/registry/components/data/kanban-board/hooks/use-drag-handlers.ts","content":"$56","type":"registry:component","target":"components/kanban-board/hooks/use-drag-handlers.ts"},{"path":"src/registry/components/data/kanban-board/parts/board.tsx","content":"$57","type":"registry:component","target":"components/kanban-board/parts/board.tsx"},{"path":"src/registry/components/data/kanban-board/parts/column.tsx","content":"$58","type":"registry:component","target":"components/kanban-board/parts/column.tsx"},{"path":"src/registry/components/data/kanban-board/parts/column-header.tsx","content":"$59","type":"registry:component","target":"components/kanban-board/parts/column-header.tsx"},{"path":"src/registry/components/data/kanban-board/parts/column-body.tsx","content":"$5a","type":"registry:component","target":"components/kanban-board/parts/column-body.tsx"},{"path":"src/registry/components/data/kanban-board/parts/column-collapsed.tsx","content":"$5b","type":"registry:component","target":"components/kanban-board/parts/column-collapsed.tsx"},{"path":"src/registry/components/data/kanban-board/parts/column-footer.tsx","content":"\"use client\";\n\nimport type { AnyKanbanCardRenderer, KanbanColumn, KanbanItem } from \"../types\";\nimport { InlineCreateEditor } from \"./inline-create-editor\";\n\nexport function ColumnFooter({\n  column,\n  renderers,\n  onCreate,\n}: {\n  column: KanbanColumn;\n  renderers: AnyKanbanCardRenderer[];\n  onCreate: (item: KanbanItem) => void;\n}) {\n  // Filter renderers by column.acceptsRendererIds if set.\n  const allowed =\n    column.acceptsRendererIds === undefined\n      ? renderers\n      : renderers.filter((r) => column.acceptsRendererIds!.includes(r.id));\n\n  if (allowed.length === 0) return null;\n\n  return (\n    <div className=\"border-t border-border/60 px-1.5 py-1.5\">\n      <InlineCreateEditor renderers={allowed} onCreate={onCreate} />\n    </div>\n  );\n}\n","type":"registry:component","target":"components/kanban-board/parts/column-footer.tsx"},{"path":"src/registry/components/data/kanban-board/parts/add-column-button.tsx","content":"$5c","type":"registry:component","target":"components/kanban-board/parts/add-column-button.tsx"},{"path":"src/registry/components/data/kanban-board/parts/swimlane-row.tsx","content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport type { KanbanSwimlane } from \"../types\";\n\n/**\n * Optional swimlane label band. Currently rendered inline within each column body.\n * This component is reserved for a future \"single global label band above all columns\" mode.\n */\nexport function SwimlaneRow({ swimlanes, className }: { swimlanes: KanbanSwimlane[]; className?: string }) {\n  return (\n    <div className={cn(\"flex flex-col gap-1\", className)} aria-hidden=\"true\">\n      {swimlanes.map((s) => (\n        <span key={s.id} className=\"text-[10px] font-medium uppercase tracking-wide text-muted-foreground/70\">\n          {s.title}\n        </span>\n      ))}\n    </div>\n  );\n}\n","type":"registry:component","target":"components/kanban-board/parts/swimlane-row.tsx"},{"path":"src/registry/components/data/kanban-board/parts/swimlane-cell.tsx","content":"$5d","type":"registry:component","target":"components/kanban-board/parts/swimlane-cell.tsx"},{"path":"src/registry/components/data/kanban-board/parts/item-shell.tsx","content":"$5e","type":"registry:component","target":"components/kanban-board/parts/item-shell.tsx"},{"path":"src/registry/components/data/kanban-board/parts/item-renderer.tsx","content":"\"use client\";\n\nimport type { AnyKanbanCardRenderer, KanbanItem, KanbanRenderContext } from \"../types\";\nimport { MissingRendererFallback, warnMissingRenderer } from \"./missing-renderer\";\n\nexport function ItemRenderer({\n  item,\n  rendererMap,\n  ctx,\n}: {\n  item: KanbanItem;\n  rendererMap: Map<string, AnyKanbanCardRenderer>;\n  ctx: KanbanRenderContext;\n}) {\n  const renderer = rendererMap.get(item.rendererId);\n  if (!renderer) {\n    warnMissingRenderer(item.rendererId);\n    return <MissingRendererFallback rendererId={item.rendererId} />;\n  }\n  return <>{renderer.render(item.data, ctx)}</>;\n}\n","type":"registry:component","target":"components/kanban-board/parts/item-renderer.tsx"},{"path":"src/registry/components/data/kanban-board/parts/missing-renderer.tsx","content":"\"use client\";\n\nimport { TriangleAlert } from \"lucide-react\";\n\nexport function MissingRendererFallback({ rendererId }: { rendererId: string }) {\n  return (\n    <div className=\"flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/5 p-2.5 text-xs\">\n      <TriangleAlert className=\"mt-0.5 size-3.5 shrink-0 text-destructive\" />\n      <div className=\"flex flex-col gap-0.5\">\n        <span className=\"font-medium text-destructive\">Renderer not found</span>\n        <span className=\"font-mono text-[10px] text-muted-foreground\">{rendererId}</span>\n      </div>\n    </div>\n  );\n}\n\nconst warned = new Set<string>();\n\nexport function warnMissingRenderer(rendererId: string) {\n  if (warned.has(rendererId)) return;\n  warned.add(rendererId);\n  if (typeof console !== \"undefined\") {\n    console.warn(\n      `[kanban-board] No renderer found for rendererId=\"${rendererId}\". ` +\n        `Add a renderer with id=\"${rendererId}\" to the renderers prop.`,\n    );\n  }\n}\n","type":"registry:component","target":"components/kanban-board/parts/missing-renderer.tsx"},{"path":"src/registry/components/data/kanban-board/parts/inline-create-editor.tsx","content":"$5f","type":"registry:component","target":"components/kanban-board/parts/inline-create-editor.tsx"},{"path":"src/registry/components/data/kanban-board/parts/inline-edit-editor.tsx","content":"\"use client\";\n\nimport type { AnyKanbanCardRenderer, KanbanItem } from \"../types\";\n\nexport function InlineEditEditor({\n  item,\n  renderer,\n  onSave,\n  onCancel,\n}: {\n  item: KanbanItem;\n  renderer: AnyKanbanCardRenderer;\n  onSave: (item: KanbanItem) => void;\n  onCancel: () => void;\n}) {\n  if (!renderer.editForm) return null;\n  return (\n    <>\n      {renderer.editForm(\n        item.data,\n        (next) => onSave({ ...item, data: next }),\n        onCancel,\n      )}\n    </>\n  );\n}\n","type":"registry:component","target":"components/kanban-board/parts/inline-edit-editor.tsx"},{"path":"src/registry/components/data/kanban-board/parts/color-picker.tsx","content":"$60","type":"registry:component","target":"components/kanban-board/parts/color-picker.tsx"},{"path":"src/registry/components/data/kanban-board/parts/drag-overlay.tsx","content":"$61","type":"registry:component","target":"components/kanban-board/parts/drag-overlay.tsx"},{"path":"src/registry/components/data/kanban-board/parts/kanban-card.tsx","content":"$62","type":"registry:component","target":"components/kanban-board/parts/kanban-card.tsx"},{"path":"src/registry/components/data/kanban-board/parts/kanban-note.tsx","content":"$63","type":"registry:component","target":"components/kanban-board/parts/kanban-note.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>