react-yearly-calendar-grid 0.1.0

package/dist/index.js

@@ -0,0 +1,1069 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/YearlyCalendar/styles.ts
+var defaultTheme = {
+  // 背景色
+  bgWhite: "#ffffff",
+  bgGray50: "#f9fafb",
+  bgGray100: "#f3f4f6",
+  bgSunday: "#fef2f2",
+  bgSaturday: "#eff6ff",
+  bgDropHighlight: "rgba(191, 219, 254, 0.5)",
+  // ボーダー
+  borderDefault: "#d1d5db",
+  borderDropHighlight: "#3b82f6",
+  // テキスト
+  textPrimary: "#111827",
+  textSecondary: "#4b5563",
+  textMuted: "#6b7280",
+  // UI要素
+  tooltipBg: "#111827",
+  tooltipText: "#ffffff",
+  dialogOverlay: "rgba(0, 0, 0, 0.3)",
+  buttonPrimary: "#2563eb",
+  buttonPrimaryHover: "#1d4ed8",
+  floatingDateBg: "#2563eb",
+  resizeFloatingBg: "#9333ea"
+};
+function mergeTheme(custom) {
+  if (!custom) return defaultTheme;
+  return __spreadValues(__spreadValues({}, defaultTheme), custom);
+}
+function createStyles(theme) {
+  return {
+    // コンテナ
+    container: {
+      width: "100%",
+      height: "100%",
+      position: "relative",
+      display: "flex",
+      flexDirection: "column"
+    },
+    // フレックスコンテナ
+    flexContainer: {
+      display: "flex",
+      width: "100%",
+      flex: 1
+    },
+    // 日付列（左側固定）
+    dayColumn: {
+      position: "sticky",
+      left: 0,
+      zIndex: 20,
+      backgroundColor: theme.bgGray100,
+      flexShrink: 0,
+      display: "flex",
+      flexDirection: "column"
+    },
+    // 日付ヘッダーセル
+    dayHeaderCell: {
+      height: 24,
+      border: `1px solid ${theme.borderDefault}`,
+      backgroundColor: theme.bgGray100,
+      padding: "0 4px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontWeight: 500,
+      fontSize: 12,
+      width: 32
+    },
+    // 日付セル
+    dayCell: {
+      border: `1px solid ${theme.borderDefault}`,
+      backgroundColor: theme.bgGray50,
+      padding: "0 4px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontWeight: 500,
+      fontSize: 12,
+      width: 32
+    },
+    // 月列
+    monthColumn: {
+      position: "relative",
+      flex: 1,
+      minWidth: 0
+    },
+    // 月ヘッダー
+    monthHeader: {
+      height: 24,
+      border: `1px solid ${theme.borderDefault}`,
+      backgroundColor: theme.bgGray100,
+      padding: "0 4px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontWeight: 500,
+      fontSize: 12
+    },
+    // カレンダーセル（基本）
+    calendarCell: {
+      border: `1px solid ${theme.borderDefault}`,
+      position: "relative"
+    },
+    // イベントバーコンテナ
+    eventBarContainer: {
+      position: "absolute",
+      top: 24,
+      left: 0,
+      right: "20%",
+      padding: "0 2px",
+      pointerEvents: "none",
+      zIndex: 10
+    },
+    // イベントバー
+    eventBar: {
+      position: "absolute",
+      cursor: "grab",
+      transition: "filter 0.15s, z-index 0.15s",
+      boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)"
+    },
+    // ドロップインジケーター
+    dropIndicator: {
+      position: "absolute",
+      left: 0,
+      right: 0,
+      pointerEvents: "none",
+      zIndex: 50
+    },
+    dropIndicatorInner: {
+      height: "100%",
+      border: `2px solid ${theme.borderDropHighlight}`,
+      backgroundColor: theme.bgDropHighlight,
+      borderRadius: 4
+    },
+    // フローティング日付表示
+    floatingDate: {
+      position: "fixed",
+      zIndex: 100,
+      pointerEvents: "none",
+      transform: "translateX(-50%)"
+    },
+    floatingDateContent: {
+      backgroundColor: theme.floatingDateBg,
+      color: theme.tooltipText,
+      fontSize: 14,
+      fontWeight: 700,
+      borderRadius: 8,
+      padding: "8px 12px",
+      boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
+    },
+    floatingDateSubtext: {
+      fontSize: 12,
+      fontWeight: 400,
+      opacity: 0.8
+    },
+    // リサイズ用フローティング表示
+    resizeFloatingContent: {
+      backgroundColor: theme.resizeFloatingBg,
+      color: theme.tooltipText,
+      fontSize: 14,
+      fontWeight: 700,
+      borderRadius: 8,
+      padding: "8px 12px",
+      boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
+    },
+    // ツールチップ
+    tooltip: {
+      position: "fixed",
+      zIndex: 200,
+      pointerEvents: "none"
+    },
+    tooltipContent: {
+      backgroundColor: theme.tooltipBg,
+      color: theme.tooltipText,
+      fontSize: 12,
+      borderRadius: 4,
+      padding: "6px 8px",
+      whiteSpace: "nowrap",
+      boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
+    },
+    tooltipTitle: {
+      fontWeight: 500
+    },
+    tooltipDate: {
+      color: "rgba(255, 255, 255, 0.7)",
+      fontSize: 10,
+      marginTop: 2
+    },
+    // 確認ダイアログ
+    dialogOverlay: {
+      position: "fixed",
+      inset: 0,
+      zIndex: 100,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: theme.dialogOverlay
+    },
+    dialogContent: {
+      backgroundColor: theme.bgWhite,
+      borderRadius: 8,
+      boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+      padding: 16,
+      maxWidth: 384,
+      margin: "0 16px"
+    },
+    dialogTitle: {
+      fontWeight: 700,
+      color: theme.textPrimary,
+      marginBottom: 8
+    },
+    dialogBody: {
+      fontSize: 14,
+      color: theme.textSecondary,
+      marginBottom: 16
+    },
+    dialogEventTitle: {
+      fontWeight: 500,
+      color: theme.textPrimary
+    },
+    dialogDateLabel: {
+      color: theme.textMuted
+    },
+    dialogButtons: {
+      display: "flex",
+      gap: 8,
+      justifyContent: "flex-end"
+    },
+    dialogCancelButton: {
+      padding: "8px 16px",
+      fontSize: 14,
+      color: theme.textSecondary,
+      backgroundColor: "transparent",
+      border: "none",
+      borderRadius: 4,
+      cursor: "pointer"
+    },
+    dialogConfirmButton: {
+      padding: "8px 16px",
+      fontSize: 14,
+      color: theme.tooltipText,
+      backgroundColor: theme.buttonPrimary,
+      border: "none",
+      borderRadius: 4,
+      cursor: "pointer"
+    },
+    // リサイズハンドル
+    resizeHandle: {
+      position: "absolute",
+      left: 0,
+      right: 0,
+      height: 8,
+      cursor: "ns-resize",
+      opacity: 0,
+      backgroundColor: "rgba(255, 255, 255, 0.3)"
+    },
+    resizeHandleTop: {
+      top: 0,
+      borderTopLeftRadius: 4,
+      borderTopRightRadius: 4
+    },
+    resizeHandleBottom: {
+      bottom: 0,
+      borderBottomLeftRadius: 4,
+      borderBottomRightRadius: 4
+    },
+    // インジケーター（▲▼）
+    indicator: {
+      position: "absolute",
+      left: "50%",
+      transform: "translateX(-50%)",
+      fontSize: 8,
+      color: "rgba(255, 255, 255, 0.8)"
+    },
+    indicatorTop: {
+      top: -6
+    },
+    indicatorBottom: {
+      bottom: -6
+    },
+    // 縦書きタイトル
+    verticalTitle: {
+      position: "absolute",
+      inset: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: 10,
+      color: "#ffffff",
+      fontWeight: 500,
+      overflow: "hidden",
+      writingMode: "vertical-rl"
+    },
+    // 横書きタイトル
+    horizontalTitle: {
+      position: "absolute",
+      inset: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: 9,
+      color: "#ffffff",
+      fontWeight: 500,
+      overflow: "hidden",
+      padding: "0 2px"
+    },
+    truncate: {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    }
+  };
+}
+function getCellBackgroundColor(theme, isValidDay, isSunday2, isSaturday2, isHovered) {
+  if (!isValidDay) return theme.bgGray100;
+  if (isHovered) return theme.bgGray50;
+  if (isSunday2) return theme.bgSunday;
+  if (isSaturday2) return theme.bgSaturday;
+  return theme.bgWhite;
+}
+var MONTHS = [
+  "1\u6708",
+  "2\u6708",
+  "3\u6708",
+  "4\u6708",
+  "5\u6708",
+  "6\u6708",
+  "7\u6708",
+  "8\u6708",
+  "9\u6708",
+  "10\u6708",
+  "11\u6708",
+  "12\u6708"
+];
+var DAYS = Array.from({ length: 31 }, (_, i) => i + 1);
+var MIN_ROW_HEIGHT = 20;
+var HEADER_HEIGHT = 24;
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function isSunday(year, month, day) {
+  return new Date(year, month, day).getDay() === 0;
+}
+function isSaturday(year, month, day) {
+  return new Date(year, month, day).getDay() === 6;
+}
+function getMonthSpans(events, year, month) {
+  const spans = [];
+  const daysInMonth = getDaysInMonth(year, month);
+  events.forEach((event) => {
+    const startDate = event.date;
+    const endDate = event.endDate || event.date;
+    const monthStart = new Date(year, month, 1);
+    const monthEnd = new Date(year, month, daysInMonth, 23, 59, 59);
+    if (startDate > monthEnd || endDate < monthStart) {
+      return;
+    }
+    const spanStart = startDate >= monthStart ? startDate.getDate() : 1;
+    const spanEnd = endDate <= monthEnd ? endDate.getDate() : daysInMonth;
+    spans.push({
+      event,
+      startDay: spanStart,
+      endDay: spanEnd,
+      isStart: startDate.getFullYear() === year && startDate.getMonth() === month,
+      isEnd: endDate.getFullYear() === year && endDate.getMonth() === month
+    });
+  });
+  return spans;
+}
+function calculateLanes(spans) {
+  const laneMap = /* @__PURE__ */ new Map();
+  const lanes = [];
+  const sorted = [...spans].sort((a, b) => a.startDay - b.startDay);
+  sorted.forEach((span) => {
+    let laneIndex = lanes.findIndex((lane) => lane.endDay < span.startDay);
+    if (laneIndex === -1) {
+      laneIndex = lanes.length;
+      lanes.push({ endDay: span.endDay });
+    } else {
+      lanes[laneIndex].endDay = span.endDay;
+    }
+    laneMap.set(span.event.id, laneIndex);
+  });
+  return laneMap;
+}
+function YearlyCalendar({
+  year,
+  events = [],
+  onDateClick,
+  onEventClick,
+  onEventMove,
+  categoryColors = {},
+  theme: customTheme
+}) {
+  const theme = react.useMemo(() => mergeTheme(customTheme), [customTheme]);
+  const styles = react.useMemo(() => createStyles(theme), [theme]);
+  const containerRef = react.useRef(null);
+  const [rowHeight, setRowHeight] = react.useState(MIN_ROW_HEIGHT);
+  react.useEffect(() => {
+    const updateRowHeight = () => {
+      if (containerRef.current) {
+        const containerHeight = containerRef.current.clientHeight;
+        const calculatedHeight = Math.floor(
+          (containerHeight - HEADER_HEIGHT) / 31
+        );
+        setRowHeight(Math.max(calculatedHeight, MIN_ROW_HEIGHT));
+      }
+    };
+    updateRowHeight();
+    window.addEventListener("resize", updateRowHeight);
+    return () => window.removeEventListener("resize", updateRowHeight);
+  }, []);
+  const [draggingEvent, setDraggingEvent] = react.useState(
+    null
+  );
+  const [dragOffset, setDragOffset] = react.useState(0);
+  const [dragOverCell, setDragOverCell] = react.useState(null);
+  const [dragPosition, setDragPosition] = react.useState(null);
+  const [dragGrabOffsetY, setDragGrabOffsetY] = react.useState(0);
+  const [dragCardHeight, setDragCardHeight] = react.useState(0);
+  const [pendingMove, setPendingMove] = react.useState(null);
+  const [hoveredEvent, setHoveredEvent] = react.useState(null);
+  const [resizingEvent, setResizingEvent] = react.useState(null);
+  const [hoveredCell, setHoveredCell] = react.useState(null);
+  const [hoveredEventBar, setHoveredEventBar] = react.useState(null);
+  const [hoveredResizeHandle, setHoveredResizeHandle] = react.useState(null);
+  const [hoveredCancelButton, setHoveredCancelButton] = react.useState(false);
+  const [hoveredConfirmButton, setHoveredConfirmButton] = react.useState(false);
+  const monthSpans = react.useMemo(() => {
+    const result = [];
+    for (let month = 0; month < 12; month++) {
+      result.push(getMonthSpans(events, year, month));
+    }
+    return result;
+  }, [events, year]);
+  const laneMaps = react.useMemo(() => {
+    return monthSpans.map((spans) => calculateLanes(spans));
+  }, [monthSpans]);
+  const maxLanes = react.useMemo(() => {
+    return laneMaps.map((laneMap) => {
+      let max = 0;
+      laneMap.forEach((lane) => {
+        max = Math.max(max, lane + 1);
+      });
+      return Math.max(max, 1);
+    });
+  }, [laneMaps]);
+  const resizePreviewSpans = react.useMemo(() => {
+    if (!resizingEvent || !dragOverCell) return null;
+    const { event, edge } = resizingEvent;
+    const dropDate = new Date(year, dragOverCell.month, dragOverCell.day);
+    let newStartDate = new Date(event.date);
+    let newEndDate = new Date(event.endDate || event.date);
+    if (edge === "start") {
+      if (dropDate <= newEndDate) {
+        newStartDate = dropDate;
+      }
+    } else {
+      if (dropDate >= newStartDate) {
+        newEndDate = dropDate;
+      }
+    }
+    const spans = /* @__PURE__ */ new Map();
+    for (let month = 0; month < 12; month++) {
+      const daysInMonth = getDaysInMonth(year, month);
+      const monthStart = new Date(year, month, 1);
+      const monthEnd = new Date(year, month, daysInMonth, 23, 59, 59);
+      if (newStartDate > monthEnd || newEndDate < monthStart) continue;
+      const spanStart = newStartDate >= monthStart ? newStartDate.getDate() : 1;
+      const spanEnd = newEndDate <= monthEnd ? newEndDate.getDate() : daysInMonth;
+      spans.set(month, {
+        event,
+        startDay: spanStart,
+        endDay: spanEnd,
+        isStart: newStartDate.getFullYear() === year && newStartDate.getMonth() === month,
+        isEnd: newEndDate.getFullYear() === year && newEndDate.getMonth() === month
+      });
+    }
+    return spans;
+  }, [resizingEvent, dragOverCell, year]);
+  const getEventColor = (event) => {
+    if (event.color) return event.color;
+    if (event.category && categoryColors[event.category]) {
+      return categoryColors[event.category];
+    }
+    return "#3b82f6";
+  };
+  const eventsByDate = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    events.forEach((event) => {
+      const startDate = event.date;
+      const endDate = event.endDate || event.date;
+      const current = new Date(startDate);
+      while (current <= endDate) {
+        const dateKey = `${current.getFullYear()}-${current.getMonth()}-${current.getDate()}`;
+        const existing = map.get(dateKey) || [];
+        map.set(dateKey, [...existing, event]);
+        current.setDate(current.getDate() + 1);
+      }
+    });
+    return map;
+  }, [events]);
+  const getEventsForDate = (month, day) => {
+    const dateKey = `${year}-${month}-${day}`;
+    return eventsByDate.get(dateKey) || [];
+  };
+  const handleCellClick = (month, day) => {
+    if (!onDateClick) return;
+    const daysInMonth = getDaysInMonth(year, month);
+    if (day > daysInMonth) return;
+    const date = new Date(year, month, day);
+    const cellEvents = getEventsForDate(month, day);
+    onDateClick(date, cellEvents);
+  };
+  const handleDragStart = react.useCallback(
+    (e, event, monthIndex, spanStartDay) => {
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", event.id);
+      const rect = e.currentTarget.getBoundingClientRect();
+      const clickY = e.clientY - rect.top;
+      const dayOffset = Math.floor(clickY / rowHeight);
+      const grabDay = spanStartDay + dayOffset;
+      setDragGrabOffsetY(clickY);
+      setDragCardHeight(rect.height);
+      const grabDate = new Date(year, monthIndex, grabDay);
+      const startDate = event.date;
+      const offsetDays = Math.floor(
+        (grabDate.getTime() - startDate.getTime()) / (1e3 * 60 * 60 * 24)
+      );
+      setDragOffset(offsetDays);
+      requestAnimationFrame(() => {
+        setDraggingEvent(event);
+      });
+    },
+    [year, rowHeight]
+  );
+  const handleDragOver = react.useCallback(
+    (e, month, day) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      if (draggingEvent && dragGrabOffsetY > 0) {
+        const dayOffset = Math.floor(dragGrabOffsetY / rowHeight);
+        let cardTopDay = day - dayOffset;
+        let cardTopMonth = month;
+        while (cardTopDay < 1 && cardTopMonth > 0) {
+          cardTopMonth--;
+          cardTopDay += getDaysInMonth(year, cardTopMonth);
+        }
+        let daysInMonth = getDaysInMonth(year, cardTopMonth);
+        while (cardTopDay > daysInMonth && cardTopMonth < 11) {
+          cardTopDay -= daysInMonth;
+          cardTopMonth++;
+          daysInMonth = getDaysInMonth(year, cardTopMonth);
+        }
+        cardTopDay = Math.max(
+          1,
+          Math.min(cardTopDay, getDaysInMonth(year, cardTopMonth))
+        );
+        setDragOverCell({ month: cardTopMonth, day: cardTopDay });
+      } else {
+        setDragOverCell({ month, day });
+      }
+      setDragPosition({ x: e.clientX, y: e.clientY });
+    },
+    [draggingEvent, dragGrabOffsetY, year, rowHeight]
+  );
+  const handleDragLeave = react.useCallback(() => {
+    setDragOverCell(null);
+  }, []);
+  const handleDrop = react.useCallback(
+    (e) => {
+      e.preventDefault();
+      if (draggingEvent && onEventMove && dragOverCell) {
+        const newStartDate = new Date(
+          year,
+          dragOverCell.month,
+          dragOverCell.day
+        );
+        let newEndDate;
+        if (draggingEvent.endDate) {
+          const duration = draggingEvent.endDate.getTime() - draggingEvent.date.getTime();
+          newEndDate = new Date(newStartDate.getTime() + duration);
+        }
+        onEventMove(draggingEvent, newStartDate, newEndDate);
+      }
+      setDragOverCell(null);
+      setDragPosition(null);
+      setDraggingEvent(null);
+      setDragOffset(0);
+    },
+    [draggingEvent, dragOverCell, year, onEventMove]
+  );
+  const handleDragEnd = react.useCallback(() => {
+    setDraggingEvent(null);
+    setDragOverCell(null);
+    setDragPosition(null);
+    setDragGrabOffsetY(0);
+    setDragCardHeight(0);
+  }, []);
+  const handleConfirmMove = react.useCallback(() => {
+    if (pendingMove && onEventMove) {
+      onEventMove(
+        pendingMove.event,
+        pendingMove.newStartDate,
+        pendingMove.newEndDate
+      );
+    }
+    setPendingMove(null);
+  }, [pendingMove, onEventMove]);
+  const handleCancelMove = react.useCallback(() => {
+    setPendingMove(null);
+  }, []);
+  const handleResizeStart = react.useCallback(
+    (e, event, edge) => {
+      e.stopPropagation();
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", `resize-${event.id}`);
+      requestAnimationFrame(() => {
+        setResizingEvent({ event, edge });
+      });
+    },
+    []
+  );
+  const handleResizeDrop = react.useCallback(
+    (month, day) => {
+      if (!resizingEvent || !onEventMove) return;
+      const { event, edge } = resizingEvent;
+      const dropDate = new Date(year, month, day);
+      let newStartDate = event.date;
+      let newEndDate = event.endDate || event.date;
+      if (edge === "start") {
+        if (dropDate <= newEndDate) {
+          newStartDate = dropDate;
+        }
+      } else {
+        if (dropDate >= newStartDate) {
+          newEndDate = dropDate;
+        }
+      }
+      const finalEndDate = newStartDate.getTime() === newEndDate.getTime() ? void 0 : newEndDate;
+      onEventMove(event, newStartDate, finalEndDate);
+      setResizingEvent(null);
+      setDragOverCell(null);
+      setDragPosition(null);
+    },
+    [resizingEvent, year, onEventMove]
+  );
+  const handleResizeEnd = react.useCallback(() => {
+    setResizingEvent(null);
+    setDragOverCell(null);
+    setDragPosition(null);
+  }, []);
+  react.useEffect(() => {
+    const handleGlobalMouseUp = () => {
+      setResizingEvent(null);
+      setDraggingEvent(null);
+      setDragOverCell(null);
+      setDragPosition(null);
+      setDragGrabOffsetY(0);
+      setDragCardHeight(0);
+      setDragOffset(0);
+    };
+    window.addEventListener("mouseup", handleGlobalMouseUp);
+    window.addEventListener("dragend", handleGlobalMouseUp);
+    return () => {
+      window.removeEventListener("mouseup", handleGlobalMouseUp);
+      window.removeEventListener("dragend", handleGlobalMouseUp);
+    };
+  }, []);
+  const getWeekdayName = (month, day) => {
+    const date = new Date(year, month, day);
+    return ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"][date.getDay()];
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, style: styles.container, children: [
+    draggingEvent && dragOverCell && dragPosition && (() => {
+      const cardTop = dragPosition.y - dragGrabOffsetY;
+      const cardBottom = cardTop + dragCardHeight;
+      const showBelow = cardTop < 80;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: __spreadProps(__spreadValues({}, styles.floatingDate), {
+            left: dragPosition.x,
+            top: showBelow ? cardBottom + 8 : cardTop - 8,
+            transform: showBelow ? "translateX(-50%)" : "translateX(-50%) translateY(-100%)"
+          }),
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.floatingDateContent, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              dragOverCell.month + 1,
+              "\u6708",
+              dragOverCell.day,
+              "\u65E5(",
+              getWeekdayName(dragOverCell.month, dragOverCell.day),
+              ")"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.floatingDateSubtext, children: draggingEvent.title })
+          ] })
+        }
+      );
+    })(),
+    resizingEvent && dragOverCell && dragPosition && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: __spreadProps(__spreadValues({}, styles.floatingDate), {
+          left: dragPosition.x,
+          top: dragPosition.y - 50
+        }),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.resizeFloatingContent, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            resizingEvent.edge === "start" ? "\u958B\u59CB\u65E5\uFF1A" : "\u7D42\u4E86\u65E5\uFF1A",
+            dragOverCell.month + 1,
+            "\u6708",
+            dragOverCell.day,
+            "\u65E5(",
+            getWeekdayName(dragOverCell.month, dragOverCell.day),
+            ")"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.floatingDateSubtext, children: resizingEvent.event.title })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.flexContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.dayColumn, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.dayHeaderCell, children: "\u65E5" }),
+        DAYS.map((day) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: __spreadProps(__spreadValues({}, styles.dayCell), { height: rowHeight }), children: day }, day))
+      ] }),
+      MONTHS.map((monthName, monthIndex) => {
+        const daysInMonth = getDaysInMonth(year, monthIndex);
+        const spans = monthSpans[monthIndex];
+        const laneMap = laneMaps[monthIndex];
+        const laneCount = maxLanes[monthIndex];
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.monthColumn, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.monthHeader, children: monthName }),
+          DAYS.map((day) => {
+            const isValidDay = day <= daysInMonth;
+            const sunday = isValidDay && isSunday(year, monthIndex, day);
+            const saturday = isValidDay && isSaturday(year, monthIndex, day);
+            const isHovered = (hoveredCell == null ? void 0 : hoveredCell.month) === monthIndex && (hoveredCell == null ? void 0 : hoveredCell.day) === day;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: __spreadProps(__spreadValues({}, styles.calendarCell), {
+                  height: rowHeight,
+                  backgroundColor: getCellBackgroundColor(
+                    theme,
+                    isValidDay,
+                    sunday,
+                    saturday,
+                    isHovered && isValidDay
+                  ),
+                  cursor: isValidDay ? "pointer" : "default"
+                }),
+                onClick: () => isValidDay && handleCellClick(monthIndex, day),
+                onMouseEnter: () => isValidDay && setHoveredCell({ month: monthIndex, day }),
+                onMouseLeave: () => setHoveredCell(null),
+                onDragOver: (e) => isValidDay && handleDragOver(e, monthIndex, day),
+                onDragLeave: handleDragLeave,
+                onDrop: (e) => {
+                  if (!isValidDay) return;
+                  if (resizingEvent) {
+                    handleResizeDrop(monthIndex, day);
+                  } else {
+                    handleDrop(e);
+                  }
+                }
+              },
+              day
+            );
+          }),
+          (draggingEvent || resizingEvent) && (dragOverCell == null ? void 0 : dragOverCell.month) === monthIndex && dragOverCell.day <= daysInMonth && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: __spreadProps(__spreadValues({}, styles.dropIndicator), {
+                top: 24 + (dragOverCell.day - 1) * rowHeight,
+                height: rowHeight
+              }),
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.dropIndicatorInner })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.eventBarContainer, children: [
+            spans.map((span) => {
+              const laneIndex = laneMap.get(span.event.id) || 0;
+              const laneWidth = 100 / laneCount;
+              const left = laneIndex * laneWidth;
+              const isDraggingThis = (draggingEvent == null ? void 0 : draggingEvent.id) === span.event.id;
+              const isResizingThis = (resizingEvent == null ? void 0 : resizingEvent.event.id) === span.event.id;
+              let displaySpan = span;
+              if (isResizingThis && resizePreviewSpans) {
+                const previewSpan = resizePreviewSpans.get(monthIndex);
+                if (previewSpan) {
+                  displaySpan = previewSpan;
+                } else {
+                  return null;
+                }
+              }
+              const displayStartDay = displaySpan.startDay;
+              const displayEndDay = displaySpan.endDay;
+              const top = (displayStartDay - 1) * rowHeight + 2;
+              const height = (displayEndDay - displayStartDay + 1) * rowHeight - 4;
+              const spanDays = displayEndDay - displayStartDay + 1;
+              const isInteractive = !draggingEvent && !resizingEvent;
+              const isHovered = hoveredEventBar === span.event.id;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: __spreadProps(__spreadValues({}, styles.eventBar), {
+                    top,
+                    left: `${left}%`,
+                    width: `calc(${laneWidth}% - 4px)`,
+                    height,
+                    backgroundColor: getEventColor(span.event),
+                    borderRadius: `${span.isStart ? 4 : 0}px ${span.isStart ? 4 : 0}px ${span.isEnd ? 4 : 0}px ${span.isEnd ? 4 : 0}px`,
+                    opacity: isDraggingThis ? 0.3 : 1,
+                    border: isResizingThis ? "2px dashed rgba(255, 255, 255, 0.8)" : "none",
+                    zIndex: isResizingThis ? 30 : isHovered ? 50 : 10,
+                    filter: isHovered ? "brightness(1.1)" : "none",
+                    pointerEvents: isInteractive ? "auto" : "none"
+                  }),
+                  draggable: true,
+                  onDragStart: (e) => handleDragStart(
+                    e,
+                    span.event,
+                    monthIndex,
+                    span.startDay
+                  ),
+                  onDragEnd: handleDragEnd,
+                  onMouseEnter: (e) => {
+                    setHoveredEventBar(span.event.id);
+                    const rect = e.currentTarget.getBoundingClientRect();
+                    setHoveredEvent({
+                      event: span.event,
+                      x: rect.right + 8,
+                      y: rect.top
+                    });
+                  },
+                  onMouseLeave: () => {
+                    setHoveredEventBar(null);
+                    setHoveredEvent(null);
+                  },
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onEventClick == null ? void 0 : onEventClick(span.event);
+                  },
+                  children: [
+                    !span.isStart && /* @__PURE__ */ jsxRuntime.jsx("div", { style: __spreadValues(__spreadValues({}, styles.indicator), styles.indicatorTop), children: "\u25B2" }),
+                    span.isStart && spanDays >= 2 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.verticalTitle, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        style: __spreadProps(__spreadValues({}, styles.truncate), {
+                          maxHeight: "100%",
+                          padding: "0 2px"
+                        }),
+                        children: span.event.title
+                      }
+                    ) }),
+                    span.isStart && spanDays === 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.horizontalTitle, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles.truncate, children: span.event.title }) }),
+                    !span.isEnd && /* @__PURE__ */ jsxRuntime.jsx("div", { style: __spreadValues(__spreadValues({}, styles.indicator), styles.indicatorBottom), children: "\u25BC" }),
+                    span.event.endDate && isInteractive && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      span.isStart && /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          style: __spreadProps(__spreadValues(__spreadValues({}, styles.resizeHandle), styles.resizeHandleTop), {
+                            opacity: (hoveredResizeHandle == null ? void 0 : hoveredResizeHandle.eventId) === span.event.id && (hoveredResizeHandle == null ? void 0 : hoveredResizeHandle.edge) === "start" ? 1 : 0
+                          }),
+                          draggable: true,
+                          onDragStart: (e) => {
+                            e.stopPropagation();
+                            handleResizeStart(e, span.event, "start");
+                          },
+                          onDragEnd: handleResizeEnd,
+                          onMouseEnter: () => setHoveredResizeHandle({
+                            eventId: span.event.id,
+                            edge: "start"
+                          }),
+                          onMouseLeave: () => setHoveredResizeHandle(null)
+                        }
+                      ),
+                      span.isEnd && /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          style: __spreadProps(__spreadValues(__spreadValues({}, styles.resizeHandle), styles.resizeHandleBottom), {
+                            opacity: (hoveredResizeHandle == null ? void 0 : hoveredResizeHandle.eventId) === span.event.id && (hoveredResizeHandle == null ? void 0 : hoveredResizeHandle.edge) === "end" ? 1 : 0
+                          }),
+                          draggable: true,
+                          onDragStart: (e) => {
+                            e.stopPropagation();
+                            handleResizeStart(e, span.event, "end");
+                          },
+                          onDragEnd: handleResizeEnd,
+                          onMouseEnter: () => setHoveredResizeHandle({
+                            eventId: span.event.id,
+                            edge: "end"
+                          }),
+                          onMouseLeave: () => setHoveredResizeHandle(null)
+                        }
+                      )
+                    ] })
+                  ]
+                },
+                span.event.id
+              );
+            }),
+            resizingEvent && resizePreviewSpans && resizePreviewSpans.has(monthIndex) && !spans.some((s) => s.event.id === resizingEvent.event.id) && (() => {
+              const previewSpan = resizePreviewSpans.get(monthIndex);
+              let originalLaneIndex = 0;
+              for (let m = 0; m < 12; m++) {
+                const lane = laneMaps[m].get(resizingEvent.event.id);
+                if (lane !== void 0) {
+                  originalLaneIndex = lane;
+                  break;
+                }
+              }
+              const previewLaneCount = maxLanes[monthIndex];
+              const laneWidth = 100 / previewLaneCount;
+              const left = Math.min(originalLaneIndex, previewLaneCount - 1) * laneWidth;
+              const top = (previewSpan.startDay - 1) * rowHeight + 2;
+              const height = (previewSpan.endDay - previewSpan.startDay + 1) * rowHeight - 4;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: __spreadProps(__spreadValues({}, styles.eventBar), {
+                    top,
+                    left: `${left}%`,
+                    width: `calc(${laneWidth}% - 4px)`,
+                    height,
+                    backgroundColor: getEventColor(resizingEvent.event),
+                    borderRadius: `${previewSpan.isStart ? 4 : 0}px ${previewSpan.isStart ? 4 : 0}px ${previewSpan.isEnd ? 4 : 0}px ${previewSpan.isEnd ? 4 : 0}px`,
+                    border: "2px dashed rgba(255, 255, 255, 0.8)",
+                    opacity: 0.7,
+                    zIndex: 30
+                  }),
+                  children: [
+                    !previewSpan.isStart && /* @__PURE__ */ jsxRuntime.jsx("div", { style: __spreadValues(__spreadValues({}, styles.indicator), styles.indicatorTop), children: "\u25B2" }),
+                    !previewSpan.isEnd && /* @__PURE__ */ jsxRuntime.jsx("div", { style: __spreadValues(__spreadValues({}, styles.indicator), styles.indicatorBottom), children: "\u25BC" })
+                  ]
+                },
+                `preview-${resizingEvent.event.id}`
+              );
+            })()
+          ] })
+        ] }, monthIndex);
+      })
+    ] }),
+    hoveredEvent && !draggingEvent && !resizingEvent && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: __spreadProps(__spreadValues({}, styles.tooltip), {
+          left: hoveredEvent.x,
+          top: hoveredEvent.y
+        }),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.tooltipContent, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.tooltipTitle, children: hoveredEvent.event.title }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.tooltipDate, children: [
+            hoveredEvent.event.date.toLocaleDateString("ja-JP", {
+              month: "short",
+              day: "numeric",
+              weekday: "short"
+            }),
+            hoveredEvent.event.endDate && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              " \u301C ",
+              hoveredEvent.event.endDate.toLocaleDateString("ja-JP", {
+                month: "short",
+                day: "numeric",
+                weekday: "short"
+              })
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    pendingMove && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.dialogOverlay, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.dialogContent, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: styles.dialogTitle, children: pendingMove.isResize ? "\u671F\u9593\u3092\u5909\u66F4\u3057\u307E\u3059\u304B\uFF1F" : "\u4E88\u5B9A\u3092\u79FB\u52D5\u3057\u307E\u3059\u304B\uFF1F" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.dialogBody, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.dialogEventTitle, children: pendingMove.event.title }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 4 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles.dialogDateLabel, children: "\u5909\u66F4\u524D\uFF1A" }),
+          pendingMove.event.date.toLocaleDateString("ja-JP", {
+            month: "long",
+            day: "numeric",
+            weekday: "short"
+          }),
+          pendingMove.event.endDate && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            " \u301C ",
+            pendingMove.event.endDate.toLocaleDateString("ja-JP", {
+              month: "long",
+              day: "numeric",
+              weekday: "short"
+            })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 4 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles.dialogDateLabel, children: "\u5909\u66F4\u5F8C\uFF1A" }),
+          pendingMove.newStartDate.toLocaleDateString("ja-JP", {
+            month: "long",
+            day: "numeric",
+            weekday: "short"
+          }),
+          pendingMove.newEndDate && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            " \u301C ",
+            pendingMove.newEndDate.toLocaleDateString("ja-JP", {
+              month: "long",
+              day: "numeric",
+              weekday: "short"
+            })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.dialogButtons, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleCancelMove,
+            style: __spreadProps(__spreadValues({}, styles.dialogCancelButton), {
+              backgroundColor: hoveredCancelButton ? theme.bgGray100 : "transparent"
+            }),
+            onMouseEnter: () => setHoveredCancelButton(true),
+            onMouseLeave: () => setHoveredCancelButton(false),
+            children: "\u30AD\u30E3\u30F3\u30BB\u30EB"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleConfirmMove,
+            style: __spreadProps(__spreadValues({}, styles.dialogConfirmButton), {
+              backgroundColor: hoveredConfirmButton ? theme.buttonPrimaryHover : theme.buttonPrimary
+            }),
+            onMouseEnter: () => setHoveredConfirmButton(true),
+            onMouseLeave: () => setHoveredConfirmButton(false),
+            children: pendingMove.isResize ? "\u5909\u66F4\u3059\u308B" : "\u79FB\u52D5\u3059\u308B"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+
+exports.YearlyCalendar = YearlyCalendar;
+exports.createStyles = createStyles;
+exports.defaultTheme = defaultTheme;
+exports.mergeTheme = mergeTheme;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map