@medalsocial/meda 1.1.1 → 1.2.0

package/dist/components/ui/checkbox.d.ts

@@ -0,0 +1,8 @@
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
+interface CheckboxProps extends CheckboxPrimitive.Root.Props {
+    /** Show indeterminate (mixed) state - a dash instead of checkmark */
+    indeterminate?: boolean;
+}
+declare function Checkbox({ className, indeterminate, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export type { CheckboxProps };
+export { Checkbox };

package/dist/components/ui/checkbox.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
+import { CheckIcon, MinusIcon } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+function Checkbox({ className, indeterminate, ...props }) {
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", indeterminate: indeterminate, className: cn('peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input outline-none transition-colors after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 group-has-disabled/field:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:bg-input/30 dark:data-checked:bg-primary dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40', indeterminate && 'border-primary bg-primary text-primary-foreground', className), ...props, children: indeterminate ? (_jsx("span", { className: "grid place-content-center text-current [&>svg]:size-3.5", children: _jsx(MinusIcon, {}) })) : (_jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) })) }));
+}
+export { Checkbox };

package/dist/components/ui/collapsible.d.ts

@@ -0,0 +1,5 @@
+import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';
+declare function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+declare function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
+declare function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props): import("react/jsx-runtime").JSX.Element;
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/components/ui/collapsible.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';
+function Collapsible({ ...props }) {
+    return _jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
+}
+function CollapsibleTrigger({ ...props }) {
+    return _jsx(CollapsiblePrimitive.Trigger, { "data-slot": "collapsible-trigger", ...props });
+}
+function CollapsibleContent({ ...props }) {
+    return _jsx(CollapsiblePrimitive.Panel, { "data-slot": "collapsible-content", ...props });
+}
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/kanban/index.d.ts

@@ -0,0 +1,5 @@
+export { KanbanBoard } from './kanban-board.js';
+export type { KanbanColumnDropHandlerArgs } from './kanban-drop-handler.js';
+export { handleKanbanColumnDrop } from './kanban-drop-handler.js';
+export type { KanbanBoardProps, KanbanColumn, KanbanItem, KanbanLabels, } from './types.js';
+export { defaultKanbanLabels } from './types.js';

package/dist/kanban/index.js

@@ -0,0 +1,4 @@
+// open/meda/src/kanban/index.ts
+export { KanbanBoard } from './kanban-board.js';
+export { handleKanbanColumnDrop } from './kanban-drop-handler.js';
+export { defaultKanbanLabels } from './types.js';

package/dist/kanban/kanban-board.d.ts

@@ -0,0 +1,8 @@
+import { type KanbanBoardProps, type KanbanItem } from './types.js';
+/**
+ * Generic Kanban Board Component
+ *
+ * A reusable drag-and-drop kanban board that can be used across
+ * different features (Deals, Ideas, etc.)
+ */
+export declare function KanbanBoard<TItem extends KanbanItem, TStatus extends string = string>(props: KanbanBoardProps<TItem, TStatus>): import("react/jsx-runtime").JSX.Element;

package/dist/kanban/kanban-board.js

@@ -0,0 +1,197 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DndContext, DragOverlay, KeyboardSensor, MeasuringStrategy, PointerSensor, useDndMonitor, useSensor, useSensors, } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { ChevronRight, EyeOff, MoreHorizontal } from 'lucide-react';
+import { useCallback, useDeferredValue, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../components/ui/collapsible.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../components/ui/dropdown-menu.js';
+import { cn } from '../lib/utils.js';
+import { KanbanCardWrapper } from './kanban-card-wrapper.js';
+import { kanbanCollisionDetection } from './kanban-collision.js';
+import { KanbanColumn } from './kanban-column.js';
+import { handleKanbanColumnDrop } from './kanban-drop-handler.js';
+import { defaultKanbanLabels, } from './types.js';
+const interpolate = (template, vars) => Object.entries(vars).reduce((s, [k, v]) => s.replace(new RegExp(`\\{\\{${k}\\}\\}`, 'g'), v), template);
+function resolveOverColumnStatus(overId, columns, items) {
+    const targetColumn = columns.find((col) => col.id === overId);
+    if (targetColumn) {
+        return targetColumn.id;
+    }
+    const targetItem = items.find((item) => item.id === overId);
+    return targetItem?.status ?? null;
+}
+/**
+ * Inner component that always renders inside a DndContext — either the kanban's
+ * own (non-headless) or the consumer's outer context (headless). This means
+ * `useDndMonitor` is always safe to call here, enabling the DragOverlay to
+ * track external drags when `headless={true}`.
+ */
+function KanbanBoardInner({ columns, items, renderCard, onReorder, onCardMove, canDropCard, onAddItem, showEmptyColumns = false, hiddenColumnIds = [], onHiddenColumnIdsChange, emptyColumnContent, labels, headless = false, className, }) {
+    const resolvedLabels = { ...defaultKanbanLabels, ...(labels ?? {}) };
+    const [activeId, setActiveId] = useState(null);
+    const [overColumnId, setOverColumnId] = useState(null);
+    // Defer item updates during drag to keep the overlay responsive
+    const deferredItems = useDeferredValue(items);
+    // Group items by status
+    const itemsByStatus = useMemo(() => {
+        const grouped = new Map();
+        // Initialize all columns
+        for (const column of columns) {
+            grouped.set(column.id, []);
+        }
+        // Group items
+        for (const item of deferredItems) {
+            const status = item.status;
+            const columnItems = grouped.get(status);
+            if (columnItems) {
+                columnItems.push(item);
+            }
+        }
+        // Sort each column by position
+        for (const [status, columnItems] of grouped) {
+            columnItems.sort((a, b) => (a.position ?? 0) - (b.position ?? 0));
+            grouped.set(status, columnItems);
+        }
+        return grouped;
+    }, [columns, deferredItems]);
+    // Get the active item being dragged
+    const activeItem = useMemo(() => {
+        if (!activeId)
+            return null;
+        return items.find((item) => item.id === activeId) ?? null;
+    }, [activeId, items]);
+    const hiddenColumnIdSet = useMemo(() => new Set(hiddenColumnIds.map((columnId) => String(columnId))), [hiddenColumnIds]);
+    const hiddenColumns = useMemo(() => columns.filter((column) => hiddenColumnIdSet.has(String(column.id))), [columns, hiddenColumnIdSet]);
+    const explicitlyVisibleColumns = useMemo(() => columns.filter((column) => !hiddenColumnIdSet.has(String(column.id))), [columns, hiddenColumnIdSet]);
+    // Filter columns if not showing empty ones
+    const visibleColumns = useMemo(() => {
+        if (showEmptyColumns)
+            return explicitlyVisibleColumns;
+        return explicitlyVisibleColumns.filter((column) => {
+            const columnItems = itemsByStatus.get(column.id);
+            return columnItems && columnItems.length > 0;
+        });
+    }, [explicitlyVisibleColumns, itemsByStatus, showEmptyColumns]);
+    // Handle drag over (for preview) — used both by own DndContext and via useDndMonitor
+    const handleDragOver = useCallback((event) => {
+        const { over } = event;
+        if (!over) {
+            setOverColumnId(null);
+            return;
+        }
+        setOverColumnId(resolveOverColumnStatus(String(over.id), visibleColumns, items));
+    }, [items, visibleColumns]);
+    // Handle drag start
+    const handleDragStart = useCallback((event) => {
+        setActiveId(event.active.id);
+    }, []);
+    // Handle drag end
+    const handleDragEnd = useCallback((event) => {
+        setActiveId(null);
+        setOverColumnId(null);
+        handleKanbanColumnDrop({
+            event,
+            items,
+            columns: visibleColumns,
+            onCardMove,
+            onReorder,
+            canDropCard,
+        });
+    }, [items, visibleColumns, canDropCard, onReorder, onCardMove]);
+    // Always monitor the active DndContext (either the kanban's own in non-headless
+    // mode, or the consumer's outer context in headless mode). This is safe because
+    // KanbanBoardInner is always rendered inside a DndContext.
+    //
+    // In headless mode the consumer's outer onDragEnd is the single owner of drop
+    // routing — only update local UI state here to avoid double-firing handleKanbanColumnDrop.
+    useDndMonitor({
+        onDragStart: handleDragStart,
+        onDragOver: handleDragOver,
+        onDragEnd: headless
+            ? () => {
+                setActiveId(null);
+                setOverColumnId(null);
+            }
+            : handleDragEnd,
+        onDragCancel: () => {
+            setActiveId(null);
+            setOverColumnId(null);
+        },
+    });
+    const handleHideColumn = useCallback((columnId) => {
+        if (!onHiddenColumnIdsChange)
+            return;
+        const nextHiddenColumnIds = [...hiddenColumnIds];
+        if (!nextHiddenColumnIds.includes(columnId)) {
+            nextHiddenColumnIds.push(columnId);
+            onHiddenColumnIdsChange(nextHiddenColumnIds);
+        }
+    }, [hiddenColumnIds, onHiddenColumnIdsChange]);
+    const handleShowColumn = useCallback((columnId) => {
+        if (!onHiddenColumnIdsChange)
+            return;
+        onHiddenColumnIdsChange(hiddenColumnIds.filter((hiddenColumnId) => hiddenColumnId !== columnId));
+    }, [hiddenColumnIds, onHiddenColumnIdsChange]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-slot": "kanban-board", className: cn('flex h-full gap-4 pb-4', className), children: [visibleColumns.map((column) => {
+                        const columnItems = itemsByStatus.get(column.id) ?? [];
+                        const canDropInColumn = !activeId ||
+                            !canDropCard ||
+                            activeItem?.status === column.id ||
+                            canDropCard(activeId, column.id);
+                        const isOver = overColumnId === column.id && canDropInColumn;
+                        return (_jsx(SortableContext, { items: columnItems.map((item) => item.id), strategy: verticalListSortingStrategy, children: _jsx(KanbanColumn, { column: column, items: columnItems, count: columnItems.length, isOver: isOver, onAddItem: onAddItem && column.canAdd !== false
+                                    ? () => onAddItem(column.id)
+                                    : undefined, onHideColumn: onHiddenColumnIdsChange ? () => handleHideColumn(column.id) : undefined, labels: resolvedLabels, children: columnItems.length === 0 ? (
+                                // If onAddItem is provided, show nothing (add button appears on hover)
+                                // Otherwise show custom empty content or default "No items" message
+                                (() => {
+                                    if (onAddItem && column.canAdd !== false)
+                                        return null;
+                                    return (emptyColumnContent || (_jsx("div", { className: "py-8 text-center text-muted-foreground text-sm", children: resolvedLabels.noItems })));
+                                })()) : (_jsx("div", { className: "space-y-2", children: columnItems.map((item) => (_jsx(KanbanCardWrapper, { id: item.id, isDragging: activeId === item.id, children: renderCard(item) }, item.id))) })) }) }, column.id));
+                    }), hiddenColumns.length > 0 && (_jsx(HiddenColumnsRail, { hiddenColumns: hiddenColumns, itemsByStatus: itemsByStatus, onShowColumn: handleShowColumn, labels: resolvedLabels }))] }), typeof document !== 'undefined'
+                ? createPortal(_jsx(DragOverlay, { dropAnimation: null, children: activeItem ? (_jsx("div", { className: "cursor-grabbing opacity-95 shadow-xl", children: renderCard(activeItem) })) : null }), document.body)
+                : null] }));
+}
+/**
+ * Generic Kanban Board Component
+ *
+ * A reusable drag-and-drop kanban board that can be used across
+ * different features (Deals, Ideas, etc.)
+ */
+export function KanbanBoard(props) {
+    const { columns, onReorder, onCardMove, hiddenColumnIds = [], isLoading = false, headless = false, } = props;
+    // Setup sensors for drag detection (only when drag is enabled)
+    const dragSensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 5, // Keep drag responsive while avoiding accidental drags
+        },
+    }), useSensor(KeyboardSensor));
+    // Only use sensors if onReorder or onCardMove is provided
+    const sensors = onReorder || onCardMove ? dragSensors : [];
+    const hiddenColumnIdSet = useMemo(() => new Set(hiddenColumnIds.map((columnId) => String(columnId))), [hiddenColumnIds]);
+    const explicitlyVisibleColumns = useMemo(() => columns.filter((column) => !hiddenColumnIdSet.has(String(column.id))), [columns, hiddenColumnIdSet]);
+    // Loading skeleton
+    if (isLoading) {
+        const loadingColumns = explicitlyVisibleColumns.length > 0 ? explicitlyVisibleColumns : columns;
+        return (_jsx("div", { className: "flex gap-4 pb-4", children: loadingColumns.map((column) => (_jsxs("div", { className: "w-72 flex-shrink-0 animate-pulse rounded-lg bg-muted/50 p-4", children: [_jsx("div", { className: "mb-4 h-6 w-24 rounded bg-muted" }), _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "h-24 rounded bg-muted" }), _jsx("div", { className: "h-24 rounded bg-muted" })] })] }, column.id))) }));
+    }
+    // In headless mode the consumer supplies the DndContext — KanbanBoardInner
+    // uses useDndMonitor to listen to it from inside the same tree.
+    if (headless) {
+        return _jsx(KanbanBoardInner, { ...props, headless: true });
+    }
+    return (_jsx(DndContext, { sensors: sensors, collisionDetection: kanbanCollisionDetection, measuring: {
+            droppable: {
+                strategy: MeasuringStrategy.Always,
+            },
+        }, children: _jsx(KanbanBoardInner, { ...props, headless: false }) }));
+}
+function HiddenColumnsRail({ hiddenColumns, itemsByStatus, onShowColumn, labels, }) {
+    return (_jsx("aside", { "data-slot": "kanban-hidden-columns-rail", className: "flex w-64 flex-shrink-0 flex-col gap-3 self-start rounded-lg border border-border/60 bg-background/95 p-3 shadow-sm backdrop-blur", children: _jsxs(Collapsible, { defaultOpen: true, children: [_jsxs(CollapsibleTrigger, { "data-slot": "kanban-hidden-columns-trigger", className: "flex w-full items-center gap-2 rounded-md p-1 text-left transition-colors hover:bg-accent/50", children: [_jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground transition-transform duration-200 [[data-open]>&]:rotate-90" }), _jsx(EyeOff, { className: "h-4 w-4 text-muted-foreground" }), _jsx("h3", { className: "font-medium text-sm", children: labels.hiddenColumns }), _jsx("span", { className: "ml-auto rounded-full bg-muted px-1.5 py-0.5 text-muted-foreground text-xs", children: hiddenColumns.length })] }), _jsx(CollapsibleContent, { "data-slot": "kanban-hidden-columns-content", className: "pt-3", children: _jsx("div", { className: "space-y-2", children: hiddenColumns.map((column) => {
+                            const columnItems = itemsByStatus.get(column.id) ?? [];
+                            return (_jsxs("div", { "data-slot": "kanban-hidden-column", "data-column-id": column.id, className: "flex items-center gap-3 rounded-md border border-border/60 bg-background p-3 shadow-sm", children: [column.icon ? (_jsx("span", { className: "flex-shrink-0", children: column.icon })) : (_jsx("div", { className: cn('h-2.5 w-2.5 rounded-full', column.accentClass ?? 'bg-muted-foreground') })), _jsx("div", { className: "min-w-0 flex-1", children: _jsx("div", { className: "truncate font-medium text-sm", children: column.label }) }), _jsx("span", { className: "text-muted-foreground text-sm tabular-nums", children: columnItems.length }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx("button", { type: "button", className: "rounded-md border border-border/70 p-2 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground", "aria-label": "Actions" }), children: _jsx(MoreHorizontal, { className: "h-4 w-4" }) }), _jsx(DropdownMenuContent, { align: "end", children: _jsx(DropdownMenuItem, { onSelect: () => onShowColumn(column.id), children: interpolate(labels.showColumn, { column: column.label }) }) })] })] }, column.id));
+                        }) }) })] }) }));
+}

