@qijenchen/design-system 0.1.0-beta.13 → 0.1.0-beta.130

package/src/components/Calendar/calendar.tsx

@@ -14,22 +14,24 @@ import {
   subMonths,
 } from 'date-fns'
 import { cn } from '@/lib/utils'
+import { CAT_EVENT, CAT_ACCENT, type CategoricalHue } from '@/design-system/tokens/categorical-color'
 import { Button } from '@/design-system/components/Button/button'
-import { SegmentedControl, SegmentedControlItem } from '@/design-system/components/SegmentedControl/segmented-control'
+import { TruncatedText } from '@/design-system/patterns/element-anatomy/truncated-text'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/design-system/components/Tooltip/tooltip'
+import { useTruncated } from '@/design-system/hooks/use-truncated'
 
 /**
- * Calendar — 事件檢視 canvas(月 view MVP)
+ * Calendar — 月事件檢視 canvas
  *
  * 定位:看事件的 page-level canvas,對齊 Notion Calendar / Google Calendar。
- * 完整 spec 見 `event-calendar.spec.md`。
+ * 完整 spec 見 `calendar.spec.md`。
  *
  * ── Layout Family ──
  * 非 4-Family,屬 page-composite(多區塊 Toolbar + Grid + EventTile)。
  *
- * ── MVP scope(本次 session)──
- * - 月 view 完整(toolbar / grid / event tile / today highlight / outside days)
- * - 週 / 日 view 是 tech debt
- * - 拖拉增刪 event 是 tech debt
+ * ── Implemented scope ──
+ * 月 view(toolbar / grid / event tile / today highlight / outside days)。未實作的
+ * week/day/size/drag 能力不預佔公開 prop 或 disabled control。
  *
  * ── 與 DatePicker 的區分 ──
  * DatePicker 是「選日期」form control;Calendar 是「看事件」page canvas。
@@ -46,25 +48,25 @@ export interface CalendarEvent {
   end: string | Date
   allDay?: boolean
   /**
-   * 事件類別色。值為 DS primitive 色名(blue / green / orange / purple / red / yellow)。
-   * 對照 Badge / Tag 的 primitive color variants。
+   * 事件類別色(categorical 色相,1:1 對 `--color-{hue}-*`)。**消費 categorical-color SSOT**,
+   * 與 Tag / Avatar 共用同一組 12 色相。2026-06-04 修:原 `orange` 與 `red` 都誤接 deep-orange;
+   * 改消費 SSOT 後 orange→`--color-orange-*`、red→`--color-red-*`(品牌紅 hue 25),各自獨立。
    */
-  color?: 'blue' | 'green' | 'orange' | 'purple' | 'red' | 'yellow'
+  color?: CategoricalHue
   metadata?: Record<string, unknown>
 }
 
-export type CalendarView = 'month' | 'week' | 'day'
-
 export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
-  /** 當前 view(MVP 只 'month',其餘 view tech debt) */
-  view?: CalendarView
-  defaultView?: CalendarView
-  onViewChange?: (view: CalendarView) => void
-
   /** 聚焦日期(月 view 的那個月) */
   referenceDate?: Date
   defaultReferenceDate?: Date
   onReferenceDateChange?: (date: Date) => void
+  /**
+   * 「今天」的時間來源。預設為呼叫端當下時間；傳入可讓 SSR、測試與視覺快照完全
+   * deterministic。此值同時擁有 today highlight、Today button target，以及未提供
+   * referenceDate/defaultReferenceDate 時的初始月份。
+   */
+  today?: Date
 
   /** 事件資料 */
   events?: CalendarEvent[]
@@ -82,8 +84,6 @@ export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   /** 自訂 event tile 渲染 */
   renderEventTile?: (event: CalendarEvent) => React.ReactNode
 
-  /** size(MVP 只 md;lg 為 tech debt) */
-  size?: 'md' | 'lg'
   className?: string
 
   /** locale(預設 'en-US') */
@@ -92,69 +92,117 @@ export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   /** ARIA labels for chrome controls. Override for i18n. */
   prevAriaLabel?: string
   nextAriaLabel?: string
-  viewToggleAriaLabel?: string
+  /** 月份導覽 <nav> landmark 的 aria-label。Override for i18n. */
+  navAriaLabel?: string
   todayLabel?: string
