@medalsocial/meda 1.1.2 → 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;

package/dist/list/list-row.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox } from '../components/ui/checkbox.js';
+import { cn } from '../lib/utils.js';
+/**
+ * A Linear-style list row with checkbox, hover states, and click handling.
+ * Compact ~40-48px height for dense, scannable lists.
+ */
+export function ListRow({ selected, selectionActive, onSelect, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, focused, children, className, }) {
+    const isInteractive = !!onClick;
+    const interactiveProps = isInteractive
+        ? {
+            role: 'button',
+            tabIndex: 0,
+            onClick,
+            onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    onClick?.();
+                }
+            },
+        }
+        : {};
+    return (_jsxs("div", { ...interactiveProps, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, className: cn('group relative flex items-center gap-3 border-border border-b px-3 py-2.5', 'transition-all duration-150', isInteractive && 'cursor-pointer hover:bg-accent/50', isInteractive &&
+            "before:absolute before:inset-y-0 before:left-0 before:w-[2px] before:scale-y-0 before:bg-primary before:transition-transform before:duration-150 before:content-['']", isInteractive && 'hover:before:scale-y-100', isInteractive && 'focus-within:bg-accent/30 focus-within:before:scale-y-100', selected && isInteractive && 'before:!scale-y-100 bg-accent', selected && !isInteractive && 'bg-accent', focused &&
+            isInteractive &&
+            'before:!scale-y-100 bg-accent/30 ring-1 ring-primary/50 ring-inset', focused && !isInteractive && 'bg-accent/30 ring-1 ring-primary/50 ring-inset', className), children: [onSelect && (_jsx("div", { className: "w-6 flex-shrink-0", onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: _jsx(Checkbox, { checked: selected, onClick: (e) => {
+                        e.preventDefault();
+                        onSelect(!selected, e.shiftKey);
+                    }, className: cn('transition-opacity', selectionActive || selected
+                        ? 'opacity-100'
+                        : 'opacity-0 group-hover:opacity-100 data-[state=checked]:opacity-100') }) })), children] }));
+}
+export function ListCell({ width = 'flex-1', shrink = true, align = 'left', children, className, }) {
+    return (_jsx("div", { className: cn(width, shrink === false && 'flex-shrink-0', align === 'center' && 'text-center', align === 'right' && 'text-right', 'min-w-0', // Allow truncation
+        className), children: children }));
+}

package/dist/shell/drag-mode-banner.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+/**
+ * Props for DragModeBanner.
+ *
+ * **Important:** This component uses `useDndMonitor` internally and must be
+ * rendered inside the same `<DndContext>` tree it is monitoring.
+ *
+ * **Known limitation:** The ESC chip is decorative only. Keyboard-initiated
+ * drags cancel naturally via dnd-kit's KeyboardSensor; pointer-initiated drags
+ * require the user to release outside any drop zone — a manual ESC handler for
+ * pointer drags is not yet implemented.
+ */
+export interface DragModeBannerProps {
+    /** Banner message shown while a drag is active. */
+    message: ReactNode;
+    /**
+     * When provided, render an ESC chip indicating the user can press Escape to
+     * cancel. See known limitation note above.
+     */
+    cancelKey?: 'ESC';
+    /**
+     * Optional predicate; when supplied only activates the banner for matching
+     * drag ids. Receives the `active.id` of the current drag.
+     */
+    isActive?: (activeId: string | number) => boolean;
+    className?: string;
+}
+export declare function DragModeBanner({ message, cancelKey, isActive, className }: DragModeBannerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace DragModeBanner {
+    var displayName: string;
+}

package/dist/shell/drag-mode-banner.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDndMonitor } from '@dnd-kit/core';
+import { useState } from 'react';
+import { cn } from '../lib/utils.js';
+export function DragModeBanner({ message, cancelKey, isActive, className }) {
+    const [activeId, setActiveId] = useState(null);
+    useDndMonitor({
+        onDragStart: (e) => setActiveId(e.active.id),
+        onDragEnd: () => setActiveId(null),
+        onDragCancel: () => setActiveId(null),
+    });
+    if (activeId == null)
+        return null;
+    if (isActive && !isActive(activeId))
+        return null;
+    return (_jsxs("div", { role: "status", "aria-live": "polite", className: cn('pointer-events-none flex items-center justify-center gap-3 px-4 py-2 text-sm text-muted-foreground', className), children: [_jsx("span", { children: message }), cancelKey === 'ESC' && (_jsx("kbd", { className: "rounded border border-border bg-muted px-1.5 py-0.5 font-medium font-mono text-xs", children: "ESC" }))] }));
+}
+DragModeBanner.displayName = 'DragModeBanner';

