@openpresentation/opf-editor 0.24.0 → 0.24.2

package/dist/thumbnail-cache.d.ts

@@ -0,0 +1,25 @@
+/** The renderer's `toSvg(presentation, slides, options)`: one SVG string for a slide number, or an array for a list of slide numbers (1-based). */
+export type ThumbnailRenderer = (presentation: any, slides: number | number[], options: any) => string | string[];
+
+export interface ThumbnailCacheOptions {
+  /** The renderer's `toSvg` from `@openpresentation/opf-render/svg`. */
+  toSvg: ThumbnailRenderer;
+  /** The render options for every thumbnail (`catalogs`, `fonts`, `text: "system"`, `trace: false`, ...). The `fonts` handle is not part of the cache context. */
+  getOptions: () => Record<string, any>;
+}
+
+export interface ThumbnailCache {
+  /**
+   * Render the thumbnails that are not cached yet, in one `toSvg` call so the renderer resolves the deck once, and drop entries no slide uses.
+   * Pass `indices` (0-based) to render only those slides, for example the visible ones; without it every missing slide renders.
+   * A change of deck metadata, section context, catalogs or render settings clears the whole cache, because inherited furniture changes.
+   */
+  prepare(presentation: any, indices?: number[]): void;
+  /** The SVG markup (or the text "Preview unavailable") of one slide. Entries are keyed by the slide's index, the slide count and the slide's own content. */
+  html(presentation: any, index: number): string;
+  /** Forget everything, for example after fonts load. */
+  clear(): void;
+}
+
+/** A cache of slide thumbnails that renders only the slides whose content changed. */
+export declare function createThumbnailCache(options: ThumbnailCacheOptions): ThumbnailCache;

package/dist/thumbnail-cache.js

@@ -0,0 +1,50 @@
+// Slide thumbnail cache (promoted from the playground example by RR-98). The host owns the font gate: it runs before this synchronous render and
+// clears the cache when faces load. Selecting every missing slide in one call makes the renderer resolve/compose the deck once, including hidden
+// slides. `prepare(deck, indices)` renders only the listed slides (a lazy strip draws the visible ones first); without `indices` it renders every
+// missing slide, as before.
+export function createThumbnailCache({toSvg, getOptions}) {
+  const cache = new Map();
+  let context;
+  let preparedDeck;
+  const key = (deck, index) => JSON.stringify([index, deck.slides.length, deck.slides[index]]);
+  const contextOf = (deck, options) => {
+    const {slides, ...metadata} = deck;
+    const {fonts: _fonts, ...settings} = options;
+    // Deck metadata and preceding sections can change inherited furniture, variables, data and design on another slide.
+    return JSON.stringify([metadata, slides.map(slide => slide.section), settings]);
+  };
+  function prepare(deck, indices) {
+    const options = getOptions();
+    const nextContext = contextOf(deck, options);
+    if (nextContext !== context) cache.clear();
+    context = nextContext;
+    preparedDeck = deck;
+    const keys = deck.slides.map((_, index) => key(deck, index));
+    const wanted = indices === undefined ? keys.map((_, index) => index) : [...new Set(indices)].filter(index => Number.isInteger(index) && index >= 0 && index < keys.length);
+    const missing = wanted.filter(index => !cache.has(keys[index]));
+    if (missing.length) {
+      try {
+        const images = toSvg(deck, missing.map(index => index + 1), options);
+        missing.forEach((index, position) => cache.set(keys[index], images[position]));
+      } catch {
+        // A paint error can belong to just one slide (for example an invalid XML character). Retain the old per-slide
+        // "Preview unavailable" behavior in this exceptional path instead of hiding every otherwise valid thumbnail.
+        for (const index of missing) {
+          try { cache.set(keys[index], toSvg(deck, index + 1, options)); }
+          catch { cache.set(keys[index], 'Preview unavailable'); }
+        }
+      }
+    }
+    const live = new Set(keys);
+    for (const value of cache.keys()) if (!live.has(value)) cache.delete(value);
+  }
+  return {
+    prepare,
+    html(deck, index) {
+      const value = key(deck, index);
+      if (deck !== preparedDeck || !cache.has(value)) prepare(deck);
+      return cache.get(value);
+    },
+    clear: () => { cache.clear(); preparedDeck = undefined; },
+  };
+}

