@openpresentation/opf-editor 0.27.0 → 0.28.0

package/dist/styles.css

@@ -19,7 +19,7 @@
   --opf-ui-border-strong: hsl(214 22% 72%);
   --opf-ui-ring: hsl(214 57% 28%);
   --opf-ui-danger: hsl(0 72% 45%);
-  --opf-ui-warn: hsl(28 75% 38%);
+  --opf-ui-warn: hsl(28 75% 30%);
   --opf-ui-success: hsl(152 76% 26%);
   --opf-ui-code-bg: hsl(220 30% 96%);
   --opf-ui-code-border: hsl(214 18% 84%);
@@ -90,7 +90,7 @@
   --opf-ui-border-strong: hsl(214 22% 72%);
   --opf-ui-ring: hsl(214 57% 28%);
   --opf-ui-danger: hsl(0 72% 45%);
-  --opf-ui-warn: hsl(28 75% 38%);
+  --opf-ui-warn: hsl(28 75% 30%);
   --opf-ui-success: hsl(152 76% 26%);
   --opf-ui-code-bg: hsl(220 30% 96%);
   --opf-ui-code-border: hsl(214 18% 84%);
@@ -3673,9 +3673,21 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   background: color-mix(in srgb, var(--opf-ui-accent) 8%, transparent);
 }
 
