@openpresentation/opf-editor 0.26.10 → 0.28.0

package/dist/studio-kit/viewport.js

@@ -0,0 +1,153 @@
+// CE-18, the studio kit: the viewport around a studio's frame. Zoom in steps (buttons, keys, Ctrl or Cmd with the wheel), smooth zoom (a
+// trackpad pinch, two-finger touch), fit, and pan (the hand tool, a held Space, two fingers), plus the mapping from screen points to the
+// frame's unit square. The zoom is a factor of the fitted size, written to a CSS variable on the root; the stylesheet sizes the stage from it.
+
+/** The zoom steps of the Studio (STUDIO-SPEC 4.2), as factors of the fitted size. */
+export const ZOOM_STEPS = Object.freeze([0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]);
+
+/** `value` kept between the first and the last step. */
+export const clampZoom = (value, steps = ZOOM_STEPS) => Math.max(steps[0], Math.min(steps[steps.length - 1], value));
+
+/** The next step up (`direction` 1) or down (-1) from `zoom`; a zoom between two steps goes to the nearer one in that direction. */
+export function stepZoom(zoom, direction, steps = ZOOM_STEPS) {
+  const at = steps.findIndex((value) => value >= zoom - 1e-9);
+  const index = direction > 0 ? (steps[at] > zoom + 1e-9 ? at : at + 1) : at - 1;
+  return steps[Math.max(0, Math.min(steps.length - 1, index))];
+}
+
+/** A client point as a fraction of `rect` (a DOMRect): `{ x, y }`, 0 to 1 inside it. */
+export const toUnit = (point, rect) => ({ x: (point.clientX - rect.left) / (rect.width || 1), y: (point.clientY - rect.top) / (rect.height || 1) });
+
+/**
+ * The scroll position that keeps the content point under `anchor` (client coordinates, relative to the viewport's box) in place when the
+ * zoom changes from `from` to `to`: `{ left, top }`.
+ */
+export function scrollForZoom({ left, top }, anchor, from, to) {
+  const ratio = to / (from || 1);
+  return { left: (left + anchor.x) * ratio - anchor.x, top: (top + anchor.y) * ratio - anchor.y };
+}
+
+/**
+ * Attach zoom and pan to `viewport` (the scrolling element). Options:
+ * - `root`: where the zoom variable and the `data-zoomed`, `data-panning` and `data-space` states go (default the viewport);
+ * - `zoomVar`: the CSS variable (default `--opf-kit-zoom`); `steps` (default `ZOOM_STEPS`); `zoom` (the first zoom, default 1);
+ * - `panEnabled()`: whether a drag pans now (the hand tool); a held Space pans as well (`holdSpace`);
+ * - `wheel`: "step" (Ctrl or Cmd with the wheel steps the zoom, the default), "smooth" (it zooms continuously around the pointer) or false;
+ * - `pinch`: two touch pointers zoom around their midpoint and pan (default false);
+ * - `fitZoom(mode)`: the zoom of `fit(mode)` ("slide" or "width"), default 1 (the zoom is a factor of the fitted size);
+ * - `onZoom(zoom)`: after each change.
+ * Returns `{ zoom, panMode, setZoom, step, fit, holdSpace, toUnit, destroy }`.
+ */
+export function createViewport(viewport, options = {}) {
+  const root = options.root ?? viewport;
+  const steps = options.steps ?? ZOOM_STEPS;
+  const zoomVar = options.zoomVar ?? "--opf-kit-zoom";
+  const wheelMode = options.wheel === undefined ? "step" : options.wheel;
+  let zoom = 1;
+  let spaceHeld = false;
+  let pan = null;
+  const touches = new Map();
+  let pinch = null;
+  const panMode = () => Boolean(options.panEnabled?.()) || spaceHeld;
+
+  function setZoom(value, { anchor } = {}) {
+    const next = clampZoom(value, steps);
+    const before = zoom;
+    zoom = next;
+    root.style.setProperty(zoomVar, String(zoom));
+    root.dataset.zoomed = String(zoom !== 1);
+    if (anchor && before !== next) {
+      const box = viewport.getBoundingClientRect();
+      const scroll = scrollForZoom({ left: viewport.scrollLeft, top: viewport.scrollTop }, { x: anchor.clientX - box.left, y: anchor.clientY - box.top }, before, next);
+      viewport.scrollLeft = scroll.left;
+      viewport.scrollTop = scroll.top;
+    }
+    options.onZoom?.(zoom);
+    return zoom;
+  }
+  const step = (direction, opts) => setZoom(stepZoom(zoom, direction, steps), opts);
+  const fit = (mode = "slide") => setZoom(options.fitZoom ? options.fitZoom(mode) : 1);
+
+  // Pan: a drag with the hand tool or Space; the capture phase keeps the drag from reaching the frame below.
+  const onDown = (event) => {
+    if (options.pinch && event.pointerType === "touch") {
+      touches.set(event.pointerId, { x: event.clientX, y: event.clientY });
+      if (touches.size === 2) { startPinch(); event.preventDefault(); event.stopPropagation(); return; }
+    }
+    if (!panMode() || (event.pointerType === "mouse" && event.button !== 0)) return;
+    event.preventDefault();
+    event.stopPropagation();
+    pan = { x: event.clientX, y: event.clientY, left: viewport.scrollLeft, top: viewport.scrollTop };
+    root.dataset.panning = "true";
+    viewport.setPointerCapture?.(event.pointerId);
+  };
+  const onMove = (event) => {
+    if (touches.has(event.pointerId)) {
+      touches.set(event.pointerId, { x: event.clientX, y: event.clientY });
+      if (pinch) { movePinch(); return; }
+    }
+    if (!pan) return;
+    viewport.scrollLeft = pan.left - (event.clientX - pan.x);
+    viewport.scrollTop = pan.top - (event.clientY - pan.y);
+  };
+  const endPan = (event) => {
+    if (event && touches.delete(event.pointerId) && pinch && touches.size < 2) { pinch = null; delete root.dataset.panning; }
+    pan = null;
+    delete root.dataset.panning;
+  };
+
+  // Two fingers: the distance between them scales the zoom from where it was, and the content point first under their midpoint stays
+  // under it (so moving both fingers pans).
+  const pair = () => { const [a, b] = [...touches.values()]; return { distance: Math.hypot(b.x - a.x, b.y - a.y) || 1, mid: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 } }; };
+  function startPinch() {
+    pan = null;
+    const { distance, mid } = pair();
+    const box = viewport.getBoundingClientRect();
+    pinch = { distance, zoom, point: { x: (viewport.scrollLeft + mid.x - box.left) / zoom, y: (viewport.scrollTop + mid.y - box.top) / zoom } };
+    root.dataset.panning = "true";
+  }
+  function movePinch() {
+    const { distance, mid } = pair();
+    const next = setZoom(pinch.zoom * (distance / pinch.distance));
+    const box = viewport.getBoundingClientRect();
+    viewport.scrollLeft = pinch.point.x * next - (mid.x - box.left);
+    viewport.scrollTop = pinch.point.y * next - (mid.y - box.top);
+  }
+
+  const onWheel = (event) => {
+    if (!wheelMode || !(event.ctrlKey || event.metaKey)) return;
+    event.preventDefault();
+    if (wheelMode === "smooth") setZoom(zoom * Math.exp(-event.deltaY * 0.01), { anchor: event });
+    else step(event.deltaY < 0 ? 1 : -1);
+  };
+
+  viewport.addEventListener("pointerdown", onDown, true);
+  viewport.addEventListener("pointermove", onMove);
+  viewport.addEventListener("pointerup", endPan);
+  viewport.addEventListener("pointercancel", endPan);
+  viewport.addEventListener("wheel", onWheel, { passive: false });
+  setZoom(options.zoom ?? 1);
+
+  return {
+    get zoom() { return zoom; },
+    get panMode() { return panMode(); },
+    get panning() { return pan !== null || pinch !== null; },
+    setZoom,
+    step,
+    fit,
+    /** Space held (true) or released (false): a drag pans while it is held. */
+    holdSpace(on) {
+      spaceHeld = Boolean(on);
+      if (spaceHeld) root.dataset.space = "true"; else delete root.dataset.space;
+    },
+    /** A pointer event's position as a fraction of `element`'s box. */
+    toUnit: (event, element) => toUnit(event, element.getBoundingClientRect()),
+    destroy() {
+      viewport.removeEventListener("pointerdown", onDown, true);
+      viewport.removeEventListener("pointermove", onMove);
+      viewport.removeEventListener("pointerup", endPan);
+      viewport.removeEventListener("pointercancel", endPan);
+      viewport.removeEventListener("wheel", onWheel);
+    },
+  };
+}

