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

package/dist/components/FileViewer/can-render-image.js

@@ -0,0 +1,11 @@
+const IMAGE_EXTS = /* @__PURE__ */ new Set(["jpg", "jpeg", "png", "gif", "webp", "svg", "avif", "bmp", "ico"]);
+function canRenderImage(file) {
+  var _a;
+  if (file.mimeType.startsWith("image/")) return true;
+  const ext = (_a = file.name.split(".").pop()) == null ? void 0 : _a.toLowerCase();
+  return ext ? IMAGE_EXTS.has(ext) : false;
+}
+export {
+  canRenderImage
+};
+//# sourceMappingURL=can-render-image.js.map

package/dist/components/FileViewer/can-render-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"can-render-image.js","sources":["../../../src/components/FileViewer/can-render-image.ts"],"sourcesContent":["// 2026-07-06 D3 bundle fix:canRenderImage 從 image-renderer.tsx 拆出成獨立小 module。\n// 理由:file-viewer.tsx 需要「同步」呼叫 canRenderImage(renderer registry canRender 判斷\n// + Filmstrip thumb 分流),但 image-renderer.tsx 頂層 import react-zoom-pan-pinch(~12KB gz)——\n// 靜態 import 會把整個 lib 拉進 consumer 首屏 bundle,即使 viewer 從未打開。\n// 拆出後 file-viewer.tsx 靜態 import 本檔(純 util,零依賴),ImageRenderer 本體走 React.lazy\n// 動態 import,react-zoom-pan-pinch 延後到 viewer 首次渲染 image 時才載入。\n\nconst IMAGE_EXTS = new Set(['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'avif', 'bmp', 'ico'])\n\n/** 判斷檔案是否可用 ImageRenderer 渲染。 */\nexport function canRenderImage(file: { mimeType: string; name: string }): boolean {\n  if (file.mimeType.startsWith('image/')) return true\n  const ext = file.name.split('.').pop()?.toLowerCase()\n  return ext ? IMAGE_EXTS.has(ext) : false\n}\n"],"names":[],"mappings":"AAOA,MAAM,aAAa,oBAAI,IAAI,CAAC,OAAO,QAAQ,OAAO,OAAO,QAAQ,OAAO,QAAQ,OAAO,KAAK,CAAC;AAGtF,SAAS,eAAe,MAAmD;AAHlF;AAIE,MAAI,KAAK,SAAS,WAAW,QAAQ,EAAG,QAAO;AAC/C,QAAM,OAAM,UAAK,KAAK,MAAM,GAAG,EAAE,IAAA,MAArB,mBAA4B;AACxC,SAAO,MAAM,WAAW,IAAI,GAAG,IAAI;AACrC;"}

package/dist/components/FileViewer/file-viewer.d.ts

@@ -33,14 +33,14 @@ export interface FileViewerLabels {
     descriptionPlaceholderEdit?: string;
     /** Detail section — file info section heading */
     fileInfoHeading?: string;
-    /** Filmstrip tablist ARIA label */
+    /** Filmstrip group ARIA label（role="group" + thumb button + aria-current,非 tablist）*/
     filmstripLabel?: string;
     /** Previous-file nav button ARIA label */
     previousFile?: string;
     /** Next-file nav button ARIA label */
     nextFile?: string;
 }
