From ba385e116bd9aac4b3e2b270e16f9befa021e26d Mon Sep 17 00:00:00 2001
From: Dang Tran <91554483+BrooklynD23@users.noreply.github.com>
Date: Mon, 5 Jan 2026 22:50:52 -0800
Subject: [PATCH 1/9] feat: Make insertion button always visible but faded for
 accessibility

---
 package-lock.json                 | 13 +++++++++++++
 src/components/InsertionPoint.tsx |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index f9e02e0..a33e651 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -155,6 +155,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -475,6 +476,7 @@
       "version": "11.14.0",
       "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
       "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.13.5",
@@ -515,6 +517,7 @@
       "version": "11.14.1",
       "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
       "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.13.5",
@@ -1141,6 +1144,7 @@
       "version": "7.3.6",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.6.tgz",
       "integrity": "sha512-R4DaYF3dgCQCUAkr4wW1w26GHXcf5rCmBRHVBuuvJvaGLmZdD8EjatP80Nz5JCw0KxORAzwftnHzXVnjR8HnFw==",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.28.4",
         "@mui/core-downloads-tracker": "^7.3.6",
@@ -1744,6 +1748,7 @@
       "version": "18.3.27",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
       "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -1812,6 +1817,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz",
       "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "6.21.0",
         "@typescript-eslint/types": "6.21.0",
@@ -1993,6 +1999,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2138,6 +2145,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -2401,6 +2409,7 @@
       "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -3428,6 +3437,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -3439,6 +3449,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -3801,6 +3812,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -3853,6 +3865,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
       "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
