@50arms/ui 0.0.0-stage → 35.1.0

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

@@ -0,0 +1,47 @@
+import { jsxs as s, Fragment as p, jsx as l } from "react/jsx-runtime";
+import { useState as m } from "react";
+import { Button as f } from "../Button.js";
+import { Input as d } from "../Input.js";
+import { useUiStrings as g } from "../../lib/i18n/provider.js";
+function P({ onJump: u, noMatch: c }) {
+  const r = g().fileViewer, [n, i] = m(""), [o, t] = m(null), a = () => {
+    const e = n.trim();
+    if (!/^\d+$/.test(e)) {
+      t(r.enterPageNumber);
+      return;
+    }
+    if (!u(Number(e))) {
+      t(c(e));
+      return;
+    }
+    t(null), i("");
+  };
+  return /* @__PURE__ */ s(p, { children: [
+    /* @__PURE__ */ s("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ l(
+        d,
+        {
+          "aria-label": r.jumpToPage,
+          size: "sm",
+          inputMode: "numeric",
+          autoComplete: "off",
+          placeholder: r.pageNumberPlaceholder,
+          value: n,
+          onChange: (e) => {
+            i(e.target.value.replace(/\D/g, "")), t(null);
+          },
+          onKeyDown: (e) => {
+            e.key === "Enter" && (e.preventDefault(), a());
+          },
+          className: "flex-1"
+        }
+      ),
+      /* @__PURE__ */ l(f, { variant: "outline", size: "xs", disabled: !n.trim(), onClick: a, children: r.go })
+    ] }),
+    o ? /* @__PURE__ */ l("p", { className: "text-2xs text-danger-text", children: o }) : null
+  ] });
+}
+export {
+  P as PageNumberJumpField
+};
+//# sourceMappingURL=PageNumberJumpField.js.map

package/dist/components/file-viewer/PageNumberJumpField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageNumberJumpField.js","sources":["../../../src/components/file-viewer/PageNumberJumpField.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport { Button } from \"../Button\";\nimport { Input } from \"../Input\";\n\n/* ============================================================================\n   PAGE NUMBER JUMP FIELD (DX-4398, ported from gpt-manager's SG-833 component)\n\n   \"Type a page number, press Go or Enter\" — the input, the Go button and ONE\n   inline error line. Generic over \"a page number\": it never learns what a page\n   or a document is, so the file viewer's popover and a host's own inline picker\n   (gpt-manager's `PageCitationPicker`) share it instead of each hand-rolling the\n   interaction. Each caller keeps its own chrome, its own match logic and its own\n   error wording.\n\n   A TEXT INPUT WITH `inputMode=\"numeric\"`, NOT `type=\"number\"`: `NumberInput`'s\n   header rules that out (spinners and scroll-to-change are for adjusting a\n   quantity, not typing a destination). Digits only is enforced on every\n   keystroke, so a letter never appears in the field.\n   ========================================================================= */\n\nexport interface PageNumberJumpFieldProps {\n  /** Attempts the jump for the typed number; returns whether a match was found.\n      `false` renders `noMatch(typed)` as the inline error. */\n  onJump: (pageNumber: number) => boolean;\n  /** The error line for a page number that did not match, phrased by the caller —\n      one names the document (\"No page 999 in report.pdf.\"), another does not. */\n  noMatch: (typed: string) => string;\n}\n\nexport function PageNumberJumpField({ onJump, noMatch }: PageNumberJumpFieldProps) {\n  const strings = useUiStrings().fileViewer;\n  const [value, setValue] = useState(\"\");\n  const [error, setError] = useState<string | null>(null);\n\n  const submit = () => {\n    const typed = value.trim();\n    if (!/^\\d+$/.test(typed)) {\n      setError(strings.enterPageNumber);\n      return;\n    }\n    if (!onJump(Number(typed))) {\n      setError(noMatch(typed));\n      return;\n    }\n    setError(null);\n    setValue(\"\");\n  };\n\n  return (\n    <>\n      <div className=\"flex items-center gap-1.5\">\n        <Input\n          aria-label={strings.jumpToPage}\n          size=\"sm\"\n          inputMode=\"numeric\"\n          autoComplete=\"off\"\n          placeholder={strings.pageNumberPlaceholder}\n          value={value}\n          onChange={(event) => {\n            setValue(event.target.value.replace(/\\D/g, \"\"));\n            setError(null);\n          }}\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              event.preventDefault();\n              submit();\n            }\n          }}\n          className=\"flex-1\"\n        />\n        <Button variant=\"outline\" size=\"xs\" disabled={!value.trim()} onClick={submit}>\n          {strings.go}\n        </Button>\n      </div>\n      {error ? <p className=\"text-2xs text-danger-text\">{error}</p> : null}\n    </>\n  );\n}\n"],"names":["PageNumberJumpField","onJump","noMatch","strings","useUiStrings","value","setValue","useState","error","setError","submit","typed","jsxs","Fragment","jsx","Input","event","Button"],"mappings":";;;;;AA8BO,SAASA,EAAoB,EAAE,QAAAC,GAAQ,SAAAC,KAAqC;AACjF,QAAMC,IAAUC,IAAe,YACzB,CAACC,GAAOC,CAAQ,IAAIC,EAAS,EAAE,GAC/B,CAACC,GAAOC,CAAQ,IAAIF,EAAwB,IAAI,GAEhDG,IAAS,MAAM;AACnB,UAAMC,IAAQN,EAAM,KAAA;AACpB,QAAI,CAAC,QAAQ,KAAKM,CAAK,GAAG;AACxB,MAAAF,EAASN,EAAQ,eAAe;AAChC;AAAA,IACF;AACA,QAAI,CAACF,EAAO,OAAOU,CAAK,CAAC,GAAG;AAC1B,MAAAF,EAASP,EAAQS,CAAK,CAAC;AACvB;AAAA,IACF;AACA,IAAAF,EAAS,IAAI,GACbH,EAAS,EAAE;AAAA,EACb;AAEA,SACE,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,MAAA,gBAAAE;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,cAAYZ,EAAQ;AAAA,UACpB,MAAK;AAAA,UACL,WAAU;AAAA,UACV,cAAa;AAAA,UACb,aAAaA,EAAQ;AAAA,UACrB,OAAAE;AAAA,UACA,UAAU,CAACW,MAAU;AACnB,YAAAV,EAASU,EAAM,OAAO,MAAM,QAAQ,OAAO,EAAE,CAAC,GAC9CP,EAAS,IAAI;AAAA,UACf;AAAA,UACA,WAAW,CAACO,MAAU;AACpB,YAAIA,EAAM,QAAQ,YAChBA,EAAM,eAAA,GACNN,EAAA;AAAA,UAEJ;AAAA,UACA,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAEZ,gBAAAI,EAACG,GAAA,EAAO,SAAQ,WAAU,MAAK,MAAK,UAAU,CAACZ,EAAM,KAAA,GAAQ,SAASK,GACnE,YAAQ,GAAA,CACX;AAAA,IAAA,GACF;AAAA,IACCF,IAAQ,gBAAAM,EAAC,KAAA,EAAE,WAAU,6BAA6B,aAAM,IAAO;AAAA,EAAA,GAClE;AAEJ;"}

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

