@openpresentation/opf-editor 0.30.0 → 0.31.0

package/dist/element.d.ts

@@ -38,7 +38,7 @@ export interface OpfEditorElementDefaults {
 /**
  * `<opf-editor>`: the editor in one tag. The editor mounts in a `div` inside the element (light DOM), once the element is connected and the
  * page has parsed its content, and is destroyed one microtask after the element leaves the document (unless it came back: a move in the DOM
- * keeps the editor). Attributes `layout`, `toolbar`, `readonly`, `theme`, `density`, `slide` and `src` are observed; see docs/web-component.md.
+ * keeps the editor). Attributes `layout`, `toolbar`, `readonly`, `theme`, `density`, `slide`, `src` and `fonts` are observed; see docs/web-component.md.
  */
 export interface OpfEditorElement extends HTMLElement {
   /** The editor handle once it is created, else `null` (before mount, after removal, or when it could not be created). */
@@ -53,7 +53,10 @@ export interface OpfEditorElement extends HTMLElement {
   document: unknown;
   /** More `createOpfEditor` options. Read when the editor mounts; setting a different object on a mounted element remounts it, keeping the document. */
   options: Partial<OpfEditorOptions>;
-  /** A fonts handle (or what `OpfEditorFontsOption` allows), or the URL of a font root; the `fonts` attribute is a font root. Default: `defineOpfEditorElement`'s. */
+  /**
+   * A fonts handle (or what `OpfEditorFontsOption` allows), or the URL of a font root. Default: `defineOpfEditorElement`'s, then `options.fonts`, then
+   * the `fonts` attribute (a font root; observed: changing it remounts the editor). Setting a different value on a mounted element remounts it.
+   */
   fonts: OpfEditorFontsOption | string | undefined;
   catalogs: readonly Catalog[] | undefined;
   /** The attributes as properties. `readOnly` is the `readonly` attribute. */

package/dist/styles.css

@@ -7531,6 +7531,11 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   gap: 4px;
   padding: 0 12px 8px;
 }
+/* CE-30: the slide row is no wider than the editor; the thumbnail strip scrolls inside it (a narrow box, a phone). */
+.opf-ws-dock > .opf-ws-navigator,
+.opf-ws-dock > .opf-ws-thumbnails {
+  max-width: 100%;
+}
 .opf-ws-status {
   flex: none;
   margin: 0;
@@ -7618,27 +7623,29 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   flex: 1 1 0;
   min-height: 0;
 }
-/* A phone: the parts stack, the source above the slide, the side panel below. */
+/* A phone: the parts stack, the source above the slide, the side panel below. CE-30: only in the layouts that have several parts to stack;
+   `embed`, `viewer` and `canvas` are the slide alone and fit it to their box at any width (a stage of 40vh made a short embed overflow).
+   `:where()` keeps the specificity of the plain class. */
 @media (max-width: 760px) {
-  .opf-ws-body {
+  :where(.opf-workspace:not([data-opf-layout="embed"], [data-opf-layout="viewer"], [data-opf-layout="canvas"])) .opf-ws-body {
     flex-direction: column;
     overflow: auto;
   }
-  .opf-ws-source {
+  :where(.opf-workspace:not([data-opf-layout="embed"], [data-opf-layout="viewer"], [data-opf-layout="canvas"])) .opf-ws-source {
     flex: none;
     min-width: 0;
     height: 40vh;
     border-right: 0;
     border-bottom: 1px solid var(--opf-ui-border);
   }
-  .opf-ws-main {
+  :where(.opf-workspace:not([data-opf-layout="embed"], [data-opf-layout="viewer"], [data-opf-layout="canvas"])) .opf-ws-main {
     flex: none;
   }
-  .opf-ws-stage {
+  :where(.opf-workspace:not([data-opf-layout="embed"], [data-opf-layout="viewer"], [data-opf-layout="canvas"])) .opf-ws-stage {
     flex: none;
     min-height: 40vh;
   }
-  .opf-ws-side {
+  :where(.opf-workspace:not([data-opf-layout="embed"], [data-opf-layout="viewer"], [data-opf-layout="canvas"])) .opf-ws-side {
     flex: none;
     border-left: 0;
     border-top: 1px solid var(--opf-ui-border);

package/dist/styles.layered.css

@@ -4038,38 +4038,17 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 /* ---------------------------------------------------------------- JSON editor (CodeMirror, opf-json / opf-code) */
 /* The editor ships no CSS of its own. Put it in an `.opf-ui`, `.opf-json` or `.opf-code` element (or the component that holds it) to get this look. */
 
-:is(.opf-ui, .opf-json, .opf-code) .cm-editor {
-  font: 12.5px/1.65 var(--opf-ui-mono);
-  color: var(--opf-ui-fg);
-  background: var(--opf-ui-code-bg);
-  border: 1px solid var(--opf-ui-code-border);
-  border-radius: var(--opf-ui-radius-md);
-}
 
-:is(.opf-ui, .opf-json, .opf-code) .cm-editor.cm-focused {
-  outline: 2px solid var(--opf-ui-ring);
-  outline-offset: 2px;
-}
 
-:is(.opf-ui, .opf-json, .opf-code) .cm-scroller,
-:is(.opf-ui, .opf-json, .opf-code) .cm-content {
-  font-family: var(--opf-ui-mono);
-}
 
-:is(.opf-ui, .opf-json, .opf-code) .cm-content {
-  caret-color: var(--opf-ui-fg);
-}
 
-:is(.opf-ui, .opf-json, .opf-code) .cm-cursor,
-:is(.opf-ui, .opf-json, .opf-code) .cm-dropCursor {
-  border-left-color: var(--opf-ui-fg);
-}
 
-:is(.opf-ui, .opf-json, .opf-code) .cm-gutters {
-  color: var(--opf-ui-muted-fg);
-  background: var(--opf-ui-code-bg);
-  border-right: 1px solid var(--opf-ui-code-border);
-}
+
+
+
+
+
+
 
 /* A wrapped line continues under its own indentation (src/source-wrap.js, VS Code's wrappingIndent "indent"): `opf-hang-<n>` says how many
    columns, the first line keeps its place (a negative text-indent of the same width) and every continuation line starts n columns in.
@@ -4077,66 +4056,52 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
    from the measured width, because a percentage here makes style and layout of every line very slow (replacing the text of an 848-line
    document took 8.5 s instead of 0.56 s). Text inside an inline widget does not inherit the negative indent. `--opf-line-start` is the line's own
    left padding (the source pane sets it to 2px). */
-.cm-line.opf-hang-0 { --opf-hang: 0; }
-.cm-line.opf-hang-1 { --opf-hang: 1; }
-.cm-line.opf-hang-2 { --opf-hang: 2; }
-.cm-line.opf-hang-3 { --opf-hang: 3; }
-.cm-line.opf-hang-4 { --opf-hang: 4; }
-.cm-line.opf-hang-5 { --opf-hang: 5; }
-.cm-line.opf-hang-6 { --opf-hang: 6; }
-.cm-line.opf-hang-7 { --opf-hang: 7; }
-.cm-line.opf-hang-8 { --opf-hang: 8; }
-.cm-line.opf-hang-9 { --opf-hang: 9; }
-.cm-line.opf-hang-10 { --opf-hang: 10; }
-.cm-line.opf-hang-11 { --opf-hang: 11; }
-.cm-line.opf-hang-12 { --opf-hang: 12; }
-.cm-line.opf-hang-13 { --opf-hang: 13; }
-.cm-line.opf-hang-14 { --opf-hang: 14; }
-.cm-line.opf-hang-15 { --opf-hang: 15; }
-.cm-line.opf-hang-16 { --opf-hang: 16; }
-.cm-line.opf-hang-17 { --opf-hang: 17; }
-.cm-line.opf-hang-18 { --opf-hang: 18; }
-.cm-line.opf-hang-19 { --opf-hang: 19; }
-.cm-line.opf-hang-20 { --opf-hang: 20; }
-.cm-line.opf-hang-21 { --opf-hang: 21; }
-.cm-line.opf-hang-22 { --opf-hang: 22; }
-.cm-line.opf-hang-23 { --opf-hang: 23; }
-.cm-line.opf-hang-24 { --opf-hang: 24; }
-.cm-line.opf-hang-25 { --opf-hang: 25; }
-.cm-line.opf-hang-26 { --opf-hang: 26; }
-.cm-line.opf-hang-27 { --opf-hang: 27; }
-.cm-line.opf-hang-28 { --opf-hang: 28; }
-.cm-line.opf-hang-29 { --opf-hang: 29; }
-.cm-line.opf-hang-30 { --opf-hang: 30; }
-.cm-line.opf-hang-31 { --opf-hang: 31; }
-.cm-line.opf-hang-32 { --opf-hang: 32; }
-:is(.opf-ui, .opf-json, .opf-code) .cm-line {
-  padding-left: calc(var(--opf-line-start, 6px) + var(--opf-hang, 0) * 1ch);
-  text-indent: calc(-1 * var(--opf-hang, 0) * 1ch);
-}
 
-:is(.opf-ui, .opf-json, .opf-code) .cm-line > * {
-  text-indent: 0;
-}
 
-:is(.opf-ui, .opf-json, .opf-code) .cm-activeLine,
-:is(.opf-ui, .opf-json, .opf-code) .cm-line.is-hover {
-  background: color-mix(in srgb, var(--opf-ui-accent) 8%, transparent);
-}
 
-:is(.opf-ui, .opf-json, .opf-code) .cm-activeLineGutter {
-  color: var(--opf-ui-fg);
-  background: color-mix(in srgb, var(--opf-ui-accent) 8%, 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. */
@@ -4148,15 +4113,9 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 
 /* The other occurrences of the selected word: a 16% tint, so the lightest code text on it (a key in the dark scheme) keeps 4.5:1 (25% gave 4.2:1);
    the underline marks them at a glance. test/selection-contrast-browser.mjs measures it in both schemes. */
-:is(.opf-ui, .opf-json, .opf-code) .cm-selectionMatch {
-  background: color-mix(in srgb, var(--opf-ui-warn) 16%, transparent);
-  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--opf-ui-warn) 70%, transparent);
-}
 
-:is(.opf-ui, .opf-json, .opf-code) .cm-matchingBracket {
-  background: color-mix(in srgb, var(--opf-ui-accent) 16%, transparent);
-  outline: 1px solid var(--opf-ui-accent);
-}
+
+
 
 :is(.opf-ui, .opf-json, .opf-code) .tok-key {
   color: var(--opf-ui-accent-strong);
@@ -4180,79 +4139,27 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   border-radius: var(--opf-ui-radius-sm);
 }
 
-:is(.opf-ui, .opf-json, .opf-code) .cm-panels {
-  color: var(--opf-ui-fg);
-  background: var(--opf-ui-surface);
-  border-color: var(--opf-ui-border);
-  font-family: var(--opf-ui-font);
-}
 
-:is(.opf-ui, .opf-json, .opf-code) .cm-panels input,
-:is(.opf-ui, .opf-json, .opf-code) .cm-panels button {
-  font: 12px var(--opf-ui-font);
-  color: var(--opf-ui-fg);
-  background: var(--opf-ui-surface);
-  border: 1px solid var(--opf-ui-border);
-  border-radius: var(--opf-ui-radius-sm);
-}
 
-:is(.opf-ui, .opf-json, .opf-code) .cm-tooltip {
-  color: var(--opf-ui-fg);
-  background: var(--opf-ui-surface);
-  border: 1px solid var(--opf-ui-border);
-  border-radius: var(--opf-ui-radius-md);
-  box-shadow: var(--opf-ui-shadow-pop);
-}
 
-:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip.cm-tooltip-autocomplete > ul {
-  font-family: var(--opf-ui-mono);
-  font-size: 12px;
-}
 
-:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip.cm-tooltip-autocomplete > ul > li {
-  padding: 2px 8px;
-  color: var(--opf-ui-fg);
-}
 
-:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] {
-  color: var(--opf-ui-accent-fg);
-  background: var(--opf-ui-accent);
-}
 
-:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip-autocomplete .cm-completionDetail {
-  margin-left: 12px;
-  font-family: var(--opf-ui-font);
-  font-style: normal;
-  color: var(--opf-ui-muted-fg);
-}
 
-:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip-autocomplete > ul > li[aria-selected] .cm-completionDetail {
-  color: inherit;
-  opacity: 0.85;
-}
 
-:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip-autocomplete > .opf-completion-footer {
-  padding: 4px 8px;
-  font: 12px/1.4 var(--opf-ui-font);
-  color: var(--opf-ui-muted-fg);
-  border-top: 1px solid var(--opf-ui-border);
-}
 
-:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip-autocomplete .cm-completionMatchedText {
-  font-weight: 600;
-  text-decoration: none;
-}
 
-:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip .cm-completionInfo {
-  max-width: 280px;
-  padding: 6px 8px;
-  font: 12px/1.45 var(--opf-ui-font);
-  white-space: pre-wrap;
-  color: var(--opf-ui-fg);
-  background: var(--opf-ui-surface);
-  border: 1px solid var(--opf-ui-border);
-  border-radius: var(--opf-ui-radius-md);
-}
+
+
+
+
+
+
+
+
+
+
+
 
 /* The live region next to the code: read by screen readers, never seen. */
 .opf-source-live {
@@ -4268,16 +4175,7 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 }
 
 /* The documentation cards: beside the selected suggestion and over a key or a value. */
-:is(.opf-ui, .opf-json, .opf-code) .cm-tooltip .opf-doc,
-.opf-source-code .cm-tooltip .opf-doc {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  max-width: 340px;
-  padding: 2px 0;
-  font: 12px/1.45 var(--opf-ui-font);
-  white-space: normal;
-}
+
 .opf-doc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
 .opf-doc-title { font-family: var(--opf-ui-mono); font-weight: 600; }
 .opf-doc-type { color: var(--opf-ui-muted-fg); }
@@ -4289,18 +4187,18 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 .opf-doc-more { color: var(--opf-ui-muted-fg); font-size: 11px; }
 
 /* A problem's tooltip and the quick fix list. */
-.cm-tooltip-lint .opf-problem { display: flex; flex-direction: column; gap: 2px; max-width: 360px; white-space: normal; }
+
 .opf-problem-next { color: var(--opf-ui-muted-fg); }
-.cm-tooltip-lint .cm-diagnosticAction { margin: 4px 6px 0 0; padding: 1px 8px; border: 1px solid var(--opf-ui-border); border-radius: var(--opf-ui-radius-sm); background: var(--opf-ui-muted); color: var(--opf-ui-fg); font: 12px var(--opf-ui-font); cursor: pointer; }
-.cm-tooltip-lint .cm-diagnosticSource { color: var(--opf-ui-muted-fg); }
+
+
 .opf-problem-hint { color: var(--opf-ui-muted-fg); font-size: 11px; }
-.cm-tooltip .opf-fixes { display: flex; flex-direction: column; min-width: 180px; padding: 3px; font: 12px var(--opf-ui-font); }
+
 .opf-fix { padding: 3px 8px; border-radius: var(--opf-ui-radius-sm); white-space: nowrap; }
 .opf-fix[aria-selected="true"] { background: var(--opf-ui-accent); color: var(--opf-ui-accent-fg); }
-:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip .cm-completionInfo { white-space: normal; }
+
 
 /* The shape hint (Cmd/Ctrl+Shift+Space): the fields of the object around the caret, each set, next or optional. The state is a word and a mark, not only a color. */
-.cm-tooltip.opf-hint { display: flex; flex-direction: column; min-width: 22em; max-width: 38em; padding: 4px 0; font: 12.5px var(--opf-ui-font); white-space: normal; }
+
 .opf-hint-head { display: flex; justify-content: space-between; gap: 24px; padding: 2px 12px 5px; border-bottom: 1px solid var(--opf-ui-border); }
 .opf-hint-title { font: 600 12px var(--opf-ui-mono); }
 .opf-hint-aside { color: var(--opf-ui-muted-fg); font-size: 11.5px; white-space: nowrap; }
@@ -4315,20 +4213,14 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 .opf-hint-row[data-state="next"] .opf-hint-state { color: var(--opf-ui-accent-strong); font-weight: 600; }
 .opf-hint-row[data-state="next"] .opf-hint-state::before { content: "\25B6\00a0"; }
 /* No animation either way; the rule is explicit so a later one cannot add motion for someone who asked for less. */
-@media (prefers-reduced-motion: reduce) {
-  .cm-tooltip.opf-hint, .cm-tooltip.opf-hint * { animation: none !important; transition: none !important; }
-}
+
 
 /* Ctrl+Space with the list open hides the documentation panel (and shows it again). */
-.cm-editor.opf-docs-off .cm-completionInfo { display: none; }
 
-:is(.opf-ui, .opf-json, .opf-code) .cm-diagnostic-error {
-  border-left-color: var(--opf-ui-danger);
-}
 
-:is(.opf-ui, .opf-json, .opf-code) .cm-diagnostic-warning {
-  border-left-color: var(--opf-ui-warn);
-}
+
+
+
 
 /* The field-options popover. Its inline style uses system colors; color-scheme follows the theme, and these keep it on the tokens. */
 :is(.opf-ui, .opf-json, .opf-code) .json-field-menu {
@@ -5058,18 +4950,18 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 /* Code */
 .opf-source-code { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; }
 /* The pane frame draws the edge: the editor inside it has no border or radius of its own (panels.css gives a standalone editor both). */
-.opf-source-code > .cm-editor { flex: 1; min-width: 0; height: 100%; background: transparent; color: var(--opf-ui-fg); border: 0; border-radius: 0; }
-.opf-source-code .cm-editor.cm-focused { outline: none; }
-.opf-source-code .cm-scroller { overflow: auto; font: 400 13.5px/22px var(--opf-ui-mono); }
-.opf-source[data-density="touch"] .opf-source-code .cm-scroller { font-size: 13px; line-height: 21px; }
-.opf-source-code .cm-content { padding: 16px 16px 16px 4px; caret-color: var(--opf-ui-fg); }
-.opf-source-code .cm-line { --opf-line-start: 2px; padding-top: 0; padding-right: 2px; padding-bottom: 0; }
-.opf-source-code .cm-gutters { border: 0; background: transparent; color: var(--opf-ui-muted-fg); }
-.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; }
-/* 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); }
+
+
+
+
+
+
+
+
+
+/* The selection color is the shared one in panels.css (JSON editor section). */
+
+.opf-source-code .tok-key { color: var(--opf-ui-accent-strong); }
 .opf-source-code .tok-str { color: var(--opf-ui-fg); }
 .opf-source-code .tok-num { color: var(--opf-ui-warn); }
 .opf-source-code .tok-punct,
@@ -5079,7 +4971,7 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 .opf-source-code .tok-head { color: var(--opf-ui-accent-strong); font-weight: 600; }
 .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); }
@@ -5087,12 +4979,12 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 .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); }
+
+
+
+
 
 /* Findings under the code */
 .opf-source-findings {
@@ -5230,16 +5122,14 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 .opf-source-confirm-accept { font-weight: 600; }
 
 /* Fold gutter (src/source-folding.js) */
-.opf-source-code .cm-foldGutter { width: 16px; }
-.opf-source-code .cm-foldGutter .cm-gutterElement { display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
-.opf-source-code .cm-foldGutter .opf-fold-marker { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 100%; color: var(--opf-ui-muted-fg); opacity: 0; transition: opacity var(--opf-ui-ease); }
-.opf-source-code .cm-foldGutter .opf-fold-marker.is-folded,
-.opf-source-code:hover .cm-foldGutter .opf-fold-marker,
-.opf-source-code .cm-foldGutter .opf-fold-marker:hover { opacity: 1; }
-.opf-source-code .cm-foldGutter .opf-fold-marker:hover { color: var(--opf-ui-fg); }
-.opf-source-code .cm-foldPlaceholder { border: 0; background: var(--opf-ui-muted); color: var(--opf-ui-muted-fg); border-radius: var(--opf-ui-radius-sm); padding: 0 5px; margin: 0 2px; cursor: pointer; }
-@media (prefers-reduced-motion: reduce) { .opf-source-code .cm-foldGutter .opf-fold-marker { transition: none; } }
-@media (forced-colors: active) { .opf-source-code .cm-foldGutter .opf-fold-marker { opacity: 1; } }
+
+
+
+
+
+
+
+
 
 /* Outline panel (opt-in `outline` option) */
 .opf-source-body { display: flex; flex: 1; min-height: 0; min-width: 0; }
@@ -5258,16 +5148,13 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 
 /* Forced colors (Windows high contrast): the selection of a list is an outline and a problem keeps its underline and a different shape per severity. */
 @media (forced-colors: active) {
-  .opf-source-code .cm-tooltip-autocomplete > ul > li[aria-selected],
-  .cm-tooltip .opf-fix[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; forced-color-adjust: none; background: Canvas; color: CanvasText; }
-  .opf-source-code .cm-lintRange-error { text-decoration: underline wavy CanvasText; }
-  .opf-source-code .cm-lintRange-warning { text-decoration: underline dashed CanvasText; }
-  .opf-source-code .cm-lintRange-info { text-decoration: underline dotted CanvasText; }
+
+
+
+
   .opf-source-finding { border: 1px solid CanvasText; }
 }
-@media (prefers-reduced-motion: reduce) {
-  .cm-tooltip, .cm-tooltip * { animation: none !important; transition: none !important; }
-}
+
 
 /* studio.css */
 /* CE-20: the Studio (`createOpfEditor(el, { layout: "studio" | "playground" })`). Only --opf-ui-* tokens. The arrangement follows data
@@ -7122,67 +7009,20 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   }
 
   /* ---- CodeMirror's lists and panels (completions, problems, quick fixes, search) ---------------------------------------------- */
-  :root :is(.opf-ui, .opf-source, .opf-json, .opf-code) .cm-tooltip.cm-tooltip-autocomplete > ul > li {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    min-height: 44px;
-    padding: 2px 12px;
-  }
-  :root :is(.opf-ui, .opf-source, .opf-json, .opf-code) .cm-tooltip-autocomplete .cm-completionLabel {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .cm-tooltip .opf-fix {
-    display: flex;
-    align-items: center;
-    min-height: 44px;
-    padding: 3px 12px;
-  }
-  .cm-tooltip-lint .cm-diagnosticAction {
-    min-height: 44px;
-    padding: 0 14px;
-  }
-  :root .cm-panels .cm-panel.cm-search :is(input, button, label) {
-    min-height: 44px;
-  }
-  :root .cm-panels .cm-panel.cm-search :is(input[type="text"], input:not([type])) {
-    font-size: 16px;
-  }
+
+
+
+
+
+
   /* The find and replace fields take a row of their own each, the buttons and options wrap beneath, the close button stays in the corner. */
-  :root .cm-panels .cm-panel.cm-search {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 52px 6px 8px;
-  }
-  :root .cm-panels .cm-panel.cm-search br {
-    display: none;
-  }
-  :root .cm-panels .cm-panel.cm-search input[type="text"],
-  :root .cm-panels .cm-panel.cm-search input:not([type]) {
-    flex: 1 1 100%;
-    min-width: 0;
-    margin: 0;
-  }
-  :root .cm-panels .cm-panel.cm-search button,
-  :root .cm-panels .cm-panel.cm-search label {
-    margin: 0;
-  }
-  :root .cm-panels .cm-panel.cm-search label {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-  }
-  :root .cm-panels .cm-panel.cm-search button {
-    min-width: 44px;
-  }
-  :root .cm-panels .cm-panel.cm-search button[name="close"] {
-    top: 0;
-    right: 4px;
-  }
+
+
+
+
+
+
+
 
   /* ---- menus, dialogs and the compact controls of the panels --------------------------------------------------------------------- */
   .opf-export .opf-export-close {
@@ -7532,6 +7372,11 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   gap: 4px;
   padding: 0 12px 8px;
 }
+/* CE-30: the slide row is no wider than the editor; the thumbnail strip scrolls inside it (a narrow box, a phone). */
+.opf-ws-dock > .opf-ws-navigator,
+.opf-ws-dock > .opf-ws-thumbnails {
+  max-width: 100%;
+}
 .opf-ws-status {
   flex: none;
   margin: 0;
@@ -7619,27 +7464,29 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   flex: 1 1 0;
   min-height: 0;
 }
-/* A phone: the parts stack, the source above the slide, the side panel below. */
+/* A phone: the parts stack, the source above the slide, the side panel below. CE-30: only in the layouts that have several parts to stack;
+   `embed`, `viewer` and `canvas` are the slide alone and fit it to their box at any width (a stage of 40vh made a short embed overflow).
+   `:where()` keeps the specificity of the plain class. */
 @media (max-width: 760px) {
-  .opf-ws-body {
+  :where(.opf-workspace:not([data-opf-layout="embed"], [data-opf-layout="viewer"], [data-opf-layout="canvas"])) .opf-ws-body {
     flex-direction: column;
     overflow: auto;
   }
-  .opf-ws-source {
+  :where(.opf-workspace:not([data-opf-layout="embed"], [data-opf-layout="viewer"], [data-opf-layout="canvas"])) .opf-ws-source {
     flex: none;
     min-width: 0;
     height: 40vh;
     border-right: 0;
     border-bottom: 1px solid var(--opf-ui-border);
   }
-  .opf-ws-main {
+  :where(.opf-workspace:not([data-opf-layout="embed"], [data-opf-layout="viewer"], [data-opf-layout="canvas"])) .opf-ws-main {
     flex: none;
   }
-  .opf-ws-stage {
+  :where(.opf-workspace:not([data-opf-layout="embed"], [data-opf-layout="viewer"], [data-opf-layout="canvas"])) .opf-ws-stage {
     flex: none;
     min-height: 40vh;
   }
-  .opf-ws-side {
+  :where(.opf-workspace:not([data-opf-layout="embed"], [data-opf-layout="viewer"], [data-opf-layout="canvas"])) .opf-ws-side {
     flex: none;
     border-left: 0;
     border-top: 1px solid var(--opf-ui-border);
@@ -7651,3 +7498,285 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   }
 }
 }
+
+/* Outside the layer: the rules for CodeMirror's elements, which CodeMirror's own unlayered theme would otherwise beat. */
+:is(.opf-ui, .opf-json, .opf-code) .cm-editor {
+  font: 12.5px/1.65 var(--opf-ui-mono);
+  color: var(--opf-ui-fg);
+  background: var(--opf-ui-code-bg);
+  border: 1px solid var(--opf-ui-code-border);
+  border-radius: var(--opf-ui-radius-md);
+}
+:is(.opf-ui, .opf-json, .opf-code) .cm-editor.cm-focused {
+  outline: 2px solid var(--opf-ui-ring);
+  outline-offset: 2px;
+}
+:is(.opf-ui, .opf-json, .opf-code) .cm-scroller,
+:is(.opf-ui, .opf-json, .opf-code) .cm-content {
+  font-family: var(--opf-ui-mono);
+}
+:is(.opf-ui, .opf-json, .opf-code) .cm-content {
+  caret-color: var(--opf-ui-fg);
+}
+:is(.opf-ui, .opf-json, .opf-code) .cm-cursor,
+:is(.opf-ui, .opf-json, .opf-code) .cm-dropCursor {
+  border-left-color: var(--opf-ui-fg);
+}
+:is(.opf-ui, .opf-json, .opf-code) .cm-gutters {
+  color: var(--opf-ui-muted-fg);
+  background: var(--opf-ui-code-bg);
+  border-right: 1px solid var(--opf-ui-code-border);
+}
+.cm-line.opf-hang-0 { --opf-hang: 0; }
+.cm-line.opf-hang-1 { --opf-hang: 1; }
+.cm-line.opf-hang-2 { --opf-hang: 2; }
+.cm-line.opf-hang-3 { --opf-hang: 3; }
+.cm-line.opf-hang-4 { --opf-hang: 4; }
+.cm-line.opf-hang-5 { --opf-hang: 5; }
+.cm-line.opf-hang-6 { --opf-hang: 6; }
+.cm-line.opf-hang-7 { --opf-hang: 7; }
+.cm-line.opf-hang-8 { --opf-hang: 8; }
+.cm-line.opf-hang-9 { --opf-hang: 9; }
+.cm-line.opf-hang-10 { --opf-hang: 10; }
+.cm-line.opf-hang-11 { --opf-hang: 11; }
+.cm-line.opf-hang-12 { --opf-hang: 12; }
+.cm-line.opf-hang-13 { --opf-hang: 13; }
+.cm-line.opf-hang-14 { --opf-hang: 14; }
+.cm-line.opf-hang-15 { --opf-hang: 15; }
+.cm-line.opf-hang-16 { --opf-hang: 16; }
+.cm-line.opf-hang-17 { --opf-hang: 17; }
+.cm-line.opf-hang-18 { --opf-hang: 18; }
+.cm-line.opf-hang-19 { --opf-hang: 19; }
+.cm-line.opf-hang-20 { --opf-hang: 20; }
+.cm-line.opf-hang-21 { --opf-hang: 21; }
+.cm-line.opf-hang-22 { --opf-hang: 22; }
+.cm-line.opf-hang-23 { --opf-hang: 23; }
+.cm-line.opf-hang-24 { --opf-hang: 24; }
+.cm-line.opf-hang-25 { --opf-hang: 25; }
+.cm-line.opf-hang-26 { --opf-hang: 26; }
+.cm-line.opf-hang-27 { --opf-hang: 27; }
+.cm-line.opf-hang-28 { --opf-hang: 28; }
+.cm-line.opf-hang-29 { --opf-hang: 29; }
+.cm-line.opf-hang-30 { --opf-hang: 30; }
+.cm-line.opf-hang-31 { --opf-hang: 31; }
+.cm-line.opf-hang-32 { --opf-hang: 32; }
+:is(.opf-ui, .opf-json, .opf-code) .cm-line {
+  padding-left: calc(var(--opf-line-start, 6px) + var(--opf-hang, 0) * 1ch);
+  text-indent: calc(-1 * var(--opf-hang, 0) * 1ch);
+}
+:is(.opf-ui, .opf-json, .opf-code) .cm-line > * {
+  text-indent: 0;
+}
+:is(.opf-ui, .opf-json, .opf-code) .cm-activeLine,
+:is(.opf-ui, .opf-json, .opf-code) .cm-line.is-hover {
+  background: color-mix(in srgb, var(--opf-ui-accent) 8%, transparent);
+}
+:is(.opf-ui, .opf-json, .opf-code) .cm-activeLineGutter {
+  color: var(--opf-ui-fg);
+  background: color-mix(in srgb, var(--opf-ui-accent) 8%, transparent);
+}
+: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);
+}
+:is(.opf-ui, .opf-json, .opf-code) .cm-selectionMatch {
+  background: color-mix(in srgb, var(--opf-ui-warn) 16%, transparent);
+  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--opf-ui-warn) 70%, transparent);
+}
+:is(.opf-ui, .opf-json, .opf-code) .cm-matchingBracket {
+  background: color-mix(in srgb, var(--opf-ui-accent) 16%, transparent);
+  outline: 1px solid var(--opf-ui-accent);
+}
+:is(.opf-ui, .opf-json, .opf-code) .cm-panels {
+  color: var(--opf-ui-fg);
+  background: var(--opf-ui-surface);
+  border-color: var(--opf-ui-border);
+  font-family: var(--opf-ui-font);
+}
+:is(.opf-ui, .opf-json, .opf-code) .cm-panels input,
+:is(.opf-ui, .opf-json, .opf-code) .cm-panels button {
+  font: 12px var(--opf-ui-font);
+  color: var(--opf-ui-fg);
+  background: var(--opf-ui-surface);
+  border: 1px solid var(--opf-ui-border);
+  border-radius: var(--opf-ui-radius-sm);
+}
+:is(.opf-ui, .opf-json, .opf-code) .cm-tooltip {
+  color: var(--opf-ui-fg);
+  background: var(--opf-ui-surface);
+  border: 1px solid var(--opf-ui-border);
+  border-radius: var(--opf-ui-radius-md);
+  box-shadow: var(--opf-ui-shadow-pop);
+}
+:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip.cm-tooltip-autocomplete > ul {
+  font-family: var(--opf-ui-mono);
+  font-size: 12px;
+}
+:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip.cm-tooltip-autocomplete > ul > li {
+  padding: 2px 8px;
+  color: var(--opf-ui-fg);
+}
+:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] {
+  color: var(--opf-ui-accent-fg);
+  background: var(--opf-ui-accent);
+}
+:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip-autocomplete .cm-completionDetail {
+  margin-left: 12px;
+  font-family: var(--opf-ui-font);
+  font-style: normal;
+  color: var(--opf-ui-muted-fg);
+}
+:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip-autocomplete > ul > li[aria-selected] .cm-completionDetail {
+  color: inherit;
+  opacity: 0.85;
+}
+:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip-autocomplete > .opf-completion-footer {
+  padding: 4px 8px;
+  font: 12px/1.4 var(--opf-ui-font);
+  color: var(--opf-ui-muted-fg);
+  border-top: 1px solid var(--opf-ui-border);
+}
+:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip-autocomplete .cm-completionMatchedText {
+  font-weight: 600;
+  text-decoration: none;
+}
+:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip .cm-completionInfo {
+  max-width: 280px;
+  padding: 6px 8px;
+  font: 12px/1.45 var(--opf-ui-font);
+  white-space: pre-wrap;
+  color: var(--opf-ui-fg);
+  background: var(--opf-ui-surface);
+  border: 1px solid var(--opf-ui-border);
+  border-radius: var(--opf-ui-radius-md);
+}
+:is(.opf-ui, .opf-json, .opf-code) .cm-tooltip .opf-doc,
+.opf-source-code .cm-tooltip .opf-doc {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-width: 340px;
+  padding: 2px 0;
+  font: 12px/1.45 var(--opf-ui-font);
+  white-space: normal;
+}
+.cm-tooltip-lint .opf-problem { display: flex; flex-direction: column; gap: 2px; max-width: 360px; white-space: normal; }
+.cm-tooltip-lint .cm-diagnosticAction { margin: 4px 6px 0 0; padding: 1px 8px; border: 1px solid var(--opf-ui-border); border-radius: var(--opf-ui-radius-sm); background: var(--opf-ui-muted); color: var(--opf-ui-fg); font: 12px var(--opf-ui-font); cursor: pointer; }
+.cm-tooltip-lint .cm-diagnosticSource { color: var(--opf-ui-muted-fg); }
+.cm-tooltip .opf-fixes { display: flex; flex-direction: column; min-width: 180px; padding: 3px; font: 12px var(--opf-ui-font); }
+:root :is(.opf-ui, .opf-json, .opf-code) .cm-tooltip .cm-completionInfo { white-space: normal; }
+.cm-tooltip.opf-hint { display: flex; flex-direction: column; min-width: 22em; max-width: 38em; padding: 4px 0; font: 12.5px var(--opf-ui-font); white-space: normal; }
+@media (prefers-reduced-motion: reduce) {
+  .cm-tooltip.opf-hint, .cm-tooltip.opf-hint * { animation: none !important; transition: none !important; }
+}
+.cm-editor.opf-docs-off .cm-completionInfo { display: none; }
+:is(.opf-ui, .opf-json, .opf-code) .cm-diagnostic-error {
+  border-left-color: var(--opf-ui-danger);
+}
+:is(.opf-ui, .opf-json, .opf-code) .cm-diagnostic-warning {
+  border-left-color: var(--opf-ui-warn);
+}
+.opf-source-code > .cm-editor { flex: 1; min-width: 0; height: 100%; background: transparent; color: var(--opf-ui-fg); border: 0; border-radius: 0; }
+.opf-source-code .cm-editor.cm-focused { outline: none; }
+.opf-source-code .cm-scroller { overflow: auto; font: 400 13.5px/22px var(--opf-ui-mono); }
+.opf-source[data-density="touch"] .opf-source-code .cm-scroller { font-size: 13px; line-height: 21px; }
+.opf-source-code .cm-content { padding: 16px 16px 16px 4px; caret-color: var(--opf-ui-fg); }
+.opf-source-code .cm-line { --opf-line-start: 2px; padding-top: 0; padding-right: 2px; padding-bottom: 0; }
+.opf-source-code .cm-gutters { border: 0; background: transparent; color: var(--opf-ui-muted-fg); }
+.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-cursor { border-left-color: var(--opf-ui-fg); }
+.opf-source-code .cm-line.is-hover { background: color-mix(in srgb, var(--opf-ui-accent) 6%, transparent); }
+.opf-source-code .cm-line.opf-source-flash { animation: opf-source-flash 1.2s ease-out; }
+@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); }
+.opf-source-code .cm-foldGutter { width: 16px; }
+.opf-source-code .cm-foldGutter .cm-gutterElement { display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
+.opf-source-code .cm-foldGutter .opf-fold-marker { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 100%; color: var(--opf-ui-muted-fg); opacity: 0; transition: opacity var(--opf-ui-ease); }
+.opf-source-code .cm-foldGutter .opf-fold-marker.is-folded,
+.opf-source-code:hover .cm-foldGutter .opf-fold-marker,
+.opf-source-code .cm-foldGutter .opf-fold-marker:hover { opacity: 1; }
+.opf-source-code .cm-foldGutter .opf-fold-marker:hover { color: var(--opf-ui-fg); }
+.opf-source-code .cm-foldPlaceholder { border: 0; background: var(--opf-ui-muted); color: var(--opf-ui-muted-fg); border-radius: var(--opf-ui-radius-sm); padding: 0 5px; margin: 0 2px; cursor: pointer; }
+@media (prefers-reduced-motion: reduce) {
+ .opf-source-code .cm-foldGutter .opf-fold-marker { transition: none; }
+}
+@media (forced-colors: active) {
+ .opf-source-code .cm-foldGutter .opf-fold-marker { opacity: 1; }
+}
+@media (forced-colors: active) {
+  .opf-source-code .cm-tooltip-autocomplete > ul > li[aria-selected],
+  .cm-tooltip .opf-fix[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; forced-color-adjust: none; background: Canvas; color: CanvasText; }
+  .opf-source-code .cm-lintRange-error { text-decoration: underline wavy CanvasText; }
+  .opf-source-code .cm-lintRange-warning { text-decoration: underline dashed CanvasText; }
+  .opf-source-code .cm-lintRange-info { text-decoration: underline dotted CanvasText; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .cm-tooltip, .cm-tooltip * { animation: none !important; transition: none !important; }
+}
+@media (pointer: coarse) {
+  :root :is(.opf-ui, .opf-source, .opf-json, .opf-code) .cm-tooltip.cm-tooltip-autocomplete > ul > li {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-height: 44px;
+    padding: 2px 12px;
+  }
+  :root :is(.opf-ui, .opf-source, .opf-json, .opf-code) .cm-tooltip-autocomplete .cm-completionLabel {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .cm-tooltip .opf-fix {
+    display: flex;
+    align-items: center;
+    min-height: 44px;
+    padding: 3px 12px;
+  }
+  .cm-tooltip-lint .cm-diagnosticAction {
+    min-height: 44px;
+    padding: 0 14px;
+  }
+  :root .cm-panels .cm-panel.cm-search :is(input, button, label) {
+    min-height: 44px;
+  }
+  :root .cm-panels .cm-panel.cm-search :is(input[type="text"], input:not([type])) {
+    font-size: 16px;
+  }
+  :root .cm-panels .cm-panel.cm-search {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 52px 6px 8px;
+  }
+  :root .cm-panels .cm-panel.cm-search br {
+    display: none;
+  }
+  :root .cm-panels .cm-panel.cm-search input[type="text"],
+  :root .cm-panels .cm-panel.cm-search input:not([type]) {
+    flex: 1 1 100%;
+    min-width: 0;
+    margin: 0;
+  }
+  :root .cm-panels .cm-panel.cm-search button,
+  :root .cm-panels .cm-panel.cm-search label {
+    margin: 0;
+  }
+  :root .cm-panels .cm-panel.cm-search label {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+  :root .cm-panels .cm-panel.cm-search button {
+    min-width: 44px;
+  }
+  :root .cm-panels .cm-panel.cm-search button[name="close"] {
+    top: 0;
+    right: 4px;
+  }
+}

package/dist/toolbar.d.ts

@@ -26,11 +26,21 @@ export type ToolbarItemName =
   | "spacer"
   | "|";
 
-/** An item by name, or with its own priority (higher stays visible longer) and whether it may move into the more menu. */
-export type ToolbarItemSpec = ToolbarItemName | { id: ToolbarItemName; priority?: number; collapsible?: boolean };
+/** An item name, or the name of a host's own item. */
+export type ToolbarItemId = ToolbarItemName | (string & {});
+
+/**
+ * An item by name, or with its own priority (higher stays visible longer) and whether it may move into the more menu. A host's own item is
+ * `{ id, priority }` with a name that is not one of the above (lowercase letters, digits and dashes): its slot starts empty, the host fills it
+ * (`slot(id)`) and registers what it offers in the more menu with `mount(id, part)`. A bare unknown name throws, so a misspelt item is caught.
+ */
+export type ToolbarItemSpec =
+  | ToolbarItemName
+  | { id: ToolbarItemName; priority?: number; collapsible?: boolean }
+  | { id: string; priority: number; collapsible?: boolean };
 
 export interface ToolbarItem {
-  id: ToolbarItemName;
+  id: ToolbarItemId;
   priority: number;
   collapsible: boolean;
 }
@@ -38,7 +48,7 @@ export interface ToolbarItem {
 /** The defaults of every item: `more` and `title` stay (the title shrinks instead), `spacer` and `|` are layout. */
 export declare const TOOLBAR_ITEMS: Readonly<Record<ToolbarItemName, Readonly<{ priority: number; collapsible: boolean }>>>;
 
-/** The items with their priorities. Throws on a name that is not an item, and on a named item given twice (`spacer` and `|` may repeat). */
+/** The items with their priorities. Throws on a name that is not an item (or a host item), and on a named item given twice (`spacer` and `|` may repeat). */
 export declare function normalizeToolbarItems(items: readonly ToolbarItemSpec[]): ToolbarItem[];
 
 /** One entry of the more menu. `pressed` makes it a checkbox item (`aria-checked`); a `disabled` item is listed but does not run. */
@@ -65,7 +75,7 @@ export interface ToolbarOptions {
   /** Replace the ⋯ glyph: `more` (`.opf-tb-more-icon`). See `OpfIcon`. */
   icons?: OpfIcons<"more">;
   /** The set of collapsed items changed. */
-  onCollapse?(detail: { collapsed: ToolbarItemName[] }): void;
+  onCollapse?(detail: { collapsed: ToolbarItemId[] }): void;
   /** A part's `menuItems()` or an item's `run()` threw. */
   onError?(error: unknown): void;
 }
@@ -74,20 +84,20 @@ export interface Toolbar {
   /** The row (`.opf-tb`), appended to the container. */
   readonly element: HTMLElement;
   readonly items: ToolbarItem[];
-  /** One element per named item (`data-opf-toolbar-item`), in bar order. Mount a part in it, then `mount(name, part)`. */
-  readonly slots: Partial<Record<ToolbarItemName, HTMLElement>>;
-  slot(name: ToolbarItemName): HTMLElement | undefined;
+  /** One element per named item (`data-opf-toolbar-item`), in bar order, host items included. Mount a part in it, then `mount(name, part)`. */
+  readonly slots: Partial<Record<ToolbarItemId, HTMLElement>>;
+  slot(name: ToolbarItemId): HTMLElement | undefined;
   /** The items in the more menu now, in bar order. */
-  readonly collapsed: ToolbarItemName[];
+  readonly collapsed: ToolbarItemId[];
   readonly menuOpen: boolean;
   /** Change an item's priority or whether it collapses; false for an item that is not in the bar (or `more`, `spacer`, `|`). */
-  setItem(name: ToolbarItemName, change: { priority?: number; collapsible?: boolean }): boolean;
+  setItem(name: ToolbarItemId, change: { priority?: number; collapsible?: boolean }): boolean;
   /** Register the part mounted in a slot, for its menu items. Returns the function that unregisters it. */
-  mount(name: ToolbarItemName, part: ToolbarPart): () => void;
+  mount(name: ToolbarItemId, part: ToolbarPart): () => void;
   /** What the more menu would list now, one group per collapsed part. */
-  menuItems(): { id: ToolbarItemName; items: ToolbarMenuItem[] }[];
+  menuItems(): { id: ToolbarItemId; items: ToolbarMenuItem[] }[];
   /** Fit the row now (it also fits itself on the next frame after a resize). Returns the collapsed items. */
-  update(): ToolbarItemName[];
+  update(): ToolbarItemId[];
   /** Open the more menu and focus its first (or last) item. False when there is nothing to list. */
   openMenu(which?: "first" | "last"): boolean;
   closeMenu(options?: { restoreFocus?: boolean }): void;

package/dist/toolbar.js

@@ -31,10 +31,16 @@ export const TOOLBAR_ITEMS = Object.freeze({
 });
 const REPEATABLE = new Set(["spacer", "|"]);
 const LABELS = Object.freeze({ more: "More", menu: "More actions" });
+// A host's own item: `{ id, priority }` with a name of its own (lowercase letters, digits and dashes). Its slot starts empty; the host fills it and
+// registers what it offers in ⋯ with `mount(id, part)`, like any item. A bare unknown name still throws, so a misspelt item is caught.
+const HOST_ITEM = /^[a-z][a-z0-9-]*$/;
+
+const isHostItem = (id) => typeof id === "string" && !Object.hasOwn(TOOLBAR_ITEMS, id) && HOST_ITEM.test(id);
 
 /**
  * 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).
+ * it collapses. Throws on a name that is not an item (a host's own item is `{ id, priority }` with a name of its own) 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.");
@@ -42,8 +48,9 @@ export function normalizeToolbarItems(items) {
   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(", ")}).`);
+    const host = typeof item === "object" && spec.priority !== undefined && isHostItem(spec.id);
+    const known = host ? { priority: spec.priority, collapsible: true } : Object.hasOwn(TOOLBAR_ITEMS, spec.id) ? TOOLBAR_ITEMS[spec.id] : undefined;
+    if (!known) throw new RangeError(`"${spec.id}" is not a toolbar item (${Object.keys(TOOLBAR_ITEMS).join(", ")}; an item of your own is { id, priority }).`);
     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);
@@ -274,7 +281,8 @@ export function createToolbar(container, options = {}) {
     }
     const before = collapsed.join(",");
     bar.setAttribute("data-measuring", "");
-    for (const entry of entries) if (entry.collapsible) setCollapsed(entry, false);
+    // Every item shows again first, one made non-collapsible (`setItem`) while it was in ⋯ included.
+    for (const entry of entries) setCollapsed(entry, false);
     if (moreEntry) moreEntry.element.hidden = true;
     syncDividers();
     const next = [];

package/dist/workspace.d.ts

@@ -274,6 +274,15 @@ export interface OpfEditorSourceOptions {
   onDownload?(file: SourceFile): void | Promise<void>;
 }
 
+/** CE-30: `variables` as an object: the canvas draws `{{variables}}` resolved, as with `"resolved"`. */
+export interface OpfEditorVariablesOptions {
+  /**
+   * Called when a press on the slide lands on text that has no field of its own (a value the deck generates), in place of focusing the editor's
+   * source pane: focus your own code editor. A throw is reported as an `error` event.
+   */
+  focusSource?(): void;
+}
+
 export interface OpfEditorOptions {
   /** The document to edit: an OPF object, or its JSON text (then the pane keeps its spelling). Creates the session. */
   document?: unknown;
@@ -289,8 +298,12 @@ export interface OpfEditorOptions {
   imageResolver?: ToSvgOptions["imageResolver"];
   /** Stores an uploaded image yourself and returns its reference (see `@openpresentation/opf-editor/assets`). Used by the design controls. */
   onAddAsset?: DesignControlsOptions["onAddAsset"];
-  /** `"authored"` (default): the canvas shows `{{variables}}` as written. `"resolved"`: filled in, except in a template deck; a press on filled-in text opens its properties form. */
-  variables?: "authored" | "resolved";
+  /**
+   * `"authored"` (default): the canvas shows `{{variables}}` as written. `"resolved"`: filled in, except in a template deck; a press on filled-in text
+   * opens its properties form, and a press on text without a field of its own (a generated value) focuses the source pane. CE-30: an object is
+   * `"resolved"` too, and its `focusSource` is called instead of focusing the source pane: for a host with its own code editor beside the slide.
+   */
+  variables?: "authored" | "resolved" | OpfEditorVariablesOptions;
 
   /**
    * `"full"` (default), `"canvas"`, `"embed"` (CE-28) or `"source"`: the editor builds the arrangement (ignored when `slots` names a part; slots for the

package/dist/workspace.js

@@ -164,10 +164,11 @@ function resolveParts(options, layout, slots, asked = []) {
   }
   // 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.
+  // CE-28 wave 2: an item the toolbar lists brings the part it shows: Export in the viewer, Present (CE-30: also where the host arranges the
+  // parts with `slots`), 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.present === undefined && listed("present")) parts.present = 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.
@@ -203,7 +204,9 @@ function resolveToolbar(options, layout, parts, views, given, items) {
     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)]));
+  // A host's own item (`{ id, priority }` with a name of its own) is always built: its slot is the host's to fill (`editor.toolbar.slot(id)`).
+  const host = (id) => !Object.hasOwn(TOOLBAR_ITEMS, id);
+  return items.filter((item) => !RESERVED_ITEMS.has(item.id) && (host(item.id) || available[item.id]) && !(ITEM_SLOT_NAMES.has(item.id) && given[itemSlot(item.id)]));
 }
 
 /**
@@ -422,7 +425,10 @@ export function createOpfEditor(element, options = {}) {
   }
   let frameSize = { width: 0, height: 0 };
   const draftMemory = createSourceMemory();
-  const variablesMode = options.variables === "resolved" ? "resolved" : "authored";
+  // CE-30: `variables: { focusSource }` is "resolved" with the host's own code editor: a press on text without a field of its own focuses that.
+  const variablesObject = options.variables !== null && typeof options.variables === "object" ? options.variables : undefined;
+  const variablesMode = options.variables === "resolved" || variablesObject ? "resolved" : "authored";
+  if (variablesObject && variablesObject.focusSource !== undefined && typeof variablesObject.focusSource !== "function") throw new TypeError("variables.focusSource must be a function.");
   const fitMode = studioLayout ? false : options.fit === undefined ? (layout === "slots" ? false : "contain") : options.fit;
 
   const say = (message) => {
@@ -944,7 +950,14 @@ export function createOpfEditor(element, options = {}) {
       cleanups.push(
         installCanvasVariableEditing(slots.canvas, ui, canvas, {
           resolved: () => !authoredTemplate,
-          focusSource: () => pane?.editor?.api?.focus?.(),
+          focusSource: () => {
+            if (!variablesObject?.focusSource) return pane?.editor?.api?.focus?.();
+            try {
+              variablesObject.focusSource();
+            } catch (error) {
+              report(error);
+            }
+          },
         }),
       );
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-editor",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",
@@ -348,12 +348,12 @@
     "@lezer/highlight": "^1.2.5",
     "jsonc-parser": "3.3.1",
     "yaml": "^2.9.1",
-    "@openpresentation/opf": "^0.30.0"
+    "@openpresentation/opf": "^0.31.0"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@openpresentation/opf-render": "^0.30.0"
+    "@openpresentation/opf-render": "^0.31.0"
   },
   "peerDependenciesMeta": {
     "@openpresentation/opf-render": {
@@ -422,9 +422,9 @@
     "react-dom": "19.3.1",
     "react-18": "npm:react@18.3.1",
     "react-dom-18": "npm:react-dom@18.3.1",
-    "@openpresentation/gallery": "0.30.0",
-    "@openpresentation/opf-pptx": "0.30.0",
-    "@openpresentation/opf-render": "0.30.0"
+    "@openpresentation/opf-pptx": "0.31.0",
+    "@openpresentation/gallery": "0.31.0",
+    "@openpresentation/opf-render": "0.31.0"
   },
   "scripts": {
     "build": "node scripts/build.mjs",
@@ -479,5 +479,5 @@
     "test:workspace-react-browser": "node test/workspace-react-browser.mjs",
     "test:element-browser": "node test/element-browser.mjs"
   },
-  "gitHead": "d82530c652b01fd6da204913c70636bfdf898642"
+  "gitHead": "d68561fad7b2b319cd7cdb8d7e75fefdd1dffa4c"
 }