@openpresentation/opf-editor 0.27.0 → 0.29.0

package/dist/workspace.js

@@ -7,35 +7,49 @@
 // A host picks a layout: `"full"` (a bar, the source, the slide, the slide row and a side panel are built for it), `"canvas"`, `"source"`,
 // or `slots`, an object of its own elements, one per part, for a host that arranges the page itself. Each part is optional (`panels`).
 // Nothing here fetches anything, stores anything on its own or talks to a service; the host supplies fonts, catalogs and storage.
-import { toSvg } from "@openpresentation/opf-render/svg";
 import { OPFEditorError, createEditorSession, mergeCatalogs } from "./index.js";
-import { createCanvasEditor } from "./canvas.js";
 import { whenFontsReady } from "./font-gate.js";
 import { createSourcePane } from "./source-pane.js";
-import { createSlideNavigator } from "./slide-navigator.js";
-import { createThumbnailStrip } from "./thumbnail-strip.js";
-import { createThumbnailCache } from "./thumbnail-cache.js";
-import { createSlideManager } from "./slide-manager.js";
-import { createOutlineView } from "./outline-view.js";
-import { createExportMenu } from "./export-menu.js";
-import { bindPresentShortcut, createPresentButton, createPresenter } from "./presenter.js";
-import { createReviewPanel } from "./review-panel.js";
-import { createFindPanel, installFindShortcuts } from "./find-panel.js";
-import { createDesignControls } from "./design-controls.js";
 import { createPersistence } from "./persistence.js";
 import { createPersistenceUi } from "./persistence-ui.js";
-import { prepareDimensionSwitch } from "./switches.js";
-import { mergeSlides, splitSlideByBlocks } from "./content-actions.js";
-import { installCanvasVariableEditing } from "./canvas-variables.js";
-import { createLayoutStudio } from "./workspace-layouts.js";
-import { fontSubstitutionNotes, layoutOptionsFor } from "./workspace-measure.js";
 import { buildWorkspaceShell } from "./workspace-shell.js";
+import { fontSubstitutionNotes, layoutOptionsFor } from "./workspace-measure.js";
 import { SOURCE_CHECKS, copyText, downloadSourceFile, lf, reportSource } from "./workspace-source.js";
 import { createThemeController } from "./workspace-theme.js";
 import { retainedSlideIndex } from "./slide-retention.js";
 import { createSourceMemory, updateJsonSource } from "./exact-source.js";
 
 export { THEME_TOKENS, createThemeController, normalizeTheme, normalizeThemeTokens } from "./workspace-theme.js";
+// The script-aware measurement options for composing one slide: a host that calls `composeSlide` or `paginateSlide` on the session passes these (the playground does).
+export { layoutOptionsFor } from "./workspace-measure.js";
+
+// The slide and everything around it (the renderer, the canvas, the slide row, the presenter, Export, Review, Find, Design and the views) load
+// on demand, in one chunk (`workspace-parts.js`): a host that mounts only the source pane never loads the renderer. Its factories are bound
+// here once the chunk has arrived, before any part is mounted.
+let toSvg, createCanvasEditor, createSlideNavigator, createThumbnailStrip, createThumbnailCache, createSlideManager, createOutlineView, createExportMenu;
+let bindPresentShortcut, createPresentButton, createPresenter, createReviewPanel, createFindPanel, installFindShortcuts, createDesignControls;
+let prepareDimensionSwitch, mergeSlides, splitSlideByBlocks, installCanvasVariableEditing, createLayoutStudio, buildStudioShell, createStudio;
+let partsModule;
+let partsLoaded = false;
+function loadParts() {
+  partsModule ??= import("./workspace-parts.js").then((parts) => {
+    ({ toSvg, createCanvasEditor, createSlideNavigator, createThumbnailStrip, createThumbnailCache, createSlideManager, createOutlineView, createExportMenu } = parts);
+    ({ bindPresentShortcut, createPresentButton, createPresenter, createReviewPanel, createFindPanel, installFindShortcuts, createDesignControls } = parts);
+    ({ prepareDimensionSwitch, mergeSlides, splitSlideByBlocks, installCanvasVariableEditing, createLayoutStudio, buildStudioShell, createStudio } = parts);
+    partsLoaded = true;
+  });
+  // A chunk that failed to load is asked for again by the next editor.
+  partsModule.catch(() => {
+    partsModule = undefined;
+  });
+  return partsModule;
+}
+/**
+ * Whether the parts to mount need the slide chunk: any part but the source pane, its autosave and the history buttons, that has an element to
+ * mount in (the presenter mounts in the overlay).
+ */
+const SOURCE_ONLY_PARTS = new Set(["source", "persistence", "history"]);
+const needsSlideParts = (parts, slots) => Object.entries(parts).some(([name, on]) => on && !SOURCE_ONLY_PARTS.has(name) && (name === "present" || Boolean(slots[name])));
 
 const VIEWS = Object.freeze(["slide", "sorter", "outline", "layouts"]);
 const MUTATORS = new Set(["set", "setGroupComposition", "setCatalog", "setCatalogs", "applyPatch", "replaceDocument", "restoreState", "undo", "redo", "setComposition", "paginateSlide"]);