package/dist/thumbnail-strip.d.ts

@@ -0,0 +1,50 @@
+import type { EditorSession } from "./index.js";
+import type { ThumbnailCache } from "./thumbnail-cache.js";
+
+export interface ThumbnailStripLabels {
+  /** The accessible name of the `nav`. Default: "Slides". */
+  navigation?: string;
+  /** The title shown for a slide without one. Default: "Untitled". */
+  untitled?: string;
+  /** Read after the title of a hidden slide. Default: "hidden". */
+  hidden?: string;
+  /** Shown in place of a thumbnail the renderer could not draw. Default: "Preview unavailable". */
+  unavailable?: string;
+}
+export interface ThumbnailStripOptions {
+  /** The editor session. Required. */
+  editor: EditorSession;
+  /** The renderer's fonts handle, the one the canvas and the export use. Thumbnails wait for the faces the document needs. */
+  fonts?: unknown;
+  /** Extra `toSvg` options, for example `catalogs`. Thumbnails always draw with `text: "system"` and `trace: false`. */
+  renderOptions?: Record<string, any>;
+  /** The current slide (0-based). Default 0. */
+  slideIndex?: number;
+  /** The user chose a slide (click, Enter or Space). Call `setSlide` yourself if you want the strip to follow. Not called by `setSlide`. */
+  onSelect?: (index: number) => void;
+  /** `"comfortable"` (default) or `"touch"`: larger gaps, 40px-high items and 104px thumbnails. */
+  density?: "comfortable" | "touch";
+  /** Thumbnail width in pixels. Default 128 (104 for touch). */
+  size?: number;
+  /** `"horizontal"` (default) scrolls sideways; `"vertical"` scrolls down. */
+  orientation?: "horizontal" | "vertical";
+  labels?: ThumbnailStripLabels;
+  /** A thumbnail cache to share with other views. Default: the strip's own. */
+  cache?: ThumbnailCache;
+  /** False to draw every thumbnail at once instead of those near the viewport. Default true; also off without IntersectionObserver. */
+  lazy?: boolean;
+  /** False to stop following the editor on its own; call `refresh()` yourself. Default true. */
+  autoRefresh?: boolean;
+  /** The document's faces could not be loaded, so no thumbnail was drawn. */
+  onError?: (error: unknown) => void;
+}
+export interface ThumbnailStrip {
+  readonly element: HTMLElement;
+  getSlide(): number;
+  /** Mark a slide as current (`aria-current`), scroll it into view and draw it. Does not call `onSelect`. */
+  setSlide(index: number): void;
+  /** Redraw from the session now. Only slides whose content changed render again. `{ clear: true }` also drops the cache, for example after the host loaded fonts. */
+  refresh(options?: { clear?: boolean }): void;
+  destroy(): void;
+}
+export declare function createThumbnailStrip(container: HTMLElement, options: ThumbnailStripOptions): ThumbnailStrip;

package/dist/thumbnail-strip.js

