@openpresentation/opf-editor 0.26.5 → 0.26.6

package/dist/source-shortcuts.js

@@ -0,0 +1,106 @@
+// The keyboard shortcuts dialog (artifacts/source-editor/SPEC.md, section 8.6): every binding the editor installed, grouped and searchable, with the keys
+// of the platform. The list is `getShortcuts()`, produced from the same table that installs the keymap (source-keymap.js), so it cannot drift from the keys.
+// Cmd/Ctrl+K Cmd/Ctrl+S, F1 or the "?" button of the source pane open it; Escape closes it and returns focus to the editor. A host that wants its own
+// dialog passes `onShowShortcuts(shortcuts)` and returns true. Plain DOM, loaded lazily.
+const FOCUSABLE = 'button, input, [tabindex]:not([tabindex="-1"])';
+let counter = 0;
+const open = new WeakMap();
+
+const element = (doc, tag, className, attributes = {}) => {
+  const node = doc.createElement(tag);
+  if (className) node.className = className;
+  for (const [key, value] of Object.entries(attributes)) node.setAttribute(key, value);
+  return node;
+};
+
+/** The words a search looks in: title, group, id and the keys with `+`, `-` and spaces folded to spaces. */
+const haystack = (row) => `${row.title} ${row.group} ${row.id} ${row.when ?? ""} ${row.keys.join(" ")}`.toLowerCase().replace(/[+-]/g, " ");
+export const matches = (row, query) => {
+  const words = query.toLowerCase().replace(/[+-]/g, " ").split(/\s+/).filter(Boolean);
+  const text = haystack(row);
+  return words.every((word) => text.includes(word));
+};
+
+/** Open the dialog for `view` (or close it when it is open). Returns true: the key was taken. */
+export function showShortcuts(view, context) {
+  const shortcuts = context.getShortcuts();
+  if (context.options.onShowShortcuts?.(shortcuts) === true) return true;
+  const existing = open.get(view);
+  if (existing) { existing.close(); return true; }
+  const doc = view.dom.ownerDocument;
+  const host = view.dom.closest(".opf-ui") ?? doc.body;
+  const opener = doc.activeElement;
+  const id = `opf-shortcuts-${++counter}`;
+  const root = element(doc, "div", `opf-shortcuts${host === doc.body ? " opf-ui" : ""}`);
+  const dialog = element(doc, "div", "opf-shortcuts-dialog", { role: "dialog", "aria-modal": "true", "aria-labelledby": `${id}-title`, "aria-describedby": `${id}-help`, tabindex: "-1" });
+  const head = element(doc, "div", "opf-shortcuts-head");
+  const title = Object.assign(element(doc, "h2", "opf-shortcuts-title", { id: `${id}-title` }), { textContent: "Keyboard shortcuts" });
+  const closeButton = Object.assign(element(doc, "button", "opf-shortcuts-close", { type: "button", "aria-label": "Close the keyboard shortcuts" }), { textContent: "×" });
+  head.append(title, closeButton);
+  const help = Object.assign(element(doc, "p", "opf-shortcuts-help", { id: `${id}-help` }), { textContent: `Keys for ${context.platform === "mac" ? "macOS" : context.platform === "win" ? "Windows" : "Linux"}. Type to search by name or key; Escape closes.` });
+  const search = element(doc, "input", "opf-shortcuts-search", { type: "search", "aria-label": "Search the keyboard shortcuts", placeholder: "Search shortcuts", autocomplete: "off", spellcheck: "false" });
+  const status = element(doc, "div", "opf-shortcuts-status", { role: "status", "aria-live": "polite" });
+  const list = element(doc, "div", "opf-shortcuts-list", { tabindex: "0", role: "region", "aria-label": "Shortcuts" });
+  dialog.append(head, help, search, status, list);
+  root.append(dialog);
+  host.append(root);
+
+  const plural = (count) => `${count} ${count === 1 ? "shortcut" : "shortcuts"}`;
+  function render() {
+    const rows = shortcuts.filter((row) => matches(row, search.value));
+    list.replaceChildren();
+    let group = null, section = null;
+    for (const row of rows) {
+      if (row.group !== group) {
+        group = row.group;
+        section = element(doc, "section", "opf-shortcuts-group", { "aria-label": group });
+        section.append(Object.assign(element(doc, "h3", "opf-shortcuts-group-title"), { textContent: group }));
+        list.append(section);
+      }
+      const item = element(doc, "div", "opf-shortcuts-row", { "data-id": row.id });
+      const name = element(doc, "span", "opf-shortcuts-name");
+      name.append(document.createTextNode(row.title));
+      if (row.when) name.append(Object.assign(element(doc, "span", "opf-shortcuts-when"), { textContent: ` (${row.when})` }));
+      const keys = element(doc, "span", "opf-shortcuts-keys");
+      row.keys.forEach((keyText, index) => {
+        if (index) keys.append(Object.assign(element(doc, "span", "opf-shortcuts-or"), { textContent: "or" }));
+        for (const stroke of keyText.split(" ")) keys.append(Object.assign(element(doc, "kbd", "opf-shortcuts-key"), { textContent: stroke }));
+      });
+      item.append(name, keys);
+      section.append(item);
+    }
+    if (!rows.length) list.append(Object.assign(element(doc, "p", "opf-shortcuts-none"), { textContent: "No shortcut matches." }));
+    status.textContent = search.value ? `${plural(rows.length)} match` : plural(rows.length);
+  }
+
+  function focusables() { return [...dialog.querySelectorAll(FOCUSABLE)].filter((node) => node.getClientRects().length); }
+  function onKeydown(event) {
+    if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); close(); return; }
+    if (event.key !== "Tab") return;
+    const nodes = focusables();
+    if (!nodes.length) { event.preventDefault(); dialog.focus(); return; }
+    const first = nodes[0], last = nodes.at(-1), active = doc.activeElement;
+    if (event.shiftKey && (active === first || active === dialog)) { event.preventDefault(); last.focus(); }
+    else if (!event.shiftKey && active === last) { event.preventDefault(); first.focus(); }
+    else if (!dialog.contains(active)) { event.preventDefault(); first.focus(); }
+  }
+  function onFocusin(event) { if (!dialog.contains(event.target)) (focusables()[0] ?? dialog).focus(); }
+  function close() {
+    if (!open.has(view)) return;
+    open.delete(view);
+    doc.removeEventListener("focusin", onFocusin, true);
+    root.remove();
+    if (view.dom.isConnected) view.focus(); else if (opener?.isConnected) opener.focus();
+    context.say("Keyboard shortcuts closed");
+  }
+  open.set(view, { close });
+  root.addEventListener("keydown", onKeydown);
+  root.addEventListener("pointerdown", (event) => { if (event.target === root) close(); });
+  closeButton.addEventListener("click", close);
+  search.addEventListener("input", render);
+  doc.addEventListener("focusin", onFocusin, true);
+  render();
+  search.focus();
+  context.say(`Keyboard shortcuts, ${plural(shortcuts.length)}. Type to search, Escape to close.`);
+  return true;
+}

