@openpresentation/opf-editor 0.10.0 → 0.10.2

package/README.md

@@ -2,7 +2,7 @@
 
 Unfinished prepared shaping work is preserved in the [September 15 roadmap](docs/roadmap-shaping-20260915.md); it is not part of the published runtime.
 
-Version 0.10.0 requires `@openpresentation/opf` ^0.11.2, renderer ^0.11.0, and PPTX ^0.11.0 (install them together so cover centering resolves the same core everywhere; renderer 0.11.0 also activates the playground's automatic script fonts and lazy Intos fonts). Version 0.9.0 required `@openpresentation/opf` ^0.11.1, renderer ^0.10.0, and PPTX ^0.10.0. Composition and slide transfer fall back to the shared `aptos` font scheme and report unknown scheme ids through `onDiagnostic`; gallery apply keeps every font-scheme role.
+Version 0.10.2 adds pointer caret entry on the canvas (one click puts the caret where you click; new `textEntry` option; keyboard entry still selects all) and keeps the 0.10.1 and 0.10.0 requirements. Version 0.10.1 adds the opt-in font gate (`createFontGate`, FF-41) and keeps the 0.10.0 requirements; develop and test it against renderer 0.11.2 and PPTX 0.11.1. Version 0.10.0 requires `@openpresentation/opf` ^0.11.2, renderer ^0.11.0, and PPTX ^0.11.0 (install them together so cover centering resolves the same core everywhere; renderer 0.11.0 also activates the playground's automatic script fonts and lazy Intos fonts). Version 0.9.0 required `@openpresentation/opf` ^0.11.1, renderer ^0.10.0, and PPTX ^0.10.0. Composition and slide transfer fall back to the shared `aptos` font scheme and report unknown scheme ids through `onDiagnostic`; gallery apply keeps every font-scheme role.
 
 Version 0.8.0 required `@openpresentation/opf` ^0.11.0, renderer ^0.9.0, and PPTX ^0.9.0. Named ColorRefs (scheme slots, roles, and `var:<id>`) paint through the published renderer and hex-resolve on export. Payload ids share the slide id namespace for pagination and transfer. Native `schemeClr`, theme write, and `p:hf` remain out of scope.
 
@@ -74,8 +74,35 @@ await canvas.ready;
 
 Load the same font bytes into the browser using `loadBrowserFontRegistry` from `@openpresentation/opf-render/fonts-browser` before mounting. The host owns font URLs, storage and collaboration. For non-Latin documents, pass the pinned script pack's location as `scriptBaseUrl` and call `fonts.ensureScripts(document)` after edits (renderer with `scripts: 'auto'`, FF-19): only the faces for the scripts a document draws are fetched, once, hash-verified, for example Noto Sans JP for Japanese; a Latin-only document fetches none. The playground does this from `./script-fonts/`, which `npm run build:playground` fills with the pinned faces. `onDraft` provides live document drafts; the session only changes on commit. Escape cancels. Concurrent edits to the selected payload cancel a stale draft.
 
+Fonts load before pixels (FF-41). A document can need faces the browser registry has not loaded yet: script faces for the languages it draws and vendored preview faces for the font families it resolves (Intos for Aptos, Open Sans, Barlow). Pass a font gate as `fonts` and the canvas never renders such a document early: on every path (editor changes, undo and redo, imports, dimension switches, slide changes, in-progress edits) it shows "Loading fonts…", loads the faces and then renders. A load that fails is reported through `onFonts`/`onError` and offers a retry button; nothing retries by itself, and the failed document is not drawn.
+
+```js
+import { createCanvasEditor, createFontGate } from '@openpresentation/opf-editor/canvas';
+
+const fonts = createFontGate(fontRegistry); // a registry without the lazy loaders gates nothing
+const canvas = createCanvasEditor(container, { document, fonts, renderOptions: { textMeasurement: fontRegistry.textMeasurement } });
+// Other renders of your own: fonts.run(document, { ready: draw, failed: showError, loading: showSpinner })
+```
+
+Note that `session.composeSlide()` and `session.paginateSlide()` measure with the plain `textMeasurement` you pass, which is strict: for a document with a script the design font lacks (Japanese under Aptos) pass `createScriptTextMeasurement(fontRegistry.textMeasurement, resolveScriptFonts(document, { slideIndex }))` from `@openpresentation/opf-render/fonts`, as `renderSvg` does internally.
+
 These APIs were introduced in 0.1.0. Version 0.7.0 requires core 0.10.0 and renderer 0.8.0 for the canvas, including shared accepted geometry, styled/merged cells, rich table values, headers and content-aware row heights. See the OPF repository’s `docs/live-editor.md` for setup, the support matrix and roadmap. `pnpm pack:ecosystem` in that repository also prepares local preview tarballs for coordinated development.
 
+### Entering text editing
+
+One click puts the caret where you click, the way PowerPoint and Google Slides do. Hover outlines a text target; a single press (mouse, pen, or a touch tap) on editable text selects the box, starts inline editing and places the caret at the nearest character boundary to the pointer (correct for wrapped, multi-line, centered and right-aligned text). Press and drag selects the range from the press point to the release point. While editing, a native double-click selects a word, a triple-click a line or paragraph, and a click elsewhere in the text moves the caret; clicking a different text target commits the current edit (an invalid edit still refuses) and enters the new one in the same click. Enter, Space or F2 on a focused target enters with **all** text selected (the keyboard replace convention); `canvas.beginEdit(path)` does the same. Escape leaves editing and keeps the box selected. Images, charts and other non-text targets are unchanged: a click selects, a double-click opens their properties. Layout handles and block controls keep their own pointer handling, and a text press never moves the box.
+
+The gesture is configurable:
+
+```js
+createCanvasEditor(container, { document, textEntry: 'click' }); // default: one click enters
+createCanvasEditor(container, { document, textEntry: 'dblclick' }); // one click selects, a double-click enters
+```
+
+`textEntry: 'dblclick'` keeps the older two-step gesture (select, then double-click) but a double-click now also places the caret at the pointer instead of selecting all text. Hosts and tests that used `dblclick()` and then relied on all text being selected should switch to keyboard entry (focus the target and press Enter) or select explicitly; `locator.dblclick()` on the default canvas now places the caret and then selects the word under it.
+
+Plain-text carets are resolved from the rendered SVG glyphs: each line carries its exact source range (`data-opf-source-start`/`-end` or `data-opf-text-start`/`-end`), so collapsed spaces at wraps, tabs, CRLF sources and bidi isolate marks map to offsets of the input value rather than to glyph indexes. A line whose text does not match its traced source range falls back to a hidden copy of the positioned textarea. Rich text uses its own pointer-to-offset mapping. Mouse and pen enter on press; a touch tap enters on the tap, so scrolling with a finger never starts editing. Right-to-left and CJK use the same per-glyph mapping; real operating-system IME and bidi caret behaviour are not verified here.
+
 The canvas retains canonical SVG glyphs while a transparent native input supplies the caret. Advanced shaping, freeform object positioning, all chart/media treatments, and cross-engine pixel identity remain work in progress. The Source dialog in the playground now provides a live JSON preview; changes are validated before committing.
 
 ## Runtime Policy
@@ -247,7 +274,7 @@ Public npm package publication is handled by `.github/workflows/release.yml` thr
 
 The current checkout uses `@openpresentation/opf/composition` for portable geometry. Slides can select `auto`, `row`, `column`, or `grid`, set weighted tracks, and request path-specific overflow diagnostics. See the sibling OPF repo's `docs/dynamic-composition.md` for the complete contract.
 
-Version 0.10.0 requires `@openpresentation/opf@^0.11.2`. The optional renderer peer requires `@openpresentation/opf-render@^0.11.0`. Coordinated playground export uses `@openpresentation/opf-pptx@^0.11.0`. Clean registry installs support the composition APIs without sibling checkouts. For coordinated source development, build OPF and run `node scripts/link-ecosystem.mjs` there; `pnpm test:ecosystem` verifies shared geometry and import/export behavior.
+Version 0.10.2 requires `@openpresentation/opf@^0.11.2` (unchanged since 0.10.0). The optional renderer peer requires `@openpresentation/opf-render@^0.11.0` (the font gate gates nothing on a registry without the lazy loaders). Development and coordinated playground export use renderer 0.11.2 and `@openpresentation/opf-pptx@^0.11.1`. Clean registry installs support the composition APIs without sibling checkouts. For coordinated source development, build OPF and run `node scripts/link-ecosystem.mjs` there; `pnpm test:ecosystem` verifies shared geometry and import/export behavior.
 
 ## Local interactive demo
 
@@ -286,7 +313,7 @@ Slide insertion does not merge root speakers, organizations, or narrative metada
 
 ### Rich text on the canvas
 
-Select rendered rich text to format it, or double-click a rich text block to type. The toolbar supports character styles, point size, font family, hex color, scheme slots/roles, `var:<id>` references, links, scripts, and selected-text replacement. Plain text payloads offer **Format text** during inline editing. **Edit runs** opens the structured fields; `canvas.editProperties(path)` does the same programmatically. Each action is validated and undoable. Version 0.1.1 supports direct mixed-style typing: double-click to type, drag to select, use Format selection for styles, and commit with Done or Ctrl/Cmd+Enter. Escape cancels. Native input and composition events preserve run metadata; the canonical SVG supplies glyph/caret geometry. The whole session commits as one undo step, with draft undo/redo available while typing. Empty-line caret geometry requires renderer 0.1.1 or later; cross-engine and real operating-system IME verification remain open.
+Select rendered rich text to format it, or click a rich text block to type (see *Entering text editing*). The toolbar supports character styles, point size, font family, hex color, scheme slots/roles, `var:<id>` references, links, scripts, and selected-text replacement. Plain text payloads offer **Format text** during inline editing. **Edit runs** opens the structured fields; `canvas.editProperties(path)` does the same programmatically. Each action is validated and undoable. Version 0.1.1 supports direct mixed-style typing: click to type, drag to select, double-click for a word, triple-click for a paragraph, use Format selection for styles, and commit with Done or Ctrl/Cmd+Enter. Escape cancels. Native input and composition events preserve run metadata; the canonical SVG supplies glyph/caret geometry. The whole session commits as one undo step, with draft undo/redo available while typing. Empty-line caret geometry requires renderer 0.1.1 or later; cross-engine and real operating-system IME verification remain open.
 
 Version 0.7.0: rich input maps the textarea's LF-normalized offsets back to the original source. Typing preserves untouched CRLF/CR endings and surrounding run metadata; newly inserted newlines use the first source line-ending style. The `updateRichTextInput` change offsets are native textarea offsets, while formatting and replacement helpers continue to use original source offsets.
 
@@ -310,7 +337,7 @@ Agents can import `prepareBlockMove` and `listBlockContainers` from `@openpresen
 
 ## Styled and merged table cells
 
-Define cells with `{value, style, rowSpan, colSpan}` and place explicit `null` at covered positions. Inline editing follows the anchor's `.value` path, preserving its style and merge geometry. Double-click a value or focus it and press Enter to edit; the existing text-formatting controls support scalar promotion, rich runs and partial selection. Covered positions are not separate editable targets.
+Define cells with `{value, style, rowSpan, colSpan}` and place explicit `null` at covered positions. Inline editing follows the anchor's `.value` path, preserving its style and merge geometry. Click a value, or focus it and press Enter, to edit; the existing text-formatting controls support scalar promotion, rich runs and partial selection. Covered positions are not separate editable targets.
 
 The core schema rejects overlapping/out-of-bounds spans and hidden content. Model patches can change a span and remove a row atomically; undo restores the complete operation. Styling or restructuring a table remains available through JSON/model edits and the existing structured property forms.
 

package/dist/canvas.d.ts

@@ -1,6 +1,35 @@
 import type { EditorSession } from "./index.js";
 import type { RenderSvgOptions } from "@openpresentation/opf-render";
 import type { SlideComposition } from "@openpresentation/opf/composition";
+/** Faces a document needs (script packages and vendored files) that are not loaded yet, and the way to load them. */
+export interface FontGate {
+  /** Synchronous. Empty means the document can render now. Never throws. */
+  pending(document: unknown): string[];
+  /** Load every pending face (vendored faces first, then script faces). Rejects with a `fonts-unavailable` error; never retries by itself. */
+  ensure(document: unknown, options?: { signal?: AbortSignal }): Promise<void>;
+  /** `whenFontsReady` on this gate. */
+  run(document: unknown, handlers?: FontGateHandlers): Promise<void>;
+}
+export interface FontGateHandlers {
+  /** Return false once the document was superseded; the late result is then dropped. */
+  isCurrent?: () => boolean;
+  loading?: (pending: string[]) => void;
+  ready?: () => void;
+  failed?: (error: Error) => void;
+}
+export declare const FONTS_PENDING: "fonts-pending";
+export declare const FONTS_UNAVAILABLE: "fonts-unavailable";
+/** Wrap a browser font registry (`loadBrowserFontRegistry`). Registries without the lazy loaders gate nothing. */
+export declare function createFontGate(registry: object): FontGate;
+/**
+ * Ensure fonts for a document, then run `ready` (synchronously when nothing is pending). The one
+ * "ensure fonts, then render" helper: load failures and exceptions from `ready` go to `failed`.
+ */
+export declare function whenFontsReady(
+  gate: Pick<FontGate, "pending" | "ensure"> | undefined,
+  document: unknown,
+  handlers?: FontGateHandlers,
+): Promise<void>;
 export interface CanvasEditorOptions {
   editor?: EditorSession;
   document?: unknown;
@@ -8,6 +37,19 @@ export interface CanvasEditorOptions {
   /** Show keyboard-accessible dividers for resizing composition tracks. */
   layoutEditing?: boolean;
   renderOptions?: RenderSvgOptions;
+  /**
+   * A font gate (`createFontGate(registry)`). With one, the canvas never renders a document whose faces are still
+   * loading: it shows "Loading fonts…", loads them and then renders, on every path (editor changes, undo/redo,
+   * imports, dimension switches, slide changes, drafts). Without one every document renders at once.
+   */
+  fonts?: Pick<FontGate, "pending" | "ensure">;
+  /**
+   * How a pointer enters text editing. "click" (default): a single press on editable text starts editing with the caret at the
+   * pressed character, and a press-drag selects a range. "dblclick": a click selects, a double-click enters with the caret at the
+   * pointer. Keyboard entry (Enter, Space, F2) and `beginEdit(path)` always select all text. Non-text targets always open
+   * their properties on double-click.
+   */
+  textEntry?: "click" | "dblclick";
   /** Optional empty host for property forms; defaults to a floating canvas panel. */
   propertiesContainer?: HTMLElement;
   onSelect?: (selection: {
@@ -24,6 +66,8 @@ export interface CanvasEditorOptions {
   onCommit?: (event: { path: string; editor: EditorSession }) => void;
   onCancel?: (event: { path?: string }) => void;
   onError?: (error: Error) => void;
+  /** Font loading progress of the canvas: `loading`, `error` (a face could not be loaded; the canvas offers a retry) and `ready`. */
+  onFonts?: (event: { state: "loading"; pending: string[] } | { state: "error"; error: Error } | { state: "ready" }) => void;
   onRender?: (event: {
     document: unknown;
     slideIndex: number;
@@ -44,6 +88,7 @@ export interface CanvasEditor {
   /** Add starter content to a slide/group/region, converting implicit content when needed. */
   openInsertMenu(containerPath?: string,index?: number): void;
   select(path: string): void;
+  /** Start editing with all text selected (keyboard entry). Pointer entry places the caret at the pointer instead. */
   beginEdit(path: string): void;
   /** Open structured controls, including rich run fields. */
   editProperties(path: string): boolean;

package/dist/canvas.js

@@ -18,8 +18,11 @@ import {
 import { createBlockControls } from "./block-controls.js";
 import { createLayoutHandles } from "./layout-handles.js";
 import { createRichTextInput } from "./rich-text-input.js";
+import { textInputOffsetAtPoint } from "./text-pointer.js";
 import { createRichTextToolbar } from "./rich-text-toolbar.js";
+import { FONTS_PENDING, fontsPendingError, whenFontsReady } from "./font-gate.js";
 export { getEditableFields } from "./canvas-fields.js";
+export { createFontGate, whenFontsReady, FONTS_PENDING, FONTS_UNAVAILABLE } from "./font-gate.js";
 
 /** Allocated placeholder or internal-part bounds for the selection outline, not glyph ink. */
 export function allocatedSelectionBox(node, item) {
@@ -62,13 +65,27 @@ export function createCanvasEditor(container, options = {}) {
   const editor =
     options.editor ??
     createEditorSession(options.document, { rejectInvalid: true });
+  // `options.fonts` is a font gate (createFontGate): a document whose faces are not loaded yet is never rendered. The canvas
+  // loads them first and shows "Loading fonts…" meanwhile; without a gate every document renders at once, as before.
+  const fonts = options.fonts;
   let slideIndex = options.slideIndex ?? 0,
     renderOptions = options.renderOptions ?? {},
+    showToken = 0,
+    fontsShown = false,
     active = null,
     selectedPath = null,
     disposed = false,
     frame = 0,
-    committing = false;
+    committing = false,
+    pointerTaken = null,
+    handledPointer = null,
+    stopDrag = null;
+  // How a pointer enters text editing: "click" (default; PowerPoint / Google Slides) puts the caret at the pressed
+  // character on a single press and lets a press-drag select a range; "dblclick" keeps the older double-click gesture
+  // but still places the caret at the pointer. Keyboard entry (Enter, Space, F2) always selects all text.
+  const textEntry = options.textEntry ?? "click";
+  if (textEntry !== "click" && textEntry !== "dblclick")
+    throw new RangeError('textEntry must be "click" or "dblclick".');
   const root = doc.createElement("div"),
     preview = doc.createElement("div"),
     overlay = doc.createElement("div"),
@@ -100,12 +117,12 @@ export function createCanvasEditor(container, options = {}) {
     onTyping: beginEdit,
     onProperties(path) { if (commit()) openProperties(path, editor.get(path)); },
     validateChange(path, value) {
-      renderSvg(createCanvasDraft(editor.document, path, value), {...renderOptions, slideIndex});
+      validateRender(createCanvasDraft(editor.document, path, value));
     },
     onChange(path) { clearNotice(); options.onCommit?.({path, editor}); }
   });
   const layoutHandles = createLayoutHandles(root, {
-    editor, enabled: options.layoutEditing, render, beforeEdit: commit,
+    editor, enabled: options.layoutEditing, render: renderFor, beforeEdit: commit,
     isTextEditing: () => !!active,
     clearError: clearNotice, onError: report,
     onDraft: value => options.onDraft?.(value),
@@ -113,9 +130,9 @@ export function createCanvasEditor(container, options = {}) {
     onCancel: value => { clearNotice(); options.onCancel?.(value); },
   });
   const blockControls = createBlockControls(root, {
-    editor, render, beforeEdit: () => {if(!commit())return false;richToolbar.hide();return true;}, enabled: () => layoutHandles.enabled,
+    editor, render: renderFor, beforeEdit: () => {if(!commit())return false;richToolbar.hide();return true;}, enabled: () => layoutHandles.enabled,
     isEditing: () => !!active || !!layoutHandles.editingPath, slideIndex: () => slideIndex,
-    validate: document => renderSvg(document, {...renderOptions, slideIndex}),
+    validate: document => validateRender(document),
     clearError: clearNotice, onError: report,
     onMove: path => choose(splitOpfPath(path).join(".")),
     onCommit: value => options.onCommit?.(value),
@@ -142,8 +159,75 @@ export function createCanvasEditor(container, options = {}) {
       editor,
     });
   }
+  const pendingMessage = "Loading fonts for this document…";
+  // A synchronous render or validation of a document whose faces are still loading fails with a clear "fonts-pending"
+  // error and starts the load, so the next attempt succeeds. It never draws glyphs the registry cannot provide.
+  function requireFonts(document) {
+    const pending = fonts?.pending(document) ?? [];
+    if (!pending.length) return;
+    notice.hidden = false;
+    notice.textContent = pendingMessage;
+    fonts.ensure(document).then(
+      () => { if (!disposed && notice.textContent === pendingMessage) clearNotice(); },
+      (error) => { if (!disposed) report(error); },
+    );
+    throw fontsPendingError(pending);
+  }
+  function validateRender(document) {
+    requireFonts(document);
+    return renderSvg(document, {...renderOptions, slideIndex});
+  }
+  function fontsState(kind, detail) {
+    fontsShown = true;
+    const size = preview.firstElementChild?.getBoundingClientRect?.().height || 0;
+    layoutHandles.hide();
+    blockControls.hide();
+    richToolbar.hide();
+    const box = doc.createElement("div");
+    box.className = "opf-canvas-fonts";
+    box.setAttribute("role", kind === "error" ? "alert" : "status");
+    box.style.cssText = `box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:${Math.max(160, Math.round(size))}px;padding:16px;text-align:center;font:14px/1.4 system-ui;background:rgba(127,127,127,.12);border-radius:4px`;
+    const message = doc.createElement("span");
+    message.textContent = kind === "error" ? detail.message : "Loading fonts…";
+    box.append(message);
+    if (kind === "error") {
+      const retry = doc.createElement("button");
+      retry.type = "button";
+      retry.textContent = "Retry loading fonts";
+      retry.addEventListener("click", () => show());
+      box.append(retry);
+    }
+    preview.replaceChildren(box);
+    if (kind === "error") options.onError?.(detail);
+    options.onFonts?.(kind === "error" ? { state: "error", error: detail } : { state: "loading", pending: detail });
+  }
+  // Render a document the canvas did not draw itself (an editor change, a slide or option change) once its fonts are loaded.
+  function show(target) {
+    if (disposed) return;
+    const token = ++showToken;
+    return whenFontsReady(fonts, target ?? editor.document, {
+      isCurrent: () => !disposed && token === showToken,
+      loading: (pending) => fontsState("loading", pending),
+      ready: () => {
+        try {
+          render(target);
+        } catch (error) {
+          if (error?.code === FONTS_PENDING) show(target);
+          else report(error);
+        }
+      },
+      failed: (error) => fontsState("error", error),
+    });
+  }
+  // Renders now when the document's fonts are loaded (errors throw to the caller), otherwise after loading them.
+  function renderFor(document) {
+    if (fonts?.pending(document ?? editor.document).length) show(document);
+    else render(document);
+  }
   function render(document = editor.document) {
     if (disposed) return;
+    requireFonts(document);
+    showToken++;
     const slides = document.slides ?? [];
     slideIndex = Math.max(0, Math.min(slideIndex, slides.length - 1));
     const svgText = renderSvg(document, {
@@ -209,19 +293,29 @@ export function createCanvasEditor(container, options = {}) {
         rect.classList.add("opf-selection");
         node.prepend(rect);
       }
+      node.addEventListener("pointerdown", (event) => pointerDown(event, path));
+      // Some browsers still run mousedown's focus and text-selection defaults after a handled pointerdown.
+      node.addEventListener("mousedown", (event) => { if (pointerTaken === path) event.preventDefault(); });
       node.addEventListener("click", (event) => {
         event.stopPropagation();
         if (event.target.closest("a")) event.preventDefault();
+        // A mouse or pen press already entered editing on pointerdown; this click only completes that gesture.
+        if (pointerTaken === path) { pointerTaken = null; return; }
         if (active && active.path !== path && !commit()) return;
-        choose(path);
+        // A touch tap has no pointerdown entry (a touch press may start a scroll): it enters on the click itself.
+        const kind = editKind(path);
+        if (textEntry === "click" && event.detail > 0 && (kind === "text" || kind === "rich-text")) startEdit(path, { point: event });
+        else choose(path);
       });
       node.addEventListener("dblclick", (event) => {
         event.preventDefault();
         event.stopPropagation();
-        beginEdit(path);
+        const kind = editKind(path);
+        startEdit(path, kind === "text" || kind === "rich-text" ? { point: event } : undefined);
       });
       node.addEventListener("keydown", (event) => {
-        if (event.key === "Enter" || event.key === " ") {
+        // Keyboard entry replaces: all text is selected.
+        if (event.key === "Enter" || event.key === " " || event.key === "F2") {
           event.preventDefault();
           event.stopPropagation();
           beginEdit(path);
@@ -233,6 +327,10 @@ export function createCanvasEditor(container, options = {}) {
     blockControls.update(document, geometry);
     if (active?.kind === "text") positionInput();
     if (active?.kind === "rich-text") active.rich?.update();
+    if (fontsShown) {
+      fontsShown = false;
+      options.onFonts?.({ state: "ready" });
+    }
     options.onRender?.({
       document,
       slideIndex,
@@ -241,6 +339,22 @@ export function createCanvasEditor(container, options = {}) {
       draft: !!active || !!layoutHandles.editingPath,
     });
   }
+  // An in-progress edit whose text needs faces that are not loaded yet waits for them, then draws again.
+  function deferDraft(draft) {
+    if (!fonts?.pending(draft).length) return false;
+    active.valid = false;
+    notice.hidden = false;
+    notice.textContent = pendingMessage;
+    fonts.ensure(draft).then(
+      () => {
+        if (disposed) return;
+        if (notice.textContent === pendingMessage) clearNotice();
+        if (active) queueDraft();
+      },
+      (error) => { if (!disposed) report(error); },
+    );
+    return true;
+  }
   function queueDraft() {
     if (frame) win.cancelAnimationFrame(frame);
     frame = win.requestAnimationFrame(() => {
@@ -249,6 +363,7 @@ export function createCanvasEditor(container, options = {}) {
       if (active.kind === "properties") {
         try {
           const draft = propertyDraft(active);
+          if (deferDraft(draft)) return;
           clearNotice();
           render(draft);
           options.onDraft?.({
@@ -264,6 +379,7 @@ export function createCanvasEditor(container, options = {}) {
       try {
         const value = active.kind === "rich-text" ? active.rich.value : parseCanvasValue(active.input.value, active.type, active.originalValue);
         const draft = createCanvasDraft(editor.document, active.path, value);
+        if (deferDraft(draft)) return;
         clearNotice();
         active.valid = true;
         active.draft = draft;
@@ -338,7 +454,78 @@ export function createCanvasEditor(container, options = {}) {
     // Other text keeps the canonical SVG visible beneath the transparent input.
     target.style.opacity = visibleText ? "0" : "1";
   }
+  // What editing a target opens: inline text ("text"), the rich-text input ("rich-text"), or the properties form.
+  function editKind(path) {
+    const value = editor.get(path), target = getTarget(path);
+    if (value === undefined || !target) return null;
+    if ((typeof value === "string" || typeof value === "number") && target.querySelector("text") && !/\.(image|video)$/.test(path))
+      return "text";
+    if (Array.isArray(value) && target.hasAttribute("data-opf-rich-text")) return "rich-text";
+    return "properties";
+  }
+  // Textarea offset nearest to a client point, from the traced SVG glyphs (see text-pointer.js).
+  function textOffsetAt(edit, clientX, clientY) {
+    let source = edit.input.value;
+    try {
+      if (edit.type === "string") source = parseCanvasValue(edit.input.value, "string", edit.originalValue);
+    } catch { /* fall back to the raw input text */ }
+    return textInputOffsetAtPoint({
+      doc, win, target: getTarget(edit.path), path: edit.path, source, input: edit.input, clientX, clientY,
+    });
+  }
+  function setRange(input, anchor, focus) {
+    input.setSelectionRange(Math.min(anchor, focus), Math.max(anchor, focus), focus < anchor ? "backward" : "forward");
+  }
+  // Press-drag in plain text selects from the press point to the pointer, like PowerPoint. The textarea is not under the
+  // pointer when the press lands on the SVG glyphs, so the range is tracked here.
+  function trackDrag(edit, anchor, event) {
+    stopDrag?.();
+    const id = event.pointerId;
+    const move = (next) => {
+      if (next.pointerId !== id) return;
+      if (active !== edit || !next.buttons) return stop();
+      setRange(edit.input, anchor, textOffsetAt(edit, next.clientX, next.clientY));
+    };
+    const end = (next) => { if (next.pointerId === id) stop(); };
+    const stop = () => {
+      win.removeEventListener("pointermove", move);
+      win.removeEventListener("pointerup", end);
+      win.removeEventListener("pointercancel", end);
+      if (stopDrag === stop) stopDrag = null;
+      if (active === edit) edit.input.focus({ preventScroll: true });
+    };
+    win.addEventListener("pointermove", move);
+    win.addEventListener("pointerup", end);
+    win.addEventListener("pointercancel", end);
+    stopDrag = stop;
+  }
+  // A mouse or pen press on editable text enters editing at that character (touch enters from its click instead).
+  function pointerDown(event, path) {
+    if (handledPointer === event) return;
+    handledPointer = event;
+    if (textEntry !== "click" || disposed || event.button !== 0 || event.pointerType === "touch") return;
+    const edit = active?.path === path ? active : null;
+    if (edit ? edit.kind !== "text" : !["text", "rich-text"].includes(editKind(path))) return;
+    // Own the gesture: no native focus change, text selection or drag while the caret is placed.
+    event.preventDefault();
+    event.stopPropagation();
+    pointerTaken = path;
+    if (edit) {
+      const at = textOffsetAt(edit, event.clientX, event.clientY);
+      setRange(edit.input, at, at);
+      edit.input.focus({ preventScroll: true });
+      trackDrag(edit, at, event);
+      return;
+    }
+    if (active && !commit()) return;
+    startEdit(path, { point: event, drag: true });
+  }
   function beginEdit(path) {
+    startEdit(path);
+  }
+  // entry: undefined selects all text (keyboard and programmatic entry); {point} places the caret at a client point;
+  // {point, drag} also selects while the pressed pointer moves.
+  function startEdit(path, entry) {
     if (disposed) return;
     if (active && active.path === path) return;
     if (active && !commit()) return;
@@ -439,12 +626,16 @@ export function createCanvasEditor(container, options = {}) {
       input.addEventListener("blur", () => {
         if (active?.input === input && !active.composing) commit();
       });
-      input.focus();
-      input.select();
+      input.focus({ preventScroll: !!entry?.point });
+      if (entry?.point) {
+        const at = textOffsetAt(active, entry.point.clientX, entry.point.clientY);
+        setRange(input, at, at);
+        if (entry.drag) trackDrag(active, at, entry.point);
+      } else input.select();
     } else if (Array.isArray(value) && target?.hasAttribute("data-opf-rich-text")) {
       active = {kind:"rich-text",path,base:JSON.stringify(value),valid:true};
       active.rich = createRichTextInput(root, overlay, {
-        path, value, getTarget,
+        path, value, getTarget, selectAll: !entry?.point,
         onInput: queueDraft, onCommit: commit, onCancel: cancel, onError: report,
         onFormat(start,end) {
           if (!commit()) return;
@@ -452,6 +643,7 @@ export function createCanvasEditor(container, options = {}) {
         },
       });
       active.input = active.rich.input;
+      if (entry?.point) active.rich.pointerStart(entry.point);
     } else openProperties(path, value);
   }
   function propertyPatches(edit) {
@@ -659,7 +851,7 @@ export function createCanvasEditor(container, options = {}) {
         value = parseCanvasValue(edit.input.value, edit.type, edit.originalValue);
       else value = propertyDraft(edit);
       if (edit.kind === "text" || edit.kind === "rich-text")
-        renderSvg(createCanvasDraft(editor.document, edit.path, value), {...renderOptions,slideIndex});
+        validateRender(createCanvasDraft(editor.document, edit.path, value));
       committing = true;
       if ((edit.kind === "text" || edit.kind === "rich-text") && JSON.stringify(value) !== edit.base)
         editor.set(edit.path, value, { source: "canvas", rejectInvalid: true });
@@ -725,17 +917,14 @@ export function createCanvasEditor(container, options = {}) {
       queueDraft();
       return;
     }
-    try {
-      render();
-    } catch (error) {
-      report(error);
-    }
+    show();
   });
   const resize = new win.ResizeObserver(() => {
     if (active?.kind === "text") positionInput();
     active?.rich?.update();
   });
   resize.observe(root);
+  root.addEventListener("pointerdown", () => { pointerTaken = null; }, true);
   root.addEventListener("keydown", (event) => {
     if (
       (event.metaKey || event.ctrlKey) &&
@@ -748,7 +937,7 @@ export function createCanvasEditor(container, options = {}) {
     }
   });
   try {
-    render();
+    renderFor();
   } catch (error) {
     unsubscribe();
     resize.disconnect();
@@ -759,7 +948,7 @@ export function createCanvasEditor(container, options = {}) {
     throw error;
   }
   const ready = Promise.resolve(doc.fonts?.ready).then(() => {
-    if (!disposed && !active) render();
+    if (!disposed && !active) show();
   });
   return {
     editor,
@@ -795,25 +984,26 @@ export function createCanvasEditor(container, options = {}) {
       if (!Number.isInteger(index) || !editor.document.slides?.[index])
         throw new RangeError("Slide index is out of range.");
       if (index === slideIndex) {
-        if (!active) render();
+        if (!active) renderFor();
         return true;
       }
       if (!commit()) return false;
       richToolbar.hide();
       slideIndex = index;
       selectedPath = null;
-      render();
+      renderFor();
       return true;
     },
     setRenderOptions(next) {
       if (!commit()) return false;
       richToolbar.hide();
       renderOptions = next;
-      render();
+      renderFor();
       return true;
     },
     destroy() {
       disposed = true;
+      stopDrag?.();
       active?.rich?.destroy();
       richToolbar.destroy();
       layoutHandles.destroy();

package/dist/font-gate.js

@@ -0,0 +1,107 @@
+// Fonts before pixels. A document can need faces the browser font registry has not loaded yet: script faces for the
+// languages it draws (Japanese, Arabic, ...) and vendored preview faces for the font families it resolves (Intos for
+// Aptos, Open Sans, Barlow, ...). The renderer cannot draw such a document until those faces are loaded (a deck that
+// sets Aptos and contains Japanese fails with "Intos Display cannot display U+65E5"), so nothing may render or measure
+// a new document before `ensure` resolves. This module is the one gate every document-replacing path goes through.
+
+/** Error code of a document whose required faces are still loading. */
+export const FONTS_PENDING = "fonts-pending";
+/** Error code of a document whose required faces could not be loaded. */
+export const FONTS_UNAVAILABLE = "fonts-unavailable";
+
+// A load that cannot finish (a face the registry never reports as loaded) stops after this many rounds.
+const MAX_ROUNDS = 4;
+
+/**
+ * Wrap a browser font registry (`loadBrowserFontRegistry` from `@openpresentation/opf-render/fonts-browser`).
+ * Registries without the lazy loaders (renderer 0.10.0 and older) gate nothing and keep the fonts they have.
+ *
+ * - `pending(document)` lists the faces (script packages and vendored files) the document needs that are not loaded.
+ *   Synchronous; empty means the document can render now. Never throws: a document the renderer rejects for other
+ *   reasons reports nothing pending and fails with its own validation message when rendered.
+ * - `ensure(document, { signal })` loads vendored faces first (script fallback depends on them), then script faces,
+ *   and repeats until nothing is pending. It makes a bounded number of rounds and rejects with a `fonts-unavailable`
+ *   error (the registry's error is its `cause`); it never retries by itself, a later call is a new attempt.
+ * - `run(document, handlers)` is `whenFontsReady` on this gate.
+ */
+export function createFontGate(registry) {
+  const pending = (document) => {
+    try {
+      const scripts = registry?.pendingScripts?.(document) ?? [];
+      const lazy = (registry?.pendingLazyFonts?.(document) ?? []).map((face) => face?.file ?? String(face));
+      return [...lazy, ...scripts];
+    } catch {
+      return [];
+    }
+  };
+  const gate = {
+    pending,
+    async ensure(document, options = {}) {
+      const { signal } = options;
+      try {
+        for (let round = 0; round < MAX_ROUNDS && pending(document).length; round++) {
+          signal?.throwIfAborted?.();
+          await registry.ensureLazyFonts?.(document, { signal });
+          await registry.ensureScripts?.(document, { signal });
+        }
+      } catch (cause) {
+        if (signal?.aborted) throw cause;
+        throw fontsUnavailable(cause?.message ?? String(cause), cause);
+      }
+      const left = pending(document);
+      if (left.length) throw fontsUnavailable(`${left.join(", ")} did not finish loading.`);
+    },
+  };
+  gate.run = (document, handlers) => whenFontsReady(gate, document, handlers);
+  return gate;
+}
+
+function fontsUnavailable(message, cause) {
+  const error = new Error(`Fonts for this document could not be loaded: ${message}`, cause ? { cause } : undefined);
+  error.code = FONTS_UNAVAILABLE;
+  return error;
+}
+
+/** The error a synchronous render raises when it is asked to draw a document whose faces are pending. */
+export function fontsPendingError(pending) {
+  const error = new Error("Loading fonts for this document…");
+  error.code = FONTS_PENDING;
+  error.pending = pending;
+  return error;
+}
+
+/**
+ * Ensure fonts for a document, then run `ready`: the one "ensure fonts, then render" helper.
+ * With nothing pending, `ready` runs synchronously, so documents in already-loaded fonts render at once. Otherwise
+ * `loading(pending)` runs, the faces load and `ready` runs after them. `isCurrent()` is checked after the wait, so a
+ * result for a superseded document is dropped. A load failure, and an exception thrown by `ready`, go to `failed(error)`
+ * (they are rethrown when there is no `failed`). `gate` is any object with `pending(document)` and `ensure(document)`;
+ * without one the document is treated as ready. Resolves once `ready` or `failed` has run.
+ */
+export function whenFontsReady(gate, document, { isCurrent = () => true, loading, ready, failed } = {}) {
+  const finish = () => {
+    try {
+      ready?.();
+    } catch (error) {
+      if (!failed) throw error;
+      failed(error);
+    }
+  };
+  const left = gate?.pending?.(document) ?? [];
+  if (!left.length) {
+    finish();
+    return Promise.resolve();
+  }
+  loading?.(left);
+  return Promise.resolve(gate.ensure(document)).then(
+    () => {
+      if (isCurrent()) finish();
+    },
+    (error) => {
+      if (isCurrent()) {
+        if (!failed) throw error;
+        failed(error);
+      }
+    },
+  );
+}

package/dist/rich-text-input.js

@@ -2,7 +2,7 @@ import {richTextContent, updateRichTextInput} from './rich-text.js';
 import {textInputMap} from './text-input.js';
 
 /** Native input owns keyboard/IME; caret and selection use the canonical SVG glyphs. */
-export function createRichTextInput(root, overlay, {path, value, getTarget, onInput, onCommit, onCancel, onFormat, onError}) {
+export function createRichTextInput(root, overlay, {path, value, getTarget, onInput, onCommit, onCancel, onFormat, onError, selectAll=true}) {
   const doc=root.ownerDocument, win=doc.defaultView;
   const input=doc.createElement('textarea'), marks=doc.createElement('div'), actions=doc.createElement('div');
   input.className='opf-rich-input';input.value=richTextContent(value);
@@ -16,7 +16,7 @@ export function createRichTextInput(root, overlay, {path, value, getTarget, onIn
     button.onmousedown=event=>event.preventDefault();button.onclick=action;actions.append(button);
   }
   overlay.append(marks,input,actions);
-  let current=structuredClone(value), composing=false, change=null, anchor=null, disposed=false, emptyAnchor=null;
+  let current=structuredClone(value), composing=false, change=null, anchor=null, disposed=false, emptyAnchor=null, lastDown=null;
   let history=[{value:structuredClone(current),start:0,end:input.value.length}], historyIndex=0, compositionBase=null;
   const currentMap=()=>textInputMap(richTextContent(current));
   function remember() {
@@ -77,12 +77,29 @@ export function createRichTextInput(root, overlay, {path, value, getTarget, onIn
       return !best||distance<best.distance?{...p,distance}:best;
     },null)?.offset??0;
   }
-  function pointerDown(event) {
-    if(event.button!==0||!getTarget(path)?.contains(event.target))return;
+  // The pointer never reaches the hidden input, so double/triple click (word/paragraph) are counted here.
+  function selectUnit(offset,count) {
+    const text=input.value,at=Math.max(0,Math.min(text.length,offset));
+    let a=at,b=at;
+    if(count>=3){a=at>0?text.lastIndexOf('\n',at-1)+1:0;b=text.indexOf('\n',at);if(b<0)b=text.length;}
+    else {
+      const parts=[...new Intl.Segmenter(undefined,{granularity:'word'}).segment(text)],hit=parts.find(p=>p.index<=at&&at<p.index+p.segment.length)??parts.at(-1);
+      if(hit){a=hit.index;b=hit.index+hit.segment.length;}
+    }
+    input.setSelectionRange(a,b,'forward');
+  }
+  function pointerDown(event,entry=false) {
+    if(!entry&&(event.button!==0||!getTarget(path)?.contains(event.target)))return;
     event.preventDefault();event.stopPropagation();
-    const map=currentMap();anchor=event.shiftKey?map.toSource(input.selectionStart):nearest(event);input.focus({preventScroll:true});
-    const end=nearest(event);input.setSelectionRange(map.toInput(Math.min(anchor,end)),map.toInput(Math.max(anchor,end)),end<anchor?'backward':'forward');
-    root.setPointerCapture(event.pointerId);update();
+    const map=currentMap(),repeat=!entry&&!event.shiftKey&&lastDown&&event.timeStamp-lastDown.time<500&&Math.hypot(event.clientX-lastDown.x,event.clientY-lastDown.y)<5;
+    const count=repeat?lastDown.count+1:1;lastDown={time:event.timeStamp,x:event.clientX,y:event.clientY,count};
+    anchor=event.shiftKey&&!entry?map.toSource(input.selectionStart):nearest(event);input.focus({preventScroll:true});
+    const end=nearest(event);
+    if(count>1){anchor=null;selectUnit(map.toInput(end),count);update();return;}
+    input.setSelectionRange(map.toInput(Math.min(anchor,end)),map.toInput(Math.max(anchor,end)),end<anchor?'backward':'forward');
+    // A press keeps extending the range while it moves; a completed click (entry from a tap or double-click) does not.
+    if(event.buttons&&Number.isInteger(event.pointerId))root.setPointerCapture(event.pointerId);else anchor=null;
+    update();
   }
   function pointerMove(event) {
     if(anchor===null)return;event.preventDefault();const end=nearest(event),map=currentMap();
@@ -114,6 +131,6 @@ export function createRichTextInput(root, overlay, {path, value, getTarget, onIn
   input.addEventListener('select',update);input.addEventListener('keyup',update);
   input.addEventListener('blur',()=>{if(!disposed&&!composing)onCommit();});
   root.addEventListener('pointerdown',pointerDown,true);root.addEventListener('pointermove',pointerMove);root.addEventListener('pointerup',pointerUp);root.addEventListener('pointercancel',pointerUp);
-  input.focus({preventScroll:true});input.select();update();
-  return {input,update,get value(){return structuredClone(current);},get composing(){return composing;},destroy(){disposed=true;root.removeEventListener('pointerdown',pointerDown,true);root.removeEventListener('pointermove',pointerMove);root.removeEventListener('pointerup',pointerUp);root.removeEventListener('pointercancel',pointerUp);marks.remove();input.remove();actions.remove();}};
+  input.focus({preventScroll:true});if(selectAll)input.select();update();
+  return {input,update,pointerStart:event=>pointerDown(event,true),get value(){return structuredClone(current);},get composing(){return composing;},destroy(){disposed=true;root.removeEventListener('pointerdown',pointerDown,true);root.removeEventListener('pointermove',pointerMove);root.removeEventListener('pointerup',pointerUp);root.removeEventListener('pointercancel',pointerUp);marks.remove();input.remove();actions.remove();}};
 }

package/dist/text-pointer.js

@@ -0,0 +1,180 @@
+import {textInputMap} from './text-input.js';
+
+// Pointer -> caret mapping for the plain-text inline input.
+//
+// The user clicks the canonical SVG glyphs; the native textarea supplies the caret. Offsets are resolved from the SVG
+// text geometry (each rendered line carries its exact source range in `data-opf-source-start/end` or
+// `data-opf-text-start/end`) and converted to textarea offsets with `textInputMap`, so CRLF sources, tabs, collapsed
+// whitespace at wraps and bidi isolate marks all resolve to the input value's offsets, never to a glyph index. A line
+// whose text does not match its traced source range falls back to a hidden mirror of the positioned textarea.
+const SEGMENTER = typeof Intl !== 'undefined' && Intl.Segmenter ? new Intl.Segmenter(undefined, {granularity: 'grapheme'}) : null;
+const STRONG_RTL = /[\u0590-\u08FF\uFB1D-\uFDFF\uFE70-\uFEFF]/u;
+const STRONG_LTR = /[\p{L}\p{N}]/u;
+const ISOLATE = /[\u2066-\u2069]/u;
+const graphemes = (text) => SEGMENTER ? [...SEGMENTER.segment(text)].map((part) => ({index: part.index, text: part.segment})) : [...text].map((char, i, all) => ({index: all.slice(0, i).join('').length, text: char}));
+
+const numeric = (node, ...names) => {
+  for (const name of names) {
+    const value = node.getAttribute(name);
+    if (value !== null && value !== '' && Number.isFinite(Number(value))) return Number(value);
+  }
+  return null;
+};
+
+const rangeOf = (node) => {
+  const start = numeric(node, 'data-opf-source-start', 'data-opf-text-start'), end = numeric(node, 'data-opf-source-end', 'data-opf-text-end');
+  return start === null || end === null || end < start ? null : {node, start, end};
+};
+
+/**
+ * Rendered text lines of a target with their source ranges, in document order. A line is a traced `text` element; its
+ * segments are the traced `tspan`s inside it (tabs, script or direction runs) or the element itself.
+ */
+function traceLines(target, path) {
+  const lines = [];
+  for (const node of target.querySelectorAll('text')) {
+    const own = node.getAttribute('data-opf-path');
+    if (own !== null && own !== path) continue;
+    const line = rangeOf(node);
+    if (!line) continue;
+    const nested = [...node.querySelectorAll('tspan')].map(rangeOf).filter(Boolean);
+    lines.push({node, start: line.start, end: line.end, segments: nested.length ? nested : [line]});
+  }
+  return lines;
+}
+
+/** Source offset of every UTF-16 index of a rendered line, or null when the line is not its traced source slice. */
+function alignLine(text, source, start, end) {
+  const slice = source.slice(start, end), positions = [];
+  let at = 0;
+  for (let i = 0; i < text.length; i++) {
+    if (slice[at] === text[i]) { positions.push(start + at); at++; }
+    else if (ISOLATE.test(text[i])) positions.push(start + at);
+    else return null;
+  }
+  return at === slice.length ? positions : null;
+}
+
+function isRtl(win, node, segment) {
+  if (STRONG_RTL.test(segment)) return true;
+  if (STRONG_LTR.test(segment)) return false;
+  return win.getComputedStyle(node).direction === 'rtl';
+}
+
+/** Caret boundaries of one traced line: `{offset, x}` in client pixels, offsets in source coordinates. */
+function lineBoundaries(doc, win, line, source) {
+  const result = [], range = doc.createRange();
+  for (const segment of line.segments) {
+    const {node} = segment, text = node.textContent, positions = alignLine(text, source, segment.start, segment.end);
+    if (!positions) return null;
+    if (!text) {
+      const matrix = node.getScreenCTM?.();
+      if (!matrix) return null;
+      result.push({offset: segment.start, x: new win.DOMPoint(Number(node.getAttribute('x')) || 0, 0).matrixTransform(matrix).x});
+      continue;
+    }
+    const child = node.firstChild;
+    if (child?.nodeType !== 3) return null;
+    for (const part of graphemes(text)) {
+      // Directional isolate marks are zero-width and not source characters; their rects are not caret positions.
+      if (ISOLATE.test(part.text)) continue;
+      range.setStart(child, part.index);
+      range.setEnd(child, part.index + part.text.length);
+      const box = range.getBoundingClientRect(), rtl = isRtl(win, node, part.text), after = part.index + part.text.length;
+      result.push({offset: positions[part.index], x: rtl ? box.right : box.left});
+      result.push({offset: after < positions.length ? positions[after] : segment.end, x: rtl ? box.left : box.right});
+    }
+  }
+  return result.length ? result : null;
+}
+
+/** Vertical centre of a rendered line in client pixels. */
+function lineCentre(win, line) {
+  const box = line.node.getBoundingClientRect();
+  if (box.height > 0 || box.width > 0) return box.top + box.height / 2;
+  const matrix = line.node.getScreenCTM?.(), size = Number(line.node.getAttribute('font-size')) || 16;
+  if (!matrix) return Infinity;
+  const point = new win.DOMPoint(0, (Number(line.node.getAttribute('y')) || 0) - size * 0.3).matrixTransform(matrix);
+  return point.y;
+}
+
+function nearestOffset(points, clientX) {
+  let best = null, distance = Infinity;
+  for (const point of points) {
+    const gap = Math.abs(point.x - clientX);
+    if (gap < distance) { best = point; distance = gap; }
+  }
+  return best?.offset ?? null;
+}
+
+function traceOffset({doc, win, target, path, source, clientX, clientY}) {
+  const lines = traceLines(target, path);
+  if (!lines.length) return null;
+  let line = null, gap = Infinity;
+  for (const candidate of lines) {
+    const distance = Math.abs(lineCentre(win, candidate) - clientY);
+    if (distance < gap) { line = candidate; gap = distance; }
+  }
+  if (!line) return null;
+  const points = lineBoundaries(doc, win, line, source);
+  return points ? nearestOffset(points, clientX) : null;
+}
+
+/** Nearest caret offset in a hidden copy of the positioned textarea (line breaks, wrapping and alignment included). */
+function mirrorOffset({doc, win, input, clientX, clientY}) {
+  const parent = input.parentNode, host = parent?.getBoundingClientRect?.();
+  if (!parent || !host) return null;
+  const box = input.getBoundingClientRect(), style = win.getComputedStyle(input), mirror = doc.createElement('div');
+  mirror.setAttribute('aria-hidden', 'true');
+  mirror.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;margin:0;padding:0;border:0;overflow:hidden;box-sizing:border-box;white-space:pre-wrap;overflow-wrap:break-word;left:${box.left - host.left}px;top:${box.top - host.top}px;width:${box.width}px`;
+  for (const name of ['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'fontStretch', 'fontKerning', 'fontVariantLigatures', 'lineHeight', 'letterSpacing', 'wordSpacing', 'textAlign', 'tabSize', 'direction', 'textTransform', 'textIndent'])
+    mirror.style[name] = style[name];
+  const value = input.value;
+  mirror.textContent = value;
+  parent.append(mirror);
+  try {
+    const child = mirror.firstChild;
+    if (!child) return 0;
+    const range = doc.createRange(), flat = [], align = style.textAlign;
+    const lineStart = align === 'right' || align === 'end' ? box.right : align === 'center' ? (box.left + box.right) / 2 : box.left;
+    const pitch = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.2;
+    for (const part of graphemes(value)) {
+      range.setStart(child, part.index);
+      range.setEnd(child, part.index + part.text.length);
+      const rect = range.getBoundingClientRect(), rtl = isRtl(win, mirror, part.text), newline = part.text === '\n' || part.text === '\r\n';
+      if (!rect.height && !rect.width) continue;
+      const cy = rect.top + rect.height / 2;
+      flat.push({offset: part.index, x: rtl ? rect.right : rect.left, cy});
+      if (!newline) flat.push({offset: part.index + part.text.length, x: rtl ? rect.left : rect.right, cy});
+    }
+    if (value.endsWith('\n')) {
+      const last = flat.findLast((point) => point.offset === value.length - 1);
+      flat.push({offset: value.length, x: lineStart, cy: (last?.cy ?? box.top) + pitch});
+    }
+    let cy = null, gap = Infinity;
+    for (const point of flat) {
+      const distance = Math.abs(point.cy - clientY);
+      if (distance < gap - 0.5) { cy = point.cy; gap = distance; }
+    }
+    const row = flat.filter((point) => Math.abs(point.cy - cy) <= pitch / 2);
+    return nearestOffset(row, clientX);
+  } finally {
+    mirror.remove();
+  }
+}
+
+/**
+ * Textarea offset (LF-normalized, the coordinates `selectionStart` uses) nearest to a client point.
+ * `source` is the canonical string the SVG was rendered from; `target` is the traced canvas target of `path`.
+ */
+export function textInputOffsetAtPoint({doc, win, target, path, source, input, clientX, clientY}) {
+  const map = textInputMap(source);
+  const clamp = (offset) => Math.max(0, Math.min(input.value.length, offset));
+  let sourceOffset = null;
+  try {
+    if (target) sourceOffset = traceOffset({doc, win, target, path, source, clientX, clientY});
+  } catch { sourceOffset = null; }
+  if (sourceOffset !== null && sourceOffset >= 0 && sourceOffset <= source.length) return clamp(map.toInput(sourceOffset));
+  const mirrored = mirrorOffset({doc, win, input, clientX, clientY});
+  return clamp(mirrored ?? input.value.length);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-editor",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",
@@ -87,17 +87,18 @@
   "sideEffects": false,
   "scripts": {
     "build": "node scripts/build.mjs",
-    "typecheck": "node --check src/index.js && node --check src/react.js && node --check src/svelte.js && node --check scripts/build.mjs && node --check scripts/validate-package.mjs && node --check test/smoke.mjs && node --check test/component-smoke.mjs && node --check src/canvas.js && node --check src/canvas-fields.js && node --check test/canvas-fields.mjs && node --check test/browser-canvas.mjs && node --check src/transfer.js && node --check src/presentation-ids.js && node --check src/font-defaults.js && node --check src/color-authoring.js && node --check test/presentation-ids.mjs && node --check src/galleries.js && node --check examples/transfer-controls.js && node --check src/schema.js && node --check src/schema-inspector.js && node --check test/rich-table-browser.mjs && node --check test/styled-table.mjs && node --check test/styled-table-browser.mjs && node --check examples/pptx-controls.js && node --check scripts/build-playground.mjs && node --check test/playground-pptx.mjs && node --check test/playground-script-fonts.mjs && node --check test/playground-lazy-fonts.mjs && node --check src/text-input.js && node --check src/rich-text.js && node --check src/rich-text-input.js && node --check src/rich-text-toolbar.js && node --check test/rich-text.mjs && node --check test/rich-input-browser.mjs && node --check src/json-editor.js && node --check src/json-menu.js && node --check src/json-options.js && node --check src/json-source.js && node --check src/switches.js && node --check test/switches.mjs && node --check test/switches-export.mjs && node --check test/placeholder-selection.mjs && node --check test/selection-browser.mjs && node --check scripts/check-font-hotlinks.mjs && node --check scripts/check-font-hotlinks.test.mjs && node --check src/exact-source.js && node --check test/exact-source.mjs && node --check test/playground-source.mjs",
-    "test": "npm run build && npm run check:font-hotlinks && node test/accepted-text.mjs && node test/smoke.mjs && node test/component-smoke.mjs && node test/canvas-fields.mjs && node test/transfer.mjs && node test/gallery-font-roles.mjs && node test/default-font-scheme.mjs && node test/presentation-ids.mjs && node test/schema.mjs && node test/rich-text.mjs && node test/layout.mjs && node test/blocks.mjs && node test/styled-table.mjs && node test/json-source.mjs && node test/json-options.mjs && node test/switches.mjs && node test/switches-export.mjs && node test/placeholder-selection.mjs && node test/exact-source.mjs",
+    "typecheck": "node --check src/index.js && node --check src/react.js && node --check src/svelte.js && node --check scripts/build.mjs && node --check scripts/validate-package.mjs && node --check test/smoke.mjs && node --check test/component-smoke.mjs && node --check src/canvas.js && node --check src/canvas-fields.js && node --check test/canvas-fields.mjs && node --check test/browser-canvas.mjs && node --check src/transfer.js && node --check src/presentation-ids.js && node --check src/font-defaults.js && node --check src/color-authoring.js && node --check test/presentation-ids.mjs && node --check src/galleries.js && node --check examples/transfer-controls.js && node --check src/schema.js && node --check src/schema-inspector.js && node --check test/rich-table-browser.mjs && node --check test/styled-table.mjs && node --check test/styled-table-browser.mjs && node --check examples/pptx-controls.js && node --check scripts/build-playground.mjs && node --check test/playground-pptx.mjs && node --check test/playground-script-fonts.mjs && node --check test/playground-lazy-fonts.mjs && node --check src/text-input.js && node --check src/rich-text.js && node --check src/rich-text-input.js && node --check src/rich-text-toolbar.js && node --check test/rich-text.mjs && node --check test/rich-input-browser.mjs && node --check src/json-editor.js && node --check src/json-menu.js && node --check src/json-options.js && node --check src/json-source.js && node --check src/switches.js && node --check test/switches.mjs && node --check test/switches-export.mjs && node --check test/placeholder-selection.mjs && node --check test/selection-browser.mjs && node --check scripts/check-font-hotlinks.mjs && node --check scripts/check-font-hotlinks.test.mjs && node --check src/exact-source.js && node --check test/exact-source.mjs && node --check test/playground-source.mjs && node --check src/font-gate.js && node --check test/font-gate.mjs && node --check test/playground-ensure-fonts.mjs && node --check test/canvas-fonts-browser.mjs && node --check src/text-pointer.js && node --check test/click-entry-browser.mjs",
+    "test": "npm run build && npm run check:font-hotlinks && node test/accepted-text.mjs && node test/smoke.mjs && node test/component-smoke.mjs && node test/canvas-fields.mjs && node test/transfer.mjs && node test/gallery-font-roles.mjs && node test/default-font-scheme.mjs && node test/presentation-ids.mjs && node test/schema.mjs && node test/rich-text.mjs && node test/layout.mjs && node test/blocks.mjs && node test/styled-table.mjs && node test/json-source.mjs && node test/json-options.mjs && node test/switches.mjs && node test/switches-export.mjs && node test/placeholder-selection.mjs && node test/exact-source.mjs && node test/font-gate.mjs",
     "validate": "node scripts/validate-package.mjs",
     "test:packed": "node test/packed-install.mjs",
     "prepack": "npm run build",
     "check:font-hotlinks": "node --test scripts/check-font-hotlinks.test.mjs && node scripts/check-font-hotlinks.mjs",
     "check:font-hotlinks:built": "node scripts/check-font-hotlinks.mjs --built dist artifacts/playground",
     "build:playground": "node scripts/build-playground.mjs",
-    "test:playground": "npm run build:playground && npm run check:font-hotlinks:built && node test/playground-pptx.mjs && node test/playground-script-fonts.mjs artifacts/playground-script-fonts && node test/playground-lazy-fonts.mjs artifacts/playground-lazy-fonts && node test/playground-source.mjs",
+    "test:playground": "npm run build:playground && npm run check:font-hotlinks:built && node test/playground-pptx.mjs && node test/playground-script-fonts.mjs artifacts/playground-script-fonts && node test/playground-lazy-fonts.mjs artifacts/playground-lazy-fonts && node test/playground-source.mjs && node test/playground-ensure-fonts.mjs artifacts/playground-ensure-fonts && node test/canvas-fonts-browser.mjs artifacts/canvas-fonts",
     "test:code-browser": "node test/code-browser.mjs",
     "test:selection-browser": "node test/selection-browser.mjs",
+    "test:click-entry-browser": "node test/click-entry-browser.mjs",
     "test:metric-browser": "node test/metric-browser.mjs",
     "test:rich-input-browser": "node test/rich-input-browser.mjs",
     "test:json": "npm run build && node test/json-source.mjs && node test/json-options.mjs",
@@ -156,8 +157,8 @@
     "@expo-google-fonts/noto-sans-thai": "0.4.2",
     "@expo-google-fonts/noto-serif-hebrew": "0.4.2",
     "@expo-google-fonts/noto-serif-tibetan": "0.4.2",
-    "@openpresentation/opf-pptx": "^0.11.0",
-    "@openpresentation/opf-render": "^0.11.0",
+    "@openpresentation/opf-pptx": "^0.11.1",
+    "@openpresentation/opf-render": "^0.11.2",
     "esbuild": "0.28.2",
     "playwright": "1.63.0"
   }