@openpresentation/opf-editor 0.24.1 → 0.24.3

package/dist/source-pane.d.ts

@@ -59,6 +59,8 @@ export interface SourcePaneOptions {
   /** Accessible name of the code editor (default `OPF source`). */
   label?: string;
   catalogs?: JsonCatalogContext;
+  /** Live completions while typing JSON: property names and values (enums, booleans, catalog references) at the cursor's JSON path, from the same data as the field menu. YAML and Markdown keep the menu only. Default true. */
+  completions?: boolean;
   onError?(error: unknown): void;
 }
 

package/dist/source-pane.js

@@ -4,6 +4,7 @@ import { fromMarkdown, toMarkdown } from "@openpresentation/opf/markdown";
 import { mountJsonCodeEditor } from "./json-editor.js";
 import { createSourceMemory, findDuplicateKey, updateJsonSource } from "./exact-source.js";
 import { lineForPath, lineOfOffset, offsetOfLine } from "./source-lines.js";
+import { errorText, normalizeFinding, rejectionFindings as findingsOfError } from "./source-findings.js";
 
 // The source pane (RR-98): the OPF document as JSON, YAML or Markdown, with the file name, the format menu, Format, Copy
 // and Download, and the findings under the code. JSON is canonical and keeps its authored bytes (exact-source); YAML and
@@ -65,20 +66,6 @@ function same(a, b) {
 }
 const SEVERITY = { error: 0, warning: 1, info: 2 };
 const plural = (count, word) => `${count} ${word}${count === 1 ? "" : "s"}`;
-const errorText = (error) => error?.issues?.[0]?.message ?? error?.message ?? String(error);
-
-/** Normalize one finding: core `Finding` objects, `{ path, message, severity, line? }` objects and plain strings. */
-function normalizeFinding(input, kind) {
-  const finding = typeof input === "string" ? { message: input } : input ?? {};
-  const severity = finding.severity === "error" || finding.severity === "info" ? finding.severity : finding.severity === "warning" || finding.severity === "warn" ? "warning" : "error";
-  const out = { path: String(finding.path ?? ""), message: String(finding.message ?? ""), severity };
-  const line = finding.line ?? finding.location?.line;
-  if (Number.isInteger(line) && line > 0) out.line = line;
-  const own = finding.kind ?? kind;
-  if (own) out.kind = own;
-  if (finding.ruleId) out.ruleId = finding.ruleId;
-  return out;
-}
 
 const JSON_ERRORS = { InvalidSymbol: "Invalid symbol", InvalidNumberFormat: "Invalid number", PropertyNameExpected: "Property name expected", ValueExpected: "Value expected", ColonExpected: "Colon expected", CommaExpected: "Comma expected", CloseBraceExpected: "Closing brace expected", CloseBracketExpected: "Closing bracket expected", EndOfFileExpected: "End of file expected", InvalidCommentToken: "Comments are not allowed in JSON", UnexpectedEndOfComment: "Unexpected end of comment", UnexpectedEndOfString: "Unexpected end of string", UnexpectedEndOfNumber: "Unexpected end of number", InvalidUnicode: "Invalid unicode escape", InvalidEscapeCharacter: "Invalid escape character", InvalidCharacter: "Invalid character" };
 
