@shivaedev/work-board 0.5.0 → 0.6.0

package/src/page/visualScript.ts

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

package/src/page/visualViewport.ts

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

package/src/path/attachment.ts

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

package/src/render/documentLinks.ts

@@ -1,17 +1,28 @@
 import { defineHastPlugin } from "satteri";
 import { fileUrl } from "#files/url.ts";
+import { attachmentHref } from "#path/attachment.ts";
 
 export function documentLinks(file: string) {
 	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",