@qijenchen/design-system 0.1.0-beta.10

package/dist/components/DatePicker/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","sources":["../../../src/components/DatePicker/date-picker.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\n// code-quality-allow: file-size — foundational composite(DatePicker single + Range + showTime + format/ISO helpers + TimePickerSidePanel sub-components),拆 sub-file 會 (a) 增 cross-file context binding 複雜度 (b) M21 過度抽象(每 helper 1 consumer)。等 inline filter UI 真接入第 2 consumer 再拆。\nimport * as React from 'react'\nimport { X, Calendar as CalendarIcon, ArrowRight } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport type { FieldMode, FieldVariant } from '@/design-system/components/Field/field-types'\nimport { fieldWrapperStyles, bareInputStyles, EMPTY_DISPLAY, nakedCellRowModeAlign, fieldDisplayTextClass } from '@/design-system/components/Field/field-wrapper'\nimport { ItemInlineAction, ItemSuffix } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { Popover, PopoverTrigger, PopoverAnchor, PopoverContent } from '@/design-system/components/Popover/popover'\nimport { DateGrid } from '@/design-system/components/DateGrid/date-grid'\nimport { Button } from '@/design-system/components/Button/button'\nimport { SurfaceFooter } from '@/design-system/patterns/overlay-surface/overlay-surface'\nimport { useFieldContext } from '@/design-system/components/Field/field-context'\nimport {\n  TimeColumns,\n  isoToTimeParts,\n  timePartsToString,\n  type TimeParts,\n  type TimeStep,\n} from '@/design-system/components/TimePicker/time-columns'\nimport { ICON_SIZE } from '@/design-system/tokens/uiSize/icon-size'\n\n// ── Format ──────────────────────────────────────────────────────────────────\n\nexport interface DateFormatOptions {\n  /** Intl.DateTimeFormat options（預設 { year: 'numeric', month: '2-digit', day: '2-digit' }） */\n  formatOptions?: Intl.DateTimeFormatOptions\n  /** locale（預設 'en-US'） */\n  locale?: string\n}\n\n/**\n * Default format:**YYYY/MM/DD**(對齊 Ant Design 順序,year-first ISO-like)。\n * 棄 `en-US` `MM/DD/YYYY`(month-first 美式)— 美式順序在 international DS 反直覺\n * (跟 ISO date 視覺對不上,跟 sort 順序也對不上)。Ant / Material X / Apple HIG\n * 一致 year-first。Consumer 想自訂可傳 `formatOptions` + `locale`。\n */\nfunction formatDate(\n  value: string | number | Date,\n  options: DateFormatOptions = {},\n): string {\n  const date = value instanceof Date ? value : new Date(value)\n  if (Number.isNaN(date.getTime())) return String(value)\n  // 若 consumer 顯式傳 formatOptions / locale → 走 Intl.DateTimeFormat\n  if (options.formatOptions || options.locale) {\n    return new Intl.DateTimeFormat(options.locale ?? 'en-US', options.formatOptions ?? { year: 'numeric', month: '2-digit', day: '2-digit' }).format(date)\n  }\n  // 預設:YYYY/MM/DD(直接組,locale-independent + 視覺穩定)\n  const y = date.getFullYear()\n  const m = String(date.getMonth() + 1).padStart(2, '0')\n  const d = String(date.getDate()).padStart(2, '0')\n  return `${y}/${m}/${d}`\n}\n\n/** 顯示用:date 或 datetime,根據 showTime / showSeconds 切換 */\nfunction formatDateOrDateTime(\n  iso: string | null | undefined,\n  showTime: boolean,\n  showSeconds: boolean,\n  options: DateFormatOptions = {},\n): string {\n  if (!iso) return ''\n  const dateText = formatDate(iso, options)\n  if (!showTime) return dateText\n  const time = isoToTimeParts(iso)\n  if (!time) return dateText\n  return `${dateText} ${timePartsToString(time, showSeconds)}`\n}\n\n// ── ISO <-> Date conversion ─────────────────────────────────────────────────\n// date-only:'YYYY-MM-DD'(local-time 語意,不帶時區)\n// datetime  :'YYYY-MM-DDTHH:MM:SS'(同 local-time 語意)\n\nfunction isoToDate(iso: string | null | undefined): Date | undefined {\n  if (!iso) return undefined\n  const datePart = iso.slice(0, 10)\n  const [y, m, d] = datePart.split('-').map(Number)\n  if (!y || !m || !d) return undefined\n  const date = new Date(y, m - 1, d)\n  const time = isoToTimeParts(iso)\n  if (time) {\n    date.setHours(time.hours, time.minutes, time.seconds)\n  }\n  return date\n}\n\n/**\n * Issue 10 typed input parser(2026-05-10):接 user 自由輸入字串,parse 出 ISO date(YYYY-MM-DD)\n * 或 ISO datetime(YYYY-MM-DDTHH:MM[:SS])。\n *\n * 支援 format(per Material X DatePicker / Ant DatePicker typed input idiom):\n *   - `YYYY-MM-DD` / `YYYY/MM/DD` / `YYYY.MM.DD`(ISO + 慣例 separator)\n *   - `MM/DD/YYYY` / `MM-DD-YYYY`(US locale)\n *   - `DD/MM/YYYY` / `DD-MM-YYYY`(EU locale)\n *   - `YYYY-MM-DD HH:MM[:SS]` / `YYYY-MM-DDTHH:MM[:SS]`(datetime,showTime 才接)\n *   - native `Date.parse()` fallback(handle 'Mar 12 2025' 等英文 RFC)\n *\n * Return:`{ iso, valid }`。Invalid → `valid=false` + `iso=null`,UI 顯 aria-invalid。\n * Partial input(打到一半)→ valid=false 但不顯 error UI(consumer 用 onBlur / Enter 才檢驗)。\n *\n * 對齊 Material X-DatePicker `formats` parser + Ant DatePicker `format` array + dayjs.parse。\n */\nfunction parseDateInput(input: string, opts: { allowTime: boolean }): { iso: string | null; valid: boolean } {\n  const trimmed = input.trim()\n  if (trimmed === '') return { iso: null, valid: true }  // empty = no value, OK\n  // 1. ISO date YYYY-MM-DD or with separators / . /(可選 time YYYY-MM-DD[T| ]HH:MM[:SS])\n  const isoDateMatch = trimmed.match(/^(\\d{4})[-/.](\\d{1,2})[-/.](\\d{1,2})(?:[T\\s](\\d{1,2}):(\\d{1,2})(?::(\\d{1,2}))?)?$/)\n  if (isoDateMatch) {\n    const [, y, m, d, hh, mm, ss] = isoDateMatch\n    const date = new Date(Number(y), Number(m) - 1, Number(d), Number(hh ?? 0), Number(mm ?? 0), Number(ss ?? 0))\n    if (isNaN(date.getTime()) || date.getMonth() !== Number(m) - 1) return { iso: null, valid: false }\n    const datePart = dateToIso(date)\n    if (hh != null && opts.allowTime) {\n      const h2 = String(Number(hh)).padStart(2, '0')\n      const m2 = String(Number(mm)).padStart(2, '0')\n      const s2 = String(Number(ss ?? 0)).padStart(2, '0')\n      return { iso: `${datePart}T${h2}:${m2}:${s2}`, valid: true }\n    }\n    return { iso: datePart, valid: true }\n  }\n  // 2. US / EU locale MM/DD/YYYY or DD/MM/YYYY — ambiguous;v1 fallback Date.parse 並接受結果\n  // 3. native Date.parse fallback(RFC-style 'Mar 12 2025')\n  const parsed = new Date(trimmed)\n  if (!isNaN(parsed.getTime())) {\n    const datePart = dateToIso(parsed)\n    if (opts.allowTime && (trimmed.includes(':') || trimmed.includes('T'))) {\n      const h2 = String(parsed.getHours()).padStart(2, '0')\n      const m2 = String(parsed.getMinutes()).padStart(2, '0')\n      const s2 = String(parsed.getSeconds()).padStart(2, '0')\n      return { iso: `${datePart}T${h2}:${m2}:${s2}`, valid: true }\n    }\n    return { iso: datePart, valid: true }\n  }\n  return { iso: null, valid: false }\n}\n\nfunction dateToIso(date: Date | undefined): string {\n  if (!date) return ''\n  const y = date.getFullYear()\n  const m = String(date.getMonth() + 1).padStart(2, '0')\n  const d = String(date.getDate()).padStart(2, '0')\n  return `${y}-${m}-${d}`\n}\n\nfunction combineDateAndTime(date: Date, time: TimeParts): string {\n  const datePart = dateToIso(date)\n  const hh = String(time.hours).padStart(2, '0')\n  const mi = String(time.minutes).padStart(2, '0')\n  const ss = String(time.seconds).padStart(2, '0')\n  return `${datePart}T${hh}:${mi}:${ss}`\n}\n\nfunction nowIsoDateTime(): string {\n  const d = new Date()\n  return combineDateAndTime(d, {\n    hours: d.getHours(),\n    minutes: d.getMinutes(),\n    seconds: d.getSeconds(),\n  })\n}\n\nfunction addDays(date: Date, n: number): Date {\n  const next = new Date(date)\n  next.setDate(next.getDate() + n)\n  return next\n}\n\n// ── TimePickerSidePanel ────────────────────────────────────────────────\n//\n// DatePicker showTime / Range showTime 共用的右側時間 panel(canonical 2026-05-03 v8)。\n//\n// ── Caption row alignment canonical(永遠跟 calendar 年月對齊)──\n// 結構必須符合 DateGrid month_caption 同樣的 pt-3 + h-field-xs + mb-3 規格,讓 title\n// 跟 calendar 「April 2026」字 baseline 在同一 Y 座標(垂直對齊)。\n// Y 座標推導:\n//   - panel root pt-3 = 12px top 對齊 DateGrid p-3 top\n//   - h-field-xs = 24px header,title 純 flex items-center justify-center → 真正水平+垂直置中\n//   - mb-3 = 12px gap 對齊 DateGrid month_caption mb-3\n//   → title text center Y = 12 + 12 = 24px(from CalendarTimeContainer top)\n//   → calendar caption text center Y = 12(p-3 top)+ 12(caption row half)= 24px ✓ 同一 Y\n// ⚠️ 若改 DateGrid p-3(例如 p-2)→ 必同步改 TimePicker pt-3,否則 caption 行錯位。\n// 兩處共識在 spec.md「Spacing canonical」段 + 本 comment 雙鎖。\n//\n// ── Header divider canonical(無 border-b)──\n// Header 下方無 divider,對齊 DateGrid month_caption(無 border-b,只 mb-3 gap)。\n// DS internal canonical(M23)優先於 Ant time-picker header divider 慣例 — 兩 panel\n// 同層級 caption 視覺對稱,引入 divider 會破對稱。\n//\n// ── Bottom padding canonical(0)──\n// Root 用 pt-3 而非 py-3:bottom = 0,讓 columns 連續延伸到 SurfaceFooter border-t。\n// Ant / Material time picker idiom — time list 視覺感「continuous scroll」延伸到 footer\n// divider,bottom padding 12px 反而讓 list 看起來「截斷」。\n// 此處與 DateGrid p-3(bottom 12)有意 asymmetric:Calendar cells 不該撞 footer divider\n// (cells 是離散 grid),time list 是 scroll list 撞 divider 反而合理。\n\ninterface TimePickerSidePanelProps {\n  value?: TimeParts\n  onChange: (next: TimeParts) => void\n  showSeconds?: boolean\n  minuteStep?: TimeStep\n  secondStep?: TimeStep\n}\n\nfunction TimePickerSidePanel({\n  value,\n  onChange,\n  showSeconds = false,\n  minuteStep = 1,\n  secondStep = 1,\n  className,\n}: TimePickerSidePanelProps & { className?: string }) {\n  // Dynamic header text — 顯示當前選擇的 HH:MM(對齊 user Q4 + Ant idiom)\n  const headerText = value\n    ? timePartsToString(value, showSeconds)\n    : (showSeconds ? '--:--:--' : '--:--')\n\n  return (\n    <div className={cn('flex flex-col h-full pt-3', className)}>\n      {/* Header 純結構:h-field-xs (24px) + flex 水平+垂直置中 + mb-3 (12px gap) */}\n      <div className=\"h-field-xs flex items-center justify-center mb-3\">\n        <span className=\"text-body font-medium tabular-nums\">{headerText}</span>\n      </div>\n      {/* Columns:flex-1 填滿剩餘 height,無 horizontal padding(填滿容器寬度) */}\n      <div className=\"flex-1 min-h-0 flex\">\n        <TimeColumns\n          value={value}\n          onChange={onChange}\n          showSeconds={showSeconds}\n          minuteStep={minuteStep}\n          secondStep={secondStep}\n        />\n      </div>\n    </div>\n  )\n}\n\n/**\n * showTime panel container — 包 DateGrid + TimePicker side panel,DateGrid 主導 row 高度,\n * TimePicker absolute 撐滿同高,不影響 layout。Spacer div 留 layout 寬度給 absolute panel。\n */\nconst TIME_PANEL_WIDTH = (showSeconds: boolean) => showSeconds ? 'w-60' : 'w-40'\n\ninterface CalendarTimeContainerProps {\n  showTime: boolean\n  showSeconds: boolean\n  calendar: React.ReactNode\n  timePanel?: React.ReactNode\n}\n\nfunction CalendarTimeContainer({ showTime, showSeconds, calendar, timePanel }: CalendarTimeContainerProps) {\n  if (!showTime) return <>{calendar}</>\n  return (\n    <div className=\"relative\">\n      <div className=\"flex flex-row\">\n        {calendar}\n        {/* Spacer 佔 layout 寬度給 absolute TimePicker;border-l 在這層,不在 absolute 層\n            (避免 stacking + border 雙繪) */}\n        <div className={cn('shrink-0 border-l border-divider', TIME_PANEL_WIDTH(showSeconds))} />\n      </div>\n      {/* TimePicker absolute 撐滿 DateGrid 高度(top-0 bottom-0),right-0 對齊 spacer */}\n      <div className={cn('absolute top-0 right-0 bottom-0', TIME_PANEL_WIDTH(showSeconds))}>\n        {timePanel}\n      </div>\n    </div>\n  )\n}\n\n// ── DatePicker(single)──────────────────────────────────────────────────\n\nexport interface DatePickerProps\n  extends DateFormatOptions,\n    Omit<\n      React.HTMLAttributes<HTMLDivElement>,\n      'value' | 'onChange' | 'placeholder' | 'defaultValue'\n    > {\n  mode?: FieldMode\n  /** Field chrome variant. Default = context.variant ?? 'default'. Per-prop override. */\n  variant?: FieldVariant\n  error?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  /** ISO date(YYYY-MM-DD)或 ISO datetime(YYYY-MM-DDTHH:MM:SS,當 showTime=true) */\n  value?: string | null\n  onChange?: (value: string) => void\n  placeholder?: string\n  className?: string\n  disabled?: boolean\n  /** 允許清空已選值 */\n  clearable?: boolean\n  /** 啟用時間欄位(時 / 分 [/ 秒]),Ant idiom — value 變 ISO datetime */\n  showTime?: boolean\n  /** showTime 時是否顯示秒 */\n  showSeconds?: boolean\n  /** showTime 分鐘步進(會議常用 15) */\n  minuteStep?: TimeStep\n  /** showTime 秒鐘步進 */\n  secondStep?: TimeStep\n  /**\n   * 是否需 OK 確認才提交,預設 showTime=true 時為 true(對齊 Ant DatePicker showTime)\n   * — datetime picker user 習慣編完才 commit,避免 calendar 點到就關。\n   */\n  needConfirm?: boolean\n  /**\n   * Display 是否渲 Calendar icon + Field naked wrapper(D-path opt-in,2026-05-08)\n   * — DataTable cell display↔edit 像素級對齊用。預設 false(裸 span,backward compat)。\n   * 設 true 時 display 走 fieldWrapperStyles(naked variant)+ ItemSuffix CalendarIcon,\n   * 與 edit 同 DOM 結構,消除 Layer-B padding mismatch。\n   */\n  showDisplayEndIcon?: boolean\n  /** Initial open state(uncontrolled)— DataTable cell-as-input 1-step open canonical */\n  defaultOpen?: boolean\n  /** open state 變更 callback。DataTable cell-as-input 用:open=false → cell exit edit */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Issue 10 typed input(2026-05-10):trigger 內渲 real `<input>` 接 user 鍵盤輸入,\n   * 同時保持 Calendar icon trigger 開啟 calendar 選擇(對齊 Material X DatePicker / Ant\n   * DatePicker / Notion typed-date idiom)。\n   *\n   * 預設 false(backward-compat)— trigger 仍是 `<div role=\"combobox\">` + `<span>` 文字。\n   *\n   * Behavior(opt-in `typeable=true`):\n   *   - `<input>` 取代 `<span>` displayValue,user 可直接打字\n   *   - Partial input(打到一半,如 \"2025-\")allow,**不**即時驗證\n   *   - `Enter` / `Blur` → `parseDateInput` 解析 → 合法 commit `onChange`;不合法 set\n   *     aria-invalid + keep draft visible(user 可繼續修)\n   *   - `Esc` → reset draft 回 committed value\n   *   - IME composition 期間不觸發驗證(中日韓輸入法 onCompositionStart/End 攔截)\n   *   - Calendar pick → 同步 input draft + commit(走原 path)\n   *   - Calendar icon 仍 click 開 popover(Material/Ant idiom)\n   *\n   * **v1 limits**:\n   *   - format detection ISO YYYY-MM-DD / YYYY/MM/DD / Date.parse fallback(`parseDateInput`)\n   *   - US `MM/DD/YYYY` vs EU `DD/MM/YYYY` ambiguous → fallback native parser\n   *   - 未支援 locale-aware format prop(v2 加 `dateFormat?: string`)\n   *\n   * 對齊 Material X-DatePicker `format` prop / Ant DatePicker `format` array / Notion typed-input。\n   */\n  typeable?: boolean\n}\n\n// Trigger uses `<div role=\"combobox\" tabIndex={...}>` instead of `<button>` —\n// 對齊 Combobox / Select / TimePicker 同 pattern,避免 ItemInlineAction(內部 button)\n// 構成 nested-interactive(axe serious)。Radix Popover asChild 仍處理 Enter/Space 鍵盤觸發。\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      mode = 'edit',\n      variant: variantProp,\n      error: errorProp = false,\n      size = 'md',\n      value,\n      onChange,\n      placeholder,\n      className,\n      disabled: disabledProp,\n      clearable = false,\n      formatOptions,\n      locale,\n      showTime = false,\n      showSeconds = false,\n      minuteStep = 1,\n      secondStep = 1,\n      needConfirm: needConfirmProp,\n      showDisplayEndIcon = false,\n      defaultOpen = false,\n      onOpenChange,\n      typeable = false,\n      id: idProp,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledByProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-errormessage': ariaErrorMessageProp,\n      ...props\n    },\n    ref\n  ) => {\n    const fieldCtx = useFieldContext()\n    const error = errorProp || (fieldCtx?.invalid ?? false)\n    const disabled = disabledProp ?? fieldCtx?.disabled\n    const resolvedMode = disabled ? 'disabled' : mode\n    const variant: FieldVariant = variantProp ?? fieldCtx?.variant ?? 'default'\n    const isEditable = resolvedMode === 'edit'\n    // 2026-05-18 改 import ICON_SIZE SSOT(per user『做完』approval,消除 M17 違反 7+ 重複 ternary)\n  const iconSize = ICON_SIZE[size as 'sm' | 'md' | 'lg']\n    const needConfirm = needConfirmProp ?? showTime  // datetime 預設需確認\n    const [open, setOpenState] = React.useState(defaultOpen)\n    const setOpen = React.useCallback((next: boolean) => { setOpenState(next); onOpenChange?.(next) }, [onOpenChange])\n    const [draft, setDraft] = React.useState<string | null>(value ?? null)\n    const resolvedPlaceholder = placeholder ?? (showTime ? 'YYYY/MM/DD HH:MM' : 'YYYY/MM/DD')\n    // a11y:role=\"combobox\" 必須有 accessible name(aria-label / labelledby / fieldCtx label)\n    const accessibleName = ariaLabelProp ?? (ariaLabelledByProp ? undefined : (fieldCtx?.id ? undefined : resolvedPlaceholder))\n\n    // Sync draft from value ONLY on open false→true(避免 popover 開啟期間 value 改變\n    // clobber user 的編輯。Popover 關閉後下次再開時自動同步最新 value。)\n    const lastOpenRef = React.useRef(open)\n    React.useEffect(() => {\n      if (!lastOpenRef.current && open) setDraft(value ?? null)\n      lastOpenRef.current = open\n    }, [open, value])\n\n    // Display value canonical(2026-05-02 fix):\n    //   needConfirm=true(showTime 預設)→ trigger 讀 draft,user 點 calendar 看到 input 即時更新\n    //   needConfirm=false → trigger 讀 value(committed,符合非確認流程)\n    const displayValue = needConfirm ? draft : (value ?? null)\n    const displayDate = React.useMemo(() => isoToDate(displayValue), [displayValue])\n    const draftDate = React.useMemo(() => isoToDate(draft), [draft])\n    const draftTime = isoToTimeParts(draft) ?? { hours: 0, minutes: 0, seconds: 0 }\n    const showClear = clearable && (needConfirm ? draft : value) && isEditable\n\n    const displayCommitted = formatDateOrDateTime(value, showTime, showSeconds, { formatOptions, locale })\n    const displayLive = formatDateOrDateTime(displayValue, showTime, showSeconds, { formatOptions, locale })\n\n    // Issue 10 typed input(2026-05-10):draft string + invalid flag + IME composition guard。\n    const [inputDraft, setInputDraft] = React.useState<string>(displayLive)\n    const [inputInvalid, setInputInvalid] = React.useState(false)\n    const composingRef = React.useRef(false)\n    // Sync input draft from committed displayLive(value change from outside)— 不要在 user\n    // 打字期間覆寫。透過 ref 比較:committed vs current draft 是否從相同 source。\n    const lastDisplayLiveRef = React.useRef(displayLive)\n    React.useEffect(() => {\n      if (lastDisplayLiveRef.current !== displayLive) {\n        setInputDraft(displayLive)\n        setInputInvalid(false)\n        lastDisplayLiveRef.current = displayLive\n      }\n    }, [displayLive])\n    const handleInputCommit = React.useCallback((raw: string) => {\n      const { iso, valid } = parseDateInput(raw, { allowTime: showTime })\n      if (!valid) { setInputInvalid(true); return }\n      setInputInvalid(false)\n      if (iso === null) {\n        // empty input = clear value\n        onChange?.('')\n        setDraft(null)\n      } else {\n        onChange?.(iso)\n        setDraft(iso)\n      }\n    }, [onChange, showTime])\n\n    // mode='display'(Phase B2 2026-05-05):純內容輸出 — 對齊原 DatePickerDisplay sub-component(retired)。\n    //   Default(showDisplayEndIcon=false):無 Field wrapper / 無 Calendar icon — backward compat 裸 span。\n    //   Opt-in(showDisplayEndIcon=true,2026-05-08 D-path):Field naked wrapper + ItemSuffix Calendar,\n    //   與 edit 同結構消除 cell display↔edit 像素偏移(Layer-B padding mismatch)。\n    if (resolvedMode === 'display') {\n      if (!showDisplayEndIcon) {\n        // 2026-05-14 I2 fix(spec contract (e) display typography canonical):bare span 套\n        // `fieldDisplayTextClass(size)`(sm/md→text-body,lg→text-body-lg)— 對齊 Field family 統一。\n        if (!value) return <span className={cn(fieldDisplayTextClass(size), 'text-fg-muted', className)}>{EMPTY_DISPLAY}</span>\n        return <span className={cn(fieldDisplayTextClass(size), 'truncate', className)}>{displayCommitted}</span>\n      }\n      return (\n        <div\n          className={cn(fieldWrapperStyles({ mode: 'display', variant, size }), className)}\n          data-field-mode=\"display\"\n        >\n          <span className={cn(bareInputStyles, 'flex-1 min-w-0 truncate', !value && 'text-fg-muted')}>\n            {value ? displayCommitted : EMPTY_DISPLAY}\n          </span>\n          <ItemSuffix className=\"pointer-events-none\">\n            <CalendarIcon size={iconSize} className=\"text-fg-muted\" aria-hidden />\n          </ItemSuffix>\n        </div>\n      )\n    }\n\n    // readonly / disabled\n    if (!isEditable) {\n      return (\n        <div\n          className={cn(fieldWrapperStyles({ mode: resolvedMode, variant: variant, size }), className)}\n          data-field-mode={resolvedMode}\n          {...(props as React.HTMLAttributes<HTMLDivElement>)}\n        >\n          <span className={cn('flex-1 min-w-0', resolvedMode === 'disabled' && 'text-fg-disabled')}>\n            {value\n              ? displayCommitted\n              : <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>\n            }\n          </span>\n          <ItemSuffix className=\"pointer-events-none\">\n            <CalendarIcon size={iconSize} className=\"text-fg-muted\" aria-hidden />\n          </ItemSuffix>\n        </div>\n      )\n    }\n\n    const triggerText = displayValue\n      ? displayLive\n      : <span className=\"text-fg-muted\">{resolvedPlaceholder}</span>\n\n    const commitDraft = (next: string | null) => {\n      if (needConfirm) setDraft(next)\n      else onChange?.(next ?? '')\n    }\n    const handleConfirm = () => { onChange?.(draft ?? ''); setOpen(false) }\n    const handleNow = () => {\n      const now = showTime ? nowIsoDateTime() : dateToIso(new Date())\n      commitDraft(now)\n    }\n\n    return (\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <div\n            ref={ref}\n            id={idProp ?? fieldCtx?.id}\n            role=\"combobox\"\n            tabIndex={disabled ? -1 : 0}\n            aria-disabled={disabled || undefined}\n            aria-label={accessibleName}\n            aria-labelledby={ariaLabelledByProp ?? fieldCtx?.labelId}\n            aria-invalid={error || undefined}\n            aria-required={fieldCtx?.required || undefined}\n            aria-describedby={ariaDescribedByProp ?? fieldCtx?.descriptionId}\n            aria-errormessage={ariaErrorMessageProp ?? (error ? fieldCtx?.errorId : undefined)}\n            aria-haspopup=\"dialog\"\n            aria-expanded={open}\n            data-field-mode=\"edit\"\n            data-error={error ? '' : undefined}\n            className={cn(\n              fieldWrapperStyles({ mode: 'edit', variant: variant, size }),\n              'text-left cursor-pointer',\n              'focus-visible:outline-none',\n              error && [\n                'border-error hover:border-error-hover',\n                'focus-within:border-error focus-within:hover:border-error',\n              ],\n              className,\n            )}\n            {...props}\n          >\n            {typeable ? (\n              // Issue 10 typed input(2026-05-10):real `<input>` 接 user 鍵盤打字。\n              // Click 在 input 上不 propagate 給外層 popover trigger(避免每次打字都開 popover)。\n              // Calendar icon `<ItemSuffix>` 點才開 popover(Material/Ant typed-date idiom)。\n              <input\n                type=\"text\"\n                className={cn(bareInputStyles, 'truncate', !inputDraft && 'placeholder:text-fg-muted')}\n                value={inputDraft}\n                placeholder={resolvedPlaceholder}\n                aria-invalid={inputInvalid || error || undefined}\n                onChange={(e) => { setInputDraft(e.target.value); setInputInvalid(false) }}\n                onCompositionStart={() => { composingRef.current = true }}\n                onCompositionEnd={() => { composingRef.current = false }}\n                onKeyDown={(e) => {\n                  if (composingRef.current) return\n                  if (e.key === 'Enter') { e.preventDefault(); handleInputCommit(inputDraft) }\n                  if (e.key === 'Escape') { setInputDraft(displayLive); setInputInvalid(false); e.preventDefault() }\n                }}\n                onBlur={() => { if (!composingRef.current) handleInputCommit(inputDraft) }}\n                onClick={(e) => e.stopPropagation()}\n              />\n            ) : (\n              <span className={cn(bareInputStyles, 'truncate', !displayValue && 'text-fg-muted')}>\n                {triggerText}\n              </span>\n            )}\n            {showClear && (\n              <ItemInlineAction\n                size={size ?? 'md'}\n                action={{\n                  icon: X,\n                  label: '清除日期', // i18n-allow: DS default inline-action label\n                  // Clear = 立刻 commit + 同步 draft(對齊 user 體感 / Ant trigger X 慣例)\n                  // 不走 needConfirm「等確定」語義 — X 在 trigger 上是 standard clear affordance,\n                  // 應立刻清空。dual-state 必同步:value('') + draft(null),否則 popover 開\n                  // 著時 displayValue=draft 仍顯示舊值(see line 318: displayValue = needConfirm ? draft : value)。\n                  onClick: (e) => {\n                    e?.stopPropagation()\n                    onChange?.('')\n                    setDraft(null)\n                  },\n                }}\n              />\n            )}\n            <ItemSuffix className=\"pointer-events-none\">\n              <CalendarIcon size={iconSize} className=\"text-fg-muted\" aria-hidden />\n            </ItemSuffix>\n          </div>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          {/* role=\"dialog\" 為 flex item of PopoverContent(flex flex-col overflow-hidden)。\n              2026-05-06 v9.1:加 `flex flex-col flex-1 min-h-0` 完成 M25 chain — viewport\n              壓縮時 dialog 縮 + 內 calendar/footer 排序;原無 chain 致 calendar 末行被\n              overflow-hidden 切掉、footer 推出 popover(user 報「位置改變就壞掉」根因)。 */}\n          <div role=\"dialog\" className=\"flex flex-col flex-1 min-h-0\">\n            {/* Calendar 區包 overflow-y-auto:viewport 壓縮時 calendar 內滾(Material / Carbon\n                date picker idiom)。footer 永遠 in-view(SurfaceFooter shrink-0)。 */}\n            <div className=\"flex-1 min-h-0 overflow-y-auto\">\n              <CalendarTimeContainer\n                showTime={showTime}\n                showSeconds={showSeconds}\n                calendar={\n                  <DateGrid\n                    mode=\"single\"\n                    selected={displayDate}\n                    onSelect={(date) => {\n                      if (!date) return\n                      if (showTime) {\n                        commitDraft(combineDateAndTime(date, draftTime))\n                      } else {\n                        commitDraft(dateToIso(date))\n                        if (!needConfirm) setOpen(false)\n                      }\n                    }}\n                    defaultMonth={displayDate ?? undefined}\n                    autoFocus\n                  />\n                }\n                timePanel={\n                  <TimePickerSidePanel\n                    value={draftTime}\n                    onChange={(time) => {\n                      const target = draftDate ?? new Date()\n                      commitDraft(combineDateAndTime(target, time))\n                    }}\n                    showSeconds={showSeconds}\n                    minuteStep={minuteStep}\n                    secondStep={secondStep}\n                  />\n                }\n              />\n            </div>\n            {showTime && (\n              // Footer:消費 SurfaceFooter SSOT(border-t + canonical px-loose py-tight padding,\n              // 不再 hand-coded p-2 / Separator / ml-auto wrapper 三層垃圾)。\n              // 「此刻」加 mr-auto 把後面 button 推右(對齊 Ant `marginInlineStart: auto` on OK)。\n              <SurfaceFooter>\n                <Button variant=\"tertiary\" size=\"sm\" onClick={handleNow} className=\"mr-auto\">此刻</Button>\n                {needConfirm ? (\n                  <Button variant=\"primary\" size=\"sm\" onClick={handleConfirm} disabled={!draft}>確定</Button>\n                ) : (\n                  <Button variant=\"tertiary\" size=\"sm\" onClick={() => setOpen(false)}>關閉</Button>\n                )}\n              </SurfaceFooter>\n            )}\n          </div>\n        </PopoverContent>\n      </Popover>\n    )\n  }\n)\nDatePicker.displayName = 'DatePicker'\n\n// ── DatePickerRange ─────────────────────────────────────────────────────────\n//\n// Canonical 2026-05-02 v4 — 全對齊 Ant Design RangePicker(WebFetch 實證):\n//\n// **showTime Range**(rc-picker `multiplePanel = false` 證實):\n//   - **1 calendar + 1 time panel**(等同 single DateTimePicker layout)\n//   - 沒 range track 視覺(計算上跟 single 一樣)\n//   - footer **無「此刻」按鈕**(rc-picker `showNow={multiple ? false : showNow}` 證實)\n//   - Click flow:click input → open popup for activeEnd → 編 → 點「確定」commit activeEnd\n//     → if start: switch activeEnd='end' + popup 維持 open;if end: close popup\n//   - Cell disable(rc-picker useRangeDisabledDate 證實):\n//     activeEnd='end' + start 已選 → date < start disabled\n//     activeEnd='start' + end 已選 → date > end disabled\n//\n// **date-only Range**(rc-picker `multiplePanel = true`):\n//   - **2 calendars 並列**(showTime=false 時)\n//   - Full range track 視覺(start / middle / end)\n//   - 走原 RDP mode='range' 配對 click 邏輯 + auto-swap\n//\n// **Trigger**:2 input button,active end blue underline 標示\n\nexport interface DatePickerRangeProps\n  extends DateFormatOptions,\n    Omit<\n      React.HTMLAttributes<HTMLDivElement>,\n      'value' | 'onChange' | 'placeholder' | 'defaultValue'\n    > {\n  mode?: FieldMode\n  /** Field chrome variant. Default = context.variant ?? 'default'. Per-prop override. */\n  variant?: FieldVariant\n  error?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  /** 區間值:[start ISO, end ISO]。任一 null 代表尚未選。 */\n  value?: [string | null, string | null] | null\n  onChange?: (value: [string | null, string | null]) => void\n  /** Placeholder:[start placeholder, end placeholder] */\n  placeholder?: [string, string]\n  className?: string\n  disabled?: boolean\n  clearable?: boolean\n  /** 啟用時間欄位 — value 兩端皆變 ISO datetime */\n  showTime?: boolean\n  showSeconds?: boolean\n  minuteStep?: TimeStep\n  secondStep?: TimeStep\n  needConfirm?: boolean\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst DatePickerRange = React.forwardRef<HTMLDivElement, DatePickerRangeProps>(\n  (\n    {\n      mode = 'edit',\n      variant: variantProp,\n      error: errorProp = false,\n      size = 'md',\n      value,\n      onChange,\n      placeholder,\n      className,\n      disabled: disabledProp,\n      clearable = false,\n      formatOptions,\n      locale,\n      showTime = false,\n      showSeconds = false,\n      minuteStep = 1,\n      secondStep = 1,\n      needConfirm: needConfirmProp,\n      id: idProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-errormessage': ariaErrorMessageProp,\n      ...props\n    },\n    ref,\n  ) => {\n    const fieldCtx = useFieldContext()\n    const error = errorProp || (fieldCtx?.invalid ?? false)\n    const disabled = disabledProp ?? fieldCtx?.disabled\n    const resolvedMode = disabled ? 'disabled' : mode\n    const variant: FieldVariant = variantProp ?? fieldCtx?.variant ?? 'default'\n    const isEditable = resolvedMode === 'edit'\n    // 2026-05-18 改 import ICON_SIZE SSOT(per user『做完』approval,消除 M17 違反 7+ 重複 ternary)\n  const iconSize = ICON_SIZE[size as 'sm' | 'md' | 'lg']\n    const needConfirm = needConfirmProp ?? showTime\n    const resolvedPlaceholder: [string, string] = placeholder ?? (\n      showTime ? ['Start date time', 'End date time'] : ['Start date', 'End date']\n    )\n\n    const [open, setOpen] = React.useState(false)\n    const [draft, setDraft] = React.useState<[string | null, string | null]>(value ?? [null, null])\n    const [activeEnd, setActiveEnd] = React.useState<'start' | 'end'>('start')\n\n    // Sync draft from value ONLY on open false→true(canonical 2026-05-02 v3):\n    // 之前用 `[value, open]` 雙 dep,popover 開啟期間 value 任何 reference 變更 → useEffect\n    // 觸發 → 直接 clobber user 的 draft 編輯。改成只在 open 從 false→true 同步。\n    const lastOpenRef = React.useRef(open)\n    React.useEffect(() => {\n      if (!lastOpenRef.current && open) setDraft(value ?? [null, null])\n      lastOpenRef.current = open\n    }, [open, value])\n\n    const startIso = (needConfirm ? draft[0] : value?.[0]) ?? null\n    const endIso = (needConfirm ? draft[1] : value?.[1]) ?? null\n    const startDate = React.useMemo(() => isoToDate(startIso), [startIso])\n    const endDate = React.useMemo(() => isoToDate(endIso), [endIso])\n    const hasValue = !!(value?.[0] || value?.[1])\n    const showClear = clearable && hasValue && isEditable\n\n    const startText = startIso\n      ? formatDateOrDateTime(startIso, showTime, showSeconds, { formatOptions, locale })\n      : resolvedPlaceholder[0]\n    const endText = endIso\n      ? formatDateOrDateTime(endIso, showTime, showSeconds, { formatOptions, locale })\n      : resolvedPlaceholder[1]\n\n    const activeIso = activeEnd === 'start' ? startIso : endIso\n    const activeDate = activeEnd === 'start' ? startDate : endDate\n    const activeTime = isoToTimeParts(activeIso) ?? { hours: 0, minutes: 0, seconds: 0 }\n\n    // Range visual modifiers(自管,不靠 RDP mode='range'):\n    //   rangeStart:start 那天 → 圓底白字\n    //   rangeEnd:end 那天 → 圓底白字\n    //   rangeMiddle:start+1 ~ end-1 之間的所有天 → 灰底矩形 track\n    const rangeModifiers = React.useMemo(() => {\n      const mods: Record<string, Date | { from: Date; to: Date } | undefined> = {}\n      if (startDate) mods.rangeStart = startDate\n      if (endDate) mods.rangeEnd = endDate\n      if (startDate && endDate) {\n        const middleStart = addDays(startDate, 1)\n        const middleEnd = addDays(endDate, -1)\n        if (middleEnd >= middleStart) {\n          mods.rangeMiddle = { from: middleStart, to: middleEnd }\n        }\n      }\n      return mods\n    }, [startDate, endDate])\n\n    const commitRange = (next: [string | null, string | null]) => {\n      if (needConfirm) setDraft(next)\n      else { onChange?.(next); setDraft(next) }\n    }\n    const setActive = (iso: string | null) => {\n      const nextDraft = activeEnd === 'start'\n        ? ([iso, draft[1]] as [string | null, string | null])\n        : ([draft[0], iso] as [string | null, string | null])\n      commitRange(nextDraft)\n    }\n    /**\n     * Click「確定」canonical(2026-05-02 v4,對齊 Ant Design 序列流程):\n     *   showTime Range:\n     *     - activeEnd='start' → commit start to draft + switch activeEnd='end' + popup 維持 open\n     *     - activeEnd='end'   → commit final draft to value + close popup\n     *   date-only Range(沒有 footer,不會走這 path):— N/A\n     */\n    const handleConfirm = () => {\n      if (showTime && activeEnd === 'start' && draft[0]) {\n        // Start 已填 → switch to end,popup 維持 open\n        setActiveEnd('end')\n      } else {\n        // End 也填好(or non-showTime needConfirm)→ final commit + close\n        onChange?.(draft)\n        setOpen(false)\n      }\n    }\n    const handleNow = () => {\n      setActive(showTime ? nowIsoDateTime() : dateToIso(new Date()))\n    }\n    const handleClearRange = (e?: React.MouseEvent) => {\n      e?.stopPropagation()\n      // Clear = 立刻 commit + 同步 draft(對齊 single mode + user 體感)\n      // dual-state 同步,否則 popover 開著時 displayValue=draft 仍顯示舊 [start, end]\n      onChange?.([null, null])\n      setDraft([null, null])\n    }\n    const openWithActive = (which: 'start' | 'end') => {\n      setActiveEnd(which)\n      setOpen(true)\n    }\n    /**\n     * Cell disable(對齊 Ant rc-picker `useRangeDisabledDate`):\n     *   activeEnd='end' + start 已選 → date < start 被 disable(同日 OK)\n     *   activeEnd='start' + end 已選 → date > end 被 disable(同日 OK)\n     * 防 user 點下違反順序的日期(start > end / end < start)。\n     */\n    const isOutOfRangeOrder = React.useCallback((date: Date): boolean => {\n      // ⚠️ 必先 clone(new Date(...)),否則 setHours 會 mutate useMemo'd date 物件\n      if (activeEnd === 'end' && startDate) {\n        const startMidnight = new Date(startDate.getTime())\n        startMidnight.setHours(0, 0, 0, 0)\n        return date.getTime() < startMidnight.getTime()\n      }\n      if (activeEnd === 'start' && endDate) {\n        const endEndOfDay = new Date(endDate.getTime())\n        endEndOfDay.setHours(23, 59, 59, 999)\n        return date.getTime() > endEndOfDay.getTime()\n      }\n      return false\n    }, [activeEnd, startDate, endDate])\n\n    // mode='display'(Phase B2 2026-05-05):純內容輸出 — 無 Field wrapper / 無 Calendar icon。\n    if (resolvedMode === 'display') {\n      const hasAny = !!(startIso || endIso)\n      if (!hasAny) return <span className={cn('text-fg-muted', className)}>{EMPTY_DISPLAY}</span>\n      return (\n        <span className={cn('inline-flex items-center min-w-0', nakedCellRowModeAlign, className)}>\n          <span className={cn('truncate', !startIso && 'text-fg-muted')}>\n            {startIso ? formatDateOrDateTime(startIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[0]}\n          </span>\n          <ArrowRight size={iconSize} className=\"shrink-0 text-fg-muted mx-2\" aria-hidden />\n          <span className={cn('truncate', !endIso && 'text-fg-muted')}>\n            {endIso ? formatDateOrDateTime(endIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[1]}\n          </span>\n        </span>\n      )\n    }\n\n    // readonly / disabled view — plain wrapper,no popover\n    if (!isEditable) {\n      return (\n        <div\n          ref={ref}\n          className={cn(fieldWrapperStyles({ mode: resolvedMode, variant: variant, size }), className)}\n          data-field-mode={resolvedMode}\n          {...props}\n        >\n          <span className={cn('flex-1 min-w-0 truncate', !startIso && 'text-fg-muted', resolvedMode === 'disabled' && 'text-fg-disabled')}>\n            {startIso ? formatDateOrDateTime(startIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[0]}\n          </span>\n          <ArrowRight size={iconSize} className=\"shrink-0 text-fg-muted mx-2\" aria-hidden />\n          <span className={cn('flex-1 min-w-0 truncate', !endIso && 'text-fg-muted', resolvedMode === 'disabled' && 'text-fg-disabled')}>\n            {endIso ? formatDateOrDateTime(endIso, showTime, showSeconds, { formatOptions, locale }) : resolvedPlaceholder[1]}\n          </span>\n          <ItemSuffix className=\"pointer-events-none\">\n            <CalendarIcon size={iconSize} className=\"text-fg-muted\" aria-hidden />\n          </ItemSuffix>\n        </div>\n      )\n    }\n\n    return (\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverAnchor asChild>\n          <div\n            ref={ref}\n            id={idProp ?? fieldCtx?.id}\n            aria-invalid={error || undefined}\n            aria-required={fieldCtx?.required || undefined}\n            aria-describedby={ariaDescribedByProp ?? fieldCtx?.descriptionId}\n            aria-errormessage={ariaErrorMessageProp ?? (error ? fieldCtx?.errorId : undefined)}\n            data-field-mode=\"edit\"\n            data-error={error ? '' : undefined}\n            data-state={open ? 'open' : 'closed'}\n            className={cn(\n              fieldWrapperStyles({ mode: 'edit', size }),\n              'cursor-text',\n              error && [\n                'border-error hover:border-error-hover',\n                'focus-within:border-error focus-within:hover:border-error',\n              ],\n              className,\n            )}\n            {...props}\n          >\n            <button\n              type=\"button\"\n              onClick={() => openWithActive('start')}\n              data-active-end={open && activeEnd === 'start' ? 'true' : undefined}\n              aria-label={resolvedPlaceholder[0]}\n              aria-haspopup=\"dialog\"\n              aria-expanded={open && activeEnd === 'start'}\n              className={cn(\n                bareInputStyles,\n                'truncate text-left cursor-pointer focus-visible:outline-none',\n                'data-[active-end=true]:underline decoration-primary underline-offset-4 decoration-2',\n                !startIso && 'text-fg-muted',\n              )}\n            >\n              {startText}\n            </button>\n            <ArrowRight size={iconSize} className=\"shrink-0 text-fg-muted mx-2\" aria-hidden />\n            <button\n              type=\"button\"\n              onClick={() => openWithActive('end')}\n              data-active-end={open && activeEnd === 'end' ? 'true' : undefined}\n              aria-label={resolvedPlaceholder[1]}\n              aria-haspopup=\"dialog\"\n              aria-expanded={open && activeEnd === 'end'}\n              className={cn(\n                bareInputStyles,\n                'truncate text-left cursor-pointer focus-visible:outline-none',\n                'data-[active-end=true]:underline decoration-primary underline-offset-4 decoration-2',\n                !endIso && 'text-fg-muted',\n              )}\n            >\n              {endText}\n            </button>\n            {showClear && (\n              <ItemInlineAction\n                size={size ?? 'md'}\n                action={{\n                  icon: X,\n                  label: '清除日期區間', // i18n-allow: DS default inline-action label\n                  onClick: handleClearRange,\n                }}\n              />\n            )}\n            <ItemSuffix className=\"pointer-events-none\">\n              <CalendarIcon size={iconSize} className=\"text-fg-muted\" aria-hidden />\n            </ItemSuffix>\n          </div>\n        </PopoverAnchor>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          {/* 2026-05-06 v9.1 M25 chain — 同 single DatePicker 修法,viewport 壓縮 calendar 內滾 + footer 永遠 in-view */}\n          <div role=\"dialog\" aria-label=\"日期區間選擇\" className=\"flex flex-col flex-1 min-h-0\">\n            <div className=\"flex-1 min-h-0 overflow-y-auto\">\n            <CalendarTimeContainer\n              showTime={showTime}\n              showSeconds={showSeconds}\n              calendar={\n                <DateGrid\n                  // mode='single' + manual modifiers(canonical 2026-05-02 v3):\n                  // 不用 RDP 內建 mode='range'(它的 click 配對邏輯跟我們的 activeEnd 衝突,\n                  // 造成「點一次沒反應 / 要點兩次」bug)。改自管 modifiers 控視覺。\n                  // showTime Range:rangeModifiers 為空(不顯示 range track,對齊 Ant)\n                  mode=\"single\"\n                  selected={activeDate}\n                  onSelect={(date) => {\n                    if (!date) return\n                    if (isOutOfRangeOrder(date)) return  // 防護:disable 邏輯內 click 已被 RDP 擋,但雙保險\n                    const preservedTime = isoToTimeParts(activeEnd === 'start' ? draft[0] : draft[1]) ?? activeTime\n                    const nextIso = showTime\n                      ? combineDateAndTime(date, preservedTime)\n                      : dateToIso(date)\n                    const nextDraft: [string | null, string | null] = activeEnd === 'start'\n                      ? [nextIso, draft[1]]\n                      : [draft[0], nextIso]\n                    commitRange(nextDraft)\n                    // Auto-advance / close logic:\n                    if (!showTime) {\n                      // date-only Range:選完 start 自動切 end;兩端皆填 + 不需確認 → 關閉\n                      if (activeEnd === 'start') {\n                        setActiveEnd('end')\n                        if (!needConfirm && nextDraft[0] && nextDraft[1]) setOpen(false)\n                      } else if (!needConfirm && nextDraft[0] && nextDraft[1]) {\n                        setOpen(false)\n                      }\n                    }\n                    // showTime Range:不 auto-advance,讓 user 編 time 後手動按確定 commit\n                    // (對齊 Ant 序列流程 — 確定 button 切 activeEnd)\n                  }}\n                  // showTime Range:不渲 range visualization(對齊 Ant — 整個 popup 等同 single\n                  // DateTimePicker,沒 range 視覺概念);date-only Range 才顯示\n                  modifiers={showTime ? {} : rangeModifiers}\n                  modifiersClassNames={{\n                    // ── Range visual canonical(2026-05-03 v8 stadium pattern)──\n                    // v5 修「白色破圖」用 pseudo 蓋全 cell 矩形,但新副作用:button 圓比矩形小,\n                    // 4 corner triangle 區域 grey 凸出圓外(user 2026-05-03 抓到「凸出去」)。\n                    // v8 對齊 Ant `cell-range-start::before { border-radius: 9999px 0 0 9999px }`:\n                    // rangeStart pseudo 加 `rounded-l-full` → pseudo 變「左半圓 + 右矩形」stadium\n                    // 左半圓 EXACTLY OVERLAY button 圓的左半弧(同 center 同 radius 14)→ 無縫\n                    // 右側矩形 bridge 2px to middle → 跟 middle pseudo 連續\n                    // Cell 的 top-left + bottom-left corner triangle:pseudo 不蓋 + button 不蓋 →\n                    // popover white 顯露(乾淨 breathing)\n                    rangeStart: cn(\n                      '[&>button]:!bg-primary [&>button]:!text-on-emphasis [&>button]:hover:!ring-0',\n                      \"before:content-[''] before:absolute before:inset-y-0\",\n                      'before:left-0 before:-right-[2px]',\n                      'before:bg-neutral-selected before:pointer-events-none',\n                      'before:rounded-l-full',  // ← stadium 左半圓 matches button 圓的左半弧\n                    ),\n                    rangeEnd: cn(\n                      '[&>button]:!bg-primary [&>button]:!text-on-emphasis [&>button]:hover:!ring-0',\n                      \"before:content-[''] before:absolute before:inset-y-0\",\n                      'before:-left-[2px] before:right-0',\n                      'before:bg-neutral-selected before:pointer-events-none',\n                      'before:rounded-r-full',  // ← 鏡像\n                    ),\n                    rangeMiddle: cn(\n                      \"before:content-[''] before:absolute before:inset-y-0 before:-inset-x-[2px]\",\n                      'before:bg-neutral-selected before:pointer-events-none',\n                      '[&>button]:!bg-transparent [&>button]:!text-foreground',\n                    ),\n                  }}\n                  // Cell disable:防 user 點下違反順序的日期(對齊 Ant useRangeDisabledDate)\n                  disabled={isOutOfRangeOrder}\n                  // showTime → 1 cal(對齊 Ant `multiplePanel=false`);date-only → 2 cal(`multiplePanel=true`)\n                  numberOfMonths={showTime ? 1 : 2}\n                  defaultMonth={activeDate ?? startDate ?? endDate ?? undefined}\n                  autoFocus\n                />\n              }\n              timePanel={\n                <TimePickerSidePanel\n                  value={activeTime}\n                  onChange={(time) => {\n                    const target = activeDate ?? new Date()\n                    setActive(combineDateAndTime(target, time))\n                  }}\n                  showSeconds={showSeconds}\n                  minuteStep={minuteStep}\n                  secondStep={secondStep}\n                />\n              }\n            />\n            </div>\n            {(showTime || needConfirm) && (\n            // Footer 消費 SurfaceFooter SSOT(border-t + canonical px-loose py-tight)。\n            // showTime Range 無「此刻」(對齊 Ant `showNow={multiple ? false : showNow}`)→ 只有 確定 走 justify-end。\n            // date-only Range needConfirm:左 此刻(mr-auto)+ 右 確定。\n            <SurfaceFooter>\n              {!showTime && (\n                <Button variant=\"tertiary\" size=\"sm\" onClick={handleNow} className=\"mr-auto\">此刻</Button>\n              )}\n              {needConfirm ? (\n                <Button\n                  variant=\"primary\"\n                  size=\"sm\"\n                  onClick={handleConfirm}\n                  // showTime Range serial flow:start mode 只需 start filled;end mode 兩端皆 filled\n                  disabled={\n                    showTime\n                      ? (activeEnd === 'start' ? !draft[0] : !draft[0] || !draft[1])\n                      : !draft[0] || !draft[1]\n                  }\n                >\n                  確定\n                </Button>\n              ) : (\n                <Button variant=\"tertiary\" size=\"sm\" onClick={() => setOpen(false)}>關閉</Button>\n              )}\n            </SurfaceFooter>\n          )}\n          </div>\n        </PopoverContent>\n      </Popover>\n    )\n  },\n)\nDatePickerRange.displayName = 'DatePickerRange'\n\n// Attach Range as namespace:consumer 用 <DatePicker.Range ...>(Ant-style)\n// 走 Object.assign 確保 TS 型別帶上 Range 屬性,而非只做 runtime 附掛\nconst DatePickerWithRange = Object.assign(DatePicker, { Range: DatePickerRange })\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const datePickerMeta = {\n  component: 'DatePicker',\n  family: 4,\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: [],\n    fg: ['text-fg-disabled', 'text-fg-muted'],\n    ring: [],\n  },\n} as const\n\nexport {\n  DatePickerWithRange as DatePicker,\n  DatePickerRange,\n  formatDate,\n}\n"],"names":["CalendarIcon"],"mappings":"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"}

