@elabs-ai/components-viewer 5.3.1 → 5.5.0

package/README.md

@@ -3,7 +3,7 @@
 
 # `@elabs-ai/components-viewer`
 
-> FileViewer — any file (image, text, JSON, CSV) via a pluggable adapter registry.
+> FileViewer — any file (image, audio, video, text, code, JSON, CSV, markdown, PDF, docx, pptx, xlsx) via a pluggable adapter registry.
 
 Part of **brand-ui**, a source-owned, token-driven React component system.
 Published to the **public npm registry** under the `@elabs-ai` scope — it

package/dist/adapters/docx/docx-adapter.js

@@ -28,6 +28,7 @@ import "../../chunk-CIT2HHRI.js";
 // src/adapters/docx/docx-adapter.tsx
 import {
   cn,
+  Image as UiImage,
   ProseHeading,
   ProseLink,
   ProseList,
@@ -136,12 +137,14 @@ function Block({
   }
   if (block.type === "image") {
     return /* @__PURE__ */ jsx(
-      "img",
+      UiImage,
       {
         src: block.src,
         alt: block.alt ?? "",
         ...block.alt ? {} : { "aria-hidden": true },
-        className: "my-2 block h-auto max-w-full rounded-md"
+        fallback: null,
+        loading: "lazy",
+        className: "my-2 h-auto rounded-md"
       }
     );
   }

package/dist/adapters/docx/docx-adapter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/adapters/docx/docx-adapter.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Word adapter — a `.docx` becomes blocks, and blocks become brand-ui prose.\n *\n * mammoth does the hard part (unzipping OOXML, resolving styles, numbering,\n * images); `docx-model.ts` then parses its HTML into a model and discards the\n * markup, so nothing here writes `innerHTML`. That single decision is what makes\n * a Word document themeable, Trusted-Types-safe and free of a sanitizer\n * dependency — the reasoning lives in `docx-model.ts`.\n *\n * What a reader gets is the document's STRUCTURE in this system's typography:\n * real headings, real lists, a real `Table`, images with their own alt text. It\n * is not a pixel reproduction of Word's page layout — no page breaks, no columns,\n * no margins — and it does not pretend to be. For a byte-faithful rendering the\n * honest answer is to download the file, which the toolbar already offers.\n */\n\nimport type { ProseHeadingLevel, ResolvedFileSource } from \"@elabs-ai/components-ui\";\nimport {\n  cn,\n  ProseHeading,\n  ProseLink,\n  ProseList,\n  ProseListItem,\n  ProseText,\n  StatePanel,\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n  useLocale,\n} from \"@elabs-ai/components-ui\";\n\nimport { useMemo, useRef } from \"react\";\n\nimport { MarkedText } from \"../../components/marked-text\";\nimport { toViewerError } from \"../../core/errors\";\nimport { toMarkRanges, type MarkRanges } from \"../../core/highlight-marks\";\nimport type { TextIndex, TextSpan } from \"../../core/text-index\";\nimport { useScrollActiveHighlightIntoView } from \"../../core/use-highlight-scroll\";\nimport type {\n  AdapterDocument,\n  AdapterLoadContext,\n  AdapterModule,\n  AdapterRendererProps,\n  FileAdapter,\n} from \"../../core/types\";\nimport {\n  blocksToTextWithMap,\n  DOCX_CELL_SEPARATOR,\n  DOCX_HEAD_ROW,\n  DOCX_LIST_BULLET,\n  htmlToBlocks,\n  type DocxBlock,\n  type DocxRef,\n  type DocxRun,\n} from \"./docx-model\";\nimport { docxManifest } from \"./docx-manifest\";\n\nexport interface DocxDocument extends AdapterDocument {\n  kind: \"docx\";\n  blocks: DocxBlock[];\n  /** Non-fatal conversion notes mammoth reported (an unsupported style, a dropped field). */\n  warnings: string[];\n  /** Which block, item or row each stretch of `text` came from. */\n  textIndex?: TextIndex<DocxRef>;\n}\n\n/**\n * Parse markup with the DOM the runtime already has.\n *\n * `DOMParser` is the browser's own parser and jsdom's in tests — it does NOT\n * execute anything it parses, which is why building the model from it is safe\n * even though the input is third-party markup.\n */\nfunction parseMarkup(markup: string): Document {\n  return new DOMParser().parseFromString(markup, \"text/html\");\n}\n\nclass DocxAdapter implements FileAdapter {\n  async load(source: ResolvedFileSource, context: AdapterLoadContext): Promise<DocxDocument> {\n    let buffer: ArrayBuffer;\n    try {\n      buffer = await source.bytes(context.signal);\n    } catch (error) {\n      throw toViewerError(error, \"read-failed\", { fileName: source.name });\n    }\n\n    // Dynamic: the ONLY edge to the optional peer (heavy-deps:check).\n    const mammoth = await import(\"mammoth\");\n\n    try {\n      const result = await mammoth.convertToHtml({ arrayBuffer: buffer });\n      const blocks = htmlToBlocks(result.value, parseMarkup);\n      const textIndex = blocksToTextWithMap(blocks);\n      return {\n        kind: \"docx\",\n        blocks,\n        // mammoth's messages are about the CONVERSION, not about the file being\n        // broken — a document that lost one custom style still reads fine, so\n        // they are carried as notes rather than raised as a failure.\n        warnings: result.messages.map((message) => message.message),\n        text: textIndex.text,\n        textIndex,\n      };\n    } catch (error) {\n      throw toViewerError(error, \"parse-failed\", { fileName: source.name });\n    }\n  }\n}\n\n/* -------------------------------------------------------------------------- */\n/* Renderer                                                                    */\n/* -------------------------------------------------------------------------- */\n\nfunction Runs({ runs, marks, start }: { runs: DocxRun[]; marks: MarkRanges; start?: number }) {\n  let offset = start;\n  return (\n    <>\n      {runs.map((run, index) => {\n        const from = offset;\n        if (offset !== undefined) offset += run.text.length;\n        // Runs are joined with nothing in the projection, so a run's offset is\n        // simply the sum of the ones before it — the same accumulation the code\n        // adapter does over syntax tokens.\n        const content = <MarkedText text={run.text} marks={marks} start={from} />;\n        const bolded = run.bold ? <strong>{content}</strong> : content;\n        const styled = run.italic ? <em>{bolded}</em> : bolded;\n        if (run.href) {\n          return (\n            <ProseLink key={index} href={run.href}>\n              {styled}\n            </ProseLink>\n          );\n        }\n        return <span key={index}>{styled}</span>;\n      })}\n    </>\n  );\n}\n\n/** Shared empty list, so a block with no spans does not remount on every render. */\nconst EMPTY_SPANS: readonly TextSpan<DocxRef>[] = [];\n\n/** The projection offset of one row's `index`-th cell, given the row's own start. */\nfunction cellStart(row: readonly string[], index: number, rowStart?: number): number | undefined {\n  if (rowStart === undefined) return undefined;\n  let offset = rowStart;\n  for (let i = 0; i < index; i += 1) {\n    offset += (row[i]?.length ?? 0) + DOCX_CELL_SEPARATOR.length;\n  }\n  return offset;\n}\n\nfunction Block({\n  block,\n  baseHeadingLevel,\n  marks,\n  spans,\n}: {\n  block: DocxBlock;\n  baseHeadingLevel: number;\n  marks: MarkRanges;\n  /** The projection spans belonging to THIS block, in document order. */\n  spans: readonly TextSpan<DocxRef>[];\n}) {\n  const startOf = (match: (ref: DocxRef) => boolean) =>\n    spans.find((span) => match(span.ref))?.start;\n\n  if (block.type === \"heading\") {\n    return (\n      // Offset, not absolute: Word's \"Heading 1\" is the top of THAT document,\n      // not of the page showing it. Never past h6 — an h7 is not an element.\n      <ProseHeading\n        level={Math.min(6, Math.max(1, block.level + baseHeadingLevel - 1)) as ProseHeadingLevel}\n      >\n        <Runs runs={block.runs} marks={marks} start={startOf(() => true)} />\n      </ProseHeading>\n    );\n  }\n  if (block.type === \"paragraph\") {\n    return (\n      <ProseText className=\"whitespace-pre-wrap\">\n        <Runs runs={block.runs} marks={marks} start={startOf(() => true)} />\n      </ProseText>\n    );\n  }\n  if (block.type === \"list\") {\n    return (\n      <ProseList ordered={block.ordered}>\n        {block.items.map((item, index) => {\n          // The bullet is in the projection but not in the DOM — the list\n          // element draws it — so an item's own text starts after it.\n          const start = startOf((ref) => ref.item === index);\n          return (\n            <ProseListItem key={index}>\n              <Runs\n                runs={item}\n                marks={marks}\n                start={start === undefined ? undefined : start + DOCX_LIST_BULLET.length}\n              />\n            </ProseListItem>\n          );\n        })}\n      </ProseList>\n    );\n  }\n  if (block.type === \"image\") {\n    return (\n      <img\n        src={block.src}\n        // The document's own alt text when the author wrote one. An image with\n        // none is decoration as far as the reader can tell, and a filename would\n        // be noise, not a description.\n        alt={block.alt ?? \"\"}\n        {...(block.alt ? {} : { \"aria-hidden\": true })}\n        className=\"my-2 block h-auto max-w-full rounded-md\"\n      />\n    );\n  }\n  const headStart = startOf((ref) => ref.row === DOCX_HEAD_ROW);\n  return (\n    <Table className=\"my-2\">\n      {block.head && (\n        <TableHeader>\n          <TableRow>\n            {block.head.map((cell, index) => (\n              <TableHead key={index} scope=\"col\">\n                <MarkedText\n                  text={cell}\n                  marks={marks}\n                  start={cellStart(block.head ?? [], index, headStart)}\n                />\n              </TableHead>\n            ))}\n          </TableRow>\n        </TableHeader>\n      )}\n      <TableBody>\n        {block.rows.map((row, rowIndex) => {\n          const rowStart = startOf((ref) => ref.row === rowIndex);\n          return (\n            <TableRow key={rowIndex}>\n              {row.map((cell, cellIndex) => (\n                <TableCell key={cellIndex} className=\"whitespace-pre-wrap align-top\">\n                  <MarkedText\n                    text={cell}\n                    marks={marks}\n                    start={cellStart(row, cellIndex, rowStart)}\n                  />\n                </TableCell>\n              ))}\n            </TableRow>\n          );\n        })}\n      </TableBody>\n    </Table>\n  );\n}\n\nfunction DocxRenderer({\n  document: doc,\n  className,\n  baseHeadingLevel = 2,\n  highlights,\n  activeHighlightId,\n}: AdapterRendererProps) {\n  const docx = doc as DocxDocument;\n  const { t } = useLocale();\n  const container = useRef<HTMLElement>(null);\n\n  const marks = useMemo(\n    () => toMarkRanges(highlights, docx.text?.length ?? 0),\n    [highlights, docx.text],\n  );\n  // Grouped once per document rather than searched per block: a long report is\n  // thousands of blocks, and a linear scan inside the render loop would make it\n  // quadratic on every keystroke of a find-as-you-type.\n  const spansByBlock = useMemo(() => {\n    const map = new Map<number, TextSpan<DocxRef>[]>();\n    for (const span of docx.textIndex?.spans ?? []) {\n      const list = map.get(span.ref.block);\n      if (list) list.push(span);\n      else map.set(span.ref.block, [span]);\n    }\n    return map;\n  }, [docx.textIndex]);\n\n  useScrollActiveHighlightIntoView(container, activeHighlightId);\n\n  if (docx.blocks.length === 0) {\n    return (\n      <div className={cn(\"flex min-h-full flex-col justify-center p-4\", className)}>\n        <StatePanel kind=\"empty\" title={t(\"viewer.docx.empty\")} />\n      </div>\n    );\n  }\n\n  return (\n    // `max-w-prose` because this is genuine multi-sentence prose in a pane that\n    // can be very wide — the one case styling-and-tokens.md says to cap the\n    // measure. Centred so the column does not hug one edge. No `overflow-auto`:\n    // `FileViewerContent` is the scroll boundary, and a second one clips the\n    // last paragraph above the outer pane's padding.\n    <article ref={container} className={cn(\"mx-auto max-w-prose space-y-2\", className)}>\n      {docx.blocks.map((block, index) => (\n        <Block\n          key={index}\n          block={block}\n          baseHeadingLevel={baseHeadingLevel}\n          marks={marks}\n          spans={spansByBlock.get(index) ?? EMPTY_SPANS}\n        />\n      ))}\n    </article>\n  );\n}\n\nconst adapterModule: AdapterModule = {\n  manifest: docxManifest,\n  create: () => new DocxAdapter(),\n  Renderer: DocxRenderer,\n};\n\nexport default adapterModule;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/adapters/docx/docx-adapter.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Word adapter — a `.docx` becomes blocks, and blocks become brand-ui prose.\n *\n * mammoth does the hard part (unzipping OOXML, resolving styles, numbering,\n * images); `docx-model.ts` then parses its HTML into a model and discards the\n * markup, so nothing here writes `innerHTML`. That single decision is what makes\n * a Word document themeable, Trusted-Types-safe and free of a sanitizer\n * dependency — the reasoning lives in `docx-model.ts`.\n *\n * What a reader gets is the document's STRUCTURE in this system's typography:\n * real headings, real lists, a real `Table`, images with their own alt text. It\n * is not a pixel reproduction of Word's page layout — no page breaks, no columns,\n * no margins — and it does not pretend to be. For a byte-faithful rendering the\n * honest answer is to download the file, which the toolbar already offers.\n */\n\nimport type { ProseHeadingLevel, ResolvedFileSource } from \"@elabs-ai/components-ui\";\nimport {\n  cn,\n  Image as UiImage,\n  ProseHeading,\n  ProseLink,\n  ProseList,\n  ProseListItem,\n  ProseText,\n  StatePanel,\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n  useLocale,\n} from \"@elabs-ai/components-ui\";\n\nimport { useMemo, useRef } from \"react\";\n\nimport { MarkedText } from \"../../components/marked-text\";\nimport { toViewerError } from \"../../core/errors\";\nimport { toMarkRanges, type MarkRanges } from \"../../core/highlight-marks\";\nimport type { TextIndex, TextSpan } from \"../../core/text-index\";\nimport { useScrollActiveHighlightIntoView } from \"../../core/use-highlight-scroll\";\nimport type {\n  AdapterDocument,\n  AdapterLoadContext,\n  AdapterModule,\n  AdapterRendererProps,\n  FileAdapter,\n} from \"../../core/types\";\nimport {\n  blocksToTextWithMap,\n  DOCX_CELL_SEPARATOR,\n  DOCX_HEAD_ROW,\n  DOCX_LIST_BULLET,\n  htmlToBlocks,\n  type DocxBlock,\n  type DocxRef,\n  type DocxRun,\n} from \"./docx-model\";\nimport { docxManifest } from \"./docx-manifest\";\n\nexport interface DocxDocument extends AdapterDocument {\n  kind: \"docx\";\n  blocks: DocxBlock[];\n  /** Non-fatal conversion notes mammoth reported (an unsupported style, a dropped field). */\n  warnings: string[];\n  /** Which block, item or row each stretch of `text` came from. */\n  textIndex?: TextIndex<DocxRef>;\n}\n\n/**\n * Parse markup with the DOM the runtime already has.\n *\n * `DOMParser` is the browser's own parser and jsdom's in tests — it does NOT\n * execute anything it parses, which is why building the model from it is safe\n * even though the input is third-party markup.\n */\nfunction parseMarkup(markup: string): Document {\n  return new DOMParser().parseFromString(markup, \"text/html\");\n}\n\nclass DocxAdapter implements FileAdapter {\n  async load(source: ResolvedFileSource, context: AdapterLoadContext): Promise<DocxDocument> {\n    let buffer: ArrayBuffer;\n    try {\n      buffer = await source.bytes(context.signal);\n    } catch (error) {\n      throw toViewerError(error, \"read-failed\", { fileName: source.name });\n    }\n\n    // Dynamic: the ONLY edge to the optional peer (heavy-deps:check).\n    const mammoth = await import(\"mammoth\");\n\n    try {\n      const result = await mammoth.convertToHtml({ arrayBuffer: buffer });\n      const blocks = htmlToBlocks(result.value, parseMarkup);\n      const textIndex = blocksToTextWithMap(blocks);\n      return {\n        kind: \"docx\",\n        blocks,\n        // mammoth's messages are about the CONVERSION, not about the file being\n        // broken — a document that lost one custom style still reads fine, so\n        // they are carried as notes rather than raised as a failure.\n        warnings: result.messages.map((message) => message.message),\n        text: textIndex.text,\n        textIndex,\n      };\n    } catch (error) {\n      throw toViewerError(error, \"parse-failed\", { fileName: source.name });\n    }\n  }\n}\n\n/* -------------------------------------------------------------------------- */\n/* Renderer                                                                    */\n/* -------------------------------------------------------------------------- */\n\nfunction Runs({ runs, marks, start }: { runs: DocxRun[]; marks: MarkRanges; start?: number }) {\n  let offset = start;\n  return (\n    <>\n      {runs.map((run, index) => {\n        const from = offset;\n        if (offset !== undefined) offset += run.text.length;\n        // Runs are joined with nothing in the projection, so a run's offset is\n        // simply the sum of the ones before it — the same accumulation the code\n        // adapter does over syntax tokens.\n        const content = <MarkedText text={run.text} marks={marks} start={from} />;\n        const bolded = run.bold ? <strong>{content}</strong> : content;\n        const styled = run.italic ? <em>{bolded}</em> : bolded;\n        if (run.href) {\n          return (\n            <ProseLink key={index} href={run.href}>\n              {styled}\n            </ProseLink>\n          );\n        }\n        return <span key={index}>{styled}</span>;\n      })}\n    </>\n  );\n}\n\n/** Shared empty list, so a block with no spans does not remount on every render. */\nconst EMPTY_SPANS: readonly TextSpan<DocxRef>[] = [];\n\n/** The projection offset of one row's `index`-th cell, given the row's own start. */\nfunction cellStart(row: readonly string[], index: number, rowStart?: number): number | undefined {\n  if (rowStart === undefined) return undefined;\n  let offset = rowStart;\n  for (let i = 0; i < index; i += 1) {\n    offset += (row[i]?.length ?? 0) + DOCX_CELL_SEPARATOR.length;\n  }\n  return offset;\n}\n\nfunction Block({\n  block,\n  baseHeadingLevel,\n  marks,\n  spans,\n}: {\n  block: DocxBlock;\n  baseHeadingLevel: number;\n  marks: MarkRanges;\n  /** The projection spans belonging to THIS block, in document order. */\n  spans: readonly TextSpan<DocxRef>[];\n}) {\n  const startOf = (match: (ref: DocxRef) => boolean) =>\n    spans.find((span) => match(span.ref))?.start;\n\n  if (block.type === \"heading\") {\n    return (\n      // Offset, not absolute: Word's \"Heading 1\" is the top of THAT document,\n      // not of the page showing it. Never past h6 — an h7 is not an element.\n      <ProseHeading\n        level={Math.min(6, Math.max(1, block.level + baseHeadingLevel - 1)) as ProseHeadingLevel}\n      >\n        <Runs runs={block.runs} marks={marks} start={startOf(() => true)} />\n      </ProseHeading>\n    );\n  }\n  if (block.type === \"paragraph\") {\n    return (\n      <ProseText className=\"whitespace-pre-wrap\">\n        <Runs runs={block.runs} marks={marks} start={startOf(() => true)} />\n      </ProseText>\n    );\n  }\n  if (block.type === \"list\") {\n    return (\n      <ProseList ordered={block.ordered}>\n        {block.items.map((item, index) => {\n          // The bullet is in the projection but not in the DOM — the list\n          // element draws it — so an item's own text starts after it.\n          const start = startOf((ref) => ref.item === index);\n          return (\n            <ProseListItem key={index}>\n              <Runs\n                runs={item}\n                marks={marks}\n                start={start === undefined ? undefined : start + DOCX_LIST_BULLET.length}\n              />\n            </ProseListItem>\n          );\n        })}\n      </ProseList>\n    );\n  }\n  if (block.type === \"image\") {\n    return (\n      <UiImage\n        src={block.src}\n        // The document's own alt text when the author wrote one. An image with\n        // none is decoration as far as the reader can tell, and a filename would\n        // be noise, not a description.\n        alt={block.alt ?? \"\"}\n        {...(block.alt ? {} : { \"aria-hidden\": true })}\n        // A broken embedded image renders nothing rather than ui's placeholder\n        // box: the document reads on without it.\n        fallback={null}\n        loading=\"lazy\"\n        className=\"my-2 h-auto rounded-md\"\n      />\n    );\n  }\n  const headStart = startOf((ref) => ref.row === DOCX_HEAD_ROW);\n  return (\n    <Table className=\"my-2\">\n      {block.head && (\n        <TableHeader>\n          <TableRow>\n            {block.head.map((cell, index) => (\n              <TableHead key={index} scope=\"col\">\n                <MarkedText\n                  text={cell}\n                  marks={marks}\n                  start={cellStart(block.head ?? [], index, headStart)}\n                />\n              </TableHead>\n            ))}\n          </TableRow>\n        </TableHeader>\n      )}\n      <TableBody>\n        {block.rows.map((row, rowIndex) => {\n          const rowStart = startOf((ref) => ref.row === rowIndex);\n          return (\n            <TableRow key={rowIndex}>\n              {row.map((cell, cellIndex) => (\n                <TableCell key={cellIndex} className=\"whitespace-pre-wrap align-top\">\n                  <MarkedText\n                    text={cell}\n                    marks={marks}\n                    start={cellStart(row, cellIndex, rowStart)}\n                  />\n                </TableCell>\n              ))}\n            </TableRow>\n          );\n        })}\n      </TableBody>\n    </Table>\n  );\n}\n\nfunction DocxRenderer({\n  document: doc,\n  className,\n  baseHeadingLevel = 2,\n  highlights,\n  activeHighlightId,\n}: AdapterRendererProps) {\n  const docx = doc as DocxDocument;\n  const { t } = useLocale();\n  const container = useRef<HTMLElement>(null);\n\n  const marks = useMemo(\n    () => toMarkRanges(highlights, docx.text?.length ?? 0),\n    [highlights, docx.text],\n  );\n  // Grouped once per document rather than searched per block: a long report is\n  // thousands of blocks, and a linear scan inside the render loop would make it\n  // quadratic on every keystroke of a find-as-you-type.\n  const spansByBlock = useMemo(() => {\n    const map = new Map<number, TextSpan<DocxRef>[]>();\n    for (const span of docx.textIndex?.spans ?? []) {\n      const list = map.get(span.ref.block);\n      if (list) list.push(span);\n      else map.set(span.ref.block, [span]);\n    }\n    return map;\n  }, [docx.textIndex]);\n\n  useScrollActiveHighlightIntoView(container, activeHighlightId);\n\n  if (docx.blocks.length === 0) {\n    return (\n      <div className={cn(\"flex min-h-full flex-col justify-center p-4\", className)}>\n        <StatePanel kind=\"empty\" title={t(\"viewer.docx.empty\")} />\n      </div>\n    );\n  }\n\n  return (\n    // `max-w-prose` because this is genuine multi-sentence prose in a pane that\n    // can be very wide — the one case styling-and-tokens.md says to cap the\n    // measure. Centred so the column does not hug one edge. No `overflow-auto`:\n    // `FileViewerContent` is the scroll boundary, and a second one clips the\n    // last paragraph above the outer pane's padding.\n    <article ref={container} className={cn(\"mx-auto max-w-prose space-y-2\", className)}>\n      {docx.blocks.map((block, index) => (\n        <Block\n          key={index}\n          block={block}\n          baseHeadingLevel={baseHeadingLevel}\n          marks={marks}\n          spans={spansByBlock.get(index) ?? EMPTY_SPANS}\n        />\n      ))}\n    </article>\n  );\n}\n\nconst adapterModule: AdapterModule = {\n  manifest: docxManifest,\n  create: () => new DocxAdapter(),\n  Renderer: DocxRenderer,\n};\n\nexport default adapterModule;\n"],"mappings":"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","names":[]}

package/dist/adapters/image/image-adapter.js

@@ -9,7 +9,7 @@ import {
 import "../../chunk-CIT2HHRI.js";
 
 // src/adapters/image/image-adapter.tsx
-import { cn, StatePanel, useLocale } from "@elabs-ai/components-ui";
+import { cn, StatePanel, Image as UiImage, useLocale } from "@elabs-ai/components-ui";
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 function measure(url, signal) {
@@ -70,15 +70,17 @@ function ImageRenderer({
   const scaled = fitting || image.width === void 0 || image.height === void 0 ? void 0 : { width: image.width * zoom, height: image.height * zoom };
   const boxed = quarter && scaled !== void 0;
   const img = /* @__PURE__ */ jsx(
-    "img",
+    UiImage,
     {
       src: image.url,
       alt: source.alt ?? "",
       width: image.width,
       height: image.height,
+      fit: "contain",
+      showSkeleton: false,
+      fallback: null,
       onError: () => setFailed(true),
       className: cn(
-        "block object-contain",
         !quarter && zoom === "fit-page" && "max-h-full max-w-full",
         !quarter && zoom === "fit-width" && "h-auto max-w-full",
         // Turned on its side, the pane's HEIGHT caps the image's width and its

package/dist/adapters/image/image-adapter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/adapters/image/image-adapter.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Image adapter — the reference implementation of \"adapters emit data\".\n *\n * It renders an `<img>`, never a `<canvas>`. anyview draws images to a canvas\n * (`ImageAdapter.ts:118`, `PageRenderer.tsx:128`), which throws away the alt\n * text, the browser's own decoding and zoom, and the ability to select or save\n * the image — with no route back, because its API has no alt-text path at all.\n * Here the description travels on the `FileSource` itself, so a screen reader\n * user gets the same information a sighted user does.\n */\n\nimport { cn, StatePanel, useLocale } from \"@elabs-ai/components-ui\";\nimport { useEffect, useState } from \"react\";\n\nimport type {\n  AdapterDocument,\n  AdapterLoadContext,\n  AdapterModule,\n  AdapterRendererProps,\n  FileAdapter,\n} from \"../../core/types\";\nimport { imageManifest } from \"./image-manifest\";\nimport { toViewerError } from \"../../core/errors\";\nimport type { ResolvedFileSource } from \"@elabs-ai/components-ui\";\n\nexport interface ImageDocument extends AdapterDocument {\n  kind: \"image\";\n  /** A URL an `<img>` can load — the source's own URL, or a minted object URL. */\n  url: string;\n  /** Intrinsic size, once decoded. Used to reserve the box and to label the file. */\n  width?: number;\n  height?: number;\n}\n\n/** Decode just enough to learn the intrinsic size. Never rejects the load. */\nfunction measure(\n  url: string,\n  signal?: AbortSignal,\n): Promise<{ width: number; height: number } | undefined> {\n  if (typeof Image !== \"function\") return Promise.resolve(undefined);\n  return new Promise((resolve) => {\n    const img = new Image();\n    const done = (value?: { width: number; height: number }) => {\n      img.onload = null;\n      img.onerror = null;\n      resolve(value);\n    };\n    img.onload = () => done({ width: img.naturalWidth, height: img.naturalHeight });\n    // A measurement failure is not a load failure — the <img> will surface it.\n    img.onerror = () => done(undefined);\n    signal?.addEventListener(\"abort\", () => done(undefined), { once: true });\n    img.src = url;\n  });\n}\n\nclass ImageAdapter implements FileAdapter {\n  #source?: ResolvedFileSource;\n\n  async load(source: ResolvedFileSource, context: AdapterLoadContext): Promise<ImageDocument> {\n    this.#source = source;\n    try {\n      const url = await source.url(context.signal);\n      const size = await measure(url, context.signal);\n      return { kind: \"image\", url, ...size };\n    } catch (error) {\n      throw toViewerError(error, \"read-failed\", { fileName: source.name });\n    }\n  }\n\n  dispose(): void {\n    // Releases the object URL this load minted, if any. A remote public image\n    // never minted one, and `revoke()` is a no-op there.\n    this.#source?.revoke();\n    this.#source = undefined;\n  }\n}\n\nfunction ImageRenderer({\n  document: doc,\n  source,\n  className,\n  zoom = \"fit-page\",\n  rotation = 0,\n}: AdapterRendererProps) {\n  const image = doc as ImageDocument;\n  const { t } = useLocale();\n  const [failed, setFailed] = useState(false);\n\n  useEffect(() => setFailed(false), [image.url]);\n\n  if (failed) {\n    // A terminal, settled failure (loading-states.md): the browser tried and\n    // gave up, so this is not a transient not-ready state.\n    return (\n      <div className={cn(\"flex min-h-full flex-col justify-center p-4\", className)}>\n        <StatePanel\n          kind=\"error\"\n          title={t(\"viewer.error.imageFailedTitle\")}\n          description={t(\"viewer.error.imageFailed\", { name: source.name })}\n        />\n      </div>\n    );\n  }\n\n  const fitting = typeof zoom !== \"number\";\n  // A quarter turn swaps the axes: what was the image's height is now the width\n  // the reader sees. Everything below that treats 90/270 differently is that one\n  // fact — 180 leaves the bounds alone and needs none of it.\n  const quarter = rotation === 90 || rotation === 270;\n  const scaled =\n    fitting || image.width === undefined || image.height === undefined\n      ? undefined\n      : { width: image.width * zoom, height: image.height * zoom };\n  // A `transform` does not change layout, so a turned image at a fixed scale\n  // needs a box with the ROTATED bounds. Without one it overflows the pane on\n  // every side, and the half above the top edge is unreachable — scrolling only\n  // ever reaches transform overflow past the END edges.\n  const boxed = quarter && scaled !== undefined;\n\n  const img = (\n    <img\n      src={image.url}\n      // An image with no author description is decorative to AT — an empty alt\n      // is correct and deliberate, not a missing label.\n      alt={source.alt ?? \"\"}\n      width={image.width}\n      height={image.height}\n      onError={() => setFailed(true)}\n      className={cn(\n        \"block object-contain\",\n        !quarter && zoom === \"fit-page\" && \"max-h-full max-w-full\",\n        !quarter && zoom === \"fit-width\" && \"h-auto max-w-full\",\n        // Turned on its side, the pane's HEIGHT caps the image's width and its\n        // width caps the height. Container units read the pane directly, so the\n        // fit needs no measurement. Both fit modes converge here deliberately:\n        // an image whose rotated width filled the pane would overflow the top\n        // edge as well, which is the unreachable half described above.\n        fitting && quarter && \"max-h-[100cqw] max-w-[100cqh]\",\n        // At a fixed scale the intrinsic cap has to come off, or \"200%\" would\n        // silently stop at the pane's width.\n        !fitting && \"max-w-none\",\n        boxed && \"absolute top-1/2 left-1/2\",\n      )}\n      style={{\n        ...scaled,\n        ...(rotation === 0\n          ? undefined\n          : {\n              transform: boxed\n                ? `translate(-50%, -50%) rotate(${rotation}deg)`\n                : `rotate(${rotation}deg)`,\n            }),\n      }}\n    />\n  );\n\n  return (\n    // Centred on both axes: a small image pinned to the top-left of a tall pane\n    // reads as a layout accident. While fitting, the box takes the pane's height\n    // so `max-h-full` has something definite to resolve against; at a fixed\n    // scale it grows instead, and `FileViewerContent` scrolls it.\n    <div\n      className={cn(\n        \"flex items-center justify-center\",\n        fitting ? \"h-full\" : \"min-h-full\",\n        // Only a size container can answer `cqh`, and only a definite height\n        // makes one — which is exactly the fitting case.\n        fitting && quarter && \"[container-type:size]\",\n        className,\n      )}\n    >\n      {quarter && scaled ? (\n        <div className=\"relative shrink-0\" style={{ width: scaled.height, height: scaled.width }}>\n          {img}\n        </div>\n      ) : (\n        img\n      )}\n    </div>\n  );\n}\n\nconst adapterModule: AdapterModule = {\n  manifest: imageManifest,\n  create: () => new ImageAdapter(),\n  Renderer: ImageRenderer,\n};\n\nexport default adapterModule;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/adapters/image/image-adapter.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Image adapter — the reference implementation of \"adapters emit data\".\n *\n * It renders an `<img>` (through ui `Image`, ADR 0041), never a `<canvas>`. anyview draws images to a canvas\n * (`ImageAdapter.ts:118`, `PageRenderer.tsx:128`), which throws away the alt\n * text, the browser's own decoding and zoom, and the ability to select or save\n * the image — with no route back, because its API has no alt-text path at all.\n * Here the description travels on the `FileSource` itself, so a screen reader\n * user gets the same information a sighted user does.\n */\n\n// Aliased on purpose: `measure()` below uses the GLOBAL `Image` constructor, and\n// an unaliased import would shadow it silently (`typeof Image` would still be\n// \"function\", so nothing would fail loudly).\nimport { cn, StatePanel, Image as UiImage, useLocale } from \"@elabs-ai/components-ui\";\nimport { useEffect, useState } from \"react\";\n\nimport type {\n  AdapterDocument,\n  AdapterLoadContext,\n  AdapterModule,\n  AdapterRendererProps,\n  FileAdapter,\n} from \"../../core/types\";\nimport { imageManifest } from \"./image-manifest\";\nimport { toViewerError } from \"../../core/errors\";\nimport type { ResolvedFileSource } from \"@elabs-ai/components-ui\";\n\nexport interface ImageDocument extends AdapterDocument {\n  kind: \"image\";\n  /** A URL an `<img>` can load — the source's own URL, or a minted object URL. */\n  url: string;\n  /** Intrinsic size, once decoded. Used to reserve the box and to label the file. */\n  width?: number;\n  height?: number;\n}\n\n/** Decode just enough to learn the intrinsic size. Never rejects the load. */\nfunction measure(\n  url: string,\n  signal?: AbortSignal,\n): Promise<{ width: number; height: number } | undefined> {\n  if (typeof Image !== \"function\") return Promise.resolve(undefined);\n  return new Promise((resolve) => {\n    const img = new Image();\n    const done = (value?: { width: number; height: number }) => {\n      img.onload = null;\n      img.onerror = null;\n      resolve(value);\n    };\n    img.onload = () => done({ width: img.naturalWidth, height: img.naturalHeight });\n    // A measurement failure is not a load failure — the <img> will surface it.\n    img.onerror = () => done(undefined);\n    signal?.addEventListener(\"abort\", () => done(undefined), { once: true });\n    img.src = url;\n  });\n}\n\nclass ImageAdapter implements FileAdapter {\n  #source?: ResolvedFileSource;\n\n  async load(source: ResolvedFileSource, context: AdapterLoadContext): Promise<ImageDocument> {\n    this.#source = source;\n    try {\n      const url = await source.url(context.signal);\n      const size = await measure(url, context.signal);\n      return { kind: \"image\", url, ...size };\n    } catch (error) {\n      throw toViewerError(error, \"read-failed\", { fileName: source.name });\n    }\n  }\n\n  dispose(): void {\n    // Releases the object URL this load minted, if any. A remote public image\n    // never minted one, and `revoke()` is a no-op there.\n    this.#source?.revoke();\n    this.#source = undefined;\n  }\n}\n\nfunction ImageRenderer({\n  document: doc,\n  source,\n  className,\n  zoom = \"fit-page\",\n  rotation = 0,\n}: AdapterRendererProps) {\n  const image = doc as ImageDocument;\n  const { t } = useLocale();\n  const [failed, setFailed] = useState(false);\n\n  useEffect(() => setFailed(false), [image.url]);\n\n  if (failed) {\n    // A terminal, settled failure (loading-states.md): the browser tried and\n    // gave up, so this is not a transient not-ready state.\n    return (\n      <div className={cn(\"flex min-h-full flex-col justify-center p-4\", className)}>\n        <StatePanel\n          kind=\"error\"\n          title={t(\"viewer.error.imageFailedTitle\")}\n          description={t(\"viewer.error.imageFailed\", { name: source.name })}\n        />\n      </div>\n    );\n  }\n\n  const fitting = typeof zoom !== \"number\";\n  // A quarter turn swaps the axes: what was the image's height is now the width\n  // the reader sees. Everything below that treats 90/270 differently is that one\n  // fact — 180 leaves the bounds alone and needs none of it.\n  const quarter = rotation === 90 || rotation === 270;\n  const scaled =\n    fitting || image.width === undefined || image.height === undefined\n      ? undefined\n      : { width: image.width * zoom, height: image.height * zoom };\n  // A `transform` does not change layout, so a turned image at a fixed scale\n  // needs a box with the ROTATED bounds. Without one it overflows the pane on\n  // every side, and the half above the top edge is unreachable — scrolling only\n  // ever reaches transform overflow past the END edges.\n  const boxed = quarter && scaled !== undefined;\n\n  const img = (\n    <UiImage\n      src={image.url}\n      // An image with no author description is decorative to AT — an empty alt\n      // is correct and deliberate, not a missing label.\n      alt={source.alt ?? \"\"}\n      width={image.width}\n      height={image.height}\n      // `contain` keeps the letterboxing the fit caps below rely on. Zoom and\n      // rotation stay adapter-owned (ADR 0026), so no skeleton frame: the bare\n      // <img> is the root and every class and style lands on it. The adapter's\n      // own `failed` state below owns the error UI; ui's fallback never mounts.\n      fit=\"contain\"\n      showSkeleton={false}\n      fallback={null}\n      onError={() => setFailed(true)}\n      className={cn(\n        !quarter && zoom === \"fit-page\" && \"max-h-full max-w-full\",\n        !quarter && zoom === \"fit-width\" && \"h-auto max-w-full\",\n        // Turned on its side, the pane's HEIGHT caps the image's width and its\n        // width caps the height. Container units read the pane directly, so the\n        // fit needs no measurement. Both fit modes converge here deliberately:\n        // an image whose rotated width filled the pane would overflow the top\n        // edge as well, which is the unreachable half described above.\n        fitting && quarter && \"max-h-[100cqw] max-w-[100cqh]\",\n        // At a fixed scale the intrinsic cap has to come off, or \"200%\" would\n        // silently stop at the pane's width.\n        !fitting && \"max-w-none\",\n        boxed && \"absolute top-1/2 left-1/2\",\n      )}\n      style={{\n        ...scaled,\n        ...(rotation === 0\n          ? undefined\n          : {\n              transform: boxed\n                ? `translate(-50%, -50%) rotate(${rotation}deg)`\n                : `rotate(${rotation}deg)`,\n            }),\n      }}\n    />\n  );\n\n  return (\n    // Centred on both axes: a small image pinned to the top-left of a tall pane\n    // reads as a layout accident. While fitting, the box takes the pane's height\n    // so `max-h-full` has something definite to resolve against; at a fixed\n    // scale it grows instead, and `FileViewerContent` scrolls it.\n    <div\n      className={cn(\n        \"flex items-center justify-center\",\n        fitting ? \"h-full\" : \"min-h-full\",\n        // Only a size container can answer `cqh`, and only a definite height\n        // makes one — which is exactly the fitting case.\n        fitting && quarter && \"[container-type:size]\",\n        className,\n      )}\n    >\n      {quarter && scaled ? (\n        <div className=\"relative shrink-0\" style={{ width: scaled.height, height: scaled.width }}>\n          {img}\n        </div>\n      ) : (\n        img\n      )}\n    </div>\n  );\n}\n\nconst adapterModule: AdapterModule = {\n  manifest: imageManifest,\n  create: () => new ImageAdapter(),\n  Renderer: ImageRenderer,\n};\n\nexport default adapterModule;\n"],"mappings":"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","names":[]}

package/dist/adapters/index.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   createDefaultRegistry
-} from "../chunk-QIPKBOZJ.js";
+} from "../chunk-IZG6TYQQ.js";
 import "../chunk-BWMXMHVZ.js";
 import {
   pptxManifest

package/dist/adapters/media/media-adapter.js

@@ -9,7 +9,13 @@ import {
 import "../../chunk-CIT2HHRI.js";
 
 // src/adapters/media/media-adapter.tsx
-import { cn, StatePanel, useLocale } from "@elabs-ai/components-ui";
+import {
+  Audio,
+  cn,
+  StatePanel,
+  useLocale,
+  Video
+} from "@elabs-ai/components-ui";
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 var MediaAdapter = class {
@@ -45,25 +51,25 @@ function MediaRenderer({ document: doc, source, className }) {
   }
   const label = t("viewer.media.label", { name: source.name });
   if (media.media === "audio") {
-    return /* @__PURE__ */ jsx("div", { className: cn("flex min-h-full items-center justify-center", className), children: /* @__PURE__ */ jsx(
-      "audio",
+    return /* @__PURE__ */ jsx("div", { className: cn("flex min-h-full items-center justify-center p-4", className), children: /* @__PURE__ */ jsx(
+      Audio,
       {
         src: media.url,
-        controls: true,
-        "aria-label": label,
+        preload: "metadata",
+        label,
         onError: () => setFailed(true),
         className: "w-full max-w-lg"
       }
     ) });
   }
-  return /* @__PURE__ */ jsx("div", { className: cn("flex min-h-full items-center justify-center", className), children: /* @__PURE__ */ jsx(
-    "video",
+  return /* @__PURE__ */ jsx("div", { className: cn("flex min-h-full items-center justify-center p-4", className), children: /* @__PURE__ */ jsx(
+    Video,
     {
       src: media.url,
-      controls: true,
-      "aria-label": label,
+      preload: "metadata",
+      label,
       onError: () => setFailed(true),
-      className: "max-h-full max-w-full"
+      className: "w-full max-w-4xl"
     }
   ) });
 }

package/dist/adapters/media/media-adapter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/adapters/media/media-adapter.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Video / audio adapter — native elements, deliberately.\n *\n * `@elabs-ai/components-ai` ships a designed `AudioPlayer` built on\n * `media-chrome`, and this adapter does NOT reach for it: `ai` is a Layer-2\n * sibling, so importing it would be a sideways edge the dependency gate rejects\n * (and would pull a chat package into a file viewer). Native `<video controls>`\n * / `<audio controls>` are the honest answer here — they bring the platform's\n * own accessible transport, keyboard handling, picture-in-picture, captions\n * menu and OS media keys, none of which a custom skin gets for free.\n *\n * The plan's \"extract `AudioPlayer` down to `ui`\" would let both sides share one\n * skinned player. That is a real refactor of an existing component with its own\n * tests and stories, so it is tracked separately rather than smuggled in here.\n */\n\nimport { cn, StatePanel, useLocale, type ResolvedFileSource } from \"@elabs-ai/components-ui\";\nimport { useEffect, useState } from \"react\";\n\nimport { toViewerError } from \"../../core/errors\";\nimport type {\n  AdapterDocument,\n  AdapterLoadContext,\n  AdapterModule,\n  AdapterRendererProps,\n  FileAdapter,\n} from \"../../core/types\";\nimport { mediaManifest } from \"./media-manifest\";\n\nexport interface MediaDocument extends AdapterDocument {\n  kind: \"media\";\n  /** A URL the element can play — the source's own URL, or a minted object URL. */\n  url: string;\n  /** Which element to render. `resolveFileKind` already decided this. */\n  media: \"video\" | \"audio\";\n}\n\nclass MediaAdapter implements FileAdapter {\n  #source?: ResolvedFileSource;\n\n  async load(source: ResolvedFileSource, context: AdapterLoadContext): Promise<MediaDocument> {\n    this.#source = source;\n    try {\n      // Deliberately `url()`, never `bytes()`: an object URL lets the browser\n      // stream and seek. Buffering a 2 GB video into memory to hand it to a\n      // `<video>` element would be the wrong shape at every size.\n      const url = await source.url(context.signal);\n      return { kind: \"media\", url, media: source.category === \"audio\" ? \"audio\" : \"video\" };\n    } catch (error) {\n      throw toViewerError(error, \"read-failed\", { fileName: source.name });\n    }\n  }\n\n  dispose(): void {\n    this.#source?.revoke();\n    this.#source = undefined;\n  }\n}\n\nfunction MediaRenderer({ document: doc, source, className }: AdapterRendererProps) {\n  const media = doc as MediaDocument;\n  const { t } = useLocale();\n  const [failed, setFailed] = useState(false);\n\n  useEffect(() => setFailed(false), [media.url]);\n\n  if (failed) {\n    // Terminal: the browser has no decoder for this codec. Retrying cannot help,\n    // so this states the fact rather than offering a button that does nothing.\n    // The panel carries `role=\"alert\"` itself, and sits centred like every other\n    // viewer state — a message pinned to the top-left of an empty pane reads as\n    // a broken render.\n    return (\n      <div className={cn(\"flex min-h-full flex-col justify-center p-4\", className)}>\n        <StatePanel\n          kind=\"error\"\n          title={t(\"viewer.media.unsupportedTitle\")}\n          description={t(\"viewer.media.unsupported\", { name: source.name })}\n        />\n      </div>\n    );\n  }\n\n  const label = t(\"viewer.media.label\", { name: source.name });\n\n  if (media.media === \"audio\") {\n    return (\n      <div className={cn(\"flex min-h-full items-center justify-center\", className)}>\n        <audio\n          src={media.url}\n          controls\n          aria-label={label}\n          onError={() => setFailed(true)}\n          className=\"w-full max-w-lg\"\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(\"flex min-h-full items-center justify-center\", className)}>\n      <video\n        src={media.url}\n        controls\n        // No autoplay: a viewer opens files the reader chose to look at, not to\n        // listen to. Sound starting on its own is the reason browsers block it.\n        aria-label={label}\n        onError={() => setFailed(true)}\n        className=\"max-h-full max-w-full\"\n      />\n    </div>\n  );\n}\n\nconst adapterModule: AdapterModule = {\n  manifest: mediaManifest,\n  create: () => new MediaAdapter(),\n  Renderer: MediaRenderer,\n};\n\nexport default adapterModule;\n"],"mappings":";;;;;;;;;;;AAkBA,SAAS,IAAI,YAAY,iBAA0C;AACnE,SAAS,WAAW,gBAAgB;AAyD5B;AArCR,IAAM,eAAN,MAA0C;AAAA,EACxC;AAAA,EAEA,MAAM,KAAK,QAA4B,SAAqD;AAC1F,SAAK,UAAU;AACf,QAAI;AAIF,YAAM,MAAM,MAAM,OAAO,IAAI,QAAQ,MAAM;AAC3C,aAAO,EAAE,MAAM,SAAS,KAAK,OAAO,OAAO,aAAa,UAAU,UAAU,QAAQ;AAAA,IACtF,SAAS,OAAO;AACd,YAAM,cAAc,OAAO,eAAe,EAAE,UAAU,OAAO,KAAK,CAAC;AAAA,IACrE;AAAA,EACF;AAAA,EAEA,UAAgB;AACd,SAAK,SAAS,OAAO;AACrB,SAAK,UAAU;AAAA,EACjB;AACF;AAEA,SAAS,cAAc,EAAE,UAAU,KAAK,QAAQ,UAAU,GAAyB;AACjF,QAAM,QAAQ;AACd,QAAM,EAAE,EAAE,IAAI,UAAU;AACxB,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,YAAU,MAAM,UAAU,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC;AAE7C,MAAI,QAAQ;AAMV,WACE,oBAAC,SAAI,WAAW,GAAG,+CAA+C,SAAS,GACzE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO,EAAE,+BAA+B;AAAA,QACxC,aAAa,EAAE,4BAA4B,EAAE,MAAM,OAAO,KAAK,CAAC;AAAA;AAAA,IAClE,GACF;AAAA,EAEJ;AAEA,QAAM,QAAQ,EAAE,sBAAsB,EAAE,MAAM,OAAO,KAAK,CAAC;AAE3D,MAAI,MAAM,UAAU,SAAS;AAC3B,WACE,oBAAC,SAAI,WAAW,GAAG,+CAA+C,SAAS,GACzE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,MAAM;AAAA,QACX,UAAQ;AAAA,QACR,cAAY;AAAA,QACZ,SAAS,MAAM,UAAU,IAAI;AAAA,QAC7B,WAAU;AAAA;AAAA,IACZ,GACF;AAAA,EAEJ;AAEA,SACE,oBAAC,SAAI,WAAW,GAAG,+CAA+C,SAAS,GACzE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,MAAM;AAAA,MACX,UAAQ;AAAA,MAGR,cAAY;AAAA,MACZ,SAAS,MAAM,UAAU,IAAI;AAAA,MAC7B,WAAU;AAAA;AAAA,EACZ,GACF;AAEJ;AAEA,IAAM,gBAA+B;AAAA,EACnC,UAAU;AAAA,EACV,QAAQ,MAAM,IAAI,aAAa;AAAA,EAC/B,UAAU;AACZ;AAEA,IAAO,wBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/adapters/media/media-adapter.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Video / audio adapter — renders ui `Audio` / `Video` (ADR 0041).\n *\n * The player lives in `@elabs-ai/components-ui`, one layer down, so the viewer\n * composes it without a sideways edge into `@elabs-ai/components-ai` (whose\n * `AudioPlayer` is itself a preset over the same `MediaPlayer*` parts). That\n * gives token-styled controls that follow the theme, keyboard shortcuts on the\n * player root, and one loading / error model — where the browser's native\n * chrome ignored tokens and differed per engine.\n *\n * An undecodable file is still the adapter's call: the element's `error` event\n * swaps the whole player for the viewer's own `StatePanel`, so ui's compact\n * error panel never shows here.\n */\n\nimport {\n  Audio,\n  cn,\n  StatePanel,\n  useLocale,\n  Video,\n  type ResolvedFileSource,\n} from \"@elabs-ai/components-ui\";\nimport { useEffect, useState } from \"react\";\n\nimport { toViewerError } from \"../../core/errors\";\nimport type {\n  AdapterDocument,\n  AdapterLoadContext,\n  AdapterModule,\n  AdapterRendererProps,\n  FileAdapter,\n} from \"../../core/types\";\nimport { mediaManifest } from \"./media-manifest\";\n\nexport interface MediaDocument extends AdapterDocument {\n  kind: \"media\";\n  /** A URL the element can play — the source's own URL, or a minted object URL. */\n  url: string;\n  /** Which element to render. `resolveFileKind` already decided this. */\n  media: \"video\" | \"audio\";\n}\n\nclass MediaAdapter implements FileAdapter {\n  #source?: ResolvedFileSource;\n\n  async load(source: ResolvedFileSource, context: AdapterLoadContext): Promise<MediaDocument> {\n    this.#source = source;\n    try {\n      // Deliberately `url()`, never `bytes()`: an object URL lets the browser\n      // stream and seek. Buffering a 2 GB video into memory to hand it to a\n      // `<video>` element would be the wrong shape at every size.\n      const url = await source.url(context.signal);\n      return { kind: \"media\", url, media: source.category === \"audio\" ? \"audio\" : \"video\" };\n    } catch (error) {\n      throw toViewerError(error, \"read-failed\", { fileName: source.name });\n    }\n  }\n\n  dispose(): void {\n    this.#source?.revoke();\n    this.#source = undefined;\n  }\n}\n\nfunction MediaRenderer({ document: doc, source, className }: AdapterRendererProps) {\n  const media = doc as MediaDocument;\n  const { t } = useLocale();\n  const [failed, setFailed] = useState(false);\n\n  useEffect(() => setFailed(false), [media.url]);\n\n  if (failed) {\n    // Terminal: the browser has no decoder for this codec. Retrying cannot help,\n    // so this states the fact rather than offering a button that does nothing.\n    // The panel carries `role=\"alert\"` itself, and sits centred like every other\n    // viewer state — a message pinned to the top-left of an empty pane reads as\n    // a broken render.\n    return (\n      <div className={cn(\"flex min-h-full flex-col justify-center p-4\", className)}>\n        <StatePanel\n          kind=\"error\"\n          title={t(\"viewer.media.unsupportedTitle\")}\n          description={t(\"viewer.media.unsupported\", { name: source.name })}\n        />\n      </div>\n    );\n  }\n\n  const label = t(\"viewer.media.label\", { name: source.name });\n\n  if (media.media === \"audio\") {\n    return (\n      <div className={cn(\"flex min-h-full items-center justify-center p-4\", className)}>\n        <Audio\n          src={media.url}\n          preload=\"metadata\"\n          label={label}\n          onError={() => setFailed(true)}\n          className=\"w-full max-w-lg\"\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(\"flex min-h-full items-center justify-center p-4\", className)}>\n      {/* No autoplay: a viewer opens files the reader chose to look at, not to\n          listen to. Sound starting on its own is the reason browsers block it.\n          No `aspectRatio`: an arbitrary file's ratio is unknown until metadata\n          loads, so the video sizes by its own intrinsic dimensions inside a\n          width cap, and the pane scrolls if a tall one outgrows it. */}\n      <Video\n        src={media.url}\n        preload=\"metadata\"\n        label={label}\n        onError={() => setFailed(true)}\n        className=\"w-full max-w-4xl\"\n      />\n    </div>\n  );\n}\n\nconst adapterModule: AdapterModule = {\n  manifest: mediaManifest,\n  create: () => new MediaAdapter(),\n  Renderer: MediaRenderer,\n};\n\nexport default adapterModule;\n"],"mappings":";;;;;;;;;;;AAiBA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,WAAW,gBAAgB;AAyD5B;AArCR,IAAM,eAAN,MAA0C;AAAA,EACxC;AAAA,EAEA,MAAM,KAAK,QAA4B,SAAqD;AAC1F,SAAK,UAAU;AACf,QAAI;AAIF,YAAM,MAAM,MAAM,OAAO,IAAI,QAAQ,MAAM;AAC3C,aAAO,EAAE,MAAM,SAAS,KAAK,OAAO,OAAO,aAAa,UAAU,UAAU,QAAQ;AAAA,IACtF,SAAS,OAAO;AACd,YAAM,cAAc,OAAO,eAAe,EAAE,UAAU,OAAO,KAAK,CAAC;AAAA,IACrE;AAAA,EACF;AAAA,EAEA,UAAgB;AACd,SAAK,SAAS,OAAO;AACrB,SAAK,UAAU;AAAA,EACjB;AACF;AAEA,SAAS,cAAc,EAAE,UAAU,KAAK,QAAQ,UAAU,GAAyB;AACjF,QAAM,QAAQ;AACd,QAAM,EAAE,EAAE,IAAI,UAAU;AACxB,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,YAAU,MAAM,UAAU,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC;AAE7C,MAAI,QAAQ;AAMV,WACE,oBAAC,SAAI,WAAW,GAAG,+CAA+C,SAAS,GACzE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO,EAAE,+BAA+B;AAAA,QACxC,aAAa,EAAE,4BAA4B,EAAE,MAAM,OAAO,KAAK,CAAC;AAAA;AAAA,IAClE,GACF;AAAA,EAEJ;AAEA,QAAM,QAAQ,EAAE,sBAAsB,EAAE,MAAM,OAAO,KAAK,CAAC;AAE3D,MAAI,MAAM,UAAU,SAAS;AAC3B,WACE,oBAAC,SAAI,WAAW,GAAG,mDAAmD,SAAS,GAC7E;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,MAAM;AAAA,QACX,SAAQ;AAAA,QACR;AAAA,QACA,SAAS,MAAM,UAAU,IAAI;AAAA,QAC7B,WAAU;AAAA;AAAA,IACZ,GACF;AAAA,EAEJ;AAEA,SACE,oBAAC,SAAI,WAAW,GAAG,mDAAmD,SAAS,GAM7E;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,MAAM;AAAA,MACX,SAAQ;AAAA,MACR;AAAA,MACA,SAAS,MAAM,UAAU,IAAI;AAAA,MAC7B,WAAU;AAAA;AAAA,EACZ,GACF;AAEJ;AAEA,IAAM,gBAA+B;AAAA,EACnC,UAAU;AAAA,EACV,QAAQ,MAAM,IAAI,aAAa;AAAA,EAC/B,UAAU;AACZ;AAEA,IAAO,wBAAQ;","names":[]}

package/dist/{chunk-T4Y4YRHJ.js → chunk-F2EZVKZN.js}

@@ -27,7 +27,7 @@ import {
 } from "./chunk-SASY77ZL.js";
 import {
   createDefaultRegistry
-} from "./chunk-QIPKBOZJ.js";
+} from "./chunk-IZG6TYQQ.js";
 import {
   ViewerError,
   isAbort,
@@ -730,4 +730,4 @@ export {
   FileViewerContent,
   FileViewer
 };
-//# sourceMappingURL=chunk-T4Y4YRHJ.js.map
+//# sourceMappingURL=chunk-F2EZVKZN.js.map

package/dist/{chunk-QIPKBOZJ.js → chunk-IZG6TYQQ.js}

@@ -56,4 +56,4 @@ function createDefaultRegistry() {
 export {
   createDefaultRegistry
 };
-//# sourceMappingURL=chunk-QIPKBOZJ.js.map
+//# sourceMappingURL=chunk-IZG6TYQQ.js.map

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

@@ -10,7 +10,7 @@ import {
   FileViewerProvider,
   FileViewerSkeleton,
   FileViewerToolbar
-} from "../chunk-T4Y4YRHJ.js";
+} from "../chunk-F2EZVKZN.js";
 import "../chunk-PAIVK4N6.js";
 import "../chunk-LRPZ373O.js";
 import "../chunk-PKYDKXCO.js";
@@ -18,7 +18,7 @@ import "../chunk-CLOI4HBA.js";
 import "../chunk-FQHZEQUH.js";
 import "../chunk-CO2VJRSU.js";
 import "../chunk-SASY77ZL.js";
-import "../chunk-QIPKBOZJ.js";
+import "../chunk-IZG6TYQQ.js";
 import "../chunk-BWMXMHVZ.js";
 import "../chunk-FDT4QOIG.js";
 import "../chunk-ZAVXZRIO.js";

package/dist/index.js

@@ -9,7 +9,7 @@ import {
   FileViewerProvider,
   FileViewerSkeleton,
   FileViewerToolbar
-} from "./chunk-T4Y4YRHJ.js";
+} from "./chunk-F2EZVKZN.js";
 import {
   FileViewerFind,
   isFindShortcut
@@ -46,7 +46,7 @@ import {
 } from "./chunk-SBG7WPGO.js";
 import {
   createDefaultRegistry
-} from "./chunk-QIPKBOZJ.js";
+} from "./chunk-IZG6TYQQ.js";
 import {
   createRegistry,
   scoreManifest

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elabs-ai/components-viewer",
-  "version": "5.3.1",
+  "version": "5.5.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -39,8 +39,8 @@
     "jszip": "^3.10.1",
     "shiki": "^3.22.0",
     "streamdown": "^2.4.0",
-    "@elabs-ai/components-tokens": "^5.3.1",
-    "@elabs-ai/components-ui": "^5.3.1"
+    "@elabs-ai/components-tokens": "^5.5.0",
+    "@elabs-ai/components-ui": "^5.5.0"
   },
   "peerDependenciesMeta": {
     "papaparse": {
@@ -88,9 +88,9 @@
     "typescript": "^5.7.3",
     "vitest": "^3.0.2",
     "@elabs-ai/components-eslint-config": "0.1.0",
-    "@elabs-ai/components-tokens": "5.3.1",
+    "@elabs-ai/components-tokens": "5.5.0",
     "@elabs-ai/components-typescript-config": "0.1.0",
-    "@elabs-ai/components-ui": "5.3.1"
+    "@elabs-ai/components-ui": "5.5.0"
   },
   "scripts": {
     "build": "tsup && node ../../scripts/link-dist-css.mjs",

package/src/adapters/docx/docx-adapter.tsx

@@ -19,6 +19,7 @@
 import type { ProseHeadingLevel, ResolvedFileSource } from "@elabs-ai/components-ui";
 import {
   cn,
+  Image as UiImage,
   ProseHeading,
   ProseLink,
   ProseList,
@@ -210,14 +211,18 @@ function Block({
   }
   if (block.type === "image") {
     return (
-      <img
+      <UiImage
         src={block.src}
         // The document's own alt text when the author wrote one. An image with
         // none is decoration as far as the reader can tell, and a filename would
         // be noise, not a description.
         alt={block.alt ?? ""}
         {...(block.alt ? {} : { "aria-hidden": true })}
-        className="my-2 block h-auto max-w-full rounded-md"
+        // A broken embedded image renders nothing rather than ui's placeholder
+        // box: the document reads on without it.
+        fallback={null}
+        loading="lazy"
+        className="my-2 h-auto rounded-md"
       />
     );
   }

package/src/adapters/image/image-adapter.tsx

@@ -3,7 +3,7 @@
 /**
  * Image adapter — the reference implementation of "adapters emit data".
  *
- * It renders an `<img>`, never a `<canvas>`. anyview draws images to a canvas
+ * It renders an `<img>` (through ui `Image`, ADR 0041), never a `<canvas>`. anyview draws images to a canvas
  * (`ImageAdapter.ts:118`, `PageRenderer.tsx:128`), which throws away the alt
  * text, the browser's own decoding and zoom, and the ability to select or save
  * the image — with no route back, because its API has no alt-text path at all.
@@ -11,7 +11,10 @@
  * user gets the same information a sighted user does.
  */
 
-import { cn, StatePanel, useLocale } from "@elabs-ai/components-ui";
+// Aliased on purpose: `measure()` below uses the GLOBAL `Image` constructor, and
+// an unaliased import would shadow it silently (`typeof Image` would still be
+// "function", so nothing would fail loudly).
+import { cn, StatePanel, Image as UiImage, useLocale } from "@elabs-ai/components-ui";
 import { useEffect, useState } from "react";
 
 import type {
@@ -120,16 +123,22 @@ function ImageRenderer({
   const boxed = quarter && scaled !== undefined;
 
   const img = (
-    <img
+    <UiImage
       src={image.url}
       // An image with no author description is decorative to AT — an empty alt
       // is correct and deliberate, not a missing label.
       alt={source.alt ?? ""}
       width={image.width}
       height={image.height}
+      // `contain` keeps the letterboxing the fit caps below rely on. Zoom and
+      // rotation stay adapter-owned (ADR 0026), so no skeleton frame: the bare
+      // <img> is the root and every class and style lands on it. The adapter's
+      // own `failed` state below owns the error UI; ui's fallback never mounts.
+      fit="contain"
+      showSkeleton={false}
+      fallback={null}
       onError={() => setFailed(true)}
       className={cn(
-        "block object-contain",
         !quarter && zoom === "fit-page" && "max-h-full max-w-full",
         !quarter && zoom === "fit-width" && "h-auto max-w-full",
         // Turned on its side, the pane's HEIGHT caps the image's width and its

package/src/adapters/media/media-adapter.test.tsx

@@ -52,17 +52,24 @@ describe("media adapter — load", () => {
 });
 
 describe("media adapter — rendering", () => {
-  it("renders a native, controllable video with an accessible name", () => {
+  it("renders a controllable ui video player with an accessible name", () => {
     const { container } = renderMedia("video", "briefing.mp4");
+    // The player is named on its region root; the native element carries no
+    // browser chrome — ui's token-styled bar is the transport.
+    const player = screen.getByRole("region", { name: "briefing.mp4 player" });
+    expect(player).toHaveAttribute("data-kind", "video");
+    expect(player.querySelector('[data-slot="media-player-controls"]')).toBeInTheDocument();
     const video = container.querySelector("video");
-    expect(video).toHaveAttribute("controls");
-    expect(video).toHaveAttribute("aria-label", "briefing.mp4 player");
+    expect(video).not.toHaveAttribute("controls");
     // Sound that starts on its own is the reason browsers block autoplay.
     expect(video).not.toHaveAttribute("autoplay");
   });
 
-  it("renders an audio element for audio", () => {
+  it("renders a ui audio player for audio", () => {
     const { container } = renderMedia("audio", "call.mp3");
+    const player = screen.getByRole("region", { name: "call.mp3 player" });
+    expect(player).toHaveAttribute("data-kind", "audio");
+    expect(player.querySelector('[data-slot="media-player-controls"]')).toBeInTheDocument();
     expect(container.querySelector("audio")).toBeInTheDocument();
     expect(container.querySelector("video")).toBeNull();
   });

package/src/adapters/media/media-adapter.tsx

@@ -1,22 +1,28 @@
 "use client";
 
 /**
- * Video / audio adapter — native elements, deliberately.
+ * Video / audio adapter — renders ui `Audio` / `Video` (ADR 0041).
  *
- * `@elabs-ai/components-ai` ships a designed `AudioPlayer` built on
- * `media-chrome`, and this adapter does NOT reach for it: `ai` is a Layer-2
- * sibling, so importing it would be a sideways edge the dependency gate rejects
- * (and would pull a chat package into a file viewer). Native `<video controls>`
- * / `<audio controls>` are the honest answer here — they bring the platform's
- * own accessible transport, keyboard handling, picture-in-picture, captions
- * menu and OS media keys, none of which a custom skin gets for free.
+ * The player lives in `@elabs-ai/components-ui`, one layer down, so the viewer
+ * composes it without a sideways edge into `@elabs-ai/components-ai` (whose
+ * `AudioPlayer` is itself a preset over the same `MediaPlayer*` parts). That
+ * gives token-styled controls that follow the theme, keyboard shortcuts on the
+ * player root, and one loading / error model — where the browser's native
+ * chrome ignored tokens and differed per engine.
  *
- * The plan's "extract `AudioPlayer` down to `ui`" would let both sides share one
- * skinned player. That is a real refactor of an existing component with its own
- * tests and stories, so it is tracked separately rather than smuggled in here.
+ * An undecodable file is still the adapter's call: the element's `error` event
+ * swaps the whole player for the viewer's own `StatePanel`, so ui's compact
+ * error panel never shows here.
  */
 
-import { cn, StatePanel, useLocale, type ResolvedFileSource } from "@elabs-ai/components-ui";
+import {
+  Audio,
+  cn,
+  StatePanel,
+  useLocale,
+  Video,
+  type ResolvedFileSource,
+} from "@elabs-ai/components-ui";
 import { useEffect, useState } from "react";
 
 import { toViewerError } from "../../core/errors";
@@ -87,11 +93,11 @@ function MediaRenderer({ document: doc, source, className }: AdapterRendererProp
 
   if (media.media === "audio") {
     return (
-      <div className={cn("flex min-h-full items-center justify-center", className)}>
-        <audio
+      <div className={cn("flex min-h-full items-center justify-center p-4", className)}>
+        <Audio
           src={media.url}
-          controls
-          aria-label={label}
+          preload="metadata"
+          label={label}
           onError={() => setFailed(true)}
           className="w-full max-w-lg"
         />
@@ -100,15 +106,18 @@ function MediaRenderer({ document: doc, source, className }: AdapterRendererProp
   }
 
   return (
-    <div className={cn("flex min-h-full items-center justify-center", className)}>
-      <video
+    <div className={cn("flex min-h-full items-center justify-center p-4", className)}>
+      {/* No autoplay: a viewer opens files the reader chose to look at, not to
+          listen to. Sound starting on its own is the reason browsers block it.
+          No `aspectRatio`: an arbitrary file's ratio is unknown until metadata
+          loads, so the video sizes by its own intrinsic dimensions inside a
+          width cap, and the pane scrolls if a tall one outgrows it. */}
+      <Video
         src={media.url}
-        controls
-        // No autoplay: a viewer opens files the reader chose to look at, not to
-        // listen to. Sound starting on its own is the reason browsers block it.
-        aria-label={label}
+        preload="metadata"
+        label={label}
         onError={() => setFailed(true)}
-        className="max-h-full max-w-full"
+        className="w-full max-w-4xl"
       />
     </div>
   );

package/src/file-viewer/file-viewer.stories.tsx

@@ -274,13 +274,14 @@ export const Pdf: Story = {
 };
 
 /**
- * Video and audio use the NATIVE elements on purpose — the platform's own
- * transport brings keyboard control, captions, picture-in-picture and the OS
- * media keys, none of which a custom skin gets for free. The adapter streams
- * from a URL and never buffers the bytes, so a 2 GB recording seeks instantly.
+ * Video and audio render through ui `Audio` / `Video` (ADR 0041): a
+ * token-styled control bar — play, seek, time, volume — that follows the theme,
+ * with keyboard shortcuts on the player, in place of the browser's native
+ * chrome. The adapter streams from a URL and never buffers the bytes, so a
+ * 2 GB recording seeks instantly.
  *
  * The fixture is audio because a real, playable video cannot be synthesized
- * inline; the element and the chrome are the same for both.
+ * inline; the video player shares the same parts, with a viewport above the bar.
  */
 export const Audio: Story = {
   args: {