@qijenchen/design-system 0.1.0-beta.3 → 0.1.0-beta.32

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

@@ -0,0 +1,85 @@
+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)]";
+const SurfaceHeader = React.forwardRef(({ className, withTabs, tabsSlot, children, ...props }, ref) => {
+  const hasTabs = tabsSlot != null || withTabs === true;
+  if (tabsSlot != null) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col shrink-0", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex items-center gap-2",
+                "px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]",
+                CHROME_UNBOUNDED_SLOT
+              ),
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "[&>[role=tablist]]:w-full [&>[role=tablist]]:px-[var(--layout-space-loose)]", children: tabsSlot })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex items-center gap-2 shrink-0",
+        !hasTabs && "border-b border-divider",
+        "px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]",
+        CHROME_UNBOUNDED_SLOT,
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+SurfaceHeader.displayName = "SurfaceHeader";
+const SurfaceBody = React.forwardRef(({ className, ...props }, ref) => (
+  // 2026-05-04 viewport-aware scroll canonical:
+  //   parent(PopoverContent / HoverCardContent / Dialog / Sheet)是 flex flex-col + max-h + overflow-hidden
+  //   header / footer shrink-0;Body flex-1 min-h-0 overflow-y-auto → 視窗太小時 body 內 scroll
+  //   非 flex-col parent 內 flex-1/min-h-0 no-op,backward compat
+  /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex-1 min-h-0 overflow-y-auto",
+        "px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]",
+        className
+      ),
+      ...props
+    }
+  )
+));
+SurfaceBody.displayName = "SurfaceBody";
+const SurfaceFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex items-center justify-end gap-2 shrink-0 border-t border-divider",
+      "px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]",
+      className
+    ),
+    ...props
+  }
+));
+SurfaceFooter.displayName = "SurfaceFooter";
+export {
+  SurfaceBody,
+  SurfaceFooter,
+  SurfaceHeader
+};
+//# sourceMappingURL=overlay-surface.js.map

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

@@ -0,0 +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(12*2)= 48 ✓ chrome-header-height\n//   - Popover: max(21 title, 20 slot) + py-tight(12*2)= 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;"}

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

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

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

@@ -0,0 +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

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

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

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

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