@@ -0,0 +1,122 @@
+import { jsxs as p, jsx as e, Fragment as j } from "react/jsx-runtime";
+import { useMemo as O, useState as T } from "react";
+import { formatPercent as M } from "../../lib/intl-cache.js";
+import { Button as v } from "../Button.js";
+import { Icon as s } from "../Icon.js";
+import { IconButton as a } from "../IconButton.js";
+import { Popover as J } from "../Popover.js";
+import { PageNumberJumpField as y } from "./PageNumberJumpField.js";
+import { useUiStrings as b, useUiLocale as V } from "../../lib/i18n/provider.js";
+import { useNumberFormat as k } from "../../lib/i18n/number-format.js";
+function Q({ frame: n, onGo: d }) {
+  const l = b().fileViewer, i = k(), m = n.page?.number;
+  return /* @__PURE__ */ p("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ e(
+      a,
+      {
+        size: "xs",
+        icon: /* @__PURE__ */ e(s, { name: "chevron-left", size: "xs" }),
+        label: l.previous,
+        disabledReason: n.index === 0 ? l.firstOne : void 0,
+        onClick: () => d(n.index - 1)
+      }
+    ),
+    /* @__PURE__ */ e("span", { className: "min-w-20 text-center text-2xs tabular-nums text-secondary", children: m == null ? l.position(i(n.index + 1), i(n.total)) : l.pagePosition(i(m), i(n.index + 1), i(n.total)) }),
+    /* @__PURE__ */ e(
+      a,
+      {
+        size: "xs",
+        icon: /* @__PURE__ */ e(s, { name: "chevron-right", size: "xs" }),
+        label: l.next,
+        disabledReason: n.index >= n.total - 1 ? l.lastOne : void 0,
+        onClick: () => d(n.index + 1)
+      }
+    )
+  ] });
+}
+function X({ frame: n, frames: d, go: l, zoom: i, zoomable: m, markLabel: g, headerActions: C, onDownload: u, labelled: h = !1 }) {
+  const t = b().fileViewer, N = V(), w = k(), r = O(
+    () => d.filter((o) => o.page?.marked).map((o) => o.index),
+    [d]
+  ), f = (o) => {
+    if (r.length === 0) return;
+    const c = o === 1 ? r.find((x) => x > n.index) ?? r[0] : [...r].reverse().find((x) => x < n.index) ?? r[r.length - 1];
+    c !== void 0 && l(c);
+  }, F = (o) => {
+    const c = d.find((x) => x.file.id === n.file.id && x.page?.number === o);
+    return c ? (l(c.index), !0) : !1;
+  }, P = (n.file.pages?.length ?? 0) > 1, [I, z] = T(!1);
+  return /* @__PURE__ */ p(j, { children: [
+    r.length > 0 ? /* @__PURE__ */ p("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ e(
+        a,
+        {
+          size: "xs",
+          icon: /* @__PURE__ */ e(s, { name: "chevrons-left", size: "xs" }),
+          label: t.previousMark(g),
+          onClick: () => f(-1)
+        }
+      ),
+      /* @__PURE__ */ e("span", { className: "min-w-16 text-center text-2xs tabular-nums text-tertiary", children: t.markCount(w(r.length), g) }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          size: "xs",
+          icon: /* @__PURE__ */ e(s, { name: "chevrons-right", size: "xs" }),
+          label: t.nextMark(g),
+          onClick: () => f(1)
+        }
+      )
+    ] }) : null,
+    P ? /* @__PURE__ */ e(
+      J,
+      {
+        open: I,
+        onOpenChange: z,
+        align: "end",
+        "aria-label": t.jumpToPage,
+        trigger: h ? /* @__PURE__ */ e(v, { size: "xs", variant: "ghost", leadingIcon: /* @__PURE__ */ e(s, { name: "list-ordered", size: "xs" }), children: t.jumpToPage }) : /* @__PURE__ */ e(a, { size: "xs", icon: /* @__PURE__ */ e(s, { name: "list-ordered", size: "xs" }), label: t.jumpToPage }),
+        children: /* @__PURE__ */ e("div", { className: "flex w-52 flex-col gap-1.5 p-2", children: /* @__PURE__ */ e(
+          y,
+          {
+            onJump: (o) => {
+              const c = F(o);
+              return c && z(!1), c;
+            },
+            noMatch: t.noPageInFile
+          }
+        ) })
+      }
+    ) : null,
+    m ? /* @__PURE__ */ p("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ e(a, { size: "xs", icon: /* @__PURE__ */ e(s, { name: "zoom-out", size: "xs" }), label: t.zoomOut, onClick: i.zoomOut }),
+      /* @__PURE__ */ e("span", { className: "min-w-12 text-center text-2xs tabular-nums text-tertiary", children: i.percent === null ? "—" : M(i.percent, N) }),
+      /* @__PURE__ */ e(a, { size: "xs", icon: /* @__PURE__ */ e(s, { name: "zoom-in", size: "xs" }), label: t.zoomIn, onClick: i.zoomIn }),
+      i.canToggle ? /* @__PURE__ */ e(
+        a,
+        {
+          size: "xs",
+          icon: /* @__PURE__ */ e(s, { name: i.atFit ? "scan" : "maximize", size: "xs" }),
+          label: n.page ? t.fitWidth : t.fitWindow,
+          "aria-pressed": i.atFit,
+          onClick: () => i.atFit ? i.toggleActual() : i.reset()
+        }
+      ) : null
+    ] }) : null,
+    C?.(n),
+    u && h ? /* @__PURE__ */ e(v, { size: "xs", variant: "ghost", leadingIcon: /* @__PURE__ */ e(s, { name: "download", size: "xs" }), onClick: () => u(n.file), children: t.download }) : u ? /* @__PURE__ */ e(
+      a,
+      {
+        size: "xs",
+        icon: /* @__PURE__ */ e(s, { name: "download", size: "xs" }),
+        label: t.downloadFile(n.file.name),
+        onClick: () => u(n.file)
+      }
+    ) : null
+  ] });
+}
+export {
+  Q as FrameNav,
+  X as ViewerControls
+};
+//# sourceMappingURL=ViewerControls.js.map

package/dist/components/file-viewer/ViewerControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewerControls.js","sources":["../../../src/components/file-viewer/ViewerControls.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport { useNumberFormat, useUiLocale, useUiStrings } from \"../../lib/i18n\";\nimport { formatPercent } from \"../../lib/intl-cache\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { IconButton } from \"../IconButton\";\nimport { Popover } from \"../Popover\";\nimport { PageNumberJumpField } from \"./PageNumberJumpField\";\nimport type { ViewerFile, ViewerFrame } from \"./types\";\nimport type { useViewerZoom } from \"./use-viewer-zoom\";\n\n/* ============================================================================\n   VIEWER CONTROLS (DX-4398)\n\n   The header's controls. `FrameNav` (previous, next, \"3 of 7\") is always inline:\n   it is the one primary control and the thing a phone most needs.\n   `ViewerControls` is everything else — mark navigation, jump to a page number,\n   zoom and fit, the host's `headerActions`, Download — and is ONE React subtree\n   rendered in exactly one place at a time: inline from `lg` up, inside the\n   overflow Popover below it (see `FileViewer`). It has to be a child of that\n   Popover, not portalled into it from outside: a Popover or Menu inside it\n   (the jump field, one the host puts in `headerActions`) is only a child of the\n   overflow popover for Base UI — and so only keeps it open — if it is a child in\n   React's tree.\n   ========================================================================= */\n\nexport function FrameNav({ frame, onGo }: { frame: ViewerFrame; onGo: (next: number) => void }) {\n  const strings = useUiStrings().fileViewer;\n  const fmt = useNumberFormat();\n  const number = frame.page?.number;\n  return (\n    <div className=\"flex items-center gap-1\">\n      <IconButton\n        size=\"xs\"\n        icon={<Icon name=\"chevron-left\" size=\"xs\" />}\n        label={strings.previous}\n        disabledReason={frame.index === 0 ? strings.firstOne : undefined}\n        onClick={() => onGo(frame.index - 1)}\n      />\n      <span className=\"min-w-20 text-center text-2xs tabular-nums text-secondary\">\n        {number === null || number === undefined\n          ? strings.position(fmt(frame.index + 1), fmt(frame.total))\n          : strings.pagePosition(fmt(number), fmt(frame.index + 1), fmt(frame.total))}\n      </span>\n      <IconButton\n        size=\"xs\"\n        icon={<Icon name=\"chevron-right\" size=\"xs\" />}\n        label={strings.next}\n        disabledReason={frame.index >= frame.total - 1 ? strings.lastOne : undefined}\n        onClick={() => onGo(frame.index + 1)}\n      />\n    </div>\n  );\n}\n\nexport interface ViewerControlsProps {\n  frame: ViewerFrame;\n  frames: ViewerFrame[];\n  go: (index: number) => void;\n  zoom: ReturnType<typeof useViewerZoom>;\n  zoomable: boolean;\n  markLabel: string;\n  headerActions?: (frame: ViewerFrame) => ReactNode;\n  onDownload?: (file: ViewerFile) => void;\n  /** In the overflow popover: the entries say what they are, not just draw it. */\n  labelled?: boolean;\n}\n\nexport function ViewerControls({ frame, frames, go, zoom, zoomable, markLabel, headerActions, onDownload, labelled = false }: ViewerControlsProps) {\n  const strings = useUiStrings().fileViewer;\n  const locale = useUiLocale();\n  const fmt = useNumberFormat();\n  const markedIndexes = useMemo(\n    () => frames.filter((candidate) => candidate.page?.marked).map((candidate) => candidate.index),\n    [frames],\n  );\n  const goToMark = (direction: 1 | -1) => {\n    if (markedIndexes.length === 0) return;\n    const ahead =\n      direction === 1\n        ? (markedIndexes.find((at) => at > frame.index) ?? markedIndexes[0])\n        : ([...markedIndexes].reverse().find((at) => at < frame.index) ?? markedIndexes[markedIndexes.length - 1]);\n    if (ahead !== undefined) go(ahead);\n  };\n\n  /* Jump to a printed page number, inside the CURRENT file only. */\n  const jumpToPageNumber = (pageNumber: number): boolean => {\n    const target = frames.find((candidate) => candidate.file.id === frame.file.id && candidate.page?.number === pageNumber);\n    if (!target) return false;\n    go(target.index);\n    return true;\n  };\n  const canJump = (frame.file.pages?.length ?? 0) > 1;\n  const [jumpOpen, setJumpOpen] = useState(false);\n\n  return (\n    <>\n      {markedIndexes.length > 0 ? (\n        <div className=\"flex items-center gap-1\">\n          <IconButton\n            size=\"xs\"\n            icon={<Icon name=\"chevrons-left\" size=\"xs\" />}\n            label={strings.previousMark(markLabel)}\n            onClick={() => goToMark(-1)}\n          />\n          <span className=\"min-w-16 text-center text-2xs tabular-nums text-tertiary\">\n            {strings.markCount(fmt(markedIndexes.length), markLabel)}\n          </span>\n          <IconButton\n            size=\"xs\"\n            icon={<Icon name=\"chevrons-right\" size=\"xs\" />}\n            label={strings.nextMark(markLabel)}\n            onClick={() => goToMark(1)}\n          />\n        </div>\n      ) : null}\n      {canJump ? (\n        <Popover\n          open={jumpOpen}\n          onOpenChange={setJumpOpen}\n          align=\"end\"\n          aria-label={strings.jumpToPage}\n          trigger={\n            labelled ? (\n              <Button size=\"xs\" variant=\"ghost\" leadingIcon={<Icon name=\"list-ordered\" size=\"xs\" />}>\n                {strings.jumpToPage}\n              </Button>\n            ) : (\n              <IconButton size=\"xs\" icon={<Icon name=\"list-ordered\" size=\"xs\" />} label={strings.jumpToPage} />\n            )\n          }\n        >\n          <div className=\"flex w-52 flex-col gap-1.5 p-2\">\n            <PageNumberJumpField\n              onJump={(pageNumber) => {\n                const found = jumpToPageNumber(pageNumber);\n                if (found) setJumpOpen(false);\n                return found;\n              }}\n              noMatch={strings.noPageInFile}\n            />\n          </div>\n        </Popover>\n      ) : null}\n      {zoomable ? (\n        <div className=\"flex items-center gap-1\">\n          <IconButton size=\"xs\" icon={<Icon name=\"zoom-out\" size=\"xs\" />} label={strings.zoomOut} onClick={zoom.zoomOut} />\n          <span className=\"min-w-12 text-center text-2xs tabular-nums text-tertiary\">\n            {zoom.percent === null ? \"—\" : formatPercent(zoom.percent, locale)}\n          </span>\n          <IconButton size=\"xs\" icon={<Icon name=\"zoom-in\" size=\"xs\" />} label={strings.zoomIn} onClick={zoom.zoomIn} />\n          {zoom.canToggle ? (\n            <IconButton\n              size=\"xs\"\n              icon={<Icon name={zoom.atFit ? \"scan\" : \"maximize\"} size=\"xs\" />}\n              label={frame.page ? strings.fitWidth : strings.fitWindow}\n              aria-pressed={zoom.atFit}\n              onClick={() => (zoom.atFit ? zoom.toggleActual() : zoom.reset())}\n            />\n          ) : null}\n        </div>\n      ) : null}\n      {headerActions?.(frame)}\n      {onDownload && labelled ? (\n        <Button size=\"xs\" variant=\"ghost\" leadingIcon={<Icon name=\"download\" size=\"xs\" />} onClick={() => onDownload(frame.file)}>\n          {strings.download}\n        </Button>\n      ) : onDownload ? (\n        <IconButton\n          size=\"xs\"\n          icon={<Icon name=\"download\" size=\"xs\" />}\n          label={strings.downloadFile(frame.file.name)}\n          onClick={() => onDownload(frame.file)}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"names":["FrameNav","frame","onGo","strings","useUiStrings","fmt","useNumberFormat","number","jsxs","jsx","IconButton","Icon","ViewerControls","frames","go","zoom","zoomable","markLabel","headerActions","onDownload","labelled","locale","useUiLocale","markedIndexes","useMemo","candidate","goToMark","direction","ahead","at","jumpToPageNumber","pageNumber","target","canJump","jumpOpen","setJumpOpen","useState","Fragment","Popover","Button","PageNumberJumpField","found","formatPercent"],"mappings":"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"}

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