-:is(.opf-ui, .opf-json, .opf-code) .cm-selectionBackground,
-:is(.opf-ui, .opf-json, .opf-code) .cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground {
-  background: color-mix(in srgb, var(--opf-ui-accent) 20%, transparent);
+/* The selection is a layer behind the text, so the text keeps its own colors: the tint is light enough that every token color (test/selection-contrast-browser.mjs
+   measures each) keeps 4.5:1 against it, focused or not, in the light and the dark scheme. The focused rule of CodeMirror's base theme
+   (`&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground`, `#d7d4f0` for light and `#233` for dark) has five classes, so
+   the second selector has six and wins whichever stylesheet loads last; src/source-color-scheme.js flags the view dark so the rest of the base theme follows. */
+:is(.opf-ui, .opf-json, .opf-code) .cm-editor .cm-selectionLayer .cm-selectionBackground,
+:is(.opf-ui, .opf-json, .opf-code) .cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground {
+  background: color-mix(in srgb, var(--opf-ui-accent) 16%, transparent);
+}
+
+/* A selection that is not drawn by CodeMirror (the handoff prompt, the data grid's text areas, the numbering preview) uses the browser's own, and a browser's
+   default highlight is not made for our surfaces: the same tint, with the text color the surface already has, is 4.5:1 or better in both schemes. */
+:is(.opf-json, .opf-code, .opf-source-code, .opf-handoff-box, .opf-numbering-preview) ::selection,
+:is(.opf-handoff-prompt, .opf-numbering-preview, .opf-grid details textarea)::selection {
+  background: color-mix(in srgb, var(--opf-ui-accent) 16%, transparent);
+  color: var(--opf-ui-fg);
 }
 
 :is(.opf-ui, .opf-json, .opf-code) .cm-selectionMatch {
@@ -4518,8 +4530,7 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 .opf-source-code .cm-gutters { border: 0; background: transparent; color: color-mix(in srgb, var(--opf-ui-muted-fg) 60%, transparent); }
 .opf-source-code .cm-lineNumbers .cm-gutterElement { min-width: 30px; padding: 0 12px 0 0; text-align: right; font-size: 11px; }
 .opf-source-code .cm-activeLine { background: transparent; }
-.opf-source-code .cm-selectionBackground,
-.opf-source-code .cm-focused .cm-selectionBackground { background: color-mix(in srgb, var(--opf-ui-accent) 16%, transparent); }
+/* The selection color is the shared one in panels.css (JSON editor section). */
 .opf-source-code .cm-cursor { border-left-color: var(--opf-ui-fg); }
 .opf-source-code .tok-key { color: var(--opf-ui-accent-strong); }
 .opf-source-code .tok-str { color: var(--opf-ui-fg); }
@@ -4532,6 +4543,16 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 .opf-source-code .tok-comment { font-style: italic; }
 .opf-source-code .code-key.is-active { background: color-mix(in srgb, var(--opf-ui-accent) 10%, transparent); border-radius: var(--opf-ui-radius-sm); }
 .opf-source-code .cm-line.is-hover { background: color-mix(in srgb, var(--opf-ui-accent) 6%, transparent); }
+/* CE-17: decorations a host draws (setDecorations) and the flash of revealPath; the host styles any other kind as .opf-source-decoration-<kind>. */
+.opf-source-code .opf-source-decoration { background: color-mix(in srgb, var(--opf-ui-accent) 16%, transparent); border-radius: var(--opf-ui-radius-sm); }
+.opf-source-code .opf-source-decoration-error { background: color-mix(in srgb, var(--opf-ui-danger) 18%, transparent); }
+.opf-source-code .opf-source-decoration-warning { background: color-mix(in srgb, var(--opf-ui-warn) 20%, transparent); }
+.opf-source-code .opf-source-decoration-info { background: color-mix(in srgb, var(--opf-ui-accent) 10%, transparent); }
+.opf-source-code .opf-source-decoration-added { background: color-mix(in srgb, var(--opf-ui-success) 20%, transparent); }
+.opf-source-code .opf-source-decoration-changed { background: color-mix(in srgb, var(--opf-ui-warn) 14%, transparent); }
+.opf-source-code .cm-line.opf-source-flash { animation: opf-source-flash 1.2s ease-out; }
+@keyframes opf-source-flash { from { background: color-mix(in srgb, var(--opf-ui-accent) 32%, transparent); } to { background: transparent; } }
+@media (prefers-reduced-motion: reduce) { .opf-source-code .cm-line.opf-source-flash { animation: none; background: color-mix(in srgb, var(--opf-ui-accent) 20%, transparent); } }
 .opf-source-code .cm-panels { background: var(--opf-ui-surface); color: var(--opf-ui-fg); border-color: var(--opf-ui-border); }
 .opf-source-code .cm-tooltip { background: var(--opf-ui-surface); border: 1px solid var(--opf-ui-border); border-radius: var(--opf-ui-radius); color: var(--opf-ui-fg); }
 .opf-source-code .cm-lintRange-error { background-image: none; text-decoration: underline wavy var(--opf-ui-danger); }

package/dist/workspace.d.ts

@@ -11,7 +11,7 @@ import type { Presenter } from "./presenter.js";
 import type { ReviewFinding, ReviewHook } from "./review.js";
 import type { ReviewPanel, ReviewPanelOptions } from "./review-panel.js";
 import type { SlideManager } from "./slide-manager.js";
-import type { SourceFormat, SourceFile, SourcePane, SourcePaneOptions } from "./source-pane.js";
+import type { SourceCursor, SourceFormat, SourceFile, SourcePane, SourcePaneOptions } from "./source-pane.js";
 
 export type OpfEditorLayout = "full" | "canvas" | "source";
 export type OpfEditorView = "slide" | "sorter" | "outline" | "layouts";
@@ -77,6 +77,19 @@ export interface ThemeController {
 /** Apply a theme to the editor mounted in `root`. `createOpfEditor` does this for `options.theme` and `handle.setTheme`. */
 export declare function createThemeController(root: HTMLElement, theme?: OpfEditorTheme): ThemeController;
 
+/**
+ * The options for composing slide `slideIndex` of `deck` with the fonts handle `fonts`: its text measurement, made script-aware for this document
+ * (Japanese under Aptos measures with Noto Sans JP, where the plain strict measurement would throw). Pass the result to the session's
+ * `composeSlide` and `paginateSlide`, and the same `catalogs` the editor was given. Without a handle it is `{}`, and a handle without a
+ * measurement is passed through.
+ */
+export declare function layoutOptionsFor(
+  fonts: EditorFonts | undefined,
+  deck: unknown,
+  slideIndex: number,
+  catalogs?: readonly Catalog[],
+): { fonts?: EditorFonts };
+
 /** What a host's own acquire function returns: the handle and the way to give it back. */
 export interface OpfEditorFontsLease {
   fonts: EditorFonts;
@@ -168,6 +181,8 @@ export interface OpfEditorSourceOptions {
   checks?: { only?: readonly string[]; [key: string]: unknown };
   outline?: SourcePaneOptions["outline"];
   applyDelay?: number;
+  /** Milliseconds of quiet before a `cursor` event (default 50). */
+  cursorDelay?: number;
   completions?: boolean;
   label?: string;
   catalogs?: SourcePaneOptions["catalogs"];
@@ -240,6 +255,8 @@ export interface OpfEditorOptions {
 
   onChange?(detail: OpfEditorEvents["change"]): void;
   onSelection?(detail: OpfEditorEvents["selection"]): void;
+  /** The caret of the source pane moved to another place in the text. The same as `on: { cursor }`. */
+  onCursor?(detail: OpfEditorEvents["cursor"]): void;
   onError?(error: Error, detail: Omit<OpfEditorEvents["error"], "error">): void;
   onReady?(detail: OpfEditorEvents["ready"]): void;
   /** Listeners by event name; the same as calling `on` before anything happens. */
@@ -261,6 +278,12 @@ export interface OpfEditorEvents {
   /** The document changed (an edit in the canvas or the source, undo, redo, a loaded document). Not fired for a catalogs change. */
   change: { document: unknown; canUndo: boolean; canRedo: boolean; event: EditorEvent };
   selection: { path: string; value: unknown; slideIndex: number; element: Element | undefined };
+  /**
+   * The caret or selection of the source pane moved, in JSON, YAML or Markdown, also while the pane has no focus: the path under it as a JSON Pointer
+   * and by id, and the selection in source offsets. Quiet for `source.cursorDelay` first and not repeated for a place already reported; the detail is
+   * frozen. For the rest of the pane (`revealPath`, `setDecorations`, `getCursor`) use `editor.sourcePane`.
+   */
+  cursor: SourceCursor;
   /** The slide changed (0-based). */
   slide: { index: number; count: number };
   view: { view: OpfEditorView; previous: OpfEditorView };
@@ -333,6 +356,8 @@ export interface OpfEditor {
   readonly readOnly: boolean;
   /** False while the text in the source pane is not a valid deck: the slide shows the last valid one. */
   readonly inSync: boolean;
+  /** The latest `cursor` event, or `null` before the first (and without a source pane). The same object until the next event. */
+  readonly sourceCursor: SourceCursor | null;
   /** The latest verdict on the text of the source pane (what the last `source` event carried), or `null` before the first. */
   readonly sourceState: OpfEditorSourceState | null;
   readonly lastError: Error | undefined;

package/dist/workspace.js

@@ -36,6 +36,8 @@ import { retainedSlideIndex } from "./slide-retention.js";
 import { createSourceMemory, updateJsonSource } from "./exact-source.js";
 
 export { THEME_TOKENS, createThemeController, normalizeTheme, normalizeThemeTokens } from "./workspace-theme.js";
+// The script-aware measurement options for composing one slide: a host that calls `composeSlide` or `paginateSlide` on the session passes these (the playground does).
+export { layoutOptionsFor } from "./workspace-measure.js";
 
 const VIEWS = Object.freeze(["slide", "sorter", "outline", "layouts"]);
 const MUTATORS = new Set(["set", "setGroupComposition", "setCatalog", "setCatalogs", "applyPatch", "replaceDocument", "restoreState", "undo", "redo", "setComposition", "paginateSlide"]);
@@ -150,6 +152,7 @@ export function createOpfEditor(element, options = {}) {
   for (const [name, listener] of Object.entries(options.on ?? {})) on(name, listener);
   if (options.onChange) on("change", options.onChange);
   if (options.onSelection) on("selection", options.onSelection);
+  if (options.onCursor) on("cursor", options.onCursor);
   if (options.onError) on("error", ({ error, ...detail }) => options.onError(error, detail));
   if (options.onReady) on("ready", options.onReady);
 
@@ -220,6 +223,7 @@ export function createOpfEditor(element, options = {}) {
   let drafting = false;
   let openedText;
   let sourceState = null;
+  let sourceCursor = null;
   let fontsFailure;
   let refreshToken = 0;
   let lastRefresh = Promise.resolve();
@@ -538,6 +542,7 @@ export function createOpfEditor(element, options = {}) {
     return {
       ...(configured.outline !== undefined ? { outline: configured.outline } : {}),
       ...(configured.applyDelay !== undefined ? { applyDelay: configured.applyDelay } : {}),
+      ...(configured.cursorDelay !== undefined ? { cursorDelay: configured.cursorDelay } : {}),
       ...(configured.completions !== undefined ? { completions: configured.completions } : {}),
       ...(configured.catalogs !== undefined ? { catalogs: configured.catalogs } : {}),
       ...(configured.name !== undefined ? { name: configured.name } : {}),
@@ -553,6 +558,11 @@ export function createOpfEditor(element, options = {}) {
         configured.onRename?.(name);
         emit("rename", { name });
       },
+      // CE-17: the path under the caret of the source pane, as `cursor` events.
+      onCursor: (detail) => {
+        sourceCursor = Object.freeze(detail);
+        emit("cursor", sourceCursor);
+      },
       getFindings: ({ format, text: shown }) => {
         reportedText = shown;
         const made = reportSource(format, shown, { catalogs: catalogs(), checks: configured.checks ?? SOURCE_CHECKS });
@@ -1090,6 +1100,9 @@ export function createOpfEditor(element, options = {}) {
       return inSync;
     },
     /** The latest verdict on the text of the source pane (what the last `source` event carried), or `null` before the first. */
+    get sourceCursor() {
+      return sourceCursor;
+    },
     get sourceState() {
       return sourceState;
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-editor",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",
@@ -283,7 +283,7 @@
   "types": "./dist/index.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "@codemirror/autocomplete": "6.20.3",
+    "@codemirror/autocomplete": "6.20.4",
     "@codemirror/commands": "6.11.1",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-yaml": "6.1.3",
@@ -291,15 +291,15 @@
     "@codemirror/lint": "6.9.7",
     "@codemirror/search": "6.7.2",
     "@codemirror/state": "6.7.6",
-    "@codemirror/view": "6.43.14",
+    "@codemirror/view": "6.43.15",
     "@lezer/highlight": "1.2.5",
     "jsonc-parser": "3.3.1",
     "yaml": "^2.9.1",
-    "@openpresentation/opf": "^0.27.0"
+    "@openpresentation/opf": "^0.28.0"
   },
   "peerDependencies": {
     "react": ">=18",
-    "@openpresentation/opf-render": "^0.27.0"
+    "@openpresentation/opf-render": "^0.28.0"
   },
   "peerDependenciesMeta": {
     "@openpresentation/opf-render": {
@@ -360,14 +360,14 @@
     "jszip": "3.10.2",
     "pdf-lib": "1.17.1",
     "pdfjs-dist": "6.4.299",
-    "playwright": "1.64.0",
+    "playwright": "1.64.1",
     "react": "19.3.1",
     "react-dom": "19.3.1",
     "react-18": "npm:react@18.3.1",
     "react-dom-18": "npm:react-dom@18.3.1",
-    "@openpresentation/opf-pptx": "0.27.0",
-    "@openpresentation/gallery": "0.27.0",
-    "@openpresentation/opf-render": "0.27.0"
+    "@openpresentation/gallery": "0.28.0",
+    "@openpresentation/opf-pptx": "0.28.0",
+    "@openpresentation/opf-render": "0.28.0"
   },
   "scripts": {
     "build": "node scripts/build.mjs",
@@ -420,5 +420,5 @@
     "test:workspace-browser": "node test/workspace-browser.mjs",
     "test:workspace-react-browser": "node test/workspace-react-browser.mjs"
   },
-  "gitHead": "f90536d0e9a7a16b25aa718e03ced4e00a7316e1"
+  "gitHead": "abc56634a584db38a305a27edc3bc76b4116637b"
 }