@tulipfarm/sprout 0.3.0 → 0.4.0

package/dist/components/board.js

@@ -0,0 +1,640 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, TouchSensor, closestCenter, pointerWithin, rectIntersection, useDroppable, useSensor, useSensors, } from '@dnd-kit/core';
+import { SortableContext, arrayMove, defaultAnimateLayoutChanges, horizontalListSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
+import { ChevronDown } from 'reicon-react/icons/ChevronDown';
+import { ChevronRight } from 'reicon-react/icons/ChevronRight';
+import { MoreH } from 'reicon-react/icons/MoreH';
+import { Plus } from 'reicon-react/icons/Plus';
+import { Reorder } from 'reicon-react/icons/Reorder';
+import { cn } from '../internal/classes.js';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from './alert-dialog.js';
+import { Badge } from './badge.js';
+import { Button } from './button.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from './dropdown-menu.js';
+import { Input } from './input.js';
+import { SearchField } from './search-field.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select.js';
+import { Skeleton } from './skeleton.js';
+const CARD = 'card:';
+const COLUMN = 'column:';
+const cellKey = (laneId, columnId) => `${laneId}\u0000${columnId}`;
+const dataOf = (value) => value;
+const dndAccessibility = {
+    container: typeof document === 'undefined' ? undefined : document.body,
+};
+const keyboardCodes = {
+    start: ['Space'],
+    cancel: ['Escape'],
+    end: ['Space'],
+};
+// dnd-kit only animates neighbors while the moved card is still in their list,
+// so cards in a cell the dragged card just left would jump without this.
+const animateLayoutChanges = args => defaultAnimateLayoutChanges({ ...args, wasDragging: true });
+const dropAnimation = {
+    duration: 160,
+    easing: 'cubic-bezier(0.2, 0, 0, 1)',
+};
+const reducedMotion = () => typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+// Touch goes to TouchSensor, which waits for a press so a swipe still scrolls.
+class NoTouchPointerSensor extends PointerSensor {
+    static activators = [
+        {
+            eventName: 'onPointerDown',
+            handler: ({ nativeEvent }) => nativeEvent.pointerType !== 'touch' && nativeEvent.isPrimary && nativeEvent.button === 0,
+        },
+    ];
+}
+const sameList = (a, b) => a !== undefined && a.length === b.length && a.every((x, i) => x === b[i]);
+const collide = args => {
+    const type = dataOf(args.active.data.current)?.type;
+    const droppableContainers = args.droppableContainers.filter(container => type === 'column'
+        ? dataOf(container.data.current)?.type === 'column'
+        : dataOf(container.data.current)?.type !== 'column');
+    const scoped = { ...args, droppableContainers };
+    if (type === 'column')
+        return closestCenter(scoped);
+    const pointer = pointerWithin(scoped);
+    const hits = pointer.length ? pointer : rectIntersection(scoped);
+    const card = hits.find(hit => dataOf(droppableContainers.find(c => c.id === hit.id)?.data.current)?.type === 'card');
+    return card ? [card] : hits.slice(0, 1);
+};
+/** Moves `ids` into `to`, before `beforeId`, or to the end of that cell. */
+function place(list, ids, to, beforeId, laneOf, withLanes) {
+    const moving = new Set(ids);
+    const moved = ids.flatMap(id => {
+        const item = list.find(i => i.id === id);
+        if (!item)
+            return [];
+        return [
+            {
+                ...item,
+                columnId: to.columnId,
+                ...(withLanes ? { laneId: to.laneId } : {}),
+            },
+        ];
+    });
+    const rest = list.filter(item => !moving.has(item.id));
+    let at = beforeId === null ? -1 : rest.findIndex(i => i.id === beforeId);
+    if (at === -1) {
+        at = rest.length;
+        for (let i = rest.length - 1; i >= 0; i--) {
+            const item = rest[i];
+            if (item.columnId === to.columnId && laneOf(item) === to.laneId) {
+                at = i + 1;
+                break;
+            }
+        }
+    }
+    rest.splice(at, 0, ...moved);
+    return rest;
+}
+/**
+ * A Kanban board. Columns run across, optional lanes run down, and cards sit
+ * in the cell where they meet. Cards drag to any cell, columns drag by their
+ * header, and titles rename in place. Lanes and the cards in each cell are
+ * virtualized, so thousands of cards stay fast.
+ */
+export function Board({ columns, items, lanes, onItemsChange, onColumnsChange, onItemAdd, onColumnAdd, onColumnRetry, onColumnShowAll, columnText, onItemOpen, renderBody, renderTitle, renderCard, itemActions, searchable, searchText, laneBy, label = 'Board', className, }) {
+    const dndId = useId();
+    const withLanes = lanes !== undefined;
+    const laneList = useMemo(() => lanes ?? [{ id: '', title: label }], [lanes, label]);
+    const laneOf = (item) => (withLanes ? (item.laneId ?? '') : '');
+    const [draft, setDraft] = useState(null);
+    const draftRef = useRef(null);
+    const setDraftBoth = (next) => {
+        draftRef.current = next;
+        setDraft(next);
+    };
+    const shown = draft ?? items;
+    const [query, setQuery] = useState('');
+    const [selected, setSelected] = useState(() => new Set());
+    const [anchor, setAnchor] = useState(null);
+    const [collapsedColumns, setCollapsedColumns] = useState(() => new Set());
+    const [collapsedLanes, setCollapsedLanes] = useState(() => new Set());
+    const [active, setActive] = useState(null);
+    const [extras, setExtras] = useState([]);
+    const [laneLock, setLaneLock] = useState(null);
+    const movedRef = useRef(false);
+    const needle = query.trim().toLowerCase();
+    const matches = (item) => !needle ||
+        item.title.toLowerCase().includes(needle) ||
+        (searchText?.(item).toLowerCase().includes(needle) ?? false);
+    // Unchanged cells keep their array, so memoized cells skip re-rendering mid-drag.
+    const cellsRef = useRef(new Map());
+    const cells = useMemo(() => {
+        const map = new Map();
+        for (const item of shown) {
+            if (!matches(item))
+                continue;
+            const key = cellKey(laneOf(item), item.columnId);
+            const list = map.get(key);
+            if (list)
+                list.push(item);
+            else
+                map.set(key, [item]);
+        }
+        for (const [key, list] of map) {
+            const before = cellsRef.current.get(key);
+            if (sameList(before, list))
+                map.set(key, before);
+        }
+        cellsRef.current = map;
+        return map;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [shown, needle, searchText, withLanes]);
+    const columnTotals = useMemo(() => {
+        const totals = new Map();
+        for (const item of shown)
+            totals.set(item.columnId, (totals.get(item.columnId) ?? 0) + 1);
+        return totals;
+    }, [shown]);
+    const laneTotals = (laneId) => columns.reduce((sum, column) => sum + (cells.get(cellKey(laneId, column.id))?.length ?? 0), 0);
+    const visibleCount = [...cells.values()].reduce((s, l) => s + l.length, 0);
+    const findItem = (id) => (draftRef.current ?? items).find(item => item.id === id);
+    const cellOf = (item) => ({
+        laneId: laneOf(item),
+        columnId: item.columnId,
+    });
+    const cellName = (cell) => {
+        const column = columns.find(c => c.id === cell.columnId)?.title ?? '';
+        const lane = laneList.find(l => l.id === cell.laneId)?.title;
+        return withLanes && lane ? `${column}, ${lane}` : column;
+    };
+    const sensors = useSensors(useSensor(NoTouchPointerSensor, { activationConstraint: { distance: 4 } }), useSensor(TouchSensor, {
+        activationConstraint: { delay: 200, tolerance: 6 },
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+        keyboardCodes,
+    }));
+    const onDragStart = ({ active: a }) => {
+        const data = dataOf(a.data.current);
+        if (!data)
+            return;
+        setActive(data);
+        if (data.type !== 'card')
+            return;
+        // Lanes may grow but not shrink mid-drag, so the lane under the pointer
+        // does not move away when a card leaves it.
+        setLaneLock(new Map(laneVirtualizer.getVirtualItems().map(row => [laneList[row.index]?.id ?? '', row.size])));
+        const others = selected.has(data.id)
+            ? shown.filter(item => selected.has(item.id) && item.id !== data.id).map(item => item.id)
+            : [];
+        if (!selected.has(data.id))
+            setSelected(new Set());
+        setExtras(others);
+        const hidden = new Set(others);
+        setDraftBoth(items.filter(item => !hidden.has(item.id)));
+    };
+    const onDragOver = ({ active: a, over }) => {
+        const data = dataOf(a.data.current);
+        const target = dataOf(over?.data.current);
+        if (data?.type !== 'card' || !over || !target || movedRef.current)
+            return;
+        const list = draftRef.current;
+        const item = findItem(data.id);
+        if (!list || !item)
+            return;
+        let to;
+        let beforeId = null;
+        if (target.type === 'card') {
+            if (target.id === data.id)
+                return;
+            const overItem = findItem(target.id);
+            if (!overItem)
+                return;
+            to = cellOf(overItem);
+            const siblings = cells.get(cellKey(to.laneId, to.columnId)) ?? [];
+            const translated = a.rect.current.translated;
+            const below = translated !== null && translated.top > over.rect.top + over.rect.height / 2;
+            const index = siblings.findIndex(s => s.id === target.id);
+            beforeId = below ? (siblings[index + 1]?.id ?? null) : target.id;
+        }
+        else if (target.type === 'cell') {
+            to = target.cell;
+        }
+        else
+            return;
+        const from = cellOf(item);
+        if (from.laneId === to.laneId && from.columnId === to.columnId)
+            return;
+        movedRef.current = true;
+        requestAnimationFrame(() => {
+            movedRef.current = false;
+        });
+        setDraftBoth(place(list, [data.id], to, beforeId, laneOf, withLanes));
+    };
+    const finish = () => {
+        setDraftBoth(null);
+        setLaneLock(null);
+        setActive(null);
+        setExtras([]);
+    };
+    const onDragEnd = ({ active: a, over }) => {
+        const data = dataOf(a.data.current);
+        const target = dataOf(over?.data.current);
+        if (data?.type === 'column') {
+            if (target?.type === 'column' && target.id !== data.id && onColumnsChange) {
+                const ids = columns.map(c => c.id);
+                onColumnsChange(arrayMove(columns, ids.indexOf(data.id), ids.indexOf(target.id)));
+            }
+            return finish();
+        }
+        let list = draftRef.current;
+        const item = data?.type === 'card' ? findItem(data.id) : undefined;
+        if (!list || !item || data?.type !== 'card')
+            return finish();
+        const cell = cellOf(item);
+        const siblings = cells.get(cellKey(cell.laneId, cell.columnId)) ?? [];
+        if (target?.type === 'card' && target.id !== data.id) {
+            const ids = siblings.map(s => s.id);
+            const from = ids.indexOf(data.id);
+            const to = ids.indexOf(target.id);
+            if (from !== -1 && to !== -1) {
+                const order = arrayMove(ids, from, to);
+                list = place(list, [data.id], cell, order[to + 1] ?? null, laneOf, withLanes);
+            }
+        }
+        if (extras.length) {
+            list = [...list, ...items.filter(i => extras.includes(i.id))];
+            const after = list.indexOf(list.find(i => i.id === data.id)) + 1;
+            list = place(list, extras, cell, list[after]?.id ?? null, laneOf, withLanes);
+            const next = list[list.findIndex(i => i.id === extras.at(-1)) + 1];
+            if (next && cellKey(laneOf(next), next.columnId) !== cellKey(cell.laneId, cell.columnId))
+                list = place(list, extras, cell, null, laneOf, withLanes);
+        }
+        const changed = list.some((i, index) => i !== items[index]) || list.length !== items.length;
+        finish();
+        if (changed)
+            onItemsChange?.(list);
+    };
+    const announcements = {
+        onDragStart: ({ active: a }) => {
+            const data = dataOf(a.data.current);
+            if (data?.type === 'column')
+                return `Picked up column ${columns.find(c => c.id === data.id)?.title}.`;
+            const item = data?.type === 'card' ? findItem(data.id) : undefined;
+            return item ? `Picked up card ${item.title}.` : undefined;
+        },
+        onDragOver: ({ active: a, over }) => {
+            const data = dataOf(a.data.current);
+            if (!over)
+                return undefined;
+            if (data?.type === 'column') {
+                const target = dataOf(over.data.current);
+                return target?.type === 'column' ? `Over column ${columns.find(c => c.id === target.id)?.title}.` : undefined;
+            }
+            const item = data?.type === 'card' ? findItem(data.id) : undefined;
+            return item ? `Card ${item.title} is in ${cellName(cellOf(item))}.` : undefined;
+        },
+        onDragEnd: ({ active: a }) => {
+            const data = dataOf(a.data.current);
+            if (data?.type === 'column')
+                return 'Column dropped.';
+            const item = data?.type === 'card' ? findItem(data.id) : undefined;
+            return item ? `Card ${item.title} dropped in ${cellName(cellOf(item))}.` : undefined;
+        },
+        onDragCancel: () => 'Move cancelled. The card went back.',
+    };
+    const select = (item, event) => {
+        const next = new Set(selected);
+        if (event.shiftKey && anchor) {
+            const flat = laneList.flatMap(lane => columns.flatMap(c => cells.get(cellKey(lane.id, c.id)) ?? []));
+            const from = flat.findIndex(i => i.id === anchor);
+            const to = flat.findIndex(i => i.id === item.id);
+            if (from !== -1 && to !== -1)
+                for (const i of flat.slice(Math.min(from, to), Math.max(from, to) + 1))
+                    next.add(i.id);
+        }
+        else if (next.has(item.id))
+            next.delete(item.id);
+        else
+            next.add(item.id);
+        setSelected(next);
+        setAnchor(item.id);
+    };
+    const rename = (item, title) => onItemsChange?.(items.map(i => (i.id === item.id ? { ...i, title } : i)));
+    const renameColumn = (column, title) => onColumnsChange?.(columns.map(c => (c.id === column.id ? { ...c, title } : c)));
+    const deleteColumn = (column) => {
+        onColumnsChange?.(columns.filter(c => c.id !== column.id));
+        if (items.some(i => i.columnId === column.id))
+            onItemsChange?.(items.filter(i => i.columnId !== column.id));
+    };
+    const latest = useRef({ select, rename });
+    useLayoutEffect(() => {
+        latest.current = { select, rename };
+    });
+    const onSelect = useCallback((item, event) => latest.current.select(item, event), []);
+    const onRename = useCallback((item, title) => latest.current.rename(item, title), []);
+    const toggle = (set, id) => {
+        const next = new Set(set);
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        return next;
+    };
+    const viewportRef = useRef(null);
+    const bodyRef = useRef(null);
+    const [bodyTop, setBodyTop] = useState(0);
+    useLayoutEffect(() => {
+        setBodyTop(bodyRef.current?.offsetTop ?? 0);
+    });
+    // Writes data attributes directly so scrolling never re-renders the board.
+    useEffect(() => {
+        const viewport = viewportRef.current;
+        const frame = viewport?.parentElement;
+        if (!viewport || !frame)
+            return;
+        const update = () => {
+            const { scrollLeft, scrollWidth, clientWidth } = viewport;
+            frame.toggleAttribute('data-more-start', scrollLeft > 1);
+            frame.toggleAttribute('data-more-end', scrollLeft + clientWidth < scrollWidth - 1);
+        };
+        update();
+        viewport.addEventListener('scroll', update, { passive: true });
+        const observer = new ResizeObserver(update);
+        observer.observe(viewport);
+        if (viewport.firstElementChild)
+            observer.observe(viewport.firstElementChild);
+        return () => {
+            viewport.removeEventListener('scroll', update);
+            observer.disconnect();
+        };
+    }, []);
+    const activeLane = active?.type === 'card'
+        ? laneList.findIndex(l => {
+            const item = findItem(active.id);
+            return item ? l.id === laneOf(item) : false;
+        })
+        : -1;
+    const laneVirtualizer = useVirtualizer({
+        count: withLanes ? laneList.length : 0,
+        getScrollElement: () => viewportRef.current,
+        estimateSize: () => 140,
+        overscan: 2,
+        scrollMargin: bodyTop,
+        initialRect: { width: 0, height: 720 },
+        getItemKey: index => laneList[index]?.id ?? index,
+        rangeExtractor: (range) => {
+            const indexes = defaultRangeExtractor(range);
+            return activeLane !== -1 && !indexes.includes(activeLane)
+                ? [...indexes, activeLane].sort((a, b) => a - b)
+                : indexes;
+        },
+    });
+    // Lanes sit in normal flow after one spacer, so a lane that grows pushes the
+    // ones below it in the same frame. The dragged card's lane, kept rendered
+    // outside the range, is placed on its own.
+    const laneRows = laneVirtualizer.getVirtualItems().map((row, i, rows) => ({
+        ...row,
+        pinned: rows.length > 1 &&
+            row.index === activeLane &&
+            rows[i - 1]?.index !== row.index - 1 &&
+            rows[i + 1]?.index !== row.index + 1,
+    }));
+    const firstFlow = laneRows.find(row => !row.pinned);
+    const onBoardKeyDown = (event) => {
+        if (event.key === 'Escape' && selected.size && !active)
+            setSelected(new Set());
+    };
+    const activeItem = active?.type === 'card' ? findItem(active.id) : undefined;
+    const activeColumn = active?.type === 'column' ? columns.find(c => c.id === active.id) : undefined;
+    const columnTemplate = columns
+        .map(c => (collapsedColumns.has(c.id) ? 'var(--sprout-board-collapsed-width)' : 'var(--sprout-board-column-width)'))
+        .join(' ');
+    const gridStyle = {
+        gridTemplateColumns: `${columnTemplate}${onColumnAdd ? ' var(--sprout-board-column-width)' : ''}`,
+    };
+    const loadedIn = (column) => columnTotals.get(column.id) ?? 0;
+    const showAllCount = (column) => onColumnShowAll &&
+        !column.status &&
+        !collapsedColumns.has(column.id) &&
+        column.total !== undefined &&
+        column.total > loadedIn(column)
+        ? column.total
+        : undefined;
+    // With lanes, a column's message and "Show all" show once, under its header
+    // and at the board foot, instead of in every lane.
+    const laneNotices = withLanes && columns.some(c => c.status === 'error' || c.status === 'unavailable');
+    const laneFoot = withLanes && columns.some(c => showAllCount(c) !== undefined);
+    const renderRow = (lane) => (_jsx("div", { className: "sprout-board-row", style: gridStyle, children: columns.map(column => (_jsx(BoardCell, { laneId: lane.id, column: column, name: cellName({ laneId: lane.id, columnId: column.id }), items: cells.get(cellKey(lane.id, column.id)) ?? [], collapsed: collapsedColumns.has(column.id), fill: !withLanes, empty: !column.status && !column.total && loadedIn(column) === 0 ? (columnText?.empty ?? 'No cards') : undefined, showAll: withLanes ? undefined : showAllCount(column), onShowAll: !withLanes && showAllCount(column) !== undefined ? onColumnShowAll : undefined, showAllText: columnText?.showAll, onRetry: !withLanes && column.status === 'error' ? onColumnRetry : undefined, activeId: active?.type === 'card' ? active.id : null, movable: !!onItemsChange && !needle, selected: selected, onSelect: onItemsChange ? onSelect : undefined, onRename: onItemsChange ? onRename : undefined, onItemAdd: onItemAdd, onItemOpen: onItemOpen, look: look }, column.id))) }));
+    const look = useMemo(() => ({ renderBody, renderTitle, renderCard, itemActions }), [renderBody, renderTitle, renderCard, itemActions]);
+    const toolbar = searchable || laneBy || selected.size > 0;
+    return (_jsxs("div", { "data-slot": "board", className: cn('sprout-board', className), onKeyDown: onBoardKeyDown, children: [toolbar && (_jsxs("div", { className: "sprout-board-toolbar", "data-slot": "board-toolbar", children: [searchable && (_jsx(SearchField, { label: "Search cards", value: query, onChange: setQuery, className: "sprout-board-search" })), laneBy && (_jsxs("span", { className: "sprout-board-lane-by", children: [_jsx("span", { children: laneBy.label ?? 'Lanes by' }), _jsxs(Select, { value: laneBy.value, onValueChange: value => {
+                                    if (typeof value === 'string')
+                                        laneBy.onChange(value);
+                                }, children: [_jsx(SelectTrigger, { size: "sm", "aria-label": laneBy.label ?? 'Lanes by', children: _jsx(SelectValue, { children: laneBy.options.find(o => o.value === laneBy.value)?.label }) }), _jsx(SelectContent, { children: laneBy.options.map(option => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] })] })), _jsx("span", { className: "sprout-board-status", role: "status", children: selected.size > 0 ? (_jsxs(_Fragment, { children: [selected.size, " selected", _jsx(Button, { variant: "ghost", size: "xs", onClick: () => setSelected(new Set()), children: "Clear" })] })) : needle ? (visibleCount ? (`${visibleCount.toLocaleString('en-US')} of ${items.length.toLocaleString('en-US')} cards`) : (`No cards match “${query.trim()}”`)) : (`${items.length.toLocaleString('en-US')} cards`) })] })), _jsxs(DndContext, { id: dndId, sensors: sensors, accessibility: { ...dndAccessibility, announcements }, collisionDetection: collide, onDragStart: onDragStart, onDragOver: onDragOver, onDragEnd: onDragEnd, onDragCancel: finish, children: [_jsx("div", { className: "sprout-board-frame", children: _jsx("div", { ref: viewportRef, role: "region", "aria-label": label, className: "sprout-board-viewport", "data-lanes": withLanes || undefined, children: _jsxs("div", { className: "sprout-board-canvas", children: [_jsxs("div", { className: "sprout-board-header", style: gridStyle, children: [_jsx(SortableContext, { items: columns.map(c => COLUMN + c.id), strategy: horizontalListSortingStrategy, children: columns.map(column => (_jsx(BoardColumnHeader, { column: column, loaded: loadedIn(column), collapsed: collapsedColumns.has(column.id), onCollapse: () => setCollapsedColumns(s => toggle(s, column.id)), onRename: onColumnsChange ? renameColumn : undefined, onDelete: onColumnsChange ? deleteColumn : undefined }, column.id))) }), onColumnAdd && _jsx(AddColumn, { onAdd: onColumnAdd }), laneNotices &&
+                                                columns.map(column => (_jsx("div", { className: "sprout-board-column-notice", children: !collapsedColumns.has(column.id) && _jsx(ColumnNotice, { column: column, onRetry: onColumnRetry }) }, `notice:${column.id}`)))] }), withLanes ? (_jsx("div", { ref: bodyRef, className: "sprout-board-lanes", style: { height: laneVirtualizer.getTotalSize() }, children: laneRows.map(row => {
+                                            const lane = laneList[row.index];
+                                            if (!lane)
+                                                return null;
+                                            const collapsed = collapsedLanes.has(lane.id);
+                                            const count = laneTotals(lane.id);
+                                            return (_jsxs("section", { ref: laneVirtualizer.measureElement, "data-index": row.index, "aria-label": `${lane.title}, ${count} cards`, className: "sprout-board-lane", "data-collapsed": collapsed || undefined, "data-pinned": row.pinned || undefined, style: {
+                                                    ...(row.pinned
+                                                        ? { top: row.start - bodyTop }
+                                                        : row === firstFlow
+                                                            ? { marginTop: row.start - bodyTop }
+                                                            : {}),
+                                                    minHeight: laneLock?.get(lane.id),
+                                                }, children: [_jsx("div", { className: "sprout-board-lane-bar", children: _jsxs("button", { type: "button", className: "sprout-board-lane-toggle", "aria-expanded": !collapsed, onClick: () => setCollapsedLanes(s => toggle(s, lane.id)), children: [collapsed ? _jsx(ChevronRight, { "aria-hidden": "true" }) : _jsx(ChevronDown, { "aria-hidden": "true" }), _jsx("span", { className: "sprout-board-lane-title", children: lane.title }), _jsx("span", { className: "sprout-board-count", children: count })] }) }), !collapsed && renderRow(lane)] }, row.key));
+                                        }) })) : (_jsx("div", { ref: bodyRef, className: "sprout-board-single", children: laneList[0] && renderRow(laneList[0]) })), laneFoot && onColumnShowAll && (_jsx("div", { className: "sprout-board-foot", style: gridStyle, children: columns.map(column => {
+                                            const count = showAllCount(column);
+                                            return (_jsx("div", { children: count !== undefined && (_jsx(ShowAll, { column: column, count: count, onShowAll: onColumnShowAll, text: columnText?.showAll })) }, column.id));
+                                        }) }))] }) }) }), _jsx(DragOverlay, { dropAnimation: reducedMotion() ? null : dropAnimation, children: activeItem ? (_jsxs("div", { className: "sprout-board-overlay", children: [_jsx(CardFace, { item: activeItem, look: look }), extras.length > 0 && (_jsxs(Badge, { variant: "default", className: "sprout-board-overlay-count", children: [extras.length + 1, " cards"] }))] })) : activeColumn ? (_jsx("div", { className: "sprout-board-column-header sprout-board-overlay", children: _jsx("span", { className: "sprout-board-column-title", "data-tone": activeColumn.tone ? '' : undefined, children: _jsx(ColumnTitle, { column: activeColumn }) }) })) : null })] })] }));
+}
+const cardTitle = (item, look) => (_jsx("span", { className: "sprout-board-card-title", children: look.renderTitle ? look.renderTitle(item) : item.title }));
+function cardInside(item, look, parts, bodyId) {
+    if (look.renderCard)
+        return look.renderCard(item, parts);
+    const body = look.renderBody?.(item);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sprout-board-card-head", children: [parts.title, parts.menu] }), body != null && (_jsx("div", { id: bodyId, className: "sprout-board-card-body", children: body }))] }));
+}
+function CardFace({ item, look }) {
+    return (_jsx("div", { className: "sprout-board-card", "data-overlay": "", "data-custom": look.renderCard ? '' : undefined, children: cardInside(item, look, { title: cardTitle(item, look), menu: null }) }));
+}
+const BoardCell = memo(function BoardCell({ laneId, column, name, items, collapsed, fill, empty, showAll, onShowAll, showAllText, onRetry, activeId, movable, selected, onSelect, onRename, onItemAdd, onItemOpen, look, }) {
+    const columnId = column.id;
+    const status = column.status;
+    const cell = useMemo(() => ({ laneId, columnId }), [laneId, columnId]);
+    const drop = useDroppable({
+        id: `cell:${cellKey(cell.laneId, cell.columnId)}`,
+        data: { type: 'cell', cell },
+        disabled: status !== undefined,
+    });
+    const scrollRef = useRef(null);
+    const activeIndex = activeId ? items.findIndex(i => i.id === activeId) : -1;
+    const virtualizer = useVirtualizer({
+        count: collapsed ? 0 : items.length,
+        getScrollElement: () => scrollRef.current,
+        estimateSize: () => 60,
+        gap: 4,
+        overscan: 6,
+        initialRect: { width: 0, height: 480 },
+        getItemKey: index => items[index]?.id ?? index,
+        rangeExtractor: (range) => {
+            const indexes = defaultRangeExtractor(range);
+            return activeIndex !== -1 && !indexes.includes(activeIndex)
+                ? [...indexes, activeIndex].sort((a, b) => a - b)
+                : indexes;
+        },
+    });
+    const [adding, setAdding] = useState(false);
+    if (collapsed)
+        return (_jsx("div", { ref: drop.setNodeRef, className: "sprout-board-cell", "data-collapsed": "", "data-over": drop.isOver || undefined, "aria-label": `${name}, ${items.length} cards, collapsed`, role: "group", children: _jsx("span", { className: "sprout-board-count", children: items.length || '' }) }));
+    return (_jsxs("div", { ref: drop.setNodeRef, className: "sprout-board-cell", "data-fill": fill || undefined, "data-over": drop.isOver || undefined, "data-status": status, children: [fill && _jsx(ColumnNotice, { column: column, onRetry: onRetry }), _jsxs("div", { ref: scrollRef, className: "sprout-board-cell-scroll", children: [_jsx(SortableContext, { items: items.map(i => CARD + i.id), strategy: verticalListSortingStrategy, children: _jsx("div", { role: "list", "aria-label": `${name}, ${items.length} cards`, "aria-busy": status === 'loading' || undefined, className: "sprout-board-cards", style: { height: virtualizer.getTotalSize() }, children: virtualizer.getVirtualItems().map(row => {
+                                const item = items[row.index];
+                                if (!item)
+                                    return null;
+                                return (_jsx("div", { ref: virtualizer.measureElement, "data-index": row.index, role: "listitem", className: "sprout-board-card-slot", style: { top: row.start }, children: _jsx(BoardCard, { item: item, movable: movable, selected: selected.has(item.id), onSelect: onSelect, onRename: onRename, onOpen: onItemOpen, look: look }) }, row.key));
+                            }) }) }), status === 'loading' && items.length === 0 && (_jsx("div", { className: "sprout-board-skeletons", "aria-hidden": "true", children: Array.from({ length: fill ? 3 : 2 }, (_, index) => (_jsxs("div", { className: "sprout-board-skeleton-card", children: [_jsx(Skeleton, {}), _jsx(Skeleton, {})] }, index))) })), empty !== undefined && items.length === 0 && _jsx("p", { className: "sprout-board-empty", children: empty })] }), showAll !== undefined && onShowAll && (_jsx(ShowAll, { column: column, count: showAll, onShowAll: onShowAll, text: showAllText })), onItemAdd &&
+                !status &&
+                (adding ? (_jsx(InlineText, { label: `New card in ${name}`, placeholder: "Card title", initial: "", keepOpen: true, onCommit: title => onItemAdd({
+                        title,
+                        columnId: cell.columnId,
+                        laneId: fill ? undefined : cell.laneId,
+                    }), onClose: () => setAdding(false) })) : (_jsxs(Button, { variant: "ghost", size: "xs", className: "sprout-board-add", onClick: () => setAdding(true), "aria-label": `Add card to ${name}`, children: [_jsx(Plus, { "aria-hidden": "true", "data-icon": "inline-start" }), "Add card"] })))] }));
+});
+const BoardCard = memo(function BoardCard({ item, movable, selected, onSelect, onRename, onOpen, look, }) {
+    const [editing, setEditing] = useState(false);
+    const sortable = useSortable({
+        id: CARD + item.id,
+        data: { type: 'card', id: item.id },
+        disabled: !movable || editing,
+        animateLayoutChanges,
+    });
+    const bodyId = useId();
+    const actions = look.itemActions?.(item);
+    const describe = !look.renderCard && !!look.renderBody;
+    const onClick = (event) => {
+        if (onSelect && (event.metaKey || event.ctrlKey || event.shiftKey)) {
+            event.preventDefault();
+            onSelect(item, event);
+            return;
+        }
+        onOpen?.(item);
+    };
+    const onKeyDown = (event) => {
+        if (event.target !== event.currentTarget)
+            return;
+        if (event.key === 'Enter' && onOpen) {
+            event.preventDefault();
+            onOpen(item);
+        }
+        else if (event.key === 'F2' && onRename) {
+            event.preventDefault();
+            setEditing(true);
+        }
+    };
+    return (_jsx("div", { ref: sortable.setNodeRef, ...sortable.attributes, ...sortable.listeners, "aria-disabled": undefined, role: "group", "aria-roledescription": movable ? 'draggable card' : 'card', "aria-label": item.title, "aria-describedby": describe ? bodyId : undefined, tabIndex: 0, className: "sprout-board-card", "data-selected": selected || undefined, "data-dragging": sortable.isDragging || undefined, "data-openable": onOpen ? '' : undefined, "data-custom": look.renderCard ? '' : undefined, style: {
+            transform: CSS.Translate.toString(sortable.transform),
+            transition: sortable.transition,
+        }, onClick: editing ? undefined : onClick, onDoubleClick: onRename && !onOpen && !editing ? () => setEditing(true) : undefined, onKeyDown: event => {
+            onKeyDown(event);
+            // Space in the menu button or title must not pick the card up.
+            if (event.target === event.currentTarget && !event.defaultPrevented)
+                sortable.listeners?.onKeyDown?.(event);
+        }, children: cardInside(item, look, {
+            title: editing && onRename ? (_jsx(InlineText, { label: "Card title", initial: item.title, onCommit: title => onRename(item, title), onClose: () => setEditing(false) })) : (cardTitle(item, look)),
+            menu: (actions != null || onRename) && !editing ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { variant: "ghost", size: "icon-xs", className: "sprout-board-card-menu", "aria-label": `Actions for ${item.title}`, onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation() }), children: _jsx(MoreH, { "aria-hidden": "true" }) }), _jsxs(DropdownMenuContent, { align: "end", children: [onRename && _jsx(DropdownMenuItem, { onClick: () => setEditing(true), children: "Rename" }), onRename && actions != null && _jsx(DropdownMenuSeparator, {}), actions] })] })) : null,
+        }, bodyId) }));
+});
+const statusWords = {
+    loading: 'loading',
+    error: 'couldn’t load',
+    unavailable: 'unavailable',
+};
+function BoardColumnHeader({ column, loaded, collapsed, onCollapse, onRename, onDelete }) {
+    const [editing, setEditing] = useState(false);
+    const [confirming, setConfirming] = useState(false);
+    const sortable = useSortable({
+        id: COLUMN + column.id,
+        data: { type: 'column', id: column.id },
+        disabled: !onRename || editing,
+    });
+    const total = column.total ?? loaded;
+    // Without a `total`, the loaded count means nothing until the column is ready.
+    const counted = column.total !== undefined || !column.status;
+    const over = counted && column.limit !== undefined && total > column.limit;
+    const count = column.limit !== undefined ? `${formatCount(total)} / ${formatCount(column.limit)}` : formatCount(total);
+    const label = [
+        column.title,
+        counted && `${formatCount(total)} cards`,
+        counted && total > loaded && !column.status && `${loaded} shown`,
+        column.status && statusWords[column.status],
+        over && 'over limit',
+    ]
+        .filter(Boolean)
+        .join(', ');
+    const toggleButton = (_jsx("button", { type: "button", className: "sprout-board-column-toggle", "aria-expanded": !collapsed, "aria-label": `${collapsed ? 'Expand' : 'Collapse'} ${column.title}`, onClick: onCollapse, children: collapsed ? _jsx(ChevronRight, { "aria-hidden": "true" }) : _jsx(ChevronDown, { "aria-hidden": "true" }) }));
+    return (_jsxs("div", { ref: sortable.setNodeRef, ...sortable.listeners, role: "group", "aria-label": label, "aria-busy": column.status === 'loading' || undefined, className: "sprout-board-column-header", "data-collapsed": collapsed || undefined, "data-over-limit": over || undefined, "data-dragging": sortable.isDragging || undefined, style: {
+            transform: CSS.Translate.toString(sortable.transform),
+            transition: sortable.transition,
+        }, children: [collapsed && toggleButton, editing && onRename ? (_jsx(InlineText, { label: "Column title", initial: column.title, onCommit: title => onRename(column, title), onClose: () => setEditing(false) })) : onRename && !collapsed ? (_jsx("button", { type: "button", className: "sprout-board-column-title", "data-editable": "", onClick: () => setEditing(true), "aria-label": `Rename ${column.title}`, "data-tone": column.tone ? '' : undefined, children: _jsx(ColumnTitle, { column: column }) })) : (_jsx("span", { className: "sprout-board-column-title", "data-tone": column.tone && !collapsed ? '' : undefined, children: collapsed ? column.title : _jsx(ColumnTitle, { column: column }) })), !editing && counted && (_jsx("span", { className: "sprout-board-count", "aria-hidden": "true", children: count })), _jsx("span", { role: "status", className: "sprout-board-sr-only", children: column.status === 'loading' ? `Loading cards in ${column.title}…` : '' }), over && !collapsed && !editing && (_jsx(Badge, { variant: "warning", className: "sprout-board-limit", children: "Over limit" })), !collapsed && !editing && (_jsxs("span", { className: "sprout-board-column-tools", children: [toggleButton, onRename && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", ref: sortable.setActivatorNodeRef, ...sortable.attributes, className: "sprout-board-grip", "aria-label": `Move ${column.title}`, children: _jsx(Reorder, { "aria-hidden": "true" }) }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { variant: "ghost", size: "icon-xs", "aria-label": `${column.title} column actions`, onPointerDown: event => event.stopPropagation() }), children: _jsx(MoreH, { "aria-hidden": "true" }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { onClick: () => setEditing(true), children: "Rename" }), _jsx(DropdownMenuItem, { onClick: onCollapse, children: "Collapse" }), onDelete && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { variant: "destructive", onClick: () => setConfirming(true), children: "Delete column\u2026" })] }))] })] })] }))] })), onDelete && (_jsx(AlertDialog, { open: confirming, onOpenChange: setConfirming, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsxs(AlertDialogTitle, { children: ["Delete \u201C", column.title, "\u201D?"] }), _jsx(AlertDialogDescription, { children: total
+                                        ? `Its ${total} ${total === 1 ? 'card is' : 'cards are'} deleted too. This can’t be undone.`
+                                        : 'The column is empty. This can’t be undone.' })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Keep column" }), _jsx(AlertDialogAction, { variant: "destructive", onClick: () => {
+                                        setConfirming(false);
+                                        onDelete(column);
+                                    }, children: "Delete column" })] })] }) }))] }));
+}
+const formatCount = (count) => count.toLocaleString('en-US');
+function ColumnTitle({ column }) {
+    if (!column.tone)
+        return column.title;
+    return (_jsx(Badge, { variant: column.tone, className: "sprout-board-column-badge", children: _jsx("span", { children: column.title }) }));
+}
+/** The error or unavailable message of a column. Nothing for other states. */
+function ColumnNotice({ column, onRetry, }) {
+    if (column.status === 'error')
+        return (_jsxs("div", { className: "sprout-board-notice", "data-kind": "error", children: [_jsx("p", { role: "alert", children: column.error ?? 'Couldn’t load this column.' }), onRetry && (_jsx(Button, { variant: "outline", size: "xs", "aria-label": `Try again to load ${column.title}`, onClick: () => onRetry(column), children: "Try again" }))] }));
+    if (column.status === 'unavailable')
+        return (_jsx("p", { className: "sprout-board-notice", "data-kind": "unavailable", children: column.error ?? 'Cards are unavailable.' }));
+    return null;
+}
+function ShowAll({ column, count, onShowAll, text, }) {
+    return (_jsx(Button, { variant: "ghost", size: "xs", className: "sprout-board-show-all", "aria-label": text ? undefined : `Show all ${formatCount(count)} in ${column.title}`, onClick: () => onShowAll(column), children: text ? (_jsxs(_Fragment, { children: [text(count, column), _jsxs("span", { className: "sprout-board-sr-only", children: [", ", column.title] })] })) : (`Show all ${formatCount(count)}`) }));
+}
+function AddColumn({ onAdd }) {
+    const [adding, setAdding] = useState(false);
+    return (_jsx("div", { className: "sprout-board-add-column", children: adding ? (_jsx(InlineText, { label: "New column", placeholder: "Column title", initial: "", onCommit: onAdd, onClose: () => setAdding(false) })) : (_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setAdding(true), children: [_jsx(Plus, { "aria-hidden": "true", "data-icon": "inline-start" }), "Add column"] })) }));
+}
+/** Enter saves, Escape cancels, blur saves. With `keepOpen` it clears after each save. */
+function InlineText({ label, placeholder, initial, keepOpen, onCommit, onClose, }) {
+    const [value, setValue] = useState(initial);
+    const ref = useRef(null);
+    const done = useRef(false);
+    useEffect(() => {
+        ref.current?.focus();
+        ref.current?.select();
+    }, []);
+    const commit = (close) => {
+        const text = value.trim();
+        if (text && text !== initial)
+            onCommit(text);
+        if (close || !keepOpen) {
+            done.current = true;
+            onClose();
+        }
+        else
+            setValue('');
+    };
+    return (_jsx(Input, { ref: ref, "aria-label": label, placeholder: placeholder, value: value, className: "sprout-board-inline-input", onChange: event => setValue(event.currentTarget.value), onPointerDown: event => event.stopPropagation(), onClick: event => event.stopPropagation(), onKeyDown: event => {
+            event.stopPropagation();
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                commit(false);
+            }
+            else if (event.key === 'Escape') {
+                event.preventDefault();
+                done.current = true;
+                onClose();
+            }
+        }, onBlur: () => {
+            if (!done.current)
+                commit(true);
+        } }));
+}