package/dist/kanban/kanban-card-wrapper.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+interface KanbanCardWrapperProps {
+    /** Unique ID for the draggable item */
+    id: string;
+    /** Whether the card is currently being dragged */
+    isDragging?: boolean;
+    /** The card content to render */
+    children: ReactNode;
+}
+/**
+ * KanbanCardWrapper Component
+ *
+ * Wraps card content to make it draggable within the kanban board.
+ */
+export declare function KanbanCardWrapper({ id, isDragging, children }: KanbanCardWrapperProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/kanban/kanban-card-wrapper.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { cn } from '../lib/utils.js';
+/**
+ * KanbanCardWrapper Component
+ *
+ * Wraps card content to make it draggable within the kanban board.
+ */
+export function KanbanCardWrapper({ id, isDragging, children }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging: isSortableDragging, } = useSortable({ id });
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+    const isCurrentlyDragging = isDragging || isSortableDragging;
+    return (_jsx("div", { ref: setNodeRef, style: style, ...attributes, ...listeners, "data-slot": "kanban-card", className: cn('cursor-grab active:cursor-grabbing', 'touch-manipulation', // Better touch handling
+        'transition-shadow duration-200', isCurrentlyDragging && 'z-50 opacity-50 shadow-lg'), children: children }));
+}

