@multiplatform.one/components 6.1.0 → 6.4.0

package/dist/esm/views/Calendar.mjs

@@ -1,9 +1,44 @@
-import { componentColors } from "../componentColors.mjs";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { useState, useMemo, useCallback } from "react";
-import { Button } from "@multiplatform.one/forms";
-import { ScrollView, Text, ToggleGroup, XStack, YStack } from "tamagui";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { componentColors, sectionHeading } from "../componentColors.mjs";
+import { ViewSwitcher } from "../layouts/ViewSwitcher.mjs";
+import { withInterp } from "../shared/t.mjs";
+import { MINUTES_PER_DAY, computeResizeRange, createRangeFromDrag, eventAccessibleLabel, formatTimeRangeLabel, layoutDayBlocks, minutesOfDay, minutesToY, moveFocusDate, moveFocusSlot, moveRangeToSlot, snapMinutes, yToMinutes } from "./calendarMath.mjs";
+import { hairline, hairlineWidth, pressTargetHitSlop, useReadableTextOn, useResolvedKnobs } from "@multiplatform.one/theme";
+import React, { useState, useMemo, useCallback, useEffect, useId, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { Button, FloatingPanel, Input, zIndex } from "@multiplatform.one/forms";
+import { AnimatePresence, ScrollView, Text, XStack, YStack, isWeb, styled } from "tamagui";
+import { useDirection } from "../hooks/useDirection.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const hairlineEnd = isWeb ? {
+  borderInlineEndWidth: hairlineWidth,
+  borderInlineEndStyle: "solid",
+  className: "mp-hairline-ie"
+} : {
+  borderEndWidth: hairlineWidth
+};
+function gridCellEdges(end, bottom) {
+  const className = [end && "mp-hairline-ie", bottom && "mp-hairline-b"].filter(Boolean).join(" ") || void 0;
+  return {
+    ...(end ? hairlineEnd : null),
+    borderBottomWidth: bottom ? hairlineWidth : 0,
+    ...(isWeb && className ? {
+      className
+    } : null)
+  };
+}
+function eventChipTextColor(bg) {
+  if (!bg || !bg.startsWith("#")) return "$accentColor";
+  const hex = bg.slice(1);
+  const full = hex.length === 3 ? hex.split("").map(c => c + c).join("") : hex.slice(0, 6);
+  const [r, g, b] = [0, 2, 4].map(i => {
+    const c = Number.parseInt(full.slice(i, i + 2), 16) / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  const contrastWhite = 1.05 / (luminance + 0.05);
+  const contrastBlack = (luminance + 0.05) / 0.05;
+  return contrastWhite >= contrastBlack ? "#ffffff" : "#000000";
+}
 function getMonthDays(date, firstDayOfWeek) {
   const year = date.getFullYear();
   const month = date.getMonth();
@@ -35,7 +70,18 @@ function getWeekDays(date, firstDayOfWeek) {
   return days;
 }
 function formatDateKey(date) {
-  return date.toISOString().split("T")[0];
+  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}`;
+}
+function addMonths(date, delta) {
+  const next = new Date(date);
+  next.setDate(1);
+  next.setMonth(next.getMonth() + delta);
+  const lastDay = new Date(next.getFullYear(), next.getMonth() + 1, 0).getDate();
+  next.setDate(Math.min(date.getDate(), lastDay));
+  return next;
 }
 function isSameDay(d1, d2) {
   return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate();
@@ -43,6 +89,69 @@ function isSameDay(d1, d2) {
 function isToday(date) {
   return isSameDay(date, /* @__PURE__ */new Date());
 }
+const MS_PER_DAY = 864e5;
+function computeEventMoveRange(event, targetDay) {
+  const startOfDay = d => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+  const dayDelta = Math.round((startOfDay(targetDay).getTime() - startOfDay(event.start).getTime()) / MS_PER_DAY);
+  const shiftDays = d => new Date(d.getFullYear(), d.getMonth(), d.getDate() + dayDelta, d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds());
+  const start = shiftDays(event.start);
+  const end = event.end ? shiftDays(event.end) : new Date(start.getTime());
+  return {
+    start,
+    end
+  };
+}
+function findDayKeyAtPoint(pageX, pageY, layouts) {
+  for (const layout of layouts) {
+    if (pageX >= layout.x && pageX < layout.x + layout.width && pageY >= layout.y && pageY < layout.y + layout.height) {
+      return layout.key;
+    }
+  }
+  return null;
+}
+function measureDayLayouts(refs, cb) {
+  const entries = [...refs.entries()];
+  if (entries.length === 0) {
+    cb([]);
+    return;
+  }
+  const layouts = [];
+  let remaining = entries.length;
+  for (const [key, node] of entries) {
+    if (typeof node.measureInWindow !== "function") {
+      if (--remaining === 0) cb(layouts);
+      continue;
+    }
+    node.measureInWindow((x, y, width, height) => {
+      layouts.push({
+        key,
+        x,
+        y,
+        width,
+        height
+      });
+      if (--remaining === 0) cb(layouts);
+    });
+  }
+}
+function dayKeyToDate(key) {
+  const [ty, tm, td] = key.split("-").map(Number);
+  return new Date(ty, tm - 1, td);
+}
+function dateAtMinutes(day, minutes) {
+  return new Date(day.getFullYear(), day.getMonth(), day.getDate(), 0, minutes);
+}
+function isTimedEvent(event) {
+  return event.end !== void 0 && event.end.getTime() > event.start.getTime() && isSameDay(event.start, event.end) && event.allDay !== true;
+}
+const DRAG_THRESHOLD_PX = 4;
+const TOUCH_LONG_PRESS_MS = 300;
+const TOUCH_SLOP_PX = 8;
+const LIFT_SHADOW = "0px 8px 28px rgba(0,0,0,0.18), 0px 2px 6px rgba(0,0,0,0.08)";
+const MIN_BLOCK_PX = 18;
+const RESIZE_ZONE_PX = 44;
+const DAY_DISC_PX = 22;
+const MONTH_CHIP_MIN_PX = 24;
 function getWeekdayNames() {
   const formatter = new Intl.DateTimeFormat(void 0, {
     weekday: "short"
@@ -71,26 +180,709 @@ function formatHour(hour) {
     hour12: true
   }).format(date);
 }
+function formatDayLong(date) {
+  return new Intl.DateTimeFormat(void 0, {
+    weekday: "long",
+    month: "long",
+    day: "numeric"
+  }).format(date);
+}
 const weekdayNames = getWeekdayNames();
 const monthNames = getMonthNames();
+const hours = getHours();
+function startWebPointerSession(options) {
+  const threshold = options.thresholdPx ?? DRAG_THRESHOLD_PX;
+  const isTouch = options.pointerType === "touch";
+  let active = false;
+  let ended = false;
+  let escaped = false;
+  let liftArmed = !isTouch;
+  let last = {
+    x: options.startX,
+    y: options.startY
+  };
+  let prevUserSelect = "";
+  let longPressTimer = null;
+  const preventTouchScroll = te => {
+    if (active) te.preventDefault();
+  };
+  const activate = pt => {
+    if (active) return;
+    active = true;
+    prevUserSelect = document.body.style.userSelect;
+    document.body.style.userSelect = "none";
+    options.onActivate(pt);
+  };
+  const teardown = () => {
+    if (ended) return;
+    ended = true;
+    if (longPressTimer) clearTimeout(longPressTimer);
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerup", onUp);
+    window.removeEventListener("keydown", onKey, true);
+    window.removeEventListener("touchmove", preventTouchScroll);
+    if (active) document.body.style.userSelect = prevUserSelect;
+    options.onSettled?.(active, escaped);
+  };
+  const onMove = me => {
+    last = {
+      x: me.clientX,
+      y: me.clientY
+    };
+    if (!active) {
+      const travel = Math.hypot(me.clientX - options.startX, me.clientY - options.startY);
+      if (isTouch && !liftArmed) {
+        if (travel > TOUCH_SLOP_PX) teardown();
+        return;
+      }
+      if (travel < threshold) return;
+      activate(last);
+    }
+    options.onMove(last);
+  };
+  const onUp = ue => {
+    last = {
+      x: ue.clientX,
+      y: ue.clientY
+    };
+    const wasActive = active;
+    teardown();
+    if (wasActive) options.onCommit(last);else options.onTapInstead?.();
+  };
+  const onKey = ke => {
+    if (ke.key !== "Escape" || !active) return;
+    ke.stopPropagation();
+    escaped = true;
+    const cancel = options.onCancel;
+    teardown();
+    cancel();
+  };
+  if (isTouch) {
+    longPressTimer = setTimeout(() => {
+      liftArmed = true;
+      activate(last);
+    }, TOUCH_LONG_PRESS_MS);
+    window.addEventListener("touchmove", preventTouchScroll, {
+      passive: false
+    });
+  }
+  window.addEventListener("pointermove", onMove);
+  window.addEventListener("pointerup", onUp);
+  window.addEventListener("keydown", onKey, true);
+  return teardown;
+}
+function NowIndicator({
+  hourHeight
+}) {
+  const [now, setNow] = useState(() => /* @__PURE__ */new Date());
+  const isRTL = useDirection() === "rtl";
+  useEffect(() => {
+    const id = setInterval(() => setNow(/* @__PURE__ */new Date()), 6e4);
+    return () => clearInterval(id);
+  }, []);
+  const y = minutesToY(minutesOfDay(now), hourHeight);
+  return /* @__PURE__ */jsx(XStack, {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: y - 1,
+    height: 2,
+    backgroundColor: "$accentBackground",
+    pointerEvents: "none",
+    zIndex: 3,
+    ...{
+      "data-calendar-now": "true"
+    },
+    children: /* @__PURE__ */jsx(YStack, {
+      position: "absolute",
+      ...(isRTL ? {
+        right: -3
+      } : {
+        left: -3
+      }),
+      top: -3,
+      width: 8,
+      height: 8,
+      borderRadius: 4,
+      backgroundColor: "$accentBackground"
+    })
+  });
+}
+function SettleGhost({
+  settle,
+  transition,
+  borderRadius,
+  onDone
+}) {
+  const [moved, setMoved] = useState(false);
+  useEffect(() => {
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setMoved(true));
+    });
+    const timer = setTimeout(onDone, 480);
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+      clearTimeout(timer);
+    };
+  }, [onDone]);
+  return /* @__PURE__ */jsx(YStack, {
+    pointerEvents: "none",
+    ...borderRadius,
+    backgroundColor: settle.color || "$accentBackground",
+    padding: "$1",
+    transition,
+    x: moved ? settle.to.x - settle.from.x : 0,
+    y: moved ? settle.to.y - settle.from.y : 0,
+    scale: moved ? 1 : 1.03,
+    opacity: moved ? 0.6 : 0.95,
+    ...{
+      "data-calendar-settle-ghost": "true",
+      style: {
+        position: "fixed",
+        left: settle.from.x,
+        top: settle.from.y,
+        zIndex: zIndex.sheet,
+        maxWidth: 220,
+        boxShadow: LIFT_SHADOW
+      }
+    },
+    children: /* @__PURE__ */jsx(Text, {
+      fontSize: "$2",
+      numberOfLines: 1,
+      color: eventChipTextColor(settle.color),
+      children: settle.title
+    })
+  });
+}
+const CalendarSlide = styled(YStack, {
+  variants: {
+    fromStart: {
+      true: {
+        x: -24,
+        opacity: 0
+      }
+    },
+    fromEnd: {
+      true: {
+        x: 24,
+        opacity: 0
+      }
+    },
+    fade: {
+      true: {
+        opacity: 0
+      }
+    }
+  }
+});
 function Calendar({
   events,
   renderEvent,
   onDateSelect,
   onEventClick,
+  onEventMove,
+  onEventResize,
+  onEventCreate,
+  enableEventDrag,
   viewType: initialViewType = "month",
   initialDate,
   height = 600,
   showNavigation = true,
   showViewSwitcher = true,
   firstDayOfWeek = 0,
+  slotMinutes = 30,
   ...stackProps
 }) {
+  const {
+    t
+  } = useTranslation();
   const {
     knobProps
   } = useResolvedKnobs();
+  const onAccent = useReadableTextOn("$accentBackground");
+  const calendarId = useId();
+  const isRTL = useDirection() === "rtl";
   const [currentDate, setCurrentDate] = useState(initialDate ?? /* @__PURE__ */new Date());
   const [view, setView] = useState(initialViewType);
+  const sz = knobProps.sizeToken;
+  const hourHeight = sz === "$3" ? 48 : sz === "$5" ? 80 : 64;
+  const monthCellMinHeight = sz === "$3" ? 64 : sz === "$5" ? 96 : 76;
+  const space = knobProps.space;
+  const cellPad = space === "small" ? 2 : space === "large" ? 7 : 4;
+  const chipGap = space === "small" ? 2 : space === "large" ? 5 : 3;
+  const monthRowHardFloor = cellPad * 2 + DAY_DISC_PX + chipGap + MONTH_CHIP_MIN_PX;
+  const [monthBodyHeight, setMonthBodyHeight] = useState(0);
+  const overlayInset = isRTL ? {
+    left: 2,
+    right: 0
+  } : {
+    left: 0,
+    right: 2
+  };
+  const transition = knobProps.transition;
+  const webLayoutTransition = isWeb ? transition : void 0;
+  const navDirectionRef = useRef(0);
+  const hasNavigatedRef = useRef(false);
+  const periodKey = view === "month" ? `${currentDate.getFullYear()}-${currentDate.getMonth()}` : view === "week" ? formatDateKey(getWeekDays(currentDate, firstDayOfWeek)[0]) : formatDateKey(currentDate);
+  const motionKey = `${view}:${periodKey}`;
+  const dragEnabled = enableEventDrag ?? onEventMove !== void 0;
+  const hasDom = isWeb && typeof window !== "undefined" && typeof document !== "undefined";
+  const webDragEnabled = dragEnabled && hasDom;
+  const nativeDragEnabled = dragEnabled && !isWeb;
+  const webResizeEnabled = onEventResize !== void 0 && hasDom;
+  const webCreateEnabled = onEventCreate !== void 0 && hasDom;
+  const [dragGhost, setDragGhost] = useState(null);
+  const [dropTargetKey, setDropTargetKey] = useState(null);
+  const [slotTarget, setSlotTarget] = useState(null);
+  const [settle, setSettle] = useState(null);
+  const [resizePreview, setResizePreview] = useState(null);
+  const [createDraft, setCreateDraft] = useState(null);
+  const [editorState, setEditorState] = useState(null);
+  const [draftTitle, setDraftTitle] = useState("");
+  const [overflowDayKey, setOverflowDayKey] = useState(null);
+  const [scrollLocked, setScrollLocked] = useState(false);
+  const [draggingEventId, setDraggingEventId] = useState(null);
+  const suppressClickRef = useRef(false);
+  const dragSessionCleanupRef = useRef(null);
+  const slotTargetRef = useRef(null);
+  const resizePreviewRef = useRef(null);
+  const editorStateRef = useRef(null);
+  const draftTitleRef = useRef("");
+  const dayRefs = useRef(/* @__PURE__ */new Map());
+  const containerNodeRef = useRef(null);
+  const containerOffsetRef = useRef({
+    x: 0,
+    y: 0
+  });
+  const nativeSessionRef = useRef(null);
+  slotTargetRef.current = slotTarget;
+  resizePreviewRef.current = resizePreview;
+  editorStateRef.current = editorState;
+  draftTitleRef.current = draftTitle;
+  const registerDayRef = useCallback((key, node) => {
+    if (node) dayRefs.current.set(key, node);else dayRefs.current.delete(key);
+  }, []);
+  const refreshContainerOffset = useCallback(() => {
+    containerNodeRef.current?.measureInWindow?.((x, y) => {
+      containerOffsetRef.current = {
+        x,
+        y
+      };
+    });
+  }, []);
+  useEffect(() => () => dragSessionCleanupRef.current?.(), []);
+  const clearSettle = useCallback(() => setSettle(null), []);
+  const suppressNextClick = useCallback(() => {
+    suppressClickRef.current = true;
+    setTimeout(() => {
+      suppressClickRef.current = false;
+    }, 0);
+  }, []);
+  const beginSettle = useCallback((event, from, to) => {
+    if (!transition || !hasDom) return;
+    setSettle({
+      key: Date.now(),
+      title: event.title,
+      color: event.color,
+      from,
+      to
+    });
+  }, [transition, hasDom]);
+  const commitMoveToKey = useCallback((event, key) => {
+    if (!key) return;
+    const targetDay = dayKeyToDate(key);
+    if (!isSameDay(targetDay, event.start)) {
+      onEventMove?.(event, computeEventMoveRange(event, targetDay));
+    }
+  }, [onEventMove]);
+  const handleEventPointerDown = useCallback((event, e, mode) => {
+    if (!webDragEnabled) return;
+    if (e.button !== void 0 && e.button !== 0) return;
+    e.stopPropagation?.();
+    dragSessionCleanupRef.current?.();
+    const chipEl = e.currentTarget;
+    const originRect = chipEl?.getBoundingClientRect?.() ?? null;
+    const durationMin = event.end ? Math.max(slotMinutes, (event.end.getTime() - event.start.getTime()) / 6e4) : slotMinutes;
+    const grabOffsetMin = mode === "slot" && originRect ? yToMinutes(e.clientY - originRect.top, hourHeight) : 0;
+    const findDayKey = (x, y) => {
+      const el = document.elementFromPoint?.(x, y);
+      const dayEl = el?.closest?.("[data-calendar-day]");
+      return dayEl?.getAttribute("data-calendar-day") ?? null;
+    };
+    const findSlotTarget = (x, y) => {
+      const el = document.elementFromPoint?.(x, y);
+      const colEl = el?.closest?.("[data-calendar-timecol]");
+      if (!colEl) return null;
+      const dayKey = colEl.getAttribute("data-calendar-timecol");
+      if (!dayKey) return null;
+      const rect = colEl.getBoundingClientRect();
+      const raw = yToMinutes(y - rect.top, hourHeight) - grabOffsetMin;
+      const startMin = Math.max(0, Math.min(MINUTES_PER_DAY - durationMin, snapMinutes(raw, slotMinutes, "round")));
+      return {
+        dayKey,
+        startMin,
+        durationMin,
+        rect
+      };
+    };
+    const endVisuals = () => {
+      setDragGhost(null);
+      setDropTargetKey(null);
+      setSlotTarget(null);
+      setDraggingEventId(null);
+      setScrollLocked(false);
+      dragSessionCleanupRef.current = null;
+    };
+    let lastPoint = {
+      x: e.clientX,
+      y: e.clientY
+    };
+    const cleanup = startWebPointerSession({
+      pointerType: e.pointerType,
+      startX: e.clientX,
+      startY: e.clientY,
+      onActivate: pt => {
+        lastPoint = pt;
+        setDraggingEventId(event.id);
+        setScrollLocked(true);
+        setDragGhost({
+          event,
+          x: pt.x,
+          y: pt.y
+        });
+      },
+      onMove: pt => {
+        lastPoint = pt;
+        setDragGhost({
+          event,
+          x: pt.x,
+          y: pt.y
+        });
+        if (mode === "slot") {
+          const target = findSlotTarget(pt.x, pt.y);
+          setSlotTarget(target ? {
+            dayKey: target.dayKey,
+            startMin: target.startMin,
+            durationMin
+          } : null);
+          setDropTargetKey(target ? null : findDayKey(pt.x, pt.y));
+        } else {
+          setDropTargetKey(findDayKey(pt.x, pt.y));
+        }
+      },
+      onCommit: pt => {
+        endVisuals();
+        suppressNextClick();
+        const ghostFrom = {
+          x: pt.x + 12,
+          y: pt.y + 12
+        };
+        if (mode === "slot") {
+          const target = findSlotTarget(pt.x, pt.y);
+          if (target) {
+            const targetDay = dayKeyToDate(target.dayKey);
+            const range = moveRangeToSlot(event, targetDay, target.startMin);
+            if (range.start.getTime() !== event.start.getTime()) {
+              onEventMove?.(event, range);
+            }
+            beginSettle(event, ghostFrom, {
+              x: target.rect.left + 2,
+              y: target.rect.top + minutesToY(target.startMin, hourHeight)
+            });
+            return;
+          }
+        }
+        const dayKey = findDayKey(pt.x, pt.y);
+        if (dayKey) {
+          commitMoveToKey(event, dayKey);
+          const cellEl = document.querySelector(`[data-calendar-day="${dayKey}"]`);
+          const rect = cellEl?.getBoundingClientRect?.();
+          if (rect) beginSettle(event, ghostFrom, {
+            x: rect.left + 4,
+            y: rect.top + 24
+          });
+          return;
+        }
+        if (originRect) beginSettle(event, ghostFrom, {
+          x: originRect.left,
+          y: originRect.top
+        });
+      },
+      onCancel: () => {
+        const ghost = {
+          x: lastPoint.x + 12,
+          y: lastPoint.y + 12
+        };
+        endVisuals();
+        suppressClickRef.current = true;
+        window.addEventListener("pointerup", () => setTimeout(() => {
+          suppressClickRef.current = false;
+        }, 0), {
+          once: true
+        });
+        if (originRect) {
+          beginSettle(event, ghost, {
+            x: originRect.left,
+            y: originRect.top
+          });
+        }
+      },
+      onSettled: activated => {
+        if (!activated) {
+          endVisuals();
+        }
+      }
+    });
+    dragSessionCleanupRef.current = cleanup;
+  }, [webDragEnabled, slotMinutes, hourHeight, onEventMove, commitMoveToKey, beginSettle, suppressNextClick]);
+  const handleResizePointerDown = useCallback((event, edge, e) => {
+    if (!webResizeEnabled) return;
+    if (e.button !== void 0 && e.button !== 0) return;
+    e.stopPropagation?.();
+    dragSessionCleanupRef.current?.();
+    const handleEl = e.currentTarget;
+    const colEl = handleEl?.closest?.("[data-calendar-timecol]");
+    const colRect = colEl?.getBoundingClientRect?.();
+    if (!colRect) return;
+    const applyPreview = pt => {
+      const raw = yToMinutes(pt.y - colRect.top, hourHeight);
+      const range = computeResizeRange(event, edge, raw, slotMinutes);
+      setResizePreview({
+        id: event.id,
+        start: range.start,
+        end: range.end
+      });
+    };
+    const cleanup = startWebPointerSession({
+      pointerType: e.pointerType,
+      startX: e.clientX,
+      startY: e.clientY,
+      thresholdPx: 1,
+      onActivate: pt => {
+        setScrollLocked(true);
+        applyPreview(pt);
+      },
+      onMove: applyPreview,
+      onCommit: () => {
+        const preview = resizePreviewRef.current;
+        setResizePreview(null);
+        setScrollLocked(false);
+        dragSessionCleanupRef.current = null;
+        suppressNextClick();
+        if (!preview) return;
+        const prevEnd = event.end ?? event.start;
+        if (preview.start.getTime() !== event.start.getTime() || preview.end.getTime() !== prevEnd.getTime()) {
+          onEventResize?.(event, {
+            start: preview.start,
+            end: preview.end
+          });
+        }
+      },
+      onCancel: () => {
+        setResizePreview(null);
+        setScrollLocked(false);
+        dragSessionCleanupRef.current = null;
+        suppressClickRef.current = true;
+        window.addEventListener("pointerup", () => setTimeout(() => {
+          suppressClickRef.current = false;
+        }, 0), {
+          once: true
+        });
+      },
+      onSettled: activated => {
+        if (!activated) {
+          setResizePreview(null);
+          setScrollLocked(false);
+          dragSessionCleanupRef.current = null;
+        }
+      }
+    });
+    dragSessionCleanupRef.current = cleanup;
+  }, [webResizeEnabled, hourHeight, slotMinutes, onEventResize, suppressNextClick]);
+  const openEditor = useCallback((dayKey, range) => {
+    setCreateDraft(null);
+    setDraftTitle("");
+    setEditorState({
+      dayKey,
+      start: range.start,
+      end: range.end
+    });
+  }, []);
+  const commitEditor = useCallback(() => {
+    const state = editorStateRef.current;
+    if (!state) return;
+    setEditorState(null);
+    setCreateDraft(null);
+    setDraftTitle("");
+    onEventCreate?.({
+      title: draftTitleRef.current.trim() || t("New event"),
+      start: state.start,
+      end: state.end
+    });
+  }, [onEventCreate, t]);
+  const handleGridPointerDown = useCallback((day, e) => {
+    if (!hasDom) return;
+    if (e.button !== void 0 && e.button !== 0) return;
+    if (editorStateRef.current) return;
+    dragSessionCleanupRef.current?.();
+    const colEl = e.currentTarget;
+    const colRect = colEl?.getBoundingClientRect?.();
+    if (!colRect) return;
+    const dayKey = formatDateKey(day);
+    const anchorRaw = yToMinutes(e.clientY - colRect.top, hourHeight);
+    let created = false;
+    let lastRange = null;
+    const cleanup = startWebPointerSession({
+      pointerType: e.pointerType,
+      startX: e.clientX,
+      startY: e.clientY,
+      onActivate: pt => {
+        if (!webCreateEnabled) return;
+        created = true;
+        setScrollLocked(true);
+        const raw = yToMinutes(pt.y - colRect.top, hourHeight);
+        const range = createRangeFromDrag(day, anchorRaw, raw, slotMinutes);
+        lastRange = range;
+        setCreateDraft({
+          dayKey,
+          start: range.start,
+          end: range.end
+        });
+      },
+      onMove: pt => {
+        if (!webCreateEnabled) return;
+        const raw = yToMinutes(pt.y - colRect.top, hourHeight);
+        const range = createRangeFromDrag(day, anchorRaw, raw, slotMinutes);
+        lastRange = range;
+        setCreateDraft({
+          dayKey,
+          start: range.start,
+          end: range.end
+        });
+      },
+      onCommit: () => {
+        setScrollLocked(false);
+        dragSessionCleanupRef.current = null;
+        suppressNextClick();
+        if (!created) return;
+        const range = lastRange ?? createRangeFromDrag(day, anchorRaw, anchorRaw, slotMinutes);
+        setTimeout(() => openEditor(dayKey, range), 0);
+      },
+      onCancel: () => {
+        setCreateDraft(null);
+        setScrollLocked(false);
+        dragSessionCleanupRef.current = null;
+      },
+      onTapInstead: () => {
+        dragSessionCleanupRef.current = null;
+        if (suppressClickRef.current) return;
+        const startMin = snapMinutes(anchorRaw, slotMinutes, "floor");
+        onDateSelect?.(dateAtMinutes(day, startMin));
+      },
+      onSettled: activated => {
+        if (!activated) dragSessionCleanupRef.current = null;
+      }
+    });
+    dragSessionCleanupRef.current = cleanup;
+  }, [hasDom, webCreateEnabled, hourHeight, slotMinutes, onDateSelect, openEditor, suppressNextClick]);
+  const endNativeSession = useCallback(opts => {
+    const session = nativeSessionRef.current;
+    nativeSessionRef.current = null;
+    setScrollLocked(false);
+    setDragGhost(null);
+    setDropTargetKey(null);
+    setDraggingEventId(null);
+    if (!session?.dragging) return;
+    suppressClickRef.current = true;
+    setTimeout(() => {
+      suppressClickRef.current = false;
+    }, 0);
+    if (!opts.commit || opts.pageX === void 0 || opts.pageY === void 0) return;
+    measureDayLayouts(dayRefs.current, layouts => {
+      const key = findDayKeyAtPoint(opts.pageX, opts.pageY, layouts) ?? findDayKeyAtPoint(opts.pageX, opts.pageY, session.layouts);
+      commitMoveToKey(session.event, key);
+    });
+  }, [commitMoveToKey]);
+  const handleNativeGrant = useCallback((event, e) => {
+    if (!nativeDragEnabled) return;
+    const pageX = e.nativeEvent?.pageX ?? 0;
+    const pageY = e.nativeEvent?.pageY ?? 0;
+    nativeSessionRef.current = {
+      event,
+      startX: pageX,
+      startY: pageY,
+      dragging: false,
+      layouts: []
+    };
+  }, [nativeDragEnabled]);
+  const handleNativeMove = useCallback(e => {
+    const session = nativeSessionRef.current;
+    if (!session) return;
+    const pageX = e.nativeEvent?.pageX ?? 0;
+    const pageY = e.nativeEvent?.pageY ?? 0;
+    if (!session.dragging) {
+      if (Math.hypot(pageX - session.startX, pageY - session.startY) < DRAG_THRESHOLD_PX) return;
+      session.dragging = true;
+      setScrollLocked(true);
+      setDraggingEventId(session.event.id);
+      refreshContainerOffset();
+      measureDayLayouts(dayRefs.current, layouts => {
+        if (nativeSessionRef.current) nativeSessionRef.current.layouts = layouts;
+      });
+    }
+    setDragGhost({
+      event: session.event,
+      x: pageX - containerOffsetRef.current.x + 12,
+      y: pageY - containerOffsetRef.current.y + 12
+    });
+    setDropTargetKey(findDayKeyAtPoint(pageX, pageY, session.layouts));
+  }, [refreshContainerOffset]);
+  const handleNativeRelease = useCallback(e => {
+    const session = nativeSessionRef.current;
+    if (!session) return;
+    if (!session.dragging) {
+      nativeSessionRef.current = null;
+      onEventClick?.(session.event);
+      return;
+    }
+    endNativeSession({
+      commit: true,
+      pageX: e.nativeEvent?.pageX,
+      pageY: e.nativeEvent?.pageY
+    });
+  }, [endNativeSession, onEventClick]);
+  const handleNativeTerminate = useCallback(() => {
+    endNativeSession({
+      commit: false
+    });
+  }, [endNativeSession]);
+  const getEventDragProps = useCallback((event, mode = "day") => {
+    const base = {
+      "data-calendar-event": event.id
+    };
+    if (webDragEnabled) {
+      return {
+        ...base,
+        onPointerDown: e => handleEventPointerDown(event, e, mode)
+      };
+    }
+    if (nativeDragEnabled) {
+      return {
+        ...base,
+        // Claim the touch so moves continue outside the chip (ScrollView-safe once dragging).
+        onStartShouldSetResponder: () => true,
+        onMoveShouldSetResponder: () => true,
+        onResponderTerminationRequest: () => !nativeSessionRef.current?.dragging,
+        onResponderGrant: e => handleNativeGrant(event, e),
+        onResponderMove: handleNativeMove,
+        onResponderRelease: handleNativeRelease,
+        onResponderTerminate: handleNativeTerminate
+      };
+    }
+    return base;
+  }, [webDragEnabled, nativeDragEnabled, handleEventPointerDown, handleNativeGrant, handleNativeMove, handleNativeRelease, handleNativeTerminate]);
   const eventsByDate = useMemo(() => {
     const grouped = {};
     for (const event of events) {
@@ -101,22 +893,35 @@ function Calendar({
     return grouped;
   }, [events]);
   const goToPrevious = useCallback(() => {
+    navDirectionRef.current = -1;
+    hasNavigatedRef.current = true;
     setCurrentDate(prev => {
+      if (view === "month") return addMonths(prev, -1);
       const next = new Date(prev);
-      if (view === "month") next.setMonth(prev.getMonth() - 1);else if (view === "week") next.setDate(prev.getDate() - 7);else next.setDate(prev.getDate() - 1);
+      if (view === "week") next.setDate(prev.getDate() - 7);else next.setDate(prev.getDate() - 1);
       return next;
     });
   }, [view]);
   const goToNext = useCallback(() => {
+    navDirectionRef.current = 1;
+    hasNavigatedRef.current = true;
     setCurrentDate(prev => {
+      if (view === "month") return addMonths(prev, 1);
       const next = new Date(prev);
-      if (view === "month") next.setMonth(prev.getMonth() + 1);else if (view === "week") next.setDate(prev.getDate() + 7);else next.setDate(prev.getDate() + 1);
+      if (view === "week") next.setDate(prev.getDate() + 7);else next.setDate(prev.getDate() + 1);
       return next;
     });
   }, [view]);
   const goToToday = useCallback(() => {
+    navDirectionRef.current = 0;
+    hasNavigatedRef.current = true;
     setCurrentDate(/* @__PURE__ */new Date());
   }, []);
+  const changeView = useCallback(next => {
+    navDirectionRef.current = 0;
+    hasNavigatedRef.current = true;
+    setView(next);
+  }, []);
   const displayTitle = useMemo(() => {
     if (view === "month") {
       return `${monthNames[currentDate.getMonth()]} ${currentDate.getFullYear()}`;
@@ -132,50 +937,173 @@ function Calendar({
     }
     return `${weekdayNames[currentDate.getDay()]}, ${monthNames[currentDate.getMonth()]} ${currentDate.getDate()}, ${currentDate.getFullYear()}`;
   }, [currentDate, view, firstDayOfWeek]);
+  const [focusedDate, setFocusedDate] = useState(null);
+  const [focusedSlotMin, setFocusedSlotMin] = useState(9 * 60);
+  const [announcement, setAnnouncement] = useState("");
+  useEffect(() => {
+    if (hasNavigatedRef.current) setAnnouncement(displayTitle);
+  }, [displayTitle]);
+  const focusedDayKey = focusedDate ? formatDateKey(focusedDate) : null;
+  const focusCellId = focusedDayKey ? view === "month" ? `${calendarId}-day-${focusedDayKey}` : `${calendarId}-slot-cursor` : void 0;
+  const handleBodyKeyDown = useCallback(e => {
+    if (editorStateRef.current) return;
+    const key = e.key;
+    const arrows = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
+    if (arrows.includes(key)) {
+      e.preventDefault?.();
+      const base = focusedDate ?? currentDate;
+      if (!focusedDate) {
+        setFocusedDate(base);
+        setAnnouncement(formatDayLong(base));
+        return;
+      }
+      if (view !== "month" && (key === "ArrowUp" || key === "ArrowDown")) {
+        const nextMin = moveFocusSlot(focusedSlotMin, key, slotMinutes);
+        setFocusedSlotMin(nextMin);
+        setAnnouncement(`${formatDayLong(base)}, ${formatTimeRangeLabel(dateAtMinutes(base, nextMin), dateAtMinutes(base, nextMin + slotMinutes))}`);
+        return;
+      }
+      const logicalKey = isRTL && key === "ArrowLeft" ? "ArrowRight" : isRTL && key === "ArrowRight" ? "ArrowLeft" : key;
+      const next = moveFocusDate(base, logicalKey, view);
+      setFocusedDate(next);
+      setAnnouncement(formatDayLong(next));
+      const delta = next.getTime() - base.getTime();
+      if (view === "month" && next.getMonth() !== currentDate.getMonth()) {
+        navDirectionRef.current = delta > 0 ? 1 : -1;
+        hasNavigatedRef.current = true;
+        setCurrentDate(next);
+      } else if (view === "week") {
+        const visible = getWeekDays(currentDate, firstDayOfWeek).map(formatDateKey);
+        if (!visible.includes(formatDateKey(next))) {
+          navDirectionRef.current = delta > 0 ? 1 : -1;
+          hasNavigatedRef.current = true;
+          setCurrentDate(next);
+        }
+      } else if (view === "day" && !isSameDay(next, currentDate)) {
+        navDirectionRef.current = delta > 0 ? 1 : -1;
+        hasNavigatedRef.current = true;
+        setCurrentDate(next);
+      }
+      return;
+    }
+    if (key === "Enter" && focusedDate) {
+      e.preventDefault?.();
+      if (view === "month") {
+        onDateSelect?.(focusedDate);
+        return;
+      }
+      const start = dateAtMinutes(focusedDate, focusedSlotMin);
+      if (onEventCreate) {
+        openEditor(formatDateKey(focusedDate), {
+          start,
+          end: dateAtMinutes(focusedDate, focusedSlotMin + slotMinutes)
+        });
+      } else {
+        onDateSelect?.(start);
+      }
+    }
+  }, [focusedDate, currentDate, view, focusedSlotMin, slotMinutes, firstDayOfWeek, isRTL, onDateSelect, onEventCreate, openEditor]);
+  const eventA11yProps = useCallback(event => ({
+    role: "button",
+    tabIndex: 0,
+    "aria-label": eventAccessibleLabel(event),
+    onKeyDown: ke => {
+      if (ke.key === "Enter" || ke.key === " ") {
+        ke.preventDefault?.();
+        ke.stopPropagation?.();
+        onEventClick?.(event);
+      }
+    }
+  }), [onEventClick]);
   const renderEventBadge = useCallback((event, compact = false) => {
-    if (renderEvent) return renderEvent(event);
+    const dragProps = getEventDragProps(event, "day");
+    const lifted = draggingEventId === event.id;
+    if (renderEvent) {
+      if (!dragEnabled) {
+        return /* @__PURE__ */jsx(React.Fragment, {
+          children: renderEvent(event)
+        }, event.id);
+      }
+      return /* @__PURE__ */jsx(YStack, {
+        cursor: webDragEnabled ? "grab" : void 0,
+        opacity: lifted ? 0.4 : 1,
+        ...dragProps,
+        children: renderEvent(event)
+      }, event.id);
+    }
     return /* @__PURE__ */jsx(YStack, {
       ...knobProps.borderRadius,
       backgroundColor: event.color || "$accentBackground",
       padding: compact ? "$1" : "$2",
+      minHeight: MONTH_CHIP_MIN_PX,
+      justifyContent: "center",
+      hitSlop: pressTargetHitSlop(compact ? MONTH_CHIP_MIN_PX : 32),
+      opacity: lifted ? 0.4 : 1,
       hoverStyle: {
-        opacity: 0.9
+        opacity: lifted ? 0.4 : 0.9
       },
       pressStyle: {
         opacity: 0.8
       },
-      cursor: "pointer",
-      onPress: e => {
+      cursor: webDragEnabled ? "grab" : "pointer",
+      ...eventA11yProps(event),
+      ...dragProps,
+      onPress: nativeDragEnabled ? void 0 : e => {
         e?.stopPropagation?.();
+        if (suppressClickRef.current) return;
         onEventClick?.(event);
       },
       children: /* @__PURE__ */jsx(Text, {
+        ...knobProps.body,
         fontSize: compact ? "$1" : "$2",
         numberOfLines: compact ? 1 : 2,
-        color: "white",
+        color: eventChipTextColor(event.color),
         children: event.title
       })
     }, event.id);
-  }, [renderEvent, onEventClick, knobProps.borderRadius]);
+  }, [renderEvent, onEventClick, knobProps.borderRadius, dragEnabled, webDragEnabled, nativeDragEnabled, getEventDragProps, eventA11yProps, draggingEventId]);
+  const MONTH_VISIBLE_EVENTS = 3;
   const renderMonthView = () => {
     const monthDays = getMonthDays(currentDate, firstDayOfWeek);
+    const totalWeeks = Math.ceil(monthDays.length / 7);
+    let monthRowMinHeight = monthCellMinHeight;
+    if (monthBodyHeight > 0 && totalWeeks * monthCellMinHeight > monthBodyHeight) {
+      monthRowMinHeight = totalWeeks * monthRowHardFloor <= monthBodyHeight ? monthRowHardFloor : monthBodyHeight / Math.max(1, Math.floor(monthBodyHeight / monthRowHardFloor));
+    }
     const weekdayHeaders = [];
     for (let i = 0; i < 7; i++) {
       weekdayHeaders.push(weekdayNames[(firstDayOfWeek + i) % 7]);
     }
     return /* @__PURE__ */jsxs(YStack, {
       flex: 1,
+      role: "grid",
+      "aria-label": t("Calendar"),
+      tabIndex: 0,
+      "aria-activedescendant": focusCellId,
+      onKeyDown: handleBodyKeyDown,
+      outlineWidth: 0,
+      focusVisibleStyle: {
+        outlineWidth: 2,
+        outlineColor: "$accentBackground",
+        outlineStyle: "solid"
+      },
+      ...{
+        "data-calendar-body": view
+      },
       children: [/* @__PURE__ */jsx(XStack, {
-        borderBottomWidth: 1,
+        ...hairline.bottom,
         borderColor: "$borderColor",
+        role: "row",
         children: weekdayHeaders.map(day => /* @__PURE__ */jsx(YStack, {
           flex: 1,
           padding: "$2",
           alignItems: "center",
+          role: "columnheader",
           ...{
             backgroundColor: componentColors.surface.background
           },
           children: /* @__PURE__ */jsx(Text, {
+            ...knobProps.body,
             fontWeight: "500",
             fontSize: "$2",
             color: componentColors.text.muted,
@@ -184,42 +1112,136 @@ function Calendar({
         }, day))
       }), /* @__PURE__ */jsx(ScrollView, {
         flex: 1,
+        scrollEnabled: !scrollLocked,
+        contentContainerStyle: {
+          flexGrow: 1
+        },
+        onLayout: e => {
+          const next = e.nativeEvent.layout.height;
+          setMonthBodyHeight(prev => prev === next ? prev : next);
+        },
         children: /* @__PURE__ */jsx(YStack, {
+          flex: 1,
           children: Array.from({
-            length: Math.ceil(monthDays.length / 7)
-          }).map((_, weekIndex) => /* @__PURE__ */jsx(XStack, {
-            minHeight: 100,
-            children: monthDays.slice(weekIndex * 7, (weekIndex + 1) * 7).map(day => {
+            length: totalWeeks
+          }).map((_, weekIndex, weeks) =>
+          // basis:auto (not flex={1}): rows grow from their content and
+          // share only the EXTRA space, so a crowded cell can never be
+          // sliced by a fixed row share; scroll engages past the floor.
+          /* @__PURE__ */
+          jsx(XStack, {
+            flexGrow: 1,
+            flexShrink: 0,
+            flexBasis: "auto",
+            minHeight: monthRowMinHeight,
+            role: "row",
+            children: monthDays.slice(weekIndex * 7, (weekIndex + 1) * 7).map((day, dayIndex) => {
               const isCurrentMonth = day.getMonth() === currentDate.getMonth();
-              const dayEvents = eventsByDate[formatDateKey(day)] || [];
+              const dayKey = formatDateKey(day);
+              const dayEvents = eventsByDate[dayKey] || [];
+              const isDropTarget = dragGhost !== null && dropTargetKey === dayKey;
+              const isFocused = focusedDayKey === dayKey;
+              const hiddenCount = dayEvents.length - MONTH_VISIBLE_EVENTS;
+              const today = isToday(day);
               return /* @__PURE__ */jsxs(YStack, {
+                id: `${calendarId}-day-${dayKey}`,
+                ...{
+                  role: "gridcell"
+                },
+                "aria-selected": isFocused || void 0,
+                "aria-label": dayEvents.length > 0 ? `${formatDayLong(day)}, ${withInterp(t("{{count}} events"), {
+                  count: dayEvents.length
+                })}` : formatDayLong(day),
+                ref: nativeDragEnabled ? node => registerDayRef(dayKey, node) : void 0,
                 flex: 1,
-                minHeight: 100,
-                borderRightWidth: 1,
-                borderBottomWidth: 1,
+                minHeight: monthRowMinHeight,
+                ...gridCellEdges(dayIndex < 6, weekIndex < weeks.length - 1),
                 borderColor: "$borderColor",
-                backgroundColor: isToday(day) ? componentColors.surface.background : isCurrentMonth ? "$background" : componentColors.surface.background,
-                padding: "$1",
-                onPress: () => onDateSelect?.(day),
+                backgroundColor: isDropTarget ? "$accentBackground" : isCurrentMonth ? "$background" : componentColors.surface.background,
+                padding: cellPad,
+                ...(isFocused && {
+                  outlineWidth: 2,
+                  outlineColor: "$accentBackground",
+                  outlineStyle: "solid",
+                  outlineOffset: -2
+                }),
+                ...{
+                  "data-calendar-day": dayKey
+                },
+                onPress: () => {
+                  if (suppressClickRef.current) return;
+                  onDateSelect?.(day);
+                },
                 cursor: "pointer",
                 hoverStyle: {
                   backgroundColor: componentColors.surface.background
                 },
-                children: [/* @__PURE__ */jsx(Text, {
-                  fontSize: "$2",
-                  fontWeight: isToday(day) ? "700" : "400",
-                  color: isToday(day) ? "$accentColor" : isCurrentMonth ? "$color" : componentColors.text.subtle,
-                  textAlign: "right",
-                  paddingRight: "$1",
-                  children: day.getDate()
+                children: [/* @__PURE__ */jsx(XStack, {
+                  justifyContent: "flex-end",
+                  paddingInlineEnd: "$1",
+                  children: /* @__PURE__ */jsx(YStack, {
+                    width: DAY_DISC_PX,
+                    height: DAY_DISC_PX,
+                    borderRadius: DAY_DISC_PX / 2,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: today ? "$accentBackground" : "transparent",
+                    ...(today && {
+                      "data-calendar-today": "true"
+                    }),
+                    children: /* @__PURE__ */jsx(Text, {
+                      ...knobProps.body,
+                      fontSize: "$2",
+                      fontWeight: today ? "700" : "400",
+                      color: today ? onAccent ?? "$accentColor" : isCurrentMonth ? "$color" :
+                      // muted, not subtle: adjacent-month days are
+                      // clickable text — $color8 measured 1.79:1
+                      componentColors.text.muted,
+                      textAlign: "center",
+                      children: day.getDate()
+                    })
+                  })
                 }), /* @__PURE__ */jsxs(YStack, {
-                  gap: "$1",
-                  marginTop: "$1",
-                  children: [dayEvents.slice(0, 3).map(event => renderEventBadge(event, true)), dayEvents.length > 3 && /* @__PURE__ */jsxs(Text, {
-                    fontSize: "$1",
-                    color: componentColors.text.muted,
-                    paddingLeft: "$1",
-                    children: ["+", dayEvents.length - 3, " more"]
+                  gap: chipGap,
+                  marginTop: chipGap,
+                  children: [dayEvents.slice(0, MONTH_VISIBLE_EVENTS).map(event => renderEventBadge(event, true)), hiddenCount > 0 && /* @__PURE__ */jsx(FloatingPanel, {
+                    open: overflowDayKey === dayKey,
+                    onOpenChange: open => setOverflowDayKey(open ? dayKey : null),
+                    fitContent: true,
+                    trigger: /* @__PURE__ */jsx(XStack, {
+                      role: "button",
+                      "aria-label": withInterp(t("Show all {{count}} events"), {
+                        count: dayEvents.length
+                      }),
+                      cursor: "pointer",
+                      paddingInlineStart: "$1",
+                      onPress: isWeb ? e => e?.stopPropagation?.() : void 0,
+                      hoverStyle: {
+                        opacity: 0.7
+                      },
+                      ...{
+                        "data-calendar-overflow": String(hiddenCount)
+                      },
+                      children: /* @__PURE__ */jsx(Text, {
+                        fontSize: "$1",
+                        color: componentColors.text.muted,
+                        children: withInterp(t("+{{count}} more"), {
+                          count: hiddenCount
+                        })
+                      })
+                    }),
+                    children: /* @__PURE__ */jsxs(YStack, {
+                      gap: "$1",
+                      minWidth: 220,
+                      ...{
+                        "data-calendar-overflow-panel": dayKey
+                      },
+                      children: [/* @__PURE__ */jsx(Text, {
+                        ...knobProps.heading,
+                        fontSize: "$3",
+                        children: formatDayLong(day)
+                      }), dayEvents.map(event => renderEventBadge(event, false))]
+                    })
                   })]
                 })]
               }, day.toISOString());
@@ -229,14 +1251,164 @@ function Calendar({
       })]
     });
   };
-  const renderWeekView = () => {
-    const weekDays = getWeekDays(currentDate, firstDayOfWeek);
+  const timeGridScrollRef = useRef(null);
+  const gridHeight = 24 * hourHeight;
+  useEffect(() => {
+    if (view === "month") return;
+    const target = Math.max(0, minutesToY(7 * 60, hourHeight) - 8);
+    timeGridScrollRef.current?.scrollTo?.({
+      y: target,
+      animated: false
+    });
+  }, [view, hourHeight]);
+  const renderTimedBlock = (event, layout) => {
+    const preview = resizePreview?.id === event.id ? resizePreview : null;
+    const start = preview ? preview.start : event.start;
+    const end = preview ? preview.end : event.end ?? event.start;
+    const startMin = minutesOfDay(start);
+    const endMin = Math.max(startMin + slotMinutes, startMin + (end.getTime() - start.getTime()) / 6e4);
+    const top = minutesToY(startMin, hourHeight);
+    const blockHeight = Math.max(MIN_BLOCK_PX, minutesToY(endMin - startMin, hourHeight));
+    const widthPct = 100 / layout.columns;
+    const leftPct = (isRTL ? layout.columns - 1 - layout.column : layout.column) * widthPct;
+    const lifted = draggingEventId === event.id;
+    const zoneInner = Math.min(RESIZE_ZONE_PX / 2, blockHeight / 2);
+    const dragProps = getEventDragProps(event, "slot");
+    return /* @__PURE__ */jsxs(YStack, {
+      position: "absolute",
+      top,
+      height: blockHeight,
+      left: `${leftPct}%`,
+      width: `${widthPct}%`,
+      paddingInlineEnd: 2,
+      zIndex: preview ? 4 : 2,
+      transition: webLayoutTransition,
+      children: [/* @__PURE__ */jsx(YStack, {
+        flex: 1,
+        ...knobProps.borderRadius,
+        backgroundColor: event.color || "$accentBackground",
+        padding: "$1",
+        overflow: "hidden",
+        opacity: lifted ? 0.4 : 1,
+        borderWidth: 1,
+        borderColor: "$background",
+        cursor: webDragEnabled ? "grab" : "pointer",
+        ...eventA11yProps(event),
+        ...dragProps,
+        onPress: nativeDragEnabled ? void 0 : e => {
+          e?.stopPropagation?.();
+          if (suppressClickRef.current) return;
+          onEventClick?.(event);
+        },
+        children: renderEvent ? renderEvent(event) : /* @__PURE__ */jsxs(Fragment, {
+          children: [/* @__PURE__ */jsx(Text, {
+            fontSize: "$1",
+            fontWeight: "600",
+            numberOfLines: 1,
+            color: eventChipTextColor(event.color),
+            children: event.title
+          }), blockHeight >= 34 && /* @__PURE__ */jsx(Text, {
+            fontSize: "$1",
+            numberOfLines: 1,
+            color: eventChipTextColor(event.color),
+            children: formatTimeRangeLabel(start, end)
+          })]
+        })
+      }), webResizeEnabled && /* @__PURE__ */jsxs(Fragment, {
+        children: [/* @__PURE__ */jsx(YStack, {
+          position: "absolute",
+          ...overlayInset,
+          top: -RESIZE_ZONE_PX / 2,
+          height: RESIZE_ZONE_PX / 2 + zoneInner,
+          cursor: "ns-resize",
+          zIndex: 3,
+          justifyContent: "flex-end",
+          alignItems: "center",
+          opacity: 0,
+          hoverStyle: {
+            opacity: 1
+          },
+          onPointerDown: e => handleResizePointerDown(event, "start", e),
+          ...{
+            "data-calendar-resize": `start:${event.id}`
+          },
+          children: /* @__PURE__ */jsx(YStack, {
+            width: 28,
+            height: 3,
+            borderRadius: 2,
+            backgroundColor: "$accentColor",
+            marginBottom: 2
+          })
+        }), /* @__PURE__ */jsx(YStack, {
+          position: "absolute",
+          ...overlayInset,
+          bottom: -RESIZE_ZONE_PX / 2,
+          height: RESIZE_ZONE_PX / 2 + zoneInner,
+          cursor: "ns-resize",
+          zIndex: 3,
+          justifyContent: "flex-start",
+          alignItems: "center",
+          opacity: 0,
+          hoverStyle: {
+            opacity: 1
+          },
+          onPointerDown: e => handleResizePointerDown(event, "end", e),
+          ...{
+            "data-calendar-resize": `end:${event.id}`
+          },
+          children: /* @__PURE__ */jsx(YStack, {
+            width: 28,
+            height: 3,
+            borderRadius: 2,
+            backgroundColor: "$accentColor",
+            marginTop: 2
+          })
+        })]
+      }), preview && /* @__PURE__ */jsx(YStack, {
+        position: "absolute",
+        top: -26,
+        alignSelf: "center",
+        backgroundColor: "$background",
+        ...knobProps.borderRadius,
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        paddingHorizontal: "$2",
+        zIndex: 5,
+        pointerEvents: "none",
+        ...{
+          "data-calendar-resize-label": "true"
+        },
+        children: /* @__PURE__ */jsx(Text, {
+          fontSize: "$1",
+          color: "$color",
+          children: formatTimeRangeLabel(preview.start, preview.end)
+        })
+      })]
+    }, event.id);
+  };
+  const renderTimeGrid = days => {
     return /* @__PURE__ */jsxs(YStack, {
       flex: 1,
-      children: [/* @__PURE__ */jsx(XStack, {
-        borderBottomWidth: 1,
+      role: "grid",
+      "aria-label": t("Calendar"),
+      tabIndex: 0,
+      "aria-activedescendant": focusCellId,
+      onKeyDown: handleBodyKeyDown,
+      outlineWidth: 0,
+      focusVisibleStyle: {
+        outlineWidth: 2,
+        outlineColor: "$accentBackground",
+        outlineStyle: "solid"
+      },
+      ...{
+        "data-calendar-body": view
+      },
+      children: [/* @__PURE__ */jsxs(XStack, {
+        ...hairline.bottom,
         borderColor: "$borderColor",
-        children: weekDays.map(day => /* @__PURE__ */jsxs(YStack, {
+        children: [/* @__PURE__ */jsx(YStack, {
+          width: 56
+        }), days.map(day => /* @__PURE__ */jsxs(YStack, {
           flex: 1,
           padding: "$2",
           alignItems: "center",
@@ -247,107 +1419,250 @@ function Calendar({
             backgroundColor: componentColors.interactive.background
           }),
           children: [/* @__PURE__ */jsx(Text, {
+            ...knobProps.body,
             fontWeight: "500",
             fontSize: "$2",
             color: componentColors.text.muted,
             children: weekdayNames[day.getDay()]
           }), /* @__PURE__ */jsx(Text, {
+            ...knobProps.body,
             fontWeight: isToday(day) ? "700" : "400",
             fontSize: knobProps.sizeToken,
             color: isToday(day) ? "$accentColor" : "$color",
             children: day.getDate()
           })]
-        }, day.toISOString()))
+        }, day.toISOString()))]
+      }), /* @__PURE__ */jsxs(XStack, {
+        ...hairline.bottom,
+        borderColor: "$borderColor",
+        minHeight: 30,
+        children: [/* @__PURE__ */jsx(YStack, {
+          width: 56,
+          justifyContent: "center",
+          alignItems: "flex-end",
+          paddingInlineEnd: "$2",
+          children: /* @__PURE__ */jsx(Text, {
+            fontSize: "$1",
+            color: componentColors.text.muted,
+            children: t("All day")
+          })
+        }), days.map(day => {
+          const dayKey = formatDateKey(day);
+          const dayEvents = (eventsByDate[dayKey] || []).filter(ev => !isTimedEvent(ev));
+          const isDropTarget = dragGhost !== null && dropTargetKey === dayKey;
+          return /* @__PURE__ */jsx(YStack, {
+            flex: 1,
+            ...hairlineEnd,
+            borderColor: "$borderColor",
+            padding: "$1",
+            gap: "$1",
+            backgroundColor: isDropTarget ? "$accentBackground" : void 0,
+            ...{
+              "data-calendar-day": dayKey
+            },
+            ref: nativeDragEnabled ? node => registerDayRef(`allday:${dayKey}`, node) : void 0,
+            onPress: () => {
+              if (suppressClickRef.current) return;
+              onDateSelect?.(day);
+            },
+            children: dayEvents.map(event => renderEventBadge(event, true))
+          }, day.toISOString());
+        })]
       }), /* @__PURE__ */jsx(ScrollView, {
+        ref: timeGridScrollRef,
         flex: 1,
-        children: /* @__PURE__ */jsx(XStack, {
-          flex: 1,
-          minHeight: 400,
-          children: weekDays.map(day => {
-            const dayEvents = eventsByDate[formatDateKey(day)] || [];
-            return /* @__PURE__ */jsx(YStack, {
+        scrollEnabled: !scrollLocked,
+        children: /* @__PURE__ */jsxs(XStack, {
+          children: [/* @__PURE__ */jsx(YStack, {
+            width: 56,
+            children: hours.map(hour => /* @__PURE__ */jsx(YStack, {
+              height: hourHeight,
+              alignItems: "flex-end",
+              paddingInlineEnd: "$2",
+              children: /* @__PURE__ */jsx(Text, {
+                fontSize: "$1",
+                color: componentColors.text.muted,
+                children: formatHour(hour)
+              })
+            }, hour))
+          }), days.map(day => {
+            const dayKey = formatDateKey(day);
+            const dayEvents = (eventsByDate[dayKey] || []).filter(isTimedEvent);
+            const blocks = layoutDayBlocks(dayEvents.map(ev => ({
+              id: ev.id,
+              startMin: minutesOfDay(ev.start),
+              endMin: Math.min(MINUTES_PER_DAY, Math.max(minutesOfDay(ev.start) + slotMinutes, minutesOfDay(ev.start) + ((ev.end?.getTime() ?? ev.start.getTime()) - ev.start.getTime()) / 6e4))
+            })));
+            const byId = new Map(dayEvents.map(ev => [ev.id, ev]));
+            const isSlotTargetDay = slotTarget?.dayKey === dayKey;
+            const draftHere = createDraft?.dayKey === dayKey ? createDraft : null;
+            const editorHere = editorState?.dayKey === dayKey ? editorState : null;
+            const focusHere = view !== "month" && focusedDayKey === dayKey;
+            return /* @__PURE__ */jsxs(YStack, {
               flex: 1,
-              borderRightWidth: 1,
+              height: gridHeight,
+              position: "relative",
+              ...hairlineEnd,
               borderColor: "$borderColor",
-              padding: "$1",
-              onPress: () => onDateSelect?.(day),
-              cursor: "pointer",
-              hoverStyle: {
-                backgroundColor: componentColors.surface.background
+              ...{
+                "data-calendar-timecol": dayKey
               },
-              children: /* @__PURE__ */jsx(YStack, {
-                gap: "$1",
-                children: dayEvents.map(event => renderEventBadge(event, true))
-              })
+              ref: nativeDragEnabled ? node => registerDayRef(dayKey, node) : void 0,
+              onPointerDown: hasDom ? e => handleGridPointerDown(day, e) : void 0,
+              children: [hours.map(hour => /* @__PURE__ */jsx(YStack, {
+                height: hourHeight,
+                ...hairline.bottom,
+                borderColor: componentColors.divider,
+                pointerEvents: "none"
+              }, hour)), blocks.map(block => {
+                const event = byId.get(block.id);
+                if (!event) return null;
+                return renderTimedBlock(event, block);
+              }), isSlotTargetDay && slotTarget && /* @__PURE__ */jsx(YStack, {
+                position: "absolute",
+                ...overlayInset,
+                top: minutesToY(slotTarget.startMin, hourHeight),
+                height: Math.max(MIN_BLOCK_PX, minutesToY(slotTarget.durationMin, hourHeight)),
+                backgroundColor: "$accentBackground",
+                opacity: 0.25,
+                ...knobProps.borderRadius,
+                borderWidth: 1,
+                borderColor: "$accentColor",
+                pointerEvents: "none",
+                zIndex: 1,
+                ...{
+                  "data-calendar-slot-target": "true"
+                }
+              }), draftHere && !editorHere && /* @__PURE__ */jsx(YStack, {
+                position: "absolute",
+                ...overlayInset,
+                top: minutesToY(minutesOfDay(draftHere.start), hourHeight),
+                height: Math.max(MIN_BLOCK_PX, minutesToY((draftHere.end.getTime() - draftHere.start.getTime()) / 6e4, hourHeight)),
+                backgroundColor: "$accentBackground",
+                opacity: 0.45,
+                ...knobProps.borderRadius,
+                borderWidth: 1,
+                borderColor: "$accentColor",
+                pointerEvents: "none",
+                zIndex: 4,
+                transition: webLayoutTransition,
+                ...{
+                  "data-calendar-create-draft": "true"
+                },
+                children: /* @__PURE__ */jsx(Text, {
+                  fontSize: "$1",
+                  color: "$accentColor",
+                  padding: "$1",
+                  numberOfLines: 1,
+                  children: formatTimeRangeLabel(draftHere.start, draftHere.end)
+                })
+              }), editorHere && /* @__PURE__ */jsx(YStack, {
+                position: "absolute",
+                ...overlayInset,
+                top: minutesToY(minutesOfDay(editorHere.start), hourHeight),
+                height: Math.max(MIN_BLOCK_PX + 6, minutesToY((editorHere.end.getTime() - editorHere.start.getTime()) / 6e4, hourHeight)),
+                zIndex: 5,
+                children: /* @__PURE__ */jsx(FloatingPanel, {
+                  open: true,
+                  onOpenChange: open => {
+                    if (!open) commitEditor();
+                  },
+                  fitContent: true,
+                  trigger: /* @__PURE__ */jsx(YStack, {
+                    ...knobProps.borderRadius,
+                    height: "100%",
+                    backgroundColor: "$accentBackground",
+                    opacity: 0.9,
+                    borderWidth: 1,
+                    borderColor: "$accentColor",
+                    padding: "$1",
+                    overflow: "hidden",
+                    ...{
+                      "data-calendar-editor-block": "true"
+                    },
+                    children: /* @__PURE__ */jsx(Text, {
+                      fontSize: "$1",
+                      fontWeight: "600",
+                      color: "$accentColor",
+                      numberOfLines: 1,
+                      children: draftTitle || t("New event")
+                    })
+                  }),
+                  children: /* @__PURE__ */jsxs(YStack, {
+                    gap: "$2",
+                    minWidth: 240,
+                    ...{
+                      "data-calendar-create-editor": "true"
+                    },
+                    children: [/* @__PURE__ */jsx(Input, {
+                      label: t("Title"),
+                      placeholder: t("New event"),
+                      value: draftTitle,
+                      onChangeText: setDraftTitle,
+                      inputProps: {
+                        autoFocus: true
+                      }
+                    }), /* @__PURE__ */jsx(Text, {
+                      fontSize: "$2",
+                      color: componentColors.text.muted,
+                      children: `${formatDayLong(editorHere.start)}, ${formatTimeRangeLabel(editorHere.start, editorHere.end)}`
+                    }), /* @__PURE__ */jsx(Text, {
+                      fontSize: "$1",
+                      color: componentColors.text.muted,
+                      children: t("Changes apply when the editor closes")
+                    })]
+                  })
+                })
+              }), focusHere && /* @__PURE__ */jsx(YStack, {
+                id: `${calendarId}-slot-cursor`,
+                ...{
+                  role: "gridcell"
+                },
+                "aria-label": `${formatDayLong(day)}, ${formatTimeRangeLabel(dateAtMinutes(day, focusedSlotMin), dateAtMinutes(day, focusedSlotMin + slotMinutes))}`,
+                position: "absolute",
+                ...overlayInset,
+                top: minutesToY(focusedSlotMin, hourHeight),
+                height: minutesToY(slotMinutes, hourHeight),
+                ...knobProps.borderRadius,
+                borderWidth: 2,
+                borderColor: "$accentBackground",
+                pointerEvents: "none",
+                zIndex: 3,
+                transition: webLayoutTransition,
+                ...{
+                  "data-calendar-slot-cursor": "true"
+                }
+              }), isToday(day) && /* @__PURE__ */jsx(NowIndicator, {
+                hourHeight
+              })]
             }, day.toISOString());
-          })
+          })]
         })
       })]
     });
   };
-  const renderDayView = () => {
-    const hours = getHours();
-    const dayEvents = eventsByDate[formatDateKey(currentDate)] || [];
-    return /* @__PURE__ */jsx(ScrollView, {
-      flex: 1,
-      children: /* @__PURE__ */jsxs(YStack, {
-        children: [dayEvents.length > 0 && /* @__PURE__ */jsxs(YStack, {
-          padding: "$2",
-          borderBottomWidth: 1,
-          borderColor: "$borderColor",
-          ...{
-            backgroundColor: componentColors.surface.background
-          },
-          children: [/* @__PURE__ */jsx(Text, {
-            fontSize: "$2",
-            color: componentColors.text.muted,
-            marginBottom: "$2",
-            children: "Events"
-          }), /* @__PURE__ */jsx(YStack, {
-            gap: "$1",
-            children: dayEvents.map(event => renderEventBadge(event, false))
-          })]
-        }), hours.map(hour => /* @__PURE__ */jsxs(XStack, {
-          minHeight: 60,
-          borderBottomWidth: 1,
-          borderColor: "$borderColor",
-          onPress: () => {
-            const date = new Date(currentDate);
-            date.setHours(hour, 0, 0, 0);
-            onDateSelect?.(date);
-          },
-          hoverStyle: {
-            backgroundColor: componentColors.surface.background
-          },
-          cursor: "pointer",
-          children: [/* @__PURE__ */jsx(YStack, {
-            width: 60,
-            paddingRight: "$2",
-            alignItems: "flex-end",
-            paddingTop: "$1",
-            children: /* @__PURE__ */jsx(Text, {
-              fontSize: "$2",
-              color: componentColors.text.muted,
-              children: formatHour(hour)
-            })
-          }), /* @__PURE__ */jsx(YStack, {
-            flex: 1,
-            borderLeftWidth: 1,
-            borderColor: "$borderColor",
-            padding: "$2"
-          })]
-        }, hour))]
-      })
-    });
-  };
+  const renderWeekView = () => renderTimeGrid(getWeekDays(currentDate, firstDayOfWeek));
+  const renderDayView = () => renderTimeGrid([currentDate]);
+  const physicalDir = navDirectionRef.current * (isRTL ? -1 : 1);
+  const bodyEnterVariant = !transition ? void 0 : physicalDir > 0 ? "fromEnd" : physicalDir < 0 ? "fromStart" : "fade";
+  const bodyExitVariant = !transition ? void 0 : physicalDir > 0 ? "fromStart" : physicalDir < 0 ? "fromEnd" : "fade";
   return /* @__PURE__ */jsxs(YStack, {
     height,
+    position: "relative",
+    overflow: "hidden",
+    backgroundColor: "$background",
+    elevation: knobProps.elevation,
+    ref: nativeDragEnabled ? node => {
+      containerNodeRef.current = node;
+      refreshContainerOffset();
+    } : void 0,
+    onLayout: nativeDragEnabled ? refreshContainerOffset : void 0,
     ...stackProps,
     children: [(showNavigation || showViewSwitcher) && /* @__PURE__ */jsxs(XStack, {
       ...knobProps.panelPadding,
       alignItems: "center",
       justifyContent: "space-between",
-      borderBottomWidth: 1,
+      ...hairline.bottom,
       borderColor: "$borderColor",
       children: [showNavigation && /* @__PURE__ */jsxs(XStack, {
         gap: "$2",
@@ -355,60 +1670,123 @@ function Calendar({
         children: [/* @__PURE__ */jsx(Button, {
           size: knobProps.sizeToken,
           onPress: goToPrevious,
-          "aria-label": "Previous",
+          "aria-label": t("Previous"),
           children: "<"
         }), /* @__PURE__ */jsx(Button, {
           size: knobProps.sizeToken,
           onPress: goToToday,
-          children: "Today"
+          children: t("Today")
         }), /* @__PURE__ */jsx(Button, {
           size: knobProps.sizeToken,
           onPress: goToNext,
-          "aria-label": "Next",
+          "aria-label": t("Next"),
           children: ">"
         })]
       }), /* @__PURE__ */jsx(Text, {
         ...knobProps.heading,
-        fontSize: knobProps.sizeToken,
+        ...sectionHeading,
         children: displayTitle
-      }), showViewSwitcher && /* @__PURE__ */jsxs(ToggleGroup, {
-        type: "single",
-        orientation: "horizontal",
-        flexDirection: "row",
-        value: view,
-        onValueChange: val => {
-          if (val) setView(val);
-        },
-        ...knobProps.borderRadius,
-        ...knobProps.inputSurface,
-        children: [/* @__PURE__ */jsx(ToggleGroup.Item, {
-          value: "month",
-          size: knobProps.sizeToken,
-          children: /* @__PURE__ */jsx(Text, {
-            fontSize: knobProps.sizeToken,
-            children: "Month"
-          })
-        }), /* @__PURE__ */jsx(ToggleGroup.Item, {
-          value: "week",
-          size: knobProps.sizeToken,
-          children: /* @__PURE__ */jsx(Text, {
-            fontSize: knobProps.sizeToken,
-            children: "Week"
-          })
-        }), /* @__PURE__ */jsx(ToggleGroup.Item, {
-          value: "day",
-          size: knobProps.sizeToken,
-          children: /* @__PURE__ */jsx(Text, {
-            fontSize: knobProps.sizeToken,
-            children: "Day"
-          })
-        })]
+      }), showViewSwitcher &&
+      /* Canonical fused view picker (LC-16 ONE-IMPLEMENTATION): brings
+      the 44px press-target floor + hitSlop (SP-FIXED) and the
+      keyboard focus ring the hand-rolled ToggleGroup lacked. */
+      /* @__PURE__ */
+      jsx(ViewSwitcher, {
+        views: [{
+          type: "month",
+          label: t("Month")
+        }, {
+          type: "week",
+          label: t("Week")
+        }, {
+          type: "day",
+          label: t("Day")
+        }],
+        currentView: view,
+        onViewChange: val => changeView(val)
       })]
-    }), /* @__PURE__ */jsxs(YStack, {
+    }), /* @__PURE__ */jsx(YStack, {
+      position: "absolute",
+      width: 1,
+      height: 1,
+      overflow: "hidden",
+      opacity: 0,
+      pointerEvents: "none",
+      "aria-live": "polite",
+      ...{
+        "data-calendar-live": "true"
+      },
+      children: /* @__PURE__ */jsx(Text, {
+        children: announcement
+      })
+    }), /* @__PURE__ */jsx(YStack, {
       flex: 1,
-      children: [view === "month" && renderMonthView(), view === "week" && renderWeekView(), view === "day" && renderDayView()]
-    })]
+      overflow: "hidden",
+      position: "relative",
+      children: /* @__PURE__ */jsx(AnimatePresence, {
+        initial: false,
+        enterVariant: bodyEnterVariant,
+        exitVariant: bodyExitVariant,
+        children: /* @__PURE__ */jsxs(CalendarSlide, {
+          fullscreen: true,
+          x: 0,
+          opacity: 1,
+          transition,
+          ...{
+            "data-calendar-motion": motionKey
+          },
+          children: [view === "month" && renderMonthView(), view === "week" && renderWeekView(), view === "day" && renderDayView()]
+        }, motionKey)
+      })
+    }), dragGhost && /* @__PURE__ */jsx(YStack, {
+      pointerEvents: "none",
+      ...knobProps.borderRadius,
+      backgroundColor: dragGhost.event.color || "$accentBackground",
+      padding: "$1",
+      opacity: 0.95,
+      scale: 1.03,
+      ...{
+        "data-calendar-drag-ghost": true,
+        ...(isWeb ? {
+          style: {
+            position: "fixed",
+            left: dragGhost.x + 12,
+            top: dragGhost.y + 12,
+            // Sheet tier (Axiom 14): the ghost tracks the pointer
+            // above page content and sticky chrome.
+            zIndex: zIndex.sheet,
+            maxWidth: 220,
+            boxShadow: LIFT_SHADOW
+          }
+        } : {
+          position: "absolute",
+          left: dragGhost.x,
+          top: dragGhost.y,
+          zIndex: zIndex.sheet,
+          maxWidth: 220,
+          shadowColor: "$shadowColor",
+          shadowOffset: {
+            width: 0,
+            height: 6
+          },
+          shadowRadius: 12,
+          shadowOpacity: 0.3,
+          elevation: 8
+        })
+      },
+      children: /* @__PURE__ */jsx(Text, {
+        fontSize: "$2",
+        numberOfLines: 1,
+        color: eventChipTextColor(dragGhost.event.color),
+        children: dragGhost.event.title
+      })
+    }), settle && isWeb && /* @__PURE__ */jsx(SettleGhost, {
+      settle,
+      transition,
+      borderRadius: knobProps.borderRadius,
+      onDone: clearSettle
+    }, settle.key)]
   });
 }
-export { Calendar };
+export { Calendar, computeEventMoveRange, eventChipTextColor, findDayKeyAtPoint };
 //# sourceMappingURL=Calendar.mjs.map