@qijenchen/design-system 0.1.0-beta.13 → 0.1.0-beta.130

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

@@ -2,10 +2,11 @@ import * as React from 'react'
 import { Pencil } from 'lucide-react'
 import type { VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
-import type { FieldMode, FieldVariant } from '@/design-system/components/Field/field-types'
-import { fieldWrapperStyles, bareInputStyles, EMPTY_DISPLAY, fieldDisplayTextClass } from '@/design-system/components/Field/field-wrapper'
-import { useFieldContext } from '@/design-system/components/Field/field-context'
+import type { FieldMode, FieldVariant, FieldVariantInternal } from '@/design-system/components/Field/field-types'
+import { fieldWrapperStyles, bareInputStyles, fieldDisplayTextClass } from '@/design-system/components/Field/field-wrapper'
+import { useFieldContext, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldVariant, useResolvedFieldInvalid, useFieldEmptyDisplay, fieldEmptyColorClass } from '@/design-system/components/Field/field-context'
 import { ItemInlineAction } from '@/design-system/patterns/element-anatomy/item-anatomy'
+import { TruncatedText } from '@/design-system/patterns/element-anatomy/truncated-text'
 
 // ── URL Validation ──────────────────────────────────────────────────────────
 
@@ -27,10 +28,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 (
@@ -40,7 +41,10 @@ function renderLinkAnchor(value: string, label?: string) {
       rel="noopener noreferrer"
       className="block truncate min-w-0 text-primary hover:text-primary-hover hover:underline transition-colors"
     >
-      {displayText}
+      {/* 截斷必附 tooltip(tooltip.spec.md:32)— anchor 自身即 hover 目標、無疊層,TruncatedText
+          放 anchor 內(trigger = 其 span child)即可;view/readonly/edit-showLink 共用本 helper 一處修。
+          display="block":anchor 是 block container(對照 breadcrumb.tsx anchor 內同型消費)。 */}
+      <TruncatedText display="block">{displayText}</TruncatedText>
     </a>
   )
 }
@@ -48,15 +52,18 @@ function renderLinkAnchor(value: string, label?: string) {
 // ── Component ───────────────────────────────────────────────────────────────
 
 export interface LinkInputProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'onChange'>,
-    Omit<VariantProps<typeof fieldWrapperStyles>, 'mode' | 'variant'> {
+  // `defaultValue` 一併 Omit(2026-07-05 deep-audit A.1b):spec.md「controlled-only,不支援
+  // defaultValue」宣稱的型別面機械封鎖 — 原本仍在型別 surface 且經 {...props} spread 到已
+  // controlled 的 input(React dev warning)。
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'defaultValue' | 'onChange'>,
+    Omit<VariantProps<typeof fieldWrapperStyles>, 'mode' | 'variant' | 'width'> {
   mode?: FieldMode
   /**
    * Visual chrome(2026-05-05 Phase B3)。對齊 FieldContext.variant 透傳。
    * - `'default'`(預設)— Field wrapper 完整 chrome(form / Field 內嵌)。
-   * - `'bare'` — 透明 variant,hover/focus 才現 border(Toolbar inline edit / DataTable cell-as-input)。
+   * (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
@@ -68,11 +75,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
 }
@@ -84,7 +91,7 @@ const LinkInput = React.forwardRef<HTMLInputElement, LinkInputProps>(
       mode: modeProp,
       variant: variantProp,
       error: errorProp = false,
-      size: sizeProp = 'md',
+      size: sizeProp,
       value,
       onChange,
       placeholder = 'https://',
@@ -92,6 +99,7 @@ const LinkInput = React.forwardRef<HTMLInputElement, LinkInputProps>(
       disabled: disabledProp,
       label,
       showDisplayEndIcon = false,
+      readOnly,
       id: idProp,
       'aria-describedby': ariaDescribedByProp,
       'aria-errormessage': ariaErrorMessageProp,
@@ -100,69 +108,82 @@ const LinkInput = React.forwardRef<HTMLInputElement, LinkInputProps>(
     ref
   ) => {
     const fieldCtx = useFieldContext()
-    const size = sizeProp ?? fieldCtx?.size ?? 'md'
-    const disabled = disabledProp ?? fieldCtx?.disabled
-    // mode resolution:disabled prop 一律覆蓋;否則 prop > context.mode > default 'edit'
-    const mode: FieldMode = modeProp ?? fieldCtx?.mode ?? 'edit'
-    const resolvedMode: FieldMode = disabled ? 'disabled' : mode
+    const size = useResolvedFieldSize(sizeProp)
+    const disabled = useResolvedFieldDisabled(disabledProp)
+    // 2026-06-08 SSOT:mode 經 useResolvedFieldMode 統一解析(prop > 有效 disabled > fieldCtx.mode > readOnly > 'edit')。
+    // spec field-controls.spec.md L125「readOnly 原生屬性自動覆蓋 mode」契約落地。
+    const resolvedMode: FieldMode = useResolvedFieldMode({ mode: modeProp, disabled, readOnly })
+    const emptyDisplay = useFieldEmptyDisplay()
     const isEditable = resolvedMode === 'edit'
     // chrome resolution:per-prop > context > 'default'
-    const resolvedVariant: FieldVariant = variantProp ?? fieldCtx?.variant ?? 'default'
+    const resolvedVariant: FieldVariantInternal = useResolvedFieldVariant(variantProp)
 
-    // ── mode='display' ─────────────────────────────────────────────────────
+    // 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 自此同源。宣告於 view early return 之前(Rules-of-Hooks)。
+    const fieldInvalid = useResolvedFieldInvalid(errorProp)
+
+    // ── Local state / refs ──────────────────────────────────────────────────
+    // 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 ?? '')
+    const [localError, setLocalError] = React.useState(false)
+    const inputRef = React.useRef<HTMLInputElement | null>(null)
+
+    // Sync external value → local
+    React.useEffect(() => {
+      if (!editing) setLocalValue(value ?? '')
+    }, [value, editing])
+
+    // Merge refs
+    const setRef = React.useCallback((el: HTMLInputElement | null) => {
+      inputRef.current = el
+      if (typeof ref === 'function') ref(el)
+      else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = el
+    }, [ref])
+
+    // 2026-05-16 audit codex Round 6:capture rAF + cancel on unmount(defensive hygiene)
+    const focusRafIdRef = React.useRef<number>(0)
+    React.useEffect(() => () => { if (focusRafIdRef.current) cancelAnimationFrame(focusRafIdRef.current) }, [])
+
+    // ── 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)。
-        if (!value) return <span className={cn(fieldDisplayTextClass(size), 'text-fg-muted block truncate')}>{EMPTY_DISPLAY}</span>
+        // — 對齊跨 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
               ? renderLinkAnchor(value, label)
-              : <span className="text-fg-muted">{EMPTY_DISPLAY}</span>
+              : <span className={fieldEmptyColorClass(resolvedMode)}>{emptyDisplay}</span>
             }
           </span>
         </div>
       )
     }
 
-    const [editing, setEditing] = React.useState(false)
-    const [localValue, setLocalValue] = React.useState(value ?? '')
-    const [localError, setLocalError] = React.useState(false)
-    const inputRef = React.useRef<HTMLInputElement | null>(null)
-
-    // Sync external value → local
-    React.useEffect(() => {
-      if (!editing) setLocalValue(value ?? '')
-    }, [value, editing])
-
-    // Merge refs
-    const setRef = React.useCallback((el: HTMLInputElement | null) => {
-      inputRef.current = el
-      if (typeof ref === 'function') ref(el)
-      else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = el
-    }, [ref])
-
     const hasValidValue = !!value && isValidUrl(value)
     const showLink = isEditable && hasValidValue && !editing && !localError
-    const error = errorProp || localError
-
-    // 2026-05-16 audit codex Round 6:capture rAF + cancel on unmount(defensive hygiene)
-    const focusRafIdRef = React.useRef<number>(0)
-    React.useEffect(() => () => { if (focusRafIdRef.current) cancelAnimationFrame(focusRafIdRef.current) }, [])
+    const error = fieldInvalid || localError
 
     const handleEdit = () => {
       setEditing(true)
@@ -218,22 +239,25 @@ const LinkInput = React.forwardRef<HTMLInputElement, LinkInputProps>(
             {resolvedMode === 'disabled'
               ? (displayText
                   ? <span className="text-fg-disabled">{displayText}</span>
-                  : <span className="text-fg-muted">{EMPTY_DISPLAY}</span>)
+                  : <span className={fieldEmptyColorClass(resolvedMode)}>{emptyDisplay}</span>)
               : (value
                   ? renderLinkAnchor(value, label)
-                  : <span className="text-fg-muted">{EMPTY_DISPLAY}</span>)
+                  : <span className={fieldEmptyColorClass(resolvedMode)}>{emptyDisplay}</span>)
             }
           </span>
         </div>
       )
     }
 
-    // edit — link display mode（有合法 URL 且未在編輯中）
+    // edit — link 顯示分支（有合法 URL 且未在編輯中）
     if (showLink) {
       return (
         <div
-          className={cn(fieldWrapperStyles({ mode: 'edit', variant: resolvedVariant, size }), className)}
+          // 2026-07-05 D4:link 顯示分支同樣接 error(errorProp / fieldCtx.invalid)紅框,
+          // 否則 <Field invalid> 下 link state 完全無 error 呈現
+          className={cn(fieldWrapperStyles({ mode: 'edit', variant: resolvedVariant, size, error }), className)}
           data-field-mode="edit"
+          data-error={error ? '' : undefined}
         >
           <span className="flex-1 min-w-0">
             {value && renderLinkAnchor(value, label)}
@@ -250,11 +274,7 @@ const LinkInput = React.forwardRef<HTMLInputElement, LinkInputProps>(
     return (
       <div
         className={cn(
-          fieldWrapperStyles({ mode: 'edit', variant: resolvedVariant, size }),
-          error && [
-            'border-error hover:border-error-hover',
-            'focus-within:border-error focus-within:hover:border-error',
-          ],
+          fieldWrapperStyles({ mode: 'edit', variant: resolvedVariant, size, error }),
           className,
         )}
         data-field-mode="edit"
@@ -269,10 +289,10 @@ const LinkInput = React.forwardRef<HTMLInputElement, LinkInputProps>(
           onBlur={handleBlur}
           onKeyDown={handleKeyDown}
           placeholder={placeholder}
-          aria-invalid={(error || fieldCtx?.invalid) || undefined}
+          aria-invalid={error || undefined}
           aria-required={fieldCtx?.required || undefined}
           aria-describedby={ariaDescribedByProp ?? fieldCtx?.descriptionId}
-          aria-errormessage={ariaErrorMessageProp ?? ((error || fieldCtx?.invalid) ? fieldCtx?.errorId : undefined)}
+          aria-errormessage={ariaErrorMessageProp ?? (error ? fieldCtx?.errorId : undefined)}
           className={bareInputStyles}
           {...props}
         />
@@ -293,9 +313,12 @@ export const linkInputMeta = {
   sizes: {
 
   },
-  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],
+  // states 對齊真實 state 集:text-input 家族無 'active'(按下)專屬視覺態(同 textareaMeta 修法);
+  //   readonly / error 為 fieldWrapperStyles mode + errorProp/localError 實有狀態(2026-07-04 audit 對齊)。
+  states: ['default', 'hover', 'focus-visible', 'readonly', 'disabled', 'error'],
   tokens: {
-    bg: [],
+    // bg 經 fieldWrapperStyles 實渲:edit bg-surface / readonly bg-readonly / disabled bg-disabled(field-wrapper.tsx)。
+    bg: ['bg-surface', 'bg-readonly', 'bg-disabled'],
     fg: ['text-fg-disabled', 'text-fg-muted', 'text-primary'],
     ring: [],
   },

package/src/components/Menu/index.ts

@@ -0,0 +1,5 @@
+// AUTO-GENERATED by scripts/gen-component-indexes.mjs — DO NOT EDIT MANUALLY.
+// Re-export pattern enables package.json exports map subpath:
+//   import { ... } from '@qijenchen/design-system/{components,patterns}/<Dir>'
+// Regenerate: node scripts/gen-component-indexes.mjs
+export * from './menu-item'