package/dist/kanban/kanban-collision.d.ts

@@ -0,0 +1,16 @@
+import { type CollisionDetection } from '@dnd-kit/core';
+type CollisionArgs = Parameters<CollisionDetection>[0];
+type CollisionResult = ReturnType<CollisionDetection>;
+interface CollisionDetectionFns {
+    pointerWithinFn?: CollisionDetection;
+    closestCenterFn?: CollisionDetection;
+}
+export declare function runKanbanCollisionDetection(args: CollisionArgs, fns?: CollisionDetectionFns): CollisionResult;
+export declare const kanbanCollisionDetection: CollisionDetection;
+export declare function isKanbanCardDropAllowed<TStatus extends string>({ itemId, sourceStatus, targetStatus, canDropCard, }: {
+    itemId: string;
+    sourceStatus: TStatus;
+    targetStatus: TStatus;
+    canDropCard?: (itemId: string, targetStatus: TStatus) => boolean;
+}): boolean;
+export {};

package/dist/kanban/kanban-collision.js

@@ -0,0 +1,18 @@
+import { closestCenter, pointerWithin } from '@dnd-kit/core';
+export function runKanbanCollisionDetection(args, fns = {}) {
+    const pointerWithinFn = fns.pointerWithinFn ?? pointerWithin;
+    const closestCenterFn = fns.closestCenterFn ?? closestCenter;
+    const activeId = String(args.active.id);
+    const pointerCollisions = pointerWithinFn(args).filter((collision) => String(collision.id) !== activeId);
+    if (pointerCollisions.length > 0) {
+        return pointerCollisions;
+    }
+    return closestCenterFn(args).filter((collision) => String(collision.id) !== activeId);
+}
+export const kanbanCollisionDetection = (args) => runKanbanCollisionDetection(args);
+export function isKanbanCardDropAllowed({ itemId, sourceStatus, targetStatus, canDropCard, }) {
+    if (sourceStatus === targetStatus) {
+        return true;
+    }
+    return canDropCard ? canDropCard(itemId, targetStatus) : true;
+}

