@qijenchen/design-system 0.1.0-beta.10

package/dist/components/Field/field-context.d.ts

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import type { FieldMode, FieldVariant } from './field-types';
+export type { FieldMode, FieldVariant };
+export type FieldOrientation = 'vertical' | 'horizontal';
+export type FieldSize = 'sm' | 'md' | 'lg';
+export type FieldControlLayout = 'inline' | 'block';
+/**
+ * Field surface(2026-05-12 codex Q2 verdict — Stream C 4-issues Cluster B fix):
+ * 替代散落的 `variant === 'naked'` 判 cell heuristic,讓 Field family components
+ * 顯式 query「我在哪 surface」derive cell-specific padding / alignment / overflow。
+ *
+ * - `'form'`(default)— Standalone Field control(對齊 Polaris / Material Form idiom)
+ * - `'toolbar'`— Toolbar / Action bar inline Field(future,目前無 consumer)
+ * - `'table-cell'`— DataTable cell-as-input substrate(取代 variant='naked' cell-detection
+ *   heuristic;canonical metrics 由 surface 推導,不再 hardcode in Field consumer)
+ */
+type FieldSurface = 'form' | 'toolbar' | 'table-cell';
+export interface FieldContextValue {
+    id: string;
+    /** a11y(2026-04-25):FieldLabel 渲染時若元素為 div-based role(combobox/slider
+     * 等非 native form control),`<label for>` 無效,需 aria-labelledby 指向 labelId。
+     * FieldLabel 自動設 id={labelId},下游 control 可讀此值寫入 aria-labelledby。 */
+    labelId: string;
+    descriptionId: string;
+    errorId: string;
+    mode: FieldMode;
+    /** 視覺外殼透傳(2026-05-05)。default = 含 border+bg;bare = 透明 variant,hover/focus reveal。
+     *  child Field control 自動繼承,per-control prop override 可覆寫。詳 field-types.ts。 */
+    variant: FieldVariant;
+    disabled: boolean;
+    required: boolean;
+    invalid: boolean;
+    size: FieldSize;
+    orientation: FieldOrientation;
+    controlLayout: FieldControlLayout;
+    hasFieldWrapper: true;
+    /** 2026-05-12 Stream C Cluster B fix:surface 上下文(form / toolbar / table-cell)
+     *  從 host(Field wrapper / DataTable cell registry)propagate 給 child controls。
+     *  Optional — 未設視同 `'form'`(backward compat)。 */
+    surface?: FieldSurface;
+}
+export declare const FieldContext: React.Context<FieldContextValue | null>;
+/** 讓 primitive（Checkbox/Switch/Radio/Button/Input 等）讀 Field context */
+export declare function useFieldContext(): FieldContextValue | null;
+/**
+ * Helper: 取當前 surface,fall back 'form'。
+ *
+ * Stream C Cluster B canonical entry point — Field family controls 用此 helper 替代
+ * 散落的 `variant === 'naked'` cell heuristic。對齊 codex Q2 verdict「surface context」
+ * canonical(替代「inCellContext per-prop」反 pattern)。
+ *
+ * 優先順序:FieldSurfaceContext(host-provided) → FieldContext.surface(Field-wrapper-provided)
+ *           → fallback 'form'。
+ */
+export declare function useFieldSurface(): FieldSurface;
+/**
+ * Standalone FieldSurface provider — 給 host(non-Field-wrapper, 如 DataTable cell)
+ * **僅**設 surface signal,**不**污染 FieldContext。
+ *
+ * Usage(per cell-registry.tsx,2026-05-12):
+ *   <FieldSurfaceProvider surface="table-cell"><Field control /></FieldSurfaceProvider>
+ *
+ * 與 FieldContext.Provider 差別:
+ *   - FieldContext.Provider — 完整 Field wrapper 用,provides mode/variant/disabled/...
+ *   - FieldSurfaceProvider — host **僅**注 surface signal,Field controls 透過
+ *     `useFieldSurface()` 讀;`useFieldContext()` 仍 returns null(沒被假冒)。
+ */
+export declare function FieldSurfaceProvider({ surface, children, }: {
+    surface: FieldSurface;
+    children: React.ReactNode;
+}): React.ReactElement;
+export declare function useTableIsScrolling(): boolean;
+export declare function TableScrollProvider({ isScrolling, children, }: {
+    isScrolling: boolean;
+    children: React.ReactNode;
+}): React.ReactElement;
+//# sourceMappingURL=field-context.d.ts.map

package/dist/components/Field/field-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-context.d.ts","sourceRoot":"","sources":["../../../src/components/Field/field-context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAG5D,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA;AACvC,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,YAAY,CAAA;AACxD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAC1C,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEnD;;;;;;;;;GASG;AACH,KAAK,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,CAAA;AAGrD,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAA;IACV;;wEAEoE;IACpE,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,SAAS,CAAA;IACf;mFAC+E;IAC/E,OAAO,EAAE,YAAY,CAAA;IACrB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,EAAE,SAAS,CAAA;IACf,WAAW,EAAE,gBAAgB,CAAA;IAC7B,aAAa,EAAE,kBAAkB,CAAA;IACjC,eAAe,EAAE,IAAI,CAAA;IACrB;;qDAEiD;IACjD,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAED,eAAO,MAAM,YAAY,yCAAsD,CAAA;AAE/E,uEAAuE;AACvE,wBAAgB,eAAe,IAAI,iBAAiB,GAAG,IAAI,CAE1D;AAgBD;;;;;;;;;GASG;AACH,wBAAgB,eAAe,IAAI,YAAY,CAK9C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,YAAY,CAAA;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,GAAG,KAAK,CAAC,YAAY,CAErB;AAkBD,wBAAgB,mBAAmB,IAAI,OAAO,CAE7C;AAED,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,QAAQ,GACT,EAAE;IACD,WAAW,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,GAAG,KAAK,CAAC,YAAY,CAErB"}

package/dist/components/Field/field-context.js

@@ -0,0 +1,37 @@
+import * as React from "react";
+const FieldContext = React.createContext(null);
+function useFieldContext() {
+  return React.useContext(FieldContext);
+}
+const FieldSurfaceContext = React.createContext(null);
+function useFieldSurface() {
+  const surfaceCtx = React.useContext(FieldSurfaceContext);
+  if (surfaceCtx) return surfaceCtx;
+  const fieldCtx = React.useContext(FieldContext);
+  return (fieldCtx == null ? void 0 : fieldCtx.surface) ?? "form";
+}
+function FieldSurfaceProvider({
+  surface,
+  children
+}) {
+  return React.createElement(FieldSurfaceContext.Provider, { value: surface }, children);
+}
+const TableScrollContext = React.createContext(false);
+function useTableIsScrolling() {
+  return React.useContext(TableScrollContext);
+}
+function TableScrollProvider({
+  isScrolling,
+  children
+}) {
+  return React.createElement(TableScrollContext.Provider, { value: isScrolling }, children);
+}
+export {
+  FieldContext,
+  FieldSurfaceProvider,
+  TableScrollProvider,
+  useFieldContext,
+  useFieldSurface,
+  useTableIsScrolling
+};
+//# sourceMappingURL=field-context.js.map

