npm - @qijenchen/design-system - Versions diffs - 0.1.0-beta.13 → 0.1.0-beta.131 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1751) hide show

package/dist/patterns/element-anatomy/truncated-text.js ADDED Viewed

@@ -0,0 +1,16 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { Tooltip, TooltipTrigger, TooltipContent } from "../../components/Tooltip/tooltip.js";
+import { useTruncated } from "../../hooks/use-truncated.js";
+function TruncatedText({ children, className, tooltip, display = "inline" }) {
+  const { ref, isTruncated } = useTruncated();
+  return /* @__PURE__ */ jsxs(Tooltip, { open: isTruncated ? void 0 : false, children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { ref, className: cn("truncate min-w-0", display === "block" && "block", className), children }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: tooltip ?? children })
+  ] });
+}
+TruncatedText.displayName = "TruncatedText";
+export {
+  TruncatedText
+};
+//# sourceMappingURL=truncated-text.js.map

package/dist/patterns/element-anatomy/truncated-text.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"truncated-text.js","sources":["../../../src/patterns/element-anatomy/truncated-text.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { Tooltip, TooltipTrigger, TooltipContent } from '@/design-system/components/Tooltip/tooltip'\nimport { useTruncated } from '@/design-system/hooks/use-truncated'\n\n// ── 消費的 SSOT ──\n// - hooks/use-truncated（useTruncated）：截斷偵測引擎 + isTruncated 狀態（本 primitive 的量測核心）\n// - components/Tooltip（Tooltip/TooltipTrigger/TooltipContent）：截斷才顯示完整文字的補救 overlay\n// - lib/utils（cn）：className 合併\n// - spec: patterns/element-anatomy/truncated-text.spec.md（本 primitive「何時用/為什麼」）\n// - governing: components/Tooltip/tooltip.principles.stories.tsx「沒被截斷就不該顯示 tooltip」→ 由 open 控制機械保證\n\n// ── TruncatedText — 單行截斷 + 截斷才顯示 tooltip 的組合式 primitive ──────────────\n// 消費 `useTruncated`(量測引擎 SSOT)+ 封裝「永遠 wrap Tooltip、以 `open` 控制可見」的正解結構。\n// 收斂 Breadcrumb `TruncatedLabel` 與 DataTable `TruncateCell` 兩處同構的 truncate-span+tooltip presentation。\n// Tag 因 trigger≠量測元素(整個 tag root vs 內層 text span)+ Canvas measure + 自訂 a11y,正當地\n// 只消費 `useTruncated` hook、不走本 component(見 tag.tsx)。\n//\n// 「永遠 wrap + `open={isTruncated?undefined:false}`」而非「未截斷回裸 span、截斷才 wrap」:\n// 後者切換 JSX 樹會讓 span unmount/remount → ref 換到新 DOM、useEffect[] 不重跑 → 觀察的 DOM 與\n// 實際 DOM 對不上(Breadcrumb 2026-05-11 抓的 bug)。always-wrap 保 DOM 節點生命週期穩定;\n// `open={false}` 時 TooltipTrigger asChild 只把 handler/data-state 合併到同一 span(無多餘 DOM、\n// tooltip 靜默),與裸 span 視覺行為等價。\n\n/** @internal 隨 `TruncatedText`(DS-internal 組合 primitive)一併不進 root barrel front-door;subpath 仍可取。 */\nexport interface TruncatedTextProps {\n children: React.ReactNode\n /** 附加到截斷 span 的 className(如 DataTable 的 text-align)。 */\n className?: string\n /**\n * Tooltip 顯示內容,預設 = `children`。當 `children` 為非字串 ReactNode(icon+text 等)、\n * 但已知完整文字時傳入(Breadcrumb 的 `fullText`)。\n */\n tooltip?: React.ReactNode\n /**\n * span 的 display:`'inline'`(預設,保 baseline/垂直對齊,DataTable cell 用)/ `'block'`(Breadcrumb 用)。\n * ⚠️ DataTable 刻意用 inline —— `block` 會改 baseline 使 Field/inline-flex cell 垂直對齊 collapse。\n */\n display?: 'block' | 'inline'\n}\n\n/**\n * @internal DS-internal 組合 primitive:由 Breadcrumb / DataTable 內部消費以統一 truncate-tooltip 呈現。\n * end-user app 若需「單行截斷 + tooltip」直接消費 public `useTruncated` hook 自組(trigger/a11y 自控),\n * 或經 per-component subpath 取用本 component。不進 root barrel front-door。\n */\nexport function TruncatedText({ children, className, tooltip, display = 'inline' }: TruncatedTextProps) {\n const { ref, isTruncated } = useTruncated<HTMLSpanElement>()\n return (\n <Tooltip open={isTruncated ? undefined : false}>\n <TooltipTrigger asChild>\n <span ref={ref} className={cn('truncate min-w-0', display === 'block' && 'block', className)}>\n {children}\n </span>\n </TooltipTrigger>\n <TooltipContent>{tooltip ?? children}</TooltipContent>\n </Tooltip>\n )\n}\nTruncatedText.displayName = 'TruncatedText'\n"],"names":[],"mappings":";;;;AA+CO,SAAS,cAAc,EAAE,UAAU,WAAW,SAAS,UAAU,YAAgC;AACtG,QAAM,EAAE,KAAK,YAAA,IAAgB,aAAA;AAC7B,SACE,qBAAC,SAAA,EAAQ,MAAM,cAAc,SAAY,OACvC,UAAA;AAAA,IAAA,oBAAC,gBAAA,EAAe,SAAO,MACrB,UAAA,oBAAC,UAAK,KAAU,WAAW,GAAG,oBAAoB,YAAY,WAAW,SAAS,SAAS,GACxF,UACH,GACF;AAAA,IACA,oBAAC,gBAAA,EAAgB,UAAA,WAAW,SAAA,CAAS;AAAA,EAAA,GACvC;AAEJ;AACA,cAAc,cAAc;"}

package/dist/patterns/header-canonical/chrome-header.d.ts CHANGED Viewed

@@ -1,7 +1,21 @@
 import * as React from 'react';
 /**
- * @internal — DS-internal primitive(2026-05-23 per `.claude/rules/ui-development.md` Public vs Internal canonical)。
- * end-user app 直接 render `<ChromeHeader />` 無 functioning UI;由 Sidebar / FileViewer / Dialog / Sheet / Popover 等 DS 元件 wrap 消費。
+ * Header 家族 tabsSlot wrapper className(W2 SSOT,header-canonical.spec.md Rule W2)。
+ * 兩家族(ChromeHeader chrome / SurfaceHeader overlay)的 column-mode tabsSlot row 共用此契約:
+ * 對 `[data-slot=tabs-list]`(tabs.tsx 三種 overflow 模式的 role=tablist 元素皆自標,對齊
+ * shadcn v4 data-slot idiom)注入內 `px-loose` inset triggers(對齊 header content = W2)。
+ * 寬度不在此注入 — TabsList 各模式自帶(none `w-full` border-b 延展全寬 = W1 一條線;
+ * scroll/menu `min-w-full` 讓 border 隨溢出內容成長,blanket `w-full` 會把 border 截在可視寬)。
+ * v4(2026-07-30 regression fix):beta.86 inlineAction overlay(fc2a3a5c)包 `<div class="relative">`
+ * 後,原 `[&>[role=tablist]]` direct-child 結構選擇器全滅(px-loose 靜默消失,且 scroll/menu 深度
+ * 本就 >1 從未命中)→ 改 data-slot attribute contract + descendant selector,免疫 DOM 深度重構。
+ * SSOT 在此(header-canonical = 跨家族 W-rule owner);overlay-surface.tsx SurfaceHeader 消費同一 const,
+ * 禁各自 hardcode(原兩處逐字重複,2026-06-08 收斂為單一 SSOT,per user「照你建議做到完美…不改A壞B」)。
+ */
+export declare const HEADER_TABS_SLOT_WRAPPER_CLASS = "[&_[data-slot=tabs-list]]:px-[var(--layout-space-loose)]";
+/**
+ * Public chrome-header composition primitive(header-canonical Pattern 的 runtime 件,對標 item-anatomy 的 MenuItem/slots:屬公開 Pattern 的可 import primitive)。
+ * 標準頁面 chrome 用成品元件(AppShell / Sidebar / FileViewer 內建 header);自建客製 header 才直接消費本 primitive,並 follow header-canonical.spec.md 設計契約。
  *
  * ChromeHeader — Fixed-height chrome header primitive(Layout Family B,header-canonical.spec.md)
  *
@@ -42,8 +56,10 @@ export interface ChromeHeaderProps extends React.HTMLAttributes<HTMLElement> {
      * Tabs row slot(2026-05-18 加 per W2/W4 真實能用 + user-mandated fix)。
      * 提供時 ChromeHeader 自動 column 結構:
      *   row 1 = children(h-chrome-header-height 固定,px-loose,跟 single-row 模式同)
-     *   row 2 = tabsSlot 包在 `<div px-loose border-b border-divider>`
-     *           ↑ wrapper 提供 W2 padding inheritance + W1 全寬 paint(一條線)
+     *   row 2 = tabsSlot 包在 `HEADER_TABS_SLOT_WRAPPER_CLASS` wrapper
+     *           (`[&_[data-slot=tabs-list]]` 注入 TabsList 內 px-loose;寬度 TabsList 各
+     *           overflow 模式自帶 w-full / min-w-full;wrapper 本身無 padding 無 border——
+     *           border 由 TabsList 自畫,W1 全寬 paint 一條線)
      *
      * Consumer 傳:`tabsSlot={<TabsList>...</TabsList>}`,TabsContent 放 ChromeHeader 之外。
      * Standalone Tabs(無 chrome header)該直接用 `<TabsList>` 不需 wrapper。

package/dist/patterns/header-canonical/chrome-header.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chrome-header.d.ts","sourceRoot":"","sources":["../../../src/patterns/header-canonical/chrome-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB~~;;;;;;;;;;;OAWG~~;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IAC9B;;;;;;;;;;;;;;;OAeG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC9B;AAED,eAAO,MAAM,YAAY,~~uFA2FxB~~,CAAA"}
1	+ {"version":3,"file":"chrome-header.d.ts","sourceRoot":"","sources":["../../../src/patterns/header-canonical/chrome-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,8BAA8B,6DACiB,CAAA;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;;;;;OAaG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IAC9B;;;;;;;;;;;;;;;OAeG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC9B;AAED,eAAO,MAAM,YAAY,uFA6FxB,CAAA"}

package/dist/patterns/header-canonical/chrome-header.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
+const HEADER_TABS_SLOT_WRAPPER_CLASS = "[&_[data-slot=tabs-list]]:px-[var(--layout-space-loose)]";
 const ChromeHeader = React.forwardRef(
   ({ className, withTabs, tabsSlot, lockDensity = "inherit", leadingRail, children, ...props }, ref) => {
     const hasTabs = tabsSlot != null || withTabs === true;
@@ -24,7 +25,7 @@ const ChromeHeader = React.forwardRef(
                 children
               }
             ),
-            /* @__PURE__ */ jsx("div", { className: "[&>[role=tablist]]:w-full [&>[role=tablist]]:px-[var(--layout-space-loose)]", children: tabsSlot })
+            /* @__PURE__ */ jsx("div", { className: HEADER_TABS_SLOT_WRAPPER_CLASS, children: tabsSlot })
           ]
         }
       );
@@ -70,6 +71,7 @@ const ChromeHeader = React.forwardRef(
 );
 ChromeHeader.displayName = "ChromeHeader";
 export {
-  ChromeHeader
+  ChromeHeader,
+  HEADER_TABS_SLOT_WRAPPER_CLASS
 };
 //# sourceMappingURL=chrome-header.js.map

