@uurtech/jdf 0.1.13 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uurtech/jdf",
-  "version": "0.1.13",
+  "version": "0.1.16",
   "description": "Render JDF (JSON Document Format) documents in the browser. Drop-in replacement for embedding PDFs — point at a .jdf file and it appears on the page, fully styled, searchable, with a clickable TOC.",
   "license": "MIT",
   "author": "Ugur Kazdal <ugur@uurtech.com>",

package/src/auto-init.ts

@@ -13,9 +13,15 @@
  *   window.JDFjsAutoInit = false   // before loading the script
  */
 
-import { embed, type JDFViewerOptions } from "./viewer";
+import { embed, type JDFViewerOptions, type JDFViewerInstance } from "./viewer";
 
 const PROCESSED = new WeakSet<Element>();
+// Track per-element resources so we can dispose them when the element leaves
+// the DOM (SPA route changes, frameworks that re-render). Without this, every
+// route mount adds a fresh JDFViewer instance and a MutationObserver while
+// the previous ones are kept alive by the observer references.
+const VIEWER_INSTANCES = new WeakMap<Element, JDFViewerInstance>();
+const ATTR_OBSERVERS = new WeakMap<Element, MutationObserver>();
 
 function readOptions(el: Element): JDFViewerOptions {
   const opts: JDFViewerOptions = {};
@@ -35,7 +41,11 @@ function readOptions(el: Element): JDFViewerOptions {
   const page = attr("page");
   if (page != null) {
     const n = Number(page);
-    if (!isNaN(n)) opts.initialPage = n;
+    // The `page` attribute is 1-based for users (matches the toolbar
+    // indicator); JDFViewer's internal initialPage is 0-based. Convert
+    // here so <jdf page="1"> opens on page 1, not page 2. Clamp to >= 0
+    // so a typo'd `page="0"` doesn't crash navigation later.
+    if (!isNaN(n)) opts.initialPage = Math.max(0, Math.floor(n) - 1);
   }
   const w = attr("width");
   if (w != null) {
@@ -62,10 +72,16 @@ function processElement(el: Element) {
   const container = el as HTMLElement;
   applySizeAttrs(container);
   const opts = readOptions(el);
-  embed(container, src, opts).catch((err) => {
-    console.error("[jdf.js] failed to embed", src, err);
-    container.dispatchEvent(new CustomEvent("jdf-error", { detail: err, bubbles: true }));
-  });
+  embed(container, src, opts)
+    .then((inst) => {
+      VIEWER_INSTANCES.set(el, inst);
+      maybeAttachSaveButton(container, inst);
+    })
+    .catch((err) => {
+      if ((err as Error)?.name === "AbortError") return; // src changed mid-fetch
+      console.error("[jdf.js] failed to embed", src, err);
+      container.dispatchEvent(new CustomEvent("jdf-error", { detail: err, bubbles: true }));
+    });
   // Watch for attribute changes — re-render when src changes,
   // resize when width/height changes. Replaces the custom element
   // attributeChangedCallback (which we can't use because <jdf> isn't
@@ -73,6 +89,49 @@ function processElement(el: Element) {
   observeAttributes(container);
 }
 
+/**
+ * Wire up the optional save button. Two attributes opt in:
+ *   <jdf src="form.jdf" save-button>                — adds a "Save" button
+ *   <jdf src="form.jdf" save-button="Download form"> — custom label
+ *   <jdf src="form.jdf" save-filename="filled.jdf"> — explicit filename
+ *
+ * The button is positioned in the embed's bottom-right corner via the
+ * `jdfjs-save-button` class (themable from the host page). Clicking it
+ * downloads the current document — including any form values the user
+ * has typed — to the user's filesystem.
+ */
+function maybeAttachSaveButton(container: HTMLElement, inst: JDFViewerInstance) {
+  if (!container.hasAttribute("save-button")) return;
+  const labelAttr = container.getAttribute("save-button");
+  const label = labelAttr && labelAttr.length > 0 && labelAttr !== "true" ? labelAttr : "Save";
+  const filename = container.getAttribute("save-filename") || undefined;
+  const btn = window.document.createElement("button");
+  btn.type = "button";
+  btn.className = "jdfjs-save-button";
+  btn.textContent = label;
+  btn.addEventListener("click", () => inst.downloadJdf(filename));
+  // Make sure the host has positioning context for the absolutely-placed button.
+  if (getComputedStyle(container).position === "static") {
+    container.style.position = "relative";
+  }
+  container.appendChild(btn);
+}
+
+function disposeElement(el: Element) {
+  const inst = VIEWER_INSTANCES.get(el);
+  if (inst) {
+    try { inst.destroy(); } catch { /* swallow */ }
+    VIEWER_INSTANCES.delete(el);
+  }
+  const aobs = ATTR_OBSERVERS.get(el);
+  if (aobs) {
+    aobs.disconnect();
+    ATTR_OBSERVERS.delete(el);
+  }
+  PROCESSED.delete(el);
+  ATTR_OBSERVED.delete(el);
+}
+
 function applySizeAttrs(el: HTMLElement) {
   const w = el.getAttribute("width");
   if (w != null) {
@@ -96,8 +155,9 @@ function observeAttributes(el: Element) {
       if (m.type !== "attributes" || !m.attributeName) continue;
       const name = m.attributeName;
       if (name === "src") {
-        // Re-render with the new src
-        PROCESSED.delete(el);
+        // Re-render with the new src — dispose the previous viewer first so
+        // its observers/listeners are torn down before the next one mounts.
+        disposeElement(el);
         processElement(el);
       } else if (name === "width" || name === "height") {
         applySizeAttrs(el as HTMLElement);
@@ -105,6 +165,7 @@ function observeAttributes(el: Element) {
     }
   });
   obs.observe(el, { attributes: true, attributeFilter: ["src", "width", "height"] });
+  ATTR_OBSERVERS.set(el, obs);
 }
 
 function scan(root: ParentNode = document) {
@@ -118,7 +179,19 @@ function watchForNewTargets() {
       m.addedNodes.forEach((n) => {
         if (n instanceof Element) {
           if (n.tagName.toLowerCase() === "jdf") processElement(n);
-          else scan(n);
+          else if (typeof n.querySelectorAll === "function") {
+            // Limit to elements that look like roots, not viewer-internal
+            // children — those are added by us and have no <jdf> tag inside.
+            n.querySelectorAll("jdf").forEach(processElement);
+          }
+        }
+      });
+      m.removedNodes.forEach((n) => {
+        if (n instanceof Element) {
+          if (n.tagName.toLowerCase() === "jdf") disposeElement(n);
+          else if (typeof n.querySelectorAll === "function") {
+            n.querySelectorAll("jdf").forEach(disposeElement);
+          }
         }
       });
     }

package/src/jdfjs.css

@@ -223,3 +223,138 @@ jdf {
   width: 100%;
   min-height: 600px;
 }
+
+/* === Form elements ====================================================== */
+.jdfjs-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-family: "Inter", -apple-system, sans-serif;
+  font-size: 12px;
+  color: var(--jdfjs-text);
+  width: 100%;
+  height: 100%;
+}
+
+.jdfjs-form-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--jdfjs-text-soft);
+  letter-spacing: 0.02em;
+}
+
+.jdfjs-form-control {
+  display: block;
+  width: 100%;
+  padding: 6px 10px;
+  font: inherit;
+  color: var(--jdfjs-text);
+  background: var(--jdfjs-bg);
+  border: 1px solid var(--jdfjs-border);
+  border-radius: 6px;
+  transition: border-color 0.12s ease, box-shadow 0.12s ease;
+  box-sizing: border-box;
+}
+.jdfjs-form-control:focus {
+  outline: none;
+  border-color: var(--jdfjs-brand);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
+}
+.jdfjs-form-control[readonly],
+.jdfjs-form-control:disabled {
+  background: var(--jdfjs-bg-soft, #f3f4f6);
+  color: var(--jdfjs-text-soft);
+  cursor: not-allowed;
+}
+
+textarea.jdfjs-form-control {
+  resize: vertical;
+  min-height: 60px;
+  line-height: 1.4;
+}
+
+.jdfjs-form-checkbox {
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+.jdfjs-form-checkbox input[type="checkbox"] {
+  width: 16px; height: 16px;
+  margin: 0;
+  cursor: pointer;
+  accent-color: var(--jdfjs-brand);
+}
+.jdfjs-form-checkbox-label {
+  font-size: 13px;
+  color: var(--jdfjs-text);
+  user-select: none;
+}
+
+select.jdfjs-form-control {
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: linear-gradient(45deg, transparent 50%, var(--jdfjs-text-soft) 50%),
+                    linear-gradient(135deg, var(--jdfjs-text-soft) 50%, transparent 50%);
+  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
+  background-size: 5px 5px, 5px 5px;
+  background-repeat: no-repeat;
+  padding-right: 28px;
+}
+
+.jdfjs-form-signature-canvas {
+  border: 1px dashed var(--jdfjs-border);
+  border-radius: 6px;
+  background: var(--jdfjs-bg);
+  cursor: crosshair;
+  touch-action: none;
+}
+.jdfjs-form-signature-clear {
+  align-self: flex-start;
+  margin-top: 4px;
+  padding: 2px 10px;
+  font-size: 11px;
+  color: var(--jdfjs-text-soft);
+  background: transparent;
+  border: 1px solid var(--jdfjs-border);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.jdfjs-form-signature-clear:hover {
+  color: var(--jdfjs-text);
+  border-color: var(--jdfjs-text-soft);
+}
+
+/* === Save button (auto-init's `save-button` attribute) ================= */
+.jdfjs-save-button {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  z-index: 5;
+  padding: 8px 16px;
+  font-family: "Inter", -apple-system, sans-serif;
+  font-size: 13px;
+  font-weight: 600;
+  color: #fff;
+  background: var(--jdfjs-brand);
+  border: 0;
+  border-radius: 8px;
+  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
+  cursor: pointer;
+  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
+}
+.jdfjs-save-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
+}
+.jdfjs-save-button:active {
+  transform: translateY(0);
+}
+
+.jdfjs-dark .jdfjs-save-button {
+  background: #3b82f6;
+}
+.jdfjs-dark .jdfjs-form-control[readonly],
+.jdfjs-dark .jdfjs-form-control:disabled {
+  background: #1f2937;
+}

package/src/jdfx.ts

@@ -2,10 +2,26 @@ import JSZip from "jszip";
 import {
   JDFX_DOCUMENT_PATH,
   JDFX_MANIFEST_PATH,
+  JDFX_ASSET_DIR,
   type JdfDocument,
   type JdfxManifest,
 } from "@jdf/core";
 
+/**
+ * Reject manifest asset paths that try to escape the bundle's asset
+ * directory. JSZip operates in-memory so this isn't a filesystem traversal
+ * — but a crafted manifest can still bind an image resource to
+ * `document.json` itself, or to any other zip entry, which produces
+ * confusing render output (the document's own JSON loaded as an image).
+ * Restrict to entries under `assets/` and reject anything with `..`.
+ */
+function isSafeAssetPath(p: string): boolean {
+  if (!p || typeof p !== "string") return false;
+  if (p.startsWith("/") || p.includes("\\")) return false;
+  if (p.includes("..")) return false;
+  return p.startsWith(`${JDFX_ASSET_DIR}/`);
+}
+
 /**
  * Open a `.jdfx` zip bundle and return the embedded JDF document with all
  * `image` element `resource` references rewritten to blob URLs that work as
@@ -33,6 +49,10 @@ export async function unpackJdfxToDocument(bytes: ArrayBuffer | Uint8Array): Pro
   const idToBlobUrl = new Map<string, string>();
   if (manifest?.assets) {
     for (const entry of manifest.assets) {
+      if (!isSafeAssetPath(entry.path)) {
+        console.warn(`[jdfjs] dropping unsafe manifest asset path: ${entry.path}`);
+        continue;
+      }
       const file = zip.file(entry.path);
       if (!file) continue;
       const data = await file.async("uint8array");

package/src/renderers/element.ts

@@ -2,6 +2,7 @@ import type {
   Element, Style, Resources, JdfDocument,
   TextElement, RichTextElement, ImageElement, TableElement, ListElement,
   ShapeElement, CollapsibleElement, TocElement, RichTextRun, ListItem, TableCellValue, ImageResource,
+  FormInputElement, FormTextareaElement, FormCheckboxElement, FormSelectElement, FormSignatureElement,
 } from "@jdf/core";
 import { unitToPx } from "@jdf/core";
 import { resolveStyle, styleToCss, applyStyle } from "../utils/style";
@@ -13,6 +14,14 @@ export interface RenderContext {
   document: JdfDocument;
   path: (string | number)[];
   onNavigatePage?: (pageIndex: number) => void;
+  /**
+   * Called when a form field's value changes. The viewer wires this to a
+   * mutation that updates the in-memory JdfDocument so `exportJdf()` later
+   * returns the user-filled state. `path` is the element path inside the
+   * doc (e.g. `["pages", 0, "elements", 3]`); `field` is `"value"` /
+   * `"checked"` / `"values"`.
+   */
+  onFormChange?: (path: (string | number)[], field: string, value: unknown) => void;
 }
 
 const NS_SVG = "http://www.w3.org/2000/svg";
@@ -30,6 +39,11 @@ export function renderElement(el: Element, ctx: RenderContext): HTMLElement | nu
     case "shape": inner = renderShape(el); break;
     case "collapsible": inner = renderCollapsible(el, ctx); break;
     case "toc": inner = renderToc(el, ctx); break;
+    case "input": inner = renderFormInput(el, ctx); break;
+    case "textarea": inner = renderFormTextarea(el, ctx); break;
+    case "checkbox": inner = renderFormCheckbox(el, ctx); break;
+    case "select": inner = renderFormSelect(el, ctx); break;
+    case "signature": inner = renderFormSignature(el, ctx); break;
   }
   if (!inner) return null;
   wrap.appendChild(inner);
@@ -511,3 +525,183 @@ function renderToc(el: TocElement, ctx: RenderContext): HTMLElement {
   }
   return wrap;
 }
+
+// ── form elements ──────────────────────────────────────────────────────────
+
+function makeLabel(text: string | undefined): HTMLLabelElement | null {
+  if (!text) return null;
+  const lab = document.createElement("label");
+  lab.className = "jdfjs-form-label";
+  lab.textContent = text;
+  return lab;
+}
+
+function commitFormChange(ctx: RenderContext, field: string, value: unknown) {
+  if (!ctx.onFormChange) return;
+  ctx.onFormChange(ctx.path, field, value);
+}
+
+function renderFormInput(el: FormInputElement, ctx: RenderContext): HTMLElement {
+  const wrap = document.createElement("div");
+  wrap.className = "jdfjs-form-field jdfjs-form-input";
+  applyStyle(wrap, resolveStyle(el.style, ctx.styles));
+  const lab = makeLabel(el.label);
+  if (lab) wrap.appendChild(lab);
+  const input = document.createElement("input");
+  input.className = "jdfjs-form-control";
+  input.type = el.inputType || "text";
+  input.name = el.name;
+  if (el.value != null) input.value = el.value;
+  if (el.placeholder) input.placeholder = el.placeholder;
+  if (el.readonly) input.readOnly = true;
+  if (el.required) input.required = true;
+  if (el.pattern) input.pattern = el.pattern;
+  input.addEventListener("input", () => commitFormChange(ctx, "value", input.value));
+  input.addEventListener("change", () => commitFormChange(ctx, "value", input.value));
+  wrap.appendChild(input);
+  return wrap;
+}
+
+function renderFormTextarea(el: FormTextareaElement, ctx: RenderContext): HTMLElement {
+  const wrap = document.createElement("div");
+  wrap.className = "jdfjs-form-field jdfjs-form-textarea";
+  applyStyle(wrap, resolveStyle(el.style, ctx.styles));
+  const lab = makeLabel(el.label);
+  if (lab) wrap.appendChild(lab);
+  const ta = document.createElement("textarea");
+  ta.className = "jdfjs-form-control";
+  ta.name = el.name;
+  if (el.value != null) ta.value = el.value;
+  if (el.placeholder) ta.placeholder = el.placeholder;
+  if (el.readonly) ta.readOnly = true;
+  if (el.required) ta.required = true;
+  if (el.rows) ta.rows = el.rows;
+  ta.addEventListener("input", () => commitFormChange(ctx, "value", ta.value));
+  ta.addEventListener("change", () => commitFormChange(ctx, "value", ta.value));
+  wrap.appendChild(ta);
+  return wrap;
+}
+
+function renderFormCheckbox(el: FormCheckboxElement, ctx: RenderContext): HTMLElement {
+  const wrap = document.createElement("label");
+  wrap.className = "jdfjs-form-field jdfjs-form-checkbox";
+  applyStyle(wrap, resolveStyle(el.style, ctx.styles));
+  const cb = document.createElement("input");
+  cb.type = "checkbox";
+  cb.name = el.name;
+  cb.checked = el.checked === true;
+  if (el.readonly) cb.disabled = true;
+  if (el.required) cb.required = true;
+  cb.addEventListener("change", () => commitFormChange(ctx, "checked", cb.checked));
+  wrap.appendChild(cb);
+  if (el.label) {
+    const span = document.createElement("span");
+    span.className = "jdfjs-form-checkbox-label";
+    span.textContent = el.label;
+    wrap.appendChild(span);
+  }
+  return wrap;
+}
+
+function renderFormSelect(el: FormSelectElement, ctx: RenderContext): HTMLElement {
+  const wrap = document.createElement("div");
+  wrap.className = "jdfjs-form-field jdfjs-form-select";
+  applyStyle(wrap, resolveStyle(el.style, ctx.styles));
+  const lab = makeLabel(el.label);
+  if (lab) wrap.appendChild(lab);
+  const sel = document.createElement("select");
+  sel.className = "jdfjs-form-control";
+  sel.name = el.name;
+  if (el.multiple) sel.multiple = true;
+  if (el.readonly) sel.disabled = true;
+  if (el.required) sel.required = true;
+  const selectedSet = new Set<string>(
+    el.multiple ? (el.values || []) : (el.value != null ? [el.value] : []),
+  );
+  for (const opt of el.options) {
+    const o = document.createElement("option");
+    o.value = opt.value;
+    o.textContent = opt.label ?? opt.value;
+    if (selectedSet.has(opt.value)) o.selected = true;
+    sel.appendChild(o);
+  }
+  sel.addEventListener("change", () => {
+    if (el.multiple) {
+      const vals = Array.from(sel.selectedOptions).map((o) => o.value);
+      commitFormChange(ctx, "values", vals);
+    } else {
+      commitFormChange(ctx, "value", sel.value);
+    }
+  });
+  wrap.appendChild(sel);
+  return wrap;
+}
+
+function renderFormSignature(el: FormSignatureElement, ctx: RenderContext): HTMLElement {
+  const wrap = document.createElement("div");
+  wrap.className = "jdfjs-form-field jdfjs-form-signature";
+  applyStyle(wrap, resolveStyle(el.style, ctx.styles));
+  const lab = makeLabel(el.label);
+  if (lab) wrap.appendChild(lab);
+  const cw = unitToPx(el.width ?? 80);
+  const ch = unitToPx(el.height ?? 30);
+  const canvas = document.createElement("canvas");
+  canvas.className = "jdfjs-form-signature-canvas";
+  canvas.width = Math.max(50, cw);
+  canvas.height = Math.max(20, ch);
+  if (el.value) {
+    const img = new Image();
+    img.onload = () => {
+      const c = canvas.getContext("2d");
+      c?.drawImage(img, 0, 0, canvas.width, canvas.height);
+    };
+    img.src = el.value;
+  }
+  let drawing = false;
+  let last: { x: number; y: number } | null = null;
+  function pointerStart(e: PointerEvent) {
+    if (el.readonly) return;
+    drawing = true;
+    last = { x: e.offsetX, y: e.offsetY };
+  }
+  function pointerMove(e: PointerEvent) {
+    if (!drawing || !last) return;
+    const c = canvas.getContext("2d");
+    if (!c) return;
+    c.strokeStyle = "#0f172a";
+    c.lineWidth = 1.6;
+    c.lineCap = "round";
+    c.beginPath();
+    c.moveTo(last.x, last.y);
+    c.lineTo(e.offsetX, e.offsetY);
+    c.stroke();
+    last = { x: e.offsetX, y: e.offsetY };
+  }
+  function pointerEnd() {
+    if (!drawing) return;
+    drawing = false;
+    last = null;
+    try {
+      commitFormChange(ctx, "value", canvas.toDataURL("image/png"));
+    } catch { /* tainted canvas — shouldn't happen, no cross-origin sources */ }
+  }
+  canvas.addEventListener("pointerdown", pointerStart);
+  canvas.addEventListener("pointermove", pointerMove);
+  canvas.addEventListener("pointerup", pointerEnd);
+  canvas.addEventListener("pointerleave", pointerEnd);
+  wrap.appendChild(canvas);
+  if (!el.readonly) {
+    const clear = document.createElement("button");
+    clear.type = "button";
+    clear.className = "jdfjs-form-signature-clear";
+    clear.textContent = "Clear";
+    clear.addEventListener("click", (e) => {
+      e.preventDefault();
+      const c = canvas.getContext("2d");
+      c?.clearRect(0, 0, canvas.width, canvas.height);
+      commitFormChange(ctx, "value", "");
+    });
+    wrap.appendChild(clear);
+  }
+  return wrap;
+}

package/src/utils/link.ts

@@ -26,8 +26,11 @@ export function attachLinkBehaviour(
   el.href = resolved.href;
   if (resolved.internal) {
     el.addEventListener("click", (e) => {
+      // Always prevent default for internal anchors. If we have a real target
+      // page, navigate; otherwise just no-op so the host page's URL bar /
+      // history isn't polluted with hashes the embed couldn't resolve.
+      e.preventDefault();
       if (resolved.pageIndex != null && onNavigatePage) {
-        e.preventDefault();
         onNavigatePage(resolved.pageIndex);
       }
     });