package/dist/components/Field/field-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-context.js","sources":["../../../src/components/Field/field-context.ts"],"sourcesContent":["import * as React from 'react'\nimport type { FieldMode, FieldVariant } from './field-types'\n\n// ── Types ──\nexport type { FieldMode, FieldVariant }\nexport type FieldOrientation = 'vertical' | 'horizontal'\nexport type FieldSize = 'sm' | 'md' | 'lg'\nexport type FieldControlLayout = 'inline' | 'block'\n\n/**\n * Field surface(2026-05-12 codex Q2 verdict — Stream C 4-issues Cluster B fix):\n * 替代散落的 `variant === 'naked'` 判 cell heuristic,讓 Field family components\n * 顯式 query「我在哪 surface」derive cell-specific padding / alignment / overflow。\n *\n * - `'form'`(default)— Standalone Field control(對齊 Polaris / Material Form idiom)\n * - `'toolbar'`— Toolbar / Action bar inline Field(future,目前無 consumer)\n * - `'table-cell'`— DataTable cell-as-input substrate(取代 variant='naked' cell-detection\n *   heuristic;canonical metrics 由 surface 推導,不再 hardcode in Field consumer)\n */\ntype FieldSurface = 'form' | 'toolbar' | 'table-cell'\n\n// ── Context ──\nexport interface FieldContextValue {\n  id: string\n  /** a11y(2026-04-25):FieldLabel 渲染時若元素為 div-based role(combobox/slider\n   * 等非 native form control),`<label for>` 無效,需 aria-labelledby 指向 labelId。\n   * FieldLabel 自動設 id={labelId},下游 control 可讀此值寫入 aria-labelledby。 */\n  labelId: string\n  descriptionId: string\n  errorId: string\n  mode: FieldMode\n  /** 視覺外殼透傳(2026-05-05)。default = 含 border+bg;bare = 透明 variant,hover/focus reveal。\n   *  child Field control 自動繼承,per-control prop override 可覆寫。詳 field-types.ts。 */\n  variant: FieldVariant\n  disabled: boolean\n  required: boolean\n  invalid: boolean\n  size: FieldSize\n  orientation: FieldOrientation\n  controlLayout: FieldControlLayout\n  hasFieldWrapper: true\n  /** 2026-05-12 Stream C Cluster B fix:surface 上下文(form / toolbar / table-cell)\n   *  從 host(Field wrapper / DataTable cell registry)propagate 給 child controls。\n   *  Optional — 未設視同 `'form'`(backward compat)。 */\n  surface?: FieldSurface\n}\n\nexport const FieldContext = React.createContext<FieldContextValue | null>(null)\n\n/** 讓 primitive（Checkbox/Switch/Radio/Button/Input 等）讀 Field context */\nexport function useFieldContext(): FieldContextValue | null {\n  return React.useContext(FieldContext)\n}\n\n/**\n * Surface context — **獨立於 FieldContext** 的 surface signal(2026-05-12 v2 fix)。\n *\n * 原 v1 設計(`FieldSurfaceProvider` 透過 FieldContext.Provider 注入)誤把 stub\n * `hasFieldWrapper: true` 傳給沒有真正 Field wrapper 的場景(例 DataTable cell 內 standalone\n * DatePicker),導致 cells 誤以為有 Field 父 → 視覺 regression(2026-05-12 visual-audit 抓 3\n * stories 超過 baseline budget:DatePicker range-picker / FileViewer open-snapshot /\n * DataTable pinned-columns)。\n *\n * v2 修:**完全分離** FieldSurfaceContext;FieldContext 不被污染;non-FieldWrapper hosts\n * 只能影響 surface signal,不能假冒 Field wrapper 身份。\n */\nconst FieldSurfaceContext = React.createContext<FieldSurface | null>(null)\n\n/**\n * Helper: 取當前 surface,fall back 'form'。\n *\n * Stream C Cluster B canonical entry point — Field family controls 用此 helper 替代\n * 散落的 `variant === 'naked'` cell heuristic。對齊 codex Q2 verdict「surface context」\n * canonical(替代「inCellContext per-prop」反 pattern)。\n *\n * 優先順序:FieldSurfaceContext(host-provided) → FieldContext.surface(Field-wrapper-provided)\n *           → fallback 'form'。\n */\nexport function useFieldSurface(): FieldSurface {\n  const surfaceCtx = React.useContext(FieldSurfaceContext)\n  if (surfaceCtx) return surfaceCtx\n  const fieldCtx = React.useContext(FieldContext)\n  return fieldCtx?.surface ?? 'form'\n}\n\n/**\n * Standalone FieldSurface provider — 給 host(non-Field-wrapper, 如 DataTable cell)\n * **僅**設 surface signal,**不**污染 FieldContext。\n *\n * Usage(per cell-registry.tsx,2026-05-12):\n *   <FieldSurfaceProvider surface=\"table-cell\"><Field control /></FieldSurfaceProvider>\n *\n * 與 FieldContext.Provider 差別:\n *   - FieldContext.Provider — 完整 Field wrapper 用,provides mode/variant/disabled/...\n *   - FieldSurfaceProvider — host **僅**注 surface signal,Field controls 透過\n *     `useFieldSurface()` 讀;`useFieldContext()` 仍 returns null(沒被假冒)。\n */\nexport function FieldSurfaceProvider({\n  surface,\n  children,\n}: {\n  surface: FieldSurface\n  children: React.ReactNode\n}): React.ReactElement {\n  return React.createElement(FieldSurfaceContext.Provider, { value: surface }, children)\n}\n\n/**\n * 2026-05-13 (c) scroll-defer perf SSOT(per codex DataTable perf brief V3 + user 拍板\n * 「Roadmap still >50ms 進 (c)」):\n * Host(DataTable)在 virtualizer.isScrolling=true 期間 wrap children with `TableScrollProvider`,\n * 重 cell 組件(Avatar HoverCard / PeoplePicker / etc.)讀此 signal 跳過昂貴 subtree(如 HoverCard\n * Portal + useDocumentTheme observer),scroll 結束 unset → 重渲染為完整 affordance。\n *\n * 對齊 codex Profile Plan step 6(Scripting vs Layout 判分):scrolling 期間 cell 渲染壓縮 →\n * 240ms/frame catastrophe → close to 50ms target。世界級對齊:AG Grid `deferRender` for slow\n * React cell components / MUI X DataGrid scroll-defer hover affordance。\n *\n * 不放在 FieldSurfaceContext 內(避免 value object identity drift on scroll → 全 cell 重渲)\n * — 用獨立 Context,value = boolean primitive(stable when unchanged)。\n */\nconst TableScrollContext = React.createContext<boolean>(false)\n\nexport function useTableIsScrolling(): boolean {\n  return React.useContext(TableScrollContext)\n}\n\nexport function TableScrollProvider({\n  isScrolling,\n  children,\n}: {\n  isScrolling: boolean\n  children: React.ReactNode\n}): React.ReactElement {\n  return React.createElement(TableScrollContext.Provider, { value: isScrolling }, children)\n}\n"],"names":[],"mappings":";AA+CO,MAAM,eAAe,MAAM,cAAwC,IAAI;AAGvE,SAAS,kBAA4C;AAC1D,SAAO,MAAM,WAAW,YAAY;AACtC;AAcA,MAAM,sBAAsB,MAAM,cAAmC,IAAI;AAYlE,SAAS,kBAAgC;AAC9C,QAAM,aAAa,MAAM,WAAW,mBAAmB;AACvD,MAAI,WAAY,QAAO;AACvB,QAAM,WAAW,MAAM,WAAW,YAAY;AAC9C,UAAO,qCAAU,YAAW;AAC9B;AAcO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AACF,GAGuB;AACrB,SAAO,MAAM,cAAc,oBAAoB,UAAU,EAAE,OAAO,QAAA,GAAW,QAAQ;AACvF;AAgBA,MAAM,qBAAqB,MAAM,cAAuB,KAAK;AAEtD,SAAS,sBAA+B;AAC7C,SAAO,MAAM,WAAW,kBAAkB;AAC5C;AAEO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AACF,GAGuB;AACrB,SAAO,MAAM,cAAc,mBAAmB,UAAU,EAAE,OAAO,YAAA,GAAe,QAAQ;AAC1F;"}