@@ -0,0 +1,310 @@
+// Thumbnail strip (RR-98): a `nav` of real slide renders, each with a mono index and the slide title; the current one has `aria-current` and an
+// accent ring. Thumbnails are drawn by the same renderer, catalogs and fonts handle the canvas uses, through the thumbnail cache: a slide whose
+// content did not change is never rendered again, and the strip is lazy (items near the viewport render first, through IntersectionObserver when
+// the browser has it). Plain DOM, no framework, no network.
+import { mergeCatalogs } from "./index.js";
+import { toSvg } from "@openpresentation/opf-render/svg";
+import { whenFontsReady } from "./font-gate.js";
+import { slideTitle } from "./slides.js";
+import { createThumbnailCache } from "./thumbnail-cache.js";
+
+const DEFAULT_LABELS = {
+  navigation: "Slides",
+  untitled: "Untitled",
+  hidden: "hidden",
+  unavailable: "Preview unavailable",
+};
+const pad = (value, count) => String(value).padStart(Math.max(2, String(count).length), "0");
+
+/**
+ * Mount the thumbnail strip into `container`.
+ *
+ * Options: `editor` (required session), `fonts` (the renderer's fonts handle the canvas uses), `renderOptions` (extra `toSvg` options, such as
+ * `catalogs`; the thumbnails always draw with `text: "system"` and `trace: false`), `slideIndex`, `onSelect(index)` (the user chose a slide),
+ * `density` (`"comfortable"` or `"touch"`), `size` (thumbnail width in pixels; default 128, or 104 for touch), `orientation` (`"horizontal"`,
+ * the default, or `"vertical"`), `labels` (`navigation`, `untitled`, `hidden`, `unavailable`), `cache` (a thumbnail cache to share; default:
+ * its own), `lazy` (default true), `autoRefresh` (default true: follow the editor's changes on its own) and `onError(error)`.
+ *
+ * Returns `{ element, getSlide(), setSlide(index), refresh({ clear }), destroy() }`.
+ */
+export function createThumbnailStrip(container, options = {}) {
+  if (!container?.ownerDocument) throw new TypeError("A DOM container is required.");
+  const { editor } = options;
+  if (!editor || typeof editor.subscribe !== "function") throw new TypeError("createThumbnailStrip needs an editor session.");
+  const doc = container.ownerDocument;
+  const win = doc.defaultView;
+  const labels = { ...DEFAULT_LABELS, ...(options.labels ?? {}) };
+  const density = options.density === "touch" ? "touch" : "comfortable";
+  const orientation = options.orientation === "vertical" ? "vertical" : "horizontal";
+  const size = Number(options.size) > 0 ? Number(options.size) : density === "touch" ? 104 : 128;
+  const lazy = options.lazy !== false && typeof win?.IntersectionObserver === "function";
+
+  // The renderer draws with the session's registered catalogs (plus any `renderOptions.catalogs`): the same list the canvas and core resolve with.
+  const resolveOptions = () => ({ variables: false, ...(options.renderOptions ?? {}), catalogs: mergeCatalogs(editor.catalogs, options.renderOptions?.catalogs) });
+  const cache = options.cache ?? createThumbnailCache({
+    toSvg,
+    getOptions: () => ({ ...resolveOptions(), fonts: options.fonts, text: "system", trace: false }),
+  });
+
+  let active = 0;
+  let focusIndex = 0;
+  let deck = editor.presentation;
+  let disposed = false;
+  let scheduled;
+  let renderToken = 0;
+  let observer;
+  const visible = new Set();
+  const items = [];
+
+  const element = doc.createElement("nav");
+  element.className = "opf-thumbs";
+  element.dataset.orientation = orientation;
+  element.dataset.density = density;
+  element.setAttribute("aria-label", labels.navigation);
+  element.style.setProperty("--opf-thumbs-w", `${size}px`);
+  const list = doc.createElement("ol");
+  list.className = "opf-thumbs-list";
+  element.append(list);
+  container.append(element);
+
+  const clamp = (value, total) => (total === 0 ? 0 : Math.max(0, Math.min(total - 1, value)));
+  active = clamp(Math.trunc(Number(options.slideIndex) || 0), deck.slides.length);
+  focusIndex = active;
+
+  function makeItem(index) {
+    const li = doc.createElement("li");
+    li.className = "opf-thumbs-slot";
+    const button = doc.createElement("button");
+    button.type = "button";
+    button.className = "opf-thumbs-item";
+    button.dataset.index = String(index);
+    const frame = doc.createElement("span");
+    frame.className = "opf-thumbs-frame";
+    frame.dataset.state = "pending";
+    frame.setAttribute("aria-hidden", "true");
+    const label = doc.createElement("span");
+    label.className = "opf-thumbs-label";
+    const indexNode = doc.createElement("span");
+    indexNode.className = "opf-thumbs-index";
+    const titleNode = doc.createElement("span");
+    titleNode.className = "opf-thumbs-title";
+    const note = doc.createElement("span");
+    note.className = "opf-thumbs-note";
+    label.append(indexNode, " ", titleNode, note);
+    button.append(frame, label);
+    li.append(button);
+    return { li, button, frame, indexNode, titleNode, note, index, html: undefined };
+  }
+
+  /** Grow or shrink to `count` slots, and write each slot's index, title and state. Cheap: no rendering. */
+  function syncItems() {
+    const slides = deck.slides;
+    while (items.length < slides.length) {
+      const item = makeItem(items.length);
+      items.push(item);
+      list.append(item.li);
+      observer?.observe(item.button);
+    }
+    while (items.length > slides.length) {
+      const item = items.pop();
+      observer?.unobserve(item.button);
+      visible.delete(item.index);
+      item.li.remove();
+    }
+    active = clamp(active, slides.length);
+    focusIndex = clamp(focusIndex, slides.length);
+    slides.forEach((slide, index) => {
+      const item = items[index];
+      const title = slideTitle(slide);
+      item.indexNode.textContent = pad(index + 1, slides.length);
+      item.titleNode.textContent = title || labels.untitled;
+      item.titleNode.dataset.untitled = String(!title);
+      item.note.textContent = slide.hidden === true ? ` ${labels.hidden}` : "";
+      item.button.dataset.hidden = String(slide.hidden === true);
+    });
+    paintActive();
+  }
+  function paintActive() {
+    items.forEach((item, index) => {
+      if (index === active) item.button.setAttribute("aria-current", "true");
+      else item.button.removeAttribute("aria-current");
+      item.button.tabIndex = index === focusIndex ? 0 : -1;
+    });
+  }
+
+  function setThumbnail(item, html) {
+    if (item.html === html) return;
+    item.html = html;
+    if (typeof html === "string" && /^\s*<svg[\s>]/.test(html)) {
+      item.frame.innerHTML = html;
+      item.frame.dataset.state = "ready";
+      item.frame.querySelectorAll("[tabindex]").forEach((node) => node.removeAttribute("tabindex"));
+      // Follow the deck's slide shape (16:9, 4:3, ...) once a real render shows it.
+      const box = item.frame.querySelector("svg")?.viewBox?.baseVal;
+      if (box?.width > 0 && box?.height > 0) element.style.setProperty("--opf-thumbs-ratio", `${box.width} / ${box.height}`);
+    } else {
+      item.frame.textContent = labels.unavailable;
+      item.frame.dataset.state = "error";
+    }
+  }
+  const markFrames = (state) => items.forEach((item) => { if (item.frame.dataset.state !== "ready") item.frame.dataset.state = state; });
+
+  /** The slots to draw now: the active one and every slot near the viewport (all of them without IntersectionObserver). */
+  function wanted() {
+    if (!lazy) return items.map((_, index) => index);
+    const set = new Set(visible);
+    if (items.length) set.add(active);
+    return [...set].filter((index) => index < items.length).sort((a, b) => a - b);
+  }
+  function draw() {
+    const indices = wanted();
+    if (!indices.length) return;
+    const snapshot = deck;
+    cache.prepare(snapshot, indices);
+    for (const index of indices) setThumbnail(items[index], cache.html(snapshot, index));
+  }
+  /** Gate on the fonts the document needs (the canvas gate), then draw. Unchanged slides come from the cache; nothing else is rendered. */
+  function paintThumbnails() {
+    const token = ++renderToken;
+    let loaded = false;
+    try {
+      return whenFontsReady(options.fonts, deck, {
+        renderOptions: resolveOptions(),
+        isCurrent: () => !disposed && token === renderToken,
+        loading: () => { loaded = true; markFrames("loading"); },
+        // Faces that loaded after thumbnails were drawn change how text measures: forget them, as the playground does.
+        ready: () => { if (loaded) cache.clear(); draw(); },
+        failed: (error) => { markFrames("error"); options.onError?.(error); },
+      });
+    } catch (error) {
+      options.onError?.(error);
+    }
+  }
+
+  function scrollToActive() {
+    const item = items[active]?.li;
+    if (!item || !element.clientWidth) return;
+    const horizontal = orientation === "horizontal";
+    const start = horizontal ? item.offsetLeft : item.offsetTop;
+    const length = horizontal ? item.offsetWidth : item.offsetHeight;
+    const view = horizontal ? element.clientWidth : element.clientHeight;
+    const current = horizontal ? element.scrollLeft : element.scrollTop;
+    const edge = 8;
+    let target = current;
+    if (start - edge < current) target = Math.max(0, start - edge);
+    else if (start + length + edge > current + view) target = start + length + edge - view;
+    if (target !== current) element[horizontal ? "scrollLeft" : "scrollTop"] = target;
+  }
+
+  function select(index) {
+    if (index !== active) {
+      active = index;
+      if (!element.contains(doc.activeElement)) focusIndex = index;
+      paintActive();
+      scrollToActive();
+      paintThumbnails();
+    }
+    options.onSelect?.(index);
+  }
+  list.addEventListener("click", (event) => {
+    const button = event.target.closest?.(".opf-thumbs-item");
+    if (button && list.contains(button)) select(Number(button.dataset.index));
+  });
+  list.addEventListener("focusin", (event) => {
+    const button = event.target.closest?.(".opf-thumbs-item");
+    if (!button) return;
+    focusIndex = Number(button.dataset.index);
+    paintActive();
+  });
+  // Arrow keys move focus along the strip (Enter or Space chooses); Home and End jump to the ends.
+  list.addEventListener("keydown", (event) => {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.isComposing) return;
+    const button = event.target.closest?.(".opf-thumbs-item");
+    if (!button) return;
+    const rtl = orientation === "horizontal" && win.getComputedStyle(element).direction === "rtl";
+    const keys = orientation === "horizontal" ? { ArrowLeft: rtl ? 1 : -1, ArrowRight: rtl ? -1 : 1 } : { ArrowUp: -1, ArrowDown: 1 };
+    const from = Number(button.dataset.index);
+    let target;
+    if (event.key in keys) target = from + keys[event.key];
+    else if (event.key === "Home") target = 0;
+    else if (event.key === "End") target = items.length - 1;
+    else return;
+    event.preventDefault();
+    target = clamp(target, items.length);
+    items[target]?.button.focus();
+  });
+
+  if (lazy) {
+    const margin = orientation === "horizontal" ? "0px 240px 0px 240px" : "240px 0px 240px 0px";
+    observer = new win.IntersectionObserver((entries) => {
+      let added = false;
+      for (const entry of entries) {
+        const index = Number(entry.target.dataset.index);
+        if (entry.isIntersecting) { if (!visible.has(index)) { visible.add(index); added = true; } }
+        else visible.delete(index);
+      }
+      if (added && !disposed) paintThumbnails();
+    }, { root: element, rootMargin: margin });
+  }
+
+  syncItems();
+  paintThumbnails();
+  scrollToActive();
+
+  function cancelScheduled() {
+    if (scheduled === undefined) return;
+    (win.cancelAnimationFrame ?? clearTimeout).call(win, scheduled);
+    scheduled = undefined;
+  }
+  function refresh({ clear = false } = {}) {
+    if (disposed) return;
+    cancelScheduled();
+    if (clear) cache.clear();
+    deck = editor.presentation;
+    const before = items.length;
+    syncItems();
+    paintThumbnails();
+    if (items.length !== before) scrollToActive();
+  }
+  // Several session events in one frame (typing, a patch with many operations) draw once.
+  const unsubscribe = options.autoRefresh === false ? undefined : editor.subscribe(() => {
+    if (scheduled !== undefined) return;
+    scheduled = (win.requestAnimationFrame ?? ((callback) => setTimeout(callback, 16))).call(win, () => { scheduled = undefined; refresh(); });
+  });
+
+  return {
+    element,
+    /** The slide shown as current. */
+    getSlide: () => active,
+    /** Mark another slide as current, scroll it into view and draw it. Does not call `onSelect`. */
+    setSlide(value) {
+      if (disposed) return;
+      // The host often calls this as soon as it added a slide, before the strip's own frame-delayed refresh has seen it.
+      const total = editor.snapshot?.().presentation.slides.length ?? items.length;
+      if (total !== items.length) {
+        active = clamp(Math.trunc(Number(value) || 0), total);
+        focusIndex = active;
+        refresh();
+        scrollToActive();
+        return;
+      }
+      const next = clamp(Math.trunc(Number(value) || 0), items.length);
+      if (next === active) { scrollToActive(); return; }
+      active = next;
+      if (!element.contains(doc.activeElement)) focusIndex = next;
+      paintActive();
+      scrollToActive();
+      paintThumbnails();
+    },
+    /** Redraw from the session now. `{ clear: true }` also drops the cache, for example after the host loaded fonts. */
+    refresh,
+    destroy() {
+      if (disposed) return;
+      disposed = true;
+      cancelScheduled();
+      unsubscribe?.();
+      observer?.disconnect();
+      element.remove();
+    },
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-editor",
-  "version": "0.24.0",
+  "version": "0.24.2",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",
@@ -38,6 +38,10 @@
       "default": "./dist/svelte.js"
     },
     "./package.json": "./package.json",
