@jsenv/navi 0.29.236 → 0.29.238

package/dist/jsenv_navi.js

@@ -18654,6 +18654,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)",
@@ -39403,47 +39417,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();
     };
   }, []);
@@ -43776,6 +43778,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
@@ -43789,10 +43798,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.
@@ -43800,41 +43813,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);
@@ -43844,20 +43863,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) {
@@ -58955,7 +58960,7 @@ const useDialogProps = props => {
     bottom: false,
     left: false
   };
-  if (resolveSpacingSize(marginWithContainer) === 0) {
+  if (isZeroSpacingSize(marginWithContainer)) {
     const {
       y,
       x