package/dist/styles.css

@@ -1,7 +1,8 @@
 /*
  * OPF editor UI tokens (RR-98). Every other file in this stylesheet uses only these `--opf-ui-*` variables.
  * Values copy the openpresentation.org design system. The host loads Inter and Geist Mono; nothing here fetches a font.
- * Light is the default. Dark applies under `.dark .opf-ui`, `.opf-ui.dark`, `[data-theme=dark]` (on the root or on any ancestor) and `:root.dark`.
+ * Light is the default. Dark applies under `.dark .opf-ui`, `.opf-ui.dark`, `[data-theme=dark]` (on the root or on any ancestor) and `:root.dark`;
+ * `[data-theme=light]` on an ancestor or on the surface forces light inside a dark page. docs/theming.md is the contract for hosts.
  */
 :root,
 .opf-ui {
@@ -18,7 +19,7 @@
   --opf-ui-border-strong: hsl(214 22% 72%);
   --opf-ui-ring: hsl(214 57% 28%);
   --opf-ui-danger: hsl(0 72% 45%);
-  --opf-ui-warn: hsl(28 75% 38%);
+  --opf-ui-warn: hsl(28 75% 30%);
   --opf-ui-success: hsl(152 76% 26%);
   --opf-ui-code-bg: hsl(220 30% 96%);
   --opf-ui-code-border: hsl(214 18% 84%);
@@ -66,6 +67,39 @@
   color-scheme: dark;
 }
 
