@multiplatform.one/components 6.1.0 → 6.4.0

package/dist/esm/views/Calendar.native.js

@@ -1,9 +1,46 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { componentColors } from "../componentColors.native.js";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import React, { useState, useMemo, useCallback } from "react";
-import { Button } from "@multiplatform.one/forms";
-import { ScrollView, Text, ToggleGroup, XStack, YStack } from "tamagui";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { componentColors, sectionHeading } from "../componentColors.native.js";
+import { ViewSwitcher } from "../layouts/ViewSwitcher.native.js";
+import { withInterp } from "../shared/t.native.js";
+import { MINUTES_PER_DAY, computeResizeRange, createRangeFromDrag, eventAccessibleLabel, formatTimeRangeLabel, layoutDayBlocks, minutesOfDay, minutesToY, moveFocusDate, moveFocusSlot, moveRangeToSlot, snapMinutes, yToMinutes } from "./calendarMath.native.js";
+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.native.js";
+var hairlineEnd = isWeb ? {
+  borderInlineEndWidth: hairlineWidth,
+  borderInlineEndStyle: "solid",
+  className: "mp-hairline-ie"
+} : {
+  borderEndWidth: hairlineWidth
+};
+function gridCellEdges(end, bottom) {
+  var 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";
+  var hex = bg.slice(1);
+  var full = hex.length === 3 ? hex.split("").map(function (c) {
+    return c + c;
+  }).join("") : hex.slice(0, 6);
+  var [r, g, b] = [0, 2, 4].map(function (i) {
+    var c = Number.parseInt(full.slice(i, i + 2), 16) / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  });
+  var luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  var contrastWhite = 1.05 / (luminance + 0.05);
+  var contrastBlack = (luminance + 0.05) / 0.05;
+  return contrastWhite >= contrastBlack ? "#ffffff" : "#000000";
+}
 function getMonthDays(date, firstDayOfWeek) {
   var year = date.getFullYear();
   var month = date.getMonth();
@@ -35,7 +72,18 @@ function getWeekDays(date, firstDayOfWeek) {
   return days;
 }
 function formatDateKey(date) {
-  return date.toISOString().split("T")[0];
+  var year = date.getFullYear();
+  var month = String(date.getMonth() + 1).padStart(2, "0");
+  var day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+function addMonths(date, delta) {
+  var next = new Date(date);
+  next.setDate(1);
+  next.setMonth(next.getMonth() + delta);
+  var 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 +91,112 @@ function isSameDay(d1, d2) {
 function isToday(date) {
   return isSameDay(date, /* @__PURE__ */new Date());
 }
+var MS_PER_DAY = 864e5;
+function computeEventMoveRange(event, targetDay) {
+  var startOfDay = function startOfDay2(d) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+  };
+  var dayDelta = Math.round((startOfDay(targetDay).getTime() - startOfDay(event.start).getTime()) / MS_PER_DAY);
+  var shiftDays = function shiftDays2(d) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate() + dayDelta, d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds());
+  };
+  var start = shiftDays(event.start);
+  var end = event.end ? shiftDays(event.end) : new Date(start.getTime());
+  return {
+    start,
+    end
+  };
+}
+function findDayKeyAtPoint(pageX, pageY, layouts) {
+  var _iteratorNormalCompletion = true,
+    _didIteratorError = false,
+    _iteratorError = void 0;
+  try {
+    for (var _iterator = layouts[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var layout = _step.value;
+      if (pageX >= layout.x && pageX < layout.x + layout.width && pageY >= layout.y && pageY < layout.y + layout.height) {
+        return layout.key;
+      }
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+  return null;
+}
+function measureDayLayouts(refs, cb) {
+  var entries = [...refs.entries()];
+  if (entries.length === 0) {
+    cb([]);
+    return;
+  }
+  var layouts = [];
+  var remaining = entries.length;
+  var _iteratorNormalCompletion = true,
+    _didIteratorError = false,
+    _iteratorError = void 0;
+  try {
+    var _loop = function () {
+      var [key, node] = _step.value;
+      if (typeof node.measureInWindow !== "function") {
+        if (--remaining === 0) cb(layouts);
+        return "continue";
+      }
+      node.measureInWindow(function (x, y, width, height) {
+        layouts.push({
+          key,
+          x,
+          y,
+          width,
+          height
+        });
+        if (--remaining === 0) cb(layouts);
+      });
+    };
+    for (var _iterator = entries[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) _loop();
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+}
+function dayKeyToDate(key) {
+  var [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;
+}
+var DRAG_THRESHOLD_PX = 4;
+var TOUCH_LONG_PRESS_MS = 300;
+var TOUCH_SLOP_PX = 8;
+var LIFT_SHADOW = "0px 8px 28px rgba(0,0,0,0.18), 0px 2px 6px rgba(0,0,0,0.08)";
+var MIN_BLOCK_PX = 18;
+var RESIZE_ZONE_PX = 44;
+var DAY_DISC_PX = 22;
+var MONTH_CHIP_MIN_PX = 24;
 function getWeekdayNames() {
   var formatter = new Intl.DateTimeFormat(void 0, {
     weekday: "short"
@@ -77,27 +231,762 @@ function formatHour(hour) {
     hour12: true
   }).format(date);
 }
+function formatDayLong(date) {
+  return new Intl.DateTimeFormat(void 0, {
+    weekday: "long",
+    month: "long",
+    day: "numeric"
+  }).format(date);
+}
 var weekdayNames = getWeekdayNames();
 var monthNames = getMonthNames();
+var hours = getHours();
+function startWebPointerSession(options) {
+  var _options_thresholdPx;
+  var threshold = (_options_thresholdPx = options.thresholdPx) !== null && _options_thresholdPx !== void 0 ? _options_thresholdPx : DRAG_THRESHOLD_PX;
+  var isTouch = options.pointerType === "touch";
+  var active = false;
+  var ended = false;
+  var escaped = false;
+  var liftArmed = !isTouch;
+  var last = {
+    x: options.startX,
+    y: options.startY
+  };
+  var prevUserSelect = "";
+  var longPressTimer = null;
+  var preventTouchScroll = function preventTouchScroll2(te) {
+    if (active) te.preventDefault();
+  };
+  var activate = function activate2(pt) {
+    if (active) return;
+    active = true;
+    prevUserSelect = document.body.style.userSelect;
+    document.body.style.userSelect = "none";
+    options.onActivate(pt);
+  };
+  var teardown = function teardown2() {
+    var _options_onSettled;
+    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 = options.onSettled) === null || _options_onSettled === void 0 ? void 0 : _options_onSettled.call(options, active, escaped);
+  };
+  var onMove = function onMove2(me) {
+    last = {
+      x: me.clientX,
+      y: me.clientY
+    };
+    if (!active) {
+      var 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);
+  };
+  var onUp = function onUp2(ue) {
+    var _options_onTapInstead;
+    last = {
+      x: ue.clientX,
+      y: ue.clientY
+    };
+    var wasActive = active;
+    teardown();
+    if (wasActive) options.onCommit(last);else (_options_onTapInstead = options.onTapInstead) === null || _options_onTapInstead === void 0 ? void 0 : _options_onTapInstead.call(options);
+  };
+  var onKey = function onKey2(ke) {
+    if (ke.key !== "Escape" || !active) return;
+    ke.stopPropagation();
+    escaped = true;
+    var cancel = options.onCancel;
+    teardown();
+    cancel();
+  };
+  if (isTouch) {
+    longPressTimer = setTimeout(function () {
+      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(param) {
+  var {
+    hourHeight
+  } = param;
+  var [now, setNow] = useState(function () {
+    return /* @__PURE__ */new Date();
+  });
+  var isRTL = useDirection() === "rtl";
+  useEffect(function () {
+    var id = setInterval(function () {
+      return setNow(/* @__PURE__ */new Date());
+    }, 6e4);
+    return function () {
+      return clearInterval(id);
+    };
+  }, []);
+  var 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(param) {
+  var {
+    settle,
+    transition,
+    borderRadius,
+    onDone
+  } = param;
+  var [moved, setMoved] = useState(false);
+  useEffect(function () {
+    var raf2 = 0;
+    var raf1 = requestAnimationFrame(function () {
+      raf2 = requestAnimationFrame(function () {
+        return setMoved(true);
+      });
+    });
+    var timer = setTimeout(onDone, 480);
+    return function () {
+      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
+    })
+  });
+}
+var CalendarSlide = styled(YStack, {
+  variants: {
+    fromStart: {
+      true: {
+        x: -24,
+        opacity: 0
+      }
+    },
+    fromEnd: {
+      true: {
+        x: 24,
+        opacity: 0
+      }
+    },
+    fade: {
+      true: {
+        opacity: 0
+      }
+    }
+  }
+});
 function Calendar(param) {
   var {
     events,
     renderEvent,
     onDateSelect,
     onEventClick,
+    onEventMove,
+    onEventResize,
+    onEventCreate,
+    enableEventDrag,
     viewType: initialViewType = "month",
     initialDate,
     height = 600,
     showNavigation = true,
     showViewSwitcher = true,
     firstDayOfWeek = 0,
+    slotMinutes = 30,
     ...stackProps
   } = param;
+  var {
+    t
+  } = useTranslation();
   var {
     knobProps
   } = useResolvedKnobs();
+  var onAccent = useReadableTextOn("$accentBackground");
+  var calendarId = useId();
+  var isRTL = useDirection() === "rtl";
   var [currentDate, setCurrentDate] = useState(initialDate !== null && initialDate !== void 0 ? initialDate : /* @__PURE__ */new Date());
   var [view, setView] = useState(initialViewType);
+  var sz = knobProps.sizeToken;
+  var hourHeight = sz === "$3" ? 48 : sz === "$5" ? 80 : 64;
+  var monthCellMinHeight = sz === "$3" ? 64 : sz === "$5" ? 96 : 76;
+  var space = knobProps.space;
+  var cellPad = space === "small" ? 2 : space === "large" ? 7 : 4;
+  var chipGap = space === "small" ? 2 : space === "large" ? 5 : 3;
+  var monthRowHardFloor = cellPad * 2 + DAY_DISC_PX + chipGap + MONTH_CHIP_MIN_PX;
+  var [monthBodyHeight, setMonthBodyHeight] = useState(0);
+  var overlayInset = isRTL ? {
+    left: 2,
+    right: 0
+  } : {
+    left: 0,
+    right: 2
+  };
+  var transition = knobProps.transition;
+  var webLayoutTransition = isWeb ? transition : void 0;
+  var navDirectionRef = useRef(0);
+  var hasNavigatedRef = useRef(false);
+  var periodKey = view === "month" ? `${currentDate.getFullYear()}-${currentDate.getMonth()}` : view === "week" ? formatDateKey(getWeekDays(currentDate, firstDayOfWeek)[0]) : formatDateKey(currentDate);
+  var motionKey = `${view}:${periodKey}`;
+  var dragEnabled = enableEventDrag !== null && enableEventDrag !== void 0 ? enableEventDrag : onEventMove !== void 0;
+  var hasDom = isWeb && typeof window !== "undefined" && typeof document !== "undefined";
+  var webDragEnabled = dragEnabled && hasDom;
+  var nativeDragEnabled = dragEnabled && !isWeb;
+  var webResizeEnabled = onEventResize !== void 0 && hasDom;
+  var webCreateEnabled = onEventCreate !== void 0 && hasDom;
+  var [dragGhost, setDragGhost] = useState(null);
+  var [dropTargetKey, setDropTargetKey] = useState(null);
+  var [slotTarget, setSlotTarget] = useState(null);
+  var [settle, setSettle] = useState(null);
+  var [resizePreview, setResizePreview] = useState(null);
+  var [createDraft, setCreateDraft] = useState(null);
+  var [editorState, setEditorState] = useState(null);
+  var [draftTitle, setDraftTitle] = useState("");
+  var [overflowDayKey, setOverflowDayKey] = useState(null);
+  var [scrollLocked, setScrollLocked] = useState(false);
+  var [draggingEventId, setDraggingEventId] = useState(null);
+  var suppressClickRef = useRef(false);
+  var dragSessionCleanupRef = useRef(null);
+  var slotTargetRef = useRef(null);
+  var resizePreviewRef = useRef(null);
+  var editorStateRef = useRef(null);
+  var draftTitleRef = useRef("");
+  var dayRefs = useRef(/* @__PURE__ */new Map());
+  var containerNodeRef = useRef(null);
+  var containerOffsetRef = useRef({
+    x: 0,
+    y: 0
+  });
+  var nativeSessionRef = useRef(null);
+  slotTargetRef.current = slotTarget;
+  resizePreviewRef.current = resizePreview;
+  editorStateRef.current = editorState;
+  draftTitleRef.current = draftTitle;
+  var registerDayRef = useCallback(function (key, node) {
+    if (node) dayRefs.current.set(key, node);else dayRefs.current.delete(key);
+  }, []);
+  var refreshContainerOffset = useCallback(function () {
+    var _containerNodeRef_current_measureInWindow, _containerNodeRef_current;
+    (_containerNodeRef_current = containerNodeRef.current) === null || _containerNodeRef_current === void 0 ? void 0 : (_containerNodeRef_current_measureInWindow = _containerNodeRef_current.measureInWindow) === null || _containerNodeRef_current_measureInWindow === void 0 ? void 0 : _containerNodeRef_current_measureInWindow.call(_containerNodeRef_current, function (x, y) {
+      containerOffsetRef.current = {
+        x,
+        y
+      };
+    });
+  }, []);
+  useEffect(function () {
+    return function () {
+      var _dragSessionCleanupRef_current;
+      return (_dragSessionCleanupRef_current = dragSessionCleanupRef.current) === null || _dragSessionCleanupRef_current === void 0 ? void 0 : _dragSessionCleanupRef_current.call(dragSessionCleanupRef);
+    };
+  }, []);
+  var clearSettle = useCallback(function () {
+    return setSettle(null);
+  }, []);
+  var suppressNextClick = useCallback(function () {
+    suppressClickRef.current = true;
+    setTimeout(function () {
+      suppressClickRef.current = false;
+    }, 0);
+  }, []);
+  var beginSettle = useCallback(function (event, from, to) {
+    if (!transition || !hasDom) return;
+    setSettle({
+      key: Date.now(),
+      title: event.title,
+      color: event.color,
+      from,
+      to
+    });
+  }, [transition, hasDom]);
+  var commitMoveToKey = useCallback(function (event, key) {
+    if (!key) return;
+    var targetDay = dayKeyToDate(key);
+    if (!isSameDay(targetDay, event.start)) {
+      onEventMove === null || onEventMove === void 0 ? void 0 : onEventMove(event, computeEventMoveRange(event, targetDay));
+    }
+  }, [onEventMove]);
+  var handleEventPointerDown = useCallback(function (event, e, mode) {
+    var _ref;
+    var _e_stopPropagation, _dragSessionCleanupRef_current, _chipEl_getBoundingClientRect;
+    if (!webDragEnabled) return;
+    if (e.button !== void 0 && e.button !== 0) return;
+    (_e_stopPropagation = e.stopPropagation) === null || _e_stopPropagation === void 0 ? void 0 : _e_stopPropagation.call(e);
+    (_dragSessionCleanupRef_current = dragSessionCleanupRef.current) === null || _dragSessionCleanupRef_current === void 0 ? void 0 : _dragSessionCleanupRef_current.call(dragSessionCleanupRef);
+    var chipEl = e.currentTarget;
+    var originRect = (_ref = chipEl === null || chipEl === void 0 ? void 0 : (_chipEl_getBoundingClientRect = chipEl.getBoundingClientRect) === null || _chipEl_getBoundingClientRect === void 0 ? void 0 : _chipEl_getBoundingClientRect.call(chipEl)) !== null && _ref !== void 0 ? _ref : null;
+    var durationMin = event.end ? Math.max(slotMinutes, (event.end.getTime() - event.start.getTime()) / 6e4) : slotMinutes;
+    var grabOffsetMin = mode === "slot" && originRect ? yToMinutes(e.clientY - originRect.top, hourHeight) : 0;
+    var findDayKey = function findDayKey2(x, y) {
+      var _ref2;
+      var _document_elementFromPoint, _document, _el_closest;
+      var el = (_document_elementFromPoint = (_document = document).elementFromPoint) === null || _document_elementFromPoint === void 0 ? void 0 : _document_elementFromPoint.call(_document, x, y);
+      var dayEl = el === null || el === void 0 ? void 0 : (_el_closest = el.closest) === null || _el_closest === void 0 ? void 0 : _el_closest.call(el, "[data-calendar-day]");
+      return (_ref2 = dayEl === null || dayEl === void 0 ? void 0 : dayEl.getAttribute("data-calendar-day")) !== null && _ref2 !== void 0 ? _ref2 : null;
+    };
+    var findSlotTarget = function findSlotTarget2(x, y) {
+      var _document_elementFromPoint, _document, _el_closest;
+      var el = (_document_elementFromPoint = (_document = document).elementFromPoint) === null || _document_elementFromPoint === void 0 ? void 0 : _document_elementFromPoint.call(_document, x, y);
+      var colEl = el === null || el === void 0 ? void 0 : (_el_closest = el.closest) === null || _el_closest === void 0 ? void 0 : _el_closest.call(el, "[data-calendar-timecol]");
+      if (!colEl) return null;
+      var dayKey = colEl.getAttribute("data-calendar-timecol");
+      if (!dayKey) return null;
+      var rect = colEl.getBoundingClientRect();
+      var raw = yToMinutes(y - rect.top, hourHeight) - grabOffsetMin;
+      var startMin = Math.max(0, Math.min(MINUTES_PER_DAY - durationMin, snapMinutes(raw, slotMinutes, "round")));
+      return {
+        dayKey,
+        startMin,
+        durationMin,
+        rect
+      };
+    };
+    var endVisuals = function endVisuals2() {
+      setDragGhost(null);
+      setDropTargetKey(null);
+      setSlotTarget(null);
+      setDraggingEventId(null);
+      setScrollLocked(false);
+      dragSessionCleanupRef.current = null;
+    };
+    var lastPoint = {
+      x: e.clientX,
+      y: e.clientY
+    };
+    var cleanup = startWebPointerSession({
+      pointerType: e.pointerType,
+      startX: e.clientX,
+      startY: e.clientY,
+      onActivate: function onActivate(pt) {
+        lastPoint = pt;
+        setDraggingEventId(event.id);
+        setScrollLocked(true);
+        setDragGhost({
+          event,
+          x: pt.x,
+          y: pt.y
+        });
+      },
+      onMove: function onMove(pt) {
+        lastPoint = pt;
+        setDragGhost({
+          event,
+          x: pt.x,
+          y: pt.y
+        });
+        if (mode === "slot") {
+          var 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: function onCommit(pt) {
+        endVisuals();
+        suppressNextClick();
+        var ghostFrom = {
+          x: pt.x + 12,
+          y: pt.y + 12
+        };
+        if (mode === "slot") {
+          var target = findSlotTarget(pt.x, pt.y);
+          if (target) {
+            var targetDay = dayKeyToDate(target.dayKey);
+            var range = moveRangeToSlot(event, targetDay, target.startMin);
+            if (range.start.getTime() !== event.start.getTime()) {
+              onEventMove === null || onEventMove === void 0 ? void 0 : onEventMove(event, range);
+            }
+            beginSettle(event, ghostFrom, {
+              x: target.rect.left + 2,
+              y: target.rect.top + minutesToY(target.startMin, hourHeight)
+            });
+            return;
+          }
+        }
+        var dayKey = findDayKey(pt.x, pt.y);
+        if (dayKey) {
+          var _cellEl_getBoundingClientRect;
+          commitMoveToKey(event, dayKey);
+          var cellEl = document.querySelector(`[data-calendar-day="${dayKey}"]`);
+          var rect = cellEl === null || cellEl === void 0 ? void 0 : (_cellEl_getBoundingClientRect = cellEl.getBoundingClientRect) === null || _cellEl_getBoundingClientRect === void 0 ? void 0 : _cellEl_getBoundingClientRect.call(cellEl);
+          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: function onCancel() {
+        var ghost = {
+          x: lastPoint.x + 12,
+          y: lastPoint.y + 12
+        };
+        endVisuals();
+        suppressClickRef.current = true;
+        window.addEventListener("pointerup", function () {
+          return setTimeout(function () {
+            suppressClickRef.current = false;
+          }, 0);
+        }, {
+          once: true
+        });
+        if (originRect) {
+          beginSettle(event, ghost, {
+            x: originRect.left,
+            y: originRect.top
+          });
+        }
+      },
+      onSettled: function onSettled(activated) {
+        if (!activated) {
+          endVisuals();
+        }
+      }
+    });
+    dragSessionCleanupRef.current = cleanup;
+  }, [webDragEnabled, slotMinutes, hourHeight, onEventMove, commitMoveToKey, beginSettle, suppressNextClick]);
+  var handleResizePointerDown = useCallback(function (event, edge, e) {
+    var _e_stopPropagation, _dragSessionCleanupRef_current, _handleEl_closest, _colEl_getBoundingClientRect;
+    if (!webResizeEnabled) return;
+    if (e.button !== void 0 && e.button !== 0) return;
+    (_e_stopPropagation = e.stopPropagation) === null || _e_stopPropagation === void 0 ? void 0 : _e_stopPropagation.call(e);
+    (_dragSessionCleanupRef_current = dragSessionCleanupRef.current) === null || _dragSessionCleanupRef_current === void 0 ? void 0 : _dragSessionCleanupRef_current.call(dragSessionCleanupRef);
+    var handleEl = e.currentTarget;
+    var colEl = handleEl === null || handleEl === void 0 ? void 0 : (_handleEl_closest = handleEl.closest) === null || _handleEl_closest === void 0 ? void 0 : _handleEl_closest.call(handleEl, "[data-calendar-timecol]");
+    var colRect = colEl === null || colEl === void 0 ? void 0 : (_colEl_getBoundingClientRect = colEl.getBoundingClientRect) === null || _colEl_getBoundingClientRect === void 0 ? void 0 : _colEl_getBoundingClientRect.call(colEl);
+    if (!colRect) return;
+    var applyPreview = function applyPreview2(pt) {
+      var raw = yToMinutes(pt.y - colRect.top, hourHeight);
+      var range = computeResizeRange(event, edge, raw, slotMinutes);
+      setResizePreview({
+        id: event.id,
+        start: range.start,
+        end: range.end
+      });
+    };
+    var cleanup = startWebPointerSession({
+      pointerType: e.pointerType,
+      startX: e.clientX,
+      startY: e.clientY,
+      thresholdPx: 1,
+      onActivate: function onActivate(pt) {
+        setScrollLocked(true);
+        applyPreview(pt);
+      },
+      onMove: applyPreview,
+      onCommit: function onCommit() {
+        var _event_end;
+        var preview = resizePreviewRef.current;
+        setResizePreview(null);
+        setScrollLocked(false);
+        dragSessionCleanupRef.current = null;
+        suppressNextClick();
+        if (!preview) return;
+        var prevEnd = (_event_end = event.end) !== null && _event_end !== void 0 ? _event_end : event.start;
+        if (preview.start.getTime() !== event.start.getTime() || preview.end.getTime() !== prevEnd.getTime()) {
+          onEventResize === null || onEventResize === void 0 ? void 0 : onEventResize(event, {
+            start: preview.start,
+            end: preview.end
+          });
+        }
+      },
+      onCancel: function onCancel() {
+        setResizePreview(null);
+        setScrollLocked(false);
+        dragSessionCleanupRef.current = null;
+        suppressClickRef.current = true;
+        window.addEventListener("pointerup", function () {
+          return setTimeout(function () {
+            suppressClickRef.current = false;
+          }, 0);
+        }, {
+          once: true
+        });
+      },
+      onSettled: function onSettled(activated) {
+        if (!activated) {
+          setResizePreview(null);
+          setScrollLocked(false);
+          dragSessionCleanupRef.current = null;
+        }
+      }
+    });
+    dragSessionCleanupRef.current = cleanup;
+  }, [webResizeEnabled, hourHeight, slotMinutes, onEventResize, suppressNextClick]);
+  var openEditor = useCallback(function (dayKey, range) {
+    setCreateDraft(null);
+    setDraftTitle("");
+    setEditorState({
+      dayKey,
+      start: range.start,
+      end: range.end
+    });
+  }, []);
+  var commitEditor = useCallback(function () {
+    var state = editorStateRef.current;
+    if (!state) return;
+    setEditorState(null);
+    setCreateDraft(null);
+    setDraftTitle("");
+    onEventCreate === null || onEventCreate === void 0 ? void 0 : onEventCreate({
+      title: draftTitleRef.current.trim() || t("New event"),
+      start: state.start,
+      end: state.end
+    });
+  }, [onEventCreate, t]);
+  var handleGridPointerDown = useCallback(function (day, e) {
+    var _dragSessionCleanupRef_current, _colEl_getBoundingClientRect;
+    if (!hasDom) return;
+    if (e.button !== void 0 && e.button !== 0) return;
+    if (editorStateRef.current) return;
+    (_dragSessionCleanupRef_current = dragSessionCleanupRef.current) === null || _dragSessionCleanupRef_current === void 0 ? void 0 : _dragSessionCleanupRef_current.call(dragSessionCleanupRef);
+    var colEl = e.currentTarget;
+    var colRect = colEl === null || colEl === void 0 ? void 0 : (_colEl_getBoundingClientRect = colEl.getBoundingClientRect) === null || _colEl_getBoundingClientRect === void 0 ? void 0 : _colEl_getBoundingClientRect.call(colEl);
+    if (!colRect) return;
+    var dayKey = formatDateKey(day);
+    var anchorRaw = yToMinutes(e.clientY - colRect.top, hourHeight);
+    var created = false;
+    var lastRange = null;
+    var cleanup = startWebPointerSession({
+      pointerType: e.pointerType,
+      startX: e.clientX,
+      startY: e.clientY,
+      onActivate: function onActivate(pt) {
+        if (!webCreateEnabled) return;
+        created = true;
+        setScrollLocked(true);
+        var raw = yToMinutes(pt.y - colRect.top, hourHeight);
+        var range = createRangeFromDrag(day, anchorRaw, raw, slotMinutes);
+        lastRange = range;
+        setCreateDraft({
+          dayKey,
+          start: range.start,
+          end: range.end
+        });
+      },
+      onMove: function onMove(pt) {
+        if (!webCreateEnabled) return;
+        var raw = yToMinutes(pt.y - colRect.top, hourHeight);
+        var range = createRangeFromDrag(day, anchorRaw, raw, slotMinutes);
+        lastRange = range;
+        setCreateDraft({
+          dayKey,
+          start: range.start,
+          end: range.end
+        });
+      },
+      onCommit: function onCommit() {
+        setScrollLocked(false);
+        dragSessionCleanupRef.current = null;
+        suppressNextClick();
+        if (!created) return;
+        var range = lastRange !== null && lastRange !== void 0 ? lastRange : createRangeFromDrag(day, anchorRaw, anchorRaw, slotMinutes);
+        setTimeout(function () {
+          return openEditor(dayKey, range);
+        }, 0);
+      },
+      onCancel: function onCancel() {
+        setCreateDraft(null);
+        setScrollLocked(false);
+        dragSessionCleanupRef.current = null;
+      },
+      onTapInstead: function onTapInstead() {
+        dragSessionCleanupRef.current = null;
+        if (suppressClickRef.current) return;
+        var startMin = snapMinutes(anchorRaw, slotMinutes, "floor");
+        onDateSelect === null || onDateSelect === void 0 ? void 0 : onDateSelect(dateAtMinutes(day, startMin));
+      },
+      onSettled: function onSettled(activated) {
+        if (!activated) dragSessionCleanupRef.current = null;
+      }
+    });
+    dragSessionCleanupRef.current = cleanup;
+  }, [hasDom, webCreateEnabled, hourHeight, slotMinutes, onDateSelect, openEditor, suppressNextClick]);
+  var endNativeSession = useCallback(function (opts) {
+    var session = nativeSessionRef.current;
+    nativeSessionRef.current = null;
+    setScrollLocked(false);
+    setDragGhost(null);
+    setDropTargetKey(null);
+    setDraggingEventId(null);
+    if (!(session === null || session === void 0 ? void 0 : session.dragging)) return;
+    suppressClickRef.current = true;
+    setTimeout(function () {
+      suppressClickRef.current = false;
+    }, 0);
+    if (!opts.commit || opts.pageX === void 0 || opts.pageY === void 0) return;
+    measureDayLayouts(dayRefs.current, function (layouts) {
+      var _findDayKeyAtPoint;
+      var key = (_findDayKeyAtPoint = findDayKeyAtPoint(opts.pageX, opts.pageY, layouts)) !== null && _findDayKeyAtPoint !== void 0 ? _findDayKeyAtPoint : findDayKeyAtPoint(opts.pageX, opts.pageY, session.layouts);
+      commitMoveToKey(session.event, key);
+    });
+  }, [commitMoveToKey]);
+  var handleNativeGrant = useCallback(function (event, e) {
+    var _ref, _ref1;
+    var _e_nativeEvent, _e_nativeEvent1;
+    if (!nativeDragEnabled) return;
+    var pageX = (_ref = (_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : _e_nativeEvent.pageX) !== null && _ref !== void 0 ? _ref : 0;
+    var pageY = (_ref1 = (_e_nativeEvent1 = e.nativeEvent) === null || _e_nativeEvent1 === void 0 ? void 0 : _e_nativeEvent1.pageY) !== null && _ref1 !== void 0 ? _ref1 : 0;
+    nativeSessionRef.current = {
+      event,
+      startX: pageX,
+      startY: pageY,
+      dragging: false,
+      layouts: []
+    };
+  }, [nativeDragEnabled]);
+  var handleNativeMove = useCallback(function (e) {
+    var _ref, _ref1;
+    var _e_nativeEvent, _e_nativeEvent1;
+    var session = nativeSessionRef.current;
+    if (!session) return;
+    var pageX = (_ref = (_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : _e_nativeEvent.pageX) !== null && _ref !== void 0 ? _ref : 0;
+    var pageY = (_ref1 = (_e_nativeEvent1 = e.nativeEvent) === null || _e_nativeEvent1 === void 0 ? void 0 : _e_nativeEvent1.pageY) !== null && _ref1 !== void 0 ? _ref1 : 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, function (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]);
+  var handleNativeRelease = useCallback(function (e) {
+    var _e_nativeEvent, _e_nativeEvent1;
+    var session = nativeSessionRef.current;
+    if (!session) return;
+    if (!session.dragging) {
+      nativeSessionRef.current = null;
+      onEventClick === null || onEventClick === void 0 ? void 0 : onEventClick(session.event);
+      return;
+    }
+    endNativeSession({
+      commit: true,
+      pageX: (_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : _e_nativeEvent.pageX,
+      pageY: (_e_nativeEvent1 = e.nativeEvent) === null || _e_nativeEvent1 === void 0 ? void 0 : _e_nativeEvent1.pageY
+    });
+  }, [endNativeSession, onEventClick]);
+  var handleNativeTerminate = useCallback(function () {
+    endNativeSession({
+      commit: false
+    });
+  }, [endNativeSession]);
+  var getEventDragProps = useCallback(function (event) {
+    var mode = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "day";
+    var base = {
+      "data-calendar-event": event.id
+    };
+    if (webDragEnabled) {
+      return {
+        ...base,
+        onPointerDown: function onPointerDown(e) {
+          return handleEventPointerDown(event, e, mode);
+        }
+      };
+    }
+    if (nativeDragEnabled) {
+      return {
+        ...base,
+        // Claim the touch so moves continue outside the chip (ScrollView-safe once dragging).
+        onStartShouldSetResponder: function onStartShouldSetResponder() {
+          return true;
+        },
+        onMoveShouldSetResponder: function onMoveShouldSetResponder() {
+          return true;
+        },
+        onResponderTerminationRequest: function onResponderTerminationRequest() {
+          var _nativeSessionRef_current;
+          return !((_nativeSessionRef_current = nativeSessionRef.current) === null || _nativeSessionRef_current === void 0 ? void 0 : _nativeSessionRef_current.dragging);
+        },
+        onResponderGrant: function onResponderGrant(e) {
+          return handleNativeGrant(event, e);
+        },
+        onResponderMove: handleNativeMove,
+        onResponderRelease: handleNativeRelease,
+        onResponderTerminate: handleNativeTerminate
+      };
+    }
+    return base;
+  }, [webDragEnabled, nativeDragEnabled, handleEventPointerDown, handleNativeGrant, handleNativeMove, handleNativeRelease, handleNativeTerminate]);
   var eventsByDate = useMemo(function () {
     var grouped = {};
     var _iteratorNormalCompletion = true,
@@ -127,22 +1016,35 @@ function Calendar(param) {
     return grouped;
   }, [events]);
   var goToPrevious = useCallback(function () {
+    navDirectionRef.current = -1;
+    hasNavigatedRef.current = true;
     setCurrentDate(function (prev) {
+      if (view === "month") return addMonths(prev, -1);
       var 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]);
   var goToNext = useCallback(function () {
+    navDirectionRef.current = 1;
+    hasNavigatedRef.current = true;
     setCurrentDate(function (prev) {
+      if (view === "month") return addMonths(prev, 1);
       var 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]);
   var goToToday = useCallback(function () {
+    navDirectionRef.current = 0;
+    hasNavigatedRef.current = true;
     setCurrentDate(/* @__PURE__ */new Date());
   }, []);
+  var changeView = useCallback(function (next) {
+    navDirectionRef.current = 0;
+    hasNavigatedRef.current = true;
+    setView(next);
+  }, []);
   var displayTitle = useMemo(function () {
     if (view === "month") {
       return `${monthNames[currentDate.getMonth()]} ${currentDate.getFullYear()}`;
@@ -158,51 +1060,181 @@ function Calendar(param) {
     }
     return `${weekdayNames[currentDate.getDay()]}, ${monthNames[currentDate.getMonth()]} ${currentDate.getDate()}, ${currentDate.getFullYear()}`;
   }, [currentDate, view, firstDayOfWeek]);
+  var [focusedDate, setFocusedDate] = useState(null);
+  var [focusedSlotMin, setFocusedSlotMin] = useState(9 * 60);
+  var [announcement, setAnnouncement] = useState("");
+  useEffect(function () {
+    if (hasNavigatedRef.current) setAnnouncement(displayTitle);
+  }, [displayTitle]);
+  var focusedDayKey = focusedDate ? formatDateKey(focusedDate) : null;
+  var focusCellId = focusedDayKey ? view === "month" ? `${calendarId}-day-${focusedDayKey}` : `${calendarId}-slot-cursor` : void 0;
+  var handleBodyKeyDown = useCallback(function (e) {
+    if (editorStateRef.current) return;
+    var key = e.key;
+    var arrows = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
+    if (arrows.includes(key)) {
+      var _e_preventDefault;
+      (_e_preventDefault = e.preventDefault) === null || _e_preventDefault === void 0 ? void 0 : _e_preventDefault.call(e);
+      var base = focusedDate !== null && focusedDate !== void 0 ? focusedDate : currentDate;
+      if (!focusedDate) {
+        setFocusedDate(base);
+        setAnnouncement(formatDayLong(base));
+        return;
+      }
+      if (view !== "month" && (key === "ArrowUp" || key === "ArrowDown")) {
+        var nextMin = moveFocusSlot(focusedSlotMin, key, slotMinutes);
+        setFocusedSlotMin(nextMin);
+        setAnnouncement(`${formatDayLong(base)}, ${formatTimeRangeLabel(dateAtMinutes(base, nextMin), dateAtMinutes(base, nextMin + slotMinutes))}`);
+        return;
+      }
+      var logicalKey = isRTL && key === "ArrowLeft" ? "ArrowRight" : isRTL && key === "ArrowRight" ? "ArrowLeft" : key;
+      var next = moveFocusDate(base, logicalKey, view);
+      setFocusedDate(next);
+      setAnnouncement(formatDayLong(next));
+      var 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") {
+        var 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) {
+      var _e_preventDefault1;
+      (_e_preventDefault1 = e.preventDefault) === null || _e_preventDefault1 === void 0 ? void 0 : _e_preventDefault1.call(e);
+      if (view === "month") {
+        onDateSelect === null || onDateSelect === void 0 ? void 0 : onDateSelect(focusedDate);
+        return;
+      }
+      var start = dateAtMinutes(focusedDate, focusedSlotMin);
+      if (onEventCreate) {
+        openEditor(formatDateKey(focusedDate), {
+          start,
+          end: dateAtMinutes(focusedDate, focusedSlotMin + slotMinutes)
+        });
+      } else {
+        onDateSelect === null || onDateSelect === void 0 ? void 0 : onDateSelect(start);
+      }
+    }
+  }, [focusedDate, currentDate, view, focusedSlotMin, slotMinutes, firstDayOfWeek, isRTL, onDateSelect, onEventCreate, openEditor]);
+  var eventA11yProps = useCallback(function (event) {
+    return {
+      role: "button",
+      tabIndex: 0,
+      "aria-label": eventAccessibleLabel(event),
+      onKeyDown: function onKeyDown(ke) {
+        if (ke.key === "Enter" || ke.key === " ") {
+          var _ke_preventDefault, _ke_stopPropagation;
+          (_ke_preventDefault = ke.preventDefault) === null || _ke_preventDefault === void 0 ? void 0 : _ke_preventDefault.call(ke);
+          (_ke_stopPropagation = ke.stopPropagation) === null || _ke_stopPropagation === void 0 ? void 0 : _ke_stopPropagation.call(ke);
+          onEventClick === null || onEventClick === void 0 ? void 0 : onEventClick(event);
+        }
+      }
+    };
+  }, [onEventClick]);
   var renderEventBadge = useCallback(function (event) {
     var compact = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
-    if (renderEvent) return renderEvent(event);
+    var dragProps = getEventDragProps(event, "day");
+    var 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",
+      // DG-LAY-04: month-view chips measured 23px tall — floor the visual
+      // box at 24 and fill the rest of the 44 target with hit slop (real
+      // 44 chips would break stacked chips inside month cells).
+      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: function onPress(e) {
+      cursor: webDragEnabled ? "grab" : "pointer",
+      ...eventA11yProps(event),
+      ...dragProps,
+      // Native drag responders own the tap → click is handled on release.
+      onPress: nativeDragEnabled ? void 0 : function (e) {
         var _e_stopPropagation;
         e === null || e === void 0 ? void 0 : (_e_stopPropagation = e.stopPropagation) === null || _e_stopPropagation === void 0 ? void 0 : _e_stopPropagation.call(e);
+        if (suppressClickRef.current) return;
         onEventClick === null || onEventClick === void 0 ? void 0 : 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]);
+  var MONTH_VISIBLE_EVENTS = 3;
   var renderMonthView = function renderMonthView2() {
     var monthDays = getMonthDays(currentDate, firstDayOfWeek);
+    var totalWeeks = Math.ceil(monthDays.length / 7);
+    var monthRowMinHeight = monthCellMinHeight;
+    if (monthBodyHeight > 0 && totalWeeks * monthCellMinHeight > monthBodyHeight) {
+      monthRowMinHeight = totalWeeks * monthRowHardFloor <= monthBodyHeight ? monthRowHardFloor : monthBodyHeight / Math.max(1, Math.floor(monthBodyHeight / monthRowHardFloor));
+    }
     var weekdayHeaders = [];
     for (var 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(function (day) {
           return /* @__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,
@@ -210,67 +1242,330 @@ function Calendar(param) {
             })
           }, day);
         })
-      }), /* @__PURE__ */_jsx(ScrollView, {
+      }),
+      /* flexGrow content: week rows stretch to share the panel height so a
+      5/6-week month fits without slicing the last row; scroll engages
+      only below the per-row hard floor. */
+      /* @__PURE__ */
+      _jsx(ScrollView, {
         flex: 1,
+        scrollEnabled: !scrollLocked,
+        contentContainerStyle: {
+          flexGrow: 1
+        },
+        onLayout: function onLayout(e) {
+          var next = e.nativeEvent.layout.height;
+          setMonthBodyHeight(function (prev) {
+            return prev === next ? prev : next;
+          });
+        },
         children: /* @__PURE__ */_jsx(YStack, {
+          flex: 1,
           children: Array.from({
-            length: Math.ceil(monthDays.length / 7)
-          }).map(function (_, weekIndex) {
-            return /* @__PURE__ */_jsx(XStack, {
-              minHeight: 100,
-              children: monthDays.slice(weekIndex * 7, (weekIndex + 1) * 7).map(function (day) {
-                var isCurrentMonth = day.getMonth() === currentDate.getMonth();
-                var dayEvents = eventsByDate[formatDateKey(day)] || [];
-                return /* @__PURE__ */_jsxs(YStack, {
-                  flex: 1,
-                  minHeight: 100,
-                  borderRightWidth: 1,
-                  borderBottomWidth: 1,
-                  borderColor: "$borderColor",
-                  backgroundColor: isToday(day) ? componentColors.surface.background : isCurrentMonth ? "$background" : componentColors.surface.background,
-                  padding: "$1",
-                  onPress: function onPress() {
-                    return onDateSelect === null || onDateSelect === void 0 ? void 0 : 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()
-                  }), /* @__PURE__ */_jsxs(YStack, {
-                    gap: "$1",
-                    marginTop: "$1",
-                    children: [dayEvents.slice(0, 3).map(function (event) {
-                      return renderEventBadge(event, true);
-                    }), dayEvents.length > 3 && /* @__PURE__ */_jsxs(Text, {
-                      fontSize: "$1",
-                      color: componentColors.text.muted,
-                      paddingLeft: "$1",
-                      children: ["+", dayEvents.length - 3, " more"]
+            length: totalWeeks
+          }).map(function (_, weekIndex, weeks) {
+            return (
+              // 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(function (day, dayIndex) {
+                  var isCurrentMonth = day.getMonth() === currentDate.getMonth();
+                  var dayKey = formatDateKey(day);
+                  var dayEvents = eventsByDate[dayKey] || [];
+                  var isDropTarget = dragGhost !== null && dropTargetKey === dayKey;
+                  var isFocused = focusedDayKey === dayKey;
+                  var hiddenCount = dayEvents.length - MONTH_VISIBLE_EVENTS;
+                  var 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 ? function (node) {
+                      return registerDayRef(dayKey, node);
+                    } : void 0,
+                    flex: 1,
+                    minHeight: monthRowMinHeight,
+                    // Interior hairline separators only — the panel frame
+                    // owns the outer edge (OPTICS: one device pixel, no
+                    // doubled rules at the last column/row).
+                    ...gridCellEdges(dayIndex < 6, weekIndex < weeks.length - 1),
+                    borderColor: "$borderColor",
+                    backgroundColor: isDropTarget ? "$accentBackground" : isCurrentMonth ? "$background" : componentColors.surface.background,
+                    padding: cellPad,
+                    ...(isFocused && {
+                      outlineWidth: 2,
+                      outlineColor: "$accentBackground",
+                      outlineStyle: "solid",
+                      outlineOffset: -2
+                    }),
+                    "data-calendar-day": dayKey,
+                    onPress: function onPress() {
+                      if (suppressClickRef.current) return;
+                      onDateSelect === null || onDateSelect === void 0 ? void 0 : onDateSelect(day);
+                    },
+                    cursor: "pointer",
+                    hoverStyle: {
+                      backgroundColor: componentColors.surface.background
+                    },
+                    children: [/* @__PURE__ */_jsx(XStack, {
+                      justifyContent: "flex-end",
+                      paddingInlineEnd: "$1",
+                      children: (/* Today marker: accent disc (pill-by-anatomy, like Badge). */
+                      /* @__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 !== null && onAccent !== void 0 ? 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: chipGap,
+                      marginTop: chipGap,
+                      children: [dayEvents.slice(0, MONTH_VISIBLE_EVENTS).map(function (event) {
+                        return renderEventBadge(event, true);
+                      }), hiddenCount > 0 && /* @__PURE__ */_jsx(FloatingPanel, {
+                        open: overflowDayKey === dayKey,
+                        onOpenChange: function onOpenChange(open) {
+                          return 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",
+                          // Web: keep the "+N more" press from also selecting
+                          // the day cell. Native must not stop propagation —
+                          // the sheet trigger's own press lives on a parent.
+                          onPress: isWeb ? function (e) {
+                            var _e_stopPropagation;
+                            return e === null || e === void 0 ? void 0 : (_e_stopPropagation = e.stopPropagation) === null || _e_stopPropagation === void 0 ? void 0 : _e_stopPropagation.call(e);
+                          } : 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(function (event) {
+                            return renderEventBadge(event, false);
+                          })]
+                        })
+                      })]
                     })]
-                  })]
-                }, day.toISOString());
-              })
-            }, weekIndex);
+                  }, day.toISOString());
+                })
+              }, weekIndex)
+            );
           })
         })
       })]
     });
   };
-  var renderWeekView = function renderWeekView2() {
-    var weekDays = getWeekDays(currentDate, firstDayOfWeek);
+  var timeGridScrollRef = useRef(null);
+  var gridHeight = 24 * hourHeight;
+  useEffect(function () {
+    var _timeGridScrollRef_current_scrollTo, _timeGridScrollRef_current;
+    if (view === "month") return;
+    var target = Math.max(0, minutesToY(7 * 60, hourHeight) - 8);
+    (_timeGridScrollRef_current = timeGridScrollRef.current) === null || _timeGridScrollRef_current === void 0 ? void 0 : (_timeGridScrollRef_current_scrollTo = _timeGridScrollRef_current.scrollTo) === null || _timeGridScrollRef_current_scrollTo === void 0 ? void 0 : _timeGridScrollRef_current_scrollTo.call(_timeGridScrollRef_current, {
+      y: target,
+      animated: false
+    });
+  }, [view, hourHeight]);
+  var renderTimedBlock = function renderTimedBlock2(event, layout) {
+    var _event_end;
+    var preview = (resizePreview === null || resizePreview === void 0 ? void 0 : resizePreview.id) === event.id ? resizePreview : null;
+    var start = preview ? preview.start : event.start;
+    var end = preview ? preview.end : (_event_end = event.end) !== null && _event_end !== void 0 ? _event_end : event.start;
+    var startMin = minutesOfDay(start);
+    var endMin = Math.max(startMin + slotMinutes, startMin + (end.getTime() - start.getTime()) / 6e4);
+    var top = minutesToY(startMin, hourHeight);
+    var blockHeight = Math.max(MIN_BLOCK_PX, minutesToY(endMin - startMin, hourHeight));
+    var widthPct = 100 / layout.columns;
+    var leftPct = (isRTL ? layout.columns - 1 - layout.column : layout.column) * widthPct;
+    var lifted = draggingEventId === event.id;
+    var zoneInner = Math.min(RESIZE_ZONE_PX / 2, blockHeight / 2);
+    var dragProps = getEventDragProps(event, "slot");
+    return /* @__PURE__ */_jsxs(YStack, {
+      position: "absolute",
+      top,
+      height: blockHeight,
+      left: `${leftPct}%`,
+      width: `${widthPct}%`,
+      paddingInlineEnd: 2,
+      zIndex: preview ? 4 : 2,
+      // LC-25: committed/reverted/snapped geometry jumps tween on web.
+      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 : function (e) {
+          var _e_stopPropagation;
+          e === null || e === void 0 ? void 0 : (_e_stopPropagation = e.stopPropagation) === null || _e_stopPropagation === void 0 ? void 0 : _e_stopPropagation.call(e);
+          if (suppressClickRef.current) return;
+          onEventClick === null || onEventClick === void 0 ? void 0 : 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)
+          })]
+        })
+      }), /* Resize handles: 44px hit zones straddling each edge (Axiom 12). */
+      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: function onPointerDown(e) {
+            return 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: function onPointerDown(e) {
+            return handleResizePointerDown(event, "end", e);
+          },
+          "data-calendar-resize": `end:${event.id}`,
+          children: /* @__PURE__ */_jsx(YStack, {
+            width: 28,
+            height: 3,
+            borderRadius: 2,
+            backgroundColor: "$accentColor",
+            marginTop: 2
+          })
+        })]
+      }), /* Live duration label while resizing. */
+      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);
+  };
+  var renderTimeGrid = function renderTimeGrid2(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: [/* Day headers */
+      /* @__PURE__ */_jsxs(XStack, {
+        ...hairline.bottom,
         borderColor: "$borderColor",
-        children: weekDays.map(function (day) {
+        children: [/* @__PURE__ */_jsx(YStack, {
+          width: 56
+        }), days.map(function (day) {
           return /* @__PURE__ */_jsxs(YStack, {
             flex: 1,
             padding: "$2",
@@ -280,115 +1575,274 @@ function Calendar(param) {
               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());
-        })
-      }), /* @__PURE__ */_jsx(ScrollView, {
+        })]
+      }), /* All-day / untimed strip (also the day-granularity drop row) */
+      /* @__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(function (day) {
+          var dayKey = formatDateKey(day);
+          var dayEvents = (eventsByDate[dayKey] || []).filter(function (ev) {
+            return !isTimedEvent(ev);
+          });
+          var 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 ? function (node) {
+              return registerDayRef(`allday:${dayKey}`, node);
+            } : void 0,
+            onPress: function onPress() {
+              if (suppressClickRef.current) return;
+              onDateSelect === null || onDateSelect === void 0 ? void 0 : onDateSelect(day);
+            },
+            children: dayEvents.map(function (event) {
+              return renderEventBadge(event, true);
+            })
+          }, day.toISOString());
+        })]
+      }), /* Time grid body */
+      /* @__PURE__ */_jsx(ScrollView, {
+        ref: timeGridScrollRef,
         flex: 1,
-        children: /* @__PURE__ */_jsx(XStack, {
-          flex: 1,
-          minHeight: 400,
-          children: weekDays.map(function (day) {
-            var dayEvents = eventsByDate[formatDateKey(day)] || [];
-            return /* @__PURE__ */_jsx(YStack, {
+        scrollEnabled: !scrollLocked,
+        children: /* @__PURE__ */_jsxs(XStack, {
+          children: [/* Hour gutter */
+          /* @__PURE__ */_jsx(YStack, {
+            width: 56,
+            children: hours.map(function (hour) {
+              return /* @__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(function (day) {
+            var dayKey = formatDateKey(day);
+            var dayEvents = (eventsByDate[dayKey] || []).filter(isTimedEvent);
+            var blocks = layoutDayBlocks(dayEvents.map(function (ev) {
+              var _ref;
+              var _ev_end;
+              return {
+                id: ev.id,
+                startMin: minutesOfDay(ev.start),
+                endMin: Math.min(MINUTES_PER_DAY, Math.max(minutesOfDay(ev.start) + slotMinutes, minutesOfDay(ev.start) + (((_ref = (_ev_end = ev.end) === null || _ev_end === void 0 ? void 0 : _ev_end.getTime()) !== null && _ref !== void 0 ? _ref : ev.start.getTime()) - ev.start.getTime()) / 6e4))
+              };
+            }));
+            var byId = new Map(dayEvents.map(function (ev) {
+              return [ev.id, ev];
+            }));
+            var isSlotTargetDay = (slotTarget === null || slotTarget === void 0 ? void 0 : slotTarget.dayKey) === dayKey;
+            var draftHere = (createDraft === null || createDraft === void 0 ? void 0 : createDraft.dayKey) === dayKey ? createDraft : null;
+            var editorHere = (editorState === null || editorState === void 0 ? void 0 : editorState.dayKey) === dayKey ? editorState : null;
+            var focusHere = view !== "month" && focusedDayKey === dayKey;
+            return /* @__PURE__ */_jsxs(YStack, {
               flex: 1,
-              borderRightWidth: 1,
+              height: gridHeight,
+              position: "relative",
+              ...hairlineEnd,
               borderColor: "$borderColor",
-              padding: "$1",
-              onPress: function onPress() {
-                return onDateSelect === null || onDateSelect === void 0 ? void 0 : onDateSelect(day);
-              },
-              cursor: "pointer",
-              hoverStyle: {
-                backgroundColor: componentColors.surface.background
-              },
-              children: /* @__PURE__ */_jsx(YStack, {
-                gap: "$1",
-                children: dayEvents.map(function (event) {
-                  return renderEventBadge(event, true);
+              "data-calendar-timecol": dayKey,
+              ref: nativeDragEnabled ? function (node) {
+                return registerDayRef(dayKey, node);
+              } : void 0,
+              onPointerDown: hasDom ? function (e) {
+                return handleGridPointerDown(day, e);
+              } : void 0,
+              children: [/* Hour lines */
+              hours.map(function (hour) {
+                return /* @__PURE__ */_jsx(YStack, {
+                  height: hourHeight,
+                  ...hairline.bottom,
+                  borderColor: componentColors.divider,
+                  pointerEvents: "none"
+                }, hour);
+              }), /* Timed events */
+              blocks.map(function (block) {
+                var event = byId.get(block.id);
+                if (!event) return null;
+                return renderTimedBlock(event, block);
+              }), /* Drop-target slot highlight (ramp tint) */
+              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"
+              }), /* Drag-to-create sketch */
+              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)
+                })
+              }), /* Draft block + live-commit editor (LC-06 / LC-21) */
+              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: function 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")
+                    })]
+                  })
                 })
-              })
+              }), /* Keyboard slot cursor (discrete moves tween — Axiom 4) */
+              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"
+              }), /* Now indicator */
+              isToday(day) && /* @__PURE__ */_jsx(NowIndicator, {
+                hourHeight
+              })]
             }, day.toISOString());
-          })
+          })]
         })
       })]
     });
   };
+  var renderWeekView = function renderWeekView2() {
+    return renderTimeGrid(getWeekDays(currentDate, firstDayOfWeek));
+  };
   var renderDayView = function renderDayView2() {
-    var hours = getHours();
-    var 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(function (event) {
-              return renderEventBadge(event, false);
-            })
-          })]
-        }), hours.map(function (hour) {
-          return /* @__PURE__ */_jsxs(XStack, {
-            minHeight: 60,
-            borderBottomWidth: 1,
-            borderColor: "$borderColor",
-            onPress: function onPress() {
-              var date = new Date(currentDate);
-              date.setHours(hour, 0, 0, 0);
-              onDateSelect === null || onDateSelect === void 0 ? void 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);
-        })]
-      })
-    });
+    return renderTimeGrid([currentDate]);
   };