@@ -0,0 +1,57 @@
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import { useRef as p, useEffect as g } from "react";
+import { cn as m } from "../../lib/cn.js";
+import { TileMedia as x } from "../chat/Attachment.js";
+import { frameLabel as d, frameKeyOf as h } from "./frames.js";
+import { useUiStrings as w } from "../../lib/i18n/provider.js";
+import { useNumberFormat as v } from "../../lib/i18n/number-format.js";
+function N(s) {
+  const { file: t, page: n } = s;
+  return n ? { id: n.id, name: t.name, thumbnailUrl: n.thumbUrl ?? n.url } : t;
+}
+function F({ frames: s, index: t, markLabel: n, onSelect: b, hidden: f }) {
+  const i = w().fileViewer, a = v(), c = p(null);
+  return g(() => {
+    c.current?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, [t]), /* @__PURE__ */ r(
+    "nav",
+    {
+      "aria-label": i.filesInViewer,
+      hidden: f,
+      "data-viewer-rail": !0,
+      className: m(
+        "flex-none overflow-auto border-border-subtle bg-surface p-2",
+        "max-sm:order-last max-sm:border-t sm:w-36 sm:border-r"
+      ),
+      children: /* @__PURE__ */ r("ol", { className: "flex gap-2 sm:flex-col", children: s.map((e) => {
+        const o = e.index === t, l = e.page?.marked === !0;
+        return /* @__PURE__ */ r("li", { ref: o ? c : null, className: "flex-none", children: /* @__PURE__ */ u(
+          "button",
+          {
+            type: "button",
+            "aria-current": o ? "true" : void 0,
+            "aria-label": l ? i.markedFrame(d(e, i, a), n) : d(e, i, a),
+            "data-marked": l ? "true" : void 0,
+            onClick: () => b(e.index),
+            className: m(
+              "relative block h-20 w-24 cursor-pointer overflow-hidden rounded-md border text-left outline-none sm:h-28 sm:w-full",
+              "focus-visible:ring-2 focus-visible:ring-focus-ring",
+              o ? "border-accent ring-2 ring-accent" : l ? "border-warning" : "border-border"
+            ),
+            children: [
+              /* @__PURE__ */ r("span", { className: "absolute inset-0 grid place-items-center bg-surface-inset", children: /* @__PURE__ */ r(x, { file: N(e), iconSize: "lg", className: "size-full object-cover object-top" }) }),
+              /* @__PURE__ */ u("span", { className: "absolute inset-x-0 bottom-0 flex items-center justify-between gap-1 bg-scrim px-1 py-0.5 text-2xs text-inverse", children: [
+                /* @__PURE__ */ r("span", { className: "truncate", children: e.page ? e.page.number ?? "—" : e.file.name }),
+                l ? /* @__PURE__ */ r("span", { "aria-hidden": "true", className: "size-1.5 flex-none rounded-full bg-warning" }) : null
+              ] })
+            ]
+          }
+        ) }, h(e));
+      }) })
+    }
+  );
+}
+export {
+  F as ViewerRail
+};
+//# sourceMappingURL=ViewerRail.js.map

package/dist/components/file-viewer/ViewerRail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewerRail.js","sources":["../../../src/components/file-viewer/ViewerRail.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useNumberFormat, useUiStrings } from \"../../lib/i18n\";\nimport { TileMedia } from \"../chat/Attachment\";\nimport { frameKeyOf, frameLabel } from \"./frames\";\nimport type { ChatFile } from \"../chat/types\";\nimport type { ViewerFrame } from \"./types\";\n\n/* ============================================================================\n   VIEWER RAIL (DX-4398)\n\n   The thumbnail strip: a column at the left from `sm` up, a horizontal strip\n   under the stage below it. It is the same element at every width — only its\n   flow direction changes in CSS — so the collapse toggle controls one thing and\n   a phone can still reach any frame.\n\n   MARKED FRAMES GET A WARNING BORDER AND A DOT; everything else is quiet. On a\n   434-page record that contrast IS the navigation: the reader is looking for\n   five pages and the rail has to make those five findable without scrolling for\n   them (which is also why the header carries previous/next-mark controls).\n\n   THUMBNAILS ARE `TileMedia`, the one answer the attachment tile already gives\n   (a picture, a video's still frame, or the type icon) — never `FileCover` or\n   `VideoPlayer`, whose `<video controls>` inside a `<button>` is invalid. Every\n   picture is `loading=\"lazy\"`, so opening a long document fetches the handful of\n   thumbnails actually on screen rather than four hundred.\n   ========================================================================= */\n\n/** What `TileMedia` needs to draw this frame's thumbnail. A page has no file of\n    its own, so it is drawn as a picture of its (smaller) render. */\nfunction thumbnailOf(frame: ViewerFrame): ChatFile {\n  const { file, page } = frame;\n  if (!page) return file;\n  return { id: page.id, name: file.name, thumbnailUrl: page.thumbUrl ?? page.url };\n}\n\nexport interface ViewerRailProps {\n  frames: ViewerFrame[];\n  index: number;\n  markLabel: string;\n  onSelect: (index: number) => void;\n  /** Collapsed by the header toggle. Stays in the DOM, so a host can re-open it. */\n  hidden: boolean;\n}\n\nexport function ViewerRail({ frames, index, markLabel, onSelect, hidden }: ViewerRailProps) {\n  const strings = useUiStrings().fileViewer;\n  const fmt = useNumberFormat();\n  const activeRef = useRef<HTMLLIElement | null>(null);\n\n  useEffect(() => {\n    activeRef.current?.scrollIntoView({ block: \"nearest\", inline: \"nearest\" });\n  }, [index]);\n\n  return (\n    <nav\n      aria-label={strings.filesInViewer}\n      hidden={hidden}\n      data-viewer-rail\n      className={cn(\n        \"flex-none overflow-auto border-border-subtle bg-surface p-2\",\n        \"max-sm:order-last max-sm:border-t sm:w-36 sm:border-r\",\n      )}\n    >\n      <ol className=\"flex gap-2 sm:flex-col\">\n        {frames.map((frame) => {\n          const current = frame.index === index;\n          const marked = frame.page?.marked === true;\n          return (\n            <li key={frameKeyOf(frame)} ref={current ? activeRef : null} className=\"flex-none\">\n              {/* UI-LIBRARY-CHECK: considered the `Attachment` tile with `selected`; it does\n                  not fit. It is a fixed 4:3 tile for a FILE (a name caption, download and\n                  remove actions, a preview trigger of its own) while a rail item is one\n                  FRAME, which for a page is not a file at all; the rail needs\n                  `aria-current` on the control itself and a mark ring the tile has no\n                  state for. The picture is still `TileMedia`, the one thing they share. */}\n              <button\n                type=\"button\"\n                aria-current={current ? \"true\" : undefined}\n                aria-label={marked ? strings.markedFrame(frameLabel(frame, strings, fmt), markLabel) : frameLabel(frame, strings, fmt)}\n                data-marked={marked ? \"true\" : undefined}\n                onClick={() => onSelect(frame.index)}\n                className={cn(\n                  \"relative block h-20 w-24 cursor-pointer overflow-hidden rounded-md border text-left outline-none sm:h-28 sm:w-full\",\n                  \"focus-visible:ring-2 focus-visible:ring-focus-ring\",\n                  current ? \"border-accent ring-2 ring-accent\" : marked ? \"border-warning\" : \"border-border\",\n                )}\n              >\n                <span className=\"absolute inset-0 grid place-items-center bg-surface-inset\">\n                  <TileMedia file={thumbnailOf(frame)} iconSize=\"lg\" className=\"size-full object-cover object-top\" />\n                </span>\n                <span className=\"absolute inset-x-0 bottom-0 flex items-center justify-between gap-1 bg-scrim px-1 py-0.5 text-2xs text-inverse\">\n                  <span className=\"truncate\">{frame.page ? (frame.page.number ?? \"—\") : frame.file.name}</span>\n                  {marked ? <span aria-hidden=\"true\" className=\"size-1.5 flex-none rounded-full bg-warning\" /> : null}\n                </span>\n              </button>\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"names":["thumbnailOf","frame","file","page","ViewerRail","frames","index","markLabel","onSelect","hidden","strings","useUiStrings","fmt","useNumberFormat","activeRef","useRef","useEffect","jsx","cn","current","marked","jsxs","frameLabel","TileMedia","frameKeyOf"],"mappings":";;;;;;;AA8BA,SAASA,EAAYC,GAA8B;AACjD,QAAM,EAAE,MAAAC,GAAM,MAAAC,EAAA,IAASF;AACvB,SAAKE,IACE,EAAE,IAAIA,EAAK,IAAI,MAAMD,EAAK,MAAM,cAAcC,EAAK,YAAYA,EAAK,IAAA,IADzDD;AAEpB;AAWO,SAASE,EAAW,EAAE,QAAAC,GAAQ,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,QAAAC,KAA2B;AAC1F,QAAMC,IAAUC,IAAe,YACzBC,IAAMC,EAAA,GACNC,IAAYC,EAA6B,IAAI;AAEnD,SAAAC,EAAU,MAAM;AACd,IAAAF,EAAU,SAAS,eAAe,EAAE,OAAO,WAAW,QAAQ,WAAW;AAAA,EAC3E,GAAG,CAACR,CAAK,CAAC,GAGR,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAYP,EAAQ;AAAA,MACpB,QAAAD;AAAA,MACA,oBAAgB;AAAA,MAChB,WAAWS;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,4BAAC,MAAA,EAAG,WAAU,0BACX,UAAAb,EAAO,IAAI,CAACJ,MAAU;AACrB,cAAMkB,IAAUlB,EAAM,UAAUK,GAC1Bc,IAASnB,EAAM,MAAM,WAAW;AACtC,iCACG,MAAA,EAA2B,KAAKkB,IAAUL,IAAY,MAAM,WAAU,aAOrE,UAAA,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,gBAAcF,IAAU,SAAS;AAAA,YACjC,cAAYC,IAASV,EAAQ,YAAYY,EAAWrB,GAAOS,GAASE,CAAG,GAAGL,CAAS,IAAIe,EAAWrB,GAAOS,GAASE,CAAG;AAAA,YACrH,eAAaQ,IAAS,SAAS;AAAA,YAC/B,SAAS,MAAMZ,EAASP,EAAM,KAAK;AAAA,YACnC,WAAWiB;AAAA,cACT;AAAA,cACA;AAAA,cACAC,IAAU,qCAAqCC,IAAS,mBAAmB;AAAA,YAAA;AAAA,YAG7E,UAAA;AAAA,cAAA,gBAAAH,EAAC,QAAA,EAAK,WAAU,6DACd,UAAA,gBAAAA,EAACM,GAAA,EAAU,MAAMvB,EAAYC,CAAK,GAAG,UAAS,MAAK,WAAU,qCAAoC,GACnG;AAAA,cACA,gBAAAoB,EAAC,QAAA,EAAK,WAAU,kHACd,UAAA;AAAA,gBAAA,gBAAAJ,EAAC,QAAA,EAAK,WAAU,YAAY,UAAAhB,EAAM,OAAQA,EAAM,KAAK,UAAU,MAAOA,EAAM,KAAK,MAAK;AAAA,gBACrFmB,IAAS,gBAAAH,EAAC,QAAA,EAAK,eAAY,QAAO,WAAU,8CAA6C,IAAK;AAAA,cAAA,EAAA,CACjG;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,KAzBKO,EAAWvB,CAAK,CA2BzB;AAAA,MAEJ,CAAC,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,112 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { useState as z } from "react";
+import { formatBytes as F } from "../../lib/format.js";
+import { isInteractiveTarget as I } from "../../lib/interactive-target.js";
+import { Button as x } from "../Button.js";
+import { Icon as u } from "../Icon.js";
+import { Spinner as V } from "../Spinner.js";
+import { VideoPlayer as S } from "../VideoPlayer.js";
+import { isImageFile as B, isVideoFile as C, fileIconFor as K } from "../chat/file-icon.js";
+import { frameKeyOf as T, frameLabel as j } from "./frames.js";
+import { useUiStrings as h, useUiLocale as L } from "../../lib/i18n/provider.js";
+import { useNumberFormat as U } from "../../lib/i18n/number-format.js";
+function G(t, l) {
+  return t.page ? { kind: "zoom", fit: "width" } : l != null ? { kind: "custom", fit: null } : t.file.url && B(t.file) ? { kind: "zoom", fit: "contain" } : t.file.url && C(t.file) ? { kind: "video", fit: null } : { kind: "file", fit: null };
+}
+function J({ frame: t, kind: l, custom: f, zoom: r, onDownload: a, overlay: p }) {
+  const s = h().fileViewer, v = U(), w = L(), d = T(t), [N, b] = z(null), y = N === d, { file: i } = t;
+  let c;
+  if (l === "custom")
+    c = f;
+  else if (l === "video")
+    c = /* @__PURE__ */ e("div", { className: "grid size-full place-items-center p-4", children: /* @__PURE__ */ e(
+      S,
+      {
+        src: i.url,
+        title: i.name,
+        poster: i.thumbnailUrl,
+        onDownload: a ? () => a(i) : void 0,
+        className: "max-h-full w-full max-w-5xl"
+      },
+      d
+    ) });
+  else if (l === "zoom" && y)
+    c = /* @__PURE__ */ e("div", { className: "grid size-full place-items-center px-8 text-center", children: /* @__PURE__ */ n("div", { className: "flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ e(u, { name: "image-off", size: "lg", className: "text-tertiary" }),
+      /* @__PURE__ */ e("p", { className: "max-w-sm text-xs text-secondary", children: t.page ? s.pageImageFailed : s.imageFailed }),
+      a ? /* @__PURE__ */ e(g, { file: i, onDownload: a }) : null
+    ] }) });
+  else if (l === "zoom") {
+    const k = t.page ? t.page.url : i.url;
+    c = /* @__PURE__ */ n(
+      "div",
+      {
+        ref: r.bindViewport,
+        "data-viewer-viewport": !0,
+        className: "absolute inset-0 overflow-hidden",
+        style: { touchAction: "none", cursor: r.panning ? "grabbing" : "grab" },
+        onDoubleClick: (o) => {
+          if (I(o.target)) return;
+          const m = o.currentTarget.getBoundingClientRect();
+          r.toggleActual({ x: o.clientX - m.left, y: o.clientY - m.top });
+        },
+        children: [
+          r.measured ? null : /* @__PURE__ */ e("div", { className: "absolute inset-0 grid place-items-center", children: /* @__PURE__ */ e(V, { size: "lg", label: s.loading }) }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "absolute left-0 top-0 origin-top-left will-change-transform",
+              style: { transform: `translate(${r.camera.x}px, ${r.camera.y}px) scale(${r.camera.scale})` },
+              children: /* @__PURE__ */ e(
+                "img",
+                {
+                  src: k,
+                  alt: j(t, s, v),
+                  className: "block max-w-none select-none bg-surface shadow-lg [-webkit-user-drag:none]",
+                  style: r.measured ? void 0 : { width: "1px", opacity: 0 },
+                  onLoad: (o) => {
+                    const m = o.currentTarget;
+                    r.setContentSize({ width: m.naturalWidth, height: m.naturalHeight });
+                  },
+                  onError: () => b(d)
+                },
+                d
+              )
+            }
+          )
+        ]
+      }
+    );
+  } else
+    c = /* @__PURE__ */ e("div", { className: "grid size-full place-items-center px-8 text-center", children: /* @__PURE__ */ n("div", { className: "flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ e(u, { name: K(i), size: "xl", className: "text-tertiary" }),
+      /* @__PURE__ */ n("div", { children: [
+        /* @__PURE__ */ e("p", { className: "text-sm font-medium text-primary", children: i.name }),
+        i.size === void 0 ? null : /* @__PURE__ */ e("p", { className: "mt-0.5 text-xs text-tertiary", children: F(i.size, w) })
+      ] }),
+      /* @__PURE__ */ e("p", { className: "max-w-sm text-xs text-tertiary", children: s.noPreview }),
+      /* @__PURE__ */ n("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [
+        i.url ? /* @__PURE__ */ n(x, { variant: "outline", render: /* @__PURE__ */ e("a", { href: i.url, target: "_blank", rel: "noopener noreferrer" }), children: [
+          /* @__PURE__ */ e(u, { name: "external-link", size: "sm" }),
+          s.openInNewTab
+        ] }) : null,
+        a ? /* @__PURE__ */ e(g, { file: i, onDownload: a }) : null
+      ] })
+    ] }) });
+  return /* @__PURE__ */ n("div", { className: "relative min-h-0 flex-1 overflow-hidden bg-surface-sunken", "data-viewer-stage": !0, children: [
+    c,
+    p ? /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-0", children: p }) : null
+  ] });
+}
+function g({ file: t, onDownload: l }) {
+  const f = h().fileViewer;
+  return /* @__PURE__ */ n(x, { variant: "outline", onClick: () => l(t), children: [
+    /* @__PURE__ */ e(u, { name: "download", size: "sm" }),
+    f.download
+  ] });
+}
+export {
+  J as ViewerStage,
+  G as stageKindOf
+};
+//# sourceMappingURL=ViewerStage.js.map

