@qijenchen/design-system 0.1.0-beta.76 → 0.1.0-beta.77

package/dist/components/TimePicker/time-columns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-columns.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/time-columns.tsx"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;;;GAgBG;AAQH,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,MAAM,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;AAE3C,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;CACnB;AAID,+EAA+E;AAC/E,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAapF;AAED,yEAAyE;AACzE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,EAAE,WAAW,UAAQ,GAAG,MAAM,CAM/E;AA2HD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,mBAAmB,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qEAAqE;IACrE,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,WAAmB,EACnB,UAAc,EACd,UAAc,EACd,QAAQ,EACR,SAAS,EACT,cAAsB,GACvB,EAAE,gBAAgB,2CAkDlB"}
+{"version":3,"file":"time-columns.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/time-columns.tsx"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;;;GAgBG;AAQH,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,MAAM,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;AAE3C,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;CACnB;AAID,+EAA+E;AAC/E,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAapF;AAED,yEAAyE;AACzE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,EAAE,WAAW,UAAQ,GAAG,MAAM,CAM/E;AAkID,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,mBAAmB,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qEAAqE;IACrE,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,WAAmB,EACnB,UAAc,EACd,UAAc,EACd,QAAQ,EACR,SAAS,EACT,cAAsB,GACvB,EAAE,gBAAgB,2CAkDlB"}

package/dist/components/TimePicker/time-columns.js

@@ -37,6 +37,7 @@ function TimeColumn({ values, selected, disabledSet, label, onSelect, withDivide
     item.scrollIntoView({ block: "center", behavior: isFirstRunRef.current ? "auto" : "smooth" });
     isFirstRunRef.current = false;
   }, [values, selected]);
+  const baseId = React.useId();
   const handleKeyDown = (e) => {
     const idx = values.indexOf(selected);
     if (e.key === "ArrowDown") {
@@ -68,6 +69,7 @@ function TimeColumn({ values, selected, disabledSet, label, onSelect, withDivide
       ref: listRef,
       role: "listbox",
       "aria-label": label,
+      "aria-activedescendant": selected != null ? `${baseId}-opt-${selected}` : void 0,
       tabIndex: 0,
       onKeyDown: handleKeyDown,
       className: "flex flex-col py-2 focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-[-2px]",
@@ -77,6 +79,7 @@ function TimeColumn({ values, selected, disabledSet, label, onSelect, withDivide
         return /* @__PURE__ */ jsx(
           "button",
           {
+            id: `${baseId}-opt-${v}`,
             type: "button",
             role: "option",
             "aria-selected": isSelected,

package/dist/components/TimePicker/time-columns.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-columns.js","sources":["../../../src/components/TimePicker/time-columns.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/**\n * TimeColumns — H/M/S scroll selector primitive(M17 Rule-of-3 SSOT)。\n *\n * 共用消費者:\n * - `TimePicker`(本元件家)\n * - `DatePicker showTime`(date + time)\n * - `DatePickerRange showTime`(range with time)\n *\n * 抽出原因:三個 picker 共用 H/M/S column scroll-pick 行為,公式重覆 = M17 違反。\n * 抽到 TimePicker/(time scroll selector 的 canonical 家)。\n *\n * ── 設計 ──\n * - Value:`TimeParts { hours, minutes, seconds }`(對齊 date-fns / Date getHours()...)\n * - Step:每欄獨立 `minuteStep` / `secondStep`(會議常用 15)\n * - Disabled:`disabledHours / disabledMinutes / disabledSeconds`(動態根據已選其他欄位)\n * - Visual:對齊 ref/timepicker.png — 多欄並排 + border-r 分隔\n */\n\nimport * as React from 'react'\nimport { ScrollArea } from '@/design-system/components/ScrollArea/scroll-area'\nimport { cn } from '@/lib/utils'\n\n// ── Types ───────────────────────────────────────────────────────────────\n\nexport interface TimeParts {\n  hours: number\n  minutes: number\n  seconds: number\n}\n\nexport type TimeStep = 1 | 5 | 10 | 15 | 30\n\nexport interface TimeColumnsDisabled {\n  hours?: number[]\n  minutes?: number[]\n  seconds?: number[]\n}\n\n// ── ISO time parsing ────────────────────────────────────────────────────\n\n/** Parse \"HH:MM:SS\" / \"HH:MM\" / full ISO datetime — returns time parts only */\nexport function isoToTimeParts(iso: string | null | undefined): TimeParts | undefined {\n  if (!iso) return undefined\n  const timeMatch = iso.match(/(\\d{1,2}):(\\d{1,2})(?::(\\d{1,2}))?/)\n  if (!timeMatch) return undefined\n  const h = Number(timeMatch[1])\n  const m = Number(timeMatch[2])\n  const s = timeMatch[3] !== undefined ? Number(timeMatch[3]) : 0\n  if (\n    Number.isNaN(h) || h < 0 || h > 23 ||\n    Number.isNaN(m) || m < 0 || m > 59 ||\n    Number.isNaN(s) || s < 0 || s > 59\n  ) return undefined\n  return { hours: h, minutes: m, seconds: s }\n}\n\n/** Format time parts → \"HH:MM\" or \"HH:MM:SS\" depending on showSeconds */\nexport function timePartsToString(parts: TimeParts, showSeconds = false): string {\n  const hh = String(parts.hours).padStart(2, '0')\n  const mm = String(parts.minutes).padStart(2, '0')\n  if (!showSeconds) return `${hh}:${mm}`\n  const ss = String(parts.seconds).padStart(2, '0')\n  return `${hh}:${mm}:${ss}`\n}\n\n// ── Range builder ───────────────────────────────────────────────────────\n\nfunction buildRange(max: number, step: number): number[] {\n  const arr: number[] = []\n  for (let v = 0; v < max; v += step) arr.push(v)\n  return arr\n}\n\n// ── Single column ───────────────────────────────────────────────────────\n\ninterface TimeColumnProps {\n  values: number[]\n  selected: number\n  /** disabled value set(動態根據其他欄位推) */\n  disabledSet?: Set<number>\n  label: string\n  onSelect: (value: number) => void\n  /** 右側分隔線(對齊 ref 多欄樣式) */\n  withDivider?: boolean\n}\n\n// code-quality-allow: long-function — column 含 scroll-into-view useEffect / WAI-ARIA listbox 鍵盤 handler / 視覺 state 計算,拆 sub-fn 會切散 listbox accessibility 邏輯\nfunction TimeColumn({ values, selected, disabledSet, label, onSelect, withDivider }: TimeColumnProps) {\n  const listRef = React.useRef<HTMLDivElement>(null)\n\n  // 開啟時跳到 selected 位置(置中);後續變更走 smooth(對齊 iOS / Material / Ant timepicker idiom)。\n  // 用 scrollIntoView({ block: 'center' }) 自動找最近的 scrollable ancestor —\n  // 比 manual scrollTop + parentElement 強健(Radix ScrollArea 結構為 Viewport > inner-div > content,\n  // listRef.parentElement 不是真正 scrollable 元素)。\n  // mount 用 'auto' 避免開啟瞬間出現飄移,後續 user 操作走 'smooth'(同 Tabs/Chip/FileViewer canonical)。\n  const isFirstRunRef = React.useRef(true)\n  React.useEffect(() => {\n    const list = listRef.current\n    if (!list) return\n    const idx = values.indexOf(selected)\n    if (idx < 0) return\n    const item = list.children[idx] as HTMLElement | undefined\n    if (!item) return\n    item.scrollIntoView({ block: 'center', behavior: isFirstRunRef.current ? 'auto' : 'smooth' })\n    isFirstRunRef.current = false\n  }, [values, selected])\n\n  // WAI-ARIA listbox keyboard pattern:ArrowUp/Down 切 option / Home / End 跳邊界。\n  // 對標 Ant TimePicker / Material TimePicker。Tab 跳離 listbox(走預設行為,不 stopPropagation)。\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    const idx = values.indexOf(selected)\n    if (e.key === 'ArrowDown') {\n      e.preventDefault()\n      const next = values.find((_, i) => i > idx && !disabledSet?.has(values[i])) ?? values[idx]\n      onSelect(next)\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      // 反向找第一個 enabled\n      let i = idx - 1\n      while (i >= 0 && disabledSet?.has(values[i])) i--\n      if (i >= 0) onSelect(values[i])\n    } else if (e.key === 'Home') {\n      e.preventDefault()\n      const first = values.find((v) => !disabledSet?.has(v))\n      if (first !== undefined) onSelect(first)\n    } else if (e.key === 'End') {\n      e.preventDefault()\n      for (let i = values.length - 1; i >= 0; i--) {\n        if (!disabledSet?.has(values[i])) {\n          onSelect(values[i])\n          break\n        }\n      }\n    }\n  }\n\n  // WAI-ARIA listbox pattern:role=listbox 直接包 role=option(button),不另用 li 包\n  // (li role=option + 內含 button 會被 axe 抓 nested-interactive)\n  // 高度策略:本 primitive 不鎖死 height(對齊 ScrollArea / Combobox 同 idiom)。\n  // ScrollArea 用 h-full,parent flex container 控高 — 讓 consumer:\n  //   - TimePicker:wrap in h-[216px] container(預設 ~7 items)\n  //   - DatePicker showTime / Range:flex-row items-stretch + calendar 一起決定高度(自動同高)\n  return (\n    <ScrollArea className={cn('flex-1 h-full', withDivider && 'border-r border-divider')}>\n      <div\n        ref={listRef}\n        role=\"listbox\"\n        aria-label={label}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        className=\"flex flex-col py-2 focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-[-2px]\"\n      >\n        {values.map((v) => {\n          const isSelected = v === selected\n          const isDisabled = disabledSet?.has(v) ?? false\n          return (\n            <button\n              key={v}\n              type=\"button\"\n              role=\"option\"\n              aria-selected={isSelected}\n              disabled={isDisabled}\n              // tabIndex=-1:listbox 自身 tabbable + 用 ArrowUp/Down 切 option(WAI-ARIA roving),\n              // 不讓每個 option 都進 Tab order(會 Tab 84 次過完 hours+minutes)\n              tabIndex={-1}\n              onClick={() => onSelect(v)}\n              className={cn(\n                'w-full h-field-sm text-body tabular-nums',\n                'flex items-center justify-center',\n                'cursor-pointer transition-colors',\n                'hover:bg-neutral-hover',\n                isSelected && 'bg-neutral-selected text-foreground hover:bg-neutral-selected',\n                isDisabled && 'text-fg-disabled cursor-not-allowed hover:bg-transparent',\n              )}\n            >\n              {String(v).padStart(2, '0')}\n            </button>\n          )\n        })}\n      </div>\n    </ScrollArea>\n  )\n}\n\n// ── Composite — H/M/S columns ──────────────────────────────────────────\n\nexport interface TimeColumnsProps {\n  value?: TimeParts\n  onChange: (next: TimeParts) => void\n  showSeconds?: boolean\n  minuteStep?: TimeStep\n  secondStep?: TimeStep\n  /** 動態 disabled 各欄位 value 子集 */\n  disabled?: TimeColumnsDisabled\n  className?: string\n  /** 是否在最左側加 border-l(配 DatePicker showTime / Range date+time 拼接時用) */\n  leadingDivider?: boolean\n}\n\nexport function TimeColumns({\n  value,\n  onChange,\n  showSeconds = false,\n  minuteStep = 1,\n  secondStep = 1,\n  disabled,\n  className,\n  leadingDivider = false,\n}: TimeColumnsProps) {\n  const safeValue: TimeParts = value ?? { hours: 0, minutes: 0, seconds: 0 }\n  const hourValues = React.useMemo(() => buildRange(24, 1), [])\n  const minuteValues = React.useMemo(() => buildRange(60, minuteStep), [minuteStep])\n  const secondValues = React.useMemo(() => buildRange(60, secondStep), [secondStep])\n\n  const disabledSets = React.useMemo(() => ({\n    hours:   disabled?.hours   ? new Set(disabled.hours)   : undefined,\n    minutes: disabled?.minutes ? new Set(disabled.minutes) : undefined,\n    seconds: disabled?.seconds ? new Set(disabled.seconds) : undefined,\n  }), [disabled?.hours, disabled?.minutes, disabled?.seconds])\n\n  const widthClass = showSeconds ? 'w-60' : 'w-40'\n\n  return (\n    <div\n      className={cn(\n        'flex flex-row',\n        widthClass,\n        leadingDivider && 'border-l border-divider',\n        className,\n      )}\n    >\n      <TimeColumn\n        values={hourValues}\n        selected={safeValue.hours}\n        disabledSet={disabledSets.hours}\n        label=\"hours\"\n        onSelect={(h) => onChange({ ...safeValue, hours: h })}\n        withDivider\n      />\n      <TimeColumn\n        values={minuteValues}\n        selected={safeValue.minutes}\n        disabledSet={disabledSets.minutes}\n        label=\"minutes\"\n        onSelect={(m) => onChange({ ...safeValue, minutes: m })}\n        withDivider={showSeconds}\n      />\n      {showSeconds && (\n        <TimeColumn\n          values={secondValues}\n          selected={safeValue.seconds}\n          disabledSet={disabledSets.seconds}\n          label=\"seconds\"\n          onSelect={(s) => onChange({ ...safeValue, seconds: s })}\n        />\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"time-columns.js","sources":["../../../src/components/TimePicker/time-columns.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/**\n * TimeColumns — H/M/S scroll selector primitive(M17 Rule-of-3 SSOT)。\n *\n * 共用消費者:\n * - `TimePicker`(本元件家)\n * - `DatePicker showTime`(date + time)\n * - `DatePickerRange showTime`(range with time)\n *\n * 抽出原因:三個 picker 共用 H/M/S column scroll-pick 行為,公式重覆 = M17 違反。\n * 抽到 TimePicker/(time scroll selector 的 canonical 家)。\n *\n * ── 設計 ──\n * - Value:`TimeParts { hours, minutes, seconds }`(對齊 date-fns / Date getHours()...)\n * - Step:每欄獨立 `minuteStep` / `secondStep`(會議常用 15)\n * - Disabled:`disabledHours / disabledMinutes / disabledSeconds`(動態根據已選其他欄位)\n * - Visual:對齊 ref/timepicker.png — 多欄並排 + border-r 分隔\n */\n\nimport * as React from 'react'\nimport { ScrollArea } from '@/design-system/components/ScrollArea/scroll-area'\nimport { cn } from '@/lib/utils'\n\n// ── Types ───────────────────────────────────────────────────────────────\n\nexport interface TimeParts {\n  hours: number\n  minutes: number\n  seconds: number\n}\n\nexport type TimeStep = 1 | 5 | 10 | 15 | 30\n\nexport interface TimeColumnsDisabled {\n  hours?: number[]\n  minutes?: number[]\n  seconds?: number[]\n}\n\n// ── ISO time parsing ────────────────────────────────────────────────────\n\n/** Parse \"HH:MM:SS\" / \"HH:MM\" / full ISO datetime — returns time parts only */\nexport function isoToTimeParts(iso: string | null | undefined): TimeParts | undefined {\n  if (!iso) return undefined\n  const timeMatch = iso.match(/(\\d{1,2}):(\\d{1,2})(?::(\\d{1,2}))?/)\n  if (!timeMatch) return undefined\n  const h = Number(timeMatch[1])\n  const m = Number(timeMatch[2])\n  const s = timeMatch[3] !== undefined ? Number(timeMatch[3]) : 0\n  if (\n    Number.isNaN(h) || h < 0 || h > 23 ||\n    Number.isNaN(m) || m < 0 || m > 59 ||\n    Number.isNaN(s) || s < 0 || s > 59\n  ) return undefined\n  return { hours: h, minutes: m, seconds: s }\n}\n\n/** Format time parts → \"HH:MM\" or \"HH:MM:SS\" depending on showSeconds */\nexport function timePartsToString(parts: TimeParts, showSeconds = false): string {\n  const hh = String(parts.hours).padStart(2, '0')\n  const mm = String(parts.minutes).padStart(2, '0')\n  if (!showSeconds) return `${hh}:${mm}`\n  const ss = String(parts.seconds).padStart(2, '0')\n  return `${hh}:${mm}:${ss}`\n}\n\n// ── Range builder ───────────────────────────────────────────────────────\n\nfunction buildRange(max: number, step: number): number[] {\n  const arr: number[] = []\n  for (let v = 0; v < max; v += step) arr.push(v)\n  return arr\n}\n\n// ── Single column ───────────────────────────────────────────────────────\n\ninterface TimeColumnProps {\n  values: number[]\n  selected: number\n  /** disabled value set(動態根據其他欄位推) */\n  disabledSet?: Set<number>\n  label: string\n  onSelect: (value: number) => void\n  /** 右側分隔線(對齊 ref 多欄樣式) */\n  withDivider?: boolean\n}\n\n// code-quality-allow: long-function — column 含 scroll-into-view useEffect / WAI-ARIA listbox 鍵盤 handler / 視覺 state 計算,拆 sub-fn 會切散 listbox accessibility 邏輯\nfunction TimeColumn({ values, selected, disabledSet, label, onSelect, withDivider }: TimeColumnProps) {\n  const listRef = React.useRef<HTMLDivElement>(null)\n\n  // 開啟時跳到 selected 位置(置中);後續變更走 smooth(對齊 iOS / Material / Ant timepicker idiom)。\n  // 用 scrollIntoView({ block: 'center' }) 自動找最近的 scrollable ancestor —\n  // 比 manual scrollTop + parentElement 強健(Radix ScrollArea 結構為 Viewport > inner-div > content,\n  // listRef.parentElement 不是真正 scrollable 元素)。\n  // mount 用 'auto' 避免開啟瞬間出現飄移,後續 user 操作走 'smooth'(同 Tabs/Chip/FileViewer canonical)。\n  const isFirstRunRef = React.useRef(true)\n  React.useEffect(() => {\n    const list = listRef.current\n    if (!list) return\n    const idx = values.indexOf(selected)\n    if (idx < 0) return\n    const item = list.children[idx] as HTMLElement | undefined\n    if (!item) return\n    item.scrollIntoView({ block: 'center', behavior: isFirstRunRef.current ? 'auto' : 'smooth' })\n    isFirstRunRef.current = false\n  }, [values, selected])\n\n  // a11y:穩定 id 前綴,讓 listbox `aria-activedescendant` 指向目前 active(= selected)option。\n  // single-tabstop + 方向鍵 listbox 應透過 activedescendant 告知 AT 哪個 option active,\n  // 否則 SR 方向鍵移動時讀不出目前 option(WAI-ARIA listbox virtual-focus 慣例)。\n  const baseId = React.useId()\n\n  // WAI-ARIA listbox keyboard pattern:ArrowUp/Down 切 option / Home / End 跳邊界。\n  // 對標 Ant TimePicker / Material TimePicker。Tab 跳離 listbox(走預設行為,不 stopPropagation)。\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    const idx = values.indexOf(selected)\n    if (e.key === 'ArrowDown') {\n      e.preventDefault()\n      const next = values.find((_, i) => i > idx && !disabledSet?.has(values[i])) ?? values[idx]\n      onSelect(next)\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      // 反向找第一個 enabled\n      let i = idx - 1\n      while (i >= 0 && disabledSet?.has(values[i])) i--\n      if (i >= 0) onSelect(values[i])\n    } else if (e.key === 'Home') {\n      e.preventDefault()\n      const first = values.find((v) => !disabledSet?.has(v))\n      if (first !== undefined) onSelect(first)\n    } else if (e.key === 'End') {\n      e.preventDefault()\n      for (let i = values.length - 1; i >= 0; i--) {\n        if (!disabledSet?.has(values[i])) {\n          onSelect(values[i])\n          break\n        }\n      }\n    }\n  }\n\n  // WAI-ARIA listbox pattern:role=listbox 直接包 role=option(button),不另用 li 包\n  // (li role=option + 內含 button 會被 axe 抓 nested-interactive)\n  // 高度策略:本 primitive 不鎖死 height(對齊 ScrollArea / Combobox 同 idiom)。\n  // ScrollArea 用 h-full,parent flex container 控高 — 讓 consumer:\n  //   - TimePicker:wrap in h-[216px] container(預設 ~7 items)\n  //   - DatePicker showTime / Range:flex-row items-stretch + calendar 一起決定高度(自動同高)\n  return (\n    <ScrollArea className={cn('flex-1 h-full', withDivider && 'border-r border-divider')}>\n      <div\n        ref={listRef}\n        role=\"listbox\"\n        aria-label={label}\n        aria-activedescendant={selected != null ? `${baseId}-opt-${selected}` : undefined}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        className=\"flex flex-col py-2 focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-[-2px]\"\n      >\n        {values.map((v) => {\n          const isSelected = v === selected\n          const isDisabled = disabledSet?.has(v) ?? false\n          return (\n            <button\n              key={v}\n              id={`${baseId}-opt-${v}`}\n              type=\"button\"\n              role=\"option\"\n              aria-selected={isSelected}\n              disabled={isDisabled}\n              // tabIndex=-1:listbox 自身 tabbable + 用 ArrowUp/Down 切 option(WAI-ARIA roving),\n              // 不讓每個 option 都進 Tab order(會 Tab 84 次過完 hours+minutes)\n              tabIndex={-1}\n              onClick={() => onSelect(v)}\n              className={cn(\n                'w-full h-field-sm text-body tabular-nums',\n                'flex items-center justify-center',\n                'cursor-pointer transition-colors',\n                'hover:bg-neutral-hover',\n                isSelected && 'bg-neutral-selected text-foreground hover:bg-neutral-selected',\n                isDisabled && 'text-fg-disabled cursor-not-allowed hover:bg-transparent',\n              )}\n            >\n              {String(v).padStart(2, '0')}\n            </button>\n          )\n        })}\n      </div>\n    </ScrollArea>\n  )\n}\n\n// ── Composite — H/M/S columns ──────────────────────────────────────────\n\nexport interface TimeColumnsProps {\n  value?: TimeParts\n  onChange: (next: TimeParts) => void\n  showSeconds?: boolean\n  minuteStep?: TimeStep\n  secondStep?: TimeStep\n  /** 動態 disabled 各欄位 value 子集 */\n  disabled?: TimeColumnsDisabled\n  className?: string\n  /** 是否在最左側加 border-l(配 DatePicker showTime / Range date+time 拼接時用) */\n  leadingDivider?: boolean\n}\n\nexport function TimeColumns({\n  value,\n  onChange,\n  showSeconds = false,\n  minuteStep = 1,\n  secondStep = 1,\n  disabled,\n  className,\n  leadingDivider = false,\n}: TimeColumnsProps) {\n  const safeValue: TimeParts = value ?? { hours: 0, minutes: 0, seconds: 0 }\n  const hourValues = React.useMemo(() => buildRange(24, 1), [])\n  const minuteValues = React.useMemo(() => buildRange(60, minuteStep), [minuteStep])\n  const secondValues = React.useMemo(() => buildRange(60, secondStep), [secondStep])\n\n  const disabledSets = React.useMemo(() => ({\n    hours:   disabled?.hours   ? new Set(disabled.hours)   : undefined,\n    minutes: disabled?.minutes ? new Set(disabled.minutes) : undefined,\n    seconds: disabled?.seconds ? new Set(disabled.seconds) : undefined,\n  }), [disabled?.hours, disabled?.minutes, disabled?.seconds])\n\n  const widthClass = showSeconds ? 'w-60' : 'w-40'\n\n  return (\n    <div\n      className={cn(\n        'flex flex-row',\n        widthClass,\n        leadingDivider && 'border-l border-divider',\n        className,\n      )}\n    >\n      <TimeColumn\n        values={hourValues}\n        selected={safeValue.hours}\n        disabledSet={disabledSets.hours}\n        label=\"hours\"\n        onSelect={(h) => onChange({ ...safeValue, hours: h })}\n        withDivider\n      />\n      <TimeColumn\n        values={minuteValues}\n        selected={safeValue.minutes}\n        disabledSet={disabledSets.minutes}\n        label=\"minutes\"\n        onSelect={(m) => onChange({ ...safeValue, minutes: m })}\n        withDivider={showSeconds}\n      />\n      {showSeconds && (\n        <TimeColumn\n          values={secondValues}\n          selected={safeValue.seconds}\n          disabledSet={disabledSets.seconds}\n          label=\"seconds\"\n          onSelect={(s) => onChange({ ...safeValue, seconds: s })}\n        />\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/components/TreeView/tree-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-view.d.ts","sourceRoot":"","sources":["../../../src/components/TreeView/tree-view.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"tree-view.d.ts","sourceRoot":"","sources":["../../../src/components/TreeView/tree-view.tsx"],"names":[],"mappings":"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"}

package/dist/components/TreeView/tree-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-view.js","sources":["../../../src/components/TreeView/tree-view.tsx"],"sourcesContent":["// code-quality-allow: file-size — foundational composite(TreeView owns tree logic + TreeItem + drag-drop + keyboard;拆 sub-component 會把 register/unregister 跨檔傳 ref 複雜化超過可讀性 gain)\nimport * as React from 'react'\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible'\nimport {\n  DndContext,\n  DragOverlay,\n  useDraggable,\n  useDroppable,\n  PointerSensor,\n  useSensor,\n  useSensors,\n  type DragStartEvent,\n  type DragEndEvent,\n  type DragOverEvent,\n} from '@dnd-kit/core'\nimport { ChevronRight } from 'lucide-react'\nimport { cva } from 'class-variance-authority'\nimport type { LucideIcon } from 'lucide-react'\nimport { dragSourceClass, dropIndicatorRow, dropIndicatorInside } from '@/design-system/lib/drag-visual'\nimport { cn } from '@/lib/utils'\nimport { Checkbox } from '@/design-system/components/Checkbox/checkbox'\n// Row primitive 共用常數——單一 source of truth\nimport {\n  ICON_SIZE,\n  RowSizeProvider,\n  ItemIcon,\n  ItemPrefix,\n  ItemSuffix,\n  ItemInlineAction,\n  ROW_PADDING_BY_SIZE,\n  type InlineActionConfig,\n} from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n/**\n * TreeView — 階層結構的遞迴元件\n *\n * 一個 TreeItem 就是一個 node——有 children 就可展開,沒有就是 leaf。\n * 沒有第二個概念(沒有 TreeGroup)。\n *\n * TreeView 負責:\n *   1. 遞迴渲染 + indent\n *   2. 展開/收合狀態管理\n *   3. 鍵盤導覽 + ARIA tree\n *\n * 它不管 node 裡面長什麼樣——icon、badge、status indicator 等\n * 由 consumer 透過 props / slots 決定。\n *\n * 詳見 tree-view.spec.md。\n */\n\n// ═══════════════════════════════════════════════════════════════════════════\n// Types\n// ═══════════════════════════════════════════════════════════════════════════\n\ntype SizeKey = 'sm' | 'md' | 'lg'\ntype SelectionMode = 'single' | 'multiple' | 'none'\n/**\n * TreeView 的使用脈絡,決定 item 的水平 padding:\n * - `'sidebar'`:頁面側邊欄,用 `--layout-space-loose` token(md=16px / lg=24px,跟 density 連動)\n * - `'menu'`:浮層選單 / dropdown,px-3(12px),對齊 MenuItem / DropdownMenu\n */\ntype TreeContext = 'sidebar' | 'menu'\n\n// Base horizontal padding per context — 用 CSS variable 注入到 TreeView 容器,\n// TreeItem 用 calc(var(--tree-px) + indent) 算出最終 paddingLeft。\nconst CONTEXT_PX_VAR: Record<TreeContext, string> = {\n  sidebar: 'var(--layout-space-loose)',  // md=16px, lg=24px(density 連動)\n  menu: '12px',                          // px-3,對齊 MenuItem / DropdownMenu\n}\n\n/** Drag drop position — 拖放目標的三種位置 */\n// code-quality-allow: dead-export — public event/state type — consumer event handler parameter type\nexport type TreeDropPosition = 'before' | 'after' | 'inside'\n\n/** onDragEnd callback 的參數 */\n// code-quality-allow: dead-export — public event/state type — consumer event handler parameter type\nexport interface TreeDragEndEvent {\n  /** 被拖曳的 node id */\n  sourceId: string\n  /** 目標 node id */\n  targetId: string\n  /** 放置位置:before(同層上方)/ after(同層下方)/ inside(成為子 node) */\n  position: TreeDropPosition\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// Constants\n// ═══════════════════════════════════════════════════════════════════════════\n\n// Icon / chevron 尺寸——從 item-layout pattern module 引入(在檔頂 import),\n// 這裡本地不再宣告。所有 row primitives 共用同一個常數。\n\n// indentStep = chevronSize + gap-2(8px)— 2026-05-04 升 SSOT 為 token `--tree-indent-{sm,md,lg}`\n// 在 `tokens/uiSize/uiSize.css`。DataTable nested rows 共用此 SSOT,跨元件視覺一致。\n// 結構對齊:子 chevron 對齊父 icon,子 icon 對齊父 label。\n// Numeric value 此處保留(drop indicator JS px 計算需 number),Tailwind class 走 token。\nconst INDENT_STEP: Record<SizeKey, number> = { sm: 24, md: 24, lg: 28 }\n\n// ═══════════════════════════════════════════════════════════════════════════\n// Context\n// ═══════════════════════════════════════════════════════════════════════════\n\ninterface TreeViewContextValue {\n  size: SizeKey\n  context: TreeContext\n  selectionMode: SelectionMode\n  expandOnSelect: boolean\n  draggable: boolean\n  isKeyboardRef: React.RefObject<boolean>\n  /**\n   * Per-tree instance 前綴(React.useId),用來組每個 treeitem 的 DOM `id`\n   * (`${prefix}treeitem-${nodeId}`),讓容器的 `aria-activedescendant` 能指向目前 focused node。\n   * 多棵 TreeView 同頁 / node id 跨樹重複時不會撞 DOM id。\n   */\n  activeDescendantPrefix: string\n  expandedIds: Set<string>\n  selectedIds: Set<string>\n  focusedId: string | null\n  /** 目前拖曳中的 node id(null = 沒在拖) */\n  draggingId: string | null\n  /** 目前 drop indicator 的位置 + depth(用於 line indent) */\n  dropTarget: { id: string; position: TreeDropPosition; depth: number } | null\n  toggleExpand: (id: string) => void\n  select: (id: string) => void\n  setFocusedId: (id: string | null) => void\n  registerNode: (id: string, parentId: string | null, hasChildren: boolean, label?: React.ReactNode, icon?: LucideIcon) => void\n  getNodeInfo: (id: string) => NodeInfo | undefined\n  unregisterNode: (id: string) => void\n}\n\nconst TreeViewContext = React.createContext<TreeViewContextValue | null>(null)\n\nfunction useTreeView(): TreeViewContextValue {\n  const ctx = React.useContext(TreeViewContext)\n  if (!ctx) throw new Error('TreeItem must be used within TreeView')\n  return ctx\n}\n\n// TreeItem depth context(遞迴 depth tracking)\nconst DepthContext = React.createContext(0)\n\n// ═══════════════════════════════════════════════════════════════════════════\n// Node registry — 追蹤所有 node 的 parent/children 關係,用於鍵盤導覽\n// ═══════════════════════════════════════════════════════════════════════════\n\ninterface NodeInfo {\n  id: string\n  parentId: string | null\n  hasChildren: boolean\n  /** 用於 DragOverlay ghost 渲染 */\n  label?: React.ReactNode\n  icon?: LucideIcon\n}\n\nfunction useNodeRegistry() {\n  const nodesRef = React.useRef(new Map<string, NodeInfo>())\n\n  const registerNode = React.useCallback(\n    (id: string, parentId: string | null, hasChildren: boolean, label?: React.ReactNode, icon?: LucideIcon) => {\n      nodesRef.current.set(id, { id, parentId, hasChildren, label, icon })\n    },\n    []\n  )\n\n  const unregisterNode = React.useCallback((id: string) => {\n    nodesRef.current.delete(id)\n  }, [])\n\n  const getNodeInfo = React.useCallback((id: string) => nodesRef.current.get(id), [])\n\n  return { nodesRef, registerNode, unregisterNode, getNodeInfo }\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// TreeView\n// ═══════════════════════════════════════════════════════════════════════════\n\nexport interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onDragEnd'> {\n  /** 元件尺寸,影響 node 高度、icon 大小、indent 寬度 */\n  size?: SizeKey\n  /**\n   * 使用脈絡,決定 item 的水平 padding:\n   * - `'sidebar'`(預設):頁面側邊欄,`--layout-space-loose`(md=16px / lg=24px,隨 density 連動)\n   * - `'menu'`:浮層選單 / dropdown,px-3(12px),對齊 MenuItem\n   */\n  context?: TreeContext\n  /** 選取模式。預設 'single'(sidebar nav / stepper) */\n  selectionMode?: SelectionMode\n  /** 點擊 label 時是否同時展開 children。預設 false(chevron 是展開的唯一控件) */\n  expandOnSelect?: boolean\n  /** 受控:展開的 node id 集合 */\n  expandedIds?: Set<string>\n  /** 受控:展開狀態變更 callback */\n  onExpandedChange?: (ids: Set<string>) => void\n  /** 受控:選取的 node id 集合 */\n  selectedIds?: Set<string>\n  /** 受控:選取狀態變更 callback */\n  onSelectedChange?: (ids: Set<string>) => void\n  /** 非受控:預設展開的 node id 陣列 */\n  defaultExpandedIds?: string[]\n  /** 非受控:預設選取的 node id 陣列 */\n  defaultSelectedIds?: string[]\n  /**\n   * 啟用拖曳排序。預設 false。\n   * 啟用後整列可拖(Figma 風格,無 grip handle;靠 distance:5 區分 click vs drag),\n   * 拖曳時顯示 drop indicator(before / after / inside 三種位置)。\n   * Consumer 透過 `onDragEnd` callback 接收 reorder 事件,自行更新 data。\n   */\n  draggable?: boolean\n  /** Drag 結束時觸發,提供 sourceId、targetId、position。Consumer 負責 reorder。 */\n  onDragEnd?: (event: TreeDragEndEvent) => void\n  /** ARIA label */\n  'aria-label'?: string\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst TreeView = React.forwardRef<HTMLDivElement, TreeViewProps>(\n  (\n    {\n      size = 'md',\n      context = 'sidebar',\n      selectionMode = 'single',\n      expandOnSelect = false,\n      draggable = false,\n      onDragEnd: onDragEndProp,\n      expandedIds: controlledExpanded,\n      onExpandedChange,\n      selectedIds: controlledSelected,\n      onSelectedChange,\n      defaultExpandedIds = [],\n      defaultSelectedIds = [],\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // ── Expand state(受控 / 非受控) ──\n    const [internalExpanded, setInternalExpanded] = React.useState(\n      () => new Set(defaultExpandedIds)\n    )\n    const expandedIds = controlledExpanded ?? internalExpanded\n    const setExpandedIds = React.useCallback(\n      (updater: (prev: Set<string>) => Set<string>) => {\n        const update = (prev: Set<string>) => {\n          const next = updater(prev)\n          onExpandedChange?.(next)\n          return next\n        }\n        if (controlledExpanded) {\n          update(controlledExpanded)\n        } else {\n          setInternalExpanded(update)\n        }\n      },\n      [controlledExpanded, onExpandedChange]\n    )\n\n    // ── Selection state(受控 / 非受控) ──\n    const [internalSelected, setInternalSelected] = React.useState(\n      () => new Set(defaultSelectedIds)\n    )\n    const selectedIds = controlledSelected ?? internalSelected\n    const setSelectedIds = React.useCallback(\n      (updater: (prev: Set<string>) => Set<string>) => {\n        const update = (prev: Set<string>) => {\n          const next = updater(prev)\n          onSelectedChange?.(next)\n          return next\n        }\n        if (controlledSelected) {\n          update(controlledSelected)\n        } else {\n          setInternalSelected(update)\n        }\n      },\n      [controlledSelected, onSelectedChange]\n    )\n\n    // ── Focus state ──\n    const [focusedId, setFocusedId] = React.useState<string | null>(null)\n\n    // ── Virtual focus id prefix ──\n    // DOM focus 永遠停在 role=tree 容器(單一 tab stop);目前 node 透過 aria-activedescendant\n    // 告知 AT(對齊 DS 既有 cmdk virtual-focus canonical:SelectMenu / Command listbox)。\n    // useId 確保多棵 TreeView 同頁 / node id 跨樹重複時 DOM id 不撞。\n    const activeDescendantPrefix = React.useId()\n\n    // ── Keyboard vs mouse detection ──\n    // focus ring 只在鍵盤操作時顯示,滑鼠點擊用 bg-neutral-selected 表達選中,不顯示 ring\n    const isKeyboardRef = React.useRef(false)\n\n    // ── Drag state ──\n    const [draggingId, setDraggingId] = React.useState<string | null>(null)\n    const [dropTarget, setDropTarget] = React.useState<{ id: string; position: TreeDropPosition; depth: number } | null>(null)\n    const autoExpandTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)\n    // 2026-05-16 audit codex Round 6:unmount cleanup(原 cleanup 只在 dragEnd/dragCancel,unmount-during-drag 漏 cancel)\n    React.useEffect(() => () => { if (autoExpandTimerRef.current) clearTimeout(autoExpandTimerRef.current) }, [])\n    // Ref for toggleExpand — handleDragOver 定義在 toggleExpand 之前(hook 順序限制),\n    // 用 ref 打斷 temporal dead zone。\n    const toggleExpandRef = React.useRef<(id: string) => void>(() => {})\n\n    const sensors = useSensors(\n      useSensor(PointerSensor, { activationConstraint: { distance: 5 } })\n    )\n\n    const handleDragStart = React.useCallback((event: DragStartEvent) => {\n      setDraggingId(String(event.active.id))\n    }, [])\n\n    // ── Figma-style drop detection(X + Y 雙軸）──\n    //\n    // Y 軸:決定在哪個 item 附近\n    //   - item 上 25% = before\n    //   - item 中 50% = inside(只有 folder)\n    //   - item 下 25% = after\n    //\n    // X 軸:決定 nesting 深度(Figma 核心邏輯)\n    //   - 滑鼠越左 = 越淺層(放在 parent 層級)\n    //   - 滑鼠越右 = 越深層(放進 folder)\n    //   - 用 pointer X 相對於 tree 左邊界計算 indent level\n    //\n    const handleDragOver = React.useCallback((event: DragOverEvent) => {\n      const { over, active } = event\n      if (!over || over.id === active.id) {\n        if (autoExpandTimerRef.current) { clearTimeout(autoExpandTimerRef.current); autoExpandTimerRef.current = null }\n        setDropTarget(null)\n        return\n      }\n\n      const rowEl = document.querySelector(`[data-tree-row=\"${over.id}\"]`) as HTMLElement | null\n      const targetEl = document.querySelector(`[data-tree-id=\"${over.id}\"]`) as HTMLElement | null\n      if (!rowEl || !targetEl) { setDropTarget(null); return }\n\n      // 實際指標位置\n      const startX = (event.activatorEvent as PointerEvent)?.clientX ?? 0\n      const startY = (event.activatorEvent as PointerEvent)?.clientY ?? 0\n      const currentX = startX + (event.delta?.x ?? 0)\n      const currentY = startY + (event.delta?.y ?? 0)\n\n      const rect = rowEl.getBoundingClientRect()\n      const offsetY = currentY - rect.top\n      const height = rect.height || 32\n      const ratio = Math.max(0, Math.min(1, offsetY / height))\n\n      const hasChildren = targetEl.dataset.treeHasChildren === 'true'\n      const targetDepth = Number(targetEl.getAttribute('aria-level') ?? 1) - 1\n\n      // ── X 軸:計算指標在哪個 indent level ──\n      const treeEl = treeRef.current\n      const treeLeft = treeEl?.getBoundingClientRect().left ?? 0\n      const indentStep = INDENT_STEP[size]\n      const pointerIndentLevel = Math.max(0, Math.floor((currentX - treeLeft) / indentStep))\n\n      let position: TreeDropPosition\n      let finalDepth = targetDepth\n\n      if (hasChildren) {\n        // Folder node\n        if (ratio < 0.25) {\n          position = 'before'\n        } else if (ratio > 0.75) {\n          // after folder: 如果指標在 folder 層級或更淺 = after(同層)\n          // 如果指標更深 = inside(放進 folder)\n          position = pointerIndentLevel > targetDepth ? 'inside' : 'after'\n        } else {\n          position = 'inside'\n        }\n      } else {\n        // Leaf node\n        if (ratio < 0.5) {\n          position = 'before'\n        } else {\n          position = 'after'\n          // X 軸:如果指標在比 target 更淺的層級,提升 drop depth\n          // 例:Contact(depth 1)的 after,如果滑鼠在 depth 0 → 變成「after Pages」\n          if (pointerIndentLevel < targetDepth) {\n            // 找 parent 來放\n            const groupEl = targetEl.closest('[role=\"group\"]')\n            const parentTreeItem = groupEl?.parentElement?.closest('[role=\"treeitem\"]')\n            const parentId = parentTreeItem?.getAttribute('data-tree-id')\n            if (parentId && parentId !== String(active.id)) {\n              const parentDepth = Number(parentTreeItem?.getAttribute('aria-level') ?? 1) - 1\n              finalDepth = parentDepth\n              setDropTarget({ id: parentId, position: 'after', depth: parentDepth })\n              return\n            }\n          }\n        }\n      }\n\n      setDropTarget({ id: String(over.id), position, depth: finalDepth })\n\n      // Auto-expand collapsed folder after 500ms hover (Figma behavior)\n      if (position === 'inside' && hasChildren && !expandedIds.has(String(over.id))) {\n        if (autoExpandTimerRef.current) clearTimeout(autoExpandTimerRef.current)\n        autoExpandTimerRef.current = setTimeout(() => {\n          toggleExpandRef.current(String(over.id))\n        }, 500)\n      } else {\n        if (autoExpandTimerRef.current) { clearTimeout(autoExpandTimerRef.current); autoExpandTimerRef.current = null }\n      }\n    }, [expandedIds])\n\n    const dropTargetRef = React.useRef(dropTarget)\n    dropTargetRef.current = dropTarget\n\n    const handleDragEnd = React.useCallback((event: DragEndEvent) => {\n      if (autoExpandTimerRef.current) { clearTimeout(autoExpandTimerRef.current); autoExpandTimerRef.current = null }\n      const { active, over } = event\n      const dt = dropTargetRef.current\n      if (over && active.id !== over.id && dt) {\n        onDragEndProp?.({\n          sourceId: String(active.id),\n          targetId: String(over.id),\n          position: dt.position,\n        })\n      }\n      setDraggingId(null)\n      setDropTarget(null)\n    }, [onDragEndProp])\n\n    const handleDragCancel = React.useCallback(() => {\n      if (autoExpandTimerRef.current) { clearTimeout(autoExpandTimerRef.current); autoExpandTimerRef.current = null }\n      setDraggingId(null)\n      setDropTarget(null)\n    }, [])\n\n    // ── Node registry ──\n    const { registerNode, unregisterNode, getNodeInfo } = useNodeRegistry()\n\n    // ── Actions ──\n    const toggleExpand = React.useCallback(\n      (id: string) => {\n        setExpandedIds((prev) => {\n          const next = new Set(prev)\n          if (next.has(id)) next.delete(id)\n          else next.add(id)\n          return next\n        })\n      },\n      [setExpandedIds]\n    )\n    toggleExpandRef.current = toggleExpand\n\n    const select = React.useCallback(\n      (id: string) => {\n        if (selectionMode === 'none') return\n        setSelectedIds((prev) => {\n          if (selectionMode === 'single') {\n            return new Set([id])\n          }\n          // multiple\n          const next = new Set(prev)\n          if (next.has(id)) next.delete(id)\n          else next.add(id)\n          return next\n        })\n      },\n      [selectionMode, setSelectedIds]\n    )\n\n    // ── Context value ──\n    const contextValue = React.useMemo<TreeViewContextValue>(\n      () => ({\n        size,\n        context,\n        selectionMode,\n        expandOnSelect,\n        draggable,\n        isKeyboardRef,\n        activeDescendantPrefix,\n        draggingId,\n        dropTarget,\n        expandedIds,\n        selectedIds,\n        focusedId,\n        toggleExpand,\n        select,\n        setFocusedId,\n        registerNode,\n        unregisterNode,\n        getNodeInfo,\n      }),\n      [\n        size,\n        context,\n        selectionMode,\n        expandOnSelect,\n        draggable,\n        isKeyboardRef,\n        activeDescendantPrefix,\n        draggingId,\n        dropTarget,\n        expandedIds,\n        selectedIds,\n        focusedId,\n        toggleExpand,\n        select,\n        setFocusedId,\n        registerNode,\n        unregisterNode,\n        getNodeInfo,\n      ]\n    )\n\n    // ── Keyboard handler ──\n    const treeRef = React.useRef<HTMLDivElement>(null)\n    React.useImperativeHandle(ref, () => treeRef.current!)\n\n    const handleMouseDown = React.useCallback(() => {\n      isKeyboardRef.current = false\n    }, [])\n\n    // code-quality-allow: long-function — helper fn 結構緊密,拆 sub-fn 會跨 fn 傳 state 反而複雜\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent) => {\n        isKeyboardRef.current = true\n        if (!treeRef.current) return\n\n        // 取得所有可見的 treeitem\n        const items = Array.from(\n          treeRef.current.querySelectorAll<HTMLElement>('[role=\"treeitem\"]:not([hidden])')\n        )\n        const currentIndex = items.findIndex(\n          (el) => el.dataset.treeId === focusedId\n        )\n        if (currentIndex < 0 && items.length > 0 && ['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {\n          // 沒有焦點時,任何方向鍵先聚焦第一個\n          setFocusedId(items[0].dataset.treeId ?? null)\n          e.preventDefault()\n          return\n        }\n\n        const currentEl = items[currentIndex]\n\n        switch (e.key) {\n          case 'ArrowDown': {\n            e.preventDefault()\n            const next = items[currentIndex + 1]\n            if (next) setFocusedId(next.dataset.treeId ?? null)\n            break\n          }\n          case 'ArrowUp': {\n            e.preventDefault()\n            const prev = items[currentIndex - 1]\n            if (prev) setFocusedId(prev.dataset.treeId ?? null)\n            break\n          }\n          case 'ArrowRight': {\n            e.preventDefault()\n            const id = currentEl?.dataset.treeId\n            if (!id) break\n            const isExpanded = expandedIds.has(id)\n            const hasChildren = currentEl?.dataset.treeHasChildren === 'true'\n            if (hasChildren && !isExpanded) {\n              toggleExpand(id)\n            } else if (hasChildren && isExpanded) {\n              // 已展開 → 移到第一個 child\n              const next = items[currentIndex + 1]\n              if (next) setFocusedId(next.dataset.treeId ?? null)\n            }\n            break\n          }\n          case 'ArrowLeft': {\n            e.preventDefault()\n            const id = currentEl?.dataset.treeId\n            if (!id) break\n            const isExpanded = expandedIds.has(id)\n            const hasChildren = currentEl?.dataset.treeHasChildren === 'true'\n            if (hasChildren && isExpanded) {\n              toggleExpand(id)\n            } else {\n              // 收合狀態或 leaf → 移到 parent\n              const parentId = currentEl?.dataset.treeParentId\n              if (parentId) setFocusedId(parentId)\n            }\n            break\n          }\n          case 'Home': {\n            e.preventDefault()\n            if (items[0]) setFocusedId(items[0].dataset.treeId ?? null)\n            break\n          }\n          case 'End': {\n            e.preventDefault()\n            const last = items[items.length - 1]\n            if (last) setFocusedId(last.dataset.treeId ?? null)\n            break\n          }\n          case 'Enter':\n          case ' ': {\n            e.preventDefault()\n            const id = currentEl?.dataset.treeId\n            if (id) select(id)\n            break\n          }\n        }\n      },\n      [focusedId, expandedIds, toggleExpand, select, setFocusedId]\n    )\n\n    const treeEl = (\n      <div\n        ref={treeRef}\n        role=\"tree\"\n        aria-multiselectable={selectionMode === 'multiple' || undefined}\n        // Virtual focus:DOM focus 停在容器(單一 tab stop),aria-activedescendant 指向目前 node\n        // 的 DOM id,讓 AT 朗讀目前焦點 node(對齊 WAI-ARIA TreeView APG aria-activedescendant 模式)。\n        aria-activedescendant={focusedId ? `${activeDescendantPrefix}treeitem-${focusedId}` : undefined}\n        className={cn(\n          // TreeView root 不加任何 py——呼吸空間由外層容器負責:\n          //   - 在 SidebarGroup 內: SidebarGroup py-2 提供\n          //   - 在 DropdownMenuContent 內: content py-2 提供\n          //   - 獨立使用(story demo): consumer 自己加 py-2\n          // 這樣才能跟 DropdownMenu / MenuGroup 的結構一致(group 是容器,row 是內容)。\n          'flex flex-col',\n          className,\n        )}\n        style={{\n          ['--tree-px' as string]: CONTEXT_PX_VAR[context],\n          ...props.style,\n        } as React.CSSProperties}\n        onKeyDown={handleKeyDown}\n        onMouseDown={handleMouseDown}\n        tabIndex={0}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n\n    return (\n      <TreeViewContext.Provider value={contextValue}>\n        {/* RowSizeProvider:讓 TreeView 子樹內任何 <ItemIcon> / <ItemAvatar> /\n            <ItemInlineAction> 自動讀到對的 size,跟 SidebarProvider 同一條規則。\n            未來 TreeView 接 inlineActions API 後也吃這個 context。 */}\n        <RowSizeProvider value={size}>\n        {/* 永遠包 DndContext(hooks 不能 conditional call)。不 draggable 時無 sensors = 不可拖 */}\n        <DndContext\n          sensors={draggable ? sensors : undefined}\n          onDragStart={handleDragStart}\n          onDragOver={handleDragOver}\n          onDragEnd={handleDragEnd}\n          onDragCancel={handleDragCancel}\n        >\n          {treeEl}\n          {draggable && (\n            <DragOverlay dropAnimation={null}>\n              {draggingId ? (() => {\n                const info = getNodeInfo(draggingId)\n                const IconComp = info?.icon\n                return (\n                  <div className={cn(\n                    'flex items-center gap-2 rounded-lg bg-surface border border-border pointer-events-none',\n                    'shadow-[var(--elevation-200)]',\n                    size === 'lg' ? 'text-body-lg leading-compact px-4 py-2' : 'text-body leading-compact px-3 py-1.5',\n                  )}>\n                    {IconComp && <IconComp size={ICON_SIZE[size]} className=\"shrink-0\" aria-hidden />}\n                    <span className=\"text-foreground truncate max-w-[200px]\">{info?.label ?? draggingId}</span>\n                  </div>\n                )\n              })() : null}\n            </DragOverlay>\n          )}\n        </DndContext>\n        </RowSizeProvider>\n      </TreeViewContext.Provider>\n    )\n  }\n)\nTreeView.displayName = 'TreeView'\n\n// ═══════════════════════════════════════════════════════════════════════════\n// TreeItem variants\n// ═══════════════════════════════════════════════════════════════════════════\n\nconst treeItemVariants = cva(\n  [\n    // items-start:多行 label 時 prefix 留在第一行(item-layout 規則)\n    'flex items-start gap-2 w-full',\n    'cursor-pointer select-none',\n    'transition-colors duration-150',\n    'outline-none',\n    // Label 字重 500(跟 SidebarMenuButton 一致)\n    'font-medium',\n  ],\n  {\n    variants: {\n      // 消費 ROW_PADDING_BY_SIZE SSOT(item-anatomy.tsx)— drift risk 消除\n      size: ROW_PADDING_BY_SIZE,\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n)\n\n// ═══════════════════════════════════════════════════════════════════════════\n// TreeItem\n// ═══════════════════════════════════════════════════════════════════════════\n\nexport interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id'> {\n  /** 唯一 id。必填,用於 expand / select / keyboard 追蹤 */\n  id: string\n  /** 主要文字 */\n  label: React.ReactNode\n  /** 左側 icon(chevron 之後)。LucideIcon 型別,尺寸由 TreeView size 決定 */\n  icon?: LucideIcon\n  /**\n   * Checkbox(多選模式,label 前方)。傳入 ReactNode(Checkbox 元件)。\n   * 位置:在 icon 之後、label 之前。\n   * 單選模式通常不需要(用 bg-neutral-selected 表達選中)。\n   */\n  checkbox?: React.ReactNode\n  /**\n   * 右側 inline actions(suffix slot,宣告式 API)。對齊 `patterns/element-anatomy/inline-action.spec.md`\n   * 與 `SidebarMenuButton.inlineActions` 的同一條規格——TreeItem / SidebarMenuButton /\n   * 未來的 row primitive 全部用同一個 declarative API。\n   *\n   * Consumer 只宣告 intent,TreeItem 用 `<ItemInlineAction>` 自動渲染:\n   * - Icon 尺寸 = `ICON_SIZE[treeViewSize]`(自動)\n   * - Hover bg、tooltip、aria-label、cursor-pointer 自動處理\n   * - **不可以**手刻 button JSX(canonical 實作在 `patterns/element-anatomy/item-anatomy.tsx` `ItemInlineAction`)\n   *\n   * ```tsx\n   * <TreeItem\n   *   id=\"inbox\"\n   *   icon={Inbox}\n   *   label=\"Inbox\"\n   *   inlineActions={[\n   *     { icon: MoreVertical, label: '更多', onClick: handleMore },\n   *     { icon: Plus,           label: '新增', onClick: handleAdd },\n   *   ]}\n   *   actionsReveal=\"hover\"\n   * />\n   * ```\n   *\n   * 若需要永遠可見的 suffix(如 badge 計數),放在 `label` 內:\n   * ```tsx\n   * <TreeItem label={<>Inbox <Badge count={3} /></>} />\n   * ```\n   */\n  inlineActions?: InlineActionConfig[]\n  /**\n   * 右側 actions slot(ReactNode)— escape hatch 供 consumer 放自訂元素\n   * (如 DropdownMenu trigger / 自訂 popover / 多 tier 動作)。\n   *\n   * 跟 `inlineActions` 互斥(同時傳 `inlineActionsSlot` 會優先,`inlineActions` 被忽略)。\n   *\n   * 規則對齊 Input.endSlot canonical:90% case 用 `inlineActions` 宣告式 API,\n   * 10% config 表達不出時走 slot。視覺一致性由 consumer 負責(可使用 host 內部 helper\n   * — 但禁止 app-code 直接 import L3 primitive,見 `check_canonical_propagation.sh` E.2,原 `check_l3_primitive_import` 已 folded)。\n   */\n  inlineActionsSlot?: React.ReactNode\n  /**\n   * Inline actions 的顯示模式:\n   * - `\"hover\"`(預設):row hover 或鍵盤 focus(focus-visible)時才淡入\n   * - `false`:常駐顯示\n   *\n   * 對齊 `SidebarMenuButton.actionsReveal`,同一套規則。\n   */\n  actionsReveal?: false | \"hover\"\n  /**\n   * 取代 icon 的位置。用於 stepper 的 status indicator(●/○/✓)。\n   * 設定後 icon 不渲染、改渲染 indicator;chevron 永遠保留(expandable=旋轉箭頭 / leaf=placeholder)。\n   */\n  indicator?: React.ReactNode\n  /** 是否停用 */\n  disabled?: boolean\n  /** 子 TreeItem(有 children = expandable,沒有 = leaf) */\n  children?: React.ReactNode\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>(\n  ({ id, label, icon: Icon, checkbox, inlineActions, inlineActionsSlot, actionsReveal = 'hover', indicator, disabled, children, className, ...props }, ref) => {\n    const ctx = useTreeView()\n    const depth = React.useContext(DepthContext)\n    const {\n      size,\n      selectionMode,\n      expandOnSelect,\n      draggable,\n      expandedIds,\n      selectedIds,\n      focusedId,\n      draggingId,\n      dropTarget,\n      toggleExpand,\n      select,\n      setFocusedId,\n      registerNode,\n      unregisterNode,\n      isKeyboardRef,\n      activeDescendantPrefix,\n    } = ctx\n\n    const hasChildren = React.Children.count(children) > 0\n    const isExpanded = expandedIds.has(id)\n    const isSelected = selectedIds.has(id)\n    const isFocused = focusedId === id\n    const showRing = isFocused && isKeyboardRef.current\n    const isDragging = draggingId === id\n    const isDropTarget = dropTarget?.id === id\n\n    const iconPx = ICON_SIZE[size]\n    const indentPx = depth * INDENT_STEP[size]\n\n    // ── Drag hooks ──\n    // Figma 風格:整列可拖(不用 grip handle),靠 distance:5 區分 click vs drag\n    const { attributes: dragAttrs, listeners: dragListeners, setNodeRef: setDragRef } = useDraggable({\n      id, disabled: !draggable || disabled,\n    })\n    const { setNodeRef: setDropRef } = useDroppable({\n      id, disabled: !draggable || disabled,\n    })\n\n    // ── 找 parent id(from depth context chain)──\n    const parentId = React.useContext(ParentIdContext)\n\n    // ── Register / unregister ──\n    React.useEffect(() => {\n      registerNode(id, parentId, hasChildren, label, Icon)\n      return () => unregisterNode(id)\n    }, [id, parentId, hasChildren, label, Icon, registerNode, unregisterNode])\n\n    // ── Focus scroll into view ──\n    const itemRef = React.useRef<HTMLDivElement>(null)\n    React.useImperativeHandle(ref, () => itemRef.current!)\n\n    React.useEffect(() => {\n      if (isFocused && itemRef.current) {\n        itemRef.current.scrollIntoView({ block: 'nearest' })\n      }\n    }, [isFocused])\n\n    // ── Handlers ──\n    const handleRowClick = React.useCallback(\n      (e: React.MouseEvent) => {\n        if (disabled) return\n        e.stopPropagation()\n        setFocusedId(id)\n        select(id)\n        if (expandOnSelect && hasChildren) {\n          toggleExpand(id)\n        }\n      },\n      [id, disabled, select, setFocusedId, expandOnSelect, hasChildren, toggleExpand]\n    )\n\n    const handleChevronClick = React.useCallback(\n      (e: React.MouseEvent) => {\n        e.stopPropagation()\n        if (disabled) return\n        toggleExpand(id)\n      },\n      [id, disabled, toggleExpand]\n    )\n\n    // ── Chevron(永遠存在:expandable = 旋轉箭頭;leaf = placeholder 佔位) ──\n    // 消費 `<ItemPrefix>` SSOT — 永遠 h-[1lh] 對齊 label 第一行中線(item-anatomy 對應)。\n    // forced width 透過 style 鎖 chevron 槽寬,讓 sibling label 起點水平對齊(無 chevron leaf 佔位同寬)。\n    const chevronSlot = (\n      <ItemPrefix style={{ width: iconPx }}>\n        {hasChildren ? (\n          <button\n            type=\"button\"\n            tabIndex={-1}\n            onClick={handleChevronClick}\n            className={cn(\n              'flex items-center justify-center rounded-md',\n              'text-fg-muted hover:text-foreground hover:bg-neutral-hover',\n              'transition-all duration-150',\n              isExpanded && 'rotate-90',\n              disabled && 'text-fg-disabled pointer-events-none',\n            )}\n            style={{ width: iconPx, height: iconPx }}\n            aria-hidden\n          >\n            <ChevronRight size={iconPx} />\n          </button>\n        ) : (\n          // Leaf placeholder\n          <span style={{ width: iconPx }} aria-hidden />\n        )}\n      </ItemPrefix>\n    )\n\n    return (\n      <ParentIdContext.Provider value={id}>\n        <div\n          ref={(node) => {\n            (itemRef as React.MutableRefObject<HTMLDivElement | null>).current = node\n            if (typeof ref === 'function') ref(node)\n            else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n          }}\n          // DOM id 供容器 aria-activedescendant 指向(virtual focus);與 data-tree-id 並存\n          // (data-tree-id 給內部 querySelector / drag,id 給 AT)。\n          id={`${activeDescendantPrefix}treeitem-${id}`}\n          role=\"treeitem\"\n          aria-expanded={hasChildren ? isExpanded : undefined}\n          aria-selected={selectionMode !== 'none' ? isSelected : undefined}\n          aria-level={depth + 1}\n          aria-disabled={disabled || undefined}\n          data-tree-id={id}\n          data-tree-parent-id={parentId ?? ''}\n          data-tree-has-children={hasChildren}\n          tabIndex={-1}\n          className={cn('w-full min-w-0 relative', isDragging && dragSourceClass)}\n        >\n          {/* Drop indicator — before:水平 2px primary line(指 SSOT drag-visual.ts);\n              indent 跟隨 depth(left 由 inline style override class 的 left-0)*/}\n          {isDropTarget && dropTarget?.position === 'before' && (\n            <div\n              className={dropIndicatorRow.before}\n              style={{ left: `calc(var(--tree-px) + ${indentPx}px)` }}\n            />\n          )}\n\n          {/* Row: draggable + droppable 都在這一行(合併 ref),確保碰撞偵測只看行高 */}\n          <div\n            ref={(node) => {\n              // 合併 drag + drop ref 到同一個 element\n              if (draggable) setDragRef(node)\n              setDropRef(node)\n            }}\n            data-tree-row={id}\n            className={cn(\n              'group/tree-item',\n              treeItemVariants({ size }),\n              // 2026-05-26 SSOT lock(user explicit「multi 已有 checkbox 強信號,text 不該再變色」):\n              // ── Single mode ──\n              //   - default text 預設 fg-secondary muted(hierarchy navigation 慣例,跟 Sidebar 一致)\n              //   - selected → text-foreground emphasis + bg-neutral-selected(無 checkbox,需 text+bg 雙信號)\n              // ── Multi mode ──\n              //   - default text 維持 fg-secondary muted(跟 single 對齊 hierarchy)\n              //   - selected → 視覺信號只在 checkbox(auto-render below),text 不變、bg 不變\n              //   - 對齊 SelectMenu multi pattern(menu-item.tsx:194-195 selected → bg only;multi → checkbox only)\n              !disabled && !isSelected && 'text-fg-secondary',\n              !disabled && isSelected && selectionMode === 'single' && 'text-foreground',\n              isDropTarget && dropTarget?.position === 'inside' && dropIndicatorInside,\n              !disabled && 'hover:bg-neutral-hover hover:text-foreground',\n              !disabled && isSelected && selectionMode === 'single' && 'bg-neutral-selected',\n              showRing && 'ring-2 ring-ring ring-inset',\n              disabled && 'pointer-events-none text-fg-disabled cursor-default',\n              className,\n            )}\n            style={{\n              paddingLeft: indentPx > 0\n                ? `calc(var(--tree-px) + ${indentPx}px)`\n                : 'var(--tree-px)',\n              paddingRight: 'var(--tree-px)',\n            }}\n            onClick={handleRowClick}\n            {...(draggable ? { ...dragListeners, ...dragAttrs } : {})}\n            {...props}\n          >\n            {chevronSlot}\n\n            {/* Checkbox 在 icon 前——消費 `<ItemPrefix>` 對齊第一行\n              * 2026-05-26 SSOT lock(user explicit「多選的方式應該也是要跟 menu 一樣是出現 checkbox」):\n              *   - selectionMode='multiple' + 無 consumer checkbox prop → auto-render `<Checkbox>` reflect selectedIds\n              *     (對齊 SelectMenu multi pattern;consumer 不用手寫 checkbox)\n              *   - selectionMode='multiple' + consumer 傳 checkbox → 用 consumer 的(parent-child cascade 等 advanced)\n              *   - selectionMode='single' / 'none' → 不 render checkbox(text-foreground + bg 雙信號表 selected)\n              * 對齊 cite:menu-item.tsx:194-195(MenuItem selected bg)+ select-menu.tsx:352-354(SelectMenu multi=checkbox) */}\n            {(checkbox || selectionMode === 'multiple') && (\n              <ItemPrefix className=\"pointer-events-none\">\n                {checkbox || <Checkbox checked={isSelected} disabled={disabled} aria-hidden=\"true\" />}\n              </ItemPrefix>\n            )}\n\n            {/* indicator 取代 icon 的位置;h-[1lh] 對齊第一行\n                indicator 是 escape hatch(stepper status dot 等客製內容),消費 `<ItemPrefix>` 鎖 chevron 槽寬;\n                Icon 走 canonical `<ItemIcon>` helper——自動標 data-prefix-type=\"icon\",\n                讓 SidebarProvider 的全域 :has() prefix-mix 偵測能命中。 */}\n            {indicator ? (\n              <ItemPrefix style={{ width: iconPx }}>\n                {indicator}\n              </ItemPrefix>\n            ) : Icon ? (\n              <ItemIcon icon={Icon} className={disabled ? 'text-fg-disabled' : undefined} />\n            ) : null}\n\n            <span className={cn('flex-1 min-w-0 truncate', disabled && 'text-fg-disabled')}>\n              {label}\n            </span>\n\n            {/* Suffix inline actions——宣告式 API,用 `<ItemInlineAction>` 渲染。\n                消費 `<ItemSuffix hoverReveal hoverGroup=\"tree-item\">` SSOT(2026-05-05 v8 group selector 參數化後)。\n                actionsReveal=\"hover\"(預設):row hover 或 keyboard focus-visible 才顯示;\n                actionsReveal=false:常駐顯示。跟 SidebarMenuButton 共用同一條規則,行為一致。\n                inlineActionsSlot escape hatch 優先(consumer 自控 JSX,reveal 一樣套外層 group)。 */}\n            {/* 2026-06-12 R2(同 sidebar.tsx 修):宿主 disabled 時 render 層擋 inline actions —\n                inline-action.spec.md「宿主 disabled | 不渲染」;row pointer-events 蓋不住\n                actionsReveal=false 常駐顯示的視覺暗示,必須 render 層 guard。 */}\n            {disabled ? null : inlineActionsSlot ? (\n              <ItemSuffix hoverReveal={actionsReveal === 'hover'} hoverGroup=\"tree-item\">\n                {inlineActionsSlot}\n              </ItemSuffix>\n            ) : inlineActions && inlineActions.length > 0 ? (\n              <ItemSuffix hoverReveal={actionsReveal === 'hover'} hoverGroup=\"tree-item\">\n                {inlineActions.map((action, i) => (\n                  <ItemInlineAction key={action.label + i} action={action} />\n                ))}\n              </ItemSuffix>\n            ) : null}\n          </div>\n\n          {/* Drop indicator — after:同 before mirror 到 bottom edge(SSOT drag-visual.ts)*/}\n          {isDropTarget && dropTarget?.position === 'after' && (\n            <div\n              className={dropIndicatorRow.after}\n              style={{ left: `calc(var(--tree-px) + ${indentPx}px)` }}\n            />\n          )}\n\n          {/* Children: Collapsible 展開/收合 */}\n          {hasChildren && (\n            <CollapsiblePrimitive.Root open={isExpanded}>\n              <CollapsiblePrimitive.Content\n                className=\"overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\"\n              >\n                <DepthContext.Provider value={depth + 1}>\n                  <div role=\"group\" className=\"flex flex-col w-full\">\n                    {children}\n                  </div>\n                </DepthContext.Provider>\n              </CollapsiblePrimitive.Content>\n            </CollapsiblePrimitive.Root>\n          )}\n        </div>\n      </ParentIdContext.Provider>\n    )\n  }\n)\nTreeItem.displayName = 'TreeItem'\n\n// Parent ID context for keyboard navigation (← to parent)\nconst ParentIdContext = React.createContext<string | null>(null)\n\n// ═══════════════════════════════════════════════════════════════════════════\n// Exports\n// ═══════════════════════════════════════════════════════════════════════════\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 treeViewMeta = {\n  component: 'TreeView',\n  family: 1, // Family 1(Menu item layout)消費者 — 對齊 tree-view.spec.md frontmatter family: 1\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-neutral-hover', 'bg-neutral-selected', 'bg-surface'],\n    fg: ['text-fg-disabled', 'text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n    ring: ['ring-ring'],\n  },\n  defaultSize: 'md',\n} as const\n\nexport { TreeView, TreeItem, treeItemVariants }\n"],"names":["treeEl"],"mappings":"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"}
+{"version":3,"file":"tree-view.js","sources":["../../../src/components/TreeView/tree-view.tsx"],"sourcesContent":["// code-quality-allow: file-size — foundational composite(TreeView owns tree logic + TreeItem + drag-drop + keyboard;拆 sub-component 會把 register/unregister 跨檔傳 ref 複雜化超過可讀性 gain)\nimport * as React from 'react'\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible'\nimport {\n  DndContext,\n  DragOverlay,\n  useDraggable,\n  useDroppable,\n  PointerSensor,\n  useSensor,\n  useSensors,\n  type DragStartEvent,\n  type DragEndEvent,\n  type DragOverEvent,\n} from '@dnd-kit/core'\nimport { ChevronRight } from 'lucide-react'\nimport { cva } from 'class-variance-authority'\nimport type { LucideIcon } from 'lucide-react'\nimport { dragSourceClass, dropIndicatorRow, dropIndicatorInside } from '@/design-system/lib/drag-visual'\nimport { cn } from '@/lib/utils'\nimport { Checkbox } from '@/design-system/components/Checkbox/checkbox'\n// Row primitive 共用常數——單一 source of truth\nimport {\n  ICON_SIZE,\n  RowSizeProvider,\n  ItemIcon,\n  ItemPrefix,\n  ItemSuffix,\n  ItemInlineAction,\n  ROW_PADDING_BY_SIZE,\n  type InlineActionConfig,\n} from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n/**\n * TreeView — 階層結構的遞迴元件\n *\n * 一個 TreeItem 就是一個 node——有 children 就可展開,沒有就是 leaf。\n * 沒有第二個概念(沒有 TreeGroup)。\n *\n * TreeView 負責:\n *   1. 遞迴渲染 + indent\n *   2. 展開/收合狀態管理\n *   3. 鍵盤導覽 + ARIA tree\n *\n * 它不管 node 裡面長什麼樣——icon、badge、status indicator 等\n * 由 consumer 透過 props / slots 決定。\n *\n * 詳見 tree-view.spec.md。\n */\n\n// ═══════════════════════════════════════════════════════════════════════════\n// Types\n// ═══════════════════════════════════════════════════════════════════════════\n\ntype SizeKey = 'sm' | 'md' | 'lg'\ntype SelectionMode = 'single' | 'multiple' | 'none'\n/**\n * TreeView 的使用脈絡,決定 item 的水平 padding:\n * - `'sidebar'`:頁面側邊欄,用 `--layout-space-loose` token(md=16px / lg=24px,跟 density 連動)\n * - `'menu'`:浮層選單 / dropdown,px-3(12px),對齊 MenuItem / DropdownMenu\n */\ntype TreeContext = 'sidebar' | 'menu'\n\n// Base horizontal padding per context — 用 CSS variable 注入到 TreeView 容器,\n// TreeItem 用 calc(var(--tree-px) + indent) 算出最終 paddingLeft。\nconst CONTEXT_PX_VAR: Record<TreeContext, string> = {\n  sidebar: 'var(--layout-space-loose)',  // md=16px, lg=24px(density 連動)\n  menu: '12px',                          // px-3,對齊 MenuItem / DropdownMenu\n}\n\n/** Drag drop position — 拖放目標的三種位置 */\n// code-quality-allow: dead-export — public event/state type — consumer event handler parameter type\nexport type TreeDropPosition = 'before' | 'after' | 'inside'\n\n/** onDragEnd callback 的參數 */\n// code-quality-allow: dead-export — public event/state type — consumer event handler parameter type\nexport interface TreeDragEndEvent {\n  /** 被拖曳的 node id */\n  sourceId: string\n  /** 目標 node id */\n  targetId: string\n  /** 放置位置:before(同層上方)/ after(同層下方)/ inside(成為子 node) */\n  position: TreeDropPosition\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// Constants\n// ═══════════════════════════════════════════════════════════════════════════\n\n// Icon / chevron 尺寸——從 item-layout pattern module 引入(在檔頂 import),\n// 這裡本地不再宣告。所有 row primitives 共用同一個常數。\n\n// indentStep = chevronSize + gap-2(8px)。值 {24,24,28} 與 CSS token `--tree-indent-{sm,md,lg}`\n// (`tokens/uiSize/uiSize.css`)**完全一致、必須同步維護**(改一處要兩處一起改;非「token 取代 literal」)。\n// 為何兩源並存:本元件 render 用此 JS literal 算 `indentPx`(L808 inline calc 需 number)+ drop-indicator\n// pointer 數學(L352,需 number 做 px 命中判斷,CSS var 在 JS 計算層拿不到);DataTable nested rows\n// 則走 CSS token 的 Tailwind class(跨元件視覺一致)。結構對齊:子 chevron 對齊父 icon,子 icon 對齊父 label。\nconst INDENT_STEP: Record<SizeKey, number> = { sm: 24, md: 24, lg: 28 }\n\n// ═══════════════════════════════════════════════════════════════════════════\n// Context\n// ═══════════════════════════════════════════════════════════════════════════\n\ninterface TreeViewContextValue {\n  size: SizeKey\n  context: TreeContext\n  selectionMode: SelectionMode\n  expandOnSelect: boolean\n  draggable: boolean\n  isKeyboardRef: React.RefObject<boolean>\n  /**\n   * Per-tree instance 前綴(React.useId),用來組每個 treeitem 的 DOM `id`\n   * (`${prefix}treeitem-${nodeId}`),讓容器的 `aria-activedescendant` 能指向目前 focused node。\n   * 多棵 TreeView 同頁 / node id 跨樹重複時不會撞 DOM id。\n   */\n  activeDescendantPrefix: string\n  expandedIds: Set<string>\n  selectedIds: Set<string>\n  focusedId: string | null\n  /** 目前拖曳中的 node id(null = 沒在拖) */\n  draggingId: string | null\n  /** 目前 drop indicator 的位置 + depth(用於 line indent) */\n  dropTarget: { id: string; position: TreeDropPosition; depth: number } | null\n  toggleExpand: (id: string) => void\n  select: (id: string) => void\n  setFocusedId: (id: string | null) => void\n  registerNode: (id: string, parentId: string | null, hasChildren: boolean, label?: React.ReactNode, icon?: LucideIcon) => void\n  getNodeInfo: (id: string) => NodeInfo | undefined\n  unregisterNode: (id: string) => void\n}\n\nconst TreeViewContext = React.createContext<TreeViewContextValue | null>(null)\n\nfunction useTreeView(): TreeViewContextValue {\n  const ctx = React.useContext(TreeViewContext)\n  if (!ctx) throw new Error('TreeItem must be used within TreeView')\n  return ctx\n}\n\n// TreeItem depth context(遞迴 depth tracking)\nconst DepthContext = React.createContext(0)\n\n// ═══════════════════════════════════════════════════════════════════════════\n// Node registry — 追蹤所有 node 的 parent/children 關係,用於鍵盤導覽\n// ═══════════════════════════════════════════════════════════════════════════\n\ninterface NodeInfo {\n  id: string\n  parentId: string | null\n  hasChildren: boolean\n  /** 用於 DragOverlay ghost 渲染 */\n  label?: React.ReactNode\n  icon?: LucideIcon\n}\n\nfunction useNodeRegistry() {\n  const nodesRef = React.useRef(new Map<string, NodeInfo>())\n\n  const registerNode = React.useCallback(\n    (id: string, parentId: string | null, hasChildren: boolean, label?: React.ReactNode, icon?: LucideIcon) => {\n      nodesRef.current.set(id, { id, parentId, hasChildren, label, icon })\n    },\n    []\n  )\n\n  const unregisterNode = React.useCallback((id: string) => {\n    nodesRef.current.delete(id)\n  }, [])\n\n  const getNodeInfo = React.useCallback((id: string) => nodesRef.current.get(id), [])\n\n  return { nodesRef, registerNode, unregisterNode, getNodeInfo }\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// TreeView\n// ═══════════════════════════════════════════════════════════════════════════\n\nexport interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onDragEnd'> {\n  /** 元件尺寸,影響 node 高度、icon 大小、indent 寬度 */\n  size?: SizeKey\n  /**\n   * 使用脈絡,決定 item 的水平 padding:\n   * - `'sidebar'`(預設):頁面側邊欄,`--layout-space-loose`(md=16px / lg=24px,隨 density 連動)\n   * - `'menu'`:浮層選單 / dropdown,px-3(12px),對齊 MenuItem\n   */\n  context?: TreeContext\n  /** 選取模式。預設 'single'(sidebar nav / stepper) */\n  selectionMode?: SelectionMode\n  /** 點擊 label 時是否同時展開 children。預設 false(chevron 是展開的唯一控件) */\n  expandOnSelect?: boolean\n  /** 受控:展開的 node id 集合 */\n  expandedIds?: Set<string>\n  /** 受控:展開狀態變更 callback */\n  onExpandedChange?: (ids: Set<string>) => void\n  /** 受控:選取的 node id 集合 */\n  selectedIds?: Set<string>\n  /** 受控:選取狀態變更 callback */\n  onSelectedChange?: (ids: Set<string>) => void\n  /** 非受控:預設展開的 node id 陣列 */\n  defaultExpandedIds?: string[]\n  /** 非受控:預設選取的 node id 陣列 */\n  defaultSelectedIds?: string[]\n  /**\n   * 啟用拖曳排序。預設 false。\n   * 啟用後整列可拖(Figma 風格,無 grip handle;靠 distance:5 區分 click vs drag),\n   * 拖曳時顯示 drop indicator(before / after / inside 三種位置)。\n   * Consumer 透過 `onDragEnd` callback 接收 reorder 事件,自行更新 data。\n   */\n  draggable?: boolean\n  /** Drag 結束時觸發,提供 sourceId、targetId、position。Consumer 負責 reorder。 */\n  onDragEnd?: (event: TreeDragEndEvent) => void\n  /** ARIA label */\n  'aria-label'?: string\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst TreeView = React.forwardRef<HTMLDivElement, TreeViewProps>(\n  (\n    {\n      size = 'md',\n      context = 'sidebar',\n      selectionMode = 'single',\n      expandOnSelect = false,\n      draggable = false,\n      onDragEnd: onDragEndProp,\n      expandedIds: controlledExpanded,\n      onExpandedChange,\n      selectedIds: controlledSelected,\n      onSelectedChange,\n      defaultExpandedIds = [],\n      defaultSelectedIds = [],\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // ── Expand state(受控 / 非受控) ──\n    const [internalExpanded, setInternalExpanded] = React.useState(\n      () => new Set(defaultExpandedIds)\n    )\n    const expandedIds = controlledExpanded ?? internalExpanded\n    const setExpandedIds = React.useCallback(\n      (updater: (prev: Set<string>) => Set<string>) => {\n        const update = (prev: Set<string>) => {\n          const next = updater(prev)\n          onExpandedChange?.(next)\n          return next\n        }\n        if (controlledExpanded) {\n          update(controlledExpanded)\n        } else {\n          setInternalExpanded(update)\n        }\n      },\n      [controlledExpanded, onExpandedChange]\n    )\n\n    // ── Selection state(受控 / 非受控) ──\n    const [internalSelected, setInternalSelected] = React.useState(\n      () => new Set(defaultSelectedIds)\n    )\n    const selectedIds = controlledSelected ?? internalSelected\n    const setSelectedIds = React.useCallback(\n      (updater: (prev: Set<string>) => Set<string>) => {\n        const update = (prev: Set<string>) => {\n          const next = updater(prev)\n          onSelectedChange?.(next)\n          return next\n        }\n        if (controlledSelected) {\n          update(controlledSelected)\n        } else {\n          setInternalSelected(update)\n        }\n      },\n      [controlledSelected, onSelectedChange]\n    )\n\n    // ── Focus state ──\n    const [focusedId, setFocusedId] = React.useState<string | null>(null)\n\n    // ── Virtual focus id prefix ──\n    // DOM focus 永遠停在 role=tree 容器(單一 tab stop);目前 node 透過 aria-activedescendant\n    // 告知 AT(對齊 DS 既有 cmdk virtual-focus canonical:SelectMenu / Command listbox)。\n    // useId 確保多棵 TreeView 同頁 / node id 跨樹重複時 DOM id 不撞。\n    const activeDescendantPrefix = React.useId()\n\n    // ── Keyboard vs mouse detection ──\n    // focus ring 只在鍵盤操作時顯示,滑鼠點擊用 bg-neutral-selected 表達選中,不顯示 ring\n    const isKeyboardRef = React.useRef(false)\n\n    // ── Drag state ──\n    const [draggingId, setDraggingId] = React.useState<string | null>(null)\n    const [dropTarget, setDropTarget] = React.useState<{ id: string; position: TreeDropPosition; depth: number } | null>(null)\n    const autoExpandTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)\n    // 2026-05-16 audit codex Round 6:unmount cleanup(原 cleanup 只在 dragEnd/dragCancel,unmount-during-drag 漏 cancel)\n    React.useEffect(() => () => { if (autoExpandTimerRef.current) clearTimeout(autoExpandTimerRef.current) }, [])\n    // Ref for toggleExpand — handleDragOver 定義在 toggleExpand 之前(hook 順序限制),\n    // 用 ref 打斷 temporal dead zone。\n    const toggleExpandRef = React.useRef<(id: string) => void>(() => {})\n\n    const sensors = useSensors(\n      useSensor(PointerSensor, { activationConstraint: { distance: 5 } })\n    )\n\n    const handleDragStart = React.useCallback((event: DragStartEvent) => {\n      setDraggingId(String(event.active.id))\n    }, [])\n\n    // ── Figma-style drop detection(X + Y 雙軸）──\n    //\n    // Y 軸:決定在哪個 item 附近\n    //   - item 上 25% = before\n    //   - item 中 50% = inside(只有 folder)\n    //   - item 下 25% = after\n    //\n    // X 軸:決定 nesting 深度(Figma 核心邏輯)\n    //   - 滑鼠越左 = 越淺層(放在 parent 層級)\n    //   - 滑鼠越右 = 越深層(放進 folder)\n    //   - 用 pointer X 相對於 tree 左邊界計算 indent level\n    //\n    const handleDragOver = React.useCallback((event: DragOverEvent) => {\n      const { over, active } = event\n      if (!over || over.id === active.id) {\n        if (autoExpandTimerRef.current) { clearTimeout(autoExpandTimerRef.current); autoExpandTimerRef.current = null }\n        setDropTarget(null)\n        return\n      }\n\n      const rowEl = document.querySelector(`[data-tree-row=\"${over.id}\"]`) as HTMLElement | null\n      const targetEl = document.querySelector(`[data-tree-id=\"${over.id}\"]`) as HTMLElement | null\n      if (!rowEl || !targetEl) { setDropTarget(null); return }\n\n      // 實際指標位置\n      const startX = (event.activatorEvent as PointerEvent)?.clientX ?? 0\n      const startY = (event.activatorEvent as PointerEvent)?.clientY ?? 0\n      const currentX = startX + (event.delta?.x ?? 0)\n      const currentY = startY + (event.delta?.y ?? 0)\n\n      const rect = rowEl.getBoundingClientRect()\n      const offsetY = currentY - rect.top\n      const height = rect.height || 32\n      const ratio = Math.max(0, Math.min(1, offsetY / height))\n\n      const hasChildren = targetEl.dataset.treeHasChildren === 'true'\n      const targetDepth = Number(targetEl.getAttribute('aria-level') ?? 1) - 1\n\n      // ── X 軸:計算指標在哪個 indent level ──\n      const treeEl = treeRef.current\n      const treeLeft = treeEl?.getBoundingClientRect().left ?? 0\n      const indentStep = INDENT_STEP[size]\n      const pointerIndentLevel = Math.max(0, Math.floor((currentX - treeLeft) / indentStep))\n\n      let position: TreeDropPosition\n      let finalDepth = targetDepth\n\n      if (hasChildren) {\n        // Folder node\n        if (ratio < 0.25) {\n          position = 'before'\n        } else if (ratio > 0.75) {\n          // after folder: 如果指標在 folder 層級或更淺 = after(同層)\n          // 如果指標更深 = inside(放進 folder)\n          position = pointerIndentLevel > targetDepth ? 'inside' : 'after'\n        } else {\n          position = 'inside'\n        }\n      } else {\n        // Leaf node\n        if (ratio < 0.5) {\n          position = 'before'\n        } else {\n          position = 'after'\n          // X 軸:如果指標在比 target 更淺的層級,提升 drop depth\n          // 例:Contact(depth 1)的 after,如果滑鼠在 depth 0 → 變成「after Pages」\n          if (pointerIndentLevel < targetDepth) {\n            // 找 parent 來放\n            const groupEl = targetEl.closest('[role=\"group\"]')\n            const parentTreeItem = groupEl?.parentElement?.closest('[role=\"treeitem\"]')\n            const parentId = parentTreeItem?.getAttribute('data-tree-id')\n            if (parentId && parentId !== String(active.id)) {\n              const parentDepth = Number(parentTreeItem?.getAttribute('aria-level') ?? 1) - 1\n              finalDepth = parentDepth\n              setDropTarget({ id: parentId, position: 'after', depth: parentDepth })\n              return\n            }\n          }\n        }\n      }\n\n      setDropTarget({ id: String(over.id), position, depth: finalDepth })\n\n      // Auto-expand collapsed folder after 500ms hover (Figma behavior)\n      if (position === 'inside' && hasChildren && !expandedIds.has(String(over.id))) {\n        if (autoExpandTimerRef.current) clearTimeout(autoExpandTimerRef.current)\n        autoExpandTimerRef.current = setTimeout(() => {\n          toggleExpandRef.current(String(over.id))\n        }, 500)\n      } else {\n        if (autoExpandTimerRef.current) { clearTimeout(autoExpandTimerRef.current); autoExpandTimerRef.current = null }\n      }\n    }, [expandedIds])\n\n    const dropTargetRef = React.useRef(dropTarget)\n    dropTargetRef.current = dropTarget\n\n    const handleDragEnd = React.useCallback((event: DragEndEvent) => {\n      if (autoExpandTimerRef.current) { clearTimeout(autoExpandTimerRef.current); autoExpandTimerRef.current = null }\n      const { active, over } = event\n      const dt = dropTargetRef.current\n      if (over && active.id !== over.id && dt) {\n        onDragEndProp?.({\n          sourceId: String(active.id),\n          targetId: String(over.id),\n          position: dt.position,\n        })\n      }\n      setDraggingId(null)\n      setDropTarget(null)\n    }, [onDragEndProp])\n\n    const handleDragCancel = React.useCallback(() => {\n      if (autoExpandTimerRef.current) { clearTimeout(autoExpandTimerRef.current); autoExpandTimerRef.current = null }\n      setDraggingId(null)\n      setDropTarget(null)\n    }, [])\n\n    // ── Node registry ──\n    const { registerNode, unregisterNode, getNodeInfo } = useNodeRegistry()\n\n    // ── Actions ──\n    const toggleExpand = React.useCallback(\n      (id: string) => {\n        setExpandedIds((prev) => {\n          const next = new Set(prev)\n          if (next.has(id)) next.delete(id)\n          else next.add(id)\n          return next\n        })\n      },\n      [setExpandedIds]\n    )\n    toggleExpandRef.current = toggleExpand\n\n    const select = React.useCallback(\n      (id: string) => {\n        if (selectionMode === 'none') return\n        setSelectedIds((prev) => {\n          if (selectionMode === 'single') {\n            return new Set([id])\n          }\n          // multiple\n          const next = new Set(prev)\n          if (next.has(id)) next.delete(id)\n          else next.add(id)\n          return next\n        })\n      },\n      [selectionMode, setSelectedIds]\n    )\n\n    // ── Context value ──\n    const contextValue = React.useMemo<TreeViewContextValue>(\n      () => ({\n        size,\n        context,\n        selectionMode,\n        expandOnSelect,\n        draggable,\n        isKeyboardRef,\n        activeDescendantPrefix,\n        draggingId,\n        dropTarget,\n        expandedIds,\n        selectedIds,\n        focusedId,\n        toggleExpand,\n        select,\n        setFocusedId,\n        registerNode,\n        unregisterNode,\n        getNodeInfo,\n      }),\n      [\n        size,\n        context,\n        selectionMode,\n        expandOnSelect,\n        draggable,\n        isKeyboardRef,\n        activeDescendantPrefix,\n        draggingId,\n        dropTarget,\n        expandedIds,\n        selectedIds,\n        focusedId,\n        toggleExpand,\n        select,\n        setFocusedId,\n        registerNode,\n        unregisterNode,\n        getNodeInfo,\n      ]\n    )\n\n    // ── Keyboard handler ──\n    const treeRef = React.useRef<HTMLDivElement>(null)\n    React.useImperativeHandle(ref, () => treeRef.current!)\n\n    const handleMouseDown = React.useCallback(() => {\n      isKeyboardRef.current = false\n    }, [])\n\n    // code-quality-allow: long-function — helper fn 結構緊密,拆 sub-fn 會跨 fn 傳 state 反而複雜\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent) => {\n        isKeyboardRef.current = true\n        if (!treeRef.current) return\n\n        // 取得所有可見的 treeitem\n        const items = Array.from(\n          treeRef.current.querySelectorAll<HTMLElement>('[role=\"treeitem\"]:not([hidden])')\n        )\n        const currentIndex = items.findIndex(\n          (el) => el.dataset.treeId === focusedId\n        )\n        if (currentIndex < 0 && items.length > 0 && ['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {\n          // 沒有焦點時,任何方向鍵先聚焦第一個\n          setFocusedId(items[0].dataset.treeId ?? null)\n          e.preventDefault()\n          return\n        }\n\n        const currentEl = items[currentIndex]\n\n        switch (e.key) {\n          case 'ArrowDown': {\n            e.preventDefault()\n            const next = items[currentIndex + 1]\n            if (next) setFocusedId(next.dataset.treeId ?? null)\n            break\n          }\n          case 'ArrowUp': {\n            e.preventDefault()\n            const prev = items[currentIndex - 1]\n            if (prev) setFocusedId(prev.dataset.treeId ?? null)\n            break\n          }\n          case 'ArrowRight': {\n            e.preventDefault()\n            const id = currentEl?.dataset.treeId\n            if (!id) break\n            const isExpanded = expandedIds.has(id)\n            const hasChildren = currentEl?.dataset.treeHasChildren === 'true'\n            if (hasChildren && !isExpanded) {\n              toggleExpand(id)\n            } else if (hasChildren && isExpanded) {\n              // 已展開 → 移到第一個 child\n              const next = items[currentIndex + 1]\n              if (next) setFocusedId(next.dataset.treeId ?? null)\n            }\n            break\n          }\n          case 'ArrowLeft': {\n            e.preventDefault()\n            const id = currentEl?.dataset.treeId\n            if (!id) break\n            const isExpanded = expandedIds.has(id)\n            const hasChildren = currentEl?.dataset.treeHasChildren === 'true'\n            if (hasChildren && isExpanded) {\n              toggleExpand(id)\n            } else {\n              // 收合狀態或 leaf → 移到 parent\n              const parentId = currentEl?.dataset.treeParentId\n              if (parentId) setFocusedId(parentId)\n            }\n            break\n          }\n          case 'Home': {\n            e.preventDefault()\n            if (items[0]) setFocusedId(items[0].dataset.treeId ?? null)\n            break\n          }\n          case 'End': {\n            e.preventDefault()\n            const last = items[items.length - 1]\n            if (last) setFocusedId(last.dataset.treeId ?? null)\n            break\n          }\n          case 'Enter':\n          case ' ': {\n            e.preventDefault()\n            const id = currentEl?.dataset.treeId\n            if (id) select(id)\n            break\n          }\n        }\n      },\n      [focusedId, expandedIds, toggleExpand, select, setFocusedId]\n    )\n\n    const treeEl = (\n      <div\n        ref={treeRef}\n        role=\"tree\"\n        aria-multiselectable={selectionMode === 'multiple' || undefined}\n        // Virtual focus:DOM focus 停在容器(單一 tab stop),aria-activedescendant 指向目前 node\n        // 的 DOM id,讓 AT 朗讀目前焦點 node(對齊 WAI-ARIA TreeView APG aria-activedescendant 模式)。\n        aria-activedescendant={focusedId ? `${activeDescendantPrefix}treeitem-${focusedId}` : undefined}\n        className={cn(\n          // TreeView root 不加任何 py——呼吸空間由外層容器負責:\n          //   - 在 SidebarGroup 內: SidebarGroup py-2 提供\n          //   - 在 DropdownMenuContent 內: content py-2 提供\n          //   - 獨立使用(story demo): consumer 自己加 py-2\n          // 這樣才能跟 DropdownMenu / MenuGroup 的結構一致(group 是容器,row 是內容)。\n          'flex flex-col',\n          className,\n        )}\n        style={{\n          ['--tree-px' as string]: CONTEXT_PX_VAR[context],\n          ...props.style,\n        } as React.CSSProperties}\n        onKeyDown={handleKeyDown}\n        onMouseDown={handleMouseDown}\n        tabIndex={0}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n\n    return (\n      <TreeViewContext.Provider value={contextValue}>\n        {/* RowSizeProvider:讓 TreeView 子樹內任何 <ItemIcon> / <ItemAvatar> /\n            <ItemInlineAction> 自動讀到對的 size,跟 SidebarProvider 同一條規則。\n            未來 TreeView 接 inlineActions API 後也吃這個 context。 */}\n        <RowSizeProvider value={size}>\n        {/* 永遠包 DndContext(hooks 不能 conditional call)。不 draggable 時無 sensors = 不可拖 */}\n        <DndContext\n          sensors={draggable ? sensors : undefined}\n          onDragStart={handleDragStart}\n          onDragOver={handleDragOver}\n          onDragEnd={handleDragEnd}\n          onDragCancel={handleDragCancel}\n        >\n          {treeEl}\n          {draggable && (\n            <DragOverlay dropAnimation={null}>\n              {draggingId ? (() => {\n                const info = getNodeInfo(draggingId)\n                const IconComp = info?.icon\n                return (\n                  <div className={cn(\n                    'flex items-center gap-2 rounded-lg bg-surface border border-border pointer-events-none',\n                    'shadow-[var(--elevation-200)]',\n                    size === 'lg' ? 'text-body-lg leading-compact px-4 py-2' : 'text-body leading-compact px-3 py-1.5',\n                  )}>\n                    {IconComp && <IconComp size={ICON_SIZE[size]} className=\"shrink-0\" aria-hidden />}\n                    <span className=\"text-foreground truncate max-w-[200px]\">{info?.label ?? draggingId}</span>\n                  </div>\n                )\n              })() : null}\n            </DragOverlay>\n          )}\n        </DndContext>\n        </RowSizeProvider>\n      </TreeViewContext.Provider>\n    )\n  }\n)\nTreeView.displayName = 'TreeView'\n\n// ═══════════════════════════════════════════════════════════════════════════\n// TreeItem variants\n// ═══════════════════════════════════════════════════════════════════════════\n\nconst treeItemVariants = cva(\n  [\n    // items-start:多行 label 時 prefix 留在第一行(item-layout 規則)\n    'flex items-start gap-2 w-full',\n    'cursor-pointer select-none',\n    'transition-colors duration-150',\n    'outline-none',\n    // Label 字重 500(跟 SidebarMenuButton 一致)\n    'font-medium',\n  ],\n  {\n    variants: {\n      // 消費 ROW_PADDING_BY_SIZE SSOT(item-anatomy.tsx)— drift risk 消除\n      size: ROW_PADDING_BY_SIZE,\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n)\n\n// ═══════════════════════════════════════════════════════════════════════════\n// TreeItem\n// ═══════════════════════════════════════════════════════════════════════════\n\nexport interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id'> {\n  /** 唯一 id。必填,用於 expand / select / keyboard 追蹤 */\n  id: string\n  /** 主要文字 */\n  label: React.ReactNode\n  /** 左側 icon(chevron 之後)。LucideIcon 型別,尺寸由 TreeView size 決定 */\n  icon?: LucideIcon\n  /**\n   * Checkbox(多選模式,label 前方)。傳入 ReactNode(Checkbox 元件)。\n   * 位置:在 icon 之後、label 之前。\n   * 單選模式通常不需要(用 bg-neutral-selected 表達選中)。\n   */\n  checkbox?: React.ReactNode\n  /**\n   * 右側 inline actions(suffix slot,宣告式 API)。對齊 `patterns/element-anatomy/inline-action.spec.md`\n   * 與 `SidebarMenuButton.inlineActions` 的同一條規格——TreeItem / SidebarMenuButton /\n   * 未來的 row primitive 全部用同一個 declarative API。\n   *\n   * Consumer 只宣告 intent,TreeItem 用 `<ItemInlineAction>` 自動渲染:\n   * - Icon 尺寸 = `ICON_SIZE[treeViewSize]`(自動)\n   * - Hover bg、tooltip、aria-label、cursor-pointer 自動處理\n   * - **不可以**手刻 button JSX(canonical 實作在 `patterns/element-anatomy/item-anatomy.tsx` `ItemInlineAction`)\n   *\n   * ```tsx\n   * <TreeItem\n   *   id=\"inbox\"\n   *   icon={Inbox}\n   *   label=\"Inbox\"\n   *   inlineActions={[\n   *     { icon: MoreVertical, label: '更多', onClick: handleMore },\n   *     { icon: Plus,           label: '新增', onClick: handleAdd },\n   *   ]}\n   *   actionsReveal=\"hover\"\n   * />\n   * ```\n   *\n   * 若需要永遠可見的 suffix(如 badge 計數),放在 `label` 內:\n   * ```tsx\n   * <TreeItem label={<>Inbox <Badge count={3} /></>} />\n   * ```\n   */\n  inlineActions?: InlineActionConfig[]\n  /**\n   * 右側 actions slot(ReactNode)— escape hatch 供 consumer 放自訂元素\n   * (如 DropdownMenu trigger / 自訂 popover / 多 tier 動作)。\n   *\n   * 跟 `inlineActions` 互斥(同時傳 `inlineActionsSlot` 會優先,`inlineActions` 被忽略)。\n   *\n   * 規則對齊 Input.endSlot canonical:90% case 用 `inlineActions` 宣告式 API,\n   * 10% config 表達不出時走 slot。視覺一致性由 consumer 負責(可使用 host 內部 helper\n   * — 但禁止 app-code 直接 import L3 primitive,見 `check_canonical_propagation.sh` E.2,原 `check_l3_primitive_import` 已 folded)。\n   */\n  inlineActionsSlot?: React.ReactNode\n  /**\n   * Inline actions 的顯示模式:\n   * - `\"hover\"`(預設):row hover 或鍵盤 focus(focus-visible)時才淡入\n   * - `false`:常駐顯示\n   *\n   * 對齊 `SidebarMenuButton.actionsReveal`,同一套規則。\n   */\n  actionsReveal?: false | \"hover\"\n  /**\n   * 取代 icon 的位置。用於 stepper 的 status indicator(●/○/✓)。\n   * 設定後 icon 不渲染、改渲染 indicator;chevron 永遠保留(expandable=旋轉箭頭 / leaf=placeholder)。\n   */\n  indicator?: React.ReactNode\n  /** 是否停用 */\n  disabled?: boolean\n  /** 子 TreeItem(有 children = expandable,沒有 = leaf) */\n  children?: React.ReactNode\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>(\n  ({ id, label, icon: Icon, checkbox, inlineActions, inlineActionsSlot, actionsReveal = 'hover', indicator, disabled, children, className, ...props }, ref) => {\n    const ctx = useTreeView()\n    const depth = React.useContext(DepthContext)\n    const {\n      size,\n      selectionMode,\n      expandOnSelect,\n      draggable,\n      expandedIds,\n      selectedIds,\n      focusedId,\n      draggingId,\n      dropTarget,\n      toggleExpand,\n      select,\n      setFocusedId,\n      registerNode,\n      unregisterNode,\n      isKeyboardRef,\n      activeDescendantPrefix,\n    } = ctx\n\n    const hasChildren = React.Children.count(children) > 0\n    const isExpanded = expandedIds.has(id)\n    const isSelected = selectedIds.has(id)\n    const isFocused = focusedId === id\n    const showRing = isFocused && isKeyboardRef.current\n    const isDragging = draggingId === id\n    const isDropTarget = dropTarget?.id === id\n\n    const iconPx = ICON_SIZE[size]\n    const indentPx = depth * INDENT_STEP[size]\n\n    // ── Drag hooks ──\n    // Figma 風格:整列可拖(不用 grip handle),靠 distance:5 區分 click vs drag\n    const { attributes: dragAttrs, listeners: dragListeners, setNodeRef: setDragRef } = useDraggable({\n      id, disabled: !draggable || disabled,\n    })\n    const { setNodeRef: setDropRef } = useDroppable({\n      id, disabled: !draggable || disabled,\n    })\n\n    // ── 找 parent id(from depth context chain)──\n    const parentId = React.useContext(ParentIdContext)\n\n    // ── Register / unregister ──\n    React.useEffect(() => {\n      registerNode(id, parentId, hasChildren, label, Icon)\n      return () => unregisterNode(id)\n    }, [id, parentId, hasChildren, label, Icon, registerNode, unregisterNode])\n\n    // ── Focus scroll into view ──\n    const itemRef = React.useRef<HTMLDivElement>(null)\n    React.useImperativeHandle(ref, () => itemRef.current!)\n\n    React.useEffect(() => {\n      if (isFocused && itemRef.current) {\n        itemRef.current.scrollIntoView({ block: 'nearest' })\n      }\n    }, [isFocused])\n\n    // ── Handlers ──\n    const handleRowClick = React.useCallback(\n      (e: React.MouseEvent) => {\n        if (disabled) return\n        e.stopPropagation()\n        setFocusedId(id)\n        select(id)\n        if (expandOnSelect && hasChildren) {\n          toggleExpand(id)\n        }\n      },\n      [id, disabled, select, setFocusedId, expandOnSelect, hasChildren, toggleExpand]\n    )\n\n    const handleChevronClick = React.useCallback(\n      (e: React.MouseEvent) => {\n        e.stopPropagation()\n        if (disabled) return\n        toggleExpand(id)\n      },\n      [id, disabled, toggleExpand]\n    )\n\n    // ── Chevron(永遠存在:expandable = 旋轉箭頭;leaf = placeholder 佔位) ──\n    // 消費 `<ItemPrefix>` SSOT — 永遠 h-[1lh] 對齊 label 第一行中線(item-anatomy 對應)。\n    // forced width 透過 style 鎖 chevron 槽寬,讓 sibling label 起點水平對齊(無 chevron leaf 佔位同寬)。\n    const chevronSlot = (\n      <ItemPrefix style={{ width: iconPx }}>\n        {hasChildren ? (\n          <button\n            type=\"button\"\n            tabIndex={-1}\n            onClick={handleChevronClick}\n            className={cn(\n              'flex items-center justify-center rounded-md',\n              'text-fg-muted hover:text-foreground hover:bg-neutral-hover',\n              'transition-all duration-150',\n              isExpanded && 'rotate-90',\n              disabled && 'text-fg-disabled pointer-events-none',\n            )}\n            style={{ width: iconPx, height: iconPx }}\n            aria-hidden\n          >\n            <ChevronRight size={iconPx} />\n          </button>\n        ) : (\n          // Leaf placeholder\n          <span style={{ width: iconPx }} aria-hidden />\n        )}\n      </ItemPrefix>\n    )\n\n    return (\n      <ParentIdContext.Provider value={id}>\n        <div\n          ref={(node) => {\n            (itemRef as React.MutableRefObject<HTMLDivElement | null>).current = node\n            if (typeof ref === 'function') ref(node)\n            else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n          }}\n          // DOM id 供容器 aria-activedescendant 指向(virtual focus);與 data-tree-id 並存\n          // (data-tree-id 給內部 querySelector / drag,id 給 AT)。\n          id={`${activeDescendantPrefix}treeitem-${id}`}\n          role=\"treeitem\"\n          aria-expanded={hasChildren ? isExpanded : undefined}\n          aria-selected={selectionMode !== 'none' ? isSelected : undefined}\n          aria-level={depth + 1}\n          aria-disabled={disabled || undefined}\n          data-tree-id={id}\n          data-tree-parent-id={parentId ?? ''}\n          data-tree-has-children={hasChildren}\n          tabIndex={-1}\n          className={cn('w-full min-w-0 relative', isDragging && dragSourceClass)}\n        >\n          {/* Drop indicator — before:水平 2px primary line(指 SSOT drag-visual.ts);\n              indent 跟隨 depth(left 由 inline style override class 的 left-0)*/}\n          {isDropTarget && dropTarget?.position === 'before' && (\n            <div\n              className={dropIndicatorRow.before}\n              style={{ left: `calc(var(--tree-px) + ${indentPx}px)` }}\n            />\n          )}\n\n          {/* Row: draggable + droppable 都在這一行(合併 ref),確保碰撞偵測只看行高 */}\n          <div\n            ref={(node) => {\n              // 合併 drag + drop ref 到同一個 element\n              if (draggable) setDragRef(node)\n              setDropRef(node)\n            }}\n            data-tree-row={id}\n            className={cn(\n              'group/tree-item',\n              treeItemVariants({ size }),\n              // 2026-05-26 SSOT lock(user explicit「multi 已有 checkbox 強信號,text 不該再變色」):\n              // ── Single mode ──\n              //   - default text 預設 fg-secondary muted(hierarchy navigation 慣例,跟 Sidebar 一致)\n              //   - selected → text-foreground emphasis + bg-neutral-selected(無 checkbox,需 text+bg 雙信號)\n              // ── Multi mode ──\n              //   - default text 維持 fg-secondary muted(跟 single 對齊 hierarchy)\n              //   - selected → 視覺信號只在 checkbox(auto-render below),text 不變、bg 不變\n              //   - 對齊 SelectMenu multi pattern(menu-item.tsx:194-195 selected → bg only;multi → checkbox only)\n              !disabled && !isSelected && 'text-fg-secondary',\n              !disabled && isSelected && selectionMode === 'single' && 'text-foreground',\n              isDropTarget && dropTarget?.position === 'inside' && dropIndicatorInside,\n              !disabled && 'hover:bg-neutral-hover hover:text-foreground',\n              !disabled && isSelected && selectionMode === 'single' && 'bg-neutral-selected',\n              showRing && 'ring-2 ring-ring ring-inset',\n              disabled && 'pointer-events-none text-fg-disabled cursor-default',\n              className,\n            )}\n            style={{\n              paddingLeft: indentPx > 0\n                ? `calc(var(--tree-px) + ${indentPx}px)`\n                : 'var(--tree-px)',\n              paddingRight: 'var(--tree-px)',\n            }}\n            onClick={handleRowClick}\n            {...(draggable ? { ...dragListeners, ...dragAttrs } : {})}\n            {...props}\n          >\n            {chevronSlot}\n\n            {/* Checkbox 在 icon 前——消費 `<ItemPrefix>` 對齊第一行\n              * 2026-05-26 SSOT lock(user explicit「多選的方式應該也是要跟 menu 一樣是出現 checkbox」):\n              *   - selectionMode='multiple' + 無 consumer checkbox prop → auto-render `<Checkbox>` reflect selectedIds\n              *     (對齊 SelectMenu multi pattern;consumer 不用手寫 checkbox)\n              *   - selectionMode='multiple' + consumer 傳 checkbox → 用 consumer 的(parent-child cascade 等 advanced)\n              *   - selectionMode='single' / 'none' → 不 render checkbox(text-foreground + bg 雙信號表 selected)\n              * 對齊 cite:menu-item.tsx:194-195(MenuItem selected bg)+ select-menu.tsx:352-354(SelectMenu multi=checkbox) */}\n            {(checkbox || selectionMode === 'multiple') && (\n              <ItemPrefix className=\"pointer-events-none\">\n                {checkbox || <Checkbox checked={isSelected} disabled={disabled} aria-hidden=\"true\" />}\n              </ItemPrefix>\n            )}\n\n            {/* indicator 取代 icon 的位置;h-[1lh] 對齊第一行\n                indicator 是 escape hatch(stepper status dot 等客製內容),消費 `<ItemPrefix>` 鎖 chevron 槽寬;\n                Icon 走 canonical `<ItemIcon>` helper——自動標 data-prefix-type=\"icon\",\n                讓 SidebarProvider 的全域 :has() prefix-mix 偵測能命中。 */}\n            {indicator ? (\n              <ItemPrefix style={{ width: iconPx }}>\n                {indicator}\n              </ItemPrefix>\n            ) : Icon ? (\n              <ItemIcon icon={Icon} className={disabled ? 'text-fg-disabled' : undefined} />\n            ) : null}\n\n            <span className={cn('flex-1 min-w-0 truncate', disabled && 'text-fg-disabled')}>\n              {label}\n            </span>\n\n            {/* Suffix inline actions——宣告式 API,用 `<ItemInlineAction>` 渲染。\n                消費 `<ItemSuffix hoverReveal hoverGroup=\"tree-item\">` SSOT(2026-05-05 v8 group selector 參數化後)。\n                actionsReveal=\"hover\"(預設):row hover 或 keyboard focus-visible 才顯示;\n                actionsReveal=false:常駐顯示。跟 SidebarMenuButton 共用同一條規則,行為一致。\n                inlineActionsSlot escape hatch 優先(consumer 自控 JSX,reveal 一樣套外層 group)。 */}\n            {/* 2026-06-12 R2(同 sidebar.tsx 修):宿主 disabled 時 render 層擋 inline actions —\n                inline-action.spec.md「宿主 disabled | 不渲染」;row pointer-events 蓋不住\n                actionsReveal=false 常駐顯示的視覺暗示,必須 render 層 guard。 */}\n            {disabled ? null : inlineActionsSlot ? (\n              <ItemSuffix hoverReveal={actionsReveal === 'hover'} hoverGroup=\"tree-item\">\n                {inlineActionsSlot}\n              </ItemSuffix>\n            ) : inlineActions && inlineActions.length > 0 ? (\n              <ItemSuffix hoverReveal={actionsReveal === 'hover'} hoverGroup=\"tree-item\">\n                {inlineActions.map((action, i) => (\n                  <ItemInlineAction key={action.label + i} action={action} />\n                ))}\n              </ItemSuffix>\n            ) : null}\n          </div>\n\n          {/* Drop indicator — after:同 before mirror 到 bottom edge(SSOT drag-visual.ts)*/}\n          {isDropTarget && dropTarget?.position === 'after' && (\n            <div\n              className={dropIndicatorRow.after}\n              style={{ left: `calc(var(--tree-px) + ${indentPx}px)` }}\n            />\n          )}\n\n          {/* Children: Collapsible 展開/收合 */}\n          {hasChildren && (\n            <CollapsiblePrimitive.Root open={isExpanded}>\n              <CollapsiblePrimitive.Content\n                className=\"overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\"\n              >\n                <DepthContext.Provider value={depth + 1}>\n                  <div role=\"group\" className=\"flex flex-col w-full\">\n                    {children}\n                  </div>\n                </DepthContext.Provider>\n              </CollapsiblePrimitive.Content>\n            </CollapsiblePrimitive.Root>\n          )}\n        </div>\n      </ParentIdContext.Provider>\n    )\n  }\n)\nTreeItem.displayName = 'TreeItem'\n\n// Parent ID context for keyboard navigation (← to parent)\nconst ParentIdContext = React.createContext<string | null>(null)\n\n// ═══════════════════════════════════════════════════════════════════════════\n// Exports\n// ═══════════════════════════════════════════════════════════════════════════\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 treeViewMeta = {\n  component: 'TreeView',\n  family: 1, // Family 1(Menu item layout)消費者 — 對齊 tree-view.spec.md frontmatter family: 1\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-neutral-hover', 'bg-neutral-selected', 'bg-surface'],\n    fg: ['text-fg-disabled', 'text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n    ring: ['ring-ring'],\n  },\n  defaultSize: 'md',\n} as const\n\nexport { TreeView, TreeItem, treeItemVariants }\n"],"names":["treeEl"],"mappings":"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"}

package/llms-full.txt

@@ -1,6 +1,6 @@
 # @qijenchen/design-system — 完整設計參考(llms-full)
 
-> 全 component / pattern 的 variants / sizes / 禁止事項。build-time 從 spec.md frontmatter 生成,禁手改。v0.1.0-beta.76。
+> 全 component / pattern 的 variants / sizes / 禁止事項。build-time 從 spec.md frontmatter 生成,禁手改。v0.1.0-beta.77。
 
 # Components
 

package/llms.txt

@@ -1,7 +1,7 @@
 # @qijenchen/design-system
 
 > World-class React design system(Radix/shadcn + Tailwind v4 + 自訂 design token)。
-> 54 components + 4 public patterns + design tokens。v0.1.0-beta.76。
+> 54 components + 4 public patterns + design tokens。v0.1.0-beta.77。
 
 本檔由 source(spec.md frontmatter + Storybook index)build-time 自動生成,**禁手改**(CI --check drift gate 守)。
 每元件 / pattern 的完整 variants / sizes / 禁止事項 全文見 [llms-full.txt](./llms-full.txt)。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qijenchen/design-system",
-  "version": "0.1.0-beta.76",
+  "version": "0.1.0-beta.77",
   "private": false,
   "description": "World-class design system — components, patterns, tokens, hooks (single source of truth for team distribution).",
   "type": "module",

package/src/components/Avatar/avatar.tsx

@@ -123,6 +123,11 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
    * `> 99` 自動顯示 "99+"(交給內部 Badge 的 `max` 行為)。
    */
   badgeCount?: number
+  /**
+   * badgeCount overlay 的 aria-label override(i18n)。預設英文 `${badgeCount} unread`;
+   * consumer 傳此 prop 本地化(對齊 `Notice` dismissAriaLabel pattern,a11y/i18n)。
+   */
+  badgeAriaLabel?: string
   /**
    * 傳入 HoverCard 內容（如 ProfileCard），hover avatar 時自動顯示。
    * 只有人員 avatar 需要傳；實體 avatar（專案、組織）不傳。
@@ -138,7 +143,7 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
 // (filter Avatar/PeoplePicker/FieldSurfaceProvider remounts)。
 // code-quality-allow: long-function — size × shape × color × solid × status × badgeCount × hoverCard × img-fallback 多軸 prop 組合,拆 sub-fn 會跨 fn 傳 imgError state + isTableScrolling observer 結果
 const AvatarInner = React.forwardRef<HTMLDivElement, AvatarProps>(
-  ({ size = 32, shape = 'circle', src, alt, icon: Icon, color = 'neutral', solid = false, status, badgeCount, hoverCard, className, style, ...props }, ref) => {
+  ({ size = 32, shape = 'circle', src, alt, icon: Icon, color = 'neutral', solid = false, status, badgeCount, badgeAriaLabel, hoverCard, className, style, ...props }, ref) => {
     const [imgError, setImgError] = React.useState(false)
     const documentTheme = useDocumentTheme()
     const isTableScrolling = useTableIsScrolling()
@@ -277,7 +282,7 @@ const AvatarInner = React.forwardRef<HTMLDivElement, AvatarProps>(
               style={{
                 boxShadow: `0 0 0 2px var(--surface-raised, var(--canvas))`,
               }}
-              aria-label={`${badgeCount} unread`} // i18n-allow: DS default(未覆寫英文 'N unread')
+              aria-label={badgeAriaLabel ?? `${badgeCount} unread`} // i18n-allow: DS default 英文(consumer 可傳 badgeAriaLabel i18n)
             />
           )}
         </div>

package/src/components/Command/command.tsx

@@ -48,7 +48,7 @@ const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+  <div className="flex items-center border-b border-divider px-3" cmdk-input-wrapper="">
     <Search className="mr-2 h-4 w-4 shrink-0 text-fg-muted" />
     <CommandPrimitive.Input
       ref={ref}

package/src/components/RadioGroup/radio-group.tsx

@@ -299,9 +299,12 @@ export const radioGroupMeta = {
 
   },
   sizes: {
-    sm: { fieldHeight: 28, iconSize: 16, typography: 'body' },
-    md: { fieldHeight: 32, iconSize: 16, typography: 'body' },
-    lg: { fieldHeight: 36, iconSize: 20, typography: 'body-lg' },
+    // iconSize = 渲染指示器尺寸(對齊 checkbox/switch meta 慣例:checkbox iconSize=真 Check glyph 12/12/16)。
+    // Radio 指示器是 filled dot 非 glyph,真值 = dotSize 8/8/10(radio-group.tsx:179);
+    // 控件框 16/16/20 與 Checkbox 對齊但那是 box 非「指示器」,不入此鍵(避免 metadata 語意 drift)。
+    sm: { fieldHeight: 28, iconSize: 8, typography: 'body' },
+    md: { fieldHeight: 32, iconSize: 8, typography: 'body' },
+    lg: { fieldHeight: 36, iconSize: 10, typography: 'body-lg' },
   },
   states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],
   tokens: {

package/src/components/Sheet/sheet.tsx

@@ -186,7 +186,7 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Title
     ref={ref}
-    className={cn("text-body-lg font-medium truncate text-foreground", className)}
+    className={cn("text-body-lg font-medium truncate", className)}
     {...props}
   />
 ))

package/src/components/Tag/tag.tsx

@@ -68,6 +68,8 @@ export interface TagProps
   avatar?: React.ReactNode
   /** 可移除——Tag 自動渲染 remove 按鈕並控制尺寸與互動樣式(從集合移除 item) */
   onRemove?: () => void
+  /** remove 按鈕的 aria-label 目標名(a11y)。children 為非字串 ReactNode 時建議傳,否則 SR 讀不出移除哪個 tag。預設取 string children。 */
+  dismissLabel?: string
   /** 深底模式（step-6 背景 + on-emphasis 配對前景;亮色 hue yellow/amber/orange/lime 用深字 --on-emphasis-dark,green 白字例外） */
   solid?: boolean
   /**
@@ -107,7 +109,7 @@ function TagDismiss({ onRemove, label, solid, color }: { onRemove: () => void; l
       icon={X}
       size="md"
       onClick={(e) => { e.stopPropagation(); onRemove() }}
-      aria-label={`移除 ${label}`}
+      aria-label={label ? `移除 ${label}` : '移除'}
       style={solidColors ? ({ '--dismiss-hover': solidColors.hover, '--dismiss-active': solidColors.active } as React.CSSProperties) : undefined}
       hoverBgClassName={
         solidColors
@@ -121,7 +123,7 @@ function TagDismiss({ onRemove, label, solid, color }: { onRemove: () => void; l
 }
 
 function TagInner(
-  { className, color, size, icon: Icon, avatar, onRemove, solid, unbounded = false, children, style, ...props }: TagProps,
+  { className, color, size, icon: Icon, avatar, onRemove, dismissLabel, solid, unbounded = false, children, style, ...props }: TagProps,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const solidClass = solid ? SOLID_CLASSES[color ?? 'neutral'] : undefined
@@ -178,7 +180,7 @@ function TagInner(
       {Icon && <Icon size={16} aria-hidden />}
       {avatar && <span className="shrink-0 w-4 h-4 rounded-full overflow-hidden inline-grid place-content-center [&>*]:w-full [&>*]:h-full">{avatar}</span>}
       <span data-tag-text="" className="px-1 truncate min-w-0">{children}</span>
-      {onRemove && <TagDismiss onRemove={onRemove} label={label} solid={solid} color={color ?? 'neutral'} />}
+      {onRemove && <TagDismiss onRemove={onRemove} label={dismissLabel || label} solid={solid} color={color ?? 'neutral'} />}
     </div>
   )
 

package/src/components/TimePicker/time-columns.tsx

@@ -106,6 +106,11 @@ function TimeColumn({ values, selected, disabledSet, label, onSelect, withDivide
     isFirstRunRef.current = false
   }, [values, selected])
 
+  // a11y:穩定 id 前綴,讓 listbox `aria-activedescendant` 指向目前 active(= selected)option。
+  // single-tabstop + 方向鍵 listbox 應透過 activedescendant 告知 AT 哪個 option active,
+  // 否則 SR 方向鍵移動時讀不出目前 option(WAI-ARIA listbox virtual-focus 慣例)。
+  const baseId = React.useId()
+
   // WAI-ARIA listbox keyboard pattern:ArrowUp/Down 切 option / Home / End 跳邊界。
   // 對標 Ant TimePicker / Material TimePicker。Tab 跳離 listbox(走預設行為,不 stopPropagation)。
   const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
@@ -147,6 +152,7 @@ function TimeColumn({ values, selected, disabledSet, label, onSelect, withDivide
         ref={listRef}
         role="listbox"
         aria-label={label}
+        aria-activedescendant={selected != null ? `${baseId}-opt-${selected}` : undefined}
         tabIndex={0}
         onKeyDown={handleKeyDown}
         className="flex flex-col py-2 focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-[-2px]"
@@ -157,6 +163,7 @@ function TimeColumn({ values, selected, disabledSet, label, onSelect, withDivide
           return (
             <button
               key={v}
+              id={`${baseId}-opt-${v}`}
               type="button"
               role="option"
               aria-selected={isSelected}