-export interface FileViewerProps extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'onOpenChange'> {
+export interface FileViewerProps extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'onOpenChange' | 'tabIndex'> {
     files: FileInfo[];
     initialIndex?: number;
     /** Controlled open state。與 `defaultOpen` 二擇一。 */
@@ -70,9 +70,9 @@ export declare const fileViewerMeta: {
     readonly family: null;
     readonly variants: {};
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default", "hover", "selected", "focus-visible", "disabled"];
     readonly tokens: {
-        readonly bg: readonly ["bg-muted", "bg-surface", "bg-surface-raised"];
+        readonly bg: readonly ["bg-muted", "bg-neutral-selected", "bg-overlay", "bg-surface-raised"];
         readonly fg: readonly ["text-fg-muted", "text-foreground"];
         readonly ring: readonly ["ring-primary", "ring-ring"];
     };

package/dist/components/FileViewer/file-viewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-viewer.d.ts","sourceRoot":"","sources":["../../../src/components/FileViewer/file-viewer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAuCzD,OAAO,KAAK,EACV,QAAQ,EACR,YAAY,EAEb,MAAM,qBAAqB,CAAA;AA6D5B,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,YAAY,GAAG,IAAI,CAQjE;AA4gBD;;;;;GAKG;AAEH,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6BAA6B;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,kDAAkD;IAClD,8BAA8B,CAAC,EAAE,MAAM,CAAA;IACvC,kDAAkD;IAClD,0BAA0B,CAAC,EAAE,MAAM,CAAA;IACnC,iDAAiD;IACjD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAqBD,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EAC9D,cAAc,CACf;IACD,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iDAAiD;IACjD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,sFAAsF;IACtF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IACnE,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sDAAsD;IACtD,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gCAAgC;IAChC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,qDAAqD;IACrD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IACrC,+DAA+D;IAC/D,MAAM,CAAC,EAAE,gBAAgB,CAAA;CAC1B;AAED,QAAA,MAAM,UAAU,wFA0Td,CAAA;AAKF,eAAO,MAAM,cAAc;;;;;;;;;;;CAejB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,CAAA;AACrB,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,wBAAwB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA"}
+{"version":3,"file":"file-viewer.d.ts","sourceRoot":"","sources":["../../../src/components/FileViewer/file-viewer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAyCzD,OAAO,KAAK,EACV,QAAQ,EACR,YAAY,EAGb,MAAM,qBAAqB,CAAA;AAgF5B,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,YAAY,GAAG,IAAI,CAQjE;AA2hBD;;;;;GAKG;AAEH,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6BAA6B;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,kDAAkD;IAClD,8BAA8B,CAAC,EAAE,MAAM,CAAA;IACvC,kDAAkD;IAClD,0BAA0B,CAAC,EAAE,MAAM,CAAA;IACnC,iDAAiD;IACjD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,sFAAsF;IACtF,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAqBD,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EAC9D,cAAc,GAAG,UAAU,CAC5B;IACD,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iDAAiD;IACjD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,sFAAsF;IACtF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IACnE,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sDAAsD;IACtD,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gCAAgC;IAChC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,qDAAqD;IACrD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IACrC,+DAA+D;IAC/D,MAAM,CAAC,EAAE,gBAAgB,CAAA;CAC1B;AAED,QAAA,MAAM,UAAU,wFAwWd,CAAA;AAKF,eAAO,MAAM,cAAc;;;;;;;;;;;CAiBjB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,CAAA;AACrB,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,wBAAwB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/components/FileViewer/file-viewer.js

@@ -3,8 +3,9 @@ import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { ChevronLeft, ChevronRight, File, Info, Download, X, FileText, Minus, ChevronDown, Plus } from "lucide-react";
 import { cn } from "../../lib/utils.js";
+import { OVERLAY_SIDE_OFFSET } from "../../tokens/elevation/overlay-geometry.js";
 import { Button } from "../Button/button.js";
-import { Separator } from "../Separator/separator.js";
+import { ButtonDivider } from "../Button/button-group.js";
 import { Input } from "../Input/input.js";
 import { Empty } from "../Empty/empty.js";
 import { AspectRatio } from "../AspectRatio/aspect-ratio.js";
@@ -15,26 +16,36 @@ import { ItemInlineActionButton } from "../../patterns/element-anatomy/item-anat
 import { ChromeHeader } from "../../patterns/header-canonical/chrome-header.js";
 import { ScrollArea } from "../ScrollArea/scroll-area.js";
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from "../DropdownMenu/dropdown-menu.js";
-import { useScrollByPage, buildFadeMask, OverflowScrollArrow } from "../../patterns/horizontal-overflow/horizontal-overflow.js";
-import { canRenderImage, ImageRenderer } from "./image-renderer.js";
+import { useScrollByPage, buildFadeMask, ARROW_BUTTON_WIDTH, OverflowScrollArrow } from "../../patterns/horizontal-overflow/horizontal-overflow.js";
+import { useControllable } from "../../hooks/use-controllable.js";
+import { canRenderImage } from "./can-render-image.js";
+import { surfaceMotion } from "../../tokens/motion/overlay-motion.js";
 import { useScrollEdges } from "../../hooks/use-overflow-items.js";
-const FallbackRenderer = ({ file }) => /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center p-8", children: /* @__PURE__ */ jsx(
-  Empty,
-  {
-    icon: FileText,
-    title: file.name,
-    description: `無法在瀏覽器中預覽此檔案類型（${file.mimeType || "unknown"}）。請下載後檢視。`
-  }
-) });
+const FallbackRenderer = ({ file, onCapabilitiesChange }) => {
+  React.useEffect(() => {
+    onCapabilitiesChange({ zoom: false });
+  }, [onCapabilitiesChange]);
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center p-8", children: /* @__PURE__ */ jsx(
+    Empty,
+    {
+      icon: FileText,
+      title: file.name,
+      description: `無法在瀏覽器中預覽此檔案類型（${file.mimeType || "unknown"}）。請下載後檢視。`
+    }
+  ) });
+};
 const fallbackRenderer = {
   id: "fallback",
   canRender: () => true,
-  component: ({ file }) => /* @__PURE__ */ jsx(FallbackRenderer, { file })
+  component: FallbackRenderer
 };