+    "./styles.css": {
+      "style": "./dist/styles.css",
+      "default": "./dist/styles.css"
+    },
     "./canvas": {
       "types": "./dist/canvas.d.ts",
       "default": "./dist/canvas.js"
@@ -221,6 +225,34 @@
     "./annotations": {
       "types": "./dist/annotations.d.ts",
       "default": "./dist/annotations.js"
+    },
+    "./source-pane": {
+      "types": "./dist/source-pane.d.ts",
+      "default": "./dist/source-pane.js"
+    },
+    "./export-menu": {
+      "types": "./dist/export-menu.d.ts",
+      "default": "./dist/export-menu.js"
+    },
+    "./agent-handoff": {
+      "types": "./dist/agent-handoff.d.ts",
+      "default": "./dist/agent-handoff.js"
+    },
+    "./agent-handoff-dialog": {
+      "types": "./dist/agent-handoff-dialog.d.ts",
+      "default": "./dist/agent-handoff-dialog.js"
+    },
+    "./slide-navigator": {
+      "types": "./dist/slide-navigator.d.ts",
+      "default": "./dist/slide-navigator.js"
+    },
+    "./thumbnail-strip": {
+      "types": "./dist/thumbnail-strip.d.ts",
+      "default": "./dist/thumbnail-strip.js"
+    },
+    "./thumbnail-cache": {
+      "types": "./dist/thumbnail-cache.d.ts",
+      "default": "./dist/thumbnail-cache.js"
     }
   },
   "types": "./dist/index.d.ts",