@@ -0,0 +1,102 @@
+import * as React from 'react';
+/**
+ * ResizeHandle — pattern primitive for drag-to-resize visual + a11y(2026-05-21 v1 ship per
+ * user「style 難道不用跟 data table column resize 維持 ssot」+「都照你建議做」approval)。
+ *
+ * ── 定位 ──
+ * 統一所有 drag-resize affordance 的視覺 / cursor / 命中區 / a11y attributes。
+ * Consumer 自管 drag math(TanStack column resize / Sidebar drag-resize / Aside drag-resize
+ * 各有不同 width state pathway,本 primitive 不耦合)。
+ *
+ * Consumers(roadmap per spec.md):
+ * - Phase 1(本 commit):primitive ship,DataTable / Sidebar / Aside 尚未 migrate
+ * - Phase 2(future):DataTable column resize migrate(TanStack `header.getResizeHandler()` 接入)
+ * - Phase 3(future):Sidebar drag-resize enable
+ * - Phase 4(future):AppShell Aside drag-resize enable
+ *
+ * ── 實作基礎 ──
+ * 視覺對齊 DataTable column resize 既有 canonical(7px 命中區 + 1px line + cursor:col-resize
+ * + hover border-hover + dragging primary)。direction='vertical' 同 idiom 軸換 row-resize。
+ *
+ * ── 消費的 SSOT ──
+ * - tokens: [--border-hover, --divider, --primary, --table-cell-py(只 DataTable consumer 用)]
+ * - patterns: none(self-contained primitive)
+ *
+ * ── World-class 對照 ──
+ * - AG Grid column resize handle(7-8px hit zone + 1px line)
+ * - Material X-DataGrid `MuiDataGrid-iconSeparator`(同 visual idiom)
+ * - Notion column / sidebar resize handle(同 cursor + line + hover affordance)
+ * - VS Code activity bar / sidebar resize(8px hit zone + bg highlight on drag)
+ * - 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。
+ */
+export interface ResizeHandleProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'role'> {
+    /**
+     * Drag 方向。`horizontal` = 拖拉左右(column resize / sidebar width);
+     * `vertical` = 拖拉上下(row resize / panel height)。決定 cursor + aria-orientation。
+     */
+    direction: 'horizontal' | 'vertical';
+    /**
+     * 命中區相對於容器位置。`end` = 右側(column right edge / sidebar right edge);
+     * `start` = 左側(較少用);`vertical` direction 同邏輯:end=bottom / start=top。
+     */
+    position?: 'start' | 'end';
+    /**
+     * 是否處於拖拉中。consumer 自管(eg. `header.column.getIsResizing?.()` for TanStack /
+     * `isDragging` boolean for sidebar)。primary 色 highlight feedback。
+     */
+    isResizing?: boolean;
+    /**
+     * 是否禁用拖拉。consumer 透過 col / panel 的 resizable flag 決定。
+     * 禁用時不 render cursor + 不 attach a11y role。
+     */
+    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`。
+     */
+    showLine?: boolean;
+    /**
+     * Vertical line `top` / `bottom` inset(只 direction='horizontal' 用)。Default 0
+     * (full-height line)。DataTable 用 `var(--table-cell-py)` 縮到 cell padding 內(cell-fit line)。
+     */
+    lineInsetStart?: string;
+    /** 同上 inset 對位(bottom)。 */
+    lineInsetEnd?: string;
+}
+/**
+ * Primitive consumer pattern:
+ *
+ * ```tsx
+ * // DataTable column resize(future Phase 2 migrate sample)
+ * <ResizeHandle
+ *   direction="horizontal"
+ *   position="end"
+ *   isResizing={header.column.getIsResizing?.()}
+ *   disabled={!isResizable}
+ *   aria-label="拖曳調整欄寬"
+ *   onPointerDownCapture={(e) => {
+ *     e.stopPropagation()
+ *     header.getResizeHandler?.()(e.nativeEvent)
+ *   }}
+ *   lineInsetStart="var(--table-cell-py)"
+ *   lineInsetEnd="var(--table-cell-py)"
+ * />
+ *
+ * // Sidebar drag-resize(future Phase 3 sample)
+ * <ResizeHandle
+ *   direction="horizontal"
+ *   position="end"
+ *   isResizing={isDragging}
+ *   aria-label="拖曳調整側欄寬度"
+ *   onPointerDown={startDrag}
+ * />
+ * ```
+ */
+export declare const ResizeHandle: React.ForwardRefExoticComponent<ResizeHandleProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=resize-handle.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,74 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const ResizeHandle = React.forwardRef(
+  ({
+    direction,
+    position = "end",
+    isResizing,
+    disabled,
+    showLine = true,
+    lineInsetStart,
+    lineInsetEnd,
+    className,
+    ...props
+  }, ref) => {
+    const isHorizontal = direction === "horizontal";
+    const ariaOrientation = isHorizontal ? "vertical" : "horizontal";
+    const hitZoneStyle = isHorizontal ? {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      width: 7,
+      ...position === "end" ? { right: 0, marginRight: -3 } : { left: 0, marginLeft: -3 },
+      cursor: disabled ? void 0 : "col-resize"
+    } : {
+      position: "absolute",
+      left: 0,
+      right: 0,
+      height: 7,
+      ...position === "end" ? { bottom: 0, marginBottom: -3 } : { top: 0, marginTop: -3 },
+      cursor: disabled ? void 0 : "row-resize"
+    };
+    const lineColorClass = isResizing ? "bg-primary" : disabled ? "bg-divider" : "bg-divider group-hover/resize:bg-[var(--border-hover)]";
+    const lineStyle = isHorizontal ? {
+      position: "absolute",
+      width: 1,
+      top: lineInsetStart ?? 0,
+      bottom: lineInsetEnd ?? 0,
+      ...position === "end" ? { right: 3 } : { left: 3 }
+    } : {
+      position: "absolute",
+      height: 1,
+      left: lineInsetStart ?? 0,
+      right: lineInsetEnd ?? 0,
+      ...position === "end" ? { bottom: 3 } : { top: 3 }
+    };
+    const { "aria-label": ariaLabel, 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,
+        style: { ...hitZoneStyle, ...extraStyle },
+        className: cn("group/resize", !disabled && "select-none", className),
+        ...restProps,
+        children: showLine && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn("transition-colors", lineColorClass),
+            style: lineStyle
+          }
+        )
+      }
+    );
+  }
+);
+ResizeHandle.displayName = "ResizeHandle";
+export {
+  ResizeHandle
+};
+//# sourceMappingURL=resize-handle.js.map

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

@@ -0,0 +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;"}