@@ -137,6 +124,8 @@ export function createSourcePane(container, options = {}) {
   let collapsed = false;
   let copyTimer = null;
   let renderedKey = "";
+  // Whether the findings include an error, and what the editor's `aria-invalid` currently says (null: not yet set).
+  let invalid = false, shownInvalid = null;
   const lineCache = { key: "", values: new Map() };
 
   // ---- DOM ----------------------------------------------------------------------------------------------------------
@@ -232,6 +221,7 @@ export function createSourcePane(container, options = {}) {
     lineNumbers: true,
     language: formatOf(format).language,
     readOnly,
+    completions: options.completions !== false,
     catalogs: options.catalogs ?? editor.catalogs,
     describedBy: `${id}-findings`,
     onChange: () => schedule(),
@@ -275,7 +265,8 @@ export function createSourcePane(container, options = {}) {
         editor.applyPatch([{ op: "replace", path: "", value: read.deck }], { source: "source-pane", format });
       } catch (error) {
         dirty = true;
-        rejectionFindings = read.findings.length ? read.findings.map((finding) => ({ ...finding, kind: "rejected" })) : [normalizeFinding({ message: errorText(error), kind: "rejected" })];
+        // Every issue of the refusal is its own finding, with its path; a format's own findings stand in when the error names none.
+        rejectionFindings = error?.issues?.length || !read.findings.length ? findingsOfError(error) : read.findings.map((finding) => ({ ...finding, kind: "rejected" }));
         applying = false;
         renderFindings();
         return;
@@ -292,13 +283,16 @@ export function createSourcePane(container, options = {}) {
   function refreshNotes() {
     try { noteFindings = markdownNotes(toMarkdown(deck()).report); } catch { noteFindings = []; }
   }
+  /** `aria-invalid` follows the findings: set while any finding is an error (syntax, a refused draft, the session's or the host's), cleared with them. */
   function syncAttributes() {
-    control.update(control.api.getValue(), syntaxFindings.length > 0 || rejectionFindings.length > 0, null, `${id}-findings`);
+    shownInvalid = invalid;
+    control.update(control.api.getValue(), invalid, null, `${id}-findings`);
   }
 
   /** Show `value` as the text of the current format, as an external change. */
   function show(value) {
     baseline = value;
+    shownInvalid = false;
     control.update(value, false, null, `${id}-findings`);
   }
   function fromSession(notice) {
@@ -332,7 +326,7 @@ export function createSourcePane(container, options = {}) {
 
   const unsubscribe = editor.subscribe((event) => {
     if (destroyed) return;
-    if (event.type === "catalogs") { renderFindings(); return; }
+    if (event.type === "catalogs") { control.setCatalogs(options.catalogs ?? editor.catalogs); renderFindings(); return; }
     if (applying) return;
     version++;
     fromSession();
@@ -539,13 +533,19 @@ export function createSourcePane(container, options = {}) {
       catch (error) { options.onError?.(error); host = []; }
     } else if (hostFindings) host = hostFindings.map((finding) => normalizeFinding(finding));
     else host = sessionFindings();
+    // A finding repeated by an earlier group is dropped; repeats inside one group stay, so a refusal lists every issue the validator found.
     const seen = new Set();
-    const all = [...syntaxFindings, ...rejectionFindings, ...transientNotes, ...noteFindings, ...host].filter((finding) => {
-      const key = `${finding.severity}|${finding.path}|${finding.message}`;
-      if (seen.has(key)) return false;
-      seen.add(key);
-      return true;
-    });
+    const all = [];
+    for (const group of [syntaxFindings, rejectionFindings, transientNotes, noteFindings, host]) {
+      const keys = [];
+      for (const finding of group) {
+        const key = `${finding.severity}|${finding.path}|${finding.message}`;
+        if (seen.has(key)) continue;
+        keys.push(key);
+        all.push(finding);
+      }
+      for (const key of keys) seen.add(key);
+    }
     return all.map((finding, index) => ({ finding, index })).sort((a, b) => SEVERITY[a.finding.severity] - SEVERITY[b.finding.severity] || a.index - b.index).map((entry) => entry.finding);
   }
   function lineOf(finding) {
@@ -558,9 +558,14 @@ export function createSourcePane(container, options = {}) {
     return lineCache.values.get(cacheKey) ?? explicit ?? null;
   }
   function renderFindings() {
+    paintFindings();
+    if (!destroyed && invalid !== shownInvalid) syncAttributes();
+  }
+  function paintFindings() {
     if (destroyed) return;
     const all = collect();
     const rows = all.map((finding) => ({ finding, line: lineOf(finding) }));
+    invalid = rows.some((row) => row.finding.severity === "error");
     const key = JSON.stringify([format, collapsed, rows.map(({ finding, line }) => [finding.severity, finding.path, finding.message, finding.kind, line])]);
     if (key === renderedKey) return;
     renderedKey = key;

package/dist/styles.css

@@ -2807,6 +2807,49 @@
   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 .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-diagnostic-error {
   border-left-color: var(--opf-ui-danger);
 }
@@ -2938,6 +2981,163 @@
   }
 }
 
+/* presenter.css */
+/* RR-98: the presenter and the Present button (src/presenter.js). Only --opf-ui-* tokens, no color literals (test/styles.mjs). */
+
+/* ---- the presenter -------------------------------------------------------------------------------------------------------------------- */
+.opf-presenter,
+.opf-presenter *,
+.opf-presenter *::before,
+.opf-presenter *::after { box-sizing: border-box; }
+.opf-presenter[hidden] { display: none !important; }
+
+.opf-presenter {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  /* Slides are letterboxed on black in every theme, so the bars never take a token's light or dark value. */
+  background: black;
+  font-family: var(--opf-ui-font);
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--opf-ui-fg);
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none;
+  outline: none;
+}
+.opf-presenter[data-chrome="hidden"] { cursor: none; }
+
+.opf-presenter .opf-presenter-slide {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+/* The slide's own width and height attributes give its shape (viewBox); this makes it as large as the screen allows. */
+.opf-presenter .opf-presenter-slide svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+.opf-presenter .opf-presenter-message {
+  position: absolute;
+  margin: 0;
+  max-width: 40ch;
+  padding: 12px 16px;
+  border: 1px solid var(--opf-ui-border);
+  border-radius: var(--opf-ui-radius-md);
+  background: var(--opf-ui-surface);
+  color: var(--opf-ui-muted-fg);
+  text-align: center;
+  font: 400 13px/1.5 var(--opf-ui-font);
+}
+.opf-presenter .opf-presenter-message[hidden] { display: none; }
+.opf-presenter .opf-presenter-live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ---- the counter and the exit button (they appear on pointer move) ---------------------------------------------------------------------- */
+.opf-presenter .opf-presenter-counter,
+.opf-presenter .opf-presenter-close {
+  position: absolute;
+  background: var(--opf-ui-surface);
+  color: var(--opf-ui-muted-fg);
+  border: 1px solid var(--opf-ui-border);
+  opacity: 0;
+  transition: opacity var(--opf-ui-ease), color var(--opf-ui-ease), border-color var(--opf-ui-ease);
+}
+.opf-presenter[data-chrome="visible"] .opf-presenter-counter,
+.opf-presenter[data-chrome="visible"] .opf-presenter-close,
+.opf-presenter .opf-presenter-close:focus-visible { opacity: 1; }
+
+.opf-presenter .opf-presenter-counter {
+  bottom: 16px;
+  left: 0;
+  right: 0;
+  width: max-content;
+  margin: 0 auto;
+  padding: 4px 10px;
+  border-radius: var(--opf-ui-radius);
+  font: 500 11.5px/1.4 var(--opf-ui-mono);
+  letter-spacing: 0.04em;
+  pointer-events: none;
+}
+.opf-presenter .opf-presenter-close {
+  top: 16px;
+  right: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--opf-ui-control-h);
+  height: var(--opf-ui-control-h);
+  padding: 0;
+  margin: 0;
+  border-radius: var(--opf-ui-radius);
+  font: inherit;
+  cursor: pointer;
+}
+.opf-presenter .opf-presenter-close:hover { color: var(--opf-ui-fg); background: var(--opf-ui-muted); }
+.opf-presenter .opf-presenter-close:focus-visible {
+  outline: 2px solid var(--opf-ui-ring);
+  outline-offset: 2px;
+}
+.opf-presenter .opf-icon { flex: none; }
+
+/* ---- the Present button (styled like the Export trigger) ------------------------------------------------------------------------------- */
+.opf-present-button,
+.opf-present-button *,
+.opf-present-button *::before,
+.opf-present-button *::after { box-sizing: border-box; }
+.opf-present-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--opf-ui-control-h);
+  height: var(--opf-ui-control-h);
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--opf-ui-accent);
+  border-radius: var(--opf-ui-radius);
+  background: var(--opf-ui-accent);
+  color: var(--opf-ui-accent-fg);
+  font: inherit;
+  cursor: pointer;
+  transition: opacity var(--opf-ui-ease);
+}
+.opf-present-button:hover { opacity: 0.92; }
+.opf-present-button:focus-visible {
+  outline: 2px solid var(--opf-ui-ring);
+  outline-offset: 2px;
+}
+.opf-present-button[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.opf-present-button .opf-icon { flex: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  .opf-presenter .opf-presenter-counter,
+  .opf-presenter .opf-presenter-close,
+  .opf-present-button { transition: none; }
+}
+
 /* source-pane.css */
 /* Source pane (RR-98). Only --opf-ui-* tokens (src/styles/tokens.css). */
 .opf-source {
@@ -3087,7 +3287,8 @@
 
 /* Code */
 .opf-source-code { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; }
-.opf-source-code > .cm-editor { flex: 1; min-width: 0; height: 100%; background: transparent; color: var(--opf-ui-fg); }
+/* 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; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-editor",
-  "version": "0.24.1",
+  "version": "0.24.3",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",
@@ -230,6 +230,14 @@
       "types": "./dist/source-pane.d.ts",
       "default": "./dist/source-pane.js"
     },
+    "./presenter": {
+      "types": "./dist/presenter.d.ts",
+      "default": "./dist/presenter.js"
+    },
+    "./read-deck-file": {
+      "types": "./dist/read-deck-file.d.ts",
+      "default": "./dist/read-deck-file.js"
+    },
     "./export-menu": {
       "types": "./dist/export-menu.d.ts",
       "default": "./dist/export-menu.js"
@@ -270,7 +278,7 @@
     "check:font-hotlinks": "node --test scripts/check-font-hotlinks.test.mjs && node scripts/check-font-hotlinks.mjs",
     "check:font-hotlinks:built": "node scripts/check-font-hotlinks.mjs --built dist artifacts/playground",
     "build:playground": "node scripts/build-playground.mjs",
-    "test:playground": "npm run build:playground && npm run check:font-hotlinks:built && node test/playground-pptx.mjs && node test/playground-script-fonts.mjs artifacts/playground-script-fonts && node test/playground-lazy-fonts.mjs artifacts/playground-lazy-fonts && node test/playground-base-fonts.mjs artifacts/playground-base-fonts && node test/playground-source.mjs && node test/design-controls-browser.mjs && node test/design-gaps-browser.mjs && node test/chart-options-browser.mjs && node test/persistence-browser.mjs && node test/slides-browser.mjs && node test/slide-navigator-browser.mjs && node test/layout-templates-browser.mjs && node test/template-panel-browser.mjs && node test/numbering-panel-browser.mjs && node test/playground-ensure-fonts.mjs artifacts/playground-ensure-fonts && node test/canvas-fonts-browser.mjs artifacts/canvas-fonts && node test/find-replace-browser.mjs && node test/image-crop-browser.mjs && node test/mobile-browser.mjs && node test/review-panel-browser.mjs && node test/review-hook-browser.mjs && node test/source-pane-browser.mjs && node test/playground-download.mjs artifacts/playground-download && node test/export-menu-browser.mjs && node test/agent-handoff-browser.mjs",
+    "test:playground": "npm run build:playground && npm run check:font-hotlinks:built && node test/playground-pptx.mjs && node test/playground-script-fonts.mjs artifacts/playground-script-fonts && node test/playground-lazy-fonts.mjs artifacts/playground-lazy-fonts && node test/playground-base-fonts.mjs artifacts/playground-base-fonts && node test/playground-source.mjs && node test/design-controls-browser.mjs && node test/design-gaps-browser.mjs && node test/chart-options-browser.mjs && node test/persistence-browser.mjs && node test/slides-browser.mjs && node test/slide-navigator-browser.mjs && node test/layout-templates-browser.mjs && node test/template-panel-browser.mjs && node test/numbering-panel-browser.mjs && node test/playground-ensure-fonts.mjs artifacts/playground-ensure-fonts && node test/canvas-fonts-browser.mjs artifacts/canvas-fonts && node test/find-replace-browser.mjs && node test/image-crop-browser.mjs && node test/mobile-browser.mjs && node test/review-panel-browser.mjs && node test/review-hook-browser.mjs && node test/source-pane-browser.mjs && node test/playground-download.mjs artifacts/playground-download && node test/export-menu-browser.mjs && node test/agent-handoff-browser.mjs && node test/presenter-browser.mjs && node test/present-button-browser.mjs",
     "test:code-browser": "node test/code-browser.mjs",
     "test:selection-browser": "node test/selection-browser.mjs",
     "test:click-entry-browser": "node test/click-entry-browser.mjs",
@@ -297,6 +305,8 @@
     "test:export-license-browser": "node test/export-license-browser.mjs",
     "test:chart-options-browser": "node test/chart-options-browser.mjs",
     "test:numbering-panel-browser": "node test/numbering-panel-browser.mjs",
+    "test:presenter-browser": "node test/presenter-browser.mjs",
+    "test:present-button-browser": "node test/present-button-browser.mjs",
     "test:export-menu-browser": "node test/export-menu-browser.mjs",
     "test:agent-handoff-browser": "node test/agent-handoff-browser.mjs"
   },