@elabs-ai/components-viewer 4.0.0

package/src/adapters/docx/docx-model.ts

@@ -0,0 +1,294 @@
+/**
+ * Word markup → a block model.
+ *
+ * ## Why this exists at all
+ *
+ * mammoth converts a `.docx` into an HTML **string**. Rendering that string
+ * would mean `dangerouslySetInnerHTML`, which is three separate problems: it
+ * puts third-party markup past the token layer, it needs a sanitizer to be safe
+ * at all, and it makes the surface unusable under a Trusted-Types policy (a raw
+ * `innerHTML` write throws during commit and takes the React root down with it —
+ * see `docs/CSP-AND-NETWORK.md`).
+ *
+ * So the HTML is parsed and thrown away, and what survives is a small model of
+ * blocks and inline runs that React renders as real elements. **The parse IS the
+ * allowlist**: a tag this file does not name contributes nothing but its text,
+ * so there is no denylist to keep up to date, no `<script>` to strip, and no
+ * sanitizer dependency. It is also why the viewer adds no CSP sink.
+ */
+
+import { createTextIndexBuilder, type TextIndex } from "../../core/text-index";
+
+/** A styled span of text inside a block. */
+export interface DocxRun {
+  text: string;
+  bold?: boolean;
+  italic?: boolean;
+  /** Present only for a link whose scheme survived {@link safeHref}. */
+  href?: string;
+}
+
+export type DocxBlock =
+  | { type: "heading"; level: 1 | 2 | 3 | 4 | 5 | 6; runs: DocxRun[] }
+  | { type: "paragraph"; runs: DocxRun[] }
+  | { type: "list"; ordered: boolean; items: DocxRun[][] }
+  | { type: "table"; head?: string[]; rows: string[][] }
+  | { type: "image"; src: string; alt?: string };
+
+/** Schemes a link may keep. Anything else (notably `javascript:`) becomes plain text. */
+const SAFE_SCHEMES = ["http:", "https:", "mailto:", "tel:"];
+
+/**
+ * The href, or `undefined` when it is not a scheme we will hand to the browser.
+ * Relative hrefs are dropped too — a Word document's internal bookmarks point at
+ * anchors that do not exist on the host page.
+ */
+export function safeHref(value: string | null): string | undefined {
+  if (!value) return undefined;
+  try {
+    const url = new URL(value, "https://viewer.invalid");
+    return SAFE_SCHEMES.includes(url.protocol) && !value.startsWith("#") ? url.href : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+interface RunStyle {
+  bold?: boolean;
+  italic?: boolean;
+  href?: string;
+}
+
+/** Collect the inline runs under a node, carrying style down the tree. */
+function collectRuns(node: Node, style: RunStyle = {}, out: DocxRun[] = []): DocxRun[] {
+  for (const child of Array.from(node.childNodes)) {
+    if (child.nodeType === 3 /* TEXT_NODE */) {
+      const text = child.nodeValue ?? "";
+      if (text) out.push({ text, ...style });
+      continue;
+    }
+    if (child.nodeType !== 1 /* ELEMENT_NODE */) continue;
+
+    const element = child as Element;
+    const tag = element.tagName.toLowerCase();
+    if (tag === "br") {
+      out.push({ text: "\n", ...style });
+      continue;
+    }
+    const next: RunStyle = { ...style };
+    if (tag === "strong" || tag === "b") next.bold = true;
+    if (tag === "em" || tag === "i") next.italic = true;
+    if (tag === "a") {
+      const href = safeHref(element.getAttribute("href"));
+      if (href) next.href = href;
+    }
+    collectRuns(element, next, out);
+  }
+  return out;
+}
+
+/** Merge adjacent runs that carry identical styling — fewer, longer spans. */
+function compact(runs: DocxRun[]): DocxRun[] {
+  const merged: DocxRun[] = [];
+  for (const run of runs) {
+    const last = merged[merged.length - 1];
+    if (last && last.bold === run.bold && last.italic === run.italic && last.href === run.href) {
+      last.text += run.text;
+    } else {
+      merged.push({ ...run });
+    }
+  }
+  return merged.filter((run) => run.text.trim() !== "" || run.text.includes("\n"));
+}
+
+function textOf(node: Node): string {
+  return compact(collectRuns(node))
+    .map((run) => run.text)
+    .join("")
+    .trim();
+}
+
+function listItems(element: Element): DocxRun[][] {
+  const items: DocxRun[][] = [];
+  for (const child of Array.from(element.children)) {
+    if (child.tagName.toLowerCase() !== "li") continue;
+    // A nested list inside an `<li>` is flattened into its own items rather than
+    // being rendered as a sub-list: the depth is not worth a recursive component
+    // in a preview, and losing it never loses the WORDS.
+    const runs = compact(collectRuns(child));
+    if (runs.length > 0) items.push(runs);
+    for (const nested of Array.from(child.children)) {
+      const tag = nested.tagName.toLowerCase();
+      if (tag === "ul" || tag === "ol") items.push(...listItems(nested));
+    }
+  }
+  return items;
+}
+
+function tableBlock(element: Element): DocxBlock | undefined {
+  const rows = Array.from(element.querySelectorAll("tr"));
+  if (rows.length === 0) return undefined;
+
+  const cellsOf = (row: Element) =>
+    Array.from(row.children)
+      .filter((cell) => ["td", "th"].includes(cell.tagName.toLowerCase()))
+      .map(textOf);
+
+  const [firstRow, ...restRows] = rows;
+  if (!firstRow) return undefined;
+
+  // Word only emits `<th>` when the author marked a header row. Without it the
+  // first row is ordinary data, and promoting it would invent a header.
+  const isHeader = firstRow.querySelector("th") !== null;
+  return isHeader
+    ? { type: "table", head: cellsOf(firstRow), rows: restRows.map(cellsOf) }
+    : { type: "table", rows: rows.map(cellsOf) };
+}
+
+const HEADING_LEVELS: Record<string, 1 | 2 | 3 | 4 | 5 | 6> = {
+  h1: 1,
+  h2: 2,
+  h3: 3,
+  h4: 4,
+  h5: 5,
+  h6: 6,
+};
+
+/**
+ * Parse mammoth's HTML into blocks.
+ *
+ * Takes a `DOMParser` factory so the caller decides where the parser comes from
+ * — the browser's own in an app, jsdom's in a test — instead of this module
+ * reaching for a global that may not exist on a server.
+ */
+export function htmlToBlocks(html: string, parse: (markup: string) => Document): DocxBlock[] {
+  const document = parse(`<body>${html}</body>`);
+  const blocks: DocxBlock[] = [];
+
+  const walk = (parent: Element) => {
+    for (const element of Array.from(parent.children)) {
+      const tag = element.tagName.toLowerCase();
+      const level = HEADING_LEVELS[tag];
+
+      if (level) {
+        const runs = compact(collectRuns(element));
+        if (runs.length > 0) blocks.push({ type: "heading", level, runs });
+        continue;
+      }
+      if (tag === "p") {
+        // A `<p>` holding only an image is the image, not an empty paragraph.
+        const image = element.querySelector("img");
+        const runs = compact(collectRuns(element));
+        if (image && runs.length === 0) {
+          blocks.push(imageBlock(image));
+          continue;
+        }
+        if (runs.length > 0) blocks.push({ type: "paragraph", runs });
+        continue;
+      }
+      if (tag === "ul" || tag === "ol") {
+        const items = listItems(element);
+        if (items.length > 0) blocks.push({ type: "list", ordered: tag === "ol", items });
+        continue;
+      }
+      if (tag === "table") {
+        const table = tableBlock(element);
+        if (table) blocks.push(table);
+        continue;
+      }
+      if (tag === "img") {
+        blocks.push(imageBlock(element));
+        continue;
+      }
+      // Anything else — a `div`, a `section`, a tag mammoth grew in a later
+      // version — contributes its CHILDREN, never itself. That is what makes
+      // this an allowlist that cannot silently let markup through.
+      walk(element);
+    }
+  };
+
+  walk(document.body);
+  return blocks;
+}
+
+function imageBlock(element: Element): DocxBlock {
+  const alt = element.getAttribute("alt")?.trim();
+  return {
+    type: "image",
+    // mammoth inlines images as `data:` URIs by default, so there is no remote
+    // origin here — and no `src` at all is better than a URL we did not vet.
+    src: element.getAttribute("src") ?? "",
+    ...(alt ? { alt } : {}),
+  };
+}
+
+/** Written before a list item's own text in the projection. */
+export const DOCX_LIST_BULLET = "• ";
+
+/** Written between two cells of the same row. */
+export const DOCX_CELL_SEPARATOR = "\t";
+
+/** The header row's `row`, so one field can name every row of a table. */
+export const DOCX_HEAD_ROW = -1;
+
+/**
+ * Where a stretch of the projection came from in the block model.
+ *
+ * Deliberately one shape with optional fields rather than a union: the renderer
+ * looks a span up by "this block, that item" in three places, and a union would
+ * make each of those a type narrowing exercise for no gain.
+ */
+export interface DocxRef {
+  /** Index into the `blocks` array. */
+  block: number;
+  /** Which item, for a `list` block. */
+  item?: number;
+  /** Which row, for a `table` block. {@link DOCX_HEAD_ROW} is the header. */
+  row?: number;
+}
+
+/**
+ * Plain-text projection of a parsed document, plus the map back into the blocks.
+ *
+ * Rows rather than cells are the finest ref: one builder has one separator, and
+ * a row's cells are joined by a tab while the rows themselves are joined by a
+ * newline. The renderer walks a row's cells the same way it walks a paragraph's
+ * runs — accumulating lengths — so the granularity of the MARK is still the
+ * character, even though the granularity of the REF is the row.
+ */
+export function blocksToTextWithMap(blocks: DocxBlock[]): TextIndex<DocxRef> {
+  const builder = createTextIndexBuilder<DocxRef>();
+  blocks.forEach((block, index) => {
+    if (block.type === "heading" || block.type === "paragraph") {
+      builder.push(block.runs.map((run) => run.text).join(""), { block: index });
+      return;
+    }
+    if (block.type === "list") {
+      block.items.forEach((item, item_) => {
+        builder.push(`${DOCX_LIST_BULLET}${item.map((run) => run.text).join("")}`, {
+          block: index,
+          item: item_,
+        });
+      });
+      return;
+    }
+    if (block.type === "table") {
+      if (block.head) {
+        builder.push(block.head.join(DOCX_CELL_SEPARATOR), { block: index, row: DOCX_HEAD_ROW });
+      }
+      block.rows.forEach((row, rowIndex) => {
+        builder.push(row.join(DOCX_CELL_SEPARATOR), { block: index, row: rowIndex });
+      });
+    }
+  });
+  return builder.build();
+}
+
+/**
+ * Plain-text projection of a parsed document — powers search, copy and the raw
+ * view. A thin wrapper so the projection has exactly one definition: it is the
+ * index's own text, never a second assembly that could drift from it.
+ */
+export function blocksToText(blocks: DocxBlock[]): string {
+  return blocksToTextWithMap(blocks).text;
+}

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

@@ -0,0 +1,141 @@
+import { normalizeFileSource } from "@elabs-ai/components-ui";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import imageModule, { type ImageDocument } from "./image-adapter";
+
+/**
+ * jsdom parses `<img>` but never fetches it, so neither `load` nor `error` ever
+ * fires — the real browser event this adapter measures with simply does not
+ * exist here. The stub reports one fixed size so the load can complete; the
+ * decode path itself is exercised in the Storybook stories, in a real browser.
+ */
+const ORIGINAL_IMAGE = globalThis.Image;
+
+function stubImage(behaviour: "load" | "error") {
+  globalThis.Image = class {
+    naturalWidth = 800;
+    naturalHeight = 600;
+    onload: (() => void) | null = null;
+    onerror: (() => void) | null = null;
+    set src(_value: string) {
+      queueMicrotask(() => (behaviour === "load" ? this.onload?.() : this.onerror?.()));
+    }
+  } as unknown as typeof Image;
+}
+
+const png = () => new Blob([new Uint8Array([0x89, 0x50])], { type: "image/png" });
+const sourceFor = (alt?: string) =>
+  normalizeFileSource({ kind: "blob", blob: png(), name: "photo.png", alt });
+
+beforeEach(() => stubImage("load"));
+afterEach(() => {
+  globalThis.Image = ORIGINAL_IMAGE;
+  vi.restoreAllMocks();
+});
+
+describe("image adapter — loading", () => {
+  it("mints a URL and reports the intrinsic size, so the box can be reserved", async () => {
+    const doc = (await imageModule.create().load(sourceFor(), {})) as ImageDocument;
+    expect(doc.url).toMatch(/^blob:/);
+    expect(doc.width).toBe(800);
+    expect(doc.height).toBe(600);
+  });
+
+  it("still loads when the size cannot be measured — measuring is not the load", async () => {
+    stubImage("error");
+    const doc = (await imageModule.create().load(sourceFor(), {})) as ImageDocument;
+    expect(doc.url).toMatch(/^blob:/);
+    expect(doc.width).toBeUndefined();
+  });
+
+  it("revokes the URL it minted when disposed", async () => {
+    const revoke = vi.spyOn(URL, "revokeObjectURL");
+    const adapter = imageModule.create();
+    await adapter.load(sourceFor(), {});
+    adapter.dispose?.();
+    expect(revoke).toHaveBeenCalledTimes(1);
+  });
+
+  it("leaves a public remote URL alone — nothing was minted, nothing to revoke", async () => {
+    const revoke = vi.spyOn(URL, "revokeObjectURL");
+    const remote = normalizeFileSource({ kind: "url", url: "https://x.test/p.png" });
+    const doc = (await imageModule.create().load(remote, {})) as ImageDocument;
+    expect(doc.url).toBe("https://x.test/p.png");
+    expect(revoke).not.toHaveBeenCalled();
+  });
+});
+
+describe("image adapter — rendering", () => {
+  const doc: ImageDocument = { kind: "image", url: "blob:x", width: 800, height: 600 };
+
+  it("renders a real <img> with its intrinsic dimensions, not a canvas", () => {
+    const { container } = render(<imageModule.Renderer document={doc} source={sourceFor()} />);
+    const img = container.querySelector("img");
+    expect(img).toHaveAttribute("width", "800");
+    expect(img).toHaveAttribute("height", "600");
+    expect(container.querySelector("canvas")).toBeNull();
+  });
+
+  it("is decorative with no description, and named when the source carries one", () => {
+    const { container, rerender } = render(
+      <imageModule.Renderer document={doc} source={sourceFor()} />,
+    );
+    expect(container.querySelector("img")).toHaveAttribute("alt", "");
+
+    rerender(<imageModule.Renderer document={doc} source={sourceFor("A red bicycle")} />);
+    expect(screen.getByRole("img", { name: "A red bicycle" })).toBeInTheDocument();
+  });
+
+  it("reports a broken image as a terminal alert, not a stuck placeholder", () => {
+    const { container } = render(<imageModule.Renderer document={doc} source={sourceFor()} />);
+    fireEvent.error(container.querySelector("img") as HTMLImageElement);
+    expect(screen.getByRole("alert")).toHaveTextContent("photo.png");
+  });
+
+  it("honours the zoom and rotation its manifest claims (ADR 0026)", () => {
+    // The manifest declared both while the renderer implemented neither, so the
+    // shell offered controls that did nothing. These assertions are what stops
+    // that claim from going hollow again.
+    expect(imageModule.manifest.capabilities).toMatchObject({ zoom: true, rotate: true });
+
+    const { container, rerender } = render(
+      <imageModule.Renderer document={doc} source={sourceFor()} zoom={2} rotation={90} />,
+    );
+    const img = container.querySelector("img") as HTMLImageElement;
+    // At a fixed scale the intrinsic cap has to come off, or "200%" silently
+    // stops at the pane's width.
+    expect(img.style.width).toBe("1600px");
+    expect(img.style.height).toBe("1200px");
+    // A quarter turn gets a box with the ROTATED bounds (the axes swap) and the
+    // image centred inside it. Without the box, a transform overflows the pane
+    // on all four sides and scrolling can only ever reach two of them.
+    expect(img.style.transform).toBe("translate(-50%, -50%) rotate(90deg)");
+    expect((img.parentElement as HTMLElement).style.width).toBe("1200px");
+    expect((img.parentElement as HTMLElement).style.height).toBe("1600px");
+
+    rerender(<imageModule.Renderer document={doc} source={sourceFor()} zoom="fit-page" />);
+    // Re-queried on purpose: dropping the rotation box changes the tree shape,
+    // so React swaps the element rather than patching the old one.
+    const fitted = container.querySelector("img") as HTMLImageElement;
+    expect(fitted.style.width).toBe("");
+    expect(fitted.className).toContain("max-h-full");
+  });
+
+  it("fits the ROTATED bounds, so a turned image is never clipped", () => {
+    // Fitting and turning at once is the case a transform gets wrong on its
+    // own: the image is sized to the pane's width, then rotated into a box
+    // taller than the pane. The fit has to read the pane's other axis, which is
+    // what the container units do.
+    const { container } = render(
+      <imageModule.Renderer document={doc} source={sourceFor()} zoom="fit-width" rotation={90} />,
+    );
+    const img = container.querySelector("img") as HTMLImageElement;
+    expect(img.className).toContain("max-h-[100cqw]");
+    expect(img.className).toContain("max-w-[100cqh]");
+    expect(img.className).not.toContain("max-w-full");
+    // Container units answer only inside a size container, and only a definite
+    // height makes one.
+    expect((img.parentElement as HTMLElement).className).toContain("[container-type:size]");
+  });
+});

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

@@ -0,0 +1,191 @@
+"use client";
+
+/**
+ * Image adapter — the reference implementation of "adapters emit data".
+ *
+ * It renders an `<img>`, 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.
+ * Here the description travels on the `FileSource` itself, so a screen reader
+ * user gets the same information a sighted user does.
+ */
+
+import { cn, StatePanel, useLocale } from "@elabs-ai/components-ui";
+import { useEffect, useState } from "react";
+
+import type {
+  AdapterDocument,
+  AdapterLoadContext,
+  AdapterModule,
+  AdapterRendererProps,
+  FileAdapter,
+} from "../../core/types";
+import { imageManifest } from "./image-manifest";
+import { toViewerError } from "../../core/errors";
+import type { ResolvedFileSource } from "@elabs-ai/components-ui";
+
+export interface ImageDocument extends AdapterDocument {
+  kind: "image";
+  /** A URL an `<img>` can load — the source's own URL, or a minted object URL. */
+  url: string;
+  /** Intrinsic size, once decoded. Used to reserve the box and to label the file. */
+  width?: number;
+  height?: number;
+}
+
+/** Decode just enough to learn the intrinsic size. Never rejects the load. */
+function measure(
+  url: string,
+  signal?: AbortSignal,
+): Promise<{ width: number; height: number } | undefined> {
+  if (typeof Image !== "function") return Promise.resolve(undefined);
+  return new Promise((resolve) => {
+    const img = new Image();
+    const done = (value?: { width: number; height: number }) => {
+      img.onload = null;
+      img.onerror = null;
+      resolve(value);
+    };
+    img.onload = () => done({ width: img.naturalWidth, height: img.naturalHeight });
+    // A measurement failure is not a load failure — the <img> will surface it.
+    img.onerror = () => done(undefined);
+    signal?.addEventListener("abort", () => done(undefined), { once: true });
+    img.src = url;
+  });
+}
+
+class ImageAdapter implements FileAdapter {
+  #source?: ResolvedFileSource;
+
+  async load(source: ResolvedFileSource, context: AdapterLoadContext): Promise<ImageDocument> {
+    this.#source = source;
+    try {
+      const url = await source.url(context.signal);
+      const size = await measure(url, context.signal);
+      return { kind: "image", url, ...size };
+    } catch (error) {
+      throw toViewerError(error, "read-failed", { fileName: source.name });
+    }
+  }
+
+  dispose(): void {
+    // Releases the object URL this load minted, if any. A remote public image
+    // never minted one, and `revoke()` is a no-op there.
+    this.#source?.revoke();
+    this.#source = undefined;
+  }
+}
+
+function ImageRenderer({
+  document: doc,
+  source,
+  className,
+  zoom = "fit-page",
+  rotation = 0,
+}: AdapterRendererProps) {
+  const image = doc as ImageDocument;
+  const { t } = useLocale();
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => setFailed(false), [image.url]);
+
+  if (failed) {
+    // A terminal, settled failure (loading-states.md): the browser tried and
+    // gave up, so this is not a transient not-ready state.
+    return (
+      <div className={cn("flex min-h-full flex-col justify-center p-4", className)}>
+        <StatePanel
+          kind="error"
+          title={t("viewer.error.imageFailedTitle")}
+          description={t("viewer.error.imageFailed", { name: source.name })}
+        />
+      </div>
+    );
+  }
+
+  const fitting = typeof zoom !== "number";
+  // A quarter turn swaps the axes: what was the image's height is now the width
+  // the reader sees. Everything below that treats 90/270 differently is that one
+  // fact — 180 leaves the bounds alone and needs none of it.
+  const quarter = rotation === 90 || rotation === 270;
+  const scaled =
+    fitting || image.width === undefined || image.height === undefined
+      ? undefined
+      : { width: image.width * zoom, height: image.height * zoom };
+  // A `transform` does not change layout, so a turned image at a fixed scale
+  // needs a box with the ROTATED bounds. Without one it overflows the pane on
+  // every side, and the half above the top edge is unreachable — scrolling only
+  // ever reaches transform overflow past the END edges.
+  const boxed = quarter && scaled !== undefined;
+
+  const img = (
+    <img
+      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}
+      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
+        // width caps the height. Container units read the pane directly, so the
+        // fit needs no measurement. Both fit modes converge here deliberately:
+        // an image whose rotated width filled the pane would overflow the top
+        // edge as well, which is the unreachable half described above.
+        fitting && quarter && "max-h-[100cqw] max-w-[100cqh]",
+        // At a fixed scale the intrinsic cap has to come off, or "200%" would
+        // silently stop at the pane's width.
+        !fitting && "max-w-none",
+        boxed && "absolute top-1/2 left-1/2",
+      )}
+      style={{
+        ...scaled,
+        ...(rotation === 0
+          ? undefined
+          : {
+              transform: boxed
+                ? `translate(-50%, -50%) rotate(${rotation}deg)`
+                : `rotate(${rotation}deg)`,
+            }),
+      }}
+    />
+  );
+
+  return (
+    // Centred on both axes: a small image pinned to the top-left of a tall pane
+    // reads as a layout accident. While fitting, the box takes the pane's height
+    // so `max-h-full` has something definite to resolve against; at a fixed
+    // scale it grows instead, and `FileViewerContent` scrolls it.
+    <div
+      className={cn(
+        "flex items-center justify-center",
+        fitting ? "h-full" : "min-h-full",
+        // Only a size container can answer `cqh`, and only a definite height
+        // makes one — which is exactly the fitting case.
+        fitting && quarter && "[container-type:size]",
+        className,
+      )}
+    >
+      {quarter && scaled ? (
+        <div className="relative shrink-0" style={{ width: scaled.height, height: scaled.width }}>
+          {img}
+        </div>
+      ) : (
+        img
+      )}
+    </div>
+  );
+}
+
+const adapterModule: AdapterModule = {
+  manifest: imageManifest,
+  create: () => new ImageAdapter(),
+  Renderer: ImageRenderer,
+};
+
+export default adapterModule;

package/src/adapters/image/image-manifest.ts

@@ -0,0 +1,15 @@
+import type { AdapterManifest } from "../../core/types";
+import { PROTOCOL_VERSION } from "../../core/types";
+
+/**
+ * Eager, data-only. Split from the adapter module so `createDefaultRegistry`
+ * can answer "can this be opened, and what controls apply" without pulling the
+ * renderer into the entry chunk.
+ */
+export const imageManifest: AdapterManifest = {
+  id: "image",
+  protocol: PROTOCOL_VERSION,
+  categories: ["image"],
+  mediaTypes: ["image/"],
+  capabilities: { zoom: true, rotate: true },
+};