package/dist/components/DescriptionList/description-list.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+/**
+ * DescriptionList — 唯讀 label + value 展示
+ *
+ * HTML 語義：dl + dt + dd（跟 Atlassian、Shopify Polaris 對齊）。
+ *
+ * ── Typography（兩個方向都一致）──
+ * label (dt): text-body (14px) text-fg-secondary (neutral-8)
+ * value (dd): text-body (14px) text-foreground (neutral-9)
+ * 兩者都是 14px × 1.5 行高——層級靠色彩區分，不靠字體大小。
+ *
+ * ── direction（2026-04-20 新增）──
+ * vertical（預設）：label 在上 / value 在下，適合長 value（地址、bio、說明段落）、
+ *                   form-like 資訊展示
+ * horizontal     ：label 左 / value 右對齊，適合短 value 的 metadata 列
+ *                   （檔案資訊、訂單詳情、settings summary）— Google Drive /
+ *                   Notion file info panel 模式
+ *
+ * ── divided（horizontal 專用，預設 false）──
+ * 每個 item 下方加 `border-b border-divider`，rows 視覺對齊。長列表、key 長度
+ * 不一時需要對齊格線才易讀 → 開 divided；短列表（< 4 rows）不需要。
+ *
+ * ── 間距 ──
+ * vertical: label → value（同 item 內）: `var(--item-gap-label-desc)` token（預設 2px,item-anatomy SSOT）
+ * horizontal: label ↔ value: gap-x-4（16px）最小間距
+ * items 之間垂直 gap: layout-space-tight（density-aware）
+ * divided horizontal 模式：每 item py-[var(--layout-space-tight)]（cell-like row 高度）
+ */
+export type DescriptionDirection = 'vertical' | 'horizontal';
+export interface DescriptionListProps extends React.HTMLAttributes<HTMLDListElement> {
+    /** grid 欄數（vertical 才生效；horizontal 永遠單欄），預設 1 */
+    cols?: 1 | 2 | 3;
+    /** 項目排列方向，預設 vertical（label 在上 / value 在下） */
+    direction?: DescriptionDirection;
+    /**
+     * horizontal 模式下每個 item 下方加分隔線以對齊 rows。預設 false。
+     * 短列表（< 4 rows）不需要；檔案 metadata 等長列表、key 長度不一時建議開。
+     */
+    divided?: boolean;
+}
+declare const DescriptionList: React.ForwardRefExoticComponent<DescriptionListProps & React.RefAttributes<HTMLDListElement>>;
+export interface DescriptionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    label: string;
+    children: React.ReactNode;
+}
+declare const DescriptionItem: React.ForwardRefExoticComponent<DescriptionItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const descriptionListMeta: {
+    readonly component: "DescriptionList";
+    readonly family: null;
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly [];
+        readonly fg: readonly ["text-fg-secondary", "text-foreground"];
+        readonly ring: readonly [];
+    };
+};
+export { DescriptionList, DescriptionItem };
+//# sourceMappingURL=description-list.d.ts.map

