@shivaedev/work-board 0.4.1 → 0.6.0

package/dist/page/diagrams.d.ts

@@ -1,2 +1,2 @@
-export declare const diagrams = "\nconst rendered = new Map();\nconst dark = matchMedia(\"(prefers-color-scheme: dark)\");\nlet mermaid;\nlet counter = 0;\n\nconst token = (name) => getComputedStyle(document.documentElement).getPropertyValue(name).trim();\n\nconst load = async () => {\n  mermaid ??= (await import(\"/_board/mermaid/mermaid.esm.min.mjs\")).default;\n  mermaid.initialize({\n    startOnLoad: false,\n    securityLevel: \"strict\",\n    theme: \"base\",\n    themeVariables: {\n      darkMode: schemeNow() === \"dark\",\n      background: token(\"--bg\"),\n      primaryColor: token(\"--surface\"),\n      primaryTextColor: token(\"--text\"),\n      primaryBorderColor: token(\"--border\"),\n      lineColor: token(\"--muted\"),\n      textColor: token(\"--text\"),\n      fontFamily: token(\"--sans\"),\n    },\n  });\n  return mermaid;\n};\n\nconst schemeNow = () => document.documentElement.dataset.scheme ?? (dark.matches ? \"dark\" : \"light\");\nlet lastScheme = schemeNow();\n\nconst draw = async (figure) => {\n  const source = figure.querySelector(\".diagram-source\").textContent;\n  const scheme = schemeNow();\n  const key = scheme + \":\" + source;\n  if (!rendered.has(key)) {\n    rendered.set(key, load().then((engine) => engine.render(\"diagram-\" + ++counter, source)).then((result) => result.svg));\n  }\n  try {\n    const svg = await rendered.get(key);\n    if (scheme !== schemeNow()) {\n      rendered.delete(key);\n      return;\n    }\n    figure.querySelector(\".diagram-svg\")?.remove();\n    figure.insertAdjacentHTML(\"afterbegin\", '<div class=\"diagram-svg\">' + svg + \"</div>\");\n    figure.dataset.state = \"drawn\";\n  } catch (error) {\n    rendered.delete(key);\n    if (scheme !== schemeNow()) return;\n    figure.querySelector(\".diagram-svg\")?.remove();\n    figure.dataset.state = \"failed\";\n    figure.dataset.error = String(error?.message ?? error);\n  }\n};\n\nconst forget = (root) => {\n  const shown = new Set([...root.querySelectorAll(\"figure.diagram .diagram-source\")].map((source) => source.textContent));\n  for (const key of rendered.keys()) {\n    if (!shown.has(key.slice(key.indexOf(\":\") + 1))) rendered.delete(key);\n  }\n};\n\nexport const renderDiagrams = (root, selector = \"figure.diagram:not([data-state=drawn])\") => {\n  forget(root);\n  return Promise.all([...root.querySelectorAll(selector)].map(draw));\n};\n\nconst themeChanged = () => {\n  const scheme = schemeNow();\n  if (lastScheme === scheme) return;\n  lastScheme = scheme;\n  const doc = document.getElementById(\"doc\");\n  if (doc) doc.dataset.scheme = scheme;\n  mermaid = undefined;\n  renderDiagrams(document, \"figure.diagram\");\n};\ndocument.addEventListener(\"board-theme\", themeChanged);\ndark.addEventListener(\"change\", themeChanged);\n";
+export declare const diagrams = "\nimport { diagramTools } from \"/_board/visuals.js\";\nconst rendered = new Map();\nconst dark = matchMedia(\"(prefers-color-scheme: dark)\");\nlet mermaid;\nlet counter = 0;\n\nconst token = (name) => getComputedStyle(document.documentElement).getPropertyValue(name).trim();\n\nconst load = async () => {\n  mermaid ??= (await import(\"/_board/mermaid/mermaid.esm.min.mjs\")).default;\n  mermaid.initialize({\n    startOnLoad: false,\n    securityLevel: \"strict\",\n    theme: \"base\",\n    themeVariables: {\n      darkMode: schemeNow() === \"dark\",\n      background: token(\"--bg\"),\n      primaryColor: token(\"--surface\"),\n      primaryTextColor: token(\"--text\"),\n      primaryBorderColor: token(\"--border\"),\n      lineColor: token(\"--muted\"),\n      textColor: token(\"--text\"),\n      fontFamily: token(\"--sans\"),\n    },\n  });\n  return mermaid;\n};\n\nconst schemeNow = () => document.documentElement.dataset.scheme ?? (dark.matches ? \"dark\" : \"light\");\nlet lastScheme = schemeNow();\n\nconst draw = async (figure) => {\n  const source = figure.querySelector(\".diagram-source\").textContent;\n  const scheme = schemeNow();\n  const key = scheme + \":\" + source;\n  if (!rendered.has(key)) {\n    rendered.set(key, load().then((engine) => engine.render(\"diagram-\" + ++counter, source)).then((result) => result.svg));\n  }\n  try {\n    const svg = await rendered.get(key);\n    if (scheme !== schemeNow()) {\n      rendered.delete(key);\n      return;\n    }\n    figure.querySelector(\".diagram-svg\")?.remove();\n    figure.querySelector(\"[data-diagram-error]\")?.remove();\n    figure.insertAdjacentHTML(\"afterbegin\", '<div class=\"diagram-svg\">' + svg + \"</div>\");\n    figure.dataset.state = \"drawn\";\n    diagramTools(figure);\n  } catch (error) {\n    rendered.delete(key);\n    if (scheme !== schemeNow()) return;\n    figure.querySelector(\".diagram-svg\")?.remove();\n    figure.dataset.state = \"failed\";\n    figure.dataset.error = String(error?.message ?? error);\n    figure.querySelector(\"[data-diagram-error]\")?.remove();\n    const message = document.createElement(\"p\"); message.setAttribute(\"data-diagram-error\", \"\"); message.setAttribute(\"role\", \"status\");\n    message.textContent = \"Diagram could not be drawn: \" + figure.dataset.error; figure.append(message);\n    diagramTools(figure);\n  }\n};\n\nconst forget = (root) => {\n  const shown = new Set([...root.querySelectorAll(\"figure.diagram .diagram-source\")].map((source) => source.textContent));\n  for (const key of rendered.keys()) {\n    if (!shown.has(key.slice(key.indexOf(\":\") + 1))) rendered.delete(key);\n  }\n};\n\nexport const renderDiagrams = (root, selector = \"figure.diagram:not([data-state=drawn])\") => {\n  forget(root);\n  return Promise.all([...root.querySelectorAll(selector)].map(draw));\n};\n\nconst themeChanged = () => {\n  const scheme = schemeNow();\n  if (lastScheme === scheme) return;\n  lastScheme = scheme;\n  const doc = document.getElementById(\"doc\");\n  if (doc) doc.dataset.scheme = scheme;\n  mermaid = undefined;\n  renderDiagrams(document, \"figure.diagram\");\n};\ndocument.addEventListener(\"board-theme\", themeChanged);\ndark.addEventListener(\"change\", themeChanged);\n";
 //# sourceMappingURL=diagrams.d.ts.map