package/dist/components/file-viewer/ViewerStage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewerStage.js","sources":["../../../src/components/file-viewer/ViewerStage.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { formatBytes } from \"../../lib/format\";\nimport { useNumberFormat, useUiLocale, useUiStrings } from \"../../lib/i18n\";\nimport { isInteractiveTarget } from \"../../lib/interactive-target\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Spinner } from \"../Spinner\";\nimport { VideoPlayer } from \"../VideoPlayer\";\nimport { fileIconFor, isImageFile, isVideoFile } from \"../chat/file-icon\";\nimport type { useViewerZoom, ViewerFit } from \"./use-viewer-zoom\";\nimport { frameKeyOf, frameLabel } from \"./frames\";\nimport type { ViewerFile, ViewerFrame } from \"./types\";\n\n/* ============================================================================\n   VIEWER STAGE (DX-4398)\n\n   What is on screen for one frame, by kind:\n     - a PAGE, or an IMAGE with a url  -> a zoomable `<img>` (the camera moves it)\n     - a VIDEO with a url              -> `VideoPlayer`\n     - anything else, or no url        -> the type icon, the name, the size, and\n                                          the ways out: Open in a new tab, Download\n   Never an iframe, an `<object>` or an `<embed>`: an embed of an arbitrary\n   attachment is a security surface, and a half-working PDF preview is worse than\n   an honest \"open it\" because people trust what they see. A PDF is browsable\n   here only when the host supplies `pages`.\n\n   ONLY THE CURRENT FRAME'S MEDIA IS MOUNTED, so stepping away from a video stops\n   it, and a document of four hundred pages holds one `<img>`.\n\n   THE OVERLAY IS A SIBLING OF THE ZOOM VIEWPORT, NOT A CHILD of the element that\n   carries the wheel and drag handlers. In the source the quote panel sat inside\n   the zoom viewport, so a wheel over the quotes zoomed the page and dragging to\n   select a quote panned it. Here the wrapper is `pointer-events-none` and the\n   host's panel opts back in; its events never reach the viewport.\n   ========================================================================= */\n\nexport type ViewerZoom = ReturnType<typeof useViewerZoom>;\n\n/** How a frame is shown. `fit` is null for everything the camera does not move. */\nexport interface StageKind {\n  kind: \"zoom\" | \"video\" | \"file\" | \"custom\";\n  /** How the frame opens; null for everything the camera does not move. */\n  fit: ViewerFit | null;\n}\n\nexport function stageKindOf(frame: ViewerFrame, custom: ReactNode): StageKind {\n  if (frame.page) return { kind: \"zoom\", fit: \"width\" };\n  if (custom !== null && custom !== undefined) return { kind: \"custom\", fit: null };\n  if (frame.file.url && isImageFile(frame.file)) return { kind: \"zoom\", fit: \"contain\" };\n  if (frame.file.url && isVideoFile(frame.file)) return { kind: \"video\", fit: null };\n  return { kind: \"file\", fit: null };\n}\n\nexport interface ViewerStageProps {\n  frame: ViewerFrame;\n  /** What `stageKindOf` said about this frame (the shell already needed it). */\n  kind: StageKind[\"kind\"];\n  /** The host's `renderBody(file)` result for a pageless file. */\n  custom: ReactNode;\n  zoom: ViewerZoom;\n  onDownload?: (file: ViewerFile) => void;\n  overlay: ReactNode;\n}\n\nexport function ViewerStage({ frame, kind, custom, zoom, onDownload, overlay }: ViewerStageProps) {\n  const strings = useUiStrings().fileViewer;\n  const fmt = useNumberFormat();\n  const locale = useUiLocale();\n  const key = frameKeyOf(frame);\n  /* The failed frame, not a boolean: stepping to another frame is a different\n     picture and gets its own chance without an effect to reset anything. */\n  const [failedKey, setFailedKey] = useState<string | null>(null);\n  const failed = failedKey === key;\n  const { file } = frame;\n\n  let body: ReactNode;\n  if (kind === \"custom\") {\n    body = custom;\n  } else if (kind === \"video\") {\n    body = (\n      <div className=\"grid size-full place-items-center p-4\">\n        <VideoPlayer\n          key={key}\n          /* `kind` is \"video\" only when `stageKindOf` saw a url. */\n          src={file.url!}\n          title={file.name}\n          poster={file.thumbnailUrl}\n          onDownload={onDownload ? () => onDownload(file) : undefined}\n          className=\"max-h-full w-full max-w-5xl\"\n        />\n      </div>\n    );\n  } else if (kind === \"zoom\" && failed) {\n    body = (\n      <div className=\"grid size-full place-items-center px-8 text-center\">\n        <div className=\"flex flex-col items-center gap-3\">\n          <Icon name=\"image-off\" size=\"lg\" className=\"text-tertiary\" />\n          <p className=\"max-w-sm text-xs text-secondary\">\n            {frame.page ? strings.pageImageFailed : strings.imageFailed}\n          </p>\n          {onDownload ? <DownloadButton file={file} onDownload={onDownload} /> : null}\n        </div>\n      </div>\n    );\n  } else if (kind === \"zoom\") {\n    /* A page has its own url; a pageless \"zoom\" frame is an image `stageKindOf` saw a url on. */\n    const source = frame.page ? frame.page.url : file.url!;\n    body = (\n      <div\n        ref={zoom.bindViewport}\n        data-viewer-viewport\n        className=\"absolute inset-0 overflow-hidden\"\n        /* `touch-action: none` is what makes pinch reach the pointer handlers at\n           all — without it the browser claims the gesture for its own page zoom\n           and no pointermove is ever delivered. */\n        style={{ touchAction: \"none\", cursor: zoom.panning ? \"grabbing\" : \"grab\" }}\n        onDoubleClick={(event) => {\n          if (isInteractiveTarget(event.target)) return;\n          const rect = event.currentTarget.getBoundingClientRect();\n          zoom.toggleActual({ x: event.clientX - rect.left, y: event.clientY - rect.top });\n        }}\n      >\n        {zoom.measured ? null : (\n          <div className=\"absolute inset-0 grid place-items-center\">\n            <Spinner size=\"lg\" label={strings.loading} />\n          </div>\n        )}\n        <div\n          className=\"absolute left-0 top-0 origin-top-left will-change-transform\"\n          style={{ transform: `translate(${zoom.camera.x}px, ${zoom.camera.y}px) scale(${zoom.camera.scale})` }}\n        >\n          <img\n            key={key}\n            src={source}\n            alt={frameLabel(frame, strings, fmt)}\n            /* Not `draggable={false}`: the library bans the HTML5 drag attributes\n               outright (dnd-a11y.test.ts). The CSS says the same to the browsers\n               that read it, and a native image drag that does start is a\n               pointercancel, which the gesture handles. */\n            className=\"block max-w-none select-none bg-surface shadow-lg [-webkit-user-drag:none]\"\n            style={zoom.measured ? undefined : { width: \"1px\", opacity: 0 }}\n            onLoad={(event) => {\n              const image = event.currentTarget;\n              zoom.setContentSize({ width: image.naturalWidth, height: image.naturalHeight });\n            }}\n            onError={() => setFailedKey(key)}\n          />\n        </div>\n      </div>\n    );\n  } else {\n    body = (\n      <div className=\"grid size-full place-items-center px-8 text-center\">\n        <div className=\"flex flex-col items-center gap-3\">\n          <Icon name={fileIconFor(file)} size=\"xl\" className=\"text-tertiary\" />\n          <div>\n            <p className=\"text-sm font-medium text-primary\">{file.name}</p>\n            {file.size === undefined ? null : <p className=\"mt-0.5 text-xs text-tertiary\">{formatBytes(file.size, locale)}</p>}\n          </div>\n          <p className=\"max-w-sm text-xs text-tertiary\">\n            {strings.noPreview}\n          </p>\n          <div className=\"flex flex-wrap items-center justify-center gap-2\">\n            {file.url ? (\n              <Button variant=\"outline\" render={<a href={file.url} target=\"_blank\" rel=\"noopener noreferrer\" />}>\n                <Icon name=\"external-link\" size=\"sm\" />\n                {strings.openInNewTab}\n              </Button>\n            ) : null}\n            {onDownload ? <DownloadButton file={file} onDownload={onDownload} /> : null}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"relative min-h-0 flex-1 overflow-hidden bg-surface-sunken\" data-viewer-stage>\n      {body}\n      {overlay ? <div className=\"pointer-events-none absolute inset-0\">{overlay}</div> : null}\n    </div>\n  );\n}\n\nfunction DownloadButton({ file, onDownload }: { file: ViewerFile; onDownload: (file: ViewerFile) => void }) {\n  const strings = useUiStrings().fileViewer;\n  return (\n    <Button variant=\"outline\" onClick={() => onDownload(file)}>\n      <Icon name=\"download\" size=\"sm\" />\n      {strings.download}\n    </Button>\n  );\n}\n"],"names":["stageKindOf","frame","custom","isImageFile","isVideoFile","ViewerStage","kind","zoom","onDownload","overlay","strings","useUiStrings","fmt","useNumberFormat","locale","useUiLocale","key","frameKeyOf","failedKey","setFailedKey","useState","failed","file","body","jsx","VideoPlayer","jsxs","Icon","DownloadButton","source","event","isInteractiveTarget","rect","Spinner","frameLabel","image","fileIconFor","formatBytes","Button"],"mappings":"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"}

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

