@chenzy-design/svelte 0.1.0 → 0.2.1

package/src/calendar/Calendar.svelte

@@ -1,1344 +0,0 @@
-<!--
-  Calendar — see specs/components/show/Calendar.spec.md
-  月/周/日视图日历：日格网格 + 事件展示与 +N 折叠，today/selected/outside/weekend/disabled 态。
-  mode='month'(6×7) | 'week'(1×7) | 'day'(单日时间轴，纵向小时段)；selectionMode='single'(选中日) | 'range'(范围选择，起止+区间高亮+hover 预览)。
-  day 模式：dayStartHour~dayEndHour 逐小时一行，带时间事件按起始小时入对应时段、全天/跨天延续事件入顶部「全天」区（纯派生 timelineForDay，纯 CSS 布局）。
-  受控 value(锚点)/selectedDate/rangeValue 不回写，仅 onChange/onSelect/onRangeChange/onDateClick/onMoreClick 通知。
-  复用 @chenzy-design/core 的纯日期/分组算法（getMonthGrid/getWeekGrid/getDayHours/addMonths/addWeeks/addDays/timelineForDay/gridFocusMove…），不重复实现。
-  roving 键盘焦点：网格内仅活动格 tabindex=0，方向键(←→天/↑↓周/PageUp-Down月/Home-End周首末)移动焦点，跨月/周自动翻页并落焦，Enter/Space 选中（纯 gridFocusMove 派生 + 命令式 focus）。
-  popup 弹层模式：渲染 trigger，日历门户浮出（复用 _floating），外部点击/Esc 关闭(useDismiss)并归还焦点。
-  虚拟化：day 视图小时时间轴按阈值用 core fixedRange 视口渲染（滚动监听命令式 + cleanup，红线 #3）。
--->
-<script lang="ts">
-  import { untrack, tick, type Snippet } from 'svelte';
-  import {
-    getMonthGrid,
-    getWeekGrid,
-    getDayHours,
-    weekdayOrder,
-    isSameDay,
-    startOfDay,
-    addMonths,
-    addWeeks,
-    addDays,
-    groupEventsByDays,
-    timelineForDay,
-    dayKey,
-    isPastDay,
-    gridFocusMove,
-    fixedRange,
-    useDismiss,
-    useLiveAnnouncer,
-    type GridFocusKey,
-    type CalendarEvent,
-    type Placement,
-  } from '@chenzy-design/core';
-  import { floating } from '../_floating/use-floating.js';
-  import { useLocale } from '../locale-provider/index.js';
-
-  type WeekStart = 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  type Mode = 'month' | 'week' | 'day';
-  type SelectionMode = 'single' | 'range';
-  type RangeValue = [Date, Date];
-
-  interface Props {
-    value?: Date;
-    defaultValue?: Date;
-    mode?: Mode;
-    selectionMode?: SelectionMode;
-    events?: CalendarEvent[];
-    weekStartsOn?: WeekStart;
-    maxEventsPerDay?: number;
-    dayStartHour?: number;
-    dayEndHour?: number;
-    weekendDays?: number[];
-    markWeekend?: boolean;
-    disabledDate?: (date: Date) => boolean;
-    selectedDate?: Date;
-    defaultSelectedDate?: Date;
-    rangeValue?: RangeValue | null;
-    defaultRangeValue?: RangeValue | null;
-    locale?: string;
-    onChange?: (info: { value: Date }) => void;
-    onSelect?: (info: { date: Date }) => void;
-    onRangeChange?: (info: { range: RangeValue }) => void;
-    onDateClick?: (info: { date: Date }) => void;
-    onMoreClick?: (info: { date: Date; events: CalendarEvent[] }) => void;
-    /** 点击/键盘激活事件块（spec §a11y：事件块 role=button + Enter/Space 触发）。 */
-    onEventClick?: (info: { event: CalendarEvent; nativeEvent: Event }) => void;
-    /** 关闭回调（popup 模式） */
-    onClose?: () => void;
-    dateCell?: Snippet<
-      [{ date: Date; events: CalendarEvent[]; isToday: boolean; isOutside: boolean; disabled: boolean }]
-    >;
-    event?: Snippet<[{ event: CalendarEvent }]>;
-    /** 自定义头部内容，替换默认头部 */
-    header?: Snippet;
-    /** 自定义单元格额外内容 (dateString: 'YYYY-MM-DD', date: Date) */
-    dateGridRender?: (dateString: string, date: Date) => Snippet | null | undefined;
-    /** 自定义全天事件区域渲染 */
-    allDayEventsRender?: (events: CalendarEvent[]) => Snippet | null | undefined;
-    /** 自定义时间文案 (hour: 0-23) */
-    renderTimeDisplay?: (hour: number) => string;
-    /** 自定义日期文案 */
-    renderDateDisplay?: (date: Date) => string;
-    /** 是否显示当前时间红线（day/week 视图，默认 true） */
-    showCurrTime?: boolean;
-    /** day/week 视图默认滚动高度（px，默认 400） */
-    scrollTop?: number;
-    /** 事件块最小高度（px） */
-    minEventHeight?: number;
-    /** 日历整体宽度 */
-    width?: number | string;
-    /** 日历整体高度 */
-    height?: number | string;
-    /** 范围选择的日期区间（mode='range' 时用于初始化，同 rangeValue） */
-    range?: [Date, Date] | null;
-    /** 受控展示锚点（Semi API: displayValue，等同于 value） */
-    displayValue?: Date;
-    ariaLabel?: string;
-    // --- 弹层模式 (popup) ---
-    /** 弹层模式：渲染 trigger，日历作为浮层弹出（复用 _floating 门户定位） */
-    popup?: boolean;
-    /** 受控展开态（popup 模式），受控时不回写仅 onOpenChange (红线 #1) */
-    open?: boolean;
-    /** 非受控初始展开态 */
-    defaultOpen?: boolean;
-    /** 展开态变化回调 */
-    onOpenChange?: (info: { open: boolean }) => void;
-    /** 浮层相对 trigger 的位置 */
-    placement?: Placement;
-    /** 浮层门户挂载容器（默认 document.body） */
-    getContainer?: () => HTMLElement | null | undefined;
-    /** trigger 自定义内容（popup 模式）；不传则渲染默认按钮显示标题 */
-    trigger?: Snippet<[{ open: boolean; toggle: () => void }]>;
-    // --- 虚拟化 (day 视图时间轴) ---
-    /**
-     * day 视图小时时间轴虚拟化：当行数 ≥ virtualizeThreshold 时仅渲染视口行。
-     * 'auto'（默认）按阈值自动；true 强制；false 关闭。
-     */
-    virtualizeDay?: boolean | 'auto';
-    /** 触发虚拟化的最少行数（virtualizeDay='auto' 时生效） */
-    virtualizeThreshold?: number;
-    /** day 视图时间轴视口高度（px，虚拟化时滚动容器高度） */
-    timelineViewportHeight?: number;
-  }
-
-  let {
-    value,
-    defaultValue,
-    displayValue,
-    mode = 'month',
-    selectionMode = 'single',
-    events = [],
-    weekStartsOn = 0,
-    maxEventsPerDay = 3,
-    dayStartHour = 0,
-    dayEndHour = 23,
-    weekendDays = [0, 6],
-    markWeekend = true,
-    disabledDate,
-    selectedDate,
-    defaultSelectedDate,
-    rangeValue,
-    defaultRangeValue,
-    range,
-    locale = 'zh-CN',
-    onChange,
-    onSelect,
-    onRangeChange,
-    onDateClick,
-    onMoreClick,
-    onEventClick,
-    onClose,
-    dateCell,
-    event,
-    header,
-    dateGridRender,
-    allDayEventsRender,
-    renderTimeDisplay,
-    renderDateDisplay,
-    showCurrTime = true,
-    scrollTop = 400,
-    minEventHeight,
-    width,
-    height,
-    ariaLabel,
-    popup = false,
-    open,
-    defaultOpen = false,
-    onOpenChange,
-    placement = 'bottomStart',
-    getContainer,
-    trigger,
-    virtualizeDay = 'auto',
-    virtualizeThreshold = 18,
-    timelineViewportHeight = 360,
-  }: Props = $props();
-
-  // displayValue 作为 value 的别名（Semi API），优先级低于 value
-  const resolvedValue = $derived(value ?? displayValue);
-
-  // range 作为 rangeValue 的别名（Semi API），优先级低于 rangeValue
-  const resolvedRangeValue = $derived(rangeValue ?? range);
-
-  const loc = useLocale();
-  // 单例 live region（polite）：切月/年、移动焦点、选中日期时播报可读文本（红线 #3：命令式）。
-  const announcer = useLiveAnnouncer();
-
-  // 一次性常量：今天（render 用于派生 today/past 态，不放 $state 反复 new）
-  const today = new Date();
-
-  // --- 锚点 value：受控不回写 (红线 #1) ---
-  // resolvedValue = value ?? displayValue（displayValue 是 Semi API 的别名）
-  function initValue(): Date {
-    return defaultValue ?? new Date();
-  }
-  const isValueControlled = $derived(resolvedValue !== undefined);
-  let innerValue = $state<Date>(initValue());
-  const currentValue = $derived(isValueControlled ? (resolvedValue as Date) : innerValue);
-
-  // --- 选中日 selectedDate：受控不回写 (红线 #1) ---
-  function initSelected(): Date | null {
-    return defaultSelectedDate ?? null;
-  }
-  const isSelectedControlled = $derived(selectedDate !== undefined);
-  let innerSelected = $state<Date | null>(initSelected());
-  const currentSelected = $derived(
-    isSelectedControlled ? (selectedDate as Date) : innerSelected,
-  );
-
-  // --- 选中范围 rangeValue：受控不回写 (红线 #1) ---
-  function normRange(r: RangeValue | null | undefined): RangeValue | null {
-    if (!r) return null;
-    const a = startOfDay(r[0]);
-    const b = startOfDay(r[1]);
-    return a.getTime() <= b.getTime() ? [a, b] : [b, a];
-  }
-  // resolvedRangeValue = rangeValue ?? range（range 是 Semi API 的别名）
-  const isRangeControlled = $derived(resolvedRangeValue !== undefined);
-  let innerRange = $state<RangeValue | null>(untrack(() => normRange(defaultRangeValue)));
-  const currentRange = $derived(
-    isRangeControlled ? normRange(resolvedRangeValue) : innerRange,
-  );
-
-  // --- range 选择状态机：'start'=待选起点；'end'=已选起点待选终点 ---
-  let phase = $state<'start' | 'end'>('start');
-  let pendingStart = $state<Date | null>(null);
-  let previewEnd = $state<Date | null>(null);
-
-  // --- 弹层展开态：受控不回写仅 onOpenChange (红线 #1) ---
-  const isOpenControlled = $derived(open !== undefined);
-  let innerOpen = $state(untrack(() => defaultOpen));
-  const isOpen = $derived(isOpenControlled ? (open as boolean) : innerOpen);
-  function setOpen(next: boolean) {
-    if (next === isOpen) return;
-    if (!isOpenControlled) innerOpen = next;
-    onOpenChange?.({ open: next });
-  }
-  function toggleOpen() {
-    setOpen(!isOpen);
-  }
-
-  // --- roving 焦点：被聚焦的日期（纯 $state，网格只有一个 tabindex=0 的格） ---
-  // 初值跟随锚点；用户方向键移动时更新，跨月/周则锚点随动重渲染网格。
-  let focusedDate = $state<Date | null>(null);
-  // 标记下一次重渲染后需把 DOM 焦点落到 focusedDate 对应的格上
-  let pendingFocus = $state(false);
-
-  let rootEl = $state<HTMLElement | null>(null);
-  let triggerEl = $state<HTMLElement | null>(null);
-  let panelEl = $state<HTMLElement | null>(null);
-
-  // --- 网格与分组：全部从 props/本地 $state 派生 (红线 #2) ---
-  // day 模式不需要日格网格；给出空数组避免下游再分支
-  const cells = $derived(
-    mode === 'day'
-      ? []
-      : mode === 'week'
-        ? getWeekGrid(currentValue, weekStartsOn)
-        : getMonthGrid(currentValue, weekStartsOn),
-  );
-  const weeks = $derived(
-    mode === 'week'
-      ? [cells]
-      : mode === 'day'
-        ? []
-        : Array.from({ length: 6 }, (_, i) => cells.slice(i * 7, (i + 1) * 7)),
-  );
-  const dayMap = $derived(
-    groupEventsByDays(
-      events,
-      cells.map((c) => c.date),
-      maxEventsPerDay,
-    ),
-  );
-
-  // --- day 视图：单日时间轴（纯派生，红线 #2/#3） ---
-  const hourSlots = $derived(
-    mode === 'day' ? getDayHours(currentValue, dayStartHour, dayEndHour) : [],
-  );
-  const dayTimeline = $derived(
-    mode === 'day'
-      ? timelineForDay(events, currentValue, dayStartHour, dayEndHour)
-      : { allDay: [], byHour: new Map<number, CalendarEvent[]>() },
-  );
-
-  // --- day 时间轴虚拟化（复用 core fixedRange，红线 #2 派生 / #3 滚动监听命令式）---
-  const ROW_H = 40; // 与 --cd-calendar-hour-min-h 默认值对齐（固定行高视口渲染）
-  const useVirtual = $derived(
-    mode === 'day' &&
-      (virtualizeDay === true ||
-        (virtualizeDay === 'auto' && hourSlots.length >= virtualizeThreshold)),
-  );
-  let timelineScrollTop = $state(0);
-  // 视口可见行区间（含 overscan），仅虚拟化时计算
-  const visibleRange = $derived(
-    useVirtual
-      ? fixedRange(timelineScrollTop, timelineViewportHeight, ROW_H, hourSlots.length, 3)
-      : { startIndex: 0, endIndex: hourSlots.length },
-  );
-  const visibleSlots = $derived(
-    useVirtual ? hourSlots.slice(visibleRange.startIndex, visibleRange.endIndex) : hourSlots,
-  );
-  // 上/下空白撑高，保证滚动条与 hour 行绝对位置正确
-  const padTop = $derived(useVirtual ? visibleRange.startIndex * ROW_H : 0);
-  const totalHeight = $derived(useVirtual ? hourSlots.length * ROW_H : 0);
-
-  // 命令式滚动监听 + cleanup（红线 #3）：只在虚拟化时绑定
-  let timelineEl = $state<HTMLElement | null>(null);
-
-  // scrollTop：day 视图初始滚动位置（命令式，红线 #3）
-  $effect(() => {
-    if (mode !== 'day' || !timelineEl) return;
-    // 使用 untrack 避免把 scrollTop prop 加入 effect 依赖，只在 timelineEl mount 时执行一次
-    const top = scrollTop;
-    timelineEl.scrollTop = top;
-  });
-
-  // showCurrTime：当前时间红线，每分钟更新一次（命令式定时器，红线 #3）
-  let currTimePercent = $state<number | null>(null);
-  $effect(() => {
-    if (mode !== 'day' || !showCurrTime) {
-      currTimePercent = null;
-      return;
-    }
-    const compute = () => {
-      const now = new Date();
-      const h = now.getHours();
-      const m = now.getMinutes();
-      const totalHours = dayEndHour - dayStartHour + 1;
-      if (h < dayStartHour || h > dayEndHour) {
-        currTimePercent = null;
-        return;
-      }
-      currTimePercent = ((h - dayStartHour + m / 60) / totalHours) * 100;
-    };
-    compute();
-    // 剩余秒数到下一分钟
-    const now = new Date();
-    const msToNextMin = (60 - now.getSeconds()) * 1000 - now.getMilliseconds();
-    let timer: ReturnType<typeof setTimeout>;
-    let interval: ReturnType<typeof setInterval>;
-    timer = setTimeout(() => {
-      compute();
-      interval = setInterval(compute, 60_000);
-    }, msToNextMin);
-    return () => {
-      clearTimeout(timer);
-      clearInterval(interval);
-    };
-  });
-  $effect(() => {
-    if (!useVirtual || !timelineEl) return;
-    const el = timelineEl;
-    let frame = 0;
-    const onScroll = () => {
-      if (frame) return;
-      frame = requestAnimationFrame(() => {
-        frame = 0;
-        timelineScrollTop = el.scrollTop;
-      });
-    };
-    el.addEventListener('scroll', onScroll, { passive: true });
-    timelineScrollTop = el.scrollTop;
-    return () => {
-      if (frame) cancelAnimationFrame(frame);
-      el.removeEventListener('scroll', onScroll);
-    };
-  });
-
-  // --- Intl 格式化 ---
-  const titleFormatter = $derived(
-    new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long' }),
-  );
-  const weekdayFormatter = $derived(new Intl.DateTimeFormat(locale, { weekday: 'short' }));
-  // week 模式标题：本周首日 ~ 末日（同月则只展示一次月份）
-  const rangeTitleFormatter = $derived(
-    new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long', day: 'numeric' }),
-  );
-  const dayTitleFormatter = $derived(new Intl.DateTimeFormat(locale, { day: 'numeric' }));
-  const weekTitle = $derived.by(() => {
-    const first = cells[0]?.date;
-    const last = cells[cells.length - 1]?.date;
-    if (!first || !last) return '';
-    const startText = rangeTitleFormatter.format(first);
-    const endText =
-      first.getMonth() === last.getMonth() && first.getFullYear() === last.getFullYear()
-        ? dayTitleFormatter.format(last)
-        : rangeTitleFormatter.format(last);
-    return `${startText} – ${endText}`;
-  });
-  // day 模式标题：完整日期（含星期）
-  const dayTitleFullFormatter = $derived(
-    new Intl.DateTimeFormat(locale, {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-      weekday: 'long',
-    }),
-  );
-  // 时间轴每行的小时标签（如 09:00）
-  const hourLabelFormatter = $derived(
-    new Intl.DateTimeFormat(locale, { hour: '2-digit', minute: '2-digit', hour12: false }),
-  );
-  const title = $derived(
-    mode === 'week'
-      ? weekTitle
-      : mode === 'day'
-        ? dayTitleFullFormatter.format(currentValue)
-        : titleFormatter.format(currentValue),
-  );
-
-  // 星期表头：用首周 7 格的 date 生成名称（顺序与 weekStartsOn 一致）
-  const weekdayOrderList = $derived(weekdayOrder(weekStartsOn));
-  const weekdayNames = $derived(
-    cells.slice(0, 7).map((c) => weekdayFormatter.format(c.date)),
-  );
-
-  // --- roving 焦点目标（纯派生，红线 #2）---
-  // 网格里唯一获得 tabindex=0 的「活动格」：优先用户已聚焦日期，否则选中日/今天/锚点。
-  // 若 focusedDate 不在当前网格（跨月翻页后），仍以 focusedDate 为准——它就是要落焦的格。
-  const activeDate = $derived.by<Date>(() => {
-    if (focusedDate) return focusedDate;
-    if (selectionMode === 'single' && currentSelected) return currentSelected;
-    const inGridToday = cells.some((c) => isSameDay(c.date, today));
-    if (inGridToday) return today;
-    // 月视图回退到当月 1 号所在的格，周/日回退到锚点
-    return mode === 'month' ? startOfDay(new Date(currentValue.getFullYear(), currentValue.getMonth(), 1)) : currentValue;
-  });
-  function isActiveCell(date: Date): boolean {
-    return isSameDay(date, activeDate);
-  }
-
-  // --- 状态写入：仅非受控写 inner，受控只回调 (红线 #1) ---
-  function setAnchor(next: Date) {
-    if (!isValueControlled) innerValue = next;
-    onChange?.({ value: next });
-  }
-
-  function step(delta: number): Date {
-    if (mode === 'day') return addDays(currentValue, delta);
-    if (mode === 'week') return addWeeks(currentValue, delta);
-    return addMonths(currentValue, delta);
-  }
-  // 切月/年/今日：把焦点带到新锚点并 polite 播报其可读全文（formatter 仅依赖 locale，可安全用于任意日期）。
-  function announceFocusDate(date: Date) {
-    announcer.announce(dayTitleFullFormatter.format(date));
-  }
-  function goPrev() {
-    const next = step(-1);
-    setAnchor(next);
-    announceFocusDate(next);
-  }
-  function goNext() {
-    const next = step(1);
-    setAnchor(next);
-    announceFocusDate(next);
-  }
-  function goToday() {
-    const next = new Date();
-    setAnchor(next);
-    announceFocusDate(next);
-  }
-
-  function setSelected(date: Date) {
-    if (!isSelectedControlled) innerSelected = date;
-    onSelect?.({ date });
-    // 选中日期 polite 播报可读全文。
-    announcer.announce(
-      loc().t('Calendar.selectedDateAnnounce', { date: dayTitleFullFormatter.format(date) }),
-    );
-  }
-
-  function setRange(next: RangeValue) {
-    if (!isRangeControlled) innerRange = next;
-    onRangeChange?.({ range: next });
-  }
-
-  function isDisabled(date: Date): boolean {
-    return disabledDate?.(date) ?? false;
-  }
-
-  // range 选择：点第一天设起、第二天设止（排序后提交）
-  function onRangeActivate(date: Date) {
-    const day = startOfDay(date);
-    if (phase === 'start') {
-      pendingStart = day;
-      previewEnd = day;
-      phase = 'end';
-      return;
-    }
-    const a = pendingStart ?? day;
-    const next: RangeValue =
-      a.getTime() <= day.getTime() ? [a, day] : [day, a];
-    setRange(next);
-    phase = 'start';
-    pendingStart = null;
-    previewEnd = null;
-  }
-
-  function onCellActivate(date: Date) {
-    if (isDisabled(date)) return;
-    onDateClick?.({ date });
-    if (selectionMode === 'range') {
-      onRangeActivate(date);
-    } else {
-      setSelected(date);
-    }
-  }
-
-  function onCellHover(date: Date) {
-    if (selectionMode === 'range' && phase === 'end' && !isDisabled(date)) {
-      previewEnd = startOfDay(date);
-    }
-  }
-
-  const NAV_KEYS = new Set<string>([
-    'ArrowLeft',
-    'ArrowRight',
-    'ArrowUp',
-    'ArrowDown',
-    'PageUp',
-    'PageDown',
-    'Home',
-    'End',
-  ]);
-
-  // 将 DOM 焦点落到 activeDate 对应的格（重渲染后调用，命令式 + 无监听需 cleanup）
-  async function focusActiveCell() {
-    await tick();
-    const host = rootEl ?? panelEl;
-    if (!host) return;
-    const el = host.querySelector<HTMLElement>('.cd-calendar__cell--active');
-    el?.focus();
-  }
-
-  // 网格级 roving 键盘导航（WAI-ARIA grid 模式，红线 #2 派生用纯 gridFocusMove）
-  function onGridKeydown(e: KeyboardEvent) {
-    const key = e.key;
-    if (key === 'Enter' || key === ' ') {
-      e.preventDefault();
-      onCellActivate(activeDate);
-      return;
-    }
-    // Shift+PageUp/Down：切年（gridFocusMove 不含年级，组件层 ±12 月）
-    if (e.shiftKey && (key === 'PageUp' || key === 'PageDown')) {
-      e.preventDefault();
-      const nextYearDate = addMonths(activeDate, key === 'PageUp' ? -12 : 12);
-      focusedDate = nextYearDate;
-      const stillVisible = cells.some((c) => isSameDay(c.date, nextYearDate));
-      if (!stillVisible) setAnchor(nextYearDate);
-      pendingFocus = true;
-      announceFocusDate(nextYearDate);
-      return;
-    }
-    if (!NAV_KEYS.has(key)) return;
-    e.preventDefault();
-    const next = gridFocusMove(
-      activeDate,
-      key as GridFocusKey,
-      mode === 'week' ? 'week' : 'month',
-      weekStartsOn,
-    );
-    if (!next) return;
-    focusedDate = next;
-    // 跨出当前展示月/周：锚点随动，触发网格重渲染（受控锚点只回调，红线 #1）
-    const stillVisible = cells.some((c) => isSameDay(c.date, next));
-    if (!stillVisible) setAnchor(next);
-    pendingFocus = true;
-    announceFocusDate(next);
-  }
-
-  // 焦点落格：activeDate / 网格内容变化后，若有待定焦点则把 DOM 焦点移到活动格
-  $effect(() => {
-    // 依赖 activeDate + cells 确保翻页重渲染后再落焦
-    void activeDate;
-    void cells;
-    if (pendingFocus) {
-      pendingFocus = false;
-      void focusActiveCell();
-    }
-  });
-
-  // --- range 区间端点 / 区间内判定（纯派生，红线 #2） ---
-  const rangeStart = $derived(phase === 'end' ? pendingStart : (currentRange?.[0] ?? null));
-  const rangeEnd = $derived(phase === 'end' ? previewEnd : (currentRange?.[1] ?? null));
-  const span = $derived.by<[number, number] | null>(() => {
-    if (!rangeStart || !rangeEnd) return null;
-    const ta = rangeStart.getTime();
-    const tb = rangeEnd.getTime();
-    return ta <= tb ? [ta, tb] : [tb, ta];
-  });
-
-  function isRangeEdge(date: Date): boolean {
-    if (selectionMode !== 'range') return false;
-    return isSameDay(date, rangeStart) || isSameDay(date, rangeEnd);
-  }
-  function isInRange(date: Date): boolean {
-    if (selectionMode !== 'range' || !span) return false;
-    const t = startOfDay(date).getTime();
-    return t > span[0] && t < span[1];
-  }
-
-  function onMore(date: Date, total: CalendarEvent[]) {
-    onMoreClick?.({ date, events: total });
-  }
-
-  // 事件块激活（点击或 Enter/Space）。阻止冒泡避免连带触发日格选择。
-  function activateEvent(ev: CalendarEvent, e: Event) {
-    e.stopPropagation();
-    if (ev.disabled) return;
-    onEventClick?.({ event: ev, nativeEvent: e });
-  }
-  function onEventKeydown(ev: CalendarEvent, e: KeyboardEvent) {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      activateEvent(ev, e);
-    }
-  }
-
-  // --- popup 外部点击 / Esc 关闭（红线 #3：open 时绑、cleanup 解绑）---
-  $effect(() => {
-    if (!popup || !isOpen || !triggerEl) return;
-    return useDismiss(triggerEl, {
-      onDismiss: (reason) => {
-        setOpen(false);
-        onClose?.();
-        // 仅 Esc 归还焦点到 trigger（外部点击焦点应留在点击处）
-        if (reason === 'esc') {
-          const btn = triggerEl?.querySelector<HTMLElement>(
-            '.cd-calendar-popup__trigger, [data-calendar-trigger]',
-          );
-          (btn ?? triggerEl)?.focus();
-        }
-      },
-      escape: true,
-      outsideClick: true,
-      // 浮层门户到 body，点击浮层内部不算外部
-      extraTargets: [panelEl],
-    });
-  });
-
-  // popup 打开后把焦点落到活动格，关闭后归还 trigger（命令式）
-  $effect(() => {
-    if (!popup) return;
-    if (isOpen) {
-      pendingFocus = true;
-      void focusActiveCell();
-    }
-  });
-
-  function dayNumber(date: Date): number {
-    return date.getDate();
-  }
-
-  function isWeekendDay(date: Date): boolean {
-    return markWeekend && weekendDays.includes(date.getDay());
-  }
-
-  function isTodayDay(date: Date): boolean {
-    return isSameDay(date, today);
-  }
-
-  function isSelectedDay(date: Date): boolean {
-    if (selectionMode === 'range') return false;
-    return isSameDay(date, currentSelected);
-  }
-</script>
-
-{#snippet calendarBody()}
-  {#if header}
-    {@render header()}
-  {:else}
-  <div class="cd-calendar__toolbar">
-    <button
-      type="button"
-      class="cd-calendar__nav"
-      aria-label={loc().t('Calendar.prev')}
-      onclick={goPrev}
-    >
-      <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
-        <path
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M10 3L5 8l5 5"
-        />
-      </svg>
-    </button>
-    <button type="button" class="cd-calendar__today" onclick={goToday}>{loc().t('Calendar.today')}</button>
-    <div class="cd-calendar__title">{renderDateDisplay ? renderDateDisplay(currentValue) : title}</div>
-    <button
-      type="button"
-      class="cd-calendar__nav"
-      aria-label={loc().t('Calendar.next')}
-      onclick={goNext}
-    >
-      <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
-        <path
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M6 3l5 5-5 5"
-        />
-      </svg>
-    </button>
-  </div>
-  {/if}
-
-  {#if mode === 'day'}
-    <div class="cd-calendar__timeline" aria-label={ariaLabel ?? title}>
-      {#if dayTimeline.allDay.length > 0}
-        <div class="cd-calendar__allday">
-          <div class="cd-calendar__allday-label">{loc().t('Calendar.allDay')}</div>
-          {#if allDayEventsRender}
-            {@render allDayEventsRender(dayTimeline.allDay)?.()}
-          {:else}
-          <div class="cd-calendar__allday-events">
-            {#each dayTimeline.allDay as ev (ev.key)}
-              {#if event}
-                {@render event({ event: ev })}
-              {:else}
-                <div
-                  class="cd-calendar__event"
-                  class:cd-calendar__event--disabled={ev.disabled}
-                  style:--cd-calendar-event-accent={ev.color ?? 'var(--cd-calendar-event-default-bg)'}
-                  role="button"
-                  tabindex={ev.disabled ? -1 : 0}
-                  aria-disabled={ev.disabled || undefined}
-                  aria-label={ev.title}
-                  title={ev.title}
-                  onclick={(e) => activateEvent(ev, e)}
-                  onkeydown={(e) => onEventKeydown(ev, e)}
-                >
-                  <span class="cd-calendar__event-bar" aria-hidden="true"></span>
-                  <span class="cd-calendar__event-title">{ev.title}</span>
-                </div>
-              {/if}
-            {/each}
-          </div>
-          {/if}
-        </div>
-      {/if}
-      <div
-        class="cd-calendar__hours"
-        class:cd-calendar__hours--virtual={useVirtual}
-        role="list"
-        bind:this={timelineEl}
-        style:max-block-size={useVirtual ? `${timelineViewportHeight}px` : undefined}
-        style:position="relative"
-      >
-        <!-- showCurrTime 红线：绝对定位，top% 由派生纯函数算出（红线 #2） -->
-        {#if showCurrTime && currTimePercent !== null}
-          <div
-            class="cd-calendar__curr-time"
-            aria-hidden="true"
-            style:top={`${currTimePercent}%`}
-          ></div>
-        {/if}
-        {#if useVirtual}
-          <!-- 撑高占位 + 上空白 padding，仅渲染视口行（复用 core fixedRange）-->
-          <div class="cd-calendar__hours-spacer" style:block-size={`${totalHeight}px`}>
-            <div style:transform={`translateY(${padTop}px)`}>
-              {#each visibleSlots as slot (slot.hour)}
-                {@const hourEvents = dayTimeline.byHour.get(slot.hour) ?? []}
-                <div class="cd-calendar__hour" role="listitem" style:min-block-size={`${ROW_H}px`}>
-                  <div class="cd-calendar__hour-label" aria-hidden="true">
-                    {renderTimeDisplay ? renderTimeDisplay(slot.hour) : hourLabelFormatter.format(slot.date)}
-                  </div>
-                  <div class="cd-calendar__hour-slot">
-                    {#each hourEvents as ev (ev.key)}
-                      {#if event}
-                        {@render event({ event: ev })}
-                      {:else}
-                        <div
-                          class="cd-calendar__event cd-calendar__event--timed"
-                          class:cd-calendar__event--disabled={ev.disabled}
-                          style:--cd-calendar-event-accent={ev.color ?? 'var(--cd-calendar-event-default-bg)'}
-                          style:min-block-size={minEventHeight ? `${minEventHeight}px` : undefined}
-                          role="button"
-                          tabindex={ev.disabled ? -1 : 0}
-                          aria-disabled={ev.disabled || undefined}
-                          aria-label={`${hourLabelFormatter.format(ev.start)} ${ev.title}`}
-                          title={ev.title}
-                          onclick={(e) => activateEvent(ev, e)}
-                          onkeydown={(e) => onEventKeydown(ev, e)}
-                        >
-                          <span class="cd-calendar__event-bar" aria-hidden="true"></span>
-                          <span class="cd-calendar__event-time">{hourLabelFormatter.format(ev.start)}</span>
-                          <span class="cd-calendar__event-title">{ev.title}</span>
-                        </div>
-                      {/if}
-                    {/each}
-                  </div>
-                </div>
-              {/each}
-            </div>
-          </div>
-        {:else}
-          {#each hourSlots as slot (slot.hour)}
-            {@const hourEvents = dayTimeline.byHour.get(slot.hour) ?? []}
-            <div class="cd-calendar__hour" role="listitem">
-              <div class="cd-calendar__hour-label" aria-hidden="true">
-                {renderTimeDisplay ? renderTimeDisplay(slot.hour) : hourLabelFormatter.format(slot.date)}
-              </div>
-              <div class="cd-calendar__hour-slot">
-                {#each hourEvents as ev (ev.key)}
-                  {#if event}
-                    {@render event({ event: ev })}
-                  {:else}
-                    <div
-                      class="cd-calendar__event cd-calendar__event--timed"
-                      class:cd-calendar__event--disabled={ev.disabled}
-                      style:--cd-calendar-event-accent={ev.color ?? 'var(--cd-calendar-event-default-bg)'}
-                      style:min-block-size={minEventHeight ? `${minEventHeight}px` : undefined}
-                      title={ev.title}
-                    >
-                      <span class="cd-calendar__event-bar" aria-hidden="true"></span>
-                      <span class="cd-calendar__event-time">{hourLabelFormatter.format(ev.start)}</span>
-                      <span class="cd-calendar__event-title">{ev.title}</span>
-                    </div>
-                  {/if}
-                {/each}
-              </div>
-            </div>
-          {/each}
-        {/if}
-      </div>
-    </div>
-  {:else}
-  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-  <div
-    class="cd-calendar__grid"
-    role="grid"
-    aria-label={ariaLabel ?? title}
-    tabindex="-1"
-    onkeydown={onGridKeydown}
-  >
-    <div class="cd-calendar__row cd-calendar__row--head" role="row">
-      {#each weekdayNames as name, i (weekdayOrderList[i])}
-        {@const weekend = markWeekend && weekendDays.includes(weekdayOrderList[i] as number)}
-        <div
-          class="cd-calendar__weekday"
-          class:cd-calendar__weekday--weekend={weekend}
-          role="columnheader"
-        >
-          {name}
-        </div>
-      {/each}
-    </div>
-
-    {#each weeks as week, wi (wi)}
-      <div class="cd-calendar__row" role="row">
-        {#each week as cell (dayKey(cell.date))}
-          {@const date = cell.date}
-          {@const outside = !cell.inMonth}
-          {@const disabled = isDisabled(date)}
-          {@const isToday = isTodayDay(date)}
-          {@const selected = isSelectedDay(date)}
-          {@const weekend = isWeekendDay(date)}
-          {@const past = isPastDay(date, today)}
-          {@const rangeEdgeCell = isRangeEdge(date)}
-          {@const inRangeCell = isInRange(date)}
-          {@const active = isActiveCell(date)}
-          {@const dayData = dayMap.get(dayKey(date))}
-          {@const visible = dayData?.visible ?? []}
-          {@const total = dayData?.total ?? []}
-          {@const overflow = dayData?.overflow ?? 0}
-          <!-- 键盘交互由网格容器统一处理（roving + Enter/Space），格本身只响应点击 -->
-          <!-- svelte-ignore a11y_click_events_have_key_events -->
-          <div
-            class="cd-calendar__cell"
-            class:cd-calendar__cell--week={mode === 'week'}
-            class:cd-calendar__cell--today={isToday}
-            class:cd-calendar__cell--selected={selected}
-            class:cd-calendar__cell--range-edge={rangeEdgeCell}
-            class:cd-calendar__cell--in-range={inRangeCell}
-            class:cd-calendar__cell--outside={outside}
-            class:cd-calendar__cell--weekend={weekend}
-            class:cd-calendar__cell--disabled={disabled}
-            class:cd-calendar__cell--past={past}
-            class:cd-calendar__cell--active={active}
-            role="gridcell"
-            tabindex={disabled ? undefined : active ? 0 : -1}
-            aria-selected={selected || rangeEdgeCell || undefined}
-            aria-disabled={disabled || undefined}
-            aria-current={isToday ? 'date' : undefined}
-            onclick={() => onCellActivate(date)}
-            onpointerenter={() => onCellHover(date)}
-          >
-            {#if dateCell}
-              {@render dateCell({ date, events: total, isToday, isOutside: outside, disabled })}
-            {:else}
-              <div class="cd-calendar__date">{dayNumber(date)}</div>
-              {#if dateGridRender}
-                {@const extraSnippet = dateGridRender(dayKey(date), date)}
-                {#if extraSnippet}{@render extraSnippet()}{/if}
-              {/if}
-              <div class="cd-calendar__events">
-                {#each visible as ev (ev.key)}
-                  {#if event}
-                    {@render event({ event: ev })}
-                  {:else}
-                    <div
-                      class="cd-calendar__event"
-                      class:cd-calendar__event--disabled={ev.disabled}
-                      style:--cd-calendar-event-accent={ev.color ?? 'var(--cd-calendar-event-default-bg)'}
-                      role="button"
-                      tabindex={ev.disabled ? -1 : 0}
-                      aria-disabled={ev.disabled || undefined}
-                      aria-label={ev.title}
-                      title={ev.title}
-                      onclick={(e) => activateEvent(ev, e)}
-                      onkeydown={(e) => onEventKeydown(ev, e)}
-                    >
-                      <span class="cd-calendar__event-bar" aria-hidden="true"></span>
-                      <span class="cd-calendar__event-title">{ev.title}</span>
-                    </div>
-                  {/if}
-                {/each}
-                {#if overflow > 0}
-                  <button
-                    type="button"
-                    class="cd-calendar__more"
-                    onclick={(e) => {
-                      e.stopPropagation();
-                      onMore(date, total);
-                    }}
-                  >
-                    {loc().t('Calendar.moreCount', { count: overflow })}
-                  </button>
-                {/if}
-              </div>
-            {/if}
-          </div>
-        {/each}
-      </div>
-    {/each}
-  </div>
-  {/if}
-{/snippet}
-
-{#if popup}
-  <div class="cd-calendar-popup" bind:this={triggerEl}>
-    {#if trigger}
-      {@render trigger({ open: isOpen, toggle: toggleOpen })}
-    {:else}
-      <button
-        type="button"
-        class="cd-calendar-popup__trigger"
-        aria-haspopup="dialog"
-        aria-expanded={isOpen}
-        onclick={toggleOpen}
-      >
-        <span>{title}</span>
-        <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
-          <path fill="currentColor" d="M5 1v1H3.5A1.5 1.5 0 0 0 2 3.5v9A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 12.5 2H11V1h-1v1H6V1H5Zm7.5 4.5v7h-9v-7h9Z" />
-        </svg>
-      </button>
-    {/if}
-    {#if isOpen}
-      <div
-        bind:this={panelEl}
-        class="cd-calendar cd-calendar--popup"
-        role="dialog"
-        aria-label={ariaLabel ?? title}
-        use:floating={{ trigger: triggerEl, placement, offset: 8, autoAdjust: true, getContainer }}
-        style:inline-size={width ? (typeof width === 'number' ? `${width}px` : width) : undefined}
-        style:block-size={height ? (typeof height === 'number' ? `${height}px` : height) : undefined}
-      >
-        {@render calendarBody()}
-      </div>
-    {/if}
-  </div>
-{:else}
-  <div
-    class="cd-calendar"
-    bind:this={rootEl}
-    style:inline-size={width ? (typeof width === 'number' ? `${width}px` : width) : undefined}
-    style:block-size={height ? (typeof height === 'number' ? `${height}px` : height) : undefined}
-  >
-    {@render calendarBody()}
-  </div>
-{/if}
-
-<style>
-  .cd-calendar {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cd-spacing-2);
-    color: var(--cd-calendar-text);
-    background: var(--cd-calendar-bg);
-    border: 1px solid var(--cd-calendar-border);
-    border-radius: var(--cd-calendar-radius);
-    font-size: var(--cd-font-size-body);
-  }
-
-  .cd-calendar__toolbar {
-    display: flex;
-    align-items: center;
-    gap: var(--cd-spacing-2);
-    padding: var(--cd-spacing-2) var(--cd-spacing-3);
-    background: var(--cd-calendar-header-bg);
-    border-bottom: 1px solid var(--cd-calendar-border);
-    border-start-start-radius: var(--cd-calendar-radius);
-    border-start-end-radius: var(--cd-calendar-radius);
-  }
-
-  .cd-calendar__title {
-    flex: 1 1 auto;
-    font-weight: 600;
-  }
-
-  .cd-calendar__nav,
-  .cd-calendar__today {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--cd-spacing-1) var(--cd-spacing-2);
-    color: inherit;
-    background: transparent;
-    border: 1px solid var(--cd-calendar-border);
-    border-radius: var(--cd-calendar-radius);
-    cursor: pointer;
-    font: inherit;
-    transition: background-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
-  }
-  .cd-calendar__nav:hover,
-  .cd-calendar__today:hover {
-    background: var(--cd-calendar-cell-bg-hover);
-  }
-  .cd-calendar__nav:focus-visible,
-  .cd-calendar__today:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--cd-focus-ring);
-  }
-
-  .cd-calendar__grid {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .cd-calendar__row {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-  }
-
-  .cd-calendar__weekday {
-    padding: var(--cd-spacing-1);
-    color: var(--cd-calendar-text-secondary);
-    text-align: center;
-    font-weight: 500;
-    border-block-end: 1px solid var(--cd-calendar-border);
-  }
-  .cd-calendar__weekday--weekend {
-    background: var(--cd-calendar-weekend-bg);
-  }
-
-  .cd-calendar__cell {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cd-spacing-1);
-    min-block-size: var(--cd-calendar-cell-min-h);
-    padding: var(--cd-spacing-1);
-    border-inline-end: 1px solid var(--cd-calendar-border);
-    border-block-end: 1px solid var(--cd-calendar-border);
-    cursor: pointer;
-    outline: none;
-    transition: background-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
-  }
-  .cd-calendar__cell:hover {
-    background: var(--cd-calendar-cell-bg-hover);
-  }
-  .cd-calendar__cell:focus-visible {
-    box-shadow: inset 0 0 0 2px var(--cd-focus-ring);
-  }
-  /* grid roving 焦点容器自身不需可见焦点环（焦点落在活动格） */
-  .cd-calendar__grid:focus {
-    outline: none;
-  }
-
-  .cd-calendar__cell--weekend {
-    background: var(--cd-calendar-weekend-bg);
-  }
-  .cd-calendar__cell--today {
-    background: var(--cd-calendar-today-bg);
-  }
-  .cd-calendar__cell--today .cd-calendar__date {
-    color: var(--cd-calendar-today-fg);
-    font-weight: 700;
-  }
-  .cd-calendar__cell--selected {
-    box-shadow: inset 0 0 0 2px var(--cd-calendar-selected-border);
-  }
-  /* range 区间内：浅底连续填充 */
-  .cd-calendar__cell--in-range {
-    background: var(--cd-calendar-range-bg, var(--cd-calendar-today-bg));
-  }
-  /* range 端点：实心边框高亮（起止） */
-  .cd-calendar__cell--range-edge {
-    background: var(--cd-calendar-range-edge-bg, var(--cd-calendar-today-bg));
-    box-shadow: inset 0 0 0 2px var(--cd-calendar-selected-border);
-  }
-  /* week 模式：单行更高，事件区有更多展示空间 */
-  .cd-calendar__cell--week {
-    min-block-size: var(--cd-calendar-week-cell-min-h, calc(var(--cd-calendar-cell-min-h) * 3));
-  }
-  .cd-calendar__cell--outside .cd-calendar__date {
-    color: var(--cd-calendar-text-secondary);
-  }
-  .cd-calendar__cell--past .cd-calendar__date {
-    opacity: 0.6;
-  }
-  .cd-calendar__cell--disabled {
-    background: var(--cd-calendar-disabled-bg);
-    cursor: not-allowed;
-    background-image: repeating-linear-gradient(
-      45deg,
-      transparent,
-      transparent 4px,
-      var(--cd-calendar-disabled-bg) 4px,
-      var(--cd-calendar-disabled-bg) 8px
-    );
-  }
-  .cd-calendar__cell--disabled:hover {
-    background-color: var(--cd-calendar-disabled-bg);
-  }
-
-  .cd-calendar__date {
-    align-self: flex-end;
-    font-size: var(--cd-font-size-body);
-    line-height: 1.2;
-  }
-
-  .cd-calendar__events {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    min-inline-size: 0;
-  }
-
-  .cd-calendar__event {
-    display: flex;
-    align-items: center;
-    gap: var(--cd-spacing-1);
-    min-inline-size: 0;
-    padding-block: 1px;
-    padding-inline: var(--cd-spacing-1);
-    color: var(--cd-calendar-text);
-    background: var(--cd-calendar-cell-bg-hover);
-    border-radius: var(--cd-calendar-radius);
-    font-size: 0.75rem;
-    line-height: 1.4;
-  }
-  .cd-calendar__event--disabled {
-    opacity: 0.5;
-  }
-  /* 事件块作为 role=button：键盘焦点环可见 */
-  .cd-calendar__event[role='button'] {
-    cursor: pointer;
-    text-align: start;
-  }
-  .cd-calendar__event[role='button']:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--cd-focus-ring);
-  }
-  .cd-calendar__event--disabled[role='button'] {
-    cursor: not-allowed;
-  }
-  .cd-calendar__event-bar {
-    flex: 0 0 auto;
-    inline-size: 3px;
-    align-self: stretch;
-    min-block-size: 0.9em;
-    background: var(--cd-calendar-event-accent, var(--cd-calendar-event-default-bg));
-    border-radius: 2px;
-  }
-  .cd-calendar__event-title {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .cd-calendar__more {
-    align-self: flex-start;
-    padding: 0;
-    color: var(--cd-calendar-more-color);
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    font: inherit;
-    font-size: var(--cd-font-size-caption, 0.85em);
-  }
-  .cd-calendar__more:hover {
-    text-decoration: underline;
-  }
-  .cd-calendar__more:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--cd-focus-ring);
-    border-radius: var(--cd-calendar-radius);
-  }
-
-  /* --- day 视图：单日时间轴 --- */
-  .cd-calendar__timeline {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .cd-calendar__allday {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--cd-spacing-2);
-    padding: var(--cd-spacing-1) var(--cd-spacing-2);
-    border-block-end: 1px solid var(--cd-calendar-border);
-    background: var(--cd-calendar-header-bg);
-  }
-  .cd-calendar__allday-label {
-    flex: 0 0 var(--cd-calendar-hour-label-w, 56px);
-    color: var(--cd-calendar-text-secondary);
-    font-weight: 500;
-    text-align: end;
-  }
-  .cd-calendar__allday-events {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    min-inline-size: 0;
-    flex: 1 1 auto;
-  }
-
-  .cd-calendar__hours {
-    display: flex;
-    flex-direction: column;
-  }
-  .cd-calendar__hour {
-    display: flex;
-    align-items: stretch;
-    gap: var(--cd-spacing-2);
-    min-block-size: var(--cd-calendar-hour-min-h, 40px);
-    border-block-end: 1px solid var(--cd-calendar-border);
-  }
-  .cd-calendar__hour:last-child {
-    border-block-end: none;
-  }
-  .cd-calendar__hour-label {
-    flex: 0 0 var(--cd-calendar-hour-label-w, 56px);
-    padding: var(--cd-spacing-1) var(--cd-spacing-2);
-    color: var(--cd-calendar-text-secondary);
-    text-align: end;
-    font-variant-numeric: tabular-nums;
-    border-inline-end: 1px solid var(--cd-calendar-border);
-  }
-  .cd-calendar__hour-slot {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    flex: 1 1 auto;
-    min-inline-size: 0;
-    padding: var(--cd-spacing-1);
-  }
-  .cd-calendar__event--timed {
-    padding-block: 2px;
-  }
-  .cd-calendar__event-time {
-    flex: 0 0 auto;
-    color: var(--cd-calendar-text-secondary);
-    font-variant-numeric: tabular-nums;
-    font-size: 0.75rem;
-  }
-
-  /* --- 虚拟化时间轴：滚动视口（block 布局，避免 flex 压缩撑高占位）--- */
-  .cd-calendar__hours--virtual {
-    display: block;
-    overflow-y: auto;
-    position: relative;
-  }
-  .cd-calendar__hours-spacer {
-    position: relative;
-    flex: none;
-  }
-
-  /* --- 弹层模式 --- */
-  .cd-calendar-popup {
-    position: relative;
-    display: inline-block;
-  }
-  .cd-calendar-popup__trigger {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--cd-spacing-2);
-    padding: var(--cd-spacing-1) var(--cd-spacing-3);
-    color: var(--cd-calendar-text);
-    background: var(--cd-calendar-bg);
-    border: 1px solid var(--cd-calendar-border);
-    border-radius: var(--cd-calendar-radius);
-    cursor: pointer;
-    font: inherit;
-  }
-  .cd-calendar-popup__trigger:hover {
-    background: var(--cd-calendar-cell-bg-hover);
-  }
-  .cd-calendar-popup__trigger:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--cd-focus-ring);
-  }
-  .cd-calendar--popup {
-    z-index: var(--cd-z-popover, 1050);
-    inline-size: max-content;
-    box-shadow: var(--cd-shadow-elevated, 0 4px 16px rgb(0 0 0 / 0.12));
-  }
-
-  /* showCurrTime 当前时间红线：绝对定位，跨越整个小时列区域 */
-  .cd-calendar__curr-time {
-    position: absolute;
-    inset-inline: 0;
-    block-size: 2px;
-    background: var(--cd-calendar-curr-time-color, var(--cd-color-danger, #f5222d));
-    z-index: 1;
-    pointer-events: none;
-  }
-  .cd-calendar__curr-time::before {
-    content: '';
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-start: var(--cd-calendar-hour-label-w, 56px);
-    transform: translateY(-50%);
-    inline-size: 8px;
-    block-size: 8px;
-    border-radius: 50%;
-    background: var(--cd-calendar-curr-time-color, var(--cd-color-danger, #f5222d));
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .cd-calendar__cell,
-    .cd-calendar__nav,
-    .cd-calendar__today {
-      transition: none;
-    }
-  }
-</style>