package/dist/components/DescriptionList/description-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"description-list.d.ts","sourceRoot":"","sources":["../../../src/components/DescriptionList/description-list.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,YAAY,CAAA;AAY5D,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAClF,iDAAiD;IACjD,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IAChB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,oBAAoB,CAAA;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAQD,QAAA,MAAM,eAAe,+FAoBpB,CAAA;AAGD,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChF,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,eAAe,6FA4BpB,CAAA;AAKD,eAAO,MAAM,mBAAmB;;;;;;;;;;;CAetB,CAAA;AAEV,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/DescriptionList/description-list.js

@@ -0,0 +1,77 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const DescriptionContext = React.createContext({
+  direction: "vertical",
+  divided: false
+});
+const colsClass = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3"
+};
+const DescriptionList = React.forwardRef(
+  ({ cols = 1, direction = "vertical", divided = false, className, ...props }, ref) => {
+    const isHorizontal = direction === "horizontal";
+    const ctxValue = React.useMemo(() => ({ direction, divided }), [direction, divided]);
+    return /* @__PURE__ */ jsx(DescriptionContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(
+      "dl",
+      {
+        ref,
+        className: cn(
+          isHorizontal ? "flex flex-col" : cn("grid gap-x-4 gap-y-[var(--layout-space-tight)]", colsClass[cols]),
+          className
+        ),
+        ...props
+      }
+    ) });
+  }
+);
+DescriptionList.displayName = "DescriptionList";
+const DescriptionItem = React.forwardRef(
+  ({ label, children, className, ...props }, ref) => {
+    const { direction, divided } = React.useContext(DescriptionContext);
+    if (direction === "horizontal") {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          className: cn(
+            "flex items-baseline justify-between gap-4",
+            divided ? "py-[var(--layout-space-tight)] border-b border-divider last:border-b-0" : "mb-[var(--layout-space-tight)] last:mb-0",
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx("dt", { className: "text-body text-fg-secondary shrink-0", children: label }),
+            /* @__PURE__ */ jsx("dd", { className: "text-body text-foreground text-right break-all min-w-0", children })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col", className), ...props, children: [
+      /* @__PURE__ */ jsx("dt", { className: "text-body text-fg-secondary", children: label }),
+      /* @__PURE__ */ jsx("dd", { className: "text-body mt-[var(--item-gap-label-desc-reading)]", children })
+    ] });
+  }
+);
+DescriptionItem.displayName = "DescriptionItem";
+const descriptionListMeta = {
+  component: "DescriptionList",
+  family: null,
+  // non-family composite / overlay / layout
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: [],
+    fg: ["text-fg-secondary", "text-foreground"],
+    ring: []
+  }
+};
+export {
+  DescriptionItem,
+  DescriptionList,
+  descriptionListMeta
+};
+//# sourceMappingURL=description-list.js.map

