@shivaedev/work-board 0.4.1 → 0.6.0

package/src/page/client.ts

@@ -3,98 +3,98 @@ import "/_board/saved-views.js";
 import "/_board/history.js";
 import "/_board/preferences.js";
 import "/_board/search.js";
+import { tick } from "/_board/ages.js";
 import { renderDiagrams } from "/_board/diagrams.js";
 import { applyPage } from "/_board/page-state.js";
-import { pageVersion } from "/_board/navigation.js";
-import { remember } from "/_board/swap.js";
+import "/_board/navigation.js";
+import { remember, swap } from "/_board/swap.js";
+import { refreshLibrary } from "/_board/library.js";
+import { session } from "/_board/native.js";
 
-const since = (modified) => {
-  const seconds = Math.max(0, Math.round((Date.now() - modified) / 1000));
-  if (seconds < 60) return seconds + "s";
-  if (seconds < 3600) return Math.round(seconds / 60) + "m";
-  if (seconds < 172800) return Math.round(seconds / 3600) + "h";
-  return Math.round(seconds / 86400) + "d";
-};
-
-const tick = () => {
-  for (const age of document.querySelectorAll("[data-modified]")) {
-    const ago = since(Number(age.dataset.modified));
-    age.textContent = age.classList.contains("short") ? ago : "updated " + ago + " ago";
-  }
-};
 
+document.documentElement.dataset.js = "true";
 remember(document.getElementById("files"));
 remember(document.getElementById("doc"));
 
+let native = session(window);
 const live = document.getElementById("live");
-let connected = false;
-let dropped = true;
-let failure = "";
-
+const toggle = document.getElementById("updates-toggle");
+let pageFailure = "";
+let navFailure = "";
+let pageWaiting = true;
+let watching = false;
+let navWaiting = true;
+let active = "";
+let releasePage;
 const show = () => {
-  const state = failure !== "" ? "stale" : connected ? "live" : "down";
-  live.dataset.state = state;
-  live.textContent = failure !== "" ? failure : connected ? "live" : "reconnecting";
+  const state = native.registry.get(native.updates.status);
+  const paused = native.registry.get(native.updates.paused);
+  const failure = pageFailure || navFailure;
+  live.dataset.state = paused ? "paused" : failure ? "stale" : !watching || state.connection !== "live" ? "down" : pageWaiting || navWaiting ? "refreshing" : "live";
+  live.textContent = paused ? "updates paused · " + state.pending + (state.pending === 256 ? "+" : "") + " pending updates" : failure || (!watching || state.connection !== "live" ? "reconnecting" : pageWaiting || navWaiting ? "refreshing" : "live");
+  toggle.textContent = paused ? "Resume updates" : "Pause updates";
+  toggle.setAttribute("aria-pressed", String(paused));
+  live.title = "Connection: " + state.connection + "; last observed source watcher: " + (watching ? "watching" : "unavailable") + "; " + (paused ? "automatic reads paused" : pageWaiting || navWaiting ? "reads pending" : failure ? "showing retained source" : "reads settled");
 };
