@openpresentation/opf-editor 0.26.4 → 0.26.6

package/dist/source-worker.js

@@ -0,0 +1,30 @@
+// The worker entry of the source pane's text checks (`createSourcePane(el, { worker })`). A host bundles this file as its own worker script
+// (`@openpresentation/opf-editor/source-worker`), for example `new Worker(new URL("@openpresentation/opf-editor/source-worker", import.meta.url), { type: "module" })`
+// with a bundler that understands that form, or builds it as an extra entry point and serves it next to the page. It does the same work as the pane's
+// own inline path (`./source-check.js`), off the main thread. Requests run in order, but when several checks of one kind are waiting only the newest runs
+// (the older ones are answered with `skipped`): the pane drops stale replies anyway.
+import { createCheckService } from "./source-check.js";
+
+const service = createCheckService();
+let queue = [];
+let scheduled = false;
+
+function drain() {
+  scheduled = false;
+  const work = queue;
+  queue = [];
+  // The last check and the last syntax request win; catalogs messages always run, in order, and before the checks that follow them.
+  const newest = new Map();
+  work.forEach((message, index) => { if (message.type === "check" || message.type === "syntax") newest.set(message.type, index); });
+  work.forEach((message, index) => {
+    if ((message.type === "check" || message.type === "syntax") && newest.get(message.type) !== index) { self.postMessage({ id: message.id, ok: true, skipped: true }); return; }
+    const reply = service.handle(message);
+    try { self.postMessage(reply); } catch (error) { self.postMessage({ id: message.id, ok: false, error: `The result could not be sent: ${error?.message ?? error}` }); }
+  });
+}
+
+self.onmessage = (event) => {
+  queue.push(event.data);
+  // Messages that arrive while a check runs queue behind it; draining on the next task lets everything already waiting be seen together.
+  if (!scheduled) { scheduled = true; setTimeout(drain, 0); }
+};

package/dist/source-yaml.js

@@ -220,16 +220,40 @@ function inComment(line, column) {
   return false;
 }
 
