@openpresentation/opf-editor 0.24.3 → 0.25.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-editor",
-  "version": "0.24.3",
+  "version": "0.25.1",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",
@@ -190,9 +190,13 @@
       "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"
+    "./layout-editor": {
+      "types": "./dist/layout-editor.d.ts",
+      "default": "./dist/layout-editor.js"
+    },
+    "./layout-tree": {
+      "types": "./dist/layout-tree.d.ts",
+      "default": "./dist/layout-tree.js"
     },
     "./outline-view": {
       "types": "./dist/outline-view.d.ts",
@@ -278,7 +282,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/slide-navigator-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/source-pane-browser.mjs && node test/playground-download.mjs artifacts/playground-download && node test/export-menu-browser.mjs && node test/agent-handoff-browser.mjs && node test/presenter-browser.mjs && node test/present-button-browser.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/slide-navigator-browser.mjs && node test/layout-templates-browser.mjs && node test/layout-editor-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/source-pane-browser.mjs && node test/playground-download.mjs artifacts/playground-download && node test/export-menu-browser.mjs && node test/agent-handoff-browser.mjs && node test/presenter-browser.mjs && node test/present-button-browser.mjs",
     "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",
@@ -302,6 +306,7 @@
     "test:review-panel-browser": "node test/review-panel-browser.mjs",
     "test:review-hook-browser": "node test/review-hook-browser.mjs",
     "test:source-pane-browser": "node test/source-pane-browser.mjs",
+    "test:layout-editor-browser": "node test/layout-editor-browser.mjs",
     "test:export-license-browser": "node test/export-license-browser.mjs",
     "test:chart-options-browser": "node test/chart-options-browser.mjs",
     "test:numbering-panel-browser": "node test/numbering-panel-browser.mjs",
@@ -321,11 +326,11 @@
     "@codemirror/state": "6.7.6",
     "@codemirror/view": "6.43.14",
     "@lezer/highlight": "1.2.5",
-    "@openpresentation/opf": "^0.24.2",
+    "@openpresentation/opf": "^0.25.0",
     "jsonc-parser": "3.3.1"
   },
   "peerDependencies": {
-    "@openpresentation/opf-render": "^0.24.3"
+    "@openpresentation/opf-render": "^0.25.0"
   },
   "peerDependenciesMeta": {
     "@openpresentation/opf-render": {
@@ -333,7 +338,7 @@
     }
   },
   "devDependencies": {
-    "@openpresentation/gallery": "^4.0.0",
+    "@openpresentation/gallery": "^5.0.0",
     "@expo-google-fonts/arimo": "0.4.3",
     "@expo-google-fonts/caladea": "0.4.2",
     "@expo-google-fonts/cousine": "0.4.3",
@@ -378,8 +383,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.24.1",
-    "@openpresentation/opf-render": "^0.24.3",
+    "@openpresentation/opf-pptx": "^0.25.0",
+    "@openpresentation/opf-render": "^0.25.0",
     "@resvg/resvg-js": "2.6.2",
     "axe-core": "4.14.0",
     "esbuild": "0.28.2",

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

@@ -1,7 +0,0 @@
-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

@@ -1,105 +0,0 @@
-// 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() };
-}