+/*
+ * A surface that forces light (`data-theme="light"` on the editor root, the `colorScheme: "light"` theme option) wins over a dark page.
+ * The values repeat the light block above; test/styles.mjs keeps the two equal.
+ */
+[data-theme="light"].opf-ui,
+[data-theme="light"] .opf-ui,
+.dark [data-theme="light"].opf-ui,
+.dark [data-theme="light"] .opf-ui,
+[data-theme="dark"] [data-theme="light"].opf-ui,
+[data-theme="dark"] [data-theme="light"] .opf-ui {
+  --opf-ui-bg: hsl(210 30% 98%);
+  --opf-ui-surface: hsl(0 0% 100%);
+  --opf-ui-muted: hsl(214 28% 93%);
+  --opf-ui-muted-2: hsl(214 28% 96%);
+  --opf-ui-fg: hsl(220 28% 11%);
+  --opf-ui-muted-fg: hsl(218 14% 38%);
+  --opf-ui-accent: hsl(214 57% 28%);
+  --opf-ui-accent-fg: hsl(0 0% 100%);
+  --opf-ui-accent-strong: hsl(214 57% 28%);
+  --opf-ui-border: hsl(214 22% 83%);
+  --opf-ui-border-strong: hsl(214 22% 72%);
+  --opf-ui-ring: hsl(214 57% 28%);
+  --opf-ui-danger: hsl(0 72% 45%);
+  --opf-ui-warn: hsl(28 75% 30%);
+  --opf-ui-success: hsl(152 76% 26%);
+  --opf-ui-code-bg: hsl(220 30% 96%);
+  --opf-ui-code-border: hsl(214 18% 84%);
+
+  --opf-ui-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.1);
+
+  color-scheme: light;
+}
+
 /* Touch density: controls grow to 40px, as in the mobile design. */
 .opf-ui[data-density="touch"],
 [data-density="touch"] .opf-ui {
@@ -3639,9 +3673,21 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   background: color-mix(in srgb, var(--opf-ui-accent) 8%, transparent);
 }
 
