@jsenv/navi 0.29.235 → 0.29.238

package/dist/dev/jsenv_navi.js

@@ -6034,6 +6034,7 @@ installImportMetaCssBuild(import.meta);
 let calloutCount = 0;
 
 const css$13 = /* css */ `
+  /* jsenv-css-opaque: same as dialog.jsx, cascade order. */
   @layer navi {
     .navi_callout {
       /* A callout is parented to what it explains, so it inherits from it — and
@@ -6983,7 +6984,17 @@ const openCallout = (
       `append callout into ${getElementSignature(calloutContainer)}`,
     );
   }
+  let checkCalloutInsertionImpact;
+  {
+    checkCalloutInsertionImpact = startCalloutInsertionImpactCheck(
+      calloutContainer,
+      anchorElement,
+    );
+  }
   calloutContainer.appendChild(calloutElement);
+  if (checkCalloutInsertionImpact) {
+    checkCalloutInsertionImpact();
+  }
   calloutElement.showPopover();
   addTeardown(() => {
     calloutElement.remove();
@@ -7549,6 +7560,54 @@ const canContainCallout = (element) => {
   return true;
 };
 
+// A callout is a popover with no layout box of its own, so putting it in the
+// tree must move nothing. Anything that does move means an app rule counting
+// element children — :last-child, :nth-child, :only-child, :empty, > * + * —
+// took the callout for one of them and changed subject. Invisible from the
+// app, where the rule and the markup both read fine.
+// Two boxes rather than every child of the container: a callout on a list row
+// would otherwise measure the whole list on each press.
+const startCalloutInsertionImpactCheck = (calloutContainer, anchorElement) => {
+  if (!anchorElement) {
+    return null;
+  }
+  const anchorBoxBefore = anchorElement.getBoundingClientRect();
+  const containerBoxBefore = calloutContainer.getBoundingClientRect();
+  return () => {
+    const anchorBoxAfter = anchorElement.getBoundingClientRect();
+    const containerBoxAfter = calloutContainer.getBoundingClientRect();
+    let what;
+    let boxBefore;
+    let boxAfter;
+    if (!isSameBox(anchorBoxBefore, anchorBoxAfter)) {
+      what = "moved it";
+      boxBefore = anchorBoxBefore;
+      boxAfter = anchorBoxAfter;
+    } else if (!isSameBox(containerBoxBefore, containerBoxAfter)) {
+      what = `moved ${getElementSignature(calloutContainer)} around it`;
+      boxBefore = containerBoxBefore;
+      boxAfter = containerBoxAfter;
+    } else {
+      return;
+    }
+    console.warn(
+      `opening a callout on ${getElementSignature(anchorElement)} ${what}: ${formatBox(boxBefore)} -> ${formatBox(boxAfter)}.
+A callout draws nothing in the flow, but while it is open it is an element child of ${getElementSignature(calloutContainer)}: a rule counting children there (:last-child, :nth-child, :only-child, :empty, > * + *) counts it too and matches something else than what it aims at.
+Say which children the rule counts: :nth-last-child(1 of S) / :nth-child(An+B of S), where S names yours (a class, or :not([navi-out-of-flow]) — the marker navi's out-of-flow elements carry). A sibling rule takes the marker between its compounds: > *:not([navi-out-of-flow]) + *:not([navi-out-of-flow]).
+See @jsenv/navi docs/css_architecture.md.`,
+    );
+  };
+};
+const isSameBox = (a, b) => {
+  return (
+    a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height
+  );
+};
+const formatBox = ({ x, y, width, height }) => {
+  const round = (value) => Math.round(value * 100) / 100;
+  return `${round(width)}x${round(height)} at ${round(x)},${round(y)}`;
+};
+
 const escapeHtml = (string) => {
   return string
     .replace(/&/g, "&")
@@ -18949,6 +19008,20 @@ const resolveSpacingSize = (size, element, property = "padding") => {
   }
   return normalizeStyle(SIZE_MAP[size] || size, property, "js", element);
 };
+// Whether a spacing is nothing at all, answered without resolving it. A
+// viewport or container length resolves through a computed-style read, and
+// asked during a render that read forces the browser to compute the style of
+// a tree still being built, stylesheets still being adopted. Zero is a fact
+// about the number written, whatever the unit; a scale keyword is never zero.
+const isZeroSpacingSize = (size) => {
+  if (typeof size === "number") {
+    return size === 0;
+  }
+  if (typeof size !== "string") {
+    return false;
+  }
+  return parseFloat(size) === 0;
+};
 
 const COLOR_KEYWORD_MAP = {
   primary: "var(--navi-color-primary)",
@@ -26130,6 +26203,47 @@ const resolveEffectiveDocumentState = (
   return { ...state, ...sharedState };
 };
 
+// Preact's own useId() (see preact/hooks) returns "P<mask0>-<mask1>", where the
+// mask is derived from render order within the nearest root/async boundary:
+// stable across re-renders of the same mount, but not across two mounts on the
+// same page, and not across two documents.
+const PREACT_GENERATED_ID_REGEX = /^P\d+-\d+/;
+const isLikelyPreactGeneratedId = (id) => {
+  return PREACT_GENERATED_ID_REGEX.test(id);
+};
+
+/**
+ * A history entry outlives the document that wrote it: `history.state` comes
+ * back as it was left on a reload, and on a back/forward into a document that
+ * has been unloaded since.
+ *
+ * A key named by a generated id names a position in the render order of the
+ * document that wrote it, and nothing else. Read back in another document the
+ * same key names whatever now renders at that position — so an open popup left
+ * behind by the previous document opens a component nobody ever touched (see
+ * `useNavState`, whose key presence IS the open state). Only a caller-given id
+ * means the same thing on both sides of a load.
+ *
+ * Returns the state untouched when it holds no such key, so the caller can tell
+ * whether the entry needs rewriting.
+ */
+const dropGeneratedIdKeys = (state) => {
+  if (!state) {
+    return state;
+  }
+  let stateWithoutGeneratedIdKeys = state;
+  for (const key of Object.keys(state)) {
+    if (!isLikelyPreactGeneratedId(key)) {
+      continue;
+    }
+    if (stateWithoutGeneratedIdKeys === state) {
+      stateWithoutGeneratedIdKeys = { ...state };
+    }
+    delete stateWithoutGeneratedIdKeys[key];
+  }
+  return stateWithoutGeneratedIdKeys;
+};
+
 /**
  * The document's rendering, held for the one frame a view transition needs.
  *
@@ -26986,7 +27100,14 @@ const setupBrowserIntegrationViaHistory = ({
 
   const init = () => {
     const url = window.location.href;
-    const state = history.state;
+    const stateOnEntry = window.history.state;
+    const state = dropGeneratedIdKeys(stateOnEntry);
+    if (state !== stateOnEntry) {
+      // The entry itself has to lose them too, not just the document state:
+      // getDocumentState() reads the entry back, and every state write copies
+      // what it finds there onto the next one.
+      window.history.replaceState(state, null, url);
+    }
     handleRoutingTask(url, {
       reason: "routing initialization",
       navigationType: "load",
@@ -27220,18 +27341,6 @@ Consider using unique IDs for each component instance.`,
   return useNavStateBasic(id, options);
 };
 
