@openpresentation/opf-editor 0.26.6 → 0.26.7

package/dist/json-editor.js

@@ -17,6 +17,7 @@ import { forEachDiagnostic } from "@codemirror/lint";
 import {createDiagnostics,editsTransaction} from './source-diagnostics.js';
 import { createKeymap, domKeymap, strokeText } from './source-keymap.js';
 import { fold, foldEverything, foldGutterExtension, foldLevel, foldRecursively, toggleFoldHere, unfold, unfoldEverything, unfoldRecursively } from './source-folding.js';
+import { hangingIndent } from './source-wrap.js';
 import {languageDataFor,markdownBackspace,markdownEnter,markdownFolding,markdownTab,markdownToggleComment,markdownWrapSelection,yamlEnter} from './source-editing.js';
 const external = Annotation.define();
 const hoverField = StateEffect.define();
@@ -551,6 +552,7 @@ function mountJsonCodeEditor(parent, options) {
     attributes.of(contentAttributes()),
     options.lineNumbers ? lineNumbers() : [],
     EditorView.lineWrapping,
+    hangingIndent,
     keydownKeys,
     mainKeymap,
     EditorView.domEventHandlers({

package/dist/layout-editor.js

@@ -140,9 +140,13 @@ export function createLayoutEditor(container, options = {}) {
   paint();
 
   // The container's width decides the layout: wide shows the palette, canvas and side panels; narrow stacks them with tabs.
-  const measure = () => { root.dataset.compact = String((container.clientWidth || root.clientWidth || COMPACT_WIDTH) < COMPACT_WIDTH); };
+  const measure = () => {
+    const compact = String((container.clientWidth || root.clientWidth || COMPACT_WIDTH) < COMPACT_WIDTH);
+    if (root.dataset.compact !== compact) root.dataset.compact = compact;
+  };
+  // The switch changes the editor's own height, so a host whose height follows it would loop inside the observer: the change is made a frame later.
   let observer = null;
-  if (typeof win.ResizeObserver === "function") { observer = new win.ResizeObserver(measure); observer.observe(container); }
+  if (typeof win.ResizeObserver === "function") { observer = new win.ResizeObserver(() => win.requestAnimationFrame(measure)); observer.observe(container); }
   measure();
 
   root.addEventListener("keydown", (event) => { handleGlobalShortcut(event, model); });

package/dist/source-pane.js

@@ -403,8 +403,9 @@ export function createSourcePane(container, options = {}) {
       if (token !== syntaxToken) return;
       syntaxBusy = false;
       showBusy();
-      // The applied text has its findings already (and they are the final ones).
-      if (found === null || destroyed || format !== "json" || control.api.getValue() !== text || text === baseline) return;
+      // A null answer means the worker dropped the request. The text may equal the applied one: a quick fix and Undo bring the broken text
+      // back while `baseline` still holds it, and its syntax problem must show again at once (checkSyntax has no such guard either).
+      if (found === null || destroyed || format !== "json" || control.api.getValue() !== text) return;
       showSyntax(found);
     }, () => {
       if (token !== syntaxToken) return;

package/dist/source-wrap.js

@@ -0,0 +1,55 @@
+import { RangeSetBuilder, countColumn } from "@codemirror/state";
+import { Decoration, ViewPlugin } from "@codemirror/view";
+
+// A wrapped line continues under its own indentation, as VS Code's `wrappingIndent: "indent"` does (JSON, YAML and Markdown).
+// Each line carries a class `opf-hang-<n>`; the stylesheet (panels.css) turns n columns into a left padding and the same negative
+// text-indent, so the first line starts where it always did and every continuation line starts n columns in. n is the line's leading
+// whitespace (a tab counts as the editor's tab size) plus the width of a list marker ("- ", "1. ") when the line starts one, so wrapped
+// list items line up under their text, or plus two columns (one indent step) for any other line, so a continuation never looks like a new line.
+
+/** The most columns a line can hang. The stylesheet defines `opf-hang-0` through `opf-hang-${MAX_HANG}`, and caps the indent at 40% of the line. */
+export const MAX_HANG = 32;
+const LIST_MARKER = /^([-*+]|\d{1,9}[.)])[ \t]+/;
+const OFFSET = 2;
+
+/** How many columns the continuation lines of `text` are indented. */
+export function hangColumns(text, tabSize = 4) {
+  let at = 0;
+  while (at < text.length && (text[at] === " " || text[at] === "\t")) at++;
+  const indent = countColumn(text.slice(0, at), tabSize);
+  const marker = LIST_MARKER.exec(text.slice(at));
+  const columns = marker ? indent + countColumn(marker[0], tabSize) : indent + OFFSET;
+  return Math.min(columns, MAX_HANG);
+}
+
+const decorations = Array.from({ length: MAX_HANG + 1 }, (_, columns) => Decoration.line({ class: `opf-hang-${columns}` }));
+
+function build(view) {
+  const builder = new RangeSetBuilder();
+  const { doc, tabSize } = view.state;
+  let last = -1;
+  for (const { from, to } of view.visibleRanges) {
+    for (let position = from; position <= to;) {
+      const line = doc.lineAt(position);
+      if (line.from > last) {
+        builder.add(line.from, line.from, decorations[hangColumns(line.text, tabSize)]);
+        last = line.from;
+      }
+      position = line.to + 1;
+    }
+  }
+  return builder.finish();
+}
+
+/** The extension: line decorations for the visible lines (a line is decorated again when the document, the viewport or the tab size changes). */
+export const hangingIndent = ViewPlugin.fromClass(
+  class {
+    constructor(view) {
+      this.decorations = build(view);
+    }
+    update(update) {
+      if (update.docChanged || update.viewportChanged || update.startState.tabSize !== update.state.tabSize) this.decorations = build(update.view);
+    }
+  },
+  { decorations: (plugin) => plugin.decorations },
+);

package/dist/styles.css

@@ -72,6 +72,17 @@
   --opf-ui-control-h: 40px;
 }
 
+/* A coarse pointer (a finger) gets 44px controls, whatever the density: every control built from --opf-ui-control-h grows with it, and
+   src/styles/touch.css lifts the ones that size themselves. Comes after the density rule so it wins at equal specificity. */
+@media (pointer: coarse) {
+  :root,
+  .opf-ui,
+  .opf-ui[data-density="touch"],
+  [data-density="touch"] .opf-ui {
+    --opf-ui-control-h: 44px;
+  }
+}
+
 /* Base rules for a mounted component or a whole editor surface. */
 .opf-ui {
   font-family: var(--opf-ui-font);
@@ -695,7 +706,7 @@
 .opf-lx[data-compact="true"] { min-height: 0; height: auto; }
 .opf-lx[data-compact="true"] .opf-lx-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
 .opf-lx[data-compact="true"] .opf-lx-palette-host { overflow-x: auto; border-bottom: 1px solid var(--opf-ui-border); }
-.opf-lx[data-compact="true"] .opf-lx-palette { flex-direction: row; flex: 1; padding: 4px 8px; border-right: 0; }
+.opf-lx[data-compact="true"] .opf-lx-palette { flex-direction: row; flex-wrap: wrap; justify-content: center; flex: 1; padding: 4px 8px; border-right: 0; }
 .opf-lx[data-compact="true"] .opf-lx-tool-gap { width: 1px; height: auto; margin: 4px; }
 .opf-lx[data-compact="true"] .opf-lx-viewport { min-height: 220px; }
 .opf-lx[data-compact="true"] .opf-lx-side { border-left: 0; border-top: 1px solid var(--opf-ui-border); }
@@ -3542,6 +3553,52 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   border-right: 1px solid var(--opf-ui-code-border);
 }
 
+/* A wrapped line continues under its own indentation (src/source-wrap.js, VS Code's wrappingIndent "indent"): `opf-hang-<n>` says how many
+   columns, the first line keeps its place (a negative text-indent of the same width) and every continuation line starts n columns in.
+   The hang is capped at 40% of the line so a deeply nested line still leaves room for text at 320px. Text inside an inline widget does not
+   inherit the negative indent. `--opf-line-start` is the line's own left padding (the source pane sets it to 2px). */
+.cm-line.opf-hang-0 { --opf-hang: 0; }
+.cm-line.opf-hang-1 { --opf-hang: 1; }
+.cm-line.opf-hang-2 { --opf-hang: 2; }
+.cm-line.opf-hang-3 { --opf-hang: 3; }
+.cm-line.opf-hang-4 { --opf-hang: 4; }
+.cm-line.opf-hang-5 { --opf-hang: 5; }
+.cm-line.opf-hang-6 { --opf-hang: 6; }
+.cm-line.opf-hang-7 { --opf-hang: 7; }
+.cm-line.opf-hang-8 { --opf-hang: 8; }
+.cm-line.opf-hang-9 { --opf-hang: 9; }
+.cm-line.opf-hang-10 { --opf-hang: 10; }
+.cm-line.opf-hang-11 { --opf-hang: 11; }
+.cm-line.opf-hang-12 { --opf-hang: 12; }
+.cm-line.opf-hang-13 { --opf-hang: 13; }
+.cm-line.opf-hang-14 { --opf-hang: 14; }
+.cm-line.opf-hang-15 { --opf-hang: 15; }
+.cm-line.opf-hang-16 { --opf-hang: 16; }
+.cm-line.opf-hang-17 { --opf-hang: 17; }
+.cm-line.opf-hang-18 { --opf-hang: 18; }
+.cm-line.opf-hang-19 { --opf-hang: 19; }
+.cm-line.opf-hang-20 { --opf-hang: 20; }
+.cm-line.opf-hang-21 { --opf-hang: 21; }
+.cm-line.opf-hang-22 { --opf-hang: 22; }
+.cm-line.opf-hang-23 { --opf-hang: 23; }
+.cm-line.opf-hang-24 { --opf-hang: 24; }
+.cm-line.opf-hang-25 { --opf-hang: 25; }
+.cm-line.opf-hang-26 { --opf-hang: 26; }
+.cm-line.opf-hang-27 { --opf-hang: 27; }
+.cm-line.opf-hang-28 { --opf-hang: 28; }
+.cm-line.opf-hang-29 { --opf-hang: 29; }
+.cm-line.opf-hang-30 { --opf-hang: 30; }
+.cm-line.opf-hang-31 { --opf-hang: 31; }
+.cm-line.opf-hang-32 { --opf-hang: 32; }
+:is(.opf-ui, .opf-json, .opf-code) .cm-line {
+  padding-left: calc(var(--opf-line-start, 6px) + min(calc(var(--opf-hang, 0) * 1ch), 40%));
+  text-indent: calc(-1 * min(calc(var(--opf-hang, 0) * 1ch), 40%));
+}
+
+:is(.opf-ui, .opf-json, .opf-code) .cm-line > * {
+  text-indent: 0;
+}
+
 :is(.opf-ui, .opf-json, .opf-code) .cm-activeLine,
 :is(.opf-ui, .opf-json, .opf-code) .cm-line.is-hover {
   background: color-mix(in srgb, var(--opf-ui-accent) 8%, transparent);
@@ -4256,11 +4313,13 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 .opf-source [hidden] { display: none !important; }
 .opf-source button { font: inherit; color: inherit; }
 
-/* Bar: file name, format menu, actions */
+/* Bar: file name, format menu, actions. It wraps: where the name, the format and the actions do not fit on one row (a narrow pane, or 44px
+   buttons under a coarse pointer), the actions drop to their own row on the right instead of squeezing the name. */
 .opf-source-bar {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 14px;
+  gap: 0 14px;
   flex: none;
   min-height: var(--_bar);
   padding: 0 8px 0 14px;
@@ -4391,7 +4450,7 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 .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; }
 .opf-source-code .cm-content { padding: 16px 16px 16px 4px; caret-color: var(--opf-ui-fg); }
-.opf-source-code .cm-line { padding: 0 2px; }
+.opf-source-code .cm-line { --opf-line-start: 2px; padding-top: 0; padding-right: 2px; padding-bottom: 0; }
 .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; }
@@ -4741,3 +4800,217 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
     transition: none;
   }
 }
+
+/* touch.css */
+/*
+ * Touch: a coarse pointer (a finger) gets a 44px hit area on every control, and the text in a field is 16px so iOS Safari does not
+ * zoom the page when the field gets focus. tokens.css already raises --opf-ui-control-h to 44px under `(pointer: coarse)`, which lifts every
+ * control that is sized by it; this file lifts the ones that size themselves (compact buttons, rows, menu items, completion items) and
+ * keeps the visual look: the padding grows, the type does not. The code in an editor stays at its own size: it is not a field.
+ * Tokens only, no color literals (test/styles.mjs).
+ */
+@media (pointer: coarse) {
+  /* ---- fields: 16px, 44px ------------------------------------------------------------------------------------------------------ */
+  :is(.opf-ui, .opf-source, .opf-json, .opf-code, .opf-shortcuts, .opf-quickpick, .opf-sym)
+    :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"]), select, textarea):not(.opf-inline-input, .opf-rich-input) {
+    font-size: 16px;
+  }
+  :is(.opf-ui, .opf-source, .opf-json, .opf-code, .opf-shortcuts, .opf-quickpick, .opf-sym)
+    :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"]), select):not(.opf-inline-input, .opf-rich-input) {
+    min-height: 44px;
+  }
+  /* WebKit sizes a native select by its text unless the height is set. */
+  :is(.opf-ui, .opf-source, .opf-json, .opf-code) select {
+    height: 44px;
+  }
+  .opf-ui input[type="file"] {
+    min-height: 44px;
+  }
+
+  /* ---- the source pane ---------------------------------------------------------------------------------------------------------- */
+  .opf-source,
+  .opf-source[data-density="touch"] {
+    --_h: 44px;
+    --_bar: 52px;
+  }
+  .opf-source-name,
+  .opf-source-format {
+    min-height: var(--_h);
+  }
+  .opf-source-name {
+    min-width: 44px;
+  }
+  .opf-source-finding {
+    min-height: var(--_h);
+  }
+  .opf-source-finding-fix,
+  .opf-source-finding-details {
+    min-height: var(--_h);
+    padding: 0 12px;
+  }
+  .opf-source-finding-fixes {
+    gap: 6px;
+  }
+  .opf-source-outline-item {
+    min-height: var(--_h);
+  }
+  .opf-source-finding-explain-link {
+    display: inline-flex;
+    align-items: center;
+    min-height: 44px;
+  }
+  .opf-sym-close {
+    min-width: 44px;
+    min-height: 44px;
+  }
+  .opf-sym-ref {
+    min-height: 44px;
+    align-items: center;
+  }
+  .opf-shortcuts .opf-shortcuts-close {
+    width: 44px;
+    height: 44px;
+  }
+  .opf-shortcuts .opf-shortcuts-search,
+  .opf-quickpick-input {
+    min-height: 44px;
+  }
+  .opf-quickpick-item {
+    min-height: 44px;
+    align-items: center;
+  }
+
+  /* ---- CodeMirror's lists and panels (completions, problems, quick fixes, search) ---------------------------------------------- */
+  :root :is(.opf-ui, .opf-source, .opf-json, .opf-code) .cm-tooltip.cm-tooltip-autocomplete > ul > li {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-height: 44px;
+    padding: 2px 12px;
+  }
+  :root :is(.opf-ui, .opf-source, .opf-json, .opf-code) .cm-tooltip-autocomplete .cm-completionLabel {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .cm-tooltip .opf-fix {
+    display: flex;
+    align-items: center;
+    min-height: 44px;
+    padding: 3px 12px;
+  }
+  .cm-tooltip-lint .cm-diagnosticAction {
+    min-height: 44px;
+    padding: 0 14px;
+  }
+  :root .cm-panels .cm-panel.cm-search :is(input, button, label) {
+    min-height: 44px;
+  }
+  :root .cm-panels .cm-panel.cm-search :is(input[type="text"], input:not([type])) {
+    font-size: 16px;
+  }
+  /* The find and replace fields take a row of their own each, the buttons and options wrap beneath, the close button stays in the corner. */
+  :root .cm-panels .cm-panel.cm-search {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 52px 6px 8px;
+  }
+  :root .cm-panels .cm-panel.cm-search br {
+    display: none;
+  }
+  :root .cm-panels .cm-panel.cm-search input[type="text"],
+  :root .cm-panels .cm-panel.cm-search input:not([type]) {
+    flex: 1 1 100%;
+    min-width: 0;
+    margin: 0;
+  }
+  :root .cm-panels .cm-panel.cm-search button,
+  :root .cm-panels .cm-panel.cm-search label {
+    margin: 0;
+  }
+  :root .cm-panels .cm-panel.cm-search label {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+  :root .cm-panels .cm-panel.cm-search button {
+    min-width: 44px;
+  }
+  :root .cm-panels .cm-panel.cm-search button[name="close"] {
+    top: 0;
+    right: 4px;
+  }
+
+  /* ---- menus, dialogs and the compact controls of the panels --------------------------------------------------------------------- */
+  .opf-export .opf-export-close {
+    width: 44px;
+    height: 44px;
+  }
+  .opf-export[data-density="touch"] .opf-export-trigger,
+  .opf-export[data-density="touch"] .opf-export-item,
+  .opf-export .opf-export-item {
+    min-height: 44px;
+  }
+  .opf-export .opf-export-status-action {
+    height: 44px;
+  }
+  .opf-handoff[data-density="touch"] .opf-handoff-button,
+  .opf-handoff .opf-handoff-button {
+    height: 44px;
+  }
+  .opf-handoff[data-density="touch"] .opf-handoff-target,
+  .opf-handoff .opf-handoff-target {
+    height: 44px;
+    padding: 0 14px;
+  }
+  .opf-handoff[data-density="touch"] .opf-handoff-x,
+  .opf-handoff .opf-handoff-x {
+    width: 44px;
+    height: 44px;
+  }
+  .opf-nav[data-density="touch"] .opf-nav-button,
+  .opf-nav .opf-nav-button {
+    width: 44px;
+    height: 44px;
+  }
+  .opf-thumbs[data-density="touch"] .opf-thumbs-item,
+  .opf-thumbs .opf-thumbs-item {
+    min-height: 44px;
+  }
+  :root .opf-review-fix {
+    min-height: 44px;
+    padding: 0 12px;
+  }
+  :root .opf-find button.opf-find-close,
+  :root .opf-find button[aria-label="Previous match"],
+  :root .opf-find button[aria-label="Next match"] {
+    min-width: 44px;
+  }
+  .opf-dc-group > summary,
+  .opf-template-insert-section summary {
+    min-height: 44px;
+    padding-block: calc((44px - 1lh) / 2);
+  }
+  .opf-dc-check {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: 10px;
+  }
+  .opf-dc-check > input {
+    flex: none;
+    width: 22px;
+    height: 22px;
+    margin: 0;
+  }
+  .opf-dc-check > label {
+    display: flex;
+    align-items: center;
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 44px;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-editor",
-  "version": "0.26.6",
+  "version": "0.26.7",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",
@@ -287,10 +287,10 @@
     "@lezer/highlight": "1.2.5",
     "jsonc-parser": "3.3.1",
     "yaml": "^2.9.1",
-    "@openpresentation/opf": "^0.26.6"
+    "@openpresentation/opf": "^0.26.7"
   },
   "peerDependencies": {
-    "@openpresentation/opf-render": "^0.26.6"
+    "@openpresentation/opf-render": "^0.26.7"
   },
   "peerDependenciesMeta": {
     "@openpresentation/opf-render": {
@@ -349,9 +349,9 @@
     "pdf-lib": "1.17.1",
     "pdfjs-dist": "6.4.299",
     "playwright": "1.64.0",
-    "@openpresentation/opf-pptx": "0.26.6",
-    "@openpresentation/opf-render": "0.26.6",
-    "@openpresentation/gallery": "0.26.6"
+    "@openpresentation/gallery": "0.26.7",
+    "@openpresentation/opf-pptx": "0.26.7",
+    "@openpresentation/opf-render": "0.26.7"
   },
   "scripts": {
     "build": "node scripts/build.mjs",
@@ -402,5 +402,5 @@
     "test:export-menu-browser": "node test/export-menu-browser.mjs",
     "test:agent-handoff-browser": "node test/agent-handoff-browser.mjs"
   },
-  "gitHead": "66937576155a3c10ec86ee3327921b51f0c141ae"
+  "gitHead": "9c8a2c82ee5d42462cfe1404e3a3172ab759645f"
 }