package/dist/components/DescriptionList/description-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"description-list.js","sources":["../../../src/components/DescriptionList/description-list.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\n\n/**\n * DescriptionList — 唯讀 label + value 展示\n *\n * HTML 語義：dl + dt + dd（跟 Atlassian、Shopify Polaris 對齊）。\n *\n * ── Typography（兩個方向都一致）──\n * label (dt): text-body (14px) text-fg-secondary (neutral-8)\n * value (dd): text-body (14px) text-foreground (neutral-9)\n * 兩者都是 14px × 1.5 行高——層級靠色彩區分，不靠字體大小。\n *\n * ── direction（2026-04-20 新增）──\n * vertical（預設）：label 在上 / value 在下，適合長 value（地址、bio、說明段落）、\n *                   form-like 資訊展示\n * horizontal     ：label 左 / value 右對齊，適合短 value 的 metadata 列\n *                   （檔案資訊、訂單詳情、settings summary）— Google Drive /\n *                   Notion file info panel 模式\n *\n * ── divided（horizontal 專用，預設 false）──\n * 每個 item 下方加 `border-b border-divider`，rows 視覺對齊。長列表、key 長度\n * 不一時需要對齊格線才易讀 → 開 divided；短列表（< 4 rows）不需要。\n *\n * ── 間距 ──\n * vertical: label → value（同 item 內）: `var(--item-gap-label-desc)` token（預設 2px,item-anatomy SSOT）\n * horizontal: label ↔ value: gap-x-4（16px）最小間距\n * items 之間垂直 gap: layout-space-tight（density-aware）\n * divided horizontal 模式：每 item py-[var(--layout-space-tight)]（cell-like row 高度）\n */\n\nexport type DescriptionDirection = 'vertical' | 'horizontal'\n\ninterface DescriptionContextValue {\n  direction: DescriptionDirection\n  divided: boolean\n}\n\nconst DescriptionContext = React.createContext<DescriptionContextValue>({\n  direction: 'vertical',\n  divided: false,\n})\n\nexport interface DescriptionListProps extends React.HTMLAttributes<HTMLDListElement> {\n  /** grid 欄數（vertical 才生效；horizontal 永遠單欄），預設 1 */\n  cols?: 1 | 2 | 3\n  /** 項目排列方向，預設 vertical（label 在上 / value 在下） */\n  direction?: DescriptionDirection\n  /**\n   * horizontal 模式下每個 item 下方加分隔線以對齊 rows。預設 false。\n   * 短列表（< 4 rows）不需要；檔案 metadata 等長列表、key 長度不一時建議開。\n   */\n  divided?: boolean\n}\n\nconst colsClass: Record<number, string> = {\n  1: 'grid-cols-1',\n  2: 'grid-cols-2',\n  3: 'grid-cols-3',\n}\n\nconst DescriptionList = React.forwardRef<HTMLDListElement, DescriptionListProps>(\n  ({ cols = 1, direction = 'vertical', divided = false, className, ...props }, ref) => {\n    const isHorizontal = direction === 'horizontal'\n    // Memoize provider value(2026-04-22 D3 perf audit):避免每 render 重建 2-field object\n    const ctxValue = React.useMemo(() => ({ direction, divided }), [direction, divided])\n    return (\n      <DescriptionContext.Provider value={ctxValue}>\n        <dl\n          ref={ref}\n          className={cn(\n            isHorizontal\n              ? 'flex flex-col'\n              : cn('grid gap-x-4 gap-y-[var(--layout-space-tight)]', colsClass[cols]),\n            className,\n          )}\n          {...props}\n        />\n      </DescriptionContext.Provider>\n    )\n  },\n)\nDescriptionList.displayName = 'DescriptionList'\n\nexport interface DescriptionItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  label: string\n  children: React.ReactNode\n}\n\nconst DescriptionItem = React.forwardRef<HTMLDivElement, DescriptionItemProps>(\n  ({ label, children, className, ...props }, ref) => {\n    const { direction, divided } = React.useContext(DescriptionContext)\n    if (direction === 'horizontal') {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            'flex items-baseline justify-between gap-4',\n            divided\n              ? 'py-[var(--layout-space-tight)] border-b border-divider last:border-b-0'\n              : 'mb-[var(--layout-space-tight)] last:mb-0',\n            className,\n          )}\n          {...props}\n        >\n          <dt className=\"text-body text-fg-secondary shrink-0\">{label}</dt>\n          <dd className=\"text-body text-foreground text-right break-all min-w-0\">{children}</dd>\n        </div>\n      )\n    }\n    return (\n      <div ref={ref} className={cn('flex flex-col', className)} {...props}>\n        <dt className=\"text-body text-fg-secondary\">{label}</dt>\n        <dd className=\"text-body mt-[var(--item-gap-label-desc-reading)]\">{children}</dd>\n      </div>\n    )\n  },\n)\nDescriptionItem.displayName = 'DescriptionItem'\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const descriptionListMeta = {\n  component: 'DescriptionList',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: [],\n    fg: ['text-fg-secondary', 'text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport { DescriptionList, DescriptionItem }\n"],"names":[],"mappings":";;;AAuCA,MAAM,qBAAqB,MAAM,cAAuC;AAAA,EACtE,WAAW;AAAA,EACX,SAAS;AACX,CAAC;AAcD,MAAM,YAAoC;AAAA,EACxC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,OAAO,GAAG,YAAY,YAAY,UAAU,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AACnF,UAAM,eAAe,cAAc;AAEnC,UAAM,WAAW,MAAM,QAAQ,OAAO,EAAE,WAAW,QAAA,IAAY,CAAC,WAAW,OAAO,CAAC;AACnF,WACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,UAClC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,eACI,kBACA,GAAG,kDAAkD,UAAU,IAAI,CAAC;AAAA,UACxE;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;AAO9B,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,OAAO,UAAU,WAAW,GAAG,MAAA,GAAS,QAAQ;AACjD,UAAM,EAAE,WAAW,QAAA,IAAY,MAAM,WAAW,kBAAkB;AAClE,QAAI,cAAc,cAAc;AAC9B,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA,UACI,2EACA;AAAA,YACJ;AAAA,UAAA;AAAA,UAED,GAAG;AAAA,UAEJ,UAAA;AAAA,YAAA,oBAAC,MAAA,EAAG,WAAU,wCAAwC,UAAA,OAAM;AAAA,YAC5D,oBAAC,MAAA,EAAG,WAAU,0DAA0D,SAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGvF;AACA,WACE,qBAAC,SAAI,KAAU,WAAW,GAAG,iBAAiB,SAAS,GAAI,GAAG,OAC5D,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,WAAU,+BAA+B,UAAA,OAAM;AAAA,MACnD,oBAAC,MAAA,EAAG,WAAU,qDAAqD,SAAA,CAAS;AAAA,IAAA,GAC9E;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;AAIvB,MAAM,sBAAsB;AAAA,EACjC,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAC,qBAAqB,iBAAiB;AAAA,IAC3C,MAAM,CAAA;AAAA,EAAC;AAEX;"}