-
-const load = async () => {
-  const version = pageVersion();
+const watchPage = () => {
   const path = location.pathname + location.search;
-  try {
-    const response = await fetch(path, { cache: "no-store" });
-    const next = new DOMParser().parseFromString(await response.text(), "text/html");
-    const files = next.getElementById("files");
-    const doc = next.getElementById("doc");
-    if (version !== pageVersion()) return;
-    if (files === null || doc === null) {
-      failure = "refresh failed (" + response.status + ")";
-      return;
+  if (path === active) return;
+  active = path;
+  releasePage?.();
+  pageFailure = "";
+  const atom = native.api.page.query({ url: path });
+  releasePage = native.registry.subscribe(atom, (value) => {
+    pageWaiting = value.waiting || value._tag === "Initial";
+    if (value._tag === "Failure") pageFailure = "refresh failed";
+    if (value._tag === "Success" && !value.waiting && active === location.pathname + location.search) {
+      const next = new DOMParser().parseFromString(value.value.html, "text/html");
+      pageFailure = applyPage(next, true) ? "" : "refresh failed";
+      tick();
     }
-    failure = "";
-    applyPage(next, true);
-    tick();
-  } catch {
-    if (version !== pageVersion()) return;
-    failure = "refresh failed";
-  }
+    show();
+  }, { immediate: true });
 };
-
-let loading = false;
-let dirty = false;
-const refresh = async () => {
-  if (loading) {
-    dirty = true;
-    return;
+const observe = () => {
+native.registry.subscribe(native.api.navigation.query(), (value) => {
+  navWaiting = value.waiting || value._tag === "Initial";
+  if (value._tag === "Failure") navFailure = "navigation refresh failed";
+  if (value._tag === "Success" && !value.waiting) {
+    navFailure = "";
+    const files = document.getElementById("files");
+    const next = files.cloneNode(false);
+    next.innerHTML = value.value;
+    const current = document.getElementById("doc").dataset.file;
+    for (const link of next.querySelectorAll("a")) if (decodeURIComponent(new URL(link.href, location.href).pathname.slice(1)) === current) link.setAttribute("aria-current", "page");
+    swap(files, next);
+    refreshLibrary();
+    tick();
+    document.dispatchEvent(new Event("board-index-change"));
   }
-  loading = true;
-  do {
-    dirty = false;
-    await load();
-  } while (dirty);
-  loading = false;
-  show();
-};
-
-const events = new EventSource("/events");
-events.addEventListener("ready", () => {
-  connected = true;
-  document.dispatchEvent(new Event("board-index-change"));
   show();
-  if (dropped) refresh();
-  dropped = false;
-});
-const down = () => {
-  connected = false;
-  dropped = true;
+}, { immediate: true });
+native.registry.subscribe(native.api.watcher.query(), (value) => {
+  watching = value._tag === "Success" && value.value.watching;
   show();
+}, { immediate: true });
+native.registry.subscribe(native.updates.status, show);
+native.registry.subscribe(native.updates.paused, (paused) => { show(); if (!paused) document.dispatchEvent(new Event("board-updates-resumed")); });
 };
-events.addEventListener("change", () => { refresh(); document.dispatchEvent(new Event("board-index-change")); });
-events.addEventListener("down", down);
-events.addEventListener("error", down);
+observe();
+toggle.disabled = false;
+toggle.addEventListener("click", () => native.registry.set(native.updates.paused, !native.registry.get(native.updates.paused)));
+document.addEventListener("board-page", watchPage);
+watchPage();
+window.addEventListener("pagehide", () => { releasePage?.(); active = ""; });
+window.addEventListener("pageshow", (event) => {
+  if (!event.persisted) return;
+  native = session(window);
+  pageWaiting = navWaiting = true;
+  watching = false;
+  pageFailure = navFailure = "";
+  observe();
+  watchPage();
+});
 
-document.addEventListener("board-page", tick);
-tick();
-setInterval(tick, 5000);
 renderDiagrams(document);
 `;
 export const preferences = `

package/src/page/diagrams.ts

@@ -1,4 +1,5 @@
 export const diagrams = `
+import { diagramTools } from "/_board/visuals.js";
 const rendered = new Map();
 const dark = matchMedia("(prefers-color-scheme: dark)");
 let mermaid;
@@ -43,14 +44,20 @@ const draw = async (figure) => {
       return;
     }
     figure.querySelector(".diagram-svg")?.remove();
+    figure.querySelector("[data-diagram-error]")?.remove();
     figure.insertAdjacentHTML("afterbegin", '<div class="diagram-svg">' + svg + "</div>");
     figure.dataset.state = "drawn";
+    diagramTools(figure);
   } catch (error) {
     rendered.delete(key);
     if (scheme !== schemeNow()) return;
     figure.querySelector(".diagram-svg")?.remove();
     figure.dataset.state = "failed";
     figure.dataset.error = String(error?.message ?? error);
+    figure.querySelector("[data-diagram-error]")?.remove();
+    const message = document.createElement("p"); message.setAttribute("data-diagram-error", ""); message.setAttribute("role", "status");
+    message.textContent = "Diagram could not be drawn: " + figure.dataset.error; figure.append(message);
+    diagramTools(figure);
   }
 };
 

package/src/page/navigationScript.ts

@@ -3,6 +3,7 @@ export function navigationScript(): string {
 import { applyPage, capturePage } from "/_board/page-state.js";
 import { reportMissingPassage, restoreReading, scrollToPassage } from "/_board/reading-state.js";
 import { refreshLibrary } from "/_board/library.js";
+import { session } from "/_board/native.js";
 
 const cache = new Map();
 const readingKey = "work-board:reading:" + document.documentElement.dataset.workspace;
@@ -65,20 +66,21 @@ const navigate = async (target, entry) => {
     restoreReading(cached.reading);
   } else status.textContent = "Opening document…";
   try {
-    const response = await fetch(target.pathname + target.search, { cache: "no-store", signal: controller.signal });
-    const page = new DOMParser().parseFromString(await response.text(), "text/html");
+    const native = session(window);
+    const response = await native.read(native.api.page.query({ url: target.pathname + target.search }), controller.signal);
+    const page = new DOMParser().parseFromString(response.html, "text/html");
     if (mine !== version) return;
     if (!applyPage(page, Boolean(cached))) throw new Error("Invalid page");
     displayedId = id;
-    status.textContent = response.ok ? "" : response.status === 404 ? "This document is missing or was renamed." : "This document could not be opened.";
-    if (response.ok) reportMissingPassage();
+    status.textContent = response.status < 400 ? "" : response.status === 404 ? "This document is missing or was renamed." : "This document could not be opened.";
+    if (response.status < 400) reportMissingPassage();
     if (!cached) {
       document.getElementById("doc").focus({ preventScroll: true });
       if (savedReading[id] ?? entry?.reading) restoreReading(savedReading[id] ?? entry.reading);
       else scrollToPassage(target.hash);
     }
   } catch (error) {
-    if (mine !== version || error.name === "AbortError") return;
+    if (mine !== version || controller.signal.aborted) return;
     status.textContent = "Could not open this document. Retry the link or reload the page.";
   }
 };

package/src/page/searchScript.ts

@@ -1,6 +1,7 @@
 export function searchScript(): string {
 	return `
 import { activate, matchingCommands, move, showResults } from "/_board/search-results.js";
+import { session } from "/_board/native.js";
 const dialog = document.getElementById("search-dialog");
 const input = document.getElementById("search-query");
 const status = document.getElementById("search-status");
@@ -25,14 +26,15 @@ const search = async () => {
  status.textContent = "Searching…";
  controller = new AbortController();
  try {
-  const response = await fetch("/_board/search?q=" + encodeURIComponent(query), { cache: "no-store", signal: controller.signal });
-  if (!response.ok) throw new Error("Search unavailable");
-  const body = await response.json();
+  const native = session(window);
+  const atom = native.api.search.query({ query });
+  native.registry.refresh(atom);
+  const body = await native.read(atom, controller.signal);
   if (mine !== version || !dialog.open) return;
   showResults([...commands, ...body.results]);
   status.textContent = (body.total ? (body.total > body.results.length ? "Showing " + body.results.length + " of " : "") + body.total + " matches." : "No document matches.") + (body.unavailable.length ? " Could not read " + body.unavailable.length + " files; results are incomplete." : "");
  } catch (error) {
-  if (mine !== version || error.name === "AbortError") return;
+  if (mine !== version || controller.signal.aborted) return;
   status.textContent = "Search could not be completed. Press Search to retry.";
  }
 };

package/src/page/shell.ts

@@ -1,6 +1,7 @@
 import { fileUrl } from "#files/url.ts";
 import { escapeHtml } from "./escape.ts";
 import { searchDialog } from "./searchDialog.ts";
+import { visualDialog } from "./visualDialog.ts";
 
 function location(file: string): string {
 	return file
@@ -23,7 +24,7 @@ export const shell = (
 		'<meta name="viewport" content="width=device-width, initial-scale=1"><meta name="color-scheme" content="light dark">',
 		`<title>${escapeHtml(title)}</title>`,
 		'<link rel="stylesheet" href="/_board/style.css"><script type="module" src="/_board/client.js"></script>',
-		'</head><body><a class="skip" href="#doc">Skip to content</a><div class="workspace">',
+		'</head><body><noscript><style>html:not([data-js]) figure.diagram .diagram-source{display:block}html:not([data-js]) figure.diagram[data-state="pending"]{min-height:0}</style></noscript><a class="skip" href="#doc">Skip to content</a><div class="workspace">',
 		'<aside id="sidebar" class="sidebar"><a class="brand" href="/">work board<span>Local workspace</span></a>',
 		'<div id="reading-library" class="reading-library" hidden></div><h2 class="nav-heading">Project files</h2>',
 		`<nav id="files" class="files" aria-label="Project files">${nav}</nav></aside>`,
@@ -33,7 +34,7 @@ export const shell = (
 		'<div class="preferences" role="group" aria-label="Reading preferences">',
 		'<div class="preference"><label for="theme">Theme</label><select id="theme"><option value="system">System</option><option value="light">Light</option><option value="dark">Dark</option></select></div>',
 		'<div class="preference"><label for="density">Density</label><select id="density"><option value="comfortable">Comfortable</option><option value="compact">Compact</option></select></div>',
-		'<span id="preference-status" role="status"></span></div>',
+		'<button id="updates-toggle" type="button" aria-pressed="false" disabled>Pause updates</button><span id="preference-status" role="status"></span></div>',
 		`<main${view ? ` data-view="${typeof view === "string" ? view : "work"}"` : ""}${identity ? ` data-identity="${escapeHtml(identity)}"` : ""} id="doc" data-file="${escapeHtml(title)}" data-url="${escapeHtml(fileUrl(title))}" class="${board ? "board-view" : "document-view"}" tabindex="-1">${main}</main>`,
-		`</div></div>${searchDialog}</body></html>`,
+		`</div></div>${searchDialog}${visualDialog}</body></html>`,
 	].join("");

package/src/page/stateScript.ts

@@ -22,7 +22,7 @@ export const applyPage = (page, preserve = false) => {
       const content = current.querySelector("#changes-content");
       if (content) incoming.querySelector("#changes-content")?.replaceWith(content.cloneNode(true));
     }
-    swap(current, incoming);
+    swap(current, incoming, true);
   } else {
     current.replaceWith(document.importNode(incoming, true));
     remember(document.getElementById("doc"));

package/src/page/style.ts

@@ -3,6 +3,7 @@ import { workStyle } from "#views/workStyle.ts";
 import { metadataStyles } from "./metadata.ts";
 import { readingStyles } from "./readingStyles.ts";
 import { searchStyles } from "./searchDialog.ts";
+import { visualStyles } from "./visualDialog.ts";
 import { layout, theme } from "./workspaceStyles.ts";
 
 const prose = `
@@ -48,12 +49,14 @@ footer { margin-top: 2.5em; padding-top: 1em; border-top: 1px solid var(--border
 `;
 
 const diagrams = `
+[data-live-change] { outline: 2px solid var(--border); outline-offset: 3px; border-radius: 3px; }
 figure.diagram { margin-left: 0; margin-right: 0; }
 figure.diagram[data-state="pending"] { min-height: 12rem; background: var(--surface); border-radius: 6px; }
 figure.diagram .diagram-source { display: none; }
 figure.diagram[data-state="failed"] .diagram-source { display: block; }
-figure.diagram[data-state="failed"]::after { content: attr(data-error); color: var(--danger); font-size: 0.875em; }
+[data-diagram-error] { color: var(--danger); font-size: 0.875em; }
 @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
 `;
 
-export const style = theme + layout + prose + board + diagrams + readingStyles() + searchStyles + metadataStyles + workStyle() + attentionStyle();
+export const style =
+	theme + layout + prose + board + diagrams + readingStyles() + searchStyles + metadataStyles + workStyle() + attentionStyle() + visualStyles;

package/src/page/swap.ts

@@ -4,15 +4,23 @@ const containers = new Set(["DIV", "SECTION", "ARTICLE", "HEADER", "FOOTER", "MA
 const structural = (element) => [...element.childNodes].every((node) => node.nodeType === 1 || node.textContent.trim() === "");
 
 const pristine = new WeakMap();
+const flash = (element) => {
+  if (element.matches("[data-modified]")) return;
+  if (!element.matches("p, li, pre, blockquote, h1, h2, h3, h4, h5, h6, .item, .notes, .metadata-panel")) return;
+  element.setAttribute("data-live-change", "");
+  setTimeout(() => element.removeAttribute("data-live-change"), 2500);
+};
 
 export const remember = (element) => {
-  pristine.set(element, element.outerHTML);
+  pristine.set(element, normalized(element));
   if (containers.has(element.tagName)) for (const child of element.children) remember(child);
 };
 
 const normalized = (element) => {
   const copy = element.cloneNode(true);
+  for (const tool of copy.querySelectorAll("[data-visual-tools], [data-image-error], [data-diagram-error]")) tool.remove();
   for (const node of [copy, ...copy.querySelectorAll("*")]) {
+    node.removeAttribute("data-live-change");
     if (node.tagName === "DETAILS") node.removeAttribute("open");
     if (node.matches("figure.diagram")) {
       node.querySelector(".diagram-svg")?.remove();
@@ -20,6 +28,10 @@ const normalized = (element) => {
       delete node.dataset.error;
     }
     if (node.matches("[data-modified]")) node.textContent = "";
+    if (node.matches("img[data-local-image]")) {
+      node.setAttribute("src", node.dataset.localImage);
+      for (const attribute of ["tabindex", "role", "aria-label"]) node.removeAttribute(attribute);
+    }
   }
   return copy.outerHTML;
 };
@@ -29,8 +41,10 @@ const signature = (element) => {
   return pristine.get(element);
 };
 
+const normalizedShell = (element) => { const copy = element.cloneNode(false); copy.removeAttribute("data-live-change"); return copy.outerHTML; };
+
 const sameShell = (old, next) =>
-  old.tagName === next.tagName && containers.has(old.tagName) && old.cloneNode(false).outerHTML === next.cloneNode(false).outerHTML;
+  old.tagName === next.tagName && containers.has(old.tagName) && normalizedShell(old) === normalizedShell(next);
 
 const matches = (a, b) => {
   let start = 0;
@@ -55,19 +69,21 @@ const matches = (a, b) => {
   return [...pairs, [a.length, b.length]];
 };
 
-const patch = (current, incoming) => {
+const patch = (current, incoming, highlight) => {
   const selected = current.tagName === "SELECT" ? current.value : null;
   const fallback = incoming.tagName === "SELECT" ? incoming.value : null;
   if (!structural(current) || !structural(incoming)) {
     current.replaceChildren(...incoming.childNodes);
     for (const child of current.children) remember(child);
+    if (highlight) flash(current);
     return;
   }
   const olds = [...current.children];
   const news = [...incoming.children];
-  const signatures = news.map((next) => next.outerHTML);
+  const signatures = news.map(normalized);
   const arrive = (index) => {
     remember(news[index]);
+    if (highlight) flash(news[index]);
     return news[index];
   };
   let i = 0;
@@ -76,7 +92,7 @@ const patch = (current, incoming) => {
     const anchor = olds[kept] ?? null;
     for (; i < kept && j < arrived; i++, j++) {
       if (sameShell(olds[i], news[j])) {
-        patch(olds[i], news[j]);
+        patch(olds[i], news[j], highlight);
         pristine.set(olds[i], signatures[j]);
       } else olds[i].replaceWith(arrive(j));
     }
@@ -110,12 +126,12 @@ const carryDrawings = (drawings, figures) => {
   });
 };
 
-export const swap = (current, incoming) => {
+export const swap = (current, incoming, highlight = false) => {
   const before = keysOf(current);
   const open = new Map(before.map(([key, details]) => [key, details.open]));
   const existing = new Set(before.map(([, details]) => details));
   const drawings = [...current.querySelectorAll("figure.diagram")].map((figure) => figure.querySelector(".diagram-svg"));
-  patch(current, incoming);
+  patch(current, incoming, highlight);
   carryDrawings(drawings, [...current.querySelectorAll("figure.diagram")]);
   for (const [key, details] of keysOf(current)) {
     const was = open.get(key);

package/src/page/visualDialog.ts

@@ -0,0 +1,25 @@
+export const visualDialog = `<dialog id="visual-dialog" aria-labelledby="visual-title">
+<div id="visual-stage">
+<div class="visual-bar"><h2 id="visual-title">Visual evidence</h2><button id="visual-close" type="button">Close</button></div>
+<p id="visual-context"></p>
+<div class="visual-bar" role="group" aria-label="Visual controls">
+<button id="visual-previous" type="button">Previous image</button><button id="visual-next" type="button">Next image</button>
+<button id="visual-out" type="button" aria-label="Zoom out">−</button><button id="visual-fit" type="button">Fit</button><button id="visual-actual" type="button" aria-pressed="false">Actual size</button><button id="visual-in" type="button" aria-label="Zoom in">+</button>
+<button id="visual-fullscreen" type="button">Fullscreen</button><a id="visual-download" download>Save locally</a>
+</div><p id="visual-status" role="status"></p><div id="visual-viewport" tabindex="0" aria-label="Scrollable visual"><div id="visual-content"></div></div>
+<p class="visual-help">Arrow keys choose images · Zoom and scroll to inspect · Escape returns to the source. Recorded evidence does not verify acceptance.</p>
+</div></dialog>`;
+
+export const visualStyles = `
+#visual-dialog{width:min(1100px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text)}
+#visual-dialog::backdrop{background:rgb(0 0 0 / .6)}
+.visual-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.visual-bar h2{flex:1;margin:0;font-size:1.2rem}
+.visual-bar button,.visual-bar a{font:inherit;padding:6px 10px;cursor:pointer;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:6px}
+#visual-context,.visual-help,#visual-status{font-size:.85rem;overflow-wrap:anywhere;color:var(--muted)}
+#visual-viewport{overflow:auto;max-height:65dvh;min-height:150px;background:var(--surface);border:1px solid var(--border);padding:12px}
+#visual-content{width:100%;min-width:0}#visual-content img,#visual-content svg{display:block;width:100%;max-width:none;height:auto}
+#visual-stage:fullscreen{width:100vw;height:100dvh;box-sizing:border-box;padding:16px;background:var(--card);color:var(--text);overflow:auto}#visual-stage:fullscreen #visual-viewport{max-height:75dvh}
+[data-local-image]{cursor:zoom-in}[data-local-image]:focus-visible{outline:2px solid var(--focus)}
+[data-visual-tools]{display:block;margin:8px 0;font-size:.85rem}[data-visual-tools] button{font:inherit;cursor:pointer;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:5px 10px}
+[data-image-error]{display:block;color:var(--danger);font-size:.85rem}
+`;

package/src/page/visualScript.ts

@@ -0,0 +1,41 @@
+export function visualScript(): string {
+	return `
+import { inspectImage, inspectDiagram, inspectAttachment } from "/_board/visual-viewport.js";
+let revision = 0;
+const refresh = () => {
+  revision++;
+  for (const image of document.querySelectorAll("#doc img[data-local-image]")) {
+    image.tabIndex = 0; image.setAttribute("role", "button"); image.setAttribute("aria-label", "Inspect image: " + (image.alt || "Local image"));
+    const url = new URL(image.dataset.localImage, location.href); url.searchParams.set("_wb", Date.now() + "-" + revision); image.src = url.href;
+    image.onerror = () => {
+      if (!image.isConnected || image.nextElementSibling?.hasAttribute("data-image-error")) return;
+      const error = document.createElement("span"); error.setAttribute("data-image-error", ""); error.setAttribute("role", "status");
+      error.textContent = "Image unavailable. Check the local path, supported type, workspace boundary and 16 MiB limit."; image.after(error);
+    };
+    image.onload = () => { if (image.nextElementSibling?.hasAttribute("data-image-error")) image.nextElementSibling.remove(); };
+  }
+};
+export const diagramTools = (figure) => {
+  let tools = figure.querySelector("[data-visual-tools]");
+  if (!tools) {
+    tools = document.createElement("span"); tools.setAttribute("data-visual-tools", "");
+    const button = document.createElement("button"); button.type = "button"; button.textContent = "Inspect diagram"; button.setAttribute("data-inspect-diagram", "");
+    tools.append(button); figure.append(tools);
+  }
+  tools.querySelector("button").disabled = figure.dataset.state !== "drawn";
+};
+document.addEventListener("click", (event) => {
+  if (event.defaultPrevented || event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;
+  const diagram = event.target.closest?.("#doc [data-inspect-diagram]");
+  if (diagram && !diagram.disabled) { inspectDiagram(diagram.closest("figure.diagram"), diagram); return; }
+  const link = event.target.closest?.('#doc a[href^="/_board/attachment/"]');
+  if (link && !link.hasAttribute("download") && (!link.target || link.target === "_self")) { event.preventDefault(); inspectAttachment(link); return; }
+  const image = event.target.closest?.("#doc img[data-local-image]"); if (image) { event.preventDefault(); inspectImage(image); }
+});
+document.addEventListener("keydown", (event) => {
+  if (["Enter", " "].includes(event.key) && event.target.matches?.("#doc img[data-local-image]")) { event.preventDefault(); inspectImage(event.target); }
+});
+document.addEventListener("board-page", refresh);
+refresh();
+`;
+}

package/src/page/visualViewport.ts

@@ -0,0 +1,86 @@
+export function visualViewport(): string {
+	return `
+const dialog = document.getElementById("visual-dialog");
+const content = document.getElementById("visual-content");
+const viewport = document.getElementById("visual-viewport");
+const status = document.getElementById("visual-status");
+const download = document.getElementById("visual-download");
+let scale = 100;
+let baseWidth = 0;
+let objectUrl;
+let origin;
+let images = [];
+let selected = -1;
+const id = (name) => document.getElementById("visual-" + name);
+const release = () => { if (objectUrl) URL.revokeObjectURL(objectUrl); objectUrl = undefined; };
+const zoom = (next) => {
+  scale = Math.max(25, Math.min(800, next));
+  content.style.width = baseWidth ? (baseWidth * scale / 100) + "px" : scale + "%";
+  id("actual").setAttribute("aria-pressed", baseWidth ? "true" : "false");
+  id("fit").textContent = scale === 100 && !baseWidth ? "Fit" : Math.round(scale) + "% · Fit";
+};
+const fit = () => { baseWidth = 0; zoom(100); viewport.scrollTop = 0; viewport.scrollLeft = 0; };
+const showImage = () => {
+  release(); fit(); status.textContent = "";
+  const source = images[selected];
+  const image = new Image(); image.alt = source.alt;
+  image.onerror = () => { if (content.contains(image)) { status.textContent = "Image unavailable. Check the local path, supported type, workspace boundary and 16 MiB limit."; download.removeAttribute("href"); download.setAttribute("aria-disabled", "true"); } };
+  image.src = source.src; content.replaceChildren(image);
+  id("context").textContent = (source.alt || "Local image") + " · " + (selected + 1) + " of " + images.length + " · " + source.dataset.localImage + " · " + document.getElementById("doc").dataset.file;
+  download.href = source.dataset.localImage;
+  try { download.download = decodeURIComponent(new URL(download.href).pathname.split("/").at(-1)); } catch { download.download = "work-board-image"; }
+  download.setAttribute("aria-disabled", "false");
+  id("previous").disabled = selected <= 0; id("next").disabled = selected >= images.length - 1;
+};
+export const inspectImage = (source) => {
+  origin = source; images = [...document.querySelectorAll("#doc img[data-local-image]")]; selected = images.indexOf(source);
+  id("previous").hidden = false; id("next").hidden = false; showImage(); dialog.showModal();
+};
+export const inspectAttachment = (link) => {
+  origin = link; const source = { alt: link.textContent, dataset: { localImage: link.getAttribute("href") }, src: link.href };
+  images = [source]; selected = 0; id("previous").hidden = false; id("next").hidden = false; showImage(); dialog.showModal();
+};
+export const inspectDiagram = (figure, trigger) => {
+  const drawing = figure.querySelector(".diagram-svg svg");
+  if (!drawing) return;
+  origin = trigger; selected = -1; images = []; release(); fit(); status.textContent = "";
+  const copy = drawing.cloneNode(true); copy.style.maxWidth = "none"; copy.style.width = "100%"; copy.style.height = "auto";
+  content.replaceChildren(copy);
+  id("context").textContent = "Mermaid diagram · " + document.getElementById("doc").dataset.file + " · Current drawing";
+  id("previous").hidden = true; id("next").hidden = true;
+  const xml = new XMLSerializer().serializeToString(drawing);
+  objectUrl = URL.createObjectURL(new Blob([xml], { type: "image/svg+xml" }));
+  download.href = objectUrl; download.download = "work-board-diagram.svg"; dialog.showModal();
+  download.setAttribute("aria-disabled", "false");
+};
+const move = (offset) => { if (selected < 0) return; selected = Math.max(0, Math.min(images.length - 1, selected + offset)); showImage(); };
+id("previous").addEventListener("click", () => move(-1)); id("next").addEventListener("click", () => move(1));
+id("in").addEventListener("click", () => zoom(scale * 1.5)); id("out").addEventListener("click", () => zoom(scale / 1.5));
+id("fit").addEventListener("click", fit);
+id("actual").addEventListener("click", () => {
+  const graphic = content.firstElementChild;
+  const width = graphic?.naturalWidth || graphic?.viewBox?.baseVal?.width;
+  if (!width) { status.textContent = "Original dimensions unavailable; Fit and zoom remain available."; return; }
+  baseWidth = width; zoom(100); viewport.scrollTop = 0; viewport.scrollLeft = 0;
+});
+id("close").addEventListener("click", () => dialog.close());
+id("fullscreen").addEventListener("click", async () => {
+  try { if (document.fullscreenElement) await document.exitFullscreen(); else await id("stage").requestFullscreen(); }
+  catch { status.textContent = "Fullscreen is unavailable here; the scrollable viewer remains available."; }
+});
+dialog.addEventListener("keydown", (event) => {
+  if (event.key === "ArrowLeft" && selected >= 0) { event.preventDefault(); move(-1); }
+  if (event.key === "ArrowRight" && selected >= 0) { event.preventDefault(); move(1); }
+  if (event.key === "Escape") { event.preventDefault(); dialog.close(); }
+});
+dialog.addEventListener("close", async () => {
+  release(); content.replaceChildren();
+  if (dialog.contains(document.fullscreenElement)) await document.exitFullscreen().catch(() => {});
+  (origin?.isConnected ? origin : document.getElementById("doc")).focus();
+});
+document.addEventListener("board-page", () => {
+  if (dialog.open) { status.textContent = "Source updated. This preview is the drawing/image opened earlier; close and reopen to inspect or save the latest source."; download.removeAttribute("href"); download.setAttribute("aria-disabled", "true"); }
+});
+window.addEventListener("pagehide", () => { release(); if (dialog.open) dialog.close(); });
+`;
+}

package/src/path/attachment.ts

@@ -0,0 +1,23 @@
+const TYPES: Readonly<Record<string, string>> = {
+	gif: "image/gif",
+	jpeg: "image/jpeg",
+	jpg: "image/jpeg",
+	png: "image/png",
+	webp: "image/webp",
+};
+
+export function attachmentType(file: string): string | undefined {
+	const extension = file.split(".").at(-1)?.toLowerCase() ?? "";
+	return Object.hasOwn(TYPES, extension) ? TYPES[extension] : undefined;
+}
+
+export function attachmentHref(href: string): string | undefined {
+	if (!href.startsWith("/") || href.startsWith("//")) {
+		return undefined;
+	}
+	const url = new URL(href, "http://work-board.local");
+	if (url.pathname.startsWith("/_board/attachment/")) {
+		return href;
+	}
+	return attachmentType(url.pathname) ? `/_board/attachment${url.pathname}${url.search}${url.hash}` : undefined;
+}

package/src/path/isMarkdown.ts

@@ -0,0 +1,6 @@
+function skipped(segment: string): boolean {
+	return segment.startsWith(".") || segment === "node_modules";
+}
+export function isMarkdown(path: string): boolean {
+	return path.endsWith(".md") && !path.split("/").some(skipped);
+}