@@ -0,0 +1,37 @@
+function a(n) {
+  const e = n.flatMap(
+    (i) => i.pages && i.pages.length > 0 ? i.pages.map((l) => ({ file: i, page: l })) : [{ file: i, page: null }]
+  );
+  return e.map((i, l) => ({ ...i, index: l, total: e.length }));
+}
+function g(n) {
+  return { fileId: n.file.id, pageId: n.page?.id ?? null, index: n.index };
+}
+function p(n) {
+  return `${n.file.id}\0${n.page?.id ?? ""}`;
+}
+function o(n, e) {
+  if (n.length === 0) return null;
+  if (e) {
+    const i = n.find((l) => l.file.id === e.fileId && (l.page?.id ?? null) === e.pageId);
+    return i || (n[Math.min(e.index, n.length - 1)] ?? null);
+  }
+  return n[0] ?? null;
+}
+function f(n, e) {
+  const i = (t) => !e.fileId || t.file.id === e.fileId, l = n.filter(i), d = l.length > 0 ? l : n;
+  return (e.pageId ? d.find((t) => t.page?.id === e.pageId) : void 0) ?? d.find((t) => t.page?.marked) ?? d[0] ?? null;
+}
+function r(n, e, i) {
+  const { file: l, page: d } = n;
+  return d ? d.number === null || d.number === void 0 ? e.unnumberedPageOf(l.name) : e.pageOf(l.name, i(d.number)) : l.name;
+}
+export {
+  g as cursorOf,
+  p as frameKeyOf,
+  r as frameLabel,
+  a as framesOf,
+  o as resolveCursor,
+  f as startFrame
+};
+//# sourceMappingURL=frames.js.map

