@openpresentation/opf-editor 0.29.0 → 0.30.0

package/dist/toolbar.js

@@ -0,0 +1,390 @@
+// CE-28: the editor's title bar. `createToolbar(container, { items })` builds one slot element per named item, in order, and keeps the row on one
+// line: when the items do not fit the width of the bar (a ResizeObserver on the bar, so the container decides, not the window), the collapsible
+// items are hidden lowest priority first and what they offer appears in the `more` (⋯) menu, built from each mounted part's `menuItems()`.
+// It only arranges: the parts (the deck title, the history buttons, the counter, Export, Present, the expand button) are mounted in its slots by
+// the workspace (src/workspace.js) or by a host, and registered with `mount(id, part)`. Plain DOM, styled by src/styles/toolbar.css (tokens only).
+
+import { normalizeIcons, resolveIcon } from "./icons.js";
+
+/**
+ * The items a toolbar knows, with their default priority (higher stays visible longer) and whether they can move into the `more` menu.
+ * `spacer` takes the free space; `|` is a divider, shown only between two visible items.
+ */
+export const TOOLBAR_ITEMS = Object.freeze({
+  title: Object.freeze({ priority: 95, collapsible: false }),
+  history: Object.freeze({ priority: 80, collapsible: true }),
+  counter: Object.freeze({ priority: 85, collapsible: true }),
+  views: Object.freeze({ priority: 40, collapsible: true }),
+  find: Object.freeze({ priority: 50, collapsible: true }),
+  zoom: Object.freeze({ priority: 45, collapsible: true }),
+  design: Object.freeze({ priority: 35, collapsible: true }),
+  review: Object.freeze({ priority: 30, collapsible: true }),
+  autosave: Object.freeze({ priority: 20, collapsible: true }),
+  export: Object.freeze({ priority: 65, collapsible: true }),
+  present: Object.freeze({ priority: 75, collapsible: true }),
+  expand: Object.freeze({ priority: 70, collapsible: true }),
+  actions: Object.freeze({ priority: 25, collapsible: true }),
+  help: Object.freeze({ priority: 10, collapsible: true }),
+  more: Object.freeze({ priority: 100, collapsible: false }),
+  spacer: Object.freeze({ priority: 0, collapsible: false }),
+  "|": Object.freeze({ priority: 0, collapsible: false }),
+});
+const REPEATABLE = new Set(["spacer", "|"]);
+const LABELS = Object.freeze({ more: "More", menu: "More actions" });
+
+/**
+ * Turn the `items` option (names, or `{ id, priority, collapsible }`) into the list the toolbar builds, with each item's priority and whether
+ * it collapses. Throws on a name that is not an item and on a named item given twice (`spacer` and `|` may repeat).
+ */
+export function normalizeToolbarItems(items) {
+  if (!Array.isArray(items)) throw new TypeError("toolbar items must be an array of item names or { id, priority } objects.");
+  const seen = new Set();
+  return items.map((item, index) => {
+    const spec = typeof item === "string" ? { id: item } : item;
+    if (!spec || typeof spec !== "object" || typeof spec.id !== "string") throw new TypeError(`toolbar item ${index} must be an item name or { id, priority }.`);
+    const known = TOOLBAR_ITEMS[spec.id];
+    if (!known) throw new RangeError(`"${spec.id}" is not a toolbar item (${Object.keys(TOOLBAR_ITEMS).join(", ")}).`);
+    if (!REPEATABLE.has(spec.id)) {
+      if (seen.has(spec.id)) throw new RangeError(`the toolbar item "${spec.id}" is given twice.`);
+      seen.add(spec.id);
+    }
+    if (spec.priority !== undefined && !Number.isFinite(spec.priority)) throw new TypeError(`the priority of the toolbar item "${spec.id}" must be a number.`);
+    return Object.freeze({
+      id: spec.id,
+      priority: spec.priority ?? known.priority,
+      collapsible: REPEATABLE.has(spec.id) || spec.id === "more" ? false : spec.collapsible ?? known.collapsible,
+    });
+  });
+}
+
+const make = (doc, tag, attributes = {}, ...children) => {
+  const node = doc.createElement(tag);
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === undefined || value === false) continue;
+    if (name === "text") node.textContent = value;
+    else node.setAttribute(name, value === true ? "" : value);
+  }
+  node.append(...children);
+  return node;
+};
+// The ⋯ glyph: three filled dots in a 24x24 box. A host replaces it with `icons: { more }` (src/icons.js).
+const MORE_ICON = [4.5, 12, 19.5].map((cx) => ["circle", { cx, cy: 12, r: 2.25, fill: "currentColor", stroke: "none" }]);
+
+let toolbarIds = 0;
+
+/**
+ * Build a toolbar in `container`. Returns its handle; see `toolbar.d.ts`.
+ */
+export function createToolbar(container, options = {}) {
+  if (!container?.ownerDocument) throw new TypeError("createToolbar needs a DOM container.");
+  const doc = container.ownerDocument;
+  const win = doc.defaultView;
+  const text = { ...LABELS, ...(options.labels ?? {}) };
+  const items = normalizeToolbarItems(options.items ?? []);
+  const icons = normalizeIcons(options.icons, ["more"], "createToolbar icons");
+  const id = `opf-tb-${++toolbarIds}`;
+  let density = options.density === "touch" ? "touch" : "comfortable";
+  let destroyed = false;
+  let menuOpen = false;
+  let collapsed = [];
+  const parts = new Map();
+
+  const bar = make(doc, "div", { class: "opf-tb opf-ui", "data-density": density });
+  const slots = {};
+  const entries = items.map((item, index) => {
+    let element;
+    if (item.id === "spacer") element = make(doc, "span", { class: "opf-tb-spacer opf-ws-spacer", "data-opf-toolbar-item": "spacer" });
+    else if (item.id === "|") element = make(doc, "span", { class: "opf-tb-divider", "data-opf-toolbar-item": "|", "aria-hidden": "true" });
+    else element = make(doc, "div", { class: "opf-tb-item", "data-opf-toolbar-item": item.id });
+    if (!REPEATABLE.has(item.id)) slots[item.id] = element;
+    bar.append(element);
+    return { ...item, index, element };
+  });
+
+  // ---- the more menu ------------------------------------------------------------------------------------------------------------------
+  const moreEntry = entries.find((entry) => entry.id === "more");
+  let trigger;
+  let menu;
+  if (moreEntry) {
+    trigger = make(doc, "button", { type: "button", class: "opf-tb-more-button", "aria-label": text.more, title: text.more, "aria-haspopup": "menu", "aria-expanded": "false", "aria-controls": `${id}-menu` }, resolveIcon(doc, icons.more, MORE_ICON, { name: "more", className: "opf-tb-more-icon", size: 16 }));
+    menu = make(doc, "div", { class: "opf-tb-menu", role: "menu", id: `${id}-menu`, "aria-label": text.menu, hidden: true });
+    moreEntry.element.classList.add("opf-tb-more");
+    moreEntry.element.append(trigger, menu);
+    moreEntry.element.hidden = true;
+  }
+  const menuButtons = () => (menu ? [...menu.querySelectorAll("[role^=menuitem]")] : []);
+  function partItems(entry) {
+    const part = parts.get(entry.id);
+    if (typeof part?.menuItems !== "function") return [];
+    try {
+      return (part.menuItems() ?? []).filter((item) => item && typeof item.label === "string" && typeof item.run === "function");
+    } catch (error) {
+      options.onError?.(error);
+      return [];
+    }
+  }
+  /** What the more menu lists now: the items of every collapsed part, in bar order, one group per part. */
+  function menuGroups() {
+    return entries.filter((entry) => collapsed.includes(entry.id)).map((entry) => ({ id: entry.id, items: partItems(entry) })).filter((group) => group.items.length);
+  }
+  function buildMenu() {
+    if (!menu) return;
+    const nodes = [];
+    for (const [at, group] of menuGroups().entries()) {
+      if (at > 0) nodes.push(make(doc, "div", { class: "opf-tb-menu-separator", role: "separator" }));
+      for (const item of group.items) {
+        const role = item.pressed === undefined ? "menuitem" : "menuitemcheckbox";
+        const button = make(doc, "button", {
+          type: "button",
+          class: "opf-tb-menu-item",
+          role,
+          tabindex: "-1",
+          "data-opf-toolbar-menu-item": item.id ?? "",
+          "data-opf-toolbar-part": group.id,
+          "aria-checked": role === "menuitemcheckbox" ? String(Boolean(item.pressed)) : undefined,
+          "aria-disabled": item.disabled ? "true" : undefined,
+          text: item.label,
+        });
+        button.addEventListener("click", () => activate(item));
+        nodes.push(button);
+      }
+    }
+    menu.replaceChildren(...nodes);
+  }
+  function activate(item) {
+    if (item.disabled) return;
+    // The menu closes without taking the focus back first: what the item opens (Find's field, a popover, a dialog) keeps the focus it takes.
+    // The item runs on the next microtask, after the menu is gone; the focus returns to ⋯ only when nothing else took it.
+    closeMenu({ restoreFocus: false });
+    queueMicrotask(() => {
+      if (destroyed) return;
+      try {
+        item.run();
+      } catch (error) {
+        options.onError?.(error);
+      }
+      const active = doc.activeElement;
+      if (!active || active === doc.body || menu.contains(active)) trigger?.focus();
+    });
+  }
+  function focusAt(which) {
+    const list = menuButtons();
+    if (!list.length) return;
+    const at = list.indexOf(doc.activeElement);
+    const next = which === "first" ? 0 : which === "last" ? list.length - 1 : (at + which + list.length) % list.length;
+    list[next].focus();
+  }
+  function onOutside(event) {
+    if (!moreEntry.element.contains(event.target)) closeMenu({ restoreFocus: false });
+  }
+  function onEscape(event) {
+    if (event.key === "Escape" && menuOpen) {
+      event.preventDefault();
+      event.stopPropagation();
+      closeMenu();
+    }
+  }
+  function openMenu(which = "first") {
+    if (destroyed || !menu || menuOpen || moreEntry.element.hidden) return false;
+    buildMenu();
+    if (!menuButtons().length) return false;
+    menuOpen = true;
+    menu.hidden = false;
+    trigger.setAttribute("aria-expanded", "true");
+    doc.addEventListener("pointerdown", onOutside, true);
+    doc.addEventListener("keydown", onEscape, true);
+    focusAt(which);
+    return true;
+  }
+  function closeMenu({ restoreFocus = true } = {}) {
+    if (!menuOpen) return;
+    menuOpen = false;
+    menu.hidden = true;
+    trigger.setAttribute("aria-expanded", "false");
+    doc.removeEventListener("pointerdown", onOutside, true);
+    doc.removeEventListener("keydown", onEscape, true);
+    if (restoreFocus) trigger.focus();
+  }
+  if (menu) {
+    trigger.addEventListener("click", () => (menuOpen ? closeMenu() : openMenu("first")));
+    trigger.addEventListener("keydown", (event) => {
+      if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+      event.preventDefault();
+      if (menuOpen) focusAt(event.key === "ArrowUp" ? "last" : "first");
+      else openMenu(event.key === "ArrowUp" ? "last" : "first");
+    });
+    menu.addEventListener("keydown", (event) => {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        focusAt(event.key === "ArrowDown" ? 1 : -1);
+      } else if (event.key === "Home" || event.key === "End") {
+        event.preventDefault();
+        focusAt(event.key === "Home" ? "first" : "last");
+      } else if (event.key === "Tab") {
+        // Tab leaves the menu from its trigger, so the next stop is the one after the trigger.
+        closeMenu();
+      }
+    });
+  }
+
+  // ---- fitting the row ----------------------------------------------------------------------------------------------------------------
+  // An item counts when it shows something: a slot with content or a registered part (an empty or hidden slot takes no room and no gap).
+  const present = (entry) => entry.id !== "spacer" && entry.id !== "|" && entry.id !== "more" && !entry.element.hidden && (entry.element.childNodes.length > 0 || parts.has(entry.id));
+  const shown = (entry) => present(entry) && !entry.element.hasAttribute("data-collapsed");
+  function syncDividers() {
+    for (const [at, entry] of entries.entries()) {
+      if (entry.id !== "|") continue;
+      const side = (step) => {
+        for (let i = at + step; i >= 0 && i < entries.length; i += step) {
+          const other = entries[i];
+          if (other.id === "|") return false;
+          if (other.id === "more" ? !other.element.hidden : shown(other)) return true;
+        }
+        return false;
+      };
+      entry.element.hidden = !(side(-1) && side(1));
+    }
+  }
+  function setCollapsed(entry, on) {
+    entry.element.toggleAttribute("data-collapsed", on);
+  }
+  function fits() {
+    const style = win.getComputedStyle(bar);
+    const available = bar.clientWidth - (Number.parseFloat(style.paddingLeft) || 0) - (Number.parseFloat(style.paddingRight) || 0);
+    const gap = Number.parseFloat(style.columnGap) || 0;
+    let needed = 0;
+    let count = 0;
+    for (const child of bar.children) {
+      const style = win.getComputedStyle(child);
+      // Hidden, and taken out of the row (a collapsed part that keeps a sheet on screen is laid out out of flow): no room and no gap.
+      if (child.hidden || style.display === "none" || style.position === "absolute" || style.position === "fixed") continue;
+      needed += child.getBoundingClientRect().width;
+      count++;
+    }
+    needed += gap * Math.max(0, count - 1);
+    return needed <= available + 0.5;
+  }
+  /** Fit the row now: show every item, then collapse the collapsible ones, lowest priority (and, at equal priority, the rightmost) first, until the row fits. */
+  function update() {
+    if (destroyed) return collapsed;
+    // A bar that is not laid out (detached, or display: none) keeps what it shows.
+    if (!bar.isConnected || bar.clientWidth === 0) {
+      syncDividers();
+      return collapsed;
+    }
+    const before = collapsed.join(",");
+    bar.setAttribute("data-measuring", "");
+    for (const entry of entries) if (entry.collapsible) setCollapsed(entry, false);
+    if (moreEntry) moreEntry.element.hidden = true;
+    syncDividers();
+    const next = [];
+    const candidates = entries.filter((entry) => entry.collapsible && present(entry)).sort((a, b) => a.priority - b.priority || b.index - a.index);
+    for (const entry of candidates) {
+      if (fits()) break;
+      setCollapsed(entry, true);
+      next.push(entry.id);
+      if (moreEntry) moreEntry.element.hidden = !next.some((name) => partItems(entries.find((other) => other.id === name)).length);
+      syncDividers();
+    }
+    bar.removeAttribute("data-measuring");
+    collapsed = entries.filter((entry) => next.includes(entry.id)).map((entry) => entry.id);
+    bar.toggleAttribute("data-overflowing", collapsed.length > 0);
+    if (collapsed.join(",") !== before) {
+      if (menuOpen) closeMenu({ restoreFocus: false });
+      options.onCollapse?.({ collapsed: [...collapsed] });
+    }
+    return collapsed;
+  }
+  let frame = 0;
+  function schedule() {
+    if (destroyed || frame) return;
+    const run = () => {
+      frame = 0;
+      update();
+    };
+    frame = typeof win?.requestAnimationFrame === "function" ? win.requestAnimationFrame(run) : (setTimeout(run, 16), -1);
+  }
+  let observer;
+  const observed = new Set();
+  const observe = (node) => {
+    if (observer && !observed.has(node)) {
+      observer.observe(node);
+      observed.add(node);
+    }
+  };
+  if (typeof win?.ResizeObserver === "function") {
+    // Laid out again on the next frame, never inside the observer's callback, so a collapse never feeds back into the same notification.
+    observer = new win.ResizeObserver(() => schedule());
+    observe(bar);
+    for (const entry of entries) if (entry.id !== "spacer" && entry.id !== "|") observe(entry.element);
+  }
+  // A part's content changing its own size (a longer status, a counter going to three digits) is caught by the observer on its slot; a slot
+  // that gets its first child (a part that mounted late) is caught here.
+  const mutations = typeof win?.MutationObserver === "function" ? new win.MutationObserver(() => schedule()) : undefined;
+  for (const entry of entries) if (entry.id !== "spacer" && entry.id !== "|" && entry.id !== "more") mutations?.observe(entry.element, { childList: true });
+
+  container.append(bar);
+  syncDividers();
+  update();
+
+  return {
+    element: bar,
+    get items() {
+      return entries.map(({ id, priority, collapsible }) => ({ id, priority, collapsible }));
+    },
+    slots,
+    slot(name) {
+      return slots[name];
+    },
+    /** The items moved into the more menu, in bar order. */
+    get collapsed() {
+      return [...collapsed];
+    },
+    get menuOpen() {
+      return menuOpen;
+    },
+    /** Change an item's priority or whether it collapses (the workspace raises `actions` while one of them is primary). */
+    setItem(name, { priority, collapsible } = {}) {
+      const entry = entries.find((candidate) => candidate.id === name);
+      if (!entry || REPEATABLE.has(name) || name === "more") return false;
+      if (priority !== undefined) {
+        if (!Number.isFinite(priority)) throw new TypeError(`the priority of the toolbar item "${name}" must be a number.`);
+        entry.priority = priority;
+      }
+      if (collapsible !== undefined) entry.collapsible = Boolean(collapsible);
+      schedule();
+      return true;
+    },
+    mount(name, part) {
+      if (destroyed || !slots[name] || REPEATABLE.has(name) || name === "more") return () => {};
+      parts.set(name, part);
+      schedule();
+      return () => {
+        if (parts.get(name) === part) parts.delete(name);
+        schedule();
+      };
+    },
+    /** What the more menu would list now, grouped by part. */
+    menuItems() {
+      return menuGroups();
+    },
+    update,
+    openMenu,
+    closeMenu,
+    setDensity(next) {
+      density = next === "touch" ? "touch" : "comfortable";
+      bar.dataset.density = density;
+      schedule();
+    },
+    destroy() {
+      if (destroyed) return;
+      closeMenu({ restoreFocus: false });
+      destroyed = true;
+      if (frame > 0) win.cancelAnimationFrame?.(frame);
+      observer?.disconnect();
+      mutations?.disconnect();
+      parts.clear();
+      bar.remove();
+    },
+  };
+}