@@ -55,7 +69,11 @@ const LAYOUT_PARTS = {
   full: { source: true, navigator: true, thumbnails: true, history: true, find: true, present: true, export: true, review: true, layouts: true, sorter: true, outline: true },
   canvas: { navigator: true, thumbnails: true, history: true },
   source: { source: true },
+  // CE-20: the Studio and its Playground preset arrange the same parts; the Studio mounts its own Design panel.
+  studio: { source: true, navigator: true, thumbnails: true, history: true, find: true, present: true, export: true, review: true, layouts: true, slides: true },
+  playground: { source: true, navigator: true, thumbnails: true, history: true, find: true, present: true, export: true, review: true, layouts: true, slides: true },
 };
+const STUDIO_LAYOUTS = new Set(["studio", "playground"]);
 
 const isThenable = (value) => value !== null && typeof value === "object" && typeof value.then === "function";
 
@@ -108,7 +126,9 @@ function resolveParts(options, layout, slots) {
 }
 
 /**
- * Mount the editor in `element`. Returns the handle at once; with a `fonts` promise the parts mount when it resolves (`ready` settles then).
+ * Mount the editor in `element`. Returns the handle at once; the parts mount once a `fonts` promise has resolved and, for a layout that shows
+ * slides, once the slide chunk has loaded (`mounted` is emitted then, and `ready` settles after the first update). A source-only editor whose
+ * fonts are at hand mounts before this returns.
  * See `workspace.d.ts` for the options and the handle.
  */
 export function createOpfEditor(element, options = {}) {
@@ -150,6 +170,7 @@ export function createOpfEditor(element, options = {}) {
   for (const [name, listener] of Object.entries(options.on ?? {})) on(name, listener);
   if (options.onChange) on("change", options.onChange);
   if (options.onSelection) on("selection", options.onSelection);
+  if (options.onCursor) on("cursor", options.onCursor);
   if (options.onError) on("error", ({ error, ...detail }) => options.onError(error, detail));
   if (options.onReady) on("ready", options.onReady);
 
@@ -162,8 +183,9 @@ export function createOpfEditor(element, options = {}) {
 
   // ---- layout, parts and slots ------------------------------------------------------------------------------------------------
   const given = options.slots ?? {};
-  const layout = options.slots ? "slots" : (options.layout ?? "full");
-  if (!["full", "canvas", "source", "slots"].includes(layout)) throw new RangeError('layout must be "full", "canvas" or "source", or pass `slots`.');
+  const layout = options.slots && !STUDIO_LAYOUTS.has(options.layout) ? "slots" : (options.layout ?? "full");
+  if (!["full", "canvas", "source", "slots", "studio", "playground"].includes(layout)) throw new RangeError('layout must be "full", "canvas", "source", "studio" or "playground", or pass `slots`.');
+  const studioLayout = STUDIO_LAYOUTS.has(layout);
   const parts = resolveParts(options, layout, given);
   const views = VIEWS.filter((view) => view === "slide" || parts[view]);
   if (options.view !== undefined && !views.includes(options.view)) throw new RangeError(`view "${options.view}" is not available in this layout (${views.join(", ")}).`);
@@ -180,13 +202,27 @@ export function createOpfEditor(element, options = {}) {
   const themeController = createThemeController(element, options.theme);
   let slots = { ...given };
   let controls = {};
+  let studioShell = null;
+  let overlay = root;
+  // CE-20: the Studio builds its own shell; a host's slots add parts to it (`topbarEnd`, `overlay`). Its code is in the slide chunk, so the Studio
+  // shell is built once that has loaded, right before the parts mount.
+  function buildStudio() {
+    const built = buildStudioShell(root, { parts, layout, labels: options.labels, studio: options.studio, slots: given });
+    const { topbarEnd: _placed, ...rest } = given;
+    slots = { ...built.slots, ...rest };
+    controls = built.controls;
+    studioShell = built.shell;
+    overlay = slots.overlay ?? root;
+  }
   if (layout === "slots") root.setAttribute("data-opf-layout", "slots");
-  else {
+  else if (!studioLayout) {
     const built = buildWorkspaceShell(root, { parts, views, layout, labels: options.labels });
     slots = { ...built.slots, ...given };
     controls = built.controls;
   }
-  const overlay = slots.overlay ?? root;
+  overlay = slots.overlay ?? root;
+  // The slide chunk is loaded before the parts mount, unless only the source pane (with its autosave) is mounted. The Studio always needs it.
+  const slideParts = studioLayout || needsSlideParts(parts, slots);
 
   // ---- state ------------------------------------------------------------------------------------------------------------------
   let fonts;
@@ -198,6 +234,8 @@ export function createOpfEditor(element, options = {}) {
   let sorter;
   let outline;
   let studio;
+  let studioCtl;
+  let fontsPending = false;
   let presenter;
   let presentButton;
   let exportMenu;
@@ -220,6 +258,7 @@ export function createOpfEditor(element, options = {}) {
   let drafting = false;
   let openedText;
   let sourceState = null;
+  let sourceCursor = null;
   let fontsFailure;
   let refreshToken = 0;
   let lastRefresh = Promise.resolve();
@@ -230,7 +269,7 @@ export function createOpfEditor(element, options = {}) {
   let frameSize = { width: 0, height: 0 };
   const draftMemory = createSourceMemory();
   const variablesMode = options.variables === "resolved" ? "resolved" : "authored";
-  const fitMode = options.fit === undefined ? (layout === "slots" ? false : "contain") : options.fit;
+  const fitMode = studioLayout ? false : options.fit === undefined ? (layout === "slots" ? false : "contain") : options.fit;
 
   const say = (message) => {
     statusText = message;
@@ -251,7 +290,8 @@ export function createOpfEditor(element, options = {}) {
 
   // ---- navigation and the refresh loop ----------------------------------------------------------------------------------------
   function renderViews(deck) {
-    thumbnailCache?.prepare(deck);
+    // The Studio's filmstrip draws the thumbnails it shows itself, as they scroll in.
+    if (!studioLayout) thumbnailCache?.prepare(deck);
     slideManager?.render();
     if (activeView === "sorter") sorter?.render();
     if (activeView === "outline") outline?.render();
@@ -279,7 +319,8 @@ export function createOpfEditor(element, options = {}) {
   }
   function sync() {
     fonts?.registry?.clearSubstitutions?.();
-    const deck = session.presentation;
+    // The frozen snapshot (one object per version): the session's `presentation` copies the whole deck on every read.
+    const deck = session.snapshot().presentation;
     slideIndex = Math.max(0, Math.min(slideIndex, deck.slides.length - 1));
     renderViews(deck);
     slideNav?.setSlide(slideIndex);
@@ -296,16 +337,18 @@ export function createOpfEditor(element, options = {}) {
     if (!mounted || destroyed) return Promise.resolve();
     const token = ++refreshToken;
     let loaded = false;
-    lastRefresh = whenFontsReady(fonts, session.presentation, {
+    lastRefresh = whenFontsReady(fonts, session.snapshot().presentation, {
       renderOptions: renderOptions(),
       isCurrent: () => token === refreshToken && !destroyed,
       loading: () => {
         loaded = true;
+        fontsPending = true;
         emit("fonts", { state: "loading" });
         say(MESSAGES.loadingFonts);
       },
       ready: () => {
         fontsFailure = undefined;
+        fontsPending = false;
         if (loaded) {
           thumbnailCache?.clear();
           emit("fonts", { state: "ready" });
@@ -350,7 +393,8 @@ export function createOpfEditor(element, options = {}) {
   }
   function goTo(index, path) {
     if (index !== slideIndex && !go(index)) return false;
-    if (path) canvas?.reveal(path);
+    if (studioCtl) studioCtl.revealPath(path ?? `slides.${index}`);
+    else if (path) canvas?.reveal(path);
     return true;
   }
 
@@ -363,7 +407,8 @@ export function createOpfEditor(element, options = {}) {
     if (controls.redo) controls.redo.disabled = !inSync || readOnly || !session.canRedo;
     // Text in the source pane that is not a valid deck: the slide shows the last valid one and is not editable until the text is fixed.
     const frame = slots.canvas && (slots.slide ?? slots.canvas);
-    if (frame && (!inSync || readOnly)) frame.setAttribute("inert", "");
+    // The Studio keeps selection, zoom and Present while read-only (its commands say why they are off); only invalid text locks the slide.
+    if (frame && (!inSync || (readOnly && !studioLayout))) frame.setAttribute("inert", "");
     else frame?.removeAttribute("inert");
   }
   function applyFit() {
@@ -389,7 +434,8 @@ export function createOpfEditor(element, options = {}) {
       setSlideIndex: (index) => {
         go(index);
       },
-      renderThumbnail: (deck, index) => thumbnailCache.html(deck, index),
+      // The Studio's filmstrip draws only the thumbnails it shows (an IntersectionObserver fills the rest as they scroll in).
+      renderThumbnail: studioLayout ? (deck, index) => thumbnailCache.peek(deck, index) ?? "" : (deck, index) => thumbnailCache.html(deck, index),
       renderLayoutPreview: (deck, index, choice) => {
         const candidate = prepareDimensionSwitch(deck, "layouts", choice.id, { slideIndex: index, catalogs: catalogs() }).presentation;
         return toSvg(candidate, index + 1, { ...renderOptions(), fonts, text: "system", trace: false });
@@ -450,6 +496,7 @@ export function createOpfEditor(element, options = {}) {
     return true;
   }
   function showPanel(name, focus = false) {
+    if (studioCtl) return studioCtl.showTab(name, { focus });
     const tabs = controls.tabs;
     if (!tabs?.[name]) return false;
     for (const [tabName, tab] of Object.entries(tabs)) {
@@ -471,6 +518,8 @@ export function createOpfEditor(element, options = {}) {
     strip?.destroy();
     slideNav = undefined;
     strip = undefined;
+    // The Studio shows its filmstrip; the slide row is the Playground preset's, mounted only while that preset is on.
+    if (studioLayout && (studioCtl?.layout ?? layout) !== "playground") return;
     if (parts.navigator && slots.navigator) {
       slideNav = createSlideNavigator(slots.navigator, {
         editor: ui,
@@ -538,6 +587,7 @@ export function createOpfEditor(element, options = {}) {
     return {
       ...(configured.outline !== undefined ? { outline: configured.outline } : {}),
       ...(configured.applyDelay !== undefined ? { applyDelay: configured.applyDelay } : {}),
+      ...(configured.cursorDelay !== undefined ? { cursorDelay: configured.cursorDelay } : {}),
       ...(configured.completions !== undefined ? { completions: configured.completions } : {}),
       ...(configured.catalogs !== undefined ? { catalogs: configured.catalogs } : {}),
       ...(configured.name !== undefined ? { name: configured.name } : {}),
@@ -553,6 +603,11 @@ export function createOpfEditor(element, options = {}) {
         configured.onRename?.(name);
         emit("rename", { name });
       },
+      // CE-17: the path under the caret of the source pane, as `cursor` events.
+      onCursor: (detail) => {
+        sourceCursor = Object.freeze(detail);
+        emit("cursor", sourceCursor);
+      },
       getFindings: ({ format, text: shown }) => {
         reportedText = shown;
         const made = reportSource(format, shown, { catalogs: catalogs(), checks: configured.checks ?? SOURCE_CHECKS });
@@ -615,6 +670,7 @@ export function createOpfEditor(element, options = {}) {
     );
     canvas = createCanvasEditor(slots.canvas, {
       ...configured,
+      ...(studioLayout ? { textEntry: layout === "playground" ? "click" : "dblclick", targets: layout === "playground" ? "interactive" : "passive", escape: "commit" } : {}),
       editor: ui,
       fonts,
       renderOptions: renderOptions(),
@@ -625,17 +681,22 @@ export function createOpfEditor(element, options = {}) {
         if (event.state === "error") {
           fontsFailure = event.error;
           say(event.error.message);
-        } else if (event.state === "loading") say(MESSAGES.loadingFonts);
+        } else if (event.state === "loading") {
+          fontsPending = true;
+          say(MESSAGES.loadingFonts);
+        }
         else if (fontsFailure) {
           fontsFailure = undefined;
           refresh();
         }
+        if (event.state === "ready") fontsPending = false;
         emit("fonts", event);
         configured.onFonts?.(event);
       },
       onSelect: (value) => {
         selection = { path: value.path, value: value.value };
-        emit("selection", { path: value.path, value: value.value, slideIndex, element: value.element });
+        // The Studio emits its own selection (a list of nodes); the canvas's single selection is internal there.
+        if (!studioLayout) emit("selection", { path: value.path, value: value.value, slideIndex, element: value.element });
         design?.refresh();
         configured.onSelect?.(value);
       },
@@ -773,7 +834,7 @@ export function createOpfEditor(element, options = {}) {
       onFocusField: ({ fix, target }) => emit("review-focus", { fix, target }),
       onStatus: say,
       onChange: (counts) => {
-        const tab = controls.tabs?.review;
+        const tab = controls.tabs?.review ?? studioShell?.tabs.review?.tab;
         if (tab) {
           const name = options.labels?.review ?? "Review";
           const found = !counts.unavailable && counts.total;
@@ -785,13 +846,13 @@ export function createOpfEditor(element, options = {}) {
     });
   }
 
-  function present() {
+  function present(from) {
     if (destroyed || !mounted || !presenter || presenter.isRunning() || !inSync || slides.length === 0) return false;
     // An open canvas edit is committed, and text typed a moment ago is applied, before the document is shown; a source that is not a valid deck waits.
     if (canvas?.commit() === false) return false;
     pane?.getText();
     if (draftInvalid) return false;
-    void presenter.start(canvas?.slideIndex ?? slideIndex);
+    void presenter.start(Number.isInteger(from) ? from : (canvas?.slideIndex ?? slideIndex));
     return true;
   }
 
@@ -799,7 +860,7 @@ export function createOpfEditor(element, options = {}) {
     slides = session.presentation.slides ?? [];
     authoredTemplate = session.presentation.template === true;
     if (parts.canvas && slots.canvas) mountCanvas();
-    thumbnailCache = createThumbnailCache({ toSvg, getOptions: () => ({ ...renderOptions(), fonts, text: "system", trace: false }) });
+    if (slideParts) thumbnailCache = createThumbnailCache({ toSvg, getOptions: () => ({ ...renderOptions(), fonts, text: "system", trace: false }) });
     mountSlideRow();
     if (parts.slides && slots.slides) slideManager = createSlideManager(slots.slides, { ...slideManagerOptions(), ...(slots.slideToolbar ? { toolbar: slots.slideToolbar } : {}) });
     if (parts.source && slots.source) {
@@ -857,6 +918,7 @@ export function createOpfEditor(element, options = {}) {
     if (parts.persistence) mountPersistence();
     mountControls();
     mountEnvironment();
+    if (studioShell && canvas) mountStudio();
     // These come last, so a host hears a change after every part has. The refresh runs for every event, the catalogs' included.
     cleanups.push(
       session.subscribe((event) => {
@@ -880,6 +942,66 @@ export function createOpfEditor(element, options = {}) {
     );
   }
 
+  // CE-20: the Studio over the parts mounted above (src/studio.js).
+  function mountStudio() {
+    studioCtl = createStudio({
+      root,
+      element,
+      shell: studioShell,
+      slots,
+      session,
+      ui,
+      canvas,
+      options,
+      layout,
+      hostCatalogs,
+      get pane() {
+        return pane;
+      },
+      get find() {
+        return find;
+      },
+      get exportMenu() {
+        return exportMenu;
+      },
+      get slideManager() {
+        return slideManager;
+      },
+      get thumbnailCache() {
+        return thumbnailCache;
+      },
+      get persistence() {
+        return persistence;
+      },
+      get handle() {
+        return handle;
+      },
+      slideIndex: () => slideIndex,
+      go: (index) => go(index),
+      present: (from) => present(from),
+      say,
+      emit,
+      report,
+      on,
+      setView: (view) => setView(view),
+      readOnly: () => readOnly,
+      inSync: () => inSync,
+      fontsLoading: () => fontsPending,
+      catalogs,
+      layoutFor: (deck, index) => layoutFor(deck, index),
+      setDocument: (document, openOptions) => setDocument(document, openOptions),
+      openFind: (openOptions) => {
+        if (!find) return false;
+        find.openPanel(openOptions ?? {});
+        return true;
+      },
+      getName: () => pane?.getName(),
+      setName: (name) => pane?.setName(name),
+      layoutStudio: () => studio,
+      mountSlideRow: () => mountSlideRow(),
+    });
+  }
+
   // The shell's own controls: history, views, tabs.
   function mountControls() {
     controls.undo?.addEventListener("click", () => undo());
@@ -967,6 +1089,7 @@ export function createOpfEditor(element, options = {}) {
     studio?.setReadOnly(readOnly);
     root.toggleAttribute("data-readonly", readOnly);
     syncChrome();
+    studioCtl?.refresh();
   }
   function setDensity(setting) {
     const next = densityFor(setting);
@@ -1004,16 +1127,29 @@ export function createOpfEditor(element, options = {}) {
     } catch (error) {
       if (error?.code !== "invalid-opf-edit") throw error;
       // A document the session refuses is no document to open: show its text with its findings, as a draft the person can fix.
-      if (pane && text !== undefined) {
-        if (openOptions.format && pane.getFormat() !== openOptions.format) pane.setFormat(openOptions.format);
-        const api = pane.editor.api;
-        api.replace(0, api.getValue().length, text);
-        pane.getText();
-        if (openOptions.name !== undefined) pane.setName(openOptions.name);
-      }
+      if (pane && text !== undefined) pane.setSourceText(text, { ...(openOptions.format ? { format: openOptions.format } : {}), ...(openOptions.name !== undefined ? { name: openOptions.name } : {}) });
       return false;
     }
   }
+  // Raw text in the source pane (a file as it was read, a draft that does not parse), without converting it: what the person would get by
+  // pasting it over everything. True when the session now holds its document; false when it stays a draft with its problems.
+  function setSourceText(text, openOptions = {}) {
+    if (destroyed || !mounted) throw new OPFEditorError("not-ready", "The editor is not mounted yet. Await `ready` first.");
+    if (!pane) throw new OPFEditorError("no-source-pane", "This editor has no source pane.");
+    if (readOnly) throw new OPFEditorError("read-only", "This editor is read-only.");
+    if (typeof text !== "string") throw new TypeError("setSourceText needs the source text as a string.");
+    // An open canvas edit is committed first; the text then replaces it.
+    if (canvas?.commit() === false) return false;
+    drafting = false;
+    openedText = undefined;
+    const applied = pane.setSourceText(text, {
+      ...(openOptions.format ? { format: openOptions.format } : {}),
+      ...(openOptions.name !== undefined ? { name: openOptions.name } : {}),
+    });
+    // Text the host loaded is not the person's work: it is not autosaved or warned about until it is edited.
+    if (applied && openOptions.rebase !== false) persistence?.rebase();
+    return applied;
+  }
 
   let fontsRef = { value: undefined };
   let releaseFonts;
@@ -1074,8 +1210,34 @@ export function createOpfEditor(element, options = {}) {
     get slideIndex() {
       return slideIndex;
     },
+    /** The selection: the canvas's `{ path, value }` (or null); in the Studio, the list `[{ key, path, idPath, kind }]`. */
     get selection() {
-      return selection;
+      return studioCtl ? studioCtl.selection : selection;
+    },
+    /** CE-20: the arrangement ("full", "canvas", "source", "slots", or the Studio's "studio" and "playground"). */
+    get layout() {
+      return studioCtl?.layout ?? layout;
+    },
+    /** CE-20: switch the Studio between "studio" and "playground" in place (same session, history, slide and selection). */
+    setLayout(next) {
+      if (!studioCtl) return false;
+      return studioCtl.setLayout(next);
+    },
+    get zoom() {
+      return studioCtl?.zoom ?? 1;
+    },
+    setZoom(value) {
+      studioCtl?.setZoom(value);
+    },
+    fit(mode) {
+      studioCtl?.fit(mode);
+    },
+    openLayout(layoutId, openOptions = {}) {
+      return studioCtl ? studioCtl.openLayout(layoutId, openOptions) : false;
+    },
+    /** CE-20: the Studio's command registry (`list`, `run`, `register`); empty outside the Studio. */
+    get commands() {
+      return studioCtl?.commands ?? { list: () => [], run: () => false, register: () => () => {} };
     },
     get view() {
       return activeView;
@@ -1090,6 +1252,9 @@ export function createOpfEditor(element, options = {}) {
       return inSync;
     },
     /** The latest verdict on the text of the source pane (what the last `source` event carried), or `null` before the first. */
+    get sourceCursor() {
+      return sourceCursor;
+    },
     get sourceState() {
       return sourceState;
     },
@@ -1103,11 +1268,13 @@ export function createOpfEditor(element, options = {}) {
       return session.snapshot().presentation;
     },
     setDocument,
+    setSourceText,
     setView,
     setSlide: go,
     goTo,
-    select(path, { focus = false } = {}) {
-      return canvas?.reveal(path, { focus }) ?? null;
+    select(path, selectOptions = {}) {
+      if (studioCtl) return studioCtl.selectTargets(path, selectOptions);
+      return canvas?.reveal(path, { focus: Boolean(selectOptions.focus) }) ?? null;
     },
     showPanel,
     present,
@@ -1174,6 +1341,7 @@ export function createOpfEditor(element, options = {}) {
           /* already gone */
         }
       }
+      studioCtl?.destroy();
       unbindKeys?.();
       checking?.disconnect();
       persistence?.destroy();
@@ -1201,6 +1369,7 @@ export function createOpfEditor(element, options = {}) {
 
   // ---- start ------------------------------------------------------------------------------------------------------------------
   function mount(resolved) {
+    if (studioLayout && !studioShell) buildStudio();
     fonts = resolved;
     density = densityFor(options.density);
     exportMode = exportModeFor(options.exportMode);
@@ -1241,15 +1410,20 @@ export function createOpfEditor(element, options = {}) {
     };
     try {
       fontsRef = fontsSource(options.fonts);
-      if (isThenable(fontsRef.value)) {
-        say(MESSAGES.loadingFonts);
-        Promise.resolve(fontsRef.value).then((resolved) => {
+      const chunk = slideParts && !partsLoaded ? loadParts() : null;
+      if (isThenable(fontsRef.value) || chunk) {
+        if (isThenable(fontsRef.value)) say(MESSAGES.loadingFonts);
+        Promise.all([fontsRef.value, chunk]).then(([resolved]) => {
           try {
             start(resolved);
           } catch (error) {
             fail(error);
           }
-        }, fail);
+        }, (error) => {
+          // The slide chunk did not load: fonts that did arrive are given back.
+          Promise.resolve(fontsRef.value).then((resolved) => fontsRef.use(resolved).release?.(), () => {});
+          fail(error);
+        });
       } else start(fontsRef.value);
     } catch (error) {
       fail(error);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-editor",
-  "version": "0.27.0",
+  "version": "0.29.0",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",
@@ -239,6 +239,10 @@
       "types": "./dist/source-pane.d.ts",
       "default": "./dist/source-pane.js"
     },
+    "./exact-source": {
+      "types": "./dist/exact-source.d.ts",
+      "default": "./dist/exact-source.js"
+    },
     "./presenter": {
       "types": "./dist/presenter.d.ts",
       "default": "./dist/presenter.js"
@@ -281,25 +285,29 @@
     }
   },
   "types": "./dist/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/source-worker.js",
+    "./dist/styles.css"
+  ],
   "dependencies": {
-    "@codemirror/autocomplete": "6.20.3",
-    "@codemirror/commands": "6.11.1",
-    "@codemirror/lang-json": "6.0.2",
-    "@codemirror/lang-yaml": "6.1.3",
-    "@codemirror/language": "6.13.1",
-    "@codemirror/lint": "6.9.7",
-    "@codemirror/search": "6.7.2",
-    "@codemirror/state": "6.7.6",
-    "@codemirror/view": "6.43.14",
-    "@lezer/highlight": "1.2.5",
+    "@codemirror/autocomplete": "^6.20.4",
+    "@codemirror/commands": "^6.11.1",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-yaml": "^6.1.3",
+    "@codemirror/language": "^6.13.1",
+    "@codemirror/lint": "^6.9.7",
+    "@codemirror/search": "^6.7.2",
+    "@codemirror/state": "^6.7.6",
+    "@codemirror/view": "^6.43.15",
+    "@lezer/highlight": "^1.2.5",
     "jsonc-parser": "3.3.1",
     "yaml": "^2.9.1",
-    "@openpresentation/opf": "^0.27.0"
+    "@openpresentation/opf": "^0.29.0"
   },
   "peerDependencies": {
     "react": ">=18",
-    "@openpresentation/opf-render": "^0.27.0"
+    "react-dom": ">=18",
+    "@openpresentation/opf-render": "^0.29.0"
   },
   "peerDependenciesMeta": {
     "@openpresentation/opf-render": {
@@ -307,6 +315,9 @@
     },
     "react": {
       "optional": true
+    },
+    "react-dom": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -360,14 +371,14 @@
     "jszip": "3.10.2",
     "pdf-lib": "1.17.1",
     "pdfjs-dist": "6.4.299",
-    "playwright": "1.64.0",
+    "playwright": "1.64.1",
     "react": "19.3.1",
     "react-dom": "19.3.1",
     "react-18": "npm:react@18.3.1",
     "react-dom-18": "npm:react-dom@18.3.1",
-    "@openpresentation/opf-pptx": "0.27.0",
-    "@openpresentation/gallery": "0.27.0",
-    "@openpresentation/opf-render": "0.27.0"
+    "@openpresentation/gallery": "0.29.0",
+    "@openpresentation/opf-pptx": "0.29.0",
+    "@openpresentation/opf-render": "0.29.0"
   },
   "scripts": {
     "build": "node scripts/build.mjs",
@@ -420,5 +431,5 @@
     "test:workspace-browser": "node test/workspace-browser.mjs",
     "test:workspace-react-browser": "node test/workspace-react-browser.mjs"
   },
-  "gitHead": "f90536d0e9a7a16b25aa718e03ced4e00a7316e1"
+  "gitHead": "464e10d3c15647b0e43326ac7e6761e34789991a"
 }