package/dist/components/file-viewer/frames.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frames.js","sources":["../../../src/components/file-viewer/frames.ts"],"sourcesContent":["import type { UiStrings } from \"../../lib/i18n\";\nimport type { ViewerFile, ViewerFrame } from \"./types\";\n\n/* ============================================================================\n   FRAMES — pure, no DOM. (DX-4398)\n\n   A frame is one thing on the stage: a file without pages is ONE frame, a file\n   with N pages is N frames. Every step, jump and position readout is over\n   frames, so a multi-page PDF between two images steps image, page 1, page 2,\n   ..., image with the same Next button.\n\n   THE READER'S POSITION IS HELD AS IDS, never as an index (see `Cursor`): a live\n   change to `files` — a file someone else removed — must keep the reader on the\n   same frame, and an index silently slides to its neighbour.\n   ========================================================================= */\n\n/** Where the reader is. The ids are the truth; `index` only says where to land\n    when both have vanished (the nearest position). */\nexport interface Cursor {\n  fileId: string;\n  pageId: string | null;\n  index: number;\n}\n\nexport function framesOf(files: readonly ViewerFile[]): ViewerFrame[] {\n  const placed: Array<Pick<ViewerFrame, \"file\" | \"page\">> = files.flatMap((file) =>\n    file.pages && file.pages.length > 0\n      ? file.pages.map((page): Pick<ViewerFrame, \"file\" | \"page\"> => ({ file, page }))\n      : [{ file, page: null }],\n  );\n  return placed.map((frame, index) => ({ ...frame, index, total: placed.length }));\n}\n\nexport function cursorOf(frame: ViewerFrame): Cursor {\n  return { fileId: frame.file.id, pageId: frame.page?.id ?? null, index: frame.index };\n}\n\n/** A stable identity for the frame on the stage, for keys and change detection. */\nexport function frameKeyOf(frame: ViewerFrame): string {\n  return `${frame.file.id}\\u0000${frame.page?.id ?? \"\"}`;\n}\n\n/** The frame the cursor names, else the one nearest its last index. */\nexport function resolveCursor(frames: readonly ViewerFrame[], cursor: Cursor | null): ViewerFrame | null {\n  if (frames.length === 0) return null;\n  if (cursor) {\n    const named = frames.find((frame) => frame.file.id === cursor.fileId && (frame.page?.id ?? null) === cursor.pageId);\n    if (named) return named;\n    return frames[Math.min(cursor.index, frames.length - 1)] ?? null;\n  }\n  return frames[0] ?? null;\n}\n\nexport interface Start {\n  fileId?: string | null;\n  pageId?: string | null;\n}\n\n/**\n * Where a viewer opens: the frame whose page id is `pageId` (inside `fileId`\n * when given), else the first marked frame (inside `fileId` when given), else\n * the first frame (of `fileId` when given). An id that matches nothing falls\n * through to the next rule — a stale deep link opens the document, not nothing.\n */\nexport function startFrame(frames: readonly ViewerFrame[], start: Start): ViewerFrame | null {\n  const inFile = (frame: ViewerFrame) => !start.fileId || frame.file.id === start.fileId;\n  const scoped = frames.filter(inFile);\n  const pool = scoped.length > 0 ? scoped : frames;\n  const byPage = start.pageId ? pool.find((frame) => frame.page?.id === start.pageId) : undefined;\n  return byPage ?? pool.find((frame) => frame.page?.marked) ?? pool[0] ?? null;\n}\n\n/** The frame's name, for a screen reader and for an alt attribute. */\nexport function frameLabel(frame: ViewerFrame, strings: UiStrings[\"fileViewer\"], fmt: (n: number) => string): string {\n  const { file, page } = frame;\n  if (!page) return file.name;\n  return page.number === null || page.number === undefined\n    ? strings.unnumberedPageOf(file.name)\n    : strings.pageOf(file.name, fmt(page.number));\n}\n"],"names":["framesOf","files","placed","file","page","frame","index","cursorOf","frameKeyOf","resolveCursor","frames","cursor","named","startFrame","start","inFile","scoped","pool","frameLabel","strings","fmt"],"mappings":"AAwBO,SAASA,EAASC,GAA6C;AACpE,QAAMC,IAAoDD,EAAM;AAAA,IAAQ,CAACE,MACvEA,EAAK,SAASA,EAAK,MAAM,SAAS,IAC9BA,EAAK,MAAM,IAAI,CAACC,OAA8C,EAAE,MAAAD,GAAM,MAAAC,EAAA,EAAO,IAC7E,CAAC,EAAE,MAAAD,GAAM,MAAM,KAAA,CAAM;AAAA,EAAA;AAE3B,SAAOD,EAAO,IAAI,CAACG,GAAOC,OAAW,EAAE,GAAGD,GAAO,OAAAC,GAAO,OAAOJ,EAAO,OAAA,EAAS;AACjF;AAEO,SAASK,EAASF,GAA4B;AACnD,SAAO,EAAE,QAAQA,EAAM,KAAK,IAAI,QAAQA,EAAM,MAAM,MAAM,MAAM,OAAOA,EAAM,MAAA;AAC/E;AAGO,SAASG,EAAWH,GAA4B;AACrD,SAAO,GAAGA,EAAM,KAAK,EAAE,KAASA,EAAM,MAAM,MAAM,EAAE;AACtD;AAGO,SAASI,EAAcC,GAAgCC,GAA2C;AACvG,MAAID,EAAO,WAAW,EAAG,QAAO;AAChC,MAAIC,GAAQ;AACV,UAAMC,IAAQF,EAAO,KAAK,CAACL,MAAUA,EAAM,KAAK,OAAOM,EAAO,WAAWN,EAAM,MAAM,MAAM,UAAUM,EAAO,MAAM;AAClH,WAAIC,MACGF,EAAO,KAAK,IAAIC,EAAO,OAAOD,EAAO,SAAS,CAAC,CAAC,KAAK;AAAA,EAC9D;AACA,SAAOA,EAAO,CAAC,KAAK;AACtB;AAaO,SAASG,EAAWH,GAAgCI,GAAkC;AAC3F,QAAMC,IAAS,CAACV,MAAuB,CAACS,EAAM,UAAUT,EAAM,KAAK,OAAOS,EAAM,QAC1EE,IAASN,EAAO,OAAOK,CAAM,GAC7BE,IAAOD,EAAO,SAAS,IAAIA,IAASN;AAE1C,UADeI,EAAM,SAASG,EAAK,KAAK,CAACZ,MAAUA,EAAM,MAAM,OAAOS,EAAM,MAAM,IAAI,WACrEG,EAAK,KAAK,CAACZ,MAAUA,EAAM,MAAM,MAAM,KAAKY,EAAK,CAAC,KAAK;AAC1E;AAGO,SAASC,EAAWb,GAAoBc,GAAkCC,GAAoC;AACnH,QAAM,EAAE,MAAAjB,GAAM,MAAAC,EAAA,IAASC;AACvB,SAAKD,IACEA,EAAK,WAAW,QAAQA,EAAK,WAAW,SAC3Ce,EAAQ,iBAAiBhB,EAAK,IAAI,IAClCgB,EAAQ,OAAOhB,EAAK,MAAMiB,EAAIhB,EAAK,MAAM,CAAC,IAH5BD,EAAK;AAIzB;"}