+/** The quote character of a quoted scalar that `value` opens and does not close, or null (a quoted scalar may run over several lines). */
+export function openQuote(value) {
+  const text = value.trimStart();
+  const quote = text[0];
+  if (quote !== '"' && quote !== "'") return null;
+  return closesQuote(text.slice(1), quote) ? null : quote;
+}
+
+/** Whether `text` (the rest of a quoted scalar) holds its closing quote. */
+function closesQuote(text, quote) {
+  for (let index = 0; index < text.length; index++) {
+    if (quote === '"' && text[index] === "\\") { index++; continue; }
+    if (text[index] === quote) {
+      if (quote === "'" && text[index + 1] === "'") { index++; continue; }
+      return true;
+    }
+  }
+  return false;
+}
+
 /**
- * Walk the lines before `stop` (a line index), applying each to `stack`. Lines inside a block scalar or a flow collection that spans lines, blank
- * lines, comments and document markers change nothing. Returns `{ block, flow }`: the column a block scalar's text must be indented past (or -1) and
- * the depth of an unclosed flow collection (0 when none) at line `stop`, so the caller knows whether that line is inside either.
+ * Walk the lines before `stop` (a line index), applying each to `stack`. Lines inside a block scalar, a flow collection or a quoted scalar that span
+ * lines, blank lines, comments and document markers change nothing. Returns `{ block, flow, quote, open }`: the column a block scalar's text must be
+ * indented past (or -1), the depth of an unclosed flow collection (0 when none), the quote of an unclosed quoted scalar (or null) at line `stop`, so
+ * the caller knows whether that line is inside any of them, and for a flow collection `open`: the line it began on and where it sits in the stack.
  */
 function walk(lines, stop, stack) {
   let block = -1;
   let flow = 0;
+  let quote = null;
+  let open = null;
   for (let number = 0; number < stop; number++) {
     const text = lines[number].text;
+    if (quote) { if (closesQuote(text, quote)) quote = null; continue; }
     if (text.trim() === "") continue;
     const indent = text.length - text.trimStart().length;
     if (block >= 0) {
@@ -244,11 +268,14 @@ function walk(lines, stop, stack) {
     const value = entry ? parsed.rest.slice(entry.valueStart) : parsed.rest;
     const shape = entry ? shapeOfValue(value) : (parsed.markers.length ? shapeOfValue(value) : undefined);
     if (!entry && !parsed.markers.length) continue;
-    enter(stack, parsed, entry, shape);
+    const placed = enter(stack, parsed, entry, shape);
     if (shape?.block) block = entry ? parsed.restStart + entry.keyStart : parsed.markers.at(-1);
-    else if (shape?.flow) flow = flowDepth(value, 0);
+    else if (shape?.flow) {
+      flow = flowDepth(value, 0);
+      open = flow > 0 ? { number, parsed, entry, value, placed } : null;
+    } else if (shape && "scalar" in shape) quote = openQuote(value);
   }
-  return { block, flow };
+  return { block, flow, quote, open };
 }
 
 // ---- flow collections on one line --------------------------------------------------------------------------------------------------
@@ -401,7 +428,13 @@ function keyToken(text, line, restStart, position) {
  * colon yet. Options: `explicit` (Ctrl+Space also takes an empty place), `prefix` (the path of the node the text is the body of, for YAML in a fence of
  * a Markdown slide), `exclude` (keys never offered, the `slides` of front matter).
  */
-export function yamlContextAt(text, position, { explicit = false, prefix = [], exclude = [] } = {}) {
+export function yamlContextAt(text, position, options = {}) {
+  const context = readContext(text, position, options);
+  // The text the context was read from, and the path it is the body of: the references the value lists offer are looked up in it.
+  return context ? { ...context, sourceText: text, prefix: options.prefix ?? [] } : null;
+}
+
+function readContext(text, position, { explicit = false, prefix = [], exclude = [] }) {
   const lines = linesOf(text);
   const number = lineIndex(lines, position);
   const line = lines[number];
@@ -414,8 +447,10 @@ export function yamlContextAt(text, position, { explicit = false, prefix = [], e
   const state = walk(lines, number, stack);
   const lineIndent = lineText.length - lineText.trimStart().length;
   if (state.block >= 0 && (trimmedLine === "" ? column > state.block : lineIndent > state.block)) return null;
-  if (state.flow > 0) return null;
   const before = lineText.slice(0, column);
+  // A line inside a quoted scalar that began above: text, in which only `{{` of a variable is completed.
+  if (state.quote) return continuationContext({ text, line, position, before, explicit });
+  if (state.flow > 0) return flowContinuation({ text, lines, number, line, position, column, explicit, prefix, exclude, open: state.open });
   const parsed = readMarkers(before);
   // The key is read from the whole line: a colon after the caret that ends the key (`top:le|ft: x`) is not the colon before it.
   const whole = readMarkers(lineText);
@@ -425,6 +460,53 @@ export function yamlContextAt(text, position, { explicit = false, prefix = [], e
   return entry ? valueContext({ ...shared, entry }) : keyOrItemContext(shared);
 }
 
+const VARIABLE_OPEN = /\{\{[A-Za-z0-9._-]*$/;
+
+/**
+ * A line of text that continues a scalar begun on a line above (a quoted scalar left open, or a sentence that runs on): nothing to complete in it
+ * except the name of a variable after `{{`. The context is a value in the text sense (`multiline`), with no path.
+ */
+function continuationContext({ text, line, position, before, explicit }) {
+  if (!VARIABLE_OPEN.test(before)) return null;
+  let end = position;
+  while (end < line.end && /[A-Za-z0-9._-]/.test(text[end])) end++;
+  const start = line.start + (line.text.length - line.text.trimStart().length);
+  return { format: "yaml", mode: "value", multiline: true, token: { quoted: true, closed: false, start, end, from: start, to: end }, path: [], key: undefined, existing: new Set(), document: {}, itemStart: false, flow: false, needsSpace: false, column: 0, indent: 0, explicit };
+}
+
+// The text of a line without its comment (a `#` after a space, outside quotes).
+function withoutComment(text) {
+  let quote = null;
+  for (let index = 0; index < text.length; index++) {
+    const character = text[index];
+    if (quote) {
+      if (quote === '"' && character === "\\") index++;
+      else if (character === quote) quote = null;
+    } else if (character === '"' || character === "'") {
+      if (index === 0 || /[\s[{,:-]/.test(text[index - 1])) quote = character;
+    } else if (character === "#" && (index === 0 || isSpace(text[index - 1]))) return text.slice(0, index);
+  }
+  return text;
+}
+
+/**
+ * A caret on a line inside a flow collection that began on an earlier line (`tags: [a,` / `  b, |]`, `{theme: minimal,` / `  |}`): the lines from
+ * the opening one to the caret are read as one text, so the containers open at the caret and the keys and items before it are known as on one line.
+ */
+function flowContinuation({ text, lines, number, line, position, column, explicit, prefix, exclude, open }) {
+  if (!open) return null;
+  const first = lines[open.number].text;
+  const start = open.entry ? open.parsed.restStart + open.entry.valueStart : open.parsed.restStart;
+  const middle = lines.slice(open.number + 1, number).map((item) => withoutComment(item.text).trim());
+  const joined = [withoutComment(first.slice(start)).trimStart(), ...middle, line.text.slice(0, column).trimStart()].join(" ");
+  const flow = flowAt(joined, joined.length);
+  if (!flow) return null;
+  const { map, seq } = open.placed;
+  const frame = open.entry ? map : seq;
+  const base = open.entry ? [...map.path, open.entry.key] : [...seq.path, seq.count - 1];
+  return flowContext({ text, line, position, flow, base, frame, lines, explicit, prefix, exclude });
+}
+
 function valueContext({ text, lines, line, position, parsed, entry, explicit, prefix, stack, lineIndent, exclude }) {
   const lineText = line.text;
   let valueFrom = line.start + parsed.restStart + entry.valueStart;
@@ -465,7 +547,10 @@ function keyOrItemContext({ text, lines, number, line, position, parsed, explici
   }
   const quoteOpen = rest[0] === '"' || rest[0] === "'";
   // The word before the caret is a plain key (or the start of a scalar item) or an unfinished quoted key; anything else (a sentence) is prose.
-  if (!quoteOpen && rest !== "" && !/^[A-Za-z0-9_.$+:-]+$/.test(rest)) return null;
+  if (!quoteOpen && rest !== "" && !/^[A-Za-z0-9_.$+:-]+$/.test(rest)) {
+    // A sentence that runs on from a scalar above: only a variable (`{{`) is completed in it.
+    return parsed.markers.length ? null : continuationContext({ text, line, position, before: lineText.slice(0, position - line.start), explicit });
+  }
   let seq = null;
   for (const col of parsed.markers) { seq = stack.seqAt(col); seq.items[seq.count - 1] = { open: true }; }
   const frame = stack.mapAt(parsed.restStart);

package/dist/styles.css

@@ -3639,6 +3639,13 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   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;
@@ -3700,6 +3707,26 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 .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; }
+.opf-hint-rows { display: flex; flex-direction: column; margin: 0; padding: 3px 0 0; list-style: none; }
+.opf-hint-row { display: grid; grid-template-columns: 8em minmax(0, 1fr) 5.5em; gap: 12px; align-items: baseline; padding: 1px 12px; }
+.opf-hint-key { font: 12px var(--opf-ui-mono); overflow-wrap: anywhere; }
+.opf-hint-description { color: var(--opf-ui-muted-fg); }
+.opf-hint-state { text-align: right; color: var(--opf-ui-muted-fg); font-size: 11.5px; }
+.opf-hint-row[data-state="set"] .opf-hint-state::before { content: "\2713\00a0"; }
+.opf-hint-row[data-state="next"] { background: color-mix(in srgb, var(--opf-ui-accent) 12%, transparent); box-shadow: inset 2px 0 0 var(--opf-ui-accent); }
+.opf-hint-row[data-state="next"] .opf-hint-key,
+.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; }
 
@@ -4007,6 +4034,208 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   .opf-present-button { transition: none; }
 }
 
+/* shortcuts.css */
+/* The keyboard shortcuts dialog (src/source-shortcuts.js). Only --opf-ui-* tokens, no color literals (test/styles.mjs). */
+.opf-shortcuts,
+.opf-shortcuts *,
+.opf-shortcuts *::before,
+.opf-shortcuts *::after { box-sizing: border-box; }
+.opf-shortcuts [hidden] { display: none !important; }
+.opf-shortcuts {
+  position: fixed;
+  inset: 0;
+  z-index: 70;
+  display: grid;
+  grid-template-columns: minmax(0, 640px);
+  justify-content: center;
+  align-content: center;
+  padding: 16px;
+  background: color-mix(in srgb, var(--opf-ui-fg) 32%, transparent);
+  font-family: var(--opf-ui-font);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--opf-ui-fg);
+}
+.opf-shortcuts .opf-shortcuts-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  max-height: min(720px, calc(100vh - 32px));
+  padding: 16px 18px 12px;
+  overflow: hidden;
+  background: var(--opf-ui-surface);
+  border: 1px solid var(--opf-ui-border);
+  border-radius: var(--opf-ui-radius-lg);
+  box-shadow: var(--opf-ui-shadow-pop);
+}
+.opf-shortcuts .opf-shortcuts-dialog:focus { outline: none; }
+.opf-shortcuts .opf-shortcuts-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.opf-shortcuts .opf-shortcuts-title { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
+.opf-shortcuts .opf-shortcuts-help { margin: 0; color: var(--opf-ui-muted-fg); }
+.opf-shortcuts .opf-shortcuts-close {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border: 0;
+  border-radius: var(--opf-ui-radius);
+  background: transparent;
+  color: var(--opf-ui-muted-fg);
+  font: inherit;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+}
+.opf-shortcuts .opf-shortcuts-close:hover { background: var(--opf-ui-muted); color: var(--opf-ui-fg); }
+.opf-shortcuts .opf-shortcuts-search {
+  width: 100%;
+  min-height: 34px;
+  padding: 4px 10px;
+  border: 1px solid var(--opf-ui-border);
+  border-radius: var(--opf-ui-radius-md);
+  background: var(--opf-ui-bg);
+  color: inherit;
+  font: inherit;
+}
+.opf-shortcuts button:focus-visible,
+.opf-shortcuts input:focus-visible,
+.opf-shortcuts .opf-shortcuts-list:focus-visible { outline: 2px solid var(--opf-ui-ring); outline-offset: 2px; }
+.opf-shortcuts .opf-shortcuts-status { min-height: 18px; color: var(--opf-ui-muted-fg); font-size: 12px; }
+.opf-shortcuts .opf-shortcuts-list { flex: 1; min-height: 120px; overflow: auto; padding-right: 4px; }
+.opf-shortcuts .opf-shortcuts-group { margin: 0 0 12px; }
+.opf-shortcuts .opf-shortcuts-group-title { margin: 8px 0 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--opf-ui-muted-fg); }
+.opf-shortcuts .opf-shortcuts-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 4px 0; border-bottom: 1px solid var(--opf-ui-border); }
+.opf-shortcuts .opf-shortcuts-name { min-width: 0; }
+.opf-shortcuts .opf-shortcuts-when { color: var(--opf-ui-muted-fg); font-size: 12px; }
+.opf-shortcuts .opf-shortcuts-keys { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; flex: none; max-width: 55%; }
+.opf-shortcuts .opf-shortcuts-or { color: var(--opf-ui-muted-fg); font-size: 11px; padding: 0 2px; align-self: center; }
+.opf-shortcuts .opf-shortcuts-key {
+  display: inline-block;
+  min-width: 22px;
+  padding: 1px 6px;
+  border: 1px solid var(--opf-ui-border-strong);
+  border-bottom-width: 2px;
+  border-radius: var(--opf-ui-radius-sm);
+  background: var(--opf-ui-muted);
+  font: 12px var(--opf-ui-mono);
+  text-align: center;
+  white-space: nowrap;
+}
+.opf-shortcuts .opf-shortcuts-none { color: var(--opf-ui-muted-fg); }
+@media (forced-colors: active) {
+  .opf-shortcuts .opf-shortcuts-dialog,
+  .opf-shortcuts .opf-shortcuts-key { border-color: CanvasText; }
+}
+
+/* The symbol picker (src/source-outline.js) */
+.opf-quickpick {
+  position: absolute;
+  top: 6px;
+  left: 50%;
+  z-index: 40;
+  width: min(480px, calc(100% - 24px));
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px;
+  background: var(--opf-ui-surface);
+  color: var(--opf-ui-fg);
+  border: 1px solid var(--opf-ui-border);
+  border-radius: var(--opf-ui-radius-lg);
+  box-shadow: var(--opf-ui-shadow-pop);
+  font: 13px var(--opf-ui-font);
+}
+.opf-quickpick-input { width: 100%; min-height: 30px; padding: 3px 8px; border: 1px solid var(--opf-ui-border); border-radius: var(--opf-ui-radius-md); background: var(--opf-ui-bg); color: inherit; font: inherit; }
+.opf-quickpick-input:focus-visible { outline: 2px solid var(--opf-ui-ring); outline-offset: 1px; }
+.opf-quickpick-list { margin: 0; padding: 2px 0 0; list-style: none; max-height: 280px; overflow: auto; }
+.opf-quickpick-item { display: flex; align-items: baseline; gap: 8px; min-height: 26px; padding: 3px 10px; border-radius: var(--opf-ui-radius-sm); cursor: pointer; }
+.opf-quickpick-item.is-selected { background: var(--opf-ui-accent); color: var(--opf-ui-accent-fg); }
+.opf-quickpick-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.opf-quickpick-detail { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; opacity: 0.75; }
+.opf-quickpick-kind { margin-left: auto; font-size: 11px; opacity: 0.75; flex: none; }
+.opf-quickpick-more { padding: 4px 10px; color: var(--opf-ui-muted-fg); font-size: 12px; }
+.opf-quickpick-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+@media (forced-colors: active) { .opf-quickpick-item.is-selected { outline: 2px solid Highlight; } }
+
+/* source-navigation.css */
+/*
+ * Go to definition, peek, references and rename (source-navigation.js): one block widget under the line of the symbol. Tokens only. The declaration is
+ * marked by a word, an arrow and a heavier line as well as by color, and nothing animates.
+ */
+.opf-sym {
+  box-sizing: border-box;
+  margin: 4px 0 6px 12px;
+  padding: 6px 10px 8px;
+  border: 1px solid var(--opf-ui-border-strong);
+  border-left: 3px solid var(--opf-ui-accent);
+  border-radius: var(--opf-ui-radius);
+  background: var(--opf-ui-surface);
+  color: var(--opf-ui-fg);
+  box-shadow: var(--opf-ui-shadow-pop);
+  font: 12px/1.45 var(--opf-ui-font);
+  text-align: start;
+  white-space: normal;
+  cursor: default;
+}
+.opf-sym:focus-visible,
+.opf-sym-list:focus-visible { outline: 2px solid var(--opf-ui-ring); outline-offset: 1px; }
+.opf-sym-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
+.opf-sym-title { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
+.opf-sym-where { color: var(--opf-ui-muted-fg); }
+.opf-sym-close {
+  flex: none;
+  min-height: 24px;
+  padding: 0 8px;
+  border: 1px solid var(--opf-ui-border);
+  border-radius: var(--opf-ui-radius-sm);
+  background: var(--opf-ui-muted-2);
+  color: var(--opf-ui-fg);
+  font: inherit;
+  cursor: pointer;
+}
+.opf-sym-close:hover { background: var(--opf-ui-muted); }
+.opf-sym-close:focus-visible,
+.opf-sym-input:focus-visible { outline: 2px solid var(--opf-ui-ring); outline-offset: 1px; }
+.opf-sym-lines, .opf-sym-list { margin: 6px 0 0; padding: 0; list-style: none; max-height: 260px; overflow: auto; }
+.opf-sym-line, .opf-sym-ref { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 1px 4px; border-radius: var(--opf-ui-radius-sm); }
+.opf-sym-no { flex: none; min-width: 3ch; color: var(--opf-ui-muted-fg); font-family: var(--opf-ui-mono); text-align: end; }
+.opf-sym-mark { flex: none; width: 1ch; color: var(--opf-ui-accent-strong); }
+.opf-sym-text { flex: 1 1 auto; min-width: 0; font-family: var(--opf-ui-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
+.opf-sym-line.is-target { background: var(--opf-ui-muted-2); font-weight: 600; }
+.opf-sym-ref { cursor: pointer; }
+.opf-sym-ref:hover { background: var(--opf-ui-muted-2); }
+.opf-sym-ref[aria-selected="true"] { background: var(--opf-ui-accent); color: var(--opf-ui-accent-fg); }
+.opf-sym-ref[aria-selected="true"] .opf-sym-no,
+.opf-sym-ref[aria-selected="true"] .opf-sym-badge { color: inherit; }
+.opf-sym-badge { flex: none; min-width: 6.5em; color: var(--opf-ui-muted-fg); font-size: 11px; }
+.opf-sym-ref.is-declaration .opf-sym-badge { font-weight: 600; }
+.opf-sym-hint { margin: 6px 0 0; color: var(--opf-ui-muted-fg); font-size: 11px; }
+.opf-sym-field { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
+.opf-sym-label { flex: none; color: var(--opf-ui-muted-fg); }
+.opf-sym-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: var(--opf-ui-control-h);
+  padding: 0 8px;
+  border: 1px solid var(--opf-ui-border-strong);
+  border-radius: var(--opf-ui-radius-sm);
+  background: var(--opf-ui-bg);
+  color: var(--opf-ui-fg);
+  font: 13px var(--opf-ui-mono);
+}
+.opf-sym-input[aria-invalid="true"] { border-color: var(--opf-ui-danger); }
+.opf-sym-message { min-height: 1.45em; margin-top: 4px; }
+.opf-sym-message.is-error { color: var(--opf-ui-danger); font-weight: 600; }
+.opf-sym-message.is-error::before { content: "Error: "; }
+.opf-sym-preview { margin-top: 6px; }
+.opf-sym-image { display: block; max-width: 100%; max-height: 160px; border: 1px solid var(--opf-ui-border); border-radius: var(--opf-ui-radius-sm); }
+@media (forced-colors: active) {
+  .opf-sym { border: 1px solid CanvasText; }
+  .opf-sym-ref[aria-selected="true"] { outline: 2px solid Highlight; }
+}
+
 /* source-pane.css */
 /* Source pane (RR-98). Only --opf-ui-* tokens (src/styles/tokens.css). */
 .opf-source {
@@ -4268,6 +4497,25 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   cursor: pointer;
 }
 .opf-source-finding-fix:hover { background: var(--opf-ui-muted); }
+.opf-source-finding-details {
+  min-height: 22px;
+  padding: 0 8px;
+  border: 1px solid transparent;
+  border-radius: var(--opf-ui-radius-sm);
+  background: transparent;
+  color: var(--opf-ui-muted-fg);
+  font-size: 12px;
+  text-decoration: underline;
+  cursor: pointer;
+}
+.opf-source-finding-details:hover { background: var(--opf-ui-muted); }
+.opf-source-finding-details[aria-expanded="true"] { text-decoration: none; background: var(--opf-ui-muted); }
+.opf-source-finding-explain { display: flex; flex-direction: column; gap: 4px; margin: 0 6px 6px 28px; padding: 6px 8px; border-left: 2px solid var(--opf-ui-border); color: var(--opf-ui-fg); font-size: 12px; }
+.opf-source-finding-explain[hidden] { display: none; }
+.opf-source-finding-explain-line { margin: 0; overflow-wrap: anywhere; }
+.opf-source-finding-explain-example { font: 11px var(--opf-ui-mono); overflow-wrap: anywhere; white-space: pre-wrap; }
+.opf-source-finding-explain-example code { padding: 1px 4px; border-radius: var(--opf-ui-radius-sm); background: var(--opf-ui-muted); }
+.opf-source-finding-explain-link { color: var(--opf-ui-muted-fg); }
 .opf-source-finding-more { padding: 3px 6px; color: var(--opf-ui-muted-fg); font-size: 12px; }
 
 .opf-source-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@@ -4300,6 +4548,46 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 .opf-source-confirm button:hover { background: var(--opf-ui-muted); }
 .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; }
+.opf-source-body > .opf-source-code { flex: 1; min-width: 0; }
+.opf-source-outline { flex: none; width: 220px; max-width: 40%; overflow: auto; border-right: 1px solid var(--opf-ui-code-border); padding: 4px 0; }
+.opf-source-outline-list { margin: 0; padding: 0; list-style: none; }
+.opf-source-outline-item { display: flex; align-items: baseline; gap: 6px; width: 100%; min-height: 26px; padding: 2px 8px; border: 0; background: transparent; color: var(--opf-ui-fg); text-align: left; font: inherit; cursor: pointer; }
+.opf-source-outline-item:hover { background: var(--opf-ui-muted); }
+.opf-source-outline-item:focus-visible { outline: 2px solid var(--opf-ui-ring); outline-offset: -2px; }
+.opf-source-outline-item[aria-current="true"] { background: var(--opf-ui-muted); font-weight: 600; }
+.opf-source-outline-item.is-section { color: var(--opf-ui-muted-fg); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
+.opf-source-outline-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.opf-source-outline-detail { margin-left: auto; flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--opf-ui-muted-fg); }
+.opf-source-outline-empty { padding: 8px 10px; color: var(--opf-ui-muted-fg); }
+@media (forced-colors: active) { .opf-source-outline-item[aria-current="true"] { outline: 1px solid Highlight; } }
+
+/* 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; }
+}
+
 /* thumbnails.css */
 /* Thumbnail strip (RR-98). Uses only --opf-ui-* tokens. */
 .opf-thumbs {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-editor",
-  "version": "0.26.4",
+  "version": "0.26.6",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",
@@ -231,6 +231,10 @@
       "types": "./dist/annotations.d.ts",
       "default": "./dist/annotations.js"
     },
+    "./source-worker": {
+      "types": "./dist/source-worker.d.ts",
+      "default": "./dist/source-worker.js"
+    },
     "./source-pane": {
       "types": "./dist/source-pane.d.ts",
       "default": "./dist/source-pane.js"
@@ -283,10 +287,10 @@
     "@lezer/highlight": "1.2.5",
     "jsonc-parser": "3.3.1",
     "yaml": "^2.9.1",
-    "@openpresentation/opf": "^0.26.4"
+    "@openpresentation/opf": "^0.26.6"
   },
   "peerDependencies": {
-    "@openpresentation/opf-render": "^0.26.4"
+    "@openpresentation/opf-render": "^0.26.6"
   },
   "peerDependenciesMeta": {
     "@openpresentation/opf-render": {
@@ -345,9 +349,9 @@
     "pdf-lib": "1.17.1",
     "pdfjs-dist": "6.4.299",
     "playwright": "1.64.0",
-    "@openpresentation/gallery": "0.26.4",
-    "@openpresentation/opf-pptx": "0.26.4",
-    "@openpresentation/opf-render": "0.26.4"
+    "@openpresentation/opf-pptx": "0.26.6",
+    "@openpresentation/opf-render": "0.26.6",
+    "@openpresentation/gallery": "0.26.6"
   },
   "scripts": {
     "build": "node scripts/build.mjs",
@@ -388,6 +392,7 @@
     "test:source-keyboard-json-browser": "node test/source-keyboard-json-browser.mjs",
     "test:source-keyboard-yaml-browser": "node test/source-keyboard-yaml-browser.mjs",
     "test:source-keyboard-markdown-browser": "node test/source-keyboard-markdown-browser.mjs",
+    "test:source-diagnostics-browser": "node test/source-diagnostics-browser.mjs",
     "test:layout-editor-browser": "node test/layout-editor-browser.mjs",
     "test:export-license-browser": "node test/export-license-browser.mjs",
     "test:chart-options-browser": "node test/chart-options-browser.mjs",
@@ -397,5 +402,5 @@
     "test:export-menu-browser": "node test/export-menu-browser.mjs",
     "test:agent-handoff-browser": "node test/agent-handoff-browser.mjs"
   },
-  "gitHead": "8809122a74a43aa99cdd383a856839ad6f018af6"
+  "gitHead": "66937576155a3c10ec86ee3327921b51f0c141ae"
 }