+  /** 「新事件」CTA 文字。Override for i18n。CTA 僅在傳 `onCreateEvent` 時渲染(spec Toolbar 段)。 */
+  createLabel?: string
 }
 
 // ── Event tile color tokens ─────────────────────────────────────────────────
-// 對齊 Tag / Badge 的 primitive color system(見 `color.spec.md`)
-
-const EVENT_COLOR_CLASSES: Record<NonNullable<CalendarEvent['color']>, string> = {
-  blue: 'bg-[var(--color-blue-1)] text-[var(--color-blue-7)] hover:bg-[var(--color-blue-2)]',
-  green: 'bg-[var(--color-green-1)] text-[var(--color-green-7)] hover:bg-[var(--color-green-2)]',
-  orange: 'bg-[var(--color-deep-orange-1)] text-[var(--color-deep-orange-7)] hover:bg-[var(--color-deep-orange-2)]',
-  purple: 'bg-[var(--color-purple-1)] text-[var(--color-purple-7)] hover:bg-[var(--color-purple-2)]',
-  red: 'bg-[var(--color-deep-orange-1)] text-[var(--color-deep-orange-7)] hover:bg-[var(--color-deep-orange-2)]',
-  yellow: 'bg-[var(--color-yellow-1)] text-[var(--color-yellow-7)] hover:bg-[var(--color-yellow-2)]',
-}
+// **消費 categorical-color SSOT**(CAT_EVENT = subtle 底 + hover step-2;CAT_ACCENT = 左側 step-6
+// 實心條),與 Tag / Avatar 共用 12 色相,key X 一律對 `--color-X-*`(1:1)。
+// 2026-06-01 allDay:全天事件 = 淡底 tile + 左側實心 accent 條 + medium,視覺區分「全天長條」vs
+// 有時間事件;用 accent border 而非 solid fill 保文字對比安全。對齊 Google Calendar / Outlook 慣例。
+const EVENT_COLOR_CLASSES = CAT_EVENT
+const EVENT_ALLDAY_ACCENT = CAT_ACCENT
 
 // ── Helpers ────────────────────────────────────────────────────────────────
 
 function coerceDate(value: string | Date): Date {
-  return value instanceof Date ? value : new Date(value)
+  if (value instanceof Date) return value
+  // date-only ISO("YYYY-MM-DD")用本地午夜建構,不走 new Date(str)。
+  // 原因:`new Date('2026-06-15')` 按 UTC 午夜解析,而 eventsByDate 分桶以本地
+  // getFullYear/Month/Date 讀取 → 負 UTC 時區(西半球)的 all-day 事件被移到前一天
+  // (真實 timezone bug)。手動 split 建本地 Date,與分桶的本地讀取一致。
+  // 含時間的字串(YYYY-MM-DDTHH:mm,無 offset)ES 規範本就以本地解析,走原生 new Date()。
+  const dateOnly = /^\d{4}-\d{2}-\d{2}$/.exec(value)
+  if (dateOnly) {
+    const [y, m, d] = value.split('-').map(Number)
+    return new Date(y, m - 1, d)
+  }
+  return new Date(value)
 }
 
-function eventsOnDate(events: CalendarEvent[], date: Date): CalendarEvent[] {
-  return events.filter((e) => {
-    const start = coerceDate(e.start)
-    const end = coerceDate(e.end)
-    // 日期落在 [start, end] 範圍內(日精度)
-    const d = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime()
-    const s = new Date(start.getFullYear(), start.getMonth(), start.getDate()).getTime()
-    const eEnd = new Date(end.getFullYear(), end.getMonth(), end.getDate()).getTime()
-    return d >= s && d <= eEnd
-  })
-}
+// eventsOnDate(per-cell 全 events 掃描)已由 eventsByDate bucketing memo 取代並移除
+// (2026-07-06 D3 perf;留著會觸發 noUnusedLocals TS6133)。
 
 // ── Component ──────────────────────────────────────────────────────────────
 
 const MAX_TILES_PER_CELL = 3
 