package/dist/components/Dialog/dialog.d.ts

@@ -0,0 +1,54 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { type SurfaceHeaderProps } from "../../patterns/overlay-surface/overlay-surface";
+/**
+ * Dialog (Modal) — Radix Dialog + 設計系統 token
+ *
+ * ── Layout ──
+ * px = layout-space-loose, header/footer py = layout-space-tight。
+ * Body pt = layout-space-tight, pb = layout-space-bottom。
+ * Density:繼承 page `data-density`(v5 校準,跟 Sheet 對齊;header 自動對齊
+ * `--chrome-header-height` 48/56)。詳 dialog.spec.md「Density」節。
+ *
+ * ── Viewport Inset ──
+ * Modal 與 viewport 四邊保持 layout-space-bottom (48px) 最小間距。
+ *
+ * ── 高度行為 ──
+ * 預設：height 填滿 viewport（扣除 inset），body 捲動。防止動態內容跳動。
+ * height="auto"：高度隨內容，超過 viewport 時 max-height 安全帽。
+ */
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /** 最大寬度。預設 512px。傳 number 視為 px。 */
+    maxWidth?: string | number;
+    /**
+     * 高度模式。
+     * - 不傳（預設）：填滿 viewport（height = 100vh - inset*2），body 捲動。防止內容跳動。
+     * - true：高度隨內容，超過 viewport 時捲動（max-height 安全帽）。
+     */
+    autoHeight?: boolean;
+}
+declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: React.ForwardRefExoticComponent<SurfaceHeaderProps & React.RefAttributes<HTMLDivElement>>;
+declare const DialogBody: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-scroll-area").ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export declare const dialogMeta: {
+    readonly component: "Dialog";
+    readonly family: null;
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly ["bg-surface-raised"];
+        readonly fg: readonly ["text-fg-secondary"];
+        readonly ring: readonly [];
+    };
+};
+export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogDescription, };
+//# sourceMappingURL=dialog.d.ts.map

