@openpresentation/opf-editor 0.20.3 → 0.22.0

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.
 
-## Using the editor with opf-render 0.16: what to install (RR-63, unreleased)
+## Install the editor and optional export dependencies (RR-63)
 
 `@openpresentation/opf-render` is an optional peer of the editor, and from render 0.16 its heavy pieces are optional peers too, so install only what you use. The editor itself draws with `@openpresentation/opf-render/svg` and loads fonts with `/fonts-browser`, which need nothing else. Add:
 
@@ -110,13 +110,16 @@ Chart options (RR-35): `@openpresentation/opf-editor/chart-options` edits a char
 
 Chart highlight (FA-14): the same module edits `chart.highlight`: `setChartOptions(editor, chartPath, { highlight: { series: ["Revenue"], categories: ["Q3"] } })` replaces each listed part (an empty list removes it, `null` removes the field), refuses a name the chart does not have, and writes only what the chart type can highlight (core `chartOptionSupport(...).highlight`). `readChartOptions(chart, document)` returns the `choices` (plotted series and category labels, resolved through the document for a dataset chart), and the panel lists them as two groups of checkboxes ("Highlight series", "Highlight categories").
 
+Chart colors (known gap): core 0.21 added `chart.colors` (a position-matched list of series or category colors, as a hex color, a scheme slot or a role), and opf-pptx 0.22.0 exports it (the opf-render preview follows once opf-render#256 lands), but the editor has no control for it yet. The chart options panel edits `highlight` as its only color-related setting (the two checkbox groups above), and `setChartOptions` does not accept `colors`. Until a control exists, set `chart.colors` in the document directly (the JSON control or a patch).
+
 ```js
 import { createCanvasEditor } from '@openpresentation/opf-editor/canvas';
+import { saveDocument } from '@openpresentation/opf-editor';
 
 const canvas = createCanvasEditor(container, {
   presentation,
   fonts, // the renderer's fonts handle: const fonts = await loadFonts({ faces, ... })
-  onCommit: ({ editor }) => saveDocument(editor.presentation),
+  onCommit: ({ editor }) => console.log(saveDocument(editor).document),
 });
 await canvas.ready;
 // canvas.destroy() when unmounting.
@@ -430,9 +433,10 @@ setTableStyle(editor, "slides.4.blocks.1.table", "banded");                  //
 mergeTableCells(editor, "slides.4.blocks.1.table", { section: "body", row: 1, column: 0 }, { colSpan: 3 });
 splitTableCell(editor, "slides.4.blocks.1.table", { section: "body", row: 1, column: 0 });
 setTableCellStyle(editor, "slides.4.blocks.1.table", [{ section: "header", column: 0 }], { fill: "accent", align: "center" });
+setTableCellStyle(editor, "slides.4.blocks.1.table", { section: "body", row: 2, column: 3 }, { bold: true }); // a bold number cell keeps its column format and alignment; { bold: null } removes it
 ```
 
-Styles use scheme roles, so they follow the color scheme, and the renderers keep the text readable on any fill. A style sets the header fill (`theme`, `plain`, `accent`), banded rows and borders (`theme`, `none`, `horizontal`, `grid`); named presets are `theme`, `banded`, `grid`, `minimal` and `open`, and `theme` removes a previous style. A style owns only the fill and border fields of a cell: text color, alignment, padding, values and merges are kept. Merging never hides text: covered cells that hold text refuse with `merge-would-lose-content` unless you pass `join: true`, which joins the words into the anchor with a space and keeps run formatting. Other refusals are `merge-overlap` (the region crosses another merge), `invalid-table-span` (outside the table, or a header cell spanning into the body) and `table-cell-covered`. Splitting leaves the formerly covered cells as empty text. `parseTableCellPath` maps a canvas selection to a table and cell, and `describeTableCell` and `readTableStyle` read the current state.
+Styles use scheme roles, so they follow the color scheme, and the renderers keep the text readable on any fill. A style sets the header fill (`theme`, `plain`, `accent`), banded rows and borders (`theme`, `none`, `horizontal`, `grid`); named presets are `theme`, `banded`, `grid`, `minimal` and `open`, and `theme` removes a previous style. A style owns only the fill and border fields of a cell: text color, alignment, bold, padding, values and merges are kept. To bold one cell, set `bold: true` on its style with `setTableCellStyle` (the panel's Bold checkbox does): the cell stays a plain value in a numeric column, so it keeps the column's number `format` and alignment, which rich runs would drop (needs core with `TableCellStyle.bold`). Merging never hides text: covered cells that hold text refuse with `merge-would-lose-content` unless you pass `join: true`, which joins the words into the anchor with a space and keeps run formatting. Other refusals are `merge-overlap` (the region crosses another merge), `invalid-table-span` (outside the table, or a header cell spanning into the body) and `table-cell-covered`. Splitting leaves the formerly covered cells as empty text. `parseTableCellPath` maps a canvas selection to a table and cell, and `describeTableCell` and `readTableStyle` read the current state.
 
 Table alt text (FA-27): `setTableAlt(editor, tablePath, { alt: "North America leads EMEA in Q4." })` writes the table's text alternative (`Table.alt`) as one undoable patch, like a chart's. `alt` is trimmed and an empty string or `null` removes it; `{ decorative: true }` writes the empty alt (decorative, and it wins over `alt`) and `{ decorative: false }` removes an empty alt. It works on a table that shows a shared dataset too, since the alt belongs to the table and not to its data. `readTableAlt(table)` gives `{ alt, decorative }` for a form and `prepareTableAlt` is the headless patch. The table section of the design controls has an "Alt text" field and a "Decorative (no alt text)" box, and find and replace searches `table.alt`. `validate` does not ask for a table alt, so the field is optional.
 
@@ -520,7 +524,7 @@ const selectionControls = createDesignControls(contentPanel, { editor, getSlideI
 controls.refresh(); // when the slide or the selection changes
 ```
 
-Sections: `look` (theme, color scheme, font scheme, language, this slide's layout), `background` (type, theme slot, solid color, gradient with its stops, image with fit, focus, alt text, recolor and overlay, any of the 54 patterns, opacity; a draft until Apply, with Remove), `header-footer` (choose header or footer and a zone, then every part the zone supports: a text box with an "Insert value" menu that puts the slide number, slide count, section, organization, speaker or deck name at the cursor as a `{{ }}` variable (Enter commits, Shift+Enter starts a new line), an image with an "Insert logo" action (a shape and, for several organizations, an organization; it writes the logo reference as the zone's image), social profiles, and the current or fixed date and format, with a summary of the zones in use), `brand` (the organization logo: one image for every shape, or each of the four shapes for both, light and dark backgrounds, for the organization you choose; which organization's logo and shape covers, sections and picture bullets draw, or none; picture bullets, accent font, watermark), `layout-options` (alignment, direction, primary chart, content box, default image fit), `info` (narrative, tone, audience, socials), `selection` (content type with a loss report, list levels, group of metrics, group and ungroup, image to background or watermark, replacement, chart type), `image` (the selected image block's fit, focus, shape, corner radius, border, opacity, recolor, overlay, aspect ratio and placement), `catalog` (reference findings and the explicit "Update from catalog"), `slide-content` (blocks to regions and back, design images back into the content) and `table` (style, merge, split, cell fill and alignment). The panel is native `details`, `fieldset`, `select`, checkbox and text controls with a label on each, so it works with the keyboard and with screen readers: groups open with Enter or Space, a select changes with the arrow keys, text fields commit on Enter or when you leave them, and results and refusals are announced in `role="status"` and `role="alert"` regions. A refused change (an invalid value, text a merge would hide) is explained, changes nothing, and puts the field back. "Applies to" switches the design controls between the whole presentation and the current slide, and a control shows when a slide value is "set on this slide" or "from the presentation". The panel offers only conversions that exist, shows what a conversion loses before you choose it, and lists why an unavailable one is unavailable.
+Sections: `look` (theme, color scheme, font scheme, language, this slide's layout), `background` (type, theme slot, solid color, gradient with its stops, image with fit, focus, alt text, recolor and overlay, any of the 54 patterns, opacity; a draft until Apply, with Remove), `header-footer` (choose header or footer and a zone, then every part the zone supports: a text box with an "Insert value" menu that puts the slide number, slide count, section, organization, speaker or deck name at the cursor as a `{{ }}` variable (Enter commits, Shift+Enter starts a new line), an image with an "Insert logo" action (a shape and, for several organizations, an organization; it writes the logo reference as the zone's image), social profiles, and the current or fixed date and format, with a summary of the zones in use), `brand` (the organization logo: one image for every shape, or each of the four shapes for both, light and dark backgrounds, for the organization you choose; which organization's logo and shape covers, sections and picture bullets draw, or none; picture bullets, accent font, watermark), `layout-options` (alignment, direction, primary chart, content box, default image fit), `info` (narrative, tone, audience, socials), `selection` (content type with a loss report, list levels, group of metrics, group and ungroup, image to background or watermark, replacement, chart type), `image` (the selected image block's fit, focus, shape, corner radius, border, opacity, recolor, overlay, aspect ratio and placement), `catalog` (reference findings and the explicit "Update from catalog"), `slide-content` (blocks to regions and back, design images back into the content) and `table` (style, merge, split, cell fill, alignment and bold). The panel is native `details`, `fieldset`, `select`, checkbox and text controls with a label on each, so it works with the keyboard and with screen readers: groups open with Enter or Space, a select changes with the arrow keys, text fields commit on Enter or when you leave them, and results and refusals are announced in `role="status"` and `role="alert"` regions. A refused change (an invalid value, text a merge would hide) is explained, changes nothing, and puts the field back. "Applies to" switches the design controls between the whole presentation and the current slide, and a control shows when a slide value is "set on this slide" or "from the presentation". The panel offers only conversions that exist, shows what a conversion loses before you choose it, and lists why an unavailable one is unavailable.
 
 In React (or Svelte, or anything else) mount it into a ref and destroy it on unmount; it needs no framework runtime:
 

package/dist/blocks.js

@@ -1,5 +1,6 @@
 import { splitOpfPath, opfPathToJsonPointer, getValueAtPath, applyJsonPatch } from './index.js';
 import { firstErrorMessage, checkFormat } from "./checks.js";
+import {collectReservedPresentationIds, remapSlideTreeIds} from "./presentation-ids.js";
 const prefix=(a,b)=>a.length<=b.length&&a.every((part,i)=>part===b[i]);
 
 /** Move one complete block. The insertion index refers to the destination before removal. */
@@ -120,7 +121,9 @@ export function prepareBlockReplace(presentation,path,block) {
 /** Duplicate the entire block immediately after itself, preserving formatting and asset references. */
 export function prepareBlockDuplicate(presentation,path) {
   const {container,index,blocks}=checkedBlock(presentation,path);
-  return prepareBlockInsert(presentation,opfPathToJsonPointer(container),blocks[index],index+1);
+  const copy=structuredClone(blocks[index]);
+  remapSlideTreeIds({blocks:[copy]},new Set(collectReservedPresentationIds(presentation)));
+  return prepareBlockInsert(presentation,opfPathToJsonPointer(container),copy,index+1);
 }
 /** Delete a block and prune empty ancestor groups; a slide itself is never deleted. */
 export function prepareBlockRemove(presentation,path) {

package/dist/canvas.js

@@ -1029,11 +1029,17 @@ export function createCanvasEditor(container, options = {}) {
   try {
     renderFor();
   } catch (error) {
+    disposed = true;
+    stopDrag?.();
+    active?.rich?.destroy();
+    imageCropper?.destroy();
     unsubscribe();
     resize.disconnect();
+    win.visualViewport?.removeEventListener("resize", keepEditVisible);
     richToolbar.destroy();
     layoutHandles.destroy();
     blockControls.destroy();
+    if (frame) win.cancelAnimationFrame(frame);
     root.remove();
     throw error;
   }

package/dist/checks.js

@@ -9,7 +9,7 @@ const EDIT_CATEGORIES = Object.freeze(["format", "opf/unresolved-reference", "op
 
 /** Core's `ValidationReport` for the `format` category and the catalog reference rules: `valid`, `findings`, `counts`, `schemaValid`. */
 export function checkFormat(presentation, options = {}) {
-  return validate(presentation, { only: EDIT_CATEGORIES, ...(options.catalogs?.length ? { catalogs: options.catalogs } : {}) });
+  return validate(presentation, { only: EDIT_CATEGORIES, ...(options.catalogs !== undefined ? { catalogs: options.catalogs } : {}) });
 }
 
 /** The error-severity findings of a report: what makes it invalid. */

package/dist/data-grid.js

@@ -914,10 +914,12 @@ export function createDataGrid(container, options = {}) {
   function copyToClipboard(then) {
     const { text, rows, columns } = selectionText();
     const done = () => {
+      if (destroyed) return;
       say(`Copied ${plural(rows, "row")} by ${plural(columns, "column")} as tab-separated text.`);
       then?.();
     };
     const fallback = () => {
+      if (destroyed) return;
       const previous = doc.activeElement;
       const area = h("textarea", { "aria-hidden": "true", tabindex: -1 });
       area.style.cssText = "position:fixed;opacity:0;left:-9999px";
@@ -1045,7 +1047,20 @@ export function createDataGrid(container, options = {}) {
         // Browsers differ in firing copy for a focused cell that holds no selection, so the keys do the copy themselves.
         event.preventDefault();
         event.stopPropagation();
-        copyToClipboard(lower === "x" ? clearSelection : undefined);
+        const source = editor.snapshot(), path = target.path;
+        const edits = [];
+        if (lower === "x") {
+          const r = rect();
+          for (let u = r.top; u <= r.bottom; u += 1)
+            for (let c = r.left; c <= r.right; c += 1) {
+              const cell = cellAt(u, c);
+              if (cell && !cell.covered) edits.push({ ...addr(u, c), text: "" });
+            }
+        }
+        copyToClipboard(lower === "x" ? () => {
+          if (destroyed || editor.snapshot() !== source || !edits.length) return;
+          attempt(() => setGridCells(editor, path, edits, opts()), `${plural(edits.length, "cell")} cleared.`);
+        } : undefined);
         return;
       }
     }

package/dist/design-controls.js

@@ -45,6 +45,7 @@ import { createContentControls } from "./content-controls.js";
 import { IMAGE_EDGES, IMAGE_FITS, IMAGE_SHAPES, readImageTreatments, setImageTreatment } from "./image-options.js";
 import { applyCatalogUpdate, catalogRecordAt, checkCatalogUpdates, mergeCatalogs, moveToCustom, referenceFindings } from "./catalogs.js";
 import { describeTableCell, mergeTableCells, parseTableCellPath, readTableAlt, readTableStyle, setTableAlt, setTableCellStyle, setTableStyle, splitTableCell } from "./table-options.js";
+import { OPFEditorError } from "./index.js";
 
 /** The sections a panel can show. `selection` and `table` follow the current selection; the rest follow the deck or the current slide. */
 export const DESIGN_CONTROL_SECTIONS = Object.freeze(["look", "background", "header-footer", "brand", "layout-options", "info", "selection", "image", "table", "slide-content", "catalog"]);
@@ -117,6 +118,7 @@ export function createDesignControls(container, options = {}) {
   const state = { scope: options.scope === "slide" ? "slide" : "deck" };
   const syncs = [];
   let destroyed = false;
+  let uploadEpoch = 0;
   // After a refused change the field the person typed in is reset too, even though it still has focus.
   let restoring = false;
   // The background form is a draft until Apply; edits to it survive unrelated refreshes.
@@ -138,6 +140,10 @@ export function createDesignControls(container, options = {}) {
   };
 
   const root = h("div", { class: "opf-design-controls", "data-opf-component": "design-controls" });
+  const invalidateUpload = () => { uploadEpoch++; };
+  // Capture before the file input's own listener starts the next upload.
+  root.addEventListener("input", invalidateUpload, true);
+  root.addEventListener("change", invalidateUpload, true);
   const statusEl = h("p", { class: "opf-dc-status", role: "status", "aria-live": "polite" });
   const errorEl = h("p", { class: "opf-dc-error", role: "alert" });
 
@@ -328,9 +334,10 @@ export function createDesignControls(container, options = {}) {
 
   /**
    * Source text, file upload and alt text for one image. `apply(ref | null)` commits a typed source (null removes it);
-   * `build(ref, document)` prepares the change an upload makes, after its asset patch, in the same undo step.
+   * `captureBuild()` freezes the target and form before reading a file. Its returned
+   * builder prepares the change after the asset patch, in the same undo step.
    */
-  function imageCluster(name, label, { apply, build, help }) {
+  function imageCluster(name, label, { apply, captureBuild, help }) {
     const source = textField(`${name}-source`, `${label} source`, {
       list: true,
       placeholder: "asset:photo or https://…",
@@ -363,6 +370,18 @@ export function createDesignControls(container, options = {}) {
       const file = input.files?.[0];
       input.value = "";
       if (!file) return;
+      const epoch = ++uploadEpoch;
+      const targetKey = lastKey;
+      // A host may register assets before returning asset:id. Only assets are
+      // excluded; replacing content or changing any other source is stale.
+      const sourceSignature = () => JSON.stringify({ ...editor.presentation, assets: undefined });
+      const originalSource = sourceSignature();
+      const capturedBuild = captureBuild();
+      const build = (ref, presentation) => {
+        if (destroyed || uploadEpoch !== epoch || lastKey !== targetKey || sourceSignature() !== originalSource)
+          throw new OPFEditorError("stale-image-upload", "The upload target or form changed. Choose the image again.", {});
+        return capturedBuild(ref, presentation);
+      };
       statusEl.textContent = `Adding ${file.name}…`;
       errorEl.textContent = "";
       try {
@@ -371,6 +390,7 @@ export function createDesignControls(container, options = {}) {
         say(`${label} set to ${file.name}${change.assetId ? `, added to assets as ${change.assetId}` : ""}.${warnings} Undo restores the previous state.`);
         options.onChange?.(change);
       } catch (error) {
+        if (destroyed) return;
         complain(messageOf(error));
         sync();
       }
@@ -384,6 +404,7 @@ export function createDesignControls(container, options = {}) {
       // `key` names what the image is for (variant, zone, slide, scope): alt text typed for one target is not offered to another.
       set(ref, note = "", key = "") {
         const targetChanged = (ref ?? "") !== lastRef || key !== lastKey;
+        if (targetChanged) invalidateUpload();
         lastKey = key;
         lastRef = ref ?? "";
         source.setList(assetList());
@@ -568,7 +589,10 @@ export function createDesignControls(container, options = {}) {
     };
     const bgImage = imageCluster("bg-image", "Background image", {
       apply: (ref) => (ref === null ? setBackground(editor, null, scoped()) : setBackground(editor, imageSpec(ref), scoped())),
-      build: (ref, doc) => prepareBackground(doc, imageSpec(ref), scoped()),
+      captureBuild: () => {
+        const spec = imageSpec(undefined), target = scoped();
+        return (ref, doc) => prepareBackground(doc, { ...spec, src: ref }, target);
+      },
       help: "An asset reference, a web address or a data address. Press Enter or choose a file to apply it with the settings here.",
     });
     imagePanel.append(bgImage.wrap, fit.wrap, bgAlt.wrap, focusX.wrap, focusY.wrap, bgRecolor.wrap, bgDuoDark.wrap, bgDuoLight.wrap, overlay.wrap);
@@ -727,7 +751,10 @@ export function createDesignControls(container, options = {}) {
     });
     const image = imageCluster("hf-image", "Image", {
       apply: (ref) => setHeaderFooterZone(editor, which(), zone(), { image: ref }, scoped()),
-      build: (ref, doc) => prepareHeaderFooterZone(doc, which(), zone(), { image: ref }, scoped()),
+      captureBuild: () => {
+        const kind = which(), place = zone(), target = scoped();
+        return (ref, doc) => prepareHeaderFooterZone(doc, kind, place, { image: ref }, target);
+      },
       help: "A picture in this zone, such as a partner mark or badge: an asset reference, a web address or a data address, or an organization logo (Insert logo, below). Press Enter to apply; clear the field to remove it.",
     });
     // RR-71: a logo is the zone's image, written as a reference to the organization's logo (var:organization.logo.icon). Which artwork is drawn (light or dark) follows each slide's background.
@@ -838,9 +865,9 @@ export function createDesignControls(container, options = {}) {
         const { shape, ...rest } = logoTarget();
         return setOrganizationLogo(editor, shape, ref, rest);
       },
-      build: (ref, doc) => {
+      captureBuild: () => {
         const { shape, ...rest } = logoTarget();
-        return prepareOrganizationLogo(doc, shape, ref, rest);
+        return (ref, doc) => prepareOrganizationLogo(doc, shape, ref, rest);
       },
       help: "An asset reference, a web address or a data address for the chosen shape and background. Press Enter to apply; clear the field to remove it.",
     });
@@ -933,7 +960,10 @@ export function createDesignControls(container, options = {}) {
     });
     const watermarkSource = imageCluster("watermark", "Watermark", {
       apply: (ref) => setDesignOption(editor, "watermark", ref === null ? null : { src: ref }, scoped()),
-      build: (ref, doc) => prepareDesignOption(doc, "watermark", { src: ref }, scoped()),
+      captureBuild: () => {
+        const target = scoped();
+        return (ref, doc) => prepareDesignOption(doc, "watermark", { src: ref }, target);
+      },
     });
     // FA-13: a watermark is an image or a text stamp; the text field and the image cluster replace each other.
     const watermarkText = textField("watermark-text", "Watermark text", {
@@ -1311,7 +1341,9 @@ export function createDesignControls(container, options = {}) {
     fill.setOptions(CELL_FILLS.map(([value, label]) => ({ value, label })));
     const align = selectField("cell-align", "Cell text alignment", { empty: "Default", onChange: (value) => run(() => setTableCellStyle(editor, dynamic.tablePath, dynamic.cell, { align: value === "" ? null : value }), "Cell alignment changed.") });
     align.setOptions(["left", "center", "right"].map((value) => ({ value, label: titleCase(value) })));
-    const cellBox = h("div", { class: "opf-dc-cell" }, cellLabel, columns.wrap, rows.wrap, join.wrap, h("div", { class: "opf-dc-actions" }, merge, split), fill.wrap, align.wrap);
+    // RR-93: `bold` is a cell style field, so a number cell stays bold without rich runs and keeps its number format and alignment. Unchecking removes the field.
+    const bold = checkField("cell-bold", "Bold cell text", { onChange: (checked) => run(() => setTableCellStyle(editor, dynamic.tablePath, dynamic.cell, { bold: checked ? true : null }), checked ? "Cell text is bold." : "Cell text is no longer bold.") });
+    const cellBox = h("div", { class: "opf-dc-cell" }, cellLabel, columns.wrap, rows.wrap, join.wrap, h("div", { class: "opf-dc-actions" }, merge, split), fill.wrap, align.wrap, bold.wrap);
     // FA-27: the table's text alternative, like a chart's. It belongs to the table, so a dataset-backed table has it too.
     const alt = textField("table-alt", "Alt text", {
       help: "What the table shows: its point and the key numbers, not \"a table\". Optional, because a screen reader reads a table cell by cell. Press Enter to apply.",
@@ -1324,7 +1356,7 @@ export function createDesignControls(container, options = {}) {
     });
     const styleControls = [headerStyle.wrap, banding.wrap, borders.wrap, resetStyle, cellBox];
     body.append(summary, alt.wrap, decorative.wrap, ...styleControls);
-    dynamic.table = { details, summary, alt, decorative, styleControls, headerStyle, banding, borders, cellBox, cellLabel, columns, rows, merge, split, fill, align, join };
+    dynamic.table = { details, summary, alt, decorative, styleControls, headerStyle, banding, borders, cellBox, cellLabel, columns, rows, merge, split, fill, align, bold, join };
   }
 
   // --- sync -----------------------------------------------------------------------------------------
@@ -1415,6 +1447,7 @@ export function createDesignControls(container, options = {}) {
             const fillValue = typeof state.style.fill === "string" ? state.style.fill : "";
             tableUi.fill.set(CELL_FILLS.some(([value]) => value === fillValue) ? fillValue : fillValue ? "(custom)" : "");
             tableUi.align.set(state.style.align ?? "");
+            tableUi.bold.set(state.style.bold === true);
           }
         }
       }
@@ -1459,6 +1492,9 @@ export function createDesignControls(container, options = {}) {
     },
     destroy() {
       destroyed = true;
+      invalidateUpload();
+      root.removeEventListener("input", invalidateUpload, true);
+      root.removeEventListener("change", invalidateUpload, true);
       unsubscribe();
       root.remove();
     },

package/dist/find-replace.js

@@ -226,7 +226,10 @@ export function findMatches(presentation, query, options = {}) {
     const tokens = item.text.includes("{{") ? [...item.text.matchAll(VARIABLE_TOKEN)].map((token) => [token.index, token.index + token[0].length]) : [];
     while ((found = compiled.regex.exec(item.text))) {
       if (found[0] === "") {
-        compiled.regex.lastIndex += 1;
+        // AdvanceStringIndex in Unicode mode must skip a whole surrogate pair:
+        // exec() otherwise rewinds an index inside it to the same empty match.
+        const at = compiled.regex.lastIndex;
+        compiled.regex.lastIndex = at + (compiled.regex.unicode && item.text.codePointAt(at) > 0xFFFF ? 2 : 1);
         continue;
       }
       if (tokens.some(([from, to]) => found.index < to && found.index + found[0].length > from)) continue;

package/dist/image-crop.d.ts

@@ -55,5 +55,5 @@ export interface LoadedImage { image: HTMLImageElement; width: number; height: n
 export declare function loadImagePixels(src: string, options?: { document?: Document; signal?: AbortSignal }): Promise<LoadedImage>;
 /** Cut a rectangle out of a loaded picture at its own resolution (JPEG stays JPEG, everything else PNG). Needs a browser canvas. */
 export declare function cropImagePixels(loaded: LoadedImage, rect: Rect, options?: { mediaType?: string; maxBytes?: number; document?: Document }): Promise<CroppedPixels>;
-/** Crop a picture of the document and apply it as one undoable change. */
-export declare function applyCrop(editor: EditorSession, path: string, rect: Rect, options?: { loaded?: LoadedImage; maxBytes?: number; meta?: Record<string, unknown> }): Promise<EditorChange & { assetId: string; reference: string; width: number; height: number }>;
+/** Crop a picture as one undoable change; rejects stale document revisions and cancellation before committing. */
+export declare function applyCrop(editor: EditorSession, path: string, rect: Rect, options?: { loaded?: LoadedImage; maxBytes?: number; meta?: Record<string, unknown>; signal?: AbortSignal }): Promise<EditorChange & { assetId: string; reference: string; width: number; height: number }>;

package/dist/image-crop.js

@@ -259,17 +259,30 @@ export async function loadImagePixels(src, { document: doc = globalThis.document
   const win = doc.defaultView ?? globalThis;
   const attempt = (anonymous) => new Promise((resolve, reject) => {
     const image = new win.Image();
+    let settled = false;
+    const finish = (callback, value) => {
+      if (settled) return;
+      settled = true;
+      image.onload = image.onerror = null;
+      signal?.removeEventListener("abort", abort);
+      callback(value);
+    };
+    const abort = () => {
+      finish(reject, signal.reason ?? new win.DOMException("Image loading was cancelled.", "AbortError"));
+      image.src = "";
+    };
     if (anonymous) image.crossOrigin = "anonymous";
     image.decoding = "async";
-    image.onload = () => resolve(image);
-    image.onerror = () => reject(fail("image-unreadable", "The picture could not be loaded. If it is hosted elsewhere, upload it to the presentation first.", { src: src.slice(0, 80) }));
-    signal?.addEventListener("abort", () => { image.src = ""; }, { once: true });
-    image.src = src;
+    image.onload = () => finish(resolve, image);
+    image.onerror = () => finish(reject, fail("image-unreadable", "The picture could not be loaded. If it is hosted elsewhere, upload it to the presentation first.", { src: src.slice(0, 80) }));
+    signal?.addEventListener("abort", abort, { once: true });
+    if (signal?.aborted) abort();
+    else image.src = src;
   });
   // A picture on another site is read with CORS first (so its pixels can be cut); without it the picture still shows and
   // cropImagePixels reports why it cannot be cut.
   const hosted = !/^(?:data|blob):/.test(src);
-  const image = hosted ? await attempt(true).catch(() => attempt(false)) : await attempt(false);
+  const image = hosted ? await attempt(true).catch((error) => { if (signal?.aborted) throw error; return attempt(false); }) : await attempt(false);
   if (!image.naturalWidth || !image.naturalHeight) throw fail("image-unreadable", "The picture has no size.", {});
   return { image, width: image.naturalWidth, height: image.naturalHeight };
 }
@@ -324,12 +337,20 @@ export async function cropImagePixels(loaded, rect, { mediaType, maxBytes = DEFA
  * `{ assetId, reference, width, height }`.
  */
 export async function applyCrop(editor, path, rect, options = {}) {
-  const image = describeImage(editor.presentation, path);
+  const source = editor.snapshot();
+  const current = () => {
+    options.signal?.throwIfAborted();
+    if (editor.snapshot() !== source) throw fail("stale-image-crop", "The presentation changed while the picture was being cropped; open the current picture and crop it again.", { path });
+  };
+  current();
+  const image = describeImage(source.presentation, path);
   if (image.error) throw fail("not-croppable", image.error, { path });
-  const loaded = options.loaded ?? await loadImagePixels(image.assetSrc);
+  const loaded = options.loaded ?? await loadImagePixels(image.assetSrc, { signal: options.signal });
+  current();
   const pixels = await cropImagePixels(loaded, rect, { mediaType: image.mediaType, maxBytes: options.maxBytes });
-  // The document may have changed while the picture was encoding.
-  const prepared = prepareCrop(editor.presentation, path, pixels);
+  // Never apply old pixels to a newer document or to a cancelled crop session.
+  current();
+  const prepared = prepareCrop(source.presentation, path, pixels);
   const change = editor.applyPatch(prepared.patches, { ...options.meta, source: options.meta?.source ?? "image-crop", path, assetId: prepared.assetId });
   return { ...change, assetId: prepared.assetId, reference: prepared.reference, width: pixels.width, height: pixels.height };
 }

package/dist/image-cropper.js

@@ -143,6 +143,8 @@ export function createImageCropper(root, overlay, options) {
     const opener = doc.activeElement;
     const s = (session = {
       path,
+      source: editor.snapshot(),
+      controller: new win.AbortController(),
       opener,
       image,
       loaded: null,
@@ -210,6 +212,7 @@ export function createImageCropper(root, overlay, options) {
     const close = (result) => {
       if (session !== s) return;
       session = null;
+      s.controller.abort();
       resizeObserver.disconnect();
       layer.remove();
       if (s.scrollLock !== null) doc.documentElement.style.overflow = s.scrollLock;
@@ -447,7 +450,8 @@ export function createImageCropper(root, overlay, options) {
       applyButton.disabled = true;
       applyButton.textContent = "Applying…";
       try {
-        const changed = await applyCrop(editor, path, s.rect, { loaded: s.loaded, meta: { tool: s.tool } });
+        if (editor.snapshot() !== s.source) throw new Error("The presentation changed; close this crop and open the current picture again.");
+        const changed = await applyCrop(editor, path, s.rect, { loaded: s.loaded, signal: s.controller.signal, meta: { tool: s.tool } });
         if (session !== s) return;
         close("done");
         options.onCommit?.({ path, assetId: changed.assetId });
@@ -469,7 +473,7 @@ export function createImageCropper(root, overlay, options) {
     for (const control of controls) control.disabled = true;
     layer.setAttribute("aria-busy", "true");
     try {
-      s.loaded = await loadImagePixels(image.assetSrc, { document: doc });
+      s.loaded = await loadImagePixels(image.assetSrc, { document: doc, signal: s.controller.signal });
     } catch (error) {
       if (session !== s) return false;
       close("error");

package/dist/index.js

@@ -269,7 +269,8 @@ export function createEditorSession(input, options = {}) {
       return () => listeners.delete(listener);
     },
     get(path, fallback) {
-      return getValueAtPath(presentation, path, fallback);
+      const found = readPointer(presentation, splitOpfPath(path));
+      return found.found ? clone(found.value) : fallback;
     },
     set(path, value, meta = {}) {
       return commitPatch(createValuePatch(presentation, path, value), {

package/dist/persistence.d.ts

@@ -38,7 +38,7 @@ export interface AutosaveStatus {
   savedAt?: number;
   /** A sentence to show the user for `unavailable` and `error` (and a note on `saved`, such as "history too large to keep"). */
   message?: string;
-  error?: "quota" | "write";
+  error?: "quota" | "write" | "draft";
   /** The adapter in use: "indexedDB", "localStorage", "memory" or the host adapter's name. */
   storage?: string;
   offer?: RestoreOffer;
@@ -63,8 +63,8 @@ export interface PersistenceOptions {
   onRestorePrompt?: (offer: RestoreOffer, actions: { restore(): Promise<boolean>; discard(): Promise<boolean> }) => RestoreChoice | Promise<RestoreChoice>;
   /** Called on every status change, for an indicator. */
   onStatus?: (status: AutosaveStatus) => void;
-  /** Called before every write and before the page unloads, so the host can commit a draft (text being edited on the canvas). */
-  beforeFlush?: () => void;
+  /** Called synchronously before each explicit, debounced or lifecycle flush, even before any session edit. Commit the active draft; returning false or throwing refuses the write and reports a draft error. */
+  beforeFlush?: () => boolean | void;
   /** Warn before the page closes while the document is `dirty` (default true). */
   warnOnUnload?: boolean;
   /** For tests and frames: the window that receives `beforeunload`, `pagehide` and `visibilitychange` (default the global window; null for none). */

package/dist/persistence.js

@@ -167,6 +167,8 @@ export function createPersistence(editor, options = {}) {
   let chain = Promise.resolve();
   let lastWritten = "";
   let destroyed = false;
+  let preparingFlush = false;
+  let flushRefused = false;
   let status = { state: "starting", available: false, dirty: false };
   const setStatus = (patch) => {
     status = { ...status, ...patch, dirty: isDirty() };
@@ -227,6 +229,24 @@ export function createPersistence(editor, options = {}) {
   function flush() {
     clearTimeout(timer);
     firstDirtyAt = 0;
+    if (destroyed) return Promise.resolve(false);
+    // Commit synchronously, including a draft in an otherwise untouched session. The lifecycle
+    // warning below must see that edit before it decides whether leaving would lose work.
+    // A commit emits a change; clear its debounce again and avoid recursive host flush hooks.
+    if (preparingFlush) return chain;
+    preparingFlush = true;
+    try {
+      if (options.beforeFlush?.() === false) throw new Error("Commit or cancel the active draft first.");
+      flushRefused = false;
+    } catch (error) {
+      flushRefused = true;
+      setStatus({ state: "error", error: "draft", message: `Autosave could not commit the active draft (${String(error?.message ?? error)}). Keep this page open to recover your work.` });
+      return Promise.resolve(false);
+    } finally {
+      preparingFlush = false;
+      clearTimeout(timer);
+      firstDirtyAt = 0;
+    }
     if (!touched) return chain.then(() => true);
     chain = chain.then(writeRecord, writeRecord);
     return chain;
@@ -342,15 +362,14 @@ export function createPersistence(editor, options = {}) {
     schedule();
   });
   const beforeUnload = (event) => {
-    try { options.beforeFlush?.(); } catch { /* an uncommitted draft that cannot commit must not block leaving */ }
     // Best effort: start the final write; a browser finishes an IndexedDB transaction that began before the page went away.
-    if (touched) void flush();
-    if (options.warnOnUnload === false || !isDirty()) return undefined;
+    void flush();
+    if (options.warnOnUnload === false || (!isDirty() && !flushRefused)) return undefined;
     event.preventDefault();
     event.returnValue = "";
     return "";
   };
-  const pageHide = () => { try { options.beforeFlush?.(); } catch { /* see above */ } if (touched) void flush(); };
+  const pageHide = () => { void flush(); };
   const visibility = () => { if (win?.document?.visibilityState === "hidden") pageHide(); };
   win?.addEventListener?.("beforeunload", beforeUnload);
   win?.addEventListener?.("pagehide", pageHide);

package/dist/slides.d.ts

@@ -1,3 +1,4 @@
+import type { Catalog } from "@openpresentation/opf";
 import type { EditorChange, EditorSession, JsonPatchOperation } from "./index.js";
 
 /** One section of the deck: a maximal run of consecutive slides sharing a `section` label (or none). */
@@ -57,8 +58,11 @@ export interface AddSlideOptions {
   section?: string | null;
   /** A ready-made slide to insert instead of a blank one. */
   slide?: Record<string, unknown>;
-  catalogs?: Record<string, unknown>;
+  /** Host catalogs, as for DimensionSwitchOptions. */
+  catalogs?: readonly Catalog[];
   record?: Record<string, unknown>;
+  /** Catalog source of record, as for DimensionSwitchOptions. */
+  recordSource?: string;
 }
 
 export declare function listSections(presentation: unknown): SlideSection[];

package/dist/table-options.d.ts

@@ -62,7 +62,7 @@ export declare function describeTableCell(table: unknown, cell: TableCellAddress
 /** Merge `span.colSpan` x `span.rowSpan` cells from `cell`. `join` keeps the text of covered cells by joining it into the anchor; without it, covered text refuses with `merge-would-lose-content`. */
 export declare function prepareTableMerge(presentation: unknown, tablePath: string, cell: TableCellAddress, span: { colSpan?: number; rowSpan?: number }, options?: { join?: boolean }): PreparedTableChange;
 export declare function prepareTableSplit(presentation: unknown, tablePath: string, cell: TableCellAddress): PreparedTableChange;
-/** Merge style fields into the cells' styles (null removes a field, `style: null` clears). */
+/** Merge style fields into the cells' styles (null removes a field, `style: null` clears). Fields include `fill`, `color`, `align`, `verticalAlign`, `padding`, `borders` and `bold` (boolean; keeps a numeric cell's number format and alignment, which rich runs would drop). */
 export declare function prepareTableCellStyle(presentation: unknown, tablePath: string, cells: TableCellAddress | TableCellAddress[], style: Record<string, unknown> | null): PreparedTableChange;
 /** Apply `{ header, banding, borders }` (missing fields mean theme/false) or a named preset: sets the header fill, banded-row fill and borders of every cell and clears them elsewhere; `theme` removes a previous style. */
 export declare function prepareTableStyle(presentation: unknown, tablePath: string, preset: keyof typeof TABLE_STYLE_PRESETS | Partial<TableStyle>): PreparedTableChange;

package/dist/table-options.js

@@ -256,14 +256,16 @@ export function prepareTableSplit(presentation, tablePath, cell) {
 
 /**
  * Compute the patch that changes the style of the cells. `style` fields merge into each cell's style
- * (fill, color, align, verticalAlign, padding, borders); a `null` field removes it, and `style: null`
- * clears the whole style. Covered (merged) positions are skipped. A cell left with no style or spans
+ * (fill, color, bold, align, verticalAlign, padding, borders); a `null` field removes it, and `style: null`
+ * clears the whole style. `bold` is a boolean (RR-93): it bolds the whole cell and, unlike rich runs, keeps a
+ * numeric column's number `format` and alignment. Covered (merged) positions are skipped. A cell left with no style or spans
  * becomes a plain value again. Style is appearance only: values and spans are untouched.
  */
 export function prepareTableCellStyle(presentation, tablePath, cells, style) {
   const list = Array.isArray(cells) ? cells : [cells];
   if (!list.length) throw fail("table-cell-not-found", "Choose at least one cell.", {});
   if (style !== null && !isObject(style)) throw fail("invalid-table-style", "A cell style is an object, or null to clear it.", { style });
+  if (style && Object.hasOwn(style, "bold") && style.bold !== null && style.bold !== undefined && typeof style.bold !== "boolean") throw fail("invalid-table-style", "Cell bold is true or false (null removes it).", { bold: style.bold });
   return transaction(presentation, tablePath, (table) => {
     let skipped = 0;
     for (const cell of list) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-editor",
-  "version": "0.20.3",
+  "version": "0.22.0",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",
@@ -266,11 +266,11 @@
     "@codemirror/state": "6.7.6",
     "@codemirror/view": "6.43.14",
     "@lezer/highlight": "1.2.5",
-    "@openpresentation/opf": "^0.20.2",
+    "@openpresentation/opf": "^0.22.1",
     "jsonc-parser": "3.3.1"
   },
   "peerDependencies": {
-    "@openpresentation/opf-render": "^0.20.2"
+    "@openpresentation/opf-render": "^0.22.2"
   },
   "peerDependenciesMeta": {
     "@openpresentation/opf-render": {
@@ -323,8 +323,8 @@
     "@expo-google-fonts/roboto-mono": "0.4.2",
     "@expo-google-fonts/stix-two-math": "0.4.0",
     "@expo-google-fonts/tinos": "0.4.2",
-    "@openpresentation/opf-pptx": "^0.20.3",
-    "@openpresentation/opf-render": "^0.20.2",
+    "@openpresentation/opf-pptx": "^0.22.0",
+    "@openpresentation/opf-render": "^0.22.2",
     "@resvg/resvg-js": "2.6.2",
     "axe-core": "4.14.0",
     "esbuild": "0.28.2",