package/dist/patterns/header-canonical/chrome-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chrome-header.js","sources":["../../../src/patterns/header-canonical/chrome-header.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\n/*\n @internal — DS-internal primitive(2026-05-23 per `.claude/rules/ui-development.md` Public vs Internal canonical)。\n * end-user app 直接 render `<ChromeHeader />` 無 functioning UI;由 Sidebar / FileViewer / Dialog / Sheet / Popover 等 DS 元件 wrap 消費。\n \n ChromeHeader — Fixed-height chrome header primitive(Layout Family B,header-canonical.spec.md)\n \n ── 定位 ──\n * Page chrome 級 header 共用 primitive。封裝重複 contract:\n * flex items-center gap-2 shrink-0 h-[var(--chrome-header-height)] border-b border-divider px-[var(--layout-space-loose)]\n \n Consumers:Sidebar / FileViewer Toolbar / FileViewer InfoPanel / 未來 page top bar / Drawer\n * 跟 SurfaceHeader(overlay padding-based)是兩個並存家族(per header-canonical.spec.md L23-30)。\n \n ── 實作基礎 ──\n * 消費:--chrome-header-height(48/56 density-responsive)/ --layout-space-loose / border-divider\n * 對應 pattern:patterns/header-canonical\n \n ── 消費的 SSOT ──\n * - tokens: [--chrome-header-height, --layout-space-loose, --divider]\n * - patterns: [header-canonical(本 pattern), overlay-surface(姊妹 SurfaceHeader)]\n * - spec refs: patterns/header-canonical/header-canonical.spec.md(L23-30 家族區分 / W1 border / W3 tabs size / Layer 3 ChromeHeader API)\n \n ── API(per M31 codex 比稿 Step 5 — narrow API,避免 M21 prop variant 風險)──\n * withTabs?: boolean(預設 false)\n * true → 移除自身 border-b,delegate paint 給 TabsList(per W1「Header semantic owner / TabsList paint owner in withTabs state」)\n * lockDensity?: 'inherit' \| 'lg'(預設 'inherit')\n * 'inherit' → 跟 page density(html[data-density] 自動)\n * 'lg' → 強制 lg(viewer-fullscreen-chrome escape hatch,FileViewer 永遠 lg-equivalent design intent)\n \n 不開:density?: 'md' \| 'lg' 自由 prop。M21 違反 — 任意 density 等於 cva-on-pattern。\n /\nexport interface ChromeHeaderProps\n extends React.HTMLAttributes<HTMLElement> {\n /\n 是否內含 Tabs。\n * true(無 tabsSlot)→ 移除自身 border-b,consumer 自畫。\n * 若提供 tabsSlot,自動 column mode + auto suppress border。\n * 對應 patterns/header-canonical/header-canonical.spec.md W1\n /\n withTabs?: boolean\n /\n Tabs row slot(2026-05-18 加 per W2/W4 真實能用 + user-mandated fix)。\n * 提供時 ChromeHeader 自動 column 結構:\n * row 1 = children(h-chrome-header-height 固定,px-loose,跟 single-row 模式同)\n * row 2 = tabsSlot 包在 `<div px-loose border-b border-divider>`\n * ↑ wrapper 提供 W2 padding inheritance + W1 全寬 paint(一條線)\n \n Consumer 傳:`tabsSlot={<TabsList>...</TabsList>}`,TabsContent 放 ChromeHeader 之外。\n * Standalone Tabs(無 chrome header)該直接用 `<TabsList>` 不需 wrapper。\n \n 提供 tabsSlot 自動 withTabs=true,不需另傳 prop。\n /\n tabsSlot?: React.ReactNode\n /\n 是否鎖死 lg density(viewer-fullscreen chrome 用)。\n * 'inherit'(預設)→ 跟 page density\n * 'lg' → 強制 chrome-header-height lg(56)\n * 對應 patterns/header-canonical/header-canonical.spec.md Layer 3 API\n /\n lockDensity?: 'inherit' \| 'lg'\n /\n Leading rail slot(2026-05-21 ship per AppShell primary-header globalHeader 用例,\n * codex M31 Layer C 建議 codify into ChromeHeader API):\n * 固定寬度 = `var(--sidebar-width-icon)` 的左邊容器,內 `justify-center` 排列。\n \n 用途:primary-header globalHeader 左側 SidebarTrigger,跟 sidebar 收合 icon 完美水平對齊\n * (sidebar 收合 width = sidebar-width-icon,toggle container 同寬 = toggle center x = sidebar\n * collapsed icon center x = perfect alignment)。\n \n 對齊 GitHub global nav 左側固定寬度 logo 區 / Slack thin workspace rail 慣例。\n * 提供時自動結構:\n * row1: [leadingRail (width=sidebar-width-icon)] [children (px-loose flex-1)]\n * 不提供時 fallback 預設 single-row(全 px-loose)。\n \n 與 tabsSlot 互斥(tabsSlot 啟動 column mode,本 prop 不生效)。\n /\n leadingRail?: React.ReactNode\n}\n\nexport const ChromeHeader = React.forwardRef<HTMLElement, ChromeHeaderProps>(\n (\n { className, withTabs, tabsSlot, lockDensity = 'inherit', leadingRail, children, ...props },\n ref,\n ) => {\n const hasTabs = tabsSlot != null \|\| withTabs === true\n\n // Column mode(tabsSlot 提供時)— per W2 + W4\n // 2026-05-20:`<div>` → `<header>`(HTML5 sectional content 允許 multiple `<header>`,\n // page-level / sectional 都 a11y safe;統一 element contract 消除「何時用 header / 何時用 div」\n // 的 consumer drift)。對應 header-canonical.spec.md 「Element canonical」段。\n if (tabsSlot != null) {\n return (\n <header\n ref={ref}\n data-density={lockDensity === 'lg' ? 'lg' : undefined}\n className={cn('flex flex-col shrink-0', className)}\n {...props}\n >\n {/ Row 1:header content(固定高度,跟 single-row 模式同 visual)/}\n <div\n className={cn(\n 'flex items-center gap-2',\n 'h-[var(--chrome-header-height)]',\n 'px-[var(--layout-space-loose)]',\n )}\n >\n {children}\n </div>\n {/ Row 2:tabsSlot wrapper — TabsList 全 dialog 寬 + 內 px-loose inset triggers\n 2026-05-18 v3 fix(同 SurfaceHeader,per user verbatim「分隔線寬度應該要填滿整個\n dialog」+「就這樣做」approval):TabsList 自己 px-loose 內 padding 而非 wrapper\n 提供,讓 TabsList border-b 延展全 dialog 寬。對齊 `tabs.spec.md:199` 既有 canonical。/}\n <div className=\"[&>[role=tablist]]:w-full [&>[role=tablist]]:px-[var(--layout-space-loose)]\">\n {tabsSlot}\n </div>\n </header>\n )\n }\n\n // Leading rail mode(2026-05-21 ship per AppShell primary-header globalHeader):\n // [leadingRail (width=sidebar-width-icon, justify-center)] [children (flex-1 px-loose)]\n // 整 header 仍 fixed-height chrome-header-height + border-b。Rail 容器無 padding(內元素\n // 透過 sidebar-width-icon 幾何自然居中,跟 sidebar 收合 icon center x 對齊)。\n if (leadingRail != null) {\n return (\n <header\n ref={ref}\n data-density={lockDensity === 'lg' ? 'lg' : undefined}\n className={cn(\n 'flex items-center shrink-0',\n 'h-[var(--chrome-header-height)]',\n !hasTabs && 'border-b border-divider',\n className,\n )}\n {...props}\n >\n {/ Rail:固定寬度 = sidebar-width-icon,內容 justify-center 居中(toggle center x\n = rail 寬度的中點 = sidebar 收合 icon center x = 完美 vertical 對齊)\n 2026-05-21 v2 user 抓:rail 右側加 `border-r border-divider`,sidebar 收合到\n icon mode 時 rail 右 border = sidebar 右 border 連成一線(visual continuity)。 /}\n <div className=\"flex w-[var(--sidebar-width-icon)] shrink-0 items-center justify-center border-r border-divider\">\n {leadingRail}\n </div>\n {/ Main:flex-1 + px-loose(沿用 header 既有左右 padding canonical)+ gap-2 */}\n <div className=\"flex flex-1 items-center gap-2 min-w-0 px-[var(--layout-space-loose)]\">\n {children}\n </div>\n </header>\n )\n }\n\n // Single-row(預設 + withTabs=true 但無 tabsSlot 的 backward compat)\n return (\n <header\n ref={ref}\n data-density={lockDensity === 'lg' ? 'lg' : undefined}\n className={cn(\n 'flex items-center gap-2 shrink-0',\n 'h-[var(--chrome-header-height)]',\n 'px-[var(--layout-space-loose)]',\n // W1:無 tabs 自畫 border;withTabs=true(無 tabsSlot)consumer 自畫\n !hasTabs && 'border-b border-divider',\n className,\n )}\n {...props}\n >\n {children}\n </header>\n )\n },\n)\nChromeHeader.displayName = 'ChromeHeader'\n"],"names":[],"mappings":";;;AAkFO,MAAM,eAAe,MAAM;AAAA,EAChC,CACE,EAAE,WAAW,UAAU,UAAU,cAAc,WAAW,aAAa,UAAU,GAAG,MAAA,GACpF,QACG;AACH,UAAM,UAAU,YAAY,QAAQ,aAAa;AAMjD,QAAI,YAAY,MAAM;AACpB,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,gBAAc,gBAAgB,OAAO,OAAO;AAAA,UAC5C,WAAW,GAAG,0BAA0B,SAAS;AAAA,UAChD,GAAG;AAAA,UAGJ,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA;AAAA,gBAAA;AAAA,gBAGD;AAAA,cAAA;AAAA,YAAA;AAAA,YAMH,oBAAC,OAAA,EAAI,WAAU,+EACZ,UAAA,SAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN;AAMA,QAAI,eAAe,MAAM;AACvB,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,gBAAc,gBAAgB,OAAO,OAAO;AAAA,UAC5C,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA,CAAC,WAAW;AAAA,YACZ;AAAA,UAAA;AAAA,UAED,GAAG;AAAA,UAMJ,UAAA;AAAA,YAAA,oBAAC,OAAA,EAAI,WAAU,mGACZ,UAAA,aACH;AAAA,YAEA,oBAAC,OAAA,EAAI,WAAU,yEACZ,SAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN;AAGA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,gBAAc,gBAAgB,OAAO,OAAO;AAAA,QAC5C,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA;AAAA,UAEA,CAAC,WAAW;AAAA,UACZ;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,aAAa,cAAc;"}
1	+ {"version":3,"file":"chrome-header.js","sources":["../../../src/patterns/header-canonical/chrome-header.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\n/*\n Header 家族 tabsSlot wrapper className(W2 SSOT,header-canonical.spec.md Rule W2)。\n * 兩家族(ChromeHeader chrome / SurfaceHeader overlay)的 column-mode tabsSlot row 共用此契約:\n * 對 `[data-slot=tabs-list]`(tabs.tsx 三種 overflow 模式的 role=tablist 元素皆自標,對齊\n * shadcn v4 data-slot idiom)注入內 `px-loose` inset triggers(對齊 header content = W2)。\n * 寬度不在此注入 — TabsList 各模式自帶(none `w-full` border-b 延展全寬 = W1 一條線;\n * scroll/menu `min-w-full` 讓 border 隨溢出內容成長,blanket `w-full` 會把 border 截在可視寬)。\n * v4(2026-07-30 regression fix):beta.86 inlineAction overlay(fc2a3a5c)包 `<div class=\"relative\">`\n * 後,原 `[&>[role=tablist]]` direct-child 結構選擇器全滅(px-loose 靜默消失,且 scroll/menu 深度\n * 本就 >1 從未命中)→ 改 data-slot attribute contract + descendant selector,免疫 DOM 深度重構。\n * SSOT 在此(header-canonical = 跨家族 W-rule owner);overlay-surface.tsx SurfaceHeader 消費同一 const,\n * 禁各自 hardcode(原兩處逐字重複,2026-06-08 收斂為單一 SSOT,per user「照你建議做到完美…不改A壞B」)。\n /\nexport const HEADER_TABS_SLOT_WRAPPER_CLASS =\n '[&_[data-slot=tabs-list]]:px-[var(--layout-space-loose)]'\n\n/\n Public chrome-header composition primitive(header-canonical Pattern 的 runtime 件,對標 item-anatomy 的 MenuItem/slots:屬公開 Pattern 的可 import primitive)。\n * 標準頁面 chrome 用成品元件(AppShell / Sidebar / FileViewer 內建 header);自建客製 header 才直接消費本 primitive,並 follow header-canonical.spec.md 設計契約。\n \n ChromeHeader — Fixed-height chrome header primitive(Layout Family B,header-canonical.spec.md)\n \n ── 定位 ──\n * Page chrome 級 header 共用 primitive。封裝重複 contract:\n * flex items-center gap-2 shrink-0 h-[var(--chrome-header-height)] border-b border-divider px-[var(--layout-space-loose)]\n \n Consumers:Sidebar / FileViewer Toolbar / FileViewer InfoPanel / 未來 page top bar / Drawer\n * 跟 SurfaceHeader(overlay padding-based)是兩個並存家族(per header-canonical.spec.md L23-30)。\n \n ── 實作基礎 ──\n * 消費:--chrome-header-height(48/56 density-responsive)/ --layout-space-loose / border-divider\n * 對應 pattern:patterns/header-canonical\n \n ── 消費的 SSOT ──\n * - tokens: [--chrome-header-height, --layout-space-loose, --divider]\n * - patterns: [header-canonical(本 pattern), overlay-surface(姊妹 SurfaceHeader)]\n * - spec refs: patterns/header-canonical/header-canonical.spec.md(L23-30 家族區分 / W1 border / W3 tabs size / Layer 3 ChromeHeader API)\n \n ── API(per M31 codex 比稿 Step 5 — narrow API,避免 M21 prop variant 風險)──\n * withTabs?: boolean(預設 false)\n * true → 移除自身 border-b,delegate paint 給 TabsList(per W1「Header semantic owner / TabsList paint owner in withTabs state」)\n * lockDensity?: 'inherit' \| 'lg'(預設 'inherit')\n * 'inherit' → 跟 page density(html[data-density] 自動)\n * 'lg' → 強制 lg(viewer-fullscreen-chrome escape hatch,FileViewer 永遠 lg-equivalent design intent)\n \n 不開:density?: 'md' \| 'lg' 自由 prop。M21 違反 — 任意 density 等於 cva-on-pattern。\n /\nexport interface ChromeHeaderProps\n extends React.HTMLAttributes<HTMLElement> {\n /\n 是否內含 Tabs。\n * true(無 tabsSlot)→ 移除自身 border-b,consumer 自畫。\n * 若提供 tabsSlot,自動 column mode + auto suppress border。\n * 對應 patterns/header-canonical/header-canonical.spec.md W1\n /\n withTabs?: boolean\n /\n Tabs row slot(2026-05-18 加 per W2/W4 真實能用 + user-mandated fix)。\n * 提供時 ChromeHeader 自動 column 結構:\n * row 1 = children(h-chrome-header-height 固定,px-loose,跟 single-row 模式同)\n * row 2 = tabsSlot 包在 `HEADER_TABS_SLOT_WRAPPER_CLASS` wrapper\n * (`[&_[data-slot=tabs-list]]` 注入 TabsList 內 px-loose;寬度 TabsList 各\n * overflow 模式自帶 w-full / min-w-full;wrapper 本身無 padding 無 border——\n * border 由 TabsList 自畫,W1 全寬 paint 一條線)\n \n Consumer 傳:`tabsSlot={<TabsList>...</TabsList>}`,TabsContent 放 ChromeHeader 之外。\n * Standalone Tabs(無 chrome header)該直接用 `<TabsList>` 不需 wrapper。\n \n 提供 tabsSlot 自動 withTabs=true,不需另傳 prop。\n /\n tabsSlot?: React.ReactNode\n /\n 是否鎖死 lg density(viewer-fullscreen chrome 用)。\n * 'inherit'(預設)→ 跟 page density\n * 'lg' → 強制 chrome-header-height lg(56)\n * 對應 patterns/header-canonical/header-canonical.spec.md Layer 3 API\n /\n lockDensity?: 'inherit' \| 'lg'\n /\n Leading rail slot(2026-05-21 ship per AppShell primary-header globalHeader 用例,\n * codex M31 Layer C 建議 codify into ChromeHeader API):\n * 固定寬度 = `var(--sidebar-width-icon)` 的左邊容器,內 `justify-center` 排列。\n \n 用途:primary-header globalHeader 左側 SidebarTrigger,跟 sidebar 收合 icon 完美水平對齊\n * (sidebar 收合 width = sidebar-width-icon,toggle container 同寬 = toggle center x = sidebar\n * collapsed icon center x = perfect alignment)。\n \n 對齊 GitHub global nav 左側固定寬度 logo 區 / Slack thin workspace rail 慣例。\n * 提供時自動結構:\n * row1: [leadingRail (width=sidebar-width-icon)] [children (px-loose flex-1)]\n * 不提供時 fallback 預設 single-row(全 px-loose)。\n \n 與 tabsSlot 互斥(tabsSlot 啟動 column mode,本 prop 不生效)。\n /\n leadingRail?: React.ReactNode\n}\n\nexport const ChromeHeader = React.forwardRef<HTMLElement, ChromeHeaderProps>(\n (\n { className, withTabs, tabsSlot, lockDensity = 'inherit', leadingRail, children, ...props },\n ref,\n ) => {\n const hasTabs = tabsSlot != null \|\| withTabs === true\n\n // Column mode(tabsSlot 提供時)— per W2 + W4\n // 2026-05-20:`<div>` → `<header>`(HTML5 sectional content 允許 multiple `<header>`,\n // page-level / sectional 都 a11y safe;統一 element contract 消除「何時用 header / 何時用 div」\n // 的 consumer drift)。對應 header-canonical.spec.md 「Element canonical」段。\n if (tabsSlot != null) {\n return (\n <header\n ref={ref}\n data-density={lockDensity === 'lg' ? 'lg' : undefined}\n className={cn('flex flex-col shrink-0', className)}\n {...props}\n >\n {/ Row 1:header content(固定高度,跟 single-row 模式同 visual)/}\n <div\n className={cn(\n 'flex items-center gap-2',\n 'h-[var(--chrome-header-height)]',\n 'px-[var(--layout-space-loose)]',\n )}\n >\n {children}\n </div>\n {/ Row 2:tabsSlot wrapper — TabsList 全 dialog 寬 + 內 px-loose inset triggers\n 2026-05-18 v3 fix(同 SurfaceHeader,per user verbatim「分隔線寬度應該要填滿整個\n dialog」+「就這樣做」approval):TabsList 自己 px-loose 內 padding 而非 wrapper\n 提供,讓 TabsList border-b 延展全 dialog 寬。對齊 `tabs.spec.md:199` 既有 canonical。\n 2026-07-30 v4:選取機制改 `data-slot=\"tabs-list\"` attribute contract(beta.86\n overlay 包裹層破 direct-child;詳 HEADER_TABS_SLOT_WRAPPER_CLASS 註解)。/}\n <div className={HEADER_TABS_SLOT_WRAPPER_CLASS}>\n {tabsSlot}\n </div>\n </header>\n )\n }\n\n // Leading rail mode(2026-05-21 ship per AppShell primary-header globalHeader):\n // [leadingRail (width=sidebar-width-icon, justify-center)] [children (flex-1 px-loose)]\n // 整 header 仍 fixed-height chrome-header-height + border-b。Rail 容器無 padding(內元素\n // 透過 sidebar-width-icon 幾何自然居中,跟 sidebar 收合 icon center x 對齊)。\n if (leadingRail != null) {\n return (\n <header\n ref={ref}\n data-density={lockDensity === 'lg' ? 'lg' : undefined}\n className={cn(\n 'flex items-center shrink-0',\n 'h-[var(--chrome-header-height)]',\n !hasTabs && 'border-b border-divider',\n className,\n )}\n {...props}\n >\n {/ Rail:固定寬度 = sidebar-width-icon,內容 justify-center 居中(toggle center x\n = rail 寬度的中點 = sidebar 收合 icon center x = 完美 vertical 對齊)\n 2026-05-21 v2 user 抓:rail 右側加 `border-r border-divider`,sidebar 收合到\n icon mode 時 rail 右 border = sidebar 右 border 連成一線(visual continuity)。 /}\n <div className=\"flex w-[var(--sidebar-width-icon)] shrink-0 items-center justify-center border-r border-divider\">\n {leadingRail}\n </div>\n {/ Main:flex-1 + px-loose(沿用 header 既有左右 padding canonical)+ gap-2 */}\n <div className=\"flex flex-1 items-center gap-2 min-w-0 px-[var(--layout-space-loose)]\">\n {children}\n </div>\n </header>\n )\n }\n\n // Single-row(預設 + withTabs=true 但無 tabsSlot 的 backward compat)\n return (\n <header\n ref={ref}\n data-density={lockDensity === 'lg' ? 'lg' : undefined}\n className={cn(\n 'flex items-center gap-2 shrink-0',\n 'h-[var(--chrome-header-height)]',\n 'px-[var(--layout-space-loose)]',\n // W1:無 tabs 自畫 border;withTabs=true(無 tabsSlot)consumer 自畫\n !hasTabs && 'border-b border-divider',\n className,\n )}\n {...props}\n >\n {children}\n </header>\n )\n },\n)\nChromeHeader.displayName = 'ChromeHeader'\n"],"names":[],"mappings":";;;AAgBO,MAAM,iCACX;AAmFK,MAAM,eAAe,MAAM;AAAA,EAChC,CACE,EAAE,WAAW,UAAU,UAAU,cAAc,WAAW,aAAa,UAAU,GAAG,MAAA,GACpF,QACG;AACH,UAAM,UAAU,YAAY,QAAQ,aAAa;AAMjD,QAAI,YAAY,MAAM;AACpB,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,gBAAc,gBAAgB,OAAO,OAAO;AAAA,UAC5C,WAAW,GAAG,0BAA0B,SAAS;AAAA,UAChD,GAAG;AAAA,UAGJ,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA;AAAA,gBAAA;AAAA,gBAGD;AAAA,cAAA;AAAA,YAAA;AAAA,YAQH,oBAAC,OAAA,EAAI,WAAW,gCACb,UAAA,SAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN;AAMA,QAAI,eAAe,MAAM;AACvB,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,gBAAc,gBAAgB,OAAO,OAAO;AAAA,UAC5C,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA,CAAC,WAAW;AAAA,YACZ;AAAA,UAAA;AAAA,UAED,GAAG;AAAA,UAMJ,UAAA;AAAA,YAAA,oBAAC,OAAA,EAAI,WAAU,mGACZ,UAAA,aACH;AAAA,YAEA,oBAAC,OAAA,EAAI,WAAU,yEACZ,SAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN;AAGA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,gBAAc,gBAAgB,OAAO,OAAO;AAAA,QAC5C,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA;AAAA,UAEA,CAAC,WAAW;AAAA,UACZ;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,aAAa,cAAc;"}