package/dist/components/Field/field-types.d.ts

@@ -0,0 +1,5 @@
+export type FieldMode = 'edit' | 'display' | 'readonly' | 'disabled';
+export type FieldVariant = 'default' | 'bare' | 'naked';
+/** CommandList 最小高度 = field-height × rows + 16px(CommandGroup py-2 上下 padding） */
+export declare function getMenuListMinHeight(size: string, rows?: number): string;
+//# sourceMappingURL=field-types.d.ts.map

package/dist/components/Field/field-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-types.d.ts","sourceRoot":"","sources":["../../../src/components/Field/field-types.ts"],"names":[],"mappings":"AAkBA,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAA;AAgBpE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;AAYvD,kFAAkF;AAClF,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,GAAE,MAAU,GAAG,MAAM,CAG3E"}

package/dist/components/Field/field-types.js

@@ -0,0 +1,13 @@
+const FIELD_HEIGHT_TOKEN = {
+  sm: "var(--field-height-sm)",
+  md: "var(--field-height-md)",
+  lg: "var(--field-height-lg)"
+};
+function getMenuListMinHeight(size, rows = 3) {
+  const token = FIELD_HEIGHT_TOKEN[size] ?? FIELD_HEIGHT_TOKEN.md;
+  return `calc(${token} * ${rows} + 16px)`;
+}
+export {
+  getMenuListMinHeight
+};
+//# sourceMappingURL=field-types.js.map

package/dist/components/Field/field-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-types.js","sources":["../../../src/components/Field/field-types.ts"],"sourcesContent":["// ── Field Mode ───────────────────────────────────────────────────────────────\n//\n// 4 模式 canonical(2026-05-05 expand to 4):\n//   edit     — 一般可編輯 input(預設 variant:border + bg)\n//   display  — **純展示**(無 input chrome / 無互動 affordance);語意「這是 read-only 內容,展示給人看」\n//              對齊 Carbon read-only / PatternFly inline-edit hidden-input / Cloudscape display-mode\n//   readonly — input chrome + non-editable(保留 underline / border subtle 給 a11y signal「這是 input 但鎖了」)\n//              對齊 Carbon read-only-with-underline。差異:`display` 完全無 chrome;`readonly` 保留 input affordance signal\n//   disabled — input chrome + disabled state(灰底,不可互動,語意「不適用」)\n//\n// `display` vs `readonly` 判別:\n//   - 該位置語意上是「純展示資料」(如 DataTable cell read mode / NameCard meta) → `display`\n//   - 該位置是「表單欄位但目前不可改」(如 form 鎖部分欄位) → `readonly`\n//\n// World-class refs(M22 verified):\n//   Carbon: https://carbondesignsystem.com/patterns/read-only-states-pattern/\n//   PatternFly: https://www.patternfly.org/components/inline-edit/design-guidelines/\n//   Cloudscape: https://cloudscape.design/patterns/general/disabled-and-read-only-states/\nexport type FieldMode = 'edit' | 'display' | 'readonly' | 'disabled'\n\n// ── Field Variant ────────────────────────────────────────────────────────────\n//\n// 視覺外殼(對齊主流 DS canonical M22 verified 2026-05-05):\n//   - Ant Design `Input variant`: 'outlined' | 'borderless' | 'filled' | 'underlined'\n//   - MUI `TextField variant`: 'outlined' | 'standard' | 'filled'\n//\n//   default — 含 border + bg(一般 form input,= Ant outlined / MUI outlined)\n//   bare    — 透明 variant,hover/focus 才 reveal inner border(VS Code/Figma toolbar inline editing idiom,\n//             ≈ Ant borderless,但保留 hover/focus reveal)\n//   naked   — 完全無 chrome / 無 focus ring on wrapper(cell-as-input — host cell 提供 border + focus visual)\n//             對齊 Airtable / Notion / Excel cell editing — cell 本身扮演 input frame,內無 wrapper\n//\n// 透傳機制:Field 透過 FieldContext.variant 一次宣告,所有 child Field control 自動繼承。\n// per-control prop override 可覆寫 context。\nexport type FieldVariant = 'default' | 'bare' | 'naked'\n\n// ── Menu List Min Height ─────────────────────────────────────────────────────\n// SelectMenu / Select / Combobox 共用的 CommandList minHeight 計算。\n// 確保空狀態有足夠高度讓 Empty 垂直置中(有框容器 → 置中原則)。\n\nconst FIELD_HEIGHT_TOKEN: Record<string, string> = {\n  sm: 'var(--field-height-sm)',\n  md: 'var(--field-height-md)',\n  lg: 'var(--field-height-lg)',\n}\n\n/** CommandList 最小高度 = field-height × rows + 16px(CommandGroup py-2 上下 padding） */\nexport function getMenuListMinHeight(size: string, rows: number = 3): string {\n  const token = FIELD_HEIGHT_TOKEN[size] ?? FIELD_HEIGHT_TOKEN.md\n  return `calc(${token} * ${rows} + 16px)`\n}\n\n"],"names":[],"mappings":"AAwCA,MAAM,qBAA6C;AAAA,EACjD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGO,SAAS,qBAAqB,MAAc,OAAe,GAAW;AAC3E,QAAM,QAAQ,mBAAmB,IAAI,KAAK,mBAAmB;AAC7D,SAAO,QAAQ,KAAK,MAAM,IAAI;AAChC;"}

package/dist/components/Field/field-wrapper.d.ts