package/dist/page/diagrams.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"diagrams.d.ts","sourceRoot":"","sources":["../../src/page/diagrams.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,ktFA+EpB,CAAC"}
+{"version":3,"file":"diagrams.d.ts","sourceRoot":"","sources":["../../src/page/diagrams.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,4rGAsFpB,CAAC"}

package/dist/page/diagrams.js

@@ -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/dist/page/diagrams.js.map

@@ -1 +1 @@
-{"version":3,"file":"diagrams.js","sourceRoot":"","sources":["../../src/page/diagrams.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+EvB,CAAC"}
+{"version":3,"file":"diagrams.js","sourceRoot":"","sources":["../../src/page/diagrams.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFvB,CAAC"}

package/dist/page/navigationScript.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigationScript.d.ts","sourceRoot":"","sources":["../../src/page/navigationScript.ts"],"names":[],"mappings":"AAAA,wBAAgB,gBAAgB,IAAI,MAAM,CAsGzC"}
+{"version":3,"file":"navigationScript.d.ts","sourceRoot":"","sources":["../../src/page/navigationScript.ts"],"names":[],"mappings":"AAAA,wBAAgB,gBAAgB,IAAI,MAAM,CAwGzC"}

package/dist/page/navigationScript.js

@@ -3,6 +3,7 @@ export function navigationScript() {
 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/dist/page/navigationScript.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigationScript.js","sourceRoot":"","sources":["../../src/page/navigationScript.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,gBAAgB;IAC/B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoGP,CAAC;AACF,CAAC"}
+{"version":3,"file":"navigationScript.js","sourceRoot":"","sources":["../../src/page/navigationScript.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,gBAAgB;IAC/B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGP,CAAC;AACF,CAAC"}

package/dist/page/searchScript.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"searchScript.d.ts","sourceRoot":"","sources":["../../src/page/searchScript.ts"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,IAAI,MAAM,CAuErC"}
+{"version":3,"file":"searchScript.d.ts","sourceRoot":"","sources":["../../src/page/searchScript.ts"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,IAAI,MAAM,CAyErC"}

package/dist/page/searchScript.js

@@ -1,6 +1,7 @@
 export function searchScript() {
     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/dist/page/searchScript.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchScript.js","sourceRoot":"","sources":["../../src/page/searchScript.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,YAAY;IAC3B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqEP,CAAC;AACF,CAAC"}
+{"version":3,"file":"searchScript.js","sourceRoot":"","sources":["../../src/page/searchScript.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,YAAY;IAC3B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEP,CAAC;AACF,CAAC"}

package/dist/page/shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shell.d.ts","sourceRoot":"","sources":["../../src/page/shell.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,KAAK,GACjB,OAAO,MAAM,EACb,KAAK,MAAM,EACX,MAAM,MAAM,EACZ,WAAW,MAAM,EACjB,OAAO,OAAO,EACd,WAAW,MAAM,EACjB,OAAM,OAAO,GAAG,UAAU,GAAG,SAAiB,KAC5C,MAmBQ,CAAC"}
+{"version":3,"file":"shell.d.ts","sourceRoot":"","sources":["../../src/page/shell.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,KAAK,GACjB,OAAO,MAAM,EACb,KAAK,MAAM,EACX,MAAM,MAAM,EACZ,WAAW,MAAM,EACjB,OAAO,OAAO,EACd,WAAW,MAAM,EACjB,OAAM,OAAO,GAAG,UAAU,GAAG,SAAiB,KAC5C,MAmBQ,CAAC"}

package/dist/page/shell.js

@@ -1,6 +1,7 @@
 import { fileUrl } from "#files/url.ts";
 import { escapeHtml } from "./escape.js";
 import { searchDialog } from "./searchDialog.js";
+import { visualDialog } from "./visualDialog.js";
 function location(file) {
     return file
         .split("/")
@@ -12,7 +13,7 @@ export const shell = (title, nav, main, workspace, board, identity, view = false
     '<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>`,
@@ -22,8 +23,8 @@ export const shell = (title, nav, main, workspace, board, identity, view = false
     '<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("");
 //# sourceMappingURL=shell.js.map

package/dist/page/shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"shell.js","sourceRoot":"","sources":["../../src/page/shell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,SAAS,QAAQ,CAAC,IAAY;IAC7B,OAAO,IAAI;SACT,KAAK,CAAC,GAAG,CAAC;SACV,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC;SACjD,IAAI,CAAC,kCAAkC,CAAC,CAAC;AAC5C,CAAC;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,CACpB,KAAa,EACb,GAAW,EACX,IAAY,EACZ,SAAiB,EACjB,KAAc,EACd,QAAiB,EACjB,OAAyC,KAAK,EACrC,EAAE,CACX;IACC,kDAAkD,UAAU,CAAC,SAAS,CAAC,gCAAgC;IACvG,qHAAqH;IACrH,UAAU,UAAU,CAAC,KAAK,CAAC,UAAU;IACrC,yGAAyG;IACzG,qFAAqF;IACrF,0GAA0G;IAC1G,2GAA2G;IAC3G,4DAA4D,GAAG,gBAAgB;IAC/E,6IAA6I;IAC7I,iIAAiI,QAAQ,CAAC,KAAK,CAAC,QAAQ;IACxJ,kEAAkE,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,kFAAkF,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,yEAAyE,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,6QAA6Q;IACtnB,yEAAyE;IACzE,wMAAwM;IACxM,0LAA0L;IAC1L,0DAA0D;IAC1D,QAAQ,IAAI,CAAC,CAAC,CAAC,eAAe,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,mBAAmB,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,wBAAwB,UAAU,CAAC,KAAK,CAAC,eAAe,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,mBAAmB,IAAI,SAAS;IAC/S,eAAe,YAAY,gBAAgB;CAC3C,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC"}
+{"version":3,"file":"shell.js","sourceRoot":"","sources":["../../src/page/shell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,SAAS,QAAQ,CAAC,IAAY;IAC7B,OAAO,IAAI;SACT,KAAK,CAAC,GAAG,CAAC;SACV,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC;SACjD,IAAI,CAAC,kCAAkC,CAAC,CAAC;AAC5C,CAAC;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,CACpB,KAAa,EACb,GAAW,EACX,IAAY,EACZ,SAAiB,EACjB,KAAc,EACd,QAAiB,EACjB,OAAyC,KAAK,EACrC,EAAE,CACX;IACC,kDAAkD,UAAU,CAAC,SAAS,CAAC,gCAAgC;IACvG,qHAAqH;IACrH,UAAU,UAAU,CAAC,KAAK,CAAC,UAAU;IACrC,yGAAyG;IACzG,gQAAgQ;IAChQ,0GAA0G;IAC1G,2GAA2G;IAC3G,4DAA4D,GAAG,gBAAgB;IAC/E,6IAA6I;IAC7I,iIAAiI,QAAQ,CAAC,KAAK,CAAC,QAAQ;IACxJ,kEAAkE,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,kFAAkF,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,yEAAyE,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,6QAA6Q;IACtnB,yEAAyE;IACzE,wMAAwM;IACxM,0LAA0L;IAC1L,wJAAwJ;IACxJ,QAAQ,IAAI,CAAC,CAAC,CAAC,eAAe,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,mBAAmB,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,wBAAwB,UAAU,CAAC,KAAK,CAAC,eAAe,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,mBAAmB,IAAI,SAAS;IAC/S,eAAe,YAAY,GAAG,YAAY,gBAAgB;CAC1D,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC"}

package/dist/page/stateScript.js

@@ -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/dist/page/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/page/style.ts"],"names":[],"mappings":"AA0DA,eAAO,MAAM,KAAK,QAA+H,CAAC"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/page/style.ts"],"names":[],"mappings":"AA4DA,eAAO,MAAM,KAAK,QAC0H,CAAC"}

package/dist/page/style.js

@@ -3,6 +3,7 @@ import { workStyle } from "#views/workStyle.ts";
 import { metadataStyles } from "./metadata.js";
 import { readingStyles } from "./readingStyles.js";
 import { searchStyles } from "./searchDialog.js";
+import { visualStyles } from "./visualDialog.js";
 import { layout, theme } from "./workspaceStyles.js";
 const prose = `
 h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; margin: 1.6em 0 0.5em; }
@@ -45,12 +46,13 @@ const board = `
 footer { margin-top: 2.5em; padding-top: 1em; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.925em; }
 `;
 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;
 //# sourceMappingURL=style.js.map

package/dist/page/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/page/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAErD,MAAM,KAAK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;CA0Bb,CAAC;AAEF,MAAM,KAAK,GAAG;;;;;;;;;;;;CAYb,CAAC;AAEF,MAAM,QAAQ,GAAG;;;;;;;CAOhB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,aAAa,EAAE,GAAG,YAAY,GAAG,cAAc,GAAG,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC"}
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/page/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAErD,MAAM,KAAK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;CA0Bb,CAAC;AAEF,MAAM,KAAK,GAAG;;;;;;;;;;;;CAYb,CAAC;AAEF,MAAM,QAAQ,GAAG;;;;;;;;CAQhB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GACjB,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,aAAa,EAAE,GAAG,YAAY,GAAG,cAAc,GAAG,SAAS,EAAE,GAAG,cAAc,EAAE,GAAG,YAAY,CAAC"}

package/dist/page/swap.d.ts

@@ -1,2 +1,2 @@
-export declare const swap = "\nconst containers = new Set([\"DIV\", \"SECTION\", \"ARTICLE\", \"HEADER\", \"FOOTER\", \"MAIN\", \"NAV\", \"FORM\", \"SELECT\", \"LABEL\", \"ASIDE\"]);\n\nconst structural = (element) => [...element.childNodes].every((node) => node.nodeType === 1 || node.textContent.trim() === \"\");\n\nconst pristine = new WeakMap();\n\nexport const remember = (element) => {\n  pristine.set(element, element.outerHTML);\n  if (containers.has(element.tagName)) for (const child of element.children) remember(child);\n};\n\nconst normalized = (element) => {\n  const copy = element.cloneNode(true);\n  for (const node of [copy, ...copy.querySelectorAll(\"*\")]) {\n    if (node.tagName === \"DETAILS\") node.removeAttribute(\"open\");\n    if (node.matches(\"figure.diagram\")) {\n      node.querySelector(\".diagram-svg\")?.remove();\n      node.dataset.state = \"pending\";\n      delete node.dataset.error;\n    }\n    if (node.matches(\"[data-modified]\")) node.textContent = \"\";\n  }\n  return copy.outerHTML;\n};\n\nconst signature = (element) => {\n  if (!pristine.has(element)) pristine.set(element, normalized(element));\n  return pristine.get(element);\n};\n\nconst sameShell = (old, next) =>\n  old.tagName === next.tagName && containers.has(old.tagName) && old.cloneNode(false).outerHTML === next.cloneNode(false).outerHTML;\n\nconst matches = (a, b) => {\n  let start = 0;\n  while (start < a.length && start < b.length && a[start] === b[start]) start++;\n  let tail = 0;\n  while (tail < a.length - start && tail < b.length - start && a[a.length - 1 - tail] === b[b.length - 1 - tail]) tail++;\n  const n = a.length - start - tail;\n  const m = b.length - start - tail;\n  const table = Array.from({ length: n + 1 }, () => new Uint32Array(m + 1));\n  for (let i = n - 1; i >= 0; i--) {\n    for (let j = m - 1; j >= 0; j--) {\n      table[i][j] = a[start + i] === b[start + j] ? table[i + 1][j + 1] + 1 : Math.max(table[i + 1][j], table[i][j + 1]);\n    }\n  }\n  const pairs = Array.from({ length: start }, (_, index) => [index, index]);\n  for (let i = 0, j = 0; i < n && j < m; ) {\n    if (a[start + i] === b[start + j]) pairs.push([start + i++, start + j++]);\n    else if (table[i + 1][j] >= table[i][j + 1]) i++;\n    else j++;\n  }\n  for (let index = tail; index > 0; index--) pairs.push([a.length - index, b.length - index]);\n  return [...pairs, [a.length, b.length]];\n};\n\nconst patch = (current, incoming) => {\n  const selected = current.tagName === \"SELECT\" ? current.value : null;\n  const fallback = incoming.tagName === \"SELECT\" ? incoming.value : null;\n  if (!structural(current) || !structural(incoming)) {\n    current.replaceChildren(...incoming.childNodes);\n    for (const child of current.children) remember(child);\n    return;\n  }\n  const olds = [...current.children];\n  const news = [...incoming.children];\n  const signatures = news.map((next) => next.outerHTML);\n  const arrive = (index) => {\n    remember(news[index]);\n    return news[index];\n  };\n  let i = 0;\n  let j = 0;\n  for (const [kept, arrived] of matches(olds.map(signature), signatures)) {\n    const anchor = olds[kept] ?? null;\n    for (; i < kept && j < arrived; i++, j++) {\n      if (sameShell(olds[i], news[j])) {\n        patch(olds[i], news[j]);\n        pristine.set(olds[i], signatures[j]);\n      } else olds[i].replaceWith(arrive(j));\n    }\n    for (; i < kept; i++) olds[i].remove();\n    for (; j < arrived; j++) current.insertBefore(arrive(j), anchor);\n    i++;\n    j++;\n  }\n  if (selected !== null) current.value = [...current.options].some((option) => option.value === selected) ? selected : fallback;\n};\n\nconst keysOf = (root) => {\n  const seen = new Map();\n  return [...root.querySelectorAll(\"details\")].map((details) => {\n    const base =\n      details.dataset.key ??\n      (details.closest(\".item\")?.querySelector(\"h3\")?.textContent ?? \"\") + \"|\" + (details.querySelector(\"summary\")?.textContent ?? \"\");\n    const count = seen.get(base) ?? 0;\n    seen.set(base, count + 1);\n    return [base + \"#\" + count, details];\n  });\n};\n\nconst carryDrawings = (drawings, figures) => {\n  if (drawings.length !== figures.length) return;\n  figures.forEach((figure, index) => {\n    const drawing = drawings[index];\n    if (figure.dataset.state !== \"pending\" || drawing === null || drawing.isConnected) return;\n    figure.prepend(drawing);\n    figure.dataset.state = \"redrawing\";\n  });\n};\n\nexport const swap = (current, incoming) => {\n  const before = keysOf(current);\n  const open = new Map(before.map(([key, details]) => [key, details.open]));\n  const existing = new Set(before.map(([, details]) => details));\n  const drawings = [...current.querySelectorAll(\"figure.diagram\")].map((figure) => figure.querySelector(\".diagram-svg\"));\n  patch(current, incoming);\n  carryDrawings(drawings, [...current.querySelectorAll(\"figure.diagram\")]);\n  for (const [key, details] of keysOf(current)) {\n    const was = open.get(key);\n    if (was !== undefined && !existing.has(details)) details.open = was;\n  }\n};\n";
+export declare const swap = "\nconst containers = new Set([\"DIV\", \"SECTION\", \"ARTICLE\", \"HEADER\", \"FOOTER\", \"MAIN\", \"NAV\", \"FORM\", \"SELECT\", \"LABEL\", \"ASIDE\"]);\n\nconst structural = (element) => [...element.childNodes].every((node) => node.nodeType === 1 || node.textContent.trim() === \"\");\n\nconst pristine = new WeakMap();\nconst flash = (element) => {\n  if (element.matches(\"[data-modified]\")) return;\n  if (!element.matches(\"p, li, pre, blockquote, h1, h2, h3, h4, h5, h6, .item, .notes, .metadata-panel\")) return;\n  element.setAttribute(\"data-live-change\", \"\");\n  setTimeout(() => element.removeAttribute(\"data-live-change\"), 2500);\n};\n\nexport const remember = (element) => {\n  pristine.set(element, normalized(element));\n  if (containers.has(element.tagName)) for (const child of element.children) remember(child);\n};\n\nconst normalized = (element) => {\n  const copy = element.cloneNode(true);\n  for (const tool of copy.querySelectorAll(\"[data-visual-tools], [data-image-error], [data-diagram-error]\")) tool.remove();\n  for (const node of [copy, ...copy.querySelectorAll(\"*\")]) {\n    node.removeAttribute(\"data-live-change\");\n    if (node.tagName === \"DETAILS\") node.removeAttribute(\"open\");\n    if (node.matches(\"figure.diagram\")) {\n      node.querySelector(\".diagram-svg\")?.remove();\n      node.dataset.state = \"pending\";\n      delete node.dataset.error;\n    }\n    if (node.matches(\"[data-modified]\")) node.textContent = \"\";\n    if (node.matches(\"img[data-local-image]\")) {\n      node.setAttribute(\"src\", node.dataset.localImage);\n      for (const attribute of [\"tabindex\", \"role\", \"aria-label\"]) node.removeAttribute(attribute);\n    }\n  }\n  return copy.outerHTML;\n};\n\nconst signature = (element) => {\n  if (!pristine.has(element)) pristine.set(element, normalized(element));\n  return pristine.get(element);\n};\n\nconst normalizedShell = (element) => { const copy = element.cloneNode(false); copy.removeAttribute(\"data-live-change\"); return copy.outerHTML; };\n\nconst sameShell = (old, next) =>\n  old.tagName === next.tagName && containers.has(old.tagName) && normalizedShell(old) === normalizedShell(next);\n\nconst matches = (a, b) => {\n  let start = 0;\n  while (start < a.length && start < b.length && a[start] === b[start]) start++;\n  let tail = 0;\n  while (tail < a.length - start && tail < b.length - start && a[a.length - 1 - tail] === b[b.length - 1 - tail]) tail++;\n  const n = a.length - start - tail;\n  const m = b.length - start - tail;\n  const table = Array.from({ length: n + 1 }, () => new Uint32Array(m + 1));\n  for (let i = n - 1; i >= 0; i--) {\n    for (let j = m - 1; j >= 0; j--) {\n      table[i][j] = a[start + i] === b[start + j] ? table[i + 1][j + 1] + 1 : Math.max(table[i + 1][j], table[i][j + 1]);\n    }\n  }\n  const pairs = Array.from({ length: start }, (_, index) => [index, index]);\n  for (let i = 0, j = 0; i < n && j < m; ) {\n    if (a[start + i] === b[start + j]) pairs.push([start + i++, start + j++]);\n    else if (table[i + 1][j] >= table[i][j + 1]) i++;\n    else j++;\n  }\n  for (let index = tail; index > 0; index--) pairs.push([a.length - index, b.length - index]);\n  return [...pairs, [a.length, b.length]];\n};\n\nconst patch = (current, incoming, highlight) => {\n  const selected = current.tagName === \"SELECT\" ? current.value : null;\n  const fallback = incoming.tagName === \"SELECT\" ? incoming.value : null;\n  if (!structural(current) || !structural(incoming)) {\n    current.replaceChildren(...incoming.childNodes);\n    for (const child of current.children) remember(child);\n    if (highlight) flash(current);\n    return;\n  }\n  const olds = [...current.children];\n  const news = [...incoming.children];\n  const signatures = news.map(normalized);\n  const arrive = (index) => {\n    remember(news[index]);\n    if (highlight) flash(news[index]);\n    return news[index];\n  };\n  let i = 0;\n  let j = 0;\n  for (const [kept, arrived] of matches(olds.map(signature), signatures)) {\n    const anchor = olds[kept] ?? null;\n    for (; i < kept && j < arrived; i++, j++) {\n      if (sameShell(olds[i], news[j])) {\n        patch(olds[i], news[j], highlight);\n        pristine.set(olds[i], signatures[j]);\n      } else olds[i].replaceWith(arrive(j));\n    }\n    for (; i < kept; i++) olds[i].remove();\n    for (; j < arrived; j++) current.insertBefore(arrive(j), anchor);\n    i++;\n    j++;\n  }\n  if (selected !== null) current.value = [...current.options].some((option) => option.value === selected) ? selected : fallback;\n};\n\nconst keysOf = (root) => {\n  const seen = new Map();\n  return [...root.querySelectorAll(\"details\")].map((details) => {\n    const base =\n      details.dataset.key ??\n      (details.closest(\".item\")?.querySelector(\"h3\")?.textContent ?? \"\") + \"|\" + (details.querySelector(\"summary\")?.textContent ?? \"\");\n    const count = seen.get(base) ?? 0;\n    seen.set(base, count + 1);\n    return [base + \"#\" + count, details];\n  });\n};\n\nconst carryDrawings = (drawings, figures) => {\n  if (drawings.length !== figures.length) return;\n  figures.forEach((figure, index) => {\n    const drawing = drawings[index];\n    if (figure.dataset.state !== \"pending\" || drawing === null || drawing.isConnected) return;\n    figure.prepend(drawing);\n    figure.dataset.state = \"redrawing\";\n  });\n};\n\nexport const swap = (current, incoming, highlight = false) => {\n  const before = keysOf(current);\n  const open = new Map(before.map(([key, details]) => [key, details.open]));\n  const existing = new Set(before.map(([, details]) => details));\n  const drawings = [...current.querySelectorAll(\"figure.diagram\")].map((figure) => figure.querySelector(\".diagram-svg\"));\n  patch(current, incoming, highlight);\n  carryDrawings(drawings, [...current.querySelectorAll(\"figure.diagram\")]);\n  for (const [key, details] of keysOf(current)) {\n    const was = open.get(key);\n    if (was !== undefined && !existing.has(details)) details.open = was;\n  }\n};\n";
 //# sourceMappingURL=swap.d.ts.map

package/dist/page/swap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"swap.d.ts","sourceRoot":"","sources":["../../src/page/swap.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,g+JA4HhB,CAAC"}
+{"version":3,"file":"swap.d.ts","sourceRoot":"","sources":["../../src/page/swap.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,m7LA4IhB,CAAC"}

package/dist/page/swap.js

@@ -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/dist/page/swap.js.map

@@ -1 +1 @@
-{"version":3,"file":"swap.js","sourceRoot":"","sources":["../../src/page/swap.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HnB,CAAC"}
+{"version":3,"file":"swap.js","sourceRoot":"","sources":["../../src/page/swap.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4InB,CAAC"}

package/dist/page/visualDialog.d.ts

@@ -0,0 +1,3 @@
+export declare const visualDialog = "<dialog id=\"visual-dialog\" aria-labelledby=\"visual-title\">\n<div id=\"visual-stage\">\n<div class=\"visual-bar\"><h2 id=\"visual-title\">Visual evidence</h2><button id=\"visual-close\" type=\"button\">Close</button></div>\n<p id=\"visual-context\"></p>\n<div class=\"visual-bar\" role=\"group\" aria-label=\"Visual controls\">\n<button id=\"visual-previous\" type=\"button\">Previous image</button><button id=\"visual-next\" type=\"button\">Next image</button>\n<button id=\"visual-out\" type=\"button\" aria-label=\"Zoom out\">\u2212</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>\n<button id=\"visual-fullscreen\" type=\"button\">Fullscreen</button><a id=\"visual-download\" download>Save locally</a>\n</div><p id=\"visual-status\" role=\"status\"></p><div id=\"visual-viewport\" tabindex=\"0\" aria-label=\"Scrollable visual\"><div id=\"visual-content\"></div></div>\n<p class=\"visual-help\">Arrow keys choose images \u00B7 Zoom and scroll to inspect \u00B7 Escape returns to the source. Recorded evidence does not verify acceptance.</p>\n</div></dialog>";
+export declare const visualStyles = "\n#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)}\n#visual-dialog::backdrop{background:rgb(0 0 0 / .6)}\n.visual-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.visual-bar h2{flex:1;margin:0;font-size:1.2rem}\n.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}\n#visual-context,.visual-help,#visual-status{font-size:.85rem;overflow-wrap:anywhere;color:var(--muted)}\n#visual-viewport{overflow:auto;max-height:65dvh;min-height:150px;background:var(--surface);border:1px solid var(--border);padding:12px}\n#visual-content{width:100%;min-width:0}#visual-content img,#visual-content svg{display:block;width:100%;max-width:none;height:auto}\n#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}\n[data-local-image]{cursor:zoom-in}[data-local-image]:focus-visible{outline:2px solid var(--focus)}\n[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}\n[data-image-error]{display:block;color:var(--danger);font-size:.85rem}\n";
+//# sourceMappingURL=visualDialog.d.ts.map

package/dist/page/visualDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visualDialog.d.ts","sourceRoot":"","sources":["../../src/page/visualDialog.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,6tCAUT,CAAC;AAEjB,eAAO,MAAM,YAAY,g/CAYxB,CAAC"}

package/dist/page/visualDialog.js

@@ -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}
+`;
+//# sourceMappingURL=visualDialog.js.map

package/dist/page/visualDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visualDialog.js","sourceRoot":"","sources":["../../src/page/visualDialog.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;gBAUZ,CAAC;AAEjB,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;CAY3B,CAAC"}

package/dist/page/visualScript.d.ts

@@ -0,0 +1,2 @@
+export declare function visualScript(): string;
+//# sourceMappingURL=visualScript.d.ts.map

package/dist/page/visualScript.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visualScript.d.ts","sourceRoot":"","sources":["../../src/page/visualScript.ts"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,IAAI,MAAM,CAwCrC"}

package/dist/page/visualScript.js

@@ -0,0 +1,42 @@
+export function visualScript() {
+    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();
+`;
+}
+//# sourceMappingURL=visualScript.js.map

package/dist/page/visualScript.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visualScript.js","sourceRoot":"","sources":["../../src/page/visualScript.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,YAAY;IAC3B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCP,CAAC;AACF,CAAC"}

package/dist/page/visualViewport.d.ts

@@ -0,0 +1,2 @@
+export declare function visualViewport(): string;
+//# sourceMappingURL=visualViewport.d.ts.map

package/dist/page/visualViewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visualViewport.d.ts","sourceRoot":"","sources":["../../src/page/visualViewport.ts"],"names":[],"mappings":"AAAA,wBAAgB,cAAc,IAAI,MAAM,CAqFvC"}

package/dist/page/visualViewport.js

@@ -0,0 +1,87 @@
+export function visualViewport() {
+    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(); });
+`;
+}
+//# sourceMappingURL=visualViewport.js.map

package/dist/page/visualViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visualViewport.js","sourceRoot":"","sources":["../../src/page/visualViewport.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,cAAc;IAC7B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmFP,CAAC;AACF,CAAC"}

package/dist/path/attachment.d.ts

@@ -0,0 +1,3 @@
+export declare function attachmentType(file: string): string | undefined;
+export declare function attachmentHref(href: string): string | undefined;
+//# sourceMappingURL=attachment.d.ts.map

package/dist/path/attachment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment.d.ts","sourceRoot":"","sources":["../../src/path/attachment.ts"],"names":[],"mappings":"AAQA,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAG/D;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAS/D"}