package/dist/patterns/header-canonical/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './chrome-header';
2	+ //# sourceMappingURL=index.d.ts.map

package/dist/patterns/header-canonical/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/header-canonical/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAA"}

package/dist/patterns/header-canonical/index.js ADDED Viewed

@@ -0,0 +1,6 @@
+import { ChromeHeader, HEADER_TABS_SLOT_WRAPPER_CLASS } from "./chrome-header.js";
+export {
+  ChromeHeader,
+  HEADER_TABS_SLOT_WRAPPER_CLASS
+};
+//# sourceMappingURL=index.js.map

package/dist/patterns/header-canonical/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/patterns/horizontal-overflow/horizontal-overflow.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 /**
- * @internal — DS-internal primitive module(2026-05-23 per `.claude/rules/ui-development.md` Public vs Internal canonical)。
+ * @internal — DS-internal primitive module(2026-05-23 per `packages/design-system/ds-canonical/rules/ui-development.md` Public vs Internal canonical)。
  * end-user app 直接 import 無 functioning UI;由 Tabs / ChipGroup 等 DS 元件 wrap 消費 hook + helper components。
  */
 import * as React from 'react';

package/dist/patterns/horizontal-overflow/horizontal-overflow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"horizontal-overflow.js","sources":["../../../src/patterns/horizontal-overflow/horizontal-overflow.tsx"],"sourcesContent":["/*\n @internal — DS-internal primitive module(2026-05-23 per ~~`.claude~~/rules/ui-development.md` Public vs Internal canonical)。\n * end-user app 直接 import 無 functioning UI;由 Tabs / ChipGroup 等 DS 元件 wrap 消費 hook + helper components。\n /\n// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport as React from 'react'\nimport { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\nimport {\n useScrollEdges,\n useOverflowIndices,\n} from '@/design-system/hooks/use-overflow-items'\n\n/*\n Horizontal Overflow — canonical primitives + helpers\n \n 詳細設計原則與消費規則見 `horizontal-overflow.spec.md`。\n \n ── 核心規則 ──\n * 所有 horizontal overflow 的 affordance 一律是 `<Button variant=\"text\" size=\"sm\" iconOnly>`。\n * 無論內容是 Tab / Chip / Step / SegmentedControl item,overflow trigger 永遠同一套。\n * 這是工具層,跟業務層(內容)解耦,不該跟內容爭視覺重量。\n \n ── 為什麼存在 ──\n * 過去 Tabs 和 Chip 兩邊各自 copy-paste `ScrollArrow` / `buildFadeMask` / 常數,\n * 導致 Chip menu trigger 漂移成 chip-shape(違反 mental model)。本 module 是\n * single source of truth,消除複製帶來的漂移空間。\n /\n\n// ── Constants ─────────────────────────────────────────────────────────────\n\n/* Fade mask 漸變寬度(px)/\n// code-quality-allow: dead-export — public constant — DS API surface,consumer 可引(即使當前 internal-only)\nexport const FADE_WIDTH = 16\n\n/\n Scroll arrow 預留的按鈕區寬度(px)。\n * 值對齊 `field-height-sm` 在 lg density 下的最大值(32px),確保 arrow button\n * 在任何 density 都能完整容納 Button text sm iconOnly。\n /\nexport const ARROW_BUTTON_WIDTH = 32\n\n/* 點一次 scroll arrow 滑動 80% 容器寬度 /\n// code-quality-allow: dead-export — public constant — DS API surface,consumer 可引(即使當前 internal-only)\nexport const SCROLL_PAGE_RATIO = 0.8\n\n// ── Helpers ───────────────────────────────────────────────────────────────\n\ninterface BuildFadeMaskArgs {\n canScroll: boolean\n atStart: boolean\n atEnd: boolean\n /\n 預留給 scroll arrow button 的寬度(px)。\n * - Scroll 模式:傳 `ARROW_BUTTON_WIDTH`,fade 會延伸到 arrow 底下,\n * 避免「透明 button icon 跟 item 文字視覺打架」(Material 3 scrim 原理)\n * - Menu 模式:傳 0,沒有 arrow,fade 直接從容器邊緣開始\n /\n reserveArrowWidth?: number\n}\n\n/\n 計算 fade mask 的 `linear-gradient` 字串。\n \n 回傳 `undefined` 時代表「不需要 mask」(內容沒溢出),消費者該讓 `maskImage`\n * 等於 undefined 讓 CSS 恢復正常渲染。\n /\nexport function buildFadeMask({\n canScroll,\n atStart,\n atEnd,\n reserveArrowWidth = 0,\n}: BuildFadeMaskArgs): string \| undefined {\n if (!canScroll) return undefined\n const stops: string[] = []\n if (!atStart) {\n if (reserveArrowWidth > 0) {\n stops.push('transparent 0')\n stops.push(`transparent ${reserveArrowWidth}px`)\n stops.push(`black ${reserveArrowWidth + FADE_WIDTH}px`)\n } else {\n stops.push('transparent 0')\n stops.push(`black ${FADE_WIDTH}px`)\n }\n } else {\n stops.push('black 0')\n }\n if (!atEnd) {\n if (reserveArrowWidth > 0) {\n stops.push(`black calc(100% - ${reserveArrowWidth + FADE_WIDTH}px)`)\n stops.push(`transparent calc(100% - ${reserveArrowWidth}px)`)\n stops.push('transparent 100%')\n } else {\n stops.push(`black calc(100% - ${FADE_WIDTH}px)`)\n stops.push('transparent 100%')\n }\n } else {\n stops.push('black 100%')\n }\n return `linear-gradient(to right, ${stops.join(', ')})`\n}\n\n/\n Scroll by page helper。接收 scrollRef 回傳一個 `scrollByPage(direction)` 函式,\n * 呼叫後以 smooth 動畫橫向滑動 `clientWidth × SCROLL_PAGE_RATIO`。\n \n 使用 useCallback 並以 scrollRef 為 dependency,確保消費者可以安全把回傳函式\n * 傳給 `<OverflowScrollArrow onClick>`。\n /\nexport function useScrollByPage<T extends HTMLElement>(\n scrollRef: React.RefObject<T \| null>,\n): (direction: 'left' \| 'right') => void {\n return React.useCallback(\n (direction: 'left' \| 'right') => {\n const el = scrollRef.current\n if (!el) return\n el.scrollBy({\n left: el.clientWidth SCROLL_PAGE_RATIO * (direction === 'left' ? -1 : 1),\n behavior: 'smooth',\n })\n },\n [scrollRef],\n )\n}\n\n// ── Primitives ────────────────────────────────────────────────────────────\n\nexport interface OverflowScrollArrowProps {\n direction: 'left' \| 'right'\n onClick: () => void\n /*\n 覆寫 aria-label(預設為「向左捲動」/「向右捲動」)。\n * 一般情況不需要傳——預設繁中 label 對所有水平捲動情境都成立。\n /\n 'aria-label'?: string\n}\n\n/\n Scroll arrow button — canonical horizontal overflow affordance。\n \n 絕對定位在容器的 `left-0` / `right-0`,使用 `pointer-events-none` 外層 +\n * `pointer-events-auto` 內層,讓 fade mask 下方仍可橫向滑動(arrow 只接受點\n * 自身的 click)。\n \n Root 是 `<Button variant=\"text\" size=\"sm\" iconOnly>`——跟 Tabs / Chip /\n * 未來所有消費者共用同一個按鈕視覺。\n /\nexport const OverflowScrollArrow: React.FC<OverflowScrollArrowProps> = ({\n direction,\n onClick,\n 'aria-label': ariaLabel,\n}) => {\n const defaultLabel = direction === 'left' ? '向左捲動' : '向右捲動' // i18n-allow: DS default; consumer override via aria-label prop\n return (\n <div\n className={cn(\n 'absolute top-0 bottom-0 flex items-center pointer-events-none z-10',\n direction === 'left' ? 'left-0' : 'right-0',\n )}\n >\n <div className=\"pointer-events-auto\">\n <Button\n variant=\"text\"\n size=\"sm\"\n iconOnly\n startIcon={direction === 'left' ? ChevronLeft : ChevronRight}\n aria-label={ariaLabel ?? defaultLabel}\n onClick={onClick}\n />\n </div>\n </div>\n )\n}\n\nexport interface OverflowMenuTriggerButtonProps\n extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n /\n Accessible label。消費者應傳入有語境的 label,例如\n * `\"頁籤選單(共 5 個)\"` 或 `\"分類選單(共 8 個)\"`。必填。\n /\n 'aria-label': string\n}\n\n/\n Menu trigger button — canonical overflow menu affordance。\n \n Root 是 `<Button variant=\"text\" size=\"sm\" iconOnly startIcon={ChevronDown}>`。\n * forwardRef + props spread 讓 Radix `<DropdownMenuTrigger asChild>` 可以\n * 接管 onClick / aria-expanded / data-state 等 attributes。\n \n ── 為什麼不包 DropdownMenu ──\n * Menu 的內容(items)取決於消費者的資料結構(Tab 用 DropdownMenuItem + selected,\n * Chip 用 DropdownMenuCheckboxItem),所以只提供 trigger button,消費者自己\n * 把 `<DropdownMenu> <DropdownMenuTrigger asChild> <OverflowMenuTriggerButton /> ... </DropdownMenu>`\n * 串起來。\n */\nexport const OverflowMenuTriggerButton = React.forwardRef<\n HTMLButtonElement,\n OverflowMenuTriggerButtonProps\n>(({ 'aria-label': ariaLabel, ...props }, ref) => (\n <Button\n ref={ref}\n variant=\"text\"\n size=\"sm\"\n iconOnly\n startIcon={ChevronDown}\n aria-label={ariaLabel}\n {...props}\n />\n))\nOverflowMenuTriggerButton.displayName = 'OverflowMenuTriggerButton'\n\n// ── Hook re-exports ──────────────────────────────────────────────────────\n// 讓消費者只從本 module import 所有 overflow 相關的 API。\n\nexport { useScrollEdges, useOverflowIndices }\n"],"names":[],"mappings":";;;;;AAkCO,MAAM,aAAa;AAOnB,MAAM,qBAAqB;AAI3B,MAAM,oBAAoB;AAuB1B,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AACtB,GAA0C;AACxC,MAAI,CAAC,UAAW,QAAO;AACvB,QAAM,QAAkB,CAAA;AACxB,MAAI,CAAC,SAAS;AACZ,QAAI,oBAAoB,GAAG;AACzB,YAAM,KAAK,eAAe;AAC1B,YAAM,KAAK,eAAe,iBAAiB,IAAI;AAC/C,YAAM,KAAK,SAAS,oBAAoB,UAAU,IAAI;AAAA,IACxD,OAAO;AACL,YAAM,KAAK,eAAe;AAC1B,YAAM,KAAK,SAAS,UAAU,IAAI;AAAA,IACpC;AAAA,EACF,OAAO;AACL,UAAM,KAAK,SAAS;AAAA,EACtB;AACA,MAAI,CAAC,OAAO;AACV,QAAI,oBAAoB,GAAG;AACzB,YAAM,KAAK,qBAAqB,oBAAoB,UAAU,KAAK;AACnE,YAAM,KAAK,2BAA2B,iBAAiB,KAAK;AAC5D,YAAM,KAAK,kBAAkB;AAAA,IAC/B,OAAO;AACL,YAAM,KAAK,qBAAqB,UAAU,KAAK;AAC/C,YAAM,KAAK,kBAAkB;AAAA,IAC/B;AAAA,EACF,OAAO;AACL,UAAM,KAAK,YAAY;AAAA,EACzB;AACA,SAAO,6BAA6B,MAAM,KAAK,IAAI,CAAC;AACtD;AASO,SAAS,gBACd,WACuC;AACvC,SAAO,MAAM;AAAA,IACX,CAAC,cAAgC;AAC/B,YAAM,KAAK,UAAU;AACrB,UAAI,CAAC,GAAI;AACT,SAAG,SAAS;AAAA,QACV,MAAM,GAAG,cAAc,qBAAqB,cAAc,SAAS,KAAK;AAAA,QACxE,UAAU;AAAA,MAAA,CACX;AAAA,IACH;AAAA,IACA,CAAC,SAAS;AAAA,EAAA;AAEd;AAwBO,MAAM,sBAA0D,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA,cAAc;AAChB,MAAM;AACJ,QAAM,eAAe,cAAc,SAAS,SAAS;AACrD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,cAAc,SAAS,WAAW;AAAA,MAAA;AAAA,MAGpC,UAAA,oBAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,UAAQ;AAAA,UACR,WAAW,cAAc,SAAS,cAAc;AAAA,UAChD,cAAY,aAAa;AAAA,UACzB;AAAA,QAAA;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;AAwBO,MAAM,4BAA4B,MAAM,WAG7C,CAAC,EAAE,cAAc,WAAW,GAAG,SAAS,QACxC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IACA,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,UAAQ;AAAA,IACR,WAAW;AAAA,IACX,cAAY;AAAA,IACX,GAAG;AAAA,EAAA;AACN,CACD;AACD,0BAA0B,cAAc;"}
1	+ {"version":3,"file":"horizontal-overflow.js","sources":["../../../src/patterns/horizontal-overflow/horizontal-overflow.tsx"],"sourcesContent":["/*\n @internal — DS-internal primitive module(2026-05-23 per `packages/design-system/ds-canonical/rules/ui-development.md` Public vs Internal canonical)。\n * end-user app 直接 import 無 functioning UI;由 Tabs / ChipGroup 等 DS 元件 wrap 消費 hook + helper components。\n /\n// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport as React from 'react'\nimport { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\nimport {\n useScrollEdges,\n useOverflowIndices,\n} from '@/design-system/hooks/use-overflow-items'\n\n/*\n Horizontal Overflow — canonical primitives + helpers\n \n 詳細設計原則與消費規則見 `horizontal-overflow.spec.md`。\n \n ── 核心規則 ──\n * 所有 horizontal overflow 的 affordance 一律是 `<Button variant=\"text\" size=\"sm\" iconOnly>`。\n * 無論內容是 Tab / Chip / Step / SegmentedControl item,overflow trigger 永遠同一套。\n * 這是工具層,跟業務層(內容)解耦,不該跟內容爭視覺重量。\n \n ── 為什麼存在 ──\n * 過去 Tabs 和 Chip 兩邊各自 copy-paste `ScrollArrow` / `buildFadeMask` / 常數,\n * 導致 Chip menu trigger 漂移成 chip-shape(違反 mental model)。本 module 是\n * single source of truth,消除複製帶來的漂移空間。\n /\n\n// ── Constants ─────────────────────────────────────────────────────────────\n\n/* Fade mask 漸變寬度(px)/\n// code-quality-allow: dead-export — public constant — DS API surface,consumer 可引(即使當前 internal-only)\nexport const FADE_WIDTH = 16\n\n/\n Scroll arrow 預留的按鈕區寬度(px)。\n * 值對齊 `field-height-sm` 在 lg density 下的最大值(32px),確保 arrow button\n * 在任何 density 都能完整容納 Button text sm iconOnly。\n /\nexport const ARROW_BUTTON_WIDTH = 32\n\n/* 點一次 scroll arrow 滑動 80% 容器寬度 /\n// code-quality-allow: dead-export — public constant — DS API surface,consumer 可引(即使當前 internal-only)\nexport const SCROLL_PAGE_RATIO = 0.8\n\n// ── Helpers ───────────────────────────────────────────────────────────────\n\ninterface BuildFadeMaskArgs {\n canScroll: boolean\n atStart: boolean\n atEnd: boolean\n /\n 預留給 scroll arrow button 的寬度(px)。\n * - Scroll 模式:傳 `ARROW_BUTTON_WIDTH`,fade 會延伸到 arrow 底下,\n * 避免「透明 button icon 跟 item 文字視覺打架」(Material 3 scrim 原理)\n * - Menu 模式:傳 0,沒有 arrow,fade 直接從容器邊緣開始\n /\n reserveArrowWidth?: number\n}\n\n/\n 計算 fade mask 的 `linear-gradient` 字串。\n \n 回傳 `undefined` 時代表「不需要 mask」(內容沒溢出),消費者該讓 `maskImage`\n * 等於 undefined 讓 CSS 恢復正常渲染。\n /\nexport function buildFadeMask({\n canScroll,\n atStart,\n atEnd,\n reserveArrowWidth = 0,\n}: BuildFadeMaskArgs): string \| undefined {\n if (!canScroll) return undefined\n const stops: string[] = []\n if (!atStart) {\n if (reserveArrowWidth > 0) {\n stops.push('transparent 0')\n stops.push(`transparent ${reserveArrowWidth}px`)\n stops.push(`black ${reserveArrowWidth + FADE_WIDTH}px`)\n } else {\n stops.push('transparent 0')\n stops.push(`black ${FADE_WIDTH}px`)\n }\n } else {\n stops.push('black 0')\n }\n if (!atEnd) {\n if (reserveArrowWidth > 0) {\n stops.push(`black calc(100% - ${reserveArrowWidth + FADE_WIDTH}px)`)\n stops.push(`transparent calc(100% - ${reserveArrowWidth}px)`)\n stops.push('transparent 100%')\n } else {\n stops.push(`black calc(100% - ${FADE_WIDTH}px)`)\n stops.push('transparent 100%')\n }\n } else {\n stops.push('black 100%')\n }\n return `linear-gradient(to right, ${stops.join(', ')})`\n}\n\n/\n Scroll by page helper。接收 scrollRef 回傳一個 `scrollByPage(direction)` 函式,\n * 呼叫後以 smooth 動畫橫向滑動 `clientWidth × SCROLL_PAGE_RATIO`。\n \n 使用 useCallback 並以 scrollRef 為 dependency,確保消費者可以安全把回傳函式\n * 傳給 `<OverflowScrollArrow onClick>`。\n /\nexport function useScrollByPage<T extends HTMLElement>(\n scrollRef: React.RefObject<T \| null>,\n): (direction: 'left' \| 'right') => void {\n return React.useCallback(\n (direction: 'left' \| 'right') => {\n const el = scrollRef.current\n if (!el) return\n el.scrollBy({\n left: el.clientWidth SCROLL_PAGE_RATIO * (direction === 'left' ? -1 : 1),\n behavior: 'smooth',\n })\n },\n [scrollRef],\n )\n}\n\n// ── Primitives ────────────────────────────────────────────────────────────\n\nexport interface OverflowScrollArrowProps {\n direction: 'left' \| 'right'\n onClick: () => void\n /*\n 覆寫 aria-label(預設為「向左捲動」/「向右捲動」)。\n * 一般情況不需要傳——預設繁中 label 對所有水平捲動情境都成立。\n /\n 'aria-label'?: string\n}\n\n/\n Scroll arrow button — canonical horizontal overflow affordance。\n \n 絕對定位在容器的 `left-0` / `right-0`,使用 `pointer-events-none` 外層 +\n * `pointer-events-auto` 內層,讓 fade mask 下方仍可橫向滑動(arrow 只接受點\n * 自身的 click)。\n \n Root 是 `<Button variant=\"text\" size=\"sm\" iconOnly>`——跟 Tabs / Chip /\n * 未來所有消費者共用同一個按鈕視覺。\n /\nexport const OverflowScrollArrow: React.FC<OverflowScrollArrowProps> = ({\n direction,\n onClick,\n 'aria-label': ariaLabel,\n}) => {\n const defaultLabel = direction === 'left' ? '向左捲動' : '向右捲動' // i18n-allow: DS default; consumer override via aria-label prop\n return (\n <div\n className={cn(\n 'absolute top-0 bottom-0 flex items-center pointer-events-none z-10',\n direction === 'left' ? 'left-0' : 'right-0',\n )}\n >\n <div className=\"pointer-events-auto\">\n <Button\n variant=\"text\"\n size=\"sm\"\n iconOnly\n startIcon={direction === 'left' ? ChevronLeft : ChevronRight}\n aria-label={ariaLabel ?? defaultLabel}\n onClick={onClick}\n />\n </div>\n </div>\n )\n}\n\nexport interface OverflowMenuTriggerButtonProps\n extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n /\n Accessible label。消費者應傳入有語境的 label,例如\n * `\"頁籤選單(共 5 個)\"` 或 `\"分類選單(共 8 個)\"`。必填。\n /\n 'aria-label': string\n}\n\n/\n Menu trigger button — canonical overflow menu affordance。\n \n Root 是 `<Button variant=\"text\" size=\"sm\" iconOnly startIcon={ChevronDown}>`。\n * forwardRef + props spread 讓 Radix `<DropdownMenuTrigger asChild>` 可以\n * 接管 onClick / aria-expanded / data-state 等 attributes。\n \n ── 為什麼不包 DropdownMenu ──\n * Menu 的內容(items)取決於消費者的資料結構(Tab 用 DropdownMenuItem + selected,\n * Chip 用 DropdownMenuCheckboxItem),所以只提供 trigger button,消費者自己\n * 把 `<DropdownMenu> <DropdownMenuTrigger asChild> <OverflowMenuTriggerButton /> ... </DropdownMenu>`\n * 串起來。\n */\nexport const OverflowMenuTriggerButton = React.forwardRef<\n HTMLButtonElement,\n OverflowMenuTriggerButtonProps\n>(({ 'aria-label': ariaLabel, ...props }, ref) => (\n <Button\n ref={ref}\n variant=\"text\"\n size=\"sm\"\n iconOnly\n startIcon={ChevronDown}\n aria-label={ariaLabel}\n {...props}\n />\n))\nOverflowMenuTriggerButton.displayName = 'OverflowMenuTriggerButton'\n\n// ── Hook re-exports ──────────────────────────────────────────────────────\n// 讓消費者只從本 module import 所有 overflow 相關的 API。\n\nexport { useScrollEdges, useOverflowIndices }\n"],"names":[],"mappings":";;;;;AAkCO,MAAM,aAAa;AAOnB,MAAM,qBAAqB;AAI3B,MAAM,oBAAoB;AAuB1B,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AACtB,GAA0C;AACxC,MAAI,CAAC,UAAW,QAAO;AACvB,QAAM,QAAkB,CAAA;AACxB,MAAI,CAAC,SAAS;AACZ,QAAI,oBAAoB,GAAG;AACzB,YAAM,KAAK,eAAe;AAC1B,YAAM,KAAK,eAAe,iBAAiB,IAAI;AAC/C,YAAM,KAAK,SAAS,oBAAoB,UAAU,IAAI;AAAA,IACxD,OAAO;AACL,YAAM,KAAK,eAAe;AAC1B,YAAM,KAAK,SAAS,UAAU,IAAI;AAAA,IACpC;AAAA,EACF,OAAO;AACL,UAAM,KAAK,SAAS;AAAA,EACtB;AACA,MAAI,CAAC,OAAO;AACV,QAAI,oBAAoB,GAAG;AACzB,YAAM,KAAK,qBAAqB,oBAAoB,UAAU,KAAK;AACnE,YAAM,KAAK,2BAA2B,iBAAiB,KAAK;AAC5D,YAAM,KAAK,kBAAkB;AAAA,IAC/B,OAAO;AACL,YAAM,KAAK,qBAAqB,UAAU,KAAK;AAC/C,YAAM,KAAK,kBAAkB;AAAA,IAC/B;AAAA,EACF,OAAO;AACL,UAAM,KAAK,YAAY;AAAA,EACzB;AACA,SAAO,6BAA6B,MAAM,KAAK,IAAI,CAAC;AACtD;AASO,SAAS,gBACd,WACuC;AACvC,SAAO,MAAM;AAAA,IACX,CAAC,cAAgC;AAC/B,YAAM,KAAK,UAAU;AACrB,UAAI,CAAC,GAAI;AACT,SAAG,SAAS;AAAA,QACV,MAAM,GAAG,cAAc,qBAAqB,cAAc,SAAS,KAAK;AAAA,QACxE,UAAU;AAAA,MAAA,CACX;AAAA,IACH;AAAA,IACA,CAAC,SAAS;AAAA,EAAA;AAEd;AAwBO,MAAM,sBAA0D,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA,cAAc;AAChB,MAAM;AACJ,QAAM,eAAe,cAAc,SAAS,SAAS;AACrD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,cAAc,SAAS,WAAW;AAAA,MAAA;AAAA,MAGpC,UAAA,oBAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,UAAQ;AAAA,UACR,WAAW,cAAc,SAAS,cAAc;AAAA,UAChD,cAAY,aAAa;AAAA,UACzB;AAAA,QAAA;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;AAwBO,MAAM,4BAA4B,MAAM,WAG7C,CAAC,EAAE,cAAc,WAAW,GAAG,SAAS,QACxC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IACA,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,UAAQ;AAAA,IACR,WAAW;AAAA,IACX,cAAY;AAAA,IACX,GAAG;AAAA,EAAA;AACN,CACD;AACD,0BAA0B,cAAc;"}