package/dist/kanban/kanban-column.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import type { KanbanColumn as KanbanColumnDef, KanbanItem, KanbanLabels } from './types.js';
+interface KanbanColumnProps<TItem extends KanbanItem> {
+    column: KanbanColumnDef;
+    items: TItem[];
+    count: number;
+    isOver?: boolean;
+    onAddItem?: () => void;
+    onHideColumn?: () => void;
+    labels: KanbanLabels;
+    children: ReactNode;
+}
+/**
+ * KanbanColumn Component
+ *
+ * A single column in the kanban board that can receive dropped items.
+ */
+export declare function KanbanColumn<TItem extends KanbanItem>({ column, count, isOver, onAddItem, onHideColumn, labels, children, }: KanbanColumnProps<TItem>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/kanban/kanban-column.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDroppable } from '@dnd-kit/core';
+import { MoreHorizontal, Plus } from 'lucide-react';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../components/ui/dropdown-menu.js';
+import { cn } from '../lib/utils.js';
+const interpolate = (template, vars) => Object.entries(vars).reduce((s, [k, v]) => s.replace(new RegExp(`\\{\\{${k}\\}\\}`, 'g'), v), template);
+/**
+ * KanbanColumn Component
+ *
+ * A single column in the kanban board that can receive dropped items.
+ */
+export function KanbanColumn({ column, count, isOver, onAddItem, onHideColumn, labels, children, }) {
+    const { setNodeRef, isOver: isDroppableOver } = useDroppable({
+        id: column.id,
+    });
+    const showDropIndicator = isOver || isDroppableOver;
+    return (_jsxs("div", { ref: setNodeRef, "data-slot": "kanban-column", "data-column-id": column.id, className: cn('group/column flex w-72 flex-shrink-0 flex-col rounded-lg bg-muted/30', 'transition-colors duration-200', showDropIndicator && 'bg-primary/5 ring-2 ring-primary/20'), children: [_jsxs("div", { "data-slot": "kanban-column-header", className: "flex items-center gap-2 p-3 pb-2", children: [column.icon ? (_jsx("span", { className: "flex-shrink-0", children: column.icon })) : (_jsx("div", { className: cn('h-2 w-2 rounded-full', column.accentClass ?? 'bg-muted-foreground') })), _jsx("h3", { "data-slot": "kanban-column-title", className: "font-medium text-sm", children: column.label }), _jsx("span", { className: "rounded-full bg-muted px-1.5 py-0.5 text-muted-foreground text-xs", children: count }), (onAddItem || onHideColumn) && (_jsxs("div", { "data-slot": "kanban-column-actions", className: "ml-auto flex items-center gap-1", children: [onAddItem && (_jsx("button", { type: "button", onClick: onAddItem, className: "rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground", "aria-label": interpolate(labels.addItemTo, { column: column.label }), children: _jsx(Plus, { className: "h-4 w-4" }) })), onHideColumn && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx("button", { type: "button", className: "rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground", "aria-label": "Actions" }), children: _jsx(MoreHorizontal, { className: "h-4 w-4" }) }), _jsx(DropdownMenuContent, { align: "end", children: _jsx(DropdownMenuItem, { onSelect: onHideColumn, children: labels.hideColumn }) })] }))] }))] }), _jsxs("div", { "data-slot": "kanban-column-content", className: cn('min-h-[100px] flex-1 overflow-y-auto p-2 pt-0 [contain:content]', 'transition-colors duration-200'), children: [children, onAddItem && (_jsxs("button", { type: "button", onClick: onAddItem, className: cn('flex w-full items-center justify-center gap-1.5 rounded-md border border-transparent border-dashed p-2 text-muted-foreground text-sm opacity-0 transition-[color,opacity,background-color,border-color] hover:border-muted-foreground/30 hover:bg-accent/50 hover:text-foreground focus-visible:opacity-100 group-hover/column:opacity-100', count > 0 && 'mt-2'), "aria-label": interpolate(labels.addItemTo, { column: column.label }), children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { children: "Add" })] }))] }), showDropIndicator && count === 0 && (_jsx("div", { className: "mx-2 mb-2 h-1 rounded-full bg-primary/30" }))] }));
+}