package/dist/components/Dialog/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAKzD,OAAO,EAAgC,KAAK,kBAAkB,EAAE,MAAM,0DAA0D,CAAA;AAGhI;;;;;;;;;;;;;;;GAeG;AAEH,QAAA,MAAM,MAAM,uCAAuB,CAAA;AACnC,QAAA,MAAM,aAAa,8GAA0B,CAAA;AAC7C,QAAA,MAAM,YAAY,6CAAyB,CAAA;AAC3C,QAAA,MAAM,WAAW,4GAAwB,CAAA;AAKzC,QAAA,MAAM,aAAa,8JAcjB,CAAA;AAGF,UAAU,kBAAmB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC;IACjG,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,QAAA,MAAM,aAAa,2FAiEjB,CAAA;AASF,QAAA,MAAM,YAAY,2FAsBhB,CAAA;AA0BF,QAAA,MAAM,UAAU,oOAcd,CAAA;AAIF,QAAA,MAAM,YAAY,6GAGiE,CAAA;AAGnF,QAAA,MAAM,WAAW,oKASf,CAAA;AAGF,QAAA,MAAM,iBAAiB,8KAWrB,CAAA;AAKF,eAAO,MAAM,UAAU;;;;;;;;;;;CAeb,CAAA;AAEV,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAA"}