package/dist/workspace-parts.js

@@ -18,3 +18,11 @@ export { mergeSlides, splitSlideByBlocks } from "./content-actions.js";
 export { installCanvasVariableEditing } from "./canvas-variables.js";
 export { createLayoutStudio } from "./workspace-layouts.js";
 export { buildStudioShell, createStudio } from "./studio.js";
+// CE-28: the toolbar's parts: the deck title, the expand button, the Design quick menu, the review pill, the help sheet and the host's actions.
+export { createDeckTitle } from "./deck-title.js";
+export { createExpandButton, createExpandController } from "./editor-expand.js";
+export { createDesignMenu } from "./design-menu.js";
+export { createReviewPill } from "./review-pill.js";
+export { createHelpButton } from "./shortcuts-sheet.js";
+export { createToolbarActions } from "./toolbar-actions.js";
+export { listSwitchOptions } from "./switches.js";

package/dist/workspace-shell.js

@@ -1,6 +1,7 @@
-// CE-06: the default arrangement of the workspace (`layout: "full"`, `"canvas"` or `"source"`): a bar, the source pane, the slide, the slide
-// row, and a side panel for Review and Design. It only builds DOM and hands the elements to the workspace as named slots; a host that
+// CE-06: the default arrangement of the workspace (`layout: "full"`, `"canvas"`, `"embed"` or `"source"`): a bar, the source pane, the slide, the
+// slide row, and a side panel for Review and Design. It only builds DOM and hands the elements to the workspace as named slots; a host that
 // arranges the parts itself passes its own elements as `slots` and none of this runs. Styled by src/styles/workspace.css (tokens only).