package/dist/kanban/kanban-drop-handler.d.ts

@@ -0,0 +1,16 @@
+import type { DragEndEvent } from '@dnd-kit/core';
+import type { KanbanItem } from './types.js';
+export interface KanbanColumnDropHandlerArgs<TItem extends KanbanItem, TStatus extends string> {
+    event: DragEndEvent;
+    items: TItem[];
+    columns: {
+        id: string;
+    }[];
+    onCardMove?: (itemId: string, newStatus: TStatus) => void;
+    onReorder?: (itemId: string, newStatus: TStatus, newPosition: number) => void;
+    canDropCard?: (itemId: string, targetStatus: TStatus) => boolean;
+}
+/** Returns true if the drag was handled as a kanban column drop (column-to-column
+ * move or reorder); false if `over` was null or did not resolve to a kanban column/
+ * item, so the consumer can handle it (e.g. an external drop slot). */
+export declare function handleKanbanColumnDrop<TItem extends KanbanItem, TStatus extends string>(args: KanbanColumnDropHandlerArgs<TItem, TStatus>): boolean;

package/dist/kanban/kanban-drop-handler.js

@@ -0,0 +1,84 @@
+import { isKanbanCardDropAllowed } from './kanban-collision.js';
+/** Returns true if the drag was handled as a kanban column drop (column-to-column
+ * move or reorder); false if `over` was null or did not resolve to a kanban column/
+ * item, so the consumer can handle it (e.g. an external drop slot). */
+export function handleKanbanColumnDrop(args) {
+    const { event, items, columns, onCardMove, onReorder, canDropCard } = args;
+    const { active, over } = event;
+    if (!over)
+        return false;
+    const activeItemId = active.id;
+    const overId = over.id;
+    const draggedItem = items.find((item) => item.id === activeItemId);
+    if (!draggedItem)
+        return false;
+    // Build itemsByStatus map for position resolution
+    const itemsByStatus = new Map();
+    for (const column of columns) {
+        itemsByStatus.set(column.id, []);
+    }
+    for (const item of items) {
+        const status = item.status;
+        const columnItems = itemsByStatus.get(status);
+        if (columnItems) {
+            columnItems.push(item);
+        }
+    }
+    for (const [status, columnItems] of itemsByStatus) {
+        columnItems.sort((a, b) => (a.position ?? 0) - (b.position ?? 0));
+        itemsByStatus.set(status, columnItems);
+    }
+    // Resolve drop target: check if over.id is a column id
+    const targetColumn = columns.find((col) => col.id === overId);
+    if (targetColumn) {
+        const targetStatus = targetColumn.id;
+        const columnItems = itemsByStatus.get(targetStatus) ?? [];
+        if (!isKanbanCardDropAllowed({
+            itemId: activeItemId,
+            sourceStatus: draggedItem.status,
+            targetStatus,
+            canDropCard,
+        })) {
+            return true; // handled (rejected) — don't fall through to external handler
+        }
+        if (draggedItem.status !== targetStatus || draggedItem.position !== columnItems.length) {
+            if (onReorder) {
+                onReorder(activeItemId, targetStatus, columnItems.length);
+            }
+            if (onCardMove && draggedItem.status !== targetStatus) {
+                void Promise.resolve(onCardMove(activeItemId, targetStatus)).catch(() => {
+                    // Mutation handlers handle toast + rollback on failure.
+                });
+            }
+        }
+        return true;
+    }
+    // Check if over.id is an item id in one of the kanban columns
+    const targetItem = items.find((item) => item.id === overId);
+    if (!targetItem)
+        return false;
+    const targetStatus = targetItem.status;
+    const columnItems = itemsByStatus.get(targetStatus) ?? [];
+    const targetIndex = columnItems.findIndex((item) => item.id === overId);
+    if (targetIndex === -1)
+        return false;
+    if (!isKanbanCardDropAllowed({
+        itemId: activeItemId,
+        sourceStatus: draggedItem.status,
+        targetStatus,
+        canDropCard,
+    })) {
+        return true; // handled (rejected)
+    }
+    if (draggedItem.status !== targetStatus || draggedItem.position !== targetIndex) {
+        if (onReorder) {
+            onReorder(activeItemId, targetStatus, targetIndex);
+        }
+        if (onCardMove && draggedItem.status !== targetStatus) {
+            void Promise.resolve(onCardMove(activeItemId, targetStatus)).catch(() => {
+                // Mutation handlers handle toast + rollback on failure.
+            });
+        }
+    }
+    return true;
+}