@@ -238,7 +270,7 @@
     "check:font-hotlinks": "node --test scripts/check-font-hotlinks.test.mjs && node scripts/check-font-hotlinks.mjs",
     "check:font-hotlinks:built": "node scripts/check-font-hotlinks.mjs --built dist artifacts/playground",
     "build:playground": "node scripts/build-playground.mjs",
-    "test:playground": "npm run build:playground && npm run check:font-hotlinks:built && node test/playground-pptx.mjs && node test/playground-script-fonts.mjs artifacts/playground-script-fonts && node test/playground-lazy-fonts.mjs artifacts/playground-lazy-fonts && node test/playground-base-fonts.mjs artifacts/playground-base-fonts && node test/playground-source.mjs && node test/design-controls-browser.mjs && node test/design-gaps-browser.mjs && node test/chart-options-browser.mjs && node test/persistence-browser.mjs && node test/slides-browser.mjs && node test/layout-templates-browser.mjs && node test/template-panel-browser.mjs && node test/numbering-panel-browser.mjs && node test/playground-ensure-fonts.mjs artifacts/playground-ensure-fonts && node test/canvas-fonts-browser.mjs artifacts/canvas-fonts && node test/find-replace-browser.mjs && node test/image-crop-browser.mjs && node test/mobile-browser.mjs && node test/review-panel-browser.mjs && node test/review-hook-browser.mjs && node test/playground-download.mjs artifacts/playground-download",
+    "test:playground": "npm run build:playground && npm run check:font-hotlinks:built && node test/playground-pptx.mjs && node test/playground-script-fonts.mjs artifacts/playground-script-fonts && node test/playground-lazy-fonts.mjs artifacts/playground-lazy-fonts && node test/playground-base-fonts.mjs artifacts/playground-base-fonts && node test/playground-source.mjs && node test/design-controls-browser.mjs && node test/design-gaps-browser.mjs && node test/chart-options-browser.mjs && node test/persistence-browser.mjs && node test/slides-browser.mjs && node test/slide-navigator-browser.mjs && node test/layout-templates-browser.mjs && node test/template-panel-browser.mjs && node test/numbering-panel-browser.mjs && node test/playground-ensure-fonts.mjs artifacts/playground-ensure-fonts && node test/canvas-fonts-browser.mjs artifacts/canvas-fonts && node test/find-replace-browser.mjs && node test/image-crop-browser.mjs && node test/mobile-browser.mjs && node test/review-panel-browser.mjs && node test/review-hook-browser.mjs && node test/source-pane-browser.mjs && node test/playground-download.mjs artifacts/playground-download && node test/export-menu-browser.mjs && node test/agent-handoff-browser.mjs",
     "test:code-browser": "node test/code-browser.mjs",
     "test:selection-browser": "node test/selection-browser.mjs",
     "test:click-entry-browser": "node test/click-entry-browser.mjs",
