@shivaedev/work-board 0.5.0 → 0.6.0

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"}

package/dist/path/attachment.js

@@ -0,0 +1,22 @@
+const TYPES = {
+    gif: "image/gif",
+    jpeg: "image/jpeg",
+    jpg: "image/jpeg",
+    png: "image/png",
+    webp: "image/webp",
+};
+export function attachmentType(file) {
+    const extension = file.split(".").at(-1)?.toLowerCase() ?? "";
+    return Object.hasOwn(TYPES, extension) ? TYPES[extension] : undefined;
+}
+export function attachmentHref(href) {
+    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;
+}
+//# sourceMappingURL=attachment.js.map

package/dist/path/attachment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment.js","sourceRoot":"","sources":["../../src/path/attachment.ts"],"names":[],"mappings":"AAAA,MAAM,KAAK,GAAqC;IAC/C,GAAG,EAAE,WAAW;IAChB,IAAI,EAAE,YAAY;IAClB,GAAG,EAAE,YAAY;IACjB,GAAG,EAAE,WAAW;IAChB,IAAI,EAAE,YAAY;CAClB,CAAC;AAEF,MAAM,UAAU,cAAc,CAAC,IAAY;IAC1C,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;IAC9D,OAAO,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AACvE,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,IAAY;IAC1C,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;QACpD,OAAO,SAAS,CAAC;IAClB,CAAC;IACD,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,EAAE,yBAAyB,CAAC,CAAC;IACrD,IAAI,GAAG,CAAC,QAAQ,CAAC,UAAU,CAAC,qBAAqB,CAAC,EAAE,CAAC;QACpD,OAAO,IAAI,CAAC;IACb,CAAC;IACD,OAAO,cAAc,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,qBAAqB,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;AAC/G,CAAC"}

package/dist/render/documentLinks.d.ts

@@ -238,6 +238,7 @@ export declare function documentLinks(file: string): {
                 horizAdvX?: number | string | undefined;
                 horizOriginX?: number | string | undefined;
                 horizOriginY?: number | string | undefined;
+                href?: string | undefined;
                 hrefLang?: string | undefined;
                 hSpace?: number | string | undefined;
                 htmlFor?: Array<string> | undefined;
@@ -650,7 +651,7 @@ export declare function documentLinks(file: string): {
                 yChannelSelector?: string | undefined;
                 z?: string | undefined;
                 zoomAndPan?: string | undefined;
-                href: string;
+                dataLocalImage?: string;
             };
         } | undefined;
     };

package/dist/render/documentLinks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"documentLinks.d.ts","sourceRoot":"","sources":["../../src/render/documentLinks.ts"],"names":[],"mappings":"AAGA,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAezC"}
+{"version":3,"file":"documentLinks.d.ts","sourceRoot":"","sources":["../../src/render/documentLinks.ts"],"names":[],"mappings":"AAIA,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyBzC"}

package/dist/render/documentLinks.js

@@ -1,16 +1,27 @@
 import { defineHastPlugin } from "satteri";
 import { fileUrl } from "#files/url.ts";