+const LazyImageRenderer = React.lazy(
+  () => import("./image-renderer.js").then((m) => ({ default: m.ImageRenderer }))
+);
 const imageRenderer = {
   id: "image",
   canRender: canRenderImage,
-  component: ImageRenderer
+  component: LazyImageRenderer
 };
 const userRegistered = [];
 function registerFileRenderer(renderer) {
@@ -106,6 +117,7 @@ const ZoomInput = ({ value, onChange, onFit, labels }) => {
           {
             size: "sm",
             autoWidth: true,
+            maxLength: 5,
             "aria-label": labels.zoomInput,
             value: draft,
             onChange: (e) => setDraft(e.target.value),
@@ -133,7 +145,7 @@ const ZoomInput = ({ value, onChange, onFit, labels }) => {
           DropdownMenuContent,
           {
             align: "end",
-            sideOffset: 8,
+            sideOffset: OVERLAY_SIDE_OFFSET,
             className: "min-w-[9rem] w-auto bg-surface-raised text-foreground border-divider",
             "data-theme": "dark",
             children: /* @__PURE__ */ jsxs("div", { "data-theme": "dark", className: "contents", children: [
@@ -152,11 +164,8 @@ const ZoomInput = ({ value, onChange, onFit, labels }) => {
                   DropdownMenuItem,
                   {
                     onSelect: () => onChange(p),
-                    "data-state": selected ? "checked" : void 0,
-                    className: cn(
-                      "tabular-nums",
-                      selected && "bg-neutral-selected"
-                    ),
+                    selected,
+                    className: "tabular-nums",
                     children: [
                       p,
                       "%"
@@ -201,7 +210,6 @@ const Toolbar = ({
   return /* @__PURE__ */ jsxs(
     ChromeHeader,
     {
-      lockDensity: "lg",
       className: cn(
         // Chrome layer — `bg-surface-raised` 對齊 token semantic「遮蓋型浮層必須不透明」。
         // FileViewer 整體是 overlay,chrome 屬其 raised surface(同 DropdownMenuContent line 244)。
@@ -225,7 +233,7 @@ const Toolbar = ({
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
           capabilities.zoom && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(ZoomInput, { value: zoom, onChange: onZoomChange, onFit, labels }),
-            /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-6 mx-1" })
+            /* @__PURE__ */ jsx(ButtonDivider, {})
           ] }),
           /* @__PURE__ */ jsx(
             Button,
@@ -250,7 +258,7 @@ const Toolbar = ({
               onClick: onDownload
             }
           ),
-          /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-6 mx-1" }),
+          /* @__PURE__ */ jsx(ButtonDivider, {}),
           /* @__PURE__ */ jsx(
             Button,
             {
@@ -275,13 +283,13 @@ function formatBytes(bytes) {
   if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
 }
-const InfoPanel = ({
+const InfoPanel = React.memo(function InfoPanel2({
   file,
   readOnly,
   onDescriptionChange,
   onClose,
   labels
-}) => {
+}) {
   const [draft, setDraft] = React.useState(file.description ?? "");
   React.useEffect(() => {
     setDraft(file.description ?? "");
@@ -303,7 +311,7 @@ const InfoPanel = ({
       ),
       "aria-label": labels.detailPanel,
       children: [
-        /* @__PURE__ */ jsxs(ChromeHeader, { lockDensity: "lg", className: "justify-between", children: [
+        /* @__PURE__ */ jsxs(ChromeHeader, { className: "justify-between", children: [
           /* @__PURE__ */ jsx("h3", { className: "text-body-lg font-medium text-foreground", children: labels.detailsHeading }),
           /* @__PURE__ */ jsx(
             Button,
@@ -339,9 +347,9 @@ const InfoPanel = ({
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--layout-space-tight)]", children: [
             /* @__PURE__ */ jsx("span", { className: "text-body font-normal text-foreground", children: labels.fileInfoHeading }),
-            /* @__PURE__ */ jsxs(DescriptionList, { direction: "horizontal", divided: true, children: [
+            /* @__PURE__ */ jsxs(DescriptionList, { orientation: "horizontal", divided: true, children: [
               /* @__PURE__ */ jsx(DescriptionItem, { label: "檔名", children: file.name }),
-              /* @__PURE__ */ jsx(DescriptionItem, { label: "類型", children: file.mimeType || "—" }),
+              /* @__PURE__ */ jsx(DescriptionItem, { label: "類型", children: file.mimeType || "-" }),
               sizeText && /* @__PURE__ */ jsx(DescriptionItem, { label: "大小", children: /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: sizeText }) }),
               file.metadata && Object.entries(file.metadata).map(([k, v]) => /* @__PURE__ */ jsx(DescriptionItem, { label: k, children: String(v) }, k))
             ] })
@@ -350,12 +358,12 @@ const InfoPanel = ({
       ]
     }
   );
-};
+});
 const THUMB_SIZE = 64;
-const Filmstrip = ({ files, activeIndex, onSelect, labels }) => {
+const Filmstrip = React.memo(function Filmstrip2({ files, activeIndex, onSelect, labels }) {
   const { scrollRef, atStart, atEnd, canScroll } = useScrollEdges();
   const scrollByPage = useScrollByPage(scrollRef);
-  const maskImage = buildFadeMask({ canScroll, atStart, atEnd, reserveArrowWidth: 32 });
+  const maskImage = buildFadeMask({ canScroll, atStart, atEnd, reserveArrowWidth: ARROW_BUTTON_WIDTH });
   React.useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -390,7 +398,7 @@ const Filmstrip = ({ files, activeIndex, onSelect, labels }) => {
             children: /* @__PURE__ */ jsx(
               "div",
               {
-                role: "tablist",
+                role: "group",
                 "aria-label": labels.filmstripLabel,
                 className: "flex items-center gap-[var(--layout-space-tight)] mx-auto shrink-0",
                 children: files.map((file, i) => {
@@ -402,8 +410,7 @@ const Filmstrip = ({ files, activeIndex, onSelect, labels }) => {
                     "button",
                     {
                       type: "button",
-                      role: "tab",
-                      "aria-selected": active,
+                      "aria-current": active ? "true" : void 0,
                       "aria-label": `${i + 1} / ${files.length}:${file.name}`,
                       "data-thumb-index": i,
                       onClick: () => onSelect(i),
@@ -439,7 +446,7 @@ const Filmstrip = ({ files, activeIndex, onSelect, labels }) => {
       ]
     }
   );
-};
+});
 const DEFAULT_LABELS = {
   zoomInput: "縮放比例",
   zoomMenu: "開啟縮放選單",
@@ -460,7 +467,7 @@ const DEFAULT_LABELS = {
 const FileViewer = React.forwardRef(function FileViewer2({
   files,
   initialIndex = 0,
-  open,
+  open: openProp,
   defaultOpen,
   onOpenChange,
   index: indexProp,
@@ -471,12 +478,28 @@ const FileViewer = React.forwardRef(function FileViewer2({
   allowDownload = true,
   onDownload,
   labels: labelsOverride,
+  className,
+  onOpenAutoFocus,
   ...props
 }, ref) {
   const labels = React.useMemo(
     () => ({ ...DEFAULT_LABELS, ...labelsOverride }),
     [labelsOverride]
   );
+  const [open, setOpen] = useControllable({
+    value: openProp,
+    defaultValue: defaultOpen ?? false,
+    onChange: onOpenChange
+  });
+  const contentRef = React.useRef(null);
+  const setContentRef = React.useCallback(
+    (node) => {
+      contentRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
   const [internalIndex, setInternalIndex] = React.useState(initialIndex);
   const activeIndex = indexProp ?? internalIndex;
   const setIndex = React.useCallback(
@@ -493,6 +516,8 @@ const FileViewer = React.forwardRef(function FileViewer2({
     }
   }, [open, initialIndex, files.length, indexProp]);
   const [infoOpen, setInfoOpen] = React.useState(false);
+  const handleInfoToggle = React.useCallback(() => setInfoOpen((o) => !o), []);
+  const handleInfoClose = React.useCallback(() => setInfoOpen(false), []);
   const [zoom, setZoom] = React.useState(100);
   const [fitRequest, setFitRequest] = React.useState(null);
   const [capabilities, setCapabilities] = React.useState({
@@ -577,13 +602,14 @@ const FileViewer = React.forwardRef(function FileViewer2({
   }
   const showFilmstripResolved = showFilmstrip && files.length > 1;
   const showArrows = files.length > 1;
-  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { open, defaultOpen, onOpenChange, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
     /* @__PURE__ */ jsx(
       DialogPrimitive.Overlay,
       {
         "data-theme": "dark",
         className: cn(
           "fixed inset-0 z-50 bg-overlay",
+          surfaceMotion,
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
           "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
         )
@@ -592,15 +618,25 @@ const FileViewer = React.forwardRef(function FileViewer2({
     /* @__PURE__ */ jsx(
       DialogPrimitive.Content,
       {
-        ref,
+        ref: setContentRef,
+        ...props,
+        tabIndex: -1,
         className: cn(
           // Edge-to-edge fullscreen,無 inset / 無 radius(與一般 Dialog 差別的所在)
           "fixed inset-0 z-50 outline-none",
+          surfaceMotion,
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
-          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          className
         ),
-        onOpenAutoFocus: (e) => e.preventDefault(),
-        ...props,
+        onOpenAutoFocus: (event) => {
+          var _a;
+          onOpenAutoFocus == null ? void 0 : onOpenAutoFocus(event);
+          if (event.defaultPrevented) return;
+          event.preventDefault();
+          (_a = contentRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
+        },
         children: /* @__PURE__ */ jsxs(
           "div",
           {
@@ -620,10 +656,10 @@ const FileViewer = React.forwardRef(function FileViewer2({
                   onZoomChange: setZoom,
                   onFit: handleFit,
                   infoOpen,
-                  onInfoToggle: () => setInfoOpen((o) => !o),
+                  onInfoToggle: handleInfoToggle,
                   onDownload: handleDownload,
                   allowDownload,
-                  onClose: () => onOpenChange == null ? void 0 : onOpenChange(false),
+                  onClose: () => setOpen(false),
                   labels
                 }
               ),
@@ -642,7 +678,7 @@ const FileViewer = React.forwardRef(function FileViewer2({
                         const r = img.getBoundingClientRect();
                         if (e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom) return;
                       }
-                      onOpenChange == null ? void 0 : onOpenChange(false);
+                      setOpen(false);
                     },
                     children: [
                       showArrows && activeIndex > 0 && /* @__PURE__ */ jsx(
@@ -650,7 +686,7 @@ const FileViewer = React.forwardRef(function FileViewer2({
                         {
                           className: cn(
                             "absolute left-[var(--layout-space-loose)] top-1/2 -translate-y-1/2 z-10",
-                            "transition-opacity duration-150",
+                            "transition-opacity duration-150 motion-reduce:duration-0",
                             // armVisible state 控制,或 focus-within 時 a11y 強制顯示
                             armVisible ? "opacity-100" : "opacity-0 pointer-events-none",
                             "focus-within:opacity-100 focus-within:pointer-events-auto"
@@ -668,7 +704,7 @@ const FileViewer = React.forwardRef(function FileViewer2({
                           )
                         }
                       ),
-                      /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsx(React.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
                         Renderer.component,
                         {
                           file,
@@ -677,13 +713,13 @@ const FileViewer = React.forwardRef(function FileViewer2({
                           fitRequest,
                           onCapabilitiesChange: setCapabilities
                         }
-                      ) }),
+                      ) }) }),
                       showArrows && activeIndex < files.length - 1 && /* @__PURE__ */ jsx(
                         "div",
                         {
                           className: cn(
                             "absolute right-[var(--layout-space-loose)] top-1/2 -translate-y-1/2 z-10",
-                            "transition-opacity duration-150",
+                            "transition-opacity duration-150 motion-reduce:duration-0",
                             armVisible ? "opacity-100" : "opacity-0 pointer-events-none",
                             "focus-within:opacity-100 focus-within:pointer-events-auto"
                           ),
@@ -709,7 +745,7 @@ const FileViewer = React.forwardRef(function FileViewer2({
                     file,
                     readOnly,
                     onDescriptionChange,
-                    onClose: () => setInfoOpen(false),
+                    onClose: handleInfoClose,
                     labels
                   }
                 )
@@ -737,9 +773,11 @@ const fileViewerMeta = {
   // non-family composite / overlay / layout
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // 'selected' = 縮圖列當前頁持續選中(bg-neutral-selected);'active' 移除 — 全檔無按壓視覺
+  // (工具列按壓屬內嵌 Button meta;2026-07-07 詞彙統一 DS-wide 交叉掃補修)。
+  states: ["default", "hover", "selected", "focus-visible", "disabled"],
   tokens: {
-    bg: ["bg-muted", "bg-surface", "bg-surface-raised"],
+    bg: ["bg-muted", "bg-neutral-selected", "bg-overlay", "bg-surface-raised"],
     fg: ["text-fg-muted", "text-foreground"],
     ring: ["ring-primary", "ring-ring"]
   }