@elabs-ai/components-viewer 4.0.0

package/dist/xlsx-adapter-CM2Y6AKQ.js

@@ -0,0 +1,167 @@
+"use client";
+"use client";
+import {
+  xlsxManifest
+} from "./chunk-RGWDIQJR.js";
+import {
+  SheetTable,
+  gridToText
+} from "./chunk-NMA57QZ7.js";
+import "./chunk-2NQ4RSJ3.js";
+import {
+  spanAt
+} from "./chunk-UL43NGUG.js";
+import {
+  toMarkRanges
+} from "./chunk-VO2273Z2.js";
+import {
+  ViewerError,
+  toViewerError
+} from "./chunk-AORNMH77.js";
+
+// src/adapters/xlsx/xlsx-adapter.tsx
+import { cn, Tabs, TabsContent, TabsList, TabsTrigger, useLocale } from "@elabs-ai/components-ui";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var XLSX_ROW_LIMIT = 5e3;
+function looksLikeWorkbook(bytes) {
+  const zip = [80, 75, 3, 4];
+  const cfb = [208, 207, 17, 224];
+  return [zip, cfb].some((signature) => signature.every((byte, index) => bytes[index] === byte));
+}
+function toCellText(value) {
+  if (value === null || value === void 0) return "";
+  if (value instanceof Date) return value.toISOString().slice(0, 10);
+  return String(value);
+}
+var XlsxAdapter = class {
+  async load(source, context) {
+    let buffer;
+    try {
+      buffer = await source.bytes(context.signal);
+    } catch (error) {
+      throw toViewerError(error, "read-failed", { fileName: source.name });
+    }
+    const bytes = new Uint8Array(buffer);
+    if (!looksLikeWorkbook(bytes)) {
+      throw new ViewerError("parse-failed", "The file is not a spreadsheet container.", {
+        fileName: source.name
+      });
+    }
+    const XLSX = await import("xlsx");
+    try {
+      const workbook = XLSX.read(bytes, { type: "array", cellDates: true });
+      const sheets = workbook.SheetNames.map((name) => {
+        const sheet = workbook.Sheets[name];
+        const grid = sheet ? XLSX.utils.sheet_to_json(sheet, { header: 1, blankrows: false, defval: "" }) : [];
+        const [header = [], ...body] = grid;
+        const columns = header.map(toCellText);
+        const rows = body.slice(0, XLSX_ROW_LIMIT).map((row) => row.map(toCellText));
+        return body.length > XLSX_ROW_LIMIT ? { name, columns, rows, totalRows: body.length } : { name, columns, rows };
+      });
+      if (sheets.length === 0) {
+        throw new ViewerError("parse-failed", "The workbook contains no sheets.", {
+          fileName: source.name
+        });
+      }
+      const textIndex = gridToText(sheets);
+      return {
+        kind: "xlsx",
+        sheets,
+        pageCount: sheets.length,
+        text: textIndex.text,
+        textIndex
+      };
+    } catch (error) {
+      throw toViewerError(error, "parse-failed", { fileName: source.name });
+    }
+  }
+};
+function XlsxRenderer({
+  document: doc,
+  className,
+  highlights,
+  activeHighlightId
+}) {
+  const workbook = doc;
+  const { t } = useLocale();
+  const [first] = workbook.sheets;
+  const marks = useMemo(
+    () => toMarkRanges(highlights, workbook.text?.length ?? 0),
+    [highlights, workbook.text]
+  );
+  const starts = useMemo(() => {
+    const bySheet = /* @__PURE__ */ new Map();
+    for (const span of workbook.textIndex?.spans ?? []) {
+      let rows = bySheet.get(span.ref.sheet);
+      if (!rows) {
+        rows = /* @__PURE__ */ new Map();
+        bySheet.set(span.ref.sheet, rows);
+      }
+      rows.set(span.ref.row, span.start);
+    }
+    return bySheet;
+  }, [workbook.textIndex]);
+  const rowStartFor = (sheet) => (row) => starts.get(sheet)?.get(row);
+  const activeSheet = useMemo(() => {
+    const active = highlights?.find((highlight) => highlight.id === activeHighlightId);
+    if (!active || active.status !== "resolved" || !active.range || !workbook.textIndex) {
+      return void 0;
+    }
+    return spanAt(workbook.textIndex, active.range[0])?.ref.sheet;
+  }, [highlights, activeHighlightId, workbook.textIndex]);
+  const activeSheetName = activeSheet === void 0 ? void 0 : workbook.sheets[activeSheet]?.name;
+  const [pinned, setPinned] = useState();
+  useEffect(() => {
+    if (activeSheetName !== void 0) setPinned(activeSheetName);
+  }, [activeSheetName]);
+  if (!first) return null;
+  if (workbook.sheets.length === 1) {
+    return /* @__PURE__ */ jsx(
+      SheetTable,
+      {
+        columns: first.columns,
+        rows: first.rows,
+        totalRows: first.totalRows,
+        className,
+        marks,
+        rowStart: rowStartFor(0),
+        activeHighlightId
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Tabs,
+    {
+      value: pinned ?? first.name,
+      onValueChange: setPinned,
+      className: cn("flex h-full min-h-0 flex-col gap-2", className),
+      children: [
+        /* @__PURE__ */ jsx(TabsList, { "aria-label": t("viewer.sheet.tabs"), className: "shrink-0 self-start", children: workbook.sheets.map((sheet) => /* @__PURE__ */ jsx(TabsTrigger, { value: sheet.name, children: sheet.name }, sheet.name)) }),
+        workbook.sheets.map((sheet, index) => /* @__PURE__ */ jsx(TabsContent, { value: sheet.name, className: "mt-0 min-h-0 flex-1", children: /* @__PURE__ */ jsx(
+          SheetTable,
+          {
+            columns: sheet.columns,
+            rows: sheet.rows,
+            totalRows: sheet.totalRows,
+            marks,
+            rowStart: rowStartFor(index),
+            activeHighlightId
+          }
+        ) }, sheet.name))
+      ]
+    }
+  );
+}
+var adapterModule = {
+  manifest: xlsxManifest,
+  create: () => new XlsxAdapter(),
+  Renderer: XlsxRenderer
+};
+var xlsx_adapter_default = adapterModule;
+export {
+  XLSX_ROW_LIMIT,
+  xlsx_adapter_default as default,
+  looksLikeWorkbook
+};
+//# sourceMappingURL=xlsx-adapter-CM2Y6AKQ.js.map

package/dist/xlsx-adapter-CM2Y6AKQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/adapters/xlsx/xlsx-adapter.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Spreadsheet adapter — a workbook becomes sheets of rows, and rows become a\n * real `Table`.\n *\n * SheetJS is only ever asked for the DATA. Its `sheet_to_html` helper exists and\n * is not used: it returns a markup string with its own inline styling, which is\n * exactly the \"adapter emits HTML\" failure this package was built to avoid\n * (ADR 0024 §3). `sheet_to_json({ header: 1 })` gives raw cell values, which the\n * shared `SheetTable` renders with brand-ui components — so a spreadsheet\n * inherits the theme, the density dial and the keyboard semantics.\n *\n * **`xlsx` is an optional peer with two known advisories.** The npm build\n * (`0.18.5`) carries a prototype-pollution and a ReDoS advisory, both fixed only\n * in SheetJS's self-hosted CDN builds, which are not published to npm. That is a\n * documented, deliberate trade (`docs/CONSUMING.md` §6): a consumer who never\n * opens a spreadsheet never installs it and is never exposed. Treat any workbook\n * opened here as untrusted input.\n */\n\nimport type { ResolvedFileSource } from \"@elabs-ai/components-ui\";\nimport { cn, Tabs, TabsContent, TabsList, TabsTrigger, useLocale } from \"@elabs-ai/components-ui\";\nimport { useEffect, useMemo, useState } from \"react\";\n\nimport { gridToText, type GridRef } from \"../../components/grid-text\";\nimport { SheetTable } from \"../../components/sheet-table\";\nimport { ViewerError, toViewerError } from \"../../core/errors\";\nimport { toMarkRanges } from \"../../core/highlight-marks\";\nimport { spanAt, type TextIndex } from \"../../core/text-index\";\nimport type {\n  AdapterDocument,\n  AdapterLoadContext,\n  AdapterModule,\n  AdapterRendererProps,\n  FileAdapter,\n} from \"../../core/types\";\nimport { xlsxManifest } from \"./xlsx-manifest\";\n\n/**\n * Rows rendered per sheet before truncation. Same bound, same reason, as the CSV\n * adapter: a preview pane is for looking, and a real analysis grid is\n * `DataTable` in `@elabs-ai/components-data`.\n */\nexport const XLSX_ROW_LIMIT = 5_000;\n\nexport interface SheetModel {\n  /** The tab's own name, as authored in the workbook. */\n  name: string;\n  /** Header cells, taken from the sheet's first row. */\n  columns: string[];\n  /** Body rows, already capped at {@link XLSX_ROW_LIMIT}. */\n  rows: string[][];\n  /** Total body rows in the sheet, when more than what is shown. */\n  totalRows?: number;\n}\n\nexport interface XlsxDocument extends AdapterDocument {\n  kind: \"xlsx\";\n  sheets: SheetModel[];\n  /** Which sheet and row each stretch of `text` came from. */\n  textIndex?: TextIndex<GridRef>;\n}\n\n/**\n * Does this look like a workbook container at all?\n *\n * SheetJS sniffs its input and will happily read arbitrary text as a one-column\n * CSV — so a damaged `.xlsx` comes back as a sheet holding one junk cell instead\n * of failing. That is worse than an error: it looks like the file opened. Both\n * containers this adapter claims have a fixed signature — OOXML/ODS is a zip\n * (`PK\\x03\\x04`), legacy `.xls` is a CFB compound file — so anything else is\n * rejected before SheetJS gets a chance to be helpful.\n */\nexport function looksLikeWorkbook(bytes: Uint8Array): boolean {\n  const zip = [0x50, 0x4b, 0x03, 0x04];\n  const cfb = [0xd0, 0xcf, 0x11, 0xe0];\n  return [zip, cfb].some((signature) => signature.every((byte, index) => bytes[index] === byte));\n}\n\n/** SheetJS returns whatever the cell held — a date, a number, a formula result. */\nfunction toCellText(value: unknown): string {\n  if (value === null || value === undefined) return \"\";\n  if (value instanceof Date) return value.toISOString().slice(0, 10);\n  return String(value);\n}\n\nclass XlsxAdapter implements FileAdapter {\n  async load(source: ResolvedFileSource, context: AdapterLoadContext): Promise<XlsxDocument> {\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    const bytes = new Uint8Array(buffer);\n    if (!looksLikeWorkbook(bytes)) {\n      throw new ViewerError(\"parse-failed\", \"The file is not a spreadsheet container.\", {\n        fileName: source.name,\n      });\n    }\n\n    // Dynamic: the ONLY edge to the optional peer (heavy-deps:check).\n    const XLSX = await import(\"xlsx\");\n\n    try {\n      // `cellDates` so a date column reads as a date rather than as Excel's\n      // serial day number, which is meaningless to a person looking at it.\n      const workbook = XLSX.read(bytes, { type: \"array\", cellDates: true });\n      const sheets = workbook.SheetNames.map((name) => {\n        const sheet = workbook.Sheets[name];\n        const grid: unknown[][] = sheet\n          ? XLSX.utils.sheet_to_json(sheet, { header: 1, blankrows: false, defval: \"\" })\n          : [];\n        const [header = [], ...body] = grid;\n        const columns = header.map(toCellText);\n        const rows = body.slice(0, XLSX_ROW_LIMIT).map((row) => row.map(toCellText));\n        return body.length > XLSX_ROW_LIMIT\n          ? { name, columns, rows, totalRows: body.length }\n          : { name, columns, rows };\n      });\n\n      if (sheets.length === 0) {\n        throw new ViewerError(\"parse-failed\", \"The workbook contains no sheets.\", {\n          fileName: source.name,\n        });\n      }\n\n      // The projection is built by the shared grid builder rather than joined by\n      // hand, so the text a citation is addressed against and the map back into\n      // the cells cannot drift apart (`core/text-index.ts`).\n      const textIndex = gridToText(sheets);\n      return {\n        kind: \"xlsx\",\n        sheets,\n        pageCount: sheets.length,\n        text: textIndex.text,\n        textIndex,\n      };\n    } catch (error) {\n      throw toViewerError(error, \"parse-failed\", { fileName: source.name });\n    }\n  }\n}\n\nfunction XlsxRenderer({\n  document: doc,\n  className,\n  highlights,\n  activeHighlightId,\n}: AdapterRendererProps) {\n  const workbook = doc as XlsxDocument;\n  const { t } = useLocale();\n  const [first] = workbook.sheets;\n\n  const marks = useMemo(\n    () => toMarkRanges(highlights, workbook.text?.length ?? 0),\n    [highlights, workbook.text],\n  );\n\n  // Where each row of each sheet begins in the projection. Built once per\n  // document rather than per tab, because switching sheets must not re-walk the\n  // spans of every OTHER sheet to answer a question about this one.\n  const starts = useMemo(() => {\n    const bySheet = new Map<number, Map<number, number>>();\n    for (const span of workbook.textIndex?.spans ?? []) {\n      let rows = bySheet.get(span.ref.sheet);\n      if (!rows) {\n        rows = new Map<number, number>();\n        bySheet.set(span.ref.sheet, rows);\n      }\n      rows.set(span.ref.row, span.start);\n    }\n    return bySheet;\n  }, [workbook.textIndex]);\n  const rowStartFor = (sheet: number) => (row: number) => starts.get(sheet)?.get(row);\n\n  // Turning to the cited SHEET is this format's half of \"take me there\" — the\n  // row scroll inside it belongs to `SheetTable`. Keyed on the sheet NAME, so a\n  // reader who switches tabs while the same citation stays active is not\n  // dragged back (the PDF pager makes the same trade).\n  const activeSheet = useMemo(() => {\n    const active = highlights?.find((highlight) => highlight.id === activeHighlightId);\n    if (!active || active.status !== \"resolved\" || !active.range || !workbook.textIndex) {\n      return undefined;\n    }\n    return spanAt(workbook.textIndex, active.range[0])?.ref.sheet;\n  }, [highlights, activeHighlightId, workbook.textIndex]);\n  const activeSheetName =\n    activeSheet === undefined ? undefined : workbook.sheets[activeSheet]?.name;\n\n  const [pinned, setPinned] = useState<string>();\n  useEffect(() => {\n    if (activeSheetName !== undefined) setPinned(activeSheetName);\n  }, [activeSheetName]);\n\n  // A one-sheet workbook is the common case, and a tab strip holding a single\n  // tab is chrome that decides nothing — so it is not rendered.\n  if (!first) return null;\n  if (workbook.sheets.length === 1) {\n    return (\n      <SheetTable\n        columns={first.columns}\n        rows={first.rows}\n        totalRows={first.totalRows}\n        className={className}\n        marks={marks}\n        rowStart={rowStartFor(0)}\n        activeHighlightId={activeHighlightId}\n      />\n    );\n  }\n\n  return (\n    <Tabs\n      value={pinned ?? first.name}\n      onValueChange={setPinned}\n      className={cn(\"flex h-full min-h-0 flex-col gap-2\", className)}\n    >\n      <TabsList aria-label={t(\"viewer.sheet.tabs\")} className=\"shrink-0 self-start\">\n        {workbook.sheets.map((sheet) => (\n          <TabsTrigger key={sheet.name} value={sheet.name}>\n            {sheet.name}\n          </TabsTrigger>\n        ))}\n      </TabsList>\n      {workbook.sheets.map((sheet, index) => (\n        <TabsContent key={sheet.name} value={sheet.name} className=\"mt-0 min-h-0 flex-1\">\n          <SheetTable\n            columns={sheet.columns}\n            rows={sheet.rows}\n            totalRows={sheet.totalRows}\n            marks={marks}\n            rowStart={rowStartFor(index)}\n            activeHighlightId={activeHighlightId}\n          />\n        </TabsContent>\n      ))}\n    </Tabs>\n  );\n}\n\nconst adapterModule: AdapterModule = {\n  manifest: xlsxManifest,\n  create: () => new XlsxAdapter(),\n  Renderer: XlsxRenderer,\n};\n\nexport default adapterModule;\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "@elabs-ai/components-viewer",
+  "version": "4.0.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mreimitz/elabs-components.git",
+    "directory": "packages/viewer"
+  },
+  "type": "module",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@tanstack/react-virtual": "^3.14.2",
+    "lucide-react": "^0.577.0"
+  },
+  "peerDependencies": {
+    "papaparse": "^5.4.1",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "pdfjs-dist": "^6.0.0",
+    "mammoth": "^1.12.0",
+    "xlsx": "^0.18.5",
+    "jszip": "^3.10.1",
+    "shiki": "^3.22.0",
+    "streamdown": "^2.4.0",
+    "@elabs-ai/components-tokens": "4.0.0",
+    "@elabs-ai/components-ui": "4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "papaparse": {
+      "optional": true
+    },
+    "pdfjs-dist": {
+      "optional": true
+    },
+    "mammoth": {
+      "optional": true
+    },
+    "xlsx": {
+      "optional": true
+    },
+    "jszip": {
+      "optional": true
+    },
+    "shiki": {
+      "optional": true
+    },
+    "streamdown": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/papaparse": "^5.3.15",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "jsdom": "^25.0.1",
+    "jszip": "^3.10.1",
+    "mammoth": "^1.12.0",
+    "papaparse": "^5.4.1",
+    "pdfjs-dist": "^6.2.108",
+    "xlsx": "^0.18.5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "shiki": "^3.22.0",
+    "streamdown": "^2.4.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.3",
+    "vitest": "^3.0.2",
+    "@elabs-ai/components-eslint-config": "0.1.0",
+    "@elabs-ai/components-typescript-config": "0.1.0",
+    "@elabs-ai/components-tokens": "4.0.0",
+    "@elabs-ai/components-ui": "4.0.0"
+  },
+  "scripts": {
+    "build": "tsup && node ../../scripts/link-dist-css.mjs",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint .",
+    "clean": "rm -rf dist .turbo coverage"
+  }
+}

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

