@onodocs/canvas 0.3.0 → 0.5.0

package/index.js

@@ -80,6 +80,15 @@ function geometryPoint(point, transform) {
 }
 __name(geometryPoint, "geometryPoint");
 function hitTestPage(interaction, point) {
+  for (let index = interaction.areas.length - 1; index >= 0; index--) {
+    const area = interaction.areas[index];
+    if (area.kind !== "image") continue;
+    const local = inversePoint(point, area.fragment.transform);
+    if (local && insideRectangle(local, area.fragment.rectangle) && area.fragment.clips.every((clip) => {
+      const p = inversePoint(point, clip.transform);
+      return p !== void 0 && insideRectangle(p, clip.rectangle);
+    })) return area;
+  }
   for (let index = interaction.lines.length - 1; index >= 0; index--) {
     const line = interaction.lines[index], fragment = line.fragment;
     const local = inversePoint(point, fragment.transform);
@@ -1580,6 +1589,7 @@ __name(fillExactSectionColumnSeparator, "fillExactSectionColumnSeparator");
 var nextView = 0;
 function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, signal, input, onSelectionChange) {
   const document2 = viewport.ownerDocument;
+  const activeElement = /* @__PURE__ */ __name(() => viewport.getRootNode().activeElement, "activeElement");
   const window = document2.defaultView;
   const svg = "http://www.w3.org/2000/svg";
   const viewId = nextView++;
@@ -1592,6 +1602,7 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
   const pages = shells.map(() => []);
   const stops = [];
   const chunks = [];
+  const paragraphRanges = /* @__PURE__ */ new Map();
   let length = 0;
   let previous;
   for (const item of lines) {
@@ -1615,11 +1626,32 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
     pages[item.pageIndex].push(line);
     chunks.push(value.scalars.join(""));
     length = line.end;
+    const range = paragraphRanges.get(value.paragraphId);
+    if (range) range.end = length;
+    else paragraphRanges.set(value.paragraphId, { start: line.start, end: length });
     previous = value;
   }
   const text = chunks.join("");
   const logical = [...stops].sort((a, b) => a.offset - b.offset || a.index - b.index);
   const logicalIndex = new Map(logical.map((stop, index) => [stop, index]));
+  const editableLogical = logical.filter((stop) => stop.position);
+  const editableStories = /* @__PURE__ */ new Map(), editableIndex = /* @__PURE__ */ new Map();
+  for (const stop of editableLogical) {
+    const id = stop.line.item.selection.storyId ?? "", story = editableStories.get(id) ?? [];
+    editableIndex.set(stop, story.length);
+    story.push(stop);
+    editableStories.set(id, story);
+  }
+  function atOffset(offset, ordered = logical) {
+    let first = 0, last = ordered.length;
+    while (first < last) {
+      const middle = first + last >>> 1;
+      if (ordered[middle].offset < offset) first = middle + 1;
+      else last = middle;
+    }
+    return ordered[first] ?? ordered.at(-1);
+  }
+  __name(atOffset, "atOffset");
   const layers = /* @__PURE__ */ new Map();
   function layerFor(index) {
     const existing = layers.get(index);
@@ -1633,39 +1665,80 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
     return layer;
   }
   __name(layerFor, "layerFor");
+  let overlays = [];
   let anchor, focus, pointer, preferredX;
   let frame = 0;
   let pointerPosition = { x: 0, y: 0 };
   let menu;
+  let touch, touchTimer = 0, touchSelection = false;
+  let draggedEndpoint;
+  const handles = [document2.createElement("span"), document2.createElement("span")];
+  for (const [index, handle] of handles.entries()) {
+    handle.setAttribute("aria-hidden", "true");
+    handle.dataset.selectionHandle = String(index);
+    Object.assign(handle.style, { position: "absolute", width: "36px", height: "36px", padding: "10px", boxSizing: "border-box", zIndex: "3", touchAction: "none", display: "none" });
+    const dot = document2.createElement("span");
+    Object.assign(dot.style, { display: "block", width: "16px", height: "16px", borderRadius: "50%", background: "#1769c2" });
+    handle.append(dot);
+    handle.addEventListener("pointerdown", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const first = anchor && focus && anchor.offset <= focus.offset ? "anchor" : "focus";
+      draggedEndpoint = index === 0 ? first : first === "anchor" ? "focus" : "anchor";
+      pointer = event.pointerId;
+      pointerPosition = { x: event.clientX, y: event.clientY - 18 };
+      viewport.setPointerCapture(pointer);
+      frame = window.requestAnimationFrame(drag);
+    }, { signal });
+    viewport.append(handle);
+  }
   viewport.tabIndex = 0;
   viewport.style.userSelect = "none";
+  viewport.style.touchAction = "pan-x pan-y pinch-zoom";
+  viewport.style.position = "relative";
   if (input) {
     viewport.style.position = "relative";
     viewport.append(input);
   }
   for (const shell of shells) shell.style.cursor = "text";
   function paint() {
+    for (const handle of handles) handle.style.display = "none";
     for (const [index, layer] of layers) {
       layer.remove();
       layer.replaceChildren();
       if (!nearby.has(index)) layers.delete(index);
     }
-    if (!anchor || !focus || !input && document2.activeElement !== viewport && !menu?.contains(document2.activeElement)) return;
+    const visible = anchor && focus && (input || activeElement() === viewport || menu?.contains(activeElement()));
+    const labels = /* @__PURE__ */ new Map();
+    for (let index = 0; index < overlays.length; index++) {
+      const overlay = overlays[index], start = byParagraph.get(overlay.selection.start.paragraphId)?.get(overlay.selection.start.offset), end = byParagraph.get(overlay.selection.end.paragraphId)?.get(overlay.selection.end.offset);
+      if (start && end) {
+        const key = `${end.line.item.pageIndex}:${end.line.index}`, row = labels.get(key) ?? 0;
+        labels.set(key, row + 1);
+        paintRange(start, end, overlay, index, row);
+      }
+    }
+    if (!visible) return;
     if (input) {
       const shell = shells[focus.line.item.pageIndex], bounds = shell.getBoundingClientRect(), origin = viewport.getBoundingClientRect();
       const point = focus.line.transform.transformPoint({ x: focus.x, y: focus.line.item.selection.top });
       const scale = bounds.width / pageBounds[focus.line.item.pageIndex].width;
       Object.assign(input.style, { position: "absolute", left: `${bounds.left - origin.left + point.x * scale}px`, top: `${bounds.top - origin.top + point.y * scale}px`, height: `${focus.line.item.selection.height * scale}px` });
     }
-    const start = Math.min(anchor.offset, focus.offset), end = Math.max(anchor.offset, focus.offset);
+    paintRange(anchor, focus);
+  }
+  __name(paint, "paint");
+  function paintRange(anchor2, focus2, overlay, overlayIndex = -1, labelRow = 0) {
+    const start = Math.min(anchor2.offset, focus2.offset), end = Math.max(anchor2.offset, focus2.offset);
     for (const index of nearby) for (const line of pages[index] ?? []) {
       let rectangle2 = function(x, width, caret = false) {
         const rect = document2.createElementNS(svg, "rect");
+        if (!overlay) rect.setAttribute("data-local-selection", "");
         rect.setAttribute("x", String(x));
         rect.setAttribute("y", String(value.top));
         rect.setAttribute("width", String(width));
         rect.setAttribute("height", String(value.height));
-        rect.setAttribute("fill", caret ? "#1769c2" : "#4285f4");
+        rect.setAttribute("fill", overlay?.color ?? (caret ? "#1769c2" : "#4285f4"));
         rect.setAttribute("fill-opacity", caret ? "1" : "0.28");
         group.append(rect);
       };
@@ -1677,7 +1750,7 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
       const group = document2.createElementNS(svg, "g");
       const transform = line.transform;
       if (transform) group.setAttribute("transform", `matrix(${transform.a} ${transform.b} ${transform.c} ${transform.d} ${transform.e} ${transform.f})`);
-      if (start === end && focus.line === line) rectangle2(focus.x, Number(pageBounds[line.item.pageIndex].width) / shells[line.item.pageIndex].getBoundingClientRect().width * 1.5, true);
+      if (start === end && focus2.line === line) rectangle2(focus2.x, Number(pageBounds[line.item.pageIndex].width) / shells[line.item.pageIndex].getBoundingClientRect().width * 1.5, true);
       else {
         let left, right = 0;
         for (let index2 = 1; index2 < line.stops.length; index2++) {
@@ -1692,12 +1765,19 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
         }
         if (left !== void 0) rectangle2(left, right - left);
       }
+      if (overlay && focus2.line === line) {
+        if (start !== end) rectangle2(focus2.x, Number(pageBounds[line.item.pageIndex].width) / shells[line.item.pageIndex].getBoundingClientRect().width * 1.5, true);
+        const label = document2.createElementNS(svg, "text"), unit = Number(pageBounds[line.item.pageIndex].width) / shells[line.item.pageIndex].getBoundingClientRect().width;
+        label.textContent = overlay.label;
+        for (const [key, value2] of Object.entries({ x: String((line.stops.at(-1)?.x ?? focus2.x) + 8 * unit), y: String(line.item.selection.top + line.item.selection.height * 0.8 + labelRow * 14 * unit), fill: overlay.color, stroke: "white", "stroke-width": String(3 * unit), "paint-order": "stroke", "font-family": "Arial,sans-serif", "font-size": String(11 * unit), "font-weight": "600" })) label.setAttribute(key, value2);
+        group.append(label);
+      }
       let clipped = group;
       const clips = [...line.item.clip ? [{ rectangle: line.item.clip, transform: line.item.transform }] : [], ...line.item.physicalClips ?? []];
       for (let index2 = 0; index2 < clips.length; index2++) {
         const clip = clips[index2], rectangle3 = clip.rectangle, transform2 = matrix(clip.transform);
         const path = document2.createElementNS(svg, "clipPath");
-        path.id = `selection-${viewId}-${line.item.pageIndex}-${line.index}-${index2}`;
+        path.id = `selection-${viewId}-${line.item.pageIndex}-${line.index}-${index2}-${overlayIndex}`;
         const polygon = document2.createElementNS(svg, "polygon");
         polygon.setAttribute("points", [[rectangle3.x, rectangle3.y], [rectangle3.x + rectangle3.width, rectangle3.y], [rectangle3.x + rectangle3.width, rectangle3.y + rectangle3.height], [rectangle3.x, rectangle3.y + rectangle3.height]].map(([x, y]) => {
           const point = transform2.transformPoint({ x, y });
@@ -1713,8 +1793,16 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
       layer.append(clipped);
       shells[line.item.pageIndex].append(layer);
     }
+    if (!overlay && touchSelection && anchor2.offset !== focus2.offset) {
+      const endpoints = anchor2.offset <= focus2.offset ? [anchor2, focus2] : [focus2, anchor2], origin = viewport.getBoundingClientRect();
+      for (const [index, stop] of endpoints.entries()) {
+        const bounds = shells[stop.line.item.pageIndex].getBoundingClientRect(), size = pageBounds[stop.line.item.pageIndex];
+        const point = stop.line.transform.transformPoint({ x: stop.x, y: stop.line.item.selection.top + stop.line.item.selection.height });
+        Object.assign(handles[index].style, { display: "block", left: `${bounds.left - origin.left + point.x * bounds.width / size.width - 18}px`, top: `${bounds.top - origin.top + point.y * bounds.height / size.height - 10}px` });
+      }
+    }
   }
-  __name(paint, "paint");
+  __name(paintRange, "paintRange");
   function nearest(clientX, clientY) {
     if (!logical.length) return;
     let result, bestY = Infinity, bestX = Infinity;
@@ -1754,12 +1842,12 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
   }
   __name(nearest, "nearest");
   function select(stop, extend, scroll = false) {
-    if (!stop) return;
+    if (!stop || input && !input.readOnly && !stop.position) return;
     focus = stop;
     if (!extend || !anchor) anchor = stop;
     paint();
     onSelectionChange?.(currentSelection());
-    if (input && document2.activeElement === viewport) input.focus({ preventScroll: true });
+    if (input && activeElement() === viewport) input.focus({ preventScroll: true });
     if (scroll) {
       const shell = shells[stop.line.item.pageIndex];
       const point = stop.line.transform.transformPoint({ x: stop.x, y: stop.line.item.selection.top });
@@ -1778,12 +1866,49 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
     if (pointer === void 0) return;
     const bounds = scroller?.getBoundingClientRect() ?? { top: 0, bottom: window.innerHeight };
     scrollElement.scrollTop += Math.min(30, Math.max(-30, pointerPosition.y < bounds.top + 20 ? pointerPosition.y - bounds.top - 20 : pointerPosition.y > bounds.bottom - 20 ? pointerPosition.y - bounds.bottom + 20 : 0));
-    select(nearest(pointerPosition.x, pointerPosition.y), true);
+    dragTo(pointerPosition.x, pointerPosition.y);
     frame = window.requestAnimationFrame(drag);
   }
   __name(drag, "drag");
+  function dragTo(x, y) {
+    const stop = nearest(x, y);
+    if (draggedEndpoint === "anchor" && stop) {
+      anchor = stop;
+      paint();
+      onSelectionChange?.(currentSelection());
+    } else select(stop, true);
+  }
+  __name(dragTo, "dragTo");
+  function selectWord(x, y) {
+    const stop = nearest(x, y);
+    if (!stop) return;
+    const range = paragraphRanges.get(stop.line.item.selection.paragraphId);
+    const segment = [...new Intl.Segmenter(void 0, { granularity: "word" }).segment(text.slice(range.start, range.end))].find((value) => stop.offset >= range.start + value.index && stop.offset < range.start + value.index + value.segment.length);
+    if (!segment) return;
+    anchor = atOffset(range.start + segment.index);
+    select(atOffset(range.start + segment.index + segment.segment.length), true);
+  }
+  __name(selectWord, "selectWord");
   viewport.addEventListener("pointerdown", (event) => {
-    if (event.button !== 0 || event.target.closest("button,input,textarea,select,a,[contenteditable], [data-onodocs-attachment]")) return;
+    if (event.button !== 0 || event.target.closest("button,input,textarea,select,a,[contenteditable],[data-selection-handle],[data-onodocs-attachment]")) return;
+    if (event.pointerType === "touch") {
+      window.clearTimeout(touchTimer);
+      if (!event.isPrimary) {
+        touch = void 0;
+        return;
+      }
+      touch = { id: event.pointerId, x: event.clientX, y: event.clientY, held: false };
+      touchTimer = window.setTimeout(() => {
+        if (touch) {
+          touch.held = true;
+          touchSelection = true;
+          viewport.focus({ preventScroll: true });
+          selectWord(touch.x, touch.y);
+        }
+      }, 500);
+      return;
+    }
+    touchSelection = false;
     const stop = nearest(event.clientX, event.clientY);
     if (!stop) return;
     event.preventDefault();
@@ -1796,67 +1921,83 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
     frame = window.requestAnimationFrame(drag);
   }, { signal });
   viewport.addEventListener("pointermove", (event) => {
+    if (touch?.id === event.pointerId && Math.hypot(event.clientX - touch.x, event.clientY - touch.y) > 8) {
+      window.clearTimeout(touchTimer);
+      touch = void 0;
+    }
     if (event.pointerId !== pointer) return;
-    pointerPosition = { x: event.clientX, y: event.clientY };
-    select(nearest(event.clientX, event.clientY), true);
+    pointerPosition = { x: event.clientX, y: event.clientY - (draggedEndpoint ? 18 : 0) };
+    dragTo(pointerPosition.x, pointerPosition.y);
   }, { signal });
   viewport.addEventListener("dblclick", (event) => {
     if (event.target.closest("button,input,textarea,select,a,[data-onodocs-attachment]")) return;
-    const stop = nearest(event.clientX, event.clientY);
-    if (!stop) return;
-    const segment = [...new Intl.Segmenter(void 0, { granularity: "word" }).segment(text)].find((value) => stop.offset >= value.index && stop.offset < value.index + value.segment.length);
-    if (!segment) return;
     event.preventDefault();
-    anchor = logical.find((value) => value.offset >= segment.index);
-    select(logical.find((value) => value.offset >= segment.index + segment.segment.length), true);
+    selectWord(event.clientX, event.clientY);
   }, { signal });
   for (const type of ["pointerup", "pointercancel", "lostpointercapture"]) viewport.addEventListener(type, (event) => {
+    if (event.pointerId === touch?.id) {
+      window.clearTimeout(touchTimer);
+      if (type === "pointerup" && !touch.held) {
+        event.preventDefault();
+        touchSelection = true;
+        viewport.focus({ preventScroll: true });
+        select(nearest(event.clientX, event.clientY), false);
+      }
+      touch = void 0;
+    }
     if (event.pointerId !== pointer) return;
     pointer = void 0;
+    draggedEndpoint = void 0;
     window.cancelAnimationFrame(frame);
   }, { signal });
   viewport.addEventListener("keydown", (event) => {
-    if (event.target !== viewport && event.target !== input || !logical.length || event.isComposing) return;
+    const ordered = input && !input.readOnly ? editableStories.get(focus?.line.item.selection.storyId ?? "") ?? editableLogical : logical, orderedIndex = input && !input.readOnly ? editableIndex : logicalIndex;
+    if (event.target !== viewport && event.target !== input || !ordered.length || event.isComposing) return;
     const command = event.ctrlKey || event.metaKey;
     if (command && event.key.toLowerCase() === "a") {
       event.preventDefault();
-      anchor = logical[0];
-      select(logical.at(-1), true);
+      anchor = ordered[0];
+      select(ordered.at(-1), true);
       return;
     }
-    if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key) || event.altKey) return;
+    if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "PageUp", "PageDown"].includes(event.key) || event.altKey) return;
     event.preventDefault();
     if (!focus) {
-      select(logical[0], false);
+      select(ordered[0], false);
       return;
     }
     let next;
-    if (event.key === "Home" || event.key === "End") next = command ? event.key === "Home" ? logical[0] : logical.at(-1) : event.key === "Home" ? focus.line.stops[0] : focus.line.stops.at(-1);
+    if (event.key === "PageUp" || event.key === "PageDown") {
+      const bounds = shells[focus.line.item.pageIndex].getBoundingClientRect(), size = pageBounds[focus.line.item.pageIndex];
+      const point = focus.line.transform.transformPoint({ x: focus.x, y: focus.line.item.selection.top });
+      next = nearest(bounds.left + point.x * bounds.width / size.width, bounds.top + point.y * bounds.height / size.height + (event.key === "PageUp" ? -1 : 1) * (scroller?.clientHeight ?? window.innerHeight) * 0.8);
+    } else if (event.key === "Home" || event.key === "End") next = command ? event.key === "Home" ? ordered[0] : ordered.at(-1) : event.key === "Home" ? focus.line.stops.find((stop) => !input || input.readOnly || stop.position) : focus.line.stops.filter((stop) => !input || input.readOnly || stop.position).at(-1);
     else if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
       const delta = event.key === "ArrowLeft" ? -1 : 1;
       if (!event.shiftKey && anchor.offset !== focus.offset) next = delta < 0 ? anchor.offset < focus.offset ? anchor : focus : anchor.offset > focus.offset ? anchor : focus;
       else if (command) {
-        const words = [...new Intl.Segmenter(void 0, { granularity: "word" }).segment(text)].filter((value) => value.isWordLike);
-        const offset = delta < 0 ? words.filter((value) => value.index < focus.offset).at(-1)?.index ?? 0 : words.find((value) => value.index > focus.offset)?.index ?? text.length;
-        next = logical.find((value) => value.offset >= offset) ?? logical.at(-1);
+        const range = paragraphRanges.get(focus.line.item.selection.paragraphId);
+        const words = [...new Intl.Segmenter(void 0, { granularity: "word" }).segment(text.slice(range.start, range.end))].filter((value) => value.isWordLike).map((value) => range.start + value.index);
+        const offset = delta < 0 ? words.filter((value) => value < focus.offset).at(-1) ?? Math.max(0, range.start - 1) : words.find((value) => value > focus.offset) ?? Math.min(text.length, range.end + 1);
+        next = atOffset(offset, ordered);
       } else {
-        let index = logicalIndex.get(focus) + delta;
-        while (logical[index]?.offset === focus.offset) index += delta;
-        next = logical[Math.max(0, Math.min(logical.length - 1, index))];
+        let index = orderedIndex.get(focus) + delta;
+        while (ordered[index]?.offset === focus.offset) index += delta;
+        next = ordered[Math.max(0, Math.min(ordered.length - 1, index))];
       }
     } else {
       preferredX ??= focus.x;
       const delta = event.key === "ArrowUp" ? -1 : 1;
-      let index = logicalIndex.get(focus) + delta;
-      while (logical[index]?.line === focus.line) index += delta;
-      const line = logical[index]?.line;
+      let index = orderedIndex.get(focus) + delta;
+      while (ordered[index]?.line === focus.line) index += delta;
+      const line = ordered[index]?.line;
       next = line?.stops.reduce((best, stop) => Math.abs(stop.x - preferredX) < Math.abs(best.x - preferredX) ? stop : best);
     }
     if (event.key !== "ArrowUp" && event.key !== "ArrowDown") preferredX = void 0;
     select(next, event.shiftKey, true);
   }, { signal });
   document2.addEventListener("copy", (event) => {
-    if (document2.activeElement !== viewport && document2.activeElement !== input && !menu?.contains(document2.activeElement) || !focus || anchor.offset === focus.offset) return;
+    if (activeElement() !== viewport && activeElement() !== input && !menu?.contains(activeElement()) || !focus || anchor.offset === focus.offset) return;
     event.clipboardData?.setData("text/plain", selectedText());
     event.preventDefault();
   }, { signal });
@@ -1918,7 +2059,7 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
     menu.append(copy);
     document2.body.append(menu);
     menu.showPopover();
-    const caret = (focus ? layers.get(focus.line.item.pageIndex) : void 0)?.querySelector("rect")?.getBoundingClientRect() ?? viewport.getBoundingClientRect();
+    const caret = (focus ? layers.get(focus.line.item.pageIndex) : void 0)?.querySelector("[data-local-selection]")?.getBoundingClientRect() ?? viewport.getBoundingClientRect();
     const x = event.clientX || caret.left, y = event.clientY || caret.bottom;
     const bounds = menu.getBoundingClientRect();
     menu.style.left = `${Math.max(0, Math.min(x, window.innerWidth - bounds.width))}px`;
@@ -1941,7 +2082,9 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
   viewport.addEventListener("blur", paint, { signal });
   signal.addEventListener("abort", () => {
     menu?.remove();
+    window.clearTimeout(touchTimer);
     window.cancelAnimationFrame(frame);
+    for (const handle of handles) handle.remove();
     for (const layer of layers.values()) layer.remove();
   }, { once: true });
   function currentSelection() {
@@ -1955,7 +2098,10 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
     if (!offsets) byParagraph.set(stop.position.paragraphId, offsets = /* @__PURE__ */ new Map());
     offsets.set(stop.position.offset, stop);
   }
-  return { paint, get selection() {
+  return { paint, setSelectionOverlays(values) {
+    overlays = values;
+    paint();
+  }, get selection() {
     return currentSelection();
   }, setSelection(value) {
     const start = byParagraph.get(value.start.paragraphId)?.get(value.start.offset), end = byParagraph.get(value.end.paragraphId)?.get(value.end.offset);
@@ -2030,6 +2176,7 @@ function mountDocument(document2, container, options = {}, onDispose) {
           Object.assign(prior.layer.style, { width: `${page.size.width * cssScale}px`, height: `${page.size.height * cssScale}px` });
         }
         prior.page = page;
+        updateReading(prior.reading, page);
         prior.paintedWidth = 0;
         return prior;
       }
@@ -2037,17 +2184,35 @@ function mountDocument(document2, container, options = {}, onDispose) {
       shell.setAttribute("aria-label", `Page ${page.index + 1}`);
       Object.assign(shell.style, { position: "relative", flex: "none", background: "white" });
       const canvas = dom.createElement("canvas");
+      canvas.setAttribute("aria-hidden", "true");
       canvas.width = 0;
       canvas.height = 0;
       Object.assign(canvas.style, { width: "100%", height: "100%", display: "block" });
       const layer = dom.createElement("div");
       Object.assign(layer.style, { position: "absolute", left: "0", top: "0", transformOrigin: "0 0", width: `${page.size.width * cssScale}px`, height: `${page.size.height * cssScale}px`, pointerEvents: "none" });
-      shell.append(canvas, layer);
+      const reading = dom.createElement("div");
+      Object.assign(reading.style, { position: "absolute", width: "1px", height: "1px", overflow: "hidden", clipPath: "inset(50%)", whiteSpace: "pre-wrap" });
+      updateReading(reading, page);
+      shell.append(canvas, layer, reading);
       element.append(shell);
-      return { shell, canvas, layer, page, width: 0, paintedWidth: 0, pixelRatio: 0 };
+      return { shell, canvas, layer, reading, page, width: 0, paintedWidth: 0, pixelRatio: 0 };
     });
   }
   __name(createShells, "createShells");
+  function updateReading(element2, page) {
+    const content = page.interaction.readingOrder;
+    if (element2.childNodes.length === content.length && content.every((value, index) => element2.children[index].textContent === value.text && element2.children[index].getAttribute("aria-level") === (value.headingLevel ? String(value.headingLevel) : null))) return;
+    element2.replaceChildren(...content.map((value) => {
+      const paragraph = dom.createElement("p");
+      paragraph.textContent = value.text;
+      if (value.headingLevel) {
+        paragraph.setAttribute("role", "heading");
+        paragraph.setAttribute("aria-level", String(value.headingLevel));
+      }
+      return paragraph;
+    }));
+  }
+  __name(updateReading, "updateReading");
   const observer = new window.ResizeObserver(resize);
   const visibility = new window.IntersectionObserver((entries) => {
     visibilityReady = true;
@@ -2093,6 +2258,12 @@ function mountDocument(document2, container, options = {}, onDispose) {
       prepareSelection();
       selection.setSelection(value);
     },
+    setSelectionOverlays(values) {
+      checkOpen();
+      if (!values.length && !selection) return;
+      prepareSelection();
+      selection.setSelectionOverlays(values);
+    },
     get disposed() {
       return disposed;
     },
@@ -2194,7 +2365,7 @@ function mountDocument(document2, container, options = {}, onDispose) {
       const [anchorX, anchorY, elementX, elementY] = placementPoints[options2.placement ?? "overlay"];
       const x = r.x + anchorX * r.width - elementX * size.width + (1 - 2 * anchorX) * inset + (anchorX - elementX) * gap2 + (options2.offset?.x ?? 0);
       const y = r.y + anchorY * r.height - elementY * size.height + (1 - 2 * anchorY) * inset + (anchorY - elementY) * gap2 + (options2.offset?.y ?? 0);
-      Object.assign(box.style, { position: "absolute", left: "0", top: "0", width: `${size.width * cssScale}px`, height: `${size.height * cssScale}px`, transformOrigin: "0 0", transform: `matrix(${t.a},${t.b},${t.c},${t.d},${(t.a * x + t.c * y + t.e) * cssScale},${(t.b * x + t.d * y + t.f) * cssScale})`, pointerEvents: "auto" });
+      Object.assign(box.style, { position: "absolute", left: "0", top: "0", width: `${size.width * cssScale}px`, height: `${size.height * cssScale}px`, transformOrigin: "0 0", transform: `matrix(${t.a},${t.b},${t.c},${t.d},${(t.a * x + t.c * y + t.e) * cssScale},${(t.b * x + t.d * y + t.f) * cssScale})`, pointerEvents: options2.interactive === false ? "none" : "auto" });
       attachedElements.get(node)?.dispose();
       const oldStyle = node.getAttribute("style");
       Object.assign(node.style, { width: "100%", height: "100%", boxSizing: "border-box", margin: "0" });
@@ -2418,8 +2589,10 @@ function createDocument(source, options = {}) {
           canvas.height = Math.ceil(page.size.height * ratio);
           const context = canvas.getContext("2d");
           if (!context) throw new Error("Canvas 2D context is unavailable.");
-          context.fillStyle = "white";
-          context.fillRect(0, 0, canvas.width, canvas.height);
+          if (options2.background !== "transparent") {
+            context.fillStyle = "white";
+            context.fillRect(0, 0, canvas.width, canvas.height);
+          }
           context.scale(ratio, ratio);
           materializePageDisplayListToCanvas(data, context, images);
           if (data.evaluation) paintEvaluationWatermark(context, canvas.width, canvas.height);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onodocs/canvas",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "private": false,
   "description": "OnoDocs canvas viewer, selection and HTML attachments for prepared Word document pages.",
   "homepage": "https://onodocs.com/developers/",
@@ -15,7 +15,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "onodocsReleaseDate": "2026-10-08",
+  "onodocsReleaseDate": "2026-10-09",
   "onodocsEnvironment": "live",
   "type": "module",
   "sideEffects": false,
@@ -33,6 +33,15 @@
     "types",
     "README.md",
     "SDK.md",
+    "editor.md",
+    "templates.md",
+    "proposal.md",
+    "agreement-review.md",
+    "ai-report-demo.md",
+    "application-integration.md",
+    "document-forms.md",
+    "document-modes.md",
+    "document-collaboration.md",
     "LICENSING.md",
     "LICENSE"
   ],
@@ -40,5 +49,5 @@
     "type": "git",
     "url": "https://github.com/onodocs/onodocs.git"
   },
-  "gitHead": "cf082bcfda5fc7581332b4251fa27c39a9a66ec7"
+  "gitHead": "9eab22dd958dbf90e88fe039a087684760034356"
 }

package/proposal.md

@@ -0,0 +1,36 @@
+# Proposal studio
+
+Run a complete proposal workflow with a fictional design studio and client. Change the business details, add or remove priced services, generate the Word document, refine its wording and download DOCX or searchable PDF. Everything runs in the browser; the local server serves the example assets.
+
+## Run from the repository
+
+```powershell
+npm run build
+npm run example:proposal
+```
+
+Open `http://127.0.0.1:5196`. Use `PORT` to choose another local port.
+
+## Run from an installed Editor
+
+```powershell
+npm install @onodocs/editor esbuild
+node node_modules/@onodocs/editor/examples/proposal/serve.mjs
+```
+
+The Editor package includes the HTML, CSS, JavaScript and reusable `sample.docx`. Evaluation mode adds a watermark. For licensed use, pass your license key in the browser options supplied to both `openTemplate` and `createEditor` in `main.js`, following the SDK licensing guide.
+
+## Try the workflow
+
+1. Change the client and project overview. Adjust service days or rates, or add another service. The application calculates line amounts and the total in USD.
+2. Choose **Generate proposal**. The public browser template API repeats the table rows and updates supported fields, including footer page numbers.
+3. Choose **Edit wording**, click a passage and type. Formatting and undo use the standard editor. Return to **Preview** to review the document.
+4. Download Word or PDF. Both exports contain the current wording. Changing business inputs does not silently overwrite the document. Regeneration requires confirmation after wording edits.
+
+The developer panel downloads the Word template and current business data. Open the template in the existing template designer to change its bindings. It contains scalar values and a repeating `items` table row. `tests/sdk/proposal-template.mjs` reproduces the sample template in the repository.
+
+`examples/proposal/data.js` supplies fictional starting data and calculates amounts. `main.js` calls `openTemplate(...).generate(data)`, opens the returned bytes with `createEditor`, and delegates downloads to `editor.save()` and `editor.pdf()`. The sample keeps no drafts after a page refresh. Add application-owned persistence if your workflow needs saved proposals.
+
+## Validation
+
+Run `npm run validate:proposal` for the complete browser journey. It changes business data, repeats and removes services, edits wording with the keyboard, checks regeneration confirmation, reopens the Word download and checks searchable PDF content. Desktop and mobile screenshots use manually reviewed references under `tests/sdk/proposal/out/`. The proposal DOCX also has a LibreOffice comparison under `tests/parity/layout/proposal-demo/`.

package/templates.md

@@ -0,0 +1,71 @@
+# Word templates and document generation
+
+Use `createTemplateEditor` from `@onodocs/editor` to design reusable DOCX templates. Run `npm run example:templates` in the source workspace for the invoice example at localhost port 5193. The designer uses the ordinary Word editor for layout, formatting and generated-document adjustments.
+
+For a complete business-data-to-export journey, run `npm run example:proposal`. The [proposal studio guide](proposal.md) covers setup, repeating fee rows, wording edits and Word/PDF downloads.
+
+```ts
+import { createTemplateEditor } from "@onodocs/editor";
+
+const designer = createTemplateEditor({
+  container: document.querySelector("#templates"),
+  sampleData: { customer: "Willow Design", items: [{ name: "Review", price: 125 }] },
+});
+await designer.open(templateBytes);
+```
+
+Select a placeholder and choose Text field, a data field and Apply binding. Selected text keeps the rest of the sentence intact. Use Selected paragraphs for whole paragraphs, Table row for repeating line items, or Whole table for a conditional table. Define an outer repeat or condition before adding fields inside it. Array-item choices in the data selector resolve against the current repeated item. Number, currency and date fields have format controls; image fields use point dimensions and supplied PNG/JPEG data. Existing bindings can be selected, updated or removed. Removing a binding preserves its placeholder content.
+
+Reusable sections have a name and content. Define a section once, then choose Insert reusable section at each insertion point. Each insertion can select a different subrecord. Definitions do not appear in generated output. Sections are reused within their defining Word story part; cross-part insertion is not supported because package relationships belong to their source part. Section content can contain its own fields, repeats and conditions.
+
+Preview document opens generated content in the editor. Adjust it with the ordinary editing controls and download Word or PDF. Back to template restores the design without incorporating those preview adjustments. Download template always saves the design. A JSON array in Sample data enables Generate batch, which downloads one DOCX for each record; browsers may ask to allow multiple downloads. The SDK batch iterator gives applications control over filenames and storage.
+
+For generation in Node or a browser, use the default SDK entry. The browser entry exports the same template API.
+
+```ts
+import { openTemplate } from "@onodocs/sdk";
+
+const template = await openTemplate(templateBytes, { licenseKey });
+try {
+  const documentBytes = await template.generate(data, { locale: "en-US", signal });
+  for await (const bytes of template.batch(records, { locale: "en-US", signal })) {
+    await storeDocument(bytes);
+  }
+} finally {
+  template.dispose();
+}
+```
+
+Generation starts from the original source each time. It neither edits the source template nor calls external services. Open the result through the existing Node/browser SDK or server renderer to query, render, edit or export it. Failed and cancelled generations leave the template available for another attempt. Consume batch results incrementally to avoid retaining a whole batch in memory.
+
+Bindings are stored in ordinary Word content-control tags. Use `templateTag(binding)` with the editor's `template` command for programmatic authoring:
+
+```ts
+import { templateTag } from "@onodocs/sdk";
+
+await doc.edit({
+  kind: "template",
+  scope: "selection",
+  selection,
+  title: "Customer name",
+  tag: templateTag({ kind: "value", path: ["customer", "name"] }),
+});
+```
+
+The command supports `selection`, `paragraph`, `row` and `table` scopes. Inline selection stays within one paragraph and uses ordinary adjacent text runs; it cannot cross existing controls or marks. A collapsed selection inserts a placeholder using the title. `action: "update"` changes the selected control's tag and title; `action: "remove"` unwraps it. Supply `controlId` when choosing a specific control from `doc.query.contentControls()`. Use `editor.execute` for changes that must participate in the component's undo history.
+
+| Binding | Required values | Result |
+| --- | --- | --- |
+| `value` | `path` | String, finite number, boolean or null; null becomes empty text |
+| `value` with `format` | `path`, `{ kind: "number", options }` or `{ kind: "date", options }` | `Intl.NumberFormat` or `Intl.DateTimeFormat` output |
+| `image` | `path`, `width`, `height` | PNG/JPEG from `{ bytes: Uint8Array, mediaType }`; optional `description` |
+| `repeat` | `path` | One copy for each array item; descendants use that item as their context |
+| `if` | `path` | Included for truthy values or nonempty arrays |
+| `section` | `name` | Reusable content definition, omitted from output |
+| `include` | `name`, optional `path` | Section inserted with the current context or selected subrecord |
+
+Paths are arrays of own-property names, not executable expressions. An empty path selects the current record. Missing data, wrong value types and recursive sections report an error. Currency options are ordinary `Intl.NumberFormatOptions`, for example `{ style: "currency", currency: "USD" }`. Date values can be a `Date`, timestamp or ISO date string; use an explicit offset for timestamps. Formatting uses JavaScript `Date` conversion and rejects invalid timestamps. It does not strictly validate calendar strings: for example, `2026-02-30` converts to 2 March 2026. Validate calendar dates in the host application if strict rejection is required. The default locale is `en-US` and the default date time zone is UTC.
+
+Formatting comes from the first run of a text placeholder. Unrelated Word content and package resources are preserved. Generation refreshes supported sequence and bookmark-reference fields. The browser template API also lays out the generated document to refresh page numbers, page references and supported tables of contents. Node callers can supply a `finalize` callback that opens the generated bytes with the server renderer and returns `document.save(options)`.
+
+Unsupported fields retain their cached content. Use `onFieldStatus` to receive diagnostics, or `fields: "require-current"` to reject output containing unresolved fields. The default reports retained caches and completes generation. Locked fields retain their authored values. `fields: "preserve"` explicitly keeps all cached results. Existing signed-package, document-protection and editing restrictions still apply. Native DOTX/DOTM generation is not supported; save the template as DOCX. The reusable source is still a Word document and can be saved and opened by Word.