@taskforcehq/taskforce 0.3.169 → 0.3.300

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

@@ -1,1004 +0,0 @@
-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 }) }));
-}