@openpresentation/opf-editor 0.26.9 → 0.26.10

package/dist/presenter.js

@@ -19,25 +19,40 @@ const CLICK_GUARD_MS = 450;
 const NEXT_KEYS = new Set(["ArrowRight", " ", "PageDown", "Enter"]);
 const PREVIOUS_KEYS = new Set(["ArrowLeft", "PageUp", "Backspace"]);
 
-// Full screen belongs to the document, not to one presenter: the browser ends whatever is full screen when an exit it was asked for runs, and tells
-// every listener. A presenter that closed early asks for its exit late (when its pending full screen request resolves), possibly after a newer
-// presenter took full screen. So the exits the presenters asked for are counted per document, and any presenter reads a `fullscreenchange` that
-// answers one of them as ours, not as the user leaving full screen.
-const exitRequests = new WeakMap(); // Document -> Set of exits asked for and not yet reported
+// Full screen belongs to the document, not to one presenter, and the browser answers a request later than it was made. Two things follow, and
+// both are kept per document so that presenters (any number can be mounted) see the same facts.
+// 1. An exit a presenter asked for can run after a newer presenter took full screen, and the browser then ends that one's full screen too.
+//    A presenter whose request resolved after it was closed therefore leaves full screen only when no newer request is in flight (that request
+//    replaces it); otherwise it marks its element abandoned, and the newer presenter gives the screen back if its own request does not get it.
+// 2. The `fullscreenchange` an exit answers must not read as the user leaving. The exits presenters asked for are listed until their event is
+//    seen and the exit has settled, in whichever order those two happen. An event that finds the screen taken by an element drops the exits that
+//    already settled, since events arrive in the order of the changes: a later exit event is the user's, however soon it follows.
+const documentStates = new WeakMap(); // Document -> { requests (counted), inFlight (their numbers, until answered), exits, abandoned (elements) }
 const attributedEvents = new WeakMap(); // fullscreenchange Event -> whether it answered an exit a presenter asked for