package/dist/patterns/horizontal-overflow/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './horizontal-overflow';
2	+ //# sourceMappingURL=index.d.ts.map

package/dist/patterns/horizontal-overflow/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/horizontal-overflow/index.ts"],"names":[],"mappings":"AAIA,cAAc,uBAAuB,CAAA"}

package/dist/patterns/horizontal-overflow/index.js ADDED Viewed

@@ -0,0 +1,14 @@
+import { ARROW_BUTTON_WIDTH, FADE_WIDTH, OverflowMenuTriggerButton, OverflowScrollArrow, SCROLL_PAGE_RATIO, buildFadeMask, useScrollByPage } from "./horizontal-overflow.js";
+import { useOverflowIndices, useScrollEdges } from "../../hooks/use-overflow-items.js";
+export {
+  ARROW_BUTTON_WIDTH,
+  FADE_WIDTH,
+  OverflowMenuTriggerButton,
+  OverflowScrollArrow,
+  SCROLL_PAGE_RATIO,
+  buildFadeMask,
+  useOverflowIndices,
+  useScrollByPage,
+  useScrollEdges
+};
+//# sourceMappingURL=index.js.map

package/dist/patterns/horizontal-overflow/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/patterns/overlay-surface/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './overlay-surface';
2	+ //# sourceMappingURL=index.d.ts.map