+import { attachmentHref } from "#path/attachment.ts";
 export function documentLinks(file) {
     return defineHastPlugin({
         element: {
-            filter: ["a"],
+            filter: ["a", "img"],
             visit: (element) => {
-                const href = element.properties.href;
-                if (typeof href !== "string" || href.startsWith("#") || href.startsWith("/") || /^[a-z][a-z\d+.-]*:/iu.exec(href) !== null) {
+                const attribute = element.tagName === "img" ? "src" : "href";
+                const href = element.properties[attribute];
+                if (typeof href !== "string" || href.startsWith("#") || href.startsWith("//") || /^[a-z][a-z\d+.-]*:/iu.exec(href) !== null) {
                     return;
                 }
                 const target = new URL(href, `http://work-board.local${fileUrl(file)}`);
-                return { ...element, properties: { ...element.properties, href: target.pathname + target.search + target.hash } };
+                const resolved = target.pathname + target.search + target.hash;
+                const image = attachmentHref(resolved);
+                return {
+                    ...element,
+                    properties: {
+                        ...element.properties,
+                        [attribute]: image ?? resolved,
+                        ...(element.tagName === "img" && image ? { dataLocalImage: image } : {}),
+                    },
+                };
             },
         },
         name: "work-board-document-links",

package/dist/render/documentLinks.js.map

@@ -1 +1 @@
-{"version":3,"file":"documentLinks.js","sourceRoot":"","sources":["../../src/render/documentLinks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,MAAM,UAAU,aAAa,CAAC,IAAY;IACzC,OAAO,gBAAgB,CAAC;QACvB,OAAO,EAAE;YACR,MAAM,EAAE,CAAC,GAAG,CAAC;YACb,KAAK,EAAE,CAAC,OAAO,EAAE,EAAE;gBAClB,MAAM,IAAI,GAAG,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC;gBACrC,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;oBAC5H,OAAO;gBACR,CAAC;gBACD,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,IAAI,EAAE,0BAA0B,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gBACxE,OAAO,EAAE,GAAG,OAAO,EAAE,UAAU,EAAE,EAAE,GAAG,OAAO,CAAC,UAAU,EAAE,IAAI,EAAE,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC;YACnH,CAAC;SACD;QACD,IAAI,EAAE,2BAA2B;KACjC,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"documentLinks.js","sourceRoot":"","sources":["../../src/render/documentLinks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,MAAM,UAAU,aAAa,CAAC,IAAY;IACzC,OAAO,gBAAgB,CAAC;QACvB,OAAO,EAAE;YACR,MAAM,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC;YACpB,KAAK,EAAE,CAAC,OAAO,EAAE,EAAE;gBAClB,MAAM,SAAS,GAAG,OAAO,CAAC,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;gBAC7D,MAAM,IAAI,GAAG,OAAO,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;gBAC3C,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;oBAC7H,OAAO;gBACR,CAAC;gBACD,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,IAAI,EAAE,0BAA0B,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gBACxE,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC;gBAC/D,MAAM,KAAK,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;gBACvC,OAAO;oBACN,GAAG,OAAO;oBACV,UAAU,EAAE;wBACX,GAAG,OAAO,CAAC,UAAU;wBACrB,CAAC,SAAS,CAAC,EAAE,KAAK,IAAI,QAAQ;wBAC9B,GAAG,CAAC,OAAO,CAAC,OAAO,KAAK,KAAK,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;qBACxE;iBACD,CAAC;YACH,CAAC;SACD;QACD,IAAI,EAAE,2BAA2B;KACjC,CAAC,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shivaedev/work-board",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Serve a folder of markdown files as a live local page that updates in place when a file changes",
   "homepage": "https://github.com/ShivaeDev/platform/tree/main/packages/work-board#readme",
   "bugs": {

package/src/board.ts

@@ -3,6 +3,7 @@ import { HttpRouter, HttpServerRequest, type HttpServerResponse } from "effect/u
 import { watchChanges } from "#files/changes.ts";
 import { type HomeMissing, homeIn } from "#files/home.ts";
 import { ASSETS, MERMAID_ROUTE, type MermaidMissing, mermaidFile, mermaidRoot, NATIVE_ROUTE, nativeAsset } from "#http/assets.ts";
+import { attachment } from "#http/attachment.ts";
 import { events } from "#http/events.ts";
 import { changesPage, history } from "#http/history.ts";
 import { identity } from "#http/identity.ts";
@@ -40,6 +41,7 @@ const routes = (options: BoardOptions) =>
 					loopbackOnly((request) => Effect.provideContext(handler(request), context)),
 				);
 			yield* serve("/events", events(changes));
+			yield* serve("/_board/attachment/*", attachment(options.root, changes.realRoot));
 			const index = yield* searchSnapshot(options.root, home, changes);
 			yield* serve("/_board/search", search(index));
 			const workPage = work(index, changes, home);

package/src/cli.ts

@@ -4,7 +4,7 @@ import { Effect, Layer, Option, Path } from "effect";
 import { Argument, Command, Flag } from "effect/unstable/cli";
 import { HOST, serveBoard } from "./serve.ts";
 
-const VERSION = "0.5.0";
+const VERSION = "0.6.0";
 
 const serve = Effect.fn("WorkBoard.serve")(function* (input: { readonly dir: string; readonly port: number; readonly home: Option.Option<string> }) {
 	const path = yield* Path.Path;

package/src/files/watchDirectories.ts

@@ -1,4 +1,5 @@
 import { Data, Deferred, Effect, FileSystem, Option, Path, Stream } from "effect";
+import { attachmentType } from "#path/attachment.ts";
 import { isMarkdown, scanMarkdown } from "./list.ts";
 
 class WatchEnded extends Data.TaggedError("WatchEnded") {}
@@ -45,7 +46,7 @@ export const watchDirectories = Effect.fn("WorkBoard.watchDirectories")(function
 						}
 					}),
 				),
-				Stream.filter(isMarkdown),
+				Stream.filter((relative) => isMarkdown(relative) || attachmentType(relative) !== undefined),
 				Stream.interruptWhen(Deferred.await(topology)),
 				Stream.groupedWithin(BATCH, SETTLE),
 				Stream.runForEach((paths) => publish([...new Set(paths)])),

package/src/http/assets.ts

@@ -13,11 +13,15 @@ import { searchScript } from "#page/searchScript.ts";
 import { pageStateScript } from "#page/stateScript.ts";
 import { style } from "#page/style.ts";
 import { swap } from "#page/swap.ts";
+import { visualScript } from "#page/visualScript.ts";
+import { visualViewport } from "#page/visualViewport.ts";
 import { savedScript } from "#views/savedScript.ts";
 import { respond } from "./respond.ts";
 
 export const ASSETS: ReadonlyArray<readonly [HttpRouter.PathInput, string, string]> = [
 	["/_board/style.css", style, "text/css"],
+	["/_board/visuals.js", visualScript(), "text/javascript"],
+	["/_board/visual-viewport.js", visualViewport(), "text/javascript"],
 	["/_board/saved-views.js", savedScript(), "text/javascript"],
 	["/_board/client.js", client, "text/javascript"],
 	["/_board/ages.js", ageScript(), "text/javascript"],

package/src/http/attachment.ts

@@ -0,0 +1,46 @@
+import { Effect, FileSystem, Path } from "effect";
+import type { HttpServerRequest } from "effect/unstable/http";
+import { within } from "#files/list.ts";
+import { attachmentType } from "#path/attachment.ts";
+import { respond } from "./respond.ts";
+
+const MAX_BYTES = 16 * 1024 * 1024;
+
+export function attachment(root: string, realRoot: string) {
+	return Effect.fn("WorkBoard.attachment")(function* (request: HttpServerRequest.HttpServerRequest) {
+		function missing() {
+			return respond("Local image unavailable: unsupported type, missing file or workspace boundary.", "text/plain", 404);
+		}
+		let relative: string;
+		try {
+			relative = decodeURIComponent(new URL(request.url, "http://127.0.0.1").pathname.slice("/_board/attachment/".length));
+		} catch {
+			return missing();
+		}
+		const type = attachmentType(relative);
+		if (
+			!type
+			|| relative.includes("\\")
+			|| relative.split("/").some((part) => !part || part === ".." || part.startsWith(".") || part === "node_modules")
+		) {
+			return missing();
+		}
+		const fs = yield* FileSystem.FileSystem;
+		const path = yield* Path.Path;
+		return yield* Effect.gen(function* () {
+			const real = yield* fs.realPath(path.join(root, relative));
+			if (!within(realRoot, path.sep, real)) {
+				return missing();
+			}
+			const info = yield* fs.stat(real);
+			if (info.type !== "File") {
+				return missing();
+			}
+			if (info.size > BigInt(MAX_BYTES)) {
+				return respond("Local image exceeds the 16 MiB limit.", "text/plain", 413);
+			}
+			const body = yield* fs.readFile(real);
+			return body.byteLength > MAX_BYTES ? respond("Local image exceeds the 16 MiB limit.", "text/plain", 413) : respond(body, type);
+		}).pipe(Effect.orElseSucceed(missing));
+	});
+}

package/src/metadata/sourceLinks.ts

@@ -1,4 +1,5 @@
 import { fileUrl } from "#files/url.ts";
+import { attachmentHref } from "#path/attachment.ts";
 import { referenceTarget } from "./links.ts";
 import type { MetadataModel } from "./model.ts";
 
@@ -11,7 +12,8 @@ export function sourceHref(source: string, file: string): string | undefined {
 		if (!["http:", "https:"].includes(url.protocol)) {
 			return undefined;
 		}
-		return absolute.exec(source) === null ? url.pathname + url.search + url.hash : url.href;
+		const local = url.pathname + url.search + url.hash;
+		return absolute.exec(source) === null ? (attachmentHref(local) ?? local) : url.href;
 	} catch {
 		return undefined;
 	}

package/src/page/client.ts

@@ -12,6 +12,7 @@ import { refreshLibrary } from "/_board/library.js";
 import { session } from "/_board/native.js";
 
 
+document.documentElement.dataset.js = "true";
 remember(document.getElementById("files"));
 remember(document.getElementById("doc"));
 

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/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>`,
@@ -35,5 +36,5 @@ export const shell = (
 		'<div class="preference"><label for="density">Density</label><select id="density"><option value="comfortable">Comfortable</option><option value="compact">Compact</option></select></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/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 = `
@@ -53,8 +54,9 @@ 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

@@ -12,12 +12,13 @@ const flash = (element) => {
 };
 
 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");
@@ -27,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;
 };
@@ -75,7 +80,7 @@ const patch = (current, incoming, highlight) => {
   }
   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]);

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}
+`;