-// Preact's own useId() (see preact/hooks) returns "P<mask0>-<mask1>", where
-// the mask is derived from render order within the nearest root/async
-// boundary — stable across re-renders of the *same* mount, but not across a
-// reload (render order can differ) or even across two mounts on the same
-// page (two components hitting useId() in the same relative order get the
-// same string). Storing one of these under type: "push" bakes it into a
-// history entry: reload the page and the entry's key may now belong to a
-// completely different component (or none), silently auto-opening whatever
-// happens to render at that same position instead.
-const PREACT_GENERATED_ID_REGEX = /^P\d+-\d+/;
-const isLikelyPreactGeneratedId = (id) => PREACT_GENERATED_ID_REGEX.test(id);
-
 const NO_OP = () => {};
 const NO_ID_GIVEN = [undefined, NO_OP, NO_OP];
 const useNavStateBasic = (
@@ -27263,6 +27372,10 @@ const useNavStateBasic = (
   }
 
   let effectiveType = type;
+  // A push bakes the key into a history entry of its own, and an id naming a
+  // render position (see isLikelyPreactGeneratedId) can be claimed by two
+  // mounts of this same page. A replace keeps the key on the entry the document
+  // is already on, where the id at least names one render.
   if (type === "push" && isLikelyPreactGeneratedId(id)) {
     {
       console.warn(
@@ -39948,47 +40061,35 @@ const LoadingIndicatorFluid = ({
   const [containerWidth, setContainerWidth] = useState(0);
   const [containerHeight, setContainerHeight] = useState(0);
   const [containerRadius, setContainerRadius] = useState(0);
+
+  // Sized by the observer alone, first frame included: an element gets an
+  // observation for the size it has when first observed, delivered after the
+  // frame's own layout and before its paint. Measuring here instead would
+  // force a layout in the middle of the commit, on a tree the commit is still
+  // writing to, and the frame would lay it out again. Inside the callback style
+  // and layout are clean, so the radius read there is a lookup, not a recalc.
   useLayoutEffect(() => {
     const indicatorEl = ref.current;
     if (!indicatorEl) {
       return null;
     }
-    const {
-      width,
-      height
-    } = indicatorEl.getBoundingClientRect();
-    setContainerWidth(width);
-    setContainerHeight(height);
-    if (radius === undefined || radius === "inherit") {
-      const parentEl = indicatorEl.parentElement;
-      // Prefer the inline style (always available, even before layout is computed).
-      // Fall back to computed longhands — getComputedStyle shorthand may return ""
-      // if the browser hasn't resolved the layout yet.
-      const radius = parentEl.style.borderRadius || parentEl.style.borderTopLeftRadius || getComputedStyle(parentEl).borderTopLeftRadius || "0px";
-      setContainerRadius(radius);
-    }
-    let animationFrameId = null;
-    // Create a resize observer to detect changes in the container's dimensions
-    const resizeObserver = new ResizeObserver(entries => {
-      // Use requestAnimationFrame to debounce updates
-      if (animationFrameId) {
-        cancelAnimationFrame(animationFrameId);
-      }
-      animationFrameId = requestAnimationFrame(() => {
-        const [containerEntry] = entries;
-        const {
-          width,
-          height
-        } = containerEntry.contentRect;
-        setContainerWidth(width);
-        setContainerHeight(height);
-      });
+    const resizeObserver = new ResizeObserver(([containerEntry]) => {
+      const {
+        width,
+        height
+      } = containerEntry.contentRect;
+      setContainerWidth(width);
+      setContainerHeight(height);
+      if (radius === undefined || radius === "inherit") {
+        const parentEl = indicatorEl.parentElement;
+        // The inline style says the radius as the caller wrote it; the
+        // computed longhand otherwise, the shorthand computing to "" when the
+        // four corners differ.
+        setContainerRadius(parentEl.style.borderRadius || parentEl.style.borderTopLeftRadius || getComputedStyle(parentEl).borderTopLeftRadius || "0px");
+      }
     });
     resizeObserver.observe(indicatorEl);
     return () => {
-      if (animationFrameId) {
-        cancelAnimationFrame(animationFrameId);
-      }
       resizeObserver.disconnect();
     };
   }, []);
@@ -44330,6 +44431,13 @@ const measureDrawing = ({
  * Measured rather than declared: a bar's size comes from a prop, a theme
  * variable, its own content or the device's notch, and only the used value
  * knows all four.
+ *
+ * Written once per task, after every bar has measured. The variable resizes
+ * an ancestor of the bars — the scroll container takes its padding from it —
+ * so a write landing between two measurements turns the second one into a
+ * style recalc and a layout of the whole page. Sizes are queued, and the queue
+ * lands in a microtask: still before the browser paints, so the content is
+ * never seen under a bar, and after every read of the commit that queued them.
  */
 
 // Several bars can share an edge — during a page transition the outgoing and
@@ -44343,10 +44451,14 @@ const sizeMapByArea = new Map();
 // size again — the ones for the smaller bars, and the second half of a page
 // transition.
 const writtenValueByArea = new Map();
+// Sizes said and not yet written. One queue for both callers below: a bar
+// saying its size twice before the write keeps the last word, whoever said it.
+const pendingSizeMapByArea = new Map();
+let flushMicrotaskQueued = false;
+let flushFrame = null;
 
-// A size that must land before the next paint: a render changed the bar, so
-// the room it takes is given back in that same commit and the content is never
-// painted under it.
+// A size a render produced: a prop, the children or a theme variable changed
+// the bar, and the room it takes is given back before that commit is painted.
 /**
  * @param {"top"|"bottom"|"left"|"right"} area
  * @param {Element} barElement - Which bar this size belongs to.
@@ -44354,41 +44466,47 @@ const writtenValueByArea = new Map();
  *   content.
  */
 const setFixedBarSpace = (area, barElement, size) => {
-  dropPendingSize(area, barElement);
-  storeSize(area, barElement, size);
-  writeSpace(area);
-};
-
-// A size nothing asked for, coming from a ResizeObserver. Writing the variable
-// resizes an ANCESTOR of the bars — the scroll container takes its padding
-// from it — and mutating layout from inside a resize callback is what makes
-// the browser report "ResizeObserver loop completed with undelivered
-// notifications". So the write waits for the frame that resize produced.
-// Queued here rather than deferred by each bar on its own, so the bars sharing
-// an edge resolve to a single write instead of one per bar.
+  queueSize(area, barElement, size);
+  if (flushMicrotaskQueued) {
+    return;
+  }
+  flushMicrotaskQueued = true;
+  queueMicrotask(() => {
+    flushMicrotaskQueued = false;
+    flushPendingSizes();
+  });
+};
+
+// A size nothing asked for, coming from a ResizeObserver. Mutating layout from
+// inside a resize callback is what makes the browser report "ResizeObserver
+// loop completed with undelivered notifications", so this write waits for the
+// frame that resize produced.
 /**
  * @param {"top"|"bottom"|"left"|"right"} area
  * @param {Element} barElement - Which bar this size belongs to.
  * @param {number} size - In px.
  */
 const requestFixedBarSpace = (area, barElement, size) => {
+  queueSize(area, barElement, size);
+  if (flushFrame !== null) {
+    return;
+  }
+  flushFrame = requestAnimationFrame(() => {
+    flushFrame = null;
+    flushPendingSizes();
+  });
+};
+
+const queueSize = (area, barElement, size) => {
   let pendingSizeMap = pendingSizeMapByArea.get(area);
   if (!pendingSizeMap) {
     pendingSizeMap = new Map();
     pendingSizeMapByArea.set(area, pendingSizeMap);
   }
   pendingSizeMap.set(barElement, size);
-  if (flushFrame !== null) {
-    return;
-  }
-  flushFrame = requestAnimationFrame(flushPendingSizes);
 };
 
-const pendingSizeMapByArea = new Map();
-let flushFrame = null;
-
 const flushPendingSizes = () => {
-  flushFrame = null;
   for (const [area, pendingSizeMap] of pendingSizeMapByArea) {
     for (const [barElement, size] of pendingSizeMap) {
       storeSize(area, barElement, size);
@@ -44398,20 +44516,6 @@ const flushPendingSizes = () => {
   pendingSizeMapByArea.clear();
 };
 
-// What the bar itself just said wins over what its observer had queued about
-// it: a bar unmounting gives its room back, and a size queued for it before
-// that must not put it back.
-const dropPendingSize = (area, barElement) => {
-  const pendingSizeMap = pendingSizeMapByArea.get(area);
-  if (!pendingSizeMap) {
-    return;
-  }
-  pendingSizeMap.delete(barElement);
-  if (pendingSizeMap.size === 0) {
-    pendingSizeMapByArea.delete(area);
-  }
-};
-
 const storeSize = (area, barElement, size) => {
   let sizeMap = sizeMapByArea.get(area);
   if (!sizeMap) {
@@ -58569,6 +58673,8 @@ const PopupClose = ({
 installImportMetaCssBuild(import.meta);
 let openLocalDialogCount = 0;
 const css$E = /* css */`
+  /* jsenv-css-opaque: popupCss overlaps these rules, own sheet = cascade
+     order depending on which popup renders first. */
   @layer navi {
     .navi_dialog {
       /* Min gap between the dialog and the edges of its container. Written
@@ -59619,7 +59725,7 @@ const useDialogProps = props => {
     bottom: false,
     left: false
   };
-  if (resolveSpacingSize(marginWithContainer) === 0) {
+  if (isZeroSpacingSize(marginWithContainer)) {
     const {
       y,
       x
@@ -60342,6 +60448,8 @@ Dialog.Close = PopupClose;
 installImportMetaCssBuild(import.meta);
 let openLocalPopoverCount = 0;
 const css$D = /* css */`
+  /* jsenv-css-opaque: popupCss overlaps these rules, own sheet = cascade
+     order depending on which popup renders first. */
   @layer navi {
     .navi_popover {
       /* soft: user-configurable preferred max-height. Kept as a *default*