package/dist/shell/index.d.ts

@@ -2,11 +2,17 @@ export { AppShell, AppShellBody } from './app-shell.js';
 export type { CommandGroupDefinition } from './command-palette.js';
 export { CommandPalette, useCommandGroup, useCommands } from './command-palette.js';
 export { ContextRail } from './context-rail.js';
+export type { DragModeBannerProps } from './drag-mode-banner.js';
+export { DragModeBanner } from './drag-mode-banner.js';
 export * as Extras from './extras/index.js';
 export { IconRail, RailDivider } from './icon-rail.js';
 export type { ShellStorageAdapter } from './layout-state.js';
 export { createLocalStorageAdapter } from './layout-state.js';
 export { motion } from './motion.js';
+export type { RailDropSlotProps, RailDropSlotState } from './rail-drop-slot.js';
+export { RailDropSlot } from './rail-drop-slot.js';
+export type { RailDropZonesProps } from './rail-drop-zones.js';
+export { RailDropZones } from './rail-drop-zones.js';
 export { ResizableHandle, ResizableShell, ResizableShellPanel } from './resizable-shell.js';
 export { RightPanel } from './right-panel.js';
 export { AppTabs, PanelToggle, ShellHeader, WorkspaceSwitcher } from './shell-header.js';

package/dist/shell/index.js

@@ -8,6 +8,8 @@ export { AppShell, AppShellBody } from './app-shell.js';
 // Command palette
 export { CommandPalette, useCommandGroup, useCommands } from './command-palette.js';
 export { ContextRail } from './context-rail.js';
+// Drag-and-drop utilities
+export { DragModeBanner } from './drag-mode-banner.js';
 // Extras (legacy components ported during Phase 15 — opt-in for apps that need them)
 export * as Extras from './extras/index.js';
 // Rails + main + panel
@@ -17,6 +19,8 @@ export { createLocalStorageAdapter } from './layout-state.js';
 // Hooks + tokens
 export { motion } from './motion.js';
 // Resize primitives
+export { RailDropSlot } from './rail-drop-slot.js';
+export { RailDropZones } from './rail-drop-zones.js';
 export { ResizableHandle, ResizableShell, ResizableShellPanel } from './resizable-shell.js';
 export { RightPanel } from './right-panel.js';
 // Header (and its individual children for advanced composition)

