@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/sortable/kanban.js

@@ -0,0 +1,472 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Kanban: items in stage columns with drag-to-move, column summaries, WIP limits, collapsible
+ * columns, optional swimlanes, quick add and virtualized long columns. Built on `Sortable`
+ * (multi-container) — every move also works without dragging: a card menu ("Move to ▸ stage")
+ * and Alt + arrow shortcuts, all announced.
+ */
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ChevronDown, ChevronRight, ChevronsLeftRight, Ellipsis, Plus, TriangleAlert, X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useLocale } from "../lib/locale.js";
+import { useControllableState, useLatest } from "../lib/use-controllable-state.js";
+import { Button, IconButton } from "../components/button.js";
+import { Skeleton } from "../components/skeleton.js";
+import { toast } from "../components/toast.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "../components/dropdown-menu.js";
+import { Sortable, SortableContainer, SortableOverlay, useSortableActiveId, useSortableItem } from "./sortable.js";
+import { arrayMove, keepMountedRange, moveBetweenContainers } from "./core.js";
+import { kanbanCellId, parseKanbanCellId, stageToneColor } from "./kanban-core.js";
+// ---------------------------------------------------------------------------------------------
+// Labels
+// ---------------------------------------------------------------------------------------------
+export const kanbanLabels = {
+    board: "Board",
+    column: "{stage}, {count, plural, =0 {no items} one {# item} other {# items}}",
+    cell: "{stage}, {lane}, {count, plural, =0 {no items} one {# item} other {# items}}",
+    lane: "{lane}, {count, plural, =0 {no items} one {# item} other {# items}}",
+    wip: "{count} of {limit}",
+    wipExceeded: "Over the work-in-progress limit of {limit}",
+    empty: "Drop items here",
+    filteredEmpty: "No items match",
+    loading: "Loading board",
+    addCard: "Add card",
+    addCardTo: "Add card to {stage}",
+    quickAddLabel: "Card title",
+    quickAddPlaceholder: "What needs doing?",
+    quickAddSubmit: "Add",
+    quickAddCancel: "Cancel",
+    quickAddFailed: "Couldn't add the card",
+    columnMenu: "{stage} options",
+    collapse: "Collapse column",
+    expand: "Expand {stage}",
+    moveColumnStart: "Move column left",
+    moveColumnEnd: "Move column right",
+    collapseLane: "Collapse {lane}",
+    expandLane: "Expand {lane}",
+    cardMenu: "Actions for {item}",
+    moveUp: "Move up",
+    moveDown: "Move down",
+    moveToHeading: "Move to",
+    currentStage: "Current stage",
+    moved: "{item} moved to {stage}, position {position} of {total}.",
+    reordered: "{item} moved to position {position} of {total}.",
+    blocked: "Can't move {item} to {stage}: {reason}",
+    moveFailed: "Couldn't move {item}",
+    retry: "Retry",
+    saving: "Saving",
+};
+const KanbanContext = React.createContext(null);
+function useKanban() {
+    const ctx = React.useContext(KanbanContext);
+    if (!ctx)
+        throw new Error("Kanban parts must be used inside <Kanban>.");
+    return ctx;
+}
+const defaultGetId = (item) => String(item.id);
+const defaultGetLabel = (item) => {
+    const o = item;
+    const v = o?.title ?? o?.name ?? o?.label;
+    return typeof v === "string" ? v : undefined;
+};
+export const kanbanColumnVariants = cva("vui-kanban-column relative flex min-h-0 shrink-0 flex-col rounded-ui-lg", {
+    variants: {
+        width: { sm: "w-[15.5rem]", md: "w-[18.5rem]", lg: "w-[22rem]" },
+    },
+    defaultVariants: { width: "md" },
+});
+const COLUMN_W = { sm: "15.5rem", md: "18.5rem", lg: "22rem" };
+// ---------------------------------------------------------------------------------------------
+// Kanban
+// ---------------------------------------------------------------------------------------------
+/**
+ * A board of items in stage columns.
+ *
+ * ```tsx
+ * <Kanban
+ *   aria-label="Sales pipeline"
+ *   stages={stages}
+ *   items={deals}
+ *   getStageKey={(d) => d.stage}
+ *   renderCard={(d) => <DealCard deal={d} />}
+ *   onMove={(e) => setDeals((all) => applyKanbanMove(all, e, { getId, getStageKey, update: (d, stage) => ({ ...d, stage }) }))}
+ * />
+ * ```
+ */
+export function Kanban(props) {
+    const { stages, items, getId = defaultGetId, getStageKey, getLabel, renderCard, onMove, canMove, beforeMove, summary, onQuickAdd, reorderStages, lanes, getLaneKey, collapsedStages, defaultCollapsedStages, onCollapsedStagesChange, cardMenu, virtualize, cardSize = "comfortable", columnWidth = "md", height, filtered, loading, toolbar, labels, sortableLabels, className, "aria-label": ariaLabel, } = props;
+    const t = useLabels("kanban", kanbanLabels, labels);
+    const { dir } = useLocale();
+    const uid = "vui-kanban" + React.useId().replace(/:/g, "");
+    const [collapsed, setCollapsed] = useControllableState({
+        value: collapsedStages,
+        defaultValue: () => defaultCollapsedStages ?? stages.filter((s) => s.collapsed).map((s) => s.key),
+        onChange: onCollapsedStagesChange,
+        name: "Kanban",
+    });
+    const collapsedSet = React.useMemo(() => new Set(collapsed), [collapsed]);
+    const [collapsedLanes, setCollapsedLanes] = React.useState(() => new Set());
+    const stageByKey = React.useMemo(() => new Map(stages.map((s) => [s.key, s])), [stages]);
+    const byId = React.useMemo(() => new Map(items.map((i) => [getId(i), i])), [items, getId]);
+    const labelOf = React.useCallback((id) => {
+        const it = byId.get(id);
+        if (it === undefined)
+            return id;
+        return (getLabel ? getLabel(it) : defaultGetLabel(it)) ?? id;
+    }, [byId, getLabel]);
+    // Base cells from the items, then optimistic (pending) moves on top.
+    const baseCells = React.useMemo(() => {
+        const laneKeys = lanes?.map((l) => l.key);
+        const map = new Map();
+        const order = [];
+        for (const lk of laneKeys ?? [undefined]) {
+            for (const s of stages) {
+                const id = kanbanCellId(s.key, lk);
+                map.set(id, []);
+                order.push(id);
+            }
+        }
+        for (const it of items) {
+            const cell = kanbanCellId(getStageKey(it), lanes && getLaneKey ? getLaneKey(it) : undefined);
+            map.get(cell)?.push(getId(it));
+        }
+        return order.map((id) => ({ id, items: map.get(id) }));
+    }, [items, stages, lanes, getStageKey, getLaneKey, getId]);
+    const [pendingMoves, setPendingMoves] = React.useState([]);
+    const cells = React.useMemo(() => pendingMoves.reduce((acc, m) => moveBetweenContainers(acc, m.id, m.to, m.index), baseCells), [baseCells, pendingMoves]);
+    const pending = React.useMemo(() => new Set(pendingMoves.map((m) => m.id)), [pendingMoves]);
+    const cellOf = React.useCallback((id) => cells.find((c) => c.items.includes(id)), [cells]);
+    const [status, setStatus] = React.useState("");
+    const announce = React.useCallback((msg) => {
+        setStatus("");
+        requestAnimationFrame(() => setStatus(msg));
+    }, []);
+    const focusRequest = React.useRef(null);
+    const [originCell, setOriginCell] = React.useState(null);
+    const buildEvent = React.useCallback((id, toCell, index, state) => {
+        const from = state.find((c) => c.items.includes(id));
+        if (!from)
+            return null;
+        const a = parseKanbanCellId(from.id);
+        const b = parseKanbanCellId(toCell);
+        const e = { id, from: a.stage, to: b.stage, index, fromIndex: from.items.indexOf(id) };
+        if (b.lane !== undefined) {
+            e.lane = b.lane;
+            e.fromLane = a.lane;
+        }
+        return e;
+    }, []);
+    const latest = useLatest({ cells, canMove, beforeMove, onMove, labelOf, stageByKey, lanes, t });
+    const check = React.useCallback((id, toCell, index) => {
+        const L = latest.current;
+        const e = buildEvent(id, toCell, index, L.cells);
+        if (!e || !L.canMove)
+            return true;
+        if (e.from === e.to && e.lane === e.fromLane)
+            return true;
+        return L.canMove(e);
+    }, [latest, buildEvent]);
+    const requestMove = React.useCallback(async (id, toCell, index) => {
+        const L = latest.current;
+        const e = buildEvent(id, toCell, index, L.cells);
+        if (!e)
+            return;
+        const item = L.labelOf(id);
+        const stage = L.stageByKey.get(e.to);
+        const stageName = stage?.label ?? e.to;
+        const sameCell = e.from === e.to && e.lane === e.fromLane;
+        if (sameCell && e.index === e.fromIndex)
+            return;
+        if (!sameCell && L.canMove) {
+            const ok = L.canMove(e);
+            if (ok !== true) {
+                const msg = L.t("blocked", { item, stage: stageName, reason: ok });
+                announce(msg);
+                toast.warning(msg);
+                return;
+            }
+        }
+        if (L.beforeMove) {
+            const go = await L.beforeMove(e);
+            if (!go) {
+                focusRequest.current = id;
+                return;
+            }
+        }
+        focusRequest.current = id;
+        // Re-read after the (possibly async) confirmation: handlers may have new closures by now.
+        const N = latest.current;
+        const target = N.cells.find((c) => c.id === toCell);
+        const total = sameCell ? (target?.items.length ?? 0) : (target?.items.length ?? 0) + 1;
+        announce(sameCell ? L.t("reordered", { item, position: e.index + 1, total }) : L.t("moved", { item, stage: stageName, position: e.index + 1, total }));
+        const result = N.onMove(e);
+        if (result && typeof result.then === "function") {
+            const entry = { id, to: toCell, index: e.index };
+            setPendingMoves((p) => [...p.filter((m) => m.id !== id), entry]);
+            try {
+                await result;
+            }
+            catch {
+                toast.danger(N.t("moveFailed", { item }), {
+                    action: { label: N.t("retry"), onClick: () => void requestMoveRef.current?.(id, toCell, index) },
+                });
+            }
+            finally {
+                setPendingMoves((p) => p.filter((m) => m !== entry));
+            }
+        }
+    }, [latest, buildEvent, announce]);
+    const requestMoveRef = React.useRef(requestMove);
+    requestMoveRef.current = requestMove;
+    const containers = React.useMemo(() => cells.map((c) => {
+        const { stage, lane } = parseKanbanCellId(c.id);
+        const s = stageByKey.get(stage)?.label ?? stage;
+        const l = lane !== undefined ? lanes?.find((x) => x.key === lane)?.label : undefined;
+        return { id: c.id, label: l ? `${s} · ${l}` : s, items: c.items };
+    }), [cells, stageByKey, lanes]);
+    const ctx = {
+        t,
+        uid,
+        stages,
+        stageByKey,
+        byId,
+        labelOf,
+        cells,
+        cellOf,
+        pending,
+        originCell,
+        compact: cardSize === "compact",
+        renderCard: renderCard,
+        requestMove: (id, to, index) => void requestMove(id, to, index),
+        check,
+        focusRequest,
+        cardMenu: cardMenu,
+        dir,
+        lanes,
+    };
+    const virtualOpts = virtualize ? { estimateSize: 96, threshold: 60, ...(typeof virtualize === "object" ? virtualize : {}) } : null;
+    const boardHeight = height ?? (virtualOpts ? "36rem" : undefined);
+    const toggleStage = (key) => setCollapsed((prev) => (prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]));
+    const moveStage = (key, delta) => {
+        if (!reorderStages)
+            return;
+        const i = stages.findIndex((s) => s.key === key);
+        const j = i + delta;
+        if (i < 0 || j < 0 || j >= stages.length)
+            return;
+        reorderStages(arrayMove(stages, i, j));
+    };
+    const itemsOfCell = (cellId) => (cells.find((c) => c.id === cellId)?.items ?? []).map((id) => byId.get(id));
+    const header = (stage, cellIds, idx) => {
+        const all = cellIds.flatMap((cid) => itemsOfCell(cid));
+        return (_jsx(KanbanColumnHeader, { stage: stage, count: all.length, summary: summary?.(all, stage), collapsed: collapsedSet.has(stage.key), onToggle: () => toggleStage(stage.key), onAdd: onQuickAdd && !lanes ? () => document.getElementById(quickAddId(uid, stage.key))?.click() : undefined, onMoveStart: reorderStages && idx > 0 ? () => moveStage(stage.key, -1) : undefined, onMoveEnd: reorderStages && idx < stages.length - 1 ? () => moveStage(stage.key, 1) : undefined }));
+    };
+    const body = (stage, lane) => {
+        const cellId = kanbanCellId(stage.key, lane?.key);
+        return (_jsx(KanbanCell, { cellId: cellId, stage: stage, lane: lane, collapsed: collapsedSet.has(stage.key), loading: !!loading, filtered: !!filtered, virtual: virtualOpts, bounded: boardHeight !== undefined }, cellId));
+    };
+    return (_jsx(KanbanContext.Provider, { value: ctx, children: _jsxs("div", { "data-slot": "kanban", "data-size": cardSize, "aria-busy": loading || undefined, className: cn("vui-kanban flex w-full min-w-0 flex-col gap-3", className), style: boardHeight !== undefined ? { "--kanban-h": typeof boardHeight === "number" ? `${boardHeight}px` : boardHeight } : undefined, children: [toolbar ? _jsx("div", { "data-slot": "kanban-toolbar", className: "flex min-w-0 flex-wrap items-center gap-2", children: toolbar }) : null, _jsxs(Sortable, { items: items, getId: getId, getLabel: (i) => labelOf(getId(i)), containers: containers, 
+                    // "grid": no axis lock and 2-D keyboard moves, so cards travel across columns.
+                    orientation: "grid", handle: false, labels: { moveToHeading: t("moveToHeading"), ...sortableLabels }, onDragStart: (id) => setOriginCell(cellOf(id)?.id ?? null), onDragEnd: () => setOriginCell(null), onMoveBetween: (e) => void requestMove(e.id, e.to, e.index), children: [_jsxs("div", { role: "region", "aria-label": ariaLabel ?? t("board"), className: "vui-kanban-scroll -mx-1 w-auto overflow-x-auto px-1 pb-2 [contain:inline-size]", children: [loading ? _jsx("span", { className: "sr-only", children: t("loading") }) : null, lanes ? (_jsxs("div", { "data-slot": "kanban-grid", className: "grid w-max gap-x-3 gap-y-2", style: { gridTemplateColumns: stages.map((s) => (collapsedSet.has(s.key) ? "2.75rem" : COLUMN_W[columnWidth])).join(" ") }, children: [stages.map((s, i) => (_jsx("div", { "data-slot": "kanban-column-head", "data-collapsed": collapsedSet.has(s.key) ? "" : undefined, className: "vui-kanban-head sticky top-0 z-[1] rounded-ui-lg surface-2", style: { "--stage-tone": stageToneColor(s.tone) }, children: header(s, lanes.map((l) => kanbanCellId(s.key, l.key)), i) }, s.key))), lanes.map((lane) => {
+                                            const count = stages.reduce((n, s) => n + (cells.find((c) => c.id === kanbanCellId(s.key, lane.key))?.items.length ?? 0), 0);
+                                            const closed = collapsedLanes.has(lane.key);
+                                            return (_jsxs(React.Fragment, { children: [_jsxs("div", { "data-slot": "kanban-lane", className: "sticky start-0 col-span-full flex items-center gap-2 pt-2", style: { gridColumn: "1 / -1" }, children: [_jsxs("button", { type: "button", "aria-expanded": !closed, title: t(closed ? "expandLane" : "collapseLane", { lane: lane.label }), onClick: () => setCollapsedLanes((prev) => {
+                                                                    const next = new Set(prev);
+                                                                    if (next.has(lane.key))
+                                                                        next.delete(lane.key);
+                                                                    else
+                                                                        next.add(lane.key);
+                                                                    return next;
+                                                                }), className: "focus-ring inline-flex items-center gap-2 rounded-ui-sm py-0.5 pe-2 text-sm font-medium text-fg hover:bg-hover", children: [closed ? _jsx(ChevronRight, { "aria-hidden": true, className: "size-4 text-fg-subtle rtl:-scale-x-100" }) : _jsx(ChevronDown, { "aria-hidden": true, className: "size-4 text-fg-subtle" }), lane.icon, _jsx("span", { children: lane.label })] }), _jsx("span", { className: "tabular text-xs text-fg-subtle", children: count }), _jsx("span", { "aria-hidden": true, className: "h-px flex-1 bg-line" })] }), !closed && stages.map((s) => body(s, lane))] }, lane.key));
+                                        })] })) : (_jsx("div", { "data-slot": "kanban-columns", className: "flex w-max items-start gap-3", children: stages.map((s, i) => {
+                                        const cellId = kanbanCellId(s.key);
+                                        const ids = cells.find((c) => c.id === cellId)?.items ?? [];
+                                        const isCollapsed = collapsedSet.has(s.key);
+                                        const summaryId = `${quickAddId(uid, s.key)}-summary`;
+                                        return (_jsxs("div", { role: "group", "aria-label": t("column", { stage: s.label, count: ids.length }), "aria-describedby": summary && !isCollapsed ? summaryId : undefined, "data-slot": "kanban-column", "data-collapsed": isCollapsed ? "" : undefined, "data-over-limit": s.wipLimit !== undefined && ids.length > s.wipLimit ? "" : undefined, className: cn(kanbanColumnVariants({ width: columnWidth }), "surface-2", isCollapsed && "w-11"), style: { "--stage-tone": stageToneColor(s.tone) }, children: [header(s, [cellId], i), body(s), onQuickAdd && !isCollapsed && !loading ? _jsx(KanbanQuickAdd, { stage: s, onAdd: onQuickAdd }) : null] }, s.key));
+                                    }) }))] }), _jsx(SortableOverlay, { children: (id) => {
+                                const it = byId.get(id);
+                                const c = cellOf(id);
+                                const stage = c ? stageByKey.get(parseKanbanCellId(c.id).stage) : undefined;
+                                if (it === undefined || !stage)
+                                    return null;
+                                return (_jsx("div", { className: cn("vui-sortable-clone vui-kanban-card rounded-ui border border-line", cardSize === "compact" ? "p-2" : "p-3"), style: { width: COLUMN_W[columnWidth] }, children: renderCard(it, { isDragging: true, compact: cardSize === "compact", overlay: true, saving: false, stage }) }));
+                            } })] }), _jsx("span", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "sr-only", "data-slot": "kanban-status", children: status })] }) }));
+}
+const quickAddId = (uid, stage) => `${uid}-${stage.replace(/[^a-zA-Z0-9_-]/g, "_")}`;
+/** Label · count · summary · WIP · menu. Collapsed: a vertical label that expands on click. */
+export function KanbanColumnHeader({ stage, count, summary, collapsed, onToggle, onAdd, onMoveStart, onMoveEnd }) {
+    const { t, dir, uid } = useKanban();
+    const { format } = useLocale();
+    const over = stage.wipLimit !== undefined && count > stage.wipLimit;
+    if (collapsed) {
+        return (_jsxs("button", { type: "button", "data-slot": "kanban-column-expand", onClick: onToggle, 
+            // Visible text (count + stage) is the accessible name (WCAG 2.5.3); aria-expanded="false" says it opens.
+            title: t("expand", { stage: stage.label }), "aria-expanded": false, className: "focus-ring flex h-full min-h-48 w-full flex-col items-center gap-2 rounded-ui-lg px-1 pt-3 pb-3 text-fg hover:bg-hover", children: [_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-full bg-(--stage-tone)" }), _jsx("span", { className: "tabular text-xs text-fg-muted", children: format.number(count) }), _jsx("span", { className: "text-[13px] font-medium [writing-mode:vertical-rl]", children: stage.label }), _jsx(ChevronsLeftRight, { "aria-hidden": true, className: "mt-auto size-3.5 text-fg-subtle" })] }));
+    }
+    const StartIcon = dir === "rtl" ? ArrowRight : ArrowLeft;
+    const EndIcon = dir === "rtl" ? ArrowLeft : ArrowRight;
+    return (_jsxs("div", { "data-slot": "kanban-column-header", className: "vui-kanban-header flex flex-col gap-0.5 px-3 pt-3 pb-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-full bg-(--stage-tone)" }), _jsx("h3", { className: "min-w-0 truncate text-[13px] font-semibold tracking-tight text-fg", children: stage.label }), _jsx("span", { className: "tabular text-xs text-fg-subtle", children: format.number(count) }), stage.wipLimit !== undefined ? (_jsxs("span", { "data-slot": "kanban-wip", "data-exceeded": over ? "" : undefined, title: over ? t("wipExceeded", { limit: stage.wipLimit }) : undefined, className: cn("tabular inline-flex h-5 items-center gap-1 rounded-full px-1.5 text-[11px] font-medium", over ? "tone-warning tone-soft" : "bg-selected text-fg-muted"), children: [over ? _jsx(TriangleAlert, { "aria-hidden": true, className: "size-3" }) : null, _jsxs("span", { "aria-hidden": true, children: [count, "/", stage.wipLimit] }), _jsx("span", { className: "sr-only", children: over ? t("wipExceeded", { limit: stage.wipLimit }) : t("wip", { count, limit: stage.wipLimit }) })] })) : null, _jsxs("div", { className: "ms-auto flex items-center", children: [onAdd ? (_jsx(IconButton, { label: t("addCardTo", { stage: stage.label }), size: "xs", tooltip: false, onClick: onAdd, className: "text-fg-subtle", children: _jsx(Plus, {}) })) : null, _jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(IconButton, { label: t("columnMenu", { stage: stage.label }), size: "xs", tooltip: false, className: "text-fg-subtle", children: _jsx(Ellipsis, {}) }) }), _jsxs(DropdownMenuContent, { align: "end", size: "sm", children: [_jsx(DropdownMenuItem, { icon: _jsx(ChevronsLeftRight, {}), onSelect: onToggle, children: t("collapse") }), onAdd ? (_jsx(DropdownMenuItem, { icon: _jsx(Plus, {}), onSelect: () => requestAnimationFrame(onAdd), children: t("addCard") })) : null, onMoveStart || onMoveEnd ? _jsx(DropdownMenuSeparator, {}) : null, onMoveStart ? (_jsx(DropdownMenuItem, { icon: _jsx(StartIcon, {}), onSelect: onMoveStart, children: t("moveColumnStart") })) : null, onMoveEnd ? (_jsx(DropdownMenuItem, { icon: _jsx(EndIcon, {}), onSelect: onMoveEnd, children: t("moveColumnEnd") })) : null] })] })] })] }), summary !== undefined && summary !== null ? (_jsx("div", { id: `${quickAddId(uid, stage.key)}-summary`, "data-slot": "kanban-summary", className: "tabular ps-4 text-xs text-fg-muted", children: summary })) : null] }));
+}
+function KanbanCell({ cellId, stage, lane, collapsed, loading, filtered, virtual, bounded }) {
+    const ctx = useKanban();
+    const activeId = useSortableActiveId();
+    const { t } = ctx;
+    const laned = !!lane;
+    return (_jsx(SortableContainer, { id: cellId, role: laned ? "group" : undefined, "aria-label": laned ? t("cell", { stage: stage.label, lane: lane.label, count: ctx.cells.find((c) => c.id === cellId)?.items.length ?? 0 }) : undefined, "data-kanban-cell": "", className: cn("vui-kanban-cell relative flex min-h-0 flex-col rounded-ui-lg", laned && "surface-2 min-h-20", collapsed && "min-h-20", bounded && !laned && "max-h-[calc(var(--kanban-h)-3.5rem)]"), style: laned ? { "--stage-tone": stageToneColor(stage.tone) } : undefined, children: (ids, { isEmpty }) => {
+            const blockedReason = activeId && ctx.originCell && ctx.originCell !== cellId && ids.includes(activeId) ? ctx.check(activeId, cellId, ids.indexOf(activeId)) : true;
+            const blocked = blockedReason !== true;
+            if (collapsed) {
+                // Keep the dragged card mounted (hidden) while it hovers a collapsed column.
+                return (_jsx("div", { "data-blocked": blocked ? "" : undefined, className: "contents", children: ids.filter((id) => id === activeId).map((id) => (_jsx("div", { className: "sr-only", children: _jsx(KanbanCardItem, { id: id, cellId: cellId, stage: stage, index: ids.indexOf(id), total: ids.length }) }, id))) }));
+            }
+            const useVirtual = !!virtual && ids.length > virtual.threshold;
+            return (_jsxs(_Fragment, { children: [blocked ? (_jsxs("div", { "data-slot": "kanban-blocked", role: "alert", className: "mx-2 mt-1 flex items-start gap-1.5 rounded-ui-sm tone-danger tone-soft px-2 py-1.5 text-xs", children: [_jsx(TriangleAlert, { "aria-hidden": true, className: "mt-px size-3.5 shrink-0" }), _jsx("span", { children: blockedReason })] })) : null, loading ? (_jsx("div", { className: "flex flex-col gap-2 px-2 pb-2", "aria-hidden": true, children: [0, 1, 2].map((i) => (_jsxs("div", { className: "rounded-ui border border-line bg-surface p-3", children: [_jsx(Skeleton, { className: "h-3.5 w-3/4 rounded-ui-sm" }), _jsx(Skeleton, { className: "mt-2 h-3 w-1/2 rounded-ui-sm" })] }, i))) })) : isEmpty ? (_jsx("div", { "data-slot": "kanban-empty", className: "mx-2 mb-2 flex min-h-16 flex-1 items-center justify-center rounded-ui border border-dashed border-field-border px-3 text-center text-xs text-fg-subtle", children: filtered ? t("filteredEmpty") : t("empty") })) : useVirtual ? (_jsx(VirtualCards, { ids: ids, cellId: cellId, stage: stage, estimateSize: virtual.estimateSize })) : (_jsx("div", { "data-slot": "kanban-cards", className: cn("flex flex-col gap-2 px-2 pb-2", bounded && !laned && "min-h-0 overflow-y-auto"), children: ids.map((id, i) => (_jsx(KanbanCardItem, { id: id, cellId: cellId, stage: stage, index: i, total: ids.length }, id))) })), blocked ? _jsx("span", { "aria-hidden": true, "data-slot": "kanban-blocked-outline", className: "pointer-events-none absolute inset-0 rounded-[inherit] ring-[1.5px] ring-danger ring-inset" }) : null] }));
+        } }));
+}
+function VirtualCards({ ids, cellId, stage, estimateSize }) {
+    const scrollRef = React.useRef(null);
+    const activeId = useSortableActiveId();
+    const activeIndex = activeId ? ids.indexOf(activeId) : -1;
+    const v = useVirtualizer({
+        count: ids.length,
+        getScrollElement: () => scrollRef.current,
+        estimateSize: () => estimateSize,
+        overscan: 6,
+        getItemKey: (i) => ids[i],
+        rangeExtractor: keepMountedRange(activeIndex >= 0 ? activeIndex : null),
+    });
+    return (_jsx("div", { ref: scrollRef, "data-slot": "kanban-cards", "data-virtual": "", className: "min-h-0 flex-1 overflow-y-auto px-2 pb-2", children: _jsx("div", { className: "relative w-full", style: { height: v.getTotalSize() }, children: v.getVirtualItems().map((row) => {
+                const id = ids[row.index];
+                return (_jsx("div", { "data-index": row.index, ref: v.measureElement, className: "absolute inset-x-0 pb-2", style: { top: row.start }, children: _jsx(KanbanCardItem, { id: id, cellId: cellId, stage: stage, index: row.index, total: ids.length }) }, row.key));
+            }) }) }));
+}
+const ARROWS = new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"]);
+function KanbanCardItem({ id, cellId, stage, index, total }) {
+    const ctx = useKanban();
+    const s = useSortableItem(id);
+    const nodeRef = React.useRef(null);
+    const item = ctx.byId.get(id);
+    const saving = ctx.pending.has(id);
+    const label = ctx.labelOf(id);
+    // Drag attributes on the article, minus the button semantics (it stays an article).
+    const { ref: activatorRef, role: _role, "aria-pressed": _pressed, "aria-roledescription": _rd, onKeyDown: dndKeyDown, ...activator } = s.handleProps;
+    React.useEffect(() => {
+        if (ctx.focusRequest.current === id && nodeRef.current && !s.isDragging) {
+            ctx.focusRequest.current = null;
+            nodeRef.current.focus({ preventScroll: false });
+        }
+    });
+    const { stage: cellStage, lane } = parseKanbanCellId(cellId);
+    const stageIndex = ctx.stages.findIndex((x) => x.key === cellStage);
+    const onKeyDown = (e) => {
+        if (e.target === e.currentTarget && e.altKey && ARROWS.has(e.key)) {
+            e.preventDefault();
+            if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+                const to = index + (e.key === "ArrowUp" ? -1 : 1);
+                if (to >= 0 && to < total)
+                    ctx.requestMove(id, cellId, to);
+                return;
+            }
+            const forward = (e.key === "ArrowRight") !== (ctx.dir === "rtl");
+            const next = ctx.stages[stageIndex + (forward ? 1 : -1)];
+            if (!next)
+                return;
+            const toCell = kanbanCellId(next.key, lane);
+            ctx.requestMove(id, toCell, ctx.cells.find((c) => c.id === toCell)?.items.length ?? 0);
+            return;
+        }
+        dndKeyDown?.(e);
+    };
+    if (item === undefined)
+        return null;
+    return (_jsxs("article", { ref: (node) => {
+            nodeRef.current = node;
+            s.ref(node);
+            activatorRef(node);
+        }, ...activator, onKeyDown: onKeyDown, "aria-label": label, "aria-busy": saving || undefined, "aria-keyshortcuts": "Alt+ArrowLeft Alt+ArrowRight Alt+ArrowUp Alt+ArrowDown", style: s.style, "data-slot": "sortable-item", "data-kanban-card": "", "data-dragging": s.isDragging ? "" : undefined, "data-placeholder": s.isPlaceholder ? "" : undefined, "data-saving": saving ? "" : undefined, className: cn("vui-kanban-card group/card focus-ring relative cursor-grab touch-manipulation rounded-ui border border-surface-border bg-surface text-sm text-fg outline-none", "transition-[border-color,box-shadow,opacity] hover:border-field-border-hover active:cursor-grabbing", ctx.compact ? "p-2 pe-8" : "p-3 pe-9"), children: [ctx.renderCard(item, { isDragging: s.isDragging, compact: ctx.compact, overlay: false, saving, stage }), saving ? _jsx("span", { className: "sr-only", children: ctx.t("saving") }) : null, _jsx(KanbanCardMenu, { id: id, cellId: cellId, index: index, total: total, label: label })] }));
+}
+function KanbanCardMenu({ id, cellId, index, total, label }) {
+    const ctx = useKanban();
+    const { stage: current, lane } = parseKanbanCellId(cellId);
+    const [open, setOpen] = React.useState(false);
+    const extra = ctx.cardMenu?.(ctx.byId.get(id));
+    return (_jsx("div", { className: cn("absolute end-1 top-1 opacity-60 transition-opacity group-hover/card:opacity-100 group-focus-within/card:opacity-100 pointer-coarse:opacity-100", open && "opacity-100"), children: _jsxs(DropdownMenu, { modal: false, open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(IconButton, { label: ctx.t("cardMenu", { item: label }), size: "xs", tooltip: false, className: "size-6 text-fg-subtle", "data-slot": "kanban-card-menu", onPointerDown: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: _jsx(Ellipsis, {}) }) }), open ? (_jsxs(DropdownMenuContent, { align: "end", size: "sm", children: [_jsx(DropdownMenuItem, { icon: _jsx(ArrowUp, {}), disabled: index === 0, onSelect: () => ctx.requestMove(id, cellId, index - 1), shortcut: "alt+up", children: ctx.t("moveUp") }), _jsx(DropdownMenuItem, { icon: _jsx(ArrowDown, {}), disabled: index >= total - 1, onSelect: () => ctx.requestMove(id, cellId, index + 1), shortcut: "alt+down", children: ctx.t("moveDown") }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: ctx.t("moveToHeading") }), ctx.stages.map((s) => {
+                            const toCell = kanbanCellId(s.key, lane);
+                            if (s.key === current) {
+                                return (_jsx(DropdownMenuItem, { disabled: true, icon: _jsx("span", { "aria-hidden": true, className: "size-2 rounded-full", style: { background: stageToneColor(s.tone) } }), description: ctx.t("currentStage"), children: s.label }, s.key));
+                            }
+                            const end = ctx.cells.find((c) => c.id === toCell)?.items.length ?? 0;
+                            const ok = ctx.check(id, toCell, end);
+                            return (_jsx(DropdownMenuItem, { disabled: ok !== true, description: ok !== true ? ok : undefined, icon: _jsx("span", { "aria-hidden": true, className: "size-2 rounded-full", style: { background: stageToneColor(s.tone) } }), onSelect: () => ctx.requestMove(id, toCell, end), children: s.label }, s.key));
+                        }), extra ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), extra] })) : null] })) : null] }) }));
+}
+// ---------------------------------------------------------------------------------------------
+// Quick add
+// ---------------------------------------------------------------------------------------------
+function KanbanQuickAdd({ stage, onAdd }) {
+    const { t, uid } = useKanban();
+    const [open, setOpen] = React.useState(false);
+    const [value, setValue] = React.useState("");
+    const [busy, setBusy] = React.useState(false);
+    const inputRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const inputId = React.useId();
+    React.useEffect(() => {
+        if (open)
+            inputRef.current?.focus();
+    }, [open]);
+    const close = () => {
+        setOpen(false);
+        setValue("");
+        requestAnimationFrame(() => triggerRef.current?.focus());
+    };
+    const submit = async () => {
+        const title = value.trim();
+        if (!title || busy)
+            return;
+        setBusy(true);
+        try {
+            await onAdd(stage.key, title);
+            setValue("");
+            inputRef.current?.focus();
+        }
+        catch {
+            toast.danger(t("quickAddFailed"));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    if (!open) {
+        return (_jsx("div", { className: "px-2 pb-2", children: _jsxs("button", { ref: triggerRef, id: quickAddId(uid, stage.key), type: "button", onClick: () => setOpen(true), "aria-label": t("addCardTo", { stage: stage.label }), className: "focus-ring flex h-8 w-full items-center gap-1.5 rounded-ui-sm px-2 text-[13px] text-fg-muted transition-colors hover:bg-hover hover:text-fg", children: [_jsx(Plus, { "aria-hidden": true, className: "size-3.5" }), t("addCard")] }) }));
+    }
+    return (_jsxs("form", { "data-slot": "kanban-quick-add", className: "mx-2 mb-2 rounded-ui border border-field-border bg-field p-2 shadow-[0_1px_1px_rgb(0_0_0/0.04)]", onSubmit: (e) => {
+            e.preventDefault();
+            void submit();
+        }, children: [_jsx("label", { htmlFor: inputId, className: "sr-only", children: t("quickAddLabel") }), _jsx("input", { ref: inputRef, id: inputId, value: value, disabled: busy, onChange: (e) => setValue(e.target.value), onKeyDown: (e) => {
+                    if (e.key === "Escape") {
+                        e.preventDefault();
+                        close();
+                    }
+                }, placeholder: t("quickAddPlaceholder"), className: "w-full bg-transparent px-1 py-1 text-sm text-fg outline-none placeholder:text-fg-subtle" }), _jsxs("div", { className: "mt-2 flex items-center justify-end gap-1", children: [_jsx(IconButton, { type: "button", label: t("quickAddCancel"), size: "xs", tooltip: false, onClick: close, children: _jsx(X, {}) }), _jsx(Button, { type: "submit", size: "xs", variant: "primary", loading: busy, disabled: !value.trim(), children: t("quickAddSubmit") })] })] }));
+}
+// ---------------------------------------------------------------------------------------------
+// Card content helpers
+// ---------------------------------------------------------------------------------------------
+/** Card title. Put a link inside for the card's main action. */
+export function KanbanCardTitle({ className, ...props }) {
+    return _jsx("h4", { "data-slot": "kanban-card-title", className: cn("text-[13.5px] leading-snug font-medium text-fg [&_a]:focus-ring [&_a]:rounded-[2px] [&_a:hover]:underline [&_a]:underline-offset-2", className), ...props });
+}
+/** A row of secondary facts (company, value, due date). */
+export function KanbanCardMeta({ className, ...props }) {
+    return _jsx("div", { "data-slot": "kanban-card-meta", className: cn("mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-fg-muted", className), ...props });
+}
+/** Bottom row: badges start, avatars end. */
+export function KanbanCardFooter({ className, ...props }) {
+    return _jsx("div", { "data-slot": "kanban-card-footer", className: cn("mt-2.5 flex min-w-0 items-center justify-between gap-2", className), ...props });
+}

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

@@ -0,0 +1,71 @@
+/**
+ * Ready-made sortable list and grid on top of `Sortable`: row chrome, handle, Move menu,
+ * placeholder and overlay included. For custom markup use `Sortable` + `SortableItem`.
+ */
+import * as React from "react";
+import { type SortableLabels, type SortableMoveEvent } from "./sortable.js";
+export interface SortableRenderState {
+    index: number;
+    isDragging: boolean;
+    /** True when rendering the dragged clone. */
+    overlay: boolean;
+    disabled: boolean;
+}
+interface SharedProps<T> {
+    items: readonly T[];
+    getId?: (item: T) => string;
+    getLabel?: (item: T) => string;
+    onReorder: (next: T[], event: SortableMoveEvent) => void;
+    renderItem: (item: T, state: SortableRenderState) => React.ReactNode;
+    disabled?: boolean | ((item: T) => boolean);
+    /** Show a Move menu on every item (the non-drag alternative). Default `true`. */
+    moveMenu?: boolean;
+    /** Trailing actions beside the Move menu. */
+    renderActions?: (item: T) => React.ReactNode;
+    /** Shown when `items` is empty. */
+    empty?: React.ReactNode;
+    labels?: Partial<SortableLabels>;
+    /** Accessible name of the list. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    className?: string;
+    itemClassName?: string;
+}
+export declare const sortableListVariants: (props?: ({
+    orientation?: "vertical" | "horizontal" | null | undefined;
+    variant?: "inset" | "plain" | "card" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const sortableRowVariants: (props?: ({
+    variant?: "inset" | "plain" | "card" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SortableListProps<T> extends SharedProps<T> {
+    orientation?: "vertical" | "horizontal";
+    /** Drag only from the handle. Default `true`. */
+    handle?: boolean;
+    variant?: "card" | "inset" | "plain";
+    size?: "sm" | "md";
+}
+/**
+ * A ready vertical or horizontal sortable list.
+ *
+ * ```tsx
+ * <SortableList aria-label="Main menu" items={pages} onReorder={setPages} renderItem={(p) => p.title} />
+ * ```
+ */
+export declare function SortableList<T>(props: SortableListProps<T>): React.JSX.Element;
+export interface SortableGridProps<T> extends SharedProps<T> {
+    /** Minimum tile width; columns auto-fill. Default `"10rem"`. */
+    minItemWidth?: string;
+    /** Drag from a handle only. Default `false` (the whole tile is the activator). */
+    handle?: boolean;
+}
+/**
+ * A ready sortable grid (gallery, dashboard tiles). Arrow keys move in two dimensions.
+ *
+ * ```tsx
+ * <SortableGrid aria-label="Gallery" items={photos} onReorder={setPhotos} renderItem={(p) => <img src={p.src} alt={p.alt} />} />
+ * ```
+ */
+export declare function SortableGrid<T>(props: SortableGridProps<T>): React.JSX.Element;
+export {};

package/dist/sortable/sortable-list.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { GripVertical } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { Sortable, SortableMoveMenu, SortableOverlay, useSortableItem, } from "./sortable.js";
+// ---------------------------------------------------------------------------------------------
+// SortableList
+// ---------------------------------------------------------------------------------------------
+export const sortableListVariants = cva("vui-sortable-list flex min-w-0", {
+    variants: {
+        orientation: { vertical: "flex-col", horizontal: "flex-row flex-wrap items-stretch" },
+        variant: {
+            /** Separate bordered rows. */
+            card: "gap-1.5",
+            /** One bordered box with dividers. */
+            inset: "overflow-hidden rounded-ui-lg border border-line bg-surface",
+            /** No chrome. */
+            plain: "gap-1",
+        },
+    },
+    compoundVariants: [{ orientation: "horizontal", variant: "inset", className: "flex-nowrap" }],
+    defaultVariants: { orientation: "vertical", variant: "card" },
+});
+export const sortableRowVariants = cva("vui-sortable-row group/row relative flex min-w-0 items-center gap-1.5 text-sm text-fg outline-none", {
+    variants: {
+        variant: {
+            card: "rounded-ui border border-line bg-surface ps-1 pe-1 shadow-[0_1px_1px_rgb(0_0_0/0.03)]",
+            inset: "ps-1.5 pe-1 [&+&]:border-t [&+&]:border-line in-[[data-orientation=horizontal]]:[&+&]:border-t-0 in-[[data-orientation=horizontal]]:[&+&]:border-s",
+            plain: "rounded-ui ps-0.5 pe-0.5 hover:bg-hover",
+        },
+        size: {
+            sm: "min-h-[calc(var(--control-h)*0.82)] py-0.5",
+            md: "min-h-(--control-h) py-1",
+        },
+    },
+    defaultVariants: { variant: "card", size: "md" },
+});
+/**
+ * A ready vertical or horizontal sortable list.
+ *
+ * ```tsx
+ * <SortableList aria-label="Main menu" items={pages} onReorder={setPages} renderItem={(p) => p.title} />
+ * ```
+ */
+export function SortableList(props) {
+    const { items, getId, getLabel, onReorder, renderItem, disabled, moveMenu = true, renderActions, empty, labels, orientation = "vertical", handle = true, variant = "card", size = "md", className, itemClassName, ...aria } = props;
+    const idOf = getId ?? ((it) => defaultId(it));
+    return (_jsxs(Sortable, { items: items, getId: idOf, getLabel: getLabel, onReorder: onReorder, orientation: orientation, handle: handle, disabled: disabled, labels: labels, renderOverlay: (item) => (_jsxs("div", { className: cn(sortableRowVariants({ variant: variant === "plain" ? "card" : variant, size }), "vui-sortable-clone rounded-ui border border-line", itemClassName), children: [handle && (_jsx("span", { "aria-hidden": true, className: "inline-flex size-7 shrink-0 items-center justify-center text-fg-subtle [&_svg]:size-4", children: _jsx(GripVertical, {}) })), _jsx("div", { className: "min-w-0 flex-1", children: renderItem(item, { index: items.indexOf(item), isDragging: true, overlay: true, disabled: false }) })] })), children: [items.length === 0 && empty ? (_jsx("div", { "data-slot": "sortable-empty", children: empty })) : (_jsx("ul", { "data-slot": "sortable-list", "data-orientation": orientation, className: sortableListVariants({ orientation, variant, className }), ...aria, children: items.map((item, index) => (_jsx(ListRow, { id: idOf(item), handle: handle, moveMenu: moveMenu, className: cn(sortableRowVariants({ variant, size }), itemClassName), actions: renderActions?.(item), render: (s) => renderItem(item, { index, isDragging: s.isDragging, overlay: false, disabled: s.disabled }) }, idOf(item)))) })), _jsx(SortableOverlay, {})] }));
+}
+function defaultId(item) {
+    return typeof item === "string" ? item : String(item.id);
+}
+function ListRow({ id, handle, moveMenu, className, actions, render }) {
+    const s = useSortableItem(id);
+    const { ref: activatorRef, ...activator } = s.handleProps;
+    const content = _jsx("div", { className: "min-w-0 flex-1", children: render(s) });
+    return (_jsxs("li", { ref: s.ref, style: s.style, "data-slot": "sortable-item", "data-dragging": s.isDragging ? "" : undefined, "data-placeholder": s.isPlaceholder ? "" : undefined, "data-disabled": s.disabled ? "" : undefined, className: className, children: [handle ? (_jsxs(_Fragment, { children: [s.disabled ? (_jsx("span", { "aria-hidden": true, className: "w-7 shrink-0" })) : (_jsx("button", { type: "button", ref: activatorRef, "data-slot": "sortable-handle", className: "vui-sortable-handle focus-ring inline-flex size-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-ui-sm text-fg-subtle transition-colors hover:bg-hover hover:text-fg active:cursor-grabbing [&_svg]:size-4", ...activator, children: _jsx(GripVertical, { "aria-hidden": true }) })), content] })) : (_jsx("div", { ref: activatorRef, "data-slot": "sortable-activator", className: cn("focus-ring -my-1 flex min-w-0 flex-1 items-center self-stretch rounded-ui-sm py-1 ps-1.5", !s.disabled && "cursor-grab touch-none active:cursor-grabbing"), ...activator, children: content })), actions, moveMenu && !s.disabled && _jsx(SortableMoveMenu, { id: id, size: "xs", className: "opacity-70 group-hover/row:opacity-100 focus-visible:opacity-100 data-[state=open]:opacity-100" })] }));
+}
+/**
+ * A ready sortable grid (gallery, dashboard tiles). Arrow keys move in two dimensions.
+ *
+ * ```tsx
+ * <SortableGrid aria-label="Gallery" items={photos} onReorder={setPhotos} renderItem={(p) => <img src={p.src} alt={p.alt} />} />
+ * ```
+ */
+export function SortableGrid(props) {
+    const { items, getId, getLabel, onReorder, renderItem, disabled, moveMenu = true, renderActions, empty, labels, minItemWidth = "10rem", handle = false, className, itemClassName, ...aria } = props;
+    const idOf = getId ?? ((it) => defaultId(it));
+    return (_jsxs(Sortable, { items: items, getId: idOf, getLabel: getLabel, onReorder: onReorder, orientation: "grid", handle: handle, disabled: disabled, labels: labels, renderOverlay: (item) => (_jsx("div", { className: cn("vui-sortable-tile vui-sortable-clone overflow-hidden rounded-ui-lg border border-line", itemClassName), children: renderItem(item, { index: items.indexOf(item), isDragging: true, overlay: true, disabled: false }) })), children: [items.length === 0 && empty ? (_jsx("div", { "data-slot": "sortable-empty", children: empty })) : (_jsx("ul", { "data-slot": "sortable-grid", className: cn("vui-sortable-grid grid gap-(--gap,0.75rem)", className), style: { gridTemplateColumns: `repeat(auto-fill, minmax(min(${minItemWidth}, 100%), 1fr))` }, ...aria, children: items.map((item, index) => (_jsx(GridTile, { id: idOf(item), handle: handle, moveMenu: moveMenu, className: itemClassName, actions: renderActions?.(item), render: (s) => renderItem(item, { index, isDragging: s.isDragging, overlay: false, disabled: s.disabled }) }, idOf(item)))) })), _jsx(SortableOverlay, {})] }));
+}
+function GridTile({ id, handle, moveMenu, className, actions, render }) {
+    const s = useSortableItem(id);
+    const { ref: activatorRef, ...activator } = s.handleProps;
+    return (_jsxs("li", { ref: s.ref, style: s.style, "data-slot": "sortable-item", "data-dragging": s.isDragging ? "" : undefined, "data-placeholder": s.isPlaceholder ? "" : undefined, "data-disabled": s.disabled ? "" : undefined, className: cn("vui-sortable-tile group/tile relative min-w-0 rounded-ui-lg border border-line bg-surface", className), children: [handle ? (_jsxs(_Fragment, { children: [render(s), !s.disabled && (_jsx("button", { type: "button", ref: activatorRef, "data-slot": "sortable-handle", className: "vui-sortable-handle focus-ring absolute start-1.5 top-1.5 inline-flex size-7 cursor-grab touch-none items-center justify-center rounded-ui-sm bg-popover text-fg-muted shadow-sm hover:text-fg active:cursor-grabbing [&_svg]:size-4", ...activator, children: _jsx(GripVertical, { "aria-hidden": true }) }))] })) : (_jsx("div", { ref: activatorRef, "data-slot": "sortable-activator", className: cn("focus-ring h-full overflow-hidden rounded-[inherit]", !s.disabled && "cursor-grab touch-none active:cursor-grabbing"), ...activator, children: render(s) })), (moveMenu || actions) && !s.disabled && (_jsxs("div", { className: "absolute end-1.5 top-1.5 flex items-center gap-1 opacity-0 transition-opacity group-hover/tile:opacity-100 group-focus-within/tile:opacity-100 has-data-[state=open]:opacity-100 pointer-coarse:opacity-100", children: [actions, moveMenu && _jsx(SortableMoveMenu, { id: id, size: "xs", className: "bg-popover text-fg-muted shadow-sm hover:bg-popover hover:text-fg" })] }))] }));
+}