-function noteExit(doc, win) {
-  let requests = exitRequests.get(doc);
-  if (!requests) exitRequests.set(doc, requests = new Set());
-  const request = {};
-  requests.add(request);
-  // The browser reports an exit with the event; when it does not (the exit was refused, or two exits became one event), stop counting it soon.
-  return { forget: () => requests.delete(request), forgetSoon: () => win.setTimeout(() => requests.delete(request), 500) };
+function stateOf(doc) {
+  let state = documentStates.get(doc);
+  if (!state) documentStates.set(doc, state = { requests: 0, inFlight: new Set(), exits: new Set(), abandoned: new WeakSet() });
+  return state;
+}
+function noteExit(doc) {
+  const { exits } = stateOf(doc);
+  const exit = { settled: false, seen: false };
+  exits.add(exit);
+  return {
+    // The browser reports an exit with an event; when none came (the exit was refused, or two exits became one event) it is not waited for.
+    settle: (done) => { if (!done || exit.seen) exits.delete(exit); else exit.settled = true; },
+  };
 }
 function answersAnExit(doc, event) {
   if (attributedEvents.has(event)) return attributedEvents.get(event);
-  const requests = exitRequests.get(doc);
-  const ours = Boolean(requests?.size) && !doc.fullscreenElement;
-  if (ours) requests.delete(requests.values().next().value);
+  const { exits } = stateOf(doc);
+  let ours = false;
+  if (doc.fullscreenElement) {
+    for (const exit of exits) if (exit.settled) exits.delete(exit);
+  } else {
+    const exit = [...exits].find((candidate) => !candidate.seen);
+    if (exit) { ours = true; if (exit.settled) exits.delete(exit); else exit.seen = true; }
+  }
   attributedEvents.set(event, ours);
   return ours;
 }
@@ -92,7 +107,7 @@ export function createPresenter(container, options = {}) {
   // Drawn slides by deck index, for the deck object they were drawn from: a new snapshot (an edit) or a new start() draws again.
   let drawn = new Map(), drawnFor;
 
-  let active = false, destroyed = false, current = -1, opener = null, enteredFullscreen = false, returnTo = null;
+  let active = false, destroyed = false, current = -1, opener = null, enteredFullscreen = false, returnTo = null, pendingRequests = 0;
   let counterTimer, preloadTimer, renderToken = 0, swipe = null, clickGuardUntil = 0;
 
   // ---- the DOM ----------------------------------------------------------------------------------------------------------------------------
@@ -216,36 +231,57 @@ export function createPresenter(container, options = {}) {
   function enterFullscreen() {
     const request = root.requestFullscreen ?? root.webkitRequestFullscreen;
     if (typeof request !== "function" || doc.fullscreenEnabled === false) return Promise.resolve("overlay");
+    const state = stateOf(doc);
+    const ticket = ++state.requests;
+    state.inFlight.add(ticket);
+    pendingRequests++;
+    state.abandoned.delete(root);
+    const answered = () => { state.inFlight.delete(ticket); pendingRequests--; };
     let attempt;
     try { attempt = Promise.resolve(request.call(root, { navigationUI: "hide" })); } catch (error) { attempt = Promise.reject(error); }
     return attempt.then(
       () => {
-        if (doc.fullscreenElement !== root) return "overlay";
-        // stop() ran while the request was pending (a quick Esc or close), so it saw no full screen to leave: give the screen back now, or the
-        // page stays full screen behind a hidden presenter.
-        if (!active) { leaveFullscreen(); return "overlay"; }
+        answered();
+        if (doc.fullscreenElement !== root) return reclaimAbandoned();
+        if (!active) {
+          // stop() ran while the request was pending (a quick Esc or close), so it saw no full screen to leave: give the screen back now, or the
+          // page stays full screen behind a hidden presenter. Not when a newer request is still in flight: it replaces this element, and an exit asked
+          // for now would run after it and end the newer presenter's full screen.
+          if ([...state.inFlight].some((newer) => newer > ticket)) state.abandoned.add(root); else leaveFullscreen();
+          return "overlay";
+        }
         enteredFullscreen = true;
         root.dataset.mode = "fullscreen";
         return "fullscreen";
       },
-      () => "overlay",
+      () => { answered(); return reclaimAbandoned(); },
     );
   }
+  // This presenter did not get the screen (refused, or taken by another element): if an earlier, closed presenter's element still holds it
+  // because that presenter left the exit to this request, give it back.
+  function reclaimAbandoned() {
+    const holder = doc.fullscreenElement, { abandoned } = stateOf(doc);
+    if (holder && holder !== root && abandoned.has(holder)) { abandoned.delete(holder); leaveFullscreen(); } else if (!active) restoreFocus();
+    return "overlay";
+  }
   // Ask the browser to leave full screen; onFullscreenChange then sees that the event answers an exit asked for (by this presenter or an earlier
-  // one) and does not read it as the user's. Focus goes back to the element that opened the presentation once the exit is done, because the page
-  // behind a full screen element takes no focus until then.
+  // one) and does not read it as the user's. Focus goes back to the element that opened the presentation once the exit is done (or refused: the
+  // screen was already gone), because the page behind a full screen element takes no focus until then.
   function leaveFullscreen() {
-    const exit = noteExit(doc, win);
-    Promise.resolve(doc.exitFullscreen?.()).then(() => { exit.forgetSoon(); restoreFocus(); }, exit.forget);
+    const exit = noteExit(doc);
+    Promise.resolve(doc.exitFullscreen?.()).then(() => { exit.settle(true); restoreFocus(); }, () => { exit.settle(false); restoreFocus(); });
   }
-  // Only when nobody took focus since: the host may move it in `onExit`.
+  // Only when nobody took focus since: the host may move it in `onExit`. While the screen is still full screen the page behind takes no focus, and
+  // a browser reports the end of an exit's promise before the end of full screen; so the element is kept until the `fullscreenchange` that ends it (and while a request of this presenter is unanswered: it may still take the screen).
   function restoreFocus() {
     const now = doc.activeElement;
     if (returnTo?.isConnected && typeof returnTo.focus === "function" && (!now || now === doc.body || now === root)) returnTo.focus({ preventScroll: true });
+    if (!doc.fullscreenElement && !pendingRequests) returnTo = null;
   }
   // The browser takes full screen away with Esc (that key never reaches the page) or the host exits it: the presentation ends with it.
   function onFullscreenChange(event) {
     if (doc.fullscreenElement === root) return;
+    if (!active && !doc.fullscreenElement) restoreFocus();
     if (answersAnExit(doc, event)) {
       // An exit that a presenter asked for finished: ours from stop(), or an earlier presenter's that ran after this one took full screen. A
       // presentation still running carries on as the overlay.
@@ -321,6 +357,7 @@ export function createPresenter(container, options = {}) {
     const wanted = slideIndex ?? options.slideIndex ?? 0;
     if (active) { show(wanted); return Promise.resolve(root.dataset.mode); }
     active = true;
+    returnTo = null;
     opener = doc.activeElement && doc.activeElement !== doc.body ? doc.activeElement : null;
     current = -1;
     drawn = new Map();

package/dist/styles.css

@@ -596,6 +596,10 @@
   --opf-lx-slot: 20px;
   --opf-lx-pad: 16px;
   --opf-lx-chip: calc(var(--opf-ui-control-h) - 4px);
+  /* Compact controls sit a little under --opf-lx-h so they sit quietly beside it: the zoom buttons, the validity pill, the segments. */
+  --opf-lx-zoom-btn: calc(var(--opf-lx-h) - 4px);
+  --opf-lx-pill: calc(var(--opf-lx-h) - 6px);
+  --opf-lx-seg: calc(var(--opf-lx-h) - 2px);
   font-family: var(--opf-ui-font);
   font-size: 13px;
   color: var(--opf-ui-fg);
@@ -667,7 +671,7 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  height: calc(var(--opf-lx-h) - 6px);
+  height: var(--opf-lx-pill);
   padding: 0 10px;
   background: transparent;
   border: 1px solid var(--opf-ui-border);
@@ -1081,8 +1085,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: calc(var(--opf-lx-h) - 4px);
-  height: calc(var(--opf-lx-h) - 4px);
+  width: var(--opf-lx-zoom-btn);
+  height: var(--opf-lx-zoom-btn);
   padding: 0;
   background: transparent;
   border: 0;
@@ -1271,7 +1275,7 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  height: calc(var(--opf-lx-h) - 2px);
+  height: var(--opf-lx-seg);
   padding: 0 12px;
   background: transparent;
   border: 0;
@@ -1354,6 +1358,30 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 .opf-lx-canvas[data-density="touch"] .opf-lx-label { --opf-lx-chip-h: 19px; font-size: 12px; line-height: 18px; }
 .opf-lx[data-density="touch"] .opf-lx-actions { grid-template-columns: minmax(0, 1fr); }
 
+/* A coarse pointer (a finger): every control sized from these tokens is a 44px target, at any width. --opf-lx-h already follows
+   --opf-ui-control-h (44px under a coarse pointer, tokens.css); the compact controls that sit a few pixels under it, and the rows and
+   chips, take its full height. A fine pointer keeps the compact look. Fields and the other controls that size themselves: touch.css. */
+@media (pointer: coarse) {
+  .opf-lx,
+  .opf-lx-palette,
+  .opf-lx-canvas,
+  .opf-lx-layers,
+  .opf-lx-inspector {
+    --opf-lx-row: var(--opf-lx-h);
+    --opf-lx-chip: var(--opf-lx-h);
+    --opf-lx-zoom-btn: var(--opf-lx-h);
+    --opf-lx-pill: var(--opf-lx-h);
+    --opf-lx-seg: var(--opf-lx-h);
+  }
+  /* A checkbox is hit through its label: the label is the 44px target and the box a little larger (as .opf-dc-check in touch.css). */
+  .opf-lx-field-check .opf-lx-label-text {
+    display: flex;
+    align-items: center;
+    min-height: var(--opf-lx-h);
+  }
+  .opf-lx-check { width: 22px; height: 22px; }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .opf-lx *,
   .opf-lx-palette *,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-editor",
-  "version": "0.26.9",
+  "version": "0.26.10",
   "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.9"
+    "@openpresentation/opf": "^0.26.10"
   },
   "peerDependencies": {
-    "@openpresentation/opf-render": "^0.26.9"
+    "@openpresentation/opf-render": "^0.26.10"
   },
   "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.9",
-    "@openpresentation/gallery": "0.26.9",
-    "@openpresentation/opf-render": "0.26.9"
+    "@openpresentation/opf-pptx": "0.26.10",
+    "@openpresentation/gallery": "0.26.10",
+    "@openpresentation/opf-render": "0.26.10"
   },
   "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": "7563d8dea2ba24a36b032614a50f665876d145e5"
+  "gitHead": "da3f869f6f3a152a0d7d5cb42eeb2843d302a46a"
 }