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

package/src/components/Input/input.principles.stories.tsx

@@ -51,7 +51,7 @@ export const UsageGuidance: Story = {
           <p>適合 Input 的真實業務場景(點擊跳轉「展示」頁範例):</p>
           <ul className="space-y-1">
             <li><LinkTo kind="Design System/Components/Input/展示" name="四模式"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">商品名稱欄位的編輯 / 純展示 / 唯讀 / 停用四模式</span></LinkTo></li>
-            <li><LinkTo kind="Design System/Components/Input/展示" name="尺寸與 Button 對齊"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">搜尋列 — 輸入框與按鈕並排等高</span></LinkTo></li>
+            <li><LinkTo kind="Design System/Components/Input/展示" name="三種尺寸"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">搜尋列 — 輸入框與按鈕並排等高</span></LinkTo></li>
             <li><LinkTo kind="Design System/Components/Input/展示" name="尾端操作"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">密碼顯示切換 / 搜尋清除等尾端操作</span></LinkTo></li>
             <li><LinkTo kind="Design System/Components/Input/展示" name="錯誤狀態"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">Email 格式錯誤的驗證回饋</span></LinkTo></li>
           </ul>
@@ -128,10 +128,10 @@ export const ModeRule: Story = {
 
       <Rule
         title="❌ 不用 readonly 作為 DataTable cell"
-        note="readonly 仍然有 padding + 視覺 chrome,密集列表會顯得鬆散。Table cell 用 `<Input mode='display'>`(零視覺 chrome、無左右 padding;wrapper 高度同 readonly)"
+        note="readonly 有底色 chrome(bg-readonly),密集列表會顯得鬆散。Table cell 用 `<Input mode='view'>`(Model A:edit 幾何減 chrome —— 保留 px 與高度,只拔 border/bg;cell 內經 naked variant 由 host cell 供 padding)"
       >
         <Input mode="readonly" value="alice@example.com" />
-        <Label warn>↑ 在 table cell 中會過高且有多餘 padding → 用 &lt;Input mode=&quot;display&quot; /&gt;</Label>
+        <Label warn>↑ 在 table cell 中有多餘底色 chrome → 用 &lt;Input mode=&quot;view&quot; /&gt;</Label>
       </Rule>
     </div>
   ),

package/src/components/Input/input.spec.md

@@ -92,17 +92,17 @@ endAction(host 內嵌 inline action)vs 獨立 `<Button iconOnly>` 的分界詳 `
 
 ---
 
-## Display
+## View
 
-`<Input mode="display">` 是 identity 顯示：
+`<Input mode="view">` 是 identity 顯示：
 - 有值：原樣輸出
-- null / undefined / 空字串：半形 `-`（hyphen），`text-foreground`（display/readonly 供檢視值同色;disabled → fg-disabled）
+- null / undefined / 空字串：半形 `-`（hyphen），`text-foreground`（view/readonly 供檢視值同色;disabled → fg-disabled）
 
 ---
 
 ## Loading
 
-`loading?: boolean`(Field SSOT,詳 `Field/field-controls.spec.md` L70-115):右側 endAction 自動顯 `<CircularProgress/>` + `aria-busy="true"`;input 維持可編輯(Ant Input.Search editable 派,反 Material readonly 派,適合 search debounce)。
+`loading?: boolean`(Field SSOT,詳 `Field/field-controls.spec.md`「Loading state」段 ~L93-138):右側 endAction 自動顯 `<CircularProgress/>` + `aria-busy="true"`;input 維持可編輯(Ant Input.Search editable 派,反 Material readonly 派,適合 search debounce)。
 
 ## 禁止事項
 

package/src/components/Input/input.stories.tsx

@@ -26,9 +26,9 @@ export const Modes: Story = {
         <Input defaultValue="Wireless Bluetooth Headphones" placeholder="輸入商品名稱" aria-label="商品名稱(edit mode demo)" />
       </div>
       <div>
-        <h3 className="text-body font-bold text-foreground mb-2">display</h3>
+        <h3 className="text-body font-bold text-foreground mb-2">view</h3>
         <p className="text-caption text-fg-muted mb-3">純展示（read-only 內容）— 無 input chrome / 無互動 affordance</p>
-        <Input mode="display" value="Wireless Bluetooth Headphones" aria-label="商品名稱(display mode demo)" />
+        <Input mode="view" value="Wireless Bluetooth Headphones" aria-label="商品名稱(view 模式示範)" />
       </div>
       <div>
         <h3 className="text-body font-bold text-foreground mb-2">readonly</h3>
@@ -53,7 +53,7 @@ export const Modes: Story = {
 
 /* ── 尺寸與 Button 對齊 ── */
 export const SizeAlignment: Story = {
-  name: '尺寸與 Button 對齊',
+  name: '三種尺寸',
   render: () => (
     <div className="flex flex-col gap-4">
       {(['sm', 'md', 'lg'] as const).map(size => (

package/src/components/Input/input.tsx

@@ -16,7 +16,7 @@ import { ICON_SIZE } from '@/design-system/tokens/uiSize/icon-size'
 export interface InputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
     Omit<VariantProps<typeof fieldWrapperStyles>, 'mode' | 'variant' | 'width'> {
-  /** Field display mode */
+  /** Field mode */
   mode?: FieldMode
   /**
    * Visual variant(正交於 mode),對齊 FieldContext.variant 透傳。
@@ -108,24 +108,24 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const resolvedMode: FieldMode = useResolvedFieldMode({ mode: modeProp, disabled, readOnly })
     const emptyDisplay = useFieldEmptyDisplay()
     const isEditable = resolvedMode === 'edit'
-    const isDisplay = resolvedMode === 'display'
+    const isView = resolvedMode === 'view'
     // error 合併:自身 error prop OR Field context invalid
     const resolvedError = useResolvedFieldInvalid(error)
     // 2026-05-18 改 import ICON_SIZE SSOT(per user『做完』approval,消除 M17 違反 7+ 重複 ternary)
   const iconSize = ICON_SIZE[size as 'sm' | 'md' | 'lg']
     const iconColor = resolvedMode === 'disabled' ? 'text-fg-disabled' : 'text-fg-muted'
 
-    // ── display mode(+ readonly 空值)純展示,渲染 <span> 取代 <input> ──
+    // ── view mode(+ readonly 空值)純展示,渲染 <span> 取代 <input> ──
     // 對齊 Carbon read-only / PatternFly inline-edit hidden-input / Cloudscape display-mode
-    // 2026-07-08 user 拍板:readonly 空值也走 display-span 顯 '-'(readonly **有值** 仍走下方
+    // 2026-07-08 user 拍板:readonly 空值也走 view-span 顯 '-'(readonly **有值** 仍走下方
     // native <input readOnly> 保留選取/複製語意 — field-controls.spec.md「null / undefined 值」)。
     // 2026-07-14 audit Dim 26(dual-mode coherence):uncontrolled `defaultValue` 也要被
-    // display / readonly-空值判定認得 — 原本只讀 `value`,uncontrolled Input 切 display 會誤顯 '-'。
+    // view / readonly-空值判定認得 — 原本只讀 `value`,uncontrolled Input 切 view 會誤顯 '-'。
     // 2026-07-14 R2(dual-model consensus,取代同日稍早 onChange-mirror 版):resolved value 改走
     // useControllable 內部 SSOT(Radix idiom,同 Select / Pagination 既有消費)。uncontrolled 時
     // native input 由 value={resolved} 內部驅動(defaultValue 只作初始值,不落 DOM attribute),
     // 修 mirror 版兩個真缺陷:
-    // (1) remount-stale — 切 display / readonly(native input unmount)再回 edit,native input 從
+    // (1) remount-stale — 切 view / readonly(native input unmount)再回 edit,native input 從
     //     defaultValue attribute 重掛 → 顯示 stale 初始值,與 mirror 判定分歧;
     // (2) form.reset() stale — HTML 標準 reset 不發 input event,onChange mirror 停在 reset 前的值
     //     (下方 reset bridge 修)。
@@ -137,10 +137,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       defaultValue: defaultValue ?? '',
     })
     const displayValue = resolved != null && resolved !== '' ? String(resolved) : null
-    const showDisplaySpan = isDisplay || (resolvedMode === 'readonly' && displayValue == null)
+    const showDisplaySpan = isView || (resolvedMode === 'readonly' && displayValue == null)
 
     // form.reset() bridge(uncontrolled only):reset 恢復 defaultValue 但不發 input event →
-    // 手動把 resolved 歸位 defaultValue。keyed on showDisplaySpan:display 分支不掛 native input,
+    // 手動把 resolved 歸位 defaultValue。keyed on showDisplaySpan:view 分支不掛 native input,
     // 回 edit 重掛時 effect 重跑補掛 listener。
     const innerRef = React.useRef<HTMLInputElement | null>(null)
     React.useEffect(() => {
@@ -159,7 +159,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     }, [ref])
 
     if (showDisplaySpan) {
-      const spanMode = isDisplay ? 'display' : 'readonly'
+      const spanMode = isView ? 'view' : 'readonly'
       return (
         <div
           className={cn(
@@ -181,9 +181,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           <span
             className={cn(
               bareInputStyles,
-              // B1 fix(2026-05-05):display mode 單行 ellipsis 截斷(對齊 Notion / Airtable / Linear
-              //   cell display canonical:single-line value 過長 → ellipsis。Textarea display 走 wrap path,
-              //   不在此處;Input display 永遠 single-line。)
+              // B1 fix(2026-05-05):view mode 單行 ellipsis 截斷(對齊 Notion / Airtable / Linear
+              //   cell display canonical:single-line value 過長 → ellipsis。Textarea view 走 wrap path,
+              //   不在此處;Input view 永遠 single-line。)
               'truncate',
               displayValue == null && fieldEmptyColorClass(resolvedMode),
             )}
@@ -254,7 +254,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 )
 Input.displayName = 'Input'
 
-// Phase B1(2026-05-05):InputDisplay 退場。改用 `<Input mode="display" value={...} />`
+// Phase B1(2026-05-05):InputDisplay 退場。改用 `<Input mode="view" value={...} />`
 // 對齊 Carbon read-only / PatternFly inline-edit hidden-input / Cloudscape display-mode 統一 mode 模型。
 
 // Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)

package/src/components/LinkInput/link-input.anatomy.stories.tsx

@@ -256,7 +256,7 @@ export const Overview = {
             <thead><tr><Th>Prop</Th><Th>Type</Th><Th>Default</Th><Th>說明</Th></tr></thead>
             <tbody>
               {[
-                ['mode', "'edit' | 'display' | 'readonly' | 'disabled'", "'edit'", 'FieldMode 四模式'],
+                ['mode', "'edit' | 'view' | 'readonly' | 'disabled'", "'edit'", 'FieldMode 四模式'],
                 ['variant', "'default'", "'default'", 'Field chrome variant（naked：cell-as-input 透明 chrome，@internal，2026-07-14 型別收窄至 FieldVariantInternal）'],
                 ['size', "'sm' | 'md' | 'lg'", "'md'", '尺寸，與 Button 共用 token'],
                 ['error', 'boolean', 'false', '錯誤狀態，紅色邊框 + aria-invalid'],
@@ -265,7 +265,7 @@ export const Overview = {
                 ['placeholder', 'string', "'https://'", '空值時的佔位文字'],
                 ['disabled', 'boolean', 'false', '等同 mode="disabled"'],
                 ['label', 'string', '—', '自訂顯示文字（覆蓋自動 hostname 提取）'],
-                ['showDisplayEndIcon', 'boolean', 'false', 'display 態改包 Field naked wrapper（D-path opt-in，DataTable cell display↔edit 像素對齊；本元件 edit 無 endIcon，故僅 wrapper 無 ItemSuffix）'],
+                ['showDisplayEndIcon', 'boolean', 'false', 'view 態改包 Field naked wrapper（D-path opt-in，DataTable cell view↔edit 像素對齊；本元件 edit 無 endIcon，故僅 wrapper 無 ItemSuffix）'],
               ].map(([p, t, d, desc]) => (
                 <tr key={p}><Td mono>{p}</Td><Td mono>{t}</Td><Td mono>{d}</Td><Td>{desc}</Td></tr>
               ))}

package/src/components/LinkInput/link-input.principles.stories.tsx

@@ -59,7 +59,7 @@ export const UsageGuidance: Story = {
           <LinkTo kind="Design System/Components/LinkInput/展示" name="四模式"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">四模式</span></LinkTo>
         </li>
         <li>
-          <LinkTo kind="Design System/Components/LinkInput/展示" name="展示樣式"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">展示樣式</span></LinkTo>
+          <LinkTo kind="Design System/Components/LinkInput/展示" name="檢視樣式"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">展示樣式</span></LinkTo>
         </li>
       </ul>
       <p className="text-fg-muted mt-3">判斷不確定時:先確認這個值是不是「儲存後使用者會想直接點開的完整網址」。若不是(例如純字串代號、email、內部路徑),改用 Input。下方「vs 近親」段有正反對照範例。</p>

package/src/components/LinkInput/link-input.spec.md

@@ -61,6 +61,10 @@ LinkInput 是 **URL 的**輸入與顯示元件。外觀基於 Input，但 value
 - blur 時驗證格式，合法則自動切回 link 狀態
 - 格式不合法維持 input 狀態 + error 邊框，直到格式正確
 
+### View 模式幾何（Model A 明文例外）
+
+`mode="view"` 預設（`showDisplayEndIcon=false`）渲染**裸 anchor / span**——不包 `fieldWrapperStyles`（無 px 內距、無 h-field 高度），是 `../Field/field-controls.spec.md` 共享 contract (d)「view×default = edit 幾何減 chrome（留 px）」的**明文例外**（backward compat；2026-07-16 VERIFY 拍板記錄為例外而非對齊 code）。需要與 cell edit 像素對齊時走 `showDisplayEndIcon=true` opt-in（Field naked wrapper 包覆 anchor）。typography 仍消費 contract (e)（`fieldDisplayTextClass`）。
+
 ---
 
 ## 驗證
@@ -85,7 +89,7 @@ URL 格式要求：必須包含 `http://` 或 `https://` protocol。
 ## 極長 URL（邊界）
 
 - **顯示文字 = hostname**:link 狀態預設只顯示 hostname（去 `www.`,如 `https://github.com/org/repo` → `github.com`）,非完整 URL;`label` prop 可覆寫顯示文字。完整 URL 載於 `href`
-- **單行 truncate**:link / readonly / display 狀態超寬時 ellipsis 截斷,不換行
+- **單行 truncate**:link / readonly / view 狀態超寬時 ellipsis 截斷,不換行
 - **編輯態**:原生 input 水平捲動,無長度上限
 
 ---
@@ -108,7 +112,7 @@ URL 格式要求：必須包含 `http://` 或 `https://` protocol。
 
 ## 為何無 StateBehavior
 
-LinkInput 是 **Field Controls family 成員**——互動狀態(focus / invalid / disabled / readonly)完全繼承 `../Field/field-controls.spec.md` SSOT「Mode 狀態」。LinkInput 特有的狀態(edit 輸入 vs display link-chip)已在 `Overview` 中說明。重寫 StateBehavior = 與 field-controls SSOT 漂移。
+LinkInput 是 **Field Controls family 成員**——互動狀態(focus / invalid / disabled / readonly)完全繼承 `../Field/field-controls.spec.md` SSOT「Mode 狀態」。LinkInput 特有的狀態(edit 輸入 vs view link-chip)已在 `Overview` 中說明。重寫 StateBehavior = 與 field-controls SSOT 漂移。
 
 對應 anatomy story:保留 `Overview` + `Inspector` + `ColorMatrix` + `SizeMatrix` + `Accessibility`。互動 state 見 Input 的 `StateBehavior` + field-controls.spec.md。
 

package/src/components/LinkInput/link-input.stories.tsx

@@ -100,8 +100,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>
-        <LinkInput mode="display" value="https://github.com" />
+        <h3 className="text-body font-bold text-foreground mb-2">view</h3>
+        <LinkInput mode="view" value="https://github.com" />
       </div>
       <div>
         <h3 className="text-body font-bold text-foreground mb-2">readonly</h3>
@@ -119,14 +119,14 @@ export const Modes: 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">
-      <LinkInput mode="display" value="https://www.example.com/path/to/page" />
-      <LinkInput mode="display" value="https://github.com/user/repo" label="GitHub Repo" />
-      <LinkInput mode="display" value={null} />
+      <LinkInput mode="view" value="https://www.example.com/path/to/page" />
+      <LinkInput mode="view" value="https://github.com/user/repo" label="GitHub Repo" />
+      <LinkInput mode="view" value={null} />
     </div>
   ),
 }