-:is(.opf-ui, .opf-json, .opf-code) .cm-selectionBackground,
-:is(.opf-ui, .opf-json, .opf-code) .cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground {
-  background: color-mix(in srgb, var(--opf-ui-accent) 20%, transparent);
+/* The selection is a layer behind the text, so the text keeps its own colors: the tint is light enough that every token color (test/selection-contrast-browser.mjs
+   measures each) keeps 4.5:1 against it, focused or not, in the light and the dark scheme. The focused rule of CodeMirror's base theme
+   (`&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground`, `#d7d4f0` for light and `#233` for dark) has five classes, so
+   the second selector has six and wins whichever stylesheet loads last; src/source-color-scheme.js flags the view dark so the rest of the base theme follows. */
+:is(.opf-ui, .opf-json, .opf-code) .cm-editor .cm-selectionLayer .cm-selectionBackground,
+:is(.opf-ui, .opf-json, .opf-code) .cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground {
+  background: color-mix(in srgb, var(--opf-ui-accent) 16%, transparent);
+}
+
+/* A selection that is not drawn by CodeMirror (the handoff prompt, the data grid's text areas, the numbering preview) uses the browser's own, and a browser's
+   default highlight is not made for our surfaces: the same tint, with the text color the surface already has, is 4.5:1 or better in both schemes. */
+:is(.opf-json, .opf-code, .opf-source-code, .opf-handoff-box, .opf-numbering-preview) ::selection,
+:is(.opf-handoff-prompt, .opf-numbering-preview, .opf-grid details textarea)::selection {
+  background: color-mix(in srgb, var(--opf-ui-accent) 16%, transparent);
+  color: var(--opf-ui-fg);
 }
 
 :is(.opf-ui, .opf-json, .opf-code) .cm-selectionMatch {
@@ -4484,8 +4530,7 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 .opf-source-code .cm-gutters { border: 0; background: transparent; color: color-mix(in srgb, var(--opf-ui-muted-fg) 60%, transparent); }
 .opf-source-code .cm-lineNumbers .cm-gutterElement { min-width: 30px; padding: 0 12px 0 0; text-align: right; font-size: 11px; }
 .opf-source-code .cm-activeLine { background: transparent; }
-.opf-source-code .cm-selectionBackground,
-.opf-source-code .cm-focused .cm-selectionBackground { background: color-mix(in srgb, var(--opf-ui-accent) 16%, transparent); }
+/* The selection color is the shared one in panels.css (JSON editor section). */
 .opf-source-code .cm-cursor { border-left-color: var(--opf-ui-fg); }
 .opf-source-code .tok-key { color: var(--opf-ui-accent-strong); }
 .opf-source-code .tok-str { color: var(--opf-ui-fg); }
@@ -4498,6 +4543,16 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 .opf-source-code .tok-comment { font-style: italic; }
 .opf-source-code .code-key.is-active { background: color-mix(in srgb, var(--opf-ui-accent) 10%, transparent); border-radius: var(--opf-ui-radius-sm); }
 .opf-source-code .cm-line.is-hover { background: color-mix(in srgb, var(--opf-ui-accent) 6%, transparent); }
+/* CE-17: decorations a host draws (setDecorations) and the flash of revealPath; the host styles any other kind as .opf-source-decoration-<kind>. */
+.opf-source-code .opf-source-decoration { background: color-mix(in srgb, var(--opf-ui-accent) 16%, transparent); border-radius: var(--opf-ui-radius-sm); }
+.opf-source-code .opf-source-decoration-error { background: color-mix(in srgb, var(--opf-ui-danger) 18%, transparent); }
+.opf-source-code .opf-source-decoration-warning { background: color-mix(in srgb, var(--opf-ui-warn) 20%, transparent); }
+.opf-source-code .opf-source-decoration-info { background: color-mix(in srgb, var(--opf-ui-accent) 10%, transparent); }
+.opf-source-code .opf-source-decoration-added { background: color-mix(in srgb, var(--opf-ui-success) 20%, transparent); }
+.opf-source-code .opf-source-decoration-changed { background: color-mix(in srgb, var(--opf-ui-warn) 14%, transparent); }
+.opf-source-code .cm-line.opf-source-flash { animation: opf-source-flash 1.2s ease-out; }
+@keyframes opf-source-flash { from { background: color-mix(in srgb, var(--opf-ui-accent) 32%, transparent); } to { background: transparent; } }
+@media (prefers-reduced-motion: reduce) { .opf-source-code .cm-line.opf-source-flash { animation: none; background: color-mix(in srgb, var(--opf-ui-accent) 20%, transparent); } }
 .opf-source-code .cm-panels { background: var(--opf-ui-surface); color: var(--opf-ui-fg); border-color: var(--opf-ui-border); }
 .opf-source-code .cm-tooltip { background: var(--opf-ui-surface); border: 1px solid var(--opf-ui-border); border-radius: var(--opf-ui-radius); color: var(--opf-ui-fg); }
 .opf-source-code .cm-lintRange-error { background-image: none; text-decoration: underline wavy var(--opf-ui-danger); }
@@ -5044,3 +5099,266 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
     min-height: 44px;
   }
 }
