@qijenchen/design-system 0.1.0-beta.85 → 0.1.0-beta.86

package/src/components/DatePicker/date-picker.stories.tsx

@@ -76,8 +76,8 @@ export const Modes: Story = {
       </div>
       {/* @story-trait-rationale: pre-existing trait gaps tracked separately */}
       <div>
-        <h3 className="text-body font-bold text-foreground mb-2">display</h3>
-        <DatePicker mode="display" value="2026-04-02" />
+        <h3 className="text-body font-bold text-foreground mb-2">view</h3>
+        <DatePicker mode="view" value="2026-04-02" />
       </div>
       <div>
         <h3 className="text-body font-bold text-foreground mb-2">readonly</h3>
@@ -315,26 +315,26 @@ export const ShowTimeRange: Story = {
   },
 }
 
-/* ── Display（DataTable cell 用）── */
-export const Display: Story = {
-  name: '展示樣式',
+/* ── View（DataTable cell 用）── */
+export const View: Story = {
+  name: '檢視樣式',
   render: () => (
     <div className="flex flex-col gap-3">
       <div className="flex items-center gap-3">
         <span className="text-caption text-fg-muted w-20">預設</span>
-        <DatePicker mode="display" value="2026-04-02" />
+        <DatePicker mode="view" value="2026-04-02" />
       </div>
       <div className="flex items-center gap-3">
         <span className="text-caption text-fg-muted w-20">完整月份</span>
-        <DatePicker mode="display" value="2026-04-02" formatOptions={{ year: 'numeric', month: 'long', day: 'numeric' }} />
+        <DatePicker mode="view" value="2026-04-02" formatOptions={{ year: 'numeric', month: 'long', day: 'numeric' }} />
       </div>
       <div className="flex items-center gap-3">
         <span className="text-caption text-fg-muted w-20">zh-TW</span>
-        <DatePicker mode="display" value="2026-04-02" locale="zh-TW" formatOptions={{ year: 'numeric', month: 'long', day: 'numeric' }} />
+        <DatePicker mode="view" value="2026-04-02" locale="zh-TW" formatOptions={{ year: 'numeric', month: 'long', day: 'numeric' }} />
       </div>
       <div className="flex items-center gap-3">
         <span className="text-caption text-fg-muted w-20">null</span>
-        <DatePicker mode="display" value={null} />
+        <DatePicker mode="view" value={null} />
       </div>
     </div>
   ),

package/src/components/DatePicker/date-picker.tsx

@@ -328,9 +328,9 @@ export interface DatePickerProps
    */
   needConfirm?: boolean
   /**
-   * Display 是否渲 Calendar icon + Field naked wrapper(D-path opt-in,2026-05-08)
-   * — DataTable cell display↔edit 像素級對齊用。預設 false(裸 span,backward compat)。
-   * 設 true 時 display 走 fieldWrapperStyles(naked variant)+ ItemSuffix CalendarIcon,
+   * View 態是否渲 Calendar icon + Field naked wrapper(D-path opt-in,2026-05-08)
+   * — DataTable cell view↔edit 像素級對齊用。預設 false(裸 span,backward compat)。
+   * 設 true 時 view 走 fieldWrapperStyles(naked variant)+ ItemSuffix CalendarIcon,
    * 與 edit 同 DOM 結構,消除 Layer-B padding mismatch。
    */
   showDisplayEndIcon?: boolean
@@ -409,7 +409,7 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(
     const size = useResolvedFieldSize(sizeProp)  // B 組 cascade fix:<Field size>/cell surface-size 對 DatePicker 生效
     const error = useResolvedFieldInvalid(errorProp)
     const disabled = useResolvedFieldDisabled(disabledProp)
-    // 2026-06-08 SSOT:mode 經 useResolvedFieldMode;修 <Field mode="display"> 漏 cascade
+    // 2026-06-08 SSOT:mode 經 useResolvedFieldMode;修 <Field mode="view"> 漏 cascade
     const resolvedMode = useResolvedFieldMode({ mode, disabled })
     const emptyDisplay = useFieldEmptyDisplay()
     const variant: FieldVariantInternal = useResolvedFieldVariant(variantProp)
@@ -475,21 +475,21 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(
       }
     }, [onChange, showTime])
 
-    // mode='display'(Phase B2 2026-05-05):純內容輸出 — 對齊原 DatePickerDisplay sub-component(retired)。
+    // mode='view'(Phase B2 2026-05-05):純內容輸出 — 對齊原 DatePickerDisplay sub-component(retired)。
     //   Default(showDisplayEndIcon=false):無 Field wrapper / 無 Calendar icon — backward compat 裸 span。
     //   Opt-in(showDisplayEndIcon=true,2026-05-08 D-path):Field naked wrapper + ItemSuffix Calendar,
-    //   與 edit 同結構消除 cell display↔edit 像素偏移(Layer-B padding mismatch)。
-    if (resolvedMode === 'display') {
+    //   與 edit 同結構消除 cell view↔edit 像素偏移(Layer-B padding mismatch)。
+    if (resolvedMode === 'view') {
       if (!showDisplayEndIcon) {
-        // 2026-05-14 I2 fix(spec contract (e) display typography canonical):bare span 套
+        // 2026-05-14 I2 fix(spec contract (e) view typography canonical):bare span 套
         // `fieldDisplayTextClass(size)`(sm/md→text-body,lg→text-body-lg)— 對齊 Field family 統一。
         if (!value) return <span className={cn(fieldDisplayTextClass(size), fieldEmptyColorClass(resolvedMode), className)}>{emptyDisplay}</span>
         return <span className={cn(fieldDisplayTextClass(size), 'truncate', className)}>{displayCommitted}</span>
       }
       return (
         <div
-          className={cn(fieldWrapperStyles({ mode: 'display', variant, width, size }), className)}
-          data-field-mode="display"
+          className={cn(fieldWrapperStyles({ mode: 'view', variant, width, size }), className)}
+          data-field-mode="view"
         >
           <span className={cn(bareInputStyles, 'flex-1 min-w-0 truncate', !value && fieldEmptyColorClass(resolvedMode))}>
             {value ? displayCommitted : emptyDisplay}
@@ -801,7 +801,7 @@ const DatePickerRange = React.forwardRef<HTMLDivElement, DatePickerRangeProps>(
     const size = useResolvedFieldSize(sizeProp)  // B 組 cascade fix:<Field size>/cell surface-size 對 DatePicker 生效
     const error = useResolvedFieldInvalid(errorProp)
     const disabled = useResolvedFieldDisabled(disabledProp)
-    // 2026-06-08 SSOT:mode 經 useResolvedFieldMode;修 <Field mode="display"> 漏 cascade
+    // 2026-06-08 SSOT:mode 經 useResolvedFieldMode;修 <Field mode="view"> 漏 cascade
     const resolvedMode = useResolvedFieldMode({ mode, disabled })
     const emptyDisplay = useFieldEmptyDisplay()
     const variant: FieldVariantInternal = useResolvedFieldVariant(variantProp)
@@ -936,8 +936,8 @@ const DatePickerRange = React.forwardRef<HTMLDivElement, DatePickerRangeProps>(
       return false
     }, [activeEnd, startDate, endDate])
 
-    // mode='display'(Phase B2 2026-05-05):純內容輸出 — 無 Field wrapper / 無 Calendar icon。
-    if (resolvedMode === 'display') {
+    // mode='view'(Phase B2 2026-05-05):純內容輸出 — 無 Field wrapper / 無 Calendar icon。
+    if (resolvedMode === 'view') {
       const hasAny = !!(startIso || endIso)
       if (!hasAny) return <span className={cn(fieldEmptyColorClass(resolvedMode), className)}>{emptyDisplay}</span>
       return (

package/src/components/DescriptionList/description-list.anatomy.stories.tsx

@@ -5,7 +5,7 @@
 //     foreground(value),無 variant × state 色彩矩陣。色彩 token 已於
 //     Overview「Typography(閱讀模式)」段列出。
 //   SizeMatrix N/A — 不提供 size prop;大小固定 text-body(14px reading mode),
-//     由 layout(cols / direction / divided)而非 size 決定差異。ColsMatrix 已
+//     由 layout(cols / orientation / divided)而非 size 決定差異。ColsMatrix 已
 //     涵蓋 layout 變化。
 import type { Meta, StoryObj } from '@storybook/react'
 import { DescriptionList, DescriptionItem } from './description-list'
@@ -54,7 +54,7 @@ export const Overview: Story = {
         <Desc>items 之間垂直間距走 `--layout-space-tight` token(density-aware)——切 density 自動適配,避免硬寫 px / py-N 脫鉤 token;label → value(同 item 內)走 `--item-gap-label-desc-reading`(2px,見下表 row 1)。</Desc>
         <div className="overflow-x-auto">
           <table className="text-caption border-collapse">
-            <thead><tr><Th>Direction</Th><Th>位置</Th><Th>Value</Th><Th>Rationale</Th></tr></thead>
+            <thead><tr><Th>Orientation</Th><Th>位置</Th><Th>Value</Th><Th>Rationale</Th></tr></thead>
             <tbody>
               <tr><Td mono>vertical</Td><Td>label → value(同 item 內)</Td><Td mono>--item-gap-label-desc-reading(2px)</Td><Td>極小間距,視覺上 label 與 value 緊密配對(dt body + dd body → reading token)</Td></tr>
               <tr><Td mono>vertical</Td><Td>items 之間垂直 gap</Td><Td mono>gap-y-[var(--layout-space-tight)]</Td><Td>density-aware;Gestalt proximity 群組</Td></tr>
@@ -73,16 +73,16 @@ export const Overview: Story = {
 export const Inspector: Story = {
   name: '元件檢閱器',
   parameters: {
-    docs: { description: { story: '右側 Controls 切 props 即時 render,取代 Figma inspect。調整 `cols` / `direction` / `divided` 看 CSS grid 配置變化。' } },
+    docs: { description: { story: '右側 Controls 切 props 即時 render,取代 Figma inspect。調整 `cols` / `orientation` / `divided` 看 CSS grid 配置變化。' } },
   },
   args: {
     cols: 2,
-    direction: 'vertical',
+    orientation: 'vertical',
     divided: false,
   },
   argTypes: {
     cols: { control: 'radio', options: [1, 2, 3] },
-    direction: { control: 'radio', options: ['vertical', 'horizontal'] },
+    orientation: { control: 'radio', options: ['vertical', 'horizontal'] },
     divided: { control: 'boolean', description: 'horizontal 模式下,每個 item 下加 border-b 對齊 rows(長列表建議開)' },
   },
   render: (args) => (

package/src/components/DescriptionList/description-list.principles.stories.tsx

@@ -197,7 +197,7 @@ export const LabelAlignmentRule: Story = {
     <div>
       <Rule
         title="本系統採 stacked(label 在上、value 在下)— label 左對齊"
-        note="對齊 Atlassian / Shopify Polaris / Stripe 慣例——label 與 value 垂直堆疊,兩者都左對齊。閱讀節奏由上往下、由左往右,不需視線左右跳動。這是 vertical(預設)模式的結構;label 左 / value 右的 metadata 列改用既有 `direction=&quot;horizontal&quot;` prop(見 spec「Direction」段)"
+        note="對齊 Atlassian / Shopify Polaris / Stripe 慣例——label 與 value 垂直堆疊,兩者都左對齊。閱讀節奏由上往下、由左往右,不需視線左右跳動。這是 vertical(預設)模式的結構;label 左 / value 右的 metadata 列改用既有 `orientation=&quot;horizontal&quot;` prop(見 spec「Orientation」段)"
       >
         <Frame className="max-w-md">
           <DescriptionList cols={2}>
@@ -225,7 +225,7 @@ export const LabelAlignmentRule: Story = {
 
       <Rule
         title="❌ 不要自己用 flex 改 horizontal layout"
-        note="手刻 flex 模擬 label 左 / value 右 → 失去 dl/dt/dd 語意,且多欄配置下 grid 對齊錯亂。有此需求 → 用既有 `direction=&quot;horizontal&quot;` prop(dl/dt/dd 語意完整保留,見 showcase「水平佈局」story),不要自組 layout"
+        note="手刻 flex 模擬 label 左 / value 右 → 失去 dl/dt/dd 語意,且多欄配置下 grid 對齊錯亂。有此需求 → 用既有 `orientation=&quot;horizontal&quot;` prop(dl/dt/dd 語意完整保留,見 showcase「水平佈局」story),不要自組 layout"
       >
         <Frame className="max-w-md">
           <div className="flex justify-between py-1">

package/src/components/DescriptionList/description-list.spec.md

@@ -44,11 +44,11 @@ benchmark:
 ## 結構
 
 - `DescriptionList`：外層 `dl`，vertical 模式為 CSS grid、horizontal 模式為 flex column
-- `DescriptionItem`：一組 `dt`（label）+ `dd`（value），透過 context 知道當前 direction 自動切 layout
+- `DescriptionItem`：一組 `dt`（label）+ `dd`（value），透過 context 知道當前 orientation 自動切 layout
 
-## Direction(2026-04-20 新增)
+## Orientation(2026-04-20 新增)
 
-| direction | Layout | 典型情境 | 世界級對照 |
+| orientation | Layout | 典型情境 | 世界級對照 |
 |-----------|--------|---------|-----------|
 | `vertical`(預設)| label 在上 / value 在下 | ProfileCard detail、sidebar 長 value(地址、bio) | Atlassian DescriptionList、Polaris DescriptionList |
 | `horizontal` | label 左 / value 右對齊 | **file info panel / 訂單詳情 / settings summary**(短 value 的 metadata 列) | Google Drive file info、Notion file panel、iOS Settings | <!-- @benchmark-unverified: see frontmatter benchmark list for canonical DS source URL -->
@@ -63,13 +63,13 @@ benchmark:
 
 ```tsx
 // 短 metadata 列,無需 divider
-<DescriptionList direction="horizontal">
+<DescriptionList orientation="horizontal">
   <DescriptionItem label="建立">2026-04-20</DescriptionItem>
   <DescriptionItem label="修改">2026-04-20</DescriptionItem>
 </DescriptionList>
 
 // 檔案資訊 — 多 row + key 長度不一 → divided 對齊格線
-<DescriptionList direction="horizontal" divided>
+<DescriptionList orientation="horizontal" divided>
   <DescriptionItem label="檔名">Q1 財報分析.xlsx</DescriptionItem>
   <DescriptionItem label="類型">application/vnd.xlsx</DescriptionItem>
   <DescriptionItem label="大小">1.2 MB</DescriptionItem>
@@ -86,18 +86,18 @@ benchmark:
 
 ## 間距
 
-### Vertical direction
+### Vertical orientation
 
 - **label → value**(同 item 內):`--item-gap-label-desc-reading` token(2px)——極小間距,視覺上 label 與 value 緊密配對
 - **items 之間垂直 gap**:`gap-y-[var(--layout-space-tight)]`——density-aware,跟隨系統密度設定
 - **columns 之間水平 gap**:`gap-x-4`(16px)
 
-### Horizontal direction(divided=false)
+### Horizontal orientation(divided=false)
 
 - **items 之間垂直 gap**:`mb-[var(--layout-space-tight)]` per item(last:mb-0)——density-aware,等同 vertical 的 items gap
 - label ↔ value 水平距離:`justify-between` + `gap-4`(最小 16px,content 之間拉開)
 
-### Horizontal direction(divided=true)
+### Horizontal orientation(divided=true)
 
 - 每個 item `py-[var(--layout-space-tight)]`(density-aware,形成 cell-like row 高度)
 - 每個 item 底部 `border-b border-divider`,`last:border-b-0`——row 之間視覺格線,key 長度不一時易於對齊掃描
@@ -106,9 +106,9 @@ benchmark:
 
 ## Props
 
-### `direction`:vertical / horizontal
+### `orientation`:vertical / horizontal
 
-見上「Direction」段。
+見上「Orientation」段。
 
 ### `divided`:horizontal 專用 row divider
 
@@ -184,11 +184,11 @@ consumer 要在 DL 上方加 section heading(「基本資料」/「團隊資訊
 
 DescriptionList 是**唯讀 label / value 資料呈現**(非互動 / 非 variant 驅動):
 
-- **有 Inspector**:DL 雖唯讀,但有 layout prop 可即時切換——`Inspector` story 暴露 `cols`(1 / 2 / 3)/ `direction`(vertical / horizontal)/ `divided` 三個 prop 的 Controls,取代 Figma inspect。`direction` 與 `divided` 是 `ColsMatrix`(只示範 cols)沒涵蓋的維度。
+- **有 Inspector**:DL 雖唯讀,但有 layout prop 可即時切換——`Inspector` story 暴露 `cols`(1 / 2 / 3)/ `orientation`(vertical / horizontal)/ `divided` 三個 prop 的 Controls,取代 Figma inspect。`orientation` 與 `divided` 是 `ColsMatrix`(只示範 cols)沒涵蓋的維度。
 - **無 ColorMatrix**:DL 固定 semantic token(label `text-fg-secondary` / value `text-foreground`),無自己的色彩變體,dark mode 由 semantic token 自動切換。加 color variant 不符語意(DL 是資訊展示,非狀態載體)。
 - **無 SizeMatrix**:DL 無 size prop——垂直間距隨 `layout-space` token 感知 density(見「間距」段),但 label / value typography 走 reading mode 固定 tier,不提供 sm / md / lg 變體。不同 density 由 token 自動處理,非 prop 切換。
 
-對應 anatomy story(實際 5 個,對齊 6-canonical 結構;ColorMatrix / SizeMatrix N/A):`Overview`(anatomy + typography + 間距) + `Inspector`(Controls 即時切 `cols` / `direction` / `divided`) + `ColsMatrix`(元件特有 1 / 2 / 3 欄對照) + `StateBehavior`(空值 `-` / 長值 / 多行 / ReactNode value) + `Accessibility`(`dl/dt/dd` 語意 + 無互動說明)。
+對應 anatomy story(實際 5 個,對齊 6-canonical 結構;ColorMatrix / SizeMatrix N/A):`Overview`(anatomy + typography + 間距) + `Inspector`(Controls 即時切 `cols` / `orientation` / `divided`) + `ColsMatrix`(元件特有 1 / 2 / 3 欄對照) + `StateBehavior`(空值 `-` / 長值 / 多行 / ReactNode value) + `Accessibility`(`dl/dt/dd` 語意 + 無互動說明)。
 
 ---
 

package/src/components/DescriptionList/description-list.stories.tsx

@@ -89,14 +89,14 @@ export const DetailPanel: Story = {
   ),
 }
 
-/* ── Horizontal direction(label 左 / value 右,divided=false)──────── */
+/* ── Horizontal orientation(label 左 / value 右,divided=false)──────── */
 export const Horizontal: Story = {
   name: '水平佈局',
   render: () => (
     <div className="border border-border rounded-lg p-[var(--layout-space-loose)] max-w-md">
       {/* title 到第一個 item 的間距 = item 之間間距(Gestalt proximity canonical,見 spec) */}
       <div className="text-body font-medium mb-[var(--layout-space-tight)]">檔案資訊</div>
-      <DescriptionList direction="horizontal">
+      <DescriptionList orientation="horizontal">
         <DescriptionItem label="檔名">Q1-roadmap.pdf</DescriptionItem>
         <DescriptionItem label="類型">application/pdf</DescriptionItem>
         <DescriptionItem label="大小">2.4 MB</DescriptionItem>
@@ -107,7 +107,7 @@ export const Horizontal: Story = {
 }
 
 // @story-trait-rationale: HorizontalDivided retired 2026-05-17 per audit Dim 24/25 strict re-run —
-//   違 story-rules.md L42「同 affordance 內 prop variations 用 Controls 不另開」。Horizontal direction
+//   違 story-rules.md L42「同 affordance 內 prop variations 用 Controls 不另開」。Horizontal orientation
 //   已展示;divided 是單一 prop toggle,anatomy Inspector 已 expose Controls (L85-86)。
 //   原本內容 archive 於 git history(若要看 divided 視覺,進 anatomy Inspector 開 divided=true)。
 //   2026-06-12:刪除 zombie export _RETIRED_HorizontalDivided,對齊 DS-wide comment-only 退役慣例(deep-audit dim25)。

package/src/components/DescriptionList/description-list.tsx

@@ -12,7 +12,7 @@ import { cn } from '@/lib/utils'
  * value (dd): text-body (14px) text-foreground (neutral-9)
  * 兩者都是 14px × 1.5 行高——層級靠色彩區分，不靠字體大小。
  *
- * ── direction（2026-04-20 新增）──
+ * ── orientation（2026-04-20 新增）──
  * vertical（預設）：label 在上 / value 在下，適合長 value（地址、bio、說明段落）、
  *                   form-like 資訊展示
  * horizontal     ：label 左 / value 右對齊，適合短 value 的 metadata 列
@@ -30,15 +30,15 @@ import { cn } from '@/lib/utils'
  * divided horizontal 模式：每 item py-[var(--layout-space-tight)]（cell-like row 高度）
  */
 
-export type DescriptionDirection = 'vertical' | 'horizontal'
+export type DescriptionListOrientation = 'vertical' | 'horizontal'
 
 interface DescriptionContextValue {
-  direction: DescriptionDirection
+  orientation: DescriptionListOrientation
   divided: boolean
 }
 
 const DescriptionContext = React.createContext<DescriptionContextValue>({
-  direction: 'vertical',
+  orientation: 'vertical',
   divided: false,
 })
 
@@ -46,7 +46,7 @@ export interface DescriptionListProps extends React.HTMLAttributes<HTMLDListElem
   /** grid 欄數（vertical 才生效；horizontal 永遠單欄），預設 1 */
   cols?: 1 | 2 | 3
   /** 項目排列方向，預設 vertical（label 在上 / value 在下） */
-  direction?: DescriptionDirection
+  orientation?: DescriptionListOrientation
   /**
    * horizontal 模式下每個 item 下方加分隔線以對齊 rows。預設 false。
    * 短列表（< 4 rows）不需要；檔案 metadata 等長列表、key 長度不一時建議開。
@@ -61,10 +61,10 @@ const colsClass: Record<number, string> = {
 }
 
 const DescriptionList = React.forwardRef<HTMLDListElement, DescriptionListProps>(
-  ({ cols = 1, direction = 'vertical', divided = false, className, ...props }, ref) => {
-    const isHorizontal = direction === 'horizontal'
+  ({ cols = 1, orientation = 'vertical', divided = false, className, ...props }, ref) => {
+    const isHorizontal = orientation === 'horizontal'
     // Memoize provider value(2026-04-22 D3 perf audit):避免每 render 重建 2-field object
-    const ctxValue = React.useMemo(() => ({ direction, divided }), [direction, divided])
+    const ctxValue = React.useMemo(() => ({ orientation, divided }), [orientation, divided])
     return (
       <DescriptionContext.Provider value={ctxValue}>
         <dl
@@ -90,8 +90,8 @@ export interface DescriptionItemProps extends React.HTMLAttributes<HTMLDivElemen
 
 const DescriptionItem = React.forwardRef<HTMLDivElement, DescriptionItemProps>(
   ({ label, children, className, ...props }, ref) => {
-    const { direction, divided } = React.useContext(DescriptionContext)
-    if (direction === 'horizontal') {
+    const { orientation, divided } = React.useContext(DescriptionContext)
+    if (orientation === 'horizontal') {
       return (
         <div
           ref={ref}

package/src/components/Dialog/dialog.tsx

@@ -52,7 +52,10 @@ const DialogOverlay = React.forwardRef<
 ))
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
-interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+// asChild Omit(2026-07-18 決策2):DialogContent 是固定 surface chrome(overlay + 定位 +
+// bg/rounded/shadow + onOpenAutoFocus),恆渲染 {children}(consumer body,通常 Header+Body+Footer
+// 多節點)→ <Content asChild> Radix Slot React.Children.only crash。children 保留(consumer body)。
+interface DialogContentProps extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'asChild'> {
   /** 最大寬度。預設 512px。傳 number 視為 px。 */
   maxWidth?: string | number
   /**

package/src/components/DropdownMenu/dropdown-menu.tsx

@@ -40,6 +40,7 @@ import { overlayMotion } from "@/design-system/tokens/motion/overlay-motion"
  */
 
 // ── Floating layer 共用樣式 ──
+/** @internal — menu 形浮層共用 class(DropdownMenu/SelectMenu/Command 內部);consumer 不 hand-craft menu surface,用元件本身。root barrel 排除(subpath 仍可 wrap 後用)。 */
 const floatingLayerClass = [
   'z-50 overflow-hidden rounded-lg border border-border bg-surface-raised',
   overlayMotion,
@@ -121,11 +122,17 @@ const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 
 // ── Content ──
 interface DropdownMenuContentProps
-  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
+  // asChild Omit(2026-07-18 決策2):Content 恆注入固定 <RowSizeProvider> + <ScrollArea>
+  // wrapper 於 Portal 內 → <Content asChild> 會把 Content props slot-merge 到非-DOM Provider 上而壞。
+  // children 保留(合法渲染於固定 wrapper 內)。
+  extends Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>, 'asChild'> {
   size?: SizeKey
   /** 最小寬度（px），預設 `max(180px, 觸發元件寬度)`——窄 trigger 時吃 180px 地板 */
   minWidth?: number
-  /** 最大高度（px），超過時捲動 */
+  /**
+   * 最大高度（px）——**可選更低上限**。預設已 viewport-adaptive(夾到 trigger→視窗碰撞邊界的剩餘高度、
+   * 離窗 ≥8px、超過即捲動);傳 `maxHeight` 只在「想比視窗剩餘更矮」時用(取 `min(視窗剩餘, maxHeight)`)。
+   */
   maxHeight?: number
 }
 
@@ -154,24 +161,26 @@ const DropdownMenuContent = React.forwardRef<
       // close 後 programmatic refocus 在 Chromium 仍可 match `:focus-visible`(UA heuristic),
       // 但與 shadcn 官方 live demo 同流程 DOM 比對 IDENTICAL — Radix 生態一致接受此
       // tradeoff:APG keyboard focus-return 優先於 cosmetic ring。
-      className={cn(floatingLayerClass, !maxHeight && 'py-2', className)}
+      className={cn(floatingLayerClass, 'flex flex-col min-h-0', className)}
       style={{
         boxShadow: 'var(--elevation-200)',
         minWidth: minWidth ?? 'max(180px, var(--radix-dropdown-menu-trigger-width))',
-        maxHeight,
+        // 2026-07-18 viewport-adaptive max-h(對齊 HoverCard/Popover 既有 canonical):夾到「trigger 到
+        //   碰撞邊界(已內縮 collisionPadding=8px)的剩餘高度」→ 高選單不溢出視窗、離視窗邊 ≥8px、
+        //   短選單仍貼內容;consumer `maxHeight` 為**可選更低上限**(min 取小者)。inline style 非 class,
+        //   故動態 maxHeight 不觸 Tailwind 掃描陷阱。
+        maxHeight: maxHeight
+          ? `min(var(--radix-dropdown-menu-content-available-height, 100vh), ${maxHeight}px)`
+          : 'var(--radix-dropdown-menu-content-available-height, 100vh)',
       }}
       {...props}
     >
       <RowSizeProvider value={size}>
-        {maxHeight ? (
-          // 長選單用 ScrollArea 跨 OS 一致捲動(不吃寬度,macOS/Windows 視覺一致)
-          // py-2 移到內層,ScrollArea Viewport 才能 scroll 整個 padded 區
-          <ScrollArea className="max-h-[inherit]">
-            <div className="py-2">{children}</div>
-          </ScrollArea>
-        ) : (
-          children
-        )}
+        {/* body 恆在 flex-1 ScrollArea 內:超過 clamped 高度即跨-OS 一致捲動(不吃寬度);
+            短選單 flex-1 貼內容不塌(同 HoverCard/Popover/DataTable panel 已驗)。py-2 在內層,整 padded 區可捲。 */}
+        <ScrollArea className="flex-1 min-h-0">
+          <div className="py-2">{children}</div>
+        </ScrollArea>
       </RowSizeProvider>
     </DropdownMenuPrimitive.Content>
   </DropdownMenuPrimitive.Portal>
@@ -430,7 +439,11 @@ DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
 // Radix handles checked state;checked 底色套在外層 Radix RadioItem 本身(parent-bg
 // pattern,詳下方 2026-05-31 #10 註解),內層 MenuItem 恆 !bg-transparent 讓它透出。
 interface DropdownMenuRadioItemProps
-  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> {
+  // children Omit + redeclare required(2026-07-18 決策2 一致性):對齊 sibling Item/SubTrigger/
+  // CheckboxItem — menu item 必有 label,children 為 required 非 Radix optional。RadioItem 恆渲染
+  // 固定 <MenuItem>{children}</MenuItem>,children 是合法 label(非 lie),此為 required 化一致性修。
+  extends Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>, 'children'> {
+  children: React.ReactNode
   /** Prefix icon(LucideIcon) */
   startIcon?: LucideIcon
   /** 次要說明文字 */

package/src/components/Field/field-context.ts

@@ -17,8 +17,14 @@ export type FieldControlLayout = 'inline' | 'block'
  * - `'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)
+ * - `'inline-edit'`(2026-07-17)— InlineEdit view 委派 surface。**唯一語義 = 委派控件 view 態
+ *   左 px 統一 `--field-px`(不繼承 tagPadding / avatar inset / bare-span 0px)**,讓 InlineEdit
+ *   固定 `-mx-[--field-px]` 對齊盒精準抵銷 → 值/tag/avatar 左緣落 label 左緣(x=0)。edit 態**不套**
+ *   本 surface(edit 完全繼承原 field,含 tagPadding — Jira 式)。對齊 Atlassian inline-edit
+ *   read-view「fixed negative margin + read=edit geometry by construction」。只 InlineEdit display
+ *   box 注入;DataTable cell(table-cell)/ 純表單(form)的 tagPadding + bare-span 完全不受影響。
  */
-type FieldSurface = 'form' | 'toolbar' | 'table-cell'
+type FieldSurface = 'form' | 'toolbar' | 'table-cell' | 'inline-edit'
 
 // ── Context ──
 export interface FieldContextValue {
@@ -30,7 +36,7 @@ export interface FieldContextValue {
   descriptionId: string
   errorId: string
   mode: FieldMode
-  /** 視覺外殼透傳(2026-05-05)。default = 含 border+bg;naked = cell-as-input(edit×naked 自畫 border-based state machine;display/readonly/disabled×naked 用 transparent border 由 host cell 供邊框);`bare` 2026-07-09 退役;naked 2026-07-14 型別收窄至
+  /** 視覺外殼透傳(2026-05-05)。default = 含 border+bg;naked = cell-as-input(edit×naked 自畫 border-based state machine;view×naked 用 transparent border 由 host cell 供邊框);`bare` 2026-07-09 退役;naked 2026-07-14 型別收窄至
    *  FieldVariantInternal(@internal)— 公開 `<Field variant>` 只收 default,故本欄位維持 FieldVariant。
    *  child Field control 自動繼承,per-control prop override 可覆寫。詳 field-types.ts。 */
   variant: FieldVariant
@@ -175,13 +181,13 @@ export function useResolvedFieldDisabled(disabledProp?: boolean | null): boolean
 }
 
 /**
- * Resolve Field control 的 **mode**(display / readonly / disabled / edit)— 2026-06-08 SSOT,統一兩派散落:
+ * Resolve Field control 的 **mode**(view / readonly / disabled / edit)— 2026-06-08 SSOT,統一兩派散落:
  *   舊 Input 派 `modeProp ?? fieldCtx?.mode ?? (...)` → `<Field disabled>` 時 ctx.mode 仍 'edit',漏 disabled chrome。
- *   舊 picker 派 `disabled ? 'disabled' : mode`(mode 預設 'edit')→ 完全不讀 fieldCtx.mode,`<Field mode="display">` 失效。
+ *   舊 picker 派 `disabled ? 'disabled' : mode`(mode 預設 'edit')→ 完全不讀 fieldCtx.mode,`<Field mode="view">` 失效。
  * 統一優先序(world-class:MUI FormControl disabled 完整 cascade + 顯式 prop 永遠最優先):
- *   1. 顯式 mode prop(caller / DataTable cell 的 displayOrDisabled)→ **永遠最優先**,故表格等顯式場景 inert
+ *   1. 顯式 mode prop(caller / DataTable cell 傳 mode="view")→ **永遠最優先**,故表格等顯式場景 inert
  *   2. 有效 disabled(prop 或 `<Field disabled>`)→ 'disabled'(完整 disabled chrome)
- *   3. FieldContext.mode(`<Field mode="display"/"readonly">`)→ 讓 mode cascade 真正生效
+ *   3. FieldContext.mode(`<Field mode="view"/"readonly">`)→ 讓 mode cascade 真正生效
  *   4. 本地 readOnly → 'readonly'
  *   5. 'edit'
  * cell:mode prop 必有 → step 1 命中、fieldCtx=null → 完全 inert(Δ=0)。`disabled` 傳已 resolve 的 boolean 或未預設 prop。
@@ -240,7 +246,7 @@ export function FieldSurfaceSizeProvider({
 /**
  * Table-cell 可編輯訊號(2026-07-08 user 拍板)— 獨立於 FieldSurfaceContext / FieldSurfaceSizeContext
  * 的純 boolean context,由 host(DataTable cell registry)注入該 cell 是否可編輯,讓 useFieldEmptyDisplay
- * 分流「可編輯 cell 空 display → 空白」vs「不可編輯 cell 空 display → '-'」。
+ * 分流「可編輯 cell 空 view → 空白」vs「不可編輯 cell 空 view → '-'」。
  * value = boolean primitive(stable when unchanged),不破壞 cell memo identity(同 TableScrollContext /
  * FieldSurfaceSizeContext L119-121 canonical);絕不污染 FieldContext(useFieldContext() 在 cell 內仍 null)。
  */
@@ -261,16 +267,16 @@ export function FieldSurfaceEditableProvider({
  *
  * | 情境                                           | 空值顯示 |
  * |------------------------------------------------|----------|
- * | table-cell **可編輯** 的 display 靜止態        | **空白 `''`**(不佔位,affordance = hover outline)|
+ * | table-cell **可編輯** 的 view 靜止態        | **空白 `''`**(不佔位,affordance = hover outline)|
  * | table-cell **不可編輯**(readonly cell)        | **半形 `-`** |
- * | standalone display / readonly / form / toolbar | **半形 `-`** |
+ * | standalone view / readonly / form / toolbar | **半形 `-`** |
  *
  * 收斂式:`surface==='table-cell' && isEditable ? '' : EMPTY_DISPLAY`。
  * 可編輯 form / edit 輸入框走 native placeholder(不經此 hook)。boolean → unchecked / disabled →
  * 同上文字 + text-fg-disabled(M24),各控件自理。
  * 世界級對照:table-cell blank = MUI X / AG Grid / Ant core / Notion / Airtable grid 域共識;
  * 非 table `-` = Ant ProTable `columnEmptyText`(見 field-wrapper.tsx EMPTY_DISPLAY 註)。
- * SSOT 條文 → field-controls.spec.md「null / undefined 值」;全 Field family display/readonly/disabled
+ * SSOT 條文 → field-controls.spec.md「null / undefined 值」;全 Field family view/readonly/disabled
  * 空值渲染必經此 hook,禁直接引 EMPTY_DISPLAY 常數(genre 分流會漏)。
  */
 export function useFieldEmptyDisplay(): string {
@@ -288,7 +294,7 @@ export function useFieldEmptyDisplay(): string {
  * 提示」的裝飾語意;空值符號不是提示、是被檢視的值狀態)。
  * disabled 態維持 `text-fg-disabled`(M24 disabled 顯著性 > foreground/muted,不可被蓋)。
  *
- * SSOT:全 Field family display/readonly/disabled 空值 span 消費此 helper,傳入已 resolve 的
+ * SSOT:全 Field family view/readonly/disabled 空值 span 消費此 helper,傳入已 resolve 的
  * resolvedMode。純函式(非 hook)—— resolvedMode 已由 useResolvedFieldMode 解析(含控件自身
  * disabled prop,context hook 讀不到);故以 resolvedMode 為入參,可條件呼叫、不受 Rules of Hooks 限制。
  * 世界級對照:Ant read-only / Carbon read-only value = 正常前景色;placeholder 才 muted。