package/dist/components/file-viewer/use-frame-cursor.js

@@ -0,0 +1,32 @@
+import { useState as c, useMemo as p, useCallback as v, useRef as w, useEffect as F } from "react";
+import { framesOf as R, resolveCursor as b, cursorOf as f, frameKeyOf as k, startFrame as y } from "./frames.js";
+function K({ open: r, files: s, initialFileId: h, initialPageId: I, onFrameChange: u }) {
+  const [i, x] = c(s);
+  s.length > 0 && s !== i && x(s);
+  const l = s.length > 0 ? s : i, n = p(() => R(l), [l]), m = () => {
+    const e = y(n, { fileId: h, pageId: I });
+    return e ? f(e) : null;
+  }, [o, a] = c(() => r ? m() : null), [C, O] = c(r), t = b(n, o);
+  if (r !== C)
+    O(r), r && a(m());
+  else if (r && t) {
+    const e = f(t);
+    (!o || o.fileId !== e.fileId || o.pageId !== e.pageId || o.index !== e.index) && a(e);
+  }
+  const M = v(
+    (e) => {
+      const g = n[Math.max(0, Math.min(n.length - 1, e))];
+      g && a(f(g));
+    },
+    [n]
+  ), d = w(u);
+  d.current = u;
+  const $ = t ? `${k(t)}\0${t.index}\0${t.total}` : "";
+  return F(() => {
+    r && t && d.current?.(t);
+  }, [r, $]), { frames: n, frame: t, go: M };
+}
+export {
+  K as useFrameCursor
+};
+//# sourceMappingURL=use-frame-cursor.js.map

package/dist/components/file-viewer/use-frame-cursor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-frame-cursor.js","sources":["../../../src/components/file-viewer/use-frame-cursor.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { cursorOf, frameKeyOf, framesOf, resolveCursor, startFrame, type Cursor } from \"./frames\";\nimport type { ViewerFile, ViewerFrame } from \"./types\";\n\n/* ============================================================================\n   FRAME CURSOR (DX-4398)\n\n   Which frame the reader is on, kept as IDS (see `frames.ts`), uncontrolled:\n   read from `initial*` each time `open` turns true and never afterwards, observed\n   through `onFrameChange`. There is no controlled counterpart, because a pair is\n   two sources of truth for one thing.\n   ========================================================================= */\n\nexport interface UseFrameCursorOptions {\n  open: boolean;\n  files: ViewerFile[];\n  initialFileId?: string | null;\n  initialPageId?: string | null;\n  onFrameChange?: (frame: ViewerFrame) => void;\n}\n\nexport function useFrameCursor({ open, files, initialFileId, initialPageId, onFrameChange }: UseFrameCursorOptions) {\n  /* DX-4039: a host closes the viewer by clearing `files` while the Dialog is\n     still animating out for several frames. Rendering from the prop alone\n     repainted that exit empty. So the LAST non-empty list is held and rendered.\n     Set during render (React's derived-state pattern), not in an effect, so the\n     held list is in place on the very frame the prop clears. */\n  const [held, setHeld] = useState(files);\n  if (files.length > 0 && files !== held) setHeld(files);\n  const shown = files.length > 0 ? files : held;\n  const frames = useMemo(() => framesOf(shown), [shown]);\n\n  const openingCursor = (): Cursor | null => {\n    const first = startFrame(frames, { fileId: initialFileId, pageId: initialPageId });\n    return first ? cursorOf(first) : null;\n  };\n  const [cursor, setCursor] = useState<Cursor | null>(() => (open ? openingCursor() : null));\n  const [wasOpen, setWasOpen] = useState(open);\n  const frame = resolveCursor(frames, cursor);\n  if (open !== wasOpen) {\n    setWasOpen(open);\n    if (open) setCursor(openingCursor());\n  } else if (open && frame) {\n    /* Keep the ids truthful: a vanished frame has fallen to its nearest\n       neighbour, and an earlier removal moved the index. */\n    const resolved = cursorOf(frame);\n    if (!cursor || cursor.fileId !== resolved.fileId || cursor.pageId !== resolved.pageId || cursor.index !== resolved.index) {\n      setCursor(resolved);\n    }\n  }\n\n  const go = useCallback(\n    (next: number) => {\n      const target = frames[Math.max(0, Math.min(frames.length - 1, next))];\n      if (target) setCursor(cursorOf(target));\n    },\n    [frames],\n  );\n\n  /* On open and on every step, never on a re-render that left the frame alone.\n     Told through a ref so a new callback identity is not a change. */\n  const onFrameChangeRef = useRef(onFrameChange);\n  onFrameChangeRef.current = onFrameChange;\n  const signature = frame ? `${frameKeyOf(frame)}\\u0000${frame.index}\\u0000${frame.total}` : \"\";\n  useEffect(() => {\n    if (open && frame) onFrameChangeRef.current?.(frame);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- the signature IS the frame's identity; the object is rebuilt every render\n  }, [open, signature]);\n\n  return { frames, frame, go };\n}\n"],"names":["useFrameCursor","open","files","initialFileId","initialPageId","onFrameChange","held","setHeld","useState","shown","frames","useMemo","framesOf","openingCursor","first","startFrame","cursorOf","cursor","setCursor","wasOpen","setWasOpen","frame","resolveCursor","resolved","go","useCallback","next","target","onFrameChangeRef","useRef","signature","frameKeyOf","useEffect"],"mappings":";;AAqBO,SAASA,EAAe,EAAE,MAAAC,GAAM,OAAAC,GAAO,eAAAC,GAAe,eAAAC,GAAe,eAAAC,KAAwC;AAMlH,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAASN,CAAK;AACtC,EAAIA,EAAM,SAAS,KAAKA,MAAUI,OAAcJ,CAAK;AACrD,QAAMO,IAAQP,EAAM,SAAS,IAAIA,IAAQI,GACnCI,IAASC,EAAQ,MAAMC,EAASH,CAAK,GAAG,CAACA,CAAK,CAAC,GAE/CI,IAAgB,MAAqB;AACzC,UAAMC,IAAQC,EAAWL,GAAQ,EAAE,QAAQP,GAAe,QAAQC,GAAe;AACjF,WAAOU,IAAQE,EAASF,CAAK,IAAI;AAAA,EACnC,GACM,CAACG,GAAQC,CAAS,IAAIV,EAAwB,MAAOP,IAAOY,EAAA,IAAkB,IAAK,GACnF,CAACM,GAASC,CAAU,IAAIZ,EAASP,CAAI,GACrCoB,IAAQC,EAAcZ,GAAQO,CAAM;AAC1C,MAAIhB,MAASkB;AACX,IAAAC,EAAWnB,CAAI,GACXA,KAAMiB,EAAUL,GAAe;AAAA,WAC1BZ,KAAQoB,GAAO;AAGxB,UAAME,IAAWP,EAASK,CAAK;AAC/B,KAAI,CAACJ,KAAUA,EAAO,WAAWM,EAAS,UAAUN,EAAO,WAAWM,EAAS,UAAUN,EAAO,UAAUM,EAAS,UACjHL,EAAUK,CAAQ;AAAA,EAEtB;AAEA,QAAMC,IAAKC;AAAA,IACT,CAACC,MAAiB;AAChB,YAAMC,IAASjB,EAAO,KAAK,IAAI,GAAG,KAAK,IAAIA,EAAO,SAAS,GAAGgB,CAAI,CAAC,CAAC;AACpE,MAAIC,KAAQT,EAAUF,EAASW,CAAM,CAAC;AAAA,IACxC;AAAA,IACA,CAACjB,CAAM;AAAA,EAAA,GAKHkB,IAAmBC,EAAOxB,CAAa;AAC7C,EAAAuB,EAAiB,UAAUvB;AAC3B,QAAMyB,IAAYT,IAAQ,GAAGU,EAAWV,CAAK,CAAC,KAASA,EAAM,KAAK,KAASA,EAAM,KAAK,KAAK;AAC3F,SAAAW,EAAU,MAAM;AACd,IAAI/B,KAAQoB,KAAOO,EAAiB,UAAUP,CAAK;AAAA,EAErD,GAAG,CAACpB,GAAM6B,CAAS,CAAC,GAEb,EAAE,QAAApB,GAAQ,OAAAW,GAAO,IAAAG,EAAA;AAC1B;"}

