캘린더 콘텐츠와 플로팅 컨트롤 레이어를 분리한다

packages/json-document-calendar/src/calendar-time-grid.tsx

@@ -112,7 +112,7 @@ export function CalendarTimeGrid(props: CalendarTimeGridProps): ReactNode {
     if (start !== null && end !== null) hand.createInterval(start, end);
   }
 
-  const gridColumns = `3.25rem repeat(${days.length}, minmax(4.5rem, 1fr))`;
+  const gridColumns = `4rem repeat(${days.length}, minmax(4.5rem, 1fr))`;
   const gridHeight = (props.hourEnd - props.hourStart) * props.pixelsPerHour;
   return (
     <div
@@ -210,8 +210,8 @@ export function CalendarTimeGrid(props: CalendarTimeGridProps): ReactNode {
             className={props.classNames.viewportAnchor}
             style={{ transform: `translateY(${(props.workHourStart - props.hourStart) * props.pixelsPerHour}px)` }}
           />
-          {Array.from({ length: props.hourEnd - props.hourStart }, (_, index) => props.hourStart + index).map((hour) => (
-            <div key={hour} data-calendar-hour={String(hour).padStart(2, "0")} className={props.classNames.hourLabel} style={{ top: (hour - props.hourStart) * props.pixelsPerHour + 4 }}>
+          {Array.from({ length: props.hourEnd - props.hourStart }, (_, index) => index === 0 ? null : props.hourStart + index).map((hour) => hour === null ? null : (
+            <div key={hour} data-calendar-hour={String(hour).padStart(2, "0")} className={props.classNames.hourLabel} style={{ top: (hour - props.hourStart) * props.pixelsPerHour }}>
               {props.labels.hour(hour)}
             </div>
           ))}

packages/json-document-calendar/src/use-calendar-pointer-interactions.ts

@@ -130,7 +130,10 @@ export function useCalendarPointerInteractions(hand: CalendarHand, policy: Calen
       return;
     }
     setHoveredTime(null);
-    const targetInstant = instantAt(day, event.clientY, grid);
+    const targetGridMinutes = calendarMinutesFromWebGrid(event.clientY, grid.getBoundingClientRect(), {
+      hourStart: policy.hourStart, hourEnd: policy.hourEnd, stepMinutes: policy.stepMinutes,
+    });
+    const targetInstant = calendarInstantAt(day, targetGridMinutes);
     if (targetInstant === null) return;
     const next = timePointer.preview(event.pointerId, (state) => {
       const dragSource = state.dragSource ?? (state.dragCandidate !== null && targetInstant !== state.originInstant
@@ -139,8 +142,11 @@ export function useCalendarPointerInteractions(hand: CalendarHand, policy: Calen
       return { ...state, targetInstant, dragSource };
     });
     if (next?.dragSource !== null && next?.dragSource !== undefined) {
-      if (selectionDrag.getActive() === null) selectionDrag.begin({ type: "calendar-selection-drag", source: next.dragSource, target: { type: "instant", instant: next.originInstant } });
-      const gesture = selectionDrag.preview((active) => ({ ...active, target: { type: "instant", instant: targetInstant } }));
+      const originAnchor = next.dragSource.anchor.occurrenceStart;
+      const move = interpretCalendarTimeGridPointer(next);
+      if (move?.type !== "event.move") return;
+      if (selectionDrag.getActive() === null) selectionDrag.begin({ type: "calendar-selection-drag", source: next.dragSource, target: { type: "instant", instant: originAnchor } });
+      const gesture = selectionDrag.preview((active) => ({ ...active, target: { type: "instant", instant: move.start } }));
       hand.previewSelectionDrag(gesture);
     } else if (next !== null) hand.setTimePreview(next);
   }

packages/json-document-calendar/tests/calendar-time-grid.test.tsx

@@ -66,7 +66,11 @@ describe("CalendarTimeGrid", () => {
     }
 
     render(<Harness />);
-    expect(screen.getByRole("grid", { name: "Week" })).toBeTruthy();
+    const grid = screen.getByRole("grid", { name: "Week" });
+    expect(grid).toBeTruthy();
+    expect((grid.firstElementChild as HTMLElement).style.gridTemplateColumns).toBe("4rem repeat(7, minmax(4.5rem, 1fr))");
+    expect(grid.querySelector('[data-calendar-hour="00"]')).toBeNull();
+    expect((grid.querySelector('[data-calendar-hour="01"]') as HTMLElement).style.top).toBe("72px");
     expect(screen.getAllByRole("columnheader")).toHaveLength(7);
     expect(screen.getByText("all-day")).toBeTruthy();
     expect(screen.getByRole("presentation", { name: "Now" })).toBeTruthy();

packages/json-document-calendar/tests/use-calendar-hand.test.tsx

@@ -210,17 +210,17 @@ describe("useCalendarHand", () => {
       releasePointerCapture: () => undefined,
     };
     act(() => result.current.pointer.timePointerDown({
-      button: 0, clientY: 540, currentTarget: target, pointerId: 7,
+      button: 0, clientY: 555, currentTarget: target, pointerId: 7,
     } as never, "2026-08-03", "standup", "2026-08-03T09:00", "2026-08-03T09:30", "body"));
     act(() => result.current.pointer.timePointerMove({ pointerId: 7, clientX: 50, clientY: 600, target } as never));
     expect(result.current.hand.selectionDragPreview).not.toBeNull();
     expect(result.current.hand.paintedEvents.map((item) => item.start)).toEqual([
-      "2026-08-03T10:00", "2026-08-04T12:00",
+      "2026-08-03T09:45", "2026-08-04T11:45",
     ]);
     act(() => result.current.pointer.timePointerUp({ pointerId: 7 } as never));
     expect(result.current.hand.selectionDragPreview).toBeNull();
     expect(result.current.hand.document.events.map((item) => item.start)).toEqual([
-      "2026-08-03T10:00", "2026-08-04T12:00",
+      "2026-08-03T09:45", "2026-08-04T11:45",
     ]);
     expect(result.current.hand.selectedOccurrences).toHaveLength(2);
     act(() => result.current.hand.undo());