@qijenchen/design-system 0.1.0-beta.8 → 0.1.0-beta.80

package/dist/components/HoverCard/hover-card.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @internal — DS-internal 單元(per `.claude/rules/ui-development.md` Public vs Internal canonical;spec frontmatter `isInternal`)。
+ * 不進 root barrel front-door;由 Avatar(hoverCard)/ OverflowIndicator 等 DS 元件 wrap 消費,end-user app 請用 wrapper 元件。
+ */
 import * as React from "react";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 /**
@@ -7,11 +11,11 @@ import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
  *
  * **不含視覺樣式**——bg、border、shadow、padding 由 consumer 決定：
  * - OverflowIndicator：深色 Tooltip 樣式（bg-tooltip + data-theme="dark"）
- * - NameCard：亮色 Card 樣式（bg-surface-raised + elevation-200）
+ * - ProfileCard：亮色 Card 樣式（bg-surface-raised + elevation-200）
  *
  * 只提供：z-index、動畫、sideOffset。
  */
-declare const HoverCard: React.FC<HoverCardPrimitive.HoverCardProps>;
+declare const HoverCard: ({ openDelay, closeDelay, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
 declare const HoverCardTrigger: React.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>;
 declare const HoverCardContent: React.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const hoverCardMeta: {
@@ -19,7 +23,7 @@ export declare const hoverCardMeta: {
     readonly family: null;
     readonly variants: {};
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default"];
     readonly tokens: {
         readonly bg: readonly ["bg-surface-raised"];
         readonly fg: readonly ["--foreground"];

package/dist/components/HoverCard/hover-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../../src/components/HoverCard/hover-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,4BAA4B,CAAA;AAKhE;;;;;;;;;;GAUG;AAEH,QAAA,MAAM,SAAS,6CAA0B,CAAA;AAEzC,QAAA,MAAM,gBAAgB,oHAA6B,CAAA;AAEnD,QAAA,MAAM,gBAAgB,oKAkCpB,CAAA;AAKF,eAAO,MAAM,aAAa;;;;;;;;;;;CAehB,CAAA;AAEV,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../../src/components/HoverCard/hover-card.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,4BAA4B,CAAA;AAMhE;;;;;;;;;;GAUG;AAMH,QAAA,MAAM,SAAS,GAAI,qCAAkF,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,4CAExJ,CAAA;AAED,QAAA,MAAM,gBAAgB,oHAA6B,CAAA;AAEnD,QAAA,MAAM,gBAAgB,oKAkCpB,CAAA;AAKF,eAAO,MAAM,aAAa;;;;;;;;;;;CAehB,CAAA;AAEV,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/HoverCard/hover-card.js

@@ -3,13 +3,14 @@ import * as React from "react";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 import { cn } from "../../lib/utils.js";
 import { OVERLAY_SIDE_OFFSET } from "../../tokens/elevation/overlay-geometry.js";
-const HoverCard = HoverCardPrimitive.Root;
+import { HOVER_DELAY_CLOSE_MS, HOVER_DELAY_RICH_MS } from "../../tokens/motion/motion.js";
+const HoverCard = ({ openDelay = HOVER_DELAY_RICH_MS, closeDelay = HOVER_DELAY_CLOSE_MS, ...props }) => /* @__PURE__ */ jsx(HoverCardPrimitive.Root, { openDelay, closeDelay, ...props });
 const HoverCardTrigger = HoverCardPrimitive.Trigger;
 const HoverCardContent = React.forwardRef(({ className, align = "center", sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = 12, ...props }, ref) => (
   // HoverCardPrimitive.Portal(2026-04-23):把 Content 搬到 `document.body`。
   // 不 Portal 時 Content 會 DOM-nested 在 trigger subtree,如 trigger 位於 OverflowIndicator
   // `data-theme="dark"` tooltip 內部 → Avatar 自帶 HoverCard 的 Content 也卡在 dark subtree,
-  // CSS var(--foreground) 繼承 dark 值 → NameCard 內部文字變 white 看不見(user 抓的 bug)。
+  // CSS var(--foreground) 繼承 dark 值 → ProfileCard 內部文字變 white 看不見(user 抓的 bug)。
   // Portal 到 body 讓 CSS 繼承 chain 從 app root data-theme 起算,不受 trigger subtree 污染。
   //
   // collisionPadding=12:Radix / browser 內部 1-2px rounding 讓 visual padding 比 prop 值少 1-2px。
@@ -45,7 +46,7 @@ const hoverCardMeta = {
   // non-family composite / overlay / layout
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  states: ["default"],
   tokens: {
     bg: ["bg-surface-raised"],
     fg: ["--foreground"],

package/dist/components/HoverCard/hover-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card.js","sources":["../../../src/components/HoverCard/hover-card.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\n\nimport { cn } from \"@/lib/utils\"\nimport { OVERLAY_SIDE_OFFSET } from \"@/design-system/tokens/elevation/overlay-geometry\"\n\n/**\n * HoverCard — hover 顯示可互動內容的浮層（行為 primitive）\n *\n * 跟 Tooltip 的差異：內容可互動（按鈕、連結、hover 子元素）。\n *\n * **不含視覺樣式**——bg、border、shadow、padding 由 consumer 決定：\n * - OverflowIndicator：深色 Tooltip 樣式（bg-tooltip + data-theme=\"dark\"）\n * - NameCard：亮色 Card 樣式（bg-surface-raised + elevation-200）\n *\n * 只提供：z-index、動畫、sideOffset。\n */\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = 12, ...props }, ref) => (\n  // HoverCardPrimitive.Portal(2026-04-23):把 Content 搬到 `document.body`。\n  // 不 Portal 時 Content 會 DOM-nested 在 trigger subtree,如 trigger 位於 OverflowIndicator\n  // `data-theme=\"dark\"` tooltip 內部 → Avatar 自帶 HoverCard 的 Content 也卡在 dark subtree,\n  // CSS var(--foreground) 繼承 dark 值 → NameCard 內部文字變 white 看不見(user 抓的 bug)。\n  // Portal 到 body 讓 CSS 繼承 chain 從 app root data-theme 起算,不受 trigger subtree 污染。\n  //\n  // collisionPadding=12:Radix / browser 內部 1-2px rounding 讓 visual padding 比 prop 值少 1-2px。\n  // 提高到 12 保證使用者實際看到 ≥ 8px viewport edge gap(overlay-surface「靠邊 8px」canonical)。\n  <HoverCardPrimitive.Portal>\n    <HoverCardPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      collisionPadding={collisionPadding}\n      className={cn(\n        \"z-50 outline-none\",\n        // 2026-05-04 viewport-aware max-h SSOT(對齊 Popover):header/footer 永遠 in-viewport,body 壓縮 scroll\n        // 2026-05-05 audit dim 35 fix:加 `min-h-0` 完成 M25 chain invariant\n        \"max-h-[var(--radix-hover-card-content-available-height,100vh)] flex flex-col overflow-hidden min-h-0\",\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n        \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n        \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2\",\n        \"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        \"origin-[var(--radix-hover-card-content-transform-origin)]\",\n        className,\n      )}\n      {...props}\n    />\n  </HoverCardPrimitive.Portal>\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const hoverCardMeta = {\n  component: 'HoverCard',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-surface-raised'],\n    fg: ['--foreground'],\n    ring: [],\n  },\n} as const\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n"],"names":[],"mappings":";;;;;AAkBA,MAAM,YAAY,mBAAmB;AAErC,MAAM,mBAAmB,mBAAmB;AAE5C,MAAM,mBAAmB,MAAM,WAG7B,CAAC,EAAE,WAAW,QAAQ,UAAU,aAAa,qBAAqB,mBAAmB,IAAI,GAAG,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASrG,oBAAC,mBAAmB,QAAnB,EACC,UAAA;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA,EACN,CACF;AAAA,CACD;AACD,iBAAiB,cAAc,mBAAmB,QAAQ;AAInD,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAC,mBAAmB;AAAA,IACxB,IAAI,CAAC,cAAc;AAAA,IACnB,MAAM,CAAA;AAAA,EAAC;AAEX;"}
+{"version":3,"file":"hover-card.js","sources":["../../../src/components/HoverCard/hover-card.tsx"],"sourcesContent":["/**\n * @internal — DS-internal 單元(per `.claude/rules/ui-development.md` Public vs Internal canonical;spec frontmatter `isInternal`)。\n * 不進 root barrel front-door;由 Avatar(hoverCard)/ OverflowIndicator 等 DS 元件 wrap 消費,end-user app 請用 wrapper 元件。\n */\nimport * as React from \"react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\n\nimport { cn } from \"@/lib/utils\"\nimport { OVERLAY_SIDE_OFFSET } from \"@/design-system/tokens/elevation/overlay-geometry\"\nimport { HOVER_DELAY_RICH_MS, HOVER_DELAY_CLOSE_MS } from \"@/design-system/tokens/motion/motion\"\n\n/**\n * HoverCard — hover 顯示可互動內容的浮層（行為 primitive）\n *\n * 跟 Tooltip 的差異：內容可互動（按鈕、連結、hover 子元素）。\n *\n * **不含視覺樣式**——bg、border、shadow、padding 由 consumer 決定：\n * - OverflowIndicator：深色 Tooltip 樣式（bg-tooltip + data-theme=\"dark\"）\n * - ProfileCard：亮色 Card 樣式（bg-surface-raised + elevation-200）\n *\n * 只提供：z-index、動畫、sideOffset。\n */\n\n// 2026-06-11 user 拍板 A 案(「確保所有 hover 延遲都有按照設計原則」):Root 預設接 motion token SSOT\n// (rich 700ms open / close 200ms)— 對齊 tooltip.tsx 同 pattern(2026-05-18 拍板 #3A)。\n// 原裸用 Radix 預設 open 700 / close 300:open 巧合同值、close 300 ≠ canonical 200(drift)。\n// Consumer 仍可 per-instance override(Avatar 同值傳入、OverflowIndicator 傳 plain)。\nconst HoverCard = ({ openDelay = HOVER_DELAY_RICH_MS, closeDelay = HOVER_DELAY_CLOSE_MS, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) => (\n  <HoverCardPrimitive.Root openDelay={openDelay} closeDelay={closeDelay} {...props} />\n)\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = 12, ...props }, ref) => (\n  // HoverCardPrimitive.Portal(2026-04-23):把 Content 搬到 `document.body`。\n  // 不 Portal 時 Content 會 DOM-nested 在 trigger subtree,如 trigger 位於 OverflowIndicator\n  // `data-theme=\"dark\"` tooltip 內部 → Avatar 自帶 HoverCard 的 Content 也卡在 dark subtree,\n  // CSS var(--foreground) 繼承 dark 值 → ProfileCard 內部文字變 white 看不見(user 抓的 bug)。\n  // Portal 到 body 讓 CSS 繼承 chain 從 app root data-theme 起算,不受 trigger subtree 污染。\n  //\n  // collisionPadding=12:Radix / browser 內部 1-2px rounding 讓 visual padding 比 prop 值少 1-2px。\n  // 提高到 12 保證使用者實際看到 ≥ 8px viewport edge gap(overlay-surface「靠邊 8px」canonical)。\n  <HoverCardPrimitive.Portal>\n    <HoverCardPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      collisionPadding={collisionPadding}\n      className={cn(\n        \"z-50 outline-none\",\n        // 2026-05-04 viewport-aware max-h SSOT(對齊 Popover):header/footer 永遠 in-viewport,body 壓縮 scroll\n        // 2026-05-05 audit dim 35 fix:加 `min-h-0` 完成 M25 chain invariant\n        \"max-h-[var(--radix-hover-card-content-available-height,100vh)] flex flex-col overflow-hidden min-h-0\",\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n        \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n        \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2\",\n        \"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        \"origin-[var(--radix-hover-card-content-transform-origin)]\",\n        className,\n      )}\n      {...props}\n    />\n  </HoverCardPrimitive.Portal>\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const hoverCardMeta = {\n  component: 'HoverCard',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default'],\n  tokens: {\n    bg: ['bg-surface-raised'],\n    fg: ['--foreground'],\n    ring: [],\n  },\n} as const\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n"],"names":[],"mappings":";;;;;;AA2BA,MAAM,YAAY,CAAC,EAAE,YAAY,qBAAqB,aAAa,sBAAsB,GAAG,MAAA,0BACzF,mBAAmB,MAAnB,EAAwB,WAAsB,YAAyB,GAAG,MAAA,CAAO;AAGpF,MAAM,mBAAmB,mBAAmB;AAE5C,MAAM,mBAAmB,MAAM,WAG7B,CAAC,EAAE,WAAW,QAAQ,UAAU,aAAa,qBAAqB,mBAAmB,IAAI,GAAG,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASrG,oBAAC,mBAAmB,QAAnB,EACC,UAAA;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA,EACN,CACF;AAAA,CACD;AACD,iBAAiB,cAAc,mBAAmB,QAAQ;AAInD,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAC,mBAAmB;AAAA,IACxB,IAAI,CAAC,cAAc;AAAA,IACnB,MAAM,CAAA;AAAA,EAAC;AAEX;"}

package/dist/components/HoverCard/index.d.ts

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

package/dist/components/HoverCard/index.d.ts.map

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

package/dist/components/HoverCard/index.js

@@ -0,0 +1,8 @@
+import { HoverCard, HoverCardContent, HoverCardTrigger, hoverCardMeta } from "./hover-card.js";
+export {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+  hoverCardMeta
+};
+//# sourceMappingURL=index.js.map

package/dist/components/HoverCard/index.js.map

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

package/dist/components/Input/index.d.ts

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

package/dist/components/Input/index.d.ts.map

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

package/dist/components/Input/index.js

@@ -0,0 +1,6 @@
+import { Input, inputMeta } from "./input.js";
+export {
+  Input,
+  inputMeta
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Input/index.js.map

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

package/dist/components/Input/input.d.ts

@@ -9,10 +9,13 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     mode?: FieldMode;
     /**
      * Visual chrome(正交於 mode);Phase B1(2026-05-05)從 `variant` 改名 `chrome`,對齊 FieldContext.variant 透傳。
+     * 公開 variant 兩個:
      * - `'default'`(預設)— Field wrapper 完整 variant:bg-surface + 明顯 border + hover/focus 回饋。適用表單、Field 內嵌。
-     * - `'bare'` — 透明 variant,hover / focus 才出現 border。適用 Toolbar inline editing(如 FileViewer zoom input / chart config toolbar / rich text toolbar number input)+ DataTable cell-as-input。保留 padding / typography / height,只拿掉背景和常態 border。
+     * - `'bare'` — 透明 variant,hover / focus 才出現 border。適用 Toolbar inline editing(如 FileViewer zoom input / chart config toolbar / rich text toolbar number input)。保留 padding / typography / height,只拿掉背景和常態 border。
      *
-     * 透傳:在 `<Field variant="bare">` 內自動繼承 context.variant;per-prop override context。
+     * @internal `'naked'` — 完全無 chrome / 無 border / 無 focus ring。單獨使用無視覺邊界,**不可直接 standalone 用**;僅供 DS 內部 cell-as-input 組合(host cell 自管 border + focus visual,正被 `FieldSurfaceContext='table-cell'` 取代)。consumer 請用 `default` / `bare`。
+     *
+     * 透傳:在 `<Field variant="default|bare">` 內自動繼承 context.variant;per-prop override context。
      * 世界級對照(bare):VS Code settings input / Figma toolbar number / Notion prop input。
      */
     variant?: FieldVariant;

package/dist/components/Input/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAC3F,OAAO,EAAE,kBAAkB,EAAkC,MAAM,gDAAgD,CAAA;AAEnH,OAAO,EAAgC,KAAK,kBAAkB,EAAE,MAAM,uDAAuD,CAAA;AAM7H,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,EAC/D,IAAI,CAAC,YAAY,CAAC,OAAO,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnE,yBAAyB;IACzB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,sDAAsD;IACtD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,oDAAoD;IACpD,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,qDAAqD;IACrD,SAAS,CAAC,EAAE,kBAAkB,CAAA;IAC9B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;;;;;;;;;;OAcG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAKD,QAAA,MAAM,KAAK,qFAwIV,CAAA;AAQD,eAAO,MAAM,SAAS;;;;;;;;;;;CAeZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAC3F,OAAO,EAAE,kBAAkB,EAAkC,MAAM,gDAAgD,CAAA;AAEnH,OAAO,EAAgC,KAAK,kBAAkB,EAAE,MAAM,uDAAuD,CAAA;AAM7H,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,EAC/D,IAAI,CAAC,YAAY,CAAC,OAAO,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnE,yBAAyB;IACzB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,sDAAsD;IACtD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,oDAAoD;IACpD,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,qDAAqD;IACrD,SAAS,CAAC,EAAE,kBAAkB,CAAA;IAC9B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;;;;;;;;;;OAcG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAKD,QAAA,MAAM,KAAK,qFAwIV,CAAA;AAQD,eAAO,MAAM,SAAS;;;;;;;;;;;CAeZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/Input/input.js

@@ -1,23 +1,23 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
-import { EMPTY_DISPLAY, fieldWrapperStyles, bareInputStyles } from "../Field/field-wrapper.js";
-import { useFieldContext } from "../Field/field-context.js";
-import { ItemPrefix, ICON_SIZE, ItemInlineAction } from "../../patterns/element-anatomy/item-anatomy.js";
+import { EMPTY_DISPLAY, bareInputStyles, fieldWrapperStyles } from "../Field/field-wrapper.js";
+import { useFieldContext, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldVariant, useResolvedFieldMode, useResolvedFieldInvalid } from "../Field/field-context.js";
+import { ICON_SIZE, ItemPrefix, ItemInlineAction } from "../../patterns/element-anatomy/item-anatomy.js";
 import { CircularProgress } from "../CircularProgress/circular-progress.js";
 const Input = React.forwardRef(
   ({
     mode: modeProp,
     variant: variantProp,
     error = false,
-    size,
+    size: sizeProp,
     startIcon: StartIcon,
     endAction,
     endSlot,
     loading = false,
     autoWidth = false,
     className,
-    disabled,
+    disabled: disabledProp,
     readOnly,
     value,
     id: idProp,
@@ -26,11 +26,13 @@ const Input = React.forwardRef(
     ...props
   }, ref) => {
     const fieldCtx = useFieldContext();
-    const variant = variantProp ?? (fieldCtx == null ? void 0 : fieldCtx.variant) ?? "default";
-    const resolvedMode = modeProp ?? (fieldCtx == null ? void 0 : fieldCtx.mode) ?? (readOnly ? "readonly" : disabled ? "disabled" : "edit");
+    const size = useResolvedFieldSize(sizeProp);
+    const disabled = useResolvedFieldDisabled(disabledProp);
+    const variant = useResolvedFieldVariant(variantProp);
+    const resolvedMode = useResolvedFieldMode({ mode: modeProp, disabled, readOnly });
     const isEditable = resolvedMode === "edit";
     const isDisplay = resolvedMode === "display";
-    const resolvedError = error || ((fieldCtx == null ? void 0 : fieldCtx.invalid) ?? false);
+    const resolvedError = useResolvedFieldInvalid(error);
     const iconSize = ICON_SIZE[size];
     const iconColor = resolvedMode === "disabled" ? "text-fg-disabled" : "text-fg-muted";
     if (isDisplay) {

package/dist/components/Input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../src/components/Input/input.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport { type VariantProps } from 'class-variance-authority'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport type { FieldMode, FieldVariant } from '@/design-system/components/Field/field-types'\nimport { fieldWrapperStyles, bareInputStyles, EMPTY_DISPLAY } from '@/design-system/components/Field/field-wrapper'\nimport { useFieldContext } from '@/design-system/components/Field/field-context'\nimport { ItemInlineAction, ItemPrefix, type InlineActionConfig } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { CircularProgress } from '@/design-system/components/CircularProgress/circular-progress'\nimport { ICON_SIZE } from '@/design-system/tokens/uiSize/icon-size'\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n    Omit<VariantProps<typeof fieldWrapperStyles>, 'mode' | 'variant'> {\n  /** Field display mode */\n  mode?: FieldMode\n  /**\n   * Visual chrome(正交於 mode);Phase B1(2026-05-05)從 `variant` 改名 `chrome`,對齊 FieldContext.variant 透傳。\n   * - `'default'`(預設)— Field wrapper 完整 variant:bg-surface + 明顯 border + hover/focus 回饋。適用表單、Field 內嵌。\n   * - `'bare'` — 透明 variant,hover / focus 才出現 border。適用 Toolbar inline editing(如 FileViewer zoom input / chart config toolbar / rich text toolbar number input)+ DataTable cell-as-input。保留 padding / typography / height,只拿掉背景和常態 border。\n   *\n   * 透傳:在 `<Field variant=\"bare\">` 內自動繼承 context.variant;per-prop override context。\n   * 世界級對照(bare):VS Code settings input / Figma toolbar number / Notion prop input。\n   */\n  variant?: FieldVariant\n  /** Error 狀態（正交於 mode）。border-error + aria-invalid。 */\n  error?: boolean\n  /** 左側靜態 icon — 輔助理解 input 用途（如 Search）。fg-muted。 */\n  startIcon?: LucideIcon\n  /** 右側 inline action — 宣告式 API，Field 根據 size 自動渲染。 */\n  endAction?: InlineActionConfig\n  /**\n   * 右側 slot(ReactNode)— escape hatch 供 consumer 放自訂元素(如 DropdownMenuTrigger asChild + ItemInlineActionButton)。\n   * 跟 `endAction` 互斥(同時傳 endSlot 會優先,endAction 被忽略)。\n   *\n   * **使用情境**:ZoomInput 需要 chevron 作 DropdownMenuTrigger anchor,config-only API 無法做到。\n   * **禁止情境**:表單欄位 / 一般 inline action → 用 `endAction` 宣告式 API。\n   */\n  endSlot?: React.ReactNode\n  /**\n   * Loading 狀態(async 驗證 / debounce fetch 中)。\n   * - **input 保持可編輯**(user 可以邊改邊讀,debounce 場景 UX 最好)\n   * - 世界級對照:Ant Input.Search 派(input editable during loading);非 Material readonly 派\n   * - 自動在 endAction slot 塞 `<CircularProgress size={iconSize}/>`(與 endAction prop 互斥)\n   * - 宣告 `aria-busy=\"true\"` 讓 screen reader 感知處理中\n   */\n  loading?: boolean\n  /**\n   * Auto-width:Input 寬度 = 內容寬(value / placeholder 文字寬)+ startIcon + endAction + padding。\n   * 使用 CSS `field-sizing: content`(Chrome 123+ / Safari 17.4+;Firefox 還在實驗)。\n   *\n   * **使用情境**:\n   * - Inline edit(VS Code setting row / Figma property toolbar number input)\n   * - ZoomInput(FileViewer 縮放比例:輸入「100%」自動縮到三位數寬)\n   * - Tag / Chip 內 inline rename\n   *\n   * **不要用在**:表單 Field(Field 需要欄寬對齊,不該隨值跳動)\n   *\n   * **fallback**:不支援 `field-sizing` 的瀏覽器會退化為 `w-auto`(wrapper 縮到 content 尺寸,\n   * input 本身有 min-width 避免消失)。UX 上稍不一致但不致斷;若必須精準對齊所有瀏覽器,\n   * consumer 可自行傳 `style={{ width: ... }}` 顯式寬度,不走 auto。\n   */\n  autoWidth?: boolean\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      mode: modeProp,\n      variant: variantProp,\n      error = false,\n      size,\n      startIcon: StartIcon,\n      endAction,\n      endSlot,\n      loading = false,\n      autoWidth = false,\n      className,\n      disabled,\n      readOnly,\n      value,\n      id: idProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-errormessage': ariaErrorMessageProp,\n      ...props\n    },\n    ref\n  ) => {\n    // ── FieldContext 自動讀取(在 <Field> 內時,invalid / disabled / mode / chrome 由 context 接管) ──\n    const fieldCtx = useFieldContext()\n    // chrome 透傳:per-prop override context;context 沒值則 'default'\n    const variant: FieldVariant = variantProp ?? fieldCtx?.variant ?? 'default'\n    // mode resolve order(Phase B1 2026-05-05):\n    //   prop > fieldCtx.mode > (readOnly → 'readonly') > (disabled → 'disabled') > 'edit'\n    // loading 期間 input 保持可編輯(Ant Input.Search 派,UX「邊改邊讀」)\n    // 只用 aria-busy + endAction Spinner 標示狀態,不動 mode\n    const resolvedMode: FieldMode = modeProp\n      ?? fieldCtx?.mode\n      ?? (readOnly ? 'readonly' : disabled ? 'disabled' : 'edit')\n    const isEditable = resolvedMode === 'edit'\n    const isDisplay = resolvedMode === 'display'\n    // error 合併:自身 error prop OR Field context invalid\n    const resolvedError = error || (fieldCtx?.invalid ?? false)\n    // 2026-05-18 改 import ICON_SIZE SSOT(per user『做完』approval,消除 M17 違反 7+ 重複 ternary)\n  const iconSize = ICON_SIZE[size as 'sm' | 'md' | 'lg']\n    const iconColor = resolvedMode === 'disabled' ? 'text-fg-disabled' : 'text-fg-muted'\n\n    // ── display mode:純展示,渲染 <span> 取代 <input> ──\n    // 對齊 Carbon read-only / PatternFly inline-edit hidden-input / Cloudscape display-mode\n    if (isDisplay) {\n      const displayValue = value != null && value !== '' ? String(value) : null\n      return (\n        <div\n          className={cn(\n            fieldWrapperStyles({ mode: 'display', variant: variant, size }),\n            autoWidth && 'inline-flex w-auto',\n            className,\n          )}\n          data-field-mode=\"display\"\n        >\n          {StartIcon && (\n            <ItemPrefix>\n              <StartIcon\n                size={iconSize}\n                className={cn('pointer-events-none', iconColor)}\n                aria-hidden\n              />\n            </ItemPrefix>\n          )}\n          <span\n            className={cn(\n              bareInputStyles,\n              // B1 fix(2026-05-05):display mode 單行 ellipsis 截斷(對齊 Notion / Airtable / Linear\n              //   cell display canonical:single-line value 過長 → ellipsis。Textarea display 走 wrap path,\n              //   不在此處;Input display 永遠 single-line。)\n              'truncate',\n              displayValue == null && 'text-fg-muted',\n            )}\n          >\n            {displayValue ?? EMPTY_DISPLAY}\n          </span>\n        </div>\n      )\n    }\n\n    return (\n      <div\n        className={cn(\n          fieldWrapperStyles({ mode: resolvedMode, variant: variant, size }),\n          isEditable && resolvedError && [\n            'border-error hover:border-error-hover',\n            'focus-within:border-error focus-within:hover:border-error',\n          ],\n          // autoWidth:wrapper 縮到 inline-flex + w-auto,讓寬度由 startIcon + input(field-sizing: content)+ endAction 自然累加\n          autoWidth && 'inline-flex w-auto',\n          className,\n        )}\n        data-field-mode={resolvedMode}\n        data-error={isEditable && resolvedError ? '' : undefined}\n        aria-busy={loading || undefined}\n      >\n        {StartIcon && (\n          <ItemPrefix>\n            <StartIcon\n              size={iconSize}\n              className={cn('pointer-events-none', iconColor)}\n              aria-hidden\n            />\n          </ItemPrefix>\n        )}\n        <input\n          ref={ref}\n          type=\"text\"\n          id={idProp ?? fieldCtx?.id}\n          value={value as string | number | readonly string[] | undefined}\n          readOnly={resolvedMode === 'readonly'}\n          disabled={resolvedMode === 'disabled'}\n          aria-invalid={resolvedError || undefined}\n          aria-required={fieldCtx?.required || undefined}\n          aria-describedby={ariaDescribedByProp ?? fieldCtx?.descriptionId}\n          aria-errormessage={ariaErrorMessageProp ?? (resolvedError ? fieldCtx?.errorId : undefined)}\n          className={cn(\n            bareInputStyles,\n            resolvedMode === 'disabled' && 'text-fg-disabled placeholder:text-fg-disabled cursor-not-allowed',\n            // autoWidth:input 本身 field-sizing:content(Chrome 123+ / Safari 17.4+),寬度跟 value 文字寬。\n            // w-auto 關掉預設 w-full;min-w-0 讓 flex shrink 不卡住。\n            autoWidth && '[field-sizing:content] w-auto min-w-0',\n          )}\n          {...props}\n        />\n        {loading ? (\n          <CircularProgress size={iconSize} className=\"shrink-0\" />\n        ) : endSlot && isEditable ? (\n          // endSlot escape hatch:consumer 自控右側 slot(如 DropdownMenuTrigger asChild wrap)\n          endSlot\n        ) : endAction && isEditable ? (\n          <ItemInlineAction action={endAction} size={size ?? 'md'} />\n        ) : null}\n      </div>\n    )\n  }\n)\nInput.displayName = 'Input'\n\n// Phase B1(2026-05-05):InputDisplay 退場。改用 `<Input mode=\"display\" value={...} />`\n// 對齊 Carbon read-only / PatternFly inline-edit hidden-input / Cloudscape display-mode 統一 mode 模型。\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const inputMeta = {\n  component: 'Input',\n  family: 4,\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-surface'],\n    fg: ['text-fg-disabled', 'text-fg-muted'],\n    ring: [],\n  },\n} as const\n\nexport { Input }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"input.js","sources":["../../../src/components/Input/input.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport { type VariantProps } from 'class-variance-authority'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport type { FieldMode, FieldVariant } from '@/design-system/components/Field/field-types'\nimport { fieldWrapperStyles, bareInputStyles, EMPTY_DISPLAY } from '@/design-system/components/Field/field-wrapper'\nimport { useFieldContext, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldVariant, useResolvedFieldInvalid } from '@/design-system/components/Field/field-context'\nimport { ItemInlineAction, ItemPrefix, type InlineActionConfig } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { CircularProgress } from '@/design-system/components/CircularProgress/circular-progress'\nimport { ICON_SIZE } from '@/design-system/tokens/uiSize/icon-size'\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n    Omit<VariantProps<typeof fieldWrapperStyles>, 'mode' | 'variant'> {\n  /** Field display mode */\n  mode?: FieldMode\n  /**\n   * Visual chrome(正交於 mode);Phase B1(2026-05-05)從 `variant` 改名 `chrome`,對齊 FieldContext.variant 透傳。\n   * 公開 variant 兩個:\n   * - `'default'`(預設)— Field wrapper 完整 variant:bg-surface + 明顯 border + hover/focus 回饋。適用表單、Field 內嵌。\n   * - `'bare'` — 透明 variant,hover / focus 才出現 border。適用 Toolbar inline editing(如 FileViewer zoom input / chart config toolbar / rich text toolbar number input)。保留 padding / typography / height,只拿掉背景和常態 border。\n   *\n   * @internal `'naked'` — 完全無 chrome / 無 border / 無 focus ring。單獨使用無視覺邊界,**不可直接 standalone 用**;僅供 DS 內部 cell-as-input 組合(host cell 自管 border + focus visual,正被 `FieldSurfaceContext='table-cell'` 取代)。consumer 請用 `default` / `bare`。\n   *\n   * 透傳:在 `<Field variant=\"default|bare\">` 內自動繼承 context.variant;per-prop override context。\n   * 世界級對照(bare):VS Code settings input / Figma toolbar number / Notion prop input。\n   */\n  variant?: FieldVariant\n  /** Error 狀態（正交於 mode）。border-error + aria-invalid。 */\n  error?: boolean\n  /** 左側靜態 icon — 輔助理解 input 用途（如 Search）。fg-muted。 */\n  startIcon?: LucideIcon\n  /** 右側 inline action — 宣告式 API，Field 根據 size 自動渲染。 */\n  endAction?: InlineActionConfig\n  /**\n   * 右側 slot(ReactNode)— escape hatch 供 consumer 放自訂元素(如 DropdownMenuTrigger asChild + ItemInlineActionButton)。\n   * 跟 `endAction` 互斥(同時傳 endSlot 會優先,endAction 被忽略)。\n   *\n   * **使用情境**:ZoomInput 需要 chevron 作 DropdownMenuTrigger anchor,config-only API 無法做到。\n   * **禁止情境**:表單欄位 / 一般 inline action → 用 `endAction` 宣告式 API。\n   */\n  endSlot?: React.ReactNode\n  /**\n   * Loading 狀態(async 驗證 / debounce fetch 中)。\n   * - **input 保持可編輯**(user 可以邊改邊讀,debounce 場景 UX 最好)\n   * - 世界級對照:Ant Input.Search 派(input editable during loading);非 Material readonly 派\n   * - 自動在 endAction slot 塞 `<CircularProgress size={iconSize}/>`(與 endAction prop 互斥)\n   * - 宣告 `aria-busy=\"true\"` 讓 screen reader 感知處理中\n   */\n  loading?: boolean\n  /**\n   * Auto-width:Input 寬度 = 內容寬(value / placeholder 文字寬)+ startIcon + endAction + padding。\n   * 使用 CSS `field-sizing: content`(Chrome 123+ / Safari 17.4+;Firefox 還在實驗)。\n   *\n   * **使用情境**:\n   * - Inline edit(VS Code setting row / Figma property toolbar number input)\n   * - ZoomInput(FileViewer 縮放比例:輸入「100%」自動縮到三位數寬)\n   * - Tag / Chip 內 inline rename\n   *\n   * **不要用在**:表單 Field(Field 需要欄寬對齊,不該隨值跳動)\n   *\n   * **fallback**:不支援 `field-sizing` 的瀏覽器會退化為 `w-auto`(wrapper 縮到 content 尺寸,\n   * input 本身有 min-width 避免消失)。UX 上稍不一致但不致斷;若必須精準對齊所有瀏覽器,\n   * consumer 可自行傳 `style={{ width: ... }}` 顯式寬度,不走 auto。\n   */\n  autoWidth?: boolean\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      mode: modeProp,\n      variant: variantProp,\n      error = false,\n      size: sizeProp,\n      startIcon: StartIcon,\n      endAction,\n      endSlot,\n      loading = false,\n      autoWidth = false,\n      className,\n      disabled: disabledProp,\n      readOnly,\n      value,\n      id: idProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-errormessage': ariaErrorMessageProp,\n      ...props\n    },\n    ref\n  ) => {\n    // ── FieldContext 自動讀取(在 <Field> 內時,invalid / disabled / mode / chrome 由 context 接管) ──\n    const fieldCtx = useFieldContext()\n    // 2026-05-31 #11/#12:size + disabled 從 Field context cascade(對齊 NumberInput number-input.tsx:100-101\n    // + MUI FormControl)。原 Input 不讀 fieldCtx.size/disabled → <Field size=\"lg\"> / <Field disabled> 對 Input 無效。\n    const size = useResolvedFieldSize(sizeProp)\n    const disabled = useResolvedFieldDisabled(disabledProp)\n    // chrome 透傳:per-prop override context;context 沒值則 'default'\n    const variant: FieldVariant = useResolvedFieldVariant(variantProp)\n    // 2026-06-08 SSOT:mode 經 useResolvedFieldMode 統一解析(prop > 有效 disabled > fieldCtx.mode > readOnly > 'edit')。\n    // loading 期間 input 保持可編輯(Ant Input.Search 派),只用 aria-busy + endAction Spinner,不動 mode。\n    const resolvedMode: FieldMode = useResolvedFieldMode({ mode: modeProp, disabled, readOnly })\n    const isEditable = resolvedMode === 'edit'\n    const isDisplay = resolvedMode === 'display'\n    // error 合併:自身 error prop OR Field context invalid\n    const resolvedError = useResolvedFieldInvalid(error)\n    // 2026-05-18 改 import ICON_SIZE SSOT(per user『做完』approval,消除 M17 違反 7+ 重複 ternary)\n  const iconSize = ICON_SIZE[size as 'sm' | 'md' | 'lg']\n    const iconColor = resolvedMode === 'disabled' ? 'text-fg-disabled' : 'text-fg-muted'\n\n    // ── display mode:純展示,渲染 <span> 取代 <input> ──\n    // 對齊 Carbon read-only / PatternFly inline-edit hidden-input / Cloudscape display-mode\n    if (isDisplay) {\n      const displayValue = value != null && value !== '' ? String(value) : null\n      return (\n        <div\n          className={cn(\n            fieldWrapperStyles({ mode: 'display', variant: variant, size }),\n            autoWidth && 'inline-flex w-auto',\n            className,\n          )}\n          data-field-mode=\"display\"\n        >\n          {StartIcon && (\n            <ItemPrefix>\n              <StartIcon\n                size={iconSize}\n                className={cn('pointer-events-none', iconColor)}\n                aria-hidden\n              />\n            </ItemPrefix>\n          )}\n          <span\n            className={cn(\n              bareInputStyles,\n              // B1 fix(2026-05-05):display mode 單行 ellipsis 截斷(對齊 Notion / Airtable / Linear\n              //   cell display canonical:single-line value 過長 → ellipsis。Textarea display 走 wrap path,\n              //   不在此處;Input display 永遠 single-line。)\n              'truncate',\n              displayValue == null && 'text-fg-muted',\n            )}\n          >\n            {displayValue ?? EMPTY_DISPLAY}\n          </span>\n        </div>\n      )\n    }\n\n    return (\n      <div\n        className={cn(\n          fieldWrapperStyles({ mode: resolvedMode, variant: variant, size }),\n          isEditable && resolvedError && [\n            'border-error hover:border-error-hover',\n            'focus-within:border-error focus-within:hover:border-error',\n          ],\n          // autoWidth:wrapper 縮到 inline-flex + w-auto,讓寬度由 startIcon + input(field-sizing: content)+ endAction 自然累加\n          autoWidth && 'inline-flex w-auto',\n          className,\n        )}\n        data-field-mode={resolvedMode}\n        data-error={isEditable && resolvedError ? '' : undefined}\n        aria-busy={loading || undefined}\n      >\n        {StartIcon && (\n          <ItemPrefix>\n            <StartIcon\n              size={iconSize}\n              className={cn('pointer-events-none', iconColor)}\n              aria-hidden\n            />\n          </ItemPrefix>\n        )}\n        <input\n          ref={ref}\n          type=\"text\"\n          id={idProp ?? fieldCtx?.id}\n          value={value as string | number | readonly string[] | undefined}\n          readOnly={resolvedMode === 'readonly'}\n          disabled={resolvedMode === 'disabled'}\n          aria-invalid={resolvedError || undefined}\n          aria-required={fieldCtx?.required || undefined}\n          aria-describedby={ariaDescribedByProp ?? fieldCtx?.descriptionId}\n          aria-errormessage={ariaErrorMessageProp ?? (resolvedError ? fieldCtx?.errorId : undefined)}\n          className={cn(\n            bareInputStyles,\n            resolvedMode === 'disabled' && 'text-fg-disabled placeholder:text-fg-disabled cursor-not-allowed',\n            // autoWidth:input 本身 field-sizing:content(Chrome 123+ / Safari 17.4+),寬度跟 value 文字寬。\n            // w-auto 關掉預設 w-full;min-w-0 讓 flex shrink 不卡住。\n            autoWidth && '[field-sizing:content] w-auto min-w-0',\n          )}\n          {...props}\n        />\n        {loading ? (\n          <CircularProgress size={iconSize} className=\"shrink-0\" />\n        ) : endSlot && isEditable ? (\n          // endSlot escape hatch:consumer 自控右側 slot(如 DropdownMenuTrigger asChild wrap)\n          endSlot\n        ) : endAction && isEditable ? (\n          <ItemInlineAction action={endAction} size={size ?? 'md'} />\n        ) : null}\n      </div>\n    )\n  }\n)\nInput.displayName = 'Input'\n\n// Phase B1(2026-05-05):InputDisplay 退場。改用 `<Input mode=\"display\" value={...} />`\n// 對齊 Carbon read-only / PatternFly inline-edit hidden-input / Cloudscape display-mode 統一 mode 模型。\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const inputMeta = {\n  component: 'Input',\n  family: 4,\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-surface'],\n    fg: ['text-fg-disabled', 'text-fg-muted'],\n    ring: [],\n  },\n} as const\n\nexport { Input }\n"],"names":[],"mappings":"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"}

package/dist/components/LinkInput/index.d.ts

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

package/dist/components/LinkInput/index.d.ts.map

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

package/dist/components/LinkInput/index.js

@@ -0,0 +1,6 @@
+import { LinkInput, linkInputMeta } from "./link-input.js";
+export {
+  LinkInput,
+  linkInputMeta
+};
+//# sourceMappingURL=index.js.map

package/dist/components/LinkInput/index.js.map

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

package/dist/components/LinkInput/link-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link-input.d.ts","sourceRoot":"","sources":["../../../src/components/LinkInput/link-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAC3F,OAAO,EAAE,kBAAkB,EAAyD,MAAM,gDAAgD,CAAA;AA4C1I,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC,EACtF,IAAI,CAAC,YAAY,CAAC,OAAO,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnE,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAGD,QAAA,MAAM,SAAS,yFAyMd,CAAA;AAKD,eAAO,MAAM,aAAa;;;;;;;;;;;CAehB,CAAA;AAEV,OAAO,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"link-input.d.ts","sourceRoot":"","sources":["../../../src/components/LinkInput/link-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAC3F,OAAO,EAAE,kBAAkB,EAAyD,MAAM,gDAAgD,CAAA;AA4C1I,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC,EACtF,IAAI,CAAC,YAAY,CAAC,OAAO,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnE,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAGD,QAAA,MAAM,SAAS,yFA0Md,CAAA;AAKD,eAAO,MAAM,aAAa;;;;;;;;;;;CAehB,CAAA;AAEV,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/LinkInput/link-input.js

@@ -2,8 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Pencil } from "lucide-react";
 import { cn } from "../../lib/utils.js";
-import { EMPTY_DISPLAY, fieldWrapperStyles, bareInputStyles, fieldDisplayTextClass } from "../Field/field-wrapper.js";
-import { useFieldContext } from "../Field/field-context.js";
+import { EMPTY_DISPLAY, fieldDisplayTextClass, fieldWrapperStyles, bareInputStyles } from "../Field/field-wrapper.js";
+import { useFieldContext, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldVariant } from "../Field/field-context.js";
 import { ItemInlineAction } from "../../patterns/element-anatomy/item-anatomy.js";
 function isValidUrl(value) {
   if (!value) return true;
@@ -39,7 +39,7 @@ const LinkInput = React.forwardRef(
     mode: modeProp,
     variant: variantProp,
     error: errorProp = false,
-    size: sizeProp = "md",
+    size: sizeProp,
     value,
     onChange,
     placeholder = "https://",
@@ -47,18 +47,18 @@ const LinkInput = React.forwardRef(
     disabled: disabledProp,
     label,
     showDisplayEndIcon = false,
+    readOnly,
     id: idProp,
     "aria-describedby": ariaDescribedByProp,
     "aria-errormessage": ariaErrorMessageProp,
     ...props
   }, ref) => {
     const fieldCtx = useFieldContext();
-    const size = sizeProp ?? (fieldCtx == null ? void 0 : fieldCtx.size) ?? "md";
-    const disabled = disabledProp ?? (fieldCtx == null ? void 0 : fieldCtx.disabled);
-    const mode = modeProp ?? (fieldCtx == null ? void 0 : fieldCtx.mode) ?? "edit";
-    const resolvedMode = disabled ? "disabled" : mode;
+    const size = useResolvedFieldSize(sizeProp);
+    const disabled = useResolvedFieldDisabled(disabledProp);
+    const resolvedMode = useResolvedFieldMode({ mode: modeProp, disabled, readOnly });
     const isEditable = resolvedMode === "edit";
-    const resolvedVariant = variantProp ?? (fieldCtx == null ? void 0 : fieldCtx.variant) ?? "default";
+    const resolvedVariant = useResolvedFieldVariant(variantProp);
     if (resolvedMode === "display") {
       if (!showDisplayEndIcon) {
         if (!value) return /* @__PURE__ */ jsx("span", { className: cn(fieldDisplayTextClass(size), "text-fg-muted block truncate"), children: EMPTY_DISPLAY });

package/dist/components/LinkInput/link-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-input.js","sources":["../../../src/components/LinkInput/link-input.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Pencil } from 'lucide-react'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport type { FieldMode, FieldVariant } from '@/design-system/components/Field/field-types'\nimport { fieldWrapperStyles, bareInputStyles, EMPTY_DISPLAY, fieldDisplayTextClass } from '@/design-system/components/Field/field-wrapper'\nimport { useFieldContext } from '@/design-system/components/Field/field-context'\nimport { ItemInlineAction } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n// ── URL Validation ──────────────────────────────────────────────────────────\n\nfunction isValidUrl(value: string): boolean {\n  if (!value) return true\n  try {\n    const url = new URL(value)\n    return url.protocol === 'http:' || url.protocol === 'https:'\n  } catch {\n    return false\n  }\n}\n\nfunction formatHostname(url: string): string {\n  try {\n    return new URL(url).hostname.replace(/^www\\./, '')\n  } catch {\n    return url\n  }\n}\n\n// ── Display rendering(inline,2026-05-05 Phase B3 retire LinkInputDisplay)──\n// 取代 LinkInputDisplay sub-component:純展示 a tag,無 input chrome、無 hover affordance。\n// edit mode 內 link state(showLink branch)也共用此 helper,確保「編輯態的 link 顯示」與\n// display mode 的視覺完全一致(SSOT)。\nfunction renderLinkAnchor(value: string, label?: string) {\n  const displayText = label || formatHostname(value)\n  return (\n    <a\n      href={value}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className=\"block truncate min-w-0 text-primary hover:text-primary-hover hover:underline transition-colors\"\n    >\n      {displayText}\n    </a>\n  )\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n\nexport interface LinkInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'onChange'>,\n    Omit<VariantProps<typeof fieldWrapperStyles>, 'mode' | 'variant'> {\n  mode?: FieldMode\n  /**\n   * Visual chrome(2026-05-05 Phase B3)。對齊 FieldContext.variant 透傳。\n   * - `'default'`(預設)— Field wrapper 完整 chrome(form / Field 內嵌)。\n   * - `'bare'` — 透明 variant,hover/focus 才現 border(Toolbar inline edit / DataTable cell-as-input)。\n   *\n   * mode='display' 時 chrome 無視覺意義(display 完全無 wrapper);chrome 僅作用於 edit / readonly / disabled。\n   */\n  variant?: FieldVariant\n  error?: boolean\n  value?: string | null\n  onChange?: (value: string) => void\n  placeholder?: string\n  className?: string\n  disabled?: boolean\n  /** 自訂顯示文字（非編輯時） */\n  label?: string\n  /**\n   * Display 是否包 Field naked wrapper(D-path opt-in,2026-05-08)\n   * — DataTable cell display↔edit 像素級對齊用。預設 false(裸 anchor,backward compat)。\n   * 設 true 時 display 走 fieldWrapperStyles(naked variant)包覆 anchor,\n   * 與 cell edit (`<Input naked>`) 同 DOM 結構,消除 Layer-B padding mismatch。\n   * **本元件 edit 無 endIcon(UrlCell 用 plain Input edit)→ display 也無 ItemSuffix**(僅 wrapper)。\n   */\n  showDisplayEndIcon?: boolean\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst LinkInput = React.forwardRef<HTMLInputElement, LinkInputProps>(\n  (\n    {\n      mode: modeProp,\n      variant: variantProp,\n      error: errorProp = false,\n      size: sizeProp = 'md',\n      value,\n      onChange,\n      placeholder = 'https://',\n      className,\n      disabled: disabledProp,\n      label,\n      showDisplayEndIcon = false,\n      id: idProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-errormessage': ariaErrorMessageProp,\n      ...props\n    },\n    ref\n  ) => {\n    const fieldCtx = useFieldContext()\n    const size = sizeProp ?? fieldCtx?.size ?? 'md'\n    const disabled = disabledProp ?? fieldCtx?.disabled\n    // mode resolution:disabled prop 一律覆蓋;否則 prop > context.mode > default 'edit'\n    const mode: FieldMode = modeProp ?? fieldCtx?.mode ?? 'edit'\n    const resolvedMode: FieldMode = disabled ? 'disabled' : mode\n    const isEditable = resolvedMode === 'edit'\n    // chrome resolution:per-prop > context > 'default'\n    const resolvedVariant: FieldVariant = variantProp ?? fieldCtx?.variant ?? 'default'\n\n    // ── mode='display' ─────────────────────────────────────────────────────\n    // 純展示:無 input chrome / 無 hover affordance / 無 Pencil edit 入口。\n    // 取代既有 LinkInputDisplay sub-component(2026-05-05 Phase B3 retire)。\n    // Default(showDisplayEndIcon=false):無 wrapper 裸 anchor — backward compat。\n    // Opt-in(showDisplayEndIcon=true,2026-05-08 D-path):Field naked wrapper 包覆 anchor,\n    // 與 cell edit (`<Input naked>`) 同 DOM 結構消除像素偏移(無 ItemSuffix,因 edit 也無 endIcon)。\n    if (resolvedMode === 'display') {\n      if (!showDisplayEndIcon) {\n        // 2026-05-14 I2 fix(spec contract (e) display typography canonical):非 D-path bare\n        // anchor / span 必套 `fieldDisplayTextClass(size)`(sm/md→text-body,lg→text-body-lg)\n        // — 對齊跨 Field family display 視覺尺寸統一。原無 font-size class → 用 browser default\n        // 字體 → 跟其他 Field display 不一致(user 抓 I2)。truncate 同需,長 URL ellipsis(I1)。\n        if (!value) return <span className={cn(fieldDisplayTextClass(size), 'text-fg-muted block truncate')}>{EMPTY_DISPLAY}</span>\n        return <span className={cn(fieldDisplayTextClass(size), 'block truncate')}>{renderLinkAnchor(value, label)}</span>\n      }\n      return (\n        <div\n          className={cn(fieldWrapperStyles({ mode: 'display', variant: resolvedVariant, size }), className)}\n          data-field-mode=\"display\"\n        >\n          <span className=\"flex-1 min-w-0 truncate\">\n            {value\n              ? renderLinkAnchor(value, label)\n              : <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>\n            }\n          </span>\n        </div>\n      )\n    }\n\n    const [editing, setEditing] = React.useState(false)\n    const [localValue, setLocalValue] = React.useState(value ?? '')\n    const [localError, setLocalError] = React.useState(false)\n    const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n    // Sync external value → local\n    React.useEffect(() => {\n      if (!editing) setLocalValue(value ?? '')\n    }, [value, editing])\n\n    // Merge refs\n    const setRef = React.useCallback((el: HTMLInputElement | null) => {\n      inputRef.current = el\n      if (typeof ref === 'function') ref(el)\n      else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = el\n    }, [ref])\n\n    const hasValidValue = !!value && isValidUrl(value)\n    const showLink = isEditable && hasValidValue && !editing && !localError\n    const error = errorProp || localError\n\n    // 2026-05-16 audit codex Round 6:capture rAF + cancel on unmount(defensive hygiene)\n    const focusRafIdRef = React.useRef<number>(0)\n    React.useEffect(() => () => { if (focusRafIdRef.current) cancelAnimationFrame(focusRafIdRef.current) }, [])\n\n    const handleEdit = () => {\n      setEditing(true)\n      if (focusRafIdRef.current) cancelAnimationFrame(focusRafIdRef.current)\n      focusRafIdRef.current = requestAnimationFrame(() => {\n        focusRafIdRef.current = 0\n        inputRef.current?.focus()\n      })\n    }\n\n    const handleBlur = () => {\n      setEditing(false)\n      const trimmed = localValue.trim()\n      if (!trimmed) {\n        // Empty is OK — clear value\n        setLocalError(false)\n        onChange?.('')\n        return\n      }\n      if (isValidUrl(trimmed)) {\n        setLocalError(false)\n        onChange?.(trimmed)\n      } else {\n        setLocalError(true)\n      }\n    }\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      setLocalValue(e.target.value)\n      // Clear error on edit (blur validation)\n      if (localError) setLocalError(false)\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter') inputRef.current?.blur()\n      if (e.key === 'Escape') {\n        setLocalValue(value ?? '')\n        setLocalError(false)\n        setEditing(false)\n      }\n    }\n\n    // readonly — 顯示藍色連結（可點擊）\n    // disabled — 顯示純文字 fg-disabled（不可點擊）\n    if (!isEditable) {\n      const displayText = value ? (label || formatHostname(value)) : null\n      return (\n        <div\n          className={cn(fieldWrapperStyles({ mode: resolvedMode, variant: resolvedVariant, size }), className)}\n          data-field-mode={resolvedMode}\n        >\n          <span className=\"flex-1 min-w-0 truncate\">\n            {resolvedMode === 'disabled'\n              ? (displayText\n                  ? <span className=\"text-fg-disabled\">{displayText}</span>\n                  : <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>)\n              : (value\n                  ? renderLinkAnchor(value, label)\n                  : <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>)\n            }\n          </span>\n        </div>\n      )\n    }\n\n    // edit — link display mode（有合法 URL 且未在編輯中）\n    if (showLink) {\n      return (\n        <div\n          className={cn(fieldWrapperStyles({ mode: 'edit', variant: resolvedVariant, size }), className)}\n          data-field-mode=\"edit\"\n        >\n          <span className=\"flex-1 min-w-0\">\n            {value && renderLinkAnchor(value, label)}\n          </span>\n          <ItemInlineAction\n            size={size ?? 'md'}\n            action={{ icon: Pencil, label: '編輯連結', onClick: handleEdit }} // i18n-allow: DS default inline-action label\n          />\n        </div>\n      )\n    }\n\n    // edit — text input mode（正在編輯、無值、或格式錯誤）\n    return (\n      <div\n        className={cn(\n          fieldWrapperStyles({ mode: 'edit', variant: resolvedVariant, size }),\n          error && [\n            'border-error hover:border-error-hover',\n            'focus-within:border-error focus-within:hover:border-error',\n          ],\n          className,\n        )}\n        data-field-mode=\"edit\"\n        data-error={error ? '' : undefined}\n      >\n        <input\n          ref={setRef}\n          type=\"url\"\n          id={idProp ?? fieldCtx?.id}\n          value={localValue}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          aria-invalid={(error || fieldCtx?.invalid) || undefined}\n          aria-required={fieldCtx?.required || undefined}\n          aria-describedby={ariaDescribedByProp ?? fieldCtx?.descriptionId}\n          aria-errormessage={ariaErrorMessageProp ?? ((error || fieldCtx?.invalid) ? fieldCtx?.errorId : undefined)}\n          className={bareInputStyles}\n          {...props}\n        />\n      </div>\n    )\n  }\n)\nLinkInput.displayName = 'LinkInput'\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const linkInputMeta = {\n  component: 'LinkInput',\n  family: 4,\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: [],\n    fg: ['text-fg-disabled', 'text-fg-muted', 'text-primary'],\n    ring: [],\n  },\n} as const\n\nexport { LinkInput }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"link-input.js","sources":["../../../src/components/LinkInput/link-input.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Pencil } from 'lucide-react'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport type { FieldMode, FieldVariant } from '@/design-system/components/Field/field-types'\nimport { fieldWrapperStyles, bareInputStyles, EMPTY_DISPLAY, fieldDisplayTextClass } from '@/design-system/components/Field/field-wrapper'\nimport { useFieldContext, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldVariant } from '@/design-system/components/Field/field-context'\nimport { ItemInlineAction } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n// ── URL Validation ──────────────────────────────────────────────────────────\n\nfunction isValidUrl(value: string): boolean {\n  if (!value) return true\n  try {\n    const url = new URL(value)\n    return url.protocol === 'http:' || url.protocol === 'https:'\n  } catch {\n    return false\n  }\n}\n\nfunction formatHostname(url: string): string {\n  try {\n    return new URL(url).hostname.replace(/^www\\./, '')\n  } catch {\n    return url\n  }\n}\n\n// ── Display rendering(inline,2026-05-05 Phase B3 retire LinkInputDisplay)──\n// 取代 LinkInputDisplay sub-component:純展示 a tag,無 input chrome、無 hover affordance。\n// edit mode 內 link state(showLink branch)也共用此 helper,確保「編輯態的 link 顯示」與\n// display mode 的視覺完全一致(SSOT)。\nfunction renderLinkAnchor(value: string, label?: string) {\n  const displayText = label || formatHostname(value)\n  return (\n    <a\n      href={value}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className=\"block truncate min-w-0 text-primary hover:text-primary-hover hover:underline transition-colors\"\n    >\n      {displayText}\n    </a>\n  )\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n\nexport interface LinkInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'onChange'>,\n    Omit<VariantProps<typeof fieldWrapperStyles>, 'mode' | 'variant'> {\n  mode?: FieldMode\n  /**\n   * Visual chrome(2026-05-05 Phase B3)。對齊 FieldContext.variant 透傳。\n   * - `'default'`(預設)— Field wrapper 完整 chrome(form / Field 內嵌)。\n   * - `'bare'` — 透明 variant,hover/focus 才現 border(Toolbar inline edit / DataTable cell-as-input)。\n   *\n   * mode='display' 時 chrome 無視覺意義(display 完全無 wrapper);chrome 僅作用於 edit / readonly / disabled。\n   */\n  variant?: FieldVariant\n  error?: boolean\n  value?: string | null\n  onChange?: (value: string) => void\n  placeholder?: string\n  className?: string\n  disabled?: boolean\n  /** 自訂顯示文字（非編輯時） */\n  label?: string\n  /**\n   * Display 是否包 Field naked wrapper(D-path opt-in,2026-05-08)\n   * — DataTable cell display↔edit 像素級對齊用。預設 false(裸 anchor,backward compat)。\n   * 設 true 時 display 走 fieldWrapperStyles(naked variant)包覆 anchor,\n   * 與 cell edit (`<Input naked>`) 同 DOM 結構,消除 Layer-B padding mismatch。\n   * **本元件 edit 無 endIcon(UrlCell 用 plain Input edit)→ display 也無 ItemSuffix**(僅 wrapper)。\n   */\n  showDisplayEndIcon?: boolean\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst LinkInput = React.forwardRef<HTMLInputElement, LinkInputProps>(\n  (\n    {\n      mode: modeProp,\n      variant: variantProp,\n      error: errorProp = false,\n      size: sizeProp,\n      value,\n      onChange,\n      placeholder = 'https://',\n      className,\n      disabled: disabledProp,\n      label,\n      showDisplayEndIcon = false,\n      readOnly,\n      id: idProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-errormessage': ariaErrorMessageProp,\n      ...props\n    },\n    ref\n  ) => {\n    const fieldCtx = useFieldContext()\n    const size = useResolvedFieldSize(sizeProp)\n    const disabled = useResolvedFieldDisabled(disabledProp)\n    // 2026-06-08 SSOT:mode 經 useResolvedFieldMode 統一解析(prop > 有效 disabled > fieldCtx.mode > readOnly > 'edit')。\n    // spec field-controls.spec.md L125「readOnly 原生屬性自動覆蓋 mode」契約落地。\n    const resolvedMode: FieldMode = useResolvedFieldMode({ mode: modeProp, disabled, readOnly })\n    const isEditable = resolvedMode === 'edit'\n    // chrome resolution:per-prop > context > 'default'\n    const resolvedVariant: FieldVariant = useResolvedFieldVariant(variantProp)\n\n    // ── mode='display' ─────────────────────────────────────────────────────\n    // 純展示:無 input chrome / 無 hover affordance / 無 Pencil edit 入口。\n    // 取代既有 LinkInputDisplay sub-component(2026-05-05 Phase B3 retire)。\n    // Default(showDisplayEndIcon=false):無 wrapper 裸 anchor — backward compat。\n    // Opt-in(showDisplayEndIcon=true,2026-05-08 D-path):Field naked wrapper 包覆 anchor,\n    // 與 cell edit (`<Input naked>`) 同 DOM 結構消除像素偏移(無 ItemSuffix,因 edit 也無 endIcon)。\n    if (resolvedMode === 'display') {\n      if (!showDisplayEndIcon) {\n        // 2026-05-14 I2 fix(spec contract (e) display typography canonical):非 D-path bare\n        // anchor / span 必套 `fieldDisplayTextClass(size)`(sm/md→text-body,lg→text-body-lg)\n        // — 對齊跨 Field family display 視覺尺寸統一。原無 font-size class → 用 browser default\n        // 字體 → 跟其他 Field display 不一致(user 抓 I2)。truncate 同需,長 URL ellipsis(I1)。\n        if (!value) return <span className={cn(fieldDisplayTextClass(size), 'text-fg-muted block truncate')}>{EMPTY_DISPLAY}</span>\n        return <span className={cn(fieldDisplayTextClass(size), 'block truncate')}>{renderLinkAnchor(value, label)}</span>\n      }\n      return (\n        <div\n          className={cn(fieldWrapperStyles({ mode: 'display', variant: resolvedVariant, size }), className)}\n          data-field-mode=\"display\"\n        >\n          <span className=\"flex-1 min-w-0 truncate\">\n            {value\n              ? renderLinkAnchor(value, label)\n              : <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>\n            }\n          </span>\n        </div>\n      )\n    }\n\n    const [editing, setEditing] = React.useState(false)\n    const [localValue, setLocalValue] = React.useState(value ?? '')\n    const [localError, setLocalError] = React.useState(false)\n    const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n    // Sync external value → local\n    React.useEffect(() => {\n      if (!editing) setLocalValue(value ?? '')\n    }, [value, editing])\n\n    // Merge refs\n    const setRef = React.useCallback((el: HTMLInputElement | null) => {\n      inputRef.current = el\n      if (typeof ref === 'function') ref(el)\n      else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = el\n    }, [ref])\n\n    const hasValidValue = !!value && isValidUrl(value)\n    const showLink = isEditable && hasValidValue && !editing && !localError\n    const error = errorProp || localError\n\n    // 2026-05-16 audit codex Round 6:capture rAF + cancel on unmount(defensive hygiene)\n    const focusRafIdRef = React.useRef<number>(0)\n    React.useEffect(() => () => { if (focusRafIdRef.current) cancelAnimationFrame(focusRafIdRef.current) }, [])\n\n    const handleEdit = () => {\n      setEditing(true)\n      if (focusRafIdRef.current) cancelAnimationFrame(focusRafIdRef.current)\n      focusRafIdRef.current = requestAnimationFrame(() => {\n        focusRafIdRef.current = 0\n        inputRef.current?.focus()\n      })\n    }\n\n    const handleBlur = () => {\n      setEditing(false)\n      const trimmed = localValue.trim()\n      if (!trimmed) {\n        // Empty is OK — clear value\n        setLocalError(false)\n        onChange?.('')\n        return\n      }\n      if (isValidUrl(trimmed)) {\n        setLocalError(false)\n        onChange?.(trimmed)\n      } else {\n        setLocalError(true)\n      }\n    }\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      setLocalValue(e.target.value)\n      // Clear error on edit (blur validation)\n      if (localError) setLocalError(false)\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter') inputRef.current?.blur()\n      if (e.key === 'Escape') {\n        setLocalValue(value ?? '')\n        setLocalError(false)\n        setEditing(false)\n      }\n    }\n\n    // readonly — 顯示藍色連結（可點擊）\n    // disabled — 顯示純文字 fg-disabled（不可點擊）\n    if (!isEditable) {\n      const displayText = value ? (label || formatHostname(value)) : null\n      return (\n        <div\n          className={cn(fieldWrapperStyles({ mode: resolvedMode, variant: resolvedVariant, size }), className)}\n          data-field-mode={resolvedMode}\n        >\n          <span className=\"flex-1 min-w-0 truncate\">\n            {resolvedMode === 'disabled'\n              ? (displayText\n                  ? <span className=\"text-fg-disabled\">{displayText}</span>\n                  : <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>)\n              : (value\n                  ? renderLinkAnchor(value, label)\n                  : <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>)\n            }\n          </span>\n        </div>\n      )\n    }\n\n    // edit — link display mode（有合法 URL 且未在編輯中）\n    if (showLink) {\n      return (\n        <div\n          className={cn(fieldWrapperStyles({ mode: 'edit', variant: resolvedVariant, size }), className)}\n          data-field-mode=\"edit\"\n        >\n          <span className=\"flex-1 min-w-0\">\n            {value && renderLinkAnchor(value, label)}\n          </span>\n          <ItemInlineAction\n            size={size ?? 'md'}\n            action={{ icon: Pencil, label: '編輯連結', onClick: handleEdit }} // i18n-allow: DS default inline-action label\n          />\n        </div>\n      )\n    }\n\n    // edit — text input mode（正在編輯、無值、或格式錯誤）\n    return (\n      <div\n        className={cn(\n          fieldWrapperStyles({ mode: 'edit', variant: resolvedVariant, size }),\n          error && [\n            'border-error hover:border-error-hover',\n            'focus-within:border-error focus-within:hover:border-error',\n          ],\n          className,\n        )}\n        data-field-mode=\"edit\"\n        data-error={error ? '' : undefined}\n      >\n        <input\n          ref={setRef}\n          type=\"url\"\n          id={idProp ?? fieldCtx?.id}\n          value={localValue}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          aria-invalid={(error || fieldCtx?.invalid) || undefined}\n          aria-required={fieldCtx?.required || undefined}\n          aria-describedby={ariaDescribedByProp ?? fieldCtx?.descriptionId}\n          aria-errormessage={ariaErrorMessageProp ?? ((error || fieldCtx?.invalid) ? fieldCtx?.errorId : undefined)}\n          className={bareInputStyles}\n          {...props}\n        />\n      </div>\n    )\n  }\n)\nLinkInput.displayName = 'LinkInput'\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const linkInputMeta = {\n  component: 'LinkInput',\n  family: 4,\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: [],\n    fg: ['text-fg-disabled', 'text-fg-muted', 'text-primary'],\n    ring: [],\n  },\n} as const\n\nexport { LinkInput }\n"],"names":[],"mappings":"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"}

package/dist/components/Menu/index.d.ts

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

package/dist/components/Menu/index.d.ts.map

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

package/dist/components/Menu/index.js

@@ -0,0 +1,9 @@
+import { MenuFooter, MenuGroup, MenuItem, menuItemMeta, menuItemVariants } from "./menu-item.js";
+export {
+  MenuFooter,
+  MenuGroup,
+  MenuItem,
+  menuItemMeta,
+  menuItemVariants
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Menu/index.js.map

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

package/dist/components/Menu/menu-item.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @internal — DS-internal 單元(per `.claude/rules/ui-development.md` Public vs Internal canonical;spec frontmatter `isInternal`)。
+ * 不進 root barrel front-door;由 DropdownMenu / SelectMenu 等 menu 類 DS 元件 wrap 消費,end-user app 請用 wrapper 元件。
+ */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 import type { LucideIcon } from 'lucide-react';
@@ -32,7 +36,7 @@ export interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      * Label 最大行數(line-clamp 截斷,超過顯示 ellipsis)。
      *
      * - `undefined`(預設 prop 值未傳)→ 套用元件預設 `1`(單行截斷,符合選單快速掃視需求)
-     * - 數字 → 截斷到該行數
+     * - 數字(1-6)→ 截斷到該行數;>6 超出 line-clamp utility 支援範圍 → 不截斷(同 'none',見 lineClampClass)
      * - `'none'` → **明確**不截斷,自然 wrap 任意行數
      *
      * 為什麼用 `'none'` 而不是 `undefined` 表達不截斷?React props 的 destructure default
@@ -44,7 +48,7 @@ export interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      * Description 最大行數。
      *
      * - `undefined`(預設 prop 值未傳)→ 套用元件預設 `1`(跟 label 對稱,維持掃視節奏)
-     * - 數字 → 截斷到該行數
+     * - 數字(1-6)→ 截斷到該行數;>6 超出 line-clamp utility 支援範圍 → 不截斷(同 'none',見 lineClampClass)
      * - `'none'` → 明確不截斷
      *
      * 為什麼預設 1?Menu 的設計目的是「快速掃視多個選項挑一個」,垂直空間是

package/dist/components/Menu/menu-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/menu-item.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAG9C,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,0CAA0C,CAAA;AA0BlF,QAAA,MAAM,gBAAgB;;8EAkBrB,CAAA;AASD,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EAC5D,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,eAAe;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,sCAAsC;IACtC,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,sDAAsD;IACtD,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,GAAG,eAAe,CAAA;IACnC,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6BAA6B;IAC7B,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,mEAAmE;IACnE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,SAAS;IACT,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uCAAuC;IACvC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC/B;AAeD,QAAA,MAAM,QAAQ,sFA2Ib,CAAA;AAeD,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,SAAS,uFAWd,CAAA;AAKD,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,UAAU,wFAUf,CAAA;AAID,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;CAef,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/menu-item.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAG9C,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,0CAA0C,CAAA;AA0BlF,QAAA,MAAM,gBAAgB;;8EAkBrB,CAAA;AASD,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EAC5D,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,eAAe;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,sCAAsC;IACtC,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,sDAAsD;IACtD,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,GAAG,eAAe,CAAA;IACnC,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6BAA6B;IAC7B,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,mEAAmE;IACnE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,SAAS;IACT,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uCAAuC;IACvC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC/B;AAeD,QAAA,MAAM,QAAQ,sFA4Ib,CAAA;AAeD,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,SAAS,uFAWd,CAAA;AAKD,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,UAAU,wFAUf,CAAA;AAID,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;CAef,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/Menu/menu-item.js

@@ -145,7 +145,8 @@ const MenuItem = React.forwardRef(
               descriptionClassName: cn(descClampClass || "break-words")
             }
           ),
-          (tag || endContent) && /* @__PURE__ */ jsxs("div", { className: cn(
+          (tag || endContent) && // @row-slot-handcraft-allow: MenuItem 自身即 row primitive（item-anatomy Family 1 owner），此 tag/endContent 容器是 MenuItem 自有 suffix slot 實作，非外部 consumer hand-craft → 不再 wrap ItemSuffix
+          /* @__PURE__ */ jsxs("div", { className: cn(
             "flex items-center gap-2 shrink-0 h-[1lh] ml-auto",
             disabled && "opacity-disabled"
           ), children: [