package/dist/components/Dialog/dialog.js

@@ -0,0 +1,151 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../Button/button.js";
+import { SurfaceFooter, SurfaceHeader } from "../../patterns/overlay-surface/overlay-surface.js";
+import { ScrollArea } from "../ScrollArea/scroll-area.js";
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+const DIALOG_INSET_VAR = "var(--layout-space-bottom)";
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-overlay",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out motion-reduce:animate-none",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const DialogContent = React.forwardRef(({ className, maxWidth = "512px", autoHeight, children, style, ...props }, ref) => {
+  const insetCalc = `${DIALOG_INSET_VAR} * 2`;
+  const viewportH = `calc(100vh - ${insetCalc})`;
+  const maxWidthCss = typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth;
+  const heightStyle = autoHeight ? { maxHeight: viewportH } : { height: viewportH };
+  const handleOpenAutoFocus = (e) => {
+    e.preventDefault();
+    const content = e.currentTarget;
+    const firstBodyTarget = content.querySelector(
+      "[data-dialog-body] input:not([disabled]),[data-dialog-body] textarea:not([disabled]),[data-dialog-body] select:not([disabled]),[data-dialog-body] button:not([disabled]):not([data-dismiss])"
+    );
+    const firstFooterButton = content.querySelector(
+      "[data-dialog-footer] button:not([disabled]):not([data-dismiss])"
+    );
+    (firstBodyTarget ?? firstFooterButton ?? content).focus({ preventScroll: true });
+  };
+  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      DialogPrimitive.Content,
+      {
+        ref,
+        onOpenAutoFocus: handleOpenAutoFocus,
+        className: cn(
+          "fixed left-1/2 top-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2",
+          "flex flex-col bg-surface-raised rounded-lg border border-border",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out motion-reduce:animate-none",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+          "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+          className
+        ),
+        style: {
+          boxShadow: "var(--elevation-200)",
+          maxWidth: `min(${maxWidthCss}, calc(100vw - ${insetCalc}))`,
+          ...heightStyle,
+          ...style
+        },
+        ...props,
+        children
+      }
+    )
+  ] });
+});
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+const DialogHeader = React.forwardRef(({ className, children, ...props }, ref) => (
+  // 2026-05-18:className 不再硬加 justify-between(冗餘:row 1 是 flex items-center gap-2,
+  // 第一 child flex-1 grow 自然 push close X 靠右,跟 justify-between 同視覺)。
+  // 並且 column mode(tabsSlot 提供)justify-between 會把 row 1 / row 2 上下推開 = 破裂。
+  // tabsSlot via `...props` spread 自動 forward(type 來自 SurfaceHeaderProps)。
+  /* @__PURE__ */ jsxs(
+    SurfaceHeader,
+    {
+      ref,
+      className,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children }),
+        /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { "data-dismiss": true, iconOnly: true, dismiss: true, size: "sm", startIcon: X, "aria-label": "關閉" }) })
+      ]
+    }
+  )
+));
+DialogHeader.displayName = "DialogHeader";
+const DialogBody = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(ScrollArea, { ref, "data-dialog-body": true, className: "flex-1 min-h-0", ...props, children: /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "px-[var(--layout-space-loose)] pt-[var(--layout-space-tight)] pb-[var(--layout-space-bottom)]",
+      className
+    ),
+    children
+  }
+) }));
+DialogBody.displayName = "DialogBody";
+const DialogFooter = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(SurfaceFooter, { ref, "data-dialog-footer": true, ...props }));
+DialogFooter.displayName = "DialogFooter";
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-body-lg font-medium truncate", className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("mt-[var(--item-gap-label-desc-reading-lg)] text-body text-fg-secondary", className),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+const dialogMeta = {
+  component: "Dialog",
+  family: null,
+  // non-family composite / overlay / layout
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: ["bg-surface-raised"],
+    fg: ["text-fg-secondary"],
+    ring: []
+  }
+};
+export {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  dialogMeta
+};
+//# sourceMappingURL=dialog.js.map