package/dist/patterns/overlay-surface/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/overlay-surface/index.ts"],"names":[],"mappings":"AAIA,cAAc,mBAAmB,CAAA"}

package/dist/patterns/overlay-surface/index.js ADDED Viewed

@@ -0,0 +1,8 @@
+import { COMPACT_HEADER_SLOT, SurfaceBody, SurfaceFooter, SurfaceHeader } from "./overlay-surface.js";
+export {
+  COMPACT_HEADER_SLOT,
+  SurfaceBody,
+  SurfaceFooter,
+  SurfaceHeader
+};
+//# sourceMappingURL=index.js.map

package/dist/patterns/overlay-surface/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/patterns/overlay-surface/overlay-surface.d.ts CHANGED Viewed

@@ -1,4 +1,12 @@
 import * as React from 'react';
+/**
+ * 輕量浮層 header 的 slot override —— **SSOT,禁各自 inline**(2026-06-16 收斂)。
+ * Popover-tier header(title = PopoverTitle `text-body`)的 slot = body line-box = `calc(--font-body-size×1.5)` = 21,
+ * 衍生自 title typography → title 字級改,slot 自動跟(取代舊各自寫死的 1.25rem / 20 巧合值)。
+ * 消費者(同設計邏輯,皆 raw SurfaceHeader + PopoverTitle):PopoverHeader / DataTable sort·filter panel /
+ * FileItem upload-manager。Default slot(Dialog/Sheet,title = text-body-lg)= 24,在 CHROME_UNBOUNDED_SLOT fallback。
+ */
+export declare const COMPACT_HEADER_SLOT = "[--chrome-slot-h:calc(var(--font-body-size)*1.5)]";
 export interface SurfaceHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * 是否內含 Tabs。
@@ -12,8 +20,10 @@ export interface SurfaceHeaderProps extends React.HTMLAttributes<HTMLDivElement>
      * Tabs row slot(2026-05-18 加 per header-canonical.spec.md W2/W4 真實能用 + user-mandated fix)。
      * 提供時 SurfaceHeader 自動 column 結構:
      *   row 1 = children(title + actions/dismiss,px-loose py-tight)
-     *   row 2 = tabsSlot 包在 `<div px-loose border-b border-divider>`
-     *           ↑ wrapper 提供 W2 padding inheritance + 全寬 paint(W1 視覺一條線)
+     *   row 2 = tabsSlot 包在 `HEADER_TABS_SLOT_WRAPPER_CLASS` wrapper(v4:wrapper 自身
+     *           無 px / 無 border;`[&_[data-slot=tabs-list]]` 注入 px-loose,寬度 TabsList
+     *           各 overflow 模式自帶,border-b 延展全寬 — W1 視覺一條線。
+     *           詳 chrome-header.tsx HEADER_TABS_SLOT_WRAPPER_CLASS 註解)
      *
      * Consumer 傳:`tabsSlot={<TabsList>...</TabsList>}`,TabsContent 仍放 DialogBody 內。
      * `<Tabs>` root 必須 wrap 整 DialogContent(Radix TabsList ↔ TabsContent 同 root 連動)。

