@openpresentation/opf-editor 0.28.0 → 0.29.1

package/dist/workspace.js

@@ -7,29 +7,13 @@
 // 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";
@@ -39,6 +23,34 @@ export { THEME_TOKENS, createThemeController, normalizeTheme, normalizeThemeToke
 // 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"]);
 const STARTER = Object.freeze({ name: "Untitled presentation", slides: [{ id: "slide-1", title: "Untitled slide" }] });
@@ -57,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";
 
@@ -110,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 = {}) {
@@ -165,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(", ")}).`);
@@ -183,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;
@@ -201,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;
@@ -231,10 +266,35 @@ export function createOpfEditor(element, options = {}) {
   let statusText = "";
   let density = "comfortable";
   let exportMode = "menu";
+  // The parts are bound once the slide chunk has arrived and the fonts are at hand; `partsReady` is true from then on. A call on the handle made
+  // before that (a React host's effects run right after `createOpfEditor` returns) must neither reach a factory that is not bound yet nor be lost:
+  // a setting is remembered in `requested` and read when the parts mount; a call that acts on a mounted part waits in `queued` and runs, in order,
+  // once the editor is mounted (a later call with the same key replaces the earlier one).
+  let partsReady = false;
+  const requested = {};
+  const queued = [];
+  const waiting = () => !mounted && !destroyed;
+  const queue = (key, task) => {
+    const at = queued.findIndex((entry) => entry.key === key);
+    if (at >= 0) queued.splice(at, 1);
+    const entry = { key, task };
+    queued.push(entry);
+    return entry;
+  };
+  function flushQueued() {
+    for (const { task } of queued.splice(0)) {
+      if (destroyed) return;
+      try {
+        task();
+      } catch (error) {
+        report(error);
+      }
+    }
+  }
   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;
@@ -255,7 +315,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();
@@ -283,7 +344,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);
@@ -300,16 +362,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" });
@@ -353,8 +417,14 @@ export function createOpfEditor(element, options = {}) {
     return false;
   }
   function goTo(index, path) {
+    if (waiting()) {
+      go(index);
+      queue("goTo", () => goTo(index, path));
+      return true;
+    }
     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;
   }
 
@@ -367,7 +437,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() {
@@ -393,7 +464,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 });
@@ -412,6 +484,7 @@ export function createOpfEditor(element, options = {}) {
     if (!views.includes(view)) return false;
     if (!mounted) {
       activeView = view;
+      requested.view = view;
       return true;
     }
     if (view !== "slide" && canvas && !canvas.commit()) return false;
@@ -454,6 +527,16 @@ export function createOpfEditor(element, options = {}) {
     return true;
   }
   function showPanel(name, focus = false) {
+    if (!mounted) {
+      // The tabs of the shell are known now, the Studio's when it mounts; the panel is shown after the default one.
+      if (destroyed || (!studioLayout && !controls.tabs?.[name])) return false;
+      queue("panel", () => showPanel(name, focus));
+      return true;
+    }
+    return showPanelNow(name, focus);
+  }
+  function showPanelNow(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)) {
@@ -470,11 +553,16 @@ export function createOpfEditor(element, options = {}) {
 
   // ---- the parts --------------------------------------------------------------------------------------------------------------
   function mountSlideRow() {
+    // The row is built from the slide chunk's factories: before they are bound (and after destroy) there is nothing to rebuild; the first
+    // mount reads the density and the layout as they are by then.
+    if (!partsReady || destroyed) return;
     unbindKeys?.();
     slideNav?.destroy();
     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,
@@ -545,7 +633,7 @@ export function createOpfEditor(element, options = {}) {
       ...(configured.cursorDelay !== undefined ? { cursorDelay: configured.cursorDelay } : {}),
       ...(configured.completions !== undefined ? { completions: configured.completions } : {}),
       ...(configured.catalogs !== undefined ? { catalogs: configured.catalogs } : {}),
-      ...(configured.name !== undefined ? { name: configured.name } : {}),
+      ...((requested.name ?? configured.name) !== undefined ? { name: requested.name ?? configured.name } : {}),
       ...(text !== undefined ? { source: text } : {}),
       editor: ui,
       format: configured.format ?? "json",
@@ -625,6 +713,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(),
@@ -635,17 +724,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);
       },
@@ -783,7 +877,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;
@@ -795,13 +889,17 @@ export function createOpfEditor(element, options = {}) {
     });
   }
 
-  function present() {
+  function present(from) {
+    if (waiting() && parts.present) {
+      queue("present", () => present(from));
+      return true;
+    }
     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;
   }
 
@@ -809,7 +907,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) {
@@ -867,6 +965,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) => {
@@ -890,23 +989,83 @@ 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());
     controls.redo?.addEventListener("click", () => redo());
     for (const [name, button] of Object.entries(controls.views ?? {})) button.addEventListener("click", () => setView(name, { focus: true }));
     for (const [name, tab] of Object.entries(controls.tabs ?? {})) {
-      tab.addEventListener("click", () => showPanel(name));
+      tab.addEventListener("click", () => showPanelNow(name));
       tab.addEventListener("keydown", (event) => {
         if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
         event.preventDefault();
         const names = Object.keys(controls.tabs);
         const at = names.indexOf(name);
         const next = event.key === "Home" ? 0 : event.key === "End" ? names.length - 1 : (at + (event.key === "ArrowRight" ? 1 : -1) + names.length) % names.length;
-        showPanel(names[next], true);
+        showPanelNow(names[next], true);
       });
     }
-    if (controls.tabs) showPanel(options.panel && controls.tabs[options.panel] ? options.panel : Object.keys(controls.tabs)[0]);
+    if (controls.tabs) showPanelNow(options.panel && controls.tabs[options.panel] ? options.panel : Object.keys(controls.tabs)[0]);
     if (options.shortcuts !== false) {
       // Ctrl/Cmd+Z and +Shift+Z undo and redo when nothing that edits text has focus (the code editor and the canvas's inputs keep their own).
       const onKey = (event) => {
@@ -943,8 +1102,8 @@ export function createOpfEditor(element, options = {}) {
       media.addEventListener("change", change);
       cleanups.push(() => media.removeEventListener("change", change));
     };
-    follow(options.density, "(pointer: coarse)", setDensity);
-    follow(options.exportMode, "(max-width: 900px)", setExportMode);
+    follow("density" in requested ? requested.density : options.density, "(pointer: coarse)", setDensity);
+    follow("exportMode" in requested ? requested.exportMode : options.exportMode, "(max-width: 900px)", setExportMode);
   }
 
   // ---- the handle -------------------------------------------------------------------------------------------------------------
@@ -977,8 +1136,17 @@ export function createOpfEditor(element, options = {}) {
     studio?.setReadOnly(readOnly);
     root.toggleAttribute("data-readonly", readOnly);
     syncChrome();
+    studioCtl?.refresh();
   }
   function setDensity(setting) {
+    if (destroyed) return;
+    // Before the parts mount the setting is kept; the mount reads it instead of the `density` option.
+    if (!partsReady) {
+      requested.density = setting;
+      density = densityFor(setting);
+      root.setAttribute("data-density", density);
+      return;
+    }
     const next = densityFor(setting);
     if (next === density) return;
     density = next;
@@ -990,6 +1158,8 @@ export function createOpfEditor(element, options = {}) {
     mountSlideRow();
   }
   function setExportMode(setting) {
+    if (destroyed) return;
+    if (!partsReady) requested.exportMode = setting;
     exportMode = exportModeFor(setting);
     exportMenu?.setMode(exportMode);
   }
@@ -1014,17 +1184,50 @@ 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;
+  }
 
+  // The Studio's command registry is not there before mount: `register` keeps the command and adds it when the Studio mounts (the function it
+  // returns removes it either way); `list` is empty and `run` finds nothing yet.
+  const preMountCommands = {
+    list: () => [],
+    run: () => false,
+    register(command) {
+      if (!waiting() || !studioLayout) return () => {};
+      let stop;
+      let withdrawn = false;
+      const entry = queue(Symbol("command"), () => {
+        if (!withdrawn) stop = studioCtl?.commands.register(command);
+      });
+      return () => {
+        withdrawn = true;
+        const at = queued.indexOf(entry);
+        if (at >= 0) queued.splice(at, 1);
+        stop?.();
+      };
+    },
+  };
   let fontsRef = { value: undefined };
   let releaseFonts;
   let readyPromise;
@@ -1084,8 +1287,43 @@ 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 studioCtl.setLayout(next);
+      // Before mount the switch is queued (true), as the Studio's own check of the name would refuse it later.
+      if (!waiting() || !studioLayout) return false;
+      if (next !== "studio" && next !== "playground") throw new RangeError('setLayout takes "studio" or "playground".');
+      queue("layout", () => studioCtl?.setLayout(next));
+      return true;
+    },
+    get zoom() {
+      return studioCtl?.zoom ?? 1;
+    },
+    setZoom(value) {
+      if (studioCtl) studioCtl.setZoom(value);
+      else if (waiting() && studioLayout) queue("zoom", () => studioCtl?.setZoom(value));
+    },
+    fit(mode) {
+      if (studioCtl) studioCtl.fit(mode);
+      else if (waiting() && studioLayout) queue("zoom", () => studioCtl?.fit(mode));
+    },
+    openLayout(layoutId, openOptions = {}) {
+      if (studioCtl) return studioCtl.openLayout(layoutId, openOptions);
+      if (!waiting() || !studioLayout) return false;
+      queue("openLayout", () => studioCtl?.openLayout(layoutId, openOptions));
+      return true;
+    },
+    /** CE-20: the Studio's command registry (`list`, `run`, `register`); empty outside the Studio. Commands registered before mount are added when it mounts. */
+    get commands() {
+      return studioCtl?.commands ?? preMountCommands;
     },
     get view() {
       return activeView;
@@ -1116,11 +1354,17 @@ 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 (waiting()) {
+        queue("select", () => handle.select(path, selectOptions));
+        return studioLayout ? true : null;
+      }
+      if (studioCtl) return studioCtl.selectTargets(path, selectOptions);
+      return canvas?.reveal(path, { focus: Boolean(selectOptions.focus) }) ?? null;
     },
     showPanel,
     present,
@@ -1136,6 +1380,10 @@ export function createOpfEditor(element, options = {}) {
       return canvas?.commit() !== false;
     },
     focus(target) {
+      if (waiting()) {
+        queue("focus", () => handle.focus(target));
+        return true;
+      }
       if ((target ?? (pane ? "source" : "canvas")) === "source") {
         pane?.editor?.api?.focus?.();
         return Boolean(pane);
@@ -1145,6 +1393,10 @@ export function createOpfEditor(element, options = {}) {
       return Boolean(node);
     },
     openFind(openOptions) {
+      if (waiting() && parts.find) {
+        queue("find", () => handle.openFind(openOptions));
+        return true;
+      }
       if (!find) return false;
       find.openPanel(openOptions ?? {});
       return true;
@@ -1157,10 +1409,12 @@ export function createOpfEditor(element, options = {}) {
       return { text, format: pane.getFormat(), draft: draftInvalid };
     },
     setName(name) {
+      if (waiting()) requested.name = name;
       pane?.setName(name);
     },
     getName() {
-      return pane?.getName();
+      if (pane) return pane.getName();
+      return waiting() ? (requested.name ?? options.source?.name) : undefined;
     },
     setReadOnly(value) {
       readOnly = Boolean(value);
@@ -1187,6 +1441,7 @@ export function createOpfEditor(element, options = {}) {
           /* already gone */
         }
       }
+      studioCtl?.destroy();
       unbindKeys?.();
       checking?.disconnect();
       persistence?.destroy();
@@ -1214,17 +1469,23 @@ export function createOpfEditor(element, options = {}) {
 
   // ---- start ------------------------------------------------------------------------------------------------------------------
   function mount(resolved) {
+    if (studioLayout && !studioShell) buildStudio();
     fonts = resolved;
-    density = densityFor(options.density);
-    exportMode = exportModeFor(options.exportMode);
+    // A density, an export mode or a view the host chose before the parts mounted wins over the option.
+    density = densityFor("density" in requested ? requested.density : options.density);
+    exportMode = exportModeFor("exportMode" in requested ? requested.exportMode : options.exportMode);
     root.setAttribute("data-density", density);
+    partsReady = true;
     mountParts();
     mounted = true;
     if (readOnly) applyReadOnly();
     say(MESSAGES.ready);
-    if (options.view && options.view !== "slide") setView(options.view);
+    const wantedView = "view" in requested ? requested.view : options.view;
+    activeView = "slide";
+    if (wantedView && wantedView !== "slide") setView(wantedView);
     else markView("slide");
     syncChrome();
+    flushQueued();
   }
   readyPromise = new Promise((resolve, reject) => {
     const start = (arrived) => {
@@ -1254,15 +1515,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);