@openpresentation/opf-editor 0.18.1 → 0.19.0

package/README.md

@@ -29,7 +29,7 @@ The release after 0.14.2 moves the editor onto core 0.15 (a breaking, clean spec
 
   ```js
   import { createEditorSession, saveDocument } from "@openpresentation/opf-editor";
-  import { defaultCatalog, catalogDisplay } from "@openpresentation/opf/catalog"; // the host app's choice, not the library's
+  import { gallery as defaultCatalog, catalogDisplay } from "@openpresentation/gallery"; // the host app's choice, not the library's
 
   const editor = createEditorSession(doc, { catalogs: [defaultCatalog, acmeCatalog] }); // the first is the host default
   editor.catalogs;                      // the frozen list; editor.setCatalogs([...]) replaces it (one "catalogs" event)
@@ -79,7 +79,7 @@ The control provides indentation, paired quotes/brackets, folding shortcuts, sea
 
 Click a categorical property/value or press `Ctrl+Space`, `Cmd+Space` or `Alt+Down` to open its choices. Records the document embeds come first, then those of the catalogs the host passes as `catalogs` (`Catalog[]`, the session's registered list); there are no built-in records. 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(list)` replaces the host's catalogs 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.
+In OPF 0.19, layout choices change only the template reference and preserve authored content. Empty regions remain available for explicit insertion; choosing a template does not invent blank payloads. The JSON field menu groups templates by intent and describes their supported regions. Hosts apply `replaceFieldOption` or `fieldOptionEdit(context, value)` as one undoable edit and check that `context.source` is still current.
 
 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.
 
@@ -342,7 +342,7 @@ The playground's Content tab mounts the block-level and slide-structure actions
 
 ### Pickers: options, chart types and current values
 
-`listSwitchOptions(presentation, dimension, { catalogs, vocabularies })` lists what a dimension offers: a catalog dimension lists core's `catalogRecords` (the document's embedded records first, then the host catalogs'), each with the reference to write; `charts`, `socials` and `languages` list core's vocabularies, labelled from `vocabularies` (`catalogDisplay` from `@openpresentation/opf/catalog`, supplied by the host). `compatibleChartTypes(presentation, { slideIndex, path })` lists the chart types the chart's inline data can use as it is, by data shape: the first column labels the categories and each further column is a series (how the renderers read it), a type with N series needs exactly N value columns, except that stacked types and the combo chart take that many or more (combo: two or more), and the single-series, distribution and geographic types are offered only where they fit. Switching a combo chart to another type removes its `line`, `secondaryAxis` and secondary axis title. It is data-shape compatibility, not a claim that an engine draws the type. `currentSwitchValue(presentation, dimension, { slideIndex })` reads the value back as `{ value, scope }`.
+`listSwitchOptions(presentation, dimension, { catalogs, vocabularies })` lists what a dimension offers: a catalog dimension lists core's `catalogRecords` (the document's embedded records first, then the host catalogs'), each with the reference to write; `charts`, `socials` and `languages` list core's vocabularies, labelled from `vocabularies` (`catalogDisplay` from `@openpresentation/gallery`, supplied by the host). `compatibleChartTypes(presentation, { slideIndex, path })` lists the chart types the chart's inline data can use as it is, by data shape: the first column labels the categories and each further column is a series (how the renderers read it), a type with N series needs exactly N value columns, except that stacked types and the combo chart take that many or more (combo: two or more), and the single-series, distribution and geographic types are offered only where they fit. Switching a combo chart to another type removes its `line`, `secondaryAxis` and secondary axis title. It is data-shape compatibility, not a claim that an engine draws the type. `currentSwitchValue(presentation, dimension, { slideIndex })` reads the value back as `{ value, scope }`.
 
 ## Design options (RR-06)
 
@@ -443,7 +443,7 @@ Table alt text (FA-27): `setTableAlt(editor, tablePath, { alt: "North America le
 ```js
 import { addSlide, duplicateSlides, removeSlides, moveSlides, moveSlidesBy, setHidden, addSection, renameSection, removeSection, moveSection, setSection, listSections } from "@openpresentation/opf-editor/slides";
 
-addSlide(editor, { at: 2, layout: "list-2x" });   // the layout's placeholders become empty slots, as when switching a slide's layout
+addSlide(editor, { at: 2, layout: "agenda" });    // OPF 0.19: an adaptive template accepts content in named regions
 duplicateSlides(editor, [1, 3]);                  // copies follow the last selected slide, with fresh ids (also for content ids)
 removeSlides(editor, [4]);                        // a deck keeps at least one slide: cannot-remove-all-slides
 moveSlides(editor, [0, 1], 5);                    // `to` is the drop gap in the original order (0 to the slide count)
@@ -466,6 +466,10 @@ const manager = createSlideManager(document.querySelector("#slide-list"), {
 editor.subscribe(() => manager.render());
 ```
 
+OPF 0.19 layouts have a grid (`areas`) and named content regions. The slide manager's `openLayoutPicker("apply")` groups the 28 built-ins by intent and applies one to the current slide; `openLayoutPicker()` adds a slide. Pass `renderLayoutPreview(presentation, slideIndex, choice)` to render the current slide with each candidate through the shared renderer. The picker shows the record's `preview` when supplied, otherwise a diagram of its areas. It retains content when switching.
+
+`@openpresentation/opf-editor/custom-layout-editor` exports `openCustomLayoutEditor(editor)`, the playground's 12 by 12 grid dialog. Draw named rectangular areas, choose the content kinds, role and flow of each body region, and save the record under `catalogs.custom.layouts` in one undoable transaction. The headless `layoutFromGrid`, `prepareCustomLayout`, `saveCustomLayout` and `pinBlockToRegion` operations are in `/layout-templates`. Canvas Arrange mode shows every template region; empty ones say “Drop content here”, and a top-level block can be dragged or chosen by keyboard for a validated region pin. A full or incompatible region refuses the edit instead of silently ignoring the pin. The host registers the 0.19 catalog with the session; the editor ships no catalog data.
+
 `@openpresentation/opf-editor/outline` and `/outline-view` edit the deck as an outline: a row per slide title, subtitle, text paragraph and list item, and a read-only row for content that is not text (a chart, a table, an image) or text that carries formatting, so nothing is flattened away. Typing commits as one change when the row loses focus or on Enter. Enter adds a line (after a title: a slide), Alt+Up and Alt+Down move a bullet with the bullets nested under it, or a slide with its text, Alt+Shift+Right demotes and Alt+Shift+Left promotes. Demoting a bullet nests it (`level`); promoting a top-level bullet turns it into a new slide that takes the bullets after it; demoting a plain slide makes it a bullet of the slide before it (refused, with the reason, when that would drop content such as notes, blocks or a design). Backspace on an empty line removes it. Tab keeps moving focus, so the outline is no keyboard trap.
 
 ## Data grid (RR-24)
@@ -510,7 +514,7 @@ const controls = createDesignControls(designPanel, {
   getSlideIndex: () => slideIndex,
   getSelectedPath: () => selectedPath,
   sections: ["look", "background", "header-footer", "brand", "layout-options", "info", "catalog"],
-  vocabularies: catalogDisplay, // from @openpresentation/opf/catalog, in the host app
+  vocabularies: catalogDisplay, // from @openpresentation/gallery, in the host app
 });
 const selectionControls = createDesignControls(contentPanel, { editor, getSlideIndex, getSelectedPath, sections: ["selection", "image", "table", "slide-content"], onSelectPath: select });
 controls.refresh(); // when the slide or the selection changes
@@ -774,7 +778,7 @@ The canvas can show draggable, keyboard-accessible dividers for root and nested
 
 ### Move complete blocks
 
-When the slide's layout record has placeholder groups (FA-26, `{ "type": "group", "composition", "placeholders" }`), Arrange also outlines every slot of the record at its cell (`geometry.slots`): groups, filled regions and labelled empty regions. The slots belong to the record, so they are shown, not edited; the slide's content in them keeps its own selection and handles. Layout pickers and the JSON field menu describe such a record as `title, column (text, text), chart` and compare layouts by their leaf regions.
+For v2 templates, Arrange draws editable region targets from `geometry.regions`, including empty and collapsed regions. Region menus insert accepted content and move compatible blocks with a region pin through the editor session, preserving validation and undo. Nested content groups retain their own composition handles; layout records contain no v1 slots.
 
 Arrange mode also shows numbered block handles. Drag to reorder siblings, use arrow keys for earlier/later, or click a handle to choose an existing destination group/slide and insertion position. The move preserves the whole block, including rich text, table/chart data, and nested groups. Each move is validated, preflighted by the renderer, and undoable. Parent weights stay with layout positions; moves that leave an empty container or create a containment cycle are rejected.
 
@@ -787,3 +791,5 @@ Define cells with `{value, style, rowSpan, colSpan}` and place explicit `null` a
 The core schema rejects overlapping/out-of-bounds spans and hidden content. Model patches can change a span and remove a row atomically; undo restores the complete operation. Styling or restructuring a table remains available through JSON/model edits and the existing structured property forms.
 
 `test/styled-table.mjs` covers model behavior. The core repository's `scripts/build-rich-table-browser.mjs` builds both rich and styled browser fixtures. Browser verification uses actual loaded Roboto fonts and covers merged typing, scalar formatting, partial selection, empty values, cancellation and undo. Native PowerPoint appearance is a separate converter verification boundary.
+
+Final 0.19 local acceptance uses core `e21c472d88057d9d90cfa507fe91b89063f3f29a`, gallery `e0a7eee2dfe996e680b34a907cabfe41905e6d99`, renderer `9fbddcb78dbebcb87355922ca92af7d26c24c48d` and PPTX `006e8a7df9c19e85b230a27f19794e5356cdac78`, installed or linked explicitly. Gallery 2 is a direct host/example/test import. Its development dependency declaration and registry lock reconciliation, along with final core/renderer/PPTX release ranges and packed-consumer checks, remain held for the actual dependency releases. Local candidate checks do not establish a published dependency graph.

package/dist/block-controls.js

@@ -122,6 +122,20 @@ export function createBlockControls(root, options) {
         node.ondragend=()=>{cancel();options.render();};layer.append(node);
       });
     }
+    // Core's template flows are region-local and do not expose a root flow handle. A compact grip on each
+    // top-level bound block lets the user drag it to another region without changing the flat block order.
+    for(const item of geometry.items??[]){
+      if(!item.region)continue;
+      const match=new RegExp(`^slides\\.${options.slideIndex()}\\.blocks\\.(\\d+)$`).exec(item.path);
+      if(!match)continue;
+      const index=Number(match[1]),path=`/slides/${options.slideIndex()}/blocks/${index}`;
+      const node=doc.createElement('button');node.type='button';node.draggable=true;node.dataset.blockPath=path;
+      node.textContent=`${index+1} ⋮⋮`;node.setAttribute('aria-label',`Move block ${index+1} from ${item.region} to another region`);
+      node.title='Drag to a region marked Drop content here';
+      node.style.cssText=`position:absolute;pointer-events:auto;cursor:grab;left:calc(${item.box.x/geometry.width*100}% + 3px);top:calc(${item.box.y/geometry.height*100}% + 3px);padding:2px 5px;background:#f6f3fc;color:#675394;border:1px solid #cfc4e7;border-radius:4px;font:11px system-ui`;
+      node.ondragstart=event=>{if(!options.beforeEdit()){event.preventDefault();return;}event.dataTransfer.effectAllowed='move';event.dataTransfer.setData('text/plain',path);};
+      layer.append(node);
+    }
   }
   function over(event){
     if(!drag)return;

package/dist/canvas.d.ts

@@ -34,7 +34,7 @@ export interface CanvasEditorOptions {
   editor?: EditorSession;
   presentation?: unknown;
   /**
-   * The host's catalogs (core `Catalog[]`, for example `[defaultCatalog]` from `@openpresentation/opf/catalog`) for the session the
+   * The host's catalogs (core `Catalog[]`, for example `[gallery]` from `@openpresentation/gallery`) for the session the
    * canvas creates from `presentation`. With `editor`, register them on that session instead (`createEditorSession(doc, { catalogs })`);
    * `renderOptions.catalogs` adds catalogs for drawing only, merged after the session's.
    */

package/dist/canvas.js

@@ -144,6 +144,7 @@ export function createCanvasEditor(container, options = {}) {
   });
   const layoutHandles = createLayoutHandles(root, {
     editor, enabled: options.layoutEditing, render: renderFor, beforeEdit: commit,
+    slideIndex: () => slideIndex,
     isTextEditing: () => !!active,
     clearError: clearNotice, onError: report,
     onDraft: value => options.onDraft?.(value),

package/dist/catalogs.js

@@ -1,5 +1,5 @@
 // Catalogs (FA-23, OPF 0.15). The editor never ships or imports catalog data: the host registers its catalogs (`Catalog[]`,
-// the shape core's `CatalogOptions.catalogs` takes, for example `defaultCatalog` from `@openpresentation/opf/catalog`), on the
+// the shape core's `CatalogOptions.catalogs` takes, for example `gallery` from `@openpresentation/gallery`), on the
 // session (`createEditorSession(doc, { catalogs })`) or per call. `mergeCatalogs` is the one function that turns those into the
 // one list the editor hands to core (resolution, validation, embedding, copying, updates), to the renderer and to the exporter.
 // Pickers list core's `catalogRecords` and write the reference it gives (`id` or `name:id`); saving and exporting embed every
@@ -23,7 +23,7 @@ export function mergeCatalogs(...lists) {
     for (const catalog of Array.isArray(list) ? list : [list]) {
       if (catalog === undefined || catalog === null) continue;
       if (!isObject(catalog) || typeof catalog.source !== "string" || catalog.source === "")
-        throw new OPFEditorError("invalid-catalogs", "A registered catalog is an object with a non-empty source, such as defaultCatalog from @openpresentation/opf/catalog.", { catalog });
+        throw new OPFEditorError("invalid-catalogs", "A registered catalog is an object with a non-empty source, such as gallery from @openpresentation/gallery.", { catalog });
       if (sources.has(catalog.source)) continue;
       sources.add(catalog.source);
       merged.push(catalog);

package/dist/custom-layout-editor.d.ts

@@ -0,0 +1,7 @@
+import type { EditorSession } from "./index.js";
+
+export declare function openCustomLayoutEditor(editor: EditorSession, options?: {
+  document?: Document;
+  onSave?: (layout: { id: string; record: Record<string, unknown> }) => void;
+  onClose?: () => void;
+}): { dialog: HTMLDialogElement; close(): void };

package/dist/custom-layout-editor.js

@@ -0,0 +1,105 @@
+// A small, local grid authoring dialog for OPF 0.19 layout templates.
+import { LAYOUT_REGION_FLOWS, LAYOUT_REGION_KINDS, LAYOUT_REGION_ROLES, layoutFromGrid, saveCustomLayout } from "./layout-templates.js";
+
+const element = (doc, tag, text) => { const node = doc.createElement(tag); if (text !== undefined) node.textContent = text; return node; };
+const field = (doc, title, input) => { const label = element(doc, "label", title); label.className = "opf-grid-field"; label.append(input); return label; };
+const select = (doc, values, current) => {
+  const input = element(doc, "select");
+  for (const value of values) { const option = element(doc, "option", value); option.value = value; input.append(option); }
+  input.value = current;
+  return input;
+};
+
+/** Draw rectangular areas, set each region's accepted kinds, role and flow, then save one undoable custom record. */
+export function openCustomLayoutEditor(editor, options = {}) {
+  const doc = options.document ?? globalThis.document;
+  const dialog = element(doc, "dialog");
+  dialog.className = "opf-sm-dialog opf-grid-dialog";
+  const heading = element(doc, "h2", "Create a custom layout");
+  heading.id = "opf-grid-title";
+  dialog.setAttribute("aria-labelledby", heading.id);
+  const error = element(doc, "p"); error.setAttribute("role", "alert"); error.className = "opf-sm-error";
+  const id = element(doc, "input"); id.placeholder = "roadmap-split"; id.pattern = "[a-z][a-z0-9-]*"; id.required = true;
+  const name = element(doc, "input"); name.placeholder = "Roadmap split"; name.required = true;
+  const summary = element(doc, "input"); summary.placeholder = "When to use this layout";
+  const width = element(doc, "input"); width.type = "number"; width.min = "1"; width.max = "12"; width.value = "3";
+  const height = element(doc, "input"); height.type = "number"; height.min = "1"; height.max = "12"; height.value = "3";
+  const paint = element(doc, "input"); paint.value = "content"; paint.placeholder = "content or . to erase";
+  const grid = element(doc, "div"); grid.className = "opf-custom-layout-grid"; grid.setAttribute("aria-label", "Layout cells");
+  const regionsPanel = element(doc, "div"); regionsPanel.className = "opf-grid-regions";
+  const hint = element(doc, "p", "Choose an area name, then drag across cells to draw a rectangle. Use title for the heading and . to clear cells."); hint.className = "field-help";
+  const body = element(doc, "div"); body.className = "opf-grid-body";
+  body.append(field(doc, "Layout ID", id), field(doc, "Name", name), field(doc, "Summary", summary));
+  const dimensions = element(doc, "div"); dimensions.className = "opf-grid-dimensions";
+  dimensions.append(field(doc, "Columns", width), field(doc, "Rows", height), field(doc, "Paint area", paint));
+  body.append(dimensions, hint, grid, regionsPanel, error);
+  const cancel = element(doc, "button", "Cancel"); cancel.type = "button"; cancel.className = "secondary";
+  const save = element(doc, "button", "Save layout"); save.type = "submit"; save.className = "primary";
+  const actions = element(doc, "div"); actions.className = "opf-sm-actions"; actions.append(cancel, save);
+  const form = element(doc, "form"); form.append(heading, body, actions); dialog.append(form);
+  let cells = [["title", "title", "title"], ["content", "content", "content"], ["content", "content", "content"]];
+  const settings = new Map();
+  let down = null;
+  const opener = doc.activeElement;
+  const regionNames = () => [...new Set(cells.flat())].filter((value) => value !== "." && value !== "title" && value !== "subtitle");
+  function resize() {
+    const cols = Number(width.value), rows = Number(height.value);
+    if (!Number.isInteger(cols) || !Number.isInteger(rows) || cols < 1 || cols > 12 || rows < 1 || rows > 12) return;
+    cells = Array.from({ length: rows }, (_, y) => Array.from({ length: cols }, (_, x) => cells[y]?.[x] ?? "."));
+    render();
+  }
+  function draw(from, to) {
+    const value = paint.value.trim() || ".";
+    if (value !== "." && !/^[a-z][a-z0-9-]*$/.test(value)) { error.textContent = "Use lowercase area names with letters, digits and hyphens."; return; }
+    for (let y = Math.min(from.y, to.y); y <= Math.max(from.y, to.y); y++)
+      for (let x = Math.min(from.x, to.x); x <= Math.max(from.x, to.x); x++) cells[y][x] = value;
+    error.textContent = ""; render();
+    grid.querySelector(`[data-x="${to.x}"][data-y="${to.y}"]`)?.focus();
+  }
+  function render() {
+    grid.replaceChildren(); grid.style.gridTemplateColumns = `repeat(${cells[0].length}, minmax(38px, 1fr))`;
+    cells.forEach((row, y) => row.forEach((area, x) => {
+      const cell = element(doc, "button", area); cell.type = "button"; cell.className = "opf-grid-cell"; cell.dataset.area = area;
+      cell.setAttribute("aria-label", `Row ${y + 1}, column ${x + 1}: ${area === "." ? "empty" : area}`);
+      cell.onpointerdown = (event) => { if (event.button !== 0) return; down = { x, y }; cell.setPointerCapture?.(event.pointerId); };
+      cell.onpointerup = (event) => { if (!down) return; const target = doc.elementFromPoint?.(event.clientX, event.clientY)?.closest?.(".opf-grid-cell"); const last = target ? { x: Number(target.dataset.x), y: Number(target.dataset.y) } : { x, y }; draw(down, last); down = null; };
+      cell.dataset.x = String(x); cell.dataset.y = String(y);
+      cell.onkeydown = (event) => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); draw({ x, y }, { x, y }); } };
+      grid.append(cell);
+    }));
+    regionsPanel.replaceChildren();
+    for (const area of regionNames()) {
+      const setting = settings.get(area) ?? { accepts: new Set(["text"]), role: "primary", flow: "auto" };
+      settings.set(area, setting);
+      const section = element(doc, "fieldset"); section.className = "opf-grid-region";
+      section.append(element(doc, "legend", area));
+      const kinds = element(doc, "div"); kinds.className = "opf-grid-kinds";
+      for (const kind of LAYOUT_REGION_KINDS) {
+        const check = element(doc, "input"); check.type = "checkbox"; check.value = kind; check.checked = setting.accepts.has(kind);
+        check.onchange = () => { if (check.checked) setting.accepts.add(kind); else setting.accepts.delete(kind); };
+        const label = element(doc, "label", kind); label.prepend(check); kinds.append(label);
+      }
+      const role = select(doc, LAYOUT_REGION_ROLES, setting.role); role.onchange = () => { setting.role = role.value; };
+      const flow = select(doc, LAYOUT_REGION_FLOWS, setting.flow); flow.onchange = () => { setting.flow = flow.value; };
+      section.append(element(doc, "span", "Accepts"), kinds, field(doc, "Role", role), field(doc, "Flow", flow)); regionsPanel.append(section);
+    }
+  }
+  width.onchange = resize; height.onchange = resize;
+  cancel.onclick = () => dialog.close();
+  form.onsubmit = (event) => {
+    event.preventDefault();
+    try {
+      const regions = Object.fromEntries(regionNames().map((area) => {
+        const setting = settings.get(area);
+        return [area, { accepts: [...setting.accepts], role: setting.role, flow: setting.flow }];
+      }));
+      const layout = layoutFromGrid({ id: id.value.trim(), name: name.value, summary: summary.value, cells, regions });
+      saveCustomLayout(editor, layout);
+      options.onSave?.(layout);
+      dialog.close();
+    } catch (cause) { error.textContent = cause?.issues?.[0]?.message ?? cause.message; }
+  };
+  dialog.onclose = () => { dialog.remove(); opener?.focus?.(); options.onClose?.(); };
+  doc.body.append(dialog); render(); dialog.showModal(); id.focus();
+  return { dialog, close: () => dialog.close() };
+}

package/dist/design-controls.d.ts

@@ -22,7 +22,7 @@ export interface DesignControlsOptions {
   scope?: "deck" | "slide";
   /** Host catalogs for the pickers, merged after the session's registered ones. */
   catalogs?: readonly Catalog[];
-  /** Display metadata for the engine vocabularies (languages, chart types, social platforms): `catalogDisplay` from `@openpresentation/opf/catalog`. */
+  /** Display metadata for the engine vocabularies (languages, chart types, social platforms): `catalogDisplay` from `@openpresentation/gallery`. */
   vocabularies?: SwitchVocabularies;
   /** Called after every committed change (never for a refused one). */
   onChange?: (change: unknown) => void;

package/dist/design-controls.js

@@ -99,7 +99,7 @@ const titleCase = (text) => text.charAt(0).toUpperCase() + text.slice(1);
  * slide and selection; call `refresh()` when they change), `sections` (default: all), `scope`
  * ("deck" or "slide", the initial "Applies to" choice), `catalogs` (host catalogs, `Catalog[]`, merged after the session's
  * registered ones), `vocabularies` (display metadata for languages, chart types and social platforms: `catalogDisplay`
- * from `@openpresentation/opf/catalog`), `onChange(change)`, `onStatus(message, { error })` and `onSelectPath(path)`, called
+ * from `@openpresentation/gallery`), `onChange(change)`, `onStatus(message, { error })` and `onSelectPath(path)`, called
  * after a content conversion or replacement with the path to keep selected (the block, or the inline
  * payload field), because the host's old selection path may no longer exist.
  */
@@ -471,7 +471,7 @@ export function createDesignControls(container, options = {}) {
     });
 
     const layout = selectField("layout", "Layout of this slide", {
-      help: "Adds the blank placeholders the layout declares and keeps your content.",
+      help: "Arranges this slide's content in the chosen layout's regions.",
       onChange: (value) => run(() => switchDimension(editor, "layouts", value, { slideIndex: getSlide(), ...catalogOptions() }), `Layout changed to ${layout.select.selectedOptions[0]?.textContent ?? value}.`),
     });
     body.append(layout.wrap);

package/dist/galleries.js

@@ -184,19 +184,10 @@ function attachDefinition(presentation, descriptor, gallerySource) {
   groups[group][kind] ??= {};
   let record;
   if (kind === "layouts") {
-    // A gallery layout item is a layout record: its placeholders, design hints and composition are the
-    // record's own. Only an item that declares no placeholders gets the default title and text.
-    const placeholders = Array.isArray(source.placeholders)
-      ? source.placeholders
-          .filter((placeholder) => typeof placeholder?.type === "string")
-          .map((placeholder) => structuredClone(placeholder))
-      : [{ type: "title" }, { type: "text" }];
-    record = {
-      name: source.label ?? source.name ?? id,
-      ...(isPlain(source.design) ? { design: structuredClone(source.design) } : {}),
-      placeholders,
-      ...(isPlain(source.composition) ? { composition: structuredClone(source.composition) } : {}),
-    };
+    if (!Array.isArray(source.areas)) return;
+    record = {name: source.label ?? source.name ?? id};
+    for (const key of ['summary', 'description', 'areas', 'columns', 'rows', 'regions', 'overflowRegion', 'design', 'composition', 'tags', 'preview'])
+      if (source[key] !== undefined) record[key] = structuredClone(source[key]);
   } else if (kind === "fontSchemes") record = fontSchemeRecord(source, id);
   else record = embeddedRecord(source);
   groups[group][kind][id] = record;

package/dist/index.d.ts

@@ -102,7 +102,7 @@ export interface EditorSession {
 export interface CreateEditorSessionOptions {
   /** Refuse every edit whose result has an error finding (the default per edit is `meta.rejectInvalid`). */
   rejectInvalid?: boolean;
-  /** The host's catalogs (for example `[defaultCatalog]` from `@openpresentation/opf/catalog`): resolution, validation, pickers, embedding. */
+  /** The host's catalogs (for example `[gallery]` from `@openpresentation/gallery`): resolution, validation, pickers, embedding. */
   catalogs?: readonly Catalog[];
 }
 

package/dist/json-menu.js

@@ -13,13 +13,8 @@ export function mountJsonFieldMenu(parent,api,catalogs,left,top,onClose){
   const heading=add('div',undefined,'json-field-heading');add('strong',context.label,undefined,heading);
   const closeButton=add('button','×',undefined,heading);closeButton.type='button';closeButton.setAttribute('aria-label','Close options');
   const search=add('input');search.type='search';search.placeholder='Search options…';search.autocomplete='off';search.setAttribute('role','combobox');search.setAttribute('aria-label',`Search ${context.label} options`);search.setAttribute('aria-expanded','true');
-  const isLayout=context.catalog==='layouts',relatedCount=context.options.filter(option=>option.related).length;
-  let similar=isLayout&&relatedCount>1;
-  const filters=isLayout?add('div',undefined,'json-field-filters'):null;
-  const similarButton=filters?add('button',`Similar (${relatedCount})`,undefined,filters):null;
-  const allButton=filters?add('button',`All layouts (${context.options.length})`,undefined,filters):null;
-  for(const button of [similarButton,allButton].filter(Boolean)){button.type='button';button.style.cssText='padding:6px;margin:4px 4px 4px 0';}
-  if(isLayout){search.placeholder='Search all layouts or placeholders…';add('p','Same types and counts first. Text and subtitle slots are compatible.','json-field-hint');}
+  const isLayout=context.catalog==='layouts';
+  if(isLayout){search.placeholder='Search layouts or regions…';add('p','Layouts are grouped by intent. Changing a layout preserves your content.','json-field-hint');}
   const list=add('div',undefined,'json-field-options');list.setAttribute('role','listbox');list.setAttribute('aria-label',`Available ${context.label} options`);
   let id;do{id=`opf-json-options-${++nextMenuId}`;}while(doc.getElementById(id));
   list.id=id;search.setAttribute('aria-controls',id);list.style.cssText='max-height:280px;overflow:auto;margin-top:8px';
@@ -46,27 +41,22 @@ export function mountJsonFieldMenu(parent,api,catalogs,left,top,onClose){
   }
   function render(){
     const query=search.value.trim().toLowerCase();
-    choices=context.options.filter(option=>query?`${option.label} ${option.value} ${option.description??''} ${option.placeholders??''}`.toLowerCase().includes(query):!similar||option.related);
-    similarButton?.setAttribute('aria-pressed',String(similar&&!query));allButton?.setAttribute('aria-pressed',String(!similar||Boolean(query)));
-    for(const button of [similarButton,allButton].filter(Boolean))button.style.outline=button.getAttribute('aria-pressed')==='true'?'2px solid Highlight':'';
+    choices=context.options.filter(option=>query?`${option.label} ${option.value} ${option.description??''} ${option.regions??''}`.toLowerCase().includes(query):true);
     list.replaceChildren();let group,container=list;
     for(const [index,option] of choices.entries()){
       if(isLayout&&option.layoutGroup!==group){group=option.layoutGroup;container=add('div',undefined,undefined,list);container.setAttribute('role','group');container.setAttribute('aria-label',group);const label=add('div',group,'json-field-group',container);label.setAttribute('aria-hidden','true');label.style.cssText='font-size:11px;font-weight:600;padding:8px 8px 4px;color:GrayText';}
       const button=add('button',undefined,undefined,container);button.dataset.optionIndex=String(index);button.type='button';button.tabIndex=-1;button.id=`${id}-${index}`;button.setAttribute('role','option');button.setAttribute('aria-selected',String(option.value===context.value));button.style.cssText='display:block;text-align:left;width:100%;padding:8px;border:0;background:transparent;color:inherit';
       const label=add('span',undefined,undefined,button);add('strong',option.label,undefined,label);if(option.value===context.value)add('span',' ✓',undefined,label);
-      if(option.placeholders){const summary=add('div',option.placeholders,'json-field-placeholders',button);summary.style.cssText='margin:4px 0';}
+      if(option.regions){const summary=add('div',option.regions,'json-field-regions',button);summary.style.cssText='margin:4px 0';}
       const meta=add('div',undefined,'json-field-meta',button);meta.style.cssText='display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap';
       add('code',String(option.value),undefined,meta);const origin=add('small',option.sourceLabel??option.source,undefined,meta);origin.title=option.sourceDescription??'';
       if(option.description)add('p',option.description,undefined,button);
       button.addEventListener('mouseenter',()=>{selected=index;highlight();});button.addEventListener('click',()=>choose(option));
     }
     if(!choices.length)add('p','No matching options. You can still type a custom value in the JSON.','json-field-empty',list);
-    if(similar&&!query&&relatedCount===1)add('p','No other available layouts share these placeholders. Try All layouts.','json-field-empty',list);
     highlight();
   }
   search.addEventListener('input',()=>{selected=0;render();});
-  similarButton?.addEventListener('click',()=>{similar=true;search.value='';selected=0;render();});
-  allButton?.addEventListener('click',()=>{similar=false;search.value='';selected=0;render();});
   root.addEventListener('keydown',event=>{
     if(event.key==='Escape'){event.preventDefault();event.stopPropagation();close(true);}
     else if(event.target===search&&['ArrowDown','ArrowUp'].includes(event.key)){event.preventDefault();selected=Math.max(0,Math.min(choices.length-1,selected+(event.key==='ArrowDown'?1:-1)));highlight();}

package/dist/json-options.d.ts

@@ -6,16 +6,12 @@ export interface JsonFieldOption {
   label: string;
   description?: string;
   source: 'Loaded catalog' | 'Document catalog' | 'Schema' | 'Current value';
-  suggested?: boolean;
   /** User-facing provenance; source remains stable for existing consumers. */
   sourceLabel?: string;
   sourceDescription?: string;
-  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;
+  layoutGroup?: 'Current layout' | 'Openers and closers' | 'Text' | 'Groups of items' | 'Numbers' | 'Visuals' | 'Mixed' | 'Custom layouts';
+  /** Region names, accepted kinds and flow from the v2 template. */
+  regions?: string;
 }
 export interface JsonFieldContext {
   source: string;
@@ -31,7 +27,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 the token and add missing layout payloads. Hosts must reject stale sources. */
+/** Replace only the selected reference token, preserving content. 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,8 +1,8 @@
 import { checkFormat, firstErrorMessage } from "./checks.js";
 import { listCatalogRecords } from "./catalogs.js";
 import { schemaAtPath, schemaVariants } from "./schema.js";
-import { applyEdits, findNodeAtLocation, findNodeAtOffset, getNodePath, modify, parseTree } from "jsonc-parser";
-import { layoutSlotSummary, layoutSlotTypes, populateLayoutPlaceholders } from "./layout-placeholders.js";
+import { findNodeAtOffset, getNodePath, parseTree } from "jsonc-parser";
+import { LAYOUT_INTENT_GROUPS, layoutRegionSummary } from "./layout-templates.js";
 // The catalog kind a field references (OPF 0.15: every content kind is `id` or `name:id`), read from where the field sits.
 const ROOT_REFERENCES = { narrative: "narratives", audience: "audiences", purpose: "purposes", tone: "tones" };
 const DESIGN_REFERENCES = { theme: "themes", colorScheme: "colorSchemes", fontScheme: "fontSchemes" };
@@ -19,59 +19,25 @@ function catalogAtPath(path) {
     if (tail.length === 5 && tail[0] === "catalogs" && tail[2] === "themes" && (key === "colorScheme" || key === "fontScheme")) return DESIGN_REFERENCES[key];
     return undefined;
 }
-// Compare declared placeholders, including multiplicity. This describes a layout
-// contract, not a claim that arbitrary slide content will render without overflow.
-// FA-26: a record's placeholder groups compare by their leaf regions, the slots its content fills.
-function layoutTypes(record) {
-    return layoutSlotTypes(record)?.sort();
-}
-function placeholderSummary(types) {
-    if (!types)
-        return "Placeholders not specified";
-    if (!types.length)
-        return "No placeholders";
-    const labels = { title: "Title", subtitle: "Subtitle", tag: "Tag", text: "Text", list: "List", image: "Image", video: "Video", chart: "Chart", table: "Table", code: "Code", metric: "Metric", quote: "Quote", timeline: "Timeline" };
-    const order = ["title", "subtitle", "tag", "text", "list", "image", "video", "chart", "table", "code", "metric", "quote", "timeline"];
-    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}` : ""}`;
-    }).join(" + ");
-}
 const sourceDetails = {
     "Loaded catalog": ["Provided by app", "Records from a catalog this app registered; nothing is fetched from a URL. Saving embeds the record in the document."],
     "Document catalog": ["In this document", "Embedded in this document’s catalogs. Takes precedence over the app’s records with the same reference."],
     "Current value": ["Custom value", "The current value is not in the available catalogs."],
     "Schema": ["OPF option", "Allowed by the OPF schema."],
 };
-const layoutGroups = ["Current layout", "Same placeholders", "Compatible placeholders", "Different counts", "Other layouts", "Unspecified placeholders"];
+const layoutGroups = ["Current layout", ...LAYOUT_INTENT_GROUPS.map(group => group.name), "Custom layouts"];
 function describeOptions(choices, records, current, catalog) {
-    const currentRecord = records.get(String(current));
-    const currentTypes = layoutTypes(currentRecord);
-    const signature = (types) => JSON.stringify(types);
-    const compatible = (types) => types.map(type => type === "subtitle" ? "text" : type).sort();
     for (const option of choices) {
         const [label, description] = sourceDetails[option.source];
         option.sourceLabel = label;
         option.sourceDescription = description;
-        if (catalog !== "layouts")
-            continue;
-        const types = layoutTypes(option.value === current ? currentRecord : records.get(String(option.value)));
-        const record = records.get(String(option.value));
-        option.placeholderTypes = layoutSlotTypes(record);
-        // A record with placeholder groups also shows how its slots nest.
-        option.placeholders = placeholderSummary(types) + (record?.placeholders?.some?.(entry => entry?.type === "group") ? ` · ${layoutSlotSummary(record)}` : "");
-        const same = types && currentTypes && signature(types) === signature(currentTypes);
-        const equivalent = types && currentTypes && signature(compatible(types)) === signature(compatible(currentTypes));
-        const sameKinds = types && currentTypes && signature([...new Set(compatible(types))]) === signature([...new Set(compatible(currentTypes))]);
-        option.layoutGroup = option.value === current ? "Current layout" : !types ? "Unspecified placeholders"
-            : same ? "Same placeholders" : equivalent ? "Compatible placeholders" : sameKinds ? "Different counts" : "Other layouts";
-        option.related = option.value === current || Boolean(same || equivalent);
-        option.suggested = Boolean(same || equivalent);
+        if (catalog !== "layouts") continue;
+        const id = String(option.value).replace(/^default:/, "");
+        option.regions = layoutRegionSummary(records.get(String(option.value)));
+        option.layoutGroup = option.value === current ? "Current layout" : LAYOUT_INTENT_GROUPS.find(group => group.ids.includes(id))?.name ?? "Custom layouts";
     }
-    const priority = (option) => option.source === "Document catalog" ? 2 : option.source === "Loaded catalog" ? 1 : 0;
-    return choices.sort((a, b) => (catalog === "layouts"
-        ? layoutGroups.indexOf(a.layoutGroup) - layoutGroups.indexOf(b.layoutGroup)
-        : priority(b) - priority(a)) || a.label.localeCompare(b.label, "en", { numeric: true }) || String(a.value).localeCompare(String(b.value), "en"));
+    const priority = option => option.source === "Document catalog" ? 2 : option.source === "Loaded catalog" ? 1 : 0;
+    return choices.sort((a, b) => (catalog === "layouts" ? layoutGroups.indexOf(a.layoutGroup) - layoutGroups.indexOf(b.layoutGroup) : priority(b) - priority(a)) || a.label.localeCompare(b.label, "en", {numeric: true}) || String(a.value).localeCompare(String(b.value), "en"));
 }
 // The installed schema identifies fields; a document field merely named "layout"
 // inside arbitrary metadata is not mistaken for an OPF layout reference.
@@ -142,39 +108,13 @@ export function replaceFieldOption(context, value) {
     const presentation = JSON.parse(next);
     if (context.path.reduce((current, key) => current?.[key], presentation) !== value)
         throw new Error("This field has a duplicate key. Resolve it in the JSON before choosing an option.");
-    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' && checkFormat(presentation).valid) {
-        const populated = populateLayoutPlaceholders(presentation, context.path[1], types);
-        next = updateSource(next, presentation, populated);
-    }
     const result = checkFormat(JSON.parse(next));
     if (!result.valid && checkFormat(JSON.parse(context.source)).valid)
         throw new Error(firstErrorMessage(result, "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. */
+/** One source edit for an undoable reference change. */
 export function fieldOptionEdit(context, value) {
     const next = replaceFieldOption(context, value), source = context.source;
     let from = 0, to = source.length, end = next.length;

package/dist/layout-handles.js

@@ -1,5 +1,7 @@
 import {prepareTrackResize} from './layout.js';
 import {getValueAtPath} from './index.js';
+import {pinBlockToRegion} from './layout-templates.js';
+import {regionAccepts} from '@openpresentation/opf/composition';
 
 export function createLayoutHandles(root, options) {
   const doc=root.ownerDocument,win=doc.defaultView,editor=options.editor;
@@ -60,17 +62,48 @@ export function createLayoutHandles(root, options) {
     lastGeometry=geometry;
     layer.replaceChildren();
     if(!enabled||options.isTextEditing())return;
-    // FA-26: the slots of a layout record with placeholder groups, drawn under the handles while arranging: each group and
-    // region as a dashed outline at its cell, deeper groups inset, an empty region labelled with its kind. They are the
-    // record's, not the document's, so they are not editable here; the content in a slot keeps its own selection.
-    for(const slot of geometry.slots??[]){
+    // 0.19 template regions are drop targets even when core collapsed their empty cells.
+    // Source blocks remain flat; dropping writes only their region pin.
+    for(const region of geometry.regions??[]){
       const node=doc.createElement('div');
-      node.dataset.layoutSlot=slot.path;node.dataset.layoutSlotType=slot.type;node.setAttribute('aria-hidden','true');
-      const group=slot.type==='group',empty=!group&&!slot.content;
-      node.title=group?`Layout group (${slot.path})`:`${empty?'Empty ':''}${slot.type} slot (${slot.path})`;
-      const inset=group?Math.min(4,slot.depth*2):0;
-      node.style.cssText=`position:absolute;pointer-events:none;box-sizing:border-box;left:calc(${slot.box.x/geometry.width*100}% + ${inset}px);top:calc(${slot.box.y/geometry.height*100}% + ${inset}px);width:calc(${slot.box.width/geometry.width*100}% - ${2*inset}px);height:calc(${slot.box.height/geometry.height*100}% - ${2*inset}px);border:1px dashed ${group?'#8170d5':'#8a78d7aa'};border-radius:4px;${empty?'background:#8a78d714;':''}`;
-      if(empty){const label=doc.createElement('span');label.textContent=`Empty ${slot.type} slot`;label.style.cssText='position:absolute;left:6px;top:4px;font:11px system-ui;color:#675394';node.append(label);}
+      node.className='opf-region-drop';node.dataset.opfRegion=region.name;
+      node.tabIndex=0;node.setAttribute('role','button');
+      node.title=`${region.name}: ${region.accepts.join(', ')}`;
+      node.setAttribute('aria-label',`${region.name} region. Accepts ${region.accepts.join(', ')}. Drop content here.`);
+      const box=region.areaBox??region.box;
+      node.style.cssText=`position:absolute;pointer-events:auto;box-sizing:border-box;left:${box.x/geometry.width*100}%;top:${box.y/geometry.height*100}%;width:${box.width/geometry.width*100}%;height:${Math.max(box.height/geometry.height*100,4)}%;border:1px dashed #8170d5;border-radius:4px;background:#8170d510;z-index:1;`;
+      const label=doc.createElement('span');label.textContent=region.content.length?region.name:'Drop content here';
+      label.style.cssText='position:absolute;left:5px;top:3px;padding:2px 4px;background:#fff;color:#675394;font:11px system-ui;border-radius:3px;pointer-events:none';node.append(label);
+      node.addEventListener('dragover',event=>{
+        if(![...(event.dataTransfer?.types??[])].includes('text/plain'))return;
+        event.preventDefault();event.stopPropagation();event.dataTransfer.dropEffect='move';node.dataset.dropActive='true';
+      });
+      node.addEventListener('dragleave',()=>{delete node.dataset.dropActive;});
+      const place=(blockIndex)=>{
+        if(!options.beforeEdit())return;
+        try{
+          const block=editor.presentation.slides[options.slideIndex()]?.blocks?.[blockIndex];
+          if(!regionAccepts(region,block))throw new Error(`${region.name} does not accept this block.`);
+          pinBlockToRegion(editor,options.slideIndex(),blockIndex,region.name);
+          options.onCommit?.({path:`slides.${options.slideIndex()}.blocks.${blockIndex}`,editor});
+        }catch(error){options.onError(error);}
+      };
+      node.addEventListener('drop',event=>{
+        event.preventDefault();event.stopPropagation();delete node.dataset.dropActive;
+        const path=event.dataTransfer?.getData('text/plain')??'';
+        const match=/^\/slides\/(\d+)\/blocks\/(\d+)$/.exec(path);
+        if(match&&Number(match[1])===options.slideIndex())place(Number(match[2]));
+      });
+      const menu=()=>{
+        const old=node.querySelector('[data-region-menu]');if(old){old.remove();return;}
+        const panel=doc.createElement('div');panel.dataset.regionMenu='';
+        panel.style.cssText='position:absolute;left:4px;top:24px;min-width:130px;max-height:160px;overflow:auto;padding:4px;background:#fff;border:1px solid #8170d5;border-radius:4px;box-shadow:0 4px 12px #0002;z-index:9';
+        const blocks=editor.presentation.slides[options.slideIndex()]?.blocks??[];
+        blocks.forEach((block,index)=>{if(!regionAccepts(region,block))return;const choice=doc.createElement('button');choice.type='button';choice.textContent=`Block ${index+1}`;choice.style.cssText='display:block;width:100%;padding:4px;text-align:left;border:0;background:#fff;color:#473b66';choice.onclick=event=>{event.stopPropagation();place(index);};panel.append(choice);});
+        if(!panel.children.length)panel.textContent='No compatible blocks';node.append(panel);panel.querySelector('button')?.focus();
+      };
+      node.addEventListener('click',event=>{if(event.target===node||event.target===label)menu();});
+      node.addEventListener('keydown',event=>{if(event.key==='Escape'){node.querySelector('[data-region-menu]')?.remove();event.preventDefault();node.focus();}else if(event.target===node&&(event.key==='Enter'||event.key===' ')){event.preventDefault();menu();}});
       layer.append(node);
     }
     for(const flow of geometry.flows??[]){

package/dist/layout-templates.d.ts

@@ -0,0 +1,24 @@
+import type { EditorSession, EditorChange, JsonPatchOperation } from "./index.js";
+
+export interface LayoutChoice { id: string; label: string; record?: Record<string, unknown> }
+export interface LayoutIntentGroup { name: string; ids: readonly string[] }
+export declare const LAYOUT_INTENT_GROUPS: readonly LayoutIntentGroup[];
+export declare const LAYOUT_REGION_KINDS: readonly string[];
+export declare const LAYOUT_REGION_ROLES: readonly string[];
+export declare const LAYOUT_REGION_FLOWS: readonly string[];
+export declare function groupLayoutChoices<T extends LayoutChoice>(choices: T[]): { name: string; choices: T[] }[];
+export interface GridLayoutInput {
+  id: string;
+  name: string;
+  summary?: string;
+  cells: string[][];
+  regions: Record<string, { accepts: string[]; role?: string; flow?: string }>;
+  columns?: number[];
+  rows?: (number | "auto")[];
+}
+export declare function layoutFromGrid(input: GridLayoutInput): { id: string; record: Record<string, unknown> };
+export declare function prepareCustomLayout(presentation: any, layout: { id: string; record: Record<string, unknown> }): { presentation: any; patches: JsonPatchOperation[]; id: string };
+export declare function saveCustomLayout(editor: EditorSession, layout: { id: string; record: Record<string, unknown> }): EditorChange;
+export declare function pinBlockToRegion(editor: EditorSession, slideIndex: number, blockIndex: number, region: string): EditorChange;
+
+export declare function layoutRegionSummary(record: unknown): string;

package/dist/layout-templates.js

@@ -0,0 +1,106 @@
+// OPF 0.19 layout authoring. The catalog owns records; this module owns only editor operations.
+import { resolveSlideContext } from "@openpresentation/opf";
+import { bindRegions, layoutStructure, layoutTemplate } from "@openpresentation/opf/composition";
+import { applyJsonPatch, createValuePatch, opfPathToJsonPointer } from "./index.js";
+import { checkedDocument, fail } from "./edit-helpers.js";
+import { checkFormat } from "./checks.js";
+
+export const LAYOUT_INTENT_GROUPS = Object.freeze([
+  { name: "Openers and closers", ids: ["cover", "section", "agenda", "statement", "closing"] },
+  { name: "Text", ids: ["text", "list", "quote", "two-column"] },
+  { name: "Groups of items", ids: ["pillars", "comparison", "process", "timeline", "faq"] },
+  { name: "Numbers", ids: ["metrics", "scorecard"] },
+  { name: "Visuals", ids: ["image", "image-beside", "gallery", "chart", "chart-beside", "table", "table-beside", "code"] },
+  { name: "Mixed", ids: ["hero", "dashboard", "team", "logos"] },
+]);
+
+export const LAYOUT_REGION_KINDS = Object.freeze(["text", "list", "image", "video", "chart", "table", "code", "metric", "quote", "timeline", "group"]);
+export const LAYOUT_REGION_ROLES = Object.freeze(["primary", "secondary", "media", "supporting"]);
+export const LAYOUT_REGION_FLOWS = Object.freeze(["none", "grid", "column", "auto"]);
+const RESERVED = new Set(["title", "subtitle", "tag", "auto", "left", "center", "right", "top", "middle", "bottom"]);
+const NAME = /^[a-z][a-z0-9-]*$/;
+
+/** Group registered layouts by the 28 built-in intents, then any deck or host layouts. */
+export function groupLayoutChoices(choices) {
+  const byId = new Map(choices.map((choice) => [choice.id, choice]));
+  const used = new Set();
+  const groups = LAYOUT_INTENT_GROUPS.map(({ name, ids }) => ({
+    name, choices: ids.map((id) => byId.get(id)).filter((choice) => { if (!choice || used.has(choice.id)) return false; used.add(choice.id); return true; }),
+  })).filter((group) => group.choices.length);
+  const custom = choices.filter((choice) => !used.has(choice.id));
+  if (custom.length) groups.push({ name: "Custom layouts", choices: custom });
+  return groups;
+}
+
+/** Build the exact v2 record from a rectangular painted grid. `cells` is a row-major array of names or `.`. */
+export function layoutFromGrid({ id, name, summary, cells, regions, columns, rows }) {
+  if (!NAME.test(id) || id === "auto") throw fail("layout-id", "Choose a kebab-case layout id other than auto.");
+  if (typeof name !== "string" || !name.trim()) throw fail("layout-name", "Name the custom layout.");
+  if (!Array.isArray(cells) || cells.length < 1 || cells.length > 12 || !cells.every((row) => Array.isArray(row) && row.length === cells[0].length && row.length >= 1 && row.length <= 12))
+    throw fail("layout-grid", "Draw a rectangular grid of at most 12 by 12 cells.");
+  const areas = cells.map((row) => row.join(" "));
+  const names = new Set(cells.flat().filter((cell) => cell !== "."));
+  for (const area of names) if (!NAME.test(area) || (RESERVED.has(area) && area !== "title" && area !== "subtitle")) throw fail("layout-area", `Invalid area name: ${area}.`);
+  if (names.has("subtitle") && !names.has("title")) throw fail("layout-area", "A subtitle area needs a title area.");
+  const body = [...names].filter((area) => area !== "title" && area !== "subtitle");
+  for (const area of body) {
+    const points = cells.flatMap((row, y) => row.map((cell, x) => cell === area ? [x, y] : null).filter(Boolean));
+    const xs = points.map(([x]) => x), ys = points.map(([, y]) => y);
+    if (points.length !== (Math.max(...xs) - Math.min(...xs) + 1) * (Math.max(...ys) - Math.min(...ys) + 1))
+      throw fail("layout-area", `Area ${area} must fill one rectangle.`);
+  }
+  if (body.length < 1) throw fail("layout-region", "Draw at least one content region.");
+  const selected = {};
+  for (const area of body) {
+    const input = regions?.[area];
+    if (!input || !Array.isArray(input.accepts) || !input.accepts.length || input.accepts.some((kind) => !LAYOUT_REGION_KINDS.includes(kind)))
+      throw fail("layout-region", `Choose accepted content kinds for ${area}.`);
+    if (input.role && !LAYOUT_REGION_ROLES.includes(input.role)) throw fail("layout-region", `Choose a valid role for ${area}.`);
+    if (input.flow && !LAYOUT_REGION_FLOWS.includes(input.flow)) throw fail("layout-region", `Choose a valid flow for ${area}.`);
+    selected[area] = { accepts: [...new Set(input.accepts)], ...(input.role ? { role: input.role } : {}), ...(input.flow ? { flow: input.flow } : {}) };
+  }
+  const record = { name: name.trim(), areas, regions: selected };
+  if (summary?.trim()) record.summary = summary.trim();
+  if (columns) record.columns = columns;
+  if (rows) record.rows = rows;
+  return { id, record };
+}
+
+/** Prepare one validated catalog edit. Existing custom ids are never silently overwritten. */
+export function prepareCustomLayout(presentation, layout) {
+  const { id, record } = layout;
+  if (!NAME.test(id) || id === "auto") throw fail("layout-id", "Choose a kebab-case layout id other than auto.");
+  if (presentation.catalogs?.custom?.layouts?.[id]) throw fail("layout-exists", `A custom layout named ${id} already exists.`);
+  const custom = presentation.catalogs?.custom ?? {};
+  const next = { ...presentation, catalogs: { ...presentation.catalogs, custom: { ...custom, layouts: { ...custom.layouts, [id]: record } } } };
+  const patches = [{ op: "replace", path: "", value: next }];
+  checkedDocument(presentation, patches, checkFormat(presentation));
+  return { presentation: next, patches, id };
+}
+
+export function saveCustomLayout(editor, layout) {
+  const prepared = prepareCustomLayout(editor.presentation, layout);
+  return editor.applyPatch(prepared.patches, { source: "layout-grid", rejectInvalid: true });
+}
+
+/** Pin a top-level block to a template region; the session validates the complete document. */
+export function pinBlockToRegion(editor, slideIndex, blockIndex, region) {
+  const slide = editor.presentation.slides?.[slideIndex];
+  if (!slide || !Array.isArray(slide.blocks) || !slide.blocks[blockIndex]) throw fail("layout-block", "Choose a top-level content block.");
+  if (typeof region !== "string" || !region) throw fail("layout-region", "Choose a region.");
+  const path = ["slides", String(slideIndex), "blocks", String(blockIndex), "region"];
+  const patches = createValuePatch(editor.presentation, opfPathToJsonPointer(path), region);
+  const candidate = applyJsonPatch(editor.presentation, patches);
+  const context = resolveSlideContext(candidate, slideIndex, { catalogs: editor.catalogs });
+  const binding = bindRegions(candidate.slides[slideIndex], context.options.layout, { slideIndex });
+  const expected = `slides.${slideIndex}.blocks.${blockIndex}`;
+  if (!binding.regions.some((entry) => entry.name === region && entry.blocks.some((block) => block.path === expected && block.pinned)))
+    throw fail("layout-region", `The ${region} region cannot accept this block or is full.`);
+  return editor.applyPatch(patches, { source: "layout-region", rejectInvalid: true });
+}
+
+/** Region structure of a supported v2 template. */
+export function layoutRegionSummary(record) {
+  if (!Array.isArray(record?.areas)) return "";
+  try { layoutTemplate(record); return layoutStructure(record); } catch { return "Invalid region template"; }
+}

package/dist/slide-manager.d.ts

@@ -13,6 +13,8 @@ export interface SlideManagerOptions {
   setSlideIndex: (index: number) => void;
   /** The thumbnail of one slide as an HTML string (usually the renderer's SVG). Cache it: it is called for every card on every render. */
   renderThumbnail?: (presentation: unknown, index: number) => string;
+  /** Traced SVG preview of the selected layout using the current slide's content. */
+  renderLayoutPreview?: (presentation: unknown, slideIndex: number, choice: { id: string; label: string; record?: Record<string, any> }) => string;
   /** `"navigator"` (a vertical list, the default) or `"sorter"` (a grid with arrow keys in both directions). */
   variant?: "navigator" | "sorter";
   /** An element to fill with the Duplicate, Delete, Hide and More buttons. */
@@ -34,7 +36,7 @@ export interface SlideManager {
   getSelection(): number[];
   setSelection(indices: number[]): void;
   focus(index: number): void;
-  openLayoutPicker(): void;
+  openLayoutPicker(mode?: "add" | "apply"): void;
   /** Collapse or expand a section (an index from `listSections`): view state only, nothing is written to the document. Returns false for an unknown section. */
   setSectionCollapsed(sectionIndex: number, collapsed?: boolean): boolean;
   /** Run an action on the selection: duplicate, delete, hide, move-up, move-down, move-start, move-end, split, merge, select-all. */

package/dist/slide-manager.js

@@ -7,7 +7,9 @@ import {
   addSection, addSlide, duplicateSlides, hasSections, listSections, moveSection, moveSlides, moveSlidesBy, removeSection, removeSlides, renameSection, setHidden, setSection, slideTitle,
 } from "./slides.js";
 import { listSwitchOptions } from "./switches.js";
-import { layoutSlotSummary } from "./layout-placeholders.js";
+import { layoutRegionSummary } from "./layout-templates.js";
+import { groupLayoutChoices } from "./layout-templates.js";
+import { switchDimension } from "./switches.js";
 
 let instances = 0;
 const SVG_NS = "http://www.w3.org/2000/svg";
@@ -490,7 +492,7 @@ export function createSlideManager(container, options) {
   function layoutChoices() {
     return options.layoutOptions ? options.layoutOptions(deck()) : listSwitchOptions(deck(), "layouts", { catalogs: editor.catalogs });
   }
-  function openLayoutPicker() {
+  function openLayoutPicker(mode = "add") {
     const choices = layoutChoices();
     if (!choices.length) { announce("No layouts are available"); return; }
     const opener = doc.activeElement;
@@ -498,28 +500,48 @@ export function createSlideManager(container, options) {
     const filter = el("input", { type: "search", id: `${id}-layout-filter`, placeholder: "Filter layouts", autocomplete: "off" });
     const select = el("select", { id: `${id}-layout-list`, size: "9", "aria-label": "Layouts" });
     const detail = el("p", { class: "field-help", id: `${id}-layout-detail`, "aria-live": "polite" });
+    const preview = el("div", { class: "opf-layout-preview" });
+    const template = el("div", { class: "opf-layout-template", role: "img", "aria-label": "Layout template" });
+    const currentPreview = el("div", { class: "opf-layout-current", role: "img", "aria-label": "Layout with the current slide content" });
+    preview.append(el("div", { class: "opf-layout-preview-item" }, el("strong", { text: "Template" }), template), el("div", { class: "opf-layout-preview-item" }, el("strong", { text: "Your slide" }), currentPreview));
     const where = el("select", { id: `${id}-layout-where` },
       el("option", { value: "after", text: "After the current slide" }), el("option", { value: "end", text: "At the end" }));
     const fill = () => {
       const needle = filter.value.trim().toLowerCase();
-      const shown = choices.filter((choice) => !needle || `${choice.label} ${choice.id}`.toLowerCase().includes(needle));
-      select.replaceChildren(...shown.map((choice) => el("option", { value: choice.id, text: choice.label })));
+      const shown = choices.filter((choice) => !needle || `${choice.label} ${choice.id} ${choice.record?.summary ?? ""}`.toLowerCase().includes(needle));
+      select.replaceChildren(...groupLayoutChoices(shown).map((group) => el("optgroup", { label: group.name }, ...group.choices.map((choice) => el("option", { value: choice.id, text: choice.label })))));
       if (shown.length) select.selectedIndex = 0;
       describe();
     };
     const describe = () => {
       const choice = choices.find((entry) => entry.id === select.value);
-      // FA-26: nested placeholder groups show with their mode, for example `title, column (text, text), chart`.
-      const slots = layoutSlotSummary(choice?.record);
-      detail.textContent = choice ? `${choice.record?.description ?? ""}${slots ? ` Slots: ${slots}.` : choice.record?.placeholders ? " An empty slide." : ""}`.trim() : "No layout matches.";
+      // Supported templates describe their region names, accepted kinds and flow.
+      const slots = layoutRegionSummary(choice?.record);
+      detail.textContent = choice ? `${choice.record?.summary ?? choice.record?.description ?? ""}${slots ? ` Regions: ${slots}.` : ""}`.trim() : "No layout matches.";
+      template.replaceChildren(); currentPreview.replaceChildren();
+      if (choice?.record?.preview && typeof choice.record.preview === "string") {
+        template.append(el("img", { src: choice.record.preview, alt: `${choice.label} template preview` }));
+      } else if (Array.isArray(choice?.record?.areas)) {
+        const diagram = el("div", { class: "opf-layout-diagram" });
+        diagram.style.gridTemplateAreas = choice.record.areas.map((row) => `"${row}"`).join(" ");
+        diagram.style.gridTemplateColumns = `repeat(${choice.record.areas[0]?.trim().split(/\s+/).length ?? 1}, 1fr)`;
+        const areas = [...new Set(choice.record.areas.flatMap((row) => row.trim().split(/\s+/)))].filter((area) => area !== ".");
+        for (const area of areas) { const part = el("span", { text: area }); part.style.gridArea = area; diagram.append(part); }
+        template.append(diagram);
+      }
+      if (choice && options.renderLayoutPreview) {
+        try { currentPreview.innerHTML = options.renderLayoutPreview(deck(), current(), choice) ?? ""; }
+        catch { currentPreview.textContent = "Preview unavailable for this content"; }
+        currentPreview.querySelectorAll("[tabindex]").forEach((node) => node.removeAttribute("tabindex"));
+      }
     };
     const form = el("form", { method: "dialog" },
-      el("h2", { id: `${id}-layout-title`, text: "Add slide with layout" }),
+      el("h2", { id: `${id}-layout-title`, text: mode === "apply" ? "Choose a layout for this slide" : "Add slide with layout" }),
       el("label", { for: filter.id, text: "Layout" }), filter,
-      select, detail,
-      el("label", { for: where.id, text: "Where" }), where,
+      select, detail, preview,
+      mode === "apply" ? null : el("label", { for: where.id, text: "Where" }), mode === "apply" ? null : where,
       el("p", { class: "opf-sm-error", role: "alert" }),
-      el("div", { class: "opf-sm-actions" }, el("button", { type: "button", class: "secondary", "data-cancel": "", text: "Cancel" }), el("button", { type: "submit", class: "primary", text: "Add slide" })));
+      el("div", { class: "opf-sm-actions" }, el("button", { type: "button", class: "secondary", "data-cancel": "", text: "Cancel" }), el("button", { type: "submit", class: "primary", text: mode === "apply" ? "Use layout" : "Add slide" })));
     dialog.append(form);
     doc.body.append(dialog);
     filter.addEventListener("input", fill);
@@ -531,9 +553,12 @@ export function createSlideManager(container, options) {
       if (!select.value) { form.querySelector(".opf-sm-error").textContent = "Choose a layout."; return; }
       try {
         const at = where.value === "end" ? count() : current() + 1;
-        const change = addSlide(editor, { layout: select.value, at });
+        const change = mode === "apply"
+          ? switchDimension(editor, "layouts", select.value, { slideIndex: current() })
+          : addSlide(editor, { layout: select.value, at });
         dialog.close();
-        show(change, `Added a slide with the ${choices.find((entry) => entry.id === select.value)?.label ?? select.value} layout at position ${change.index + 1}`);
+        if (mode === "apply") announce(`Layout changed to ${choices.find((entry) => entry.id === select.value)?.label ?? select.value}`);
+        else show(change, `Added a slide with the ${choices.find((entry) => entry.id === select.value)?.label ?? select.value} layout at position ${change.index + 1}`);
       } catch (error) { form.querySelector(".opf-sm-error").textContent = error.message; }
     });
     form.querySelector("[data-cancel]").addEventListener("click", () => dialog.close());

package/dist/slides.d.ts

@@ -48,7 +48,7 @@ export type MoveSectionMode = "adopt" | "keep" | string | null;
 export interface AddSlideOptions {
   /** The index the slide takes (default: the end). */
   at?: number;
-  /** A layout reference (`id` or `name:id`); the layout's placeholders are added as empty slots. */
+  /** A layout reference (`id` or `name:id`); content is preserved and empty regions remain available for insertion. */
   layout?: string;
   title?: string;
   text?: string;

package/dist/slides.js

@@ -132,7 +132,7 @@ function newSlideId(presentation) {
 
 /**
  * Compute adding a slide. Options: `at` (the index the slide takes, default the end), `layout` (a layout
- * reference, `id` or `name:id`; the layout's placeholders are added as empty slots, exactly like switching a slide's layout),
+ * reference, `id` or `name:id`; existing content is preserved; empty regions remain available for explicit insertion),
  * `title`, `text`, `id`, `section` (default: the section of the slide before it), `slide` (a ready slide to
  * insert, for hosts that build their own), `catalogs`/`record`/`recordSource` for catalog lookup (as `prepareDimensionSwitch`).
  */

package/dist/switches.d.ts

@@ -2,7 +2,7 @@ import type { ConvertOptions } from "@openpresentation/opf/convert";
 import type { Catalog } from "@openpresentation/opf";
 import type { EditorChange, EditorSession, JsonPatchOperation } from "./index.js";
 
-/** Display metadata for the engine vocabularies, in the shape of `catalogDisplay` (`@openpresentation/opf/catalog`): records by id, or a list of records with `id` (`bcp47` for a language). */
+/** Display metadata for the engine vocabularies, in the shape of `catalogDisplay` (`@openpresentation/gallery`): records by id, or a list of records with `id` (`bcp47` for a language). */
 export interface SwitchVocabularies {
   languages?: unknown;
   chartTypes?: unknown;

package/dist/switches.js

@@ -7,13 +7,12 @@
 // tones) resolve through core with the host's registered catalogs (`options.catalogs`, `Catalog[]`) and write the reference core
 // gives (`id` or `name:id`). Languages, chart types and social platforms are engine vocabularies, checked against core's
 // tables; their labels come from the host's display metadata (`options.vocabularies`, the shape of `catalogDisplay` from
-// `@openpresentation/opf/catalog`), never from data the editor ships.
+// `@openpresentation/gallery`), never from data the editor ships.
 import { CHART_TYPES, LANGUAGES, SOCIAL_PLATFORMS, isXYChartType, parseReference, resolveChartData, resolveReference } from "@openpresentation/opf";
 import { chartOptionTarget } from "@openpresentation/opf/composition";
 import { createValuePatch, applyJsonPatch, getValueAtPath, opfPathToJsonPointer, splitOpfPath } from "./index.js";
 import { createContentBlock, prepareBlockReplace } from "./blocks.js";
 import { checkedDocument, designPatches, fail, same } from "./edit-helpers.js";
-import { layoutSlotTypes, populateLayoutPlaceholders } from "./layout-placeholders.js";
 import { blockConversionTargets, prepareBlockConversion } from "./block-convert.js";
 import { checkFormat } from "./checks.js";
 import { listCatalogRecords, mergeCatalogs } from "./catalogs.js";
@@ -267,19 +266,11 @@ export function prepareDimensionSwitch(presentation, dimension, value, options =
     slideAt(presentation, slideIndex, "a layout switch");
     scope = "slide";
     const choice = catalogChoice(presentation, dimension, value, options);
-    const record = choice.record;
     patches = choice.patches;
     const withRecord = patches.length ? applyJsonPatch(presentation, patches) : presentation;
     if (withRecord.slides[slideIndex].layout !== choice.reference) {
       const layoutOps = createValuePatch(withRecord, ["slides", String(slideIndex), "layout"], choice.reference);
-      const swapped = applyJsonPatch(withRecord, layoutOps);
-      // FA-26: a record's placeholder groups contribute their leaf regions, in reading order.
-      const types = layoutSlotTypes(record);
-      // Add the blank payloads the layout declares, as the JSON editor's layout choice does.
-      const populated = types ? populateLayoutPlaceholders(swapped, slideIndex, types) : swapped;
-      patches = same(populated.slides[slideIndex], swapped.slides[slideIndex])
-        ? [...patches, ...layoutOps]
-        : [...patches, { op: "replace", path: `/slides/${slideIndex}`, value: populated.slides[slideIndex] }];
+      patches = [...patches, ...layoutOps];
     }
   } else if (dimension === "charts") {
     slideIndex = scopeIndex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-editor",
-  "version": "0.18.1",
+  "version": "0.19.0",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",
@@ -174,6 +174,14 @@
       "types": "./dist/slide-manager.d.ts",
       "default": "./dist/slide-manager.js"
     },
+    "./layout-templates": {
+      "types": "./dist/layout-templates.d.ts",
+      "default": "./dist/layout-templates.js"
+    },
+    "./custom-layout-editor": {
+      "types": "./dist/custom-layout-editor.d.ts",
+      "default": "./dist/custom-layout-editor.js"
+    },
     "./outline-view": {
       "types": "./dist/outline-view.d.ts",
       "default": "./dist/outline-view.js"
@@ -222,7 +230,7 @@
     "check:font-hotlinks": "node --test scripts/check-font-hotlinks.test.mjs && node scripts/check-font-hotlinks.mjs",
     "check:font-hotlinks:built": "node scripts/check-font-hotlinks.mjs --built dist artifacts/playground",
     "build:playground": "node scripts/build-playground.mjs",
-    "test:playground": "npm run build:playground && npm run check:font-hotlinks:built && node test/playground-pptx.mjs && node test/playground-script-fonts.mjs artifacts/playground-script-fonts && node test/playground-lazy-fonts.mjs artifacts/playground-lazy-fonts && node test/playground-base-fonts.mjs artifacts/playground-base-fonts && node test/playground-source.mjs && node test/design-controls-browser.mjs && node test/design-gaps-browser.mjs && node test/chart-options-browser.mjs && node test/persistence-browser.mjs && node test/slides-browser.mjs && node test/template-panel-browser.mjs && node test/numbering-panel-browser.mjs && node test/playground-ensure-fonts.mjs artifacts/playground-ensure-fonts && node test/canvas-fonts-browser.mjs artifacts/canvas-fonts && node test/find-replace-browser.mjs && node test/image-crop-browser.mjs && node test/mobile-browser.mjs && node test/review-panel-browser.mjs && node test/review-hook-browser.mjs && node test/playground-download.mjs artifacts/playground-download",
+    "test:playground": "npm run build:playground && npm run check:font-hotlinks:built && node test/playground-pptx.mjs && node test/playground-script-fonts.mjs artifacts/playground-script-fonts && node test/playground-lazy-fonts.mjs artifacts/playground-lazy-fonts && node test/playground-base-fonts.mjs artifacts/playground-base-fonts && node test/playground-source.mjs && node test/design-controls-browser.mjs && node test/design-gaps-browser.mjs && node test/chart-options-browser.mjs && node test/persistence-browser.mjs && node test/slides-browser.mjs && node test/layout-templates-browser.mjs && node test/template-panel-browser.mjs && node test/numbering-panel-browser.mjs && node test/playground-ensure-fonts.mjs artifacts/playground-ensure-fonts && node test/canvas-fonts-browser.mjs artifacts/canvas-fonts && node test/find-replace-browser.mjs && node test/image-crop-browser.mjs && node test/mobile-browser.mjs && node test/review-panel-browser.mjs && node test/review-hook-browser.mjs && node test/playground-download.mjs artifacts/playground-download",
     "test:code-browser": "node test/code-browser.mjs",
     "test:selection-browser": "node test/selection-browser.mjs",
     "test:click-entry-browser": "node test/click-entry-browser.mjs",
@@ -258,11 +266,11 @@
     "@codemirror/state": "6.7.6",
     "@codemirror/view": "6.43.13",
     "@lezer/highlight": "1.2.5",
-    "@openpresentation/opf": "^0.18.3",
+    "@openpresentation/opf": "^0.19.0",
     "jsonc-parser": "3.3.1"
   },
   "peerDependencies": {
-    "@openpresentation/opf-render": "^0.18.1"
+    "@openpresentation/opf-render": "^0.19.1"
   },
   "peerDependenciesMeta": {
     "@openpresentation/opf-render": {
@@ -270,6 +278,7 @@
     }
   },
   "devDependencies": {
+    "@openpresentation/gallery": "^2.0.0",
     "@expo-google-fonts/arimo": "0.4.3",
     "@expo-google-fonts/caladea": "0.4.2",
     "@expo-google-fonts/cousine": "0.4.3",
@@ -314,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.18.1",
-    "@openpresentation/opf-render": "^0.18.1",
+    "@openpresentation/opf-pptx": "^0.19.0",
+    "@openpresentation/opf-render": "^0.19.1",
     "@resvg/resvg-js": "2.6.2",
     "axe-core": "4.14.0",
     "esbuild": "0.28.2",

package/dist/layout-placeholders.js

@@ -1,71 +0,0 @@
-import {layoutLeaves,layoutStructure} from '@openpresentation/opf/composition';
-import {listBlockContainers,prepareBlockInsert} from './blocks.js';
-
-/**
- * The slot kinds a layout record declares, in reading order: its headings and the leaf regions of its placeholder groups
- * (FA-26), the kinds a slide's flat content fills. Undefined when the record states no placeholders.
- */
-export function layoutSlotTypes(record){
-  if(!Array.isArray(record?.placeholders))return undefined;
-  try{return layoutLeaves(record).map(leaf=>leaf.type);}catch{return record.placeholders.filter(entry=>entry?.type!=='group').map(entry=>entry?.type);}
-}
-/** A one-line description of a record's slots, nested groups in parentheses: `title, column (text, text), chart`. */
-export function layoutSlotSummary(record){
-  if(!Array.isArray(record?.placeholders))return '';
-  try{return layoutStructure(record);}catch{return layoutSlotTypes(record).join(', ');}
-}
-
-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',image:'image',video:'video',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(presentation,slideIndex,types){
-  let next=structuredClone(presentation),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}).presentation;
-      slide=next.slides[slideIndex];
-    }
-  }
-  return next;
-}