npm - @qijenchen/design-system - Versions diffs - 0.1.0-beta.80 → 0.1.0-beta.81 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (458) hide show

package/CLAUDE.md CHANGED Viewed

@@ -179,6 +179,7 @@ CLAUDE.md target ≤ 200(Anthropic best-practice)/ transition ≤ 400 / hard cap
 | `tsc -b` 不 emit declaration | TS4023 漏抓;型別 surface 改動必 `npm run build:lib`(詳 `.claude/rules/self-verify.md` Post-edit)|
 | 工具 flag 沉默陷阱:`rsync -a` 等長同秒靜默跳過(必 `--checksum`+fail-closed,詳 build-published-template-mirror.mjs 檔頭)/ `rg` 黏寫 `-rn` 的 `-r`=replace 輸出變假字串(`-n`/`-l` 永不黏 `r`,2026-06-12 兩次答錯 anchor)| 寫後斷言 + flag 分開寫 |
 | DS css 不在 tokens.css aggregator 也沒被 tsx import = orphan | consumer 靜默拿不到 → 跑版;hook `check_orphan_ds_css.sh` 機械攔(2026-05-27 anchor)|
+| storybook-smoke 驗 storybook-static/ 舊 build = 假綠 | smoke script 已加 stale-build guard(src mtime > build → fail-loud;2026-07-05 anchor:7/3 舊 build 撐過整 branch smoke 宣稱)|
 新 bug → 歸 Meta-Pattern OR 本表 1 行;> 10 條 = 漏寫,**評估 meta-merge 既有 M-rule 而非無腦新增**(meta-patterns velocity ≤ 3/quarter,單 M-rule 必吸收 ≥ 3 prior bugs)。

package/dist/components/Alert/alert.d.ts CHANGED Viewed

@@ -10,6 +10,11 @@ export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     title: React.ReactNode;
     description?: React.ReactNode;
     endContent?: React.ReactNode;
+    /**
+     * 顯示關閉鈕(預設 true)。**需同時傳 `onDismiss` 才會渲染 X** — Alert 是 controlled-only
+     * (不自我移除),無 handler 的 X 是死按鈕(2026-07-05 D4;對齊 Polaris Banner / Ant Alert)。
+     * 條件判斷 SSOT 在 Notice(notice.tsx `showDismiss`),Alert 原樣 forward。
+     */
     dismissible?: boolean;
     onDismiss?: () => void;
 }