package/dist/shell/rail-drop-slot.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode, type Ref } from 'react';
+/**
+ * Describes the slot's current relation to an active drag operation.
+ *
+ * - `'idle'`     — no drag in progress.
+ * - `'active'`   — a drag is in progress and this slot would accept it, but
+ *                  the cursor is not currently over this slot.
+ * - `'over'`     — the dragged item is hovering over this slot and it would
+ *                  accept the drop.
+ * - `'rejected'` — the dragged item is hovering over this slot but the slot
+ *                  cannot accept it (disabled or `accepts` returns false), OR
+ *                  the slot is `disabled` while any drag is active.
+ */
+export type RailDropSlotState = 'idle' | 'active' | 'over' | 'rejected';
+export interface RailDropSlotProps {
+    /** Stable id used by dnd-kit; also rendered as `data-slot-id`. */
+    id: string;
+    /** Decide whether this slot accepts the dragged card. */
+    accepts?: (activeId: string) => boolean;
+    /** Whether this slot can currently receive a drop (e.g. capacity, online). */
+    disabled?: boolean;
+    /**
+     * Static content. Mutually exclusive with `render`.
+     * Use `render` when you need state-aware content.
+     */
+    children?: ReactNode;
+    /**
+     * State-aware content factory. Receives the slot's current `RailDropSlotState`
+     * so you can render different UI for idle / active / over / rejected states.
+     * Mutually exclusive with `children`.
+     */
+    render?: (state: RailDropSlotState) => ReactNode;
+    className?: string;
+    /** Visible label for assistive tech. */
+    ariaLabel?: string;
+    ref?: Ref<HTMLElement>;
+}
+export declare function RailDropSlot({ id, accepts, disabled, children, render, className, ariaLabel, ref, }: RailDropSlotProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace RailDropSlot {
+    var displayName: string;
+}

package/dist/shell/rail-drop-slot.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDndMonitor, useDroppable } from '@dnd-kit/core';
+import { useState } from 'react';
+import { cn } from '../lib/utils.js';
+export function RailDropSlot({ id, accepts, disabled, children, render, className, ariaLabel, ref, }) {
+    const { isOver, active, setNodeRef } = useDroppable({
+        id,
+        disabled,
+        data: { type: 'rail-drop-slot' },
+    });
+    const [globalDragActive, setGlobalDragActive] = useState(false);
+    useDndMonitor({
+        onDragStart: () => setGlobalDragActive(true),
+        onDragEnd: () => setGlobalDragActive(false),
+        onDragCancel: () => setGlobalDragActive(false),
+    });
+    const wouldAccept = !disabled && (!accepts || (active?.id != null && accepts(String(active.id))));
+    let state;
+    if (isOver && wouldAccept) {
+        state = 'over';
+    }
+    else if (isOver && !wouldAccept) {
+        state = 'rejected';
+    }
+    else if (globalDragActive && disabled) {
+        state = 'rejected';
+    }
+    else if (globalDragActive && wouldAccept) {
+        state = 'active';
+    }
+    else {
+        state = 'idle';
+    }
+    // Legacy boolean aliases kept for backward-compat data attributes
+    const showHover = state === 'over';
+    const showRejected = state === 'rejected';
+    return (_jsx("section", { ref: (el) => {
+            setNodeRef(el);
+            if (typeof ref === 'function')
+                ref(el);
+            else if (ref)
+                ref.current = el;
+        }, "data-slot-id": id, "data-state": state, "aria-label": ariaLabel, "aria-disabled": disabled || undefined, className: cn('relative rounded-lg border border-border bg-card transition-all duration-150', state === 'idle' && '', state === 'active' && 'border-dashed border-primary/60 bg-primary/5', state === 'over' &&
+            'border-primary bg-primary/5 ring-2 ring-primary/30 shadow-[0_0_0_4px_hsl(var(--primary)/0.1)]', state === 'rejected' && 'border-destructive/40 opacity-60', 
+        // Legacy classes — keep working for consumers using data-state selectors
+        showHover && '', showRejected && '', disabled && state === 'idle' && 'opacity-60', className), children: render ? render(state) : children }));
+}
+RailDropSlot.displayName = 'RailDropSlot';

