@openpresentation/opf-editor 0.7.1 → 0.8.0

package/README.md

@@ -2,6 +2,8 @@
 
 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.8.0 requires `@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.
+
 Version 0.7.0 and this checkout require Node 24 (`24.x`). Use `.nvmrc` for local development. Earlier published versions retain their original engine declarations. Browser entrypoints remain browser-safe; native application compatibility is verified separately.
 
 Version 0.7.0 forwards effective title alignment and shared outline placement options through composition and explicit pagination. Use the same `textMeasurement` and `textRasterPadding` in canvas rendering and export. Accepted rich-text trace origins support selection, caret placement and undo. See the [source contract and limits](https://github.com/OpenPresentation/opf/blob/f94125a1ff95bf0974a055fe1c081d348dad54f2/docs/plans/text-placement.md); native PowerPoint fidelity remains separate.
@@ -210,7 +212,7 @@ This repo does not require an npm automation token when Trusted Publishing is co
 
 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.7.1 requires `@openpresentation/opf@^0.10.1`. The optional renderer peer requires `@openpresentation/opf-render@^0.8.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.
+Version 0.8.0 requires `@openpresentation/opf@^0.11.0`. The optional renderer peer requires `@openpresentation/opf-render@^0.9.0`. Coordinated playground export uses `@openpresentation/opf-pptx@^0.9.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.
 
 ## Local interactive demo
 
@@ -249,7 +251,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, 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 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.
 
 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.
 

package/dist/color-authoring.js

@@ -0,0 +1,20 @@
+const HEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+
+const SCHEME_SLOTS = new Set([
+  "accent1", "accent2", "accent3", "accent4", "accent5", "accent6",
+  "dark1", "dark2", "light1", "light2", "hyperlink", "followedHyperlink",
+]);
+
+const ROLE_KEYS = new Set([
+  "primary", "secondary", "accent", "background", "surface", "text", "textSecondary",
+]);
+
+/** Whether a toolbar-authored text color matches documented ColorRef / TextRun forms. */
+export function isAuthoringColorRef(value) {
+  if (value === null || value === undefined || value === "") return true;
+  if (typeof value !== "string") return false;
+  const ref = value.trim();
+  if (ref.startsWith("#")) return HEX.test(ref);
+  if (ref.startsWith("var:")) return /^var:[a-z][a-z0-9-]*$/.test(ref);
+  return SCHEME_SLOTS.has(ref) || ROLE_KEYS.has(ref);
+}

package/dist/index.d.ts

@@ -26,6 +26,7 @@ export type JsonPatchOperation =
 export interface OPFValidationSummary {
   valid: boolean;
   errors: unknown[];
+  warnings: unknown[];
   result: unknown;
 }
 

package/dist/index.js

@@ -1,4 +1,5 @@
 import { paginateSlide } from "@openpresentation/opf/pagination";
+import { collectReservedPresentationIds } from "./presentation-ids.js";
 import { composeSlide, resolveCanvasDimensions, resolveFontFamilies } from "@openpresentation/opf/composition";
 import {
   catalogKinds,
@@ -142,6 +143,7 @@ export function validateOpfDocument(document, validator = validatePresentation)
   return {
     valid,
     errors: Array.isArray(result?.errors) ? result.errors : [],
+    warnings: Array.isArray(result?.warnings) ? result.warnings : [],
     result
   };
 }
@@ -243,7 +245,10 @@ export function createEditorSession(input, options = {}) {
     },
     paginateSlide(slideIndex, options = {}, meta = {}) {
       const resolved = resolveCompositionOptions(document, slideIndex, options);
-      const pagination = paginateSlide(document.slides[slideIndex], { ...resolved, reservedIds: document.slides.map(slide => slide.id).filter(Boolean) });
+      const pagination = paginateSlide(document.slides[slideIndex], {
+        ...resolved,
+        reservedIds: collectReservedPresentationIds(document),
+      });
       // Pagination can persist a readability policy without adding a page. Commit
       // that change too, so preview/export use the same minimum that was evaluated.
       if (pagination.slides.length === 1 && jsonEqual(pagination.slides[0], document.slides[slideIndex])) return { change: null, pagination };

package/dist/presentation-ids.js

@@ -0,0 +1,68 @@
+/** Shared slide and content-payload id collection (matches @openpresentation/opf pagination). */
+
+const promotedRegionKeys = [
+  "left", "center", "right", "left+center", "center+right", "left+center+right",
+  "top", "middle", "bottom", "top+middle", "middle+bottom", "top+middle+bottom",
+  "top:left", "top:center", "top:right", "top:left+center", "top:center+right", "top:left+center+right",
+  "middle:left", "middle:center", "middle:right", "middle:left+center", "middle:center+right", "middle:left+center+right",
+  "bottom:left", "bottom:center", "bottom:right", "bottom:left+center", "bottom:center+right", "bottom:left+center+right",
+  "top+middle:left", "top+middle:center", "top+middle:right", "top+middle:left+center", "top+middle:center+right", "top+middle:left+center+right",
+  "middle+bottom:left", "middle+bottom:center", "middle+bottom:right", "middle+bottom:left+center", "middle+bottom:center+right", "middle+bottom:left+center+right",
+  "top+middle+bottom:left", "top+middle+bottom:center", "top+middle+bottom:right", "top+middle+bottom:left+center", "top+middle+bottom:center+right", "top+middle+bottom:left+center+right",
+];
+
+const MAX_COMPOSITION_DEPTH = 8;
+
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+export function visitContentPayloads(slide, slidePath, visit) {
+  const walk = (payload, path, depth, ancestors) => {
+    visit(payload, path);
+    if (!Array.isArray(payload.blocks) || depth >= MAX_COMPOSITION_DEPTH || ancestors.includes(payload)) return;
+    const nested = [...ancestors, payload];
+    payload.blocks.forEach((block, index) => {
+      if (isRecord(block)) walk(block, path ? `${path}.blocks.${index}` : `blocks.${index}`, depth + 1, nested);
+    });
+  };
+  if (Array.isArray(slide?.blocks)) {
+    slide.blocks.forEach((block, index) => {
+      if (isRecord(block)) walk(block, slidePath ? `${slidePath}.blocks.${index}` : `blocks.${index}`, 0, []);
+    });
+  }
+  for (const key of promotedRegionKeys) {
+    const region = slide?.[key];
+    if (isRecord(region)) walk(region, slidePath ? `${slidePath}.${key}` : key, 0, []);
+  }
+}
+
+export function slideIds(slide) {
+  const ids = typeof slide?.id === "string" ? [slide.id] : [];
+  if (isRecord(slide)) {
+    visitContentPayloads(slide, "", (payload) => {
+      if (typeof payload.id === "string") ids.push(payload.id);
+    });
+  }
+  return ids;
+}
+
+export function collectReservedPresentationIds(document) {
+  const ids = [];
+  for (const slide of document.slides ?? []) ids.push(...slideIds(slide));
+  return ids.filter(Boolean);
+}
+
+function remapNodeId(node, ids) {
+  if (typeof node.id !== "string") return;
+  const base = node.id;
+  let suffix = 2;
+  while (ids.has(node.id)) node.id = `${base}-${suffix++}`;
+  ids.add(node.id);
+}
+
+/** Remap slide and payload ids when inserting slides (shared document namespace). */
+export function remapSlideTreeIds(slide, ids) {
+  remapNodeId(slide, ids);
+  visitContentPayloads(slide, "", (payload) => remapNodeId(payload, ids));
+}

package/dist/rich-text-toolbar.js

@@ -1,4 +1,5 @@
 import {richTextContent, formatRichTextRange, replaceRichTextRange} from './rich-text.js';
+import { isAuthoringColorRef } from './color-authoring.js';
 
 /** Native SVG selection stays on the exact rendered glyphs; no HTML reflow. */
 export function createRichTextToolbar(root, {editor, report, beforeChange, onProperties, onTyping, validateChange, onChange}) {
@@ -80,7 +81,7 @@ export function createRichTextToolbar(root, {editor, report, beforeChange, onPro
     toolbar.append(input);return input;
   }
   const color=field('Text color');
-  color.onchange=()=>{try {if(color.value&&!/^#(?:[\da-f]{3}|[\da-f]{6}|[\da-f]{8})$/i.test(color.value))throw new Error('Use a hex text color, such as #2563eb.');apply({color:color.value||null});}catch(error){report(error);}};
+  color.onchange=()=>{try {if(color.value&&!isAuthoringColorRef(color.value))throw new Error('Use a hex color, scheme slot or role, or var:<id> (for example #2563eb, accent2, text, or var:risk).');apply({color:color.value||null});}catch(error){report(error);}};
   const size=field('Font size (pt)','number');size.min='0.1';size.step='0.5';size.style.width='80px';
   size.onchange=()=>{try{apply({fontSize:size.value?Number(size.value):null});}catch(error){report(error);}};
   const family=field('Font family');family.onchange=()=>{try{apply({fontFamily:family.value||null});}catch(error){report(error);}};

package/dist/schema-inspector.js

@@ -17,8 +17,10 @@ export function createSchemaInspector(container, {editor,path='',onDraft,onCommi
   function check(){
     const validation=validateOpfDocument(draft);
     apply.disabled=!dirty||!validation.valid;
-    status.textContent=dirty?'Draft changes · apply to save':'No pending changes';
-    showError(validation.valid?'':validation.errors.slice(0,3).map(error=>`${error.path||'/'}: ${error.message}`).join('\n'));
+    const warningNote=validation.warnings?.length?` · ${validation.warnings.length} warning${validation.warnings.length===1?'':'s'}`:'';
+    status.textContent=dirty?`Draft changes · apply to save${warningNote}`:`No pending changes${warningNote}`;
+    const issues=[...(validation.valid?[]:validation.errors.slice(0,3).map(error=>`${error.path||'/'}: ${error.message}`)),...(validation.warnings?.slice(0,2).map(warning=>`${warning.path||'/'}: ${warning.message}`)??[])];
+    showError(issues.join('\n'));
     if(validation.valid)try{onDraft?.({document:structuredClone(draft),path:selected,dirty});}catch(error){showError(`Preview: ${error.message}`);onError?.(error);}
   }
   function mutate(operations,redraw=true){draft=applyJsonPatch(draft,operations);dirty=JSON.stringify(draft)!==base;if(redraw)render();check();}

package/dist/transfer.js

@@ -5,6 +5,7 @@ import {
   validateOpfDocument,
 } from "./index.js";
 import { catalogs } from "@openpresentation/opf";
+import { collectReservedPresentationIds, remapSlideTreeIds } from "./presentation-ids.js";
 export const MAX_OPF_BYTES = 20 * 1024 * 1024;
 const clone = (value) => structuredClone(value);
 export function assertOpf(document) {
@@ -241,14 +242,8 @@ export function prepareOpfImport(
           ? `asset:${assetMap.get(asset.slice(6))}`
           : asset;
   }
-  const ids = new Set(document.slides.map((slide) => slide.id).filter(Boolean));
-  for (const slide of rewritten.slides)
-    if (slide.id) {
-      const base = slide.id;
-      let n = 2;
-      while (ids.has(slide.id)) slide.id = `${base}-${n++}`;
-      ids.add(slide.id);
-    }
+  const ids = new Set(collectReservedPresentationIds(document));
+  for (const slide of rewritten.slides) remapSlideTreeIds(slide, ids);
   const index = Math.max(0, Math.min(document.slides.length, slideIndex + 1));
   document.slides.splice(index, 0, ...rewritten.slides);
   assertOpf(document);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-editor",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",
@@ -83,8 +83,8 @@
   "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/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 src/text-input.js && node --check src/rich-text.js && node --check src/rich-text-input.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",
-    "test": "npm run build && 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/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",
+    "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/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 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",
+    "test": "npm run build && 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/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",
     "validate": "node scripts/validate-package.mjs",
     "test:packed": "node test/packed-install.mjs",
     "prepack": "npm run build",
@@ -106,11 +106,11 @@
     "@codemirror/state": "6.7.4",
     "@codemirror/view": "6.43.11",
     "@lezer/highlight": "1.2.3",
-    "@openpresentation/opf": "^0.10.1",
+    "@openpresentation/opf": "^0.11.0",
     "jsonc-parser": "3.3.1"
   },
   "peerDependencies": {
-    "@openpresentation/opf-render": "^0.8.1"
+    "@openpresentation/opf-render": "^0.9.0"
   },
   "peerDependenciesMeta": {
     "@openpresentation/opf-render": {
@@ -118,8 +118,8 @@
     }
   },
   "devDependencies": {
-    "@openpresentation/opf-pptx": "0.8.1",
-    "@openpresentation/opf-render": "0.8.1",
+    "@openpresentation/opf-pptx": "^0.9.0",
+    "@openpresentation/opf-render": "^0.9.0",
     "esbuild": "0.28.2",
     "playwright": "1.63.0"
   }