@taskforcehq/taskforce 0.3.168

package/dist/components/task/TaskKanban 2.js

@@ -0,0 +1,1004 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState, useRef, useEffect, useCallback } from 'react';
+import { DndContext, DragOverlay, closestCorners, KeyboardSensor, PointerSensor, useSensor, useSensors, pointerWithin, defaultDropAnimationSideEffects } from '@dnd-kit/core';
+import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { createPortal } from 'react-dom';
+import styles from '../../Taskforce.module.css';
+import { TaskCard } from './TaskCard';
+import { isDropInCenterZone } from '../../utils/taskDragZones';
+import { shouldPromptReparent, wouldCreateParentCycle } from '../../utils/taskParenting';
+import { buildHierarchyDepthMap } from '../../utils/taskHierarchy';
+import { sortChildTasksForDisplay } from '../../utils/taskRelations';
+import * as Icons from 'lucide-react';
+import { IconMap, resolveColor } from '../../utils/constants';
+export function TaskKanban({ tasks, columns: kanbanColumns, groupBy, searchQuery, copiedId, availableSpecialists, taxonomies, priorities, approaches, onUpdateTask, onTaskClick, onOpenTaskById, onCopyId, onToggleInProgress, onToggleReview, onToggleComplete, onToggleCancel, onArchiveTask, onUnarchive, onDelete, onUnlinkChildTask, onClearParentTask, allTasks = [], hierarchyTasks = [], onAddTaskToColumn, emptyColumnMode = 'show', filterCategories = [], filterTypes = [], filterPriorities = [], filterStatus = [], filterAssignees = ['agent', 'user', 'unassigned'], assigneeFilterEnabled = false, scheduleFilteredTaskIds, categories = [], compressed = false, recentlyChangedTaskIds = [], scheduleDates, onScheduleDaySelected, onScheduleParentDrop, hierarchyChildOrderMode = 'manual', persistedScrollLeft, onScrollLeftChange, sortBy = 'created', sortOrder = 'desc' }) {
+    const [activeId, setActiveId] = useState(null);
+    const [recentlyLinkedParentIds, setRecentlyLinkedParentIds] = useState([]);
+    const [currentParentDropTargetId, setCurrentParentDropTargetId] = useState(null);
+    const [isHeaderPanning, setIsHeaderPanning] = useState(false);
+    const [headerPanEnabled, setHeaderPanEnabled] = useState(false);
+    const changedTaskIdSet = useMemo(() => new Set(recentlyChangedTaskIds), [recentlyChangedTaskIds]);
+    const taskIdSet = useMemo(() => new Set(tasks.map(t => t.id)), [tasks]);
+    const scheduleFilteredTaskIdSet = useMemo(() => new Set(scheduleFilteredTaskIds || []), [scheduleFilteredTaskIds]);
+    const linkFeedbackTimersRef = useRef(new Map());
+    // Sensors
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 5, // Prevent accidental drags
+        },
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    // Helper to determine status string from task flags
+    const getTaskStatus = (task) => {
+        return task.status || 'task';
+    };
+    const todayDateOnly = useMemo(() => {
+        const now = new Date();
+        const year = now.getFullYear();
+        const month = String(now.getMonth() + 1).padStart(2, '0');
+        const day = String(now.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }, []);
+    const scheduleContext = useMemo(() => {
+        const parseToIsoWeekKey = (dateOnly) => {
+            const match = dateOnly.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+            if (!match)
+                return null;
+            const dt = new Date(Date.UTC(Number(match[1]), Number(match[2]) - 1, Number(match[3])));
+            const day = dt.getUTCDay() || 7;
+            dt.setUTCDate(dt.getUTCDate() + 4 - day);
+            const yearStart = new Date(Date.UTC(dt.getUTCFullYear(), 0, 1));
+            const week = Math.ceil((((dt.getTime() - yearStart.getTime()) / 86400000) + 1) / 7);
+            return `${dt.getUTCFullYear()}-W${String(week).padStart(2, '0')}`;
+        };
+        const fallbackDates = (() => {
+            const now = new Date();
+            const currentDay = now.getDay();
+            const mondayDelta = currentDay === 0 ? -6 : 1 - currentDay;
+            const monday = new Date(now);
+            monday.setDate(now.getDate() + mondayDelta);
+            const format = (date) => {
+                const y = date.getFullYear();
+                const m = String(date.getMonth() + 1).padStart(2, '0');
+                const d = String(date.getDate()).padStart(2, '0');
+                return `${y}-${m}-${d}`;
+            };
+            const dates = {
+                mon: '',
+                tue: '',
+                wed: '',
+                thu: '',
+                fri: '',
+                sat: '',
+                sun: ''
+            };
+            const keys = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
+            keys.forEach((key, index) => {
+                const next = new Date(monday);
+                next.setDate(monday.getDate() + index);
+                dates[key] = format(next);
+            });
+            return dates;
+        })();
+        const dates = {
+            ...fallbackDates,
+            ...(scheduleDates || {})
+        };
+        return { dates, parseToIsoWeekKey };
+    }, [scheduleDates]);
+    const getScheduleColumnValue = (task) => {
+        const scheduledDate = task.scheduledDate || null;
+        if (!scheduledDate)
+            return 'backlog';
+        const dateToColumn = new Map([
+            [scheduleContext.dates.mon, 'mon'],
+            [scheduleContext.dates.tue, 'tue'],
+            [scheduleContext.dates.wed, 'wed'],
+            [scheduleContext.dates.thu, 'thu'],
+            [scheduleContext.dates.fri, 'fri'],
+            [scheduleContext.dates.sat, 'sat'],
+            [scheduleContext.dates.sun, 'sun']
+        ]);
+        return dateToColumn.get(scheduledDate) || '__offweek';
+    };
+    const hierarchyDepthSource = hierarchyTasks.length > 0
+        ? hierarchyTasks
+        : (allTasks.length > 0 ? allTasks : tasks);
+    const hierarchyDepthMap = useMemo(() => buildHierarchyDepthMap(hierarchyDepthSource), [hierarchyDepthSource]);
+    const hierarchyParentIdSet = useMemo(() => {
+        const set = new Set();
+        for (const task of hierarchyDepthSource) {
+            if (task.parentTaskId)
+                set.add(task.parentTaskId);
+        }
+        return set;
+    }, [hierarchyDepthSource]);
+    const childrenByParentId = useMemo(() => {
+        const map = new Map();
+        for (const task of hierarchyDepthSource) {
+            if (!task.parentTaskId)
+                continue;
+            const list = map.get(task.parentTaskId) || [];
+            list.push(task);
+            map.set(task.parentTaskId, list);
+        }
+        return map;
+    }, [hierarchyDepthSource]);
+    const getHierarchyColumnValue = (task) => {
+        const isStandalone = !task.parentTaskId && !hierarchyParentIdSet.has(task.id);
+        if (isStandalone)
+            return 'standalone';
+        return String((hierarchyDepthMap.get(task.id) ?? 0) + 1);
+    };
+    const columnLookup = useMemo(() => {
+        const map = new Map();
+        for (const column of kanbanColumns) {
+            map.set(String(column.value), column);
+            if (!map.has(column.label)) {
+                map.set(column.label, column);
+            }
+        }
+        return map;
+    }, [kanbanColumns]);
+    // Totals for "X / Y" display
+    const columnTotals = useMemo(() => {
+        const counts = {};
+        kanbanColumns.forEach(col => { counts[String(col.value)] = 0; });
+        const totalsSource = groupBy === 'hierarchy' ? tasks : allTasks;
+        totalsSource.forEach(task => {
+            let stringValue = '';
+            if (groupBy === 'status') {
+                stringValue = getTaskStatus(task);
+            }
+            else if (groupBy === 'schedule') {
+                stringValue = getScheduleColumnValue(task);
+            }
+            else if (groupBy === 'hierarchy') {
+                stringValue = getHierarchyColumnValue(task);
+            }
+            else {
+                const rawValue = task[groupBy];
+                stringValue = String(rawValue ?? '');
+            }
+            const matchedColumn = columnLookup.get(stringValue);
+            if (matchedColumn) {
+                counts[String(matchedColumn.value)]++;
+            }
+            if (groupBy === 'schedule') {
+                const isTerminal = task.status === 'done' || task.status === 'cancelled';
+                const isExpired = !!task.scheduledDate && !isTerminal && task.scheduledDate < todayDateOnly;
+                if (isExpired && columnLookup.has('expired')) {
+                    counts.expired = (counts.expired || 0) + 1;
+                }
+            }
+        });
+        return counts;
+    }, [allTasks, tasks, kanbanColumns, groupBy, hierarchyDepthMap, columnLookup, hierarchyParentIdSet, todayDateOnly]);
+    // Group items by the groupBy field
+    const groupedTasks = useMemo(() => {
+        const groups = {};
+        // Initialize all columns
+        kanbanColumns.forEach(col => {
+            groups[String(col.value)] = [];
+        });
+        // Distribute tasks
+        tasks.forEach(task => {
+            let stringValue = '';
+            if (groupBy === 'status') {
+                stringValue = getTaskStatus(task);
+            }
+            else if (groupBy === 'schedule') {
+                stringValue = getScheduleColumnValue(task);
+            }
+            else if (groupBy === 'hierarchy') {
+                stringValue = getHierarchyColumnValue(task);
+            }
+            else {
+                const rawValue = task[groupBy];
+                // Fix: Use ?? to allow 0 as a valid value
+                stringValue = String(rawValue ?? '');
+            }
+            // Find matching column by value or label
+            const matchedColumn = columnLookup.get(stringValue);
+            if (matchedColumn) {
+                if (groupBy === 'schedule') {
+                    const columnValue = String(matchedColumn.value);
+                    const shouldApplyFilter = columnValue === 'backlog' || columnValue === 'expired';
+                    if (shouldApplyFilter && !scheduleFilteredTaskIdSet.has(task.id)) {
+                        return;
+                    }
+                }
+                groups[String(matchedColumn.value)].push(task);
+            }
+            if (groupBy === 'schedule') {
+                const isTerminal = task.status === 'done' || task.status === 'cancelled';
+                const isExpired = !!task.scheduledDate && !isTerminal && task.scheduledDate < todayDateOnly;
+                if (isExpired && groups.expired) {
+                    if (scheduleFilteredTaskIdSet.has(task.id)) {
+                        groups.expired.push(task);
+                    }
+                }
+            }
+        });
+        if (groupBy === 'schedule') {
+            const sortByScheduleOrder = (a, b) => {
+                const orderA = typeof a.orderInDay === 'number' ? a.orderInDay : Number.MAX_SAFE_INTEGER;
+                const orderB = typeof b.orderInDay === 'number' ? b.orderInDay : Number.MAX_SAFE_INTEGER;
+                if (orderA !== orderB)
+                    return orderA - orderB;
+                return String(a.createdAt || '').localeCompare(String(b.createdAt || ''));
+            };
+            const compareByHeaderSort = (a, b) => {
+                let comparison = 0;
+                if (sortBy === 'created') {
+                    comparison = new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+                }
+                else if (sortBy === 'updated') {
+                    const aUpdated = a.updatedAt || a.createdAt;
+                    const bUpdated = b.updatedAt || b.createdAt;
+                    comparison = new Date(bUpdated).getTime() - new Date(aUpdated).getTime();
+                }
+                else if (sortBy === 'priority') {
+                    const priorityA = typeof a.priority === 'number' ? a.priority : 2;
+                    const priorityB = typeof b.priority === 'number' ? b.priority : 2;
+                    comparison = priorityB - priorityA;
+                    if (comparison === 0) {
+                        comparison = new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+                    }
+                }
+                else if (sortBy === 'complexity') {
+                    const complexityA = typeof a.complexity === 'number' ? a.complexity : 3;
+                    const complexityB = typeof b.complexity === 'number' ? b.complexity : 3;
+                    comparison = complexityB - complexityA;
+                    if (comparison === 0) {
+                        comparison = new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+                    }
+                }
+                return sortOrder === 'desc' ? comparison : -comparison;
+            };
+            Object.keys(groups).forEach((key) => {
+                if (key === 'backlog' || key === 'expired') {
+                    groups[key].sort(compareByHeaderSort);
+                    return;
+                }
+                groups[key].sort(sortByScheduleOrder);
+            });
+        }
+        else if (groupBy === 'hierarchy' && hierarchyChildOrderMode === 'manual') {
+            const depthSource = hierarchyDepthSource;
+            const sourceIndexById = new Map();
+            depthSource.forEach((task, index) => sourceIndexById.set(task.id, index));
+            const sourceTaskById = new Map();
+            depthSource.forEach((task) => sourceTaskById.set(task.id, task));
+            const sourceChildrenByParent = new Map();
+            depthSource.forEach((task) => {
+                if (!task.parentTaskId)
+                    return;
+                const siblings = sourceChildrenByParent.get(task.parentTaskId) || [];
+                siblings.push(task);
+                sourceChildrenByParent.set(task.parentTaskId, siblings);
+            });
+            sourceChildrenByParent.forEach((siblings, parentId) => {
+                sourceChildrenByParent.set(parentId, sortChildTasksForDisplay(siblings));
+            });
+            const roots = depthSource.filter((task) => !task.parentTaskId || !sourceTaskById.has(task.parentTaskId));
+            roots.sort((a, b) => {
+                const idxA = sourceIndexById.get(a.id) ?? Number.MAX_SAFE_INTEGER;
+                const idxB = sourceIndexById.get(b.id) ?? Number.MAX_SAFE_INTEGER;
+                return idxA - idxB;
+            });
+            const pathByTaskId = new Map();
+            const visited = new Set();
+            const assignPaths = (task, path) => {
+                if (visited.has(task.id))
+                    return;
+                visited.add(task.id);
+                pathByTaskId.set(task.id, path);
+                const children = sourceChildrenByParent.get(task.id) || [];
+                children.forEach((child, index) => {
+                    assignPaths(child, [...path, index]);
+                });
+            };
+            roots.forEach((root, index) => {
+                assignPaths(root, [index]);
+            });
+            depthSource.forEach((task) => {
+                if (!pathByTaskId.has(task.id)) {
+                    const fallbackIndex = sourceIndexById.get(task.id) ?? Number.MAX_SAFE_INTEGER;
+                    pathByTaskId.set(task.id, [Number.MAX_SAFE_INTEGER, fallbackIndex]);
+                }
+            });
+            const compareHierarchyPath = (a, b) => {
+                const pathA = pathByTaskId.get(a.id) || [Number.MAX_SAFE_INTEGER];
+                const pathB = pathByTaskId.get(b.id) || [Number.MAX_SAFE_INTEGER];
+                const maxLen = Math.max(pathA.length, pathB.length);
+                for (let i = 0; i < maxLen; i += 1) {
+                    const segA = pathA[i] ?? -1;
+                    const segB = pathB[i] ?? -1;
+                    if (segA !== segB)
+                        return segA - segB;
+                }
+                const idxA = sourceIndexById.get(a.id) ?? Number.MAX_SAFE_INTEGER;
+                const idxB = sourceIndexById.get(b.id) ?? Number.MAX_SAFE_INTEGER;
+                return idxA - idxB;
+            };
+            Object.keys(groups).forEach((key) => {
+                groups[key].sort(compareHierarchyPath);
+            });
+        }
+        return groups;
+    }, [tasks, kanbanColumns, groupBy, hierarchyDepthMap, columnLookup, hierarchyParentIdSet, scheduleFilteredTaskIdSet, todayDateOnly, hierarchyChildOrderMode, hierarchyDepthSource, sortBy, sortOrder]);
+    const activeTaskOverlay = activeId ? tasks.find(t => t.id === activeId) : null;
+    // Scroll Syncing Refs and Logic
+    const containerRef = useRef(null);
+    const topScrollRef = useRef(null);
+    const panStateRef = useRef({
+        pointerId: null,
+        startX: 0,
+        startY: 0,
+        startScrollLeft: 0,
+        didPan: false
+    });
+    const lastReportedScrollLeftRef = useRef(-1);
+    // Calculate total width for scroll syncing
+    const getIsColumnHidden = (columnValue, title) => {
+        if (groupBy === 'category')
+            return !filterCategories.includes(String(columnValue));
+        if (groupBy === 'type')
+            return !filterTypes.includes(String(columnValue));
+        if (groupBy === 'priority')
+            return !filterPriorities.some(p => Number(p) === Number(columnValue));
+        if (groupBy === 'status')
+            return !filterStatus.includes(String(columnValue));
+        if (groupBy === 'assignee')
+            return assigneeFilterEnabled && !filterAssignees.includes(String(columnValue));
+        return false;
+    };
+    const totalWidth = useMemo(() => {
+        const GAP = 4;
+        const COL_WIDTH = 320;
+        const COL_COLLAPSED = 72;
+        let width = 0;
+        kanbanColumns.forEach((col, index) => {
+            const items = groupedTasks[String(col.value)] || [];
+            const isExplicitlyHidden = getIsColumnHidden(col.value, col.label);
+            const isAutoHidden = groupBy !== 'schedule' && emptyColumnMode === 'hide' && items.length === 0;
+            if (isExplicitlyHidden || isAutoHidden)
+                return;
+            const isCollapsed = emptyColumnMode === 'collapse' && items.length === 0;
+            width += isCollapsed ? COL_COLLAPSED : COL_WIDTH;
+            width += GAP;
+        });
+        return width;
+    }, [kanbanColumns, groupedTasks, emptyColumnMode, groupBy, filterCategories, filterTypes, filterPriorities, filterStatus]);
+    const emitScrollLeft = useCallback((scrollLeft) => {
+        if (!onScrollLeftChange)
+            return;
+        const normalized = Math.max(0, Math.round(scrollLeft));
+        if (normalized === lastReportedScrollLeftRef.current)
+            return;
+        lastReportedScrollLeftRef.current = normalized;
+        onScrollLeftChange(normalized);
+    }, [onScrollLeftChange]);
+    // Sync scroll handlers
+    useEffect(() => {
+        const bottom = containerRef.current;
+        const top = topScrollRef.current;
+        if (!bottom || !top)
+            return;
+        let isSyncingTop = false;
+        let isSyncingBottom = false;
+        const handleScrollTop = () => {
+            if (!bottom || isSyncingBottom)
+                return;
+            isSyncingTop = true;
+            bottom.scrollLeft = top.scrollLeft;
+            emitScrollLeft(top.scrollLeft);
+            setTimeout(() => isSyncingTop = false, 0); // Release lock
+        };
+        const handleScrollBottom = () => {
+            if (!top || isSyncingTop)
+                return;
+            isSyncingBottom = true;
+            top.scrollLeft = bottom.scrollLeft;
+            emitScrollLeft(bottom.scrollLeft);
+            setTimeout(() => isSyncingBottom = false, 0);
+        };
+        top.addEventListener('scroll', handleScrollTop);
+        bottom.addEventListener('scroll', handleScrollBottom);
+        return () => {
+            top.removeEventListener('scroll', handleScrollTop);
+            bottom.removeEventListener('scroll', handleScrollBottom);
+        };
+    }, [emitScrollLeft]);
+    const hasAppliedInitialScrollRef = useRef(false);
+    useEffect(() => {
+        if (hasAppliedInitialScrollRef.current)
+            return;
+        if (typeof persistedScrollLeft !== 'number' || !Number.isFinite(persistedScrollLeft)) {
+            hasAppliedInitialScrollRef.current = true;
+            return;
+        }
+        const bottom = containerRef.current;
+        const top = topScrollRef.current;
+        if (!bottom || !top)
+            return;
+        const maxLeft = Math.max(0, bottom.scrollWidth - bottom.clientWidth);
+        const nextLeft = Math.min(Math.max(0, persistedScrollLeft), maxLeft);
+        bottom.scrollLeft = nextLeft;
+        top.scrollLeft = nextLeft;
+        hasAppliedInitialScrollRef.current = true;
+    }, [persistedScrollLeft, totalWidth]);
+    useEffect(() => {
+        const updatePanAvailability = () => {
+            const el = containerRef.current;
+            if (!el) {
+                setHeaderPanEnabled(false);
+                return;
+            }
+            setHeaderPanEnabled(el.scrollWidth > el.clientWidth + 4);
+        };
+        updatePanAvailability();
+        window.addEventListener('resize', updatePanAvailability);
+        return () => {
+            window.removeEventListener('resize', updatePanAvailability);
+        };
+    }, [totalWidth, kanbanColumns.length, groupedTasks]);
+    useEffect(() => {
+        const handlePointerMove = (event) => {
+            const pan = panStateRef.current;
+            if (pan.pointerId === null || pan.pointerId !== event.pointerId)
+                return;
+            const deltaX = event.clientX - pan.startX;
+            const deltaY = event.clientY - pan.startY;
+            if (!pan.didPan) {
+                if (Math.abs(deltaX) < 7 || Math.abs(deltaX) < Math.abs(deltaY))
+                    return;
+                pan.didPan = true;
+                setIsHeaderPanning(true);
+                document.body.style.userSelect = 'none';
+            }
+            const nextLeft = pan.startScrollLeft - deltaX;
+            if (containerRef.current)
+                containerRef.current.scrollLeft = nextLeft;
+            if (topScrollRef.current)
+                topScrollRef.current.scrollLeft = nextLeft;
+            event.preventDefault();
+        };
+        const endPan = () => {
+            const pan = panStateRef.current;
+            if (pan.pointerId === null)
+                return;
+            pan.pointerId = null;
+            pan.didPan = false;
+            if (isHeaderPanning) {
+                setIsHeaderPanning(false);
+                document.body.style.userSelect = '';
+            }
+        };
+        window.addEventListener('pointermove', handlePointerMove);
+        window.addEventListener('pointerup', endPan);
+        window.addEventListener('pointercancel', endPan);
+        return () => {
+            window.removeEventListener('pointermove', handlePointerMove);
+            window.removeEventListener('pointerup', endPan);
+            window.removeEventListener('pointercancel', endPan);
+            document.body.style.userSelect = '';
+        };
+    }, [isHeaderPanning]);
+    useEffect(() => {
+        return () => {
+            linkFeedbackTimersRef.current.forEach((timerId) => window.clearTimeout(timerId));
+            linkFeedbackTimersRef.current.clear();
+        };
+    }, []);
+    const handleHeaderPointerDown = (event) => {
+        if (!headerPanEnabled)
+            return;
+        const target = event.target;
+        if (target?.closest('button, a, input, select, textarea, [role="button"], [data-no-header-pan="true"]')) {
+            return;
+        }
+        panStateRef.current.pointerId = event.pointerId;
+        panStateRef.current.startX = event.clientX;
+        panStateRef.current.startY = event.clientY;
+        panStateRef.current.startScrollLeft = containerRef.current?.scrollLeft || 0;
+        panStateRef.current.didPan = false;
+    };
+    const handleDragStart = (event) => {
+        setActiveId(event.active.id);
+        setCurrentParentDropTargetId(null);
+    };
+    const handleDragOver = (event) => {
+        if (groupBy === 'schedule') {
+            setCurrentParentDropTargetId(null);
+            return;
+        }
+        const { active, over } = event;
+        if (!over) {
+            setCurrentParentDropTargetId(null);
+            return;
+        }
+        const activeId = active.id;
+        const overId = over.id;
+        const activeTask = tasks.find(t => t.id === activeId);
+        const overTask = tasks.find(t => t.id === overId);
+        if (!activeTask || !overTask || activeTask.id === overTask.id) {
+            setCurrentParentDropTargetId(null);
+            return;
+        }
+        setCurrentParentDropTargetId(overTask.id);
+    };
+    const handleDragEnd = (event) => {
+        const { active, over } = event;
+        setActiveId(null);
+        setCurrentParentDropTargetId(null);
+        const activeId = String(active.id);
+        const overId = over ? String(over.id) : null;
+        const activeTask = tasks.find(t => t.id === activeId);
+        if (!activeTask || !overId)
+            return;
+        const overTask = tasks.find(t => t.id === overId);
+        if (groupBy !== 'schedule' && overTask && overTask.id !== activeTask.id) {
+            const overRect = over?.rect;
+            const translatedActiveRect = active.rect.current.translated;
+            const initialActiveRect = active.rect.current.initial;
+            const activeRect = translatedActiveRect || initialActiveRect;
+            if (overRect && activeRect) {
+                const droppedInCenterZone = isDropInCenterZone(overRect, activeRect);
+                if (droppedInCenterZone) {
+                    if (activeTask.parentTaskId === overTask.id)
+                        return;
+                    const relationshipTasks = allTasks.length > 0 ? allTasks : tasks;
+                    if (wouldCreateParentCycle(activeTask.id, overTask.id, relationshipTasks)) {
+                        window.alert(`Cannot link child ${activeTask.id} to parent ${overTask.id}: link would create a cycle.`);
+                        return;
+                    }
+                    if (shouldPromptReparent(activeTask.parentTaskId, overTask.id)) {
+                        const confirmed = window.confirm(`Task ${activeTask.id} is already parented to ${activeTask.parentTaskId}. Re-parent it to ${overTask.id}?`);
+                        if (!confirmed)
+                            return;
+                    }
+                    onUpdateTask(activeTask.id, { parentTaskId: overTask.id });
+                    setRecentlyLinkedParentIds((prev) => Array.from(new Set([...prev, overTask.id])));
+                    const existing = linkFeedbackTimersRef.current.get(overTask.id);
+                    if (existing)
+                        window.clearTimeout(existing);
+                    const timerId = window.setTimeout(() => {
+                        linkFeedbackTimersRef.current.delete(overTask.id);
+                        setRecentlyLinkedParentIds((prev) => prev.filter((id) => id !== overTask.id));
+                    }, 1800);
+                    linkFeedbackTimersRef.current.set(overTask.id, timerId);
+                    return;
+                }
+            }
+        }
+        // Find the container (column) we dropped into
+        // If we dropped over a task, findContainer resolves to that task's column
+        // If we dropped over a column (empty or not), it resolves to the column ID
+        const sourceContainerId = findContainer(activeId);
+        const visualSourceContainerId = String(active?.data?.current?.sortable?.containerId || '');
+        const resolvedSourceContainerId = visualSourceContainerId || sourceContainerId;
+        const visualTargetContainerId = String(over?.data?.current?.sortable?.containerId || '');
+        const containerId = visualTargetContainerId || findContainer(overId);
+        if (!containerId)
+            return;
+        // Find the column definition
+        const column = columnLookup.get(containerId)
+            || kanbanColumns.find(c => String(c.value) === containerId || c.label === containerId);
+        if (column) {
+            if (groupBy === 'hierarchy') {
+                // Hierarchy columns are derived from relationships, not directly writable fields.
+                // Re-parenting remains card-to-card only.
+                return;
+            }
+            if (groupBy === 'schedule') {
+                const targetColumn = String(column.value);
+                const scheduleKeys = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
+                const isScheduleReorderColumn = targetColumn === 'backlog' || targetColumn === 'expired' || scheduleKeys.includes(targetColumn);
+                const buildInsertIndex = (targetTasks) => {
+                    let insertAt = targetTasks.length;
+                    const overTaskId = overTask?.id || (taskIdSet.has(overId) ? overId : null);
+                    if (!overTaskId || !taskIdSet.has(overTaskId))
+                        return insertAt;
+                    const overIndex = targetTasks.findIndex(t => t.id === overTaskId);
+                    if (overIndex < 0)
+                        return insertAt;
+                    const overRect = over?.rect;
+                    const translatedActiveRect = active.rect.current.translated;
+                    const activeRect = translatedActiveRect || active.rect.current.initial;
+                    const isBelowOverItem = Boolean(overRect
+                        && activeRect
+                        && (activeRect.top + activeRect.height / 2) > (overRect.top + overRect.height / 2));
+                    return overIndex + (isBelowOverItem ? 1 : 0);
+                };
+                const reindexSourceColumnAfterMove = (sourceColumnId, targetColumnId, pendingUpdates) => {
+                    if (!sourceColumnId || sourceColumnId === targetColumnId)
+                        return;
+                    const sourceTasks = (groupedTasks[String(sourceColumnId)] || []).filter(t => t.id !== activeId);
+                    sourceTasks.forEach((task, index) => {
+                        pendingUpdates.set(task.id, {
+                            ...(pendingUpdates.get(task.id) || {}),
+                            orderInDay: index
+                        });
+                    });
+                };
+                if (targetColumn === 'expired') {
+                    // Expired is virtual and source-only: allow reordering within Expired,
+                    // but do not allow drops from other columns into Expired.
+                    if (resolvedSourceContainerId !== 'expired')
+                        return;
+                    const pendingUpdates = new Map();
+                    const targetTasks = (groupedTasks.expired || []).filter(t => t.id !== activeId);
+                    const insertAt = buildInsertIndex(targetTasks);
+                    const reorderedTarget = [...targetTasks];
+                    reorderedTarget.splice(insertAt, 0, activeTask);
+                    reorderedTarget.forEach((task, index) => {
+                        pendingUpdates.set(task.id, {
+                            ...(pendingUpdates.get(task.id) || {}),
+                            orderInDay: index
+                        });
+                    });
+                    pendingUpdates.forEach((updates, taskId) => onUpdateTask(taskId, updates));
+                    return;
+                }
+                if (targetColumn === 'backlog') {
+                    const pendingUpdates = new Map();
+                    const targetTasks = (groupedTasks.backlog || []).filter(t => t.id !== activeId);
+                    const insertAt = buildInsertIndex(targetTasks);
+                    const reorderedTarget = [...targetTasks];
+                    reorderedTarget.splice(insertAt, 0, activeTask);
+                    reorderedTarget.forEach((task, index) => {
+                        if (task.id === activeId) {
+                            if (activeTask.scheduledDate) {
+                                pendingUpdates.set(task.id, {
+                                    ...(pendingUpdates.get(task.id) || {}),
+                                    scheduledDate: null,
+                                    scheduledWeekKey: null,
+                                    orderInDay: index
+                                });
+                            }
+                            else {
+                                pendingUpdates.set(task.id, {
+                                    ...(pendingUpdates.get(task.id) || {}),
+                                    orderInDay: index
+                                });
+                            }
+                        }
+                        else {
+                            pendingUpdates.set(task.id, {
+                                ...(pendingUpdates.get(task.id) || {}),
+                                orderInDay: index
+                            });
+                        }
+                    });
+                    reindexSourceColumnAfterMove(resolvedSourceContainerId, targetColumn, pendingUpdates);
+                    pendingUpdates.forEach((updates, taskId) => onUpdateTask(taskId, updates));
+                    return;
+                }
+                if (!isScheduleReorderColumn || !scheduleKeys.includes(targetColumn))
+                    return;
+                const scheduledDate = scheduleContext.dates[targetColumn];
+                if (!scheduledDate)
+                    return;
+                const isTerminal = activeTask.status === 'done' || activeTask.status === 'cancelled';
+                if (!isTerminal && scheduledDate < todayDateOnly) {
+                    window.alert('Only completed work can be scheduled in the past.');
+                    return;
+                }
+                const scheduledWeekKey = scheduleContext.parseToIsoWeekKey(scheduledDate);
+                if (childrenByParentId.has(activeTask.id)) {
+                    const stack = [...(childrenByParentId.get(activeTask.id) || [])];
+                    const descendants = [];
+                    while (stack.length > 0) {
+                        const next = stack.shift();
+                        descendants.push(next);
+                        const children = childrenByParentId.get(next.id) || [];
+                        if (children.length > 0)
+                            stack.push(...children);
+                    }
+                    const leafDescendants = descendants.filter((task) => !childrenByParentId.has(task.id));
+                    const activeLeafDescendants = leafDescendants.filter((task) => !task.isArchived && task.status !== 'done' && task.status !== 'cancelled');
+                    const toSchedule = activeLeafDescendants.filter((task) => !task.scheduledDate);
+                    const alreadyScheduledLeafCount = Math.max(0, activeLeafDescendants.length - toSchedule.length);
+                    onScheduleParentDrop?.({
+                        parentTaskId: activeTask.id,
+                        parentTitle: activeTask.title,
+                        targetColumn: targetColumn,
+                        targetDate: scheduledDate,
+                        toScheduleLeafTaskIds: toSchedule.map((task) => task.id),
+                        alreadyScheduledLeafCount,
+                        totalLeafDescendants: activeLeafDescendants.length
+                    });
+                    onScheduleDaySelected?.(scheduledDate);
+                    return;
+                }
+                const pendingUpdates = new Map();
+                const targetTasks = (groupedTasks[targetColumn] || []).filter(t => t.id !== activeId);
+                const insertAt = buildInsertIndex(targetTasks);
+                const reorderedTarget = [...targetTasks];
+                reorderedTarget.splice(insertAt, 0, activeTask);
+                reorderedTarget.forEach((task, index) => {
+                    if (task.id === activeId) {
+                        pendingUpdates.set(task.id, {
+                            ...(pendingUpdates.get(task.id) || {}),
+                            scheduledDate,
+                            scheduledWeekKey,
+                            orderInDay: index
+                        });
+                    }
+                    else {
+                        pendingUpdates.set(task.id, {
+                            ...(pendingUpdates.get(task.id) || {}),
+                            orderInDay: index
+                        });
+                    }
+                });
+                reindexSourceColumnAfterMove(resolvedSourceContainerId, targetColumn, pendingUpdates);
+                pendingUpdates.forEach((updates, taskId) => onUpdateTask(taskId, updates));
+                onScheduleDaySelected?.(scheduledDate);
+                return;
+            }
+            // Determine the value to update based on the grouping
+            let targetValue = (groupBy === 'category') ? column.label : column.value;
+            // STATUS HANDLING
+            if (groupBy === 'status') {
+                const currentStatus = getTaskStatus(activeTask);
+                const targetStatus = String(targetValue);
+                if (currentStatus !== targetStatus) {
+                    const updates = {
+                        status: targetStatus
+                    };
+                    if (targetStatus === 'task') {
+                        updates.inProgress = false;
+                        updates.readyForReview = false;
+                        updates.completed = false;
+                        updates.cancelled = false;
+                    }
+                    else if (targetStatus === 'on-hold') {
+                        updates.inProgress = false;
+                        updates.readyForReview = false;
+                        updates.completed = false;
+                        updates.cancelled = false;
+                    }
+                    else if (targetStatus === 'in-progress') {
+                        updates.inProgress = true;
+                        updates.readyForReview = false;
+                        updates.completed = false;
+                        updates.cancelled = false;
+                    }
+                    else if (targetStatus === 'review') {
+                        updates.inProgress = false;
+                        updates.readyForReview = true;
+                        updates.completed = false;
+                        updates.cancelled = false;
+                    }
+                    else if (targetStatus === 'done') {
+                        updates.inProgress = false;
+                        updates.readyForReview = false;
+                        updates.completed = true;
+                        updates.cancelled = false;
+                        updates.completedAt = new Date().toISOString();
+                    }
+                    else if (targetStatus === 'cancelled') {
+                        updates.status = 'cancelled';
+                    }
+                    onUpdateTask(activeId, updates);
+                }
+                return;
+            }
+            // Explicitly cast numeric fields when grouping by them.
+            if (groupBy === 'priority' || groupBy === 'complexity') {
+                targetValue = Number(targetValue);
+            }
+            const currentValue = activeTask[groupBy];
+            // Use string comparison for the "changed" check to be safe with number/string values
+            if (String(currentValue ?? '') !== String(targetValue ?? '')) {
+                const updates = { [groupBy]: targetValue };
+                onUpdateTask(activeId, updates);
+            }
+        }
+    };
+    const findContainer = (id) => {
+        // 1. If ID matches a column value directly
+        if (columnLookup.has(id)) {
+            const directMatch = columnLookup.get(id);
+            return directMatch ? String(directMatch.value) : id;
+        }
+        // 2. If ID belongs to a task, find its group's column
+        const task = tasks.find(t => t.id === id);
+        if (task) {
+            let val = '';
+            if (groupBy === 'status') {
+                val = getTaskStatus(task);
+            }
+            else if (groupBy === 'schedule') {
+                val = getScheduleColumnValue(task);
+            }
+            else if (groupBy === 'hierarchy') {
+                val = getHierarchyColumnValue(task);
+            }
+            else {
+                val = String(task[groupBy] ?? '');
+            }
+            const col = columnLookup.get(val);
+            return col ? String(col.value) : null;
+        }
+        return null;
+    };
+    const dropAnimation = {
+        sideEffects: defaultDropAnimationSideEffects({
+            styles: {
+                active: {
+                    opacity: '0',
+                },
+            },
+        }),
+    };
+    const customCollisionDetection = (args) => {
+        // First, look for collisions with the pointer (mouse cursor)
+        // This is crucial for collapsed columns which are narrow
+        const pointerCollisions = pointerWithin(args);
+        // If we have pointer collisions, user is explicitly hovering over something
+        if (pointerCollisions.length > 0) {
+            const pointerCoords = args.pointerCoordinates;
+            if (!pointerCoords)
+                return [pointerCollisions[0]];
+            // Prefer task cards over columns when both collide.
+            const taskCollisions = pointerCollisions.filter((c) => {
+                const id = String(c.id);
+                return taskIdSet.has(id) && id !== activeId;
+            });
+            if (taskCollisions.length === 0) {
+                // Pointer is often between cards (gap), where only column collision exists.
+                // Constrain nearest-task fallback to the column under pointer to avoid cross-column/day drift.
+                const columnCollisions = pointerCollisions.filter((c) => {
+                    const id = String(c.id);
+                    return !taskIdSet.has(id);
+                });
+                const hoveredColumnCollision = columnCollisions.find((collision) => {
+                    const mapped = findContainer(String(collision.id));
+                    return Boolean(mapped);
+                }) || null;
+                const hoveredColumnId = hoveredColumnCollision
+                    ? findContainer(String(hoveredColumnCollision.id))
+                    : null;
+                const taskDroppables = (args.droppableContainers || []).filter((container) => {
+                    const id = String(container.id);
+                    if (!taskIdSet.has(id) || id === activeId)
+                        return false;
+                    if (!hoveredColumnId)
+                        return true;
+                    return findContainer(id) === hoveredColumnId;
+                });
+                if (taskDroppables.length > 0) {
+                    const nearestTask = closestCorners({
+                        ...args,
+                        droppableContainers: taskDroppables
+                    });
+                    if (nearestTask.length > 0) {
+                        return [nearestTask[0]];
+                    }
+                }
+                if (hoveredColumnCollision) {
+                    return [hoveredColumnCollision];
+                }
+                return [pointerCollisions[0]];
+            }
+            const candidates = taskCollisions;
+            let best = candidates[0];
+            let bestDistance = Number.POSITIVE_INFINITY;
+            for (const collision of candidates) {
+                const rect = args.droppableRects?.get(collision.id);
+                if (!rect)
+                    continue;
+                const centerX = rect.left + rect.width / 2;
+                const centerY = rect.top + rect.height / 2;
+                const dx = pointerCoords.x - centerX;
+                const dy = pointerCoords.y - centerY;
+                const distance = dx * dx + dy * dy;
+                if (distance < bestDistance) {
+                    bestDistance = distance;
+                    best = collision;
+                }
+            }
+            return [best];
+        }
+        // Fallback to closestCorners for other cases (like keyboard or large overlaps)
+        return closestCorners(args);
+    };
+    const commonCardProps = {
+        searchQuery,
+        copiedId,
+        // Use a stable relationship source so parent/child UI does not disappear
+        // when list filters hide related tasks from the board.
+        allTasks: hierarchyTasks.length > 0
+            ? hierarchyTasks
+            : (allTasks.length > 0 ? allTasks : tasks),
+        availableSpecialists,
+        taxonomies,
+        priorities,
+        approaches,
+        onCopyId,
+        onToggleInProgress,
+        onToggleReview,
+        onToggleComplete,
+        onToggleCancel,
+        onArchiveTask,
+        onUnarchive,
+        onDelete,
+        onOpenTaskById,
+        onUnlinkChildTask,
+        onClearParentTask,
+        categories,
+        changedTaskIdSet,
+        linkedParentIdSet: new Set(recentlyLinkedParentIds),
+        parentDropTargetId: currentParentDropTargetId,
+        groupBy,
+        scheduleParentIdSet: hierarchyParentIdSet
+    };
+    return (_jsxs(DndContext, { sensors: sensors, collisionDetection: customCollisionDetection, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, onDragCancel: () => {
+            setActiveId(null);
+            setCurrentParentDropTargetId(null);
+        }, children: [_jsxs("div", { className: styles.kanbanWrapper, children: [_jsx("div", { ref: topScrollRef, className: styles.kanbanTopScroll, children: _jsx("div", { className: styles.kanbanTopScrollSpacer, style: { width: `${totalWidth}px` } }) }), _jsx("div", { className: styles.kanbanContainer, ref: containerRef, children: kanbanColumns.map((column) => {
+                            const columnTasks = groupedTasks[String(column.value)] || [];
+                            const isExplicitlyHidden = getIsColumnHidden(column.value, column.label);
+                            const isAutoHidden = groupBy !== 'schedule' && emptyColumnMode === 'hide' && columnTasks.length === 0;
+                            const isScheduleMode = groupBy === 'schedule';
+                            const hasBacklogColumn = isScheduleMode && kanbanColumns.some((entry) => String(entry.value) === 'backlog');
+                            const isBacklog = isScheduleMode && String(column.value) === 'backlog';
+                            const isExpired = isScheduleMode && String(column.value) === 'expired';
+                            const backlogTasks = groupedTasks.backlog || [];
+                            const backlogCollapsed = emptyColumnMode === 'collapse' && backlogTasks.length === 0;
+                            const backlogWidth = backlogCollapsed ? 72 : 320;
+                            const stickyLeft = isBacklog ? 0 : (isExpired ? (hasBacklogColumn ? backlogWidth + 4 : 0) : undefined);
+                            const stickyZIndex = isBacklog ? 6 : (isExpired ? 5 : undefined);
+                            if (isExplicitlyHidden || isAutoHidden)
+                                return null;
+                            return (_jsx(KanbanColumn, { id: String(column.value), title: column.label, color: column.color, icon: column.icon, tasks: columnTasks, activeId: activeId, totalCount: columnTotals[String(column.value)], onAddTask: () => onAddTaskToColumn?.(groupBy, column.value), onTaskClick: onTaskClick, commonCardProps: commonCardProps, collapseEmpty: emptyColumnMode === 'collapse', compressed: compressed, onHeaderPointerDown: handleHeaderPointerDown, isHeaderPanning: isHeaderPanning, headerPanEnabled: headerPanEnabled, stickyLeft: stickyLeft, stickyZIndex: stickyZIndex, isPast: !!column.isPast, isSelected: !!column.isSelected, isWeekend: !!column.isWeekend, disableSorting: false, scheduleDate: groupBy === 'schedule' ? scheduleContext.dates[String(column.value)] : undefined, onScheduleDaySelected: onScheduleDaySelected }, String(column.value)));
+                        }) })] }), createPortal(_jsx(DragOverlay, { dropAnimation: dropAnimation, children: activeTaskOverlay ? (_jsx(TaskCard, { task: activeTaskOverlay, isOverlay: true, ...commonCardProps, isArchived: activeTaskOverlay.isArchived, categories: categories, compressed: compressed, isRecentlyChanged: changedTaskIdSet.has(activeTaskOverlay.id) })) : null }), document.body)] }));
+}
+function KanbanColumn({ id, title, color, icon, tasks, activeId = null, totalCount, onAddTask, onTaskClick, commonCardProps, collapseEmpty, compressed, onHeaderPointerDown, isHeaderPanning = false, headerPanEnabled = false, stickyLeft, stickyZIndex, isPast = false, isSelected = false, isWeekend = false, disableSorting = false, scheduleDate, onScheduleDaySelected }) {
+    const { setNodeRef } = useSortable({
+        id: id,
+        data: {
+            type: 'Column',
+        },
+    });
+    const isCollapsed = collapseEmpty && tasks.length === 0;
+    const visibleTasks = activeId ? tasks.filter((t) => t.id !== activeId) : tasks;
+    const isSticky = typeof stickyLeft === 'number';
+    const scrollRef = useRef(null);
+    const handleColumnClick = (event) => {
+        if (!scheduleDate || !onScheduleDaySelected)
+            return;
+        const target = event.target;
+        if (!target)
+            return;
+        if (target.closest(`.${styles.taskItem}`) || target.closest(`.${styles.kanbanCardWrapper}`))
+            return;
+        onScheduleDaySelected(scheduleDate);
+    };
+    return (_jsxs("div", { ref: setNodeRef, className: `${styles.kanbanColumn} ${isCollapsed ? styles.kanbanColumnCollapsed : ''} ${isSticky ? styles.kanbanColumnSticky : ''} ${isPast ? styles.kanbanColumnPast : ''} ${isSelected ? styles.kanbanColumnSelectedDay : ''} ${isWeekend ? styles.kanbanColumnWeekend : ''}`, style: isSticky ? { left: `${stickyLeft}px`, zIndex: stickyZIndex ?? 4 } : undefined, onClick: handleColumnClick, children: [_jsxs("div", { className: `${styles.kanbanHeader} ${headerPanEnabled ? styles.kanbanHeaderDraggable : ''} ${isHeaderPanning ? styles.kanbanHeaderPanning : ''}`, style: { borderTopColor: resolveColor(color) || 'var(--color-purple)' }, onPointerDown: onHeaderPointerDown, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', minWidth: 0, overflow: 'hidden' }, children: [(() => {
+                                const IconComp = icon && IconMap[icon] ? IconMap[icon] : Icons.Folder;
+                                const resolvedColor = resolveColor(color) || 'var(--color-purple)';
+                                return _jsx(IconComp, { size: 16, style: { color: resolvedColor } });
+                            })(), !isCollapsed && _jsx("span", { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }, children: title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', flexShrink: 0 }, children: [(!isCollapsed || totalCount > 0) && (_jsx("span", { className: styles.kanbanCount, children: isCollapsed ? totalCount : `${tasks.length} / ${totalCount}` })), _jsx("button", { className: styles.kanbanQuickAdd, onClick: (e) => { e.stopPropagation(); onAddTask(); }, title: `Add task to ${title}`, "data-no-header-pan": "true", children: _jsx(Icons.Plus, { size: 14 }) })] })] }), _jsx("div", { className: styles.kanbanDroppable, children: _jsx("div", { className: styles.kanbanDroppableScroll, ref: scrollRef, children: disableSorting ? (visibleTasks.map((task) => (_jsx("div", { className: styles.kanbanCardWrapper, children: _jsx(TaskCard, { task: task, onClick: onTaskClick, ...commonCardProps, isArchived: task.isArchived, compressed: compressed, isRecentlyChanged: false }) }, task.id)))) : (_jsx(SortableContext, { id: id, items: visibleTasks.map(t => t.id), strategy: verticalListSortingStrategy, children: visibleTasks.map((task) => (_jsx(SortableTaskCard, { task: task, onClick: onTaskClick, commonCardProps: commonCardProps, compressed: compressed, isRecentlyChanged: commonCardProps.changedTaskIdSet?.has(task.id) }, task.id))) })) }) })] }));
+}
+function SortableTaskCard({ task, onClick, commonCardProps, compressed, isRecentlyChanged = false }) {
+    const dragDisabled = false;
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: task.id, disabled: dragDisabled });
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0 : 1,
+        pointerEvents: isDragging ? 'none' : 'auto',
+    };
+    const isScheduleMode = commonCardProps?.groupBy === 'schedule';
+    const isGlowActive = !isScheduleMode && (isRecentlyChanged
+        || commonCardProps?.parentDropTargetId === task.id
+        || !!commonCardProps?.linkedParentIdSet?.has(task.id));
+    return (_jsx("div", { ref: setNodeRef, style: style, ...(dragDisabled ? {} : attributes), ...(dragDisabled ? {} : listeners), className: `${styles.kanbanCardWrapper} ${isGlowActive ? styles.kanbanCardWrapperRaised : ''}`, children: _jsx(TaskCard, { task: task, onClick: onClick, ...commonCardProps, isArchived: task.isArchived, compressed: compressed, isRecentlyChanged: isScheduleMode ? false : isRecentlyChanged }) }));
+}