package/dist/patterns/overlay-surface/overlay-surface.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"overlay-surface.d.ts","sourceRoot":"","sources":["../../../src/patterns/overlay-surface/overlay-surface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;~~AAgE9B~~,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB~~;;;;;;;;;;;OAWG~~;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,eAAO,MAAM,aAAa,~~2FAgExB~~,CAAA;AAGF,eAAO,MAAM,WAAW,~~6GAiBtB~~,CAAA;AAGF,eAAO,MAAM,aAAa,6GAaxB,CAAA"}
1	+ {"version":3,"file":"overlay-surface.d.ts","sourceRoot":"","sources":["../../../src/patterns/overlay-surface/overlay-surface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqE9B;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,sDAAsD,CAAA;AAEtF,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;;;;;OAaG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,eAAO,MAAM,aAAa,2FAkExB,CAAA;AAGF,eAAO,MAAM,WAAW,6GAkBtB,CAAA;AAGF,eAAO,MAAM,aAAa,6GAaxB,CAAA"}

package/dist/patterns/overlay-surface/overlay-surface.js CHANGED Viewed

@@ -1,7 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
-const CHROME_UNBOUNDED_SLOT = "[&_[data-unbounded]]:my-[calc((var(--chrome-slot-h,var(--field-height-xs))-var(--field-height-sm))/2)]";
+import { HEADER_TABS_SLOT_WRAPPER_CLASS } from "../header-canonical/chrome-header.js";
+const CHROME_UNBOUNDED_SLOT = "[&_[data-unbounded]]:my-[calc((var(--chrome-slot-h,calc(var(--font-body-lg-size)*1.5))-var(--field-height-sm))/2)]";
+const COMPACT_HEADER_SLOT = "[--chrome-slot-h:calc(var(--font-body-size)*1.5)]";
 const SurfaceHeader = React.forwardRef(({ className, withTabs, tabsSlot, children, ...props }, ref) => {
   const hasTabs = tabsSlot != null || withTabs === true;
   if (tabsSlot != null) {
@@ -23,7 +25,7 @@ const SurfaceHeader = React.forwardRef(({ className, withTabs, tabsSlot, childre
               children
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "[&>[role=tablist]]:w-full [&>[role=tablist]]:px-[var(--layout-space-loose)]", children: tabsSlot })
+          /* @__PURE__ */ jsx("div", { className: HEADER_TABS_SLOT_WRAPPER_CLASS, children: tabsSlot })
         ]
       }
     );
@@ -56,6 +58,7 @@ const SurfaceBody = React.forwardRef(({ className, ...props }, ref) => (
       ref,
       className: cn(
         "flex-1 min-h-0 overflow-y-auto",
+        "focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring",
         "px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]",
         className
       ),
@@ -78,6 +81,7 @@ const SurfaceFooter = React.forwardRef(({ className, ...props }, ref) => /* @__P
 ));
 SurfaceFooter.displayName = "SurfaceFooter";
 export {
+  COMPACT_HEADER_SLOT,
   SurfaceBody,
   SurfaceFooter,
   SurfaceHeader

package/dist/patterns/overlay-surface/overlay-surface.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"overlay-surface.js","sources":["../../../src/patterns/overlay-surface/overlay-surface.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\n/*\n @internal — DS-internal primitive(2026-05-23 per `.claude/rules/ui-development.md` Public vs Internal canonical)。\n * end-user app 直接 import 無 functioning UI;由 Dialog / Sheet / Popover / HoverCard / Coachmark 等 DS overlay 元件 wrap 消費。\n \n Overlay Surface primitives — Dialog / Popover / Sheet 共用結構化 sub-components。\n \n 抽象這層避免各自硬寫 padding / border 導致漂移。有特殊行為(Dialog Close 按鈕 /\n * viewport-fill 高度)由 consumer 額外包裝,不污染 primitive。\n \n ── Header / Footer 高度 canonical(2026-04-22 v3 校準,user intent 精確實作)──\n * Padding-based sizing:`py-[var(--layout-space-tight)]`,高度 = max(child) + 2×tight\n * 不用 fixed `min-h`(先前誤用 min-h-chrome-header-height 會讓 bounded button 被鎖死在 48\n * slot 失去自然高度,違反 user 意圖)。\n \n 對齊 `--chrome-header-height`(48/56)的條件:header 只放 unbounded 控件(close X /\n * text variant button,native sm + v5 unbounded trick layout 佔位 24):\n * header = 24 + 2×tight = 48 md / 56 lg ✓。\n \n 若 header 塞 bounded 控件(primary / tertiary with bg/border):header 自然長高\n * (sm 28 + 2×12 = 52 md),因 bounded 按鈕有視覺邊界,padding 不會顯得過大 — 這是預期的。\n \n ── Unbounded controls 在 header canonical(v5 trick,2026-04-22)──\n * Dismiss X(always unbounded)+ text variant header action → `size=\"sm\"` native\n * + SurfaceHeader CSS 自動套負 my trick(對 `[data-unbounded]`),layout 佔位縮回 24\n * (xs 等同)。Rationale:button native size 跟 touch target 保留 sm(a11y 最小 24+ hit\n * target,視覺 render 仍 28/32),layout 佔位精確匹配 chrome-header-height 幾何。詳\n * `overlay-surface.spec.md`「Chrome dismiss size canonical」。\n \n Notification banner family(Notice / Alert / Toast,fixed `px-4 py-3` variant,\n * 無 padding-based header)→ dismiss 用 `size=\"xs\"` explicit(24 固定,無 trick)。\n \n ── Token 規則 ──\n * horizontal padding: `px-[var(--layout-space-loose)]`\n * vertical padding: `py-[var(--layout-space-tight)]`\n * 分隔線: `border-{b\|t} border-divider`\n \n ── Body ──\n * Body padding-based(content area),`px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]`。\n * Dialog / Sheet body 走 ScrollArea + chrome padding(`px-loose pt-tight pb-bottom`)。\n * List-as-region 場景(menu / Cmd+K)由 consumer 用 className override 撤 chrome padding +\n * 自管 list outer wrapper(詳 overlay-surface.spec.md「List-as-region in overlay body」)。\n /\n\n// Chrome-slot layout trick(2026-04-22 v5,2026-05-04 重思 parameterize):\n// 所有 unbounded control(Button with `data-unbounded=\"true\"` — Button 自動在 variant=\"text\" 或 dismiss\n// 時標記)的 native size 不變(sm: 28 md / 32 lg),但 layout 佔位* via 負 `my` 縮成 `--chrome-slot-h`。\n//\n// Slot height = header title 的 line-height(讓 button 不 dominate,title 自然撐 header)\n// - Default `var(--field-height-xs)` = 24,匹配 Dialog/Sheet text-body-lg (16 × 1.5 = 24)\n// - Popover/Coachmark override `--chrome-slot-h: 1.25rem` (20),匹配 text-body (14 × 1.5 ≈ 21,floor 20)\n//\n// Header 永遠 padding-based(無 min-h),但因 slot ≤ title line-height,header 高度由 title 主導:\n// - Dialog: max(24 title, 24 slot) + py-tight(122)= 48 ✓ chrome-header-height\n// - Popover: max(21 title, 20 slot) + py-tight(122)= 45 ✓ 自然輕量\n// Q10 穩定性:title-only / title+button / refresh in/out 全 case header 高度 = title + py(slot 不 dominate)\n//\n// 負 my 公式:(slot - native) / 2,density-aware:\n// Dialog md: (24 - 28) / 2 = -2px; lg: (24 - 32) / 2 = -4px\n// Popover md: (20 - 28) / 2 = -4px\nconst CHROME_UNBOUNDED_SLOT = '[&_[data-unbounded]]:my-[calc((var(--chrome-slot-h,var(--field-height-xs))-var(--field-height-sm))/2)]'\n\nexport interface SurfaceHeaderProps\n extends React.HTMLAttributes<HTMLDivElement> {\n /*\n 是否內含 Tabs。\n * true(無 tabsSlot)→ 移除自身 border-b。\n * 若提供 tabsSlot,自動 column mode + auto suppress border(不需手動傳 withTabs=true)。\n * 對齊 patterns/header-canonical/header-canonical.spec.md W1\n * 「Header semantic owner / TabsList paint owner in withTabs state」。\n /\n withTabs?: boolean\n /\n Tabs row slot(2026-05-18 加 per header-canonical.spec.md W2/W4 真實能用 + user-mandated fix)。\n * 提供時 SurfaceHeader 自動 column 結構:\n * row 1 = children(title + actions/dismiss,px-loose py-tight)\n * row 2 = tabsSlot 包在 `<div px-loose border-b border-divider>`\n * ↑ wrapper 提供 W2 padding inheritance + 全寬 paint(W1 視覺一條線)\n \n Consumer 傳:`tabsSlot={<TabsList>...</TabsList>}`,TabsContent 仍放 DialogBody 內。\n * `<Tabs>` root 必須 wrap 整 DialogContent(Radix TabsList ↔ TabsContent 同 root 連動)。\n \n 提供 tabsSlot 自動 withTabs=true,不需另傳 prop。\n /\n tabsSlot?: React.ReactNode\n}\n\nexport const SurfaceHeader = React.forwardRef<\n HTMLDivElement,\n SurfaceHeaderProps\n>(({ className, withTabs, tabsSlot, children, ...props }, ref) => {\n // tabsSlot 提供 → 自動 withTabs(consumer 不需手動兩個 prop)\n const hasTabs = tabsSlot != null \|\| withTabs === true\n\n // Column mode(tabsSlot 提供時)— 對應 header-canonical.spec.md W2 + W4\n if (tabsSlot != null) {\n return (\n <div\n ref={ref}\n className={cn('flex flex-col shrink-0', className)}\n {...props}\n >\n {/ Row 1:header content row(原 single-row behavior 不變,但 border-b 撤掉,row 2 wrapper 接管 paint)/}\n <div\n className={cn(\n 'flex items-center gap-2',\n 'px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]',\n CHROME_UNBOUNDED_SLOT,\n )}\n >\n {children}\n </div>\n {/ Row 2:tabsSlot wrapper — TabsList 全 dialog 寬 + 內 px-loose padding inset triggers\n 2026-05-18 v3 fix(user verbatim approval「你確定這樣是世界級的設計且符合我們一致的設計\n 語言和 SSOT...就這樣做」):\n - v1: wrapper border + TabsList border = 雙線(W1 違反)\n - v2: wrapper px-loose + TabsList w-full inside = border 只跨 dialog - 2×px-loose\n (不到 dialog 邊 user 抓「分隔線寬度應該要填滿整個 dialog」)\n - v3(本):wrapper 不 inset,TabsList 自己 px-loose 內 padding inset triggers\n → TabsList border-b 延展全 dialog 寬,triggers 對齊 header content\n 對齊既有 `tabs.spec.md:199`「TabsList 自身 border-b border-border 延展全 header 寬,因\n TabsList wrapper 是 block-level full-width」+ `:187-189`「selected 底線從 TabsList\n gray border 位置長出來」+ GitHub Primer UnderlineNav / Ant Design line type / Mantine\n default 共識(全派 TabsList 自畫 full-width underline)。*/}\n <div className=\"[&>[role=tablist]]:w-full [&>[role=tablist]]:px-[var(--layout-space-loose)]\">\n {tabsSlot}\n </div>\n </div>\n )\n }\n\n // Padding-based(預設) — Dialog/Sheet 用 body-lg title (16/24)，自然撐 max(24 title, 24 button slot) = 24\n // → header = 24 + py-tight 12×2 = 48 chrome-header-height ✓ 穩定無需 min-h\n // Popover 等輕量 chrome 走 PopoverHeader override(min-h-10 + py-2 = 40,內 24 匹配 button slot)\n //\n // withTabs=true(無 tabsSlot,backward compat):移除 border-b,consumer 自畫\n return (\n <div\n ref={ref}\n className={cn(\n 'flex items-center gap-2 shrink-0',\n !hasTabs && 'border-b border-divider',\n 'px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]',\n CHROME_UNBOUNDED_SLOT,\n className,\n )}\n {...props}\n >\n {children}\n </div>\n )\n})\nSurfaceHeader.displayName = 'SurfaceHeader'\n\nexport const SurfaceBody = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n // 2026-05-04 viewport-aware scroll canonical:\n // parent(PopoverContent / HoverCardContent / Dialog / Sheet)是 flex flex-col + max-h + overflow-hidden\n // header / footer shrink-0;Body flex-1 min-h-0 overflow-y-auto → 視窗太小時 body 內 scroll\n // 非 flex-col parent 內 flex-1/min-h-0 no-op,backward compat\n <div\n ref={ref}\n className={cn(\n 'flex-1 min-h-0 overflow-y-auto',\n 'px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]',\n className,\n )}\n {...props}\n />\n))\nSurfaceBody.displayName = 'SurfaceBody'\n\nexport const SurfaceFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex items-center justify-end gap-2 shrink-0 border-t border-divider',\n 'px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]',\n className,\n )}\n {...props}\n />\n))\nSurfaceFooter.displayName = 'SurfaceFooter'\n"],"names":[],"mappings":";;;AA8DA,MAAM,wBAAwB;AA2BvB,MAAM,gBAAgB,MAAM,WAGjC,CAAC,EAAE,WAAW,UAAU,UAAU,UAAU,GAAG,MAAA,GAAS,QAAQ;AAEhE,QAAM,UAAU,YAAY,QAAQ,aAAa;AAGjD,MAAI,YAAY,MAAM;AACpB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,0BAA0B,SAAS;AAAA,QAChD,GAAG;AAAA,QAGJ,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cAGD;AAAA,YAAA;AAAA,UAAA;AAAA,UAcH,oBAAC,OAAA,EAAI,WAAU,+EACZ,UAAA,SAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAOA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,CAAC,WAAW;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AACD,cAAc,cAAc;AAErB,MAAM,cAAc,MAAM,WAG/B,CAAC,EAAE,WAAW,GAAG,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,EAK1B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAAA,CAEP;AACD,YAAY,cAAc;AAEnB,MAAM,gBAAgB,MAAM,WAGjC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AACD,cAAc,cAAc;"}
1	+ {"version":3,"file":"overlay-surface.js","sources":["../../../src/patterns/overlay-surface/overlay-surface.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '@/lib/utils'\n// W2 tabsSlot wrapper 契約 SSOT 在 header-canonical(跨家族 W-rule owner);SurfaceHeader 消費同一 const 不 hardcode。\nimport { HEADER_TABS_SLOT_WRAPPER_CLASS } from '@/design-system/patterns/header-canonical/chrome-header'\n\n/*\n @internal — DS-internal primitive(2026-05-23 per `packages/design-system/ds-canonical/rules/ui-development.md` Public vs Internal canonical)。\n * end-user app 直接 import 無 functioning UI;由 Dialog / Sheet / Popover / Coachmark 等 DS overlay 元件 wrap 消費(HoverCard 不消費 — 2026-07-04 grep 0 import,spec「何時不用」同步)。\n \n Overlay Surface primitives — Dialog / Popover / Sheet 共用結構化 sub-components。\n \n 抽象這層避免各自硬寫 padding / border 導致漂移。有特殊行為(Dialog Close 按鈕 /\n * viewport-fill 高度)由 consumer 額外包裝,不污染 primitive。\n \n ── Header / Footer 高度 canonical(2026-04-22 v3 校準,user intent 精確實作)──\n * Padding-based sizing:`py-[var(--layout-space-tight)]`,高度 = max(child) + 2×tight\n * 不用 fixed `min-h`(先前誤用 min-h-chrome-header-height 會讓 bounded button 被鎖死在 48\n * slot 失去自然高度,違反 user 意圖)。\n \n 對齊 `--chrome-header-height`(48/56)的條件:header 只放 unbounded 控件(close X /\n * text variant button,native sm + v5 unbounded trick layout 佔位 24):\n * header = 24 + 2×tight = 48 md / 56 lg ✓。\n \n 若 header 塞 bounded 控件(primary / tertiary with bg/border):header 自然長高\n * (sm 28 + 2×12 = 52 md),因 bounded 按鈕有視覺邊界,padding 不會顯得過大 — 這是預期的。\n \n ── Unbounded controls 在 header canonical(v5 trick,2026-04-22)──\n * Dismiss X(always unbounded)+ text variant header action → `size=\"sm\"` native\n * + SurfaceHeader CSS 自動套負 my trick(對 `[data-unbounded]`),layout 佔位縮回 24\n * (xs 等同)。Rationale:button native size 跟 touch target 保留 sm(a11y 最小 24+ hit\n * target,視覺 render 仍 28/32),layout 佔位精確匹配 chrome-header-height 幾何。詳\n * `overlay-surface.spec.md`「Chrome dismiss size canonical」。\n \n Notification banner family(Notice / Alert / Toast,fixed `px-4 py-3` variant,\n * 無 padding-based header)→ dismiss 用 `size=\"xs\"` explicit(24 固定,無 trick)。\n \n ── Token 規則 ──\n * horizontal padding: `px-[var(--layout-space-loose)]`\n * vertical padding: `py-[var(--layout-space-tight)]`\n * 分隔線: `border-{b\|t} border-divider`\n \n ── Body ──\n * Body padding-based(content area),`px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]`。\n * Dialog / Sheet body 走 ScrollArea + chrome padding(`px-loose pt-tight pb-bottom`)。\n * List-as-region 場景(menu / Cmd+K)由 consumer 用 className override 撤 chrome padding +\n * 自管 list outer wrapper(詳 overlay-surface.spec.md「List-as-region in overlay body」)。\n /\n\n// Chrome-slot layout trick(2026-04-22 v5,2026-05-04 重思 parameterize):\n// 所有 unbounded control(Button with `data-unbounded=\"true\"` — Button 自動在 variant=\"text\" 或 dismiss\n// 時標記)的 native size 不變(sm: 28 md / 32 lg),但 layout 佔位* via 負 `my` 縮成 `--chrome-slot-h`。\n//\n// Slot height = header title 的 line-height(讓 button 不 dominate,title 自然撐 header)\n// - Default 衍生自 title typography:`calc(var(--font-body-lg-size)1.5)` = 16×1.5 = 24(Dialog/Sheet title = text-body-lg)。\n// 2026-06-16:從寫死 `var(--field-height-xs)`(巧合也=24)改為衍生 → title 字級若改,slot 自動跟、不靠巧合(M17 SSOT;\n// 1.5 = typography.spec body 行高常數,非 token 故 inline,若 body 行高改 1.3 須同步此處)。\n// - Popover-tier(title = text-body)走 `COMPACT_HEADER_SLOT`(見下)= calc(--font-body-size×1.5) = 14×1.5 = 21\n// (= PopoverTitle text-body line-box,衍生非寫死;2026-06-16 從各自寫死 1.25rem/20 巧合值收斂進 SSOT)\n//\n// Header 永遠 padding-based(無 min-h),但因 slot = title line-box,header 高度由 title 主導:\n// - Dialog: max(24 title, 24 slot) + py-tight(122)= 48 ✓ chrome-header-height\n// - Popover: max(21 title, 21 slot) + py-tight(122)= 45 ✓ 自然輕量\n// Q10 穩定性:title-only / title+button / refresh in/out 全 case header 高度 = title + py(slot=title,不超過)\n//\n// 負 my 公式:(slot - native) / 2,density-aware:\n// Dialog md: (24 - 28) / 2 = -2px; lg: (24 - 32) / 2 = -4px\n// Popover md: (21 - 28) / 2 = -3.5px(sub-pixel,可接受)\nconst CHROME_UNBOUNDED_SLOT = '[&_[data-unbounded]]:my-[calc((var(--chrome-slot-h,calc(var(--font-body-lg-size)1.5))-var(--field-height-sm))/2)]'\n\n/*\n 輕量浮層 header 的 slot override —— SSOT,禁各自 inline(2026-06-16 收斂)。\n * Popover-tier header(title = PopoverTitle `text-body`)的 slot = body line-box = `calc(--font-body-size×1.5)` = 21,\n * 衍生自 title typography → title 字級改,slot 自動跟(取代舊各自寫死的 1.25rem / 20 巧合值)。\n * 消費者(同設計邏輯,皆 raw SurfaceHeader + PopoverTitle):PopoverHeader / DataTable sort·filter panel /\n * FileItem upload-manager。Default slot(Dialog/Sheet,title = text-body-lg)= 24,在 CHROME_UNBOUNDED_SLOT fallback。\n /\nexport const COMPACT_HEADER_SLOT = '[--chrome-slot-h:calc(var(--font-body-size)1.5)]'\n\nexport interface SurfaceHeaderProps\n extends React.HTMLAttributes<HTMLDivElement> {\n /*\n 是否內含 Tabs。\n * true(無 tabsSlot)→ 移除自身 border-b。\n * 若提供 tabsSlot,自動 column mode + auto suppress border(不需手動傳 withTabs=true)。\n * 對齊 patterns/header-canonical/header-canonical.spec.md W1\n * 「Header semantic owner / TabsList paint owner in withTabs state」。\n /\n withTabs?: boolean\n /\n Tabs row slot(2026-05-18 加 per header-canonical.spec.md W2/W4 真實能用 + user-mandated fix)。\n * 提供時 SurfaceHeader 自動 column 結構:\n * row 1 = children(title + actions/dismiss,px-loose py-tight)\n * row 2 = tabsSlot 包在 `HEADER_TABS_SLOT_WRAPPER_CLASS` wrapper(v4:wrapper 自身\n * 無 px / 無 border;`[&_[data-slot=tabs-list]]` 注入 px-loose,寬度 TabsList\n * 各 overflow 模式自帶,border-b 延展全寬 — W1 視覺一條線。\n * 詳 chrome-header.tsx HEADER_TABS_SLOT_WRAPPER_CLASS 註解)\n \n Consumer 傳:`tabsSlot={<TabsList>...</TabsList>}`,TabsContent 仍放 DialogBody 內。\n * `<Tabs>` root 必須 wrap 整 DialogContent(Radix TabsList ↔ TabsContent 同 root 連動)。\n \n 提供 tabsSlot 自動 withTabs=true,不需另傳 prop。\n /\n tabsSlot?: React.ReactNode\n}\n\nexport const SurfaceHeader = React.forwardRef<\n HTMLDivElement,\n SurfaceHeaderProps\n>(({ className, withTabs, tabsSlot, children, ...props }, ref) => {\n // tabsSlot 提供 → 自動 withTabs(consumer 不需手動兩個 prop)\n const hasTabs = tabsSlot != null \|\| withTabs === true\n\n // Column mode(tabsSlot 提供時)— 對應 header-canonical.spec.md W2 + W4\n if (tabsSlot != null) {\n return (\n <div\n ref={ref}\n className={cn('flex flex-col shrink-0', className)}\n {...props}\n >\n {/ Row 1:header content row(原 single-row behavior 不變,但 border-b 撤掉,row 2 wrapper 接管 paint)/}\n <div\n className={cn(\n 'flex items-center gap-2',\n 'px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]',\n CHROME_UNBOUNDED_SLOT,\n )}\n >\n {children}\n </div>\n {/ Row 2:tabsSlot wrapper — TabsList 全 dialog 寬 + 內 px-loose padding inset triggers\n 2026-05-18 v3 fix(user verbatim approval「你確定這樣是世界級的設計且符合我們一致的設計\n 語言和 SSOT...就這樣做」):\n - v1: wrapper border + TabsList border = 雙線(W1 違反)\n - v2: wrapper px-loose + TabsList w-full inside = border 只跨 dialog - 2×px-loose\n (不到 dialog 邊 user 抓「分隔線寬度應該要填滿整個 dialog」)\n - v3:wrapper 不 inset,TabsList 自己 px-loose 內 padding inset triggers\n → TabsList border-b 延展全 dialog 寬,triggers 對齊 header content\n - v4(2026-07-30):選取機制改 `data-slot=\"tabs-list\"` attribute contract\n (beta.86 overlay 包裹層破 direct-child;詳 chrome-header.tsx 註解)\n 對齊既有 `tabs.spec.md`「Underline 與 TabsList border 的視覺關係」段「selected 底線從\n TabsList 的 gray border 位置長出來」(token = border-divider,tabs.tsx TABS_LIST_BASE)\n + GitHub Primer UnderlineNav / Ant Design line type / Mantine default 共識\n (全派 TabsList 自畫 full-width underline)。*/}\n <div className={HEADER_TABS_SLOT_WRAPPER_CLASS}>\n {tabsSlot}\n </div>\n </div>\n )\n }\n\n // Padding-based(預設) — Dialog/Sheet 用 body-lg title (16/24)，自然撐 max(24 title, 24 button slot) = 24\n // → header = 24 + py-tight 12×2 = 48 chrome-header-height ✓ 穩定無需 min-h\n // Popover 等輕量 chrome 走 COMPACT_HEADER_SLOT(slot = calc(--font-body-size×1.5)=21 = title line-box,無 min-h / 無 py override)：max(21 title, 21 slot) + py-tight 12×2 = 45（見上方 L57）\n //\n // withTabs=true(無 tabsSlot,backward compat):移除 border-b,consumer 自畫\n return (\n <div\n ref={ref}\n className={cn(\n 'flex items-center gap-2 shrink-0',\n !hasTabs && 'border-b border-divider',\n 'px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]',\n CHROME_UNBOUNDED_SLOT,\n className,\n )}\n {...props}\n >\n {children}\n </div>\n )\n})\nSurfaceHeader.displayName = 'SurfaceHeader'\n\nexport const SurfaceBody = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n // 2026-05-04 viewport-aware scroll canonical:\n // parent(PopoverContent / HoverCardContent / Dialog / Sheet)是 flex flex-col + max-h + overflow-hidden\n // header / footer shrink-0;Body flex-1 min-h-0 overflow-y-auto → 視窗太小時 body 內 scroll\n // 非 flex-col parent 內 flex-1/min-h-0 no-op,backward compat\n <div\n ref={ref}\n className={cn(\n 'flex-1 min-h-0 overflow-y-auto',\n 'focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring',\n 'px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]',\n className,\n )}\n {...props}\n />\n))\nSurfaceBody.displayName = 'SurfaceBody'\n\nexport const SurfaceFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex items-center justify-end gap-2 shrink-0 border-t border-divider',\n 'px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]',\n className,\n )}\n {...props}\n />\n))\nSurfaceFooter.displayName = 'SurfaceFooter'\n"],"names":[],"mappings":";;;;AAmEA,MAAM,wBAAwB;AASvB,MAAM,sBAAsB;AA6B5B,MAAM,gBAAgB,MAAM,WAGjC,CAAC,EAAE,WAAW,UAAU,UAAU,UAAU,GAAG,MAAA,GAAS,QAAQ;AAEhE,QAAM,UAAU,YAAY,QAAQ,aAAa;AAGjD,MAAI,YAAY,MAAM;AACpB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,0BAA0B,SAAS;AAAA,QAChD,GAAG;AAAA,QAGJ,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cAGD;AAAA,YAAA;AAAA,UAAA;AAAA,UAgBH,oBAAC,OAAA,EAAI,WAAW,gCACb,UAAA,SAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAOA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,CAAC,WAAW;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AACD,cAAc,cAAc;AAErB,MAAM,cAAc,MAAM,WAG/B,CAAC,EAAE,WAAW,GAAG,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,EAK1B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAAA,CAEP;AACD,YAAY,cAAc;AAEnB,MAAM,gBAAgB,MAAM,WAGjC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AACD,cAAc,cAAc;"}

package/dist/patterns/resize-handle/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './resize-handle';
2	+ //# sourceMappingURL=index.d.ts.map

package/dist/patterns/resize-handle/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/resize-handle/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAA"}

package/dist/patterns/resize-handle/index.js ADDED Viewed

@@ -0,0 +1,5 @@
+import { ResizeHandle } from "./resize-handle.js";
+export {
+  ResizeHandle
+};
+//# sourceMappingURL=index.js.map

package/dist/patterns/resize-handle/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/patterns/resize-handle/resize-handle.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
 import * as React from 'react';
 /**
- * ResizeHandle — pattern primitive for drag-to-resize visual + a11y(2026-05-21 v1 ship per
+ * ResizeHandle — pattern primitive for drag-to-resize visual hit target(2026-05-21 v1 ship per
  * user「style 難道不用跟 data table column resize 維持 ssot」+「都照你建議做」approval)。
  *
  * ── 定位 ──
- * 統一所有 drag-resize affordance 的視覺 / cursor / 命中區 / a11y attributes。
+ * 統一所有 drag-resize affordance 的視覺 / cursor / 命中區。
  * Consumer 自管 drag math(TanStack column resize / Sidebar drag-resize / Aside drag-resize
  * 各有不同 width state pathway,本 primitive 不耦合)。
  *
@@ -30,13 +30,15 @@ import * as React from 'react';
  * - Figma left panel resize(8px hit zone + 1px line)
  *
  * 統一共識:hit zone ≥ 7px(fingertip-friendly)/ 1px visual line(non-intrusive)/
- * hover affordance(stronger line) / drag feedback(primary highlight) /
- * a11y `role="separator"` + `aria-orientation` + 描述性 aria-label。
+ * hover affordance(stronger line) / drag feedback(primary highlight)。
+ *
+ * 本 primitive 目前只有 pointer drag visual/hit target，沒有 keyboard/value/controls contract；
+ * 因此固定從 accessibility tree 隱藏，不冒充 WAI-ARIA separator/window-splitter widget。
  */
-export interface ResizeHandleProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'role'> {
+export interface ResizeHandleProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'role' | 'aria-hidden' | 'aria-label' | 'aria-orientation'> {
     /**
      * Drag 方向。`horizontal` = 拖拉左右(column resize / sidebar width);
-     * `vertical` = 拖拉上下(row resize / panel height)。決定 cursor + aria-orientation。
+     * `vertical` = 拖拉上下(row resize / panel height)。決定 cursor。
      */
     direction: 'horizontal' | 'vertical';
     /**
@@ -51,11 +53,9 @@ export interface ResizeHandleProps extends Omit<React.HTMLAttributes<HTMLSpanEle
     isResizing?: boolean;
     /**
      * 是否禁用拖拉。consumer 透過 col / panel 的 resizable flag 決定。
-     * 禁用時不 render cursor + 不 attach a11y role。
+     * 禁用時不 render cursor；元件所有狀態皆固定 aria-hidden。
      */
     disabled?: boolean;
-    /** a11y 描述性 label。consumer 必傳(eg. 「拖曳調整欄寬」/「拖曳調整側欄寬度」)。 */
-    'aria-label': string;
     /**
      * 是否畫 visual line(1px divider)。`false` = consumer 已 paint(eg. DataTable panel
      * boundary col by panel-r 接管,不重複)。Default `true`。
@@ -79,7 +79,6 @@ export interface ResizeHandleProps extends Omit<React.HTMLAttributes<HTMLSpanEle
  *   position="end"
  *   isResizing={header.column.getIsResizing?.()}
  *   disabled={!isResizable}
- *   aria-label="拖曳調整欄寬"
  *   onPointerDownCapture={(e) => {
  *     e.stopPropagation()
  *     header.getResizeHandler?.()(e.nativeEvent)
@@ -93,7 +92,6 @@ export interface ResizeHandleProps extends Omit<React.HTMLAttributes<HTMLSpanEle
  *   direction="horizontal"
  *   position="end"
  *   isResizing={isDragging}
- *   aria-label="拖曳調整側欄寬度"
  *   onPointerDown={startDrag}
  * />
  * ```

package/dist/patterns/resize-handle/resize-handle.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"resize-handle.d.ts","sourceRoot":"","sources":["../../../src/patterns/resize-handle/resize-handle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG~~;AACH,MAAM,WAAW,~~iBAAkB~~,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;~~IAC5F~~;;;OAGG;IACH,SAAS,EAAE,YAAY,GAAG,UAAU,CAAA;IACpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB~~,2DAA2D;IAC3D,YAAY,EAAE,MAAM,CAAA;IACpB~~;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG~~;AACH,eAAO,MAAM,YAAY,~~2FAmFxB~~,CAAA"}
1	+ {"version":3,"file":"resize-handle.d.ts","sourceRoot":"","sources":["../../../src/patterns/resize-handle/resize-handle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,YAAY,GAAG,kBAAkB,CAAC;IAC/G;;;OAGG;IACH,SAAS,EAAE,YAAY,GAAG,UAAU,CAAA;IACpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,YAAY,2FA+ExB,CAAA"}

package/dist/patterns/resize-handle/resize-handle.js CHANGED Viewed

@@ -14,7 +14,6 @@ const ResizeHandle = React.forwardRef(
     ...props
   }, ref) => {
     const isHorizontal = direction === "horizontal";
-    const ariaOrientation = isHorizontal ? "vertical" : "horizontal";
     const hitZoneStyle = isHorizontal ? {
       position: "absolute",
       top: 0,
@@ -44,17 +43,15 @@ const ResizeHandle = React.forwardRef(
       right: lineInsetEnd ?? 0,
       ...position === "end" ? { bottom: 3 } : { top: 3 }
     };
-    const { "aria-label": ariaLabel, style: extraStyle, ...restProps } = props;
+    const { style: extraStyle, ...restProps } = props;
     return /* @__PURE__ */ jsx(
       "span",
       {
         ref,
-        role: disabled ? void 0 : "separator",
-        "aria-orientation": disabled ? void 0 : ariaOrientation,
-        "aria-label": disabled ? void 0 : ariaLabel,
+        ...restProps,
+        "aria-hidden": "true",
         style: { ...hitZoneStyle, ...extraStyle },
         className: cn("group/resize", !disabled && "select-none", className),
-        ...restProps,
         children: showLine && /* @__PURE__ */ jsx(
           "span",
           {

package/dist/patterns/resize-handle/resize-handle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"resize-handle.js","sources":["../../../src/patterns/resize-handle/resize-handle.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\n/*\n ResizeHandle — pattern primitive for drag-to-resize visual + ~~a11y~~(2026-05-21 v1 ship per\n * user「style 難道不用跟 data table column resize 維持 ssot」+「都照你建議做」approval)。\n \n ── 定位 ──\n * 統一所有 drag-resize affordance 的視覺 / cursor / ~~命中區 / a11y attributes。\~~n * Consumer 自管 drag math(TanStack column resize / Sidebar drag-resize / Aside drag-resize\n * 各有不同 width state pathway,本 primitive 不耦合)。\n \n Consumers(roadmap per spec.md):\n * - Phase 1(本 commit):primitive ship,DataTable / Sidebar / Aside 尚未 migrate\n * - Phase 2(future):DataTable column resize migrate(TanStack `header.getResizeHandler()` 接入)\n * - Phase 3(future):Sidebar drag-resize enable\n * - Phase 4(future):AppShell Aside drag-resize enable\n \n ── 實作基礎 ──\n * 視覺對齊 DataTable column resize 既有 canonical(7px 命中區 + 1px line + cursor:col-resize\n * + hover border-hover + dragging primary)。direction='vertical' 同 idiom 軸換 row-resize。\n \n ── 消費的 SSOT ──\n * - tokens: [--border-hover, --divider, --primary, --table-cell-py(只 DataTable consumer 用)]\n * - patterns: none(self-contained primitive)\n \n ── World-class 對照 ──\n * - AG Grid column resize handle(7-8px hit zone + 1px line)\n * - Material X-DataGrid `MuiDataGrid-iconSeparator`(同 visual idiom)\n * - Notion column / sidebar resize handle(同 cursor + line + hover affordance)\n * - VS Code activity bar / sidebar resize(8px hit zone + bg highlight on drag)\n * - Figma left panel resize(8px hit zone + 1px line)\n \n 統一共識:hit zone ≥ 7px(fingertip-friendly)/ 1px visual line(non-intrusive)/\n * hover affordance(stronger line) / drag feedback(primary highlight) /\n * ~~a11y~~ ~~`role=\"separator\"`~~ + ~~`aria-orientation`~~ + ~~描述性~~ ~~aria~~-~~label~~。\n /\nexport interface ResizeHandleProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'role'> {\n /\n Drag 方向。`horizontal` = 拖拉左右(column resize / sidebar width);\n * `vertical` = 拖拉上下(row resize / panel height)。決定 cursor ~~+ aria-orientation~~。\n /\n direction: 'horizontal' \| 'vertical'\n /\n 命中區相對於容器位置。`end` = 右側(column right edge / sidebar right edge);\n * `start` = 左側(較少用);`vertical` direction 同邏輯:end=bottom / start=top。\n /\n position?: 'start' \| 'end'\n /\n 是否處於拖拉中。consumer 自管(eg. `header.column.getIsResizing?.()` for TanStack /\n * `isDragging` boolean for sidebar)。primary 色 highlight feedback。\n /\n isResizing?: boolean\n /\n 是否禁用拖拉。consumer 透過 col / panel 的 resizable flag 決定。\n * 禁用時不 render cursor ~~+ 不 attach a11y role~~。\n /\n disabled?: boolean\n ~~/* a11y 描述性 label。consumer 必傳(eg. 「拖曳調整欄寬」/「拖曳調整側欄寬度」)。 /\n 'aria-label': string\n~~ /\n 是否畫 visual line(1px divider)。`false` = consumer 已 paint(eg. DataTable panel\n * boundary col by panel-r 接管,不重複)。Default `true`。\n /\n showLine?: boolean\n /\n Vertical line `top` / `bottom` inset(只 direction='horizontal' 用)。Default 0\n * (full-height line)。DataTable 用 `var(--table-cell-py)` 縮到 cell padding 內(cell-fit line)。\n /\n lineInsetStart?: string\n /* 同上 inset 對位(bottom)。 /\n lineInsetEnd?: string\n}\n\n/\n Primitive consumer pattern:\n \n ```tsx\n * // DataTable column resize(future Phase 2 migrate sample)\n * <ResizeHandle\n * direction=\"horizontal\"\n * position=\"end\"\n * isResizing={header.column.getIsResizing?.()}\n * disabled={!isResizable}\n * aria-label=\"拖曳調整欄寬\"\n * onPointerDownCapture={(e) => {\n * e.stopPropagation()\n * header.getResizeHandler?.()(e.nativeEvent)\n * }}\n * lineInsetStart=\"var(--table-cell-py)\"\n * lineInsetEnd=\"var(--table-cell-py)\"\n * />\n \n // Sidebar drag-resize(future Phase 3 sample)\n * <ResizeHandle\n * direction=\"horizontal\"\n * position=\"end\"\n * isResizing={isDragging}\n * aria-label=\"拖曳調整側欄寬度\"\n * onPointerDown={startDrag}\n * />\n * ```\n */\nexport const ResizeHandle = React.forwardRef<HTMLSpanElement, ResizeHandleProps>(\n (\n {\n direction,\n position = 'end',\n isResizing,\n disabled,\n showLine = true,\n lineInsetStart,\n lineInsetEnd,\n className,\n ...props\n },\n ref,\n ) => {\n const isHorizontal = direction === 'horizontal'\n ~~const ariaOrientation = isHorizontal ? 'vertical' : 'horizontal' // separator's axis is perpendicular to drag~~\n\n // 命中區用 inline style 而非 Tailwind arbitrary values(避免 Tailwind v4 JIT 對新增 arbitrary\n // class 在 dev mode 不更新 stylesheet 的 quirk;7px 是 primitive constant 非 token,inline 妥當)。\n const hitZoneStyle: React.CSSProperties = isHorizontal\n ? {\n position: 'absolute',\n top: 0,\n bottom: 0,\n width: 7,\n ...(position === 'end' ? { right: 0, marginRight: -3 } : { left: 0, marginLeft: -3 }),\n cursor: disabled ? undefined : 'col-resize',\n }\n : {\n position: 'absolute',\n left: 0,\n right: 0,\n height: 7,\n ...(position === 'end' ? { bottom: 0, marginBottom: -3 } : { top: 0, marginTop: -3 }),\n cursor: disabled ? undefined : 'row-resize',\n }\n\n // Visual line — 1px,position 端對齊。dragging=primary / hover=border-hover / idle=divider\n const lineColorClass = isResizing\n ? 'bg-primary'\n : disabled\n ? 'bg-divider'\n : 'bg-divider group-hover/resize:bg-[var(--border-hover)]'\n\n const lineStyle: React.CSSProperties = isHorizontal\n ? {\n position: 'absolute',\n width: 1,\n top: lineInsetStart ?? 0,\n bottom: lineInsetEnd ?? 0,\n ...(position === 'end' ? { right: 3 } : { left: 3 }),\n }\n : {\n position: 'absolute',\n height: 1,\n left: lineInsetStart ?? 0,\n right: lineInsetEnd ?? 0,\n ...(position === 'end' ? { bottom: 3 } : { top: 3 }),\n }\n\n ~~// 抽 aria-label / style 由我們管,其他 ...props 不重複\n~~ const { ~~'aria-label': ariaLabel,~~ style: extraStyle, ...restProps } = props\n return (\n <span\n ref={ref}\n ~~role=~~{~~disabled ? undefined : 'separator'~~}\n aria-~~orientation={disabled ? undefined : ariaOrientation}~~\~~n aria-label={disabled ? undefined : ariaLabel}~~\n style={{ ...hitZoneStyle, ...extraStyle }}\n className={cn('group/resize', !disabled && 'select-none', className)}\n ~~{...restProps}\n~~ >\n {showLine && (\n <span\n aria-hidden\n className={cn('transition-colors', lineColorClass)}\n style={lineStyle}\n />\n )}\n </span>\n )\n },\n)\nResizeHandle.displayName = 'ResizeHandle'\n"],"names":[],"mappings":";;;~~AAuGO~~,MAAM,eAAe,MAAM;AAAA,EAChC,CACE;AAAA,IACE;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAe,cAAc;~~AACnC~~,UAAM,~~kBAAkB,eAAe,aAAa;AAIpD,UAAM,~~eAAoC,eACtC;AAAA,MACE,UAAU;AAAA,MACV,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,GAAI,aAAa,QAAQ,EAAE,OAAO,GAAG,aAAa,GAAA,IAAO,EAAE,MAAM,GAAG,YAAY,GAAA;AAAA,MAChF,QAAQ,WAAW,SAAY;AAAA,IAAA,IAEjC;AAAA,MACE,UAAU;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,GAAI,aAAa,QAAQ,EAAE,QAAQ,GAAG,cAAc,GAAA,IAAO,EAAE,KAAK,GAAG,WAAW,GAAA;AAAA,MAChF,QAAQ,WAAW,SAAY;AAAA,IAAA;AAIrC,UAAM,iBAAiB,aACnB,eACA,WACE,eACA;AAEN,UAAM,YAAiC,eACnC;AAAA,MACE,UAAU;AAAA,MACV,OAAO;AAAA,MACP,KAAK,kBAAkB;AAAA,MACvB,QAAQ,gBAAgB;AAAA,MACxB,GAAI,aAAa,QAAQ,EAAE,OAAO,EAAA,IAAM,EAAE,MAAM,EAAA;AAAA,IAAE,IAEpD;AAAA,MACE,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM,kBAAkB;AAAA,MACxB,OAAO,gBAAgB;AAAA,MACvB,GAAI,aAAa,QAAQ,EAAE,QAAQ,EAAA,IAAM,EAAE,KAAK,EAAA;AAAA,IAAE;~~AAIxD~~,UAAM,EAAE,~~cAAc,WAAW,~~OAAO,YAAY,GAAG,cAAc;~~AACrE~~,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,~~QACA~~,~~MAAM,WAAW,SAAY~~;AAAA,~~QAC7B~~,~~oBAAkB,WAAW,SAAY~~;AAAA,~~QACzC~~,~~cAAY,WAAW,SAAY;AAAA,QACnC,~~OAAO,EAAE,GAAG,cAAc,GAAG,WAAA;AAAA,QAC7B,WAAW,GAAG,gBAAgB,CAAC,YAAY,eAAe,SAAS;AAAA,~~QAClE~~,~~GAAG;AAAA,QAEH,~~UAAA,YACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAW;AAAA,YACX,WAAW,GAAG,qBAAqB,cAAc;AAAA,YACjD,OAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MACT;AAAA,IAAA;AAAA,EAIR;AACF;AACA,aAAa,cAAc;"}
1	+ {"version":3,"file":"resize-handle.js","sources":["../../../src/patterns/resize-handle/resize-handle.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\n/*\n ResizeHandle — pattern primitive for drag-to-resize visual hit target(2026-05-21 v1 ship per\n * user「style 難道不用跟 data table column resize 維持 ssot」+「都照你建議做」approval)。\n \n ── 定位 ──\n * 統一所有 drag-resize affordance 的視覺 / cursor / 命中區。\n * Consumer 自管 drag math(TanStack column resize / Sidebar drag-resize / Aside drag-resize\n * 各有不同 width state pathway,本 primitive 不耦合)。\n \n Consumers(roadmap per spec.md):\n * - Phase 1(本 commit):primitive ship,DataTable / Sidebar / Aside 尚未 migrate\n * - Phase 2(future):DataTable column resize migrate(TanStack `header.getResizeHandler()` 接入)\n * - Phase 3(future):Sidebar drag-resize enable\n * - Phase 4(future):AppShell Aside drag-resize enable\n \n ── 實作基礎 ──\n * 視覺對齊 DataTable column resize 既有 canonical(7px 命中區 + 1px line + cursor:col-resize\n * + hover border-hover + dragging primary)。direction='vertical' 同 idiom 軸換 row-resize。\n \n ── 消費的 SSOT ──\n * - tokens: [--border-hover, --divider, --primary, --table-cell-py(只 DataTable consumer 用)]\n * - patterns: none(self-contained primitive)\n \n ── World-class 對照 ──\n * - AG Grid column resize handle(7-8px hit zone + 1px line)\n * - Material X-DataGrid `MuiDataGrid-iconSeparator`(同 visual idiom)\n * - Notion column / sidebar resize handle(同 cursor + line + hover affordance)\n * - VS Code activity bar / sidebar resize(8px hit zone + bg highlight on drag)\n * - Figma left panel resize(8px hit zone + 1px line)\n \n 統一共識:hit zone ≥ 7px(fingertip-friendly)/ 1px visual line(non-intrusive)/\n * hover affordance(stronger line) / drag feedback(primary highlight)。\n \n 本 primitive 目前只有 pointer drag visual/hit target，沒有 keyboard/value/controls contract；\n * 因此固定從 accessibility tree 隱藏，不冒充 WAI-ARIA separator/window-splitter widget。\n /\nexport interface ResizeHandleProps\n extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'role' \| 'aria-hidden' \| 'aria-label' \| 'aria-orientation'> {\n /\n Drag 方向。`horizontal` = 拖拉左右(column resize / sidebar width);\n * `vertical` = 拖拉上下(row resize / panel height)。決定 cursor。\n /\n direction: 'horizontal' \| 'vertical'\n /\n 命中區相對於容器位置。`end` = 右側(column right edge / sidebar right edge);\n * `start` = 左側(較少用);`vertical` direction 同邏輯:end=bottom / start=top。\n /\n position?: 'start' \| 'end'\n /\n 是否處於拖拉中。consumer 自管(eg. `header.column.getIsResizing?.()` for TanStack /\n * `isDragging` boolean for sidebar)。primary 色 highlight feedback。\n /\n isResizing?: boolean\n /\n 是否禁用拖拉。consumer 透過 col / panel 的 resizable flag 決定。\n * 禁用時不 render cursor；元件所有狀態皆固定 aria-hidden。\n /\n disabled?: boolean\n /\n 是否畫 visual line(1px divider)。`false` = consumer 已 paint(eg. DataTable panel\n * boundary col by panel-r 接管,不重複)。Default `true`。\n /\n showLine?: boolean\n /\n Vertical line `top` / `bottom` inset(只 direction='horizontal' 用)。Default 0\n * (full-height line)。DataTable 用 `var(--table-cell-py)` 縮到 cell padding 內(cell-fit line)。\n /\n lineInsetStart?: string\n /* 同上 inset 對位(bottom)。 /\n lineInsetEnd?: string\n}\n\n/\n Primitive consumer pattern:\n \n ```tsx\n * // DataTable column resize(future Phase 2 migrate sample)\n * <ResizeHandle\n * direction=\"horizontal\"\n * position=\"end\"\n * isResizing={header.column.getIsResizing?.()}\n * disabled={!isResizable}\n * onPointerDownCapture={(e) => {\n * e.stopPropagation()\n * header.getResizeHandler?.()(e.nativeEvent)\n * }}\n * lineInsetStart=\"var(--table-cell-py)\"\n * lineInsetEnd=\"var(--table-cell-py)\"\n * />\n \n // Sidebar drag-resize(future Phase 3 sample)\n * <ResizeHandle\n * direction=\"horizontal\"\n * position=\"end\"\n * isResizing={isDragging}\n * onPointerDown={startDrag}\n * />\n * ```\n */\nexport const ResizeHandle = React.forwardRef<HTMLSpanElement, ResizeHandleProps>(\n (\n {\n direction,\n position = 'end',\n isResizing,\n disabled,\n showLine = true,\n lineInsetStart,\n lineInsetEnd,\n className,\n ...props\n },\n ref,\n ) => {\n const isHorizontal = direction === 'horizontal'\n\n // 命中區用 inline style 而非 Tailwind arbitrary values(避免 Tailwind v4 JIT 對新增 arbitrary\n // class 在 dev mode 不更新 stylesheet 的 quirk;7px 是 primitive constant 非 token,inline 妥當)。\n const hitZoneStyle: React.CSSProperties = isHorizontal\n ? {\n position: 'absolute',\n top: 0,\n bottom: 0,\n width: 7,\n ...(position === 'end' ? { right: 0, marginRight: -3 } : { left: 0, marginLeft: -3 }),\n cursor: disabled ? undefined : 'col-resize',\n }\n : {\n position: 'absolute',\n left: 0,\n right: 0,\n height: 7,\n ...(position === 'end' ? { bottom: 0, marginBottom: -3 } : { top: 0, marginTop: -3 }),\n cursor: disabled ? undefined : 'row-resize',\n }\n\n // Visual line — 1px,position 端對齊。dragging=primary / hover=border-hover / idle=divider\n const lineColorClass = isResizing\n ? 'bg-primary'\n : disabled\n ? 'bg-divider'\n : 'bg-divider group-hover/resize:bg-[var(--border-hover)]'\n\n const lineStyle: React.CSSProperties = isHorizontal\n ? {\n position: 'absolute',\n width: 1,\n top: lineInsetStart ?? 0,\n bottom: lineInsetEnd ?? 0,\n ...(position === 'end' ? { right: 3 } : { left: 3 }),\n }\n : {\n position: 'absolute',\n height: 1,\n left: lineInsetStart ?? 0,\n right: lineInsetEnd ?? 0,\n ...(position === 'end' ? { bottom: 3 } : { top: 3 }),\n }\n\n const { style: extraStyle, ...restProps } = props\n return (\n <span\n ref={ref}\n {...restProps}\n aria-hidden=\"true\"\n style={{ ...hitZoneStyle, ...extraStyle }}\n className={cn('group/resize', !disabled && 'select-none', className)}\n >\n {showLine && (\n <span\n aria-hidden\n className={cn('transition-colors', lineColorClass)}\n style={lineStyle}\n />\n )}\n </span>\n )\n },\n)\nResizeHandle.displayName = 'ResizeHandle'\n"],"names":[],"mappings":";;;AAsGO,MAAM,eAAe,MAAM;AAAA,EAChC,CACE;AAAA,IACE;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAe,cAAc;AAInC,UAAM,eAAoC,eACtC;AAAA,MACE,UAAU;AAAA,MACV,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,GAAI,aAAa,QAAQ,EAAE,OAAO,GAAG,aAAa,GAAA,IAAO,EAAE,MAAM,GAAG,YAAY,GAAA;AAAA,MAChF,QAAQ,WAAW,SAAY;AAAA,IAAA,IAEjC;AAAA,MACE,UAAU;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,GAAI,aAAa,QAAQ,EAAE,QAAQ,GAAG,cAAc,GAAA,IAAO,EAAE,KAAK,GAAG,WAAW,GAAA;AAAA,MAChF,QAAQ,WAAW,SAAY;AAAA,IAAA;AAIrC,UAAM,iBAAiB,aACnB,eACA,WACE,eACA;AAEN,UAAM,YAAiC,eACnC;AAAA,MACE,UAAU;AAAA,MACV,OAAO;AAAA,MACP,KAAK,kBAAkB;AAAA,MACvB,QAAQ,gBAAgB;AAAA,MACxB,GAAI,aAAa,QAAQ,EAAE,OAAO,EAAA,IAAM,EAAE,MAAM,EAAA;AAAA,IAAE,IAEpD;AAAA,MACE,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM,kBAAkB;AAAA,MACxB,OAAO,gBAAgB;AAAA,MACvB,GAAI,aAAa,QAAQ,EAAE,QAAQ,EAAA,IAAM,EAAE,KAAK,EAAA;AAAA,IAAE;AAGxD,UAAM,EAAE,OAAO,YAAY,GAAG,cAAc;AAC5C,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ,eAAY;AAAA,QACZ,OAAO,EAAE,GAAG,cAAc,GAAG,WAAA;AAAA,QAC7B,WAAW,GAAG,gBAAgB,CAAC,YAAY,eAAe,SAAS;AAAA,QAElE,UAAA,YACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAW;AAAA,YACX,WAAW,GAAG,qBAAqB,cAAc;AAAA,YACjD,OAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MACT;AAAA,IAAA;AAAA,EAIR;AACF;AACA,aAAa,cAAc;"}