Function TasksCalendar

packages/app-core/src/components/TasksCalendar.tsx:89–812

({
  tasks,
  today,
  onOpenTask,
  onToggleTask,
  onRescheduleTask,
  onMoveTask,
  onAddTask,
  dailyNotesEnabled
}: Props)

}

export function TasksCalendar({
  tasks,
  today,
  onOpenTask,
  onToggleTask,
  onRescheduleTask,
  onMoveTask,
  onAddTask,
  dailyNotesEnabled
}: Props): JSX.Element {
  const monthAnchorIso = useStore((s) => s.tasksCalendarMonthAnchor)
  const setMonthAnchor = useStore((s) => s.setTasksCalendarMonthAnchor)
  const selectedDateIso = useStore((s) => s.tasksCalendarSelectedDate)
  const setSelectedDate = useStore((s) => s.setTasksCalendarSelectedDate)
  const weekStart = useStore((s) => s.calendarWeekStart)
  const applyTaskMutation = useStore((s) => s.applyTaskMutation)
  const deleteTaskFromList = useStore((s) => s.deleteTaskFromList)
  const rootRef = useRef<HTMLDivElement>(null)
  // Pointer-based drag-to-reschedule. Native HTML5 DnD is flaky for these rows
  // inside the pane, so (like the Kanban) we grab on pointerdown, float a ghost
  // while moving, detect the day under the cursor via a `data-cal-day` attribute,
  // and offer the move / set-due choice on release.
  const pointerDragRef = useRef<{
    task: VaultTask
    startX: number
    startY: number
    dragging: boolean
  } | null>(null)
  const suppressClickRef = useRef(false)
  const [ghost, setGhost] = useState<{ x: number; y: number; label: string } | null>(null)
  const [dragOverIso, setDragOverIso] = useState<string | null>(null)
  // Shared context menu — the drop "move vs set due" choice and the right-click
  // task actions both feed it.
  const [menu, setMenu] = useState<{ x: number; y: number; items: ContextMenuItem[] } | null>(null)
  // Inline task editing (right-click → Edit).
  const [editingTaskId, setEditingTaskId] = useState<string | null>(null)
  const [editValue, setEditValue] = useState('')
  const cancelEditRef = useRef(false)
  // Keyboard reschedule: which task in the selected day's list is "active".
  const [activeTaskIndex, setActiveTaskIndex] = useState(0)
  // Keyboard "grab & place": the task picked up with `m`. While set, grid
  // navigation chooses a target day; Enter places it (move/set-due choice).
  const [grabbedTask, setGrabbedTask] = useState<VaultTask | null>(null)
  const dPending = useRef(false)
  const dTimer = useRef<ReturnType<typeof setTimeout>>()
  const addInputRef = useRef<HTMLInputElement>(null)
  // Quick-add box for the selected day.
  const [addValue, setAddValue] = useState('')

  const todayIso = useMemo(() => toIsoDateLocal(today), [today])

  // Initialise anchor + selection lazily — first time the view mounts
  // we land on this month with today selected.
  const monthAnchor = useMemo(
    () => (monthAnchorIso ? firstOfMonth(parseIsoLocal(monthAnchorIso)) : firstOfMonth(today)),
    [monthAnchorIso, today]
  )
  const selectedDate = useMemo(