@openpresentation/opf-editor 0.7.0 → 0.8.0

package/README.md

@@ -1,5 +1,9 @@
 # OPF Editor
 
+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.
@@ -30,7 +34,9 @@ The host owns the source draft, OPF validation, slide preview, persistence and s
 
 The control provides indentation, paired quotes/brackets, folding shortcuts, search, undo/redo, JSON syntax diagnostics and explicit formatting (`Cmd/Ctrl+Shift+F`). Enter at the end of a nonempty string array item supplies indentation, quotes and commas. Other Enter positions use ordinary JSON indentation. Source offsets are UTF-16 in the original authored string. Existing CRLF, CR and LF spellings survive ordinary edits and undo; new typed lines use the first existing separator. Paste retains the text delivered by the browser clipboard event. Explicit formatting deliberately standardizes whitespace, preserving JSON values and numeric lexemes.
 
-Click a categorical property/value or press `Ctrl+Space`, `Cmd+Space` or `Alt+Down` to open its choices. Document catalog records override already-loaded records, which override built-ins; the actual schema supplies enums and booleans. Prose and extension fields do not gain menus just because their keys resemble schema fields. External catalog URLs are not fetched. `setCatalogs` replaces the host's loaded context and closes stale choices. Supply `onOptions(left?, top?)` to retain an existing menu UI; the host can use the pure `/json-options` helpers, checking that `context.source` still matches before replacing its token with `control.api.replace`.
+Click a categorical property/value or press `Ctrl+Space`, `Cmd+Space` or `Alt+Down` to open its choices. Document catalog records override already-loaded records, which override built-ins; the actual schema supplies enums and booleans. Prose and extension fields do not gain menus just because their keys resemble schema fields. External catalog URLs are not fetched. `setCatalogs` replaces the host's loaded context and closes stale choices. Supply `onOptions(left?, top?)` to retain an existing menu UI.
+
+In version 0.7.1, layout choices add blank payloads for missing declared placeholders, preserving existing content. Repeated slots use separate blocks; subtitle slots use `subtitle`, and metric slots use `{ "metric": { "value": "", "label": "" } }`. Charts receive the smallest valid data scaffold rather than invented numeric values. Existing positioned content stays in its regions; additional body slots append inside the last region. Non-layout options still change only their value. Custom menus must apply the full source returned by `replaceFieldOption`, or use `fieldOptionEdit(context, value)` and pass its `from`, `to`, and `insert` to `control.api.replace` as one undoable edit. Always check that `context.source` still matches the editor first. Version 0.7.0 only changed the selected token. Version 0.7.1 requires core 0.10.1 for metric, quote and timeline placeholder contracts.
 
 Run `npm run test:json` and `npm run test:json-browser` for the focused model and offline browser checks. The browser runner also accepts a report path followed by a clean installed consumer directory. These checks cover the JSON control; renderer, native PowerPoint and production adoption remain separate acceptance steps.
 