+// 預設事件 tile 抽出 component:截斷 tooltip 需 useTruncated(hook 不能在 map callback 內)。
+// 截斷 → tooltip 顯完整標題(tooltip.spec.md:32,僅實際截斷時);tile 是 interactive host
+// (role=button,hover 直達)→ trigger = tile 本體、量測內層文字 span — useTruncated 自組
+// pattern(truncated-text.spec.md「trigger 需自控」指定解;範本 inline-edit.tsx:251 + tag.tsx)。
+function MonthEventTile({
+  event,
+  colorClass,
+  onEventClick,
+}: {
+  event: CalendarEvent
+  colorClass: string
+  onEventClick?: (event: CalendarEvent) => void
+}) {
+  const { ref: truncationRef, isTruncated } = useTruncated<HTMLSpanElement>({ deps: [event.title] })
+  return (
+    // 恆 wrap、未截斷 open={false} 靜默(truncated-text.spec.md always-wrap:條件 wrap 會 remount 丟 RO 訂閱)
+    <Tooltip open={isTruncated ? undefined : false}>
+      <TooltipTrigger asChild>
+        <div
+          role="button"
+          tabIndex={0}
+          onClick={(e) => {
+            e.stopPropagation()
+            onEventClick?.(event)
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault()
+              onEventClick?.(event)
+            }
+          }}
+          aria-label={`事件:${event.title}`}
+          className={cn(
+            'rounded-md px-1.5 py-0.5 text-caption truncate cursor-pointer transition-colors',
+            // 2026-05-31 #22:事件 tile 是 focusable(tabIndex=0 role=button)但原無 focus ring
+            // → WCAG 2.4.7 不合規。補 focus-visible ring 對齊日期格按鈕。
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            colorClass,
+          )}
+        >
+          <span ref={truncationRef} className="block truncate">{event.title}</span>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent>{event.title}</TooltipContent>
+    </Tooltip>
+  )
+}
+
 const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(function Calendar({
-  view: viewProp,
-  defaultView = 'month',
-  onViewChange,
   referenceDate: referenceDateProp,
   defaultReferenceDate,
   onReferenceDateChange,
+  today: todayProp,
   events = [],
   onEventClick,
   onDateClick,
   onCreateEvent,
   weekStartsOn = 0,
   renderEventTile,
-  size = 'md',
   className,
   locale = 'en-US',
   prevAriaLabel = '上個月', // i18n-allow: DS default; consumer override via prevAriaLabel prop
   nextAriaLabel = '下個月', // i18n-allow: DS default; consumer override via nextAriaLabel prop
-  viewToggleAriaLabel = '檢視切換', // i18n-allow: DS default; consumer override via viewToggleAriaLabel prop
+  navAriaLabel = '行事曆月份導覽', // i18n-allow: DS default; consumer override via navAriaLabel prop
   todayLabel = '今天', // i18n-allow: DS default; consumer override via todayLabel prop
+  createLabel = '新事件', // i18n-allow: DS default; consumer override via createLabel prop
   ...props
 }, ref) {
+  const resolvedToday = todayProp ?? new Date()
   // Controlled / uncontrolled refDate
   const [internalRef, setInternalRef] = React.useState<Date>(
-    defaultReferenceDate ?? new Date(),
+    () => new Date((defaultReferenceDate ?? resolvedToday).getTime()),
   )
   const refDate = referenceDateProp ?? internalRef
   const setRefDate = React.useCallback(
@@ -165,17 +213,6 @@ const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(function Calend
     [referenceDateProp, onReferenceDateChange],
   )
 
-  // View state(MVP 只用 month,其他 tech debt)
-  const [internalView, setInternalView] = React.useState<CalendarView>(defaultView)
-  const currentView = viewProp ?? internalView
-  const setView = React.useCallback(
-    (next: CalendarView) => {
-      if (viewProp === undefined) setInternalView(next)
-      onViewChange?.(next)
-    },
-    [viewProp, onViewChange],
-  )
-
   // Build month grid
   const days = React.useMemo(() => {
     const monthStart = startOfMonth(refDate)
@@ -185,12 +222,13 @@ const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(function Calend
     return eachDayOfInterval({ start: gridStart, end: gridEnd })
   }, [refDate, weekStartsOn])
 
-  const monthTitle = new Intl.DateTimeFormat(locale, {
-    year: 'numeric',
-    month: 'long',
-  }).format(refDate)
-
-  const today = new Date()
+  // 2026-07-06 D3 perf:formatter 依 locale memo(對齊 weekdayNames 既有做法),避免每 render 重建
+  // Intl.DateTimeFormat(已知貴的 constructor);.format(refDate) 每 render 仍執行(cheap)。
+  const monthTitleFormatter = React.useMemo(
+    () => new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long' }),
+    [locale],
+  )
+  const monthTitle = monthTitleFormatter.format(refDate)
 
   const weekdayNames = React.useMemo(() => {
     // 取 `days[0..6]` 的名字(gridStart 開始 7 天,正好一週)
@@ -199,7 +237,42 @@ const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(function Calend
     )
   }, [days, locale])
 
-  const handleToday = () => setRefDate(new Date())
+  // 2026-07-06 D3 perf:原每 render 對 42 cells 各跑 eventsOnDate 全 events filter = O(42×N) +
+  // 每比較配 ~5 個 Date;數百-上千 events(行事曆真實規模)單次 render 數十 ms,且父層任何 re-render
+  // 全額重付。改 useMemo 單趟 bucket:每 event 只 parse 一次,展開 [start..end](clamp 到可見 grid,
+  // 避免長跨度 event 展開爆量)寫入 date→events Map,順便完成 allDay 排序。cell 內改 O(1) map.get。行為 Δ=0。
+  const eventsByDate = React.useMemo(() => {
+    const map = new Map<string, CalendarEvent[]>()
+    if (days.length === 0) return map
+    const first = days[0]
+    const last = days[days.length - 1]
+    const gridStart = new Date(first.getFullYear(), first.getMonth(), first.getDate()).getTime()
+    const gridEnd = new Date(last.getFullYear(), last.getMonth(), last.getDate()).getTime()
+    for (const e of events) {
+      const start = coerceDate(e.start)
+      const end = coerceDate(e.end)
+      const eEnd = new Date(end.getFullYear(), end.getMonth(), end.getDate()).getTime()
+      let sMs = new Date(start.getFullYear(), start.getMonth(), start.getDate()).getTime()
+      if (eEnd < gridStart || sMs > gridEnd) continue // 可見窗外對 42 cells 無貢獻
+      if (sMs < gridStart) sMs = gridStart
+      const lastMs = Math.min(eEnd, gridEnd)
+      const cursor = new Date(sMs)
+      while (cursor.getTime() <= lastMs) {
+        const key = `${cursor.getFullYear()}-${cursor.getMonth() + 1}-${cursor.getDate()}`
+        const bucket = map.get(key)
+        if (bucket) bucket.push(e)
+        else map.set(key, [e])
+        cursor.setDate(cursor.getDate() + 1)
+      }
+    }
+    // allDay 排前(對齊 Google Calendar 全天列在上;V8 stable sort 保 events 原序 → 與舊 per-cell 一致)
+    for (const bucket of map.values()) {
+      bucket.sort((a, b) => Number(b.allDay ?? false) - Number(a.allDay ?? false))
+    }
+    return map
+  }, [events, days])
+
+  const handleToday = () => setRefDate(new Date(resolvedToday.getTime()))
   const handlePrev = () => setRefDate(subMonths(refDate, 1))
   const handleNext = () => setRefDate(addMonths(refDate, 1))
 
@@ -210,18 +283,17 @@ const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(function Calend
         'flex flex-col w-full h-full bg-surface rounded-md border border-divider overflow-hidden',
         className,
       )}
-      data-view={currentView}
-      data-size={size}
       {...props}
     >
-      {/* Toolbar:[◀] [今天] [▶]  title  [view tabs]  [+ new] */}
+      {/* Toolbar:[◀] [今天] [▶]  title  [+ new] */}
       <div
         className={cn(
           'flex items-center gap-2 shrink-0 border-b border-divider',
           'px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]',
         )}
       >
-        <div className="flex items-center gap-2">
+        {/* 月份導覽 landmark:prev / 今天 / next 包成 <nav> 給 SR landmark 導航(per calendar.spec.md a11y 段) */}
+        <nav className="flex items-center gap-2" aria-label={navAriaLabel}>
           <Button
             variant="text"
             size="sm"
@@ -241,29 +313,17 @@ const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(function Calend
             aria-label={nextAriaLabel}
             onClick={handleNext}
           />
-        </div>
+        </nav>
 
         <h2 className="text-body-lg font-medium text-foreground flex-1 min-w-0 truncate ml-2">
-          {monthTitle}
+          {/* 2026-07-28:截斷必附 tooltip(tooltip.spec.md「截斷 → tooltip,僅實際截斷時顯示」)——
+              窄 toolbar 下標題被裁掉沒有補救路徑。display="block":h2 是 block container。 */}
+          <TruncatedText display="block">{monthTitle}</TruncatedText>
         </h2>
 
-        {/* View switcher:用 SegmentedControl(互斥多選一 canonical)——
-            對齊 CLAUDE.md「互斥分類選擇走 SegmentedControl,非 checked Button group」原則。
-            Button 的 pressed 是「toggle 持續狀態」語意,不適合「單選 view 切換」 */}
-        <SegmentedControl
-          size="sm"
-          value={currentView}
-          onValueChange={(v) => setView(v as CalendarView)}
-          aria-label={viewToggleAriaLabel}
-        >
-          <SegmentedControlItem value="day" disabled>日</SegmentedControlItem>
-          <SegmentedControlItem value="week" disabled>週</SegmentedControlItem>
-          <SegmentedControlItem value="month">月</SegmentedControlItem>
-        </SegmentedControl>
-
         {onCreateEvent && (
           <Button variant="primary" size="sm" startIcon={Plus} onClick={onCreateEvent}>
-            新事件
+            {createLabel}
           </Button>
         )}
       </div>
@@ -291,85 +351,90 @@ const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(function Calend
           <div key={rowIdx} role="row" style={{ display: 'contents' }}>
             {days.slice(rowIdx * 7, rowIdx * 7 + 7).map((date) => {
               const inMonth = isSameMonth(date, refDate)
-              const isToday = isSameDay(date, today)
-              const dayEvents = eventsOnDate(events, date)
+              const isToday = isSameDay(date, resolvedToday)
+              // 2026-06-01 allDay:全天事件排 cell 頂端(對齊 Google Calendar 全天列在上)——
+              // 排序已在 eventsByDate bucketing memo 內完成(D3 perf),cell 內 O(1) 查表
+              const dayEvents = eventsByDate.get(`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`) ?? []
               const visibleEvents = dayEvents.slice(0, MAX_TILES_PER_CELL)
               const overflowCount = dayEvents.length - visibleEvents.length
 
               return (
-                <button
+                // 2026-06-11 a11y(user 拍板 2c 修 code):cell 從 <button role="gridcell"> 改非互動容器 —
+                // W3C button 語義禁止互動後代,cell 內含 role="button" 事件 tile = nested-interactive 違規。
+                // 對齊 Google Calendar:gridcell = 容器,日期數字按鈕 = 日期級 keyboard 入口,tile 各自為 button。
+                // div onClick 保留滑鼠「點 cell 空白處等同點日期」便利(keyboard 走日期數字按鈕,功能等價)。
+                <div
                   key={date.toISOString()}
-                  type="button"
                   role="gridcell"
-                  aria-label={`${format(date, 'yyyy-MM-dd')},${dayEvents.length} 個事件`}
-              onClick={() => onDateClick?.(date)}
+                  onClick={() => onDateClick?.(date)}
               className={cn(
                 'flex flex-col gap-1 min-h-28 p-1.5 text-left',
                 'border-r border-b border-divider last:border-r-0',
                 '[&:nth-child(7n)]:border-r-0',
                 'hover:bg-neutral-hover transition-colors',
-                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
                 !inMonth && 'bg-muted',
               )}
             >
-              {/* Date number header */}
+              {/* Date number = keyboard 入口;今天/平日統一 24px 圓形 hit-area(WCAG 2.5.8 ≥24,
+                  今天 pill 本就 24px,平日跟齊 → 跨 cell 數字光學對齊) */}
               <div className="flex items-start justify-end">
-                {isToday ? (
-                  <span className="inline-flex items-center justify-center min-w-6 h-6 px-2 rounded-full bg-primary text-on-emphasis text-body font-medium">
-                    {format(date, 'd')}
-                  </span>
-                ) : (
-                  <span
-                    className={cn(
-                      'text-body font-medium',
-                      !inMonth && 'text-fg-disabled',
-                    )}
-                  >
-                    {format(date, 'd')}
-                  </span>
-                )}
+                <button
+                  type="button"
+                  aria-label={`${format(date, 'yyyy-MM-dd')},${dayEvents.length} 個事件`}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onDateClick?.(date)
+                  }}
+                  className={cn(
+                    'inline-flex items-center justify-center min-w-6 h-6 rounded-full text-body font-medium',
+                    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                    isToday && 'px-2 bg-info text-on-emphasis',
+                    !isToday && !inMonth && 'text-fg-disabled',
+                  )}
+                >
+                  {format(date, 'd')}
+                </button>
               </div>
 
               {/* Event tiles */}
               <div className="flex flex-col gap-0.5 min-h-0">
                 {visibleEvents.map((event) => {
-                  const colorClass = EVENT_COLOR_CLASSES[event.color ?? 'blue']
+                  const ec = event.color ?? 'blue'
+                  // 2026-06-01 allDay:淡底 + 左 accent 條 + medium = 「全天長條」視覺(區分有時間事件)
+                  const colorClass = event.allDay
+                    ? cn(EVENT_COLOR_CLASSES[ec], EVENT_ALLDAY_ACCENT[ec], 'font-medium')
+                    : EVENT_COLOR_CLASSES[ec]
                   if (renderEventTile) {
                     return (
                       <div
                         key={event.id}
+                        role="button"
+                        tabIndex={0}
+                        aria-label={`事件:${event.title}`}
                         onClick={(e) => {
                           e.stopPropagation()
                           onEventClick?.(event)
                         }}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault()
+                            e.stopPropagation()
+                            onEventClick?.(event)
+                          }
+                        }}
+                        className="rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                       >
                         {renderEventTile(event)}
                       </div>
                     )
                   }
                   return (
-                    <div
+                    <MonthEventTile
                       key={event.id}
-                      role="button"
-                      tabIndex={0}
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        onEventClick?.(event)
-                      }}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter' || e.key === ' ') {
-                          e.preventDefault()
-                          onEventClick?.(event)
-                        }
-                      }}
-                      aria-label={`事件:${event.title}`}
-                      className={cn(
-                        'rounded-md px-1.5 py-0.5 text-caption truncate cursor-pointer transition-colors',
-                        colorClass,
-                      )}
-                    >
-                      {event.title}
-                    </div>
+                      event={event}
+                      colorClass={colorClass}
+                      onEventClick={onEventClick}
+                    />
                   )
                 })}
                 {overflowCount > 0 && (
@@ -378,7 +443,7 @@ const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(function Calend
                   </div>
                 )}
               </div>
-            </button>
+            </div>
               )
             })}
           </div>
@@ -400,9 +465,10 @@ export const calendarMeta = {
   sizes: {
 
   },
-  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],
+  // 'active' 移除 — 日期格按壓視覺屬 DateGrid(其 meta 已 −active);nav 按壓屬內嵌 Button(2026-07-07 詞彙統一 DS-wide 按壓訊號盤點:檔內 0 active: utility / 0 *-active token)。
+  states: ['default', 'hover', 'focus-visible', 'disabled'],
   tokens: {
-    bg: ['bg-muted', 'bg-neutral-hover', 'bg-primary', 'bg-surface'],
+    bg: ['bg-muted', 'bg-neutral-hover', 'bg-info', 'bg-surface'],
     fg: ['text-fg-disabled', 'text-fg-muted', 'text-foreground'],
     ring: ['ring-ring'],
   },

package/src/components/Calendar/index.ts

@@ -0,0 +1,5 @@
+// AUTO-GENERATED by scripts/gen-component-indexes.mjs — DO NOT EDIT MANUALLY.
+// Re-export pattern enables package.json exports map subpath:
+//   import { ... } from '@qijenchen/design-system/{components,patterns}/<Dir>'
+// Regenerate: node scripts/gen-component-indexes.mjs
+export * from './calendar'