package/dist/components/file-viewer/use-viewer-keys.js

@@ -0,0 +1,50 @@
+import { useState as l, useRef as d, useEffect as k } from "react";
+const p = "input, textarea, select, video, audio, [contenteditable]:not([contenteditable='false'])";
+function m(a) {
+  const [r, i] = l(null), o = d(a);
+  return o.current = a, k(() => {
+    if (!r) return;
+    const s = (e) => {
+      const c = e.target;
+      if (!(c instanceof Element) || e.ctrlKey || e.metaKey || e.altKey || c.closest(p)) return;
+      const { go: n, index: u, total: f, zoom: t } = o.current;
+      switch (e.key) {
+        case "ArrowRight":
+        case "PageDown":
+          n(u + 1);
+          break;
+        case "ArrowLeft":
+        case "PageUp":
+          n(u - 1);
+          break;
+        case "Home":
+          n(0);
+          break;
+        case "End":
+          n(f - 1);
+          break;
+        case "+":
+        case "=":
+          if (!t) return;
+          t.zoomIn();
+          break;
+        case "-":
+          if (!t) return;
+          t.zoomOut();
+          break;
+        case "0":
+          if (!t) return;
+          t.reset();
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+    };
+    return r.addEventListener("keydown", s), () => r.removeEventListener("keydown", s);
+  }, [r]), i;
+}
+export {
+  m as useViewerKeys
+};
+//# sourceMappingURL=use-viewer-keys.js.map

package/dist/components/file-viewer/use-viewer-keys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-viewer-keys.js","sources":["../../../src/components/file-viewer/use-viewer-keys.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\n/* Targets that keep their own keys: an editable field (typing a page number) and\n   a media element (arrow-seeking a video). */\nconst OWN_KEYS_TARGETS = \"input, textarea, select, video, audio, [contenteditable]:not([contenteditable='false'])\";\n\nexport interface ViewerKeyActions {\n  go: (index: number) => void;\n  index: number;\n  total: number;\n  /** Null when the frame is not zoomable: the zoom keys are then not handled. */\n  zoom: { zoomIn: () => void; zoomOut: () => void; reset: () => void } | null;\n}\n\n/**\n * The viewer's keyboard (DX-4398): Arrow, PageUp/PageDown, Home and End step\n * frames; `+`, `-` and `0` zoom. Returns the callback ref for the Dialog popup.\n *\n * A NATIVE listener on the popup element, not a document one and not a React\n * `onKeyDown`: Base UI's popup stops propagation of the arrow, Home, End and Page\n * keys (they belong to composite widgets), so by the time a key reached\n * `document` it was gone. On the popup itself it runs first. It only ever sees\n * keys aimed at the viewer's own DOM: a key inside a portalled Popover (the\n * overflow menu) has a target outside the popup, so it never gets here. Escape is\n * not handled: it is the Dialog's.\n */\nexport function useViewerKeys(actions: ViewerKeyActions) {\n  const [popup, setPopup] = useState<HTMLDivElement | null>(null);\n  const live = useRef(actions);\n  live.current = actions;\n\n  useEffect(() => {\n    if (!popup) return;\n    const onKey = (event: KeyboardEvent) => {\n      const target = event.target;\n      if (!(target instanceof Element)) return;\n      if (event.ctrlKey || event.metaKey || event.altKey) return;\n      if (target.closest(OWN_KEYS_TARGETS)) return;\n      const { go, index, total, zoom } = live.current;\n      switch (event.key) {\n        case \"ArrowRight\":\n        case \"PageDown\":\n          go(index + 1);\n          break;\n        case \"ArrowLeft\":\n        case \"PageUp\":\n          go(index - 1);\n          break;\n        case \"Home\":\n          go(0);\n          break;\n        case \"End\":\n          go(total - 1);\n          break;\n        case \"+\":\n        case \"=\":\n          if (!zoom) return;\n          zoom.zoomIn();\n          break;\n        case \"-\":\n          if (!zoom) return;\n          zoom.zoomOut();\n          break;\n        case \"0\":\n          if (!zoom) return;\n          zoom.reset();\n          break;\n        default:\n          return;\n      }\n      event.preventDefault();\n    };\n    popup.addEventListener(\"keydown\", onKey);\n    return () => popup.removeEventListener(\"keydown\", onKey);\n  }, [popup]);\n\n  return setPopup;\n}\n"],"names":["OWN_KEYS_TARGETS","useViewerKeys","actions","popup","setPopup","useState","live","useRef","useEffect","onKey","event","target","go","index","total","zoom"],"mappings":";AAIA,MAAMA,IAAmB;AAsBlB,SAASC,EAAcC,GAA2B;AACvD,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAgC,IAAI,GACxDC,IAAOC,EAAOL,CAAO;AAC3B,SAAAI,EAAK,UAAUJ,GAEfM,EAAU,MAAM;AACd,QAAI,CAACL,EAAO;AACZ,UAAMM,IAAQ,CAACC,MAAyB;AACtC,YAAMC,IAASD,EAAM;AAGrB,UAFI,EAAEC,aAAkB,YACpBD,EAAM,WAAWA,EAAM,WAAWA,EAAM,UACxCC,EAAO,QAAQX,CAAgB,EAAG;AACtC,YAAM,EAAE,IAAAY,GAAI,OAAAC,GAAO,OAAAC,GAAO,MAAAC,EAAA,IAAST,EAAK;AACxC,cAAQI,EAAM,KAAA;AAAA,QACZ,KAAK;AAAA,QACL,KAAK;AACH,UAAAE,EAAGC,IAAQ,CAAC;AACZ;AAAA,QACF,KAAK;AAAA,QACL,KAAK;AACH,UAAAD,EAAGC,IAAQ,CAAC;AACZ;AAAA,QACF,KAAK;AACH,UAAAD,EAAG,CAAC;AACJ;AAAA,QACF,KAAK;AACH,UAAAA,EAAGE,IAAQ,CAAC;AACZ;AAAA,QACF,KAAK;AAAA,QACL,KAAK;AACH,cAAI,CAACC,EAAM;AACX,UAAAA,EAAK,OAAA;AACL;AAAA,QACF,KAAK;AACH,cAAI,CAACA,EAAM;AACX,UAAAA,EAAK,QAAA;AACL;AAAA,QACF,KAAK;AACH,cAAI,CAACA,EAAM;AACX,UAAAA,EAAK,MAAA;AACL;AAAA,QACF;AACE;AAAA,MAAA;AAEJ,MAAAL,EAAM,eAAA;AAAA,IACR;AACA,WAAAP,EAAM,iBAAiB,WAAWM,CAAK,GAChC,MAAMN,EAAM,oBAAoB,WAAWM,CAAK;AAAA,EACzD,GAAG,CAACN,CAAK,CAAC,GAEHC;AACT;"}