@openpresentation/opf-editor 0.24.1 → 0.24.2

package/README.md

@@ -104,6 +104,7 @@ const pane = createSourcePane(container, {
   onDownload: file => saveAs(file.filename, file.text), // default: a Blob link named <name>.opf.<ext>
   density: 'comfortable',       // 'touch' makes the controls 40px
   readOnly: false,
+  completions: true,            // live property and value suggestions while typing JSON (default true)
 });
 pane.setFormat('yaml'); pane.focusPath('/slides/1/title'); pane.getText(); pane.destroy();
 ```
@@ -113,7 +114,8 @@ Methods: `setFindings(list | null)`, `setFormat(format)`, `focusPath(pointer)` (
 - **JSON is canonical** and keeps the author's bytes: a YAML or Markdown edit rewrites only the changed JSON tokens (`exact-source`), and Undo restores the exact spelling.
 - **YAML and Markdown** are core's browser-safe converters, `@openpresentation/opf/yaml` and `/markdown`. Switching format writes the session's document in the new format. An edit parses back to the document and reaches the session as one `replace` patch, after a short delay (`applyDelay`, default 250 ms) so one burst of typing is one undo step. A syntax error, or an OPF rule the session refuses, is listed with its line and never reaches the document; Undo, Redo and outside edits replace a draft that did not parse.
 - **Nothing is lost silently.** Markdown writes what its dialect has no syntax for (a `design`, region keys, nested groups) as YAML in `opf-slide` and `opf-block` fences; each such part is a warning finding with its JSON Pointer and reason. Comments in YAML cannot survive a rewrite from the document: Format and outside edits drop them and say how many. A document that is not valid OPF cannot be written as YAML or Markdown; the pane stays in JSON and says so.
-- **Accessibility.** The format button (`aria-label="Source format"`) opens a `role="menu"` of `menuitemradio` items: Arrow keys, Home, End, Enter, Escape (focus returns to the button) and Tab. The file name is a button that becomes a text input; Enter or Escape commits. Controls show a 2px `--opf-ui-ring` focus outline.
+- **Completions.** In JSON the pane offers property names and values as you type (`completions: false` keeps the field menu only): the keys the schema allows at the cursor's object, and the enum, boolean and catalog values of the field, from the same data as the field menu (`getJsonCompletions` in `/json-options`, which reads drafts that do not parse yet). Enter accepts, Escape closes, and Ctrl+Space or Alt+ArrowDown still open the field menu. YAML and Markdown keep the menu only. `mountJsonCodeEditor` takes the same `completions` option, off by default there.
+- **Accessibility.** The editor's `aria-invalid` is `true` while the findings include an error and `false` otherwise. The format button (`aria-label="Source format"`) opens a `role="menu"` of `menuitemradio` items: Arrow keys, Home, End, Enter, Escape (focus returns to the button) and Tab. The file name is a button that becomes a text input; Enter or Escape commits. Controls show a 2px `--opf-ui-ring` focus outline.
 - **Styles.** `src/styles/source-pane.css` uses only `--opf-ui-*` tokens under the `opf-source-` prefix. It ships in the editor's `styles.css` (`@openpresentation/opf-editor/styles.css`), which also defines the tokens.
 - **Dependency.** `@codemirror/lang-yaml` (MIT) highlights YAML; Markdown uses a small stream tokenizer built on `@codemirror/language`, so no Markdown, HTML, CSS or JavaScript grammar is added.
 

package/dist/json-editor.d.ts

@@ -23,6 +23,8 @@ export interface JsonCodeEditorOptions {
   /** Highlighting and behavior: "json" (default) adds the parse linter, field highlights and the option menu. */
   language?: "json" | "yaml" | "markdown";
   readOnly?: boolean;
+  /** Live completion popup in JSON: property names and enum, boolean and catalog values at the cursor's JSON path, from the same data as the field menu (default false here; the source pane turns it on). Ctrl+Space still opens the field menu. */
+  completions?: boolean;
   catalogs?: JsonCatalogContext;
   /** Overrides the built-in menu, allowing an existing host UI to keep its appearance. */
   onOptions?(left?: number, top?: number): void;

package/dist/json-editor.js

@@ -4,7 +4,7 @@ import { defaultKeymap, history, historyKeymap, indentWithTab, isolateHistory, r
 import { HighlightStyle, StreamLanguage, bracketMatching, codeFolding, foldKeymap, indentOnInput, indentUnit, syntaxHighlighting } from "@codemirror/language";
 import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { yaml } from "@codemirror/lang-yaml";
-import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
+import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap, startCompletion } from "@codemirror/autocomplete";
 import { highlightSelectionMatches, search, searchKeymap } from "@codemirror/search";
 import { linter } from "@codemirror/lint";
 import { tags } from "@lezer/highlight";
@@ -65,10 +65,25 @@ const markdownLanguage = StreamLanguage.define({
     return null;
   }
 });
-function languageExtension(name) {
+function languageExtension(name, completions) {
   if (name === "yaml") return yaml();
   if (name === "markdown") return markdownLanguage;
-  return [json(), linter(jsonParseLinter(), { delay: 500 }), fieldDecorations];
+  return [json(), linter(jsonParseLinter(), { delay: 500 }), fieldDecorations, completions ?? []];
+}
+// The completion popup keeps CodeMirror's keys (arrows, Enter, Escape) but not Ctrl-Space, which opens the field menu.
+const completionKeys = Prec.highest(keymap.of(completionKeymap.filter((binding) => binding.run !== startCompletion)));
+// Accept a completion by rewriting its whole token (quotes included), so a string key, a bare word and a changed value type all land
+// as valid JSON. A key adds ": " when none follows and then offers the values of that key.
+function completionApply(found, option) {
+  return (view, completion, from, to) => {
+    const start = found.quoted ? from - 1 : from;
+    const end = found.closed ? to + 1 : to;
+    let insert = JSON.stringify(option.value);
+    const chain = found.kind === "key" && !/^\s*:/.test(view.state.sliceDoc(end, Math.min(view.state.doc.length, end + 200)));
+    if (chain) insert += ": ";
+    view.dispatch({ changes: { from: start, to: end, insert }, selection: { anchor: start + insert.length }, userEvent: "input.complete", scrollIntoView: true });
+    if (chain) setTimeout(() => startCompletion(view), 0);
+  };
 }
 function indentation(source) {
   const spaces = source.match(/^[\t ]+(?=\S)/gm) ?? [];
@@ -168,6 +183,20 @@ function mountJsonCodeEditor(parent, options) {
       menu=mountJsonFieldMenu(parent,api,catalogs,left,top,()=>{menu=null;});
     }catch(error){options.onError?.(error);}
   }
+  // Live completions (JSON only, `completions: true`): property names and values at the cursor's JSON path, from the same data as the
+  // field menu. The data loads with the field menu's chunk on first use.
+  async function completionSource(context) {
+    if (disposed || languageName !== "json") return null;
+    let module;
+    try { module = await import('./json-options.js'); } catch (error) { options.onError?.(error); return null; }
+    if (disposed || context.aborted) return null;
+    const found = module.getJsonCompletions(context.state.doc.toString(), context.pos, catalogs, { explicit: context.explicit });
+    if (!found) return null;
+    return { from: found.from, to: found.to, filter: true, options: found.options.map((option) => ({
+      label: option.label, detail: option.detail, info: option.info, boost: option.boost, type: found.kind === "key" ? "property" : "enum", apply: completionApply(found, option),
+    })) };
+  }
+  const completionExtension = options.completions ? [autocompletion({ override: [completionSource], defaultKeymap: false, icons: false, maxRenderedOptions: 60 }), completionKeys] : null;
   let currentIndent = indentation(options.code);
   const contentAttributes = (invalid = options.invalid, describedBy = options.describedBy) => EditorView.contentAttributes.of({
     "aria-label": options.label,
@@ -179,7 +208,7 @@ function mountJsonCodeEditor(parent, options) {
     autocorrect: "off"
   });
   const view = new EditorView({ parent, state: EditorState.create({ doc: options.code, extensions: [
-    language.of(languageExtension(languageName)),
+    language.of(languageExtension(languageName, completionExtension)),
     editable.of(editableExtension(options.readOnly)),
     jsonSource.init(()=>options.code),jsonSourceHistory,
     indent.of(indentUnit.of(currentIndent)),
@@ -300,7 +329,7 @@ function mountJsonCodeEditor(parent, options) {
     setLanguage(name){
       if(name===languageName)return;
       languageName=name;closeOptions();
-      view.dispatch({ effects: language.reconfigure(languageExtension(name)) });
+      view.dispatch({ effects: language.reconfigure(languageExtension(name, completionExtension)) });
     },
     setReadOnly(value){view.dispatch({ effects: editable.reconfigure(editableExtension(value)) });},
     /** The CodeMirror view, for hosts that scroll or measure it. */

package/dist/json-options.d.ts

@@ -31,3 +31,24 @@ export declare function getJsonFieldContext(source: string, position: number, lo
 export declare function replaceFieldOption(context: JsonFieldContext, value: JsonOptionValue): string;
 /** Minimal single replacement for atomic source-editor undo. */
 export declare function fieldOptionEdit(context: JsonFieldContext, value: JsonOptionValue): {from:number;to:number;insert:string};
+export interface JsonCompletionOption {
+  /** A key option's property name, or the JSON value to write. */
+  value: JsonOptionValue;
+  label: string;
+  detail?: string;
+  info?: string;
+  /** CodeMirror ranking, -99 to 99. */
+  boost: number;
+}
+export interface JsonCompletions {
+  kind: 'key' | 'value';
+  /** The text being typed: inside the quotes of a string, or the bare word. */
+  from: number;
+  to: number;
+  quoted: boolean;
+  /** Whether a closing quote follows the typed text. */
+  closed: boolean;
+  options: JsonCompletionOption[];
+}
+/** The property names and values to offer at `position` of a JSON draft (it need not parse); null when there are none. `explicit` also offers choices where nothing is typed yet. */
+export declare function getJsonCompletions(source: string, position: number, loadedCatalogs?: JsonCatalogContext, options?: { explicit?: boolean }): JsonCompletions | null;

package/dist/json-options.js

@@ -1,7 +1,7 @@
 import { checkFormat, firstErrorMessage } from "./checks.js";
 import { listCatalogRecords } from "./catalogs.js";
-import { schemaAtPath, schemaVariants } from "./schema.js";
-import { findNodeAtOffset, getNodePath, parseTree } from "jsonc-parser";
+import { resolveSchema, schemaAtPath, schemaVariants } from "./schema.js";
+import { findNodeAtOffset, getNodePath, parse as parseJsonc, parseTree } from "jsonc-parser";
 import { LAYOUT_INTENT_GROUPS, layoutRegionSummary } from "./layout-templates.js";
 // The catalog kind a field references (OPF 0.15: every content kind is `id` or `name:id`), read from where the field sits.
 const ROOT_REFERENCES = { narrative: "narratives", audience: "audiences", purpose: "purposes", tone: "tones" };
@@ -39,29 +39,9 @@ function describeOptions(choices, records, current, catalog) {
     const priority = option => option.source === "Document catalog" ? 2 : option.source === "Loaded catalog" ? 1 : 0;
     return choices.sort((a, b) => (catalog === "layouts" ? layoutGroups.indexOf(a.layoutGroup) - layoutGroups.indexOf(b.layoutGroup) : priority(b) - priority(a)) || a.label.localeCompare(b.label, "en", {numeric: true}) || String(a.value).localeCompare(String(b.value), "en"));
 }
-// The installed schema identifies fields; a document field merely named "layout"
-// inside arbitrary metadata is not mistaken for an OPF layout reference.
-export function getJsonFieldContext(source, position, loadedCatalogs = []) {
-    let presentation;
-    try {
-        presentation = JSON.parse(source);
-    }
-    catch {
-        return null;
-    }
-    const root = parseTree(source);
-    if (!root)
-        return null;
-    let node = findNodeAtOffset(root, position, true);
-    if (node?.parent?.type === "property" && node.parent.children?.[0] === node)
-        node = node.parent.children[1];
-    if (node?.type === "object")
-        node = node.children?.find(property => property.children?.[0]?.value === "id")?.children?.[1];
-    if (!node || !["string", "number", "boolean"].includes(node.type))
-        return null;
-    const path = getNodePath(node);
-    if (!path.length)
-        return null;
+// The choices a field offers, shared by the field menu and live completions: catalog records for a reference field (when the
+// value is a string), schema enum values and booleans otherwise.
+function fieldOptions(presentation, path, loadedCatalogs, { string, boolean }) {
     const schema = schemaAtPath(presentation, path.map(String));
     const variants = schemaVariants(schema);
     const catalog = catalogAtPath(path);
@@ -70,7 +50,7 @@ export function getJsonFieldContext(source, position, loadedCatalogs = []) {
     // A document group whose source no registered catalog matches: its records beyond the embedded ones are not available here.
     const registered = new Set((Array.isArray(loadedCatalogs) ? loadedCatalogs : []).map(entry => entry?.source));
     const unloadedSource = Boolean(catalog) && Object.entries(presentation.catalogs ?? {}).some(([name, group]) => name !== "custom" && group && typeof group === "object" && typeof group.source === "string" && !registered.has(group.source));
-    if (catalog && typeof node.value === "string") {
+    if (catalog && string) {
         const hostCatalogs = Array.isArray(loadedCatalogs) ? loadedCatalogs : [];
         // A draft whose own catalogs are malformed still offers the host's records; a malformed host list offers nothing.
         const attempt = (document) => { try { return listCatalogRecords(document, catalog, { catalogs: hostCatalogs }); } catch { return undefined; } };
@@ -87,11 +67,37 @@ export function getJsonFieldContext(source, position, loadedCatalogs = []) {
                 if (["string", "number", "boolean"].includes(typeof value))
                     options.set(JSON.stringify(value), { value, label: String(value), source: "Schema" });
             }
-        if (node.type === "boolean" && variants.some(variant => variant.type === "boolean" && variant.const === undefined)) {
+        if (boolean && variants.some(variant => variant.type === "boolean" && variant.const === undefined)) {
             for (const value of [true, false])
                 options.set(String(value), { value, label: String(value), source: "Schema" });
         }
     }
+    return { options, records, catalog, unloadedSource };
+}
+// The installed schema identifies fields; a document field merely named "layout"
+// inside arbitrary metadata is not mistaken for an OPF layout reference.
+export function getJsonFieldContext(source, position, loadedCatalogs = []) {
+    let presentation;
+    try {
+        presentation = JSON.parse(source);
+    }
+    catch {
+        return null;
+    }
+    const root = parseTree(source);
+    if (!root)
+        return null;
+    let node = findNodeAtOffset(root, position, true);
+    if (node?.parent?.type === "property" && node.parent.children?.[0] === node)
+        node = node.parent.children[1];
+    if (node?.type === "object")
+        node = node.children?.find(property => property.children?.[0]?.value === "id")?.children?.[1];
+    if (!node || !["string", "number", "boolean"].includes(node.type))
+        return null;
+    const path = getNodePath(node);
+    if (!path.length)
+        return null;
+    const { options, records, catalog, unloadedSource } = fieldOptions(presentation, path, loadedCatalogs, { string: typeof node.value === "string", boolean: node.type === "boolean" });
     if (!options.size)
         return null;
     const choices = [...options.values()];
@@ -122,3 +128,97 @@ export function fieldOptionEdit(context, value) {
     while (to > from && end > from && source[to - 1] === next[end - 1]) { to--; end--; }
     return {from, to, insert: next.slice(from, end)};
 }
+
+// ---- Live completions ----------------------------------------------------------------------------------------------------------
+// What the editor offers while you type: the property names the schema allows at the cursor's object, and the same enum, boolean and
+// catalog choices the field menu lists at a value. The draft is usually not valid JSON mid-keystroke, so the token under the cursor
+// is swapped for a placeholder string and the rest is read with the tolerant parser.
+const PLACEHOLDER = "__opf_completion__";
+const WORD = /[A-Za-z0-9_.-]/;
+// The token being typed: inside a string (a quote opened earlier on this line) or a bare word. JSON strings never span lines.
+function tokenAt(text, position, explicit) {
+    const lineStart = Math.max(text.lastIndexOf("\n", position - 1), text.lastIndexOf("\r", position - 1)) + 1;
+    let open = -1;
+    for (let index = lineStart; index < position; index++) {
+        if (open >= 0) { if (text[index] === "\\") index++; else if (text[index] === '"') open = -1; }
+        else if (text[index] === '"') open = index;
+    }
+    if (open >= 0) {
+        let close = -1;
+        for (let index = position; index < text.length && text[index] !== "\n" && text[index] !== "\r"; index++) {
+            if (text[index] === "\\") index++;
+            else if (text[index] === '"') { close = index; break; }
+        }
+        return { quoted: true, closed: close >= 0, start: open, end: close >= 0 ? close + 1 : position, from: open + 1, to: close >= 0 ? close : position };
+    }
+    let start = position, end = position;
+    while (start > lineStart && WORD.test(text[start - 1])) start--;
+    while (end < text.length && WORD.test(text[end])) end++;
+    if (start === position && !explicit) return null;
+    let before = start - 1;
+    while (before >= lineStart && /\s/.test(text[before])) before--;
+    // A bare word starts a key or a value only after `{`, `,`, `:` or `[` (or at the start of an empty line).
+    const previous = before >= lineStart ? text[before] : (text.slice(0, lineStart).trimEnd().at(-1) ?? "");
+    if (!["{", ",", ":", "["].includes(previous)) return null;
+    return { quoted: false, closed: false, start, end, from: start, to: end };
+}
+
+// Schema descriptions run to paragraphs; the popup shows the first sentence, at most 200 characters.
+function brief(text) {
+    if (typeof text !== "string" || !text.trim()) return undefined;
+    const flat = text.replace(/\s+/g, " ").trim();
+    const sentence = /^.*?[.!?](?=\s|$)/.exec(flat)?.[0] ?? flat;
+    return sentence.length <= 200 ? sentence : `${sentence.slice(0, 199).trimEnd()}…`;
+}
+
+/**
+ * The completions at `position` of a JSON draft (it need not parse): `{ kind: "key" | "value", from, to, quoted, closed, options }`,
+ * or null when nothing is offered. `from` and `to` bound the text being typed (inside the quotes of a string); each option is
+ * `{ value, label, detail?, info?, boost }`. A key option's `value` is the property name; a value option's is the JSON value.
+ * `explicit` also offers choices where nothing has been typed yet.
+ */
+export function getJsonCompletions(source, position, loadedCatalogs = [], { explicit = false } = {}) {
+    const token = tokenAt(source, position, explicit);
+    if (!token) return null;
+    const draft = source.slice(0, token.start) + JSON.stringify(PLACEHOLDER) + source.slice(token.end);
+    const root = parseTree(draft, [], { allowTrailingComma: true });
+    if (!root) return null;
+    const node = findNodeAtOffset(root, token.start + 1, true);
+    if (node?.type !== "string" || node.value !== PLACEHOLDER) return null;
+    const presentation = parseJsonc(draft, [], { allowTrailingComma: true });
+    if (presentation === null || typeof presentation !== "object" || Array.isArray(presentation)) return null;
+    const range = { from: token.from, to: token.to, quoted: token.quoted, closed: token.closed };
+    try {
+        if (node.parent?.type === "property" && node.parent.children?.[0] === node) {
+            const object = node.parent.parent;
+            const present = new Set((object?.children ?? []).filter(property => property !== node.parent).map(property => property.children?.[0]?.value));
+            const properties = new Map();
+            for (const variant of schemaVariants(schemaAtPath(presentation, getNodePath(object).map(String))))
+                for (const [key, child] of Object.entries(variant.properties ?? {}))
+                    if (!present.has(key) && !properties.has(key)) properties.set(key, { child, required: (variant.required ?? []).includes(key) });
+            if (!properties.size) return null;
+            const options = [...properties].map(([key, { child, required }], index) => {
+                const resolved = resolveSchema(child);
+                const type = Array.isArray(resolved.type) ? resolved.type.join(" | ") : resolved.type ?? (resolved.enum ? "enum" : resolved.oneOf || resolved.anyOf ? "choice" : "");
+                return { value: key, label: key, detail: type || undefined, info: brief(child.description ?? resolved.description), boost: Math.max(-99, (required ? 50 : 0) - index) };
+            });
+            return { kind: "key", ...range, options };
+        }
+        const path = getNodePath(node);
+        if (!path.length) return null;
+        const { options: found, records, catalog } = fieldOptions(presentation, path, loadedCatalogs, { string: true, boolean: true });
+        if (!found.size) return null;
+        const choices = describeOptions([...found.values()], records, undefined, catalog);
+        const options = choices.map((option, index) => ({
+            value: option.value,
+            label: String(option.value),
+            detail: String(option.label) !== String(option.value) ? String(option.label) : option.sourceLabel,
+            info: [brief(option.description), option.regions].filter(Boolean).join("\n") || undefined,
+            boost: Math.max(-99, 50 - index),
+        }));
+        return { kind: "value", ...range, options };
+    }
+    catch {
+        return null;
+    }
+}

package/dist/source-findings.js

@@ -0,0 +1,27 @@
+// Findings of the source pane (RR-98), kept apart from the DOM so they can be tested alone.
+
+/** Normalize one finding: core `Finding` objects, `{ path, message, severity, line? }` objects and plain strings. */
+export 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;
+}
+
+/** The text of the first problem an error reports. */
+export const errorText = (error) => error?.issues?.[0]?.message ?? error?.message ?? String(error);
+
+/**
+ * The findings for an edit the session refused: one per issue of the thrown error (its validator findings, each with its JSON pointer
+ * `path`), so the list has the validator's count. An error without issues becomes one finding with its message.
+ */
+export function rejectionFindings(error) {
+  const issues = Array.isArray(error?.issues) ? error.issues.filter((issue) => issue && (typeof issue === "string" || typeof issue === "object")) : [];
+  if (!issues.length) return [normalizeFinding({ message: errorText(error) }, "rejected")];
+  return issues.map((issue) => normalizeFinding(typeof issue === "string" ? issue : { ...issue, severity: issue.severity ?? "error", kind: undefined }, "rejected"));
+}

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);
 }
@@ -3087,7 +3130,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.2",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",