package/dist/components/Alert/alert.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/alert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAA8C,KAAK,aAAa,EAAE,MAAM,0CAA0C,CAAA;AA8CzH,QAAA,MAAM,aAAa;;8EAQjB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IAC/B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAGD,QAAA,MAAM,KAAK,~~mFA2FV~~,CAAA;AAMD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
1	+ {"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/alert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAA8C,KAAK,aAAa,EAAE,MAAM,0CAA0C,CAAA;AA8CzH,QAAA,MAAM,aAAa;;8EAQjB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IAC/B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAGD,QAAA,MAAM,KAAK,mFA8FV,CAAA;AAMD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/Alert/alert.js CHANGED Viewed

@@ -39,7 +39,10 @@ const Alert = React.forwardRef(
     title,
     description,
     endContent,
-    dismissible = true,
+    // 2026-07-05 D4:不 destructure-default(原 `= true` 會把「consumer 沒傳」materialize 成顯式
+    // true,讓 Notice 的 dev-warn 無法分辨消費端矛盾)。等效預設 true 由 Notice showDismiss
+    // `!== false` 承擔,行為不變;X 僅在同時傳 onDismiss 時渲染(SSOT 在 notice.tsx)。
+    dismissible,
     onDismiss,
     className,
     ...props

package/dist/components/Alert/alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert.js","sources":["../../../src/components/Alert/alert.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 { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { Notice, useInverseTheme, SUBTLE_ICON_COLOR, type NoticeVariant } from '@/design-system/components/Notice/notice'\n\n/*\n Alert — inline / fixed 通知\n \n ── data-theme 必須搭配 text-foreground ──\n * CSS color 從 body 繼承已解析值,data-theme 只改 --foreground 不改 color。\n * 在 theme boundary 設 text-foreground 強制 re-resolve。\n \n ── Appearance ──\n * subtle: 淺底色 + 四邊 1px border(色相 hover 色)。不設 data-theme,跟隨頁面。\n * solid: 跟 Toast 對齊:\n * neutral → data-theme={inverse} + bg-surface-raised（同層翻轉）\n * info/success/error → bg on outer, data-theme=\"dark\" on inner\n * warning → bg on outer, data-theme=\"light\" on inner\n \n ── Placement ──\n * inline: rounded-md(card-level 圓角,非 overlay — 因 Alert 在頁面流內,非 floating)\n * fixed: 無圓角,full-width,無 border\n */\n\n// border 用 `--{hue}-text`(= icon 同色,2026-06-15 user 拍板「直接共用 hue-text,不開新 token」)。\n// 原借 `--{hue}-hover`(互動狀態 token)當靜態 border 是語意 smell + 跟 icon 不同色;\n// 改共用 hue-text(SUBTLE_ICON_COLOR 用的同一顆,blue-7 等)→ 0 新 token + border/icon cohesion。\nconst SUBTLE_CONTAINER: Record<NoticeVariant, string> = {\n neutral: 'bg-muted border border-border',\n info: 'bg-info-subtle border border-[var(--info-text)]',\n success: 'bg-success-subtle border border-[var(--success-text)]',\n warning: 'bg-warning-subtle border border-[var(--warning-text)]',\n error: 'bg-error-subtle border border-[var(--error-text)]',\n}\n\nconst SOLID_HUE_BG: Record<string, string> = {\n info: 'bg-info',\n success: 'bg-success',\n warning: 'bg-warning',\n error: 'bg-error',\n}\n\nconst SOLID_HUE_THEME: Record<string, string> = {\n info: 'dark',\n success: 'dark',\n warning: 'light',\n error: 'dark',\n}\n\nconst alertVariants = cva('w-full overflow-hidden', {\n variants: {\n placement: {\n inline: 'rounded-md',\n fixed: 'rounded-none border-none',\n },\n },\n defaultVariants: { placement: 'inline' },\n})\n\nexport interface AlertProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,\n VariantProps<typeof alertVariants> {\n variant?: NoticeVariant\n appearance?: 'subtle' \| 'solid'\n title: React.ReactNode\n description?: React.ReactNode\n endContent?: React.ReactNode\n dismissible?: boolean\n onDismiss?: () => void\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n (\n {\n variant = 'neutral',\n appearance = 'subtle',\n placement,\n title,\n description,\n endContent,\n ~~dismissible~~ = true,\n onDismiss,\n className,\n ...props\n },\n ref,\n ) => {\n const inverseTheme = useInverseTheme()\n const isSolid = appearance === 'solid'\n const iconClassName = !isSolid ? SUBTLE_ICON_COLOR[variant] : undefined\n\n // ── Live region 由 wrapping consumer 擁有(WAI-ARIA + Atlassian / Polaris / Material 共識) ──\n // Alert 是 outer host —— 自己擁有 role + aria-live;Notice(inner layout)不再帶 role,\n // 避免 nested live region 造成 screen reader 重複朗讀。\n // - error / warning → role=\"alert\" + aria-live=\"assertive\"(中斷,使用者必須立刻知道)\n // - info / success / neutral → role=\"status\" + aria-live=\"polite\"(空閒朗讀,不打斷)\n const isCritical = variant === 'error' \|\| variant === 'warning'\n const liveRole = isCritical ? 'alert' : 'status'\n const liveLevel = isCritical ? 'assertive' : 'polite'\n\n // placement=\"fixed\" 用 loose px(density-aware)讓 Alert 嵌在更大佈局內時跟周圍\n // loose-padding 元素(Toolbar / BulkActionBar / DataTable 等)左右對齊。\n // py 維持 py-3 fixed(notification banner family canonical,垂直不隨 density)。\n const noticeEl = (\n <Notice\n variant={variant}\n title={title}\n description={description}\n endContent={endContent}\n dismissible={dismissible}\n onDismiss={onDismiss}\n iconClassName={iconClassName}\n className={placement === 'fixed' ? 'px-[var(--layout-space-loose)]' : undefined}\n />\n )\n\n // ── Subtle ──\n if (!isSolid) {\n return (\n <div\n ref={ref}\n role={liveRole}\n aria-live={liveLevel}\n className={cn(alertVariants({ placement }), SUBTLE_CONTAINER[variant], className)}\n {...props}\n >\n {noticeEl}\n </div>\n )\n }\n\n // ── Solid neutral (inverse: bg + theme 同層) ──\n if (variant === 'neutral') {\n return (\n <div\n ref={ref}\n role={liveRole}\n aria-live={liveLevel}\n data-theme={inverseTheme}\n className={cn(alertVariants({ placement }), 'bg-surface-raised text-foreground', className)}\n {...props}\n >\n {noticeEl}\n </div>\n )\n }\n\n // ── Solid 有色相: bg outer + data-theme inner ──\n return (\n <div\n ref={ref}\n role={liveRole}\n aria-live={liveLevel}\n className={cn(alertVariants({ placement }), SOLID_HUE_BG[variant], className)}\n {...props}\n >\n <div data-theme={SOLID_HUE_THEME[variant]} className=\"text-foreground\">\n {noticeEl}\n </div>\n </div>\n )\n },\n)\nAlert.displayName = 'Alert'\n\n// Story auto-compile metadata — Phase 2 fill(2026-05-15)\n// Variants = NoticeVariant 5 hues(prop name `variant`,cva 內僅 placement,色相由 SUBTLE_CONTAINER / SOLID_HUE_BG map 控)\n// Sizes = none(Alert 視覺尺寸繼承 Notice primitive,不隨 size 變;見 spec「為何無 SizeMatrix」)\nexport const alertMeta = {\n component: 'Alert',\n family: 2, // List item(對齊 alert.spec.md frontmatter family: 2)\n variants: {\n neutral: { purpose: '中性提示(系統公告、非緊急說明);無情緒色' },\n info: { purpose: '資訊性提示(版本更新、流程說明);藍色 hue' },\n success: { purpose: '成功狀態的持久性宣告(綁定生效、付款完成需保留確認)' },\n warning: { purpose: '警告但非阻斷(方案到期、需更新付款方式);最高頻' },\n error: { purpose: '錯誤但非阻斷(系統錯誤可重試、API 失敗摘要);aria-live=assertive' },\n },\n sizes: {},\n states: ['default'], // 2026-06-11 R2:Alert 本體無互動 state(spec L183 明文無 disabled;dismiss 互動屬內部 Button),\n tokens: {\n bg: ['bg-error', 'bg-error-subtle', 'bg-info', 'bg-info-subtle', 'bg-muted', 'bg-success', 'bg-success-subtle', 'bg-surface-raised', 'bg-warning', 'bg-warning-subtle'],\n fg: ['text-foreground'],\n ring: [],\n },\n defaultVariant: 'neutral',\n} as const\n\nexport { Alert, alertVariants }\n"],"names":[],"mappings":";;;;;AA4BA,MAAM,mBAAkD;AAAA,EACtD,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,eAAuC;AAAA,EAC3C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,kBAA0C;AAAA,EAC9C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,gBAAgB,IAAI,0BAA0B;AAAA,EAClD,UAAU;AAAA,IACR,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,iBAAiB,EAAE,WAAW,SAAA;AAChC,CAAC;~~AAeD~~,MAAM,QAAQ,MAAM;AAAA,EAClB,CACE;AAAA,IACE,UAAU;AAAA,IACV,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,~~IACA,cAAc~~;AAAA,~~IACd~~;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAe,gBAAA;AACrB,UAAM,UAAU,eAAe;AAC/B,UAAM,gBAAgB,CAAC,UAAU,kBAAkB,OAAO,IAAI;AAO9D,UAAM,aAAa,YAAY,WAAW,YAAY;AACtD,UAAM,WAAW,aAAa,UAAU;AACxC,UAAM,YAAY,aAAa,cAAc;AAK7C,UAAM,WACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,cAAc,UAAU,mCAAmC;AAAA,MAAA;AAAA,IAAA;AAK1E,QAAI,CAAC,SAAS;AACZ,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,MAAM;AAAA,UACN,aAAW;AAAA,UACX,WAAW,GAAG,cAAc,EAAE,UAAA,CAAW,GAAG,iBAAiB,OAAO,GAAG,SAAS;AAAA,UAC/E,GAAG;AAAA,UAEH,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGP;AAGA,QAAI,YAAY,WAAW;AACzB,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,MAAM;AAAA,UACN,aAAW;AAAA,UACX,cAAY;AAAA,UACZ,WAAW,GAAG,cAAc,EAAE,WAAW,GAAG,qCAAqC,SAAS;AAAA,UACzF,GAAG;AAAA,UAEH,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGP;AAGA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM;AAAA,QACN,aAAW;AAAA,QACX,WAAW,GAAG,cAAc,EAAE,UAAA,CAAW,GAAG,aAAa,OAAO,GAAG,SAAS;AAAA,QAC3E,GAAG;AAAA,QAEJ,UAAA,oBAAC,SAAI,cAAY,gBAAgB,OAAO,GAAG,WAAU,mBAClD,UAAA,SAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AACA,MAAM,cAAc;AAKb,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU;AAAA,IACR,SAAS,EAAE,SAAS,wBAAA;AAAA,IACpB,MAAM,EAAE,SAAS,0BAAA;AAAA,IACjB,SAAS,EAAE,SAAS,6BAAA;AAAA,IACpB,SAAS,EAAE,SAAS,2BAAA;AAAA,IACpB,OAAO,EAAE,SAAS,+CAAA;AAAA,EAA+C;AAAA,EAEnE,OAAO,CAAA;AAAA,EACP,QAAQ,CAAC,SAAS;AAAA;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAC,YAAY,mBAAmB,WAAW,kBAAkB,YAAY,cAAc,qBAAqB,qBAAqB,cAAc,mBAAmB;AAAA,IACtK,IAAI,CAAC,iBAAiB;AAAA,IACtB,MAAM,CAAA;AAAA,EAAC;AAAA,EAET,gBAAgB;AAClB;"}
1	+ {"version":3,"file":"alert.js","sources":["../../../src/components/Alert/alert.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 { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { Notice, useInverseTheme, SUBTLE_ICON_COLOR, type NoticeVariant } from '@/design-system/components/Notice/notice'\n\n/*\n Alert — inline / fixed 通知\n \n ── data-theme 必須搭配 text-foreground ──\n * CSS color 從 body 繼承已解析值,data-theme 只改 --foreground 不改 color。\n * 在 theme boundary 設 text-foreground 強制 re-resolve。\n \n ── Appearance ──\n * subtle: 淺底色 + 四邊 1px border(色相 hover 色)。不設 data-theme,跟隨頁面。\n * solid: 跟 Toast 對齊:\n * neutral → data-theme={inverse} + bg-surface-raised（同層翻轉）\n * info/success/error → bg on outer, data-theme=\"dark\" on inner\n * warning → bg on outer, data-theme=\"light\" on inner\n \n ── Placement ──\n * inline: rounded-md(card-level 圓角,非 overlay — 因 Alert 在頁面流內,非 floating)\n * fixed: 無圓角,full-width,無 border\n /\n\n// border 用 `--{hue}-text`(= icon 同色,2026-06-15 user 拍板「直接共用 hue-text,不開新 token」)。\n// 原借 `--{hue}-hover`(互動狀態 token)當靜態 border 是語意 smell + 跟 icon 不同色;\n// 改共用 hue-text(SUBTLE_ICON_COLOR 用的同一顆,blue-7 等)→ 0 新 token + border/icon cohesion。\nconst SUBTLE_CONTAINER: Record<NoticeVariant, string> = {\n neutral: 'bg-muted border border-border',\n info: 'bg-info-subtle border border-[var(--info-text)]',\n success: 'bg-success-subtle border border-[var(--success-text)]',\n warning: 'bg-warning-subtle border border-[var(--warning-text)]',\n error: 'bg-error-subtle border border-[var(--error-text)]',\n}\n\nconst SOLID_HUE_BG: Record<string, string> = {\n info: 'bg-info',\n success: 'bg-success',\n warning: 'bg-warning',\n error: 'bg-error',\n}\n\nconst SOLID_HUE_THEME: Record<string, string> = {\n info: 'dark',\n success: 'dark',\n warning: 'light',\n error: 'dark',\n}\n\nconst alertVariants = cva('w-full overflow-hidden', {\n variants: {\n placement: {\n inline: 'rounded-md',\n fixed: 'rounded-none border-none',\n },\n },\n defaultVariants: { placement: 'inline' },\n})\n\nexport interface AlertProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,\n VariantProps<typeof alertVariants> {\n variant?: NoticeVariant\n appearance?: 'subtle' \| 'solid'\n title: React.ReactNode\n description?: React.ReactNode\n endContent?: React.ReactNode\n /\n 顯示關閉鈕(預設 true)。需同時傳 `onDismiss` 才會渲染 X — Alert 是 controlled-only\n * (不自我移除),無 handler 的 X 是死按鈕(2026-07-05 D4;對齊 Polaris Banner / Ant Alert)。\n * 條件判斷 SSOT 在 Notice(notice.tsx `showDismiss`),Alert 原樣 forward。\n */\n dismissible?: boolean\n onDismiss?: () => void\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n (\n {\n variant = 'neutral',\n appearance = 'subtle',\n placement,\n title,\n description,\n endContent,\n // 2026-07-05 D4:不 destructure-default(原 `= true` 會把「consumer 沒傳」materialize 成顯式\n // true,讓 Notice 的 dev-warn 無法分辨消費端矛盾)。等效預設 true 由 Notice showDismiss\n // `!== false` 承擔,行為不變;X 僅在同時傳 onDismiss 時渲染(SSOT 在 notice.tsx)。\n dismissible,\n onDismiss,\n className,\n ...props\n },\n ref,\n ) => {\n const inverseTheme = useInverseTheme()\n const isSolid = appearance === 'solid'\n const iconClassName = !isSolid ? SUBTLE_ICON_COLOR[variant] : undefined\n\n // ── Live region 由 wrapping consumer 擁有(WAI-ARIA + Atlassian / Polaris / Material 共識) ──\n // Alert 是 outer host —— 自己擁有 role + aria-live;Notice(inner layout)不再帶 role,\n // 避免 nested live region 造成 screen reader 重複朗讀。\n // - error / warning → role=\"alert\" + aria-live=\"assertive\"(中斷,使用者必須立刻知道)\n // - info / success / neutral → role=\"status\" + aria-live=\"polite\"(空閒朗讀,不打斷)\n const isCritical = variant === 'error' \|\| variant === 'warning'\n const liveRole = isCritical ? 'alert' : 'status'\n const liveLevel = isCritical ? 'assertive' : 'polite'\n\n // placement=\"fixed\" 用 loose px(density-aware)讓 Alert 嵌在更大佈局內時跟周圍\n // loose-padding 元素(Toolbar / BulkActionBar / DataTable 等)左右對齊。\n // py 維持 py-3 fixed(notification banner family canonical,垂直不隨 density)。\n const noticeEl = (\n <Notice\n variant={variant}\n title={title}\n description={description}\n endContent={endContent}\n dismissible={dismissible}\n onDismiss={onDismiss}\n iconClassName={iconClassName}\n className={placement === 'fixed' ? 'px-[var(--layout-space-loose)]' : undefined}\n />\n )\n\n // ── Subtle ──\n if (!isSolid) {\n return (\n <div\n ref={ref}\n role={liveRole}\n aria-live={liveLevel}\n className={cn(alertVariants({ placement }), SUBTLE_CONTAINER[variant], className)}\n {...props}\n >\n {noticeEl}\n </div>\n )\n }\n\n // ── Solid neutral (inverse: bg + theme 同層) ──\n if (variant === 'neutral') {\n return (\n <div\n ref={ref}\n role={liveRole}\n aria-live={liveLevel}\n data-theme={inverseTheme}\n className={cn(alertVariants({ placement }), 'bg-surface-raised text-foreground', className)}\n {...props}\n >\n {noticeEl}\n </div>\n )\n }\n\n // ── Solid 有色相: bg outer + data-theme inner ──\n return (\n <div\n ref={ref}\n role={liveRole}\n aria-live={liveLevel}\n className={cn(alertVariants({ placement }), SOLID_HUE_BG[variant], className)}\n {...props}\n >\n <div data-theme={SOLID_HUE_THEME[variant]} className=\"text-foreground\">\n {noticeEl}\n </div>\n </div>\n )\n },\n)\nAlert.displayName = 'Alert'\n\n// Story auto-compile metadata — Phase 2 fill(2026-05-15)\n// Variants = NoticeVariant 5 hues(prop name `variant`,cva 內僅 placement,色相由 SUBTLE_CONTAINER / SOLID_HUE_BG map 控)\n// Sizes = none(Alert 視覺尺寸繼承 Notice primitive,不隨 size 變;見 spec「為何無 SizeMatrix」)\nexport const alertMeta = {\n component: 'Alert',\n family: 2, // List item(對齊 alert.spec.md frontmatter family: 2)\n variants: {\n neutral: { purpose: '中性提示(系統公告、非緊急說明);無情緒色' },\n info: { purpose: '資訊性提示(版本更新、流程說明);藍色 hue' },\n success: { purpose: '成功狀態的持久性宣告(綁定生效、付款完成需保留確認)' },\n warning: { purpose: '警告但非阻斷(方案到期、需更新付款方式);最高頻' },\n error: { purpose: '錯誤但非阻斷(系統錯誤可重試、API 失敗摘要);aria-live=assertive' },\n },\n sizes: {},\n states: ['default'], // 2026-06-11 R2:Alert 本體無互動 state(spec L183 明文無 disabled;dismiss 互動屬內部 Button),\n tokens: {\n bg: ['bg-error', 'bg-error-subtle', 'bg-info', 'bg-info-subtle', 'bg-muted', 'bg-success', 'bg-success-subtle', 'bg-surface-raised', 'bg-warning', 'bg-warning-subtle'],\n fg: ['text-foreground'],\n ring: [],\n },\n defaultVariant: 'neutral',\n} as const\n\nexport { Alert, alertVariants }\n"],"names":[],"mappings":"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"}

package/dist/components/AppShell/app-shell.d.ts CHANGED Viewed

@@ -62,7 +62,7 @@ declare const AppShell: React.ForwardRefExoticComponent<AppShellProps & React.Re
  * AppShellAside — right panel:standard inline(desktop) vs modal overlay(mobile)。
  *
  * Desktop(viewport ≥ 768px):
- *   - Render 直接放 layout grid 右側(asideOpen=true 才 mount,close hide via parent)
+ *   - Render 直接放 layout grid 右側(AppShell 恆 render {aside};AppShellAside 於 !asideOpen 自行 return null — 內部自決,非 via parent)
  *   - 不蓋 mask / background 可操作 / 佔 layout 寬
  *   - Vertical extent:primary-sidebar → 頂天立地 / primary-header → header 下方
  *

package/dist/components/AppShell/app-shell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"app-shell.js","sources":["../../../src/components/AppShell/app-shell.tsx"],"sourcesContent":["// @benchmark-cited: 2026-05-19 — Mantine AppShell / Ant Layout / Material 3 Drawer / Atlassian Navigation System cite in app-shell.spec.md frontmatter.\n/*\n AppShell — web service page-level layout primitive。\n \n 組合 Sidebar + ChromeHeader + Aside + main 成完整 page shell。SSOT 邊界:本 composite component only\n * own slot composition + layout mode + Aside responsive mode;不 own sidebar / header /\n * sheet 視覺(各自 spec own)。\n \n 對齊 Mantine AppShell compound API + Ant Layout slot 模式 + Material 3 standard/modal\n * drawer canonical(per spec.md frontmatter cite)。\n \n Spec SSOT:`components/AppShell/app-shell.spec.md`\n /\n\nimport as React from 'react'\nimport { X as XIcon } from 'lucide-react'\nimport {\n Sheet,\n SheetContent,\n SheetTitle,\n} from '@/design-system/components/Sheet/sheet'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ScrollArea } from '@/design-system/components/ScrollArea/scroll-area'\nimport { ChromeHeader } from '@/design-system/patterns/header-canonical/chrome-header'\nimport { useIsNarrowViewport } from '@/design-system/hooks/use-is-narrow-viewport'\nimport { cn } from '@/lib/utils'\n\n// ── Types ────────────────────────────────────────────────────────────────────\n\ntype AppShellLayout = 'primary-sidebar' \| 'primary-header'\n\nexport interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {\n /** primary-sidebar (Linear/Notion 派) \| primary-header (GitHub/Slack 派);預設 primary-sidebar /\n layout?: AppShellLayout\n /* Sidebar 元素(必傳 Sidebar primitive,per Consumer 紀律)/\n sidebar?: React.ReactNode\n /\n Local page header(永遠 render 在 main column 頂部,當前頁 actions / breadcrumb / page-level filter)。\n * 兩 layout mode 都會 render 此 slot — `primary-header` mode 多了 globalHeader 在上方,\n * 不取代 local header(per 2026-05-20 user clarification「primary-header = primary-sidebar + 一條 global header」)。\n /\n header?: React.ReactNode\n /\n Global header(僅 `primary-header` mode render)。橫跨整 viewport 的頂部 bar:\n * account avatar / workspace switcher / global search / notifications。\n * 對齊 GitHub top nav / Slack workspace bar / Gmail logo bar 慣例。\n * `primary-sidebar` mode 傳此 prop 會被忽略。\n /\n globalHeader?: React.ReactNode\n /* Aside 元素(`<AppShellAside>` sub-component);可選 /\n aside?: React.ReactNode\n /* Aside open state(modal mode 必須)/\n asideOpen?: boolean\n onAsideOpenChange?: (open: boolean) => void\n /* Main content;`<main>` landmark + padding=0 /\n children: React.ReactNode\n}\n\nexport interface AppShellAsideProps {\n /* Required:modal mode 走 Sheet → aria-labelledby 強制,per sheet.spec.md:98 /\n title: string\n /* Width(number 或 breakpoint-keyed object);clamp min:240 max:640 /\n width?: number \| { md?: number; xl?: number }\n /* Children content /\n children: React.ReactNode\n className?: string\n}\n\n// ── Context ──────────────────────────────────────────────────────────────────\n\ninterface AppShellContextValue {\n layout: AppShellLayout\n asideOpen: boolean\n setAsideOpen: (open: boolean) => void\n isMobile: boolean\n}\n\nconst AppShellContext = React.createContext<AppShellContextValue \| null>(null)\n\nfunction useAppShell(): AppShellContextValue {\n const ctx = React.useContext(AppShellContext)\n if (!ctx) throw new Error('AppShellAside must be used within <AppShell>')\n return ctx\n}\n\n// Mobile breakpoint:消費既有 `useIsNarrowViewport`(`hooks/use-is-narrow-viewport.ts` SSOT,\n// 768px,跟 Sidebar SSOT 同源)— 不發明 local hook,per codex Layer B D2/D4 verdict 避 drift。\n\n// xl breakpoint(對齊 Tailwind v4 xl = 1280px,DS-wide consensus)\nconst XL_BREAKPOINT_PX = 1280\n\nfunction useIsXl(): boolean {\n const [isXl, setIsXl] = React.useState<boolean>(() => {\n if (typeof window === 'undefined') return false\n return window.matchMedia(`(min-width: ${XL_BREAKPOINT_PX}px)`).matches\n })\n\n React.useEffect(() => {\n const mq = window.matchMedia(`(min-width: ${XL_BREAKPOINT_PX}px)`)\n const handler = (e: MediaQueryListEvent) => setIsXl(e.matches)\n mq.addEventListener('change', handler)\n return () => mq.removeEventListener('change', handler)\n }, [])\n\n return isXl\n}\n\n// ── Width resolve(consumer 自傳 + clamp 240-640)──────────────────────────────\n\nconst ASIDE_WIDTH_MIN = 240\nconst ASIDE_WIDTH_MAX = 640\nconst ASIDE_WIDTH_DEFAULT = 320\n\nfunction resolveAsideWidth(width: AppShellAsideProps['width'], isXl: boolean): number {\n if (typeof width === 'number') {\n return Math.max(ASIDE_WIDTH_MIN, Math.min(ASIDE_WIDTH_MAX, width))\n }\n if (width && typeof width === 'object') {\n // breakpoint-keyed:xl viewport(≥1280px)用 xl,否則 md\n const v = (isXl ? width.xl ?? width.md : width.md) ?? ASIDE_WIDTH_DEFAULT\n return Math.max(ASIDE_WIDTH_MIN, Math.min(ASIDE_WIDTH_MAX, v))\n }\n return ASIDE_WIDTH_DEFAULT\n}\n\n// ── Skip-to-main link(a11y WCAG 2.4.1)───────────────────────────────────────\n\nfunction SkipToMain() {\n return (\n <a\n href=\"#app-shell-main\"\n className={cn(\n 'sr-only focus:not-sr-only',\n 'focus:fixed focus:top-2 focus:left-2 focus:z-50',\n 'focus:px-3 focus:py-2 focus:rounded-md',\n 'focus:bg-surface focus:text-foreground focus:shadow-[var(--elevation-200)]',\n 'focus:outline-none focus:ring-2 focus:ring-primary'\n )}\n >\n Skip to main content\n </a>\n )\n}\n\n// ── AppShell root ────────────────────────────────────────────────────────────\n\nconst AppShell = React.forwardRef<HTMLDivElement, AppShellProps>(\n (\n {\n layout = 'primary-sidebar',\n sidebar,\n header,\n globalHeader,\n aside,\n asideOpen: asideOpenProp,\n onAsideOpenChange,\n children,\n className,\n ...props\n },\n ref\n ) => {\n const [asideOpenInternal, setAsideOpenInternal] = React.useState(false)\n const isControlled = asideOpenProp !== undefined\n const asideOpen = isControlled ? asideOpenProp : asideOpenInternal\n\n const setAsideOpen = React.useCallback(\n (open: boolean) => {\n if (!isControlled) setAsideOpenInternal(open)\n onAsideOpenChange?.(open)\n },\n [isControlled, onAsideOpenChange]\n )\n\n const isMobile = useIsNarrowViewport()\n\n // ── Keyboard: cmd+. toggle aside ──\n // ⌘B sidebar toggle by Sidebar SSOT(本 component 不重覆 register)\n React.useEffect(() => {\n const onKey = (e: KeyboardEvent) => {\n if (e.key === '.' && (e.metaKey \|\| e.ctrlKey)) {\n e.preventDefault()\n setAsideOpen(!asideOpen)\n }\n }\n window.addEventListener('keydown', onKey)\n return () => window.removeEventListener('keydown', onKey)\n }, [asideOpen, setAsideOpen])\n\n const ctxValue = React.useMemo<AppShellContextValue>(\n () => ({ layout, asideOpen, setAsideOpen, isMobile }),\n [layout, asideOpen, setAsideOpen, isMobile]\n )\n\n // ── Layout grid(2 mode)──\n // primary-sidebar:\n // row1: [sidebar (頂天)][main col (header + main)][aside (頂天)]\n // primary-header:\n // row1: [header (橫跨整 viewport, banner role)]\n // row2: [sidebar][main][aside]\n\n // AppShellAside 自決 inline vs modal mode(via AppShellContext.isMobile)。\n // AppShell 一律只 render `{aside}` 一次,AppShellAside 內部根據 isMobile 決定 render 形式。\n\n if (layout === 'primary-header') {\n // primary-header layout(2026-05-21 v2 — user clarification「primary-header = primary-sidebar + 一條 global header」):\n // 結構:row1 globalHeader(全寬 global bar)/ row2 [sidebar][main col: localHeader + main][aside]\n // - globalHeader = 跨頁 account / workspace switcher / notifications(對齊 GitHub top nav / Slack workspace bar)\n // - header = local page header,仍存在(per page actions / breadcrumb,對齊 GitHub repo header / Slack channel header / Gmail email-list toolbar 2-layer 慣例)\n // Consumer 必傳 `<Sidebar viewportInsetTop=\"var(--chrome-header-height)\">` 讓 sidebar 從 globalHeader 下方起算。\n return (\n <AppShellContext.Provider value={ctxValue}>\n <div\n ref={ref}\n className={cn('flex h-svh w-full flex-col overflow-hidden bg-canvas', className)}\n {...props}\n >\n <SkipToMain />\n {/ Row 1:Global header(account / workspace switcher / notifications,橫跨整 viewport)/}\n {globalHeader && <div className=\"flex-shrink-0\">{globalHeader}</div>}\n {/ Row 2:[sidebar][main col][aside]horizontal row /}\n <div className=\"flex flex-1 min-h-0 w-full\">\n {sidebar}\n {/ Main column:local header + main content(per user model「primary-header = primary-sidebar + global header」)/}\n <div className=\"flex flex-col flex-1 min-w-0 min-h-0 overflow-hidden\">\n {header && <div className=\"flex-shrink-0\">{header}</div>}\n <main\n id=\"app-shell-main\"\n tabIndex={-1}\n className=\"flex-1 min-w-0 min-h-0 overflow-y-auto focus:outline-none\"\n >\n {children}\n </main>\n </div>\n {aside}\n </div>\n </div>\n </AppShellContext.Provider>\n )\n }\n\n // primary-sidebar layout\n return (\n <AppShellContext.Provider value={ctxValue}>\n <div\n ref={ref}\n className={cn('flex h-svh w-full overflow-hidden bg-canvas', className)}\n {...props}\n >\n <SkipToMain />\n {/ Sidebar — 頂天 /}\n {sidebar}\n {/ Main column(header + main 垂直堆)/}\n <div className=\"flex flex-col flex-1 min-w-0 min-h-0 overflow-hidden\">\n {header && (\n // Header 在 main column 內(main col sibling,非 main descendant)。ChromeHeader 自\n // 2026-05-20 起 render `<header>`(chrome-header.tsx);依 W3C HTML-AAM,`<div>` wrapper\n // 不 scope out banner(只有 main/article/aside/nav/section 能)→ 仍得 implicit banner ✓\n // (對齊 app-shell.spec.md「W3C ARIA in HTML banner rule」段)。\n <div className=\"flex-shrink-0\">{header}</div>\n )}\n <main\n id=\"app-shell-main\"\n tabIndex={-1}\n className=\"flex-1 min-h-0 overflow-y-auto focus:outline-none\"\n >\n {children}\n </main>\n </div>\n {/ Aside slot — desktop inline OR mobile Sheet,內部自決 /}\n {aside}\n </div>\n </AppShellContext.Provider>\n )\n }\n)\nAppShell.displayName = 'AppShell'\n\n// ── AppShellAside sub-component ──────────────────────────────────────────────\n\n/\n AppShellAside — right panel:standard inline(desktop) vs modal overlay(mobile)。\n \n Desktop(viewport ≥ 768px):\n * - Render 直接放 layout grid 右側(asideOpen=true 才 mount,close hide via parent)\n * - 不蓋 mask / background 可操作 / 佔 layout 寬\n * - Vertical extent:primary-sidebar → 頂天立地 / primary-header → header 下方\n \n Mobile(viewport < 768px):\n * - Render 走 Sheet primitive(side=\"right\",per sheet.spec.md)\n * - Mask 蓋 / background 不可操作 / 不佔 layout 寬\n * - title 強制(aria-labelledby per sheet.spec.md:98)\n */\nconst AppShellAside = React.forwardRef<HTMLElement, AppShellAsideProps>(\n ({ title, width, children, className }, ref) => {\n const { asideOpen, setAsideOpen, isMobile } = useAppShell()\n const isXl = useIsXl()\n const resolvedWidth = resolveAsideWidth(width, isXl)\n\n // Shared frame:always-on header(title + close X)+ body(ScrollArea + layoutSpace 規則 1B 父層 padding)\n // 對齊 codex Layer B 2026-05-20「container mode 可變,panel role/content 不該變」+ Notion/Figma right\n // panel 共識(modal vs inline 結構相同,host wrapper 不同)。\n // 2026-05-20 migrate 消費 ChromeHeader primitive(撤回自刻 + 撤回 bg-surface 疊加 — 對齊\n // `header-canonical.spec.md`「6. Background ownership」段「Nested chrome header 透明繼承\n // parent」:aside container 自身已 bg-surface,內 header 不該再畫 bg 避免疊加 drift)。\n // titleNode 依 mode 不同:modal(Sheet)用 SheetTitle 綁 Radix Dialog titleId — 否則\n // SheetContent 的 aria-labelledby 指向不存在的 id → SR 念「unnamed dialog」+ Radix\n // TitleWarning console.error(違 sheet.spec.md:98「Sheet content 必有可見 title」)。\n // inline(aside)用純 <h2>:aside 自身已 aria-label={title},且無 Dialog context 不可用 SheetTitle。\n const renderFrame = (titleNode: React.ReactNode) => (\n <>\n <ChromeHeader>\n {titleNode}\n <Button\n iconOnly\n dismiss\n size=\"sm\"\n startIcon={XIcon}\n aria-label=\"關閉\"\n onClick={() => setAsideOpen(false)}\n />\n </ChromeHeader>\n <ScrollArea className=\"flex-1 min-h-0\">\n {children}\n </ScrollArea>\n </>\n )\n\n // Modal mode(mobile)— Sheet from right\n if (isMobile) {\n return (\n <Sheet open={asideOpen} onOpenChange={setAsideOpen}>\n <SheetContent\n side=\"right\"\n className=\"w-[min(90vw,var(--app-shell-aside-modal-width))] flex flex-col p-0 [&>button]:hidden\"\n style={{ ['--app-shell-aside-modal-width' as string]: `${resolvedWidth}px` }}\n >\n {renderFrame(<SheetTitle className=\"flex-1\">{title}</SheetTitle>)}\n </SheetContent>\n </Sheet>\n )\n }\n\n // Standard inline mode(desktop)\n if (!asideOpen) return null\n\n return (\n <aside\n ref={ref}\n aria-label={title}\n className={cn(\n 'flex flex-col h-full min-h-0 overflow-hidden',\n 'bg-surface border-l border-divider',\n className\n )}\n style={{ width: resolvedWidth }}\n >\n {renderFrame(<h2 className=\"text-body-lg font-medium flex-1 truncate\">{title}</h2>)}\n </aside>\n )\n }\n)\nAppShellAside.displayName = 'AppShellAside'\n\n// ── Exports ──────────────────────────────────────────────────────────────────\n\n// code-quality-allow: dead-export useAppShell — public compound API hook(consumer 可自拼 custom aside layout,\n// 對齊 Radix `useDialogContext` / MUI `useFormControl` 慣例)。內部 AppShellAside 已消費(L294),\n// audit script 抓「無 cross-file import」是 false positive(2026-05-21 D2 codify)。\nexport { AppShell, AppShellAside, useAppShell }\n"],"names":["XIcon"],"mappings":";;;;;;;;;AA6EA,MAAM,kBAAkB,MAAM,cAA2C,IAAI;AAE7E,SAAS,cAAoC;AAC3C,QAAM,MAAM,MAAM,WAAW,eAAe;AAC5C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,8CAA8C;AACxE,SAAO;AACT;AAMA,MAAM,mBAAmB;AAEzB,SAAS,UAAmB;AAC1B,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAkB,MAAM;AACpD,QAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,WAAO,OAAO,WAAW,eAAe,gBAAgB,KAAK,EAAE;AAAA,EACjE,CAAC;AAED,QAAM,UAAU,MAAM;AACpB,UAAM,KAAK,OAAO,WAAW,eAAe,gBAAgB,KAAK;AACjE,UAAM,UAAU,CAAC,MAA2B,QAAQ,EAAE,OAAO;AAC7D,OAAG,iBAAiB,UAAU,OAAO;AACrC,WAAO,MAAM,GAAG,oBAAoB,UAAU,OAAO;AAAA,EACvD,GAAG,CAAA,CAAE;AAEL,SAAO;AACT;AAIA,MAAM,kBAAkB;AACxB,MAAM,kBAAkB;AACxB,MAAM,sBAAsB;AAE5B,SAAS,kBAAkB,OAAoC,MAAuB;AACpF,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO,KAAK,IAAI,iBAAiB,KAAK,IAAI,iBAAiB,KAAK,CAAC;AAAA,EACnE;AACA,MAAI,SAAS,OAAO,UAAU,UAAU;AAEtC,UAAM,KAAK,OAAO,MAAM,MAAM,MAAM,KAAK,MAAM,OAAO;AACtD,WAAO,KAAK,IAAI,iBAAiB,KAAK,IAAI,iBAAiB,CAAC,CAAC;AAAA,EAC/D;AACA,SAAO;AACT;AAIA,SAAS,aAAa;AACpB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAIL;AAIA,MAAM,WAAW,MAAM;AAAA,EACrB,CACE;AAAA,IACE,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,CAAC,mBAAmB,oBAAoB,IAAI,MAAM,SAAS,KAAK;AACtE,UAAM,eAAe,kBAAkB;AACvC,UAAM,YAAY,eAAe,gBAAgB;AAEjD,UAAM,eAAe,MAAM;AAAA,MACzB,CAAC,SAAkB;AACjB,YAAI,CAAC,aAAc,sBAAqB,IAAI;AAC5C,+DAAoB;AAAA,MACtB;AAAA,MACA,CAAC,cAAc,iBAAiB;AAAA,IAAA;AAGlC,UAAM,WAAW,oBAAA;AAIjB,UAAM,UAAU,MAAM;AACpB,YAAM,QAAQ,CAAC,MAAqB;AAClC,YAAI,EAAE,QAAQ,QAAQ,EAAE,WAAW,EAAE,UAAU;AAC7C,YAAE,eAAA;AACF,uBAAa,CAAC,SAAS;AAAA,QACzB;AAAA,MACF;AACA,aAAO,iBAAiB,WAAW,KAAK;AACxC,aAAO,MAAM,OAAO,oBAAoB,WAAW,KAAK;AAAA,IAC1D,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,UAAM,WAAW,MAAM;AAAA,MACrB,OAAO,EAAE,QAAQ,WAAW,cAAc,SAAA;AAAA,MAC1C,CAAC,QAAQ,WAAW,cAAc,QAAQ;AAAA,IAAA;AAa5C,QAAI,WAAW,kBAAkB;AAM/B,aACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,UAC/B,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAG,wDAAwD,SAAS;AAAA,UAC9E,GAAG;AAAA,UAEJ,UAAA;AAAA,YAAA,oBAAC,YAAA,EAAW;AAAA,YAEX,gBAAgB,oBAAC,OAAA,EAAI,WAAU,iBAAiB,UAAA,cAAa;AAAA,YAE9D,qBAAC,OAAA,EAAI,WAAU,8BACZ,UAAA;AAAA,cAAA;AAAA,cAED,qBAAC,OAAA,EAAI,WAAU,wDACZ,UAAA;AAAA,gBAAA,UAAU,oBAAC,OAAA,EAAI,WAAU,iBAAiB,UAAA,QAAO;AAAA,gBAClD;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAG;AAAA,oBACH,UAAU;AAAA,oBACV,WAAU;AAAA,oBAET;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACH,GACF;AAAA,cACC;AAAA,YAAA,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,IAEJ;AAGA,WACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,UAC/B,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,+CAA+C,SAAS;AAAA,QACrE,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,YAAA,EAAW;AAAA,UAEX;AAAA,UAED,qBAAC,OAAA,EAAI,WAAU,wDACZ,UAAA;AAAA,YAAA;AAAA;AAAA;AAAA;AAAA,YAKC,oBAAC,OAAA,EAAI,WAAU,iBAAiB,UAAA,QAAO;AAAA,YAEzC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAG;AAAA,gBACH,UAAU;AAAA,gBACV,WAAU;AAAA,gBAET;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,GACF;AAAA,UAEC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;AAiBvB,MAAM,gBAAgB,MAAM;AAAA,EAC1B,CAAC,EAAE,OAAO,OAAO,UAAU,UAAA,GAAa,QAAQ;AAC9C,UAAM,EAAE,WAAW,cAAc,SAAA,IAAa,YAAA;AAC9C,UAAM,OAAO,QAAA;AACb,UAAM,gBAAgB,kBAAkB,OAAO,IAAI;AAYnD,UAAM,cAAc,CAAC,cACnB,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA,qBAAC,cAAA,EACE,UAAA;AAAA,QAAA;AAAA,QACD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,UAAQ;AAAA,YACR,SAAO;AAAA,YACP,MAAK;AAAA,YACL,WAAWA;AAAAA,YACX,cAAW;AAAA,YACX,SAAS,MAAM,aAAa,KAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACnC,GACF;AAAA,MACA,oBAAC,YAAA,EAAW,WAAU,kBACnB,SAAA,CACH;AAAA,IAAA,GACF;AAIF,QAAI,UAAU;AACZ,aACE,oBAAC,OAAA,EAAM,MAAM,WAAW,cAAc,cACpC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,OAAO,EAAE,CAAC,+BAAyC,GAAG,GAAG,aAAa,KAAA;AAAA,UAErE,sBAAY,oBAAC,YAAA,EAAW,WAAU,UAAU,iBAAM,CAAa;AAAA,QAAA;AAAA,MAAA,GAEpE;AAAA,IAEJ;AAGA,QAAI,CAAC,UAAW,QAAO;AAEvB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,OAAO,cAAA;AAAA,QAEf,sBAAY,oBAAC,MAAA,EAAG,WAAU,4CAA4C,iBAAM,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGxF;AACF;AACA,cAAc,cAAc;"}
1	+ {"version":3,"file":"app-shell.js","sources":["../../../src/components/AppShell/app-shell.tsx"],"sourcesContent":["// @benchmark-cited: 2026-05-19 — Mantine AppShell / Ant Layout / Material 3 Drawer / Atlassian Navigation System cite in app-shell.spec.md frontmatter.\n/*\n AppShell — web service page-level layout primitive。\n \n 組合 Sidebar + ChromeHeader + Aside + main 成完整 page shell。SSOT 邊界:本 composite component only\n * own slot composition + layout mode + Aside responsive mode;不 own sidebar / header /\n * sheet 視覺(各自 spec own)。\n \n 對齊 Mantine AppShell compound API + Ant Layout slot 模式 + Material 3 standard/modal\n * drawer canonical(per spec.md frontmatter cite)。\n \n Spec SSOT:`components/AppShell/app-shell.spec.md`\n /\n\nimport as React from 'react'\nimport { X as XIcon } from 'lucide-react'\nimport {\n Sheet,\n SheetContent,\n SheetTitle,\n} from '@/design-system/components/Sheet/sheet'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ScrollArea } from '@/design-system/components/ScrollArea/scroll-area'\nimport { ChromeHeader } from '@/design-system/patterns/header-canonical/chrome-header'\nimport { useIsNarrowViewport } from '@/design-system/hooks/use-is-narrow-viewport'\nimport { cn } from '@/lib/utils'\n\n// ── Types ────────────────────────────────────────────────────────────────────\n\ntype AppShellLayout = 'primary-sidebar' \| 'primary-header'\n\nexport interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {\n /** primary-sidebar (Linear/Notion 派) \| primary-header (GitHub/Slack 派);預設 primary-sidebar /\n layout?: AppShellLayout\n /* Sidebar 元素(必傳 Sidebar primitive,per Consumer 紀律)/\n sidebar?: React.ReactNode\n /\n Local page header(永遠 render 在 main column 頂部,當前頁 actions / breadcrumb / page-level filter)。\n * 兩 layout mode 都會 render 此 slot — `primary-header` mode 多了 globalHeader 在上方,\n * 不取代 local header(per 2026-05-20 user clarification「primary-header = primary-sidebar + 一條 global header」)。\n /\n header?: React.ReactNode\n /\n Global header(僅 `primary-header` mode render)。橫跨整 viewport 的頂部 bar:\n * account avatar / workspace switcher / global search / notifications。\n * 對齊 GitHub top nav / Slack workspace bar / Gmail logo bar 慣例。\n * `primary-sidebar` mode 傳此 prop 會被忽略。\n /\n globalHeader?: React.ReactNode\n /* Aside 元素(`<AppShellAside>` sub-component);可選 /\n aside?: React.ReactNode\n /* Aside open state(modal mode 必須)/\n asideOpen?: boolean\n onAsideOpenChange?: (open: boolean) => void\n /* Main content;`<main>` landmark + padding=0 /\n children: React.ReactNode\n}\n\nexport interface AppShellAsideProps {\n /* Required:modal mode 走 Sheet → aria-labelledby 強制,per sheet.spec.md:98 /\n title: string\n /* Width(number 或 breakpoint-keyed object);clamp min:240 max:640 /\n width?: number \| { md?: number; xl?: number }\n /* Children content /\n children: React.ReactNode\n className?: string\n}\n\n// ── Context ──────────────────────────────────────────────────────────────────\n\ninterface AppShellContextValue {\n layout: AppShellLayout\n asideOpen: boolean\n setAsideOpen: (open: boolean) => void\n isMobile: boolean\n}\n\nconst AppShellContext = React.createContext<AppShellContextValue \| null>(null)\n\nfunction useAppShell(): AppShellContextValue {\n const ctx = React.useContext(AppShellContext)\n if (!ctx) throw new Error('AppShellAside must be used within <AppShell>')\n return ctx\n}\n\n// Mobile breakpoint:消費既有 `useIsNarrowViewport`(`hooks/use-is-narrow-viewport.ts` SSOT,\n// 768px,跟 Sidebar SSOT 同源)— 不發明 local hook,per codex Layer B D2/D4 verdict 避 drift。\n\n// xl breakpoint(對齊 Tailwind v4 xl = 1280px,DS-wide consensus)\nconst XL_BREAKPOINT_PX = 1280\n\nfunction useIsXl(): boolean {\n const [isXl, setIsXl] = React.useState<boolean>(() => {\n if (typeof window === 'undefined') return false\n return window.matchMedia(`(min-width: ${XL_BREAKPOINT_PX}px)`).matches\n })\n\n React.useEffect(() => {\n const mq = window.matchMedia(`(min-width: ${XL_BREAKPOINT_PX}px)`)\n const handler = (e: MediaQueryListEvent) => setIsXl(e.matches)\n mq.addEventListener('change', handler)\n return () => mq.removeEventListener('change', handler)\n }, [])\n\n return isXl\n}\n\n// ── Width resolve(consumer 自傳 + clamp 240-640)──────────────────────────────\n\nconst ASIDE_WIDTH_MIN = 240\nconst ASIDE_WIDTH_MAX = 640\nconst ASIDE_WIDTH_DEFAULT = 320\n\nfunction resolveAsideWidth(width: AppShellAsideProps['width'], isXl: boolean): number {\n if (typeof width === 'number') {\n return Math.max(ASIDE_WIDTH_MIN, Math.min(ASIDE_WIDTH_MAX, width))\n }\n if (width && typeof width === 'object') {\n // breakpoint-keyed:xl viewport(≥1280px)用 xl,否則 md\n const v = (isXl ? width.xl ?? width.md : width.md) ?? ASIDE_WIDTH_DEFAULT\n return Math.max(ASIDE_WIDTH_MIN, Math.min(ASIDE_WIDTH_MAX, v))\n }\n return ASIDE_WIDTH_DEFAULT\n}\n\n// ── Skip-to-main link(a11y WCAG 2.4.1)───────────────────────────────────────\n\nfunction SkipToMain() {\n return (\n <a\n href=\"#app-shell-main\"\n className={cn(\n 'sr-only focus:not-sr-only',\n 'focus:fixed focus:top-2 focus:left-2 focus:z-50',\n 'focus:px-3 focus:py-2 focus:rounded-md',\n 'focus:bg-surface focus:text-foreground focus:shadow-[var(--elevation-200)]',\n 'focus:outline-none focus:ring-2 focus:ring-primary'\n )}\n >\n Skip to main content\n </a>\n )\n}\n\n// ── AppShell root ────────────────────────────────────────────────────────────\n\nconst AppShell = React.forwardRef<HTMLDivElement, AppShellProps>(\n (\n {\n layout = 'primary-sidebar',\n sidebar,\n header,\n globalHeader,\n aside,\n asideOpen: asideOpenProp,\n onAsideOpenChange,\n children,\n className,\n ...props\n },\n ref\n ) => {\n const [asideOpenInternal, setAsideOpenInternal] = React.useState(false)\n const isControlled = asideOpenProp !== undefined\n const asideOpen = isControlled ? asideOpenProp : asideOpenInternal\n\n const setAsideOpen = React.useCallback(\n (open: boolean) => {\n if (!isControlled) setAsideOpenInternal(open)\n onAsideOpenChange?.(open)\n },\n [isControlled, onAsideOpenChange]\n )\n\n const isMobile = useIsNarrowViewport()\n\n // ── Keyboard: cmd+. toggle aside ──\n // ⌘B sidebar toggle by Sidebar SSOT(本 component 不重覆 register)\n React.useEffect(() => {\n const onKey = (e: KeyboardEvent) => {\n if (e.key === '.' && (e.metaKey \|\| e.ctrlKey)) {\n e.preventDefault()\n setAsideOpen(!asideOpen)\n }\n }\n window.addEventListener('keydown', onKey)\n return () => window.removeEventListener('keydown', onKey)\n }, [asideOpen, setAsideOpen])\n\n const ctxValue = React.useMemo<AppShellContextValue>(\n () => ({ layout, asideOpen, setAsideOpen, isMobile }),\n [layout, asideOpen, setAsideOpen, isMobile]\n )\n\n // ── Layout grid(2 mode)──\n // primary-sidebar:\n // row1: [sidebar (頂天)][main col (header + main)][aside (頂天)]\n // primary-header:\n // row1: [header (橫跨整 viewport, banner role)]\n // row2: [sidebar][main][aside]\n\n // AppShellAside 自決 inline vs modal mode(via AppShellContext.isMobile)。\n // AppShell 一律只 render `{aside}` 一次,AppShellAside 內部根據 isMobile 決定 render 形式。\n\n if (layout === 'primary-header') {\n // primary-header layout(2026-05-21 v2 — user clarification「primary-header = primary-sidebar + 一條 global header」):\n // 結構:row1 globalHeader(全寬 global bar)/ row2 [sidebar][main col: localHeader + main][aside]\n // - globalHeader = 跨頁 account / workspace switcher / notifications(對齊 GitHub top nav / Slack workspace bar)\n // - header = local page header,仍存在(per page actions / breadcrumb,對齊 GitHub repo header / Slack channel header / Gmail email-list toolbar 2-layer 慣例)\n // Consumer 必傳 `<Sidebar viewportInsetTop=\"var(--chrome-header-height)\">` 讓 sidebar 從 globalHeader 下方起算。\n return (\n <AppShellContext.Provider value={ctxValue}>\n <div\n ref={ref}\n className={cn('flex h-svh w-full flex-col overflow-hidden bg-canvas', className)}\n {...props}\n >\n <SkipToMain />\n {/ Row 1:Global header(account / workspace switcher / notifications,橫跨整 viewport)/}\n {globalHeader && <div className=\"flex-shrink-0\">{globalHeader}</div>}\n {/ Row 2:[sidebar][main col][aside]horizontal row /}\n <div className=\"flex flex-1 min-h-0 w-full\">\n {sidebar}\n {/ Main column:local header + main content(per user model「primary-header = primary-sidebar + global header」)/}\n <div className=\"flex flex-col flex-1 min-w-0 min-h-0 overflow-hidden\">\n {header && <div className=\"flex-shrink-0\">{header}</div>}\n <main\n id=\"app-shell-main\"\n tabIndex={-1}\n className=\"flex-1 min-w-0 min-h-0 overflow-y-auto focus:outline-none\"\n >\n {children}\n </main>\n </div>\n {aside}\n </div>\n </div>\n </AppShellContext.Provider>\n )\n }\n\n // primary-sidebar layout\n return (\n <AppShellContext.Provider value={ctxValue}>\n <div\n ref={ref}\n className={cn('flex h-svh w-full overflow-hidden bg-canvas', className)}\n {...props}\n >\n <SkipToMain />\n {/ Sidebar — 頂天 /}\n {sidebar}\n {/ Main column(header + main 垂直堆)/}\n <div className=\"flex flex-col flex-1 min-w-0 min-h-0 overflow-hidden\">\n {header && (\n // Header 在 main column 內(main col sibling,非 main descendant)。ChromeHeader 自\n // 2026-05-20 起 render `<header>`(chrome-header.tsx);依 W3C HTML-AAM,`<div>` wrapper\n // 不 scope out banner(只有 main/article/aside/nav/section 能)→ 仍得 implicit banner ✓\n // (對齊 app-shell.spec.md「W3C ARIA in HTML banner rule」段)。\n <div className=\"flex-shrink-0\">{header}</div>\n )}\n <main\n id=\"app-shell-main\"\n tabIndex={-1}\n className=\"flex-1 min-h-0 overflow-y-auto focus:outline-none\"\n >\n {children}\n </main>\n </div>\n {/ Aside slot — desktop inline OR mobile Sheet,內部自決 /}\n {aside}\n </div>\n </AppShellContext.Provider>\n )\n }\n)\nAppShell.displayName = 'AppShell'\n\n// ── AppShellAside sub-component ──────────────────────────────────────────────\n\n/\n AppShellAside — right panel:standard inline(desktop) vs modal overlay(mobile)。\n \n Desktop(viewport ≥ 768px):\n * - Render 直接放 layout grid 右側(AppShell 恆 render {aside};AppShellAside 於 !asideOpen 自行 return null — 內部自決,非 via parent)\n * - 不蓋 mask / background 可操作 / 佔 layout 寬\n * - Vertical extent:primary-sidebar → 頂天立地 / primary-header → header 下方\n \n Mobile(viewport < 768px):\n * - Render 走 Sheet primitive(side=\"right\",per sheet.spec.md)\n * - Mask 蓋 / background 不可操作 / 不佔 layout 寬\n * - title 強制(aria-labelledby per sheet.spec.md:98)\n */\nconst AppShellAside = React.forwardRef<HTMLElement, AppShellAsideProps>(\n ({ title, width, children, className }, ref) => {\n const { asideOpen, setAsideOpen, isMobile } = useAppShell()\n const isXl = useIsXl()\n const resolvedWidth = resolveAsideWidth(width, isXl)\n\n // Shared frame:always-on header(title + close X)+ body(ScrollArea + layoutSpace 規則 1B 父層 padding)\n // 對齊 codex Layer B 2026-05-20「container mode 可變,panel role/content 不該變」+ Notion/Figma right\n // panel 共識(modal vs inline 結構相同,host wrapper 不同)。\n // 2026-05-20 migrate 消費 ChromeHeader primitive(撤回自刻 + 撤回 bg-surface 疊加 — 對齊\n // `header-canonical.spec.md`「6. Background ownership」段「Nested chrome header 透明繼承\n // parent」:aside container 自身已 bg-surface,內 header 不該再畫 bg 避免疊加 drift)。\n // titleNode 依 mode 不同:modal(Sheet)用 SheetTitle 綁 Radix Dialog titleId — 否則\n // SheetContent 的 aria-labelledby 指向不存在的 id → SR 念「unnamed dialog」+ Radix\n // TitleWarning console.error(違 sheet.spec.md:98「Sheet content 必有可見 title」)。\n // inline(aside)用純 <h2>:aside 自身已 aria-label={title},且無 Dialog context 不可用 SheetTitle。\n const renderFrame = (titleNode: React.ReactNode) => (\n <>\n <ChromeHeader>\n {titleNode}\n <Button\n iconOnly\n dismiss\n size=\"sm\"\n startIcon={XIcon}\n aria-label=\"關閉\"\n onClick={() => setAsideOpen(false)}\n />\n </ChromeHeader>\n <ScrollArea className=\"flex-1 min-h-0\">\n {children}\n </ScrollArea>\n </>\n )\n\n // Modal mode(mobile)— Sheet from right\n if (isMobile) {\n return (\n <Sheet open={asideOpen} onOpenChange={setAsideOpen}>\n <SheetContent\n side=\"right\"\n className=\"w-[min(90vw,var(--app-shell-aside-modal-width))] flex flex-col p-0 [&>button]:hidden\"\n style={{ ['--app-shell-aside-modal-width' as string]: `${resolvedWidth}px` }}\n >\n {renderFrame(<SheetTitle className=\"flex-1\">{title}</SheetTitle>)}\n </SheetContent>\n </Sheet>\n )\n }\n\n // Standard inline mode(desktop)\n if (!asideOpen) return null\n\n return (\n <aside\n ref={ref}\n aria-label={title}\n className={cn(\n 'flex flex-col h-full min-h-0 overflow-hidden',\n 'bg-surface border-l border-divider',\n className\n )}\n style={{ width: resolvedWidth }}\n >\n {renderFrame(<h2 className=\"text-body-lg font-medium flex-1 truncate\">{title}</h2>)}\n </aside>\n )\n }\n)\nAppShellAside.displayName = 'AppShellAside'\n\n// ── Exports ──────────────────────────────────────────────────────────────────\n\n// code-quality-allow: dead-export useAppShell — public compound API hook(consumer 可自拼 custom aside layout,\n// 對齊 Radix `useDialogContext` / MUI `useFormControl` 慣例)。內部 AppShellAside 已消費(L294),\n// audit script 抓「無 cross-file import」是 false positive(2026-05-21 D2 codify)。\nexport { AppShell, AppShellAside, useAppShell }\n"],"names":["XIcon"],"mappings":";;;;;;;;;AA6EA,MAAM,kBAAkB,MAAM,cAA2C,IAAI;AAE7E,SAAS,cAAoC;AAC3C,QAAM,MAAM,MAAM,WAAW,eAAe;AAC5C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,8CAA8C;AACxE,SAAO;AACT;AAMA,MAAM,mBAAmB;AAEzB,SAAS,UAAmB;AAC1B,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAkB,MAAM;AACpD,QAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,WAAO,OAAO,WAAW,eAAe,gBAAgB,KAAK,EAAE;AAAA,EACjE,CAAC;AAED,QAAM,UAAU,MAAM;AACpB,UAAM,KAAK,OAAO,WAAW,eAAe,gBAAgB,KAAK;AACjE,UAAM,UAAU,CAAC,MAA2B,QAAQ,EAAE,OAAO;AAC7D,OAAG,iBAAiB,UAAU,OAAO;AACrC,WAAO,MAAM,GAAG,oBAAoB,UAAU,OAAO;AAAA,EACvD,GAAG,CAAA,CAAE;AAEL,SAAO;AACT;AAIA,MAAM,kBAAkB;AACxB,MAAM,kBAAkB;AACxB,MAAM,sBAAsB;AAE5B,SAAS,kBAAkB,OAAoC,MAAuB;AACpF,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO,KAAK,IAAI,iBAAiB,KAAK,IAAI,iBAAiB,KAAK,CAAC;AAAA,EACnE;AACA,MAAI,SAAS,OAAO,UAAU,UAAU;AAEtC,UAAM,KAAK,OAAO,MAAM,MAAM,MAAM,KAAK,MAAM,OAAO;AACtD,WAAO,KAAK,IAAI,iBAAiB,KAAK,IAAI,iBAAiB,CAAC,CAAC;AAAA,EAC/D;AACA,SAAO;AACT;AAIA,SAAS,aAAa;AACpB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAIL;AAIA,MAAM,WAAW,MAAM;AAAA,EACrB,CACE;AAAA,IACE,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,CAAC,mBAAmB,oBAAoB,IAAI,MAAM,SAAS,KAAK;AACtE,UAAM,eAAe,kBAAkB;AACvC,UAAM,YAAY,eAAe,gBAAgB;AAEjD,UAAM,eAAe,MAAM;AAAA,MACzB,CAAC,SAAkB;AACjB,YAAI,CAAC,aAAc,sBAAqB,IAAI;AAC5C,+DAAoB;AAAA,MACtB;AAAA,MACA,CAAC,cAAc,iBAAiB;AAAA,IAAA;AAGlC,UAAM,WAAW,oBAAA;AAIjB,UAAM,UAAU,MAAM;AACpB,YAAM,QAAQ,CAAC,MAAqB;AAClC,YAAI,EAAE,QAAQ,QAAQ,EAAE,WAAW,EAAE,UAAU;AAC7C,YAAE,eAAA;AACF,uBAAa,CAAC,SAAS;AAAA,QACzB;AAAA,MACF;AACA,aAAO,iBAAiB,WAAW,KAAK;AACxC,aAAO,MAAM,OAAO,oBAAoB,WAAW,KAAK;AAAA,IAC1D,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,UAAM,WAAW,MAAM;AAAA,MACrB,OAAO,EAAE,QAAQ,WAAW,cAAc,SAAA;AAAA,MAC1C,CAAC,QAAQ,WAAW,cAAc,QAAQ;AAAA,IAAA;AAa5C,QAAI,WAAW,kBAAkB;AAM/B,aACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,UAC/B,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAG,wDAAwD,SAAS;AAAA,UAC9E,GAAG;AAAA,UAEJ,UAAA;AAAA,YAAA,oBAAC,YAAA,EAAW;AAAA,YAEX,gBAAgB,oBAAC,OAAA,EAAI,WAAU,iBAAiB,UAAA,cAAa;AAAA,YAE9D,qBAAC,OAAA,EAAI,WAAU,8BACZ,UAAA;AAAA,cAAA;AAAA,cAED,qBAAC,OAAA,EAAI,WAAU,wDACZ,UAAA;AAAA,gBAAA,UAAU,oBAAC,OAAA,EAAI,WAAU,iBAAiB,UAAA,QAAO;AAAA,gBAClD;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAG;AAAA,oBACH,UAAU;AAAA,oBACV,WAAU;AAAA,oBAET;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACH,GACF;AAAA,cACC;AAAA,YAAA,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,IAEJ;AAGA,WACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,UAC/B,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,+CAA+C,SAAS;AAAA,QACrE,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,YAAA,EAAW;AAAA,UAEX;AAAA,UAED,qBAAC,OAAA,EAAI,WAAU,wDACZ,UAAA;AAAA,YAAA;AAAA;AAAA;AAAA;AAAA,YAKC,oBAAC,OAAA,EAAI,WAAU,iBAAiB,UAAA,QAAO;AAAA,YAEzC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAG;AAAA,gBACH,UAAU;AAAA,gBACV,WAAU;AAAA,gBAET;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,GACF;AAAA,UAEC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;AAiBvB,MAAM,gBAAgB,MAAM;AAAA,EAC1B,CAAC,EAAE,OAAO,OAAO,UAAU,UAAA,GAAa,QAAQ;AAC9C,UAAM,EAAE,WAAW,cAAc,SAAA,IAAa,YAAA;AAC9C,UAAM,OAAO,QAAA;AACb,UAAM,gBAAgB,kBAAkB,OAAO,IAAI;AAYnD,UAAM,cAAc,CAAC,cACnB,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA,qBAAC,cAAA,EACE,UAAA;AAAA,QAAA;AAAA,QACD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,UAAQ;AAAA,YACR,SAAO;AAAA,YACP,MAAK;AAAA,YACL,WAAWA;AAAAA,YACX,cAAW;AAAA,YACX,SAAS,MAAM,aAAa,KAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACnC,GACF;AAAA,MACA,oBAAC,YAAA,EAAW,WAAU,kBACnB,SAAA,CACH;AAAA,IAAA,GACF;AAIF,QAAI,UAAU;AACZ,aACE,oBAAC,OAAA,EAAM,MAAM,WAAW,cAAc,cACpC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,OAAO,EAAE,CAAC,+BAAyC,GAAG,GAAG,aAAa,KAAA;AAAA,UAErE,sBAAY,oBAAC,YAAA,EAAW,WAAU,UAAU,iBAAM,CAAa;AAAA,QAAA;AAAA,MAAA,GAEpE;AAAA,IAEJ;AAGA,QAAI,CAAC,UAAW,QAAO;AAEvB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,OAAO,cAAA;AAAA,QAEf,sBAAY,oBAAC,MAAA,EAAG,WAAU,4CAA4C,iBAAM,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGxF;AACF;AACA,cAAc,cAAc;"}

package/dist/components/AspectRatio/aspect-ratio.d.ts CHANGED Viewed

@@ -20,7 +20,8 @@ import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
  * Consumer 傳 `ratio={n/m}` 數字計算(如 16/9 = 1.7777)。
  *
  * ── 常見消費者 ──
- * Coachmark media / Carousel item image / Card thumbnail(未來)/ Chart preview
+ * Coachmark media(coachmark.tsx)/ FileViewer 圖片預覽(file-viewer.tsx)/ Carousel item image、Card thumbnail(未來)
+ *(Chart 現用 raw aspect-video 非消費者 — 2026-07-04 grep 驗證)
  */
 export type AspectRatioProps = React.ComponentPropsWithoutRef<typeof AspectRatioPrimitive.Root>;
 declare const AspectRatio: React.ForwardRefExoticComponent<Omit<AspectRatioPrimitive.AspectRatioProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/AspectRatio/aspect-ratio.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../../src/components/AspectRatio/aspect-ratio.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAEpE~~;;;;;;;;;;;;;;;;;;;;;GAqBG~~;AAEH,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,CAAA;AAK/F,QAAA,MAAM,WAAW,iKAGoD,CAAA;AAKrE,eAAO,MAAM,eAAe;;;;;;;;;;;CAiBlB,CAAA;AAEV,OAAO,EAAE,WAAW,EAAE,CAAA"}
1	+ {"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../../src/components/AspectRatio/aspect-ratio.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAEpE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,CAAA;AAK/F,QAAA,MAAM,WAAW,iKAGoD,CAAA;AAKrE,eAAO,MAAM,eAAe;;;;;;;;;;;CAiBlB,CAAA;AAEV,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/AspectRatio/aspect-ratio.js CHANGED Viewed

@@ -9,7 +9,7 @@ const aspectRatioMeta = {
   // self-contained primitive(對齊 spec frontmatter self-contained + L22;非 Family 1-4)
   variants: {},
   sizes: {},
-  // 2026-06-05 fix(deep-audit):純 structural container,無互動狀態(spec.md L101「無 hover/focus/active/disabled」)。
+  // 2026-06-05 fix(deep-audit):純 structural container,無互動狀態(spec「為何無 ColorMatrix / SizeMatrix / StateBehavior」段;段名指法免行號漂移)。
   // 原 ['default','hover','active','focus-visible','disabled'] 是 Phase 1 mechanical placeholder,與 spec 矛盾。
   states: ["default"],
   tokens: {

package/dist/components/AspectRatio/aspect-ratio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"aspect-ratio.js","sources":["../../../src/components/AspectRatio/aspect-ratio.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 * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'\n\n/*\n AspectRatio — 固定長寬比容器(Radix AspectRatio primitive 薄包裝)\n \n 世界級對照:shadcn `AspectRatio` / Ant 無獨立元件(CSS 方案)/ Material 無\n \n ── 為什麼需要 ──\n * CSS `aspect-ratio` 屬性雖然現代瀏覽器都支援,但 Radix primitive 提供 SSR-safe\n * padding-bottom 方案 + consistent API,避免邊緣 bug(image 未載入時容器坍塌 /\n * content-fit 差異)。保 safe + 一致視覺。\n \n ── 標準 ratio(DS 慣例) ──\n * 16/9 — 寬螢幕影片、onboarding feature tour 截圖(Coachmark media 預設)\n * 4/3 — 老電視 / 照片基本 ratio、產品 thumbnail\n * 1/1 — Avatar / 方形貼文預覽 / icon preview\n * 3/4 — 直式照片(人物 portrait)\n * 21/9 — Ultra-wide banner(hero section)\n \n Consumer 傳 `ratio={n/m}` 數字計算(如 16/9 = 1.7777)。\n \n ── 常見消費者 ──\n * Coachmark media / Carousel item image / Card thumbnail(未來)/ Chart ~~preview~~\n */\n\nexport type AspectRatioProps = React.ComponentPropsWithoutRef<typeof AspectRatioPrimitive.Root>\n\n// shadcn canonical:顯式 forwardRef + displayName(雖 Radix primitive 已 forwardRef,\n// 此 wrapper 確保本 DS 每個 named export 在 Inspector 顯示正確 displayName,\n// 且 props passthrough + ref 行為在 code 層面明確可見)\nconst AspectRatio = React.forwardRef<\n React.ElementRef<typeof AspectRatioPrimitive.Root>,\n AspectRatioProps\n>((props, ref) => <AspectRatioPrimitive.Root ref={ref} {...props} />)\nAspectRatio.displayName = 'AspectRatio'\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 aspectRatioMeta = {\n component: 'AspectRatio',\n family: null, // self-contained primitive(對齊 spec frontmatter self-contained + L22;非 Family 1-4)\n variants: {\n\n },\n sizes: {\n\n },\n // 2026-06-05 fix(deep-audit):純 structural container,無互動狀態(spec~~.md~~ ~~L101「無~~ ~~hover~~/~~focus~~/~~active/disabled」~~)。\n // 原 ['default','hover','active','focus-visible','disabled'] 是 Phase 1 mechanical placeholder,與 spec 矛盾。\n states: ['default'],\n tokens: {\n bg: [],\n fg: [],\n ring: [],\n },\n} as const\n\nexport { AspectRatio }\n"],"names":[],"mappings":";;;~~AAgCA~~,MAAM,cAAc,MAAM,WAGxB,CAAC,OAAO,QAAQ,oBAAC,qBAAqB,MAArB,EAA0B,KAAW,GAAG,OAAO,CAAE;AACpE,YAAY,cAAc;AAInB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA;AAAA;AAAA,EAKP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}
1	+ {"version":3,"file":"aspect-ratio.js","sources":["../../../src/components/AspectRatio/aspect-ratio.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 * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'\n\n/*\n AspectRatio — 固定長寬比容器(Radix AspectRatio primitive 薄包裝)\n \n 世界級對照:shadcn `AspectRatio` / Ant 無獨立元件(CSS 方案)/ Material 無\n \n ── 為什麼需要 ──\n * CSS `aspect-ratio` 屬性雖然現代瀏覽器都支援,但 Radix primitive 提供 SSR-safe\n * padding-bottom 方案 + consistent API,避免邊緣 bug(image 未載入時容器坍塌 /\n * content-fit 差異)。保 safe + 一致視覺。\n \n ── 標準 ratio(DS 慣例) ──\n * 16/9 — 寬螢幕影片、onboarding feature tour 截圖(Coachmark media 預設)\n * 4/3 — 老電視 / 照片基本 ratio、產品 thumbnail\n * 1/1 — Avatar / 方形貼文預覽 / icon preview\n * 3/4 — 直式照片(人物 portrait)\n * 21/9 — Ultra-wide banner(hero section)\n \n Consumer 傳 `ratio={n/m}` 數字計算(如 16/9 = 1.7777)。\n \n ── 常見消費者 ──\n * Coachmark media(coachmark.tsx)/ FileViewer 圖片預覽(file-viewer.tsx)/ Carousel item image、Card thumbnail(未來)\n (Chart 現用 raw aspect-video 非消費者 — 2026-07-04 grep 驗證)\n /\n\nexport type AspectRatioProps = React.ComponentPropsWithoutRef<typeof AspectRatioPrimitive.Root>\n\n// shadcn canonical:顯式 forwardRef + displayName(雖 Radix primitive 已 forwardRef,\n// 此 wrapper 確保本 DS 每個 named export 在 Inspector 顯示正確 displayName,\n// 且 props passthrough + ref 行為在 code 層面明確可見)\nconst AspectRatio = React.forwardRef<\n React.ElementRef<typeof AspectRatioPrimitive.Root>,\n AspectRatioProps\n>((props, ref) => <AspectRatioPrimitive.Root ref={ref} {...props} />)\nAspectRatio.displayName = 'AspectRatio'\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 aspectRatioMeta = {\n component: 'AspectRatio',\n family: null, // self-contained primitive(對齊 spec frontmatter self-contained + L22;非 Family 1-4)\n variants: {\n\n },\n sizes: {\n\n },\n // 2026-06-05 fix(deep-audit):純 structural container,無互動狀態(spec「為何無 ColorMatrix / SizeMatrix / StateBehavior」段;段名指法免行號漂移)。\n // 原 ['default','hover','active','focus-visible','disabled'] 是 Phase 1 mechanical placeholder,與 spec 矛盾。\n states: ['default'],\n tokens: {\n bg: [],\n fg: [],\n ring: [],\n },\n} as const\n\nexport { AspectRatio }\n"],"names":[],"mappings":";;;AAiCA,MAAM,cAAc,MAAM,WAGxB,CAAC,OAAO,QAAQ,oBAAC,qBAAqB,MAArB,EAA0B,KAAW,GAAG,OAAO,CAAE;AACpE,YAAY,cAAc;AAInB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA;AAAA;AAAA,EAKP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}

package/dist/components/Avatar/avatar.d.ts CHANGED Viewed

@@ -69,8 +69,9 @@ export interface AvatarData {
     /**
      * Person avatar hover ProfileCard(DS-wide canonical,person avatar 預設必有,見 avatar.spec.md)。
      * Entity avatar(專案 / 組織 logo)不帶 → consumer 不傳 hoverCard 即豁免。
-     * 所有消費 AvatarData 的 primitive(MenuItem / DropdownMenu / SelectMenu / SelectionItem / ProfileCard)
-     * 需 forward 此 prop 到內部 <Avatar hoverCard={avatar.hoverCard} />。
+     * 消費 AvatarData 的 row primitive(MenuItem menu-item.tsx / SelectionItem selection-item.tsx,
+     * DropdownMenu / SelectMenu 經 MenuItem)需 forward 此 prop 到內部 <Avatar hoverCard={...} />。
+     * 例外:ProfileCard 內部 Avatar 不 forward(卡片本身就是 hover 目的地,nested hover-in-hover 不合理)。
      */
     hoverCard?: React.ReactNode;
 }

package/dist/components/Avatar/avatar.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAuC,KAAK,gBAAgB,EAAE,MAAM,0CAA0C,CAAA;AAMrH;;;;;;;;;;;;;;;;GAgBG;AAQH,KAAK,QAAQ,GAAG,gBAAgB,CAAA;AA6DhC,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC3B,aAAa;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0BAA0B;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,yGAAyG;IACzG,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC/C;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;~~AAiMD~~,MAAM,WAAW,UAAU;IACzB,aAAa;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAA;IACX,2CAA2C;IAC3C,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB~~;;;;;OAKG~~;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAID,eAAO,MAAM,UAAU;;;;;;;;;;;~~CAeb~~,CAAA;AAGV,QAAA,MAAM,MAAM,+GAA0B,CAAA;AAEtC,OAAO,EAAE,MAAM,EAAE,CAAA"}
1	+ {"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAuC,KAAK,gBAAgB,EAAE,MAAM,0CAA0C,CAAA;AAMrH;;;;;;;;;;;;;;;;GAgBG;AAQH,KAAK,QAAQ,GAAG,gBAAgB,CAAA;AA6DhC,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC3B,aAAa;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0BAA0B;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,yGAAyG;IACzG,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC/C;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AA0MD,MAAM,WAAW,UAAU;IACzB,aAAa;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAA;IACX,2CAA2C;IAC3C,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAID,eAAO,MAAM,UAAU;;;;;;;;;;;CAab,CAAA;AAGV,QAAA,MAAM,MAAM,+GAA0B,CAAA;AAEtC,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/Avatar/avatar.js CHANGED Viewed

@@ -48,6 +48,11 @@ const AvatarInner = React.forwardRef(
   ({ size = 32, shape = "circle", src, alt, icon: Icon, color = "neutral", solid = false, status, badgeCount, badgeAriaLabel, hoverCard, className, style, ...props }, ref) => {
     var _a;
     const [imgError, setImgError] = React.useState(false);
+    const [prevSrc, setPrevSrc] = React.useState(src);
+    if (prevSrc !== src) {
+      setPrevSrc(src);
+      setImgError(false);
+    }
     const documentTheme = useDocumentTheme();
     const isTableScrolling = useTableIsScrolling();
     const isDisabledInField = useResolvedFieldDisabled();
@@ -160,11 +165,12 @@ const AvatarInner = React.forwardRef(
     ] });
   }
 );
-AvatarInner.displayName = "AvatarInner";
 const avatarMeta = {
   component: "Avatar",
   family: null,
   // non-family composite / overlay / layout
+  // 2026-07-04 audit 標記:Avatar 無 variant 軸、size 為任意 number(px,由 consumer context 決定
+  // — item-anatomy AVATAR_SIZE 查表 / ProfileCard 40 等),無 discrete tier → 兩欄留空為 intentional 非漏填
   variants: {},
   sizes: {},
   states: ["default", "focus-visible", "disabled"],

package/dist/components/Avatar/avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar.js","sources":["../../../src/components/Avatar/avatar.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 { User } from 'lucide-react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { CAT_SUBTLE_TOKENS, CAT_SOLID_TOKENS, type CategoricalColor } from '@/design-system/tokens/categorical-color'\nimport { HoverCard, HoverCardTrigger, HoverCardContent } from '@/design-system/components/HoverCard/hover-card'\nimport { HOVER_DELAY_RICH_MS, HOVER_DELAY_CLOSE_MS } from '@/design-system/tokens/motion/motion'\nimport { Badge } from '@/design-system/components/Badge/badge'\nimport { useResolvedFieldDisabled, useTableIsScrolling } from '@/design-system/components/Field/field-context'\n\n/*\n Avatar — 頭像元件\n \n 三種內容模式（按優先順序）：\n * 1. src → 圖片\n * 2. icon → icon 在底色圓/方形內\n * 3. alt → 取首字作文字 fallback\n * 4. 都沒有 → 預設 User icon\n \n ── 尺寸 ──\n * size 接受任意 px 值，icon 自動 = round_even(size × 0.6)\n * 文字 fallback 字體 = size × 0.5\n \n ── 形狀 ──\n * circle（預設）→ rounded-full，用於人物\n * square → rounded-md (4px)，用於實體（專案、組織、App）\n /\n\n// ── 色彩 ──\n// 消費 categorical-color SSOT(CAT_SUBTLE_TOKENS / CAT_SOLID_TOKENS,key X 一律對 `--color-X-`,\n// 1:1 零 offset)。subtle=step-1 底 + step-7 字;solid=step-6 全色底 + on-emphasis 字\n//(亮 hue yellow/amber/orange/lime 用 --on-emphasis-dark 深字;green 白字例外)。neutral 非色相,自處理(subtle=muted、solid=neutral-9)。\n// 2026-06-04 修:原 `red` 誤接 `--color-deep-orange-`(red=品牌紅 hue-25 ≠ deep-orange);\n// 改消費 SSOT 後 red→`--color-red-`,並補齊全 12 色相。\ntype ColorKey = CategoricalColor\ntype VariantKey = 'subtle' \| 'solid'\n\nconst COLOR_MAP: Record<VariantKey, Record<ColorKey, { bg: string; text: string }>> = {\n subtle: {\n neutral: { bg: 'var(--muted)', text: 'var(--foreground)' },\n ...CAT_SUBTLE_TOKENS,\n },\n solid: {\n neutral: { bg: 'var(--color-neutral-9)', text: 'var(--inverse-fg)' },\n ...CAT_SOLID_TOKENS,\n },\n}\n\n// ── Icon size: round to nearest even, ≈ 60% ──\nfunction getIconSize(avatarSize: number): number {\n return Math.round((avatarSize * 0.6) / 2) * 2\n}\n\n// ── Text fallback: first character ──\nfunction getInitial(text: string): string {\n return text.trim().charAt(0).toUpperCase()\n}\n\n// Semantic presence tokens — 見 color/semantic.css\n// Module-level constant(2026-04-22 D3 perf audit):從 render body 移到 module scope,\n// 避免每次 Avatar render 都 re-declare 此 4-entry object(Low impact 但渲染大量 avatars 時累積可觀)\nconst STATUS_DOT_COLOR: Record<string, string> = {\n online: 'var(--status-online)',\n away: 'var(--status-away)',\n busy: 'var(--status-busy)',\n offline: 'var(--status-offline)',\n}\n\n// ── useDocumentTheme(2026-04-23;M3 Portal 逃脫防線,scope verified 2026-04-25)──\n// 讀 `<html data-theme>` 並 observe mutation。用於 Avatar hoverCard ProfileCard:\n// Portal 後的 HoverCardContent 會繼承 trigger subtree theme(如 OverflowIndicator\n// dark tooltip 內部),造成 ProfileCard 被污染成 dark。顯式 bind app-level theme\n// 確保 ProfileCard 永遠跟 app 本身 theme 一致(light-in-light-app / dark-in-dark-app)。\n//\n// 範圍 audit 2026-04-25:觀察對象是 `document.documentElement` 自有 DOM,非 3rd-party\n// lib 內部(不屬 M2 scope);attributeFilter 限定 `data-theme` 單一 attr,re-render 成本\n// 為每次全站 theme 切換 × Avatar 數量,可接受。\nfunction useDocumentTheme(): string \| null {\n const [theme, setTheme] = React.useState<string \| null>(() =>\n typeof document !== 'undefined' ? document.documentElement.getAttribute('data-theme') : null,\n )\n React.useEffect(() => {\n if (typeof document === 'undefined') return\n const root = document.documentElement\n const update = () => setTheme(root.getAttribute('data-theme'))\n update()\n const obs = new MutationObserver(update)\n obs.observe(root, { attributes: true, attributeFilter: ['data-theme'] })\n return () => obs.disconnect()\n }, [])\n return theme\n}\n\n// ── Component ──\n\nexport interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {\n /** 尺寸：number (px) 或 'fill'（填滿父容器，由父層決定大小）。預設 32 /\n size?: number \| 'fill'\n /* 形狀：circle（人物）或 square（實體），預設 circle /\n shape?: 'circle' \| 'square'\n /* 圖片 URL /\n src?: string\n /* 替代文字（圖片失敗時取首字作 fallback） /\n alt?: string\n /* Icon 模式（LucideIcon） /\n icon?: LucideIcon\n /* Icon / text fallback 的背景色，預設 neutral /\n color?: ColorKey\n /* 深底模式（step-6 背景 + on-emphasis 配對前景；亮色 hue yellow/amber/orange/lime 用深字 --on-emphasis-dark），預設 false /\n solid?: boolean\n /\n 在線狀態指示器(presence),顯示在 avatar 右下角。\n * 世界級對照:Slack / Teams / Discord — `online` 是最廣泛被理解的術語。\n * 位置語義:右下 = \"此人的 presence\"(使用者聚焦於「這個人是誰 + 現在在不在」)。\n /\n status?: 'online' \| 'away' \| 'busy' \| 'offline'\n /\n 未讀 / 通知計數 badge,顯示在 avatar 右上角。\n * 世界級對照:chat app(iMessage / Slack thread / LINE / WhatsApp)一律右上角。\n * 位置語義:右上 = \"關於此對話的新事件數量\"(使用者聚焦於「有多少未處理」);\n * 與右下的 presence 共存不衝突(不同角、不同語義)。\n * `> 99` 自動顯示 \"99+\"(交給內部 Badge 的 `max` 行為)。\n /\n badgeCount?: number\n /\n badgeCount overlay 的 aria-label override(i18n)。預設英文 `${badgeCount} unread`;\n * consumer 傳此 prop 本地化(對齊 `Notice` dismissAriaLabel pattern,a11y/i18n)。\n /\n badgeAriaLabel?: string\n /\n 傳入 HoverCard 內容（如 ProfileCard），hover avatar 時自動顯示。\n * 只有人員 avatar 需要傳；實體 avatar（專案、組織）不傳。\n /\n hoverCard?: React.ReactNode\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\n// 2026-05-13 (a) perf fix part-2(per codex Layer C Roadmap rich-cell dominant + user 拍 Path (a)):\n// `React.memo` wrap forwardRef Avatar — Roadmap 13 columns 含 person/multiPerson,每 row 多 avatar\n// × HoverCard subtree + useDocumentTheme observer = 重渲染 hotspot。memo shallow-equal props,\n// HoverCard / themeRef stable across scroll 時 skip re-render。對齊 codex Profile Plan step 5\n// (filter Avatar/PeoplePicker/FieldSurfaceProvider remounts)。\n// code-quality-allow: long-function — size × shape × color × solid × status × badgeCount × hoverCard × img-fallback 多軸 prop 組合,拆 sub-fn 會跨 fn 傳 imgError state + isTableScrolling observer 結果\nconst AvatarInner = React.forwardRef<HTMLDivElement, AvatarProps>(\n ({ size = 32, shape = 'circle', src, alt, icon: Icon, color = 'neutral', solid = false, status, badgeCount, badgeAriaLabel, hoverCard, className, style, ...props }, ref) => {\n const [imgError, setImgError] = React.useState(false)\n const documentTheme = useDocumentTheme()\n const isTableScrolling = useTableIsScrolling()\n // 2026-05-13 R3.5(per codex Q3 verdict + user 拍「想盡辦法 auto-handle prereq」):\n // Avatar self-dim when in disabled Field wrapper context(取代既有 wrapper opacity-disabled blanket\n // 逃生艙 — color.spec.md:729 specific-disabled-color canonical)。\n // Scope:`useResolvedFieldDisabled()`(= fieldCtx.disabled,涵蓋 <Field disabled> 與 <Field mode=\"disabled\">),標準 Field\n // 家族 wrapper disabled 時才 dim;沒包在 Field wrapper 內的 standalone Avatar(ProfileCard / FileItem /\n // HoverCard / Dialog 等 display 場景)backward compat 不變。對齊 avatar.spec.md「Avatar 在 disabled\n // 元件內 host-controlled opacity」canonical — 升級成「Avatar self-managed via fieldCtx」。\n // 2026-06-08 SSOT:欄位內 Avatar 跟隨 <Field disabled>/<Field mode=\"disabled\"> 變淡(fieldCtx-scoped,cell 無 fieldCtx → 不影響)\n const isDisabledInField = useResolvedFieldDisabled()\n const isFill = size === 'fill'\n // Fill 模式下 icon 用 60% 寬高、text 用 50cqi（container query inline-size）；\n // 數字模式下用既有 px 計算\n const numSize = isFill ? 32 : (size as number)\n const iconPx = getIconSize(numSize)\n const fontSizePx = Math.round(numSize 0.5)\n const variantKey: VariantKey = solid ? 'solid' : 'subtle'\n const colors = COLOR_MAP[variantKey]?.[color] ?? COLOR_MAP.subtle.neutral\n const radius = shape === 'circle' ? '9999px' : '4px'\n\n // 決定內容\n const showImage = src && !imgError\n const showIcon = !showImage && (Icon \|\| (!alt))\n const showText = !showImage && !showIcon && alt\n\n const FallbackIcon = Icon ?? User\n\n // Status dot 尺寸:avatar 的 28%(Slack / Teams / Discord 世界級平均),\n // clamp [8, 16] — floor 8 保小 avatar 仍可辨識但不喧賓奪主(10 floor 會讓 24px\n // avatar 的 dot 占 42% 太大);ceiling 16 防大 avatar dot 過度放大\n const dotSize = isFill ? 10 : Math.max(8, Math.min(16, Math.round(numSize * 0.28)))\n // Border ring 在 surface 上分離 dot 與 avatar,dotSize ≥ 12 時升階到 3px 保持視覺比例\n const dotBorder = dotSize >= 12 ? 3 : 2\n\n const avatarEl = (\n <div\n className={cn(\n 'inline-flex items-center justify-center shrink-0 overflow-hidden select-none',\n isFill && 'w-full h-full',\n // 2026-05-13 R3.5 self-dim:Avatar 在 disabled Field wrapper context 內自 dim\n // (取代 field-wrapper.tsx default/bare/naked disabled blanket opacity-disabled 逃生艙)\n isDisabledInField && 'opacity-disabled',\n )}\n style={{\n ...(isFill\n ? { containerType: 'inline-size' as React.CSSProperties['containerType'] }\n : { width: numSize, height: numSize }),\n borderRadius: radius,\n backgroundColor: showImage ? undefined : colors.bg,\n color: showImage ? undefined : colors.text,\n }}\n data-avatar-size={isFill ? 'fill' : numSize}\n role={!showImage && alt && !hoverCard ? 'img' : undefined}\n aria-label={!showImage && alt && !hoverCard ? alt : undefined}\n >\n {showImage && (\n <img\n src={src}\n alt={alt ?? ''}\n className=\"w-full h-full object-cover\"\n onError={() => setImgError(true)}\n />\n )}\n {showIcon && (\n isFill\n ? <FallbackIcon className=\"w-[60%] h-[60%]\" aria-hidden />\n : <FallbackIcon size={iconPx} aria-hidden />\n )}\n {showText && (\n <span\n className=\"font-medium leading-none\"\n style={{ fontSize: isFill ? '50cqi' : fontSizePx }}\n aria-hidden\n >\n {getInitial(alt!)}\n </span>\n )}\n </div>\n )\n\n const hasOverlay = status \|\| typeof badgeCount === 'number'\n // Keyboard access canonical(D4 UX audit 2026-04-22 finding):Avatar with `hoverCard`\n // 需 keyboard 可達 — Radix `HoverCardTrigger asChild` 不自動加 tabIndex,non-focusable\n // `<div>` 會讓 keyboard-only user 無法 reach ProfileCard popover(WCAG 2.1.1 / 4.1.2 違反)。\n // 解:當 `hoverCard` 存在時,wrapper `<div>` 變 focusable(`tabIndex=0` + `role=\"button\"` +\n // `aria-haspopup=\"dialog\"` + focus-visible ring)。若無 hoverCard 則維持純展示 `<div>`。\n const focusableProps = hoverCard\n ? {\n tabIndex: 0,\n role: 'button' as const,\n 'aria-haspopup': 'dialog' as const,\n 'aria-label': alt ?? 'View profile',\n }\n : {}\n // 2026-05-31:focus ring 圓角跟隨 shape(circle→rounded-full / square→rounded-md,對齊 body 的 `radius` 變數 '9999px'/'4px'),\n // 原寫死 rounded-full 會讓方形 avatar(實體)配 hoverCard 時出現圓形 ring。hoverCard 為通用行為(任意內容),\n // 方形 avatar 合法可配(內容非 ProfileCard 而已),故 ring 必跟形狀。\n const focusableClass = hoverCard\n ? cn('focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1', shape === 'circle' ? 'rounded-full' : 'rounded-md')\n : ''\n const baseEl = !hasOverlay\n ? <div ref={ref} className={cn('inline-flex shrink-0', focusableClass, className)} style={style} {...focusableProps} {...props}>{avatarEl}</div>\n : (\n <div ref={ref} className={cn('relative inline-flex shrink-0', focusableClass, className)} style={style} {...focusableProps} {...props}>\n {avatarEl}\n {/* Status dot:bottom-right(presence — 世界級對照 Slack / Teams / Discord),\n 落在 circle avatar 圓周 45° 位置 / square avatar 右下直角;\n border ring 用 surface 色讓 dot 從 avatar 邊界視覺分離。\n a11y:`aria-hidden` — presence 資訊整合到 parent avatar 的 aria-label\n (world-class Slack 做法),避免多 `role=\"status\"` 造成 screen reader 洪水 /}\n {status && (\n <span\n className=\"absolute block rounded-full\"\n style={{\n width: dotSize,\n height: dotSize,\n bottom: 0,\n right: 0,\n backgroundColor: STATUS_DOT_COLOR[status],\n boxShadow: `0 0 0 ${dotBorder}px var(--surface-raised, var(--canvas))`,\n }}\n aria-hidden\n />\n )}\n {/ Count badge:top-right(chat 未讀 / 通知計數 — 世界級對照 iMessage /\n Slack thread / LINE / WhatsApp)。消費 DS Badge(critical variant),\n 再加 ring 與 avatar 分離 /}\n {typeof badgeCount === 'number' && badgeCount > 0 && (\n <Badge\n variant=\"critical\"\n count={badgeCount}\n max={99}\n className=\"absolute -top-1 -right-1\"\n style={{\n boxShadow: `0 0 0 2px var(--surface-raised, var(--canvas))`,\n }}\n aria-label={badgeAriaLabel ?? `${badgeCount} unread`} // i18n-allow: DS default 英文(consumer 可傳 badgeAriaLabel i18n)\n />\n )}\n </div>\n )\n\n // 2026-05-13 (c) scroll-defer perf(per user 拍 Path (c) + codex Q3 verdict):\n // DataTable scrolling 期間跳 HoverCard wrapper(Portal + useDocumentTheme observer 是\n // Roadmap 重渲 hotspot,per codex Layer C 分析)。scroll 結束 → context flips false →\n // re-render 接回完整 HoverCard tree(ProfileCard 仍可 hover 顯示)。\n // 對齊 AG Grid `deferRender` for slow React cell components / MUI X DataGrid scroll-defer。\n if (!hoverCard \|\| isTableScrolling) return baseEl\n\n return (\n <HoverCard openDelay={HOVER_DELAY_RICH_MS} closeDelay={HOVER_DELAY_CLOSE_MS}>\n <HoverCardTrigger asChild>\n {baseEl}\n </HoverCardTrigger>\n {/ HoverCardContent canonical(2026-04-23):\n - 無 inner padding(consumer ProfileCard 自帶 `px-4 py-3` chrome)\n - `overflow-hidden` + `rounded-lg` → child(ProfileCard)圓角裁切\n - 不設 max-height:ProfileCard 自己消費 `--radix-hover-card-content-available-height`\n 自約束高度 + 內部 ScrollArea 處理捲動\n - `data-theme={documentTheme}`:ProfileCard 永遠跟隨 app-level theme(從 `<html data-theme>`\n 動態讀),不受 trigger subtree theme 污染。範例:Avatar 位於 OverflowIndicator 的 dark\n tooltip 內,其 Portal 會繼承該 subtree dark theme → ProfileCard 變全黑。顯式設回 app theme\n 確保 ProfileCard 永遠 light-in-light-app / dark-in-dark-app。 /}\n <HoverCardContent\n data-theme={documentTheme ?? undefined}\n className=\"bg-surface-raised rounded-lg border border-border overflow-hidden\"\n style={{ boxShadow: 'var(--elevation-200)' }}\n >\n {hoverCard}\n </HoverCardContent>\n </HoverCard>\n )\n }\n)\nAvatarInner.displayName = 'AvatarInner'\n\n// ── AvatarData ─────────────────────────────────────────────────────────────\n// 資料型別，讓 consumer 傳資料而非 ReactNode。\n// 接收端內部用 Avatar 元件渲染，統一控制尺寸與 fallback。\n\nexport interface AvatarData {\n /* 圖片 URL /\n src?: string\n /* 替代文字（圖片失敗時取首字作 fallback） /\n alt: string\n /* Icon / text fallback 的背景色，預設 neutral /\n color?: ColorKey\n /\n Person avatar hover ProfileCard(DS-wide canonical,person avatar 預設必有,見 avatar.spec.md)。\n * Entity avatar(專案 / 組織 logo)不帶 → consumer 不傳 hoverCard 即豁免。\n * 所有消費 AvatarData 的 primitive(MenuItem / DropdownMenu / SelectMenu / SelectionItem / ProfileCard)\n * 需 forward 此 prop 到內部 <Avatar hoverCard={avatar.hoverCard} />。\n */\n hoverCard?: React.ReactNode\n}\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 avatarMeta = {\n component: 'Avatar',\n family: null, // non-family composite / overlay / layout\n variants: {\n\n },\n sizes: {\n\n },\n states: ['default', 'focus-visible', 'disabled'], // 2026-06-11 R2:本身無自有 hover/active(spec L279;hoverCard 互動屬 HoverCard),\n tokens: {\n bg: ['bg-surface-raised'],\n fg: ['--foreground', '--on-emphasis'],\n ring: ['ring-ring'],\n },\n} as const\n\nAvatarInner.displayName = 'Avatar'\nconst Avatar = React.memo(AvatarInner)\n\nexport { Avatar }\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"avatar.js","sources":["../../../src/components/Avatar/avatar.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 { User } from 'lucide-react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { CAT_SUBTLE_TOKENS, CAT_SOLID_TOKENS, type CategoricalColor } from '@/design-system/tokens/categorical-color'\nimport { HoverCard, HoverCardTrigger, HoverCardContent } from '@/design-system/components/HoverCard/hover-card'\nimport { HOVER_DELAY_RICH_MS, HOVER_DELAY_CLOSE_MS } from '@/design-system/tokens/motion/motion'\nimport { Badge } from '@/design-system/components/Badge/badge'\nimport { useResolvedFieldDisabled, useTableIsScrolling } from '@/design-system/components/Field/field-context'\n\n/*\n Avatar — 頭像元件\n \n 三種內容模式（按優先順序）：\n * 1. src → 圖片\n * 2. icon → icon 在底色圓/方形內\n * 3. alt → 取首字作文字 fallback\n * 4. 都沒有 → 預設 User icon\n \n ── 尺寸 ──\n * size 接受任意 px 值，icon 自動 = round_even(size × 0.6)\n * 文字 fallback 字體 = size × 0.5\n \n ── 形狀 ──\n * circle（預設）→ rounded-full，用於人物\n * square → rounded-md (4px)，用於實體（專案、組織、App）\n /\n\n// ── 色彩 ──\n// 消費 categorical-color SSOT(CAT_SUBTLE_TOKENS / CAT_SOLID_TOKENS,key X 一律對 `--color-X-`,\n// 1:1 零 offset)。subtle=step-1 底 + step-7 字;solid=step-6 全色底 + on-emphasis 字\n//(亮 hue yellow/amber/orange/lime 用 --on-emphasis-dark 深字;green 白字例外)。neutral 非色相,自處理(subtle=muted、solid=neutral-9)。\n// 2026-06-04 修:原 `red` 誤接 `--color-deep-orange-`(red=品牌紅 hue-25 ≠ deep-orange);\n// 改消費 SSOT 後 red→`--color-red-`,並補齊全 12 色相。\ntype ColorKey = CategoricalColor\ntype VariantKey = 'subtle' \| 'solid'\n\nconst COLOR_MAP: Record<VariantKey, Record<ColorKey, { bg: string; text: string }>> = {\n subtle: {\n neutral: { bg: 'var(--muted)', text: 'var(--foreground)' },\n ...CAT_SUBTLE_TOKENS,\n },\n solid: {\n neutral: { bg: 'var(--color-neutral-9)', text: 'var(--inverse-fg)' },\n ...CAT_SOLID_TOKENS,\n },\n}\n\n// ── Icon size: round to nearest even, ≈ 60% ──\nfunction getIconSize(avatarSize: number): number {\n return Math.round((avatarSize * 0.6) / 2) * 2\n}\n\n// ── Text fallback: first character ──\nfunction getInitial(text: string): string {\n return text.trim().charAt(0).toUpperCase()\n}\n\n// Semantic presence tokens — 見 color/semantic.css\n// Module-level constant(2026-04-22 D3 perf audit):從 render body 移到 module scope,\n// 避免每次 Avatar render 都 re-declare 此 4-entry object(Low impact 但渲染大量 avatars 時累積可觀)\nconst STATUS_DOT_COLOR: Record<string, string> = {\n online: 'var(--status-online)',\n away: 'var(--status-away)',\n busy: 'var(--status-busy)',\n offline: 'var(--status-offline)',\n}\n\n// ── useDocumentTheme(2026-04-23;M3 Portal 逃脫防線,scope verified 2026-04-25)──\n// 讀 `<html data-theme>` 並 observe mutation。用於 Avatar hoverCard ProfileCard:\n// Portal 後的 HoverCardContent 會繼承 trigger subtree theme(如 OverflowIndicator\n// dark tooltip 內部),造成 ProfileCard 被污染成 dark。顯式 bind app-level theme\n// 確保 ProfileCard 永遠跟 app 本身 theme 一致(light-in-light-app / dark-in-dark-app)。\n//\n// 範圍 audit 2026-04-25:觀察對象是 `document.documentElement` 自有 DOM,非 3rd-party\n// lib 內部(不屬 M2 scope);attributeFilter 限定 `data-theme` 單一 attr,re-render 成本\n// 為每次全站 theme 切換 × Avatar 數量,可接受。\nfunction useDocumentTheme(): string \| null {\n const [theme, setTheme] = React.useState<string \| null>(() =>\n typeof document !== 'undefined' ? document.documentElement.getAttribute('data-theme') : null,\n )\n React.useEffect(() => {\n if (typeof document === 'undefined') return\n const root = document.documentElement\n const update = () => setTheme(root.getAttribute('data-theme'))\n update()\n const obs = new MutationObserver(update)\n obs.observe(root, { attributes: true, attributeFilter: ['data-theme'] })\n return () => obs.disconnect()\n }, [])\n return theme\n}\n\n// ── Component ──\n\nexport interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {\n /** 尺寸：number (px) 或 'fill'（填滿父容器，由父層決定大小）。預設 32 /\n size?: number \| 'fill'\n /* 形狀：circle（人物）或 square（實體），預設 circle /\n shape?: 'circle' \| 'square'\n /* 圖片 URL /\n src?: string\n /* 替代文字（圖片失敗時取首字作 fallback） /\n alt?: string\n /* Icon 模式（LucideIcon） /\n icon?: LucideIcon\n /* Icon / text fallback 的背景色，預設 neutral /\n color?: ColorKey\n /* 深底模式（step-6 背景 + on-emphasis 配對前景；亮色 hue yellow/amber/orange/lime 用深字 --on-emphasis-dark），預設 false /\n solid?: boolean\n /\n 在線狀態指示器(presence),顯示在 avatar 右下角。\n * 世界級對照:Slack / Teams / Discord — `online` 是最廣泛被理解的術語。\n * 位置語義:右下 = \"此人的 presence\"(使用者聚焦於「這個人是誰 + 現在在不在」)。\n /\n status?: 'online' \| 'away' \| 'busy' \| 'offline'\n /\n 未讀 / 通知計數 badge,顯示在 avatar 右上角。\n * 世界級對照:chat app(iMessage / Slack thread / LINE / WhatsApp)一律右上角。\n * 位置語義:右上 = \"關於此對話的新事件數量\"(使用者聚焦於「有多少未處理」);\n * 與右下的 presence 共存不衝突(不同角、不同語義)。\n * `> 99` 自動顯示 \"99+\"(交給內部 Badge 的 `max` 行為)。\n /\n badgeCount?: number\n /\n badgeCount overlay 的 aria-label override(i18n)。預設英文 `${badgeCount} unread`;\n * consumer 傳此 prop 本地化(對齊 `Notice` dismissAriaLabel pattern,a11y/i18n)。\n /\n badgeAriaLabel?: string\n /\n 傳入 HoverCard 內容（如 ProfileCard），hover avatar 時自動顯示。\n * 只有人員 avatar 需要傳；實體 avatar（專案、組織）不傳。\n /\n hoverCard?: React.ReactNode\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\n// 2026-05-13 (a) perf fix part-2(per codex Layer C Roadmap rich-cell dominant + user 拍 Path (a)):\n// `React.memo` wrap forwardRef Avatar — Roadmap 13 columns 含 person/multiPerson,每 row 多 avatar\n// × HoverCard subtree + useDocumentTheme observer = 重渲染 hotspot。memo shallow-equal props,\n// HoverCard / themeRef stable across scroll 時 skip re-render。對齊 codex Profile Plan step 5\n// (filter Avatar/PeoplePicker/FieldSurfaceProvider remounts)。\n// code-quality-allow: long-function — size × shape × color × solid × status × badgeCount × hoverCard × img-fallback 多軸 prop 組合,拆 sub-fn 會跨 fn 傳 imgError state + isTableScrolling observer 結果\nconst AvatarInner = React.forwardRef<HTMLDivElement, AvatarProps>(\n ({ size = 32, shape = 'circle', src, alt, icon: Icon, color = 'neutral', solid = false, status, badgeCount, badgeAriaLabel, hoverCard, className, style, ...props }, ref) => {\n const [imgError, setImgError] = React.useState(false)\n // 2026-07-05 D4:imgError 隨 src 變更 reset — 原 state 首次 onError 後永久 true,consumer 之後\n // 換有效新 src(重傳頭像 / signed URL 刷新)時 showImage 永遠 false,<img> 不再掛載 → 新圖\n // 永不嘗試載入、終身卡 initials fallback。React 官方 adjust-state-on-prop-change 寫法\n //(render-time derived reset,較 useEffect 少一輪 render);對齊 Radix useImageLoadingStatus /\n // MUI useLoaded 皆隨 src reset 的 canonical。\n const [prevSrc, setPrevSrc] = React.useState(src)\n if (prevSrc !== src) {\n setPrevSrc(src)\n setImgError(false)\n }\n const documentTheme = useDocumentTheme()\n const isTableScrolling = useTableIsScrolling()\n // 2026-05-13 R3.5(per codex Q3 verdict + user 拍「想盡辦法 auto-handle prereq」):\n // Avatar self-dim when in disabled Field wrapper context(取代既有 wrapper opacity-disabled blanket\n // 逃生艙 — color.spec.md:729 specific-disabled-color canonical)。\n // Scope:`useResolvedFieldDisabled()`(= fieldCtx.disabled,涵蓋 <Field disabled> 與 <Field mode=\"disabled\">),標準 Field\n // 家族 wrapper disabled 時才 dim;沒包在 Field wrapper 內的 standalone Avatar(ProfileCard / FileItem /\n // HoverCard / Dialog 等 display 場景)backward compat 不變。對齊 avatar.spec.md「Avatar 在 disabled\n // 元件內 host-controlled opacity」canonical — 升級成「Avatar self-managed via fieldCtx」。\n // 2026-06-08 SSOT:欄位內 Avatar 跟隨 <Field disabled>/<Field mode=\"disabled\"> 變淡(fieldCtx-scoped,cell 無 fieldCtx → 不影響)\n const isDisabledInField = useResolvedFieldDisabled()\n const isFill = size === 'fill'\n // Fill 模式下 icon 用 60% 寬高、text 用 50cqi（container query inline-size）；\n // 數字模式下用既有 px 計算\n const numSize = isFill ? 32 : (size as number)\n const iconPx = getIconSize(numSize)\n const fontSizePx = Math.round(numSize 0.5)\n const variantKey: VariantKey = solid ? 'solid' : 'subtle'\n const colors = COLOR_MAP[variantKey]?.[color] ?? COLOR_MAP.subtle.neutral\n const radius = shape === 'circle' ? '9999px' : '4px'\n\n // 決定內容\n const showImage = src && !imgError\n const showIcon = !showImage && (Icon \|\| (!alt))\n const showText = !showImage && !showIcon && alt\n\n const FallbackIcon = Icon ?? User\n\n // Status dot 尺寸:avatar 的 28%(Slack / Teams / Discord 世界級平均),\n // clamp [8, 16] — floor 8 保小 avatar 仍可辨識但不喧賓奪主(10 floor 會讓 24px\n // avatar 的 dot 占 42% 太大);ceiling 16 防大 avatar dot 過度放大\n const dotSize = isFill ? 10 : Math.max(8, Math.min(16, Math.round(numSize * 0.28)))\n // Border ring 在 surface 上分離 dot 與 avatar,dotSize ≥ 12 時升階到 3px 保持視覺比例\n const dotBorder = dotSize >= 12 ? 3 : 2\n\n const avatarEl = (\n <div\n className={cn(\n 'inline-flex items-center justify-center shrink-0 overflow-hidden select-none',\n isFill && 'w-full h-full',\n // 2026-05-13 R3.5 self-dim:Avatar 在 disabled Field wrapper context 內自 dim\n // (取代 field-wrapper.tsx default/bare/naked disabled blanket opacity-disabled 逃生艙)\n isDisabledInField && 'opacity-disabled',\n )}\n style={{\n ...(isFill\n ? { containerType: 'inline-size' as React.CSSProperties['containerType'] }\n : { width: numSize, height: numSize }),\n borderRadius: radius,\n backgroundColor: showImage ? undefined : colors.bg,\n color: showImage ? undefined : colors.text,\n }}\n data-avatar-size={isFill ? 'fill' : numSize}\n role={!showImage && alt && !hoverCard ? 'img' : undefined}\n aria-label={!showImage && alt && !hoverCard ? alt : undefined}\n >\n {showImage && (\n <img\n src={src}\n alt={alt ?? ''}\n className=\"w-full h-full object-cover\"\n onError={() => setImgError(true)}\n />\n )}\n {showIcon && (\n isFill\n ? <FallbackIcon className=\"w-[60%] h-[60%]\" aria-hidden />\n : <FallbackIcon size={iconPx} aria-hidden />\n )}\n {showText && (\n <span\n className=\"font-medium leading-none\"\n style={{ fontSize: isFill ? '50cqi' : fontSizePx }}\n aria-hidden\n >\n {getInitial(alt!)}\n </span>\n )}\n </div>\n )\n\n const hasOverlay = status \|\| typeof badgeCount === 'number'\n // Keyboard access canonical(D4 UX audit 2026-04-22 finding):Avatar with `hoverCard`\n // 需 keyboard 可達 — Radix `HoverCardTrigger asChild` 不自動加 tabIndex,non-focusable\n // `<div>` 會讓 keyboard-only user 無法 reach ProfileCard popover(WCAG 2.1.1 / 4.1.2 違反)。\n // 解:當 `hoverCard` 存在時,wrapper `<div>` 變 focusable(`tabIndex=0` + `role=\"button\"` +\n // `aria-haspopup=\"dialog\"` + focus-visible ring)。若無 hoverCard 則維持純展示 `<div>`。\n const focusableProps = hoverCard\n ? {\n tabIndex: 0,\n role: 'button' as const,\n 'aria-haspopup': 'dialog' as const,\n 'aria-label': alt ?? 'View profile',\n }\n : {}\n // 2026-05-31:focus ring 圓角跟隨 shape(circle→rounded-full / square→rounded-md,對齊 body 的 `radius` 變數 '9999px'/'4px'),\n // 原寫死 rounded-full 會讓方形 avatar(實體)配 hoverCard 時出現圓形 ring。hoverCard 為通用行為(任意內容),\n // 方形 avatar 合法可配(內容非 ProfileCard 而已),故 ring 必跟形狀。\n const focusableClass = hoverCard\n ? cn('focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1', shape === 'circle' ? 'rounded-full' : 'rounded-md')\n : ''\n const baseEl = !hasOverlay\n ? <div ref={ref} className={cn('inline-flex shrink-0', focusableClass, className)} style={style} {...focusableProps} {...props}>{avatarEl}</div>\n : (\n <div ref={ref} className={cn('relative inline-flex shrink-0', focusableClass, className)} style={style} {...focusableProps} {...props}>\n {avatarEl}\n {/* Status dot:bottom-right(presence — 世界級對照 Slack / Teams / Discord),\n 落在 circle avatar 圓周 45° 位置 / square avatar 右下直角;\n border ring 用 surface 色讓 dot 從 avatar 邊界視覺分離。\n a11y:`aria-hidden` — presence 資訊整合到 parent avatar 的 aria-label\n (world-class Slack 做法),避免多 `role=\"status\"` 造成 screen reader 洪水 /}\n {status && (\n <span\n className=\"absolute block rounded-full\"\n style={{\n width: dotSize,\n height: dotSize,\n bottom: 0,\n right: 0,\n backgroundColor: STATUS_DOT_COLOR[status],\n boxShadow: `0 0 0 ${dotBorder}px var(--surface-raised, var(--canvas))`,\n }}\n aria-hidden\n />\n )}\n {/ Count badge:top-right(chat 未讀 / 通知計數 — 世界級對照 iMessage /\n Slack thread / LINE / WhatsApp)。消費 DS Badge(critical variant),\n 再加 ring 與 avatar 分離 /}\n {typeof badgeCount === 'number' && badgeCount > 0 && (\n <Badge\n variant=\"critical\"\n count={badgeCount}\n max={99}\n className=\"absolute -top-1 -right-1\"\n style={{\n boxShadow: `0 0 0 2px var(--surface-raised, var(--canvas))`,\n }}\n aria-label={badgeAriaLabel ?? `${badgeCount} unread`} // i18n-allow: DS default 英文(consumer 可傳 badgeAriaLabel i18n)\n />\n )}\n </div>\n )\n\n // 2026-05-13 (c) scroll-defer perf(per user 拍 Path (c) + codex Q3 verdict):\n // DataTable scrolling 期間跳 HoverCard wrapper(Portal + useDocumentTheme observer 是\n // Roadmap 重渲 hotspot,per codex Layer C 分析)。scroll 結束 → context flips false →\n // re-render 接回完整 HoverCard tree(ProfileCard 仍可 hover 顯示)。\n // 對齊 AG Grid `deferRender` for slow React cell components / MUI X DataGrid scroll-defer。\n if (!hoverCard \|\| isTableScrolling) return baseEl\n\n return (\n <HoverCard openDelay={HOVER_DELAY_RICH_MS} closeDelay={HOVER_DELAY_CLOSE_MS}>\n <HoverCardTrigger asChild>\n {baseEl}\n </HoverCardTrigger>\n {/ HoverCardContent canonical(2026-04-23):\n - 無 inner padding(consumer ProfileCard 自帶 `px-4 py-3` chrome)\n - `overflow-hidden` + `rounded-lg` → child(ProfileCard)圓角裁切\n - 不設 max-height:ProfileCard 自己消費 `--radix-hover-card-content-available-height`\n 自約束高度 + 內部 ScrollArea 處理捲動\n - `data-theme={documentTheme}`:ProfileCard 永遠跟隨 app-level theme(從 `<html data-theme>`\n 動態讀),不受 trigger subtree theme 污染。範例:Avatar 位於 OverflowIndicator 的 dark\n tooltip 內,其 Portal 會繼承該 subtree dark theme → ProfileCard 變全黑。顯式設回 app theme\n 確保 ProfileCard 永遠 light-in-light-app / dark-in-dark-app。 /}\n <HoverCardContent\n data-theme={documentTheme ?? undefined}\n className=\"bg-surface-raised rounded-lg border border-border overflow-hidden\"\n style={{ boxShadow: 'var(--elevation-200)' }}\n >\n {hoverCard}\n </HoverCardContent>\n </HoverCard>\n )\n }\n)\n\n// ── AvatarData ─────────────────────────────────────────────────────────────\n// 資料型別，讓 consumer 傳資料而非 ReactNode。\n// 接收端內部用 Avatar 元件渲染，統一控制尺寸與 fallback。\n\nexport interface AvatarData {\n /* 圖片 URL /\n src?: string\n /* 替代文字（圖片失敗時取首字作 fallback） /\n alt: string\n /* Icon / text fallback 的背景色，預設 neutral /\n color?: ColorKey\n /\n Person avatar hover ProfileCard(DS-wide canonical,person avatar 預設必有,見 avatar.spec.md)。\n * Entity avatar(專案 / 組織 logo)不帶 → consumer 不傳 hoverCard 即豁免。\n * 消費 AvatarData 的 row primitive(MenuItem menu-item.tsx / SelectionItem selection-item.tsx,\n * DropdownMenu / SelectMenu 經 MenuItem)需 forward 此 prop 到內部 <Avatar hoverCard={...} />。\n * 例外:ProfileCard 內部 Avatar 不 forward(卡片本身就是 hover 目的地,nested hover-in-hover 不合理)。\n */\n hoverCard?: React.ReactNode\n}\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 avatarMeta = {\n component: 'Avatar',\n family: null, // non-family composite / overlay / layout\n // 2026-07-04 audit 標記:Avatar 無 variant 軸、size 為任意 number(px,由 consumer context 決定\n // — item-anatomy AVATAR_SIZE 查表 / ProfileCard 40 等),無 discrete tier → 兩欄留空為 intentional 非漏填\n variants: {},\n sizes: {},\n states: ['default', 'focus-visible', 'disabled'], // 2026-06-11 R2:本身無自有 hover/active(spec L279;hoverCard 互動屬 HoverCard),\n tokens: {\n bg: ['bg-surface-raised'],\n fg: ['--foreground', '--on-emphasis'],\n ring: ['ring-ring'],\n },\n} as const\n\nAvatarInner.displayName = 'Avatar'\nconst Avatar = React.memo(AvatarInner)\n\nexport { Avatar }\n"],"names":[],"mappings":"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"}

package/dist/components/Badge/badge.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAwB9B,QAAA,MAAM,aAAa;;;8EAwBlB,CAAA;AAED,KAAK,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAA;AAE7E,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,4BAA4B;IAC5B,GAAG,EAAE,IAAI,CAAA;IACT;;2EAEuE;IACvE,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAA;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,GAAG,CAAC,EAAE,KAAK,CAAA;CACZ;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,6DAA6D;IAC7D,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAA;IAChD,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG,eAAe,CAAA;AAExD,QAAA,MAAM,KAAK,~~oFAuBV~~,CAAA;AAKD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;CAmBZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
1	+ {"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAwB9B,QAAA,MAAM,aAAa;;;8EAwBlB,CAAA;AAED,KAAK,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAA;AAE7E,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,4BAA4B;IAC5B,GAAG,EAAE,IAAI,CAAA;IACT;;2EAEuE;IACvE,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAA;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,GAAG,CAAC,EAAE,KAAK,CAAA;CACZ;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,6DAA6D;IAC7D,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAA;IAChD,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG,eAAe,CAAA;AAExD,QAAA,MAAM,KAAK,oFA0BV,CAAA;AAKD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;CAmBZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/Badge/badge.js CHANGED Viewed

@@ -30,7 +30,8 @@ const badgeVariants = cva(
 const Badge = React.forwardRef(
   ({ variant, dot = false, count, max, className, role, ...props }, ref) => {
     const effectiveVariant = variant ?? (dot ? "critical" : "low");
-    const display = dot ? null : max != null && count != null && count > max ? `${max}+` : `${count}`;
+    if (!dot && count == null) return null;
+    const display = dot ? null : max != null && count > max ? `${max}+` : `${count}`;
     return /* @__PURE__ */ jsx(
       "span",
       {

package/dist/components/Badge/badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge.js","sources":["../../../src/components/Badge/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n// ── Badge（notification count indicator）────────────────────────────────────\n// 通知計數指示器，用於未讀數量、待辦計數等。\n//\n// 兩種模式：\n// count — 16px 高，10px 字，font-medium。個位數正圓，多位數膠囊。\n// dot — 6×6px 純色圓點，無文字。\n//\n// 四個層級（由 passive 到 urgent）：\n// low（預設） — 灰底灰字（neutral-3 + neutral-7），被動計數\n// medium — 淺藍底藍字（bg-info-subtle + text-info-text），可延後看\n// high — 藍底白字（bg-info），有感影響的待辦\n// critical — deep-orange 底白字（bg-notification = --color-deep-orange-6,hue 38;非 categorical red hue 25），立即處理\n//\n// dot 模式只接 critical / high（單一 attention 點,實心可見色）—— 不提供 medium/low dot:\n// dot = 「這裡有東西要看」,淡點不 earn existence(對齊 Material small-badge / Ant status dot /\n// Polaris:dot 是單一 attention/status,非 4 級 severity 刻度;2026-06-05 user 拍板 Option A)。\n// medium/low 仍完整存在於 count/text badge。\n//\n// 規則：count default low, escalate with reason。見 badge.spec.md「選 level 的流程」+「dot 變體」。\n\nconst badgeVariants = cva(\n // 2026-05-23 Path B revert:icon-as-text / numeric-in-circle 用 leading-none canonical(對齊 Material Avatar `line-height: 1` / Polaris Badge / Carbon Tag 共識)。\n // 視覺等效驗證:Badge container 顯式 `h-4 (16px)` + `flex items-center` 主導,text 被 items-center 置中,line-height 1.0 vs 1.3 視覺零差別。\n // user 2026-05-23「或是其實根本不用分?」+「照你建議」path B:統一 leading-none,不分。\n // 廢除 2026-05-21 F1 fix 的 leading-compact migration(那次 anchor「不影響高度的話就改」core constraint 是高度不變,Path B 同樣滿足且更簡單)。\n 'inline-flex items-center justify-center rounded-full leading-none',\n {\n variants: {\n variant: {\n critical: 'bg-notification text-on-emphasis',\n high: 'bg-info text-on-emphasis',\n medium: 'bg-info-subtle text-info-text',\n low: 'bg-secondary text-fg-muted',\n },\n dot: {\n true: 'w-1.5 h-1.5',\n false: 'min-w-4 h-4 px-1 text-[10px] font-medium',\n },\n },\n defaultVariants: {\n variant: 'low',\n dot: false,\n },\n }\n)\n\ntype BadgeBaseProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>\n\nexport interface BadgeDotProps extends BadgeBaseProps {\n /** dot 模式：6×6px 純色圓點，無文字 /\n dot: true\n /* dot 只接高訊號 attention 色:critical(立即)/ high(有感)。預設 critical。\n * 不提供 medium/low —— dot = 「這裡有東西要看」,淡點不 earn existence\n * (對齊 Material/Ant/Polaris:dot 是單一 attention/status,非 severity 刻度)。 /\n variant?: 'critical' \| 'high'\n count?: never\n max?: never\n}\n\nexport interface BadgeCountProps extends BadgeBaseProps {\n dot?: false\n /* 四級 severity（low→critical),見 badge.spec.md「選 level 的流程」 /\n variant?: 'critical' \| 'high' \| 'medium' \| 'low'\n /* 顯示的數量 /\n count?: number\n /* 數量上限，超過時顯示 \"max+\"（例：max=99 → \"99+\"） */\n max?: number\n}\n\nexport type BadgeProps = BadgeDotProps \| BadgeCountProps\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({ variant, dot = false, count, max, className, role, ...props }, ref) => {\n // dot 預設 attention 色 = critical(非 cva 的 count default 'low');count 沿用 cva default 'low'。\n const effectiveVariant = variant ?? (dot ? 'critical' : 'low')\n const display = dot ? null : (\n max != null && count ~~!= null && count~~ > max ? `${max}+` : `${count}`\n )\n\n // a11y(2026-04-25 axe aria-prohibited-attr fix):\n // span default 無 role → 不接 aria-label(WCAG 禁止)。Badge 是通知指示器,\n // `role=\"status\"` 語意正確(live region 可播報計數變化)且允許 aria-label。\n // Consumer 可 override(傳 role=\"img\" / role={undefined})。\n return (\n <span\n ref={ref}\n role={role ?? 'status'}\n className={cn(badgeVariants({ variant: effectiveVariant, dot }), className)}\n {...props}\n >\n {display}\n </span>\n )\n }\n)\nBadge.displayName = 'Badge'\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 badgeMeta = {\n component: 'Badge',\n family: null, // self-contained(對齊 spec frontmatter 2026-06-11 修),\n variants: {\n critical: { purpose: 'deep-orange 底白字（bg-notification = deep-orange-6）' },\n high: { purpose: '藍底白字（bg-info）' },\n medium: { purpose: '淺藍底藍字（bg-info-subtle）' },\n low: { purpose: '使用者切 tab 才看，不需搶注意力' },\n },\n sizes: {\n\n },\n states: ['default'],\n tokens: {\n bg: ['bg-info', 'bg-info-subtle', 'bg-notification', 'bg-secondary'],\n fg: ['text-fg-muted', 'text-info-text', 'text-on-emphasis'],\n ring: [],\n },\n defaultVariant: 'low',\n} as const\n\nexport { Badge, badgeVariants }\n"],"names":[],"mappings":";;;;AAwBA,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,UAAU;AAAA,QACV,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,KAAK;AAAA,MAAA;AAAA,MAEP,KAAK;AAAA,QACH,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AA2BA,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,EAAE,SAAS,MAAM,OAAO,OAAO,KAAK,WAAW,MAAM,GAAG,MAAA,GAAS,QAAQ;AAExE,UAAM,mBAAmB,YAAY,MAAM,aAAa;~~AACxD~~,UAAM,UAAU,MAAM,OACpB,OAAO,QAAQ,~~SAAS~~,~~QAAQ,QAAQ,~~MAAM,GAAG,GAAG,MAAM,GAAG,KAAK;~~AAOpE~~,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,QAAQ;AAAA,QACd,WAAW,GAAG,cAAc,EAAE,SAAS,kBAAkB,IAAA,CAAK,GAAG,SAAS;AAAA,QACzE,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,MAAM,cAAc;AAIb,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU;AAAA,IACR,UAAU,EAAE,SAAS,mDAAA;AAAA,IACrB,MAAM,EAAE,SAAS,gBAAA;AAAA,IACjB,QAAQ,EAAE,SAAS,wBAAA;AAAA,IACnB,KAAK,EAAE,SAAS,qBAAA;AAAA,EAAqB;AAAA,EAEvC,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAC,WAAW,kBAAkB,mBAAmB,cAAc;AAAA,IACnE,IAAI,CAAC,iBAAiB,kBAAkB,kBAAkB;AAAA,IAC1D,MAAM,CAAA;AAAA,EAAC;AAAA,EAET,gBAAgB;AAClB;"}
1	+ {"version":3,"file":"badge.js","sources":["../../../src/components/Badge/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n// ── Badge（notification count indicator）────────────────────────────────────\n// 通知計數指示器，用於未讀數量、待辦計數等。\n//\n// 兩種模式：\n// count — 16px 高，10px 字，font-medium。個位數正圓，多位數膠囊。\n// dot — 6×6px 純色圓點，無文字。\n//\n// 四個層級（由 passive 到 urgent）：\n// low（預設） — 灰底灰字（neutral-3 + neutral-7），被動計數\n// medium — 淺藍底藍字（bg-info-subtle + text-info-text），可延後看\n// high — 藍底白字（bg-info），有感影響的待辦\n// critical — deep-orange 底白字（bg-notification = --color-deep-orange-6,hue 38;非 categorical red hue 25），立即處理\n//\n// dot 模式只接 critical / high（單一 attention 點,實心可見色）—— 不提供 medium/low dot:\n// dot = 「這裡有東西要看」,淡點不 earn existence(對齊 Material small-badge / Ant status dot /\n// Polaris:dot 是單一 attention/status,非 4 級 severity 刻度;2026-06-05 user 拍板 Option A)。\n// medium/low 仍完整存在於 count/text badge。\n//\n// 規則：count default low, escalate with reason。見 badge.spec.md「選 level 的流程」+「dot 變體」。\n\nconst badgeVariants = cva(\n // 2026-05-23 Path B revert:icon-as-text / numeric-in-circle 用 leading-none canonical(對齊 Material Avatar `line-height: 1` / Polaris Badge / Carbon Tag 共識)。\n // 視覺等效驗證:Badge container 顯式 `h-4 (16px)` + `flex items-center` 主導,text 被 items-center 置中,line-height 1.0 vs 1.3 視覺零差別。\n // user 2026-05-23「或是其實根本不用分?」+「照你建議」path B:統一 leading-none,不分。\n // 廢除 2026-05-21 F1 fix 的 leading-compact migration(那次 anchor「不影響高度的話就改」core constraint 是高度不變,Path B 同樣滿足且更簡單)。\n 'inline-flex items-center justify-center rounded-full leading-none',\n {\n variants: {\n variant: {\n critical: 'bg-notification text-on-emphasis',\n high: 'bg-info text-on-emphasis',\n medium: 'bg-info-subtle text-info-text',\n low: 'bg-secondary text-fg-muted',\n },\n dot: {\n true: 'w-1.5 h-1.5',\n false: 'min-w-4 h-4 px-1 text-[10px] font-medium',\n },\n },\n defaultVariants: {\n variant: 'low',\n dot: false,\n },\n }\n)\n\ntype BadgeBaseProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>\n\nexport interface BadgeDotProps extends BadgeBaseProps {\n /** dot 模式：6×6px 純色圓點，無文字 /\n dot: true\n /* dot 只接高訊號 attention 色:critical(立即)/ high(有感)。預設 critical。\n * 不提供 medium/low —— dot = 「這裡有東西要看」,淡點不 earn existence\n * (對齊 Material/Ant/Polaris:dot 是單一 attention/status,非 severity 刻度)。 /\n variant?: 'critical' \| 'high'\n count?: never\n max?: never\n}\n\nexport interface BadgeCountProps extends BadgeBaseProps {\n dot?: false\n /* 四級 severity（low→critical),見 badge.spec.md「選 level 的流程」 /\n variant?: 'critical' \| 'high' \| 'medium' \| 'low'\n /* 顯示的數量 /\n count?: number\n /* 數量上限，超過時顯示 \"max+\"（例：max=99 → \"99+\"） */\n max?: number\n}\n\nexport type BadgeProps = BadgeDotProps \| BadgeCountProps\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({ variant, dot = false, count, max, className, role, ...props }, ref) => {\n // dot 預設 attention 色 = critical(非 cva 的 count default 'low');count 沿用 cva default 'low'。\n const effectiveVariant = variant ?? (dot ? 'critical' : 'low')\n // 2026-07-05 D4 修(續 07-04 guard):count 模式 count == null → 整顆 return null 不渲染 —\n // 原 guard 只擋文字,仍渲染 16px 空 pill + 空 role=status live region(Ant/Material 皆不渲染)。\n if (!dot && count == null) return null\n const display = dot ? null : (\n max != null && count! > max ? `${max}+` : `${count}`\n )\n\n // a11y(2026-04-25 axe aria-prohibited-attr fix):\n // span default 無 role → 不接 aria-label(WCAG 禁止)。Badge 是通知指示器,\n // `role=\"status\"` 語意正確(live region 可播報計數變化)且允許 aria-label。\n // Consumer 可 override(傳 role=\"img\" / role={undefined})。\n return (\n <span\n ref={ref}\n role={role ?? 'status'}\n className={cn(badgeVariants({ variant: effectiveVariant, dot }), className)}\n {...props}\n >\n {display}\n </span>\n )\n }\n)\nBadge.displayName = 'Badge'\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 badgeMeta = {\n component: 'Badge',\n family: null, // self-contained(對齊 spec frontmatter 2026-06-11 修),\n variants: {\n critical: { purpose: 'deep-orange 底白字（bg-notification = deep-orange-6）' },\n high: { purpose: '藍底白字（bg-info）' },\n medium: { purpose: '淺藍底藍字（bg-info-subtle）' },\n low: { purpose: '使用者切 tab 才看，不需搶注意力' },\n },\n sizes: {\n\n },\n states: ['default'],\n tokens: {\n bg: ['bg-info', 'bg-info-subtle', 'bg-notification', 'bg-secondary'],\n fg: ['text-fg-muted', 'text-info-text', 'text-on-emphasis'],\n ring: [],\n },\n defaultVariant: 'low',\n} as const\n\nexport { Badge, badgeVariants }\n"],"names":[],"mappings":";;;;AAwBA,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,UAAU;AAAA,QACV,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,KAAK;AAAA,MAAA;AAAA,MAEP,KAAK;AAAA,QACH,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AA2BA,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,EAAE,SAAS,MAAM,OAAO,OAAO,KAAK,WAAW,MAAM,GAAG,MAAA,GAAS,QAAQ;AAExE,UAAM,mBAAmB,YAAY,MAAM,aAAa;AAGxD,QAAI,CAAC,OAAO,SAAS,KAAM,QAAO;AAClC,UAAM,UAAU,MAAM,OACpB,OAAO,QAAQ,QAAS,MAAM,GAAG,GAAG,MAAM,GAAG,KAAK;AAOpD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,QAAQ;AAAA,QACd,WAAW,GAAG,cAAc,EAAE,SAAS,kBAAkB,IAAA,CAAK,GAAG,SAAS;AAAA,QACzE,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,MAAM,cAAc;AAIb,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU;AAAA,IACR,UAAU,EAAE,SAAS,mDAAA;AAAA,IACrB,MAAM,EAAE,SAAS,gBAAA;AAAA,IACjB,QAAQ,EAAE,SAAS,wBAAA;AAAA,IACnB,KAAK,EAAE,SAAS,qBAAA;AAAA,EAAqB;AAAA,EAEvC,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAC,WAAW,kBAAkB,mBAAmB,cAAc;AAAA,IACnE,IAAI,CAAC,iBAAiB,kBAAkB,kBAAkB;AAAA,IAC1D,MAAM,CAAA;AAAA,EAAC;AAAA,EAET,gBAAgB;AAClB;"}

package/dist/components/Breadcrumb/breadcrumb.d.ts CHANGED Viewed

@@ -150,7 +150,20 @@ export declare const breadcrumbMeta: {
     readonly component: "Breadcrumb";
     readonly family: null;
     readonly variants: {};
-    readonly sizes: {};
+    readonly sizes: {
+        readonly sm: {
+            readonly iconSize: 16;
+            readonly typography: "body";
+        };
+        readonly md: {
+            readonly iconSize: 16;
+            readonly typography: "body";
+        };
+        readonly lg: {
+            readonly iconSize: 20;
+            readonly typography: "body-lg";
+        };
+    };
     readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
     readonly tokens: {
         readonly bg: readonly [];

package/dist/components/Breadcrumb/breadcrumb.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAgC,KAAK,UAAU,EAAE,MAAM,cAAc,CAAA;AAE5E,OAAO,EAAE,sBAAsB,EAAE,MAAM,uDAAuD,CAAA;AA0E9F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAIH,KAAK,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AA0BxC,QAAA,MAAM,UAAU,0JAKd,CAAA;AAKF;;;;GAIG;AAEH,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB;AAED,UAAU,mBAAoB,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAC1F;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAA;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kEAAkE;IAClE,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,kEAAkE;IAClE,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAGD,QAAA,MAAM,cAAc,~~8FAgLnB~~,CAAA;AAKD;;;;;;;;;;;;GAYG;AACH,UAAU,mBAAoB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC;IACxE,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;CAClD;AAED,QAAA,MAAM,cAAc,2FA4BnB,CAAA;AAKD,UAAU,mBAAoB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC;IACvE,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB;AAED,QAAA,MAAM,cAAc,+FAyCnB,CAAA;AAKD,UAAU,mBAAoB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;IAC1E,wEAAwE;IACxE,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB;AAED,QAAA,MAAM,cAAc,6FAqBnB,CAAA;AAKD,UAAU,wBAAyB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC;IAC7E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAGD,QAAA,MAAM,mBAAmB,gGAgBxB,CAAA;AAKD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,KAAK,uBAAuB,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,sBAAsB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,CAAA;AAEnH,QAAA,MAAM,kBAAkB,mGAavB,CAAA;AAKD,eAAO,MAAM,cAAc~~;;;;;;;;;;;CAejB~~,CAAA;AAEV,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,CAAA;AACD,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,CAAA"}
1	+ {"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAgC,KAAK,UAAU,EAAE,MAAM,cAAc,CAAA;AAE5E,OAAO,EAAE,sBAAsB,EAAE,MAAM,uDAAuD,CAAA;AA0E9F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAIH,KAAK,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AA0BxC,QAAA,MAAM,UAAU,0JAKd,CAAA;AAKF;;;;GAIG;AAEH,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB;AAED,UAAU,mBAAoB,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAC1F;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAA;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kEAAkE;IAClE,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,kEAAkE;IAClE,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAGD,QAAA,MAAM,cAAc,8FAkLnB,CAAA;AAKD;;;;;;;;;;;;GAYG;AACH,UAAU,mBAAoB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC;IACxE,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;CAClD;AAED,QAAA,MAAM,cAAc,2FA4BnB,CAAA;AAKD,UAAU,mBAAoB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC;IACvE,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB;AAED,QAAA,MAAM,cAAc,+FAyCnB,CAAA;AAKD,UAAU,mBAAoB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;IAC1E,wEAAwE;IACxE,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB;AAED,QAAA,MAAM,cAAc,6FAqBnB,CAAA;AAKD,UAAU,wBAAyB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC;IAC7E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAGD,QAAA,MAAM,mBAAmB,gGAgBxB,CAAA;AAKD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,KAAK,uBAAuB,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,sBAAsB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,CAAA;AAEnH,QAAA,MAAM,kBAAkB,mGAavB,CAAA;AAKD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;CAmBjB,CAAA;AAEV,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,CAAA;AACD,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,CAAA"}

package/dist/components/Breadcrumb/breadcrumb.js CHANGED Viewed

@@ -67,7 +67,7 @@ const BreadcrumbList = React.forwardRef(
     const ctxValue = React.useMemo(() => ({ size }), [size]);
     const declarativeContent = React.useMemo(() => {
       if (!items) return null;
-      const renderItem = (spec, role) => /* @__PURE__ */ jsx(BreadcrumbItem, { role, children: role === "current" ? /* @__PURE__ */ jsx(BreadcrumbPage, { startIcon: spec.startIcon, children: /* @__PURE__ */ jsx(TruncatedLabel, { fullText: typeof spec.label === "string" ? spec.label : void 0, children: spec.label }) }) : /* @__PURE__ */ jsx(BreadcrumbLink, { href: spec.href, asChild: spec.asChild, startIcon: spec.startIcon, children: /* @__PURE__ */ jsx(TruncatedLabel, { fullText: typeof spec.label === "string" ? spec.label : void 0, children: spec.label }) }) }, `${role}-${typeof spec.label === "string" ? spec.label : Math.random()}`);
+      const renderItem = (spec, role, idx) => /* @__PURE__ */ jsx(BreadcrumbItem, { role, children: role === "current" ? /* @__PURE__ */ jsx(BreadcrumbPage, { startIcon: spec.startIcon, children: /* @__PURE__ */ jsx(TruncatedLabel, { fullText: typeof spec.label === "string" ? spec.label : void 0, children: spec.label }) }) : /* @__PURE__ */ jsx(BreadcrumbLink, { href: spec.href, asChild: spec.asChild, startIcon: spec.startIcon, children: /* @__PURE__ */ jsx(TruncatedLabel, { fullText: typeof spec.label === "string" ? spec.label : void 0, children: spec.label }) }) }, `${role}-${typeof spec.label === "string" ? spec.label : idx}`);
       const shouldCollapse = items.length > maxItems;
       const beforeN = Math.max(0, itemsBeforeCollapse);
       const afterN = Math.max(1, itemsAfterCollapse);
@@ -100,7 +100,7 @@ const BreadcrumbList = React.forwardRef(
             ] }) }, "ellipsis")
           );
         } else {
-          rendered.push(renderItem(entry.spec, entry.role));
+          rendered.push(renderItem(entry.spec, entry.role, i));
         }
       });
       return rendered;
@@ -279,7 +279,13 @@ const breadcrumbMeta = {
   family: null,
   // non-family composite / overlay / layout
   variants: {},
-  sizes: {},
+  sizes: {
+    // 值源 = code SSOT:BREADCRUMB_SIZE_TEXT(sm/md=text-body, lg=text-body-lg)+ BREADCRUMB_ICON_SIZE(sm/md=16, lg=20)。
+    // Breadcrumb 是文字列無固定高度 token,故不列 height(對照 Tag meta 有自身 h-* 才列)。
+    sm: { iconSize: 16, typography: "body" },
+    md: { iconSize: 16, typography: "body" },
+    lg: { iconSize: 20, typography: "body-lg" }
+  },
   states: ["default", "hover", "active", "focus-visible", "disabled"],
   tokens: {
     bg: [],