+  var physicalDir = navDirectionRef.current * (isRTL ? -1 : 1);
+  var bodyEnterVariant = !transition ? void 0 : physicalDir > 0 ? "fromEnd" : physicalDir < 0 ? "fromStart" : "fade";
+  var bodyExitVariant = !transition ? void 0 : physicalDir > 0 ? "fromStart" : physicalDir < 0 ? "fromEnd" : "fade";
   return /* @__PURE__ */_jsxs(YStack, {
     height,
+    position: "relative",
+    overflow: "hidden",
+    backgroundColor: "$background",
+    // Panel-tier lift follows the elevation knob (LC-18: the calendar frame
+    // is a themed surface, same as Dashboard cards / Kanban columns).
+    elevation: knobProps.elevation,
+    ref: nativeDragEnabled ? function (node) {
+      containerNodeRef.current = node;
+      refreshContainerOffset();
+    } : void 0,
+    onLayout: nativeDragEnabled ? refreshContainerOffset : void 0,
     ...stackProps,
     children: [/* Header */
     (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",
@@ -396,61 +1850,137 @@ function Calendar(param) {
         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, {
+      }),
+      /* Period title is the panel's section heading — shared scale
+      (LC-17), family still follows the heading font knob. */
+      /* @__PURE__ */
+      _jsx(Text, {
         ...knobProps.heading,
-        fontSize: knobProps.sizeToken,
+        ...sectionHeading,
         children: displayTitle
-      }), showViewSwitcher && /* @__PURE__ */_jsxs(ToggleGroup, {
-        type: "single",
-        orientation: "horizontal",
-        flexDirection: "row",
-        value: view,
-        onValueChange: function 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: function onViewChange(val) {
+          return changeView(val);
+        }
       })]
-    }), /* Calendar Body */
-    /* @__PURE__ */_jsxs(YStack, {
+    }), /* aria-live region: period + focus announcements (visually hidden) */
+    /* @__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
+      })
+    }),
+    /* Calendar Body — view/period switches slide+fade with PAIRED
+    enter/exit (LC-24): the leaving period exits toward where it came
+    from while the new one slides in from the reading-direction end.
+    Children are keyed per period inside one persistent AnimatePresence
+    (keying the presence itself would drop the exit — the old wrapper
+    unmounts before it can animate). `fullscreen` keeps both periods
+    overlaid during the crossfade instead of stacking in flow. */
+    /* @__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)
+      })
+    }), /* Drag ghost following the pointer / finger (lifted: shadow + scale) */
+    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
+      })
+    }), /* FLIP settle: drop/cancel tweens the ghost into its final slot (LC-25) */
+    settle && isWeb && /* @__PURE__ */_jsx(SettleGhost, {
+      settle,
+      transition,
+      borderRadius: knobProps.borderRadius,
+      onDone: clearSettle
+    }, settle.key)]
   });
 }
-export { Calendar };
+export { Calendar, computeEventMoveRange, eventChipTextColor, findDayKeyAtPoint };
 //# sourceMappingURL=Calendar.native.js.map