diff --git a/src/components/InsertionPoint.tsx b/src/components/InsertionPoint.tsx
index c49980e..50c3316 100644
--- a/src/components/InsertionPoint.tsx
+++ b/src/components/InsertionPoint.tsx
@@ -26,7 +26,7 @@ export const InsertionPoint = ({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        opacity: isHovered || isActive ? 1 : 0,
+        opacity: isHovered || isActive ? 1 : 0.35,
         transition: 'opacity 150ms ease',
         cursor: 'pointer',
         position: 'relative',

From cef6858ea56e829fc501234e1138f66b83881993 Mon Sep 17 00:00:00 2001
From: Dang Tran <91554483+BrooklynD23@users.noreply.github.com>
Date: Mon, 5 Jan 2026 22:52:35 -0800
Subject: [PATCH 2/9] feat: Add end zone drop target to allow moving tasks
 below locked tasks

---
 src/components/EndZoneDropTarget.tsx | 97 ++++++++++++++++++++++++++++
 src/components/Timeline.tsx          | 20 ++++++
 src/store/taskStore.ts               | 14 ++++
 src/types/index.ts                   |  1 +
 src/utils/dragLogic.ts               | 37 +++++++++++
 5 files changed, 169 insertions(+)
 create mode 100644 src/components/EndZoneDropTarget.tsx

diff --git a/src/components/EndZoneDropTarget.tsx b/src/components/EndZoneDropTarget.tsx
new file mode 100644
index 0000000..d98d1c7
--- /dev/null
+++ b/src/components/EndZoneDropTarget.tsx
@@ -0,0 +1,97 @@
+import { Box, Typography } from '@mui/material'
+import { useEffect, useRef, useState } from 'react'
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
+
+interface EndZoneDropTargetProps {
+  onDrop: (draggedTaskId: string) => void
+  hasLockedTaskAtEnd: boolean
+}
+
+/**
+ * EndZoneDropTarget - a drop zone at the bottom of the task list
+ * Allows users to move tasks to the end, even past locked tasks
+ */
+export const EndZoneDropTarget = ({
+  onDrop,
+  hasLockedTaskAtEnd,
+}: EndZoneDropTargetProps) => {
+  const dropRef = useRef<HTMLDivElement>(null)
+  const [isDropTarget, setIsDropTarget] = useState(false)
+  const [isDragging, setIsDragging] = useState(false)
+
+  useEffect(() => {
+    const element = dropRef.current
+    if (!element) return
+
+    const cleanup = dropTargetForElements({
+      element,
+      getData: () => ({ type: 'end-zone' }),
+      onDragEnter: () => {
+        setIsDropTarget(true)
+        setIsDragging(true)
+      },
+      onDragLeave: () => {
+        setIsDropTarget(false)
+      },
+      onDrop: ({ source }) => {
+        setIsDropTarget(false)
+        setIsDragging(false)
+        const draggedTaskId = source.data.taskId as string
+        if (draggedTaskId) {
+          onDrop(draggedTaskId)
+        }
+      },
+    })
+
+    // Listen for global drag events to show the zone
+    const handleDragStart = () => setIsDragging(true)
+    const handleDragEnd = () => {
+      setIsDragging(false)
+      setIsDropTarget(false)
+    }
+
+    document.addEventListener('dragstart', handleDragStart)
+    document.addEventListener('dragend', handleDragEnd)
+
+    return () => {
+      cleanup()
+      document.removeEventListener('dragstart', handleDragStart)
+      document.removeEventListener('dragend', handleDragEnd)
+    }
+  }, [onDrop])
+
+  // Only show when there's a locked task at the end and we're dragging
+  if (!hasLockedTaskAtEnd && !isDragging) return null
+
+  return (
+    <Box
+      ref={dropRef}
+      sx={{
+        minHeight: isDragging ? '80px' : '40px',
+        marginTop: '8px',
+        marginLeft: '114px', // Align with task blocks (90px time label + 24px gap)
+        width: '400px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: '8px',
+        border: isDropTarget ? '2px solid #000000' : '2px dashed #BDBDBD',
+        backgroundColor: isDropTarget ? 'rgba(0, 0, 0, 0.05)' : 'transparent',
+        opacity: isDragging ? 1 : 0.5,
+        transition: 'all 200ms ease',
+      }}
+    >
+      <Typography
+        variant="body2"
+        sx={{
+          color: isDropTarget ? '#000000' : '#9E9E9E',
+          fontSize: '13px',
+          fontWeight: isDropTarget ? 500 : 400,
+        }}
+      >
+        {isDropTarget ? 'Drop here to move to end' : 'Drop zone'}
+      </Typography>
+    </Box>
+  )
+}
+
diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
index ba28a4b..c17da2b 100644
--- a/src/components/Timeline.tsx
+++ b/src/components/Timeline.tsx
@@ -5,6 +5,7 @@ import { TaskBlock } from './TaskBlock'
 import { InsertionPoint } from './InsertionPoint'
 import { InlineTaskForm } from './InlineTaskForm'
 import { TimeLabel } from './TimeLabel'
+import { EndZoneDropTarget } from './EndZoneDropTarget'
 import { generateTimeLabels, getVisibleTimeRange } from '../utils/timeCalculations'
 import { getDragAction } from '../utils/dragLogic'
 
@@ -22,6 +23,7 @@ export const Timeline = () => {
   const toggleLock = useTaskStore((state) => state.toggleLock)
   const swapTasks = useTaskStore((state) => state.swapTasks)
   const pushTask = useTaskStore((state) => state.pushTask)
+  const moveToEnd = useTaskStore((state) => state.moveToEnd)
   const dragConfig = useTaskStore((state) => state.dragConfig)
 
   const [activeInsertionPoint, setActiveInsertionPoint] = useState<string | null>(null)
@@ -32,6 +34,10 @@ export const Timeline = () => {
   const { start, end } = getVisibleTimeRange(tasks)
   const timeLabels = generateTimeLabels(start, end)
 
+  // Check if the last task is locked (for showing end zone drop target)
+  const lastTask = tasks[tasks.length - 1]
+  const hasLockedTaskAtEnd = lastTask?.isLocked ?? false
+
   const handleInsertTask = (afterTaskId: string | null, title: string, durationMinutes: number) => {
     insertTask(afterTaskId, {
       title,
@@ -55,6 +61,12 @@ export const Timeline = () => {
     setDraggingTaskId(null)
   }
 
+  const handleMoveToEnd = (taskId: string) => {
+    console.log('Move to end:', taskId)
+    moveToEnd(taskId)
+    setDraggingTaskId(null)
+  }
+
   const handleDrop = (draggedTaskId: string, targetTaskId: string, dropY: number) => {
     const draggedTask = tasks.find((t) => t.id === draggedTaskId)
     const targetTask = tasks.find((t) => t.id === targetTaskId)
@@ -188,6 +200,14 @@ export const Timeline = () => {
             </Box>
           ))
         )}
+
+        {/* End zone drop target - shown when dragging, especially useful when last task is locked */}
+        {tasks.length > 0 && (
+          <EndZoneDropTarget
+            onDrop={handleMoveToEnd}
+            hasLockedTaskAtEnd={hasLockedTaskAtEnd}
+          />
+        )}
       </Box>
 
       {/* Info text at bottom */}
diff --git a/src/store/taskStore.ts b/src/store/taskStore.ts
index 50a5108..683a784 100644
--- a/src/store/taskStore.ts
+++ b/src/store/taskStore.ts
@@ -10,6 +10,7 @@ import {
   executePush,
   detectOverlaps,
   reorderTasks,
+  moveTaskToEnd,
 } from '../utils/dragLogic'
 import { taskColors } from '../theme/theme'
 
@@ -138,6 +139,19 @@ export const useTaskStore = create<TaskStore>((set, get) => ({
     // If result is null, operation failed (e.g., locked conflict) - do nothing
   },
 
+  /**
+   * Move task to the end of the list (useful for moving past locked tasks)
+   */
+  moveToEnd: (taskId) => {
+    const result = moveTaskToEnd(get().tasks, taskId)
+
+    if (result) {
+      const tasksWithOverlaps = detectOverlaps(result)
+      set({ tasks: tasksWithOverlaps })
+      saveTasksToStorage(tasksWithOverlaps)
+    }
+  },
+
   // State Management
 
   /**
diff --git a/src/types/index.ts b/src/types/index.ts
index 258a5c1..7b3b3fc 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -53,6 +53,7 @@ export interface TaskStore extends AppState {
   insertTask: (afterTaskId: string | null, task: Omit<Task, 'id' | 'createdAt' | 'order' | 'color'>) => void
   swapTasks: (taskId1: string, taskId2: string) => void
   pushTask: (draggedTaskId: string, targetTaskId: string) => void
+  moveToEnd: (taskId: string) => void
 
   // State management
   toggleLock: (taskId: string) => void
diff --git a/src/utils/dragLogic.ts b/src/utils/dragLogic.ts
index 51b988e..7f800f7 100644
--- a/src/utils/dragLogic.ts
+++ b/src/utils/dragLogic.ts
@@ -177,3 +177,40 @@ export const detectOverlaps = (tasks: Task[]): Task[] => {
 export const reorderTasks = (tasks: Task[]): Task[] => {
   return tasks.map((task, index) => ({ ...task, order: index }))
 }
+
+/**
+ * Move a task to the end of the task list
+ * This allows moving tasks below locked tasks when there's no drop target after them
+ */
+export const moveTaskToEnd = (
+  tasks: Task[],
+  draggedTaskId: string
+): Task[] | null => {
+  const draggedTask = tasks.find((t) => t.id === draggedTaskId)
+
+  if (!draggedTask) return null
+  if (draggedTask.isLocked) return null // Can't move locked tasks
+
+  // Get the current max order
+  const maxOrder = Math.max(...tasks.map((t) => t.order))
+
+  // If task is already at the end, no change needed
+  if (draggedTask.order === maxOrder) return null
+
+  // Move dragged task to end, shift other tasks up
+  const draggedOrder = draggedTask.order
+
+  const reorderedTasks = tasks.map((task) => {
+    if (task.id === draggedTaskId) {
+      // Dragged task goes to the end
+      return { ...task, order: maxOrder }
+    } else if (task.order > draggedOrder) {
+      // Tasks after the dragged task shift up by 1
+      return { ...task, order: task.order - 1 }
+    }
+    return task
+  })
+
+  // Recalculate times based on new order
+  return recalculateTaskTimes(reorderedTasks)
+}
\ No newline at end of file

From a48ade578c4d17ec52fe293818ef52d1435accd0 Mon Sep 17 00:00:00 2001
From: Dang Tran <91554483+BrooklynD23@users.noreply.github.com>
Date: Mon, 5 Jan 2026 22:57:38 -0800
Subject: [PATCH 3/9] fix: Show [+] button only at top, remove insertion points
 between tasks

---
 src/components/Timeline.tsx | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
index c17da2b..70cfa49 100644
--- a/src/components/Timeline.tsx
+++ b/src/components/Timeline.tsx
@@ -137,7 +137,7 @@ export const Timeline = () => {
           />
         )}
 
-        {/* Tasks with time labels and insertion points */}
+        {/* Tasks with time labels */}
         {tasks.length === 0 ? (
           <Box
             sx={{
@@ -184,19 +184,6 @@ export const Timeline = () => {
                   />
                 </Box>
               </Box>
-
-              {/* Insertion point after this task */}
-              {activeInsertionPoint === task.id ? (
-                <InlineTaskForm
-                  onSubmit={(title, duration) => handleInsertTask(task.id, title, duration)}
-                  onCancel={handleCancelInsert}
-                />
-              ) : (
-                <InsertionPoint
-                  onClick={() => setActiveInsertionPoint(task.id)}
-                  isActive={activeInsertionPoint === task.id}
-                />
-              )}
             </Box>
           ))
         )}
@@ -214,7 +201,7 @@ export const Timeline = () => {
       {tasks.length > 0 && (
         <Box sx={{ mt: 3, textAlign: 'center' }}>
           <Typography variant="body2" color="text.secondary" sx={{ fontSize: '12px' }}>
-            Phase 3 Complete: UI Components ready! Drag-and-drop coming in Phase 4.
+            Tip: Create tasks with [+] at top, then drag to reorder
           </Typography>
         </Box>
       )}

From c0fb3f282968cc55f55f886b11f485eec20e311c Mon Sep 17 00:00:00 2001
From: Dang Tran <91554483+BrooklynD23@users.noreply.github.com>
Date: Mon, 5 Jan 2026 23:08:15 -0800
Subject: [PATCH 4/9] feat: Add 15-min rounding, smart slot finding respecting
 locked tasks, highlight new tasks

- Duration now rounds up to nearest 15 minutes with helper text
- New tasks find available slots without moving locked tasks
- Locked tasks keep their fixed time positions
- New tasks show green highlight bar on right side for 3 seconds
- recalculateTaskTimes now respects locked tasks' positions
---
 src/components/InlineTaskForm.tsx |  43 +++++---
 src/components/TaskBlock.tsx      |  50 ++++++++-
 src/store/taskStore.ts            |  43 +++++---
 src/types/index.ts                |   1 +
 src/utils/storage.ts              |   6 +-
 src/utils/timeCalculations.ts     | 170 +++++++++++++++++++++++++++++-
 6 files changed, 279 insertions(+), 34 deletions(-)

diff --git a/src/components/InlineTaskForm.tsx b/src/components/InlineTaskForm.tsx
index 885b726..91e1c3a 100644
--- a/src/components/InlineTaskForm.tsx
+++ b/src/components/InlineTaskForm.tsx
@@ -1,5 +1,6 @@
-import { Box, TextField, Button } from '@mui/material'
+import { Box, TextField, Button, Typography } from '@mui/material'
 import { useState, useEffect, useRef } from 'react'
+import { roundDurationUp } from '../utils/timeCalculations'
 
 interface InlineTaskFormProps {
   onSubmit: (title: string, durationMinutes: number) => void
@@ -13,6 +14,7 @@ interface InlineTaskFormProps {
  * - Autofocus on title input
  * - Enter to submit, Escape to cancel
  * - Default duration: 30 minutes
+ * - Duration is rounded up to nearest 15 minutes
  */
 export const InlineTaskForm = ({
   onSubmit,
@@ -22,6 +24,9 @@ export const InlineTaskForm = ({
   const [duration, setDuration] = useState(30)
   const titleInputRef = useRef<HTMLInputElement>(null)
 
+  // Calculate rounded duration for display
+  const roundedDuration = roundDurationUp(duration)
+
   // Autofocus on mount
   useEffect(() => {
     titleInputRef.current?.focus()
@@ -38,7 +43,9 @@ export const InlineTaskForm = ({
       return // Minimum 1 minute
     }
 
-    onSubmit(title.trim(), duration)
+    // Round up duration to nearest 15 minutes before submitting
+    const finalDuration = roundDurationUp(duration)
+    onSubmit(title.trim(), finalDuration)
     setTitle('')
     setDuration(30)
   }
@@ -73,19 +80,25 @@ export const InlineTaskForm = ({
         sx={{ mb: 1.5 }}
       />
 
-      <TextField
-        fullWidth
-        size="small"
-        type="number"
-        label="Duration (minutes)"
-        value={duration}
-        onChange={(e) => setDuration(parseInt(e.target.value) || 0)}
-        inputProps={{
-          min: 1,
-          step: 1,
-        }}
-        sx={{ mb: 1.5 }}
-      />
+      <Box sx={{ mb: 1.5 }}>
+        <TextField
+          fullWidth
+          size="small"
+          type="number"
+          label="Duration (minutes)"
+          value={duration}
+          onChange={(e) => setDuration(parseInt(e.target.value) || 0)}
+          inputProps={{
+            min: 1,
+            step: 15,
+          }}
+          helperText={
+            duration !== roundedDuration
+              ? `Rounds up to ${roundedDuration} min (15-min intervals)`
+              : 'Duration in 15-minute intervals'
+          }
+        />
+      </Box>
 
       <Box sx={{ display: 'flex', gap: 1 }}>
         <Button
diff --git a/src/components/TaskBlock.tsx b/src/components/TaskBlock.tsx
index 5b2365c..d7c71dd 100644
--- a/src/components/TaskBlock.tsx
+++ b/src/components/TaskBlock.tsx
@@ -41,8 +41,20 @@ export const TaskBlock = ({
   const [isHovered, setIsHovered] = useState(false)
   const [isBeingDragged, setIsBeingDragged] = useState(false)
   const [isDropTarget, setIsDropTarget] = useState(false)
+  const [showNewHighlight, setShowNewHighlight] = useState(task.isNew ?? false)
   const cardRef = useRef<HTMLDivElement>(null)
 
+  // Clear the highlight after animation
+  useEffect(() => {
+    if (task.isNew) {
+      setShowNewHighlight(true)
+      const timer = setTimeout(() => {
+        setShowNewHighlight(false)
+      }, 3000) // Highlight for 3 seconds
+      return () => clearTimeout(timer)
+    }
+  }, [task.isNew])
+
   // Calculate height based on duration (1 minute = 1.33px)
   const height = Math.max(50, task.durationMinutes * 1.33)
 
@@ -116,16 +128,30 @@ export const TaskBlock = ({
         cursor: task.isLocked ? 'not-allowed' : isBeingDragged ? 'grabbing' : 'grab',
         opacity: isBeingDragged ? 0.85 : isDragging ? 0.85 : isPreview ? 0.6 : 1,
         transition: 'box-shadow 150ms ease, opacity 150ms ease, border 150ms ease',
-        boxShadow: isBeingDragged ? '0 4px 12px rgba(0,0,0,0.15)' : 'none',
+        boxShadow: isBeingDragged
+          ? '0 4px 12px rgba(0,0,0,0.15)'
+          : showNewHighlight
+          ? '0 0 0 3px #4CAF50, 0 4px 12px rgba(76, 175, 80, 0.3)'
+          : 'none',
         '&:hover': {
           boxShadow: task.isLocked || isBeingDragged ? 'none' : '0 2px 8px rgba(0,0,0,0.1)',
         },
         // Overlapping pulse animation
-        animation: task.isOverlapping ? 'pulse 1.5s ease-in-out infinite' : 'none',
+        animation: task.isOverlapping
+          ? 'pulse 1.5s ease-in-out infinite'
+          : showNewHighlight
+          ? 'newTaskGlow 0.5s ease-out'
+          : 'none',
         '@keyframes pulse': {
           '0%, 100%': { borderColor: colors.overlapBorder, opacity: 1 },
           '50%': { borderColor: colors.overlapBorder, opacity: 0.6 },
         },
+        '@keyframes newTaskGlow': {
+          '0%': { boxShadow: '0 0 0 6px #4CAF50, 0 8px 24px rgba(76, 175, 80, 0.5)' },
+          '100%': { boxShadow: '0 0 0 3px #4CAF50, 0 4px 12px rgba(76, 175, 80, 0.3)' },
+        },
+        // Overflow hidden for the highlight bar
+        overflow: 'hidden',
       }}
     >
       {/* Task Title */}
@@ -197,6 +223,26 @@ export const TaskBlock = ({
           )}
         </IconButton>
       </Box>
+
+      {/* New task highlight bar on right side */}
+      {showNewHighlight && (
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            width: '4px',
+            backgroundColor: '#4CAF50',
+            borderRadius: '0 8px 8px 0',
+            animation: 'highlightPulse 1s ease-in-out infinite',
+            '@keyframes highlightPulse': {
+              '0%, 100%': { opacity: 1 },
+              '50%': { opacity: 0.5 },
+            },
+          }}
+        />
+      )}
     </Card>
   )
 }
diff --git a/src/store/taskStore.ts b/src/store/taskStore.ts
index 683a784..455b3cd 100644
--- a/src/store/taskStore.ts
+++ b/src/store/taskStore.ts
@@ -4,7 +4,7 @@ import {
   saveTasksToStorage,
   loadTasksFromStorage,
 } from '../utils/storage'
-import { recalculateTaskTimes } from '../utils/timeCalculations'
+import { recalculateTaskTimes, findNextAvailableSlot } from '../utils/timeCalculations'
 import {
   executeSwap,
   executePush,
@@ -78,29 +78,45 @@ export const useTaskStore = create<TaskStore>((set, get) => ({
   // Task Operations
 
   /**
-   * Insert a new task after a specific task (or at beginning if null)
+   * Insert a new task - finds the next available slot that respects locked tasks
+   * The afterTaskId parameter is now used as a hint, but the actual insertion
+   * position is calculated based on available slots
    */
   insertTask: (afterTaskId, taskData) => {
-    const currentTaskCount = get().tasks.length
+    const currentTasks = get().tasks
+    const currentTaskCount = currentTasks.length
+
+    // Find the next available slot for the new task
+    const { slotStart, insertAfterTaskId } = findNextAvailableSlot(
+      currentTasks,
+      taskData.durationMinutes
+    )
+
     const newTask: Task = {
       ...taskData,
       id: crypto.randomUUID(),
       createdAt: new Date(),
       order: 0, // Will be recalculated
-      startTime: new Date(), // Will be recalculated
-      color: taskColors[currentTaskCount % taskColors.length], // Assign color based on current count
-    }
+      startTime: slotStart, // Set to the found slot
+      color: taskColors[currentTaskCount % taskColors.length],
+      isNew: true, // Flag for highlighting - will be removed after render
+    } as Task & { isNew?: boolean }
 
     let updatedTasks: Task[]
 
-    if (afterTaskId === null) {
+    if (insertAfterTaskId === null) {
       // Insert at beginning
-      updatedTasks = [newTask, ...get().tasks]
+      updatedTasks = [newTask, ...currentTasks]
     } else {
-      // Insert after specific task
-      const afterIndex = get().tasks.findIndex((t) => t.id === afterTaskId)
-      updatedTasks = [...get().tasks]
-      updatedTasks.splice(afterIndex + 1, 0, newTask)
+      // Insert after the task that ends before the slot
+      const afterIndex = currentTasks.findIndex((t) => t.id === insertAfterTaskId)
+      if (afterIndex >= 0) {
+        updatedTasks = [...currentTasks]
+        updatedTasks.splice(afterIndex + 1, 0, newTask)
+      } else {
+        // Fallback: add at end
+        updatedTasks = [...currentTasks, newTask]
+      }
     }
 
     const reordered = reorderTasks(updatedTasks)
@@ -109,6 +125,9 @@ export const useTaskStore = create<TaskStore>((set, get) => ({
 
     set({ tasks: tasksWithOverlaps })
     saveTasksToStorage(tasksWithOverlaps)
+
+    // Return the new task ID for highlighting
+    return newTask.id
   },
 
   /**
diff --git a/src/types/index.ts b/src/types/index.ts
index 7b3b3fc..b6eb381 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -11,6 +11,7 @@ export interface Task {
   isOverlapping: boolean // Flagged when overlapping with locked tasks
   createdAt: Date // Metadata for sorting
   color: string // Background color (assigned on creation, persists through reordering)
+  isNew?: boolean // Temporary flag for highlighting newly created tasks
 }
 
 /**
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
index 4b6aaa9..8dc452d 100644
--- a/src/utils/storage.ts
+++ b/src/utils/storage.ts
@@ -6,10 +6,14 @@ const STORAGE_KEY = 'time-block-app-tasks'
 /**
  * Save tasks to localStorage
  * Handles Date serialization by converting to ISO strings
+ * Removes temporary fields like `isNew` before saving
  */
 export const saveTasksToStorage = (tasks: Task[]): void => {
   try {
-    const serialized = JSON.stringify(tasks, (key, value) => {
+    // Remove temporary fields before saving
+    const tasksToSave = tasks.map(({ isNew, ...task }) => task)
+
+    const serialized = JSON.stringify(tasksToSave, (key, value) => {
       // Convert Date objects to ISO strings for storage
       if (value instanceof Date) {
         return value.toISOString()
diff --git a/src/utils/timeCalculations.ts b/src/utils/timeCalculations.ts
index f05fd9f..c561dd5 100644
--- a/src/utils/timeCalculations.ts
+++ b/src/utils/timeCalculations.ts
@@ -21,14 +21,32 @@ export const roundTimeUp = (date: Date): Date => {
   return newDate
 }
 
+/**
+ * Round duration up to the nearest 15 minutes
+ * Examples: 1 → 15, 15 → 15, 16 → 30, 45 → 45, 50 → 60
+ */
+export const roundDurationUp = (minutes: number): number => {
+  if (minutes <= 0) return 15 // Minimum 15 minutes
+  const remainder = minutes % 15
+  if (remainder === 0) return minutes
+  return minutes + (15 - remainder)
+}
+
 /**
  * Recalculate all task start times based on their order
- * First task starts at 8:00 AM, subsequent tasks follow sequentially
+ * RESPECTS LOCKED TASKS - they keep their start times
+ * Unlocked tasks are scheduled around locked tasks
  */
 export const recalculateTaskTimes = (tasks: Task[]): Task[] => {
   // Sort by order
   const sorted = [...tasks].sort((a, b) => a.order - b.order)
 
+  // Get all locked tasks with their fixed times
+  const lockedTasks = sorted.filter((t) => t.isLocked)
+
+  // If no tasks, return empty
+  if (sorted.length === 0) return []
+
   // Start at 8:00 AM
   const startOfDay = new Date()
   startOfDay.setHours(8, 0, 0, 0)
@@ -36,20 +54,164 @@ export const recalculateTaskTimes = (tasks: Task[]): Task[] => {
   let currentTime = new Date(startOfDay)
 
   return sorted.map((task) => {
+    // If task is locked, keep its original time
+    if (task.isLocked) {
+      // Update currentTime to after this locked task
+      const taskEnd = new Date(
+        task.startTime.getTime() + task.durationMinutes * 60000
+      )
+      if (taskEnd > currentTime) {
+        currentTime = new Date(taskEnd)
+      }
+      return task
+    }
+
+    // For unlocked tasks, find the next available slot
+    // Check if current slot overlaps with any locked task
+    let proposedStart = new Date(currentTime)
+    let foundSlot = false
+
+    while (!foundSlot) {
+      const proposedEnd = new Date(
+        proposedStart.getTime() + task.durationMinutes * 60000
+      )
+
+      // Check for conflicts with locked tasks
+      const hasConflict = lockedTasks.some((locked) => {
+        const lockedEnd = new Date(
+          locked.startTime.getTime() + locked.durationMinutes * 60000
+        )
+        // Check overlap: (start1 < end2) && (end1 > start2)
+        return proposedStart < lockedEnd && proposedEnd > locked.startTime
+      })
+
+      if (hasConflict) {
+        // Find the end of the conflicting locked task and try after it
+        const conflictingLocked = lockedTasks.find((locked) => {
+          const lockedEnd = new Date(
+            locked.startTime.getTime() + locked.durationMinutes * 60000
+          )
+          return proposedStart < lockedEnd && proposedEnd > locked.startTime
+        })
+        if (conflictingLocked) {
+          proposedStart = new Date(
+            conflictingLocked.startTime.getTime() +
+              conflictingLocked.durationMinutes * 60000
+          )
+        }
+      } else {
+        foundSlot = true
+      }
+    }
+
     const updatedTask = {
       ...task,
-      startTime: new Date(currentTime),
+      startTime: new Date(proposedStart),
     }
 
-    // Move current time forward by task duration
+    // Move current time forward
     currentTime = new Date(
-      currentTime.getTime() + task.durationMinutes * 60000
+      proposedStart.getTime() + task.durationMinutes * 60000
     )
 
     return updatedTask
   })
 }
 
+/**
+ * Find the next available time slot for a new task
+ * Respects locked tasks by not overlapping with them
+ */
+export const findNextAvailableSlot = (
+  tasks: Task[],
+  durationMinutes: number
+): { slotStart: Date; insertAfterTaskId: string | null } => {
+  // Start at 8:00 AM
+  const startOfDay = new Date()
+  startOfDay.setHours(8, 0, 0, 0)
+
+  if (tasks.length === 0) {
+    return { slotStart: startOfDay, insertAfterTaskId: null }
+  }
+
+  // Sort tasks by start time
+  const sortedByTime = [...tasks].sort(
+    (a, b) => a.startTime.getTime() - b.startTime.getTime()
+  )
+
+  // Get locked tasks for conflict checking
+  const lockedTasks = tasks.filter((t) => t.isLocked)
+
+  // Try to find a slot starting from 8 AM
+  let proposedStart = new Date(startOfDay)
+  const endOfDay = new Date()
+  endOfDay.setHours(23, 59, 0, 0)
+
+  while (proposedStart < endOfDay) {
+    const proposedEnd = new Date(
+      proposedStart.getTime() + durationMinutes * 60000
+    )
+
+    // Check for conflicts with locked tasks only
+    const hasLockedConflict = lockedTasks.some((locked) => {
+      const lockedEnd = new Date(
+        locked.startTime.getTime() + locked.durationMinutes * 60000
+      )
+      return proposedStart < lockedEnd && proposedEnd > locked.startTime
+    })
+
+    if (!hasLockedConflict) {
+      // Found a valid slot! Now find which task to insert after
+      // Find the task that ends right before or at this slot
+      let insertAfterTaskId: string | null = null
+
+      for (let i = sortedByTime.length - 1; i >= 0; i--) {
+        const task = sortedByTime[i]
+        const taskEnd = new Date(
+          task.startTime.getTime() + task.durationMinutes * 60000
+        )
+        if (taskEnd <= proposedStart) {
+          insertAfterTaskId = task.id
+          break
+        }
+      }
+
+      // If slot is before all tasks, insert at beginning
+      if (!insertAfterTaskId && proposedStart < sortedByTime[0].startTime) {
+        insertAfterTaskId = null
+      }
+
+      return { slotStart: proposedStart, insertAfterTaskId }
+    }
+
+    // Move to after the conflicting locked task
+    const conflictingLocked = lockedTasks.find((locked) => {
+      const lockedEnd = new Date(
+        locked.startTime.getTime() + locked.durationMinutes * 60000
+      )
+      return proposedStart < lockedEnd && proposedEnd > locked.startTime
+    })
+
+    if (conflictingLocked) {
+      proposedStart = new Date(
+        conflictingLocked.startTime.getTime() +
+          conflictingLocked.durationMinutes * 60000
+      )
+    } else {
+      // Move forward by 15 minutes if no specific conflict found
+      proposedStart = new Date(proposedStart.getTime() + 15 * 60000)
+    }
+  }
+
+  // If no slot found during the day, add after the last task
+  const lastTask = sortedByTime[sortedByTime.length - 1]
+  const lastTaskEnd = new Date(
+    lastTask.startTime.getTime() + lastTask.durationMinutes * 60000
+  )
+
+  return { slotStart: lastTaskEnd, insertAfterTaskId: lastTask.id }
+}
+
 /**
  * Calculate the visible time range for the timeline
  * Includes all tasks plus a ±1 hour buffer

From b90f0d23893be9b93ff212b224dba2481fbc1440 Mon Sep 17 00:00:00 2001
From: Dang Tran <91554483+BrooklynD23@users.noreply.github.com>
Date: Mon, 5 Jan 2026 23:12:42 -0800
Subject: [PATCH 5/9] feat: Add delete button on task hover (top-right corner)

---
 src/components/TaskBlock.tsx | 22 ++++++++++++++++++++++
 src/components/Timeline.tsx  |  2 ++
 2 files changed, 24 insertions(+)

diff --git a/src/components/TaskBlock.tsx b/src/components/TaskBlock.tsx
index d7c71dd..7ae3b6f 100644
--- a/src/components/TaskBlock.tsx
+++ b/src/components/TaskBlock.tsx
@@ -2,6 +2,7 @@ import { Card, Typography, IconButton, Box } from '@mui/material'
 import LockIcon from '@mui/icons-material/Lock'
 import LockOpenIcon from '@mui/icons-material/LockOpen'
 import WarningIcon from '@mui/icons-material/Warning'
+import DeleteIcon from '@mui/icons-material/Delete'
 import { Task } from '../types'
 import { formatDuration } from '../utils/timeCalculations'
 import { colors } from '../theme/theme'
@@ -12,6 +13,7 @@ interface TaskBlockProps {
   task: Task
   index: number
   onToggleLock: (taskId: string) => void
+  onDelete: (taskId: string) => void
   onDragStart?: (taskId: string) => void
   onDragEnd?: () => void
   onDrop?: (draggedTaskId: string, targetTaskId: string, dropY: number) => void
@@ -32,6 +34,7 @@ export const TaskBlock = ({
   task,
   index,
   onToggleLock,
+  onDelete,
   onDragStart,
   onDragEnd,
   onDrop,
@@ -200,6 +203,25 @@ export const TaskBlock = ({
           />
         )}
 
+        {/* Delete Icon - appears on hover */}
+        <IconButton
+          size="small"
+          onClick={(e) => {
+            e.stopPropagation()
+            onDelete(task.id)
+          }}
+          sx={{
+            opacity: isHovered ? 1 : 0,
+            transition: 'opacity 150ms ease',
+            padding: '4px',
+            '&:hover': {
+              backgroundColor: 'rgba(239, 83, 80, 0.1)',
+            },
+          }}
+        >
+          <DeleteIcon sx={{ fontSize: '18px', color: '#EF5350' }} />
+        </IconButton>
+
         {/* Lock/Unlock Icon */}
         <IconButton
           size="small"
diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
index 70cfa49..4c2899f 100644
--- a/src/components/Timeline.tsx
+++ b/src/components/Timeline.tsx
@@ -20,6 +20,7 @@ import { getDragAction } from '../utils/dragLogic'
 export const Timeline = () => {
   const tasks = useTaskStore((state) => state.tasks)
   const insertTask = useTaskStore((state) => state.insertTask)
+  const deleteTask = useTaskStore((state) => state.deleteTask)
   const toggleLock = useTaskStore((state) => state.toggleLock)
   const swapTasks = useTaskStore((state) => state.swapTasks)
   const pushTask = useTaskStore((state) => state.pushTask)
@@ -177,6 +178,7 @@ export const Timeline = () => {
                     task={task}
                     index={index}
                     onToggleLock={toggleLock}
+                    onDelete={deleteTask}
                     onDragStart={handleDragStart}
                     onDragEnd={handleDragEnd}
                     onDrop={handleDrop}

From bdd29dda7b7a272aa84dfe973197817fcfdaf198 Mon Sep 17 00:00:00 2001
From: Dang Tran <91554483+BrooklynD23@users.noreply.github.com>
Date: Mon, 5 Jan 2026 23:34:32 -0800
Subject: [PATCH 6/9] feat: implement insertion logic UX and tests

- Implement Phase 4 insertion logic in Timeline with inline task forms between tasks and at start
- Update InlineTaskForm to show dynamic rounded 15-min duration indicator and accept any numeric input without browser validation popups
- Redesign InsertionPoint as a minimal hover-only insert affordance with subtle guide line and smaller button
- Add Vitest test setup and insertionLogic.test.ts covering insertion, locking, ordering, overlap detection, and localStorage persistence
- Configure Vite test environment, add test scripts, and keep all existing tests passing
---
 package-lock.json                 | 1820 ++++++++++++++++++++++++++++-
 package.json                      |   10 +-
 src/components/InlineTaskForm.tsx |   47 +-
 src/components/InsertionPoint.tsx |   76 +-
 src/components/Timeline.tsx       |   61 +-
 src/index.css                     |   49 +
 src/test/insertionLogic.test.ts   |  611 ++++++++++
 src/test/setup.ts                 |   14 +
 vite.config.ts                    |    7 +
 9 files changed, 2639 insertions(+), 56 deletions(-)
 create mode 100644 src/test/insertionLogic.test.ts
 create mode 100644 src/test/setup.ts

diff --git a/package-lock.json b/package-lock.json
index a33e651..ac38341 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,8 @@
         "zustand": "^5.0.9"
       },
       "devDependencies": {
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.1",
         "@types/react": "^18.2.43",
         "@types/react-dom": "^18.2.17",
         "@typescript-eslint/eslint-plugin": "^6.14.0",
@@ -27,10 +29,81 @@
         "eslint": "^8.55.0",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.5",
+        "jsdom": "^27.4.0",
         "typescript": "^5.2.2",
-        "vite": "^5.0.8"
+        "vite": "^5.0.8",
+        "vitest": "^4.0.16"
       }
     },
+    "node_modules/@acemir/cssom": {
+      "version": "0.9.30",
+      "resolved": "https://registry.npmjs.org/@acemir/cssom/-/cssom-0.9.30.tgz",
+      "integrity": "sha512-9CnlMCI0LmCIq0olalQqdWrJHPzm0/tw3gzOA9zJSgvFX7Xau3D24mAGa4BtwxwY69nsuJW6kQqqCzf/mEcQgg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.4.tgz",
+      "integrity": "sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-4.1.1.tgz",
+      "integrity": "sha512-B0Hv6G3gWGMn0xKJ0txEi/jM5iFpT3MfDxmhZFb4W047GvytCf1DHQ1D69W3zHI4yWe2aTZAA0JnbMZ7Xc8DuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^2.1.4",
+        "@csstools/css-color-parser": "^3.1.0",
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4",
+        "lru-cache": "^11.2.4"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color/node_modules/lru-cache": {
+      "version": "11.2.4",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.4.tgz",
+      "integrity": "sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "6.7.6",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-6.7.6.tgz",
+      "integrity": "sha512-hBaJER6A9MpdG3WgdlOolHmbOYvSk46y7IQN/1+iqiCuUu6iWdQrs9DGKF8ocqsEqWujWf/V7b7vaDgiUmIvUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/nwsapi": "^2.3.9",
+        "bidi-js": "^1.0.3",
+        "css-tree": "^3.1.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "lru-cache": "^11.2.4"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector/node_modules/lru-cache": {
+      "version": "11.2.4",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.4.tgz",
+      "integrity": "sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@asamuzakjp/nwsapi": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
+      "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@atlaskit/atlassian-context": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/@atlaskit/atlassian-context/-/atlassian-context-0.6.0.tgz",
@@ -419,6 +492,143 @@
         "react": ">= 16.12.0"
       }
     },
+    "node_modules/@csstools/color-helpers": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
+      "integrity": "sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-2.1.4.tgz",
+      "integrity": "sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-3.1.0.tgz",
+      "integrity": "sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^5.1.0",
+        "@csstools/css-calc": "^2.1.4"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz",
+      "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.0.22",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.0.22.tgz",
+      "integrity": "sha512-qBcx6zYlhleiFfdtzkRgwNC7VVoAwfK76Vmsw5t+PbvtdknO9StgRk7ROvq9so1iqbdW4uLIDAsXRsTfUrIoOw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz",
+      "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.13.5",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
@@ -831,6 +1041,23 @@
         "node": ">=12"
       }
     },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.2.tgz",
+      "integrity": "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@esbuild/netbsd-x64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
@@ -847,6 +1074,23 @@
         "node": ">=12"
       }
     },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.2.tgz",
+      "integrity": "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@esbuild/openbsd-x64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
@@ -863,6 +1107,23 @@
         "node": ">=12"
       }
     },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.2.tgz",
+      "integrity": "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@esbuild/sunos-x64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
@@ -1008,6 +1269,24 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@exodus/bytes": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.8.0.tgz",
+      "integrity": "sha512-8JPn18Bcp8Uo1T82gR8lh2guEOa5KKU/IEKvvdp0sgmi7coPBWf1Doi1EXsGZb2ehc8ym/StJCjffYV+ne7sXQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@exodus/crypto": "^1.0.0-rc.4"
+      },
+      "peerDependenciesMeta": {
+        "@exodus/crypto": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -1668,6 +1947,13 @@
         "win32"
       ]
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@statsig/client-core": {
       "version": "3.31.0",
       "resolved": "https://registry.npmjs.org/@statsig/client-core/-/client-core-3.31.0.tgz",
@@ -1681,6 +1967,89 @@
         "@statsig/client-core": "3.31.0"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
+      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
+      "integrity": "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@adobe/css-tools": "^4.4.0",
+        "aria-query": "^5.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "picocolors": "^1.1.1",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/react": {
+      "version": "16.3.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.1.tgz",
+      "integrity": "sha512-gr4KtAWqIOQoucWYD/f6ki+j5chXfcPc74Col/6poTyqTmn7zRmodWahWRCp8tYd+GMqBonw6hstNzqjbs6gjw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": "^10.0.0",
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1722,6 +2091,24 @@
         "@babel/types": "^7.28.2"
       }
     },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1759,6 +2146,7 @@
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "dev": true,
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
@@ -1994,6 +2382,90 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
       }
     },
+    "node_modules/@vitest/expect": {
+      "version": "4.0.16",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.16.tgz",
+      "integrity": "sha512-eshqULT2It7McaJkQGLkPjPjNph+uevROGuIMJdG3V+0BSR2w9u6J9Lwu+E8cK5TETlfou8GRijhafIMhXsimA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.0.16",
+        "@vitest/utils": "4.0.16",
+        "chai": "^6.2.1",
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.0.16",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.16.tgz",
+      "integrity": "sha512-eNCYNsSty9xJKi/UdVD8Ou16alu7AYiS2fCPRs0b1OdhJiV89buAXQLpTbe+X8V9L6qrs9CqyvU7OaAopJYPsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "4.0.16",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.16.tgz",
+      "integrity": "sha512-VWEDm5Wv9xEo80ctjORcTQRJ539EGPB3Pb9ApvVRAY1U/WkHXmmYISqU5E79uCwcW7xYUV38gwZD+RV755fu3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.0.16",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "4.0.16",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.16.tgz",
+      "integrity": "sha512-sf6NcrYhYBsSYefxnry+DR8n3UV4xWZwWxYbCJUt2YdvtqzSPR7VfGrY0zsv090DAbjFZsi7ZaMi1KnSRyK1XA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.0.16",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "4.0.16",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.16.tgz",
+      "integrity": "sha512-4jIOWjKP0ZUaEmJm00E0cOBLU+5WE0BpeNr3XN6TEF05ltro6NJqHWxXD0kA8/Zc8Nh23AT8WQxwNG+WeROupw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "4.0.16",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.16.tgz",
+      "integrity": "sha512-h8z9yYhV3e1LEfaQ3zdypIrnAg/9hguReGZoS7Gl0aBG5xgA410zBqECqmaF/+RkTggRsfnzc1XaAHA6bmUufA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.0.16",
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -2016,6 +2488,16 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -2062,6 +2544,16 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -2071,6 +2563,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/babel-plugin-macros": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
@@ -2100,6 +2602,16 @@
         "baseline-browser-mapping": "dist/cli.js"
       }
     },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/bind-event-listener": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bind-event-listener/-/bind-event-listener-3.0.0.tgz",
@@ -2188,6 +2700,16 @@
         }
       ]
     },
+    "node_modules/chai": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -2271,10 +2793,71 @@
         "node": ">= 8"
       }
     },
-    "node_modules/csstype": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
-      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="
+    "node_modules/css-tree": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.1.0.tgz",
+      "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.12.2",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cssstyle": {
+      "version": "5.3.7",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-5.3.7.tgz",
+      "integrity": "sha512-7D2EPVltRrsTkhpQmksIu+LxeWAIEk6wRDMJ1qljlv+CKHJM+cJLlfhWIzNA44eAsHXSNe3+vO6DW1yCYx8SuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^4.1.1",
+        "@csstools/css-syntax-patches-for-csstree": "^1.0.21",
+        "css-tree": "^3.1.0",
+        "lru-cache": "^11.2.4"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/cssstyle/node_modules/lru-cache": {
+      "version": "11.2.4",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.4.tgz",
+      "integrity": "sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="
+    },
+    "node_modules/data-urls": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-6.0.0.tgz",
+      "integrity": "sha512-BnBS08aLUM+DKamupXs3w2tJJoqU+AkaE/+6vQxi/G/DPmIZFJJp9Dkb1kM03AZx8ADehDUZgsNxju3mPXZYIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^15.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
     },
     "node_modules/debug": {
       "version": "4.4.3",
@@ -2292,12 +2875,29 @@
         }
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -2322,6 +2922,13 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/dom-helpers": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
@@ -2337,6 +2944,19 @@
       "integrity": "sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==",
       "dev": true
     },
+    "node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
@@ -2345,6 +2965,13 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "node_modules/es-module-lexer": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
+      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/esbuild": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -2581,6 +3208,16 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -2595,6 +3232,16 @@
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
     },
+    "node_modules/expect-type": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
+      "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2881,6 +3528,47 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/html-encoding-sniffer": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
+      "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.6.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2914,6 +3602,16 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -2989,6 +3687,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -3012,6 +3717,47 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsdom": {
+      "version": "27.4.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-27.4.0.tgz",
+      "integrity": "sha512-mjzqwWRD9Y1J1KUi7W97Gja1bwOOM5Ug0EZ6UDK3xS7j7mndrkwozHtSblfomlzyB4NepioNt+B2sOSzczVgtQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@acemir/cssom": "^0.9.28",
+        "@asamuzakjp/dom-selector": "^6.7.6",
+        "@exodus/bytes": "^1.6.0",
+        "cssstyle": "^5.3.4",
+        "data-urls": "^6.0.0",
+        "decimal.js": "^10.6.0",
+        "html-encoding-sniffer": "^6.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.6",
+        "is-potential-custom-element-name": "^1.0.1",
+        "parse5": "^8.0.0",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^6.0.0",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^8.0.0",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^15.1.0",
+        "ws": "^8.18.3",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
@@ -3126,6 +3872,33 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
+      "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3148,6 +3921,16 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/minimatch": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
@@ -3206,6 +3989,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/obug": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
+      "integrity": "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT"
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -3290,6 +4084,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parse5": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz",
+      "integrity": "sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -3330,6 +4137,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -3384,6 +4198,41 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/pretty-format/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -3507,6 +4356,30 @@
         }
       }
     },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -3624,6 +4497,19 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -3665,6 +4551,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -3691,6 +4584,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/std-env": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
+      "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -3703,6 +4610,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -3743,6 +4663,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -3754,6 +4681,102 @@
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
       "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
     },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.2.tgz",
+      "integrity": "sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/tinyrainbow": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.0.3.tgz",
+      "integrity": "sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tldts": {
+      "version": "7.0.19",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.0.19.tgz",
+      "integrity": "sha512-8PWx8tvC4jDB39BQw1m4x8y5MH1BcQ5xHeL2n7UVFulMPH/3Q0uiamahFJ3lXA0zO2SUyRXuVVbWSDmstlt9YA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^7.0.19"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "7.0.19",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.0.19.tgz",
+      "integrity": "sha512-lJX2dEWx0SGH4O6p+7FPwYmJ/bu1JbcGJ8RLaG9b7liIgZ85itUVEPbMtWRVrde/0fnDPEPHW10ZsKW3kVsE9A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -3766,6 +4789,32 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tough-cookie": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.0.tgz",
+      "integrity": "sha512-kXuRi1mtaKMrsLUxz3sQYvVl37B0Ns6MzfrtV5DvJceE9bPyspOqk9xxv7XbZWcfLWbFmm997vl83qUWVJA64w==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^7.0.5"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.3.tgz",
@@ -3920,12 +4969,705 @@
         }
       }
     },
-    "node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "dependencies": {
+    "node_modules/vitest": {
+      "version": "4.0.16",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.16.tgz",
+      "integrity": "sha512-E4t7DJ9pESL6E3I8nFjPa4xGUd3PmiWDLsDztS2qXSJWfHtbQnwAWylaBvSNY48I3vr8PTqIZlyK8TE3V3CA4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/expect": "4.0.16",
+        "@vitest/mocker": "4.0.16",
+        "@vitest/pretty-format": "4.0.16",
+        "@vitest/runner": "4.0.16",
+        "@vitest/snapshot": "4.0.16",
+        "@vitest/spy": "4.0.16",
+        "@vitest/utils": "4.0.16",
+        "es-module-lexer": "^1.7.0",
+        "expect-type": "^1.2.2",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^3.10.0",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.0.3",
+        "vite": "^6.0.0 || ^7.0.0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.0.16",
+        "@vitest/browser-preview": "4.0.16",
+        "@vitest/browser-webdriverio": "4.0.16",
+        "@vitest/ui": "4.0.16",
+        "happy-dom": "*",
+        "jsdom": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz",
+      "integrity": "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/android-arm": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.2.tgz",
+      "integrity": "sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/android-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.2.tgz",
+      "integrity": "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/android-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.2.tgz",
+      "integrity": "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.2.tgz",
+      "integrity": "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/darwin-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.2.tgz",
+      "integrity": "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.2.tgz",
+      "integrity": "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.2.tgz",
+      "integrity": "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/linux-arm": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.2.tgz",
+      "integrity": "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/linux-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.2.tgz",
+      "integrity": "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/linux-ia32": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.2.tgz",
+      "integrity": "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/linux-loong64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.2.tgz",
+      "integrity": "sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.2.tgz",
+      "integrity": "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.2.tgz",
+      "integrity": "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.2.tgz",
+      "integrity": "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/linux-s390x": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.2.tgz",
+      "integrity": "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/linux-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.2.tgz",
+      "integrity": "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.2.tgz",
+      "integrity": "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.2.tgz",
+      "integrity": "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/sunos-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.2.tgz",
+      "integrity": "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/win32-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.2.tgz",
+      "integrity": "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/win32-ia32": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.2.tgz",
+      "integrity": "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/win32-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.2.tgz",
+      "integrity": "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@vitest/mocker": {
+      "version": "4.0.16",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.16.tgz",
+      "integrity": "sha512-yb6k4AZxJTB+q9ycAvsoxGn+j/po0UaPgajllBgt1PzoMAAmJGYFdDk0uCcRcxb3BrME34I6u8gHZTQlkqSZpg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "4.0.16",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vitest/node_modules/esbuild": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz",
+      "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.27.2",
+        "@esbuild/android-arm": "0.27.2",
+        "@esbuild/android-arm64": "0.27.2",
+        "@esbuild/android-x64": "0.27.2",
+        "@esbuild/darwin-arm64": "0.27.2",
+        "@esbuild/darwin-x64": "0.27.2",
+        "@esbuild/freebsd-arm64": "0.27.2",
+        "@esbuild/freebsd-x64": "0.27.2",
+        "@esbuild/linux-arm": "0.27.2",
+        "@esbuild/linux-arm64": "0.27.2",
+        "@esbuild/linux-ia32": "0.27.2",
+        "@esbuild/linux-loong64": "0.27.2",
+        "@esbuild/linux-mips64el": "0.27.2",
+        "@esbuild/linux-ppc64": "0.27.2",
+        "@esbuild/linux-riscv64": "0.27.2",
+        "@esbuild/linux-s390x": "0.27.2",
+        "@esbuild/linux-x64": "0.27.2",
+        "@esbuild/netbsd-arm64": "0.27.2",
+        "@esbuild/netbsd-x64": "0.27.2",
+        "@esbuild/openbsd-arm64": "0.27.2",
+        "@esbuild/openbsd-x64": "0.27.2",
+        "@esbuild/openharmony-arm64": "0.27.2",
+        "@esbuild/sunos-x64": "0.27.2",
+        "@esbuild/win32-arm64": "0.27.2",
+        "@esbuild/win32-ia32": "0.27.2",
+        "@esbuild/win32-x64": "0.27.2"
+      }
+    },
+    "node_modules/vitest/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vitest/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/vitest/node_modules/vite": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",
+      "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "esbuild": "^0.27.0",
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.6",
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "lightningcss": "^1.21.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-15.1.0.tgz",
+      "integrity": "sha512-2ytDk0kiEj/yu90JOAp44PVPUkO9+jVhyf+SybKlRHSDlvOOZhdPIrr7xTH64l4WixO2cP+wQIcgujkGBPPz6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "dependencies": {
         "isexe": "^2.0.0"
       },
       "bin": {
@@ -3935,6 +5677,23 @@
         "node": ">= 8"
       }
     },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -3950,6 +5709,45 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
+    "node_modules/ws": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
+      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/package.json b/package.json
index ece1cc1..92d1b41 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,9 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:run": "vitest run"
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.7.7",
@@ -21,6 +23,8 @@
     "zustand": "^5.0.9"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
@@ -29,7 +33,9 @@
     "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "jsdom": "^27.4.0",
     "typescript": "^5.2.2",
-    "vite": "^5.0.8"
+    "vite": "^5.0.8",
+    "vitest": "^4.0.16"
   }
 }
diff --git a/src/components/InlineTaskForm.tsx b/src/components/InlineTaskForm.tsx
index 91e1c3a..e50cf6f 100644
--- a/src/components/InlineTaskForm.tsx
+++ b/src/components/InlineTaskForm.tsx
@@ -1,6 +1,6 @@
 import { Box, TextField, Button, Typography } from '@mui/material'
 import { useState, useEffect, useRef } from 'react'
-import { roundDurationUp } from '../utils/timeCalculations'
+import { roundDurationUp, formatDuration } from '../utils/timeCalculations'
 
 interface InlineTaskFormProps {
   onSubmit: (title: string, durationMinutes: number) => void
@@ -14,7 +14,8 @@ interface InlineTaskFormProps {
  * - Autofocus on title input
  * - Enter to submit, Escape to cancel
  * - Default duration: 30 minutes
- * - Duration is rounded up to nearest 15 minutes
+ * - Duration is rounded up to nearest 15 minutes (shown dynamically)
+ * - Accepts any duration value, shows conversion before submission
  */
 export const InlineTaskForm = ({
   onSubmit,
@@ -26,6 +27,7 @@ export const InlineTaskForm = ({
 
   // Calculate rounded duration for display
   const roundedDuration = roundDurationUp(duration)
+  const willBeRounded = duration > 0 && duration !== roundedDuration
 
   // Autofocus on mount
   useEffect(() => {
@@ -90,16 +92,45 @@ export const InlineTaskForm = ({
           onChange={(e) => setDuration(parseInt(e.target.value) || 0)}
           inputProps={{
             min: 1,
-            step: 15,
+            // No step restriction - allow any value
           }}
-          helperText={
-            duration !== roundedDuration
-              ? `Rounds up to ${roundedDuration} min (15-min intervals)`
-              : 'Duration in 15-minute intervals'
-          }
         />
       </Box>
 
+      {/* Dynamic rounded duration indicator */}
+      <Box
+        sx={{
+          mb: 1.5,
+          p: 1,
+          backgroundColor: willBeRounded ? '#E3F2FD' : '#E8F5E9',
+          borderRadius: '6px',
+          border: willBeRounded ? '1px solid #90CAF9' : '1px solid #A5D6A7',
+          transition: 'all 200ms ease',
+        }}
+      >
+        <Typography
+          variant="body2"
+          sx={{
+            fontSize: '12px',
+            color: willBeRounded ? '#1565C0' : '#2E7D32',
+            fontWeight: 500,
+            textAlign: 'center',
+          }}
+        >
+          {duration < 1 ? (
+            'Enter a duration (minimum 1 minute)'
+          ) : willBeRounded ? (
+            <>
+              {duration} min → <strong>{formatDuration(roundedDuration)}</strong> (rounded to 15-min interval)
+            </>
+          ) : (
+            <>
+              Duration: <strong>{formatDuration(roundedDuration)}</strong> ✓
+            </>
+          )}
+        </Typography>
+      </Box>
+
       <Box sx={{ display: 'flex', gap: 1 }}>
         <Button
           type="submit"
diff --git a/src/components/InsertionPoint.tsx b/src/components/InsertionPoint.tsx
index 50c3316..8b5a217 100644
--- a/src/components/InsertionPoint.tsx
+++ b/src/components/InsertionPoint.tsx
@@ -21,44 +21,74 @@ export const InsertionPoint = ({
     <Box
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
+      onClick={onClick}
       sx={{
-        height: '0px',
+        height: '24px', // Larger hit area
+        margin: '-12px 0', // Negative margin to center in gap without adding layout height
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        opacity: isHovered || isActive ? 1 : 0.35,
-        transition: 'opacity 150ms ease',
         cursor: 'pointer',
         position: 'relative',
         zIndex: 10,
       }}
     >
-      <IconButton
-        onClick={onClick}
+      {/* Visual Container - only visible on hover */}
+      <Box
         sx={{
-          width: '24px',
-          height: '24px',
-          backgroundColor: '#FFFFFF',
-          border: '1.5px solid #000000',
-          transition: 'all 200ms ease',
-          padding: 0,
-          minWidth: 'unset',
-          '&:hover': {
-            backgroundColor: '#000000',
-            '& .MuiSvgIcon-root': {
-              color: '#FFFFFF',
-            },
-          },
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          opacity: isHovered || isActive ? 1 : 0,
+          transition: 'opacity 200ms ease',
+          position: 'relative',
         }}
       >
-        <AddIcon
+        {/* Horizontal Line - gives visual cue of insertion placement */}
+        <Box
           sx={{
-            fontSize: '16px',
-            color: '#000000',
-            transition: 'color 200ms ease',
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            height: '1px',
+            backgroundColor: '#000000',
+            opacity: 0.1, // Very subtle
           }}
         />
-      </IconButton>
+
+        {/* Minimalistic Button */}
+        <IconButton
+          disableRipple
+          sx={{
+            width: '20px',
+            height: '20px',
+            backgroundColor: '#FFFFFF',
+            border: '1px solid #E0E0E0', // Subtle border initially
+            boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
+            padding: 0,
+            zIndex: 1,
+            minWidth: 'unset',
+            transition: 'all 200ms ease',
+            '&:hover': {
+              backgroundColor: '#000000',
+              borderColor: '#000000',
+              transform: 'scale(1.1)',
+              '& .MuiSvgIcon-root': {
+                color: '#FFFFFF',
+              },
+            },
+          }}
+        >
+          <AddIcon
+            sx={{
+              fontSize: '14px',
+              color: '#666666', // Subtle icon color
+              transition: 'color 200ms ease',
+            }}
+          />
+        </IconButton>
+      </Box>
     </Box>
   )
 }
diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
index 4c2899f..2ead042 100644
--- a/src/components/Timeline.tsx
+++ b/src/components/Timeline.tsx
@@ -126,17 +126,25 @@ export const Timeline = () => {
       {/* Timeline */}
       <Box>
         {/* Insertion point at the beginning */}
-        {activeInsertionPoint === 'start' ? (
-          <InlineTaskForm
-            onSubmit={(title, duration) => handleInsertTask(null, title, duration)}
-            onCancel={handleCancelInsert}
-          />
-        ) : (
-          <InsertionPoint
-            onClick={() => setActiveInsertionPoint('start')}
-            isActive={activeInsertionPoint === 'start'}
-          />
-        )}
+        <Box sx={{ display: 'flex', gap: 3 }}>
+          {/* Empty space for time label alignment */}
+          <Box sx={{ minWidth: '90px' }} />
+          
+          {/* Insertion point / form */}
+          <Box sx={{ width: '400px' }}>
+            {activeInsertionPoint === 'start' ? (
+              <InlineTaskForm
+                onSubmit={(title, duration) => handleInsertTask(null, title, duration)}
+                onCancel={handleCancelInsert}
+              />
+            ) : (
+              <InsertionPoint
+                onClick={() => setActiveInsertionPoint('start')}
+                isActive={activeInsertionPoint === 'start'}
+              />
+            )}
+          </Box>
+        </Box>
 
         {/* Tasks with time labels */}
         {tasks.length === 0 ? (
@@ -157,7 +165,15 @@ export const Timeline = () => {
           tasks.map((task, index) => (
             <Box key={task.id}>
               {/* Task row with time label on left */}
-              <Box sx={{ display: 'flex', gap: 3, alignItems: 'flex-start' }}>
+              <Box 
+                sx={{ 
+                  display: 'flex', 
+                  gap: 3, 
+                  alignItems: 'flex-start',
+                  // Smooth transition when tasks shift
+                  transition: 'transform 250ms ease-out, margin 250ms ease-out',
+                }}
+              >
                 {/* Time label (left side) */}
                 <Box sx={{ minWidth: '90px', pt: '16px', textAlign: 'right' }}>
                   <TimeLabel time={task.startTime} />
@@ -186,6 +202,27 @@ export const Timeline = () => {
                   />
                 </Box>
               </Box>
+
+              {/* Insertion point AFTER this task */}
+              <Box sx={{ display: 'flex', gap: 3 }}>
+                {/* Empty space for time label alignment */}
+                <Box sx={{ minWidth: '90px' }} />
+                
+                {/* Insertion point / form */}
+                <Box sx={{ width: '400px' }}>
+                  {activeInsertionPoint === task.id ? (
+                    <InlineTaskForm
+                      onSubmit={(title, duration) => handleInsertTask(task.id, title, duration)}
+                      onCancel={handleCancelInsert}
+                    />
+                  ) : (
+                    <InsertionPoint
+                      onClick={() => setActiveInsertionPoint(task.id)}
+                      isActive={activeInsertionPoint === task.id}
+                    />
+                  )}
+                </Box>
+              </Box>
             </Box>
           ))
         )}
diff --git a/src/index.css b/src/index.css
index 7987355..20ab254 100644
--- a/src/index.css
+++ b/src/index.css
@@ -17,3 +17,52 @@ body {
   width: 100%;
   min-height: 100vh;
 }
+
+/* Task shift animations */
+@keyframes slideDown {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* New task insertion animation */
+.task-enter {
+  animation: fadeIn 300ms ease-out;
+}
+
+/* Smooth position transitions for task blocks */
+.task-block-wrapper {
+  transition: transform 250ms ease-out, margin 250ms ease-out;
+}
+
+/* Insertion point fade transition */
+.insertion-point-wrapper {
+  transition: opacity 200ms ease, height 200ms ease;
+}
\ No newline at end of file
diff --git a/src/test/insertionLogic.test.ts b/src/test/insertionLogic.test.ts
new file mode 100644
index 0000000..284384d
--- /dev/null
+++ b/src/test/insertionLogic.test.ts
@@ -0,0 +1,611 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { useTaskStore } from '../store/taskStore'
+import { Task } from '../types'
+
+/**
+ * Phase 4 Test Cases: Insertion Logic
+ * 
+ * Tests the following scenarios from DESIGN_DOCS.md:
+ * 1. Insert at beginning (no previous task)
+ * 2. Insert between two tasks
+ * 3. Insert between unlocked and locked task (shift logic)
+ * 4. Insert at end
+ * 5. Visual feedback: task shift animations (validated via state changes)
+ */
+
+describe('Insertion Logic', () => {
+  beforeEach(() => {
+    // Reset store state before each test
+    const store = useTaskStore.getState()
+    // Clear all tasks by setting empty array
+    useTaskStore.setState({ tasks: [] })
+    localStorage.clear()
+  })
+
+  describe('Insert at beginning (no previous task)', () => {
+    it('should insert task at 8:00 AM when timeline is empty', () => {
+      const store = useTaskStore.getState()
+      
+      // Insert first task
+      store.insertTask(null, {
+        title: 'First Task',
+        durationMinutes: 60,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      const tasks = useTaskStore.getState().tasks
+      expect(tasks).toHaveLength(1)
+      expect(tasks[0].title).toBe('First Task')
+      expect(tasks[0].durationMinutes).toBe(60)
+      expect(tasks[0].startTime.getHours()).toBe(8)
+      expect(tasks[0].startTime.getMinutes()).toBe(0)
+      expect(tasks[0].order).toBe(0)
+    })
+
+    it('should insert task at the beginning when using null as afterTaskId', () => {
+      const store = useTaskStore.getState()
+      
+      // Add existing task
+      store.insertTask(null, {
+        title: 'Existing Task',
+        durationMinutes: 60,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      // Insert at beginning
+      store.insertTask(null, {
+        title: 'New First Task',
+        durationMinutes: 30,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      const tasks = useTaskStore.getState().tasks
+      expect(tasks).toHaveLength(2)
+      
+      // Both tasks should start at 8:00 AM since new task gets first slot
+      const newFirst = tasks.find(t => t.title === 'New First Task')
+      const existing = tasks.find(t => t.title === 'Existing Task')
+      
+      expect(newFirst).toBeDefined()
+      expect(existing).toBeDefined()
+      // New task should be scheduled first (8:00 AM)
+      expect(newFirst!.startTime.getHours()).toBe(8)
+    })
+  })
+
+  describe('Insert between two tasks', () => {
+    it('should insert task between two unlocked tasks', () => {
+      const store = useTaskStore.getState()
+      
+      // Add Task A (1h)
+      store.insertTask(null, {
+        title: 'Task A',
+        durationMinutes: 60,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      const taskA = useTaskStore.getState().tasks[0]
+
+      // Add Task B (1h) - will be placed after Task A
+      store.insertTask(taskA.id, {
+        title: 'Task B',
+        durationMinutes: 60,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      // Insert Task C (30m) between A and B
+      store.insertTask(taskA.id, {
+        title: 'Task C',
+        durationMinutes: 30,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      const tasks = useTaskStore.getState().tasks
+      expect(tasks).toHaveLength(3)
+
+      // Verify all three tasks exist with valid times
+      const taskNames = tasks.map(t => t.title).sort()
+      expect(taskNames).toContain('Task A')
+      expect(taskNames).toContain('Task B')
+      expect(taskNames).toContain('Task C')
+      
+      // All tasks should have valid start times starting from 8 AM
+      const sortedByTime = [...tasks].sort((a, b) => a.startTime.getTime() - b.startTime.getTime())
+      expect(sortedByTime[0].startTime.getHours()).toBe(8)
+    })
+
+    it('should correctly recalculate all subsequent task times', () => {
+      const store = useTaskStore.getState()
+      
+      // Create 3 sequential tasks
+      store.insertTask(null, {
+        title: 'Task 1',
+        durationMinutes: 60, // 1 hour
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      const task1 = useTaskStore.getState().tasks[0]
+
+      store.insertTask(task1.id, {
+        title: 'Task 2',
+        durationMinutes: 60,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      let tasks = useTaskStore.getState().tasks
+      const task2 = tasks.find(t => t.title === 'Task 2')!
+
+      store.insertTask(task2.id, {
+        title: 'Task 3',
+        durationMinutes: 60,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      // Now insert between Task 1 and Task 2
+      store.insertTask(task1.id, {
+        title: 'New Middle Task',
+        durationMinutes: 30,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      tasks = useTaskStore.getState().tasks
+      expect(tasks).toHaveLength(4)
+
+      // All tasks should have valid start times (no undefined or NaN)
+      tasks.forEach(task => {
+        expect(task.startTime).toBeInstanceOf(Date)
+        expect(isNaN(task.startTime.getTime())).toBe(false)
+      })
+    })
+  })
+
+  describe('Insert between unlocked and locked task', () => {
+    it('should respect locked task position when inserting before it', () => {
+      const store = useTaskStore.getState()
+      
+      // Create Task A (unlocked)
+      store.insertTask(null, {
+        title: 'Task A',
+        durationMinutes: 60,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      const taskA = useTaskStore.getState().tasks[0]
+
+      // Create Task B and lock it
+      store.insertTask(taskA.id, {
+        title: 'Task B',
+        durationMinutes: 60,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      let tasks = useTaskStore.getState().tasks
+      const taskB = tasks.find(t => t.title === 'Task B')!
+      
+      // Lock Task B
+      store.toggleLock(taskB.id)
+
+      tasks = useTaskStore.getState().tasks
+      const lockedTaskB = tasks.find(t => t.title === 'Task B')!
+      expect(lockedTaskB.isLocked).toBe(true)
+
+      // Store Task B's start time before insertion
+      const taskBStartTime = lockedTaskB.startTime.getTime()
+
+      // Try to insert Task C between A and B
+      store.insertTask(taskA.id, {
+        title: 'Task C',
+        durationMinutes: 30,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      tasks = useTaskStore.getState().tasks
+      expect(tasks).toHaveLength(3)
+
+      // Task B should remain at same time (locked)
+      const finalTaskB = tasks.find(t => t.title === 'Task B')!
+      expect(finalTaskB.startTime.getTime()).toBe(taskBStartTime)
+    })
+
+    it('should shift unlocked tasks to accommodate while keeping locked task in place', () => {
+      const store = useTaskStore.getState()
+      
+      // Create Task A at 8:00 AM (unlocked)
+      store.insertTask(null, {
+        title: 'Task A',
+        durationMinutes: 60,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      let tasks = useTaskStore.getState().tasks
+      const taskA = tasks[0]
+
+      // Create Task B at 9:00 AM
+      store.insertTask(taskA.id, {
+        title: 'Task B',
+        durationMinutes: 60,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      tasks = useTaskStore.getState().tasks
+      const taskB = tasks.find(t => t.title === 'Task B')!
+
+      // Lock Task B at 9:00 AM
+      store.toggleLock(taskB.id)
+      
+      tasks = useTaskStore.getState().tasks
+      const lockedTaskB = tasks.find(t => t.title === 'Task B')!
+      const taskBStartHour = lockedTaskB.startTime.getHours()
+      const taskBStartMinute = lockedTaskB.startTime.getMinutes()
+
+      // Insert new task - should find a slot that respects Task B's lock
+      store.insertTask(null, {
+        title: 'Task C',
+        durationMinutes: 120, // 2 hours - longer task
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      tasks = useTaskStore.getState().tasks
+      expect(tasks).toHaveLength(3)
+
+      // Task B should still be at the same time
+      const finalTaskB = tasks.find(t => t.title === 'Task B')!
+      expect(finalTaskB.startTime.getHours()).toBe(taskBStartHour)
+      expect(finalTaskB.startTime.getMinutes()).toBe(taskBStartMinute)
+    })
+  })
+
+  describe('Insert at end', () => {
+    it('should insert task at end of timeline', () => {
+      const store = useTaskStore.getState()
+      
+      // Create first task
+      store.insertTask(null, {
+        title: 'Task A',
+        durationMinutes: 60,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      let tasks = useTaskStore.getState().tasks
+      const taskA = tasks[0]
+
+      // Create second task
+      store.insertTask(taskA.id, {
+        title: 'Task B',
+        durationMinutes: 60,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      tasks = useTaskStore.getState().tasks
+      const taskB = tasks.find(t => t.title === 'Task B')!
+
+      // Insert at end (after Task B)
+      store.insertTask(taskB.id, {
+        title: 'Task C (End)',
+        durationMinutes: 30,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      tasks = useTaskStore.getState().tasks
+      expect(tasks).toHaveLength(3)
+
+      // Task C should be scheduled after Task B ends
+      const taskC = tasks.find(t => t.title === 'Task C (End)')!
+      expect(taskC).toBeDefined()
+      
+      // Verify Task C starts after Task B
+      const taskBEnd = new Date(taskB.startTime.getTime() + taskB.durationMinutes * 60000)
+      // Task C should start at or after Task B ends
+      // Note: The actual implementation may recalculate times
+    })
+  })
+
+  describe('Time recalculation', () => {
+    it('should correctly calculate times for sequential tasks', () => {
+      const store = useTaskStore.getState()
+      
+      // Create 4 tasks in sequence
+      store.insertTask(null, {
+        title: 'Morning',
+        durationMinutes: 60, // 1 hour: 8:00 - 9:00
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      let tasks = useTaskStore.getState().tasks
+      let lastTask = tasks[tasks.length - 1]
+
+      store.insertTask(lastTask.id, {
+        title: 'Mid-Morning',
+        durationMinutes: 30, // 30 min: 9:00 - 9:30
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      tasks = useTaskStore.getState().tasks
+      lastTask = tasks.find(t => t.title === 'Mid-Morning')!
+
+      store.insertTask(lastTask.id, {
+        title: 'Late Morning',
+        durationMinutes: 90, // 1.5 hours: 9:30 - 11:00
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      tasks = useTaskStore.getState().tasks
+      lastTask = tasks.find(t => t.title === 'Late Morning')!
+
+      store.insertTask(lastTask.id, {
+        title: 'Noon',
+        durationMinutes: 60, // 1 hour: 11:00 - 12:00
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      tasks = useTaskStore.getState().tasks
+      expect(tasks).toHaveLength(4)
+
+      // Verify all tasks have valid, non-overlapping times
+      const sortedByTime = [...tasks].sort(
+        (a, b) => a.startTime.getTime() - b.startTime.getTime()
+      )
+
+      for (let i = 0; i < sortedByTime.length - 1; i++) {
+        const current = sortedByTime[i]
+        const next = sortedByTime[i + 1]
+        const currentEnd = new Date(
+          current.startTime.getTime() + current.durationMinutes * 60000
+        )
+        
+        // Next task should start at or after current task ends
+        // (allowing for locked task scenarios)
+        expect(next.startTime.getTime()).toBeGreaterThanOrEqual(
+          currentEnd.getTime() - 1000 // 1 second tolerance for rounding
+        )
+      }
+    })
+  })
+
+  describe('Color assignment', () => {
+    it('should assign colors to newly created tasks', () => {
+      const store = useTaskStore.getState()
+      
+      store.insertTask(null, {
+        title: 'Task 1',
+        durationMinutes: 30,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      let tasks = useTaskStore.getState().tasks
+      expect(tasks[0].color).toBeDefined()
+      expect(tasks[0].color).toBeTruthy()
+      
+      const lastTask = tasks[tasks.length - 1]
+      store.insertTask(lastTask.id, {
+        title: 'Task 2',
+        durationMinutes: 30,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      tasks = useTaskStore.getState().tasks
+      expect(tasks[1].color).toBeDefined()
+      
+      // Colors should cycle through the palette
+      // but both should have valid colors
+      tasks.forEach(task => {
+        expect(task.color).toMatch(/^#[0-9A-Fa-f]{6}$/)
+      })
+    })
+  })
+
+  describe('Order management', () => {
+    it('should maintain correct order values after insertion', () => {
+      const store = useTaskStore.getState()
+      
+      // Create 3 tasks
+      store.insertTask(null, {
+        title: 'Task A',
+        durationMinutes: 30,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      let tasks = useTaskStore.getState().tasks
+      const taskA = tasks[0]
+
+      store.insertTask(taskA.id, {
+        title: 'Task B',
+        durationMinutes: 30,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      tasks = useTaskStore.getState().tasks
+      const taskB = tasks.find(t => t.title === 'Task B')!
+
+      store.insertTask(taskB.id, {
+        title: 'Task C',
+        durationMinutes: 30,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      tasks = useTaskStore.getState().tasks
+      
+      // All order values should be unique
+      const orders = tasks.map(t => t.order)
+      const uniqueOrders = [...new Set(orders)]
+      expect(uniqueOrders).toHaveLength(tasks.length)
+
+      // Orders should be sequential (0, 1, 2)
+      orders.sort((a, b) => a - b)
+      orders.forEach((order, index) => {
+        expect(order).toBe(index)
+      })
+    })
+  })
+
+  describe('Overlap detection', () => {
+    it('should detect overlapping tasks', () => {
+      const store = useTaskStore.getState()
+      
+      // Create a task
+      store.insertTask(null, {
+        title: 'Task A',
+        durationMinutes: 60,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      let tasks = useTaskStore.getState().tasks
+      
+      // Non-overlapping tasks should not be flagged
+      expect(tasks[0].isOverlapping).toBe(false)
+    })
+
+    it('should not flag sequential non-overlapping tasks', () => {
+      const store = useTaskStore.getState()
+      
+      store.insertTask(null, {
+        title: 'Task A',
+        durationMinutes: 60,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      let tasks = useTaskStore.getState().tasks
+      const taskA = tasks[0]
+
+      store.insertTask(taskA.id, {
+        title: 'Task B',
+        durationMinutes: 60,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      tasks = useTaskStore.getState().tasks
+      
+      // Both tasks should not be overlapping
+      tasks.forEach(task => {
+        expect(task.isOverlapping).toBe(false)
+      })
+    })
+  })
+
+  describe('localStorage persistence', () => {
+    const STORAGE_KEY = 'time-block-app-tasks'
+
+    it('should persist inserted tasks to localStorage', () => {
+      const store = useTaskStore.getState()
+      
+      store.insertTask(null, {
+        title: 'Persistent Task',
+        durationMinutes: 45,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      // Check localStorage
+      const stored = localStorage.getItem(STORAGE_KEY)
+      expect(stored).toBeTruthy()
+      
+      const parsedTasks = JSON.parse(stored!)
+      expect(parsedTasks).toHaveLength(1)
+      expect(parsedTasks[0].title).toBe('Persistent Task')
+      expect(parsedTasks[0].durationMinutes).toBe(45)
+    })
+
+    it('should persist multiple insertions correctly', () => {
+      const store = useTaskStore.getState()
+      
+      store.insertTask(null, {
+        title: 'Task 1',
+        durationMinutes: 30,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      let tasks = useTaskStore.getState().tasks
+      const task1 = tasks[0]
+
+      store.insertTask(task1.id, {
+        title: 'Task 2',
+        durationMinutes: 45,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      tasks = useTaskStore.getState().tasks
+      const task2 = tasks.find(t => t.title === 'Task 2')!
+
+      store.insertTask(task2.id, {
+        title: 'Task 3',
+        durationMinutes: 60,
+        isLocked: false,
+        isOverlapping: false,
+        startTime: new Date(),
+      })
+
+      const stored = localStorage.getItem(STORAGE_KEY)
+      expect(stored).toBeTruthy()
+      const parsedTasks = JSON.parse(stored!)
+      expect(parsedTasks).toHaveLength(3)
+    })
+  })
+})
+
diff --git a/src/test/setup.ts b/src/test/setup.ts
new file mode 100644
index 0000000..fd4104f
--- /dev/null
+++ b/src/test/setup.ts
@@ -0,0 +1,14 @@
+import '@testing-library/jest-dom'
+
+// Mock crypto.randomUUID for tests
+if (!globalThis.crypto) {
+  globalThis.crypto = {
+    randomUUID: () => Math.random().toString(36).substring(2, 9) + '-test-uuid',
+  } as Crypto
+}
+
+// Reset localStorage before each test
+beforeEach(() => {
+  localStorage.clear()
+})
+
diff --git a/vite.config.ts b/vite.config.ts
index c72ca71..23c88b4 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,3 +1,4 @@
+/// <reference types="vitest" />
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
@@ -7,4 +8,10 @@ export default defineConfig({
   server: {
     port: 3000,
   },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/test/setup.ts',
+    css: true,
+  },
 })

From 49364709399dfda37b1f4c4787bdcb618a5e6648 Mon Sep 17 00:00:00 2001
From: Dang Tran <91554483+BrooklynD23@users.noreply.github.com>
Date: Tue, 27 Jan 2026 11:09:49 -0800
Subject: [PATCH 7/9] UI revamp based on screenshot

---
 .eslintrc.cjs                        |  52 +++++++
 DESIGN_DOCS.md                       |  46 +++---
 README.md                            |  22 ++-
 src/App.tsx                          |  98 +++++++++++-
 src/components/EndZoneDropTarget.tsx |   9 +-
 src/components/InlineTaskForm.tsx    |   7 +-
 src/components/InsertionPoint.tsx    |  31 ++--
 src/components/TaskBlock.tsx         |  16 +-
 src/components/Timeline.tsx          | 220 +++++++++++++++++++--------
 src/store/taskStore.ts               |   2 +-
 src/test/insertionLogic.test.ts      |   7 +-
 src/test/setup.ts                    |   1 +
 src/utils/storage.ts                 |   4 +-
 13 files changed, 373 insertions(+), 142 deletions(-)
 create mode 100644 .eslintrc.cjs

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 0000000..5f176e7
--- /dev/null
+++ b/.eslintrc.cjs
@@ -0,0 +1,52 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['@typescript-eslint', 'react-hooks', 'react-refresh'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  rules: {
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        ignoreRestSiblings: true,
+      },
+    ],
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  ignorePatterns: ['dist', 'build', 'coverage', 'node_modules'],
+  overrides: [
+    {
+      files: ['**/*.test.ts', '**/*.test.tsx', 'src/test/**/*.{ts,tsx}'],
+      env: {
+        node: true,
+      },
+      globals: {
+        describe: 'readonly',
+        it: 'readonly',
+        expect: 'readonly',
+        beforeEach: 'readonly',
+        afterEach: 'readonly',
+        vi: 'readonly',
+      },
+    },
+  ],
+}
diff --git a/DESIGN_DOCS.md b/DESIGN_DOCS.md
index f19fdb0..864d7cb 100644
--- a/DESIGN_DOCS.md
+++ b/DESIGN_DOCS.md
@@ -13,6 +13,11 @@ A minimalistic single-column time blocking application where users can insert ta
 - Offline-first (localStorage persistence)
 - Web application (starting platform)
 
+**Current UI Shell (Concept Art Implementation):**
+- Left navigation rail (Calendar / Tasks / Stats / Settings)
+- Centered day view with header and timeline
+- Floating [+] button (top-right) as primary task creation entry point
+
 **Key Innovation:** Tasks auto-calculate times based on position and duration. Dragging triggers intelligent SWAP or PUSH operations that respect locked tasks.
 
 ---
@@ -712,35 +717,20 @@ src/
 
 ### Layout Structure
 
-**Single Column Design:**
+**Single Column Design (Centered Day View):**
 ```
-┌────────────────────────────┐
-│  Time Blocking App         │
-├────────────────────────────┤
-│                            │
-│  07:00 AM (gray)           │  ← TimeLabel (unfocused)
-│                            │
-│  08:00 AM (black)          │  ← TimeLabel (focused - drop target)
-│  ┌──────────────────────┐  │
-│  │ Task A: 2h           │  │  ← TaskBlock
-│  │ Write design docs    │  │
-│  └──────────────────────┘  │
-│         [+]                │  ← InsertionPoint (on hover)
-│  10:00 AM (gray)           │
-│  ┌──────────────────────┐  │
-│  │ Task B: 1h  🔒       │  │  ← TaskBlock (locked)
-│  │ Team meeting         │  │
-│  └──────────────────────┘  │
-│         [+]                │
-│  11:00 AM (gray)           │
-│  ┌──────────────────────┐  │
-│  │ Task C: 1.5h         │  │  ← TaskBlock
-│  │ Code review          │  │
-│  └──────────────────────┘  │
-│         [+]                │
-│  12:30 PM (gray)           │
-│                            │
-└────────────────────────────┘
+┌───────────────────────────────────────────┐
+│ Nav Rail │        Centered Day View       │
+│ (icons)  │   Time Blocking App    [+]     │
+│          │   Yesterday  Today  Tomorrow   │
+│          │   08:00  ┌───────────────┐     │
+│          │          │ Task A        │     │
+│          │          │ Est. 2h       │     │
+│          │          └───────────────┘     │
+│          │   10:00  ┌───────────────┐     │
+│          │          │ Task B   🔒    │     │
+│          │          └───────────────┘     │
+└───────────────────────────────────────────┘
 ```
 
 ---
diff --git a/README.md b/README.md
index a69ca5c..8137797 100644
--- a/README.md
+++ b/README.md
@@ -35,8 +35,8 @@ Before:              After PUSH:
 ```
 
 ### Design Philosophy
-- **Minimalistic** - Clean black & white interface with green task blocks
-- **Notion-Inspired** - Simple, focused, distraction-free
+- **Minimalistic** - Clean, airy layout with soft depth and green task blocks
+- **Concept Art Inspired** - Left navigation rail + centered day view
 - **No Clutter** - Spacing-based separation, no unnecessary borders
 - **Accessible** - WCAG AA contrast ratios, keyboard navigation
 
@@ -81,6 +81,10 @@ npm run preview
 3. **Enter duration** in minutes (e.g., 120 for 2 hours)
 4. **Click "Add Task"** or press Enter
 
+You can add tasks from:
+- The **floating [+] button** in the top-right of the day view
+- Any **insertion point** between tasks
+
 ### Reordering Tasks
 
 **SWAP (Exchange Positions):**
@@ -151,12 +155,24 @@ src/
 └── App.tsx                   # Root component
 ```
 
+## 🧭 UI Layout (Concept Art)
+
+- **Left navigation rail**
+  - Calendar / Tasks / Stats / Settings
+  - Note: navigation is currently visual-only (single view MVP).
+- **Centered day view**
+  - Title + scheduled count
+  - Day header row (Yesterday / Today / Tomorrow)
+  - Timeline with time labels and pill task cards
+- **Floating [+] button**
+  - Primary way to add a new task
+
 ## 🎨 Design System
 
 ### Colors
 ```typescript
 // Base
-Background:    #FFFFFF (Pure white)
+Background:    #FFFFFF → #F7FBF8 (soft gradient)
 Text Primary:  #000000 (Black)
 Text Secondary: #666666 (Medium gray)
 Accents:       #000000 (Black buttons)
diff --git a/src/App.tsx b/src/App.tsx
index 64ad5ba..e2187fb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,21 +1,113 @@
 import { ThemeProvider } from '@mui/material/styles'
 import CssBaseline from '@mui/material/CssBaseline'
+import { Box, ButtonBase, Typography } from '@mui/material'
+import CalendarMonthOutlinedIcon from '@mui/icons-material/CalendarMonthOutlined'
+import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined'
+import BarChartOutlinedIcon from '@mui/icons-material/BarChartOutlined'
+import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined'
 import { theme } from './theme/theme'
 import { Timeline } from './components/Timeline'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useTaskStore } from './store/taskStore'
 
 function App() {
   // Expose store to window for console testing (optional)
   useEffect(() => {
-    ;(window as any).taskStore = useTaskStore
+    (window as unknown as { taskStore: typeof useTaskStore }).taskStore = useTaskStore
     console.log('✅ Task store available at window.taskStore')
   }, [])
 
+  const [activeNav, setActiveNav] = useState<'calendar' | 'tasks' | 'stats' | 'settings'>('calendar')
+
+  const navItems = [
+    { key: 'calendar' as const, label: 'Calendar', icon: CalendarMonthOutlinedIcon },
+    { key: 'tasks' as const, label: 'Tasks', icon: CheckCircleOutlineOutlinedIcon },
+    { key: 'stats' as const, label: 'Stats', icon: BarChartOutlinedIcon },
+    { key: 'settings' as const, label: 'Settings', icon: SettingsOutlinedIcon },
+  ]
+
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      <Timeline />
+      <Box
+        sx={{
+          minHeight: '100vh',
+          display: 'flex',
+          background:
+            'radial-gradient(circle at 0% 30%, rgba(168, 220, 200, 0.35) 0%, rgba(255,255,255,0) 45%), linear-gradient(180deg, #FFFFFF 0%, #F7FBF8 100%)',
+        }}
+      >
+        <Box
+          sx={{
+            width: 120,
+            flex: '0 0 120px',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 1,
+            py: 4,
+            px: 1,
+            borderRight: '1px solid rgba(0,0,0,0.06)',
+            background:
+              'linear-gradient(180deg, rgba(183, 226, 205, 0.55) 0%, rgba(183, 226, 205, 0.18) 60%, rgba(255, 255, 255, 0) 100%)',
+            backdropFilter: 'blur(10px)',
+          }}
+        >
+          {navItems.map((item) => {
+            const isActive = item.key === activeNav
+            const Icon = item.icon
+
+            return (
+              <ButtonBase
+                key={item.key}
+                onClick={() => setActiveNav(item.key)}
+                sx={{
+                  width: '100%',
+                  borderRadius: 999,
+                  py: 1.25,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 0.75,
+                  color: isActive ? '#000000' : 'rgba(0,0,0,0.55)',
+                  transition: 'color 150ms ease',
+                }}
+              >
+                <Box
+                  sx={{
+                    width: 56,
+                    height: 56,
+                    borderRadius: '50%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    backgroundColor: isActive ? 'rgba(255,255,255,0.7)' : 'transparent',
+                    boxShadow: isActive ? '0 12px 24px rgba(0,0,0,0.10)' : 'none',
+                    transition: 'background-color 150ms ease, box-shadow 150ms ease',
+                  }}
+                >
+                  <Icon sx={{ fontSize: 22 }} />
+                </Box>
+                <Typography sx={{ fontSize: 12, fontWeight: 500, lineHeight: 1.2 }}>
+                  {item.label}
+                </Typography>
+              </ButtonBase>
+            )
+          })}
+        </Box>
+
+        <Box
+          sx={{
+            flex: 1,
+            display: 'flex',
+            justifyContent: 'center',
+            px: { xs: 2, sm: 3, md: 5 },
+          }}
+        >
+          <Box sx={{ width: '100%', maxWidth: 980 }}>
+            <Timeline />
+          </Box>
+        </Box>
+      </Box>
     </ThemeProvider>
   )
 }
diff --git a/src/components/EndZoneDropTarget.tsx b/src/components/EndZoneDropTarget.tsx
index d98d1c7..50505fc 100644
--- a/src/components/EndZoneDropTarget.tsx
+++ b/src/components/EndZoneDropTarget.tsx
@@ -69,12 +69,13 @@ export const EndZoneDropTarget = ({
       sx={{
         minHeight: isDragging ? '80px' : '40px',
         marginTop: '8px',
-        marginLeft: '114px', // Align with task blocks (90px time label + 24px gap)
-        width: '400px',
+        marginLeft: 'calc(var(--time-col-width) + var(--timeline-gap))',
+        width: '100%',
+        maxWidth: 'var(--task-col-max)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        borderRadius: '8px',
+        borderRadius: '14px',
         border: isDropTarget ? '2px solid #000000' : '2px dashed #BDBDBD',
         backgroundColor: isDropTarget ? 'rgba(0, 0, 0, 0.05)' : 'transparent',
         opacity: isDragging ? 1 : 0.5,
@@ -95,3 +96,5 @@ export const EndZoneDropTarget = ({
   )
 }
 
+
+
diff --git a/src/components/InlineTaskForm.tsx b/src/components/InlineTaskForm.tsx
index e50cf6f..f53985b 100644
--- a/src/components/InlineTaskForm.tsx
+++ b/src/components/InlineTaskForm.tsx
@@ -66,9 +66,10 @@ export const InlineTaskForm = ({
       sx={{
         p: 2,
         mb: 1.5,
-        backgroundColor: '#FAFAFA',
-        borderRadius: '8px',
-        border: '2px solid #000000',
+        backgroundColor: 'rgba(255,255,255,0.75)',
+        borderRadius: '16px',
+        border: '1px solid rgba(0,0,0,0.12)',
+        boxShadow: '0 10px 26px rgba(0,0,0,0.08)',
       }}
     >
       <TextField
diff --git a/src/components/InsertionPoint.tsx b/src/components/InsertionPoint.tsx
index 8b5a217..7d6e41a 100644
--- a/src/components/InsertionPoint.tsx
+++ b/src/components/InsertionPoint.tsx
@@ -23,8 +23,8 @@ export const InsertionPoint = ({
       onMouseLeave={() => setIsHovered(false)}
       onClick={onClick}
       sx={{
-        height: '24px', // Larger hit area
-        margin: '-12px 0', // Negative margin to center in gap without adding layout height
+        height: '32px', // Height for the hover area above task
+        marginBottom: '-8px', // Pull it closer to the task below
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
@@ -45,27 +45,15 @@ export const InsertionPoint = ({
           position: 'relative',
         }}
       >
-        {/* Horizontal Line - gives visual cue of insertion placement */}
-        <Box
-          sx={{
-            position: 'absolute',
-            left: 0,
-            right: 0,
-            height: '1px',
-            backgroundColor: '#000000',
-            opacity: 0.1, // Very subtle
-          }}
-        />
-
         {/* Minimalistic Button */}
         <IconButton
           disableRipple
           sx={{
-            width: '20px',
-            height: '20px',
+            width: '24px',
+            height: '24px',
             backgroundColor: '#FFFFFF',
-            border: '1px solid #E0E0E0', // Subtle border initially
-            boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
+            border: '1px solid #E0E0E0',
+            boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
             padding: 0,
             zIndex: 1,
             minWidth: 'unset',
@@ -73,7 +61,8 @@ export const InsertionPoint = ({
             '&:hover': {
               backgroundColor: '#000000',
               borderColor: '#000000',
-              transform: 'scale(1.1)',
+              transform: 'scale(1.15)',
+              boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
               '& .MuiSvgIcon-root': {
                 color: '#FFFFFF',
               },
@@ -82,8 +71,8 @@ export const InsertionPoint = ({
         >
           <AddIcon
             sx={{
-              fontSize: '14px',
-              color: '#666666', // Subtle icon color
+              fontSize: '16px',
+              color: '#666666',
               transition: 'color 200ms ease',
             }}
           />
diff --git a/src/components/TaskBlock.tsx b/src/components/TaskBlock.tsx
index 7ae3b6f..368188e 100644
--- a/src/components/TaskBlock.tsx
+++ b/src/components/TaskBlock.tsx
@@ -11,7 +11,6 @@ import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-d
 
 interface TaskBlockProps {
   task: Task
-  index: number
   onToggleLock: (taskId: string) => void
   onDelete: (taskId: string) => void
   onDragStart?: (taskId: string) => void
@@ -32,7 +31,6 @@ interface TaskBlockProps {
  */
 export const TaskBlock = ({
   task,
-  index,
   onToggleLock,
   onDelete,
   onDragStart,
@@ -116,8 +114,8 @@ export const TaskBlock = ({
       onMouseLeave={() => setIsHovered(false)}
       sx={{
         position: 'relative',
-        backgroundColor,
-        borderRadius: '8px',
+        background: `linear-gradient(90deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 70%), ${backgroundColor}`,
+        borderRadius: '16px',
         border: isBeingDragged
           ? '2px dashed #000000'
           : task.isOverlapping
@@ -125,8 +123,8 @@ export const TaskBlock = ({
           : isDropTarget
           ? '2px solid #000000'
           : 'none',
-        padding: '16px',
-        marginBottom: '8px',
+        padding: '18px',
+        marginBottom: '10px',
         minHeight: `${height}px`,
         cursor: task.isLocked ? 'not-allowed' : isBeingDragged ? 'grabbing' : 'grab',
         opacity: isBeingDragged ? 0.85 : isDragging ? 0.85 : isPreview ? 0.6 : 1,
@@ -135,9 +133,9 @@ export const TaskBlock = ({
           ? '0 4px 12px rgba(0,0,0,0.15)'
           : showNewHighlight
           ? '0 0 0 3px #4CAF50, 0 4px 12px rgba(76, 175, 80, 0.3)'
-          : 'none',
+          : '0 10px 26px rgba(0,0,0,0.10)',
         '&:hover': {
-          boxShadow: task.isLocked || isBeingDragged ? 'none' : '0 2px 8px rgba(0,0,0,0.1)',
+          boxShadow: task.isLocked || isBeingDragged ? '0 10px 26px rgba(0,0,0,0.10)' : '0 14px 32px rgba(0,0,0,0.14)',
         },
         // Overlapping pulse animation
         animation: task.isOverlapping
@@ -165,7 +163,7 @@ export const TaskBlock = ({
           fontWeight: 600,
           color: '#000000',
           lineHeight: 1.3,
-          mb: 0.5,
+          mb: 0.75,
           pr: 4, // Space for lock icon
         }}
       >
diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
index 2ead042..0699f33 100644
--- a/src/components/Timeline.tsx
+++ b/src/components/Timeline.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography } from '@mui/material'
+import { Box, IconButton, Typography } from '@mui/material'
 import { useState, useRef } from 'react'
 import { useTaskStore } from '../store/taskStore'
 import { TaskBlock } from './TaskBlock'
@@ -6,8 +6,10 @@ import { InsertionPoint } from './InsertionPoint'
 import { InlineTaskForm } from './InlineTaskForm'
 import { TimeLabel } from './TimeLabel'
 import { EndZoneDropTarget } from './EndZoneDropTarget'
-import { generateTimeLabels, getVisibleTimeRange } from '../utils/timeCalculations'
 import { getDragAction } from '../utils/dragLogic'
+import AddIcon from '@mui/icons-material/Add'
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
+import ChevronRightIcon from '@mui/icons-material/ChevronRight'
 
 /**
  * Timeline component - main container for the time blocking interface
@@ -31,16 +33,17 @@ export const Timeline = () => {
   const [draggingTaskId, setDraggingTaskId] = useState<string | null>(null)
   const taskRefs = useRef<Map<string, HTMLDivElement>>(new Map())
 
-  // Calculate visible time range
-  const { start, end } = getVisibleTimeRange(tasks)
-  const timeLabels = generateTimeLabels(start, end)
-
   // Check if the last task is locked (for showing end zone drop target)
   const lastTask = tasks[tasks.length - 1]
   const hasLockedTaskAtEnd = lastTask?.isLocked ?? false
 
   const handleInsertTask = (afterTaskId: string | null, title: string, durationMinutes: number) => {
-    insertTask(afterTaskId, {
+    // If afterTaskId is provided, we want to insert BEFORE that task
+    // So we need to find the previous task or null if it's the first task
+    const targetIndex = tasks.findIndex(t => t.id === afterTaskId)
+    const previousTaskId = targetIndex > 0 ? tasks[targetIndex - 1].id : null
+    
+    insertTask(previousTaskId, {
       title,
       durationMinutes,
       isLocked: false,
@@ -105,94 +108,178 @@ export const Timeline = () => {
     setDraggingTaskId(null)
   }
 
+  const currentDate = new Date()
+  const dateLabel = currentDate.toLocaleDateString(undefined, {
+    weekday: 'long',
+    month: 'short',
+    day: 'numeric',
+  })
+
   return (
     <Box
       sx={{
-        maxWidth: '650px',
-        margin: '0 auto',
-        padding: '24px 16px',
+        position: 'relative',
+        py: { xs: 3, sm: 5 },
+        '--time-col-width': '110px',
+        '--timeline-gap': '24px',
+        '--task-col-max': '560px',
       }}
     >
-      {/* Header */}
-      <Box sx={{ mb: 4, textAlign: 'center' }}>
-        <Typography variant="h6" sx={{ fontSize: '20px', fontWeight: 600, mb: 1 }}>
+      <Box sx={{ mb: { xs: 3, sm: 4 }, textAlign: 'center' }}>
+        <Typography variant="h6" sx={{ fontSize: { xs: '22px', sm: '28px' }, fontWeight: 700, mb: 0.75 }}>
           Time Blocking App
         </Typography>
         <Typography variant="body2" color="text.secondary">
-          {tasks.length === 0 ? 'Click [+] to add your first task' : `${tasks.length} task${tasks.length === 1 ? '' : 's'} scheduled`}
+          {tasks.length === 0 ? 'No tasks scheduled' : `${tasks.length} task${tasks.length === 1 ? '' : 's'} scheduled`}
         </Typography>
       </Box>
 
+      <IconButton
+        aria-label="Add task"
+        onClick={() => setActiveInsertionPoint('start')}
+        sx={{
+          position: 'absolute',
+          top: { xs: 16, sm: 22 },
+          right: { xs: 0, sm: 8 },
+          width: 48,
+          height: 48,
+          borderRadius: '50%',
+          backgroundColor: '#FFFFFF',
+          boxShadow: '0 12px 28px rgba(0,0,0,0.12)',
+          border: '1px solid rgba(0,0,0,0.06)',
+          '&:hover': {
+            backgroundColor: '#FFFFFF',
+            boxShadow: '0 16px 34px rgba(0,0,0,0.16)',
+          },
+        }}
+      >
+        <AddIcon />
+      </IconButton>
+
+      <Box
+        sx={{
+          mb: { xs: 2, sm: 3 },
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 2,
+          color: 'text.secondary',
+        }}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+          <ChevronLeftIcon sx={{ fontSize: 18, opacity: 0.6 }} />
+          <Typography variant="body2" sx={{ fontSize: 14, opacity: 0.75 }}>
+            Yesterday
+          </Typography>
+        </Box>
+
+        <Typography sx={{ fontSize: 16, fontWeight: 700, color: 'text.primary' }}>
+          {dateLabel}
+        </Typography>
+
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+          <Typography variant="body2" sx={{ fontSize: 14, opacity: 0.75 }}>
+            Tomorrow
+          </Typography>
+          <ChevronRightIcon sx={{ fontSize: 18, opacity: 0.6 }} />
+        </Box>
+      </Box>
+
       {/* Timeline */}
-      <Box>
-        {/* Insertion point at the beginning */}
-        <Box sx={{ display: 'flex', gap: 3 }}>
-          {/* Empty space for time label alignment */}
-          <Box sx={{ minWidth: '90px' }} />
-          
-          {/* Insertion point / form */}
-          <Box sx={{ width: '400px' }}>
-            {activeInsertionPoint === 'start' ? (
+      <Box sx={{ position: 'relative' }}>
+        <Box
+          sx={{
+            position: 'absolute',
+            left: 'calc(var(--time-col-width) + (var(--timeline-gap) / 2))',
+            top: 0,
+            bottom: 0,
+            width: '1px',
+            backgroundColor: 'rgba(0,0,0,0.06)',
+          }}
+        />
+
+        {activeInsertionPoint === 'start' && (
+          <Box sx={{ display: 'flex', gap: 'var(--timeline-gap)', mb: 1 }}>
+            <Box sx={{ minWidth: 'var(--time-col-width)' }} />
+            <Box sx={{ width: '100%', maxWidth: 'var(--task-col-max)' }}>
               <InlineTaskForm
                 onSubmit={(title, duration) => handleInsertTask(null, title, duration)}
                 onCancel={handleCancelInsert}
               />
-            ) : (
-              <InsertionPoint
-                onClick={() => setActiveInsertionPoint('start')}
-                isActive={activeInsertionPoint === 'start'}
-              />
-            )}
+            </Box>
           </Box>
-        </Box>
+        )}
 
         {/* Tasks with time labels */}
         {tasks.length === 0 ? (
           <Box
             sx={{
+              mt: 2,
               p: 4,
               textAlign: 'center',
-              backgroundColor: '#FAFAFA',
-              borderRadius: '8px',
-              border: '1px solid #E0E0E0',
+              backgroundColor: 'rgba(255,255,255,0.65)',
+              borderRadius: '16px',
+              border: '1px solid rgba(0,0,0,0.06)',
+              boxShadow: '0 10px 26px rgba(0,0,0,0.06)',
             }}
           >
             <Typography variant="body2" color="text.secondary">
-              No tasks yet. Click the [+] button above to get started!
+              Click the [+] button to add your first task.
             </Typography>
           </Box>
         ) : (
-          tasks.map((task, index) => (
+          tasks.map((task) => (
             <Box key={task.id}>
+              {/* Insertion point BEFORE this task */}
+              <Box sx={{ display: 'flex', gap: 'var(--timeline-gap)' }}>
+                {/* Empty space for time label alignment */}
+                <Box sx={{ minWidth: 'var(--time-col-width)' }} />
+                
+                {/* Insertion point / form */}
+                <Box sx={{ width: '100%', maxWidth: 'var(--task-col-max)' }}>
+                  {activeInsertionPoint === task.id ? (
+                    <InlineTaskForm
+                      onSubmit={(title, duration) => handleInsertTask(task.id, title, duration)}
+                      onCancel={handleCancelInsert}
+                    />
+                  ) : (
+                    <InsertionPoint
+                      onClick={() => setActiveInsertionPoint(task.id)}
+                      isActive={activeInsertionPoint === task.id}
+                    />
+                  )}
+                </Box>
+              </Box>
+
               {/* Task row with time label on left */}
               <Box 
                 sx={{ 
                   display: 'flex', 
-                  gap: 3, 
-                  alignItems: 'flex-start',
+                  gap: 'var(--timeline-gap)', 
+                  alignItems: 'center',
                   // Smooth transition when tasks shift
                   transition: 'transform 250ms ease-out, margin 250ms ease-out',
                 }}
               >
                 {/* Time label (left side) */}
-                <Box sx={{ minWidth: '90px', pt: '16px', textAlign: 'right' }}>
+                <Box sx={{ minWidth: 'var(--time-col-width)', textAlign: 'right' }}>
                   <TimeLabel time={task.startTime} />
                 </Box>
 
                 {/* Task block (centered) */}
                 <Box
-                  ref={(el) => {
+                  ref={(node) => {
+                    const el = node as HTMLDivElement | null
                     if (el) {
-                      taskRefs.current.set(task.id, el as any)
+                      taskRefs.current.set(task.id, el)
                     } else {
                       taskRefs.current.delete(task.id)
                     }
                   }}
-                  sx={{ width: '400px' }}
+                  sx={{ width: '100%', maxWidth: 'var(--task-col-max)' }}
                 >
                   <TaskBlock
                     task={task}
-                    index={index}
                     onToggleLock={toggleLock}
                     onDelete={deleteTask}
                     onDragStart={handleDragStart}
@@ -202,31 +289,36 @@ export const Timeline = () => {
                   />
                 </Box>
               </Box>
-
-              {/* Insertion point AFTER this task */}
-              <Box sx={{ display: 'flex', gap: 3 }}>
-                {/* Empty space for time label alignment */}
-                <Box sx={{ minWidth: '90px' }} />
-                
-                {/* Insertion point / form */}
-                <Box sx={{ width: '400px' }}>
-                  {activeInsertionPoint === task.id ? (
-                    <InlineTaskForm
-                      onSubmit={(title, duration) => handleInsertTask(task.id, title, duration)}
-                      onCancel={handleCancelInsert}
-                    />
-                  ) : (
-                    <InsertionPoint
-                      onClick={() => setActiveInsertionPoint(task.id)}
-                      isActive={activeInsertionPoint === task.id}
-                    />
-                  )}
-                </Box>
-              </Box>
             </Box>
           ))
         )}
 
+        {/* Insertion point after last task */}
+        {tasks.length > 0 && (
+          <Box sx={{ display: 'flex', gap: 'var(--timeline-gap)', mt: 1 }}>
+            {/* Empty space for time label alignment */}
+            <Box sx={{ minWidth: 'var(--time-col-width)' }} />
+            
+            {/* Insertion point / form */}
+            <Box sx={{ width: '100%', maxWidth: 'var(--task-col-max)' }}>
+              {activeInsertionPoint === 'end' ? (
+                <InlineTaskForm
+                  onSubmit={(title, duration) => {
+                    const lastTask = tasks[tasks.length - 1]
+                    handleInsertTask(lastTask.id, title, duration)
+                  }}
+                  onCancel={handleCancelInsert}
+                />
+              ) : (
+                <InsertionPoint
+                  onClick={() => setActiveInsertionPoint('end')}
+                  isActive={activeInsertionPoint === 'end'}
+                />
+              )}
+            </Box>
+          </Box>
+        )}
+
         {/* End zone drop target - shown when dragging, especially useful when last task is locked */}
         {tasks.length > 0 && (
           <EndZoneDropTarget
@@ -240,7 +332,7 @@ export const Timeline = () => {
       {tasks.length > 0 && (
         <Box sx={{ mt: 3, textAlign: 'center' }}>
           <Typography variant="body2" color="text.secondary" sx={{ fontSize: '12px' }}>
-            Tip: Create tasks with [+] at top, then drag to reorder
+            Tip: Create tasks with [+] at top, then drag to reorder.
           </Typography>
         </Box>
       )}
diff --git a/src/store/taskStore.ts b/src/store/taskStore.ts
index 455b3cd..04e71bb 100644
--- a/src/store/taskStore.ts
+++ b/src/store/taskStore.ts
@@ -82,7 +82,7 @@ export const useTaskStore = create<TaskStore>((set, get) => ({
    * The afterTaskId parameter is now used as a hint, but the actual insertion
    * position is calculated based on available slots
    */
-  insertTask: (afterTaskId, taskData) => {
+  insertTask: (_afterTaskId, taskData) => {
     const currentTasks = get().tasks
     const currentTaskCount = currentTasks.length
 
diff --git a/src/test/insertionLogic.test.ts b/src/test/insertionLogic.test.ts
index 284384d..a03e3bf 100644
--- a/src/test/insertionLogic.test.ts
+++ b/src/test/insertionLogic.test.ts
@@ -1,6 +1,5 @@
 import { describe, it, expect, beforeEach } from 'vitest'
 import { useTaskStore } from '../store/taskStore'
-import { Task } from '../types'
 
 /**
  * Phase 4 Test Cases: Insertion Logic
@@ -16,7 +15,6 @@ import { Task } from '../types'
 describe('Insertion Logic', () => {
   beforeEach(() => {
     // Reset store state before each test
-    const store = useTaskStore.getState()
     // Clear all tasks by setting empty array
     useTaskStore.setState({ tasks: [] })
     localStorage.clear()
@@ -333,8 +331,7 @@ describe('Insertion Logic', () => {
       
       // Verify Task C starts after Task B
       const taskBEnd = new Date(taskB.startTime.getTime() + taskB.durationMinutes * 60000)
-      // Task C should start at or after Task B ends
-      // Note: The actual implementation may recalculate times
+      expect(taskC.startTime.getTime()).toBeGreaterThanOrEqual(taskBEnd.getTime() - 1000)
     })
   })
 
@@ -507,7 +504,7 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      let tasks = useTaskStore.getState().tasks
+      const tasks = useTaskStore.getState().tasks
       
       // Non-overlapping tasks should not be flagged
       expect(tasks[0].isOverlapping).toBe(false)
diff --git a/src/test/setup.ts b/src/test/setup.ts
index fd4104f..1180556 100644
--- a/src/test/setup.ts
+++ b/src/test/setup.ts
@@ -1,4 +1,5 @@
 import '@testing-library/jest-dom'
+import { beforeEach } from 'vitest'
 
 // Mock crypto.randomUUID for tests
 if (!globalThis.crypto) {
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
index 8dc452d..5440b63 100644
--- a/src/utils/storage.ts
+++ b/src/utils/storage.ts
@@ -11,9 +11,9 @@ const STORAGE_KEY = 'time-block-app-tasks'
 export const saveTasksToStorage = (tasks: Task[]): void => {
   try {
     // Remove temporary fields before saving
-    const tasksToSave = tasks.map(({ isNew, ...task }) => task)
+    const tasksToSave = tasks.map(({ isNew: _isNew, ...task }) => task)
 
-    const serialized = JSON.stringify(tasksToSave, (key, value) => {
+    const serialized = JSON.stringify(tasksToSave, (_key, value) => {
       // Convert Date objects to ISO strings for storage
       if (value instanceof Date) {
         return value.toISOString()

From 3dc13f3cff9a0b0dc74800cc0c48fd83721d99f1 Mon Sep 17 00:00:00 2001
From: Dang Tran <91554483+BrooklynD23@users.noreply.github.com>
Date: Tue, 27 Jan 2026 12:22:18 -0800
Subject: [PATCH 8/9] Add calendar day navigation and multi-day task storage

---
 SessionProgess.md               |  70 +++++++++++++++++++
 src/App.tsx                     |   8 ++-
 src/components/CalendarView.tsx | 110 +++++++++++++++++++++++++++++
 src/components/ComingSoon.tsx   |  21 ++++++
 src/components/Timeline.tsx     |  60 ++++++++++++++--
 src/store/taskStore.ts          | 100 +++++++++++++++++++--------
 src/test/insertionLogic.test.ts | 119 ++++++++++++++++++++------------
 src/types/index.ts              |  11 ++-
 src/utils/date.ts               |  18 +++++
 src/utils/dragLogic.ts          |  15 ++--
 src/utils/storage.ts            |  91 +++++++++++++++++++-----
 src/utils/timeCalculations.ts   |  28 ++++++--
 12 files changed, 535 insertions(+), 116 deletions(-)
 create mode 100644 SessionProgess.md
 create mode 100644 src/components/CalendarView.tsx
 create mode 100644 src/components/ComingSoon.tsx
 create mode 100644 src/utils/date.ts

diff --git a/SessionProgess.md b/SessionProgess.md
new file mode 100644
index 0000000..e6911c1
--- /dev/null
+++ b/SessionProgess.md
@@ -0,0 +1,70 @@
+# SessionProgess.md
+
+## Session
+
+- Date: 2026-01-27
+- Goal: Multi-day navigation + Calendar-driven day selection for planning across days (no completion tracking in this session)
+
+## Design Notes (aligned to DESIGN_DOCS.md)
+
+- Minimal, Notion-inspired, airy surfaces
+- Soft borders and subtle shadows
+- Black/white base with green task blocks
+- Navigation stays as a left rail
+- No task completion tracking (explicitly out of scope per DESIGN_DOCS.md)
+
+## Phased Plan
+
+### Phase 1 — Data model + persistence (multi-day)
+
+- Add `selectedDateKey` + `tasksByDate` to app state
+- Persist state in localStorage v2 format
+- Migrate legacy localStorage payload (single array) into today’s bucket
+
+### Phase 2 — Day navigation
+
+- Make day header controls (Yesterday / Tomorrow) actually change the selected day
+- Anchor time calculations and insert-slot search to the selected day
+
+### Phase 3 — Calendar UX
+
+- Calendar tab shows a week strip centered on selected day
+- Clicking a date updates the selected day
+- A “Today” shortcut resets to today
+- Timeline renders below the calendar strip for the selected day
+
+### Phase 4 — Non-core pages
+
+- Tasks page: Coming Soon
+- Stats page: Coming Soon
+
+### Phase 5 — Verification + ship
+
+- Update tests for new store shape + new storage format
+- Run: tests, lint, build
+- Commit changes
+
+## Work Completed
+
+- Multi-day store (`selectedDateKey`, `tasksByDate`) + storage migration/persistence
+- Day navigation wired into Timeline
+- CalendarView implemented (week strip + Today button + Timeline)
+- Tasks/Stats/Settings now show Coming Soon placeholder
+- Tests updated to pass with multi-day store + v2 localStorage
+
+## Remaining To-Do
+
+- Run lint + build
+- Commit with a clear message describing multi-day calendar navigation
+
+## Key Implementation Files
+
+- `src/utils/date.ts`
+- `src/utils/storage.ts`
+- `src/store/taskStore.ts`
+- `src/utils/timeCalculations.ts`
+- `src/components/Timeline.tsx`
+- `src/components/CalendarView.tsx`
+- `src/components/ComingSoon.tsx`
+- `src/App.tsx`
+- `src/test/insertionLogic.test.ts`
diff --git a/src/App.tsx b/src/App.tsx
index e2187fb..c053fca 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,9 +6,10 @@ import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutli
 import BarChartOutlinedIcon from '@mui/icons-material/BarChartOutlined'
 import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined'
 import { theme } from './theme/theme'
-import { Timeline } from './components/Timeline'
 import { useEffect, useState } from 'react'
 import { useTaskStore } from './store/taskStore'
+import { CalendarView } from './components/CalendarView'
+import { ComingSoon } from './components/ComingSoon'
 
 function App() {
   // Expose store to window for console testing (optional)
@@ -104,7 +105,10 @@ function App() {
           }}
         >
           <Box sx={{ width: '100%', maxWidth: 980 }}>
-            <Timeline />
+            {activeNav === 'calendar' && <CalendarView />}
+            {activeNav === 'tasks' && <ComingSoon title="Tasks" />}
+            {activeNav === 'stats' && <ComingSoon title="Stats" />}
+            {activeNav === 'settings' && <ComingSoon title="Settings" />}
           </Box>
         </Box>
       </Box>
diff --git a/src/components/CalendarView.tsx b/src/components/CalendarView.tsx
new file mode 100644
index 0000000..e8ac560
--- /dev/null
+++ b/src/components/CalendarView.tsx
@@ -0,0 +1,110 @@
+import { Box, ButtonBase, Typography } from '@mui/material'
+import { useMemo } from 'react'
+import { useTaskStore } from '../store/taskStore'
+import { addDays, dateKeyToDate, getLocalDateKey } from '../utils/date'
+import { Timeline } from './Timeline'
+
+export const CalendarView = () => {
+  const selectedDateKey = useTaskStore((state) => state.selectedDateKey)
+  const setSelectedDateKey = useTaskStore((state) => state.setSelectedDateKey)
+
+  const todayKey = useMemo(() => getLocalDateKey(new Date()), [])
+
+  const weekKeys = useMemo(() => {
+    // Build a 7-day strip centered around the selected day
+    return Array.from({ length: 7 }, (_v, i) => addDays(selectedDateKey, i - 3))
+  }, [selectedDateKey])
+
+  const selectedDate = dateKeyToDate(selectedDateKey)
+  const monthLabel = selectedDate.toLocaleDateString(undefined, {
+    month: 'long',
+    year: 'numeric',
+  })
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Box sx={{ pt: { xs: 3, sm: 4 }, pb: { xs: 1.5, sm: 2.5 } }}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'baseline',
+            justifyContent: 'space-between',
+            gap: 2,
+            px: { xs: 0, sm: 1 },
+            mb: 2,
+          }}
+        >
+          <Typography sx={{ fontSize: 18, fontWeight: 700 }}>{monthLabel}</Typography>
+
+          <ButtonBase
+            onClick={() => setSelectedDateKey(todayKey)}
+            sx={{
+              borderRadius: 999,
+              px: 1.5,
+              py: 0.75,
+              border: '1px solid rgba(0,0,0,0.08)',
+              backgroundColor: 'rgba(255,255,255,0.7)',
+              boxShadow: '0 10px 20px rgba(0,0,0,0.06)',
+            }}
+          >
+            <Typography sx={{ fontSize: 13, fontWeight: 600 }}>Today</Typography>
+          </ButtonBase>
+        </Box>
+
+        <Box
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(7, 1fr)',
+            gap: 1,
+            px: { xs: 0, sm: 1 },
+          }}
+        >
+          {weekKeys.map((key) => {
+            const date = dateKeyToDate(key)
+            const isSelected = key === selectedDateKey
+            const isToday = key === todayKey
+
+            return (
+              <ButtonBase
+                key={key}
+                onClick={() => setSelectedDateKey(key)}
+                sx={{
+                  borderRadius: 14,
+                  py: 1.1,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 0.25,
+                  border: isSelected ? '1px solid rgba(0,0,0,0.22)' : '1px solid rgba(0,0,0,0.06)',
+                  backgroundColor: isSelected ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.55)',
+                  boxShadow: isSelected ? '0 12px 26px rgba(0,0,0,0.10)' : '0 8px 20px rgba(0,0,0,0.05)',
+                }}
+              >
+                <Typography
+                  sx={{
+                    fontSize: 11,
+                    fontWeight: 700,
+                    color: isSelected ? 'text.primary' : 'rgba(0,0,0,0.55)',
+                    letterSpacing: '0.06em',
+                    textTransform: 'uppercase',
+                  }}
+                >
+                  {date.toLocaleDateString(undefined, { weekday: 'short' })}
+                </Typography>
+
+                <Typography sx={{ fontSize: 16, fontWeight: 800, lineHeight: 1 }}>
+                  {date.getDate()}
+                </Typography>
+
+                <Typography sx={{ fontSize: 11, color: 'rgba(0,0,0,0.55)' }}>
+                  {isToday ? 'Today' : ' '}
+                </Typography>
+              </ButtonBase>
+            )
+          })}
+        </Box>
+      </Box>
+
+      <Timeline />
+    </Box>
+  )
+}
diff --git a/src/components/ComingSoon.tsx b/src/components/ComingSoon.tsx
new file mode 100644
index 0000000..a5fa8cd
--- /dev/null
+++ b/src/components/ComingSoon.tsx
@@ -0,0 +1,21 @@
+import { Box, Typography } from '@mui/material'
+
+export const ComingSoon = ({ title }: { title: string }) => {
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        mt: { xs: 4, sm: 6 },
+        p: { xs: 4, sm: 6 },
+        textAlign: 'center',
+        backgroundColor: 'rgba(255,255,255,0.65)',
+        borderRadius: '16px',
+        border: '1px solid rgba(0,0,0,0.06)',
+        boxShadow: '0 10px 26px rgba(0,0,0,0.06)',
+      }}
+    >
+      <Typography sx={{ fontSize: 22, fontWeight: 800, mb: 1 }}>{title}</Typography>
+      <Typography color="text.secondary">Coming Soon</Typography>
+    </Box>
+  )
+}
diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
index 0699f33..ccbd6c0 100644
--- a/src/components/Timeline.tsx
+++ b/src/components/Timeline.tsx
@@ -10,6 +10,7 @@ import { getDragAction } from '../utils/dragLogic'
 import AddIcon from '@mui/icons-material/Add'
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
 import ChevronRightIcon from '@mui/icons-material/ChevronRight'
+import { addDays, dateKeyToDate, getLocalDateKey } from '../utils/date'
 
 /**
  * Timeline component - main container for the time blocking interface
@@ -20,7 +21,10 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight'
  * - Auto-calculates visible time range
  */
 export const Timeline = () => {
-  const tasks = useTaskStore((state) => state.tasks)
+  const selectedDateKey = useTaskStore((state) => state.selectedDateKey)
+  const tasksByDate = useTaskStore((state) => state.tasksByDate)
+  const setSelectedDateKey = useTaskStore((state) => state.setSelectedDateKey)
+  const tasks = tasksByDate[selectedDateKey] ?? []
   const insertTask = useTaskStore((state) => state.insertTask)
   const deleteTask = useTaskStore((state) => state.deleteTask)
   const toggleLock = useTaskStore((state) => state.toggleLock)
@@ -108,8 +112,10 @@ export const Timeline = () => {
     setDraggingTaskId(null)
   }
 
-  const currentDate = new Date()
-  const dateLabel = currentDate.toLocaleDateString(undefined, {
+  const selectedDate = dateKeyToDate(selectedDateKey)
+  const todayKey = getLocalDateKey(new Date())
+  const isToday = selectedDateKey === todayKey
+  const dateLabel = selectedDate.toLocaleDateString(undefined, {
     weekday: 'long',
     month: 'short',
     day: 'numeric',
@@ -166,7 +172,28 @@ export const Timeline = () => {
           color: 'text.secondary',
         }}
       >
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+        <Box
+          role="button"
+          tabIndex={0}
+          onClick={() => setSelectedDateKey(addDays(selectedDateKey, -1))}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault()
+              setSelectedDateKey(addDays(selectedDateKey, -1))
+            }
+          }}
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5,
+            cursor: 'pointer',
+            userSelect: 'none',
+            px: 1,
+            py: 0.5,
+            borderRadius: 999,
+            '&:hover': { backgroundColor: 'rgba(0,0,0,0.04)' },
+          }}
+        >
           <ChevronLeftIcon sx={{ fontSize: 18, opacity: 0.6 }} />
           <Typography variant="body2" sx={{ fontSize: 14, opacity: 0.75 }}>
             Yesterday
@@ -174,10 +201,31 @@ export const Timeline = () => {
         </Box>
 
         <Typography sx={{ fontSize: 16, fontWeight: 700, color: 'text.primary' }}>
-          {dateLabel}
+          {isToday ? `Today · ${dateLabel}` : dateLabel}
         </Typography>
 
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+        <Box
+          role="button"
+          tabIndex={0}
+          onClick={() => setSelectedDateKey(addDays(selectedDateKey, 1))}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault()
+              setSelectedDateKey(addDays(selectedDateKey, 1))
+            }
+          }}
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5,
+            cursor: 'pointer',
+            userSelect: 'none',
+            px: 1,
+            py: 0.5,
+            borderRadius: 999,
+            '&:hover': { backgroundColor: 'rgba(0,0,0,0.04)' },
+          }}
+        >
           <Typography variant="body2" sx={{ fontSize: 14, opacity: 0.75 }}>
             Tomorrow
           </Typography>
diff --git a/src/store/taskStore.ts b/src/store/taskStore.ts
index 04e71bb..cf160f5 100644
--- a/src/store/taskStore.ts
+++ b/src/store/taskStore.ts
@@ -4,6 +4,7 @@ import {
   saveTasksToStorage,
   loadTasksFromStorage,
 } from '../utils/storage'
+import { dateKeyToDate } from '../utils/date'
 import { recalculateTaskTimes, findNextAvailableSlot } from '../utils/timeCalculations'
 import {
   executeSwap,
@@ -20,18 +21,26 @@ import { taskColors } from '../theme/theme'
  */
 export const useTaskStore = create<TaskStore>((set, get) => ({
   // Initial state
-  tasks: loadTasksFromStorage(),
+  ...loadTasksFromStorage(),
   dragConfig: {
     swapThreshold: 0.5, // 50% into target task triggers SWAP
   },
 
+  // Date navigation
+  setSelectedDateKey: (dateKey) => {
+    set({ selectedDateKey: dateKey })
+    saveTasksToStorage(get().tasksByDate, dateKey)
+  },
+
   // CRUD Operations
 
   /**
    * Add a new task
    */
   addTask: (taskData) => {
-    const currentTaskCount = get().tasks.length
+    const { selectedDateKey, tasksByDate } = get()
+    const currentTasks = tasksByDate[selectedDateKey] ?? []
+    const currentTaskCount = currentTasks.length
     const newTask: Task = {
       ...taskData,
       id: crypto.randomUUID(),
@@ -40,39 +49,49 @@ export const useTaskStore = create<TaskStore>((set, get) => ({
       color: taskColors[currentTaskCount % taskColors.length], // Assign color based on current count
     }
 
-    const updatedTasks = recalculateTaskTimes([...get().tasks, newTask])
+    const baseDate = dateKeyToDate(selectedDateKey)
+    const updatedTasks = recalculateTaskTimes([...currentTasks, newTask], baseDate)
     const tasksWithOverlaps = detectOverlaps(updatedTasks)
 
-    set({ tasks: tasksWithOverlaps })
-    saveTasksToStorage(tasksWithOverlaps)
+    const nextTasksByDate = { ...tasksByDate, [selectedDateKey]: tasksWithOverlaps }
+    set({ tasksByDate: nextTasksByDate })
+    saveTasksToStorage(nextTasksByDate, selectedDateKey)
   },
 
   /**
    * Update an existing task
    */
   updateTask: (id, updates) => {
-    const updatedTasks = get().tasks.map((task) =>
+    const { selectedDateKey, tasksByDate } = get()
+    const currentTasks = tasksByDate[selectedDateKey] ?? []
+    const updatedTasks = currentTasks.map((task) =>
       task.id === id ? { ...task, ...updates } : task
     )
 
-    const recalculated = recalculateTaskTimes(updatedTasks)
+    const baseDate = dateKeyToDate(selectedDateKey)
+    const recalculated = recalculateTaskTimes(updatedTasks, baseDate)
     const tasksWithOverlaps = detectOverlaps(recalculated)
 
-    set({ tasks: tasksWithOverlaps })
-    saveTasksToStorage(tasksWithOverlaps)
+    const nextTasksByDate = { ...tasksByDate, [selectedDateKey]: tasksWithOverlaps }
+    set({ tasksByDate: nextTasksByDate })
+    saveTasksToStorage(nextTasksByDate, selectedDateKey)
   },
 
   /**
    * Delete a task
    */
   deleteTask: (id) => {
-    const filtered = get().tasks.filter((task) => task.id !== id)
+    const { selectedDateKey, tasksByDate } = get()
+    const currentTasks = tasksByDate[selectedDateKey] ?? []
+    const filtered = currentTasks.filter((task) => task.id !== id)
     const reordered = reorderTasks(filtered)
-    const recalculated = recalculateTaskTimes(reordered)
+    const baseDate = dateKeyToDate(selectedDateKey)
+    const recalculated = recalculateTaskTimes(reordered, baseDate)
     const tasksWithOverlaps = detectOverlaps(recalculated)
 
-    set({ tasks: tasksWithOverlaps })
-    saveTasksToStorage(tasksWithOverlaps)
+    const nextTasksByDate = { ...tasksByDate, [selectedDateKey]: tasksWithOverlaps }
+    set({ tasksByDate: nextTasksByDate })
+    saveTasksToStorage(nextTasksByDate, selectedDateKey)
   },
 
   // Task Operations
@@ -83,13 +102,18 @@ export const useTaskStore = create<TaskStore>((set, get) => ({
    * position is calculated based on available slots
    */
   insertTask: (_afterTaskId, taskData) => {
-    const currentTasks = get().tasks
+    const { selectedDateKey, tasksByDate } = get()
+    const currentTasks = tasksByDate[selectedDateKey] ?? []
     const currentTaskCount = currentTasks.length
 
+    const baseDate = dateKeyToDate(selectedDateKey)
+
     // Find the next available slot for the new task
     const { slotStart, insertAfterTaskId } = findNextAvailableSlot(
       currentTasks,
-      taskData.durationMinutes
+      taskData.durationMinutes,
+      baseDate,
+      _afterTaskId
     )
 
     const newTask: Task = {
@@ -120,11 +144,12 @@ export const useTaskStore = create<TaskStore>((set, get) => ({
     }
 
     const reordered = reorderTasks(updatedTasks)
-    const recalculated = recalculateTaskTimes(reordered)
+    const recalculated = recalculateTaskTimes(reordered, baseDate)
     const tasksWithOverlaps = detectOverlaps(recalculated)
 
-    set({ tasks: tasksWithOverlaps })
-    saveTasksToStorage(tasksWithOverlaps)
+    const nextTasksByDate = { ...tasksByDate, [selectedDateKey]: tasksWithOverlaps }
+    set({ tasksByDate: nextTasksByDate })
+    saveTasksToStorage(nextTasksByDate, selectedDateKey)
 
     // Return the new task ID for highlighting
     return newTask.id
@@ -134,12 +159,16 @@ export const useTaskStore = create<TaskStore>((set, get) => ({
    * Swap two tasks (exchange positions)
    */
   swapTasks: (taskId1, taskId2) => {
-    const result = executeSwap(get().tasks, taskId1, taskId2)
+    const { selectedDateKey, tasksByDate } = get()
+    const currentTasks = tasksByDate[selectedDateKey] ?? []
+    const baseDate = dateKeyToDate(selectedDateKey)
+    const result = executeSwap(currentTasks, taskId1, taskId2, baseDate)
 
     if (result) {
       const tasksWithOverlaps = detectOverlaps(result)
-      set({ tasks: tasksWithOverlaps })
-      saveTasksToStorage(tasksWithOverlaps)
+      const nextTasksByDate = { ...tasksByDate, [selectedDateKey]: tasksWithOverlaps }
+      set({ tasksByDate: nextTasksByDate })
+      saveTasksToStorage(nextTasksByDate, selectedDateKey)
     }
     // If result is null, operation failed (e.g., locked task) - do nothing
   },
@@ -148,12 +177,16 @@ export const useTaskStore = create<TaskStore>((set, get) => ({
    * Push task to target position (dragged task takes target's spot)
    */
   pushTask: (draggedTaskId, targetTaskId) => {
-    const result = executePush(get().tasks, draggedTaskId, targetTaskId)
+    const { selectedDateKey, tasksByDate } = get()
+    const currentTasks = tasksByDate[selectedDateKey] ?? []
+    const baseDate = dateKeyToDate(selectedDateKey)
+    const result = executePush(currentTasks, draggedTaskId, targetTaskId, baseDate)
 
     if (result) {
       const tasksWithOverlaps = detectOverlaps(result)
-      set({ tasks: tasksWithOverlaps })
-      saveTasksToStorage(tasksWithOverlaps)
+      const nextTasksByDate = { ...tasksByDate, [selectedDateKey]: tasksWithOverlaps }
+      set({ tasksByDate: nextTasksByDate })
+      saveTasksToStorage(nextTasksByDate, selectedDateKey)
     }
     // If result is null, operation failed (e.g., locked conflict) - do nothing
   },
@@ -162,12 +195,16 @@ export const useTaskStore = create<TaskStore>((set, get) => ({
    * Move task to the end of the list (useful for moving past locked tasks)
    */
   moveToEnd: (taskId) => {
-    const result = moveTaskToEnd(get().tasks, taskId)
+    const { selectedDateKey, tasksByDate } = get()
+    const currentTasks = tasksByDate[selectedDateKey] ?? []
+    const baseDate = dateKeyToDate(selectedDateKey)
+    const result = moveTaskToEnd(currentTasks, taskId, baseDate)
 
     if (result) {
       const tasksWithOverlaps = detectOverlaps(result)
-      set({ tasks: tasksWithOverlaps })
-      saveTasksToStorage(tasksWithOverlaps)
+      const nextTasksByDate = { ...tasksByDate, [selectedDateKey]: tasksWithOverlaps }
+      set({ tasksByDate: nextTasksByDate })
+      saveTasksToStorage(nextTasksByDate, selectedDateKey)
     }
   },
 
@@ -177,12 +214,15 @@ export const useTaskStore = create<TaskStore>((set, get) => ({
    * Toggle lock state of a task
    */
   toggleLock: (taskId) => {
-    const updatedTasks = get().tasks.map((task) =>
+    const { selectedDateKey, tasksByDate } = get()
+    const currentTasks = tasksByDate[selectedDateKey] ?? []
+    const updatedTasks = currentTasks.map((task) =>
       task.id === taskId ? { ...task, isLocked: !task.isLocked } : task
     )
 
-    set({ tasks: updatedTasks })
-    saveTasksToStorage(updatedTasks)
+    const nextTasksByDate = { ...tasksByDate, [selectedDateKey]: updatedTasks }
+    set({ tasksByDate: nextTasksByDate })
+    saveTasksToStorage(nextTasksByDate, selectedDateKey)
   },
 
   /**
diff --git a/src/test/insertionLogic.test.ts b/src/test/insertionLogic.test.ts
index a03e3bf..86adfad 100644
--- a/src/test/insertionLogic.test.ts
+++ b/src/test/insertionLogic.test.ts
@@ -1,5 +1,7 @@
 import { describe, it, expect, beforeEach } from 'vitest'
 import { useTaskStore } from '../store/taskStore'
+import { getLocalDateKey } from '../utils/date'
+import { Task } from '../types'
 
 /**
  * Phase 4 Test Cases: Insertion Logic
@@ -15,8 +17,8 @@ import { useTaskStore } from '../store/taskStore'
 describe('Insertion Logic', () => {
   beforeEach(() => {
     // Reset store state before each test
-    // Clear all tasks by setting empty array
-    useTaskStore.setState({ tasks: [] })
+    const todayKey = getLocalDateKey(new Date())
+    useTaskStore.setState({ selectedDateKey: todayKey, tasksByDate: {} })
     localStorage.clear()
   })
 
@@ -33,7 +35,8 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      const tasks = useTaskStore.getState().tasks
+      const { selectedDateKey, tasksByDate } = useTaskStore.getState()
+      const tasks = tasksByDate[selectedDateKey] ?? []
       expect(tasks).toHaveLength(1)
       expect(tasks[0].title).toBe('First Task')
       expect(tasks[0].durationMinutes).toBe(60)
@@ -63,7 +66,8 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      const tasks = useTaskStore.getState().tasks
+      const { selectedDateKey, tasksByDate } = useTaskStore.getState()
+      const tasks = tasksByDate[selectedDateKey] ?? []
       expect(tasks).toHaveLength(2)
       
       // Both tasks should start at 8:00 AM since new task gets first slot
@@ -90,7 +94,8 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      const taskA = useTaskStore.getState().tasks[0]
+      const { selectedDateKey, tasksByDate } = useTaskStore.getState()
+      const taskA = (tasksByDate[selectedDateKey] ?? [])[0]
 
       // Add Task B (1h) - will be placed after Task A
       store.insertTask(taskA.id, {
@@ -110,7 +115,8 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      const tasks = useTaskStore.getState().tasks
+      const { selectedDateKey: key2, tasksByDate: byDate2 } = useTaskStore.getState()
+      const tasks = byDate2[key2] ?? []
       expect(tasks).toHaveLength(3)
 
       // Verify all three tasks exist with valid times
@@ -136,7 +142,8 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      const task1 = useTaskStore.getState().tasks[0]
+      const { selectedDateKey, tasksByDate } = useTaskStore.getState()
+      const task1 = (tasksByDate[selectedDateKey] ?? [])[0]
 
       store.insertTask(task1.id, {
         title: 'Task 2',
@@ -146,7 +153,7 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      let tasks = useTaskStore.getState().tasks
+      let tasks = (useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? [])
       const task2 = tasks.find(t => t.title === 'Task 2')!
 
       store.insertTask(task2.id, {
@@ -166,7 +173,7 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      tasks = useTaskStore.getState().tasks
+      tasks = (useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? [])
       expect(tasks).toHaveLength(4)
 
       // All tasks should have valid start times (no undefined or NaN)
@@ -190,7 +197,10 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      const taskA = useTaskStore.getState().tasks[0]
+      const taskA = (
+        useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ??
+          []
+      )[0]
 
       // Create Task B and lock it
       store.insertTask(taskA.id, {
@@ -201,13 +211,13 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      let tasks = useTaskStore.getState().tasks
+      let tasks = (useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? [])
       const taskB = tasks.find(t => t.title === 'Task B')!
       
       // Lock Task B
       store.toggleLock(taskB.id)
 
-      tasks = useTaskStore.getState().tasks
+      tasks = (useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? [])
       const lockedTaskB = tasks.find(t => t.title === 'Task B')!
       expect(lockedTaskB.isLocked).toBe(true)
 
@@ -223,7 +233,7 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      tasks = useTaskStore.getState().tasks
+      tasks = (useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? [])
       expect(tasks).toHaveLength(3)
 
       // Task B should remain at same time (locked)
@@ -243,7 +253,7 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      let tasks = useTaskStore.getState().tasks
+      let tasks = (useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? [])
       const taskA = tasks[0]
 
       // Create Task B at 9:00 AM
@@ -255,13 +265,13 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      tasks = useTaskStore.getState().tasks
+      tasks = (useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? [])
       const taskB = tasks.find(t => t.title === 'Task B')!
 
       // Lock Task B at 9:00 AM
       store.toggleLock(taskB.id)
       
-      tasks = useTaskStore.getState().tasks
+      tasks = (useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? [])
       const lockedTaskB = tasks.find(t => t.title === 'Task B')!
       const taskBStartHour = lockedTaskB.startTime.getHours()
       const taskBStartMinute = lockedTaskB.startTime.getMinutes()
@@ -275,7 +285,8 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      tasks = useTaskStore.getState().tasks
+      tasks =
+        useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? []
       expect(tasks).toHaveLength(3)
 
       // Task B should still be at the same time
@@ -298,7 +309,8 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      let tasks = useTaskStore.getState().tasks
+      let tasks =
+        useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? []
       const taskA = tasks[0]
 
       // Create second task
@@ -310,8 +322,9 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      tasks = useTaskStore.getState().tasks
-      const taskB = tasks.find(t => t.title === 'Task B')!
+      tasks =
+        useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? []
+      const taskB = tasks.find((t: Task) => t.title === 'Task B')!
 
       // Insert at end (after Task B)
       store.insertTask(taskB.id, {
@@ -322,11 +335,12 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      tasks = useTaskStore.getState().tasks
+      tasks =
+        useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? []
       expect(tasks).toHaveLength(3)
 
       // Task C should be scheduled after Task B ends
-      const taskC = tasks.find(t => t.title === 'Task C (End)')!
+      const taskC = tasks.find((t: Task) => t.title === 'Task C (End)')!
       expect(taskC).toBeDefined()
       
       // Verify Task C starts after Task B
@@ -348,7 +362,7 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      let tasks = useTaskStore.getState().tasks
+      let tasks = (useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? [])
       let lastTask = tasks[tasks.length - 1]
 
       store.insertTask(lastTask.id, {
@@ -359,7 +373,7 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      tasks = useTaskStore.getState().tasks
+      tasks = (useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? [])
       lastTask = tasks.find(t => t.title === 'Mid-Morning')!
 
       store.insertTask(lastTask.id, {
@@ -370,7 +384,7 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      tasks = useTaskStore.getState().tasks
+      tasks = (useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? [])
       lastTask = tasks.find(t => t.title === 'Late Morning')!
 
       store.insertTask(lastTask.id, {
@@ -381,7 +395,8 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      tasks = useTaskStore.getState().tasks
+      tasks =
+        useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? []
       expect(tasks).toHaveLength(4)
 
       // Verify all tasks have valid, non-overlapping times
@@ -417,7 +432,7 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      let tasks = useTaskStore.getState().tasks
+      let tasks = (useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? [])
       expect(tasks[0].color).toBeDefined()
       expect(tasks[0].color).toBeTruthy()
       
@@ -430,7 +445,7 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      tasks = useTaskStore.getState().tasks
+      tasks = (useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? [])
       expect(tasks[1].color).toBeDefined()
       
       // Colors should cycle through the palette
@@ -454,7 +469,8 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      let tasks = useTaskStore.getState().tasks
+      let tasks =
+        useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? []
       const taskA = tasks[0]
 
       store.insertTask(taskA.id, {
@@ -465,8 +481,9 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      tasks = useTaskStore.getState().tasks
-      const taskB = tasks.find(t => t.title === 'Task B')!
+      tasks =
+        useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? []
+      const taskB = tasks.find((t: Task) => t.title === 'Task B')!
 
       store.insertTask(taskB.id, {
         title: 'Task C',
@@ -476,16 +493,16 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      tasks = useTaskStore.getState().tasks
+      tasks = (useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? [])
       
       // All order values should be unique
-      const orders = tasks.map(t => t.order)
+      const orders = tasks.map((t: Task) => t.order)
       const uniqueOrders = [...new Set(orders)]
       expect(uniqueOrders).toHaveLength(tasks.length)
 
       // Orders should be sequential (0, 1, 2)
-      orders.sort((a, b) => a - b)
-      orders.forEach((order, index) => {
+      orders.sort((a: number, b: number) => a - b)
+      orders.forEach((order: number, index: number) => {
         expect(order).toBe(index)
       })
     })
@@ -504,7 +521,7 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      const tasks = useTaskStore.getState().tasks
+      const tasks = (useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? [])
       
       // Non-overlapping tasks should not be flagged
       expect(tasks[0].isOverlapping).toBe(false)
@@ -521,7 +538,8 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      let tasks = useTaskStore.getState().tasks
+      let tasks =
+        useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? []
       const taskA = tasks[0]
 
       store.insertTask(taskA.id, {
@@ -532,10 +550,10 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      tasks = useTaskStore.getState().tasks
+      tasks = (useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? [])
       
       // Both tasks should not be overlapping
-      tasks.forEach(task => {
+      tasks.forEach((task: Task) => {
         expect(task.isOverlapping).toBe(false)
       })
     })
@@ -559,10 +577,16 @@ describe('Insertion Logic', () => {
       const stored = localStorage.getItem(STORAGE_KEY)
       expect(stored).toBeTruthy()
       
-      const parsedTasks = JSON.parse(stored!)
-      expect(parsedTasks).toHaveLength(1)
-      expect(parsedTasks[0].title).toBe('Persistent Task')
-      expect(parsedTasks[0].durationMinutes).toBe(45)
+      const parsedState = JSON.parse(stored!)
+      expect(parsedState.version).toBe(2)
+      expect(parsedState.selectedDateKey).toBeTruthy()
+      expect(parsedState.tasksByDate).toBeTruthy()
+
+      const dateKey = parsedState.selectedDateKey
+      const tasks = parsedState.tasksByDate[dateKey]
+      expect(tasks).toHaveLength(1)
+      expect(tasks[0].title).toBe('Persistent Task')
+      expect(tasks[0].durationMinutes).toBe(45)
     })
 
     it('should persist multiple insertions correctly', () => {
@@ -576,7 +600,7 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      let tasks = useTaskStore.getState().tasks
+      let tasks = (useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? [])
       const task1 = tasks[0]
 
       store.insertTask(task1.id, {
@@ -587,7 +611,7 @@ describe('Insertion Logic', () => {
         startTime: new Date(),
       })
 
-      tasks = useTaskStore.getState().tasks
+      tasks = (useTaskStore.getState().tasksByDate[useTaskStore.getState().selectedDateKey] ?? [])
       const task2 = tasks.find(t => t.title === 'Task 2')!
 
       store.insertTask(task2.id, {
@@ -600,7 +624,10 @@ describe('Insertion Logic', () => {
 
       const stored = localStorage.getItem(STORAGE_KEY)
       expect(stored).toBeTruthy()
-      const parsedTasks = JSON.parse(stored!)
+      const parsedState = JSON.parse(stored!)
+      expect(parsedState.version).toBe(2)
+      const dateKey = parsedState.selectedDateKey
+      const parsedTasks = parsedState.tasksByDate[dateKey]
       expect(parsedTasks).toHaveLength(3)
     })
   })
diff --git a/src/types/index.ts b/src/types/index.ts
index b6eb381..cf41168 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -25,7 +25,8 @@ export interface DragConfig {
  * Application state interface
  */
 export interface AppState {
-  tasks: Task[]
+  selectedDateKey: string
+  tasksByDate: Record<string, Task[]>
   dragConfig: DragConfig
 }
 
@@ -45,13 +46,19 @@ export interface DragPreview {
  * Zustand store interface
  */
 export interface TaskStore extends AppState {
+  // Date navigation
+  setSelectedDateKey: (dateKey: string) => void
+
   // CRUD operations
   addTask: (task: Omit<Task, 'id' | 'createdAt' | 'color'>) => void
   updateTask: (id: string, updates: Partial<Task>) => void
   deleteTask: (id: string) => void
 
   // Task operations
-  insertTask: (afterTaskId: string | null, task: Omit<Task, 'id' | 'createdAt' | 'order' | 'color'>) => void
+  insertTask: (
+    afterTaskId: string | null,
+    task: Omit<Task, 'id' | 'createdAt' | 'order' | 'color'>
+  ) => void
   swapTasks: (taskId1: string, taskId2: string) => void
   pushTask: (draggedTaskId: string, targetTaskId: string) => void
   moveToEnd: (taskId: string) => void
diff --git a/src/utils/date.ts b/src/utils/date.ts
new file mode 100644
index 0000000..1e31cc8
--- /dev/null
+++ b/src/utils/date.ts
@@ -0,0 +1,18 @@
+export const getLocalDateKey = (date: Date): string => {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+export const dateKeyToDate = (dateKey: string): Date => {
+  const [year, month, day] = dateKey.split('-').map((n) => Number(n))
+  return new Date(year, month - 1, day, 12, 0, 0, 0)
+}
+
+export const addDays = (dateKey: string, deltaDays: number): string => {
+  const base = dateKeyToDate(dateKey)
+  const next = new Date(base)
+  next.setDate(next.getDate() + deltaDays)
+  return getLocalDateKey(next)
+}
diff --git a/src/utils/dragLogic.ts b/src/utils/dragLogic.ts
index 7f800f7..f749914 100644
--- a/src/utils/dragLogic.ts
+++ b/src/utils/dragLogic.ts
@@ -35,7 +35,8 @@ export const getDragAction = (
 export const executeSwap = (
   tasks: Task[],
   taskId1: string,
-  taskId2: string
+  taskId2: string,
+  baseDate: Date = new Date()
 ): Task[] | null => {
   const task1 = tasks.find((t) => t.id === taskId1)
   const task2 = tasks.find((t) => t.id === taskId2)
@@ -55,7 +56,7 @@ export const executeSwap = (
   })
 
   // Recalculate times based on new order
-  return recalculateTaskTimes(newTasks)
+  return recalculateTaskTimes(newTasks, baseDate)
 }
 
 /**
@@ -65,7 +66,8 @@ export const executeSwap = (
 export const executePush = (
   tasks: Task[],
   draggedTaskId: string,
-  targetTaskId: string
+  targetTaskId: string,
+  baseDate: Date = new Date()
 ): Task[] | null => {
   const draggedTask = tasks.find((t) => t.id === draggedTaskId)
   const targetTask = tasks.find((t) => t.id === targetTaskId)
@@ -112,7 +114,7 @@ export const executePush = (
   })
 
   // Recalculate times based on new order
-  return recalculateTaskTimes(reorderedTasks)
+  return recalculateTaskTimes(reorderedTasks, baseDate)
 }
 
 /**
@@ -184,7 +186,8 @@ export const reorderTasks = (tasks: Task[]): Task[] => {
  */
 export const moveTaskToEnd = (
   tasks: Task[],
-  draggedTaskId: string
+  draggedTaskId: string,
+  baseDate: Date = new Date()
 ): Task[] | null => {
   const draggedTask = tasks.find((t) => t.id === draggedTaskId)
 
@@ -212,5 +215,5 @@ export const moveTaskToEnd = (
   })
 
   // Recalculate times based on new order
-  return recalculateTaskTimes(reorderedTasks)
+  return recalculateTaskTimes(reorderedTasks, baseDate)
 }
\ No newline at end of file
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
index 5440b63..38cb99a 100644
--- a/src/utils/storage.ts
+++ b/src/utils/storage.ts
@@ -1,19 +1,39 @@
 import { Task } from '../types'
 import { taskColors } from '../theme/theme'
+import { getLocalDateKey } from './date'
 
 const STORAGE_KEY = 'time-block-app-tasks'
 
+interface StoredStateV2 {
+  version: 2
+  selectedDateKey: string
+  tasksByDate: Record<string, Task[]>
+}
+
 /**
  * Save tasks to localStorage
  * Handles Date serialization by converting to ISO strings
  * Removes temporary fields like `isNew` before saving
  */
-export const saveTasksToStorage = (tasks: Task[]): void => {
+export const saveTasksToStorage = (
+  tasksByDate: Record<string, Task[]>,
+  selectedDateKey: string
+): void => {
   try {
-    // Remove temporary fields before saving
-    const tasksToSave = tasks.map(({ isNew: _isNew, ...task }) => task)
+    const cleanedByDate: Record<string, Task[]> = Object.fromEntries(
+      Object.entries(tasksByDate).map(([dateKey, tasks]) => [
+        dateKey,
+        tasks.map(({ isNew: _isNew, ...task }) => task),
+      ])
+    )
 
-    const serialized = JSON.stringify(tasksToSave, (_key, value) => {
+    const payload: StoredStateV2 = {
+      version: 2,
+      selectedDateKey,
+      tasksByDate: cleanedByDate,
+    }
+
+    const serialized = JSON.stringify(payload, (_key, value) => {
       // Convert Date objects to ISO strings for storage
       if (value instanceof Date) {
         return value.toISOString()
@@ -31,11 +51,15 @@ export const saveTasksToStorage = (tasks: Task[]): void => {
  * Handles Date deserialization by converting ISO strings back to Date objects
  * Also migrates old tasks to include color field if missing
  */
-export const loadTasksFromStorage = (): Task[] => {
+export const loadTasksFromStorage = (): {
+  selectedDateKey: string
+  tasksByDate: Record<string, Task[]>
+} => {
   try {
     const stored = localStorage.getItem(STORAGE_KEY)
     if (!stored) {
-      return []
+      const todayKey = getLocalDateKey(new Date())
+      return { selectedDateKey: todayKey, tasksByDate: {} }
     }
 
     const parsed = JSON.parse(stored, (key, value) => {
@@ -46,25 +70,56 @@ export const loadTasksFromStorage = (): Task[] => {
       return value
     })
 
-    if (!Array.isArray(parsed)) {
-      return []
+    const todayKey = getLocalDateKey(new Date())
+
+    // V2 format
+    if (parsed && typeof parsed === 'object' && parsed.version === 2) {
+      const selectedDateKey =
+        typeof parsed.selectedDateKey === 'string' ? parsed.selectedDateKey : todayKey
+      const tasksByDate = (parsed.tasksByDate ?? {}) as Record<string, Task[]>
+
+      // Migration: ensure every task has color
+      const migratedByDate: Record<string, Task[]> = Object.fromEntries(
+        Object.entries(tasksByDate).map(([dateKey, tasks]) => [
+          dateKey,
+          (Array.isArray(tasks) ? tasks : []).map((task, index) => {
+            if (!task.color) {
+              return {
+                ...task,
+                color: taskColors[index % taskColors.length],
+              }
+            }
+            return task
+          }),
+        ])
+      )
+
+      return { selectedDateKey, tasksByDate: migratedByDate }
     }
 
-    // Migration: Add color field to tasks that don't have it (backwards compatibility)
-    const migratedTasks = parsed.map((task, index) => {
-      if (!task.color) {
-        return {
-          ...task,
-          color: taskColors[index % taskColors.length]
+    // Legacy format (v1): array of tasks
+    if (Array.isArray(parsed)) {
+      const migratedTasks = parsed.map((task, index) => {
+        if (!task.color) {
+          return {
+            ...task,
+            color: taskColors[index % taskColors.length],
+          }
         }
+        return task
+      })
+
+      return {
+        selectedDateKey: todayKey,
+        tasksByDate: { [todayKey]: migratedTasks },
       }
-      return task
-    })
+    }
 
-    return migratedTasks
+    return { selectedDateKey: todayKey, tasksByDate: {} }
   } catch (error) {
     console.error('Failed to load tasks from localStorage:', error)
-    return []
+    const todayKey = getLocalDateKey(new Date())
+    return { selectedDateKey: todayKey, tasksByDate: {} }
   }
 }
 
diff --git a/src/utils/timeCalculations.ts b/src/utils/timeCalculations.ts
index c561dd5..c83bd90 100644
--- a/src/utils/timeCalculations.ts
+++ b/src/utils/timeCalculations.ts
@@ -37,7 +37,7 @@ export const roundDurationUp = (minutes: number): number => {
  * RESPECTS LOCKED TASKS - they keep their start times
  * Unlocked tasks are scheduled around locked tasks
  */
-export const recalculateTaskTimes = (tasks: Task[]): Task[] => {
+export const recalculateTaskTimes = (tasks: Task[], baseDate: Date = new Date()): Task[] => {
   // Sort by order
   const sorted = [...tasks].sort((a, b) => a.order - b.order)
 
@@ -48,7 +48,7 @@ export const recalculateTaskTimes = (tasks: Task[]): Task[] => {
   if (sorted.length === 0) return []
 
   // Start at 8:00 AM
-  const startOfDay = new Date()
+  const startOfDay = new Date(baseDate)
   startOfDay.setHours(8, 0, 0, 0)
 
   let currentTime = new Date(startOfDay)
@@ -124,10 +124,12 @@ export const recalculateTaskTimes = (tasks: Task[]): Task[] => {
  */
 export const findNextAvailableSlot = (
   tasks: Task[],
-  durationMinutes: number
+  durationMinutes: number,
+  baseDate: Date = new Date(),
+  afterTaskId: string | null = null
 ): { slotStart: Date; insertAfterTaskId: string | null } => {
   // Start at 8:00 AM
-  const startOfDay = new Date()
+  const startOfDay = new Date(baseDate)
   startOfDay.setHours(8, 0, 0, 0)
 
   if (tasks.length === 0) {
@@ -142,9 +144,18 @@ export const findNextAvailableSlot = (
   // Get locked tasks for conflict checking
   const lockedTasks = tasks.filter((t) => t.isLocked)
 
-  // Try to find a slot starting from 8 AM
+  // Try to find a slot starting from the hinted insertion point
+  // If afterTaskId is provided, start right after that task's end time.
   let proposedStart = new Date(startOfDay)
-  const endOfDay = new Date()
+  if (afterTaskId) {
+    const hintTask = tasks.find((t) => t.id === afterTaskId)
+    if (hintTask) {
+      proposedStart = new Date(
+        hintTask.startTime.getTime() + hintTask.durationMinutes * 60000
+      )
+    }
+  }
+  const endOfDay = new Date(baseDate)
   endOfDay.setHours(23, 59, 0, 0)
 
   while (proposedStart < endOfDay) {
@@ -176,6 +187,11 @@ export const findNextAvailableSlot = (
         }
       }
 
+      // If caller provided a hint and we started after it, preserve it when possible.
+      if (afterTaskId && insertAfterTaskId === null) {
+        insertAfterTaskId = afterTaskId
+      }
+
       // If slot is before all tasks, insert at beginning
       if (!insertAfterTaskId && proposedStart < sortedByTime[0].startTime) {
         insertAfterTaskId = null

From b92285f2e196eafd9760671eb1516ff235d97f8c Mon Sep 17 00:00:00 2001
From: Dang Tran <91554483+BrooklynD23@users.noreply.github.com>
Date: Tue, 27 Jan 2026 15:27:03 -0800
Subject: [PATCH 9/9] UI: Centered comp, calendar view, cycle days

- Cycle through days (option to go back to current day)
- Centered all components in today's task view
---
 src/App.tsx                       |  69 +++---
 src/components/CalendarPopup.tsx  | 111 +++++++++
 src/components/InlineTaskForm.tsx |  12 +-
 src/components/SimpleTimeline.tsx | 392 ++++++++++++++++++++++++++++++
 src/components/TaskBlock.tsx      |  54 ++--
 src/components/Timeline.tsx       |   9 +-
 src/components/TodayView.tsx      |  15 ++
 src/theme/theme.ts                |  14 +-
 src/utils/timeCalculations.ts     |   5 +
 9 files changed, 609 insertions(+), 72 deletions(-)
 create mode 100644 src/components/CalendarPopup.tsx
 create mode 100644 src/components/SimpleTimeline.tsx
 create mode 100644 src/components/TodayView.tsx

diff --git a/src/App.tsx b/src/App.tsx
index c053fca..7a3b6c2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,22 +6,16 @@ import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutli
 import BarChartOutlinedIcon from '@mui/icons-material/BarChartOutlined'
 import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined'
 import { theme } from './theme/theme'
-import { useEffect, useState } from 'react'
-import { useTaskStore } from './store/taskStore'
-import { CalendarView } from './components/CalendarView'
+import { useState } from 'react'
+import { TodayView } from './components/TodayView'
 import { ComingSoon } from './components/ComingSoon'
 
 function App() {
-  // Expose store to window for console testing (optional)
-  useEffect(() => {
-    (window as unknown as { taskStore: typeof useTaskStore }).taskStore = useTaskStore
-    console.log('✅ Task store available at window.taskStore')
-  }, [])
-
-  const [activeNav, setActiveNav] = useState<'calendar' | 'tasks' | 'stats' | 'settings'>('calendar')
+  const [activeNav, setActiveNav] = useState<'today' | 'tasks' | 'stats' | 'settings'>('today')
+  const [selectedDateKey, setSelectedDateKey] = useState<string | undefined>()
 
   const navItems = [
-    { key: 'calendar' as const, label: 'Calendar', icon: CalendarMonthOutlinedIcon },
+    { key: 'today' as const, label: 'Calendar', icon: CalendarMonthOutlinedIcon },
     { key: 'tasks' as const, label: 'Tasks', icon: CheckCircleOutlineOutlinedIcon },
     { key: 'stats' as const, label: 'Stats', icon: BarChartOutlinedIcon },
     { key: 'settings' as const, label: 'Settings', icon: SettingsOutlinedIcon },
@@ -40,18 +34,18 @@ function App() {
       >
         <Box
           sx={{
-            width: 120,
-            flex: '0 0 120px',
+            width: 128,
+            flex: '0 0 128px',
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
-            gap: 1,
-            py: 4,
+            gap: 2,
+            py: 6,
             px: 1,
-            borderRight: '1px solid rgba(0,0,0,0.06)',
+            borderRight: '1px solid rgba(0,0,0,0.04)',
             background:
-              'linear-gradient(180deg, rgba(183, 226, 205, 0.55) 0%, rgba(183, 226, 205, 0.18) 60%, rgba(255, 255, 255, 0) 100%)',
-            backdropFilter: 'blur(10px)',
+              'linear-gradient(180deg, rgba(232, 245, 233, 0.8) 0%, rgba(255, 255, 255, 0.4) 100%)',
+            backdropFilter: 'blur(20px)',
           }}
         >
           {navItems.map((item) => {
@@ -61,34 +55,45 @@ function App() {
             return (
               <ButtonBase
                 key={item.key}
-                onClick={() => setActiveNav(item.key)}
+                onClick={() => {
+                  if (item.key === 'today') {
+                    setActiveNav('today')
+                    setSelectedDateKey(undefined)
+                  } else {
+                    setActiveNav(item.key)
+                  }
+                }}
                 sx={{
                   width: '100%',
-                  borderRadius: 999,
-                  py: 1.25,
+                  borderRadius: '16px',
+                  py: 1.5,
                   display: 'flex',
                   flexDirection: 'column',
-                  gap: 0.75,
-                  color: isActive ? '#000000' : 'rgba(0,0,0,0.55)',
-                  transition: 'color 150ms ease',
+                  gap: 1,
+                  color: isActive ? '#000000' : 'rgba(0,0,0,0.4)',
+                  transition: 'all 200ms ease',
+                  '&:hover': {
+                    color: '#000000',
+                  },
                 }}
               >
                 <Box
                   sx={{
-                    width: 56,
-                    height: 56,
+                    width: 64,
+                    height: 64,
                     borderRadius: '50%',
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
-                    backgroundColor: isActive ? 'rgba(255,255,255,0.7)' : 'transparent',
-                    boxShadow: isActive ? '0 12px 24px rgba(0,0,0,0.10)' : 'none',
-                    transition: 'background-color 150ms ease, box-shadow 150ms ease',
+                    backgroundColor: isActive ? 'rgba(255,255,255,0.9)' : 'transparent',
+                    boxShadow: isActive ? '0 12px 32px rgba(0,0,0,0.08)' : 'none',
+                    border: isActive ? '1px solid rgba(0,0,0,0.02)' : 'none',
+                    transition: 'all 250ms cubic-bezier(0.4, 0, 0.2, 1)',
                   }}
                 >
-                  <Icon sx={{ fontSize: 22 }} />
+                  <Icon sx={{ fontSize: 26 }} />
                 </Box>
-                <Typography sx={{ fontSize: 12, fontWeight: 500, lineHeight: 1.2 }}>
+                <Typography sx={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.01em' }}>
                   {item.label}
                 </Typography>
               </ButtonBase>
@@ -105,7 +110,7 @@ function App() {
           }}
         >
           <Box sx={{ width: '100%', maxWidth: 980 }}>
-            {activeNav === 'calendar' && <CalendarView />}
+            {activeNav === 'today' && <TodayView selectedDateKey={selectedDateKey} onDateChange={setSelectedDateKey} />}
             {activeNav === 'tasks' && <ComingSoon title="Tasks" />}
             {activeNav === 'stats' && <ComingSoon title="Stats" />}
             {activeNav === 'settings' && <ComingSoon title="Settings" />}
diff --git a/src/components/CalendarPopup.tsx b/src/components/CalendarPopup.tsx
new file mode 100644
index 0000000..8739e3e
--- /dev/null
+++ b/src/components/CalendarPopup.tsx
@@ -0,0 +1,111 @@
+import { Box, ButtonBase, Dialog, Typography, IconButton } from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close'
+import { useMemo } from 'react'
+
+interface CalendarPopupProps {
+  open: boolean
+  onClose: () => void
+  onSelectDate: (dateKey: string) => void
+}
+
+export const CalendarPopup = ({ open, onClose, onSelectDate }: CalendarPopupProps) => {
+  // Get all dates from localStorage
+  const datesWithData = useMemo(() => {
+    try {
+      const stored = localStorage.getItem('time-block-app-tasks')
+      if (!stored) return []
+      
+      const data = JSON.parse(stored)
+      if (data.version === 2 && data.tasksByDate) {
+        return Object.keys(data.tasksByDate).sort()
+      }
+      return []
+    } catch {
+      return []
+    }
+  }, [])
+
+  const todayKey = useMemo(() => {
+    const today = new Date()
+    return today.toISOString().split('T')[0]
+  }, [])
+
+  const formatDateKey = (dateKey: string) => {
+    const date = new Date(dateKey + 'T00:00:00')
+    return date.toLocaleDateString(undefined, {
+      weekday: 'short',
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+  }
+
+  return (
+    <Dialog 
+      open={open} 
+      onClose={onClose}
+      maxWidth="sm"
+      fullWidth
+      PaperProps={{
+        sx: {
+          borderRadius: '16px',
+          backgroundColor: 'rgba(255,255,255,0.95)',
+          backdropFilter: 'blur(10px)',
+          border: '1px solid rgba(0,0,0,0.06)',
+          boxShadow: '0 20px 40px rgba(0,0,0,0.12)',
+        }
+      }}
+    >
+      <Box sx={{ p: 3 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+          <Typography variant="h6" sx={{ fontSize: 20, fontWeight: 700 }}>
+            Calendar
+          </Typography>
+          <IconButton onClick={onClose} sx={{ p: 0.5 }}>
+            <CloseIcon />
+          </IconButton>
+        </Box>
+
+        {datesWithData.length === 0 ? (
+          <Typography color="text.secondary" sx={{ textAlign: 'center', py: 4 }}>
+            No dates with tasks yet
+          </Typography>
+        ) : (
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+            {datesWithData.map((dateKey) => (
+              <ButtonBase
+                key={dateKey}
+                onClick={() => {
+                  onSelectDate(dateKey)
+                  onClose()
+                }}
+                sx={{
+                  width: '100%',
+                  p: 2,
+                  borderRadius: '12px',
+                  border: '1px solid rgba(0,0,0,0.06)',
+                  backgroundColor: dateKey === todayKey ? 'rgba(168, 220, 200, 0.2)' : 'rgba(255,255,255,0.7)',
+                  textAlign: 'left',
+                  transition: 'all 150ms ease',
+                  '&:hover': {
+                    backgroundColor: dateKey === todayKey ? 'rgba(168, 220, 200, 0.3)' : 'rgba(255,255,255,0.9)',
+                    boxShadow: '0 4px 12px rgba(0,0,0,0.08)',
+                  }
+                }}
+              >
+                <Typography sx={{ fontSize: 15, fontWeight: 600 }}>
+                  {formatDateKey(dateKey)}
+                </Typography>
+                {dateKey === todayKey && (
+                  <Typography sx={{ fontSize: 12, color: 'success.main', mt: 0.5 }}>
+                    Today
+                  </Typography>
+                )}
+              </ButtonBase>
+            ))}
+          </Box>
+        )}
+      </Box>
+    </Dialog>
+  )
+}
diff --git a/src/components/InlineTaskForm.tsx b/src/components/InlineTaskForm.tsx
index f53985b..ce5ad09 100644
--- a/src/components/InlineTaskForm.tsx
+++ b/src/components/InlineTaskForm.tsx
@@ -64,12 +64,12 @@ export const InlineTaskForm = ({
       onSubmit={handleSubmit}
       onKeyDown={handleKeyDown}
       sx={{
-        p: 2,
-        mb: 1.5,
-        backgroundColor: 'rgba(255,255,255,0.75)',
-        borderRadius: '16px',
-        border: '1px solid rgba(0,0,0,0.12)',
-        boxShadow: '0 10px 26px rgba(0,0,0,0.08)',
+        p: 3,
+        mb: 0,
+        backgroundColor: 'rgba(255,255,255,0.85)',
+        borderRadius: '20px',
+        border: '1px solid rgba(0,0,0,0.06)',
+        boxShadow: '0 8px 24px rgba(0,0,0,0.06)',
       }}
     >
       <TextField
diff --git a/src/components/SimpleTimeline.tsx b/src/components/SimpleTimeline.tsx
new file mode 100644
index 0000000..42cc111
--- /dev/null
+++ b/src/components/SimpleTimeline.tsx
@@ -0,0 +1,392 @@
+import { Box, IconButton, Typography, Button } from '@mui/material'
+import { useState, useEffect } from 'react'
+import { TaskBlock } from './TaskBlock'
+import { InsertionPoint } from './InsertionPoint'
+import { InlineTaskForm } from './InlineTaskForm'
+import { TimeLabel } from './TimeLabel'
+import AddIcon from '@mui/icons-material/Add'
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
+import ChevronRightIcon from '@mui/icons-material/ChevronRight'
+import { getLocalDateKey, addDays, dateKeyToDate } from '../utils/date'
+import { Task } from '../types'
+import { taskColors } from '../theme/theme'
+
+interface SimpleTimelineProps {
+  selectedDateKey?: string
+  onDateChange?: (dateKey: string) => void
+}
+
+export const SimpleTimeline = ({ selectedDateKey, onDateChange }: SimpleTimelineProps) => {
+  const [tasks, setTasks] = useState<Task[]>([])
+  const [activeInsertionPoint, setActiveInsertionPoint] = useState<string | null>(null)
+  const [draggingTaskId, setDraggingTaskId] = useState<string | null>(null)
+  const [internalDateKey, setInternalDateKey] = useState<string>(getLocalDateKey(new Date()))
+
+  // Use external dateKey if provided, otherwise use internal state
+  const currentDateKey = selectedDateKey || internalDateKey
+  const currentDate = dateKeyToDate(currentDateKey)
+
+  // Helper function to revive Date objects from JSON
+  const reviveTaskDates = (task: any): Task => ({
+    ...task,
+    startTime: new Date(task.startTime),
+    createdAt: new Date(task.createdAt),
+  })
+
+  // Load tasks from localStorage
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem('time-block-app-tasks')
+      if (stored) {
+        const data = JSON.parse(stored)
+        if (data.version === 2 && data.tasksByDate) {
+          const dayTasks = (data.tasksByDate[currentDateKey] || []).map(reviveTaskDates)
+          setTasks(dayTasks)
+        } else if (data.version === 1 || Array.isArray(data)) {
+          // Legacy format - only show if it's today
+          if (currentDateKey === getLocalDateKey(new Date())) {
+            const tasks = Array.isArray(data) ? data : []
+            setTasks(tasks.map(reviveTaskDates))
+          }
+        }
+      }
+    } catch (error) {
+      console.error('Error loading tasks:', error)
+    }
+  }, [currentDateKey])
+
+  // Save tasks to localStorage
+  const saveTasks = (newTasks: Task[]) => {
+    try {
+      const stored = localStorage.getItem('time-block-app-tasks')
+      let data = { version: 2, selectedDateKey: currentDateKey, tasksByDate: {} as Record<string, Task[]> }
+
+      if (stored) {
+        const parsed = JSON.parse(stored)
+        if (parsed.version === 2) {
+          data = parsed
+        }
+      }
+
+      data.tasksByDate[currentDateKey] = newTasks
+      localStorage.setItem('time-block-app-tasks', JSON.stringify(data))
+    } catch (error) {
+      console.error('Error saving tasks:', error)
+    }
+  }
+
+  const handleInsertTask = (afterTaskId: string | null, title: string, durationMinutes: number) => {
+    const newTask: Task = {
+      id: crypto.randomUUID(),
+      title,
+      durationMinutes,
+      isLocked: false,
+      isOverlapping: false,
+      startTime: new Date(), // Will be recalculated
+      order: tasks.length,
+      createdAt: new Date(),
+      color: taskColors[tasks.length % taskColors.length], // Use pastel colors from theme
+    }
+
+    let updatedTasks: Task[]
+    if (afterTaskId === null) {
+      updatedTasks = [newTask, ...tasks]
+    } else {
+      const targetIndex = tasks.findIndex(t => t.id === afterTaskId)
+      if (targetIndex >= 0) {
+        updatedTasks = [...tasks]
+        updatedTasks.splice(targetIndex + 1, 0, newTask)
+      } else {
+        updatedTasks = [...tasks, newTask]
+      }
+    }
+
+    // Simple time calculation - start each task after the previous one
+    let currentTime = new Date(currentDate)
+    currentTime.setHours(8, 0, 0, 0) // Start at 8 AM
+
+    updatedTasks = updatedTasks.map((task, index) => {
+      const taskStart = new Date(currentTime)
+      currentTime = new Date(currentTime.getTime() + task.durationMinutes * 60000)
+      return {
+        ...task,
+        startTime: taskStart,
+        order: index,
+      }
+    })
+
+    setTasks(updatedTasks)
+    saveTasks(updatedTasks)
+    setActiveInsertionPoint(null)
+  }
+
+  const handleDeleteTask = (taskId: string) => {
+    const updatedTasks = tasks.filter(t => t.id !== taskId)
+    setTasks(updatedTasks)
+    saveTasks(updatedTasks)
+  }
+
+  const handleToggleLock = (taskId: string) => {
+    const updatedTasks = tasks.map(t =>
+      t.id === taskId ? { ...t, isLocked: !t.isLocked } : t
+    )
+    setTasks(updatedTasks)
+    saveTasks(updatedTasks)
+  }
+
+  const handleDateChange = (direction: 'prev' | 'next') => {
+    const newDateKey = addDays(currentDateKey, direction === 'next' ? 1 : -1)
+    if (onDateChange) {
+      onDateChange(newDateKey)
+    } else {
+      setInternalDateKey(newDateKey)
+    }
+  }
+
+  const dateLabel = currentDate.toLocaleDateString(undefined, {
+    weekday: 'long',
+    month: 'short',
+    day: 'numeric',
+  })
+
+  // Calculate the maximum content width for proper centering
+  // This ensures all elements (header, date picker, tasks, forms) share the same center point
+  const CONTENT_MAX_WIDTH = 720 // Maximum width for the content area (tasks, forms, etc.)
+
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        py: { xs: 3, sm: 5 },
+        px: { xs: 2, sm: 0 },
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: '100%',
+      }}
+    >
+      {/* Header Section - Centered */}
+      <Box
+        sx={{
+          mb: { xs: 3, sm: 4 },
+          textAlign: 'center',
+          width: '100%',
+          maxWidth: CONTENT_MAX_WIDTH,
+        }}
+      >
+        <Typography variant="h6" sx={{ fontSize: { xs: '24px', sm: '32px' }, fontWeight: 700, mb: 0.5 }}>
+          Time Blocking App
+        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
+          {tasks.length === 0 ? 'No tasks scheduled' : `${tasks.length} task${tasks.length === 1 ? '' : 's'} scheduled`}
+        </Typography>
+
+        {/* Today button - only show if not on today's date */}
+        {currentDateKey !== getLocalDateKey(new Date()) && (
+          <Button
+            variant="outlined"
+            size="small"
+            onClick={() => {
+              const todayKey = getLocalDateKey(new Date())
+              if (onDateChange) {
+                onDateChange(todayKey)
+              } else {
+                setInternalDateKey(todayKey)
+              }
+            }}
+            sx={{
+              borderRadius: '20px',
+              textTransform: 'none',
+              fontSize: '14px',
+              px: 2,
+              mb: 2,
+            }}
+          >
+            Today
+          </Button>
+        )}
+      </Box>
+
+      {/* Add Task Button - Positioned relative to max content width */}
+      <IconButton
+        aria-label="Add task"
+        onClick={() => setActiveInsertionPoint('start')}
+        sx={{
+          position: 'absolute',
+          top: { xs: 16, sm: 28 },
+          right: {
+            xs: 16,
+            sm: `max(16px, calc(50% - ${CONTENT_MAX_WIDTH / 2}px - 76px))`
+          },
+          width: 56,
+          height: 56,
+          backgroundColor: '#FFFFFF',
+          boxShadow: '0 8px 24px rgba(0,0,0,0.08)',
+          border: '1px solid rgba(0,0,0,0.04)',
+          '&:hover': {
+            backgroundColor: '#F8F8F8',
+            boxShadow: '0 12px 32px rgba(0,0,0,0.12)',
+          },
+        }}
+      >
+        <AddIcon sx={{ fontSize: 28 }} />
+      </IconButton>
+
+      {/* Date Navigation - Centered */}
+      <Box
+        sx={{
+          mb: { xs: 3, sm: 5 },
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 4,
+          width: '100%',
+          maxWidth: CONTENT_MAX_WIDTH,
+        }}
+      >
+        <Box
+          sx={{ display: 'flex', alignItems: 'center', gap: 0.5, cursor: 'pointer', opacity: 0.4, '&:hover': { opacity: 0.8 } }}
+          onClick={() => handleDateChange('prev')}
+        >
+          <ChevronLeftIcon sx={{ fontSize: 20 }} />
+          <Typography variant="body2" sx={{ fontSize: 15 }}>
+            Yesterday
+          </Typography>
+        </Box>
+
+        <Typography sx={{ fontSize: 20, fontWeight: 700, color: 'text.primary' }}>
+          {dateLabel}
+        </Typography>
+
+        <Box
+          sx={{ display: 'flex', alignItems: 'center', gap: 0.5, cursor: 'pointer', opacity: 0.4, '&:hover': { opacity: 0.8 } }}
+          onClick={() => handleDateChange('next')}
+        >
+          <Typography variant="body2" sx={{ fontSize: 15 }}>
+            Tomorrow
+          </Typography>
+          <ChevronRightIcon sx={{ fontSize: 20 }} />
+        </Box>
+      </Box>
+
+      {/* Main Content Container - Dynamically Centered */}
+      <Box
+        sx={{
+          position: 'relative',
+          width: '100%',
+          maxWidth: CONTENT_MAX_WIDTH,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        {/* Inline Form at Start */}
+        {activeInsertionPoint === 'start' && (
+          <Box sx={{ mb: 3, width: '100%' }}>
+            <InlineTaskForm
+              onSubmit={(title, duration) => handleInsertTask(null, title, duration)}
+              onCancel={() => setActiveInsertionPoint(null)}
+            />
+          </Box>
+        )}
+
+        {/* Empty State - Centered within content container */}
+        {tasks.length === 0 ? (
+          <Box
+            sx={{
+              mt: 2,
+              p: 6,
+              textAlign: 'center',
+              backgroundColor: 'rgba(255,255,255,0.4)',
+              borderRadius: '24px',
+              border: '1px dashed rgba(0,0,0,0.1)',
+              width: '100%',
+            }}
+          >
+            <Typography color="text.secondary">
+              No tasks scheduled for this day. Click the + button to add your first task.
+            </Typography>
+          </Box>
+        ) : (
+          /* Tasks List */
+          tasks.map((task) => (
+            <Box key={task.id} sx={{ width: '100%' }}>
+              {/* Insertion Point Before Task */}
+              <Box sx={{ width: '100%' }}>
+                {activeInsertionPoint === task.id ? (
+                  <InlineTaskForm
+                    onSubmit={(title, duration) => handleInsertTask(task.id, title, duration)}
+                    onCancel={() => setActiveInsertionPoint(null)}
+                  />
+                ) : (
+                  <InsertionPoint
+                    onClick={() => setActiveInsertionPoint(task.id)}
+                    isActive={activeInsertionPoint === task.id}
+                  />
+                )}
+              </Box>
+
+              {/* Task Block with Time Label */}
+              <Box sx={{ display: 'flex', alignItems: 'flex-start', mb: 1, width: '100%' }}>
+                <Box sx={{ minWidth: 80, textAlign: 'right', pt: 1, pr: 2 }}>
+                  <TimeLabel time={task.startTime} />
+                </Box>
+                <Box sx={{ flex: 1 }}>
+                  <TaskBlock
+                    task={task}
+                    onDelete={() => handleDeleteTask(task.id)}
+                    onToggleLock={() => handleToggleLock(task.id)}
+                    onDragStart={() => setDraggingTaskId(task.id)}
+                    onDragEnd={() => setDraggingTaskId(null)}
+                    isDragging={draggingTaskId === task.id}
+                  />
+                </Box>
+              </Box>
+
+              {/* Insertion Point After Task */}
+              <Box sx={{ width: '100%' }}>
+                {activeInsertionPoint === `${task.id}-after` ? (
+                  <InlineTaskForm
+                    onSubmit={(title, duration) => handleInsertTask(task.id, title, duration)}
+                    onCancel={() => setActiveInsertionPoint(null)}
+                  />
+                ) : (
+                  <InsertionPoint
+                    onClick={() => setActiveInsertionPoint(`${task.id}-after`)}
+                    isActive={activeInsertionPoint === `${task.id}-after`}
+                  />
+                )}
+              </Box>
+            </Box>
+          ))
+        )}
+
+        {/* End Insertion Point */}
+        {tasks.length > 0 && (
+          <Box sx={{ mt: 1, width: '100%' }}>
+            {activeInsertionPoint === 'end' ? (
+              <InlineTaskForm
+                onSubmit={(title, duration) => {
+                  const lastTask = tasks[tasks.length - 1]
+                  handleInsertTask(lastTask.id, title, duration)
+                }}
+                onCancel={() => setActiveInsertionPoint(null)}
+              />
+            ) : (
+              <InsertionPoint
+                onClick={() => setActiveInsertionPoint('end')}
+                isActive={activeInsertionPoint === 'end'}
+              />
+            )}
+          </Box>
+        )}
+
+        {/* Tip - Centered */}
+        <Box sx={{ textAlign: 'center', mt: 6, opacity: 0.5 }}>
+          <Typography variant="caption" sx={{ fontSize: 14 }}>
+            Tip: Create tasks with [+] at top, then drag to reorder.
+          </Typography>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
diff --git a/src/components/TaskBlock.tsx b/src/components/TaskBlock.tsx
index 368188e..c992e2a 100644
--- a/src/components/TaskBlock.tsx
+++ b/src/components/TaskBlock.tsx
@@ -114,44 +114,43 @@ export const TaskBlock = ({
       onMouseLeave={() => setIsHovered(false)}
       sx={{
         position: 'relative',
-        background: `linear-gradient(90deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 70%), ${backgroundColor}`,
-        borderRadius: '16px',
+        background: `linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%), ${backgroundColor}`,
+        borderRadius: '20px', // More rounded as per ref
         border: isBeingDragged
-          ? '2px dashed #000000'
+          ? '2px dashed rgba(0,0,0,0.1)'
           : task.isOverlapping
-          ? `2px solid ${colors.overlapBorder}`
-          : isDropTarget
-          ? '2px solid #000000'
-          : 'none',
-        padding: '18px',
-        marginBottom: '10px',
+            ? `2px solid ${colors.overlapBorder}`
+            : isDropTarget
+              ? '2px solid rgba(0,0,0,0.2)'
+              : '1px solid rgba(0,0,0,0.03)',
+        padding: '24px', // More padding
         minHeight: `${height}px`,
         cursor: task.isLocked ? 'not-allowed' : isBeingDragged ? 'grabbing' : 'grab',
-        opacity: isBeingDragged ? 0.85 : isDragging ? 0.85 : isPreview ? 0.6 : 1,
-        transition: 'box-shadow 150ms ease, opacity 150ms ease, border 150ms ease',
+        opacity: isBeingDragged ? 0.8 : isDragging ? 0.8 : isPreview ? 0.6 : 1,
+        transition: 'all 200ms cubic-bezier(0.4, 0, 0.2, 1)',
         boxShadow: isBeingDragged
-          ? '0 4px 12px rgba(0,0,0,0.15)'
+          ? '0 20px 40px rgba(0,0,0,0.12)'
           : showNewHighlight
-          ? '0 0 0 3px #4CAF50, 0 4px 12px rgba(76, 175, 80, 0.3)'
-          : '0 10px 26px rgba(0,0,0,0.10)',
+            ? '0 0 0 3px #4CAF50, 0 8px 20px rgba(76, 175, 80, 0.2)'
+            : '0 8px 24px rgba(0,0,0,0.06)', // Softer shadow
         '&:hover': {
-          boxShadow: task.isLocked || isBeingDragged ? '0 10px 26px rgba(0,0,0,0.10)' : '0 14px 32px rgba(0,0,0,0.14)',
+          boxShadow: task.isLocked || isBeingDragged ? '0 8px 24px rgba(0,0,0,0.06)' : '0 12px 32px rgba(0,0,0,0.1)',
+          transform: task.isLocked || isBeingDragged ? 'none' : 'translateY(-1px)',
         },
         // Overlapping pulse animation
         animation: task.isOverlapping
           ? 'pulse 1.5s ease-in-out infinite'
           : showNewHighlight
-          ? 'newTaskGlow 0.5s ease-out'
-          : 'none',
+            ? 'newTaskGlow 0.5s ease-out'
+            : 'none',
         '@keyframes pulse': {
           '0%, 100%': { borderColor: colors.overlapBorder, opacity: 1 },
           '50%': { borderColor: colors.overlapBorder, opacity: 0.6 },
         },
         '@keyframes newTaskGlow': {
-          '0%': { boxShadow: '0 0 0 6px #4CAF50, 0 8px 24px rgba(76, 175, 80, 0.5)' },
-          '100%': { boxShadow: '0 0 0 3px #4CAF50, 0 4px 12px rgba(76, 175, 80, 0.3)' },
+          '0%': { boxShadow: '0 0 0 6px #4CAF50, 0 8px 24px rgba(76, 175, 80, 0.4)' },
+          '100%': { boxShadow: '0 0 0 3px #4CAF50, 0 4px 12px rgba(76, 175, 80, 0.2)' },
         },
-        // Overflow hidden for the highlight bar
         overflow: 'hidden',
       }}
     >
@@ -159,12 +158,12 @@ export const TaskBlock = ({
       <Typography
         variant="h6"
         sx={{
-          fontSize: '18px',
+          fontSize: '20px',
           fontWeight: 600,
-          color: '#000000',
-          lineHeight: 1.3,
-          mb: 0.75,
-          pr: 4, // Space for lock icon
+          color: 'rgba(0,0,0,0.85)',
+          lineHeight: 1.2,
+          mb: 0.5,
+          pr: 4,
         }}
       >
         {task.title}
@@ -174,8 +173,9 @@ export const TaskBlock = ({
       <Typography
         variant="body2"
         sx={{
-          fontSize: '13px',
-          color: '#666666',
+          fontSize: '15px',
+          fontWeight: 500,
+          color: 'rgba(0,0,0,0.45)',
         }}
       >
         Est. {formatDuration(task.durationMinutes)}
diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
index ccbd6c0..99485a3 100644
--- a/src/components/Timeline.tsx
+++ b/src/components/Timeline.tsx
@@ -234,7 +234,14 @@ export const Timeline = () => {
       </Box>
 
       {/* Timeline */}
-      <Box sx={{ position: 'relative' }}>
+      <Box
+        sx={{
+          position: 'relative',
+          width: '100%',
+          maxWidth: 'calc(var(--time-col-width) + var(--timeline-gap) + var(--task-col-max))',
+          mx: 'auto',
+        }}
+      >
         <Box
           sx={{
             position: 'absolute',
diff --git a/src/components/TodayView.tsx b/src/components/TodayView.tsx
new file mode 100644
index 0000000..dd06a16
--- /dev/null
+++ b/src/components/TodayView.tsx
@@ -0,0 +1,15 @@
+import { Box } from '@mui/material'
+import { SimpleTimeline } from './SimpleTimeline'
+
+interface TodayViewProps {
+  selectedDateKey?: string
+  onDateChange?: (dateKey: string) => void
+}
+
+export const TodayView = ({ selectedDateKey, onDateChange }: TodayViewProps) => {
+  return (
+    <Box sx={{ width: '100%' }}>
+      <SimpleTimeline selectedDateKey={selectedDateKey} onDateChange={onDateChange} />
+    </Box>
+  )
+}
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index a429383..83b431c 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -1,12 +1,14 @@
 import { createTheme } from '@mui/material/styles'
 
-// Task block colors - alternating greens (pastel to forest)
+// Task block colors - premium pastels (mint, sage, seafoam)
 export const taskColors = [
-  '#E8F5E9', // Green 1: Pastel green (very light, soft)
-  '#C8E6C9', // Green 2: Light mint green
-  '#A5D6A7', // Green 3: Medium green
-  '#81C784', // Green 4: Medium-dark green
-  '#66BB6A', // Green 5: Forest green (richest)
+  '#E3F2FD', // Soft Blue/Cyan
+  '#E0F2F1', // Light Mint/Teal (Reference Card 1)
+  '#E8F5E9', // Pastel Green
+  '#F1F8E9', // Light Lime/Green
+  '#F9FBE7', // Soft Yellow/Green
+  '#C8E6C9', // Slightly deeper Mint (Reference Card 2)
+  '#B2DFDB', // Deeper Teal (Reference Card 3)
 ]
 
 // Special state colors
diff --git a/src/utils/timeCalculations.ts b/src/utils/timeCalculations.ts
index c83bd90..b6caa2d 100644
--- a/src/utils/timeCalculations.ts
+++ b/src/utils/timeCalculations.ts
@@ -277,6 +277,11 @@ export const getVisibleTimeRange = (
  * Format time as "8:00 AM" or "2:30 PM"
  */
 export const formatTime = (date: Date): string => {
+  if (!(date instanceof Date) || isNaN(date.getTime())) {
+    console.error('formatTime: Invalid date provided', date)
+    return 'Invalid Time'
+  }
+  
   let hours = date.getHours()
   const minutes = date.getMinutes()
   const ampm = hours >= 12 ? 'PM' : 'AM'