61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T3864,'use client' import * as React from 'react' import type { BoardAcceptsFn, BoardDropEvent } from '@/components/ui/board/context' export interface UseBoardOptions { /** Source of truth: lane id → items in that lane. */ lanes: Record /** Called with the next lanes map on every successful move. The hook * does NOT mutate your store directly — you stay in control (useState, * Zustand, server, …). */ onLanesChange: (next: Record) => void /** Optional accept predicate (runs in addition to per-card allowedLanes * and per-lane disabled flags). Returning false rejects the drop. */ accepts?: BoardAcceptsFn /** Fires on every successful move (DnD or imperative). */ onChange?: (event: BoardDropEvent) => void /** ms before `state.justMovedId` clears. Default 600. */ highlightMs?: number } export interface UseBoardState { draggingId: string | null draggingIds: readonly string[] dragOverLaneId: string | null justMovedId: string | null selectedIds: ReadonlySet } export interface UseBoardReturn { state: UseBoardState handlers: { onDragStart: (e: React.DragEvent, itemId: string, laneId: string) => void onLaneDragOver: (e: React.DragEvent, laneId: string) => void onLaneDragLeave: (laneId: string) => void onLaneDrop: (e: React.DragEvent, laneId: string) => void onDragEnd: () => void } /** Imperative — used by keyboard handlers, undo, server-pushed updates. * Pass a single id OR an array of ids; arrays move as a group while * preserving their relative order. */ moveItem: (itemId: string | string[], toLaneId: string, toIndex?: number) => void /** Toggle one item in the selection set. When `additive=false` (the * default for plain clicks), the call replaces the selection with * just this item; when `true` (cmd/shift+click), the call adds or * removes the item from the existing set. */ toggleSelection: (itemId: string, additive?: boolean) => void clearSelection: () => void /** Per-card allowed-lanes registry — Board's `` writes here * on mount; lanes call `isLaneAcceptingFor` (exposed through context) * to query. Exported for advanced consumers that want to drive it * externally. */ registerAllowedLanes: (cardId: string, lanes: readonly string[] | undefined) => void unregisterAllowedLanes: (cardId: string) => void registerLaneDisabled: (laneId: string, disabled: boolean) => void unregisterLaneDisabled: (laneId: string) => void isLaneAcceptingFor: (laneId: string) => boolean accepts: BoardAcceptsFn } const ALWAYS: BoardAcceptsFn = () => true /** * Board state + DnD orchestration. Designed to back the `@uipkge/board` * compositional primitive but usable with any rendering layer — the lane * components only need to bind handlers and read the returned state. * * Capabilities: * - Insertion-index drop: pointer Y vs each card's bounding-box midpoint * - Multi-item drag: grabbing a selected card drags the whole selection * - Per-card `allowedLanes` allow-list (BoardCard registers on mount) * - Per-lane `disabled` flag (BoardLane registers on mount) * - `accepts` predicate runs in addition to the two above */ export function useBoard(opts: UseBoardOptions): UseBoardReturn { const accepts: BoardAcceptsFn = opts.accepts ?? ALWAYS const highlightMs = opts.highlightMs ?? 600 const [draggingId, setDraggingId] = React.useState(null) const [draggingIds, setDraggingIds] = React.useState([]) const [dragOverLaneId, setDragOverLaneId] = React.useState(null) const [justMovedId, setJustMovedId] = React.useState(null) const [selectedIds, setSelectedIds] = React.useState>(new Set()) // Mirror render state into refs so event handlers always read the latest // value without being re-created (and without re-binding on every render). const draggingIdRef = React.useRef(null) draggingIdRef.current = draggingId const draggingIdsRef = React.useRef([]) draggingIdsRef.current = draggingIds const dragOverLaneIdRef = React.useRef(null) dragOverLaneIdRef.current = dragOverLaneId const justMovedIdRef = React.useRef(null) justMovedIdRef.current = justMovedId const selectedIdsRef = React.useRef>(selectedIds) selectedIdsRef.current = selectedIds // Latest props (lanes + callbacks) without re-binding handlers. const lanesRef = React.useRef(opts.lanes) lanesRef.current = opts.lanes const onLanesChangeRef = React.useRef(opts.onLanesChange) onLanesChangeRef.current = opts.onLanesChange const onChangeRef = React.useRef(opts.onChange) onChangeRef.current = opts.onChange const acceptsRef = React.useRef(accepts) acceptsRef.current = accepts const sourceLaneByDragId = React.useRef(null) const highlightTimer = React.useRef | null>(null) // Per-card allowed-lanes + per-lane disabled registries. Both are plain // refs because we only read them on event dispatch (not in render). const allowedLanesByCard = React.useRef(new Map()) const disabledLanes = React.useRef(new Set()) React.useEffect(() => { return () => { if (highlightTimer.current) clearTimeout(highlightTimer.current) } }, []) function findItem(itemId: string): { item: TItem; laneId: string; index: number } | null { const lanes = lanesRef.current for (const laneId of Object.keys(lanes)) { const idx = lanes[laneId]!.findIndex((it) => it.id === itemId) if (idx !== -1) return { item: lanes[laneId]![idx]!, laneId, index: idx } } return null } function isAllowed(itemId: string, fromLaneId: string, toLaneId: string): boolean { if (disabledLanes.current.has(toLaneId)) return false const allow = allowedLanesByCard.current.get(itemId) if (allow && !allow.includes(toLaneId)) return false return acceptsRef.current(itemId, fromLaneId, toLaneId) } function flashMoved(itemId: string) { setJustMovedId(itemId) if (highlightTimer.current) clearTimeout(highlightTimer.current) highlightTimer.current = setTimeout(() => { setJustMovedId((cur) => (cur === itemId ? null : cur)) }, highlightMs) } const moveItem = React.useCallback((itemId: string | string[], toLaneId: string, toIndex?: number) => { const ids = Array.isArray(itemId) ? itemId : [itemId] if (ids.length === 0) return // Resolve each, in DOM order across lanes (snapshot before mutation). const resolved = ids .map((id) => findItem(id)) .filter((x): x is { item: TItem; laneId: string; index: number } => !!x) if (resolved.length === 0) return // All-or-nothing: if ANY item is rejected by the destination // (per-card allowedLanes / lane disabled / accepts predicate), the // whole move aborts. Matches the dragover visual which already // refuses to highlight as accepting when one item in the selection // isn't allowed — keeps single + multi-select drops feeling the same. const allAllowed = resolved.every((r) => isAllowed(r.item.id, r.laneId, toLaneId)) if (!allAllowed) return const movable = resolved const lanes = { ...lanesRef.current } // 1. Remove every movable item from its current lane (in reverse-index // order per-lane so indices stay valid during splice). const byLane = new Map() for (const r of movable) { if (!byLane.has(r.laneId)) byLane.set(r.laneId, []) byLane.get(r.laneId)!.push(r.index) } for (const [laneId, indices] of byLane.entries()) { const next = [...lanes[laneId]!] indices.sort((a, b) => b - a).forEach((idx) => next.splice(idx, 1)) lanes[laneId] = next } // 2. Insert all movable items into the destination at toIndex, in their // original cross-lane order. const inserts = movable.map((r) => r.item) const dest = [...(lanes[toLaneId] ?? [])] // If the target previously held some of the moved items, the index the // consumer asked for (toIndex) was computed against the pre-splice // layout. Clamp post-splice. const insertAt = Math.max(0, Math.min(dest.length, toIndex ?? dest.length)) dest.splice(insertAt, 0, ...inserts) lanes[toLaneId] = dest onLanesChangeRef.current(lanes) flashMoved(movable[0]!.item.id) onChangeRef.current?.({ itemId: movable[0]!.item.id, itemIds: movable.map((r) => r.item.id), from: movable[0]!.laneId, to: toLaneId, index: insertAt, }) // eslint-disable-next-line react-hooks/exhaustive-deps }, []) function computeInsertIndex(e: React.DragEvent, laneId: string): number { const laneEl = (e.currentTarget as HTMLElement | null) ?? null if (!laneEl) return lanesRef.current[laneId]?.length ?? 0 const cards = Array.from(laneEl.querySelectorAll('[data-board-card]')) // Exclude every card currently being dragged from the insertion math — // those rows will close once we splice, and we want the pointer-relative // position among the remaining cards. const dragging = new Set(draggingIdsRef.current) const otherCards = cards.filter((c) => { const id = c.getAttribute('data-board-card-id') return id ? !dragging.has(id) : true }) for (let i = 0; i < otherCards.length; i++) { const rect = otherCards[i]!.getBoundingClientRect() const midpoint = rect.top + rect.height / 2 if (e.clientY < midpoint) return i } return otherCards.length } const toggleSelection = React.useCallback((itemId: string, additive = false) => { setSelectedIds((prev) => { const next = new Set(prev) if (additive) { if (next.has(itemId)) next.delete(itemId) else next.add(itemId) } else { next.clear() next.add(itemId) } return next }) }, []) const clearSelection = React.useCallback(() => { setSelectedIds((prev) => (prev.size === 0 ? prev : new Set())) }, []) const handlers = React.useMemo( () => ({ onDragStart(e, itemId, laneId) { // If the grabbed card is part of the current selection, drag the // whole set; otherwise drag this one alone (and clear selection so // the next single click doesn't surprise the user). const selected = selectedIdsRef.current const inSelection = selected.has(itemId) const ids = inSelection && selected.size > 1 ? Array.from(selected) : [itemId] if (!inSelection) clearSelection() setDraggingId(itemId) setDraggingIds(ids) sourceLaneByDragId.current = laneId if (e.dataTransfer) { e.dataTransfer.setData('text/plain', itemId) e.dataTransfer.effectAllowed = 'move' } }, onLaneDragOver(e, laneId) { if (!draggingIdRef.current) return const fromLane = sourceLaneByDragId.current ?? laneId // All dragging items must be allowed at the target — reject the // whole drop if any one is blocked. const allOk = draggingIdsRef.current.every((id) => isAllowed(id, fromLane, laneId)) // dragOverLaneId is set in BOTH branches so the lane can show its // rejecting visual (red ring) on hover, not just its accepting // visual. preventDefault only fires on accept — without it the // browser refuses the drop, exactly what we want for rejected hits. setDragOverLaneId(laneId) if (!allOk) { if (e.dataTransfer) e.dataTransfer.dropEffect = 'none' return } e.preventDefault() if (e.dataTransfer) e.dataTransfer.dropEffect = 'move' }, onLaneDragLeave(laneId) { setDragOverLaneId((cur) => (cur === laneId ? null : cur)) }, onLaneDrop(e, laneId) { e.preventDefault() const fallbackId = e.dataTransfer?.getData('text/plain') || draggingIdRef.current const ids = draggingIdsRef.current.length > 0 ? draggingIdsRef.current : fallbackId ? [fallbackId] : [] if (ids.length === 0) return const insertAt = computeInsertIndex(e, laneId) moveItem([...ids], laneId, insertAt) setDraggingId(null) setDraggingIds([]) setDragOverLaneId(null) sourceLaneByDragId.current = null }, onDragEnd() { setDraggingId(null) setDraggingIds([]) setDragOverLaneId(null) sourceLaneByDragId.current = null }, }), // eslint-disable-next-line react-hooks/exhaustive-deps [clearSelection, moveItem], ) const registerAllowedLanes = React.useCallback((cardId: string, lanes: readonly string[] | undefined) => { if (lanes && lanes.length > 0) allowedLanesByCard.current.set(cardId, lanes) else allowedLanesByCard.current.delete(cardId) }, []) const unregisterAllowedLanes = React.useCallback((cardId: string) => { allowedLanesByCard.current.delete(cardId) }, []) const registerLaneDisabled = React.useCallback((laneId: string, disabled: boolean) => { if (disabled) disabledLanes.current.add(laneId) else disabledLanes.current.delete(laneId) }, []) const unregisterLaneDisabled = React.useCallback((laneId: string) => { disabledLanes.current.delete(laneId) }, []) const isLaneAcceptingFor = React.useCallback((laneId: string) => { if (!draggingIdRef.current) return false const fromLane = sourceLaneByDragId.current ?? laneId return draggingIdsRef.current.every((id) => isAllowed(id, fromLane, laneId)) // eslint-disable-next-line react-hooks/exhaustive-deps }, []) const state: UseBoardState = { draggingId, draggingIds, dragOverLaneId, justMovedId, selectedIds, } return { state, handlers, moveItem, toggleSelection, clearSelection, accepts, registerAllowedLanes, unregisterAllowedLanes, registerLaneDisabled, unregisterLaneDisabled, isLaneAcceptingFor, } } /** Type-only helper for consumers that want to type the lanes locally. */ export type BoardLanes = Record 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L61",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/board.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"packages/registry-react/bootstrap/use-board/useBoard.ts","content":"$63","type":"registry:hook","target":"~/lib/use-board.ts"}],"className":"h-[70svh] min-h-80"}]]}]