@@ -0,0 +1,17 @@
+export declare const fieldWrapperStyles: (props?: ({
+    mode?: "display" | "disabled" | "edit" | "readonly" | null | undefined;
+    variant?: "default" | "bare" | "naked" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const bareInputStyles: string;
+export declare const nakedCellRowModeAlign = "group-data-[row-mode=auto]/cell:items-start";
+export declare const nakedCellEditableDisplayHover = "hover:outline hover:outline-1 hover:outline-offset-[-1px] hover:outline-[var(--cell-hover-outline-color,var(--border-hover))]";
+export declare const EMPTY_DISPLAY = "\u2014";
+/**
+ * 2026-05-14 I2 fix(per field-controls.spec.md contract (e) display typography canonical):
+ * Field family display path bare-span helper — `sm/md → text-body` / `lg → text-body-lg`,
+ * 跨 9 元件 display 視覺尺寸統一(user 抓 LinkInput 字體跟其他 Field 不一致 = SSOT 違反)。
+ * Consumer:LinkInput / Select / Combobox / DatePicker / TimePicker non-D-path bare-span 套此 class。
+ */
+export declare const fieldDisplayTextClass: (size: "sm" | "md" | "lg") => string;
+//# sourceMappingURL=field-wrapper.d.ts.map

package/dist/components/Field/field-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-wrapper.d.ts","sourceRoot":"","sources":["../../../src/components/Field/field-wrapper.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,kBAAkB;;;;8EAsN9B,CAAA;AAID,eAAO,MAAM,eAAe,QAsBjB,CAAA;AAmBX,eAAO,MAAM,qBAAqB,gDAAgD,CAAA;AAsClF,eAAO,MAAM,6BAA6B,kIAAkI,CAAA;AAsB5K,eAAO,MAAM,aAAa,WAAM,CAAA;AAEhC;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,KAAG,MACnB,CAAA"}

package/dist/components/Field/field-wrapper.js

@@ -0,0 +1,252 @@
+import { cva } from "class-variance-authority";
+const fieldWrapperStyles = cva(
+  [
+    // K10 fix(2026-05-04):`group/field` 讓 inner placeholder/text 可透過 `group-data-[field-mode=...]/field:` 變體
+    //   各 Field 元件 wrapper 同時加 `data-field-mode={resolvedMode}` 屬性,bareInputStyles 即可
+    //   依 mode 切 placeholder color。User canonical:disabled 顯著性優於 muted。
+    "group/field",
+    // 2026-05-15 H1 root cause fix(user #1 verbatim 拍板「照你跟codex有共識的最佳建議做」+ codex round 1 verify cite 5/5):
+    // 加 `min-w-0` 於 base — Field wrapper 為 cell-as-input substrate(DataTable / Form 上下文),
+    // parent grid/flex cell 限寬時 wrapper 子 flex children 需 min-w-0 才能縮 + truncate。
+    // 之前 SSOT 缺 → `selectedItemRenderer` / value text / Multi tag area 在 narrow cell 無法
+    // truncate-with-ellipsis(`Alexander Hamilton Zhang` 直接被 cell overflow-hidden 硬裁無 `...`
+    // 甚至蓋住相鄰 cell `—` indicator,圖二 user round 2 直接抓 trigger 越界證據)。
+    // 修一處全 Field family 跟動(Input/Select/Combobox/DatePicker/TimePicker/LinkInput/
+    // Textarea/NumberInput/PeoplePicker)— 對齊 M17/M19/M23 一處 SSOT + data-table.spec.md:233
+    // 「禁硬裁無 ellipsis」DS canonical + MUI X DataGrid / Ant Table column.ellipsis 共識。
+    "inline-flex items-center w-full min-w-0 rounded-md",
+    "text-foreground font-normal",
+    "transition-colors duration-150"
+  ],
+  {
+    variants: {
+      mode: {
+        edit: "",
+        display: "",
+        readonly: "",
+        disabled: ""
+      },
+      variant: {
+        // default — 完整 Field wrapper chrome(bg-surface、明顯 border、hover/focus 回饋)
+        default: "",
+        // bare — 透明 variant,hover / focus 才出現 border。適用 Toolbar inline editing
+        // (FileViewer zoom input / chart config / rich text toolbar number input 等)。
+        // 世界級對照:VS Code settings / Figma toolbar number / Notion prop input。
+        bare: "",
+        // naked — 完全無 variant,hover/focus 也不出 border。適用 cell-as-input
+        // (host cell 自管 border + focus visual,內部 input 純文字承載)。
+        // 世界級對照:Airtable / Notion / Excel / Google Sheets cell editing。
+        naked: ""
+      },
+      size: {
+        sm: "text-body h-field-sm px-3 gap-2",
+        md: "text-body h-field-md px-3 gap-2",
+        lg: "text-body-lg h-field-lg px-3 gap-2"
+      }
+    },
+    // mode x variant 交叉:visual chrome 由 compoundVariants 決定
+    //
+    // Overlay trigger active state(canonical 2026-05-02):當 Field 是 Popover/DropdownMenu/
+    // Combobox trigger 用 asChild,Radix 自動 set `data-state="open"` on trigger root → trigger
+    // 視覺維持 hover 樣式直到浮層關閉(對齊 inline-action.spec.md「狀態極簡派」)。
+    compoundVariants: [
+      // default variant chrome by mode
+      {
+        mode: "edit",
+        variant: "default",
+        className: [
+          "bg-surface border border-border",
+          "hover:border-border-hover",
+          // 2026-05-06 v13.3 SSOT canonical:focus-within `!important` 強制勝過 data-state attribute
+          // selector(specificity tie at 0,2,0;source order 後者勝)。
+          //
+          // 設計原則:**focus dominates everything**(M11 fix「focus-dominates-hover」延伸成
+          // 「focus-dominates-{hover,open,error-rest}」)。Cursor 在輸入框 = user 編輯中 = 必藍。
+          //
+          // 對齊世界級三家共識:
+          //   - Material Design 3:focus → primary line color
+          //   - Polaris(Shopify):focus state border-focus(藍)overrides hover/open
+          //   - Ant Design 5:`.ant-select-focused` blue,popover open + select option close 後
+          //     trigger 仍 focused → blue stays(focus return canonical via Radix `onCloseAutoFocus`)
+          //
+          // 副作用 — Ant 風「選後藍 / 取消灰」自動達成:
+          //   - 選 option close popover → Radix focus return to trigger → focus-within fires → 藍
+          //   - 點外取消 close popover → focus 移外 → focus-within 不 fire → 灰
+          "focus-within:!border-primary focus-within:hover:!border-primary",
+          "data-[state=open]:border-border-hover"
+        ]
+      },
+      {
+        mode: "display",
+        variant: "default",
+        // 2026-05-13 Q3 Path Ⅰ(user 拍板 Path Ⅰ 全 zero chrome + codex V2 verdict + field-controls.spec.md (d)):
+        // default display = zero chrome — !px-0 !py-0 override size token 的 px-3,跟 Select / Combobox
+        // / DatePicker / TimePicker / LinkInput non-D-path bare-span idiom 一致(Carbon read-only / Stripe
+        // display / Notion property / Polaris readonly TextField 全 zero chrome)。
+        className: "bg-transparent border border-transparent !px-0 !py-0"
+      },
+      {
+        mode: "readonly",
+        variant: "default",
+        className: "bg-disabled border border-transparent"
+      },
+      {
+        // 2026-05-13 R3.5(per codex Q3 verdict + user 拍「想盡辦法 auto-handle prereq」):
+        // 移除 `opacity-disabled` blanket — Avatar 已 fieldCtx-aware self-dim(avatar.tsx self-managed
+        // via `isDisabledInField` derivation)。Field wrapper 不再 host-control Avatar opacity。
+        // Inner content(text-fg-disabled / Avatar self-opacity)走具體 disabled token per color.spec.md:729。
+        mode: "disabled",
+        variant: "default",
+        className: "bg-disabled border border-transparent cursor-not-allowed"
+      },
+      // bare variant chrome by mode
+      {
+        mode: "edit",
+        variant: "bare",
+        className: [
+          "bg-transparent border border-transparent",
+          "hover:border-border",
+          // 同 default chrome v13.3 SSOT:focus-within !important 強制勝過 data-state
+          "focus-within:!border-primary focus-within:hover:!border-primary",
+          "data-[state=open]:border-border"
+        ]
+      },
+      {
+        mode: "display",
+        variant: "bare",
+        // bare + display:cell-as-input default state(無 variant,完全融入 cell;hover/focus 才有 affordance 等 user 點下去切 edit mode)
+        className: "bg-transparent border border-transparent"
+      },
+      {
+        mode: "readonly",
+        variant: "bare",
+        className: "bg-transparent border border-transparent"
+      },
+      {
+        // 2026-05-13 R3.5:移除 `opacity-disabled` blanket(per Avatar self-dim canonical)
+        mode: "disabled",
+        variant: "bare",
+        className: "bg-transparent border border-transparent cursor-not-allowed"
+      },
+      // naked variant — cell-as-input substrate(Notion / Airtable / Excel canonical)
+      //
+      // ── 2026-05-06 v14:revert v12 → v9 baseline + keep v13.3 ──
+      // v12 `!absolute -inset-px` autoRowHeight 不相容(Field 抽 layout flow → cell 塌 42px;
+      // user production 報「Field 沒撐滿 cell, 比沒改之前還糟糕一百萬倍」)→ revert。
+      //
+      // v14 = v9 baseline border-based state machine + v13.3 focus !important。
+      // 暫接受視覺:Field.border-l 跟 prev cell.border-r 視覺 2px 雙線(待另案研究 seamless
+      // 方案,約束:SSOT 留 Field state machine + ring 顏色自動跟 border state 同步)。
+      // Phase 9 Issue 5 fix(2026-05-10 user 撞 + codex 重比稿 verdict ADOPT):
+      //   Field naked variant 之前全寫 `!gap-0` strip Field family slot gap → indicator(chevron /
+      //   calendar / clock)緊連 value 沒間距。違反 item-anatomy slot SSOT。
+      //   Codex verdict:「naked 把 chrome stripping 跟 slot anatomy stripping 混在一起。
+      //   chrome stripping 合理(去 padding / border / rounded);slot anatomy stripping 不合理
+      //   (prefix / content / suffix gap 仍是 item anatomy slot canonical `gap-2`)」
+      //   Fix:移除 `!gap-0`,讓 Field family base `gap-2`(field-wrapper.tsx:50)透出來。
+      //   Cite:item-anatomy.spec.md L46-50 / L113-122 partial consumer canonical;
+      //   field-controls.spec.md L22 Field Controls 視覺對齊 Family 1 Menu item layout。
+      //   特殊 stack / multi-pill 場景若需 zero-gap,該 component spec 明文例外,不全域 strip。
+      {
+        mode: "edit",
+        variant: "naked",
+        className: [
+          "bg-transparent !rounded-none !h-full",
+          "!px-[var(--table-cell-px)] !py-[var(--table-cell-py)]",
+          "border border-border",
+          "hover:border-border-hover",
+          // v13.3 SSOT canonical:focus-within !important(同 default + bare)
+          "focus-within:!border-primary focus-within:hover:!border-primary",
+          "data-[state=open]:border-border-hover",
+          "group-data-[row-mode=auto]/cell:!items-start"
+        ]
+      },
+      {
+        // 2026-05-12 fix v2(M32 root invariant audit):
+        //   Q1 root invariant?:cell-as-input display 視覺位置 = `cell.items-{X}` × `Field.height`
+        //                       兩變數函數;canonical = autoRow → Field intrinsic + cell.items-start
+        //                       (text 在 cell top + cellPadding-y),fixed → Field h-field-md +
+        //                       cell.items-center(text 在 cell vertical center)。
+        //   Q2 symptom?:`h-field-md` 32px 在 autoRow tall cell + cell items-start → Field 32px
+        //              sitting at top,inside items-center default → text center = top+15 ≠ top。
+        //              即使 `group-data-[row-mode=auto]/cell:!items-start` 加進來,Field height
+        //              還是 32 → text 在 Field 內 top,但 Field 自己 height ≠ 0,offset 13~32px。
+        //   Q3 fix layer?:root-layer fix = Field 在 autoRow context 必 `h-auto` 才能讓 text 真正
+        //                  flush 到 cell.top + padding。前 v1 只 remove `!h-full` 是 surface-fix
+        //                  (沒解決 h-field-md 32px persistence)。v2 真根因 fix:加 `!h-auto`
+        //                  override h-field-md → Field intrinsic line-height → cell items-start
+        //                  真實 anchor text at cell.top + padding。
+        // Edit mode 不動(`!h-full` 保留 — border 必滿格對齊 cell border)。
+        mode: "display",
+        variant: "naked",
+        className: [
+          "bg-transparent !rounded-none !px-0 !py-0 !h-auto",
+          "border border-transparent"
+        ]
+      },
+      {
+        mode: "readonly",
+        variant: "naked",
+        className: [
+          "bg-transparent !rounded-none !px-0 !py-0 !h-auto",
+          "border border-transparent"
+        ]
+      },
+      {
+        // 2026-05-13 Q3 fix(per codex Q3 verdict + color.spec.md:729 逃生艙 rule):
+        // 移除 `opacity-disabled` blanket — naked wrapper 只負責 substrate(透明 border + 抑制 cursor),
+        // 內部 content(text / icon / avatar)各自 disabled context 處理(text-fg-disabled / Avatar opacity 等具體 token)。
+        // 對齊 DataTable cell-disabled TD 加 `bg-disabled` 表達 cell-level disabled state 的 SSOT 分權。
+        // **default/bare disabled variant(line 107, 135)deferred R3.5** — 仍依賴 wrapper opacity-disabled
+        // for Avatar dim(Avatar 尚未 fieldCtx-aware self-dim);Avatar self-dim 實作後再連帶移除。
+        mode: "disabled",
+        variant: "naked",
+        className: [
+          "bg-transparent !rounded-none cursor-not-allowed !px-0 !py-0 !h-auto",
+          "border border-transparent"
+        ]
+      }
+    ],
+    defaultVariants: {
+      mode: "edit",
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+const bareInputStyles = [
+  // 2026-05-15 Q1 真 root cause fix(per codex Round 4 cite-based verdict):
+  // 加 `truncate` — 原 bareInputStyles 含 `flex-1 min-w-0` 但無 `truncate / text-overflow` policy。
+  // 當 Select `searchable && open` 切 raw `<input placeholder=...>` branch(select.tsx:178),
+  // bareInputStyles 套上,placeholder 無 ellipsis → narrow cell(<160px)硬裁無 `...`(user round 3
+  // 圖一證據)。加 truncate 後 `<input>` `text-overflow: ellipsis` 啟動,符合 user 「placeholder 直接被截掉沒有變...」
+  // 該顯 ellipsis 的 SSOT。對齊 data-table.spec.md:233「禁硬裁無 ellipsis」+ field-controls.spec.md:286
+  // 共享 contract(a)「display/readonly/disabled/edit 4 mode 共享同一 renderer」semantic 對齊。
+  "flex-1 min-w-0 truncate bg-transparent",
+  "outline-none border-none p-0",
+  "text-[inherit] font-[inherit] leading-[inherit]",
+  // A3 fix(2026-05-05):`<input>` UA stylesheet 強制 `text-align: start`,阻斷 parent 的
+  //   `text-right`/`text-center` 繼承。顯式 `text-align: inherit` 復原(對齊 NumberCell /
+  //   CurrencyCell right-align canonical:column meta.align='right' → cell text-right →
+  //   input 跟著 right-align)。
+  "[text-align:inherit]",
+  "placeholder:text-fg-muted",
+  // K10 fix(2026-05-04):wrapper data-field-mode=disabled 時,placeholder/text 都切 fg-disabled
+  //   依賴 fieldWrapperStyles 的 `group/field` + 各 Field 元件 wrapper 加 `data-field-mode={resolvedMode}`
+  //   User canonical:disabled state 顯著性優於 muted(neutral-6 > neutral-7)
+  "group-data-[field-mode=disabled]/field:placeholder:text-fg-disabled",
+  "group-data-[field-mode=disabled]/field:text-fg-disabled"
+].join(" ");
+const nakedCellRowModeAlign = "group-data-[row-mode=auto]/cell:items-start";
+const nakedCellEditableDisplayHover = "hover:outline hover:outline-1 hover:outline-offset-[-1px] hover:outline-[var(--cell-hover-outline-color,var(--border-hover))]";
+const EMPTY_DISPLAY = "—";
+const fieldDisplayTextClass = (size) => size === "lg" ? "text-body-lg" : "text-body";
+export {
+  EMPTY_DISPLAY,
+  bareInputStyles,
+  fieldDisplayTextClass,
+  fieldWrapperStyles,
+  nakedCellEditableDisplayHover,
+  nakedCellRowModeAlign
+};
+//# sourceMappingURL=field-wrapper.js.map

package/dist/components/Field/field-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-wrapper.js","sources":["../../../src/components/Field/field-wrapper.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport { cva } from 'class-variance-authority'\n\n// ── Field Wrapper Styles ────────────────────────────────────────────────────\n// 所有 Field 元件共用的 input wrapper 樣式。\n//\n// 4 種模式(2026-05-05 expand):\n//   edit     — bg-surface, border, hover/focus 回饋(可編輯 input)\n//   display  — 純展示(無 input chrome、無 affordance);語意「read-only 內容,展示給人看」。\n//              對齊 Carbon read-only / PatternFly inline-edit hidden-input。\n//   readonly — bg-disabled(neutral-2), 無邊框, 文字正常色(input chrome 但鎖定)\n//   disabled — bg-disabled(neutral-2), 無邊框, 文字灰化\n//\n// 2 種視覺外殼(variant):\n//   default — 完整 chrome(form input 場景)\n//   bare    — 透明 chrome(cell-as-input substrate / Toolbar inline editing)\n//\n// 高度:固定 h = field-height token(rem),與 Button 共用同一組 token。\n\nexport const fieldWrapperStyles = cva(\n  [\n    // K10 fix(2026-05-04):`group/field` 讓 inner placeholder/text 可透過 `group-data-[field-mode=...]/field:` 變體\n    //   各 Field 元件 wrapper 同時加 `data-field-mode={resolvedMode}` 屬性,bareInputStyles 即可\n    //   依 mode 切 placeholder color。User canonical:disabled 顯著性優於 muted。\n    'group/field',\n    // 2026-05-15 H1 root cause fix(user #1 verbatim 拍板「照你跟codex有共識的最佳建議做」+ codex round 1 verify cite 5/5):\n    // 加 `min-w-0` 於 base — Field wrapper 為 cell-as-input substrate(DataTable / Form 上下文),\n    // parent grid/flex cell 限寬時 wrapper 子 flex children 需 min-w-0 才能縮 + truncate。\n    // 之前 SSOT 缺 → `selectedItemRenderer` / value text / Multi tag area 在 narrow cell 無法\n    // truncate-with-ellipsis(`Alexander Hamilton Zhang` 直接被 cell overflow-hidden 硬裁無 `...`\n    // 甚至蓋住相鄰 cell `—` indicator,圖二 user round 2 直接抓 trigger 越界證據)。\n    // 修一處全 Field family 跟動(Input/Select/Combobox/DatePicker/TimePicker/LinkInput/\n    // Textarea/NumberInput/PeoplePicker)— 對齊 M17/M19/M23 一處 SSOT + data-table.spec.md:233\n    // 「禁硬裁無 ellipsis」DS canonical + MUI X DataGrid / Ant Table column.ellipsis 共識。\n    'inline-flex items-center w-full min-w-0 rounded-md',\n    'text-foreground font-normal',\n    'transition-colors duration-150',\n  ],\n  {\n    variants: {\n      mode: {\n        edit: '',\n        display: '',\n        readonly: '',\n        disabled: '',\n      },\n      variant: {\n        // default — 完整 Field wrapper chrome(bg-surface、明顯 border、hover/focus 回饋)\n        default: '',\n        // bare — 透明 variant,hover / focus 才出現 border。適用 Toolbar inline editing\n        // (FileViewer zoom input / chart config / rich text toolbar number input 等)。\n        // 世界級對照:VS Code settings / Figma toolbar number / Notion prop input。\n        bare: '',\n        // naked — 完全無 variant,hover/focus 也不出 border。適用 cell-as-input\n        // (host cell 自管 border + focus visual,內部 input 純文字承載)。\n        // 世界級對照:Airtable / Notion / Excel / Google Sheets cell editing。\n        naked: '',\n      },\n      size: {\n        sm: 'text-body h-field-sm px-3 gap-2',\n        md: 'text-body h-field-md px-3 gap-2',\n        lg: 'text-body-lg h-field-lg px-3 gap-2',\n      },\n    },\n    // mode x variant 交叉:visual chrome 由 compoundVariants 決定\n    //\n    // Overlay trigger active state(canonical 2026-05-02):當 Field 是 Popover/DropdownMenu/\n    // Combobox trigger 用 asChild,Radix 自動 set `data-state=\"open\"` on trigger root → trigger\n    // 視覺維持 hover 樣式直到浮層關閉(對齊 inline-action.spec.md「狀態極簡派」)。\n    compoundVariants: [\n      // default variant chrome by mode\n      {\n        mode: 'edit',\n        variant: 'default',\n        className: [\n          'bg-surface border border-border',\n          'hover:border-border-hover',\n          // 2026-05-06 v13.3 SSOT canonical:focus-within `!important` 強制勝過 data-state attribute\n          // selector(specificity tie at 0,2,0;source order 後者勝)。\n          //\n          // 設計原則:**focus dominates everything**(M11 fix「focus-dominates-hover」延伸成\n          // 「focus-dominates-{hover,open,error-rest}」)。Cursor 在輸入框 = user 編輯中 = 必藍。\n          //\n          // 對齊世界級三家共識:\n          //   - Material Design 3:focus → primary line color\n          //   - Polaris(Shopify):focus state border-focus(藍)overrides hover/open\n          //   - Ant Design 5:`.ant-select-focused` blue,popover open + select option close 後\n          //     trigger 仍 focused → blue stays(focus return canonical via Radix `onCloseAutoFocus`)\n          //\n          // 副作用 — Ant 風「選後藍 / 取消灰」自動達成:\n          //   - 選 option close popover → Radix focus return to trigger → focus-within fires → 藍\n          //   - 點外取消 close popover → focus 移外 → focus-within 不 fire → 灰\n          'focus-within:!border-primary focus-within:hover:!border-primary',\n          'data-[state=open]:border-border-hover',\n        ],\n      },\n      {\n        mode: 'display',\n        variant: 'default',\n        // 2026-05-13 Q3 Path Ⅰ(user 拍板 Path Ⅰ 全 zero chrome + codex V2 verdict + field-controls.spec.md (d)):\n        // default display = zero chrome — !px-0 !py-0 override size token 的 px-3,跟 Select / Combobox\n        // / DatePicker / TimePicker / LinkInput non-D-path bare-span idiom 一致(Carbon read-only / Stripe\n        // display / Notion property / Polaris readonly TextField 全 zero chrome)。\n        className: 'bg-transparent border border-transparent !px-0 !py-0',\n      },\n      {\n        mode: 'readonly',\n        variant: 'default',\n        className: 'bg-disabled border border-transparent',\n      },\n      {\n        // 2026-05-13 R3.5(per codex Q3 verdict + user 拍「想盡辦法 auto-handle prereq」):\n        // 移除 `opacity-disabled` blanket — Avatar 已 fieldCtx-aware self-dim(avatar.tsx self-managed\n        // via `isDisabledInField` derivation)。Field wrapper 不再 host-control Avatar opacity。\n        // Inner content(text-fg-disabled / Avatar self-opacity)走具體 disabled token per color.spec.md:729。\n        mode: 'disabled',\n        variant: 'default',\n        className: 'bg-disabled border border-transparent cursor-not-allowed',\n      },\n      // bare variant chrome by mode\n      {\n        mode: 'edit',\n        variant: 'bare',\n        className: [\n          'bg-transparent border border-transparent',\n          'hover:border-border',\n          // 同 default chrome v13.3 SSOT:focus-within !important 強制勝過 data-state\n          'focus-within:!border-primary focus-within:hover:!border-primary',\n          'data-[state=open]:border-border',\n        ],\n      },\n      {\n        mode: 'display',\n        variant: 'bare',\n        // bare + display:cell-as-input default state(無 variant,完全融入 cell;hover/focus 才有 affordance 等 user 點下去切 edit mode)\n        className: 'bg-transparent border border-transparent',\n      },\n      {\n        mode: 'readonly',\n        variant: 'bare',\n        className: 'bg-transparent border border-transparent',\n      },\n      {\n        // 2026-05-13 R3.5:移除 `opacity-disabled` blanket(per Avatar self-dim canonical)\n        mode: 'disabled',\n        variant: 'bare',\n        className: 'bg-transparent border border-transparent cursor-not-allowed',\n      },\n      // naked variant — cell-as-input substrate(Notion / Airtable / Excel canonical)\n      //\n      // ── 2026-05-06 v14:revert v12 → v9 baseline + keep v13.3 ──\n      // v12 `!absolute -inset-px` autoRowHeight 不相容(Field 抽 layout flow → cell 塌 42px;\n      // user production 報「Field 沒撐滿 cell, 比沒改之前還糟糕一百萬倍」)→ revert。\n      //\n      // v14 = v9 baseline border-based state machine + v13.3 focus !important。\n      // 暫接受視覺:Field.border-l 跟 prev cell.border-r 視覺 2px 雙線(待另案研究 seamless\n      // 方案,約束:SSOT 留 Field state machine + ring 顏色自動跟 border state 同步)。\n      // Phase 9 Issue 5 fix(2026-05-10 user 撞 + codex 重比稿 verdict ADOPT):\n      //   Field naked variant 之前全寫 `!gap-0` strip Field family slot gap → indicator(chevron /\n      //   calendar / clock)緊連 value 沒間距。違反 item-anatomy slot SSOT。\n      //   Codex verdict:「naked 把 chrome stripping 跟 slot anatomy stripping 混在一起。\n      //   chrome stripping 合理(去 padding / border / rounded);slot anatomy stripping 不合理\n      //   (prefix / content / suffix gap 仍是 item anatomy slot canonical `gap-2`)」\n      //   Fix:移除 `!gap-0`,讓 Field family base `gap-2`(field-wrapper.tsx:50)透出來。\n      //   Cite:item-anatomy.spec.md L46-50 / L113-122 partial consumer canonical;\n      //   field-controls.spec.md L22 Field Controls 視覺對齊 Family 1 Menu item layout。\n      //   特殊 stack / multi-pill 場景若需 zero-gap,該 component spec 明文例外,不全域 strip。\n      {\n        mode: 'edit',\n        variant: 'naked',\n        className: [\n          'bg-transparent !rounded-none !h-full',\n          '!px-[var(--table-cell-px)] !py-[var(--table-cell-py)]',\n          'border border-border',\n          'hover:border-border-hover',\n          // v13.3 SSOT canonical:focus-within !important(同 default + bare)\n          'focus-within:!border-primary focus-within:hover:!border-primary',\n          'data-[state=open]:border-border-hover',\n          'group-data-[row-mode=auto]/cell:!items-start',\n        ],\n      },\n      {\n        // 2026-05-12 fix v2(M32 root invariant audit):\n        //   Q1 root invariant?:cell-as-input display 視覺位置 = `cell.items-{X}` × `Field.height`\n        //                       兩變數函數;canonical = autoRow → Field intrinsic + cell.items-start\n        //                       (text 在 cell top + cellPadding-y),fixed → Field h-field-md +\n        //                       cell.items-center(text 在 cell vertical center)。\n        //   Q2 symptom?:`h-field-md` 32px 在 autoRow tall cell + cell items-start → Field 32px\n        //              sitting at top,inside items-center default → text center = top+15 ≠ top。\n        //              即使 `group-data-[row-mode=auto]/cell:!items-start` 加進來,Field height\n        //              還是 32 → text 在 Field 內 top,但 Field 自己 height ≠ 0,offset 13~32px。\n        //   Q3 fix layer?:root-layer fix = Field 在 autoRow context 必 `h-auto` 才能讓 text 真正\n        //                  flush 到 cell.top + padding。前 v1 只 remove `!h-full` 是 surface-fix\n        //                  (沒解決 h-field-md 32px persistence)。v2 真根因 fix:加 `!h-auto`\n        //                  override h-field-md → Field intrinsic line-height → cell items-start\n        //                  真實 anchor text at cell.top + padding。\n        // Edit mode 不動(`!h-full` 保留 — border 必滿格對齊 cell border)。\n        mode: 'display',\n        variant: 'naked',\n        className: [\n          'bg-transparent !rounded-none !px-0 !py-0 !h-auto',\n          'border border-transparent',\n        ],\n      },\n      {\n        mode: 'readonly',\n        variant: 'naked',\n        className: [\n          'bg-transparent !rounded-none !px-0 !py-0 !h-auto',\n          'border border-transparent',\n        ],\n      },\n      {\n        // 2026-05-13 Q3 fix(per codex Q3 verdict + color.spec.md:729 逃生艙 rule):\n        // 移除 `opacity-disabled` blanket — naked wrapper 只負責 substrate(透明 border + 抑制 cursor),\n        // 內部 content(text / icon / avatar)各自 disabled context 處理(text-fg-disabled / Avatar opacity 等具體 token)。\n        // 對齊 DataTable cell-disabled TD 加 `bg-disabled` 表達 cell-level disabled state 的 SSOT 分權。\n        // **default/bare disabled variant(line 107, 135)deferred R3.5** — 仍依賴 wrapper opacity-disabled\n        // for Avatar dim(Avatar 尚未 fieldCtx-aware self-dim);Avatar self-dim 實作後再連帶移除。\n        mode: 'disabled',\n        variant: 'naked',\n        className: [\n          'bg-transparent !rounded-none cursor-not-allowed !px-0 !py-0 !h-auto',\n          'border border-transparent',\n        ],\n      },\n    ],\n    defaultVariants: {\n      mode: 'edit',\n      variant: 'default',\n      size: 'md',\n    },\n  }\n)\n\n// ── Bare Input Styles ───────────────────────────────────────────────────────\n\nexport const bareInputStyles = [\n  // 2026-05-15 Q1 真 root cause fix(per codex Round 4 cite-based verdict):\n  // 加 `truncate` — 原 bareInputStyles 含 `flex-1 min-w-0` 但無 `truncate / text-overflow` policy。\n  // 當 Select `searchable && open` 切 raw `<input placeholder=...>` branch(select.tsx:178),\n  // bareInputStyles 套上,placeholder 無 ellipsis → narrow cell(<160px)硬裁無 `...`(user round 3\n  // 圖一證據)。加 truncate 後 `<input>` `text-overflow: ellipsis` 啟動,符合 user 「placeholder 直接被截掉沒有變...」\n  // 該顯 ellipsis 的 SSOT。對齊 data-table.spec.md:233「禁硬裁無 ellipsis」+ field-controls.spec.md:286\n  // 共享 contract(a)「display/readonly/disabled/edit 4 mode 共享同一 renderer」semantic 對齊。\n  'flex-1 min-w-0 truncate bg-transparent',\n  'outline-none border-none p-0',\n  'text-[inherit] font-[inherit] leading-[inherit]',\n  // A3 fix(2026-05-05):`<input>` UA stylesheet 強制 `text-align: start`,阻斷 parent 的\n  //   `text-right`/`text-center` 繼承。顯式 `text-align: inherit` 復原(對齊 NumberCell /\n  //   CurrencyCell right-align canonical:column meta.align='right' → cell text-right →\n  //   input 跟著 right-align)。\n  '[text-align:inherit]',\n  'placeholder:text-fg-muted',\n  // K10 fix(2026-05-04):wrapper data-field-mode=disabled 時,placeholder/text 都切 fg-disabled\n  //   依賴 fieldWrapperStyles 的 `group/field` + 各 Field 元件 wrapper 加 `data-field-mode={resolvedMode}`\n  //   User canonical:disabled state 顯著性優於 muted(neutral-6 > neutral-7)\n  'group-data-[field-mode=disabled]/field:placeholder:text-fg-disabled',\n  'group-data-[field-mode=disabled]/field:text-fg-disabled',\n].join(' ')\n\n// ── Naked Variant Cell Row-Mode Alignment Propagation ──────────────────────\n// SSOT canonical(M19 / 2026-05-05):cell-as-input naked variant 元件**所有內部\n// wrapper**(`<span>` 包 Avatar+name 等)必 import + apply 此 SSOT,host cell\n// `data-row-mode` 屬性自動 propagate alignment(autoRow → items-start / fixed → items-center)。\n//\n// 不 propagate 的後果:autoRow 場景下 People / Select / Combobox 內部用\n// `inline-flex items-center` hardcode → 視覺垂直置中於 wrapper 自身高度,**沒**頂對齊\n// → 跟其他純文字 cell baseline 視覺漂移。\n//\n// 世界級對照:\n//   - HTML <td> default `vertical-align: baseline`(瀏覽器自動 first-baseline align)\n//   - AG Grid `cellStyle` + `cellRendererSelector`,row context 共享(closed source 部分)\n//   - Material X-Grid `gridClasses.cell` wrapper 不允許 cell content override alignment\n//   - Notion / Airtable cell content 從 host 繼承,不 hardcode self alignment\n//\n// Hook:`check_naked_row_mode_propagation.sh`(write-time BLOCKER)\n// Audit:design-system-audit Group N M27(periodic batch verify)\nexport const nakedCellRowModeAlign = 'group-data-[row-mode=auto]/cell:items-start'\n\n// ── Cell-as-input Display Hover Ring(2026-05-05 v9 — sole remaining ring const)─\n// editable cell **display mode hover 提示**(「這 cell 可編,點 → 進 edit」affordance 信號)。\n// 對齊 Notion / Airtable hover-cell-shows-border canonical。\n//\n// **為何只剩這一個**:Field naked **edit/focus/open state ring 已下沉到 Field default state\n// machine**(border-based,2026-05-05 v9 architectural rewrite),不需 outline 平行系統;\n// 但 display mode 沒 Field state(display = 純展示無互動),hover 提示需 cell wrapper 自加。\n//\n// **2026-05-09 v15.17 revert v15.16(user 未同意 ship)— 維持 v15.13 outline+offset:-1**\n//\n// User 2026-05-09 後續 message:「設計決策的東西你應該要先問過我讓我決策吧?為什麼就直接開跑」\n// 我 commit 698ff58 ship v15.16(box-shadow inset Spec 2 不蓋 grid)= 設計決策結論未 user 同意\n// 直接 ship = workflow 違反。Revert 回 v15.13 outline+offset:-1(原 user-accepted 路徑),\n// 等 user 拍板 4-邊覆蓋路徑才 ship。\n//\n// User 並指出我視覺分析又錯:「我就是只有看到只有右邊被蓋掉,上面下面左邊都會露出 cell 的邊框」\n// 我之前錯說「right + bottom 都覆蓋」,bottom 真實 row border-b 在 cell.outer 外 1px,outline 蓋不到。\n//\n// 真實 4-邊狀態(re-verified):\n//   - right: outline 199-200 = cell own border-r 199-200 → 蓋 1 條線 ✓\n//   - top: outline 0-1,前一 row border-b 在 cell.outer 外 → 露 2 條線\n//   - bottom: outline 38-39 在 cell 內,row border-b 在 row.outer 內 = cell.outer 外 1px → 露 2 條線\n//   - left: outline 0-1,前一 cell border-r 在 cell.outer 外 → 露 2 條線\n//\n// User 想要 4 邊都覆蓋 = 等 codex unframed brief + user 拍板,本次不 ship。\n//\n// 之前 v15.13 / 14 / 16 / 17 緣由 → tsc comment 之前版本 + planning RFC\n// (跑錯方向 4 次 = 沒 1 次 verify 全面向 + 沒 user 拍板 set design)。\n//\n// Color `--border-hover` 對齊 Field default hover state token。\n//\n// **2026-05-10 Slice D Step 2 — Cell host CSS variable suppression**:\n// outline color 改用 `var(--cell-hover-outline-color, var(--border-hover))`,\n// allow DataTable cell host(spreadsheet overlay enabled 時)set `--cell-hover-outline-color: transparent`\n// 抑制 outline,讓 overlay layer 接管 hover ring paint(per RFC Contract 8 「one geometry owner, two paint owners」)。\n// Backward-compat:flag 關時 default `--border-hover`,既有行為不變。\nexport const nakedCellEditableDisplayHover = 'hover:outline hover:outline-1 hover:outline-offset-[-1px] hover:outline-[var(--cell-hover-outline-color,var(--border-hover))]'\n\n// ── Cell-as-input Edge Slot SSOT(2026-05-05 v8 — retire 平行 SSOT,改 L1 消費)───\n//\n// 前身 `nakedCellPrefixSlot` / `nakedCellSuffixSlot` 是 M1+M17 違反:平行 SSOT 跟\n// `patterns/element-anatomy` 的 `<ItemPrefix>` / `<ItemSuffix>` primitive 撞 home。\n// 已 retire — Field naked variant 內 prefix / suffix slot 直接消費 L1 primitive:\n//\n//   import { ItemPrefix, ItemSuffix } from '@/design-system/patterns/element-anatomy/item-anatomy'\n//   <ItemPrefix><StartIcon /></ItemPrefix>     // 對 Input.startIcon / Select.startIcon\n//   <ItemSuffix>{chevron}</ItemSuffix>          // 對 Combobox / DatePicker / PeoplePicker chevron\n//\n// **`h-[1lh]` 普世正確**(item-anatomy.spec.md:190-191 verbatim):\n//   - 單行 wrapper items-center → slot 1lh 在 cell 高度中心 = 第一行中線(視覺 = items-center)\n//   - 多行 wrapper items-start  → slot 1lh 鎖頂 = 第一行中線\n//   不需 conditional `group-data-[row-mode=auto]/cell:` — 我前 v4 自加的 conditional 是過度設計。\n//\n// State ring 3 const 仍留(下方)— 是 Field naked 專屬,MenuItem / TreeView 用 bg hover 不用 outline。\n// `nakedCellRowModeAlign`(wrapper 級)仍留 — 是 cell-context row-mode → wrapper alignment 適配,正交 slot 級。\n\n// ── Empty Value Display ─────────────────────────────────────────────────────\n\nexport const EMPTY_DISPLAY = '—'\n\n/**\n * 2026-05-14 I2 fix(per field-controls.spec.md contract (e) display typography canonical):\n * Field family display path bare-span helper — `sm/md → text-body` / `lg → text-body-lg`,\n * 跨 9 元件 display 視覺尺寸統一(user 抓 LinkInput 字體跟其他 Field 不一致 = SSOT 違反)。\n * Consumer:LinkInput / Select / Combobox / DatePicker / TimePicker non-D-path bare-span 套此 class。\n */\nexport const fieldDisplayTextClass = (size: 'sm' | 'md' | 'lg'): string =>\n  size === 'lg' ? 'text-body-lg' : 'text-body'\n"],"names":[],"mappings":"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"}