package/src/components/LinkInput/link-input.tsx

@@ -27,10 +27,10 @@ function formatHostname(url: string): string {
   }
 }
 
-// ── Display rendering(inline,2026-05-05 Phase B3 retire LinkInputDisplay)──
+// ── View rendering(inline,2026-05-05 Phase B3 retire LinkInputDisplay)──
 // 取代 LinkInputDisplay sub-component:純展示 a tag,無 input chrome、無 hover affordance。
 // edit mode 內 link state(showLink branch)也共用此 helper,確保「編輯態的 link 顯示」與
-// display mode 的視覺完全一致(SSOT)。
+// view mode 的視覺完全一致(SSOT)。
 function renderLinkAnchor(value: string, label?: string) {
   const displayText = label || formatHostname(value)
   return (
@@ -59,7 +59,7 @@ export interface LinkInputProps
    * - `'default'`(預設)— Field wrapper 完整 chrome(form / Field 內嵌)。
    * (2026-07-09 `bare` variant 退役;naked = cell-as-input substrate,@internal)
    *
-   * mode='display' 時 chrome 無視覺意義(display 完全無 wrapper);chrome 僅作用於 edit / readonly / disabled。
+   * mode='view' 時 chrome 無視覺意義(view 完全無 wrapper);chrome 僅作用於 edit / readonly / disabled。
    */
   variant?: FieldVariant
   error?: boolean
@@ -71,11 +71,11 @@ export interface LinkInputProps
   /** 自訂顯示文字（非編輯時） */
   label?: string
   /**
-   * Display 是否包 Field naked wrapper(D-path opt-in,2026-05-08)
-   * — DataTable cell display↔edit 像素級對齊用。預設 false(裸 anchor,backward compat)。
-   * 設 true 時 display 走 fieldWrapperStyles(naked variant)包覆 anchor,
+   * View 態是否包 Field naked wrapper(D-path opt-in,2026-05-08)
+   * — DataTable cell view↔edit 像素級對齊用。預設 false(裸 anchor,backward compat)。
+   * 設 true 時 view 走 fieldWrapperStyles(naked variant)包覆 anchor,
    * 與 cell edit (`<Input naked>`) 同 DOM 結構,消除 Layer-B padding mismatch。
-   * **本元件 edit 無 endIcon(UrlCell 用 plain Input edit)→ display 也無 ItemSuffix**(僅 wrapper)。
+   * **本元件 edit 無 endIcon(UrlCell 用 plain Input edit)→ view 也無 ItemSuffix**(僅 wrapper)。
    */
   showDisplayEndIcon?: boolean
 }
@@ -117,12 +117,12 @@ const LinkInput = React.forwardRef<HTMLInputElement, LinkInputProps>(
     // 2026-07-05 D4:invalid 經 useResolvedFieldInvalid 統一接 fieldCtx.invalid(field-controls.spec.md
     // resolver 契約「error/invalid = prop OR fieldCtx.invalid」)— 原本紅框只吃 errorProp||localError、
     // aria-invalid 卻 inline 加 fieldCtx?.invalid → <Field invalid> 下 AT 聽到 invalid 視覺卻正常框
-    // (聚焦還變藍)。紅框與 aria 自此同源。宣告於 display early return 之前(Rules-of-Hooks)。
+    // (聚焦還變藍)。紅框與 aria 自此同源。宣告於 view early return 之前(Rules-of-Hooks)。
     const fieldInvalid = useResolvedFieldInvalid(errorProp)
 
     // ── Local state / refs ──────────────────────────────────────────────────
-    // 2026-07-04 Rules-of-Hooks 修:hooks 必在 display early return 之前宣告,
-    // 否則 mode 於 render 間切換 display↔edit 會改變 hook 呼叫數 → React #310 crash
+    // 2026-07-04 Rules-of-Hooks 修:hooks 必在 view early return 之前宣告,
+    // 否則 mode 於 render 間切換 view↔edit 會改變 hook 呼叫數 → React #310 crash
     // (同 beta.76 Combobox 同款修法;僅搬位置,hook 邏輯不變)。
     const [editing, setEditing] = React.useState(false)
     const [localValue, setLocalValue] = React.useState(value ?? '')
@@ -145,25 +145,27 @@ const LinkInput = React.forwardRef<HTMLInputElement, LinkInputProps>(
     const focusRafIdRef = React.useRef<number>(0)
     React.useEffect(() => () => { if (focusRafIdRef.current) cancelAnimationFrame(focusRafIdRef.current) }, [])
 
-    // ── mode='display' ─────────────────────────────────────────────────────
+    // ── mode='view' ─────────────────────────────────────────────────────
     // 純展示:無 input chrome / 無 hover affordance / 無 Pencil edit 入口。
     // 取代既有 LinkInputDisplay sub-component(2026-05-05 Phase B3 retire)。
-    // Default(showDisplayEndIcon=false):無 wrapper 裸 anchor — backward compat。
+    // Default(showDisplayEndIcon=false):無 wrapper 裸 anchor — backward compat;為 contract (d)
+    // Model A(view×default = edit 幾何減 chrome、留 px)之明文例外,見 link-input.spec.md
+    // 「View 模式幾何(Model A 明文例外)」。
     // Opt-in(showDisplayEndIcon=true,2026-05-08 D-path):Field naked wrapper 包覆 anchor,
     // 與 cell edit (`<Input naked>`) 同 DOM 結構消除像素偏移(無 ItemSuffix,因 edit 也無 endIcon)。
-    if (resolvedMode === 'display') {
+    if (resolvedMode === 'view') {
       if (!showDisplayEndIcon) {
-        // 2026-05-14 I2 fix(spec contract (e) display typography canonical):非 D-path bare
+        // 2026-05-14 I2 fix(spec contract (e) view typography canonical):非 D-path bare
         // anchor / span 必套 `fieldDisplayTextClass(size)`(sm/md→text-body,lg→text-body-lg)
-        // — 對齊跨 Field family display 視覺尺寸統一。原無 font-size class → 用 browser default
-        // 字體 → 跟其他 Field display 不一致(user 抓 I2)。truncate 同需,長 URL ellipsis(I1)。
+        // — 對齊跨 Field family view 視覺尺寸統一。原無 font-size class → 用 browser default
+        // 字體 → 跟其他 Field view 不一致(user 抓 I2)。truncate 同需,長 URL ellipsis(I1)。
         if (!value) return <span className={cn(fieldDisplayTextClass(size), fieldEmptyColorClass(resolvedMode), 'block truncate')}>{emptyDisplay}</span>
         return <span className={cn(fieldDisplayTextClass(size), 'block truncate')}>{renderLinkAnchor(value, label)}</span>
       }
       return (
         <div
-          className={cn(fieldWrapperStyles({ mode: 'display', variant: resolvedVariant, size }), className)}
-          data-field-mode="display"
+          className={cn(fieldWrapperStyles({ mode: 'view', variant: resolvedVariant, size }), className)}
+          data-field-mode="view"
         >
           <span className="flex-1 min-w-0 truncate">
             {value
@@ -243,7 +245,7 @@ const LinkInput = React.forwardRef<HTMLInputElement, LinkInputProps>(
       )
     }
 
-    // edit — link display mode（有合法 URL 且未在編輯中）
+    // edit — link 顯示分支（有合法 URL 且未在編輯中）
     if (showLink) {
       return (
         <div

package/src/components/Notice/notice.principles.stories.tsx

@@ -74,7 +74,7 @@ export const CompositionRules: Story = {
     <div>
       <Section title="Pattern 1 — Alert(persistent inline announcement)">
         <div className="prose prose-sm max-w-prose">
-          <p>需要「持續顯示直到 user 主動 dismiss」→ <LinkTo kind="Design System/Components/Alert/展示" name="低調單行"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">Alert 低調單行</span></LinkTo>。Alert 內部消費 Notice + 加上 dismiss button + live region ARIA(error/warning → role="alert" assertive;info/success/neutral → role="status" polite)。</p>
+          <p>需要「持續顯示直到 user 主動 dismiss」→ <LinkTo kind="Design System/Components/Alert/展示" name="單行（低調 vs 實心對照）"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">Alert 低調單行</span></LinkTo>。Alert 內部消費 Notice + 加上 dismiss button + live region ARIA(error/warning → role="alert" assertive;info/success/neutral → role="status" polite)。</p>
           <ul>
             <li>典型場景:付款失敗 banner / workspace 警告 / 重要通知 user 必看</li>
             <li>對齊世界級:Polaris <code>Banner</code> / Material <code>Banner</code> / Atlassian <code>InlineMessage</code> — 共識用「persistent + dismissible」</li>

package/src/components/Notice/notice.tsx

@@ -208,12 +208,18 @@ export function useInverseTheme(): 'dark' | 'light' {
 }
 
 // Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)
-// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs
+// 2026-07-16 dim 78/DA3:variants 補齊 — 對齊 notice.spec.md frontmatter 5 variants(SSOT)
+// + alertMeta `{ purpose }` idiom(Alert 是 Notice 直接 consumer,同 5-variant 語意)。
+// variant 語意 = status icon 選擇(per spec「Variant」表);色彩由消費者 data-theme 控制。
 export const noticeMeta = {
   component: 'Notice',
   family: 2, // Family 2（List item layout）消費者 — 對齊 notice.spec.md frontmatter family: 2 + body「Layout Family」段
   variants: {
-
+    neutral: { purpose: '一般訊息、系統公告;無情緒色、不掛 status icon(title-only icon-less 形態)' },
+    info: { purpose: '資訊提示(版本更新、流程說明);Info icon' },
+    success: { purpose: '操作成功確認;CircleCheck icon' },
+    warning: { purpose: '可恢復警告(未儲存變更、連線不穩);TriangleAlert icon' },
+    error: { purpose: '錯誤(操作失敗、權限不足);XCircle icon' },
   },
   sizes: {
 

package/src/components/NumberInput/number-input.anatomy.stories.tsx

@@ -19,12 +19,12 @@ type StateKey = 'default' | 'hover' | 'focus' | 'error' | 'disabled'
 type SizeKey = 'sm' | 'md' | 'lg'
 type ColorSpec = { bg: string; text: string; border: string }
 
-const MODES: ModeKey[] = ['edit', 'display', 'readonly', 'disabled']
+const MODES: ModeKey[] = ['edit', 'view', 'readonly', 'disabled']
 const SIZES: SizeKey[] = ['sm', 'md', 'lg']
 
 const MODE_DESC: Record<ModeKey, string> = {
   edit: '表單可編輯欄位，有邊框、hover / focus 回饋',
-  display: '純展示（read-only 內容），無 input chrome、無互動 affordance',
+  view: '純展示值（非表單）— edit 幾何減 chrome（透明 bg/border、保留 px 內距與高度，Model A）。用在 cell / InlineEdit / 詳情',
   readonly: '表單中不可編輯但可見，灰底、無邊框（input chrome 但鎖定）',
   disabled: '停用狀態，灰底、灰字、cursor-not-allowed',
 }
@@ -37,7 +37,7 @@ const TOKEN_MAP: Record<ModeKey, Record<StateKey, ColorSpec>> = {
     error:    { bg: '--surface',      text: '--foreground',   border: '--error' },
     disabled: { bg: '--bg-disabled',  text: '--fg-disabled',  border: 'transparent' },
   },
-  display: {
+  view: {
     default:  { bg: 'transparent',    text: '--foreground',   border: 'transparent' },
     hover:    { bg: 'transparent',    text: '--foreground',   border: 'transparent' },
     focus:    { bg: 'transparent',    text: '--foreground',   border: 'transparent' },
@@ -218,7 +218,7 @@ export const Overview = {
       {/* Format options */}
       <div className="flex flex-col gap-3">
         <H3>格式化選項</H3>
-        <Desc>格式化在 readonly / disabled 和 `mode="display"` 生效。edit 模式輸入 raw 數值（不套格式），確保使用者能直覺地修改。</Desc>
+        <Desc>格式化在 readonly / disabled 和 `mode="view"` 生效。edit 模式輸入 raw 數值（不套格式），確保使用者能直覺地修改。</Desc>
         <div className="flex flex-col gap-2">
           {([
             { label: 'prefix="$"', props: { prefix: '$' }, value: 2490 },
@@ -245,7 +245,7 @@ export const Overview = {
             <thead><tr><Th>Prop</Th><Th>Type</Th><Th>Default</Th><Th>說明</Th></tr></thead>
             <tbody>
               {[
-                ['mode', "'edit'|'display'|'readonly'|'disabled'", "'edit'", '顯示模式'],
+                ['mode', "'edit'|'view'|'readonly'|'disabled'", "'edit'", '顯示模式'],
                 ['error', 'boolean', 'false', '紅色邊框 + aria-invalid（僅 edit 生效）'],
                 ['size', "'sm'|'md'|'lg'", "'md'", '尺寸，與 Button 同 size 對齊'],
                 ['value', 'number | null', '—', '數值'],
@@ -717,7 +717,7 @@ export const StateBehavior = {
           <span className="text-caption font-medium text-fg-secondary">格式化行為</span>
           <div className="overflow-x-auto">
             <table className="border-collapse text-caption">
-              <thead><tr><Th>情境</Th><Th>edit 模式</Th><Th>readonly / Display</Th></tr></thead>
+              <thead><tr><Th>情境</Th><Th>edit 模式</Th><Th>readonly / view</Th></tr></thead>
               <tbody>
                 {[
                   ['value = 2490, prefix="$"', '2490（raw 數值）', '$2,490（格式化）'],

package/src/components/NumberInput/number-input.principles.stories.tsx

@@ -52,7 +52,7 @@ export const UsageGuidance: Story = {
           <p>適合 NumberInput 的真實業務場景(點擊跳轉「展示」頁範例):</p>
           <ul className="space-y-1">
             <li><LinkTo kind="Design System/Components/NumberInput/展示" name="四模式"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">四模式</span></LinkTo></li>
-            <li><LinkTo kind="Design System/Components/NumberInput/展示" name="尺寸與 Button 對齊"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">尺寸與 Button 對齊</span></LinkTo></li>
+            <li><LinkTo kind="Design System/Components/NumberInput/展示" name="三種尺寸"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">尺寸與 Button 對齊</span></LinkTo></li>
             <li><LinkTo kind="Design System/Components/NumberInput/展示" name="格式化選項"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">格式化選項</span></LinkTo></li>
             <li><LinkTo kind="Design System/Components/NumberInput/展示" name="DataTable 整合"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">DataTable 整合</span></LinkTo></li>
           </ul>
@@ -63,9 +63,9 @@ export const UsageGuidance: Story = {
       <Section title="何時不用 + 替代方案">
         <Rule
           title="❌ 不用 NumberInput 做 DataTable 列表展示"
-          note="Table cell 用 `mode='display'` 渲染,不用 edit 模式輸入元件。DataTable 的 currency 欄位自動消費 `<NumberInput mode='display'>`"
+          note="Table cell 用 `mode='view'` 渲染,不用 edit 模式輸入元件。DataTable 的 currency 欄位自動消費 `<NumberInput mode='view'>`"
         >
-          <Label warn>Table cell 顯示值 → `mode='display'` 渲染,不用 edit Input</Label>
+          <Label warn>Table cell 顯示值 → `mode='view'` 渲染,不用 edit Input</Label>
         </Rule>
       </Section>
 
@@ -162,7 +162,7 @@ export const FormatOptionsRule: Story = {
     <div>
       <Rule
         title="prefix — 置於數字前的符號(貨幣是最常見場景)"
-        note="prefix 出現在 readonly / display / disabled 與 DataTable cell 的格式化值;edit 模式輸入 raw 純數字、不渲染 prefix——使用者不需要自己輸入 $"
+        note="prefix 出現在 readonly / view / disabled 與 DataTable cell 的格式化值;edit 模式輸入 raw 純數字、不渲染 prefix——使用者不需要自己輸入 $"
       >
         <NumberInput mode="readonly" value={2490} prefix="$" />
         <NumberInput mode="readonly" value={12500} prefix="NT$" precision={0} />

package/src/components/NumberInput/number-input.spec.md

@@ -61,11 +61,11 @@ NumberInput 是**數值的**輸入與顯示元件。格式化邏輯：`toLocaleS
 ## 對齊
 
 - **Edit 模式（input）**：靠左——input 內打字是左到右
-- **Table cell（Display）**：靠右——縱向比較位數需要右對齊（由 DataTable 的 column type `number` / `currency` 控制）
+- **Table cell（View）**：靠右——縱向比較位數需要右對齊（由 DataTable 的 column type `number` / `currency` 控制）
 
-## Display
+## View
 
-`<NumberInput mode="display">` 在 table cell 和 Form readonly 共用 `formatNumber()` 格式化函式。
+`<NumberInput mode="view">` 在 table cell 和 Form readonly 共用 `formatNumber()` 格式化函式。
 
 - 有值：格式化輸出（prefix + localized number + suffix）
 - null / undefined：半形 `-`（hyphen），`text-foreground`（disabled → fg-disabled）
@@ -103,9 +103,9 @@ col.accessor('price', {
 
 ## 邊界案例
 
-- **Disabled**:由 Field SSOT own(`Field/field-controls.spec.md` State machine 段)。視覺:wrapper bg → `bg-disabled`(neutral-2,`semantic.css` `--bg-disabled`)、formatted text → `text-fg-disabled`(M24 state>emphasis)。Display mode + disabled 維持格式化輸出但 token 切 disabled。
+- **Disabled**:由 Field SSOT own(`Field/field-controls.spec.md` State machine 段)。視覺:wrapper bg → `bg-disabled`(neutral-2,`semantic.css` `--bg-disabled`)、formatted text → `text-fg-disabled`(M24 state>emphasis)。View mode + disabled 維持格式化輸出但 token 切 disabled。
 - **Loading**:NumberInput 不提供 loading state(`NumberInputProps` 無 `loading` prop、無 `CircularProgress` / `aria-busy` 邏輯)。數值輸入為同步操作,無 async fetch 語意;若需 async 場景(如遠端校驗)請走外層 Field validation + `endSlot` 自訂 spinner。
-- **Empty(null / undefined / 空字串)**:Display / readonly mode 渲半形 `-`(hyphen + `text-foreground`,disabled → fg-disabled);Edit mode placeholder 走 default placeholder color。
+- **Empty(null / undefined / 空字串)**:View / readonly mode 渲半形 `-`(hyphen + `text-foreground`,disabled → fg-disabled);Edit mode placeholder 走 default placeholder color。
 - **Invalid input**(non-numeric):input 為 `type="text" inputMode="decimal"`,onChange 以 `Number(raw)` parse,NaN 時忽略不觸發 `onChange`(value 維持原值);搭配 Field validation 渲 error variant(`aria-invalid="true"` + wrapper `border-error`(hover 時 `border-error-hover`)+ 下方 error message)。
 - **輸入中間態**(`-`、`1.`、`0.0` 等 parse 後 lossy 的 raw 字串,2026-07-05 D4 codify):edit mode 以 internal draft string 承載——輸入期間 DOM 顯示 draft 原字串(負號、尾點不被 controlled 回寫吃掉),parse 成功即時同步 `onChange(parsed)`;blur / Enter commit(清 draft、顯示回 committed value,不合法殘字自然還原)、Escape 棄未提交 draft 字串、顯示回 committed value(NumberInput 為 live-commit,每次合法 parse 即 onChange,故非回復 pre-edit 原值;真 revert 需另存 snapshot,屬 API 擴充)。value 面語意不變:`''` / `'-'` 視為 `null`。對齊 Ant InputNumber / Adobe Spectrum NumberField internal draft canonical。 <!-- @benchmark-unverified -->
 - **負數 / 超大數字**:`toLocaleString(locale)` 自動處理負號與千分位分組,無特殊 prop。
@@ -125,7 +125,7 @@ col.accessor('price', {
 
 ## A11y 預設
 
-**ARIA / Pattern**:ARIA / keyboard 機制**僅 edit mode 適用**——edit mode 渲染 native `<input>` element(預設 a11y),且把 `...props`(含 `aria-label` / `aria-describedby` 等)轉發到該 input;該 native input 自身消費 `fieldCtx` 設定 `aria-invalid` / `aria-required` / `aria-describedby` / `aria-errormessage`(非由 Field wrapper 注入,對齊 Select / Combobox trigger 自設機制)。`display` / `readonly` / `disabled` 三 mode 渲染的是無互動純展示文字(`<div>` + `<span>`,不轉發 `aria-*`),螢幕報讀僅得格式化後的靜態值(對齊 Carbon read-only / Stripe display 慣例)。
+**ARIA / Pattern**:ARIA / keyboard 機制**僅 edit mode 適用**——edit mode 渲染 native `<input>` element(預設 a11y),且把 `...props`(含 `aria-label` / `aria-describedby` 等)轉發到該 input;該 native input 自身消費 `fieldCtx` 設定 `aria-invalid` / `aria-required` / `aria-describedby` / `aria-errormessage`(非由 Field wrapper 注入,對齊 Select / Combobox trigger 自設機制)。`view` / `readonly` / `disabled` 三 mode 渲染的是無互動純展示文字(`<div>` + `<span>`,不轉發 `aria-*`),螢幕報讀僅得格式化後的靜態值(對齊 Carbon read-only / Stripe display 慣例)。
 
 **Keyboard 行為**:
 

package/src/components/NumberInput/number-input.stories.tsx

@@ -18,7 +18,7 @@ const meta: Meta<typeof NumberInput> = {
 export default meta
 type Story = StoryObj<typeof NumberInput>
 
-// @story-trait-rationale: pre-existing trait gaps (Default/WithError) tracked separately; this PR scope = add display mode card to Modes story only.
+// @story-trait-rationale: pre-existing trait gaps (Default/WithError) tracked separately; this PR scope = add view mode card to Modes story only.
 /* ── 四模式 ── */
 export const Modes: Story = {
   name: '四模式',
@@ -31,8 +31,8 @@ export const Modes: Story = {
           <NumberInput value={value} onChange={setValue} prefix="$" aria-label="價格(edit mode demo)" />
         </div>
         <div>
-          <h3 className="text-body font-bold text-foreground mb-2">display</h3>
-          <NumberInput mode="display" value={value} prefix="$" aria-label="價格(display mode demo)" />
+          <h3 className="text-body font-bold text-foreground mb-2">view</h3>
+          <NumberInput mode="view" value={value} prefix="$" aria-label="價格(view 模式示範)" />
         </div>
         <div>
           <h3 className="text-body font-bold text-foreground mb-2">readonly</h3>
@@ -49,7 +49,7 @@ export const Modes: Story = {
 
 /* ── 尺寸與 Button 對齊 ── */
 export const SizeAlignment: Story = {
-  name: '尺寸與 Button 對齊',
+  name: '三種尺寸',
   render: () => {
     const [sm, setSm] = React.useState<number | null>(2490)
     const [md, setMd] = React.useState<number | null>(2490)

package/src/components/NumberInput/number-input.tsx

@@ -27,14 +27,26 @@ function formatNumber(
 ): string {
   if (value == null) return ''
   const { precision, prefix = '', suffix = '', locale = 'en-US' } = options
-  const formatted = precision != null
-    ? value.toLocaleString(locale, { minimumFractionDigits: precision, maximumFractionDigits: precision })
+  // 2026-07-18 決策4:precision guard —— 負數/小數/超界進 Intl.NumberFormat 會 RangeError(crash)。
+  //   clamp 回合法 Intl 範圍 [0,20](spec canonical ≤6);超界 dev-warn。維持 number 型別(對齊世界級 4 家)。
+  let safePrecision = precision
+  if (precision != null) {
+    const rounded = Math.round(precision)
+    if (rounded !== precision || precision < 0 || precision > 6) {
+      if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
+        console.warn(`[DS] NumberInput precision ${precision} 超出 canonical 範圍 0-6(或非整數)→ clamp。請傳 0-6 整數。`)
+      }
+    }
+    safePrecision = Math.min(20, Math.max(0, rounded))
+  }
+  const formatted = safePrecision != null
+    ? value.toLocaleString(locale, { minimumFractionDigits: safePrecision, maximumFractionDigits: safePrecision })
     : value.toLocaleString(locale)
   return `${prefix}${formatted}${suffix}`
 }
 
 // Phase B1(2026-05-05):NumberInputDisplay 退場。
-// 改用 `<NumberInput mode="display" value={...} prefix={...} ... />`,format 邏輯在 mode='display' 分支重用。
+// 改用 `<NumberInput mode="view" value={...} prefix={...} ... />`,format 邏輯在 mode='view' 分支重用。
 
 // ── Types ───────────────────────────────────────────────────────────────────
 
@@ -45,7 +57,7 @@ export interface NumberInputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'defaultValue' | 'onChange' | 'type'>,
     Omit<VariantProps<typeof fieldWrapperStyles>, 'mode' | 'variant' | 'width'>,
     NumberFormatOptions {
-  /** Field display mode */
+  /** Field mode */
   mode?: FieldMode
   /**
    * Visual chrome(正交於 mode);Phase B1(2026-05-05)新增。
@@ -122,7 +134,7 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
     // 同 LinkInput 2026-07-04 修法)。
     const [draft, setDraft] = React.useState<string | null>(null)
 
-    // display / readonly / disabled 都顯示格式化值(span 取代 input)
+    // view / readonly / disabled 都顯示格式化值(span 取代 input)
     if (resolvedMode !== 'edit') {
       return (
         <div