package/dist/kanban/types.d.ts

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+export interface KanbanItem {
+    id: string;
+    status: string;
+    position: number;
+}
+export interface KanbanColumn {
+    id: string;
+    label: string;
+    /** Tailwind class string for the column accent — e.g. 'bg-success-500' or a token-driven class. */
+    accentClass?: string;
+    /** Optional icon node rendered next to the column label. */
+    icon?: ReactNode;
+    /** Whether the column accepts new items via the add-button. */
+    canAdd?: boolean;
+}
+export interface KanbanLabels {
+    /** "Add to {{column}}" — `{{column}}` replaced at render. */
+    addItemTo: string;
+    hideColumn: string;
+    noItems: string;
+    /** "Show {{column}}" */
+    showColumn: string;
+    hiddenColumns: string;
+}
+export declare const defaultKanbanLabels: KanbanLabels;
+export interface KanbanBoardProps<TItem extends KanbanItem, TStatus extends string = string> {
+    columns: KanbanColumn[];
+    items: TItem[];
+    renderCard: (item: TItem) => ReactNode;
+    onReorder?: (itemId: string, newStatus: TStatus, newPosition: number) => void;
+    onCardMove?: (itemId: string, newStatus: TStatus) => void;
+    canDropCard?: (itemId: string, targetStatus: TStatus) => boolean;
+    onAddItem?: (columnId: TStatus) => void;
+    showEmptyColumns?: boolean;
+    hiddenColumnIds?: TStatus[];
+    onHiddenColumnIdsChange?: (ids: TStatus[]) => void;
+    isLoading?: boolean;
+    emptyColumnContent?: ReactNode;
+    labels?: Partial<KanbanLabels>;
+    className?: string;
+    /** When true, KanbanBoard skips its internal `<DndContext>`. The consumer must
+     * wrap KanbanBoard and any sibling drop targets (e.g. RailDropSlot) in a shared
+     * `<DndContext>` and supply a unified `onDragEnd` that routes column drops via
+     * `handleKanbanColumnDrop` and external drops manually. */
+    headless?: boolean;
+}