package/dist/source-symbols.js

@@ -0,0 +1,156 @@
+// The outline of an OPF document (artifacts/source-editor/SPEC.md, section 8.4): the symbols the picker (Cmd/Ctrl+Shift+O) and the outline panel list, for
+// JSON, YAML and Markdown, read from text that may be broken. A symbol is `{ id, kind, label, detail, depth, from, to, line }` with source offsets:
+// the slides in order ("3. Highlights"), the top-level sections (design, organization, speaker), the assets, datasets, variables and references the
+// document declares, and the catalog records it embeds. Plain functions, no DOM.
+import { parseTree } from "jsonc-parser";
+import { isMap, parseDocument } from "yaml";
+import { scanMarkdown } from "@openpresentation/opf/source";
+
+const SECTIONS = ["design", "organization", "speaker"];
+const DECLARED = [["assets", "asset"], ["datasets", "dataset"], ["variables", "variable"]];
+const CATALOG_KINDS = { layouts: "layout", themes: "theme", colorSchemes: "color scheme", fontSchemes: "font scheme", narratives: "narrative", audiences: "audience", purposes: "purpose", tones: "tone" };
+
+// ---- one tree for the three readers ------------------------------------------------------------------------------------------------------
+// `{ type: "object" | "array" | "scalar", value?, from, to, entries?: [{ key, from, to, node }], items?: [node] }`, offsets in the text.
+function fromJson(text) {
+  const root = parseTree(text, [], { allowTrailingComma: true, disallowComments: false });
+  const convert = (node) => {
+    if (!node) return null;
+    const base = { from: node.offset, to: node.offset + node.length };
+    if (node.type === "object") return { ...base, type: "object", entries: (node.children ?? []).filter((property) => property.children?.[0]).map((property) => ({ key: String(property.children[0].value), from: property.offset, to: property.offset + property.length, node: convert(property.children[1]) })) };
+    if (node.type === "array") return { ...base, type: "array", items: (node.children ?? []).map(convert) };
+    return { ...base, type: "scalar", value: node.value };
+  };
+  return convert(root);
+}
+
+function fromYamlNode(node, shift = 0) {
+  if (!node) return null;
+  const range = node.range ?? [0, 0, 0];
+  const base = { from: range[0] + shift, to: range[1] + shift };
+  if (isMap(node)) {
+    return { ...base, type: "object", entries: node.items.filter((pair) => pair.key).map((pair) => ({ key: String(pair.key.value ?? pair.key), from: (pair.key.range?.[0] ?? range[0]) + shift, to: (pair.value?.range?.[1] ?? pair.key.range?.[1] ?? range[1]) + shift, node: fromYamlNode(pair.value, shift) })) };
+  }
+  if (node.items) return { ...base, type: "array", items: node.items.map((item) => fromYamlNode(item, shift)) };
+  return { ...base, type: "scalar", value: node.value };
+}
+function fromYaml(text, shift = 0) {
+  try { return fromYamlNode(parseDocument(text, { strict: false, uniqueKeys: false }).contents, shift); } catch { return null; }
+}
+
+const lineStarts = (text) => { const starts = [0]; for (let i = 0; i < text.length; i++) if (text[i] === "\n") starts.push(i + 1); return starts; };
+const lineOf = (starts, offset) => { let low = 0, high = starts.length - 1; while (low < high) { const mid = (low + high + 1) >> 1; if (starts[mid] <= offset) low = mid; else high = mid - 1; } return low + 1; };
+
+// ---- helpers -----------------------------------------------------------------------------------------------------------------------------
+const entry = (node, key) => (node?.type === "object" ? node.entries.find((candidate) => candidate.key === key) : undefined);
+const scalar = (node) => (node?.type === "scalar" && typeof node.value === "string" ? node.value : undefined);
+/** A title as text: a string, or the text of a list of runs. */
+function titleOf(node) {
+  if (!node) return "";
+  if (node.type === "scalar") return typeof node.value === "string" ? node.value : "";
+  if (node.type === "array") return node.items.map((item) => (item?.type === "scalar" ? String(item.value ?? "") : titleOf(entry(item, "text")?.node))).join("");
+  return "";
+}
+const clip = (text, max = 80) => { const flat = text.replace(/\s+/g, " ").trim(); return flat.length > max ? `${flat.slice(0, max - 1)}…` : flat; };
+
+function symbolsOfTree(root, starts, { slides = true } = {}) {
+  const out = [];
+  const add = (kind, label, detail, depth, from, to) => out.push({ id: `${kind}:${out.length}`, kind, label, detail, depth, from, to, line: lineOf(starts, from) });
+  if (root?.type !== "object") return out;
+  if (slides) {
+    const list = entry(root, "slides")?.node;
+    if (list?.type === "array") {
+      list.items.forEach((item, index) => {
+        if (!item) return;
+        const title = clip(titleOf(entry(item, "title")?.node));
+        const layout = scalar(entry(item, "layout")?.node), type = scalar(entry(item, "type")?.node);
+        add("slide", `${index + 1}. ${title || "Untitled slide"}`, [layout && `layout ${layout}`, !layout && type].filter(Boolean).join(" "), 0, item.from, item.to);
+      });
+    }
+  }
+  for (const key of SECTIONS) {
+    const found = entry(root, key);
+    if (found?.node?.type === "object") add("section", key, "", 0, found.from, found.to);
+  }
+  for (const [key, kind] of DECLARED) {
+    const found = entry(root, key);
+    if (found?.node?.type !== "object" || !found.node.entries.length) continue;
+    add("section", key, `${found.node.entries.length}`, 0, found.from, found.to);
+    for (const child of found.node.entries) add(kind, child.key, kind === "dataset" ? scalar(entry(child.node, "title")?.node) ?? "" : "", 1, child.from, child.to);
+  }
+  const references = entry(root, "references")?.node;
+  if (references?.type === "array" && references.items.length) {
+    add("section", "references", `${references.items.length}`, 0, entry(root, "references").from, entry(root, "references").to);
+    for (const item of references.items) { const id = scalar(entry(item, "id")?.node); if (id && item) add("reference", id, clip(scalar(entry(item, "text")?.node) ?? "", 50), 1, item.from, item.to); }
+  }
+  const catalogs = entry(root, "catalogs");
+  if (catalogs?.node?.type === "object") {
+    for (const group of catalogs.node.entries) {
+      if (group.node?.type !== "object") continue;
+      for (const [kindKey, kindLabel] of Object.entries(CATALOG_KINDS)) {
+        const records = entry(group.node, kindKey)?.node;
+        if (records?.type === "object") for (const record of records.entries) add("record", `${kindLabel} ${record.key}`, group.key === "custom" ? "this document" : group.key, 0, record.from, record.to);
+        else if (records?.type === "array") for (const record of records.items) { const id = scalar(entry(record, "id")?.node); if (id && record) add("record", `${kindLabel} ${id}`, group.key === "custom" ? "this document" : group.key, 0, record.from, record.to); }
+      }
+    }
+  }
+  // Slides first, as the document reads: sort the rest by position inside their kind order is not needed; the list keeps slides, then the sections in
+  // the order of the text so the picker's order is the document's order.
+  return out.sort((a, b) => a.from - b.from).map((symbol, index) => ({ ...symbol, id: `${symbol.kind}:${index}` }));
+}
+
+// ---- Markdown ----------------------------------------------------------------------------------------------------------------------------
+function markdownSymbols(text, starts) {
+  const scan = scanMarkdown(text);
+  const out = [];
+  if (scan.frontMatter?.closed) {
+    const tree = fromYaml(text.slice(scan.frontMatter.yamlFrom, scan.frontMatter.yamlTo), scan.frontMatter.yamlFrom);
+    out.push(...symbolsOfTree(tree, starts, { slides: false }));
+  }
+  const skipped = [...scan.fences, ...scan.comments].map((range) => [range.from, range.to]);
+  for (const slide of scan.slides) {
+    let title = "", layout;
+    const slideComment = scan.comments.find((comment) => comment.kind === "slide" && comment.slide === slide.index);
+    if (slideComment) layout = /\blayout=("?)([A-Za-z0-9_:-]+)\1/.exec(text.slice(slideComment.innerFrom, slideComment.innerTo))?.[2];
+    const body = text.slice(slide.from, slide.to);
+    let offset = 0;
+    for (const line of body.split("\n")) {
+      const at = slide.from + offset;
+      offset += line.length + 1;
+      if (skipped.some(([from, to]) => at >= from && at < to)) continue;
+      const heading = /^#\s+(.*?)\s*#*\s*$/.exec(line);
+      if (heading) { title = heading[1].replace(/[*_`[\]]/g, ""); break; }
+    }
+    out.push({ id: "", kind: "slide", label: `${slide.index + 1}. ${clip(title) || "Untitled slide"}`, detail: layout ? `layout ${layout}` : "", depth: 0, from: slide.from, to: slide.to, line: slide.line });
+  }
+  return out.sort((a, b) => a.from - b.from).map((symbol, index) => ({ ...symbol, id: `${symbol.kind}:${index}` }));
+}
+
+/** The symbols of `text` in `format` ("json", "yaml" or "md"), in document order. Never throws. */
+export function documentSymbols(format, text) {
+  try {
+    const starts = lineStarts(text);
+    const symbols = format === "md" ? markdownSymbols(text, starts) : symbolsOfTree(format === "yaml" ? fromYaml(text) : fromJson(text), starts);
+    // A YAML block ends with its line break: the range of a symbol stops at its last visible character.
+    return symbols.map((symbol) => { let to = Math.min(symbol.to, text.length); while (to > symbol.from + 1 && /\s/.test(text[to - 1])) to--; return { ...symbol, to }; });
+  } catch { return []; }
+}
+
+/** The innermost symbol that contains `offset` (the slide the caret is in), or null. */
+export function symbolAt(symbols, offset) {
+  let found = null;
+  for (const symbol of symbols) if (symbol.from <= offset && offset <= symbol.to && (!found || symbol.to - symbol.from <= found.to - found.from)) found = symbol;
+  return found;
+}
+
+/** The symbols that match what was typed: every word is in the label, detail or kind; failing that, the letters in order (a fuzzy match). */
+export function filterSymbols(symbols, query) {
+  const words = query.toLowerCase().split(/\s+/).filter(Boolean);
+  if (!words.length) return symbols;
+  const text = (symbol) => `${symbol.label} ${symbol.detail} ${symbol.kind}`.toLowerCase();
+  const exact = symbols.filter((symbol) => words.every((word) => text(symbol).includes(word)));
+  if (exact.length) return exact;
+  const letters = words.join("");
+  return symbols.filter((symbol) => { let at = 0; for (const character of text(symbol)) if (character === letters[at]) at++; return at === letters.length; });
+}
+

package/dist/source-worker.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The worker script of the source pane's text checks. It exports nothing: bundle it as a module worker script and pass the worker to
+ * `createSourcePane(container, { worker })`, for example
+ * `worker: () => new Worker(new URL("@openpresentation/opf-editor/source-worker", import.meta.url), { type: "module" })`
+ * with a bundler that supports that form, or build `dist/source-worker.js` as its own entry point and serve it next to the page.
+ */
+export {};

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/styles.css

@@ -3707,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; }
 
@@ -4014,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 {
@@ -4326,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.5",
+  "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.5"
+    "@openpresentation/opf": "^0.26.6"
   },
   "peerDependencies": {
-    "@openpresentation/opf-render": "^0.26.5"
+    "@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.5",
-    "@openpresentation/opf-render": "0.26.5",
-    "@openpresentation/opf-pptx": "0.26.5"
+    "@openpresentation/opf-pptx": "0.26.6",
+    "@openpresentation/opf-render": "0.26.6",
+    "@openpresentation/gallery": "0.26.6"
   },
   "scripts": {
     "build": "node scripts/build.mjs",
@@ -398,5 +402,5 @@
     "test:export-menu-browser": "node test/export-menu-browser.mjs",
     "test:agent-handoff-browser": "node test/agent-handoff-browser.mjs"
   },
-  "gitHead": "750d120e715b6c4930906aa71322d092d057c58d"
+  "gitHead": "66937576155a3c10ec86ee3327921b51f0c141ae"
 }