@@ -0,0 +1,221 @@
+import { normalizeFileSource } from "@elabs-ai/components-ui";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import type { ResolvedHighlight } from "../../core/highlight";
+import codeModule, { CODE_CHARACTER_LIMIT, type CodeDocument } from "./code-adapter";
+
+const cite = (id: string, range: [number, number], active = false): ResolvedHighlight => ({
+  id,
+  source: "citation",
+  status: "resolved",
+  address: { kind: "range", start: range[0], end: range[1] },
+  active,
+  range,
+});
+
+const SAMPLE = `// a greeting
+export const greet = (name: string) => \`hello \${name}\`;
+`;
+
+function source(text: string, name = "greet.ts") {
+  return normalizeFileSource({ kind: "text", text, name });
+}
+
+const load = (text = SAMPLE, name?: string) =>
+  codeModule.create().load(source(text, name), {}) as Promise<CodeDocument>;
+
+/**
+ * Offset of the `greet` IDENTIFIER — not the "greet" inside the comment's
+ * "greeting" on line 1, which is what a plain `indexOf("greet")` finds.
+ */
+const IDENTIFIER = SAMPLE.indexOf("greet =");
+
+describe("code adapter — tokenizing", () => {
+  it("resolves the grammar from the file name", async () => {
+    const doc = await load();
+    expect(doc.language).toBe("typescript");
+  });
+
+  it("returns one entry per line, in order", async () => {
+    const doc = await load();
+    // Trailing newline means a final empty line, which is real: a `<pre>` that
+    // dropped it would render one line short of the file.
+    expect(doc.lines).toHaveLength(3);
+    expect(doc.lines[0]?.map((token) => token.text).join("")).toBe("// a greeting");
+    expect(doc.lines[2]).toEqual([]);
+  });
+
+  it("colours tokens with brand token references, never a literal", async () => {
+    const doc = await load();
+    const colours = doc.lines.flat().map((token) => token.color);
+    expect(colours.some((colour) => colour === "var(--code-comment)")).toBe(true);
+    expect(colours.some((colour) => colour === "var(--code-keyword)")).toBe(true);
+    // The whole reason for the CSS-variable theme: a raw hex would freeze the
+    // document in whichever theme happened to be active when it was parsed.
+    for (const colour of colours) expect(colour).not.toMatch(/^#/);
+  });
+
+  it("distinguishes a comment from a keyword — the theme really is applied", async () => {
+    const doc = await load();
+    const comment = doc.lines[0]?.[0];
+    const keyword = doc.lines[1]?.find((token) => token.text.trim() === "export");
+    expect(comment?.color).not.toBe(keyword?.color);
+    expect(comment?.italic).toBe(true);
+  });
+
+  it("falls back to plain lines for a name it has no grammar for", async () => {
+    const doc = await load("just words\n", "notes.unknownext");
+    expect(doc.language).toBeUndefined();
+    expect(doc.lines[0]).toEqual([{ text: "just words" }]);
+  });
+
+  it("exposes a plain-text projection for search and copy", async () => {
+    const doc = await load();
+    expect(doc.text).toBe(SAMPLE);
+  });
+
+  it("truncates a file too large to tokenize, and says so", async () => {
+    // Deliberately on the HIGHLIGHTED path: truncation has to happen BEFORE
+    // the grammar runs, and a test on the grammar-less path would still pass
+    // if the slice moved below the tokenize call. That is also why this one
+    // gets its own timeout — tokenizing at the limit is the work being
+    // bounded, and it exceeds the 5s default on a loaded machine.
+    const doc = await load(`const x = 1;\n`.repeat(40_000));
+    expect(doc.text).toHaveLength(CODE_CHARACTER_LIMIT);
+    expect(doc.totalCharacters).toBe(40_000 * 13);
+  }, 30_000);
+
+  it("reports an unreadable source as read-failed, not parse-failed", async () => {
+    const failing = {
+      ...source(""),
+      text: () => Promise.reject(new Error("network down")),
+    };
+    await expect(codeModule.create().load(failing, {})).rejects.toMatchObject({
+      code: "read-failed",
+    });
+  });
+});
+
+describe("code adapter — rendering", () => {
+  const Renderer = codeModule.Renderer;
+
+  it("renders every line of the file", async () => {
+    const doc = await load();
+    render(<Renderer document={doc} source={source(SAMPLE)} />);
+    expect(screen.getByText("// a greeting")).toBeInTheDocument();
+  });
+
+  it("keeps line numbers out of the accessibility tree", async () => {
+    const doc = await load();
+    const { container } = render(<Renderer document={doc} source={source(SAMPLE)} />);
+    const gutter = container.querySelectorAll('[aria-hidden="true"]');
+    // One per line — decorative, so a screen reader reads the code, not "1 2 3".
+    expect(gutter).toHaveLength(doc.lines.length);
+    expect(gutter[0]?.textContent).toBe("1");
+  });
+
+  it("announces truncation as a status, not an error", () => {
+    // Built directly rather than loaded: rendering half a million characters in
+    // jsdom to assert one line of copy costs seconds and proves nothing extra.
+    const doc: CodeDocument = {
+      kind: "code",
+      language: "typescript",
+      lines: [[{ text: "const x = 1;" }]],
+      text: "const x = 1;",
+      totalCharacters: 520_000,
+    };
+    render(<Renderer document={doc} source={source("")} />);
+    const status = screen.getByRole("status");
+    expect(status).toHaveTextContent(/Showing the first/);
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+  });
+
+  it("shows an empty file as an empty state, not a blank pane", async () => {
+    const doc = await load("", "empty.ts");
+    render(<Renderer document={doc} source={source("", "empty.ts")} />);
+    expect(screen.getByText("This file is empty")).toBeInTheDocument();
+  });
+});
+
+describe("code adapter — highlighting", () => {
+  const Renderer = codeModule.Renderer;
+
+  it("declares the address kinds it can actually honour", () => {
+    expect(codeModule.manifest.capabilities?.highlight).toEqual(["quote", "range"]);
+  });
+
+  it("rejoins its token lines to exactly the text ranges are addressed against", async () => {
+    // The load-bearing invariant behind every offset below: if the tokenizer's
+    // lines and `document.text` ever disagreed, every mark would land wrong.
+    const doc = await load();
+    expect(doc.lines.map((tokens) => tokens.map((token) => token.text).join("")).join("\n")).toBe(
+      doc.text,
+    );
+  });
+
+  it("marks a range that falls inside one syntax token", async () => {
+    const doc = await load();
+    const start = IDENTIFIER;
+    const { container } = render(
+      <Renderer
+        document={doc}
+        source={source(SAMPLE)}
+        highlights={[cite("a", [start, start + 5])]}
+      />,
+    );
+    const marks = container.querySelectorAll("mark");
+    expect(marks).toHaveLength(1);
+    expect(marks[0]).toHaveTextContent("greet");
+    // The file still reads whole — the mark layer wraps, it does not replace.
+    expect(container.querySelector("pre")?.textContent).toContain("export const greet");
+  });
+
+  it("keeps a range spanning several tokens as one continuous run", async () => {
+    const doc = await load();
+    const start = SAMPLE.indexOf("export");
+    const end = IDENTIFIER + 5;
+    const { container } = render(
+      <Renderer document={doc} source={source(SAMPLE)} highlights={[cite("a", [start, end])]} />,
+    );
+    const marks = Array.from(container.querySelectorAll("mark"));
+    // Several marks, because syntax colour lives on the token spans — but they
+    // are adjacent and together spell the requested passage.
+    expect(marks.length).toBeGreaterThan(1);
+    expect(marks.map((mark) => mark.textContent).join("")).toBe("export const greet");
+  });
+
+  it("carries the active flag onto every token piece of the current run", async () => {
+    const doc = await load();
+    const start = SAMPLE.indexOf("export");
+    const end = IDENTIFIER + 5;
+    const { container } = render(
+      <Renderer
+        document={doc}
+        source={source(SAMPLE)}
+        highlights={[cite("a", [start, end], true)]}
+        activeHighlightId="a"
+      />,
+    );
+    const marks = Array.from(container.querySelectorAll("mark"));
+    const active = Array.from(container.querySelectorAll("mark[data-active]"));
+    expect(active).toHaveLength(marks.length);
+    expect(active[0]?.getAttribute("aria-current")).toBe("true");
+  });
+
+  it("leaves untouched tokens rendering exactly as before", async () => {
+    const doc = await load();
+    const start = IDENTIFIER;
+    const { container } = render(
+      <Renderer
+        document={doc}
+        source={source(SAMPLE)}
+        highlights={[cite("a", [start, start + 5])]}
+      />,
+    );
+    const comment = screen.getByText("// a greeting");
+    expect(comment.tagName).toBe("SPAN");
+    expect(comment.querySelector("mark")).toBeNull();
+    expect(container.querySelectorAll("mark")).toHaveLength(1);
+  });
+});