@onodocs/canvas 0.2.1 → 0.4.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);
@@ -1578,8 +1587,9 @@ __name(fillExactSectionColumnSeparator, "fillExactSectionColumnSeparator");
 
 // packages/canvas/src/text-selection.ts
 var nextView = 0;
-function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, signal) {
+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) {
@@ -1607,7 +1618,7 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
     for (const caret of value.carets) {
       const offset = offsets[caret.scalarOffset - value.scalarStart];
       if (offset === void 0) continue;
-      const stop = { line, offset: length + offset, x: caret.x, index: stops.length };
+      const stop = { line, offset: length + offset, x: caret.x, index: stops.length, ...caret.paragraphOffset === void 0 ? {} : { position: { paragraphId: value.paragraphId, offset: caret.paragraphOffset } } };
       line.stops.push(stop);
       stops.push(stop);
     }
@@ -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,29 +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 || document2.activeElement !== viewport && !menu?.contains(document2.activeElement)) return;
-    const start = Math.min(anchor.offset, focus.offset), end = Math.max(anchor.offset, focus.offset);
+    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` });
+    }
+    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);
       };
@@ -1667,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++) {
@@ -1682,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 });
@@ -1703,11 +1793,19 @@ 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, best = Infinity;
+    let result, bestY = Infinity, bestX = Infinity;
     let first = 0, last = shells.length - 1;
     while (first < last) {
       const middle = first + last >>> 1;
@@ -1732,9 +1830,9 @@ function mountTextSelection(pageText, viewport, shells, pageBounds, nearby, sign
         const dy = Math.max(value.top - y, 0, y - value.top - value.height) * box.height / height;
         for (const stop of line.stops) {
           const dx = Math.abs(stop.x - x) * box.width / width;
-          const distance = dy * dy * 16 + dx * dx;
-          if (distance < best) {
-            best = distance;
+          if (dy < bestY || dy === bestY && dx < bestX) {
+            bestY = dy;
+            bestX = dx;
             result = stop;
           }
         }
@@ -1744,10 +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 && 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 });
@@ -1766,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();
@@ -1784,53 +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;
+    event.preventDefault();
+    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 || !logical.length) 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 {
-        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))];
+      else if (command) {
+        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 = 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 && !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 });
@@ -1892,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`;
@@ -1915,10 +2082,33 @@ 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 });
-  return { paint };
+  function currentSelection() {
+    if (!anchor?.position || !focus?.position) return;
+    return anchor.offset <= focus.offset ? { start: anchor.position, end: focus.position } : { start: focus.position, end: anchor.position };
+  }
+  __name(currentSelection, "currentSelection");
+  const byParagraph = /* @__PURE__ */ new Map();
+  for (const stop of logical) if (stop.position) {
+    let offsets = byParagraph.get(stop.position.paragraphId);
+    if (!offsets) byParagraph.set(stop.position.paragraphId, offsets = /* @__PURE__ */ new Map());
+    offsets.set(stop.position.offset, stop);
+  }
+  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);
+    if (!start || !end) return;
+    anchor = start;
+    select(end, true, true);
+  } };
 }
 __name(mountTextSelection, "mountTextSelection");
 
@@ -1965,10 +2155,10 @@ function mountDocument(document2, container, options = {}, onDispose) {
   let selection;
   let selectionLifetime;
   function prepareSelection(event) {
-    if (event.target.closest("[data-onodocs-attachment]")) return;
+    if (event?.target?.closest("[data-onodocs-attachment]")) return;
     if (selection) return;
     selectionLifetime = new AbortController();
-    selection = mountTextSelection(document2.pages.flatMap((page) => page.interaction.text), element, shells.map((entry) => entry.shell), document2.pages.map((page) => page.size), nearby, AbortSignal.any([lifetime.signal, selectionLifetime.signal]));
+    selection = mountTextSelection(document2.pages.flatMap((page) => page.interaction.text), element, shells.map((entry) => entry.shell), document2.pages.map((page) => page.size), nearby, AbortSignal.any([lifetime.signal, selectionLifetime.signal]), options.input, options.onSelectionChange);
   }
   __name(prepareSelection, "prepareSelection");
   for (const type of ["pointerdown", "keydown", "contextmenu", "focus"]) element.addEventListener(type, prepareSelection, { capture: true, signal: lifetime.signal });
@@ -1986,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;
       }
@@ -1993,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;
@@ -2041,6 +2250,20 @@ function mountDocument(document2, container, options = {}, onDispose) {
   }
   const view = {
     element,
+    get selection() {
+      return selection?.selection;
+    },
+    setSelection(value) {
+      checkOpen();
+      prepareSelection();
+      selection.setSelection(value);
+    },
+    setSelectionOverlays(values) {
+      checkOpen();
+      if (!values.length && !selection) return;
+      prepareSelection();
+      selection.setSelectionOverlays(values);
+    },
     get disposed() {
       return disposed;
     },
@@ -2366,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.2.1",
+  "version": "0.4.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-07",
+  "onodocsReleaseDate": "2026-10-09",
   "onodocsEnvironment": "live",
   "type": "module",
   "sideEffects": false,
@@ -33,6 +33,14 @@
     "types",
     "README.md",
     "SDK.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 +48,5 @@
     "type": "git",
     "url": "https://github.com/onodocs/onodocs.git"
   },
-  "gitHead": "69453bc7ca1f06f5ee022dd905765bf1d513e53a"
+  "gitHead": "3227556064a15863db186152f40ee94cff0a7d9b"
 }

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 SDK
+
+```powershell
+npm install @onodocs/sdk esbuild
+node node_modules/@onodocs/sdk/examples/proposal/serve.mjs
+```
+
+The SDK 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/`.