@@ -206,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.0 requires `@openpresentation/opf@^0.10.0`. The optional renderer peer requires `@openpresentation/opf-render@^0.8.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.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
 
@@ -245,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/canvas.js

@@ -136,12 +136,13 @@ export function createCanvasEditor(container, options = {}) {
       if (
         seen.has(path) ||
         node.getAttribute('data-opf-generated') === 'true' ||
+        node.closest('[data-opf-furniture-generated="true"]') ||
         (node.hasAttribute('data-opf-code-container') && typeof value === 'string') ||
         (node.hasAttribute('data-opf-metric-container') && ['string','number'].includes(typeof value)) ||
         (!item && !node.matches("g") && !node.matches("image")) ||
         value === undefined ||
         path === `slides.${slideIndex}` ||
-        path.includes(".design.")
+        (path.includes(".design.")&&!node.closest('[data-opf-furniture-editable="true"]'))
       )
         continue;
       // Prefer the containing group over its duplicate text/shape trace attributes.
@@ -265,7 +266,8 @@ export function createCanvasEditor(container, options = {}) {
     const metricLayout=geometry.items.find(item=>item.metricLayout?.parts.some(part=>part.path===active.path))?.metricLayout;
     const metricPart=metricLayout?.parts.find(part=>part.path===active.path);
     const timelinePart=geometry.items.find(item=>item.timelineLayout?.parts.some(part=>part.path===active.path))?.timelineLayout?.parts.find(part=>part.path===active.path);
-    const internalPart=metricPart??timelinePart;
+    const furniturePart=geometry.furniture?.parts.find(part=>part.type==='text'&&part.path===active.path);
+    const internalPart=metricPart??timelinePart??furniturePart;
     const allText = target.querySelectorAll("text");
     const lineHeight = internalPart?.fit?.lineHeight ?? (
       allText.length > 1
@@ -294,7 +296,7 @@ export function createCanvasEditor(container, options = {}) {
       lineHeight: `${lineHeight * scale}px`,
       color: visibleText ? font.fill : "transparent",
       caretColor: font.fill,
-      textAlign: timelinePart?.alignment ?? metricLayout?.alignment ?? (anchor === "middle" ? "center" : anchor === "end" ? "right" : "left"),
+      textAlign: furniturePart?.alignment ?? timelinePart?.alignment ?? metricLayout?.alignment ?? (anchor === "middle" ? "center" : anchor === "end" ? "right" : "left"),
       width: `${width * scale}px`,
       height: `${Math.max(lineHeight, allText.length * lineHeight) * scale + 2}px`,
       minHeight: "0",
@@ -335,6 +337,7 @@ export function createCanvasEditor(container, options = {}) {
       const isCode=text.hasAttribute('data-opf-code-role');
       const isMetric=text.hasAttribute('data-opf-metric-role');
       const isTimeline=!!text.closest('[data-opf-timeline-role]');
+      const isFurniture=!!text.closest('[data-opf-furniture-editable="true"]');
       input.spellcheck = !isCode;
       input.style.cssText =
         "position:absolute;pointer-events:auto;resize:none;border:0;outline:1px solid #8975d9;outline-offset:4px;margin:0;padding:0;background:transparent;overflow:hidden;min-height:0;box-shadow:none;border-radius:0;white-space:pre-wrap;overflow-wrap:break-word;box-sizing:border-box;z-index:2";
@@ -352,7 +355,7 @@ export function createCanvasEditor(container, options = {}) {
       overlay.append(input);
       if(isCode){input.style.background='#111827';input.style.tabSize='4';input.style.overflow='auto';}
       if(isMetric){input.style.tabSize='4';input.style.overflow='auto';}
-      if(isTimeline)input.style.tabSize='4';
+      if(isTimeline||isFurniture)input.style.tabSize='4';
       // Only offer rich text where the canonical schema accepts TextRun[].
       if (typeof value === "string") {
         try {

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,
@@ -19,7 +20,7 @@ function resolveCompositionOptions(document, slideIndex, options = {}) {
       const reference = slide.design?.fontScheme ?? document.design?.fontScheme ?? theme?.fontScheme ?? "roboto";
       const id = typeof reference === "string" ? reference : reference.id;
       const fontScheme = {...(document.catalogs?.fontSchemes?.records?.find(record=>record.id===id) ?? bundledCatalogs.fontSchemes.find(record=>record.id===id)),...(typeof reference === "object" ? reference : {})};
-      return { ...resolveCanvasDimensions(slide.design?.dimensions ?? document.design?.dimensions ?? theme?.dimensions), fonts:resolveFontFamilies(fontScheme), contentAlignment:slide.design?.contentAlignment??document.design?.contentAlignment, titleAlignment:slide.design?.titleAlignment??document.design?.titleAlignment, contentBox:slide.design?.contentBox??document.design?.contentBox, ...options, layout, slideIndex };
+      return { ...resolveCanvasDimensions(slide.design?.dimensions ?? document.design?.dimensions ?? theme?.dimensions), fonts:resolveFontFamilies(fontScheme), contentAlignment:slide.design?.contentAlignment??document.design?.contentAlignment, titleAlignment:slide.design?.titleAlignment??document.design?.titleAlignment, contentBox:slide.design?.contentBox??document.design?.contentBox, presentation:document, ...options, layout, slideIndex };
 }
 
 export const packageName = "@openpresentation/opf-editor";
@@ -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/json-menu.js

@@ -1,4 +1,4 @@
-import {getJsonFieldContext,replaceFieldOption} from './json-options.js';
+import {getJsonFieldContext,fieldOptionEdit} from './json-options.js';
 let nextMenuId=0;
 
 /** Optional DOM menu; hosts may provide their own onOptions renderer instead. */
@@ -35,7 +35,7 @@ export function mountJsonFieldMenu(parent,api,catalogs,left,top,onClose){
   function resize(){close();}
   function choose(option){
     if(api.getValue()!==source){close();return;}
-    try{replaceFieldOption(context,option.value);api.replace(context.offset,context.offset+context.length,JSON.stringify(option.value));close();api.focus();}
+    try{const edit=fieldOptionEdit(context,option.value);api.replace(edit.from,edit.to,edit.insert);close();api.focus();}
     catch(cause){error.hidden=false;error.textContent=cause.message;}
   }
   function highlight(){

package/dist/json-options.d.ts

@@ -13,6 +13,8 @@ export interface JsonFieldOption {
   layoutGroup?: 'Current layout' | 'Same placeholders' | 'Compatible placeholders' | 'Different counts' | 'Other layouts' | 'Unspecified placeholders';
   /** Declared placeholder types and counts, not a rendering guarantee. */
   placeholders?: string;
+  /** Declared kinds in layout order, used to create missing blank content. */
+  placeholderTypes?: string[];
   related?: boolean;
 }
 export interface JsonFieldContext {
@@ -29,5 +31,7 @@ export interface JsonFieldContext {
 }
 /** Null for invalid JSON or a field with no categorical choices. */
 export declare function getJsonFieldContext(source: string, position: number, loadedCatalogs?: JsonCatalogContext): JsonFieldContext | null;
-/** Replace only the token. Hosts must reject a context whose source is stale. */
+/** Replace the token and add missing layout payloads. Hosts must reject stale sources. */
 export declare function replaceFieldOption(context: JsonFieldContext, value: JsonOptionValue): string;
+/** Minimal single replacement for atomic source-editor undo. */
+export declare function fieldOptionEdit(context: JsonFieldContext, value: JsonOptionValue): {from:number;to:number;insert:string};

package/dist/json-options.js

@@ -1,7 +1,8 @@
 import { catalogKinds, catalogSchemaNames, schemas, validateCatalogRecord, validatePresentation } from "@openpresentation/opf";
 import { getCatalogOptions } from "./index.js";
 import { schemaAtPath, schemaVariants } from "./schema.js";
-import { findNodeAtOffset, getNodePath, parseTree } from "jsonc-parser";
+import { applyEdits, findNodeAtLocation, findNodeAtOffset, getNodePath, modify, parseTree } from "jsonc-parser";
+import { populateLayoutPlaceholders } from "./layout-placeholders.js";
 function catalogFor(description) {
     return catalogKinds.find(kind => description.includes(`catalogs.${kind}`)
         || new RegExp(`\\b${kind}['’]? catalog`).test(description));
@@ -18,8 +19,8 @@ function placeholderSummary(types) {
         return "Placeholders not specified";
     if (!types.length)
         return "No placeholders";
-    const labels = { title: "Title", subtitle: "Subtitle", text: "Text", list: "List", picture: "Image", chart: "Chart", table: "Table", code: "Code", media: "Media" };
-    const order = ["title", "subtitle", "text", "list", "picture", "chart", "table", "code", "media"];
+    const labels = { title: "Title", subtitle: "Subtitle", text: "Text", metric: "Metric", list: "List", picture: "Image", chart: "Chart", table: "Table", code: "Code", media: "Video", quote: "Quote", timeline: "Timeline", tag: "Tag", diagram: "Image" };
+    const order = ["title", "subtitle", "text", "metric", "list", "picture", "chart", "table", "code", "media", "quote", "timeline", "tag", "diagram"];
     return [...new Set(types)].sort((a, b) => order.indexOf(a) - order.indexOf(b)).map(type => {
         const count = types.filter(value => value === type).length;
         return `${labels[type] ?? type}${count > 1 ? ` × ${count}` : ""}`;
@@ -45,6 +46,7 @@ function describeOptions(choices, records, current, catalog) {
         if (catalog !== "layouts")
             continue;
         const types = layoutTypes(option.value === current ? currentRecord : records.get(String(option.value)));
+        option.placeholderTypes = records.get(String(option.value))?.placeholders?.map(placeholder => placeholder.type);
         option.placeholders = placeholderSummary(types);
         const same = types && currentTypes && signature(types) === signature(currentTypes);
         const equivalent = types && currentTypes && signature(compatible(types)) === signature(compatible(currentTypes));
@@ -145,12 +147,47 @@ export function getJsonFieldContext(source, position, loadedCatalogs = {}) {
 export function replaceFieldOption(context, value) {
     if (!context.options.some(option => option.value === value))
         throw new Error("This choice is no longer available.");
-    const next = context.source.slice(0, context.offset) + JSON.stringify(value) + context.source.slice(context.offset + context.length);
+    let next = context.source.slice(0, context.offset) + JSON.stringify(value) + context.source.slice(context.offset + context.length);
     const document = JSON.parse(next);
     if (context.path.reduce((current, key) => current?.[key], document) !== value)
         throw new Error("This field has a duplicate key. Resolve it in the JSON before choosing an option.");
-    const result = validatePresentation(document);
+    const types = context.options.find(option => option.value === value).placeholderTypes;
+    if (value !== context.value && types && context.catalog === 'layouts' && context.path.length === 3
+        && context.path[0] === 'slides' && context.path[2] === 'layout' && validatePresentation(document).valid) {
+        const populated = populateLayoutPlaceholders(document, context.path[1], types);
+        next = updateSource(next, document, populated);
+    }
+    const result = validatePresentation(JSON.parse(next));
     if (!result.valid && validatePresentation(JSON.parse(context.source)).valid)
         throw new Error(result.errors[0]?.message ?? "This option is not valid here.");
     return next;
 }
+
+// Keep existing scalar spellings and unrelated source bytes when adding slots.
+function updateSource(source, before, after) {
+    const indent = source.match(/^[\t ]+(?=\S)/m)?.[0] ?? '  ';
+    const formattingOptions = {insertSpaces: !indent.includes('\t'), tabSize: indent.length, eol: source.includes('\r\n') ? '\r\n' : '\n'};
+    function visit(a, b, path) {
+        if (JSON.stringify(a) === JSON.stringify(b)) return;
+        if (a && b && typeof a === 'object' && typeof b === 'object' && !Array.isArray(a) && !Array.isArray(b)) {
+            for (const key of new Set([...Object.keys(a), ...Object.keys(b)])) visit(a[key], b[key], [...path, key]);
+        } else if (Array.isArray(a) && Array.isArray(b) && a.length === b.length) {
+            b.forEach((value, index) => visit(a[index], value, [...path, index]));
+        } else {
+            const node = findNodeAtLocation(parseTree(source), path);
+            if (node && b !== undefined) source = source.slice(0, node.offset) + JSON.stringify(b) + source.slice(node.offset + node.length);
+            else source = applyEdits(source, modify(source, path, b, {formattingOptions}));
+        }
+    }
+    visit(before, after, []);
+    return source;
+}
+
+/** One source edit so layout changes and new slots share one undo step. */
+export function fieldOptionEdit(context, value) {
+    const next = replaceFieldOption(context, value), source = context.source;
+    let from = 0, to = source.length, end = next.length;
+    while (from < to && from < end && source[from] === next[from]) from++;
+    while (to > from && end > from && source[to - 1] === next[end - 1]) { to--; end--; }
+    return {from, to, insert: next.slice(from, end)};
+}

package/dist/layout-placeholders.js

@@ -0,0 +1,56 @@
+import {listBlockContainers,prepareBlockInsert} from './blocks.js';
+
+const payloadFields=['text','items','bullets','image','video','chart','table','code','metric','quote','timeline'];
+const headingFields=new Set(['title','subtitle','tag']);
+const fields={text:'text',list:'items',picture:'image',media:'video',diagram:'image',chart:'chart',table:'table',code:'code',metric:'metric',quote:'quote',timeline:'timeline'};
+const region=key=>/^(?:(?:top|middle|bottom)(?:\+(?:top|middle|bottom))*(?::(?:left|center|right)(?:\+(?:left|center|right))*)?|(?:left|center|right)(?:\+(?:left|center|right))*)$/.test(key);
+
+function emptyPayload(field){
+  if(field==='items')return [];
+  if(field==='chart')return {type:'bar',data:{columns:['',''],rows:[['',null]]}};
+  if(field==='table')return {rows:[]};
+  if(field==='metric')return {value:'',label:''};
+  if(field==='quote')return {text:'',attribution:''};
+  if(field==='timeline')return {events:[{when:'',what:''}]};
+  return '';
+}
+
+/** Supply authored slots without replacing content, metadata or region placement. */
+export function populateLayoutPlaceholders(document,slideIndex,types){
+  let next=structuredClone(document),slide=next.slides[slideIndex];
+  const counts=new Map();
+  function count(host){
+    if(!host||typeof host!=='object')return;
+    if(Array.isArray(host.blocks)){host.blocks.forEach(count);return;}
+    for(const field of payloadFields)if(Object.hasOwn(host,field)){
+      // Bullet text occupies a text slot; rich-text runs are one payload.
+      const key=field==='bullets'?'text':field;
+      counts.set(key,(counts.get(key)??0)+1);
+    }
+  }
+  const regions=Object.keys(slide).filter(region);
+  if(regions.length)regions.forEach(key=>count(slide[key]));else count(slide);
+  for(const type of types){
+    if(headingFields.has(type)){
+      if(!Object.hasOwn(slide,type))slide[type]='';
+      continue;
+    }
+    const field=fields[type];
+    if(!field)continue;
+    const remaining=counts.get(field)??0;
+    if(remaining){counts.set(field,remaining-1);continue;}
+    const value=emptyPayload(field);
+    // Distinct implicit root payloads can coexist. Repeated kinds need blocks.
+    if(!regions.length&&!Array.isArray(slide.blocks)&&!slide.type&&!Object.hasOwn(slide,field))slide[field]=value;
+    else {
+      // Keep positioned content in its region. Append to the last outer region,
+      // rather than creating root blocks that would hide the existing regions.
+      const path=regions.length?`/slides/${slideIndex}/${regions.at(-1)}`:`/slides/${slideIndex}`;
+      const containers=listBlockContainers(next,{slideIndex,includeImplicit:true});
+      if(!containers.some(container=>container.path===path))throw new Error('This slide has no editable content container for the new placeholder.');
+      next=prepareBlockInsert(next,path,{[field]:value}).document;
+      slide=next.slides[slideIndex];
+    }
+  }
+  return next;
+}

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.0",
+  "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.0",
+    "@openpresentation/opf": "^0.11.0",
     "jsonc-parser": "3.3.1"
   },
   "peerDependencies": {
-    "@openpresentation/opf-render": "^0.8.0"
+    "@openpresentation/opf-render": "^0.9.0"
   },
   "peerDependenciesMeta": {
     "@openpresentation/opf-render": {
@@ -118,8 +118,8 @@
     }
   },
   "devDependencies": {
-    "@openpresentation/opf-pptx": "0.8.0",
-    "@openpresentation/opf-render": "0.8.0",
+    "@openpresentation/opf-pptx": "^0.9.0",
+    "@openpresentation/opf-render": "^0.9.0",
     "esbuild": "0.28.2",
     "playwright": "1.63.0"
   }