+// CE-28: the bar is a toolbar (src/toolbar.js): one slot per named item, in the order the preset or the `toolbar` option gives.
 
 const make = (doc, tag, attributes = {}, ...children) => {
   const node = doc.createElement(tag);
@@ -14,41 +15,101 @@ const make = (doc, tag, attributes = {}, ...children) => {
 };
 
 const VIEW_LABELS = { slide: "Slide", sorter: "Sorter", outline: "Outline", layouts: "Layouts" };
+export const viewLabel = (view) => VIEW_LABELS[view] ?? view;
+
+/** CE-28: the toolbar of each built layout. `"source"` has none (the pane has its own bar), nor has `slots`; the Studio builds its own topbar. */
+export const TOOLBAR_PRESETS = Object.freeze({
+  full: Object.freeze(["title", "history", "find", "views", "spacer", "actions", "design", "review", "autosave", "export", "present", "help", "expand", "more"]),
+  canvas: Object.freeze(["title", "history", "spacer", "actions", "expand", "more"]),
+  embed: Object.freeze(["title", "history", "counter", "spacer", "actions", "design", "expand", "present", "more"]),
+  // CE-28 wave 2: a deck to look at, read-only.
+  viewer: Object.freeze(["title", "counter", "spacer", "actions", "present", "expand", "more"]),
+  source: Object.freeze([]),
+  slots: Object.freeze([]),
+});
+
+/** The text of the shell's own controls, with the host's `labels`. */
+export const shellText = (labels = {}) => ({ slideView: "Slide view", undo: "Undo", redo: "Redo", find: "Find", review: "Review", design: "Design", inspector: "Inspector", ...labels });
 
 /**
- * Build the shell inside `root`. `parts` names what is mounted (`source`, `canvas`, `navigator`, `thumbnails`, `present`, `export`, `find`,
- * `review`, `design`, `layouts`, `sorter`, `outline`, `persistence`, `history`); `views` lists the views in switch order. Returns the slots
- * (one element per mounted part) and the bar's controls.
+ * The controls of a toolbar item the workspace builds itself (`history`, `find`, `views`), inside `container`: the bar's slot, or a host's own
+ * element (`slots.history`, `slots.views`). Returns the controls (`undo` and `redo`, `find`, `views`).
  */
-export function buildWorkspaceShell(root, { parts, views, layout, labels = {} }) {
-  const doc = root.ownerDocument;
-  const text = { slideView: "Slide view", undo: "Undo", redo: "Redo", find: "Find", review: "Review", design: "Design", inspector: "Inspector", ...labels };
-  const slots = {};
+export function buildItemControls(name, container, { views = [], labels = {} } = {}) {
+  const doc = container.ownerDocument;
+  const text = shellText(labels);
   const controls = {};
-  const slot = (name, tag = "div", attributes = {}) => (slots[name] = make(doc, tag, { "data-opf-slot": name, ...attributes }));
-
-  // The bar.
-  const bar = make(doc, "header", { class: "opf-ws-bar" });
-  if (parts.history) {
+  if (name === "history") {
     controls.undo = make(doc, "button", { type: "button", class: "opf-ws-button", "data-opf-action": "undo", "aria-label": text.undo, title: `${text.undo} · Ctrl/Cmd Z`, text: text.undo });
     controls.redo = make(doc, "button", { type: "button", class: "opf-ws-button", "data-opf-action": "redo", "aria-label": text.redo, title: `${text.redo} · Ctrl/Cmd Shift Z`, text: text.redo });
-    bar.append(make(doc, "div", { class: "opf-ws-group" }, controls.undo, controls.redo));
-  }
-  if (parts.find) {
+    container.classList.add("opf-ws-group");
+    container.append(controls.undo, controls.redo);
+  } else if (name === "find") {
     controls.find = make(doc, "button", { type: "button", class: "opf-ws-button", "data-opf-action": "find", "aria-expanded": "false", "aria-keyshortcuts": "Control+F Meta+F Control+H", title: `${text.find} · Ctrl/Cmd F`, text: text.find });
-    bar.append(controls.find);
-  }
-  if (views.length > 1) {
-    const group = make(doc, "div", { class: "opf-ws-views", role: "group", "aria-label": text.slideView });
+    container.append(controls.find);
+  } else if (name === "views") {
     controls.views = {};
-    for (const view of views) group.append(controls.views[view] = make(doc, "button", { type: "button", class: "opf-ws-button", "data-opf-view-button": view, "aria-pressed": "false", text: VIEW_LABELS[view] ?? view }));
-    bar.append(group);
+    const group = make(doc, "div", { class: "opf-ws-views", role: "group", "aria-label": text.slideView });
+    for (const view of views) group.append(controls.views[view] = make(doc, "button", { type: "button", class: "opf-ws-button", "data-opf-view-button": view, "aria-pressed": "false", text: viewLabel(view) }));
+    container.append(group);
   }
-  bar.append(make(doc, "span", { class: "opf-ws-spacer" }));
-  if (parts.persistence) bar.append(slot("autosave", "span", { class: "opf-ws-autosave" }));
-  if (parts.export) bar.append(slot("export", "div", { class: "opf-ws-export" }));
-  if (parts.present) bar.append(slot("present", "div", { class: "opf-ws-present" }));
-  const hasBar = bar.children.length > 1;
+  return controls;
+}
+
+// The toolbar items whose slot is a part's mount element: the slot's name (`data-opf-slot`; `design` and `review` already name the side panels,
+// so their items' slots are `designMenu` and `reviewPill`) and the class the default layout gives it.
+export const ITEM_SLOTS = Object.freeze({
+  autosave: ["autosave", "opf-ws-autosave"],
+  export: ["export", "opf-ws-export"],
+  present: ["present", "opf-ws-present"],
+  title: ["title", "opf-ws-title"],
+  counter: ["counter", "opf-ws-counter"],
+  expand: ["expand", "opf-ws-expand"],
+  design: ["designMenu", "opf-ws-design-menu"],
+  review: ["reviewPill", "opf-ws-review-pill"],
+  help: ["help", "opf-ws-help"],
+  actions: ["actions", "opf-ws-actions"],
+});
+const STRUCTURE = new Set(["spacer", "|", "more"]);
+
+/**
+ * Build the toolbar in `host` (the shell's bar, or the host's `slots.toolbar`) from `items` (already filtered to what this editor fills).
+ * Returns the toolbar, the slots of the parts that mount in it and the controls the shell built in it; nothing when no item shows anything.
+ */
+export function buildToolbar(host, { items, views, labels = {}, density, createToolbar, onError, onCollapse, icons }) {
+  if (!items.some((item) => !STRUCTURE.has(item.id))) return { toolbar: undefined, slots: {}, controls: {} };
+  const toolbar = createToolbar(host, { items, density, onError, onCollapse, ...(icons ? { icons } : {}), labels: { ...(labels.more ? { more: labels.more } : {}), ...(labels.moreMenu ? { menu: labels.moreMenu } : {}) } });
+  const slots = {};
+  const controls = {};
+  for (const [name, element] of Object.entries(toolbar.slots)) {
+    if (ITEM_SLOTS[name]) {
+      const [slotName, className] = ITEM_SLOTS[name];
+      element.setAttribute("data-opf-slot", slotName);
+      element.classList.add(className);
+      slots[slotName] = element;
+    } else if (!STRUCTURE.has(name)) Object.assign(controls, buildItemControls(name, element, { views, labels }));
+  }
+  return { toolbar, slots, controls };
+}
+
+/**
+ * Build the shell inside `root`. `parts` names what is mounted (`source`, `canvas`, `navigator`, `thumbnails`, `present`, `export`, `find`,
+ * `review`, `design`, `layouts`, `sorter`, `outline`, `persistence`, `history`); `views` lists the views in switch order; `toolbar` the toolbar
+ * items (`createToolbar` builds them; `toolbarHost`, the host's own element for the bar, replaces the shell's `header`). Returns the slots (one
+ * element per mounted part), the controls and the toolbar.
+ */
+export function buildWorkspaceShell(root, { parts, views, layout, labels = {}, toolbar: items = [], createToolbar, density, toolbarHost, onError, onCollapse, icons }) {
+  const doc = root.ownerDocument;
+  const text = shellText(labels);
+  const slots = {};
+  const controls = {};
+  const slot = (name, tag = "div", attributes = {}) => (slots[name] = make(doc, tag, { "data-opf-slot": name, ...attributes }));
+
+  // The bar: the toolbar, in the shell's header unless the host gave its own element for it.
+  const bar = toolbarHost ?? make(doc, "header", { class: "opf-ws-bar" });
+  const built = buildToolbar(bar, { items, views, labels, density, createToolbar, onError, onCollapse, icons });
+  Object.assign(slots, built.slots);
+  Object.assign(controls, built.controls);
 
   // The main column: the slide (or another view) over the slide row, and the status line. A source-only layout has none: the pane has its own
   // bar, problems and status.
@@ -81,7 +142,7 @@ export function buildWorkspaceShell(root, { parts, views, layout, labels = {} })
   if (main) body.append(main);
 
   // The side panel: Review and Design as tabs.
-  const tabs = ["design", "review"].filter((name) => parts[name]);
+  const tabs = ["design", "review"].filter((name) => parts[name] && !(name === "review" && parts.reviewHeadless));
   if (tabs.length) {
     controls.tabs = {};
     const list = make(doc, "div", { class: "opf-ws-tabs", role: "tablist", "aria-label": text.inspector });
@@ -94,13 +155,12 @@ export function buildWorkspaceShell(root, { parts, views, layout, labels = {} })
     body.append(side);
   }
 
-  if (parts.persistence) root.append();
-  if (hasBar) root.append(bar);
+  if (built.toolbar && !toolbarHost) root.append(bar);
   if (parts.persistence) root.append(slot("banner", "div", { class: "opf-ws-banner", hidden: true }));
   root.append(body);
   root.setAttribute("data-opf-layout", layout);
   controls.frame = frame;
   controls.stage = stage;
-  controls.bar = bar;
-  return { slots, controls };
+  controls.bar = built.toolbar ? bar : undefined;
+  return { slots, controls, toolbar: built.toolbar };
 }

package/dist/workspace-theme.js

@@ -35,6 +35,17 @@ export const THEME_TOKENS = Object.freeze({
   controlHeight: "--opf-ui-control-h",
   shadow: "--opf-ui-shadow-pop",
   motion: "--opf-ui-ease",
+  barBackground: "--opf-ui-bar-bg",
+  barText: "--opf-ui-bar-fg",
+  barBorder: "--opf-ui-bar-border",
+  barGap: "--opf-ui-bar-gap",
+  barPadding: "--opf-ui-bar-padding",
+  barHeight: "--opf-ui-bar-height",
+  titleFont: "--opf-ui-title-font",
+  titleSize: "--opf-ui-title-size",
+  titleWeight: "--opf-ui-title-weight",
+  titleText: "--opf-ui-title-fg",
+  overlayZ: "--opf-ui-z-overlay",
 });
 
 const FULL_NAMES = new Set(Object.values(THEME_TOKENS));