package/dist/kanban/types.js

@@ -0,0 +1,7 @@
+export const defaultKanbanLabels = {
+    addItemTo: 'Add to {{column}}',
+    hideColumn: 'Hide column',
+    noItems: 'No items',
+    showColumn: 'Show {{column}}',
+    hiddenColumns: 'Hidden columns',
+};

package/dist/list/index.d.ts

@@ -0,0 +1,2 @@
+export type { ListCellProps, ListRowProps } from './list-row.js';
+export { ListCell, ListRow } from './list-row.js';

package/dist/list/index.js

@@ -0,0 +1 @@
+export { ListCell, ListRow } from './list-row.js';

package/dist/list/list-row.d.ts

@@ -0,0 +1,52 @@
+/**
+ * List Row Component
+ *
+ * Base row wrapper for Linear-style table rows.
+ * Provides consistent styling for hover, selection, and keyboard focus states.
+ */
+import type { ReactNode } from 'react';
+export interface ListRowProps {
+    /** Whether this row is selected */
+    selected?: boolean;
+    /** Whether any item in the list is selected (keeps checkbox always visible) */
+    selectionActive?: boolean;
+    /** Callback when selection changes (shiftKey for range selection) */
+    onSelect?: (selected: boolean, shiftKey?: boolean) => void;
+    /** Click handler for row navigation */
+    onClick?: () => void;
+    /** Mouse enter handler for prefetching */
+    onMouseEnter?: () => void;
+    /** Mouse leave handler */
+    onMouseLeave?: () => void;
+    /** Focus handler for keyboard intent prefetching */
+    onFocus?: () => void;
+    /** Blur handler */
+    onBlur?: () => void;
+    /** Whether this row has keyboard focus */
+    focused?: boolean;
+    /** Children to render inside the row */
+    children: ReactNode;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * A Linear-style list row with checkbox, hover states, and click handling.
+ * Compact ~40-48px height for dense, scannable lists.
+ */
+export declare function ListRow({ selected, selectionActive, onSelect, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, focused, children, className, }: ListRowProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Cell wrapper for consistent column sizing
+ */
+export interface ListCellProps {
+    /** Width class (e.g., 'w-8', 'w-24', 'flex-1') */
+    width?: string;
+    /** Whether to shrink if needed */
+    shrink?: boolean;
+    /** Alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Children */
+    children?: ReactNode;
+    /** Additional class names */
+    className?: string;
+}
+export declare function ListCell({ width, shrink, align, children, className, }: ListCellProps): import("react/jsx-runtime").JSX.Element;