@@ -254,31 +286,36 @@
     "test:data-grid-datasets-browser": "node test/data-grid-datasets-browser.mjs",
     "test:data-import-dataset-browser": "node test/data-import-dataset-browser.mjs",
     "test:slides-browser": "node test/slides-browser.mjs",
+    "test:slide-navigator-browser": "node test/slide-navigator-browser.mjs",
     "test:persistence-browser": "node test/persistence-browser.mjs",
     "test:find-browser": "node test/find-replace-browser.mjs",
     "test:crop-browser": "node test/image-crop-browser.mjs",
     "test:mobile-browser": "node test/mobile-browser.mjs",
     "test:review-panel-browser": "node test/review-panel-browser.mjs",
     "test:review-hook-browser": "node test/review-hook-browser.mjs",
+    "test:source-pane-browser": "node test/source-pane-browser.mjs",
     "test:export-license-browser": "node test/export-license-browser.mjs",
     "test:chart-options-browser": "node test/chart-options-browser.mjs",
-    "test:numbering-panel-browser": "node test/numbering-panel-browser.mjs"
+    "test:numbering-panel-browser": "node test/numbering-panel-browser.mjs",
+    "test:export-menu-browser": "node test/export-menu-browser.mjs",
+    "test:agent-handoff-browser": "node test/agent-handoff-browser.mjs"
   },
   "dependencies": {
     "@codemirror/autocomplete": "6.20.3",
     "@codemirror/commands": "6.11.1",
     "@codemirror/lang-json": "6.0.2",
+    "@codemirror/lang-yaml": "6.1.3",
     "@codemirror/language": "6.13.1",
     "@codemirror/lint": "6.9.7",
     "@codemirror/search": "6.7.2",
     "@codemirror/state": "6.7.6",
     "@codemirror/view": "6.43.14",
     "@lezer/highlight": "1.2.5",
-    "@openpresentation/opf": "^0.24.0",
+    "@openpresentation/opf": "^0.24.2",
     "jsonc-parser": "3.3.1"
   },
   "peerDependencies": {
-    "@openpresentation/opf-render": "^0.24.1"
+    "@openpresentation/opf-render": "^0.24.3"
   },
   "peerDependenciesMeta": {
     "@openpresentation/opf-render": {
@@ -331,8 +368,8 @@
     "@expo-google-fonts/roboto-mono": "0.4.2",
     "@expo-google-fonts/stix-two-math": "0.4.0",
     "@expo-google-fonts/tinos": "0.4.2",
-    "@openpresentation/opf-pptx": "^0.24.0",
-    "@openpresentation/opf-render": "^0.24.1",
+    "@openpresentation/opf-pptx": "^0.24.1",
+    "@openpresentation/opf-render": "^0.24.3",
     "@resvg/resvg-js": "2.6.2",
     "axe-core": "4.14.0",
     "esbuild": "0.28.2",