package/dist/components/Dialog/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sources":["../../../src/components/Dialog/dialog.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { X as XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/design-system/components/Button/button\"\nimport { SurfaceHeader, SurfaceFooter, type SurfaceHeaderProps } from \"@/design-system/patterns/overlay-surface/overlay-surface\"\nimport { ScrollArea } from \"@/design-system/components/ScrollArea/scroll-area\"\n\n/**\n * Dialog (Modal) — Radix Dialog + 設計系統 token\n *\n * ── Layout ──\n * px = layout-space-loose, header/footer py = layout-space-tight。\n * Body pt = layout-space-tight, pb = layout-space-bottom。\n * Density:繼承 page `data-density`(v5 校準,跟 Sheet 對齊;header 自動對齊\n * `--chrome-header-height` 48/56)。詳 dialog.spec.md「Density」節。\n *\n * ── Viewport Inset ──\n * Modal 與 viewport 四邊保持 layout-space-bottom (48px) 最小間距。\n *\n * ── 高度行為 ──\n * 預設：height 填滿 viewport（扣除 inset），body 捲動。防止動態內容跳動。\n * height=\"auto\"：高度隨內容，超過 viewport 時 max-height 安全帽。\n */\n\nconst Dialog = DialogPrimitive.Root\nconst DialogTrigger = DialogPrimitive.Trigger\nconst DialogPortal = DialogPrimitive.Portal\nconst DialogClose = DialogPrimitive.Close\n\n// Modal 與 viewport 四邊的最小間距 = layout-space-bottom (48px)\nconst DIALOG_INSET_VAR = 'var(--layout-space-bottom)'\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-overlay\",\n      \"data-[state=open]:animate-in data-[state=closed]:animate-out motion-reduce:animate-none\",\n      \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className,\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\ninterface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /** 最大寬度。預設 512px。傳 number 視為 px。 */\n  maxWidth?: string | number\n  /**\n   * 高度模式。\n   * - 不傳（預設）：填滿 viewport（height = 100vh - inset*2），body 捲動。防止內容跳動。\n   * - true：高度隨內容，超過 viewport 時捲動（max-height 安全帽）。\n   */\n  autoHeight?: boolean\n}\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(({ className, maxWidth = '512px', autoHeight, children, style, ...props }, ref) => {\n  const insetCalc = `${DIALOG_INSET_VAR} * 2`\n  const viewportH = `calc(100vh - ${insetCalc})`\n  const maxWidthCss = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth\n\n  const heightStyle: React.CSSProperties = autoHeight\n    ? { maxHeight: viewportH }\n    : { height: viewportH }\n\n  // AutoFocus canonical(對齊 Material / Polaris / Atlassian)—\n  // 開啟時 focus 落在 body 第一個有意義互動元素(input / button),不是 chrome close X。\n  // 預設 Radix 會 focus first tabbable = close X → Button iconOnly 的 focus-triggered\n  // tooltip 會立即顯示「關閉」,user-hostile。此 callback 攔截:先找 body 第一個\n  // input/textarea/select/button(排除 data-dismiss)focus;找不到就 focus container(不 focus X)。\n  const handleOpenAutoFocus = (e: Event) => {\n    e.preventDefault()\n    const content = e.currentTarget as HTMLElement\n    const firstBodyTarget = content.querySelector<HTMLElement>(\n      '[data-dialog-body] input:not([disabled]),[data-dialog-body] textarea:not([disabled]),[data-dialog-body] select:not([disabled]),[data-dialog-body] button:not([disabled]):not([data-dismiss])'\n    )\n    const firstFooterButton = content.querySelector<HTMLElement>(\n      '[data-dialog-footer] button:not([disabled]):not([data-dismiss])'\n    )\n    ;(firstBodyTarget ?? firstFooterButton ?? content).focus({ preventScroll: true })\n  }\n\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        ref={ref}\n        // Density canonical(2026-04-22 v5 校準):Dialog 繼承 page density(跟 Sheet 對齊\n        // sheet.tsx line 111 canonical),不自設 data-layout-space=\"lg\" 或 data-density。\n        //\n        // 先前曾設 `data-layout-space=\"lg\"` 給 header/body 寬鬆呼吸,但跟 chrome-header-height\n        // canonical 衝突(md page dialog header 期望 48,強設 lg 會變 56)。\n        // 世界級對照:Polaris Modal horizontal padding 16 / Material M3 24 / Atlassian 24 — 16 是\n        // 合理 lower bound;md page 用 16 loose body padding 可接受,lg page 自動 24。\n        // 詳 overlay-surface.spec.md「Chrome dismiss size canonical」\n        onOpenAutoFocus={handleOpenAutoFocus}\n        className={cn(\n          \"fixed left-1/2 top-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2\",\n          \"flex flex-col bg-surface-raised rounded-lg border border-border\",\n          \"data-[state=open]:animate-in data-[state=closed]:animate-out motion-reduce:animate-none\",\n          \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n          \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n          \"data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]\",\n          \"data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]\",\n          className,\n        )}\n        style={{\n          boxShadow: 'var(--elevation-200)',\n          maxWidth: `min(${maxWidthCss}, calc(100vw - ${insetCalc}))`,\n          ...heightStyle,\n          ...style,\n        }}\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n})\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\n// DialogHeader: SurfaceHeader + Close 按鈕(Dialog 特有)\n// justify-between 讓 children 與 Close 分左右;Close 用 Radix DialogPrimitive.Close 包裝。\n// 2026-05-18 audit gap fix:type 用 SurfaceHeaderProps 對齊 — DialogHeader 是 SurfaceHeader\n// 薄包裝,withTabs / lockDensity 等 props 透過 spread 已 forward,但 TS type 沒 expose\n// 導致 consumer 不能用 `<DialogHeader withTabs>` 而只能寫 `as any` 繞。Type lift 修\n// per header-canonical.spec.md W1 跨 6 consumer 同契約。\nconst DialogHeader = React.forwardRef<\n  HTMLDivElement,\n  SurfaceHeaderProps\n>(({ className, children, ...props }, ref) => (\n  // 2026-05-18:className 不再硬加 justify-between(冗餘:row 1 是 flex items-center gap-2,\n  // 第一 child flex-1 grow 自然 push close X 靠右,跟 justify-between 同視覺)。\n  // 並且 column mode(tabsSlot 提供)justify-between 會把 row 1 / row 2 上下推開 = 破裂。\n  // tabsSlot via `...props` spread 自動 forward(type 來自 SurfaceHeaderProps)。\n  <SurfaceHeader\n    ref={ref}\n    className={className}\n    {...props}\n  >\n    <div className=\"flex-1 min-w-0\">{children}</div>\n    {/* Dismiss X(chrome-slot canonical,v5):Button 本身 native sm(28 md / 32 lg,touch target 亦同),\n        但 data-dismiss attribute 讓 SurfaceHeader CSS rule 套負 my 讓 layout 佔位 = 24,\n        header = 24 + 2×tight = 48 / 56 chrome-header-height ✓。\n        詳 overlay-surface.spec.md「Chrome dismiss size canonical」*/}\n    <DialogPrimitive.Close asChild>\n      <Button data-dismiss iconOnly dismiss size=\"sm\" startIcon={XIcon} aria-label=\"關閉\" />\n    </DialogPrimitive.Close>\n  </SurfaceHeader>\n))\nDialogHeader.displayName = \"DialogHeader\"\n\n// DialogBody: flex-1 ScrollArea + chrome padding(對齊 overlay-surface SSOT + ScrollArea canonical)\n// 捲軸必用 ScrollArea(跨 OS 一致、不吃寬度)— 不自寫 overflow-y-auto。\n// padding 搬進 viewport inner div:px-loose / pt-tight / pb-bottom(Dialog 「大容器」底部多一拍呼吸)。\n// data-dialog-body:讓 DialogContent onOpenAutoFocus 找得到 body 第一個有意義互動元素(避免 focus 到 close X)\n//\n// ── List-as-region 場景(menu group / Cmd+K)──\n// 不再提供 `flush` variant(2026-05-01 移除,先前曾叫 `variant=\"list\"`)。\n// **canonical pattern** = consumer 自管 list outer wrapper + 用 `className` override 撤掉 chrome padding:\n// ```tsx\n// <DialogBody className=\"!px-0 !pt-0 !pb-0\">\n//   <div className=\"py-2\">  {/* list outer wrapper 自帶 py-2(menu group canonical)*/}\n//     {items.map(item => <MenuItem className=\"px-[var(--layout-space-loose)] rounded-md\" />)}\n//   </div>\n// </DialogBody>\n// ```\n// **rationale**:flush 只為 list-only body 省一行 className,但 (a) 多一個 row(search / banner)\n// 就破功 → 保留 chrome padding 反而更穩,(b) 加新 variant 不解決底層脆弱(consumer 仍要管 list py\n// 且 item px-loose),反而把 1 個 surface decision 拆兩 API。世界級主流(Material/Atlassian/Mantine/\n// shadcn)無 universal LayoutBody flush variant,Polaris flush API 只用於極窄 scope。\n// 詳 `tokens/layoutSpace/layoutSpace.spec.md`「List-as-region in overlay body」節\n// `className` forward 到 **inner content div**(非外層 ScrollArea wrapper)——\n// consumer `<DialogBody className=\"flex flex-col gap-X\">` 期望作用於 children 排列;\n// 套在 ScrollArea 上會 0 效果(children 住 inner div),曾造成 modal form field 完全貼邊。\nconst DialogBody = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<typeof ScrollArea>\n>(({ className, children, ...props }, ref) => (\n  <ScrollArea ref={ref} data-dialog-body className=\"flex-1 min-h-0\" {...props}>\n    <div\n      className={cn(\n        \"px-[var(--layout-space-loose)] pt-[var(--layout-space-tight)] pb-[var(--layout-space-bottom)]\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  </ScrollArea>\n))\nDialogBody.displayName = \"DialogBody\"\n\n// DialogFooter: SurfaceFooter wrap 加 data-dialog-footer(autoFocus fallback target)\nconst DialogFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ ...props }, ref) => <SurfaceFooter ref={ref} data-dialog-footer {...props} />)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\"text-body-lg font-medium truncate\", className)}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    // title → description 間距 canonical:DialogTitle 是 body-lg(16)+ desc body(14)→ reading-lg token\n    // (label tier 決定 token 選擇;item-anatomy Family 2 reading-family token 對照表)\n    className={cn(\"mt-[var(--item-gap-label-desc-reading-lg)] text-body text-fg-secondary\", className)}\n    {...props}\n  />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const dialogMeta = {\n  component: 'Dialog',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-surface-raised'],\n    fg: ['text-fg-secondary'],\n    ring: [],\n  },\n} as const\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogBody,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n"],"names":["XIcon"],"mappings":"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"}