diff --git a/.gitignore b/.gitignore
index 2a70e71..9af9f26 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,9 @@
 *~
 
+# Core
+core/node_modules
+viewer.js.map
+
 # Byte-compiled / optimized / DLL files
 __pycache__/
 *.py[codz]
diff --git a/README.md b/README.md
index e0ab95b..3f8aad8 100644
--- a/README.md
+++ b/README.md
@@ -24,11 +24,11 @@ Open [http://localhost:8080/](http://localhost:8080/) and click **Load demo**.
 | **Open file** | Select a `.dclx` archive, or a standalone `.dclg` / `.xml` markup file. |
 | **Drag and drop** | Drop any supported file onto the page. |
 
-Supported types: `.dclx`, `.dclg`, `.xml`. The demo URL is configured in [`demo-data.js`](demo-data.js).
+Supported types: `.dclx`, `.dclg`, `.xml`. The demo/example URL is configured via the `example` attribute on the `<doclang-viewer>` element in [`index.html`](index.html).
 
 ## Files
 
-- `demo-data.js` — demo archive URL
-- `index.html` — shell UI
-- `viewer.js` — parsing, page alignment, bbox overlay
-- `viewer.css` — layout and theme
+- `index.html` — shell page; loads `viewer.js`
+- `viewer.js` — standalone ESM bundle (lit inlined); tracked in git for CDN / script-tag use
+- `core/dist/` — npm library build (lit external, tree-shakeable); gitignored
+- `core/` — TypeScript source; run `npm run build` inside to rebuild
diff --git a/assets/icon-1024.png b/assets/icon-1024.png
new file mode 100644
index 0000000..a44dd08
Binary files /dev/null and b/assets/icon-1024.png differ
diff --git a/assets/icon-192.png b/assets/icon-192.png
new file mode 100644
index 0000000..68ae1f2
Binary files /dev/null and b/assets/icon-192.png differ
diff --git a/assets/icon-512.png b/assets/icon-512.png
new file mode 100644
index 0000000..2e3bee4
Binary files /dev/null and b/assets/icon-512.png differ
diff --git a/core/.prettierignore b/core/.prettierignore
new file mode 100644
index 0000000..1eae0cf
--- /dev/null
+++ b/core/.prettierignore
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/core/.prettierrc b/core/.prettierrc
new file mode 100644
index 0000000..b6c1a17
--- /dev/null
+++ b/core/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "printWidth": 88,
+  "quoteProps": "as-needed",
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false
+}
diff --git a/core/eslint.config.mjs b/core/eslint.config.mjs
new file mode 100644
index 0000000..0fdde16
--- /dev/null
+++ b/core/eslint.config.mjs
@@ -0,0 +1,20 @@
+// @ts-check
+
+import eslint from '@eslint/js';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  {
+    ignores: ['dist', 'node_modules'],
+  },
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+      },
+    },
+  }
+);
diff --git a/core/examples/README.md b/core/examples/README.md
new file mode 100644
index 0000000..7a0b73b
--- /dev/null
+++ b/core/examples/README.md
@@ -0,0 +1,28 @@
+# DocLang Viewer — component examples
+
+Isolated examples for the larger content-rendering components. Each page loads the demo archive via the `src` attribute — no build step required.
+
+## Individual panes
+
+| Example | Component | Description |
+|---------|-----------|-------------|
+| [markup-pane.html](markup-pane.html) | `<doclang-markup-pane>` | Formatted DocLang XML source view, page-by-page |
+| [reading-pane.html](reading-pane.html) | `<doclang-reading-pane>` | Rendered reading view with layers toggle |
+| [page-img-pane.html](page-img-pane.html) | `<doclang-page-img-pane>` | Original page image with bounding-box overlay (requires a `.dclx` archive with images) |
+
+## Composed
+
+| Example | Description |
+|---------|-------------|
+| [all-panes.html](all-panes.html) | All three panes side-by-side, with page navigation and element selection cross-linked via vanilla JS |
+
+## Running locally
+
+These pages fetch the demo archive over HTTP, so they need to be served rather than opened as `file://`:
+
+```bash
+# from the repo root
+python3 -m http.server 8080
+```
+
+Then open <http://localhost:8080/core/examples/>.
diff --git a/core/examples/all-panes.html b/core/examples/all-panes.html
new file mode 100644
index 0000000..f71fcc7
--- /dev/null
+++ b/core/examples/all-panes.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>DocLang — three panes in sync</title>
+  <link rel="stylesheet" href="example.css">
+  <script type="module" src="../../viewer.js"></script>
+  <style>
+    .page-controls {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.4rem 1rem;
+      background: #f7f8fa;
+      border-bottom: 1px solid #e5e7eb;
+      flex-shrink: 0;
+      font-size: 0.85rem;
+    }
+    .page-controls button {
+      padding: 0.2rem 0.6rem;
+      border: 1px solid #d0d7de;
+      border-radius: 4px;
+      background: #fff;
+      cursor: pointer;
+      font-size: 0.85rem;
+    }
+    .page-controls button:disabled { opacity: 0.4; cursor: default; }
+    #page-label { color: #57606a; min-width: 6rem; }
+
+    .pane-row {
+      flex: 1;
+      min-height: 0;
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+    .pane-row > * { min-width: 0; border-right: 1px solid #e5e7eb; }
+    .pane-row > *:last-child { border-right: none; }
+  </style>
+</head>
+<body>
+  <header>
+    <a href="README.md">← examples</a>
+    <span>All three panes in sync — click an element in any pane to cross-highlight</span>
+  </header>
+
+  <div class="page-controls">
+    <button id="btn-prev" disabled>← Prev</button>
+    <button id="btn-next">Next →</button>
+    <span id="page-label">Page 1</span>
+  </div>
+
+  <div class="pane-row">
+    <doclang-page-img-pane id="pv" src="../../assets/2501.17887.dclx" page="1"></doclang-page-img-pane>
+    <doclang-markup-pane    id="mp" src="../../assets/2501.17887.dclx" page="1"></doclang-markup-pane>
+    <doclang-reading-pane   id="rp" src="../../assets/2501.17887.dclx" page="1"></doclang-reading-pane>
+  </div>
+
+  <script type="module">
+    const pv = document.getElementById('pv');
+    const mp = document.getElementById('mp');
+    const rp = document.getElementById('rp');
+    const btnPrev = document.getElementById('btn-prev');
+    const btnNext = document.getElementById('btn-next');
+    const pageLabel = document.getElementById('page-label');
+
+    let page = 1;
+    let pageCount = 1;
+
+    // Sync page and selection across all three panes.
+    function setPage(n) {
+      page = Math.min(Math.max(1, n), pageCount);
+      [pv, mp, rp].forEach(el => { el.page = page; });
+      btnPrev.disabled = page <= 1;
+      btnNext.disabled = page >= pageCount;
+      pageLabel.textContent = `Page ${page} of ${pageCount}`;
+    }
+
+    function setSelected(id) {
+      [pv, mp, rp].forEach(el => { el.selected = id; });
+    }
+
+    // Once the page-view pane renders its first overlay it emits
+    // doclang-layout-refresh — use that moment to read pageCount.
+    pv.addEventListener('doclang-layout-refresh', () => {
+      pageCount = pv.document?.pageCount ?? 1;
+      setPage(page);
+    }, { once: true });
+
+    // Element selection events bubble up from any pane.
+    document.addEventListener('doclang-element-select', e => setSelected(e.detail.id));
+    document.addEventListener('doclang-clear-selection', () => setSelected(null));
+
+    // Page navigation.
+    btnPrev.addEventListener('click', () => setPage(page - 1));
+    btnNext.addEventListener('click', () => setPage(page + 1));
+
+    // view-page events emitted by page-nav inside each pane (if any).
+    document.addEventListener('view-page', e => setPage(e.detail.page));
+  </script>
+</body>
+</html>
diff --git a/core/examples/example.css b/core/examples/example.css
new file mode 100644
index 0000000..45b3e7a
--- /dev/null
+++ b/core/examples/example.css
@@ -0,0 +1,23 @@
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+  font-family: system-ui, sans-serif;
+}
+
+header {
+  padding: 0.5rem 1rem;
+  background: #f7f8fa;
+  border-bottom: 1px solid #e5e7eb;
+  font-size: 0.85rem;
+  color: #57606a;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-shrink: 0;
+}
+header a    { color: #3b82d4; text-decoration: none; }
+header code { background: #e5e7eb; padding: 0.1em 0.35em; border-radius: 3px; }
diff --git a/core/examples/markup-pane.html b/core/examples/markup-pane.html
new file mode 100644
index 0000000..9d7dec2
--- /dev/null
+++ b/core/examples/markup-pane.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>doclang-markup-pane — example</title>
+  <link rel="stylesheet" href="example.css">
+  <style>
+    doclang-markup-pane { flex: 1; min-height: 0; }
+  </style>
+  <script type="module" src="../../viewer.js"></script>
+</head>
+<body>
+  <header>
+    <a href="README.md">← examples</a>
+    <span><code>&lt;doclang-markup-pane&gt;</code> — loaded via <code>src</code> attribute from the demo archive</span>
+  </header>
+
+  <!--
+    src        — URL of a .dclx archive or a plain .dclg / .xml markup file.
+    page       — initial page number (default: 1).
+    selected   — element-id to pre-select (optional).
+
+    The component fetches and parses the file automatically.
+    Serve this directory over HTTP so the fetch can resolve:
+      python3 -m http.server 8080   (from the repo root)
+    then open: http://localhost:8080/core/examples/markup-pane.html
+  -->
+  <doclang-markup-pane
+    src="../../assets/2501.17887.dclx"
+    page="1"
+  ></doclang-markup-pane>
+</body>
+</html>
diff --git a/core/examples/page-img-pane.html b/core/examples/page-img-pane.html
new file mode 100644
index 0000000..4fcd872
--- /dev/null
+++ b/core/examples/page-img-pane.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>doclang-page-img-pane — example</title>
+  <link rel="stylesheet" href="example.css">
+  <style>
+    doclang-page-img-pane { flex: 1; min-height: 0; }
+  </style>
+  <script type="module" src="../../viewer.js"></script>
+</head>
+<body>
+  <header>
+    <a href="README.md">← examples</a>
+    <span><code>&lt;doclang-page-img-pane&gt;</code> — original page image with bounding-box overlay</span>
+  </header>
+
+  <!--
+    src  — must be a .dclx archive that includes page images; a plain markup
+           file has no images so the page-view pane will show nothing.
+    page — initial page number (default: 1).
+
+    Serve this directory over HTTP so the fetch can resolve:
+      python3 -m http.server 8080   (from the repo root)
+    then open: http://localhost:8080/core/examples/page-img-pane.html
+  -->
+  <doclang-page-img-pane
+    src="../../assets/2501.17887.dclx"
+    page="1"
+  ></doclang-page-img-pane>
+</body>
+</html>
diff --git a/core/examples/reading-pane.html b/core/examples/reading-pane.html
new file mode 100644
index 0000000..c13ca9e
--- /dev/null
+++ b/core/examples/reading-pane.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>doclang-reading-pane — example</title>
+  <link rel="stylesheet" href="example.css">
+  <style>
+    doclang-reading-pane { flex: 1; min-height: 0; }
+  </style>
+  <script type="module" src="../../viewer.js"></script>
+</head>
+<body>
+  <header>
+    <a href="README.md">← examples</a>
+    <span><code>&lt;doclang-reading-pane&gt;</code> — loaded via <code>src</code> attribute from the demo archive</span>
+  </header>
+
+  <!--
+    src        — URL of a .dclx archive or a plain .dclg / .xml markup file.
+    page       — initial page number (default: 1).
+    selected   — element-id to pre-select (optional).
+
+    Serve this directory over HTTP so the fetch can resolve:
+      python3 -m http.server 8080   (from the repo root)
+    then open: http://localhost:8080/core/examples/reading-pane.html
+  -->
+  <doclang-reading-pane
+    src="../../assets/2501.17887.dclx"
+    page="1"
+  ></doclang-reading-pane>
+</body>
+</html>
diff --git a/core/package-lock.json b/core/package-lock.json
new file mode 100644
index 0000000..87ddabd
--- /dev/null
+++ b/core/package-lock.json
@@ -0,0 +1,2420 @@
+{
+  "name": "@doclang/viewer-core",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@doclang/viewer-core",
+      "version": "0.1.0",
+      "dependencies": {
+        "lit": "^3.3.3"
+      },
+      "devDependencies": {
+        "@eslint/js": "^10.0.1",
+        "eslint": "^10.8.1",
+        "globals": "^17.11.0",
+        "prettier": "^3.9.6",
+        "typescript": "^6.0.3",
+        "typescript-eslint": "^8.67.0",
+        "vite": "^8.2.1",
+        "vite-plugin-dts": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.10.1.tgz",
+      "integrity": "sha512-cuadcxVFE8sDK6iWJbs8Sn0av2Nrh2QSGQhVlBW9AaAHqHwjWsZHT8LJ4hFGPh7ASBV2deFdM7H/DPjulmh8rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.23.5",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.23.5.tgz",
+      "integrity": "sha512-Y3kKLvC1dvTOT+oGlqNQ1XLqK6D1HU2YXPc52NmAlJZbMMWDzGYXMiPRJ8TYD39muD/OTjlZmNJ4ib7dvSrMBA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^3.0.5",
+        "debug": "^4.3.1",
+        "minimatch": "^10.2.4"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.7.0.tgz",
+      "integrity": "sha512-DObd/KKUsU+FaFv4PLxSRenpXfQWmPXXP3pPZ6/K1PCrMu2vQpMDMuQe/BqYeoLcz8ro0bVDF1RxOJgfVEdhUw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^1.2.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-1.2.1.tgz",
+      "integrity": "sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-10.0.1.tgz",
+      "integrity": "sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "eslint": "^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-3.0.5.tgz",
+      "integrity": "sha512-vqTaUEgxzm+YDSdElad6PiRoX4t8VGDjCtt05zn4nU810UIx/uNEV7/lZJ6KwFThKZOzOxzXy48da+No7HZaMw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.7.2.tgz",
+      "integrity": "sha512-+CNAzxglkrpNf/kKywqQfk74QjtceuOE7Qm+AF8miRvPF/wmmK5+OJOgVh3AVTT3RP2mH3+FOaxlE5v72owk0A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^1.2.1",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
+      "integrity": "sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/types": "^0.15.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.8.tgz",
+      "integrity": "sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.2",
+        "@humanfs/types": "^0.15.0",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/types": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@humanfs/types/-/types-0.15.0.tgz",
+      "integrity": "sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz",
+      "integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@lit-labs/ssr-dom-shim": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.6.0.tgz",
+      "integrity": "sha512-VHb0ALPMTlgKjM6yIxxoQNnpKyUKLD04VzeQdsiXkMqkvYlAHxq9glGLmgbb889/1GsohSOAjvQYoiBppXFqrQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.1.2.tgz",
+      "integrity": "sha512-pbCDiVMnne1lYUIaYNN5wrwQXDtHaYtg7YEFPeW+hws6U47WeFvISGUWekPGKWOP1ygrs0ef0o1VJMk1exos5A==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.5.0"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.144.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.144.0.tgz",
+      "integrity": "sha512-nuhZIOLuI6TFQ32I/WnUx+SCPY7SdSKwgnFHydAuoS1+Z4BRcaP+RRJmGzl9lw+0OFF7UmaESf7KQRXaNLHypg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.4.tgz",
+      "integrity": "sha512-jHC2cnyKz5xU2fhECtFl8OZ83cYNt13GZQD+0uMJ/X3o+ijmd56okHhTUwxVSHPx1IRVIJEZ1/1pPzeLCU6XKA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.4.tgz",
+      "integrity": "sha512-Dc5mPD8F5F/FS8i01syd7FTF6yB2fVthH/TRkjwJkzUK6EpoxHtqvZQP5Zwq80/5z19TWYHIg1KOHboCgVx/aQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.4.tgz",
+      "integrity": "sha512-fpDm4oBo6SqLvWUYCmFhdde3U9KH2fRNNMeAnAPAIwxRL345xutL0EtEUcuoxsoazdJGv/MuDBQHlCDrtbvqOg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.4.tgz",
+      "integrity": "sha512-rSJoreDE/HoIzoaib6MTp5jQtCTdMHKIvItAKT/ImS6Y6Ww76oUaeMyp4Vc/fAgd/ehji068IxetHXAnqUwN9A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.4.tgz",
+      "integrity": "sha512-/jm8OGHgn7oGaJu3i/qZI9spUGcJ+y/lk43ttQ/iO1tOd9NissG6o97bighBCiL+BKRngmcDuR6ikfwYdJmVuQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.4.tgz",
+      "integrity": "sha512-tIP06BeD9EqvECBrPZ+sqdPlYrT+aYaAiu1wYziVx5elRK/ftm33JxVDy2bXGbr6J0CrtirCkR87/X5a2euEng==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.4.tgz",
+      "integrity": "sha512-Ql1Q0EQqVThvn9VAVlwNzsUvbSFtCMGjLpRRi4pk5i7NZZ4n5ISiLMjHYtus4VQ2PvkSw24zyaCVsiS+sXPj1w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.4.tgz",
+      "integrity": "sha512-GjbjXD4XXfN19D0LZNbmiCBUoDiRACsYHr0yaIbbn8aFsXjHZifcYqu/W5Er5X2X990WjHXFrxarn5chzItorQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.4.tgz",
+      "integrity": "sha512-p5WR0NOwaRmJ/B1b6IjEFLLivwEsf3PrdBIhRbhTCQisbo2SvHHpG4ELB/+FgQNnB88LTOF86upmJmbvZdQ2lw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.4.tgz",
+      "integrity": "sha512-4/GyVjmhR+Tc6HLJvwc1sOhPqAZtySiSMesOZyX6JQ5XBxoTDEMKQzvo07NIK6nTon/SivlZqvhzvuVBNQhObQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.4.tgz",
+      "integrity": "sha512-l9eeLsCNvPpmSXUej0etw/J1eqV0Jj1D5G/xG6YTijmE6dkv6E2QezgWbTfQk63v952DPqrjOCoiqxq7Bw0YUQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.4.tgz",
+      "integrity": "sha512-e0F355MSTMm3+UOqtV3L24gFUp2N5m1f8L/7d56deik6va+AXdrt9F8LbzGpeWGWRbZEDq4m8NVnJDeBtf9DZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.4.tgz",
+      "integrity": "sha512-AWLi0uBRYh6QlE7OKhiz+phZC0qwtij2QZmhmOdsLdFn64m7oMpooE9ICE3lhm9xMb4SpDo2WbHcxX1iFLFtqw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.4.tgz",
+      "integrity": "sha512-UwSDJOg3dqCAejWdxclJjCsh3Qq4vLYMDxmyHqo1btz3stK2VqgwNd3mm5tuIwzSlGIQ/1H9Hr+Zn09mrezNqQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+      "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.4.0.tgz",
+      "integrity": "sha512-MfPp06CjRLfXQ3wY0R8vJDYBy/MvVcc9OulEfR0B8Iv9ko+GCNaRZ+EpJYFl27LhKsZK0o420sYCRHCjfCgeUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@types/esrecurse": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
+      "integrity": "sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT"
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.67.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.67.0.tgz",
+      "integrity": "sha512-Un7Heoyj65NREbKAyIrFxeM143NZpExWmy1Nep4DLeQOeLlTeumPjoNKnBrU5D5moWXbPJgRa5Uwcdu0faVNGQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.12.2",
+        "@typescript-eslint/scope-manager": "8.67.0",
+        "@typescript-eslint/type-utils": "8.67.0",
+        "@typescript-eslint/utils": "8.67.0",
+        "@typescript-eslint/visitor-keys": "8.67.0",
+        "ignore": "^7.0.5",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.5.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.67.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.6.tgz",
+      "integrity": "sha512-BAg6QkE8W+TuQLrrw0Ugr7HegXduRuuj8/ti2kSOc+jz1dmx8/WNcjr6XGnq5YpDWxFwwaavqD0+jIUOKelTsw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.67.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.67.0.tgz",
+      "integrity": "sha512-fUBfTuuEulWqX6V8+O3PtScV01tzYYRUDTAirHFKoRAt7nOzoGiPt0M/bB47wWNy0coOOcgEwAMUtBpykMxl6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.67.0",
+        "@typescript-eslint/types": "8.67.0",
+        "@typescript-eslint/typescript-estree": "8.67.0",
+        "@typescript-eslint/visitor-keys": "8.67.0",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.67.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.67.0.tgz",
+      "integrity": "sha512-cvE8c7ulYeXN9fYuszhCeCsbzyVEXuhrRCybnBre7TUmqb5nRmBfQAwCj0O3WJFDeyAZt4VYv51vMCC9LHSdYw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.67.0",
+        "@typescript-eslint/types": "^8.67.0",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.67.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.67.0.tgz",
+      "integrity": "sha512-EgvsleTwS4E+WzzSvem8fAUubLwatMNF1B5hHSLQxcvs7q2dtRhGyujHwLJSYlG41niJ7GP24Aha2+0mb1b2kg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.67.0",
+        "@typescript-eslint/visitor-keys": "8.67.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.67.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.67.0.tgz",
+      "integrity": "sha512-vV+LUSv5njUWsknE71fqKTlXUva+R76SaeORd6Zojcunk/6DvKFXONU3BrAs2H49mbygUXt6gbYunzwqNwlhdg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.67.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.67.0.tgz",
+      "integrity": "sha512-aVWDXbRmdXO9siTfX4ditQI1T9+zVcNazT48EJCD0v40/9RIFoUgZ05CmGEq9H2gixRpjUn/iplwvlcvutJW/Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.67.0",
+        "@typescript-eslint/typescript-estree": "8.67.0",
+        "@typescript-eslint/utils": "8.67.0",
+        "debug": "^4.4.3",
+        "ts-api-utils": "^2.5.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.67.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.67.0.tgz",
+      "integrity": "sha512-sBtgslww8nsMYUjhdPBiSyUqSzT8uR6g93A2QXnQC8+cGdjz0CyaOdqHDRJb1AtORbZCNUJBBeFA/tNR2uQmww==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.67.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.67.0.tgz",
+      "integrity": "sha512-EKQBCE9yNlRJYm7jdTW5AhDacDUmSwQb0FAJAmK2EKYrNXIsa2vxcSZx6PvJ/dEdI6lS+Y9W+EXckLj0iPFGcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.67.0",
+        "@typescript-eslint/tsconfig-utils": "8.67.0",
+        "@typescript-eslint/types": "8.67.0",
+        "@typescript-eslint/visitor-keys": "8.67.0",
+        "debug": "^4.4.3",
+        "minimatch": "^10.2.2",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.5.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.67.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.67.0.tgz",
+      "integrity": "sha512-U9D1FdwEWBwok3hxxSdhclMb0twvt9QnjIQ0VfQ1AiX2epnpSgv2ubVDsayOFyY8K6FX+AQ7E0FKWVG3iKsj1A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.9.1",
+        "@typescript-eslint/scope-manager": "8.67.0",
+        "@typescript-eslint/types": "8.67.0",
+        "@typescript-eslint/typescript-estree": "8.67.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.67.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.67.0.tgz",
+      "integrity": "sha512-fkv8dHRDqfGtTHuJeebdrQ7cX6Ad4WAS00rgHh9UGvMycF1mjBfsxry1XsLIFhWZ6Judlh6UdzK+TYlbpCXgnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.67.0",
+        "eslint-visitor-keys": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@volar/language-core": {
+      "version": "2.4.28",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.28.tgz",
+      "integrity": "sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/source-map": "2.4.28"
+      }
+    },
+    "node_modules/@volar/source-map": {
+      "version": "2.4.28",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.28.tgz",
+      "integrity": "sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@volar/typescript": {
+      "version": "2.4.28",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.28.tgz",
+      "integrity": "sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.28",
+        "path-browserify": "^1.0.1",
+        "vscode-uri": "^3.0.8"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.18.0.tgz",
+      "integrity": "sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
+      "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.9.tgz",
+      "integrity": "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/compare-versions": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-6.1.1.tgz",
+      "integrity": "sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/confbox": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.3.1.tgz",
+      "integrity": "sha512-cKUSoKa8YxFZZSmraVi7onONx3amu77ngK3kGpsYHDH7drPwCRkQE1RYMPlLRrMtnciRj274XNRxcHxnKmDSnA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "10.8.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-10.8.1.tgz",
+      "integrity": "sha512-wqA7W2jbsC/BnV9Iv1UZpKVFkO1AdNoSmYW8NWG4HNOBbkAMvIqDZ27pI2f07dqn583NcIC44ckjAcOXDL1QbQ==",
+      "dev": true,
+      "license": "MIT",
+      "workspaces": [
+        "packages/*"
+      ],
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.2",
+        "@eslint/config-array": "^0.23.5",
+        "@eslint/config-helpers": "^0.7.0",
+        "@eslint/core": "^1.2.1",
+        "@eslint/plugin-kit": "^0.7.2",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "ajv": "^6.14.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^9.1.2",
+        "eslint-visitor-keys": "^5.0.1",
+        "espree": "^11.2.0",
+        "esquery": "^1.7.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "minimatch": "^10.2.5",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-9.1.2.tgz",
+      "integrity": "sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@types/esrecurse": "^4.3.1",
+        "@types/estree": "^1.0.8",
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-11.2.0.tgz",
+      "integrity": "sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.16.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^5.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/exsolve": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.1.1.tgz",
+      "integrity": "sha512-9U/jZUgjnSGyntRr6y5Muu1MJcwFl6kPu7k8qLF0IMNfLqvw0NZ4nnVDq0RVoZ0RvCyumib4Ez3KYrVfilrw+g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.4.tgz",
+      "integrity": "sha512-5+ybhBZANEJxaH3X5evAFatUxLfEHSr7n6kYJ+1Qd0mUqr4eu9gIf6GDbWHf8RJijHrjjO8G+la14SlL2SeS1Q==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/globals": {
+      "version": "17.11.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-17.11.0.tgz",
+      "integrity": "sha512-Z2I8hM+PbJDXQDq3Icgpzv+mPdwr68iZUU9d5WW4FuXfDUQfkZaZuvjMv42/5crNyw154+9+VWXbYrUgDXbxNw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/kolorist": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
+      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.33.0.tgz",
+      "integrity": "sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.33.0",
+        "lightningcss-darwin-arm64": "1.33.0",
+        "lightningcss-darwin-x64": "1.33.0",
+        "lightningcss-freebsd-x64": "1.33.0",
+        "lightningcss-linux-arm-gnueabihf": "1.33.0",
+        "lightningcss-linux-arm64-gnu": "1.33.0",
+        "lightningcss-linux-arm64-musl": "1.33.0",
+        "lightningcss-linux-x64-gnu": "1.33.0",
+        "lightningcss-linux-x64-musl": "1.33.0",
+        "lightningcss-win32-arm64-msvc": "1.33.0",
+        "lightningcss-win32-x64-msvc": "1.33.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.33.0.tgz",
+      "integrity": "sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.33.0.tgz",
+      "integrity": "sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.33.0.tgz",
+      "integrity": "sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.33.0.tgz",
+      "integrity": "sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.33.0.tgz",
+      "integrity": "sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.33.0.tgz",
+      "integrity": "sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.33.0.tgz",
+      "integrity": "sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.33.0.tgz",
+      "integrity": "sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.33.0.tgz",
+      "integrity": "sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.33.0.tgz",
+      "integrity": "sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.33.0.tgz",
+      "integrity": "sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lit": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.3.tgz",
+      "integrity": "sha512-fycuvZg/hkpozL00lm1pEJH5nN/lr9ZXd6mJI2HSN4+Bzc+LDNdEApJ6HFbPkdFNHLvOplIIuJvxkS4XUxqirw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit/reactive-element": "^2.1.0",
+        "lit-element": "^4.2.0",
+        "lit-html": "^3.3.0"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.2.2.tgz",
+      "integrity": "sha512-aFKhNToWxoyhkNDmWZwEva2SlQia+jfG0fjIWV//YeTaWrVnOxD89dPKfigCUspXFmjzOEUQpOkejH5Ly6sG0w==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.5.0",
+        "@lit/reactive-element": "^2.1.0",
+        "lit-html": "^3.3.0"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.3.3.tgz",
+      "integrity": "sha512-el8M6jK2o3RXBnrSHX3ZKrsN8zEV63pSExTO1wYJz7QndGYZ8353e2a5PPX+qHe2aGayfnchQmkAojaWAREOIA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
+    "node_modules/local-pkg": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.2.1.tgz",
+      "integrity": "sha512-++gUqRDEvcnN6Zhqrr+y/CkVEHhlrR96vZn3nZZPYzMcBUyBtTKzB9NadClFIsIVSsu+3i9tfk/erqy9kAmt7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.3.0",
+        "quansync": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "10.2.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.6.tgz",
+      "integrity": "sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.8"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/mlly": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.2.tgz",
+      "integrity": "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.16.0",
+        "pathe": "^2.0.3",
+        "pkg-types": "^1.3.1",
+        "ufo": "^1.6.3"
+      }
+    },
+    "node_modules/mlly/node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mlly/node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.18",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz",
+      "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz",
+      "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pkg-types": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.3.tgz",
+      "integrity": "sha512-j/lCFdcppV0JxWpCEITdbDltBxPP6cHT+yNJ6Go2OgoSA9518X847X9z0p6LtA4Nc16+eQzCZjRrWanTGvHJ5w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.3.1",
+        "exsolve": "^1.1.1",
+        "pathe": "^2.0.3"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.26",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz",
+      "integrity": "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.17",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "3.9.6",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.9.6.tgz",
+      "integrity": "sha512-OpN0zzVdiaiAhxpuuj5efpIS4sY9j7bY6uR5mnj5yPzGkdkjNKSJeUThPb60Jw29QuAZgA4o+/iB49kFiaBX6g==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/quansync": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
+      "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/rolldown": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.4.tgz",
+      "integrity": "sha512-rSr7irW0K7QRWzjdJXqZowkcRdDtjRduh43rBltnVKd0VFq839l1lJoDvGJb6gl7+4rTTCrPWu+YfujUL8Ug7w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.144.0",
+        "@rolldown/pluginutils": "^1.0.0"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.2.4",
+        "@rolldown/binding-darwin-arm64": "1.2.4",
+        "@rolldown/binding-darwin-x64": "1.2.4",
+        "@rolldown/binding-freebsd-x64": "1.2.4",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.2.4",
+        "@rolldown/binding-linux-arm64-gnu": "1.2.4",
+        "@rolldown/binding-linux-arm64-musl": "1.2.4",
+        "@rolldown/binding-linux-ppc64-gnu": "1.2.4",
+        "@rolldown/binding-linux-s390x-gnu": "1.2.4",
+        "@rolldown/binding-linux-x64-gnu": "1.2.4",
+        "@rolldown/binding-linux-x64-musl": "1.2.4",
+        "@rolldown/binding-openharmony-arm64": "1.2.4",
+        "@rolldown/binding-win32-arm64-msvc": "1.2.4",
+        "@rolldown/binding-win32-x64-msvc": "1.2.4"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/ts-api-utils": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
+      "integrity": "sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
+      "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/typescript-eslint": {
+      "version": "8.67.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.67.0.tgz",
+      "integrity": "sha512-S2udFs8tCKEKffuJ4TB1idGUZiXdCPGi3IPBGWXarbLQ5UPXORV8QEVzJ4gCRduURMb5EkpNCdjbk0eDIuI8Yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "8.67.0",
+        "@typescript-eslint/parser": "8.67.0",
+        "@typescript-eslint/typescript-estree": "8.67.0",
+        "@typescript-eslint/utils": "8.67.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/ufo": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.4.tgz",
+      "integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unplugin": {
+      "version": "2.3.11",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.11.tgz",
+      "integrity": "sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "acorn": "^8.15.0",
+        "picomatch": "^4.0.3",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/unplugin-dts": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unplugin-dts/-/unplugin-dts-1.1.0.tgz",
+      "integrity": "sha512-KZJ+qk+lmd9dJY/PJvDRFL9BUtVubKDiX7Ai/X6mlkCArcQNzwmupKjVqHbRA42uqO5ZfFRFc+o8/OCbQ1GonQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.1.4",
+        "@volar/typescript": "^2.4.26",
+        "compare-versions": "^6.1.1",
+        "debug": "^4.4.0",
+        "glob-to-regexp": "0.4.1",
+        "kolorist": "^1.8.0",
+        "local-pkg": "^1.1.1",
+        "magic-string": "^0.30.17",
+        "unplugin": "^2.3.2"
+      },
+      "peerDependencies": {
+        "@microsoft/api-extractor": ">=7",
+        "@rspack/core": "^1",
+        "@vue/language-core": "^3.1.5",
+        "esbuild": "*",
+        "rolldown": "*",
+        "rollup": ">=3",
+        "typescript": ">=4",
+        "vite": ">=3",
+        "webpack": "^4 || ^5"
+      },
+      "peerDependenciesMeta": {
+        "@microsoft/api-extractor": {
+          "optional": true
+        },
+        "@rspack/core": {
+          "optional": true
+        },
+        "@vue/language-core": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "rolldown": {
+          "optional": true
+        },
+        "rollup": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.2.1.tgz",
+      "integrity": "sha512-EU/eS7BH3XROHh2YnBefjM6DBKA6ZeMZEYQbj7NLWg5wHYlhB8B/Mayd5XsgWq+NFYccDOTemRpdETWR6Ka/lw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.33.0",
+        "picomatch": "^4.0.5",
+        "postcss": "^8.5.25",
+        "rolldown": "~1.2.1",
+        "tinyglobby": "^0.2.17"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.4.0",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-dts": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-dts/-/vite-plugin-dts-5.1.0.tgz",
+      "integrity": "sha512-MfLc2G+mXPUDGGxpHQeYbdunavFP9UpT9yxiAsTgUXRxfEd3HqysSAM4E72jhz5eIz3OOexCHkqiVlQq8ok9/A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "unplugin-dts": "1.1.0"
+      },
+      "peerDependencies": {
+        "@microsoft/api-extractor": ">=7",
+        "rollup": ">=3",
+        "vite": ">=3"
+      },
+      "peerDependenciesMeta": {
+        "@microsoft/api-extractor": {
+          "optional": true
+        },
+        "rollup": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vscode-uri": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.2.0.tgz",
+      "integrity": "sha512-m2gXo3bn0G1kT9InzMf07fTbqMbGtyckj3bH5ktLO+1Ssv+yiATZ4dhwaQv9UZWxJh6E9IFGnQyjgWVDWVBDrg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    }
+  }
+}
diff --git a/core/package.json b/core/package.json
new file mode 100644
index 0000000..a607f0d
--- /dev/null
+++ b/core/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "@doclang/viewer-core",
+  "version": "0.1.0",
+  "description": "DocLang document viewer — Lit web components",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./*": "./dist/*.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build && vite build --config vite.standalone.config.ts",
+    "build:lib": "vite build",
+    "build:standalone": "vite build --config vite.standalone.config.ts",
+    "dev": "vite build --watch",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit",
+    "check": "npm run format:check && npm run lint && npm run typecheck && npm run build"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "eslint": "^10.8.1",
+    "globals": "^17.11.0",
+    "lit": "^3.3.3",
+    "prettier": "^3.9.6",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.67.0",
+    "vite": "^8.2.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}
diff --git a/core/src/components/base/page-controller.ts b/core/src/components/base/page-controller.ts
new file mode 100644
index 0000000..c4940d8
--- /dev/null
+++ b/core/src/components/base/page-controller.ts
@@ -0,0 +1,173 @@
+/**
+ * PageController — Lit reactive controller that adds page-flip behaviour to a
+ * pane element via both mouse-wheel and keyboard input.
+ *
+ * Wheel handling: accumulates pixel-delta events and emits 'view-page' once the
+ * configured threshold is exceeded, respecting scroll-boundary and cooldown.
+ *
+ * Keyboard handling: Arrow / Page keys fire 'view-page' when the pane or any
+ * descendant has focus.
+ */
+
+import type { ReactiveController } from 'lit';
+import type { DoclangPageElement } from './page-element';
+
+const COOLDOWN_MS = 200;
+const PIXEL_THRESHOLD = 4;
+const GESTURE_MS = 100;
+
+export class PageController implements ReactiveController {
+  private readonly _host: DoclangPageElement;
+  private readonly _getScrollPane: () => HTMLElement | null;
+
+  // Per-gesture pixel accumulator
+  private _pixelAccum = 0;
+  private _gestureUntil = 0;
+
+  // Per-pane cooldown; the viewer deduplicates via page-clamping.
+  private _lastFlipAt = 0;
+
+  // Track last-seen page so hostUpdated can detect a real page change.
+  private _lastPage: number | null = null;
+
+  constructor(
+    host: DoclangPageElement,
+    getScrollPane: () => HTMLElement | null,
+  ) {
+    this._host = host;
+    this._getScrollPane = getScrollPane;
+    host.addController(this);
+  }
+
+  hostConnected(): void {
+    this._host.addEventListener('wheel', this._onWheel, { passive: false });
+    this._host.addEventListener('keydown', this._onKeyDown);
+  }
+
+  hostDisconnected(): void {
+    this._host.removeEventListener('wheel', this._onWheel);
+    this._host.removeEventListener('keydown', this._onKeyDown);
+  }
+
+  hostUpdated(): void {
+    const page = this._host.page;
+    if (this._lastPage !== null && this._lastPage !== page) {
+      // Page actually changed — reset scroll position to the boundary that
+      // makes sense for the direction of travel.
+      const scrollPane = this._getScrollPane();
+      if (scrollPane) {
+        const dir = page > this._lastPage ? 1 : -1;
+        scrollPane.scrollTop = dir > 0 ? 0 : scrollPane.scrollHeight;
+      }
+    }
+    this._lastPage = page;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Keyboard navigation
+  // ---------------------------------------------------------------------------
+
+  private _onKeyDown = (ev: Event): void => {
+    const e = ev as KeyboardEvent;
+    const host = this._host;
+    const docState = host.document;
+    if (!docState || docState.markupOnly || docState.pageCount <= 1) return;
+
+    let dir = 0;
+    switch (e.key) {
+      case 'ArrowDown':
+      case 'PageDown':
+      case 'ArrowRight':
+        dir = 1;
+        break;
+      case 'ArrowUp':
+      case 'PageUp':
+      case 'ArrowLeft':
+        dir = -1;
+        break;
+    }
+    if (!dir) return;
+
+    e.preventDefault();
+    const targetPage = host.page + dir;
+    if (targetPage < 1 || targetPage > docState.pageCount) return;
+
+    host.dispatchEvent(
+      new CustomEvent('view-page', {
+        bubbles: true,
+        composed: true,
+        detail: { page: targetPage },
+      }),
+    );
+  };
+
+  // ---------------------------------------------------------------------------
+  // Wheel navigation
+  // ---------------------------------------------------------------------------
+
+  private _dir(e: WheelEvent): number {
+    if (e.deltaMode === 1 /* DOM_DELTA_LINE */) return e.deltaY > 0 ? 1 : e.deltaY < 0 ? -1 : 0;
+    if (e.deltaMode === 2 /* DOM_DELTA_PAGE */) return Math.sign(e.deltaY);
+    // DOM_DELTA_PIXEL — accumulate until threshold to avoid firing on every px
+    const now = performance.now();
+    if (now > this._gestureUntil) this._pixelAccum = 0;
+    this._gestureUntil = now + GESTURE_MS;
+    this._pixelAccum += e.deltaY;
+    if (Math.abs(this._pixelAccum) >= PIXEL_THRESHOLD) {
+      const dir = this._pixelAccum > 0 ? 1 : -1;
+      this._pixelAccum = 0;
+      return dir;
+    }
+    return 0;
+  }
+
+  private _onWheel = (ev: Event): void => {
+    const e = ev as WheelEvent;
+    const host = this._host;
+    const docState = host.document;
+
+    // Only act when multiple pages exist
+    if (!docState || docState.markupOnly || docState.pageCount <= 1) return;
+
+    const scrollPane = this._getScrollPane();
+    const dir = this._dir(e);
+    if (!dir) return;
+
+    if (scrollPane) {
+      // Scrollable container: only flip when the scroll boundary is reached
+      const atTop = scrollPane.scrollTop <= 0;
+      const atBottom =
+        scrollPane.scrollTop + scrollPane.clientHeight >= scrollPane.scrollHeight - 1;
+      const scrollable =
+        scrollPane.scrollHeight > scrollPane.clientHeight ||
+        scrollPane.scrollWidth > scrollPane.clientWidth;
+
+      if (scrollable && !(dir < 0 && atTop) && !(dir > 0 && atBottom)) return;
+    }
+
+    // Cooldown check
+    const now = performance.now();
+    if (now - this._lastFlipAt < COOLDOWN_MS) {
+      e.preventDefault();
+      return;
+    }
+
+    const targetPage = host.page + dir;
+    // Clamp check: don't emit if already at boundary
+    if (targetPage < 1 || targetPage > docState.pageCount) {
+      e.preventDefault();
+      return;
+    }
+
+    e.preventDefault();
+    this._lastFlipAt = now;
+
+    host.dispatchEvent(
+      new CustomEvent('view-page', {
+        bubbles: true,
+        composed: true,
+        detail: { page: targetPage },
+      }),
+    );
+  };
+}
diff --git a/core/src/components/base/page-element.ts b/core/src/components/base/page-element.ts
new file mode 100644
index 0000000..d788bba
--- /dev/null
+++ b/core/src/components/base/page-element.ts
@@ -0,0 +1,183 @@
+/**
+ * Base class for doclang web components that render document content.
+ *
+ * Supports three ways to provide the DocLang document:
+ *
+ *   1. `src` attribute — a URL (http:, data:, blob:) pointing to either a
+ *      raw XML markup string or a .dclx/.zip archive.  The component fetches
+ *      and parses it automatically.
+ *
+ *   2. Inline child `<script type="application/doclang+xml">` — the XML is
+ *      taken from the element's text content during `connectedCallback`.
+ *
+ *   3. `component.document = state` — set an already-parsed `DocumentState`
+ *      directly via the JS property (fastest path, used by the viewer app).
+ *
+ * Once a document is available, `_renderDocument()` is called.  Subclasses
+ * must implement that method.  They may also override `_clearDocument()` to
+ * reset their view when the document is removed.
+ */
+
+import { LitElement, PropertyValues } from 'lit';
+import { property } from 'lit/decorators.js';
+import { buildDocumentState } from '../../doclang/document';
+import { elementThreadId } from '../../doclang/dom';
+import type { DocumentState } from '../../doclang/types';
+
+export abstract class DoclangPageElement extends LitElement {
+  @property({ type: Number, reflect: true }) declare page: number;
+  @property({ type: String, reflect: true }) declare selected: string | null;
+  @property({ type: String }) declare src: string | null;
+
+  protected _docState: DocumentState | null = null;
+  protected _peerIds: Set<string> = new Set();
+
+  // ---------------------------------------------------------------------------
+  // Public document property
+  // ---------------------------------------------------------------------------
+
+  get document(): DocumentState | null {
+    return this._docState;
+  }
+
+  set document(state: DocumentState | null) {
+    const old = this._docState;
+    this._docState = state;
+    // Manually notify Lit so updated() sees '_docState' in `changed`, even
+    // though _docState is not a @property/@state field.  This is the correct
+    // Lit pattern for a plain field that needs to participate in the update
+    // lifecycle without being exposed as a public reflected attribute.
+    this.requestUpdate('_docState', old);
+    if (!state) {
+      this.page = 1;
+      this._clearDocument();
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Lit lifecycle
+  // ---------------------------------------------------------------------------
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    // src is handled by attributeChangedCallback via the @property decorator.
+    // Only pick up the inline <script type="application/doclang+xml"> fallback.
+    if (!this._docState && !this.getAttribute('src')) {
+      const script = this.querySelector('script[type="application/doclang+xml"]');
+      if (script?.textContent?.trim()) {
+        this._loadXmlString(
+          script.textContent.trim(),
+          this.getAttribute('label') ?? ''
+        );
+      }
+    }
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+  }
+
+  override attributeChangedCallback(name: string, _old: string, next: string): void {
+    super.attributeChangedCallback(name, _old, next);
+    if (name === 'src' && next) {
+      this._loadFromUrl(next);
+    }
+  }
+
+  override updated(changed: PropertyValues): void {
+    super.updated(changed);
+
+    if ((changed.has('page') || changed.has('_docState')) && this._docState) {
+      // Clamp page to valid range whenever page or the document changes.
+      const clamped = Math.min(Math.max(1, this.page), this._docState.pageCount);
+      if (clamped !== this.page) {
+        this.page = clamped;
+        return; // updated() will fire again with the clamped value
+      }
+      this._renderDocument();
+    }
+
+    if (changed.has('selected')) {
+      this._peerIds = this.selected ? this._computePeerIds(this.selected) : new Set();
+      this._applySelection();
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Abstract interface for subclasses
+  // ---------------------------------------------------------------------------
+
+  /** Called whenever the document or current page changes. */
+  protected abstract _renderDocument(): void;
+
+  /** Called when the selected element changes. Default: no-op. */
+  protected _applySelection(): void {
+    /* subclasses may override */
+  }
+
+  /** Called when the document is removed (set to null). Default: no-op. */
+  protected _clearDocument(): void {
+    /* subclasses may override */
+  }
+
+  // ---------------------------------------------------------------------------
+  // Private helpers
+  // ---------------------------------------------------------------------------
+
+  private _computePeerIds(elementId: string): Set<string> {
+    const peers = new Set<string>();
+    if (!this._docState?.elementIds || !this._docState.idToElement) return peers;
+    const el = this._docState.idToElement.get(elementId);
+    const threadId = el ? elementThreadId(el) : null;
+    if (!threadId) return peers;
+    for (const [node, id] of this._docState.elementIds) {
+      if (elementThreadId(node) === threadId) peers.add(id);
+    }
+    return peers;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Private loading helpers
+  // ---------------------------------------------------------------------------
+
+  private _loadXmlString(xml: string, label: string): void {
+    const state = buildDocumentState(xml, new Map(), label, new Map(), {
+      markupOnly: true,
+    });
+    if (state) this.document = state;
+  }
+
+  private async _loadFromUrl(url: string): Promise<void> {
+    try {
+      const res = await fetch(url);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const isZip =
+        url.includes('.dclx') ||
+        url.includes('.zip') ||
+        res.headers.get('content-type')?.includes('zip');
+      if (isZip) {
+        const { extractArchiveFromZipBuffer } = await import('../../doclang/document');
+        const buf = await res.arrayBuffer();
+        const { markupXml, pageImages, assetUrls } =
+          await extractArchiveFromZipBuffer(buf);
+        const label = url.split('/').pop() ?? '';
+        const state = buildDocumentState(markupXml, pageImages, label, assetUrls, {
+          markupOnly: false,
+        });
+        if (state) this.document = state;
+      } else {
+        const xml = await res.text();
+        const label = url.split('/').pop() ?? '';
+        this._loadXmlString(xml, label);
+      }
+    } catch (err) {
+      this.dispatchEvent(
+        new CustomEvent('doclang-load-error', {
+          bubbles: true,
+          composed: true,
+          detail: { error: err },
+        })
+      );
+    }
+  }
+}
diff --git a/core/src/components/collection/collection-pane.css b/core/src/components/collection/collection-pane.css
new file mode 100644
index 0000000..5316c6d
--- /dev/null
+++ b/core/src/components/collection/collection-pane.css
@@ -0,0 +1,209 @@
+@import '../theme.css';
+
+:host {
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border);
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  background: var(--panel);
+
+  --file-thumb-size: var(--doclang-file-thumb-size, 3.75rem);
+  --file-thumb-close-overflow: var(--doclang-file-thumb-close-overflow, 0.25rem);
+  --file-item-pad-x: var(--doclang-file-item-pad-x, 0.35rem);
+  --file-pane-pad-x: var(--doclang-file-pane-pad-x, 0.5rem);
+  --file-pane-fit-width: var(
+    --doclang-file-pane-fit-width,
+    calc(
+      (
+          var(--file-pane-pad-x) * 2 + var(--file-item-pad-x) * 2 +
+            var(--file-thumb-size) + var(--file-thumb-close-overflow)
+        ) *
+        1.5
+    )
+  );
+}
+:host([hidden]) {
+  display: none !important;
+}
+:host(.pane-layout-last) {
+  border-right: none;
+}
+.pane-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.35rem;
+  box-sizing: border-box;
+  height: 2.125rem;
+  padding: 0 0.35rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted);
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+}
+.pane-header-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-inline: calc(0.75rem - 0.35rem);
+}
+.file-pane-close-all {
+  appearance: none;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  background: transparent;
+  color: var(--muted);
+  font: inherit;
+  font-size: 0.625rem;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: 0 0.15rem;
+  height: 1.25rem;
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition:
+    color 0.12s ease,
+    background 0.12s ease,
+    border-color 0.12s ease;
+}
+.file-pane-close-all:hover {
+  color: var(--text);
+  background: color-mix(in srgb, var(--text) 5%, transparent);
+}
+.file-pane-close-all:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+.pane-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 0.375rem var(--file-pane-pad-x, 0.5rem);
+  min-width: 0;
+}
+.file-view-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+}
+.file-view-list > li {
+  width: 100%;
+  max-width: 100%;
+}
+.file-view-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.35rem;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  font-size: 0.8125rem;
+  line-height: 1.35;
+  text-align: center;
+  padding: 0.5rem var(--file-item-pad-x, 0.35rem);
+  cursor: pointer;
+}
+.file-view-thumb-wrap {
+  position: relative;
+  flex-shrink: 0;
+}
+.file-view-close {
+  position: absolute;
+  top: -0.25rem;
+  right: -0.25rem;
+  appearance: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 50%;
+  background: var(--bg);
+  color: var(--muted);
+  font: inherit;
+  font-size: 0.75rem;
+  line-height: 1;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
+  z-index: 1;
+}
+.file-view-close:hover {
+  color: var(--text);
+  background: var(--panel);
+}
+.file-view-close:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+.file-view-thumb {
+  flex-shrink: 0;
+  width: var(--file-thumb-size, 3.75rem);
+  height: var(--file-thumb-size, 3.75rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--placeholder-bg);
+  border: 1px solid var(--border);
+  border-radius: 0.25rem;
+  overflow: hidden;
+}
+.file-view-thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.file-view-thumb-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--muted);
+}
+.file-view-thumb-placeholder svg {
+  display: block;
+  width: 1.875rem;
+  height: 1.875rem;
+}
+.file-view-label {
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.file-view-item:hover {
+  background: var(--markup-hover);
+}
+.file-view-item.is-active {
+  background: var(--markup-selected);
+  color: var(--accent);
+  font-weight: 500;
+}
+.file-view-item:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
diff --git a/core/src/components/collection/collection-pane.ts b/core/src/components/collection/collection-pane.ts
new file mode 100644
index 0000000..a687b15
--- /dev/null
+++ b/core/src/components/collection/collection-pane.ts
@@ -0,0 +1,120 @@
+/** <doclang-collection-pane> — file list sidebar */
+
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { unsafeCSS } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import styles from './collection-pane.css?inline';
+import type { CollectionEntry } from './collection';
+
+const FILE_THUMB_PLACEHOLDER_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>`;
+
+@customElement('doclang-collection-pane')
+export class DoclangCollectionPane extends LitElement {
+  static override styles = unsafeCSS(styles);
+
+  @property({ attribute: false }) declare entries: CollectionEntry[];
+
+  override render() {
+    const hasEntries = (this.entries?.length ?? 0) > 0;
+    const closeAllBtn = hasEntries
+      ? html`<button
+          type="button"
+          class="file-pane-close-all"
+          aria-label="Clear all open files"
+          @click=${this._onCloseAll}
+        >
+          Clear
+        </button>`
+      : nothing;
+    const list = hasEntries
+      ? html`
+          <ul class="file-view-list" role="listbox" aria-label="Open files">
+            ${repeat(this.entries ?? [], (_, i) => i, this._renderEntry)}
+          </ul>
+        `
+      : nothing;
+    return html`
+      <div class="pane-header">
+        <span class="pane-header-title">Files</span>
+        ${closeAllBtn}
+      </div>
+      <div class="pane-body">${list}</div>
+    `;
+  }
+
+  private _onCloseAll = (): void => {
+    this.dispatchEvent(
+      new CustomEvent('doclang-collection-close-all', { bubbles: true, composed: true })
+    );
+  };
+
+  private _renderEntry = (entry: CollectionEntry, index: number) => {
+    const onCardClick = (e: Event): void => {
+      if ((e.target as Element).closest('.file-view-close')) return;
+      this._emitSelect(index);
+    };
+    const onCardKeydown = (e: KeyboardEvent): void => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        this._emitSelect(index);
+      }
+    };
+    const onCloseClick = (e: Event): void => {
+      e.stopPropagation();
+      this._emitClose(index);
+    };
+    const thumb = entry.thumbnailUrl
+      ? html`<img src=${entry.thumbnailUrl} alt="" />`
+      : html`<span
+          class="file-view-thumb-placeholder"
+          .innerHTML=${FILE_THUMB_PLACEHOLDER_SVG}
+        ></span>`;
+    return html`
+      <li>
+        <div
+          class="file-view-item${entry.isActive ? ' is-active' : ''}"
+          title=${entry.label}
+          tabindex="0"
+          role="option"
+          aria-selected=${entry.isActive ? 'true' : 'false'}
+          @click=${onCardClick}
+          @keydown=${onCardKeydown}
+        >
+          <div class="file-view-thumb-wrap">
+            <span class="file-view-thumb" aria-hidden="true">${thumb}</span>
+            <button
+              type="button"
+              class="file-view-close"
+              aria-label="Close ${entry.label}"
+              @click=${onCloseClick}
+            >
+              ×
+            </button>
+          </div>
+          <span class="file-view-label">${entry.label}</span>
+        </div>
+      </li>
+    `;
+  };
+
+  private _emitSelect(index: number): void {
+    this.dispatchEvent(
+      new CustomEvent('doclang-collection-select', {
+        bubbles: true,
+        composed: true,
+        detail: { index },
+      })
+    );
+  }
+
+  private _emitClose(index: number): void {
+    this.dispatchEvent(
+      new CustomEvent('doclang-collection-close', {
+        bubbles: true,
+        composed: true,
+        detail: { index },
+      })
+    );
+  }
+}
diff --git a/core/src/components/collection/collection.ts b/core/src/components/collection/collection.ts
new file mode 100644
index 0000000..2babae9
--- /dev/null
+++ b/core/src/components/collection/collection.ts
@@ -0,0 +1,333 @@
+/** File-collection controller — owns catalog state and all mutation logic */
+
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { FileCatalogEntry } from '../../doclang/types';
+import type { DocumentState } from '../../doclang/types';
+import {
+  PAGE_IMAGE_RE,
+  buildDocumentState,
+  extractArchiveFromFiles,
+  extractArchiveFromZipBuffer,
+  revokeDocumentState,
+} from '../../doclang/document';
+import { PAGE_ZOOM_DEFAULT } from '../page-img-pane/overlay';
+import { unzip } from '../../doclang/zip';
+
+export interface CollectionEntry {
+  label: string;
+  thumbnailUrl: string | null;
+  isActive: boolean;
+}
+
+export class CollectionController implements ReactiveController {
+  private readonly _host: ReactiveControllerHost;
+
+  // Catalog state — mutations call _requestUpdate() so the host re-renders.
+  private _catalog: FileCatalogEntry[] = [];
+  private _activeIndex = -1;
+
+  constructor(host: ReactiveControllerHost) {
+    this._host = host;
+    host.addController(this);
+  }
+
+  hostConnected(): void {}
+  hostDisconnected(): void {}
+
+  get entries(): CollectionEntry[] {
+    return this._catalog.map((entry, i) => ({
+      label: entry.label,
+      thumbnailUrl: entry.thumbnailUrl,
+      isActive: i === this._activeIndex,
+    }));
+  }
+
+  get size(): number {
+    return this._catalog.length;
+  }
+
+  get activeIndex(): number {
+    return this._activeIndex;
+  }
+
+  get activeEntry(): FileCatalogEntry | null {
+    return this._catalog[this._activeIndex] ?? null;
+  }
+
+  hasMultiple(): boolean {
+    return this._catalog.length > 1;
+  }
+
+  findCatalogIndexForFile(file: File): number {
+    return this._catalog.findIndex(entry => {
+      const source = entry.source;
+      return (
+        source instanceof File &&
+        source.name === file.name &&
+        source.size === file.size &&
+        source.lastModified === file.lastModified
+      );
+    });
+  }
+
+  async addFiles(files: File[], { replace = false } = {}): Promise<DocumentState | null> {
+    if (replace) this._clearAll();
+    const startIndex = this._catalog.length;
+    let switchIndex: number | null = null;
+    for (const file of files) {
+      const existingIndex = replace ? -1 : this.findCatalogIndexForFile(file);
+      if (existingIndex !== -1) {
+        if (switchIndex === null) switchIndex = existingIndex;
+        continue;
+      }
+      const entry = this._createEntry(file);
+      this._catalog.push(entry);
+      this._enrichThumbnail(entry);
+      if (switchIndex === null) switchIndex = this._catalog.length - 1;
+    }
+    if (!this._catalog.length) return null;
+    return this._switchTo(replace ? 0 : switchIndex ?? startIndex);
+  }
+
+  async addArchiveBuffer(
+    buffer: ArrayBuffer,
+    label: string,
+    { replace = false } = {}
+  ): Promise<DocumentState | null> {
+    if (replace) this._clearAll();
+    const entry: FileCatalogEntry = {
+      id: crypto.randomUUID(),
+      label,
+      kind: 'archive',
+      source: buffer,
+      currentPage: 1,
+      pageZoom: PAGE_ZOOM_DEFAULT,
+      snapshot: null,
+      thumbnailUrl: null,
+    };
+    this._catalog.push(entry);
+    this._enrichThumbnail(entry);
+    return this._switchTo(replace ? 0 : this._catalog.length - 1);
+  }
+
+  async appendFolderArchive(files: File[]): Promise<DocumentState | null> {
+    if (!files.some(f => f.name === 'document.xml')) {
+      alert('Archive must contain document.xml at its root.');
+      return null;
+    }
+    const rootName =
+      (files[0]!.webkitRelativePath || files[0]!.name).split('/')[0] || 'archive';
+    const entry: FileCatalogEntry = {
+      id: crypto.randomUUID(),
+      label: rootName,
+      kind: 'folder',
+      source: files,
+      currentPage: 1,
+      pageZoom: PAGE_ZOOM_DEFAULT,
+      snapshot: null,
+      thumbnailUrl: null,
+    };
+    this._catalog.push(entry);
+    this._enrichThumbnail(entry);
+    return this._switchTo(this._catalog.length - 1);
+  }
+
+  /** Persist scroll/zoom state for the currently-active entry. */
+  persistActiveViewState(page: number, zoomPercent: number): void {
+    const entry = this.activeEntry;
+    if (!entry) return;
+    entry.currentPage = page;
+    entry.pageZoom = zoomPercent;
+  }
+
+  /** Switch to the entry at index; returns the parsed DocumentState or null on failure. */
+  async selectEntry(index: number): Promise<DocumentState | null> {
+    if (index < 0 || index >= this._catalog.length) return null;
+    this._releaseActive();
+    return this._switchTo(index);
+  }
+
+  /** Close (remove) the entry at index; returns the new active DocumentState, or null. */
+  async closeEntry(index: number): Promise<{ doc: DocumentState | null; newIndex: number }> {
+    if (index < 0 || index >= this._catalog.length) return { doc: null, newIndex: -1 };
+    const wasActive = index === this._activeIndex;
+    const entry = this._catalog[index]!;
+    if (wasActive) {
+      this._releaseActive();
+      this._activeIndex = -1;
+    }
+    this._revoke(entry);
+    this._catalog.splice(index, 1);
+
+    if (!this._catalog.length) {
+      this._requestUpdate();
+      return { doc: null, newIndex: -1 };
+    }
+    if (wasActive) {
+      const nextIndex = Math.min(index, this._catalog.length - 1);
+      const doc = await this._switchTo(nextIndex);
+      return { doc, newIndex: this._activeIndex };
+    }
+    if (index < this._activeIndex) this._activeIndex -= 1;
+    this._requestUpdate();
+    return { doc: null, newIndex: this._activeIndex };
+  }
+
+  clearAll(): void {
+    this._clearAll();
+    this._requestUpdate();
+  }
+
+  isArchiveFile(file: File): boolean {
+    return /\.dclx$/i.test(file.name) || /\.zip$/i.test(file.name);
+  }
+
+  isMarkupFile(file: File): boolean {
+    return /\.(?:dclg(?:\.xml)?|xml)$/i.test(file.name);
+  }
+
+  private _requestUpdate(): void {
+    this._host.requestUpdate();
+  }
+
+  private async _switchTo(index: number): Promise<DocumentState | null> {
+    this._activeIndex = index;
+    const entry = this._catalog[index]!;
+    const doc = await this._parse(entry);
+    if (!doc) {
+      this._revoke(entry);
+      this._catalog.splice(index, 1);
+      this._activeIndex = -1;
+      this._requestUpdate();
+      if (this._catalog.length)
+        return this._switchTo(Math.min(index, this._catalog.length - 1));
+      return null;
+    }
+    entry.snapshot = doc;
+    return doc;
+  }
+
+  private _releaseActive(): void {
+    const entry = this.activeEntry;
+    if (entry?.snapshot) {
+      revokeDocumentState(entry.snapshot);
+      entry.snapshot = null;
+    }
+  }
+
+  private _clearAll(): void {
+    this._releaseActive();
+    for (const entry of this._catalog) this._revoke(entry);
+    this._catalog = [];
+    this._activeIndex = -1;
+  }
+
+  private _revoke(entry: FileCatalogEntry): void {
+    if (entry.thumbnailUrl?.startsWith('blob:')) URL.revokeObjectURL(entry.thumbnailUrl);
+    entry.thumbnailUrl = null;
+  }
+
+  private _createEntry(file: File): FileCatalogEntry {
+    return {
+      id: crypto.randomUUID(),
+      label: file.name,
+      kind: this.isMarkupFile(file) ? 'markup' : 'archive',
+      source: file,
+      currentPage: 1,
+      pageZoom: PAGE_ZOOM_DEFAULT,
+      snapshot: null,
+      thumbnailUrl: null,
+    };
+  }
+
+  private _enrichThumbnail(entry: FileCatalogEntry): void {
+    this._resolveThumbnail(entry).then(url => {
+      if (!this._catalog.includes(entry)) {
+        if (url?.startsWith('blob:')) URL.revokeObjectURL(url);
+        return;
+      }
+      if (url) this._requestUpdate();
+    });
+  }
+
+  private async _resolveThumbnail(entry: FileCatalogEntry): Promise<string | null> {
+    if (entry.thumbnailUrl) return entry.thumbnailUrl;
+    if (entry.kind === 'markup') return null;
+    try {
+      if (entry.kind === 'folder')
+        entry.thumbnailUrl = this._firstPageUrlFromFiles(entry.source as File[]);
+      else if (entry.kind === 'archive')
+        entry.thumbnailUrl = await this._firstPageUrlFromZip(entry.source as File | ArrayBuffer);
+    } catch {
+      entry.thumbnailUrl = null;
+    }
+    return entry.thumbnailUrl;
+  }
+
+  private _firstPageUrlFromFiles(files: File[]): string | null {
+    let bestPage = Infinity;
+    let bestFile: File | null = null;
+    for (const f of files) {
+      const relPath = f.webkitRelativePath || f.name;
+      const parts = relPath.split('/');
+      if (parts.length < 2 || parts[parts.length - 2] !== 'pages') continue;
+      const m = PAGE_IMAGE_RE.exec(f.name);
+      if (!m) continue;
+      const pageNum = Number(m[1]);
+      if (pageNum < bestPage) { bestPage = pageNum; bestFile = f; }
+    }
+    return bestFile ? URL.createObjectURL(bestFile) : null;
+  }
+
+  private async _firstPageUrlFromZip(source: File | ArrayBuffer): Promise<string | null> {
+    const buffer = source instanceof File ? await source.arrayBuffer() : source;
+    const entries = await unzip(buffer, {
+      shouldExtract: name => /^pages\/\d+\.(png|jpe?g|webp)$/i.test(name),
+    });
+    let bestPage = Infinity;
+    let bestEntry: { name: string; data: Uint8Array } | null = null;
+    for (const e of entries) {
+      const m = e.name.match(/^pages\/(\d+)\.(png|jpe?g|webp)$/i);
+      if (!m) continue;
+      const pageNum = Number(m[1]);
+      if (pageNum < bestPage) { bestPage = pageNum; bestEntry = e; }
+    }
+    if (!bestEntry) return null;
+    const ext = bestEntry.name.split('.').pop() ?? 'png';
+    return URL.createObjectURL(new Blob([bestEntry.data as BlobPart], { type: this._mimeFromExt(ext) }));
+  }
+
+  private _mimeFromExt(ext: string): string {
+    const n = ext.toLowerCase().replace('jpeg', 'jpg');
+    if (n === 'png') return 'image/png';
+    if (n === 'webp') return 'image/webp';
+    return 'image/jpeg';
+  }
+
+  private async _parse(entry: FileCatalogEntry): Promise<DocumentState | null> {
+    try {
+      if (entry.kind === 'markup') {
+        const text =
+          entry.source instanceof File
+            ? await (entry.source as File).text()
+            : new TextDecoder().decode(entry.source as ArrayBuffer);
+        return buildDocumentState(text, new Map(), entry.label, new Map(), { markupOnly: true });
+      }
+      if (entry.kind === 'archive') {
+        const buffer =
+          entry.source instanceof File
+            ? await (entry.source as File).arrayBuffer()
+            : (entry.source as ArrayBuffer);
+        const { markupXml, pageImages, assetUrls } = await extractArchiveFromZipBuffer(buffer);
+        return buildDocumentState(markupXml, pageImages, entry.label, assetUrls, { markupOnly: false });
+      }
+      if (entry.kind === 'folder') {
+        const { markupXml, pageImages, assetUrls } = await extractArchiveFromFiles(entry.source as File[]);
+        return buildDocumentState(markupXml, pageImages, entry.label, assetUrls, { markupOnly: false });
+      }
+    } catch (err) {
+      alert(`Failed to read ${entry.label}: ${(err as Error).message}`);
+    }
+    return null;
+  }
+}
diff --git a/core/src/components/container/pane-stack.ts b/core/src/components/container/pane-stack.ts
new file mode 100644
index 0000000..969eba3
--- /dev/null
+++ b/core/src/components/container/pane-stack.ts
@@ -0,0 +1,83 @@
+/**
+ * <doclang-pane-stack> — synchronises a set of DoclangPageElement children.
+ *
+ * Place any number of DoclangPageElement-based panes as children (via slot).
+ *
+ * Example:
+ *   <doclang-pane-stack src="doc.dclx" page="1">
+ *     <doclang-markup-pane></doclang-markup-pane>
+ *     <doclang-reading-pane></doclang-reading-pane>
+ *   </doclang-pane-stack>
+ */
+
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { DoclangPageElement } from '../base/page-element';
+
+@customElement('doclang-pane-stack')
+export class DoclangPaneStack extends DoclangPageElement {
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener('view-page', this._onChildViewPage as EventListener);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener('view-page', this._onChildViewPage as EventListener);
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+
+  protected override _renderDocument(): void {
+    this._pushToChildren();
+  }
+
+  protected override _clearDocument(): void {
+    this._pushToChildren();
+  }
+
+  protected override _applySelection(): void {
+    this._pushSelectedToChildren();
+  }
+
+  private _children(): DoclangPageElement[] {
+    return Array.from(this.children).filter(
+      (el): el is DoclangPageElement => el instanceof DoclangPageElement,
+    );
+  }
+
+  private _pushToChildren(): void {
+    for (const child of this._children()) {
+      child.document = this._docState;
+      child.page = this.page;
+      child.selected = this.selected ?? null;
+    }
+  }
+
+  private _pushSelectedToChildren(): void {
+    for (const child of this._children()) {
+      child.selected = this.selected ?? null;
+    }
+  }
+
+  private _onChildViewPage = (e: Event): void => {
+    // Only handle events from children, not from self (PageController on this
+    // element would emit on self too if it were installed — it isn't, but
+    // guard anyway).
+    if (e.target === this) return;
+    const requested = (e as CustomEvent<{ page: number }>).detail.page;
+    // Stop the event here — pane-stack owns page navigation for its subtree.
+    e.stopPropagation();
+    this.page = requested;
+    // page setter → updated() → _renderDocument() → _pushToChildren()
+  };
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'doclang-pane-stack': DoclangPaneStack;
+  }
+}
diff --git a/core/src/components/dropdown/dropdown.css b/core/src/components/dropdown/dropdown.css
new file mode 100644
index 0000000..7ace933
--- /dev/null
+++ b/core/src/components/dropdown/dropdown.css
@@ -0,0 +1,69 @@
+@import '../theme.css';
+
+:host {
+  display: contents;
+}
+
+.dropdown-wrap {
+  position: relative;
+}
+
+.dropdown-btn {
+  appearance: none;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--muted);
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  transition:
+    color 0.12s ease,
+    background 0.12s ease,
+    border-color 0.12s ease;
+  border-radius: 0.375rem;
+  padding: 0.35rem 0.45rem 0.35rem 0.55rem;
+  font-size: 0.8125rem;
+  line-height: 1.2;
+  font: inherit;
+}
+.dropdown-btn::after {
+  content: '';
+  flex-shrink: 0;
+  width: 0.32rem;
+  height: 0.32rem;
+  margin-left: 0.3rem;
+  margin-top: -0.14em;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: rotate(45deg);
+  opacity: 0.65;
+}
+.dropdown-btn:hover {
+  color: var(--text);
+  background: color-mix(in srgb, var(--text) 5%, transparent);
+}
+.dropdown-btn[aria-expanded='true'] {
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
+  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
+}
+.dropdown-btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.dropdown-panel {
+  position: absolute;
+  top: calc(100% + 0.35rem);
+  right: 0;
+  z-index: 30;
+  min-width: 11rem;
+  padding: 0.5rem 0;
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+  background: var(--panel);
+  box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--text) 12%, transparent);
+}
diff --git a/core/src/components/dropdown/dropdown.ts b/core/src/components/dropdown/dropdown.ts
new file mode 100644
index 0000000..fd1e789
--- /dev/null
+++ b/core/src/components/dropdown/dropdown.ts
@@ -0,0 +1,87 @@
+/** <doclang-dropdown> — reusable trigger-button + dropdown panel */
+
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { unsafeCSS } from 'lit';
+import styles from './dropdown.css?inline';
+
+/**
+ * A button that toggles a floating dropdown panel below it.
+ *
+ * Attributes:
+ *   label   — text shown on the trigger button
+ *
+ * The dropdown content is provided via the default slot.
+ *
+ * The host closes the panel when a click occurs outside this element,
+ * or when setOpen(false) is called externally.
+ */
+@customElement('doclang-dropdown')
+export class DoclangDropdown extends LitElement {
+  static override styles = unsafeCSS(styles);
+
+  @property({ type: String }) label = '';
+
+  private _open = false;
+
+  override render() {
+    return html`
+      <div class="dropdown-wrap">
+        <button
+          type="button"
+          class="dropdown-btn"
+          aria-expanded=${this._open ? 'true' : 'false'}
+          aria-haspopup="true"
+          @click=${this._onBtnClick}
+        >
+          ${this.label}
+        </button>
+        ${this._open
+          ? html`<div class="dropdown-panel" role="menu"><slot></slot></div>`
+          : nothing}
+      </div>
+    `;
+  }
+
+  setOpen(open: boolean): void {
+    this._open = open;
+    this.requestUpdate();
+  }
+
+  get isOpen(): boolean {
+    return this._open;
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    document.addEventListener('click', this._onDocClick);
+    document.addEventListener('keydown', this._onDocKeydown);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    document.removeEventListener('click', this._onDocClick);
+    document.removeEventListener('keydown', this._onDocKeydown);
+  }
+
+  private _onBtnClick = (e: Event): void => {
+    e.stopPropagation();
+    this.setOpen(!this._open);
+  };
+
+  private _onDocClick = (e: Event): void => {
+    if (!this._open) return;
+    if (e.composedPath().includes(this as unknown as EventTarget)) return;
+    this.setOpen(false);
+  };
+
+  private _onDocKeydown = (e: KeyboardEvent): void => {
+    if (this._open && e.key === 'Escape') this.setOpen(false);
+  };
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'doclang-dropdown': DoclangDropdown;
+  }
+}
diff --git a/core/src/components/markup-pane/markup-pane.css b/core/src/components/markup-pane/markup-pane.css
new file mode 100644
index 0000000..871c6ed
--- /dev/null
+++ b/core/src/components/markup-pane/markup-pane.css
@@ -0,0 +1,289 @@
+@import '../theme.css';
+
+:host {
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border);
+  min-height: 0;
+  min-width: 0;
+  background: var(--panel);
+
+  --xml-tag: var(--doclang-xml-tag, #116329);
+  --xml-bracket: var(--doclang-xml-bracket, #24292e);
+  --xml-attr-name: var(--doclang-xml-attr-name, #0550ae);
+  --xml-attr-value: var(--doclang-xml-attr-value, #0a3069);
+  --xml-text: var(--doclang-xml-text, #24292e);
+  --xml-cdata: var(--doclang-xml-cdata, #6a737d);
+  --xml-cdata-delimiter: var(--doclang-xml-cdata-delimiter, #6a737d);
+}
+:host([hidden]) {
+  display: none !important;
+}
+:host(.pane-layout-last) {
+  border-right: none;
+}
+.pane-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  box-sizing: border-box;
+  height: 2.125rem;
+  padding: 0 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted);
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+}
+.pane-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 0;
+  background: var(--markup-bg);
+  color: var(--markup-fg);
+}
+.pane-body .placeholder {
+  margin: 1rem;
+}
+.placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 12rem;
+  color: var(--muted);
+  font-style: italic;
+  background: var(--placeholder-bg);
+  border: 1px dashed var(--border);
+  border-radius: 0.5rem;
+  padding: 2rem;
+  text-align: center;
+}
+pre.markup {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.markup {
+  margin: 0;
+  padding: 0.75rem 1rem 1rem;
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.55;
+  tab-size: 2;
+  --markup-indent: 2ch;
+  --markup-gutter-width: 1rem;
+}
+.markup-ghost-tag-part {
+  opacity: 0.35;
+  cursor: help;
+}
+.head-tooltip {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 0.6875rem;
+  line-height: 1.4;
+}
+.head-tooltip th {
+  padding: 0.1rem 0.55rem 0.1rem 0;
+  color: var(--muted);
+  font-weight: 600;
+  text-align: left;
+  vertical-align: top;
+  white-space: nowrap;
+}
+.head-tooltip td {
+  padding: 0.1rem 0;
+  vertical-align: top;
+  word-break: break-word;
+}
+.head-tooltip .head-default {
+  color: var(--muted);
+  font-style: italic;
+  white-space: nowrap;
+}
+.markup-el {
+  cursor: pointer;
+  border-radius: 0.2rem;
+}
+.markup-el:hover {
+  background: var(--markup-hover);
+}
+.markup-el.selected {
+  background: var(--markup-selected);
+  box-shadow: inset 0 0 0 1px var(--accent);
+}
+.markup-line {
+  white-space: pre-wrap;
+  word-break: break-word;
+  cursor: pointer;
+  padding: 0 0.25rem;
+  border-radius: 0.15rem;
+}
+.markup-line-content {
+  display: flex;
+  align-items: baseline;
+  min-width: 0;
+  padding-left: calc(var(--markup-depth, 0) * var(--markup-indent));
+}
+.markup-gutter {
+  flex: 0 0 var(--markup-gutter-width);
+  width: var(--markup-gutter-width);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.markup-line-body {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+summary::-webkit-details-marker {
+  display: none;
+}
+summary {
+  list-style: none;
+  display: block;
+}
+summary:focus {
+  outline: none;
+}
+.markup-fold-toggle {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--markup-gutter-width);
+  height: 1rem;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0.15rem;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.markup-fold-toggle::before {
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 5px solid currentColor;
+  transform: rotate(90deg);
+  transition: transform 0.12s ease;
+}
+details:not([open]) > summary .markup-fold-toggle::before {
+  transform: rotate(0deg);
+}
+.markup-fold-toggle:hover {
+  background: var(--markup-hover);
+  color: var(--markup-fg);
+}
+.markup-fold-suffix {
+  display: none;
+}
+details:not([open]) > summary .markup-fold-suffix {
+  display: inline;
+}
+details:not([open]) > .markup-fold-body {
+  display: none;
+}
+.xml-tag {
+  color: var(--xml-tag);
+}
+.xml-bracket {
+  color: var(--xml-bracket);
+}
+.xml-attr-name {
+  color: var(--xml-attr-name);
+}
+.xml-attr-value {
+  color: var(--xml-attr-value);
+}
+.xml-attr-value-truncatable {
+  display: inline;
+}
+.xml-attr-value-chip {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3em;
+  margin: 0 0 0 0.35em;
+  padding: 0.08em 0.45em 0.08em 0.5em;
+  border: 1px solid var(--border);
+  border-radius: 0.25rem;
+  background: var(--placeholder-bg);
+  color: var(--muted);
+  font-family: var(--font-ui, system-ui, sans-serif);
+  font-size: 0.72em;
+  font-weight: 600;
+  line-height: 1.35;
+  cursor: pointer;
+  vertical-align: baseline;
+  white-space: nowrap;
+}
+.xml-attr-value-chip::after {
+  content: '';
+  width: 0;
+  height: 0;
+  border-top: 0.28em solid currentColor;
+  border-left: 0.22em solid transparent;
+  border-right: 0.22em solid transparent;
+  opacity: 0.75;
+  transition: transform 0.12s ease;
+}
+.xml-attr-value-chip[aria-expanded='true']::after {
+  transform: rotate(180deg);
+}
+.xml-attr-value-chip:hover,
+.xml-attr-value-chip[aria-expanded='true'] {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 8%, var(--placeholder-bg));
+}
+.markup-embedded-uri-panel {
+  cursor: text;
+}
+.markup-embedded-uri-panel:hover {
+  background: transparent;
+}
+.markup-embedded-uri-panel-body {
+  margin: 0.1rem 0 0.25rem;
+  padding: 0.45rem 0.6rem;
+  max-height: 8rem;
+  overflow: auto;
+  color: var(--xml-attr-value);
+  word-break: break-all;
+  background: var(--placeholder-bg);
+  border: 1px solid var(--border);
+  border-radius: 0.25rem;
+  user-select: text;
+}
+.xml-text {
+  color: var(--xml-text);
+}
+.xml-cdata {
+  color: var(--xml-cdata);
+}
+.xml-cdata-delimiter {
+  color: var(--xml-cdata-delimiter);
+}
+
+@media (prefers-color-scheme: dark) {
+  :host {
+    --xml-tag: var(--doclang-xml-tag, #4ec9b0);
+    --xml-bracket: var(--doclang-xml-bracket, #808080);
+    --xml-attr-name: var(--doclang-xml-attr-name, #9cdcfe);
+    --xml-attr-value: var(--doclang-xml-attr-value, #ce9178);
+    --xml-text: var(--doclang-xml-text, #d4d4d4);
+    --xml-cdata: var(--doclang-xml-cdata, #b5cea8);
+    --xml-cdata-delimiter: var(--doclang-xml-cdata-delimiter, #808080);
+  }
+}
diff --git a/core/src/components/markup-pane/markup-pane.ts b/core/src/components/markup-pane/markup-pane.ts
new file mode 100644
index 0000000..bbfeba2
--- /dev/null
+++ b/core/src/components/markup-pane/markup-pane.ts
@@ -0,0 +1,632 @@
+/** <doclang-markup-pane> — DocLang XML markup view */
+
+import { html, nothing, render, type TemplateResult } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { unsafeCSS } from 'lit';
+import { DoclangPageElement } from '../base/page-element';
+import { PageController } from '../base/page-controller';
+import styles from './markup-pane.css?inline';
+import {
+  assignElementIds,
+  invertElementIds,
+  segmentHasMarkup,
+  NO_MARKUP,
+} from '../../doclang/document';
+import {
+  HEAD_TAGS,
+  CELL_SPAN_TAGS,
+  OTSL_CONTAINER_TAGS,
+  isTextLikeNode,
+  isWhitespaceOnlyText,
+  markupAttributes,
+  localName,
+  childElements,
+  formatMarkupTextNode,
+  serializeMarkupTextNodes,
+  skipUntilListItemBoundary,
+  skipUntilCellBoundary,
+  isCellToken,
+  isSemanticElement,
+} from '../../doclang/dom';
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const VIRTUAL_TEXT_TAG_HINT =
+  'DocLang virtual <text>; wrapping tags not included in source';
+
+const LONG_EMBEDDED_URI_PREVIEW_LENGTH = 30;
+
+// ---------------------------------------------------------------------------
+// Truncatable embedded URI helpers (Pure Utilities)
+// ---------------------------------------------------------------------------
+
+function isTruncatableEmbeddedImageUri(value: string): boolean {
+  if (!value || value.length <= LONG_EMBEDDED_URI_PREVIEW_LENGTH) return false;
+  return /^(data:image\/|blob:)/i.test(value);
+}
+
+function formatCompactByteSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) {
+    const kb = bytes / 1024;
+    return kb < 10 ? `${kb.toFixed(1)} KB` : `${Math.round(kb)} KB`;
+  }
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function formatEmbeddedUriSizeLabel(value: string): string {
+  if (/^blob:/i.test(value)) {
+    return value.length >= 1024
+      ? `${Math.round(value.length / 1024)} KB URL`
+      : `${value.length} char URL`;
+  }
+  const comma = value.indexOf(',');
+  if (comma === -1) return 'embedded data';
+  const header = value.slice(0, comma);
+  const payload = value.slice(comma + 1).replace(/\s/g, '');
+  const mime = /^data:([^;,]+)/i.exec(header)?.[1] ?? '';
+  const shortMime = mime.startsWith('image/') ? mime.slice(6) : mime || 'data';
+  const bytes = Math.floor((payload.replace(/=+$/, '').length * 3) / 4);
+  return `${shortMime} · ${formatCompactByteSize(bytes)}`;
+}
+
+// ---------------------------------------------------------------------------
+// Slice / virtual-text helpers (Pure Utilities)
+// ---------------------------------------------------------------------------
+
+function sliceHasMarkupContent(nodes: ArrayLike<ChildNode>): boolean {
+  for (let i = 0; i < nodes.length; i += 1) {
+    const node = nodes[i];
+    if (!node) continue;
+    if (isTextLikeNode(node) && !isWhitespaceOnlyText(node)) return true;
+    if (node.nodeType === Node.ELEMENT_NODE) return true;
+  }
+  return false;
+}
+
+function isVirtualTextSkippableNode(node: ChildNode): boolean {
+  if (isWhitespaceOnlyText(node)) return true;
+  if (node.nodeType !== Node.ELEMENT_NODE) return false;
+  const tag = localName(node as Element);
+  return tag === 'location' || HEAD_TAGS.has(tag);
+}
+
+function shouldWrapVirtualText(contentNodes: ChildNode[]): boolean {
+  if (!sliceHasMarkupContent(contentNodes)) return false;
+  for (const node of contentNodes) {
+    if (isVirtualTextSkippableNode(node)) continue;
+    if (isTextLikeNode(node)) return true;
+    if (node.nodeType === Node.ELEMENT_NODE && !isSemanticElement(node as Element))
+      return true;
+  }
+  return false;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+@customElement('doclang-markup-pane')
+export class DoclangMarkupPane extends DoclangPageElement {
+  static override styles = unsafeCSS(styles);
+
+  private _wheel = new PageController(this, () => this.scrollPane);
+
+  // null = no document loaded yet; false = document loaded but no markup; true = has markup
+  @state() private _hasMarkup: boolean | null = null;
+  @state() private _markupTemplate: TemplateResult | TemplateResult[] | null = null;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.classList.add('pane', 'pane-markup');
+  }
+
+  /* prettier-ignore */
+  override render() {
+    return html`<div class="pane-header">DocLang</div><div class="pane-body" id="markup-pane" @click=${this._onBodyClick}>${this._hasMarkup === false ? html`<div class="placeholder">${NO_MARKUP}</div>` : this._hasMarkup === true && this._markupTemplate ? html`<div class="markup">${this._markupTemplate}</div>` : nothing}</div>`;
+  }
+
+  /** The scrollable content body inside the shadow root. */
+  get scrollPane(): HTMLElement | null {
+    return this.shadowRoot?.querySelector('.pane-body') ?? null;
+  }
+
+  protected override _applySelection(): void {
+    if (!this.shadowRoot) return;
+    for (const el of this.shadowRoot.querySelectorAll('.markup-el.selected')) {
+      el.classList.remove('selected');
+    }
+    if (!this.selected) return;
+    const target =
+      this.shadowRoot.querySelector(
+        `.markup-el-virtual-text[data-element-id="${this.selected}"]`
+      ) ?? this.shadowRoot.querySelector(`[data-element-id="${this.selected}"]`);
+    if (target) {
+      target.classList.add('selected');
+      target.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }
+  }
+
+  protected override _renderDocument(): void {
+    const state = this._docState;
+    if (!state) {
+      this._markupTemplate = null;
+      this._hasMarkup = null;
+      return;
+    }
+
+    const segment = state.segments[this.page - 1] ?? [];
+    const elementIds = assignElementIds(segment);
+    state.elementIds = elementIds;
+    state.idToElement = invertElementIds(elementIds);
+
+    if (segmentHasMarkup(segment)) {
+      this._markupTemplate = this._buildMarkupView(segment, elementIds);
+      this._hasMarkup = true;
+    } else {
+      this._markupTemplate = null;
+      this._hasMarkup = false;
+    }
+    this.requestUpdate();
+  }
+
+  protected override _clearDocument(): void {
+    this._markupTemplate = null;
+    this._hasMarkup = null;
+    this.requestUpdate();
+  }
+
+  private _buildMarkupView(
+    segment: Element[],
+    elementIds: Map<Element, string>
+  ): TemplateResult[] {
+    const templates: TemplateResult[] = [];
+    for (const el of segment) {
+      if (el.nodeType === Node.ELEMENT_NODE) {
+        templates.push(this._renderMarkupElement(el, 0, elementIds));
+      }
+    }
+    return templates;
+  }
+
+  private _onBodyClick = (e: MouseEvent): void => {
+    const target = e.target as Element;
+    const attrToggle = target.closest('.xml-attr-value-chip');
+    if (attrToggle) {
+      e.stopPropagation();
+      this._toggleTruncatableMarkupAttrValue(attrToggle);
+      return;
+    }
+    const ghostText = target.closest('.markup-el-virtual-text');
+    const elementId = ghostText?.hasAttribute('data-element-id')
+      ? ghostText.getAttribute('data-element-id')!
+      : (target
+          .closest('.markup-el[data-element-id]')
+          ?.getAttribute('data-element-id') ?? null);
+    if (elementId) {
+      this.dispatchEvent(
+        new CustomEvent('doclang-element-select', {
+          bubbles: true,
+          composed: true,
+          detail: { id: elementId },
+        })
+      );
+    }
+  };
+
+  private _onSummaryClick = (e: MouseEvent): void => {
+    const target = e.target as Element;
+    // Only toggle the details open/close state if clicking the fold toggle arrow area
+    if (!target.closest('.markup-fold-toggle') && !target.closest('.markup-gutter')) {
+      e.preventDefault();
+    }
+  };
+
+  // ---------------------------------------------------------------------------
+  // Component-private markup Lit template builders
+  // ---------------------------------------------------------------------------
+
+  /* prettier-ignore */
+  private _createEmbeddedUriContinuationPanel(value: string, depth: number): HTMLElement {
+    const container = document.createElement('div');
+    render(
+      html`<div class="markup-line markup-embedded-uri-panel" style="--markup-depth: ${depth}"><span class="markup-line-content"><span class="markup-gutter" aria-hidden="true"></span><span class="markup-line-body"><div class="markup-embedded-uri-panel-body" @click=${(e: Event) => e.stopPropagation()}>${value}</div></span></span></div>`,
+      container
+    );
+    return container.firstElementChild as HTMLElement;
+  }
+
+  /* prettier-ignore */
+  private _renderTruncatableMarkupAttrValue(value: string): TemplateResult {
+    const sizeLabel = formatEmbeddedUriSizeLabel(value);
+    return html`<span class="xml-attr-value xml-attr-value-truncatable" data-full-value=${value}><span class="xml-attr-value-text">${value.slice(0, LONG_EMBEDDED_URI_PREVIEW_LENGTH)}</span><button type="button" class="xml-attr-value-chip" data-collapsed-label=${sizeLabel} aria-expanded="false" aria-label="Show full value (${sizeLabel})"><span class="xml-attr-value-chip-label">${sizeLabel}</span></button></span>`;
+  }
+
+  private _toggleTruncatableMarkupAttrValue(toggle: Element): void {
+    const wrapper = toggle.closest('.xml-attr-value-truncatable') as HTMLElement | null;
+    if (!wrapper) return;
+
+    const markupLine = wrapper.closest('.markup-line') as HTMLElement | null;
+    const fullValue =
+      (wrapper as HTMLElement & { dataset: DOMStringMap }).dataset.fullValue ?? '';
+    const label = toggle.querySelector('.xml-attr-value-chip-label');
+    const collapsedLabel =
+      (toggle as HTMLElement & { dataset: DOMStringMap }).dataset.collapsedLabel ??
+      label?.textContent ??
+      '';
+    const expanded = toggle.getAttribute('aria-expanded') === 'true';
+
+    if (expanded) {
+      toggle.setAttribute('aria-expanded', 'false');
+      toggle.setAttribute('aria-label', `Show full value (${collapsedLabel})`);
+      if (label) label.textContent = collapsedLabel;
+      if (
+        markupLine?.nextElementSibling?.classList.contains('markup-embedded-uri-panel')
+      ) {
+        markupLine.nextElementSibling.remove();
+      }
+      return;
+    }
+
+    toggle.setAttribute('aria-expanded', 'true');
+    toggle.setAttribute('aria-label', 'Hide full value');
+    if (label) label.textContent = 'hide';
+    if (
+      !markupLine ||
+      markupLine.nextElementSibling?.classList.contains('markup-embedded-uri-panel')
+    ) {
+      return;
+    }
+    const depth = Number(markupLine.style.getPropertyValue('--markup-depth') || 0);
+    markupLine.insertAdjacentElement(
+      'afterend',
+      this._createEmbeddedUriContinuationPanel(fullValue, depth)
+    );
+  }
+
+  /* prettier-ignore */
+  private _renderXmlSpan(className: string, text: string, { ghost = false } = {}): TemplateResult {
+    return ghost
+      ? html`<span class="${className} markup-ghost-tag-part" title=${VIRTUAL_TEXT_TAG_HINT}>${text}</span>`
+      : html`<span class=${className}>${text}</span>`;
+  }
+
+  /* prettier-ignore */
+  private _renderMarkupLineRow(
+    depth: number,
+    content: unknown,
+    { foldToggle = false } = {}
+  ): TemplateResult {
+    return html`<div class="markup-line" style="--markup-depth: ${depth}"><span class="markup-line-content"><span class="markup-gutter" aria-hidden="true">${foldToggle ? html`<span class="markup-fold-toggle"></span>` : nothing}</span><span class="markup-line-body">${content}</span></span></div>`;
+  }
+
+  private _renderMarkupAttrValue(value: string): TemplateResult {
+    if (isTruncatableEmbeddedImageUri(value)) {
+      return this._renderTruncatableMarkupAttrValue(value);
+    }
+    return this._renderXmlSpan('xml-attr-value', value);
+  }
+
+  /* prettier-ignore */
+  private _renderMarkupAttributes(
+    attributes: { name: string; value: string }[]
+  ): TemplateResult[] {
+    return attributes.map(
+      ({ name, value }) => html` ${this._renderXmlSpan('xml-attr-name', name)}${this._renderXmlSpan('xml-bracket', '="')}${this._renderMarkupAttrValue(value)}${this._renderXmlSpan('xml-bracket', '"')}`
+    );
+  }
+
+  /* prettier-ignore */
+  private _renderMarkupTextContent(text: string): TemplateResult {
+    const cdataMatch = /^<!\[CDATA\[([\s\S]*)\]\]>$/.exec(text);
+    if (cdataMatch) {
+      return html`${this._renderXmlSpan('xml-cdata-delimiter', '<![CDATA[')}${this._renderXmlSpan('xml-cdata', cdataMatch[1] ?? '')}${this._renderXmlSpan('xml-cdata-delimiter', ']]>')}`;
+    }
+    return this._renderXmlSpan('xml-text', text);
+  }
+
+  /* prettier-ignore */
+  private _renderOpenTagContent(
+    tag: string,
+    attributes: { name: string; value: string }[],
+    ghost = false
+  ): TemplateResult {
+    return html`${this._renderXmlSpan('xml-bracket', '<', { ghost })}${this._renderXmlSpan('xml-tag', tag, { ghost })}${this._renderMarkupAttributes(attributes)}${this._renderXmlSpan('xml-bracket', '>', { ghost })}`;
+  }
+
+  /* prettier-ignore */
+  private _renderMarkupFoldableOpen(
+    depth: number,
+    tag: string,
+    attributes: { name: string; value: string }[],
+    tagHint?: string
+  ): TemplateResult {
+    const ghost = Boolean(tagHint);
+    const content = html`${this._renderOpenTagContent(tag, attributes, ghost)}<span class="markup-fold-suffix">${this._renderXmlSpan('xml-bracket', '...', { ghost })}${this._renderXmlSpan('xml-bracket', '</', { ghost })}${this._renderXmlSpan('xml-tag', tag, { ghost })}${this._renderXmlSpan('xml-bracket', '>', { ghost })}</span>`;
+    return html`<summary class="markup-line markup-line-open" style="--markup-depth: ${depth}" @click=${this._onSummaryClick}><span class="markup-line-content"><span class="markup-gutter" aria-hidden="true"><span class="markup-fold-toggle"></span></span><span class="markup-line-body">${content}</span></span></summary>`;
+  }
+
+  /* prettier-ignore */
+  private _renderMarkupCloseTag(
+    depth: number,
+    tag: string,
+    tagHint?: string
+  ): TemplateResult {
+    const ghost = Boolean(tagHint);
+    const content = html`${this._renderXmlSpan('xml-bracket', '</', { ghost })}${this._renderXmlSpan('xml-tag', tag, { ghost })}${this._renderXmlSpan('xml-bracket', '>', { ghost })}`;
+    return this._renderMarkupLineRow(depth, content);
+  }
+
+  /* prettier-ignore */
+  private _renderMarkupSelfClosingTag(
+    depth: number,
+    tag: string,
+    attributes: { name: string; value: string }[]
+  ): TemplateResult {
+    const content = html`${this._renderXmlSpan('xml-bracket', '<')}${this._renderXmlSpan('xml-tag', tag)}${this._renderMarkupAttributes(attributes)}${this._renderXmlSpan('xml-bracket', '/>')}`;
+    return this._renderMarkupLineRow(depth, content);
+  }
+
+  /* prettier-ignore */
+  private _renderMarkupInlineElement(
+    depth: number,
+    tag: string,
+    attributes: { name: string; value: string }[],
+    text: string
+  ): TemplateResult {
+    const content = html`${this._renderOpenTagContent(tag, attributes)}${this._renderMarkupTextContent(text)}${this._renderXmlSpan('xml-bracket', '</')}${this._renderXmlSpan('xml-tag', tag)}${this._renderXmlSpan('xml-bracket', '>')}`;
+    return this._renderMarkupLineRow(depth, content);
+  }
+
+  private _renderMarkupTextLine(depth: number, text: string): TemplateResult {
+    return this._renderMarkupLineRow(depth, this._renderMarkupTextContent(text));
+  }
+
+  private _renderMarkupNodesFromSlice(
+    depth: number,
+    nodes: ArrayLike<ChildNode>,
+    elementIds: Map<Element, string>
+  ): TemplateResult[] {
+    const templates: TemplateResult[] = [];
+    for (let i = 0; i < nodes.length; i += 1) {
+      const child = nodes[i];
+      if (!child) continue;
+      if (isTextLikeNode(child)) {
+        const text = formatMarkupTextNode(child);
+        if (text) {
+          templates.push(this._renderMarkupTextLine(depth, text));
+        }
+      } else if (child.nodeType === Node.ELEMENT_NODE) {
+        templates.push(this._renderMarkupElement(child as Element, depth, elementIds));
+      }
+    }
+    return templates;
+  }
+
+  /* prettier-ignore */
+  private _renderMarkupVirtualText(
+    depth: number,
+    hostEl: Element,
+    contentNodes: ChildNode[],
+    elementIds: Map<Element, string>
+  ): TemplateResult | TemplateResult[] | unknown {
+    if (!shouldWrapVirtualText(contentNodes)) {
+      return this._renderMarkupNodesFromSlice(depth, contentNodes, elementIds);
+    }
+
+    const elementId = elementIds.get(hostEl);
+
+    return html`<details class="markup-el markup-el-foldable markup-el-virtual-text" ?open=${true} data-element-id=${elementId ?? nothing}>${this._renderMarkupFoldableOpen(depth, 'text', [], VIRTUAL_TEXT_TAG_HINT)}<div class="markup-fold-body"><div class="markup-children">${this._renderMarkupNodesFromSlice(depth + 1, contentNodes, elementIds)}</div>${this._renderMarkupCloseTag(depth, 'text', VIRTUAL_TEXT_TAG_HINT)}</div></details>`;
+  }
+
+  /* prettier-ignore */
+  private _renderMarkupFoldableElement(
+    el: Element,
+    depth: number,
+    elementIds: Map<Element, string>,
+    renderBody: (childDepth: number) => TemplateResult | TemplateResult[] | unknown
+  ): TemplateResult {
+    const tag = localName(el);
+    const elementId = elementIds.get(el);
+
+    return html`<details class="markup-el markup-el-foldable" ?open=${true} data-element-id=${elementId ?? nothing}>${this._renderMarkupFoldableOpen(depth, tag, markupAttributes(el))}<div class="markup-fold-body"><div class="markup-children">${renderBody(depth + 1)}</div>${this._renderMarkupCloseTag(depth, tag)}</div></details>`;
+  }
+
+  private _renderMarkupList(
+    el: Element,
+    depth: number,
+    elementIds: Map<Element, string>
+  ): TemplateResult {
+    return this._renderMarkupFoldableElement(el, depth, elementIds, childDepth => {
+      const templates: unknown[] = [];
+      const nodes = [...el.childNodes];
+      let i = 0;
+      while (i < nodes.length) {
+        const node = nodes[i];
+        if (!node) {
+          i += 1;
+          continue;
+        }
+        if (
+          node.nodeType === Node.ELEMENT_NODE &&
+          localName(node as Element) === 'ldiv'
+        )
+          break;
+        if (isTextLikeNode(node) && isWhitespaceOnlyText(node)) {
+          i += 1;
+          continue;
+        }
+        if (isTextLikeNode(node)) break;
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          const tag = localName(node as Element);
+          if (HEAD_TAGS.has(tag) || tag === 'location') {
+            templates.push(
+              this._renderMarkupElement(node as Element, childDepth, elementIds)
+            );
+            i += 1;
+            continue;
+          }
+        }
+        break;
+      }
+      while (i < nodes.length) {
+        const node = nodes[i];
+        if (!node) {
+          i += 1;
+          continue;
+        }
+        if (
+          node.nodeType !== Node.ELEMENT_NODE ||
+          localName(node as Element) !== 'ldiv'
+        ) {
+          templates.push(
+            ...this._renderMarkupNodesFromSlice(childDepth, [node], elementIds)
+          );
+          i += 1;
+          continue;
+        }
+        const ldiv = node as Element;
+        templates.push(this._renderMarkupElement(ldiv, childDepth, elementIds));
+        i += 1;
+        const end = skipUntilListItemBoundary(nodes, i);
+        templates.push(
+          this._renderMarkupVirtualText(
+            childDepth,
+            ldiv,
+            nodes.slice(i, end),
+            elementIds
+          )
+        );
+        i = end;
+      }
+      return templates;
+    });
+  }
+
+  private _renderMarkupOtslContainer(
+    el: Element,
+    depth: number,
+    elementIds: Map<Element, string>
+  ): TemplateResult {
+    return this._renderMarkupFoldableElement(el, depth, elementIds, childDepth => {
+      const templates: unknown[] = [];
+      const nodes = [...el.childNodes];
+      let i = 0;
+      while (i < nodes.length) {
+        const node = nodes[i];
+        if (!node) {
+          i += 1;
+          continue;
+        }
+        if (
+          node.nodeType === Node.ELEMENT_NODE &&
+          isCellToken(localName(node as Element))
+        )
+          break;
+        if (isTextLikeNode(node) && isWhitespaceOnlyText(node)) {
+          i += 1;
+          continue;
+        }
+        if (isTextLikeNode(node)) break;
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          const tag = localName(node as Element);
+          if (HEAD_TAGS.has(tag) || tag === 'location' || tag === 'h_thread') {
+            templates.push(
+              this._renderMarkupElement(node as Element, childDepth, elementIds)
+            );
+            i += 1;
+            continue;
+          }
+        }
+        break;
+      }
+      while (i < nodes.length) {
+        const node = nodes[i];
+        if (!node) {
+          i += 1;
+          continue;
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE) {
+          templates.push(
+            ...this._renderMarkupNodesFromSlice(childDepth, [node], elementIds)
+          );
+          i += 1;
+          continue;
+        }
+        const tag = localName(node as Element);
+        if (tag === 'nl') {
+          templates.push(this._renderMarkupSelfClosingTag(childDepth, 'nl', []));
+          i += 1;
+          continue;
+        }
+        if (!isCellToken(tag)) {
+          templates.push(
+            ...this._renderMarkupNodesFromSlice(childDepth, [node], elementIds)
+          );
+          i += 1;
+          continue;
+        }
+        const cell = node as Element;
+        templates.push(this._renderMarkupElement(cell, childDepth, elementIds));
+        i += 1;
+        if (CELL_SPAN_TAGS.has(tag)) continue;
+        const end = skipUntilCellBoundary(nodes, i);
+        templates.push(
+          this._renderMarkupVirtualText(
+            childDepth,
+            cell,
+            nodes.slice(i, end),
+            elementIds
+          )
+        );
+        i = end;
+      }
+      return templates;
+    });
+  }
+
+  /* prettier-ignore */
+  private _renderMarkupElement(
+    el: Element,
+    depth: number,
+    elementIds: Map<Element, string>
+  ): TemplateResult {
+    const tag = localName(el);
+    if (tag === 'list') return this._renderMarkupList(el, depth, elementIds);
+    if (OTSL_CONTAINER_TAGS.has(tag))
+      return this._renderMarkupOtslContainer(el, depth, elementIds);
+
+    const elementId = elementIds.get(el);
+    const attributes = markupAttributes(el);
+
+    if (!el.childNodes.length) {
+      return html`<div class="markup-el" data-element-id=${elementId ?? nothing}>${this._renderMarkupSelfClosingTag(depth, tag, attributes)}</div>`;
+    }
+
+    const meaningfulText = [...el.childNodes].filter(
+      n => isTextLikeNode(n) && !isWhitespaceOnlyText(n)
+    );
+    const textOnly =
+      meaningfulText.length > 0 &&
+      meaningfulText.every(isTextLikeNode) &&
+      !childElements(el).length;
+    if (textOnly) {
+      const text = serializeMarkupTextNodes(el.childNodes);
+      if (text) {
+        return html`<div class="markup-el" data-element-id=${elementId ?? nothing}>${this._renderMarkupInlineElement(depth, tag, attributes, text)}</div>`;
+      }
+    }
+
+    return html`<details class="markup-el markup-el-foldable" ?open=${true} data-element-id=${elementId ?? nothing}>${this._renderMarkupFoldableOpen(depth, tag, attributes)}<div class="markup-fold-body"><div class="markup-children">${[...el.childNodes].map(child => {
+      if (isTextLikeNode(child)) {
+        const text = formatMarkupTextNode(child);
+        return text ? this._renderMarkupTextLine(depth + 1, text) : nothing;
+      } else if (child.nodeType === Node.ELEMENT_NODE) {
+        return this._renderMarkupElement(child as Element, depth + 1, elementIds);
+      }
+      return nothing;
+    })}</div>${this._renderMarkupCloseTag(depth, tag)}</div></details>`;
+  }
+}
diff --git a/core/src/components/page-img-pane/overlay.ts b/core/src/components/page-img-pane/overlay.ts
new file mode 100644
index 0000000..e03f035
--- /dev/null
+++ b/core/src/components/page-img-pane/overlay.ts
@@ -0,0 +1,776 @@
+import { svg, render } from 'lit';
+import type { TemplateResult } from 'lit';
+import { layerClassForValue } from '../../doclang/dom';
+import type {
+  BoundingBox,
+  CaptionLink,
+  XrefLink,
+  FragmentLink,
+  FragmentNavItem,
+} from '../../doclang/types';
+
+export interface PixelRect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  area: number;
+}
+
+export type ArrowLayerKey = 'readingOrder' | 'fragment' | 'xref' | 'caption';
+
+export interface ArrowLayerMeta {
+  cssKey: string;
+  colorVar: string;
+  markerId: string;
+  defaultStyle: 'solid' | 'dashed' | 'dotted';
+}
+
+export interface ArrowStyleConfig {
+  color?: string;
+  width?: number;
+  head?: number;
+  style?: 'solid' | 'dashed' | 'dotted';
+}
+
+export interface OverlayLinkOptions {
+  markerId: string;
+  markerLayer?: ArrowLayerKey;
+  linkClass: string;
+  fromIdAttr: string;
+  toIdAttr: string;
+}
+
+export interface PageLayoutCache {
+  paneW: number;
+  paneH: number;
+  imgW: number;
+  imgH: number;
+  fitScale: number;
+}
+
+const OVERLAY_BADGE_FONT_SIZE = 11 * 1.5 * 0.8;
+const OVERLAY_BADGE_PAD_X = 3;
+const OVERLAY_BADGE_PAD_Y = 2;
+const OVERLAY_BADGE_RADIUS_SCREEN_PX = 3;
+/** Demo page size; overlay lengths are calibrated to match pre-fix sizing on these images. */
+const OVERLAY_REF_IMAGE_WIDTH = 1224;
+const OVERLAY_REF_IMAGE_HEIGHT = 1584;
+export const PAGE_VIEW_BORDER_PX = 2;
+export const PAGE_ZOOM_DEFAULT = 100;
+export const FRAGMENT_NAV_HINT_PREV = 'Previous fragment';
+export const FRAGMENT_NAV_HINT_NEXT = 'Next fragment';
+const FRAGMENT_LINK_LABEL_CROSS_PAGE = 'cross-page content';
+const FRAGMENT_LINK_LABEL_SAME_PAGE = 'fragmented content';
+
+export const ARROW_LAYERS: Record<ArrowLayerKey, ArrowLayerMeta> = {
+  readingOrder: {
+    cssKey: 'reading-order',
+    colorVar: '--overlay-reading-order',
+    markerId: 'reading-order-arrowhead',
+    defaultStyle: 'dashed',
+  },
+  fragment: {
+    cssKey: 'fragment',
+    colorVar: '--overlay-fragment',
+    markerId: 'fragment-arrowhead',
+    defaultStyle: 'dashed',
+  },
+  xref: {
+    cssKey: 'xref',
+    colorVar: '--kind-footnote',
+    markerId: 'xref-arrowhead',
+    defaultStyle: 'solid',
+  },
+  caption: {
+    cssKey: 'caption',
+    colorVar: '--kind-caption',
+    markerId: 'caption-arrowhead',
+    defaultStyle: 'solid',
+  },
+};
+
+export const ARROW_STYLE_FIELD_DEFAULTS = { width: 1.5, head: 5 };
+export const ARROW_DASH_VALUES: Record<string, string> = {
+  solid: 'none',
+  dashed: '6 4',
+  dotted: '1.5 3.5',
+};
+
+// ---------------------------------------------------------------------------
+// Overlay box CSS class helpers
+// ---------------------------------------------------------------------------
+
+export function elementKindKey(kind: string): string {
+  if (
+    kind.startsWith('field_') ||
+    kind === 'key' ||
+    kind === 'value' ||
+    kind === 'hint'
+  )
+    return 'field';
+  if (kind === 'tabular') return 'table';
+  const known = new Set([
+    'text',
+    'heading',
+    'list',
+    'ldiv',
+    'table',
+    'index',
+    'formula',
+    'code',
+    'picture',
+    'group',
+    'footnote',
+    'page_header',
+    'page_footer',
+    'caption',
+  ]);
+  return known.has(kind) ? kind : 'default';
+}
+
+export function kindClassForTag(tag: string): string {
+  return `kind-${elementKindKey(tag)}`;
+}
+
+export function bboxClassForKind(kind: string): string {
+  return elementKindKey(kind);
+}
+
+// ---------------------------------------------------------------------------
+// Overlay context — passed explicitly by page-img-pane instead of globals
+// ---------------------------------------------------------------------------
+export interface OverlayCtx {
+  zoomPct: number;
+  pane: HTMLElement;
+  layoutCache: PageLayoutCache | null;
+  setLayoutCache: (c: PageLayoutCache) => void;
+  selectedId: string | null;
+  arrowMarkerOptions?: (layerKey: ArrowLayerKey) => { size: number; color: string };
+}
+
+// ---------------------------------------------------------------------------
+// Page layout helpers
+// ---------------------------------------------------------------------------
+
+function paneContentSize(pane: HTMLElement): { w: number; h: number } {
+  const style = getComputedStyle(pane);
+  const padX = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+  const padY = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+  return { w: pane.clientWidth - padX, h: pane.clientHeight - padY };
+}
+
+export function getCachedFitScale(
+  img: HTMLImageElement,
+  pane: HTMLElement,
+  ctx: OverlayCtx
+): number {
+  const { w: paneW, h: paneH } = paneContentSize(pane);
+  const imgW = img.naturalWidth;
+  const imgH = img.naturalHeight;
+  const cache = ctx.layoutCache;
+  if (
+    cache &&
+    cache.paneW === paneW &&
+    cache.paneH === paneH &&
+    cache.imgW === imgW &&
+    cache.imgH === imgH
+  ) {
+    return cache.fitScale;
+  }
+  const fitScale =
+    paneW > 0 && paneH > 0 && imgW > 0 && imgH > 0
+      ? Math.min(
+          (paneW - PAGE_VIEW_BORDER_PX) / imgW,
+          (paneH - PAGE_VIEW_BORDER_PX) / imgH
+        )
+      : 1;
+  ctx.setLayoutCache({ paneW, paneH, imgW, imgH, fitScale });
+  return fitScale;
+}
+
+export function overlayUserLength(
+  baseUserPx: number,
+  ctx: OverlayCtx,
+  img?: HTMLImageElement | null
+): number {
+  const resolvedImg =
+    img ?? (ctx.pane.querySelector('.page-view img') as HTMLImageElement | null);
+  const zoom = ctx.zoomPct / PAGE_ZOOM_DEFAULT;
+  if (!(zoom > 0)) return baseUserPx;
+  const { pane } = ctx;
+  if (!resolvedImg?.naturalWidth || !resolvedImg.naturalHeight) {
+    return baseUserPx / zoom;
+  }
+
+  const { w: paneW, h: paneH } = paneContentSize(pane);
+  if (!(paneW > 0 && paneH > 0)) return baseUserPx / zoom;
+
+  const refFit = Math.min(
+    (paneW - PAGE_VIEW_BORDER_PX) / OVERLAY_REF_IMAGE_WIDTH,
+    (paneH - PAGE_VIEW_BORDER_PX) / OVERLAY_REF_IMAGE_HEIGHT
+  );
+  const fitScale = getCachedFitScale(resolvedImg, pane, ctx);
+  if (!(refFit > 0) || !(fitScale > 0)) return baseUserPx / zoom;
+
+  return (baseUserPx * refFit) / (fitScale * zoom);
+}
+
+export function applyPageImageSize(
+  img: HTMLImageElement,
+  pane: HTMLElement,
+  ctx: OverlayCtx
+): boolean {
+  if (!img?.naturalWidth || !img.naturalHeight) return false;
+  const zoomPct = Math.max(PAGE_ZOOM_DEFAULT, ctx.zoomPct);
+  const fitScale = getCachedFitScale(img, pane, ctx);
+  const scale = fitScale * (zoomPct / PAGE_ZOOM_DEFAULT);
+  const w = Math.floor(img.naturalWidth * scale);
+  const h = Math.floor(img.naturalHeight * scale);
+  const nextW = `${w}px`;
+  const nextH = `${h}px`;
+  const unchanged = img.style.width === nextW && img.style.height === nextH;
+  if (!unchanged) {
+    img.style.width = nextW;
+    img.style.height = nextH;
+    img.style.maxWidth = 'none';
+    img.style.maxHeight = 'none';
+  }
+  img.dataset.layoutReady = '1';
+  return !unchanged;
+}
+
+// ---------------------------------------------------------------------------
+// Bounding box pixel rect
+// ---------------------------------------------------------------------------
+
+export function boxPixelRect(b: BoundingBox, img: HTMLImageElement): PixelRect {
+  const x = (b.x0 / b.resW) * img.naturalWidth;
+  const y = (b.y0 / b.resH) * img.naturalHeight;
+  const w = ((b.x1 - b.x0) / b.resW) * img.naturalWidth;
+  const h = ((b.y1 - b.y0) / b.resH) * img.naturalHeight;
+  return { x, y, w, h, area: w * h };
+}
+
+function boxCenter(rect: PixelRect): { x: number; y: number } {
+  return { x: rect.x + rect.w / 2, y: rect.y + rect.h / 2 };
+}
+
+// ---------------------------------------------------------------------------
+// Overlay sort helpers
+// ---------------------------------------------------------------------------
+
+export function sortedOverlayBoxes(
+  boxes: BoundingBox[],
+  selectedId: string | null
+): BoundingBox[] {
+  const layerPriority = (layer: string) =>
+    layer === 'background' ? 0 : layer === 'furniture' ? 1 : 2;
+  const kindPriority = (box: BoundingBox) => {
+    if (box.kind === 'text') return 0;
+    if (box.kind === 'list' || box.kind === 'table' || box.kind === 'index' || box.kind === 'tabular') return 2;
+    return 1;
+  };
+  return [...boxes].sort((a, b) => {
+    const byLayer = layerPriority(a.layer ?? 'body') - layerPriority(b.layer ?? 'body');
+    if (byLayer !== 0) return byLayer;
+    const byKind = kindPriority(a) - kindPriority(b);
+    if (byKind !== 0) return byKind;
+    if (selectedId) {
+      const aSelected = a.elementId === selectedId;
+      const bSelected = b.elementId === selectedId;
+      if (aSelected !== bSelected) return aSelected ? 1 : -1;
+    }
+    return 0;
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Arrow marker template
+// ---------------------------------------------------------------------------
+
+export function ensureArrowMarker(
+  defs: SVGDefsElement,
+  markerId: string,
+  opts: { size?: number; color?: string } = {}
+): void {
+  const size = opts.size ?? ARROW_STYLE_FIELD_DEFAULTS.head;
+  const color = opts.color || 'currentColor';
+  defs.querySelector(`#${markerId}`)?.remove();
+  render(
+    svg`<marker
+      id=${markerId}
+      viewBox="0 0 6 6"
+      refX="6"
+      refY="3"
+      markerWidth=${size}
+      markerHeight=${size}
+      orient="auto"
+    ><path d="M0,0 L6,3 L0,6 Z" fill=${color}></path></marker>`,
+    defs
+  );
+}
+
+// ---------------------------------------------------------------------------
+// SVG template builders
+// ---------------------------------------------------------------------------
+
+function dashedLineAttrs(
+  start: { x: number; y: number },
+  end: { x: number; y: number }
+): { strokeDasharray: string; strokeDashoffset: string } {
+  const dash = 6;
+  const gap = 4;
+  const period = dash + gap;
+  const len = Math.hypot(end.x - start.x, end.y - start.y);
+  if (!len) return { strokeDasharray: '', strokeDashoffset: '' };
+  const offset = len % period;
+  return {
+    strokeDasharray: `${dash} ${gap}`,
+    strokeDashoffset: offset > 0.01 ? String(offset) : '',
+  };
+}
+
+function arrowMarkerTemplate(
+  markerId: string,
+  opts: { size?: number; color?: string } = {}
+): TemplateResult {
+  const size = opts.size ?? ARROW_STYLE_FIELD_DEFAULTS.head;
+  const color = opts.color || 'currentColor';
+  return svg`
+    <marker id=${markerId} viewBox="0 0 6 6"
+      refX="6" refY="3"
+      markerWidth=${size} markerHeight=${size}
+      orient="auto">
+      <path d="M0,0 L6,3 L0,6 Z" fill=${color}></path>
+    </marker>`;
+}
+
+// ---------------------------------------------------------------------------
+// Overlay badge rendering
+// ---------------------------------------------------------------------------
+
+function overlayBadgeLayout(
+  svg: SVGSVGElement,
+  text: string | number,
+  fontSizeUser: number,
+  ctx: OverlayCtx
+): { width: number; height: number } {
+  const padXUser = overlayUserLength(OVERLAY_BADGE_PAD_X, ctx);
+  const padYUser = overlayUserLength(OVERLAY_BADGE_PAD_Y, ctx);
+  const probe = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+  probe.setAttribute('class', 'overlay-badge-label');
+  probe.setAttribute('font-size', String(fontSizeUser));
+  probe.setAttribute('font-weight', '700');
+  probe.setAttribute('text-anchor', 'start');
+  probe.setAttribute('dominant-baseline', 'text-before-edge');
+  probe.setAttribute('visibility', 'hidden');
+  probe.textContent = String(text);
+  svg.appendChild(probe);
+
+  let width: number;
+  let height: number;
+  try {
+    const bbox = probe.getBBox();
+    width = bbox.width + padXUser * 2;
+    height = bbox.height + padYUser * 2;
+  } catch {
+    const label = String(text);
+    width = overlayUserLength(
+      label.length * OVERLAY_BADGE_FONT_SIZE * 0.55 + OVERLAY_BADGE_PAD_X * 2,
+      ctx
+    );
+    height = overlayUserLength(
+      OVERLAY_BADGE_FONT_SIZE * 1.1 + OVERLAY_BADGE_PAD_Y * 2,
+      ctx
+    );
+  }
+  probe.remove();
+  return { width, height };
+}
+
+function overlayBadgeTemplate(
+  svgEl: SVGSVGElement,
+  anchorX: number,
+  anchorY: number,
+  text: string | number,
+  extraClass: string,
+  elementId: string,
+  ctx: OverlayCtx
+): TemplateResult {
+  const fontSize = overlayUserLength(OVERLAY_BADGE_FONT_SIZE, ctx);
+  const { width, height } = overlayBadgeLayout(svgEl, text, fontSize, ctx);
+  const radius = overlayUserLength(OVERLAY_BADGE_RADIUS_SCREEN_PX, ctx);
+  return svg`
+    <g class=${`overlay-badge ${extraClass}`} data-element-id=${elementId}>
+      <rect class="overlay-badge-bg"
+        x=${anchorX - width / 2} y=${anchorY - height / 2}
+        width=${width} height=${height}
+        rx=${radius} ry=${radius}></rect>
+      <text class="overlay-badge-label"
+        x=${anchorX} y=${anchorY}
+        font-size=${fontSize}>${text}</text>
+    </g>`;
+}
+
+// ---------------------------------------------------------------------------
+// Link overlay templates
+// ---------------------------------------------------------------------------
+
+function overlayLinkTemplate(
+  img: HTMLImageElement,
+  link: CaptionLink | XrefLink,
+  opts: OverlayLinkOptions
+): TemplateResult {
+  const fromBox = (link as CaptionLink).captionBox ?? (link as XrefLink).fromBox;
+  const toBox = (link as CaptionLink).hostBox ?? (link as XrefLink).toBox;
+  const start = boxCenter(boxPixelRect(fromBox, img));
+  const end = boxCenter(boxPixelRect(toBox, img));
+  const fromId =
+    (link as CaptionLink).captionElementId ?? (link as XrefLink).fromElementId;
+  const toId = (link as CaptionLink).hostElementId ?? (link as XrefLink).toElementId;
+  return svg`
+    <line
+      class=${opts.linkClass}
+      x1=${start.x} y1=${start.y}
+      x2=${end.x} y2=${end.y}
+      marker-end=${`url(#${opts.markerId})`}
+      ${opts.fromIdAttr}=${fromId}
+      ${opts.toIdAttr}=${toId}
+    ></line>`;
+}
+
+function fragmentNavButtonTemplate(
+  x: number,
+  y: number,
+  size: number,
+  radius: number,
+  fontSize: number,
+  direction: string,
+  label: string,
+  enabled: boolean
+): TemplateResult {
+  const hintText = direction === 'prev' ? FRAGMENT_NAV_HINT_PREV : FRAGMENT_NAV_HINT_NEXT;
+  const cls = `fragment-nav-btn fragment-nav-btn-${direction}${enabled ? '' : ' fragment-nav-btn-disabled'}`;
+  return svg`
+    <g class=${cls} data-nav=${direction}
+      role=${enabled ? 'button' : ''}
+      aria-label=${enabled ? hintText : ''}
+    >
+      ${enabled ? svg`<title>${hintText}</title>` : ''}
+      <rect class="fragment-nav-btn-bg"
+        x=${x} y=${y} width=${size} height=${size}
+        rx=${radius} ry=${radius}></rect>
+      <text class="fragment-nav-btn-label"
+        x=${x + size / 2} y=${y + size / 2}
+        font-size=${fontSize}>${label}</text>
+    </g>`;
+}
+
+// ---------------------------------------------------------------------------
+// Full overlay render — called by both buildOverlay and syncOverlayBadges
+// ---------------------------------------------------------------------------
+
+interface OverlayRenderParams {
+  img: HTMLImageElement;
+  boxes: BoundingBox[];
+  captionLinks?: CaptionLink[];
+  xrefLinks?: XrefLink[];
+  readingOrderSteps?: { order: number; box: BoundingBox; elementId: string }[];
+  fragmentLinks?: FragmentLink[];
+  fragmentNavItems?: FragmentNavItem[];
+  showAllBboxes: boolean;
+  showLayoutBadges: boolean;
+  showReadingOrder: boolean;
+  ctx: OverlayCtx;
+}
+
+function renderOverlaySvgContent(svgEl: SVGSVGElement, p: OverlayRenderParams): void {
+  const {
+    img,
+    boxes,
+    captionLinks = [],
+    xrefLinks = [],
+    readingOrderSteps = [],
+    fragmentLinks = [],
+    fragmentNavItems = [],
+    showAllBboxes,
+    showLayoutBadges,
+    showReadingOrder,
+    ctx,
+  } = p;
+
+  const markerOpts = (key: ArrowLayerKey) =>
+    ctx.arrowMarkerOptions ? ctx.arrowMarkerOptions(key) : {};
+
+  // --- Badges: computed after layout, requires getBBox probe on svgEl ---
+  const badges: TemplateResult[] = [];
+  if (img.naturalWidth) {
+    const fontSize = overlayUserLength(OVERLAY_BADGE_FONT_SIZE, ctx);
+    const badgeGap = overlayUserLength(2, ctx);
+    const readingOrderByElementId = new Map(
+      showAllBboxes && showReadingOrder
+        ? readingOrderSteps.map(s => [s.elementId, s])
+        : []
+    );
+    for (const b of sortedOverlayBoxes(boxes, ctx.selectedId)) {
+      const { x, y } = boxPixelRect(b, img);
+      let tagLayout = { width: 0 };
+      if (showAllBboxes && showLayoutBadges) {
+        tagLayout = overlayBadgeLayout(svgEl, b.tag, fontSize, ctx);
+        badges.push(overlayBadgeTemplate(svgEl, x, y, b.tag, `element-badge ${kindClassForTag(b.kind)}`, b.elementId, ctx));
+      }
+      const step = readingOrderByElementId.get(b.elementId);
+      if (step) {
+        const orderText = String(step.order);
+        const orderLayout = overlayBadgeLayout(svgEl, orderText, fontSize, ctx);
+        const orderAnchorX =
+          showAllBboxes && showLayoutBadges
+            ? x + tagLayout.width / 2 + badgeGap + orderLayout.width / 2
+            : x;
+        badges.push(overlayBadgeTemplate(svgEl, orderAnchorX, y, orderText, 'reading-order-badge', b.elementId, ctx));
+      }
+    }
+  }
+
+  // --- Fragment links ---
+  const fragmentLinkTemplates = fragmentLinks.map(link => {
+    const fromRect = boxPixelRect(link.fromBox, img);
+    let lineTmpl: TemplateResult;
+    let labelAt: { x: number; y: number };
+    if (link.toBox) {
+      const start = boxCenter(fromRect);
+      const end = boxCenter(boxPixelRect(link.toBox, img));
+      const { strokeDasharray, strokeDashoffset } = dashedLineAttrs(start, end);
+      lineTmpl = svg`<line class="fragment-link-path fragment-link-path-dashed"
+        x1=${start.x} y1=${start.y} x2=${end.x} y2=${end.y}
+        marker-end="url(#fragment-arrowhead)"
+        stroke-dasharray=${strokeDasharray}
+        stroke-dashoffset=${strokeDashoffset}></line>`;
+      labelAt = { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };
+    } else {
+      const inset = overlayUserLength(5, ctx);
+      const corner = link.targetCorner ?? 'br';
+      const imgW = img.naturalWidth;
+      const imgH = img.naturalHeight;
+      const cornerPoint =
+        corner === 'tl'
+          ? { x: Math.min(inset, imgW - inset), y: Math.min(inset, imgH - inset) }
+          : { x: Math.max(imgW - inset, inset), y: Math.max(imgH - inset, inset) };
+      const elementAnchor = boxCenter(fromRect);
+      const incoming = corner === 'tl';
+      const start = incoming ? cornerPoint : elementAnchor;
+      const end = incoming ? elementAnchor : cornerPoint;
+      const { strokeDasharray, strokeDashoffset } = dashedLineAttrs(start, end);
+      lineTmpl = svg`<line class="fragment-link-path fragment-link-path-dashed"
+        x1=${start.x} y1=${start.y} x2=${end.x} y2=${end.y}
+        marker-end="url(#fragment-arrowhead)"
+        stroke-dasharray=${strokeDasharray}
+        stroke-dashoffset=${strokeDashoffset}></line>`;
+      labelAt = { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };
+    }
+    return svg`
+      <g class="fragment-link"
+        data-thread-id=${link.threadId}
+        data-fragment-from-id=${link.fromElementId}
+        data-fragment-to-id=${link.toElementId ?? ''}
+      >
+        ${lineTmpl}
+        <text class="fragment-link-label"
+          x=${labelAt.x} y=${labelAt.y}
+          font-size=${overlayUserLength(OVERLAY_BADGE_FONT_SIZE, ctx)}
+        >${link.toBox ? FRAGMENT_LINK_LABEL_SAME_PAGE : FRAGMENT_LINK_LABEL_CROSS_PAGE}</text>
+      </g>`;
+  });
+
+  // --- Fragment nav buttons ---
+  const fragmentNavTemplates = fragmentNavItems.map(item => {
+    const btnSize = overlayUserLength(13 * 1.5, ctx);
+    const gap = overlayUserLength(2, ctx);
+    const inset = overlayUserLength(3, ctx);
+    const fontSize = overlayUserLength(10 * 1.5, ctx);
+    const radius = overlayUserLength(2 * 1.5, ctx);
+    const { x, y, w, h } = boxPixelRect(item.box, img);
+    const rowY = y + h - inset - btnSize;
+    const nextX = x + w - inset - btnSize;
+    const prevX = nextX - gap - btnSize;
+    return svg`
+      <g class="fragment-nav" data-element-id=${item.elementId}>
+        ${fragmentNavButtonTemplate(prevX, rowY, btnSize, radius, fontSize, 'prev', '‹', item.hasPrev)}
+        ${fragmentNavButtonTemplate(nextX, rowY, btnSize, radius, fontSize, 'next', '›', item.hasNext)}
+      </g>`;
+  });
+
+  // --- Reading order lines ---
+  const readingOrderLines: TemplateResult[] = [];
+  for (let i = 0; i < readingOrderSteps.length - 1; i += 1) {
+    const start = boxCenter(boxPixelRect(readingOrderSteps[i]!.box, img));
+    const end = boxCenter(boxPixelRect(readingOrderSteps[i + 1]!.box, img));
+    readingOrderLines.push(svg`
+      <line class="reading-order-step"
+        x1=${start.x} y1=${start.y} x2=${end.x} y2=${end.y}
+        marker-end="url(#reading-order-arrowhead)"
+      ></line>`);
+  }
+
+  render(
+    svg`
+      <defs>
+        <pattern id="layer-hatch" width="16" height="16"
+          patternUnits="userSpaceOnUse" patternTransform="rotate(45 8 8)">
+          <rect class="layer-hatch-stripe" x="10" y="-4" width="6" height="24"></rect>
+        </pattern>
+        ${readingOrderSteps.length >= 2 ? arrowMarkerTemplate('reading-order-arrowhead', markerOpts('readingOrder')) : ''}
+        ${fragmentLinks.length ? arrowMarkerTemplate('fragment-arrowhead', markerOpts('fragment')) : ''}
+        ${captionLinks.length ? arrowMarkerTemplate('caption-arrowhead', markerOpts('caption')) : ''}
+        ${xrefLinks.length ? arrowMarkerTemplate('xref-arrowhead', markerOpts('xref')) : ''}
+      </defs>
+      ${captionLinks.map(link => overlayLinkTemplate(img, link, { markerId: 'caption-arrowhead', markerLayer: 'caption', linkClass: 'caption-link', fromIdAttr: 'data-caption-id', toIdAttr: 'data-host-id' }))}
+      ${xrefLinks.map(link => overlayLinkTemplate(img, link, { markerId: 'xref-arrowhead', markerLayer: 'xref', linkClass: 'xref-link', fromIdAttr: 'data-xref-from-id', toIdAttr: 'data-xref-to-id' }))}
+      ${fragmentLinkTemplates}
+      ${readingOrderLines}
+      ${sortedOverlayBoxes(boxes, ctx.selectedId).map(b => {
+        const { x, y, w, h } = boxPixelRect(b, img);
+        const cls = bboxClassForKind(b.kind);
+        const kindClass = kindClassForTag(b.kind);
+        const layerClass = layerClassForValue(b.layer ?? 'body');
+        return svg`<rect
+          class=${`bbox bbox-${cls} ${kindClass}${layerClass ? ` ${layerClass}` : ''}`}
+          x=${x} y=${y}
+          width=${Math.max(w, 1)} height=${Math.max(h, 1)}
+          data-element-id=${b.elementId}
+        ></rect>`;
+      })}
+      ${fragmentNavTemplates}
+      ${badges}
+    `,
+    svgEl
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Public API — kept stable for page-img-pane callers
+// ---------------------------------------------------------------------------
+
+export function syncOverlayBadges(
+  img: HTMLImageElement,
+  svgEl: SVGSVGElement,
+  boxes: BoundingBox[],
+  readingOrderSteps: { order: number; box: BoundingBox; elementId: string }[],
+  showAllBboxes: boolean,
+  showLayoutBadges: boolean,
+  showReadingOrder: boolean,
+  ctx: OverlayCtx
+): void {
+  renderOverlaySvgContent(svgEl, {
+    img,
+    boxes,
+    readingOrderSteps,
+    showAllBboxes,
+    showLayoutBadges,
+    showReadingOrder,
+    ctx,
+  });
+}
+
+export function buildOverlay(
+  img: HTMLImageElement,
+  boxes: BoundingBox[],
+  captionLinks: CaptionLink[] = [],
+  xrefLinks: XrefLink[] = [],
+  readingOrderSteps: { order: number; box: BoundingBox; elementId: string }[] = [],
+  fragmentLinks: FragmentLink[] = [],
+  fragmentNavItems: FragmentNavItem[] = [],
+  onSelectElement: (id: string) => void,
+  onNavigateFragment: (elementId: string, direction: string) => void,
+  onClearSelection: () => void,
+  getPagPanSuppressClick: () => boolean,
+  setPagPanSuppressClick: (v: boolean) => void,
+  ctx: OverlayCtx
+): SVGSVGElement {
+  const svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svgEl.classList.add('overlay');
+  svgEl.setAttribute('viewBox', `0 0 ${img.naturalWidth} ${img.naturalHeight}`);
+  svgEl.setAttribute('overflow', 'hidden');
+
+  renderOverlaySvgContent(svgEl, {
+    img,
+    boxes,
+    captionLinks,
+    xrefLinks,
+    readingOrderSteps,
+    fragmentLinks,
+    fragmentNavItems,
+    showAllBboxes: false,
+    showLayoutBadges: false,
+    showReadingOrder: false,
+    ctx,
+  });
+
+  svgEl.addEventListener('click', e => {
+    if (getPagPanSuppressClick()) {
+      setPagPanSuppressClick(false);
+      return;
+    }
+    const target = e.target as Element;
+    const navBtn = target.closest('.fragment-nav-btn:not(.fragment-nav-btn-disabled)');
+    if (navBtn) {
+      e.stopPropagation();
+      const navGroup = navBtn.closest('.fragment-nav');
+      const elementId = navGroup?.getAttribute('data-element-id');
+      const direction = navBtn.getAttribute('data-nav');
+      if (elementId && direction) onNavigateFragment(elementId, direction);
+      return;
+    }
+    const badge = target.closest('.overlay-badge[data-element-id]');
+    if (badge) {
+      const id = badge.getAttribute('data-element-id');
+      if (id) onSelectElement(id);
+      return;
+    }
+    const ctm = svgEl.getScreenCTM()?.inverse();
+    if (ctm) {
+      const pt = svgEl.createSVGPoint();
+      pt.x = (e as MouseEvent).clientX;
+      pt.y = (e as MouseEvent).clientY;
+      const { x, y } = pt.matrixTransform(ctm);
+      const hit = hitTestBoxes(boxes, img, x, y);
+      if (hit) onSelectElement(hit.elementId);
+      else onClearSelection();
+    }
+  });
+
+  svgEl.addEventListener('mousemove', e => {
+    const ctm = svgEl.getScreenCTM()?.inverse();
+    if (ctm) {
+      const pt = svgEl.createSVGPoint();
+      pt.x = (e as MouseEvent).clientX;
+      pt.y = (e as MouseEvent).clientY;
+      const { x, y } = pt.matrixTransform(ctm);
+      svgEl.style.cursor = hitTestBoxes(boxes, img, x, y) ? 'pointer' : '';
+    }
+  });
+  svgEl.addEventListener('mouseleave', () => {
+    svgEl.style.cursor = '';
+  });
+
+  return svgEl;
+}
+
+export function hitTestBoxes(
+  boxes: BoundingBox[],
+  img: HTMLImageElement,
+  x: number,
+  y: number
+): BoundingBox | null {
+  let best: BoundingBox | null = null;
+  let bestArea = Infinity;
+  for (const b of boxes) {
+    const { x: bx, y: by, w, h, area } = boxPixelRect(b, img);
+    if (x >= bx && x <= bx + w && y >= by && y <= by + h && area < bestArea) {
+      best = b;
+      bestArea = area;
+    }
+  }
+  return best;
+}
diff --git a/core/src/components/page-img-pane/page-img-pane.css b/core/src/components/page-img-pane/page-img-pane.css
new file mode 100644
index 0000000..1bcb363
--- /dev/null
+++ b/core/src/components/page-img-pane/page-img-pane.css
@@ -0,0 +1,836 @@
+@import '../theme.css';
+
+:host {
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border);
+  min-height: 0;
+  min-width: 0;
+  background: var(--panel);
+
+  --overlay-reading-order: var(--doclang-overlay-reading-order, #71717a);
+  --overlay-fragment: var(--doclang-overlay-fragment, #9333ea);
+}
+:host([hidden]) {
+  display: none !important;
+}
+:host(.pane-layout-last) {
+  border-right: none;
+}
+.pane-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  box-sizing: border-box;
+  height: 2.125rem;
+  padding: 0 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted);
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+}
+.pane-header-title {
+  min-width: 0;
+}
+.pane-page-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+.page-zoom-control {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  user-select: none;
+}
+.page-zoom-control-label {
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted);
+  cursor: pointer;
+}
+.page-zoom-control input[type='range'] {
+  width: 5.5rem;
+  height: 1rem;
+  margin: 0;
+  cursor: pointer;
+}
+.page-zoom-reset {
+  appearance: none;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  color: var(--muted);
+  border-radius: 0.375rem;
+  padding: 0 0.45rem;
+  height: 1.25rem;
+  font: inherit;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  cursor: pointer;
+  min-width: 2.75rem;
+}
+.page-zoom-reset:not(:disabled):hover {
+  border-color: var(--accent);
+  color: var(--text);
+}
+.page-zoom-reset:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+.pane-settings-toggle {
+  appearance: none;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--muted);
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  transition:
+    color 0.12s ease,
+    background 0.12s ease,
+    border-color 0.12s ease;
+  border-radius: 0.25rem;
+  padding: 0 0.28rem 0 0.4rem;
+  height: 1.25rem;
+  font-size: 0.625rem;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  font: inherit;
+}
+.pane-settings-toggle::after {
+  content: '';
+  flex-shrink: 0;
+  width: 0.26rem;
+  height: 0.26rem;
+  margin-left: 0.22rem;
+  margin-top: -0.1em;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: rotate(45deg);
+  opacity: 0.65;
+}
+.pane-settings-toggle:hover {
+  color: var(--text);
+  background: color-mix(in srgb, var(--text) 5%, transparent);
+}
+.pane-settings-toggle[aria-expanded='true'] {
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
+  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
+}
+.pane-settings-toggle:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+.pane-page-layout {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.pane-body {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  padding: 0.75rem;
+}
+.settings-option {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+  user-select: none;
+}
+.settings-option-primary + .settings-subgroup {
+  margin-top: 0.65rem;
+}
+.settings-option-primary {
+  font-weight: 600;
+}
+.settings-subgroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-left: 0.85rem;
+}
+.settings-reading-order-group {
+  gap: 0.35rem;
+  padding-left: 1.6rem;
+}
+.settings-option-nested {
+  padding-left: 0;
+}
+.settings-option-sub {
+  font-size: 0.8125rem;
+  color: var(--muted);
+}
+.settings-option-disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.settings-option-disabled input {
+  cursor: not-allowed;
+}
+.settings-option input {
+  margin: 0.15rem 0 0;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.settings-divider {
+  height: 1px;
+  background: var(--border);
+  margin: 0.75rem 0;
+}
+
+/* Arrow layer row: visibility checkbox on the left, style-disclosure button on the right. */
+.arrow-layer-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.375rem;
+}
+.arrow-layer-row .settings-option {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.arrow-layer-row .settings-option span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.arrow-style-btn {
+  flex: none;
+  appearance: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 0.9rem;
+  margin: 0.1rem 0 0;
+  padding: 0;
+  border: none;
+  border-radius: 0.25rem;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+}
+.arrow-style-btn::before {
+  content: "";
+  width: 0;
+  height: 0;
+  border-left: 0.3rem solid currentColor;
+  border-top: 0.3rem solid transparent;
+  border-bottom: 0.3rem solid transparent;
+  transition: transform 0.12s ease;
+}
+.arrow-style-btn:hover {
+  background: var(--bg);
+  color: var(--text);
+}
+.arrow-style-btn[aria-expanded="true"] {
+  color: var(--text);
+}
+.arrow-style-btn[aria-expanded="true"]::before {
+  transform: rotate(90deg);
+}
+.arrow-layer-row.is-disabled .arrow-style-btn {
+  opacity: 0.45;
+  pointer-events: none;
+}
+.arrow-style-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  padding: 0.35rem 0 0.55rem 1.6rem;
+}
+.settings-reading-order-group .arrow-style-fields {
+  padding-left: 0.4rem;
+}
+.arrow-style-fields[hidden] {
+  display: none;
+}
+.arrow-style-fields label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--muted);
+  cursor: default;
+}
+.arrow-field-control {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  flex: 1 1 auto;
+  min-width: 0;
+  justify-content: flex-end;
+}
+.arrow-field-value {
+  flex: none;
+  min-width: 1.5rem;
+  text-align: right;
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+}
+.arrow-style-fields input[type="range"] {
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 3.5rem;
+  cursor: pointer;
+}
+.arrow-style-fields input[type="color"] {
+  width: 2.25rem;
+  height: 1.4rem;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 0.25rem;
+  background: none;
+  cursor: pointer;
+}
+.arrow-style-fields select {
+  font: inherit;
+  font-size: 0.75rem;
+  padding: 0.1rem 0.25rem;
+  color: var(--text);
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 0.25rem;
+  cursor: pointer;
+}
+.overlays-reset {
+  margin-top: 0.6rem;
+  font: inherit;
+  font-size: 0.75rem;
+  color: var(--text);
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 0.25rem;
+  padding: 0.3rem 0.55rem;
+  cursor: pointer;
+}
+.overlays-reset:hover {
+  background: var(--bg);
+}
+.page-view-port {
+  display: flex;
+  overflow: auto;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  scrollbar-gutter: stable;
+}
+.pane-body.can-pan {
+  cursor: grab;
+}
+.pane-body.is-panning {
+  cursor: grabbing;
+  user-select: none;
+}
+.pane-body:focus {
+  outline: none;
+}
+.pane-body:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+.placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 12rem;
+  color: var(--muted);
+  font-style: italic;
+  background: var(--placeholder-bg);
+  border: 1px dashed var(--border);
+  border-radius: 0.5rem;
+  padding: 2rem;
+  text-align: center;
+}
+.page-view {
+  position: relative;
+  display: block;
+  width: fit-content;
+  flex-shrink: 0;
+  margin: auto;
+  line-height: 0;
+  border: 1px solid var(--border);
+  border-radius: 0.25rem;
+  overflow: hidden;
+}
+.page-view img {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
+  border: none;
+  border-radius: 0;
+}
+.page-view img:not([data-layout-ready]) {
+  opacity: 0;
+}
+.page-view svg.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: auto;
+  overflow: hidden;
+}
+.overlay rect.bbox.bbox-hidden,
+.overlay .overlay-badge.bbox-hidden {
+  display: none;
+}
+.overlay rect.bbox {
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+  pointer-events: none;
+}
+/* Map element kind classes to --doclang-kind-stroke so bbox highlight rules
+   can reference it. These must live in the shadow DOM stylesheet to
+   take effect on elements inside this shadow root. */
+.kind-text {
+  --doclang-kind-stroke: var(--kind-text);
+}
+.kind-heading {
+  --doclang-kind-stroke: var(--kind-heading);
+}
+.kind-list {
+  --doclang-kind-stroke: var(--kind-list);
+}
+.kind-ldiv {
+  --doclang-kind-stroke: var(--kind-ldiv);
+}
+.kind-table {
+  --doclang-kind-stroke: var(--kind-table);
+}
+.kind-index {
+  --doclang-kind-stroke: var(--kind-index);
+}
+.kind-formula {
+  --doclang-kind-stroke: var(--kind-formula);
+}
+.kind-code {
+  --doclang-kind-stroke: var(--kind-code);
+}
+.kind-picture {
+  --doclang-kind-stroke: var(--kind-picture);
+}
+.kind-group {
+  --doclang-kind-stroke: var(--kind-group);
+}
+.kind-footnote {
+  --doclang-kind-stroke: var(--kind-footnote);
+}
+.kind-page_header {
+  --doclang-kind-stroke: var(--kind-page_header);
+}
+.kind-page_footer {
+  --doclang-kind-stroke: var(--kind-page_footer);
+}
+.kind-caption {
+  --doclang-kind-stroke: var(--kind-caption);
+}
+.kind-field {
+  --doclang-kind-stroke: var(--kind-field);
+}
+.kind-default {
+  --doclang-kind-stroke: var(--kind-default);
+}
+
+.overlay rect.bbox.selected {
+  fill: color-mix(
+    in srgb,
+    var(--kind-stroke, var(--accent)) 30%,
+    transparent
+  ) !important;
+  stroke-width: 3.5;
+  filter: drop-shadow(
+    0 0 3px color-mix(in srgb, var(--kind-stroke, var(--accent)) 60%, transparent)
+  );
+}
+.overlay rect.bbox.related:not(.selected) {
+  fill: color-mix(
+    in srgb,
+    var(--kind-stroke, var(--accent)) 30%,
+    transparent
+  ) !important;
+}
+.overlay rect.bbox.layer-furniture,
+.overlay rect.bbox.layer-background {
+  fill: url(#layer-hatch) !important;
+  stroke: color-mix(in srgb, var(--kind-stroke, var(--muted)) 50%, transparent);
+}
+.overlay .layer-hatch-stripe {
+  fill: var(--muted);
+  fill-opacity: 0.06;
+}
+.overlay rect.bbox.layer-furniture.selected,
+.overlay rect.bbox.layer-background.selected {
+  fill: color-mix(
+    in srgb,
+    var(--kind-stroke, var(--accent)) 22%,
+    transparent
+  ) !important;
+}
+.overlay rect.bbox.layer-furniture.related:not(.selected),
+.overlay rect.bbox.layer-background.related:not(.selected) {
+  fill: color-mix(
+    in srgb,
+    var(--kind-stroke, var(--accent)) 18%,
+    transparent
+  ) !important;
+}
+.overlay .bbox-text {
+  fill: color-mix(in srgb, var(--kind-text) 14%, transparent);
+  stroke: var(--kind-text);
+}
+.overlay .bbox-heading {
+  fill: color-mix(in srgb, var(--kind-heading) 14%, transparent);
+  stroke: var(--kind-heading);
+}
+.overlay .bbox-list,
+.overlay .bbox-ldiv {
+  fill: color-mix(in srgb, var(--kind-list) 14%, transparent);
+  stroke: var(--kind-list);
+}
+.overlay .bbox-table {
+  fill: color-mix(in srgb, var(--kind-table) 14%, transparent);
+  stroke: var(--kind-table);
+}
+.overlay .bbox-index {
+  fill: color-mix(in srgb, var(--kind-index) 14%, transparent);
+  stroke: var(--kind-index);
+}
+.overlay .bbox-formula {
+  fill: color-mix(in srgb, var(--kind-formula) 14%, transparent);
+  stroke: var(--kind-formula);
+}
+.overlay .bbox-code {
+  fill: color-mix(in srgb, var(--kind-code) 16%, transparent);
+  stroke: var(--kind-code);
+}
+.overlay .bbox-picture {
+  fill: color-mix(in srgb, var(--kind-picture) 14%, transparent);
+  stroke: var(--kind-picture);
+}
+.overlay .bbox-group {
+  fill: color-mix(in srgb, var(--kind-group) 14%, transparent);
+  stroke: var(--kind-group);
+}
+.overlay .bbox-footnote {
+  fill: color-mix(in srgb, var(--kind-footnote) 14%, transparent);
+  stroke: var(--kind-footnote);
+}
+.overlay .bbox-page_header,
+.overlay .bbox-page_footer {
+  fill: color-mix(in srgb, var(--kind-page_header) 14%, transparent);
+  stroke: var(--kind-page_header);
+}
+.overlay .bbox-caption {
+  fill: color-mix(in srgb, var(--kind-caption) 14%, transparent);
+  stroke: var(--kind-caption);
+}
+.overlay line.caption-link {
+  color: var(--arrow-caption-color, var(--kind-caption));
+  stroke: currentColor;
+  stroke-width: var(--arrow-caption-width, 1.5);
+  stroke-dasharray: var(--arrow-caption-dash, none);
+  stroke-linecap: var(--arrow-caption-cap, butt);
+  vector-effect: non-scaling-stroke;
+  pointer-events: none;
+  fill: none;
+}
+.overlay line.caption-link.bbox-hidden {
+  display: none;
+}
+.overlay line.xref-link {
+  color: var(--arrow-xref-color, var(--kind-footnote));
+  stroke: currentColor;
+  stroke-width: var(--arrow-xref-width, 1.5);
+  stroke-dasharray: var(--arrow-xref-dash, none);
+  stroke-linecap: var(--arrow-xref-cap, butt);
+  vector-effect: non-scaling-stroke;
+  pointer-events: none;
+  fill: none;
+}
+.overlay line.xref-link.bbox-hidden {
+  display: none;
+}
+.overlay .fragment-link {
+  pointer-events: none;
+}
+.overlay .fragment-link.bbox-hidden {
+  display: none;
+}
+.overlay .fragment-link-path {
+  color: var(--arrow-fragment-color, var(--overlay-fragment));
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--arrow-fragment-width, 1.5);
+  stroke-linecap: var(--arrow-fragment-cap, butt);
+  vector-effect: non-scaling-stroke;
+}
+.overlay .fragment-link-path-dashed {
+  stroke-dasharray: var(--arrow-fragment-dash, 6 4);
+}
+.overlay .fragment-nav {
+  pointer-events: none;
+}
+.overlay .fragment-nav.bbox-hidden {
+  display: none;
+}
+.overlay .fragment-nav-btn {
+  pointer-events: auto;
+  cursor: pointer;
+}
+.overlay .fragment-nav-btn-disabled {
+  pointer-events: none;
+  cursor: default;
+  opacity: 0.35;
+}
+.overlay .fragment-nav-btn-bg {
+  fill: var(--panel);
+  stroke: var(--overlay-fragment);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+.overlay .fragment-nav-btn-label {
+  fill: var(--overlay-fragment);
+  font-family: var(--font-ui);
+  font-weight: 700;
+  text-anchor: middle;
+  dominant-baseline: central;
+  pointer-events: none;
+}
+.overlay .fragment-nav-btn:not(.fragment-nav-btn-disabled):hover .fragment-nav-btn-bg {
+  fill: color-mix(in srgb, var(--overlay-fragment) 12%, var(--panel));
+}
+.overlay .fragment-link-label {
+  fill: var(--overlay-fragment);
+  font-family: var(--font-ui);
+  font-weight: 600;
+  font-style: italic;
+  text-anchor: middle;
+  dominant-baseline: middle;
+  paint-order: stroke fill;
+  stroke: var(--panel);
+  stroke-width: 3px;
+}
+.overlay .reading-order-step {
+  color: var(--arrow-reading-order-color, var(--overlay-reading-order));
+  stroke: currentColor;
+  stroke-width: var(--arrow-reading-order-width, 1.5);
+  stroke-dasharray: var(--arrow-reading-order-dash, 5 4);
+  stroke-linecap: var(--arrow-reading-order-cap, butt);
+  vector-effect: non-scaling-stroke;
+  pointer-events: none;
+  fill: none;
+}
+.overlay .reading-order-step.bbox-hidden,
+.overlay .reading-order-badge.bbox-hidden {
+  display: none;
+}
+.overlay .overlay-badge {
+  pointer-events: none;
+}
+.overlay .overlay-badge-bg {
+  fill-opacity: 1;
+  stroke: none;
+}
+.reading-order-badge .overlay-badge-bg {
+  fill: var(--overlay-reading-order);
+}
+.overlay .element-badge {
+  opacity: 0.8;
+  pointer-events: auto;
+  cursor: help;
+}
+.overlay .element-badge .overlay-badge-bg {
+  fill: var(--accent);
+}
+.overlay .element-badge.kind-text .overlay-badge-bg {
+  fill: var(--kind-text);
+}
+.overlay .element-badge.kind-heading .overlay-badge-bg {
+  fill: var(--kind-heading);
+}
+.overlay .element-badge.kind-list .overlay-badge-bg {
+  fill: var(--kind-list);
+}
+.overlay .element-badge.kind-table .overlay-badge-bg {
+  fill: var(--kind-table);
+}
+.overlay .element-badge.kind-index .overlay-badge-bg {
+  fill: var(--kind-index);
+}
+.overlay .element-badge.kind-formula .overlay-badge-bg {
+  fill: var(--kind-formula);
+}
+.overlay .element-badge.kind-code .overlay-badge-bg {
+  fill: var(--kind-code);
+}
+.overlay .element-badge.kind-picture .overlay-badge-bg {
+  fill: var(--kind-picture);
+}
+.overlay .element-badge.kind-group .overlay-badge-bg {
+  fill: var(--kind-group);
+}
+.overlay .element-badge.kind-footnote .overlay-badge-bg {
+  fill: var(--kind-footnote);
+}
+.overlay .element-badge.kind-page_header .overlay-badge-bg {
+  fill: var(--kind-page_header);
+}
+.overlay .element-badge.kind-caption .overlay-badge-bg {
+  fill: var(--kind-caption);
+}
+.overlay .element-badge.kind-field .overlay-badge-bg {
+  fill: var(--kind-field);
+}
+.overlay .overlay-badge-label {
+  fill: #ffffff;
+  fill-opacity: 1;
+  font-family: var(--font-ui);
+  font-weight: 700;
+  text-anchor: middle;
+  dominant-baseline: central;
+  pointer-events: none;
+}
+.overlay .bbox-field {
+  fill: color-mix(in srgb, var(--kind-field) 14%, transparent);
+  stroke: var(--kind-field);
+}
+.overlay .bbox-default {
+  fill: color-mix(in srgb, var(--kind-default) 12%, transparent);
+  stroke: var(--kind-default);
+}
+@media (prefers-color-scheme: dark) {
+  :host {
+    --overlay-reading-order: var(--doclang-overlay-reading-order, #a1a1aa);
+    --overlay-fragment: var(--doclang-overlay-fragment, #c084fc);
+  }
+  .overlay .bbox-text {
+    fill: color-mix(in srgb, var(--kind-text) 20%, transparent);
+  }
+  .overlay .bbox-heading {
+    fill: color-mix(in srgb, var(--kind-heading) 20%, transparent);
+  }
+  .overlay .bbox-list,
+  .overlay .bbox-ldiv {
+    fill: color-mix(in srgb, var(--kind-list) 20%, transparent);
+  }
+  .overlay .bbox-table {
+    fill: color-mix(in srgb, var(--kind-table) 18%, transparent);
+  }
+  .overlay .bbox-index {
+    fill: color-mix(in srgb, var(--kind-index) 18%, transparent);
+  }
+  .overlay .bbox-formula {
+    fill: color-mix(in srgb, var(--kind-formula) 18%, transparent);
+  }
+  .overlay .bbox-code {
+    fill: color-mix(in srgb, var(--kind-code) 20%, transparent);
+  }
+  .overlay .bbox-picture {
+    fill: color-mix(in srgb, var(--kind-picture) 20%, transparent);
+  }
+  .overlay .bbox-group {
+    fill: color-mix(in srgb, var(--kind-group) 20%, transparent);
+  }
+  .overlay .bbox-footnote {
+    fill: color-mix(in srgb, var(--kind-footnote) 18%, transparent);
+  }
+  .overlay .bbox-page_header,
+  .overlay .bbox-page_footer {
+    fill: color-mix(in srgb, var(--kind-page_header) 18%, transparent);
+  }
+  .overlay .bbox-caption {
+    fill: color-mix(in srgb, var(--kind-caption) 18%, transparent);
+  }
+  .overlay .bbox-field {
+    fill: color-mix(in srgb, var(--kind-field) 18%, transparent);
+  }
+  .overlay .bbox-default {
+    fill: color-mix(in srgb, var(--kind-default) 18%, transparent);
+  }
+}
+
+/* -----------------------------------------------------------------------
+   Element-head hint popover
+   ----------------------------------------------------------------------- */
+
+.page-view-hint {
+  position: fixed;
+  inset: unset;
+  top: 0;
+  left: 0;
+  width: max-content;
+  max-width: 24rem;
+  padding: 0.45rem 0.55rem;
+  border-radius: 0.25rem;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  color: var(--text);
+  font-family: var(--font-ui);
+  font-size: 0.75rem;
+  line-height: 1.35;
+  text-align: left;
+  white-space: normal;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  pointer-events: none;
+  margin: 0;
+}
+
+.page-view-hint .head-tooltip {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 0.6875rem;
+  line-height: 1.4;
+}
+
+.page-view-hint .head-tooltip th {
+  padding: 0.1rem 0.55rem 0.1rem 0;
+  color: var(--muted);
+  font-weight: 600;
+  text-align: left;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.page-view-hint .head-tooltip td {
+  padding: 0.1rem 0;
+  vertical-align: top;
+  word-break: break-word;
+}
+
+.page-view-hint .head-tooltip .head-default {
+  color: var(--muted);
+  font-style: italic;
+  white-space: nowrap;
+}
+
diff --git a/core/src/components/page-img-pane/page-img-pane.ts b/core/src/components/page-img-pane/page-img-pane.ts
new file mode 100644
index 0000000..5cf1a25
--- /dev/null
+++ b/core/src/components/page-img-pane/page-img-pane.ts
@@ -0,0 +1,1499 @@
+/** <doclang-page-img-pane> — page image with zoom and overlay settings panel */
+
+import { html, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { unsafeCSS } from 'lit';
+import { ref, createRef } from 'lit/directives/ref.js';
+import type { Ref } from 'lit/directives/ref.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { DoclangPageElement } from '../base/page-element';
+import { PageController } from '../base/page-controller';
+import styles from './page-img-pane.css?inline';
+import '../settings-panel/settings-panel';
+import type { DoclangSettingsPanel } from '../settings-panel/settings-panel';
+import {
+  applyPageImageSize,
+  buildOverlay,
+  syncOverlayBadges,
+  PAGE_ZOOM_DEFAULT,
+  ARROW_LAYERS,
+  ARROW_STYLE_FIELD_DEFAULTS,
+  ARROW_DASH_VALUES,
+  type ArrowLayerKey,
+  type ArrowStyleConfig,
+  type OverlayCtx,
+  type PageLayoutCache,
+} from './overlay';
+import {
+  assignElementIds,
+  invertElementIds,
+  collectBoundingBoxes,
+  collectCaptionLinks,
+  collectXrefLinks,
+  collectFragmentLinks,
+  collectFragmentNavItems,
+  collectReadingOrderSteps,
+} from '../../doclang/document';
+import {
+  isPictureContentElement,
+  isTableContentElement,
+  escapeHtml,
+  elementLabel,
+  elementHeadLocations,
+  firstHeadChild,
+  locationResolution,
+} from '../../doclang/dom';
+
+interface PagePanDrag {
+  pointerId: number;
+  startX: number;
+  startY: number;
+  scrollLeft: number;
+  scrollTop: number;
+  moved: boolean;
+}
+
+interface HeadInfo {
+  key: string;
+  value: string;
+  isDefault: boolean;
+}
+
+const PAGE_PAN_DRAG_THRESHOLD = 5;
+const NO_IMAGE = '(No page image available.)';
+const OVERLAY_PREFS_STORAGE_KEY = 'doclang-viewer-overlay-prefs';
+const ARROW_STYLE_STORAGE_KEY = 'doclang-viewer-arrow-styles';
+
+export interface OverlaySettings {
+  showAllBboxes: boolean;
+  showLayoutBadges: boolean;
+  showReadingOrder: boolean;
+  readingOrderArrows: boolean;
+  readingOrderGlobal: boolean;
+  showPictureContents: boolean;
+  showTableContents: boolean;
+  showFragmentLinks: boolean;
+  showXrefLinks: boolean;
+  showCaptionLinks: boolean;
+}
+
+const DEFAULT_OVERLAY_SETTINGS: OverlaySettings = {
+  showAllBboxes: true,
+  showLayoutBadges: true,
+  showReadingOrder: false,
+  readingOrderArrows: true,
+  readingOrderGlobal: false,
+  showPictureContents: false,
+  showTableContents: false,
+  showFragmentLinks: false,
+  showXrefLinks: false,
+  showCaptionLinks: false,
+};
+
+function toHexColor(value: string | undefined): string {
+  const v = (value || '').trim();
+  if (/^#[0-9a-fA-F]{6}$/.test(v)) return v.toLowerCase();
+  if (/^#[0-9a-fA-F]{3}$/.test(v)) {
+    return `#${v
+      .slice(1)
+      .split('')
+      .map(c => c + c)
+      .join('')
+      .toLowerCase()}`;
+  }
+  const m = v.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i);
+  if (m) {
+    const hex = m
+      .slice(1, 4)
+      .map(n =>
+        Math.max(0, Math.min(255, Math.round(parseFloat(n))))
+          .toString(16)
+          .padStart(2, '0')
+      )
+      .join('');
+    return `#${hex}`;
+  }
+  return '#000000';
+}
+
+@customElement('doclang-page-img-pane')
+export class DoclangPageImgPane extends DoclangPageElement {
+  static override styles = unsafeCSS(styles);
+
+  // Imperative body ref — page image + SVG overlay live here
+  private _bodyRef: Ref<HTMLElement> = createRef();
+  private _settingsPanelRef: Ref<DoclangSettingsPanel> = createRef();
+
+  // --- overlay settings state ---
+  private _settingsOpen = false;
+  private _visible = false;
+  private _zoomPct = PAGE_ZOOM_DEFAULT;
+  private _opts: OverlaySettings = { ...DEFAULT_OVERLAY_SETTINGS };
+  private _arrowStyles: Record<string, ArrowStyleConfig> = {};
+  private _expandedArrowFields: Set<ArrowLayerKey> = new Set();
+
+  private _pageController = new PageController(this, () => this.scrollPane);
+
+  // --- viewport mechanics state ---
+  private _panDrag: PagePanDrag | null = null;
+  private _suppressClick = false;
+  private _layoutCache: PageLayoutCache | null = null;
+  private _layoutFrame = 0;
+  private _resizeObserver: ResizeObserver | null = null;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.classList.add('pane', 'pane-page-view');
+    this._loadOverlayPrefs();
+    this._loadArrowStyles();
+    this._applyArrowStyleVars();
+    this.addEventListener(
+      'doclang-panning-change',
+      this._onPanningChange as EventListener
+    );
+    this.addEventListener('mousemove', this._onMousemove as EventListener);
+    this.addEventListener('mouseleave', this._onMouseleave);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener(
+      'doclang-panning-change',
+      this._onPanningChange as EventListener
+    );
+    this.removeEventListener('mousemove', this._onMousemove as EventListener);
+    this.removeEventListener('mouseleave', this._onMouseleave);
+    this._resizeObserver?.disconnect();
+    this._resizeObserver = null;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Render — header + settings panel (Lit); body (imperative via ref)
+  // ---------------------------------------------------------------------------
+
+  override render() {
+    const layoutEnabled = this._opts.showAllBboxes;
+    const readingOrderEnabled = layoutEnabled && this._opts.showReadingOrder;
+
+    return html`
+      <div class="pane-header">
+        <span class="pane-header-title">Original page</span>
+        <div class="pane-page-controls">
+          ${
+            this._visible
+              ? html`
+                  <div class="page-zoom-control">
+                    <label class="page-zoom-control-label">
+                      <span aria-hidden="true">Zoom</span>
+                      <input
+                        type="range"
+                        class="zoom-input"
+                        min="100"
+                        max="300"
+                        step="10"
+                        .value=${String(this._zoomPct)}
+                        aria-valuemin="100"
+                        aria-valuemax="300"
+                        aria-valuenow=${this._zoomPct}
+                        aria-label="Page zoom"
+                        @input=${this._onZoomInput}
+                      />
+                    </label>
+                    <button
+                      type="button"
+                      class="page-zoom-reset"
+                      title="Reset zoom"
+                      aria-label="Reset zoom"
+                      ?disabled=${this._zoomPct === PAGE_ZOOM_DEFAULT}
+                      @click=${() => {
+                        if (this._zoomPct !== PAGE_ZOOM_DEFAULT) this.resetZoom();
+                      }}
+                    >
+                      ${this._zoomPct}%
+                    </button>
+                  </div>
+                  <button
+                    type="button"
+                    class="pane-settings-toggle"
+                    aria-expanded=${this._settingsOpen ? 'true' : 'false'}
+                    @click=${() => this.toggleSettings()}
+                  >
+                    Overlays
+                  </button>
+                `
+              : nothing
+          }
+        </div>
+      </div>
+      <div class="pane-page-layout">
+        <div
+          class="pane-body"
+          id="page-img-pane"
+          tabindex=${this._visible ? '0' : '-1'}
+          ${ref(this._bodyRef)}
+        ></div>
+        ${this._visible
+          ? html`
+              <doclang-settings-panel
+                ${ref(this._settingsPanelRef)}
+                label="Overlays"
+                @doclang-settings-close=${() => this._applySettingsOpen(false)}
+              >
+                <label class="settings-option settings-option-primary">
+                  <input
+                    type="checkbox"
+                    class="cb-all-bboxes"
+                    .checked=${this._opts.showAllBboxes}
+                    @change=${(e: Event) =>
+                      this._onOptChange(
+                        'showAllBboxes',
+                        (e.target as HTMLInputElement).checked
+                      )}
+                  />
+                  <span>Layout</span>
+                </label>
+                <div class="settings-subgroup">
+                  <label
+                    class=${classMap({
+                      'settings-option': true,
+                      'settings-option-sub': true,
+                      'settings-option-disabled': !layoutEnabled,
+                    })}
+                  >
+                    <input
+                      type="checkbox"
+                      class="cb-reading-order"
+                      .checked=${this._opts.showReadingOrder}
+                      ?disabled=${!layoutEnabled}
+                      @change=${(e: Event) =>
+                        this._onOptChange(
+                          'showReadingOrder',
+                          (e.target as HTMLInputElement).checked
+                        )}
+                    />
+                    <span>Reading order</span>
+                  </label>
+                  <div class="settings-subgroup settings-reading-order-group">
+                    <div
+                      class=${classMap({
+                        'arrow-layer-row': true,
+                        'is-disabled': !readingOrderEnabled,
+                      })}
+                    >
+                      <label
+                        class=${classMap({
+                          'settings-option': true,
+                          'settings-option-sub': true,
+                          'settings-option-nested': true,
+                          'settings-option-disabled': !readingOrderEnabled,
+                        })}
+                      >
+                        <input
+                          type="checkbox"
+                          class="cb-reading-order-arrows"
+                          .checked=${this._opts.readingOrderArrows}
+                          ?disabled=${!readingOrderEnabled}
+                          @change=${(e: Event) =>
+                            this._onOptChange(
+                              'readingOrderArrows',
+                              (e.target as HTMLInputElement).checked
+                            )}
+                        />
+                        <span>Arrows</span>
+                      </label>
+                      <button
+                        type="button"
+                        class="arrow-style-btn"
+                        aria-expanded=${String(
+                          this._expandedArrowFields.has('readingOrder') &&
+                            readingOrderEnabled
+                        )}
+                        aria-label="Reading-order arrow style"
+                        title="Arrow style"
+                        @click=${() => this._toggleArrowStyleFields('readingOrder')}
+                      ></button>
+                    </div>
+                    ${this._renderArrowStyleFields('readingOrder', readingOrderEnabled)}
+                    <label
+                      class=${classMap({
+                        'settings-option': true,
+                        'settings-option-sub': true,
+                        'settings-option-nested': true,
+                        'settings-option-disabled': !readingOrderEnabled,
+                      })}
+                    >
+                      <input
+                        type="checkbox"
+                        class="cb-reading-order-global"
+                        .checked=${this._opts.readingOrderGlobal}
+                        ?disabled=${!readingOrderEnabled}
+                        @change=${(e: Event) =>
+                          this._onOptChange(
+                            'readingOrderGlobal',
+                            (e.target as HTMLInputElement).checked
+                          )}
+                      />
+                      <span>Global numbering</span>
+                    </label>
+                  </div>
+                  <label
+                    class=${classMap({
+                      'settings-option': true,
+                      'settings-option-sub': true,
+                      'settings-option-disabled': !layoutEnabled,
+                    })}
+                  >
+                    <input
+                      type="checkbox"
+                      class="cb-picture-contents"
+                      .checked=${this._opts.showPictureContents}
+                      ?disabled=${!layoutEnabled}
+                      @change=${(e: Event) =>
+                        this._onOptChange(
+                          'showPictureContents',
+                          (e.target as HTMLInputElement).checked
+                        )}
+                    />
+                    <span>Picture contents</span>
+                  </label>
+                  <label
+                    class=${classMap({
+                      'settings-option': true,
+                      'settings-option-sub': true,
+                      'settings-option-disabled': !layoutEnabled,
+                    })}
+                  >
+                    <input
+                      type="checkbox"
+                      class="cb-table-contents"
+                      .checked=${this._opts.showTableContents}
+                      ?disabled=${!layoutEnabled}
+                      @change=${(e: Event) =>
+                        this._onOptChange(
+                          'showTableContents',
+                          (e.target as HTMLInputElement).checked
+                        )}
+                    />
+                    <span>Table contents</span>
+                  </label>
+
+                  <div
+                    class=${classMap({
+                      'arrow-layer-row': true,
+                      'is-disabled': !layoutEnabled,
+                    })}
+                  >
+                    <label
+                      class=${classMap({
+                        'settings-option': true,
+                        'settings-option-sub': true,
+                        'settings-option-disabled': !layoutEnabled,
+                      })}
+                    >
+                      <input
+                        type="checkbox"
+                        class="cb-fragment-links"
+                        .checked=${this._opts.showFragmentLinks}
+                        ?disabled=${!layoutEnabled}
+                        @change=${(e: Event) =>
+                          this._onOptChange(
+                            'showFragmentLinks',
+                            (e.target as HTMLInputElement).checked
+                          )}
+                      />
+                      <span>Fragments</span>
+                    </label>
+                    <button
+                      type="button"
+                      class="arrow-style-btn"
+                      aria-expanded=${String(
+                        this._expandedArrowFields.has('fragment') && layoutEnabled
+                      )}
+                      aria-label="Fragment arrow style"
+                      title="Arrow style"
+                      @click=${() => this._toggleArrowStyleFields('fragment')}
+                    ></button>
+                  </div>
+                  ${this._renderArrowStyleFields('fragment', layoutEnabled)}
+
+                  <div
+                    class=${classMap({
+                      'arrow-layer-row': true,
+                      'is-disabled': !layoutEnabled,
+                    })}
+                  >
+                    <label
+                      class=${classMap({
+                        'settings-option': true,
+                        'settings-option-sub': true,
+                        'settings-option-disabled': !layoutEnabled,
+                      })}
+                    >
+                      <input
+                        type="checkbox"
+                        class="cb-xref-links"
+                        .checked=${this._opts.showXrefLinks}
+                        ?disabled=${!layoutEnabled}
+                        @change=${(e: Event) =>
+                          this._onOptChange(
+                            'showXrefLinks',
+                            (e.target as HTMLInputElement).checked
+                          )}
+                      />
+                      <span title="Cross-references">Cross-references</span>
+                    </label>
+                    <button
+                      type="button"
+                      class="arrow-style-btn"
+                      aria-expanded=${String(
+                        this._expandedArrowFields.has('xref') && layoutEnabled
+                      )}
+                      aria-label="Cross-reference arrow style"
+                      title="Arrow style"
+                      @click=${() => this._toggleArrowStyleFields('xref')}
+                    ></button>
+                  </div>
+                  ${this._renderArrowStyleFields('xref', layoutEnabled)}
+
+                  <div
+                    class=${classMap({
+                      'arrow-layer-row': true,
+                      'is-disabled': !layoutEnabled,
+                    })}
+                  >
+                    <label
+                      class=${classMap({
+                        'settings-option': true,
+                        'settings-option-sub': true,
+                        'settings-option-disabled': !layoutEnabled,
+                      })}
+                    >
+                      <input
+                        type="checkbox"
+                        class="cb-caption-links"
+                        .checked=${this._opts.showCaptionLinks}
+                        ?disabled=${!layoutEnabled}
+                        @change=${(e: Event) =>
+                          this._onOptChange(
+                            'showCaptionLinks',
+                            (e.target as HTMLInputElement).checked
+                          )}
+                      />
+                      <span>Captions</span>
+                    </label>
+                    <button
+                      type="button"
+                      class="arrow-style-btn"
+                      aria-expanded=${String(
+                        this._expandedArrowFields.has('caption') && layoutEnabled
+                      )}
+                      aria-label="Caption arrow style"
+                      title="Arrow style"
+                      @click=${() => this._toggleArrowStyleFields('caption')}
+                    ></button>
+                  </div>
+                  ${this._renderArrowStyleFields('caption', layoutEnabled)}
+
+                  <label
+                    class=${classMap({
+                      'settings-option': true,
+                      'settings-option-sub': true,
+                      'settings-option-disabled': !layoutEnabled,
+                    })}
+                  >
+                    <input
+                      type="checkbox"
+                      class="cb-layout-badges"
+                      .checked=${this._opts.showLayoutBadges}
+                      ?disabled=${!layoutEnabled}
+                      @change=${(e: Event) =>
+                        this._onOptChange(
+                          'showLayoutBadges',
+                          (e.target as HTMLInputElement).checked
+                        )}
+                    />
+                    <span>Badges</span>
+                  </label>
+                </div>
+
+                <div class="settings-divider" role="separator"></div>
+                <button
+                  type="button"
+                  class="overlays-reset"
+                  @click=${this._resetAllOverlaySettings}
+                >
+                  Reset all
+                </button>
+              </doclang-settings-panel>
+            `
+          : nothing}
+      </div>
+      <div
+        id="page-view-hint"
+        popover="manual"
+        role="tooltip"
+        class="page-view-hint"
+      ></div>
+    `;
+  }
+
+  // Wire pan events on the body element once it enters the DOM
+  override firstUpdated(): void {
+    const body = this._bodyRef.value;
+    if (body) this._wirePanEvents(body);
+  }
+
+  // ---------------------------------------------------------------------------
+  // Public getters
+  // ---------------------------------------------------------------------------
+
+  get zoomPercent(): number {
+    return this._zoomPct;
+  }
+
+  get overlaySettings(): Readonly<OverlaySettings> {
+    return this._opts;
+  }
+
+  /** The scrollable viewport pane (page-view-port div, or body if absent). */
+  get scrollPane(): HTMLElement | null {
+    return this._scrollPane();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Visibility / layout
+  // ---------------------------------------------------------------------------
+
+  setVisible(visible: boolean): void {
+    this._visible = visible;
+    this.hidden = !visible;
+    this.requestUpdate();
+  }
+
+  /**
+   * Recalculate image size and re-sync overlay badge positions.
+   * Also ensures the ResizeObserver is attached (idempotent).
+   */
+  refreshLayout(): void {
+    const body = this._bodyRef.value;
+    if (!body) return;
+    if (!this._resizeObserver) {
+      this._resizeObserver = new ResizeObserver(() => this.refreshLayout());
+      this._resizeObserver.observe(body);
+    }
+    cancelAnimationFrame(this._layoutFrame);
+    this._layoutFrame = requestAnimationFrame(() => {
+      this._layoutFrame = 0;
+      const img = body.querySelector('.page-view img') as HTMLImageElement | null;
+      if (img?.naturalWidth) {
+        applyPageImageSize(img, body, this._overlayCtx());
+        this._updatePanCursor();
+        this._syncOverlayBadgesForImg(img);
+        this.dispatchEvent(
+          new CustomEvent('doclang-layout-refresh', { bubbles: true, composed: true })
+        );
+      }
+    });
+  }
+
+  // ---------------------------------------------------------------------------
+  // Zoom
+  // ---------------------------------------------------------------------------
+
+  activateZoom(pct: number): void {
+    this._zoomPct = pct;
+    this._layoutCache = null;
+    this.requestUpdate();
+    this._resetScroll();
+  }
+
+  resetZoom(): void {
+    this._zoomPct = PAGE_ZOOM_DEFAULT;
+    this._layoutCache = null;
+    this.requestUpdate();
+    this._resetScroll();
+    this.refreshLayout();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Settings panel
+  // ---------------------------------------------------------------------------
+
+  toggleSettings(): void {
+    this._applySettingsOpen(!this._settingsOpen);
+  }
+
+  private _applySettingsOpen(open: boolean): void {
+    this._settingsOpen = open;
+    this._settingsPanelRef.value?.setOpen(open);
+    this.requestUpdate();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Selection
+  // ---------------------------------------------------------------------------
+
+  protected override _applySelection(): void {
+    const body = this._bodyRef.value;
+    if (!body) return;
+    for (const el of body.querySelectorAll('.bbox.selected, .overlay-badge.selected')) {
+      el.classList.remove('selected');
+    }
+    if (this.selected && this._docState?.hasPageView) {
+      for (const el of body.querySelectorAll(
+        `[data-element-id="${this.selected}"]`
+      )) {
+        el.classList.add('selected');
+      }
+    }
+    const img = body.querySelector('.page-view img') as HTMLImageElement | null;
+    if (img) this._syncOverlayBadgesForImg(img);
+    this._applyBboxVisibility();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Document rendering
+  // ---------------------------------------------------------------------------
+
+  protected override _renderDocument(): void {
+    const body = this._bodyRef.value;
+    if (!body) {
+      this.requestUpdate();
+      this.updateComplete.then(() => this._renderDocument());
+      return;
+    }
+    const state = this._docState;
+    body.innerHTML = '';
+    this._layoutCache = null;
+    this.selected = null;
+    this._peerIds = new Set();
+
+    if (!state?.hasPageView) return;
+
+    const imageUrl = state.pageImages.get(this.page);
+    if (!imageUrl) {
+      body.innerHTML = `<div class="placeholder">${NO_IMAGE}</div>`;
+      return;
+    }
+
+    const port = document.createElement('div');
+    port.className = 'page-view-port';
+    const wrap = document.createElement('div');
+    wrap.className = 'page-view';
+    const img = document.createElement('img');
+    img.alt = `Page ${this.page}`;
+
+    const pageNum = this.page;
+    const onImageReady = (): void => {
+      if (img.dataset.layoutGeneration === String(pageNum)) return;
+      img.dataset.layoutGeneration = String(pageNum);
+      applyPageImageSize(img, body, this._overlayCtx());
+
+      const segment = state.segments[pageNum - 1] ?? [];
+      const elementIds = assignElementIds(segment);
+      state.elementIds = elementIds;
+      state.idToElement = invertElementIds(elementIds);
+
+      const boxes = collectBoundingBoxes(segment, state.defaultResolution, elementIds);
+      const existing = wrap.querySelector('svg.overlay');
+      if (existing) existing.remove();
+      const readingOrderSteps = collectReadingOrderSteps(
+        segment,
+        elementIds,
+        boxes,
+        state.readingOrder,
+        this._opts.readingOrderGlobal,
+        state.readingOrderDisplayNumbers
+      );
+      if (boxes.length) {
+        wrap.appendChild(
+          buildOverlay(
+            img,
+            boxes,
+            collectCaptionLinks(segment, elementIds, boxes),
+            collectXrefLinks(segment, elementIds, boxes),
+            readingOrderSteps,
+            collectFragmentLinks(
+              segment,
+              elementIds,
+              boxes,
+              pageNum,
+              state.threadPagesById
+            ),
+            collectFragmentNavItems(
+              segment,
+              elementIds,
+              boxes,
+              state.threadNavByElement
+            ),
+            id =>
+              this.dispatchEvent(
+                new CustomEvent('doclang-element-select', {
+                  bubbles: true,
+                  composed: true,
+                  detail: { id },
+                })
+              ),
+            (elementId, direction) =>
+              this.dispatchEvent(
+                new CustomEvent('doclang-navigate-thread', {
+                  bubbles: true,
+                  composed: true,
+                  detail: { elementId, direction },
+                })
+              ),
+            () =>
+              this.dispatchEvent(
+                new CustomEvent('doclang-clear-selection', {
+                  bubbles: true,
+                  composed: true,
+                })
+              ),
+            () => this._suppressClick,
+            v => {
+              this._suppressClick = v;
+            },
+            this._overlayCtx()
+          )
+        );
+      }
+
+      this._syncOverlayBadgesForImg(img);
+      this._applyBboxVisibility();
+
+      const pending = state.pendingSelectElement;
+      if (pending) {
+        state.pendingSelectElement = null;
+        const id = this._findElementIdOnPage(pending, elementIds);
+        if (id)
+          this.dispatchEvent(
+            new CustomEvent('doclang-element-select', {
+              bubbles: true,
+              composed: true,
+              detail: { id },
+            })
+          );
+      }
+    };
+
+    img.addEventListener('load', onImageReady, { once: true });
+    wrap.appendChild(img);
+    port.appendChild(wrap);
+    body.appendChild(port);
+    img.src = imageUrl;
+    if (img.complete) onImageReady();
+
+    this.refreshLayout();
+  }
+
+  protected override _clearDocument(): void {
+    const body = this._bodyRef.value;
+    if (body) body.innerHTML = '';
+    this._layoutCache = null;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Private helpers — overlay visibility
+  // ---------------------------------------------------------------------------
+
+  private _overlayCtx(): OverlayCtx {
+    const body = this._bodyRef.value!;
+    return {
+      zoomPct: this._zoomPct,
+      pane: body,
+      layoutCache: this._layoutCache,
+      setLayoutCache: c => {
+        this._layoutCache = c;
+      },
+      selectedId: this.selected,
+      arrowMarkerOptions: (layerKey: ArrowLayerKey) => this._arrowMarkerOptions(layerKey),
+    };
+  }
+
+  private _syncOverlayBadgesForImg(img: HTMLImageElement): void {
+    const svg = img.parentElement?.querySelector('svg.overlay') as SVGSVGElement | null;
+    const state = this._docState;
+    if (!svg || !state) return;
+    const pageNum = this.page;
+    const segment = state.segments[pageNum - 1] ?? [];
+    const boxes = collectBoundingBoxes(segment, state.defaultResolution, state.elementIds);
+    const readingOrderSteps = collectReadingOrderSteps(
+      segment,
+      state.elementIds,
+      boxes,
+      state.readingOrder,
+      this._opts.readingOrderGlobal,
+      state.readingOrderDisplayNumbers
+    );
+    const { showAllBboxes, showLayoutBadges, showReadingOrder } = this._opts;
+    syncOverlayBadges(
+      img,
+      svg,
+      boxes,
+      readingOrderSteps,
+      showAllBboxes,
+      showLayoutBadges,
+      showReadingOrder,
+      this._overlayCtx()
+    );
+  }
+
+  private _isContentsOptionHidden(elementId: string, clickVisible: boolean): boolean {
+    if (clickVisible) return false;
+    const xmlEl = this._docState?.idToElement?.get(elementId) ?? null;
+    if (!this._opts.showPictureContents && isPictureContentElement(xmlEl)) return true;
+    if (!this._opts.showTableContents && isTableContentElement(xmlEl)) return true;
+    return false;
+  }
+
+  private _isFragmentLinkRelevant(linkEl: Element): boolean {
+    const fromId = linkEl.getAttribute('data-fragment-from-id');
+    const toId = linkEl.getAttribute('data-fragment-to-id');
+    if (fromId && this._peerIds.has(fromId)) return true;
+    if (toId && this._peerIds.has(toId)) return true;
+    return false;
+  }
+
+  private _applyBboxVisibility(): void {
+    const body = this._bodyRef.value;
+    if (!body || !this._docState?.hasPageView) return;
+    const {
+      showAllBboxes,
+      showLayoutBadges,
+      showCaptionLinks,
+      showXrefLinks,
+      showFragmentLinks,
+      showReadingOrder,
+      readingOrderArrows,
+    } = this._opts;
+    const selectedId = this.selected;
+    const peerIds = this._peerIds;
+
+    for (const el of body.querySelectorAll('.bbox')) {
+      el.classList.remove('related');
+      const elementId = el.getAttribute('data-element-id') ?? '';
+      const clickVisible = elementId === selectedId || peerIds.has(elementId);
+      if (showAllBboxes) {
+        if (this._isContentsOptionHidden(elementId, clickVisible)) {
+          el.classList.add('bbox-hidden');
+        } else {
+          el.classList.remove('bbox-hidden');
+          if (peerIds.has(elementId)) el.classList.add('related');
+        }
+        continue;
+      }
+      if (elementId === selectedId) {
+        el.classList.remove('bbox-hidden');
+      } else if (peerIds.has(elementId)) {
+        el.classList.remove('bbox-hidden');
+        el.classList.add('related');
+      } else {
+        el.classList.add('bbox-hidden');
+      }
+    }
+
+    for (const el of body.querySelectorAll('.element-badge')) {
+      const elementId = el.getAttribute('data-element-id') ?? '';
+      const clickVisible = elementId === selectedId || peerIds.has(elementId);
+      if (!showAllBboxes || !showLayoutBadges) {
+        el.classList.add('bbox-hidden');
+        continue;
+      }
+      if (this._isContentsOptionHidden(elementId, clickVisible))
+        el.classList.add('bbox-hidden');
+      else el.classList.remove('bbox-hidden');
+    }
+
+    for (const el of body.querySelectorAll('.caption-link')) {
+      el.classList.toggle('bbox-hidden', !showAllBboxes || !showCaptionLinks);
+    }
+    for (const el of body.querySelectorAll('.xref-link')) {
+      el.classList.toggle('bbox-hidden', !showAllBboxes || !showXrefLinks);
+    }
+    for (const el of body.querySelectorAll('.fragment-link')) {
+      const clickVisible = Boolean(selectedId && this._isFragmentLinkRelevant(el));
+      el.classList.toggle(
+        'bbox-hidden',
+        !(clickVisible || (showAllBboxes && showFragmentLinks))
+      );
+    }
+    for (const el of body.querySelectorAll('.fragment-nav')) {
+      const elementId = el.getAttribute('data-element-id') ?? '';
+      const clickVisible = elementId === selectedId || peerIds.has(elementId);
+      el.classList.toggle(
+        'bbox-hidden',
+        !(clickVisible || (showAllBboxes && showFragmentLinks))
+      );
+    }
+    for (const el of body.querySelectorAll('.reading-order-badge')) {
+      const elementId = el.getAttribute('data-element-id') ?? '';
+      const clickVisible = elementId === selectedId || peerIds.has(elementId);
+      if (!showAllBboxes || !showReadingOrder) {
+        el.classList.add('bbox-hidden');
+        continue;
+      }
+      const xmlEl = this._docState?.idToElement?.get(elementId) ?? null;
+      if (
+        isPictureContentElement(xmlEl) ||
+        isTableContentElement(xmlEl) ||
+        this._isContentsOptionHidden(elementId, clickVisible)
+      ) {
+        el.classList.add('bbox-hidden');
+        continue;
+      }
+      el.classList.remove('bbox-hidden');
+    }
+    for (const el of body.querySelectorAll('.reading-order-step')) {
+      el.classList.toggle(
+        'bbox-hidden',
+        !showAllBboxes || !showReadingOrder || !readingOrderArrows
+      );
+    }
+  }
+
+  private _findElementIdOnPage(
+    el: Element,
+    elementIds: Map<Element, string>
+  ): string | null {
+    return elementIds.get(el) ?? null;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Private helpers — pan / scroll / cursor
+  // ---------------------------------------------------------------------------
+
+  private _scrollPane(): HTMLElement | null {
+    const body = this._bodyRef.value;
+    if (!body) return null;
+    return (body.querySelector('.page-view-port') as HTMLElement | null) ?? body;
+  }
+
+  private _isScrollable(): boolean {
+    const pane = this._scrollPane();
+    if (!pane) return false;
+    return pane.scrollWidth > pane.clientWidth || pane.scrollHeight > pane.clientHeight;
+  }
+
+  private _resetScroll(): void {
+    const port = this._scrollPane();
+    if (port) {
+      port.scrollLeft = 0;
+      port.scrollTop = 0;
+    }
+  }
+
+  private _updatePanCursor(): void {
+    const body = this._bodyRef.value;
+    if (body) body.classList.toggle('can-pan', this._isScrollable() && !this._panDrag);
+  }
+
+  private _onOptChange(key: keyof OverlaySettings, value: boolean): void {
+    (this._opts as unknown as Record<string, boolean>)[key] = value;
+    this._persistOverlayPrefs();
+    // Re-render page if global numbering changed (affects step labels)
+    if (key === 'readingOrderGlobal' && this._docState) {
+      this._renderDocument();
+    }
+    const body = this._bodyRef.value;
+    const img = body?.querySelector('.page-view img') as HTMLImageElement | null;
+    if (img) this._syncOverlayBadgesForImg(img);
+    this._applyBboxVisibility();
+    this._emitOverlayChange();
+    this.requestUpdate();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Arrow styling & overlay preferences persistence
+  // ---------------------------------------------------------------------------
+
+  private _loadOverlayPrefs(): void {
+    try {
+      const raw = localStorage.getItem(OVERLAY_PREFS_STORAGE_KEY);
+      if (!raw) return;
+      const data = JSON.parse(raw);
+      if (!data || typeof data !== 'object') return;
+      for (const key of Object.keys(DEFAULT_OVERLAY_SETTINGS) as (keyof OverlaySettings)[]) {
+        if (typeof data[key] === 'boolean') {
+          (this._opts as unknown as Record<string, boolean>)[key] = data[key];
+        }
+      }
+    } catch {
+      /* ignore invalid stored overlay prefs */
+    }
+  }
+
+  private _persistOverlayPrefs(): void {
+    try {
+      localStorage.setItem(OVERLAY_PREFS_STORAGE_KEY, JSON.stringify(this._opts));
+    } catch {
+      /* ignore quota / private mode */
+    }
+  }
+
+  private _loadArrowStyles(): void {
+    try {
+      const raw = localStorage.getItem(ARROW_STYLE_STORAGE_KEY);
+      if (!raw) return;
+      const parsed = JSON.parse(raw);
+      if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+        this._arrowStyles = parsed;
+      }
+    } catch {
+      this._arrowStyles = {};
+    }
+  }
+
+  private _persistArrowStyles(): void {
+    try {
+      localStorage.setItem(ARROW_STYLE_STORAGE_KEY, JSON.stringify(this._arrowStyles));
+    } catch {
+      /* storage unavailable — keep in-memory only */
+    }
+  }
+
+  private _getArrowStyle(layerKey: ArrowLayerKey): {
+    color?: string;
+    width: number;
+    head: number;
+    style: 'solid' | 'dashed' | 'dotted';
+  } {
+    const meta = ARROW_LAYERS[layerKey];
+    const stored = this._arrowStyles[layerKey] ?? {};
+    return {
+      color: stored.color,
+      width: stored.width ?? ARROW_STYLE_FIELD_DEFAULTS.width,
+      head: stored.head ?? ARROW_STYLE_FIELD_DEFAULTS.head,
+      style: stored.style ?? meta.defaultStyle,
+    };
+  }
+
+  private _resolveArrowColor(layerKey: ArrowLayerKey): string {
+    const stored = this._arrowStyles[layerKey]?.color;
+    if (stored) return stored;
+    const meta = ARROW_LAYERS[layerKey];
+    const themed = getComputedStyle(this)
+      .getPropertyValue(meta.colorVar)
+      .trim();
+    return themed || 'currentColor';
+  }
+
+  private _arrowMarkerOptions(layerKey: ArrowLayerKey): { size: number; color: string } {
+    return {
+      size: this._getArrowStyle(layerKey).head,
+      color: this._resolveArrowColor(layerKey),
+    };
+  }
+
+  private _applyArrowStyleVars(): void {
+    const hostStyle = this.style;
+    for (const [layerKey, meta] of Object.entries(ARROW_LAYERS) as [
+      ArrowLayerKey,
+      (typeof ARROW_LAYERS)[ArrowLayerKey],
+    ][]) {
+      const stored = this._arrowStyles[layerKey] ?? {};
+      const prefix = `--arrow-${meta.cssKey}`;
+      if (stored.color) hostStyle.setProperty(`${prefix}-color`, stored.color);
+      else hostStyle.removeProperty(`${prefix}-color`);
+
+      if (stored.width != null)
+        hostStyle.setProperty(`${prefix}-width`, String(stored.width));
+      else hostStyle.removeProperty(`${prefix}-width`);
+
+      if (stored.style != null) {
+        hostStyle.setProperty(`${prefix}-dash`, ARROW_DASH_VALUES[stored.style] ?? 'none');
+        hostStyle.setProperty(`${prefix}-cap`, stored.style === 'dotted' ? 'round' : 'butt');
+      } else {
+        hostStyle.removeProperty(`${prefix}-dash`);
+        hostStyle.removeProperty(`${prefix}-cap`);
+      }
+    }
+  }
+
+  private _toggleArrowStyleFields(layerKey: ArrowLayerKey): void {
+    if (this._expandedArrowFields.has(layerKey)) {
+      this._expandedArrowFields.delete(layerKey);
+    } else {
+      this._expandedArrowFields.add(layerKey);
+    }
+    this.requestUpdate();
+  }
+
+  private _onArrowStyleFieldChange(
+    layerKey: ArrowLayerKey,
+    field: keyof ArrowStyleConfig,
+    value: string | number
+  ): void {
+    const bucket = this._arrowStyles[layerKey] ?? (this._arrowStyles[layerKey] = {});
+    if (field === 'color') bucket.color = String(value);
+    else if (field === 'style') bucket.style = value as 'solid' | 'dashed' | 'dotted';
+    else if (field === 'width' || field === 'head') bucket[field] = Number(value);
+
+    this._persistArrowStyles();
+    this._applyArrowStyleVars();
+    const body = this._bodyRef.value;
+    const img = body?.querySelector('.page-view img') as HTMLImageElement | null;
+    if (img) this._syncOverlayBadgesForImg(img);
+    this.requestUpdate();
+  }
+
+  private _resetAllOverlaySettings = (): void => {
+    this._arrowStyles = {};
+    this._persistArrowStyles();
+    this._applyArrowStyleVars();
+    this._expandedArrowFields.clear();
+    this._opts = { ...DEFAULT_OVERLAY_SETTINGS };
+    this._persistOverlayPrefs();
+    this._applyBboxVisibility();
+    this._emitOverlayChange();
+    if (this._docState) this._renderDocument();
+    this.requestUpdate();
+  };
+
+  private _renderArrowStyleFields(layerKey: ArrowLayerKey, enabled: boolean) {
+    if (!this._expandedArrowFields.has(layerKey) || !enabled) return nothing;
+    const style = this._getArrowStyle(layerKey);
+    const colorVal = toHexColor(this._resolveArrowColor(layerKey));
+
+    return html`
+      <div class="arrow-style-fields" id="arrow-fields-${layerKey}">
+        <label>
+          Color
+          <input
+            type="color"
+            .value=${colorVal}
+            @input=${(e: Event) =>
+              this._onArrowStyleFieldChange(
+                layerKey,
+                'color',
+                (e.target as HTMLInputElement).value
+              )}
+          />
+        </label>
+        <label>
+          Thickness
+          <span class="arrow-field-control">
+            <input
+              type="range"
+              min="0.5"
+              max="6"
+              step="0.5"
+              .value=${String(style.width)}
+              title=${String(style.width)}
+              @input=${(e: Event) =>
+                this._onArrowStyleFieldChange(
+                  layerKey,
+                  'width',
+                  Number((e.target as HTMLInputElement).value)
+                )}
+            />
+            <output class="arrow-field-value" aria-hidden="true">${style.width}</output>
+          </span>
+        </label>
+        <label>
+          Head
+          <span class="arrow-field-control">
+            <input
+              type="range"
+              min="3"
+              max="14"
+              step="1"
+              .value=${String(style.head)}
+              title=${String(style.head)}
+              @input=${(e: Event) =>
+                this._onArrowStyleFieldChange(
+                  layerKey,
+                  'head',
+                  Number((e.target as HTMLInputElement).value)
+                )}
+            />
+            <output class="arrow-field-value" aria-hidden="true">${style.head}</output>
+          </span>
+        </label>
+        <label>
+          Line
+          <select
+            .value=${style.style}
+            @change=${(e: Event) =>
+              this._onArrowStyleFieldChange(
+                layerKey,
+                'style',
+                (e.target as HTMLSelectElement).value
+              )}
+          >
+            <option value="solid" ?selected=${style.style === 'solid'}>Solid</option>
+            <option value="dashed" ?selected=${style.style === 'dashed'}>Dashed</option>
+            <option value="dotted" ?selected=${style.style === 'dotted'}>Dotted</option>
+          </select>
+        </label>
+      </div>
+    `;
+  }
+
+  private _emitOverlayChange(): void {
+    this.dispatchEvent(
+      new CustomEvent('doclang-overlay-change', {
+        bubbles: true,
+        composed: true,
+        detail: { ...this._opts },
+      })
+    );
+  }
+
+  private _onZoomInput = (e: Event): void => {
+    this._zoomPct = Math.max(
+      PAGE_ZOOM_DEFAULT,
+      Number((e.target as HTMLInputElement).value)
+    );
+    this._layoutCache = null;
+    this.requestUpdate();
+    this.refreshLayout();
+  };
+
+  // ---------------------------------------------------------------------------
+  // Event wiring — pan (imperative, wired to the body element)
+  // ---------------------------------------------------------------------------
+
+  private _wirePanEvents(body: HTMLElement): void {
+    body.addEventListener('pointerdown', (e: PointerEvent) => {
+      if (e.button !== 0) return;
+      if (!(e.target instanceof Element) || !e.target.closest('.page-view')) return;
+      if (!this._isScrollable()) return;
+      const scrollPane = this._scrollPane();
+      if (!scrollPane) return;
+      this._panDrag = {
+        pointerId: e.pointerId,
+        startX: e.clientX,
+        startY: e.clientY,
+        scrollLeft: scrollPane.scrollLeft,
+        scrollTop: scrollPane.scrollTop,
+        moved: false,
+      };
+    });
+
+    body.addEventListener('pointermove', (e: PointerEvent) => {
+      if (!this._panDrag || e.pointerId !== this._panDrag.pointerId) return;
+      const dx = e.clientX - this._panDrag.startX;
+      const dy = e.clientY - this._panDrag.startY;
+      if (!this._panDrag.moved && Math.hypot(dx, dy) >= PAGE_PAN_DRAG_THRESHOLD) {
+        this._panDrag.moved = true;
+        body.classList.add('is-panning');
+        body.classList.remove('can-pan');
+        body.setPointerCapture(e.pointerId);
+        this.dispatchEvent(
+          new CustomEvent('doclang-panning-change', {
+            bubbles: true,
+            composed: true,
+            detail: { panning: true },
+          })
+        );
+      }
+      if (!this._panDrag.moved) return;
+      const scrollPane = this._scrollPane();
+      if (!scrollPane) return;
+      scrollPane.scrollLeft =
+        this._panDrag.scrollLeft + this._panDrag.startX - e.clientX;
+      scrollPane.scrollTop = this._panDrag.scrollTop + this._panDrag.startY - e.clientY;
+      e.preventDefault();
+    });
+
+    const endPan = (e: PointerEvent): void => {
+      if (!this._panDrag || e.pointerId !== this._panDrag.pointerId) return;
+      const wasPanning = this._panDrag.moved;
+      if (wasPanning) this._suppressClick = true;
+      this._panDrag = null;
+      body.classList.remove('is-panning');
+      if (wasPanning)
+        this.dispatchEvent(
+          new CustomEvent('doclang-panning-change', {
+            bubbles: true,
+            composed: true,
+            detail: { panning: false },
+          })
+        );
+      if (body.hasPointerCapture(e.pointerId)) body.releasePointerCapture(e.pointerId);
+      this._updatePanCursor();
+    };
+
+    body.addEventListener('pointerup', (e: PointerEvent) => endPan(e));
+    body.addEventListener('pointercancel', (e: PointerEvent) => endPan(e));
+
+    // Navigation
+    body.setAttribute('role', 'region');
+    body.setAttribute('aria-label', 'Original page');
+    body.addEventListener('pointerdown', () => {
+      if (this._docState?.hasPageView) body.focus({ preventScroll: true });
+    });
+  }
+
+  // ---------------------------------------------------------------------------
+  // Hints
+  // ---------------------------------------------------------------------------
+
+  private _onPanningChange = (e: CustomEvent<{ panning: boolean }>): void => {
+    if (e.detail.panning) this._hideHint();
+  };
+
+  private _onMousemove = (e: MouseEvent): void => {
+    if (this._panDrag?.moved) {
+      this._hideHint();
+      return;
+    }
+    const innerTarget = (e.composedPath()[0] ?? e.target) as Element;
+    const badge = innerTarget.closest('.element-badge[data-element-id]');
+    if (!badge || !this._docState?.idToElement) {
+      this._hideHint();
+      return;
+    }
+    const elementId = badge.getAttribute('data-element-id');
+    const xmlEl = elementId ? this._docState.idToElement.get(elementId) : null;
+    if (!xmlEl) {
+      this._hideHint();
+      return;
+    }
+    this._showHint(
+      this._elementHeadTooltipHtml(xmlEl, this._docState.defaultResolution),
+      e
+    );
+  };
+
+  private _onMouseleave = (): void => this._hideHint();
+
+  private _showHint(html: string, e: MouseEvent): void {
+    const el = this.shadowRoot?.querySelector<HTMLElement>('.page-view-hint') ?? null;
+    if (!el) return;
+    el.innerHTML = html;
+    el.style.top = `${e.clientY + 14}px`;
+    el.style.left = `${e.clientX + 14}px`;
+    if (!el.matches(':popover-open')) el.showPopover();
+  }
+
+  private _hideHint(): void {
+    const el = this.shadowRoot?.querySelector<HTMLElement>('.page-view-hint') ?? null;
+    if (el?.matches(':popover-open')) el.hidePopover();
+  }
+
+  private _elementHeadTooltipHtml(
+    el: Element,
+    defaultResolution: { width: number; height: number }
+  ): string {
+    const rows = this._collectElementHeadInfo(el, defaultResolution);
+    const body = rows
+      .map(({ key, value, isDefault }) => {
+        const rendered = escapeHtml(value);
+        const suffix = isDefault ? ' <span class="head-default">(default)</span>' : '';
+        return `<tr><th scope="row">${escapeHtml(key)}</th><td>${rendered}${suffix}</td></tr>`;
+      })
+      .join('');
+    return `<table class="head-tooltip"><tbody>${body}</tbody></table>`;
+  }
+
+  private _collectElementHeadInfo(
+    el: Element,
+    defaultResolution: { width: number; height: number }
+  ): HeadInfo[] {
+    const labelEl = firstHeadChild(el, 'label');
+    const threadEl = firstHeadChild(el, 'thread');
+    const xrefEl = firstHeadChild(el, 'xref');
+    const hrefEl = firstHeadChild(el, 'href');
+    const layerEl = firstHeadChild(el, 'layer');
+    const captionEl = firstHeadChild(el, 'caption');
+    const descriptionEl = firstHeadChild(el, 'description');
+    const summaryEl = firstHeadChild(el, 'summary');
+    const customEl = firstHeadChild(el, 'custom');
+    const locs = elementHeadLocations(el);
+    const rows: HeadInfo[] = [
+      { key: 'element', value: elementLabel(el), isDefault: false },
+    ];
+
+    rows.push({
+      key: 'label',
+      value: labelEl?.getAttribute('value') ?? 'undefined',
+      isDefault: !labelEl?.hasAttribute('value'),
+    });
+
+    if (threadEl) {
+      rows.push({
+        key: 'thread_id',
+        value: threadEl.getAttribute('thread_id') ?? '—',
+        isDefault: false,
+      });
+    } else {
+      rows.push({ key: 'thread', value: '—', isDefault: true });
+    }
+
+    if (xrefEl) {
+      rows.push({
+        key: 'xref',
+        value: `thread_id ${xrefEl.getAttribute('thread_id') ?? '—'}`,
+        isDefault: false,
+      });
+    } else {
+      rows.push({ key: 'xref', value: '—', isDefault: true });
+    }
+
+    if (hrefEl) {
+      rows.push({
+        key: 'href',
+        value: hrefEl.getAttribute('uri') ?? '—',
+        isDefault: false,
+      });
+    } else {
+      rows.push({ key: 'href', value: '—', isDefault: true });
+    }
+
+    rows.push({
+      key: 'layer',
+      value: layerEl?.getAttribute('value') ?? 'body',
+      isDefault: !layerEl?.hasAttribute('value'),
+    });
+
+    const cornerLabels = ['x_min', 'y_min', 'x_max', 'y_max'];
+    if (locs.length === 4) {
+      for (let idx = 0; idx < 4; idx += 1) {
+        const loc = locs[idx]!;
+        const axisDefault =
+          idx % 2 === 0 ? defaultResolution.width : defaultResolution.height;
+        const resolution = locationResolution(loc, axisDefault);
+        const value = loc.getAttribute('value') ?? '0';
+        rows.push({
+          key: cornerLabels[idx]!,
+          value: `${value} @ ${resolution}`,
+          isDefault: false,
+        });
+      }
+    } else {
+      for (const key of cornerLabels) {
+        rows.push({ key, value: '—', isDefault: false });
+      }
+    }
+
+    const headTextPreview = (headEl: Element, maxLen = 72): string => {
+      const text = headEl.textContent?.replace(/\s+/g, ' ').trim() ?? '';
+      if (!text) return '—';
+      return text.length > maxLen ? `${text.slice(0, maxLen)}…` : text;
+    };
+
+    rows.push({
+      key: 'caption',
+      value: captionEl ? headTextPreview(captionEl) : '—',
+      isDefault: !captionEl,
+    });
+    rows.push({
+      key: 'description',
+      value: descriptionEl ? headTextPreview(descriptionEl) : '—',
+      isDefault: !descriptionEl,
+    });
+    rows.push({
+      key: 'summary',
+      value: summaryEl ? headTextPreview(summaryEl) : '—',
+      isDefault: !summaryEl,
+    });
+    rows.push({
+      key: 'custom',
+      value: customEl ? headTextPreview(customEl) : '—',
+      isDefault: !customEl,
+    });
+
+    return rows;
+  }
+}
diff --git a/core/src/components/page-nav/page-nav.css b/core/src/components/page-nav/page-nav.css
new file mode 100644
index 0000000..5c23ae3
--- /dev/null
+++ b/core/src/components/page-nav/page-nav.css
@@ -0,0 +1,94 @@
+@import '../theme.css';
+
+:host {
+  display: contents;
+}
+nav {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-left: 0.25rem;
+}
+nav::before {
+  content: '';
+  flex-shrink: 0;
+  align-self: center;
+  width: 1px;
+  height: 1.125rem;
+  margin-right: 0.75rem;
+  background: var(--border);
+}
+nav[hidden] {
+  display: none;
+}
+.page-nav-btns {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.page-nav-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.875rem;
+  height: 1.875rem;
+  padding: 0;
+  flex-shrink: 0;
+  appearance: none;
+  border: 1px solid var(--border);
+  background: var(--panel);
+  color: var(--text);
+  border-radius: 0.375rem;
+  font: inherit;
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+.page-nav-btn:hover {
+  border-color: var(--accent);
+}
+.page-nav-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.page-nav-chevron {
+  display: block;
+  width: 0.875rem;
+  height: 0.875rem;
+}
+.page-indicator {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.875rem;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+.page-number-input {
+  appearance: none;
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+  background: var(--panel);
+  color: var(--text);
+  font: inherit;
+  font-size: 0.875rem;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  padding: 0 0.35rem;
+  margin: 0;
+  height: 1.875rem;
+  box-sizing: border-box;
+  width: calc(var(--doclang-page-num-digits, 1) * 1ch + 0.75rem);
+  line-height: 1;
+  cursor: text;
+}
+.page-number-input:hover:not(:disabled) {
+  border-color: var(--accent);
+}
+.page-number-input:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
+}
+.page-number-input:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
diff --git a/core/src/components/page-nav/page-nav.ts b/core/src/components/page-nav/page-nav.ts
new file mode 100644
index 0000000..7f84810
--- /dev/null
+++ b/core/src/components/page-nav/page-nav.ts
@@ -0,0 +1,155 @@
+/** <doclang-page-nav> — page navigation (prev/next buttons + page indicator) */
+
+import { html, PropertyValues } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { unsafeCSS } from 'lit';
+import { ref, createRef } from 'lit/directives/ref.js';
+import type { Ref } from 'lit/directives/ref.js';
+import styles from './page-nav.css?inline';
+import { DoclangPageElement } from '../base/page-element';
+
+@customElement('doclang-page-nav')
+export class DoclangPageNav extends DoclangPageElement {
+  static override styles = unsafeCSS(styles);
+
+  private _inputRef: Ref<HTMLInputElement> = createRef();
+
+  private get _pageCount(): number {
+    return this._docState?.pageCount ?? 1;
+  }
+
+  override render() {
+    const digits = Math.max(1, String(this._pageCount).length);
+    return html`
+      <nav id="page-nav" aria-label="Page navigation">
+        <div class="page-nav-btns">
+          <button
+            type="button"
+            class="page-nav-btn btn-prev"
+            aria-label="Previous page"
+            title="Previous page"
+            ?disabled=${this.page <= 1}
+            @click=${this._onPrev}
+          >
+            <svg
+              class="page-nav-chevron"
+              viewBox="0 0 16 16"
+              width="16"
+              height="16"
+              aria-hidden="true"
+            >
+              <path
+                d="M10.5 3.5 5.5 8l5 4.5"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.75"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ></path>
+            </svg>
+          </button>
+          <button
+            type="button"
+            class="page-nav-btn btn-next"
+            aria-label="Next page"
+            title="Next page"
+            ?disabled=${this.page >= this._pageCount}
+            @click=${this._onNext}
+          >
+            <svg
+              class="page-nav-chevron"
+              viewBox="0 0 16 16"
+              width="16"
+              height="16"
+              aria-hidden="true"
+            >
+              <path
+                d="M5.5 3.5 10.5 8l-5 4.5"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.75"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ></path>
+            </svg>
+          </button>
+        </div>
+        <div class="page-indicator">
+          <span>Page&#xA0;</span>
+          <input
+            ${ref(this._inputRef)}
+            type="text"
+            inputmode="numeric"
+            class="page-number-input"
+            .value=${String(this.page)}
+            style="--doclang-page-num-digits:${digits}"
+            aria-label="Page number"
+            @keydown=${this._onInputKeydown}
+            @blur=${this._onInputBlur}
+            @focus=${(e: FocusEvent) => (e.target as HTMLInputElement).select()}
+          />
+          <span class="page-count">&#xA0;of ${this._pageCount}</span>
+        </div>
+      </nav>
+    `;
+  }
+
+  override updated(changed: PropertyValues): void {
+    super.updated(changed);
+    // Keep the text input in sync whenever the page property changes from
+    // outside (e.g. a `.page=${n}` binding on the parent template).
+    if (changed.has('page')) {
+      this._resetInput();
+    }
+  }
+
+  protected override _renderDocument(): void { /* _docState is @state; re-render is automatic */ }
+  protected override _clearDocument(): void { /* _docState is @state; re-render is automatic */ }
+
+  // ---------------------------------------------------------------------------
+  // Private event handlers
+  // ---------------------------------------------------------------------------
+
+  private _onPrev = (): void => this._emitViewPage(this.page - 1);
+  private _onNext = (): void => this._emitViewPage(this.page + 1);
+
+  private _onInputKeydown = (e: KeyboardEvent): void => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      this._commitInput();
+      (e.target as HTMLInputElement).blur();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      this._resetInput();
+      (e.target as HTMLInputElement).blur();
+    }
+  };
+
+  private _onInputBlur = (): void => this._resetInput();
+
+  private _resetInput(): void {
+    const input = this._inputRef.value;
+    if (input) input.value = String(this.page);
+  }
+
+  private _commitInput(): void {
+    const input = this._inputRef.value;
+    if (!input) return;
+    const n = Number.parseInt(input.value.trim(), 10);
+    if (!Number.isFinite(n)) {
+      this._resetInput();
+      return;
+    }
+    this._emitViewPage(Math.min(Math.max(1, n), this._docState?.pageCount ?? 1));
+  }
+
+  private _emitViewPage(page: number): void {
+    this.dispatchEvent(
+      new CustomEvent('view-page', {
+        bubbles: true,
+        composed: true,
+        detail: { page },
+      })
+    );
+  }
+}
diff --git a/core/src/components/reading-pane/reading-pane.css b/core/src/components/reading-pane/reading-pane.css
new file mode 100644
index 0000000..241694f
--- /dev/null
+++ b/core/src/components/reading-pane/reading-pane.css
@@ -0,0 +1,435 @@
+@import '../theme.css';
+
+:host {
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border);
+  min-height: 0;
+  min-width: 0;
+  background: var(--panel);
+}
+:host([hidden]) {
+  display: none !important;
+}
+:host(.pane-layout-last) {
+  border-right: none;
+}
+.pane-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  height: 2.125rem;
+  padding: 0 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted);
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+}
+.pane-header-title {
+  min-width: 0;
+}
+.pane-settings-toggle {
+  appearance: none;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--muted);
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  transition:
+    color 0.12s ease,
+    background 0.12s ease,
+    border-color 0.12s ease;
+  border-radius: 0.25rem;
+  padding: 0 0.28rem 0 0.4rem;
+  height: 1.25rem;
+  font-size: 0.625rem;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  font: inherit;
+}
+.pane-settings-toggle::after {
+  content: '';
+  flex-shrink: 0;
+  width: 0.26rem;
+  height: 0.26rem;
+  margin-left: 0.22rem;
+  margin-top: -0.1em;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: rotate(45deg);
+  opacity: 0.65;
+}
+.pane-settings-toggle:hover {
+  color: var(--text);
+  background: color-mix(in srgb, var(--text) 5%, transparent);
+}
+.pane-settings-toggle[aria-expanded='true'] {
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
+  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
+}
+.pane-settings-toggle:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+.pane-reading-layout {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.pane-body {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  padding: 1rem;
+}
+.settings-option {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+  user-select: none;
+}
+.settings-subgroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-left: 0.85rem;
+}
+.settings-option-sub {
+  font-size: 0.8125rem;
+  color: var(--muted);
+}
+.settings-option input {
+  margin: 0.15rem 0 0;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.rendered-doc {
+  max-width: 42rem;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+.rendered-el-virtual-text > p,
+.rendered-el-virtual-text > div {
+  margin: 0;
+  display: inline;
+}
+.rendered-doc li > .rendered-el-virtual-text {
+  display: inline;
+}
+.rendered-doc li > .rendered-el-virtual-text > p,
+.rendered-doc li > .rendered-el-virtual-text > div {
+  display: inline;
+  margin: 0;
+}
+.rendered-table .rendered-el-virtual-text {
+  display: inline;
+  margin: 0;
+}
+.rendered-table .rendered-el-virtual-text > p,
+.rendered-table .rendered-el-virtual-text > div {
+  display: inline;
+  margin: 0;
+}
+.rendered-el-virtual-text > div > .rendered-el {
+  display: block;
+  margin: 0.25rem 0;
+}
+.rendered-el {
+  cursor: pointer;
+  border-radius: 0.25rem;
+}
+.rendered-el:hover {
+  outline: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
+}
+.rendered-el.selected {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  background: color-mix(in srgb, var(--accent) 8%, transparent);
+}
+.rendered-doc p {
+  margin: 0 0 0.75rem;
+}
+.rendered-doc h1,
+.rendered-doc h2,
+.rendered-doc h3,
+.rendered-doc h4,
+.rendered-doc h5,
+.rendered-doc h6 {
+  margin: 1.25rem 0 0.5rem;
+  line-height: 1.25;
+}
+.rendered-doc h1:first-child,
+.rendered-doc h2:first-child,
+.rendered-doc h3:first-child {
+  margin-top: 0;
+}
+.rendered-doc ul,
+.rendered-doc ol {
+  margin: 0 0 0.75rem;
+  padding-left: 1.5rem;
+}
+.rendered-doc li {
+  margin: 0.25rem 0;
+}
+.rendered-doc li > .rendered-el > p:first-child,
+.rendered-doc li > .rendered-el > h1:first-child,
+.rendered-doc li > .rendered-el > h2:first-child,
+.rendered-doc li > .rendered-el > h3:first-child,
+.rendered-doc li > .rendered-el > h4:first-child,
+.rendered-doc li > .rendered-el > h5:first-child,
+.rendered-doc li > .rendered-el > h6:first-child {
+  margin-top: 0;
+}
+.rendered-marker {
+  margin-right: 0.35rem;
+}
+.rendered-handwriting {
+  font-family: 'Segoe Print', 'Bradley Hand', cursive;
+}
+.rendered-doc pre {
+  margin: 0 0 0.75rem;
+  padding: 0.75rem 1rem;
+  overflow-x: auto;
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  background: var(--placeholder-bg);
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+}
+.rendered-doc code {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+}
+.rendered-doc pre code {
+  font-size: inherit;
+  background: none;
+  border: none;
+  padding: 0;
+}
+.rendered-code-label {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.rendered-formula {
+  display: block;
+  margin: 0 0 0.75rem;
+  padding: 0.5rem 0.75rem;
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  background: var(--placeholder-bg);
+  border-left: 3px solid var(--border);
+  overflow-x: auto;
+}
+.rendered-formula-inline {
+  display: inline;
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+}
+.rendered-doc figure {
+  margin: 0 0 0.75rem;
+}
+.rendered-doc figure img {
+  max-width: 100%;
+  height: auto;
+  border: 1px solid var(--border);
+  border-radius: 0.25rem;
+}
+.rendered-doc figure img.rendered-picture-unavailable {
+  display: inline-block;
+  min-width: 3rem;
+  min-height: 2.5rem;
+  object-fit: contain;
+  vertical-align: middle;
+}
+.rendered-doc figcaption {
+  margin-top: 0.35rem;
+  font-size: 0.875rem;
+  color: var(--muted);
+}
+.rendered-picture-contents {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+  background: var(--placeholder-bg);
+}
+.rendered-picture-contents summary {
+  padding: 0.4rem 0.65rem;
+  cursor: pointer;
+  font-weight: 600;
+  color: var(--muted);
+  user-select: none;
+}
+.rendered-picture-contents summary:hover {
+  color: var(--text);
+}
+.rendered-picture-contents-body {
+  padding: 0.5rem 0.75rem 0.75rem;
+  border-top: 1px solid var(--border);
+}
+.rendered-picture-contents-body .rendered-el > p {
+  margin-bottom: 0.35rem;
+  font-size: 0.8125rem;
+}
+.rendered-table {
+  width: 100%;
+  margin: 0 0 0.75rem;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+.rendered-table caption {
+  caption-side: top;
+  margin-bottom: 0.35rem;
+  font-size: 0.875rem;
+  color: var(--muted);
+  text-align: left;
+}
+.rendered-table th,
+.rendered-table td {
+  border: 1px solid var(--border);
+  padding: 0.35rem 0.5rem;
+  vertical-align: top;
+  text-align: left;
+}
+.rendered-table th {
+  background: color-mix(in srgb, var(--border) 35%, var(--panel));
+  font-weight: 600;
+}
+.rendered-table .rendered-table-cell-text {
+  display: inline;
+}
+.rendered-table .rendered-el {
+  margin: 0;
+}
+.rendered-table .rendered-el-virtual-text > p,
+.rendered-table .rendered-el-virtual-text > div {
+  margin: 0;
+}
+.rendered-table .rendered-table {
+  margin: 0.25rem 0 0;
+}
+.rendered-page-header,
+.rendered-page-footer {
+  font-size: 0.875rem;
+  color: var(--muted);
+}
+.rendered-page-header {
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--border);
+}
+.rendered-page-footer {
+  margin-top: 1rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--border);
+}
+.pane-body:not(.show-reading-furniture) .rendered-el[data-doclang-layer='furniture'] {
+  display: none;
+}
+.pane-body:not(.show-reading-background) .rendered-el[data-doclang-layer='background'] {
+  display: none;
+}
+.rendered-el[data-doclang-layer='furniture'],
+.rendered-el[data-doclang-layer='background'] {
+  position: relative;
+}
+.rendered-el[data-doclang-layer='furniture']::before,
+.rendered-el[data-doclang-layer='background']::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background: repeating-linear-gradient(
+    -45deg,
+    transparent 0 10px,
+    color-mix(in srgb, var(--muted) 6%, transparent) 10px 16px
+  );
+}
+.rendered-el.rendered-footnote > aside {
+  font-size: 0.875rem;
+  color: var(--muted);
+  border-left: 2px solid var(--border);
+  padding-left: 0.75rem;
+  margin: 0 0 0.75rem;
+}
+.rendered-unsupported {
+  margin: 0 0 0.75rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  font-style: italic;
+  color: var(--muted);
+  background: var(--placeholder-bg);
+  border: 1px dashed var(--border);
+  border-radius: 0.375rem;
+}
+.rendered-field-region {
+  margin: 0 0 1rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  background: color-mix(in srgb, var(--kind-field) 6%, transparent);
+}
+.rendered-field-region > .rendered-field-heading:first-child,
+.rendered-field-region
+  > .rendered-el.rendered-field_heading
+  > .rendered-field-heading:first-child {
+  margin-top: 0;
+}
+.rendered-field-item {
+  margin: 0.5rem 0;
+}
+.rendered-field-item > .rendered-el.rendered-field-key,
+.rendered-field-key {
+  font-weight: 600;
+}
+.rendered-field-item > .rendered-el.rendered-field-key + .rendered-el,
+.rendered-field-item > .rendered-el.rendered-field-key + .rendered-el-virtual-text {
+  margin-top: 0.15rem;
+}
+.rendered-field-value-fillable .rendered-field-fillable-slot {
+  display: inline-block;
+  min-width: 6rem;
+  min-height: 1.25em;
+  border-bottom: 1px solid color-mix(in srgb, var(--text) 55%, transparent);
+  vertical-align: bottom;
+}
+.rendered-field-hint {
+  font-size: 0.85em;
+  color: var(--muted);
+  font-style: italic;
+}
+.rendered-field-heading {
+  color: var(--text);
+}
+.rendered-checkbox {
+  margin: 0 0.25rem 0 0;
+  vertical-align: middle;
+  accent-color: var(--kind-field);
+}
+.rendered-checkbox-wrap {
+  display: inline;
+}
diff --git a/core/src/components/reading-pane/reading-pane.ts b/core/src/components/reading-pane/reading-pane.ts
new file mode 100644
index 0000000..d833229
--- /dev/null
+++ b/core/src/components/reading-pane/reading-pane.ts
@@ -0,0 +1,1423 @@
+/** <doclang-reading-pane> — reading/rendered view with layers settings panel */
+
+import { html, nothing, type PropertyValues } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { unsafeCSS } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { ref, createRef } from 'lit/directives/ref.js';
+import type { Ref } from 'lit/directives/ref.js';
+import { DoclangPageElement } from '../base/page-element';
+import { PageController } from '../base/page-controller';
+import styles from './reading-pane.css?inline';
+import '../settings-panel/settings-panel';
+import type { DoclangSettingsPanel } from '../settings-panel/settings-panel';
+import { segmentHasMarkup, assignElementIds, NO_MARKUP } from '../../doclang/document';
+import {
+  HEAD_TAGS,
+  CELL_SPAN_TAGS,
+  isTextLikeNode,
+  isWhitespaceOnlyText,
+  localName,
+  childElements,
+  isCellToken,
+  headingLevel,
+  parseElementHeadAt,
+  skipElementHeadNodes,
+  skipContainerLevelHead,
+  skipUntilCellBoundary,
+  skipOtslContainerHead,
+  elementLayer,
+  elementThreadId,
+  normalizeArchivePath,
+  isSemanticElement,
+} from '../../doclang/dom';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface RenderCtx {
+  inline: boolean;
+  trimLeading?: boolean;
+}
+
+interface OtslCell {
+  kind: string;
+  token: Element;
+  contentNodes: Node[];
+  colspan: number;
+  rowspan: number;
+  covered?: boolean;
+}
+
+interface ParsedOtslCell {
+  kind: string;
+  token: Element;
+  contentNodes: Node[];
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const RENDER_BLOCK_TAGS = new Set([
+  'text',
+  'heading',
+  'field_heading',
+  'footnote',
+  'page_header',
+  'page_footer',
+  'list',
+  'code',
+  'formula',
+  'picture',
+  'group',
+  'field_region',
+  'field_item',
+  'table',
+  'index',
+  'tabular',
+]);
+const RENDER_FORMAT_TAGS = new Set([
+  'bold',
+  'italic',
+  'underline',
+  'strikethrough',
+  'superscript',
+  'subscript',
+  'handwriting',
+  'rtl',
+  'content',
+]);
+const FORMAT_HTML_TAG: Record<string, string> = {
+  bold: 'strong',
+  italic: 'em',
+  underline: 'u',
+  strikethrough: 's',
+  superscript: 'sup',
+  subscript: 'sub',
+};
+const PICTURE_UNAVAILABLE_ALT = 'Picture asset not available';
+const INVALID_PICTURE_SRC = 'data:image/png;base64,NOT_A_VALID_IMAGE';
+/** Allow small embedded raster data URIs only; remote/blob/other schemes are rejected. */
+const SAFE_DATA_IMAGE_RE = /^data:image\/(png|jpe?g|webp|gif);base64,/i;
+const MAX_DATA_IMAGE_URI_LENGTH = 2 * 1024 * 1024; // 2 MiB
+
+// ---------------------------------------------------------------------------
+// Rendering helpers
+// ---------------------------------------------------------------------------
+
+function applyElementLayerAttr(sourceEl: Element, domEl: HTMLElement): void {
+  domEl.setAttribute('data-doclang-layer', elementLayer(sourceEl));
+}
+
+function resolveArchiveUri(
+  uri: string | null | undefined,
+  assetUrls: Map<string, string> | undefined
+): string | null {
+  if (!uri) return null;
+  const trimmed = uri.trim();
+  if (!trimmed) return null;
+
+  if (SAFE_DATA_IMAGE_RE.test(trimmed)) {
+    return trimmed.length <= MAX_DATA_IMAGE_URI_LENGTH ? trimmed : null;
+  }
+  // Reject any other scheme (http, https, blob, javascript, …) and protocol-relative URLs.
+  if (/^[a-z][a-z0-9+.-]*:/i.test(trimmed) || trimmed.startsWith('//')) return null;
+
+  return assetUrls?.get(normalizeArchivePath(trimmed)) ?? null;
+}
+
+function markPictureUnavailable(img: HTMLImageElement): void {
+  img.classList.add('rendered-picture-unavailable');
+  img.alt = '\u00A0';
+  img.setAttribute('aria-label', PICTURE_UNAVAILABLE_ALT);
+}
+
+function appendPictureFigureImage(
+  figure: HTMLElement,
+  uri: string | null,
+  captionEl: Element | null,
+  elementIds: Map<Element, string>,
+  assetUrls: Map<string, string> | undefined
+): void {
+  const img = document.createElement('img');
+  figure.appendChild(img);
+
+  const resolved = uri ? resolveArchiveUri(uri, assetUrls) : null;
+  if (resolved) {
+    img.alt = '';
+    img.src = resolved;
+    img.addEventListener('error', () => markPictureUnavailable(img), { once: true });
+  } else {
+    markPictureUnavailable(img);
+    img.src = INVALID_PICTURE_SRC;
+  }
+
+  if (captionEl) {
+    figure.appendChild(
+      renderEmbeddedCaption(captionEl, elementIds, 'figcaption', assetUrls)
+    );
+  }
+}
+
+function readCaptionElement(el: Element): Element | null {
+  return childElements(el).find(c => localName(c) === 'caption') ?? null;
+}
+
+function renderEmbeddedCaption(
+  captionEl: Element,
+  elementIds: Map<Element, string>,
+  tagName: string,
+  assetUrls: Map<string, string> | undefined
+): HTMLElement {
+  const node = document.createElement(tagName);
+  node.classList.add('rendered-el', 'rendered-caption');
+  const elementId = elementIds.get(captionEl);
+  if (elementId) node.setAttribute('data-element-id', elementId);
+  appendRenderedBody(node, captionEl, elementIds, { inline: true }, assetUrls);
+  return node;
+}
+
+function wrapRendered(
+  el: Element,
+  node: HTMLElement,
+  elementId: string | undefined,
+  extraClass?: string
+): HTMLElement {
+  const tag = localName(el);
+  const wrap = document.createElement('div');
+  wrap.className = `rendered-el rendered-${tag}${extraClass ? ` ${extraClass}` : ''}`;
+  if (elementId) wrap.setAttribute('data-element-id', elementId);
+  applyElementLayerAttr(el, wrap);
+  wrap.appendChild(node);
+  return wrap;
+}
+
+function appendRenderedBody(
+  parent: HTMLElement,
+  el: Element,
+  elementIds: Map<Element, string>,
+  ctx: RenderCtx,
+  assetUrls?: Map<string, string>
+): void {
+  const nodes = [...el.childNodes];
+  let i = skipElementHeadNodes(nodes, 0);
+  while (i < nodes.length) {
+    appendRenderedNode(parent, nodes[i]!, elementIds, ctx, assetUrls);
+    i += 1;
+  }
+}
+
+function appendRenderedBodyBlocks(
+  parent: HTMLElement,
+  el: Element,
+  elementIds: Map<Element, string>,
+  assetUrls: Map<string, string> | undefined
+): void {
+  const nodes = [...el.childNodes];
+  let i = skipElementHeadNodes(nodes, 0);
+  while (i < nodes.length) {
+    const node = nodes[i]!;
+    if (
+      node.nodeType === Node.ELEMENT_NODE &&
+      RENDER_BLOCK_TAGS.has(localName(node as Element))
+    ) {
+      const rendered = renderBlockElement(
+        node as Element,
+        elementIds,
+        { inline: false },
+        assetUrls
+      );
+      if (rendered) parent.appendChild(rendered);
+    } else {
+      appendRenderedNode(parent, node, elementIds, { inline: false }, assetUrls);
+    }
+    i += 1;
+  }
+}
+
+function renderMarkerElement(
+  el: Element,
+  elementIds: Map<Element, string>,
+  ctx: RenderCtx,
+  assetUrls: Map<string, string> | undefined
+): HTMLElement {
+  const marker = document.createElement('span');
+  marker.className = 'rendered-marker rendered-el';
+  const elementId = elementIds.get(el);
+  if (elementId) marker.setAttribute('data-element-id', elementId);
+  appendRenderedBody(marker, el, elementIds, ctx, assetUrls);
+  return marker;
+}
+
+function renderCheckboxElement(
+  el: Element,
+  elementIds: Map<Element, string>
+): HTMLElement {
+  const cb = document.createElement('input');
+  cb.type = 'checkbox';
+  cb.disabled = true;
+  cb.checked = (el.getAttribute('class') ?? 'unselected') === 'selected';
+  cb.className = 'rendered-checkbox';
+
+  const wrap = document.createElement('span');
+  wrap.className = 'rendered-checkbox-wrap rendered-el';
+  const elementId = elementIds.get(el);
+  if (elementId) wrap.setAttribute('data-element-id', elementId);
+  applyElementLayerAttr(el, wrap);
+  wrap.appendChild(cb);
+  return wrap;
+}
+
+function renderFieldKeyElement(
+  el: Element,
+  elementIds: Map<Element, string>,
+  ctx: RenderCtx,
+  assetUrls: Map<string, string> | undefined
+): HTMLElement {
+  const node = document.createElement('span');
+  node.className = 'rendered-field-key rendered-el';
+  const elementId = elementIds.get(el);
+  if (elementId) node.setAttribute('data-element-id', elementId);
+  applyElementLayerAttr(el, node);
+  appendRenderedBody(node, el, elementIds, { ...ctx, inline: true }, assetUrls);
+  return node;
+}
+
+function renderFieldValueElement(
+  el: Element,
+  elementIds: Map<Element, string>,
+  ctx: RenderCtx,
+  assetUrls: Map<string, string> | undefined
+): HTMLElement {
+  const valueClass = el.getAttribute('class') ?? 'read_only';
+  const node = document.createElement('span');
+  node.className = `rendered-field-value rendered-field-value-${valueClass} rendered-el`;
+  const elementId = elementIds.get(el);
+  if (elementId) node.setAttribute('data-element-id', elementId);
+  applyElementLayerAttr(el, node);
+  appendRenderedBody(node, el, elementIds, { ...ctx, inline: true }, assetUrls);
+  if (
+    valueClass === 'fillable' &&
+    !node.textContent?.trim() &&
+    !node.querySelector('.rendered-checkbox-wrap, img, .rendered-marker')
+  ) {
+    const slot = document.createElement('span');
+    slot.className = 'rendered-field-fillable-slot';
+    slot.setAttribute('aria-hidden', 'true');
+    node.appendChild(slot);
+  }
+  return node;
+}
+
+function renderFieldHintElement(
+  el: Element,
+  elementIds: Map<Element, string>,
+  ctx: RenderCtx,
+  assetUrls: Map<string, string> | undefined
+): HTMLElement {
+  const node = document.createElement('span');
+  node.className = 'rendered-field-hint rendered-el';
+  const elementId = elementIds.get(el);
+  if (elementId) node.setAttribute('data-element-id', elementId);
+  applyElementLayerAttr(el, node);
+  appendRenderedBody(node, el, elementIds, { ...ctx, inline: true }, assetUrls);
+  return node;
+}
+
+function renderFormatElement(
+  el: Element,
+  elementIds: Map<Element, string>,
+  ctx: RenderCtx,
+  assetUrls: Map<string, string> | undefined
+): HTMLElement {
+  const tag = localName(el);
+  if (tag === 'content') {
+    const span = document.createElement('span');
+    span.textContent = el.textContent ?? '';
+    return span;
+  }
+
+  let node: HTMLElement;
+  if (tag === 'handwriting') {
+    node = document.createElement('span');
+    node.className = 'rendered-handwriting';
+  } else if (tag === 'rtl') {
+    node = document.createElement('bdi');
+    node.setAttribute('dir', 'rtl');
+  } else {
+    node = document.createElement(FORMAT_HTML_TAG[tag] ?? 'span');
+  }
+
+  appendRenderedBody(node, el, elementIds, ctx, assetUrls);
+  return node;
+}
+
+function renderCode(
+  el: Element,
+  elementIds: Map<Element, string>,
+  ctx: RenderCtx,
+  assetUrls: Map<string, string> | undefined
+): HTMLElement {
+  const labelEl = childElements(el).find(c => localName(c) === 'label');
+  const labelValue = labelEl?.getAttribute('value');
+
+  const code = document.createElement('code');
+  appendRenderedBody(code, el, elementIds, { inline: ctx.inline }, assetUrls);
+
+  if (ctx.inline) {
+    code.classList.add('rendered-el');
+    const id = elementIds.get(el);
+    if (id) code.setAttribute('data-element-id', id);
+    return code;
+  }
+
+  const pre = document.createElement('pre');
+  if (labelValue && labelValue !== 'undefined') {
+    const label = document.createElement('span');
+    label.className = 'rendered-code-label';
+    label.textContent = labelValue;
+    pre.appendChild(label);
+  }
+  pre.appendChild(code);
+  return wrapRendered(el, pre, elementIds.get(el));
+}
+
+function renderFormula(
+  el: Element,
+  elementIds: Map<Element, string>,
+  ctx: RenderCtx,
+  assetUrls: Map<string, string> | undefined
+): HTMLElement {
+  const span = document.createElement('span');
+  span.className = ctx.inline ? 'rendered-formula-inline' : 'rendered-formula';
+  appendRenderedBody(span, el, elementIds, { inline: true }, assetUrls);
+  if (ctx.inline) {
+    span.classList.add('rendered-el');
+    const id = elementIds.get(el);
+    if (id) span.setAttribute('data-element-id', id);
+    return span;
+  }
+  return wrapRendered(el, span, elementIds.get(el));
+}
+
+function renderPicture(
+  el: Element,
+  elementIds: Map<Element, string>,
+  assetUrls: Map<string, string> | undefined
+): HTMLElement {
+  const figure = document.createElement('figure');
+  const captionEl = readCaptionElement(el);
+  const srcEl = childElements(el).find(c => localName(c) === 'src') ?? null;
+  const uri = srcEl?.getAttribute('uri')?.trim() || null;
+
+  appendPictureFigureImage(figure, uri, captionEl, elementIds, assetUrls);
+
+  const nodes = [...el.childNodes];
+  let i = skipElementHeadNodes(nodes, 0);
+  while (i < nodes.length) {
+    const node = nodes[i]!;
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      i += 1;
+      continue;
+    }
+    const tag = localName(node as Element);
+    if (tag === 'src') {
+      i += 1;
+      continue;
+    }
+    if (tag === 'tabular') {
+      const rendered = renderOtslContainer(node as Element, elementIds, assetUrls);
+      if (rendered) figure.appendChild(rendered);
+      i += 1;
+      continue;
+    }
+    break;
+  }
+
+  const bodyInner = document.createElement('div');
+  bodyInner.className = 'rendered-picture-contents-body';
+  appendPictureBodyContent(bodyInner, nodes, i, elementIds, assetUrls);
+  if (bodyInner.textContent?.trim()) {
+    const details = document.createElement('details');
+    details.className = 'rendered-picture-contents';
+    const summary = document.createElement('summary');
+    summary.textContent = 'Picture contents';
+    details.appendChild(summary);
+    details.appendChild(bodyInner);
+    figure.appendChild(details);
+  }
+
+  return wrapRendered(el, figure, elementIds.get(el));
+}
+
+function appendPictureBodyContent(
+  container: HTMLElement,
+  nodes: ChildNode[],
+  startIdx: number,
+  elementIds: Map<Element, string>,
+  assetUrls: Map<string, string> | undefined
+): void {
+  let i = startIdx;
+  while (i < nodes.length) {
+    const node = nodes[i]!;
+    if (
+      node.nodeType === Node.ELEMENT_NODE &&
+      RENDER_BLOCK_TAGS.has(localName(node as Element))
+    ) {
+      const rendered = renderBlockElement(
+        node as Element,
+        elementIds,
+        { inline: false },
+        assetUrls
+      );
+      if (rendered) container.appendChild(rendered);
+    } else {
+      appendRenderedNode(container, node, elementIds, { inline: false }, assetUrls);
+    }
+    i += 1;
+  }
+}
+
+function renderVirtualTextBlock(
+  hostEl: Element,
+  contentNodes: ChildNode[],
+  elementIds: Map<Element, string>,
+  assetUrls: Map<string, string> | undefined
+): HTMLElement {
+  const hasBlock = contentNodes.some(
+    n =>
+      n.nodeType === Node.ELEMENT_NODE && RENDER_BLOCK_TAGS.has(localName(n as Element))
+  );
+  const inner = document.createElement(hasBlock ? 'div' : 'p');
+  for (const node of contentNodes) {
+    if (
+      node.nodeType === Node.ELEMENT_NODE &&
+      RENDER_BLOCK_TAGS.has(localName(node as Element))
+    ) {
+      const rendered = renderBlockElement(
+        node as Element,
+        elementIds,
+        { inline: false },
+        assetUrls
+      );
+      if (rendered) inner.appendChild(rendered);
+    } else {
+      appendRenderedNode(inner, node, elementIds, { inline: true }, assetUrls);
+    }
+  }
+  const wrap = document.createElement('div');
+  wrap.className = 'rendered-el rendered-text rendered-el-virtual-text';
+  const elementId = elementIds.get(hostEl);
+  if (elementId) wrap.setAttribute('data-element-id', elementId);
+  applyElementLayerAttr(hostEl, wrap);
+  wrap.appendChild(inner);
+  return wrap;
+}
+
+function sliceHasMarkupContent(nodes: ArrayLike<ChildNode>): boolean {
+  for (let i = 0; i < nodes.length; i += 1) {
+    const node = nodes[i];
+    if (!node) continue;
+    if (isTextLikeNode(node) && !isWhitespaceOnlyText(node)) return true;
+    if (node.nodeType === Node.ELEMENT_NODE) return true;
+  }
+  return false;
+}
+
+function isVirtualTextSkippableNode(node: ChildNode): boolean {
+  if (isWhitespaceOnlyText(node)) return true;
+  if (node.nodeType !== Node.ELEMENT_NODE) return false;
+  const tag = localName(node as Element);
+  return tag === 'location' || HEAD_TAGS.has(tag);
+}
+
+function shouldWrapVirtualText(contentNodes: ChildNode[]): boolean {
+  if (!sliceHasMarkupContent(contentNodes)) return false;
+  for (const node of contentNodes) {
+    if (isVirtualTextSkippableNode(node)) continue;
+    if (isTextLikeNode(node)) return true;
+    if (node.nodeType === Node.ELEMENT_NODE && !isSemanticElement(node as Element))
+      return true;
+  }
+  return false;
+}
+
+function appendRenderedSliceContent(
+  container: HTMLElement,
+  hostEl: Element,
+  contentNodes: ChildNode[],
+  elementIds: Map<Element, string>,
+  assetUrls: Map<string, string> | undefined
+): void {
+  if (!sliceHasMarkupContent(contentNodes)) return;
+  if (shouldWrapVirtualText(contentNodes)) {
+    container.appendChild(
+      renderVirtualTextBlock(hostEl, contentNodes, elementIds, assetUrls)
+    );
+    return;
+  }
+  for (const node of contentNodes) {
+    if (isVirtualTextSkippableNode(node)) continue;
+    if (
+      node.nodeType === Node.ELEMENT_NODE &&
+      RENDER_BLOCK_TAGS.has(localName(node as Element))
+    ) {
+      const rendered = renderBlockElement(
+        node as Element,
+        elementIds,
+        { inline: false },
+        assetUrls
+      );
+      if (rendered) container.appendChild(rendered);
+    } else {
+      appendRenderedNode(container, node, elementIds, { inline: true }, assetUrls);
+    }
+  }
+}
+
+function appendListItemsFromElement(
+  list: HTMLElement,
+  el: Element,
+  elementIds: Map<Element, string>,
+  assetUrls: Map<string, string> | undefined
+): void {
+  const nodes = [...el.childNodes];
+  let i = skipContainerLevelHead(nodes, 0);
+
+  while (i < nodes.length) {
+    const node = nodes[i]!;
+    if (node.nodeType !== Node.ELEMENT_NODE || localName(node as Element) !== 'ldiv') {
+      i += 1;
+      continue;
+    }
+
+    const ldiv = node as Element;
+    i += 1;
+    const li = document.createElement('li');
+
+    for (const child of childElements(ldiv)) {
+      const childTag = localName(child);
+      if (childTag === 'marker') {
+        li.appendChild(
+          renderMarkerElement(child, elementIds, { inline: true }, assetUrls)
+        );
+      } else if (childTag === 'checkbox') {
+        li.appendChild(renderCheckboxElement(child, elementIds));
+      }
+    }
+
+    const contentStart = i;
+    const head = parseElementHeadAt(nodes, i);
+    if (head) i = head.nextIndex;
+
+    while (i < nodes.length) {
+      const contentNode = nodes[i]!;
+      if (
+        contentNode.nodeType === Node.ELEMENT_NODE &&
+        localName(contentNode as Element) === 'ldiv'
+      )
+        break;
+      i += 1;
+    }
+
+    const contentNodes = nodes.slice(contentStart, i);
+    appendRenderedSliceContent(li, ldiv, contentNodes, elementIds, assetUrls);
+
+    list.appendChild(li);
+  }
+}
+
+function renderList(
+  el: Element,
+  elementIds: Map<Element, string>,
+  assetUrls: Map<string, string> | undefined
+): HTMLElement {
+  const listClass = el.getAttribute('class') ?? 'unordered';
+  const list = document.createElement(listClass === 'ordered' ? 'ol' : 'ul');
+  appendListItemsFromElement(list, el, elementIds, assetUrls);
+  return wrapRendered(el, list, elementIds.get(el));
+}
+
+function isHeaderCellKind(kind: string): boolean {
+  return kind === 'ched' || kind === 'rhed' || kind === 'corn' || kind === 'srow';
+}
+
+function parseOtslRows(container: Element): ParsedOtslCell[][] {
+  const nodes = [...container.childNodes];
+  let i = skipOtslContainerHead(nodes, 0);
+  const rows: ParsedOtslCell[][] = [];
+  let currentRow: ParsedOtslCell[] = [];
+
+  while (i < nodes.length) {
+    const node = nodes[i]!;
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      i += 1;
+      continue;
+    }
+    const tag = localName(node as Element);
+    if (tag === 'nl') {
+      rows.push(currentRow);
+      currentRow = [];
+      i += 1;
+      continue;
+    }
+    if (!isCellToken(tag)) {
+      i += 1;
+      continue;
+    }
+
+    if (CELL_SPAN_TAGS.has(tag)) {
+      currentRow.push({ kind: tag, token: node as Element, contentNodes: [] });
+      i += 1;
+      continue;
+    }
+
+    i += 1;
+    const head = parseElementHeadAt(nodes, i);
+    if (head) i = head.nextIndex;
+    const contentStart = i;
+    i = skipUntilCellBoundary(nodes, i);
+    currentRow.push({
+      kind: tag,
+      token: node as Element,
+      contentNodes: nodes.slice(contentStart, i),
+    });
+  }
+
+  if (currentRow.length) rows.push(currentRow);
+  return rows;
+}
+
+function findVerticalCellOrigin(
+  grid: (OtslCell | undefined)[][],
+  row: number,
+  col: number
+): { cell: OtslCell; row: number; col: number } | null {
+  for (let r = row - 1; r >= 0; r -= 1) {
+    const cell = grid[r]?.[col];
+    if (!cell || cell.covered) continue;
+    return { cell, row: r, col };
+  }
+  return null;
+}
+
+function findHorizontalCellOrigin(
+  grid: (OtslCell | undefined)[][],
+  row: number,
+  col: number
+): { cell: OtslCell; row: number; col: number } | null {
+  for (let c = col - 1; c >= 0; c -= 1) {
+    const cell = grid[row]?.[c];
+    if (!cell || cell.covered) continue;
+    return { cell, row, col: c };
+  }
+  return null;
+}
+
+function nextFreeColumn(
+  grid: (OtslCell | undefined)[][],
+  row: number,
+  col: number
+): number {
+  let c = col;
+  while (grid[row]?.[c]?.covered) c += 1;
+  return c;
+}
+
+function buildOtslGrid(rows: ParsedOtslCell[][]): (OtslCell | undefined)[][] {
+  const grid: (OtslCell | undefined)[][] = [];
+
+  for (let rowIdx = 0; rowIdx < rows.length; rowIdx += 1) {
+    if (!grid[rowIdx]) grid[rowIdx] = [];
+    let col = 0;
+
+    for (const parsed of rows[rowIdx]!) {
+      col = nextFreeColumn(grid, rowIdx, col);
+
+      if (parsed.kind === 'lcel') {
+        const origin = findHorizontalCellOrigin(grid, rowIdx, col);
+        if (origin) origin.cell.colspan += 1;
+        grid[rowIdx]![col] = {
+          kind: 'lcel',
+          token: parsed.token,
+          contentNodes: [],
+          colspan: 0,
+          rowspan: 0,
+          covered: true,
+        };
+        col += 1;
+        continue;
+      }
+
+      if (parsed.kind === 'ucel') {
+        const origin = findVerticalCellOrigin(grid, rowIdx, col);
+        if (origin) origin.cell.rowspan += 1;
+        grid[rowIdx]![col] = {
+          kind: 'ucel',
+          token: parsed.token,
+          contentNodes: [],
+          colspan: 0,
+          rowspan: 0,
+          covered: true,
+        };
+        col += 1;
+        continue;
+      }
+
+      if (parsed.kind === 'xcel') {
+        const vOrigin = findVerticalCellOrigin(grid, rowIdx, col);
+        const hOrigin = findHorizontalCellOrigin(grid, rowIdx, col);
+        if (vOrigin && hOrigin && vOrigin.cell === hOrigin.cell) {
+          vOrigin.cell.rowspan += 1;
+          vOrigin.cell.colspan += 1;
+        } else {
+          if (vOrigin) vOrigin.cell.rowspan += 1;
+          if (hOrigin) hOrigin.cell.colspan += 1;
+        }
+        grid[rowIdx]![col] = {
+          kind: 'xcel',
+          token: parsed.token,
+          contentNodes: [],
+          colspan: 0,
+          rowspan: 0,
+          covered: true,
+        };
+        col += 1;
+        continue;
+      }
+
+      grid[rowIdx]![col] = {
+        kind: parsed.kind,
+        token: parsed.token,
+        contentNodes: parsed.contentNodes,
+        colspan: 1,
+        rowspan: 1,
+        covered: false,
+      };
+      col += 1;
+    }
+  }
+
+  return grid;
+}
+
+function renderOtslContainer(
+  el: Element,
+  elementIds: Map<Element, string>,
+  assetUrls: Map<string, string> | undefined
+): HTMLElement {
+  const table = document.createElement('table');
+  table.className = 'rendered-table';
+
+  const captionEl = readCaptionElement(el);
+  if (captionEl) {
+    table.appendChild(
+      renderEmbeddedCaption(captionEl, elementIds, 'caption', assetUrls)
+    );
+  }
+
+  const grid = buildOtslGrid(parseOtslRows(el));
+  const tbody = document.createElement('tbody');
+
+  for (const row of grid) {
+    const tr = document.createElement('tr');
+    for (const cell of row ?? []) {
+      if (!cell || cell.covered) continue;
+      const cellTag = isHeaderCellKind(cell.kind) ? 'th' : 'td';
+      const td = document.createElement(cellTag);
+      if (cell.colspan > 1) td.colSpan = cell.colspan;
+      if (cell.rowspan > 1) td.rowSpan = cell.rowspan;
+      appendRenderedSliceContent(
+        td,
+        cell.token,
+        cell.contentNodes as ChildNode[],
+        elementIds,
+        assetUrls
+      );
+      tr.appendChild(td);
+    }
+    if (tr.childNodes.length) tbody.appendChild(tr);
+  }
+
+  if (tbody.childNodes.length) table.appendChild(tbody);
+  return wrapRendered(el, table, elementIds.get(el));
+}
+
+function renderUnsupported(el: Element, elementIds: Map<Element, string>): HTMLElement {
+  const stub = document.createElement('div');
+  stub.className = 'rendered-unsupported';
+  stub.textContent = `<${localName(el)}> — not yet rendered`;
+  return wrapRendered(el, stub, elementIds.get(el));
+}
+
+function renderBlockElement(
+  el: Element,
+  elementIds: Map<Element, string>,
+  ctx: RenderCtx,
+  assetUrls?: Map<string, string>
+): HTMLElement | null {
+  const tag = localName(el);
+  const elementId = elementIds.get(el);
+
+  switch (tag) {
+    case 'text': {
+      const p = document.createElement('p');
+      appendRenderedBody(p, el, elementIds, { inline: true }, assetUrls);
+      return wrapRendered(el, p, elementId);
+    }
+    case 'heading': {
+      const h = document.createElement(`h${headingLevel(el)}`);
+      appendRenderedBody(h, el, elementIds, { inline: true }, assetUrls);
+      return wrapRendered(el, h, elementId);
+    }
+    case 'field_heading': {
+      const h = document.createElement(`h${headingLevel(el)}`);
+      h.className = 'rendered-field-heading';
+      appendRenderedBody(h, el, elementIds, { inline: true }, assetUrls);
+      return wrapRendered(el, h, elementId);
+    }
+    case 'footnote': {
+      const aside = document.createElement('aside');
+      appendRenderedBody(aside, el, elementIds, { inline: false }, assetUrls);
+      return wrapRendered(el, aside, elementId);
+    }
+    case 'page_header': {
+      const header = document.createElement('header');
+      header.className = 'rendered-page-header';
+      appendRenderedBody(header, el, elementIds, { inline: true }, assetUrls);
+      return wrapRendered(el, header, elementId);
+    }
+    case 'page_footer': {
+      const footer = document.createElement('footer');
+      footer.className = 'rendered-page-footer';
+      appendRenderedBody(footer, el, elementIds, { inline: true }, assetUrls);
+      return wrapRendered(el, footer, elementId);
+    }
+    case 'list':
+      return renderList(el, elementIds, assetUrls);
+    case 'table':
+    case 'index':
+    case 'tabular':
+      return renderOtslContainer(el, elementIds, assetUrls);
+    case 'code':
+      return renderCode(el, elementIds, ctx, assetUrls);
+    case 'formula':
+      return renderFormula(el, elementIds, ctx, assetUrls);
+    case 'picture':
+      return renderPicture(el, elementIds, assetUrls);
+    case 'group': {
+      const figure = document.createElement('figure');
+      figure.className = 'rendered-group';
+      appendRenderedBodyBlocks(figure, el, elementIds, assetUrls);
+      const cap = readCaptionElement(el);
+      if (cap)
+        figure.appendChild(
+          renderEmbeddedCaption(cap, elementIds, 'figcaption', assetUrls)
+        );
+      return wrapRendered(el, figure, elementId);
+    }
+    case 'field_region': {
+      const div = document.createElement('div');
+      div.className = 'rendered-field-region';
+      appendRenderedBodyBlocks(div, el, elementIds, assetUrls);
+      return wrapRendered(el, div, elementId);
+    }
+    case 'field_item': {
+      const div = document.createElement('div');
+      div.className = 'rendered-field-item';
+      appendRenderedBodyBlocks(div, el, elementIds, assetUrls);
+      return wrapRendered(el, div, elementId);
+    }
+    default:
+      return renderUnsupported(el, elementIds);
+  }
+}
+
+function appendRenderedNode(
+  parent: HTMLElement,
+  node: ChildNode,
+  elementIds: Map<Element, string>,
+  ctx: RenderCtx,
+  assetUrls?: Map<string, string>
+): void {
+  if (isTextLikeNode(node)) {
+    let text = node.textContent;
+    if (!text || !text.trim()) return;
+    if (ctx.trimLeading) {
+      text = text.replace(/^\s+/u, '');
+      ctx.trimLeading = false;
+      if (!text) return;
+    }
+    parent.appendChild(document.createTextNode(text));
+    return;
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) return;
+
+  const el = node as Element;
+  const tag = localName(el);
+  if (HEAD_TAGS.has(tag)) return;
+
+  if (RENDER_FORMAT_TAGS.has(tag)) {
+    parent.appendChild(renderFormatElement(el, elementIds, ctx, assetUrls));
+    return;
+  }
+
+  if (tag === 'code' || tag === 'formula') {
+    const rendered = renderBlockElement(el, elementIds, { inline: true }, assetUrls);
+    if (rendered) parent.appendChild(rendered);
+    return;
+  }
+
+  if (RENDER_BLOCK_TAGS.has(tag)) {
+    const rendered = renderBlockElement(el, elementIds, ctx, assetUrls);
+    if (rendered) parent.appendChild(rendered);
+    return;
+  }
+
+  if (tag === 'marker') {
+    parent.appendChild(renderMarkerElement(el, elementIds, ctx, assetUrls));
+    return;
+  }
+
+  if (tag === 'checkbox') {
+    parent.appendChild(renderCheckboxElement(el, elementIds));
+    return;
+  }
+
+  if (tag === 'key') {
+    parent.appendChild(renderFieldKeyElement(el, elementIds, ctx, assetUrls));
+    return;
+  }
+
+  if (tag === 'value') {
+    parent.appendChild(renderFieldValueElement(el, elementIds, ctx, assetUrls));
+    return;
+  }
+
+  if (tag === 'hint') {
+    parent.appendChild(renderFieldHintElement(el, elementIds, ctx, assetUrls));
+    return;
+  }
+
+  if (tag === 'ldiv') return;
+  if (isCellToken(tag) || tag === 'src' || tag === 'tabular') return;
+
+  appendRenderedBody(parent, el, elementIds, ctx, assetUrls);
+}
+
+// ---------------------------------------------------------------------------
+// Fragment merge helpers
+// ---------------------------------------------------------------------------
+
+function findLastTextNode(node: Node): Node | null {
+  if (isTextLikeNode(node)) return node;
+  if (node.nodeType !== Node.ELEMENT_NODE) return null;
+  for (let i = node.childNodes.length - 1; i >= 0; i -= 1) {
+    const found = findLastTextNode(node.childNodes[i]!);
+    if (found) return found;
+  }
+  return null;
+}
+
+function trimParentTrailingForFragmentJoin(parent: HTMLElement): void {
+  const lastText = findLastTextNode(parent);
+  if (!lastText) return;
+  let value = lastText.textContent ?? '';
+  value = value.replace(/\s+$/u, '');
+  if (value.endsWith('-')) value = value.slice(0, -1);
+  if (!value) {
+    lastText.parentNode?.removeChild(lastText);
+    trimParentTrailingForFragmentJoin(parent);
+    return;
+  }
+  lastText.textContent = value;
+}
+
+function appendMergedTextFragments(
+  parent: HTMLElement,
+  fragments: Element[],
+  elementIds: Map<Element, string>,
+  assetUrls: Map<string, string> | undefined
+): void {
+  for (let i = 0; i < fragments.length; i += 1) {
+    if (i > 0) trimParentTrailingForFragmentJoin(parent);
+    appendRenderedBody(
+      parent,
+      fragments[i]!,
+      elementIds,
+      {
+        inline: true,
+        trimLeading: i > 0,
+      },
+      assetUrls
+    );
+  }
+}
+
+function renderMergedIntraPageFragments(
+  fragments: Element[],
+  elementIds: Map<Element, string>,
+  assetUrls: Map<string, string> | undefined
+): HTMLElement {
+  const first = fragments[0]!;
+  const tag = localName(first);
+  const firstId = elementIds.get(first);
+  const threadId = elementThreadId(first);
+
+  let node: HTMLElement;
+  if (tag === 'text') {
+    node = document.createElement('p');
+    appendMergedTextFragments(node, fragments, elementIds, assetUrls);
+  } else if (tag === 'list') {
+    const listClass = first.getAttribute('class') ?? 'unordered';
+    node = document.createElement(listClass === 'ordered' ? 'ol' : 'ul');
+    for (const el of fragments) {
+      appendListItemsFromElement(node, el, elementIds, assetUrls);
+    }
+  } else {
+    node = document.createElement('div');
+    node.className = 'rendered-fragment-merged-body';
+    for (const el of fragments) {
+      appendRenderedBodyBlocks(node, el, elementIds, assetUrls);
+    }
+  }
+
+  const wrap = wrapRendered(first, node, firstId, 'rendered-fragment-merged');
+  if (threadId) wrap.setAttribute('data-thread-id', threadId);
+  return wrap;
+}
+
+function collectIntraPageThreads(segment: Element[]): Map<string, Element[]> {
+  const byThread = new Map<string, Element[]>();
+  for (const el of segment) {
+    if (el.nodeType !== Node.ELEMENT_NODE) continue;
+    if (localName(el) === 'page_break') continue;
+    const tid = elementThreadId(el);
+    if (!tid) continue;
+    if (!byThread.has(tid)) byThread.set(tid, []);
+    byThread.get(tid)!.push(el);
+  }
+  for (const [tid, members] of byThread) {
+    if (members.length < 2) byThread.delete(tid);
+  }
+  return byThread;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+@customElement('doclang-reading-pane')
+export class DoclangReadingPane extends DoclangPageElement {
+  static override styles = unsafeCSS(styles);
+
+  @state() private _showFurniture = true;
+  @state() private _showBackground = true;
+  @state() private _settingsOpen = false;
+  @state() private _visible = false;
+  // null = no document loaded yet; false = document loaded but no markup; true = has markup
+  private _pageController = new PageController(this, () => this.scrollPane);
+
+  @state() private _hasMarkup: boolean | null = null;
+  private _pendingContent: HTMLElement | null = null;
+  private _settingsPanelRef: Ref<DoclangSettingsPanel> = createRef();
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.classList.add('pane', 'pane-reading');
+  }
+
+  override render() {
+    const bodyClasses = {
+      'pane-body': true,
+      'show-reading-furniture': this._showFurniture,
+      'show-reading-background': this._showBackground,
+    };
+
+    return html`
+      <div class="pane-header">
+        <span class="pane-header-title">Reading view</span>
+        ${this._visible
+          ? html`<button
+              type="button"
+              class="pane-settings-toggle"
+              aria-expanded=${this._settingsOpen ? 'true' : 'false'}
+              @click=${this._onSettingsToggle}
+            >
+              Layers
+            </button>`
+          : nothing}
+      </div>
+      <div class="pane-reading-layout">
+        <div
+          id="rendered-pane"
+          class=${classMap(bodyClasses)}
+          @click=${this._onBodyClick}
+        >
+          ${this._hasMarkup === false
+            ? html`<div class="placeholder">${NO_MARKUP}</div>`
+            : this._hasMarkup === true
+              ? html`<div ${ref(this._onContentRef)}></div>`
+              : nothing}
+        </div>
+        ${this._visible
+          ? html`
+              <doclang-settings-panel
+                ${ref(this._settingsPanelRef)}
+                label="Layers"
+                @doclang-settings-close=${this._onSettingsClose}
+              >
+                <div class="settings-subgroup">
+                  <label class="settings-option settings-option-sub">
+                    <input
+                      type="checkbox"
+                      class="cb-furniture"
+                      .checked=${this._showFurniture}
+                      @change=${this._onFurnitureChange}
+                    />
+                    <span>Furniture</span>
+                  </label>
+                  <label class="settings-option settings-option-sub">
+                    <input
+                      type="checkbox"
+                      class="cb-background"
+                      .checked=${this._showBackground}
+                      @change=${this._onBackgroundChange}
+                    />
+                    <span>Background</span>
+                  </label>
+                </div>
+              </doclang-settings-panel>
+            `
+          : nothing}
+      </div>
+    `;
+  }
+
+  private _onContentRef = (el: Element | undefined): void => {
+    if (el && this._pendingContent) {
+      (el as HTMLElement).replaceChildren(this._pendingContent);
+    }
+  };
+
+  override updated(changed: PropertyValues): void {
+    super.updated(changed);
+    if (!this._pendingContent) return;
+    const wrapper = this.shadowRoot?.querySelector(
+      '.pane-body > div'
+    ) as HTMLElement | null;
+    if (wrapper && !wrapper.contains(this._pendingContent)) {
+      wrapper.replaceChildren(this._pendingContent);
+    }
+  }
+
+  /** The scrollable content body inside the shadow root. */
+  get scrollPane(): HTMLElement | null {
+    return this.shadowRoot?.querySelector('.pane-body') ?? null;
+  }
+
+  setVisible(visible: boolean): void {
+    this._visible = visible;
+    // `hidden` is not a @state property so we call requestUpdate explicitly.
+    this.hidden = !visible;
+    this.requestUpdate();
+  }
+
+  protected override _applySelection(): void {
+    if (!this.shadowRoot) return;
+    for (const el of this.shadowRoot.querySelectorAll('.rendered-el.selected')) {
+      el.classList.remove('selected');
+    }
+    if (!this.selected) return;
+    const renderedEl = this._findRenderedElement(this.selected, this._peerIds);
+    if (!renderedEl) return;
+    this._revealContext(renderedEl);
+    renderedEl.classList.add('selected');
+    renderedEl.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+  }
+
+  // ---------------------------------------------------------------------------
+  // Document rendering
+  // ---------------------------------------------------------------------------
+
+  protected override _renderDocument(): void {
+    const state = this._docState;
+    if (!state) {
+      this._pendingContent = null;
+      this._hasMarkup = null;
+      return;
+    }
+
+    const segment = state.segments[this.page - 1] ?? [];
+    // elementIds may already have been assigned by markup-pane; re-use if available
+    const elementIds = state.elementIds.size
+      ? state.elementIds
+      : assignElementIds(segment);
+    state.elementIds = elementIds;
+
+    if (segmentHasMarkup(segment)) {
+      this._pendingContent = this._buildRenderedArticle(segment, elementIds);
+      this._hasMarkup = true;
+    } else {
+      this._pendingContent = null;
+      this._hasMarkup = false;
+    }
+    this.requestUpdate();
+  }
+
+  protected override _clearDocument(): void {
+    this._pendingContent = null;
+    this._hasMarkup = null;
+    this.requestUpdate();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Event handlers
+  // ---------------------------------------------------------------------------
+
+  private _onSettingsToggle = (): void => {
+    this._settingsOpen = !this._settingsOpen;
+    this._settingsPanelRef.value?.setOpen(this._settingsOpen);
+    this.requestUpdate();
+  };
+
+  private _onSettingsClose = (): void => {
+    this._settingsOpen = false;
+    this.requestUpdate();
+  };
+
+  private _onFurnitureChange = (e: Event): void => {
+    this._showFurniture = (e.target as HTMLInputElement).checked;
+    this.dispatchEvent(
+      new CustomEvent('doclang-show-reading-furniture', {
+        bubbles: true,
+        composed: true,
+        detail: { checked: this._showFurniture },
+      })
+    );
+  };
+
+  private _onBackgroundChange = (e: Event): void => {
+    this._showBackground = (e.target as HTMLInputElement).checked;
+    this.dispatchEvent(
+      new CustomEvent('doclang-show-reading-background', {
+        bubbles: true,
+        composed: true,
+        detail: { checked: this._showBackground },
+      })
+    );
+  };
+
+  private _onBodyClick = (e: MouseEvent): void => {
+    const target = e.target as Element;
+    const ghostText = target.closest('.rendered-el-virtual-text');
+    const elementId = ghostText?.hasAttribute('data-element-id')
+      ? ghostText.getAttribute('data-element-id')!
+      : (target
+          .closest('.rendered-el[data-element-id]')
+          ?.getAttribute('data-element-id') ?? null);
+    if (elementId) {
+      this.dispatchEvent(
+        new CustomEvent('doclang-element-select', {
+          bubbles: true,
+          composed: true,
+          detail: { id: elementId },
+        })
+      );
+    }
+  };
+
+  // ---------------------------------------------------------------------------
+  // Private helpers
+  // ---------------------------------------------------------------------------
+
+  private _buildRenderedArticle(
+    segment: Element[],
+    elementIds: Map<Element, string>
+  ): HTMLElement {
+    const assetUrls = this._docState?.assetUrls;
+    const intraPageThreads = collectIntraPageThreads(segment);
+    const skipElements = new Set<Element>();
+    const mergeGroups = new Map<Element, Element[]>();
+
+    for (const [, members] of intraPageThreads) {
+      mergeGroups.set(members[0]!, members);
+      for (let i = 1; i < members.length; i += 1) {
+        skipElements.add(members[i]!);
+      }
+    }
+
+    const article = document.createElement('article');
+    article.className = 'rendered-doc';
+    for (const el of segment) {
+      if (el.nodeType !== Node.ELEMENT_NODE) continue;
+      if (localName(el) === 'page_break') continue;
+      if (skipElements.has(el)) continue;
+
+      const mergeGroup = mergeGroups.get(el);
+      const rendered = mergeGroup
+        ? renderMergedIntraPageFragments(mergeGroup, elementIds, assetUrls)
+        : renderBlockElement(el, elementIds, { inline: false }, assetUrls);
+      if (rendered) article.appendChild(rendered);
+    }
+    return article;
+  }
+
+  private _findRenderedElement(
+    elementId: string,
+    peerIds: Set<string>
+  ): Element | null {
+    if (!this.shadowRoot) return null;
+    const direct =
+      this.shadowRoot.querySelector(
+        `.rendered-el-virtual-text[data-element-id="${elementId}"]`
+      ) ??
+      this.shadowRoot.querySelector(`.rendered-el[data-element-id="${elementId}"]`);
+    if (direct) return direct;
+
+    const xmlEl = this._docState?.idToElement?.get(elementId);
+    const threadId = xmlEl ? elementThreadId(xmlEl) : null;
+    if (!threadId) return null;
+    const merged = this.shadowRoot.querySelector(
+      `.rendered-fragment-merged[data-thread-id="${threadId}"]`
+    );
+    if (!merged) return null;
+    const primaryId = merged.getAttribute('data-element-id');
+    if (!primaryId || primaryId === elementId) return merged;
+    return peerIds.has(elementId) ? merged : null;
+  }
+
+  private _revealContext(renderedEl: Element): void {
+    const pictureContents = renderedEl.closest(
+      '.rendered-picture-contents'
+    ) as HTMLDetailsElement | null;
+    if (pictureContents && !pictureContents.open) pictureContents.open = true;
+    this._revealLayer(renderedEl);
+  }
+
+  private _revealLayer(renderedEl: Element): void {
+    const layer = renderedEl.getAttribute('data-doclang-layer');
+    if (!layer || layer === 'body') return;
+    if (layer === 'furniture' && !this._showFurniture) {
+      this._showFurniture = true;
+      this.dispatchEvent(
+        new CustomEvent('doclang-show-reading-furniture', {
+          bubbles: true,
+          composed: true,
+          detail: { checked: true },
+        })
+      );
+    } else if (layer === 'background' && !this._showBackground) {
+      this._showBackground = true;
+      this.dispatchEvent(
+        new CustomEvent('doclang-show-reading-background', {
+          bubbles: true,
+          composed: true,
+          detail: { checked: true },
+        })
+      );
+    }
+  }
+}
diff --git a/core/src/components/settings-panel/settings-panel.css b/core/src/components/settings-panel/settings-panel.css
new file mode 100644
index 0000000..bb07a09
--- /dev/null
+++ b/core/src/components/settings-panel/settings-panel.css
@@ -0,0 +1,75 @@
+@import '../theme.css';
+
+:host {
+  display: contents;
+}
+
+/* The layer wraps the scrim + panel and is sized by the parent via position:absolute inset:0 */
+.settings-layer {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+}
+.settings-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  appearance: none;
+  border: none;
+  margin: 0;
+  padding: 0;
+  background: color-mix(in srgb, var(--bg) 28%, transparent);
+  cursor: default;
+}
+.settings-panel {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  z-index: 1;
+  width: 13rem;
+  max-height: calc(100% - 1rem);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  background: var(--panel);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
+  overflow: hidden;
+}
+.settings-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+}
+.settings-title {
+  margin: 0;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.settings-close {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--muted);
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 0.25rem;
+  font-size: 1.1rem;
+  line-height: 1;
+  cursor: pointer;
+}
+.settings-close:hover {
+  color: var(--text);
+  background: var(--bg);
+}
+.settings-body {
+  padding: 0.75rem;
+  overflow: auto;
+}
diff --git a/core/src/components/settings-panel/settings-panel.ts b/core/src/components/settings-panel/settings-panel.ts
new file mode 100644
index 0000000..39e641f
--- /dev/null
+++ b/core/src/components/settings-panel/settings-panel.ts
@@ -0,0 +1,106 @@
+/** <doclang-settings-panel> — floating settings panel + scrim overlay */
+
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { unsafeCSS } from 'lit';
+import styles from './settings-panel.css?inline';
+
+/**
+ * A floating settings panel with a scrim backdrop.
+ * Positioned absolutely over its nearest positioned ancestor.
+ *
+ * The trigger button lives in the consumer (pane header). Call setOpen(true/false)
+ * from the trigger, or pass `open` via attribute.
+ *
+ * Attributes:
+ *   label   — text for the panel title and close button aria-label
+ *
+ * The panel body content is provided via the default slot.
+ *
+ * Events fired (bubbles, composed):
+ *   doclang-settings-close  — when the panel closes itself (scrim or close button)
+ */
+@customElement('doclang-settings-panel')
+export class DoclangSettingsPanel extends LitElement {
+  static override styles = unsafeCSS(styles);
+
+  @property({ type: String }) label = '';
+
+  private _open = false;
+  private _titleId = `settings-title-${Math.random().toString(36).slice(2)}`;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    document.addEventListener('keydown', this._onDocKeydown);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    document.removeEventListener('keydown', this._onDocKeydown);
+  }
+
+  override render() {
+    if (!this._open) return nothing;
+    return html`
+      <div class="settings-layer">
+        <button
+          type="button"
+          class="settings-scrim"
+          tabindex="-1"
+          aria-label="Close ${this.label}"
+          @click=${this._onClose}
+        ></button>
+        <aside
+          class="settings-panel"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby=${this._titleId}
+        >
+          <div class="settings-header">
+            <h2 class="settings-title" id=${this._titleId}>${this.label}</h2>
+            <button
+              type="button"
+              class="settings-close"
+              aria-label="Close ${this.label}"
+              @click=${this._onClose}
+            >
+              ×
+            </button>
+          </div>
+          <div class="settings-body">
+            <slot></slot>
+          </div>
+        </aside>
+      </div>
+    `;
+  }
+
+  setOpen(open: boolean): void {
+    if (this._open === open) return;
+    this._open = open;
+    this.requestUpdate();
+    if (!open) {
+      this.dispatchEvent(
+        new CustomEvent('doclang-settings-close', { bubbles: true, composed: true })
+      );
+    }
+  }
+
+  get isOpen(): boolean {
+    return this._open;
+  }
+
+  private _onClose = (): void => {
+    this.setOpen(false);
+  };
+
+  private _onDocKeydown = (e: KeyboardEvent): void => {
+    if (this._open && e.key === 'Escape') this.setOpen(false);
+  };
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'doclang-settings-panel': DoclangSettingsPanel;
+  }
+}
diff --git a/core/src/components/theme.css b/core/src/components/theme.css
new file mode 100644
index 0000000..0f70d56
--- /dev/null
+++ b/core/src/components/theme.css
@@ -0,0 +1,69 @@
+:host {
+  color-scheme: light dark;
+  --bg: var(--doclang-bg, #f4f4f5);
+  --panel: var(--doclang-panel, #ffffff);
+  --border: var(--doclang-border, #d4d4d8);
+  --text: var(--doclang-text, #18181b);
+  --muted: var(--doclang-muted, #71717a);
+  --accent: var(--doclang-accent, #2563eb);
+  --placeholder-bg: var(--doclang-placeholder-bg, #fafafa);
+  --font-ui: var(--doclang-font-ui, system-ui, -apple-system, 'Segoe UI', sans-serif);
+  --font-mono: var(
+    --doclang-font-mono,
+    ui-monospace,
+    'Cascadia Code',
+    'Source Code Pro',
+    monospace
+  );
+  --markup-bg: var(--doclang-markup-bg, #ffffff);
+  --markup-fg: var(--doclang-markup-fg, #24292e);
+  --markup-hover: var(--doclang-markup-hover, rgba(37, 99, 235, 0.08));
+  --markup-selected: var(--doclang-markup-selected, rgba(37, 99, 235, 0.14));
+  --kind-text: var(--doclang-kind-text, #2563eb);
+  --kind-heading: var(--doclang-kind-heading, #7c3aed);
+  --kind-list: var(--doclang-kind-list, #ea580c);
+  --kind-ldiv: var(--doclang-kind-ldiv, #ea580c);
+  --kind-table: var(--doclang-kind-table, #16a34a);
+  --kind-index: var(--doclang-kind-index, #0d9488);
+  --kind-formula: var(--doclang-kind-formula, #0891b2);
+  --kind-code: var(--doclang-kind-code, #475569);
+  --kind-picture: var(--doclang-kind-picture, #db2777);
+  --kind-group: var(--doclang-kind-group, #4f46e5);
+  --kind-footnote: var(--doclang-kind-footnote, #a16207);
+  --kind-page_header: var(--doclang-kind-page_header, #71717a);
+  --kind-page_footer: var(--doclang-kind-page_footer, #71717a);
+  --kind-caption: var(--doclang-kind-caption, #71717a);
+  --kind-field: var(--doclang-kind-field, #d97706);
+  --kind-default: var(--doclang-kind-default, #dc2626);
+}
+
+@media (prefers-color-scheme: dark) {
+  :host {
+    --bg: var(--doclang-bg, #09090b);
+    --panel: var(--doclang-panel, #18181b);
+    --border: var(--doclang-border, #3f3f46);
+    --text: var(--doclang-text, #fafafa);
+    --muted: var(--doclang-muted, #a1a1aa);
+    --placeholder-bg: var(--doclang-placeholder-bg, #27272a);
+    --markup-bg: var(--doclang-markup-bg, #1e1e1e);
+    --markup-fg: var(--doclang-markup-fg, #d4d4d4);
+    --markup-hover: var(--doclang-markup-hover, rgba(96, 165, 250, 0.1));
+    --markup-selected: var(--doclang-markup-selected, rgba(96, 165, 250, 0.18));
+    --kind-text: var(--doclang-kind-text, #60a5fa);
+    --kind-heading: var(--doclang-kind-heading, #a78bfa);
+    --kind-list: var(--doclang-kind-list, #fb923c);
+    --kind-ldiv: var(--doclang-kind-ldiv, #fb923c);
+    --kind-table: var(--doclang-kind-table, #4ade80);
+    --kind-index: var(--doclang-kind-index, #2dd4bf);
+    --kind-formula: var(--doclang-kind-formula, #22d3ee);
+    --kind-code: var(--doclang-kind-code, #94a3b8);
+    --kind-picture: var(--doclang-kind-picture, #f472b6);
+    --kind-group: var(--doclang-kind-group, #818cf8);
+    --kind-footnote: var(--doclang-kind-footnote, #facc15);
+    --kind-page_header: var(--doclang-kind-page_header, #a1a1aa);
+    --kind-page_footer: var(--doclang-kind-page_footer, #a1a1aa);
+    --kind-caption: var(--doclang-kind-caption, #a1a1aa);
+    --kind-field: var(--doclang-kind-field, #fbbf24);
+    --kind-default: var(--doclang-kind-default, #f87171);
+  }
+}
diff --git a/core/src/components/viewer/empty.css b/core/src/components/viewer/empty.css
new file mode 100644
index 0000000..88aa12a
--- /dev/null
+++ b/core/src/components/viewer/empty.css
@@ -0,0 +1,71 @@
+@import '../theme.css';
+
+:host {
+  display: contents;
+}
+.empty-state {
+  flex: 1 1 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  margin: 1rem;
+  padding: 2rem 1.5rem;
+  border: 2px dashed var(--border);
+  border-radius: 0.75rem;
+  background: var(--placeholder-bg);
+  text-align: center;
+  color: var(--muted);
+}
+.empty-state-inner {
+  max-width: 28rem;
+}
+.empty-state-loading {
+  display: none;
+  flex-direction: column;
+  align-items: center;
+}
+:host(.demo-loading) .empty-state-loading {
+  display: flex;
+}
+:host(.demo-loading) .empty-state-prompt {
+  display: none;
+}
+.loading-spinner {
+  width: 2rem;
+  height: 2rem;
+  margin: 0 auto 1rem;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: loading-spin 0.7s linear infinite;
+}
+@keyframes loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.empty-state-title {
+  margin: 0 0 0.75rem;
+  font-size: 1.05rem;
+  color: var(--text);
+}
+.empty-state p {
+  margin: 0.5rem 0;
+}
+.empty-state-action {
+  margin: 0 0 0.75rem;
+}
+.text-link {
+  color: var(--accent);
+  text-decoration: underline;
+}
+.text-link:hover {
+  opacity: 0.85;
+}
+.empty-state-meta {
+  font-size: 0.875rem;
+}
+code {
+  font-family: var(--font-mono);
+}
diff --git a/core/src/components/viewer/empty.ts b/core/src/components/viewer/empty.ts
new file mode 100644
index 0000000..dbbbeb5
--- /dev/null
+++ b/core/src/components/viewer/empty.ts
@@ -0,0 +1,69 @@
+/** <doclang-empty-state> — loading/prompt empty state */
+
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { unsafeCSS } from 'lit';
+import styles from './empty.css?inline';
+
+@customElement('doclang-empty')
+export class DoclangEmpty extends LitElement {
+  static override styles = unsafeCSS(styles);
+
+  private _extensions: string[] = [];
+
+  override render() {
+    return html`
+      <div class="empty-state">
+        <div class="empty-state-inner">
+          <div
+            class="empty-state-loading"
+            role="status"
+            aria-live="polite"
+            aria-label="Loading demo document"
+          >
+            <div class="loading-spinner" aria-hidden="true"></div>
+            <p class="empty-state-title">Loading demo&#x2026;</p>
+            <p class="empty-state-meta">Preparing the sample document</p>
+          </div>
+          <div class="empty-state-prompt">
+            <p class="empty-state-title">Drop a DocLang file here</p>
+            <p class="empty-state-meta">
+              Supported file types:
+              <span class="file-types"
+                >${this._extensions.map(
+                  (ext, i) => html`${i > 0 ? ', ' : ''}<code>${ext}</code>`
+                )}</span
+              >
+            </p>
+            <p class="empty-state-action">
+              or
+              <a
+                href="#"
+                class="text-link"
+                @click=${(e: Event) => {
+                  e.preventDefault();
+                  this.dispatchEvent(
+                    new CustomEvent('doclang-load-demo', {
+                      bubbles: true,
+                      composed: true,
+                    })
+                  );
+                }}
+                >load demo</a
+              >
+            </p>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  setFileTypeHints(extensions: string[]): void {
+    this._extensions = extensions;
+    this.requestUpdate();
+  }
+
+  setDemoLoading(loading: boolean): void {
+    this.classList.toggle('demo-loading', loading);
+  }
+}
diff --git a/core/src/components/viewer/toolbar.css b/core/src/components/viewer/toolbar.css
new file mode 100644
index 0000000..4b35a5e
--- /dev/null
+++ b/core/src/components/viewer/toolbar.css
@@ -0,0 +1,113 @@
+@import '../theme.css';
+
+:host {
+  display: contents;
+}
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  grid-column: 3;
+  justify-self: end;
+}
+.header-divider {
+  flex-shrink: 0;
+  align-self: center;
+  width: 1px;
+  height: 1.125rem;
+  background: var(--border);
+}
+.toolbar-options-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.35rem 0.75rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+  font-family: var(--font-ui);
+}
+.toolbar-options-item:hover {
+  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
+}
+.toolbar-options-item input {
+  margin: 0;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.toolbar-options-item-disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.toolbar-options-item-disabled input {
+  cursor: not-allowed;
+}
+.toolbar-options-divider {
+  margin: 0.35rem 0;
+  border-top: 1px solid var(--border);
+}
+.toolbar-options-reset {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0.35rem 0.75rem;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  font-size: 0.875rem;
+  text-align: left;
+  cursor: pointer;
+}
+.toolbar-options-reset:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
+  color: var(--accent);
+}
+.toolbar-options-reset:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.toolbar-file-group {
+  display: inline-flex;
+  align-items: center;
+}
+button,
+label.file-btn {
+  appearance: none;
+  border: 1px solid var(--border);
+  background: var(--panel);
+  color: var(--text);
+  border-radius: 0.375rem;
+  padding: 0.4rem 0.75rem;
+  font: inherit;
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+button:hover,
+label.file-btn:hover {
+  border-color: var(--accent);
+}
+button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+label.file-btn input {
+  display: none;
+}
+.header-site-link {
+  color: var(--muted);
+  font-size: 0.875rem;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.header-site-link:hover {
+  color: var(--accent);
+  text-decoration: underline;
+}
+.header-site-link:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 0.125rem;
+}
diff --git a/core/src/components/viewer/toolbar.ts b/core/src/components/viewer/toolbar.ts
new file mode 100644
index 0000000..5d4a3ba
--- /dev/null
+++ b/core/src/components/viewer/toolbar.ts
@@ -0,0 +1,200 @@
+/** <doclang-toolbar> — header toolbar (Views menu, file open, demo, site link) */
+
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { unsafeCSS } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { ref, createRef } from 'lit/directives/ref.js';
+import type { Ref } from 'lit/directives/ref.js';
+import styles from './toolbar.css?inline';
+import '../dropdown/dropdown';
+import type { DoclangDropdown } from '../dropdown/dropdown';
+
+interface PaneToggles {
+  file: boolean;
+  page: boolean;
+  markup: boolean;
+  reading: boolean;
+  fileAvailable: boolean;
+  pageAvailable: boolean;
+  hasState: boolean;
+}
+
+@customElement('doclang-toolbar')
+export class DoclangToolbar extends LitElement {
+  static override styles = unsafeCSS(styles);
+
+  private _demoLoading = false;
+  private _panes: PaneToggles = {
+    file: true,
+    page: true,
+    markup: true,
+    reading: true,
+    fileAvailable: false,
+    pageAvailable: false,
+    hasState: false,
+  };
+  private _inputArchiveRef: Ref<HTMLInputElement> = createRef();
+  private _dropdownRef: Ref<DoclangDropdown> = createRef();
+
+  override render() {
+    const { file, page, markup, reading, fileAvailable, pageAvailable, hasState } =
+      this._panes;
+    return html`
+      <div class="toolbar">
+        <doclang-dropdown
+          ${ref(this._dropdownRef)}
+          label="Views"
+        >
+          <label
+            class=${classMap({
+              'toolbar-options-item': true,
+              'toolbar-options-item-disabled': !fileAvailable,
+            })}
+          >
+            <input
+              type="checkbox"
+              class="cb-file-pane"
+              role="menuitemcheckbox"
+              .checked=${fileAvailable && file}
+              ?disabled=${!fileAvailable}
+              @change=${(e: Event) =>
+                this._emitTogglePane('file', (e.target as HTMLInputElement).checked)}
+            />
+            <span>Files</span>
+          </label>
+          <label
+            class=${classMap({
+              'toolbar-options-item': true,
+              'toolbar-options-item-disabled': !pageAvailable,
+            })}
+          >
+            <input
+              type="checkbox"
+              class="cb-page-pane"
+              role="menuitemcheckbox"
+              .checked=${pageAvailable && page}
+              ?disabled=${!pageAvailable}
+              @change=${(e: Event) =>
+                this._emitTogglePane('page', (e.target as HTMLInputElement).checked)}
+            />
+            <span>Original page</span>
+          </label>
+          <label
+            class=${classMap({
+              'toolbar-options-item': true,
+              'toolbar-options-item-disabled': !hasState,
+            })}
+          >
+            <input
+              type="checkbox"
+              class="cb-markup-pane"
+              role="menuitemcheckbox"
+              .checked=${markup}
+              ?disabled=${!hasState}
+              @change=${(e: Event) =>
+                this._emitTogglePane('markup', (e.target as HTMLInputElement).checked)}
+            />
+            <span>DocLang</span>
+          </label>
+          <label
+            class=${classMap({
+              'toolbar-options-item': true,
+              'toolbar-options-item-disabled': !hasState,
+            })}
+          >
+            <input
+              type="checkbox"
+              class="cb-reading-pane"
+              role="menuitemcheckbox"
+              .checked=${reading}
+              ?disabled=${!hasState}
+              @change=${(e: Event) =>
+                this._emitTogglePane('reading', (e.target as HTMLInputElement).checked)}
+            />
+            <span>Reading view</span>
+          </label>
+          <div class="toolbar-options-divider" role="separator"></div>
+          <button
+            type="button"
+            class="toolbar-options-reset"
+            role="menuitem"
+            ?disabled=${!hasState}
+            @click=${() =>
+              this.dispatchEvent(
+                new CustomEvent('doclang-reset-pane-layout', {
+                  bubbles: true,
+                  composed: true,
+                })
+              )}
+          >
+            Reset views
+          </button>
+        </doclang-dropdown>
+        <span class="header-divider" aria-hidden="true"></span>
+        <span class="toolbar-file-group">
+          <label
+            class="file-btn"
+            title="Open a DocLang file (.dclx, .dclg)"
+          >
+            Open file
+            <input
+              ${ref(this._inputArchiveRef)}
+              type="file"
+              class="input-archive"
+              multiple
+              accept=".dclx,.zip,.dclg,.xml,application/zip,application/xml,text/xml"
+              @change=${this._onArchiveChange}
+            />
+          </label>
+        </span>
+        <button
+          type="button"
+          class="btn-demo"
+          ?disabled=${this._demoLoading}
+          @click=${() =>
+            this.dispatchEvent(
+              new CustomEvent('doclang-load-demo', { bubbles: true, composed: true })
+            )}
+        >
+          Load demo
+        </button>
+        <span class="header-divider" aria-hidden="true"></span>
+        <a href="https://doclang.ai/" class="header-site-link">doclang.ai</a>
+      </div>
+    `;
+  }
+
+  /** Sync the Views-menu checkboxes and disabled/greyed state from app state. */
+  syncPaneToggles(opts: PaneToggles): void {
+    this._panes = opts;
+    this.requestUpdate();
+  }
+
+  setDemoLoading(loading: boolean): void {
+    this._demoLoading = loading;
+    this.requestUpdate();
+  }
+
+  private _emitTogglePane(pane: string, checked: boolean): void {
+    this.dispatchEvent(
+      new CustomEvent('doclang-toggle-pane', {
+        bubbles: true,
+        composed: true,
+        detail: { pane, checked },
+      })
+    );
+  }
+
+  private _onArchiveChange = (e: Event): void => {
+    const input = e.target as HTMLInputElement;
+    this.dispatchEvent(
+      new CustomEvent('doclang-open-files', {
+        bubbles: true,
+        composed: true,
+        detail: { files: [...(input.files ?? [])] },
+      })
+    );
+    input.value = '';
+  };
+}
diff --git a/core/src/components/viewer/viewer.css b/core/src/components/viewer/viewer.css
new file mode 100644
index 0000000..a56919d
--- /dev/null
+++ b/core/src/components/viewer/viewer.css
@@ -0,0 +1,227 @@
+@import '../theme.css';
+
+/* -----------------------------------------------------------------------
+   DoclangViewer host — full-page shell
+   ----------------------------------------------------------------------- */
+
+:host {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  font-family: var(--font-ui);
+  background: var(--bg);
+  color: var(--text);
+}
+
+:host(.drag-over) {
+  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
+}
+
+:host(.drag-over) doclang-empty {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 8%, var(--placeholder-bg));
+}
+
+/* -----------------------------------------------------------------------
+   Header
+   ----------------------------------------------------------------------- */
+
+header {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+}
+
+.header-brand {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  min-width: 0;
+  grid-column: 1;
+  justify-self: start;
+}
+
+header h1 {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.header-center {
+  grid-column: 2;
+  justify-self: center;
+  min-width: 0;
+  text-align: center;
+}
+
+.doc-label {
+  color: var(--muted);
+  font-size: 0.8125rem;
+  font-weight: 400;
+  min-width: 0;
+  max-width: min(40vw, 28rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.header-logo-link {
+  display: block;
+  flex-shrink: 0;
+  border-radius: 0.25rem;
+  line-height: 0;
+  text-decoration: none;
+}
+
+.header-logo-link:hover {
+  opacity: 0.8;
+}
+
+.header-logo {
+  display: block;
+  height: 2.25rem;
+  width: auto;
+}
+
+.header-logo-link:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.toolbar-wrap {
+  grid-column: 3;
+  justify-self: end;
+}
+
+/* -----------------------------------------------------------------------
+   Drop banner
+   ----------------------------------------------------------------------- */
+
+.drop-banner {
+  display: none;
+  margin: 0;
+  padding: 0.35rem 1rem;
+  text-align: center;
+  font-size: 0.8125rem;
+  color: var(--muted);
+  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
+  border-bottom: 1px solid var(--border);
+}
+
+:host(.loaded.drag-over) .drop-banner {
+  display: block;
+}
+
+/* -----------------------------------------------------------------------
+   Empty state
+   ----------------------------------------------------------------------- */
+
+:host(.loaded) doclang-empty {
+  display: none;
+}
+
+/* -----------------------------------------------------------------------
+   Pane grid
+   ----------------------------------------------------------------------- */
+
+.main {
+  display: none;
+  flex: 1 1 0;
+  min-height: 0;
+}
+
+:host(.loaded) .main {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+}
+
+:host(.loaded) .main .pane {
+  border-right: none;
+}
+
+.pane {
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border);
+  min-height: 0;
+  min-width: 0;
+}
+
+.pane[hidden] {
+  display: none !important;
+}
+
+/* -----------------------------------------------------------------------
+   Pane splitters
+   ----------------------------------------------------------------------- */
+
+.pane-splitter {
+  position: relative;
+  width: 1px;
+  margin: 0 -4px;
+  padding: 0 4px;
+  box-sizing: content-box;
+  cursor: col-resize;
+  touch-action: none;
+  z-index: 2;
+  background: transparent;
+}
+
+.pane-splitter::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 4px;
+  width: 1px;
+  background: var(--border);
+  transition:
+    background 0.15s ease,
+    width 0.15s ease;
+}
+
+.pane-splitter:hover::after,
+.pane-splitter:focus-visible::after,
+.pane-splitter.is-dragging::after {
+  width: 3px;
+  background: var(--accent);
+}
+
+.pane-splitter[hidden] {
+  display: none !important;
+}
+
+:host(.pane-drag-active) {
+  cursor: col-resize;
+  user-select: none;
+}
+
+:host(.pane-drag-active) .pane-splitter {
+  cursor: col-resize;
+}
+
+/* -----------------------------------------------------------------------
+   Responsive stacked layout
+   ----------------------------------------------------------------------- */
+
+@media (max-width: 1200px) {
+  :host(.loaded) .main {
+    grid-template-columns: 1fr !important;
+    grid-template-rows: unset;
+  }
+
+  :host(.loaded) .main .pane {
+    grid-column: 1 !important;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+
+  :host(.loaded) .main .pane-splitter {
+    display: none !important;
+  }
+}
+
diff --git a/core/src/components/viewer/viewer.ts b/core/src/components/viewer/viewer.ts
new file mode 100644
index 0000000..996e939
--- /dev/null
+++ b/core/src/components/viewer/viewer.ts
@@ -0,0 +1,1159 @@
+/** <doclang-viewer> — top-level application shell */
+
+import '../page-nav/page-nav';
+import './toolbar';
+import '../collection/collection-pane';
+import '../markup-pane/markup-pane';
+import '../page-img-pane/page-img-pane';
+import '../reading-pane/reading-pane';
+import './empty';
+import '../container/pane-stack';
+
+import { html, nothing, PropertyValues } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { unsafeCSS } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { ref, createRef } from 'lit/directives/ref.js';
+import type { Ref } from 'lit/directives/ref.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import styles from './viewer.css?inline';
+import { DoclangPageElement } from '../base/page-element';
+import { CollectionController } from '../collection/collection';
+
+import type { DoclangPageNav } from '../page-nav/page-nav';
+import type { DoclangToolbar } from './toolbar';
+import type { DoclangCollectionPane } from '../collection/collection-pane';
+import type { DoclangMarkupPane } from '../markup-pane/markup-pane';
+import type { DoclangPageImgPane } from '../page-img-pane/page-img-pane';
+import type { DoclangReadingPane } from '../reading-pane/reading-pane';
+import type { DoclangEmpty } from './empty';
+
+import type { DocumentState } from '../../doclang/types';
+import {
+  CELL_SPAN_TAGS,
+  OTSL_CONTAINER_TAGS,
+  localName,
+  isSemanticElement,
+  isVirtualTextHost,
+  isListOrOtslContainer,
+  xmlContains,
+  skipContainerLevelHead,
+  skipUntilListItemBoundary,
+  skipUntilCellBoundary,
+  isCellToken,
+} from '../../doclang/dom';
+import { PAGE_ZOOM_DEFAULT } from '../page-img-pane/overlay';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+type PaneKey = 'file' | 'page' | 'markup' | 'reading';
+
+interface PaneDragState {
+  physicalSplitterIndex: number;
+  leftKey: PaneKey;
+  rightKey: PaneKey;
+  startX: number;
+  leftStart: number;
+  rightStart: number;
+  pointerId: number;
+  leftStartPx?: number;
+  rightStartPx?: number;
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const SUPPORTED_FILE_EXTENSIONS = ['.dclx', '.dclg'];
+const LAYOUT_STORAGE_KEY = 'doclang-viewer-pane-layout';
+const PANE_KEYS = ['file', 'page', 'markup', 'reading'] as const;
+const PANE_MIN_RATIO = 0.12;
+const DEFAULT_PANE_RATIOS = [1, 1, 1, 1];
+const DEFAULT_USER_PANE_VISIBLE: PaneKey[] = ['page', 'markup', 'reading'];
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+@customElement('doclang-viewer')
+export class DoclangViewer extends DoclangPageElement {
+  static override styles = unsafeCSS(styles);
+
+  @property({ type: String }) example: string | null = null;
+
+  // ---------------------------------------------------------------------------
+  // Reactive state (drives re-render + class toggles on host)
+  // ---------------------------------------------------------------------------
+
+  @state() private _loaded = false;
+  @state() private _markupOnly = false;
+  @state() private _dragOver = false;
+  @state() private _paneDragActive = false;
+  @state() private _demoLoading = false;
+  @state() private _docLabel: string | null = null;
+  @state() private _mainGridStyle: Record<string, string> = {};
+  @state() private _paneGridCols: Map<PaneKey, number> = new Map();
+  @state() private _splitterCols: (number | null)[] = [null, null, null];
+  @property({ type: Array, attribute: 'panes', reflect: true })
+  panes: PaneKey[] = [...DEFAULT_USER_PANE_VISIBLE];
+
+  // ---------------------------------------------------------------------------
+  // Non-reactive fields
+  // ---------------------------------------------------------------------------
+
+  private _collection = new CollectionController(this);
+  private _filePaneUserToggled = false;
+  private _paneRatios: number[] = [...DEFAULT_PANE_RATIOS];
+  private _filePaneWidthPx: number | null = null;
+  private _paneDrag: PaneDragState | null = null;
+  private _demoLoadInProgress = false;
+  private _suppressDemoLoad = false;
+  // Refs to child components
+  private _pageNavRef: Ref<DoclangPageNav> = createRef();
+  private _toolbarRef: Ref<DoclangToolbar> = createRef();
+  private _collectionPaneRef: Ref<DoclangCollectionPane> = createRef();
+  private _markupPaneRef: Ref<DoclangMarkupPane> = createRef();
+  private _pageViewPaneRef: Ref<DoclangPageImgPane> = createRef();
+  private _readingPaneRef: Ref<DoclangReadingPane> = createRef();
+  private _emptyStateRef: Ref<DoclangEmpty> = createRef();
+  private _splitterRefs: Ref<HTMLElement>[] = [createRef(), createRef(), createRef()];
+  private _mainRef: Ref<HTMLElement> = createRef();
+
+  // ---------------------------------------------------------------------------
+  // Lifecycle
+  // ---------------------------------------------------------------------------
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this._loadLayoutPrefs();
+    this._normalizePaneRatios();
+    this._initDragDrop();
+    this._initFileHandling();
+    this._initPaneDragListeners();
+    this.addEventListener('view-page', this._onViewPage);
+
+    if (this.example) {
+      this._demoLoading = true;
+      setTimeout(() => {
+        if (!this._suppressDemoLoad) this._loadDemo();
+      }, 0);
+    }
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    window.removeEventListener('pointermove', this._onWindowPointerMove);
+    window.removeEventListener('pointerup', this._onWindowPointerUp);
+    window.removeEventListener('pointercancel', this._onWindowPointerUp);
+    this.removeEventListener('view-page', this._onViewPage);
+  }
+
+  override updated(changed: PropertyValues): void {
+    // Let the base class handle page clamping, _renderDocument, and
+    // _applySelection triggered by changes to `page` and `selected`.
+    super.updated(changed);
+    // Apply host classes imperatively (classMap on :host needs this workaround)
+    this.classList.toggle('loaded', this._loaded);
+    this.classList.toggle('markup-only', this._markupOnly);
+    this.classList.toggle('drag-over', this._dragOver);
+    this.classList.toggle('pane-drag-active', this._paneDragActive);
+  }
+
+  override firstUpdated(): void {
+    const emptyState = this._emptyStateRef.value;
+    if (emptyState) emptyState.setFileTypeHints(SUPPORTED_FILE_EXTENSIONS);
+    if (this._demoLoading && emptyState) emptyState.setDemoLoading(true);
+    this._syncToolbarPaneCheckboxes();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Render
+  // ---------------------------------------------------------------------------
+
+  override render() {
+    return html`
+      <header>
+        <div class="header-brand">
+          <a
+            href="#"
+            class="header-logo-link"
+            title="Back to start"
+            @click=${this._onHomeClick}
+          >
+            <img src="assets/doclang_v3_sail.svg" alt="DocLang" class="header-logo" />
+          </a>
+          <h1>DocLang Viewer</h1>
+          <doclang-page-nav
+            ${ref(this._pageNavRef)}
+            ?hidden=${!this._loaded || this._markupOnly}
+            .document=${this._docState}
+            .page=${this.page}
+          ></doclang-page-nav>
+        </div>
+
+        <div class="header-center">
+          ${
+            this._docLabel
+              ? html`<span class="doc-label">${this._docLabel}</span>`
+              : nothing
+          }
+        </div>
+
+        <div class="toolbar-wrap">
+          <doclang-toolbar
+            ${ref(this._toolbarRef)}
+            @doclang-load-demo=${this._onLoadDemo}
+            @doclang-open-files=${this._onOpenFiles}
+            @doclang-toggle-pane=${this._onTogglePane}
+            @doclang-reset-pane-layout=${this._onResetPaneLayout}
+          ></doclang-toolbar>
+        </div>
+      </header>
+
+      <p class="drop-banner">Drop to open another file</p>
+
+      <doclang-empty
+        ${ref(this._emptyStateRef)}
+        @doclang-load-demo=${this._onLoadDemo}
+      ></doclang-empty>
+
+      <div
+        class="main"
+        style=${styleMap(this._mainGridStyle)}
+        ${ref(this._mainRef)}
+      >
+        <doclang-collection-pane
+          ${ref(this._collectionPaneRef)}
+          class="pane"
+          ?hidden=${!this._isPaneVisible('file')}
+          style=${this._paneGridStyle('file')}
+          .entries=${this._collection.entries}
+          @doclang-collection-select=${(e: Event) => this._onCollectionSelect(e)}
+          @doclang-collection-close=${(e: Event) => this._onCollectionClose(e)}
+          @doclang-collection-close-all=${this._onCollectionCloseAll}
+        ></doclang-collection-pane>
+
+        <div
+          class=${classMap({ 'pane-splitter': true })}
+          role="separator"
+          aria-orientation="vertical"
+          aria-label="Resize Files and Original page panes"
+          tabindex="0"
+          ?hidden=${this._splitterCols[0] === null}
+          style=${this._splitterGridStyle(0)}
+          ${ref(this._splitterRefs[0]!)}
+          @pointerdown=${(e: PointerEvent) => this._startPaneDrag(e, 0)}
+        ></div>
+
+        <doclang-pane-stack
+          .document=${this._docState}
+          .page=${this.page}
+          .selected=${this.selected}
+          @view-page=${this._onViewPage}
+          @doclang-element-select=${this._onElementSelect}
+          @doclang-navigate-thread=${this._onNavigateThread}
+          @doclang-clear-selection=${this._onClearSelection}
+          style="display:contents"
+        >
+          <doclang-page-img-pane
+            ${ref(this._pageViewPaneRef)}
+            class="pane"
+            ?hidden=${!this._isPaneVisible('page')}
+            style=${this._paneGridStyle('page')}
+          ></doclang-page-img-pane>
+
+          <div
+            class="pane-splitter"
+            role="separator"
+            aria-orientation="vertical"
+            aria-label="Resize Original page and DocLang panes"
+            tabindex="0"
+            ?hidden=${this._splitterCols[1] === null}
+            style=${this._splitterGridStyle(1)}
+            ${ref(this._splitterRefs[1]!)}
+            @pointerdown=${(e: PointerEvent) => this._startPaneDrag(e, 1)}
+          ></div>
+
+          <doclang-markup-pane
+            ${ref(this._markupPaneRef)}
+            class="pane"
+            ?hidden=${!this._isPaneVisible('markup')}
+            style=${this._paneGridStyle('markup')}
+          ></doclang-markup-pane>
+
+          <div
+            class="pane-splitter"
+            role="separator"
+            aria-orientation="vertical"
+            aria-label="Resize DocLang and Reading view panes"
+            tabindex="0"
+            ?hidden=${this._splitterCols[2] === null}
+            style=${this._splitterGridStyle(2)}
+            ${ref(this._splitterRefs[2]!)}
+            @pointerdown=${(e: PointerEvent) => this._startPaneDrag(e, 2)}
+          ></div>
+
+          <doclang-reading-pane
+            ${ref(this._readingPaneRef)}
+            class="pane"
+            ?hidden=${!this._isPaneVisible('reading')}
+            style=${this._paneGridStyle('reading')}
+          ></doclang-reading-pane>
+        </doclang-pane-stack>
+      </div>
+
+    `;
+  }
+
+  // ---------------------------------------------------------------------------
+  // DoclangPageElement interface
+  // ---------------------------------------------------------------------------
+
+  protected override _renderDocument(): void {}
+  protected override _clearDocument(): void {}
+
+  // ---------------------------------------------------------------------------
+  // Grid style helpers
+  // ---------------------------------------------------------------------------
+
+  private _paneGridStyle(key: PaneKey): string {
+    const col = this._paneGridCols.get(key);
+    return col !== undefined ? `grid-column:${col}` : '';
+  }
+
+  private _splitterGridStyle(index: number): string {
+    const col = this._splitterCols[index];
+    if (col === null) return '';
+    return `grid-column:${col}`;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Pane layout
+  // ---------------------------------------------------------------------------
+
+  private _isPaneAvailable(key: PaneKey): boolean {
+    if (key === 'file') return this._collection.size > 0;
+    if (key === 'page') return Boolean(this._docState?.hasPageView);
+    return Boolean(this._docState);
+  }
+
+  private _isPaneVisible(key: PaneKey): boolean {
+    if (!this._isPaneAvailable(key)) return false;
+    return this.panes.includes(key);
+  }
+
+  private _visiblePaneKeys(): PaneKey[] {
+    return [...PANE_KEYS].filter(key => this._isPaneVisible(key));
+  }
+
+  private _filePaneFitWidthPx(): number {
+    const probe = document.createElement('div');
+    probe.style.cssText =
+      'position:absolute;visibility:hidden;width:var(--doclang-file-pane-fit-width);';
+    (this.shadowRoot ?? document.documentElement).appendChild(probe);
+    const px = probe.getBoundingClientRect().width;
+    probe.remove();
+    return Math.ceil(px) || 108;
+  }
+
+  private _resolvedFilePaneWidthPx(): number {
+    const fit = this._filePaneFitWidthPx();
+    return Math.max(fit, this._filePaneWidthPx ?? fit);
+  }
+
+  private _contentPaneFrWeights(keys: PaneKey[]): number[] {
+    const contentKeys = keys.filter(k => k !== 'file');
+    const weights = contentKeys.map(k => this._paneRatios[this._paneRatioIndex(k)]!);
+    const sum = weights.reduce((a, b) => a + b, 0) || contentKeys.length;
+    return weights.map(w => w / sum);
+  }
+
+  private _paneRatioIndex(key: PaneKey): number {
+    return PANE_KEYS.indexOf(key);
+  }
+
+  private _normalizePaneRatios(): void {
+    const sum = this._paneRatios.reduce((a, b) => a + b, 0);
+    if (sum <= 0) {
+      this._paneRatios = [...DEFAULT_PANE_RATIOS];
+      return;
+    }
+    this._paneRatios = this._paneRatios.map(r => r / sum);
+  }
+
+  private _paneKeysAdjacent(leftKey: PaneKey, rightKey: PaneKey): boolean {
+    return (
+      PANE_KEYS.indexOf(leftKey) >= 0 &&
+      PANE_KEYS.indexOf(rightKey) === PANE_KEYS.indexOf(leftKey) + 1
+    );
+  }
+
+  private _onlyHiddenPanesBetween(leftKey: PaneKey, rightKey: PaneKey): boolean {
+    const li = PANE_KEYS.indexOf(leftKey);
+    const ri = PANE_KEYS.indexOf(rightKey);
+    if (li < 0 || ri <= li) return false;
+    for (let i = li + 1; i < ri; i++) {
+      if (this._isPaneVisible(PANE_KEYS[i]!)) return false;
+    }
+    return true;
+  }
+
+  private _shouldShowSplitter(leftKey: PaneKey, rightKey: PaneKey): boolean {
+    if (!this._isPaneVisible(leftKey) || !this._isPaneVisible(rightKey)) return false;
+    if (this._paneKeysAdjacent(leftKey, rightKey)) return true;
+    return this._onlyHiddenPanesBetween(leftKey, rightKey);
+  }
+
+  private _visibleNeighborAfter(key: PaneKey): PaneKey | null {
+    const idx = PANE_KEYS.indexOf(key);
+    for (let i = idx + 1; i < PANE_KEYS.length; i++) {
+      if (this._isPaneVisible(PANE_KEYS[i]!)) return PANE_KEYS[i]!;
+    }
+    return null;
+  }
+
+  private _visibleNeighborBefore(key: PaneKey): PaneKey | null {
+    const idx = PANE_KEYS.indexOf(key);
+    for (let i = idx - 1; i >= 0; i--) {
+      if (this._isPaneVisible(PANE_KEYS[i]!)) return PANE_KEYS[i]!;
+    }
+    return null;
+  }
+
+  private _applyPaneLayout(): void {
+    let keys = this._visiblePaneKeys();
+    if (!keys.length) {
+      if (!this.panes.includes('markup')) this.panes = [...this.panes, 'markup'];
+      keys = this._visiblePaneKeys();
+    }
+
+    const gridCols = new Map<PaneKey, number>();
+    const splitterCols: (number | null)[] = [null, null, null];
+
+    if (!this._loaded) {
+      this._paneGridCols = gridCols;
+      this._splitterCols = splitterCols;
+      this._mainGridStyle = {};
+      this.requestUpdate();
+      return;
+    }
+
+    const contentFr = this._contentPaneFrWeights(keys);
+    const cols: string[] = [];
+    let frIndex = 0;
+    keys.forEach((key, i) => {
+      if (key === 'file') {
+        cols.push(`${this._resolvedFilePaneWidthPx()}px`);
+      } else {
+        cols.push(`minmax(0, ${contentFr[frIndex++]!.toFixed(6)}fr)`);
+      }
+      if (i < keys.length - 1 && this._shouldShowSplitter(keys[i]!, keys[i + 1]!)) {
+        cols.push('1px');
+      }
+    });
+
+    let col = 1;
+    keys.forEach((key, i) => {
+      gridCols.set(key, col++);
+      if (i < keys.length - 1) {
+        const lk = keys[i]!;
+        const rk = keys[i + 1]!;
+        if (!this._shouldShowSplitter(lk, rk)) return;
+        const physIdx = PANE_KEYS.indexOf(lk);
+        if (physIdx >= 0 && physIdx < 3) splitterCols[physIdx] = col++;
+      }
+    });
+
+    this._paneGridCols = gridCols;
+    this._splitterCols = splitterCols;
+    this._mainGridStyle = { gridTemplateColumns: cols.join(' ') };
+    this._pageViewPaneRef.value?.refreshLayout();
+    this._readingPaneRef.value?.setVisible(this._isPaneVisible('reading'));
+    this.requestUpdate();
+  }
+
+  private _setUserPaneVisible(key: PaneKey, visible: boolean): void {
+    this.panes = visible
+      ? [...this.panes.filter(k => k !== key), key]
+      : this.panes.filter(k => k !== key);
+    if (key === 'file') this._filePaneUserToggled = true;
+    if (key === 'page') this._syncPagePaneControls();
+    this._syncToolbarPaneCheckboxes();
+    this._saveLayoutPrefs();
+    this._applyPaneLayout();
+  }
+
+  private _syncPagePaneControls(): void {
+    this._pageViewPaneRef.value?.setVisible(this._isPaneVisible('page'));
+  }
+
+  // ---------------------------------------------------------------------------
+  // Layout prefs
+  // ---------------------------------------------------------------------------
+
+  private _loadLayoutPrefs(): void {
+    try {
+      const raw = localStorage.getItem(LAYOUT_STORAGE_KEY);
+      if (!raw) return;
+      const data = JSON.parse(raw) as {
+        visible?: Record<string, unknown>;
+        ratios?: unknown[];
+        filePaneWidthPx?: unknown;
+      };
+      if (data?.visible && typeof data.visible === 'object') {
+        const loaded: PaneKey[] = [];
+        for (const key of PANE_KEYS) {
+          if (data.visible[key] === true) loaded.push(key);
+        }
+        if (loaded.length) this.panes = loaded;
+        if (typeof data.visible['file'] === 'boolean') this._filePaneUserToggled = true;
+      }
+      if (Array.isArray(data?.ratios)) {
+        const valid = data.ratios.every(n => typeof n === 'number' && n > 0);
+        if (valid && data.ratios.length === 4) {
+          this._paneRatios = [...(data.ratios as number[])];
+          this._normalizePaneRatios();
+        } else if (valid && data.ratios.length === 3) {
+          this._paneRatios = [1, ...(data.ratios as number[])];
+          this._normalizePaneRatios();
+        }
+      }
+      if (typeof data?.filePaneWidthPx === 'number' && data.filePaneWidthPx > 0) {
+        this._filePaneWidthPx = data.filePaneWidthPx;
+      }
+    } catch {
+      /* ignore */
+    }
+  }
+
+  private _saveLayoutPrefs(): void {
+    try {
+      localStorage.setItem(
+        LAYOUT_STORAGE_KEY,
+        JSON.stringify({
+          visible: Object.fromEntries(PANE_KEYS.map(k => [k, this.panes.includes(k)])),
+          ratios: this._paneRatios,
+          filePaneWidthPx: this._filePaneWidthPx,
+        })
+      );
+    } catch {
+      /* ignore */
+    }
+  }
+
+  private _resetPaneLayout(): void {
+    this._filePaneUserToggled = false;
+    this.panes = this._collection.hasMultiple()
+      ? ['file', 'page', 'markup', 'reading']
+      : ['page', 'markup', 'reading'];
+    this._paneRatios = [...DEFAULT_PANE_RATIOS];
+    this._normalizePaneRatios();
+    this._filePaneWidthPx = null;
+    this._syncPagePaneControls();
+    this._syncToolbarPaneCheckboxes();
+    this._saveLayoutPrefs();
+    this._applyPaneLayout();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Pane splitter drag
+  // ---------------------------------------------------------------------------
+
+  private _contentPaneAvailableWidthPx(): number {
+    const main = this._mainRef.value;
+    if (!main) return 1;
+    const rect = main.getBoundingClientRect();
+    const keys = this._visiblePaneKeys();
+    let reserved = 0;
+    if (keys.includes('file')) reserved += this._resolvedFilePaneWidthPx();
+    for (let i = 0; i < keys.length - 1; i++) {
+      if (this._shouldShowSplitter(keys[i]!, keys[i + 1]!)) reserved += 1;
+    }
+    return Math.max(rect.width - reserved, 1);
+  }
+
+  private _resolvedPhysicalSplitterKeys(
+    physIdx: number
+  ): { leftKey: PaneKey; rightKey: PaneKey } | null {
+    const leftPhysical = PANE_KEYS[physIdx];
+    const rightPhysical = PANE_KEYS[physIdx + 1];
+    if (!leftPhysical || !rightPhysical) return null;
+    const leftKey = this._isPaneVisible(leftPhysical)
+      ? leftPhysical
+      : this._visibleNeighborBefore(rightPhysical);
+    const rightKey = this._isPaneVisible(rightPhysical)
+      ? rightPhysical
+      : this._visibleNeighborAfter(leftPhysical);
+    if (!leftKey || !rightKey || leftKey === rightKey) return null;
+    if (!this._shouldShowSplitter(leftKey, rightKey)) return null;
+    // Confirm this physical splitter is the canonical one for this gap
+    const canonicalIdx = PANE_KEYS.indexOf(leftKey);
+    if (canonicalIdx !== physIdx) return null;
+    return { leftKey, rightKey };
+  }
+
+  private _startPaneDrag(e: PointerEvent, physIdx: number): void {
+    if (e.button !== 0 || !this._loaded) return;
+    const resolved = this._resolvedPhysicalSplitterKeys(physIdx);
+    if (!resolved) return;
+    const { leftKey, rightKey } = resolved;
+    this._normalizePaneRatios();
+    const leftIndex = this._paneRatioIndex(leftKey);
+    const rightIndex = this._paneRatioIndex(rightKey);
+    const drag: PaneDragState = {
+      physicalSplitterIndex: physIdx,
+      leftKey,
+      rightKey,
+      startX: e.clientX,
+      leftStart: this._paneRatios[leftIndex]!,
+      rightStart: this._paneRatios[rightIndex]!,
+      pointerId: e.pointerId,
+    };
+    if (leftKey === 'file') drag.leftStartPx = this._resolvedFilePaneWidthPx();
+    else if (rightKey === 'file') drag.rightStartPx = this._resolvedFilePaneWidthPx();
+    this._paneDrag = drag;
+    e.preventDefault();
+    (e.currentTarget as Element).setPointerCapture(e.pointerId);
+    (e.currentTarget as Element).classList.add('is-dragging');
+    this._paneDragActive = true;
+    this.requestUpdate();
+  }
+
+  private _onWindowPointerMove = (e: PointerEvent): void => {
+    const drag = this._paneDrag;
+    if (!drag || e.pointerId !== drag.pointerId) return;
+    if (drag.leftKey === 'file' && typeof drag.leftStartPx === 'number') {
+      this._filePaneWidthPx = Math.max(
+        this._filePaneFitWidthPx(),
+        drag.leftStartPx + (e.clientX - drag.startX)
+      );
+      this._applyPaneLayout();
+      return;
+    }
+    if (drag.rightKey === 'file' && typeof drag.rightStartPx === 'number') {
+      this._filePaneWidthPx = Math.max(
+        this._filePaneFitWidthPx(),
+        drag.rightStartPx - (e.clientX - drag.startX)
+      );
+      this._applyPaneLayout();
+      return;
+    }
+    const keys = this._visiblePaneKeys();
+    const frWeights = this._contentPaneFrWeights(keys);
+    const contentKeys = keys.filter((k): k is Exclude<PaneKey, 'file'> => k !== 'file');
+    const leftContentIdx = contentKeys.indexOf(
+      drag.leftKey as Exclude<PaneKey, 'file'>
+    );
+    if (leftContentIdx < 0 || leftContentIdx + 1 >= frWeights.length) return;
+    const pairFrTotal = frWeights[leftContentIdx]! + frWeights[leftContentIdx + 1]!;
+    if (!(pairFrTotal > 0)) return;
+    const pairPixels = Math.max(this._contentPaneAvailableWidthPx() * pairFrTotal, 1);
+    const deltaRatio = (e.clientX - drag.startX) / pairPixels;
+    const leftIdx = this._paneRatioIndex(drag.leftKey);
+    const rightIdx = this._paneRatioIndex(drag.rightKey);
+    const pairTotal = drag.leftStart + drag.rightStart;
+    if (!(pairTotal > 0) || leftIdx < 0 || rightIdx < 0) return;
+    const leftMin = Math.min(PANE_MIN_RATIO, pairTotal / 2);
+    const rightMin = Math.min(PANE_MIN_RATIO, pairTotal / 2);
+    let nextLeft = drag.leftStart + deltaRatio * pairTotal;
+    nextLeft = Math.min(Math.max(nextLeft, leftMin), pairTotal - rightMin);
+    this._paneRatios[leftIdx] = nextLeft;
+    this._paneRatios[rightIdx] = pairTotal - nextLeft;
+    this._applyPaneLayout();
+  };
+
+  private _onWindowPointerUp = (e: PointerEvent): void => {
+    const drag = this._paneDrag;
+    if (!drag || e.pointerId !== drag.pointerId) return;
+    const splitterRef = this._splitterRefs[drag.physicalSplitterIndex];
+    const splitter = splitterRef?.value;
+    splitter?.classList.remove('is-dragging');
+    if (splitter?.hasPointerCapture(e.pointerId))
+      splitter.releasePointerCapture(e.pointerId);
+    this._paneDrag = null;
+    this._paneDragActive = false;
+    this._normalizePaneRatios();
+    this._saveLayoutPrefs();
+    this.requestUpdate();
+  };
+
+  // ---------------------------------------------------------------------------
+  // Fragment thread navigation
+  // ---------------------------------------------------------------------------
+
+  private _findElementIdOnPage(el: Element): string | null {
+    if (!this._docState?.elementIds) return null;
+    for (const [node, id] of this._docState.elementIds) {
+      if (node === el) return id;
+    }
+    return null;
+  }
+
+  private _navigateThreadFragment(elementId: string, direction: string): void {
+    const s = this._docState;
+    const el = s?.idToElement?.get(elementId);
+    if (!el) return;
+    const nav = s?.threadNavByElement?.get(el);
+    if (!nav) return;
+    const target = direction === 'prev' ? nav.prev : nav.next;
+    if (!target) return;
+    const page = s!.elementPageByEl.get(target);
+    if (!page) return;
+    if (page === this.page) {
+      const id = this._findElementIdOnPage(target);
+      if (id) this._selectElement(id);
+      return;
+    }
+    s!.pendingSelectElement = target;
+    this.page = page;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Selection
+  // ---------------------------------------------------------------------------
+
+  private _findListVirtualTextHost(list: Element, target: Element): Element | null {
+    const nodes = [...list.childNodes] as ChildNode[];
+    let i = skipContainerLevelHead(nodes, 0);
+    while (i < nodes.length) {
+      const node = nodes[i]!;
+      if (
+        node.nodeType !== Node.ELEMENT_NODE ||
+        localName(node as Element) !== 'ldiv'
+      ) {
+        i++;
+        continue;
+      }
+      const ldiv = node as Element;
+      i++;
+      const end = skipUntilListItemBoundary(nodes, i);
+      if (target === ldiv || nodes.slice(i, end).some(n => xmlContains(target, n)))
+        return ldiv;
+      i = end;
+    }
+    return null;
+  }
+
+  private _findTableVirtualTextHost(
+    container: Element,
+    target: Element
+  ): Element | null {
+    const nodes = [...container.childNodes] as ChildNode[];
+    let i = skipContainerLevelHead(nodes, 0);
+    while (i < nodes.length) {
+      const node = nodes[i]!;
+      if (node.nodeType !== Node.ELEMENT_NODE) {
+        i++;
+        continue;
+      }
+      const tag = localName(node as Element);
+      if (
+        tag === 'nl' ||
+        isVirtualTextHost(node as Element) ||
+        CELL_SPAN_TAGS.has(tag) ||
+        !isCellToken(tag)
+      ) {
+        i++;
+        continue;
+      }
+      const cell = node as Element;
+      i++;
+      const end = skipUntilCellBoundary(nodes, i);
+      if (target === cell || nodes.slice(i, end).some(n => xmlContains(target, n)))
+        return cell;
+      i = end;
+    }
+    return null;
+  }
+
+  private _findVirtualTextHost(xmlEl: Element): Element | null {
+    let node: Element | null = xmlEl;
+    while (node) {
+      const parent: Element | null = node.parentElement;
+      if (!parent) return null;
+      const tag = localName(parent);
+      if (tag === 'list') {
+        const h = this._findListVirtualTextHost(parent, xmlEl);
+        if (h) return h;
+      }
+      if (OTSL_CONTAINER_TAGS.has(tag)) {
+        const h = this._findTableVirtualTextHost(parent, xmlEl);
+        if (h) return h;
+      }
+      node = parent;
+    }
+    return null;
+  }
+
+  private _resolveSelectionElement(xmlEl: Element | null): Element | null {
+    if (!xmlEl) return null;
+    if (isSemanticElement(xmlEl) || isVirtualTextHost(xmlEl)) return xmlEl;
+    let node: Element | null = xmlEl.parentElement;
+    while (node) {
+      if (localName(node) === 'doclang') break;
+      if (isSemanticElement(node) && !isListOrOtslContainer(node)) return node;
+      node = node.parentElement;
+    }
+    const virtualHost = this._findVirtualTextHost(xmlEl);
+    if (virtualHost) return virtualHost;
+    node = xmlEl.parentElement;
+    while (node) {
+      if (localName(node) === 'doclang') break;
+      if (isSemanticElement(node) || isVirtualTextHost(node)) return node;
+      node = node.parentElement;
+    }
+    return null;
+  }
+
+  private _resolveSelectionElementId(rawId: string | null): string | null {
+    const s = this._docState;
+    if (!rawId || !s?.idToElement || !s.elementIds) return null;
+    const xmlEl = s.idToElement.get(rawId);
+    if (!xmlEl) return null;
+    const resolved = this._resolveSelectionElement(xmlEl);
+    return resolved ? (s.elementIds.get(resolved) ?? null) : null;
+  }
+
+  private _selectElement(elementId: string): void {
+    if (!elementId) return;
+    this.selected = elementId;
+  }
+
+  private _clearSelection(): void {
+    this.selected = null;
+  }
+
+  private _syncToolbarPaneCheckboxes(): void {
+    this._toolbarRef.value?.syncPaneToggles({
+      file: this.panes.includes('file'),
+      page: this.panes.includes('page'),
+      markup: this.panes.includes('markup'),
+      reading: this.panes.includes('reading'),
+      fileAvailable: this._isPaneAvailable('file'),
+      pageAvailable: this._isPaneAvailable('page'),
+      hasState: Boolean(this._docState),
+    });
+  }
+
+  // ---------------------------------------------------------------------------
+  // Document open/close
+  // ---------------------------------------------------------------------------
+
+  private _setDocumentOpen(open: boolean, { markupOnly = false } = {}): void {
+    this._loaded = open;
+    this._markupOnly = open && markupOnly;
+    this._syncToolbarPaneCheckboxes();
+    this._applyPaneLayout();
+    this.requestUpdate();
+  }
+
+  private _setPageViewVisible(): void {
+    this._syncPagePaneControls();
+    this._syncToolbarPaneCheckboxes();
+    this._applyPaneLayout();
+  }
+
+  private _resetViewer(): void {
+    this._setDemoLoading(false);
+    this._collection.clearAll();
+    this._filePaneUserToggled = false;
+    this._pageViewPaneRef.value?.resetZoom();
+    this._docLabel = null;
+    this._setDocumentOpen(false);
+    // Setting document = null goes through the base class setter, which resets
+    // this.page to 1, calls _clearDocument() to clear all sub-views, and
+    // nulls _docState.
+    this.document = null;
+    this.selected = null;
+    this._syncCollectionPaneDefault();
+    this._syncToolbarPaneCheckboxes();
+    this._applyPaneLayout();
+    this.requestUpdate();
+  }
+
+  private _activateDocument(docState: DocumentState, initialPage = 1): void {
+    const entry = this._collection.activeEntry;
+    if (!entry) return;
+    this._pageViewPaneRef.value?.activateZoom(entry.pageZoom ?? PAGE_ZOOM_DEFAULT);
+    this._docLabel = entry.label;
+    this.selected = null;
+    // Setting this.document pushes docState to _docState and calls
+    // _renderDocument(), which forwards it to all sub-view refs.
+    // The base class also resets this.page to 1 on document change, so we
+    // then navigate to the correct initial page afterwards.
+    this.document = docState;
+    this._setDocumentOpen(true, { markupOnly: docState.markupOnly });
+    this._setPageViewVisible();
+    this.page = initialPage;
+    this._syncCollectionPaneDefault();
+    this._syncToolbarPaneCheckboxes();
+    this._applyPaneLayout();
+    this.requestUpdate();
+  }
+
+  // ---------------------------------------------------------------------------
+  // File catalog — delegated to CollectionController
+  // ---------------------------------------------------------------------------
+
+  private _syncCollectionPaneDefault(): void {
+    if (!this._filePaneUserToggled) {
+      const wasVisible = this.panes.includes('file');
+      const should = this._collection.hasMultiple();
+      this.panes = should
+        ? [...this.panes.filter(k => k !== 'file'), 'file']
+        : this.panes.filter(k => k !== 'file');
+      if (!wasVisible && should) {
+        this._paneRatios = [...DEFAULT_PANE_RATIOS];
+        this._normalizePaneRatios();
+        this._filePaneWidthPx = null;
+      }
+    }
+  }
+
+  private async _addFilesToCatalog(
+    files: File[],
+    { replace = false } = {}
+  ): Promise<void> {
+    if (replace) this._filePaneUserToggled = false;
+    const docState = await this._collection.addFiles(files, { replace });
+    if (!docState) return;
+    const entry = this._collection.activeEntry!;
+    this._activateDocument(docState, entry.currentPage ?? 1);
+  }
+
+  private async _appendFolderArchive(files: File[]): Promise<void> {
+    const docState = await this._collection.appendFolderArchive(files);
+    if (!docState) return;
+    const entry = this._collection.activeEntry!;
+    this._activateDocument(docState, entry.currentPage ?? 1);
+  }
+
+  private async _addArchiveBufferToCatalog(
+    buffer: ArrayBuffer,
+    label: string,
+    { replace = false } = {}
+  ): Promise<void> {
+    if (replace) this._filePaneUserToggled = false;
+    const docState = await this._collection.addArchiveBuffer(buffer, label, { replace });
+    if (!docState) return;
+    const entry = this._collection.activeEntry!;
+    this._activateDocument(docState, entry.currentPage ?? 1);
+  }
+
+  // ---------------------------------------------------------------------------
+  // Demo loading
+  // ---------------------------------------------------------------------------
+
+  private _setDemoLoading(loading: boolean): void {
+    this._demoLoading = loading;
+    this._emptyStateRef.value?.setDemoLoading(loading);
+    this._toolbarRef.value?.setDemoLoading(loading);
+    this.requestUpdate();
+  }
+
+  private async _loadDemo(): Promise<void> {
+    if (this._demoLoadInProgress) return;
+    this._demoLoadInProgress = true;
+    this._setDemoLoading(true);
+    try {
+      const demoUrl = this.example;
+      if (!demoUrl) throw new Error('example URL not defined');
+      const res = await fetch(demoUrl);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const label = demoUrl.split('/').pop() || 'demo.dclx';
+      await this._addArchiveBufferToCatalog(await res.arrayBuffer(), label, {
+        replace: true,
+      });
+    } catch (err) {
+      alert(
+        `Failed to load demo: ${(err as Error).message}\n\nServe this directory over HTTP (e.g. python3 -m http.server) and open the viewer from localhost.`
+      );
+    } finally {
+      this._demoLoadInProgress = false;
+      this._setDemoLoading(false);
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Drag-drop
+  // ---------------------------------------------------------------------------
+
+  private _hasArchiveTransfer(dataTransfer: DataTransfer | null): boolean {
+    return Boolean(dataTransfer && [...dataTransfer.types].includes('Files'));
+  }
+
+  private _initDragDrop(): void {
+    this.addEventListener('dragenter', (e: DragEvent) => {
+      if (!this._hasArchiveTransfer(e.dataTransfer)) return;
+      e.preventDefault();
+      this._dragOver = true;
+      this.requestUpdate();
+    });
+    this.addEventListener('dragover', (e: DragEvent) => {
+      if (!this._hasArchiveTransfer(e.dataTransfer)) return;
+      e.preventDefault();
+      if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
+    });
+    this.addEventListener('dragleave', (e: DragEvent) => {
+      if (!this._hasArchiveTransfer(e.dataTransfer)) return;
+      if (e.relatedTarget && this.contains(e.relatedTarget as Node)) return;
+      this._dragOver = false;
+      this.requestUpdate();
+    });
+    this.addEventListener('drop', async (e: DragEvent) => {
+      if (!this._hasArchiveTransfer(e.dataTransfer)) return;
+      e.preventDefault();
+      this._dragOver = false;
+      this.requestUpdate();
+      if (e.dataTransfer) await this._loadFromDrop(e.dataTransfer);
+    });
+  }
+
+  private async _loadFromFileList(files: File[]): Promise<void> {
+    if (files.some(f => f.name === 'document.xml')) {
+      await this._appendFolderArchive(files);
+      return;
+    }
+    const supported = files.filter(
+      f => this._collection.isArchiveFile(f) || this._collection.isMarkupFile(f)
+    );
+    if (supported.length) await this._addFilesToCatalog(supported, { replace: false });
+  }
+
+  private async _loadFromDrop(dataTransfer: DataTransfer): Promise<void> {
+    await this._loadFromFileList([...dataTransfer.files]);
+  }
+
+  private _initFileHandling(): void {
+    interface LaunchParams {
+      files?: FileSystemFileHandle[];
+    }
+    interface LaunchQueue {
+      setConsumer(consumer: (launchParams: LaunchParams) => Promise<void> | void): void;
+    }
+    const windowWithLaunchQueue = window as unknown as { launchQueue?: LaunchQueue };
+    if (!('launchQueue' in window) || !windowWithLaunchQueue.launchQueue) return;
+    windowWithLaunchQueue.launchQueue.setConsumer(async (launchParams: LaunchParams) => {
+      if (!launchParams.files?.length) return;
+      this._suppressDemoLoad = true;
+      const files = await Promise.all(launchParams.files.map(handle => handle.getFile()));
+      await this._loadFromFileList(files);
+    });
+  }
+
+  private _initPaneDragListeners(): void {
+    window.addEventListener('pointermove', this._onWindowPointerMove);
+    window.addEventListener('pointerup', this._onWindowPointerUp);
+    window.addEventListener('pointercancel', this._onWindowPointerUp);
+  }
+
+  // ---------------------------------------------------------------------------
+  // Event handlers (from child components via bubbling)
+  // ---------------------------------------------------------------------------
+
+  private _onHomeClick = (e: Event): void => {
+    e.preventDefault();
+    this._resetViewer();
+  };
+
+  private _onLoadDemo = (): void => {
+    this._loadDemo();
+  };
+
+  private _onOpenFiles = (e: Event): void => {
+    const files = (e as CustomEvent<{ files: File[] }>).detail.files.filter(
+      f => this._collection.isArchiveFile(f) || this._collection.isMarkupFile(f)
+    );
+    if (!files.length) return;
+    this._addFilesToCatalog(files, { replace: true });
+  };
+
+  private _onTogglePane = (e: Event): void => {
+    const { pane, checked } = (e as CustomEvent<{ pane: PaneKey; checked: boolean }>)
+      .detail;
+    if (!this._docState) {
+      this._syncToolbarPaneCheckboxes();
+      return;
+    }
+    const nextKeys = [...PANE_KEYS].filter(k =>
+      k === pane ? checked : this.panes.includes(k) && this._isPaneAvailable(k)
+    );
+    if (!nextKeys.length) {
+      this._syncToolbarPaneCheckboxes();
+      return;
+    }
+    this._setUserPaneVisible(pane, checked);
+  };
+
+  private _onResetPaneLayout = (): void => {
+    if (this._docState) this._resetPaneLayout();
+  };
+
+  private _onCollectionSelect = (e: Event): void => {
+    const { index } = (e as CustomEvent<{ index: number }>).detail;
+    this._collection.persistActiveViewState(
+      this.page,
+      this._pageViewPaneRef.value?.zoomPercent ?? PAGE_ZOOM_DEFAULT
+    );
+    this._collection.selectEntry(index).then(docState => {
+      if (!docState) { this._resetViewer(); return; }
+      const entry = this._collection.activeEntry!;
+      this._activateDocument(docState, entry.currentPage ?? 1);
+    });
+  };
+
+  private _onCollectionClose = (e: Event): void => {
+    const { index } = (e as CustomEvent<{ index: number }>).detail;
+    this._collection.persistActiveViewState(
+      this.page,
+      this._pageViewPaneRef.value?.zoomPercent ?? PAGE_ZOOM_DEFAULT
+    );
+    this._collection.closeEntry(index).then(({ doc, newIndex }) => {
+      if (newIndex < 0) { this._resetViewer(); return; }
+      if (doc) {
+        const entry = this._collection.activeEntry!;
+        this._activateDocument(doc, entry.currentPage ?? 1);
+      } else {
+        this._syncCollectionPaneDefault();
+        this._syncToolbarPaneCheckboxes();
+        this._applyPaneLayout();
+        this.requestUpdate();
+      }
+    });
+  };
+
+  private _onCollectionCloseAll = (): void => {
+    const count = this._collection.size;
+    if (!count) return;
+    const firstLabel = this._collection.entries[0]?.label ?? '';
+    const msg =
+      count === 1
+        ? `Remove "${firstLabel}" from the viewer?`
+        : `Remove all ${count} open files from the viewer?`;
+    if (confirm(msg)) this._resetViewer();
+  };
+
+  private _onElementSelect = (e: Event): void => {
+    const rawId = (e as CustomEvent<{ id: string }>).detail.id;
+    const resolved = this._resolveSelectionElementId(rawId) ?? rawId;
+    this._selectElement(resolved);
+  };
+
+  private _onNavigateThread = (e: Event): void => {
+    const { elementId, direction } = (
+      e as CustomEvent<{ elementId: string; direction: string }>
+    ).detail;
+    this._navigateThreadFragment(elementId, direction);
+  };
+
+  private _onClearSelection = (): void => {
+    this._clearSelection();
+  };
+
+  private _onViewPage = (e: Event): void => {
+    this.page = (e as CustomEvent<{ page: number }>).detail.page;
+  };
+
+}
diff --git a/core/src/doclang/document.ts b/core/src/doclang/document.ts
new file mode 100644
index 0000000..95aa1ea
--- /dev/null
+++ b/core/src/doclang/document.ts
@@ -0,0 +1,715 @@
+import {
+  DOCLANG_NS,
+  HEAD_TAGS,
+  CELL_SPAN_TAGS,
+  OTSL_CONTAINER_TAGS,
+  childElements,
+  localName,
+  headLocations,
+  firstHeadChild,
+  walkElements,
+  locationResolution,
+  parseElementHeadAt,
+  skipContainerLevelHead,
+  skipUntilListItemBoundary,
+  skipUntilCellBoundary,
+  isCellToken,
+  isTextLikeNode,
+  isWhitespaceOnlyText,
+  serializeMarkupTextNodes,
+  formatMarkupTextNode,
+  archiveRelativeAssetPath,
+  elementLayer,
+  elementLabel,
+  isVirtualTextOverlayUnit,
+} from './dom';
+import type {
+  DocumentState,
+  Resolution,
+  BoundingBox,
+  ReadingOrderStep,
+  CaptionLink,
+  XrefLink,
+  FragmentLink,
+  FragmentNavItem,
+  ThreadNav,
+} from './types';
+import { extractArchiveFromZipBuffer } from './zip';
+import { isPictureContentElement, isTableContentElement } from './dom';
+
+export const PAGE_IMAGE_RE = /^(\d+)\.(png|jpe?g|webp)$/i;
+export const NO_MARKUP = '(No markup to be shown.)';
+const RENDER_FORMAT_TAGS = new Set([
+  'bold',
+  'italic',
+  'underline',
+  'strikethrough',
+  'superscript',
+  'subscript',
+  'handwriting',
+  'rtl',
+  'content',
+]);
+
+// ---------------------------------------------------------------------------
+// Document XML parsing helpers
+// ---------------------------------------------------------------------------
+
+export function splitIntoSegments(root: Element): Element[][] {
+  const body = childElements(root).filter(el => localName(el) !== 'head');
+  const segments: Element[][] = [[]];
+  for (const el of body) {
+    if (localName(el) === 'page_break') {
+      segments.push([]);
+    } else {
+      segments[segments.length - 1]!.push(el);
+    }
+  }
+  return segments.length ? segments : [[]];
+}
+
+export function segmentHasMarkup(segment: Element[]): boolean {
+  return segment.some(el => el.nodeType === Node.ELEMENT_NODE);
+}
+
+export function readDefaultResolution(head: Element | null): Resolution {
+  const fallback = { width: 512, height: 512 };
+  if (!head) return fallback;
+  const dr = childElements(head).find(el => localName(el) === 'default_resolution');
+  if (!dr) return fallback;
+  const w = parseInt(dr.getAttribute('width') ?? '512', 10);
+  const h = parseInt(dr.getAttribute('height') ?? '512', 10);
+  return {
+    width: Number.isFinite(w) && w > 0 ? w : 512,
+    height: Number.isFinite(h) && h > 0 ? h : 512,
+  };
+}
+
+export function assignElementIds(segment: Element[]): Map<Element, string> {
+  const ids = new Map<Element, string>();
+  let counter = 0;
+  walkElements(segment, el => {
+    ids.set(el, `el-${counter++}`);
+  });
+  return ids;
+}
+
+export function invertElementIds(
+  elementIds: Map<Element, string>
+): Map<string, Element> {
+  const idToElement = new Map<string, Element>();
+  for (const [el, id] of elementIds) idToElement.set(id, el);
+  return idToElement;
+}
+
+// ---------------------------------------------------------------------------
+// Thread / reading order helpers
+// ---------------------------------------------------------------------------
+
+function buildThreadsById(docRoot: Element): Map<string, Element[]> {
+  const map = new Map<string, Element[]>();
+  const roots = childElements(docRoot).filter(el => localName(el) !== 'head');
+  walkElements(roots, el => {
+    for (const child of childElements(el)) {
+      if (localName(child) !== 'thread') continue;
+      const threadId = child.getAttribute('thread_id');
+      if (!threadId) continue;
+      if (!map.has(threadId)) map.set(threadId, []);
+      map.get(threadId)!.push(el);
+    }
+  });
+  return map;
+}
+
+export function buildElementPageMap(segments: Element[][]): Map<Element, number> {
+  const elementPage = new Map<Element, number>();
+  segments.forEach((segment, idx) => {
+    const pageNum = idx + 1;
+    walkElements(segment, el => elementPage.set(el, pageNum));
+  });
+  return elementPage;
+}
+
+export function buildThreadPagesById(
+  docRoot: Element,
+  elementPageByEl: Map<Element, number>
+): Map<string, Set<number>> {
+  const threadPagesById = new Map<string, Set<number>>();
+  for (const [threadId, elements] of buildThreadsById(docRoot)) {
+    const pages = new Set<number>();
+    for (const el of elements) {
+      const page = elementPageByEl.get(el);
+      if (page) pages.add(page);
+    }
+    if (pages.size) threadPagesById.set(threadId, pages);
+  }
+  return threadPagesById;
+}
+
+export function buildThreadNavByElement(docRoot: Element): Map<Element, ThreadNav> {
+  const nav = new Map<Element, ThreadNav>();
+  for (const [, elements] of buildThreadsById(docRoot)) {
+    for (let i = 0; i < elements.length; i += 1) {
+      nav.set(elements[i]!, {
+        prev: i > 0 ? elements[i - 1]! : null,
+        next: i < elements.length - 1 ? elements[i + 1]! : null,
+      });
+    }
+  }
+  return nav;
+}
+
+function isReadingOrderUnit(el: Element): boolean {
+  const tag = localName(el);
+  if (tag === 'caption') return true;
+  if (
+    HEAD_TAGS.has(tag) ||
+    tag === 'location' ||
+    tag === 'h_thread' ||
+    tag === 'page_break'
+  )
+    return false;
+  if (tag === 'nl' || CELL_SPAN_TAGS.has(tag)) return false;
+  if (RENDER_FORMAT_TAGS.has(tag) || tag === 'src' || tag === 'checkbox') return false;
+  return true;
+}
+
+export function computeReadingOrder(docRoot: Element): Element[] {
+  const bodyChildren = childElements(docRoot).filter(el => localName(el) !== 'head');
+  const threadsById = buildThreadsById(docRoot);
+  const consumedViaXref = new Set<Element>();
+  const order: Element[] = [];
+
+  function record(el: Element): void {
+    if (!isReadingOrderUnit(el)) return;
+    order.push(el);
+  }
+
+  function consumeThread(threadId: string): void {
+    for (const target of threadsById.get(threadId) ?? []) {
+      if (consumedViaXref.has(target)) continue;
+      consumedViaXref.add(target);
+      visitElement(target);
+    }
+  }
+
+  function walkChildren(parent: Element): void {
+    for (const child of parent.childNodes) {
+      if (child.nodeType !== Node.ELEMENT_NODE) continue;
+      const el = child as Element;
+      const tag = localName(el);
+      if (tag === 'xref') {
+        const threadId = el.getAttribute('thread_id');
+        if (threadId) consumeThread(threadId);
+        continue;
+      }
+      if (tag === 'page_break') continue;
+      visitElement(el);
+    }
+  }
+
+  function visitElement(el: Element): void {
+    record(el);
+    walkChildren(el);
+  }
+
+  for (const el of bodyChildren) {
+    if (localName(el) === 'page_break') continue;
+    if (consumedViaXref.has(el)) continue;
+    visitElement(el);
+  }
+
+  return order;
+}
+
+function isReadingOrderOverlayUnit(el: Element): boolean {
+  if (!isReadingOrderUnit(el)) return false;
+  if (isPictureContentElement(el) || isTableContentElement(el)) return false;
+  if (headLocations(el).length === 4) return true;
+  return isVirtualTextOverlayUnit(el);
+}
+
+export function computeReadingOrderDisplayNumbers(
+  readingOrder: Element[]
+): Map<Element, number> {
+  const numbers = new Map<Element, number>();
+  let n = 0;
+  for (const el of readingOrder) {
+    if (!isReadingOrderOverlayUnit(el)) continue;
+    n += 1;
+    numbers.set(el, n);
+  }
+  return numbers;
+}
+
+// ---------------------------------------------------------------------------
+// Bounding box collection
+// ---------------------------------------------------------------------------
+
+function pushBoundingBox(
+  boxes: BoundingBox[],
+  locs: Element[],
+  defaultResolution: Resolution,
+  kind: string,
+  tag: string,
+  elementId: string,
+  layer = 'body'
+): void {
+  const [x0el, y0el, x1el, y1el] = locs as [Element, Element, Element, Element];
+  const resW = locationResolution(x0el, defaultResolution.width);
+  const resH = locationResolution(y0el, defaultResolution.height);
+  boxes.push({
+    kind,
+    tag,
+    elementId,
+    layer,
+    x0: parseInt(x0el.getAttribute('value') ?? '0', 10),
+    y0: parseInt(y0el.getAttribute('value') ?? '0', 10),
+    x1: parseInt(x1el.getAttribute('value') ?? '0', 10),
+    y1: parseInt(y1el.getAttribute('value') ?? '0', 10),
+    resW,
+    resH,
+  });
+}
+
+function collectListVirtualTextBoxes(
+  list: Element,
+  defaultResolution: Resolution,
+  boxes: BoundingBox[],
+  elementIds: Map<Element, string>
+): void {
+  const nodes = [...list.childNodes];
+  let i = skipContainerLevelHead(nodes, 0);
+  while (i < nodes.length) {
+    const node = nodes[i]!;
+    if (node.nodeType !== Node.ELEMENT_NODE || localName(node as Element) !== 'ldiv') {
+      i += 1;
+      continue;
+    }
+    i += 1;
+    const head = parseElementHeadAt(nodes, i);
+    if (head) {
+      const elementId = elementIds.get(node as Element);
+      if (elementId) {
+        pushBoundingBox(
+          boxes,
+          head.locs,
+          defaultResolution,
+          'text',
+          'text',
+          elementId,
+          elementLayer(node as Element)
+        );
+      }
+      i = head.nextIndex;
+    }
+    i = skipUntilListItemBoundary(nodes, i);
+  }
+}
+
+function collectTableVirtualTextBoxes(
+  container: Element,
+  defaultResolution: Resolution,
+  boxes: BoundingBox[],
+  elementIds: Map<Element, string>
+): void {
+  const nodes = [...container.childNodes];
+  let i = skipContainerLevelHead(nodes, 0);
+  while (i < nodes.length) {
+    const node = nodes[i]!;
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      i += 1;
+      continue;
+    }
+    const tag = localName(node as Element);
+    if (!isCellToken(tag)) {
+      i += 1;
+      continue;
+    }
+    if (tag === 'nl') {
+      i += 1;
+      continue;
+    }
+    i += 1;
+    const head = parseElementHeadAt(nodes, i);
+    if (head) {
+      const elementId = elementIds.get(node as Element);
+      if (elementId) {
+        pushBoundingBox(
+          boxes,
+          head.locs,
+          defaultResolution,
+          'text',
+          'text',
+          elementId,
+          elementLayer(node as Element)
+        );
+      }
+      i = head.nextIndex;
+    }
+    i = skipUntilCellBoundary(nodes, i);
+  }
+}
+
+export function collectBoundingBoxes(
+  segment: Element[],
+  defaultResolution: Resolution,
+  elementIds: Map<Element, string>
+): BoundingBox[] {
+  const boxes: BoundingBox[] = [];
+  walkElements(segment, el => {
+    const locs = headLocations(el);
+    if (locs.length !== 4) return;
+    const elementId = elementIds.get(el);
+    if (!elementId) return;
+    pushBoundingBox(
+      boxes,
+      locs,
+      defaultResolution,
+      localName(el),
+      elementLabel(el),
+      elementId,
+      elementLayer(el)
+    );
+  });
+  walkElements(segment, el => {
+    const tag = localName(el);
+    if (tag === 'list')
+      collectListVirtualTextBoxes(el, defaultResolution, boxes, elementIds);
+    else if (OTSL_CONTAINER_TAGS.has(tag)) {
+      collectTableVirtualTextBoxes(el, defaultResolution, boxes, elementIds);
+    }
+  });
+  return boxes;
+}
+
+export function collectCaptionLinks(
+  segment: Element[],
+  elementIds: Map<Element, string>,
+  boxes: BoundingBox[]
+): CaptionLink[] {
+  const boxById = new Map(boxes.map(b => [b.elementId, b]));
+  const links: CaptionLink[] = [];
+  walkElements(segment, el => {
+    if (localName(el) !== 'caption') return;
+    const captionId = elementIds.get(el);
+    const captionBox = captionId ? boxById.get(captionId) : null;
+    if (!captionBox) return;
+    const host = el.parentElement;
+    if (!host || headLocations(host).length !== 4) return;
+    const hostId = elementIds.get(host);
+    const hostBox = hostId ? boxById.get(hostId) : null;
+    if (!hostBox) return;
+    links.push({
+      captionBox,
+      hostBox,
+      captionElementId: captionId!,
+      hostElementId: hostId!,
+    });
+  });
+  return links;
+}
+
+export function collectXrefLinks(
+  segment: Element[],
+  elementIds: Map<Element, string>,
+  boxes: BoundingBox[]
+): XrefLink[] {
+  const boxById = new Map(boxes.map(b => [b.elementId, b]));
+  const threadsById = new Map<string, { elementId: string; box: BoundingBox }[]>();
+
+  walkElements(segment, el => {
+    const elementId = elementIds.get(el);
+    const box = elementId ? boxById.get(elementId) : null;
+    if (!box) return;
+    for (const thread of childElements(el)) {
+      if (localName(thread) !== 'thread') continue;
+      const threadId = thread.getAttribute('thread_id');
+      if (!threadId) continue;
+      if (!threadsById.has(threadId)) threadsById.set(threadId, []);
+      threadsById.get(threadId)!.push({ elementId: elementId!, box });
+    }
+  });
+
+  const links: XrefLink[] = [];
+  walkElements(segment, el => {
+    const xrefs = childElements(el).filter(c => localName(c) === 'xref');
+    if (!xrefs.length) return;
+    const from = findNearestLocatedBox(el, elementIds, boxById);
+    if (!from) return;
+    for (const xref of xrefs) {
+      const threadId = xref.getAttribute('thread_id');
+      if (!threadId) continue;
+      for (const { elementId: toId, box: toBox } of threadsById.get(threadId) ?? []) {
+        if (toId === from.elementId) continue;
+        links.push({
+          fromBox: from.box,
+          toBox,
+          fromElementId: from.elementId,
+          toElementId: toId,
+        });
+      }
+    }
+  });
+  return links;
+}
+
+function findNearestLocatedBox(
+  el: Element,
+  elementIds: Map<Element, string>,
+  boxById: Map<string, BoundingBox>
+): { elementId: string; box: BoundingBox } | null {
+  let node: Element | null = el;
+  while (node) {
+    const elementId = elementIds.get(node);
+    const box = elementId ? boxById.get(elementId) : null;
+    if (box) return { elementId: elementId!, box };
+    if (localName(node) === 'doclang') break;
+    node = node.parentElement;
+  }
+  return null;
+}
+
+export function collectFragmentLinks(
+  segment: Element[],
+  elementIds: Map<Element, string>,
+  boxes: BoundingBox[],
+  pageNum: number,
+  threadPagesById: Map<string, Set<number>>
+): FragmentLink[] {
+  const boxById = new Map(boxes.map(b => [b.elementId, b]));
+  const onPage = new Map<string, { elementId: string; box: BoundingBox }[]>();
+
+  walkElements(segment, el => {
+    const thread = firstHeadChild(el, 'thread');
+    const threadId = thread?.getAttribute('thread_id');
+    if (!threadId) return;
+    const elementId = elementIds.get(el);
+    const box = elementId ? boxById.get(elementId) : null;
+    if (!box) return;
+    if (!onPage.has(threadId)) onPage.set(threadId, []);
+    onPage.get(threadId)!.push({ elementId: elementId!, box });
+  });
+
+  const links: FragmentLink[] = [];
+
+  for (const [threadId, members] of onPage) {
+    if (members.length >= 2) {
+      for (let i = 0; i < members.length - 1; i += 1) {
+        links.push({
+          fromBox: members[i]!.box,
+          toBox: members[i + 1]!.box,
+          fromElementId: members[i]!.elementId,
+          toElementId: members[i + 1]!.elementId,
+          threadId,
+        });
+      }
+      continue;
+    }
+
+    if (members.length !== 1) continue;
+    const threadPages = threadPagesById.get(threadId);
+    if (!threadPages) continue;
+    const hasPrevious = [...threadPages].some(p => p < pageNum);
+    const hasFollowing = [...threadPages].some(p => p > pageNum);
+    if (!hasPrevious && !hasFollowing) continue;
+
+    const base = {
+      fromBox: members[0]!.box,
+      toBox: null,
+      fromElementId: members[0]!.elementId,
+      toElementId: null,
+      threadId,
+    };
+    if (hasPrevious) links.push({ ...base, targetCorner: 'tl' as const });
+    if (hasFollowing) links.push({ ...base, targetCorner: 'br' as const });
+  }
+
+  return links;
+}
+
+export function collectFragmentNavItems(
+  segment: Element[],
+  elementIds: Map<Element, string>,
+  boxes: BoundingBox[],
+  threadNavByElement: Map<Element, ThreadNav>
+): FragmentNavItem[] {
+  const boxById = new Map(boxes.map(b => [b.elementId, b]));
+  const items: FragmentNavItem[] = [];
+  walkElements(segment, el => {
+    const nav = threadNavByElement.get(el);
+    if (!nav || (!nav.prev && !nav.next)) return;
+    const elementId = elementIds.get(el);
+    const box = elementId ? boxById.get(elementId) : null;
+    if (!box) return;
+    items.push({
+      elementId: elementId!,
+      box,
+      hasPrev: nav.prev !== null,
+      hasNext: nav.next !== null,
+    });
+  });
+  return items;
+}
+
+export function collectReadingOrderSteps(
+  segment: Element[],
+  elementIds: Map<Element, string>,
+  boxes: BoundingBox[],
+  readingOrder: Element[],
+  globalNumbering = true,
+  displayNumbers: Map<Element, number> | null = null
+): ReadingOrderStep[] {
+  const boxById = new Map(boxes.map(b => [b.elementId, b]));
+  const steps: ReadingOrderStep[] = [];
+  let pageOrder = 0;
+
+  readingOrder.forEach(el => {
+    if (isPictureContentElement(el) || isTableContentElement(el)) return;
+    const elementId = elementIds.get(el);
+    if (!elementId) return;
+    const box = boxById.get(elementId);
+    if (!box) return;
+    pageOrder += 1;
+    steps.push({
+      order: globalNumbering ? (displayNumbers?.get(el) ?? pageOrder) : pageOrder,
+      box,
+      elementId,
+    });
+  });
+
+  return steps;
+}
+
+// ---------------------------------------------------------------------------
+// Build document state
+// ---------------------------------------------------------------------------
+
+export function buildDocumentState(
+  markupXml: string,
+  pageImages: Map<number, string>,
+  label: string,
+  assetUrls: Map<string, string>,
+  { markupOnly }: { markupOnly: boolean }
+): DocumentState | null {
+  const doc = new DOMParser().parseFromString(markupXml, 'application/xml');
+  const parseError = doc.querySelector('parsererror');
+  if (parseError) {
+    alert(`Invalid XML in ${label}`);
+    return null;
+  }
+  const root = doc.documentElement;
+  if (localName(root) !== 'doclang') {
+    alert(`${label}: root element must be <doclang>`);
+    return null;
+  }
+
+  const head = childElements(root).find(el => localName(el) === 'head') ?? null;
+  const defaultResolution = readDefaultResolution(head);
+  const segments = markupOnly
+    ? [childElements(root).filter(el => localName(el) !== 'head')]
+    : splitIntoSegments(root);
+  const hasPageView = !markupOnly && pageImages.size > 0;
+  const maxImagePage = hasPageView ? Math.max(...pageImages.keys()) : 0;
+  const pageCount = markupOnly ? 1 : Math.max(segments.length, maxImagePage, 1);
+  const readingOrder = computeReadingOrder(root);
+  const elementPageByEl = buildElementPageMap(segments);
+
+  return {
+    pageImages,
+    assetUrls,
+    pageCount,
+    segments,
+    defaultResolution,
+    elementIds: new Map(),
+    idToElement: new Map(),
+    hasPageView,
+    markupOnly,
+    docRoot: root,
+    threadPagesById: buildThreadPagesById(root, elementPageByEl),
+    elementPageByEl,
+    threadNavByElement: buildThreadNavByElement(root),
+    pendingSelectElement: null,
+    readingOrder,
+    readingOrderDisplayNumbers: computeReadingOrderDisplayNumbers(readingOrder),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Archive extraction helpers
+// ---------------------------------------------------------------------------
+
+export async function extractArchiveFromFiles(files: File[]): Promise<{
+  markupXml: string;
+  pageImages: Map<number, string>;
+  assetUrls: Map<string, string>;
+}> {
+  const markupFile = files.find(f => f.name === 'document.xml');
+  if (!markupFile) throw new Error('Archive must contain document.xml at its root.');
+  const markupXml = await markupFile.text();
+  const pageImages = new Map<number, string>();
+  const assetUrls = new Map<string, string>();
+  for (const f of files) {
+    const relPath = f.webkitRelativePath || f.name;
+    const parts = relPath.split('/');
+    if (parts.length >= 2 && parts[parts.length - 2] === 'pages') {
+      const m = PAGE_IMAGE_RE.exec(f.name);
+      if (m) pageImages.set(Number(m[1]), URL.createObjectURL(f));
+    }
+    const assetPath = archiveRelativeAssetPath(relPath);
+    if (assetPath) assetUrls.set(assetPath, URL.createObjectURL(f));
+  }
+  return { markupXml, pageImages, assetUrls };
+}
+
+export { extractArchiveFromZipBuffer };
+
+export function revokeDocumentState(docState: DocumentState): void {
+  if (!docState) return;
+  for (const url of docState.pageImages.values()) {
+    if (url.startsWith('blob:')) URL.revokeObjectURL(url);
+  }
+  for (const url of docState.assetUrls.values()) {
+    if (url.startsWith('blob:')) URL.revokeObjectURL(url);
+  }
+}
+
+export function serializeSegment(segment: Element[]): string {
+  return segment.map(el => serializeElement(el, 0)).join('\n');
+}
+
+function serializeElement(el: Element, depth: number): string {
+  const pad = '  '.repeat(depth);
+  const tag = localName(el);
+  const attrs = [...el.attributes]
+    .filter(a => a.name !== 'xmlns' || a.value !== DOCLANG_NS)
+    .map(a => `${a.name}="${a.value}"`)
+    .join(' ');
+  const attrStr = attrs ? ` ${attrs}` : '';
+
+  if (!el.childNodes.length) return `${pad}<${tag}${attrStr}/>`;
+
+  const meaningfulText = [...el.childNodes].filter(
+    n => isTextLikeNode(n) && !isWhitespaceOnlyText(n)
+  );
+  const textOnly =
+    meaningfulText.length > 0 &&
+    meaningfulText.every(isTextLikeNode) &&
+    !childElements(el).length;
+  if (textOnly) {
+    const text = serializeMarkupTextNodes(el.childNodes);
+    if (text) return `${pad}<${tag}${attrStr}>${text}</${tag}>`;
+  }
+
+  const parts = [`${pad}<${tag}${attrStr}>`];
+  for (const child of el.childNodes) {
+    if (isTextLikeNode(child)) {
+      const text = formatMarkupTextNode(child);
+      if (text) parts.push('  '.repeat(depth + 1) + text);
+    } else if (child.nodeType === Node.ELEMENT_NODE) {
+      parts.push(serializeElement(child as Element, depth + 1));
+    }
+  }
+  parts.push(`${pad}</${tag}>`);
+  return parts.join('\n');
+}
diff --git a/core/src/doclang/dom.ts b/core/src/doclang/dom.ts
new file mode 100644
index 0000000..aac574e
--- /dev/null
+++ b/core/src/doclang/dom.ts
@@ -0,0 +1,454 @@
+
+export const DOCLANG_NS = 'https://www.doclang.ai/ns/v0';
+export const HEAD_TAGS = new Set([
+  'label',
+  'thread',
+  'xref',
+  'href',
+  'layer',
+  'location',
+  'caption',
+  'description',
+  'summary',
+  'custom',
+]);
+export const SEMANTIC_TAGS = new Set([
+  'text',
+  'heading',
+  'footnote',
+  'page_header',
+  'page_footer',
+  'field_region',
+  'list',
+  'table',
+  'index',
+  'formula',
+  'code',
+  'picture',
+  'marker',
+  'group',
+  'field_heading',
+  'field_item',
+  'key',
+  'value',
+  'hint',
+  'caption',
+  'page_break',
+]);
+export const CELL_TOKENS = new Set([
+  'fcel',
+  'ecel',
+  'ched',
+  'rhed',
+  'corn',
+  'srow',
+  'lcel',
+  'ucel',
+  'xcel',
+  'nl',
+]);
+export const CELL_CONTENT_TAGS = new Set([
+  'fcel',
+  'ecel',
+  'ched',
+  'rhed',
+  'corn',
+  'srow',
+]);
+export const CELL_SPAN_TAGS = new Set(['lcel', 'ucel', 'xcel']);
+export const OTSL_CONTAINER_TAGS = new Set(['table', 'index', 'tabular']);
+
+export function isTextLikeNode(node: Node): boolean {
+  return node.nodeType === Node.TEXT_NODE || node.nodeType === Node.CDATA_SECTION_NODE;
+}
+
+export function isWhitespaceOnlyText(node: Node): boolean {
+  return isTextLikeNode(node) && !node.textContent?.trim();
+}
+
+export function markupAttributes(el: Element): { name: string; value: string }[] {
+  return [...el.attributes]
+    .filter(a => a.name !== 'xmlns' || a.value !== DOCLANG_NS)
+    .map(a => ({ name: a.name, value: a.value }));
+}
+
+export function childElements(el: Element): Element[] {
+  return [...el.children];
+}
+
+export function localName(el: Element): string {
+  return el.localName || el.tagName.replace(/^.*:/, '');
+}
+
+export function headLocations(el: Element): Element[] {
+  return parseElementHeadAt([...el.childNodes], 0)?.locs ?? [];
+}
+
+interface ParsedElementHead {
+  locs: Element[];
+  nextIndex: number;
+}
+
+export function parseElementHeadAt(
+  nodes: ArrayLike<ChildNode>,
+  startIdx: number
+): ParsedElementHead | null {
+  const locs: Element[] = [];
+  let i = startIdx;
+  while (i < nodes.length) {
+    const node = nodes[i];
+    if (!node) {
+      i += 1;
+      continue;
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      i += 1;
+      continue;
+    }
+    const tag = localName(node as Element);
+    if (tag === 'location') {
+      locs.push(node as Element);
+      i += 1;
+      if (locs.length === 4) return { locs, nextIndex: i };
+      continue;
+    }
+    if (locs.length) break;
+    if (HEAD_TAGS.has(tag)) {
+      i += 1;
+      continue;
+    }
+    break;
+  }
+  return locs.length === 4 ? { locs, nextIndex: i } : null;
+}
+
+export function walkElements(
+  nodes: ArrayLike<ChildNode> | Element[],
+  fn: (el: Element) => void
+): void {
+  for (let i = 0; i < nodes.length; i += 1) {
+    const node = nodes[i];
+    if (!node || node.nodeType !== Node.ELEMENT_NODE) continue;
+    fn(node as Element);
+    walkElements(childElements(node as Element), fn);
+  }
+}
+
+export function isCellToken(tag: string): boolean {
+  return CELL_TOKENS.has(tag);
+}
+
+export function isListOrOtslContainer(el: Element): boolean {
+  const tag = localName(el);
+  return tag === 'list' || OTSL_CONTAINER_TAGS.has(tag);
+}
+
+export function skipContainerLevelHead(nodes: ChildNode[], startIdx: number): number {
+  let i = startIdx;
+  while (i < nodes.length) {
+    const node = nodes[i];
+    if (!node) {
+      i += 1;
+      continue;
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      i += 1;
+      continue;
+    }
+    const tag = localName(node as Element);
+    if (tag === 'ldiv' || isCellToken(tag)) break;
+    if (HEAD_TAGS.has(tag) || tag === 'location') {
+      i += 1;
+      continue;
+    }
+    break;
+  }
+  return i;
+}
+
+export function skipUntilListItemBoundary(
+  nodes: ChildNode[],
+  startIdx: number
+): number {
+  let i = startIdx;
+  while (i < nodes.length) {
+    const node = nodes[i];
+    if (
+      node &&
+      node.nodeType === Node.ELEMENT_NODE &&
+      localName(node as Element) === 'ldiv'
+    )
+      break;
+    i += 1;
+  }
+  return i;
+}
+
+export function skipUntilCellBoundary(nodes: ChildNode[], startIdx: number): number {
+  let i = startIdx;
+  while (i < nodes.length) {
+    const node = nodes[i];
+    if (
+      node &&
+      node.nodeType === Node.ELEMENT_NODE &&
+      isCellToken(localName(node as Element))
+    )
+      break;
+    i += 1;
+  }
+  return i;
+}
+
+export function locationResolution(el: Element, axisDefault: number): number {
+  const r = parseInt(el.getAttribute('resolution') ?? String(axisDefault), 10);
+  return Number.isFinite(r) && r > 0 ? r : axisDefault;
+}
+
+export function headingLevel(el: Element): number {
+  return Math.min(Math.max(parseInt(el.getAttribute('level') ?? '1', 10) || 1, 1), 6);
+}
+
+export function firstHeadChild(el: Element, tag: string): Element | null {
+  return childElements(el).find(child => localName(child) === tag) ?? null;
+}
+
+export function xmlContains(target: Node, ancestor: Node): boolean {
+  let node: Node | null = target;
+  while (node) {
+    if (node === ancestor) return true;
+    node = node.parentNode;
+  }
+  return false;
+}
+
+export function formatMarkupTextNode(node: Node): string {
+  if (node.nodeType === Node.CDATA_SECTION_NODE) {
+    return `<![CDATA[${node.textContent ?? ''}]]>`;
+  }
+  return node.textContent?.trim() ?? '';
+}
+
+export function serializeMarkupTextNodes(nodes: ArrayLike<ChildNode>): string {
+  return Array.from(nodes)
+    .filter(n => isTextLikeNode(n) && !isWhitespaceOnlyText(n))
+    .map(formatMarkupTextNode)
+    .join('');
+}
+
+export function escapeHtml(text: string): string {
+  return String(text)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+export function normalizeArchivePath(path: string): string {
+  return path.replace(/\\/g, '/').replace(/^\.\//, '');
+}
+
+export function archiveRelativeAssetPath(path: string): string | null {
+  const norm = normalizeArchivePath(path);
+  const idx = norm.indexOf('assets/');
+  return idx === -1 ? null : norm.slice(idx);
+}
+
+export function mimeFromAssetPath(path: string): string {
+  const ext = path.split('.').pop()?.toLowerCase() ?? '';
+  switch (ext) {
+    case 'png':
+      return 'image/png';
+    case 'jpg':
+    case 'jpeg':
+      return 'image/jpeg';
+    case 'webp':
+      return 'image/webp';
+    case 'gif':
+      return 'image/gif';
+    case 'svg':
+      return 'image/svg+xml';
+    default:
+      return 'application/octet-stream';
+  }
+}
+
+export function skipOtslContainerHead(nodes: ChildNode[], startIdx: number): number {
+  let i = startIdx;
+  while (i < nodes.length) {
+    const node = nodes[i];
+    if (!node) {
+      i += 1;
+      continue;
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      i += 1;
+      continue;
+    }
+    const tag = localName(node as Element);
+    if (isCellToken(tag)) break;
+    if (HEAD_TAGS.has(tag) || tag === 'h_thread' || tag === 'location') {
+      i += 1;
+      continue;
+    }
+    break;
+  }
+  return i;
+}
+
+export function skipElementHeadNodes(nodes: ChildNode[], startIdx: number): number {
+  let i = startIdx;
+  while (i < nodes.length && isWhitespaceOnlyText(nodes[i]!)) i += 1;
+  while (i < nodes.length) {
+    const node = nodes[i];
+    if (
+      node &&
+      node.nodeType === Node.ELEMENT_NODE &&
+      HEAD_TAGS.has(localName(node as Element))
+    ) {
+      i += 1;
+      while (i < nodes.length && isWhitespaceOnlyText(nodes[i]!)) i += 1;
+      continue;
+    }
+    break;
+  }
+  return i;
+}
+
+export function isSemanticElement(el: Element): boolean {
+  return SEMANTIC_TAGS.has(localName(el));
+}
+
+export function isVirtualTextHost(el: Element): boolean {
+  const tag = localName(el);
+  return tag === 'ldiv' || CELL_CONTENT_TAGS.has(tag);
+}
+
+export function elementThreadId(el: Element): string | null {
+  return firstHeadChild(el, 'thread')?.getAttribute('thread_id') ?? null;
+}
+
+export function elementLayer(el: Element): string {
+  const layerEl = firstHeadChild(el, 'layer');
+  if (layerEl) {
+    const value = layerEl.getAttribute('value') ?? 'body';
+    return ELEMENT_LAYERS.has(value) ? value : 'body';
+  }
+  if (headLocations(el).length === 4) return 'body';
+  const parent = el.parentElement;
+  if (!parent) return 'body';
+  const nodes = [...parent.childNodes];
+  const idx = nodes.indexOf(el);
+  if (idx < 0) return 'body';
+  return layerFromHeadNodes(nodes, idx + 1);
+}
+
+export const ELEMENT_LAYERS = new Set(['body', 'background', 'furniture']);
+
+export function layerFromHeadNodes(nodes: ChildNode[], startIdx: number): string {
+  let i = startIdx;
+  while (i < nodes.length) {
+    const node = nodes[i];
+    if (!node) {
+      i += 1;
+      continue;
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      i += 1;
+      continue;
+    }
+    const tag = localName(node as Element);
+    if (tag === 'layer') {
+      const value = (node as Element).getAttribute('value') ?? 'body';
+      return ELEMENT_LAYERS.has(value) ? value : 'body';
+    }
+    if (tag === 'location') break;
+    if (HEAD_TAGS.has(tag)) {
+      i += 1;
+      continue;
+    }
+    break;
+  }
+  return 'body';
+}
+
+export function layerClassForValue(layer: string): string {
+  if (layer === 'furniture') return 'layer-furniture';
+  if (layer === 'background') return 'layer-background';
+  return '';
+}
+
+export function headingLevelFromEl(el: Element): number {
+  return headingLevel(el);
+}
+
+export function elementLabel(el: Element): string {
+  if (isVirtualTextOverlayUnit(el)) return 'text';
+  const tag = localName(el);
+  if (tag === 'heading' || tag === 'field_heading')
+    return `${tag}[${headingLevel(el)}]`;
+  const level = el.getAttribute('level');
+  if (level) return `${tag}[${level}]`;
+  const cls = el.getAttribute('class');
+  if (cls) return `${tag}.${cls}`;
+  return tag;
+}
+
+export function isVirtualTextOverlayUnit(el: Element): boolean {
+  if (headLocations(el).length === 4) return false;
+  if (!hasVirtualTextLocations(el)) return false;
+  const tag = localName(el);
+  if (tag === 'ldiv' && el.parentElement && localName(el.parentElement) === 'list')
+    return true;
+  if (isCellToken(tag) && tag !== 'nl' && !CELL_SPAN_TAGS.has(tag)) {
+    return el.parentElement
+      ? OTSL_CONTAINER_TAGS.has(localName(el.parentElement))
+      : false;
+  }
+  return false;
+}
+
+export function hasVirtualTextLocations(el: Element): boolean {
+  const parent = el.parentElement;
+  if (!parent) return false;
+  const nodes = [...parent.childNodes];
+  const idx = nodes.indexOf(el);
+  if (idx < 0) return false;
+  return parseElementHeadAt(nodes, idx + 1) !== null;
+}
+
+export function virtualTextHeadLocations(el: Element): Element[] {
+  const parent = el.parentElement;
+  if (!parent) return [];
+  const nodes = [...parent.childNodes];
+  const idx = nodes.indexOf(el);
+  if (idx < 0) return [];
+  return parseElementHeadAt(nodes, idx + 1)?.locs ?? [];
+}
+
+export function elementHeadLocations(el: Element): Element[] {
+  const own = headLocations(el);
+  return own.length === 4 ? own : virtualTextHeadLocations(el);
+}
+
+export function isPictureContentElement(el: Element | null): boolean {
+  if (!el) return false;
+  const tag = localName(el);
+  if (tag === 'picture' || tag === 'caption') return false;
+  let node: Element | null = el.parentElement;
+  while (node) {
+    if (localName(node) === 'picture') return true;
+    node = node.parentElement;
+  }
+  return false;
+}
+
+export function isTableContentElement(el: Element | null): boolean {
+  if (!el) return false;
+  const tag = localName(el);
+  if (OTSL_CONTAINER_TAGS.has(tag) || tag === 'caption') return false;
+  let node: Element | null = el.parentElement;
+  while (node) {
+    if (OTSL_CONTAINER_TAGS.has(localName(node))) return true;
+    node = node.parentElement;
+  }
+  return false;
+}
diff --git a/core/src/doclang/types.ts b/core/src/doclang/types.ts
new file mode 100644
index 0000000..110a606
--- /dev/null
+++ b/core/src/doclang/types.ts
@@ -0,0 +1,96 @@
+export interface BoundingBox {
+  kind: string;
+  tag: string;
+  elementId: string;
+  layer: string;
+  x0: number;
+  y0: number;
+  x1: number;
+  y1: number;
+  resW: number;
+  resH: number;
+}
+
+export interface Resolution {
+  width: number;
+  height: number;
+}
+
+export interface PageViewOverlay {
+  boxes: BoundingBox[];
+  readingOrderSteps: ReadingOrderStep[];
+}
+
+export interface ReadingOrderStep {
+  order: number;
+  box: BoundingBox;
+  elementId: string;
+}
+
+export interface CaptionLink {
+  captionBox: BoundingBox;
+  hostBox: BoundingBox;
+  captionElementId: string;
+  hostElementId: string;
+}
+
+export interface XrefLink {
+  fromBox: BoundingBox;
+  toBox: BoundingBox;
+  fromElementId: string;
+  toElementId: string;
+}
+
+export interface FragmentLink {
+  fromBox: BoundingBox;
+  toBox: BoundingBox | null;
+  fromElementId: string;
+  toElementId: string | null;
+  threadId: string;
+  targetCorner?: 'tl' | 'br';
+}
+
+export interface FragmentNavItem {
+  elementId: string;
+  box: BoundingBox;
+  hasPrev: boolean;
+  hasNext: boolean;
+}
+
+export interface ThreadNav {
+  prev: Element | null;
+  next: Element | null;
+}
+
+export interface DocumentState {
+  pageImages: Map<number, string>;
+  assetUrls: Map<string, string>;
+  pageCount: number;
+  segments: Element[][];
+  defaultResolution: Resolution;
+  elementIds: Map<Element, string>;
+  idToElement: Map<string, Element>;
+  hasPageView: boolean;
+  markupOnly: boolean;
+  docRoot: Element;
+  threadPagesById: Map<string, Set<number>>;
+  elementPageByEl: Map<Element, number>;
+  threadNavByElement: Map<Element, ThreadNav>;
+  pendingSelectElement: Element | null;
+  readingOrder: Element[];
+  readingOrderDisplayNumbers: Map<Element, number>;
+}
+
+export type FileCatalogEntryKind = 'archive' | 'markup' | 'folder';
+
+export interface FileCatalogEntry {
+  id: string;
+  label: string;
+  kind: FileCatalogEntryKind;
+  source: File | ArrayBuffer | File[];
+  currentPage: number;
+  pageZoom: number;
+  snapshot: DocumentState | null;
+  thumbnailUrl: string | null;
+}
+
diff --git a/core/src/doclang/zip.ts b/core/src/doclang/zip.ts
new file mode 100644
index 0000000..d7e1b14
--- /dev/null
+++ b/core/src/doclang/zip.ts
@@ -0,0 +1,233 @@
+import { mimeFromAssetPath } from './dom';
+
+const ZIP_MAX_ENTRIES = 5000;
+const ZIP_MAX_ENTRY_COMPRESSED_BYTES = 128 * 1024 * 1024; // 128 MiB
+const ZIP_MAX_ENTRY_UNCOMPRESSED_BYTES = 128 * 1024 * 1024; // 128 MiB
+const ZIP_MAX_TOTAL_UNCOMPRESSED_BYTES = 512 * 1024 * 1024; // 512 MiB
+const ZIP_MAX_COMPRESSION_RATIO = 100; // uncompressed / compressed
+
+export interface ZipEntry {
+  name: string;
+  data: Uint8Array;
+}
+
+const TEXT_DECODER = new TextDecoder();
+
+export async function unzip(
+  buffer: ArrayBuffer,
+  { shouldExtract }: { shouldExtract?: (name: string) => boolean } = {}
+): Promise<ZipEntry[]> {
+  if (typeof DecompressionStream === 'undefined') {
+    throw new Error(
+      'ZIP decompression requires a browser with DecompressionStream support'
+    );
+  }
+
+  const bytes = new Uint8Array(buffer);
+  const view = new DataView(buffer);
+  const eocdOffset = findEndOfCentralDirectory(bytes);
+  const entryCount = view.getUint16(eocdOffset + 10, true);
+  const centralDirOffset = view.getUint32(eocdOffset + 16, true);
+
+  if (entryCount > ZIP_MAX_ENTRIES) {
+    throw new Error('ZIP archive has too many entries');
+  }
+  if (centralDirOffset >= bytes.length) {
+    throw new Error('Invalid ZIP central directory offset');
+  }
+
+  const entries: ZipEntry[] = [];
+  let offset = centralDirOffset;
+  let totalUncompressed = 0;
+
+  for (let i = 0; i < entryCount; i += 1) {
+    if (offset + 46 > bytes.length || view.getUint32(offset, true) !== 0x02014b50) {
+      throw new Error('Invalid ZIP central directory');
+    }
+
+    const compression = view.getUint16(offset + 10, true);
+    const compressedSize = view.getUint32(offset + 20, true);
+    const uncompressedSize = view.getUint32(offset + 24, true);
+    const nameLength = view.getUint16(offset + 28, true);
+    const extraLength = view.getUint16(offset + 30, true);
+    const commentLength = view.getUint16(offset + 32, true);
+    const localHeaderOffset = view.getUint32(offset + 42, true);
+    const nameEnd = offset + 46 + nameLength;
+    if (nameEnd > bytes.length) {
+      throw new Error('Invalid ZIP entry name');
+    }
+    const rawName = TEXT_DECODER.decode(bytes.subarray(offset + 46, nameEnd));
+    const name = normalizeZipEntryName(rawName);
+
+    offset = nameEnd + extraLength + commentLength;
+    if (offset > bytes.length) {
+      throw new Error('Invalid ZIP central directory');
+    }
+
+    if (!name || name.endsWith('/') || isIgnoredArchiveEntry(name)) continue;
+    if (shouldExtract && !shouldExtract(name)) continue;
+
+    if (
+      compressedSize > ZIP_MAX_ENTRY_COMPRESSED_BYTES ||
+      uncompressedSize > ZIP_MAX_ENTRY_UNCOMPRESSED_BYTES
+    ) {
+      throw new Error(`ZIP entry exceeds size limit: ${name}`);
+    }
+    if (
+      compressedSize > 0 &&
+      uncompressedSize > 0 &&
+      uncompressedSize / compressedSize > ZIP_MAX_COMPRESSION_RATIO
+    ) {
+      throw new Error(`ZIP entry compression ratio exceeds limit: ${name}`);
+    }
+    if (totalUncompressed + uncompressedSize > ZIP_MAX_TOTAL_UNCOMPRESSED_BYTES) {
+      throw new Error('ZIP archive exceeds total uncompressed size limit');
+    }
+
+    if (
+      localHeaderOffset + 30 > bytes.length ||
+      view.getUint32(localHeaderOffset, true) !== 0x04034b50
+    ) {
+      throw new Error(`Invalid ZIP local header: ${name}`);
+    }
+    const localNameLength = view.getUint16(localHeaderOffset + 26, true);
+    const localExtraLength = view.getUint16(localHeaderOffset + 28, true);
+    const dataOffset = localHeaderOffset + 30 + localNameLength + localExtraLength;
+    if (dataOffset + compressedSize > bytes.length) {
+      throw new Error(`ZIP entry data out of bounds: ${name}`);
+    }
+    const compressed = bytes.subarray(dataOffset, dataOffset + compressedSize);
+    const data = await decompressZipEntry(compressed, compression, uncompressedSize);
+    totalUncompressed += data.length;
+    if (totalUncompressed > ZIP_MAX_TOTAL_UNCOMPRESSED_BYTES) {
+      throw new Error('ZIP archive exceeds total uncompressed size limit');
+    }
+    entries.push({ name, data });
+  }
+
+  return entries;
+}
+
+function findEndOfCentralDirectory(bytes: Uint8Array): number {
+  for (let i = bytes.length - 22; i >= 0; i -= 1) {
+    if (
+      bytes[i] === 0x50 &&
+      bytes[i + 1] === 0x4b &&
+      bytes[i + 2] === 0x05 &&
+      bytes[i + 3] === 0x06
+    ) {
+      return i;
+    }
+  }
+  throw new Error('Invalid ZIP archive');
+}
+
+function concatUint8Arrays(chunks: Uint8Array[], totalLength: number): Uint8Array {
+  const out = new Uint8Array(totalLength);
+  let offset = 0;
+  for (const chunk of chunks) {
+    out.set(chunk, offset);
+    offset += chunk.byteLength;
+  }
+  return out;
+}
+
+async function decompressZipEntry(
+  data: Uint8Array,
+  method: number,
+  uncompressedSize: number
+): Promise<Uint8Array> {
+  if (method === 0) {
+    if (data.length > ZIP_MAX_ENTRY_UNCOMPRESSED_BYTES) {
+      throw new Error('ZIP entry exceeds size limit');
+    }
+    return data;
+  }
+  if (method === 8) {
+    const stream = new Blob([data as BlobPart])
+      .stream()
+      .pipeThrough(new DecompressionStream('deflate-raw'));
+    const reader = stream.getReader();
+    const chunks: Uint8Array[] = [];
+    let total = 0;
+    try {
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        total += value.byteLength;
+        if (total > ZIP_MAX_ENTRY_UNCOMPRESSED_BYTES) {
+          throw new Error('ZIP entry exceeds size limit');
+        }
+        if (data.length > 0 && total / data.length > ZIP_MAX_COMPRESSION_RATIO) {
+          throw new Error('ZIP entry compression ratio exceeds limit');
+        }
+        chunks.push(value);
+      }
+    } catch (err) {
+      try {
+        await reader.cancel();
+      } catch {
+        /* ignore cancel errors */
+      }
+      throw err;
+    }
+
+    const out = concatUint8Arrays(chunks, total);
+    if (uncompressedSize && out.length !== uncompressedSize) {
+      return out.slice(0, Math.min(out.length, uncompressedSize));
+    }
+    return out;
+  }
+  throw new Error(`Unsupported ZIP compression method ${method}`);
+}
+
+function normalizeZipEntryName(name: string): string {
+  return name.replace(/\\/g, '/').replace(/^\.\//, '');
+}
+
+export function findArchiveEntry(
+  entries: ZipEntry[],
+  fileName: string
+): ZipEntry | undefined {
+  return entries.find(e => e.name === fileName);
+}
+
+export function isIgnoredArchiveEntry(name: string): boolean {
+  if (name === '.DS_Store' || name.endsWith('/.DS_Store')) return true;
+  return name.split('/').some(part => part.startsWith('._') || part === '__MACOSX');
+}
+
+export async function extractArchiveFromZipBuffer(buffer: ArrayBuffer): Promise<{
+  markupXml: string;
+  pageImages: Map<number, string>;
+  assetUrls: Map<string, string>;
+}> {
+  const entries = await unzip(buffer);
+  const markupEntry = findArchiveEntry(entries, 'document.xml');
+  if (!markupEntry) {
+    throw new Error('Archive must contain document.xml');
+  }
+  const markupXml = new TextDecoder().decode(markupEntry.data);
+  const pageImages = new Map<number, string>();
+  const assetUrls = new Map<string, string>();
+  for (const e of entries) {
+    const m = e.name.match(/^pages\/(\d+)\.(png|jpe?g|webp)$/i);
+    if (m) {
+      pageImages.set(
+        Number(m[1]),
+        URL.createObjectURL(new Blob([e.data as BlobPart], { type: mimeFromAssetPath(e.name) }))
+      );
+      continue;
+    }
+    if (e.name.startsWith('assets/') && !e.name.endsWith('/')) {
+      assetUrls.set(
+        e.name,
+        URL.createObjectURL(
+          new Blob([e.data as BlobPart], { type: mimeFromAssetPath(e.name) })
+        )
+      );
+    }
+  }
+  return { markupXml, pageImages, assetUrls };
+}
+
diff --git a/core/src/index.ts b/core/src/index.ts
new file mode 100644
index 0000000..f5731b6
--- /dev/null
+++ b/core/src/index.ts
@@ -0,0 +1,35 @@
+/** DocLang Viewer — public API barrel */
+
+// Components (register custom elements as a side-effect and re-export the class)
+export { DoclangViewer } from './components/viewer/viewer';
+export { DoclangPaneStack } from './components/container/pane-stack';
+export { DoclangCollectionPane } from './components/collection/collection-pane';
+export { DoclangMarkupPane } from './components/markup-pane/markup-pane';
+export { DoclangPageImgPane } from './components/page-img-pane/page-img-pane';
+export { DoclangReadingPane } from './components/reading-pane/reading-pane';
+export { DoclangPageNav } from './components/page-nav/page-nav';
+export { DoclangToolbar } from './components/viewer/toolbar';
+export { DoclangDropdown } from './components/dropdown/dropdown';
+export { DoclangSettingsPanel } from './components/settings-panel/settings-panel';
+export { DoclangEmpty } from './components/viewer/empty';
+
+// Base classes / controllers
+export { DoclangPageElement } from './components/base/page-element';
+export { PageController } from './components/base/page-controller';
+export { CollectionController } from './components/collection/collection';
+
+// DocLang data-model types
+export type {
+  BoundingBox,
+  Resolution,
+  PageViewOverlay,
+  ReadingOrderStep,
+  CaptionLink,
+  XrefLink,
+  FragmentLink,
+  FragmentNavItem,
+  ThreadNav,
+  DocumentState,
+  FileCatalogEntryKind,
+  FileCatalogEntry,
+} from './doclang/types';
diff --git a/core/src/main.ts b/core/src/main.ts
new file mode 100644
index 0000000..6a97a43
--- /dev/null
+++ b/core/src/main.ts
@@ -0,0 +1,3 @@
+/* DocLang Archive Viewer — boot */
+
+import './components/viewer/viewer';
diff --git a/core/src/vite-env.d.ts b/core/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/core/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/core/tsconfig.json b/core/tsconfig.json
new file mode 100644
index 0000000..543408f
--- /dev/null
+++ b/core/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "include": ["src"],
+  "compilerOptions": {
+    "module": "ESNext",
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "strict": true,
+    "moduleResolution": "Bundler",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "noUncheckedIndexedAccess": true,
+    "noEmit": true
+  }
+}
diff --git a/core/vite.config.ts b/core/vite.config.ts
new file mode 100644
index 0000000..f9a2f35
--- /dev/null
+++ b/core/vite.config.ts
@@ -0,0 +1,73 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+import { readFileSync } from 'fs';
+import dts from 'vite-plugin-dts';
+
+const src = path.resolve(import.meta.dirname, 'src');
+
+/**
+ * Derive library entry points from src/index.ts re-exports.
+ *
+ * Every `export { ... } from './some/path'` in index.ts becomes an entry.
+ * The entry key is the relative path without the leading `./`; the value is
+ * the absolute path to the `.ts` file.
+ *
+ * Adding a new export to index.ts is all that's needed to expose a new entry.
+ */
+function entriesFromBarrel(): Record<string, string> {
+  const barrel = readFileSync(path.join(src, 'index.ts'), 'utf8');
+  const entries: Record<string, string> = {
+    index: path.join(src, 'index.ts'),
+  };
+  for (const m of barrel.matchAll(/from\s+'(\.\/[^']+)'/g)) {
+    const rel = m[1]!.slice(2); // strip leading './', e.g. 'components/viewer/viewer'
+    const parts = rel.split('/');
+    const last = parts[parts.length - 1]!;
+    const parent = parts[parts.length - 2];
+    // Collapse 'components/viewer/viewer' → 'components/viewer' when the file
+    // name matches the parent folder name (conventional component main file).
+    const key = last === parent ? parts.slice(0, -1).join('/') : rel;
+    entries[key] = path.join(src, `${rel}.ts`);
+  }
+  return entries;
+}
+
+/**
+ * ESM library build — tree-shakeable, per-component entry points.
+ * Output: core/dist/
+ *
+ *   import '@doclang/viewer-core';                       // all components
+ *   import '@doclang/viewer-core/components/viewer';    // just the viewer shell
+ */
+export default defineConfig({
+  esbuild: {
+    useDefineForClassFields: false,
+  },
+  plugins: [
+    dts({
+      include: ['src'],
+      outDir: path.resolve(import.meta.dirname, 'dist'),
+    }),
+  ],
+  build: {
+    lib: {
+      entry: entriesFromBarrel(),
+      formats: ['es'],
+    },
+    outDir: path.resolve(import.meta.dirname, 'dist'),
+    emptyOutDir: true,
+    minify: false,
+    sourcemap: true,
+    rollupOptions: {
+      // Lit is an external peer dependency — bundler consumers supply their
+      // own copy, avoiding duplicate-lit issues at runtime.
+      external: [/^lit/, /^@lit/],
+      output: {
+        // Preserve the entry directory structure in dist/
+        preserveModules: true,
+        preserveModulesRoot: 'src',
+        entryFileNames: '[name].js',
+      },
+    },
+  },
+});
diff --git a/core/vite.standalone.config.ts b/core/vite.standalone.config.ts
new file mode 100644
index 0000000..1f7eeca
--- /dev/null
+++ b/core/vite.standalone.config.ts
@@ -0,0 +1,34 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+
+/**
+ * Standalone ESM bundle — single self-contained file with lit inlined.
+ * Output: viewer.js at the repo root (tracked in git for CDN / script-tag use).
+ *
+ *   <!-- local -->
+ *   <script type="module" src="viewer.js"></script>
+ *
+ *   <!-- jsDelivr raw -->
+ *   <script type="module"
+ *     src="https://cdn.jsdelivr.net/gh/org/repo@main/viewer.js">
+ *   </script>
+ *
+ * The npm / bundler library build (core/dist/index.js etc.) is produced by the
+ * main vite.config.ts with lit kept external for deduplication.
+ */
+export default defineConfig({
+  esbuild: {
+    useDefineForClassFields: false,
+  },
+  build: {
+    lib: {
+      entry: path.resolve(import.meta.dirname, 'src/index.ts'),
+      formats: ['es'],
+      fileName: () => 'viewer.js',
+    },
+    outDir: path.resolve(import.meta.dirname, '..'),
+    emptyOutDir: false,
+    minify: true,
+    sourcemap: true,
+  },
+});
diff --git a/demo-data.js b/demo-data.js
deleted file mode 100644
index 25439d4..0000000
--- a/demo-data.js
+++ /dev/null
@@ -1 +0,0 @@
-const DEMO_ARCHIVE_URL = "assets/2501.17887.dclx";
diff --git a/index.html b/index.html
index 576e023..9106953 100644
--- a/index.html
+++ b/index.html
@@ -3,334 +3,27 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
   <title>DocLang Viewer</title>
+
   <link rel="icon" href="assets/favicon.ico" sizes="any">
   <link rel="icon" type="image/svg+xml" href="assets/doclang_v3_sail.svg">
   <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
-  <link rel="stylesheet" href="viewer.css">
-</head>
-<body class="demo-loading">
-  <div id="cursor-hint" class="cursor-hint" role="tooltip" hidden></div>
-
-  <header>
-    <div class="header-brand">
-      <a href="#" class="header-logo-link" id="home-link" title="Back to start">
-        <img src="assets/doclang_v3_sail.svg" alt="DocLang" class="header-logo">
-      </a>
-      <h1>DocLang Viewer</h1>
-      <nav class="page-nav" id="page-nav" hidden>
-        <div class="page-nav-btns">
-          <button type="button" id="btn-prev" class="page-nav-btn" disabled aria-label="Previous page" title="Previous page">
-            <svg class="page-nav-chevron" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
-              <path d="M10.5 3.5 5.5 8l5 4.5" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path>
-            </svg>
-          </button>
-          <button type="button" id="btn-next" class="page-nav-btn" disabled aria-label="Next page" title="Next page">
-            <svg class="page-nav-chevron" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
-              <path d="M5.5 3.5 10.5 8l-5 4.5" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path>
-            </svg>
-          </button>
-        </div>
-        <div class="page-indicator" id="page-indicator">
-          <span class="page-indicator-static">Page&nbsp;</span>
-          <input
-            type="text"
-            inputmode="numeric"
-            id="page-number-input"
-            class="page-number-input"
-            value="1"
-            aria-label="Page number"
-            disabled
-          >
-          <span class="page-indicator-suffix" id="page-count-indicator">&nbsp;of 1</span>
-        </div>
-      </nav>
-    </div>
-    <div class="header-center">
-      <span class="doc-label" id="doc-label" hidden></span>
-    </div>
-    <div class="toolbar">
-      <div class="toolbar-options-wrap">
-        <button
-          type="button"
-          class="toolbar-options-btn"
-          id="btn-toolbar-options"
-          aria-expanded="false"
-          aria-controls="toolbar-options-panel"
-          aria-haspopup="true"
-        >
-          Views
-        </button>
-        <div class="toolbar-options-panel" id="toolbar-options-panel" role="menu" hidden>
-          <label class="toolbar-options-item" id="toggle-file-pane-label">
-            <input type="checkbox" id="toggle-file-pane" checked role="menuitemcheckbox">
-            <span>Files</span>
-          </label>
-          <label class="toolbar-options-item" id="toggle-page-pane-label">
-            <input type="checkbox" id="toggle-page-pane" checked role="menuitemcheckbox">
-            <span>Original page</span>
-          </label>
-          <label class="toolbar-options-item" id="toggle-markup-pane-label">
-            <input type="checkbox" id="toggle-markup-pane" checked role="menuitemcheckbox">
-            <span>DocLang</span>
-          </label>
-          <label class="toolbar-options-item" id="toggle-reading-pane-label">
-            <input type="checkbox" id="toggle-reading-pane" checked role="menuitemcheckbox">
-            <span>Reading view</span>
-          </label>
-          <div class="toolbar-options-divider" role="separator"></div>
-          <button type="button" class="toolbar-options-reset" id="btn-reset-pane-layout" role="menuitem">
-            Reset views
-          </button>
-        </div>
-      </div>
-      <span class="header-divider" aria-hidden="true"></span>
-      <span class="toolbar-file-group" id="toolbar-file-group">
-        <label class="file-btn" id="open-file-btn">
-          Open file
-          <input type="file" id="input-archive" multiple accept=".dclx,.zip,.dclg,.xml,application/zip,application/xml,text/xml">
-        </label>
-      </span>
-      <button type="button" id="btn-demo">Load demo</button>
-      <span class="header-divider" aria-hidden="true"></span>
-      <a href="https://doclang.ai/" class="header-site-link">doclang.ai</a>
-    </div>
-  </header>
+  <link rel="manifest" href="manifest.webmanifest">
 
-  <p class="drop-banner" id="drop-banner">Drop to open another file</p>
-
-  <div class="empty-state" id="empty-state">
-    <div class="empty-state-inner">
-      <div class="empty-state-loading" id="empty-state-loading" role="status" aria-live="polite" aria-label="Loading demo document">
-        <div class="loading-spinner" aria-hidden="true"></div>
-        <p class="empty-state-title">Loading demo…</p>
-        <p class="empty-state-meta">Preparing the sample document</p>
-      </div>
-      <div class="empty-state-prompt" id="empty-state-prompt">
-        <p class="empty-state-title">Drop a DocLang file here</p>
-        <p class="empty-state-meta">Supported file types: <span id="empty-state-file-types"></span></p>
-        <p class="empty-state-action">or <a href="#" class="text-link" id="demo-empty-link">load demo</a></p>
-      </div>
-    </div>
-  </div>
-
-  <main class="split" id="main">
-    <section class="pane pane-file">
-      <div class="pane-header pane-file-header">
-        <span class="pane-header-title">Files</span>
-        <button
-          type="button"
-          class="file-pane-close-all"
-          id="btn-file-pane-close-all"
-          hidden
-          aria-label="Clear all open files"
-        >Clear</button>
-      </div>
-      <div class="pane-body" id="file-pane"></div>
-    </section>
-    <div
-      class="pane-splitter"
-      id="splitter-0"
-      role="separator"
-      aria-orientation="vertical"
-      aria-label="Resize Files and Original page panes"
-      tabindex="0"
-      hidden
-    ></div>
-    <section class="pane pane-page-view">
-      <div class="pane-header pane-page-header">
-        <span class="pane-header-title">Original page</span>
-        <div class="pane-page-controls">
-          <div class="page-zoom-control" id="page-zoom-label" hidden>
-            <label class="page-zoom-control-label" for="page-zoom">
-              <span aria-hidden="true">Zoom</span>
-            </label>
-            <input
-              type="range"
-              id="page-zoom"
-              min="100"
-              max="300"
-              step="10"
-              value="100"
-              aria-valuemin="100"
-              aria-valuemax="300"
-              aria-valuenow="100"
-              aria-label="Page zoom"
-            >
-            <button
-              type="button"
-              id="page-zoom-reset"
-              class="page-zoom-reset"
-              title="Reset zoom"
-              aria-label="Reset zoom"
-              disabled
-            >100%</button>
-          </div>
-          <button
-            type="button"
-            class="pane-settings-toggle"
-            id="btn-settings-toggle"
-            hidden
-            aria-expanded="false"
-            aria-controls="page-settings"
-          >
-            Overlays
-          </button>
-        </div>
-      </div>
-      <div class="pane-page-layout">
-        <div class="pane-body" id="page-pane"></div>
-        <div class="viewer-settings-layer" id="page-settings-layer" hidden>
-          <button
-            type="button"
-            class="viewer-settings-scrim"
-            id="page-settings-scrim"
-            tabindex="-1"
-            aria-label="Close overlays"
-          ></button>
-          <aside
-            class="viewer-settings"
-            id="page-settings"
-            role="dialog"
-            aria-modal="true"
-            aria-labelledby="page-settings-title"
-          >
-            <div class="viewer-settings-header">
-              <h2 class="viewer-settings-title" id="page-settings-title">Overlays</h2>
-              <button type="button" class="viewer-settings-close" id="btn-page-settings-close" aria-label="Close overlays">
-                ×
-              </button>
-            </div>
-            <div class="viewer-settings-body">
-              <label class="settings-option settings-option-primary" id="show-all-bboxes-label">
-                <input type="checkbox" id="show-all-bboxes" checked>
-                <span>Layout</span>
-              </label>
-              <div class="settings-subgroup" id="layout-subtoggles">
-                <label class="settings-option settings-option-sub" id="show-reading-order-label">
-                  <input type="checkbox" id="show-reading-order">
-                  <span>Reading order</span>
-                </label>
-                <div class="settings-subgroup settings-reading-order-group" id="reading-order-subtoggles">
-                  <label class="settings-option settings-option-sub settings-option-nested" id="reading-order-arrows-label">
-                    <input type="checkbox" id="reading-order-arrows" checked>
-                    <span>Arrows</span>
-                  </label>
-                  <label class="settings-option settings-option-sub settings-option-nested" id="reading-order-global-label">
-                    <input type="checkbox" id="reading-order-global">
-                    <span>Global numbering</span>
-                  </label>
-                </div>
-
-                <label class="settings-option settings-option-sub" id="show-picture-contents-label">
-                  <input type="checkbox" id="show-picture-contents">
-                  <span>Picture contents</span>
-                </label>
-                <label class="settings-option settings-option-sub" id="show-table-contents-label">
-                  <input type="checkbox" id="show-table-contents">
-                  <span>Table contents</span>
-                </label>
-                <label class="settings-option settings-option-sub" id="show-fragment-links-label">
-                  <input type="checkbox" id="show-fragment-links">
-                  <span>Fragments</span>
-                </label>
-                <label class="settings-option settings-option-sub" id="show-xref-links-label">
-                  <input type="checkbox" id="show-xref-links">
-                  <span>Cross-references</span>
-                </label>
-                <label class="settings-option settings-option-sub" id="show-caption-links-label">
-                  <input type="checkbox" id="show-caption-links">
-                  <span>Captions</span>
-                </label>
-                <label class="settings-option settings-option-sub" id="show-layout-badges-label">
-                  <input type="checkbox" id="show-layout-badges" checked>
-                  <span>Badges</span>
-                </label>
-              </div>
-            </div>
-          </aside>
-        </div>
-      </div>
-    </section>
-    <div
-      class="pane-splitter"
-      id="splitter-1"
-      role="separator"
-      aria-orientation="vertical"
-      aria-label="Resize Original page and DocLang panes"
-      tabindex="0"
-      hidden
-    ></div>
-    <section class="pane pane-markup">
-      <div class="pane-header">DocLang</div>
-      <div class="pane-body" id="markup-pane"></div>
-    </section>
-    <div
-      class="pane-splitter"
-      id="splitter-2"
-      role="separator"
-      aria-orientation="vertical"
-      aria-label="Resize DocLang and Reading view panes"
-      tabindex="0"
-      hidden
-    ></div>
-    <section class="pane pane-reading">
-      <div class="pane-header pane-reading-header">
-        <span class="pane-header-title">Reading view</span>
-        <button
-          type="button"
-          class="pane-settings-toggle"
-          id="btn-reading-settings-toggle"
-          hidden
-          aria-expanded="false"
-            aria-controls="reading-settings"
-          >
-            Layers
-          </button>
-      </div>
-      <div class="pane-reading-layout">
-        <div class="pane-body" id="rendered-pane"></div>
-        <div class="viewer-settings-layer" id="reading-settings-layer" hidden>
-          <button
-            type="button"
-            class="viewer-settings-scrim"
-            id="reading-settings-scrim"
-            tabindex="-1"
-            aria-label="Close layers"
-          ></button>
-          <aside
-            class="viewer-settings"
-            id="reading-settings"
-            role="dialog"
-            aria-modal="true"
-            aria-labelledby="reading-settings-title"
-          >
-            <div class="viewer-settings-header">
-              <h2 class="viewer-settings-title" id="reading-settings-title">Layers</h2>
-              <button type="button" class="viewer-settings-close" id="btn-reading-settings-close" aria-label="Close layers">
-                ×
-              </button>
-            </div>
-            <div class="viewer-settings-body">
-              <div class="settings-subgroup" id="reading-layer-toggles" role="group" aria-labelledby="reading-settings-title">
-                <label class="settings-option settings-option-sub" id="show-reading-furniture-label">
-                  <input type="checkbox" id="show-reading-furniture" checked>
-                  <span>Furniture</span>
-                </label>
-                <label class="settings-option settings-option-sub" id="show-reading-background-label">
-                  <input type="checkbox" id="show-reading-background" checked>
-                  <span>Background</span>
-                </label>
-              </div>
-            </div>
-          </aside>
-        </div>
-      </div>
-    </section>
-  </main>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      margin: 0;
+    }
+  </style>
+</head>
+<body>
+  <doclang-viewer example="assets/2501.17887.dclx"></doclang-viewer>
 
-  <script src="demo-data.js"></script>
-  <script src="viewer.js"></script>
+  <script type="module" src="viewer.js"></script>
 </body>
 </html>
diff --git a/manifest.webmanifest b/manifest.webmanifest
new file mode 100644
index 0000000..3bfe5ba
--- /dev/null
+++ b/manifest.webmanifest
@@ -0,0 +1,28 @@
+{
+  "name": "DocLang Viewer",
+  "short_name": "DocLang",
+  "description": "Viewer for DocLang archives (.dclx) and markup (.dclg, .xml).",
+  "start_url": "./",
+  "scope": "./",
+  "display": "standalone",
+  "icons": [
+    { "src": "assets/favicon-16x16.png", "sizes": "16x16", "type": "image/png" },
+    { "src": "assets/favicon-32x32.png", "sizes": "32x32", "type": "image/png" },
+    { "src": "assets/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "assets/icon-512.png", "sizes": "512x512", "type": "image/png" },
+    { "src": "assets/icon-1024.png", "sizes": "1024x1024", "type": "image/png" },
+    { "src": "assets/doclang_v3_sail.svg", "sizes": "any", "type": "image/svg+xml" }
+  ],
+  "launch_handler": {
+    "client_mode": "focus-existing"
+  },
+  "file_handlers": [
+    {
+      "action": "./",
+      "accept": {
+        "application/x-dclx": [".dclx"],
+        "application/x-dclg": [".dclg"]
+      }
+    }
+  ]
+}
diff --git a/viewer.css b/viewer.css
deleted file mode 100644
index ba12ead..0000000
--- a/viewer.css
+++ /dev/null
@@ -1,2163 +0,0 @@
-:root {
-  color-scheme: light dark;
-  --bg: #f4f4f5;
-  --panel: #ffffff;
-  --border: #d4d4d8;
-  --text: #18181b;
-  --muted: #71717a;
-  --accent: #2563eb;
-  --placeholder-bg: #fafafa;
-  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
-  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
-  --markup-bg: #ffffff;
-  --markup-fg: #24292e;
-  --markup-hover: rgba(37, 99, 235, 0.08);
-  --markup-selected: rgba(37, 99, 235, 0.14);
-  --kind-text: #2563eb;
-  --kind-heading: #7c3aed;
-  --kind-list: #ea580c;
-  --kind-ldiv: #ea580c;
-  --kind-table: #16a34a;
-  --kind-index: #0d9488;
-  --kind-formula: #0891b2;
-  --kind-code: #475569;
-  --kind-picture: #db2777;
-  --kind-group: #4f46e5;
-  --kind-footnote: #a16207;
-  --kind-page_header: #71717a;
-  --kind-page_footer: #71717a;
-  --kind-caption: #71717a;
-  --kind-field: #d97706;
-  --kind-default: #dc2626;
-  --overlay-reading-order: #71717a;
-  --overlay-fragment: #9333ea;
-  --xml-tag: #116329;
-  --xml-bracket: #24292e;
-  --xml-attr-name: #0550ae;
-  --xml-attr-value: #0a3069;
-  --xml-text: #24292e;
-  --xml-cdata: #6a737d;
-  --xml-cdata-delimiter: #6a737d;
-  --file-thumb-size: 3.75rem;
-  --file-thumb-close-overflow: 0.25rem;
-  --file-item-pad-x: 0.35rem;
-  --file-pane-pad-x: 0.5rem;
-  --file-pane-fit-width: calc(
-    (var(--file-pane-pad-x) * 2 +
-    var(--file-item-pad-x) * 2 +
-    var(--file-thumb-size) +
-    var(--file-thumb-close-overflow)) * 1.5
-  );
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg: #09090b;
-    --panel: #18181b;
-    --border: #3f3f46;
-    --text: #fafafa;
-    --muted: #a1a1aa;
-    --placeholder-bg: #27272a;
-    --markup-bg: #1e1e1e;
-    --markup-fg: #d4d4d4;
-    --markup-hover: rgba(96, 165, 250, 0.1);
-    --markup-selected: rgba(96, 165, 250, 0.18);
-    --kind-text: #60a5fa;
-    --overlay-reading-order: #a1a1aa;
-    --overlay-fragment: #c084fc;
-    --kind-heading: #a78bfa;
-    --kind-list: #fb923c;
-    --kind-ldiv: #fb923c;
-    --kind-table: #4ade80;
-    --kind-index: #2dd4bf;
-    --kind-formula: #22d3ee;
-    --kind-code: #94a3b8;
-    --kind-picture: #f472b6;
-    --kind-group: #818cf8;
-    --kind-footnote: #facc15;
-    --kind-page_header: #a1a1aa;
-    --kind-page_footer: #a1a1aa;
-    --kind-caption: #a1a1aa;
-    --kind-field: #fbbf24;
-    --kind-default: #f87171;
-    --xml-tag: #4ec9b0;
-    --xml-bracket: #808080;
-    --xml-attr-name: #9cdcfe;
-    --xml-attr-value: #ce9178;
-    --xml-text: #d4d4d4;
-    --xml-cdata: #b5cea8;
-    --xml-cdata-delimiter: #808080;
-  }
-}
-
-* {
-  box-sizing: border-box;
-}
-
-.kind-text { --kind-stroke: var(--kind-text); }
-.kind-heading { --kind-stroke: var(--kind-heading); }
-.kind-list { --kind-stroke: var(--kind-list); }
-.kind-ldiv { --kind-stroke: var(--kind-ldiv); }
-.kind-table { --kind-stroke: var(--kind-table); }
-.kind-index { --kind-stroke: var(--kind-index); }
-.kind-formula { --kind-stroke: var(--kind-formula); }
-.kind-code { --kind-stroke: var(--kind-code); }
-.kind-picture { --kind-stroke: var(--kind-picture); }
-.kind-group { --kind-stroke: var(--kind-group); }
-.kind-footnote { --kind-stroke: var(--kind-footnote); }
-.kind-page_header { --kind-stroke: var(--kind-page_header); }
-.kind-page_footer { --kind-stroke: var(--kind-page_footer); }
-.kind-caption { --kind-stroke: var(--kind-caption); }
-.kind-field { --kind-stroke: var(--kind-field); }
-.kind-default { --kind-stroke: var(--kind-default); }
-
-body {
-  margin: 0;
-  font-family: var(--font-ui);
-  background: var(--bg);
-  color: var(--text);
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-body.drag-over {
-  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
-}
-
-body.drag-over .empty-state {
-  border-color: var(--accent);
-  background: color-mix(in srgb, var(--accent) 8%, var(--placeholder-bg));
-}
-
-header {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  align-items: center;
-  gap: 1rem;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--border);
-  background: var(--panel);
-}
-
-.header-brand {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  min-width: 0;
-  grid-column: 1;
-  justify-self: start;
-}
-
-header h1 {
-  margin: 0;
-  font-size: 1.1rem;
-  font-weight: 600;
-}
-
-.header-center {
-  grid-column: 2;
-  justify-self: center;
-  min-width: 0;
-  text-align: center;
-}
-
-.doc-label {
-  color: var(--muted);
-  font-size: 0.8125rem;
-  font-weight: 400;
-  min-width: 0;
-  max-width: min(40vw, 28rem);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.pane-file {
-  min-width: 0;
-  overflow: hidden;
-}
-
-.pane-file .pane-header,
-.pane-file .pane-body {
-  min-width: 0;
-}
-
-.pane-file-header {
-  justify-content: space-between;
-  padding-inline: 0.35rem;
-  gap: 0.35rem;
-}
-
-.pane-file-header .pane-header-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.file-pane-close-all {
-  appearance: none;
-  border: 1px solid transparent;
-  border-radius: 0.25rem;
-  background: transparent;
-  color: var(--muted);
-  font: inherit;
-  font-size: 0.625rem;
-  font-weight: 600;
-  line-height: 1;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  padding: 0 0.15rem;
-  height: 1.25rem;
-  cursor: pointer;
-  white-space: nowrap;
-  flex-shrink: 0;
-  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
-}
-
-.file-pane-close-all:hover {
-  color: var(--text);
-  background: color-mix(in srgb, var(--text) 5%, transparent);
-}
-
-.file-pane-close-all:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
-#file-pane {
-  padding: 0.375rem var(--file-pane-pad-x);
-  overflow: auto;
-  min-width: 0;
-}
-
-.file-view-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  width: 100%;
-}
-
-.file-view-list > li {
-  width: 100%;
-  max-width: 100%;
-}
-
-.file-view-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.35rem;
-  width: 100%;
-  max-width: 100%;
-  box-sizing: border-box;
-  border: none;
-  border-radius: 0;
-  background: transparent;
-  color: var(--text);
-  font: inherit;
-  font-size: 0.8125rem;
-  line-height: 1.35;
-  text-align: center;
-  padding: 0.5rem var(--file-item-pad-x);
-  cursor: pointer;
-}
-
-.file-view-thumb-wrap {
-  position: relative;
-  flex-shrink: 0;
-}
-
-.file-view-close {
-  position: absolute;
-  top: -0.25rem;
-  right: -0.25rem;
-  appearance: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1rem;
-  height: 1rem;
-  padding: 0;
-  border: 1px solid var(--border);
-  border-radius: 50%;
-  background: var(--bg);
-  color: var(--muted);
-  font: inherit;
-  font-size: 0.75rem;
-  line-height: 1;
-  cursor: pointer;
-  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
-  z-index: 1;
-}
-
-.file-view-close:hover {
-  color: var(--text);
-  background: var(--panel);
-}
-
-.file-view-close:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 1px;
-}
-
-.file-view-thumb {
-  flex-shrink: 0;
-  width: var(--file-thumb-size);
-  height: var(--file-thumb-size);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--placeholder-bg);
-  border: 1px solid var(--border);
-  border-radius: 0.25rem;
-  overflow: hidden;
-}
-
-.file-view-thumb img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-.file-view-thumb-placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  color: var(--muted);
-}
-
-.file-view-thumb-placeholder svg {
-  display: block;
-  width: 1.875rem;
-  height: 1.875rem;
-}
-
-.file-view-label {
-  width: 100%;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.file-view-item:hover {
-  background: var(--markup-hover);
-}
-
-.file-view-item.is-active {
-  background: var(--markup-selected);
-  color: var(--accent);
-  font-weight: 500;
-}
-
-.file-view-item:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: -2px;
-}
-
-.header-logo-link {
-  display: block;
-  flex-shrink: 0;
-  border-radius: 0.25rem;
-  line-height: 0;
-  text-decoration: none;
-}
-
-.header-logo-link:hover {
-  opacity: 0.8;
-}
-
-.header-logo {
-  display: block;
-  height: 2.25rem;
-  width: auto;
-}
-
-.header-logo-link:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
-.toolbar {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-  grid-column: 3;
-  justify-self: end;
-}
-
-.header-divider {
-  flex-shrink: 0;
-  align-self: center;
-  width: 1px;
-  height: 1.125rem;
-  background: var(--border);
-}
-
-.toolbar-options-wrap {
-  position: relative;
-}
-
-/* Menu/control triggers — visually distinct from action buttons */
-.toolbar-options-btn,
-.pane-settings-toggle {
-  appearance: none;
-  border: 1px solid transparent;
-  background: transparent;
-  color: var(--muted);
-  font-weight: 500;
-  cursor: pointer;
-  white-space: nowrap;
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
-}
-
-.toolbar-options-btn {
-  border-radius: 0.375rem;
-  padding: 0.35rem 0.45rem 0.35rem 0.55rem;
-  font-size: 0.8125rem;
-  line-height: 1.2;
-}
-
-.toolbar-options-btn::after,
-.pane-settings-toggle::after {
-  content: "";
-  flex-shrink: 0;
-  width: 0.32rem;
-  height: 0.32rem;
-  margin-left: 0.3rem;
-  margin-top: -0.14em;
-  border-right: 1.5px solid currentColor;
-  border-bottom: 1.5px solid currentColor;
-  transform: rotate(45deg);
-  opacity: 0.65;
-}
-
-.pane-settings-toggle::after {
-  width: 0.26rem;
-  height: 0.26rem;
-  margin-left: 0.22rem;
-  margin-top: -0.1em;
-}
-
-.toolbar-options-btn:hover,
-.pane-settings-toggle:hover {
-  color: var(--text);
-  background: color-mix(in srgb, var(--text) 5%, transparent);
-}
-
-.toolbar-options-btn[aria-expanded="true"],
-.pane-settings-toggle[aria-expanded="true"] {
-  color: var(--accent);
-  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
-  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
-}
-
-.toolbar-options-btn:focus-visible,
-.pane-settings-toggle:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
-.toolbar-options-panel {
-  position: absolute;
-  top: calc(100% + 0.35rem);
-  right: 0;
-  z-index: 30;
-  min-width: 11rem;
-  padding: 0.5rem 0;
-  border: 1px solid var(--border);
-  border-radius: 0.375rem;
-  background: var(--panel);
-  box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--text) 12%, transparent);
-}
-
-.toolbar-options-panel[hidden] {
-  display: none;
-}
-
-.toolbar-options-heading {
-  padding: 0.15rem 0.75rem 0.35rem;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--muted);
-}
-
-.toolbar-options-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.35rem 0.75rem;
-  font-size: 0.875rem;
-  cursor: pointer;
-}
-
-.toolbar-options-item:hover {
-  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
-}
-
-.toolbar-options-item input {
-  margin: 0;
-  flex-shrink: 0;
-  cursor: pointer;
-}
-
-.toolbar-options-item-disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.toolbar-options-item-disabled input {
-  cursor: not-allowed;
-}
-
-.toolbar-options-divider {
-  margin: 0.35rem 0;
-  border-top: 1px solid var(--border);
-}
-
-.toolbar-options-reset {
-  display: block;
-  width: 100%;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0.35rem 0.75rem;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  color: var(--text);
-  font: inherit;
-  font-size: 0.875rem;
-  text-align: left;
-  cursor: pointer;
-}
-
-.toolbar-options-reset:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
-  color: var(--accent);
-}
-
-.toolbar-options-reset:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.drop-banner {
-  display: none;
-  margin: 0;
-  padding: 0.35rem 1rem;
-  text-align: center;
-  font-size: 0.8125rem;
-  color: var(--muted);
-  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
-  border-bottom: 1px solid var(--border);
-}
-
-body.viewer-loaded.drag-over .drop-banner {
-  display: block;
-}
-
-.header-brand .page-nav {
-  margin-left: 0.25rem;
-}
-
-.header-brand .page-nav::before {
-  content: "";
-  flex-shrink: 0;
-  align-self: center;
-  width: 1px;
-  height: 1.125rem;
-  margin-right: 0.75rem;
-  background: var(--border);
-}
-
-.header-site-link {
-  color: var(--muted);
-  font-size: 0.875rem;
-  text-decoration: none;
-  white-space: nowrap;
-}
-
-.toolbar-file-group {
-  display: inline-flex;
-  align-items: center;
-}
-
-.header-site-link:hover {
-  color: var(--accent);
-  text-decoration: underline;
-}
-
-.header-site-link:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-  border-radius: 0.125rem;
-}
-
-button,
-label.file-btn {
-  appearance: none;
-  border: 1px solid var(--border);
-  background: var(--panel);
-  color: var(--text);
-  border-radius: 0.375rem;
-  padding: 0.4rem 0.75rem;
-  font: inherit;
-  font-size: 0.875rem;
-  cursor: pointer;
-}
-
-button:hover,
-label.file-btn:hover {
-  border-color: var(--accent);
-}
-
-button:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-label.file-btn input {
-  display: none;
-}
-
-.page-nav {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.page-nav-btns {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.page-nav-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.875rem;
-  height: 1.875rem;
-  padding: 0;
-  flex-shrink: 0;
-}
-
-.page-nav-chevron {
-  display: block;
-  width: 0.875rem;
-  height: 0.875rem;
-}
-
-.page-nav[hidden] {
-  display: none;
-}
-
-.page-indicator {
-  display: inline-flex;
-  align-items: center;
-  font-size: 0.875rem;
-  color: var(--muted);
-  font-variant-numeric: tabular-nums;
-}
-
-.page-number-input {
-  appearance: none;
-  border: 1px solid var(--border);
-  border-radius: 0.375rem;
-  background: var(--panel);
-  color: var(--text);
-  font: inherit;
-  font-size: 0.875rem;
-  font-variant-numeric: tabular-nums;
-  text-align: center;
-  padding: 0 0.35rem;
-  margin: 0;
-  height: 1.875rem;
-  box-sizing: border-box;
-  width: calc(var(--page-num-digits, 1) * 1ch + 0.75rem);
-  line-height: 1;
-  cursor: text;
-}
-
-.page-number-input:hover:not(:disabled) {
-  border-color: var(--accent);
-}
-
-.page-number-input:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
-}
-
-.page-number-input:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-.pane-page-header {
-  justify-content: space-between;
-}
-
-.pane-reading-header {
-  justify-content: space-between;
-}
-
-.pane-page-controls {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-shrink: 0;
-}
-
-.page-zoom-control {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  user-select: none;
-}
-
-.page-zoom-control-label {
-  font-size: 0.625rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--muted);
-  cursor: pointer;
-}
-
-.page-zoom-control input[type="range"] {
-  width: 5.5rem;
-  height: 1rem;
-  margin: 0;
-  cursor: pointer;
-}
-
-.page-zoom-reset {
-  appearance: none;
-  border: 1px solid var(--border);
-  background: var(--bg);
-  color: var(--muted);
-  border-radius: 0.375rem;
-  padding: 0 0.45rem;
-  height: 1.25rem;
-  font: inherit;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  line-height: 1;
-  cursor: pointer;
-  min-width: 2.75rem;
-}
-
-.page-zoom-reset:not(:disabled):hover {
-  border-color: var(--accent);
-  color: var(--text);
-}
-
-.page-zoom-reset:disabled {
-  opacity: 0.55;
-  cursor: default;
-}
-
-.pane-header-title {
-  min-width: 0;
-}
-
-.pane-settings-toggle {
-  border-radius: 0.25rem;
-  padding: 0 0.28rem 0 0.4rem;
-  height: 1.25rem;
-  font-size: 0.625rem;
-  font-weight: 600;
-  line-height: 1;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.pane-page-layout,
-.pane-reading-layout {
-  position: relative;
-  flex: 1;
-  min-height: 0;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.pane-page-layout > .pane-body,
-.pane-reading-layout > .pane-body {
-  flex: 1 1 auto;
-  min-width: 0;
-  min-height: 0;
-}
-
-.viewer-settings-layer {
-  position: absolute;
-  inset: 0;
-  z-index: 5;
-}
-
-.viewer-settings-layer[hidden] {
-  display: none;
-}
-
-.viewer-settings-scrim {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  appearance: none;
-  border: none;
-  margin: 0;
-  padding: 0;
-  background: color-mix(in srgb, var(--bg) 28%, transparent);
-  cursor: default;
-}
-
-.viewer-settings {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  z-index: 1;
-  width: 13rem;
-  max-height: calc(100% - 1rem);
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  border: 1px solid var(--border);
-  border-radius: 0.5rem;
-  background: var(--panel);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
-  overflow: hidden;
-}
-
-.viewer-settings-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.viewer-settings-title {
-  margin: 0;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--muted);
-}
-
-.viewer-settings-close {
-  appearance: none;
-  border: none;
-  background: transparent;
-  color: var(--muted);
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: 0.25rem;
-  font-size: 1.1rem;
-  line-height: 1;
-  cursor: pointer;
-}
-
-.viewer-settings-close:hover {
-  color: var(--text);
-  background: var(--bg);
-}
-
-.viewer-settings-body {
-  padding: 0.75rem;
-  overflow: auto;
-}
-
-.settings-option {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  cursor: pointer;
-  user-select: none;
-}
-
-.settings-option-primary + .settings-subgroup {
-  margin-top: 0.65rem;
-}
-
-.settings-option-primary {
-  font-weight: 600;
-}
-
-.settings-option-heading {
-  cursor: default;
-}
-
-.settings-subgroup {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding-left: 0.85rem;
-}
-
-.settings-reading-order-group {
-  gap: 0.35rem;
-  padding-left: 1.6rem;
-}
-
-.settings-option-nested {
-  padding-left: 0;
-}
-
-.settings-option-sub {
-  font-size: 0.8125rem;
-  color: var(--muted);
-}
-
-.settings-option-disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.settings-option-disabled input {
-  cursor: not-allowed;
-}
-
-.settings-option input {
-  margin: 0.15rem 0 0;
-  flex-shrink: 0;
-  cursor: pointer;
-}
-
-main.split {
-  display: none;
-  flex: 1 1 0;
-  min-height: 0;
-}
-
-body.viewer-loaded #main {
-  display: grid;
-}
-
-body.viewer-loaded #main.layout-stacked {
-  grid-template-columns: 1fr !important;
-}
-
-body.viewer-loaded #main.layout-stacked .pane-splitter {
-  display: none !important;
-}
-
-body.viewer-loaded #main.layout-stacked .pane {
-  border-right: none;
-  border-bottom: 1px solid var(--border);
-}
-
-body.viewer-loaded #main.layout-stacked .pane-layout-last {
-  border-bottom: none;
-}
-
-body:not(.viewer-loaded) #page-nav,
-body.markup-only #page-nav {
-  display: none !important;
-}
-
-body.viewer-loaded #empty-state {
-  display: none;
-}
-
-body.viewer-loaded #main:not(.layout-stacked) {
-  grid-template-rows: minmax(0, 1fr);
-}
-
-body.viewer-loaded #main:not(.layout-stacked) .pane {
-  border-right: none;
-}
-
-.pane {
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid var(--border);
-  min-height: 0;
-  min-width: 0;
-}
-
-.pane[hidden] {
-  display: none !important;
-}
-
-.pane-layout-last {
-  border-right: none;
-}
-
-.pane-splitter {
-  position: relative;
-  width: 1px;
-  margin: 0 -4px;
-  padding: 0 4px;
-  box-sizing: content-box;
-  cursor: col-resize;
-  touch-action: none;
-  z-index: 2;
-  background: transparent;
-}
-
-.pane-splitter::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 4px;
-  width: 1px;
-  background: var(--border);
-  transition: background 0.15s ease, width 0.15s ease;
-}
-
-.pane-splitter:hover::after,
-.pane-splitter:focus-visible::after,
-.pane-splitter.is-dragging::after {
-  width: 3px;
-  background: var(--accent);
-}
-
-.pane-splitter[hidden] {
-  display: none !important;
-}
-
-body.pane-drag-active {
-  cursor: col-resize;
-  user-select: none;
-}
-
-body.pane-drag-active .pane-splitter {
-  cursor: col-resize;
-}
-
-.pane-file,
-.pane-page-view {
-  min-width: 0;
-}
-
-.pane-markup,
-.pane-reading {
-  min-width: 0;
-}
-
-.pane-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  box-sizing: border-box;
-  height: 2.125rem;
-  padding: 0 0.75rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--muted);
-  border-bottom: 1px solid var(--border);
-  background: var(--panel);
-}
-
-.pane-body {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  padding: 1rem;
-}
-
-#markup-pane {
-  padding: 0;
-  background: var(--markup-bg);
-  color: var(--markup-fg);
-}
-
-#markup-pane .placeholder {
-  margin: 1rem;
-}
-
-#page-pane {
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  padding: 0.75rem;
-  min-height: 0;
-  min-width: 0;
-}
-
-.page-view-port {
-  display: flex;
-  overflow: auto;
-  flex: 1 1 auto;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
-  scrollbar-gutter: stable;
-}
-
-#page-pane.can-pan {
-  cursor: grab;
-}
-
-#page-pane.is-panning {
-  cursor: grabbing;
-  user-select: none;
-}
-
-#page-pane:focus {
-  outline: none;
-}
-
-#page-pane:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: -2px;
-}
-
-.placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 12rem;
-  color: var(--muted);
-  font-style: italic;
-  background: var(--placeholder-bg);
-  border: 1px dashed var(--border);
-  border-radius: 0.5rem;
-  padding: 2rem;
-  text-align: center;
-}
-
-pre.markup {
-  margin: 0;
-  font-family: var(--font-mono);
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.markup {
-  margin: 0;
-  padding: 0.75rem 1rem 1rem;
-  font-family: var(--font-mono);
-  font-size: 0.8125rem;
-  line-height: 1.55;
-  tab-size: 2;
-  --markup-indent: 2ch;
-  --markup-gutter-width: 1rem;
-}
-
-.markup-ghost-tag-part {
-  opacity: 0.35;
-  cursor: help;
-}
-
-.cursor-hint {
-  position: fixed;
-  z-index: 200;
-  width: max-content;
-  max-width: 16rem;
-  padding: 0.3rem 0.5rem;
-  border-radius: 0.25rem;
-  background: var(--panel);
-  border: 1px solid var(--border);
-  color: var(--text);
-  font-family: var(--font-ui);
-  font-size: 0.75rem;
-  line-height: 1.35;
-  text-align: center;
-  white-space: normal;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
-  pointer-events: none;
-}
-
-.cursor-hint.cursor-hint-detail {
-  max-width: 24rem;
-  padding: 0.45rem 0.55rem;
-  text-align: left;
-}
-
-.head-tooltip {
-  border-collapse: collapse;
-  width: 100%;
-  font-size: 0.6875rem;
-  line-height: 1.4;
-}
-
-.head-tooltip th {
-  padding: 0.1rem 0.55rem 0.1rem 0;
-  color: var(--muted);
-  font-weight: 600;
-  text-align: left;
-  vertical-align: top;
-  white-space: nowrap;
-}
-
-.head-tooltip td {
-  padding: 0.1rem 0;
-  vertical-align: top;
-  word-break: break-word;
-}
-
-.head-tooltip .head-default {
-  color: var(--muted);
-  font-style: italic;
-  white-space: nowrap;
-}
-
-.markup-el {
-  cursor: pointer;
-  border-radius: 0.2rem;
-}
-
-.markup-el:hover {
-  background: var(--markup-hover);
-}
-
-.markup-el.selected {
-  background: var(--markup-selected);
-  box-shadow: inset 0 0 0 1px var(--accent);
-}
-
-.markup-line {
-  white-space: pre-wrap;
-  word-break: break-word;
-  cursor: pointer;
-  padding: 0 0.25rem;
-  border-radius: 0.15rem;
-}
-
-.markup-line-content {
-  display: flex;
-  align-items: baseline;
-  min-width: 0;
-  padding-left: calc(var(--markup-depth, 0) * var(--markup-indent));
-}
-
-.markup-gutter {
-  flex: 0 0 var(--markup-gutter-width);
-  width: var(--markup-gutter-width);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.markup-line-body {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.markup-fold-toggle {
-  appearance: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--markup-gutter-width);
-  height: 1rem;
-  margin: 0;
-  padding: 0;
-  border: none;
-  border-radius: 0.15rem;
-  background: transparent;
-  color: var(--muted);
-  cursor: pointer;
-  flex-shrink: 0;
-}
-
-.markup-fold-toggle::before {
-  content: "";
-  display: block;
-  width: 0;
-  height: 0;
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-  border-left: 5px solid currentColor;
-  transform: rotate(90deg);
-  transition: transform 0.12s ease;
-}
-
-.markup-el-foldable.markup-collapsed > .markup-line-open .markup-fold-toggle::before {
-  transform: rotate(0deg);
-}
-
-.markup-fold-toggle:hover {
-  background: var(--markup-hover);
-  color: var(--markup-fg);
-}
-
-.markup-fold-suffix {
-  display: none;
-}
-
-.markup-el-foldable.markup-collapsed > .markup-line-open .markup-fold-suffix {
-  display: inline;
-}
-
-.markup-el-foldable.markup-collapsed > .markup-fold-body {
-  display: none;
-}
-
-.xml-tag {
-  color: var(--xml-tag);
-}
-
-.xml-bracket {
-  color: var(--xml-bracket);
-}
-
-.xml-attr-name {
-  color: var(--xml-attr-name);
-}
-
-.xml-attr-value {
-  color: var(--xml-attr-value);
-}
-
-.xml-attr-value-truncatable {
-  display: inline;
-}
-
-.xml-attr-value-chip {
-  appearance: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.3em;
-  margin: 0 0 0 0.35em;
-  padding: 0.08em 0.45em 0.08em 0.5em;
-  border: 1px solid var(--border);
-  border-radius: 0.25rem;
-  background: var(--placeholder-bg);
-  color: var(--muted);
-  font-family: var(--font-ui, system-ui, sans-serif);
-  font-size: 0.72em;
-  font-weight: 600;
-  line-height: 1.35;
-  cursor: pointer;
-  vertical-align: baseline;
-  white-space: nowrap;
-}
-
-.xml-attr-value-chip::after {
-  content: "";
-  width: 0;
-  height: 0;
-  border-top: 0.28em solid currentColor;
-  border-left: 0.22em solid transparent;
-  border-right: 0.22em solid transparent;
-  opacity: 0.75;
-  transition: transform 0.12s ease;
-}
-
-.xml-attr-value-chip[aria-expanded="true"]::after {
-  transform: rotate(180deg);
-}
-
-.xml-attr-value-chip:hover,
-.xml-attr-value-chip[aria-expanded="true"] {
-  border-color: var(--accent);
-  color: var(--accent);
-  background: color-mix(in srgb, var(--accent) 8%, var(--placeholder-bg));
-}
-
-.markup-embedded-uri-panel {
-  cursor: text;
-}
-
-.markup-embedded-uri-panel:hover {
-  background: transparent;
-}
-
-.markup-embedded-uri-panel-body {
-  margin: 0.1rem 0 0.25rem;
-  padding: 0.45rem 0.6rem;
-  max-height: 8rem;
-  overflow: auto;
-  color: var(--xml-attr-value);
-  word-break: break-all;
-  background: var(--placeholder-bg);
-  border: 1px solid var(--border);
-  border-radius: 0.25rem;
-  user-select: text;
-}
-
-.xml-text {
-  color: var(--xml-text);
-}
-
-.xml-cdata {
-  color: var(--xml-cdata);
-}
-
-.xml-cdata-delimiter {
-  color: var(--xml-cdata-delimiter);
-}
-
-.page-view {
-  position: relative;
-  display: block;
-  width: fit-content;
-  flex-shrink: 0;
-  margin: auto;
-  line-height: 0;
-  border: 1px solid var(--border);
-  border-radius: 0.25rem;
-  overflow: hidden;
-}
-
-.page-view img {
-  display: block;
-  width: auto;
-  height: auto;
-  max-width: none;
-  max-height: none;
-  border: none;
-  border-radius: 0;
-}
-
-.page-view img:not([data-layout-ready]) {
-  opacity: 0;
-}
-
-.page-view svg.overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: auto;
-  overflow: hidden;
-}
-
-.overlay rect.bbox.bbox-hidden,
-.overlay .overlay-badge.bbox-hidden {
-  display: none;
-}
-
-.overlay rect.bbox {
-  stroke-width: 2;
-  vector-effect: non-scaling-stroke;
-  pointer-events: none;
-}
-
-.overlay rect.bbox.selected {
-  fill: color-mix(in srgb, var(--kind-stroke, var(--accent)) 30%, transparent) !important;
-  stroke-width: 3.5;
-  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--kind-stroke, var(--accent)) 60%, transparent));
-}
-
-.overlay rect.bbox.related:not(.selected) {
-  fill: color-mix(in srgb, var(--kind-stroke, var(--accent)) 30%, transparent) !important;
-}
-
-.overlay rect.bbox.layer-furniture,
-.overlay rect.bbox.layer-background {
-  fill: url(#layer-hatch) !important;
-  stroke: color-mix(in srgb, var(--kind-stroke, var(--muted)) 50%, transparent);
-}
-
-.overlay .layer-hatch-stripe {
-  fill: var(--muted);
-  fill-opacity: 0.06;
-}
-
-.overlay rect.bbox.layer-furniture.selected,
-.overlay rect.bbox.layer-background.selected {
-  fill: color-mix(in srgb, var(--kind-stroke, var(--accent)) 22%, transparent) !important;
-}
-
-.overlay rect.bbox.layer-furniture.related:not(.selected),
-.overlay rect.bbox.layer-background.related:not(.selected) {
-  fill: color-mix(in srgb, var(--kind-stroke, var(--accent)) 18%, transparent) !important;
-}
-
-/* text */
-.overlay .bbox-text { fill: color-mix(in srgb, var(--kind-text) 14%, transparent); stroke: var(--kind-text); }
-
-/* heading */
-.overlay .bbox-heading { fill: color-mix(in srgb, var(--kind-heading) 14%, transparent); stroke: var(--kind-heading); }
-
-/* list / ldiv */
-.overlay .bbox-list,
-.overlay .bbox-ldiv { fill: color-mix(in srgb, var(--kind-list) 14%, transparent); stroke: var(--kind-list); }
-
-/* table */
-.overlay .bbox-table { fill: color-mix(in srgb, var(--kind-table) 14%, transparent); stroke: var(--kind-table); }
-
-/* index */
-.overlay .bbox-index { fill: color-mix(in srgb, var(--kind-index) 14%, transparent); stroke: var(--kind-index); }
-
-/* formula */
-.overlay .bbox-formula { fill: color-mix(in srgb, var(--kind-formula) 14%, transparent); stroke: var(--kind-formula); }
-
-/* code */
-.overlay .bbox-code { fill: color-mix(in srgb, var(--kind-code) 16%, transparent); stroke: var(--kind-code); }
-
-/* picture */
-.overlay .bbox-picture { fill: color-mix(in srgb, var(--kind-picture) 14%, transparent); stroke: var(--kind-picture); }
-
-/* group */
-.overlay .bbox-group { fill: color-mix(in srgb, var(--kind-group) 14%, transparent); stroke: var(--kind-group); }
-
-/* footnote */
-.overlay .bbox-footnote { fill: color-mix(in srgb, var(--kind-footnote) 14%, transparent); stroke: var(--kind-footnote); }
-
-/* page chrome */
-.overlay .bbox-page_header,
-.overlay .bbox-page_footer { fill: color-mix(in srgb, var(--kind-page_header) 14%, transparent); stroke: var(--kind-page_header); }
-
-/* caption */
-.overlay .bbox-caption { fill: color-mix(in srgb, var(--kind-caption) 14%, transparent); stroke: var(--kind-caption); }
-
-.overlay line.caption-link {
-  color: var(--kind-caption);
-  stroke: currentColor;
-  stroke-width: 1.5;
-  vector-effect: non-scaling-stroke;
-  pointer-events: none;
-  fill: none;
-}
-
-.overlay line.caption-link.bbox-hidden {
-  display: none;
-}
-
-.overlay line.xref-link {
-  color: var(--kind-footnote);
-  stroke: currentColor;
-  stroke-width: 1.5;
-  vector-effect: non-scaling-stroke;
-  pointer-events: none;
-  fill: none;
-}
-
-.overlay line.xref-link.bbox-hidden {
-  display: none;
-}
-
-.overlay .fragment-link {
-  pointer-events: none;
-}
-
-.overlay .fragment-link.bbox-hidden {
-  display: none;
-}
-
-.overlay .fragment-link-path {
-  color: var(--overlay-fragment);
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.5;
-  vector-effect: non-scaling-stroke;
-}
-
-.overlay .fragment-link-path-dashed {
-  stroke-dasharray: 6 4;
-}
-
-.overlay .fragment-nav {
-  pointer-events: none;
-}
-
-.overlay .fragment-nav.bbox-hidden {
-  display: none;
-}
-
-.overlay .fragment-nav-btn {
-  pointer-events: auto;
-  cursor: pointer;
-}
-
-.overlay .fragment-nav-btn-disabled {
-  pointer-events: none;
-  cursor: default;
-  opacity: 0.35;
-}
-
-.overlay .fragment-nav-btn-bg {
-  fill: var(--panel);
-  stroke: var(--overlay-fragment);
-  stroke-width: 1;
-  vector-effect: non-scaling-stroke;
-}
-
-.overlay .fragment-nav-btn-label {
-  fill: var(--overlay-fragment);
-  font-family: var(--font-ui);
-  font-weight: 700;
-  text-anchor: middle;
-  dominant-baseline: central;
-  pointer-events: none;
-}
-
-.overlay .fragment-nav-btn:not(.fragment-nav-btn-disabled):hover .fragment-nav-btn-bg {
-  fill: color-mix(in srgb, var(--overlay-fragment) 12%, var(--panel));
-}
-
-.overlay .fragment-link-label {
-  fill: var(--overlay-fragment);
-  font-family: var(--font-ui);
-  font-weight: 600;
-  font-style: italic;
-  text-anchor: middle;
-  dominant-baseline: middle;
-  paint-order: stroke fill;
-  stroke: var(--panel);
-  stroke-width: 3px;
-}
-
-.overlay .reading-order-step {
-  color: var(--overlay-reading-order);
-  stroke: currentColor;
-  stroke-width: 1.5;
-  stroke-dasharray: 5 4;
-  vector-effect: non-scaling-stroke;
-  pointer-events: none;
-  fill: none;
-}
-
-.overlay .reading-order-step.bbox-hidden,
-.overlay .reading-order-badge.bbox-hidden {
-  display: none;
-}
-
-.overlay .overlay-badge {
-  pointer-events: none;
-}
-
-.overlay .overlay-badge-bg {
-  fill-opacity: 1;
-  stroke: none;
-}
-
-.reading-order-badge .overlay-badge-bg {
-  fill: var(--overlay-reading-order);
-}
-
-.overlay .element-badge {
-  opacity: 0.8;
-  pointer-events: auto;
-  cursor: help;
-}
-
-.overlay .element-badge .overlay-badge-bg {
-  fill: var(--kind-stroke, var(--accent));
-}
-
-.overlay .overlay-badge-label {
-  fill: #ffffff;
-  fill-opacity: 1;
-  font-family: var(--font-ui);
-  font-weight: 700;
-  text-anchor: middle;
-  dominant-baseline: central;
-  pointer-events: none;
-}
-
-/* form fields */
-.overlay .bbox-field { fill: color-mix(in srgb, var(--kind-field) 14%, transparent); stroke: var(--kind-field); }
-
-/* fallback */
-.overlay .bbox-default { fill: color-mix(in srgb, var(--kind-default) 12%, transparent); stroke: var(--kind-default); }
-
-@media (prefers-color-scheme: dark) {
-  .overlay .bbox-text { fill: color-mix(in srgb, var(--kind-text) 20%, transparent); }
-
-  .overlay .bbox-heading { fill: color-mix(in srgb, var(--kind-heading) 20%, transparent); }
-
-  .overlay .bbox-list,
-  .overlay .bbox-ldiv { fill: color-mix(in srgb, var(--kind-list) 20%, transparent); }
-
-  .overlay .bbox-table { fill: color-mix(in srgb, var(--kind-table) 18%, transparent); }
-
-  .overlay .bbox-index { fill: color-mix(in srgb, var(--kind-index) 18%, transparent); }
-
-  .overlay .bbox-formula { fill: color-mix(in srgb, var(--kind-formula) 18%, transparent); }
-
-  .overlay .bbox-code { fill: color-mix(in srgb, var(--kind-code) 20%, transparent); }
-
-  .overlay .bbox-picture { fill: color-mix(in srgb, var(--kind-picture) 20%, transparent); }
-
-  .overlay .bbox-group { fill: color-mix(in srgb, var(--kind-group) 20%, transparent); }
-
-  .overlay .bbox-footnote { fill: color-mix(in srgb, var(--kind-footnote) 18%, transparent); }
-
-  .overlay .bbox-page_header,
-  .overlay .bbox-page_footer { fill: color-mix(in srgb, var(--kind-page_header) 18%, transparent); }
-
-  .overlay .bbox-caption { fill: color-mix(in srgb, var(--kind-caption) 18%, transparent); }
-
-  .overlay .bbox-field { fill: color-mix(in srgb, var(--kind-field) 18%, transparent); }
-
-  .overlay .bbox-default { fill: color-mix(in srgb, var(--kind-default) 18%, transparent); }
-}
-
-.empty-state {
-  flex: 1 1 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 0;
-  margin: 1rem;
-  padding: 2rem 1.5rem;
-  border: 2px dashed var(--border);
-  border-radius: 0.75rem;
-  background: var(--placeholder-bg);
-  text-align: center;
-  color: var(--muted);
-}
-
-.empty-state-inner {
-  max-width: 28rem;
-}
-
-.empty-state-loading {
-  display: none;
-  flex-direction: column;
-  align-items: center;
-}
-
-body.demo-loading .empty-state-loading {
-  display: flex;
-}
-
-body.demo-loading .empty-state-prompt {
-  display: none;
-}
-
-.loading-spinner {
-  width: 2rem;
-  height: 2rem;
-  margin: 0 auto 1rem;
-  border: 2px solid var(--border);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: loading-spin 0.7s linear infinite;
-}
-
-@keyframes loading-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.empty-state-title {
-  margin: 0 0 0.75rem;
-  font-size: 1.05rem;
-  color: var(--text);
-}
-
-.empty-state p {
-  margin: 0.5rem 0;
-}
-
-.empty-state-action {
-  margin: 0 0 0.75rem;
-}
-
-.text-link {
-  color: var(--accent);
-  text-decoration: underline;
-}
-
-.text-link:hover {
-  opacity: 0.85;
-}
-
-.empty-state-meta {
-  font-size: 0.875rem;
-}
-
-.rendered-doc {
-  max-width: 42rem;
-  margin: 0 auto;
-  line-height: 1.6;
-}
-
-.rendered-el-virtual-text > p,
-.rendered-el-virtual-text > div {
-  margin: 0;
-  display: inline;
-}
-
-.rendered-doc li > .rendered-el-virtual-text {
-  display: inline;
-}
-
-.rendered-doc li > .rendered-el-virtual-text > p,
-.rendered-doc li > .rendered-el-virtual-text > div {
-  display: inline;
-  margin: 0;
-}
-
-.rendered-table .rendered-el-virtual-text {
-  display: inline;
-  margin: 0;
-}
-
-.rendered-table .rendered-el-virtual-text > p,
-.rendered-table .rendered-el-virtual-text > div {
-  display: inline;
-  margin: 0;
-}
-
-.rendered-el-virtual-text > div > .rendered-el {
-  display: block;
-  margin: 0.25rem 0;
-}
-
-.rendered-el {
-  cursor: pointer;
-  border-radius: 0.25rem;
-}
-
-.rendered-el:hover {
-  outline: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
-}
-
-.rendered-el.selected {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-  background: color-mix(in srgb, var(--accent) 8%, transparent);
-}
-
-.rendered-doc p {
-  margin: 0 0 0.75rem;
-}
-
-.rendered-doc h1,
-.rendered-doc h2,
-.rendered-doc h3,
-.rendered-doc h4,
-.rendered-doc h5,
-.rendered-doc h6 {
-  margin: 1.25rem 0 0.5rem;
-  line-height: 1.25;
-}
-
-.rendered-doc h1:first-child,
-.rendered-doc h2:first-child,
-.rendered-doc h3:first-child {
-  margin-top: 0;
-}
-
-.rendered-doc ul,
-.rendered-doc ol {
-  margin: 0 0 0.75rem;
-  padding-left: 1.5rem;
-}
-
-.rendered-doc li {
-  margin: 0.25rem 0;
-}
-
-.rendered-doc li > .rendered-el > p:first-child,
-.rendered-doc li > .rendered-el > h1:first-child,
-.rendered-doc li > .rendered-el > h2:first-child,
-.rendered-doc li > .rendered-el > h3:first-child,
-.rendered-doc li > .rendered-el > h4:first-child,
-.rendered-doc li > .rendered-el > h5:first-child,
-.rendered-doc li > .rendered-el > h6:first-child {
-  margin-top: 0;
-}
-
-.rendered-marker {
-  margin-right: 0.35rem;
-}
-
-.rendered-handwriting {
-  font-family: "Segoe Print", "Bradley Hand", cursive;
-}
-
-.rendered-doc pre {
-  margin: 0 0 0.75rem;
-  padding: 0.75rem 1rem;
-  overflow-x: auto;
-  font-family: var(--font-mono);
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  background: var(--placeholder-bg);
-  border: 1px solid var(--border);
-  border-radius: 0.375rem;
-}
-
-.rendered-doc code {
-  font-family: var(--font-mono);
-  font-size: 0.875em;
-}
-
-.rendered-doc pre code {
-  font-size: inherit;
-  background: none;
-  border: none;
-  padding: 0;
-}
-
-.rendered-code-label {
-  display: block;
-  margin-bottom: 0.25rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--muted);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.rendered-formula {
-  display: block;
-  margin: 0 0 0.75rem;
-  padding: 0.5rem 0.75rem;
-  font-family: var(--font-mono);
-  font-size: 0.875rem;
-  background: var(--placeholder-bg);
-  border-left: 3px solid var(--border);
-  overflow-x: auto;
-}
-
-.rendered-formula-inline {
-  display: inline;
-  font-family: var(--font-mono);
-  font-size: 0.875em;
-}
-
-.rendered-doc figure {
-  margin: 0 0 0.75rem;
-}
-
-.rendered-doc figure img {
-  max-width: 100%;
-  height: auto;
-  border: 1px solid var(--border);
-  border-radius: 0.25rem;
-}
-
-.rendered-doc figure img.rendered-picture-unavailable {
-  display: inline-block;
-  min-width: 3rem;
-  min-height: 2.5rem;
-  object-fit: contain;
-  vertical-align: middle;
-}
-
-.rendered-doc figcaption {
-  margin-top: 0.35rem;
-  font-size: 0.875rem;
-  color: var(--muted);
-}
-
-.rendered-picture-contents {
-  margin-top: 0.5rem;
-  font-size: 0.875rem;
-  border: 1px solid var(--border);
-  border-radius: 0.375rem;
-  background: var(--placeholder-bg);
-}
-
-.rendered-picture-contents summary {
-  padding: 0.4rem 0.65rem;
-  cursor: pointer;
-  font-weight: 600;
-  color: var(--muted);
-  user-select: none;
-}
-
-.rendered-picture-contents summary:hover {
-  color: var(--text);
-}
-
-.rendered-picture-contents-body {
-  padding: 0.5rem 0.75rem 0.75rem;
-  border-top: 1px solid var(--border);
-}
-
-.rendered-picture-contents-body .rendered-el > p {
-  margin-bottom: 0.35rem;
-  font-size: 0.8125rem;
-}
-
-.rendered-table {
-  width: 100%;
-  margin: 0 0 0.75rem;
-  border-collapse: collapse;
-  font-size: 0.875rem;
-}
-
-.rendered-table caption {
-  caption-side: top;
-  margin-bottom: 0.35rem;
-  font-size: 0.875rem;
-  color: var(--muted);
-  text-align: left;
-}
-
-.rendered-table th,
-.rendered-table td {
-  border: 1px solid var(--border);
-  padding: 0.35rem 0.5rem;
-  vertical-align: top;
-  text-align: left;
-}
-
-.rendered-table th {
-  background: color-mix(in srgb, var(--border) 35%, var(--panel));
-  font-weight: 600;
-}
-
-.rendered-table .rendered-table-cell-text {
-  display: inline;
-}
-
-.rendered-table .rendered-el {
-  margin: 0;
-}
-
-.rendered-table .rendered-el-virtual-text > p,
-.rendered-table .rendered-el-virtual-text > div {
-  margin: 0;
-}
-
-.rendered-table .rendered-table {
-  margin: 0.25rem 0 0;
-}
-
-.rendered-page-header,
-.rendered-page-footer {
-  font-size: 0.875rem;
-  color: var(--muted);
-}
-
-.rendered-page-header {
-  margin-bottom: 1rem;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.rendered-page-footer {
-  margin-top: 1rem;
-  padding-top: 0.5rem;
-  border-top: 1px solid var(--border);
-}
-
-.rendered-doc:not(.show-reading-furniture) .rendered-el[data-doclang-layer="furniture"] {
-  display: none;
-}
-
-.rendered-doc:not(.show-reading-background) .rendered-el[data-doclang-layer="background"] {
-  display: none;
-}
-
-.rendered-el[data-doclang-layer="furniture"],
-.rendered-el[data-doclang-layer="background"] {
-  position: relative;
-}
-
-.rendered-el[data-doclang-layer="furniture"]::before,
-.rendered-el[data-doclang-layer="background"]::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  pointer-events: none;
-  background: repeating-linear-gradient(
-    -45deg,
-    transparent 0 10px,
-    color-mix(in srgb, var(--muted) 6%, transparent) 10px 16px
-  );
-}
-
-.rendered-el.rendered-footnote > aside {
-  font-size: 0.875rem;
-  color: var(--muted);
-  border-left: 2px solid var(--border);
-  padding-left: 0.75rem;
-  margin: 0 0 0.75rem;
-}
-
-.rendered-unsupported {
-  margin: 0 0 0.75rem;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.8125rem;
-  font-style: italic;
-  color: var(--muted);
-  background: var(--placeholder-bg);
-  border: 1px dashed var(--border);
-  border-radius: 0.375rem;
-}
-
-.rendered-field-region {
-  margin: 0 0 1rem;
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--border);
-  border-radius: 0.5rem;
-  background: color-mix(in srgb, var(--kind-field) 6%, transparent);
-}
-
-.rendered-field-region > .rendered-field-heading:first-child,
-.rendered-field-region > .rendered-el.rendered-field_heading > .rendered-field-heading:first-child {
-  margin-top: 0;
-}
-
-.rendered-field-item {
-  margin: 0.5rem 0;
-}
-
-.rendered-field-item > .rendered-el.rendered-field-key,
-.rendered-field-key {
-  font-weight: 600;
-}
-
-.rendered-field-item > .rendered-el.rendered-field-key + .rendered-el,
-.rendered-field-item > .rendered-el.rendered-field-key + .rendered-el-virtual-text {
-  margin-top: 0.15rem;
-}
-
-.rendered-field-value-fillable .rendered-field-fillable-slot {
-  display: inline-block;
-  min-width: 6rem;
-  min-height: 1.25em;
-  border-bottom: 1px solid color-mix(in srgb, var(--text) 55%, transparent);
-  vertical-align: bottom;
-}
-
-.rendered-field-hint {
-  font-size: 0.85em;
-  color: var(--muted);
-  font-style: italic;
-}
-
-.rendered-field-heading {
-  color: var(--text);
-}
-
-.rendered-checkbox {
-  margin: 0 0.25rem 0 0;
-  vertical-align: middle;
-  accent-color: var(--kind-field);
-}
-
-.rendered-checkbox-wrap {
-  display: inline;
-}
-
-@media (max-width: 1200px) {
-  body.viewer-loaded #main.layout-stacked .pane {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
-
-  body.viewer-loaded #main.layout-stacked .pane-layout-last {
-    border-bottom: none;
-  }
-}
diff --git a/viewer.js b/viewer.js
index 872111b..a3c32a6 100644
--- a/viewer.js
+++ b/viewer.js
@@ -1,5446 +1,5461 @@
-/* DocLang Archive Viewer — archive format: github.com/doclang-project/doclang spec.md#doclang-archive-format */
-
-const SUPPORTED_FILE_EXTENSIONS = [".dclx", ".dclg"];
-const OPEN_FILE_HINT = `Open a DocLang file (${SUPPORTED_FILE_EXTENSIONS.join(", ")})`;
-const VIRTUAL_TEXT_TAG_HINT = "DocLang virtual <text>; wrapping tags not included in source";
-const FRAGMENT_LINK_LABEL_CROSS_PAGE = "cross-page content";
-const FRAGMENT_LINK_LABEL_SAME_PAGE = "fragmented content";
-const FRAGMENT_NAV_HINT_PREV = "Previous fragment";
-const FRAGMENT_NAV_HINT_NEXT = "Next fragment";
-const DOCLANG_NS = "https://www.doclang.ai/ns/v0";
-const PAGE_IMAGE_RE = /^(\d+)\.(png|jpe?g|webp)$/i;
-const NO_MARKUP = "(No markup to be shown.)";
-const NO_IMAGE = "(No page image available.)";
-const FILE_THUMB_PLACEHOLDER_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>`;
-const PICTURE_UNAVAILABLE_ALT = "Picture asset not available";
-const INVALID_PICTURE_SRC = "data:image/png;base64,NOT_A_VALID_IMAGE";
-/** Allow small embedded raster data URIs only; remote/blob/other schemes are rejected. */
-const SAFE_DATA_IMAGE_RE = /^data:image\/(png|jpe?g|webp|gif);base64,/i;
-const MAX_DATA_IMAGE_URI_LENGTH = 2 * 1024 * 1024; // 2 MiB
-const ZIP_MAX_ENTRIES = 5000;
-const ZIP_MAX_ENTRY_COMPRESSED_BYTES = 128 * 1024 * 1024; // 128 MiB
-const ZIP_MAX_ENTRY_UNCOMPRESSED_BYTES = 128 * 1024 * 1024; // 128 MiB
-const ZIP_MAX_TOTAL_UNCOMPRESSED_BYTES = 512 * 1024 * 1024; // 512 MiB
-const ZIP_MAX_COMPRESSION_RATIO = 100; // uncompressed / compressed
-const LONG_EMBEDDED_URI_PREVIEW_LENGTH = 30;
-const HEAD_TAGS = new Set([
-  "label", "thread", "xref", "href", "layer", "location", "caption", "description", "summary", "custom",
-]);
-const SEMANTIC_TAGS = new Set([
-  "text", "heading", "footnote", "page_header", "page_footer", "field_region", "list", "table", "index",
-  "formula", "code", "picture", "marker", "group", "field_heading", "field_item", "key", "value", "hint",
-  "caption", "page_break",
+//#region \0rolldown/runtime.js
+var e = Object.defineProperty, t = (t, n) => {
+	let r = {};
+	for (var i in t) e(r, i, {
+		get: t[i],
+		enumerable: !0
+	});
+	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
+}, n = globalThis, r = n.ShadowRoot && (n.ShadyCSS === void 0 || n.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, i = Symbol(), a = /* @__PURE__ */ new WeakMap(), o = class {
+	constructor(e, t, n) {
+		if (this._$cssResult$ = !0, n !== i) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+		this.cssText = e, this.t = t;
+	}
+	get styleSheet() {
+		let e = this.o, t = this.t;
+		if (r && e === void 0) {
+			let n = t !== void 0 && t.length === 1;
+			n && (e = a.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), n && a.set(t, e));
+		}
+		return e;
+	}
+	toString() {
+		return this.cssText;
+	}
+}, s = (e) => new o(typeof e == "string" ? e : e + "", void 0, i), c = (e, t) => {
+	if (r) e.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
+	else for (let r of t) {
+		let t = document.createElement("style"), i = n.litNonce;
+		i !== void 0 && t.setAttribute("nonce", i), t.textContent = r.cssText, e.appendChild(t);
+	}
+}, l = r ? (e) => e : (e) => e instanceof CSSStyleSheet ? ((e) => {
+	let t = "";
+	for (let n of e.cssRules) t += n.cssText;
+	return s(t);
+})(e) : e, { is: u, defineProperty: d, getOwnPropertyDescriptor: f, getOwnPropertyNames: p, getOwnPropertySymbols: m, getPrototypeOf: ee } = Object, h = globalThis, g = h.trustedTypes, te = g ? g.emptyScript : "", ne = h.reactiveElementPolyfillSupport, re = (e, t) => e, ie = {
+	toAttribute(e, t) {
+		switch (t) {
+			case Boolean:
+				e = e ? te : null;
+				break;
+			case Object:
+			case Array: e = e == null ? e : JSON.stringify(e);
+		}
+		return e;
+	},
+	fromAttribute(e, t) {
+		let n = e;
+		switch (t) {
+			case Boolean:
+				n = e !== null;
+				break;
+			case Number:
+				n = e === null ? null : Number(e);
+				break;
+			case Object:
+			case Array: try {
+				n = JSON.parse(e);
+			} catch {
+				n = null;
+			}
+		}
+		return n;
+	}
+}, ae = (e, t) => !u(e, t), oe = {
+	attribute: !0,
+	type: String,
+	converter: ie,
+	reflect: !1,
+	useDefault: !1,
+	hasChanged: ae
+};
+Symbol.metadata ??= Symbol("metadata"), h.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
+var se = class extends HTMLElement {
+	static addInitializer(e) {
+		this._$Ei(), (this.l ??= []).push(e);
+	}
+	static get observedAttributes() {
+		return this.finalize(), this._$Eh && [...this._$Eh.keys()];
+	}
+	static createProperty(e, t = oe) {
+		if (t.state && (t.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((t = Object.create(t)).wrapped = !0), this.elementProperties.set(e, t), !t.noAccessor) {
+			let n = Symbol(), r = this.getPropertyDescriptor(e, n, t);
+			r !== void 0 && d(this.prototype, e, r);
+		}
+	}
+	static getPropertyDescriptor(e, t, n) {
+		let { get: r, set: i } = f(this.prototype, e) ?? {
+			get() {
+				return this[t];
+			},
+			set(e) {
+				this[t] = e;
+			}
+		};
+		return {
+			get: r,
+			set(t) {
+				let a = r?.call(this);
+				i?.call(this, t), this.requestUpdate(e, a, n);
+			},
+			configurable: !0,
+			enumerable: !0
+		};
+	}
+	static getPropertyOptions(e) {
+		return this.elementProperties.get(e) ?? oe;
+	}
+	static _$Ei() {
+		if (this.hasOwnProperty(re("elementProperties"))) return;
+		let e = ee(this);
+		e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
+	}
+	static finalize() {
+		if (this.hasOwnProperty(re("finalized"))) return;
+		if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(re("properties"))) {
+			let e = this.properties, t = [...p(e), ...m(e)];
+			for (let n of t) this.createProperty(n, e[n]);
+		}
+		let e = this[Symbol.metadata];
+		if (e !== null) {
+			let t = litPropertyMetadata.get(e);
+			if (t !== void 0) for (let [e, n] of t) this.elementProperties.set(e, n);
+		}
+		this._$Eh = /* @__PURE__ */ new Map();
+		for (let [e, t] of this.elementProperties) {
+			let n = this._$Eu(e, t);
+			n !== void 0 && this._$Eh.set(n, e);
+		}
+		this.elementStyles = this.finalizeStyles(this.styles);
+	}
+	static finalizeStyles(e) {
+		let t = [];
+		if (Array.isArray(e)) {
+			let n = new Set(e.flat(1 / 0).reverse());
+			for (let e of n) t.unshift(l(e));
+		} else e !== void 0 && t.push(l(e));
+		return t;
+	}
+	static _$Eu(e, t) {
+		let n = t.attribute;
+		return !1 === n ? void 0 : typeof n == "string" ? n : typeof e == "string" ? e.toLowerCase() : void 0;
+	}
+	constructor() {
+		super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
+	}
+	_$Ev() {
+		this._$ES = new Promise((e) => this.enableUpdating = e), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach((e) => e(this));
+	}
+	addController(e) {
+		(this._$EO ??= /* @__PURE__ */ new Set()).add(e), this.renderRoot !== void 0 && this.isConnected && e.hostConnected?.();
+	}
+	removeController(e) {
+		this._$EO?.delete(e);
+	}
+	_$E_() {
+		let e = /* @__PURE__ */ new Map(), t = this.constructor.elementProperties;
+		for (let n of t.keys()) this.hasOwnProperty(n) && (e.set(n, this[n]), delete this[n]);
+		e.size > 0 && (this._$Ep = e);
+	}
+	createRenderRoot() {
+		let e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+		return c(e, this.constructor.elementStyles), e;
+	}
+	connectedCallback() {
+		this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach((e) => e.hostConnected?.());
+	}
+	enableUpdating(e) {}
+	disconnectedCallback() {
+		this._$EO?.forEach((e) => e.hostDisconnected?.());
+	}
+	attributeChangedCallback(e, t, n) {
+		this._$AK(e, n);
+	}
+	_$ET(e, t) {
+		let n = this.constructor.elementProperties.get(e), r = this.constructor._$Eu(e, n);
+		if (r !== void 0 && !0 === n.reflect) {
+			let i = (n.converter?.toAttribute === void 0 ? ie : n.converter).toAttribute(t, n.type);
+			this._$Em = e, i == null ? this.removeAttribute(r) : this.setAttribute(r, i), this._$Em = null;
+		}
+	}
+	_$AK(e, t) {
+		let n = this.constructor, r = n._$Eh.get(e);
+		if (r !== void 0 && this._$Em !== r) {
+			let e = n.getPropertyOptions(r), i = typeof e.converter == "function" ? { fromAttribute: e.converter } : e.converter?.fromAttribute === void 0 ? ie : e.converter;
+			this._$Em = r;
+			let a = i.fromAttribute(t, e.type);
+			this[r] = a ?? this._$Ej?.get(r) ?? a, this._$Em = null;
+		}
+	}
+	requestUpdate(e, t, n, r = !1, i) {
+		if (e !== void 0) {
+			let a = this.constructor;
+			if (!1 === r && (i = this[e]), n ??= a.getPropertyOptions(e), !((n.hasChanged ?? ae)(i, t) || n.useDefault && n.reflect && i === this._$Ej?.get(e) && !this.hasAttribute(a._$Eu(e, n)))) return;
+			this.C(e, t, n);
+		}
+		!1 === this.isUpdatePending && (this._$ES = this._$EP());
+	}
+	C(e, t, { useDefault: n, reflect: r, wrapped: i }, a) {
+		n && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(e) && (this._$Ej.set(e, a ?? t ?? this[e]), !0 !== i || a !== void 0) || (this._$AL.has(e) || (this.hasUpdated || n || (t = void 0), this._$AL.set(e, t)), !0 === r && this._$Em !== e && (this._$Eq ??= /* @__PURE__ */ new Set()).add(e));
+	}
+	async _$EP() {
+		this.isUpdatePending = !0;
+		try {
+			await this._$ES;
+		} catch (e) {
+			Promise.reject(e);
+		}
+		let e = this.scheduleUpdate();
+		return e != null && await e, !this.isUpdatePending;
+	}
+	scheduleUpdate() {
+		return this.performUpdate();
+	}
+	performUpdate() {
+		if (!this.isUpdatePending) return;
+		if (!this.hasUpdated) {
+			if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
+				for (let [e, t] of this._$Ep) this[e] = t;
+				this._$Ep = void 0;
+			}
+			let e = this.constructor.elementProperties;
+			if (e.size > 0) for (let [t, n] of e) {
+				let { wrapped: e } = n, r = this[t];
+				!0 !== e || this._$AL.has(t) || r === void 0 || this.C(t, void 0, n, r);
+			}
+		}
+		let e = !1, t = this._$AL;
+		try {
+			e = this.shouldUpdate(t), e ? (this.willUpdate(t), this._$EO?.forEach((e) => e.hostUpdate?.()), this.update(t)) : this._$EM();
+		} catch (t) {
+			throw e = !1, this._$EM(), t;
+		}
+		e && this._$AE(t);
+	}
+	willUpdate(e) {}
+	_$AE(e) {
+		this._$EO?.forEach((e) => e.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(e)), this.updated(e);
+	}
+	_$EM() {
+		this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
+	}
+	get updateComplete() {
+		return this.getUpdateComplete();
+	}
+	getUpdateComplete() {
+		return this._$ES;
+	}
+	shouldUpdate(e) {
+		return !0;
+	}
+	update(e) {
+		this._$Eq &&= this._$Eq.forEach((e) => this._$ET(e, this[e])), this._$EM();
+	}
+	updated(e) {}
+	firstUpdated(e) {}
+};
+se.elementStyles = [], se.shadowRootOptions = { mode: "open" }, se[re("elementProperties")] = /* @__PURE__ */ new Map(), se[re("finalized")] = /* @__PURE__ */ new Map(), ne?.({ ReactiveElement: se }), (h.reactiveElementVersions ??= []).push("2.1.2");
+//#endregion
+//#region node_modules/lit-html/lit-html.js
+var ce = globalThis, le = (e) => e, ue = ce.trustedTypes, de = ue ? ue.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, fe = "$lit$", _ = `lit$${Math.random().toFixed(9).slice(2)}$`, pe = "?" + _, me = `<${pe}>`, v = document, he = () => v.createComment(""), ge = (e) => e === null || typeof e != "object" && typeof e != "function", _e = Array.isArray, ve = (e) => _e(e) || typeof e?.[Symbol.iterator] == "function", ye = "[ 	\n\f\r]", be = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, xe = /-->/g, Se = />/g, y = RegExp(`>|${ye}(?:([^\\s"'>=/]+)(${ye}*=${ye}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"), Ce = /'/g, we = /"/g, Te = /^(?:script|style|textarea|title)$/i, Ee = (e) => (t, ...n) => ({
+	_$litType$: e,
+	strings: t,
+	values: n
+}), b = Ee(1), x = Ee(2), S = Symbol.for("lit-noChange"), C = Symbol.for("lit-nothing"), De = /* @__PURE__ */ new WeakMap(), w = v.createTreeWalker(v, 129);
+function Oe(e, t) {
+	if (!_e(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
+	return de === void 0 ? t : de.createHTML(t);
+}
+var ke = (e, t) => {
+	let n = e.length - 1, r = [], i, a = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", o = be;
+	for (let t = 0; t < n; t++) {
+		let n = e[t], s, c, l = -1, u = 0;
+		for (; u < n.length && (o.lastIndex = u, c = o.exec(n), c !== null);) u = o.lastIndex, o === be ? c[1] === "!--" ? o = xe : c[1] === void 0 ? c[2] === void 0 ? c[3] !== void 0 && (o = y) : (Te.test(c[2]) && (i = RegExp("</" + c[2], "g")), o = y) : o = Se : o === y ? c[0] === ">" ? (o = i ?? be, l = -1) : c[1] === void 0 ? l = -2 : (l = o.lastIndex - c[2].length, s = c[1], o = c[3] === void 0 ? y : c[3] === "\"" ? we : Ce) : o === we || o === Ce ? o = y : o === xe || o === Se ? o = be : (o = y, i = void 0);
+		let d = o === y && e[t + 1].startsWith("/>") ? " " : "";
+		a += o === be ? n + me : l >= 0 ? (r.push(s), n.slice(0, l) + fe + n.slice(l) + _ + d) : n + _ + (l === -2 ? t : d);
+	}
+	return [Oe(e, a + (e[n] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), r];
+}, Ae = class e {
+	constructor({ strings: t, _$litType$: n }, r) {
+		let i;
+		this.parts = [];
+		let a = 0, o = 0, s = t.length - 1, c = this.parts, [l, u] = ke(t, n);
+		if (this.el = e.createElement(l, r), w.currentNode = this.el.content, n === 2 || n === 3) {
+			let e = this.el.content.firstChild;
+			e.replaceWith(...e.childNodes);
+		}
+		for (; (i = w.nextNode()) !== null && c.length < s;) {
+			if (i.nodeType === 1) {
+				if (i.hasAttributes()) for (let e of i.getAttributeNames()) if (e.endsWith(fe)) {
+					let t = u[o++], n = i.getAttribute(e).split(_), r = /([.?@])?(.*)/.exec(t);
+					c.push({
+						type: 1,
+						index: a,
+						name: r[2],
+						strings: n,
+						ctor: r[1] === "." ? Fe : r[1] === "?" ? Ie : r[1] === "@" ? Le : Pe
+					}), i.removeAttribute(e);
+				} else e.startsWith(_) && (c.push({
+					type: 6,
+					index: a
+				}), i.removeAttribute(e));
+				if (Te.test(i.tagName)) {
+					let e = i.textContent.split(_), t = e.length - 1;
+					if (t > 0) {
+						i.textContent = ue ? ue.emptyScript : "";
+						for (let n = 0; n < t; n++) i.append(e[n], he()), w.nextNode(), c.push({
+							type: 2,
+							index: ++a
+						});
+						i.append(e[t], he());
+					}
+				}
+			} else if (i.nodeType === 8) {
+				if (i.data === pe) c.push({
+					type: 2,
+					index: a
+				});
+				else {
+					let e = -1;
+					for (; (e = i.data.indexOf(_, e + 1)) !== -1;) c.push({
+						type: 7,
+						index: a
+					}), e += _.length - 1;
+				}
+			}
+			a++;
+		}
+	}
+	static createElement(e, t) {
+		let n = v.createElement("template");
+		return n.innerHTML = e, n;
+	}
+};
+function je(e, t, n = e, r) {
+	if (t === S) return t;
+	let i = r === void 0 ? n._$Cl : n._$Co?.[r], a = ge(t) ? void 0 : t._$litDirective$;
+	return i?.constructor !== a && (i?._$AO?.(!1), a === void 0 ? i = void 0 : (i = new a(e), i._$AT(e, n, r)), r === void 0 ? n._$Cl = i : (n._$Co ??= [])[r] = i), i !== void 0 && (t = je(e, i._$AS(e, t.values), i, r)), t;
+}
+var Me = class {
+	constructor(e, t) {
+		this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = t;
+	}
+	get parentNode() {
+		return this._$AM.parentNode;
+	}
+	get _$AU() {
+		return this._$AM._$AU;
+	}
+	u(e) {
+		let { el: { content: t }, parts: n } = this._$AD, r = (e?.creationScope ?? v).importNode(t, !0);
+		w.currentNode = r;
+		let i = w.nextNode(), a = 0, o = 0, s = n[0];
+		for (; s !== void 0;) {
+			if (a === s.index) {
+				let t;
+				s.type === 2 ? t = new Ne(i, i.nextSibling, this, e) : s.type === 1 ? t = new s.ctor(i, s.name, s.strings, this, e) : s.type === 6 && (t = new Re(i, this, e)), this._$AV.push(t), s = n[++o];
+			}
+			a !== s?.index && (i = w.nextNode(), a++);
+		}
+		return w.currentNode = v, r;
+	}
+	p(e) {
+		let t = 0;
+		for (let n of this._$AV) n !== void 0 && (n.strings === void 0 ? n._$AI(e[t]) : (n._$AI(e, n, t), t += n.strings.length - 2)), t++;
+	}
+}, Ne = class e {
+	get _$AU() {
+		return this._$AM?._$AU ?? this._$Cv;
+	}
+	constructor(e, t, n, r) {
+		this.type = 2, this._$AH = C, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = n, this.options = r, this._$Cv = r?.isConnected ?? !0;
+	}
+	get parentNode() {
+		let e = this._$AA.parentNode, t = this._$AM;
+		return t !== void 0 && e?.nodeType === 11 && (e = t.parentNode), e;
+	}
+	get startNode() {
+		return this._$AA;
+	}
+	get endNode() {
+		return this._$AB;
+	}
+	_$AI(e, t = this) {
+		e = je(this, e, t), ge(e) ? e === C || e == null || e === "" ? (this._$AH !== C && this._$AR(), this._$AH = C) : e !== this._$AH && e !== S && this._(e) : e._$litType$ === void 0 ? e.nodeType === void 0 ? ve(e) ? this.k(e) : this._(e) : this.T(e) : this.$(e);
+	}
+	O(e) {
+		return this._$AA.parentNode.insertBefore(e, this._$AB);
+	}
+	T(e) {
+		this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
+	}
+	_(e) {
+		this._$AH !== C && ge(this._$AH) ? this._$AA.nextSibling.data = e : this.T(v.createTextNode(e)), this._$AH = e;
+	}
+	$(e) {
+		let { values: t, _$litType$: n } = e, r = typeof n == "number" ? this._$AC(e) : (n.el === void 0 && (n.el = Ae.createElement(Oe(n.h, n.h[0]), this.options)), n);
+		if (this._$AH?._$AD === r) this._$AH.p(t);
+		else {
+			let e = new Me(r, this), n = e.u(this.options);
+			e.p(t), this.T(n), this._$AH = e;
+		}
+	}
+	_$AC(e) {
+		let t = De.get(e.strings);
+		return t === void 0 && De.set(e.strings, t = new Ae(e)), t;
+	}
+	k(t) {
+		_e(this._$AH) || (this._$AH = [], this._$AR());
+		let n = this._$AH, r, i = 0;
+		for (let a of t) i === n.length ? n.push(r = new e(this.O(he()), this.O(he()), this, this.options)) : r = n[i], r._$AI(a), i++;
+		i < n.length && (this._$AR(r && r._$AB.nextSibling, i), n.length = i);
+	}
+	_$AR(e = this._$AA.nextSibling, t) {
+		for (this._$AP?.(!1, !0, t); e !== this._$AB;) {
+			let t = le(e).nextSibling;
+			le(e).remove(), e = t;
+		}
+	}
+	setConnected(e) {
+		this._$AM === void 0 && (this._$Cv = e, this._$AP?.(e));
+	}
+}, Pe = class {
+	get tagName() {
+		return this.element.tagName;
+	}
+	get _$AU() {
+		return this._$AM._$AU;
+	}
+	constructor(e, t, n, r, i) {
+		this.type = 1, this._$AH = C, this._$AN = void 0, this.element = e, this.name = t, this._$AM = r, this.options = i, n.length > 2 || n[0] !== "" || n[1] !== "" ? (this._$AH = Array(n.length - 1).fill(/* @__PURE__ */ new String()), this.strings = n) : this._$AH = C;
+	}
+	_$AI(e, t = this, n, r) {
+		let i = this.strings, a = !1;
+		if (i === void 0) e = je(this, e, t, 0), a = !ge(e) || e !== this._$AH && e !== S, a && (this._$AH = e);
+		else {
+			let r = e, o, s;
+			for (e = i[0], o = 0; o < i.length - 1; o++) s = je(this, r[n + o], t, o), s === S && (s = this._$AH[o]), a ||= !ge(s) || s !== this._$AH[o], s === C ? e = C : e !== C && (e += (s ?? "") + i[o + 1]), this._$AH[o] = s;
+		}
+		a && !r && this.j(e);
+	}
+	j(e) {
+		e === C ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
+	}
+}, Fe = class extends Pe {
+	constructor() {
+		super(...arguments), this.type = 3;
+	}
+	j(e) {
+		this.element[this.name] = e === C ? void 0 : e;
+	}
+}, Ie = class extends Pe {
+	constructor() {
+		super(...arguments), this.type = 4;
+	}
+	j(e) {
+		this.element.toggleAttribute(this.name, !!e && e !== C);
+	}
+}, Le = class extends Pe {
+	constructor(e, t, n, r, i) {
+		super(e, t, n, r, i), this.type = 5;
+	}
+	_$AI(e, t = this) {
+		if ((e = je(this, e, t, 0) ?? C) === S) return;
+		let n = this._$AH, r = e === C && n !== C || e.capture !== n.capture || e.once !== n.once || e.passive !== n.passive, i = e !== C && (n === C || r);
+		r && this.element.removeEventListener(this.name, this, n), i && this.element.addEventListener(this.name, this, e), this._$AH = e;
+	}
+	handleEvent(e) {
+		typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, e) : this._$AH.handleEvent(e);
+	}
+}, Re = class {
+	constructor(e, t, n) {
+		this.element = e, this.type = 6, this._$AN = void 0, this._$AM = t, this.options = n;
+	}
+	get _$AU() {
+		return this._$AM._$AU;
+	}
+	_$AI(e) {
+		je(this, e);
+	}
+}, ze = {
+	M: fe,
+	P: _,
+	A: pe,
+	C: 1,
+	L: ke,
+	R: Me,
+	D: ve,
+	V: je,
+	I: Ne,
+	H: Pe,
+	N: Ie,
+	U: Le,
+	B: Fe,
+	F: Re
+}, Be = ce.litHtmlPolyfillSupport;
+Be?.(Ae, Ne), (ce.litHtmlVersions ??= []).push("3.3.3");
+var Ve = (e, t, n) => {
+	let r = n?.renderBefore ?? t, i = r._$litPart$;
+	if (i === void 0) {
+		let e = n?.renderBefore ?? null;
+		r._$litPart$ = i = new Ne(t.insertBefore(he(), e), e, void 0, n ?? {});
+	}
+	return i._$AI(e), i;
+}, He = globalThis, T = class extends se {
+	constructor() {
+		super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
+	}
+	createRenderRoot() {
+		let e = super.createRenderRoot();
+		return this.renderOptions.renderBefore ??= e.firstChild, e;
+	}
+	update(e) {
+		let t = this.render();
+		this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = Ve(t, this.renderRoot, this.renderOptions);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._$Do?.setConnected(!0);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._$Do?.setConnected(!1);
+	}
+	render() {
+		return S;
+	}
+};
+T._$litElement$ = !0, T.finalized = !0, He.litElementHydrateSupport?.({ LitElement: T });
+var Ue = He.litElementPolyfillSupport;
+Ue?.({ LitElement: T }), (He.litElementVersions ??= []).push("4.2.2");
+//#endregion
+//#region node_modules/@lit/reactive-element/decorators/custom-element.js
+var E = (e) => (t, n) => {
+	n === void 0 ? customElements.define(e, t) : n.addInitializer(() => {
+		customElements.define(e, t);
+	});
+}, We = {
+	attribute: !0,
+	type: String,
+	converter: ie,
+	reflect: !1,
+	hasChanged: ae
+}, Ge = (e = We, t, n) => {
+	let { kind: r, metadata: i } = n, a = globalThis.litPropertyMetadata.get(i);
+	if (a === void 0 && globalThis.litPropertyMetadata.set(i, a = /* @__PURE__ */ new Map()), r === "setter" && ((e = Object.create(e)).wrapped = !0), a.set(n.name, e), r === "accessor") {
+		let { name: r } = n;
+		return {
+			set(n) {
+				let i = t.get.call(this);
+				t.set.call(this, n), this.requestUpdate(r, i, e, !0, n);
+			},
+			init(t) {
+				return t !== void 0 && this.C(r, void 0, e, t), t;
+			}
+		};
+	}
+	if (r === "setter") {
+		let { name: r } = n;
+		return function(n) {
+			let i = this[r];
+			t.call(this, n), this.requestUpdate(r, i, e, !0, n);
+		};
+	}
+	throw Error("Unsupported decorator location: " + r);
+};
+function D(e) {
+	return (t, n) => typeof n == "object" ? Ge(e, t, n) : ((e, t, n) => {
+		let r = t.hasOwnProperty(n);
+		return t.constructor.createProperty(n, e), r ? Object.getOwnPropertyDescriptor(t, n) : void 0;
+	})(e, t, n);
+}
+//#endregion
+//#region node_modules/@lit/reactive-element/decorators/state.js
+function O(e) {
+	return D({
+		...e,
+		state: !0,
+		attribute: !1
+	});
+}
+//#endregion
+//#region node_modules/lit-html/directive-helpers.js
+var { I: Ke } = ze, qe = (e) => e, Je = (e) => e.strings === void 0, Ye = () => document.createComment(""), Xe = (e, t, n) => {
+	let r = e._$AA.parentNode, i = t === void 0 ? e._$AB : t._$AA;
+	if (n === void 0) n = new Ke(r.insertBefore(Ye(), i), r.insertBefore(Ye(), i), e, e.options);
+	else {
+		let t = n._$AB.nextSibling, a = n._$AM, o = a !== e;
+		if (o) {
+			let t;
+			n._$AQ?.(e), n._$AM = e, n._$AP !== void 0 && (t = e._$AU) !== a._$AU && n._$AP(t);
+		}
+		if (t !== i || o) {
+			let e = n._$AA;
+			for (; e !== t;) {
+				let t = qe(e).nextSibling;
+				qe(r).insertBefore(e, i), e = t;
+			}
+		}
+	}
+	return n;
+}, k = (e, t, n = e) => (e._$AI(t, n), e), Ze = {}, Qe = (e, t = Ze) => e._$AH = t, $e = (e) => e._$AH, et = (e) => {
+	e._$AR(), e._$AA.remove();
+}, tt = {
+	ATTRIBUTE: 1,
+	CHILD: 2,
+	PROPERTY: 3,
+	BOOLEAN_ATTRIBUTE: 4,
+	EVENT: 5,
+	ELEMENT: 6
+}, nt = (e) => (...t) => ({
+	_$litDirective$: e,
+	values: t
+}), rt = class {
+	constructor(e) {}
+	get _$AU() {
+		return this._$AM._$AU;
+	}
+	_$AT(e, t, n) {
+		this._$Ct = e, this._$AM = t, this._$Ci = n;
+	}
+	_$AS(e, t) {
+		return this.update(e, t);
+	}
+	update(e, t) {
+		return this.render(...t);
+	}
+}, it = (e, t) => {
+	let n = e._$AN;
+	if (n === void 0) return !1;
+	for (let e of n) e._$AO?.(t, !1), it(e, t);
+	return !0;
+}, at = (e) => {
+	let t, n;
+	do {
+		if ((t = e._$AM) === void 0) break;
+		n = t._$AN, n.delete(e), e = t;
+	} while (n?.size === 0);
+}, ot = (e) => {
+	for (let t; t = e._$AM; e = t) {
+		let n = t._$AN;
+		if (n === void 0) t._$AN = n = /* @__PURE__ */ new Set();
+		else if (n.has(e)) break;
+		n.add(e), lt(t);
+	}
+};
+function st(e) {
+	this._$AN === void 0 ? this._$AM = e : (at(this), this._$AM = e, ot(this));
+}
+function ct(e, t = !1, n = 0) {
+	let r = this._$AH, i = this._$AN;
+	if (i !== void 0 && i.size !== 0) {
+		if (t) {
+			if (Array.isArray(r)) for (let e = n; e < r.length; e++) it(r[e], !1), at(r[e]);
+			else r != null && (it(r, !1), at(r));
+		} else it(this, e);
+	}
+}
+var lt = (e) => {
+	e.type == tt.CHILD && (e._$AP ??= ct, e._$AQ ??= st);
+}, ut = class extends rt {
+	constructor() {
+		super(...arguments), this._$AN = void 0;
+	}
+	_$AT(e, t, n) {
+		super._$AT(e, t, n), ot(this), this.isConnected = e._$AU;
+	}
+	_$AO(e, t = !0) {
+		e !== this.isConnected && (this.isConnected = e, e ? this.reconnected?.() : this.disconnected?.()), t && (it(this, e), at(this));
+	}
+	setValue(e) {
+		if (Je(this._$Ct)) this._$Ct._$AI(e, this);
+		else {
+			let t = [...this._$Ct._$AH];
+			t[this._$Ci] = e, this._$Ct._$AI(t, this, 0);
+		}
+	}
+	disconnected() {}
+	reconnected() {}
+}, A = () => new dt(), dt = class {}, ft = /* @__PURE__ */ new WeakMap(), j = nt(class extends ut {
+	render(e) {
+		return C;
+	}
+	update(e, [t]) {
+		let n = t !== this.G;
+		return n && this.rt(void 0), (n || this.lt !== this.ct) && (this.G = t, this.ht = e.options?.host, this.rt(this.ct = e.element)), C;
+	}
+	rt(e) {
+		if (this.G !== void 0) {
+			if (this.isConnected || (e = void 0), typeof this.G == "function") {
+				let t = this.ht ?? globalThis, n = ft.get(t);
+				n === void 0 && (n = /* @__PURE__ */ new WeakMap(), ft.set(t, n)), n.get(this.G) !== void 0 && this.G.call(this.ht, void 0), n.set(this.G, e), e !== void 0 && this.G.call(this.ht, e);
+			} else this.G.value = e;
+		}
+	}
+	get lt() {
+		return typeof this.G == "function" ? ft.get(this.ht ?? globalThis)?.get(this.G) : this.G?.value;
+	}
+	disconnected() {
+		this.lt === this.ct && this.rt(void 0);
+	}
+	reconnected() {
+		this.rt(this.ct);
+	}
+}), pt = ":host{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:var(--doclang-bg,#f4f4f5);--panel:var(--doclang-panel,#fff);--border:var(--doclang-border,#d4d4d8);--text:var(--doclang-text,#18181b);--muted:var(--doclang-muted,#71717a);--accent:var(--doclang-accent,#2563eb);--placeholder-bg:var(--doclang-placeholder-bg,#fafafa);--font-ui:var(--doclang-font-ui,system-ui, -apple-system, \"Segoe UI\", sans-serif);--font-mono:var(--doclang-font-mono,ui-monospace, \"Cascadia Code\", \"Source Code Pro\", monospace);--markup-bg:var(--doclang-markup-bg,#fff);--markup-fg:var(--doclang-markup-fg,#24292e);--markup-hover:var(--doclang-markup-hover,#2563eb14);--markup-selected:var(--doclang-markup-selected,#2563eb24);--kind-text:var(--doclang-kind-text,#2563eb);--kind-heading:var(--doclang-kind-heading,#7c3aed);--kind-list:var(--doclang-kind-list,#ea580c);--kind-ldiv:var(--doclang-kind-ldiv,#ea580c);--kind-table:var(--doclang-kind-table,#16a34a);--kind-index:var(--doclang-kind-index,#0d9488);--kind-formula:var(--doclang-kind-formula,#0891b2);--kind-code:var(--doclang-kind-code,#475569);--kind-picture:var(--doclang-kind-picture,#db2777);--kind-group:var(--doclang-kind-group,#4f46e5);--kind-footnote:var(--doclang-kind-footnote,#a16207);--kind-page_header:var(--doclang-kind-page_header,#71717a);--kind-page_footer:var(--doclang-kind-page_footer,#71717a);--kind-caption:var(--doclang-kind-caption,#71717a);--kind-field:var(--doclang-kind-field,#d97706);--kind-default:var(--doclang-kind-default,#dc2626)}@media (prefers-color-scheme:dark){:host{--lightningcss-light: ;--lightningcss-dark:initial;--bg:var(--doclang-bg,#09090b);--panel:var(--doclang-panel,#18181b);--border:var(--doclang-border,#3f3f46);--text:var(--doclang-text,#fafafa);--muted:var(--doclang-muted,#a1a1aa);--placeholder-bg:var(--doclang-placeholder-bg,#27272a);--markup-bg:var(--doclang-markup-bg,#1e1e1e);--markup-fg:var(--doclang-markup-fg,#d4d4d4);--markup-hover:var(--doclang-markup-hover,#60a5fa1a);--markup-selected:var(--doclang-markup-selected,#60a5fa2e);--kind-text:var(--doclang-kind-text,#60a5fa);--kind-heading:var(--doclang-kind-heading,#a78bfa);--kind-list:var(--doclang-kind-list,#fb923c);--kind-ldiv:var(--doclang-kind-ldiv,#fb923c);--kind-table:var(--doclang-kind-table,#4ade80);--kind-index:var(--doclang-kind-index,#2dd4bf);--kind-formula:var(--doclang-kind-formula,#22d3ee);--kind-code:var(--doclang-kind-code,#94a3b8);--kind-picture:var(--doclang-kind-picture,#f472b6);--kind-group:var(--doclang-kind-group,#818cf8);--kind-footnote:var(--doclang-kind-footnote,#facc15);--kind-page_header:var(--doclang-kind-page_header,#a1a1aa);--kind-page_footer:var(--doclang-kind-page_footer,#a1a1aa);--kind-caption:var(--doclang-kind-caption,#a1a1aa);--kind-field:var(--doclang-kind-field,#fbbf24);--kind-default:var(--doclang-kind-default,#f87171)}}:host{display:contents}nav{align-items:center;gap:.75rem;margin-left:.25rem;display:flex}nav:before{content:\"\";background:var(--border);flex-shrink:0;align-self:center;width:1px;height:1.125rem;margin-right:.75rem}nav[hidden]{display:none}.page-nav-btns{align-items:center;gap:.25rem;display:inline-flex}.page-nav-btn{appearance:none;border:1px solid var(--border);background:var(--panel);width:1.875rem;height:1.875rem;color:var(--text);font:inherit;cursor:pointer;border-radius:.375rem;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:.875rem;display:inline-flex}.page-nav-btn:hover{border-color:var(--accent)}.page-nav-btn:disabled{opacity:.45;cursor:not-allowed}.page-nav-chevron{width:.875rem;height:.875rem;display:block}.page-indicator{color:var(--muted);font-variant-numeric:tabular-nums;align-items:center;font-size:.875rem;display:inline-flex}.page-number-input{appearance:none;border:1px solid var(--border);background:var(--panel);color:var(--text);font:inherit;font-variant-numeric:tabular-nums;text-align:center;box-sizing:border-box;height:1.875rem;width:calc(var(--doclang-page-num-digits,1) * 1ch + .75rem);cursor:text;border-radius:.375rem;margin:0;padding:0 .35rem;font-size:.875rem;line-height:1}.page-number-input:hover:not(:disabled){border-color:var(--accent)}.page-number-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);outline:none}.page-number-input:disabled{opacity:.55;cursor:not-allowed}", M = /* @__PURE__ */ new Set([
+	"label",
+	"thread",
+	"xref",
+	"href",
+	"layer",
+	"location",
+	"caption",
+	"description",
+	"summary",
+	"custom"
+]), mt = /* @__PURE__ */ new Set([
+	"text",
+	"heading",
+	"footnote",
+	"page_header",
+	"page_footer",
+	"field_region",
+	"list",
+	"table",
+	"index",
+	"formula",
+	"code",
+	"picture",
+	"marker",
+	"group",
+	"field_heading",
+	"field_item",
+	"key",
+	"value",
+	"hint",
+	"caption",
+	"page_break"
+]), ht = /* @__PURE__ */ new Set([
+	"fcel",
+	"ecel",
+	"ched",
+	"rhed",
+	"corn",
+	"srow",
+	"lcel",
+	"ucel",
+	"xcel",
+	"nl"
+]), gt = /* @__PURE__ */ new Set([
+	"fcel",
+	"ecel",
+	"ched",
+	"rhed",
+	"corn",
+	"srow"
+]), _t = /* @__PURE__ */ new Set([
+	"lcel",
+	"ucel",
+	"xcel"
+]), N = /* @__PURE__ */ new Set([
+	"table",
+	"index",
+	"tabular"
 ]);
-const CELL_TOKENS = new Set(["fcel", "ecel", "ched", "rhed", "corn", "srow", "lcel", "ucel", "xcel", "nl"]);
-const CELL_CONTENT_TAGS = new Set(["fcel", "ecel", "ched", "rhed", "corn", "srow"]);
-const CELL_SPAN_TAGS = new Set(["lcel", "ucel", "xcel"]);
-const OTSL_CONTAINER_TAGS = new Set(["table", "index", "tabular"]);
-const RENDER_BLOCK_TAGS = new Set([
-  "text", "heading", "field_heading", "footnote", "page_header", "page_footer", "list", "code", "formula", "picture", "group",
-  "field_region", "field_item",
-  "table", "index", "tabular",
+function P(e) {
+	return e.nodeType === Node.TEXT_NODE || e.nodeType === Node.CDATA_SECTION_NODE;
+}
+function F(e) {
+	return P(e) && !e.textContent?.trim();
+}
+function vt(e) {
+	return [...e.attributes].filter((e) => e.name !== "xmlns" || e.value !== "https://www.doclang.ai/ns/v0").map((e) => ({
+		name: e.name,
+		value: e.value
+	}));
+}
+function I(e) {
+	return [...e.children];
+}
+function L(e) {
+	return e.localName || e.tagName.replace(/^.*:/, "");
+}
+function yt(e) {
+	return R([...e.childNodes], 0)?.locs ?? [];
+}
+function R(e, t) {
+	let n = [], r = t;
+	for (; r < e.length;) {
+		let t = e[r];
+		if (!t) {
+			r += 1;
+			continue;
+		}
+		if (t.nodeType !== Node.ELEMENT_NODE) {
+			r += 1;
+			continue;
+		}
+		let i = L(t);
+		if (i === "location") {
+			if (n.push(t), r += 1, n.length === 4) return {
+				locs: n,
+				nextIndex: r
+			};
+			continue;
+		}
+		if (n.length) break;
+		if (M.has(i)) {
+			r += 1;
+			continue;
+		}
+		break;
+	}
+	return n.length === 4 ? {
+		locs: n,
+		nextIndex: r
+	} : null;
+}
+function z(e, t) {
+	for (let n = 0; n < e.length; n += 1) {
+		let r = e[n];
+		!r || r.nodeType !== Node.ELEMENT_NODE || (t(r), z(I(r), t));
+	}
+}
+function B(e) {
+	return ht.has(e);
+}
+function bt(e) {
+	let t = L(e);
+	return t === "list" || N.has(t);
+}
+function xt(e, t) {
+	let n = t;
+	for (; n < e.length;) {
+		let t = e[n];
+		if (!t) {
+			n += 1;
+			continue;
+		}
+		if (t.nodeType !== Node.ELEMENT_NODE) {
+			n += 1;
+			continue;
+		}
+		let r = L(t);
+		if (r === "ldiv" || B(r)) break;
+		if (M.has(r) || r === "location") {
+			n += 1;
+			continue;
+		}
+		break;
+	}
+	return n;
+}
+function St(e, t) {
+	let n = t;
+	for (; n < e.length;) {
+		let t = e[n];
+		if (t && t.nodeType === Node.ELEMENT_NODE && L(t) === "ldiv") break;
+		n += 1;
+	}
+	return n;
+}
+function Ct(e, t) {
+	let n = t;
+	for (; n < e.length;) {
+		let t = e[n];
+		if (t && t.nodeType === Node.ELEMENT_NODE && B(L(t))) break;
+		n += 1;
+	}
+	return n;
+}
+function wt(e, t) {
+	let n = parseInt(e.getAttribute("resolution") ?? String(t), 10);
+	return Number.isFinite(n) && n > 0 ? n : t;
+}
+function Tt(e) {
+	return Math.min(Math.max(parseInt(e.getAttribute("level") ?? "1", 10) || 1, 1), 6);
+}
+function V(e, t) {
+	return I(e).find((e) => L(e) === t) ?? null;
+}
+function Et(e, t) {
+	let n = e;
+	for (; n;) {
+		if (n === t) return !0;
+		n = n.parentNode;
+	}
+	return !1;
+}
+function Dt(e) {
+	return e.nodeType === Node.CDATA_SECTION_NODE ? `<![CDATA[${e.textContent ?? ""}]]>` : e.textContent?.trim() ?? "";
+}
+function Ot(e) {
+	return Array.from(e).filter((e) => P(e) && !F(e)).map(Dt).join("");
+}
+function kt(e) {
+	return String(e).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function At(e) {
+	return e.replace(/\\/g, "/").replace(/^\.\//, "");
+}
+function jt(e) {
+	let t = At(e), n = t.indexOf("assets/");
+	return n === -1 ? null : t.slice(n);
+}
+function Mt(e) {
+	switch (e.split(".").pop()?.toLowerCase() ?? "") {
+		case "png": return "image/png";
+		case "jpg":
+		case "jpeg": return "image/jpeg";
+		case "webp": return "image/webp";
+		case "gif": return "image/gif";
+		case "svg": return "image/svg+xml";
+		default: return "application/octet-stream";
+	}
+}
+function Nt(e, t) {
+	let n = t;
+	for (; n < e.length;) {
+		let t = e[n];
+		if (!t) {
+			n += 1;
+			continue;
+		}
+		if (t.nodeType !== Node.ELEMENT_NODE) {
+			n += 1;
+			continue;
+		}
+		let r = L(t);
+		if (B(r)) break;
+		if (M.has(r) || r === "h_thread" || r === "location") {
+			n += 1;
+			continue;
+		}
+		break;
+	}
+	return n;
+}
+function Pt(e, t) {
+	let n = t;
+	for (; n < e.length && F(e[n]);) n += 1;
+	for (; n < e.length;) {
+		let t = e[n];
+		if (t && t.nodeType === Node.ELEMENT_NODE && M.has(L(t))) {
+			for (n += 1; n < e.length && F(e[n]);) n += 1;
+			continue;
+		}
+		break;
+	}
+	return n;
+}
+function Ft(e) {
+	return mt.has(L(e));
+}
+function It(e) {
+	let t = L(e);
+	return t === "ldiv" || gt.has(t);
+}
+function Lt(e) {
+	return V(e, "thread")?.getAttribute("thread_id") ?? null;
+}
+function Rt(e) {
+	let t = V(e, "layer");
+	if (t) {
+		let e = t.getAttribute("value") ?? "body";
+		return zt.has(e) ? e : "body";
+	}
+	if (yt(e).length === 4) return "body";
+	let n = e.parentElement;
+	if (!n) return "body";
+	let r = [...n.childNodes], i = r.indexOf(e);
+	return i < 0 ? "body" : Bt(r, i + 1);
+}
+var zt = /* @__PURE__ */ new Set([
+	"body",
+	"background",
+	"furniture"
 ]);
-const RENDER_FORMAT_TAGS = new Set([
-  "bold", "italic", "underline", "strikethrough", "superscript", "subscript", "handwriting", "rtl", "content",
+function Bt(e, t) {
+	let n = t;
+	for (; n < e.length;) {
+		let t = e[n];
+		if (!t) {
+			n += 1;
+			continue;
+		}
+		if (t.nodeType !== Node.ELEMENT_NODE) {
+			n += 1;
+			continue;
+		}
+		let r = L(t);
+		if (r === "layer") {
+			let e = t.getAttribute("value") ?? "body";
+			return zt.has(e) ? e : "body";
+		}
+		if (r === "location") break;
+		if (M.has(r)) {
+			n += 1;
+			continue;
+		}
+		break;
+	}
+	return "body";
+}
+function Vt(e) {
+	return e === "furniture" ? "layer-furniture" : e === "background" ? "layer-background" : "";
+}
+function Ht(e) {
+	if (Ut(e)) return "text";
+	let t = L(e);
+	if (t === "heading" || t === "field_heading") return `${t}[${Tt(e)}]`;
+	let n = e.getAttribute("level");
+	if (n) return `${t}[${n}]`;
+	let r = e.getAttribute("class");
+	return r ? `${t}.${r}` : t;
+}
+function Ut(e) {
+	if (yt(e).length === 4 || !Wt(e)) return !1;
+	let t = L(e);
+	return t === "ldiv" && e.parentElement && L(e.parentElement) === "list" ? !0 : B(t) && t !== "nl" && !_t.has(t) && e.parentElement ? N.has(L(e.parentElement)) : !1;
+}
+function Wt(e) {
+	let t = e.parentElement;
+	if (!t) return !1;
+	let n = [...t.childNodes], r = n.indexOf(e);
+	return r < 0 ? !1 : R(n, r + 1) !== null;
+}
+function Gt(e) {
+	let t = e.parentElement;
+	if (!t) return [];
+	let n = [...t.childNodes], r = n.indexOf(e);
+	return r < 0 ? [] : R(n, r + 1)?.locs ?? [];
+}
+function Kt(e) {
+	let t = yt(e);
+	return t.length === 4 ? t : Gt(e);
+}
+function qt(e) {
+	if (!e) return !1;
+	let t = L(e);
+	if (t === "picture" || t === "caption") return !1;
+	let n = e.parentElement;
+	for (; n;) {
+		if (L(n) === "picture") return !0;
+		n = n.parentElement;
+	}
+	return !1;
+}
+function Jt(e) {
+	if (!e) return !1;
+	let t = L(e);
+	if (N.has(t) || t === "caption") return !1;
+	let n = e.parentElement;
+	for (; n;) {
+		if (N.has(L(n))) return !0;
+		n = n.parentElement;
+	}
+	return !1;
+}
+//#endregion
+//#region src/doclang/zip.ts
+var Yt = 5e3, Xt = 134217728, Zt = 134217728, Qt = 536870912, $t = 100, en = new TextDecoder();
+async function tn(e, { shouldExtract: t } = {}) {
+	if (typeof DecompressionStream > "u") throw Error("ZIP decompression requires a browser with DecompressionStream support");
+	let n = new Uint8Array(e), r = new DataView(e), i = nn(n), a = r.getUint16(i + 10, !0), o = r.getUint32(i + 16, !0);
+	if (a > Yt) throw Error("ZIP archive has too many entries");
+	if (o >= n.length) throw Error("Invalid ZIP central directory offset");
+	let s = [], c = o, l = 0;
+	for (let e = 0; e < a; e += 1) {
+		if (c + 46 > n.length || r.getUint32(c, !0) !== 33639248) throw Error("Invalid ZIP central directory");
+		let e = r.getUint16(c + 10, !0), i = r.getUint32(c + 20, !0), a = r.getUint32(c + 24, !0), o = r.getUint16(c + 28, !0), u = r.getUint16(c + 30, !0), d = r.getUint16(c + 32, !0), f = r.getUint32(c + 42, !0), p = c + 46 + o;
+		if (p > n.length) throw Error("Invalid ZIP entry name");
+		let m = on(en.decode(n.subarray(c + 46, p)));
+		if (c = p + u + d, c > n.length) throw Error("Invalid ZIP central directory");
+		if (!m || m.endsWith("/") || cn(m) || t && !t(m)) continue;
+		if (i > Xt || a > Zt) throw Error(`ZIP entry exceeds size limit: ${m}`);
+		if (i > 0 && a > 0 && a / i > $t) throw Error(`ZIP entry compression ratio exceeds limit: ${m}`);
+		if (l + a > Qt) throw Error("ZIP archive exceeds total uncompressed size limit");
+		if (f + 30 > n.length || r.getUint32(f, !0) !== 67324752) throw Error(`Invalid ZIP local header: ${m}`);
+		let ee = r.getUint16(f + 26, !0), h = r.getUint16(f + 28, !0), g = f + 30 + ee + h;
+		if (g + i > n.length) throw Error(`ZIP entry data out of bounds: ${m}`);
+		let te = await an(n.subarray(g, g + i), e, a);
+		if (l += te.length, l > Qt) throw Error("ZIP archive exceeds total uncompressed size limit");
+		s.push({
+			name: m,
+			data: te
+		});
+	}
+	return s;
+}
+function nn(e) {
+	for (let t = e.length - 22; t >= 0; --t) if (e[t] === 80 && e[t + 1] === 75 && e[t + 2] === 5 && e[t + 3] === 6) return t;
+	throw Error("Invalid ZIP archive");
+}
+function rn(e, t) {
+	let n = new Uint8Array(t), r = 0;
+	for (let t of e) n.set(t, r), r += t.byteLength;
+	return n;
+}
+async function an(e, t, n) {
+	if (t === 0) {
+		if (e.length > Zt) throw Error("ZIP entry exceeds size limit");
+		return e;
+	}
+	if (t === 8) {
+		let t = new Blob([e]).stream().pipeThrough(new DecompressionStream("deflate-raw")).getReader(), r = [], i = 0;
+		try {
+			for (;;) {
+				let { done: n, value: a } = await t.read();
+				if (n) break;
+				if (i += a.byteLength, i > Zt) throw Error("ZIP entry exceeds size limit");
+				if (e.length > 0 && i / e.length > $t) throw Error("ZIP entry compression ratio exceeds limit");
+				r.push(a);
+			}
+		} catch (e) {
+			try {
+				await t.cancel();
+			} catch {}
+			throw e;
+		}
+		let a = rn(r, i);
+		return n && a.length !== n ? a.slice(0, Math.min(a.length, n)) : a;
+	}
+	throw Error(`Unsupported ZIP compression method ${t}`);
+}
+function on(e) {
+	return e.replace(/\\/g, "/").replace(/^\.\//, "");
+}
+function sn(e, t) {
+	return e.find((e) => e.name === t);
+}
+function cn(e) {
+	return e === ".DS_Store" || e.endsWith("/.DS_Store") ? !0 : e.split("/").some((e) => e.startsWith("._") || e === "__MACOSX");
+}
+async function ln(e) {
+	let t = await tn(e), n = sn(t, "document.xml");
+	if (!n) throw Error("Archive must contain document.xml");
+	let r = new TextDecoder().decode(n.data), i = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map();
+	for (let e of t) {
+		let t = e.name.match(/^pages\/(\d+)\.(png|jpe?g|webp)$/i);
+		if (t) {
+			i.set(Number(t[1]), URL.createObjectURL(new Blob([e.data], { type: Mt(e.name) })));
+			continue;
+		}
+		e.name.startsWith("assets/") && !e.name.endsWith("/") && a.set(e.name, URL.createObjectURL(new Blob([e.data], { type: Mt(e.name) })));
+	}
+	return {
+		markupXml: r,
+		pageImages: i,
+		assetUrls: a
+	};
+}
+//#endregion
+//#region src/doclang/document.ts
+var un = /* @__PURE__ */ t({
+	NO_MARKUP: () => fn,
+	PAGE_IMAGE_RE: () => dn,
+	assignElementIds: () => _n,
+	buildDocumentState: () => Ln,
+	buildElementPageMap: () => bn,
+	buildThreadNavByElement: () => Sn,
+	buildThreadPagesById: () => xn,
+	collectBoundingBoxes: () => An,
+	collectCaptionLinks: () => jn,
+	collectFragmentLinks: () => Pn,
+	collectFragmentNavItems: () => Fn,
+	collectReadingOrderSteps: () => In,
+	collectXrefLinks: () => Mn,
+	computeReadingOrder: () => wn,
+	computeReadingOrderDisplayNumbers: () => En,
+	extractArchiveFromFiles: () => Rn,
+	extractArchiveFromZipBuffer: () => ln,
+	invertElementIds: () => vn,
+	readDefaultResolution: () => gn,
+	revokeDocumentState: () => zn,
+	segmentHasMarkup: () => hn,
+	splitIntoSegments: () => mn
+}), dn = /^(\d+)\.(png|jpe?g|webp)$/i, fn = "(No markup to be shown.)", pn = /* @__PURE__ */ new Set([
+	"bold",
+	"italic",
+	"underline",
+	"strikethrough",
+	"superscript",
+	"subscript",
+	"handwriting",
+	"rtl",
+	"content"
 ]);
-const FORMAT_HTML_TAG = {
-  bold: "strong",
-  italic: "em",
-  underline: "u",
-  strikethrough: "s",
-  superscript: "sup",
-  subscript: "sub",
+function mn(e) {
+	let t = I(e).filter((e) => L(e) !== "head"), n = [[]];
+	for (let e of t) L(e) === "page_break" ? n.push([]) : n[n.length - 1].push(e);
+	return n.length ? n : [[]];
+}
+function hn(e) {
+	return e.some((e) => e.nodeType === Node.ELEMENT_NODE);
+}
+function gn(e) {
+	let t = {
+		width: 512,
+		height: 512
+	};
+	if (!e) return t;
+	let n = I(e).find((e) => L(e) === "default_resolution");
+	if (!n) return t;
+	let r = parseInt(n.getAttribute("width") ?? "512", 10), i = parseInt(n.getAttribute("height") ?? "512", 10);
+	return {
+		width: Number.isFinite(r) && r > 0 ? r : 512,
+		height: Number.isFinite(i) && i > 0 ? i : 512
+	};
+}
+function _n(e) {
+	let t = /* @__PURE__ */ new Map(), n = 0;
+	return z(e, (e) => {
+		t.set(e, `el-${n++}`);
+	}), t;
+}
+function vn(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let [n, r] of e) t.set(r, n);
+	return t;
+}
+function yn(e) {
+	let t = /* @__PURE__ */ new Map();
+	return z(I(e).filter((e) => L(e) !== "head"), (e) => {
+		for (let n of I(e)) {
+			if (L(n) !== "thread") continue;
+			let r = n.getAttribute("thread_id");
+			r && (t.has(r) || t.set(r, []), t.get(r).push(e));
+		}
+	}), t;
+}
+function bn(e) {
+	let t = /* @__PURE__ */ new Map();
+	return e.forEach((e, n) => {
+		let r = n + 1;
+		z(e, (e) => t.set(e, r));
+	}), t;
+}
+function xn(e, t) {
+	let n = /* @__PURE__ */ new Map();
+	for (let [r, i] of yn(e)) {
+		let e = /* @__PURE__ */ new Set();
+		for (let n of i) {
+			let r = t.get(n);
+			r && e.add(r);
+		}
+		e.size && n.set(r, e);
+	}
+	return n;
+}
+function Sn(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let [, n] of yn(e)) for (let e = 0; e < n.length; e += 1) t.set(n[e], {
+		prev: e > 0 ? n[e - 1] : null,
+		next: e < n.length - 1 ? n[e + 1] : null
+	});
+	return t;
+}
+function Cn(e) {
+	let t = L(e);
+	return t === "caption" || !(M.has(t) || t === "location" || t === "h_thread" || t === "page_break" || t === "nl" || _t.has(t) || pn.has(t) || t === "src" || t === "checkbox");
+}
+function wn(e) {
+	let t = I(e).filter((e) => L(e) !== "head"), n = yn(e), r = /* @__PURE__ */ new Set(), i = [];
+	function a(e) {
+		Cn(e) && i.push(e);
+	}
+	function o(e) {
+		for (let t of n.get(e) ?? []) r.has(t) || (r.add(t), c(t));
+	}
+	function s(e) {
+		for (let t of e.childNodes) {
+			if (t.nodeType !== Node.ELEMENT_NODE) continue;
+			let e = t, n = L(e);
+			if (n === "xref") {
+				let t = e.getAttribute("thread_id");
+				t && o(t);
+				continue;
+			}
+			n !== "page_break" && c(e);
+		}
+	}
+	function c(e) {
+		a(e), s(e);
+	}
+	for (let e of t) L(e) !== "page_break" && (r.has(e) || c(e));
+	return i;
+}
+function Tn(e) {
+	return !Cn(e) || qt(e) || Jt(e) ? !1 : yt(e).length === 4 || Ut(e);
+}
+function En(e) {
+	let t = /* @__PURE__ */ new Map(), n = 0;
+	for (let r of e) Tn(r) && (n += 1, t.set(r, n));
+	return t;
+}
+function Dn(e, t, n, r, i, a, o = "body") {
+	let [s, c, l, u] = t, d = wt(s, n.width), f = wt(c, n.height);
+	e.push({
+		kind: r,
+		tag: i,
+		elementId: a,
+		layer: o,
+		x0: parseInt(s.getAttribute("value") ?? "0", 10),
+		y0: parseInt(c.getAttribute("value") ?? "0", 10),
+		x1: parseInt(l.getAttribute("value") ?? "0", 10),
+		y1: parseInt(u.getAttribute("value") ?? "0", 10),
+		resW: d,
+		resH: f
+	});
+}
+function On(e, t, n, r) {
+	let i = [...e.childNodes], a = xt(i, 0);
+	for (; a < i.length;) {
+		let e = i[a];
+		if (e.nodeType !== Node.ELEMENT_NODE || L(e) !== "ldiv") {
+			a += 1;
+			continue;
+		}
+		a += 1;
+		let o = R(i, a);
+		if (o) {
+			let i = r.get(e);
+			i && Dn(n, o.locs, t, "text", "text", i, Rt(e)), a = o.nextIndex;
+		}
+		a = St(i, a);
+	}
+}
+function kn(e, t, n, r) {
+	let i = [...e.childNodes], a = xt(i, 0);
+	for (; a < i.length;) {
+		let e = i[a];
+		if (e.nodeType !== Node.ELEMENT_NODE) {
+			a += 1;
+			continue;
+		}
+		let o = L(e);
+		if (!B(o)) {
+			a += 1;
+			continue;
+		}
+		if (o === "nl") {
+			a += 1;
+			continue;
+		}
+		a += 1;
+		let s = R(i, a);
+		if (s) {
+			let i = r.get(e);
+			i && Dn(n, s.locs, t, "text", "text", i, Rt(e)), a = s.nextIndex;
+		}
+		a = Ct(i, a);
+	}
+}
+function An(e, t, n) {
+	let r = [];
+	return z(e, (e) => {
+		let i = yt(e);
+		if (i.length !== 4) return;
+		let a = n.get(e);
+		a && Dn(r, i, t, L(e), Ht(e), a, Rt(e));
+	}), z(e, (e) => {
+		let i = L(e);
+		i === "list" ? On(e, t, r, n) : N.has(i) && kn(e, t, r, n);
+	}), r;
+}
+function jn(e, t, n) {
+	let r = new Map(n.map((e) => [e.elementId, e])), i = [];
+	return z(e, (e) => {
+		if (L(e) !== "caption") return;
+		let n = t.get(e), a = n ? r.get(n) : null;
+		if (!a) return;
+		let o = e.parentElement;
+		if (!o || yt(o).length !== 4) return;
+		let s = t.get(o), c = s ? r.get(s) : null;
+		c && i.push({
+			captionBox: a,
+			hostBox: c,
+			captionElementId: n,
+			hostElementId: s
+		});
+	}), i;
+}
+function Mn(e, t, n) {
+	let r = new Map(n.map((e) => [e.elementId, e])), i = /* @__PURE__ */ new Map();
+	z(e, (e) => {
+		let n = t.get(e), a = n ? r.get(n) : null;
+		if (a) for (let t of I(e)) {
+			if (L(t) !== "thread") continue;
+			let e = t.getAttribute("thread_id");
+			e && (i.has(e) || i.set(e, []), i.get(e).push({
+				elementId: n,
+				box: a
+			}));
+		}
+	});
+	let a = [];
+	return z(e, (e) => {
+		let n = I(e).filter((e) => L(e) === "xref");
+		if (!n.length) return;
+		let o = Nn(e, t, r);
+		if (o) for (let e of n) {
+			let t = e.getAttribute("thread_id");
+			if (t) for (let { elementId: e, box: n } of i.get(t) ?? []) e !== o.elementId && a.push({
+				fromBox: o.box,
+				toBox: n,
+				fromElementId: o.elementId,
+				toElementId: e
+			});
+		}
+	}), a;
+}
+function Nn(e, t, n) {
+	let r = e;
+	for (; r;) {
+		let e = t.get(r), i = e ? n.get(e) : null;
+		if (i) return {
+			elementId: e,
+			box: i
+		};
+		if (L(r) === "doclang") break;
+		r = r.parentElement;
+	}
+	return null;
+}
+function Pn(e, t, n, r, i) {
+	let a = new Map(n.map((e) => [e.elementId, e])), o = /* @__PURE__ */ new Map();
+	z(e, (e) => {
+		let n = V(e, "thread")?.getAttribute("thread_id");
+		if (!n) return;
+		let r = t.get(e), i = r ? a.get(r) : null;
+		i && (o.has(n) || o.set(n, []), o.get(n).push({
+			elementId: r,
+			box: i
+		}));
+	});
+	let s = [];
+	for (let [e, t] of o) {
+		if (t.length >= 2) {
+			for (let n = 0; n < t.length - 1; n += 1) s.push({
+				fromBox: t[n].box,
+				toBox: t[n + 1].box,
+				fromElementId: t[n].elementId,
+				toElementId: t[n + 1].elementId,
+				threadId: e
+			});
+			continue;
+		}
+		if (t.length !== 1) continue;
+		let n = i.get(e);
+		if (!n) continue;
+		let a = [...n].some((e) => e < r), o = [...n].some((e) => e > r);
+		if (!a && !o) continue;
+		let c = {
+			fromBox: t[0].box,
+			toBox: null,
+			fromElementId: t[0].elementId,
+			toElementId: null,
+			threadId: e
+		};
+		a && s.push({
+			...c,
+			targetCorner: "tl"
+		}), o && s.push({
+			...c,
+			targetCorner: "br"
+		});
+	}
+	return s;
+}
+function Fn(e, t, n, r) {
+	let i = new Map(n.map((e) => [e.elementId, e])), a = [];
+	return z(e, (e) => {
+		let n = r.get(e);
+		if (!n || !n.prev && !n.next) return;
+		let o = t.get(e), s = o ? i.get(o) : null;
+		s && a.push({
+			elementId: o,
+			box: s,
+			hasPrev: n.prev !== null,
+			hasNext: n.next !== null
+		});
+	}), a;
+}
+function In(e, t, n, r, i = !0, a = null) {
+	let o = new Map(n.map((e) => [e.elementId, e])), s = [], c = 0;
+	return r.forEach((e) => {
+		if (qt(e) || Jt(e)) return;
+		let n = t.get(e);
+		if (!n) return;
+		let r = o.get(n);
+		r && (c += 1, s.push({
+			order: i ? a?.get(e) ?? c : c,
+			box: r,
+			elementId: n
+		}));
+	}), s;
+}
+function Ln(e, t, n, r, { markupOnly: i }) {
+	let a = new DOMParser().parseFromString(e, "application/xml");
+	if (a.querySelector("parsererror")) return alert(`Invalid XML in ${n}`), null;
+	let o = a.documentElement;
+	if (L(o) !== "doclang") return alert(`${n}: root element must be <doclang>`), null;
+	let s = gn(I(o).find((e) => L(e) === "head") ?? null), c = i ? [I(o).filter((e) => L(e) !== "head")] : mn(o), l = !i && t.size > 0, u = l ? Math.max(...t.keys()) : 0, d = i ? 1 : Math.max(c.length, u, 1), f = wn(o), p = bn(c);
+	return {
+		pageImages: t,
+		assetUrls: r,
+		pageCount: d,
+		segments: c,
+		defaultResolution: s,
+		elementIds: /* @__PURE__ */ new Map(),
+		idToElement: /* @__PURE__ */ new Map(),
+		hasPageView: l,
+		markupOnly: i,
+		docRoot: o,
+		threadPagesById: xn(o, p),
+		elementPageByEl: p,
+		threadNavByElement: Sn(o),
+		pendingSelectElement: null,
+		readingOrder: f,
+		readingOrderDisplayNumbers: En(f)
+	};
+}
+async function Rn(e) {
+	let t = e.find((e) => e.name === "document.xml");
+	if (!t) throw Error("Archive must contain document.xml at its root.");
+	let n = await t.text(), r = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map();
+	for (let t of e) {
+		let e = t.webkitRelativePath || t.name, n = e.split("/");
+		if (n.length >= 2 && n[n.length - 2] === "pages") {
+			let e = dn.exec(t.name);
+			e && r.set(Number(e[1]), URL.createObjectURL(t));
+		}
+		let a = jt(e);
+		a && i.set(a, URL.createObjectURL(t));
+	}
+	return {
+		markupXml: n,
+		pageImages: r,
+		assetUrls: i
+	};
+}
+function zn(e) {
+	if (e) {
+		for (let t of e.pageImages.values()) t.startsWith("blob:") && URL.revokeObjectURL(t);
+		for (let t of e.assetUrls.values()) t.startsWith("blob:") && URL.revokeObjectURL(t);
+	}
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.144.0/helpers/esm/decorate.js
+function H(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}
+//#endregion
+//#region src/components/base/page-element.ts
+var U = class extends T {
+	constructor(...e) {
+		super(...e), this._docState = null, this._peerIds = /* @__PURE__ */ new Set();
+	}
+	get document() {
+		return this._docState;
+	}
+	set document(e) {
+		let t = this._docState;
+		this._docState = e, this.requestUpdate("_docState", t), e || (this.page = 1, this._clearDocument());
+	}
+	connectedCallback() {
+		if (super.connectedCallback(), !this._docState && !this.getAttribute("src")) {
+			let e = this.querySelector("script[type=\"application/doclang+xml\"]");
+			e?.textContent?.trim() && this._loadXmlString(e.textContent.trim(), this.getAttribute("label") ?? "");
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+	}
+	attributeChangedCallback(e, t, n) {
+		super.attributeChangedCallback(e, t, n), e === "src" && n && this._loadFromUrl(n);
+	}
+	updated(e) {
+		if (super.updated(e), (e.has("page") || e.has("_docState")) && this._docState) {
+			let e = Math.min(Math.max(1, this.page), this._docState.pageCount);
+			if (e !== this.page) {
+				this.page = e;
+				return;
+			}
+			this._renderDocument();
+		}
+		e.has("selected") && (this._peerIds = this.selected ? this._computePeerIds(this.selected) : /* @__PURE__ */ new Set(), this._applySelection());
+	}
+	_applySelection() {}
+	_clearDocument() {}
+	_computePeerIds(e) {
+		let t = /* @__PURE__ */ new Set();
+		if (!this._docState?.elementIds || !this._docState.idToElement) return t;
+		let n = this._docState.idToElement.get(e), r = n ? Lt(n) : null;
+		if (!r) return t;
+		for (let [e, n] of this._docState.elementIds) Lt(e) === r && t.add(n);
+		return t;
+	}
+	_loadXmlString(e, t) {
+		let n = Ln(e, /* @__PURE__ */ new Map(), t, /* @__PURE__ */ new Map(), { markupOnly: !0 });
+		n && (this.document = n);
+	}
+	async _loadFromUrl(e) {
+		try {
+			let t = await fetch(e);
+			if (!t.ok) throw Error(`HTTP ${t.status}`);
+			if (e.includes(".dclx") || e.includes(".zip") || t.headers.get("content-type")?.includes("zip")) {
+				let { extractArchiveFromZipBuffer: n } = await Promise.resolve().then(() => un), { markupXml: r, pageImages: i, assetUrls: a } = await n(await t.arrayBuffer()), o = Ln(r, i, e.split("/").pop() ?? "", a, { markupOnly: !1 });
+				o && (this.document = o);
+			} else {
+				let n = await t.text(), r = e.split("/").pop() ?? "";
+				this._loadXmlString(n, r);
+			}
+		} catch (e) {
+			this.dispatchEvent(new CustomEvent("doclang-load-error", {
+				bubbles: !0,
+				composed: !0,
+				detail: { error: e }
+			}));
+		}
+	}
 };
-
-function isTextLikeNode(node) {
-  return node.nodeType === Node.TEXT_NODE || node.nodeType === Node.CDATA_SECTION_NODE;
-}
-
-function isWhitespaceOnlyText(node) {
-  return isTextLikeNode(node) && !node.textContent.trim();
-}
-
-function markupAttributes(el) {
-  return [...el.attributes]
-    .filter((a) => a.name !== "xmlns" || a.value !== DOCLANG_NS)
-    .map((a) => ({ name: a.name, value: a.value }));
-}
-
-function xmlSpan(className, text, { ghost = false } = {}) {
-  const span = document.createElement("span");
-  span.className = ghost ? `${className} markup-ghost-tag-part` : className;
-  span.textContent = text;
-  return span;
-}
-
-function createMarkupLineRow(depth, { foldToggle = false } = {}) {
-  const line = createMarkupLine();
-  line.style.setProperty("--markup-depth", String(depth));
-
-  const row = document.createElement("span");
-  row.className = "markup-line-content";
-
-  const gutter = document.createElement("span");
-  gutter.className = "markup-gutter";
-  gutter.setAttribute("aria-hidden", "true");
-  if (foldToggle) gutter.appendChild(createMarkupFoldToggle());
-  row.appendChild(gutter);
-
-  const body = document.createElement("span");
-  body.className = "markup-line-body";
-  row.appendChild(body);
-
-  line.appendChild(row);
-  return { line, content: body };
-}
-
-function isTruncatableEmbeddedImageUri(value) {
-  if (!value || value.length <= LONG_EMBEDDED_URI_PREVIEW_LENGTH) return false;
-  return /^(data:image\/|blob:)/i.test(value);
-}
-
-function formatCompactByteSize(bytes) {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) {
-    const kb = bytes / 1024;
-    return kb < 10 ? `${kb.toFixed(1)} KB` : `${Math.round(kb)} KB`;
-  }
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-function formatEmbeddedUriSizeLabel(value) {
-  if (/^blob:/i.test(value)) {
-    return value.length >= 1024 ? `${Math.round(value.length / 1024)} KB URL` : `${value.length} char URL`;
-  }
-  const comma = value.indexOf(",");
-  if (comma === -1) return "embedded data";
-  const header = value.slice(0, comma);
-  const payload = value.slice(comma + 1).replace(/\s/g, "");
-  const mime = /^data:([^;,]+)/i.exec(header)?.[1] ?? "";
-  const shortMime = mime.startsWith("image/") ? mime.slice(6) : (mime || "data");
-  const bytes = Math.floor(payload.replace(/=+$/, "").length * 3 / 4);
-  return `${shortMime} · ${formatCompactByteSize(bytes)}`;
-}
-
-function createEmbeddedUriContinuationPanel(value, depth) {
-  const { line, content } = createMarkupLineRow(depth);
-  line.className = "markup-line markup-embedded-uri-panel";
-  const body = document.createElement("div");
-  body.className = "markup-embedded-uri-panel-body";
-  body.textContent = value;
-  body.addEventListener("click", (e) => e.stopPropagation());
-  content.appendChild(body);
-  return line;
-}
-
-function createTruncatableMarkupAttrValue(value) {
-  const wrapper = document.createElement("span");
-  wrapper.className = "xml-attr-value xml-attr-value-truncatable";
-  wrapper.dataset.fullValue = value;
-
-  const text = document.createElement("span");
-  text.className = "xml-attr-value-text";
-  text.textContent = value.slice(0, LONG_EMBEDDED_URI_PREVIEW_LENGTH);
-
-  const toggle = document.createElement("button");
-  toggle.type = "button";
-  toggle.className = "xml-attr-value-chip";
-  const sizeLabel = formatEmbeddedUriSizeLabel(value);
-  toggle.dataset.collapsedLabel = sizeLabel;
-  toggle.setAttribute("aria-expanded", "false");
-  toggle.setAttribute("aria-label", `Show full value (${sizeLabel})`);
-
-  const label = document.createElement("span");
-  label.className = "xml-attr-value-chip-label";
-  label.textContent = sizeLabel;
-  toggle.appendChild(label);
-
-  wrapper.append(text, toggle);
-  return wrapper;
-}
-
-function appendMarkupAttrValue(line, value) {
-  if (isTruncatableEmbeddedImageUri(value)) {
-    line.appendChild(createTruncatableMarkupAttrValue(value));
-  } else {
-    line.appendChild(xmlSpan("xml-attr-value", value));
-  }
-}
-
-function toggleTruncatableMarkupAttrValue(toggle) {
-  const wrapper = toggle.closest(".xml-attr-value-truncatable");
-  if (!wrapper) return;
-
-  const markupLine = wrapper.closest(".markup-line");
-  const fullValue = wrapper.dataset.fullValue ?? "";
-  const label = toggle.querySelector(".xml-attr-value-chip-label");
-  const collapsedLabel = toggle.dataset.collapsedLabel ?? label?.textContent ?? "";
-  const expanded = toggle.getAttribute("aria-expanded") === "true";
-
-  if (expanded) {
-    toggle.setAttribute("aria-expanded", "false");
-    toggle.setAttribute("aria-label", `Show full value (${collapsedLabel})`);
-    if (label) label.textContent = collapsedLabel;
-    markupLine?.nextElementSibling?.classList.contains("markup-embedded-uri-panel")
-      && markupLine.nextElementSibling.remove();
-    return;
-  }
-
-  toggle.setAttribute("aria-expanded", "true");
-  toggle.setAttribute("aria-label", "Hide full value");
-  if (label) label.textContent = "hide";
-  if (!markupLine || markupLine.nextElementSibling?.classList.contains("markup-embedded-uri-panel")) {
-    return;
-  }
-  const depth = Number(markupLine.style.getPropertyValue("--markup-depth") || 0);
-  markupLine.insertAdjacentElement("afterend", createEmbeddedUriContinuationPanel(fullValue, depth));
-}
-
-function appendMarkupAttributes(line, attributes) {
-  for (const { name, value } of attributes) {
-    line.appendChild(document.createTextNode(" "));
-    line.appendChild(xmlSpan("xml-attr-name", name));
-    line.appendChild(xmlSpan("xml-bracket", '="'));
-    appendMarkupAttrValue(line, value);
-    line.appendChild(xmlSpan("xml-bracket", '"'));
-  }
-}
-
-function appendMarkupTextContent(line, text) {
-  const cdataMatch = /^<!\[CDATA\[([\s\S]*)\]\]>$/.exec(text);
-  if (cdataMatch) {
-    line.appendChild(xmlSpan("xml-cdata-delimiter", "<![CDATA["));
-    line.appendChild(xmlSpan("xml-cdata", cdataMatch[1]));
-    line.appendChild(xmlSpan("xml-cdata-delimiter", "]]>"));
-    return;
-  }
-  line.appendChild(xmlSpan("xml-text", text));
-}
-
-function createMarkupLine() {
-  const line = document.createElement("div");
-  line.className = "markup-line";
-  return line;
-}
-
-function appendOpenTagContent(line, tag, attributes, ghost = false) {
-  line.appendChild(xmlSpan("xml-bracket", "<", { ghost }));
-  line.appendChild(xmlSpan("xml-tag", tag, { ghost }));
-  appendMarkupAttributes(line, attributes);
-  line.appendChild(xmlSpan("xml-bracket", ">", { ghost }));
-}
-
-function createMarkupFoldToggle() {
-  const btn = document.createElement("button");
-  btn.type = "button";
-  btn.className = "markup-fold-toggle";
-  btn.setAttribute("aria-expanded", "true");
-  btn.setAttribute("aria-label", "Collapse");
-  return btn;
-}
-
-function appendMarkupFoldableOpen(parent, depth, tag, attributes, tagHint) {
-  const ghost = Boolean(tagHint);
-  const { line, content } = createMarkupLineRow(depth, { foldToggle: true });
-  line.classList.add("markup-line-open");
-  appendOpenTagContent(content, tag, attributes, ghost);
-
-  const suffix = document.createElement("span");
-  suffix.className = "markup-fold-suffix";
-  suffix.appendChild(xmlSpan("xml-bracket", "...", { ghost }));
-  suffix.appendChild(xmlSpan("xml-bracket", "</", { ghost }));
-  suffix.appendChild(xmlSpan("xml-tag", tag, { ghost }));
-  suffix.appendChild(xmlSpan("xml-bracket", ">", { ghost }));
-  content.appendChild(suffix);
-  parent.appendChild(line);
-}
-
-function appendMarkupCloseTag(parent, depth, tag, tagHint) {
-  const ghost = Boolean(tagHint);
-  const { line, content } = createMarkupLineRow(depth);
-  content.appendChild(xmlSpan("xml-bracket", "</", { ghost }));
-  content.appendChild(xmlSpan("xml-tag", tag, { ghost }));
-  content.appendChild(xmlSpan("xml-bracket", ">", { ghost }));
-  parent.appendChild(line);
-}
-
-function appendMarkupSelfClosingTag(parent, depth, tag, attributes) {
-  const { line, content } = createMarkupLineRow(depth);
-  content.appendChild(xmlSpan("xml-bracket", "<"));
-  content.appendChild(xmlSpan("xml-tag", tag));
-  appendMarkupAttributes(content, attributes);
-  content.appendChild(xmlSpan("xml-bracket", "/>"));
-  parent.appendChild(line);
-}
-
-function appendMarkupInlineElement(parent, depth, tag, attributes, text) {
-  const { line, content } = createMarkupLineRow(depth);
-  appendOpenTagContent(content, tag, attributes);
-  appendMarkupTextContent(content, text);
-  content.appendChild(xmlSpan("xml-bracket", "</"));
-  content.appendChild(xmlSpan("xml-tag", tag));
-  content.appendChild(xmlSpan("xml-bracket", ">"));
-  parent.appendChild(line);
-}
-
-function appendMarkupTextLine(parent, depth, text) {
-  const { line, content } = createMarkupLineRow(depth);
-  appendMarkupTextContent(content, text);
-  parent.appendChild(line);
-}
-
-function formatMarkupTextNode(node) {
-  if (node.nodeType === Node.CDATA_SECTION_NODE) {
-    return `<![CDATA[${node.textContent ?? ""}]]>`;
-  }
-  return node.textContent.trim();
-}
-
-function serializeMarkupTextNodes(nodes) {
-  return [...nodes]
-    .filter((n) => isTextLikeNode(n) && !isWhitespaceOnlyText(n))
-    .map(formatMarkupTextNode)
-    .join("");
-}
-const PAGE_WHEEL_COOLDOWN_MS = 200;
-const PAGE_WHEEL_PIXEL_THRESHOLD = 4;
-const PAGE_WHEEL_GESTURE_MS = 100;
-const OVERLAY_BADGE_FONT_SIZE = 11 * 1.5 * 0.8;
-const OVERLAY_BADGE_PAD_X = 3;
-const OVERLAY_BADGE_PAD_Y = 2;
-const OVERLAY_BADGE_RADIUS_SCREEN_PX = 3;
-/** Demo page size; overlay lengths are calibrated to match pre-fix sizing on these images. */
-const OVERLAY_REF_IMAGE_WIDTH = 1224;
-const OVERLAY_REF_IMAGE_HEIGHT = 1584;
-const PAGE_ZOOM_DEFAULT = 100;
-const PAGE_PAN_DRAG_THRESHOLD = 5;
-const PAGE_VIEW_BORDER_PX = 2;
-const LAYOUT_STORAGE_KEY = "doclang-viewer-pane-layout";
-const PANE_MIN_RATIO = 0.12;
-const PANE_KEYS = ["file", "page", "markup", "reading"];
-const DEFAULT_PANE_RATIOS = [1, 1, 1, 1];
-const DEFAULT_USER_PANE_VISIBLE = { file: false, page: true, markup: true, reading: true };
-const LAYOUT_STACK_BREAKPOINT_PX = 1200;
-
-/** @type {{ pageImages: Map<number, string>, assetUrls: Map<string, string>, currentPage: number, pageCount: number, segments: Element[][], defaultResolution: { width: number, height: number }, elementIds: Map<Element, string>, idToElement: Map<string, Element>, hasPageView: boolean, markupOnly: boolean, docRoot: Element, threadPagesById: Map<string, Set<number>>, elementPageByEl: Map<Element, number>, threadNavByElement: Map<Element, { prev: Element | null, next: Element | null }>, pendingSelectElement: Element | null, readingOrder: Element[], readingOrderDisplayNumbers: Map<Element, number>, pageViewOverlay: { boxes: object[], readingOrderSteps: { order: number, box: object, elementId: string }[] } | null } | null} */
-let state = null;
-let fileCatalog = [];
-let activeFileIndex = -1;
-let filePaneUserToggled = false;
-/** @type {ResizeObserver | null} */
-let pagePaneResizeObserver = null;
-/** @type {string | null} */
-let selectedElementId = null;
-let showAllBboxes = true;
-let showLayoutBadges = true;
-let showCaptionLinks = false;
-let showPictureContents = false;
-let showTableContents = false;
-let showFragmentLinks = false;
-let showXrefLinks = false;
-let showReadingOrder = false;
-let showReadingOrderArrows = true;
-let readingOrderGlobalNumbering = false;
-let showReadingFurniture = true;
-let showReadingBackground = true;
-let pageSettingsOpen = false;
-let readingSettingsOpen = false;
-let pageZoomPercent = PAGE_ZOOM_DEFAULT;
-/** @type {{ pointerId: number, startX: number, startY: number, scrollLeft: number, scrollTop: number, moved: boolean } | null} */
-let pagePanDrag = null;
-let pagePanSuppressClick = false;
-/** @type {{ paneW: number, paneH: number, imgW: number, imgH: number, fitScale: number } | null} */
-let pageLayoutCache = null;
-/** @type {{ file: boolean, page: boolean, markup: boolean, reading: boolean }} */
-let userPaneVisible = { ...DEFAULT_USER_PANE_VISIBLE };
-/** @type {number[]} */
-let paneRatios = [...DEFAULT_PANE_RATIOS];
-/** @type {number | null} */
-let filePaneWidthPx = null;
-let toolbarOptionsOpen = false;
-/** @type {{ physicalSplitterIndex: number, leftKey: string, rightKey: string, startX: number, leftStart: number, rightStart: number, pointerId: number } | null} */
-let paneDrag = null;
-/** @type {MediaQueryList | null} */
-let layoutStackQuery = null;
-const els = {
-  openFileBtn: document.getElementById("open-file-btn"),
-  emptyStateFileTypes: document.getElementById("empty-state-file-types"),
-  docLabel: document.getElementById("doc-label"),
-  filePane: document.getElementById("file-pane"),
-  filePaneCloseAll: document.getElementById("btn-file-pane-close-all"),
-  pageNav: document.getElementById("page-nav"),
-  pageIndicator: document.getElementById("page-indicator"),
-  pageNumberInput: document.getElementById("page-number-input"),
-  pageCountIndicator: document.getElementById("page-count-indicator"),
-  btnPrev: document.getElementById("btn-prev"),
-  btnNext: document.getElementById("btn-next"),
-  showAllBboxes: document.getElementById("show-all-bboxes"),
-  showLayoutBadges: document.getElementById("show-layout-badges"),
-  showLayoutBadgesLabel: document.getElementById("show-layout-badges-label"),
-  settingsToggle: document.getElementById("btn-settings-toggle"),
-  readingSettingsToggle: document.getElementById("btn-reading-settings-toggle"),
-  pageSettingsLayer: document.getElementById("page-settings-layer"),
-  pageSettingsScrim: document.getElementById("page-settings-scrim"),
-  pageSettingsClose: document.getElementById("btn-page-settings-close"),
-  readingSettingsLayer: document.getElementById("reading-settings-layer"),
-  readingSettingsScrim: document.getElementById("reading-settings-scrim"),
-  readingSettingsClose: document.getElementById("btn-reading-settings-close"),
-  showReadingFurniture: document.getElementById("show-reading-furniture"),
-  showReadingFurnitureLabel: document.getElementById("show-reading-furniture-label"),
-  showReadingBackground: document.getElementById("show-reading-background"),
-  showReadingBackgroundLabel: document.getElementById("show-reading-background-label"),
-  showCaptionLinks: document.getElementById("show-caption-links"),
-  showCaptionLinksLabel: document.getElementById("show-caption-links-label"),
-  showPictureContents: document.getElementById("show-picture-contents"),
-  showPictureContentsLabel: document.getElementById("show-picture-contents-label"),
-  showTableContents: document.getElementById("show-table-contents"),
-  showTableContentsLabel: document.getElementById("show-table-contents-label"),
-  showFragmentLinks: document.getElementById("show-fragment-links"),
-  showFragmentLinksLabel: document.getElementById("show-fragment-links-label"),
-  showXrefLinks: document.getElementById("show-xref-links"),
-  showXrefLinksLabel: document.getElementById("show-xref-links-label"),
-  showReadingOrder: document.getElementById("show-reading-order"),
-  showReadingOrderLabel: document.getElementById("show-reading-order-label"),
-  readingOrderArrows: document.getElementById("reading-order-arrows"),
-  readingOrderArrowsLabel: document.getElementById("reading-order-arrows-label"),
-  readingOrderGlobal: document.getElementById("reading-order-global"),
-  readingOrderGlobalLabel: document.getElementById("reading-order-global-label"),
-  pageZoom: document.getElementById("page-zoom"),
-  pageZoomLabel: document.getElementById("page-zoom-label"),
-  pageZoomReset: document.getElementById("page-zoom-reset"),
-  main: document.getElementById("main"),
-  emptyState: document.getElementById("empty-state"),
-  emptyStateLoading: document.getElementById("empty-state-loading"),
-  emptyStatePrompt: document.getElementById("empty-state-prompt"),
-  markupPane: document.getElementById("markup-pane"),
-  renderedPane: document.getElementById("rendered-pane"),
-  pagePane: document.getElementById("page-pane"),
-  paneFile: document.querySelector(".pane-file"),
-  panePageView: document.querySelector(".pane-page-view"),
-  paneMarkup: document.querySelector(".pane-markup"),
-  paneReading: document.querySelector(".pane-reading"),
-  splitters: [
-    document.getElementById("splitter-0"),
-    document.getElementById("splitter-1"),
-    document.getElementById("splitter-2"),
-  ],
-  toolbarOptionsBtn: document.getElementById("btn-toolbar-options"),
-  toolbarOptionsPanel: document.getElementById("toolbar-options-panel"),
-  toggleFilePane: document.getElementById("toggle-file-pane"),
-  toggleFilePaneLabel: document.getElementById("toggle-file-pane-label"),
-  togglePagePane: document.getElementById("toggle-page-pane"),
-  toggleMarkupPane: document.getElementById("toggle-markup-pane"),
-  toggleReadingPane: document.getElementById("toggle-reading-pane"),
-  togglePagePaneLabel: document.getElementById("toggle-page-pane-label"),
-  resetPaneLayoutBtn: document.getElementById("btn-reset-pane-layout"),
+H([D({
+	type: Number,
+	reflect: !0
+})], U.prototype, "page", void 0), H([D({
+	type: String,
+	reflect: !0
+})], U.prototype, "selected", void 0), H([D({ type: String })], U.prototype, "src", void 0);
+//#endregion
+//#region src/components/page-nav/page-nav.ts
+var Bn = class extends U {
+	constructor(...e) {
+		super(...e), this._inputRef = A(), this._onPrev = () => this._emitViewPage(this.page - 1), this._onNext = () => this._emitViewPage(this.page + 1), this._onInputKeydown = (e) => {
+			e.key === "Enter" ? (e.preventDefault(), this._commitInput(), e.target.blur()) : e.key === "Escape" && (e.preventDefault(), this._resetInput(), e.target.blur());
+		}, this._onInputBlur = () => this._resetInput();
+	}
+	static {
+		this.styles = s(pt);
+	}
+	get _pageCount() {
+		return this._docState?.pageCount ?? 1;
+	}
+	render() {
+		let e = Math.max(1, String(this._pageCount).length);
+		return b`
+      <nav id="page-nav" aria-label="Page navigation">
+        <div class="page-nav-btns">
+          <button
+            type="button"
+            class="page-nav-btn btn-prev"
+            aria-label="Previous page"
+            title="Previous page"
+            ?disabled=${this.page <= 1}
+            @click=${this._onPrev}
+          >
+            <svg
+              class="page-nav-chevron"
+              viewBox="0 0 16 16"
+              width="16"
+              height="16"
+              aria-hidden="true"
+            >
+              <path
+                d="M10.5 3.5 5.5 8l5 4.5"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.75"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ></path>
+            </svg>
+          </button>
+          <button
+            type="button"
+            class="page-nav-btn btn-next"
+            aria-label="Next page"
+            title="Next page"
+            ?disabled=${this.page >= this._pageCount}
+            @click=${this._onNext}
+          >
+            <svg
+              class="page-nav-chevron"
+              viewBox="0 0 16 16"
+              width="16"
+              height="16"
+              aria-hidden="true"
+            >
+              <path
+                d="M5.5 3.5 10.5 8l-5 4.5"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.75"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ></path>
+            </svg>
+          </button>
+        </div>
+        <div class="page-indicator">
+          <span>Page&#xA0;</span>
+          <input
+            ${j(this._inputRef)}
+            type="text"
+            inputmode="numeric"
+            class="page-number-input"
+            .value=${String(this.page)}
+            style="--doclang-page-num-digits:${e}"
+            aria-label="Page number"
+            @keydown=${this._onInputKeydown}
+            @blur=${this._onInputBlur}
+            @focus=${(e) => e.target.select()}
+          />
+          <span class="page-count">&#xA0;of ${this._pageCount}</span>
+        </div>
+      </nav>
+    `;
+	}
+	updated(e) {
+		super.updated(e), e.has("page") && this._resetInput();
+	}
+	_renderDocument() {}
+	_clearDocument() {}
+	_resetInput() {
+		let e = this._inputRef.value;
+		e && (e.value = String(this.page));
+	}
+	_commitInput() {
+		let e = this._inputRef.value;
+		if (!e) return;
+		let t = Number.parseInt(e.value.trim(), 10);
+		if (!Number.isFinite(t)) {
+			this._resetInput();
+			return;
+		}
+		this._emitViewPage(Math.min(Math.max(1, t), this._docState?.pageCount ?? 1));
+	}
+	_emitViewPage(e) {
+		this.dispatchEvent(new CustomEvent("view-page", {
+			bubbles: !0,
+			composed: !0,
+			detail: { page: e }
+		}));
+	}
 };
-
-document.getElementById("btn-demo")?.addEventListener("click", loadDemo);
-document.getElementById("demo-empty-link")?.addEventListener("click", (e) => {
-  e.preventDefault();
-  loadDemo();
-});
-document.getElementById("home-link")?.addEventListener("click", (e) => {
-  e.preventDefault();
-  resetViewer();
-});
-document.getElementById("input-archive")?.addEventListener("change", async (e) => {
-  const files = [...e.target.files].filter((f) => isArchiveFile(f) || isMarkupFile(f));
-  if (!files.length) return;
-  await addFilesToCatalog(files, { replace: true });
-  e.target.value = "";
-});
-els.btnPrev?.addEventListener("click", () => goToPage(state.currentPage - 1));
-els.btnNext?.addEventListener("click", () => goToPage(state.currentPage + 1));
-els.pageNumberInput?.addEventListener("keydown", (e) => {
-  if (e.key === "Enter") {
-    e.preventDefault();
-    commitPageNumberInput();
-    els.pageNumberInput?.blur();
-  } else if (e.key === "Escape") {
-    e.preventDefault();
-    resetPageNumberInput();
-    els.pageNumberInput?.blur();
-  }
-});
-els.pageNumberInput?.addEventListener("blur", resetPageNumberInput);
-els.pageNumberInput?.addEventListener("focus", (e) => {
-  e.target.select();
-});
-els.showAllBboxes?.addEventListener("change", () => {
-  showAllBboxes = els.showAllBboxes.checked;
-  syncLayoutSubtoggles();
-  const img = els.pagePane?.querySelector(".page-view img");
-  if (img) syncOverlayBadges(img);
-  applyBboxVisibility();
-});
-els.showLayoutBadges?.addEventListener("change", () => {
-  showLayoutBadges = els.showLayoutBadges.checked;
-  const img = els.pagePane?.querySelector(".page-view img");
-  if (img) syncOverlayBadges(img);
-  applyBboxVisibility();
-});
-els.showCaptionLinks?.addEventListener("change", () => {
-  showCaptionLinks = els.showCaptionLinks.checked;
-  applyBboxVisibility();
-});
-els.showPictureContents?.addEventListener("change", () => {
-  showPictureContents = els.showPictureContents.checked;
-  applyBboxVisibility();
-});
-els.showTableContents?.addEventListener("change", () => {
-  showTableContents = els.showTableContents.checked;
-  applyBboxVisibility();
-});
-els.showFragmentLinks?.addEventListener("change", () => {
-  showFragmentLinks = els.showFragmentLinks.checked;
-  applyBboxVisibility();
-});
-els.showXrefLinks?.addEventListener("change", () => {
-  showXrefLinks = els.showXrefLinks.checked;
-  applyBboxVisibility();
-});
-els.showReadingOrder?.addEventListener("change", () => {
-  showReadingOrder = els.showReadingOrder.checked;
-  syncLayoutSubtoggles();
-  const img = els.pagePane?.querySelector(".page-view img");
-  if (img) syncOverlayBadges(img);
-  applyBboxVisibility();
-});
-els.readingOrderArrows?.addEventListener("change", () => {
-  showReadingOrderArrows = els.readingOrderArrows.checked;
-  applyBboxVisibility();
-});
-els.readingOrderGlobal?.addEventListener("change", () => {
-  readingOrderGlobalNumbering = els.readingOrderGlobal.checked;
-  if (state) renderPage(state.currentPage);
-});
-els.settingsToggle?.addEventListener("click", () => setPageSettingsOpen(!pageSettingsOpen));
-els.readingSettingsToggle?.addEventListener("click", () => setReadingSettingsOpen(!readingSettingsOpen));
-els.pageSettingsClose?.addEventListener("click", () => setPageSettingsOpen(false));
-els.pageSettingsScrim?.addEventListener("click", () => setPageSettingsOpen(false));
-els.readingSettingsClose?.addEventListener("click", () => setReadingSettingsOpen(false));
-els.readingSettingsScrim?.addEventListener("click", () => setReadingSettingsOpen(false));
-document.addEventListener("keydown", (e) => {
-  if (e.key !== "Escape") return;
-  if (toolbarOptionsOpen) setToolbarOptionsOpen(false);
-  else if (pageSettingsOpen) setPageSettingsOpen(false);
-  else if (readingSettingsOpen) setReadingSettingsOpen(false);
-});
-els.showReadingFurniture?.addEventListener("change", () => {
-  showReadingFurniture = els.showReadingFurniture.checked;
-  syncReadingLayerVisibility();
-});
-els.showReadingBackground?.addEventListener("change", () => {
-  showReadingBackground = els.showReadingBackground.checked;
-  syncReadingLayerVisibility();
-});
-loadLayoutPrefs();
-normalizePaneRatios();
-initToolbarOptions();
-initPaneSplitters();
-initLayoutStackListener();
-initFileTypeHints();
-initCursorHints();
-initBboxHints();
-initDragDrop();
-initFilePaneCloseAll();
-initPageWheelNav();
-initPageViewControls();
-let demoLoadInProgress = false;
-
-function setDemoLoading(loading) {
-  document.body.classList.toggle("demo-loading", loading);
-  const btnDemo = document.getElementById("btn-demo");
-  if (btnDemo) btnDemo.disabled = loading;
-}
-
-if (document.getElementById("btn-demo")) loadDemo();
-
-async function loadDemo() {
-  if (demoLoadInProgress) return;
-  demoLoadInProgress = true;
-  setDemoLoading(true);
-  try {
-    const res = await fetch(DEMO_ARCHIVE_URL);
-    if (!res.ok) throw new Error(`HTTP ${res.status}`);
-    const label = DEMO_ARCHIVE_URL.split("/").pop() || "demo.dclx";
-    await addArchiveBufferToCatalog(await res.arrayBuffer(), label, { replace: true });
-  } catch (err) {
-    alert(
-      `Failed to load demo: ${err.message}\n\nServe this directory over HTTP (e.g. python3 -m http.server) and open the viewer from localhost.`,
-    );
-  } finally {
-    demoLoadInProgress = false;
-    if (!document.body.classList.contains("viewer-loaded")) setDemoLoading(false);
-  }
-}
-
-async function loadFromFileList(fileList) {
-  if (!fileList?.length) return;
-  const files = [...fileList];
-  if (files.some((f) => f.name === "document.xml")) {
-    await appendFolderArchive(files);
-    return;
-  }
-  const supported = files.filter((f) => isArchiveFile(f) || isMarkupFile(f));
-  if (supported.length) await addFilesToCatalog(supported, { replace: false });
-}
-
-function createFileCatalogEntry(file) {
-  return {
-    id: crypto.randomUUID(),
-    label: file.name,
-    kind: isMarkupFile(file) ? "markup" : "archive",
-    source: file,
-    currentPage: 1,
-    pageZoom: PAGE_ZOOM_DEFAULT,
-    snapshot: null,
-    thumbnailUrl: null,
-  };
-}
-
-function pageImageMimeFromExt(ext) {
-  const normalized = ext.toLowerCase().replace("jpeg", "jpg");
-  if (normalized === "png") return "image/png";
-  if (normalized === "webp") return "image/webp";
-  return "image/jpeg";
-}
-
-function createPageImageObjectUrl(data, ext) {
-  return URL.createObjectURL(new Blob([data], { type: pageImageMimeFromExt(ext) }));
-}
-
-function createFirstPageImageUrlFromFiles(files) {
-  let bestPage = Infinity;
-  /** @type {File | null} */
-  let bestFile = null;
-  for (const f of files) {
-    const relPath = f.webkitRelativePath || f.name;
-    const parts = relPath.split("/");
-    if (parts.length < 2 || parts[parts.length - 2] !== "pages") continue;
-    const m = PAGE_IMAGE_RE.exec(f.name);
-    if (!m) continue;
-    const pageNum = Number(m[1]);
-    if (pageNum < bestPage) {
-      bestPage = pageNum;
-      bestFile = f;
-    }
-  }
-  return bestFile ? URL.createObjectURL(bestFile) : null;
-}
-
-async function createFirstPageImageUrlFromZip(source) {
-  const buffer = source instanceof File ? await source.arrayBuffer() : source;
-  const entries = await unzip(buffer, {
-    shouldExtract: (name) => /^pages\/\d+\.(png|jpe?g|webp)$/i.test(name),
-  });
-  let bestPage = Infinity;
-  /** @type {{ name: string, data: Uint8Array } | null} */
-  let bestEntry = null;
-  for (const e of entries) {
-    const m = e.name.match(/^pages\/(\d+)\.(png|jpe?g|webp)$/i);
-    if (!m) continue;
-    const pageNum = Number(m[1]);
-    if (pageNum < bestPage) {
-      bestPage = pageNum;
-      bestEntry = e;
-    }
-  }
-  if (!bestEntry) return null;
-  const ext = bestEntry.name.split(".").pop() ?? "png";
-  return createPageImageObjectUrl(bestEntry.data, ext);
-}
-
-async function resolveCatalogEntryThumbnail(entry) {
-  if (entry.thumbnailUrl) return entry.thumbnailUrl;
-  if (entry.kind === "markup") return null;
-  try {
-    if (entry.kind === "folder") {
-      entry.thumbnailUrl = createFirstPageImageUrlFromFiles(entry.source);
-    } else if (entry.kind === "archive") {
-      entry.thumbnailUrl = await createFirstPageImageUrlFromZip(entry.source);
-    }
-  } catch {
-    entry.thumbnailUrl = null;
-  }
-  return entry.thumbnailUrl;
-}
-
-function enrichCatalogEntryThumbnail(entry) {
-  resolveCatalogEntryThumbnail(entry).then((url) => {
-    if (!fileCatalog.includes(entry)) {
-      if (url?.startsWith("blob:")) URL.revokeObjectURL(url);
-      return;
-    }
-    if (url) renderFileView();
-  });
-}
-
-function revokeCatalogEntry(entry) {
-  if (entry?.thumbnailUrl?.startsWith("blob:")) {
-    URL.revokeObjectURL(entry.thumbnailUrl);
-  }
-  if (entry) entry.thumbnailUrl = null;
-}
-
-function createFileViewThumbnail(entry) {
-  const thumb = document.createElement("span");
-  thumb.className = "file-view-thumb";
-  thumb.setAttribute("aria-hidden", "true");
-  if (entry.thumbnailUrl) {
-    const img = document.createElement("img");
-    img.src = entry.thumbnailUrl;
-    img.alt = "";
-    thumb.appendChild(img);
-  } else {
-    const placeholder = document.createElement("span");
-    placeholder.className = "file-view-thumb-placeholder";
-    placeholder.innerHTML = FILE_THUMB_PLACEHOLDER_SVG;
-    thumb.appendChild(placeholder);
-  }
-  return thumb;
-}
-
-async function addFilesToCatalog(files, { replace = false } = {}) {
-  if (replace) {
-    clearFileCatalog();
-    filePaneUserToggled = false;
-  }
-  const startIndex = fileCatalog.length;
-  for (const file of files) {
-    const entry = createFileCatalogEntry(file);
-    fileCatalog.push(entry);
-    enrichCatalogEntryThumbnail(entry);
-  }
-  if (!fileCatalog.length) return;
-  await switchToFile(replace ? 0 : startIndex);
-}
-
-async function appendFolderArchive(files) {
-  if (!files.some((f) => f.name === "document.xml")) {
-    alert("Archive must contain document.xml at its root.");
-    return;
-  }
-  const rootName = (files[0].webkitRelativePath || files[0].name).split("/")[0] || "archive";
-  const entry = {
-    id: crypto.randomUUID(),
-    label: rootName,
-    kind: "folder",
-    source: files,
-    currentPage: 1,
-    pageZoom: PAGE_ZOOM_DEFAULT,
-    snapshot: null,
-    thumbnailUrl: null,
-  };
-  fileCatalog.push(entry);
-  enrichCatalogEntryThumbnail(entry);
-  await switchToFile(fileCatalog.length - 1);
-}
-
-async function addArchiveBufferToCatalog(buffer, label, { replace = false } = {}) {
-  if (replace) {
-    clearFileCatalog();
-    filePaneUserToggled = false;
-  }
-  const entry = {
-    id: crypto.randomUUID(),
-    label,
-    kind: "archive",
-    source: buffer,
-    currentPage: 1,
-    pageZoom: PAGE_ZOOM_DEFAULT,
-    snapshot: null,
-    thumbnailUrl: null,
-  };
-  fileCatalog.push(entry);
-  enrichCatalogEntryThumbnail(entry);
-  await switchToFile(replace ? 0 : fileCatalog.length - 1);
-}
-
-async function extractArchiveFromFiles(files) {
-  const markupFile = files.find((f) => f.name === "document.xml");
-  if (!markupFile) throw new Error("Archive must contain document.xml at its root.");
-  const markupXml = await markupFile.text();
-  const pageImages = new Map();
-  const assetUrls = new Map();
-  for (const f of files) {
-    const relPath = f.webkitRelativePath || f.name;
-    const parts = relPath.split("/");
-    if (parts.length >= 2 && parts[parts.length - 2] === "pages") {
-      const m = PAGE_IMAGE_RE.exec(f.name);
-      if (m) pageImages.set(Number(m[1]), URL.createObjectURL(f));
-    }
-    const assetPath = archiveRelativeAssetPath(relPath);
-    if (assetPath) assetUrls.set(assetPath, URL.createObjectURL(f));
-  }
-  return { markupXml, pageImages, assetUrls };
-}
-
-async function parseCatalogEntry(entry) {
-  try {
-    if (entry.kind === "markup") {
-      const text = entry.source instanceof File
-        ? await entry.source.text()
-        : new TextDecoder().decode(entry.source);
-      return buildDocumentState(text, new Map(), entry.label, new Map(), { markupOnly: true });
-    }
-    if (entry.kind === "archive") {
-      const buffer = entry.source instanceof File
-        ? await entry.source.arrayBuffer()
-        : entry.source;
-      const { markupXml, pageImages, assetUrls } = await extractArchiveFromZipBuffer(buffer);
-      return buildDocumentState(markupXml, pageImages, entry.label, assetUrls, { markupOnly: false });
-    }
-    if (entry.kind === "folder") {
-      const { markupXml, pageImages, assetUrls } = await extractArchiveFromFiles(entry.source);
-      return buildDocumentState(markupXml, pageImages, entry.label, assetUrls, { markupOnly: false });
-    }
-  } catch (err) {
-    alert(`Failed to read ${entry.label}: ${err.message}`);
-  }
-  return null;
-}
-
-function persistActiveFileViewState() {
-  if (activeFileIndex < 0 || !state) return;
-  const entry = fileCatalog[activeFileIndex];
-  entry.currentPage = state.currentPage;
-  entry.pageZoom = pageZoomPercent;
-}
-
-function releaseActiveDocument() {
-  if (activeFileIndex >= 0) {
-    const entry = fileCatalog[activeFileIndex];
-    if (entry?.snapshot) {
-      revokeDocumentState(entry.snapshot);
-      entry.snapshot = null;
-    }
-  }
-  if (state) revokeDocumentState(state);
-  state = null;
-  selectedElementId = null;
-  pagePanDrag = null;
-  pagePanSuppressClick = false;
-}
-
-function clearFileCatalog() {
-  releaseActiveDocument();
-  for (const entry of fileCatalog) revokeCatalogEntry(entry);
-  fileCatalog = [];
-  activeFileIndex = -1;
-}
-
-async function switchToFile(index) {
-  if (index < 0 || index >= fileCatalog.length) return;
-
-  persistActiveFileViewState();
-  releaseActiveDocument();
-
-  activeFileIndex = index;
-  const entry = fileCatalog[index];
-  const docState = await parseCatalogEntry(entry);
-  if (!docState) {
-    revokeCatalogEntry(entry);
-    fileCatalog.splice(index, 1);
-    activeFileIndex = -1;
-    if (fileCatalog.length) {
-      await switchToFile(Math.min(index, fileCatalog.length - 1));
-    } else {
-      resetViewer();
-    }
-    return;
-  }
-
-  entry.snapshot = docState;
-  docState.currentPage = entry.currentPage ?? 1;
-  activateDocument(docState, entry);
-}
-
-function defaultFilePaneVisible() {
-  return fileCatalog.length > 1;
-}
-
-function syncFilePaneDefault() {
-  if (!filePaneUserToggled) {
-    const wasVisible = userPaneVisible.file;
-    const shouldBeVisible = defaultFilePaneVisible();
-    userPaneVisible.file = shouldBeVisible;
-    if (!wasVisible && shouldBeVisible) {
-      paneRatios = [...DEFAULT_PANE_RATIOS];
-      normalizePaneRatios();
-      filePaneWidthPx = null;
-    }
-  }
-}
-
-async function closeCatalogFile(index) {
-  if (index < 0 || index >= fileCatalog.length) return;
-
-  const wasActive = index === activeFileIndex;
-  const entry = fileCatalog[index];
-
-  if (wasActive) {
-    releaseActiveDocument();
-    activeFileIndex = -1;
-  }
-
-  revokeCatalogEntry(entry);
-  fileCatalog.splice(index, 1);
-
-  if (!fileCatalog.length) {
-    resetViewer();
-    return;
-  }
-
-  if (wasActive) {
-    await switchToFile(Math.min(index, fileCatalog.length - 1));
-    return;
-  }
-
-  if (index < activeFileIndex) {
-    activeFileIndex -= 1;
-  }
-  updateFileView();
-}
-
-function renderFileView() {
-  if (!els.filePane) return;
-  els.filePane.replaceChildren();
-  if (!fileCatalog.length) return;
-
-  const list = document.createElement("ul");
-  list.className = "file-view-list";
-  list.setAttribute("role", "listbox");
-  list.setAttribute("aria-label", "Open files");
-
-  fileCatalog.forEach((entry, index) => {
-    const item = document.createElement("li");
-    const card = document.createElement("div");
-    card.className = "file-view-item";
-    card.title = entry.label;
-    card.tabIndex = 0;
-    card.setAttribute("role", "option");
-    if (index === activeFileIndex) {
-      card.classList.add("is-active");
-      card.setAttribute("aria-selected", "true");
-    } else {
-      card.setAttribute("aria-selected", "false");
-    }
-
-    const thumbWrap = document.createElement("div");
-    thumbWrap.className = "file-view-thumb-wrap";
-
-    const closeBtn = document.createElement("button");
-    closeBtn.type = "button";
-    closeBtn.className = "file-view-close";
-    closeBtn.setAttribute("aria-label", `Close ${entry.label}`);
-    closeBtn.textContent = "×";
-    closeBtn.addEventListener("click", (e) => {
-      e.stopPropagation();
-      closeCatalogFile(index);
-    });
-
-    thumbWrap.append(createFileViewThumbnail(entry), closeBtn);
-
-    const label = document.createElement("span");
-    label.className = "file-view-label";
-    label.textContent = entry.label;
-
-    card.append(thumbWrap, label);
-    card.addEventListener("click", (e) => {
-      if (e.target.closest(".file-view-close")) return;
-      switchToFile(index);
-    });
-    card.addEventListener("keydown", (e) => {
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        switchToFile(index);
-      }
-    });
-
-    item.appendChild(card);
-    list.appendChild(item);
-  });
-
-  els.filePane.appendChild(list);
-}
-
-function updateFileView() {
-  syncFilePaneDefault();
-  syncFilePaneCloseAllButton();
-  renderFileView();
-  syncToolbarPaneCheckboxes();
-  applyPaneLayout();
-}
-
-function syncFilePaneCloseAllButton() {
-  if (!els.filePaneCloseAll) return;
-  els.filePaneCloseAll.hidden = fileCatalog.length === 0;
-}
-
-function initFilePaneCloseAll() {
-  els.filePaneCloseAll?.addEventListener("click", () => {
-    if (!fileCatalog.length) return;
-    const count = fileCatalog.length;
-    const message = count === 1
-      ? `Remove "${fileCatalog[0].label}" from the viewer?`
-      : `Remove all ${count} open files from the viewer?`;
-    if (confirm(message)) resetViewer();
-  });
-}
-
-function initPageWheelNav() {
-  if (!els.pagePane) return;
-
-  let pixelAccum = 0;
-  let pixelGestureUntil = 0;
-  let lastFlipAt = 0;
-
-  function wheelDir(e) {
-    if (e.deltaMode === 1) {
-      return e.deltaY > 0 ? 1 : e.deltaY < 0 ? -1 : 0;
-    }
-    if (e.deltaMode === 2) {
-      return Math.sign(e.deltaY);
-    }
-    const now = performance.now();
-    if (now > pixelGestureUntil) pixelAccum = 0;
-    pixelGestureUntil = now + PAGE_WHEEL_GESTURE_MS;
-    pixelAccum += e.deltaY;
-    if (Math.abs(pixelAccum) >= PAGE_WHEEL_PIXEL_THRESHOLD) {
-      const dir = pixelAccum > 0 ? 1 : -1;
-      pixelAccum = 0;
-      return dir;
-    }
-    return 0;
-  }
-
-  function tryFlipPage(dir) {
-    if (!dir || !state) return false;
-    const now = performance.now();
-    if (now - lastFlipAt < PAGE_WHEEL_COOLDOWN_MS) return false;
-    const before = state.currentPage;
-    goToPage(state.currentPage + dir);
-    if (state.currentPage !== before) {
-      lastFlipAt = now;
-      return true;
-    }
-    return false;
-  }
-
-  function isScrollAtTop(pane) {
-    return pane.scrollTop <= 0;
-  }
-
-  function isScrollAtBottom(pane) {
-    return pane.scrollTop + pane.clientHeight >= pane.scrollHeight - 1;
-  }
-
-  function onScrollPaneWheel(e, pane) {
-    if (!state || state.markupOnly || state.pageCount <= 1) return;
-    const dir = wheelDir(e);
-    if (!dir) return;
-
-    const atTop = isScrollAtTop(pane);
-    const atBottom = isScrollAtBottom(pane);
-    const wantPrev = dir < 0 && atTop;
-    const wantNext = dir > 0 && atBottom;
-    if (!wantPrev && !wantNext) return;
-
-    e.preventDefault();
-    if (!tryFlipPage(dir)) return;
-
-    requestAnimationFrame(() => {
-      pane.scrollTop = dir > 0 ? 0 : pane.scrollHeight;
-    });
-  }
-
-  els.pagePane.addEventListener(
-    "wheel",
-    (e) => {
-      if (!state?.hasPageView) return;
-      const pane = pageViewScrollPane();
-      if (!pane) return;
-      const scrollable = pane.scrollHeight > pane.clientHeight || pane.scrollWidth > pane.clientWidth;
-      if (scrollable) {
-        onScrollPaneWheel(e, pane);
-        return;
-      }
-      e.preventDefault();
-      const dir = wheelDir(e);
-      if (dir) tryFlipPage(dir);
-    },
-    { passive: false },
-  );
-
-  for (const pane of [els.markupPane, els.renderedPane]) {
-    if (!pane) continue;
-    pane.addEventListener("wheel", (e) => onScrollPaneWheel(e, pane), { passive: false });
-  }
-
-  els.pagePane.tabIndex = 0;
-  els.pagePane.setAttribute("role", "region");
-  els.pagePane.setAttribute("aria-label", "Original page");
-
-  els.pagePane.addEventListener("pointerdown", (e) => {
-    if (state?.hasPageView) els.pagePane.focus({ preventScroll: true });
-  });
-
-  els.pagePane.addEventListener("keydown", (e) => {
-    if (!state?.hasPageView) return;
-
-    let dir = 0;
-    switch (e.key) {
-      case "ArrowDown":
-      case "PageDown":
-      case "ArrowRight":
-        dir = 1;
-        break;
-      case "ArrowUp":
-      case "PageUp":
-      case "ArrowLeft":
-        dir = -1;
-        break;
-      default:
-        return;
-    }
-
-    e.preventDefault();
-    tryFlipPage(dir);
-  });
-}
-
-function pageViewScrollPane() {
-  if (!els.pagePane) return null;
-  return els.pagePane.querySelector(".page-view-port") ?? els.pagePane;
-}
-
-function isPagePaneScrollable() {
-  const pane = pageViewScrollPane();
-  if (!pane) return false;
-  return pane.scrollWidth > pane.clientWidth || pane.scrollHeight > pane.clientHeight;
-}
-
-function canStartPagePan(event) {
-  if (!(event.target instanceof Element)) return false;
-  if (!event.target.closest(".page-view")) return false;
-  return isPagePaneScrollable();
-}
-
-function updatePagePanePanCursor() {
-  if (!els.pagePane) return;
-  els.pagePane.classList.toggle("can-pan", isPagePaneScrollable() && !pagePanDrag);
-}
-
-function initPageViewControls() {
-  if (!els.pagePane) return;
-
-  els.pageZoom?.addEventListener("input", () => {
-    pageZoomPercent = Math.max(PAGE_ZOOM_DEFAULT, Number(els.pageZoom.value));
-    if (Number(els.pageZoom.value) < PAGE_ZOOM_DEFAULT) {
-      els.pageZoom.value = String(pageZoomPercent);
-    }
-    els.pageZoom.setAttribute("aria-valuenow", String(pageZoomPercent));
-    updatePageZoomResetButton();
-    refreshPageViewLayout();
-  });
-
-  els.pageZoomReset?.addEventListener("click", () => {
-    if (pageZoomPercent === PAGE_ZOOM_DEFAULT) return;
-    resetPageZoom();
-  });
-
-  els.pagePane.addEventListener("pointerdown", (e) => {
-    if (e.button !== 0 || !canStartPagePan(e)) return;
-    const scrollPane = pageViewScrollPane();
-    if (!scrollPane) return;
-    pagePanDrag = {
-      pointerId: e.pointerId,
-      startX: e.clientX,
-      startY: e.clientY,
-      scrollLeft: scrollPane.scrollLeft,
-      scrollTop: scrollPane.scrollTop,
-      moved: false,
-    };
-  });
-
-  els.pagePane.addEventListener("pointermove", (e) => {
-    if (!pagePanDrag || e.pointerId !== pagePanDrag.pointerId) return;
-    const dx = e.clientX - pagePanDrag.startX;
-    const dy = e.clientY - pagePanDrag.startY;
-    if (!pagePanDrag.moved && Math.hypot(dx, dy) >= PAGE_PAN_DRAG_THRESHOLD) {
-      pagePanDrag.moved = true;
-      els.pagePane.classList.add("is-panning");
-      els.pagePane.classList.remove("can-pan");
-      els.pagePane.setPointerCapture(e.pointerId);
-    }
-    if (!pagePanDrag.moved) return;
-    const scrollPane = pageViewScrollPane();
-    if (!scrollPane) return;
-    scrollPane.scrollLeft = pagePanDrag.scrollLeft + pagePanDrag.startX - e.clientX;
-    scrollPane.scrollTop = pagePanDrag.scrollTop + pagePanDrag.startY - e.clientY;
-    e.preventDefault();
-  });
-
-  function endPagePan(e) {
-    if (!pagePanDrag || e.pointerId !== pagePanDrag.pointerId) return;
-    if (pagePanDrag.moved) pagePanSuppressClick = true;
-    pagePanDrag = null;
-    els.pagePane.classList.remove("is-panning");
-    if (els.pagePane.hasPointerCapture(e.pointerId)) {
-      els.pagePane.releasePointerCapture(e.pointerId);
-    }
-    updatePagePanePanCursor();
-  }
-
-  els.pagePane.addEventListener("pointerup", endPagePan);
-  els.pagePane.addEventListener("pointercancel", endPagePan);
-}
-
-function escapeHtml(text) {
-  return String(text)
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;");
-}
-
-function headTextPreview(el, maxLen = 72) {
-  const text = el.textContent?.replace(/\s+/g, " ").trim() ?? "";
-  if (!text) return "—";
-  return text.length > maxLen ? `${text.slice(0, maxLen)}…` : text;
-}
-
-function virtualTextHeadLocations(el) {
-  const parent = el.parentElement;
-  if (!parent) return [];
-  const nodes = [...parent.childNodes];
-  const idx = nodes.indexOf(el);
-  if (idx < 0) return [];
-  return parseElementHeadAt(nodes, idx + 1)?.locs ?? [];
-}
-
-function elementHeadLocations(el) {
-  const own = headLocations(el);
-  return own.length === 4 ? own : virtualTextHeadLocations(el);
-}
-
-function firstHeadChild(el, tag) {
-  return childElements(el).find((child) => localName(child) === tag) ?? null;
-}
-
-const ELEMENT_LAYERS = new Set(["body", "background", "furniture"]);
-
-function layerFromHeadNodes(nodes, startIdx) {
-  let i = startIdx;
-  while (i < nodes.length) {
-    const node = nodes[i];
-    if (node.nodeType !== Node.ELEMENT_NODE) {
-      i += 1;
-      continue;
-    }
-    const tag = localName(node);
-    if (tag === "layer") {
-      const value = node.getAttribute("value") ?? "body";
-      return ELEMENT_LAYERS.has(value) ? value : "body";
-    }
-    if (tag === "location") break;
-    if (HEAD_TAGS.has(tag)) {
-      i += 1;
-      continue;
-    }
-    break;
-  }
-  return "body";
-}
-
-function elementLayer(el) {
-  const layerEl = firstHeadChild(el, "layer");
-  if (layerEl) {
-    const value = layerEl.getAttribute("value") ?? "body";
-    return ELEMENT_LAYERS.has(value) ? value : "body";
-  }
-  if (headLocations(el).length === 4) return "body";
-  const parent = el.parentElement;
-  if (!parent) return "body";
-  const nodes = [...parent.childNodes];
-  const idx = nodes.indexOf(el);
-  if (idx < 0) return "body";
-  return layerFromHeadNodes(nodes, idx + 1);
-}
-
-function layerClassForValue(layer) {
-  if (layer === "furniture") return "layer-furniture";
-  if (layer === "background") return "layer-background";
-  return "";
-}
-
-function applyElementLayerAttr(sourceEl, domEl) {
-  domEl.setAttribute("data-doclang-layer", elementLayer(sourceEl));
-}
-
-function syncReadingLayerCheckboxes() {
-  if (els.showReadingFurniture) els.showReadingFurniture.checked = showReadingFurniture;
-  if (els.showReadingBackground) els.showReadingBackground.checked = showReadingBackground;
-}
-
-/** @returns {{ key: string, value: string, isDefault: boolean }[]} */
-function collectElementHeadInfo(el, defaultResolution) {
-  const labelEl = firstHeadChild(el, "label");
-  const threadEl = firstHeadChild(el, "thread");
-  const xrefEl = firstHeadChild(el, "xref");
-  const hrefEl = firstHeadChild(el, "href");
-  const layerEl = firstHeadChild(el, "layer");
-  const captionEl = firstHeadChild(el, "caption");
-  const descriptionEl = firstHeadChild(el, "description");
-  const summaryEl = firstHeadChild(el, "summary");
-  const customEl = firstHeadChild(el, "custom");
-  const locs = elementHeadLocations(el);
-  const rows = [{ key: "element", value: elementLabel(el), isDefault: false }];
-
-  rows.push({
-    key: "label",
-    value: labelEl?.getAttribute("value") ?? "undefined",
-    isDefault: !labelEl?.hasAttribute("value"),
-  });
-
-  if (threadEl) {
-    rows.push({
-      key: "thread_id",
-      value: threadEl.getAttribute("thread_id") ?? "—",
-      isDefault: false,
-    });
-  } else {
-    rows.push({ key: "thread", value: "—", isDefault: true });
-  }
-
-  if (xrefEl) {
-    rows.push({
-      key: "xref",
-      value: `thread_id ${xrefEl.getAttribute("thread_id") ?? "—"}`,
-      isDefault: false,
-    });
-  } else {
-    rows.push({ key: "xref", value: "—", isDefault: true });
-  }
-
-  if (hrefEl) {
-    rows.push({
-      key: "href",
-      value: hrefEl.getAttribute("uri") ?? "—",
-      isDefault: false,
-    });
-  } else {
-    rows.push({ key: "href", value: "—", isDefault: true });
-  }
-
-  rows.push({
-    key: "layer",
-    value: layerEl?.getAttribute("value") ?? "body",
-    isDefault: !layerEl?.hasAttribute("value"),
-  });
-
-  const cornerLabels = ["x_min", "y_min", "x_max", "y_max"];
-  if (locs.length === 4) {
-    for (let idx = 0; idx < 4; idx += 1) {
-      const loc = locs[idx];
-      const axisDefault = idx % 2 === 0 ? defaultResolution.width : defaultResolution.height;
-      const resolution = locationResolution(loc, axisDefault);
-      const value = loc.getAttribute("value") ?? "0";
-      rows.push({
-        key: cornerLabels[idx],
-        value: `${value} @ ${resolution}`,
-        isDefault: false,
-      });
-    }
-  } else {
-    for (const key of cornerLabels) {
-      rows.push({ key, value: "—", isDefault: false });
-    }
-  }
-
-  rows.push({
-    key: "caption",
-    value: captionEl ? headTextPreview(captionEl) : "—",
-    isDefault: !captionEl,
-  });
-  rows.push({
-    key: "description",
-    value: descriptionEl ? headTextPreview(descriptionEl) : "—",
-    isDefault: !descriptionEl,
-  });
-  rows.push({
-    key: "summary",
-    value: summaryEl ? headTextPreview(summaryEl) : "—",
-    isDefault: !summaryEl,
-  });
-  rows.push({
-    key: "custom",
-    value: customEl ? headTextPreview(customEl) : "—",
-    isDefault: !customEl,
-  });
-
-  return rows;
-}
-
-function elementHeadTooltipHtml(el, defaultResolution) {
-  const rows = collectElementHeadInfo(el, defaultResolution);
-  const body = rows
-    .map(({ key, value, isDefault }) => {
-      const rendered = escapeHtml(value);
-      const suffix = isDefault ? ' <span class="head-default">(default)</span>' : "";
-      return `<tr><th scope="row">${escapeHtml(key)}</th><td>${rendered}${suffix}</td></tr>`;
-    })
-    .join("");
-  return `<table class="head-tooltip"><tbody>${body}</tbody></table>`;
-}
-
-const cursorHintEl = document.getElementById("cursor-hint");
-const CURSOR_HINT_OFFSET = 10;
-const CURSOR_HINT_MARGIN = 8;
-
-function hideCursorHint() {
-  cursorHintEl.hidden = true;
-  cursorHintEl.classList.remove("cursor-hint-detail");
-  cursorHintEl.replaceChildren();
-}
-
-function showCursorHint(content, clientX, clientY, { detail = false } = {}) {
-  cursorHintEl.replaceChildren();
-  if (typeof content === "string") {
-    cursorHintEl.textContent = content;
-  } else {
-    cursorHintEl.appendChild(content);
-  }
-  cursorHintEl.classList.toggle("cursor-hint-detail", detail);
-  cursorHintEl.hidden = false;
-
-  let left = clientX + CURSOR_HINT_OFFSET;
-  let top = clientY + CURSOR_HINT_OFFSET;
-  const rect = cursorHintEl.getBoundingClientRect();
-  if (left + rect.width > window.innerWidth - CURSOR_HINT_MARGIN) {
-    left = clientX - rect.width - CURSOR_HINT_OFFSET;
-  }
-  if (top + rect.height > window.innerHeight - CURSOR_HINT_MARGIN) {
-    top = clientY - rect.height - CURSOR_HINT_OFFSET;
-  }
-  cursorHintEl.style.left = `${Math.max(CURSOR_HINT_MARGIN, left)}px`;
-  cursorHintEl.style.top = `${Math.max(CURSOR_HINT_MARGIN, top)}px`;
-}
-
-function showCursorHintHtml(html, clientX, clientY) {
-  cursorHintEl.innerHTML = html;
-  cursorHintEl.classList.add("cursor-hint-detail");
-  cursorHintEl.hidden = false;
-
-  let left = clientX + CURSOR_HINT_OFFSET;
-  let top = clientY + CURSOR_HINT_OFFSET;
-  const rect = cursorHintEl.getBoundingClientRect();
-  if (left + rect.width > window.innerWidth - CURSOR_HINT_MARGIN) {
-    left = clientX - rect.width - CURSOR_HINT_OFFSET;
-  }
-  if (top + rect.height > window.innerHeight - CURSOR_HINT_MARGIN) {
-    top = clientY - rect.height - CURSOR_HINT_OFFSET;
-  }
-  cursorHintEl.style.left = `${Math.max(CURSOR_HINT_MARGIN, left)}px`;
-  cursorHintEl.style.top = `${Math.max(CURSOR_HINT_MARGIN, top)}px`;
-}
-
-function initFileTypeHints() {
-  if (!els.emptyStateFileTypes) return;
-  const markup = SUPPORTED_FILE_EXTENSIONS.map((ext) => `<code>${ext}</code>`).join(", ");
-  els.emptyStateFileTypes.innerHTML = markup;
-}
-
-function initCursorHints() {
-  els.markupPane?.addEventListener("mousemove", (e) => {
-    if (!e.target.closest(".markup-ghost-tag-part")) {
-      hideCursorHint();
-      return;
-    }
-    showCursorHint(VIRTUAL_TEXT_TAG_HINT, e.clientX, e.clientY);
-  });
-  els.markupPane?.addEventListener("mouseleave", hideCursorHint);
-
-  els.openFileBtn?.addEventListener("mousemove", (e) => {
-    showCursorHint(OPEN_FILE_HINT, e.clientX, e.clientY);
-  });
-  els.openFileBtn?.addEventListener("mouseleave", hideCursorHint);
-}
-
-function initBboxHints() {
-  if (!els.pagePane) return;
-
-  els.pagePane.addEventListener("mousemove", (e) => {
-    if (pagePanDrag?.moved || els.pagePane.classList.contains("is-panning")) {
-      hideCursorHint();
-      return;
-    }
-    const navBtn = e.target.closest(".fragment-nav-btn:not(.fragment-nav-btn-disabled)");
-    if (navBtn) {
-      const hint = navBtn.getAttribute("data-nav") === "prev"
-        ? FRAGMENT_NAV_HINT_PREV
-        : FRAGMENT_NAV_HINT_NEXT;
-      showCursorHint(hint, e.clientX, e.clientY);
-      return;
-    }
-    const badge = e.target.closest(".element-badge[data-element-id]");
-    if (!badge || !state?.idToElement) {
-      hideCursorHint();
-      return;
-    }
-    const elementId = badge.getAttribute("data-element-id");
-    const xmlEl = state.idToElement.get(elementId);
-    if (!xmlEl) {
-      hideCursorHint();
-      return;
-    }
-    showCursorHintHtml(elementHeadTooltipHtml(xmlEl, state.defaultResolution), e.clientX, e.clientY);
-  });
-  els.pagePane.addEventListener("mouseleave", hideCursorHint);
-}
-
-function initDragDrop() {
-  document.body.addEventListener("dragenter", (e) => {
-    if (!hasArchiveTransfer(e.dataTransfer)) return;
-    e.preventDefault();
-    document.body.classList.add("drag-over");
-  });
-
-  document.body.addEventListener("dragover", (e) => {
-    if (!hasArchiveTransfer(e.dataTransfer)) return;
-    e.preventDefault();
-    e.dataTransfer.dropEffect = "copy";
-  });
-
-  document.body.addEventListener("dragleave", (e) => {
-    if (!hasArchiveTransfer(e.dataTransfer)) return;
-    if (e.relatedTarget && document.body.contains(e.relatedTarget)) return;
-    document.body.classList.remove("drag-over");
-  });
-
-  document.body.addEventListener("drop", async (e) => {
-    if (!hasArchiveTransfer(e.dataTransfer)) return;
-    e.preventDefault();
-    document.body.classList.remove("drag-over");
-    await loadFromDrop(e.dataTransfer);
-  });
-}
-
-function hasArchiveTransfer(dataTransfer) {
-  return [...dataTransfer.types].includes("Files");
-}
-
-function isArchiveFile(file) {
-  return /\.dclx$/i.test(file.name) || /\.zip$/i.test(file.name);
-}
-
-function isMarkupFile(file) {
-  return /\.(?:dclg(?:\.xml)?|xml)$/i.test(file.name);
-}
-
-async function loadFromDrop(dataTransfer) {
-  const files = [...dataTransfer.files];
-  if (files.some((f) => f.name === "document.xml")) {
-    await appendFolderArchive(files);
-    return;
-  }
-  const supported = files.filter((f) => isArchiveFile(f) || isMarkupFile(f));
-  if (supported.length) await addFilesToCatalog(supported, { replace: false });
-}
-
-function buildDocumentState(markupXml, pageImages, label, assetUrls, { markupOnly }) {
-  const doc = new DOMParser().parseFromString(markupXml, "application/xml");
-  const parseError = doc.querySelector("parsererror");
-  if (parseError) {
-    alert(`Invalid XML in ${label}`);
-    return null;
-  }
-  const root = doc.documentElement;
-  if (localName(root) !== "doclang") {
-    alert(`${label}: root element must be <doclang>`);
-    return null;
-  }
-
-  const head = childElements(root).find((el) => localName(el) === "head") ?? null;
-  const defaultResolution = readDefaultResolution(head);
-  const segments = markupOnly
-    ? [childElements(root).filter((el) => localName(el) !== "head")]
-    : splitIntoSegments(root);
-  const hasPageView = !markupOnly && pageImages.size > 0;
-  const maxImagePage = hasPageView ? Math.max(...pageImages.keys()) : 0;
-  const pageCount = markupOnly ? 1 : Math.max(segments.length, maxImagePage, 1);
-  const readingOrder = computeReadingOrder(root);
-  const elementPageByEl = buildElementPageMap(segments);
-
-  return {
-    pageImages,
-    assetUrls,
-    currentPage: 1,
-    pageCount,
-    segments,
-    defaultResolution,
-    hasPageView,
-    markupOnly,
-    docRoot: root,
-    threadPagesById: buildThreadPagesById(root, elementPageByEl),
-    elementPageByEl,
-    threadNavByElement: buildThreadNavByElement(root),
-    pendingSelectElement: null,
-    readingOrder,
-    readingOrderDisplayNumbers: computeReadingOrderDisplayNumbers(readingOrder),
-    pageViewOverlay: null,
-  };
-}
-
-function activateDocument(docState, entry) {
-  state = docState;
-  resetPageLayoutCache();
-  closeAllSettings();
-
-  pageZoomPercent = entry.pageZoom ?? PAGE_ZOOM_DEFAULT;
-  if (els.pageZoom) {
-    els.pageZoom.value = String(pageZoomPercent);
-    els.pageZoom.setAttribute("aria-valuenow", String(pageZoomPercent));
-  }
-  updatePageZoomResetButton();
-  const port = pageViewScrollPane();
-  if (port) {
-    port.scrollLeft = 0;
-    port.scrollTop = 0;
-  }
-
-  setDocLabel(entry.label);
-  setDocumentOpen(true, { markupOnly: state.markupOnly });
-  setPageViewVisible(state.hasPageView);
-  renderPage(state.currentPage);
-  updateFileView();
-}
-
-function setDocLabel(label) {
-  if (!els.docLabel) return;
-  if (label) {
-    els.docLabel.textContent = label;
-    els.docLabel.hidden = false;
-  } else {
-    els.docLabel.textContent = "";
-    els.docLabel.hidden = true;
-  }
-}
-
-function setDocumentOpen(open, { markupOnly = false } = {}) {
-  document.body.classList.toggle("viewer-loaded", open);
-  document.body.classList.toggle("markup-only", open && markupOnly);
-  if (els.pageNav) els.pageNav.hidden = !open || markupOnly;
-  syncToolbarPaneCheckboxes();
-  applyPaneLayout();
-}
-
-function applyReadingLayerClasses(root) {
-  root.classList.toggle("show-reading-furniture", showReadingFurniture);
-  root.classList.toggle("show-reading-background", showReadingBackground);
-}
-
-function syncReadingLayerVisibility() {
-  const root = els.renderedPane?.querySelector(".rendered-doc");
-  if (root) applyReadingLayerClasses(root);
-}
-
-function closeAllSettings() {
-  setPageSettingsOpen(false);
-  setReadingSettingsOpen(false);
-}
-
-function resetPageZoom() {
-  pageZoomPercent = PAGE_ZOOM_DEFAULT;
-  if (els.pageZoom) {
-    els.pageZoom.value = String(PAGE_ZOOM_DEFAULT);
-    els.pageZoom.setAttribute("aria-valuenow", String(PAGE_ZOOM_DEFAULT));
-  }
-  updatePageZoomResetButton();
-  const port = pageViewScrollPane();
-  if (port) {
-    port.scrollLeft = 0;
-    port.scrollTop = 0;
-  }
-  refreshPageViewLayout();
-}
-
-function updatePageZoomResetButton() {
-  if (!els.pageZoomReset) return;
-  els.pageZoomReset.textContent = `${pageZoomPercent}%`;
-  els.pageZoomReset.disabled = pageZoomPercent === PAGE_ZOOM_DEFAULT;
-}
-
-function resetViewer() {
-  setDemoLoading(false);
-  clearFileCatalog();
-  filePaneUserToggled = false;
-  selectedElementId = null;
-  pagePanDrag = null;
-  pagePanSuppressClick = false;
-  showReadingFurniture = true;
-  showReadingBackground = true;
-  syncReadingLayerCheckboxes();
-  resetPageZoom();
-  setDocLabel(null);
-  setDocumentOpen(false);
-  document.body.classList.remove("has-page-view");
-  closeAllSettings();
-  setToolbarOptionsOpen(false);
-  if (els.markupPane) els.markupPane.innerHTML = "";
-  if (els.renderedPane) els.renderedPane.innerHTML = "";
-  if (els.pagePane) els.pagePane.innerHTML = "";
-  setPageIndicator(1, 1);
-  if (els.btnPrev) els.btnPrev.disabled = true;
-  if (els.btnNext) els.btnNext.disabled = true;
-  if (els.filePane) els.filePane.replaceChildren();
-  updateFileView();
-  applyPaneLayout();
-}
-
-function setPageViewVisible(visible) {
-  document.body.classList.toggle("has-page-view", visible);
-  syncPagePaneControls();
-  syncToolbarPaneCheckboxes();
-  if (!visible) setPageSettingsOpen(false);
-  applyPaneLayout();
-  syncLayoutSubtoggles();
-}
-
-function syncPagePaneControls() {
-  const pageVisible = isPaneVisible("page");
-  if (els.settingsToggle) els.settingsToggle.hidden = !pageVisible;
-  if (els.pageZoomLabel) els.pageZoomLabel.hidden = !pageVisible;
-  if (pageVisible) updatePageZoomResetButton();
-  if (els.pagePane) els.pagePane.tabIndex = pageVisible ? 0 : -1;
-}
-
-function setPageSettingsOpen(open) {
-  pageSettingsOpen = open;
-  if (els.pageSettingsLayer) els.pageSettingsLayer.hidden = !open;
-  if (els.settingsToggle) els.settingsToggle.setAttribute("aria-expanded", String(open));
-}
-
-function setReadingSettingsOpen(open) {
-  readingSettingsOpen = open;
-  if (els.readingSettingsLayer) els.readingSettingsLayer.hidden = !open;
-  if (els.readingSettingsToggle) els.readingSettingsToggle.setAttribute("aria-expanded", String(open));
-}
-
-function syncLayoutSubtoggles() {
-  const layoutEnabled = Boolean(state?.hasPageView && showAllBboxes);
-  for (const label of [
-    els.showLayoutBadgesLabel,
-    els.showPictureContentsLabel,
-    els.showTableContentsLabel,
-    els.showFragmentLinksLabel,
-    els.showCaptionLinksLabel,
-    els.showXrefLinksLabel,
-    els.showReadingOrderLabel,
-  ]) {
-    if (!label) continue;
-    label.classList.toggle("settings-option-disabled", !layoutEnabled);
-    const input = label.querySelector("input");
-    if (input) input.disabled = !layoutEnabled;
-  }
-
-  const readingOrderEnabled = layoutEnabled && showReadingOrder;
-  for (const label of [els.readingOrderArrowsLabel, els.readingOrderGlobalLabel]) {
-    if (!label) continue;
-    label.classList.toggle("settings-option-disabled", !readingOrderEnabled);
-    const input = label.querySelector("input");
-    if (input) input.disabled = !readingOrderEnabled;
-  }
-}
-
-function paneDef(key) {
-  const defs = {
-    file: { key: "file", el: els.paneFile, canShow: () => fileCatalog.length > 0 },
-    page: { key: "page", el: els.panePageView, canShow: () => Boolean(state?.hasPageView) },
-    markup: { key: "markup", el: els.paneMarkup, canShow: () => Boolean(state) },
-    reading: { key: "reading", el: els.paneReading, canShow: () => Boolean(state) },
-  };
-  return defs[key];
-}
-
-function isPaneAvailable(key) {
-  const def = paneDef(key);
-  return def?.canShow() ?? false;
-}
-
-function isPaneVisible(key) {
-  if (!isPaneAvailable(key)) return false;
-  return Boolean(userPaneVisible[key]);
-}
-
-function visiblePaneKeys() {
-  return PANE_KEYS.filter((key) => isPaneVisible(key));
-}
-
-function paneMinRatio(key) {
-  return PANE_MIN_RATIO;
-}
-
-function filePaneFitWidthPx() {
-  const probe = document.createElement("div");
-  probe.style.cssText = "position:absolute;visibility:hidden;width:var(--file-pane-fit-width);";
-  document.documentElement.appendChild(probe);
-  const px = probe.getBoundingClientRect().width;
-  probe.remove();
-  return Math.ceil(px) || 108;
-}
-
-function resolvedFilePaneWidthPx() {
-  const fit = filePaneFitWidthPx();
-  return Math.max(fit, filePaneWidthPx ?? fit);
-}
-
-function contentPaneFrWeights(keys) {
-  const contentKeys = keys.filter((key) => key !== "file");
-  const weights = contentKeys.map((key) => paneRatios[paneRatioIndex(key)]);
-  const sum = weights.reduce((a, b) => a + b, 0) || contentKeys.length;
-  return weights.map((weight) => weight / sum);
-}
-
-function paneRatioIndex(key) {
-  return PANE_KEYS.indexOf(key);
-}
-
-function normalizePaneRatios() {
-  const sum = paneRatios.reduce((a, b) => a + b, 0);
-  if (sum <= 0) {
-    paneRatios = [...DEFAULT_PANE_RATIOS];
-    return;
-  }
-  paneRatios = paneRatios.map((r) => r / sum);
-}
-
-function visiblePaneRatios(keys) {
-  const weights = keys.map((key) => paneRatios[paneRatioIndex(key)]);
-  const sum = weights.reduce((a, b) => a + b, 0) || keys.length;
-  return weights.map((w) => w / sum);
-}
-
-function loadLayoutPrefs() {
-  try {
-    const raw = localStorage.getItem(LAYOUT_STORAGE_KEY);
-    if (!raw) return;
-    const data = JSON.parse(raw);
-    if (data?.visible && typeof data.visible === "object") {
-      for (const key of PANE_KEYS) {
-        if (typeof data.visible[key] === "boolean") userPaneVisible[key] = data.visible[key];
-      }
-      if (typeof data.visible.file === "boolean") filePaneUserToggled = true;
-    }
-    if (Array.isArray(data?.ratios)) {
-      const valid = data.ratios.every((n) => typeof n === "number" && n > 0);
-      if (valid && data.ratios.length === 4) {
-        paneRatios = [...data.ratios];
-        normalizePaneRatios();
-      } else if (valid && data.ratios.length === 3) {
-        paneRatios = [1, ...data.ratios];
-        normalizePaneRatios();
-      }
-    }
-    if (typeof data?.filePaneWidthPx === "number" && data.filePaneWidthPx > 0) {
-      filePaneWidthPx = data.filePaneWidthPx;
-    }
-  } catch {
-    /* ignore invalid stored layout */
-  }
-}
-
-function saveLayoutPrefs() {
-  try {
-    localStorage.setItem(
-      LAYOUT_STORAGE_KEY,
-      JSON.stringify({ visible: userPaneVisible, ratios: paneRatios, filePaneWidthPx }),
-    );
-  } catch {
-    /* ignore quota / private mode */
-  }
-}
-
-function resetPaneLayout() {
-  filePaneUserToggled = false;
-  userPaneVisible = {
-    file: defaultFilePaneVisible(),
-    page: true,
-    markup: true,
-    reading: true,
-  };
-  paneRatios = [...DEFAULT_PANE_RATIOS];
-  normalizePaneRatios();
-  filePaneWidthPx = null;
-  setReadingSettingsOpen(false);
-  syncPagePaneControls();
-  syncToolbarPaneCheckboxes();
-  saveLayoutPrefs();
-  applyPaneLayout();
-}
-
-function isLayoutStacked() {
-  return Boolean(layoutStackQuery?.matches);
-}
-
-function initLayoutStackListener() {
-  if (!els.main) return;
-  layoutStackQuery = window.matchMedia(`(max-width: ${LAYOUT_STACK_BREAKPOINT_PX}px)`);
-  const onChange = () => applyPaneLayout();
-  layoutStackQuery.addEventListener("change", onChange);
-  onChange();
-}
-
-function setToolbarOptionsOpen(open) {
-  toolbarOptionsOpen = open;
-  if (els.toolbarOptionsPanel) els.toolbarOptionsPanel.hidden = !open;
-  if (els.toolbarOptionsBtn) els.toolbarOptionsBtn.setAttribute("aria-expanded", String(open));
-}
-
-function syncToolbarPaneCheckboxes() {
-  if (els.toggleFilePane) {
-    const available = isPaneAvailable("file");
-    els.toggleFilePane.checked = available && userPaneVisible.file;
-    els.toggleFilePane.disabled = !available;
-  }
-  if (els.toggleFilePaneLabel) {
-    els.toggleFilePaneLabel.classList.toggle("toolbar-options-item-disabled", !isPaneAvailable("file"));
-  }
-  if (els.togglePagePane) {
-    const available = isPaneAvailable("page");
-    els.togglePagePane.checked = available && userPaneVisible.page;
-    els.togglePagePane.disabled = !available;
-  }
-  if (els.togglePagePaneLabel) {
-    els.togglePagePaneLabel.classList.toggle("toolbar-options-item-disabled", !isPaneAvailable("page"));
-  }
-  if (els.toggleMarkupPane) {
-    els.toggleMarkupPane.checked = userPaneVisible.markup;
-    els.toggleMarkupPane.disabled = !state;
-  }
-  if (els.toggleReadingPane) {
-    els.toggleReadingPane.checked = userPaneVisible.reading;
-    els.toggleReadingPane.disabled = !state;
-  }
-  for (const label of [
-    els.toggleFilePaneLabel,
-    els.togglePagePaneLabel,
-    document.getElementById("toggle-markup-pane-label"),
-    document.getElementById("toggle-reading-pane-label"),
-  ]) {
-    if (!label) continue;
-    const input = label.querySelector("input");
-    label.classList.toggle("toolbar-options-item-disabled", Boolean(input?.disabled));
-  }
-  if (els.resetPaneLayoutBtn) els.resetPaneLayoutBtn.disabled = !state;
-}
-
-function paneKeysAdjacent(leftKey, rightKey) {
-  const leftIdx = PANE_KEYS.indexOf(leftKey);
-  const rightIdx = PANE_KEYS.indexOf(rightKey);
-  return leftIdx >= 0 && rightIdx === leftIdx + 1;
-}
-
-function onlyHiddenPanesBetween(leftKey, rightKey) {
-  const leftIdx = PANE_KEYS.indexOf(leftKey);
-  const rightIdx = PANE_KEYS.indexOf(rightKey);
-  if (leftIdx < 0 || rightIdx <= leftIdx) return false;
-  for (let i = leftIdx + 1; i < rightIdx; i++) {
-    if (isPaneVisible(PANE_KEYS[i])) return false;
-  }
-  return true;
-}
-
-function shouldShowSplitterBetween(leftKey, rightKey) {
-  if (!isPaneVisible(leftKey) || !isPaneVisible(rightKey)) return false;
-  if (paneKeysAdjacent(leftKey, rightKey)) return true;
-  return onlyHiddenPanesBetween(leftKey, rightKey);
-}
-
-function splitterForLayoutGap(leftKey, rightKey) {
-  if (!shouldShowSplitterBetween(leftKey, rightKey)) return null;
-  const leftIdx = PANE_KEYS.indexOf(leftKey);
-  if (leftIdx < 0) return null;
-  return els.splitters[leftIdx] ?? null;
-}
-
-function visiblePaneNeighborAfter(key) {
-  const idx = PANE_KEYS.indexOf(key);
-  if (idx < 0) return null;
-  for (let i = idx + 1; i < PANE_KEYS.length; i++) {
-    const neighbor = PANE_KEYS[i];
-    if (isPaneVisible(neighbor)) return neighbor;
-  }
-  return null;
-}
-
-function visiblePaneNeighborBefore(key) {
-  const idx = PANE_KEYS.indexOf(key);
-  if (idx < 0) return null;
-  for (let i = idx - 1; i >= 0; i--) {
-    const neighbor = PANE_KEYS[i];
-    if (isPaneVisible(neighbor)) return neighbor;
-  }
-  return null;
-}
-
-function resolvedPhysicalSplitterKeys(physicalSplitterIndex) {
-  const leftPhysical = PANE_KEYS[physicalSplitterIndex];
-  const rightPhysical = PANE_KEYS[physicalSplitterIndex + 1];
-  if (!leftPhysical || !rightPhysical) return null;
-
-  const leftKey = isPaneVisible(leftPhysical) ? leftPhysical : visiblePaneNeighborBefore(rightPhysical);
-  const rightKey = isPaneVisible(rightPhysical) ? rightPhysical : visiblePaneNeighborAfter(leftPhysical);
-  if (!leftKey || !rightKey || leftKey === rightKey) return null;
-  if (!shouldShowSplitterBetween(leftKey, rightKey)) return null;
-
-  const canonical = splitterForLayoutGap(leftKey, rightKey);
-  if (!canonical || canonical !== els.splitters[physicalSplitterIndex]) return null;
-  return { leftKey, rightKey };
-}
-
-function resetPaneGridStyles() {
-  for (const key of PANE_KEYS) {
-    const el = paneDef(key)?.el;
-    if (el) {
-      el.style.gridColumn = "";
-      el.style.gridRow = "";
-    }
-  }
-  for (const splitter of els.splitters) {
-    if (!splitter) continue;
-    splitter.style.gridColumn = "";
-    splitter.style.gridRow = "";
-    splitter.hidden = true;
-  }
-}
-
-function setUserPaneVisible(key, visible) {
-  userPaneVisible[key] = visible;
-  if (key === "file") filePaneUserToggled = true;
-  if (key === "page") syncPagePaneControls();
-  if (key === "reading" && !visible) setReadingSettingsOpen(false);
-  syncToolbarPaneCheckboxes();
-  saveLayoutPrefs();
-  applyPaneLayout();
-}
-
-function applyPaneLayout() {
-  if (!els.main) return;
-
-  const stacked = document.body.classList.contains("viewer-loaded") && isLayoutStacked();
-  els.main.classList.toggle("layout-stacked", stacked);
-
-  for (const key of PANE_KEYS) {
-    const def = paneDef(key);
-    if (!def?.el) continue;
-    def.el.hidden = !isPaneVisible(key);
-    def.el.classList.remove("pane-layout-last");
-  }
-
-  if (!document.body.classList.contains("viewer-loaded")) {
-    resetPaneGridStyles();
-    els.main.style.gridTemplateColumns = "";
-    els.main.style.gridTemplateRows = "";
-    return;
-  }
-
-  let keys = visiblePaneKeys();
-  if (!keys.length) {
-    userPaneVisible.markup = true;
-    keys = visiblePaneKeys();
-  }
-
-  const lastKey = keys[keys.length - 1];
-  paneDef(lastKey)?.el?.classList.add("pane-layout-last");
-
-  resetPaneGridStyles();
-
-  if (stacked) {
-    els.main.style.gridTemplateRows = "";
-    els.main.style.gridTemplateColumns = "1fr";
-    let row = 1;
-    for (const key of keys) {
-      const def = paneDef(key);
-      if (!def?.el) continue;
-      def.el.style.gridRow = String(row++);
-    }
-    refreshPageViewLayout();
-    if (els.readingSettingsToggle) {
-      els.readingSettingsToggle.hidden = !state || !isPaneVisible("reading");
-    }
-    return;
-  }
-
-  const contentFr = contentPaneFrWeights(keys);
-  const cols = [];
-  let contentFrIndex = 0;
-  keys.forEach((key, index) => {
-    if (key === "file") {
-      cols.push(`${resolvedFilePaneWidthPx()}px`);
-    } else {
-      cols.push(`minmax(0, ${contentFr[contentFrIndex++].toFixed(6)}fr)`);
-    }
-    if (index < keys.length - 1 && shouldShowSplitterBetween(keys[index], keys[index + 1])) {
-      cols.push("1px");
-    }
-  });
-  els.main.style.gridTemplateColumns = cols.join(" ");
-  els.main.style.gridTemplateRows = "minmax(0, 1fr)";
-
-  let col = 1;
-  keys.forEach((key, index) => {
-    const def = paneDef(key);
-    if (!def?.el) return;
-    def.el.style.gridColumn = String(col);
-    col += 1;
-    if (index < keys.length - 1) {
-      const leftKey = keys[index];
-      const rightKey = keys[index + 1];
-      if (!shouldShowSplitterBetween(leftKey, rightKey)) return;
-      const splitter = splitterForLayoutGap(leftKey, rightKey);
-      if (splitter) {
-        splitter.hidden = false;
-        splitter.style.gridColumn = String(col);
-        col += 1;
-      }
-    }
-  });
-
-  refreshPageViewLayout();
-  if (els.readingSettingsToggle) {
-    els.readingSettingsToggle.hidden = !state || !isPaneVisible("reading");
-  }
-}
-
-function initToolbarOptions() {
-  if (!els.toolbarOptionsBtn || !els.toolbarOptionsPanel) return;
-
-  els.toolbarOptionsBtn.addEventListener("click", (e) => {
-    e.stopPropagation();
-    setToolbarOptionsOpen(!toolbarOptionsOpen);
-  });
-
-  document.addEventListener("click", (e) => {
-    if (!toolbarOptionsOpen) return;
-    if (e.target instanceof Node && els.toolbarOptionsPanel.contains(e.target)) return;
-    if (e.target instanceof Node && els.toolbarOptionsBtn.contains(e.target)) return;
-    setToolbarOptionsOpen(false);
-  });
-
-  const onToggle = (key, input) => {
-    input?.addEventListener("change", () => {
-      if (!state) return;
-      const nextKeys = PANE_KEYS.filter((k) => (k === key ? input.checked : userPaneVisible[k] && isPaneAvailable(k)));
-      if (!nextKeys.length) {
-        input.checked = true;
-        return;
-      }
-      setUserPaneVisible(key, input.checked);
-    });
-  };
-
-  onToggle("file", els.toggleFilePane);
-  onToggle("page", els.togglePagePane);
-  onToggle("markup", els.toggleMarkupPane);
-  onToggle("reading", els.toggleReadingPane);
-  els.resetPaneLayoutBtn?.addEventListener("click", () => {
-    if (!state) return;
-    resetPaneLayout();
-  });
-  syncToolbarPaneCheckboxes();
-}
-
-function initPaneSplitters() {
-  for (const [index, splitter] of els.splitters.entries()) {
-    if (!splitter) continue;
-    splitter.addEventListener("pointerdown", (e) => startPaneDrag(e, index));
-  }
-  window.addEventListener("pointermove", onPaneDragMove);
-  window.addEventListener("pointerup", endPaneDrag);
-  window.addEventListener("pointercancel", endPaneDrag);
-}
-
-function startPaneDrag(e, physicalSplitterIndex) {
-  if (e.button !== 0 || isLayoutStacked() || !document.body.classList.contains("viewer-loaded")) return;
-
-  const resolved = resolvedPhysicalSplitterKeys(physicalSplitterIndex);
-  if (!resolved) return;
-
-  const { leftKey, rightKey } = resolved;
-
-  normalizePaneRatios();
-  const leftIndex = paneRatioIndex(leftKey);
-  const rightIndex = paneRatioIndex(rightKey);
-  const dragState = {
-    physicalSplitterIndex,
-    leftKey,
-    rightKey,
-    startX: e.clientX,
-    leftStart: paneRatios[leftIndex],
-    rightStart: paneRatios[rightIndex],
-    pointerId: e.pointerId,
-  };
-  if (leftKey === "file") {
-    dragState.leftStartPx = resolvedFilePaneWidthPx();
-  } else if (rightKey === "file") {
-    dragState.rightStartPx = resolvedFilePaneWidthPx();
-  }
-  paneDrag = dragState;
-
-  e.preventDefault();
-  e.currentTarget.setPointerCapture(e.pointerId);
-  e.currentTarget.classList.add("is-dragging");
-  document.body.classList.add("pane-drag-active");
-}
-
-function contentPaneAvailableWidthPx() {
-  if (!els.main) return 1;
-  const rect = els.main.getBoundingClientRect();
-  const keys = visiblePaneKeys();
-  let reserved = 0;
-  if (keys.includes("file")) reserved += resolvedFilePaneWidthPx();
-  for (let i = 0; i < keys.length - 1; i++) {
-    if (shouldShowSplitterBetween(keys[i], keys[i + 1])) reserved += 1;
-  }
-  return Math.max(rect.width - reserved, 1);
-}
-
-function onPaneDragMove(e) {
-  if (!paneDrag || e.pointerId !== paneDrag.pointerId || !els.main) return;
-
-  if (paneDrag.leftKey === "file" && typeof paneDrag.leftStartPx === "number") {
-    filePaneWidthPx = Math.max(filePaneFitWidthPx(), paneDrag.leftStartPx + (e.clientX - paneDrag.startX));
-    applyPaneLayout();
-    return;
-  }
-  if (paneDrag.rightKey === "file" && typeof paneDrag.rightStartPx === "number") {
-    filePaneWidthPx = Math.max(filePaneFitWidthPx(), paneDrag.rightStartPx - (e.clientX - paneDrag.startX));
-    applyPaneLayout();
-    return;
-  }
-
-  const keys = visiblePaneKeys();
-  const contentFr = contentPaneFrWeights(keys);
-  const contentKeys = keys.filter((key) => key !== "file");
-  const leftContentIndex = contentKeys.indexOf(paneDrag.leftKey);
-  if (leftContentIndex < 0 || leftContentIndex + 1 >= contentFr.length) return;
-
-  const pairFrTotal = contentFr[leftContentIndex] + contentFr[leftContentIndex + 1];
-  if (!(pairFrTotal > 0)) return;
-
-  const pairPixels = Math.max(contentPaneAvailableWidthPx() * pairFrTotal, 1);
-  const deltaRatio = (e.clientX - paneDrag.startX) / pairPixels;
-
-  const leftIndex = paneRatioIndex(paneDrag.leftKey);
-  const rightIndex = paneRatioIndex(paneDrag.rightKey);
-  const pairStoredTotal = paneDrag.leftStart + paneDrag.rightStart;
-  if (!(pairStoredTotal > 0) || leftIndex < 0 || rightIndex < 0) return;
-
-  let nextLeft = paneDrag.leftStart + deltaRatio * pairStoredTotal;
-  const leftMin = Math.min(paneMinRatio(paneDrag.leftKey), pairStoredTotal / 2);
-  const rightMin = Math.min(paneMinRatio(paneDrag.rightKey), pairStoredTotal / 2);
-  nextLeft = Math.min(Math.max(nextLeft, leftMin), pairStoredTotal - rightMin);
-  paneRatios[leftIndex] = nextLeft;
-  paneRatios[rightIndex] = pairStoredTotal - nextLeft;
-  applyPaneLayout();
-}
-
-function endPaneDrag(e) {
-  if (!paneDrag || e.pointerId !== paneDrag.pointerId) return;
-  const splitter = els.splitters[paneDrag.physicalSplitterIndex];
-  splitter?.classList.remove("is-dragging");
-  if (splitter?.hasPointerCapture(e.pointerId)) splitter.releasePointerCapture(e.pointerId);
-  paneDrag = null;
-  document.body.classList.remove("pane-drag-active");
-  normalizePaneRatios();
-  saveLayoutPrefs();
-}
-
-function goToPage(n) {
-  if (!state) return;
-  setPageSettingsOpen(false);
-  const page = Math.min(Math.max(1, n), state.pageCount);
-  state.currentPage = page;
-  renderPage(page);
-}
-
-function resetPageNumberInput() {
-  if (!els.pageNumberInput) return;
-  els.pageNumberInput.value = state ? String(state.currentPage) : "1";
-}
-
-function commitPageNumberInput() {
-  if (!state || !els.pageNumberInput) return;
-  const n = Number.parseInt(els.pageNumberInput.value.trim(), 10);
-  if (!Number.isFinite(n)) {
-    resetPageNumberInput();
-    return;
-  }
-  goToPage(n);
-}
-
-function setPageIndicator(pageNum, pageCount) {
-  if (!els.pageIndicator) return;
-  if (els.pageCountIndicator) els.pageCountIndicator.textContent = `\u00A0of ${pageCount}`;
-  if (els.pageNumberInput) {
-    const digits = Math.max(1, String(pageCount).length);
-    els.pageNumberInput.style.setProperty("--page-num-digits", String(digits));
-    els.pageNumberInput.disabled = !state;
-    if (document.activeElement !== els.pageNumberInput) {
-      els.pageNumberInput.value = String(pageNum);
-    }
-  }
-}
-
-function renderPage(pageNum) {
-  if (!state) return;
-  const { segments, pageImages, pageCount, defaultResolution } = state;
-  const idx = pageNum - 1;
-  const segment = segments[idx] ?? [];
-  selectedElementId = null;
-
-  setPageIndicator(pageNum, pageCount);
-  if (els.btnPrev) els.btnPrev.disabled = pageNum <= 1;
-  if (els.btnNext) els.btnNext.disabled = pageNum >= pageCount;
-
-  if (!els.markupPane || !els.renderedPane || !els.pagePane) return;
-
-  els.markupPane.innerHTML = "";
-  const elementIds = assignElementIds(segment);
-  state.elementIds = elementIds;
-  state.idToElement = invertElementIds(elementIds);
-
-  if (segmentHasMarkup(segment)) {
-    els.markupPane.appendChild(buildMarkupView(segment, elementIds));
-    els.renderedPane.innerHTML = "";
-    els.renderedPane.appendChild(buildRenderedView(segment, elementIds));
-  } else {
-    els.markupPane.innerHTML = `<div class="placeholder">${NO_MARKUP}</div>`;
-    els.renderedPane.innerHTML = `<div class="placeholder">${NO_MARKUP}</div>`;
-  }
-
-  els.pagePane.innerHTML = "";
-  if (state.hasPageView) {
-    const imageUrl = pageImages.get(pageNum);
-    if (imageUrl) {
-      const port = document.createElement("div");
-      port.className = "page-view-port";
-      const wrap = document.createElement("div");
-      wrap.className = "page-view";
-      const img = document.createElement("img");
-      img.alt = `Page ${pageNum}`;
-
-      const onImageReady = () => {
-        if (img.dataset.layoutGeneration === String(pageNum)) return;
-        img.dataset.layoutGeneration = String(pageNum);
-
-        applyPageImageSize(img, els.pagePane);
-
-        const boxes = collectBoundingBoxes(segment, defaultResolution, elementIds);
-        const existing = wrap.querySelector("svg.overlay");
-        if (existing) existing.remove();
-        const readingOrderSteps = collectReadingOrderSteps(
-          segment,
-          elementIds,
-          boxes,
-          state.readingOrder,
-          readingOrderGlobalNumbering,
-          state.readingOrderDisplayNumbers,
-        );
-        state.pageViewOverlay = { boxes, readingOrderSteps };
-        if (boxes.length) {
-          wrap.appendChild(
-            buildOverlay(
-              img,
-              boxes,
-              collectCaptionLinks(segment, elementIds, boxes),
-              collectXrefLinks(segment, elementIds, boxes),
-              readingOrderSteps,
-              collectFragmentLinks(segment, elementIds, boxes, pageNum, state.threadPagesById),
-              collectFragmentNavItems(segment, elementIds, boxes),
-              defaultResolution,
-            ),
-          );
-        }
-        syncPageViewChrome(img);
-        const pending = state.pendingSelectElement;
-        if (pending) {
-          state.pendingSelectElement = null;
-          const id = findElementIdOnPage(pending);
-          if (id) selectElement(id);
-        }
-      };
-
-      img.addEventListener("load", onImageReady, { once: true });
-      wrap.appendChild(img);
-      port.appendChild(wrap);
-      els.pagePane.appendChild(port);
-      img.src = imageUrl;
-      if (img.complete) onImageReady();
-
-      if (!pagePaneResizeObserver) {
-        pagePaneResizeObserver = new ResizeObserver(() => {
-          refreshPageViewLayout();
-        });
-        pagePaneResizeObserver.observe(els.pagePane);
-      }
-    } else {
-      els.pagePane.innerHTML = `<div class="placeholder">${NO_IMAGE}</div>`;
-    }
-  }
-}
-
-function pageZoomFactor() {
-  return pageZoomPercent / PAGE_ZOOM_DEFAULT;
-}
-
-/**
- * Convert a legacy overlay length (image pixels as tuned on the demo pages) to SVG user
- * units for the current page. Matches the old demo on-screen size, stays zoom-stable,
- * and scales with page resolution so other images look the same.
- */
-function overlayUserLength(baseUserPx, img = els.pagePane?.querySelector(".page-view img")) {
-  const zoom = pageZoomFactor();
-  if (!(zoom > 0)) return baseUserPx;
-  if (!img?.naturalWidth || !img.naturalHeight || !els.pagePane) {
-    return baseUserPx / zoom;
-  }
-
-  const { w: paneW, h: paneH } = paneContentSize(els.pagePane);
-  if (!(paneW > 0 && paneH > 0)) return baseUserPx / zoom;
-
-  const refFit = Math.min(
-    (paneW - PAGE_VIEW_BORDER_PX) / OVERLAY_REF_IMAGE_WIDTH,
-    (paneH - PAGE_VIEW_BORDER_PX) / OVERLAY_REF_IMAGE_HEIGHT,
-  );
-  const fitScale = getCachedFitScale(img, els.pagePane);
-  if (!(refFit > 0) || !(fitScale > 0)) return baseUserPx / zoom;
-
-  return (baseUserPx * refFit) / (fitScale * zoom);
-}
-
-function computePageFitScale(img, pane) {
-  return getCachedFitScale(img, pane);
-}
-
-function resetPageLayoutCache() {
-  pageLayoutCache = null;
-}
-
-function paneContentSize(pane) {
-  const style = getComputedStyle(pane);
-  const padX = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
-  const padY = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
-  return {
-    w: pane.clientWidth - padX,
-    h: pane.clientHeight - padY,
-  };
-}
-
-function getCachedFitScale(img, pane) {
-  const { w: paneW, h: paneH } = paneContentSize(pane);
-  const imgW = img.naturalWidth;
-  const imgH = img.naturalHeight;
-  if (
-    pageLayoutCache &&
-    pageLayoutCache.paneW === paneW &&
-    pageLayoutCache.paneH === paneH &&
-    pageLayoutCache.imgW === imgW &&
-    pageLayoutCache.imgH === imgH
-  ) {
-    return pageLayoutCache.fitScale;
-  }
-  const fitScale =
-    paneW > 0 && paneH > 0 && imgW > 0 && imgH > 0
-      ? Math.min(
-          (paneW - PAGE_VIEW_BORDER_PX) / imgW,
-          (paneH - PAGE_VIEW_BORDER_PX) / imgH,
-        )
-      : 1;
-  pageLayoutCache = { paneW, paneH, imgW, imgH, fitScale };
-  return fitScale;
-}
-
-function applyPageImageSize(img, pane = els.pagePane) {
-  if (!img?.naturalWidth || !img.naturalHeight) return false;
-  pageZoomPercent = Math.max(PAGE_ZOOM_DEFAULT, pageZoomPercent);
-  const fitScale = getCachedFitScale(img, pane);
-  const scale = fitScale * (pageZoomPercent / PAGE_ZOOM_DEFAULT);
-  const w = Math.floor(img.naturalWidth * scale);
-  const h = Math.floor(img.naturalHeight * scale);
-  const nextW = `${w}px`;
-  const nextH = `${h}px`;
-  const unchanged = img.style.width === nextW && img.style.height === nextH;
-  if (!unchanged) {
-    img.style.width = nextW;
-    img.style.height = nextH;
-    img.style.maxWidth = "none";
-    img.style.maxHeight = "none";
-  }
-  img.dataset.layoutReady = "1";
-  return !unchanged;
-}
-
-function syncPageViewChrome(img) {
-  syncOverlayBadges(img);
-  updatePagePanePanCursor();
-  applyBboxVisibility();
-}
-
-function applyPageLayout(img, pane = els.pagePane) {
-  applyPageImageSize(img, pane);
-  syncPageViewChrome(img);
-}
-
-let pageLayoutFrame = 0;
-
-function refreshPageViewLayout() {
-  if (!els.pagePane) return;
-  cancelAnimationFrame(pageLayoutFrame);
-  pageLayoutFrame = requestAnimationFrame(() => {
-    pageLayoutFrame = 0;
-    const img = els.pagePane?.querySelector(".page-view img");
-    if (img?.naturalWidth) applyPageLayout(img);
-  });
-}
-
-function overlayBadgeLayout(svg, text, fontSizeUser) {
-  const padXUser = overlayUserLength(OVERLAY_BADGE_PAD_X);
-  const padYUser = overlayUserLength(OVERLAY_BADGE_PAD_Y);
-  const probe = document.createElementNS("http://www.w3.org/2000/svg", "text");
-  probe.setAttribute("class", "overlay-badge-label");
-  probe.setAttribute("font-size", String(fontSizeUser));
-  probe.setAttribute("font-weight", "700");
-  probe.setAttribute("text-anchor", "start");
-  probe.setAttribute("dominant-baseline", "text-before-edge");
-  probe.setAttribute("visibility", "hidden");
-  probe.textContent = String(text);
-  svg.appendChild(probe);
-
-  let width;
-  let height;
-  try {
-    const bbox = probe.getBBox();
-    width = bbox.width + padXUser * 2;
-    height = bbox.height + padYUser * 2;
-  } catch {
-    const label = String(text);
-    width = overlayUserLength(label.length * OVERLAY_BADGE_FONT_SIZE * 0.55 + OVERLAY_BADGE_PAD_X * 2);
-    height = overlayUserLength(OVERLAY_BADGE_FONT_SIZE * 1.1 + OVERLAY_BADGE_PAD_Y * 2);
-  }
-  probe.remove();
-  return { width, height };
-}
-
-function appendOverlayBadge(svg, anchorX, anchorY, text, { extraClass, elementId }) {
-  const fontSize = overlayUserLength(OVERLAY_BADGE_FONT_SIZE);
-  const { width, height } = overlayBadgeLayout(svg, text, fontSize);
-  const radius = overlayUserLength(OVERLAY_BADGE_RADIUS_SCREEN_PX);
-
-  const badge = document.createElementNS("http://www.w3.org/2000/svg", "g");
-  badge.setAttribute("class", `overlay-badge ${extraClass}`);
-  badge.setAttribute("data-element-id", elementId);
-
-  const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-  bg.setAttribute("class", "overlay-badge-bg");
-  bg.setAttribute("x", String(anchorX - width / 2));
-  bg.setAttribute("y", String(anchorY - height / 2));
-  bg.setAttribute("width", String(width));
-  bg.setAttribute("height", String(height));
-  bg.setAttribute("rx", String(radius));
-  bg.setAttribute("ry", String(radius));
-  badge.appendChild(bg);
-
-  const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
-  label.setAttribute("class", "overlay-badge-label");
-  label.setAttribute("x", String(anchorX));
-  label.setAttribute("y", String(anchorY));
-  label.setAttribute("font-size", String(fontSize));
-  label.textContent = String(text);
-  badge.appendChild(label);
-
-  svg.appendChild(badge);
-  return badge;
-}
-
-function syncOverlayBadges(img) {
-  const svg = img.parentElement?.querySelector("svg.overlay");
-  const meta = state?.pageViewOverlay;
-  if (!svg || !img.naturalWidth || !meta) return;
-
-  svg.querySelectorAll(".element-badge, .reading-order-badge").forEach((badge) => badge.remove());
-
-  const fontSize = overlayUserLength(OVERLAY_BADGE_FONT_SIZE);
-  const badgeGap = overlayUserLength(2);
-  const readingOrderByElementId = new Map();
-  if (showAllBboxes && showReadingOrder) {
-    for (const step of meta.readingOrderSteps ?? []) {
-      readingOrderByElementId.set(step.elementId, step);
-    }
-  }
-
-  const boxes = sortedOverlayBoxes(meta.boxes ?? []);
-
-  for (const b of boxes) {
-    const { x, y } = boxPixelRect(b, img);
-    let tagLayout = { width: 0 };
-    if (showAllBboxes && showLayoutBadges) {
-      tagLayout = overlayBadgeLayout(svg, b.tag, fontSize);
-      appendOverlayBadge(svg, x, y, b.tag, {
-        extraClass: `element-badge ${kindClassForTag(b.kind)}`,
-        elementId: b.elementId,
-      });
-    }
-
-    const step = readingOrderByElementId.get(b.elementId);
-    if (step) {
-      const orderText = String(step.order);
-      const orderLayout = overlayBadgeLayout(svg, orderText, fontSize);
-      const orderAnchorX = showAllBboxes && showLayoutBadges
-        ? x + tagLayout.width / 2 + badgeGap + orderLayout.width / 2
-        : x;
-      appendOverlayBadge(svg, orderAnchorX, y, orderText, {
-        extraClass: "reading-order-badge",
-        elementId: b.elementId,
-      });
-    }
-  }
-}
-
-function splitIntoSegments(root) {
-  const body = childElements(root).filter((el) => localName(el) !== "head");
-  /** @type {Element[][]} */
-  const segments = [[]];
-  for (const el of body) {
-    if (localName(el) === "page_break") {
-      segments.push([]);
-    } else {
-      segments[segments.length - 1].push(el);
-    }
-  }
-  return segments.length ? segments : [[]];
-}
-
-function segmentHasMarkup(segment) {
-  return segment.some((el) => el.nodeType === Node.ELEMENT_NODE);
-}
-
-function readDefaultResolution(head) {
-  const fallback = { width: 512, height: 512 };
-  if (!head) return fallback;
-  const dr = childElements(head).find((el) => localName(el) === "default_resolution");
-  if (!dr) return fallback;
-  const w = parseInt(dr.getAttribute("width") ?? "512", 10);
-  const h = parseInt(dr.getAttribute("height") ?? "512", 10);
-  return {
-    width: Number.isFinite(w) && w > 0 ? w : 512,
-    height: Number.isFinite(h) && h > 0 ? h : 512,
-  };
-}
-
-/** @returns {Map<Element, string>} */
-function assignElementIds(segment) {
-  const ids = new Map();
-  let counter = 0;
-  walkElements(segment, (el) => {
-    ids.set(el, `el-${counter++}`);
-  });
-  return ids;
-}
-
-/** @returns {Map<string, Element>} */
-function invertElementIds(elementIds) {
-  const idToElement = new Map();
-  for (const [el, id] of elementIds) idToElement.set(id, el);
-  return idToElement;
-}
-
-function isSemanticElement(el) {
-  return SEMANTIC_TAGS.has(localName(el));
-}
-
-function isVirtualTextHost(el) {
-  const tag = localName(el);
-  return tag === "ldiv" || CELL_CONTENT_TAGS.has(tag);
-}
-
-function xmlContains(target, ancestor) {
-  let node = target;
-  while (node) {
-    if (node === ancestor) return true;
-    node = node.parentNode;
-  }
-  return false;
-}
-
-function findListVirtualTextHost(list, target) {
-  const nodes = [...list.childNodes];
-  let i = skipContainerLevelHead(nodes, 0);
-  while (i < nodes.length) {
-    const node = nodes[i];
-    if (node.nodeType !== Node.ELEMENT_NODE || localName(node) !== "ldiv") {
-      i += 1;
-      continue;
-    }
-    const ldiv = node;
-    i += 1;
-    const end = skipUntilListItemBoundary(nodes, i);
-    if (target === ldiv || nodes.slice(i, end).some((n) => xmlContains(target, n))) {
-      return ldiv;
-    }
-    i = end;
-  }
-  return null;
-}
-
-function findTableVirtualTextHost(container, target) {
-  const nodes = [...container.childNodes];
-  let i = skipContainerLevelHead(nodes, 0);
-  while (i < nodes.length) {
-    const node = nodes[i];
-    if (node.nodeType !== Node.ELEMENT_NODE) {
-      i += 1;
-      continue;
-    }
-    const tag = localName(node);
-    if (tag === "nl" || CELL_SPAN_TAGS.has(tag) || !isCellToken(tag)) {
-      i += 1;
-      continue;
-    }
-    const cell = node;
-    i += 1;
-    const end = skipUntilCellBoundary(nodes, i);
-    if (target === cell || nodes.slice(i, end).some((n) => xmlContains(target, n))) {
-      return cell;
-    }
-    i = end;
-  }
-  return null;
-}
-
-function isListOrOtslContainer(el) {
-  const tag = localName(el);
-  return tag === "list" || OTSL_CONTAINER_TAGS.has(tag);
-}
-
-function findVirtualTextHost(xmlEl) {
-  let node = xmlEl;
-  while (node) {
-    const parent = node.parentElement;
-    if (!parent) return null;
-    const tag = localName(parent);
-    if (tag === "list") {
-      const host = findListVirtualTextHost(parent, xmlEl);
-      if (host) return host;
-    }
-    if (OTSL_CONTAINER_TAGS.has(tag)) {
-      const host = findTableVirtualTextHost(parent, xmlEl);
-      if (host) return host;
-    }
-    node = parent;
-  }
-  return null;
-}
-
-function resolveSelectionElement(xmlEl) {
-  if (!xmlEl) return null;
-  if (isSemanticElement(xmlEl) || isVirtualTextHost(xmlEl)) return xmlEl;
-
-  let node = xmlEl.parentElement;
-  while (node) {
-    const tag = localName(node);
-    if (tag === "doclang") break;
-    if (isSemanticElement(node) && !isListOrOtslContainer(node)) return node;
-    node = node.parentElement;
-  }
-
-  const virtualHost = findVirtualTextHost(xmlEl);
-  if (virtualHost) return virtualHost;
-
-  node = xmlEl.parentElement;
-  while (node) {
-    const tag = localName(node);
-    if (tag === "doclang") break;
-    if (isSemanticElement(node) || isVirtualTextHost(node)) return node;
-    node = node.parentElement;
-  }
-
-  return null;
-}
-
-function resolveSelectionElementId(rawElementId) {
-  if (!rawElementId || !state?.idToElement || !state.elementIds) return null;
-  const xmlEl = state.idToElement.get(rawElementId);
-  if (!xmlEl) return null;
-  const resolved = resolveSelectionElement(xmlEl);
-  return resolved ? state.elementIds.get(resolved) ?? null : null;
-}
-
-function resolveMarkupClickTarget(eventTarget) {
-  if (!state) return null;
-
-  const ghostText = eventTarget.closest(".markup-el-virtual-text");
-  if (ghostText?.hasAttribute("data-element-id")) {
-    return ghostText.getAttribute("data-element-id");
-  }
-
-  const markupEl = eventTarget.closest(".markup-el[data-element-id]");
-  if (!markupEl) return null;
-  return resolveSelectionElementId(markupEl.getAttribute("data-element-id"));
-}
-
-function resolveRenderedClickTarget(eventTarget) {
-  const ghostText = eventTarget.closest(".rendered-el-virtual-text");
-  if (ghostText?.hasAttribute("data-element-id")) {
-    return ghostText.getAttribute("data-element-id");
-  }
-
-  const renderedEl = eventTarget.closest(".rendered-el[data-element-id]");
-  if (!renderedEl) return null;
-  return resolveSelectionElementId(renderedEl.getAttribute("data-element-id"));
-}
-
-/** @returns {{ kind: string, tag: string, elementId: string, layer: string, x0: number, y0: number, x1: number, y1: number, resW: number, resH: number }[]} */
-function collectBoundingBoxes(segment, defaultResolution, elementIds) {
-  /** @type {{ kind: string, tag: string, elementId: string, layer: string, x0: number, y0: number, x1: number, y1: number, resW: number, resH: number }[]} */
-  const boxes = [];
-  walkElements(segment, (el) => {
-    const locs = headLocations(el);
-    if (locs.length !== 4) return;
-    const elementId = elementIds.get(el);
-    if (!elementId) return;
-    pushBoundingBox(
-      boxes,
-      locs,
-      defaultResolution,
-      localName(el),
-      elementLabel(el),
-      elementId,
-      elementLayer(el),
-    );
-  });
-  walkElements(segment, (el) => {
-    const tag = localName(el);
-    if (tag === "list") collectListVirtualTextBoxes(el, defaultResolution, boxes, elementIds);
-    else if (tag === "table" || tag === "index" || tag === "tabular") {
-      collectTableVirtualTextBoxes(el, defaultResolution, boxes, elementIds);
-    }
-  });
-  return boxes;
-}
-
-/** @returns {{ captionBox: object, hostBox: object, captionElementId: string, hostElementId: string }[]} */
-function collectCaptionLinks(segment, elementIds, boxes) {
-  const boxById = new Map(boxes.map((b) => [b.elementId, b]));
-  /** @type {{ captionBox: object, hostBox: object, captionElementId: string, hostElementId: string }[]} */
-  const links = [];
-  walkElements(segment, (el) => {
-    if (localName(el) !== "caption") return;
-    const captionId = elementIds.get(el);
-    const captionBox = captionId ? boxById.get(captionId) : null;
-    if (!captionBox) return;
-    const host = el.parentElement;
-    if (!host || headLocations(host).length !== 4) return;
-    const hostId = elementIds.get(host);
-    const hostBox = hostId ? boxById.get(hostId) : null;
-    if (!hostBox) return;
-    links.push({
-      captionBox,
-      hostBox,
-      captionElementId: captionId,
-      hostElementId: hostId,
-    });
-  });
-  return links;
-}
-
-/** @returns {{ fromBox: object, toBox: object, fromElementId: string, toElementId: string }[]} */
-function collectXrefLinks(segment, elementIds, boxes) {
-  const boxById = new Map(boxes.map((b) => [b.elementId, b]));
-  /** @type {Map<string, { elementId: string, box: object }[]>} */
-  const threadsById = new Map();
-
-  walkElements(segment, (el) => {
-    const elementId = elementIds.get(el);
-    const box = elementId ? boxById.get(elementId) : null;
-    if (!box) return;
-    for (const thread of childElements(el)) {
-      if (localName(thread) !== "thread") continue;
-      const threadId = thread.getAttribute("thread_id");
-      if (!threadId) continue;
-      if (!threadsById.has(threadId)) threadsById.set(threadId, []);
-      threadsById.get(threadId).push({ elementId, box });
-    }
-  });
-
-  /** @type {{ fromBox: object, toBox: object, fromElementId: string, toElementId: string }[]} */
-  const links = [];
-  walkElements(segment, (el) => {
-    const xrefs = childElements(el).filter((c) => localName(c) === "xref");
-    if (!xrefs.length) return;
-
-    const from = findNearestLocatedBox(el, elementIds, boxById);
-    if (!from) return;
-
-    for (const xref of xrefs) {
-      const threadId = xref.getAttribute("thread_id");
-      if (!threadId) continue;
-      for (const { elementId: toId, box: toBox } of threadsById.get(threadId) ?? []) {
-        if (toId === from.elementId) continue;
-        links.push({
-          fromBox: from.box,
-          toBox,
-          fromElementId: from.elementId,
-          toElementId: toId,
-        });
-      }
-    }
-  });
-  return links;
-}
-
-/** @returns {{ fromBox: object, toBox: object | null, fromElementId: string, toElementId: string | null, threadId: string, targetCorner?: "tl" | "br" }[]} */
-function collectFragmentLinks(segment, elementIds, boxes, pageNum, threadPagesById) {
-  const boxById = new Map(boxes.map((b) => [b.elementId, b]));
-  /** @type {Map<string, { elementId: string, box: object }[]>} */
-  const onPage = new Map();
-
-  walkElements(segment, (el) => {
-    const thread = firstHeadChild(el, "thread");
-    const threadId = thread?.getAttribute("thread_id");
-    if (!threadId) return;
-    const elementId = elementIds.get(el);
-    const box = elementId ? boxById.get(elementId) : null;
-    if (!box) return;
-    if (!onPage.has(threadId)) onPage.set(threadId, []);
-    onPage.get(threadId).push({ elementId, box });
-  });
-
-  const segmentEls = new Set();
-  walkElements(segment, (el) => segmentEls.add(el));
-
-  /** @type {{ fromBox: object, toBox: object | null, fromElementId: string, toElementId: string | null, threadId: string, targetCorner?: "tl" | "br" }[]} */
-  const links = [];
-
-  for (const [threadId, members] of onPage) {
-    if (members.length >= 2) {
-      for (let i = 0; i < members.length - 1; i += 1) {
-        links.push({
-          fromBox: members[i].box,
-          toBox: members[i + 1].box,
-          fromElementId: members[i].elementId,
-          toElementId: members[i + 1].elementId,
-          threadId,
-        });
-      }
-      continue;
-    }
-
-    if (members.length !== 1) continue;
-    const threadPages = threadPagesById.get(threadId);
-    if (!threadPages) continue;
-    const hasPrevious = [...threadPages].some((p) => p < pageNum);
-    const hasFollowing = [...threadPages].some((p) => p > pageNum);
-    if (!hasPrevious && !hasFollowing) continue;
-
-    const base = {
-      fromBox: members[0].box,
-      toBox: null,
-      fromElementId: members[0].elementId,
-      toElementId: null,
-      threadId,
-    };
-    if (hasPrevious) links.push({ ...base, targetCorner: "tl" });
-    if (hasFollowing) links.push({ ...base, targetCorner: "br" });
-  }
-
-  return links;
-}
-
-function isReadingOrderUnit(el) {
-  const tag = localName(el);
-  if (tag === "caption") return true;
-  if (HEAD_TAGS.has(tag) || tag === "location" || tag === "h_thread" || tag === "page_break") return false;
-  if (tag === "nl" || CELL_SPAN_TAGS.has(tag)) return false;
-  if (RENDER_FORMAT_TAGS.has(tag) || tag === "src" || tag === "checkbox") return false;
-  return true;
-}
-
-/** @returns {Map<string, Element[]>} */
-function buildThreadsById(docRoot) {
-  const map = new Map();
-  const roots = childElements(docRoot).filter((el) => localName(el) !== "head");
-  walkElements(roots, (el) => {
-    for (const child of childElements(el)) {
-      if (localName(child) !== "thread") continue;
-      const threadId = child.getAttribute("thread_id");
-      if (!threadId) continue;
-      if (!map.has(threadId)) map.set(threadId, []);
-      map.get(threadId).push(el);
-    }
-  });
-  return map;
-}
-
-/** @returns {Map<Element, number>} */
-function buildElementPageMap(segments) {
-  const elementPage = new Map();
-  segments.forEach((segment, idx) => {
-    const pageNum = idx + 1;
-    walkElements(segment, (el) => elementPage.set(el, pageNum));
-  });
-  return elementPage;
-}
-
-/** @returns {Map<string, Set<number>>} */
-function buildThreadPagesById(docRoot, elementPageByEl) {
-  /** @type {Map<string, Set<number>>} */
-  const threadPagesById = new Map();
-  for (const [threadId, elements] of buildThreadsById(docRoot)) {
-    const pages = new Set();
-    for (const el of elements) {
-      const page = elementPageByEl.get(el);
-      if (page) pages.add(page);
-    }
-    if (pages.size) threadPagesById.set(threadId, pages);
-  }
-  return threadPagesById;
-}
-
-/** @returns {Map<Element, { prev: Element | null, next: Element | null }>} */
-function buildThreadNavByElement(docRoot) {
-  /** @type {Map<Element, { prev: Element | null, next: Element | null }>} */
-  const nav = new Map();
-  for (const [, elements] of buildThreadsById(docRoot)) {
-    for (let i = 0; i < elements.length; i += 1) {
-      nav.set(elements[i], {
-        prev: i > 0 ? elements[i - 1] : null,
-        next: i < elements.length - 1 ? elements[i + 1] : null,
-      });
-    }
-  }
-  return nav;
-}
-
-/** @returns {{ elementId: string, box: object, hasPrev: boolean, hasNext: boolean }[]} */
-function collectFragmentNavItems(segment, elementIds, boxes) {
-  if (!state?.threadNavByElement) return [];
-  const boxById = new Map(boxes.map((b) => [b.elementId, b]));
-  /** @type {{ elementId: string, box: object, hasPrev: boolean, hasNext: boolean }[]} */
-  const items = [];
-  walkElements(segment, (el) => {
-    const nav = state.threadNavByElement.get(el);
-    if (!nav || (!nav.prev && !nav.next)) return;
-    const elementId = elementIds.get(el);
-    const box = elementId ? boxById.get(elementId) : null;
-    if (!box) return;
-    items.push({
-      elementId,
-      box,
-      hasPrev: nav.prev !== null,
-      hasNext: nav.next !== null,
-    });
-  });
-  return items;
-}
-
-function findElementIdOnPage(el) {
-  if (!state?.elementIds) return null;
-  for (const [node, id] of state.elementIds) {
-    if (node === el) return id;
-  }
-  return null;
-}
-
-function navigateThreadFragment(elementId, direction) {
-  const el = state?.idToElement?.get(elementId);
-  if (!el) return;
-  const nav = state?.threadNavByElement?.get(el);
-  if (!nav) return;
-  const target = direction === "prev" ? nav.prev : nav.next;
-  if (!target) return;
-  const page = state.elementPageByEl.get(target);
-  if (!page) return;
-  if (page === state.currentPage) {
-    const id = findElementIdOnPage(target);
-    if (id) selectElement(id);
-    return;
-  }
-  state.pendingSelectElement = target;
-  goToPage(page);
-}
-
-/** @returns {Element[]} */
-function computeReadingOrder(docRoot) {
-  const bodyChildren = childElements(docRoot).filter((el) => localName(el) !== "head");
-  const threadsById = buildThreadsById(docRoot);
-  const consumedViaXref = new Set();
-  /** @type {Element[]} */
-  const order = [];
-
-  function record(el) {
-    if (!isReadingOrderUnit(el)) return;
-    order.push(el);
-  }
-
-  function consumeThread(threadId) {
-    for (const target of threadsById.get(threadId) ?? []) {
-      if (consumedViaXref.has(target)) continue;
-      consumedViaXref.add(target);
-      visitElement(target);
-    }
-  }
-
-  function walkChildren(parent) {
-    for (const child of parent.childNodes) {
-      if (child.nodeType !== Node.ELEMENT_NODE) continue;
-      const tag = localName(child);
-      if (tag === "xref") {
-        const threadId = child.getAttribute("thread_id");
-        if (threadId) consumeThread(threadId);
-        continue;
-      }
-      if (tag === "page_break") continue;
-      visitElement(child);
-    }
-  }
-
-  function visitElement(el) {
-    record(el);
-    walkChildren(el);
-  }
-
-  for (const el of bodyChildren) {
-    if (localName(el) === "page_break") continue;
-    if (consumedViaXref.has(el)) continue;
-    visitElement(el);
-  }
-
-  return order;
-}
-
-function hasVirtualTextLocations(el) {
-  const parent = el.parentElement;
-  if (!parent) return false;
-  const nodes = [...parent.childNodes];
-  const idx = nodes.indexOf(el);
-  if (idx < 0) return false;
-  return parseElementHeadAt(nodes, idx + 1) !== null;
-}
-
-function isVirtualTextOverlayUnit(el) {
-  if (headLocations(el).length === 4) return false;
-  if (!hasVirtualTextLocations(el)) return false;
-  const tag = localName(el);
-  if (tag === "ldiv" && localName(el.parentElement) === "list") return true;
-  if (isCellToken(tag) && tag !== "nl" && !CELL_SPAN_TAGS.has(tag)) {
-    return OTSL_CONTAINER_TAGS.has(localName(el.parentElement));
-  }
-  return false;
-}
-
-function isPictureContentElement(el) {
-  if (!el) return false;
-  const tag = localName(el);
-  if (tag === "picture" || tag === "caption") return false;
-  let node = el.parentElement;
-  while (node) {
-    if (localName(node) === "picture") return true;
-    node = node.parentElement;
-  }
-  return false;
-}
-
-function isTableContentElement(el) {
-  if (!el) return false;
-  const tag = localName(el);
-  if (OTSL_CONTAINER_TAGS.has(tag) || tag === "caption") return false;
-  let node = el.parentElement;
-  while (node) {
-    if (OTSL_CONTAINER_TAGS.has(localName(node))) return true;
-    node = node.parentElement;
-  }
-  return false;
-}
-
-function isPictureOrTableContentElement(el) {
-  return isPictureContentElement(el) || isTableContentElement(el);
-}
-
-function isReadingOrderOverlayUnit(el) {
-  if (!isReadingOrderUnit(el)) return false;
-  if (isPictureOrTableContentElement(el)) return false;
-  if (headLocations(el).length === 4) return true;
-  return isVirtualTextOverlayUnit(el);
-}
-
-/** @returns {Map<Element, number>} */
-function computeReadingOrderDisplayNumbers(readingOrder) {
-  const numbers = new Map();
-  let n = 0;
-  for (const el of readingOrder) {
-    if (!isReadingOrderOverlayUnit(el)) continue;
-    n += 1;
-    numbers.set(el, n);
-  }
-  return numbers;
-}
-
-/** @returns {{ order: number, box: object, elementId: string }[]} */
-function collectReadingOrderSteps(
-  segment,
-  elementIds,
-  boxes,
-  readingOrder,
-  globalNumbering = true,
-  displayNumbers = null,
-) {
-  const boxById = new Map(boxes.map((b) => [b.elementId, b]));
-  /** @type {{ order: number, box: object, elementId: string }[]} */
-  const steps = [];
-  let pageOrder = 0;
-
-  readingOrder.forEach((el) => {
-    if (isPictureOrTableContentElement(el)) return;
-    const elementId = elementIds.get(el);
-    if (!elementId) return;
-    const box = boxById.get(elementId);
-    if (!box) return;
-    pageOrder += 1;
-    steps.push({
-      order: globalNumbering ? (displayNumbers?.get(el) ?? pageOrder) : pageOrder,
-      box,
-      elementId,
-    });
-  });
-
-  return steps;
-}
-
-function pushBoundingBox(boxes, locs, defaultResolution, kind, tag, elementId, layer = "body") {
-  const [x0el, y0el, x1el, y1el] = locs;
-  const resW = locationResolution(x0el, defaultResolution.width);
-  const resH = locationResolution(y0el, defaultResolution.height);
-  boxes.push({
-    kind,
-    tag,
-    elementId,
-    layer,
-    x0: parseInt(x0el.getAttribute("value") ?? "0", 10),
-    y0: parseInt(y0el.getAttribute("value") ?? "0", 10),
-    x1: parseInt(x1el.getAttribute("value") ?? "0", 10),
-    y1: parseInt(y1el.getAttribute("value") ?? "0", 10),
-    resW,
-    resH,
-  });
-}
-
-function collectListVirtualTextBoxes(list, defaultResolution, boxes, elementIds) {
-  const nodes = [...list.childNodes];
-  let i = skipContainerLevelHead(nodes, 0);
-  while (i < nodes.length) {
-    const node = nodes[i];
-    if (node.nodeType !== Node.ELEMENT_NODE || localName(node) !== "ldiv") {
-      i += 1;
-      continue;
-    }
-    i += 1;
-    const head = parseElementHeadAt(nodes, i);
-    if (head) {
-      const elementId = elementIds.get(node);
-      if (elementId) {
-        pushBoundingBox(boxes, head.locs, defaultResolution, "text", "text", elementId, elementLayer(node));
-      }
-      i = head.nextIndex;
-    }
-    i = skipUntilListItemBoundary(nodes, i);
-  }
-}
-
-function collectTableVirtualTextBoxes(container, defaultResolution, boxes, elementIds) {
-  const nodes = [...container.childNodes];
-  let i = skipContainerLevelHead(nodes, 0);
-  while (i < nodes.length) {
-    const node = nodes[i];
-    if (node.nodeType !== Node.ELEMENT_NODE) {
-      i += 1;
-      continue;
-    }
-    const tag = localName(node);
-    if (!isCellToken(tag)) {
-      i += 1;
-      continue;
-    }
-    if (tag === "nl") {
-      i += 1;
-      continue;
-    }
-    i += 1;
-    const head = parseElementHeadAt(nodes, i);
-    if (head) {
-      const elementId = elementIds.get(node);
-      if (elementId) {
-        pushBoundingBox(boxes, head.locs, defaultResolution, "text", "text", elementId, elementLayer(node));
-      }
-      i = head.nextIndex;
-    }
-    i = skipUntilCellBoundary(nodes, i);
-  }
-}
-
-function skipContainerLevelHead(nodes, startIdx) {
-  let i = startIdx;
-  while (i < nodes.length) {
-    const node = nodes[i];
-    if (node.nodeType !== Node.ELEMENT_NODE) {
-      i += 1;
-      continue;
-    }
-    const tag = localName(node);
-    if (tag === "ldiv" || isCellToken(tag)) break;
-    if (HEAD_TAGS.has(tag) || tag === "location") {
-      i += 1;
-      continue;
-    }
-    break;
-  }
-  return i;
-}
-
-function skipUntilListItemBoundary(nodes, startIdx) {
-  let i = startIdx;
-  while (i < nodes.length) {
-    const node = nodes[i];
-    if (node.nodeType === Node.ELEMENT_NODE && localName(node) === "ldiv") break;
-    i += 1;
-  }
-  return i;
-}
-
-function skipUntilCellBoundary(nodes, startIdx) {
-  let i = startIdx;
-  while (i < nodes.length) {
-    const node = nodes[i];
-    if (node.nodeType === Node.ELEMENT_NODE && isCellToken(localName(node))) break;
-    i += 1;
-  }
-  return i;
-}
-
-function isCellToken(tag) {
-  return CELL_TOKENS.has(tag);
-}
-
-/** @returns {{ locs: Element[], nextIndex: number } | null} */
-function parseElementHeadAt(nodes, startIdx) {
-  const locs = [];
-  let i = startIdx;
-  while (i < nodes.length) {
-    const node = nodes[i];
-    if (node.nodeType !== Node.ELEMENT_NODE) {
-      i += 1;
-      continue;
-    }
-    const tag = localName(node);
-    if (tag === "location") {
-      locs.push(node);
-      i += 1;
-      if (locs.length === 4) return { locs, nextIndex: i };
-      continue;
-    }
-    if (locs.length) break;
-    if (HEAD_TAGS.has(tag)) {
-      i += 1;
-      continue;
-    }
-    break;
-  }
-  return locs.length === 4 ? { locs, nextIndex: i } : null;
-}
-
-function walkElements(nodes, fn) {
-  for (const node of nodes) {
-    if (node.nodeType !== Node.ELEMENT_NODE) continue;
-    fn(node);
-    walkElements(childElements(node), fn);
-  }
-}
-
-function headLocations(el) {
-  return parseElementHeadAt([...el.childNodes], 0)?.locs ?? [];
-}
-
-/** @returns {{ elementId: string, box: object } | null} */
-function findNearestLocatedBox(el, elementIds, boxById) {
-  let node = el;
-  while (node) {
-    const elementId = elementIds.get(node);
-    const box = elementId ? boxById.get(elementId) : null;
-    if (box) return { elementId, box };
-    if (localName(node) === "doclang") break;
-    node = node.parentElement;
-  }
-  return null;
-}
-
-function locationResolution(el, axisDefault) {
-  const r = parseInt(el.getAttribute("resolution") ?? String(axisDefault), 10);
-  return Number.isFinite(r) && r > 0 ? r : axisDefault;
-}
-
-function headingLevel(el) {
-  return Math.min(Math.max(parseInt(el.getAttribute("level") ?? "1", 10) || 1, 1), 6);
-}
-
-function elementLabel(el) {
-  if (isVirtualTextOverlayUnit(el)) return "text";
-  const tag = localName(el);
-  if (tag === "heading" || tag === "field_heading") return `${tag}[${headingLevel(el)}]`;
-  const level = el.getAttribute("level");
-  if (level) return `${tag}[${level}]`;
-  const cls = el.getAttribute("class");
-  if (cls) return `${tag}.${cls}`;
-  return tag;
-}
-
-function elementKindKey(kind) {
-  if (kind.startsWith("field_") || kind === "key" || kind === "value" || kind === "hint") return "field";
-  if (kind === "tabular") return "table";
-  const known = new Set([
-    "text", "heading", "list", "ldiv", "table", "index", "formula", "code", "picture",
-    "group", "footnote", "page_header", "page_footer", "caption",
-  ]);
-  return known.has(kind) ? kind : "default";
-}
-
-function kindClassForTag(tag) {
-  return `kind-${elementKindKey(tag)}`;
-}
-
-function bboxClassForKind(kind) {
-  return elementKindKey(kind);
-}
-
-function boxPixelRect(b, img) {
-  const x = (b.x0 / b.resW) * img.naturalWidth;
-  const y = (b.y0 / b.resH) * img.naturalHeight;
-  const w = ((b.x1 - b.x0) / b.resW) * img.naturalWidth;
-  const h = ((b.y1 - b.y0) / b.resH) * img.naturalHeight;
-  return { x, y, w, h, area: w * h };
-}
-
-function overlayBoxPaintPriority(box) {
-  if (box.kind === "text") return 0;
-  if (box.kind === "list" || box.kind === "table" || box.kind === "index" || box.kind === "tabular") {
-    return 2;
-  }
-  return 1;
-}
-
-function overlayLayerPriority(layer) {
-  if (layer === "background") return 0;
-  if (layer === "furniture") return 1;
-  return 2;
-}
-
-function compareOverlayBoxPaintOrder(a, b) {
-  const byLayer = overlayLayerPriority(a.layer ?? "body") - overlayLayerPriority(b.layer ?? "body");
-  if (byLayer !== 0) return byLayer;
-  const byPriority = overlayBoxPaintPriority(a) - overlayBoxPaintPriority(b);
-  if (byPriority !== 0) return byPriority;
-  if (selectedElementId) {
-    const aSelected = a.elementId === selectedElementId;
-    const bSelected = b.elementId === selectedElementId;
-    if (aSelected !== bSelected) return aSelected ? 1 : -1;
-  }
-  return 0;
-}
-
-function sortedOverlayBoxes(boxes) {
-  return [...boxes].sort(compareOverlayBoxPaintOrder);
-}
-
-function boxCenter(rect) {
-  return { x: rect.x + rect.w / 2, y: rect.y + rect.h / 2 };
-}
-
-function ensureArrowMarker(defs, markerId) {
-  if (defs.querySelector(`#${markerId}`)) return;
-  const marker = document.createElementNS("http://www.w3.org/2000/svg", "marker");
-  marker.setAttribute("id", markerId);
-  marker.setAttribute("viewBox", "0 0 6 6");
-  marker.setAttribute("refX", "6");
-  marker.setAttribute("refY", "3");
-  marker.setAttribute("markerWidth", "5");
-  marker.setAttribute("markerHeight", "5");
-  marker.setAttribute("orient", "auto");
-  const arrowPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  arrowPath.setAttribute("d", "M0,0 L6,3 L0,6 Z");
-  arrowPath.setAttribute("fill", "currentColor");
-  marker.appendChild(arrowPath);
-  defs.appendChild(marker);
-}
-
-function alignDashedLineToEnd(line, start, end) {
-  const dash = 6;
-  const gap = 4;
-  const period = dash + gap;
-  const len = Math.hypot(end.x - start.x, end.y - start.y);
-  if (!len) return;
-  line.setAttribute("stroke-dasharray", `${dash} ${gap}`);
-  const offset = len % period;
-  if (offset > 0.01) line.setAttribute("stroke-dashoffset", String(offset));
-}
-
-function ensureLayerHatchPatterns(defs) {
-  if (defs.querySelector("#layer-hatch")) return;
-
-  const pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
-  pattern.setAttribute("id", "layer-hatch");
-  pattern.setAttribute("width", "16");
-  pattern.setAttribute("height", "16");
-  pattern.setAttribute("patternUnits", "userSpaceOnUse");
-  pattern.setAttribute("patternTransform", "rotate(45 8 8)");
-  const stripe = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-  stripe.setAttribute("class", "layer-hatch-stripe");
-  stripe.setAttribute("x", "10");
-  stripe.setAttribute("y", "-4");
-  stripe.setAttribute("width", "6");
-  stripe.setAttribute("height", "24");
-  pattern.appendChild(stripe);
-  defs.appendChild(pattern);
-}
-
-function ensureOverlayDefs(svg) {
-  let defs = svg.querySelector("defs");
-  if (!defs) {
-    defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-    svg.insertBefore(defs, svg.firstChild);
-  }
-  return defs;
-}
-
-function appendOverlayLinks(svg, img, links, { markerId, linkClass, fromIdAttr, toIdAttr }) {
-  if (!links.length) return;
-
-  const defs = ensureOverlayDefs(svg);
-  ensureArrowMarker(defs, markerId);
-
-  for (const link of links) {
-    const from = boxPixelRect(link.fromBox ?? link.captionBox, img);
-    const to = boxPixelRect(link.toBox ?? link.hostBox, img);
-    const start = boxCenter(from);
-    const end = boxCenter(to);
-
-    const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
-    line.setAttribute("class", linkClass);
-    line.setAttribute("x1", String(start.x));
-    line.setAttribute("y1", String(start.y));
-    line.setAttribute("x2", String(end.x));
-    line.setAttribute("y2", String(end.y));
-    line.setAttribute("marker-end", `url(#${markerId})`);
-    line.setAttribute(fromIdAttr, link.fromElementId ?? link.captionElementId);
-    line.setAttribute(toIdAttr, link.toElementId ?? link.hostElementId);
-    svg.appendChild(line);
-  }
-}
-
-function appendCaptionLinks(svg, img, captionLinks) {
-  appendOverlayLinks(svg, img, captionLinks, {
-    markerId: "caption-arrowhead",
-    linkClass: "caption-link",
-    fromIdAttr: "data-caption-id",
-    toIdAttr: "data-host-id",
-  });
-}
-
-function appendXrefLinks(svg, img, xrefLinks) {
-  appendOverlayLinks(svg, img, xrefLinks, {
-    markerId: "xref-arrowhead",
-    linkClass: "xref-link",
-    fromIdAttr: "data-xref-from-id",
-    toIdAttr: "data-xref-to-id",
-  });
-}
-
-function docPointToPixel(xDoc, yDoc, resW, resH, img) {
-  return {
-    x: (xDoc / resW) * img.naturalWidth,
-    y: (yDoc / resH) * img.naturalHeight,
-  };
-}
-
-function pageCornerTarget(img, defaultResolution, corner) {
-  const { width: resW, height: resH } = defaultResolution;
-  const inset = overlayUserLength(5);
-  const tl = docPointToPixel(0, 0, resW, resH, img);
-  const br = docPointToPixel(resW, resH, resW, resH, img);
-  if (corner === "tl") {
-    return {
-      x: Math.min(tl.x + inset, br.x - inset),
-      y: Math.min(tl.y + inset, br.y - inset),
-    };
-  }
-  return {
-    x: Math.max(br.x - inset, tl.x + inset),
-    y: Math.max(br.y - inset, tl.y + inset),
-  };
-}
-
-function elementThreadId(el) {
-  return firstHeadChild(el, "thread")?.getAttribute("thread_id") ?? null;
-}
-
-/** @returns {Set<string>} */
-function fragmentPeerElementIds(elementId) {
-  const peers = new Set();
-  if (!elementId || !state?.elementIds || !state.idToElement) return peers;
-  const el = state.idToElement.get(elementId);
-  const threadId = el ? elementThreadId(el) : null;
-  if (!threadId) return peers;
-  for (const [node, id] of state.elementIds) {
-    if (elementThreadId(node) === threadId) peers.add(id);
-  }
-  return peers;
-}
-
-function isFragmentLinkRelevant(linkEl, peerIds) {
-  const fromId = linkEl.getAttribute("data-fragment-from-id");
-  const toId = linkEl.getAttribute("data-fragment-to-id");
-  if (fromId && peerIds.has(fromId)) return true;
-  if (toId && peerIds.has(toId)) return true;
-  return false;
-}
-
-function appendFragmentLinks(svg, img, links, defaultResolution) {
-  if (!links.length) return;
-
-  const defs = ensureOverlayDefs(svg);
-  ensureArrowMarker(defs, "fragment-arrowhead");
-  const fontSize = overlayUserLength(OVERLAY_BADGE_FONT_SIZE);
-
-  for (const link of links) {
-    const fromRect = boxPixelRect(link.fromBox, img);
-
-    const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
-    group.setAttribute("class", "fragment-link");
-    group.setAttribute("data-thread-id", link.threadId);
-    group.setAttribute("data-fragment-from-id", link.fromElementId);
-    if (link.toElementId) group.setAttribute("data-fragment-to-id", link.toElementId);
-
-    let labelAt;
-    if (link.toBox) {
-      const toRect = boxPixelRect(link.toBox, img);
-      const start = boxCenter(fromRect);
-      const end = boxCenter(toRect);
-
-      const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
-      line.setAttribute("class", "fragment-link-path fragment-link-path-dashed");
-      line.setAttribute("x1", String(start.x));
-      line.setAttribute("y1", String(start.y));
-      line.setAttribute("x2", String(end.x));
-      line.setAttribute("y2", String(end.y));
-      line.setAttribute("marker-end", "url(#fragment-arrowhead)");
-      alignDashedLineToEnd(line, start, end);
-      group.appendChild(line);
-      labelAt = { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };
-    } else {
-      const corner = link.targetCorner ?? "br";
-      const cornerPoint = pageCornerTarget(img, defaultResolution, corner);
-      const elementAnchor = boxCenter(fromRect);
-      const incoming = corner === "tl";
-      const start = incoming ? cornerPoint : elementAnchor;
-      const end = incoming ? elementAnchor : cornerPoint;
-
-      const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
-      line.setAttribute("class", "fragment-link-path fragment-link-path-dashed");
-      line.setAttribute("x1", String(start.x));
-      line.setAttribute("y1", String(start.y));
-      line.setAttribute("x2", String(end.x));
-      line.setAttribute("y2", String(end.y));
-      line.setAttribute("marker-end", "url(#fragment-arrowhead)");
-      alignDashedLineToEnd(line, start, end);
-      group.appendChild(line);
-      labelAt = { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };
-    }
-
-    const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
-    text.setAttribute("class", "fragment-link-label");
-    text.setAttribute("x", String(labelAt.x));
-    text.setAttribute("y", String(labelAt.y));
-    text.setAttribute("font-size", String(fontSize));
-    text.textContent = link.toBox ? FRAGMENT_LINK_LABEL_SAME_PAGE : FRAGMENT_LINK_LABEL_CROSS_PAGE;
-    group.appendChild(text);
-
-    svg.appendChild(group);
-  }
-}
-
-function appendFragmentNavButtons(svg, img, items) {
-  if (!items.length) return;
-
-  const btnSize = overlayUserLength(13 * 1.5);
-  const gap = overlayUserLength(2);
-  const inset = overlayUserLength(3);
-  const fontSize = overlayUserLength(10 * 1.5);
-  const radius = overlayUserLength(2 * 1.5);
-
-  for (const item of items) {
-    const { x, y, w, h } = boxPixelRect(item.box, img);
-    const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
-    group.setAttribute("class", "fragment-nav");
-    group.setAttribute("data-element-id", item.elementId);
-
-    const rowY = y + h - inset - btnSize;
-    const nextX = x + w - inset - btnSize;
-    const prevX = nextX - gap - btnSize;
-
-    appendFragmentNavButton(group, prevX, rowY, btnSize, radius, fontSize, "prev", "‹", item.hasPrev);
-    appendFragmentNavButton(group, nextX, rowY, btnSize, radius, fontSize, "next", "›", item.hasNext);
-
-    svg.appendChild(group);
-  }
-}
-
-function appendFragmentNavButton(group, x, y, size, radius, fontSize, direction, label, enabled) {
-  const btn = document.createElementNS("http://www.w3.org/2000/svg", "g");
-  btn.setAttribute("class", `fragment-nav-btn fragment-nav-btn-${direction}${enabled ? "" : " fragment-nav-btn-disabled"}`);
-  btn.setAttribute("data-nav", direction);
-  if (enabled) {
-    btn.setAttribute("role", "button");
-    btn.setAttribute(
-      "aria-label",
-      direction === "prev" ? FRAGMENT_NAV_HINT_PREV : FRAGMENT_NAV_HINT_NEXT,
-    );
-  }
-
-  const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-  bg.setAttribute("class", "fragment-nav-btn-bg");
-  bg.setAttribute("x", String(x));
-  bg.setAttribute("y", String(y));
-  bg.setAttribute("width", String(size));
-  bg.setAttribute("height", String(size));
-  bg.setAttribute("rx", String(radius));
-  bg.setAttribute("ry", String(radius));
-  btn.appendChild(bg);
-
-  const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
-  text.setAttribute("class", "fragment-nav-btn-label");
-  text.setAttribute("x", String(x + size / 2));
-  text.setAttribute("y", String(y + size / 2));
-  text.setAttribute("font-size", String(fontSize));
-  text.textContent = label;
-  btn.appendChild(text);
-
-  group.appendChild(btn);
-}
-
-function appendReadingOrderOverlay(svg, img, steps) {
-  if (!steps.length) return;
-
-  if (steps.length >= 2) {
-    const defs = ensureOverlayDefs(svg);
-    ensureArrowMarker(defs, "reading-order-arrowhead");
-
-    for (let i = 0; i < steps.length - 1; i += 1) {
-      const from = boxPixelRect(steps[i].box, img);
-      const to = boxPixelRect(steps[i + 1].box, img);
-      const start = boxCenter(from);
-      const end = boxCenter(to);
-
-      const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
-      line.setAttribute("class", "reading-order-step");
-      line.setAttribute("x1", String(start.x));
-      line.setAttribute("y1", String(start.y));
-      line.setAttribute("x2", String(end.x));
-      line.setAttribute("y2", String(end.y));
-      line.setAttribute("marker-end", "url(#reading-order-arrowhead)");
-      svg.appendChild(line);
-    }
-  }
-}
-
-function imageCoordsFromEvent(svg, evt) {
-  const pt = svg.createSVGPoint();
-  pt.x = evt.clientX;
-  pt.y = evt.clientY;
-  const ctm = svg.getScreenCTM()?.inverse();
-  if (!ctm) return null;
-  const p = pt.matrixTransform(ctm);
-  return { x: p.x, y: p.y };
-}
-
-function hitTestBoxes(boxes, img, x, y) {
-  let best = null;
-  let bestArea = Infinity;
-  for (const b of boxes) {
-    const { x: bx, y: by, w, h, area } = boxPixelRect(b, img);
-    if (x >= bx && x <= bx + w && y >= by && y <= by + h && area < bestArea) {
-      best = b;
-      bestArea = area;
-    }
-  }
-  return best;
-}
-
-function buildOverlay(img, boxes, captionLinks = [], xrefLinks = [], readingOrderSteps = [], fragmentLinks = [], fragmentNavItems = [], defaultResolution = { width: 512, height: 512 }) {
-  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg.classList.add("overlay");
-  svg.setAttribute("viewBox", `0 0 ${img.naturalWidth} ${img.naturalHeight}`);
-  svg.setAttribute("overflow", "hidden");
-
-  appendCaptionLinks(svg, img, captionLinks);
-  appendXrefLinks(svg, img, xrefLinks);
-  appendFragmentLinks(svg, img, fragmentLinks, defaultResolution);
-  appendReadingOrderOverlay(svg, img, readingOrderSteps);
-
-  const defs = ensureOverlayDefs(svg);
-  ensureLayerHatchPatterns(defs);
-
-  for (const b of sortedOverlayBoxes(boxes)) {
-    const { x, y, w, h } = boxPixelRect(b, img);
-    const cls = bboxClassForKind(b.kind);
-    const kindClass = kindClassForTag(b.kind);
-    const layerClass = layerClassForValue(b.layer ?? "body");
-
-    const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-    rect.setAttribute(
-      "class",
-      `bbox bbox-${cls} ${kindClass}${layerClass ? ` ${layerClass}` : ""}`,
-    );
-    rect.setAttribute("x", String(x));
-    rect.setAttribute("y", String(y));
-    rect.setAttribute("width", String(Math.max(w, 1)));
-    rect.setAttribute("height", String(Math.max(h, 1)));
-    rect.setAttribute("data-element-id", b.elementId);
-    svg.appendChild(rect);
-  }
-
-  appendFragmentNavButtons(svg, img, fragmentNavItems);
-
-  svg.addEventListener("click", (e) => {
-    if (pagePanSuppressClick) {
-      pagePanSuppressClick = false;
-      return;
-    }
-    const navBtn = e.target.closest(".fragment-nav-btn:not(.fragment-nav-btn-disabled)");
-    if (navBtn) {
-      e.stopPropagation();
-      const navGroup = navBtn.closest(".fragment-nav");
-      const elementId = navGroup?.getAttribute("data-element-id");
-      const direction = navBtn.getAttribute("data-nav");
-      if (elementId && direction) navigateThreadFragment(elementId, direction);
-      return;
-    }
-    const badge = e.target.closest(".overlay-badge[data-element-id]");
-    if (badge) {
-      const elementId = resolveSelectionElementId(badge.getAttribute("data-element-id"));
-      if (elementId) selectElement(elementId);
-      return;
-    }
-    const coords = imageCoordsFromEvent(svg, e);
-    if (!coords) return;
-    const hit = hitTestBoxes(boxes, img, coords.x, coords.y);
-    if (hit) selectElement(hit.elementId);
-    else clearSelection();
-  });
-
-  svg.addEventListener("mousemove", (e) => {
-    const coords = imageCoordsFromEvent(svg, e);
-    svg.style.cursor = coords && hitTestBoxes(boxes, img, coords.x, coords.y) ? "pointer" : "";
-  });
-  svg.addEventListener("mouseleave", () => {
-    svg.style.cursor = "";
-  });
-
-  return svg;
-}
-
-function selectElement(elementId) {
-  if (!elementId) return;
-  selectedElementId = elementId;
-  applySelection();
-}
-
-function clearSelection() {
-  selectedElementId = null;
-  applySelection();
-}
-
-function isPictureContentOverlayElement(elementId) {
-  return isPictureContentElement(state?.idToElement?.get(elementId) ?? null);
-}
-
-function isTableContentOverlayElement(elementId) {
-  return isTableContentElement(state?.idToElement?.get(elementId) ?? null);
-}
-
-function isContentsOptionHidden(elementId, clickVisible) {
-  if (clickVisible) return false;
-  if (!showPictureContents && isPictureContentOverlayElement(elementId)) return true;
-  if (!showTableContents && isTableContentOverlayElement(elementId)) return true;
-  return false;
-}
-
-function applyBboxVisibility() {
-  if (!state?.hasPageView || !els.pagePane) return;
-
-  const peerIds = selectedElementId ? fragmentPeerElementIds(selectedElementId) : new Set();
-
-  for (const el of els.pagePane.querySelectorAll(".bbox")) {
-    el.classList.remove("related");
-    const elementId = el.getAttribute("data-element-id");
-    const clickVisible = elementId === selectedElementId || peerIds.has(elementId);
-    if (showAllBboxes) {
-      if (isContentsOptionHidden(elementId, clickVisible)) {
-        el.classList.add("bbox-hidden");
-      } else {
-        el.classList.remove("bbox-hidden");
-        if (peerIds.has(elementId)) {
-          el.classList.add("related");
-        }
-      }
-      continue;
-    }
-    if (elementId === selectedElementId) {
-      el.classList.remove("bbox-hidden");
-    } else if (peerIds.has(elementId)) {
-      el.classList.remove("bbox-hidden");
-      el.classList.add("related");
-    } else {
-      el.classList.add("bbox-hidden");
-    }
-  }
-
-  for (const el of els.pagePane.querySelectorAll(".element-badge")) {
-    const elementId = el.getAttribute("data-element-id");
-    const clickVisible = elementId === selectedElementId || peerIds.has(elementId);
-    if (!showAllBboxes || !showLayoutBadges) {
-      el.classList.add("bbox-hidden");
-      continue;
-    }
-    if (isContentsOptionHidden(elementId, clickVisible)) {
-      el.classList.add("bbox-hidden");
-    } else {
-      el.classList.remove("bbox-hidden");
-    }
-  }
-
-  for (const el of els.pagePane.querySelectorAll(".caption-link")) {
-    if (!showAllBboxes || !showCaptionLinks) {
-      el.classList.add("bbox-hidden");
-      continue;
-    }
-    el.classList.remove("bbox-hidden");
-  }
-
-  for (const el of els.pagePane.querySelectorAll(".xref-link")) {
-    if (!showAllBboxes || !showXrefLinks) {
-      el.classList.add("bbox-hidden");
-      continue;
-    }
-    el.classList.remove("bbox-hidden");
-  }
-
-  for (const el of els.pagePane.querySelectorAll(".fragment-link")) {
-    const clickVisible = Boolean(selectedElementId && isFragmentLinkRelevant(el, peerIds));
-    const optionVisible = showAllBboxes && showFragmentLinks;
-    el.classList.toggle("bbox-hidden", !(clickVisible || optionVisible));
-  }
-
-  for (const el of els.pagePane.querySelectorAll(".fragment-nav")) {
-    const elementId = el.getAttribute("data-element-id");
-    const clickVisible = elementId === selectedElementId || peerIds.has(elementId);
-    const optionVisible = showAllBboxes && showFragmentLinks;
-    el.classList.toggle("bbox-hidden", !(clickVisible || optionVisible));
-  }
-
-  for (const el of els.pagePane.querySelectorAll(".reading-order-badge")) {
-    const elementId = el.getAttribute("data-element-id");
-    const clickVisible = elementId === selectedElementId || peerIds.has(elementId);
-    if (!showAllBboxes || !showReadingOrder) {
-      el.classList.add("bbox-hidden");
-      continue;
-    }
-    if (
-      isPictureContentOverlayElement(elementId)
-      || isTableContentOverlayElement(elementId)
-      || isContentsOptionHidden(elementId, clickVisible)
-    ) {
-      el.classList.add("bbox-hidden");
-      continue;
-    }
-    el.classList.remove("bbox-hidden");
-  }
-
-  for (const el of els.pagePane.querySelectorAll(".reading-order-step")) {
-    if (!showAllBboxes || !showReadingOrder || !showReadingOrderArrows) {
-      el.classList.add("bbox-hidden");
-      continue;
-    }
-    el.classList.remove("bbox-hidden");
-  }
-}
-
-function findMarkupElementForSelection(elementId) {
-  if (!els.markupPane) return null;
-  return (
-    els.markupPane.querySelector(`.markup-el-virtual-text[data-element-id="${elementId}"]`) ||
-    els.markupPane.querySelector(`[data-element-id="${elementId}"]`)
-  );
-}
-
-function findRenderedElementForSelection(elementId) {
-  if (!els.renderedPane) return null;
-  const direct =
-    els.renderedPane.querySelector(`.rendered-el-virtual-text[data-element-id="${elementId}"]`) ||
-    els.renderedPane.querySelector(`.rendered-el[data-element-id="${elementId}"]`);
-  if (direct) return direct;
-
-  const xmlEl = state?.idToElement?.get(elementId);
-  const threadId = xmlEl ? elementThreadId(xmlEl) : null;
-  if (!threadId) return null;
-
-  const merged = els.renderedPane.querySelector(
-    `.rendered-fragment-merged[data-thread-id="${threadId}"]`,
-  );
-  if (!merged) return null;
-
-  const primaryId = merged.getAttribute("data-element-id");
-  if (!primaryId || primaryId === elementId) return merged;
-  return fragmentPeerElementIds(primaryId).has(elementId) ? merged : null;
-}
-
-function revealRenderedSelectionContext(renderedEl) {
-  const pictureContents = renderedEl.closest(".rendered-picture-contents");
-  if (pictureContents && !pictureContents.open) {
-    pictureContents.open = true;
-  }
-  revealReadingLayerForSelection(renderedEl);
-}
-
-function revealReadingLayerForSelection(renderedEl) {
-  const layer = renderedEl.getAttribute("data-doclang-layer");
-  if (!layer || layer === "body") return;
-  let changed = false;
-  if (layer === "furniture" && !showReadingFurniture) {
-    showReadingFurniture = true;
-    changed = true;
-  } else if (layer === "background" && !showReadingBackground) {
-    showReadingBackground = true;
-    changed = true;
-  }
-  if (!changed) return;
-  syncReadingLayerCheckboxes();
-  syncReadingLayerVisibility();
-}
-
-function applySelection() {
-  els.markupPane?.querySelectorAll(".markup-el.selected").forEach((el) => {
-    el.classList.remove("selected");
-  });
-  els.renderedPane?.querySelectorAll(".rendered-el.selected").forEach((el) => {
-    el.classList.remove("selected");
-  });
-  if (!els.pagePane) return;
-  els.pagePane.querySelectorAll(".bbox.selected, .overlay-badge.selected").forEach((el) => {
-    el.classList.remove("selected");
-  });
-
-  if (!selectedElementId) {
-    const img = els.pagePane.querySelector(".page-view img");
-    if (img) syncOverlayBadges(img);
-    applyBboxVisibility();
-    return;
-  }
-
-  const markupEl = findMarkupElementForSelection(selectedElementId);
-  if (markupEl) {
-    markupEl.classList.add("selected");
-    markupEl.scrollIntoView({ block: "nearest", behavior: "smooth" });
-  }
-
-  const renderedEl = findRenderedElementForSelection(selectedElementId);
-  if (renderedEl) {
-    revealRenderedSelectionContext(renderedEl);
-    renderedEl.classList.add("selected");
-    renderedEl.scrollIntoView({ block: "nearest", behavior: "smooth" });
-  }
-
-  if (state?.hasPageView) {
-    for (const el of els.pagePane.querySelectorAll(`[data-element-id="${selectedElementId}"]`)) {
-      el.classList.add("selected");
-    }
-  }
-
-  const img = els.pagePane.querySelector(".page-view img");
-  if (img) syncOverlayBadges(img);
-  applyBboxVisibility();
-}
-
-function buildMarkupView(segment, elementIds) {
-  const root = document.createElement("div");
-  root.className = "markup";
-  for (const el of segment) {
-    if (el.nodeType === Node.ELEMENT_NODE) {
-      root.appendChild(buildMarkupElement(el, 0, elementIds));
-    }
-  }
-  root.addEventListener("click", (e) => {
-    const attrToggle = e.target.closest(".xml-attr-value-chip");
-    if (attrToggle) {
-      e.stopPropagation();
-      toggleTruncatableMarkupAttrValue(attrToggle);
-      return;
-    }
-    const toggle = e.target.closest(".markup-fold-toggle");
-    if (toggle) {
-      e.stopPropagation();
-      const block = toggle.closest(".markup-el-foldable");
-      if (block) {
-        const collapsed = block.classList.toggle("markup-collapsed");
-        toggle.setAttribute("aria-expanded", String(!collapsed));
-        toggle.setAttribute("aria-label", collapsed ? "Expand" : "Collapse");
-      }
-      return;
-    }
-    const elementId = resolveMarkupClickTarget(e.target);
-    if (elementId) selectElement(elementId);
-  });
-  return root;
-}
-
-function sliceHasMarkupContent(nodes) {
-  for (const node of nodes) {
-    if (isTextLikeNode(node) && !isWhitespaceOnlyText(node)) return true;
-    if (node.nodeType === Node.ELEMENT_NODE) return true;
-  }
-  return false;
-}
-
-function isVirtualTextSkippableNode(node) {
-  if (isWhitespaceOnlyText(node)) return true;
-  if (node.nodeType !== Node.ELEMENT_NODE) return false;
-  const tag = localName(node);
-  return tag === "location" || HEAD_TAGS.has(tag);
-}
-
-function shouldWrapVirtualText(contentNodes) {
-  if (!sliceHasMarkupContent(contentNodes)) return false;
-
-  for (const node of contentNodes) {
-    if (isVirtualTextSkippableNode(node)) continue;
-    if (isTextLikeNode(node)) return true;
-    if (node.nodeType === Node.ELEMENT_NODE && !isSemanticElement(node)) return true;
-  }
-  return false;
-}
-
-function appendRenderedSliceContent(container, hostEl, contentNodes, elementIds) {
-  if (!sliceHasMarkupContent(contentNodes)) return;
-  if (shouldWrapVirtualText(contentNodes)) {
-    container.appendChild(renderVirtualTextBlock(hostEl, contentNodes, elementIds));
-    return;
-  }
-  for (const node of contentNodes) {
-    if (isVirtualTextSkippableNode(node)) continue;
-    if (node.nodeType === Node.ELEMENT_NODE && RENDER_BLOCK_TAGS.has(localName(node))) {
-      const rendered = renderBlockElement(node, elementIds, { inline: false });
-      if (rendered) container.appendChild(rendered);
-    } else {
-      appendRenderedNode(container, node, elementIds, { inline: true });
-    }
-  }
-}
-
-function appendMarkupNodesFromSlice(parent, depth, nodes, elementIds) {
-  for (const child of nodes) {
-    if (isTextLikeNode(child)) {
-      const text = formatMarkupTextNode(child);
-      if (text) appendMarkupTextLine(parent, depth, text);
-    } else if (child.nodeType === Node.ELEMENT_NODE) {
-      parent.appendChild(buildMarkupElement(child, depth, elementIds));
-    }
-  }
-}
-
-function appendMarkupVirtualText(parent, depth, hostEl, contentNodes, elementIds) {
-  if (!shouldWrapVirtualText(contentNodes)) {
-    appendMarkupNodesFromSlice(parent, depth, contentNodes, elementIds);
-    return;
-  }
-
-  const block = document.createElement("div");
-  block.className = "markup-el markup-el-virtual-text";
-  const elementId = elementIds.get(hostEl);
-  if (elementId) block.setAttribute("data-element-id", elementId);
-
-  appendMarkupFoldableOpen(block, depth, "text", [], VIRTUAL_TEXT_TAG_HINT);
-  block.classList.add("markup-el-foldable");
-
-  const foldBody = document.createElement("div");
-  foldBody.className = "markup-fold-body";
-  const children = document.createElement("div");
-  children.className = "markup-children";
-  appendMarkupNodesFromSlice(children, depth + 1, contentNodes, elementIds);
-  foldBody.appendChild(children);
-  appendMarkupCloseTag(foldBody, depth, "text", VIRTUAL_TEXT_TAG_HINT);
-  block.appendChild(foldBody);
-  parent.appendChild(block);
-}
-
-function buildMarkupFoldableElement(el, depth, elementIds, buildBody) {
-  const tag = localName(el);
-  const block = document.createElement("div");
-  block.className = "markup-el";
-  const elementId = elementIds.get(el);
-  if (elementId) block.setAttribute("data-element-id", elementId);
-
-  const attributes = markupAttributes(el);
-  appendMarkupFoldableOpen(block, depth, tag, attributes);
-  block.classList.add("markup-el-foldable");
-
-  const foldBody = document.createElement("div");
-  foldBody.className = "markup-fold-body";
-  const children = document.createElement("div");
-  children.className = "markup-children";
-  buildBody(children, depth + 1);
-  foldBody.appendChild(children);
-  appendMarkupCloseTag(foldBody, depth, tag);
-  block.appendChild(foldBody);
-  return block;
-}
-
-function buildMarkupList(el, depth, elementIds) {
-  return buildMarkupFoldableElement(el, depth, elementIds, (children, childDepth) => {
-    const nodes = [...el.childNodes];
-    let i = 0;
-    while (i < nodes.length) {
-      const node = nodes[i];
-      if (node.nodeType === Node.ELEMENT_NODE && localName(node) === "ldiv") break;
-      if (isTextLikeNode(node) && isWhitespaceOnlyText(node)) {
-        i += 1;
-        continue;
-      }
-      if (isTextLikeNode(node)) break;
-      if (node.nodeType === Node.ELEMENT_NODE) {
-        const tag = localName(node);
-        if (HEAD_TAGS.has(tag) || tag === "location") {
-          children.appendChild(buildMarkupElement(node, childDepth, elementIds));
-          i += 1;
-          continue;
-        }
-      }
-      break;
-    }
-    while (i < nodes.length) {
-      const node = nodes[i];
-      if (node.nodeType !== Node.ELEMENT_NODE || localName(node) !== "ldiv") {
-        appendMarkupNodesFromSlice(children, childDepth, [node], elementIds);
-        i += 1;
-        continue;
-      }
-      const ldiv = node;
-      children.appendChild(buildMarkupElement(ldiv, childDepth, elementIds));
-      i += 1;
-      const end = skipUntilListItemBoundary(nodes, i);
-      appendMarkupVirtualText(children, childDepth, ldiv, nodes.slice(i, end), elementIds);
-      i = end;
-    }
-  });
-}
-
-function buildMarkupOtslContainer(el, depth, elementIds) {
-  return buildMarkupFoldableElement(el, depth, elementIds, (children, childDepth) => {
-    const nodes = [...el.childNodes];
-    let i = 0;
-    while (i < nodes.length) {
-      const node = nodes[i];
-      if (node.nodeType === Node.ELEMENT_NODE && isCellToken(localName(node))) break;
-      if (isTextLikeNode(node) && isWhitespaceOnlyText(node)) {
-        i += 1;
-        continue;
-      }
-      if (isTextLikeNode(node)) break;
-      if (node.nodeType === Node.ELEMENT_NODE) {
-        const tag = localName(node);
-        if (HEAD_TAGS.has(tag) || tag === "location" || tag === "h_thread") {
-          children.appendChild(buildMarkupElement(node, childDepth, elementIds));
-          i += 1;
-          continue;
-        }
-      }
-      break;
-    }
-    while (i < nodes.length) {
-      const node = nodes[i];
-      if (node.nodeType !== Node.ELEMENT_NODE) {
-        appendMarkupNodesFromSlice(children, childDepth, [node], elementIds);
-        i += 1;
-        continue;
-      }
-      const tag = localName(node);
-      if (tag === "nl") {
-        appendMarkupSelfClosingTag(children, childDepth, "nl", []);
-        i += 1;
-        continue;
-      }
-      if (!isCellToken(tag)) {
-        appendMarkupNodesFromSlice(children, childDepth, [node], elementIds);
-        i += 1;
-        continue;
-      }
-      const cell = node;
-      children.appendChild(buildMarkupElement(cell, childDepth, elementIds));
-      i += 1;
-      if (CELL_SPAN_TAGS.has(tag)) continue;
-      const end = skipUntilCellBoundary(nodes, i);
-      appendMarkupVirtualText(children, childDepth, cell, nodes.slice(i, end), elementIds);
-      i = end;
-    }
-  });
-}
-
-function buildMarkupElement(el, depth, elementIds) {
-  const tag = localName(el);
-  if (tag === "list") return buildMarkupList(el, depth, elementIds);
-  if (OTSL_CONTAINER_TAGS.has(tag)) return buildMarkupOtslContainer(el, depth, elementIds);
-
-  const block = document.createElement("div");
-  block.className = "markup-el";
-  const elementId = elementIds.get(el);
-  if (elementId) block.setAttribute("data-element-id", elementId);
-
-  const attributes = markupAttributes(el);
-
-  if (!el.childNodes.length) {
-    appendMarkupSelfClosingTag(block, depth, tag, attributes);
-    return block;
-  }
-
-  const meaningfulText = [...el.childNodes].filter((n) => isTextLikeNode(n) && !isWhitespaceOnlyText(n));
-  const textOnly = meaningfulText.length > 0 && meaningfulText.every(isTextLikeNode) && !childElements(el).length;
-  if (textOnly) {
-    const text = serializeMarkupTextNodes(el.childNodes);
-    if (text) {
-      appendMarkupInlineElement(block, depth, tag, attributes, text);
-      return block;
-    }
-  }
-
-  appendMarkupFoldableOpen(block, depth, tag, attributes);
-  block.classList.add("markup-el-foldable");
-
-  const foldBody = document.createElement("div");
-  foldBody.className = "markup-fold-body";
-  const children = document.createElement("div");
-  children.className = "markup-children";
-  for (const child of el.childNodes) {
-    if (isTextLikeNode(child)) {
-      const text = formatMarkupTextNode(child);
-      if (text) appendMarkupTextLine(children, depth + 1, text);
-    } else if (child.nodeType === Node.ELEMENT_NODE) {
-      children.appendChild(buildMarkupElement(child, depth + 1, elementIds));
-    }
-  }
-  foldBody.appendChild(children);
-  appendMarkupCloseTag(foldBody, depth, tag);
-  block.appendChild(foldBody);
-  return block;
-}
-
-/** @returns {Map<string, Element[]>} */
-function collectIntraPageThreads(segment) {
-  /** @type {Map<string, Element[]>} */
-  const byThread = new Map();
-  for (const el of segment) {
-    if (el.nodeType !== Node.ELEMENT_NODE) continue;
-    if (localName(el) === "page_break") continue;
-    const threadId = elementThreadId(el);
-    if (!threadId) continue;
-    if (!byThread.has(threadId)) byThread.set(threadId, []);
-    byThread.get(threadId).push(el);
-  }
-  for (const [threadId, members] of byThread) {
-    if (members.length < 2) byThread.delete(threadId);
-  }
-  return byThread;
-}
-
-function findLastTextNode(node) {
-  if (isTextLikeNode(node)) return node;
-  if (node.nodeType !== Node.ELEMENT_NODE) return null;
-  for (let i = node.childNodes.length - 1; i >= 0; i -= 1) {
-    const found = findLastTextNode(node.childNodes[i]);
-    if (found) return found;
-  }
-  return null;
-}
-
-function trimParentTrailingForFragmentJoin(parent) {
-  const lastText = findLastTextNode(parent);
-  if (!lastText) return;
-  let value = lastText.textContent ?? "";
-  value = value.replace(/\s+$/u, "");
-  if (value.endsWith("-")) value = value.slice(0, -1);
-  if (!value) {
-    lastText.parentNode?.removeChild(lastText);
-    trimParentTrailingForFragmentJoin(parent);
-    return;
-  }
-  lastText.textContent = value;
-}
-
-function appendMergedTextFragments(parent, fragments, elementIds) {
-  for (let i = 0; i < fragments.length; i += 1) {
-    if (i > 0) trimParentTrailingForFragmentJoin(parent);
-    appendRenderedBody(parent, fragments[i], elementIds, {
-      inline: true,
-      trimLeading: i > 0,
-    });
-  }
-}
-
-function renderMergedIntraPageFragments(fragments, elementIds) {
-  const first = fragments[0];
-  const tag = localName(first);
-  const firstId = elementIds.get(first);
-  const threadId = elementThreadId(first);
-
-  let node;
-  if (tag === "text") {
-    node = document.createElement("p");
-    appendMergedTextFragments(node, fragments, elementIds);
-  } else if (tag === "list") {
-    const listClass = first.getAttribute("class") ?? "unordered";
-    node = document.createElement(listClass === "ordered" ? "ol" : "ul");
-    for (const el of fragments) {
-      appendListItemsFromElement(node, el, elementIds);
-    }
-  } else {
-    node = document.createElement("div");
-    node.className = "rendered-fragment-merged-body";
-    for (const el of fragments) {
-      appendRenderedBodyBlocks(node, el, elementIds);
-    }
-  }
-
-  const wrap = wrapRendered(first, node, firstId, "rendered-fragment-merged");
-  if (threadId) wrap.setAttribute("data-thread-id", threadId);
-  return wrap;
-}
-
-function buildRenderedView(segment, elementIds) {
-  const intraPageThreads = collectIntraPageThreads(segment);
-  const skipElements = new Set();
-  /** @type {Map<Element, Element[]>} */
-  const mergeGroups = new Map();
-
-  for (const [, members] of intraPageThreads) {
-    mergeGroups.set(members[0], members);
-    for (let i = 1; i < members.length; i += 1) {
-      skipElements.add(members[i]);
-    }
-  }
-
-  const root = document.createElement("article");
-  root.className = "rendered-doc";
-  for (const el of segment) {
-    if (el.nodeType !== Node.ELEMENT_NODE) continue;
-    if (localName(el) === "page_break") continue;
-    if (skipElements.has(el)) continue;
-
-    const mergeGroup = mergeGroups.get(el);
-    const rendered = mergeGroup
-      ? renderMergedIntraPageFragments(mergeGroup, elementIds)
-      : renderBlockElement(el, elementIds, { inline: false });
-    if (rendered) root.appendChild(rendered);
-  }
-  root.addEventListener("click", (e) => {
-    const elementId = resolveRenderedClickTarget(e.target);
-    if (elementId) selectElement(elementId);
-  });
-  applyReadingLayerClasses(root);
-  return root;
-}
-
-function wrapRendered(el, node, elementId, extraClass) {
-  const tag = localName(el);
-  const wrap = document.createElement("div");
-  wrap.className = `rendered-el rendered-${tag}${extraClass ? ` ${extraClass}` : ""}`;
-  if (elementId) wrap.setAttribute("data-element-id", elementId);
-  applyElementLayerAttr(el, wrap);
-  wrap.appendChild(node);
-  return wrap;
-}
-
-function renderBlockElement(el, elementIds, ctx) {
-  const tag = localName(el);
-  const elementId = elementIds.get(el);
-
-  switch (tag) {
-    case "text": {
-      const p = document.createElement("p");
-      appendRenderedBody(p, el, elementIds, { inline: true });
-      return wrapRendered(el, p, elementId);
-    }
-    case "heading": {
-      const h = document.createElement(`h${headingLevel(el)}`);
-      appendRenderedBody(h, el, elementIds, { inline: true });
-      return wrapRendered(el, h, elementId);
-    }
-    case "field_heading": {
-      const h = document.createElement(`h${headingLevel(el)}`);
-      h.className = "rendered-field-heading";
-      appendRenderedBody(h, el, elementIds, { inline: true });
-      return wrapRendered(el, h, elementId);
-    }
-    case "footnote": {
-      const aside = document.createElement("aside");
-      appendRenderedBody(aside, el, elementIds, { inline: false });
-      return wrapRendered(el, aside, elementId);
-    }
-    case "page_header": {
-      const header = document.createElement("header");
-      header.className = "rendered-page-header";
-      appendRenderedBody(header, el, elementIds, { inline: true });
-      return wrapRendered(el, header, elementId);
-    }
-    case "page_footer": {
-      const footer = document.createElement("footer");
-      footer.className = "rendered-page-footer";
-      appendRenderedBody(footer, el, elementIds, { inline: true });
-      return wrapRendered(el, footer, elementId);
-    }
-    case "list":
-      return renderList(el, elementIds);
-    case "table":
-    case "index":
-    case "tabular":
-      return renderOtslContainer(el, elementIds);
-    case "code":
-      return renderCode(el, elementIds, ctx);
-    case "formula":
-      return renderFormula(el, elementIds, ctx);
-    case "picture":
-      return renderPicture(el, elementIds);
-    case "group": {
-      const figure = document.createElement("figure");
-      figure.className = "rendered-group";
-      appendRenderedBodyBlocks(figure, el, elementIds);
-      const captionEl = readCaptionElement(el);
-      if (captionEl) {
-        figure.appendChild(renderEmbeddedCaption(captionEl, elementIds, "figcaption"));
-      }
-      return wrapRendered(el, figure, elementId);
-    }
-    case "field_region": {
-      const div = document.createElement("div");
-      div.className = "rendered-field-region";
-      appendRenderedBodyBlocks(div, el, elementIds);
-      return wrapRendered(el, div, elementId);
-    }
-    case "field_item": {
-      const div = document.createElement("div");
-      div.className = "rendered-field-item";
-      appendRenderedBodyBlocks(div, el, elementIds);
-      return wrapRendered(el, div, elementId);
-    }
-    default:
-      return renderUnsupported(el, elementIds);
-  }
-}
-
-function renderUnsupported(el, elementIds) {
-  const stub = document.createElement("div");
-  stub.className = "rendered-unsupported";
-  stub.textContent = `<${localName(el)}> — not yet rendered`;
-  return wrapRendered(el, stub, elementIds.get(el));
-}
-
-function skipElementHeadNodes(nodes, startIdx) {
-  let i = startIdx;
-  while (i < nodes.length && isWhitespaceOnlyText(nodes[i])) i += 1;
-  while (i < nodes.length) {
-    const node = nodes[i];
-    if (node.nodeType === Node.ELEMENT_NODE && HEAD_TAGS.has(localName(node))) {
-      i += 1;
-      while (i < nodes.length && isWhitespaceOnlyText(nodes[i])) i += 1;
-      continue;
-    }
-    break;
-  }
-  return i;
-}
-
-function readCaptionElement(el) {
-  return childElements(el).find((c) => localName(c) === "caption") ?? null;
-}
-
-function renderEmbeddedCaption(captionEl, elementIds, tagName) {
-  const node = document.createElement(tagName);
-  node.classList.add("rendered-el", "rendered-caption");
-  const elementId = elementIds.get(captionEl);
-  if (elementId) node.setAttribute("data-element-id", elementId);
-  appendRenderedBody(node, captionEl, elementIds, { inline: true });
-  return node;
-}
-
-function appendRenderedBody(parent, el, elementIds, ctx) {
-  const nodes = [...el.childNodes];
-  let i = skipElementHeadNodes(nodes, 0);
-  while (i < nodes.length) {
-    appendRenderedNode(parent, nodes[i], elementIds, ctx);
-    i += 1;
-  }
-}
-
-function appendRenderedBodyBlocks(parent, el, elementIds) {
-  const nodes = [...el.childNodes];
-  let i = skipElementHeadNodes(nodes, 0);
-  while (i < nodes.length) {
-    const node = nodes[i];
-    if (node.nodeType === Node.ELEMENT_NODE && RENDER_BLOCK_TAGS.has(localName(node))) {
-      const rendered = renderBlockElement(node, elementIds, { inline: false });
-      if (rendered) parent.appendChild(rendered);
-    } else {
-      appendRenderedNode(parent, node, elementIds, { inline: false });
-    }
-    i += 1;
-  }
-}
-
-function renderMarkerElement(el, elementIds, ctx) {
-  const marker = document.createElement("span");
-  marker.className = "rendered-marker rendered-el";
-  const elementId = elementIds.get(el);
-  if (elementId) marker.setAttribute("data-element-id", elementId);
-  appendRenderedBody(marker, el, elementIds, ctx);
-  return marker;
-}
-
-function renderCheckboxElement(el, elementIds) {
-  const cb = document.createElement("input");
-  cb.type = "checkbox";
-  cb.disabled = true;
-  cb.checked = (el.getAttribute("class") ?? "unselected") === "selected";
-  cb.className = "rendered-checkbox";
-
-  const wrap = document.createElement("span");
-  wrap.className = "rendered-checkbox-wrap rendered-el";
-  const elementId = elementIds.get(el);
-  if (elementId) wrap.setAttribute("data-element-id", elementId);
-  applyElementLayerAttr(el, wrap);
-  wrap.appendChild(cb);
-  return wrap;
-}
-
-function renderFieldKeyElement(el, elementIds, ctx) {
-  const node = document.createElement("span");
-  node.className = "rendered-field-key rendered-el";
-  const elementId = elementIds.get(el);
-  if (elementId) node.setAttribute("data-element-id", elementId);
-  applyElementLayerAttr(el, node);
-  appendRenderedBody(node, el, elementIds, { ...ctx, inline: true });
-  return node;
-}
-
-function renderFieldValueElement(el, elementIds, ctx) {
-  const valueClass = el.getAttribute("class") ?? "read_only";
-  const node = document.createElement("span");
-  node.className = `rendered-field-value rendered-field-value-${valueClass} rendered-el`;
-  const elementId = elementIds.get(el);
-  if (elementId) node.setAttribute("data-element-id", elementId);
-  applyElementLayerAttr(el, node);
-  appendRenderedBody(node, el, elementIds, { ...ctx, inline: true });
-  if (
-    valueClass === "fillable"
-    && !node.textContent.trim()
-    && !node.querySelector(".rendered-checkbox-wrap, img, .rendered-marker")
-  ) {
-    const slot = document.createElement("span");
-    slot.className = "rendered-field-fillable-slot";
-    slot.setAttribute("aria-hidden", "true");
-    node.appendChild(slot);
-  }
-  return node;
-}
-
-function renderFieldHintElement(el, elementIds, ctx) {
-  const node = document.createElement("span");
-  node.className = "rendered-field-hint rendered-el";
-  const elementId = elementIds.get(el);
-  if (elementId) node.setAttribute("data-element-id", elementId);
-  applyElementLayerAttr(el, node);
-  appendRenderedBody(node, el, elementIds, { ...ctx, inline: true });
-  return node;
-}
-
-function appendRenderedNode(parent, node, elementIds, ctx) {
-  if (isTextLikeNode(node)) {
-    let text = node.textContent;
-    if (!text || !text.trim()) return;
-    if (ctx.trimLeading) {
-      text = text.replace(/^\s+/u, "");
-      ctx.trimLeading = false;
-      if (!text) return;
-    }
-    parent.appendChild(document.createTextNode(text));
-    return;
-  }
-  if (node.nodeType !== Node.ELEMENT_NODE) return;
-
-  const tag = localName(node);
-  if (HEAD_TAGS.has(tag)) return;
-
-  if (RENDER_FORMAT_TAGS.has(tag)) {
-    parent.appendChild(renderFormatElement(node, elementIds, ctx));
-    return;
-  }
-
-  if (tag === "code" || tag === "formula") {
-    const rendered = renderBlockElement(node, elementIds, { inline: true });
-    if (rendered) parent.appendChild(rendered);
-    return;
-  }
-
-  if (RENDER_BLOCK_TAGS.has(tag)) {
-    const rendered = renderBlockElement(node, elementIds, ctx);
-    if (rendered) parent.appendChild(rendered);
-    return;
-  }
-
-  if (tag === "marker") {
-    parent.appendChild(renderMarkerElement(node, elementIds, ctx));
-    return;
-  }
-
-  if (tag === "checkbox") {
-    parent.appendChild(renderCheckboxElement(node, elementIds));
-    return;
-  }
-
-  if (tag === "key") {
-    parent.appendChild(renderFieldKeyElement(node, elementIds, ctx));
-    return;
-  }
-
-  if (tag === "value") {
-    parent.appendChild(renderFieldValueElement(node, elementIds, ctx));
-    return;
-  }
-
-  if (tag === "hint") {
-    parent.appendChild(renderFieldHintElement(node, elementIds, ctx));
-    return;
-  }
-
-  if (tag === "ldiv") return;
-  if (isCellToken(tag) || tag === "src" || tag === "tabular") return;
-
-  appendRenderedBody(parent, node, elementIds, ctx);
-}
-
-function renderFormatElement(el, elementIds, ctx) {
-  const tag = localName(el);
-  if (tag === "content") {
-    const span = document.createElement("span");
-    span.textContent = el.textContent ?? "";
-    return span;
-  }
-
-  let node;
-  if (tag === "handwriting") {
-    node = document.createElement("span");
-    node.className = "rendered-handwriting";
-  } else if (tag === "rtl") {
-    node = document.createElement("bdi");
-    node.setAttribute("dir", "rtl");
-  } else {
-    node = document.createElement(FORMAT_HTML_TAG[tag] ?? "span");
-  }
-
-  appendRenderedBody(node, el, elementIds, ctx);
-  return node;
-}
-
-function renderCode(el, elementIds, ctx) {
-  const labelEl = childElements(el).find((c) => localName(c) === "label");
-  const labelValue = labelEl?.getAttribute("value");
-
-  const code = document.createElement("code");
-  appendRenderedBody(code, el, elementIds, { inline: ctx.inline });
-
-  if (ctx.inline) {
-    code.classList.add("rendered-el");
-    const id = elementIds.get(el);
-    if (id) code.setAttribute("data-element-id", id);
-    return code;
-  }
-
-  const pre = document.createElement("pre");
-  if (labelValue && labelValue !== "undefined") {
-    const label = document.createElement("span");
-    label.className = "rendered-code-label";
-    label.textContent = labelValue;
-    pre.appendChild(label);
-  }
-  pre.appendChild(code);
-  return wrapRendered(el, pre, elementIds.get(el));
-}
-
-function renderFormula(el, elementIds, ctx) {
-  const span = document.createElement("span");
-  span.className = ctx.inline ? "rendered-formula-inline" : "rendered-formula";
-  appendRenderedBody(span, el, elementIds, { inline: true });
-  if (ctx.inline) {
-    span.classList.add("rendered-el");
-    const id = elementIds.get(el);
-    if (id) span.setAttribute("data-element-id", id);
-    return span;
-  }
-  return wrapRendered(el, span, elementIds.get(el));
-}
-
-function markPictureUnavailable(img) {
-  img.classList.add("rendered-picture-unavailable");
-  img.alt = "\u00A0";
-  img.setAttribute("aria-label", PICTURE_UNAVAILABLE_ALT);
-}
-
-function appendPictureFigureImage(figure, uri, captionEl, elementIds) {
-  const img = document.createElement("img");
-  figure.appendChild(img);
-
-  const resolved = uri ? resolveArchiveUri(uri) : null;
-  if (resolved) {
-    img.alt = "";
-    img.src = resolved;
-    img.addEventListener("error", () => markPictureUnavailable(img), { once: true });
-  } else {
-    markPictureUnavailable(img);
-    img.src = INVALID_PICTURE_SRC;
-  }
-
-  if (captionEl) {
-    figure.appendChild(renderEmbeddedCaption(captionEl, elementIds, "figcaption"));
-  }
-}
-
-function renderPicture(el, elementIds) {
-  const figure = document.createElement("figure");
-  const captionEl = readCaptionElement(el);
-  const srcEl = childElements(el).find((c) => localName(c) === "src") ?? null;
-  const uri = srcEl?.getAttribute("uri")?.trim() || null;
-
-  appendPictureFigureImage(figure, uri, captionEl, elementIds);
-
-  const nodes = [...el.childNodes];
-  let i = skipElementHeadNodes(nodes, 0);
-  while (i < nodes.length) {
-    const node = nodes[i];
-    if (node.nodeType !== Node.ELEMENT_NODE) {
-      i += 1;
-      continue;
-    }
-    const tag = localName(node);
-    if (tag === "src") {
-      i += 1;
-      continue;
-    }
-    if (tag === "tabular") {
-      const rendered = renderOtslContainer(node, elementIds);
-      if (rendered) figure.appendChild(rendered);
-      i += 1;
-      continue;
-    }
-    break;
-  }
-
-  const bodyInner = document.createElement("div");
-  bodyInner.className = "rendered-picture-contents-body";
-  appendPictureBodyContent(bodyInner, nodes, i, elementIds);
-  if (bodyInner.textContent.trim()) {
-    const details = document.createElement("details");
-    details.className = "rendered-picture-contents";
-    const summary = document.createElement("summary");
-    summary.textContent = "Picture contents";
-    details.appendChild(summary);
-    details.appendChild(bodyInner);
-    figure.appendChild(details);
-  }
-
-  return wrapRendered(el, figure, elementIds.get(el));
-}
-
-function appendPictureBodyContent(container, nodes, startIdx, elementIds) {
-  let i = startIdx;
-  while (i < nodes.length) {
-    const node = nodes[i];
-    if (node.nodeType === Node.ELEMENT_NODE && RENDER_BLOCK_TAGS.has(localName(node))) {
-      const rendered = renderBlockElement(node, elementIds, { inline: false });
-      if (rendered) container.appendChild(rendered);
-    } else {
-      appendRenderedNode(container, node, elementIds, { inline: false });
-    }
-    i += 1;
-  }
-}
-
-function renderVirtualTextBlock(hostEl, contentNodes, elementIds) {
-  const hasBlock = contentNodes.some(
-    (n) => n.nodeType === Node.ELEMENT_NODE && RENDER_BLOCK_TAGS.has(localName(n)),
-  );
-  const inner = document.createElement(hasBlock ? "div" : "p");
-  for (const node of contentNodes) {
-    if (node.nodeType === Node.ELEMENT_NODE && RENDER_BLOCK_TAGS.has(localName(node))) {
-      const rendered = renderBlockElement(node, elementIds, { inline: false });
-      if (rendered) inner.appendChild(rendered);
-    } else {
-      appendRenderedNode(inner, node, elementIds, { inline: true });
-    }
-  }
-  const wrap = document.createElement("div");
-  wrap.className = "rendered-el rendered-text rendered-el-virtual-text";
-  const elementId = elementIds.get(hostEl);
-  if (elementId) wrap.setAttribute("data-element-id", elementId);
-  applyElementLayerAttr(hostEl, wrap);
-  wrap.appendChild(inner);
-  return wrap;
-}
-
-function appendListItemsFromElement(list, el, elementIds) {
-  const nodes = [...el.childNodes];
-  let i = skipContainerLevelHead(nodes, 0);
-
-  while (i < nodes.length) {
-    const node = nodes[i];
-    if (node.nodeType !== Node.ELEMENT_NODE || localName(node) !== "ldiv") {
-      i += 1;
-      continue;
-    }
-
-    const ldiv = node;
-    i += 1;
-    const li = document.createElement("li");
-
-    for (const child of childElements(ldiv)) {
-      const childTag = localName(child);
-      if (childTag === "marker") {
-        li.appendChild(renderMarkerElement(child, elementIds, { inline: true }));
-      } else if (childTag === "checkbox") {
-        li.appendChild(renderCheckboxElement(child, elementIds));
-      }
-    }
-
-    const contentStart = i;
-    const head = parseElementHeadAt(nodes, i);
-    if (head) i = head.nextIndex;
-
-    while (i < nodes.length) {
-      const contentNode = nodes[i];
-      if (contentNode.nodeType === Node.ELEMENT_NODE && localName(contentNode) === "ldiv") break;
-      i += 1;
-    }
-
-    const contentNodes = nodes.slice(contentStart, i);
-    appendRenderedSliceContent(li, ldiv, contentNodes, elementIds);
-
-    list.appendChild(li);
-  }
-}
-
-function renderList(el, elementIds) {
-  const listClass = el.getAttribute("class") ?? "unordered";
-  const list = document.createElement(listClass === "ordered" ? "ol" : "ul");
-  appendListItemsFromElement(list, el, elementIds);
-  return wrapRendered(el, list, elementIds.get(el));
-}
-
-function isHeaderCellKind(kind) {
-  return kind === "ched" || kind === "rhed" || kind === "corn" || kind === "srow";
-}
-
-function skipOtslContainerHead(nodes, startIdx) {
-  let i = startIdx;
-  while (i < nodes.length) {
-    const node = nodes[i];
-    if (node.nodeType !== Node.ELEMENT_NODE) {
-      i += 1;
-      continue;
-    }
-    const tag = localName(node);
-    if (isCellToken(tag)) break;
-    if (HEAD_TAGS.has(tag) || tag === "h_thread" || tag === "location") {
-      i += 1;
-      continue;
-    }
-    break;
-  }
-  return i;
-}
-
-/** @returns {{ kind: string, token: Element, contentNodes: Node[] }[][]} */
-function parseOtslRows(container) {
-  const nodes = [...container.childNodes];
-  let i = skipOtslContainerHead(nodes, 0);
-  /** @type {{ kind: string, token: Element, contentNodes: Node[] }[][]} */
-  const rows = [];
-  /** @type {{ kind: string, token: Element, contentNodes: Node[] }[]} */
-  let currentRow = [];
-
-  while (i < nodes.length) {
-    const node = nodes[i];
-    if (node.nodeType !== Node.ELEMENT_NODE) {
-      i += 1;
-      continue;
-    }
-    const tag = localName(node);
-    if (tag === "nl") {
-      rows.push(currentRow);
-      currentRow = [];
-      i += 1;
-      continue;
-    }
-    if (!isCellToken(tag)) {
-      i += 1;
-      continue;
-    }
-
-    if (CELL_SPAN_TAGS.has(tag)) {
-      currentRow.push({ kind: tag, token: node, contentNodes: [] });
-      i += 1;
-      continue;
-    }
-
-    i += 1;
-    const head = parseElementHeadAt(nodes, i);
-    if (head) i = head.nextIndex;
-    const contentStart = i;
-    i = skipUntilCellBoundary(nodes, i);
-    currentRow.push({ kind: tag, token: node, contentNodes: nodes.slice(contentStart, i) });
-  }
-
-  if (currentRow.length) rows.push(currentRow);
-  return rows;
-}
-
-function findVerticalCellOrigin(grid, row, col) {
-  for (let r = row - 1; r >= 0; r -= 1) {
-    const cell = grid[r]?.[col];
-    if (!cell || cell.covered) continue;
-    return { cell, row: r, col };
-  }
-  return null;
-}
-
-function findHorizontalCellOrigin(grid, row, col) {
-  for (let c = col - 1; c >= 0; c -= 1) {
-    const cell = grid[row]?.[c];
-    if (!cell || cell.covered) continue;
-    return { cell, row, col: c };
-  }
-  return null;
-}
-
-function nextFreeColumn(grid, row, col) {
-  let c = col;
-  while (grid[row]?.[c]?.covered) c += 1;
-  return c;
-}
-
-/** @returns {{ kind: string, token: Element, contentNodes: Node[], colspan: number, rowspan: number, covered?: boolean }[][]} */
-function buildOtslGrid(rows) {
-  /** @type {{ kind: string, token: Element, contentNodes: Node[], colspan: number, rowspan: number, covered?: boolean }[][]} */
-  const grid = [];
-
-  for (let rowIdx = 0; rowIdx < rows.length; rowIdx += 1) {
-    if (!grid[rowIdx]) grid[rowIdx] = [];
-    let col = 0;
-
-    for (const parsed of rows[rowIdx]) {
-      col = nextFreeColumn(grid, rowIdx, col);
-
-      if (parsed.kind === "lcel") {
-        const origin = findHorizontalCellOrigin(grid, rowIdx, col);
-        if (origin) origin.cell.colspan += 1;
-        grid[rowIdx][col] = { kind: "lcel", token: parsed.token, contentNodes: [], colspan: 0, rowspan: 0, covered: true };
-        col += 1;
-        continue;
-      }
-
-      if (parsed.kind === "ucel") {
-        const origin = findVerticalCellOrigin(grid, rowIdx, col);
-        if (origin) origin.cell.rowspan += 1;
-        grid[rowIdx][col] = { kind: "ucel", token: parsed.token, contentNodes: [], colspan: 0, rowspan: 0, covered: true };
-        col += 1;
-        continue;
-      }
-
-      if (parsed.kind === "xcel") {
-        const vOrigin = findVerticalCellOrigin(grid, rowIdx, col);
-        const hOrigin = findHorizontalCellOrigin(grid, rowIdx, col);
-        if (vOrigin && hOrigin && vOrigin.cell === hOrigin.cell) {
-          vOrigin.cell.rowspan += 1;
-          vOrigin.cell.colspan += 1;
-        } else {
-          if (vOrigin) vOrigin.cell.rowspan += 1;
-          if (hOrigin) hOrigin.cell.colspan += 1;
-        }
-        grid[rowIdx][col] = { kind: "xcel", token: parsed.token, contentNodes: [], colspan: 0, rowspan: 0, covered: true };
-        col += 1;
-        continue;
-      }
-
-      grid[rowIdx][col] = {
-        kind: parsed.kind,
-        token: parsed.token,
-        contentNodes: parsed.contentNodes,
-        colspan: 1,
-        rowspan: 1,
-        covered: false,
-      };
-      col += 1;
-    }
-  }
-
-  return grid;
-}
-
-function appendTableCellContent(container, nodes, elementIds, cellToken) {
-  appendRenderedSliceContent(container, cellToken, nodes, elementIds);
-}
-
-function renderOtslContainer(el, elementIds) {
-  const table = document.createElement("table");
-  table.className = "rendered-table";
-
-  const captionEl = readCaptionElement(el);
-  if (captionEl) {
-    table.appendChild(renderEmbeddedCaption(captionEl, elementIds, "caption"));
-  }
-
-  const grid = buildOtslGrid(parseOtslRows(el));
-  const tbody = document.createElement("tbody");
-
-  for (const row of grid) {
-    const tr = document.createElement("tr");
-    for (const cell of row) {
-      if (!cell || cell.covered) continue;
-      const cellTag = isHeaderCellKind(cell.kind) ? "th" : "td";
-      const td = document.createElement(cellTag);
-      if (cell.colspan > 1) td.colSpan = cell.colspan;
-      if (cell.rowspan > 1) td.rowSpan = cell.rowspan;
-      appendTableCellContent(td, cell.contentNodes, elementIds, cell.token);
-      tr.appendChild(td);
-    }
-    if (tr.childNodes.length) tbody.appendChild(tr);
-  }
-
-  if (tbody.childNodes.length) table.appendChild(tbody);
-  return wrapRendered(el, table, elementIds.get(el));
-}
-
-function serializeSegment(segment) {
-  return segment.map((el) => serializeElement(el, 0)).join("\n");
-}
-
-function serializeElement(el, depth) {
-  const pad = "  ".repeat(depth);
-  const tag = localName(el);
-  const attrs = [...el.attributes]
-    .filter((a) => a.name !== "xmlns" || a.value !== DOCLANG_NS)
-    .map((a) => `${a.name}="${a.value}"`)
-    .join(" ");
-  const attrStr = attrs ? ` ${attrs}` : "";
-
-  if (!el.childNodes.length) return `${pad}<${tag}${attrStr}/>`;
-
-  const meaningfulText = [...el.childNodes].filter((n) => isTextLikeNode(n) && !isWhitespaceOnlyText(n));
-  const textOnly = meaningfulText.length > 0 && meaningfulText.every(isTextLikeNode) && !childElements(el).length;
-  if (textOnly) {
-    const text = serializeMarkupTextNodes(el.childNodes);
-    if (text) {
-      return `${pad}<${tag}${attrStr}>${text}</${tag}>`;
-    }
-  }
-
-  const parts = [`${pad}<${tag}${attrStr}>`];
-  for (const child of el.childNodes) {
-    if (isTextLikeNode(child)) {
-      const text = formatMarkupTextNode(child);
-      if (text) parts.push("  ".repeat(depth + 1) + text);
-    } else if (child.nodeType === Node.ELEMENT_NODE) {
-      parts.push(serializeElement(child, depth + 1));
-    }
-  }
-  parts.push(`${pad}</${tag}>`);
-  return parts.join("\n");
-}
-
-function childElements(el) {
-  return [...el.children];
-}
-
-function localName(el) {
-  return el.localName || el.tagName.replace(/^.*:/, "");
-}
-
-function normalizeArchivePath(path) {
-  return path.replace(/\\/g, "/").replace(/^\.\//, "");
-}
-
-function archiveRelativeAssetPath(path) {
-  const norm = normalizeArchivePath(path);
-  const idx = norm.indexOf("assets/");
-  return idx === -1 ? null : norm.slice(idx);
-}
-
-function mimeFromAssetPath(path) {
-  const ext = path.split(".").pop()?.toLowerCase() ?? "";
-  switch (ext) {
-    case "png":
-      return "image/png";
-    case "jpg":
-    case "jpeg":
-      return "image/jpeg";
-    case "webp":
-      return "image/webp";
-    case "gif":
-      return "image/gif";
-    case "svg":
-      return "image/svg+xml";
-    default:
-      return "application/octet-stream";
-  }
-}
-
-/**
- * Resolve a picture @uri to a safe img src.
- * Only archive asset blob URLs and small raster data: URIs are allowed.
- * Remote, protocol-relative, blob:, and unresolved relative URIs are rejected.
- * @returns {string | null}
- */
-function resolveArchiveUri(uri) {
-  if (!uri) return null;
-  const trimmed = uri.trim();
-  if (!trimmed) return null;
-
-  if (SAFE_DATA_IMAGE_RE.test(trimmed)) {
-    return trimmed.length <= MAX_DATA_IMAGE_URI_LENGTH ? trimmed : null;
-  }
-
-  // Reject any other scheme (http, https, blob, javascript, …) and protocol-relative URLs.
-  if (/^[a-z][a-z0-9+.-]*:/i.test(trimmed) || trimmed.startsWith("//")) return null;
-
-  return state?.assetUrls?.get(normalizeArchivePath(trimmed)) ?? null;
-}
-
-function revokeDocumentState(docState) {
-  if (!docState) return;
-  for (const url of docState.pageImages.values()) {
-    if (url.startsWith("blob:")) URL.revokeObjectURL(url);
-  }
-  for (const url of docState.assetUrls.values()) {
-    if (url.startsWith("blob:")) URL.revokeObjectURL(url);
-  }
-}
-
-function revokeArchiveUrls() {
-  revokeDocumentState(state);
-}
-
-async function extractArchiveFromZipBuffer(buffer) {
-  const entries = await unzip(buffer);
-  const markupEntry = findArchiveEntry(entries, "document.xml");
-  if (!markupEntry) {
-    throw new Error("Archive must contain document.xml");
-  }
-  const markupXml = new TextDecoder().decode(markupEntry.data);
-  const pageImages = new Map();
-  const assetUrls = new Map();
-  for (const e of entries) {
-    const m = e.name.match(/^pages\/(\d+)\.(png|jpe?g|webp)$/i);
-    if (m) {
-      const ext = m[2].toLowerCase().replace("jpeg", "jpg");
-      const mime = ext === "png" ? "image/png" : ext === "webp" ? "image/webp" : "image/jpeg";
-      pageImages.set(Number(m[1]), URL.createObjectURL(new Blob([e.data], { type: mime })));
-      continue;
-    }
-    if (e.name.startsWith("assets/") && !e.name.endsWith("/")) {
-      assetUrls.set(
-        e.name,
-        URL.createObjectURL(new Blob([e.data], { type: mimeFromAssetPath(e.name) })),
-      );
-    }
-  }
-  return { markupXml, pageImages, assetUrls };
-}
-
-async function unzip(buffer, { shouldExtract } = {}) {
-  if (typeof DecompressionStream === "undefined") {
-    throw new Error("ZIP decompression requires a browser with DecompressionStream support");
-  }
-
-  const bytes = new Uint8Array(buffer);
-  const view = new DataView(buffer);
-  const eocdOffset = findEndOfCentralDirectory(bytes);
-  const entryCount = view.getUint16(eocdOffset + 10, true);
-  const centralDirOffset = view.getUint32(eocdOffset + 16, true);
-
-  if (entryCount > ZIP_MAX_ENTRIES) {
-    throw new Error("ZIP archive has too many entries");
-  }
-  if (centralDirOffset >= bytes.length) {
-    throw new Error("Invalid ZIP central directory offset");
-  }
-
-  /** @type {{ name: string, data: Uint8Array }[]} */
-  const entries = [];
-  let offset = centralDirOffset;
-  let totalUncompressed = 0;
-
-  for (let i = 0; i < entryCount; i += 1) {
-    if (offset + 46 > bytes.length || view.getUint32(offset, true) !== 0x02014b50) {
-      throw new Error("Invalid ZIP central directory");
-    }
-
-    const compression = view.getUint16(offset + 10, true);
-    const compressedSize = view.getUint32(offset + 20, true);
-    const uncompressedSize = view.getUint32(offset + 24, true);
-    const nameLength = view.getUint16(offset + 28, true);
-    const extraLength = view.getUint16(offset + 30, true);
-    const commentLength = view.getUint16(offset + 32, true);
-    const localHeaderOffset = view.getUint32(offset + 42, true);
-    const nameEnd = offset + 46 + nameLength;
-    if (nameEnd > bytes.length) {
-      throw new Error("Invalid ZIP entry name");
-    }
-    const rawName = new TextDecoder().decode(bytes.subarray(offset + 46, nameEnd));
-    const name = normalizeZipEntryName(rawName);
-
-    offset = nameEnd + extraLength + commentLength;
-    if (offset > bytes.length) {
-      throw new Error("Invalid ZIP central directory");
-    }
-
-    if (!name || name.endsWith("/") || isIgnoredArchiveEntry(name)) continue;
-    if (shouldExtract && !shouldExtract(name)) continue;
-
-    if (compressedSize > ZIP_MAX_ENTRY_COMPRESSED_BYTES || uncompressedSize > ZIP_MAX_ENTRY_UNCOMPRESSED_BYTES) {
-      throw new Error(`ZIP entry exceeds size limit: ${name}`);
-    }
-    if (
-      compressedSize > 0 &&
-      uncompressedSize > 0 &&
-      uncompressedSize / compressedSize > ZIP_MAX_COMPRESSION_RATIO
-    ) {
-      throw new Error(`ZIP entry compression ratio exceeds limit: ${name}`);
-    }
-    if (totalUncompressed + uncompressedSize > ZIP_MAX_TOTAL_UNCOMPRESSED_BYTES) {
-      throw new Error("ZIP archive exceeds total uncompressed size limit");
-    }
-
-    if (localHeaderOffset + 30 > bytes.length || view.getUint32(localHeaderOffset, true) !== 0x04034b50) {
-      throw new Error(`Invalid ZIP local header: ${name}`);
-    }
-    const localNameLength = view.getUint16(localHeaderOffset + 26, true);
-    const localExtraLength = view.getUint16(localHeaderOffset + 28, true);
-    const dataOffset = localHeaderOffset + 30 + localNameLength + localExtraLength;
-    if (dataOffset + compressedSize > bytes.length) {
-      throw new Error(`ZIP entry data out of bounds: ${name}`);
-    }
-    const compressed = bytes.subarray(dataOffset, dataOffset + compressedSize);
-    const data = await decompressZipEntry(compressed, compression, uncompressedSize);
-    totalUncompressed += data.length;
-    if (totalUncompressed > ZIP_MAX_TOTAL_UNCOMPRESSED_BYTES) {
-      throw new Error("ZIP archive exceeds total uncompressed size limit");
-    }
-    entries.push({ name, data });
-  }
-
-  return entries;
-}
-
-function findEndOfCentralDirectory(bytes) {
-  for (let i = bytes.length - 22; i >= 0; i -= 1) {
-    if (
-      bytes[i] === 0x50 &&
-      bytes[i + 1] === 0x4b &&
-      bytes[i + 2] === 0x05 &&
-      bytes[i + 3] === 0x06
-    ) {
-      return i;
-    }
-  }
-  throw new Error("Invalid ZIP archive");
-}
-
-function concatUint8Arrays(chunks, totalLength) {
-  const out = new Uint8Array(totalLength);
-  let offset = 0;
-  for (const chunk of chunks) {
-    out.set(chunk, offset);
-    offset += chunk.byteLength;
-  }
-  return out;
-}
-
-async function decompressZipEntry(data, method, uncompressedSize) {
-  if (method === 0) {
-    if (data.length > ZIP_MAX_ENTRY_UNCOMPRESSED_BYTES) {
-      throw new Error("ZIP entry exceeds size limit");
-    }
-    return data;
-  }
-  if (method === 8) {
-    const stream = new Blob([data]).stream().pipeThrough(new DecompressionStream("deflate-raw"));
-    const reader = stream.getReader();
-    const chunks = [];
-    let total = 0;
-    try {
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        total += value.byteLength;
-        if (total > ZIP_MAX_ENTRY_UNCOMPRESSED_BYTES) {
-          throw new Error("ZIP entry exceeds size limit");
-        }
-        if (data.length > 0 && total / data.length > ZIP_MAX_COMPRESSION_RATIO) {
-          throw new Error("ZIP entry compression ratio exceeds limit");
-        }
-        chunks.push(value);
-      }
-    } catch (err) {
-      try {
-        await reader.cancel();
-      } catch {
-        /* ignore cancel errors */
-      }
-      throw err;
-    }
-
-    const out = concatUint8Arrays(chunks, total);
-    if (uncompressedSize && out.length !== uncompressedSize) {
-      return out.slice(0, Math.min(out.length, uncompressedSize));
-    }
-    return out;
-  }
-  throw new Error(`Unsupported ZIP compression method ${method}`);
-}
-
-function normalizeZipEntryName(name) {
-  return name.replace(/\\/g, "/").replace(/^\.\//, "");
-}
-
-/** Match archive root files by exact name; skip macOS metadata entries. */
-function findArchiveEntry(entries, fileName) {
-  return entries.find((e) => e.name === fileName);
-}
-
-function isIgnoredArchiveEntry(name) {
-  if (name === ".DS_Store" || name.endsWith("/.DS_Store")) return true;
-  return name.split("/").some((part) => part.startsWith("._") || part === "__MACOSX");
-}
+Bn = H([E("doclang-page-nav")], Bn);
+//#endregion
+//#region node_modules/lit-html/directives/class-map.js
+var W = nt(class extends rt {
+	constructor(e) {
+		if (super(e), e.type !== tt.ATTRIBUTE || e.name !== "class" || e.strings?.length > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
+	}
+	render(e) {
+		return " " + Object.keys(e).filter((t) => e[t]).join(" ") + " ";
+	}
+	update(e, [t]) {
+		if (this.st === void 0) {
+			this.st = /* @__PURE__ */ new Set(), e.strings !== void 0 && (this.nt = new Set(e.strings.join(" ").split(/\s/).filter((e) => e !== "")));
+			for (let e in t) t[e] && !this.nt?.has(e) && this.st.add(e);
+			return this.render(t);
+		}
+		let n = e.element.classList;
+		for (let e of this.st) e in t || (n.remove(e), this.st.delete(e));
+		for (let e in t) {
+			let r = !!t[e];
+			r === this.st.has(e) || this.nt?.has(e) || (r ? (n.add(e), this.st.add(e)) : (n.remove(e), this.st.delete(e)));
+		}
+		return S;
+	}
+}), Vn = ":host{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:var(--doclang-bg,#f4f4f5);--panel:var(--doclang-panel,#fff);--border:var(--doclang-border,#d4d4d8);--text:var(--doclang-text,#18181b);--muted:var(--doclang-muted,#71717a);--accent:var(--doclang-accent,#2563eb);--placeholder-bg:var(--doclang-placeholder-bg,#fafafa);--font-ui:var(--doclang-font-ui,system-ui, -apple-system, \"Segoe UI\", sans-serif);--font-mono:var(--doclang-font-mono,ui-monospace, \"Cascadia Code\", \"Source Code Pro\", monospace);--markup-bg:var(--doclang-markup-bg,#fff);--markup-fg:var(--doclang-markup-fg,#24292e);--markup-hover:var(--doclang-markup-hover,#2563eb14);--markup-selected:var(--doclang-markup-selected,#2563eb24);--kind-text:var(--doclang-kind-text,#2563eb);--kind-heading:var(--doclang-kind-heading,#7c3aed);--kind-list:var(--doclang-kind-list,#ea580c);--kind-ldiv:var(--doclang-kind-ldiv,#ea580c);--kind-table:var(--doclang-kind-table,#16a34a);--kind-index:var(--doclang-kind-index,#0d9488);--kind-formula:var(--doclang-kind-formula,#0891b2);--kind-code:var(--doclang-kind-code,#475569);--kind-picture:var(--doclang-kind-picture,#db2777);--kind-group:var(--doclang-kind-group,#4f46e5);--kind-footnote:var(--doclang-kind-footnote,#a16207);--kind-page_header:var(--doclang-kind-page_header,#71717a);--kind-page_footer:var(--doclang-kind-page_footer,#71717a);--kind-caption:var(--doclang-kind-caption,#71717a);--kind-field:var(--doclang-kind-field,#d97706);--kind-default:var(--doclang-kind-default,#dc2626)}@media (prefers-color-scheme:dark){:host{--lightningcss-light: ;--lightningcss-dark:initial;--bg:var(--doclang-bg,#09090b);--panel:var(--doclang-panel,#18181b);--border:var(--doclang-border,#3f3f46);--text:var(--doclang-text,#fafafa);--muted:var(--doclang-muted,#a1a1aa);--placeholder-bg:var(--doclang-placeholder-bg,#27272a);--markup-bg:var(--doclang-markup-bg,#1e1e1e);--markup-fg:var(--doclang-markup-fg,#d4d4d4);--markup-hover:var(--doclang-markup-hover,#60a5fa1a);--markup-selected:var(--doclang-markup-selected,#60a5fa2e);--kind-text:var(--doclang-kind-text,#60a5fa);--kind-heading:var(--doclang-kind-heading,#a78bfa);--kind-list:var(--doclang-kind-list,#fb923c);--kind-ldiv:var(--doclang-kind-ldiv,#fb923c);--kind-table:var(--doclang-kind-table,#4ade80);--kind-index:var(--doclang-kind-index,#2dd4bf);--kind-formula:var(--doclang-kind-formula,#22d3ee);--kind-code:var(--doclang-kind-code,#94a3b8);--kind-picture:var(--doclang-kind-picture,#f472b6);--kind-group:var(--doclang-kind-group,#818cf8);--kind-footnote:var(--doclang-kind-footnote,#facc15);--kind-page_header:var(--doclang-kind-page_header,#a1a1aa);--kind-page_footer:var(--doclang-kind-page_footer,#a1a1aa);--kind-caption:var(--doclang-kind-caption,#a1a1aa);--kind-field:var(--doclang-kind-field,#fbbf24);--kind-default:var(--doclang-kind-default,#f87171)}}:host{display:contents}.toolbar{flex-wrap:wrap;grid-column:3;justify-self:end;align-items:center;gap:.5rem;display:flex}.header-divider{background:var(--border);flex-shrink:0;align-self:center;width:1px;height:1.125rem}.toolbar-options-item{cursor:pointer;font-size:.875rem;font-family:var(--font-ui);align-items:center;gap:.5rem;padding:.35rem .75rem;display:flex}.toolbar-options-item:hover{background:color-mix(in srgb, var(--accent) 6%, var(--panel))}.toolbar-options-item input{cursor:pointer;flex-shrink:0;margin:0}.toolbar-options-item-disabled{opacity:.45;cursor:not-allowed}.toolbar-options-item-disabled input{cursor:not-allowed}.toolbar-options-divider{border-top:1px solid var(--border);margin:.35rem 0}.toolbar-options-reset{box-sizing:border-box;width:100%;color:var(--text);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:0;margin:0;padding:.35rem .75rem;font-size:.875rem;display:block}.toolbar-options-reset:hover:not(:disabled){background:color-mix(in srgb, var(--accent) 6%, var(--panel));color:var(--accent)}.toolbar-options-reset:disabled{opacity:.45;cursor:not-allowed}.toolbar-file-group{align-items:center;display:inline-flex}button,label.file-btn{appearance:none;border:1px solid var(--border);background:var(--panel);color:var(--text);font:inherit;cursor:pointer;border-radius:.375rem;padding:.4rem .75rem;font-size:.875rem}button:hover,label.file-btn:hover{border-color:var(--accent)}button:disabled{opacity:.45;cursor:not-allowed}label.file-btn input{display:none}.header-site-link{color:var(--muted);white-space:nowrap;font-size:.875rem;text-decoration:none}.header-site-link:hover{color:var(--accent);text-decoration:underline}.header-site-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:.125rem}", Hn = ":host{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:var(--doclang-bg,#f4f4f5);--panel:var(--doclang-panel,#fff);--border:var(--doclang-border,#d4d4d8);--text:var(--doclang-text,#18181b);--muted:var(--doclang-muted,#71717a);--accent:var(--doclang-accent,#2563eb);--placeholder-bg:var(--doclang-placeholder-bg,#fafafa);--font-ui:var(--doclang-font-ui,system-ui, -apple-system, \"Segoe UI\", sans-serif);--font-mono:var(--doclang-font-mono,ui-monospace, \"Cascadia Code\", \"Source Code Pro\", monospace);--markup-bg:var(--doclang-markup-bg,#fff);--markup-fg:var(--doclang-markup-fg,#24292e);--markup-hover:var(--doclang-markup-hover,#2563eb14);--markup-selected:var(--doclang-markup-selected,#2563eb24);--kind-text:var(--doclang-kind-text,#2563eb);--kind-heading:var(--doclang-kind-heading,#7c3aed);--kind-list:var(--doclang-kind-list,#ea580c);--kind-ldiv:var(--doclang-kind-ldiv,#ea580c);--kind-table:var(--doclang-kind-table,#16a34a);--kind-index:var(--doclang-kind-index,#0d9488);--kind-formula:var(--doclang-kind-formula,#0891b2);--kind-code:var(--doclang-kind-code,#475569);--kind-picture:var(--doclang-kind-picture,#db2777);--kind-group:var(--doclang-kind-group,#4f46e5);--kind-footnote:var(--doclang-kind-footnote,#a16207);--kind-page_header:var(--doclang-kind-page_header,#71717a);--kind-page_footer:var(--doclang-kind-page_footer,#71717a);--kind-caption:var(--doclang-kind-caption,#71717a);--kind-field:var(--doclang-kind-field,#d97706);--kind-default:var(--doclang-kind-default,#dc2626)}@media (prefers-color-scheme:dark){:host{--lightningcss-light: ;--lightningcss-dark:initial;--bg:var(--doclang-bg,#09090b);--panel:var(--doclang-panel,#18181b);--border:var(--doclang-border,#3f3f46);--text:var(--doclang-text,#fafafa);--muted:var(--doclang-muted,#a1a1aa);--placeholder-bg:var(--doclang-placeholder-bg,#27272a);--markup-bg:var(--doclang-markup-bg,#1e1e1e);--markup-fg:var(--doclang-markup-fg,#d4d4d4);--markup-hover:var(--doclang-markup-hover,#60a5fa1a);--markup-selected:var(--doclang-markup-selected,#60a5fa2e);--kind-text:var(--doclang-kind-text,#60a5fa);--kind-heading:var(--doclang-kind-heading,#a78bfa);--kind-list:var(--doclang-kind-list,#fb923c);--kind-ldiv:var(--doclang-kind-ldiv,#fb923c);--kind-table:var(--doclang-kind-table,#4ade80);--kind-index:var(--doclang-kind-index,#2dd4bf);--kind-formula:var(--doclang-kind-formula,#22d3ee);--kind-code:var(--doclang-kind-code,#94a3b8);--kind-picture:var(--doclang-kind-picture,#f472b6);--kind-group:var(--doclang-kind-group,#818cf8);--kind-footnote:var(--doclang-kind-footnote,#facc15);--kind-page_header:var(--doclang-kind-page_header,#a1a1aa);--kind-page_footer:var(--doclang-kind-page_footer,#a1a1aa);--kind-caption:var(--doclang-kind-caption,#a1a1aa);--kind-field:var(--doclang-kind-field,#fbbf24);--kind-default:var(--doclang-kind-default,#f87171)}}:host{display:contents}.dropdown-wrap{position:relative}.dropdown-btn{appearance:none;color:var(--muted);cursor:pointer;white-space:nowrap;font-size:.8125rem;font-weight:500;line-height:1.2;font:inherit;background:0 0;border:1px solid #0000;border-radius:.375rem;flex-shrink:0;align-items:center;padding:.35rem .45rem .35rem .55rem;transition:color .12s,background .12s,border-color .12s;display:inline-flex}.dropdown-btn:after{content:\"\";opacity:.65;border-bottom:1.5px solid;border-right:1.5px solid;flex-shrink:0;width:.32rem;height:.32rem;margin-top:-.14em;margin-left:.3rem;transform:rotate(45deg)}.dropdown-btn:hover{color:var(--text);background:color-mix(in srgb, var(--text) 5%, transparent)}.dropdown-btn[aria-expanded=true]{color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, var(--panel));border-color:color-mix(in srgb, var(--accent) 22%, transparent)}.dropdown-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.dropdown-panel{z-index:30;border:1px solid var(--border);background:var(--panel);min-width:11rem;box-shadow:0 .5rem 1.25rem color-mix(in srgb, var(--text) 12%, transparent);border-radius:.375rem;padding:.5rem 0;position:absolute;top:calc(100% + .35rem);right:0}", Un = class extends T {
+	constructor(...e) {
+		super(...e), this.label = "", this._open = !1, this._onBtnClick = (e) => {
+			e.stopPropagation(), this.setOpen(!this._open);
+		}, this._onDocClick = (e) => {
+			this._open && (e.composedPath().includes(this) || this.setOpen(!1));
+		}, this._onDocKeydown = (e) => {
+			this._open && e.key === "Escape" && this.setOpen(!1);
+		};
+	}
+	static {
+		this.styles = s(Hn);
+	}
+	render() {
+		return b`
+      <div class="dropdown-wrap">
+        <button
+          type="button"
+          class="dropdown-btn"
+          aria-expanded=${this._open ? "true" : "false"}
+          aria-haspopup="true"
+          @click=${this._onBtnClick}
+        >
+          ${this.label}
+        </button>
+        ${this._open ? b`<div class="dropdown-panel" role="menu"><slot></slot></div>` : C}
+      </div>
+    `;
+	}
+	setOpen(e) {
+		this._open = e, this.requestUpdate();
+	}
+	get isOpen() {
+		return this._open;
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("click", this._onDocClick), document.addEventListener("keydown", this._onDocKeydown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), document.removeEventListener("click", this._onDocClick), document.removeEventListener("keydown", this._onDocKeydown);
+	}
+};
+H([D({ type: String })], Un.prototype, "label", void 0), Un = H([E("doclang-dropdown")], Un);
+//#endregion
+//#region src/components/viewer/toolbar.ts
+var Wn = class extends T {
+	constructor(...e) {
+		super(...e), this._demoLoading = !1, this._panes = {
+			file: !0,
+			page: !0,
+			markup: !0,
+			reading: !0,
+			fileAvailable: !1,
+			pageAvailable: !1,
+			hasState: !1
+		}, this._inputArchiveRef = A(), this._dropdownRef = A(), this._onArchiveChange = (e) => {
+			let t = e.target;
+			this.dispatchEvent(new CustomEvent("doclang-open-files", {
+				bubbles: !0,
+				composed: !0,
+				detail: { files: [...t.files ?? []] }
+			})), t.value = "";
+		};
+	}
+	static {
+		this.styles = s(Vn);
+	}
+	render() {
+		let { file: e, page: t, markup: n, reading: r, fileAvailable: i, pageAvailable: a, hasState: o } = this._panes;
+		return b`
+      <div class="toolbar">
+        <doclang-dropdown
+          ${j(this._dropdownRef)}
+          label="Views"
+        >
+          <label
+            class=${W({
+			"toolbar-options-item": !0,
+			"toolbar-options-item-disabled": !i
+		})}
+          >
+            <input
+              type="checkbox"
+              class="cb-file-pane"
+              role="menuitemcheckbox"
+              .checked=${i && e}
+              ?disabled=${!i}
+              @change=${(e) => this._emitTogglePane("file", e.target.checked)}
+            />
+            <span>Files</span>
+          </label>
+          <label
+            class=${W({
+			"toolbar-options-item": !0,
+			"toolbar-options-item-disabled": !a
+		})}
+          >
+            <input
+              type="checkbox"
+              class="cb-page-pane"
+              role="menuitemcheckbox"
+              .checked=${a && t}
+              ?disabled=${!a}
+              @change=${(e) => this._emitTogglePane("page", e.target.checked)}
+            />
+            <span>Original page</span>
+          </label>
+          <label
+            class=${W({
+			"toolbar-options-item": !0,
+			"toolbar-options-item-disabled": !o
+		})}
+          >
+            <input
+              type="checkbox"
+              class="cb-markup-pane"
+              role="menuitemcheckbox"
+              .checked=${n}
+              ?disabled=${!o}
+              @change=${(e) => this._emitTogglePane("markup", e.target.checked)}
+            />
+            <span>DocLang</span>
+          </label>
+          <label
+            class=${W({
+			"toolbar-options-item": !0,
+			"toolbar-options-item-disabled": !o
+		})}
+          >
+            <input
+              type="checkbox"
+              class="cb-reading-pane"
+              role="menuitemcheckbox"
+              .checked=${r}
+              ?disabled=${!o}
+              @change=${(e) => this._emitTogglePane("reading", e.target.checked)}
+            />
+            <span>Reading view</span>
+          </label>
+          <div class="toolbar-options-divider" role="separator"></div>
+          <button
+            type="button"
+            class="toolbar-options-reset"
+            role="menuitem"
+            ?disabled=${!o}
+            @click=${() => this.dispatchEvent(new CustomEvent("doclang-reset-pane-layout", {
+			bubbles: !0,
+			composed: !0
+		}))}
+          >
+            Reset views
+          </button>
+        </doclang-dropdown>
+        <span class="header-divider" aria-hidden="true"></span>
+        <span class="toolbar-file-group">
+          <label
+            class="file-btn"
+            title="Open a DocLang file (.dclx, .dclg)"
+          >
+            Open file
+            <input
+              ${j(this._inputArchiveRef)}
+              type="file"
+              class="input-archive"
+              multiple
+              accept=".dclx,.zip,.dclg,.xml,application/zip,application/xml,text/xml"
+              @change=${this._onArchiveChange}
+            />
+          </label>
+        </span>
+        <button
+          type="button"
+          class="btn-demo"
+          ?disabled=${this._demoLoading}
+          @click=${() => this.dispatchEvent(new CustomEvent("doclang-load-demo", {
+			bubbles: !0,
+			composed: !0
+		}))}
+        >
+          Load demo
+        </button>
+        <span class="header-divider" aria-hidden="true"></span>
+        <a href="https://doclang.ai/" class="header-site-link">doclang.ai</a>
+      </div>
+    `;
+	}
+	syncPaneToggles(e) {
+		this._panes = e, this.requestUpdate();
+	}
+	setDemoLoading(e) {
+		this._demoLoading = e, this.requestUpdate();
+	}
+	_emitTogglePane(e, t) {
+		this.dispatchEvent(new CustomEvent("doclang-toggle-pane", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				pane: e,
+				checked: t
+			}
+		}));
+	}
+};
+Wn = H([E("doclang-toolbar")], Wn);
+//#endregion
+//#region node_modules/lit-html/directives/repeat.js
+var Gn = (e, t, n) => {
+	let r = /* @__PURE__ */ new Map();
+	for (let i = t; i <= n; i++) r.set(e[i], i);
+	return r;
+}, Kn = nt(class extends rt {
+	constructor(e) {
+		if (super(e), e.type !== tt.CHILD) throw Error("repeat() can only be used in text expressions");
+	}
+	dt(e, t, n) {
+		let r;
+		n === void 0 ? n = t : t !== void 0 && (r = t);
+		let i = [], a = [], o = 0;
+		for (let t of e) i[o] = r ? r(t, o) : o, a[o] = n(t, o), o++;
+		return {
+			values: a,
+			keys: i
+		};
+	}
+	render(e, t, n) {
+		return this.dt(e, t, n).values;
+	}
+	update(e, [t, n, r]) {
+		let i = $e(e), { values: a, keys: o } = this.dt(t, n, r);
+		if (!Array.isArray(i)) return this.ut = o, a;
+		let s = this.ut ??= [], c = [], l, u, d = 0, f = i.length - 1, p = 0, m = a.length - 1;
+		for (; d <= f && p <= m;) if (i[d] === null) d++;
+		else if (i[f] === null) f--;
+		else if (s[d] === o[p]) c[p] = k(i[d], a[p]), d++, p++;
+		else if (s[f] === o[m]) c[m] = k(i[f], a[m]), f--, m--;
+		else if (s[d] === o[m]) c[m] = k(i[d], a[m]), Xe(e, c[m + 1], i[d]), d++, m--;
+		else if (s[f] === o[p]) c[p] = k(i[f], a[p]), Xe(e, i[d], i[f]), f--, p++;
+		else if (l === void 0 && (l = Gn(o, p, m), u = Gn(s, d, f)), l.has(s[d])) {
+			if (l.has(s[f])) {
+				let t = u.get(o[p]), n = t === void 0 ? null : i[t];
+				if (n === null) {
+					let t = Xe(e, i[d]);
+					k(t, a[p]), c[p] = t;
+				} else c[p] = k(n, a[p]), Xe(e, i[d], n), i[t] = null;
+				p++;
+			} else et(i[f]), f--;
+		} else et(i[d]), d++;
+		for (; p <= m;) {
+			let t = Xe(e, c[m + 1]);
+			k(t, a[p]), c[p++] = t;
+		}
+		for (; d <= f;) {
+			let e = i[d++];
+			e !== null && et(e);
+		}
+		return this.ut = o, Qe(e, c), S;
+	}
+}), qn = ":host{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:var(--doclang-bg,#f4f4f5);--panel:var(--doclang-panel,#fff);--border:var(--doclang-border,#d4d4d8);--text:var(--doclang-text,#18181b);--muted:var(--doclang-muted,#71717a);--accent:var(--doclang-accent,#2563eb);--placeholder-bg:var(--doclang-placeholder-bg,#fafafa);--font-ui:var(--doclang-font-ui,system-ui, -apple-system, \"Segoe UI\", sans-serif);--font-mono:var(--doclang-font-mono,ui-monospace, \"Cascadia Code\", \"Source Code Pro\", monospace);--markup-bg:var(--doclang-markup-bg,#fff);--markup-fg:var(--doclang-markup-fg,#24292e);--markup-hover:var(--doclang-markup-hover,#2563eb14);--markup-selected:var(--doclang-markup-selected,#2563eb24);--kind-text:var(--doclang-kind-text,#2563eb);--kind-heading:var(--doclang-kind-heading,#7c3aed);--kind-list:var(--doclang-kind-list,#ea580c);--kind-ldiv:var(--doclang-kind-ldiv,#ea580c);--kind-table:var(--doclang-kind-table,#16a34a);--kind-index:var(--doclang-kind-index,#0d9488);--kind-formula:var(--doclang-kind-formula,#0891b2);--kind-code:var(--doclang-kind-code,#475569);--kind-picture:var(--doclang-kind-picture,#db2777);--kind-group:var(--doclang-kind-group,#4f46e5);--kind-footnote:var(--doclang-kind-footnote,#a16207);--kind-page_header:var(--doclang-kind-page_header,#71717a);--kind-page_footer:var(--doclang-kind-page_footer,#71717a);--kind-caption:var(--doclang-kind-caption,#71717a);--kind-field:var(--doclang-kind-field,#d97706);--kind-default:var(--doclang-kind-default,#dc2626)}@media (prefers-color-scheme:dark){:host{--lightningcss-light: ;--lightningcss-dark:initial;--bg:var(--doclang-bg,#09090b);--panel:var(--doclang-panel,#18181b);--border:var(--doclang-border,#3f3f46);--text:var(--doclang-text,#fafafa);--muted:var(--doclang-muted,#a1a1aa);--placeholder-bg:var(--doclang-placeholder-bg,#27272a);--markup-bg:var(--doclang-markup-bg,#1e1e1e);--markup-fg:var(--doclang-markup-fg,#d4d4d4);--markup-hover:var(--doclang-markup-hover,#60a5fa1a);--markup-selected:var(--doclang-markup-selected,#60a5fa2e);--kind-text:var(--doclang-kind-text,#60a5fa);--kind-heading:var(--doclang-kind-heading,#a78bfa);--kind-list:var(--doclang-kind-list,#fb923c);--kind-ldiv:var(--doclang-kind-ldiv,#fb923c);--kind-table:var(--doclang-kind-table,#4ade80);--kind-index:var(--doclang-kind-index,#2dd4bf);--kind-formula:var(--doclang-kind-formula,#22d3ee);--kind-code:var(--doclang-kind-code,#94a3b8);--kind-picture:var(--doclang-kind-picture,#f472b6);--kind-group:var(--doclang-kind-group,#818cf8);--kind-footnote:var(--doclang-kind-footnote,#facc15);--kind-page_header:var(--doclang-kind-page_header,#a1a1aa);--kind-page_footer:var(--doclang-kind-page_footer,#a1a1aa);--kind-caption:var(--doclang-kind-caption,#a1a1aa);--kind-field:var(--doclang-kind-field,#fbbf24);--kind-default:var(--doclang-kind-default,#f87171)}}:host{border-right:1px solid var(--border);background:var(--panel);--file-thumb-size:var(--doclang-file-thumb-size,3.75rem);--file-thumb-close-overflow:var(--doclang-file-thumb-close-overflow,.25rem);--file-item-pad-x:var(--doclang-file-item-pad-x,.35rem);--file-pane-pad-x:var(--doclang-file-pane-pad-x,.5rem);--file-pane-fit-width:var(--doclang-file-pane-fit-width,calc(( var(--file-pane-pad-x) * 2 + var(--file-item-pad-x) * 2 + var(--file-thumb-size) + var(--file-thumb-close-overflow) ) * 1.5));flex-direction:column;min-width:0;min-height:0;display:flex;overflow:hidden}:host([hidden]){display:none!important}:host(.pane-layout-last){border-right:none}.pane-header{box-sizing:border-box;letter-spacing:.04em;text-transform:uppercase;height:2.125rem;color:var(--muted);border-bottom:1px solid var(--border);background:var(--panel);justify-content:space-between;align-items:center;gap:.35rem;padding:0 .35rem;font-size:.75rem;font-weight:600;display:flex}.pane-header-title{text-overflow:ellipsis;white-space:nowrap;min-width:0;padding-inline:.4rem;overflow:hidden}.file-pane-close-all{appearance:none;color:var(--muted);font:inherit;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:.25rem;flex-shrink:0;height:1.25rem;padding:0 .15rem;font-size:.625rem;font-weight:600;line-height:1;transition:color .12s,background .12s,border-color .12s}.file-pane-close-all:hover{color:var(--text);background:color-mix(in srgb, var(--text) 5%, transparent)}.file-pane-close-all:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.pane-body{min-height:0;padding:.375rem var(--file-pane-pad-x,.5rem);flex:1;min-width:0;overflow:auto}.file-view-list{flex-direction:column;gap:.25rem;width:100%;min-width:0;margin:0;padding:0;list-style:none;display:flex}.file-view-list>li{width:100%;max-width:100%}.file-view-item{box-sizing:border-box;width:100%;max-width:100%;color:var(--text);font:inherit;text-align:center;padding:.5rem var(--file-item-pad-x,.35rem);cursor:pointer;background:0 0;border:none;border-radius:0;flex-direction:column;align-items:center;gap:.35rem;font-size:.8125rem;line-height:1.35;display:flex}.file-view-thumb-wrap{flex-shrink:0;position:relative}.file-view-close{appearance:none;border:1px solid var(--border);background:var(--bg);width:1rem;height:1rem;color:var(--muted);font:inherit;cursor:pointer;z-index:1;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:.75rem;line-height:1;display:flex;position:absolute;top:-.25rem;right:-.25rem;box-shadow:0 1px 2px #00000014}.file-view-close:hover{color:var(--text);background:var(--panel)}.file-view-close:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.file-view-thumb{width:var(--file-thumb-size,3.75rem);height:var(--file-thumb-size,3.75rem);background:var(--placeholder-bg);border:1px solid var(--border);border-radius:.25rem;flex-shrink:0;justify-content:center;align-items:center;display:flex;overflow:hidden}.file-view-thumb img{object-fit:contain;width:100%;height:100%;display:block}.file-view-thumb-placeholder{width:100%;height:100%;color:var(--muted);justify-content:center;align-items:center;display:flex}.file-view-thumb-placeholder svg{width:1.875rem;height:1.875rem;display:block}.file-view-label{text-overflow:ellipsis;white-space:nowrap;width:100%;max-width:100%;overflow:hidden}.file-view-item:hover{background:var(--markup-hover)}.file-view-item.is-active{background:var(--markup-selected);color:var(--accent);font-weight:500}.file-view-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}", Jn = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"/><polyline points=\"14 2 14 8 20 8\"/><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"/><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"/></svg>", Yn = class extends T {
+	constructor(...e) {
+		super(...e), this._onCloseAll = () => {
+			this.dispatchEvent(new CustomEvent("doclang-collection-close-all", {
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this._renderEntry = (e, t) => {
+			let n = (e) => {
+				e.target.closest(".file-view-close") || this._emitSelect(t);
+			}, r = (e) => {
+				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._emitSelect(t));
+			}, i = (e) => {
+				e.stopPropagation(), this._emitClose(t);
+			}, a = e.thumbnailUrl ? b`<img src=${e.thumbnailUrl} alt="" />` : b`<span
+          class="file-view-thumb-placeholder"
+          .innerHTML=${Jn}
+        ></span>`;
+			return b`
+      <li>
+        <div
+          class="file-view-item${e.isActive ? " is-active" : ""}"
+          title=${e.label}
+          tabindex="0"
+          role="option"
+          aria-selected=${e.isActive ? "true" : "false"}
+          @click=${n}
+          @keydown=${r}
+        >
+          <div class="file-view-thumb-wrap">
+            <span class="file-view-thumb" aria-hidden="true">${a}</span>
+            <button
+              type="button"
+              class="file-view-close"
+              aria-label="Close ${e.label}"
+              @click=${i}
+            >
+              ×
+            </button>
+          </div>
+          <span class="file-view-label">${e.label}</span>
+        </div>
+      </li>
+    `;
+		};
+	}
+	static {
+		this.styles = s(qn);
+	}
+	render() {
+		let e = (this.entries?.length ?? 0) > 0;
+		return b`
+      <div class="pane-header">
+        <span class="pane-header-title">Files</span>
+        ${e ? b`<button
+          type="button"
+          class="file-pane-close-all"
+          aria-label="Clear all open files"
+          @click=${this._onCloseAll}
+        >
+          Clear
+        </button>` : C}
+      </div>
+      <div class="pane-body">${e ? b`
+          <ul class="file-view-list" role="listbox" aria-label="Open files">
+            ${Kn(this.entries ?? [], (e, t) => t, this._renderEntry)}
+          </ul>
+        ` : C}</div>
+    `;
+	}
+	_emitSelect(e) {
+		this.dispatchEvent(new CustomEvent("doclang-collection-select", {
+			bubbles: !0,
+			composed: !0,
+			detail: { index: e }
+		}));
+	}
+	_emitClose(e) {
+		this.dispatchEvent(new CustomEvent("doclang-collection-close", {
+			bubbles: !0,
+			composed: !0,
+			detail: { index: e }
+		}));
+	}
+};
+H([D({ attribute: !1 })], Yn.prototype, "entries", void 0), Yn = H([E("doclang-collection-pane")], Yn);
+//#endregion
+//#region src/components/base/page-controller.ts
+var Xn = 200, Zn = 4, Qn = 100, $n = class {
+	constructor(e, t) {
+		this._pixelAccum = 0, this._gestureUntil = 0, this._lastFlipAt = 0, this._lastPage = null, this._onKeyDown = (e) => {
+			let t = e, n = this._host, r = n.document;
+			if (!r || r.markupOnly || r.pageCount <= 1) return;
+			let i = 0;
+			switch (t.key) {
+				case "ArrowDown":
+				case "PageDown":
+				case "ArrowRight":
+					i = 1;
+					break;
+				case "ArrowUp":
+				case "PageUp":
+				case "ArrowLeft": i = -1;
+			}
+			if (!i) return;
+			t.preventDefault();
+			let a = n.page + i;
+			a < 1 || a > r.pageCount || n.dispatchEvent(new CustomEvent("view-page", {
+				bubbles: !0,
+				composed: !0,
+				detail: { page: a }
+			}));
+		}, this._onWheel = (e) => {
+			let t = e, n = this._host, r = n.document;
+			if (!r || r.markupOnly || r.pageCount <= 1) return;
+			let i = this._getScrollPane(), a = this._dir(t);
+			if (!a) return;
+			if (i) {
+				let e = i.scrollTop <= 0, t = i.scrollTop + i.clientHeight >= i.scrollHeight - 1;
+				if ((i.scrollHeight > i.clientHeight || i.scrollWidth > i.clientWidth) && !(a < 0 && e) && !(a > 0 && t)) return;
+			}
+			let o = performance.now();
+			if (o - this._lastFlipAt < Xn) {
+				t.preventDefault();
+				return;
+			}
+			let s = n.page + a;
+			if (s < 1 || s > r.pageCount) {
+				t.preventDefault();
+				return;
+			}
+			t.preventDefault(), this._lastFlipAt = o, n.dispatchEvent(new CustomEvent("view-page", {
+				bubbles: !0,
+				composed: !0,
+				detail: { page: s }
+			}));
+		}, this._host = e, this._getScrollPane = t, e.addController(this);
+	}
+	hostConnected() {
+		this._host.addEventListener("wheel", this._onWheel, { passive: !1 }), this._host.addEventListener("keydown", this._onKeyDown);
+	}
+	hostDisconnected() {
+		this._host.removeEventListener("wheel", this._onWheel), this._host.removeEventListener("keydown", this._onKeyDown);
+	}
+	hostUpdated() {
+		let e = this._host.page;
+		if (this._lastPage !== null && this._lastPage !== e) {
+			let t = this._getScrollPane();
+			t && (t.scrollTop = (e > this._lastPage ? 1 : -1) > 0 ? 0 : t.scrollHeight);
+		}
+		this._lastPage = e;
+	}
+	_dir(e) {
+		if (e.deltaMode === 1) return e.deltaY > 0 ? 1 : e.deltaY < 0 ? -1 : 0;
+		if (e.deltaMode === 2) return Math.sign(e.deltaY);
+		let t = performance.now();
+		if (t > this._gestureUntil && (this._pixelAccum = 0), this._gestureUntil = t + Qn, this._pixelAccum += e.deltaY, Math.abs(this._pixelAccum) >= Zn) {
+			let e = this._pixelAccum > 0 ? 1 : -1;
+			return this._pixelAccum = 0, e;
+		}
+		return 0;
+	}
+}, er = ":host{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:var(--doclang-bg,#f4f4f5);--panel:var(--doclang-panel,#fff);--border:var(--doclang-border,#d4d4d8);--text:var(--doclang-text,#18181b);--muted:var(--doclang-muted,#71717a);--accent:var(--doclang-accent,#2563eb);--placeholder-bg:var(--doclang-placeholder-bg,#fafafa);--font-ui:var(--doclang-font-ui,system-ui, -apple-system, \"Segoe UI\", sans-serif);--font-mono:var(--doclang-font-mono,ui-monospace, \"Cascadia Code\", \"Source Code Pro\", monospace);--markup-bg:var(--doclang-markup-bg,#fff);--markup-fg:var(--doclang-markup-fg,#24292e);--markup-hover:var(--doclang-markup-hover,#2563eb14);--markup-selected:var(--doclang-markup-selected,#2563eb24);--kind-text:var(--doclang-kind-text,#2563eb);--kind-heading:var(--doclang-kind-heading,#7c3aed);--kind-list:var(--doclang-kind-list,#ea580c);--kind-ldiv:var(--doclang-kind-ldiv,#ea580c);--kind-table:var(--doclang-kind-table,#16a34a);--kind-index:var(--doclang-kind-index,#0d9488);--kind-formula:var(--doclang-kind-formula,#0891b2);--kind-code:var(--doclang-kind-code,#475569);--kind-picture:var(--doclang-kind-picture,#db2777);--kind-group:var(--doclang-kind-group,#4f46e5);--kind-footnote:var(--doclang-kind-footnote,#a16207);--kind-page_header:var(--doclang-kind-page_header,#71717a);--kind-page_footer:var(--doclang-kind-page_footer,#71717a);--kind-caption:var(--doclang-kind-caption,#71717a);--kind-field:var(--doclang-kind-field,#d97706);--kind-default:var(--doclang-kind-default,#dc2626)}@media (prefers-color-scheme:dark){:host{--lightningcss-light: ;--lightningcss-dark:initial;--bg:var(--doclang-bg,#09090b);--panel:var(--doclang-panel,#18181b);--border:var(--doclang-border,#3f3f46);--text:var(--doclang-text,#fafafa);--muted:var(--doclang-muted,#a1a1aa);--placeholder-bg:var(--doclang-placeholder-bg,#27272a);--markup-bg:var(--doclang-markup-bg,#1e1e1e);--markup-fg:var(--doclang-markup-fg,#d4d4d4);--markup-hover:var(--doclang-markup-hover,#60a5fa1a);--markup-selected:var(--doclang-markup-selected,#60a5fa2e);--kind-text:var(--doclang-kind-text,#60a5fa);--kind-heading:var(--doclang-kind-heading,#a78bfa);--kind-list:var(--doclang-kind-list,#fb923c);--kind-ldiv:var(--doclang-kind-ldiv,#fb923c);--kind-table:var(--doclang-kind-table,#4ade80);--kind-index:var(--doclang-kind-index,#2dd4bf);--kind-formula:var(--doclang-kind-formula,#22d3ee);--kind-code:var(--doclang-kind-code,#94a3b8);--kind-picture:var(--doclang-kind-picture,#f472b6);--kind-group:var(--doclang-kind-group,#818cf8);--kind-footnote:var(--doclang-kind-footnote,#facc15);--kind-page_header:var(--doclang-kind-page_header,#a1a1aa);--kind-page_footer:var(--doclang-kind-page_footer,#a1a1aa);--kind-caption:var(--doclang-kind-caption,#a1a1aa);--kind-field:var(--doclang-kind-field,#fbbf24);--kind-default:var(--doclang-kind-default,#f87171)}}:host{border-right:1px solid var(--border);background:var(--panel);--xml-tag:var(--doclang-xml-tag,#116329);--xml-bracket:var(--doclang-xml-bracket,#24292e);--xml-attr-name:var(--doclang-xml-attr-name,#0550ae);--xml-attr-value:var(--doclang-xml-attr-value,#0a3069);--xml-text:var(--doclang-xml-text,#24292e);--xml-cdata:var(--doclang-xml-cdata,#6a737d);--xml-cdata-delimiter:var(--doclang-xml-cdata-delimiter,#6a737d);flex-direction:column;min-width:0;min-height:0;display:flex}:host([hidden]){display:none!important}:host(.pane-layout-last){border-right:none}.pane-header{box-sizing:border-box;letter-spacing:.04em;text-transform:uppercase;height:2.125rem;color:var(--muted);border-bottom:1px solid var(--border);background:var(--panel);align-items:center;gap:.5rem;padding:0 .75rem;font-size:.75rem;font-weight:600;display:flex}.pane-body{background:var(--markup-bg);min-height:0;color:var(--markup-fg);flex:1;padding:0;overflow:auto}.pane-body .placeholder{margin:1rem}.placeholder{min-height:12rem;color:var(--muted);background:var(--placeholder-bg);border:1px dashed var(--border);text-align:center;border-radius:.5rem;justify-content:center;align-items:center;padding:2rem;font-style:italic;display:flex}pre.markup{font-family:var(--font-mono);white-space:pre-wrap;word-break:break-word;margin:0;font-size:.8125rem;line-height:1.5}.markup{font-family:var(--font-mono);tab-size:2;--markup-indent:2ch;--markup-gutter-width:1rem;margin:0;padding:.75rem 1rem 1rem;font-size:.8125rem;line-height:1.55}.markup-ghost-tag-part{opacity:.35;cursor:help}.head-tooltip{border-collapse:collapse;width:100%;font-size:.6875rem;line-height:1.4}.head-tooltip th{color:var(--muted);text-align:left;vertical-align:top;white-space:nowrap;padding:.1rem .55rem .1rem 0;font-weight:600}.head-tooltip td{vertical-align:top;word-break:break-word;padding:.1rem 0}.head-tooltip .head-default{color:var(--muted);white-space:nowrap;font-style:italic}.markup-el{cursor:pointer;border-radius:.2rem}.markup-el:hover{background:var(--markup-hover)}.markup-el.selected{background:var(--markup-selected);box-shadow:inset 0 0 0 1px var(--accent)}.markup-line{white-space:pre-wrap;word-break:break-word;cursor:pointer;border-radius:.15rem;padding:0 .25rem}.markup-line-content{min-width:0;padding-left:calc(var(--markup-depth,0) * var(--markup-indent));align-items:baseline;display:flex}.markup-gutter{flex:0 0 var(--markup-gutter-width);width:var(--markup-gutter-width);justify-content:center;align-items:center;display:flex}.markup-line-body{flex:auto;min-width:0}summary::-webkit-details-marker{display:none}summary{list-style:none;display:block}summary:focus{outline:none}.markup-fold-toggle{appearance:none;width:var(--markup-gutter-width);height:1rem;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:.15rem;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}.markup-fold-toggle:before{content:\"\";border-top:4px solid #0000;border-bottom:4px solid #0000;border-left:5px solid;width:0;height:0;transition:transform .12s;display:block;transform:rotate(90deg)}details:not([open])>summary .markup-fold-toggle:before{transform:rotate(0)}.markup-fold-toggle:hover{background:var(--markup-hover);color:var(--markup-fg)}.markup-fold-suffix{display:none}details:not([open])>summary .markup-fold-suffix{display:inline}details:not([open])>.markup-fold-body{display:none}.xml-tag{color:var(--xml-tag)}.xml-bracket{color:var(--xml-bracket)}.xml-attr-name{color:var(--xml-attr-name)}.xml-attr-value{color:var(--xml-attr-value)}.xml-attr-value-truncatable{display:inline}.xml-attr-value-chip{appearance:none;border:1px solid var(--border);background:var(--placeholder-bg);color:var(--muted);font-family:var(--font-ui,system-ui, sans-serif);cursor:pointer;vertical-align:baseline;white-space:nowrap;border-radius:.25rem;align-items:center;gap:.3em;margin:0 0 0 .35em;padding:.08em .45em .08em .5em;font-size:.72em;font-weight:600;line-height:1.35;display:inline-flex}.xml-attr-value-chip:after{content:\"\";opacity:.75;border-top:.28em solid;border-left:.22em solid #0000;border-right:.22em solid #0000;width:0;height:0;transition:transform .12s}.xml-attr-value-chip[aria-expanded=true]:after{transform:rotate(180deg)}.xml-attr-value-chip:hover,.xml-attr-value-chip[aria-expanded=true]{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, var(--placeholder-bg))}.markup-embedded-uri-panel{cursor:text}.markup-embedded-uri-panel:hover{background:0 0}.markup-embedded-uri-panel-body{max-height:8rem;color:var(--xml-attr-value);word-break:break-all;background:var(--placeholder-bg);border:1px solid var(--border);-webkit-user-select:text;user-select:text;border-radius:.25rem;margin:.1rem 0 .25rem;padding:.45rem .6rem;overflow:auto}.xml-text{color:var(--xml-text)}.xml-cdata{color:var(--xml-cdata)}.xml-cdata-delimiter{color:var(--xml-cdata-delimiter)}@media (prefers-color-scheme:dark){:host{--xml-tag:var(--doclang-xml-tag,#4ec9b0);--xml-bracket:var(--doclang-xml-bracket,gray);--xml-attr-name:var(--doclang-xml-attr-name,#9cdcfe);--xml-attr-value:var(--doclang-xml-attr-value,#ce9178);--xml-text:var(--doclang-xml-text,#d4d4d4);--xml-cdata:var(--doclang-xml-cdata,#b5cea8);--xml-cdata-delimiter:var(--doclang-xml-cdata-delimiter,gray)}}", tr = "DocLang virtual <text>; wrapping tags not included in source", nr = 30;
+function rr(e) {
+	return !e || e.length <= nr ? !1 : /^(data:image\/|blob:)/i.test(e);
+}
+function ir(e) {
+	if (e < 1024) return `${e} B`;
+	if (e < 1048576) {
+		let t = e / 1024;
+		return t < 10 ? `${t.toFixed(1)} KB` : `${Math.round(t)} KB`;
+	}
+	return `${(e / 1048576).toFixed(1)} MB`;
+}
+function ar(e) {
+	if (/^blob:/i.test(e)) return e.length >= 1024 ? `${Math.round(e.length / 1024)} KB URL` : `${e.length} char URL`;
+	let t = e.indexOf(",");
+	if (t === -1) return "embedded data";
+	let n = e.slice(0, t), r = e.slice(t + 1).replace(/\s/g, ""), i = /^data:([^;,]+)/i.exec(n)?.[1] ?? "";
+	return `${i.startsWith("image/") ? i.slice(6) : i || "data"} · ${ir(Math.floor(r.replace(/=+$/, "").length * 3 / 4))}`;
+}
+function or(e) {
+	for (let t = 0; t < e.length; t += 1) {
+		let n = e[t];
+		if (n && (P(n) && !F(n) || n.nodeType === Node.ELEMENT_NODE)) return !0;
+	}
+	return !1;
+}
+function sr(e) {
+	if (F(e)) return !0;
+	if (e.nodeType !== Node.ELEMENT_NODE) return !1;
+	let t = L(e);
+	return t === "location" || M.has(t);
+}
+function cr(e) {
+	if (!or(e)) return !1;
+	for (let t of e) if (!sr(t) && (P(t) || t.nodeType === Node.ELEMENT_NODE && !Ft(t))) return !0;
+	return !1;
+}
+var lr = class extends U {
+	constructor(...e) {
+		super(...e), this._wheel = new $n(this, () => this.scrollPane), this._hasMarkup = null, this._markupTemplate = null, this._onBodyClick = (e) => {
+			let t = e.target, n = t.closest(".xml-attr-value-chip");
+			if (n) {
+				e.stopPropagation(), this._toggleTruncatableMarkupAttrValue(n);
+				return;
+			}
+			let r = t.closest(".markup-el-virtual-text"), i = r?.hasAttribute("data-element-id") ? r.getAttribute("data-element-id") : t.closest(".markup-el[data-element-id]")?.getAttribute("data-element-id") ?? null;
+			i && this.dispatchEvent(new CustomEvent("doclang-element-select", {
+				bubbles: !0,
+				composed: !0,
+				detail: { id: i }
+			}));
+		}, this._onSummaryClick = (e) => {
+			let t = e.target;
+			!t.closest(".markup-fold-toggle") && !t.closest(".markup-gutter") && e.preventDefault();
+		};
+	}
+	static {
+		this.styles = s(er);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.classList.add("pane", "pane-markup");
+	}
+	render() {
+		return b`<div class="pane-header">DocLang</div><div class="pane-body" id="markup-pane" @click=${this._onBodyClick}>${this._hasMarkup === !1 ? b`<div class="placeholder">${fn}</div>` : this._hasMarkup === !0 && this._markupTemplate ? b`<div class="markup">${this._markupTemplate}</div>` : C}</div>`;
+	}
+	get scrollPane() {
+		return this.shadowRoot?.querySelector(".pane-body") ?? null;
+	}
+	_applySelection() {
+		if (!this.shadowRoot) return;
+		for (let e of this.shadowRoot.querySelectorAll(".markup-el.selected")) e.classList.remove("selected");
+		if (!this.selected) return;
+		let e = this.shadowRoot.querySelector(`.markup-el-virtual-text[data-element-id="${this.selected}"]`) ?? this.shadowRoot.querySelector(`[data-element-id="${this.selected}"]`);
+		e && (e.classList.add("selected"), e.scrollIntoView({
+			block: "nearest",
+			behavior: "smooth"
+		}));
+	}
+	_renderDocument() {
+		let e = this._docState;
+		if (!e) {
+			this._markupTemplate = null, this._hasMarkup = null;
+			return;
+		}
+		let t = e.segments[this.page - 1] ?? [], n = _n(t);
+		e.elementIds = n, e.idToElement = vn(n), hn(t) ? (this._markupTemplate = this._buildMarkupView(t, n), this._hasMarkup = !0) : (this._markupTemplate = null, this._hasMarkup = !1), this.requestUpdate();
+	}
+	_clearDocument() {
+		this._markupTemplate = null, this._hasMarkup = null, this.requestUpdate();
+	}
+	_buildMarkupView(e, t) {
+		let n = [];
+		for (let r of e) r.nodeType === Node.ELEMENT_NODE && n.push(this._renderMarkupElement(r, 0, t));
+		return n;
+	}
+	_createEmbeddedUriContinuationPanel(e, t) {
+		let n = document.createElement("div");
+		return Ve(b`<div class="markup-line markup-embedded-uri-panel" style="--markup-depth: ${t}"><span class="markup-line-content"><span class="markup-gutter" aria-hidden="true"></span><span class="markup-line-body"><div class="markup-embedded-uri-panel-body" @click=${(e) => e.stopPropagation()}>${e}</div></span></span></div>`, n), n.firstElementChild;
+	}
+	_renderTruncatableMarkupAttrValue(e) {
+		let t = ar(e);
+		return b`<span class="xml-attr-value xml-attr-value-truncatable" data-full-value=${e}><span class="xml-attr-value-text">${e.slice(0, nr)}</span><button type="button" class="xml-attr-value-chip" data-collapsed-label=${t} aria-expanded="false" aria-label="Show full value (${t})"><span class="xml-attr-value-chip-label">${t}</span></button></span>`;
+	}
+	_toggleTruncatableMarkupAttrValue(e) {
+		let t = e.closest(".xml-attr-value-truncatable");
+		if (!t) return;
+		let n = t.closest(".markup-line"), r = t.dataset.fullValue ?? "", i = e.querySelector(".xml-attr-value-chip-label"), a = e.dataset.collapsedLabel ?? i?.textContent ?? "";
+		if (e.getAttribute("aria-expanded") === "true") {
+			e.setAttribute("aria-expanded", "false"), e.setAttribute("aria-label", `Show full value (${a})`), i && (i.textContent = a), n?.nextElementSibling?.classList.contains("markup-embedded-uri-panel") && n.nextElementSibling.remove();
+			return;
+		}
+		if (e.setAttribute("aria-expanded", "true"), e.setAttribute("aria-label", "Hide full value"), i && (i.textContent = "hide"), !n || n.nextElementSibling?.classList.contains("markup-embedded-uri-panel")) return;
+		let o = Number(n.style.getPropertyValue("--markup-depth") || 0);
+		n.insertAdjacentElement("afterend", this._createEmbeddedUriContinuationPanel(r, o));
+	}
+	_renderXmlSpan(e, t, { ghost: n = !1 } = {}) {
+		return n ? b`<span class="${e} markup-ghost-tag-part" title=${tr}>${t}</span>` : b`<span class=${e}>${t}</span>`;
+	}
+	_renderMarkupLineRow(e, t, { foldToggle: n = !1 } = {}) {
+		return b`<div class="markup-line" style="--markup-depth: ${e}"><span class="markup-line-content"><span class="markup-gutter" aria-hidden="true">${n ? b`<span class="markup-fold-toggle"></span>` : C}</span><span class="markup-line-body">${t}</span></span></div>`;
+	}
+	_renderMarkupAttrValue(e) {
+		return rr(e) ? this._renderTruncatableMarkupAttrValue(e) : this._renderXmlSpan("xml-attr-value", e);
+	}
+	_renderMarkupAttributes(e) {
+		return e.map(({ name: e, value: t }) => b` ${this._renderXmlSpan("xml-attr-name", e)}${this._renderXmlSpan("xml-bracket", "=\"")}${this._renderMarkupAttrValue(t)}${this._renderXmlSpan("xml-bracket", "\"")}`);
+	}
+	_renderMarkupTextContent(e) {
+		let t = /^<!\[CDATA\[([\s\S]*)\]\]>$/.exec(e);
+		return t ? b`${this._renderXmlSpan("xml-cdata-delimiter", "<![CDATA[")}${this._renderXmlSpan("xml-cdata", t[1] ?? "")}${this._renderXmlSpan("xml-cdata-delimiter", "]]>")}` : this._renderXmlSpan("xml-text", e);
+	}
+	_renderOpenTagContent(e, t, n = !1) {
+		return b`${this._renderXmlSpan("xml-bracket", "<", { ghost: n })}${this._renderXmlSpan("xml-tag", e, { ghost: n })}${this._renderMarkupAttributes(t)}${this._renderXmlSpan("xml-bracket", ">", { ghost: n })}`;
+	}
+	_renderMarkupFoldableOpen(e, t, n, r) {
+		let i = !!r, a = b`${this._renderOpenTagContent(t, n, i)}<span class="markup-fold-suffix">${this._renderXmlSpan("xml-bracket", "...", { ghost: i })}${this._renderXmlSpan("xml-bracket", "</", { ghost: i })}${this._renderXmlSpan("xml-tag", t, { ghost: i })}${this._renderXmlSpan("xml-bracket", ">", { ghost: i })}</span>`;
+		return b`<summary class="markup-line markup-line-open" style="--markup-depth: ${e}" @click=${this._onSummaryClick}><span class="markup-line-content"><span class="markup-gutter" aria-hidden="true"><span class="markup-fold-toggle"></span></span><span class="markup-line-body">${a}</span></span></summary>`;
+	}
+	_renderMarkupCloseTag(e, t, n) {
+		let r = !!n, i = b`${this._renderXmlSpan("xml-bracket", "</", { ghost: r })}${this._renderXmlSpan("xml-tag", t, { ghost: r })}${this._renderXmlSpan("xml-bracket", ">", { ghost: r })}`;
+		return this._renderMarkupLineRow(e, i);
+	}
+	_renderMarkupSelfClosingTag(e, t, n) {
+		let r = b`${this._renderXmlSpan("xml-bracket", "<")}${this._renderXmlSpan("xml-tag", t)}${this._renderMarkupAttributes(n)}${this._renderXmlSpan("xml-bracket", "/>")}`;
+		return this._renderMarkupLineRow(e, r);
+	}
+	_renderMarkupInlineElement(e, t, n, r) {
+		let i = b`${this._renderOpenTagContent(t, n)}${this._renderMarkupTextContent(r)}${this._renderXmlSpan("xml-bracket", "</")}${this._renderXmlSpan("xml-tag", t)}${this._renderXmlSpan("xml-bracket", ">")}`;
+		return this._renderMarkupLineRow(e, i);
+	}
+	_renderMarkupTextLine(e, t) {
+		return this._renderMarkupLineRow(e, this._renderMarkupTextContent(t));
+	}
+	_renderMarkupNodesFromSlice(e, t, n) {
+		let r = [];
+		for (let i = 0; i < t.length; i += 1) {
+			let a = t[i];
+			if (a) {
+				if (P(a)) {
+					let t = Dt(a);
+					t && r.push(this._renderMarkupTextLine(e, t));
+				} else a.nodeType === Node.ELEMENT_NODE && r.push(this._renderMarkupElement(a, e, n));
+			}
+		}
+		return r;
+	}
+	_renderMarkupVirtualText(e, t, n, r) {
+		return cr(n) ? b`<details class="markup-el markup-el-foldable markup-el-virtual-text" ?open=${!0} data-element-id=${r.get(t) ?? C}>${this._renderMarkupFoldableOpen(e, "text", [], tr)}<div class="markup-fold-body"><div class="markup-children">${this._renderMarkupNodesFromSlice(e + 1, n, r)}</div>${this._renderMarkupCloseTag(e, "text", tr)}</div></details>` : this._renderMarkupNodesFromSlice(e, n, r);
+	}
+	_renderMarkupFoldableElement(e, t, n, r) {
+		let i = L(e);
+		return b`<details class="markup-el markup-el-foldable" ?open=${!0} data-element-id=${n.get(e) ?? C}>${this._renderMarkupFoldableOpen(t, i, vt(e))}<div class="markup-fold-body"><div class="markup-children">${r(t + 1)}</div>${this._renderMarkupCloseTag(t, i)}</div></details>`;
+	}
+	_renderMarkupList(e, t, n) {
+		return this._renderMarkupFoldableElement(e, t, n, (t) => {
+			let r = [], i = [...e.childNodes], a = 0;
+			for (; a < i.length;) {
+				let e = i[a];
+				if (!e) {
+					a += 1;
+					continue;
+				}
+				if (e.nodeType === Node.ELEMENT_NODE && L(e) === "ldiv") break;
+				if (P(e) && F(e)) {
+					a += 1;
+					continue;
+				}
+				if (P(e)) break;
+				if (e.nodeType === Node.ELEMENT_NODE) {
+					let i = L(e);
+					if (M.has(i) || i === "location") {
+						r.push(this._renderMarkupElement(e, t, n)), a += 1;
+						continue;
+					}
+				}
+				break;
+			}
+			for (; a < i.length;) {
+				let e = i[a];
+				if (!e) {
+					a += 1;
+					continue;
+				}
+				if (e.nodeType !== Node.ELEMENT_NODE || L(e) !== "ldiv") {
+					r.push(...this._renderMarkupNodesFromSlice(t, [e], n)), a += 1;
+					continue;
+				}
+				let o = e;
+				r.push(this._renderMarkupElement(o, t, n)), a += 1;
+				let s = St(i, a);
+				r.push(this._renderMarkupVirtualText(t, o, i.slice(a, s), n)), a = s;
+			}
+			return r;
+		});
+	}
+	_renderMarkupOtslContainer(e, t, n) {
+		return this._renderMarkupFoldableElement(e, t, n, (t) => {
+			let r = [], i = [...e.childNodes], a = 0;
+			for (; a < i.length;) {
+				let e = i[a];
+				if (!e) {
+					a += 1;
+					continue;
+				}
+				if (e.nodeType === Node.ELEMENT_NODE && B(L(e))) break;
+				if (P(e) && F(e)) {
+					a += 1;
+					continue;
+				}
+				if (P(e)) break;
+				if (e.nodeType === Node.ELEMENT_NODE) {
+					let i = L(e);
+					if (M.has(i) || i === "location" || i === "h_thread") {
+						r.push(this._renderMarkupElement(e, t, n)), a += 1;
+						continue;
+					}
+				}
+				break;
+			}
+			for (; a < i.length;) {
+				let e = i[a];
+				if (!e) {
+					a += 1;
+					continue;
+				}
+				if (e.nodeType !== Node.ELEMENT_NODE) {
+					r.push(...this._renderMarkupNodesFromSlice(t, [e], n)), a += 1;
+					continue;
+				}
+				let o = L(e);
+				if (o === "nl") {
+					r.push(this._renderMarkupSelfClosingTag(t, "nl", [])), a += 1;
+					continue;
+				}
+				if (!B(o)) {
+					r.push(...this._renderMarkupNodesFromSlice(t, [e], n)), a += 1;
+					continue;
+				}
+				let s = e;
+				if (r.push(this._renderMarkupElement(s, t, n)), a += 1, _t.has(o)) continue;
+				let c = Ct(i, a);
+				r.push(this._renderMarkupVirtualText(t, s, i.slice(a, c), n)), a = c;
+			}
+			return r;
+		});
+	}
+	_renderMarkupElement(e, t, n) {
+		let r = L(e);
+		if (r === "list") return this._renderMarkupList(e, t, n);
+		if (N.has(r)) return this._renderMarkupOtslContainer(e, t, n);
+		let i = n.get(e), a = vt(e);
+		if (!e.childNodes.length) return b`<div class="markup-el" data-element-id=${i ?? C}>${this._renderMarkupSelfClosingTag(t, r, a)}</div>`;
+		let o = [...e.childNodes].filter((e) => P(e) && !F(e));
+		if (o.length > 0 && o.every(P) && !I(e).length) {
+			let n = Ot(e.childNodes);
+			if (n) return b`<div class="markup-el" data-element-id=${i ?? C}>${this._renderMarkupInlineElement(t, r, a, n)}</div>`;
+		}
+		return b`<details class="markup-el markup-el-foldable" ?open=${!0} data-element-id=${i ?? C}>${this._renderMarkupFoldableOpen(t, r, a)}<div class="markup-fold-body"><div class="markup-children">${[...e.childNodes].map((e) => {
+			if (P(e)) {
+				let n = Dt(e);
+				return n ? this._renderMarkupTextLine(t + 1, n) : C;
+			}
+			return e.nodeType === Node.ELEMENT_NODE ? this._renderMarkupElement(e, t + 1, n) : C;
+		})}</div>${this._renderMarkupCloseTag(t, r)}</div></details>`;
+	}
+};
+H([O()], lr.prototype, "_hasMarkup", void 0), H([O()], lr.prototype, "_markupTemplate", void 0), lr = H([E("doclang-markup-pane")], lr);
+//#endregion
+//#region src/components/page-img-pane/page-img-pane.css?inline
+var ur = ":host{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:var(--doclang-bg,#f4f4f5);--panel:var(--doclang-panel,#fff);--border:var(--doclang-border,#d4d4d8);--text:var(--doclang-text,#18181b);--muted:var(--doclang-muted,#71717a);--accent:var(--doclang-accent,#2563eb);--placeholder-bg:var(--doclang-placeholder-bg,#fafafa);--font-ui:var(--doclang-font-ui,system-ui, -apple-system, \"Segoe UI\", sans-serif);--font-mono:var(--doclang-font-mono,ui-monospace, \"Cascadia Code\", \"Source Code Pro\", monospace);--markup-bg:var(--doclang-markup-bg,#fff);--markup-fg:var(--doclang-markup-fg,#24292e);--markup-hover:var(--doclang-markup-hover,#2563eb14);--markup-selected:var(--doclang-markup-selected,#2563eb24);--kind-text:var(--doclang-kind-text,#2563eb);--kind-heading:var(--doclang-kind-heading,#7c3aed);--kind-list:var(--doclang-kind-list,#ea580c);--kind-ldiv:var(--doclang-kind-ldiv,#ea580c);--kind-table:var(--doclang-kind-table,#16a34a);--kind-index:var(--doclang-kind-index,#0d9488);--kind-formula:var(--doclang-kind-formula,#0891b2);--kind-code:var(--doclang-kind-code,#475569);--kind-picture:var(--doclang-kind-picture,#db2777);--kind-group:var(--doclang-kind-group,#4f46e5);--kind-footnote:var(--doclang-kind-footnote,#a16207);--kind-page_header:var(--doclang-kind-page_header,#71717a);--kind-page_footer:var(--doclang-kind-page_footer,#71717a);--kind-caption:var(--doclang-kind-caption,#71717a);--kind-field:var(--doclang-kind-field,#d97706);--kind-default:var(--doclang-kind-default,#dc2626)}@media (prefers-color-scheme:dark){:host{--lightningcss-light: ;--lightningcss-dark:initial;--bg:var(--doclang-bg,#09090b);--panel:var(--doclang-panel,#18181b);--border:var(--doclang-border,#3f3f46);--text:var(--doclang-text,#fafafa);--muted:var(--doclang-muted,#a1a1aa);--placeholder-bg:var(--doclang-placeholder-bg,#27272a);--markup-bg:var(--doclang-markup-bg,#1e1e1e);--markup-fg:var(--doclang-markup-fg,#d4d4d4);--markup-hover:var(--doclang-markup-hover,#60a5fa1a);--markup-selected:var(--doclang-markup-selected,#60a5fa2e);--kind-text:var(--doclang-kind-text,#60a5fa);--kind-heading:var(--doclang-kind-heading,#a78bfa);--kind-list:var(--doclang-kind-list,#fb923c);--kind-ldiv:var(--doclang-kind-ldiv,#fb923c);--kind-table:var(--doclang-kind-table,#4ade80);--kind-index:var(--doclang-kind-index,#2dd4bf);--kind-formula:var(--doclang-kind-formula,#22d3ee);--kind-code:var(--doclang-kind-code,#94a3b8);--kind-picture:var(--doclang-kind-picture,#f472b6);--kind-group:var(--doclang-kind-group,#818cf8);--kind-footnote:var(--doclang-kind-footnote,#facc15);--kind-page_header:var(--doclang-kind-page_header,#a1a1aa);--kind-page_footer:var(--doclang-kind-page_footer,#a1a1aa);--kind-caption:var(--doclang-kind-caption,#a1a1aa);--kind-field:var(--doclang-kind-field,#fbbf24);--kind-default:var(--doclang-kind-default,#f87171)}}:host{border-right:1px solid var(--border);background:var(--panel);--overlay-reading-order:var(--doclang-overlay-reading-order,#71717a);--overlay-fragment:var(--doclang-overlay-fragment,#9333ea);flex-direction:column;min-width:0;min-height:0;display:flex}:host([hidden]){display:none!important}:host(.pane-layout-last){border-right:none}.pane-header{box-sizing:border-box;letter-spacing:.04em;text-transform:uppercase;height:2.125rem;color:var(--muted);border-bottom:1px solid var(--border);background:var(--panel);justify-content:space-between;align-items:center;gap:.5rem;padding:0 .75rem;font-size:.75rem;font-weight:600;display:flex}.pane-header-title{min-width:0}.pane-page-controls{flex-shrink:0;align-items:center;gap:.5rem;display:flex}.page-zoom-control{-webkit-user-select:none;user-select:none;align-items:center;gap:.35rem;display:flex}.page-zoom-control-label{letter-spacing:.04em;text-transform:uppercase;color:var(--muted);cursor:pointer;font-size:.625rem;font-weight:600}.page-zoom-control input[type=range]{cursor:pointer;width:5.5rem;height:1rem;margin:0}.page-zoom-reset{appearance:none;border:1px solid var(--border);background:var(--bg);color:var(--muted);height:1.25rem;font:inherit;font-variant-numeric:tabular-nums;cursor:pointer;border-radius:.375rem;min-width:2.75rem;padding:0 .45rem;font-size:.6875rem;font-weight:600;line-height:1}.page-zoom-reset:not(:disabled):hover{border-color:var(--accent);color:var(--text)}.page-zoom-reset:disabled{opacity:.55;cursor:default}.pane-settings-toggle{appearance:none;color:var(--muted);cursor:pointer;white-space:nowrap;letter-spacing:.04em;text-transform:uppercase;height:1.25rem;font-size:.625rem;font-weight:600;line-height:1;font:inherit;background:0 0;border:1px solid #0000;border-radius:.25rem;flex-shrink:0;align-items:center;padding:0 .28rem 0 .4rem;transition:color .12s,background .12s,border-color .12s;display:inline-flex}.pane-settings-toggle:after{content:\"\";opacity:.65;border-bottom:1.5px solid;border-right:1.5px solid;flex-shrink:0;width:.26rem;height:.26rem;margin-top:-.1em;margin-left:.22rem;transform:rotate(45deg)}.pane-settings-toggle:hover{color:var(--text);background:color-mix(in srgb, var(--text) 5%, transparent)}.pane-settings-toggle[aria-expanded=true]{color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, var(--panel));border-color:color-mix(in srgb, var(--accent) 22%, transparent)}.pane-settings-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.pane-page-layout{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex;position:relative}.pane-body{flex-direction:column;flex:auto;min-width:0;min-height:0;padding:.75rem;display:flex;overflow:hidden}.settings-option{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:flex-start;gap:.5rem;font-size:.875rem;display:flex}.settings-option-primary+.settings-subgroup{margin-top:.65rem}.settings-option-primary{font-weight:600}.settings-subgroup{flex-direction:column;gap:.5rem;padding-left:.85rem;display:flex}.settings-reading-order-group{gap:.35rem;padding-left:1.6rem}.settings-option-nested{padding-left:0}.settings-option-sub{color:var(--muted);font-size:.8125rem}.settings-option-disabled{opacity:.45;cursor:not-allowed}.settings-option-disabled input{cursor:not-allowed}.settings-option input{cursor:pointer;flex-shrink:0;margin:.15rem 0 0}.settings-divider{background:var(--border);height:1px;margin:.75rem 0}.arrow-layer-row{justify-content:space-between;align-items:flex-start;gap:.375rem;display:flex}.arrow-layer-row .settings-option{flex:auto;min-width:0}.arrow-layer-row .settings-option span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.arrow-style-btn{appearance:none;width:1.25rem;height:.9rem;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:.25rem;flex:none;justify-content:center;align-items:center;margin:.1rem 0 0;padding:0;display:flex}.arrow-style-btn:before{content:\"\";border-top:.3rem solid #0000;border-bottom:.3rem solid #0000;border-left:.3rem solid;width:0;height:0;transition:transform .12s}.arrow-style-btn:hover{background:var(--bg);color:var(--text)}.arrow-style-btn[aria-expanded=true]{color:var(--text)}.arrow-style-btn[aria-expanded=true]:before{transform:rotate(90deg)}.arrow-layer-row.is-disabled .arrow-style-btn{opacity:.45;pointer-events:none}.arrow-style-fields{flex-direction:column;gap:.4rem;padding:.35rem 0 .55rem 1.6rem;display:flex}.settings-reading-order-group .arrow-style-fields{padding-left:.4rem}.arrow-style-fields[hidden]{display:none}.arrow-style-fields label{color:var(--muted);cursor:default;justify-content:space-between;align-items:center;gap:.5rem;font-size:.75rem;display:flex}.arrow-field-control{flex:auto;justify-content:flex-end;align-items:center;gap:.35rem;min-width:0;display:flex}.arrow-field-value{text-align:right;min-width:1.5rem;color:var(--text);font-variant-numeric:tabular-nums;flex:none}.arrow-style-fields input[type=range]{cursor:pointer;flex:auto;min-width:0;max-width:3.5rem}.arrow-style-fields input[type=color]{border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:.25rem;width:2.25rem;height:1.4rem;padding:0}.arrow-style-fields select{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--border);cursor:pointer;border-radius:.25rem;padding:.1rem .25rem;font-size:.75rem}.overlays-reset{font:inherit;color:var(--text);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:.25rem;margin-top:.6rem;padding:.3rem .55rem;font-size:.75rem}.overlays-reset:hover{background:var(--bg)}.page-view-port{scrollbar-gutter:stable;flex:auto;width:100%;min-width:0;height:100%;min-height:0;display:flex;overflow:auto}.pane-body.can-pan{cursor:grab}.pane-body.is-panning{cursor:grabbing;-webkit-user-select:none;user-select:none}.pane-body:focus{outline:none}.pane-body:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.placeholder{min-height:12rem;color:var(--muted);background:var(--placeholder-bg);border:1px dashed var(--border);text-align:center;border-radius:.5rem;justify-content:center;align-items:center;padding:2rem;font-style:italic;display:flex}.page-view{border:1px solid var(--border);border-radius:.25rem;flex-shrink:0;width:fit-content;margin:auto;line-height:0;display:block;position:relative;overflow:hidden}.page-view img{border:none;border-radius:0;width:auto;max-width:none;height:auto;max-height:none;display:block}.page-view img:not([data-layout-ready]){opacity:0}.page-view svg.overlay{pointer-events:auto;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.overlay rect.bbox.bbox-hidden,.overlay .overlay-badge.bbox-hidden{display:none}.overlay rect.bbox{stroke-width:2px;vector-effect:non-scaling-stroke;pointer-events:none}.kind-text{--doclang-kind-stroke:var(--kind-text)}.kind-heading{--doclang-kind-stroke:var(--kind-heading)}.kind-list{--doclang-kind-stroke:var(--kind-list)}.kind-ldiv{--doclang-kind-stroke:var(--kind-ldiv)}.kind-table{--doclang-kind-stroke:var(--kind-table)}.kind-index{--doclang-kind-stroke:var(--kind-index)}.kind-formula{--doclang-kind-stroke:var(--kind-formula)}.kind-code{--doclang-kind-stroke:var(--kind-code)}.kind-picture{--doclang-kind-stroke:var(--kind-picture)}.kind-group{--doclang-kind-stroke:var(--kind-group)}.kind-footnote{--doclang-kind-stroke:var(--kind-footnote)}.kind-page_header{--doclang-kind-stroke:var(--kind-page_header)}.kind-page_footer{--doclang-kind-stroke:var(--kind-page_footer)}.kind-caption{--doclang-kind-stroke:var(--kind-caption)}.kind-field{--doclang-kind-stroke:var(--kind-field)}.kind-default{--doclang-kind-stroke:var(--kind-default)}.overlay rect.bbox.selected{stroke-width:3.5px;filter:drop-shadow(0 0 3px color-mix(in srgb, var(--kind-stroke,var(--accent)) 60%, transparent));fill:color-mix(in srgb, var(--kind-stroke,var(--accent)) 30%, transparent)!important}.overlay rect.bbox.related:not(.selected){fill:color-mix(in srgb, var(--kind-stroke,var(--accent)) 30%, transparent)!important}.overlay rect.bbox.layer-furniture,.overlay rect.bbox.layer-background{stroke:color-mix(in srgb, var(--kind-stroke,var(--muted)) 50%, transparent);fill:url(#layer-hatch)!important}.overlay .layer-hatch-stripe{fill:var(--muted);fill-opacity:.06}.overlay rect.bbox.layer-furniture.selected,.overlay rect.bbox.layer-background.selected{fill:color-mix(in srgb, var(--kind-stroke,var(--accent)) 22%, transparent)!important}.overlay rect.bbox.layer-furniture.related:not(.selected),.overlay rect.bbox.layer-background.related:not(.selected){fill:color-mix(in srgb, var(--kind-stroke,var(--accent)) 18%, transparent)!important}.overlay .bbox-text{fill:color-mix(in srgb, var(--kind-text) 14%, transparent);stroke:var(--kind-text)}.overlay .bbox-heading{fill:color-mix(in srgb, var(--kind-heading) 14%, transparent);stroke:var(--kind-heading)}.overlay .bbox-list,.overlay .bbox-ldiv{fill:color-mix(in srgb, var(--kind-list) 14%, transparent);stroke:var(--kind-list)}.overlay .bbox-table{fill:color-mix(in srgb, var(--kind-table) 14%, transparent);stroke:var(--kind-table)}.overlay .bbox-index{fill:color-mix(in srgb, var(--kind-index) 14%, transparent);stroke:var(--kind-index)}.overlay .bbox-formula{fill:color-mix(in srgb, var(--kind-formula) 14%, transparent);stroke:var(--kind-formula)}.overlay .bbox-code{fill:color-mix(in srgb, var(--kind-code) 16%, transparent);stroke:var(--kind-code)}.overlay .bbox-picture{fill:color-mix(in srgb, var(--kind-picture) 14%, transparent);stroke:var(--kind-picture)}.overlay .bbox-group{fill:color-mix(in srgb, var(--kind-group) 14%, transparent);stroke:var(--kind-group)}.overlay .bbox-footnote{fill:color-mix(in srgb, var(--kind-footnote) 14%, transparent);stroke:var(--kind-footnote)}.overlay .bbox-page_header,.overlay .bbox-page_footer{fill:color-mix(in srgb, var(--kind-page_header) 14%, transparent);stroke:var(--kind-page_header)}.overlay .bbox-caption{fill:color-mix(in srgb, var(--kind-caption) 14%, transparent);stroke:var(--kind-caption)}.overlay line.caption-link{color:var(--arrow-caption-color,var(--kind-caption));stroke:currentColor;stroke-width:var(--arrow-caption-width,1.5);stroke-dasharray:var(--arrow-caption-dash,none);stroke-linecap:var(--arrow-caption-cap,butt);vector-effect:non-scaling-stroke;pointer-events:none;fill:none}.overlay line.caption-link.bbox-hidden{display:none}.overlay line.xref-link{color:var(--arrow-xref-color,var(--kind-footnote));stroke:currentColor;stroke-width:var(--arrow-xref-width,1.5);stroke-dasharray:var(--arrow-xref-dash,none);stroke-linecap:var(--arrow-xref-cap,butt);vector-effect:non-scaling-stroke;pointer-events:none;fill:none}.overlay line.xref-link.bbox-hidden{display:none}.overlay .fragment-link{pointer-events:none}.overlay .fragment-link.bbox-hidden{display:none}.overlay .fragment-link-path{color:var(--arrow-fragment-color,var(--overlay-fragment));fill:none;stroke:currentColor;stroke-width:var(--arrow-fragment-width,1.5);stroke-linecap:var(--arrow-fragment-cap,butt);vector-effect:non-scaling-stroke}.overlay .fragment-link-path-dashed{stroke-dasharray:var(--arrow-fragment-dash,6 4)}.overlay .fragment-nav{pointer-events:none}.overlay .fragment-nav.bbox-hidden{display:none}.overlay .fragment-nav-btn{pointer-events:auto;cursor:pointer}.overlay .fragment-nav-btn-disabled{pointer-events:none;cursor:default;opacity:.35}.overlay .fragment-nav-btn-bg{fill:var(--panel);stroke:var(--overlay-fragment);stroke-width:1px;vector-effect:non-scaling-stroke}.overlay .fragment-nav-btn-label{fill:var(--overlay-fragment);font-family:var(--font-ui);text-anchor:middle;dominant-baseline:central;pointer-events:none;font-weight:700}.overlay .fragment-nav-btn:not(.fragment-nav-btn-disabled):hover .fragment-nav-btn-bg{fill:color-mix(in srgb, var(--overlay-fragment) 12%, var(--panel))}.overlay .fragment-link-label{fill:var(--overlay-fragment);font-family:var(--font-ui);text-anchor:middle;dominant-baseline:middle;paint-order:stroke fill;stroke:var(--panel);stroke-width:3px;font-style:italic;font-weight:600}.overlay .reading-order-step{color:var(--arrow-reading-order-color,var(--overlay-reading-order));stroke:currentColor;stroke-width:var(--arrow-reading-order-width,1.5);stroke-dasharray:var(--arrow-reading-order-dash,5 4);stroke-linecap:var(--arrow-reading-order-cap,butt);vector-effect:non-scaling-stroke;pointer-events:none;fill:none}.overlay .reading-order-step.bbox-hidden,.overlay .reading-order-badge.bbox-hidden{display:none}.overlay .overlay-badge{pointer-events:none}.overlay .overlay-badge-bg{fill-opacity:1;stroke:none}.reading-order-badge .overlay-badge-bg{fill:var(--overlay-reading-order)}.overlay .element-badge{opacity:.8;pointer-events:auto;cursor:help}.overlay .element-badge .overlay-badge-bg{fill:var(--accent)}.overlay .element-badge.kind-text .overlay-badge-bg{fill:var(--kind-text)}.overlay .element-badge.kind-heading .overlay-badge-bg{fill:var(--kind-heading)}.overlay .element-badge.kind-list .overlay-badge-bg{fill:var(--kind-list)}.overlay .element-badge.kind-table .overlay-badge-bg{fill:var(--kind-table)}.overlay .element-badge.kind-index .overlay-badge-bg{fill:var(--kind-index)}.overlay .element-badge.kind-formula .overlay-badge-bg{fill:var(--kind-formula)}.overlay .element-badge.kind-code .overlay-badge-bg{fill:var(--kind-code)}.overlay .element-badge.kind-picture .overlay-badge-bg{fill:var(--kind-picture)}.overlay .element-badge.kind-group .overlay-badge-bg{fill:var(--kind-group)}.overlay .element-badge.kind-footnote .overlay-badge-bg{fill:var(--kind-footnote)}.overlay .element-badge.kind-page_header .overlay-badge-bg{fill:var(--kind-page_header)}.overlay .element-badge.kind-caption .overlay-badge-bg{fill:var(--kind-caption)}.overlay .element-badge.kind-field .overlay-badge-bg{fill:var(--kind-field)}.overlay .overlay-badge-label{fill:#fff;fill-opacity:1;font-family:var(--font-ui);text-anchor:middle;dominant-baseline:central;pointer-events:none;font-weight:700}.overlay .bbox-field{fill:color-mix(in srgb, var(--kind-field) 14%, transparent);stroke:var(--kind-field)}.overlay .bbox-default{fill:color-mix(in srgb, var(--kind-default) 12%, transparent);stroke:var(--kind-default)}@media (prefers-color-scheme:dark){:host{--overlay-reading-order:var(--doclang-overlay-reading-order,#a1a1aa);--overlay-fragment:var(--doclang-overlay-fragment,#c084fc)}.overlay .bbox-text{fill:color-mix(in srgb, var(--kind-text) 20%, transparent)}.overlay .bbox-heading{fill:color-mix(in srgb, var(--kind-heading) 20%, transparent)}.overlay .bbox-list,.overlay .bbox-ldiv{fill:color-mix(in srgb, var(--kind-list) 20%, transparent)}.overlay .bbox-table{fill:color-mix(in srgb, var(--kind-table) 18%, transparent)}.overlay .bbox-index{fill:color-mix(in srgb, var(--kind-index) 18%, transparent)}.overlay .bbox-formula{fill:color-mix(in srgb, var(--kind-formula) 18%, transparent)}.overlay .bbox-code{fill:color-mix(in srgb, var(--kind-code) 20%, transparent)}.overlay .bbox-picture{fill:color-mix(in srgb, var(--kind-picture) 20%, transparent)}.overlay .bbox-group{fill:color-mix(in srgb, var(--kind-group) 20%, transparent)}.overlay .bbox-footnote{fill:color-mix(in srgb, var(--kind-footnote) 18%, transparent)}.overlay .bbox-page_header,.overlay .bbox-page_footer{fill:color-mix(in srgb, var(--kind-page_header) 18%, transparent)}.overlay .bbox-caption{fill:color-mix(in srgb, var(--kind-caption) 18%, transparent)}.overlay .bbox-field{fill:color-mix(in srgb, var(--kind-field) 18%, transparent)}.overlay .bbox-default{fill:color-mix(in srgb, var(--kind-default) 18%, transparent)}}.page-view-hint{inset:unset;background:var(--panel);border:1px solid var(--border);width:max-content;max-width:24rem;color:var(--text);font-family:var(--font-ui);text-align:left;white-space:normal;pointer-events:none;border-radius:.25rem;margin:0;padding:.45rem .55rem;font-size:.75rem;line-height:1.35;position:fixed;top:0;left:0;box-shadow:0 2px 8px #0000001f}.page-view-hint .head-tooltip{border-collapse:collapse;width:100%;font-size:.6875rem;line-height:1.4}.page-view-hint .head-tooltip th{color:var(--muted);text-align:left;vertical-align:top;white-space:nowrap;padding:.1rem .55rem .1rem 0;font-weight:600}.page-view-hint .head-tooltip td{vertical-align:top;word-break:break-word;padding:.1rem 0}.page-view-hint .head-tooltip .head-default{color:var(--muted);white-space:nowrap;font-style:italic}", dr = ":host{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:var(--doclang-bg,#f4f4f5);--panel:var(--doclang-panel,#fff);--border:var(--doclang-border,#d4d4d8);--text:var(--doclang-text,#18181b);--muted:var(--doclang-muted,#71717a);--accent:var(--doclang-accent,#2563eb);--placeholder-bg:var(--doclang-placeholder-bg,#fafafa);--font-ui:var(--doclang-font-ui,system-ui, -apple-system, \"Segoe UI\", sans-serif);--font-mono:var(--doclang-font-mono,ui-monospace, \"Cascadia Code\", \"Source Code Pro\", monospace);--markup-bg:var(--doclang-markup-bg,#fff);--markup-fg:var(--doclang-markup-fg,#24292e);--markup-hover:var(--doclang-markup-hover,#2563eb14);--markup-selected:var(--doclang-markup-selected,#2563eb24);--kind-text:var(--doclang-kind-text,#2563eb);--kind-heading:var(--doclang-kind-heading,#7c3aed);--kind-list:var(--doclang-kind-list,#ea580c);--kind-ldiv:var(--doclang-kind-ldiv,#ea580c);--kind-table:var(--doclang-kind-table,#16a34a);--kind-index:var(--doclang-kind-index,#0d9488);--kind-formula:var(--doclang-kind-formula,#0891b2);--kind-code:var(--doclang-kind-code,#475569);--kind-picture:var(--doclang-kind-picture,#db2777);--kind-group:var(--doclang-kind-group,#4f46e5);--kind-footnote:var(--doclang-kind-footnote,#a16207);--kind-page_header:var(--doclang-kind-page_header,#71717a);--kind-page_footer:var(--doclang-kind-page_footer,#71717a);--kind-caption:var(--doclang-kind-caption,#71717a);--kind-field:var(--doclang-kind-field,#d97706);--kind-default:var(--doclang-kind-default,#dc2626)}@media (prefers-color-scheme:dark){:host{--lightningcss-light: ;--lightningcss-dark:initial;--bg:var(--doclang-bg,#09090b);--panel:var(--doclang-panel,#18181b);--border:var(--doclang-border,#3f3f46);--text:var(--doclang-text,#fafafa);--muted:var(--doclang-muted,#a1a1aa);--placeholder-bg:var(--doclang-placeholder-bg,#27272a);--markup-bg:var(--doclang-markup-bg,#1e1e1e);--markup-fg:var(--doclang-markup-fg,#d4d4d4);--markup-hover:var(--doclang-markup-hover,#60a5fa1a);--markup-selected:var(--doclang-markup-selected,#60a5fa2e);--kind-text:var(--doclang-kind-text,#60a5fa);--kind-heading:var(--doclang-kind-heading,#a78bfa);--kind-list:var(--doclang-kind-list,#fb923c);--kind-ldiv:var(--doclang-kind-ldiv,#fb923c);--kind-table:var(--doclang-kind-table,#4ade80);--kind-index:var(--doclang-kind-index,#2dd4bf);--kind-formula:var(--doclang-kind-formula,#22d3ee);--kind-code:var(--doclang-kind-code,#94a3b8);--kind-picture:var(--doclang-kind-picture,#f472b6);--kind-group:var(--doclang-kind-group,#818cf8);--kind-footnote:var(--doclang-kind-footnote,#facc15);--kind-page_header:var(--doclang-kind-page_header,#a1a1aa);--kind-page_footer:var(--doclang-kind-page_footer,#a1a1aa);--kind-caption:var(--doclang-kind-caption,#a1a1aa);--kind-field:var(--doclang-kind-field,#fbbf24);--kind-default:var(--doclang-kind-default,#f87171)}}:host{display:contents}.settings-layer{z-index:5;position:absolute;inset:0}.settings-scrim{z-index:0;appearance:none;background:color-mix(in srgb, var(--bg) 28%, transparent);cursor:default;border:none;margin:0;padding:0;position:absolute;inset:0}.settings-panel{z-index:1;border:1px solid var(--border);background:var(--panel);border-radius:.5rem;flex-direction:column;width:13rem;min-height:0;max-height:calc(100% - 1rem);display:flex;position:absolute;top:.5rem;right:.5rem;overflow:hidden;box-shadow:0 4px 20px #00000024}.settings-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem .75rem;display:flex}.settings-title{letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0;font-size:.6875rem;font-weight:600}.settings-close{appearance:none;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:.25rem;width:1.5rem;height:1.5rem;font-size:1.1rem;line-height:1}.settings-close:hover{color:var(--text);background:var(--bg)}.settings-body{padding:.75rem;overflow:auto}", fr = class extends T {
+	constructor(...e) {
+		super(...e), this.label = "", this._open = !1, this._titleId = `settings-title-${Math.random().toString(36).slice(2)}`, this._onClose = () => {
+			this.setOpen(!1);
+		}, this._onDocKeydown = (e) => {
+			this._open && e.key === "Escape" && this.setOpen(!1);
+		};
+	}
+	static {
+		this.styles = s(dr);
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("keydown", this._onDocKeydown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), document.removeEventListener("keydown", this._onDocKeydown);
+	}
+	render() {
+		return this._open ? b`
+      <div class="settings-layer">
+        <button
+          type="button"
+          class="settings-scrim"
+          tabindex="-1"
+          aria-label="Close ${this.label}"
+          @click=${this._onClose}
+        ></button>
+        <aside
+          class="settings-panel"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby=${this._titleId}
+        >
+          <div class="settings-header">
+            <h2 class="settings-title" id=${this._titleId}>${this.label}</h2>
+            <button
+              type="button"
+              class="settings-close"
+              aria-label="Close ${this.label}"
+              @click=${this._onClose}
+            >
+              ×
+            </button>
+          </div>
+          <div class="settings-body">
+            <slot></slot>
+          </div>
+        </aside>
+      </div>
+    ` : C;
+	}
+	setOpen(e) {
+		this._open !== e && (this._open = e, this.requestUpdate(), e || this.dispatchEvent(new CustomEvent("doclang-settings-close", {
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	get isOpen() {
+		return this._open;
+	}
+};
+H([D({ type: String })], fr.prototype, "label", void 0), fr = H([E("doclang-settings-panel")], fr);
+//#endregion
+//#region src/components/page-img-pane/overlay.ts
+var pr = 16.5 * .8, mr = 3, hr = 2, gr = 3, _r = 1224, vr = 1584, yr = "Previous fragment", br = "Next fragment", xr = "cross-page content", Sr = "fragmented content", Cr = {
+	readingOrder: {
+		cssKey: "reading-order",
+		colorVar: "--overlay-reading-order",
+		markerId: "reading-order-arrowhead",
+		defaultStyle: "dashed"
+	},
+	fragment: {
+		cssKey: "fragment",
+		colorVar: "--overlay-fragment",
+		markerId: "fragment-arrowhead",
+		defaultStyle: "dashed"
+	},
+	xref: {
+		cssKey: "xref",
+		colorVar: "--kind-footnote",
+		markerId: "xref-arrowhead",
+		defaultStyle: "solid"
+	},
+	caption: {
+		cssKey: "caption",
+		colorVar: "--kind-caption",
+		markerId: "caption-arrowhead",
+		defaultStyle: "solid"
+	}
+}, wr = {
+	width: 1.5,
+	head: 5
+}, Tr = {
+	solid: "none",
+	dashed: "6 4",
+	dotted: "1.5 3.5"
+};
+function Er(e) {
+	return e.startsWith("field_") || e === "key" || e === "value" || e === "hint" ? "field" : e === "tabular" ? "table" : (/* @__PURE__ */ new Set([
+		"text",
+		"heading",
+		"list",
+		"ldiv",
+		"table",
+		"index",
+		"formula",
+		"code",
+		"picture",
+		"group",
+		"footnote",
+		"page_header",
+		"page_footer",
+		"caption"
+	])).has(e) ? e : "default";
+}
+function Dr(e) {
+	return `kind-${Er(e)}`;
+}
+function Or(e) {
+	return Er(e);
+}
+function kr(e) {
+	let t = getComputedStyle(e), n = parseFloat(t.paddingLeft) + parseFloat(t.paddingRight), r = parseFloat(t.paddingTop) + parseFloat(t.paddingBottom);
+	return {
+		w: e.clientWidth - n,
+		h: e.clientHeight - r
+	};
+}
+function Ar(e, t, n) {
+	let { w: r, h: i } = kr(t), a = e.naturalWidth, o = e.naturalHeight, s = n.layoutCache;
+	if (s && s.paneW === r && s.paneH === i && s.imgW === a && s.imgH === o) return s.fitScale;
+	let c = r > 0 && i > 0 && a > 0 && o > 0 ? Math.min((r - 2) / a, (i - 2) / o) : 1;
+	return n.setLayoutCache({
+		paneW: r,
+		paneH: i,
+		imgW: a,
+		imgH: o,
+		fitScale: c
+	}), c;
+}
+function G(e, t, n) {
+	let r = n ?? t.pane.querySelector(".page-view img"), i = t.zoomPct / 100;
+	if (!(i > 0)) return e;
+	let { pane: a } = t;
+	if (!r?.naturalWidth || !r.naturalHeight) return e / i;
+	let { w: o, h: s } = kr(a);
+	if (!(o > 0 && s > 0)) return e / i;
+	let c = Math.min((o - 2) / _r, (s - 2) / vr), l = Ar(r, a, t);
+	return !(c > 0) || !(l > 0) ? e / i : e * c / (l * i);
+}
+function jr(e, t, n) {
+	if (!e?.naturalWidth || !e.naturalHeight) return !1;
+	let r = Math.max(100, n.zoomPct), i = Ar(e, t, n) * (r / 100), a = Math.floor(e.naturalWidth * i), o = Math.floor(e.naturalHeight * i), s = `${a}px`, c = `${o}px`, l = e.style.width === s && e.style.height === c;
+	return l || (e.style.width = s, e.style.height = c, e.style.maxWidth = "none", e.style.maxHeight = "none"), e.dataset.layoutReady = "1", !l;
+}
+function K(e, t) {
+	let n = e.x0 / e.resW * t.naturalWidth, r = e.y0 / e.resH * t.naturalHeight, i = (e.x1 - e.x0) / e.resW * t.naturalWidth, a = (e.y1 - e.y0) / e.resH * t.naturalHeight;
+	return {
+		x: n,
+		y: r,
+		w: i,
+		h: a,
+		area: i * a
+	};
+}
+function q(e) {
+	return {
+		x: e.x + e.w / 2,
+		y: e.y + e.h / 2
+	};
+}
+function Mr(e, t) {
+	let n = (e) => e === "background" ? 0 : e === "furniture" ? 1 : 2, r = (e) => e.kind === "text" ? 0 : e.kind === "list" || e.kind === "table" || e.kind === "index" || e.kind === "tabular" ? 2 : 1;
+	return [...e].sort((e, i) => {
+		let a = n(e.layer ?? "body") - n(i.layer ?? "body");
+		if (a !== 0) return a;
+		let o = r(e) - r(i);
+		if (o !== 0) return o;
+		if (t) {
+			let n = e.elementId === t;
+			if (n !== (i.elementId === t)) return n ? 1 : -1;
+		}
+		return 0;
+	});
+}
+function Nr(e, t) {
+	let n = Math.hypot(t.x - e.x, t.y - e.y);
+	if (!n) return {
+		strokeDasharray: "",
+		strokeDashoffset: ""
+	};
+	let r = n % 10;
+	return {
+		strokeDasharray: "6 4",
+		strokeDashoffset: r > .01 ? String(r) : ""
+	};
+}
+function Pr(e, t = {}) {
+	let n = t.size ?? wr.head;
+	return x`
+    <marker id=${e} viewBox="0 0 6 6"
+      refX="6" refY="3"
+      markerWidth=${n} markerHeight=${n}
+      orient="auto">
+      <path d="M0,0 L6,3 L0,6 Z" fill=${t.color || "currentColor"}></path>
+    </marker>`;
+}
+function Fr(e, t, n, r) {
+	let i = G(mr, r), a = G(hr, r), o = document.createElementNS("http://www.w3.org/2000/svg", "text");
+	o.setAttribute("class", "overlay-badge-label"), o.setAttribute("font-size", String(n)), o.setAttribute("font-weight", "700"), o.setAttribute("text-anchor", "start"), o.setAttribute("dominant-baseline", "text-before-edge"), o.setAttribute("visibility", "hidden"), o.textContent = String(t), e.appendChild(o);
+	let s, c;
+	try {
+		let e = o.getBBox();
+		s = e.width + i * 2, c = e.height + a * 2;
+	} catch {
+		s = G(String(t).length * pr * .55 + 6, r), c = G(18.520000000000003, r);
+	}
+	return o.remove(), {
+		width: s,
+		height: c
+	};
+}
+function Ir(e, t, n, r, i, a, o) {
+	let s = G(pr, o), { width: c, height: l } = Fr(e, r, s, o), u = G(gr, o);
+	return x`
+    <g class=${`overlay-badge ${i}`} data-element-id=${a}>
+      <rect class="overlay-badge-bg"
+        x=${t - c / 2} y=${n - l / 2}
+        width=${c} height=${l}
+        rx=${u} ry=${u}></rect>
+      <text class="overlay-badge-label"
+        x=${t} y=${n}
+        font-size=${s}>${r}</text>
+    </g>`;
+}
+function Lr(e, t, n) {
+	let r = t.captionBox ?? t.fromBox, i = t.hostBox ?? t.toBox, a = q(K(r, e)), o = q(K(i, e)), s = t.captionElementId ?? t.fromElementId, c = t.hostElementId ?? t.toElementId;
+	return x`
+    <line
+      class=${n.linkClass}
+      x1=${a.x} y1=${a.y}
+      x2=${o.x} y2=${o.y}
+      marker-end=${`url(#${n.markerId})`}
+      ${n.fromIdAttr}=${s}
+      ${n.toIdAttr}=${c}
+    ></line>`;
+}
+function Rr(e, t, n, r, i, a, o, s) {
+	let c = a === "prev" ? yr : br;
+	return x`
+    <g class=${`fragment-nav-btn fragment-nav-btn-${a}${s ? "" : " fragment-nav-btn-disabled"}`} data-nav=${a}
+      role=${s ? "button" : ""}
+      aria-label=${s ? c : ""}
+    >
+      ${s ? x`<title>${c}</title>` : ""}
+      <rect class="fragment-nav-btn-bg"
+        x=${e} y=${t} width=${n} height=${n}
+        rx=${r} ry=${r}></rect>
+      <text class="fragment-nav-btn-label"
+        x=${e + n / 2} y=${t + n / 2}
+        font-size=${i}>${o}</text>
+    </g>`;
+}
+function zr(e, t) {
+	let { img: n, boxes: r, captionLinks: i = [], xrefLinks: a = [], readingOrderSteps: o = [], fragmentLinks: s = [], fragmentNavItems: c = [], showAllBboxes: l, showLayoutBadges: u, showReadingOrder: d, ctx: f } = t, p = (e) => f.arrowMarkerOptions ? f.arrowMarkerOptions(e) : {}, m = [];
+	if (n.naturalWidth) {
+		let t = G(pr, f), i = G(2, f), a = new Map(l && d ? o.map((e) => [e.elementId, e]) : []);
+		for (let o of Mr(r, f.selectedId)) {
+			let { x: r, y: s } = K(o, n), c = { width: 0 };
+			l && u && (c = Fr(e, o.tag, t, f), m.push(Ir(e, r, s, o.tag, `element-badge ${Dr(o.kind)}`, o.elementId, f)));
+			let d = a.get(o.elementId);
+			if (d) {
+				let n = String(d.order), a = Fr(e, n, t, f), p = l && u ? r + c.width / 2 + i + a.width / 2 : r;
+				m.push(Ir(e, p, s, n, "reading-order-badge", o.elementId, f));
+			}
+		}
+	}
+	let ee = s.map((e) => {
+		let t = K(e.fromBox, n), r, i;
+		if (e.toBox) {
+			let a = q(t), o = q(K(e.toBox, n)), { strokeDasharray: s, strokeDashoffset: c } = Nr(a, o);
+			r = x`<line class="fragment-link-path fragment-link-path-dashed"
+        x1=${a.x} y1=${a.y} x2=${o.x} y2=${o.y}
+        marker-end="url(#fragment-arrowhead)"
+        stroke-dasharray=${s}
+        stroke-dashoffset=${c}></line>`, i = {
+				x: (a.x + o.x) / 2,
+				y: (a.y + o.y) / 2
+			};
+		} else {
+			let a = G(5, f), o = e.targetCorner ?? "br", s = n.naturalWidth, c = n.naturalHeight, l = o === "tl" ? {
+				x: Math.min(a, s - a),
+				y: Math.min(a, c - a)
+			} : {
+				x: Math.max(s - a, a),
+				y: Math.max(c - a, a)
+			}, u = q(t), d = o === "tl", p = d ? l : u, m = d ? u : l, { strokeDasharray: ee, strokeDashoffset: h } = Nr(p, m);
+			r = x`<line class="fragment-link-path fragment-link-path-dashed"
+        x1=${p.x} y1=${p.y} x2=${m.x} y2=${m.y}
+        marker-end="url(#fragment-arrowhead)"
+        stroke-dasharray=${ee}
+        stroke-dashoffset=${h}></line>`, i = {
+				x: (p.x + m.x) / 2,
+				y: (p.y + m.y) / 2
+			};
+		}
+		return x`
+      <g class="fragment-link"
+        data-thread-id=${e.threadId}
+        data-fragment-from-id=${e.fromElementId}
+        data-fragment-to-id=${e.toElementId ?? ""}
+      >
+        ${r}
+        <text class="fragment-link-label"
+          x=${i.x} y=${i.y}
+          font-size=${G(pr, f)}
+        >${e.toBox ? Sr : xr}</text>
+      </g>`;
+	}), h = c.map((e) => {
+		let t = G(19.5, f), r = G(2, f), i = G(3, f), a = G(15, f), o = G(3, f), { x: s, y: c, w: l, h: u } = K(e.box, n), d = c + u - i - t, p = s + l - i - t, m = p - r - t;
+		return x`
+      <g class="fragment-nav" data-element-id=${e.elementId}>
+        ${Rr(m, d, t, o, a, "prev", "‹", e.hasPrev)}
+        ${Rr(p, d, t, o, a, "next", "›", e.hasNext)}
+      </g>`;
+	}), g = [];
+	for (let e = 0; e < o.length - 1; e += 1) {
+		let t = q(K(o[e].box, n)), r = q(K(o[e + 1].box, n));
+		g.push(x`
+      <line class="reading-order-step"
+        x1=${t.x} y1=${t.y} x2=${r.x} y2=${r.y}
+        marker-end="url(#reading-order-arrowhead)"
+      ></line>`);
+	}
+	Ve(x`
+      <defs>
+        <pattern id="layer-hatch" width="16" height="16"
+          patternUnits="userSpaceOnUse" patternTransform="rotate(45 8 8)">
+          <rect class="layer-hatch-stripe" x="10" y="-4" width="6" height="24"></rect>
+        </pattern>
+        ${o.length >= 2 ? Pr("reading-order-arrowhead", p("readingOrder")) : ""}
+        ${s.length ? Pr("fragment-arrowhead", p("fragment")) : ""}
+        ${i.length ? Pr("caption-arrowhead", p("caption")) : ""}
+        ${a.length ? Pr("xref-arrowhead", p("xref")) : ""}
+      </defs>
+      ${i.map((e) => Lr(n, e, {
+		markerId: "caption-arrowhead",
+		markerLayer: "caption",
+		linkClass: "caption-link",
+		fromIdAttr: "data-caption-id",
+		toIdAttr: "data-host-id"
+	}))}
+      ${a.map((e) => Lr(n, e, {
+		markerId: "xref-arrowhead",
+		markerLayer: "xref",
+		linkClass: "xref-link",
+		fromIdAttr: "data-xref-from-id",
+		toIdAttr: "data-xref-to-id"
+	}))}
+      ${ee}
+      ${g}
+      ${Mr(r, f.selectedId).map((e) => {
+		let { x: t, y: r, w: i, h: a } = K(e, n), o = Or(e.kind), s = Dr(e.kind), c = Vt(e.layer ?? "body");
+		return x`<rect
+          class=${`bbox bbox-${o} ${s}${c ? ` ${c}` : ""}`}
+          x=${t} y=${r}
+          width=${Math.max(i, 1)} height=${Math.max(a, 1)}
+          data-element-id=${e.elementId}
+        ></rect>`;
+	})}
+      ${h}
+      ${m}
+    `, e);
+}
+function Br(e, t, n, r, i, a, o, s) {
+	zr(t, {
+		img: e,
+		boxes: n,
+		readingOrderSteps: r,
+		showAllBboxes: i,
+		showLayoutBadges: a,
+		showReadingOrder: o,
+		ctx: s
+	});
+}
+function Vr(e, t, n = [], r = [], i = [], a = [], o = [], s, c, l, u, d, f) {
+	let p = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	return p.classList.add("overlay"), p.setAttribute("viewBox", `0 0 ${e.naturalWidth} ${e.naturalHeight}`), p.setAttribute("overflow", "hidden"), zr(p, {
+		img: e,
+		boxes: t,
+		captionLinks: n,
+		xrefLinks: r,
+		readingOrderSteps: i,
+		fragmentLinks: a,
+		fragmentNavItems: o,
+		showAllBboxes: !1,
+		showLayoutBadges: !1,
+		showReadingOrder: !1,
+		ctx: f
+	}), p.addEventListener("click", (n) => {
+		if (u()) {
+			d(!1);
+			return;
+		}
+		let r = n.target, i = r.closest(".fragment-nav-btn:not(.fragment-nav-btn-disabled)");
+		if (i) {
+			n.stopPropagation();
+			let e = i.closest(".fragment-nav")?.getAttribute("data-element-id"), t = i.getAttribute("data-nav");
+			e && t && c(e, t);
+			return;
+		}
+		let a = r.closest(".overlay-badge[data-element-id]");
+		if (a) {
+			let e = a.getAttribute("data-element-id");
+			e && s(e);
+			return;
+		}
+		let o = p.getScreenCTM()?.inverse();
+		if (o) {
+			let r = p.createSVGPoint();
+			r.x = n.clientX, r.y = n.clientY;
+			let { x: i, y: a } = r.matrixTransform(o), c = Hr(t, e, i, a);
+			c ? s(c.elementId) : l();
+		}
+	}), p.addEventListener("mousemove", (n) => {
+		let r = p.getScreenCTM()?.inverse();
+		if (r) {
+			let i = p.createSVGPoint();
+			i.x = n.clientX, i.y = n.clientY;
+			let { x: a, y: o } = i.matrixTransform(r);
+			p.style.cursor = Hr(t, e, a, o) ? "pointer" : "";
+		}
+	}), p.addEventListener("mouseleave", () => {
+		p.style.cursor = "";
+	}), p;
+}
+function Hr(e, t, n, r) {
+	let i = null, a = Infinity;
+	for (let o of e) {
+		let { x: e, y: s, w: c, h: l, area: u } = K(o, t);
+		n >= e && n <= e + c && r >= s && r <= s + l && u < a && (i = o, a = u);
+	}
+	return i;
+}
+//#endregion
+//#region src/components/page-img-pane/page-img-pane.ts
+var Ur = 5, Wr = "(No page image available.)", Gr = "doclang-viewer-overlay-prefs", Kr = "doclang-viewer-arrow-styles", qr = {
+	showAllBboxes: !0,
+	showLayoutBadges: !0,
+	showReadingOrder: !1,
+	readingOrderArrows: !0,
+	readingOrderGlobal: !1,
+	showPictureContents: !1,
+	showTableContents: !1,
+	showFragmentLinks: !1,
+	showXrefLinks: !1,
+	showCaptionLinks: !1
+};
+function Jr(e) {
+	let t = (e || "").trim();
+	if (/^#[0-9a-fA-F]{6}$/.test(t)) return t.toLowerCase();
+	if (/^#[0-9a-fA-F]{3}$/.test(t)) return `#${t.slice(1).split("").map((e) => e + e).join("").toLowerCase()}`;
+	let n = t.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i);
+	return n ? `#${n.slice(1, 4).map((e) => Math.max(0, Math.min(255, Math.round(parseFloat(e)))).toString(16).padStart(2, "0")).join("")}` : "#000000";
+}
+var Yr = class extends U {
+	constructor(...e) {
+		super(...e), this._bodyRef = A(), this._settingsPanelRef = A(), this._settingsOpen = !1, this._visible = !1, this._zoomPct = 100, this._opts = { ...qr }, this._arrowStyles = {}, this._expandedArrowFields = /* @__PURE__ */ new Set(), this._pageController = new $n(this, () => this.scrollPane), this._panDrag = null, this._suppressClick = !1, this._layoutCache = null, this._layoutFrame = 0, this._resizeObserver = null, this._resetAllOverlaySettings = () => {
+			this._arrowStyles = {}, this._persistArrowStyles(), this._applyArrowStyleVars(), this._expandedArrowFields.clear(), this._opts = { ...qr }, this._persistOverlayPrefs(), this._applyBboxVisibility(), this._emitOverlayChange(), this._docState && this._renderDocument(), this.requestUpdate();
+		}, this._onZoomInput = (e) => {
+			this._zoomPct = Math.max(100, Number(e.target.value)), this._layoutCache = null, this.requestUpdate(), this.refreshLayout();
+		}, this._onPanningChange = (e) => {
+			e.detail.panning && this._hideHint();
+		}, this._onMousemove = (e) => {
+			if (this._panDrag?.moved) {
+				this._hideHint();
+				return;
+			}
+			let t = (e.composedPath()[0] ?? e.target).closest(".element-badge[data-element-id]");
+			if (!t || !this._docState?.idToElement) {
+				this._hideHint();
+				return;
+			}
+			let n = t.getAttribute("data-element-id"), r = n ? this._docState.idToElement.get(n) : null;
+			if (!r) {
+				this._hideHint();
+				return;
+			}
+			this._showHint(this._elementHeadTooltipHtml(r, this._docState.defaultResolution), e);
+		}, this._onMouseleave = () => this._hideHint();
+	}
+	static {
+		this.styles = s(ur);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.classList.add("pane", "pane-page-view"), this._loadOverlayPrefs(), this._loadArrowStyles(), this._applyArrowStyleVars(), this.addEventListener("doclang-panning-change", this._onPanningChange), this.addEventListener("mousemove", this._onMousemove), this.addEventListener("mouseleave", this._onMouseleave);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("doclang-panning-change", this._onPanningChange), this.removeEventListener("mousemove", this._onMousemove), this.removeEventListener("mouseleave", this._onMouseleave), this._resizeObserver?.disconnect(), this._resizeObserver = null;
+	}
+	render() {
+		let e = this._opts.showAllBboxes, t = e && this._opts.showReadingOrder;
+		return b`
+      <div class="pane-header">
+        <span class="pane-header-title">Original page</span>
+        <div class="pane-page-controls">
+          ${this._visible ? b`
+                  <div class="page-zoom-control">
+                    <label class="page-zoom-control-label">
+                      <span aria-hidden="true">Zoom</span>
+                      <input
+                        type="range"
+                        class="zoom-input"
+                        min="100"
+                        max="300"
+                        step="10"
+                        .value=${String(this._zoomPct)}
+                        aria-valuemin="100"
+                        aria-valuemax="300"
+                        aria-valuenow=${this._zoomPct}
+                        aria-label="Page zoom"
+                        @input=${this._onZoomInput}
+                      />
+                    </label>
+                    <button
+                      type="button"
+                      class="page-zoom-reset"
+                      title="Reset zoom"
+                      aria-label="Reset zoom"
+                      ?disabled=${this._zoomPct === 100}
+                      @click=${() => {
+			this._zoomPct !== 100 && this.resetZoom();
+		}}
+                    >
+                      ${this._zoomPct}%
+                    </button>
+                  </div>
+                  <button
+                    type="button"
+                    class="pane-settings-toggle"
+                    aria-expanded=${this._settingsOpen ? "true" : "false"}
+                    @click=${() => this.toggleSettings()}
+                  >
+                    Overlays
+                  </button>
+                ` : C}
+        </div>
+      </div>
+      <div class="pane-page-layout">
+        <div
+          class="pane-body"
+          id="page-img-pane"
+          tabindex=${this._visible ? "0" : "-1"}
+          ${j(this._bodyRef)}
+        ></div>
+        ${this._visible ? b`
+              <doclang-settings-panel
+                ${j(this._settingsPanelRef)}
+                label="Overlays"
+                @doclang-settings-close=${() => this._applySettingsOpen(!1)}
+              >
+                <label class="settings-option settings-option-primary">
+                  <input
+                    type="checkbox"
+                    class="cb-all-bboxes"
+                    .checked=${this._opts.showAllBboxes}
+                    @change=${(e) => this._onOptChange("showAllBboxes", e.target.checked)}
+                  />
+                  <span>Layout</span>
+                </label>
+                <div class="settings-subgroup">
+                  <label
+                    class=${W({
+			"settings-option": !0,
+			"settings-option-sub": !0,
+			"settings-option-disabled": !e
+		})}
+                  >
+                    <input
+                      type="checkbox"
+                      class="cb-reading-order"
+                      .checked=${this._opts.showReadingOrder}
+                      ?disabled=${!e}
+                      @change=${(e) => this._onOptChange("showReadingOrder", e.target.checked)}
+                    />
+                    <span>Reading order</span>
+                  </label>
+                  <div class="settings-subgroup settings-reading-order-group">
+                    <div
+                      class=${W({
+			"arrow-layer-row": !0,
+			"is-disabled": !t
+		})}
+                    >
+                      <label
+                        class=${W({
+			"settings-option": !0,
+			"settings-option-sub": !0,
+			"settings-option-nested": !0,
+			"settings-option-disabled": !t
+		})}
+                      >
+                        <input
+                          type="checkbox"
+                          class="cb-reading-order-arrows"
+                          .checked=${this._opts.readingOrderArrows}
+                          ?disabled=${!t}
+                          @change=${(e) => this._onOptChange("readingOrderArrows", e.target.checked)}
+                        />
+                        <span>Arrows</span>
+                      </label>
+                      <button
+                        type="button"
+                        class="arrow-style-btn"
+                        aria-expanded=${String(this._expandedArrowFields.has("readingOrder") && t)}
+                        aria-label="Reading-order arrow style"
+                        title="Arrow style"
+                        @click=${() => this._toggleArrowStyleFields("readingOrder")}
+                      ></button>
+                    </div>
+                    ${this._renderArrowStyleFields("readingOrder", t)}
+                    <label
+                      class=${W({
+			"settings-option": !0,
+			"settings-option-sub": !0,
+			"settings-option-nested": !0,
+			"settings-option-disabled": !t
+		})}
+                    >
+                      <input
+                        type="checkbox"
+                        class="cb-reading-order-global"
+                        .checked=${this._opts.readingOrderGlobal}
+                        ?disabled=${!t}
+                        @change=${(e) => this._onOptChange("readingOrderGlobal", e.target.checked)}
+                      />
+                      <span>Global numbering</span>
+                    </label>
+                  </div>
+                  <label
+                    class=${W({
+			"settings-option": !0,
+			"settings-option-sub": !0,
+			"settings-option-disabled": !e
+		})}
+                  >
+                    <input
+                      type="checkbox"
+                      class="cb-picture-contents"
+                      .checked=${this._opts.showPictureContents}
+                      ?disabled=${!e}
+                      @change=${(e) => this._onOptChange("showPictureContents", e.target.checked)}
+                    />
+                    <span>Picture contents</span>
+                  </label>
+                  <label
+                    class=${W({
+			"settings-option": !0,
+			"settings-option-sub": !0,
+			"settings-option-disabled": !e
+		})}
+                  >
+                    <input
+                      type="checkbox"
+                      class="cb-table-contents"
+                      .checked=${this._opts.showTableContents}
+                      ?disabled=${!e}
+                      @change=${(e) => this._onOptChange("showTableContents", e.target.checked)}
+                    />
+                    <span>Table contents</span>
+                  </label>
+
+                  <div
+                    class=${W({
+			"arrow-layer-row": !0,
+			"is-disabled": !e
+		})}
+                  >
+                    <label
+                      class=${W({
+			"settings-option": !0,
+			"settings-option-sub": !0,
+			"settings-option-disabled": !e
+		})}
+                    >
+                      <input
+                        type="checkbox"
+                        class="cb-fragment-links"
+                        .checked=${this._opts.showFragmentLinks}
+                        ?disabled=${!e}
+                        @change=${(e) => this._onOptChange("showFragmentLinks", e.target.checked)}
+                      />
+                      <span>Fragments</span>
+                    </label>
+                    <button
+                      type="button"
+                      class="arrow-style-btn"
+                      aria-expanded=${String(this._expandedArrowFields.has("fragment") && e)}
+                      aria-label="Fragment arrow style"
+                      title="Arrow style"
+                      @click=${() => this._toggleArrowStyleFields("fragment")}
+                    ></button>
+                  </div>
+                  ${this._renderArrowStyleFields("fragment", e)}
+
+                  <div
+                    class=${W({
+			"arrow-layer-row": !0,
+			"is-disabled": !e
+		})}
+                  >
+                    <label
+                      class=${W({
+			"settings-option": !0,
+			"settings-option-sub": !0,
+			"settings-option-disabled": !e
+		})}
+                    >
+                      <input
+                        type="checkbox"
+                        class="cb-xref-links"
+                        .checked=${this._opts.showXrefLinks}
+                        ?disabled=${!e}
+                        @change=${(e) => this._onOptChange("showXrefLinks", e.target.checked)}
+                      />
+                      <span title="Cross-references">Cross-references</span>
+                    </label>
+                    <button
+                      type="button"
+                      class="arrow-style-btn"
+                      aria-expanded=${String(this._expandedArrowFields.has("xref") && e)}
+                      aria-label="Cross-reference arrow style"
+                      title="Arrow style"
+                      @click=${() => this._toggleArrowStyleFields("xref")}
+                    ></button>
+                  </div>
+                  ${this._renderArrowStyleFields("xref", e)}
+
+                  <div
+                    class=${W({
+			"arrow-layer-row": !0,
+			"is-disabled": !e
+		})}
+                  >
+                    <label
+                      class=${W({
+			"settings-option": !0,
+			"settings-option-sub": !0,
+			"settings-option-disabled": !e
+		})}
+                    >
+                      <input
+                        type="checkbox"
+                        class="cb-caption-links"
+                        .checked=${this._opts.showCaptionLinks}
+                        ?disabled=${!e}
+                        @change=${(e) => this._onOptChange("showCaptionLinks", e.target.checked)}
+                      />
+                      <span>Captions</span>
+                    </label>
+                    <button
+                      type="button"
+                      class="arrow-style-btn"
+                      aria-expanded=${String(this._expandedArrowFields.has("caption") && e)}
+                      aria-label="Caption arrow style"
+                      title="Arrow style"
+                      @click=${() => this._toggleArrowStyleFields("caption")}
+                    ></button>
+                  </div>
+                  ${this._renderArrowStyleFields("caption", e)}
+
+                  <label
+                    class=${W({
+			"settings-option": !0,
+			"settings-option-sub": !0,
+			"settings-option-disabled": !e
+		})}
+                  >
+                    <input
+                      type="checkbox"
+                      class="cb-layout-badges"
+                      .checked=${this._opts.showLayoutBadges}
+                      ?disabled=${!e}
+                      @change=${(e) => this._onOptChange("showLayoutBadges", e.target.checked)}
+                    />
+                    <span>Badges</span>
+                  </label>
+                </div>
+
+                <div class="settings-divider" role="separator"></div>
+                <button
+                  type="button"
+                  class="overlays-reset"
+                  @click=${this._resetAllOverlaySettings}
+                >
+                  Reset all
+                </button>
+              </doclang-settings-panel>
+            ` : C}
+      </div>
+      <div
+        id="page-view-hint"
+        popover="manual"
+        role="tooltip"
+        class="page-view-hint"
+      ></div>
+    `;
+	}
+	firstUpdated() {
+		let e = this._bodyRef.value;
+		e && this._wirePanEvents(e);
+	}
+	get zoomPercent() {
+		return this._zoomPct;
+	}
+	get overlaySettings() {
+		return this._opts;
+	}
+	get scrollPane() {
+		return this._scrollPane();
+	}
+	setVisible(e) {
+		this._visible = e, this.hidden = !e, this.requestUpdate();
+	}
+	refreshLayout() {
+		let e = this._bodyRef.value;
+		e && (this._resizeObserver || (this._resizeObserver = new ResizeObserver(() => this.refreshLayout()), this._resizeObserver.observe(e)), cancelAnimationFrame(this._layoutFrame), this._layoutFrame = requestAnimationFrame(() => {
+			this._layoutFrame = 0;
+			let t = e.querySelector(".page-view img");
+			t?.naturalWidth && (jr(t, e, this._overlayCtx()), this._updatePanCursor(), this._syncOverlayBadgesForImg(t), this.dispatchEvent(new CustomEvent("doclang-layout-refresh", {
+				bubbles: !0,
+				composed: !0
+			})));
+		}));
+	}
+	activateZoom(e) {
+		this._zoomPct = e, this._layoutCache = null, this.requestUpdate(), this._resetScroll();
+	}
+	resetZoom() {
+		this._zoomPct = 100, this._layoutCache = null, this.requestUpdate(), this._resetScroll(), this.refreshLayout();
+	}
+	toggleSettings() {
+		this._applySettingsOpen(!this._settingsOpen);
+	}
+	_applySettingsOpen(e) {
+		this._settingsOpen = e, this._settingsPanelRef.value?.setOpen(e), this.requestUpdate();
+	}
+	_applySelection() {
+		let e = this._bodyRef.value;
+		if (!e) return;
+		for (let t of e.querySelectorAll(".bbox.selected, .overlay-badge.selected")) t.classList.remove("selected");
+		if (this.selected && this._docState?.hasPageView) for (let t of e.querySelectorAll(`[data-element-id="${this.selected}"]`)) t.classList.add("selected");
+		let t = e.querySelector(".page-view img");
+		t && this._syncOverlayBadgesForImg(t), this._applyBboxVisibility();
+	}
+	_renderDocument() {
+		let e = this._bodyRef.value;
+		if (!e) {
+			this.requestUpdate(), this.updateComplete.then(() => this._renderDocument());
+			return;
+		}
+		let t = this._docState;
+		if (e.innerHTML = "", this._layoutCache = null, this.selected = null, this._peerIds = /* @__PURE__ */ new Set(), !t?.hasPageView) return;
+		let n = t.pageImages.get(this.page);
+		if (!n) {
+			e.innerHTML = `<div class="placeholder">${Wr}</div>`;
+			return;
+		}
+		let r = document.createElement("div");
+		r.className = "page-view-port";
+		let i = document.createElement("div");
+		i.className = "page-view";
+		let a = document.createElement("img");
+		a.alt = `Page ${this.page}`;
+		let o = this.page, s = () => {
+			if (a.dataset.layoutGeneration === String(o)) return;
+			a.dataset.layoutGeneration = String(o), jr(a, e, this._overlayCtx());
+			let n = t.segments[o - 1] ?? [], r = _n(n);
+			t.elementIds = r, t.idToElement = vn(r);
+			let s = An(n, t.defaultResolution, r), c = i.querySelector("svg.overlay");
+			c && c.remove();
+			let l = In(n, r, s, t.readingOrder, this._opts.readingOrderGlobal, t.readingOrderDisplayNumbers);
+			s.length && i.appendChild(Vr(a, s, jn(n, r, s), Mn(n, r, s), l, Pn(n, r, s, o, t.threadPagesById), Fn(n, r, s, t.threadNavByElement), (e) => this.dispatchEvent(new CustomEvent("doclang-element-select", {
+				bubbles: !0,
+				composed: !0,
+				detail: { id: e }
+			})), (e, t) => this.dispatchEvent(new CustomEvent("doclang-navigate-thread", {
+				bubbles: !0,
+				composed: !0,
+				detail: {
+					elementId: e,
+					direction: t
+				}
+			})), () => this.dispatchEvent(new CustomEvent("doclang-clear-selection", {
+				bubbles: !0,
+				composed: !0
+			})), () => this._suppressClick, (e) => {
+				this._suppressClick = e;
+			}, this._overlayCtx())), this._syncOverlayBadgesForImg(a), this._applyBboxVisibility();
+			let u = t.pendingSelectElement;
+			if (u) {
+				t.pendingSelectElement = null;
+				let e = this._findElementIdOnPage(u, r);
+				e && this.dispatchEvent(new CustomEvent("doclang-element-select", {
+					bubbles: !0,
+					composed: !0,
+					detail: { id: e }
+				}));
+			}
+		};
+		a.addEventListener("load", s, { once: !0 }), i.appendChild(a), r.appendChild(i), e.appendChild(r), a.src = n, a.complete && s(), this.refreshLayout();
+	}
+	_clearDocument() {
+		let e = this._bodyRef.value;
+		e && (e.innerHTML = ""), this._layoutCache = null;
+	}
+	_overlayCtx() {
+		let e = this._bodyRef.value;
+		return {
+			zoomPct: this._zoomPct,
+			pane: e,
+			layoutCache: this._layoutCache,
+			setLayoutCache: (e) => {
+				this._layoutCache = e;
+			},
+			selectedId: this.selected,
+			arrowMarkerOptions: (e) => this._arrowMarkerOptions(e)
+		};
+	}
+	_syncOverlayBadgesForImg(e) {
+		let t = e.parentElement?.querySelector("svg.overlay"), n = this._docState;
+		if (!t || !n) return;
+		let r = this.page, i = n.segments[r - 1] ?? [], a = An(i, n.defaultResolution, n.elementIds), o = In(i, n.elementIds, a, n.readingOrder, this._opts.readingOrderGlobal, n.readingOrderDisplayNumbers), { showAllBboxes: s, showLayoutBadges: c, showReadingOrder: l } = this._opts;
+		Br(e, t, a, o, s, c, l, this._overlayCtx());
+	}
+	_isContentsOptionHidden(e, t) {
+		if (t) return !1;
+		let n = this._docState?.idToElement?.get(e) ?? null;
+		return !!(!this._opts.showPictureContents && qt(n) || !this._opts.showTableContents && Jt(n));
+	}
+	_isFragmentLinkRelevant(e) {
+		let t = e.getAttribute("data-fragment-from-id"), n = e.getAttribute("data-fragment-to-id");
+		return !!(t && this._peerIds.has(t) || n && this._peerIds.has(n));
+	}
+	_applyBboxVisibility() {
+		let e = this._bodyRef.value;
+		if (!e || !this._docState?.hasPageView) return;
+		let { showAllBboxes: t, showLayoutBadges: n, showCaptionLinks: r, showXrefLinks: i, showFragmentLinks: a, showReadingOrder: o, readingOrderArrows: s } = this._opts, c = this.selected, l = this._peerIds;
+		for (let n of e.querySelectorAll(".bbox")) {
+			n.classList.remove("related");
+			let e = n.getAttribute("data-element-id") ?? "", r = e === c || l.has(e);
+			if (t) {
+				this._isContentsOptionHidden(e, r) ? n.classList.add("bbox-hidden") : (n.classList.remove("bbox-hidden"), l.has(e) && n.classList.add("related"));
+				continue;
+			}
+			e === c ? n.classList.remove("bbox-hidden") : l.has(e) ? (n.classList.remove("bbox-hidden"), n.classList.add("related")) : n.classList.add("bbox-hidden");
+		}
+		for (let r of e.querySelectorAll(".element-badge")) {
+			let e = r.getAttribute("data-element-id") ?? "", i = e === c || l.has(e);
+			if (!t || !n) {
+				r.classList.add("bbox-hidden");
+				continue;
+			}
+			this._isContentsOptionHidden(e, i) ? r.classList.add("bbox-hidden") : r.classList.remove("bbox-hidden");
+		}
+		for (let n of e.querySelectorAll(".caption-link")) n.classList.toggle("bbox-hidden", !t || !r);
+		for (let n of e.querySelectorAll(".xref-link")) n.classList.toggle("bbox-hidden", !t || !i);
+		for (let n of e.querySelectorAll(".fragment-link")) {
+			let e = !!(c && this._isFragmentLinkRelevant(n));
+			n.classList.toggle("bbox-hidden", !(e || t && a));
+		}
+		for (let n of e.querySelectorAll(".fragment-nav")) {
+			let e = n.getAttribute("data-element-id") ?? "", r = e === c || l.has(e);
+			n.classList.toggle("bbox-hidden", !(r || t && a));
+		}
+		for (let n of e.querySelectorAll(".reading-order-badge")) {
+			let e = n.getAttribute("data-element-id") ?? "", r = e === c || l.has(e);
+			if (!t || !o) {
+				n.classList.add("bbox-hidden");
+				continue;
+			}
+			let i = this._docState?.idToElement?.get(e) ?? null;
+			if (qt(i) || Jt(i) || this._isContentsOptionHidden(e, r)) {
+				n.classList.add("bbox-hidden");
+				continue;
+			}
+			n.classList.remove("bbox-hidden");
+		}
+		for (let n of e.querySelectorAll(".reading-order-step")) n.classList.toggle("bbox-hidden", !t || !o || !s);
+	}
+	_findElementIdOnPage(e, t) {
+		return t.get(e) ?? null;
+	}
+	_scrollPane() {
+		let e = this._bodyRef.value;
+		return e ? e.querySelector(".page-view-port") ?? e : null;
+	}
+	_isScrollable() {
+		let e = this._scrollPane();
+		return e ? e.scrollWidth > e.clientWidth || e.scrollHeight > e.clientHeight : !1;
+	}
+	_resetScroll() {
+		let e = this._scrollPane();
+		e && (e.scrollLeft = 0, e.scrollTop = 0);
+	}
+	_updatePanCursor() {
+		let e = this._bodyRef.value;
+		e && e.classList.toggle("can-pan", this._isScrollable() && !this._panDrag);
+	}
+	_onOptChange(e, t) {
+		this._opts[e] = t, this._persistOverlayPrefs(), e === "readingOrderGlobal" && this._docState && this._renderDocument();
+		let n = this._bodyRef.value?.querySelector(".page-view img");
+		n && this._syncOverlayBadgesForImg(n), this._applyBboxVisibility(), this._emitOverlayChange(), this.requestUpdate();
+	}
+	_loadOverlayPrefs() {
+		try {
+			let e = localStorage.getItem(Gr);
+			if (!e) return;
+			let t = JSON.parse(e);
+			if (!t || typeof t != "object") return;
+			for (let e of Object.keys(qr)) typeof t[e] == "boolean" && (this._opts[e] = t[e]);
+		} catch {}
+	}
+	_persistOverlayPrefs() {
+		try {
+			localStorage.setItem(Gr, JSON.stringify(this._opts));
+		} catch {}
+	}
+	_loadArrowStyles() {
+		try {
+			let e = localStorage.getItem(Kr);
+			if (!e) return;
+			let t = JSON.parse(e);
+			t && typeof t == "object" && !Array.isArray(t) && (this._arrowStyles = t);
+		} catch {
+			this._arrowStyles = {};
+		}
+	}
+	_persistArrowStyles() {
+		try {
+			localStorage.setItem(Kr, JSON.stringify(this._arrowStyles));
+		} catch {}
+	}
+	_getArrowStyle(e) {
+		let t = Cr[e], n = this._arrowStyles[e] ?? {};
+		return {
+			color: n.color,
+			width: n.width ?? wr.width,
+			head: n.head ?? wr.head,
+			style: n.style ?? t.defaultStyle
+		};
+	}
+	_resolveArrowColor(e) {
+		let t = this._arrowStyles[e]?.color;
+		if (t) return t;
+		let n = Cr[e];
+		return getComputedStyle(this).getPropertyValue(n.colorVar).trim() || "currentColor";
+	}
+	_arrowMarkerOptions(e) {
+		return {
+			size: this._getArrowStyle(e).head,
+			color: this._resolveArrowColor(e)
+		};
+	}
+	_applyArrowStyleVars() {
+		let e = this.style;
+		for (let [t, n] of Object.entries(Cr)) {
+			let r = this._arrowStyles[t] ?? {}, i = `--arrow-${n.cssKey}`;
+			r.color ? e.setProperty(`${i}-color`, r.color) : e.removeProperty(`${i}-color`), r.width == null ? e.removeProperty(`${i}-width`) : e.setProperty(`${i}-width`, String(r.width)), r.style == null ? (e.removeProperty(`${i}-dash`), e.removeProperty(`${i}-cap`)) : (e.setProperty(`${i}-dash`, Tr[r.style] ?? "none"), e.setProperty(`${i}-cap`, r.style === "dotted" ? "round" : "butt"));
+		}
+	}
+	_toggleArrowStyleFields(e) {
+		this._expandedArrowFields.has(e) ? this._expandedArrowFields.delete(e) : this._expandedArrowFields.add(e), this.requestUpdate();
+	}
+	_onArrowStyleFieldChange(e, t, n) {
+		let r = this._arrowStyles[e] ?? (this._arrowStyles[e] = {});
+		t === "color" ? r.color = String(n) : t === "style" ? r.style = n : (t === "width" || t === "head") && (r[t] = Number(n)), this._persistArrowStyles(), this._applyArrowStyleVars();
+		let i = this._bodyRef.value?.querySelector(".page-view img");
+		i && this._syncOverlayBadgesForImg(i), this.requestUpdate();
+	}
+	_renderArrowStyleFields(e, t) {
+		if (!this._expandedArrowFields.has(e) || !t) return C;
+		let n = this._getArrowStyle(e);
+		return b`
+      <div class="arrow-style-fields" id="arrow-fields-${e}">
+        <label>
+          Color
+          <input
+            type="color"
+            .value=${Jr(this._resolveArrowColor(e))}
+            @input=${(t) => this._onArrowStyleFieldChange(e, "color", t.target.value)}
+          />
+        </label>
+        <label>
+          Thickness
+          <span class="arrow-field-control">
+            <input
+              type="range"
+              min="0.5"
+              max="6"
+              step="0.5"
+              .value=${String(n.width)}
+              title=${String(n.width)}
+              @input=${(t) => this._onArrowStyleFieldChange(e, "width", Number(t.target.value))}
+            />
+            <output class="arrow-field-value" aria-hidden="true">${n.width}</output>
+          </span>
+        </label>
+        <label>
+          Head
+          <span class="arrow-field-control">
+            <input
+              type="range"
+              min="3"
+              max="14"
+              step="1"
+              .value=${String(n.head)}
+              title=${String(n.head)}
+              @input=${(t) => this._onArrowStyleFieldChange(e, "head", Number(t.target.value))}
+            />
+            <output class="arrow-field-value" aria-hidden="true">${n.head}</output>
+          </span>
+        </label>
+        <label>
+          Line
+          <select
+            .value=${n.style}
+            @change=${(t) => this._onArrowStyleFieldChange(e, "style", t.target.value)}
+          >
+            <option value="solid" ?selected=${n.style === "solid"}>Solid</option>
+            <option value="dashed" ?selected=${n.style === "dashed"}>Dashed</option>
+            <option value="dotted" ?selected=${n.style === "dotted"}>Dotted</option>
+          </select>
+        </label>
+      </div>
+    `;
+	}
+	_emitOverlayChange() {
+		this.dispatchEvent(new CustomEvent("doclang-overlay-change", {
+			bubbles: !0,
+			composed: !0,
+			detail: { ...this._opts }
+		}));
+	}
+	_wirePanEvents(e) {
+		e.addEventListener("pointerdown", (e) => {
+			if (e.button !== 0 || !(e.target instanceof Element) || !e.target.closest(".page-view") || !this._isScrollable()) return;
+			let t = this._scrollPane();
+			t && (this._panDrag = {
+				pointerId: e.pointerId,
+				startX: e.clientX,
+				startY: e.clientY,
+				scrollLeft: t.scrollLeft,
+				scrollTop: t.scrollTop,
+				moved: !1
+			});
+		}), e.addEventListener("pointermove", (t) => {
+			if (!this._panDrag || t.pointerId !== this._panDrag.pointerId) return;
+			let n = t.clientX - this._panDrag.startX, r = t.clientY - this._panDrag.startY;
+			if (!this._panDrag.moved && Math.hypot(n, r) >= Ur && (this._panDrag.moved = !0, e.classList.add("is-panning"), e.classList.remove("can-pan"), e.setPointerCapture(t.pointerId), this.dispatchEvent(new CustomEvent("doclang-panning-change", {
+				bubbles: !0,
+				composed: !0,
+				detail: { panning: !0 }
+			}))), !this._panDrag.moved) return;
+			let i = this._scrollPane();
+			i && (i.scrollLeft = this._panDrag.scrollLeft + this._panDrag.startX - t.clientX, i.scrollTop = this._panDrag.scrollTop + this._panDrag.startY - t.clientY, t.preventDefault());
+		});
+		let t = (t) => {
+			if (!this._panDrag || t.pointerId !== this._panDrag.pointerId) return;
+			let n = this._panDrag.moved;
+			n && (this._suppressClick = !0), this._panDrag = null, e.classList.remove("is-panning"), n && this.dispatchEvent(new CustomEvent("doclang-panning-change", {
+				bubbles: !0,
+				composed: !0,
+				detail: { panning: !1 }
+			})), e.hasPointerCapture(t.pointerId) && e.releasePointerCapture(t.pointerId), this._updatePanCursor();
+		};
+		e.addEventListener("pointerup", (e) => t(e)), e.addEventListener("pointercancel", (e) => t(e)), e.setAttribute("role", "region"), e.setAttribute("aria-label", "Original page"), e.addEventListener("pointerdown", () => {
+			this._docState?.hasPageView && e.focus({ preventScroll: !0 });
+		});
+	}
+	_showHint(e, t) {
+		let n = this.shadowRoot?.querySelector(".page-view-hint") ?? null;
+		n && (n.innerHTML = e, n.style.top = `${t.clientY + 14}px`, n.style.left = `${t.clientX + 14}px`, n.matches(":popover-open") || n.showPopover());
+	}
+	_hideHint() {
+		let e = this.shadowRoot?.querySelector(".page-view-hint") ?? null;
+		e?.matches(":popover-open") && e.hidePopover();
+	}
+	_elementHeadTooltipHtml(e, t) {
+		return `<table class="head-tooltip"><tbody>${this._collectElementHeadInfo(e, t).map(({ key: e, value: t, isDefault: n }) => {
+			let r = kt(t), i = n ? " <span class=\"head-default\">(default)</span>" : "";
+			return `<tr><th scope="row">${kt(e)}</th><td>${r}${i}</td></tr>`;
+		}).join("")}</tbody></table>`;
+	}
+	_collectElementHeadInfo(e, t) {
+		let n = V(e, "label"), r = V(e, "thread"), i = V(e, "xref"), a = V(e, "href"), o = V(e, "layer"), s = V(e, "caption"), c = V(e, "description"), l = V(e, "summary"), u = V(e, "custom"), d = Kt(e), f = [{
+			key: "element",
+			value: Ht(e),
+			isDefault: !1
+		}];
+		f.push({
+			key: "label",
+			value: n?.getAttribute("value") ?? "undefined",
+			isDefault: !n?.hasAttribute("value")
+		}), r ? f.push({
+			key: "thread_id",
+			value: r.getAttribute("thread_id") ?? "—",
+			isDefault: !1
+		}) : f.push({
+			key: "thread",
+			value: "—",
+			isDefault: !0
+		}), i ? f.push({
+			key: "xref",
+			value: `thread_id ${i.getAttribute("thread_id") ?? "—"}`,
+			isDefault: !1
+		}) : f.push({
+			key: "xref",
+			value: "—",
+			isDefault: !0
+		}), a ? f.push({
+			key: "href",
+			value: a.getAttribute("uri") ?? "—",
+			isDefault: !1
+		}) : f.push({
+			key: "href",
+			value: "—",
+			isDefault: !0
+		}), f.push({
+			key: "layer",
+			value: o?.getAttribute("value") ?? "body",
+			isDefault: !o?.hasAttribute("value")
+		});
+		let p = [
+			"x_min",
+			"y_min",
+			"x_max",
+			"y_max"
+		];
+		if (d.length === 4) for (let e = 0; e < 4; e += 1) {
+			let n = d[e], r = wt(n, e % 2 == 0 ? t.width : t.height), i = n.getAttribute("value") ?? "0";
+			f.push({
+				key: p[e],
+				value: `${i} @ ${r}`,
+				isDefault: !1
+			});
+		}
+		else for (let e of p) f.push({
+			key: e,
+			value: "—",
+			isDefault: !1
+		});
+		let m = (e, t = 72) => {
+			let n = e.textContent?.replace(/\s+/g, " ").trim() ?? "";
+			return n ? n.length > t ? `${n.slice(0, t)}…` : n : "—";
+		};
+		return f.push({
+			key: "caption",
+			value: s ? m(s) : "—",
+			isDefault: !s
+		}), f.push({
+			key: "description",
+			value: c ? m(c) : "—",
+			isDefault: !c
+		}), f.push({
+			key: "summary",
+			value: l ? m(l) : "—",
+			isDefault: !l
+		}), f.push({
+			key: "custom",
+			value: u ? m(u) : "—",
+			isDefault: !u
+		}), f;
+	}
+};
+Yr = H([E("doclang-page-img-pane")], Yr);
+//#endregion
+//#region src/components/reading-pane/reading-pane.css?inline
+var Xr = ":host{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:var(--doclang-bg,#f4f4f5);--panel:var(--doclang-panel,#fff);--border:var(--doclang-border,#d4d4d8);--text:var(--doclang-text,#18181b);--muted:var(--doclang-muted,#71717a);--accent:var(--doclang-accent,#2563eb);--placeholder-bg:var(--doclang-placeholder-bg,#fafafa);--font-ui:var(--doclang-font-ui,system-ui, -apple-system, \"Segoe UI\", sans-serif);--font-mono:var(--doclang-font-mono,ui-monospace, \"Cascadia Code\", \"Source Code Pro\", monospace);--markup-bg:var(--doclang-markup-bg,#fff);--markup-fg:var(--doclang-markup-fg,#24292e);--markup-hover:var(--doclang-markup-hover,#2563eb14);--markup-selected:var(--doclang-markup-selected,#2563eb24);--kind-text:var(--doclang-kind-text,#2563eb);--kind-heading:var(--doclang-kind-heading,#7c3aed);--kind-list:var(--doclang-kind-list,#ea580c);--kind-ldiv:var(--doclang-kind-ldiv,#ea580c);--kind-table:var(--doclang-kind-table,#16a34a);--kind-index:var(--doclang-kind-index,#0d9488);--kind-formula:var(--doclang-kind-formula,#0891b2);--kind-code:var(--doclang-kind-code,#475569);--kind-picture:var(--doclang-kind-picture,#db2777);--kind-group:var(--doclang-kind-group,#4f46e5);--kind-footnote:var(--doclang-kind-footnote,#a16207);--kind-page_header:var(--doclang-kind-page_header,#71717a);--kind-page_footer:var(--doclang-kind-page_footer,#71717a);--kind-caption:var(--doclang-kind-caption,#71717a);--kind-field:var(--doclang-kind-field,#d97706);--kind-default:var(--doclang-kind-default,#dc2626)}@media (prefers-color-scheme:dark){:host{--lightningcss-light: ;--lightningcss-dark:initial;--bg:var(--doclang-bg,#09090b);--panel:var(--doclang-panel,#18181b);--border:var(--doclang-border,#3f3f46);--text:var(--doclang-text,#fafafa);--muted:var(--doclang-muted,#a1a1aa);--placeholder-bg:var(--doclang-placeholder-bg,#27272a);--markup-bg:var(--doclang-markup-bg,#1e1e1e);--markup-fg:var(--doclang-markup-fg,#d4d4d4);--markup-hover:var(--doclang-markup-hover,#60a5fa1a);--markup-selected:var(--doclang-markup-selected,#60a5fa2e);--kind-text:var(--doclang-kind-text,#60a5fa);--kind-heading:var(--doclang-kind-heading,#a78bfa);--kind-list:var(--doclang-kind-list,#fb923c);--kind-ldiv:var(--doclang-kind-ldiv,#fb923c);--kind-table:var(--doclang-kind-table,#4ade80);--kind-index:var(--doclang-kind-index,#2dd4bf);--kind-formula:var(--doclang-kind-formula,#22d3ee);--kind-code:var(--doclang-kind-code,#94a3b8);--kind-picture:var(--doclang-kind-picture,#f472b6);--kind-group:var(--doclang-kind-group,#818cf8);--kind-footnote:var(--doclang-kind-footnote,#facc15);--kind-page_header:var(--doclang-kind-page_header,#a1a1aa);--kind-page_footer:var(--doclang-kind-page_footer,#a1a1aa);--kind-caption:var(--doclang-kind-caption,#a1a1aa);--kind-field:var(--doclang-kind-field,#fbbf24);--kind-default:var(--doclang-kind-default,#f87171)}}:host{border-right:1px solid var(--border);background:var(--panel);flex-direction:column;min-width:0;min-height:0;display:flex}:host([hidden]){display:none!important}:host(.pane-layout-last){border-right:none}.pane-header{box-sizing:border-box;letter-spacing:.04em;text-transform:uppercase;height:2.125rem;color:var(--muted);border-bottom:1px solid var(--border);background:var(--panel);justify-content:space-between;align-items:center;padding:0 .75rem;font-size:.75rem;font-weight:600;display:flex}.pane-header-title{min-width:0}.pane-settings-toggle{appearance:none;color:var(--muted);cursor:pointer;white-space:nowrap;letter-spacing:.04em;text-transform:uppercase;height:1.25rem;font-size:.625rem;font-weight:600;line-height:1;font:inherit;background:0 0;border:1px solid #0000;border-radius:.25rem;flex-shrink:0;align-items:center;padding:0 .28rem 0 .4rem;transition:color .12s,background .12s,border-color .12s;display:inline-flex}.pane-settings-toggle:after{content:\"\";opacity:.65;border-bottom:1.5px solid;border-right:1.5px solid;flex-shrink:0;width:.26rem;height:.26rem;margin-top:-.1em;margin-left:.22rem;transform:rotate(45deg)}.pane-settings-toggle:hover{color:var(--text);background:color-mix(in srgb, var(--text) 5%, transparent)}.pane-settings-toggle[aria-expanded=true]{color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, var(--panel));border-color:color-mix(in srgb, var(--accent) 22%, transparent)}.pane-settings-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.pane-reading-layout{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex;position:relative}.pane-body{flex:auto;min-width:0;min-height:0;padding:1rem;overflow:auto}.settings-option{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:flex-start;gap:.5rem;font-size:.875rem;display:flex}.settings-subgroup{flex-direction:column;gap:.5rem;padding-left:.85rem;display:flex}.settings-option-sub{color:var(--muted);font-size:.8125rem}.settings-option input{cursor:pointer;flex-shrink:0;margin:.15rem 0 0}.rendered-doc{max-width:42rem;margin:0 auto;line-height:1.6}.rendered-el-virtual-text>p,.rendered-el-virtual-text>div{margin:0;display:inline}.rendered-doc li>.rendered-el-virtual-text{display:inline}.rendered-doc li>.rendered-el-virtual-text>p,.rendered-doc li>.rendered-el-virtual-text>div,.rendered-table .rendered-el-virtual-text,.rendered-table .rendered-el-virtual-text>p,.rendered-table .rendered-el-virtual-text>div{margin:0;display:inline}.rendered-el-virtual-text>div>.rendered-el{margin:.25rem 0;display:block}.rendered-el{cursor:pointer;border-radius:.25rem}.rendered-el:hover{outline:1px solid color-mix(in srgb, var(--accent) 35%, transparent)}.rendered-el.selected{outline:2px solid var(--accent);outline-offset:2px;background:color-mix(in srgb, var(--accent) 8%, transparent)}.rendered-doc p{margin:0 0 .75rem}.rendered-doc h1,.rendered-doc h2,.rendered-doc h3,.rendered-doc h4,.rendered-doc h5,.rendered-doc h6{margin:1.25rem 0 .5rem;line-height:1.25}.rendered-doc h1:first-child,.rendered-doc h2:first-child,.rendered-doc h3:first-child{margin-top:0}.rendered-doc ul,.rendered-doc ol{margin:0 0 .75rem;padding-left:1.5rem}.rendered-doc li{margin:.25rem 0}.rendered-doc li>.rendered-el>p:first-child,.rendered-doc li>.rendered-el>h1:first-child,.rendered-doc li>.rendered-el>h2:first-child,.rendered-doc li>.rendered-el>h3:first-child,.rendered-doc li>.rendered-el>h4:first-child,.rendered-doc li>.rendered-el>h5:first-child,.rendered-doc li>.rendered-el>h6:first-child{margin-top:0}.rendered-marker{margin-right:.35rem}.rendered-handwriting{font-family:Segoe Print,Bradley Hand,cursive}.rendered-doc pre{font-family:var(--font-mono);background:var(--placeholder-bg);border:1px solid var(--border);border-radius:.375rem;margin:0 0 .75rem;padding:.75rem 1rem;font-size:.8125rem;line-height:1.5;overflow-x:auto}.rendered-doc code{font-family:var(--font-mono);font-size:.875em}.rendered-doc pre code{font-size:inherit;background:0 0;border:none;padding:0}.rendered-code-label{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.25rem;font-size:.75rem;font-weight:600;display:block}.rendered-formula{font-family:var(--font-mono);background:var(--placeholder-bg);border-left:3px solid var(--border);margin:0 0 .75rem;padding:.5rem .75rem;font-size:.875rem;display:block;overflow-x:auto}.rendered-formula-inline{font-family:var(--font-mono);font-size:.875em;display:inline}.rendered-doc figure{margin:0 0 .75rem}.rendered-doc figure img{border:1px solid var(--border);border-radius:.25rem;max-width:100%;height:auto}.rendered-doc figure img.rendered-picture-unavailable{object-fit:contain;vertical-align:middle;min-width:3rem;min-height:2.5rem;display:inline-block}.rendered-doc figcaption{color:var(--muted);margin-top:.35rem;font-size:.875rem}.rendered-picture-contents{border:1px solid var(--border);background:var(--placeholder-bg);border-radius:.375rem;margin-top:.5rem;font-size:.875rem}.rendered-picture-contents summary{cursor:pointer;color:var(--muted);-webkit-user-select:none;user-select:none;padding:.4rem .65rem;font-weight:600}.rendered-picture-contents summary:hover{color:var(--text)}.rendered-picture-contents-body{border-top:1px solid var(--border);padding:.5rem .75rem .75rem}.rendered-picture-contents-body .rendered-el>p{margin-bottom:.35rem;font-size:.8125rem}.rendered-table{border-collapse:collapse;width:100%;margin:0 0 .75rem;font-size:.875rem}.rendered-table caption{caption-side:top;color:var(--muted);text-align:left;margin-bottom:.35rem;font-size:.875rem}.rendered-table th,.rendered-table td{border:1px solid var(--border);vertical-align:top;text-align:left;padding:.35rem .5rem}.rendered-table th{background:color-mix(in srgb, var(--border) 35%, var(--panel));font-weight:600}.rendered-table .rendered-table-cell-text{display:inline}.rendered-table .rendered-el,.rendered-table .rendered-el-virtual-text>p,.rendered-table .rendered-el-virtual-text>div{margin:0}.rendered-table .rendered-table{margin:.25rem 0 0}.rendered-page-header,.rendered-page-footer{color:var(--muted);font-size:.875rem}.rendered-page-header{border-bottom:1px solid var(--border);margin-bottom:1rem;padding-bottom:.5rem}.rendered-page-footer{border-top:1px solid var(--border);margin-top:1rem;padding-top:.5rem}.pane-body:not(.show-reading-furniture) .rendered-el[data-doclang-layer=furniture],.pane-body:not(.show-reading-background) .rendered-el[data-doclang-layer=background]{display:none}.rendered-el[data-doclang-layer=furniture],.rendered-el[data-doclang-layer=background]{position:relative}.rendered-el[data-doclang-layer=furniture]:before,.rendered-el[data-doclang-layer=background]:before{content:\"\";border-radius:inherit;pointer-events:none;background:repeating-linear-gradient(-45deg, transparent 0 10px, color-mix(in srgb, var(--muted) 6%, transparent) 10px 16px);position:absolute;inset:0}.rendered-el.rendered-footnote>aside{color:var(--muted);border-left:2px solid var(--border);margin:0 0 .75rem;padding-left:.75rem;font-size:.875rem}.rendered-unsupported{color:var(--muted);background:var(--placeholder-bg);border:1px dashed var(--border);border-radius:.375rem;margin:0 0 .75rem;padding:.5rem .75rem;font-size:.8125rem;font-style:italic}.rendered-field-region{border:1px solid var(--border);background:color-mix(in srgb, var(--kind-field) 6%, transparent);border-radius:.5rem;margin:0 0 1rem;padding:.75rem 1rem}.rendered-field-region>.rendered-field-heading:first-child,.rendered-field-region>.rendered-el.rendered-field_heading>.rendered-field-heading:first-child{margin-top:0}.rendered-field-item{margin:.5rem 0}.rendered-field-item>.rendered-el.rendered-field-key,.rendered-field-key{font-weight:600}.rendered-field-item>.rendered-el.rendered-field-key+.rendered-el,.rendered-field-item>.rendered-el.rendered-field-key+.rendered-el-virtual-text{margin-top:.15rem}.rendered-field-value-fillable .rendered-field-fillable-slot{border-bottom:1px solid color-mix(in srgb, var(--text) 55%, transparent);vertical-align:bottom;min-width:6rem;min-height:1.25em;display:inline-block}.rendered-field-hint{color:var(--muted);font-size:.85em;font-style:italic}.rendered-field-heading{color:var(--text)}.rendered-checkbox{vertical-align:middle;accent-color:var(--kind-field);margin:0 .25rem 0 0}.rendered-checkbox-wrap{display:inline}", Zr = /* @__PURE__ */ new Set([
+	"text",
+	"heading",
+	"field_heading",
+	"footnote",
+	"page_header",
+	"page_footer",
+	"list",
+	"code",
+	"formula",
+	"picture",
+	"group",
+	"field_region",
+	"field_item",
+	"table",
+	"index",
+	"tabular"
+]), Qr = /* @__PURE__ */ new Set([
+	"bold",
+	"italic",
+	"underline",
+	"strikethrough",
+	"superscript",
+	"subscript",
+	"handwriting",
+	"rtl",
+	"content"
+]), $r = {
+	bold: "strong",
+	italic: "em",
+	underline: "u",
+	strikethrough: "s",
+	superscript: "sup",
+	subscript: "sub"
+}, ei = "Picture asset not available", ti = "data:image/png;base64,NOT_A_VALID_IMAGE", ni = /^data:image\/(png|jpe?g|webp|gif);base64,/i, ri = 2097152;
+function ii(e, t) {
+	t.setAttribute("data-doclang-layer", Rt(e));
+}
+function ai(e, t) {
+	if (!e) return null;
+	let n = e.trim();
+	return n ? ni.test(n) ? n.length <= ri ? n : null : /^[a-z][a-z0-9+.-]*:/i.test(n) || n.startsWith("//") ? null : t?.get(At(n)) ?? null : null;
+}
+function oi(e) {
+	e.classList.add("rendered-picture-unavailable"), e.alt = "\xA0", e.setAttribute("aria-label", ei);
+}
+function si(e, t, n, r, i) {
+	let a = document.createElement("img");
+	e.appendChild(a);
+	let o = t ? ai(t, i) : null;
+	o ? (a.alt = "", a.src = o, a.addEventListener("error", () => oi(a), { once: !0 })) : (oi(a), a.src = ti), n && e.appendChild(li(n, r, "figcaption", i));
+}
+function ci(e) {
+	return I(e).find((e) => L(e) === "caption") ?? null;
+}
+function li(e, t, n, r) {
+	let i = document.createElement(n);
+	i.classList.add("rendered-el", "rendered-caption");
+	let a = t.get(e);
+	return a && i.setAttribute("data-element-id", a), Y(i, e, t, { inline: !0 }, r), i;
+}
+function J(e, t, n, r) {
+	let i = L(e), a = document.createElement("div");
+	return a.className = `rendered-el rendered-${i}${r ? ` ${r}` : ""}`, n && a.setAttribute("data-element-id", n), ii(e, a), a.appendChild(t), a;
+}
+function Y(e, t, n, r, i) {
+	let a = [...t.childNodes], o = Pt(a, 0);
+	for (; o < a.length;) Ii(e, a[o], n, r, i), o += 1;
+}
+function ui(e, t, n, r) {
+	let i = [...t.childNodes], a = Pt(i, 0);
+	for (; a < i.length;) {
+		let t = i[a];
+		if (t.nodeType === Node.ELEMENT_NODE && Zr.has(L(t))) {
+			let i = X(t, n, { inline: !1 }, r);
+			i && e.appendChild(i);
+		} else Ii(e, t, n, { inline: !1 }, r);
+		a += 1;
+	}
+}
+function di(e, t, n, r) {
+	let i = document.createElement("span");
+	i.className = "rendered-marker rendered-el";
+	let a = t.get(e);
+	return a && i.setAttribute("data-element-id", a), Y(i, e, t, n, r), i;
+}
+function fi(e, t) {
+	let n = document.createElement("input");
+	n.type = "checkbox", n.disabled = !0, n.checked = (e.getAttribute("class") ?? "unselected") === "selected", n.className = "rendered-checkbox";
+	let r = document.createElement("span");
+	r.className = "rendered-checkbox-wrap rendered-el";
+	let i = t.get(e);
+	return i && r.setAttribute("data-element-id", i), ii(e, r), r.appendChild(n), r;
+}
+function pi(e, t, n, r) {
+	let i = document.createElement("span");
+	i.className = "rendered-field-key rendered-el";
+	let a = t.get(e);
+	return a && i.setAttribute("data-element-id", a), ii(e, i), Y(i, e, t, {
+		...n,
+		inline: !0
+	}, r), i;
+}
+function mi(e, t, n, r) {
+	let i = e.getAttribute("class") ?? "read_only", a = document.createElement("span");
+	a.className = `rendered-field-value rendered-field-value-${i} rendered-el`;
+	let o = t.get(e);
+	if (o && a.setAttribute("data-element-id", o), ii(e, a), Y(a, e, t, {
+		...n,
+		inline: !0
+	}, r), i === "fillable" && !a.textContent?.trim() && !a.querySelector(".rendered-checkbox-wrap, img, .rendered-marker")) {
+		let e = document.createElement("span");
+		e.className = "rendered-field-fillable-slot", e.setAttribute("aria-hidden", "true"), a.appendChild(e);
+	}
+	return a;
+}
+function hi(e, t, n, r) {
+	let i = document.createElement("span");
+	i.className = "rendered-field-hint rendered-el";
+	let a = t.get(e);
+	return a && i.setAttribute("data-element-id", a), ii(e, i), Y(i, e, t, {
+		...n,
+		inline: !0
+	}, r), i;
+}
+function gi(e, t, n, r) {
+	let i = L(e);
+	if (i === "content") {
+		let t = document.createElement("span");
+		return t.textContent = e.textContent ?? "", t;
+	}
+	let a;
+	return i === "handwriting" ? (a = document.createElement("span"), a.className = "rendered-handwriting") : i === "rtl" ? (a = document.createElement("bdi"), a.setAttribute("dir", "rtl")) : a = document.createElement($r[i] ?? "span"), Y(a, e, t, n, r), a;
+}
+function _i(e, t, n, r) {
+	let i = I(e).find((e) => L(e) === "label")?.getAttribute("value"), a = document.createElement("code");
+	if (Y(a, e, t, { inline: n.inline }, r), n.inline) {
+		a.classList.add("rendered-el");
+		let n = t.get(e);
+		return n && a.setAttribute("data-element-id", n), a;
+	}
+	let o = document.createElement("pre");
+	if (i && i !== "undefined") {
+		let e = document.createElement("span");
+		e.className = "rendered-code-label", e.textContent = i, o.appendChild(e);
+	}
+	return o.appendChild(a), J(e, o, t.get(e));
+}
+function vi(e, t, n, r) {
+	let i = document.createElement("span");
+	if (i.className = n.inline ? "rendered-formula-inline" : "rendered-formula", Y(i, e, t, { inline: !0 }, r), n.inline) {
+		i.classList.add("rendered-el");
+		let n = t.get(e);
+		return n && i.setAttribute("data-element-id", n), i;
+	}
+	return J(e, i, t.get(e));
+}
+function yi(e, t, n) {
+	let r = document.createElement("figure"), i = ci(e);
+	si(r, (I(e).find((e) => L(e) === "src") ?? null)?.getAttribute("uri")?.trim() || null, i, t, n);
+	let a = [...e.childNodes], o = Pt(a, 0);
+	for (; o < a.length;) {
+		let e = a[o];
+		if (e.nodeType !== Node.ELEMENT_NODE) {
+			o += 1;
+			continue;
+		}
+		let i = L(e);
+		if (i === "src") {
+			o += 1;
+			continue;
+		}
+		if (i === "tabular") {
+			let i = Pi(e, t, n);
+			i && r.appendChild(i), o += 1;
+			continue;
+		}
+		break;
+	}
+	let s = document.createElement("div");
+	if (s.className = "rendered-picture-contents-body", bi(s, a, o, t, n), s.textContent?.trim()) {
+		let e = document.createElement("details");
+		e.className = "rendered-picture-contents";
+		let t = document.createElement("summary");
+		t.textContent = "Picture contents", e.appendChild(t), e.appendChild(s), r.appendChild(e);
+	}
+	return J(e, r, t.get(e));
+}
+function bi(e, t, n, r, i) {
+	let a = n;
+	for (; a < t.length;) {
+		let n = t[a];
+		if (n.nodeType === Node.ELEMENT_NODE && Zr.has(L(n))) {
+			let t = X(n, r, { inline: !1 }, i);
+			t && e.appendChild(t);
+		} else Ii(e, n, r, { inline: !1 }, i);
+		a += 1;
+	}
+}
+function xi(e, t, n, r) {
+	let i = t.some((e) => e.nodeType === Node.ELEMENT_NODE && Zr.has(L(e))), a = document.createElement(i ? "div" : "p");
+	for (let e of t) if (e.nodeType === Node.ELEMENT_NODE && Zr.has(L(e))) {
+		let t = X(e, n, { inline: !1 }, r);
+		t && a.appendChild(t);
+	} else Ii(a, e, n, { inline: !0 }, r);
+	let o = document.createElement("div");
+	o.className = "rendered-el rendered-text rendered-el-virtual-text";
+	let s = n.get(e);
+	return s && o.setAttribute("data-element-id", s), ii(e, o), o.appendChild(a), o;
+}
+function Si(e) {
+	for (let t = 0; t < e.length; t += 1) {
+		let n = e[t];
+		if (n && (P(n) && !F(n) || n.nodeType === Node.ELEMENT_NODE)) return !0;
+	}
+	return !1;
+}
+function Ci(e) {
+	if (F(e)) return !0;
+	if (e.nodeType !== Node.ELEMENT_NODE) return !1;
+	let t = L(e);
+	return t === "location" || M.has(t);
+}
+function wi(e) {
+	if (!Si(e)) return !1;
+	for (let t of e) if (!Ci(t) && (P(t) || t.nodeType === Node.ELEMENT_NODE && !Ft(t))) return !0;
+	return !1;
+}
+function Ti(e, t, n, r, i) {
+	if (Si(n)) {
+		if (wi(n)) {
+			e.appendChild(xi(t, n, r, i));
+			return;
+		}
+		for (let t of n) if (!Ci(t)) {
+			if (t.nodeType === Node.ELEMENT_NODE && Zr.has(L(t))) {
+				let n = X(t, r, { inline: !1 }, i);
+				n && e.appendChild(n);
+			} else Ii(e, t, r, { inline: !0 }, i);
+		}
+	}
+}
+function Ei(e, t, n, r) {
+	let i = [...t.childNodes], a = xt(i, 0);
+	for (; a < i.length;) {
+		let t = i[a];
+		if (t.nodeType !== Node.ELEMENT_NODE || L(t) !== "ldiv") {
+			a += 1;
+			continue;
+		}
+		let o = t;
+		a += 1;
+		let s = document.createElement("li");
+		for (let e of I(o)) {
+			let t = L(e);
+			t === "marker" ? s.appendChild(di(e, n, { inline: !0 }, r)) : t === "checkbox" && s.appendChild(fi(e, n));
+		}
+		let c = a, l = R(i, a);
+		for (l && (a = l.nextIndex); a < i.length;) {
+			let e = i[a];
+			if (e.nodeType === Node.ELEMENT_NODE && L(e) === "ldiv") break;
+			a += 1;
+		}
+		Ti(s, o, i.slice(c, a), n, r), e.appendChild(s);
+	}
+}
+function Di(e, t, n) {
+	let r = e.getAttribute("class") ?? "unordered", i = document.createElement(r === "ordered" ? "ol" : "ul");
+	return Ei(i, e, t, n), J(e, i, t.get(e));
+}
+function Oi(e) {
+	return e === "ched" || e === "rhed" || e === "corn" || e === "srow";
+}
+function ki(e) {
+	let t = [...e.childNodes], n = Nt(t, 0), r = [], i = [];
+	for (; n < t.length;) {
+		let e = t[n];
+		if (e.nodeType !== Node.ELEMENT_NODE) {
+			n += 1;
+			continue;
+		}
+		let a = L(e);
+		if (a === "nl") {
+			r.push(i), i = [], n += 1;
+			continue;
+		}
+		if (!B(a)) {
+			n += 1;
+			continue;
+		}
+		if (_t.has(a)) {
+			i.push({
+				kind: a,
+				token: e,
+				contentNodes: []
+			}), n += 1;
+			continue;
+		}
+		n += 1;
+		let o = R(t, n);
+		o && (n = o.nextIndex);
+		let s = n;
+		n = Ct(t, n), i.push({
+			kind: a,
+			token: e,
+			contentNodes: t.slice(s, n)
+		});
+	}
+	return i.length && r.push(i), r;
+}
+function Ai(e, t, n) {
+	for (let r = t - 1; r >= 0; --r) {
+		let t = e[r]?.[n];
+		if (!(!t || t.covered)) return {
+			cell: t,
+			row: r,
+			col: n
+		};
+	}
+	return null;
+}
+function ji(e, t, n) {
+	for (let r = n - 1; r >= 0; --r) {
+		let n = e[t]?.[r];
+		if (!(!n || n.covered)) return {
+			cell: n,
+			row: t,
+			col: r
+		};
+	}
+	return null;
+}
+function Mi(e, t, n) {
+	let r = n;
+	for (; e[t]?.[r]?.covered;) r += 1;
+	return r;
+}
+function Ni(e) {
+	let t = [];
+	for (let n = 0; n < e.length; n += 1) {
+		t[n] || (t[n] = []);
+		let r = 0;
+		for (let i of e[n]) {
+			if (r = Mi(t, n, r), i.kind === "lcel") {
+				let e = ji(t, n, r);
+				e && (e.cell.colspan += 1), t[n][r] = {
+					kind: "lcel",
+					token: i.token,
+					contentNodes: [],
+					colspan: 0,
+					rowspan: 0,
+					covered: !0
+				}, r += 1;
+				continue;
+			}
+			if (i.kind === "ucel") {
+				let e = Ai(t, n, r);
+				e && (e.cell.rowspan += 1), t[n][r] = {
+					kind: "ucel",
+					token: i.token,
+					contentNodes: [],
+					colspan: 0,
+					rowspan: 0,
+					covered: !0
+				}, r += 1;
+				continue;
+			}
+			if (i.kind === "xcel") {
+				let e = Ai(t, n, r), a = ji(t, n, r);
+				e && a && e.cell === a.cell ? (e.cell.rowspan += 1, e.cell.colspan += 1) : (e && (e.cell.rowspan += 1), a && (a.cell.colspan += 1)), t[n][r] = {
+					kind: "xcel",
+					token: i.token,
+					contentNodes: [],
+					colspan: 0,
+					rowspan: 0,
+					covered: !0
+				}, r += 1;
+				continue;
+			}
+			t[n][r] = {
+				kind: i.kind,
+				token: i.token,
+				contentNodes: i.contentNodes,
+				colspan: 1,
+				rowspan: 1,
+				covered: !1
+			}, r += 1;
+		}
+	}
+	return t;
+}
+function Pi(e, t, n) {
+	let r = document.createElement("table");
+	r.className = "rendered-table";
+	let i = ci(e);
+	i && r.appendChild(li(i, t, "caption", n));
+	let a = Ni(ki(e)), o = document.createElement("tbody");
+	for (let e of a) {
+		let r = document.createElement("tr");
+		for (let i of e ?? []) {
+			if (!i || i.covered) continue;
+			let e = Oi(i.kind) ? "th" : "td", a = document.createElement(e);
+			i.colspan > 1 && (a.colSpan = i.colspan), i.rowspan > 1 && (a.rowSpan = i.rowspan), Ti(a, i.token, i.contentNodes, t, n), r.appendChild(a);
+		}
+		r.childNodes.length && o.appendChild(r);
+	}
+	return o.childNodes.length && r.appendChild(o), J(e, r, t.get(e));
+}
+function Fi(e, t) {
+	let n = document.createElement("div");
+	return n.className = "rendered-unsupported", n.textContent = `<${L(e)}> — not yet rendered`, J(e, n, t.get(e));
+}
+function X(e, t, n, r) {
+	let i = L(e), a = t.get(e);
+	switch (i) {
+		case "text": {
+			let n = document.createElement("p");
+			return Y(n, e, t, { inline: !0 }, r), J(e, n, a);
+		}
+		case "heading": {
+			let n = document.createElement(`h${Tt(e)}`);
+			return Y(n, e, t, { inline: !0 }, r), J(e, n, a);
+		}
+		case "field_heading": {
+			let n = document.createElement(`h${Tt(e)}`);
+			return n.className = "rendered-field-heading", Y(n, e, t, { inline: !0 }, r), J(e, n, a);
+		}
+		case "footnote": {
+			let n = document.createElement("aside");
+			return Y(n, e, t, { inline: !1 }, r), J(e, n, a);
+		}
+		case "page_header": {
+			let n = document.createElement("header");
+			return n.className = "rendered-page-header", Y(n, e, t, { inline: !0 }, r), J(e, n, a);
+		}
+		case "page_footer": {
+			let n = document.createElement("footer");
+			return n.className = "rendered-page-footer", Y(n, e, t, { inline: !0 }, r), J(e, n, a);
+		}
+		case "list": return Di(e, t, r);
+		case "table":
+		case "index":
+		case "tabular": return Pi(e, t, r);
+		case "code": return _i(e, t, n, r);
+		case "formula": return vi(e, t, n, r);
+		case "picture": return yi(e, t, r);
+		case "group": {
+			let n = document.createElement("figure");
+			n.className = "rendered-group", ui(n, e, t, r);
+			let i = ci(e);
+			return i && n.appendChild(li(i, t, "figcaption", r)), J(e, n, a);
+		}
+		case "field_region": {
+			let n = document.createElement("div");
+			return n.className = "rendered-field-region", ui(n, e, t, r), J(e, n, a);
+		}
+		case "field_item": {
+			let n = document.createElement("div");
+			return n.className = "rendered-field-item", ui(n, e, t, r), J(e, n, a);
+		}
+		default: return Fi(e, t);
+	}
+}
+function Ii(e, t, n, r, i) {
+	if (P(t)) {
+		let n = t.textContent;
+		if (!n || !n.trim() || r.trimLeading && (n = n.replace(/^\s+/u, ""), r.trimLeading = !1, !n)) return;
+		e.appendChild(document.createTextNode(n));
+		return;
+	}
+	if (t.nodeType !== Node.ELEMENT_NODE) return;
+	let a = t, o = L(a);
+	if (!M.has(o)) {
+		if (Qr.has(o)) {
+			e.appendChild(gi(a, n, r, i));
+			return;
+		}
+		if (o === "code" || o === "formula") {
+			let t = X(a, n, { inline: !0 }, i);
+			t && e.appendChild(t);
+			return;
+		}
+		if (Zr.has(o)) {
+			let t = X(a, n, r, i);
+			t && e.appendChild(t);
+			return;
+		}
+		if (o === "marker") {
+			e.appendChild(di(a, n, r, i));
+			return;
+		}
+		if (o === "checkbox") {
+			e.appendChild(fi(a, n));
+			return;
+		}
+		if (o === "key") {
+			e.appendChild(pi(a, n, r, i));
+			return;
+		}
+		if (o === "value") {
+			e.appendChild(mi(a, n, r, i));
+			return;
+		}
+		if (o === "hint") {
+			e.appendChild(hi(a, n, r, i));
+			return;
+		}
+		o !== "ldiv" && (B(o) || o === "src" || o === "tabular" || Y(e, a, n, r, i));
+	}
+}
+function Li(e) {
+	if (P(e)) return e;
+	if (e.nodeType !== Node.ELEMENT_NODE) return null;
+	for (let t = e.childNodes.length - 1; t >= 0; --t) {
+		let n = Li(e.childNodes[t]);
+		if (n) return n;
+	}
+	return null;
+}
+function Ri(e) {
+	let t = Li(e);
+	if (!t) return;
+	let n = t.textContent ?? "";
+	if (n = n.replace(/\s+$/u, ""), n.endsWith("-") && (n = n.slice(0, -1)), !n) {
+		t.parentNode?.removeChild(t), Ri(e);
+		return;
+	}
+	t.textContent = n;
+}
+function zi(e, t, n, r) {
+	for (let i = 0; i < t.length; i += 1) i > 0 && Ri(e), Y(e, t[i], n, {
+		inline: !0,
+		trimLeading: i > 0
+	}, r);
+}
+function Bi(e, t, n) {
+	let r = e[0], i = L(r), a = t.get(r), o = Lt(r), s;
+	if (i === "text") s = document.createElement("p"), zi(s, e, t, n);
+	else if (i === "list") {
+		let i = r.getAttribute("class") ?? "unordered";
+		s = document.createElement(i === "ordered" ? "ol" : "ul");
+		for (let r of e) Ei(s, r, t, n);
+	} else {
+		s = document.createElement("div"), s.className = "rendered-fragment-merged-body";
+		for (let r of e) ui(s, r, t, n);
+	}
+	let c = J(r, s, a, "rendered-fragment-merged");
+	return o && c.setAttribute("data-thread-id", o), c;
+}
+function Vi(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e) {
+		if (n.nodeType !== Node.ELEMENT_NODE || L(n) === "page_break") continue;
+		let e = Lt(n);
+		e && (t.has(e) || t.set(e, []), t.get(e).push(n));
+	}
+	for (let [e, n] of t) n.length < 2 && t.delete(e);
+	return t;
+}
+var Z = class extends U {
+	constructor(...e) {
+		super(...e), this._showFurniture = !0, this._showBackground = !0, this._settingsOpen = !1, this._visible = !1, this._pageController = new $n(this, () => this.scrollPane), this._hasMarkup = null, this._pendingContent = null, this._settingsPanelRef = A(), this._onContentRef = (e) => {
+			e && this._pendingContent && e.replaceChildren(this._pendingContent);
+		}, this._onSettingsToggle = () => {
+			this._settingsOpen = !this._settingsOpen, this._settingsPanelRef.value?.setOpen(this._settingsOpen), this.requestUpdate();
+		}, this._onSettingsClose = () => {
+			this._settingsOpen = !1, this.requestUpdate();
+		}, this._onFurnitureChange = (e) => {
+			this._showFurniture = e.target.checked, this.dispatchEvent(new CustomEvent("doclang-show-reading-furniture", {
+				bubbles: !0,
+				composed: !0,
+				detail: { checked: this._showFurniture }
+			}));
+		}, this._onBackgroundChange = (e) => {
+			this._showBackground = e.target.checked, this.dispatchEvent(new CustomEvent("doclang-show-reading-background", {
+				bubbles: !0,
+				composed: !0,
+				detail: { checked: this._showBackground }
+			}));
+		}, this._onBodyClick = (e) => {
+			let t = e.target, n = t.closest(".rendered-el-virtual-text"), r = n?.hasAttribute("data-element-id") ? n.getAttribute("data-element-id") : t.closest(".rendered-el[data-element-id]")?.getAttribute("data-element-id") ?? null;
+			r && this.dispatchEvent(new CustomEvent("doclang-element-select", {
+				bubbles: !0,
+				composed: !0,
+				detail: { id: r }
+			}));
+		};
+	}
+	static {
+		this.styles = s(Xr);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.classList.add("pane", "pane-reading");
+	}
+	render() {
+		let e = {
+			"pane-body": !0,
+			"show-reading-furniture": this._showFurniture,
+			"show-reading-background": this._showBackground
+		};
+		return b`
+      <div class="pane-header">
+        <span class="pane-header-title">Reading view</span>
+        ${this._visible ? b`<button
+              type="button"
+              class="pane-settings-toggle"
+              aria-expanded=${this._settingsOpen ? "true" : "false"}
+              @click=${this._onSettingsToggle}
+            >
+              Layers
+            </button>` : C}
+      </div>
+      <div class="pane-reading-layout">
+        <div
+          id="rendered-pane"
+          class=${W(e)}
+          @click=${this._onBodyClick}
+        >
+          ${this._hasMarkup === !1 ? b`<div class="placeholder">${fn}</div>` : this._hasMarkup === !0 ? b`<div ${j(this._onContentRef)}></div>` : C}
+        </div>
+        ${this._visible ? b`
+              <doclang-settings-panel
+                ${j(this._settingsPanelRef)}
+                label="Layers"
+                @doclang-settings-close=${this._onSettingsClose}
+              >
+                <div class="settings-subgroup">
+                  <label class="settings-option settings-option-sub">
+                    <input
+                      type="checkbox"
+                      class="cb-furniture"
+                      .checked=${this._showFurniture}
+                      @change=${this._onFurnitureChange}
+                    />
+                    <span>Furniture</span>
+                  </label>
+                  <label class="settings-option settings-option-sub">
+                    <input
+                      type="checkbox"
+                      class="cb-background"
+                      .checked=${this._showBackground}
+                      @change=${this._onBackgroundChange}
+                    />
+                    <span>Background</span>
+                  </label>
+                </div>
+              </doclang-settings-panel>
+            ` : C}
+      </div>
+    `;
+	}
+	updated(e) {
+		if (super.updated(e), !this._pendingContent) return;
+		let t = this.shadowRoot?.querySelector(".pane-body > div");
+		t && !t.contains(this._pendingContent) && t.replaceChildren(this._pendingContent);
+	}
+	get scrollPane() {
+		return this.shadowRoot?.querySelector(".pane-body") ?? null;
+	}
+	setVisible(e) {
+		this._visible = e, this.hidden = !e, this.requestUpdate();
+	}
+	_applySelection() {
+		if (!this.shadowRoot) return;
+		for (let e of this.shadowRoot.querySelectorAll(".rendered-el.selected")) e.classList.remove("selected");
+		if (!this.selected) return;
+		let e = this._findRenderedElement(this.selected, this._peerIds);
+		e && (this._revealContext(e), e.classList.add("selected"), e.scrollIntoView({
+			block: "nearest",
+			behavior: "smooth"
+		}));
+	}
+	_renderDocument() {
+		let e = this._docState;
+		if (!e) {
+			this._pendingContent = null, this._hasMarkup = null;
+			return;
+		}
+		let t = e.segments[this.page - 1] ?? [], n = e.elementIds.size ? e.elementIds : _n(t);
+		e.elementIds = n, hn(t) ? (this._pendingContent = this._buildRenderedArticle(t, n), this._hasMarkup = !0) : (this._pendingContent = null, this._hasMarkup = !1), this.requestUpdate();
+	}
+	_clearDocument() {
+		this._pendingContent = null, this._hasMarkup = null, this.requestUpdate();
+	}
+	_buildRenderedArticle(e, t) {
+		let n = this._docState?.assetUrls, r = Vi(e), i = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Map();
+		for (let [, e] of r) {
+			a.set(e[0], e);
+			for (let t = 1; t < e.length; t += 1) i.add(e[t]);
+		}
+		let o = document.createElement("article");
+		o.className = "rendered-doc";
+		for (let r of e) {
+			if (r.nodeType !== Node.ELEMENT_NODE || L(r) === "page_break" || i.has(r)) continue;
+			let e = a.get(r), s = e ? Bi(e, t, n) : X(r, t, { inline: !1 }, n);
+			s && o.appendChild(s);
+		}
+		return o;
+	}
+	_findRenderedElement(e, t) {
+		if (!this.shadowRoot) return null;
+		let n = this.shadowRoot.querySelector(`.rendered-el-virtual-text[data-element-id="${e}"]`) ?? this.shadowRoot.querySelector(`.rendered-el[data-element-id="${e}"]`);
+		if (n) return n;
+		let r = this._docState?.idToElement?.get(e), i = r ? Lt(r) : null;
+		if (!i) return null;
+		let a = this.shadowRoot.querySelector(`.rendered-fragment-merged[data-thread-id="${i}"]`);
+		if (!a) return null;
+		let o = a.getAttribute("data-element-id");
+		return !o || o === e || t.has(e) ? a : null;
+	}
+	_revealContext(e) {
+		let t = e.closest(".rendered-picture-contents");
+		t && !t.open && (t.open = !0), this._revealLayer(e);
+	}
+	_revealLayer(e) {
+		let t = e.getAttribute("data-doclang-layer");
+		!t || t === "body" || (t === "furniture" && !this._showFurniture ? (this._showFurniture = !0, this.dispatchEvent(new CustomEvent("doclang-show-reading-furniture", {
+			bubbles: !0,
+			composed: !0,
+			detail: { checked: !0 }
+		}))) : t === "background" && !this._showBackground && (this._showBackground = !0, this.dispatchEvent(new CustomEvent("doclang-show-reading-background", {
+			bubbles: !0,
+			composed: !0,
+			detail: { checked: !0 }
+		}))));
+	}
+};
+H([O()], Z.prototype, "_showFurniture", void 0), H([O()], Z.prototype, "_showBackground", void 0), H([O()], Z.prototype, "_settingsOpen", void 0), H([O()], Z.prototype, "_visible", void 0), H([O()], Z.prototype, "_hasMarkup", void 0), Z = H([E("doclang-reading-pane")], Z);
+//#endregion
+//#region src/components/viewer/empty.css?inline
+var Hi = ":host{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:var(--doclang-bg,#f4f4f5);--panel:var(--doclang-panel,#fff);--border:var(--doclang-border,#d4d4d8);--text:var(--doclang-text,#18181b);--muted:var(--doclang-muted,#71717a);--accent:var(--doclang-accent,#2563eb);--placeholder-bg:var(--doclang-placeholder-bg,#fafafa);--font-ui:var(--doclang-font-ui,system-ui, -apple-system, \"Segoe UI\", sans-serif);--font-mono:var(--doclang-font-mono,ui-monospace, \"Cascadia Code\", \"Source Code Pro\", monospace);--markup-bg:var(--doclang-markup-bg,#fff);--markup-fg:var(--doclang-markup-fg,#24292e);--markup-hover:var(--doclang-markup-hover,#2563eb14);--markup-selected:var(--doclang-markup-selected,#2563eb24);--kind-text:var(--doclang-kind-text,#2563eb);--kind-heading:var(--doclang-kind-heading,#7c3aed);--kind-list:var(--doclang-kind-list,#ea580c);--kind-ldiv:var(--doclang-kind-ldiv,#ea580c);--kind-table:var(--doclang-kind-table,#16a34a);--kind-index:var(--doclang-kind-index,#0d9488);--kind-formula:var(--doclang-kind-formula,#0891b2);--kind-code:var(--doclang-kind-code,#475569);--kind-picture:var(--doclang-kind-picture,#db2777);--kind-group:var(--doclang-kind-group,#4f46e5);--kind-footnote:var(--doclang-kind-footnote,#a16207);--kind-page_header:var(--doclang-kind-page_header,#71717a);--kind-page_footer:var(--doclang-kind-page_footer,#71717a);--kind-caption:var(--doclang-kind-caption,#71717a);--kind-field:var(--doclang-kind-field,#d97706);--kind-default:var(--doclang-kind-default,#dc2626)}@media (prefers-color-scheme:dark){:host{--lightningcss-light: ;--lightningcss-dark:initial;--bg:var(--doclang-bg,#09090b);--panel:var(--doclang-panel,#18181b);--border:var(--doclang-border,#3f3f46);--text:var(--doclang-text,#fafafa);--muted:var(--doclang-muted,#a1a1aa);--placeholder-bg:var(--doclang-placeholder-bg,#27272a);--markup-bg:var(--doclang-markup-bg,#1e1e1e);--markup-fg:var(--doclang-markup-fg,#d4d4d4);--markup-hover:var(--doclang-markup-hover,#60a5fa1a);--markup-selected:var(--doclang-markup-selected,#60a5fa2e);--kind-text:var(--doclang-kind-text,#60a5fa);--kind-heading:var(--doclang-kind-heading,#a78bfa);--kind-list:var(--doclang-kind-list,#fb923c);--kind-ldiv:var(--doclang-kind-ldiv,#fb923c);--kind-table:var(--doclang-kind-table,#4ade80);--kind-index:var(--doclang-kind-index,#2dd4bf);--kind-formula:var(--doclang-kind-formula,#22d3ee);--kind-code:var(--doclang-kind-code,#94a3b8);--kind-picture:var(--doclang-kind-picture,#f472b6);--kind-group:var(--doclang-kind-group,#818cf8);--kind-footnote:var(--doclang-kind-footnote,#facc15);--kind-page_header:var(--doclang-kind-page_header,#a1a1aa);--kind-page_footer:var(--doclang-kind-page_footer,#a1a1aa);--kind-caption:var(--doclang-kind-caption,#a1a1aa);--kind-field:var(--doclang-kind-field,#fbbf24);--kind-default:var(--doclang-kind-default,#f87171)}}:host{display:contents}.empty-state{border:2px dashed var(--border);background:var(--placeholder-bg);text-align:center;min-height:0;color:var(--muted);border-radius:.75rem;flex:1 1 0;justify-content:center;align-items:center;margin:1rem;padding:2rem 1.5rem;display:flex}.empty-state-inner{max-width:28rem}.empty-state-loading{flex-direction:column;align-items:center;display:none}:host(.demo-loading) .empty-state-loading{display:flex}:host(.demo-loading) .empty-state-prompt{display:none}.loading-spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:2rem;height:2rem;margin:0 auto 1rem;animation:.7s linear infinite loading-spin}@keyframes loading-spin{to{transform:rotate(360deg)}}.empty-state-title{color:var(--text);margin:0 0 .75rem;font-size:1.05rem}.empty-state p{margin:.5rem 0}.empty-state-action{margin:0 0 .75rem}.text-link{color:var(--accent);text-decoration:underline}.text-link:hover{opacity:.85}.empty-state-meta{font-size:.875rem}code{font-family:var(--font-mono)}", Ui = class extends T {
+	constructor(...e) {
+		super(...e), this._extensions = [];
+	}
+	static {
+		this.styles = s(Hi);
+	}
+	render() {
+		return b`
+      <div class="empty-state">
+        <div class="empty-state-inner">
+          <div
+            class="empty-state-loading"
+            role="status"
+            aria-live="polite"
+            aria-label="Loading demo document"
+          >
+            <div class="loading-spinner" aria-hidden="true"></div>
+            <p class="empty-state-title">Loading demo&#x2026;</p>
+            <p class="empty-state-meta">Preparing the sample document</p>
+          </div>
+          <div class="empty-state-prompt">
+            <p class="empty-state-title">Drop a DocLang file here</p>
+            <p class="empty-state-meta">
+              Supported file types:
+              <span class="file-types"
+                >${this._extensions.map((e, t) => b`${t > 0 ? ", " : ""}<code>${e}</code>`)}</span
+              >
+            </p>
+            <p class="empty-state-action">
+              or
+              <a
+                href="#"
+                class="text-link"
+                @click=${(e) => {
+			e.preventDefault(), this.dispatchEvent(new CustomEvent("doclang-load-demo", {
+				bubbles: !0,
+				composed: !0
+			}));
+		}}
+                >load demo</a
+              >
+            </p>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+	setFileTypeHints(e) {
+		this._extensions = e, this.requestUpdate();
+	}
+	setDemoLoading(e) {
+		this.classList.toggle("demo-loading", e);
+	}
+};
+Ui = H([E("doclang-empty")], Ui);
+//#endregion
+//#region src/components/container/pane-stack.ts
+var Wi = class extends U {
+	constructor(...e) {
+		super(...e), this._onChildViewPage = (e) => {
+			if (e.target === this) return;
+			let t = e.detail.page;
+			e.stopPropagation(), this.page = t;
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("view-page", this._onChildViewPage);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("view-page", this._onChildViewPage);
+	}
+	render() {
+		return b`<slot></slot>`;
+	}
+	_renderDocument() {
+		this._pushToChildren();
+	}
+	_clearDocument() {
+		this._pushToChildren();
+	}
+	_applySelection() {
+		this._pushSelectedToChildren();
+	}
+	_children() {
+		return Array.from(this.children).filter((e) => e instanceof U);
+	}
+	_pushToChildren() {
+		for (let e of this._children()) e.document = this._docState, e.page = this.page, e.selected = this.selected ?? null;
+	}
+	_pushSelectedToChildren() {
+		for (let e of this._children()) e.selected = this.selected ?? null;
+	}
+};
+Wi = H([E("doclang-pane-stack")], Wi);
+//#endregion
+//#region node_modules/lit-html/directives/style-map.js
+var Gi = "important", Ki = " !important", qi = nt(class extends rt {
+	constructor(e) {
+		if (super(e), e.type !== tt.ATTRIBUTE || e.name !== "style" || e.strings?.length > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
+	}
+	render(e) {
+		return Object.keys(e).reduce((t, n) => {
+			let r = e[n];
+			return r == null ? t : t + `${n = n.includes("-") ? n : n.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${r};`;
+		}, "");
+	}
+	update(e, [t]) {
+		let { style: n } = e.element;
+		if (this.ft === void 0) return this.ft = new Set(Object.keys(t)), this.render(t);
+		for (let e of this.ft) t[e] ?? (this.ft.delete(e), e.includes("-") ? n.removeProperty(e) : n[e] = null);
+		for (let e in t) {
+			let r = t[e];
+			if (r != null) {
+				this.ft.add(e);
+				let t = typeof r == "string" && r.endsWith(Ki);
+				e.includes("-") || t ? n.setProperty(e, t ? r.slice(0, -11) : r, t ? Gi : "") : n[e] = r;
+			}
+		}
+		return S;
+	}
+}), Ji = ":host{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:var(--doclang-bg,#f4f4f5);--panel:var(--doclang-panel,#fff);--border:var(--doclang-border,#d4d4d8);--text:var(--doclang-text,#18181b);--muted:var(--doclang-muted,#71717a);--accent:var(--doclang-accent,#2563eb);--placeholder-bg:var(--doclang-placeholder-bg,#fafafa);--font-ui:var(--doclang-font-ui,system-ui, -apple-system, \"Segoe UI\", sans-serif);--font-mono:var(--doclang-font-mono,ui-monospace, \"Cascadia Code\", \"Source Code Pro\", monospace);--markup-bg:var(--doclang-markup-bg,#fff);--markup-fg:var(--doclang-markup-fg,#24292e);--markup-hover:var(--doclang-markup-hover,#2563eb14);--markup-selected:var(--doclang-markup-selected,#2563eb24);--kind-text:var(--doclang-kind-text,#2563eb);--kind-heading:var(--doclang-kind-heading,#7c3aed);--kind-list:var(--doclang-kind-list,#ea580c);--kind-ldiv:var(--doclang-kind-ldiv,#ea580c);--kind-table:var(--doclang-kind-table,#16a34a);--kind-index:var(--doclang-kind-index,#0d9488);--kind-formula:var(--doclang-kind-formula,#0891b2);--kind-code:var(--doclang-kind-code,#475569);--kind-picture:var(--doclang-kind-picture,#db2777);--kind-group:var(--doclang-kind-group,#4f46e5);--kind-footnote:var(--doclang-kind-footnote,#a16207);--kind-page_header:var(--doclang-kind-page_header,#71717a);--kind-page_footer:var(--doclang-kind-page_footer,#71717a);--kind-caption:var(--doclang-kind-caption,#71717a);--kind-field:var(--doclang-kind-field,#d97706);--kind-default:var(--doclang-kind-default,#dc2626)}@media (prefers-color-scheme:dark){:host{--lightningcss-light: ;--lightningcss-dark:initial;--bg:var(--doclang-bg,#09090b);--panel:var(--doclang-panel,#18181b);--border:var(--doclang-border,#3f3f46);--text:var(--doclang-text,#fafafa);--muted:var(--doclang-muted,#a1a1aa);--placeholder-bg:var(--doclang-placeholder-bg,#27272a);--markup-bg:var(--doclang-markup-bg,#1e1e1e);--markup-fg:var(--doclang-markup-fg,#d4d4d4);--markup-hover:var(--doclang-markup-hover,#60a5fa1a);--markup-selected:var(--doclang-markup-selected,#60a5fa2e);--kind-text:var(--doclang-kind-text,#60a5fa);--kind-heading:var(--doclang-kind-heading,#a78bfa);--kind-list:var(--doclang-kind-list,#fb923c);--kind-ldiv:var(--doclang-kind-ldiv,#fb923c);--kind-table:var(--doclang-kind-table,#4ade80);--kind-index:var(--doclang-kind-index,#2dd4bf);--kind-formula:var(--doclang-kind-formula,#22d3ee);--kind-code:var(--doclang-kind-code,#94a3b8);--kind-picture:var(--doclang-kind-picture,#f472b6);--kind-group:var(--doclang-kind-group,#818cf8);--kind-footnote:var(--doclang-kind-footnote,#facc15);--kind-page_header:var(--doclang-kind-page_header,#a1a1aa);--kind-page_footer:var(--doclang-kind-page_footer,#a1a1aa);--kind-caption:var(--doclang-kind-caption,#a1a1aa);--kind-field:var(--doclang-kind-field,#fbbf24);--kind-default:var(--doclang-kind-default,#f87171)}}:host{min-height:100vh;font-family:var(--font-ui);background:var(--bg);color:var(--text);flex-direction:column;display:flex}:host(.drag-over){background:color-mix(in srgb, var(--accent) 6%, var(--bg))}:host(.drag-over) doclang-empty{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, var(--placeholder-bg))}header{border-bottom:1px solid var(--border);background:var(--panel);grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:.75rem 1rem;display:grid}.header-brand{grid-column:1;justify-self:start;align-items:center;gap:1rem;min-width:0;display:flex}header h1{margin:0;font-size:1.1rem;font-weight:600}.header-center{text-align:center;grid-column:2;justify-self:center;min-width:0}.doc-label{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:min(40vw,28rem);font-size:.8125rem;font-weight:400;overflow:hidden}.header-logo-link{border-radius:.25rem;flex-shrink:0;line-height:0;text-decoration:none;display:block}.header-logo-link:hover{opacity:.8}.header-logo{width:auto;height:2.25rem;display:block}.header-logo-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.toolbar-wrap{grid-column:3;justify-self:end}.drop-banner{text-align:center;color:var(--muted);background:color-mix(in srgb, var(--accent) 8%, var(--panel));border-bottom:1px solid var(--border);margin:0;padding:.35rem 1rem;font-size:.8125rem;display:none}:host(.loaded.drag-over) .drop-banner{display:block}:host(.loaded) doclang-empty{display:none}.main{flex:1 1 0;min-height:0;display:none}:host(.loaded) .main{grid-template-rows:minmax(0,1fr);display:grid}:host(.loaded) .main .pane{border-right:none}.pane{border-right:1px solid var(--border);flex-direction:column;min-width:0;min-height:0;display:flex}.pane[hidden]{display:none!important}.pane-splitter{box-sizing:content-box;cursor:col-resize;touch-action:none;z-index:2;background:0 0;width:1px;margin:0 -4px;padding:0 4px;position:relative}.pane-splitter:after{content:\"\";background:var(--border);width:1px;transition:background .15s,width .15s;position:absolute;top:0;bottom:0;left:4px}.pane-splitter:hover:after,.pane-splitter:focus-visible:after,.pane-splitter.is-dragging:after{background:var(--accent);width:3px}.pane-splitter[hidden]{display:none!important}:host(.pane-drag-active){cursor:col-resize;-webkit-user-select:none;user-select:none}:host(.pane-drag-active) .pane-splitter{cursor:col-resize}@media (width<=1200px){:host(.loaded) .main{grid-template-rows:unset;grid-template-columns:1fr!important}:host(.loaded) .main .pane{border-right:none;border-bottom:1px solid var(--border);grid-column:1!important}:host(.loaded) .main .pane-splitter{display:none!important}}", Yi = class {
+	constructor(e) {
+		this._catalog = [], this._activeIndex = -1, this._host = e, e.addController(this);
+	}
+	hostConnected() {}
+	hostDisconnected() {}
+	get entries() {
+		return this._catalog.map((e, t) => ({
+			label: e.label,
+			thumbnailUrl: e.thumbnailUrl,
+			isActive: t === this._activeIndex
+		}));
+	}
+	get size() {
+		return this._catalog.length;
+	}
+	get activeIndex() {
+		return this._activeIndex;
+	}
+	get activeEntry() {
+		return this._catalog[this._activeIndex] ?? null;
+	}
+	hasMultiple() {
+		return this._catalog.length > 1;
+	}
+	findCatalogIndexForFile(e) {
+		return this._catalog.findIndex((t) => {
+			let n = t.source;
+			return n instanceof File && n.name === e.name && n.size === e.size && n.lastModified === e.lastModified;
+		});
+	}
+	async addFiles(e, { replace: t = !1 } = {}) {
+		t && this._clearAll();
+		let n = this._catalog.length, r = null;
+		for (let n of e) {
+			let e = t ? -1 : this.findCatalogIndexForFile(n);
+			if (e !== -1) {
+				r === null && (r = e);
+				continue;
+			}
+			let i = this._createEntry(n);
+			this._catalog.push(i), this._enrichThumbnail(i), r === null && (r = this._catalog.length - 1);
+		}
+		return this._catalog.length ? this._switchTo(t ? 0 : r ?? n) : null;
+	}
+	async addArchiveBuffer(e, t, { replace: n = !1 } = {}) {
+		n && this._clearAll();
+		let r = {
+			id: crypto.randomUUID(),
+			label: t,
+			kind: "archive",
+			source: e,
+			currentPage: 1,
+			pageZoom: 100,
+			snapshot: null,
+			thumbnailUrl: null
+		};
+		return this._catalog.push(r), this._enrichThumbnail(r), this._switchTo(n ? 0 : this._catalog.length - 1);
+	}
+	async appendFolderArchive(e) {
+		if (!e.some((e) => e.name === "document.xml")) return alert("Archive must contain document.xml at its root."), null;
+		let t = (e[0].webkitRelativePath || e[0].name).split("/")[0] || "archive", n = {
+			id: crypto.randomUUID(),
+			label: t,
+			kind: "folder",
+			source: e,
+			currentPage: 1,
+			pageZoom: 100,
+			snapshot: null,
+			thumbnailUrl: null
+		};
+		return this._catalog.push(n), this._enrichThumbnail(n), this._switchTo(this._catalog.length - 1);
+	}
+	persistActiveViewState(e, t) {
+		let n = this.activeEntry;
+		n && (n.currentPage = e, n.pageZoom = t);
+	}
+	async selectEntry(e) {
+		return e < 0 || e >= this._catalog.length ? null : (this._releaseActive(), this._switchTo(e));
+	}
+	async closeEntry(e) {
+		if (e < 0 || e >= this._catalog.length) return {
+			doc: null,
+			newIndex: -1
+		};
+		let t = e === this._activeIndex, n = this._catalog[e];
+		if (t && (this._releaseActive(), this._activeIndex = -1), this._revoke(n), this._catalog.splice(e, 1), !this._catalog.length) return this._requestUpdate(), {
+			doc: null,
+			newIndex: -1
+		};
+		if (t) {
+			let t = Math.min(e, this._catalog.length - 1);
+			return {
+				doc: await this._switchTo(t),
+				newIndex: this._activeIndex
+			};
+		}
+		return e < this._activeIndex && --this._activeIndex, this._requestUpdate(), {
+			doc: null,
+			newIndex: this._activeIndex
+		};
+	}
+	clearAll() {
+		this._clearAll(), this._requestUpdate();
+	}
+	isArchiveFile(e) {
+		return /\.dclx$/i.test(e.name) || /\.zip$/i.test(e.name);
+	}
+	isMarkupFile(e) {
+		return /\.(?:dclg(?:\.xml)?|xml)$/i.test(e.name);
+	}
+	_requestUpdate() {
+		this._host.requestUpdate();
+	}
+	async _switchTo(e) {
+		this._activeIndex = e;
+		let t = this._catalog[e], n = await this._parse(t);
+		return n ? (t.snapshot = n, n) : (this._revoke(t), this._catalog.splice(e, 1), this._activeIndex = -1, this._requestUpdate(), this._catalog.length ? this._switchTo(Math.min(e, this._catalog.length - 1)) : null);
+	}
+	_releaseActive() {
+		let e = this.activeEntry;
+		e?.snapshot && (zn(e.snapshot), e.snapshot = null);
+	}
+	_clearAll() {
+		this._releaseActive();
+		for (let e of this._catalog) this._revoke(e);
+		this._catalog = [], this._activeIndex = -1;
+	}
+	_revoke(e) {
+		e.thumbnailUrl?.startsWith("blob:") && URL.revokeObjectURL(e.thumbnailUrl), e.thumbnailUrl = null;
+	}
+	_createEntry(e) {
+		return {
+			id: crypto.randomUUID(),
+			label: e.name,
+			kind: this.isMarkupFile(e) ? "markup" : "archive",
+			source: e,
+			currentPage: 1,
+			pageZoom: 100,
+			snapshot: null,
+			thumbnailUrl: null
+		};
+	}
+	_enrichThumbnail(e) {
+		this._resolveThumbnail(e).then((t) => {
+			if (!this._catalog.includes(e)) {
+				t?.startsWith("blob:") && URL.revokeObjectURL(t);
+				return;
+			}
+			t && this._requestUpdate();
+		});
+	}
+	async _resolveThumbnail(e) {
+		if (e.thumbnailUrl) return e.thumbnailUrl;
+		if (e.kind === "markup") return null;
+		try {
+			e.kind === "folder" ? e.thumbnailUrl = this._firstPageUrlFromFiles(e.source) : e.kind === "archive" && (e.thumbnailUrl = await this._firstPageUrlFromZip(e.source));
+		} catch {
+			e.thumbnailUrl = null;
+		}
+		return e.thumbnailUrl;
+	}
+	_firstPageUrlFromFiles(e) {
+		let t = Infinity, n = null;
+		for (let r of e) {
+			let e = (r.webkitRelativePath || r.name).split("/");
+			if (e.length < 2 || e[e.length - 2] !== "pages") continue;
+			let i = dn.exec(r.name);
+			if (!i) continue;
+			let a = Number(i[1]);
+			a < t && (t = a, n = r);
+		}
+		return n ? URL.createObjectURL(n) : null;
+	}
+	async _firstPageUrlFromZip(e) {
+		let t = await tn(e instanceof File ? await e.arrayBuffer() : e, { shouldExtract: (e) => /^pages\/\d+\.(png|jpe?g|webp)$/i.test(e) }), n = Infinity, r = null;
+		for (let e of t) {
+			let t = e.name.match(/^pages\/(\d+)\.(png|jpe?g|webp)$/i);
+			if (!t) continue;
+			let i = Number(t[1]);
+			i < n && (n = i, r = e);
+		}
+		if (!r) return null;
+		let i = r.name.split(".").pop() ?? "png";
+		return URL.createObjectURL(new Blob([r.data], { type: this._mimeFromExt(i) }));
+	}
+	_mimeFromExt(e) {
+		let t = e.toLowerCase().replace("jpeg", "jpg");
+		return t === "png" ? "image/png" : t === "webp" ? "image/webp" : "image/jpeg";
+	}
+	async _parse(e) {
+		try {
+			if (e.kind === "markup") return Ln(e.source instanceof File ? await e.source.text() : new TextDecoder().decode(e.source), /* @__PURE__ */ new Map(), e.label, /* @__PURE__ */ new Map(), { markupOnly: !0 });
+			if (e.kind === "archive") {
+				let { markupXml: t, pageImages: n, assetUrls: r } = await ln(e.source instanceof File ? await e.source.arrayBuffer() : e.source);
+				return Ln(t, n, e.label, r, { markupOnly: !1 });
+			}
+			if (e.kind === "folder") {
+				let { markupXml: t, pageImages: n, assetUrls: r } = await Rn(e.source);
+				return Ln(t, n, e.label, r, { markupOnly: !1 });
+			}
+		} catch (t) {
+			alert(`Failed to read ${e.label}: ${t.message}`);
+		}
+		return null;
+	}
+}, Xi = [".dclx", ".dclg"], Zi = "doclang-viewer-pane-layout", Q = [
+	"file",
+	"page",
+	"markup",
+	"reading"
+], Qi = .12, $i = [
+	1,
+	1,
+	1,
+	1
+], ea = [
+	"page",
+	"markup",
+	"reading"
+], $ = class extends U {
+	constructor(...e) {
+		super(...e), this.example = null, this._loaded = !1, this._markupOnly = !1, this._dragOver = !1, this._paneDragActive = !1, this._demoLoading = !1, this._docLabel = null, this._mainGridStyle = {}, this._paneGridCols = /* @__PURE__ */ new Map(), this._splitterCols = [
+			null,
+			null,
+			null
+		], this.panes = [...ea], this._collection = new Yi(this), this._filePaneUserToggled = !1, this._paneRatios = [...$i], this._filePaneWidthPx = null, this._paneDrag = null, this._demoLoadInProgress = !1, this._suppressDemoLoad = !1, this._pageNavRef = A(), this._toolbarRef = A(), this._collectionPaneRef = A(), this._markupPaneRef = A(), this._pageViewPaneRef = A(), this._readingPaneRef = A(), this._emptyStateRef = A(), this._splitterRefs = [
+			A(),
+			A(),
+			A()
+		], this._mainRef = A(), this._onWindowPointerMove = (e) => {
+			let t = this._paneDrag;
+			if (!t || e.pointerId !== t.pointerId) return;
+			if (t.leftKey === "file" && typeof t.leftStartPx == "number") {
+				this._filePaneWidthPx = Math.max(this._filePaneFitWidthPx(), t.leftStartPx + (e.clientX - t.startX)), this._applyPaneLayout();
+				return;
+			}
+			if (t.rightKey === "file" && typeof t.rightStartPx == "number") {
+				this._filePaneWidthPx = Math.max(this._filePaneFitWidthPx(), t.rightStartPx - (e.clientX - t.startX)), this._applyPaneLayout();
+				return;
+			}
+			let n = this._visiblePaneKeys(), r = this._contentPaneFrWeights(n), i = n.filter((e) => e !== "file").indexOf(t.leftKey);
+			if (i < 0 || i + 1 >= r.length) return;
+			let a = r[i] + r[i + 1];
+			if (!(a > 0)) return;
+			let o = Math.max(this._contentPaneAvailableWidthPx() * a, 1), s = (e.clientX - t.startX) / o, c = this._paneRatioIndex(t.leftKey), l = this._paneRatioIndex(t.rightKey), u = t.leftStart + t.rightStart;
+			if (!(u > 0) || c < 0 || l < 0) return;
+			let d = Math.min(Qi, u / 2), f = Math.min(Qi, u / 2), p = t.leftStart + s * u;
+			p = Math.min(Math.max(p, d), u - f), this._paneRatios[c] = p, this._paneRatios[l] = u - p, this._applyPaneLayout();
+		}, this._onWindowPointerUp = (e) => {
+			let t = this._paneDrag;
+			if (!t || e.pointerId !== t.pointerId) return;
+			let n = this._splitterRefs[t.physicalSplitterIndex]?.value;
+			n?.classList.remove("is-dragging"), n?.hasPointerCapture(e.pointerId) && n.releasePointerCapture(e.pointerId), this._paneDrag = null, this._paneDragActive = !1, this._normalizePaneRatios(), this._saveLayoutPrefs(), this.requestUpdate();
+		}, this._onHomeClick = (e) => {
+			e.preventDefault(), this._resetViewer();
+		}, this._onLoadDemo = () => {
+			this._loadDemo();
+		}, this._onOpenFiles = (e) => {
+			let t = e.detail.files.filter((e) => this._collection.isArchiveFile(e) || this._collection.isMarkupFile(e));
+			t.length && this._addFilesToCatalog(t, { replace: !0 });
+		}, this._onTogglePane = (e) => {
+			let { pane: t, checked: n } = e.detail;
+			if (!this._docState) {
+				this._syncToolbarPaneCheckboxes();
+				return;
+			}
+			if (![...Q].filter((e) => e === t ? n : this.panes.includes(e) && this._isPaneAvailable(e)).length) {
+				this._syncToolbarPaneCheckboxes();
+				return;
+			}
+			this._setUserPaneVisible(t, n);
+		}, this._onResetPaneLayout = () => {
+			this._docState && this._resetPaneLayout();
+		}, this._onCollectionSelect = (e) => {
+			let { index: t } = e.detail;
+			this._collection.persistActiveViewState(this.page, this._pageViewPaneRef.value?.zoomPercent ?? 100), this._collection.selectEntry(t).then((e) => {
+				if (!e) {
+					this._resetViewer();
+					return;
+				}
+				let t = this._collection.activeEntry;
+				this._activateDocument(e, t.currentPage ?? 1);
+			});
+		}, this._onCollectionClose = (e) => {
+			let { index: t } = e.detail;
+			this._collection.persistActiveViewState(this.page, this._pageViewPaneRef.value?.zoomPercent ?? 100), this._collection.closeEntry(t).then(({ doc: e, newIndex: t }) => {
+				if (t < 0) {
+					this._resetViewer();
+					return;
+				}
+				if (e) {
+					let t = this._collection.activeEntry;
+					this._activateDocument(e, t.currentPage ?? 1);
+				} else this._syncCollectionPaneDefault(), this._syncToolbarPaneCheckboxes(), this._applyPaneLayout(), this.requestUpdate();
+			});
+		}, this._onCollectionCloseAll = () => {
+			let e = this._collection.size;
+			if (!e) return;
+			let t = this._collection.entries[0]?.label ?? "", n = e === 1 ? `Remove "${t}" from the viewer?` : `Remove all ${e} open files from the viewer?`;
+			confirm(n) && this._resetViewer();
+		}, this._onElementSelect = (e) => {
+			let t = e.detail.id, n = this._resolveSelectionElementId(t) ?? t;
+			this._selectElement(n);
+		}, this._onNavigateThread = (e) => {
+			let { elementId: t, direction: n } = e.detail;
+			this._navigateThreadFragment(t, n);
+		}, this._onClearSelection = () => {
+			this._clearSelection();
+		}, this._onViewPage = (e) => {
+			this.page = e.detail.page;
+		};
+	}
+	static {
+		this.styles = s(Ji);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._loadLayoutPrefs(), this._normalizePaneRatios(), this._initDragDrop(), this._initFileHandling(), this._initPaneDragListeners(), this.addEventListener("view-page", this._onViewPage), this.example && (this._demoLoading = !0, setTimeout(() => {
+			this._suppressDemoLoad || this._loadDemo();
+		}, 0));
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), window.removeEventListener("pointermove", this._onWindowPointerMove), window.removeEventListener("pointerup", this._onWindowPointerUp), window.removeEventListener("pointercancel", this._onWindowPointerUp), this.removeEventListener("view-page", this._onViewPage);
+	}
+	updated(e) {
+		super.updated(e), this.classList.toggle("loaded", this._loaded), this.classList.toggle("markup-only", this._markupOnly), this.classList.toggle("drag-over", this._dragOver), this.classList.toggle("pane-drag-active", this._paneDragActive);
+	}
+	firstUpdated() {
+		let e = this._emptyStateRef.value;
+		e && e.setFileTypeHints(Xi), this._demoLoading && e && e.setDemoLoading(!0), this._syncToolbarPaneCheckboxes();
+	}
+	render() {
+		return b`
+      <header>
+        <div class="header-brand">
+          <a
+            href="#"
+            class="header-logo-link"
+            title="Back to start"
+            @click=${this._onHomeClick}
+          >
+            <img src="assets/doclang_v3_sail.svg" alt="DocLang" class="header-logo" />
+          </a>
+          <h1>DocLang Viewer</h1>
+          <doclang-page-nav
+            ${j(this._pageNavRef)}
+            ?hidden=${!this._loaded || this._markupOnly}
+            .document=${this._docState}
+            .page=${this.page}
+          ></doclang-page-nav>
+        </div>
+
+        <div class="header-center">
+          ${this._docLabel ? b`<span class="doc-label">${this._docLabel}</span>` : C}
+        </div>
+
+        <div class="toolbar-wrap">
+          <doclang-toolbar
+            ${j(this._toolbarRef)}
+            @doclang-load-demo=${this._onLoadDemo}
+            @doclang-open-files=${this._onOpenFiles}
+            @doclang-toggle-pane=${this._onTogglePane}
+            @doclang-reset-pane-layout=${this._onResetPaneLayout}
+          ></doclang-toolbar>
+        </div>
+      </header>
+
+      <p class="drop-banner">Drop to open another file</p>
+
+      <doclang-empty
+        ${j(this._emptyStateRef)}
+        @doclang-load-demo=${this._onLoadDemo}
+      ></doclang-empty>
+
+      <div
+        class="main"
+        style=${qi(this._mainGridStyle)}
+        ${j(this._mainRef)}
+      >
+        <doclang-collection-pane
+          ${j(this._collectionPaneRef)}
+          class="pane"
+          ?hidden=${!this._isPaneVisible("file")}
+          style=${this._paneGridStyle("file")}
+          .entries=${this._collection.entries}
+          @doclang-collection-select=${(e) => this._onCollectionSelect(e)}
+          @doclang-collection-close=${(e) => this._onCollectionClose(e)}
+          @doclang-collection-close-all=${this._onCollectionCloseAll}
+        ></doclang-collection-pane>
+
+        <div
+          class=${W({ "pane-splitter": !0 })}
+          role="separator"
+          aria-orientation="vertical"
+          aria-label="Resize Files and Original page panes"
+          tabindex="0"
+          ?hidden=${this._splitterCols[0] === null}
+          style=${this._splitterGridStyle(0)}
+          ${j(this._splitterRefs[0])}
+          @pointerdown=${(e) => this._startPaneDrag(e, 0)}
+        ></div>
+
+        <doclang-pane-stack
+          .document=${this._docState}
+          .page=${this.page}
+          .selected=${this.selected}
+          @view-page=${this._onViewPage}
+          @doclang-element-select=${this._onElementSelect}
+          @doclang-navigate-thread=${this._onNavigateThread}
+          @doclang-clear-selection=${this._onClearSelection}
+          style="display:contents"
+        >
+          <doclang-page-img-pane
+            ${j(this._pageViewPaneRef)}
+            class="pane"
+            ?hidden=${!this._isPaneVisible("page")}
+            style=${this._paneGridStyle("page")}
+          ></doclang-page-img-pane>
+
+          <div
+            class="pane-splitter"
+            role="separator"
+            aria-orientation="vertical"
+            aria-label="Resize Original page and DocLang panes"
+            tabindex="0"
+            ?hidden=${this._splitterCols[1] === null}
+            style=${this._splitterGridStyle(1)}
+            ${j(this._splitterRefs[1])}
+            @pointerdown=${(e) => this._startPaneDrag(e, 1)}
+          ></div>
+
+          <doclang-markup-pane
+            ${j(this._markupPaneRef)}
+            class="pane"
+            ?hidden=${!this._isPaneVisible("markup")}
+            style=${this._paneGridStyle("markup")}
+          ></doclang-markup-pane>
+
+          <div
+            class="pane-splitter"
+            role="separator"
+            aria-orientation="vertical"
+            aria-label="Resize DocLang and Reading view panes"
+            tabindex="0"
+            ?hidden=${this._splitterCols[2] === null}
+            style=${this._splitterGridStyle(2)}
+            ${j(this._splitterRefs[2])}
+            @pointerdown=${(e) => this._startPaneDrag(e, 2)}
+          ></div>
+
+          <doclang-reading-pane
+            ${j(this._readingPaneRef)}
+            class="pane"
+            ?hidden=${!this._isPaneVisible("reading")}
+            style=${this._paneGridStyle("reading")}
+          ></doclang-reading-pane>
+        </doclang-pane-stack>
+      </div>
+
+    `;
+	}
+	_renderDocument() {}
+	_clearDocument() {}
+	_paneGridStyle(e) {
+		let t = this._paneGridCols.get(e);
+		return t === void 0 ? "" : `grid-column:${t}`;
+	}
+	_splitterGridStyle(e) {
+		let t = this._splitterCols[e];
+		return t === null ? "" : `grid-column:${t}`;
+	}
+	_isPaneAvailable(e) {
+		return e === "file" ? this._collection.size > 0 : e === "page" ? !!this._docState?.hasPageView : !!this._docState;
+	}
+	_isPaneVisible(e) {
+		return this._isPaneAvailable(e) ? this.panes.includes(e) : !1;
+	}
+	_visiblePaneKeys() {
+		return [...Q].filter((e) => this._isPaneVisible(e));
+	}
+	_filePaneFitWidthPx() {
+		let e = document.createElement("div");
+		e.style.cssText = "position:absolute;visibility:hidden;width:var(--doclang-file-pane-fit-width);", (this.shadowRoot ?? document.documentElement).appendChild(e);
+		let t = e.getBoundingClientRect().width;
+		return e.remove(), Math.ceil(t) || 108;
+	}
+	_resolvedFilePaneWidthPx() {
+		let e = this._filePaneFitWidthPx();
+		return Math.max(e, this._filePaneWidthPx ?? e);
+	}
+	_contentPaneFrWeights(e) {
+		let t = e.filter((e) => e !== "file"), n = t.map((e) => this._paneRatios[this._paneRatioIndex(e)]), r = n.reduce((e, t) => e + t, 0) || t.length;
+		return n.map((e) => e / r);
+	}
+	_paneRatioIndex(e) {
+		return Q.indexOf(e);
+	}
+	_normalizePaneRatios() {
+		let e = this._paneRatios.reduce((e, t) => e + t, 0);
+		if (e <= 0) {
+			this._paneRatios = [...$i];
+			return;
+		}
+		this._paneRatios = this._paneRatios.map((t) => t / e);
+	}
+	_paneKeysAdjacent(e, t) {
+		return Q.indexOf(e) >= 0 && Q.indexOf(t) === Q.indexOf(e) + 1;
+	}
+	_onlyHiddenPanesBetween(e, t) {
+		let n = Q.indexOf(e), r = Q.indexOf(t);
+		if (n < 0 || r <= n) return !1;
+		for (let e = n + 1; e < r; e++) if (this._isPaneVisible(Q[e])) return !1;
+		return !0;
+	}
+	_shouldShowSplitter(e, t) {
+		return !this._isPaneVisible(e) || !this._isPaneVisible(t) ? !1 : this._paneKeysAdjacent(e, t) ? !0 : this._onlyHiddenPanesBetween(e, t);
+	}
+	_visibleNeighborAfter(e) {
+		let t = Q.indexOf(e);
+		for (let e = t + 1; e < Q.length; e++) if (this._isPaneVisible(Q[e])) return Q[e];
+		return null;
+	}
+	_visibleNeighborBefore(e) {
+		let t = Q.indexOf(e);
+		for (let e = t - 1; e >= 0; e--) if (this._isPaneVisible(Q[e])) return Q[e];
+		return null;
+	}
+	_applyPaneLayout() {
+		let e = this._visiblePaneKeys();
+		e.length || (this.panes.includes("markup") || (this.panes = [...this.panes, "markup"]), e = this._visiblePaneKeys());
+		let t = /* @__PURE__ */ new Map(), n = [
+			null,
+			null,
+			null
+		];
+		if (!this._loaded) {
+			this._paneGridCols = t, this._splitterCols = n, this._mainGridStyle = {}, this.requestUpdate();
+			return;
+		}
+		let r = this._contentPaneFrWeights(e), i = [], a = 0;
+		e.forEach((t, n) => {
+			t === "file" ? i.push(`${this._resolvedFilePaneWidthPx()}px`) : i.push(`minmax(0, ${r[a++].toFixed(6)}fr)`), n < e.length - 1 && this._shouldShowSplitter(e[n], e[n + 1]) && i.push("1px");
+		});
+		let o = 1;
+		e.forEach((r, i) => {
+			if (t.set(r, o++), i < e.length - 1) {
+				let t = e[i], r = e[i + 1];
+				if (!this._shouldShowSplitter(t, r)) return;
+				let a = Q.indexOf(t);
+				a >= 0 && a < 3 && (n[a] = o++);
+			}
+		}), this._paneGridCols = t, this._splitterCols = n, this._mainGridStyle = { gridTemplateColumns: i.join(" ") }, this._pageViewPaneRef.value?.refreshLayout(), this._readingPaneRef.value?.setVisible(this._isPaneVisible("reading")), this.requestUpdate();
+	}
+	_setUserPaneVisible(e, t) {
+		this.panes = t ? [...this.panes.filter((t) => t !== e), e] : this.panes.filter((t) => t !== e), e === "file" && (this._filePaneUserToggled = !0), e === "page" && this._syncPagePaneControls(), this._syncToolbarPaneCheckboxes(), this._saveLayoutPrefs(), this._applyPaneLayout();
+	}
+	_syncPagePaneControls() {
+		this._pageViewPaneRef.value?.setVisible(this._isPaneVisible("page"));
+	}
+	_loadLayoutPrefs() {
+		try {
+			let e = localStorage.getItem(Zi);
+			if (!e) return;
+			let t = JSON.parse(e);
+			if (t?.visible && typeof t.visible == "object") {
+				let e = [];
+				for (let n of Q) t.visible[n] === !0 && e.push(n);
+				e.length && (this.panes = e), typeof t.visible.file == "boolean" && (this._filePaneUserToggled = !0);
+			}
+			if (Array.isArray(t?.ratios)) {
+				let e = t.ratios.every((e) => typeof e == "number" && e > 0);
+				e && t.ratios.length === 4 ? (this._paneRatios = [...t.ratios], this._normalizePaneRatios()) : e && t.ratios.length === 3 && (this._paneRatios = [1, ...t.ratios], this._normalizePaneRatios());
+			}
+			typeof t?.filePaneWidthPx == "number" && t.filePaneWidthPx > 0 && (this._filePaneWidthPx = t.filePaneWidthPx);
+		} catch {}
+	}
+	_saveLayoutPrefs() {
+		try {
+			localStorage.setItem(Zi, JSON.stringify({
+				visible: Object.fromEntries(Q.map((e) => [e, this.panes.includes(e)])),
+				ratios: this._paneRatios,
+				filePaneWidthPx: this._filePaneWidthPx
+			}));
+		} catch {}
+	}
+	_resetPaneLayout() {
+		this._filePaneUserToggled = !1, this.panes = this._collection.hasMultiple() ? [
+			"file",
+			"page",
+			"markup",
+			"reading"
+		] : [
+			"page",
+			"markup",
+			"reading"
+		], this._paneRatios = [...$i], this._normalizePaneRatios(), this._filePaneWidthPx = null, this._syncPagePaneControls(), this._syncToolbarPaneCheckboxes(), this._saveLayoutPrefs(), this._applyPaneLayout();
+	}
+	_contentPaneAvailableWidthPx() {
+		let e = this._mainRef.value;
+		if (!e) return 1;
+		let t = e.getBoundingClientRect(), n = this._visiblePaneKeys(), r = 0;
+		n.includes("file") && (r += this._resolvedFilePaneWidthPx());
+		for (let e = 0; e < n.length - 1; e++) this._shouldShowSplitter(n[e], n[e + 1]) && (r += 1);
+		return Math.max(t.width - r, 1);
+	}
+	_resolvedPhysicalSplitterKeys(e) {
+		let t = Q[e], n = Q[e + 1];
+		if (!t || !n) return null;
+		let r = this._isPaneVisible(t) ? t : this._visibleNeighborBefore(n), i = this._isPaneVisible(n) ? n : this._visibleNeighborAfter(t);
+		return !r || !i || r === i || !this._shouldShowSplitter(r, i) || Q.indexOf(r) !== e ? null : {
+			leftKey: r,
+			rightKey: i
+		};
+	}
+	_startPaneDrag(e, t) {
+		if (e.button !== 0 || !this._loaded) return;
+		let n = this._resolvedPhysicalSplitterKeys(t);
+		if (!n) return;
+		let { leftKey: r, rightKey: i } = n;
+		this._normalizePaneRatios();
+		let a = this._paneRatioIndex(r), o = this._paneRatioIndex(i), s = {
+			physicalSplitterIndex: t,
+			leftKey: r,
+			rightKey: i,
+			startX: e.clientX,
+			leftStart: this._paneRatios[a],
+			rightStart: this._paneRatios[o],
+			pointerId: e.pointerId
+		};
+		r === "file" ? s.leftStartPx = this._resolvedFilePaneWidthPx() : i === "file" && (s.rightStartPx = this._resolvedFilePaneWidthPx()), this._paneDrag = s, e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), e.currentTarget.classList.add("is-dragging"), this._paneDragActive = !0, this.requestUpdate();
+	}
+	_findElementIdOnPage(e) {
+		if (!this._docState?.elementIds) return null;
+		for (let [t, n] of this._docState.elementIds) if (t === e) return n;
+		return null;
+	}
+	_navigateThreadFragment(e, t) {
+		let n = this._docState, r = n?.idToElement?.get(e);
+		if (!r) return;
+		let i = n?.threadNavByElement?.get(r);
+		if (!i) return;
+		let a = t === "prev" ? i.prev : i.next;
+		if (!a) return;
+		let o = n.elementPageByEl.get(a);
+		if (o) {
+			if (o === this.page) {
+				let e = this._findElementIdOnPage(a);
+				e && this._selectElement(e);
+				return;
+			}
+			n.pendingSelectElement = a, this.page = o;
+		}
+	}
+	_findListVirtualTextHost(e, t) {
+		let n = [...e.childNodes], r = xt(n, 0);
+		for (; r < n.length;) {
+			let e = n[r];
+			if (e.nodeType !== Node.ELEMENT_NODE || L(e) !== "ldiv") {
+				r++;
+				continue;
+			}
+			let i = e;
+			r++;
+			let a = St(n, r);
+			if (t === i || n.slice(r, a).some((e) => Et(t, e))) return i;
+			r = a;
+		}
+		return null;
+	}
+	_findTableVirtualTextHost(e, t) {
+		let n = [...e.childNodes], r = xt(n, 0);
+		for (; r < n.length;) {
+			let e = n[r];
+			if (e.nodeType !== Node.ELEMENT_NODE) {
+				r++;
+				continue;
+			}
+			let i = L(e);
+			if (i === "nl" || It(e) || _t.has(i) || !B(i)) {
+				r++;
+				continue;
+			}
+			let a = e;
+			r++;
+			let o = Ct(n, r);
+			if (t === a || n.slice(r, o).some((e) => Et(t, e))) return a;
+			r = o;
+		}
+		return null;
+	}
+	_findVirtualTextHost(e) {
+		let t = e;
+		for (; t;) {
+			let n = t.parentElement;
+			if (!n) return null;
+			let r = L(n);
+			if (r === "list") {
+				let t = this._findListVirtualTextHost(n, e);
+				if (t) return t;
+			}
+			if (N.has(r)) {
+				let t = this._findTableVirtualTextHost(n, e);
+				if (t) return t;
+			}
+			t = n;
+		}
+		return null;
+	}
+	_resolveSelectionElement(e) {
+		if (!e) return null;
+		if (Ft(e) || It(e)) return e;
+		let t = e.parentElement;
+		for (; t && L(t) !== "doclang";) {
+			if (Ft(t) && !bt(t)) return t;
+			t = t.parentElement;
+		}
+		let n = this._findVirtualTextHost(e);
+		if (n) return n;
+		for (t = e.parentElement; t && L(t) !== "doclang";) {
+			if (Ft(t) || It(t)) return t;
+			t = t.parentElement;
+		}
+		return null;
+	}
+	_resolveSelectionElementId(e) {
+		let t = this._docState;
+		if (!e || !t?.idToElement || !t.elementIds) return null;
+		let n = t.idToElement.get(e);
+		if (!n) return null;
+		let r = this._resolveSelectionElement(n);
+		return r ? t.elementIds.get(r) ?? null : null;
+	}
+	_selectElement(e) {
+		e && (this.selected = e);
+	}
+	_clearSelection() {
+		this.selected = null;
+	}
+	_syncToolbarPaneCheckboxes() {
+		this._toolbarRef.value?.syncPaneToggles({
+			file: this.panes.includes("file"),
+			page: this.panes.includes("page"),
+			markup: this.panes.includes("markup"),
+			reading: this.panes.includes("reading"),
+			fileAvailable: this._isPaneAvailable("file"),
+			pageAvailable: this._isPaneAvailable("page"),
+			hasState: !!this._docState
+		});
+	}
+	_setDocumentOpen(e, { markupOnly: t = !1 } = {}) {
+		this._loaded = e, this._markupOnly = e && t, this._syncToolbarPaneCheckboxes(), this._applyPaneLayout(), this.requestUpdate();
+	}
+	_setPageViewVisible() {
+		this._syncPagePaneControls(), this._syncToolbarPaneCheckboxes(), this._applyPaneLayout();
+	}
+	_resetViewer() {
+		this._setDemoLoading(!1), this._collection.clearAll(), this._filePaneUserToggled = !1, this._pageViewPaneRef.value?.resetZoom(), this._docLabel = null, this._setDocumentOpen(!1), this.document = null, this.selected = null, this._syncCollectionPaneDefault(), this._syncToolbarPaneCheckboxes(), this._applyPaneLayout(), this.requestUpdate();
+	}
+	_activateDocument(e, t = 1) {
+		let n = this._collection.activeEntry;
+		n && (this._pageViewPaneRef.value?.activateZoom(n.pageZoom ?? 100), this._docLabel = n.label, this.selected = null, this.document = e, this._setDocumentOpen(!0, { markupOnly: e.markupOnly }), this._setPageViewVisible(), this.page = t, this._syncCollectionPaneDefault(), this._syncToolbarPaneCheckboxes(), this._applyPaneLayout(), this.requestUpdate());
+	}
+	_syncCollectionPaneDefault() {
+		if (!this._filePaneUserToggled) {
+			let e = this.panes.includes("file"), t = this._collection.hasMultiple();
+			this.panes = t ? [...this.panes.filter((e) => e !== "file"), "file"] : this.panes.filter((e) => e !== "file"), !e && t && (this._paneRatios = [...$i], this._normalizePaneRatios(), this._filePaneWidthPx = null);
+		}
+	}
+	async _addFilesToCatalog(e, { replace: t = !1 } = {}) {
+		t && (this._filePaneUserToggled = !1);
+		let n = await this._collection.addFiles(e, { replace: t });
+		if (!n) return;
+		let r = this._collection.activeEntry;
+		this._activateDocument(n, r.currentPage ?? 1);
+	}
+	async _appendFolderArchive(e) {
+		let t = await this._collection.appendFolderArchive(e);
+		if (!t) return;
+		let n = this._collection.activeEntry;
+		this._activateDocument(t, n.currentPage ?? 1);
+	}
+	async _addArchiveBufferToCatalog(e, t, { replace: n = !1 } = {}) {
+		n && (this._filePaneUserToggled = !1);
+		let r = await this._collection.addArchiveBuffer(e, t, { replace: n });
+		if (!r) return;
+		let i = this._collection.activeEntry;
+		this._activateDocument(r, i.currentPage ?? 1);
+	}
+	_setDemoLoading(e) {
+		this._demoLoading = e, this._emptyStateRef.value?.setDemoLoading(e), this._toolbarRef.value?.setDemoLoading(e), this.requestUpdate();
+	}
+	async _loadDemo() {
+		if (!this._demoLoadInProgress) {
+			this._demoLoadInProgress = !0, this._setDemoLoading(!0);
+			try {
+				let e = this.example;
+				if (!e) throw Error("example URL not defined");
+				let t = await fetch(e);
+				if (!t.ok) throw Error(`HTTP ${t.status}`);
+				let n = e.split("/").pop() || "demo.dclx";
+				await this._addArchiveBufferToCatalog(await t.arrayBuffer(), n, { replace: !0 });
+			} catch (e) {
+				alert(`Failed to load demo: ${e.message}\n\nServe this directory over HTTP (e.g. python3 -m http.server) and open the viewer from localhost.`);
+			} finally {
+				this._demoLoadInProgress = !1, this._setDemoLoading(!1);
+			}
+		}
+	}
+	_hasArchiveTransfer(e) {
+		return !!(e && [...e.types].includes("Files"));
+	}
+	_initDragDrop() {
+		this.addEventListener("dragenter", (e) => {
+			this._hasArchiveTransfer(e.dataTransfer) && (e.preventDefault(), this._dragOver = !0, this.requestUpdate());
+		}), this.addEventListener("dragover", (e) => {
+			this._hasArchiveTransfer(e.dataTransfer) && (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "copy"));
+		}), this.addEventListener("dragleave", (e) => {
+			this._hasArchiveTransfer(e.dataTransfer) && (e.relatedTarget && this.contains(e.relatedTarget) || (this._dragOver = !1, this.requestUpdate()));
+		}), this.addEventListener("drop", async (e) => {
+			this._hasArchiveTransfer(e.dataTransfer) && (e.preventDefault(), this._dragOver = !1, this.requestUpdate(), e.dataTransfer && await this._loadFromDrop(e.dataTransfer));
+		});
+	}
+	async _loadFromFileList(e) {
+		if (e.some((e) => e.name === "document.xml")) {
+			await this._appendFolderArchive(e);
+			return;
+		}
+		let t = e.filter((e) => this._collection.isArchiveFile(e) || this._collection.isMarkupFile(e));
+		t.length && await this._addFilesToCatalog(t, { replace: !1 });
+	}
+	async _loadFromDrop(e) {
+		await this._loadFromFileList([...e.files]);
+	}
+	_initFileHandling() {
+		let e = window;
+		!("launchQueue" in window) || !e.launchQueue || e.launchQueue.setConsumer(async (e) => {
+			if (!e.files?.length) return;
+			this._suppressDemoLoad = !0;
+			let t = await Promise.all(e.files.map((e) => e.getFile()));
+			await this._loadFromFileList(t);
+		});
+	}
+	_initPaneDragListeners() {
+		window.addEventListener("pointermove", this._onWindowPointerMove), window.addEventListener("pointerup", this._onWindowPointerUp), window.addEventListener("pointercancel", this._onWindowPointerUp);
+	}
+};
+H([D({ type: String })], $.prototype, "example", void 0), H([O()], $.prototype, "_loaded", void 0), H([O()], $.prototype, "_markupOnly", void 0), H([O()], $.prototype, "_dragOver", void 0), H([O()], $.prototype, "_paneDragActive", void 0), H([O()], $.prototype, "_demoLoading", void 0), H([O()], $.prototype, "_docLabel", void 0), H([O()], $.prototype, "_mainGridStyle", void 0), H([O()], $.prototype, "_paneGridCols", void 0), H([O()], $.prototype, "_splitterCols", void 0), H([D({
+	type: Array,
+	attribute: "panes",
+	reflect: !0
+})], $.prototype, "panes", void 0), $ = H([E("doclang-viewer")], $);
+//#endregion
+export { Yi as CollectionController, Yn as DoclangCollectionPane, Un as DoclangDropdown, Ui as DoclangEmpty, lr as DoclangMarkupPane, U as DoclangPageElement, Yr as DoclangPageImgPane, Bn as DoclangPageNav, Wi as DoclangPaneStack, Z as DoclangReadingPane, fr as DoclangSettingsPanel, Wn as DoclangToolbar, $ as DoclangViewer, $n as PageController };
+
+//# sourceMappingURL=viewer.js.map
\ No newline at end of file
diff --git a/viewer.js.map b/viewer.js.map
new file mode 100644
index 0000000..4bd022c
--- /dev/null
+++ b/viewer.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"viewer.js","names":["t","e","s","o","n","r","S","c","i","e","h","r","o","n","a","c","l","p","d","u","f","b","y","t","s","t","i","s","e","h","o","n","r","l","c","u","d","f","v","m","p","M","j","s","i","t","e","r","o","t","o","e","t","r","n","r","t","t","o","i","n","e","c","f","r","s","u","h","e","i","o","c","h","n","e","t","i","e","o","n","s","i","t","s","i","t","r","s","t","r","l","p","v","o","i","n","f","e","e","r","t","s"],"sources":["core/node_modules/@lit/reactive-element/css-tag.js","core/node_modules/@lit/reactive-element/reactive-element.js","core/node_modules/lit-html/lit-html.js","core/node_modules/lit-element/lit-element.js","core/node_modules/@lit/reactive-element/decorators/custom-element.js","core/node_modules/@lit/reactive-element/decorators/property.js","core/node_modules/@lit/reactive-element/decorators/state.js","core/node_modules/lit-html/directive-helpers.js","core/node_modules/lit-html/directive.js","core/node_modules/lit-html/async-directive.js","core/node_modules/lit-html/directives/ref.js","core/src/components/page-nav/page-nav.css?inline","core/src/doclang/dom.ts","core/src/doclang/zip.ts","core/src/doclang/document.ts","core/src/components/base/page-element.ts","core/src/components/page-nav/page-nav.ts","core/node_modules/lit-html/directives/class-map.js","core/src/components/viewer/toolbar.css?inline","core/src/components/dropdown/dropdown.css?inline","core/src/components/dropdown/dropdown.ts","core/src/components/viewer/toolbar.ts","core/node_modules/lit-html/directives/repeat.js","core/src/components/collection/collection-pane.css?inline","core/src/components/collection/collection-pane.ts","core/src/components/base/page-controller.ts","core/src/components/markup-pane/markup-pane.css?inline","core/src/components/markup-pane/markup-pane.ts","core/src/components/page-img-pane/page-img-pane.css?inline","core/src/components/settings-panel/settings-panel.css?inline","core/src/components/settings-panel/settings-panel.ts","core/src/components/page-img-pane/overlay.ts","core/src/components/page-img-pane/page-img-pane.ts","core/src/components/reading-pane/reading-pane.css?inline","core/src/components/reading-pane/reading-pane.ts","core/src/components/viewer/empty.css?inline","core/src/components/viewer/empty.ts","core/src/components/container/pane-stack.ts","core/node_modules/lit-html/directives/style-map.js","core/src/components/viewer/viewer.css?inline","core/src/components/collection/collection.ts","core/src/components/viewer/viewer.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&\"adoptedStyleSheets\"in Document.prototype&&\"replace\"in CSSStyleSheet.prototype,s=Symbol(),o=new WeakMap;class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s)throw Error(\"CSSResult is not constructable. Use `unsafeCSS` or `css` instead.\");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const s=this.t;if(e&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o.set(s,t))}return t}toString(){return this.cssText}}const r=t=>new n(\"string\"==typeof t?t:t+\"\",void 0,s),i=(t,...e)=>{const o=1===t.length?t[0]:e.reduce((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if(\"number\"==typeof t)return t;throw Error(\"Value passed to 'css' function must be a 'css' function result: \"+t+\". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.\")})(s)+t[o+1],t[0]);return new n(o,t,s)},S=(s,o)=>{if(e)s.adoptedStyleSheets=o.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const e of o){const o=document.createElement(\"style\"),n=t.litNonce;void 0!==n&&o.setAttribute(\"nonce\",n),o.textContent=e.cssText,s.appendChild(o)}},c=e?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e=\"\";for(const s of t.cssRules)e+=s.cssText;return r(e)})(t):t;export{n as CSSResult,S as adoptStyles,i as css,c as getCompatibleStyle,e as supportsAdoptingStyleSheets,r as unsafeCSS};\n//# sourceMappingURL=css-tag.js.map\n","import{getCompatibleStyle as t,adoptStyles as s}from\"./css-tag.js\";export{CSSResult,css,supportsAdoptingStyleSheets,unsafeCSS}from\"./css-tag.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const{is:i,defineProperty:e,getOwnPropertyDescriptor:h,getOwnPropertyNames:r,getOwnPropertySymbols:o,getPrototypeOf:n}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:\"\",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},f=(t,s)=>!i(t,s),b={attribute:!0,type:String,converter:u,reflect:!1,useDefault:!1,hasChanged:f};Symbol.metadata??=Symbol(\"metadata\"),a.litPropertyMetadata??=new WeakMap;class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b){if(s.state&&(s.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=!0),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e(this.prototype,t,h)}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t}};return{get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d(\"elementProperties\")))return;const t=n(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(d(\"finalized\")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(d(\"properties\"))){const t=this.properties,s=[...r(t),...o(t)];for(const i of s)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(t(s))}else void 0!==s&&i.push(t(s));return i}static _$Eu(t,s){const i=s.attribute;return!1===i?void 0:\"string\"==typeof i?i:\"string\"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return s(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,s,i){this._$AK(t,i)}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h=\"function\"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null}}requestUpdate(t,s,i,e=!1,h){if(void 0!==t){const r=this.constructor;if(!1===e&&(h=this[t]),i??=r.getPropertyOptions(t),!((i.hasChanged??f)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(r._$Eu(t,i))))return;this.C(t,s,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),!0!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),!0===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];!0!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e)}}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(s)):this._$EM()}catch(s){throw t=!1,this._$EM(),s}t&&this._$AE(s)}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM()}updated(t){}firstUpdated(t){}}y.elementStyles=[],y.shadowRootOptions={mode:\"open\"},y[d(\"elementProperties\")]=new Map,y[d(\"finalized\")]=new Map,p?.({ReactiveElement:y}),(a.reactiveElementVersions??=[]).push(\"2.1.2\");export{y as ReactiveElement,s as adoptStyles,u as defaultConverter,t as getCompatibleStyle,f as notEqual};\n//# sourceMappingURL=reactive-element.js.map\n","/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst t=globalThis,i=t=>t,s=t.trustedTypes,e=s?s.createPolicy(\"lit-html\",{createHTML:t=>t}):void 0,h=\"$lit$\",o=`lit$${Math.random().toFixed(9).slice(2)}$`,n=\"?\"+o,r=`<${n}>`,l=document,c=()=>l.createComment(\"\"),a=t=>null===t||\"object\"!=typeof t&&\"function\"!=typeof t,u=Array.isArray,d=t=>u(t)||\"function\"==typeof t?.[Symbol.iterator],f=\"[ \\t\\n\\f\\r]\",v=/<(?:(!--|\\/[^a-zA-Z])|(\\/?[a-zA-Z][^>\\s]*)|(\\/?$))/g,_=/-->/g,m=/>/g,p=RegExp(`>|${f}(?:([^\\\\s\"'>=/]+)(${f}*=${f}*(?:[^ \\t\\n\\f\\r\"'\\`<>=]|(\"|')|))|$)`,\"g\"),g=/'/g,$=/\"/g,y=/^(?:script|style|textarea|title)$/i,x=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),b=x(1),w=x(2),T=x(3),E=Symbol.for(\"lit-noChange\"),A=Symbol.for(\"lit-nothing\"),C=new WeakMap,P=l.createTreeWalker(l,129);function V(t,i){if(!u(t)||!t.hasOwnProperty(\"raw\"))throw Error(\"invalid template strings array\");return void 0!==e?e.createHTML(i):i}const N=(t,i)=>{const s=t.length-1,e=[];let n,l=2===i?\"<svg>\":3===i?\"<math>\":\"\",c=v;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,f=0;for(;f<s.length&&(c.lastIndex=f,u=c.exec(s),null!==u);)f=c.lastIndex,c===v?\"!--\"===u[1]?c=_:void 0!==u[1]?c=m:void 0!==u[2]?(y.test(u[2])&&(n=RegExp(\"</\"+u[2],\"g\")),c=p):void 0!==u[3]&&(c=p):c===p?\">\"===u[0]?(c=n??v,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?p:'\"'===u[3]?$:g):c===$||c===g?c=p:c===_||c===m?c=v:(c=p,n=void 0);const x=c===p&&t[i+1].startsWith(\"/>\")?\" \":\"\";l+=c===v?s+r:d>=0?(e.push(a),s.slice(0,d)+h+s.slice(d)+o+x):s+o+(-2===d?i:x)}return[V(t,l+(t[s]||\"<?>\")+(2===i?\"</svg>\":3===i?\"</math>\":\"\")),e]};class S{constructor({strings:t,_$litType$:i},e){let r;this.parts=[];let l=0,a=0;const u=t.length-1,d=this.parts,[f,v]=N(t,i);if(this.el=S.createElement(f,e),P.currentNode=this.el.content,2===i||3===i){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(r=P.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(h)){const i=v[a++],s=r.getAttribute(t).split(o),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:l,name:e[2],strings:s,ctor:\".\"===e[1]?I:\"?\"===e[1]?L:\"@\"===e[1]?z:H}),r.removeAttribute(t)}else t.startsWith(o)&&(d.push({type:6,index:l}),r.removeAttribute(t));if(y.test(r.tagName)){const t=r.textContent.split(o),i=t.length-1;if(i>0){r.textContent=s?s.emptyScript:\"\";for(let s=0;s<i;s++)r.append(t[s],c()),P.nextNode(),d.push({type:2,index:++l});r.append(t[i],c())}}}else if(8===r.nodeType)if(r.data===n)d.push({type:2,index:l});else{let t=-1;for(;-1!==(t=r.data.indexOf(o,t+1));)d.push({type:7,index:l}),t+=o.length-1}l++}}static createElement(t,i){const s=l.createElement(\"template\");return s.innerHTML=t,s}}function M(t,i,s=t,e){if(i===E)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=a(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(!1),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=M(t,h._$AS(t,i.values),h,e)),i}class R{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??l).importNode(i,!0);P.currentNode=e;let h=P.nextNode(),o=0,n=0,r=s[0];for(;void 0!==r;){if(o===r.index){let i;2===r.type?i=new k(h,h.nextSibling,this,t):1===r.type?i=new r.ctor(h,r.name,r.strings,this,t):6===r.type&&(i=new Z(h,this,t)),this._$AV.push(i),r=s[++n]}o!==r?.index&&(h=P.nextNode(),o++)}return P.currentNode=l,e}p(t){let i=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++}}class k{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=A,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=M(this,t,i),a(t)?t===A||null==t||\"\"===t?(this._$AH!==A&&this._$AR(),this._$AH=A):t!==this._$AH&&t!==E&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):d(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==A&&a(this._$AH)?this._$AA.nextSibling.data=t:this.T(l.createTextNode(t)),this._$AH=t}$(t){const{values:i,_$litType$:s}=t,e=\"number\"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=S.createElement(V(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else{const t=new R(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t}}_$AC(t){let i=C.get(t.strings);return void 0===i&&C.set(t.strings,i=new S(t)),i}k(t){u(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new k(this.O(c()),this.O(c()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e)}_$AR(t=this._$AA.nextSibling,s){for(this._$AP?.(!1,!0,s);t!==this._$AB;){const s=i(t).nextSibling;i(t).remove(),t=s}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class H{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=A,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||\"\"!==s[0]||\"\"!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=A}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=M(this,t,i,0),o=!a(t)||t!==this._$AH&&t!==E,o&&(this._$AH=t);else{const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=M(this,e[s+n],i,n),r===E&&(r=this._$AH[n]),o||=!a(r)||r!==this._$AH[n],r===A?t=A:t!==A&&(t+=(r??\"\")+h[n+1]),this._$AH[n]=r}o&&!e&&this.j(t)}j(t){t===A?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??\"\")}}class I extends H{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===A?void 0:t}}class L extends H{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==A)}}class z extends H{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5}_$AI(t,i=this){if((t=M(this,t,i,0)??A)===E)return;const s=this._$AH,e=t===A&&s!==A||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==A&&(s===A||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){\"function\"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}}class Z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){M(this,t)}}const j={M:h,P:o,A:n,C:1,L:N,R,D:d,V:M,I:k,H,N:L,U:z,B:I,F:Z},B=t.litHtmlPolyfillSupport;B?.(S,k),(t.litHtmlVersions??=[]).push(\"3.3.3\");const D=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new k(i.insertBefore(c(),t),t,void 0,s??{})}return h._$AI(t),h};export{j as _$LH,b as html,T as mathml,E as noChange,A as nothing,D as render,w as svg};\n//# sourceMappingURL=lit-html.js.map\n","import{ReactiveElement as t}from\"@lit/reactive-element\";export*from\"@lit/reactive-element\";import{render as e,noChange as r}from\"lit-html\";export*from\"lit-html\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const s=globalThis;class i extends t{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=e(r,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return r}}i._$litElement$=!0,i[\"finalized\"]=!0,s.litElementHydrateSupport?.({LitElement:i});const o=s.litElementPolyfillSupport;o?.({LitElement:i});const n={_$AK:(t,e,r)=>{t._$AK(e,r)},_$AL:t=>t._$AL};(s.litElementVersions??=[]).push(\"4.2.2\");export{i as LitElement,n as _$LE};\n//# sourceMappingURL=lit-element.js.map\n","/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst t=t=>(e,o)=>{void 0!==o?o.addInitializer(()=>{customElements.define(t,e)}):customElements.define(t,e)};export{t as customElement};\n//# sourceMappingURL=custom-element.js.map\n","import{notEqual as t,defaultConverter as e}from\"../reactive-element.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const o={attribute:!0,type:String,converter:e,reflect:!1,hasChanged:t},r=(t=o,e,r)=>{const{kind:n,metadata:i}=r;let s=globalThis.litPropertyMetadata.get(i);if(void 0===s&&globalThis.litPropertyMetadata.set(i,s=new Map),\"setter\"===n&&((t=Object.create(t)).wrapped=!0),s.set(r.name,t),\"accessor\"===n){const{name:o}=r;return{set(r){const n=e.get.call(this);e.set.call(this,r),this.requestUpdate(o,n,t,!0,r)},init(e){return void 0!==e&&this.C(o,void 0,t,e),e}}}if(\"setter\"===n){const{name:o}=r;return function(r){const n=this[o];e.call(this,r),this.requestUpdate(o,n,t,!0,r)}}throw Error(\"Unsupported decorator location: \"+n)};function n(t){return(e,o)=>\"object\"==typeof o?r(t,e,o):((t,e,o)=>{const r=e.hasOwnProperty(o);return e.constructor.createProperty(o,t),r?Object.getOwnPropertyDescriptor(e,o):void 0})(t,e,o)}export{n as property,r as standardProperty};\n//# sourceMappingURL=property.js.map\n","import{property as t}from\"./property.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function r(r){return t({...r,state:!0,attribute:!1})}export{r as state};\n//# sourceMappingURL=state.js.map\n","import{_$LH as o}from\"./lit-html.js\";\n/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const{I:t}=o,i=o=>o,n=o=>null===o||\"object\"!=typeof o&&\"function\"!=typeof o,e={HTML:1,SVG:2,MATHML:3},l=(o,t)=>void 0===t?void 0!==o?._$litType$:o?._$litType$===t,d=o=>null!=o?._$litType$?.h,c=o=>void 0!==o?._$litDirective$,f=o=>o?._$litDirective$,r=o=>void 0===o.strings,s=()=>document.createComment(\"\"),v=(o,n,e)=>{const l=o._$AA.parentNode,d=void 0===n?o._$AB:n._$AA;if(void 0===e){const i=l.insertBefore(s(),d),n=l.insertBefore(s(),d);e=new t(i,n,o,o.options)}else{const t=e._$AB.nextSibling,n=e._$AM,c=n!==o;if(c){let t;e._$AQ?.(o),e._$AM=o,void 0!==e._$AP&&(t=o._$AU)!==n._$AU&&e._$AP(t)}if(t!==d||c){let o=e._$AA;for(;o!==t;){const t=i(o).nextSibling;i(l).insertBefore(o,d),o=t}}}return e},u=(o,t,i=o)=>(o._$AI(t,i),o),m={},p=(o,t=m)=>o._$AH=t,M=o=>o._$AH,h=o=>{o._$AR(),o._$AA.remove()},j=o=>{o._$AR()};export{e as TemplateResultType,j as clearPart,M as getCommittedValue,f as getDirectiveClass,v as insertPart,d as isCompiledTemplateResult,c as isDirectiveResult,n as isPrimitive,r as isSingleExpression,l as isTemplateResult,h as removePart,u as setChildPartValue,p as setCommittedValue};\n//# sourceMappingURL=directive-helpers.js.map\n","/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}export{i as Directive,t as PartType,e as directive};\n//# sourceMappingURL=directive.js.map\n","import{isSingleExpression as i}from\"./directive-helpers.js\";import{Directive as t,PartType as e}from\"./directive.js\";export{directive}from\"./directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const s=(i,t)=>{const e=i._$AN;if(void 0===e)return!1;for(const i of e)i._$AO?.(t,!1),s(i,t);return!0},o=i=>{let t,e;do{if(void 0===(t=i._$AM))break;e=t._$AN,e.delete(i),i=t}while(0===e?.size)},r=i=>{for(let t;t=i._$AM;i=t){let e=t._$AN;if(void 0===e)t._$AN=e=new Set;else if(e.has(i))break;e.add(i),c(t)}};function h(i){void 0!==this._$AN?(o(this),this._$AM=i,r(this)):this._$AM=i}function n(i,t=!1,e=0){const r=this._$AH,h=this._$AN;if(void 0!==h&&0!==h.size)if(t)if(Array.isArray(r))for(let i=e;i<r.length;i++)s(r[i],!1),o(r[i]);else null!=r&&(s(r,!1),o(r));else s(this,i)}const c=i=>{i.type==e.CHILD&&(i._$AP??=n,i._$AQ??=h)};class f extends t{constructor(){super(...arguments),this._$AN=void 0}_$AT(i,t,e){super._$AT(i,t,e),r(this),this.isConnected=i._$AU}_$AO(i,t=!0){i!==this.isConnected&&(this.isConnected=i,i?this.reconnected?.():this.disconnected?.()),t&&(s(this,i),o(this))}setValue(t){if(i(this._$Ct))this._$Ct._$AI(t,this);else{const i=[...this._$Ct._$AH];i[this._$Ci]=t,this._$Ct._$AI(i,this,0)}}disconnected(){}reconnected(){}}export{f as AsyncDirective,t as Directive,e as PartType};\n//# sourceMappingURL=async-directive.js.map\n","import{nothing as t}from\"../lit-html.js\";import{AsyncDirective as i}from\"../async-directive.js\";import{directive as s}from\"../directive.js\";\n/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const e=()=>new h;class h{}const o=new WeakMap,n=s(class extends i{render(i){return t}update(i,[s]){const e=s!==this.G;return e&&this.rt(void 0),(e||this.lt!==this.ct)&&(this.G=s,this.ht=i.options?.host,this.rt(this.ct=i.element)),t}rt(t){if(void 0!==this.G)if(this.isConnected||(t=void 0),\"function\"==typeof this.G){const i=this.ht??globalThis;let s=o.get(i);void 0===s&&(s=new WeakMap,o.set(i,s)),void 0!==s.get(this.G)&&this.G.call(this.ht,void 0),s.set(this.G,t),void 0!==t&&this.G.call(this.ht,t)}else this.G.value=t}get lt(){return\"function\"==typeof this.G?o.get(this.ht??globalThis)?.get(this.G):this.G?.value}disconnected(){this.lt===this.ct&&this.rt(void 0)}reconnected(){this.rt(this.ct)}});export{e as createRef,n as ref};\n//# sourceMappingURL=ref.js.map\n","@import '../theme.css';\n\n:host {\n  display: contents;\n}\nnav {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  margin-left: 0.25rem;\n}\nnav::before {\n  content: '';\n  flex-shrink: 0;\n  align-self: center;\n  width: 1px;\n  height: 1.125rem;\n  margin-right: 0.75rem;\n  background: var(--border);\n}\nnav[hidden] {\n  display: none;\n}\n.page-nav-btns {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.page-nav-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.875rem;\n  height: 1.875rem;\n  padding: 0;\n  flex-shrink: 0;\n  appearance: none;\n  border: 1px solid var(--border);\n  background: var(--panel);\n  color: var(--text);\n  border-radius: 0.375rem;\n  font: inherit;\n  font-size: 0.875rem;\n  cursor: pointer;\n}\n.page-nav-btn:hover {\n  border-color: var(--accent);\n}\n.page-nav-btn:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.page-nav-chevron {\n  display: block;\n  width: 0.875rem;\n  height: 0.875rem;\n}\n.page-indicator {\n  display: inline-flex;\n  align-items: center;\n  font-size: 0.875rem;\n  color: var(--muted);\n  font-variant-numeric: tabular-nums;\n}\n.page-number-input {\n  appearance: none;\n  border: 1px solid var(--border);\n  border-radius: 0.375rem;\n  background: var(--panel);\n  color: var(--text);\n  font: inherit;\n  font-size: 0.875rem;\n  font-variant-numeric: tabular-nums;\n  text-align: center;\n  padding: 0 0.35rem;\n  margin: 0;\n  height: 1.875rem;\n  box-sizing: border-box;\n  width: calc(var(--doclang-page-num-digits, 1) * 1ch + 0.75rem);\n  line-height: 1;\n  cursor: text;\n}\n.page-number-input:hover:not(:disabled) {\n  border-color: var(--accent);\n}\n.page-number-input:focus {\n  outline: none;\n  border-color: var(--accent);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);\n}\n.page-number-input:disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n","\nexport const DOCLANG_NS = 'https://www.doclang.ai/ns/v0';\nexport const HEAD_TAGS = new Set([\n  'label',\n  'thread',\n  'xref',\n  'href',\n  'layer',\n  'location',\n  'caption',\n  'description',\n  'summary',\n  'custom',\n]);\nexport const SEMANTIC_TAGS = new Set([\n  'text',\n  'heading',\n  'footnote',\n  'page_header',\n  'page_footer',\n  'field_region',\n  'list',\n  'table',\n  'index',\n  'formula',\n  'code',\n  'picture',\n  'marker',\n  'group',\n  'field_heading',\n  'field_item',\n  'key',\n  'value',\n  'hint',\n  'caption',\n  'page_break',\n]);\nexport const CELL_TOKENS = new Set([\n  'fcel',\n  'ecel',\n  'ched',\n  'rhed',\n  'corn',\n  'srow',\n  'lcel',\n  'ucel',\n  'xcel',\n  'nl',\n]);\nexport const CELL_CONTENT_TAGS = new Set([\n  'fcel',\n  'ecel',\n  'ched',\n  'rhed',\n  'corn',\n  'srow',\n]);\nexport const CELL_SPAN_TAGS = new Set(['lcel', 'ucel', 'xcel']);\nexport const OTSL_CONTAINER_TAGS = new Set(['table', 'index', 'tabular']);\n\nexport function isTextLikeNode(node: Node): boolean {\n  return node.nodeType === Node.TEXT_NODE || node.nodeType === Node.CDATA_SECTION_NODE;\n}\n\nexport function isWhitespaceOnlyText(node: Node): boolean {\n  return isTextLikeNode(node) && !node.textContent?.trim();\n}\n\nexport function markupAttributes(el: Element): { name: string; value: string }[] {\n  return [...el.attributes]\n    .filter(a => a.name !== 'xmlns' || a.value !== DOCLANG_NS)\n    .map(a => ({ name: a.name, value: a.value }));\n}\n\nexport function childElements(el: Element): Element[] {\n  return [...el.children];\n}\n\nexport function localName(el: Element): string {\n  return el.localName || el.tagName.replace(/^.*:/, '');\n}\n\nexport function headLocations(el: Element): Element[] {\n  return parseElementHeadAt([...el.childNodes], 0)?.locs ?? [];\n}\n\ninterface ParsedElementHead {\n  locs: Element[];\n  nextIndex: number;\n}\n\nexport function parseElementHeadAt(\n  nodes: ArrayLike<ChildNode>,\n  startIdx: number\n): ParsedElementHead | null {\n  const locs: Element[] = [];\n  let i = startIdx;\n  while (i < nodes.length) {\n    const node = nodes[i];\n    if (!node) {\n      i += 1;\n      continue;\n    }\n    if (node.nodeType !== Node.ELEMENT_NODE) {\n      i += 1;\n      continue;\n    }\n    const tag = localName(node as Element);\n    if (tag === 'location') {\n      locs.push(node as Element);\n      i += 1;\n      if (locs.length === 4) return { locs, nextIndex: i };\n      continue;\n    }\n    if (locs.length) break;\n    if (HEAD_TAGS.has(tag)) {\n      i += 1;\n      continue;\n    }\n    break;\n  }\n  return locs.length === 4 ? { locs, nextIndex: i } : null;\n}\n\nexport function walkElements(\n  nodes: ArrayLike<ChildNode> | Element[],\n  fn: (el: Element) => void\n): void {\n  for (let i = 0; i < nodes.length; i += 1) {\n    const node = nodes[i];\n    if (!node || node.nodeType !== Node.ELEMENT_NODE) continue;\n    fn(node as Element);\n    walkElements(childElements(node as Element), fn);\n  }\n}\n\nexport function isCellToken(tag: string): boolean {\n  return CELL_TOKENS.has(tag);\n}\n\nexport function isListOrOtslContainer(el: Element): boolean {\n  const tag = localName(el);\n  return tag === 'list' || OTSL_CONTAINER_TAGS.has(tag);\n}\n\nexport function skipContainerLevelHead(nodes: ChildNode[], startIdx: number): number {\n  let i = startIdx;\n  while (i < nodes.length) {\n    const node = nodes[i];\n    if (!node) {\n      i += 1;\n      continue;\n    }\n    if (node.nodeType !== Node.ELEMENT_NODE) {\n      i += 1;\n      continue;\n    }\n    const tag = localName(node as Element);\n    if (tag === 'ldiv' || isCellToken(tag)) break;\n    if (HEAD_TAGS.has(tag) || tag === 'location') {\n      i += 1;\n      continue;\n    }\n    break;\n  }\n  return i;\n}\n\nexport function skipUntilListItemBoundary(\n  nodes: ChildNode[],\n  startIdx: number\n): number {\n  let i = startIdx;\n  while (i < nodes.length) {\n    const node = nodes[i];\n    if (\n      node &&\n      node.nodeType === Node.ELEMENT_NODE &&\n      localName(node as Element) === 'ldiv'\n    )\n      break;\n    i += 1;\n  }\n  return i;\n}\n\nexport function skipUntilCellBoundary(nodes: ChildNode[], startIdx: number): number {\n  let i = startIdx;\n  while (i < nodes.length) {\n    const node = nodes[i];\n    if (\n      node &&\n      node.nodeType === Node.ELEMENT_NODE &&\n      isCellToken(localName(node as Element))\n    )\n      break;\n    i += 1;\n  }\n  return i;\n}\n\nexport function locationResolution(el: Element, axisDefault: number): number {\n  const r = parseInt(el.getAttribute('resolution') ?? String(axisDefault), 10);\n  return Number.isFinite(r) && r > 0 ? r : axisDefault;\n}\n\nexport function headingLevel(el: Element): number {\n  return Math.min(Math.max(parseInt(el.getAttribute('level') ?? '1', 10) || 1, 1), 6);\n}\n\nexport function firstHeadChild(el: Element, tag: string): Element | null {\n  return childElements(el).find(child => localName(child) === tag) ?? null;\n}\n\nexport function xmlContains(target: Node, ancestor: Node): boolean {\n  let node: Node | null = target;\n  while (node) {\n    if (node === ancestor) return true;\n    node = node.parentNode;\n  }\n  return false;\n}\n\nexport function formatMarkupTextNode(node: Node): string {\n  if (node.nodeType === Node.CDATA_SECTION_NODE) {\n    return `<![CDATA[${node.textContent ?? ''}]]>`;\n  }\n  return node.textContent?.trim() ?? '';\n}\n\nexport function serializeMarkupTextNodes(nodes: ArrayLike<ChildNode>): string {\n  return Array.from(nodes)\n    .filter(n => isTextLikeNode(n) && !isWhitespaceOnlyText(n))\n    .map(formatMarkupTextNode)\n    .join('');\n}\n\nexport function escapeHtml(text: string): string {\n  return String(text)\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;');\n}\n\nexport function normalizeArchivePath(path: string): string {\n  return path.replace(/\\\\/g, '/').replace(/^\\.\\//, '');\n}\n\nexport function archiveRelativeAssetPath(path: string): string | null {\n  const norm = normalizeArchivePath(path);\n  const idx = norm.indexOf('assets/');\n  return idx === -1 ? null : norm.slice(idx);\n}\n\nexport function mimeFromAssetPath(path: string): string {\n  const ext = path.split('.').pop()?.toLowerCase() ?? '';\n  switch (ext) {\n    case 'png':\n      return 'image/png';\n    case 'jpg':\n    case 'jpeg':\n      return 'image/jpeg';\n    case 'webp':\n      return 'image/webp';\n    case 'gif':\n      return 'image/gif';\n    case 'svg':\n      return 'image/svg+xml';\n    default:\n      return 'application/octet-stream';\n  }\n}\n\nexport function skipOtslContainerHead(nodes: ChildNode[], startIdx: number): number {\n  let i = startIdx;\n  while (i < nodes.length) {\n    const node = nodes[i];\n    if (!node) {\n      i += 1;\n      continue;\n    }\n    if (node.nodeType !== Node.ELEMENT_NODE) {\n      i += 1;\n      continue;\n    }\n    const tag = localName(node as Element);\n    if (isCellToken(tag)) break;\n    if (HEAD_TAGS.has(tag) || tag === 'h_thread' || tag === 'location') {\n      i += 1;\n      continue;\n    }\n    break;\n  }\n  return i;\n}\n\nexport function skipElementHeadNodes(nodes: ChildNode[], startIdx: number): number {\n  let i = startIdx;\n  while (i < nodes.length && isWhitespaceOnlyText(nodes[i]!)) i += 1;\n  while (i < nodes.length) {\n    const node = nodes[i];\n    if (\n      node &&\n      node.nodeType === Node.ELEMENT_NODE &&\n      HEAD_TAGS.has(localName(node as Element))\n    ) {\n      i += 1;\n      while (i < nodes.length && isWhitespaceOnlyText(nodes[i]!)) i += 1;\n      continue;\n    }\n    break;\n  }\n  return i;\n}\n\nexport function isSemanticElement(el: Element): boolean {\n  return SEMANTIC_TAGS.has(localName(el));\n}\n\nexport function isVirtualTextHost(el: Element): boolean {\n  const tag = localName(el);\n  return tag === 'ldiv' || CELL_CONTENT_TAGS.has(tag);\n}\n\nexport function elementThreadId(el: Element): string | null {\n  return firstHeadChild(el, 'thread')?.getAttribute('thread_id') ?? null;\n}\n\nexport function elementLayer(el: Element): string {\n  const layerEl = firstHeadChild(el, 'layer');\n  if (layerEl) {\n    const value = layerEl.getAttribute('value') ?? 'body';\n    return ELEMENT_LAYERS.has(value) ? value : 'body';\n  }\n  if (headLocations(el).length === 4) return 'body';\n  const parent = el.parentElement;\n  if (!parent) return 'body';\n  const nodes = [...parent.childNodes];\n  const idx = nodes.indexOf(el);\n  if (idx < 0) return 'body';\n  return layerFromHeadNodes(nodes, idx + 1);\n}\n\nexport const ELEMENT_LAYERS = new Set(['body', 'background', 'furniture']);\n\nexport function layerFromHeadNodes(nodes: ChildNode[], startIdx: number): string {\n  let i = startIdx;\n  while (i < nodes.length) {\n    const node = nodes[i];\n    if (!node) {\n      i += 1;\n      continue;\n    }\n    if (node.nodeType !== Node.ELEMENT_NODE) {\n      i += 1;\n      continue;\n    }\n    const tag = localName(node as Element);\n    if (tag === 'layer') {\n      const value = (node as Element).getAttribute('value') ?? 'body';\n      return ELEMENT_LAYERS.has(value) ? value : 'body';\n    }\n    if (tag === 'location') break;\n    if (HEAD_TAGS.has(tag)) {\n      i += 1;\n      continue;\n    }\n    break;\n  }\n  return 'body';\n}\n\nexport function layerClassForValue(layer: string): string {\n  if (layer === 'furniture') return 'layer-furniture';\n  if (layer === 'background') return 'layer-background';\n  return '';\n}\n\nexport function headingLevelFromEl(el: Element): number {\n  return headingLevel(el);\n}\n\nexport function elementLabel(el: Element): string {\n  if (isVirtualTextOverlayUnit(el)) return 'text';\n  const tag = localName(el);\n  if (tag === 'heading' || tag === 'field_heading')\n    return `${tag}[${headingLevel(el)}]`;\n  const level = el.getAttribute('level');\n  if (level) return `${tag}[${level}]`;\n  const cls = el.getAttribute('class');\n  if (cls) return `${tag}.${cls}`;\n  return tag;\n}\n\nexport function isVirtualTextOverlayUnit(el: Element): boolean {\n  if (headLocations(el).length === 4) return false;\n  if (!hasVirtualTextLocations(el)) return false;\n  const tag = localName(el);\n  if (tag === 'ldiv' && el.parentElement && localName(el.parentElement) === 'list')\n    return true;\n  if (isCellToken(tag) && tag !== 'nl' && !CELL_SPAN_TAGS.has(tag)) {\n    return el.parentElement\n      ? OTSL_CONTAINER_TAGS.has(localName(el.parentElement))\n      : false;\n  }\n  return false;\n}\n\nexport function hasVirtualTextLocations(el: Element): boolean {\n  const parent = el.parentElement;\n  if (!parent) return false;\n  const nodes = [...parent.childNodes];\n  const idx = nodes.indexOf(el);\n  if (idx < 0) return false;\n  return parseElementHeadAt(nodes, idx + 1) !== null;\n}\n\nexport function virtualTextHeadLocations(el: Element): Element[] {\n  const parent = el.parentElement;\n  if (!parent) return [];\n  const nodes = [...parent.childNodes];\n  const idx = nodes.indexOf(el);\n  if (idx < 0) return [];\n  return parseElementHeadAt(nodes, idx + 1)?.locs ?? [];\n}\n\nexport function elementHeadLocations(el: Element): Element[] {\n  const own = headLocations(el);\n  return own.length === 4 ? own : virtualTextHeadLocations(el);\n}\n\nexport function isPictureContentElement(el: Element | null): boolean {\n  if (!el) return false;\n  const tag = localName(el);\n  if (tag === 'picture' || tag === 'caption') return false;\n  let node: Element | null = el.parentElement;\n  while (node) {\n    if (localName(node) === 'picture') return true;\n    node = node.parentElement;\n  }\n  return false;\n}\n\nexport function isTableContentElement(el: Element | null): boolean {\n  if (!el) return false;\n  const tag = localName(el);\n  if (OTSL_CONTAINER_TAGS.has(tag) || tag === 'caption') return false;\n  let node: Element | null = el.parentElement;\n  while (node) {\n    if (OTSL_CONTAINER_TAGS.has(localName(node))) return true;\n    node = node.parentElement;\n  }\n  return false;\n}\n","import { mimeFromAssetPath } from './dom';\n\nconst ZIP_MAX_ENTRIES = 5000;\nconst ZIP_MAX_ENTRY_COMPRESSED_BYTES = 128 * 1024 * 1024; // 128 MiB\nconst ZIP_MAX_ENTRY_UNCOMPRESSED_BYTES = 128 * 1024 * 1024; // 128 MiB\nconst ZIP_MAX_TOTAL_UNCOMPRESSED_BYTES = 512 * 1024 * 1024; // 512 MiB\nconst ZIP_MAX_COMPRESSION_RATIO = 100; // uncompressed / compressed\n\nexport interface ZipEntry {\n  name: string;\n  data: Uint8Array;\n}\n\nconst TEXT_DECODER = new TextDecoder();\n\nexport async function unzip(\n  buffer: ArrayBuffer,\n  { shouldExtract }: { shouldExtract?: (name: string) => boolean } = {}\n): Promise<ZipEntry[]> {\n  if (typeof DecompressionStream === 'undefined') {\n    throw new Error(\n      'ZIP decompression requires a browser with DecompressionStream support'\n    );\n  }\n\n  const bytes = new Uint8Array(buffer);\n  const view = new DataView(buffer);\n  const eocdOffset = findEndOfCentralDirectory(bytes);\n  const entryCount = view.getUint16(eocdOffset + 10, true);\n  const centralDirOffset = view.getUint32(eocdOffset + 16, true);\n\n  if (entryCount > ZIP_MAX_ENTRIES) {\n    throw new Error('ZIP archive has too many entries');\n  }\n  if (centralDirOffset >= bytes.length) {\n    throw new Error('Invalid ZIP central directory offset');\n  }\n\n  const entries: ZipEntry[] = [];\n  let offset = centralDirOffset;\n  let totalUncompressed = 0;\n\n  for (let i = 0; i < entryCount; i += 1) {\n    if (offset + 46 > bytes.length || view.getUint32(offset, true) !== 0x02014b50) {\n      throw new Error('Invalid ZIP central directory');\n    }\n\n    const compression = view.getUint16(offset + 10, true);\n    const compressedSize = view.getUint32(offset + 20, true);\n    const uncompressedSize = view.getUint32(offset + 24, true);\n    const nameLength = view.getUint16(offset + 28, true);\n    const extraLength = view.getUint16(offset + 30, true);\n    const commentLength = view.getUint16(offset + 32, true);\n    const localHeaderOffset = view.getUint32(offset + 42, true);\n    const nameEnd = offset + 46 + nameLength;\n    if (nameEnd > bytes.length) {\n      throw new Error('Invalid ZIP entry name');\n    }\n    const rawName = TEXT_DECODER.decode(bytes.subarray(offset + 46, nameEnd));\n    const name = normalizeZipEntryName(rawName);\n\n    offset = nameEnd + extraLength + commentLength;\n    if (offset > bytes.length) {\n      throw new Error('Invalid ZIP central directory');\n    }\n\n    if (!name || name.endsWith('/') || isIgnoredArchiveEntry(name)) continue;\n    if (shouldExtract && !shouldExtract(name)) continue;\n\n    if (\n      compressedSize > ZIP_MAX_ENTRY_COMPRESSED_BYTES ||\n      uncompressedSize > ZIP_MAX_ENTRY_UNCOMPRESSED_BYTES\n    ) {\n      throw new Error(`ZIP entry exceeds size limit: ${name}`);\n    }\n    if (\n      compressedSize > 0 &&\n      uncompressedSize > 0 &&\n      uncompressedSize / compressedSize > ZIP_MAX_COMPRESSION_RATIO\n    ) {\n      throw new Error(`ZIP entry compression ratio exceeds limit: ${name}`);\n    }\n    if (totalUncompressed + uncompressedSize > ZIP_MAX_TOTAL_UNCOMPRESSED_BYTES) {\n      throw new Error('ZIP archive exceeds total uncompressed size limit');\n    }\n\n    if (\n      localHeaderOffset + 30 > bytes.length ||\n      view.getUint32(localHeaderOffset, true) !== 0x04034b50\n    ) {\n      throw new Error(`Invalid ZIP local header: ${name}`);\n    }\n    const localNameLength = view.getUint16(localHeaderOffset + 26, true);\n    const localExtraLength = view.getUint16(localHeaderOffset + 28, true);\n    const dataOffset = localHeaderOffset + 30 + localNameLength + localExtraLength;\n    if (dataOffset + compressedSize > bytes.length) {\n      throw new Error(`ZIP entry data out of bounds: ${name}`);\n    }\n    const compressed = bytes.subarray(dataOffset, dataOffset + compressedSize);\n    const data = await decompressZipEntry(compressed, compression, uncompressedSize);\n    totalUncompressed += data.length;\n    if (totalUncompressed > ZIP_MAX_TOTAL_UNCOMPRESSED_BYTES) {\n      throw new Error('ZIP archive exceeds total uncompressed size limit');\n    }\n    entries.push({ name, data });\n  }\n\n  return entries;\n}\n\nfunction findEndOfCentralDirectory(bytes: Uint8Array): number {\n  for (let i = bytes.length - 22; i >= 0; i -= 1) {\n    if (\n      bytes[i] === 0x50 &&\n      bytes[i + 1] === 0x4b &&\n      bytes[i + 2] === 0x05 &&\n      bytes[i + 3] === 0x06\n    ) {\n      return i;\n    }\n  }\n  throw new Error('Invalid ZIP archive');\n}\n\nfunction concatUint8Arrays(chunks: Uint8Array[], totalLength: number): Uint8Array {\n  const out = new Uint8Array(totalLength);\n  let offset = 0;\n  for (const chunk of chunks) {\n    out.set(chunk, offset);\n    offset += chunk.byteLength;\n  }\n  return out;\n}\n\nasync function decompressZipEntry(\n  data: Uint8Array,\n  method: number,\n  uncompressedSize: number\n): Promise<Uint8Array> {\n  if (method === 0) {\n    if (data.length > ZIP_MAX_ENTRY_UNCOMPRESSED_BYTES) {\n      throw new Error('ZIP entry exceeds size limit');\n    }\n    return data;\n  }\n  if (method === 8) {\n    const stream = new Blob([data as BlobPart])\n      .stream()\n      .pipeThrough(new DecompressionStream('deflate-raw'));\n    const reader = stream.getReader();\n    const chunks: Uint8Array[] = [];\n    let total = 0;\n    try {\n      while (true) {\n        const { done, value } = await reader.read();\n        if (done) break;\n        total += value.byteLength;\n        if (total > ZIP_MAX_ENTRY_UNCOMPRESSED_BYTES) {\n          throw new Error('ZIP entry exceeds size limit');\n        }\n        if (data.length > 0 && total / data.length > ZIP_MAX_COMPRESSION_RATIO) {\n          throw new Error('ZIP entry compression ratio exceeds limit');\n        }\n        chunks.push(value);\n      }\n    } catch (err) {\n      try {\n        await reader.cancel();\n      } catch {\n        /* ignore cancel errors */\n      }\n      throw err;\n    }\n\n    const out = concatUint8Arrays(chunks, total);\n    if (uncompressedSize && out.length !== uncompressedSize) {\n      return out.slice(0, Math.min(out.length, uncompressedSize));\n    }\n    return out;\n  }\n  throw new Error(`Unsupported ZIP compression method ${method}`);\n}\n\nfunction normalizeZipEntryName(name: string): string {\n  return name.replace(/\\\\/g, '/').replace(/^\\.\\//, '');\n}\n\nexport function findArchiveEntry(\n  entries: ZipEntry[],\n  fileName: string\n): ZipEntry | undefined {\n  return entries.find(e => e.name === fileName);\n}\n\nexport function isIgnoredArchiveEntry(name: string): boolean {\n  if (name === '.DS_Store' || name.endsWith('/.DS_Store')) return true;\n  return name.split('/').some(part => part.startsWith('._') || part === '__MACOSX');\n}\n\nexport async function extractArchiveFromZipBuffer(buffer: ArrayBuffer): Promise<{\n  markupXml: string;\n  pageImages: Map<number, string>;\n  assetUrls: Map<string, string>;\n}> {\n  const entries = await unzip(buffer);\n  const markupEntry = findArchiveEntry(entries, 'document.xml');\n  if (!markupEntry) {\n    throw new Error('Archive must contain document.xml');\n  }\n  const markupXml = new TextDecoder().decode(markupEntry.data);\n  const pageImages = new Map<number, string>();\n  const assetUrls = new Map<string, string>();\n  for (const e of entries) {\n    const m = e.name.match(/^pages\\/(\\d+)\\.(png|jpe?g|webp)$/i);\n    if (m) {\n      pageImages.set(\n        Number(m[1]),\n        URL.createObjectURL(new Blob([e.data as BlobPart], { type: mimeFromAssetPath(e.name) }))\n      );\n      continue;\n    }\n    if (e.name.startsWith('assets/') && !e.name.endsWith('/')) {\n      assetUrls.set(\n        e.name,\n        URL.createObjectURL(\n          new Blob([e.data as BlobPart], { type: mimeFromAssetPath(e.name) })\n        )\n      );\n    }\n  }\n  return { markupXml, pageImages, assetUrls };\n}\n\n","import {\n  DOCLANG_NS,\n  HEAD_TAGS,\n  CELL_SPAN_TAGS,\n  OTSL_CONTAINER_TAGS,\n  childElements,\n  localName,\n  headLocations,\n  firstHeadChild,\n  walkElements,\n  locationResolution,\n  parseElementHeadAt,\n  skipContainerLevelHead,\n  skipUntilListItemBoundary,\n  skipUntilCellBoundary,\n  isCellToken,\n  isTextLikeNode,\n  isWhitespaceOnlyText,\n  serializeMarkupTextNodes,\n  formatMarkupTextNode,\n  archiveRelativeAssetPath,\n  elementLayer,\n  elementLabel,\n  isVirtualTextOverlayUnit,\n} from './dom';\nimport type {\n  DocumentState,\n  Resolution,\n  BoundingBox,\n  ReadingOrderStep,\n  CaptionLink,\n  XrefLink,\n  FragmentLink,\n  FragmentNavItem,\n  ThreadNav,\n} from './types';\nimport { extractArchiveFromZipBuffer } from './zip';\nimport { isPictureContentElement, isTableContentElement } from './dom';\n\nexport const PAGE_IMAGE_RE = /^(\\d+)\\.(png|jpe?g|webp)$/i;\nexport const NO_MARKUP = '(No markup to be shown.)';\nconst RENDER_FORMAT_TAGS = new Set([\n  'bold',\n  'italic',\n  'underline',\n  'strikethrough',\n  'superscript',\n  'subscript',\n  'handwriting',\n  'rtl',\n  'content',\n]);\n\n// ---------------------------------------------------------------------------\n// Document XML parsing helpers\n// ---------------------------------------------------------------------------\n\nexport function splitIntoSegments(root: Element): Element[][] {\n  const body = childElements(root).filter(el => localName(el) !== 'head');\n  const segments: Element[][] = [[]];\n  for (const el of body) {\n    if (localName(el) === 'page_break') {\n      segments.push([]);\n    } else {\n      segments[segments.length - 1]!.push(el);\n    }\n  }\n  return segments.length ? segments : [[]];\n}\n\nexport function segmentHasMarkup(segment: Element[]): boolean {\n  return segment.some(el => el.nodeType === Node.ELEMENT_NODE);\n}\n\nexport function readDefaultResolution(head: Element | null): Resolution {\n  const fallback = { width: 512, height: 512 };\n  if (!head) return fallback;\n  const dr = childElements(head).find(el => localName(el) === 'default_resolution');\n  if (!dr) return fallback;\n  const w = parseInt(dr.getAttribute('width') ?? '512', 10);\n  const h = parseInt(dr.getAttribute('height') ?? '512', 10);\n  return {\n    width: Number.isFinite(w) && w > 0 ? w : 512,\n    height: Number.isFinite(h) && h > 0 ? h : 512,\n  };\n}\n\nexport function assignElementIds(segment: Element[]): Map<Element, string> {\n  const ids = new Map<Element, string>();\n  let counter = 0;\n  walkElements(segment, el => {\n    ids.set(el, `el-${counter++}`);\n  });\n  return ids;\n}\n\nexport function invertElementIds(\n  elementIds: Map<Element, string>\n): Map<string, Element> {\n  const idToElement = new Map<string, Element>();\n  for (const [el, id] of elementIds) idToElement.set(id, el);\n  return idToElement;\n}\n\n// ---------------------------------------------------------------------------\n// Thread / reading order helpers\n// ---------------------------------------------------------------------------\n\nfunction buildThreadsById(docRoot: Element): Map<string, Element[]> {\n  const map = new Map<string, Element[]>();\n  const roots = childElements(docRoot).filter(el => localName(el) !== 'head');\n  walkElements(roots, el => {\n    for (const child of childElements(el)) {\n      if (localName(child) !== 'thread') continue;\n      const threadId = child.getAttribute('thread_id');\n      if (!threadId) continue;\n      if (!map.has(threadId)) map.set(threadId, []);\n      map.get(threadId)!.push(el);\n    }\n  });\n  return map;\n}\n\nexport function buildElementPageMap(segments: Element[][]): Map<Element, number> {\n  const elementPage = new Map<Element, number>();\n  segments.forEach((segment, idx) => {\n    const pageNum = idx + 1;\n    walkElements(segment, el => elementPage.set(el, pageNum));\n  });\n  return elementPage;\n}\n\nexport function buildThreadPagesById(\n  docRoot: Element,\n  elementPageByEl: Map<Element, number>\n): Map<string, Set<number>> {\n  const threadPagesById = new Map<string, Set<number>>();\n  for (const [threadId, elements] of buildThreadsById(docRoot)) {\n    const pages = new Set<number>();\n    for (const el of elements) {\n      const page = elementPageByEl.get(el);\n      if (page) pages.add(page);\n    }\n    if (pages.size) threadPagesById.set(threadId, pages);\n  }\n  return threadPagesById;\n}\n\nexport function buildThreadNavByElement(docRoot: Element): Map<Element, ThreadNav> {\n  const nav = new Map<Element, ThreadNav>();\n  for (const [, elements] of buildThreadsById(docRoot)) {\n    for (let i = 0; i < elements.length; i += 1) {\n      nav.set(elements[i]!, {\n        prev: i > 0 ? elements[i - 1]! : null,\n        next: i < elements.length - 1 ? elements[i + 1]! : null,\n      });\n    }\n  }\n  return nav;\n}\n\nfunction isReadingOrderUnit(el: Element): boolean {\n  const tag = localName(el);\n  if (tag === 'caption') return true;\n  if (\n    HEAD_TAGS.has(tag) ||\n    tag === 'location' ||\n    tag === 'h_thread' ||\n    tag === 'page_break'\n  )\n    return false;\n  if (tag === 'nl' || CELL_SPAN_TAGS.has(tag)) return false;\n  if (RENDER_FORMAT_TAGS.has(tag) || tag === 'src' || tag === 'checkbox') return false;\n  return true;\n}\n\nexport function computeReadingOrder(docRoot: Element): Element[] {\n  const bodyChildren = childElements(docRoot).filter(el => localName(el) !== 'head');\n  const threadsById = buildThreadsById(docRoot);\n  const consumedViaXref = new Set<Element>();\n  const order: Element[] = [];\n\n  function record(el: Element): void {\n    if (!isReadingOrderUnit(el)) return;\n    order.push(el);\n  }\n\n  function consumeThread(threadId: string): void {\n    for (const target of threadsById.get(threadId) ?? []) {\n      if (consumedViaXref.has(target)) continue;\n      consumedViaXref.add(target);\n      visitElement(target);\n    }\n  }\n\n  function walkChildren(parent: Element): void {\n    for (const child of parent.childNodes) {\n      if (child.nodeType !== Node.ELEMENT_NODE) continue;\n      const el = child as Element;\n      const tag = localName(el);\n      if (tag === 'xref') {\n        const threadId = el.getAttribute('thread_id');\n        if (threadId) consumeThread(threadId);\n        continue;\n      }\n      if (tag === 'page_break') continue;\n      visitElement(el);\n    }\n  }\n\n  function visitElement(el: Element): void {\n    record(el);\n    walkChildren(el);\n  }\n\n  for (const el of bodyChildren) {\n    if (localName(el) === 'page_break') continue;\n    if (consumedViaXref.has(el)) continue;\n    visitElement(el);\n  }\n\n  return order;\n}\n\nfunction isReadingOrderOverlayUnit(el: Element): boolean {\n  if (!isReadingOrderUnit(el)) return false;\n  if (isPictureContentElement(el) || isTableContentElement(el)) return false;\n  if (headLocations(el).length === 4) return true;\n  return isVirtualTextOverlayUnit(el);\n}\n\nexport function computeReadingOrderDisplayNumbers(\n  readingOrder: Element[]\n): Map<Element, number> {\n  const numbers = new Map<Element, number>();\n  let n = 0;\n  for (const el of readingOrder) {\n    if (!isReadingOrderOverlayUnit(el)) continue;\n    n += 1;\n    numbers.set(el, n);\n  }\n  return numbers;\n}\n\n// ---------------------------------------------------------------------------\n// Bounding box collection\n// ---------------------------------------------------------------------------\n\nfunction pushBoundingBox(\n  boxes: BoundingBox[],\n  locs: Element[],\n  defaultResolution: Resolution,\n  kind: string,\n  tag: string,\n  elementId: string,\n  layer = 'body'\n): void {\n  const [x0el, y0el, x1el, y1el] = locs as [Element, Element, Element, Element];\n  const resW = locationResolution(x0el, defaultResolution.width);\n  const resH = locationResolution(y0el, defaultResolution.height);\n  boxes.push({\n    kind,\n    tag,\n    elementId,\n    layer,\n    x0: parseInt(x0el.getAttribute('value') ?? '0', 10),\n    y0: parseInt(y0el.getAttribute('value') ?? '0', 10),\n    x1: parseInt(x1el.getAttribute('value') ?? '0', 10),\n    y1: parseInt(y1el.getAttribute('value') ?? '0', 10),\n    resW,\n    resH,\n  });\n}\n\nfunction collectListVirtualTextBoxes(\n  list: Element,\n  defaultResolution: Resolution,\n  boxes: BoundingBox[],\n  elementIds: Map<Element, string>\n): void {\n  const nodes = [...list.childNodes];\n  let i = skipContainerLevelHead(nodes, 0);\n  while (i < nodes.length) {\n    const node = nodes[i]!;\n    if (node.nodeType !== Node.ELEMENT_NODE || localName(node as Element) !== 'ldiv') {\n      i += 1;\n      continue;\n    }\n    i += 1;\n    const head = parseElementHeadAt(nodes, i);\n    if (head) {\n      const elementId = elementIds.get(node as Element);\n      if (elementId) {\n        pushBoundingBox(\n          boxes,\n          head.locs,\n          defaultResolution,\n          'text',\n          'text',\n          elementId,\n          elementLayer(node as Element)\n        );\n      }\n      i = head.nextIndex;\n    }\n    i = skipUntilListItemBoundary(nodes, i);\n  }\n}\n\nfunction collectTableVirtualTextBoxes(\n  container: Element,\n  defaultResolution: Resolution,\n  boxes: BoundingBox[],\n  elementIds: Map<Element, string>\n): void {\n  const nodes = [...container.childNodes];\n  let i = skipContainerLevelHead(nodes, 0);\n  while (i < nodes.length) {\n    const node = nodes[i]!;\n    if (node.nodeType !== Node.ELEMENT_NODE) {\n      i += 1;\n      continue;\n    }\n    const tag = localName(node as Element);\n    if (!isCellToken(tag)) {\n      i += 1;\n      continue;\n    }\n    if (tag === 'nl') {\n      i += 1;\n      continue;\n    }\n    i += 1;\n    const head = parseElementHeadAt(nodes, i);\n    if (head) {\n      const elementId = elementIds.get(node as Element);\n      if (elementId) {\n        pushBoundingBox(\n          boxes,\n          head.locs,\n          defaultResolution,\n          'text',\n          'text',\n          elementId,\n          elementLayer(node as Element)\n        );\n      }\n      i = head.nextIndex;\n    }\n    i = skipUntilCellBoundary(nodes, i);\n  }\n}\n\nexport function collectBoundingBoxes(\n  segment: Element[],\n  defaultResolution: Resolution,\n  elementIds: Map<Element, string>\n): BoundingBox[] {\n  const boxes: BoundingBox[] = [];\n  walkElements(segment, el => {\n    const locs = headLocations(el);\n    if (locs.length !== 4) return;\n    const elementId = elementIds.get(el);\n    if (!elementId) return;\n    pushBoundingBox(\n      boxes,\n      locs,\n      defaultResolution,\n      localName(el),\n      elementLabel(el),\n      elementId,\n      elementLayer(el)\n    );\n  });\n  walkElements(segment, el => {\n    const tag = localName(el);\n    if (tag === 'list')\n      collectListVirtualTextBoxes(el, defaultResolution, boxes, elementIds);\n    else if (OTSL_CONTAINER_TAGS.has(tag)) {\n      collectTableVirtualTextBoxes(el, defaultResolution, boxes, elementIds);\n    }\n  });\n  return boxes;\n}\n\nexport function collectCaptionLinks(\n  segment: Element[],\n  elementIds: Map<Element, string>,\n  boxes: BoundingBox[]\n): CaptionLink[] {\n  const boxById = new Map(boxes.map(b => [b.elementId, b]));\n  const links: CaptionLink[] = [];\n  walkElements(segment, el => {\n    if (localName(el) !== 'caption') return;\n    const captionId = elementIds.get(el);\n    const captionBox = captionId ? boxById.get(captionId) : null;\n    if (!captionBox) return;\n    const host = el.parentElement;\n    if (!host || headLocations(host).length !== 4) return;\n    const hostId = elementIds.get(host);\n    const hostBox = hostId ? boxById.get(hostId) : null;\n    if (!hostBox) return;\n    links.push({\n      captionBox,\n      hostBox,\n      captionElementId: captionId!,\n      hostElementId: hostId!,\n    });\n  });\n  return links;\n}\n\nexport function collectXrefLinks(\n  segment: Element[],\n  elementIds: Map<Element, string>,\n  boxes: BoundingBox[]\n): XrefLink[] {\n  const boxById = new Map(boxes.map(b => [b.elementId, b]));\n  const threadsById = new Map<string, { elementId: string; box: BoundingBox }[]>();\n\n  walkElements(segment, el => {\n    const elementId = elementIds.get(el);\n    const box = elementId ? boxById.get(elementId) : null;\n    if (!box) return;\n    for (const thread of childElements(el)) {\n      if (localName(thread) !== 'thread') continue;\n      const threadId = thread.getAttribute('thread_id');\n      if (!threadId) continue;\n      if (!threadsById.has(threadId)) threadsById.set(threadId, []);\n      threadsById.get(threadId)!.push({ elementId: elementId!, box });\n    }\n  });\n\n  const links: XrefLink[] = [];\n  walkElements(segment, el => {\n    const xrefs = childElements(el).filter(c => localName(c) === 'xref');\n    if (!xrefs.length) return;\n    const from = findNearestLocatedBox(el, elementIds, boxById);\n    if (!from) return;\n    for (const xref of xrefs) {\n      const threadId = xref.getAttribute('thread_id');\n      if (!threadId) continue;\n      for (const { elementId: toId, box: toBox } of threadsById.get(threadId) ?? []) {\n        if (toId === from.elementId) continue;\n        links.push({\n          fromBox: from.box,\n          toBox,\n          fromElementId: from.elementId,\n          toElementId: toId,\n        });\n      }\n    }\n  });\n  return links;\n}\n\nfunction findNearestLocatedBox(\n  el: Element,\n  elementIds: Map<Element, string>,\n  boxById: Map<string, BoundingBox>\n): { elementId: string; box: BoundingBox } | null {\n  let node: Element | null = el;\n  while (node) {\n    const elementId = elementIds.get(node);\n    const box = elementId ? boxById.get(elementId) : null;\n    if (box) return { elementId: elementId!, box };\n    if (localName(node) === 'doclang') break;\n    node = node.parentElement;\n  }\n  return null;\n}\n\nexport function collectFragmentLinks(\n  segment: Element[],\n  elementIds: Map<Element, string>,\n  boxes: BoundingBox[],\n  pageNum: number,\n  threadPagesById: Map<string, Set<number>>\n): FragmentLink[] {\n  const boxById = new Map(boxes.map(b => [b.elementId, b]));\n  const onPage = new Map<string, { elementId: string; box: BoundingBox }[]>();\n\n  walkElements(segment, el => {\n    const thread = firstHeadChild(el, 'thread');\n    const threadId = thread?.getAttribute('thread_id');\n    if (!threadId) return;\n    const elementId = elementIds.get(el);\n    const box = elementId ? boxById.get(elementId) : null;\n    if (!box) return;\n    if (!onPage.has(threadId)) onPage.set(threadId, []);\n    onPage.get(threadId)!.push({ elementId: elementId!, box });\n  });\n\n  const links: FragmentLink[] = [];\n\n  for (const [threadId, members] of onPage) {\n    if (members.length >= 2) {\n      for (let i = 0; i < members.length - 1; i += 1) {\n        links.push({\n          fromBox: members[i]!.box,\n          toBox: members[i + 1]!.box,\n          fromElementId: members[i]!.elementId,\n          toElementId: members[i + 1]!.elementId,\n          threadId,\n        });\n      }\n      continue;\n    }\n\n    if (members.length !== 1) continue;\n    const threadPages = threadPagesById.get(threadId);\n    if (!threadPages) continue;\n    const hasPrevious = [...threadPages].some(p => p < pageNum);\n    const hasFollowing = [...threadPages].some(p => p > pageNum);\n    if (!hasPrevious && !hasFollowing) continue;\n\n    const base = {\n      fromBox: members[0]!.box,\n      toBox: null,\n      fromElementId: members[0]!.elementId,\n      toElementId: null,\n      threadId,\n    };\n    if (hasPrevious) links.push({ ...base, targetCorner: 'tl' as const });\n    if (hasFollowing) links.push({ ...base, targetCorner: 'br' as const });\n  }\n\n  return links;\n}\n\nexport function collectFragmentNavItems(\n  segment: Element[],\n  elementIds: Map<Element, string>,\n  boxes: BoundingBox[],\n  threadNavByElement: Map<Element, ThreadNav>\n): FragmentNavItem[] {\n  const boxById = new Map(boxes.map(b => [b.elementId, b]));\n  const items: FragmentNavItem[] = [];\n  walkElements(segment, el => {\n    const nav = threadNavByElement.get(el);\n    if (!nav || (!nav.prev && !nav.next)) return;\n    const elementId = elementIds.get(el);\n    const box = elementId ? boxById.get(elementId) : null;\n    if (!box) return;\n    items.push({\n      elementId: elementId!,\n      box,\n      hasPrev: nav.prev !== null,\n      hasNext: nav.next !== null,\n    });\n  });\n  return items;\n}\n\nexport function collectReadingOrderSteps(\n  segment: Element[],\n  elementIds: Map<Element, string>,\n  boxes: BoundingBox[],\n  readingOrder: Element[],\n  globalNumbering = true,\n  displayNumbers: Map<Element, number> | null = null\n): ReadingOrderStep[] {\n  const boxById = new Map(boxes.map(b => [b.elementId, b]));\n  const steps: ReadingOrderStep[] = [];\n  let pageOrder = 0;\n\n  readingOrder.forEach(el => {\n    if (isPictureContentElement(el) || isTableContentElement(el)) return;\n    const elementId = elementIds.get(el);\n    if (!elementId) return;\n    const box = boxById.get(elementId);\n    if (!box) return;\n    pageOrder += 1;\n    steps.push({\n      order: globalNumbering ? (displayNumbers?.get(el) ?? pageOrder) : pageOrder,\n      box,\n      elementId,\n    });\n  });\n\n  return steps;\n}\n\n// ---------------------------------------------------------------------------\n// Build document state\n// ---------------------------------------------------------------------------\n\nexport function buildDocumentState(\n  markupXml: string,\n  pageImages: Map<number, string>,\n  label: string,\n  assetUrls: Map<string, string>,\n  { markupOnly }: { markupOnly: boolean }\n): DocumentState | null {\n  const doc = new DOMParser().parseFromString(markupXml, 'application/xml');\n  const parseError = doc.querySelector('parsererror');\n  if (parseError) {\n    alert(`Invalid XML in ${label}`);\n    return null;\n  }\n  const root = doc.documentElement;\n  if (localName(root) !== 'doclang') {\n    alert(`${label}: root element must be <doclang>`);\n    return null;\n  }\n\n  const head = childElements(root).find(el => localName(el) === 'head') ?? null;\n  const defaultResolution = readDefaultResolution(head);\n  const segments = markupOnly\n    ? [childElements(root).filter(el => localName(el) !== 'head')]\n    : splitIntoSegments(root);\n  const hasPageView = !markupOnly && pageImages.size > 0;\n  const maxImagePage = hasPageView ? Math.max(...pageImages.keys()) : 0;\n  const pageCount = markupOnly ? 1 : Math.max(segments.length, maxImagePage, 1);\n  const readingOrder = computeReadingOrder(root);\n  const elementPageByEl = buildElementPageMap(segments);\n\n  return {\n    pageImages,\n    assetUrls,\n    pageCount,\n    segments,\n    defaultResolution,\n    elementIds: new Map(),\n    idToElement: new Map(),\n    hasPageView,\n    markupOnly,\n    docRoot: root,\n    threadPagesById: buildThreadPagesById(root, elementPageByEl),\n    elementPageByEl,\n    threadNavByElement: buildThreadNavByElement(root),\n    pendingSelectElement: null,\n    readingOrder,\n    readingOrderDisplayNumbers: computeReadingOrderDisplayNumbers(readingOrder),\n  };\n}\n\n// ---------------------------------------------------------------------------\n// Archive extraction helpers\n// ---------------------------------------------------------------------------\n\nexport async function extractArchiveFromFiles(files: File[]): Promise<{\n  markupXml: string;\n  pageImages: Map<number, string>;\n  assetUrls: Map<string, string>;\n}> {\n  const markupFile = files.find(f => f.name === 'document.xml');\n  if (!markupFile) throw new Error('Archive must contain document.xml at its root.');\n  const markupXml = await markupFile.text();\n  const pageImages = new Map<number, string>();\n  const assetUrls = new Map<string, string>();\n  for (const f of files) {\n    const relPath = f.webkitRelativePath || f.name;\n    const parts = relPath.split('/');\n    if (parts.length >= 2 && parts[parts.length - 2] === 'pages') {\n      const m = PAGE_IMAGE_RE.exec(f.name);\n      if (m) pageImages.set(Number(m[1]), URL.createObjectURL(f));\n    }\n    const assetPath = archiveRelativeAssetPath(relPath);\n    if (assetPath) assetUrls.set(assetPath, URL.createObjectURL(f));\n  }\n  return { markupXml, pageImages, assetUrls };\n}\n\nexport { extractArchiveFromZipBuffer };\n\nexport function revokeDocumentState(docState: DocumentState): void {\n  if (!docState) return;\n  for (const url of docState.pageImages.values()) {\n    if (url.startsWith('blob:')) URL.revokeObjectURL(url);\n  }\n  for (const url of docState.assetUrls.values()) {\n    if (url.startsWith('blob:')) URL.revokeObjectURL(url);\n  }\n}\n\nexport function serializeSegment(segment: Element[]): string {\n  return segment.map(el => serializeElement(el, 0)).join('\\n');\n}\n\nfunction serializeElement(el: Element, depth: number): string {\n  const pad = '  '.repeat(depth);\n  const tag = localName(el);\n  const attrs = [...el.attributes]\n    .filter(a => a.name !== 'xmlns' || a.value !== DOCLANG_NS)\n    .map(a => `${a.name}=\"${a.value}\"`)\n    .join(' ');\n  const attrStr = attrs ? ` ${attrs}` : '';\n\n  if (!el.childNodes.length) return `${pad}<${tag}${attrStr}/>`;\n\n  const meaningfulText = [...el.childNodes].filter(\n    n => isTextLikeNode(n) && !isWhitespaceOnlyText(n)\n  );\n  const textOnly =\n    meaningfulText.length > 0 &&\n    meaningfulText.every(isTextLikeNode) &&\n    !childElements(el).length;\n  if (textOnly) {\n    const text = serializeMarkupTextNodes(el.childNodes);\n    if (text) return `${pad}<${tag}${attrStr}>${text}</${tag}>`;\n  }\n\n  const parts = [`${pad}<${tag}${attrStr}>`];\n  for (const child of el.childNodes) {\n    if (isTextLikeNode(child)) {\n      const text = formatMarkupTextNode(child);\n      if (text) parts.push('  '.repeat(depth + 1) + text);\n    } else if (child.nodeType === Node.ELEMENT_NODE) {\n      parts.push(serializeElement(child as Element, depth + 1));\n    }\n  }\n  parts.push(`${pad}</${tag}>`);\n  return parts.join('\\n');\n}\n","/**\n * Base class for doclang web components that render document content.\n *\n * Supports three ways to provide the DocLang document:\n *\n *   1. `src` attribute — a URL (http:, data:, blob:) pointing to either a\n *      raw XML markup string or a .dclx/.zip archive.  The component fetches\n *      and parses it automatically.\n *\n *   2. Inline child `<script type=\"application/doclang+xml\">` — the XML is\n *      taken from the element's text content during `connectedCallback`.\n *\n *   3. `component.document = state` — set an already-parsed `DocumentState`\n *      directly via the JS property (fastest path, used by the viewer app).\n *\n * Once a document is available, `_renderDocument()` is called.  Subclasses\n * must implement that method.  They may also override `_clearDocument()` to\n * reset their view when the document is removed.\n */\n\nimport { LitElement, PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { buildDocumentState } from '../../doclang/document';\nimport { elementThreadId } from '../../doclang/dom';\nimport type { DocumentState } from '../../doclang/types';\n\nexport abstract class DoclangPageElement extends LitElement {\n  @property({ type: Number, reflect: true }) declare page: number;\n  @property({ type: String, reflect: true }) declare selected: string | null;\n  @property({ type: String }) declare src: string | null;\n\n  protected _docState: DocumentState | null = null;\n  protected _peerIds: Set<string> = new Set();\n\n  // ---------------------------------------------------------------------------\n  // Public document property\n  // ---------------------------------------------------------------------------\n\n  get document(): DocumentState | null {\n    return this._docState;\n  }\n\n  set document(state: DocumentState | null) {\n    const old = this._docState;\n    this._docState = state;\n    // Manually notify Lit so updated() sees '_docState' in `changed`, even\n    // though _docState is not a @property/@state field.  This is the correct\n    // Lit pattern for a plain field that needs to participate in the update\n    // lifecycle without being exposed as a public reflected attribute.\n    this.requestUpdate('_docState', old);\n    if (!state) {\n      this.page = 1;\n      this._clearDocument();\n    }\n  }\n\n  // ---------------------------------------------------------------------------\n  // Lit lifecycle\n  // ---------------------------------------------------------------------------\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // src is handled by attributeChangedCallback via the @property decorator.\n    // Only pick up the inline <script type=\"application/doclang+xml\"> fallback.\n    if (!this._docState && !this.getAttribute('src')) {\n      const script = this.querySelector('script[type=\"application/doclang+xml\"]');\n      if (script?.textContent?.trim()) {\n        this._loadXmlString(\n          script.textContent.trim(),\n          this.getAttribute('label') ?? ''\n        );\n      }\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n  }\n\n  override attributeChangedCallback(name: string, _old: string, next: string): void {\n    super.attributeChangedCallback(name, _old, next);\n    if (name === 'src' && next) {\n      this._loadFromUrl(next);\n    }\n  }\n\n  override updated(changed: PropertyValues): void {\n    super.updated(changed);\n\n    if ((changed.has('page') || changed.has('_docState')) && this._docState) {\n      // Clamp page to valid range whenever page or the document changes.\n      const clamped = Math.min(Math.max(1, this.page), this._docState.pageCount);\n      if (clamped !== this.page) {\n        this.page = clamped;\n        return; // updated() will fire again with the clamped value\n      }\n      this._renderDocument();\n    }\n\n    if (changed.has('selected')) {\n      this._peerIds = this.selected ? this._computePeerIds(this.selected) : new Set();\n      this._applySelection();\n    }\n  }\n\n  // ---------------------------------------------------------------------------\n  // Abstract interface for subclasses\n  // ---------------------------------------------------------------------------\n\n  /** Called whenever the document or current page changes. */\n  protected abstract _renderDocument(): void;\n\n  /** Called when the selected element changes. Default: no-op. */\n  protected _applySelection(): void {\n    /* subclasses may override */\n  }\n\n  /** Called when the document is removed (set to null). Default: no-op. */\n  protected _clearDocument(): void {\n    /* subclasses may override */\n  }\n\n  // ---------------------------------------------------------------------------\n  // Private helpers\n  // ---------------------------------------------------------------------------\n\n  private _computePeerIds(elementId: string): Set<string> {\n    const peers = new Set<string>();\n    if (!this._docState?.elementIds || !this._docState.idToElement) return peers;\n    const el = this._docState.idToElement.get(elementId);\n    const threadId = el ? elementThreadId(el) : null;\n    if (!threadId) return peers;\n    for (const [node, id] of this._docState.elementIds) {\n      if (elementThreadId(node) === threadId) peers.add(id);\n    }\n    return peers;\n  }\n\n  // ---------------------------------------------------------------------------\n  // Private loading helpers\n  // ---------------------------------------------------------------------------\n\n  private _loadXmlString(xml: string, label: string): void {\n    const state = buildDocumentState(xml, new Map(), label, new Map(), {\n      markupOnly: true,\n    });\n    if (state) this.document = state;\n  }\n\n  private async _loadFromUrl(url: string): Promise<void> {\n    try {\n      const res = await fetch(url);\n      if (!res.ok) throw new Error(`HTTP ${res.status}`);\n      const isZip =\n        url.includes('.dclx') ||\n        url.includes('.zip') ||\n        res.headers.get('content-type')?.includes('zip');\n      if (isZip) {\n        const { extractArchiveFromZipBuffer } = await import('../../doclang/document');\n        const buf = await res.arrayBuffer();\n        const { markupXml, pageImages, assetUrls } =\n          await extractArchiveFromZipBuffer(buf);\n        const label = url.split('/').pop() ?? '';\n        const state = buildDocumentState(markupXml, pageImages, label, assetUrls, {\n          markupOnly: false,\n        });\n        if (state) this.document = state;\n      } else {\n        const xml = await res.text();\n        const label = url.split('/').pop() ?? '';\n        this._loadXmlString(xml, label);\n      }\n    } catch (err) {\n      this.dispatchEvent(\n        new CustomEvent('doclang-load-error', {\n          bubbles: true,\n          composed: true,\n          detail: { error: err },\n        })\n      );\n    }\n  }\n}\n","/** <doclang-page-nav> — page navigation (prev/next buttons + page indicator) */\n\nimport { html, PropertyValues } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { unsafeCSS } from 'lit';\nimport { ref, createRef } from 'lit/directives/ref.js';\nimport type { Ref } from 'lit/directives/ref.js';\nimport styles from './page-nav.css?inline';\nimport { DoclangPageElement } from '../base/page-element';\n\n@customElement('doclang-page-nav')\nexport class DoclangPageNav extends DoclangPageElement {\n  static override styles = unsafeCSS(styles);\n\n  private _inputRef: Ref<HTMLInputElement> = createRef();\n\n  private get _pageCount(): number {\n    return this._docState?.pageCount ?? 1;\n  }\n\n  override render() {\n    const digits = Math.max(1, String(this._pageCount).length);\n    return html`\n      <nav id=\"page-nav\" aria-label=\"Page navigation\">\n        <div class=\"page-nav-btns\">\n          <button\n            type=\"button\"\n            class=\"page-nav-btn btn-prev\"\n            aria-label=\"Previous page\"\n            title=\"Previous page\"\n            ?disabled=${this.page <= 1}\n            @click=${this._onPrev}\n          >\n            <svg\n              class=\"page-nav-chevron\"\n              viewBox=\"0 0 16 16\"\n              width=\"16\"\n              height=\"16\"\n              aria-hidden=\"true\"\n            >\n              <path\n                d=\"M10.5 3.5 5.5 8l5 4.5\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.75\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              ></path>\n            </svg>\n          </button>\n          <button\n            type=\"button\"\n            class=\"page-nav-btn btn-next\"\n            aria-label=\"Next page\"\n            title=\"Next page\"\n            ?disabled=${this.page >= this._pageCount}\n            @click=${this._onNext}\n          >\n            <svg\n              class=\"page-nav-chevron\"\n              viewBox=\"0 0 16 16\"\n              width=\"16\"\n              height=\"16\"\n              aria-hidden=\"true\"\n            >\n              <path\n                d=\"M5.5 3.5 10.5 8l-5 4.5\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.75\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              ></path>\n            </svg>\n          </button>\n        </div>\n        <div class=\"page-indicator\">\n          <span>Page&#xA0;</span>\n          <input\n            ${ref(this._inputRef)}\n            type=\"text\"\n            inputmode=\"numeric\"\n            class=\"page-number-input\"\n            .value=${String(this.page)}\n            style=\"--doclang-page-num-digits:${digits}\"\n            aria-label=\"Page number\"\n            @keydown=${this._onInputKeydown}\n            @blur=${this._onInputBlur}\n            @focus=${(e: FocusEvent) => (e.target as HTMLInputElement).select()}\n          />\n          <span class=\"page-count\">&#xA0;of ${this._pageCount}</span>\n        </div>\n      </nav>\n    `;\n  }\n\n  override updated(changed: PropertyValues): void {\n    super.updated(changed);\n    // Keep the text input in sync whenever the page property changes from\n    // outside (e.g. a `.page=${n}` binding on the parent template).\n    if (changed.has('page')) {\n      this._resetInput();\n    }\n  }\n\n  protected override _renderDocument(): void { /* _docState is @state; re-render is automatic */ }\n  protected override _clearDocument(): void { /* _docState is @state; re-render is automatic */ }\n\n  // ---------------------------------------------------------------------------\n  // Private event handlers\n  // ---------------------------------------------------------------------------\n\n  private _onPrev = (): void => this._emitViewPage(this.page - 1);\n  private _onNext = (): void => this._emitViewPage(this.page + 1);\n\n  private _onInputKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      this._commitInput();\n      (e.target as HTMLInputElement).blur();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      this._resetInput();\n      (e.target as HTMLInputElement).blur();\n    }\n  };\n\n  private _onInputBlur = (): void => this._resetInput();\n\n  private _resetInput(): void {\n    const input = this._inputRef.value;\n    if (input) input.value = String(this.page);\n  }\n\n  private _commitInput(): void {\n    const input = this._inputRef.value;\n    if (!input) return;\n    const n = Number.parseInt(input.value.trim(), 10);\n    if (!Number.isFinite(n)) {\n      this._resetInput();\n      return;\n    }\n    this._emitViewPage(Math.min(Math.max(1, n), this._docState?.pageCount ?? 1));\n  }\n\n  private _emitViewPage(page: number): void {\n    this.dispatchEvent(\n      new CustomEvent('view-page', {\n        bubbles: true,\n        composed: true,\n        detail: { page },\n      })\n    );\n  }\n}\n","import{noChange as t}from\"../lit-html.js\";import{directive as s,Directive as i,PartType as r}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const e=s(class extends i{constructor(t){if(super(t),t.type!==r.ATTRIBUTE||\"class\"!==t.name||t.strings?.length>2)throw Error(\"`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.\")}render(t){return\" \"+Object.keys(t).filter(s=>t[s]).join(\" \")+\" \"}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(\" \").split(/\\s/).filter(t=>\"\"!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)))}return t}});export{e as classMap};\n//# sourceMappingURL=class-map.js.map\n","@import '../theme.css';\n\n:host {\n  display: contents;\n}\n.toolbar {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n  grid-column: 3;\n  justify-self: end;\n}\n.header-divider {\n  flex-shrink: 0;\n  align-self: center;\n  width: 1px;\n  height: 1.125rem;\n  background: var(--border);\n}\n.toolbar-options-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.35rem 0.75rem;\n  font-size: 0.875rem;\n  cursor: pointer;\n  font-family: var(--font-ui);\n}\n.toolbar-options-item:hover {\n  background: color-mix(in srgb, var(--accent) 6%, var(--panel));\n}\n.toolbar-options-item input {\n  margin: 0;\n  flex-shrink: 0;\n  cursor: pointer;\n}\n.toolbar-options-item-disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.toolbar-options-item-disabled input {\n  cursor: not-allowed;\n}\n.toolbar-options-divider {\n  margin: 0.35rem 0;\n  border-top: 1px solid var(--border);\n}\n.toolbar-options-reset {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0.35rem 0.75rem;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  color: var(--text);\n  font: inherit;\n  font-size: 0.875rem;\n  text-align: left;\n  cursor: pointer;\n}\n.toolbar-options-reset:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--accent) 6%, var(--panel));\n  color: var(--accent);\n}\n.toolbar-options-reset:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.toolbar-file-group {\n  display: inline-flex;\n  align-items: center;\n}\nbutton,\nlabel.file-btn {\n  appearance: none;\n  border: 1px solid var(--border);\n  background: var(--panel);\n  color: var(--text);\n  border-radius: 0.375rem;\n  padding: 0.4rem 0.75rem;\n  font: inherit;\n  font-size: 0.875rem;\n  cursor: pointer;\n}\nbutton:hover,\nlabel.file-btn:hover {\n  border-color: var(--accent);\n}\nbutton:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\nlabel.file-btn input {\n  display: none;\n}\n.header-site-link {\n  color: var(--muted);\n  font-size: 0.875rem;\n  text-decoration: none;\n  white-space: nowrap;\n}\n.header-site-link:hover {\n  color: var(--accent);\n  text-decoration: underline;\n}\n.header-site-link:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n  border-radius: 0.125rem;\n}\n","@import '../theme.css';\n\n:host {\n  display: contents;\n}\n\n.dropdown-wrap {\n  position: relative;\n}\n\n.dropdown-btn {\n  appearance: none;\n  border: 1px solid transparent;\n  background: transparent;\n  color: var(--muted);\n  font-weight: 500;\n  cursor: pointer;\n  white-space: nowrap;\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  transition:\n    color 0.12s ease,\n    background 0.12s ease,\n    border-color 0.12s ease;\n  border-radius: 0.375rem;\n  padding: 0.35rem 0.45rem 0.35rem 0.55rem;\n  font-size: 0.8125rem;\n  line-height: 1.2;\n  font: inherit;\n}\n.dropdown-btn::after {\n  content: '';\n  flex-shrink: 0;\n  width: 0.32rem;\n  height: 0.32rem;\n  margin-left: 0.3rem;\n  margin-top: -0.14em;\n  border-right: 1.5px solid currentColor;\n  border-bottom: 1.5px solid currentColor;\n  transform: rotate(45deg);\n  opacity: 0.65;\n}\n.dropdown-btn:hover {\n  color: var(--text);\n  background: color-mix(in srgb, var(--text) 5%, transparent);\n}\n.dropdown-btn[aria-expanded='true'] {\n  color: var(--accent);\n  background: color-mix(in srgb, var(--accent) 10%, var(--panel));\n  border-color: color-mix(in srgb, var(--accent) 22%, transparent);\n}\n.dropdown-btn:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n}\n\n.dropdown-panel {\n  position: absolute;\n  top: calc(100% + 0.35rem);\n  right: 0;\n  z-index: 30;\n  min-width: 11rem;\n  padding: 0.5rem 0;\n  border: 1px solid var(--border);\n  border-radius: 0.375rem;\n  background: var(--panel);\n  box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--text) 12%, transparent);\n}\n","/** <doclang-dropdown> — reusable trigger-button + dropdown panel */\n\nimport { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeCSS } from 'lit';\nimport styles from './dropdown.css?inline';\n\n/**\n * A button that toggles a floating dropdown panel below it.\n *\n * Attributes:\n *   label   — text shown on the trigger button\n *\n * The dropdown content is provided via the default slot.\n *\n * The host closes the panel when a click occurs outside this element,\n * or when setOpen(false) is called externally.\n */\n@customElement('doclang-dropdown')\nexport class DoclangDropdown extends LitElement {\n  static override styles = unsafeCSS(styles);\n\n  @property({ type: String }) label = '';\n\n  private _open = false;\n\n  override render() {\n    return html`\n      <div class=\"dropdown-wrap\">\n        <button\n          type=\"button\"\n          class=\"dropdown-btn\"\n          aria-expanded=${this._open ? 'true' : 'false'}\n          aria-haspopup=\"true\"\n          @click=${this._onBtnClick}\n        >\n          ${this.label}\n        </button>\n        ${this._open\n          ? html`<div class=\"dropdown-panel\" role=\"menu\"><slot></slot></div>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  setOpen(open: boolean): void {\n    this._open = open;\n    this.requestUpdate();\n  }\n\n  get isOpen(): boolean {\n    return this._open;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('click', this._onDocClick);\n    document.addEventListener('keydown', this._onDocKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._onDocClick);\n    document.removeEventListener('keydown', this._onDocKeydown);\n  }\n\n  private _onBtnClick = (e: Event): void => {\n    e.stopPropagation();\n    this.setOpen(!this._open);\n  };\n\n  private _onDocClick = (e: Event): void => {\n    if (!this._open) return;\n    if (e.composedPath().includes(this as unknown as EventTarget)) return;\n    this.setOpen(false);\n  };\n\n  private _onDocKeydown = (e: KeyboardEvent): void => {\n    if (this._open && e.key === 'Escape') this.setOpen(false);\n  };\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'doclang-dropdown': DoclangDropdown;\n  }\n}\n","/** <doclang-toolbar> — header toolbar (Views menu, file open, demo, site link) */\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { unsafeCSS } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ref, createRef } from 'lit/directives/ref.js';\nimport type { Ref } from 'lit/directives/ref.js';\nimport styles from './toolbar.css?inline';\nimport '../dropdown/dropdown';\nimport type { DoclangDropdown } from '../dropdown/dropdown';\n\ninterface PaneToggles {\n  file: boolean;\n  page: boolean;\n  markup: boolean;\n  reading: boolean;\n  fileAvailable: boolean;\n  pageAvailable: boolean;\n  hasState: boolean;\n}\n\n@customElement('doclang-toolbar')\nexport class DoclangToolbar extends LitElement {\n  static override styles = unsafeCSS(styles);\n\n  private _demoLoading = false;\n  private _panes: PaneToggles = {\n    file: true,\n    page: true,\n    markup: true,\n    reading: true,\n    fileAvailable: false,\n    pageAvailable: false,\n    hasState: false,\n  };\n  private _inputArchiveRef: Ref<HTMLInputElement> = createRef();\n  private _dropdownRef: Ref<DoclangDropdown> = createRef();\n\n  override render() {\n    const { file, page, markup, reading, fileAvailable, pageAvailable, hasState } =\n      this._panes;\n    return html`\n      <div class=\"toolbar\">\n        <doclang-dropdown\n          ${ref(this._dropdownRef)}\n          label=\"Views\"\n        >\n          <label\n            class=${classMap({\n              'toolbar-options-item': true,\n              'toolbar-options-item-disabled': !fileAvailable,\n            })}\n          >\n            <input\n              type=\"checkbox\"\n              class=\"cb-file-pane\"\n              role=\"menuitemcheckbox\"\n              .checked=${fileAvailable && file}\n              ?disabled=${!fileAvailable}\n              @change=${(e: Event) =>\n                this._emitTogglePane('file', (e.target as HTMLInputElement).checked)}\n            />\n            <span>Files</span>\n          </label>\n          <label\n            class=${classMap({\n              'toolbar-options-item': true,\n              'toolbar-options-item-disabled': !pageAvailable,\n            })}\n          >\n            <input\n              type=\"checkbox\"\n              class=\"cb-page-pane\"\n              role=\"menuitemcheckbox\"\n              .checked=${pageAvailable && page}\n              ?disabled=${!pageAvailable}\n              @change=${(e: Event) =>\n                this._emitTogglePane('page', (e.target as HTMLInputElement).checked)}\n            />\n            <span>Original page</span>\n          </label>\n          <label\n            class=${classMap({\n              'toolbar-options-item': true,\n              'toolbar-options-item-disabled': !hasState,\n            })}\n          >\n            <input\n              type=\"checkbox\"\n              class=\"cb-markup-pane\"\n              role=\"menuitemcheckbox\"\n              .checked=${markup}\n              ?disabled=${!hasState}\n              @change=${(e: Event) =>\n                this._emitTogglePane('markup', (e.target as HTMLInputElement).checked)}\n            />\n            <span>DocLang</span>\n          </label>\n          <label\n            class=${classMap({\n              'toolbar-options-item': true,\n              'toolbar-options-item-disabled': !hasState,\n            })}\n          >\n            <input\n              type=\"checkbox\"\n              class=\"cb-reading-pane\"\n              role=\"menuitemcheckbox\"\n              .checked=${reading}\n              ?disabled=${!hasState}\n              @change=${(e: Event) =>\n                this._emitTogglePane('reading', (e.target as HTMLInputElement).checked)}\n            />\n            <span>Reading view</span>\n          </label>\n          <div class=\"toolbar-options-divider\" role=\"separator\"></div>\n          <button\n            type=\"button\"\n            class=\"toolbar-options-reset\"\n            role=\"menuitem\"\n            ?disabled=${!hasState}\n            @click=${() =>\n              this.dispatchEvent(\n                new CustomEvent('doclang-reset-pane-layout', {\n                  bubbles: true,\n                  composed: true,\n                })\n              )}\n          >\n            Reset views\n          </button>\n        </doclang-dropdown>\n        <span class=\"header-divider\" aria-hidden=\"true\"></span>\n        <span class=\"toolbar-file-group\">\n          <label\n            class=\"file-btn\"\n            title=\"Open a DocLang file (.dclx, .dclg)\"\n          >\n            Open file\n            <input\n              ${ref(this._inputArchiveRef)}\n              type=\"file\"\n              class=\"input-archive\"\n              multiple\n              accept=\".dclx,.zip,.dclg,.xml,application/zip,application/xml,text/xml\"\n              @change=${this._onArchiveChange}\n            />\n          </label>\n        </span>\n        <button\n          type=\"button\"\n          class=\"btn-demo\"\n          ?disabled=${this._demoLoading}\n          @click=${() =>\n            this.dispatchEvent(\n              new CustomEvent('doclang-load-demo', { bubbles: true, composed: true })\n            )}\n        >\n          Load demo\n        </button>\n        <span class=\"header-divider\" aria-hidden=\"true\"></span>\n        <a href=\"https://doclang.ai/\" class=\"header-site-link\">doclang.ai</a>\n      </div>\n    `;\n  }\n\n  /** Sync the Views-menu checkboxes and disabled/greyed state from app state. */\n  syncPaneToggles(opts: PaneToggles): void {\n    this._panes = opts;\n    this.requestUpdate();\n  }\n\n  setDemoLoading(loading: boolean): void {\n    this._demoLoading = loading;\n    this.requestUpdate();\n  }\n\n  private _emitTogglePane(pane: string, checked: boolean): void {\n    this.dispatchEvent(\n      new CustomEvent('doclang-toggle-pane', {\n        bubbles: true,\n        composed: true,\n        detail: { pane, checked },\n      })\n    );\n  }\n\n  private _onArchiveChange = (e: Event): void => {\n    const input = e.target as HTMLInputElement;\n    this.dispatchEvent(\n      new CustomEvent('doclang-open-files', {\n        bubbles: true,\n        composed: true,\n        detail: { files: [...(input.files ?? [])] },\n      })\n    );\n    input.value = '';\n  };\n}\n","import{noChange as e}from\"../lit-html.js\";import{directive as s,Directive as t,PartType as r}from\"../directive.js\";import{getCommittedValue as l,setChildPartValue as o,insertPart as i,removePart as n,setCommittedValue as f}from\"../directive-helpers.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst u=(e,s,t)=>{const r=new Map;for(let l=s;l<=t;l++)r.set(e[l],l);return r},c=s(class extends t{constructor(e){if(super(e),e.type!==r.CHILD)throw Error(\"repeat() can only be used in text expressions\")}dt(e,s,t){let r;void 0===t?t=s:void 0!==s&&(r=s);const l=[],o=[];let i=0;for(const s of e)l[i]=r?r(s,i):i,o[i]=t(s,i),i++;return{values:o,keys:l}}render(e,s,t){return this.dt(e,s,t).values}update(s,[t,r,c]){const d=l(s),{values:p,keys:a}=this.dt(t,r,c);if(!Array.isArray(d))return this.ut=a,p;const h=this.ut??=[],v=[];let m,y,x=0,j=d.length-1,k=0,w=p.length-1;for(;x<=j&&k<=w;)if(null===d[x])x++;else if(null===d[j])j--;else if(h[x]===a[k])v[k]=o(d[x],p[k]),x++,k++;else if(h[j]===a[w])v[w]=o(d[j],p[w]),j--,w--;else if(h[x]===a[w])v[w]=o(d[x],p[w]),i(s,v[w+1],d[x]),x++,w--;else if(h[j]===a[k])v[k]=o(d[j],p[k]),i(s,d[x],d[j]),j--,k++;else if(void 0===m&&(m=u(a,k,w),y=u(h,x,j)),m.has(h[x]))if(m.has(h[j])){const e=y.get(a[k]),t=void 0!==e?d[e]:null;if(null===t){const e=i(s,d[x]);o(e,p[k]),v[k]=e}else v[k]=o(t,p[k]),i(s,d[x],t),d[e]=null;k++}else n(d[j]),j--;else n(d[x]),x++;for(;k<=w;){const e=i(s,v[w+1]);o(e,p[k]),v[k++]=e}for(;x<=j;){const e=d[x++];null!==e&&n(e)}return this.ut=a,f(s,v),e}});export{c as repeat};\n//# sourceMappingURL=repeat.js.map\n","@import '../theme.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  border-right: 1px solid var(--border);\n  min-height: 0;\n  min-width: 0;\n  overflow: hidden;\n  background: var(--panel);\n\n  --file-thumb-size: var(--doclang-file-thumb-size, 3.75rem);\n  --file-thumb-close-overflow: var(--doclang-file-thumb-close-overflow, 0.25rem);\n  --file-item-pad-x: var(--doclang-file-item-pad-x, 0.35rem);\n  --file-pane-pad-x: var(--doclang-file-pane-pad-x, 0.5rem);\n  --file-pane-fit-width: var(\n    --doclang-file-pane-fit-width,\n    calc(\n      (\n          var(--file-pane-pad-x) * 2 + var(--file-item-pad-x) * 2 +\n            var(--file-thumb-size) + var(--file-thumb-close-overflow)\n        ) *\n        1.5\n    )\n  );\n}\n:host([hidden]) {\n  display: none !important;\n}\n:host(.pane-layout-last) {\n  border-right: none;\n}\n.pane-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.35rem;\n  box-sizing: border-box;\n  height: 2.125rem;\n  padding: 0 0.35rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: var(--muted);\n  border-bottom: 1px solid var(--border);\n  background: var(--panel);\n}\n.pane-header-title {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding-inline: calc(0.75rem - 0.35rem);\n}\n.file-pane-close-all {\n  appearance: none;\n  border: 1px solid transparent;\n  border-radius: 0.25rem;\n  background: transparent;\n  color: var(--muted);\n  font: inherit;\n  font-size: 0.625rem;\n  font-weight: 600;\n  line-height: 1;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  padding: 0 0.15rem;\n  height: 1.25rem;\n  cursor: pointer;\n  white-space: nowrap;\n  flex-shrink: 0;\n  transition:\n    color 0.12s ease,\n    background 0.12s ease,\n    border-color 0.12s ease;\n}\n.file-pane-close-all:hover {\n  color: var(--text);\n  background: color-mix(in srgb, var(--text) 5%, transparent);\n}\n.file-pane-close-all:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n}\n.pane-body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding: 0.375rem var(--file-pane-pad-x, 0.5rem);\n  min-width: 0;\n}\n.file-view-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n.file-view-list > li {\n  width: 100%;\n  max-width: 100%;\n}\n.file-view-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.35rem;\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n  border: none;\n  border-radius: 0;\n  background: transparent;\n  color: var(--text);\n  font: inherit;\n  font-size: 0.8125rem;\n  line-height: 1.35;\n  text-align: center;\n  padding: 0.5rem var(--file-item-pad-x, 0.35rem);\n  cursor: pointer;\n}\n.file-view-thumb-wrap {\n  position: relative;\n  flex-shrink: 0;\n}\n.file-view-close {\n  position: absolute;\n  top: -0.25rem;\n  right: -0.25rem;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  padding: 0;\n  border: 1px solid var(--border);\n  border-radius: 50%;\n  background: var(--bg);\n  color: var(--muted);\n  font: inherit;\n  font-size: 0.75rem;\n  line-height: 1;\n  cursor: pointer;\n  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);\n  z-index: 1;\n}\n.file-view-close:hover {\n  color: var(--text);\n  background: var(--panel);\n}\n.file-view-close:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 1px;\n}\n.file-view-thumb {\n  flex-shrink: 0;\n  width: var(--file-thumb-size, 3.75rem);\n  height: var(--file-thumb-size, 3.75rem);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--placeholder-bg);\n  border: 1px solid var(--border);\n  border-radius: 0.25rem;\n  overflow: hidden;\n}\n.file-view-thumb img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n.file-view-thumb-placeholder {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  color: var(--muted);\n}\n.file-view-thumb-placeholder svg {\n  display: block;\n  width: 1.875rem;\n  height: 1.875rem;\n}\n.file-view-label {\n  width: 100%;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.file-view-item:hover {\n  background: var(--markup-hover);\n}\n.file-view-item.is-active {\n  background: var(--markup-selected);\n  color: var(--accent);\n  font-weight: 500;\n}\n.file-view-item:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: -2px;\n}\n","/** <doclang-collection-pane> — file list sidebar */\n\nimport { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeCSS } from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport styles from './collection-pane.css?inline';\nimport type { CollectionEntry } from './collection';\n\nconst FILE_THUMB_PLACEHOLDER_SVG = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"/><polyline points=\"14 2 14 8 20 8\"/><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"/><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"/></svg>`;\n\n@customElement('doclang-collection-pane')\nexport class DoclangCollectionPane extends LitElement {\n  static override styles = unsafeCSS(styles);\n\n  @property({ attribute: false }) declare entries: CollectionEntry[];\n\n  override render() {\n    const hasEntries = (this.entries?.length ?? 0) > 0;\n    const closeAllBtn = hasEntries\n      ? html`<button\n          type=\"button\"\n          class=\"file-pane-close-all\"\n          aria-label=\"Clear all open files\"\n          @click=${this._onCloseAll}\n        >\n          Clear\n        </button>`\n      : nothing;\n    const list = hasEntries\n      ? html`\n          <ul class=\"file-view-list\" role=\"listbox\" aria-label=\"Open files\">\n            ${repeat(this.entries ?? [], (_, i) => i, this._renderEntry)}\n          </ul>\n        `\n      : nothing;\n    return html`\n      <div class=\"pane-header\">\n        <span class=\"pane-header-title\">Files</span>\n        ${closeAllBtn}\n      </div>\n      <div class=\"pane-body\">${list}</div>\n    `;\n  }\n\n  private _onCloseAll = (): void => {\n    this.dispatchEvent(\n      new CustomEvent('doclang-collection-close-all', { bubbles: true, composed: true })\n    );\n  };\n\n  private _renderEntry = (entry: CollectionEntry, index: number) => {\n    const onCardClick = (e: Event): void => {\n      if ((e.target as Element).closest('.file-view-close')) return;\n      this._emitSelect(index);\n    };\n    const onCardKeydown = (e: KeyboardEvent): void => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        this._emitSelect(index);\n      }\n    };\n    const onCloseClick = (e: Event): void => {\n      e.stopPropagation();\n      this._emitClose(index);\n    };\n    const thumb = entry.thumbnailUrl\n      ? html`<img src=${entry.thumbnailUrl} alt=\"\" />`\n      : html`<span\n          class=\"file-view-thumb-placeholder\"\n          .innerHTML=${FILE_THUMB_PLACEHOLDER_SVG}\n        ></span>`;\n    return html`\n      <li>\n        <div\n          class=\"file-view-item${entry.isActive ? ' is-active' : ''}\"\n          title=${entry.label}\n          tabindex=\"0\"\n          role=\"option\"\n          aria-selected=${entry.isActive ? 'true' : 'false'}\n          @click=${onCardClick}\n          @keydown=${onCardKeydown}\n        >\n          <div class=\"file-view-thumb-wrap\">\n            <span class=\"file-view-thumb\" aria-hidden=\"true\">${thumb}</span>\n            <button\n              type=\"button\"\n              class=\"file-view-close\"\n              aria-label=\"Close ${entry.label}\"\n              @click=${onCloseClick}\n            >\n              ×\n            </button>\n          </div>\n          <span class=\"file-view-label\">${entry.label}</span>\n        </div>\n      </li>\n    `;\n  };\n\n  private _emitSelect(index: number): void {\n    this.dispatchEvent(\n      new CustomEvent('doclang-collection-select', {\n        bubbles: true,\n        composed: true,\n        detail: { index },\n      })\n    );\n  }\n\n  private _emitClose(index: number): void {\n    this.dispatchEvent(\n      new CustomEvent('doclang-collection-close', {\n        bubbles: true,\n        composed: true,\n        detail: { index },\n      })\n    );\n  }\n}\n","/**\n * PageController — Lit reactive controller that adds page-flip behaviour to a\n * pane element via both mouse-wheel and keyboard input.\n *\n * Wheel handling: accumulates pixel-delta events and emits 'view-page' once the\n * configured threshold is exceeded, respecting scroll-boundary and cooldown.\n *\n * Keyboard handling: Arrow / Page keys fire 'view-page' when the pane or any\n * descendant has focus.\n */\n\nimport type { ReactiveController } from 'lit';\nimport type { DoclangPageElement } from './page-element';\n\nconst COOLDOWN_MS = 200;\nconst PIXEL_THRESHOLD = 4;\nconst GESTURE_MS = 100;\n\nexport class PageController implements ReactiveController {\n  private readonly _host: DoclangPageElement;\n  private readonly _getScrollPane: () => HTMLElement | null;\n\n  // Per-gesture pixel accumulator\n  private _pixelAccum = 0;\n  private _gestureUntil = 0;\n\n  // Per-pane cooldown; the viewer deduplicates via page-clamping.\n  private _lastFlipAt = 0;\n\n  // Track last-seen page so hostUpdated can detect a real page change.\n  private _lastPage: number | null = null;\n\n  constructor(\n    host: DoclangPageElement,\n    getScrollPane: () => HTMLElement | null,\n  ) {\n    this._host = host;\n    this._getScrollPane = getScrollPane;\n    host.addController(this);\n  }\n\n  hostConnected(): void {\n    this._host.addEventListener('wheel', this._onWheel, { passive: false });\n    this._host.addEventListener('keydown', this._onKeyDown);\n  }\n\n  hostDisconnected(): void {\n    this._host.removeEventListener('wheel', this._onWheel);\n    this._host.removeEventListener('keydown', this._onKeyDown);\n  }\n\n  hostUpdated(): void {\n    const page = this._host.page;\n    if (this._lastPage !== null && this._lastPage !== page) {\n      // Page actually changed — reset scroll position to the boundary that\n      // makes sense for the direction of travel.\n      const scrollPane = this._getScrollPane();\n      if (scrollPane) {\n        const dir = page > this._lastPage ? 1 : -1;\n        scrollPane.scrollTop = dir > 0 ? 0 : scrollPane.scrollHeight;\n      }\n    }\n    this._lastPage = page;\n  }\n\n  // ---------------------------------------------------------------------------\n  // Keyboard navigation\n  // ---------------------------------------------------------------------------\n\n  private _onKeyDown = (ev: Event): void => {\n    const e = ev as KeyboardEvent;\n    const host = this._host;\n    const docState = host.document;\n    if (!docState || docState.markupOnly || docState.pageCount <= 1) return;\n\n    let dir = 0;\n    switch (e.key) {\n      case 'ArrowDown':\n      case 'PageDown':\n      case 'ArrowRight':\n        dir = 1;\n        break;\n      case 'ArrowUp':\n      case 'PageUp':\n      case 'ArrowLeft':\n        dir = -1;\n        break;\n    }\n    if (!dir) return;\n\n    e.preventDefault();\n    const targetPage = host.page + dir;\n    if (targetPage < 1 || targetPage > docState.pageCount) return;\n\n    host.dispatchEvent(\n      new CustomEvent('view-page', {\n        bubbles: true,\n        composed: true,\n        detail: { page: targetPage },\n      }),\n    );\n  };\n\n  // ---------------------------------------------------------------------------\n  // Wheel navigation\n  // ---------------------------------------------------------------------------\n\n  private _dir(e: WheelEvent): number {\n    if (e.deltaMode === 1 /* DOM_DELTA_LINE */) return e.deltaY > 0 ? 1 : e.deltaY < 0 ? -1 : 0;\n    if (e.deltaMode === 2 /* DOM_DELTA_PAGE */) return Math.sign(e.deltaY);\n    // DOM_DELTA_PIXEL — accumulate until threshold to avoid firing on every px\n    const now = performance.now();\n    if (now > this._gestureUntil) this._pixelAccum = 0;\n    this._gestureUntil = now + GESTURE_MS;\n    this._pixelAccum += e.deltaY;\n    if (Math.abs(this._pixelAccum) >= PIXEL_THRESHOLD) {\n      const dir = this._pixelAccum > 0 ? 1 : -1;\n      this._pixelAccum = 0;\n      return dir;\n    }\n    return 0;\n  }\n\n  private _onWheel = (ev: Event): void => {\n    const e = ev as WheelEvent;\n    const host = this._host;\n    const docState = host.document;\n\n    // Only act when multiple pages exist\n    if (!docState || docState.markupOnly || docState.pageCount <= 1) return;\n\n    const scrollPane = this._getScrollPane();\n    const dir = this._dir(e);\n    if (!dir) return;\n\n    if (scrollPane) {\n      // Scrollable container: only flip when the scroll boundary is reached\n      const atTop = scrollPane.scrollTop <= 0;\n      const atBottom =\n        scrollPane.scrollTop + scrollPane.clientHeight >= scrollPane.scrollHeight - 1;\n      const scrollable =\n        scrollPane.scrollHeight > scrollPane.clientHeight ||\n        scrollPane.scrollWidth > scrollPane.clientWidth;\n\n      if (scrollable && !(dir < 0 && atTop) && !(dir > 0 && atBottom)) return;\n    }\n\n    // Cooldown check\n    const now = performance.now();\n    if (now - this._lastFlipAt < COOLDOWN_MS) {\n      e.preventDefault();\n      return;\n    }\n\n    const targetPage = host.page + dir;\n    // Clamp check: don't emit if already at boundary\n    if (targetPage < 1 || targetPage > docState.pageCount) {\n      e.preventDefault();\n      return;\n    }\n\n    e.preventDefault();\n    this._lastFlipAt = now;\n\n    host.dispatchEvent(\n      new CustomEvent('view-page', {\n        bubbles: true,\n        composed: true,\n        detail: { page: targetPage },\n      }),\n    );\n  };\n}\n","@import '../theme.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  border-right: 1px solid var(--border);\n  min-height: 0;\n  min-width: 0;\n  background: var(--panel);\n\n  --xml-tag: var(--doclang-xml-tag, #116329);\n  --xml-bracket: var(--doclang-xml-bracket, #24292e);\n  --xml-attr-name: var(--doclang-xml-attr-name, #0550ae);\n  --xml-attr-value: var(--doclang-xml-attr-value, #0a3069);\n  --xml-text: var(--doclang-xml-text, #24292e);\n  --xml-cdata: var(--doclang-xml-cdata, #6a737d);\n  --xml-cdata-delimiter: var(--doclang-xml-cdata-delimiter, #6a737d);\n}\n:host([hidden]) {\n  display: none !important;\n}\n:host(.pane-layout-last) {\n  border-right: none;\n}\n.pane-header {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  height: 2.125rem;\n  padding: 0 0.75rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: var(--muted);\n  border-bottom: 1px solid var(--border);\n  background: var(--panel);\n}\n.pane-body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding: 0;\n  background: var(--markup-bg);\n  color: var(--markup-fg);\n}\n.pane-body .placeholder {\n  margin: 1rem;\n}\n.placeholder {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 12rem;\n  color: var(--muted);\n  font-style: italic;\n  background: var(--placeholder-bg);\n  border: 1px dashed var(--border);\n  border-radius: 0.5rem;\n  padding: 2rem;\n  text-align: center;\n}\npre.markup {\n  margin: 0;\n  font-family: var(--font-mono);\n  font-size: 0.8125rem;\n  line-height: 1.5;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.markup {\n  margin: 0;\n  padding: 0.75rem 1rem 1rem;\n  font-family: var(--font-mono);\n  font-size: 0.8125rem;\n  line-height: 1.55;\n  tab-size: 2;\n  --markup-indent: 2ch;\n  --markup-gutter-width: 1rem;\n}\n.markup-ghost-tag-part {\n  opacity: 0.35;\n  cursor: help;\n}\n.head-tooltip {\n  border-collapse: collapse;\n  width: 100%;\n  font-size: 0.6875rem;\n  line-height: 1.4;\n}\n.head-tooltip th {\n  padding: 0.1rem 0.55rem 0.1rem 0;\n  color: var(--muted);\n  font-weight: 600;\n  text-align: left;\n  vertical-align: top;\n  white-space: nowrap;\n}\n.head-tooltip td {\n  padding: 0.1rem 0;\n  vertical-align: top;\n  word-break: break-word;\n}\n.head-tooltip .head-default {\n  color: var(--muted);\n  font-style: italic;\n  white-space: nowrap;\n}\n.markup-el {\n  cursor: pointer;\n  border-radius: 0.2rem;\n}\n.markup-el:hover {\n  background: var(--markup-hover);\n}\n.markup-el.selected {\n  background: var(--markup-selected);\n  box-shadow: inset 0 0 0 1px var(--accent);\n}\n.markup-line {\n  white-space: pre-wrap;\n  word-break: break-word;\n  cursor: pointer;\n  padding: 0 0.25rem;\n  border-radius: 0.15rem;\n}\n.markup-line-content {\n  display: flex;\n  align-items: baseline;\n  min-width: 0;\n  padding-left: calc(var(--markup-depth, 0) * var(--markup-indent));\n}\n.markup-gutter {\n  flex: 0 0 var(--markup-gutter-width);\n  width: var(--markup-gutter-width);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.markup-line-body {\n  flex: 1 1 auto;\n  min-width: 0;\n}\nsummary::-webkit-details-marker {\n  display: none;\n}\nsummary {\n  list-style: none;\n  display: block;\n}\nsummary:focus {\n  outline: none;\n}\n.markup-fold-toggle {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--markup-gutter-width);\n  height: 1rem;\n  margin: 0;\n  padding: 0;\n  border: none;\n  border-radius: 0.15rem;\n  background: transparent;\n  color: var(--muted);\n  cursor: pointer;\n  flex-shrink: 0;\n}\n.markup-fold-toggle::before {\n  content: '';\n  display: block;\n  width: 0;\n  height: 0;\n  border-top: 4px solid transparent;\n  border-bottom: 4px solid transparent;\n  border-left: 5px solid currentColor;\n  transform: rotate(90deg);\n  transition: transform 0.12s ease;\n}\ndetails:not([open]) > summary .markup-fold-toggle::before {\n  transform: rotate(0deg);\n}\n.markup-fold-toggle:hover {\n  background: var(--markup-hover);\n  color: var(--markup-fg);\n}\n.markup-fold-suffix {\n  display: none;\n}\ndetails:not([open]) > summary .markup-fold-suffix {\n  display: inline;\n}\ndetails:not([open]) > .markup-fold-body {\n  display: none;\n}\n.xml-tag {\n  color: var(--xml-tag);\n}\n.xml-bracket {\n  color: var(--xml-bracket);\n}\n.xml-attr-name {\n  color: var(--xml-attr-name);\n}\n.xml-attr-value {\n  color: var(--xml-attr-value);\n}\n.xml-attr-value-truncatable {\n  display: inline;\n}\n.xml-attr-value-chip {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.3em;\n  margin: 0 0 0 0.35em;\n  padding: 0.08em 0.45em 0.08em 0.5em;\n  border: 1px solid var(--border);\n  border-radius: 0.25rem;\n  background: var(--placeholder-bg);\n  color: var(--muted);\n  font-family: var(--font-ui, system-ui, sans-serif);\n  font-size: 0.72em;\n  font-weight: 600;\n  line-height: 1.35;\n  cursor: pointer;\n  vertical-align: baseline;\n  white-space: nowrap;\n}\n.xml-attr-value-chip::after {\n  content: '';\n  width: 0;\n  height: 0;\n  border-top: 0.28em solid currentColor;\n  border-left: 0.22em solid transparent;\n  border-right: 0.22em solid transparent;\n  opacity: 0.75;\n  transition: transform 0.12s ease;\n}\n.xml-attr-value-chip[aria-expanded='true']::after {\n  transform: rotate(180deg);\n}\n.xml-attr-value-chip:hover,\n.xml-attr-value-chip[aria-expanded='true'] {\n  border-color: var(--accent);\n  color: var(--accent);\n  background: color-mix(in srgb, var(--accent) 8%, var(--placeholder-bg));\n}\n.markup-embedded-uri-panel {\n  cursor: text;\n}\n.markup-embedded-uri-panel:hover {\n  background: transparent;\n}\n.markup-embedded-uri-panel-body {\n  margin: 0.1rem 0 0.25rem;\n  padding: 0.45rem 0.6rem;\n  max-height: 8rem;\n  overflow: auto;\n  color: var(--xml-attr-value);\n  word-break: break-all;\n  background: var(--placeholder-bg);\n  border: 1px solid var(--border);\n  border-radius: 0.25rem;\n  user-select: text;\n}\n.xml-text {\n  color: var(--xml-text);\n}\n.xml-cdata {\n  color: var(--xml-cdata);\n}\n.xml-cdata-delimiter {\n  color: var(--xml-cdata-delimiter);\n}\n\n@media (prefers-color-scheme: dark) {\n  :host {\n    --xml-tag: var(--doclang-xml-tag, #4ec9b0);\n    --xml-bracket: var(--doclang-xml-bracket, #808080);\n    --xml-attr-name: var(--doclang-xml-attr-name, #9cdcfe);\n    --xml-attr-value: var(--doclang-xml-attr-value, #ce9178);\n    --xml-text: var(--doclang-xml-text, #d4d4d4);\n    --xml-cdata: var(--doclang-xml-cdata, #b5cea8);\n    --xml-cdata-delimiter: var(--doclang-xml-cdata-delimiter, #808080);\n  }\n}\n","/** <doclang-markup-pane> — DocLang XML markup view */\n\nimport { html, nothing, render, type TemplateResult } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport { unsafeCSS } from 'lit';\nimport { DoclangPageElement } from '../base/page-element';\nimport { PageController } from '../base/page-controller';\nimport styles from './markup-pane.css?inline';\nimport {\n  assignElementIds,\n  invertElementIds,\n  segmentHasMarkup,\n  NO_MARKUP,\n} from '../../doclang/document';\nimport {\n  HEAD_TAGS,\n  CELL_SPAN_TAGS,\n  OTSL_CONTAINER_TAGS,\n  isTextLikeNode,\n  isWhitespaceOnlyText,\n  markupAttributes,\n  localName,\n  childElements,\n  formatMarkupTextNode,\n  serializeMarkupTextNodes,\n  skipUntilListItemBoundary,\n  skipUntilCellBoundary,\n  isCellToken,\n  isSemanticElement,\n} from '../../doclang/dom';\n\n// ---------------------------------------------------------------------------\n// Constants\n// ---------------------------------------------------------------------------\n\nconst VIRTUAL_TEXT_TAG_HINT =\n  'DocLang virtual <text>; wrapping tags not included in source';\n\nconst LONG_EMBEDDED_URI_PREVIEW_LENGTH = 30;\n\n// ---------------------------------------------------------------------------\n// Truncatable embedded URI helpers (Pure Utilities)\n// ---------------------------------------------------------------------------\n\nfunction isTruncatableEmbeddedImageUri(value: string): boolean {\n  if (!value || value.length <= LONG_EMBEDDED_URI_PREVIEW_LENGTH) return false;\n  return /^(data:image\\/|blob:)/i.test(value);\n}\n\nfunction formatCompactByteSize(bytes: number): string {\n  if (bytes < 1024) return `${bytes} B`;\n  if (bytes < 1024 * 1024) {\n    const kb = bytes / 1024;\n    return kb < 10 ? `${kb.toFixed(1)} KB` : `${Math.round(kb)} KB`;\n  }\n  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n}\n\nfunction formatEmbeddedUriSizeLabel(value: string): string {\n  if (/^blob:/i.test(value)) {\n    return value.length >= 1024\n      ? `${Math.round(value.length / 1024)} KB URL`\n      : `${value.length} char URL`;\n  }\n  const comma = value.indexOf(',');\n  if (comma === -1) return 'embedded data';\n  const header = value.slice(0, comma);\n  const payload = value.slice(comma + 1).replace(/\\s/g, '');\n  const mime = /^data:([^;,]+)/i.exec(header)?.[1] ?? '';\n  const shortMime = mime.startsWith('image/') ? mime.slice(6) : mime || 'data';\n  const bytes = Math.floor((payload.replace(/=+$/, '').length * 3) / 4);\n  return `${shortMime} · ${formatCompactByteSize(bytes)}`;\n}\n\n// ---------------------------------------------------------------------------\n// Slice / virtual-text helpers (Pure Utilities)\n// ---------------------------------------------------------------------------\n\nfunction sliceHasMarkupContent(nodes: ArrayLike<ChildNode>): boolean {\n  for (let i = 0; i < nodes.length; i += 1) {\n    const node = nodes[i];\n    if (!node) continue;\n    if (isTextLikeNode(node) && !isWhitespaceOnlyText(node)) return true;\n    if (node.nodeType === Node.ELEMENT_NODE) return true;\n  }\n  return false;\n}\n\nfunction isVirtualTextSkippableNode(node: ChildNode): boolean {\n  if (isWhitespaceOnlyText(node)) return true;\n  if (node.nodeType !== Node.ELEMENT_NODE) return false;\n  const tag = localName(node as Element);\n  return tag === 'location' || HEAD_TAGS.has(tag);\n}\n\nfunction shouldWrapVirtualText(contentNodes: ChildNode[]): boolean {\n  if (!sliceHasMarkupContent(contentNodes)) return false;\n  for (const node of contentNodes) {\n    if (isVirtualTextSkippableNode(node)) continue;\n    if (isTextLikeNode(node)) return true;\n    if (node.nodeType === Node.ELEMENT_NODE && !isSemanticElement(node as Element))\n      return true;\n  }\n  return false;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n@customElement('doclang-markup-pane')\nexport class DoclangMarkupPane extends DoclangPageElement {\n  static override styles = unsafeCSS(styles);\n\n  private _wheel = new PageController(this, () => this.scrollPane);\n\n  // null = no document loaded yet; false = document loaded but no markup; true = has markup\n  @state() private _hasMarkup: boolean | null = null;\n  @state() private _markupTemplate: TemplateResult | TemplateResult[] | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.classList.add('pane', 'pane-markup');\n  }\n\n  /* prettier-ignore */\n  override render() {\n    return html`<div class=\"pane-header\">DocLang</div><div class=\"pane-body\" id=\"markup-pane\" @click=${this._onBodyClick}>${this._hasMarkup === false ? html`<div class=\"placeholder\">${NO_MARKUP}</div>` : this._hasMarkup === true && this._markupTemplate ? html`<div class=\"markup\">${this._markupTemplate}</div>` : nothing}</div>`;\n  }\n\n  /** The scrollable content body inside the shadow root. */\n  get scrollPane(): HTMLElement | null {\n    return this.shadowRoot?.querySelector('.pane-body') ?? null;\n  }\n\n  protected override _applySelection(): void {\n    if (!this.shadowRoot) return;\n    for (const el of this.shadowRoot.querySelectorAll('.markup-el.selected')) {\n      el.classList.remove('selected');\n    }\n    if (!this.selected) return;\n    const target =\n      this.shadowRoot.querySelector(\n        `.markup-el-virtual-text[data-element-id=\"${this.selected}\"]`\n      ) ?? this.shadowRoot.querySelector(`[data-element-id=\"${this.selected}\"]`);\n    if (target) {\n      target.classList.add('selected');\n      target.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n    }\n  }\n\n  protected override _renderDocument(): void {\n    const state = this._docState;\n    if (!state) {\n      this._markupTemplate = null;\n      this._hasMarkup = null;\n      return;\n    }\n\n    const segment = state.segments[this.page - 1] ?? [];\n    const elementIds = assignElementIds(segment);\n    state.elementIds = elementIds;\n    state.idToElement = invertElementIds(elementIds);\n\n    if (segmentHasMarkup(segment)) {\n      this._markupTemplate = this._buildMarkupView(segment, elementIds);\n      this._hasMarkup = true;\n    } else {\n      this._markupTemplate = null;\n      this._hasMarkup = false;\n    }\n    this.requestUpdate();\n  }\n\n  protected override _clearDocument(): void {\n    this._markupTemplate = null;\n    this._hasMarkup = null;\n    this.requestUpdate();\n  }\n\n  private _buildMarkupView(\n    segment: Element[],\n    elementIds: Map<Element, string>\n  ): TemplateResult[] {\n    const templates: TemplateResult[] = [];\n    for (const el of segment) {\n      if (el.nodeType === Node.ELEMENT_NODE) {\n        templates.push(this._renderMarkupElement(el, 0, elementIds));\n      }\n    }\n    return templates;\n  }\n\n  private _onBodyClick = (e: MouseEvent): void => {\n    const target = e.target as Element;\n    const attrToggle = target.closest('.xml-attr-value-chip');\n    if (attrToggle) {\n      e.stopPropagation();\n      this._toggleTruncatableMarkupAttrValue(attrToggle);\n      return;\n    }\n    const ghostText = target.closest('.markup-el-virtual-text');\n    const elementId = ghostText?.hasAttribute('data-element-id')\n      ? ghostText.getAttribute('data-element-id')!\n      : (target\n          .closest('.markup-el[data-element-id]')\n          ?.getAttribute('data-element-id') ?? null);\n    if (elementId) {\n      this.dispatchEvent(\n        new CustomEvent('doclang-element-select', {\n          bubbles: true,\n          composed: true,\n          detail: { id: elementId },\n        })\n      );\n    }\n  };\n\n  private _onSummaryClick = (e: MouseEvent): void => {\n    const target = e.target as Element;\n    // Only toggle the details open/close state if clicking the fold toggle arrow area\n    if (!target.closest('.markup-fold-toggle') && !target.closest('.markup-gutter')) {\n      e.preventDefault();\n    }\n  };\n\n  // ---------------------------------------------------------------------------\n  // Component-private markup Lit template builders\n  // ---------------------------------------------------------------------------\n\n  /* prettier-ignore */\n  private _createEmbeddedUriContinuationPanel(value: string, depth: number): HTMLElement {\n    const container = document.createElement('div');\n    render(\n      html`<div class=\"markup-line markup-embedded-uri-panel\" style=\"--markup-depth: ${depth}\"><span class=\"markup-line-content\"><span class=\"markup-gutter\" aria-hidden=\"true\"></span><span class=\"markup-line-body\"><div class=\"markup-embedded-uri-panel-body\" @click=${(e: Event) => e.stopPropagation()}>${value}</div></span></span></div>`,\n      container\n    );\n    return container.firstElementChild as HTMLElement;\n  }\n\n  /* prettier-ignore */\n  private _renderTruncatableMarkupAttrValue(value: string): TemplateResult {\n    const sizeLabel = formatEmbeddedUriSizeLabel(value);\n    return html`<span class=\"xml-attr-value xml-attr-value-truncatable\" data-full-value=${value}><span class=\"xml-attr-value-text\">${value.slice(0, LONG_EMBEDDED_URI_PREVIEW_LENGTH)}</span><button type=\"button\" class=\"xml-attr-value-chip\" data-collapsed-label=${sizeLabel} aria-expanded=\"false\" aria-label=\"Show full value (${sizeLabel})\"><span class=\"xml-attr-value-chip-label\">${sizeLabel}</span></button></span>`;\n  }\n\n  private _toggleTruncatableMarkupAttrValue(toggle: Element): void {\n    const wrapper = toggle.closest('.xml-attr-value-truncatable') as HTMLElement | null;\n    if (!wrapper) return;\n\n    const markupLine = wrapper.closest('.markup-line') as HTMLElement | null;\n    const fullValue =\n      (wrapper as HTMLElement & { dataset: DOMStringMap }).dataset.fullValue ?? '';\n    const label = toggle.querySelector('.xml-attr-value-chip-label');\n    const collapsedLabel =\n      (toggle as HTMLElement & { dataset: DOMStringMap }).dataset.collapsedLabel ??\n      label?.textContent ??\n      '';\n    const expanded = toggle.getAttribute('aria-expanded') === 'true';\n\n    if (expanded) {\n      toggle.setAttribute('aria-expanded', 'false');\n      toggle.setAttribute('aria-label', `Show full value (${collapsedLabel})`);\n      if (label) label.textContent = collapsedLabel;\n      if (\n        markupLine?.nextElementSibling?.classList.contains('markup-embedded-uri-panel')\n      ) {\n        markupLine.nextElementSibling.remove();\n      }\n      return;\n    }\n\n    toggle.setAttribute('aria-expanded', 'true');\n    toggle.setAttribute('aria-label', 'Hide full value');\n    if (label) label.textContent = 'hide';\n    if (\n      !markupLine ||\n      markupLine.nextElementSibling?.classList.contains('markup-embedded-uri-panel')\n    ) {\n      return;\n    }\n    const depth = Number(markupLine.style.getPropertyValue('--markup-depth') || 0);\n    markupLine.insertAdjacentElement(\n      'afterend',\n      this._createEmbeddedUriContinuationPanel(fullValue, depth)\n    );\n  }\n\n  /* prettier-ignore */\n  private _renderXmlSpan(className: string, text: string, { ghost = false } = {}): TemplateResult {\n    return ghost\n      ? html`<span class=\"${className} markup-ghost-tag-part\" title=${VIRTUAL_TEXT_TAG_HINT}>${text}</span>`\n      : html`<span class=${className}>${text}</span>`;\n  }\n\n  /* prettier-ignore */\n  private _renderMarkupLineRow(\n    depth: number,\n    content: unknown,\n    { foldToggle = false } = {}\n  ): TemplateResult {\n    return html`<div class=\"markup-line\" style=\"--markup-depth: ${depth}\"><span class=\"markup-line-content\"><span class=\"markup-gutter\" aria-hidden=\"true\">${foldToggle ? html`<span class=\"markup-fold-toggle\"></span>` : nothing}</span><span class=\"markup-line-body\">${content}</span></span></div>`;\n  }\n\n  private _renderMarkupAttrValue(value: string): TemplateResult {\n    if (isTruncatableEmbeddedImageUri(value)) {\n      return this._renderTruncatableMarkupAttrValue(value);\n    }\n    return this._renderXmlSpan('xml-attr-value', value);\n  }\n\n  /* prettier-ignore */\n  private _renderMarkupAttributes(\n    attributes: { name: string; value: string }[]\n  ): TemplateResult[] {\n    return attributes.map(\n      ({ name, value }) => html` ${this._renderXmlSpan('xml-attr-name', name)}${this._renderXmlSpan('xml-bracket', '=\"')}${this._renderMarkupAttrValue(value)}${this._renderXmlSpan('xml-bracket', '\"')}`\n    );\n  }\n\n  /* prettier-ignore */\n  private _renderMarkupTextContent(text: string): TemplateResult {\n    const cdataMatch = /^<!\\[CDATA\\[([\\s\\S]*)\\]\\]>$/.exec(text);\n    if (cdataMatch) {\n      return html`${this._renderXmlSpan('xml-cdata-delimiter', '<![CDATA[')}${this._renderXmlSpan('xml-cdata', cdataMatch[1] ?? '')}${this._renderXmlSpan('xml-cdata-delimiter', ']]>')}`;\n    }\n    return this._renderXmlSpan('xml-text', text);\n  }\n\n  /* prettier-ignore */\n  private _renderOpenTagContent(\n    tag: string,\n    attributes: { name: string; value: string }[],\n    ghost = false\n  ): TemplateResult {\n    return html`${this._renderXmlSpan('xml-bracket', '<', { ghost })}${this._renderXmlSpan('xml-tag', tag, { ghost })}${this._renderMarkupAttributes(attributes)}${this._renderXmlSpan('xml-bracket', '>', { ghost })}`;\n  }\n\n  /* prettier-ignore */\n  private _renderMarkupFoldableOpen(\n    depth: number,\n    tag: string,\n    attributes: { name: string; value: string }[],\n    tagHint?: string\n  ): TemplateResult {\n    const ghost = Boolean(tagHint);\n    const content = html`${this._renderOpenTagContent(tag, attributes, ghost)}<span class=\"markup-fold-suffix\">${this._renderXmlSpan('xml-bracket', '...', { ghost })}${this._renderXmlSpan('xml-bracket', '</', { ghost })}${this._renderXmlSpan('xml-tag', tag, { ghost })}${this._renderXmlSpan('xml-bracket', '>', { ghost })}</span>`;\n    return html`<summary class=\"markup-line markup-line-open\" style=\"--markup-depth: ${depth}\" @click=${this._onSummaryClick}><span class=\"markup-line-content\"><span class=\"markup-gutter\" aria-hidden=\"true\"><span class=\"markup-fold-toggle\"></span></span><span class=\"markup-line-body\">${content}</span></span></summary>`;\n  }\n\n  /* prettier-ignore */\n  private _renderMarkupCloseTag(\n    depth: number,\n    tag: string,\n    tagHint?: string\n  ): TemplateResult {\n    const ghost = Boolean(tagHint);\n    const content = html`${this._renderXmlSpan('xml-bracket', '</', { ghost })}${this._renderXmlSpan('xml-tag', tag, { ghost })}${this._renderXmlSpan('xml-bracket', '>', { ghost })}`;\n    return this._renderMarkupLineRow(depth, content);\n  }\n\n  /* prettier-ignore */\n  private _renderMarkupSelfClosingTag(\n    depth: number,\n    tag: string,\n    attributes: { name: string; value: string }[]\n  ): TemplateResult {\n    const content = html`${this._renderXmlSpan('xml-bracket', '<')}${this._renderXmlSpan('xml-tag', tag)}${this._renderMarkupAttributes(attributes)}${this._renderXmlSpan('xml-bracket', '/>')}`;\n    return this._renderMarkupLineRow(depth, content);\n  }\n\n  /* prettier-ignore */\n  private _renderMarkupInlineElement(\n    depth: number,\n    tag: string,\n    attributes: { name: string; value: string }[],\n    text: string\n  ): TemplateResult {\n    const content = html`${this._renderOpenTagContent(tag, attributes)}${this._renderMarkupTextContent(text)}${this._renderXmlSpan('xml-bracket', '</')}${this._renderXmlSpan('xml-tag', tag)}${this._renderXmlSpan('xml-bracket', '>')}`;\n    return this._renderMarkupLineRow(depth, content);\n  }\n\n  private _renderMarkupTextLine(depth: number, text: string): TemplateResult {\n    return this._renderMarkupLineRow(depth, this._renderMarkupTextContent(text));\n  }\n\n  private _renderMarkupNodesFromSlice(\n    depth: number,\n    nodes: ArrayLike<ChildNode>,\n    elementIds: Map<Element, string>\n  ): TemplateResult[] {\n    const templates: TemplateResult[] = [];\n    for (let i = 0; i < nodes.length; i += 1) {\n      const child = nodes[i];\n      if (!child) continue;\n      if (isTextLikeNode(child)) {\n        const text = formatMarkupTextNode(child);\n        if (text) {\n          templates.push(this._renderMarkupTextLine(depth, text));\n        }\n      } else if (child.nodeType === Node.ELEMENT_NODE) {\n        templates.push(this._renderMarkupElement(child as Element, depth, elementIds));\n      }\n    }\n    return templates;\n  }\n\n  /* prettier-ignore */\n  private _renderMarkupVirtualText(\n    depth: number,\n    hostEl: Element,\n    contentNodes: ChildNode[],\n    elementIds: Map<Element, string>\n  ): TemplateResult | TemplateResult[] | unknown {\n    if (!shouldWrapVirtualText(contentNodes)) {\n      return this._renderMarkupNodesFromSlice(depth, contentNodes, elementIds);\n    }\n\n    const elementId = elementIds.get(hostEl);\n\n    return html`<details class=\"markup-el markup-el-foldable markup-el-virtual-text\" ?open=${true} data-element-id=${elementId ?? nothing}>${this._renderMarkupFoldableOpen(depth, 'text', [], VIRTUAL_TEXT_TAG_HINT)}<div class=\"markup-fold-body\"><div class=\"markup-children\">${this._renderMarkupNodesFromSlice(depth + 1, contentNodes, elementIds)}</div>${this._renderMarkupCloseTag(depth, 'text', VIRTUAL_TEXT_TAG_HINT)}</div></details>`;\n  }\n\n  /* prettier-ignore */\n  private _renderMarkupFoldableElement(\n    el: Element,\n    depth: number,\n    elementIds: Map<Element, string>,\n    renderBody: (childDepth: number) => TemplateResult | TemplateResult[] | unknown\n  ): TemplateResult {\n    const tag = localName(el);\n    const elementId = elementIds.get(el);\n\n    return html`<details class=\"markup-el markup-el-foldable\" ?open=${true} data-element-id=${elementId ?? nothing}>${this._renderMarkupFoldableOpen(depth, tag, markupAttributes(el))}<div class=\"markup-fold-body\"><div class=\"markup-children\">${renderBody(depth + 1)}</div>${this._renderMarkupCloseTag(depth, tag)}</div></details>`;\n  }\n\n  private _renderMarkupList(\n    el: Element,\n    depth: number,\n    elementIds: Map<Element, string>\n  ): TemplateResult {\n    return this._renderMarkupFoldableElement(el, depth, elementIds, childDepth => {\n      const templates: unknown[] = [];\n      const nodes = [...el.childNodes];\n      let i = 0;\n      while (i < nodes.length) {\n        const node = nodes[i];\n        if (!node) {\n          i += 1;\n          continue;\n        }\n        if (\n          node.nodeType === Node.ELEMENT_NODE &&\n          localName(node as Element) === 'ldiv'\n        )\n          break;\n        if (isTextLikeNode(node) && isWhitespaceOnlyText(node)) {\n          i += 1;\n          continue;\n        }\n        if (isTextLikeNode(node)) break;\n        if (node.nodeType === Node.ELEMENT_NODE) {\n          const tag = localName(node as Element);\n          if (HEAD_TAGS.has(tag) || tag === 'location') {\n            templates.push(\n              this._renderMarkupElement(node as Element, childDepth, elementIds)\n            );\n            i += 1;\n            continue;\n          }\n        }\n        break;\n      }\n      while (i < nodes.length) {\n        const node = nodes[i];\n        if (!node) {\n          i += 1;\n          continue;\n        }\n        if (\n          node.nodeType !== Node.ELEMENT_NODE ||\n          localName(node as Element) !== 'ldiv'\n        ) {\n          templates.push(\n            ...this._renderMarkupNodesFromSlice(childDepth, [node], elementIds)\n          );\n          i += 1;\n          continue;\n        }\n        const ldiv = node as Element;\n        templates.push(this._renderMarkupElement(ldiv, childDepth, elementIds));\n        i += 1;\n        const end = skipUntilListItemBoundary(nodes, i);\n        templates.push(\n          this._renderMarkupVirtualText(\n            childDepth,\n            ldiv,\n            nodes.slice(i, end),\n            elementIds\n          )\n        );\n        i = end;\n      }\n      return templates;\n    });\n  }\n\n  private _renderMarkupOtslContainer(\n    el: Element,\n    depth: number,\n    elementIds: Map<Element, string>\n  ): TemplateResult {\n    return this._renderMarkupFoldableElement(el, depth, elementIds, childDepth => {\n      const templates: unknown[] = [];\n      const nodes = [...el.childNodes];\n      let i = 0;\n      while (i < nodes.length) {\n        const node = nodes[i];\n        if (!node) {\n          i += 1;\n          continue;\n        }\n        if (\n          node.nodeType === Node.ELEMENT_NODE &&\n          isCellToken(localName(node as Element))\n        )\n          break;\n        if (isTextLikeNode(node) && isWhitespaceOnlyText(node)) {\n          i += 1;\n          continue;\n        }\n        if (isTextLikeNode(node)) break;\n        if (node.nodeType === Node.ELEMENT_NODE) {\n          const tag = localName(node as Element);\n          if (HEAD_TAGS.has(tag) || tag === 'location' || tag === 'h_thread') {\n            templates.push(\n              this._renderMarkupElement(node as Element, childDepth, elementIds)\n            );\n            i += 1;\n            continue;\n          }\n        }\n        break;\n      }\n      while (i < nodes.length) {\n        const node = nodes[i];\n        if (!node) {\n          i += 1;\n          continue;\n        }\n        if (node.nodeType !== Node.ELEMENT_NODE) {\n          templates.push(\n            ...this._renderMarkupNodesFromSlice(childDepth, [node], elementIds)\n          );\n          i += 1;\n          continue;\n        }\n        const tag = localName(node as Element);\n        if (tag === 'nl') {\n          templates.push(this._renderMarkupSelfClosingTag(childDepth, 'nl', []));\n          i += 1;\n          continue;\n        }\n        if (!isCellToken(tag)) {\n          templates.push(\n            ...this._renderMarkupNodesFromSlice(childDepth, [node], elementIds)\n          );\n          i += 1;\n          continue;\n        }\n        const cell = node as Element;\n        templates.push(this._renderMarkupElement(cell, childDepth, elementIds));\n        i += 1;\n        if (CELL_SPAN_TAGS.has(tag)) continue;\n        const end = skipUntilCellBoundary(nodes, i);\n        templates.push(\n          this._renderMarkupVirtualText(\n            childDepth,\n            cell,\n            nodes.slice(i, end),\n            elementIds\n          )\n        );\n        i = end;\n      }\n      return templates;\n    });\n  }\n\n  /* prettier-ignore */\n  private _renderMarkupElement(\n    el: Element,\n    depth: number,\n    elementIds: Map<Element, string>\n  ): TemplateResult {\n    const tag = localName(el);\n    if (tag === 'list') return this._renderMarkupList(el, depth, elementIds);\n    if (OTSL_CONTAINER_TAGS.has(tag))\n      return this._renderMarkupOtslContainer(el, depth, elementIds);\n\n    const elementId = elementIds.get(el);\n    const attributes = markupAttributes(el);\n\n    if (!el.childNodes.length) {\n      return html`<div class=\"markup-el\" data-element-id=${elementId ?? nothing}>${this._renderMarkupSelfClosingTag(depth, tag, attributes)}</div>`;\n    }\n\n    const meaningfulText = [...el.childNodes].filter(\n      n => isTextLikeNode(n) && !isWhitespaceOnlyText(n)\n    );\n    const textOnly =\n      meaningfulText.length > 0 &&\n      meaningfulText.every(isTextLikeNode) &&\n      !childElements(el).length;\n    if (textOnly) {\n      const text = serializeMarkupTextNodes(el.childNodes);\n      if (text) {\n        return html`<div class=\"markup-el\" data-element-id=${elementId ?? nothing}>${this._renderMarkupInlineElement(depth, tag, attributes, text)}</div>`;\n      }\n    }\n\n    return html`<details class=\"markup-el markup-el-foldable\" ?open=${true} data-element-id=${elementId ?? nothing}>${this._renderMarkupFoldableOpen(depth, tag, attributes)}<div class=\"markup-fold-body\"><div class=\"markup-children\">${[...el.childNodes].map(child => {\n      if (isTextLikeNode(child)) {\n        const text = formatMarkupTextNode(child);\n        return text ? this._renderMarkupTextLine(depth + 1, text) : nothing;\n      } else if (child.nodeType === Node.ELEMENT_NODE) {\n        return this._renderMarkupElement(child as Element, depth + 1, elementIds);\n      }\n      return nothing;\n    })}</div>${this._renderMarkupCloseTag(depth, tag)}</div></details>`;\n  }\n}\n","@import '../theme.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  border-right: 1px solid var(--border);\n  min-height: 0;\n  min-width: 0;\n  background: var(--panel);\n\n  --overlay-reading-order: var(--doclang-overlay-reading-order, #71717a);\n  --overlay-fragment: var(--doclang-overlay-fragment, #9333ea);\n}\n:host([hidden]) {\n  display: none !important;\n}\n:host(.pane-layout-last) {\n  border-right: none;\n}\n.pane-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  height: 2.125rem;\n  padding: 0 0.75rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: var(--muted);\n  border-bottom: 1px solid var(--border);\n  background: var(--panel);\n}\n.pane-header-title {\n  min-width: 0;\n}\n.pane-page-controls {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-shrink: 0;\n}\n.page-zoom-control {\n  display: flex;\n  align-items: center;\n  gap: 0.35rem;\n  user-select: none;\n}\n.page-zoom-control-label {\n  font-size: 0.625rem;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: var(--muted);\n  cursor: pointer;\n}\n.page-zoom-control input[type='range'] {\n  width: 5.5rem;\n  height: 1rem;\n  margin: 0;\n  cursor: pointer;\n}\n.page-zoom-reset {\n  appearance: none;\n  border: 1px solid var(--border);\n  background: var(--bg);\n  color: var(--muted);\n  border-radius: 0.375rem;\n  padding: 0 0.45rem;\n  height: 1.25rem;\n  font: inherit;\n  font-size: 0.6875rem;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  line-height: 1;\n  cursor: pointer;\n  min-width: 2.75rem;\n}\n.page-zoom-reset:not(:disabled):hover {\n  border-color: var(--accent);\n  color: var(--text);\n}\n.page-zoom-reset:disabled {\n  opacity: 0.55;\n  cursor: default;\n}\n.pane-settings-toggle {\n  appearance: none;\n  border: 1px solid transparent;\n  background: transparent;\n  color: var(--muted);\n  font-weight: 500;\n  cursor: pointer;\n  white-space: nowrap;\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  transition:\n    color 0.12s ease,\n    background 0.12s ease,\n    border-color 0.12s ease;\n  border-radius: 0.25rem;\n  padding: 0 0.28rem 0 0.4rem;\n  height: 1.25rem;\n  font-size: 0.625rem;\n  font-weight: 600;\n  line-height: 1;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  font: inherit;\n}\n.pane-settings-toggle::after {\n  content: '';\n  flex-shrink: 0;\n  width: 0.26rem;\n  height: 0.26rem;\n  margin-left: 0.22rem;\n  margin-top: -0.1em;\n  border-right: 1.5px solid currentColor;\n  border-bottom: 1.5px solid currentColor;\n  transform: rotate(45deg);\n  opacity: 0.65;\n}\n.pane-settings-toggle:hover {\n  color: var(--text);\n  background: color-mix(in srgb, var(--text) 5%, transparent);\n}\n.pane-settings-toggle[aria-expanded='true'] {\n  color: var(--accent);\n  background: color-mix(in srgb, var(--accent) 10%, var(--panel));\n  border-color: color-mix(in srgb, var(--accent) 22%, transparent);\n}\n.pane-settings-toggle:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n}\n.pane-page-layout {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n}\n.pane-body {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  padding: 0.75rem;\n}\n.settings-option {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n  cursor: pointer;\n  user-select: none;\n}\n.settings-option-primary + .settings-subgroup {\n  margin-top: 0.65rem;\n}\n.settings-option-primary {\n  font-weight: 600;\n}\n.settings-subgroup {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding-left: 0.85rem;\n}\n.settings-reading-order-group {\n  gap: 0.35rem;\n  padding-left: 1.6rem;\n}\n.settings-option-nested {\n  padding-left: 0;\n}\n.settings-option-sub {\n  font-size: 0.8125rem;\n  color: var(--muted);\n}\n.settings-option-disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.settings-option-disabled input {\n  cursor: not-allowed;\n}\n.settings-option input {\n  margin: 0.15rem 0 0;\n  flex-shrink: 0;\n  cursor: pointer;\n}\n.settings-divider {\n  height: 1px;\n  background: var(--border);\n  margin: 0.75rem 0;\n}\n\n/* Arrow layer row: visibility checkbox on the left, style-disclosure button on the right. */\n.arrow-layer-row {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 0.375rem;\n}\n.arrow-layer-row .settings-option {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n.arrow-layer-row .settings-option span {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.arrow-style-btn {\n  flex: none;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.25rem;\n  height: 0.9rem;\n  margin: 0.1rem 0 0;\n  padding: 0;\n  border: none;\n  border-radius: 0.25rem;\n  background: transparent;\n  color: var(--muted);\n  cursor: pointer;\n}\n.arrow-style-btn::before {\n  content: \"\";\n  width: 0;\n  height: 0;\n  border-left: 0.3rem solid currentColor;\n  border-top: 0.3rem solid transparent;\n  border-bottom: 0.3rem solid transparent;\n  transition: transform 0.12s ease;\n}\n.arrow-style-btn:hover {\n  background: var(--bg);\n  color: var(--text);\n}\n.arrow-style-btn[aria-expanded=\"true\"] {\n  color: var(--text);\n}\n.arrow-style-btn[aria-expanded=\"true\"]::before {\n  transform: rotate(90deg);\n}\n.arrow-layer-row.is-disabled .arrow-style-btn {\n  opacity: 0.45;\n  pointer-events: none;\n}\n.arrow-style-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 0.4rem;\n  padding: 0.35rem 0 0.55rem 1.6rem;\n}\n.settings-reading-order-group .arrow-style-fields {\n  padding-left: 0.4rem;\n}\n.arrow-style-fields[hidden] {\n  display: none;\n}\n.arrow-style-fields label {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  font-size: 0.75rem;\n  color: var(--muted);\n  cursor: default;\n}\n.arrow-field-control {\n  display: flex;\n  align-items: center;\n  gap: 0.35rem;\n  flex: 1 1 auto;\n  min-width: 0;\n  justify-content: flex-end;\n}\n.arrow-field-value {\n  flex: none;\n  min-width: 1.5rem;\n  text-align: right;\n  color: var(--text);\n  font-variant-numeric: tabular-nums;\n}\n.arrow-style-fields input[type=\"range\"] {\n  flex: 1 1 auto;\n  min-width: 0;\n  max-width: 3.5rem;\n  cursor: pointer;\n}\n.arrow-style-fields input[type=\"color\"] {\n  width: 2.25rem;\n  height: 1.4rem;\n  padding: 0;\n  border: 1px solid var(--border);\n  border-radius: 0.25rem;\n  background: none;\n  cursor: pointer;\n}\n.arrow-style-fields select {\n  font: inherit;\n  font-size: 0.75rem;\n  padding: 0.1rem 0.25rem;\n  color: var(--text);\n  background: var(--panel);\n  border: 1px solid var(--border);\n  border-radius: 0.25rem;\n  cursor: pointer;\n}\n.overlays-reset {\n  margin-top: 0.6rem;\n  font: inherit;\n  font-size: 0.75rem;\n  color: var(--text);\n  background: none;\n  border: 1px solid var(--border);\n  border-radius: 0.25rem;\n  padding: 0.3rem 0.55rem;\n  cursor: pointer;\n}\n.overlays-reset:hover {\n  background: var(--bg);\n}\n.page-view-port {\n  display: flex;\n  overflow: auto;\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n  scrollbar-gutter: stable;\n}\n.pane-body.can-pan {\n  cursor: grab;\n}\n.pane-body.is-panning {\n  cursor: grabbing;\n  user-select: none;\n}\n.pane-body:focus {\n  outline: none;\n}\n.pane-body:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: -2px;\n}\n.placeholder {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 12rem;\n  color: var(--muted);\n  font-style: italic;\n  background: var(--placeholder-bg);\n  border: 1px dashed var(--border);\n  border-radius: 0.5rem;\n  padding: 2rem;\n  text-align: center;\n}\n.page-view {\n  position: relative;\n  display: block;\n  width: fit-content;\n  flex-shrink: 0;\n  margin: auto;\n  line-height: 0;\n  border: 1px solid var(--border);\n  border-radius: 0.25rem;\n  overflow: hidden;\n}\n.page-view img {\n  display: block;\n  width: auto;\n  height: auto;\n  max-width: none;\n  max-height: none;\n  border: none;\n  border-radius: 0;\n}\n.page-view img:not([data-layout-ready]) {\n  opacity: 0;\n}\n.page-view svg.overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: auto;\n  overflow: hidden;\n}\n.overlay rect.bbox.bbox-hidden,\n.overlay .overlay-badge.bbox-hidden {\n  display: none;\n}\n.overlay rect.bbox {\n  stroke-width: 2;\n  vector-effect: non-scaling-stroke;\n  pointer-events: none;\n}\n/* Map element kind classes to --doclang-kind-stroke so bbox highlight rules\n   can reference it. These must live in the shadow DOM stylesheet to\n   take effect on elements inside this shadow root. */\n.kind-text {\n  --doclang-kind-stroke: var(--kind-text);\n}\n.kind-heading {\n  --doclang-kind-stroke: var(--kind-heading);\n}\n.kind-list {\n  --doclang-kind-stroke: var(--kind-list);\n}\n.kind-ldiv {\n  --doclang-kind-stroke: var(--kind-ldiv);\n}\n.kind-table {\n  --doclang-kind-stroke: var(--kind-table);\n}\n.kind-index {\n  --doclang-kind-stroke: var(--kind-index);\n}\n.kind-formula {\n  --doclang-kind-stroke: var(--kind-formula);\n}\n.kind-code {\n  --doclang-kind-stroke: var(--kind-code);\n}\n.kind-picture {\n  --doclang-kind-stroke: var(--kind-picture);\n}\n.kind-group {\n  --doclang-kind-stroke: var(--kind-group);\n}\n.kind-footnote {\n  --doclang-kind-stroke: var(--kind-footnote);\n}\n.kind-page_header {\n  --doclang-kind-stroke: var(--kind-page_header);\n}\n.kind-page_footer {\n  --doclang-kind-stroke: var(--kind-page_footer);\n}\n.kind-caption {\n  --doclang-kind-stroke: var(--kind-caption);\n}\n.kind-field {\n  --doclang-kind-stroke: var(--kind-field);\n}\n.kind-default {\n  --doclang-kind-stroke: var(--kind-default);\n}\n\n.overlay rect.bbox.selected {\n  fill: color-mix(\n    in srgb,\n    var(--kind-stroke, var(--accent)) 30%,\n    transparent\n  ) !important;\n  stroke-width: 3.5;\n  filter: drop-shadow(\n    0 0 3px color-mix(in srgb, var(--kind-stroke, var(--accent)) 60%, transparent)\n  );\n}\n.overlay rect.bbox.related:not(.selected) {\n  fill: color-mix(\n    in srgb,\n    var(--kind-stroke, var(--accent)) 30%,\n    transparent\n  ) !important;\n}\n.overlay rect.bbox.layer-furniture,\n.overlay rect.bbox.layer-background {\n  fill: url(#layer-hatch) !important;\n  stroke: color-mix(in srgb, var(--kind-stroke, var(--muted)) 50%, transparent);\n}\n.overlay .layer-hatch-stripe {\n  fill: var(--muted);\n  fill-opacity: 0.06;\n}\n.overlay rect.bbox.layer-furniture.selected,\n.overlay rect.bbox.layer-background.selected {\n  fill: color-mix(\n    in srgb,\n    var(--kind-stroke, var(--accent)) 22%,\n    transparent\n  ) !important;\n}\n.overlay rect.bbox.layer-furniture.related:not(.selected),\n.overlay rect.bbox.layer-background.related:not(.selected) {\n  fill: color-mix(\n    in srgb,\n    var(--kind-stroke, var(--accent)) 18%,\n    transparent\n  ) !important;\n}\n.overlay .bbox-text {\n  fill: color-mix(in srgb, var(--kind-text) 14%, transparent);\n  stroke: var(--kind-text);\n}\n.overlay .bbox-heading {\n  fill: color-mix(in srgb, var(--kind-heading) 14%, transparent);\n  stroke: var(--kind-heading);\n}\n.overlay .bbox-list,\n.overlay .bbox-ldiv {\n  fill: color-mix(in srgb, var(--kind-list) 14%, transparent);\n  stroke: var(--kind-list);\n}\n.overlay .bbox-table {\n  fill: color-mix(in srgb, var(--kind-table) 14%, transparent);\n  stroke: var(--kind-table);\n}\n.overlay .bbox-index {\n  fill: color-mix(in srgb, var(--kind-index) 14%, transparent);\n  stroke: var(--kind-index);\n}\n.overlay .bbox-formula {\n  fill: color-mix(in srgb, var(--kind-formula) 14%, transparent);\n  stroke: var(--kind-formula);\n}\n.overlay .bbox-code {\n  fill: color-mix(in srgb, var(--kind-code) 16%, transparent);\n  stroke: var(--kind-code);\n}\n.overlay .bbox-picture {\n  fill: color-mix(in srgb, var(--kind-picture) 14%, transparent);\n  stroke: var(--kind-picture);\n}\n.overlay .bbox-group {\n  fill: color-mix(in srgb, var(--kind-group) 14%, transparent);\n  stroke: var(--kind-group);\n}\n.overlay .bbox-footnote {\n  fill: color-mix(in srgb, var(--kind-footnote) 14%, transparent);\n  stroke: var(--kind-footnote);\n}\n.overlay .bbox-page_header,\n.overlay .bbox-page_footer {\n  fill: color-mix(in srgb, var(--kind-page_header) 14%, transparent);\n  stroke: var(--kind-page_header);\n}\n.overlay .bbox-caption {\n  fill: color-mix(in srgb, var(--kind-caption) 14%, transparent);\n  stroke: var(--kind-caption);\n}\n.overlay line.caption-link {\n  color: var(--arrow-caption-color, var(--kind-caption));\n  stroke: currentColor;\n  stroke-width: var(--arrow-caption-width, 1.5);\n  stroke-dasharray: var(--arrow-caption-dash, none);\n  stroke-linecap: var(--arrow-caption-cap, butt);\n  vector-effect: non-scaling-stroke;\n  pointer-events: none;\n  fill: none;\n}\n.overlay line.caption-link.bbox-hidden {\n  display: none;\n}\n.overlay line.xref-link {\n  color: var(--arrow-xref-color, var(--kind-footnote));\n  stroke: currentColor;\n  stroke-width: var(--arrow-xref-width, 1.5);\n  stroke-dasharray: var(--arrow-xref-dash, none);\n  stroke-linecap: var(--arrow-xref-cap, butt);\n  vector-effect: non-scaling-stroke;\n  pointer-events: none;\n  fill: none;\n}\n.overlay line.xref-link.bbox-hidden {\n  display: none;\n}\n.overlay .fragment-link {\n  pointer-events: none;\n}\n.overlay .fragment-link.bbox-hidden {\n  display: none;\n}\n.overlay .fragment-link-path {\n  color: var(--arrow-fragment-color, var(--overlay-fragment));\n  fill: none;\n  stroke: currentColor;\n  stroke-width: var(--arrow-fragment-width, 1.5);\n  stroke-linecap: var(--arrow-fragment-cap, butt);\n  vector-effect: non-scaling-stroke;\n}\n.overlay .fragment-link-path-dashed {\n  stroke-dasharray: var(--arrow-fragment-dash, 6 4);\n}\n.overlay .fragment-nav {\n  pointer-events: none;\n}\n.overlay .fragment-nav.bbox-hidden {\n  display: none;\n}\n.overlay .fragment-nav-btn {\n  pointer-events: auto;\n  cursor: pointer;\n}\n.overlay .fragment-nav-btn-disabled {\n  pointer-events: none;\n  cursor: default;\n  opacity: 0.35;\n}\n.overlay .fragment-nav-btn-bg {\n  fill: var(--panel);\n  stroke: var(--overlay-fragment);\n  stroke-width: 1;\n  vector-effect: non-scaling-stroke;\n}\n.overlay .fragment-nav-btn-label {\n  fill: var(--overlay-fragment);\n  font-family: var(--font-ui);\n  font-weight: 700;\n  text-anchor: middle;\n  dominant-baseline: central;\n  pointer-events: none;\n}\n.overlay .fragment-nav-btn:not(.fragment-nav-btn-disabled):hover .fragment-nav-btn-bg {\n  fill: color-mix(in srgb, var(--overlay-fragment) 12%, var(--panel));\n}\n.overlay .fragment-link-label {\n  fill: var(--overlay-fragment);\n  font-family: var(--font-ui);\n  font-weight: 600;\n  font-style: italic;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  paint-order: stroke fill;\n  stroke: var(--panel);\n  stroke-width: 3px;\n}\n.overlay .reading-order-step {\n  color: var(--arrow-reading-order-color, var(--overlay-reading-order));\n  stroke: currentColor;\n  stroke-width: var(--arrow-reading-order-width, 1.5);\n  stroke-dasharray: var(--arrow-reading-order-dash, 5 4);\n  stroke-linecap: var(--arrow-reading-order-cap, butt);\n  vector-effect: non-scaling-stroke;\n  pointer-events: none;\n  fill: none;\n}\n.overlay .reading-order-step.bbox-hidden,\n.overlay .reading-order-badge.bbox-hidden {\n  display: none;\n}\n.overlay .overlay-badge {\n  pointer-events: none;\n}\n.overlay .overlay-badge-bg {\n  fill-opacity: 1;\n  stroke: none;\n}\n.reading-order-badge .overlay-badge-bg {\n  fill: var(--overlay-reading-order);\n}\n.overlay .element-badge {\n  opacity: 0.8;\n  pointer-events: auto;\n  cursor: help;\n}\n.overlay .element-badge .overlay-badge-bg {\n  fill: var(--accent);\n}\n.overlay .element-badge.kind-text .overlay-badge-bg {\n  fill: var(--kind-text);\n}\n.overlay .element-badge.kind-heading .overlay-badge-bg {\n  fill: var(--kind-heading);\n}\n.overlay .element-badge.kind-list .overlay-badge-bg {\n  fill: var(--kind-list);\n}\n.overlay .element-badge.kind-table .overlay-badge-bg {\n  fill: var(--kind-table);\n}\n.overlay .element-badge.kind-index .overlay-badge-bg {\n  fill: var(--kind-index);\n}\n.overlay .element-badge.kind-formula .overlay-badge-bg {\n  fill: var(--kind-formula);\n}\n.overlay .element-badge.kind-code .overlay-badge-bg {\n  fill: var(--kind-code);\n}\n.overlay .element-badge.kind-picture .overlay-badge-bg {\n  fill: var(--kind-picture);\n}\n.overlay .element-badge.kind-group .overlay-badge-bg {\n  fill: var(--kind-group);\n}\n.overlay .element-badge.kind-footnote .overlay-badge-bg {\n  fill: var(--kind-footnote);\n}\n.overlay .element-badge.kind-page_header .overlay-badge-bg {\n  fill: var(--kind-page_header);\n}\n.overlay .element-badge.kind-caption .overlay-badge-bg {\n  fill: var(--kind-caption);\n}\n.overlay .element-badge.kind-field .overlay-badge-bg {\n  fill: var(--kind-field);\n}\n.overlay .overlay-badge-label {\n  fill: #ffffff;\n  fill-opacity: 1;\n  font-family: var(--font-ui);\n  font-weight: 700;\n  text-anchor: middle;\n  dominant-baseline: central;\n  pointer-events: none;\n}\n.overlay .bbox-field {\n  fill: color-mix(in srgb, var(--kind-field) 14%, transparent);\n  stroke: var(--kind-field);\n}\n.overlay .bbox-default {\n  fill: color-mix(in srgb, var(--kind-default) 12%, transparent);\n  stroke: var(--kind-default);\n}\n@media (prefers-color-scheme: dark) {\n  :host {\n    --overlay-reading-order: var(--doclang-overlay-reading-order, #a1a1aa);\n    --overlay-fragment: var(--doclang-overlay-fragment, #c084fc);\n  }\n  .overlay .bbox-text {\n    fill: color-mix(in srgb, var(--kind-text) 20%, transparent);\n  }\n  .overlay .bbox-heading {\n    fill: color-mix(in srgb, var(--kind-heading) 20%, transparent);\n  }\n  .overlay .bbox-list,\n  .overlay .bbox-ldiv {\n    fill: color-mix(in srgb, var(--kind-list) 20%, transparent);\n  }\n  .overlay .bbox-table {\n    fill: color-mix(in srgb, var(--kind-table) 18%, transparent);\n  }\n  .overlay .bbox-index {\n    fill: color-mix(in srgb, var(--kind-index) 18%, transparent);\n  }\n  .overlay .bbox-formula {\n    fill: color-mix(in srgb, var(--kind-formula) 18%, transparent);\n  }\n  .overlay .bbox-code {\n    fill: color-mix(in srgb, var(--kind-code) 20%, transparent);\n  }\n  .overlay .bbox-picture {\n    fill: color-mix(in srgb, var(--kind-picture) 20%, transparent);\n  }\n  .overlay .bbox-group {\n    fill: color-mix(in srgb, var(--kind-group) 20%, transparent);\n  }\n  .overlay .bbox-footnote {\n    fill: color-mix(in srgb, var(--kind-footnote) 18%, transparent);\n  }\n  .overlay .bbox-page_header,\n  .overlay .bbox-page_footer {\n    fill: color-mix(in srgb, var(--kind-page_header) 18%, transparent);\n  }\n  .overlay .bbox-caption {\n    fill: color-mix(in srgb, var(--kind-caption) 18%, transparent);\n  }\n  .overlay .bbox-field {\n    fill: color-mix(in srgb, var(--kind-field) 18%, transparent);\n  }\n  .overlay .bbox-default {\n    fill: color-mix(in srgb, var(--kind-default) 18%, transparent);\n  }\n}\n\n/* -----------------------------------------------------------------------\n   Element-head hint popover\n   ----------------------------------------------------------------------- */\n\n.page-view-hint {\n  position: fixed;\n  inset: unset;\n  top: 0;\n  left: 0;\n  width: max-content;\n  max-width: 24rem;\n  padding: 0.45rem 0.55rem;\n  border-radius: 0.25rem;\n  background: var(--panel);\n  border: 1px solid var(--border);\n  color: var(--text);\n  font-family: var(--font-ui);\n  font-size: 0.75rem;\n  line-height: 1.35;\n  text-align: left;\n  white-space: normal;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);\n  pointer-events: none;\n  margin: 0;\n}\n\n.page-view-hint .head-tooltip {\n  border-collapse: collapse;\n  width: 100%;\n  font-size: 0.6875rem;\n  line-height: 1.4;\n}\n\n.page-view-hint .head-tooltip th {\n  padding: 0.1rem 0.55rem 0.1rem 0;\n  color: var(--muted);\n  font-weight: 600;\n  text-align: left;\n  vertical-align: top;\n  white-space: nowrap;\n}\n\n.page-view-hint .head-tooltip td {\n  padding: 0.1rem 0;\n  vertical-align: top;\n  word-break: break-word;\n}\n\n.page-view-hint .head-tooltip .head-default {\n  color: var(--muted);\n  font-style: italic;\n  white-space: nowrap;\n}\n\n","@import '../theme.css';\n\n:host {\n  display: contents;\n}\n\n/* The layer wraps the scrim + panel and is sized by the parent via position:absolute inset:0 */\n.settings-layer {\n  position: absolute;\n  inset: 0;\n  z-index: 5;\n}\n.settings-scrim {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  appearance: none;\n  border: none;\n  margin: 0;\n  padding: 0;\n  background: color-mix(in srgb, var(--bg) 28%, transparent);\n  cursor: default;\n}\n.settings-panel {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  z-index: 1;\n  width: 13rem;\n  max-height: calc(100% - 1rem);\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  border: 1px solid var(--border);\n  border-radius: 0.5rem;\n  background: var(--panel);\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);\n  overflow: hidden;\n}\n.settings-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  border-bottom: 1px solid var(--border);\n}\n.settings-title {\n  margin: 0;\n  font-size: 0.6875rem;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: var(--muted);\n}\n.settings-close {\n  appearance: none;\n  border: none;\n  background: transparent;\n  color: var(--muted);\n  width: 1.5rem;\n  height: 1.5rem;\n  border-radius: 0.25rem;\n  font-size: 1.1rem;\n  line-height: 1;\n  cursor: pointer;\n}\n.settings-close:hover {\n  color: var(--text);\n  background: var(--bg);\n}\n.settings-body {\n  padding: 0.75rem;\n  overflow: auto;\n}\n","/** <doclang-settings-panel> — floating settings panel + scrim overlay */\n\nimport { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeCSS } from 'lit';\nimport styles from './settings-panel.css?inline';\n\n/**\n * A floating settings panel with a scrim backdrop.\n * Positioned absolutely over its nearest positioned ancestor.\n *\n * The trigger button lives in the consumer (pane header). Call setOpen(true/false)\n * from the trigger, or pass `open` via attribute.\n *\n * Attributes:\n *   label   — text for the panel title and close button aria-label\n *\n * The panel body content is provided via the default slot.\n *\n * Events fired (bubbles, composed):\n *   doclang-settings-close  — when the panel closes itself (scrim or close button)\n */\n@customElement('doclang-settings-panel')\nexport class DoclangSettingsPanel extends LitElement {\n  static override styles = unsafeCSS(styles);\n\n  @property({ type: String }) label = '';\n\n  private _open = false;\n  private _titleId = `settings-title-${Math.random().toString(36).slice(2)}`;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('keydown', this._onDocKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('keydown', this._onDocKeydown);\n  }\n\n  override render() {\n    if (!this._open) return nothing;\n    return html`\n      <div class=\"settings-layer\">\n        <button\n          type=\"button\"\n          class=\"settings-scrim\"\n          tabindex=\"-1\"\n          aria-label=\"Close ${this.label}\"\n          @click=${this._onClose}\n        ></button>\n        <aside\n          class=\"settings-panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=${this._titleId}\n        >\n          <div class=\"settings-header\">\n            <h2 class=\"settings-title\" id=${this._titleId}>${this.label}</h2>\n            <button\n              type=\"button\"\n              class=\"settings-close\"\n              aria-label=\"Close ${this.label}\"\n              @click=${this._onClose}\n            >\n              ×\n            </button>\n          </div>\n          <div class=\"settings-body\">\n            <slot></slot>\n          </div>\n        </aside>\n      </div>\n    `;\n  }\n\n  setOpen(open: boolean): void {\n    if (this._open === open) return;\n    this._open = open;\n    this.requestUpdate();\n    if (!open) {\n      this.dispatchEvent(\n        new CustomEvent('doclang-settings-close', { bubbles: true, composed: true })\n      );\n    }\n  }\n\n  get isOpen(): boolean {\n    return this._open;\n  }\n\n  private _onClose = (): void => {\n    this.setOpen(false);\n  };\n\n  private _onDocKeydown = (e: KeyboardEvent): void => {\n    if (this._open && e.key === 'Escape') this.setOpen(false);\n  };\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'doclang-settings-panel': DoclangSettingsPanel;\n  }\n}\n","import { svg, render } from 'lit';\nimport type { TemplateResult } from 'lit';\nimport { layerClassForValue } from '../../doclang/dom';\nimport type {\n  BoundingBox,\n  CaptionLink,\n  XrefLink,\n  FragmentLink,\n  FragmentNavItem,\n} from '../../doclang/types';\n\nexport interface PixelRect {\n  x: number;\n  y: number;\n  w: number;\n  h: number;\n  area: number;\n}\n\nexport type ArrowLayerKey = 'readingOrder' | 'fragment' | 'xref' | 'caption';\n\nexport interface ArrowLayerMeta {\n  cssKey: string;\n  colorVar: string;\n  markerId: string;\n  defaultStyle: 'solid' | 'dashed' | 'dotted';\n}\n\nexport interface ArrowStyleConfig {\n  color?: string;\n  width?: number;\n  head?: number;\n  style?: 'solid' | 'dashed' | 'dotted';\n}\n\nexport interface OverlayLinkOptions {\n  markerId: string;\n  markerLayer?: ArrowLayerKey;\n  linkClass: string;\n  fromIdAttr: string;\n  toIdAttr: string;\n}\n\nexport interface PageLayoutCache {\n  paneW: number;\n  paneH: number;\n  imgW: number;\n  imgH: number;\n  fitScale: number;\n}\n\nconst OVERLAY_BADGE_FONT_SIZE = 11 * 1.5 * 0.8;\nconst OVERLAY_BADGE_PAD_X = 3;\nconst OVERLAY_BADGE_PAD_Y = 2;\nconst OVERLAY_BADGE_RADIUS_SCREEN_PX = 3;\n/** Demo page size; overlay lengths are calibrated to match pre-fix sizing on these images. */\nconst OVERLAY_REF_IMAGE_WIDTH = 1224;\nconst OVERLAY_REF_IMAGE_HEIGHT = 1584;\nexport const PAGE_VIEW_BORDER_PX = 2;\nexport const PAGE_ZOOM_DEFAULT = 100;\nexport const FRAGMENT_NAV_HINT_PREV = 'Previous fragment';\nexport const FRAGMENT_NAV_HINT_NEXT = 'Next fragment';\nconst FRAGMENT_LINK_LABEL_CROSS_PAGE = 'cross-page content';\nconst FRAGMENT_LINK_LABEL_SAME_PAGE = 'fragmented content';\n\nexport const ARROW_LAYERS: Record<ArrowLayerKey, ArrowLayerMeta> = {\n  readingOrder: {\n    cssKey: 'reading-order',\n    colorVar: '--overlay-reading-order',\n    markerId: 'reading-order-arrowhead',\n    defaultStyle: 'dashed',\n  },\n  fragment: {\n    cssKey: 'fragment',\n    colorVar: '--overlay-fragment',\n    markerId: 'fragment-arrowhead',\n    defaultStyle: 'dashed',\n  },\n  xref: {\n    cssKey: 'xref',\n    colorVar: '--kind-footnote',\n    markerId: 'xref-arrowhead',\n    defaultStyle: 'solid',\n  },\n  caption: {\n    cssKey: 'caption',\n    colorVar: '--kind-caption',\n    markerId: 'caption-arrowhead',\n    defaultStyle: 'solid',\n  },\n};\n\nexport const ARROW_STYLE_FIELD_DEFAULTS = { width: 1.5, head: 5 };\nexport const ARROW_DASH_VALUES: Record<string, string> = {\n  solid: 'none',\n  dashed: '6 4',\n  dotted: '1.5 3.5',\n};\n\n// ---------------------------------------------------------------------------\n// Overlay box CSS class helpers\n// ---------------------------------------------------------------------------\n\nexport function elementKindKey(kind: string): string {\n  if (\n    kind.startsWith('field_') ||\n    kind === 'key' ||\n    kind === 'value' ||\n    kind === 'hint'\n  )\n    return 'field';\n  if (kind === 'tabular') return 'table';\n  const known = new Set([\n    'text',\n    'heading',\n    'list',\n    'ldiv',\n    'table',\n    'index',\n    'formula',\n    'code',\n    'picture',\n    'group',\n    'footnote',\n    'page_header',\n    'page_footer',\n    'caption',\n  ]);\n  return known.has(kind) ? kind : 'default';\n}\n\nexport function kindClassForTag(tag: string): string {\n  return `kind-${elementKindKey(tag)}`;\n}\n\nexport function bboxClassForKind(kind: string): string {\n  return elementKindKey(kind);\n}\n\n// ---------------------------------------------------------------------------\n// Overlay context — passed explicitly by page-img-pane instead of globals\n// ---------------------------------------------------------------------------\nexport interface OverlayCtx {\n  zoomPct: number;\n  pane: HTMLElement;\n  layoutCache: PageLayoutCache | null;\n  setLayoutCache: (c: PageLayoutCache) => void;\n  selectedId: string | null;\n  arrowMarkerOptions?: (layerKey: ArrowLayerKey) => { size: number; color: string };\n}\n\n// ---------------------------------------------------------------------------\n// Page layout helpers\n// ---------------------------------------------------------------------------\n\nfunction paneContentSize(pane: HTMLElement): { w: number; h: number } {\n  const style = getComputedStyle(pane);\n  const padX = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);\n  const padY = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);\n  return { w: pane.clientWidth - padX, h: pane.clientHeight - padY };\n}\n\nexport function getCachedFitScale(\n  img: HTMLImageElement,\n  pane: HTMLElement,\n  ctx: OverlayCtx\n): number {\n  const { w: paneW, h: paneH } = paneContentSize(pane);\n  const imgW = img.naturalWidth;\n  const imgH = img.naturalHeight;\n  const cache = ctx.layoutCache;\n  if (\n    cache &&\n    cache.paneW === paneW &&\n    cache.paneH === paneH &&\n    cache.imgW === imgW &&\n    cache.imgH === imgH\n  ) {\n    return cache.fitScale;\n  }\n  const fitScale =\n    paneW > 0 && paneH > 0 && imgW > 0 && imgH > 0\n      ? Math.min(\n          (paneW - PAGE_VIEW_BORDER_PX) / imgW,\n          (paneH - PAGE_VIEW_BORDER_PX) / imgH\n        )\n      : 1;\n  ctx.setLayoutCache({ paneW, paneH, imgW, imgH, fitScale });\n  return fitScale;\n}\n\nexport function overlayUserLength(\n  baseUserPx: number,\n  ctx: OverlayCtx,\n  img?: HTMLImageElement | null\n): number {\n  const resolvedImg =\n    img ?? (ctx.pane.querySelector('.page-view img') as HTMLImageElement | null);\n  const zoom = ctx.zoomPct / PAGE_ZOOM_DEFAULT;\n  if (!(zoom > 0)) return baseUserPx;\n  const { pane } = ctx;\n  if (!resolvedImg?.naturalWidth || !resolvedImg.naturalHeight) {\n    return baseUserPx / zoom;\n  }\n\n  const { w: paneW, h: paneH } = paneContentSize(pane);\n  if (!(paneW > 0 && paneH > 0)) return baseUserPx / zoom;\n\n  const refFit = Math.min(\n    (paneW - PAGE_VIEW_BORDER_PX) / OVERLAY_REF_IMAGE_WIDTH,\n    (paneH - PAGE_VIEW_BORDER_PX) / OVERLAY_REF_IMAGE_HEIGHT\n  );\n  const fitScale = getCachedFitScale(resolvedImg, pane, ctx);\n  if (!(refFit > 0) || !(fitScale > 0)) return baseUserPx / zoom;\n\n  return (baseUserPx * refFit) / (fitScale * zoom);\n}\n\nexport function applyPageImageSize(\n  img: HTMLImageElement,\n  pane: HTMLElement,\n  ctx: OverlayCtx\n): boolean {\n  if (!img?.naturalWidth || !img.naturalHeight) return false;\n  const zoomPct = Math.max(PAGE_ZOOM_DEFAULT, ctx.zoomPct);\n  const fitScale = getCachedFitScale(img, pane, ctx);\n  const scale = fitScale * (zoomPct / PAGE_ZOOM_DEFAULT);\n  const w = Math.floor(img.naturalWidth * scale);\n  const h = Math.floor(img.naturalHeight * scale);\n  const nextW = `${w}px`;\n  const nextH = `${h}px`;\n  const unchanged = img.style.width === nextW && img.style.height === nextH;\n  if (!unchanged) {\n    img.style.width = nextW;\n    img.style.height = nextH;\n    img.style.maxWidth = 'none';\n    img.style.maxHeight = 'none';\n  }\n  img.dataset.layoutReady = '1';\n  return !unchanged;\n}\n\n// ---------------------------------------------------------------------------\n// Bounding box pixel rect\n// ---------------------------------------------------------------------------\n\nexport function boxPixelRect(b: BoundingBox, img: HTMLImageElement): PixelRect {\n  const x = (b.x0 / b.resW) * img.naturalWidth;\n  const y = (b.y0 / b.resH) * img.naturalHeight;\n  const w = ((b.x1 - b.x0) / b.resW) * img.naturalWidth;\n  const h = ((b.y1 - b.y0) / b.resH) * img.naturalHeight;\n  return { x, y, w, h, area: w * h };\n}\n\nfunction boxCenter(rect: PixelRect): { x: number; y: number } {\n  return { x: rect.x + rect.w / 2, y: rect.y + rect.h / 2 };\n}\n\n// ---------------------------------------------------------------------------\n// Overlay sort helpers\n// ---------------------------------------------------------------------------\n\nexport function sortedOverlayBoxes(\n  boxes: BoundingBox[],\n  selectedId: string | null\n): BoundingBox[] {\n  const layerPriority = (layer: string) =>\n    layer === 'background' ? 0 : layer === 'furniture' ? 1 : 2;\n  const kindPriority = (box: BoundingBox) => {\n    if (box.kind === 'text') return 0;\n    if (box.kind === 'list' || box.kind === 'table' || box.kind === 'index' || box.kind === 'tabular') return 2;\n    return 1;\n  };\n  return [...boxes].sort((a, b) => {\n    const byLayer = layerPriority(a.layer ?? 'body') - layerPriority(b.layer ?? 'body');\n    if (byLayer !== 0) return byLayer;\n    const byKind = kindPriority(a) - kindPriority(b);\n    if (byKind !== 0) return byKind;\n    if (selectedId) {\n      const aSelected = a.elementId === selectedId;\n      const bSelected = b.elementId === selectedId;\n      if (aSelected !== bSelected) return aSelected ? 1 : -1;\n    }\n    return 0;\n  });\n}\n\n// ---------------------------------------------------------------------------\n// Arrow marker template\n// ---------------------------------------------------------------------------\n\nexport function ensureArrowMarker(\n  defs: SVGDefsElement,\n  markerId: string,\n  opts: { size?: number; color?: string } = {}\n): void {\n  const size = opts.size ?? ARROW_STYLE_FIELD_DEFAULTS.head;\n  const color = opts.color || 'currentColor';\n  defs.querySelector(`#${markerId}`)?.remove();\n  render(\n    svg`<marker\n      id=${markerId}\n      viewBox=\"0 0 6 6\"\n      refX=\"6\"\n      refY=\"3\"\n      markerWidth=${size}\n      markerHeight=${size}\n      orient=\"auto\"\n    ><path d=\"M0,0 L6,3 L0,6 Z\" fill=${color}></path></marker>`,\n    defs\n  );\n}\n\n// ---------------------------------------------------------------------------\n// SVG template builders\n// ---------------------------------------------------------------------------\n\nfunction dashedLineAttrs(\n  start: { x: number; y: number },\n  end: { x: number; y: number }\n): { strokeDasharray: string; strokeDashoffset: string } {\n  const dash = 6;\n  const gap = 4;\n  const period = dash + gap;\n  const len = Math.hypot(end.x - start.x, end.y - start.y);\n  if (!len) return { strokeDasharray: '', strokeDashoffset: '' };\n  const offset = len % period;\n  return {\n    strokeDasharray: `${dash} ${gap}`,\n    strokeDashoffset: offset > 0.01 ? String(offset) : '',\n  };\n}\n\nfunction arrowMarkerTemplate(\n  markerId: string,\n  opts: { size?: number; color?: string } = {}\n): TemplateResult {\n  const size = opts.size ?? ARROW_STYLE_FIELD_DEFAULTS.head;\n  const color = opts.color || 'currentColor';\n  return svg`\n    <marker id=${markerId} viewBox=\"0 0 6 6\"\n      refX=\"6\" refY=\"3\"\n      markerWidth=${size} markerHeight=${size}\n      orient=\"auto\">\n      <path d=\"M0,0 L6,3 L0,6 Z\" fill=${color}></path>\n    </marker>`;\n}\n\n// ---------------------------------------------------------------------------\n// Overlay badge rendering\n// ---------------------------------------------------------------------------\n\nfunction overlayBadgeLayout(\n  svg: SVGSVGElement,\n  text: string | number,\n  fontSizeUser: number,\n  ctx: OverlayCtx\n): { width: number; height: number } {\n  const padXUser = overlayUserLength(OVERLAY_BADGE_PAD_X, ctx);\n  const padYUser = overlayUserLength(OVERLAY_BADGE_PAD_Y, ctx);\n  const probe = document.createElementNS('http://www.w3.org/2000/svg', 'text');\n  probe.setAttribute('class', 'overlay-badge-label');\n  probe.setAttribute('font-size', String(fontSizeUser));\n  probe.setAttribute('font-weight', '700');\n  probe.setAttribute('text-anchor', 'start');\n  probe.setAttribute('dominant-baseline', 'text-before-edge');\n  probe.setAttribute('visibility', 'hidden');\n  probe.textContent = String(text);\n  svg.appendChild(probe);\n\n  let width: number;\n  let height: number;\n  try {\n    const bbox = probe.getBBox();\n    width = bbox.width + padXUser * 2;\n    height = bbox.height + padYUser * 2;\n  } catch {\n    const label = String(text);\n    width = overlayUserLength(\n      label.length * OVERLAY_BADGE_FONT_SIZE * 0.55 + OVERLAY_BADGE_PAD_X * 2,\n      ctx\n    );\n    height = overlayUserLength(\n      OVERLAY_BADGE_FONT_SIZE * 1.1 + OVERLAY_BADGE_PAD_Y * 2,\n      ctx\n    );\n  }\n  probe.remove();\n  return { width, height };\n}\n\nfunction overlayBadgeTemplate(\n  svgEl: SVGSVGElement,\n  anchorX: number,\n  anchorY: number,\n  text: string | number,\n  extraClass: string,\n  elementId: string,\n  ctx: OverlayCtx\n): TemplateResult {\n  const fontSize = overlayUserLength(OVERLAY_BADGE_FONT_SIZE, ctx);\n  const { width, height } = overlayBadgeLayout(svgEl, text, fontSize, ctx);\n  const radius = overlayUserLength(OVERLAY_BADGE_RADIUS_SCREEN_PX, ctx);\n  return svg`\n    <g class=${`overlay-badge ${extraClass}`} data-element-id=${elementId}>\n      <rect class=\"overlay-badge-bg\"\n        x=${anchorX - width / 2} y=${anchorY - height / 2}\n        width=${width} height=${height}\n        rx=${radius} ry=${radius}></rect>\n      <text class=\"overlay-badge-label\"\n        x=${anchorX} y=${anchorY}\n        font-size=${fontSize}>${text}</text>\n    </g>`;\n}\n\n// ---------------------------------------------------------------------------\n// Link overlay templates\n// ---------------------------------------------------------------------------\n\nfunction overlayLinkTemplate(\n  img: HTMLImageElement,\n  link: CaptionLink | XrefLink,\n  opts: OverlayLinkOptions\n): TemplateResult {\n  const fromBox = (link as CaptionLink).captionBox ?? (link as XrefLink).fromBox;\n  const toBox = (link as CaptionLink).hostBox ?? (link as XrefLink).toBox;\n  const start = boxCenter(boxPixelRect(fromBox, img));\n  const end = boxCenter(boxPixelRect(toBox, img));\n  const fromId =\n    (link as CaptionLink).captionElementId ?? (link as XrefLink).fromElementId;\n  const toId = (link as CaptionLink).hostElementId ?? (link as XrefLink).toElementId;\n  return svg`\n    <line\n      class=${opts.linkClass}\n      x1=${start.x} y1=${start.y}\n      x2=${end.x} y2=${end.y}\n      marker-end=${`url(#${opts.markerId})`}\n      ${opts.fromIdAttr}=${fromId}\n      ${opts.toIdAttr}=${toId}\n    ></line>`;\n}\n\nfunction fragmentNavButtonTemplate(\n  x: number,\n  y: number,\n  size: number,\n  radius: number,\n  fontSize: number,\n  direction: string,\n  label: string,\n  enabled: boolean\n): TemplateResult {\n  const hintText = direction === 'prev' ? FRAGMENT_NAV_HINT_PREV : FRAGMENT_NAV_HINT_NEXT;\n  const cls = `fragment-nav-btn fragment-nav-btn-${direction}${enabled ? '' : ' fragment-nav-btn-disabled'}`;\n  return svg`\n    <g class=${cls} data-nav=${direction}\n      role=${enabled ? 'button' : ''}\n      aria-label=${enabled ? hintText : ''}\n    >\n      ${enabled ? svg`<title>${hintText}</title>` : ''}\n      <rect class=\"fragment-nav-btn-bg\"\n        x=${x} y=${y} width=${size} height=${size}\n        rx=${radius} ry=${radius}></rect>\n      <text class=\"fragment-nav-btn-label\"\n        x=${x + size / 2} y=${y + size / 2}\n        font-size=${fontSize}>${label}</text>\n    </g>`;\n}\n\n// ---------------------------------------------------------------------------\n// Full overlay render — called by both buildOverlay and syncOverlayBadges\n// ---------------------------------------------------------------------------\n\ninterface OverlayRenderParams {\n  img: HTMLImageElement;\n  boxes: BoundingBox[];\n  captionLinks?: CaptionLink[];\n  xrefLinks?: XrefLink[];\n  readingOrderSteps?: { order: number; box: BoundingBox; elementId: string }[];\n  fragmentLinks?: FragmentLink[];\n  fragmentNavItems?: FragmentNavItem[];\n  showAllBboxes: boolean;\n  showLayoutBadges: boolean;\n  showReadingOrder: boolean;\n  ctx: OverlayCtx;\n}\n\nfunction renderOverlaySvgContent(svgEl: SVGSVGElement, p: OverlayRenderParams): void {\n  const {\n    img,\n    boxes,\n    captionLinks = [],\n    xrefLinks = [],\n    readingOrderSteps = [],\n    fragmentLinks = [],\n    fragmentNavItems = [],\n    showAllBboxes,\n    showLayoutBadges,\n    showReadingOrder,\n    ctx,\n  } = p;\n\n  const markerOpts = (key: ArrowLayerKey) =>\n    ctx.arrowMarkerOptions ? ctx.arrowMarkerOptions(key) : {};\n\n  // --- Badges: computed after layout, requires getBBox probe on svgEl ---\n  const badges: TemplateResult[] = [];\n  if (img.naturalWidth) {\n    const fontSize = overlayUserLength(OVERLAY_BADGE_FONT_SIZE, ctx);\n    const badgeGap = overlayUserLength(2, ctx);\n    const readingOrderByElementId = new Map(\n      showAllBboxes && showReadingOrder\n        ? readingOrderSteps.map(s => [s.elementId, s])\n        : []\n    );\n    for (const b of sortedOverlayBoxes(boxes, ctx.selectedId)) {\n      const { x, y } = boxPixelRect(b, img);\n      let tagLayout = { width: 0 };\n      if (showAllBboxes && showLayoutBadges) {\n        tagLayout = overlayBadgeLayout(svgEl, b.tag, fontSize, ctx);\n        badges.push(overlayBadgeTemplate(svgEl, x, y, b.tag, `element-badge ${kindClassForTag(b.kind)}`, b.elementId, ctx));\n      }\n      const step = readingOrderByElementId.get(b.elementId);\n      if (step) {\n        const orderText = String(step.order);\n        const orderLayout = overlayBadgeLayout(svgEl, orderText, fontSize, ctx);\n        const orderAnchorX =\n          showAllBboxes && showLayoutBadges\n            ? x + tagLayout.width / 2 + badgeGap + orderLayout.width / 2\n            : x;\n        badges.push(overlayBadgeTemplate(svgEl, orderAnchorX, y, orderText, 'reading-order-badge', b.elementId, ctx));\n      }\n    }\n  }\n\n  // --- Fragment links ---\n  const fragmentLinkTemplates = fragmentLinks.map(link => {\n    const fromRect = boxPixelRect(link.fromBox, img);\n    let lineTmpl: TemplateResult;\n    let labelAt: { x: number; y: number };\n    if (link.toBox) {\n      const start = boxCenter(fromRect);\n      const end = boxCenter(boxPixelRect(link.toBox, img));\n      const { strokeDasharray, strokeDashoffset } = dashedLineAttrs(start, end);\n      lineTmpl = svg`<line class=\"fragment-link-path fragment-link-path-dashed\"\n        x1=${start.x} y1=${start.y} x2=${end.x} y2=${end.y}\n        marker-end=\"url(#fragment-arrowhead)\"\n        stroke-dasharray=${strokeDasharray}\n        stroke-dashoffset=${strokeDashoffset}></line>`;\n      labelAt = { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };\n    } else {\n      const inset = overlayUserLength(5, ctx);\n      const corner = link.targetCorner ?? 'br';\n      const imgW = img.naturalWidth;\n      const imgH = img.naturalHeight;\n      const cornerPoint =\n        corner === 'tl'\n          ? { x: Math.min(inset, imgW - inset), y: Math.min(inset, imgH - inset) }\n          : { x: Math.max(imgW - inset, inset), y: Math.max(imgH - inset, inset) };\n      const elementAnchor = boxCenter(fromRect);\n      const incoming = corner === 'tl';\n      const start = incoming ? cornerPoint : elementAnchor;\n      const end = incoming ? elementAnchor : cornerPoint;\n      const { strokeDasharray, strokeDashoffset } = dashedLineAttrs(start, end);\n      lineTmpl = svg`<line class=\"fragment-link-path fragment-link-path-dashed\"\n        x1=${start.x} y1=${start.y} x2=${end.x} y2=${end.y}\n        marker-end=\"url(#fragment-arrowhead)\"\n        stroke-dasharray=${strokeDasharray}\n        stroke-dashoffset=${strokeDashoffset}></line>`;\n      labelAt = { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };\n    }\n    return svg`\n      <g class=\"fragment-link\"\n        data-thread-id=${link.threadId}\n        data-fragment-from-id=${link.fromElementId}\n        data-fragment-to-id=${link.toElementId ?? ''}\n      >\n        ${lineTmpl}\n        <text class=\"fragment-link-label\"\n          x=${labelAt.x} y=${labelAt.y}\n          font-size=${overlayUserLength(OVERLAY_BADGE_FONT_SIZE, ctx)}\n        >${link.toBox ? FRAGMENT_LINK_LABEL_SAME_PAGE : FRAGMENT_LINK_LABEL_CROSS_PAGE}</text>\n      </g>`;\n  });\n\n  // --- Fragment nav buttons ---\n  const fragmentNavTemplates = fragmentNavItems.map(item => {\n    const btnSize = overlayUserLength(13 * 1.5, ctx);\n    const gap = overlayUserLength(2, ctx);\n    const inset = overlayUserLength(3, ctx);\n    const fontSize = overlayUserLength(10 * 1.5, ctx);\n    const radius = overlayUserLength(2 * 1.5, ctx);\n    const { x, y, w, h } = boxPixelRect(item.box, img);\n    const rowY = y + h - inset - btnSize;\n    const nextX = x + w - inset - btnSize;\n    const prevX = nextX - gap - btnSize;\n    return svg`\n      <g class=\"fragment-nav\" data-element-id=${item.elementId}>\n        ${fragmentNavButtonTemplate(prevX, rowY, btnSize, radius, fontSize, 'prev', '‹', item.hasPrev)}\n        ${fragmentNavButtonTemplate(nextX, rowY, btnSize, radius, fontSize, 'next', '›', item.hasNext)}\n      </g>`;\n  });\n\n  // --- Reading order lines ---\n  const readingOrderLines: TemplateResult[] = [];\n  for (let i = 0; i < readingOrderSteps.length - 1; i += 1) {\n    const start = boxCenter(boxPixelRect(readingOrderSteps[i]!.box, img));\n    const end = boxCenter(boxPixelRect(readingOrderSteps[i + 1]!.box, img));\n    readingOrderLines.push(svg`\n      <line class=\"reading-order-step\"\n        x1=${start.x} y1=${start.y} x2=${end.x} y2=${end.y}\n        marker-end=\"url(#reading-order-arrowhead)\"\n      ></line>`);\n  }\n\n  render(\n    svg`\n      <defs>\n        <pattern id=\"layer-hatch\" width=\"16\" height=\"16\"\n          patternUnits=\"userSpaceOnUse\" patternTransform=\"rotate(45 8 8)\">\n          <rect class=\"layer-hatch-stripe\" x=\"10\" y=\"-4\" width=\"6\" height=\"24\"></rect>\n        </pattern>\n        ${readingOrderSteps.length >= 2 ? arrowMarkerTemplate('reading-order-arrowhead', markerOpts('readingOrder')) : ''}\n        ${fragmentLinks.length ? arrowMarkerTemplate('fragment-arrowhead', markerOpts('fragment')) : ''}\n        ${captionLinks.length ? arrowMarkerTemplate('caption-arrowhead', markerOpts('caption')) : ''}\n        ${xrefLinks.length ? arrowMarkerTemplate('xref-arrowhead', markerOpts('xref')) : ''}\n      </defs>\n      ${captionLinks.map(link => overlayLinkTemplate(img, link, { markerId: 'caption-arrowhead', markerLayer: 'caption', linkClass: 'caption-link', fromIdAttr: 'data-caption-id', toIdAttr: 'data-host-id' }))}\n      ${xrefLinks.map(link => overlayLinkTemplate(img, link, { markerId: 'xref-arrowhead', markerLayer: 'xref', linkClass: 'xref-link', fromIdAttr: 'data-xref-from-id', toIdAttr: 'data-xref-to-id' }))}\n      ${fragmentLinkTemplates}\n      ${readingOrderLines}\n      ${sortedOverlayBoxes(boxes, ctx.selectedId).map(b => {\n        const { x, y, w, h } = boxPixelRect(b, img);\n        const cls = bboxClassForKind(b.kind);\n        const kindClass = kindClassForTag(b.kind);\n        const layerClass = layerClassForValue(b.layer ?? 'body');\n        return svg`<rect\n          class=${`bbox bbox-${cls} ${kindClass}${layerClass ? ` ${layerClass}` : ''}`}\n          x=${x} y=${y}\n          width=${Math.max(w, 1)} height=${Math.max(h, 1)}\n          data-element-id=${b.elementId}\n        ></rect>`;\n      })}\n      ${fragmentNavTemplates}\n      ${badges}\n    `,\n    svgEl\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Public API — kept stable for page-img-pane callers\n// ---------------------------------------------------------------------------\n\nexport function syncOverlayBadges(\n  img: HTMLImageElement,\n  svgEl: SVGSVGElement,\n  boxes: BoundingBox[],\n  readingOrderSteps: { order: number; box: BoundingBox; elementId: string }[],\n  showAllBboxes: boolean,\n  showLayoutBadges: boolean,\n  showReadingOrder: boolean,\n  ctx: OverlayCtx\n): void {\n  renderOverlaySvgContent(svgEl, {\n    img,\n    boxes,\n    readingOrderSteps,\n    showAllBboxes,\n    showLayoutBadges,\n    showReadingOrder,\n    ctx,\n  });\n}\n\nexport function buildOverlay(\n  img: HTMLImageElement,\n  boxes: BoundingBox[],\n  captionLinks: CaptionLink[] = [],\n  xrefLinks: XrefLink[] = [],\n  readingOrderSteps: { order: number; box: BoundingBox; elementId: string }[] = [],\n  fragmentLinks: FragmentLink[] = [],\n  fragmentNavItems: FragmentNavItem[] = [],\n  onSelectElement: (id: string) => void,\n  onNavigateFragment: (elementId: string, direction: string) => void,\n  onClearSelection: () => void,\n  getPagPanSuppressClick: () => boolean,\n  setPagPanSuppressClick: (v: boolean) => void,\n  ctx: OverlayCtx\n): SVGSVGElement {\n  const svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n  svgEl.classList.add('overlay');\n  svgEl.setAttribute('viewBox', `0 0 ${img.naturalWidth} ${img.naturalHeight}`);\n  svgEl.setAttribute('overflow', 'hidden');\n\n  renderOverlaySvgContent(svgEl, {\n    img,\n    boxes,\n    captionLinks,\n    xrefLinks,\n    readingOrderSteps,\n    fragmentLinks,\n    fragmentNavItems,\n    showAllBboxes: false,\n    showLayoutBadges: false,\n    showReadingOrder: false,\n    ctx,\n  });\n\n  svgEl.addEventListener('click', e => {\n    if (getPagPanSuppressClick()) {\n      setPagPanSuppressClick(false);\n      return;\n    }\n    const target = e.target as Element;\n    const navBtn = target.closest('.fragment-nav-btn:not(.fragment-nav-btn-disabled)');\n    if (navBtn) {\n      e.stopPropagation();\n      const navGroup = navBtn.closest('.fragment-nav');\n      const elementId = navGroup?.getAttribute('data-element-id');\n      const direction = navBtn.getAttribute('data-nav');\n      if (elementId && direction) onNavigateFragment(elementId, direction);\n      return;\n    }\n    const badge = target.closest('.overlay-badge[data-element-id]');\n    if (badge) {\n      const id = badge.getAttribute('data-element-id');\n      if (id) onSelectElement(id);\n      return;\n    }\n    const ctm = svgEl.getScreenCTM()?.inverse();\n    if (ctm) {\n      const pt = svgEl.createSVGPoint();\n      pt.x = (e as MouseEvent).clientX;\n      pt.y = (e as MouseEvent).clientY;\n      const { x, y } = pt.matrixTransform(ctm);\n      const hit = hitTestBoxes(boxes, img, x, y);\n      if (hit) onSelectElement(hit.elementId);\n      else onClearSelection();\n    }\n  });\n\n  svgEl.addEventListener('mousemove', e => {\n    const ctm = svgEl.getScreenCTM()?.inverse();\n    if (ctm) {\n      const pt = svgEl.createSVGPoint();\n      pt.x = (e as MouseEvent).clientX;\n      pt.y = (e as MouseEvent).clientY;\n      const { x, y } = pt.matrixTransform(ctm);\n      svgEl.style.cursor = hitTestBoxes(boxes, img, x, y) ? 'pointer' : '';\n    }\n  });\n  svgEl.addEventListener('mouseleave', () => {\n    svgEl.style.cursor = '';\n  });\n\n  return svgEl;\n}\n\nexport function hitTestBoxes(\n  boxes: BoundingBox[],\n  img: HTMLImageElement,\n  x: number,\n  y: number\n): BoundingBox | null {\n  let best: BoundingBox | null = null;\n  let bestArea = Infinity;\n  for (const b of boxes) {\n    const { x: bx, y: by, w, h, area } = boxPixelRect(b, img);\n    if (x >= bx && x <= bx + w && y >= by && y <= by + h && area < bestArea) {\n      best = b;\n      bestArea = area;\n    }\n  }\n  return best;\n}\n","/** <doclang-page-img-pane> — page image with zoom and overlay settings panel */\n\nimport { html, nothing } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { unsafeCSS } from 'lit';\nimport { ref, createRef } from 'lit/directives/ref.js';\nimport type { Ref } from 'lit/directives/ref.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { DoclangPageElement } from '../base/page-element';\nimport { PageController } from '../base/page-controller';\nimport styles from './page-img-pane.css?inline';\nimport '../settings-panel/settings-panel';\nimport type { DoclangSettingsPanel } from '../settings-panel/settings-panel';\nimport {\n  applyPageImageSize,\n  buildOverlay,\n  syncOverlayBadges,\n  PAGE_ZOOM_DEFAULT,\n  ARROW_LAYERS,\n  ARROW_STYLE_FIELD_DEFAULTS,\n  ARROW_DASH_VALUES,\n  type ArrowLayerKey,\n  type ArrowStyleConfig,\n  type OverlayCtx,\n  type PageLayoutCache,\n} from './overlay';\nimport {\n  assignElementIds,\n  invertElementIds,\n  collectBoundingBoxes,\n  collectCaptionLinks,\n  collectXrefLinks,\n  collectFragmentLinks,\n  collectFragmentNavItems,\n  collectReadingOrderSteps,\n} from '../../doclang/document';\nimport {\n  isPictureContentElement,\n  isTableContentElement,\n  escapeHtml,\n  elementLabel,\n  elementHeadLocations,\n  firstHeadChild,\n  locationResolution,\n} from '../../doclang/dom';\n\ninterface PagePanDrag {\n  pointerId: number;\n  startX: number;\n  startY: number;\n  scrollLeft: number;\n  scrollTop: number;\n  moved: boolean;\n}\n\ninterface HeadInfo {\n  key: string;\n  value: string;\n  isDefault: boolean;\n}\n\nconst PAGE_PAN_DRAG_THRESHOLD = 5;\nconst NO_IMAGE = '(No page image available.)';\nconst OVERLAY_PREFS_STORAGE_KEY = 'doclang-viewer-overlay-prefs';\nconst ARROW_STYLE_STORAGE_KEY = 'doclang-viewer-arrow-styles';\n\nexport interface OverlaySettings {\n  showAllBboxes: boolean;\n  showLayoutBadges: boolean;\n  showReadingOrder: boolean;\n  readingOrderArrows: boolean;\n  readingOrderGlobal: boolean;\n  showPictureContents: boolean;\n  showTableContents: boolean;\n  showFragmentLinks: boolean;\n  showXrefLinks: boolean;\n  showCaptionLinks: boolean;\n}\n\nconst DEFAULT_OVERLAY_SETTINGS: OverlaySettings = {\n  showAllBboxes: true,\n  showLayoutBadges: true,\n  showReadingOrder: false,\n  readingOrderArrows: true,\n  readingOrderGlobal: false,\n  showPictureContents: false,\n  showTableContents: false,\n  showFragmentLinks: false,\n  showXrefLinks: false,\n  showCaptionLinks: false,\n};\n\nfunction toHexColor(value: string | undefined): string {\n  const v = (value || '').trim();\n  if (/^#[0-9a-fA-F]{6}$/.test(v)) return v.toLowerCase();\n  if (/^#[0-9a-fA-F]{3}$/.test(v)) {\n    return `#${v\n      .slice(1)\n      .split('')\n      .map(c => c + c)\n      .join('')\n      .toLowerCase()}`;\n  }\n  const m = v.match(/^rgba?\\(\\s*([\\d.]+)[\\s,]+([\\d.]+)[\\s,]+([\\d.]+)/i);\n  if (m) {\n    const hex = m\n      .slice(1, 4)\n      .map(n =>\n        Math.max(0, Math.min(255, Math.round(parseFloat(n))))\n          .toString(16)\n          .padStart(2, '0')\n      )\n      .join('');\n    return `#${hex}`;\n  }\n  return '#000000';\n}\n\n@customElement('doclang-page-img-pane')\nexport class DoclangPageImgPane extends DoclangPageElement {\n  static override styles = unsafeCSS(styles);\n\n  // Imperative body ref — page image + SVG overlay live here\n  private _bodyRef: Ref<HTMLElement> = createRef();\n  private _settingsPanelRef: Ref<DoclangSettingsPanel> = createRef();\n\n  // --- overlay settings state ---\n  private _settingsOpen = false;\n  private _visible = false;\n  private _zoomPct = PAGE_ZOOM_DEFAULT;\n  private _opts: OverlaySettings = { ...DEFAULT_OVERLAY_SETTINGS };\n  private _arrowStyles: Record<string, ArrowStyleConfig> = {};\n  private _expandedArrowFields: Set<ArrowLayerKey> = new Set();\n\n  private _pageController = new PageController(this, () => this.scrollPane);\n\n  // --- viewport mechanics state ---\n  private _panDrag: PagePanDrag | null = null;\n  private _suppressClick = false;\n  private _layoutCache: PageLayoutCache | null = null;\n  private _layoutFrame = 0;\n  private _resizeObserver: ResizeObserver | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.classList.add('pane', 'pane-page-view');\n    this._loadOverlayPrefs();\n    this._loadArrowStyles();\n    this._applyArrowStyleVars();\n    this.addEventListener(\n      'doclang-panning-change',\n      this._onPanningChange as EventListener\n    );\n    this.addEventListener('mousemove', this._onMousemove as EventListener);\n    this.addEventListener('mouseleave', this._onMouseleave);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(\n      'doclang-panning-change',\n      this._onPanningChange as EventListener\n    );\n    this.removeEventListener('mousemove', this._onMousemove as EventListener);\n    this.removeEventListener('mouseleave', this._onMouseleave);\n    this._resizeObserver?.disconnect();\n    this._resizeObserver = null;\n  }\n\n  // ---------------------------------------------------------------------------\n  // Render — header + settings panel (Lit); body (imperative via ref)\n  // ---------------------------------------------------------------------------\n\n  override render() {\n    const layoutEnabled = this._opts.showAllBboxes;\n    const readingOrderEnabled = layoutEnabled && this._opts.showReadingOrder;\n\n    return html`\n      <div class=\"pane-header\">\n        <span class=\"pane-header-title\">Original page</span>\n        <div class=\"pane-page-controls\">\n          ${\n            this._visible\n              ? html`\n                  <div class=\"page-zoom-control\">\n                    <label class=\"page-zoom-control-label\">\n                      <span aria-hidden=\"true\">Zoom</span>\n                      <input\n                        type=\"range\"\n                        class=\"zoom-input\"\n                        min=\"100\"\n                        max=\"300\"\n                        step=\"10\"\n                        .value=${String(this._zoomPct)}\n                        aria-valuemin=\"100\"\n                        aria-valuemax=\"300\"\n                        aria-valuenow=${this._zoomPct}\n                        aria-label=\"Page zoom\"\n                        @input=${this._onZoomInput}\n                      />\n                    </label>\n                    <button\n                      type=\"button\"\n                      class=\"page-zoom-reset\"\n                      title=\"Reset zoom\"\n                      aria-label=\"Reset zoom\"\n                      ?disabled=${this._zoomPct === PAGE_ZOOM_DEFAULT}\n                      @click=${() => {\n                        if (this._zoomPct !== PAGE_ZOOM_DEFAULT) this.resetZoom();\n                      }}\n                    >\n                      ${this._zoomPct}%\n                    </button>\n                  </div>\n                  <button\n                    type=\"button\"\n                    class=\"pane-settings-toggle\"\n                    aria-expanded=${this._settingsOpen ? 'true' : 'false'}\n                    @click=${() => this.toggleSettings()}\n                  >\n                    Overlays\n                  </button>\n                `\n              : nothing\n          }\n        </div>\n      </div>\n      <div class=\"pane-page-layout\">\n        <div\n          class=\"pane-body\"\n          id=\"page-img-pane\"\n          tabindex=${this._visible ? '0' : '-1'}\n          ${ref(this._bodyRef)}\n        ></div>\n        ${this._visible\n          ? html`\n              <doclang-settings-panel\n                ${ref(this._settingsPanelRef)}\n                label=\"Overlays\"\n                @doclang-settings-close=${() => this._applySettingsOpen(false)}\n              >\n                <label class=\"settings-option settings-option-primary\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"cb-all-bboxes\"\n                    .checked=${this._opts.showAllBboxes}\n                    @change=${(e: Event) =>\n                      this._onOptChange(\n                        'showAllBboxes',\n                        (e.target as HTMLInputElement).checked\n                      )}\n                  />\n                  <span>Layout</span>\n                </label>\n                <div class=\"settings-subgroup\">\n                  <label\n                    class=${classMap({\n                      'settings-option': true,\n                      'settings-option-sub': true,\n                      'settings-option-disabled': !layoutEnabled,\n                    })}\n                  >\n                    <input\n                      type=\"checkbox\"\n                      class=\"cb-reading-order\"\n                      .checked=${this._opts.showReadingOrder}\n                      ?disabled=${!layoutEnabled}\n                      @change=${(e: Event) =>\n                        this._onOptChange(\n                          'showReadingOrder',\n                          (e.target as HTMLInputElement).checked\n                        )}\n                    />\n                    <span>Reading order</span>\n                  </label>\n                  <div class=\"settings-subgroup settings-reading-order-group\">\n                    <div\n                      class=${classMap({\n                        'arrow-layer-row': true,\n                        'is-disabled': !readingOrderEnabled,\n                      })}\n                    >\n                      <label\n                        class=${classMap({\n                          'settings-option': true,\n                          'settings-option-sub': true,\n                          'settings-option-nested': true,\n                          'settings-option-disabled': !readingOrderEnabled,\n                        })}\n                      >\n                        <input\n                          type=\"checkbox\"\n                          class=\"cb-reading-order-arrows\"\n                          .checked=${this._opts.readingOrderArrows}\n                          ?disabled=${!readingOrderEnabled}\n                          @change=${(e: Event) =>\n                            this._onOptChange(\n                              'readingOrderArrows',\n                              (e.target as HTMLInputElement).checked\n                            )}\n                        />\n                        <span>Arrows</span>\n                      </label>\n                      <button\n                        type=\"button\"\n                        class=\"arrow-style-btn\"\n                        aria-expanded=${String(\n                          this._expandedArrowFields.has('readingOrder') &&\n                            readingOrderEnabled\n                        )}\n                        aria-label=\"Reading-order arrow style\"\n                        title=\"Arrow style\"\n                        @click=${() => this._toggleArrowStyleFields('readingOrder')}\n                      ></button>\n                    </div>\n                    ${this._renderArrowStyleFields('readingOrder', readingOrderEnabled)}\n                    <label\n                      class=${classMap({\n                        'settings-option': true,\n                        'settings-option-sub': true,\n                        'settings-option-nested': true,\n                        'settings-option-disabled': !readingOrderEnabled,\n                      })}\n                    >\n                      <input\n                        type=\"checkbox\"\n                        class=\"cb-reading-order-global\"\n                        .checked=${this._opts.readingOrderGlobal}\n                        ?disabled=${!readingOrderEnabled}\n                        @change=${(e: Event) =>\n                          this._onOptChange(\n                            'readingOrderGlobal',\n                            (e.target as HTMLInputElement).checked\n                          )}\n                      />\n                      <span>Global numbering</span>\n                    </label>\n                  </div>\n                  <label\n                    class=${classMap({\n                      'settings-option': true,\n                      'settings-option-sub': true,\n                      'settings-option-disabled': !layoutEnabled,\n                    })}\n                  >\n                    <input\n                      type=\"checkbox\"\n                      class=\"cb-picture-contents\"\n                      .checked=${this._opts.showPictureContents}\n                      ?disabled=${!layoutEnabled}\n                      @change=${(e: Event) =>\n                        this._onOptChange(\n                          'showPictureContents',\n                          (e.target as HTMLInputElement).checked\n                        )}\n                    />\n                    <span>Picture contents</span>\n                  </label>\n                  <label\n                    class=${classMap({\n                      'settings-option': true,\n                      'settings-option-sub': true,\n                      'settings-option-disabled': !layoutEnabled,\n                    })}\n                  >\n                    <input\n                      type=\"checkbox\"\n                      class=\"cb-table-contents\"\n                      .checked=${this._opts.showTableContents}\n                      ?disabled=${!layoutEnabled}\n                      @change=${(e: Event) =>\n                        this._onOptChange(\n                          'showTableContents',\n                          (e.target as HTMLInputElement).checked\n                        )}\n                    />\n                    <span>Table contents</span>\n                  </label>\n\n                  <div\n                    class=${classMap({\n                      'arrow-layer-row': true,\n                      'is-disabled': !layoutEnabled,\n                    })}\n                  >\n                    <label\n                      class=${classMap({\n                        'settings-option': true,\n                        'settings-option-sub': true,\n                        'settings-option-disabled': !layoutEnabled,\n                      })}\n                    >\n                      <input\n                        type=\"checkbox\"\n                        class=\"cb-fragment-links\"\n                        .checked=${this._opts.showFragmentLinks}\n                        ?disabled=${!layoutEnabled}\n                        @change=${(e: Event) =>\n                          this._onOptChange(\n                            'showFragmentLinks',\n                            (e.target as HTMLInputElement).checked\n                          )}\n                      />\n                      <span>Fragments</span>\n                    </label>\n                    <button\n                      type=\"button\"\n                      class=\"arrow-style-btn\"\n                      aria-expanded=${String(\n                        this._expandedArrowFields.has('fragment') && layoutEnabled\n                      )}\n                      aria-label=\"Fragment arrow style\"\n                      title=\"Arrow style\"\n                      @click=${() => this._toggleArrowStyleFields('fragment')}\n                    ></button>\n                  </div>\n                  ${this._renderArrowStyleFields('fragment', layoutEnabled)}\n\n                  <div\n                    class=${classMap({\n                      'arrow-layer-row': true,\n                      'is-disabled': !layoutEnabled,\n                    })}\n                  >\n                    <label\n                      class=${classMap({\n                        'settings-option': true,\n                        'settings-option-sub': true,\n                        'settings-option-disabled': !layoutEnabled,\n                      })}\n                    >\n                      <input\n                        type=\"checkbox\"\n                        class=\"cb-xref-links\"\n                        .checked=${this._opts.showXrefLinks}\n                        ?disabled=${!layoutEnabled}\n                        @change=${(e: Event) =>\n                          this._onOptChange(\n                            'showXrefLinks',\n                            (e.target as HTMLInputElement).checked\n                          )}\n                      />\n                      <span title=\"Cross-references\">Cross-references</span>\n                    </label>\n                    <button\n                      type=\"button\"\n                      class=\"arrow-style-btn\"\n                      aria-expanded=${String(\n                        this._expandedArrowFields.has('xref') && layoutEnabled\n                      )}\n                      aria-label=\"Cross-reference arrow style\"\n                      title=\"Arrow style\"\n                      @click=${() => this._toggleArrowStyleFields('xref')}\n                    ></button>\n                  </div>\n                  ${this._renderArrowStyleFields('xref', layoutEnabled)}\n\n                  <div\n                    class=${classMap({\n                      'arrow-layer-row': true,\n                      'is-disabled': !layoutEnabled,\n                    })}\n                  >\n                    <label\n                      class=${classMap({\n                        'settings-option': true,\n                        'settings-option-sub': true,\n                        'settings-option-disabled': !layoutEnabled,\n                      })}\n                    >\n                      <input\n                        type=\"checkbox\"\n                        class=\"cb-caption-links\"\n                        .checked=${this._opts.showCaptionLinks}\n                        ?disabled=${!layoutEnabled}\n                        @change=${(e: Event) =>\n                          this._onOptChange(\n                            'showCaptionLinks',\n                            (e.target as HTMLInputElement).checked\n                          )}\n                      />\n                      <span>Captions</span>\n                    </label>\n                    <button\n                      type=\"button\"\n                      class=\"arrow-style-btn\"\n                      aria-expanded=${String(\n                        this._expandedArrowFields.has('caption') && layoutEnabled\n                      )}\n                      aria-label=\"Caption arrow style\"\n                      title=\"Arrow style\"\n                      @click=${() => this._toggleArrowStyleFields('caption')}\n                    ></button>\n                  </div>\n                  ${this._renderArrowStyleFields('caption', layoutEnabled)}\n\n                  <label\n                    class=${classMap({\n                      'settings-option': true,\n                      'settings-option-sub': true,\n                      'settings-option-disabled': !layoutEnabled,\n                    })}\n                  >\n                    <input\n                      type=\"checkbox\"\n                      class=\"cb-layout-badges\"\n                      .checked=${this._opts.showLayoutBadges}\n                      ?disabled=${!layoutEnabled}\n                      @change=${(e: Event) =>\n                        this._onOptChange(\n                          'showLayoutBadges',\n                          (e.target as HTMLInputElement).checked\n                        )}\n                    />\n                    <span>Badges</span>\n                  </label>\n                </div>\n\n                <div class=\"settings-divider\" role=\"separator\"></div>\n                <button\n                  type=\"button\"\n                  class=\"overlays-reset\"\n                  @click=${this._resetAllOverlaySettings}\n                >\n                  Reset all\n                </button>\n              </doclang-settings-panel>\n            `\n          : nothing}\n      </div>\n      <div\n        id=\"page-view-hint\"\n        popover=\"manual\"\n        role=\"tooltip\"\n        class=\"page-view-hint\"\n      ></div>\n    `;\n  }\n\n  // Wire pan events on the body element once it enters the DOM\n  override firstUpdated(): void {\n    const body = this._bodyRef.value;\n    if (body) this._wirePanEvents(body);\n  }\n\n  // ---------------------------------------------------------------------------\n  // Public getters\n  // ---------------------------------------------------------------------------\n\n  get zoomPercent(): number {\n    return this._zoomPct;\n  }\n\n  get overlaySettings(): Readonly<OverlaySettings> {\n    return this._opts;\n  }\n\n  /** The scrollable viewport pane (page-view-port div, or body if absent). */\n  get scrollPane(): HTMLElement | null {\n    return this._scrollPane();\n  }\n\n  // ---------------------------------------------------------------------------\n  // Visibility / layout\n  // ---------------------------------------------------------------------------\n\n  setVisible(visible: boolean): void {\n    this._visible = visible;\n    this.hidden = !visible;\n    this.requestUpdate();\n  }\n\n  /**\n   * Recalculate image size and re-sync overlay badge positions.\n   * Also ensures the ResizeObserver is attached (idempotent).\n   */\n  refreshLayout(): void {\n    const body = this._bodyRef.value;\n    if (!body) return;\n    if (!this._resizeObserver) {\n      this._resizeObserver = new ResizeObserver(() => this.refreshLayout());\n      this._resizeObserver.observe(body);\n    }\n    cancelAnimationFrame(this._layoutFrame);\n    this._layoutFrame = requestAnimationFrame(() => {\n      this._layoutFrame = 0;\n      const img = body.querySelector('.page-view img') as HTMLImageElement | null;\n      if (img?.naturalWidth) {\n        applyPageImageSize(img, body, this._overlayCtx());\n        this._updatePanCursor();\n        this._syncOverlayBadgesForImg(img);\n        this.dispatchEvent(\n          new CustomEvent('doclang-layout-refresh', { bubbles: true, composed: true })\n        );\n      }\n    });\n  }\n\n  // ---------------------------------------------------------------------------\n  // Zoom\n  // ---------------------------------------------------------------------------\n\n  activateZoom(pct: number): void {\n    this._zoomPct = pct;\n    this._layoutCache = null;\n    this.requestUpdate();\n    this._resetScroll();\n  }\n\n  resetZoom(): void {\n    this._zoomPct = PAGE_ZOOM_DEFAULT;\n    this._layoutCache = null;\n    this.requestUpdate();\n    this._resetScroll();\n    this.refreshLayout();\n  }\n\n  // ---------------------------------------------------------------------------\n  // Settings panel\n  // ---------------------------------------------------------------------------\n\n  toggleSettings(): void {\n    this._applySettingsOpen(!this._settingsOpen);\n  }\n\n  private _applySettingsOpen(open: boolean): void {\n    this._settingsOpen = open;\n    this._settingsPanelRef.value?.setOpen(open);\n    this.requestUpdate();\n  }\n\n  // ---------------------------------------------------------------------------\n  // Selection\n  // ---------------------------------------------------------------------------\n\n  protected override _applySelection(): void {\n    const body = this._bodyRef.value;\n    if (!body) return;\n    for (const el of body.querySelectorAll('.bbox.selected, .overlay-badge.selected')) {\n      el.classList.remove('selected');\n    }\n    if (this.selected && this._docState?.hasPageView) {\n      for (const el of body.querySelectorAll(\n        `[data-element-id=\"${this.selected}\"]`\n      )) {\n        el.classList.add('selected');\n      }\n    }\n    const img = body.querySelector('.page-view img') as HTMLImageElement | null;\n    if (img) this._syncOverlayBadgesForImg(img);\n    this._applyBboxVisibility();\n  }\n\n  // ---------------------------------------------------------------------------\n  // Document rendering\n  // ---------------------------------------------------------------------------\n\n  protected override _renderDocument(): void {\n    const body = this._bodyRef.value;\n    if (!body) {\n      this.requestUpdate();\n      this.updateComplete.then(() => this._renderDocument());\n      return;\n    }\n    const state = this._docState;\n    body.innerHTML = '';\n    this._layoutCache = null;\n    this.selected = null;\n    this._peerIds = new Set();\n\n    if (!state?.hasPageView) return;\n\n    const imageUrl = state.pageImages.get(this.page);\n    if (!imageUrl) {\n      body.innerHTML = `<div class=\"placeholder\">${NO_IMAGE}</div>`;\n      return;\n    }\n\n    const port = document.createElement('div');\n    port.className = 'page-view-port';\n    const wrap = document.createElement('div');\n    wrap.className = 'page-view';\n    const img = document.createElement('img');\n    img.alt = `Page ${this.page}`;\n\n    const pageNum = this.page;\n    const onImageReady = (): void => {\n      if (img.dataset.layoutGeneration === String(pageNum)) return;\n      img.dataset.layoutGeneration = String(pageNum);\n      applyPageImageSize(img, body, this._overlayCtx());\n\n      const segment = state.segments[pageNum - 1] ?? [];\n      const elementIds = assignElementIds(segment);\n      state.elementIds = elementIds;\n      state.idToElement = invertElementIds(elementIds);\n\n      const boxes = collectBoundingBoxes(segment, state.defaultResolution, elementIds);\n      const existing = wrap.querySelector('svg.overlay');\n      if (existing) existing.remove();\n      const readingOrderSteps = collectReadingOrderSteps(\n        segment,\n        elementIds,\n        boxes,\n        state.readingOrder,\n        this._opts.readingOrderGlobal,\n        state.readingOrderDisplayNumbers\n      );\n      if (boxes.length) {\n        wrap.appendChild(\n          buildOverlay(\n            img,\n            boxes,\n            collectCaptionLinks(segment, elementIds, boxes),\n            collectXrefLinks(segment, elementIds, boxes),\n            readingOrderSteps,\n            collectFragmentLinks(\n              segment,\n              elementIds,\n              boxes,\n              pageNum,\n              state.threadPagesById\n            ),\n            collectFragmentNavItems(\n              segment,\n              elementIds,\n              boxes,\n              state.threadNavByElement\n            ),\n            id =>\n              this.dispatchEvent(\n                new CustomEvent('doclang-element-select', {\n                  bubbles: true,\n                  composed: true,\n                  detail: { id },\n                })\n              ),\n            (elementId, direction) =>\n              this.dispatchEvent(\n                new CustomEvent('doclang-navigate-thread', {\n                  bubbles: true,\n                  composed: true,\n                  detail: { elementId, direction },\n                })\n              ),\n            () =>\n              this.dispatchEvent(\n                new CustomEvent('doclang-clear-selection', {\n                  bubbles: true,\n                  composed: true,\n                })\n              ),\n            () => this._suppressClick,\n            v => {\n              this._suppressClick = v;\n            },\n            this._overlayCtx()\n          )\n        );\n      }\n\n      this._syncOverlayBadgesForImg(img);\n      this._applyBboxVisibility();\n\n      const pending = state.pendingSelectElement;\n      if (pending) {\n        state.pendingSelectElement = null;\n        const id = this._findElementIdOnPage(pending, elementIds);\n        if (id)\n          this.dispatchEvent(\n            new CustomEvent('doclang-element-select', {\n              bubbles: true,\n              composed: true,\n              detail: { id },\n            })\n          );\n      }\n    };\n\n    img.addEventListener('load', onImageReady, { once: true });\n    wrap.appendChild(img);\n    port.appendChild(wrap);\n    body.appendChild(port);\n    img.src = imageUrl;\n    if (img.complete) onImageReady();\n\n    this.refreshLayout();\n  }\n\n  protected override _clearDocument(): void {\n    const body = this._bodyRef.value;\n    if (body) body.innerHTML = '';\n    this._layoutCache = null;\n  }\n\n  // ---------------------------------------------------------------------------\n  // Private helpers — overlay visibility\n  // ---------------------------------------------------------------------------\n\n  private _overlayCtx(): OverlayCtx {\n    const body = this._bodyRef.value!;\n    return {\n      zoomPct: this._zoomPct,\n      pane: body,\n      layoutCache: this._layoutCache,\n      setLayoutCache: c => {\n        this._layoutCache = c;\n      },\n      selectedId: this.selected,\n      arrowMarkerOptions: (layerKey: ArrowLayerKey) => this._arrowMarkerOptions(layerKey),\n    };\n  }\n\n  private _syncOverlayBadgesForImg(img: HTMLImageElement): void {\n    const svg = img.parentElement?.querySelector('svg.overlay') as SVGSVGElement | null;\n    const state = this._docState;\n    if (!svg || !state) return;\n    const pageNum = this.page;\n    const segment = state.segments[pageNum - 1] ?? [];\n    const boxes = collectBoundingBoxes(segment, state.defaultResolution, state.elementIds);\n    const readingOrderSteps = collectReadingOrderSteps(\n      segment,\n      state.elementIds,\n      boxes,\n      state.readingOrder,\n      this._opts.readingOrderGlobal,\n      state.readingOrderDisplayNumbers\n    );\n    const { showAllBboxes, showLayoutBadges, showReadingOrder } = this._opts;\n    syncOverlayBadges(\n      img,\n      svg,\n      boxes,\n      readingOrderSteps,\n      showAllBboxes,\n      showLayoutBadges,\n      showReadingOrder,\n      this._overlayCtx()\n    );\n  }\n\n  private _isContentsOptionHidden(elementId: string, clickVisible: boolean): boolean {\n    if (clickVisible) return false;\n    const xmlEl = this._docState?.idToElement?.get(elementId) ?? null;\n    if (!this._opts.showPictureContents && isPictureContentElement(xmlEl)) return true;\n    if (!this._opts.showTableContents && isTableContentElement(xmlEl)) return true;\n    return false;\n  }\n\n  private _isFragmentLinkRelevant(linkEl: Element): boolean {\n    const fromId = linkEl.getAttribute('data-fragment-from-id');\n    const toId = linkEl.getAttribute('data-fragment-to-id');\n    if (fromId && this._peerIds.has(fromId)) return true;\n    if (toId && this._peerIds.has(toId)) return true;\n    return false;\n  }\n\n  private _applyBboxVisibility(): void {\n    const body = this._bodyRef.value;\n    if (!body || !this._docState?.hasPageView) return;\n    const {\n      showAllBboxes,\n      showLayoutBadges,\n      showCaptionLinks,\n      showXrefLinks,\n      showFragmentLinks,\n      showReadingOrder,\n      readingOrderArrows,\n    } = this._opts;\n    const selectedId = this.selected;\n    const peerIds = this._peerIds;\n\n    for (const el of body.querySelectorAll('.bbox')) {\n      el.classList.remove('related');\n      const elementId = el.getAttribute('data-element-id') ?? '';\n      const clickVisible = elementId === selectedId || peerIds.has(elementId);\n      if (showAllBboxes) {\n        if (this._isContentsOptionHidden(elementId, clickVisible)) {\n          el.classList.add('bbox-hidden');\n        } else {\n          el.classList.remove('bbox-hidden');\n          if (peerIds.has(elementId)) el.classList.add('related');\n        }\n        continue;\n      }\n      if (elementId === selectedId) {\n        el.classList.remove('bbox-hidden');\n      } else if (peerIds.has(elementId)) {\n        el.classList.remove('bbox-hidden');\n        el.classList.add('related');\n      } else {\n        el.classList.add('bbox-hidden');\n      }\n    }\n\n    for (const el of body.querySelectorAll('.element-badge')) {\n      const elementId = el.getAttribute('data-element-id') ?? '';\n      const clickVisible = elementId === selectedId || peerIds.has(elementId);\n      if (!showAllBboxes || !showLayoutBadges) {\n        el.classList.add('bbox-hidden');\n        continue;\n      }\n      if (this._isContentsOptionHidden(elementId, clickVisible))\n        el.classList.add('bbox-hidden');\n      else el.classList.remove('bbox-hidden');\n    }\n\n    for (const el of body.querySelectorAll('.caption-link')) {\n      el.classList.toggle('bbox-hidden', !showAllBboxes || !showCaptionLinks);\n    }\n    for (const el of body.querySelectorAll('.xref-link')) {\n      el.classList.toggle('bbox-hidden', !showAllBboxes || !showXrefLinks);\n    }\n    for (const el of body.querySelectorAll('.fragment-link')) {\n      const clickVisible = Boolean(selectedId && this._isFragmentLinkRelevant(el));\n      el.classList.toggle(\n        'bbox-hidden',\n        !(clickVisible || (showAllBboxes && showFragmentLinks))\n      );\n    }\n    for (const el of body.querySelectorAll('.fragment-nav')) {\n      const elementId = el.getAttribute('data-element-id') ?? '';\n      const clickVisible = elementId === selectedId || peerIds.has(elementId);\n      el.classList.toggle(\n        'bbox-hidden',\n        !(clickVisible || (showAllBboxes && showFragmentLinks))\n      );\n    }\n    for (const el of body.querySelectorAll('.reading-order-badge')) {\n      const elementId = el.getAttribute('data-element-id') ?? '';\n      const clickVisible = elementId === selectedId || peerIds.has(elementId);\n      if (!showAllBboxes || !showReadingOrder) {\n        el.classList.add('bbox-hidden');\n        continue;\n      }\n      const xmlEl = this._docState?.idToElement?.get(elementId) ?? null;\n      if (\n        isPictureContentElement(xmlEl) ||\n        isTableContentElement(xmlEl) ||\n        this._isContentsOptionHidden(elementId, clickVisible)\n      ) {\n        el.classList.add('bbox-hidden');\n        continue;\n      }\n      el.classList.remove('bbox-hidden');\n    }\n    for (const el of body.querySelectorAll('.reading-order-step')) {\n      el.classList.toggle(\n        'bbox-hidden',\n        !showAllBboxes || !showReadingOrder || !readingOrderArrows\n      );\n    }\n  }\n\n  private _findElementIdOnPage(\n    el: Element,\n    elementIds: Map<Element, string>\n  ): string | null {\n    return elementIds.get(el) ?? null;\n  }\n\n  // ---------------------------------------------------------------------------\n  // Private helpers — pan / scroll / cursor\n  // ---------------------------------------------------------------------------\n\n  private _scrollPane(): HTMLElement | null {\n    const body = this._bodyRef.value;\n    if (!body) return null;\n    return (body.querySelector('.page-view-port') as HTMLElement | null) ?? body;\n  }\n\n  private _isScrollable(): boolean {\n    const pane = this._scrollPane();\n    if (!pane) return false;\n    return pane.scrollWidth > pane.clientWidth || pane.scrollHeight > pane.clientHeight;\n  }\n\n  private _resetScroll(): void {\n    const port = this._scrollPane();\n    if (port) {\n      port.scrollLeft = 0;\n      port.scrollTop = 0;\n    }\n  }\n\n  private _updatePanCursor(): void {\n    const body = this._bodyRef.value;\n    if (body) body.classList.toggle('can-pan', this._isScrollable() && !this._panDrag);\n  }\n\n  private _onOptChange(key: keyof OverlaySettings, value: boolean): void {\n    (this._opts as unknown as Record<string, boolean>)[key] = value;\n    this._persistOverlayPrefs();\n    // Re-render page if global numbering changed (affects step labels)\n    if (key === 'readingOrderGlobal' && this._docState) {\n      this._renderDocument();\n    }\n    const body = this._bodyRef.value;\n    const img = body?.querySelector('.page-view img') as HTMLImageElement | null;\n    if (img) this._syncOverlayBadgesForImg(img);\n    this._applyBboxVisibility();\n    this._emitOverlayChange();\n    this.requestUpdate();\n  }\n\n  // ---------------------------------------------------------------------------\n  // Arrow styling & overlay preferences persistence\n  // ---------------------------------------------------------------------------\n\n  private _loadOverlayPrefs(): void {\n    try {\n      const raw = localStorage.getItem(OVERLAY_PREFS_STORAGE_KEY);\n      if (!raw) return;\n      const data = JSON.parse(raw);\n      if (!data || typeof data !== 'object') return;\n      for (const key of Object.keys(DEFAULT_OVERLAY_SETTINGS) as (keyof OverlaySettings)[]) {\n        if (typeof data[key] === 'boolean') {\n          (this._opts as unknown as Record<string, boolean>)[key] = data[key];\n        }\n      }\n    } catch {\n      /* ignore invalid stored overlay prefs */\n    }\n  }\n\n  private _persistOverlayPrefs(): void {\n    try {\n      localStorage.setItem(OVERLAY_PREFS_STORAGE_KEY, JSON.stringify(this._opts));\n    } catch {\n      /* ignore quota / private mode */\n    }\n  }\n\n  private _loadArrowStyles(): void {\n    try {\n      const raw = localStorage.getItem(ARROW_STYLE_STORAGE_KEY);\n      if (!raw) return;\n      const parsed = JSON.parse(raw);\n      if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {\n        this._arrowStyles = parsed;\n      }\n    } catch {\n      this._arrowStyles = {};\n    }\n  }\n\n  private _persistArrowStyles(): void {\n    try {\n      localStorage.setItem(ARROW_STYLE_STORAGE_KEY, JSON.stringify(this._arrowStyles));\n    } catch {\n      /* storage unavailable — keep in-memory only */\n    }\n  }\n\n  private _getArrowStyle(layerKey: ArrowLayerKey): {\n    color?: string;\n    width: number;\n    head: number;\n    style: 'solid' | 'dashed' | 'dotted';\n  } {\n    const meta = ARROW_LAYERS[layerKey];\n    const stored = this._arrowStyles[layerKey] ?? {};\n    return {\n      color: stored.color,\n      width: stored.width ?? ARROW_STYLE_FIELD_DEFAULTS.width,\n      head: stored.head ?? ARROW_STYLE_FIELD_DEFAULTS.head,\n      style: stored.style ?? meta.defaultStyle,\n    };\n  }\n\n  private _resolveArrowColor(layerKey: ArrowLayerKey): string {\n    const stored = this._arrowStyles[layerKey]?.color;\n    if (stored) return stored;\n    const meta = ARROW_LAYERS[layerKey];\n    const themed = getComputedStyle(this)\n      .getPropertyValue(meta.colorVar)\n      .trim();\n    return themed || 'currentColor';\n  }\n\n  private _arrowMarkerOptions(layerKey: ArrowLayerKey): { size: number; color: string } {\n    return {\n      size: this._getArrowStyle(layerKey).head,\n      color: this._resolveArrowColor(layerKey),\n    };\n  }\n\n  private _applyArrowStyleVars(): void {\n    const hostStyle = this.style;\n    for (const [layerKey, meta] of Object.entries(ARROW_LAYERS) as [\n      ArrowLayerKey,\n      (typeof ARROW_LAYERS)[ArrowLayerKey],\n    ][]) {\n      const stored = this._arrowStyles[layerKey] ?? {};\n      const prefix = `--arrow-${meta.cssKey}`;\n      if (stored.color) hostStyle.setProperty(`${prefix}-color`, stored.color);\n      else hostStyle.removeProperty(`${prefix}-color`);\n\n      if (stored.width != null)\n        hostStyle.setProperty(`${prefix}-width`, String(stored.width));\n      else hostStyle.removeProperty(`${prefix}-width`);\n\n      if (stored.style != null) {\n        hostStyle.setProperty(`${prefix}-dash`, ARROW_DASH_VALUES[stored.style] ?? 'none');\n        hostStyle.setProperty(`${prefix}-cap`, stored.style === 'dotted' ? 'round' : 'butt');\n      } else {\n        hostStyle.removeProperty(`${prefix}-dash`);\n        hostStyle.removeProperty(`${prefix}-cap`);\n      }\n    }\n  }\n\n  private _toggleArrowStyleFields(layerKey: ArrowLayerKey): void {\n    if (this._expandedArrowFields.has(layerKey)) {\n      this._expandedArrowFields.delete(layerKey);\n    } else {\n      this._expandedArrowFields.add(layerKey);\n    }\n    this.requestUpdate();\n  }\n\n  private _onArrowStyleFieldChange(\n    layerKey: ArrowLayerKey,\n    field: keyof ArrowStyleConfig,\n    value: string | number\n  ): void {\n    const bucket = this._arrowStyles[layerKey] ?? (this._arrowStyles[layerKey] = {});\n    if (field === 'color') bucket.color = String(value);\n    else if (field === 'style') bucket.style = value as 'solid' | 'dashed' | 'dotted';\n    else if (field === 'width' || field === 'head') bucket[field] = Number(value);\n\n    this._persistArrowStyles();\n    this._applyArrowStyleVars();\n    const body = this._bodyRef.value;\n    const img = body?.querySelector('.page-view img') as HTMLImageElement | null;\n    if (img) this._syncOverlayBadgesForImg(img);\n    this.requestUpdate();\n  }\n\n  private _resetAllOverlaySettings = (): void => {\n    this._arrowStyles = {};\n    this._persistArrowStyles();\n    this._applyArrowStyleVars();\n    this._expandedArrowFields.clear();\n    this._opts = { ...DEFAULT_OVERLAY_SETTINGS };\n    this._persistOverlayPrefs();\n    this._applyBboxVisibility();\n    this._emitOverlayChange();\n    if (this._docState) this._renderDocument();\n    this.requestUpdate();\n  };\n\n  private _renderArrowStyleFields(layerKey: ArrowLayerKey, enabled: boolean) {\n    if (!this._expandedArrowFields.has(layerKey) || !enabled) return nothing;\n    const style = this._getArrowStyle(layerKey);\n    const colorVal = toHexColor(this._resolveArrowColor(layerKey));\n\n    return html`\n      <div class=\"arrow-style-fields\" id=\"arrow-fields-${layerKey}\">\n        <label>\n          Color\n          <input\n            type=\"color\"\n            .value=${colorVal}\n            @input=${(e: Event) =>\n              this._onArrowStyleFieldChange(\n                layerKey,\n                'color',\n                (e.target as HTMLInputElement).value\n              )}\n          />\n        </label>\n        <label>\n          Thickness\n          <span class=\"arrow-field-control\">\n            <input\n              type=\"range\"\n              min=\"0.5\"\n              max=\"6\"\n              step=\"0.5\"\n              .value=${String(style.width)}\n              title=${String(style.width)}\n              @input=${(e: Event) =>\n                this._onArrowStyleFieldChange(\n                  layerKey,\n                  'width',\n                  Number((e.target as HTMLInputElement).value)\n                )}\n            />\n            <output class=\"arrow-field-value\" aria-hidden=\"true\">${style.width}</output>\n          </span>\n        </label>\n        <label>\n          Head\n          <span class=\"arrow-field-control\">\n            <input\n              type=\"range\"\n              min=\"3\"\n              max=\"14\"\n              step=\"1\"\n              .value=${String(style.head)}\n              title=${String(style.head)}\n              @input=${(e: Event) =>\n                this._onArrowStyleFieldChange(\n                  layerKey,\n                  'head',\n                  Number((e.target as HTMLInputElement).value)\n                )}\n            />\n            <output class=\"arrow-field-value\" aria-hidden=\"true\">${style.head}</output>\n          </span>\n        </label>\n        <label>\n          Line\n          <select\n            .value=${style.style}\n            @change=${(e: Event) =>\n              this._onArrowStyleFieldChange(\n                layerKey,\n                'style',\n                (e.target as HTMLSelectElement).value\n              )}\n          >\n            <option value=\"solid\" ?selected=${style.style === 'solid'}>Solid</option>\n            <option value=\"dashed\" ?selected=${style.style === 'dashed'}>Dashed</option>\n            <option value=\"dotted\" ?selected=${style.style === 'dotted'}>Dotted</option>\n          </select>\n        </label>\n      </div>\n    `;\n  }\n\n  private _emitOverlayChange(): void {\n    this.dispatchEvent(\n      new CustomEvent('doclang-overlay-change', {\n        bubbles: true,\n        composed: true,\n        detail: { ...this._opts },\n      })\n    );\n  }\n\n  private _onZoomInput = (e: Event): void => {\n    this._zoomPct = Math.max(\n      PAGE_ZOOM_DEFAULT,\n      Number((e.target as HTMLInputElement).value)\n    );\n    this._layoutCache = null;\n    this.requestUpdate();\n    this.refreshLayout();\n  };\n\n  // ---------------------------------------------------------------------------\n  // Event wiring — pan (imperative, wired to the body element)\n  // ---------------------------------------------------------------------------\n\n  private _wirePanEvents(body: HTMLElement): void {\n    body.addEventListener('pointerdown', (e: PointerEvent) => {\n      if (e.button !== 0) return;\n      if (!(e.target instanceof Element) || !e.target.closest('.page-view')) return;\n      if (!this._isScrollable()) return;\n      const scrollPane = this._scrollPane();\n      if (!scrollPane) return;\n      this._panDrag = {\n        pointerId: e.pointerId,\n        startX: e.clientX,\n        startY: e.clientY,\n        scrollLeft: scrollPane.scrollLeft,\n        scrollTop: scrollPane.scrollTop,\n        moved: false,\n      };\n    });\n\n    body.addEventListener('pointermove', (e: PointerEvent) => {\n      if (!this._panDrag || e.pointerId !== this._panDrag.pointerId) return;\n      const dx = e.clientX - this._panDrag.startX;\n      const dy = e.clientY - this._panDrag.startY;\n      if (!this._panDrag.moved && Math.hypot(dx, dy) >= PAGE_PAN_DRAG_THRESHOLD) {\n        this._panDrag.moved = true;\n        body.classList.add('is-panning');\n        body.classList.remove('can-pan');\n        body.setPointerCapture(e.pointerId);\n        this.dispatchEvent(\n          new CustomEvent('doclang-panning-change', {\n            bubbles: true,\n            composed: true,\n            detail: { panning: true },\n          })\n        );\n      }\n      if (!this._panDrag.moved) return;\n      const scrollPane = this._scrollPane();\n      if (!scrollPane) return;\n      scrollPane.scrollLeft =\n        this._panDrag.scrollLeft + this._panDrag.startX - e.clientX;\n      scrollPane.scrollTop = this._panDrag.scrollTop + this._panDrag.startY - e.clientY;\n      e.preventDefault();\n    });\n\n    const endPan = (e: PointerEvent): void => {\n      if (!this._panDrag || e.pointerId !== this._panDrag.pointerId) return;\n      const wasPanning = this._panDrag.moved;\n      if (wasPanning) this._suppressClick = true;\n      this._panDrag = null;\n      body.classList.remove('is-panning');\n      if (wasPanning)\n        this.dispatchEvent(\n          new CustomEvent('doclang-panning-change', {\n            bubbles: true,\n            composed: true,\n            detail: { panning: false },\n          })\n        );\n      if (body.hasPointerCapture(e.pointerId)) body.releasePointerCapture(e.pointerId);\n      this._updatePanCursor();\n    };\n\n    body.addEventListener('pointerup', (e: PointerEvent) => endPan(e));\n    body.addEventListener('pointercancel', (e: PointerEvent) => endPan(e));\n\n    // Navigation\n    body.setAttribute('role', 'region');\n    body.setAttribute('aria-label', 'Original page');\n    body.addEventListener('pointerdown', () => {\n      if (this._docState?.hasPageView) body.focus({ preventScroll: true });\n    });\n  }\n\n  // ---------------------------------------------------------------------------\n  // Hints\n  // ---------------------------------------------------------------------------\n\n  private _onPanningChange = (e: CustomEvent<{ panning: boolean }>): void => {\n    if (e.detail.panning) this._hideHint();\n  };\n\n  private _onMousemove = (e: MouseEvent): void => {\n    if (this._panDrag?.moved) {\n      this._hideHint();\n      return;\n    }\n    const innerTarget = (e.composedPath()[0] ?? e.target) as Element;\n    const badge = innerTarget.closest('.element-badge[data-element-id]');\n    if (!badge || !this._docState?.idToElement) {\n      this._hideHint();\n      return;\n    }\n    const elementId = badge.getAttribute('data-element-id');\n    const xmlEl = elementId ? this._docState.idToElement.get(elementId) : null;\n    if (!xmlEl) {\n      this._hideHint();\n      return;\n    }\n    this._showHint(\n      this._elementHeadTooltipHtml(xmlEl, this._docState.defaultResolution),\n      e\n    );\n  };\n\n  private _onMouseleave = (): void => this._hideHint();\n\n  private _showHint(html: string, e: MouseEvent): void {\n    const el = this.shadowRoot?.querySelector<HTMLElement>('.page-view-hint') ?? null;\n    if (!el) return;\n    el.innerHTML = html;\n    el.style.top = `${e.clientY + 14}px`;\n    el.style.left = `${e.clientX + 14}px`;\n    if (!el.matches(':popover-open')) el.showPopover();\n  }\n\n  private _hideHint(): void {\n    const el = this.shadowRoot?.querySelector<HTMLElement>('.page-view-hint') ?? null;\n    if (el?.matches(':popover-open')) el.hidePopover();\n  }\n\n  private _elementHeadTooltipHtml(\n    el: Element,\n    defaultResolution: { width: number; height: number }\n  ): string {\n    const rows = this._collectElementHeadInfo(el, defaultResolution);\n    const body = rows\n      .map(({ key, value, isDefault }) => {\n        const rendered = escapeHtml(value);\n        const suffix = isDefault ? ' <span class=\"head-default\">(default)</span>' : '';\n        return `<tr><th scope=\"row\">${escapeHtml(key)}</th><td>${rendered}${suffix}</td></tr>`;\n      })\n      .join('');\n    return `<table class=\"head-tooltip\"><tbody>${body}</tbody></table>`;\n  }\n\n  private _collectElementHeadInfo(\n    el: Element,\n    defaultResolution: { width: number; height: number }\n  ): HeadInfo[] {\n    const labelEl = firstHeadChild(el, 'label');\n    const threadEl = firstHeadChild(el, 'thread');\n    const xrefEl = firstHeadChild(el, 'xref');\n    const hrefEl = firstHeadChild(el, 'href');\n    const layerEl = firstHeadChild(el, 'layer');\n    const captionEl = firstHeadChild(el, 'caption');\n    const descriptionEl = firstHeadChild(el, 'description');\n    const summaryEl = firstHeadChild(el, 'summary');\n    const customEl = firstHeadChild(el, 'custom');\n    const locs = elementHeadLocations(el);\n    const rows: HeadInfo[] = [\n      { key: 'element', value: elementLabel(el), isDefault: false },\n    ];\n\n    rows.push({\n      key: 'label',\n      value: labelEl?.getAttribute('value') ?? 'undefined',\n      isDefault: !labelEl?.hasAttribute('value'),\n    });\n\n    if (threadEl) {\n      rows.push({\n        key: 'thread_id',\n        value: threadEl.getAttribute('thread_id') ?? '—',\n        isDefault: false,\n      });\n    } else {\n      rows.push({ key: 'thread', value: '—', isDefault: true });\n    }\n\n    if (xrefEl) {\n      rows.push({\n        key: 'xref',\n        value: `thread_id ${xrefEl.getAttribute('thread_id') ?? '—'}`,\n        isDefault: false,\n      });\n    } else {\n      rows.push({ key: 'xref', value: '—', isDefault: true });\n    }\n\n    if (hrefEl) {\n      rows.push({\n        key: 'href',\n        value: hrefEl.getAttribute('uri') ?? '—',\n        isDefault: false,\n      });\n    } else {\n      rows.push({ key: 'href', value: '—', isDefault: true });\n    }\n\n    rows.push({\n      key: 'layer',\n      value: layerEl?.getAttribute('value') ?? 'body',\n      isDefault: !layerEl?.hasAttribute('value'),\n    });\n\n    const cornerLabels = ['x_min', 'y_min', 'x_max', 'y_max'];\n    if (locs.length === 4) {\n      for (let idx = 0; idx < 4; idx += 1) {\n        const loc = locs[idx]!;\n        const axisDefault =\n          idx % 2 === 0 ? defaultResolution.width : defaultResolution.height;\n        const resolution = locationResolution(loc, axisDefault);\n        const value = loc.getAttribute('value') ?? '0';\n        rows.push({\n          key: cornerLabels[idx]!,\n          value: `${value} @ ${resolution}`,\n          isDefault: false,\n        });\n      }\n    } else {\n      for (const key of cornerLabels) {\n        rows.push({ key, value: '—', isDefault: false });\n      }\n    }\n\n    const headTextPreview = (headEl: Element, maxLen = 72): string => {\n      const text = headEl.textContent?.replace(/\\s+/g, ' ').trim() ?? '';\n      if (!text) return '—';\n      return text.length > maxLen ? `${text.slice(0, maxLen)}…` : text;\n    };\n\n    rows.push({\n      key: 'caption',\n      value: captionEl ? headTextPreview(captionEl) : '—',\n      isDefault: !captionEl,\n    });\n    rows.push({\n      key: 'description',\n      value: descriptionEl ? headTextPreview(descriptionEl) : '—',\n      isDefault: !descriptionEl,\n    });\n    rows.push({\n      key: 'summary',\n      value: summaryEl ? headTextPreview(summaryEl) : '—',\n      isDefault: !summaryEl,\n    });\n    rows.push({\n      key: 'custom',\n      value: customEl ? headTextPreview(customEl) : '—',\n      isDefault: !customEl,\n    });\n\n    return rows;\n  }\n}\n","@import '../theme.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  border-right: 1px solid var(--border);\n  min-height: 0;\n  min-width: 0;\n  background: var(--panel);\n}\n:host([hidden]) {\n  display: none !important;\n}\n:host(.pane-layout-last) {\n  border-right: none;\n}\n.pane-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  height: 2.125rem;\n  padding: 0 0.75rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: var(--muted);\n  border-bottom: 1px solid var(--border);\n  background: var(--panel);\n}\n.pane-header-title {\n  min-width: 0;\n}\n.pane-settings-toggle {\n  appearance: none;\n  border: 1px solid transparent;\n  background: transparent;\n  color: var(--muted);\n  font-weight: 500;\n  cursor: pointer;\n  white-space: nowrap;\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  transition:\n    color 0.12s ease,\n    background 0.12s ease,\n    border-color 0.12s ease;\n  border-radius: 0.25rem;\n  padding: 0 0.28rem 0 0.4rem;\n  height: 1.25rem;\n  font-size: 0.625rem;\n  font-weight: 600;\n  line-height: 1;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  font: inherit;\n}\n.pane-settings-toggle::after {\n  content: '';\n  flex-shrink: 0;\n  width: 0.26rem;\n  height: 0.26rem;\n  margin-left: 0.22rem;\n  margin-top: -0.1em;\n  border-right: 1.5px solid currentColor;\n  border-bottom: 1.5px solid currentColor;\n  transform: rotate(45deg);\n  opacity: 0.65;\n}\n.pane-settings-toggle:hover {\n  color: var(--text);\n  background: color-mix(in srgb, var(--text) 5%, transparent);\n}\n.pane-settings-toggle[aria-expanded='true'] {\n  color: var(--accent);\n  background: color-mix(in srgb, var(--accent) 10%, var(--panel));\n  border-color: color-mix(in srgb, var(--accent) 22%, transparent);\n}\n.pane-settings-toggle:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n}\n.pane-reading-layout {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n}\n.pane-body {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  padding: 1rem;\n}\n.settings-option {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n  cursor: pointer;\n  user-select: none;\n}\n.settings-subgroup {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding-left: 0.85rem;\n}\n.settings-option-sub {\n  font-size: 0.8125rem;\n  color: var(--muted);\n}\n.settings-option input {\n  margin: 0.15rem 0 0;\n  flex-shrink: 0;\n  cursor: pointer;\n}\n.rendered-doc {\n  max-width: 42rem;\n  margin: 0 auto;\n  line-height: 1.6;\n}\n.rendered-el-virtual-text > p,\n.rendered-el-virtual-text > div {\n  margin: 0;\n  display: inline;\n}\n.rendered-doc li > .rendered-el-virtual-text {\n  display: inline;\n}\n.rendered-doc li > .rendered-el-virtual-text > p,\n.rendered-doc li > .rendered-el-virtual-text > div {\n  display: inline;\n  margin: 0;\n}\n.rendered-table .rendered-el-virtual-text {\n  display: inline;\n  margin: 0;\n}\n.rendered-table .rendered-el-virtual-text > p,\n.rendered-table .rendered-el-virtual-text > div {\n  display: inline;\n  margin: 0;\n}\n.rendered-el-virtual-text > div > .rendered-el {\n  display: block;\n  margin: 0.25rem 0;\n}\n.rendered-el {\n  cursor: pointer;\n  border-radius: 0.25rem;\n}\n.rendered-el:hover {\n  outline: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);\n}\n.rendered-el.selected {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n  background: color-mix(in srgb, var(--accent) 8%, transparent);\n}\n.rendered-doc p {\n  margin: 0 0 0.75rem;\n}\n.rendered-doc h1,\n.rendered-doc h2,\n.rendered-doc h3,\n.rendered-doc h4,\n.rendered-doc h5,\n.rendered-doc h6 {\n  margin: 1.25rem 0 0.5rem;\n  line-height: 1.25;\n}\n.rendered-doc h1:first-child,\n.rendered-doc h2:first-child,\n.rendered-doc h3:first-child {\n  margin-top: 0;\n}\n.rendered-doc ul,\n.rendered-doc ol {\n  margin: 0 0 0.75rem;\n  padding-left: 1.5rem;\n}\n.rendered-doc li {\n  margin: 0.25rem 0;\n}\n.rendered-doc li > .rendered-el > p:first-child,\n.rendered-doc li > .rendered-el > h1:first-child,\n.rendered-doc li > .rendered-el > h2:first-child,\n.rendered-doc li > .rendered-el > h3:first-child,\n.rendered-doc li > .rendered-el > h4:first-child,\n.rendered-doc li > .rendered-el > h5:first-child,\n.rendered-doc li > .rendered-el > h6:first-child {\n  margin-top: 0;\n}\n.rendered-marker {\n  margin-right: 0.35rem;\n}\n.rendered-handwriting {\n  font-family: 'Segoe Print', 'Bradley Hand', cursive;\n}\n.rendered-doc pre {\n  margin: 0 0 0.75rem;\n  padding: 0.75rem 1rem;\n  overflow-x: auto;\n  font-family: var(--font-mono);\n  font-size: 0.8125rem;\n  line-height: 1.5;\n  background: var(--placeholder-bg);\n  border: 1px solid var(--border);\n  border-radius: 0.375rem;\n}\n.rendered-doc code {\n  font-family: var(--font-mono);\n  font-size: 0.875em;\n}\n.rendered-doc pre code {\n  font-size: inherit;\n  background: none;\n  border: none;\n  padding: 0;\n}\n.rendered-code-label {\n  display: block;\n  margin-bottom: 0.25rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--muted);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n.rendered-formula {\n  display: block;\n  margin: 0 0 0.75rem;\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-mono);\n  font-size: 0.875rem;\n  background: var(--placeholder-bg);\n  border-left: 3px solid var(--border);\n  overflow-x: auto;\n}\n.rendered-formula-inline {\n  display: inline;\n  font-family: var(--font-mono);\n  font-size: 0.875em;\n}\n.rendered-doc figure {\n  margin: 0 0 0.75rem;\n}\n.rendered-doc figure img {\n  max-width: 100%;\n  height: auto;\n  border: 1px solid var(--border);\n  border-radius: 0.25rem;\n}\n.rendered-doc figure img.rendered-picture-unavailable {\n  display: inline-block;\n  min-width: 3rem;\n  min-height: 2.5rem;\n  object-fit: contain;\n  vertical-align: middle;\n}\n.rendered-doc figcaption {\n  margin-top: 0.35rem;\n  font-size: 0.875rem;\n  color: var(--muted);\n}\n.rendered-picture-contents {\n  margin-top: 0.5rem;\n  font-size: 0.875rem;\n  border: 1px solid var(--border);\n  border-radius: 0.375rem;\n  background: var(--placeholder-bg);\n}\n.rendered-picture-contents summary {\n  padding: 0.4rem 0.65rem;\n  cursor: pointer;\n  font-weight: 600;\n  color: var(--muted);\n  user-select: none;\n}\n.rendered-picture-contents summary:hover {\n  color: var(--text);\n}\n.rendered-picture-contents-body {\n  padding: 0.5rem 0.75rem 0.75rem;\n  border-top: 1px solid var(--border);\n}\n.rendered-picture-contents-body .rendered-el > p {\n  margin-bottom: 0.35rem;\n  font-size: 0.8125rem;\n}\n.rendered-table {\n  width: 100%;\n  margin: 0 0 0.75rem;\n  border-collapse: collapse;\n  font-size: 0.875rem;\n}\n.rendered-table caption {\n  caption-side: top;\n  margin-bottom: 0.35rem;\n  font-size: 0.875rem;\n  color: var(--muted);\n  text-align: left;\n}\n.rendered-table th,\n.rendered-table td {\n  border: 1px solid var(--border);\n  padding: 0.35rem 0.5rem;\n  vertical-align: top;\n  text-align: left;\n}\n.rendered-table th {\n  background: color-mix(in srgb, var(--border) 35%, var(--panel));\n  font-weight: 600;\n}\n.rendered-table .rendered-table-cell-text {\n  display: inline;\n}\n.rendered-table .rendered-el {\n  margin: 0;\n}\n.rendered-table .rendered-el-virtual-text > p,\n.rendered-table .rendered-el-virtual-text > div {\n  margin: 0;\n}\n.rendered-table .rendered-table {\n  margin: 0.25rem 0 0;\n}\n.rendered-page-header,\n.rendered-page-footer {\n  font-size: 0.875rem;\n  color: var(--muted);\n}\n.rendered-page-header {\n  margin-bottom: 1rem;\n  padding-bottom: 0.5rem;\n  border-bottom: 1px solid var(--border);\n}\n.rendered-page-footer {\n  margin-top: 1rem;\n  padding-top: 0.5rem;\n  border-top: 1px solid var(--border);\n}\n.pane-body:not(.show-reading-furniture) .rendered-el[data-doclang-layer='furniture'] {\n  display: none;\n}\n.pane-body:not(.show-reading-background) .rendered-el[data-doclang-layer='background'] {\n  display: none;\n}\n.rendered-el[data-doclang-layer='furniture'],\n.rendered-el[data-doclang-layer='background'] {\n  position: relative;\n}\n.rendered-el[data-doclang-layer='furniture']::before,\n.rendered-el[data-doclang-layer='background']::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background: repeating-linear-gradient(\n    -45deg,\n    transparent 0 10px,\n    color-mix(in srgb, var(--muted) 6%, transparent) 10px 16px\n  );\n}\n.rendered-el.rendered-footnote > aside {\n  font-size: 0.875rem;\n  color: var(--muted);\n  border-left: 2px solid var(--border);\n  padding-left: 0.75rem;\n  margin: 0 0 0.75rem;\n}\n.rendered-unsupported {\n  margin: 0 0 0.75rem;\n  padding: 0.5rem 0.75rem;\n  font-size: 0.8125rem;\n  font-style: italic;\n  color: var(--muted);\n  background: var(--placeholder-bg);\n  border: 1px dashed var(--border);\n  border-radius: 0.375rem;\n}\n.rendered-field-region {\n  margin: 0 0 1rem;\n  padding: 0.75rem 1rem;\n  border: 1px solid var(--border);\n  border-radius: 0.5rem;\n  background: color-mix(in srgb, var(--kind-field) 6%, transparent);\n}\n.rendered-field-region > .rendered-field-heading:first-child,\n.rendered-field-region\n  > .rendered-el.rendered-field_heading\n  > .rendered-field-heading:first-child {\n  margin-top: 0;\n}\n.rendered-field-item {\n  margin: 0.5rem 0;\n}\n.rendered-field-item > .rendered-el.rendered-field-key,\n.rendered-field-key {\n  font-weight: 600;\n}\n.rendered-field-item > .rendered-el.rendered-field-key + .rendered-el,\n.rendered-field-item > .rendered-el.rendered-field-key + .rendered-el-virtual-text {\n  margin-top: 0.15rem;\n}\n.rendered-field-value-fillable .rendered-field-fillable-slot {\n  display: inline-block;\n  min-width: 6rem;\n  min-height: 1.25em;\n  border-bottom: 1px solid color-mix(in srgb, var(--text) 55%, transparent);\n  vertical-align: bottom;\n}\n.rendered-field-hint {\n  font-size: 0.85em;\n  color: var(--muted);\n  font-style: italic;\n}\n.rendered-field-heading {\n  color: var(--text);\n}\n.rendered-checkbox {\n  margin: 0 0.25rem 0 0;\n  vertical-align: middle;\n  accent-color: var(--kind-field);\n}\n.rendered-checkbox-wrap {\n  display: inline;\n}\n","/** <doclang-reading-pane> — reading/rendered view with layers settings panel */\n\nimport { html, nothing, type PropertyValues } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport { unsafeCSS } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ref, createRef } from 'lit/directives/ref.js';\nimport type { Ref } from 'lit/directives/ref.js';\nimport { DoclangPageElement } from '../base/page-element';\nimport { PageController } from '../base/page-controller';\nimport styles from './reading-pane.css?inline';\nimport '../settings-panel/settings-panel';\nimport type { DoclangSettingsPanel } from '../settings-panel/settings-panel';\nimport { segmentHasMarkup, assignElementIds, NO_MARKUP } from '../../doclang/document';\nimport {\n  HEAD_TAGS,\n  CELL_SPAN_TAGS,\n  isTextLikeNode,\n  isWhitespaceOnlyText,\n  localName,\n  childElements,\n  isCellToken,\n  headingLevel,\n  parseElementHeadAt,\n  skipElementHeadNodes,\n  skipContainerLevelHead,\n  skipUntilCellBoundary,\n  skipOtslContainerHead,\n  elementLayer,\n  elementThreadId,\n  normalizeArchivePath,\n  isSemanticElement,\n} from '../../doclang/dom';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ninterface RenderCtx {\n  inline: boolean;\n  trimLeading?: boolean;\n}\n\ninterface OtslCell {\n  kind: string;\n  token: Element;\n  contentNodes: Node[];\n  colspan: number;\n  rowspan: number;\n  covered?: boolean;\n}\n\ninterface ParsedOtslCell {\n  kind: string;\n  token: Element;\n  contentNodes: Node[];\n}\n\n// ---------------------------------------------------------------------------\n// Constants\n// ---------------------------------------------------------------------------\n\nconst RENDER_BLOCK_TAGS = new Set([\n  'text',\n  'heading',\n  'field_heading',\n  'footnote',\n  'page_header',\n  'page_footer',\n  'list',\n  'code',\n  'formula',\n  'picture',\n  'group',\n  'field_region',\n  'field_item',\n  'table',\n  'index',\n  'tabular',\n]);\nconst RENDER_FORMAT_TAGS = new Set([\n  'bold',\n  'italic',\n  'underline',\n  'strikethrough',\n  'superscript',\n  'subscript',\n  'handwriting',\n  'rtl',\n  'content',\n]);\nconst FORMAT_HTML_TAG: Record<string, string> = {\n  bold: 'strong',\n  italic: 'em',\n  underline: 'u',\n  strikethrough: 's',\n  superscript: 'sup',\n  subscript: 'sub',\n};\nconst PICTURE_UNAVAILABLE_ALT = 'Picture asset not available';\nconst INVALID_PICTURE_SRC = 'data:image/png;base64,NOT_A_VALID_IMAGE';\n/** Allow small embedded raster data URIs only; remote/blob/other schemes are rejected. */\nconst SAFE_DATA_IMAGE_RE = /^data:image\\/(png|jpe?g|webp|gif);base64,/i;\nconst MAX_DATA_IMAGE_URI_LENGTH = 2 * 1024 * 1024; // 2 MiB\n\n// ---------------------------------------------------------------------------\n// Rendering helpers\n// ---------------------------------------------------------------------------\n\nfunction applyElementLayerAttr(sourceEl: Element, domEl: HTMLElement): void {\n  domEl.setAttribute('data-doclang-layer', elementLayer(sourceEl));\n}\n\nfunction resolveArchiveUri(\n  uri: string | null | undefined,\n  assetUrls: Map<string, string> | undefined\n): string | null {\n  if (!uri) return null;\n  const trimmed = uri.trim();\n  if (!trimmed) return null;\n\n  if (SAFE_DATA_IMAGE_RE.test(trimmed)) {\n    return trimmed.length <= MAX_DATA_IMAGE_URI_LENGTH ? trimmed : null;\n  }\n  // Reject any other scheme (http, https, blob, javascript, …) and protocol-relative URLs.\n  if (/^[a-z][a-z0-9+.-]*:/i.test(trimmed) || trimmed.startsWith('//')) return null;\n\n  return assetUrls?.get(normalizeArchivePath(trimmed)) ?? null;\n}\n\nfunction markPictureUnavailable(img: HTMLImageElement): void {\n  img.classList.add('rendered-picture-unavailable');\n  img.alt = '\\u00A0';\n  img.setAttribute('aria-label', PICTURE_UNAVAILABLE_ALT);\n}\n\nfunction appendPictureFigureImage(\n  figure: HTMLElement,\n  uri: string | null,\n  captionEl: Element | null,\n  elementIds: Map<Element, string>,\n  assetUrls: Map<string, string> | undefined\n): void {\n  const img = document.createElement('img');\n  figure.appendChild(img);\n\n  const resolved = uri ? resolveArchiveUri(uri, assetUrls) : null;\n  if (resolved) {\n    img.alt = '';\n    img.src = resolved;\n    img.addEventListener('error', () => markPictureUnavailable(img), { once: true });\n  } else {\n    markPictureUnavailable(img);\n    img.src = INVALID_PICTURE_SRC;\n  }\n\n  if (captionEl) {\n    figure.appendChild(\n      renderEmbeddedCaption(captionEl, elementIds, 'figcaption', assetUrls)\n    );\n  }\n}\n\nfunction readCaptionElement(el: Element): Element | null {\n  return childElements(el).find(c => localName(c) === 'caption') ?? null;\n}\n\nfunction renderEmbeddedCaption(\n  captionEl: Element,\n  elementIds: Map<Element, string>,\n  tagName: string,\n  assetUrls: Map<string, string> | undefined\n): HTMLElement {\n  const node = document.createElement(tagName);\n  node.classList.add('rendered-el', 'rendered-caption');\n  const elementId = elementIds.get(captionEl);\n  if (elementId) node.setAttribute('data-element-id', elementId);\n  appendRenderedBody(node, captionEl, elementIds, { inline: true }, assetUrls);\n  return node;\n}\n\nfunction wrapRendered(\n  el: Element,\n  node: HTMLElement,\n  elementId: string | undefined,\n  extraClass?: string\n): HTMLElement {\n  const tag = localName(el);\n  const wrap = document.createElement('div');\n  wrap.className = `rendered-el rendered-${tag}${extraClass ? ` ${extraClass}` : ''}`;\n  if (elementId) wrap.setAttribute('data-element-id', elementId);\n  applyElementLayerAttr(el, wrap);\n  wrap.appendChild(node);\n  return wrap;\n}\n\nfunction appendRenderedBody(\n  parent: HTMLElement,\n  el: Element,\n  elementIds: Map<Element, string>,\n  ctx: RenderCtx,\n  assetUrls?: Map<string, string>\n): void {\n  const nodes = [...el.childNodes];\n  let i = skipElementHeadNodes(nodes, 0);\n  while (i < nodes.length) {\n    appendRenderedNode(parent, nodes[i]!, elementIds, ctx, assetUrls);\n    i += 1;\n  }\n}\n\nfunction appendRenderedBodyBlocks(\n  parent: HTMLElement,\n  el: Element,\n  elementIds: Map<Element, string>,\n  assetUrls: Map<string, string> | undefined\n): void {\n  const nodes = [...el.childNodes];\n  let i = skipElementHeadNodes(nodes, 0);\n  while (i < nodes.length) {\n    const node = nodes[i]!;\n    if (\n      node.nodeType === Node.ELEMENT_NODE &&\n      RENDER_BLOCK_TAGS.has(localName(node as Element))\n    ) {\n      const rendered = renderBlockElement(\n        node as Element,\n        elementIds,\n        { inline: false },\n        assetUrls\n      );\n      if (rendered) parent.appendChild(rendered);\n    } else {\n      appendRenderedNode(parent, node, elementIds, { inline: false }, assetUrls);\n    }\n    i += 1;\n  }\n}\n\nfunction renderMarkerElement(\n  el: Element,\n  elementIds: Map<Element, string>,\n  ctx: RenderCtx,\n  assetUrls: Map<string, string> | undefined\n): HTMLElement {\n  const marker = document.createElement('span');\n  marker.className = 'rendered-marker rendered-el';\n  const elementId = elementIds.get(el);\n  if (elementId) marker.setAttribute('data-element-id', elementId);\n  appendRenderedBody(marker, el, elementIds, ctx, assetUrls);\n  return marker;\n}\n\nfunction renderCheckboxElement(\n  el: Element,\n  elementIds: Map<Element, string>\n): HTMLElement {\n  const cb = document.createElement('input');\n  cb.type = 'checkbox';\n  cb.disabled = true;\n  cb.checked = (el.getAttribute('class') ?? 'unselected') === 'selected';\n  cb.className = 'rendered-checkbox';\n\n  const wrap = document.createElement('span');\n  wrap.className = 'rendered-checkbox-wrap rendered-el';\n  const elementId = elementIds.get(el);\n  if (elementId) wrap.setAttribute('data-element-id', elementId);\n  applyElementLayerAttr(el, wrap);\n  wrap.appendChild(cb);\n  return wrap;\n}\n\nfunction renderFieldKeyElement(\n  el: Element,\n  elementIds: Map<Element, string>,\n  ctx: RenderCtx,\n  assetUrls: Map<string, string> | undefined\n): HTMLElement {\n  const node = document.createElement('span');\n  node.className = 'rendered-field-key rendered-el';\n  const elementId = elementIds.get(el);\n  if (elementId) node.setAttribute('data-element-id', elementId);\n  applyElementLayerAttr(el, node);\n  appendRenderedBody(node, el, elementIds, { ...ctx, inline: true }, assetUrls);\n  return node;\n}\n\nfunction renderFieldValueElement(\n  el: Element,\n  elementIds: Map<Element, string>,\n  ctx: RenderCtx,\n  assetUrls: Map<string, string> | undefined\n): HTMLElement {\n  const valueClass = el.getAttribute('class') ?? 'read_only';\n  const node = document.createElement('span');\n  node.className = `rendered-field-value rendered-field-value-${valueClass} rendered-el`;\n  const elementId = elementIds.get(el);\n  if (elementId) node.setAttribute('data-element-id', elementId);\n  applyElementLayerAttr(el, node);\n  appendRenderedBody(node, el, elementIds, { ...ctx, inline: true }, assetUrls);\n  if (\n    valueClass === 'fillable' &&\n    !node.textContent?.trim() &&\n    !node.querySelector('.rendered-checkbox-wrap, img, .rendered-marker')\n  ) {\n    const slot = document.createElement('span');\n    slot.className = 'rendered-field-fillable-slot';\n    slot.setAttribute('aria-hidden', 'true');\n    node.appendChild(slot);\n  }\n  return node;\n}\n\nfunction renderFieldHintElement(\n  el: Element,\n  elementIds: Map<Element, string>,\n  ctx: RenderCtx,\n  assetUrls: Map<string, string> | undefined\n): HTMLElement {\n  const node = document.createElement('span');\n  node.className = 'rendered-field-hint rendered-el';\n  const elementId = elementIds.get(el);\n  if (elementId) node.setAttribute('data-element-id', elementId);\n  applyElementLayerAttr(el, node);\n  appendRenderedBody(node, el, elementIds, { ...ctx, inline: true }, assetUrls);\n  return node;\n}\n\nfunction renderFormatElement(\n  el: Element,\n  elementIds: Map<Element, string>,\n  ctx: RenderCtx,\n  assetUrls: Map<string, string> | undefined\n): HTMLElement {\n  const tag = localName(el);\n  if (tag === 'content') {\n    const span = document.createElement('span');\n    span.textContent = el.textContent ?? '';\n    return span;\n  }\n\n  let node: HTMLElement;\n  if (tag === 'handwriting') {\n    node = document.createElement('span');\n    node.className = 'rendered-handwriting';\n  } else if (tag === 'rtl') {\n    node = document.createElement('bdi');\n    node.setAttribute('dir', 'rtl');\n  } else {\n    node = document.createElement(FORMAT_HTML_TAG[tag] ?? 'span');\n  }\n\n  appendRenderedBody(node, el, elementIds, ctx, assetUrls);\n  return node;\n}\n\nfunction renderCode(\n  el: Element,\n  elementIds: Map<Element, string>,\n  ctx: RenderCtx,\n  assetUrls: Map<string, string> | undefined\n): HTMLElement {\n  const labelEl = childElements(el).find(c => localName(c) === 'label');\n  const labelValue = labelEl?.getAttribute('value');\n\n  const code = document.createElement('code');\n  appendRenderedBody(code, el, elementIds, { inline: ctx.inline }, assetUrls);\n\n  if (ctx.inline) {\n    code.classList.add('rendered-el');\n    const id = elementIds.get(el);\n    if (id) code.setAttribute('data-element-id', id);\n    return code;\n  }\n\n  const pre = document.createElement('pre');\n  if (labelValue && labelValue !== 'undefined') {\n    const label = document.createElement('span');\n    label.className = 'rendered-code-label';\n    label.textContent = labelValue;\n    pre.appendChild(label);\n  }\n  pre.appendChild(code);\n  return wrapRendered(el, pre, elementIds.get(el));\n}\n\nfunction renderFormula(\n  el: Element,\n  elementIds: Map<Element, string>,\n  ctx: RenderCtx,\n  assetUrls: Map<string, string> | undefined\n): HTMLElement {\n  const span = document.createElement('span');\n  span.className = ctx.inline ? 'rendered-formula-inline' : 'rendered-formula';\n  appendRenderedBody(span, el, elementIds, { inline: true }, assetUrls);\n  if (ctx.inline) {\n    span.classList.add('rendered-el');\n    const id = elementIds.get(el);\n    if (id) span.setAttribute('data-element-id', id);\n    return span;\n  }\n  return wrapRendered(el, span, elementIds.get(el));\n}\n\nfunction renderPicture(\n  el: Element,\n  elementIds: Map<Element, string>,\n  assetUrls: Map<string, string> | undefined\n): HTMLElement {\n  const figure = document.createElement('figure');\n  const captionEl = readCaptionElement(el);\n  const srcEl = childElements(el).find(c => localName(c) === 'src') ?? null;\n  const uri = srcEl?.getAttribute('uri')?.trim() || null;\n\n  appendPictureFigureImage(figure, uri, captionEl, elementIds, assetUrls);\n\n  const nodes = [...el.childNodes];\n  let i = skipElementHeadNodes(nodes, 0);\n  while (i < nodes.length) {\n    const node = nodes[i]!;\n    if (node.nodeType !== Node.ELEMENT_NODE) {\n      i += 1;\n      continue;\n    }\n    const tag = localName(node as Element);\n    if (tag === 'src') {\n      i += 1;\n      continue;\n    }\n    if (tag === 'tabular') {\n      const rendered = renderOtslContainer(node as Element, elementIds, assetUrls);\n      if (rendered) figure.appendChild(rendered);\n      i += 1;\n      continue;\n    }\n    break;\n  }\n\n  const bodyInner = document.createElement('div');\n  bodyInner.className = 'rendered-picture-contents-body';\n  appendPictureBodyContent(bodyInner, nodes, i, elementIds, assetUrls);\n  if (bodyInner.textContent?.trim()) {\n    const details = document.createElement('details');\n    details.className = 'rendered-picture-contents';\n    const summary = document.createElement('summary');\n    summary.textContent = 'Picture contents';\n    details.appendChild(summary);\n    details.appendChild(bodyInner);\n    figure.appendChild(details);\n  }\n\n  return wrapRendered(el, figure, elementIds.get(el));\n}\n\nfunction appendPictureBodyContent(\n  container: HTMLElement,\n  nodes: ChildNode[],\n  startIdx: number,\n  elementIds: Map<Element, string>,\n  assetUrls: Map<string, string> | undefined\n): void {\n  let i = startIdx;\n  while (i < nodes.length) {\n    const node = nodes[i]!;\n    if (\n      node.nodeType === Node.ELEMENT_NODE &&\n      RENDER_BLOCK_TAGS.has(localName(node as Element))\n    ) {\n      const rendered = renderBlockElement(\n        node as Element,\n        elementIds,\n        { inline: false },\n        assetUrls\n      );\n      if (rendered) container.appendChild(rendered);\n    } else {\n      appendRenderedNode(container, node, elementIds, { inline: false }, assetUrls);\n    }\n    i += 1;\n  }\n}\n\nfunction renderVirtualTextBlock(\n  hostEl: Element,\n  contentNodes: ChildNode[],\n  elementIds: Map<Element, string>,\n  assetUrls: Map<string, string> | undefined\n): HTMLElement {\n  const hasBlock = contentNodes.some(\n    n =>\n      n.nodeType === Node.ELEMENT_NODE && RENDER_BLOCK_TAGS.has(localName(n as Element))\n  );\n  const inner = document.createElement(hasBlock ? 'div' : 'p');\n  for (const node of contentNodes) {\n    if (\n      node.nodeType === Node.ELEMENT_NODE &&\n      RENDER_BLOCK_TAGS.has(localName(node as Element))\n    ) {\n      const rendered = renderBlockElement(\n        node as Element,\n        elementIds,\n        { inline: false },\n        assetUrls\n      );\n      if (rendered) inner.appendChild(rendered);\n    } else {\n      appendRenderedNode(inner, node, elementIds, { inline: true }, assetUrls);\n    }\n  }\n  const wrap = document.createElement('div');\n  wrap.className = 'rendered-el rendered-text rendered-el-virtual-text';\n  const elementId = elementIds.get(hostEl);\n  if (elementId) wrap.setAttribute('data-element-id', elementId);\n  applyElementLayerAttr(hostEl, wrap);\n  wrap.appendChild(inner);\n  return wrap;\n}\n\nfunction sliceHasMarkupContent(nodes: ArrayLike<ChildNode>): boolean {\n  for (let i = 0; i < nodes.length; i += 1) {\n    const node = nodes[i];\n    if (!node) continue;\n    if (isTextLikeNode(node) && !isWhitespaceOnlyText(node)) return true;\n    if (node.nodeType === Node.ELEMENT_NODE) return true;\n  }\n  return false;\n}\n\nfunction isVirtualTextSkippableNode(node: ChildNode): boolean {\n  if (isWhitespaceOnlyText(node)) return true;\n  if (node.nodeType !== Node.ELEMENT_NODE) return false;\n  const tag = localName(node as Element);\n  return tag === 'location' || HEAD_TAGS.has(tag);\n}\n\nfunction shouldWrapVirtualText(contentNodes: ChildNode[]): boolean {\n  if (!sliceHasMarkupContent(contentNodes)) return false;\n  for (const node of contentNodes) {\n    if (isVirtualTextSkippableNode(node)) continue;\n    if (isTextLikeNode(node)) return true;\n    if (node.nodeType === Node.ELEMENT_NODE && !isSemanticElement(node as Element))\n      return true;\n  }\n  return false;\n}\n\nfunction appendRenderedSliceContent(\n  container: HTMLElement,\n  hostEl: Element,\n  contentNodes: ChildNode[],\n  elementIds: Map<Element, string>,\n  assetUrls: Map<string, string> | undefined\n): void {\n  if (!sliceHasMarkupContent(contentNodes)) return;\n  if (shouldWrapVirtualText(contentNodes)) {\n    container.appendChild(\n      renderVirtualTextBlock(hostEl, contentNodes, elementIds, assetUrls)\n    );\n    return;\n  }\n  for (const node of contentNodes) {\n    if (isVirtualTextSkippableNode(node)) continue;\n    if (\n      node.nodeType === Node.ELEMENT_NODE &&\n      RENDER_BLOCK_TAGS.has(localName(node as Element))\n    ) {\n      const rendered = renderBlockElement(\n        node as Element,\n        elementIds,\n        { inline: false },\n        assetUrls\n      );\n      if (rendered) container.appendChild(rendered);\n    } else {\n      appendRenderedNode(container, node, elementIds, { inline: true }, assetUrls);\n    }\n  }\n}\n\nfunction appendListItemsFromElement(\n  list: HTMLElement,\n  el: Element,\n  elementIds: Map<Element, string>,\n  assetUrls: Map<string, string> | undefined\n): void {\n  const nodes = [...el.childNodes];\n  let i = skipContainerLevelHead(nodes, 0);\n\n  while (i < nodes.length) {\n    const node = nodes[i]!;\n    if (node.nodeType !== Node.ELEMENT_NODE || localName(node as Element) !== 'ldiv') {\n      i += 1;\n      continue;\n    }\n\n    const ldiv = node as Element;\n    i += 1;\n    const li = document.createElement('li');\n\n    for (const child of childElements(ldiv)) {\n      const childTag = localName(child);\n      if (childTag === 'marker') {\n        li.appendChild(\n          renderMarkerElement(child, elementIds, { inline: true }, assetUrls)\n        );\n      } else if (childTag === 'checkbox') {\n        li.appendChild(renderCheckboxElement(child, elementIds));\n      }\n    }\n\n    const contentStart = i;\n    const head = parseElementHeadAt(nodes, i);\n    if (head) i = head.nextIndex;\n\n    while (i < nodes.length) {\n      const contentNode = nodes[i]!;\n      if (\n        contentNode.nodeType === Node.ELEMENT_NODE &&\n        localName(contentNode as Element) === 'ldiv'\n      )\n        break;\n      i += 1;\n    }\n\n    const contentNodes = nodes.slice(contentStart, i);\n    appendRenderedSliceContent(li, ldiv, contentNodes, elementIds, assetUrls);\n\n    list.appendChild(li);\n  }\n}\n\nfunction renderList(\n  el: Element,\n  elementIds: Map<Element, string>,\n  assetUrls: Map<string, string> | undefined\n): HTMLElement {\n  const listClass = el.getAttribute('class') ?? 'unordered';\n  const list = document.createElement(listClass === 'ordered' ? 'ol' : 'ul');\n  appendListItemsFromElement(list, el, elementIds, assetUrls);\n  return wrapRendered(el, list, elementIds.get(el));\n}\n\nfunction isHeaderCellKind(kind: string): boolean {\n  return kind === 'ched' || kind === 'rhed' || kind === 'corn' || kind === 'srow';\n}\n\nfunction parseOtslRows(container: Element): ParsedOtslCell[][] {\n  const nodes = [...container.childNodes];\n  let i = skipOtslContainerHead(nodes, 0);\n  const rows: ParsedOtslCell[][] = [];\n  let currentRow: ParsedOtslCell[] = [];\n\n  while (i < nodes.length) {\n    const node = nodes[i]!;\n    if (node.nodeType !== Node.ELEMENT_NODE) {\n      i += 1;\n      continue;\n    }\n    const tag = localName(node as Element);\n    if (tag === 'nl') {\n      rows.push(currentRow);\n      currentRow = [];\n      i += 1;\n      continue;\n    }\n    if (!isCellToken(tag)) {\n      i += 1;\n      continue;\n    }\n\n    if (CELL_SPAN_TAGS.has(tag)) {\n      currentRow.push({ kind: tag, token: node as Element, contentNodes: [] });\n      i += 1;\n      continue;\n    }\n\n    i += 1;\n    const head = parseElementHeadAt(nodes, i);\n    if (head) i = head.nextIndex;\n    const contentStart = i;\n    i = skipUntilCellBoundary(nodes, i);\n    currentRow.push({\n      kind: tag,\n      token: node as Element,\n      contentNodes: nodes.slice(contentStart, i),\n    });\n  }\n\n  if (currentRow.length) rows.push(currentRow);\n  return rows;\n}\n\nfunction findVerticalCellOrigin(\n  grid: (OtslCell | undefined)[][],\n  row: number,\n  col: number\n): { cell: OtslCell; row: number; col: number } | null {\n  for (let r = row - 1; r >= 0; r -= 1) {\n    const cell = grid[r]?.[col];\n    if (!cell || cell.covered) continue;\n    return { cell, row: r, col };\n  }\n  return null;\n}\n\nfunction findHorizontalCellOrigin(\n  grid: (OtslCell | undefined)[][],\n  row: number,\n  col: number\n): { cell: OtslCell; row: number; col: number } | null {\n  for (let c = col - 1; c >= 0; c -= 1) {\n    const cell = grid[row]?.[c];\n    if (!cell || cell.covered) continue;\n    return { cell, row, col: c };\n  }\n  return null;\n}\n\nfunction nextFreeColumn(\n  grid: (OtslCell | undefined)[][],\n  row: number,\n  col: number\n): number {\n  let c = col;\n  while (grid[row]?.[c]?.covered) c += 1;\n  return c;\n}\n\nfunction buildOtslGrid(rows: ParsedOtslCell[][]): (OtslCell | undefined)[][] {\n  const grid: (OtslCell | undefined)[][] = [];\n\n  for (let rowIdx = 0; rowIdx < rows.length; rowIdx += 1) {\n    if (!grid[rowIdx]) grid[rowIdx] = [];\n    let col = 0;\n\n    for (const parsed of rows[rowIdx]!) {\n      col = nextFreeColumn(grid, rowIdx, col);\n\n      if (parsed.kind === 'lcel') {\n        const origin = findHorizontalCellOrigin(grid, rowIdx, col);\n        if (origin) origin.cell.colspan += 1;\n        grid[rowIdx]![col] = {\n          kind: 'lcel',\n          token: parsed.token,\n          contentNodes: [],\n          colspan: 0,\n          rowspan: 0,\n          covered: true,\n        };\n        col += 1;\n        continue;\n      }\n\n      if (parsed.kind === 'ucel') {\n        const origin = findVerticalCellOrigin(grid, rowIdx, col);\n        if (origin) origin.cell.rowspan += 1;\n        grid[rowIdx]![col] = {\n          kind: 'ucel',\n          token: parsed.token,\n          contentNodes: [],\n          colspan: 0,\n          rowspan: 0,\n          covered: true,\n        };\n        col += 1;\n        continue;\n      }\n\n      if (parsed.kind === 'xcel') {\n        const vOrigin = findVerticalCellOrigin(grid, rowIdx, col);\n        const hOrigin = findHorizontalCellOrigin(grid, rowIdx, col);\n        if (vOrigin && hOrigin && vOrigin.cell === hOrigin.cell) {\n          vOrigin.cell.rowspan += 1;\n          vOrigin.cell.colspan += 1;\n        } else {\n          if (vOrigin) vOrigin.cell.rowspan += 1;\n          if (hOrigin) hOrigin.cell.colspan += 1;\n        }\n        grid[rowIdx]![col] = {\n          kind: 'xcel',\n          token: parsed.token,\n          contentNodes: [],\n          colspan: 0,\n          rowspan: 0,\n          covered: true,\n        };\n        col += 1;\n        continue;\n      }\n\n      grid[rowIdx]![col] = {\n        kind: parsed.kind,\n        token: parsed.token,\n        contentNodes: parsed.contentNodes,\n        colspan: 1,\n        rowspan: 1,\n        covered: false,\n      };\n      col += 1;\n    }\n  }\n\n  return grid;\n}\n\nfunction renderOtslContainer(\n  el: Element,\n  elementIds: Map<Element, string>,\n  assetUrls: Map<string, string> | undefined\n): HTMLElement {\n  const table = document.createElement('table');\n  table.className = 'rendered-table';\n\n  const captionEl = readCaptionElement(el);\n  if (captionEl) {\n    table.appendChild(\n      renderEmbeddedCaption(captionEl, elementIds, 'caption', assetUrls)\n    );\n  }\n\n  const grid = buildOtslGrid(parseOtslRows(el));\n  const tbody = document.createElement('tbody');\n\n  for (const row of grid) {\n    const tr = document.createElement('tr');\n    for (const cell of row ?? []) {\n      if (!cell || cell.covered) continue;\n      const cellTag = isHeaderCellKind(cell.kind) ? 'th' : 'td';\n      const td = document.createElement(cellTag);\n      if (cell.colspan > 1) td.colSpan = cell.colspan;\n      if (cell.rowspan > 1) td.rowSpan = cell.rowspan;\n      appendRenderedSliceContent(\n        td,\n        cell.token,\n        cell.contentNodes as ChildNode[],\n        elementIds,\n        assetUrls\n      );\n      tr.appendChild(td);\n    }\n    if (tr.childNodes.length) tbody.appendChild(tr);\n  }\n\n  if (tbody.childNodes.length) table.appendChild(tbody);\n  return wrapRendered(el, table, elementIds.get(el));\n}\n\nfunction renderUnsupported(el: Element, elementIds: Map<Element, string>): HTMLElement {\n  const stub = document.createElement('div');\n  stub.className = 'rendered-unsupported';\n  stub.textContent = `<${localName(el)}> — not yet rendered`;\n  return wrapRendered(el, stub, elementIds.get(el));\n}\n\nfunction renderBlockElement(\n  el: Element,\n  elementIds: Map<Element, string>,\n  ctx: RenderCtx,\n  assetUrls?: Map<string, string>\n): HTMLElement | null {\n  const tag = localName(el);\n  const elementId = elementIds.get(el);\n\n  switch (tag) {\n    case 'text': {\n      const p = document.createElement('p');\n      appendRenderedBody(p, el, elementIds, { inline: true }, assetUrls);\n      return wrapRendered(el, p, elementId);\n    }\n    case 'heading': {\n      const h = document.createElement(`h${headingLevel(el)}`);\n      appendRenderedBody(h, el, elementIds, { inline: true }, assetUrls);\n      return wrapRendered(el, h, elementId);\n    }\n    case 'field_heading': {\n      const h = document.createElement(`h${headingLevel(el)}`);\n      h.className = 'rendered-field-heading';\n      appendRenderedBody(h, el, elementIds, { inline: true }, assetUrls);\n      return wrapRendered(el, h, elementId);\n    }\n    case 'footnote': {\n      const aside = document.createElement('aside');\n      appendRenderedBody(aside, el, elementIds, { inline: false }, assetUrls);\n      return wrapRendered(el, aside, elementId);\n    }\n    case 'page_header': {\n      const header = document.createElement('header');\n      header.className = 'rendered-page-header';\n      appendRenderedBody(header, el, elementIds, { inline: true }, assetUrls);\n      return wrapRendered(el, header, elementId);\n    }\n    case 'page_footer': {\n      const footer = document.createElement('footer');\n      footer.className = 'rendered-page-footer';\n      appendRenderedBody(footer, el, elementIds, { inline: true }, assetUrls);\n      return wrapRendered(el, footer, elementId);\n    }\n    case 'list':\n      return renderList(el, elementIds, assetUrls);\n    case 'table':\n    case 'index':\n    case 'tabular':\n      return renderOtslContainer(el, elementIds, assetUrls);\n    case 'code':\n      return renderCode(el, elementIds, ctx, assetUrls);\n    case 'formula':\n      return renderFormula(el, elementIds, ctx, assetUrls);\n    case 'picture':\n      return renderPicture(el, elementIds, assetUrls);\n    case 'group': {\n      const figure = document.createElement('figure');\n      figure.className = 'rendered-group';\n      appendRenderedBodyBlocks(figure, el, elementIds, assetUrls);\n      const cap = readCaptionElement(el);\n      if (cap)\n        figure.appendChild(\n          renderEmbeddedCaption(cap, elementIds, 'figcaption', assetUrls)\n        );\n      return wrapRendered(el, figure, elementId);\n    }\n    case 'field_region': {\n      const div = document.createElement('div');\n      div.className = 'rendered-field-region';\n      appendRenderedBodyBlocks(div, el, elementIds, assetUrls);\n      return wrapRendered(el, div, elementId);\n    }\n    case 'field_item': {\n      const div = document.createElement('div');\n      div.className = 'rendered-field-item';\n      appendRenderedBodyBlocks(div, el, elementIds, assetUrls);\n      return wrapRendered(el, div, elementId);\n    }\n    default:\n      return renderUnsupported(el, elementIds);\n  }\n}\n\nfunction appendRenderedNode(\n  parent: HTMLElement,\n  node: ChildNode,\n  elementIds: Map<Element, string>,\n  ctx: RenderCtx,\n  assetUrls?: Map<string, string>\n): void {\n  if (isTextLikeNode(node)) {\n    let text = node.textContent;\n    if (!text || !text.trim()) return;\n    if (ctx.trimLeading) {\n      text = text.replace(/^\\s+/u, '');\n      ctx.trimLeading = false;\n      if (!text) return;\n    }\n    parent.appendChild(document.createTextNode(text));\n    return;\n  }\n  if (node.nodeType !== Node.ELEMENT_NODE) return;\n\n  const el = node as Element;\n  const tag = localName(el);\n  if (HEAD_TAGS.has(tag)) return;\n\n  if (RENDER_FORMAT_TAGS.has(tag)) {\n    parent.appendChild(renderFormatElement(el, elementIds, ctx, assetUrls));\n    return;\n  }\n\n  if (tag === 'code' || tag === 'formula') {\n    const rendered = renderBlockElement(el, elementIds, { inline: true }, assetUrls);\n    if (rendered) parent.appendChild(rendered);\n    return;\n  }\n\n  if (RENDER_BLOCK_TAGS.has(tag)) {\n    const rendered = renderBlockElement(el, elementIds, ctx, assetUrls);\n    if (rendered) parent.appendChild(rendered);\n    return;\n  }\n\n  if (tag === 'marker') {\n    parent.appendChild(renderMarkerElement(el, elementIds, ctx, assetUrls));\n    return;\n  }\n\n  if (tag === 'checkbox') {\n    parent.appendChild(renderCheckboxElement(el, elementIds));\n    return;\n  }\n\n  if (tag === 'key') {\n    parent.appendChild(renderFieldKeyElement(el, elementIds, ctx, assetUrls));\n    return;\n  }\n\n  if (tag === 'value') {\n    parent.appendChild(renderFieldValueElement(el, elementIds, ctx, assetUrls));\n    return;\n  }\n\n  if (tag === 'hint') {\n    parent.appendChild(renderFieldHintElement(el, elementIds, ctx, assetUrls));\n    return;\n  }\n\n  if (tag === 'ldiv') return;\n  if (isCellToken(tag) || tag === 'src' || tag === 'tabular') return;\n\n  appendRenderedBody(parent, el, elementIds, ctx, assetUrls);\n}\n\n// ---------------------------------------------------------------------------\n// Fragment merge helpers\n// ---------------------------------------------------------------------------\n\nfunction findLastTextNode(node: Node): Node | null {\n  if (isTextLikeNode(node)) return node;\n  if (node.nodeType !== Node.ELEMENT_NODE) return null;\n  for (let i = node.childNodes.length - 1; i >= 0; i -= 1) {\n    const found = findLastTextNode(node.childNodes[i]!);\n    if (found) return found;\n  }\n  return null;\n}\n\nfunction trimParentTrailingForFragmentJoin(parent: HTMLElement): void {\n  const lastText = findLastTextNode(parent);\n  if (!lastText) return;\n  let value = lastText.textContent ?? '';\n  value = value.replace(/\\s+$/u, '');\n  if (value.endsWith('-')) value = value.slice(0, -1);\n  if (!value) {\n    lastText.parentNode?.removeChild(lastText);\n    trimParentTrailingForFragmentJoin(parent);\n    return;\n  }\n  lastText.textContent = value;\n}\n\nfunction appendMergedTextFragments(\n  parent: HTMLElement,\n  fragments: Element[],\n  elementIds: Map<Element, string>,\n  assetUrls: Map<string, string> | undefined\n): void {\n  for (let i = 0; i < fragments.length; i += 1) {\n    if (i > 0) trimParentTrailingForFragmentJoin(parent);\n    appendRenderedBody(\n      parent,\n      fragments[i]!,\n      elementIds,\n      {\n        inline: true,\n        trimLeading: i > 0,\n      },\n      assetUrls\n    );\n  }\n}\n\nfunction renderMergedIntraPageFragments(\n  fragments: Element[],\n  elementIds: Map<Element, string>,\n  assetUrls: Map<string, string> | undefined\n): HTMLElement {\n  const first = fragments[0]!;\n  const tag = localName(first);\n  const firstId = elementIds.get(first);\n  const threadId = elementThreadId(first);\n\n  let node: HTMLElement;\n  if (tag === 'text') {\n    node = document.createElement('p');\n    appendMergedTextFragments(node, fragments, elementIds, assetUrls);\n  } else if (tag === 'list') {\n    const listClass = first.getAttribute('class') ?? 'unordered';\n    node = document.createElement(listClass === 'ordered' ? 'ol' : 'ul');\n    for (const el of fragments) {\n      appendListItemsFromElement(node, el, elementIds, assetUrls);\n    }\n  } else {\n    node = document.createElement('div');\n    node.className = 'rendered-fragment-merged-body';\n    for (const el of fragments) {\n      appendRenderedBodyBlocks(node, el, elementIds, assetUrls);\n    }\n  }\n\n  const wrap = wrapRendered(first, node, firstId, 'rendered-fragment-merged');\n  if (threadId) wrap.setAttribute('data-thread-id', threadId);\n  return wrap;\n}\n\nfunction collectIntraPageThreads(segment: Element[]): Map<string, Element[]> {\n  const byThread = new Map<string, Element[]>();\n  for (const el of segment) {\n    if (el.nodeType !== Node.ELEMENT_NODE) continue;\n    if (localName(el) === 'page_break') continue;\n    const tid = elementThreadId(el);\n    if (!tid) continue;\n    if (!byThread.has(tid)) byThread.set(tid, []);\n    byThread.get(tid)!.push(el);\n  }\n  for (const [tid, members] of byThread) {\n    if (members.length < 2) byThread.delete(tid);\n  }\n  return byThread;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n@customElement('doclang-reading-pane')\nexport class DoclangReadingPane extends DoclangPageElement {\n  static override styles = unsafeCSS(styles);\n\n  @state() private _showFurniture = true;\n  @state() private _showBackground = true;\n  @state() private _settingsOpen = false;\n  @state() private _visible = false;\n  // null = no document loaded yet; false = document loaded but no markup; true = has markup\n  private _pageController = new PageController(this, () => this.scrollPane);\n\n  @state() private _hasMarkup: boolean | null = null;\n  private _pendingContent: HTMLElement | null = null;\n  private _settingsPanelRef: Ref<DoclangSettingsPanel> = createRef();\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.classList.add('pane', 'pane-reading');\n  }\n\n  override render() {\n    const bodyClasses = {\n      'pane-body': true,\n      'show-reading-furniture': this._showFurniture,\n      'show-reading-background': this._showBackground,\n    };\n\n    return html`\n      <div class=\"pane-header\">\n        <span class=\"pane-header-title\">Reading view</span>\n        ${this._visible\n          ? html`<button\n              type=\"button\"\n              class=\"pane-settings-toggle\"\n              aria-expanded=${this._settingsOpen ? 'true' : 'false'}\n              @click=${this._onSettingsToggle}\n            >\n              Layers\n            </button>`\n          : nothing}\n      </div>\n      <div class=\"pane-reading-layout\">\n        <div\n          id=\"rendered-pane\"\n          class=${classMap(bodyClasses)}\n          @click=${this._onBodyClick}\n        >\n          ${this._hasMarkup === false\n            ? html`<div class=\"placeholder\">${NO_MARKUP}</div>`\n            : this._hasMarkup === true\n              ? html`<div ${ref(this._onContentRef)}></div>`\n              : nothing}\n        </div>\n        ${this._visible\n          ? html`\n              <doclang-settings-panel\n                ${ref(this._settingsPanelRef)}\n                label=\"Layers\"\n                @doclang-settings-close=${this._onSettingsClose}\n              >\n                <div class=\"settings-subgroup\">\n                  <label class=\"settings-option settings-option-sub\">\n                    <input\n                      type=\"checkbox\"\n                      class=\"cb-furniture\"\n                      .checked=${this._showFurniture}\n                      @change=${this._onFurnitureChange}\n                    />\n                    <span>Furniture</span>\n                  </label>\n                  <label class=\"settings-option settings-option-sub\">\n                    <input\n                      type=\"checkbox\"\n                      class=\"cb-background\"\n                      .checked=${this._showBackground}\n                      @change=${this._onBackgroundChange}\n                    />\n                    <span>Background</span>\n                  </label>\n                </div>\n              </doclang-settings-panel>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n\n  private _onContentRef = (el: Element | undefined): void => {\n    if (el && this._pendingContent) {\n      (el as HTMLElement).replaceChildren(this._pendingContent);\n    }\n  };\n\n  override updated(changed: PropertyValues): void {\n    super.updated(changed);\n    if (!this._pendingContent) return;\n    const wrapper = this.shadowRoot?.querySelector(\n      '.pane-body > div'\n    ) as HTMLElement | null;\n    if (wrapper && !wrapper.contains(this._pendingContent)) {\n      wrapper.replaceChildren(this._pendingContent);\n    }\n  }\n\n  /** The scrollable content body inside the shadow root. */\n  get scrollPane(): HTMLElement | null {\n    return this.shadowRoot?.querySelector('.pane-body') ?? null;\n  }\n\n  setVisible(visible: boolean): void {\n    this._visible = visible;\n    // `hidden` is not a @state property so we call requestUpdate explicitly.\n    this.hidden = !visible;\n    this.requestUpdate();\n  }\n\n  protected override _applySelection(): void {\n    if (!this.shadowRoot) return;\n    for (const el of this.shadowRoot.querySelectorAll('.rendered-el.selected')) {\n      el.classList.remove('selected');\n    }\n    if (!this.selected) return;\n    const renderedEl = this._findRenderedElement(this.selected, this._peerIds);\n    if (!renderedEl) return;\n    this._revealContext(renderedEl);\n    renderedEl.classList.add('selected');\n    renderedEl.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n  }\n\n  // ---------------------------------------------------------------------------\n  // Document rendering\n  // ---------------------------------------------------------------------------\n\n  protected override _renderDocument(): void {\n    const state = this._docState;\n    if (!state) {\n      this._pendingContent = null;\n      this._hasMarkup = null;\n      return;\n    }\n\n    const segment = state.segments[this.page - 1] ?? [];\n    // elementIds may already have been assigned by markup-pane; re-use if available\n    const elementIds = state.elementIds.size\n      ? state.elementIds\n      : assignElementIds(segment);\n    state.elementIds = elementIds;\n\n    if (segmentHasMarkup(segment)) {\n      this._pendingContent = this._buildRenderedArticle(segment, elementIds);\n      this._hasMarkup = true;\n    } else {\n      this._pendingContent = null;\n      this._hasMarkup = false;\n    }\n    this.requestUpdate();\n  }\n\n  protected override _clearDocument(): void {\n    this._pendingContent = null;\n    this._hasMarkup = null;\n    this.requestUpdate();\n  }\n\n  // ---------------------------------------------------------------------------\n  // Event handlers\n  // ---------------------------------------------------------------------------\n\n  private _onSettingsToggle = (): void => {\n    this._settingsOpen = !this._settingsOpen;\n    this._settingsPanelRef.value?.setOpen(this._settingsOpen);\n    this.requestUpdate();\n  };\n\n  private _onSettingsClose = (): void => {\n    this._settingsOpen = false;\n    this.requestUpdate();\n  };\n\n  private _onFurnitureChange = (e: Event): void => {\n    this._showFurniture = (e.target as HTMLInputElement).checked;\n    this.dispatchEvent(\n      new CustomEvent('doclang-show-reading-furniture', {\n        bubbles: true,\n        composed: true,\n        detail: { checked: this._showFurniture },\n      })\n    );\n  };\n\n  private _onBackgroundChange = (e: Event): void => {\n    this._showBackground = (e.target as HTMLInputElement).checked;\n    this.dispatchEvent(\n      new CustomEvent('doclang-show-reading-background', {\n        bubbles: true,\n        composed: true,\n        detail: { checked: this._showBackground },\n      })\n    );\n  };\n\n  private _onBodyClick = (e: MouseEvent): void => {\n    const target = e.target as Element;\n    const ghostText = target.closest('.rendered-el-virtual-text');\n    const elementId = ghostText?.hasAttribute('data-element-id')\n      ? ghostText.getAttribute('data-element-id')!\n      : (target\n          .closest('.rendered-el[data-element-id]')\n          ?.getAttribute('data-element-id') ?? null);\n    if (elementId) {\n      this.dispatchEvent(\n        new CustomEvent('doclang-element-select', {\n          bubbles: true,\n          composed: true,\n          detail: { id: elementId },\n        })\n      );\n    }\n  };\n\n  // ---------------------------------------------------------------------------\n  // Private helpers\n  // ---------------------------------------------------------------------------\n\n  private _buildRenderedArticle(\n    segment: Element[],\n    elementIds: Map<Element, string>\n  ): HTMLElement {\n    const assetUrls = this._docState?.assetUrls;\n    const intraPageThreads = collectIntraPageThreads(segment);\n    const skipElements = new Set<Element>();\n    const mergeGroups = new Map<Element, Element[]>();\n\n    for (const [, members] of intraPageThreads) {\n      mergeGroups.set(members[0]!, members);\n      for (let i = 1; i < members.length; i += 1) {\n        skipElements.add(members[i]!);\n      }\n    }\n\n    const article = document.createElement('article');\n    article.className = 'rendered-doc';\n    for (const el of segment) {\n      if (el.nodeType !== Node.ELEMENT_NODE) continue;\n      if (localName(el) === 'page_break') continue;\n      if (skipElements.has(el)) continue;\n\n      const mergeGroup = mergeGroups.get(el);\n      const rendered = mergeGroup\n        ? renderMergedIntraPageFragments(mergeGroup, elementIds, assetUrls)\n        : renderBlockElement(el, elementIds, { inline: false }, assetUrls);\n      if (rendered) article.appendChild(rendered);\n    }\n    return article;\n  }\n\n  private _findRenderedElement(\n    elementId: string,\n    peerIds: Set<string>\n  ): Element | null {\n    if (!this.shadowRoot) return null;\n    const direct =\n      this.shadowRoot.querySelector(\n        `.rendered-el-virtual-text[data-element-id=\"${elementId}\"]`\n      ) ??\n      this.shadowRoot.querySelector(`.rendered-el[data-element-id=\"${elementId}\"]`);\n    if (direct) return direct;\n\n    const xmlEl = this._docState?.idToElement?.get(elementId);\n    const threadId = xmlEl ? elementThreadId(xmlEl) : null;\n    if (!threadId) return null;\n    const merged = this.shadowRoot.querySelector(\n      `.rendered-fragment-merged[data-thread-id=\"${threadId}\"]`\n    );\n    if (!merged) return null;\n    const primaryId = merged.getAttribute('data-element-id');\n    if (!primaryId || primaryId === elementId) return merged;\n    return peerIds.has(elementId) ? merged : null;\n  }\n\n  private _revealContext(renderedEl: Element): void {\n    const pictureContents = renderedEl.closest(\n      '.rendered-picture-contents'\n    ) as HTMLDetailsElement | null;\n    if (pictureContents && !pictureContents.open) pictureContents.open = true;\n    this._revealLayer(renderedEl);\n  }\n\n  private _revealLayer(renderedEl: Element): void {\n    const layer = renderedEl.getAttribute('data-doclang-layer');\n    if (!layer || layer === 'body') return;\n    if (layer === 'furniture' && !this._showFurniture) {\n      this._showFurniture = true;\n      this.dispatchEvent(\n        new CustomEvent('doclang-show-reading-furniture', {\n          bubbles: true,\n          composed: true,\n          detail: { checked: true },\n        })\n      );\n    } else if (layer === 'background' && !this._showBackground) {\n      this._showBackground = true;\n      this.dispatchEvent(\n        new CustomEvent('doclang-show-reading-background', {\n          bubbles: true,\n          composed: true,\n          detail: { checked: true },\n        })\n      );\n    }\n  }\n}\n","@import '../theme.css';\n\n:host {\n  display: contents;\n}\n.empty-state {\n  flex: 1 1 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 0;\n  margin: 1rem;\n  padding: 2rem 1.5rem;\n  border: 2px dashed var(--border);\n  border-radius: 0.75rem;\n  background: var(--placeholder-bg);\n  text-align: center;\n  color: var(--muted);\n}\n.empty-state-inner {\n  max-width: 28rem;\n}\n.empty-state-loading {\n  display: none;\n  flex-direction: column;\n  align-items: center;\n}\n:host(.demo-loading) .empty-state-loading {\n  display: flex;\n}\n:host(.demo-loading) .empty-state-prompt {\n  display: none;\n}\n.loading-spinner {\n  width: 2rem;\n  height: 2rem;\n  margin: 0 auto 1rem;\n  border: 2px solid var(--border);\n  border-top-color: var(--accent);\n  border-radius: 50%;\n  animation: loading-spin 0.7s linear infinite;\n}\n@keyframes loading-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.empty-state-title {\n  margin: 0 0 0.75rem;\n  font-size: 1.05rem;\n  color: var(--text);\n}\n.empty-state p {\n  margin: 0.5rem 0;\n}\n.empty-state-action {\n  margin: 0 0 0.75rem;\n}\n.text-link {\n  color: var(--accent);\n  text-decoration: underline;\n}\n.text-link:hover {\n  opacity: 0.85;\n}\n.empty-state-meta {\n  font-size: 0.875rem;\n}\ncode {\n  font-family: var(--font-mono);\n}\n","/** <doclang-empty-state> — loading/prompt empty state */\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { unsafeCSS } from 'lit';\nimport styles from './empty.css?inline';\n\n@customElement('doclang-empty')\nexport class DoclangEmpty extends LitElement {\n  static override styles = unsafeCSS(styles);\n\n  private _extensions: string[] = [];\n\n  override render() {\n    return html`\n      <div class=\"empty-state\">\n        <div class=\"empty-state-inner\">\n          <div\n            class=\"empty-state-loading\"\n            role=\"status\"\n            aria-live=\"polite\"\n            aria-label=\"Loading demo document\"\n          >\n            <div class=\"loading-spinner\" aria-hidden=\"true\"></div>\n            <p class=\"empty-state-title\">Loading demo&#x2026;</p>\n            <p class=\"empty-state-meta\">Preparing the sample document</p>\n          </div>\n          <div class=\"empty-state-prompt\">\n            <p class=\"empty-state-title\">Drop a DocLang file here</p>\n            <p class=\"empty-state-meta\">\n              Supported file types:\n              <span class=\"file-types\"\n                >${this._extensions.map(\n                  (ext, i) => html`${i > 0 ? ', ' : ''}<code>${ext}</code>`\n                )}</span\n              >\n            </p>\n            <p class=\"empty-state-action\">\n              or\n              <a\n                href=\"#\"\n                class=\"text-link\"\n                @click=${(e: Event) => {\n                  e.preventDefault();\n                  this.dispatchEvent(\n                    new CustomEvent('doclang-load-demo', {\n                      bubbles: true,\n                      composed: true,\n                    })\n                  );\n                }}\n                >load demo</a\n              >\n            </p>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  setFileTypeHints(extensions: string[]): void {\n    this._extensions = extensions;\n    this.requestUpdate();\n  }\n\n  setDemoLoading(loading: boolean): void {\n    this.classList.toggle('demo-loading', loading);\n  }\n}\n","/**\n * <doclang-pane-stack> — synchronises a set of DoclangPageElement children.\n *\n * Place any number of DoclangPageElement-based panes as children (via slot).\n *\n * Example:\n *   <doclang-pane-stack src=\"doc.dclx\" page=\"1\">\n *     <doclang-markup-pane></doclang-markup-pane>\n *     <doclang-reading-pane></doclang-reading-pane>\n *   </doclang-pane-stack>\n */\n\nimport { html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { DoclangPageElement } from '../base/page-element';\n\n@customElement('doclang-pane-stack')\nexport class DoclangPaneStack extends DoclangPageElement {\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('view-page', this._onChildViewPage as EventListener);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('view-page', this._onChildViewPage as EventListener);\n  }\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n\n  protected override _renderDocument(): void {\n    this._pushToChildren();\n  }\n\n  protected override _clearDocument(): void {\n    this._pushToChildren();\n  }\n\n  protected override _applySelection(): void {\n    this._pushSelectedToChildren();\n  }\n\n  private _children(): DoclangPageElement[] {\n    return Array.from(this.children).filter(\n      (el): el is DoclangPageElement => el instanceof DoclangPageElement,\n    );\n  }\n\n  private _pushToChildren(): void {\n    for (const child of this._children()) {\n      child.document = this._docState;\n      child.page = this.page;\n      child.selected = this.selected ?? null;\n    }\n  }\n\n  private _pushSelectedToChildren(): void {\n    for (const child of this._children()) {\n      child.selected = this.selected ?? null;\n    }\n  }\n\n  private _onChildViewPage = (e: Event): void => {\n    // Only handle events from children, not from self (PageController on this\n    // element would emit on self too if it were installed — it isn't, but\n    // guard anyway).\n    if (e.target === this) return;\n    const requested = (e as CustomEvent<{ page: number }>).detail.page;\n    // Stop the event here — pane-stack owns page navigation for its subtree.\n    e.stopPropagation();\n    this.page = requested;\n    // page setter → updated() → _renderDocument() → _pushToChildren()\n  };\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'doclang-pane-stack': DoclangPaneStack;\n  }\n}\n","import{noChange as t}from\"../lit-html.js\";import{directive as e,Directive as r,PartType as s}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const n=\"important\",i=\" !\"+n,o=e(class extends r{constructor(t){if(super(t),t.type!==s.ATTRIBUTE||\"style\"!==t.name||t.strings?.length>2)throw Error(\"The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.\")}render(t){return Object.keys(t).reduce((e,r)=>{const s=t[r];return null==s?e:e+`${r=r.includes(\"-\")?r:r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,\"-$&\").toLowerCase()}:${s};`},\"\")}update(e,[r]){const{style:s}=e.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(r)),this.render(r);for(const t of this.ft)null==r[t]&&(this.ft.delete(t),t.includes(\"-\")?s.removeProperty(t):s[t]=null);for(const t in r){const e=r[t];if(null!=e){this.ft.add(t);const r=\"string\"==typeof e&&e.endsWith(i);t.includes(\"-\")||r?s.setProperty(t,r?e.slice(0,-11):e,r?n:\"\"):s[t]=e}}return t}});export{o as styleMap};\n//# sourceMappingURL=style-map.js.map\n","@import '../theme.css';\n\n/* -----------------------------------------------------------------------\n   DoclangViewer host — full-page shell\n   ----------------------------------------------------------------------- */\n\n:host {\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n  font-family: var(--font-ui);\n  background: var(--bg);\n  color: var(--text);\n}\n\n:host(.drag-over) {\n  background: color-mix(in srgb, var(--accent) 6%, var(--bg));\n}\n\n:host(.drag-over) doclang-empty {\n  border-color: var(--accent);\n  background: color-mix(in srgb, var(--accent) 8%, var(--placeholder-bg));\n}\n\n/* -----------------------------------------------------------------------\n   Header\n   ----------------------------------------------------------------------- */\n\nheader {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  align-items: center;\n  gap: 1rem;\n  padding: 0.75rem 1rem;\n  border-bottom: 1px solid var(--border);\n  background: var(--panel);\n}\n\n.header-brand {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  min-width: 0;\n  grid-column: 1;\n  justify-self: start;\n}\n\nheader h1 {\n  margin: 0;\n  font-size: 1.1rem;\n  font-weight: 600;\n}\n\n.header-center {\n  grid-column: 2;\n  justify-self: center;\n  min-width: 0;\n  text-align: center;\n}\n\n.doc-label {\n  color: var(--muted);\n  font-size: 0.8125rem;\n  font-weight: 400;\n  min-width: 0;\n  max-width: min(40vw, 28rem);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.header-logo-link {\n  display: block;\n  flex-shrink: 0;\n  border-radius: 0.25rem;\n  line-height: 0;\n  text-decoration: none;\n}\n\n.header-logo-link:hover {\n  opacity: 0.8;\n}\n\n.header-logo {\n  display: block;\n  height: 2.25rem;\n  width: auto;\n}\n\n.header-logo-link:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n}\n\n.toolbar-wrap {\n  grid-column: 3;\n  justify-self: end;\n}\n\n/* -----------------------------------------------------------------------\n   Drop banner\n   ----------------------------------------------------------------------- */\n\n.drop-banner {\n  display: none;\n  margin: 0;\n  padding: 0.35rem 1rem;\n  text-align: center;\n  font-size: 0.8125rem;\n  color: var(--muted);\n  background: color-mix(in srgb, var(--accent) 8%, var(--panel));\n  border-bottom: 1px solid var(--border);\n}\n\n:host(.loaded.drag-over) .drop-banner {\n  display: block;\n}\n\n/* -----------------------------------------------------------------------\n   Empty state\n   ----------------------------------------------------------------------- */\n\n:host(.loaded) doclang-empty {\n  display: none;\n}\n\n/* -----------------------------------------------------------------------\n   Pane grid\n   ----------------------------------------------------------------------- */\n\n.main {\n  display: none;\n  flex: 1 1 0;\n  min-height: 0;\n}\n\n:host(.loaded) .main {\n  display: grid;\n  grid-template-rows: minmax(0, 1fr);\n}\n\n:host(.loaded) .main .pane {\n  border-right: none;\n}\n\n.pane {\n  display: flex;\n  flex-direction: column;\n  border-right: 1px solid var(--border);\n  min-height: 0;\n  min-width: 0;\n}\n\n.pane[hidden] {\n  display: none !important;\n}\n\n/* -----------------------------------------------------------------------\n   Pane splitters\n   ----------------------------------------------------------------------- */\n\n.pane-splitter {\n  position: relative;\n  width: 1px;\n  margin: 0 -4px;\n  padding: 0 4px;\n  box-sizing: content-box;\n  cursor: col-resize;\n  touch-action: none;\n  z-index: 2;\n  background: transparent;\n}\n\n.pane-splitter::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 4px;\n  width: 1px;\n  background: var(--border);\n  transition:\n    background 0.15s ease,\n    width 0.15s ease;\n}\n\n.pane-splitter:hover::after,\n.pane-splitter:focus-visible::after,\n.pane-splitter.is-dragging::after {\n  width: 3px;\n  background: var(--accent);\n}\n\n.pane-splitter[hidden] {\n  display: none !important;\n}\n\n:host(.pane-drag-active) {\n  cursor: col-resize;\n  user-select: none;\n}\n\n:host(.pane-drag-active) .pane-splitter {\n  cursor: col-resize;\n}\n\n/* -----------------------------------------------------------------------\n   Responsive stacked layout\n   ----------------------------------------------------------------------- */\n\n@media (max-width: 1200px) {\n  :host(.loaded) .main {\n    grid-template-columns: 1fr !important;\n    grid-template-rows: unset;\n  }\n\n  :host(.loaded) .main .pane {\n    grid-column: 1 !important;\n    border-right: none;\n    border-bottom: 1px solid var(--border);\n  }\n\n  :host(.loaded) .main .pane-splitter {\n    display: none !important;\n  }\n}\n\n","/** File-collection controller — owns catalog state and all mutation logic */\n\nimport type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport type { FileCatalogEntry } from '../../doclang/types';\nimport type { DocumentState } from '../../doclang/types';\nimport {\n  PAGE_IMAGE_RE,\n  buildDocumentState,\n  extractArchiveFromFiles,\n  extractArchiveFromZipBuffer,\n  revokeDocumentState,\n} from '../../doclang/document';\nimport { PAGE_ZOOM_DEFAULT } from '../page-img-pane/overlay';\nimport { unzip } from '../../doclang/zip';\n\nexport interface CollectionEntry {\n  label: string;\n  thumbnailUrl: string | null;\n  isActive: boolean;\n}\n\nexport class CollectionController implements ReactiveController {\n  private readonly _host: ReactiveControllerHost;\n\n  // Catalog state — mutations call _requestUpdate() so the host re-renders.\n  private _catalog: FileCatalogEntry[] = [];\n  private _activeIndex = -1;\n\n  constructor(host: ReactiveControllerHost) {\n    this._host = host;\n    host.addController(this);\n  }\n\n  hostConnected(): void {}\n  hostDisconnected(): void {}\n\n  get entries(): CollectionEntry[] {\n    return this._catalog.map((entry, i) => ({\n      label: entry.label,\n      thumbnailUrl: entry.thumbnailUrl,\n      isActive: i === this._activeIndex,\n    }));\n  }\n\n  get size(): number {\n    return this._catalog.length;\n  }\n\n  get activeIndex(): number {\n    return this._activeIndex;\n  }\n\n  get activeEntry(): FileCatalogEntry | null {\n    return this._catalog[this._activeIndex] ?? null;\n  }\n\n  hasMultiple(): boolean {\n    return this._catalog.length > 1;\n  }\n\n  findCatalogIndexForFile(file: File): number {\n    return this._catalog.findIndex(entry => {\n      const source = entry.source;\n      return (\n        source instanceof File &&\n        source.name === file.name &&\n        source.size === file.size &&\n        source.lastModified === file.lastModified\n      );\n    });\n  }\n\n  async addFiles(files: File[], { replace = false } = {}): Promise<DocumentState | null> {\n    if (replace) this._clearAll();\n    const startIndex = this._catalog.length;\n    let switchIndex: number | null = null;\n    for (const file of files) {\n      const existingIndex = replace ? -1 : this.findCatalogIndexForFile(file);\n      if (existingIndex !== -1) {\n        if (switchIndex === null) switchIndex = existingIndex;\n        continue;\n      }\n      const entry = this._createEntry(file);\n      this._catalog.push(entry);\n      this._enrichThumbnail(entry);\n      if (switchIndex === null) switchIndex = this._catalog.length - 1;\n    }\n    if (!this._catalog.length) return null;\n    return this._switchTo(replace ? 0 : switchIndex ?? startIndex);\n  }\n\n  async addArchiveBuffer(\n    buffer: ArrayBuffer,\n    label: string,\n    { replace = false } = {}\n  ): Promise<DocumentState | null> {\n    if (replace) this._clearAll();\n    const entry: FileCatalogEntry = {\n      id: crypto.randomUUID(),\n      label,\n      kind: 'archive',\n      source: buffer,\n      currentPage: 1,\n      pageZoom: PAGE_ZOOM_DEFAULT,\n      snapshot: null,\n      thumbnailUrl: null,\n    };\n    this._catalog.push(entry);\n    this._enrichThumbnail(entry);\n    return this._switchTo(replace ? 0 : this._catalog.length - 1);\n  }\n\n  async appendFolderArchive(files: File[]): Promise<DocumentState | null> {\n    if (!files.some(f => f.name === 'document.xml')) {\n      alert('Archive must contain document.xml at its root.');\n      return null;\n    }\n    const rootName =\n      (files[0]!.webkitRelativePath || files[0]!.name).split('/')[0] || 'archive';\n    const entry: FileCatalogEntry = {\n      id: crypto.randomUUID(),\n      label: rootName,\n      kind: 'folder',\n      source: files,\n      currentPage: 1,\n      pageZoom: PAGE_ZOOM_DEFAULT,\n      snapshot: null,\n      thumbnailUrl: null,\n    };\n    this._catalog.push(entry);\n    this._enrichThumbnail(entry);\n    return this._switchTo(this._catalog.length - 1);\n  }\n\n  /** Persist scroll/zoom state for the currently-active entry. */\n  persistActiveViewState(page: number, zoomPercent: number): void {\n    const entry = this.activeEntry;\n    if (!entry) return;\n    entry.currentPage = page;\n    entry.pageZoom = zoomPercent;\n  }\n\n  /** Switch to the entry at index; returns the parsed DocumentState or null on failure. */\n  async selectEntry(index: number): Promise<DocumentState | null> {\n    if (index < 0 || index >= this._catalog.length) return null;\n    this._releaseActive();\n    return this._switchTo(index);\n  }\n\n  /** Close (remove) the entry at index; returns the new active DocumentState, or null. */\n  async closeEntry(index: number): Promise<{ doc: DocumentState | null; newIndex: number }> {\n    if (index < 0 || index >= this._catalog.length) return { doc: null, newIndex: -1 };\n    const wasActive = index === this._activeIndex;\n    const entry = this._catalog[index]!;\n    if (wasActive) {\n      this._releaseActive();\n      this._activeIndex = -1;\n    }\n    this._revoke(entry);\n    this._catalog.splice(index, 1);\n\n    if (!this._catalog.length) {\n      this._requestUpdate();\n      return { doc: null, newIndex: -1 };\n    }\n    if (wasActive) {\n      const nextIndex = Math.min(index, this._catalog.length - 1);\n      const doc = await this._switchTo(nextIndex);\n      return { doc, newIndex: this._activeIndex };\n    }\n    if (index < this._activeIndex) this._activeIndex -= 1;\n    this._requestUpdate();\n    return { doc: null, newIndex: this._activeIndex };\n  }\n\n  clearAll(): void {\n    this._clearAll();\n    this._requestUpdate();\n  }\n\n  isArchiveFile(file: File): boolean {\n    return /\\.dclx$/i.test(file.name) || /\\.zip$/i.test(file.name);\n  }\n\n  isMarkupFile(file: File): boolean {\n    return /\\.(?:dclg(?:\\.xml)?|xml)$/i.test(file.name);\n  }\n\n  private _requestUpdate(): void {\n    this._host.requestUpdate();\n  }\n\n  private async _switchTo(index: number): Promise<DocumentState | null> {\n    this._activeIndex = index;\n    const entry = this._catalog[index]!;\n    const doc = await this._parse(entry);\n    if (!doc) {\n      this._revoke(entry);\n      this._catalog.splice(index, 1);\n      this._activeIndex = -1;\n      this._requestUpdate();\n      if (this._catalog.length)\n        return this._switchTo(Math.min(index, this._catalog.length - 1));\n      return null;\n    }\n    entry.snapshot = doc;\n    return doc;\n  }\n\n  private _releaseActive(): void {\n    const entry = this.activeEntry;\n    if (entry?.snapshot) {\n      revokeDocumentState(entry.snapshot);\n      entry.snapshot = null;\n    }\n  }\n\n  private _clearAll(): void {\n    this._releaseActive();\n    for (const entry of this._catalog) this._revoke(entry);\n    this._catalog = [];\n    this._activeIndex = -1;\n  }\n\n  private _revoke(entry: FileCatalogEntry): void {\n    if (entry.thumbnailUrl?.startsWith('blob:')) URL.revokeObjectURL(entry.thumbnailUrl);\n    entry.thumbnailUrl = null;\n  }\n\n  private _createEntry(file: File): FileCatalogEntry {\n    return {\n      id: crypto.randomUUID(),\n      label: file.name,\n      kind: this.isMarkupFile(file) ? 'markup' : 'archive',\n      source: file,\n      currentPage: 1,\n      pageZoom: PAGE_ZOOM_DEFAULT,\n      snapshot: null,\n      thumbnailUrl: null,\n    };\n  }\n\n  private _enrichThumbnail(entry: FileCatalogEntry): void {\n    this._resolveThumbnail(entry).then(url => {\n      if (!this._catalog.includes(entry)) {\n        if (url?.startsWith('blob:')) URL.revokeObjectURL(url);\n        return;\n      }\n      if (url) this._requestUpdate();\n    });\n  }\n\n  private async _resolveThumbnail(entry: FileCatalogEntry): Promise<string | null> {\n    if (entry.thumbnailUrl) return entry.thumbnailUrl;\n    if (entry.kind === 'markup') return null;\n    try {\n      if (entry.kind === 'folder')\n        entry.thumbnailUrl = this._firstPageUrlFromFiles(entry.source as File[]);\n      else if (entry.kind === 'archive')\n        entry.thumbnailUrl = await this._firstPageUrlFromZip(entry.source as File | ArrayBuffer);\n    } catch {\n      entry.thumbnailUrl = null;\n    }\n    return entry.thumbnailUrl;\n  }\n\n  private _firstPageUrlFromFiles(files: File[]): string | null {\n    let bestPage = Infinity;\n    let bestFile: File | null = null;\n    for (const f of files) {\n      const relPath = f.webkitRelativePath || f.name;\n      const parts = relPath.split('/');\n      if (parts.length < 2 || parts[parts.length - 2] !== 'pages') continue;\n      const m = PAGE_IMAGE_RE.exec(f.name);\n      if (!m) continue;\n      const pageNum = Number(m[1]);\n      if (pageNum < bestPage) { bestPage = pageNum; bestFile = f; }\n    }\n    return bestFile ? URL.createObjectURL(bestFile) : null;\n  }\n\n  private async _firstPageUrlFromZip(source: File | ArrayBuffer): Promise<string | null> {\n    const buffer = source instanceof File ? await source.arrayBuffer() : source;\n    const entries = await unzip(buffer, {\n      shouldExtract: name => /^pages\\/\\d+\\.(png|jpe?g|webp)$/i.test(name),\n    });\n    let bestPage = Infinity;\n    let bestEntry: { name: string; data: Uint8Array } | null = null;\n    for (const e of entries) {\n      const m = e.name.match(/^pages\\/(\\d+)\\.(png|jpe?g|webp)$/i);\n      if (!m) continue;\n      const pageNum = Number(m[1]);\n      if (pageNum < bestPage) { bestPage = pageNum; bestEntry = e; }\n    }\n    if (!bestEntry) return null;\n    const ext = bestEntry.name.split('.').pop() ?? 'png';\n    return URL.createObjectURL(new Blob([bestEntry.data as BlobPart], { type: this._mimeFromExt(ext) }));\n  }\n\n  private _mimeFromExt(ext: string): string {\n    const n = ext.toLowerCase().replace('jpeg', 'jpg');\n    if (n === 'png') return 'image/png';\n    if (n === 'webp') return 'image/webp';\n    return 'image/jpeg';\n  }\n\n  private async _parse(entry: FileCatalogEntry): Promise<DocumentState | null> {\n    try {\n      if (entry.kind === 'markup') {\n        const text =\n          entry.source instanceof File\n            ? await (entry.source as File).text()\n            : new TextDecoder().decode(entry.source as ArrayBuffer);\n        return buildDocumentState(text, new Map(), entry.label, new Map(), { markupOnly: true });\n      }\n      if (entry.kind === 'archive') {\n        const buffer =\n          entry.source instanceof File\n            ? await (entry.source as File).arrayBuffer()\n            : (entry.source as ArrayBuffer);\n        const { markupXml, pageImages, assetUrls } = await extractArchiveFromZipBuffer(buffer);\n        return buildDocumentState(markupXml, pageImages, entry.label, assetUrls, { markupOnly: false });\n      }\n      if (entry.kind === 'folder') {\n        const { markupXml, pageImages, assetUrls } = await extractArchiveFromFiles(entry.source as File[]);\n        return buildDocumentState(markupXml, pageImages, entry.label, assetUrls, { markupOnly: false });\n      }\n    } catch (err) {\n      alert(`Failed to read ${entry.label}: ${(err as Error).message}`);\n    }\n    return null;\n  }\n}\n","/** <doclang-viewer> — top-level application shell */\n\nimport '../page-nav/page-nav';\nimport './toolbar';\nimport '../collection/collection-pane';\nimport '../markup-pane/markup-pane';\nimport '../page-img-pane/page-img-pane';\nimport '../reading-pane/reading-pane';\nimport './empty';\nimport '../container/pane-stack';\n\nimport { html, nothing, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { unsafeCSS } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ref, createRef } from 'lit/directives/ref.js';\nimport type { Ref } from 'lit/directives/ref.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport styles from './viewer.css?inline';\nimport { DoclangPageElement } from '../base/page-element';\nimport { CollectionController } from '../collection/collection';\n\nimport type { DoclangPageNav } from '../page-nav/page-nav';\nimport type { DoclangToolbar } from './toolbar';\nimport type { DoclangCollectionPane } from '../collection/collection-pane';\nimport type { DoclangMarkupPane } from '../markup-pane/markup-pane';\nimport type { DoclangPageImgPane } from '../page-img-pane/page-img-pane';\nimport type { DoclangReadingPane } from '../reading-pane/reading-pane';\nimport type { DoclangEmpty } from './empty';\n\nimport type { DocumentState } from '../../doclang/types';\nimport {\n  CELL_SPAN_TAGS,\n  OTSL_CONTAINER_TAGS,\n  localName,\n  isSemanticElement,\n  isVirtualTextHost,\n  isListOrOtslContainer,\n  xmlContains,\n  skipContainerLevelHead,\n  skipUntilListItemBoundary,\n  skipUntilCellBoundary,\n  isCellToken,\n} from '../../doclang/dom';\nimport { PAGE_ZOOM_DEFAULT } from '../page-img-pane/overlay';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype PaneKey = 'file' | 'page' | 'markup' | 'reading';\n\ninterface PaneDragState {\n  physicalSplitterIndex: number;\n  leftKey: PaneKey;\n  rightKey: PaneKey;\n  startX: number;\n  leftStart: number;\n  rightStart: number;\n  pointerId: number;\n  leftStartPx?: number;\n  rightStartPx?: number;\n}\n\n// ---------------------------------------------------------------------------\n// Constants\n// ---------------------------------------------------------------------------\n\nconst SUPPORTED_FILE_EXTENSIONS = ['.dclx', '.dclg'];\nconst LAYOUT_STORAGE_KEY = 'doclang-viewer-pane-layout';\nconst PANE_KEYS = ['file', 'page', 'markup', 'reading'] as const;\nconst PANE_MIN_RATIO = 0.12;\nconst DEFAULT_PANE_RATIOS = [1, 1, 1, 1];\nconst DEFAULT_USER_PANE_VISIBLE: PaneKey[] = ['page', 'markup', 'reading'];\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n@customElement('doclang-viewer')\nexport class DoclangViewer extends DoclangPageElement {\n  static override styles = unsafeCSS(styles);\n\n  @property({ type: String }) example: string | null = null;\n\n  // ---------------------------------------------------------------------------\n  // Reactive state (drives re-render + class toggles on host)\n  // ---------------------------------------------------------------------------\n\n  @state() private _loaded = false;\n  @state() private _markupOnly = false;\n  @state() private _dragOver = false;\n  @state() private _paneDragActive = false;\n  @state() private _demoLoading = false;\n  @state() private _docLabel: string | null = null;\n  @state() private _mainGridStyle: Record<string, string> = {};\n  @state() private _paneGridCols: Map<PaneKey, number> = new Map();\n  @state() private _splitterCols: (number | null)[] = [null, null, null];\n  @property({ type: Array, attribute: 'panes', reflect: true })\n  panes: PaneKey[] = [...DEFAULT_USER_PANE_VISIBLE];\n\n  // ---------------------------------------------------------------------------\n  // Non-reactive fields\n  // ---------------------------------------------------------------------------\n\n  private _collection = new CollectionController(this);\n  private _filePaneUserToggled = false;\n  private _paneRatios: number[] = [...DEFAULT_PANE_RATIOS];\n  private _filePaneWidthPx: number | null = null;\n  private _paneDrag: PaneDragState | null = null;\n  private _demoLoadInProgress = false;\n  private _suppressDemoLoad = false;\n  // Refs to child components\n  private _pageNavRef: Ref<DoclangPageNav> = createRef();\n  private _toolbarRef: Ref<DoclangToolbar> = createRef();\n  private _collectionPaneRef: Ref<DoclangCollectionPane> = createRef();\n  private _markupPaneRef: Ref<DoclangMarkupPane> = createRef();\n  private _pageViewPaneRef: Ref<DoclangPageImgPane> = createRef();\n  private _readingPaneRef: Ref<DoclangReadingPane> = createRef();\n  private _emptyStateRef: Ref<DoclangEmpty> = createRef();\n  private _splitterRefs: Ref<HTMLElement>[] = [createRef(), createRef(), createRef()];\n  private _mainRef: Ref<HTMLElement> = createRef();\n\n  // ---------------------------------------------------------------------------\n  // Lifecycle\n  // ---------------------------------------------------------------------------\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._loadLayoutPrefs();\n    this._normalizePaneRatios();\n    this._initDragDrop();\n    this._initFileHandling();\n    this._initPaneDragListeners();\n    this.addEventListener('view-page', this._onViewPage);\n\n    if (this.example) {\n      this._demoLoading = true;\n      setTimeout(() => {\n        if (!this._suppressDemoLoad) this._loadDemo();\n      }, 0);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('pointermove', this._onWindowPointerMove);\n    window.removeEventListener('pointerup', this._onWindowPointerUp);\n    window.removeEventListener('pointercancel', this._onWindowPointerUp);\n    this.removeEventListener('view-page', this._onViewPage);\n  }\n\n  override updated(changed: PropertyValues): void {\n    // Let the base class handle page clamping, _renderDocument, and\n    // _applySelection triggered by changes to `page` and `selected`.\n    super.updated(changed);\n    // Apply host classes imperatively (classMap on :host needs this workaround)\n    this.classList.toggle('loaded', this._loaded);\n    this.classList.toggle('markup-only', this._markupOnly);\n    this.classList.toggle('drag-over', this._dragOver);\n    this.classList.toggle('pane-drag-active', this._paneDragActive);\n  }\n\n  override firstUpdated(): void {\n    const emptyState = this._emptyStateRef.value;\n    if (emptyState) emptyState.setFileTypeHints(SUPPORTED_FILE_EXTENSIONS);\n    if (this._demoLoading && emptyState) emptyState.setDemoLoading(true);\n    this._syncToolbarPaneCheckboxes();\n  }\n\n  // ---------------------------------------------------------------------------\n  // Render\n  // ---------------------------------------------------------------------------\n\n  override render() {\n    return html`\n      <header>\n        <div class=\"header-brand\">\n          <a\n            href=\"#\"\n            class=\"header-logo-link\"\n            title=\"Back to start\"\n            @click=${this._onHomeClick}\n          >\n            <img src=\"assets/doclang_v3_sail.svg\" alt=\"DocLang\" class=\"header-logo\" />\n          </a>\n          <h1>DocLang Viewer</h1>\n          <doclang-page-nav\n            ${ref(this._pageNavRef)}\n            ?hidden=${!this._loaded || this._markupOnly}\n            .document=${this._docState}\n            .page=${this.page}\n          ></doclang-page-nav>\n        </div>\n\n        <div class=\"header-center\">\n          ${\n            this._docLabel\n              ? html`<span class=\"doc-label\">${this._docLabel}</span>`\n              : nothing\n          }\n        </div>\n\n        <div class=\"toolbar-wrap\">\n          <doclang-toolbar\n            ${ref(this._toolbarRef)}\n            @doclang-load-demo=${this._onLoadDemo}\n            @doclang-open-files=${this._onOpenFiles}\n            @doclang-toggle-pane=${this._onTogglePane}\n            @doclang-reset-pane-layout=${this._onResetPaneLayout}\n          ></doclang-toolbar>\n        </div>\n      </header>\n\n      <p class=\"drop-banner\">Drop to open another file</p>\n\n      <doclang-empty\n        ${ref(this._emptyStateRef)}\n        @doclang-load-demo=${this._onLoadDemo}\n      ></doclang-empty>\n\n      <div\n        class=\"main\"\n        style=${styleMap(this._mainGridStyle)}\n        ${ref(this._mainRef)}\n      >\n        <doclang-collection-pane\n          ${ref(this._collectionPaneRef)}\n          class=\"pane\"\n          ?hidden=${!this._isPaneVisible('file')}\n          style=${this._paneGridStyle('file')}\n          .entries=${this._collection.entries}\n          @doclang-collection-select=${(e: Event) => this._onCollectionSelect(e)}\n          @doclang-collection-close=${(e: Event) => this._onCollectionClose(e)}\n          @doclang-collection-close-all=${this._onCollectionCloseAll}\n        ></doclang-collection-pane>\n\n        <div\n          class=${classMap({ 'pane-splitter': true })}\n          role=\"separator\"\n          aria-orientation=\"vertical\"\n          aria-label=\"Resize Files and Original page panes\"\n          tabindex=\"0\"\n          ?hidden=${this._splitterCols[0] === null}\n          style=${this._splitterGridStyle(0)}\n          ${ref(this._splitterRefs[0]!)}\n          @pointerdown=${(e: PointerEvent) => this._startPaneDrag(e, 0)}\n        ></div>\n\n        <doclang-pane-stack\n          .document=${this._docState}\n          .page=${this.page}\n          .selected=${this.selected}\n          @view-page=${this._onViewPage}\n          @doclang-element-select=${this._onElementSelect}\n          @doclang-navigate-thread=${this._onNavigateThread}\n          @doclang-clear-selection=${this._onClearSelection}\n          style=\"display:contents\"\n        >\n          <doclang-page-img-pane\n            ${ref(this._pageViewPaneRef)}\n            class=\"pane\"\n            ?hidden=${!this._isPaneVisible('page')}\n            style=${this._paneGridStyle('page')}\n          ></doclang-page-img-pane>\n\n          <div\n            class=\"pane-splitter\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            aria-label=\"Resize Original page and DocLang panes\"\n            tabindex=\"0\"\n            ?hidden=${this._splitterCols[1] === null}\n            style=${this._splitterGridStyle(1)}\n            ${ref(this._splitterRefs[1]!)}\n            @pointerdown=${(e: PointerEvent) => this._startPaneDrag(e, 1)}\n          ></div>\n\n          <doclang-markup-pane\n            ${ref(this._markupPaneRef)}\n            class=\"pane\"\n            ?hidden=${!this._isPaneVisible('markup')}\n            style=${this._paneGridStyle('markup')}\n          ></doclang-markup-pane>\n\n          <div\n            class=\"pane-splitter\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            aria-label=\"Resize DocLang and Reading view panes\"\n            tabindex=\"0\"\n            ?hidden=${this._splitterCols[2] === null}\n            style=${this._splitterGridStyle(2)}\n            ${ref(this._splitterRefs[2]!)}\n            @pointerdown=${(e: PointerEvent) => this._startPaneDrag(e, 2)}\n          ></div>\n\n          <doclang-reading-pane\n            ${ref(this._readingPaneRef)}\n            class=\"pane\"\n            ?hidden=${!this._isPaneVisible('reading')}\n            style=${this._paneGridStyle('reading')}\n          ></doclang-reading-pane>\n        </doclang-pane-stack>\n      </div>\n\n    `;\n  }\n\n  // ---------------------------------------------------------------------------\n  // DoclangPageElement interface\n  // ---------------------------------------------------------------------------\n\n  protected override _renderDocument(): void {}\n  protected override _clearDocument(): void {}\n\n  // ---------------------------------------------------------------------------\n  // Grid style helpers\n  // ---------------------------------------------------------------------------\n\n  private _paneGridStyle(key: PaneKey): string {\n    const col = this._paneGridCols.get(key);\n    return col !== undefined ? `grid-column:${col}` : '';\n  }\n\n  private _splitterGridStyle(index: number): string {\n    const col = this._splitterCols[index];\n    if (col === null) return '';\n    return `grid-column:${col}`;\n  }\n\n  // ---------------------------------------------------------------------------\n  // Pane layout\n  // ---------------------------------------------------------------------------\n\n  private _isPaneAvailable(key: PaneKey): boolean {\n    if (key === 'file') return this._collection.size > 0;\n    if (key === 'page') return Boolean(this._docState?.hasPageView);\n    return Boolean(this._docState);\n  }\n\n  private _isPaneVisible(key: PaneKey): boolean {\n    if (!this._isPaneAvailable(key)) return false;\n    return this.panes.includes(key);\n  }\n\n  private _visiblePaneKeys(): PaneKey[] {\n    return [...PANE_KEYS].filter(key => this._isPaneVisible(key));\n  }\n\n  private _filePaneFitWidthPx(): number {\n    const probe = document.createElement('div');\n    probe.style.cssText =\n      'position:absolute;visibility:hidden;width:var(--doclang-file-pane-fit-width);';\n    (this.shadowRoot ?? document.documentElement).appendChild(probe);\n    const px = probe.getBoundingClientRect().width;\n    probe.remove();\n    return Math.ceil(px) || 108;\n  }\n\n  private _resolvedFilePaneWidthPx(): number {\n    const fit = this._filePaneFitWidthPx();\n    return Math.max(fit, this._filePaneWidthPx ?? fit);\n  }\n\n  private _contentPaneFrWeights(keys: PaneKey[]): number[] {\n    const contentKeys = keys.filter(k => k !== 'file');\n    const weights = contentKeys.map(k => this._paneRatios[this._paneRatioIndex(k)]!);\n    const sum = weights.reduce((a, b) => a + b, 0) || contentKeys.length;\n    return weights.map(w => w / sum);\n  }\n\n  private _paneRatioIndex(key: PaneKey): number {\n    return PANE_KEYS.indexOf(key);\n  }\n\n  private _normalizePaneRatios(): void {\n    const sum = this._paneRatios.reduce((a, b) => a + b, 0);\n    if (sum <= 0) {\n      this._paneRatios = [...DEFAULT_PANE_RATIOS];\n      return;\n    }\n    this._paneRatios = this._paneRatios.map(r => r / sum);\n  }\n\n  private _paneKeysAdjacent(leftKey: PaneKey, rightKey: PaneKey): boolean {\n    return (\n      PANE_KEYS.indexOf(leftKey) >= 0 &&\n      PANE_KEYS.indexOf(rightKey) === PANE_KEYS.indexOf(leftKey) + 1\n    );\n  }\n\n  private _onlyHiddenPanesBetween(leftKey: PaneKey, rightKey: PaneKey): boolean {\n    const li = PANE_KEYS.indexOf(leftKey);\n    const ri = PANE_KEYS.indexOf(rightKey);\n    if (li < 0 || ri <= li) return false;\n    for (let i = li + 1; i < ri; i++) {\n      if (this._isPaneVisible(PANE_KEYS[i]!)) return false;\n    }\n    return true;\n  }\n\n  private _shouldShowSplitter(leftKey: PaneKey, rightKey: PaneKey): boolean {\n    if (!this._isPaneVisible(leftKey) || !this._isPaneVisible(rightKey)) return false;\n    if (this._paneKeysAdjacent(leftKey, rightKey)) return true;\n    return this._onlyHiddenPanesBetween(leftKey, rightKey);\n  }\n\n  private _visibleNeighborAfter(key: PaneKey): PaneKey | null {\n    const idx = PANE_KEYS.indexOf(key);\n    for (let i = idx + 1; i < PANE_KEYS.length; i++) {\n      if (this._isPaneVisible(PANE_KEYS[i]!)) return PANE_KEYS[i]!;\n    }\n    return null;\n  }\n\n  private _visibleNeighborBefore(key: PaneKey): PaneKey | null {\n    const idx = PANE_KEYS.indexOf(key);\n    for (let i = idx - 1; i >= 0; i--) {\n      if (this._isPaneVisible(PANE_KEYS[i]!)) return PANE_KEYS[i]!;\n    }\n    return null;\n  }\n\n  private _applyPaneLayout(): void {\n    let keys = this._visiblePaneKeys();\n    if (!keys.length) {\n      if (!this.panes.includes('markup')) this.panes = [...this.panes, 'markup'];\n      keys = this._visiblePaneKeys();\n    }\n\n    const gridCols = new Map<PaneKey, number>();\n    const splitterCols: (number | null)[] = [null, null, null];\n\n    if (!this._loaded) {\n      this._paneGridCols = gridCols;\n      this._splitterCols = splitterCols;\n      this._mainGridStyle = {};\n      this.requestUpdate();\n      return;\n    }\n\n    const contentFr = this._contentPaneFrWeights(keys);\n    const cols: string[] = [];\n    let frIndex = 0;\n    keys.forEach((key, i) => {\n      if (key === 'file') {\n        cols.push(`${this._resolvedFilePaneWidthPx()}px`);\n      } else {\n        cols.push(`minmax(0, ${contentFr[frIndex++]!.toFixed(6)}fr)`);\n      }\n      if (i < keys.length - 1 && this._shouldShowSplitter(keys[i]!, keys[i + 1]!)) {\n        cols.push('1px');\n      }\n    });\n\n    let col = 1;\n    keys.forEach((key, i) => {\n      gridCols.set(key, col++);\n      if (i < keys.length - 1) {\n        const lk = keys[i]!;\n        const rk = keys[i + 1]!;\n        if (!this._shouldShowSplitter(lk, rk)) return;\n        const physIdx = PANE_KEYS.indexOf(lk);\n        if (physIdx >= 0 && physIdx < 3) splitterCols[physIdx] = col++;\n      }\n    });\n\n    this._paneGridCols = gridCols;\n    this._splitterCols = splitterCols;\n    this._mainGridStyle = { gridTemplateColumns: cols.join(' ') };\n    this._pageViewPaneRef.value?.refreshLayout();\n    this._readingPaneRef.value?.setVisible(this._isPaneVisible('reading'));\n    this.requestUpdate();\n  }\n\n  private _setUserPaneVisible(key: PaneKey, visible: boolean): void {\n    this.panes = visible\n      ? [...this.panes.filter(k => k !== key), key]\n      : this.panes.filter(k => k !== key);\n    if (key === 'file') this._filePaneUserToggled = true;\n    if (key === 'page') this._syncPagePaneControls();\n    this._syncToolbarPaneCheckboxes();\n    this._saveLayoutPrefs();\n    this._applyPaneLayout();\n  }\n\n  private _syncPagePaneControls(): void {\n    this._pageViewPaneRef.value?.setVisible(this._isPaneVisible('page'));\n  }\n\n  // ---------------------------------------------------------------------------\n  // Layout prefs\n  // ---------------------------------------------------------------------------\n\n  private _loadLayoutPrefs(): void {\n    try {\n      const raw = localStorage.getItem(LAYOUT_STORAGE_KEY);\n      if (!raw) return;\n      const data = JSON.parse(raw) as {\n        visible?: Record<string, unknown>;\n        ratios?: unknown[];\n        filePaneWidthPx?: unknown;\n      };\n      if (data?.visible && typeof data.visible === 'object') {\n        const loaded: PaneKey[] = [];\n        for (const key of PANE_KEYS) {\n          if (data.visible[key] === true) loaded.push(key);\n        }\n        if (loaded.length) this.panes = loaded;\n        if (typeof data.visible['file'] === 'boolean') this._filePaneUserToggled = true;\n      }\n      if (Array.isArray(data?.ratios)) {\n        const valid = data.ratios.every(n => typeof n === 'number' && n > 0);\n        if (valid && data.ratios.length === 4) {\n          this._paneRatios = [...(data.ratios as number[])];\n          this._normalizePaneRatios();\n        } else if (valid && data.ratios.length === 3) {\n          this._paneRatios = [1, ...(data.ratios as number[])];\n          this._normalizePaneRatios();\n        }\n      }\n      if (typeof data?.filePaneWidthPx === 'number' && data.filePaneWidthPx > 0) {\n        this._filePaneWidthPx = data.filePaneWidthPx;\n      }\n    } catch {\n      /* ignore */\n    }\n  }\n\n  private _saveLayoutPrefs(): void {\n    try {\n      localStorage.setItem(\n        LAYOUT_STORAGE_KEY,\n        JSON.stringify({\n          visible: Object.fromEntries(PANE_KEYS.map(k => [k, this.panes.includes(k)])),\n          ratios: this._paneRatios,\n          filePaneWidthPx: this._filePaneWidthPx,\n        })\n      );\n    } catch {\n      /* ignore */\n    }\n  }\n\n  private _resetPaneLayout(): void {\n    this._filePaneUserToggled = false;\n    this.panes = this._collection.hasMultiple()\n      ? ['file', 'page', 'markup', 'reading']\n      : ['page', 'markup', 'reading'];\n    this._paneRatios = [...DEFAULT_PANE_RATIOS];\n    this._normalizePaneRatios();\n    this._filePaneWidthPx = null;\n    this._syncPagePaneControls();\n    this._syncToolbarPaneCheckboxes();\n    this._saveLayoutPrefs();\n    this._applyPaneLayout();\n  }\n\n  // ---------------------------------------------------------------------------\n  // Pane splitter drag\n  // ---------------------------------------------------------------------------\n\n  private _contentPaneAvailableWidthPx(): number {\n    const main = this._mainRef.value;\n    if (!main) return 1;\n    const rect = main.getBoundingClientRect();\n    const keys = this._visiblePaneKeys();\n    let reserved = 0;\n    if (keys.includes('file')) reserved += this._resolvedFilePaneWidthPx();\n    for (let i = 0; i < keys.length - 1; i++) {\n      if (this._shouldShowSplitter(keys[i]!, keys[i + 1]!)) reserved += 1;\n    }\n    return Math.max(rect.width - reserved, 1);\n  }\n\n  private _resolvedPhysicalSplitterKeys(\n    physIdx: number\n  ): { leftKey: PaneKey; rightKey: PaneKey } | null {\n    const leftPhysical = PANE_KEYS[physIdx];\n    const rightPhysical = PANE_KEYS[physIdx + 1];\n    if (!leftPhysical || !rightPhysical) return null;\n    const leftKey = this._isPaneVisible(leftPhysical)\n      ? leftPhysical\n      : this._visibleNeighborBefore(rightPhysical);\n    const rightKey = this._isPaneVisible(rightPhysical)\n      ? rightPhysical\n      : this._visibleNeighborAfter(leftPhysical);\n    if (!leftKey || !rightKey || leftKey === rightKey) return null;\n    if (!this._shouldShowSplitter(leftKey, rightKey)) return null;\n    // Confirm this physical splitter is the canonical one for this gap\n    const canonicalIdx = PANE_KEYS.indexOf(leftKey);\n    if (canonicalIdx !== physIdx) return null;\n    return { leftKey, rightKey };\n  }\n\n  private _startPaneDrag(e: PointerEvent, physIdx: number): void {\n    if (e.button !== 0 || !this._loaded) return;\n    const resolved = this._resolvedPhysicalSplitterKeys(physIdx);\n    if (!resolved) return;\n    const { leftKey, rightKey } = resolved;\n    this._normalizePaneRatios();\n    const leftIndex = this._paneRatioIndex(leftKey);\n    const rightIndex = this._paneRatioIndex(rightKey);\n    const drag: PaneDragState = {\n      physicalSplitterIndex: physIdx,\n      leftKey,\n      rightKey,\n      startX: e.clientX,\n      leftStart: this._paneRatios[leftIndex]!,\n      rightStart: this._paneRatios[rightIndex]!,\n      pointerId: e.pointerId,\n    };\n    if (leftKey === 'file') drag.leftStartPx = this._resolvedFilePaneWidthPx();\n    else if (rightKey === 'file') drag.rightStartPx = this._resolvedFilePaneWidthPx();\n    this._paneDrag = drag;\n    e.preventDefault();\n    (e.currentTarget as Element).setPointerCapture(e.pointerId);\n    (e.currentTarget as Element).classList.add('is-dragging');\n    this._paneDragActive = true;\n    this.requestUpdate();\n  }\n\n  private _onWindowPointerMove = (e: PointerEvent): void => {\n    const drag = this._paneDrag;\n    if (!drag || e.pointerId !== drag.pointerId) return;\n    if (drag.leftKey === 'file' && typeof drag.leftStartPx === 'number') {\n      this._filePaneWidthPx = Math.max(\n        this._filePaneFitWidthPx(),\n        drag.leftStartPx + (e.clientX - drag.startX)\n      );\n      this._applyPaneLayout();\n      return;\n    }\n    if (drag.rightKey === 'file' && typeof drag.rightStartPx === 'number') {\n      this._filePaneWidthPx = Math.max(\n        this._filePaneFitWidthPx(),\n        drag.rightStartPx - (e.clientX - drag.startX)\n      );\n      this._applyPaneLayout();\n      return;\n    }\n    const keys = this._visiblePaneKeys();\n    const frWeights = this._contentPaneFrWeights(keys);\n    const contentKeys = keys.filter((k): k is Exclude<PaneKey, 'file'> => k !== 'file');\n    const leftContentIdx = contentKeys.indexOf(\n      drag.leftKey as Exclude<PaneKey, 'file'>\n    );\n    if (leftContentIdx < 0 || leftContentIdx + 1 >= frWeights.length) return;\n    const pairFrTotal = frWeights[leftContentIdx]! + frWeights[leftContentIdx + 1]!;\n    if (!(pairFrTotal > 0)) return;\n    const pairPixels = Math.max(this._contentPaneAvailableWidthPx() * pairFrTotal, 1);\n    const deltaRatio = (e.clientX - drag.startX) / pairPixels;\n    const leftIdx = this._paneRatioIndex(drag.leftKey);\n    const rightIdx = this._paneRatioIndex(drag.rightKey);\n    const pairTotal = drag.leftStart + drag.rightStart;\n    if (!(pairTotal > 0) || leftIdx < 0 || rightIdx < 0) return;\n    const leftMin = Math.min(PANE_MIN_RATIO, pairTotal / 2);\n    const rightMin = Math.min(PANE_MIN_RATIO, pairTotal / 2);\n    let nextLeft = drag.leftStart + deltaRatio * pairTotal;\n    nextLeft = Math.min(Math.max(nextLeft, leftMin), pairTotal - rightMin);\n    this._paneRatios[leftIdx] = nextLeft;\n    this._paneRatios[rightIdx] = pairTotal - nextLeft;\n    this._applyPaneLayout();\n  };\n\n  private _onWindowPointerUp = (e: PointerEvent): void => {\n    const drag = this._paneDrag;\n    if (!drag || e.pointerId !== drag.pointerId) return;\n    const splitterRef = this._splitterRefs[drag.physicalSplitterIndex];\n    const splitter = splitterRef?.value;\n    splitter?.classList.remove('is-dragging');\n    if (splitter?.hasPointerCapture(e.pointerId))\n      splitter.releasePointerCapture(e.pointerId);\n    this._paneDrag = null;\n    this._paneDragActive = false;\n    this._normalizePaneRatios();\n    this._saveLayoutPrefs();\n    this.requestUpdate();\n  };\n\n  // ---------------------------------------------------------------------------\n  // Fragment thread navigation\n  // ---------------------------------------------------------------------------\n\n  private _findElementIdOnPage(el: Element): string | null {\n    if (!this._docState?.elementIds) return null;\n    for (const [node, id] of this._docState.elementIds) {\n      if (node === el) return id;\n    }\n    return null;\n  }\n\n  private _navigateThreadFragment(elementId: string, direction: string): void {\n    const s = this._docState;\n    const el = s?.idToElement?.get(elementId);\n    if (!el) return;\n    const nav = s?.threadNavByElement?.get(el);\n    if (!nav) return;\n    const target = direction === 'prev' ? nav.prev : nav.next;\n    if (!target) return;\n    const page = s!.elementPageByEl.get(target);\n    if (!page) return;\n    if (page === this.page) {\n      const id = this._findElementIdOnPage(target);\n      if (id) this._selectElement(id);\n      return;\n    }\n    s!.pendingSelectElement = target;\n    this.page = page;\n  }\n\n  // ---------------------------------------------------------------------------\n  // Selection\n  // ---------------------------------------------------------------------------\n\n  private _findListVirtualTextHost(list: Element, target: Element): Element | null {\n    const nodes = [...list.childNodes] as ChildNode[];\n    let i = skipContainerLevelHead(nodes, 0);\n    while (i < nodes.length) {\n      const node = nodes[i]!;\n      if (\n        node.nodeType !== Node.ELEMENT_NODE ||\n        localName(node as Element) !== 'ldiv'\n      ) {\n        i++;\n        continue;\n      }\n      const ldiv = node as Element;\n      i++;\n      const end = skipUntilListItemBoundary(nodes, i);\n      if (target === ldiv || nodes.slice(i, end).some(n => xmlContains(target, n)))\n        return ldiv;\n      i = end;\n    }\n    return null;\n  }\n\n  private _findTableVirtualTextHost(\n    container: Element,\n    target: Element\n  ): Element | null {\n    const nodes = [...container.childNodes] as ChildNode[];\n    let i = skipContainerLevelHead(nodes, 0);\n    while (i < nodes.length) {\n      const node = nodes[i]!;\n      if (node.nodeType !== Node.ELEMENT_NODE) {\n        i++;\n        continue;\n      }\n      const tag = localName(node as Element);\n      if (\n        tag === 'nl' ||\n        isVirtualTextHost(node as Element) ||\n        CELL_SPAN_TAGS.has(tag) ||\n        !isCellToken(tag)\n      ) {\n        i++;\n        continue;\n      }\n      const cell = node as Element;\n      i++;\n      const end = skipUntilCellBoundary(nodes, i);\n      if (target === cell || nodes.slice(i, end).some(n => xmlContains(target, n)))\n        return cell;\n      i = end;\n    }\n    return null;\n  }\n\n  private _findVirtualTextHost(xmlEl: Element): Element | null {\n    let node: Element | null = xmlEl;\n    while (node) {\n      const parent: Element | null = node.parentElement;\n      if (!parent) return null;\n      const tag = localName(parent);\n      if (tag === 'list') {\n        const h = this._findListVirtualTextHost(parent, xmlEl);\n        if (h) return h;\n      }\n      if (OTSL_CONTAINER_TAGS.has(tag)) {\n        const h = this._findTableVirtualTextHost(parent, xmlEl);\n        if (h) return h;\n      }\n      node = parent;\n    }\n    return null;\n  }\n\n  private _resolveSelectionElement(xmlEl: Element | null): Element | null {\n    if (!xmlEl) return null;\n    if (isSemanticElement(xmlEl) || isVirtualTextHost(xmlEl)) return xmlEl;\n    let node: Element | null = xmlEl.parentElement;\n    while (node) {\n      if (localName(node) === 'doclang') break;\n      if (isSemanticElement(node) && !isListOrOtslContainer(node)) return node;\n      node = node.parentElement;\n    }\n    const virtualHost = this._findVirtualTextHost(xmlEl);\n    if (virtualHost) return virtualHost;\n    node = xmlEl.parentElement;\n    while (node) {\n      if (localName(node) === 'doclang') break;\n      if (isSemanticElement(node) || isVirtualTextHost(node)) return node;\n      node = node.parentElement;\n    }\n    return null;\n  }\n\n  private _resolveSelectionElementId(rawId: string | null): string | null {\n    const s = this._docState;\n    if (!rawId || !s?.idToElement || !s.elementIds) return null;\n    const xmlEl = s.idToElement.get(rawId);\n    if (!xmlEl) return null;\n    const resolved = this._resolveSelectionElement(xmlEl);\n    return resolved ? (s.elementIds.get(resolved) ?? null) : null;\n  }\n\n  private _selectElement(elementId: string): void {\n    if (!elementId) return;\n    this.selected = elementId;\n  }\n\n  private _clearSelection(): void {\n    this.selected = null;\n  }\n\n  private _syncToolbarPaneCheckboxes(): void {\n    this._toolbarRef.value?.syncPaneToggles({\n      file: this.panes.includes('file'),\n      page: this.panes.includes('page'),\n      markup: this.panes.includes('markup'),\n      reading: this.panes.includes('reading'),\n      fileAvailable: this._isPaneAvailable('file'),\n      pageAvailable: this._isPaneAvailable('page'),\n      hasState: Boolean(this._docState),\n    });\n  }\n\n  // ---------------------------------------------------------------------------\n  // Document open/close\n  // ---------------------------------------------------------------------------\n\n  private _setDocumentOpen(open: boolean, { markupOnly = false } = {}): void {\n    this._loaded = open;\n    this._markupOnly = open && markupOnly;\n    this._syncToolbarPaneCheckboxes();\n    this._applyPaneLayout();\n    this.requestUpdate();\n  }\n\n  private _setPageViewVisible(): void {\n    this._syncPagePaneControls();\n    this._syncToolbarPaneCheckboxes();\n    this._applyPaneLayout();\n  }\n\n  private _resetViewer(): void {\n    this._setDemoLoading(false);\n    this._collection.clearAll();\n    this._filePaneUserToggled = false;\n    this._pageViewPaneRef.value?.resetZoom();\n    this._docLabel = null;\n    this._setDocumentOpen(false);\n    // Setting document = null goes through the base class setter, which resets\n    // this.page to 1, calls _clearDocument() to clear all sub-views, and\n    // nulls _docState.\n    this.document = null;\n    this.selected = null;\n    this._syncCollectionPaneDefault();\n    this._syncToolbarPaneCheckboxes();\n    this._applyPaneLayout();\n    this.requestUpdate();\n  }\n\n  private _activateDocument(docState: DocumentState, initialPage = 1): void {\n    const entry = this._collection.activeEntry;\n    if (!entry) return;\n    this._pageViewPaneRef.value?.activateZoom(entry.pageZoom ?? PAGE_ZOOM_DEFAULT);\n    this._docLabel = entry.label;\n    this.selected = null;\n    // Setting this.document pushes docState to _docState and calls\n    // _renderDocument(), which forwards it to all sub-view refs.\n    // The base class also resets this.page to 1 on document change, so we\n    // then navigate to the correct initial page afterwards.\n    this.document = docState;\n    this._setDocumentOpen(true, { markupOnly: docState.markupOnly });\n    this._setPageViewVisible();\n    this.page = initialPage;\n    this._syncCollectionPaneDefault();\n    this._syncToolbarPaneCheckboxes();\n    this._applyPaneLayout();\n    this.requestUpdate();\n  }\n\n  // ---------------------------------------------------------------------------\n  // File catalog — delegated to CollectionController\n  // ---------------------------------------------------------------------------\n\n  private _syncCollectionPaneDefault(): void {\n    if (!this._filePaneUserToggled) {\n      const wasVisible = this.panes.includes('file');\n      const should = this._collection.hasMultiple();\n      this.panes = should\n        ? [...this.panes.filter(k => k !== 'file'), 'file']\n        : this.panes.filter(k => k !== 'file');\n      if (!wasVisible && should) {\n        this._paneRatios = [...DEFAULT_PANE_RATIOS];\n        this._normalizePaneRatios();\n        this._filePaneWidthPx = null;\n      }\n    }\n  }\n\n  private async _addFilesToCatalog(\n    files: File[],\n    { replace = false } = {}\n  ): Promise<void> {\n    if (replace) this._filePaneUserToggled = false;\n    const docState = await this._collection.addFiles(files, { replace });\n    if (!docState) return;\n    const entry = this._collection.activeEntry!;\n    this._activateDocument(docState, entry.currentPage ?? 1);\n  }\n\n  private async _appendFolderArchive(files: File[]): Promise<void> {\n    const docState = await this._collection.appendFolderArchive(files);\n    if (!docState) return;\n    const entry = this._collection.activeEntry!;\n    this._activateDocument(docState, entry.currentPage ?? 1);\n  }\n\n  private async _addArchiveBufferToCatalog(\n    buffer: ArrayBuffer,\n    label: string,\n    { replace = false } = {}\n  ): Promise<void> {\n    if (replace) this._filePaneUserToggled = false;\n    const docState = await this._collection.addArchiveBuffer(buffer, label, { replace });\n    if (!docState) return;\n    const entry = this._collection.activeEntry!;\n    this._activateDocument(docState, entry.currentPage ?? 1);\n  }\n\n  // ---------------------------------------------------------------------------\n  // Demo loading\n  // ---------------------------------------------------------------------------\n\n  private _setDemoLoading(loading: boolean): void {\n    this._demoLoading = loading;\n    this._emptyStateRef.value?.setDemoLoading(loading);\n    this._toolbarRef.value?.setDemoLoading(loading);\n    this.requestUpdate();\n  }\n\n  private async _loadDemo(): Promise<void> {\n    if (this._demoLoadInProgress) return;\n    this._demoLoadInProgress = true;\n    this._setDemoLoading(true);\n    try {\n      const demoUrl = this.example;\n      if (!demoUrl) throw new Error('example URL not defined');\n      const res = await fetch(demoUrl);\n      if (!res.ok) throw new Error(`HTTP ${res.status}`);\n      const label = demoUrl.split('/').pop() || 'demo.dclx';\n      await this._addArchiveBufferToCatalog(await res.arrayBuffer(), label, {\n        replace: true,\n      });\n    } catch (err) {\n      alert(\n        `Failed to load demo: ${(err as Error).message}\\n\\nServe this directory over HTTP (e.g. python3 -m http.server) and open the viewer from localhost.`\n      );\n    } finally {\n      this._demoLoadInProgress = false;\n      this._setDemoLoading(false);\n    }\n  }\n\n  // ---------------------------------------------------------------------------\n  // Drag-drop\n  // ---------------------------------------------------------------------------\n\n  private _hasArchiveTransfer(dataTransfer: DataTransfer | null): boolean {\n    return Boolean(dataTransfer && [...dataTransfer.types].includes('Files'));\n  }\n\n  private _initDragDrop(): void {\n    this.addEventListener('dragenter', (e: DragEvent) => {\n      if (!this._hasArchiveTransfer(e.dataTransfer)) return;\n      e.preventDefault();\n      this._dragOver = true;\n      this.requestUpdate();\n    });\n    this.addEventListener('dragover', (e: DragEvent) => {\n      if (!this._hasArchiveTransfer(e.dataTransfer)) return;\n      e.preventDefault();\n      if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';\n    });\n    this.addEventListener('dragleave', (e: DragEvent) => {\n      if (!this._hasArchiveTransfer(e.dataTransfer)) return;\n      if (e.relatedTarget && this.contains(e.relatedTarget as Node)) return;\n      this._dragOver = false;\n      this.requestUpdate();\n    });\n    this.addEventListener('drop', async (e: DragEvent) => {\n      if (!this._hasArchiveTransfer(e.dataTransfer)) return;\n      e.preventDefault();\n      this._dragOver = false;\n      this.requestUpdate();\n      if (e.dataTransfer) await this._loadFromDrop(e.dataTransfer);\n    });\n  }\n\n  private async _loadFromFileList(files: File[]): Promise<void> {\n    if (files.some(f => f.name === 'document.xml')) {\n      await this._appendFolderArchive(files);\n      return;\n    }\n    const supported = files.filter(\n      f => this._collection.isArchiveFile(f) || this._collection.isMarkupFile(f)\n    );\n    if (supported.length) await this._addFilesToCatalog(supported, { replace: false });\n  }\n\n  private async _loadFromDrop(dataTransfer: DataTransfer): Promise<void> {\n    await this._loadFromFileList([...dataTransfer.files]);\n  }\n\n  private _initFileHandling(): void {\n    interface LaunchParams {\n      files?: FileSystemFileHandle[];\n    }\n    interface LaunchQueue {\n      setConsumer(consumer: (launchParams: LaunchParams) => Promise<void> | void): void;\n    }\n    const windowWithLaunchQueue = window as unknown as { launchQueue?: LaunchQueue };\n    if (!('launchQueue' in window) || !windowWithLaunchQueue.launchQueue) return;\n    windowWithLaunchQueue.launchQueue.setConsumer(async (launchParams: LaunchParams) => {\n      if (!launchParams.files?.length) return;\n      this._suppressDemoLoad = true;\n      const files = await Promise.all(launchParams.files.map(handle => handle.getFile()));\n      await this._loadFromFileList(files);\n    });\n  }\n\n  private _initPaneDragListeners(): void {\n    window.addEventListener('pointermove', this._onWindowPointerMove);\n    window.addEventListener('pointerup', this._onWindowPointerUp);\n    window.addEventListener('pointercancel', this._onWindowPointerUp);\n  }\n\n  // ---------------------------------------------------------------------------\n  // Event handlers (from child components via bubbling)\n  // ---------------------------------------------------------------------------\n\n  private _onHomeClick = (e: Event): void => {\n    e.preventDefault();\n    this._resetViewer();\n  };\n\n  private _onLoadDemo = (): void => {\n    this._loadDemo();\n  };\n\n  private _onOpenFiles = (e: Event): void => {\n    const files = (e as CustomEvent<{ files: File[] }>).detail.files.filter(\n      f => this._collection.isArchiveFile(f) || this._collection.isMarkupFile(f)\n    );\n    if (!files.length) return;\n    this._addFilesToCatalog(files, { replace: true });\n  };\n\n  private _onTogglePane = (e: Event): void => {\n    const { pane, checked } = (e as CustomEvent<{ pane: PaneKey; checked: boolean }>)\n      .detail;\n    if (!this._docState) {\n      this._syncToolbarPaneCheckboxes();\n      return;\n    }\n    const nextKeys = [...PANE_KEYS].filter(k =>\n      k === pane ? checked : this.panes.includes(k) && this._isPaneAvailable(k)\n    );\n    if (!nextKeys.length) {\n      this._syncToolbarPaneCheckboxes();\n      return;\n    }\n    this._setUserPaneVisible(pane, checked);\n  };\n\n  private _onResetPaneLayout = (): void => {\n    if (this._docState) this._resetPaneLayout();\n  };\n\n  private _onCollectionSelect = (e: Event): void => {\n    const { index } = (e as CustomEvent<{ index: number }>).detail;\n    this._collection.persistActiveViewState(\n      this.page,\n      this._pageViewPaneRef.value?.zoomPercent ?? PAGE_ZOOM_DEFAULT\n    );\n    this._collection.selectEntry(index).then(docState => {\n      if (!docState) { this._resetViewer(); return; }\n      const entry = this._collection.activeEntry!;\n      this._activateDocument(docState, entry.currentPage ?? 1);\n    });\n  };\n\n  private _onCollectionClose = (e: Event): void => {\n    const { index } = (e as CustomEvent<{ index: number }>).detail;\n    this._collection.persistActiveViewState(\n      this.page,\n      this._pageViewPaneRef.value?.zoomPercent ?? PAGE_ZOOM_DEFAULT\n    );\n    this._collection.closeEntry(index).then(({ doc, newIndex }) => {\n      if (newIndex < 0) { this._resetViewer(); return; }\n      if (doc) {\n        const entry = this._collection.activeEntry!;\n        this._activateDocument(doc, entry.currentPage ?? 1);\n      } else {\n        this._syncCollectionPaneDefault();\n        this._syncToolbarPaneCheckboxes();\n        this._applyPaneLayout();\n        this.requestUpdate();\n      }\n    });\n  };\n\n  private _onCollectionCloseAll = (): void => {\n    const count = this._collection.size;\n    if (!count) return;\n    const firstLabel = this._collection.entries[0]?.label ?? '';\n    const msg =\n      count === 1\n        ? `Remove \"${firstLabel}\" from the viewer?`\n        : `Remove all ${count} open files from the viewer?`;\n    if (confirm(msg)) this._resetViewer();\n  };\n\n  private _onElementSelect = (e: Event): void => {\n    const rawId = (e as CustomEvent<{ id: string }>).detail.id;\n    const resolved = this._resolveSelectionElementId(rawId) ?? rawId;\n    this._selectElement(resolved);\n  };\n\n  private _onNavigateThread = (e: Event): void => {\n    const { elementId, direction } = (\n      e as CustomEvent<{ elementId: string; direction: string }>\n    ).detail;\n    this._navigateThreadFragment(elementId, direction);\n  };\n\n  private _onClearSelection = (): void => {\n    this._clearSelection();\n  };\n\n  private _onViewPage = (e: Event): void => {\n    this.page = (e as CustomEvent<{ page: number }>).detail.page;\n  };\n\n}\n"],"x_google_ignoreList":[0,1,2,3,4,5,6,7,8,9,10,17,22,38],"mappings":"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"}
\ No newline at end of file