@openpresentation/opf-editor 0.29.1 → 0.30.0

package/dist/workspace.js

@@ -12,7 +12,10 @@ import { whenFontsReady } from "./font-gate.js";
 import { createSourcePane } from "./source-pane.js";
 import { createPersistence } from "./persistence.js";
 import { createPersistenceUi } from "./persistence-ui.js";
-import { buildWorkspaceShell } from "./workspace-shell.js";
+import { ITEM_SLOTS, TOOLBAR_PRESETS, buildItemControls, buildToolbar, buildWorkspaceShell, viewLabel } from "./workspace-shell.js";
+import { TOOLBAR_ITEMS, createToolbar, normalizeToolbarItems } from "./toolbar.js";
+import { normalizeIcons } from "./icons.js";
+import { deckNamePatch } from "./deck-title.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";
@@ -29,6 +32,7 @@ export { layoutOptionsFor } from "./workspace-measure.js";
 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 createDeckTitle, createExpandController, createExpandButton, createDesignMenu, createReviewPill, createHelpButton, createToolbarActions, listSwitchOptions;
 let partsModule;
 let partsLoaded = false;
 function loadParts() {
@@ -36,6 +40,7 @@ function loadParts() {
     ({ 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);
+    ({ createDeckTitle, createExpandController, createExpandButton, createDesignMenu, createReviewPill, createHelpButton, createToolbarActions, listSwitchOptions } = parts);
     partsLoaded = true;
   });
   // A chunk that failed to load is asked for again by the next editor.
@@ -49,7 +54,8 @@ function loadParts() {
  * 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 CHROME_PARTS = ["title", "counter", "expand", "designMenu", "reviewPill", "help", "actions"];
+const needsSlideParts = (parts, slots) => CHROME_PARTS.some((name) => slots[name]) || 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"]);
@@ -68,12 +74,48 @@ const PART_NAMES = ["source", "navigator", "thumbnails", "history", "find", "pre
 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 },
+  // CE-28: the slide alone, for a page that shows a deck (the homepage hero): its toolbar has the title, the history, the counter and Present.
+  embed: { history: true, present: true },
+  // CE-28 wave 2: a deck to look at: read-only, the slide and its counter, Present (Export when the toolbar lists it).
+  viewer: { present: 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 LAYOUTS = ["full", "canvas", "embed", "viewer", "source", "slots", "studio", "playground"];
+// The layouts that live inside a page: their keys (arrows, F5, Ctrl/Cmd Z and S, "?") act only while the focus is inside the editor.
+const SCOPED_LAYOUTS = new Set(["embed", "viewer"]);
+// CE-28: the toolbar items a host can place in its own element (`slots.<item>`); `autosave`, `export` and `present` were slots already.
+// The slots that hold only the toolbar or its items: given alone, the layout is still built.
+const CHROME_SLOTS = new Set(["title", "history", "counter", "views", "expand", "designMenu", "reviewPill", "help", "actions", "toolbar"]);
+// The slot that places an item in the host's own element: the item's name, but `designMenu` and `reviewPill` for `design` and `review`.
+const itemSlot = (id) => ITEM_SLOTS[id]?.[0] ?? id;
+const ITEM_SLOT_NAMES = new Set(["title", "history", "counter", "views", "expand", "autosave", "export", "present", "design", "review", "help", "actions"]);
+// Reserved (accepted and left out): `zoom` is the Studio's own.
+const RESERVED_ITEMS = new Set(["zoom"]);
+// CE-29 styling hooks: the icon names of every part the editor mounts, for the one flat `icons` option (`close` is the help sheet's and the
+// Design menu's both). Each part gets the names it has.
+const PART_ICONS = Object.freeze({
+  toolbar: ["more"],
+  expand: ["expand", "collapse"],
+  reviewPill: ["valid", "error", "warning", "info", "checking", "unavailable"],
+  help: ["help", "close"],
+  designMenu: ["trigger", "close", "check"],
+  navigator: ["previous", "next"],
+  strip: ["add"],
+  present: ["present"],
+});
+const ICON_NAMES = [...new Set(Object.values(PART_ICONS).flat())];
+
+/** The `toolbar` option as the list of items it asks for (the layout's preset when it is not given). */
+function toolbarSpec(options, layout) {
+  if (STUDIO_LAYOUTS.has(layout)) return [];
+  const spec = options.toolbar === false ? [] : options.toolbar === undefined || options.toolbar === true ? (TOOLBAR_PRESETS[layout] ?? []) : options.toolbar;
+  if (!Array.isArray(spec)) throw new TypeError("toolbar must be false or an array of toolbar items.");
+  return normalizeToolbarItems(spec);
+}
 
 const isThenable = (value) => value !== null && typeof value === "object" && typeof value.then === "function";
 
@@ -111,7 +153,7 @@ function guardSession(session, isReadOnly) {
   });
 }
 
-function resolveParts(options, layout, slots) {
+function resolveParts(options, layout, slots, asked = []) {
   const panels = options.panels ?? {};
   const base = LAYOUT_PARTS[layout];
   const parts = {};
@@ -122,9 +164,48 @@ function resolveParts(options, layout, slots) {
   }
   // The slide is the editor; a source-only layout has none.
   parts.canvas = layout === "source" ? false : panels.canvas !== false;
+  // CE-28 wave 2: an item the toolbar lists brings the part it shows: Export in the viewer, and Review (run without its panel where the layout
+  // has none, so the pill has counts) wherever it is listed.
+  const listed = (id) => asked.some((item) => item.id === id) || Boolean(slots[itemSlot(id)]);
+  if (panels.export === undefined && listed("export")) parts.export = true;
+  if (panels.review === undefined && listed("review") && !parts.review) {
+    parts.review = true;
+    // A layout without a Review panel gets none: the review runs headless for the pill.
+    parts.reviewHeadless = true;
+  }
   return parts;
 }
 
+/**
+ * CE-28: the toolbar items this editor builds: the preset of the layout, or the `toolbar` option, without the items it has nothing for (Export
+ * when there is no Export, the views with one view, a reserved name) and without the ones the host placed in its own element (`slots.<item>`).
+ */
+function resolveToolbar(options, layout, parts, views, given, items) {
+  if (STUDIO_LAYOUTS.has(layout)) return [];
+  const preset = options.toolbar === undefined || options.toolbar === true;
+  const available = {
+    // The Design quick menu stands in for the Design side panel: a preset leaves it out where that panel is on (the embed has none).
+    design: !(preset && parts.design && layout !== "embed"),
+    review: parts.review,
+    help: true,
+    actions: true,
+    title: true,
+    // A host that arranges the page itself and asks for the history in its toolbar gets it (there is no other slot to name it by).
+    history: parts.history || (layout === "slots" && options.panels?.history !== false),
+    counter: parts.canvas,
+    views: views.length > 1,
+    find: parts.find,
+    autosave: parts.persistence,
+    export: parts.export,
+    present: parts.present,
+    expand: true,
+    more: true,
+    spacer: true,
+    "|": true,
+  };
+  return items.filter((item) => !RESERVED_ITEMS.has(item.id) && available[item.id] && !(ITEM_SLOT_NAMES.has(item.id) && given[itemSlot(item.id)]));
+}
+
 /**
  * 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
@@ -139,8 +220,10 @@ export function createOpfEditor(element, options = {}) {
   const cleanups = [];
   let destroyed = false;
   let mounted = false;
-  let readOnly = Boolean(options.readOnly);
+  // The viewer is read-only unless the host says otherwise.
+  let readOnly = Boolean(options.readOnly ?? options.layout === "viewer");
   let lastError;
+  const densityFor = (setting) => (setting === "touch" || setting === "comfortable" ? setting : win?.matchMedia?.("(pointer: coarse)").matches ? "touch" : "comfortable");
 
   // ---- events -----------------------------------------------------------------------------------------------------------------
   function off(name, listener) {
@@ -153,6 +236,11 @@ export function createOpfEditor(element, options = {}) {
     return () => off(name, listener);
   }
   function emit(name, detail = {}) {
+    // A copy or a download of the source (or a JSON, YAML or Markdown export) is the person's work kept somewhere: no longer dirty.
+    if (name === "kept") recordBaseline();
+    // The host's actions read state the editor does not change through the document: whether it is saved, expanded, the slide on show.
+    // `ready` too: a host's `enabled: () => editor.dirty` reads its own `editor` variable, assigned only once `createOpfEditor` has returned.
+    if (name === "dirty" || name === "expand" || name === "slide" || name === "ready") actionsPart?.refresh();
     for (const listener of [...(listeners.get(name) ?? [])]) {
       try {
         listener(detail);
@@ -183,11 +271,26 @@ export function createOpfEditor(element, options = {}) {
 
   // ---- layout, parts and slots ------------------------------------------------------------------------------------------------
   const given = options.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`.');
+  // CE-28: slots for the toolbar's items only (mode B: the title in the host's own header) keep the built layout.
+  const chromeOnly = Boolean(options.slots) && Object.keys(options.slots).every((name) => CHROME_SLOTS.has(name));
+  const layout = options.slots && !STUDIO_LAYOUTS.has(options.layout) && !chromeOnly ? "slots" : (options.layout ?? "full");
+  if (!LAYOUTS.includes(layout)) throw new RangeError('layout must be "full", "canvas", "embed", "viewer", "source", "studio" or "playground", or pass `slots`.');
   const studioLayout = STUDIO_LAYOUTS.has(layout);
-  const parts = resolveParts(options, layout, given);
+  const asked = toolbarSpec(options, layout);
+  const icons = normalizeIcons(options.icons, ICON_NAMES, "createOpfEditor icons");
+  // The icons one part takes, or nothing (the part keeps its own) when the host gave none of its names.
+  const iconsFor = (part) => {
+    const picked = Object.fromEntries(PART_ICONS[part].filter((name) => name in icons).map((name) => [name, icons[name]]));
+    return Object.keys(picked).length ? { icons: picked } : {};
+  };
+  const parts = resolveParts(options, layout, given, asked);
   const views = VIEWS.filter((view) => view === "slide" || parts[view]);
+  const toolbarItems = resolveToolbar(options, layout, parts, views, given, asked);
+  // CE-28: an embedded editor or a viewer keeps its keys (the arrows, F5, Ctrl/Cmd Z) to itself; the other layouts own the page.
+  const scopedKeys = SCOPED_LAYOUTS.has(layout);
+  // CE-28 wave 2: slide management on the thumbnail strip, in the layouts the editor arranges for editing (a host's own arrangement opts in).
+  const slideActions = options.slideActions ?? (layout === "full" || layout === "embed");
+  const keyTarget = scopedKeys ? element : doc;
   if (options.view !== undefined && !views.includes(options.view)) throw new RangeError(`view "${options.view}" is not available in this layout (${views.join(", ")}).`);
   if (options.persistence && parts.persistence && (typeof options.persistence !== "object" || typeof options.persistence.key !== "string" || !options.persistence.key)) {
     throw new TypeError("persistence needs a `key` that names the document.");
@@ -197,11 +300,12 @@ export function createOpfEditor(element, options = {}) {
   root.className = "opf-workspace opf-ui";
   // The editor owns the content of the element it builds a layout in. With `slots` the element is the host's own page (it holds the slots), so the
   // editor only adds one empty node for its overlays.
-  if (options.slots) element.append(root);
+  if (layout === "slots") element.append(root);
   else element.replaceChildren(root);
   const themeController = createThemeController(element, options.theme);
   let slots = { ...given };
   let controls = {};
+  let toolbar;
   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
@@ -216,9 +320,22 @@ export function createOpfEditor(element, options = {}) {
   }
   if (layout === "slots") root.setAttribute("data-opf-layout", "slots");
   else if (!studioLayout) {
-    const built = buildWorkspaceShell(root, { parts, views, layout, labels: options.labels });
+    const built = buildWorkspaceShell(root, { parts, views, layout, labels: options.labels, toolbar: toolbarItems, createToolbar, density: densityFor(options.density), toolbarHost: given.toolbar, onError: (error) => report(error), onCollapse: (detail) => onToolbarCollapse(detail), ...iconsFor("toolbar") });
     slots = { ...built.slots, ...given };
     controls = built.controls;
+    toolbar = built.toolbar;
+  }
+  // CE-28: a host that arranges the page itself and gives `slots.toolbar` gets the toolbar there.
+  if (layout === "slots" && given.toolbar && toolbarItems.length) {
+    const built = buildToolbar(given.toolbar, { items: toolbarItems, views, labels: options.labels, density: densityFor(options.density), createToolbar, onError: (error) => report(error), onCollapse: (detail) => onToolbarCollapse(detail), ...iconsFor("toolbar") });
+    slots = { ...built.slots, ...given };
+    Object.assign(controls, built.controls);
+    toolbar = built.toolbar;
+  }
+  // Mode B: the history and the view switch in the host's own elements.
+  if (!studioLayout) {
+    if (given.history && parts.history) Object.assign(controls, buildItemControls("history", given.history, { labels: options.labels }));
+    if (given.views && views.length > 1) Object.assign(controls, buildItemControls("views", given.views, { views, labels: options.labels }));
   }
   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.
@@ -229,6 +346,18 @@ export function createOpfEditor(element, options = {}) {
   let canvas;
   let pane;
   let slideNav;
+  let counterNav;
+  let deckTitle;
+  let expandCtl;
+  let expandButton;
+  let deckName;
+  let designMenu;
+  let reviewPill;
+  let helpButton;
+  let actionsPart;
+  let hostActions = Array.isArray(options.actions) ? [...options.actions] : [];
+  let reviewCounts = null;
+  let exportCollapsed = false;
   let strip;
   let slideManager;
   let sorter;
@@ -301,7 +430,6 @@ export function createOpfEditor(element, options = {}) {
     if (slots.status) slots.status.textContent = message;
     emit("status", { message });
   };
-  const densityFor = (setting) => (setting === "touch" || setting === "comfortable" ? setting : win?.matchMedia?.("(pointer: coarse)").matches ? "touch" : "comfortable");
   const exportModeFor = (setting) => (setting === "sheet" || setting === "menu" ? setting : win?.matchMedia?.("(max-width: 900px)").matches ? "sheet" : "menu");
 
   // The options a draw uses: the host's, the image hook, and the registered catalogs. `variables` follow the document in "resolved" mode.
@@ -313,6 +441,12 @@ export function createOpfEditor(element, options = {}) {
   }
   const layoutFor = (deck, index) => layoutOptionsFor(fonts, deck, index, catalogs());
 
+  // The one slide index on every part that shows it: the slide row's navigator, the toolbar's counter and the strip.
+  function showIndex(index) {
+    slideNav?.setSlide(index);
+    counterNav?.setSlide(index);
+    strip?.setSlide(index);
+  }
   // ---- navigation and the refresh loop ----------------------------------------------------------------------------------------
   function renderViews(deck) {
     // The Studio's filmstrip draws the thumbnails it shows itself, as they scroll in.
@@ -348,8 +482,7 @@ export function createOpfEditor(element, options = {}) {
     const deck = session.snapshot().presentation;
     slideIndex = Math.max(0, Math.min(slideIndex, deck.slides.length - 1));
     renderViews(deck);
-    slideNav?.setSlide(slideIndex);
-    strip?.setSlide(slideIndex);
+    showIndex(slideIndex);
     fonts?.registry?.clearSubstitutions?.();
     if (canvas && canvas.slideIndex !== slideIndex) canvas.setSlide(slideIndex);
     emit("sync", syncDetail(deck));
@@ -403,8 +536,7 @@ export function createOpfEditor(element, options = {}) {
       if (canvas.setSlide(index)) {
         const changed = index !== slideIndex;
         slideIndex = index;
-        slideNav?.setSlide(index);
-        strip?.setSlide(index);
+        showIndex(index);
         if (changed) emit("slide", { index, count: slides.length });
         refresh();
         return true;
@@ -412,8 +544,7 @@ export function createOpfEditor(element, options = {}) {
     } catch (error) {
       report(error);
     }
-    slideNav?.setSlide(canvas.slideIndex);
-    strip?.setSlide(canvas.slideIndex);
+    showIndex(canvas.slideIndex);
     return false;
   }
   function goTo(index, path) {
@@ -435,6 +566,11 @@ export function createOpfEditor(element, options = {}) {
     presentButton?.setDisabled(!inSync || slides.length === 0);
     if (controls.undo) controls.undo.disabled = !inSync || readOnly || !session.canUndo;
     if (controls.redo) controls.redo.disabled = !inSync || readOnly || !session.canRedo;
+    // The deck name is not renamed over text in the source pane that is not a valid deck (that would replace the person's draft).
+    deckTitle?.setDisabled(!inSync);
+    designMenu?.setDisabled(!inSync);
+    actionsPart?.setDisabled(!inSync);
+    actionsPart?.refresh();
     // 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);
     // The Studio keeps selection, zoom and Present while read-only (its commands say why they are off); only invalid text locks the slide.
@@ -558,8 +694,10 @@ export function createOpfEditor(element, options = {}) {
     if (!partsReady || destroyed) return;
     unbindKeys?.();
     slideNav?.destroy();
+    counterNav?.destroy();
     strip?.destroy();
     slideNav = undefined;
+    counterNav = 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;
@@ -568,12 +706,27 @@ export function createOpfEditor(element, options = {}) {
         editor: ui,
         slideIndex,
         density,
+        ...iconsFor("navigator"),
         ...(options.labels?.navigator ? { labels: { navigation: options.labels.navigator } } : {}),
         onChange: (index) => {
           go(index);
         },
       });
-      unbindKeys = slideNav.bindKeys(doc);
+      unbindKeys = slideNav.bindKeys(keyTarget);
+    }
+    // CE-28: the toolbar's counter is a second navigator on the same slide index; it binds the arrow keys only when there is no slide row.
+    if (parts.canvas && slots.counter) {
+      counterNav = createSlideNavigator(slots.counter, {
+        editor: ui,
+        slideIndex,
+        density,
+        ...iconsFor("navigator"),
+        ...(options.labels?.counter ? { labels: { navigation: options.labels.counter } } : {}),
+        onChange: (index) => {
+          go(index);
+        },
+      });
+      if (!slideNav) unbindKeys = counterNav.bindKeys(keyTarget);
     }
     if (parts.thumbnails && slots.thumbnails) {
       strip = createThumbnailStrip(slots.thumbnails, {
@@ -581,12 +734,17 @@ export function createOpfEditor(element, options = {}) {
         fonts,
         slideIndex,
         density,
+        ...iconsFor("strip"),
         ...(options.labels?.thumbnails ? { labels: { navigation: options.labels.thumbnails } } : {}),
         renderOptions: renderOptions(),
         onSelect: (index) => {
           if (index !== slideIndex) go(index);
         },
         onError: (error) => report(error instanceof Error ? error : new Error("Thumbnails unavailable")),
+        // CE-28 wave 2: "+" and the thumbnail menu (duplicate, delete, hide, move), each one undoable change; "+" offers the deck's layouts.
+        ...(slideActions
+          ? { actions: true, readOnly, onStatus: say, ...(listSwitchOptions ? { layoutOptions: (presentation) => listSwitchOptions(presentation, "layouts", { catalogs: catalogs() }) } : {}) }
+          : {}),
       });
     }
   }
@@ -659,6 +817,7 @@ export function createOpfEditor(element, options = {}) {
         sourceState = { status: made.status, format, text: shown };
         syncChrome();
         emit("source", sourceState);
+        updateDirty();
         return made.findings;
       },
       onCopy: async (file) => {
@@ -738,6 +897,7 @@ export function createOpfEditor(element, options = {}) {
       },
       onSelect: (value) => {
         selection = { path: value.path, value: value.value };
+        actionsPart?.refresh();
         // 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();
@@ -772,8 +932,7 @@ export function createOpfEditor(element, options = {}) {
         if (event.slideIndex !== slideIndex) {
           // The canvas moved to another slide itself (its slide was removed, say): the rest of the parts follow it.
           slideIndex = event.slideIndex;
-          slideNav?.setSlide(slideIndex);
-          strip?.setSlide(slideIndex);
+          showIndex(slideIndex);
           emit("slide", { index: slideIndex, count: slides.length });
           refresh();
         }
@@ -884,6 +1043,8 @@ export function createOpfEditor(element, options = {}) {
           tab.textContent = found ? `${name} (${counts.total})` : name;
           tab.setAttribute("aria-label", found ? `${name}, ${counts.total} finding${counts.total === 1 ? "" : "s"}` : name);
         }
+        reviewCounts = counts;
+        reviewPill?.update(counts);
         emit("review", counts);
       },
     });
@@ -937,15 +1098,27 @@ export function createOpfEditor(element, options = {}) {
             present();
           },
           density,
+          ...iconsFor("present"),
         });
       }
       cleanups.push(
-        bindPresentShortcut(doc, () => {
+        bindPresentShortcut(keyTarget, () => {
           present();
         }),
       );
     }
     if (parts.find && slots.find) mountFind();
+    // CE-28 wave 2: a `review` item without a Review panel (the embed) runs the review in a hidden element, so the pill has its counts.
+    if (parts.review && !slots.review && slots.reviewPill) {
+      // The panel owns its container's attributes; the hidden wrapper keeps it out of sight.
+      const hidden = doc.createElement("div");
+      hidden.hidden = true;
+      hidden.setAttribute("data-opf-headless", "review");
+      slots.review = doc.createElement("div");
+      slots.review.setAttribute("data-opf-slot", "review");
+      hidden.append(slots.review);
+      root.append(hidden);
+    }
     if (parts.review && slots.review) mountReview();
     if (parts.design && slots.design) {
       const configured = typeof options.design === "object" ? options.design : {};
@@ -963,6 +1136,7 @@ export function createOpfEditor(element, options = {}) {
       });
     }
     if (parts.persistence) mountPersistence();
+    mountChrome();
     mountControls();
     mountEnvironment();
     if (studioShell && canvas) mountStudio();
@@ -979,6 +1153,14 @@ export function createOpfEditor(element, options = {}) {
         if (event.type !== "catalogs") {
           syncChrome();
           emit("change", { document: event.snapshot.presentation, canUndo: event.snapshot.canUndo, canRedo: event.snapshot.canRedo, event });
+          // CE-28: the deck's name changed, from whatever changed it (the title, the source, undo, the host).
+          const name = currentDeckName();
+          if (name !== deckName) {
+            const previous = deckName;
+            deckName = name;
+            emit("deckName", { name, previous });
+          }
+          updateDirty();
         }
         refresh();
       }),
@@ -1045,10 +1227,162 @@ export function createOpfEditor(element, options = {}) {
       getName: () => pane?.getName(),
       setName: (name) => pane?.setName(name),
       layoutStudio: () => studio,
+      // CE-28 wave 2: the rows the Studio's shortcut sheet adds to its commands, the same the help item lists.
+      extraShortcuts: () => chromeShortcuts(),
       mountSlideRow: () => mountSlideRow(),
     });
   }
 
+  // ---- CE-28: the toolbar's parts --------------------------------------------------------------------------------------------------
+  // What an open edit needs before the document changes from outside it: the canvas commits it, text typed in the source is applied.
+  function commitPending() {
+    if (canvas?.commit() === false) return false;
+    pane?.getText();
+    return true;
+  }
+  const chromeLabels = () => options.labels ?? {};
+  function mountChrome() {
+    deckName = currentDeckName();
+    if (slots.title && createDeckTitle) {
+      deckTitle = createDeckTitle(slots.title, {
+        editor: ui,
+        ...(chromeLabels().untitled ? { placeholder: chromeLabels().untitled } : {}),
+        ...(chromeLabels().title ? { label: chromeLabels().title } : {}),
+        readOnly,
+        density,
+        beforeCommit: () => inSync && commitPending(),
+        onError: (error) => report(error),
+      });
+    }
+    // The editor fills the window (or, with `expand.fullscreen`, the screen): the mount element becomes a fixed overlay, in place.
+    if (createExpandController && options.expand !== false) {
+      const labels = { ...(chromeLabels().expand ? { expand: chromeLabels().expand } : {}), ...(chromeLabels().collapse ? { collapse: chromeLabels().collapse } : {}) };
+      const configured = typeof options.expand === "object" && options.expand ? options.expand : {};
+      const target = configured.target ?? element;
+      // The host's own elements for the bar and its items that sit outside what expands stay usable over the overlay.
+      const keep = ["toolbar", ...CHROME_SLOTS].map((name) => given[name]).filter((node, at, all) => node && all.indexOf(node) === at && !target.contains(node));
+      expandCtl = createExpandController(target, {
+        labels,
+        onStatus: say,
+        ...(keep.length ? { keep } : {}),
+        ...(configured.fullscreen !== undefined ? { fullscreen: configured.fullscreen } : {}),
+        onChange: ({ expanded }) => {
+          if (destroyed) return;
+          root.toggleAttribute("data-expanded", expanded);
+          emit("expand", { expanded });
+        },
+      });
+      if (slots.expand && createExpandButton) expandButton = createExpandButton(slots.expand, { controller: expandCtl, density, labels, ...iconsFor("expand") });
+    }
+    mountChromeParts();
+    if (!toolbar) return;
+    // What each item offers in the more menu once it has collapsed into it, read when the menu opens (so always the current state).
+    const text = { undo: "Undo", redo: "Redo", find: "Find", ...chromeLabels() };
+    const register = (name, part) => cleanups.push(toolbar.mount(name, part));
+    register("history", {
+      menuItems: () => [
+        { id: "undo", label: text.undo, disabled: Boolean(controls.undo?.disabled), run: () => undo() },
+        { id: "redo", label: text.redo, disabled: Boolean(controls.redo?.disabled), run: () => redo() },
+      ],
+    });
+    register("find", { menuItems: () => (find ? [{ id: "find", label: `${text.find}…`, run: () => find.openPanel({}) }] : []) });
+    register("views", { menuItems: () => views.map((view) => ({ id: `view:${view}`, label: viewLabel(view), pressed: activeView === view, run: () => setView(view, { focus: true }) })) });
+    register("counter", {
+      menuItems: () => [
+        { id: "previous", label: "Previous slide", disabled: slideIndex <= 0, run: () => go(slideIndex - 1) },
+        { id: "next", label: "Next slide", disabled: slideIndex >= slides.length - 1, run: () => go(slideIndex + 1) },
+      ],
+    });
+    register("present", { menuItems: () => (presenter ? [{ id: "present", label: "Present", disabled: !inSync || slides.length === 0, run: () => present() }] : []) });
+    // Export: one entry that opens the Export menu as its sheet (while Export is in ⋯ the menu is a sheet, so its progress and result stay on screen).
+    register("export", { menuItems: () => (exportMenu ? [{ id: "export", label: text.exportItem ?? "Export…", run: () => openExportFromMore() }] : []) });
+    if (deckTitle) register("title", deckTitle);
+    if (expandButton) register("expand", expandButton);
+    if (designMenu) register("design", designMenu);
+    if (reviewPill) register("review", reviewPill);
+    if (helpButton) register("help", helpButton);
+    if (actionsPart) register("actions", actionsPart);
+  }
+  // The Export sheet opened from ⋯ gives the focus back to ⋯ when it closes (its own trigger is out of sight there), or, when ⋯ is gone (the
+  // bar widened meanwhile), to the Export button back in the bar, else to the first control of the bar: never to the body.
+  function openExportFromMore() {
+    if (!exportMenu) return;
+    const shown = (node) => Boolean(node?.isConnected && node.getClientRects().length && win.getComputedStyle(node).visibility !== "hidden");
+    const back = () => {
+      const more = toolbar?.element.querySelector(".opf-tb-more-button");
+      const candidates = [more, exportMenu?.trigger, ...(toolbar ? toolbar.element.querySelectorAll("button, input") : [])];
+      candidates.find((node) => shown(node) && !node.disabled)?.focus();
+    };
+    const watch = new win.MutationObserver(() => {
+      if (exportMenu?.trigger.getAttribute("aria-expanded") === "true") return;
+      watch.disconnect();
+      if (destroyed) return;
+      const active = doc.activeElement;
+      if (!active || active === doc.body || !shown(active)) back();
+    });
+    watch.observe(exportMenu.trigger, { attributes: true, attributeFilter: ["aria-expanded"] });
+    cleanups.push(() => watch.disconnect());
+    exportMenu.open("first");
+  }
+  // While Export is collapsed into ⋯ its menu opens as the bottom sheet (fixed on screen); back in the bar it is the editor's mode again.
+  function onToolbarCollapse({ collapsed }) {
+    exportCollapsed = collapsed.includes("export");
+    exportMenu?.setMode(exportCollapsed ? "sheet" : exportMode);
+  }
+
+  // CE-28 wave 2: the Design quick menu, the review pill, the help sheet and the host's actions.
+  function mountChromeParts() {
+    const labels = chromeLabels();
+    const designPanel = () => Boolean(design || controls.tabs?.design || studioShell?.tabs?.design);
+    if (slots.designMenu && createDesignMenu) {
+      designMenu = createDesignMenu(slots.designMenu, {
+        editor: ui,
+        catalogs,
+        getSlideIndex: () => slideIndex,
+        density,
+        readOnly,
+        ...iconsFor("designMenu"),
+        ...(labels.designMenu ? { labels: labels.designMenu } : {}),
+        // "More design options…": the workspace's Design panel when there is one, else the host's (`designMenu.onOpenPanel`), else no row.
+        ...(designPanel()
+          ? { onOpenPanel: () => showPanel("design", true) }
+          : typeof options.designMenu?.onOpenPanel === "function"
+            ? { onOpenPanel: () => options.designMenu.onOpenPanel() }
+            : {}),
+        onStatus: say,
+      });
+    }
+    if (slots.reviewPill && createReviewPill) {
+      reviewPill = createReviewPill(slots.reviewPill, {
+        density,
+        ...iconsFor("reviewPill"),
+        ...(labels.reviewPill ? { labels: labels.reviewPill } : {}),
+        // The Review panel when there is one; without it (the embed) the host hears `review-open` and shows the findings its own way.
+        onOpen: () => {
+          if (controls.tabs?.review || studioShell?.tabs?.review) showPanel("review", true);
+          else emit("review-open", { counts: reviewCounts, findings: review?.findings ?? [] });
+        },
+      });
+      reviewPill.update(reviewCounts);
+    }
+    if (slots.help && createHelpButton) {
+      helpButton = createHelpButton(slots.help, {
+        overlay,
+        getShortcuts: () => shortcuts(),
+        density,
+        ...iconsFor("help"),
+        ...(labels.help ? { labels: labels.help } : {}),
+        // "?" opens it from anywhere in a page the editor owns; an embedded editor or a viewer only from inside it (the button still works).
+        bindKey: !scopedKeys,
+      });
+    }
+    if (slots.actions && createToolbarActions) {
+      actionsPart = createToolbarActions(slots.actions, { actions: hostActions, density, ...(labels.actions ? { labels: labels.actions } : {}) });
+      slots.actions.hidden = hostActions.length === 0;
+      syncActionsPriority();
+    }
+  }
+
   // The shell's own controls: history, views, tabs.
   function mountControls() {
     controls.undo?.addEventListener("click", () => undo());
@@ -1066,12 +1400,26 @@ export function createOpfEditor(element, options = {}) {
       });
     }
     if (controls.tabs) showPanelNow(options.panel && controls.tabs[options.panel] ? options.panel : Object.keys(controls.tabs)[0]);
-    if (options.shortcuts !== false) {
+    // CE-28 wave 2: Ctrl/Cmd+S inside the editor asks the host to save (`save`); the browser's own Save page is kept unless a host listens.
+    if (options.shortcuts !== false && layout !== "viewer") {
+      const onSave = (event) => {
+        if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey || event.key.toLowerCase() !== "s" || event.defaultPrevented) return;
+        // As for Undo: the editor's own element, or the page's body (nothing focused) where the editor owns the page; embed and viewer stay scoped.
+        if (!listeners.get("save")?.size) return;
+        if (!element.contains(event.target) && (event.target !== doc.body || scopedKeys)) return;
+        event.preventDefault();
+        requestSave();
+      };
+      doc.addEventListener("keydown", onSave);
+      cleanups.push(() => doc.removeEventListener("keydown", onSave));
+    }
+    // The viewer edits nothing, so it has no Undo keys.
+    if (options.shortcuts !== false && layout !== "viewer") {
       // 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) => {
         if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== "z" || event.defaultPrevented) return;
         if (event.target?.closest?.("input,textarea,select,[contenteditable],.cm-editor,dialog[open]")) return;
-        if (!element.contains(event.target) && event.target !== doc.body) return;
+        if (!element.contains(event.target) && (event.target !== doc.body || scopedKeys)) return;
         event.preventDefault();
         if (event.shiftKey) redo();
         else undo();
@@ -1134,6 +1482,9 @@ export function createOpfEditor(element, options = {}) {
   function applyReadOnly() {
     pane?.setReadOnly(readOnly);
     studio?.setReadOnly(readOnly);
+    deckTitle?.setReadOnly(readOnly);
+    designMenu?.setReadOnly(readOnly);
+    strip?.setReadOnly?.(readOnly);
     root.toggleAttribute("data-readonly", readOnly);
     syncChrome();
     studioCtl?.refresh();
@@ -1145,6 +1496,7 @@ export function createOpfEditor(element, options = {}) {
       requested.density = setting;
       density = densityFor(setting);
       root.setAttribute("data-density", density);
+      toolbar?.setDensity(density);
       return;
     }
     const next = densityFor(setting);
@@ -1155,13 +1507,20 @@ export function createOpfEditor(element, options = {}) {
     exportMenu?.setDensity(density);
     presentButton?.setDensity(density);
     studio?.setDensity(density);
+    deckTitle?.setDensity(density);
+    expandButton?.setDensity(density);
+    designMenu?.setDensity(density);
+    reviewPill?.setDensity(density);
+    helpButton?.setDensity(density);
+    actionsPart?.setDensity(density);
+    toolbar?.setDensity(density);
     mountSlideRow();
   }
   function setExportMode(setting) {
     if (destroyed) return;
     if (!partsReady) requested.exportMode = setting;
     exportMode = exportModeFor(setting);
-    exportMenu?.setMode(exportMode);
+    exportMenu?.setMode(exportCollapsed ? "sheet" : exportMode);
   }
   function setDocument(document, openOptions = {}) {
     if (destroyed || !mounted) throw new OPFEditorError("not-ready", "The editor is not mounted yet. Await `ready` first.");
@@ -1179,7 +1538,10 @@ export function createOpfEditor(element, options = {}) {
         openedText = text !== undefined && pane.getFormat() === "json" ? openOptions.text : undefined;
       } else session.replaceDocument(document, { source: "load" });
       // A document the host loaded is not the person's work: it is not autosaved or warned about until it is edited.
-      if (openOptions.rebase !== false) persistence?.rebase();
+      if (openOptions.rebase !== false) {
+        persistence?.rebase();
+        recordBaseline();
+      }
       return true;
     } catch (error) {
       if (error?.code !== "invalid-opf-edit") throw error;
@@ -1204,10 +1566,140 @@ export function createOpfEditor(element, options = {}) {
       ...(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();
+    if (applied && openOptions.rebase !== false) {
+      persistence?.rebase();
+      recordBaseline();
+    }
     return applied;
   }
 
+  // ---- CE-28: the deck name and the expanded editor ------------------------------------------------------------------------------
+  function currentDeckName() {
+    const name = session.snapshot().presentation?.name;
+    return typeof name === "string" ? name : "";
+  }
+  // ---- CE-28 wave 2: unsaved changes, save, the host's actions and the shortcuts ----------------------------------------------------
+  // The baseline is what was last loaded or saved: the document (as JSON) and the text of the source pane. Dirty is the document differing from
+  // it, or the pane holding a draft that is not a valid deck (it never reaches the document) whose text differs from the baseline's.
+  let baseline = null;
+  let dirty = false;
+  const documentKey = () => JSON.stringify(session.snapshot().presentation);
+  const paneText = () => pane?.editor?.api?.getValue?.() ?? "";
+  function recordBaseline() {
+    if (!partsReady || destroyed) return;
+    baseline = { document: documentKey(), text: paneText() };
+    updateDirty();
+  }
+  function updateDirty() {
+    if (!baseline || destroyed) return;
+    const next = documentKey() !== baseline.document || Boolean(pane && !inSync && paneText() !== baseline.text);
+    if (next === dirty) return;
+    dirty = next;
+    root.toggleAttribute("data-dirty", dirty);
+    emit("dirty", { dirty });
+  }
+  function markSaved() {
+    if (destroyed) return false;
+    if (!mounted) return true;
+    commitPending();
+    recordBaseline();
+    persistence?.markSaved();
+    return true;
+  }
+  /** What a save writes: the document, and the source pane's text as it is (a draft too, so a host can keep it as text). */
+  function saveDetail() {
+    commitPending();
+    const source = handle.readSource();
+    return { document: session.snapshot().presentation, text: source.text, format: source.format, draft: Boolean(source.draft) };
+  }
+  function requestSave() {
+    if (!mounted || destroyed) return false;
+    emit("save", saveDetail());
+    return true;
+  }
+  function setActions(list) {
+    if (!Array.isArray(list)) throw new TypeError("setActions needs an array of actions.");
+    hostActions = [...list];
+    if (actionsPart) {
+      actionsPart.setActions(hostActions);
+      slots.actions.hidden = hostActions.length === 0;
+      syncActionsPriority();
+      toolbar?.update();
+    }
+  }
+  // A primary action (Save) stays in the bar: while one is listed the item's priority is 90, above everything but the title and the counter
+  // (85 < 90 < 95), unless the host gave the item a priority of its own in `toolbar`.
+  const explicitActionsPriority = Array.isArray(options.toolbar) && options.toolbar.some((item) => item && typeof item === "object" && item.id === "actions" && item.priority !== undefined);
+  function syncActionsPriority() {
+    if (!toolbar || explicitActionsPriority) return;
+    toolbar.setItem("actions", { priority: hostActions.some((action) => action?.primary) ? 90 : TOOLBAR_ITEMS.actions.priority });
+  }
+  /** The keyboard shortcuts this editor binds now, for the help sheet (and, in the Studio, beside its command registry). */
+  function shortcuts() {
+    const list = [];
+    const add = (id, label, keys, group) => list.push({ id, label, keys, group });
+    if (studioCtl) {
+      // The Studio's registry: every command with a key, as its own sheet lists them; then what the registry does not hold.
+      for (const entry of studioCtl.commands.list()) if (entry.keys.length) add(entry.id, entry.label, entry.keys, entry.group ?? "Studio");
+    } else {
+      if (parts.history && layout !== "viewer" && options.shortcuts !== false) {
+        add("undo", "Undo", ["Mod-z"], "Edit");
+        add("redo", "Redo", ["Shift-Mod-z"], "Edit");
+      }
+      if (find) {
+        add("find", "Find", ["Mod-f"], "Edit");
+        add("replace", "Find and replace", ["Mod-h"], "Edit");
+      }
+      if (slideNav || counterNav) {
+        add("previous", "Previous slide", ["ArrowLeft"], "Slides");
+        add("next", "Next slide", ["ArrowRight"], "Slides");
+      }
+      if (presenter) add("present", "Present from this slide", ["F5"], "Slides");
+      if (helpButton && !scopedKeys) add("help", "Keyboard shortcuts", ["?"], "Window");
+    }
+    return [...list, ...chromeShortcuts()];
+  }
+  /** The shortcuts of the chrome itself (save, the title, expand): the help sheet lists them, and so does the Studio's own sheet. */
+  function chromeShortcuts() {
+    const list = [];
+    const add = (id, label, keys, group) => list.push({ id, label, keys, group });
+    if (listeners.get("save")?.size && layout !== "viewer" && options.shortcuts !== false) add("save", "Save", ["Mod-s"], "Edit");
+    if (deckTitle && !readOnly) {
+      add("title-commit", "Rename: keep the name typed in the title", ["Enter"], "Presentation name");
+      add("title-cancel", "Rename: put the name back", ["Escape"], "Presentation name");
+    }
+    if (expandCtl) add("expand-exit", "Leave the expanded editor", ["Escape"], "Window");
+    return list;
+  }
+
+  function setDeckName(name) {
+    if (destroyed) return false;
+    if (typeof name !== "string") throw new TypeError("setDeckName needs the name as a string.");
+    if (waiting()) {
+      queue("deckName", () => setDeckName(name));
+      return true;
+    }
+    // Not over text in the source pane that is not a valid deck (that would replace the draft), and an open canvas edit is committed first.
+    if (readOnly || !inSync || !commitPending()) return false;
+    const patch = deckNamePatch(session.snapshot().presentation?.name, name);
+    if (!patch) return true;
+    try {
+      ui.applyPatch(patch, { source: "deck-name", rejectInvalid: true });
+      return true;
+    } catch (error) {
+      report(error);
+      return false;
+    }
+  }
+  function expand(on = true) {
+    if (destroyed || options.expand === false) return false;
+    if (waiting()) {
+      queue("expand", () => expand(on));
+      return true;
+    }
+    return expandCtl ? expandCtl.expand(on) : false;
+  }
+
   // 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 = {
@@ -1350,6 +1842,40 @@ export function createOpfEditor(element, options = {}) {
     get slots() {
       return slots;
     },
+    /** CE-28: the toolbar the editor built (undefined without one) and the deck title part. */
+    get toolbar() {
+      return toolbar;
+    },
+    get deckTitle() {
+      return deckTitle;
+    },
+    /** CE-28 wave 2: the toolbar's other parts, once mounted (a host that runs its own Review feeds `reviewPill.update(counts)`). */
+    get designMenu() {
+      return designMenu;
+    },
+    get reviewPill() {
+      return reviewPill;
+    },
+    get helpButton() {
+      return helpButton;
+    },
+    get toolbarActions() {
+      return actionsPart;
+    },
+    getDeckName: currentDeckName,
+    /** CE-28 wave 2: whether the document (or a source draft) differs from what was last loaded or saved. */
+    get dirty() {
+      return dirty;
+    },
+    markSaved,
+    save: requestSave,
+    setActions,
+    shortcuts,
+    setDeckName,
+    expand,
+    get expanded() {
+      return Boolean(expandCtl?.expanded);
+    },
     getDocument() {
       return session.snapshot().presentation;
     },
@@ -1442,6 +1968,15 @@ export function createOpfEditor(element, options = {}) {
         }
       }
       studioCtl?.destroy();
+      expandButton?.destroy();
+      expandCtl?.destroy();
+      deckTitle?.destroy();
+      designMenu?.destroy();
+      reviewPill?.destroy();
+      helpButton?.destroy();
+      actionsPart?.destroy();
+      counterNav?.destroy();
+      toolbar?.destroy();
       unbindKeys?.();
       checking?.disconnect();
       persistence?.destroy();
@@ -1485,7 +2020,35 @@ export function createOpfEditor(element, options = {}) {
     if (wantedView && wantedView !== "slide") setView(wantedView);
     else markView("slide");
     syncChrome();
+    // The document as it was opened is the baseline of `dirty`; calls queued before mount (a rename) are changes after it.
+    recordBaseline();
+    if (options.guardUnload) mountUnloadGuard();
     flushQueued();
+    // The bar's parts are in their slots now: fit the row at once rather than on the next frame.
+    toolbar?.update();
+  }
+  // CE-28 wave 2 (promoted from openpresentation.org's source unload guard): the browser asks before the page closes while there is unsaved work.
+  // `guardUnload: true` asks while `dirty`; a function decides itself (a host with state of its own), given the editor.
+  function mountUnloadGuard() {
+    if (!win?.addEventListener) return;
+    const decide = typeof options.guardUnload === "function" ? () => Boolean(options.guardUnload(handle)) : () => dirty;
+    const onBeforeUnload = (event) => {
+      if (destroyed) return;
+      // Text typed a moment ago is applied first, so its verdict counts.
+      pane?.getText();
+      updateDirty();
+      let warn = false;
+      try {
+        warn = decide();
+      } catch (error) {
+        report(error);
+      }
+      if (!warn) return;
+      event.preventDefault();
+      event.returnValue = "";
+    };
+    win.addEventListener("beforeunload", onBeforeUnload);
+    cleanups.push(() => win.removeEventListener("beforeunload", onBeforeUnload));
   }
   readyPromise = new Promise((resolve, reject) => {
     const start = (arrived) => {