+
+/* workspace.css */
+/* The embeddable editor (CE-06): the default arrangement `createOpfEditor` builds for `layout: "full" | "canvas" | "source"`.
+   Uses only --opf-ui-* tokens. A host that passes its own `slots` ignores all of this except the `data-` attributes. */
+.opf-workspace {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  background: var(--opf-ui-bg);
+  color: var(--opf-ui-fg);
+  font-family: var(--opf-ui-font);
+}
+/* A host that arranges the page itself gets no box from the editor. */
+.opf-workspace[data-opf-layout="slots"] {
+  display: contents;
+}
+.opf-ws-bar {
+  display: flex;
+  flex: none;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--opf-ui-border);
+  background: var(--opf-ui-surface);
+}
+.opf-ws-group,
+.opf-ws-views {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.opf-ws-spacer {
+  flex: 1 1 0;
+}
+.opf-ws-button {
+  box-sizing: border-box;
+  min-height: var(--opf-ui-control-h);
+  padding: 0 12px;
+  border: 1px solid var(--opf-ui-border);
+  border-radius: var(--opf-ui-radius);
+  background: var(--opf-ui-surface);
+  color: var(--opf-ui-fg);
+  font: 500 13px/1 var(--opf-ui-font);
+  cursor: pointer;
+  transition: color var(--opf-ui-ease), background-color var(--opf-ui-ease), border-color var(--opf-ui-ease);
+}
+.opf-ws-button:hover:not(:disabled) {
+  background: var(--opf-ui-muted);
+}
+.opf-ws-button:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.opf-ws-button[aria-pressed="true"],
+.opf-ws-button[aria-expanded="true"] {
+  border-color: var(--opf-ui-accent);
+  background: var(--opf-ui-muted);
+  color: var(--opf-ui-accent-strong);
+}
+.opf-ws-autosave {
+  max-width: 240px;
+  color: var(--opf-ui-muted-fg);
+  font-size: 12px;
+  line-height: 1.3;
+}
+.opf-ws-banner {
+  flex: none;
+}
+.opf-ws-banner[hidden] {
+  display: none;
+}
+.opf-ws-body {
+  display: flex;
+  flex: 1 1 0;
+  min-height: 0;
+}
+.opf-ws-source {
+  display: flex;
+  flex: 0 1 42%;
+  min-width: 280px;
+  min-height: 0;
+  border-right: 1px solid var(--opf-ui-border);
+  background: var(--opf-ui-surface);
+}
+.opf-ws-source-host {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+.opf-ws-main {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+.opf-ws-find {
+  flex: none;
+  padding: 8px 12px 0;
+}
+.opf-ws-find[hidden] {
+  display: none;
+}
+.opf-ws-stage {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  min-height: 0;
+  padding: 12px;
+  overflow: auto;
+}
+.opf-ws-frame {
+  display: grid;
+  flex: 1 1 0;
+  place-items: center;
+  min-height: 0;
+}
+.opf-ws-frame[hidden],
+.opf-ws-view[hidden] {
+  display: none;
+}
+.opf-ws-canvas {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--opf-ui-border);
+  border-radius: var(--opf-ui-radius-sm);
+  background: var(--opf-ui-surface);
+}
+.opf-ws-view {
+  flex: 1 1 0;
+  min-height: 0;
+  overflow: auto;
+}
+.opf-ws-dock {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 0 12px 8px;
+}
+.opf-ws-status {
+  flex: none;
+  margin: 0;
+  padding: 4px 12px 8px;
+  color: var(--opf-ui-muted-fg);
+  font-size: 12px;
+}
+.opf-ws-side {
+  display: flex;
+  flex: 0 0 300px;
+  flex-direction: column;
+  min-height: 0;
+  border-left: 1px solid var(--opf-ui-border);
+  background: var(--opf-ui-surface);
+  overflow: auto;
+}
+.opf-ws-tabs {
+  display: flex;
+  gap: 2px;
+  padding: 6px 8px 0;
+  border-bottom: 1px solid var(--opf-ui-border);
+}
+.opf-ws-tab {
+  min-height: var(--opf-ui-control-h);
+  padding: 0 12px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--opf-ui-muted-fg);
+  font: 500 13px/1 var(--opf-ui-font);
+  cursor: pointer;
+}
+.opf-ws-tab[aria-selected="true"] {
+  border-bottom-color: var(--opf-ui-accent);
+  color: var(--opf-ui-fg);
+}
+.opf-ws-panel {
+  padding: 12px;
+}
+.opf-ws-panel[hidden] {
+  display: none;
+}
+/* Layout Studio inside the workspace. */
+.opf-ws-layouts {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.opf-ws-layouts-bar {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+.opf-ws-layouts-bar select,
+.opf-ws-layouts-bar button {
+  min-height: var(--opf-ui-control-h);
+  border: 1px solid var(--opf-ui-border);
+  border-radius: var(--opf-ui-radius);
+  background: var(--opf-ui-surface);
+  color: var(--opf-ui-fg);
+  font: 500 13px/1 var(--opf-ui-font);
+}
+.opf-ws-layouts-bar button {
+  padding: 0 12px;
+  cursor: pointer;
+}
+.opf-ws-layouts-bar button:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.opf-ws-layouts-pick {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--opf-ui-muted-fg);
+  font-size: 12px;
+}
+.opf-ws-layouts-status {
+  color: var(--opf-ui-muted-fg);
+  font-size: 12px;
+}
+.opf-ws-layouts-host {
+  flex: 1 1 0;
+  min-height: 0;
+}
+/* A phone: the parts stack, the source above the slide, the side panel below. */
+@media (max-width: 760px) {
+  .opf-ws-body {
+    flex-direction: column;
+    overflow: auto;
+  }
+  .opf-ws-source {
+    flex: none;
+    min-width: 0;
+    height: 40vh;
+    border-right: 0;
+    border-bottom: 1px solid var(--opf-ui-border);
+  }
+  .opf-ws-main {
+    flex: none;
+  }
+  .opf-ws-stage {
+    flex: none;
+    min-height: 40vh;
+  }
+  .opf-ws-side {
+    flex: none;
+    border-left: 0;
+    border-top: 1px solid var(--opf-ui-border);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .opf-ws-button {
+    transition: none;
+  }
+}

package/dist/workspace-layouts.d.ts

@@ -0,0 +1,31 @@
+import type { EditorSession } from "./index.js";
+import type { LayoutEditor, LayoutEditorDensity } from "./layout-editor.js";
+
+export interface LayoutStudioOptions {
+  session: EditorSession;
+  toSvg?: (...args: any[]) => string;
+  fonts?: unknown;
+  renderOptions?: Record<string, unknown> | (() => Record<string, unknown>);
+  getSlideIndex: () => number;
+  onStatus?: (message: string) => void;
+  density?: LayoutEditorDensity;
+  readOnly?: boolean;
+  labels?: Partial<Record<"layout" | "pick" | "fresh" | "save" | "apply", string>>;
+}
+/** Layout Studio inside the workspace: the layout editor over the deck's own custom layouts, with a bar to pick, save and apply. */
+export interface LayoutStudio {
+  element: HTMLElement;
+  editor: LayoutEditor;
+  pick: HTMLSelectElement;
+  save: HTMLButtonElement;
+  apply: HTMLButtonElement;
+  status: HTMLElement;
+  /** Re-read the deck's custom layouts into the picker. */
+  refresh(): void;
+  /** Edit the deck's layout `id`, or a new layout for `""`. */
+  load(id: string): void;
+  setReadOnly(readOnly: boolean): void;
+  setDensity(density: LayoutEditorDensity): void;
+  destroy(): void;
+}
+export declare function createLayoutStudio(container: HTMLElement, options: LayoutStudioOptions): LayoutStudio;

package/dist/workspace-layouts.js

@@ -0,0 +1,84 @@
+// CE-06 (promoted from examples/playground.js): Layout Studio inside the workspace. The layout editor (palette, canvas, layers, inspector)
+// works on one layout record at a time; "Save to deck" writes it to `catalogs.custom.layouts` (one undoable edit) and "Use on this slide"
+// also makes it the layout of the current slide. A bar above the editor picks which of the deck's own layouts to edit.
+import { blankLayoutRecord, createLayoutEditor } from "./layout-editor.js";
+
+const make = (doc, tag, attributes = {}, ...children) => {
+  const node = doc.createElement(tag);
+  for (const [name, value] of Object.entries(attributes)) {
+    if (name === "text") node.textContent = value;
+    else node.setAttribute(name, value);
+  }
+  node.append(...children);
+  return node;
+};
+
+/**
+ * Mount Layout Studio in `container`. Returns `{ element, refresh, destroy, load }`. `refresh()` re-reads the deck's layouts into the picker (call it
+ * when the view opens); `load(id)` edits the deck's layout `id`, or a new layout for `""`.
+ */
+export function createLayoutStudio(container, { session, toSvg, fonts, renderOptions, getSlideIndex, onStatus, density = "comfortable", readOnly = false, labels = {} }) {
+  const doc = container.ownerDocument;
+  const text = { layout: "Layout", pick: "Layout to edit", fresh: "New layout", save: "Save to deck", apply: "Use on this slide", ...labels };
+  const pick = make(doc, "select", { "data-opf-layouts": "pick", "aria-label": text.pick }, make(doc, "option", { value: "", text: text.fresh }));
+  const save = make(doc, "button", { type: "button", "data-opf-layouts": "save", text: text.save });
+  const apply = make(doc, "button", { type: "button", "data-opf-layouts": "apply", text: text.apply });
+  const status = make(doc, "span", { "data-opf-layouts": "status", role: "status", class: "opf-ws-layouts-status" });
+  const bar = make(doc, "div", { class: "opf-ws-layouts-bar" }, make(doc, "label", { class: "opf-ws-layouts-pick", text: `${text.layout} ` }, pick), save, apply, status);
+  const host = make(doc, "div", { class: "opf-ws-layouts-host" });
+  container.replaceChildren(bar, host);
+  save.disabled = apply.disabled = readOnly;
+
+  const customLayouts = () => session.presentation.catalogs?.custom?.layouts ?? {};
+  function freeLayoutId() {
+    const taken = customLayouts();
+    if (!taken["my-layout"]) return "my-layout";
+    for (let n = 2; ; n++) if (!taken[`my-layout-${n}`]) return `my-layout-${n}`;
+  }
+  const say = (message) => { status.textContent = message; };
+  function refresh() {
+    const current = pick.value;
+    const layouts = customLayouts();
+    pick.replaceChildren(new Option(text.fresh, ""), ...Object.entries(layouts).map(([id, record]) => new Option(`${record.name || id} (${id})`, id)));
+    pick.value = current in layouts ? current : "";
+  }
+  const editor = createLayoutEditor(host, { record: { ...blankLayoutRecord(), id: freeLayoutId() }, toSvg, fonts, renderOptions, density, readOnly });
+  function load(id) {
+    const layouts = customLayouts();
+    editor.setRecord(id ? { id, ...structuredClone(layouts[id]) } : { ...blankLayoutRecord(), id: freeLayoutId() });
+    say(id ? `Editing ${id}. Save to deck replaces it.` : "A new layout. Save to deck adds it to this presentation.");
+  }
+  const problem = (error) => error.issues?.[0]?.message ?? error.message;
+  pick.onchange = () => load(pick.value);
+  save.onclick = () => {
+    const replace = pick.value === editor.getRecord().id;
+    try {
+      const change = editor.saveToDeck(session, { replace });
+      refresh();
+      pick.value = change.layoutId;
+      say(`Saved ${change.layoutId} in custom layouts`);
+      onStatus?.(`Saved ${change.layoutId} in custom layouts`);
+    } catch (error) { say(problem(error)); }
+  };
+  apply.onclick = () => {
+    try {
+      const slideIndex = getSlideIndex();
+      const change = editor.applyToSlide(session, slideIndex);
+      refresh();
+      pick.value = change.layoutId;
+      say(`Slide ${slideIndex + 1} now uses ${change.layoutId}`);
+    } catch (error) { say(problem(error)); }
+  };
+  refresh();
+  load("");
+  return {
+    element: bar.parentElement,
+    editor,
+    pick, save, apply, status,
+    refresh,
+    load,
+    setReadOnly(on) { editor.setReadOnly(on); save.disabled = apply.disabled = on; },
+    setDensity(next) { editor.setDensity(next); },
+    destroy() { editor.destroy(); container.replaceChildren(); },
+  };
+}

package/dist/workspace-measure.js

@@ -0,0 +1,35 @@
+// CE-06 (promoted from examples/playground.js): text measurement and font notes shared by the workspace parts.
+import { createScriptTextMeasurement } from "@openpresentation/opf-render/fonts";
+import { resolveScriptFonts } from "@openpresentation/opf/composition";
+
+/**
+ * The layout options for composing slide `index` of `deck`: the fonts handle's measurement, made script-aware for this document (Japanese
+ * under Aptos measures with Noto Sans JP, where the plain strict measurement would throw "cannot display U+65E5" with every face loaded).
+ * A fonts handle without a measurement is passed through.
+ */
+export function layoutOptionsFor(fonts, deck, index, catalogs) {
+  if (!fonts?.textMeasurement) return fonts ? { fonts } : {};
+  try {
+    return { fonts: { textMeasurement: createScriptTextMeasurement(fonts.textMeasurement, resolveScriptFonts(deck, { slideIndex: index, catalogs })) } };
+  } catch {
+    return { fonts };
+  }
+}
+
+/** Review text for one font resolution the registry recorded. A change inside one family is a style fallback, not a replacement font. */
+export function describeFontChange(change) {
+  const sameFamily = (change.sourceFamily ?? change.requestedFamily).toLowerCase() === change.resolvedFamily.toLowerCase();
+  if (!sameFamily) return `${change.requestedFamily} → ${change.resolvedFamily} · ${change.compatibility === "metric" ? "Metric substitute" : "Approximate substitute; wrapping may change"} (${change.resolvedWeight}).`;
+  const drawn = `${change.resolvedFamily} ${change.resolvedWeight}${change.italic ? " italic" : ""}`;
+  return change.requestedWeight === change.resolvedWeight
+    ? `${change.requestedFamily}: the ${change.italic ? "italic" : "upright"} face asked for is not available, so ${drawn} is drawn; wrapping may change.`
+    : `${change.requestedFamily} ${change.requestedWeight}: that weight is not available, so ${drawn} is drawn; wrapping may change.`;
+}
+
+/** Notes (`{ path, message }`) for the font substitutions a fonts handle recorded, one per requested face. */
+export function fontSubstitutionNotes(fonts) {
+  const changes = fonts?.substitutions ?? [];
+  return changes
+    .filter((change, index, all) => all.findIndex((other) => other.requestedFamily === change.requestedFamily && other.requestedWeight === change.requestedWeight && other.italic === change.italic) === index)
+    .map((change) => ({ path: change.path ?? "design.fontScheme", message: describeFontChange(change) }));
+}