package/dist/shell/rail-drop-zones.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react';
+export interface RailDropZonesProps {
+    /** Section title — uppercased in the header. Defaults to "Drop zones". */
+    title?: string;
+    /** Subtitle shown under the title (e.g. "Eligible machines for ENG-405 · claude"). */
+    subtitle?: ReactNode;
+    /** Count badge rendered in the header corner, e.g. "3 / 4". */
+    count?: ReactNode;
+    /** Optional icon rendered at the start of the header. */
+    icon?: ReactNode;
+    /**
+     * When set, overrides the auto-detected drag-active state. Useful for
+     * Storybook stories that want to demonstrate the active visual without a
+     * real drag in progress.
+     */
+    forceActive?: boolean;
+    /**
+     * Optional predicate; when supplied only activates the rail outline for
+     * matching drag ids. Receives `active.id` of the current drag.
+     */
+    isActive?: (activeId: string | number) => boolean;
+    children: ReactNode;
+    className?: string;
+}
+export declare function RailDropZones({ title, subtitle, count, icon, forceActive, isActive, children, className, }: RailDropZonesProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace RailDropZones {
+    var displayName: string;
+}

package/dist/shell/rail-drop-zones.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDndMonitor } from '@dnd-kit/core';
+import { useState } from 'react';
+import { cn } from '../lib/utils.js';
+export function RailDropZones({ title = 'Drop zones', subtitle, count, icon, forceActive, isActive, children, className, }) {
+    const [activeId, setActiveId] = useState(null);
+    useDndMonitor({
+        onDragStart: (e) => setActiveId(e.active.id),
+        onDragEnd: () => setActiveId(null),
+        onDragCancel: () => setActiveId(null),
+    });
+    const auto = activeId != null && (!isActive || isActive(activeId));
+    const active = forceActive ?? auto;
+    return (_jsxs("section", { "data-active": active || undefined, className: cn('flex flex-col gap-3 rounded-lg border border-transparent p-3 transition-colors', active && 'border-2 border-dashed border-primary/60 bg-primary/5', className), children: [(title || subtitle || count) && (_jsxs("header", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "flex items-start gap-2", children: [icon && _jsx("span", { className: "text-primary", children: icon }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [title && (_jsx("span", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wider", children: title })), subtitle && _jsx("span", { className: "text-muted-foreground text-xs", children: subtitle })] })] }), count && _jsx("span", { className: "text-muted-foreground text-xs", children: count })] })), _jsx("div", { className: "flex flex-col gap-2", children: children })] }));
+}
+RailDropZones.displayName = 'RailDropZones';

package/dist/timeline/index.d.ts

@@ -2,6 +2,9 @@ export type { DateSwitcherProps } from './date-switcher.js';
 export { DateSwitcher } from './date-switcher.js';
 export type { EventCardProps, EventCardSize } from './event-card.js';
 export { EventCard } from './event-card.js';
+export { LaneTimeline } from './lane-timeline.js';
+export type { Lane, LaneBar, LaneLegendItem, LaneTimelineLabels, LaneTimelineProps, LaneTimelineRange, } from './lane-timeline-types.js';
+export { defaultLaneTimelineLabels } from './lane-timeline-types.js';
 export type { LiveIndicatorProps } from './live-indicator.js';
 export { LiveIndicator } from './live-indicator.js';
 export type { ScrubBarProps } from './scrub-bar.js';

package/dist/timeline/index.js

@@ -1,5 +1,7 @@
 export { DateSwitcher } from './date-switcher.js';
 export { EventCard } from './event-card.js';
+export { LaneTimeline } from './lane-timeline.js';
+export { defaultLaneTimelineLabels } from './lane-timeline-types.js';
 export { LiveIndicator } from './live-indicator.js';
 export { ScrubBar } from './scrub-bar.js';
 export { TimelineRail } from './timeline-rail.js';

package/dist/timeline/lane-timeline-types.d.ts

@@ -0,0 +1,61 @@
+import type { ReactNode } from 'react';
+export type LaneTimelineRange = '1h' | '6h' | '24h' | '7d';
+export interface LaneBar {
+    id: string;
+    start: Date;
+    end: Date;
+    label: string;
+    /** Tailwind class for the bar fill, e.g. 'bg-success-500/80'. */
+    fillClass: string;
+    /** Optional left-edge accent class, e.g. 'border-l-4 border-l-success-700'. */
+    accentClass?: string;
+}
+export interface Lane {
+    id: string;
+    label: string;
+    /** Optional secondary line under label (e.g. "3 sessions" or "offline"). */
+    sublabel?: string;
+    /** Tailwind class for the leading status dot (e.g. 'bg-success-500'). */
+    statusDotClass?: string;
+    bars: LaneBar[];
+    /** Render lane label muted; bars still render. */
+    muted?: boolean;
+}
+export interface LaneLegendItem {
+    label: string;
+    swatchClass: string;
+}
+export interface LaneTimelineLabels {
+    previousDate: string;
+    nextDate: string;
+    now: string;
+    /** "{n} active" — `{n}` replaced at render. */
+    activeCount: string;
+}
+export declare const defaultLaneTimelineLabels: LaneTimelineLabels;
+export interface TimeTick {
+    /** Display label, e.g. "09:00". */
+    label: string;
+    /** Position as percentage 0–100 along the time axis. */
+    position: number;
+}
+export interface LaneTimelineProps {
+    lanes: Lane[];
+    /** Reference time for now-line + window end. Defaults to `new Date()`. */
+    now?: Date;
+    defaultRange?: LaneTimelineRange;
+    range?: LaneTimelineRange;
+    onRangeChange?: (range: LaneTimelineRange) => void;
+    selectedDate?: Date;
+    onDateChange?: (date: Date) => void;
+    title?: ReactNode;
+    /** Render-prop slot for a "Group: …" chip in the header. */
+    groupChip?: ReactNode;
+    /** Number of currently-active bars; powers the "● {n} active" indicator. */
+    activeCount?: number;
+    legend?: LaneLegendItem[];
+    selectedBarId?: string;
+    onSelectBar?: (bar: LaneBar, lane: Lane) => void;
+    labels?: Partial<LaneTimelineLabels>;
+    className?: string;
+}

package/dist/timeline/lane-timeline-types.js

@@ -0,0 +1,6 @@
+export const defaultLaneTimelineLabels = {
+    previousDate: 'Previous day',
+    nextDate: 'Next day',
+    now: 'now',
+    activeCount: '{n} active',
+};

package/dist/timeline/lane-timeline.d.ts

@@ -0,0 +1,2 @@
+import { type LaneTimelineProps } from './lane-timeline-types.js';
+export declare function LaneTimeline({ lanes, now, defaultRange, range: controlledRange, onRangeChange, selectedDate: controlledDate, onDateChange, title, groupChip, activeCount, legend, selectedBarId, onSelectBar, labels, className, }: LaneTimelineProps): import("react/jsx-runtime").JSX.Element;

package/dist/timeline/lane-timeline.js

@@ -0,0 +1,85 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { cn } from '../lib/utils.js';
+import { LaneRow } from './lane.js';
+import { defaultLaneTimelineLabels, } from './lane-timeline-types.js';
+import { TimeAxis } from './time-axis.js';
+const LABEL_GUTTER_PX = 140;
+const RANGE_MS = {
+    '1h': 60 * 60_000,
+    '6h': 6 * 60 * 60_000,
+    '24h': 24 * 60 * 60_000,
+    '7d': 7 * 24 * 60 * 60_000,
+};
+export function LaneTimeline({ lanes, now, defaultRange = '6h', range: controlledRange, onRangeChange, selectedDate: controlledDate, onDateChange, title, groupChip, activeCount, legend, selectedBarId, onSelectBar, labels, className, }) {
+    const resolvedLabels = { ...defaultLaneTimelineLabels, ...(labels ?? {}) };
+    const [internalRange, setInternalRange] = useState(defaultRange);
+    const [internalDate, setInternalDate] = useState(() => now ?? new Date());
+    const range = controlledRange ?? internalRange;
+    const selectedDate = controlledDate ?? internalDate;
+    const referenceNow = now ?? new Date();
+    const { windowStart, windowEnd } = useMemo(() => {
+        const rangeMs = RANGE_MS[range];
+        const futurePadMs = Math.max(rangeMs / 6, 5 * 60_000);
+        const isToday = selectedDate.toDateString() === referenceNow.toDateString();
+        const end = isToday ? new Date(referenceNow.getTime() + futurePadMs) : endOfDay(selectedDate);
+        // futurePadMs is only relevant for the "today" path (gives the now-line breathing room).
+        // Historical days should render exactly rangeMs of window — no asymmetric pad.
+        const start = new Date(end.getTime() - rangeMs - (isToday ? futurePadMs : 0));
+        return { windowStart: start, windowEnd: end };
+    }, [range, selectedDate, referenceNow]);
+    const ticks = useMemo(() => buildTicks(windowStart, windowEnd, range), [windowStart, windowEnd, range]);
+    const handleRange = (r) => {
+        if (controlledRange === undefined)
+            setInternalRange(r);
+        onRangeChange?.(r);
+    };
+    const handleDate = (d) => {
+        if (controlledDate === undefined)
+            setInternalDate(d);
+        onDateChange?.(d);
+    };
+    const showNowLine = referenceNow.getTime() >= windowStart.getTime() &&
+        referenceNow.getTime() <= windowEnd.getTime();
+    const nowPositionPct = showNowLine
+        ? ((referenceNow.getTime() - windowStart.getTime()) /
+            (windowEnd.getTime() - windowStart.getTime())) *
+            100
+        : 0;
+    return (_jsxs("section", { className: cn('flex flex-col rounded-lg border border-border bg-card p-4', className), children: [_jsx(TimeAxis, { range: range, onRangeChange: handleRange, selectedDate: selectedDate, onDateChange: handleDate, now: referenceNow, title: title, groupChip: groupChip, activeCount: activeCount, labels: resolvedLabels, ticks: ticks, labelGutterPx: LABEL_GUTTER_PX }), _jsxs("div", { className: "relative", children: [lanes.map((lane) => (_jsx(LaneRow, { lane: lane, windowStart: windowStart, windowEnd: windowEnd, labelGutterPx: LABEL_GUTTER_PX, selectedBarId: selectedBarId, onSelectBar: onSelectBar }, lane.id))), showNowLine && (_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute top-0 bottom-0 w-px bg-primary", style: {
+                            left: `calc(${LABEL_GUTTER_PX}px + (100% - ${LABEL_GUTTER_PX}px) * ${nowPositionPct / 100})`,
+                        }, children: _jsx("div", { className: "-translate-x-1/2 -top-1 absolute size-2 rounded-full bg-primary" }) }))] }), legend && legend.length > 0 && (_jsxs("div", { className: "mt-3 flex items-center gap-4 border-border/40 border-t pt-3 text-muted-foreground text-xs", children: [_jsx("span", { className: "uppercase tracking-wider", children: "Legend" }), legend.map((item) => (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: cn('inline-block size-2 rounded-sm', item.swatchClass) }), item.label] }, item.label))), showNowLine && (_jsxs("span", { className: "ml-auto flex items-center gap-1.5", children: [_jsx("span", { className: "inline-block size-2 rounded-full bg-primary" }), resolvedLabels.now, " \u00B7 ", formatTime(referenceNow)] }))] }))] }));
+}
+function endOfDay(d) {
+    const e = new Date(d);
+    e.setHours(23, 59, 59, 999);
+    return e;
+}
+function formatTime(d) {
+    return new Intl.DateTimeFormat(undefined, {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false,
+    }).format(d);
+}
+function buildTicks(start, end, range) {
+    const span = end.getTime() - start.getTime();
+    const tickCount = range === '7d' ? 7 : range === '24h' ? 8 : 7;
+    const out = [];
+    for (let i = 0; i <= tickCount; i++) {
+        const t = new Date(start.getTime() + (span * i) / tickCount);
+        out.push({ position: (i / tickCount) * 100, label: formatTickLabel(t, range) });
+    }
+    return out;
+}
+function formatTickLabel(d, range) {
+    if (range === '7d') {
+        return new Intl.DateTimeFormat(undefined, { weekday: 'short' }).format(d);
+    }
+    return new Intl.DateTimeFormat(undefined, {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false,
+    }).format(d);
+}

package/dist/timeline/lane.d.ts

@@ -0,0 +1,10 @@
+import type { Lane, LaneBar } from './lane-timeline-types.js';
+export interface LaneRowProps {
+    lane: Lane;
+    windowStart: Date;
+    windowEnd: Date;
+    labelGutterPx: number;
+    selectedBarId?: string;
+    onSelectBar?: (bar: LaneBar, lane: Lane) => void;
+}
+export declare function LaneRow({ lane, windowStart, windowEnd, labelGutterPx, selectedBarId, onSelectBar, }: LaneRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/timeline/lane.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+export function LaneRow({ lane, windowStart, windowEnd, labelGutterPx, selectedBarId, onSelectBar, }) {
+    return (_jsxs("div", { className: "grid items-center gap-0 border-border/40 border-b py-3", style: { gridTemplateColumns: `${labelGutterPx}px 1fr` }, children: [_jsxs("div", { className: "flex flex-col gap-0.5 pr-3", children: [_jsxs("div", { className: cn('flex items-center gap-2 text-sm', lane.muted && 'text-muted-foreground'), children: [lane.statusDotClass && (_jsx("span", { className: cn('inline-block size-2 rounded-full', lane.statusDotClass, lane.muted && 'opacity-40') })), _jsx("span", { className: "font-medium", children: lane.label })] }), lane.sublabel && _jsx("div", { className: "text-muted-foreground text-xs", children: lane.sublabel })] }), _jsx("div", { className: "relative h-7", children: lane.bars.map((bar) => {
+                    const placement = placeBar(bar, windowStart, windowEnd);
+                    if (!placement)
+                        return null;
+                    const selected = selectedBarId === bar.id;
+                    const isSelectable = !!onSelectBar;
+                    const barClassName = cn('absolute top-0 flex h-full items-center overflow-hidden rounded-md px-2 text-left text-xs text-white', bar.fillClass, bar.accentClass, isSelectable && [
+                        'data-[selected]:ring-2 data-[selected]:ring-primary data-[selected]:ring-offset-1 data-[selected]:ring-offset-background',
+                        'hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                    ]);
+                    const barStyle = { left: `${placement.left}%`, width: `${placement.width}%` };
+                    const ariaLabel = `${lane.label} — ${bar.label}`;
+                    if (!isSelectable) {
+                        return (_jsx("div", { role: "img", "aria-label": ariaLabel, className: barClassName, style: barStyle, children: _jsx("span", { "aria-hidden": "true", className: "truncate", children: bar.label }) }, bar.id));
+                    }
+                    return (_jsx("button", { type: "button", onClick: () => onSelectBar(bar, lane), "data-selected": selected || undefined, className: barClassName, style: barStyle, "aria-label": ariaLabel, children: _jsx("span", { "aria-hidden": "true", className: "truncate", children: bar.label }) }, bar.id));
+                }) })] }));
+}
+function placeBar(bar, windowStart, windowEnd) {
+    const ws = windowStart.getTime();
+    const we = windowEnd.getTime();
+    const span = we - ws;
+    if (span <= 0)
+        return null;
+    const bs = bar.start.getTime();
+    const be = bar.end.getTime();
+    // Bar entirely outside the window (or exactly touching boundary) — skip.
+    if (be <= ws || bs >= we)
+        return null;
+    const clampedStart = Math.max(bs, ws);
+    const clampedEnd = Math.min(be, we);
+    const left = ((clampedStart - ws) / span) * 100;
+    const width = Math.max(((clampedEnd - clampedStart) / span) * 100, 0.5);
+    return { left, width };
+}

package/dist/timeline/public.d.ts

@@ -1 +1,2 @@
+export type { Lane, LaneBar, LaneLegendItem, LaneTimelineRange, } from './lane-timeline-types.js';
 export type { ScrubMark, TimelineEvent, TimelineEventKind } from './types.js';

package/dist/timeline/time-axis.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { LaneTimelineLabels, LaneTimelineRange, TimeTick } from './lane-timeline-types.js';
+export interface TimeAxisProps {
+    range: LaneTimelineRange;
+    onRangeChange: (range: LaneTimelineRange) => void;
+    selectedDate: Date;
+    onDateChange: (date: Date) => void;
+    /** Reference time used to determine whether `selectedDate` is "today" in the header label. */
+    now: Date;
+    title?: ReactNode;
+    groupChip?: ReactNode;
+    activeCount?: number;
+    labels: LaneTimelineLabels;
+    ticks: TimeTick[];
+    /** Width of the lane-label gutter on the left, in px (matches Lane component). */
+    labelGutterPx: number;
+}
+export declare function TimeAxis({ range, onRangeChange, selectedDate, onDateChange, now, title, groupChip, activeCount, labels, ticks, labelGutterPx, }: TimeAxisProps): import("react/jsx-runtime").JSX.Element;

package/dist/timeline/time-axis.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '../lib/utils.js';
+const RANGES = ['1h', '6h', '24h', '7d'];
+export function TimeAxis({ range, onRangeChange, selectedDate, onDateChange, now, title, groupChip, activeCount, labels, ticks, labelGutterPx, }) {
+    const stepDate = (delta) => {
+        const next = new Date(selectedDate);
+        next.setDate(next.getDate() + delta);
+        onDateChange(next);
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-3 border-border border-b pb-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [title && _jsx("div", { className: "font-medium text-sm", children: title }), _jsx("div", { className: "flex items-center gap-1 rounded-md bg-muted p-0.5", children: RANGES.map((r) => (_jsx("button", { type: "button", "aria-pressed": r === range, onClick: () => onRangeChange(r), "data-active": r === range || undefined, className: cn('rounded px-2 py-0.5 text-xs', 'data-[active]:bg-background data-[active]:text-foreground', r !== range && 'text-muted-foreground hover:text-foreground'), children: r }, r))) }), groupChip && _jsx("div", { className: "text-muted-foreground text-xs", children: groupChip }), typeof activeCount === 'number' && (_jsxs("div", { className: "text-muted-foreground text-xs", children: [_jsx("span", { className: "mr-1 inline-block size-1.5 rounded-full bg-success-500" }), labels.activeCount.replace('{n}', String(activeCount))] })), _jsxs("div", { className: "ml-auto flex items-center gap-1 rounded-md border border-border bg-card px-2 py-1 text-xs", children: [_jsx("button", { type: "button", "aria-label": labels.previousDate, onClick: () => stepDate(-1), className: "text-muted-foreground hover:text-foreground", children: _jsx(ChevronLeft, { className: "size-3.5" }) }), _jsx("div", { className: "px-1", children: formatDateHeader(selectedDate, now) }), _jsx("button", { type: "button", "aria-label": labels.nextDate, onClick: () => stepDate(1), className: "text-muted-foreground hover:text-foreground", children: _jsx(ChevronRight, { className: "size-3.5" }) })] })] }), _jsxs("div", { className: "grid items-end gap-0", style: { gridTemplateColumns: `${labelGutterPx}px 1fr` }, children: [_jsx("div", {}), _jsx("div", { className: "relative h-5", children: ticks.map((t) => (_jsx("div", { className: "-translate-x-1/2 absolute top-0 text-muted-foreground text-xs", style: { left: `${t.position}%` }, children: t.label }, `${t.position}:${t.label}`))) })] })] }));
+}
+function formatDateHeader(d, referenceNow) {
+    const isToday = d.toDateString() === referenceNow.toDateString();
+    const fmt = new Intl.DateTimeFormat(undefined, {
+        weekday: 'short',
+        month: 'short',
+        day: 'numeric',
+    }).format(d);
+    return isToday ? `Today · ${fmt}` : fmt;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
   "repository": {
@@ -43,6 +43,14 @@
       "types": "./dist/timeline/index.d.ts",
       "default": "./dist/timeline/index.js"
     },
+    "./kanban": {
+      "types": "./dist/kanban/index.d.ts",
+      "import": "./dist/kanban/index.js"
+    },
+    "./list": {
+      "types": "./dist/list/index.d.ts",
+      "import": "./dist/list/index.js"
+    },
     "./marketing": {
       "types": "./dist/marketing/index.d.ts",
       "default": "./dist/marketing/index.js"
@@ -73,6 +81,9 @@
     "access": "public"
   },
   "peerDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@react-three/fiber": "^9.0.0",
     "lucide-react": "^1.8.0",
     "next-themes": "^0.4.0",
@@ -80,6 +91,15 @@
     "react-dom": ">=19"
   },
   "peerDependenciesMeta": {
+    "@dnd-kit/core": {
+      "optional": false
+    },
+    "@dnd-kit/sortable": {
+      "optional": false
+    },
+    "@dnd-kit/utilities": {
+      "optional": false
+    },
     "@react-three/fiber": {
       "optional": true
     },
@@ -103,6 +123,9 @@
     "@biomejs/biome": "^2.4.12",
     "@changesets/changelog-github": "^0.5.1",
     "@changesets/cli": "^2.29.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.6.0",
     "@size-limit/preset-small-lib": "^12.1.0",