@jsenv/navi 0.29.103 → 0.29.105

package/dist/jsenv_navi.js

@@ -4,7 +4,7 @@
  */
 import { installImportMetaCssBuild, windowHeightSignal, windowWidthSignal, visualViewportHeightSignal, visualViewportWidthSignal, getAppHeight, getAppWidth, coarsePointerSignal, smallTouchScreenSignal } from "./jsenv_navi_side_effects.js";
 export { disableVirtualKeyboardOverlay } from "./jsenv_navi_side_effects.js";
-import { elementIsFocusable, createPubSub, dispatchInternalCustomEvent, dispatchCustomEvent, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, getElementSignature, findEvent, createValueEffect, findFocusDelegateTarget, findFocusable, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, chainEvent, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, markDragSource, startDragTo, createIterableWeakSet, createEventGroupLogger, getKeyboardEventDefaultAction, activeElementSignal, normalizeStyle, mergeOneStyle, getPositionedParent, mergeTwoStyles, normalizeStyles, resolveCSSSize, hasCSSSizeUnit, resolveOklchLightness, contrastColor, closestOpenableAncestor, isAncestorOpen, observeAncestorOpenState, getAncestorOpenType, clickIsSuppressed, isTouchDrivenEvent, scrollIntoViewScoped, scrollRoomTowards, parsePositionArea, snapToPixel, trapFocusInside, trapScrollInside, onAncestorReopen, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, watchWheelTravel, findBefore, findAfter, initFocusGroup, stringifyStyle as stringifyStyle$1, getScrollContainer, canScroll, measureWidestChildRow, performTabNavigation, wheelGestureIsTakenFrom, releaseWheelGesture, claimWheelGesture, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } from "@jsenv/dom";
+import { elementIsFocusable, createPubSub, dispatchInternalCustomEvent, dispatchCustomEvent, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, getElementSignature, findEvent, createValueEffect, findFocusDelegateTarget, findFocusable, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, chainEvent, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, markDragSource, startDragTo, createIterableWeakSet, createEventGroupLogger, getKeyboardEventDefaultAction, activeElementSignal, normalizeStyle, mergeOneStyle, getPositionedParent, normalizeStyles, resolveCSSSize, closestOpenableAncestor, isAncestorOpen, observeAncestorOpenState, getAncestorOpenType, hasCSSSizeUnit, resolveOklchLightness, contrastColor, clickIsSuppressed, isTouchDrivenEvent, scrollIntoViewScoped, scrollRoomTowards, parsePositionArea, snapToPixel, trapFocusInside, trapScrollInside, onAncestorReopen, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, watchWheelTravel, findBefore, findAfter, initFocusGroup, stringifyStyle as stringifyStyle$1, getScrollContainer, canScroll, measureWidestChildRow, performTabNavigation, wheelGestureIsTakenFrom, releaseWheelGesture, claimWheelGesture, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } from "@jsenv/dom";
 export { clickIsSuppressed, contrastColor, findEvent, startDragTo } from "@jsenv/dom";
 import { signal, computed, effect, batch, untracked, useSignal } from "@preact/signals";
 import { createContext, isValidElement, h, Fragment, render, toChildArray, options, cloneElement } from "preact";
@@ -38,7 +38,7 @@ installImportMetaCssBuild(import.meta);/**
  * any of these, and a number is the last resort, not the first tool.
  */
 
-const css$15 = /* css */`
+const css$14 = /* css */`
   @layer navi {
     :root {
       /* A control that overlaps its neighbours (the members of a Group share
@@ -102,7 +102,7 @@ const css$15 = /* css */`
     }
   }
 `;
-import.meta.css = [css$15, "@jsenv/navi/src/navi_z_indexes.js"];
+import.meta.css = [css$14, "@jsenv/navi/src/navi_z_indexes.js"];
 
 const addIntoArray = (array, ...valuesToAdd) => {
   if (valuesToAdd.length === 1) {
@@ -371,7 +371,7 @@ installImportMetaCssBuild(import.meta);/**
  * the very first render and the browser does everything on its own.
  */
 const URL_TARGET_ATTRIBUTE = "data-url-target";
-const css$14 = /* css */`
+const css$13 = /* css */`
   @layer navi {
     [${URL_TARGET_ATTRIBUTE}] {
       animation: navi_url_target var(--navi-url-target-duration, 2000ms)
@@ -389,7 +389,7 @@ const css$14 = /* css */`
     }
   }
 `;
-import.meta.css = [css$14, "@jsenv/navi/src/nav/url_target/url_target.js"];
+import.meta.css = [css$13, "@jsenv/navi/src/nav/url_target/url_target.js"];
 let urlTargetOptions = {
   block: "start",
   behavior: "instant",
@@ -2335,17 +2335,37 @@ const ActionRequesterContext = createContext();
  * one wrong finds out by opening a popup it meant to keep shut. `ownTarget` is
  * that knowledge, said once.
  *
- * The other half is interactivity: the affordance is a control, so it already
- * refuses on its own terms once the zone around it holds it read-only — but a
- * caller's `onClick` is plain DOM and fires before any gate. So an own target
- * withholds the caller's handler until its own gate has allowed it, and by
- * default goes rather than greys: a remove cross that still removes is worse
- * than no cross, and one that refuses politely still says "there is something to
- * remove here" on a row that is only being read.
+ * The other half is interactivity, and the question that settles it is: **does
+ * this affordance write to the control it sits in?**
+ *
+ * - it does, and once the value cannot be changed it has nothing left to offer:
+ *   it GOES. A remove cross that still removes is worse than no cross, and one
+ *   that refuses politely still says "there is something to remove here" on a
+ *   row that is only being read. That is the default.
+ * - it does, but its presence is information in itself: `"refuse"` keeps it and
+ *   refuses in its own words, like every other navi control.
+ * - it does NOT — a diskette saving a row into the reader's own address book, a
+ *   badge explaining why a placement is odd. The read-only around it is about a
+ *   value it never touches, so `"always"` ignores it: the affordance stays lit
+ *   and stays pressable. It is on the caller to use it only for a gesture that
+ *   genuinely writes nothing to the control around it.
+ *
+ * Whichever mode, the affordance's own handler runs from inside its own gate
+ * rather than from the DOM: a caller's `onClick` fires before any of this, and
+ * would go off from a button drawn greyed.
  */
 
 
-const OWN_TARGET_ATTRIBUTE = "data-navi-own-target";
+/**
+ * The whole claim, in the DOM, on any element — a `<button>` an application
+ * draws itself as much as a navi control. It is read from the outside and
+ * nowhere else: by the controls above (below), and by the gesture readers
+ * (@jsenv/dom's DRAG_EXCLUDED_SELECTOR and DRAG_IGNORED_SELECTOR), which is why
+ * one attribute is enough and the `ownTarget` prop only writes it.
+ *
+ * Its value is the mode, when there is one to say: `data-own-target="always"`.
+ */
+const OWN_TARGET_ATTRIBUTE = "data-own-target";
 
 /**
  * Whether `event` was aimed at an own target sitting below this control — in
@@ -2354,7 +2374,7 @@ const OWN_TARGET_ATTRIBUTE = "data-navi-own-target";
  * Read from the event's target rather than from a mark left by a handler: the
  * question is "who is this press for", and the DOM between the pointer and the
  * control is the whole answer. Nothing is asked of the own target itself, which
- * is what lets it be anything — a button, a link, a field.
+ * is what lets it be anything — a button, a link, a field, a bare element.
  */
 const isAimedAtOwnTargetBelow = (event, controlHost) => {
   const target = event?.target;
@@ -2378,19 +2398,25 @@ const isAimedAtOwnTargetBelow = (event, controlHost) => {
 };
 
 /**
- * Whether an own target has nothing to offer where it sits: the zone around it
- * is read-only, disabled or busy, so the affordance goes.
- *
- * `ownTarget="refuse"` keeps it on screen instead, refusing with a callout like
- * every other navi control — for an affordance whose presence is information in
- * itself (an eye that opens a profile is worth seeing on a row being read).
+ * Whether the read-only, disabled and busy of the zone around this own target
+ * are about it at all — see the modes at the top of this file.
+ */
+const ownTargetIgnoresZoneState = (ownTarget) => ownTarget === "always";
+
+/**
+ * Whether an own target has nothing to offer where it sits: it writes to the
+ * control around it, and that control cannot be changed, so the affordance goes.
  */
 const useOwnTargetHidden = (props) => {
   const disabled = useContext(DisabledContext);
   const readOnly = useContext(ReadOnlyContext);
   const loading = useContext(LoadingContext$1);
   const { ownTarget } = props;
-  if (!ownTarget || ownTarget === "refuse") {
+  if (
+    !ownTarget ||
+    ownTarget === "refuse" ||
+    ownTargetIgnoresZoneState(ownTarget)
+  ) {
     return false;
   }
   return Boolean(disabled || readOnly || loading);
@@ -2404,9 +2430,13 @@ const useOwnTargetHidden = (props) => {
  *
  * Beyond recursive object/array comparison it covers the edge cases `===` gets
  * "wrong" for equality purposes: NaN equals NaN, Date compared by time value,
- * cycles don't loop (a seen-set guards circular refs), and same-type is required
- * before descending. Cheap paths run first: reference equality, then the identity
- * short-circuit below, then array length before element-by-element.
+ * cycles don't loop (a set of the pairs being compared guards circular refs),
+ * and same-type is required
+ * before descending. Functions, and objects with nothing enumerable to compare
+ * (a Set, a Map, an element, a URL), are equal by reference only — nothing in
+ * them says whether two are "the same". Cheap paths run first: reference
+ * equality, then the identity short-circuit below, then array length before
+ * element-by-element.
  *
  * SYMBOL_IDENTITY. Two *different* object instances can be declared "conceptually
  * the same" by sharing a SYMBOL_IDENTITY value; the comparison then treats them as
@@ -2468,6 +2498,11 @@ const compareTwoJsValues = (
     if (aType !== bType) {
       return false;
     }
+    if (aType === "function") {
+      // Not the same function (reference equality came first), and nothing in
+      // a function says whether two of them do the same thing.
+      return false;
+    }
     const aIsPrimitive =
       a === null || (aType !== "object" && aType !== "function");
     const bIsPrimitive =
@@ -2478,14 +2513,22 @@ const compareTwoJsValues = (
     if (aIsPrimitive && bIsPrimitive) {
       return a === b;
     }
-    if (seenSet.has(a)) {
-      return false;
-    }
-    if (seenSet.has(b)) {
+    // Back on something still being compared: a cycle. No loop, and no answer
+    // either — equal by a route that never ends is not equal.
+    if (seenSet.has(a) || seenSet.has(b)) {
       return false;
     }
+    // Held only while a and b are being compared, not for the rest of the
+    // walk: the same object is rightly met again elsewhere — in an unordered
+    // array every element of a is tried against every element of b.
     seenSet.add(a);
     seenSet.add(b);
+    const result = compareComposite(a, b);
+    seenSet.delete(a);
+    seenSet.delete(b);
+    return result;
+  };
+  const compareComposite = (a, b) => {
     const aIsArray = Array.isArray(a);
     const bIsArray = Array.isArray(b);
     if (aIsArray !== bIsArray) {
@@ -2543,25 +2586,25 @@ const compareTwoJsValues = (
       return true;
     }
     // Date objects must be compared by time value, not by enumerable keys (which are empty)
-    {
-      const aIsDate = a instanceof Date;
-      const bIsDate = b instanceof Date;
-      if (aIsDate !== bIsDate) {
-        return false;
-      }
-      if (aIsDate && bIsDate) {
-        const aTime = a.getTime();
-        const bTime = b.getTime();
-        if (aTime !== bTime) {
-          return false;
-        }
-      }
+    const aIsDate = a instanceof Date;
+    const bIsDate = b instanceof Date;
+    if (aIsDate !== bIsDate) {
+      return false;
+    }
+    if (aIsDate) {
+      return a.getTime() === b.getTime();
     }
     const aKeys = Object.keys(a);
     const bKeys = Object.keys(b);
     if (aKeys.length !== bKeys.length) {
       return false;
     }
+    if (aKeys.length === 0 && (!isPlainObject$2(a) || !isPlainObject$2(b))) {
+      // A Set, a Map, an element, a URL: nothing enumerable to tell two of them
+      // apart, so they are the same one or they are not — and they are not,
+      // reference equality came first.
+      return false;
+    }
     if (lightKeySet) {
       // compare light keys first, then remaining keys
       // (optimization for cases where some keys are more likely to differ and/or faster to compare)
@@ -2599,6 +2642,11 @@ const compareTwoJsValues = (
   return compare(rootA, rootB);
 };
 
+const isPlainObject$2 = (value) => {
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+};
+
 // Global signal registry for route template detection
 const globalSignalRegistry = new Map();
 let signalIdCounter = 0;
@@ -6861,6 +6909,10 @@ const findControlProxy = (el) => {
   return firstProxy;
 };
 
+let renderMessageText = text => text;
+const setCalloutMessageTextRenderer = renderer => {
+  renderMessageText = renderer;
+};
 const CalloutRequestCloseContext = createContext();
 const useCalloutRequestClose = () => {
   return useContext(CalloutRequestCloseContext);
@@ -6875,6 +6927,48 @@ const renderIntoCallout = (jsx$1, calloutMessageElement, {
   render(calloutJsx, calloutMessageElement);
 };
 
+// An HTML message is rendered through preact rather than innerHTML so that its
+// text can go through renderMessageText: an emoji in a validation message must
+// not make the first line taller than the icon and close button beside it.
+const renderHtmlIntoCallout = (html, calloutMessageElement, {
+  requestClose
+}) => {
+  const template = document.createElement("template");
+  template.innerHTML = html;
+  renderIntoCallout(domToVNodes(template.content), calloutMessageElement, {
+    requestClose
+  });
+};
+
+// Unmounts whatever preact rendered before the element is filled by hand
+// (a DOM node, an iframe); innerHTML alone would leave preact believing its
+// tree is still there.
+const clearCalloutMessage = calloutMessageElement => {
+  render(null, calloutMessageElement);
+  calloutMessageElement.innerHTML = "";
+};
+const domToVNodes = node => {
+  const vnodes = [];
+  for (const child of node.childNodes) {
+    if (child.nodeType === Node.TEXT_NODE) {
+      vnodes.push(renderMessageText(child.data));
+      continue;
+    }
+    if (child.nodeType !== Node.ELEMENT_NODE) {
+      continue;
+    }
+    const props = {};
+    for (const {
+      name,
+      value
+    } of child.attributes) {
+      props[name] = value;
+    }
+    vnodes.push(h(child.localName, props, ...domToVNodes(child)));
+  }
+  return vnodes;
+};
+
 installImportMetaCssBuild(import.meta);/**
  * A callout component that mimics native browser validation messages.
  * Features:
@@ -6884,7 +6978,7 @@ installImportMetaCssBuild(import.meta);/**
  * - Arrow automatically shows when pointing at a valid anchor element
  * - Centers in viewport when no anchor element provided or anchor is too big
  */
-const css$13 = /* css */`
+const css$12 = /* css */`
   @layer navi {
     .navi_callout {
       /* A callout is parented to what it explains, so it inherits from it — and
@@ -6986,7 +7080,10 @@ const css$13 = /* css */`
       }
 
       .navi_callout_body {
-        --callout-icon-height: round(1.5em, 1px);
+        /* The first line of the message: the icon and the close button sit
+           in columns of that height, pinned to the top, so both stay level
+           with it however many lines the message takes. */
+        --callout-icon-height: round(1lh, 1px);
 
         position: relative;
         display: flex;
@@ -7042,10 +7139,15 @@ const css$13 = /* css */`
       align-self: flex-start;
 
       .navi_callout_close_button {
-        width: 1em;
-        height: 1em;
-        padding: 0;
-        align-self: center;
+        /* A square filling the column, so the whole first line is the target;
+           the padding keeps the cross itself at glyph size. */
+        display: inline-flex;
+        box-sizing: border-box;
+        aspect-ratio: 1 / 1;
+        height: 100%;
+        padding: 0.2em;
+        align-items: center;
+        justify-content: center;
         color: currentColor;
         font-size: inherit;
         background: none;
@@ -7127,7 +7229,7 @@ const openCallout = (message, {
   skipFocus = false,
   debug = () => {}
 } = {}) => {
-  import.meta.css = [css$13, "@jsenv/navi/src/control/rules/callout/callout.js"];
+  import.meta.css = [css$12, "@jsenv/navi/src/control/rules/callout/callout.js"];
   if (debug === true) {
     debug = (e, ...args) => console.debug(`"${e.type}" -> `, ...args);
   }
@@ -7309,11 +7411,11 @@ const openCallout = (message, {
     } else if (newMessage instanceof Node) {
       // Handle DOM node (cloned from CSS selector)
       debug(`callout update message (node)`);
-      calloutMessageElement.innerHTML = "";
+      clearCalloutMessage(calloutMessageElement);
       calloutMessageElement.appendChild(newMessage);
     } else if (typeof newMessage === "function") {
       debug(`callout update message (function)`);
-      calloutMessageElement.innerHTML = "";
+      clearCalloutMessage(calloutMessageElement);
       newMessage({
         renderIntoCallout: jsx => renderIntoCallout(jsx, calloutMessageElement, {
           requestClose
@@ -7338,12 +7440,13 @@ const openCallout = (message, {
         iframe.style.backgroundColor = "white";
         iframe.srcdoc = newMessage;
         debug(`callout update message (html document iframe)`);
-        // Clear existing content and add iframe
-        calloutMessageElement.innerHTML = "";
+        clearCalloutMessage(calloutMessageElement);
         calloutMessageElement.appendChild(iframe);
       } else {
         debug(`callout update message: ${typeof newMessage === "string" ? newMessage.slice(0, 80) : String(newMessage)}`);
-        calloutMessageElement.innerHTML = newMessage;
+        renderHtmlIntoCallout(String(newMessage), calloutMessageElement, {
+          requestClose
+        });
       }
     }
     // After updating content the callout size likely changed — re-position immediately
@@ -16627,16 +16730,10 @@ const getHowToHandleStyleProp = (name) => {
   }
   return getStyle;
 };
-const prepareStyleValue = (
-  existingValue,
-  value,
-  name,
-  styleContext,
-  context,
-) => {
+const prepareStyleValue = (existingValue, value, name, styleContext) => {
   const stringifier = getStringifier(name);
-  const cssValue = stringifier(value, name, styleContext, context);
-  const mergedValue = mergeOneStyle(existingValue, cssValue, name, context);
+  const cssValue = stringifier(value, name, styleContext);
+  const mergedValue = mergeOneStyle(existingValue, cssValue, name, "css");
   return mergedValue;
 };
 
@@ -17725,30 +17822,61 @@ const isKeyboardModality = () => keyboardNavigationUsed;
     return false;
   };
 
-  // Shared setup for :focus and :focus-visible. Both need focusin/focusout
-  // listeners + a MutationObserver on aria-controls so that when the attribute
-  // changes while the element is focused, old and new controlled elements are
-  // notified to re-check their own focus state.
-  // extraSetup: optional (el, callback) => teardown for pseudo-class-specific
-  // listeners (e.g. keydown/keyup for :focus-visible).
-  const setupFocus = (el, callback) => {
-    const onFocusChange = (e) => {
-      callback();
-      notifyAriaControlled(el, e);
-    };
-    el.addEventListener("focusin", onFocusChange);
-    el.addEventListener("focusout", onFocusChange);
-    // Only observe aria-controls mutations when the element already has the
-    // attribute at setup time. If aria-controls is guaranteed to be set before
-    // initPseudoStyles runs (e.g. passed as a prop in box.jsx), this covers all
-    // real cases without paying the MutationObserver cost for every element.
-    let observer;
-    // if (el.hasAttribute("aria-controls")) {
-    observer = new MutationObserver((mutations) => {
-      if (!el.matches(":focus-within")) {
-        return;
+  // One registration per element for everything focus-related, shared by
+  // :focus, :focus-visible and :focus-within: they all react to the same
+  // focusin/focusout, and they all re-check through the same callback (see
+  // initPseudoStyles), which the Set turns into one call.
+  const focusTrackingWeakMap = new WeakMap();
+  const trackFocus = (el, callback) => {
+    let tracking = focusTrackingWeakMap.get(el);
+    if (!tracking) {
+      const callbackSet = new Set();
+      const onFocusChange = (e) => {
+        for (const trackedCallback of callbackSet) {
+          trackedCallback();
+        }
+        notifyAriaControlled(el, e);
+      };
+      el.addEventListener("focusin", onFocusChange);
+      el.addEventListener("focusout", onFocusChange);
+      tracking = {
+        callbackSet,
+        teardown: () => {
+          el.removeEventListener("focusin", onFocusChange);
+          el.removeEventListener("focusout", onFocusChange);
+          focusTrackingWeakMap.delete(el);
+        },
+      };
+      focusTrackingWeakMap.set(el, tracking);
+      observeAriaControls();
+    }
+    tracking.callbackSet.add(callback);
+    return () => {
+      tracking.callbackSet.delete(callback);
+      if (tracking.callbackSet.size === 0) {
+        tracking.teardown();
       }
+    };
+  };
+  // When aria-controls changes on a focused element, what it used to control
+  // and what it controls now both re-check their inherited focus. One observer
+  // on the document rather than one per tracked element: the attribute changes
+  // rarely, on few elements, while thousands are tracked — and it can be set
+  // after the element was, so "has it at setup" would miss it.
+  let ariaControlsObserver = null;
+  const observeAriaControls = () => {
+    if (ariaControlsObserver) {
+      return;
+    }
+    ariaControlsObserver = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
+        const el = mutation.target;
+        if (!focusTrackingWeakMap.has(el)) {
+          continue;
+        }
+        if (!el.matches(":focus-within")) {
+          continue;
+        }
         const oldIds = (mutation.oldValue || "").split(" ").filter(Boolean);
         for (const id of oldIds) {
           const controlled = document.getElementById(id);
@@ -17756,30 +17884,20 @@ const isKeyboardModality = () => keyboardNavigationUsed;
             requestPseudoStateCheck(controlled, {});
           }
         }
+        notifyAriaControlled(el, {});
       }
-      notifyAriaControlled(el, {});
     });
-    observer.observe(el, {
+    ariaControlsObserver.observe(document.documentElement, {
+      subtree: true,
       attributes: true,
       attributeFilter: ["aria-controls"],
       attributeOldValue: true,
     });
-    // }
-    return () => {
-      el.removeEventListener("focusin", onFocusChange);
-      el.removeEventListener("focusout", onFocusChange);
-      observer?.disconnect();
-    };
   };
 
   definePseudoClass(":focus", {
     attribute: "data-focus",
-    setup: (el, callback) => {
-      const cleanup = setupFocus(el, callback);
-      return () => {
-        cleanup();
-      };
-    },
+    setup: trackFocus,
     test: (el) => {
       if (el.matches(":focus")) {
         return true;
@@ -17795,9 +17913,7 @@ const isKeyboardModality = () => keyboardNavigationUsed;
     // No per-element keydown/keyup listener: the shared recheckFocusChainOnKey
     // handler re-checks the focused element (the only one a keystroke can turn
     // focus-visible) so a keypress stays O(1), not O(number-of-boxes).
-    setup: (el, callback) => {
-      return setupFocus(el, callback);
-    },
+    setup: trackFocus,
     test: (el) => {
       if (isMatchingFocusVisible(el)) {
         return true;
@@ -17810,18 +17926,7 @@ const isKeyboardModality = () => keyboardNavigationUsed;
   });
   definePseudoClass(":focus-within", {
     attribute: "data-focus-within",
-    setup: (el, callback) => {
-      const onFocusChange = (e) => {
-        callback();
-        notifyAriaControlled(el, e);
-      };
-      el.addEventListener("focusin", onFocusChange);
-      el.addEventListener("focusout", onFocusChange);
-      return () => {
-        el.removeEventListener("focusin", onFocusChange);
-        el.removeEventListener("focusout", onFocusChange);
-      };
-    },
+    setup: trackFocus,
     test: (el) => {
       if (el.matches(":focus-within")) {
         return true;
@@ -18116,8 +18221,18 @@ const initPseudoStyles = (
       onStateChange(state, oldPseudoState);
     }),
   );
-  element.addEventListener("navi_pseudo_state_request_check", () => {
+  // One function for every way a re-check can be asked, so that setups
+  // registering it side by side (the focus tracking, for one) hold the same
+  // callback and call it once.
+  const requestCheck = () => {
     checkPseudoClasses();
+  };
+  element.addEventListener("navi_pseudo_state_request_check", requestCheck);
+  addTeardown(() => {
+    element.removeEventListener(
+      "navi_pseudo_state_request_check",
+      requestCheck,
+    );
   });
 
   for (const pseudoClass of pseudoClasses) {
@@ -18128,9 +18243,7 @@ const initPseudoStyles = (
     }
     const { setup } = pseudoClassDefinition;
     if (setup) {
-      const cleanup = setup(element, () => {
-        checkPseudoClasses();
-      });
+      const cleanup = setup(element, requestCheck);
       addTeardown(cleanup);
     }
   }
@@ -18150,6 +18263,11 @@ const applyStyle = (
     return;
   }
   const styleToApply = getStyleToApply(style, pseudoState, pseudoNamedStyles);
+  // The same object comes back for every state change of a box whose inline
+  // style has no pseudo entry: nothing to write.
+  if (appliedStyleWeakMap.get(element) === styleToApply) {
+    return;
+  }
   updateStyle(element, styleToApply, preventInitialTransition);
 };
 
@@ -18164,52 +18282,74 @@ const getStyleToApply = (styles, pseudoState, pseudoNamedStyles) => {
   ) {
     return styles;
   }
-
-  const isMatching = (pseudoKey) => {
-    if (pseudoKey.startsWith("::")) {
-      const nextColonIndex = pseudoKey.indexOf(":", 2);
-      if (nextColonIndex === -1) {
-        return true;
-      }
-      // Handle pseudo-elements with states like "::-navi-loader:checked:disabled"
-      const pseudoStatesString = pseudoKey.slice(nextColonIndex);
-      return isMatching(pseudoStatesString);
+  let style = styles;
+  for (const pseudoKey of Object.keys(pseudoNamedStyles)) {
+    const requiredStates = getPseudoKeyRequiredStates(pseudoKey);
+    if (!requiredStates.every((state) => pseudoState[state])) {
+      continue;
     }
-    const nextColonIndex = pseudoKey.indexOf(":", 1);
-    if (nextColonIndex === -1) {
-      return pseudoState[pseudoKey];
+    if (style === styles) {
+      style = { ...styles };
     }
-    // Handle compound pseudo-states like ":checked:disabled"
-    return pseudoKey
-      .slice(1)
-      .split(":")
-      .every((state) => pseudoState[state]);
-  };
-
-  const styleToAddSet = new Set();
-  for (const pseudoKey of Object.keys(pseudoNamedStyles)) {
-    if (isMatching(pseudoKey)) {
-      const stylesToApply = pseudoNamedStyles[pseudoKey];
-      styleToAddSet.add(stylesToApply);
+    // Both sides are already normalized for CSS by the box; only the
+    // properties that compose (a press scale on top of a translate) go through
+    // a merge, the rest is a plain override.
+    const styleToAdd = pseudoNamedStyles[pseudoKey];
+    for (const key of Object.keys(styleToAdd)) {
+      const value = styleToAdd[key];
+      if (value === undefined) {
+        continue;
+      }
+      if (key === "transform" || key === "willChange") {
+        style[key] = mergeOneStyle(style[key], value, key, "css");
+      } else {
+        style[key] = value;
+      }
     }
   }
-  if (styleToAddSet.size === 0) {
-    return styles;
+  return style;
+};
+
+// The state names a pseudo key asks for, parsed once: the same few keys come
+// back on every state change of every box that has them. "::x" alone always
+// matches; "::x:a:b" and ":a:b" ask for ":a" and ":b" — the state keys as
+// checkPseudoClasses writes them, colon included.
+const pseudoKeyRequiredStatesMap = new Map();
+const getPseudoKeyRequiredStates = (pseudoKey) => {
+  const cached = pseudoKeyRequiredStatesMap.get(pseudoKey);
+  if (cached) {
+    return cached;
   }
-  let style = styles || {};
-  for (const styleToAdd of styleToAddSet) {
-    style = mergeTwoStyles(style, styleToAdd, "css");
+  let requiredStates;
+  if (pseudoKey.startsWith("::")) {
+    const nextColonIndex = pseudoKey.indexOf(":", 2);
+    requiredStates =
+      nextColonIndex === -1
+        ? []
+        : getPseudoKeyRequiredStates(pseudoKey.slice(nextColonIndex));
+  } else {
+    const nextColonIndex = pseudoKey.indexOf(":", 1);
+    requiredStates =
+      nextColonIndex === -1
+        ? [pseudoKey]
+        : pseudoKey
+            .slice(1)
+            .split(":")
+            .map((state) => `:${state}`);
   }
-  return style;
+  pseudoKeyRequiredStatesMap.set(pseudoKey, requiredStates);
+  return requiredStates;
 };
 
-const styleKeySetWeakMap = new WeakMap();
+// element → the style object last written to it, so the next one is written
+// as a difference: the values that changed, the keys it no longer has.
+const appliedStyleWeakMap = new WeakMap();
 const elementTransitionWeakMap = new WeakMap();
 const elementRenderedWeakSet = new WeakSet();
-const NO_STYLE_KEY_SET = new Set();
+const NO_STYLE = {};
 const updateStyle = (element, style, preventInitialTransition) => {
-  const styleKeySet = style ? new Set(Object.keys(style)) : NO_STYLE_KEY_SET;
-  const oldStyleKeySet = styleKeySetWeakMap.get(element) || NO_STYLE_KEY_SET;
+  const styleToApply = style || NO_STYLE;
+  const styleApplied = appliedStyleWeakMap.get(element) || NO_STYLE;
   // TRANSITION ANTI-FLICKER STRATEGY:
   // Problem: When setting both transition and styled properties simultaneously
   // (e.g., el.style.transition = "border-radius 0.3s ease"; el.style.borderRadius = "20px"),
@@ -18219,32 +18359,32 @@ const updateStyle = (element, style, preventInitialTransition) => {
   // transition to "none", then restore the intended transition after the frame completes.
   // We handle multiple updateStyle calls in the same frame gracefully - only one
   // requestAnimationFrame is scheduled per element, and the final transition value wins.
-  let styleKeySetToApply = styleKeySet;
+  let skipTransition = false;
   if (!elementRenderedWeakSet.has(element)) {
-    const hasTransition = styleKeySet.has("transition");
+    const hasTransition = Object.hasOwn(styleToApply, "transition");
     if (hasTransition || preventInitialTransition) {
-      if (elementTransitionWeakMap.has(element)) {
-        elementTransitionWeakMap.set(element, style?.transition);
-      } else {
+      if (!elementTransitionWeakMap.has(element)) {
         element.style.transition = "none";
-        elementTransitionWeakMap.set(element, style?.transition);
       }
-      // Don't apply the transition property now - we've set it to "none" temporarily
-      styleKeySetToApply = new Set(styleKeySet);
-      styleKeySetToApply.delete("transition");
+      elementTransitionWeakMap.set(element, styleToApply.transition);
+      // Stays "none" until the first frame puts the intended value back
+      skipTransition = true;
     }
     afterFirstFrame(element);
   }
 
-  // Apply all styles normally (excluding transition during anti-flicker)
-  const keysToDelete = new Set(oldStyleKeySet);
-  for (const key of styleKeySetToApply) {
-    const value = style[key];
+  for (const key of Object.keys(styleToApply)) {
+    const value = styleToApply[key];
     if (value === undefined || value === null) {
-      // Treat undefined/null as "remove" — leave key in keysToDelete
+      // a removal: handled below with the keys this style no longer has
+      continue;
+    }
+    if (skipTransition && key === "transition") {
+      continue;
+    }
+    if (styleApplied[key] === value) {
       continue;
     }
-    keysToDelete.delete(key);
     if (key.startsWith("--")) {
       element.style.setProperty(key, value);
     } else {
@@ -18252,8 +18392,15 @@ const updateStyle = (element, style, preventInitialTransition) => {
     }
   }
 
-  // Remove obsolete styles
-  for (const key of keysToDelete) {
+  for (const key of Object.keys(styleApplied)) {
+    const previousValue = styleApplied[key];
+    if (previousValue === undefined || previousValue === null) {
+      continue;
+    }
+    const value = styleToApply[key];
+    if (value !== undefined && value !== null) {
+      continue;
+    }
     if (key.startsWith("--")) {
       element.style.removeProperty(key);
     } else {
@@ -18261,7 +18408,7 @@ const updateStyle = (element, style, preventInitialTransition) => {
     }
   }
 
-  styleKeySetWeakMap.set(element, styleKeySet);
+  appliedStyleWeakMap.set(element, styleToApply);
 };
 
 // One frame for every element waiting for its first one, not one frame each.
@@ -18313,8 +18460,10 @@ const useComposeElementRef = (syncElement, externalRef) => {
   const cleanupRef = useRef(null);
   const elRef = useRef(null);
   const prevSyncElementRef = useRef(undefined);
-  const refCallbackRef = useRef(null);
+  const stableRef = useRef(null);
   const externalRefRef = useRef(externalRef);
+  const syncElementRef = useRef(syncElement);
+  syncElementRef.current = syncElement;
   // Detect external ref identity change between renders. The refCallback is
   // stable across renders, so when the parent passes a new ref object (or
   // switches from null to a ref), Preact does NOT re-fire the callback while
@@ -18338,24 +18487,24 @@ const useComposeElementRef = (syncElement, externalRef) => {
   }
   externalRefRef.current = externalRef;
 
-  const runSync = (el) => {
-    if (cleanupRef.current) {
-      cleanupRef.current();
-      cleanupRef.current = null;
-    }
-    prevSyncElementRef.current = syncElement;
-    const cleanup = syncElement(el);
-    if (typeof cleanup === "function") {
-      cleanupRef.current = cleanup;
-    }
-  };
-
-  // If element already mounted, re-sync when syncElement reference changed.
-  if (elRef.current && syncElement !== prevSyncElementRef.current) {
-    runSync(elRef.current);
-  }
-
-  if (!refCallbackRef.current) {
+  if (!stableRef.current) {
+    // Created once, like the ref callback that calls it, and reading the sync
+    // function through a ref for that reason: the element can be replaced long
+    // after the first render — a tag that changes, a box hidden then shown —
+    // and what the new element gets must be the current render's sync, not
+    // the one the first render closed over.
+    const runSync = (el) => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+        cleanupRef.current = null;
+      }
+      const syncElementNow = syncElementRef.current;
+      prevSyncElementRef.current = syncElementNow;
+      const cleanup = syncElementNow(el);
+      if (typeof cleanup === "function") {
+        cleanupRef.current = cleanup;
+      }
+    };
     const refCallback = (el) => {
       elRef.current = el;
       // Keep .current in sync immediately so useEffect callbacks that read
@@ -18379,10 +18528,15 @@ const useComposeElementRef = (syncElement, externalRef) => {
         prevSyncElementRef.current = undefined;
       }
     };
-    refCallbackRef.current = refCallback;
+    stableRef.current = { refCallback, runSync };
+  }
+  const { refCallback, runSync } = stableRef.current;
+
+  // If element already mounted, re-sync when syncElement reference changed.
+  if (elRef.current && syncElement !== prevSyncElementRef.current) {
+    runSync(elRef.current);
   }
 
-  const refCallback = refCallbackRef.current;
   refCallback.current = elRef.current;
   return refCallback;
 };
@@ -18576,12 +18730,6 @@ import.meta.css = [/* css */`
            told it may, and without that the body grows instead of scrolling */
         min-height: 0;
         flex: 0 1 auto;
-        /* Overflow makes it focusable via tab: apply the outline styles */
-        outline-width: var(--navi-focus-outline-width);
-        /* Outline must appear ON the body, not outside */
-        /* Because for instance when body is within dialog or slide with overflow: hidden it would not be visible */
-        outline-offset: calc(-1 * var(--navi-focus-outline-width));
-        overflow: auto;
 
         /* The same reading as the header's corners above, on all four: a body
            follows the corners of the box it is drawn in — which is also what
@@ -18590,6 +18738,12 @@ import.meta.css = [/* css */`
         border-top-right-radius: inherit;
         border-bottom-right-radius: inherit;
         border-bottom-left-radius: inherit;
+        /* Overflow makes it focusable via tab: apply the outline styles */
+        outline-width: var(--navi-focus-outline-width);
+        /* Outline must appear ON the body, not outside */
+        /* Because for instance when body is within dialog or slide with overflow: hidden it would not be visible */
+        outline-offset: calc(-1 * var(--navi-focus-outline-width));
+        overflow: auto;
 
         &:focus-visible {
           outline-style: solid;
@@ -18736,6 +18890,7 @@ const PSEUDO_STATE_CHILD_PROP_SET = new Set(["tabIndex", "tabindex"]);
  *   childPropSet?: Set<string>,
  *   preventInitialTransition?: boolean,
  *   separator?: import("ignore:preact").ComponentChildren | ((index: number) => import("ignore:preact").ComponentChildren),
+ *   ownTarget?: boolean | "refuse" | "always",
  *   children?: import("ignore:preact").ComponentChildren,
  *   [key: string]: any,
  * }>}
@@ -18743,10 +18898,94 @@ const PSEUDO_STATE_CHILD_PROP_SET = new Set(["tabIndex", "tabindex"]);
 const Box = props => {
   const {
     ref,
+    children,
+    separator,
+    interactions,
+    ...computeProps
+  } = props;
+  const parentBoxFlow = useContext(BoxFlowContext);
+  // Which interactions this box answers, and with what. Read here rather than
+  // on the control, so a swipe or a hold can be declared on anything — a row, a
+  // card, a block of text — and reach the control it belongs to (which is what
+  // carries the action, and what knows it is disabled) by looking for it.
+  // Read through a ref by the effect below: what an interaction DOES is this
+  // render, while WHEN it happens is wired once, at mount (see
+  // useInteractionsEffect).
+  const interactionsRef = useRef(null);
+  interactionsRef.current = resolveInteractions(interactions);
+
+  // What the props say about this box is worked out once per distinct set of
+  // them: a parent re-rendering hands every box below it a new props object,
+  // and most of the time nothing in it has changed. Handlers are the
+  // exception — a closure is new on every render — so they are compared by
+  // name only and put back fresh, see withCurrentHandlers.
+  const renderMemoRef = useRef(null);
+  const renderMemo = renderMemoRef.current;
+  let computed;
+  if (renderMemo && renderMemo.parentBoxFlow === parentBoxFlow && arePropsEquivalent(renderMemo.props, computeProps)) {
+    computed = withCurrentHandlers(renderMemo.computed, computeProps);
+  } else {
+    computed = computeBox(computeProps, parentBoxFlow);
+  }
+  renderMemoRef.current = {
+    props: computeProps,
+    parentBoxFlow,
+    computed
+  };
+  const {
+    TagName,
+    boxFlow,
+    boxFlowIsDefault,
+    row,
+    column,
+    aspectRatio,
+    visualSelector,
+    innerClassName,
+    selfForwardedProps,
+    childForwardedProps,
+    styleDeps
+  } = computed;
+  const syncBox = useCallback(computed.syncBox, styleDeps);
+  const finalRef = useComposeElementRef(syncBox, ref);
+  useInteractionsEffect(finalRef, interactionsRef);
+  let innerChildren = children;
+  if (separator) {
+    // Flatten nested arrays (e.g., from .map()) to treat each element as individual child
+    innerChildren = applySeparatorOnChildren(innerChildren, separator);
+  }
+
+  // When hasChildUsingForwardedProps is used it means
+  // Some/all the children needs to access remainingProps
+  // to render and will provide a function to do so.
+  if (props.hasChildUsingForwardedProps) {
+    innerChildren = jsx(BoxForwardedPropsContext.Provider, {
+      value: childForwardedProps,
+      children: innerChildren
+    });
+  }
+  return jsx(TagName, {
+    ref: finalRef,
+    className: innerClassName,
+    "navi-box-flow": boxFlowIsDefault ? undefined : boxFlow,
+    "navi-box-flow-row": row ? "" : undefined,
+    "navi-box-flow-column": column ? "" : undefined,
+    "navi-aspect-ratio": aspectRatio ? aspectRatio : undefined,
+    "data-visual-selector": visualSelector,
+    ...selfForwardedProps,
+    children: jsx(BoxFlowContext.Provider, {
+      value: boxFlow,
+      children: innerChildren
+    })
+  });
+};
+
+// Everything the props decide, for the JSX and for the DOM sync. Pure, which
+// is what lets Box keep the previous result when the props are equivalent.
+const computeBox = (props, parentBoxFlow) => {
+  const {
     as: asProp = "div",
     baseClassName,
     className,
-    baseStyle,
     // style management
     style,
     styleCSSVars = STYLE_CSS_VARS_DEFAULT,
@@ -18772,8 +19011,6 @@ const Box = props => {
     // (when transition is set via props, this is done automatically)
     // so this prop is useful only when transition is enabled from "outside" (via CSS)
     preventInitialTransition,
-    children,
-    separator,
     // Layout roles inside a scrolling container (a Dialog, a Popover): the
     // header stays at the top and the footer at the bottom while the rest
     // scrolls, or — when a body is present — the body is what scrolls and the
@@ -18783,22 +19020,24 @@ const Box = props => {
     header,
     footer,
     body,
-    // Which interactions this box answers, and with what. Read here rather than
-    // on the control, so a swipe or a hold can be declared on anything — a row, a
-    // card, a block of text — and reach the control it belongs to (which is what
-    // carries the action, and what knows it is disabled) by looking for it.
-    interactions,
+    // A press landing here is aimed AT this box, not at whatever it sits in — a
+    // cross an application draws in a card's corner, a badge on a row that
+    // travels. Writing the attribute is the whole of it here: it is read off
+    // the DOM by the controls above and by the gesture readers, and what an
+    // affordance makes of the read-only around it is a question only a control
+    // can answer (see own_target.js).
+    ownTarget,
     ...rest
   } = props;
+  if (ownTarget) {
+    rest[OWN_TARGET_ATTRIBUTE] = typeof ownTarget === "string" ? ownTarget : "";
+  }
   let as = asProp;
 
   // A box that scrolls is what gives header/footer/body their meaning, and
   // saying overflow="auto" is already saying it — no second prop for the same
   // fact. Dialog and Popover get it the same way, by asking for that overflow.
-  const scrolls = ["overflow", "overflowX", "overflowY"].some(name => {
-    const value = rest[name];
-    return value === "auto" || value === "scroll";
-  });
+  const scrolls = isScrollingOverflow(rest.overflow) || isScrollingOverflow(rest.overflowX) || isScrollingOverflow(rest.overflowY);
   // <header>/<footer> rather than a div: the role is exactly what those tags
   // mean, and a screen reader gets it for free. The body stays a div — <main>
   // means "the main content of the document", which a popup's body is not.
@@ -18834,8 +19073,6 @@ const Box = props => {
     }
   }
   const defaultDisplay = getDefaultDisplay(TagName);
-  // Read the parent flow early so we can use it when display="inherit" is requested.
-  const parentBoxFlow = useContext(BoxFlowContext);
   let {
     inline,
     block,
@@ -18911,12 +19148,6 @@ const Box = props => {
   }
   const boxFlowIsDefault = boxFlow === defaultDisplay;
 
-  // Read through a ref by the effect below: what an interaction DOES is this
-  // render, while WHEN it happens is wired once, at mount (see
-  // useInteractionsEffect).
-  const interactionsRef = useRef(null);
-  interactionsRef.current = resolveInteractions(interactions);
-  const remainingPropKeySet = new Set(Object.keys(rest));
   // The box is only a frame and one of its descendants IS the component (a Button
   // and its content): everything, event handlers included, belongs to that
   // descendant.
@@ -18924,15 +19155,20 @@ const Box = props => {
   const innerClassName = withPropsClassName(baseClassName, className);
   const selfForwardedProps = {};
   const childForwardedProps = {};
-  let finalRef;
+  let styleDeps;
+  let syncBox;
   {
-    const styleDeps = [
+    styleDeps = [
     // Layout and alignment props
     parentBoxFlow, boxFlow,
     // Style context dependencies
     styleCSSVars, pseudoClasses, pseudoElements,
     // Selectors
     visualSelector, pseudoStateSelector, preventInitialTransition];
+    // The pseudo state goes into the deps as key/value entries and never as the
+    // object itself: a control builds that object on every render, and its
+    // identity in the deps would re-run the sync — listeners, observers, style
+    // writes — on each of them, for a state that has not changed.
     let innerPseudoState;
     if (basePseudoState && pseudoState) {
       innerPseudoState = {};
@@ -18942,30 +19178,28 @@ const Box = props => {
         if (pseudoStateKeySet.has(key)) {
           pseudoStateKeySet.delete(key);
           const value = pseudoState[key];
-          styleDeps.push(value);
+          styleDeps.push(key, value);
           innerPseudoState[key] = value;
         } else {
           const value = basePseudoState[key];
-          styleDeps.push(value);
+          styleDeps.push(key, value);
           innerPseudoState[key] = value;
         }
       }
       for (const key of pseudoStateKeySet) {
         const value = pseudoState[key];
-        styleDeps.push(value);
+        styleDeps.push(key, value);
         innerPseudoState[key] = value;
       }
     } else if (basePseudoState) {
       innerPseudoState = basePseudoState;
       for (const key of Object.keys(basePseudoState)) {
-        const value = basePseudoState[key];
-        styleDeps.push(value);
+        styleDeps.push(key, basePseudoState[key]);
       }
     } else if (pseudoState) {
       innerPseudoState = pseudoState;
       for (const key of Object.keys(pseudoState)) {
-        const value = pseudoState[key];
-        styleDeps.push(value);
+        styleDeps.push(key, pseudoState[key]);
       }
     } else {
       innerPseudoState = PSEUDO_STATE_DEFAULT;
@@ -18983,8 +19217,8 @@ const Box = props => {
     };
     let boxPseudoNamedStyles = PSEUDO_NAMED_STYLES_DEFAULT;
     const canForwardToChild = hasChildUsingForwardedProps;
-    const addStyle = (value, name, styleContext, stylesTarget, context) => {
-      const mergedValue = prepareStyleValue(stylesTarget[name], value, name, styleContext, context);
+    const addStyle = (value, name, styleContext, stylesTarget) => {
+      const mergedValue = prepareStyleValue(stylesTarget[name], value, name, styleContext);
       const cssVar = styleContext.styleCSSVars[name];
       if (cssVar) {
         addCSSVar(mergedValue, cssVar, stylesTarget);
@@ -19006,20 +19240,20 @@ const Box = props => {
       styleDeps.push(name, value); // impact box style -> add to deps
       stylesTarget[name] = value;
     };
-    const addStyleMaybeForwarding = (value, name, styleContext, stylesTarget, context, visualChildPropStrategy) => {
+    const addStyleMaybeForwarding = (value, name, styleContext, stylesTarget, visualChildPropStrategy) => {
       if (!visualChildPropStrategy) {
-        addStyle(value, name, styleContext, stylesTarget, context);
+        addStyle(value, name, styleContext, stylesTarget);
         return false;
       }
       const cssVar = styleCSSVars[name];
       if (cssVar) {
         // css var wins over visual child handling
-        addStyle(value, name, styleContext, stylesTarget, context);
+        addStyle(value, name, styleContext, stylesTarget);
         return false;
       }
       if (visualChildPropStrategy === "copy") {
         // we stylyze ourself + forward prop to the child
-        addStyle(value, name, styleContext, stylesTarget, context);
+        addStyle(value, name, styleContext, stylesTarget);
       }
       if (!canForwardToChild) {
         return false;
@@ -19032,13 +19266,15 @@ const Box = props => {
     // style={{ ":hover": { backgroundColor: "red" } }}
     // then we'll track ":hover" state changes even for basic elements like <div>
     const pseudoClassesFromStyleSet = new Set();
-    boxPseudoNamedStyles = {};
     const visitProp = (value, name, styleContext, boxStylesTarget, styleOrigin) => {
       const isPseudoElement = name.startsWith("::");
       const isPseudoClass = name.startsWith(":");
       if (isPseudoElement || isPseudoClass) {
         styleDeps.push(name);
         pseudoClassesFromStyleSet.add(name);
+        if (boxPseudoNamedStyles === PSEUDO_NAMED_STYLES_DEFAULT) {
+          boxPseudoNamedStyles = {};
+        }
         const pseudoStyleContext = {
           ...styleContext,
           styleCSSVars: {
@@ -19059,18 +19295,16 @@ const Box = props => {
         const pseudoClassStyles = {};
         for (const key of pseudoStyleKeys) {
           visitProp(value[key], key, pseudoStyleContext, pseudoClassStyles, "pseudo_style");
-          boxPseudoNamedStyles[name] = pseudoClassStyles;
         }
+        boxPseudoNamedStyles[name] = pseudoClassStyles;
         return;
       }
-      const context = styleOrigin === "base_style" ? "js" : "css";
-      const isCss = styleOrigin === "base_style" || styleOrigin === "style";
-      if (isCss) {
-        addStyle(value, name, styleContext, boxStylesTarget, context);
+      if (styleOrigin === "style") {
+        addStyle(value, name, styleContext, boxStylesTarget);
         return;
       }
       if (name.startsWith("--")) {
-        addStyle(value, name, styleContext, boxStylesTarget, context);
+        addStyle(value, name, styleContext, boxStylesTarget);
         return;
       }
       const isPseudoStyle = styleOrigin === "pseudo_style";
@@ -19082,7 +19316,7 @@ const Box = props => {
         if (
         // prop name === css style name
         !getStyle) {
-          const needForwarding = addStyleMaybeForwarding(value, name, styleContext, boxStylesTarget, context, visualChildPropStrategy);
+          const needForwarding = addStyleMaybeForwarding(value, name, styleContext, boxStylesTarget, visualChildPropStrategy);
           if (needForwarding) {
             if (isPseudoStyle) ; else {
               childForwardedProps[name] = value;
@@ -19097,7 +19331,7 @@ const Box = props => {
         let needForwarding = false;
         for (const styleName of Object.keys(cssValues)) {
           const cssValue = cssValues[styleName];
-          needForwarding = addStyleMaybeForwarding(cssValue, styleName, styleContext, boxStylesTarget, context, visualChildPropStrategy);
+          needForwarding = addStyleMaybeForwarding(cssValue, styleName, styleContext, boxStylesTarget, visualChildPropStrategy);
         }
         if (needForwarding) {
           if (isPseudoStyle) ; else {
@@ -19133,13 +19367,7 @@ const Box = props => {
       }
       return;
     };
-    if (baseStyle) {
-      for (const key of baseStyle) {
-        const value = baseStyle[key];
-        visitProp(value, key, styleContext, boxStyles, "baseStyle");
-      }
-    }
-    for (const propName of remainingPropKeySet) {
+    for (const propName of Object.keys(rest)) {
       const propValue = rest[propName];
       if (baseChildPropSet?.has(propName) || childPropSet?.has(propName)) {
         if (canForwardToChild) {
@@ -19149,9 +19377,6 @@ const Box = props => {
         }
         continue;
       }
-      if (canForwardToChild && toCopySet.has(propName)) {
-        childForwardedProps[propName] = propValue;
-      }
       const isDataAttribute = propName.startsWith("data-");
       if (isDataAttribute) {
         selfForwardedProps[propName] = propValue;
@@ -19193,7 +19418,6 @@ const Box = props => {
         visitProp(styleValue, styleName, styleContext, boxStyles, "style");
       }
     }
-    styleDeps.push(pseudoStateSelector, innerPseudoState);
     let innerPseudoClasses;
     if (pseudoClassesFromStyleSet.size) {
       innerPseudoClasses = [...pseudoClasses];
@@ -19210,7 +19434,7 @@ const Box = props => {
         styleDeps.push(...pseudoClasses);
       }
     }
-    const syncBox = useCallback(boxEl => {
+    syncBox = boxEl => {
       const pseudoStateEl = pseudoStateSelector ? boxEl.querySelector(pseudoStateSelector) : boxEl;
       if (!pseudoStateEl) {
         console.error(`pseudoStateSelector "${pseudoStateSelector}" did not match any element inside the box`, boxEl);
@@ -19225,42 +19449,24 @@ const Box = props => {
         elementToImpact: boxEl,
         elementListeningPseudoState: visualEl === pseudoStateEl ? null : visualEl
       });
-    }, styleDeps);
-    finalRef = useComposeElementRef(syncBox, ref);
-  }
-  useInteractionsEffect(finalRef, interactionsRef);
-  let innerChildren = children;
-  if (separator) {
-    // Flatten nested arrays (e.g., from .map()) to treat each element as individual child
-    innerChildren = applySeparatorOnChildren(innerChildren, separator);
-  }
-
-  // When hasChildUsingForwardedProps is used it means
-  // Some/all the children needs to access remainingProps
-  // to render and will provide a function to do so.
-  if (hasChildUsingForwardedProps) {
-    innerChildren = jsx(BoxForwardedPropsContext.Provider, {
-      value: childForwardedProps,
-      children: innerChildren
-    });
+    };
   }
   const aspectRatio = rest.square || rest.circle ? "1/1" : rest.aspectRatio;
-  return jsx(TagName, {
-    ref: finalRef,
-    className: innerClassName,
-    "navi-box-flow": boxFlowIsDefault ? undefined : boxFlow,
-    "navi-box-flow-row": row ? "" : undefined,
-    "navi-box-flow-column": column ? "" : undefined,
-    "navi-aspect-ratio": aspectRatio ? aspectRatio : undefined,
-    "data-visual-selector": visualSelector,
-    ...selfForwardedProps,
-    children: jsx(BoxFlowContext.Provider, {
-      value: boxFlow,
-      children: innerChildren
-    })
-  });
+  return {
+    TagName,
+    boxFlow,
+    boxFlowIsDefault,
+    row,
+    column,
+    aspectRatio,
+    visualSelector,
+    innerClassName,
+    selfForwardedProps,
+    childForwardedProps,
+    styleDeps,
+    syncBox
+  };
 };
-const toCopySet = new Set([]);
 const applySeparatorOnChildren = (children, separator) => {
   const flattenedChildren = toChildArray(children);
   if (flattenedChildren.length <= 1) {
@@ -19306,6 +19512,62 @@ const isNonZeroSpacing = value => {
   }
   return true;
 };
+const isScrollingOverflow = value => value === "auto" || value === "scroll";
+
+// Same props as far as computeBox is concerned. Handlers count by name only,
+// see withCurrentHandlers; no style or state key starts with "on".
+const arePropsEquivalent = (previousProps, props) => compareTwoJsValues(previousProps, props, {
+  keyComparator: comparePropAt
+});
+const comparePropAt = (a, b, key, recurse) => {
+  if (typeof key === "string" && key.startsWith("on")) {
+    return true;
+  }
+  return recurse(a, b);
+};
+// The previous computation with this render's handlers: a handler goes where
+// its name went the previous time, self or child, the split being decided by
+// props that are the same. The forwarded objects keep their identity when no
+// handler changed, so what reads them through context sees nothing new.
+const withCurrentHandlers = (computed, props) => {
+  let {
+    selfForwardedProps,
+    childForwardedProps
+  } = computed;
+  for (const key of Object.keys(props)) {
+    if (!key.startsWith("on")) {
+      continue;
+    }
+    const value = props[key];
+    if (Object.hasOwn(childForwardedProps, key)) {
+      if (childForwardedProps[key] !== value) {
+        if (childForwardedProps === computed.childForwardedProps) {
+          childForwardedProps = {
+            ...childForwardedProps
+          };
+        }
+        childForwardedProps[key] = value;
+      }
+    } else if (Object.hasOwn(selfForwardedProps, key)) {
+      if (selfForwardedProps[key] !== value) {
+        if (selfForwardedProps === computed.selfForwardedProps) {
+          selfForwardedProps = {
+            ...selfForwardedProps
+          };
+        }
+        selfForwardedProps[key] = value;
+      }
+    }
+  }
+  if (selfForwardedProps === computed.selfForwardedProps && childForwardedProps === computed.childForwardedProps) {
+    return computed;
+  }
+  return {
+    ...computed,
+    selfForwardedProps,
+    childForwardedProps
+  };
+};
 
 const useDebounceTrue = (value, delay = 300) => {
   const [debouncedTrue, setDebouncedTrue] = useState(false);
@@ -19419,7 +19681,7 @@ const setupNetworkMonitoring = () => {
 };
 setupNetworkMonitoring();
 
-installImportMetaCssBuild(import.meta);const css$12 = /* css */`
+installImportMetaCssBuild(import.meta);const css$11 = /* css */`
   .navi_loading_indicator_fluid_container {
     position: relative;
     display: flex;
@@ -19451,7 +19713,7 @@ const LoadingIndicatorFluid = ({
   visuallyHidden,
   ...rest
 }) => {
-  import.meta.css = [css$12, "@jsenv/navi/src/graphic/loading/loading_indicator_fluid.jsx"];
+  import.meta.css = [css$11, "@jsenv/navi/src/graphic/loading/loading_indicator_fluid.jsx"];
   const ref = useRef(null);
   // The container dimensions can be deduced from the ref itself as the indicator is absolute inset 0
   const [containerWidth, setContainerWidth] = useState(0);
@@ -19656,7 +19918,7 @@ const LoadingRectangleSvg = ({
   });
 };
 
-installImportMetaCssBuild(import.meta);const css$11 = /* css */`
+installImportMetaCssBuild(import.meta);const css$10 = /* css */`
   .navi_loading_outline_wrapper {
     position: absolute;
     /* Controls place the outline slightly outside their box, right on top of
@@ -19693,7 +19955,7 @@ installImportMetaCssBuild(import.meta);const css$11 = /* css */`
   }
 `;
 const LoadingOutline = props => {
-  import.meta.css = [css$11, "@jsenv/navi/src/graphic/loading/loading_outline.jsx"];
+  import.meta.css = [css$10, "@jsenv/navi/src/graphic/loading/loading_outline.jsx"];
   if (props.containerRef) {
     const container = props.containerRef.current;
     if (!container) {
@@ -19883,6 +20145,256 @@ const getHrefTargetInfo = (href) => {
   };
 };
 
+/**
+ * A variant of useLayoutEffect that accounts for ancestor <dialog>/<details>
+ * or popover visibility.
+ *
+ * Motivation: some effects (auto-scroll, measurement, focus) only make sense
+ * when the element is actually presented on screen. A plain useLayoutEffect
+ * fires on mount even when the component is inside a closed <dialog>, a
+ * collapsed <details>, or a hidden popover, where scroll and layout operations
+ * are no-ops.
+ *
+ * Behavior:
+ *   - No <dialog>/<details>/[popover] ancestor → runs like a normal
+ *     useLayoutEffect with the provided deps.
+ *   - Inside a closed/hidden ancestor → skips the initial run; instead runs
+ *     the callback once the ancestor opens — see @jsenv/dom's own
+ *     observeAncestorOpenState for exactly how that's detected, and why it
+ *     matters that it happens before the browser paints.
+ *   - Inside an open ancestor → runs on mount AND every subsequent open.
+ *
+ * The callback's second argument is always a `navi_displayed` CustomEvent,
+ * with `detail: { ancestor, ancestorType, becauseAncestorOpened }`:
+ *   - No <dialog>/<details>/[popover]/[aria-expanded] ancestor at all →
+ *     `{ ancestor: document, ancestorType: "document" }`.
+ *   - Otherwise → `{ ancestor: <the matched element>, ancestorType: "dialog"
+ *     | "popover" | "details" | "aria-expanded" }`.
+ * `becauseAncestorOpened` distinguishes the two ways of coming on screen:
+ *   - true — the element was already mounted and the ancestor just opened,
+ *     revealing it along with everything else it holds. The opening has an
+ *     owner (the ancestor's own transferFocus/openEffect), and what it reveals
+ *     should defer to it — see use_auto_focus.js.
+ *   - false — the element was mounted just now, into a surface already on
+ *     screen (or into the plain document). Nothing else owns this appearance:
+ *     what the element says about itself (an autofocus, a measurement) is the
+ *     only word there is.
+ *
+ * Usage:
+ *   useDisplayedLayoutEffect(ref, () => {
+ *     scrollToSelected();
+ *   }, []);
+ */
+const useDisplayedLayoutEffect = (ref, callback, deps) => {
+  if (typeof callback !== "function") {
+    throw new TypeError("useDisplayedLayoutEffect: callback is not a function");
+  }
+
+  // Keep a stable ref so the open listener always calls the latest callback
+  // without needing to be re-registered when deps change.
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+
+  // Run on mount (or when deps change) — but only if the element is visible.
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    const ancestor = closestOpenableAncestor(el);
+    if (!ancestor) {
+      callbackRef.current(el, createDisplayedEvent(document, false));
+      return;
+    }
+    if (!isAncestorOpen(ancestor)) {
+      // Ancestor is closed — skip now; the observeAncestorOpenState call
+      // below will fire once it opens.
+      return;
+    }
+    callbackRef.current(el, createDisplayedEvent(ancestor, false));
+  }, deps);
+
+  // Re-run every time the ancestor opens.
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return undefined;
+    }
+    const ancestor = closestOpenableAncestor(el);
+    if (!ancestor) {
+      return undefined;
+    }
+    return observeAncestorOpenState(ancestor, ({ isOpen }) => {
+      if (!isOpen) {
+        return;
+      }
+      const lastEl = ref.current;
+      callbackRef.current(lastEl, createDisplayedEvent(ancestor, true));
+    });
+  }, []);
+};
+
+const createDisplayedEvent = (ancestor, becauseAncestorOpened) => {
+  return new CustomEvent("navi_displayed", {
+    detail: {
+      ancestor,
+      ancestorType: getAncestorOpenType(ancestor),
+      becauseAncestorOpened,
+    },
+  });
+};
+
+installImportMetaCssBuild(import.meta);// # TextAnchor — how it works
+const css$$ = /* css */`
+  .navi_text_anchor {
+    vertical-align: baseline;
+    user-select: none;
+    overflow: hidden;
+  }
+`;
+
+/**
+ * Positions children vertically relative to the surrounding text, correcting for font-size differences.
+ *
+ * Place this component around any inline element whose font-size differs from the surrounding text.
+ * It renders an invisible anchor that inherits the surrounding text's font metrics, then shifts
+ * the child so that its visual position matches the requested `textAnchor` value — regardless of
+ * font-size, display type (inline, inline-block, inline-flex…), or the active `vertical-align`.
+ *
+ * @param {"line-top"|"char-top"|"center"|"char-bottom"|"line-bottom"} [textAnchor="char-bottom"]
+ *   - `"line-top"`    — child top aligns with the top of the surrounding line box
+ *   - `"char-top"`    — child top aligns with the top of visible characters (ink ascent)
+ *   - `"center"`      — child is vertically centered on the surrounding line box
+ *   - `"char-bottom"` — child bottom aligns to the text baseline (no correction, browser default)
+ *   - `"line-bottom"` — child bottom aligns with the bottom of the surrounding line box
+ * @param {{ size?: number, verticalAlign?: string }} [lineLayout]
+ *   Describes the surrounding line context. Used as layout-effect dependencies so the correction
+ *   reruns when the surrounding text's font-size or vertical-align changes.
+ * @param {import("ignore:preact").RefObject} childRef — ref on the child element to reposition
+ */
+const TextAnchor = ({
+  childRef,
+  children,
+  textAnchor = "char-bottom",
+  textKey,
+  textSize,
+  lineLayout
+}) => {
+  import.meta.css = [css$$, "@jsenv/navi/src/text/text_anchor.jsx"];
+  const anchorRef = useRef();
+
+  // Plain useLayoutEffect would also fire while an ancestor dialog/popover
+  // (e.g. a closed SidePanel) is still display:none — every rect involved
+  // reads 0×0 at that point, so the math trivially (and wrongly) resolves
+  // to topOffset 0: not a real "no correction needed" result, just a
+  // zero-by-zero coincidence that happens to look fine only because it
+  // leaves the browser's own default alignment untouched. The real
+  // correction then only gets applied later, on whatever unrelated
+  // re-render next happens to change one of this effect's own deps —
+  // which reads as the child "jumping" even though nothing about its own
+  // geometry changed. useDisplayedLayoutEffect skips the initial run in
+  // that case and reruns once the ancestor actually opens instead.
+  useDisplayedLayoutEffect(anchorRef, anchorEl => {
+    const childEl = childRef.current;
+    if (!anchorEl || !childEl) {
+      return;
+    }
+    // Only correct when the anchor lives in an inline formatting context.
+    // If the parent is a flex/grid container, inline layout rules don't apply
+    // and our font-metrics model is invalid.
+    const parentDisplay = getComputedStyle(anchorEl.parentElement).display;
+    if (parentDisplay !== "inline" && parentDisplay !== "inline-block" && parentDisplay !== "block") {
+      // we must hide the anchor otherwise it would affect layout without providing any benefit (would trigger flex gap for instance)
+      anchorEl.setAttribute("hidden", "");
+      setTopOffset(childEl, 0);
+      return;
+    }
+    anchorEl.removeAttribute("hidden");
+    const topOffset = computeTopOffset({
+      anchorEl,
+      childEl,
+      textAnchor
+    });
+    setTopOffset(childEl, topOffset);
+  }, [textAnchor, textKey, textSize, lineLayout?.size, lineLayout?.verticalAlign]);
+  return jsxs(Fragment$1, {
+    children: [children, jsx("span", {
+      ref: anchorRef,
+      className: "navi_text_anchor",
+      "aria-hidden": "true",
+      children: "\u200B"
+    })]
+  });
+};
+const setTopOffset = (childEl, topOffset) => {
+  // position:relative + top shifts the element visually.
+  // marginTop: -topOffset makes the layout box follow the visual position, so any container
+  // (button, link, box…) computes its own padding/border/height based on the real final position
+  // rather than the original unshifted one. This means a badge inside a button will symmetrically
+  // expand the button height instead of overflowing or being clipped.
+  // marginBottom: topOffset compensates the marginTop so the line height stays unchanged —
+  // the shift is purely a repositioning, not an inflation of the line.
+  if (!topOffset) {
+    childEl.style.position = "";
+    childEl.style.top = "";
+    childEl.style.marginTop = "";
+    childEl.style.marginBottom = "";
+    return;
+  }
+  childEl.style.position = "relative";
+  childEl.style.top = `${topOffset}px`;
+  childEl.style.marginTop = `${-topOffset}px`;
+  childEl.style.marginBottom = `${topOffset}px`;
+};
+const computeTopOffset = ({
+  anchorEl,
+  childEl,
+  textAnchor
+}) => {
+  if (textAnchor === "char-bottom") {
+    // Align child's bottom with the char's bottom = the baseline.
+    // The CSS spec says an inline-block with no text content has its baseline at its bottom margin edge.
+    // So the browser's default placement already puts the child's bottom at the line's baseline.
+    // No correction needed.
+    return 0;
+  }
+  // The anchor's rendered rect corresponds to the surrounding text's line box:
+  // top and bottom are the visual bounds of the line (including line-height).
+  const anchorRect = anchorEl.getBoundingClientRect();
+
+  // Measure the child's current rect, then subtract any previously applied top correction
+  // to recover its natural position — avoiding a style reset + reflow.
+  const childRect = childEl.getBoundingClientRect();
+  const childH = childRect.height;
+  const previousTop = parseFloat(childEl.style.top) || 0;
+  const childNaturalTop = childRect.top - previousTop;
+
+  // Compute desired child top Y based on textAnchor intention.
+  let desiredChildTopY = 0;
+  if (textAnchor === "line-top") {
+    desiredChildTopY = anchorRect.top;
+  } else if (textAnchor === "char-top") {
+    const anchorStyle = getComputedStyle(anchorEl);
+    const ctx = charTopCanvas.getContext("2d");
+    ctx.font = `${anchorStyle.fontWeight} ${anchorStyle.fontSize} ${anchorStyle.fontFamily}`;
+    const m = ctx.measureText("M");
+    const baselineY = anchorRect.bottom - m.fontBoundingBoxDescent;
+    desiredChildTopY = baselineY - m.actualBoundingBoxAscent;
+  } else if (textAnchor === "center") {
+    const anchorCenterY = (anchorRect.top + anchorRect.bottom) / 2;
+    desiredChildTopY = anchorCenterY - childH / 2;
+  } else if (textAnchor === "char-bottom") {
+    // Already handled above (early return 0), but guard here for completeness.
+    return 0;
+  } else if (textAnchor === "line-bottom") {
+    desiredChildTopY = anchorRect.bottom - childH;
+  } else {
+    return 0; // unknown textAnchor, no correction
+  }
+  return desiredChildTopY - childNaturalTop;
+};
+const charTopCanvas = document.createElement("canvas");
+
 const useInitialTextSelection = (ref, textSelection) => {
   const deps = [];
   if (Array.isArray(textSelection)) {
@@ -19983,7 +20495,7 @@ const selectByTextStrings = (element, range, startText, endText) => {
 };
 
 installImportMetaCssBuild(import.meta);// https://jsfiddle.net/v5xzJ/4/
-const css$10 = /* css */`
+const css$_ = /* css */`
   @layer navi {
     .navi_text {
       &[data-skeleton] {
@@ -20167,6 +20679,91 @@ const css$10 = /* css */`
       opacity: 1;
     }
   }
+
+  /* ── Icon ── */
+
+  @layer navi {
+    /* Ensure data attributes from box.jsx can win to update display */
+    .navi_icon {
+      display: inline-flex;
+      box-sizing: border-box;
+      max-width: 100%;
+      /* An icon never grows past the box it sits in, so a glyph can never make
+         a line of text taller than the text itself. lineOverflow="allow" opts
+         out, for an icon that is an affordance rather than a character — a
+         control's chevron or clear button, sized to be touched, not read. */
+      max-height: 100%;
+
+      &[data-line-overflow="allow"] {
+        max-height: none;
+      }
+    }
+  }
+
+  .navi_icon {
+    white-space: nowrap;
+    vertical-align: inherit;
+
+    &[data-icon-char] {
+      aspect-ratio: 1/1;
+      min-width: 0;
+      height: round(1em, 1px);
+      max-height: round(1em, 1px);
+      flex-grow: 0 !important;
+      align-items: center;
+      justify-content: center;
+
+      /* fillLine: measured on the line box (1lh) instead of the character box
+         (1em). The icon still stays inside the line — it just uses all of it,
+         which is what an icon standing on its own in a control's slot wants,
+         where a glyph sitting among letters wants to match their size. */
+      &[data-fill-line] {
+        height: round(1lh, 1px);
+        max-height: round(1lh, 1px);
+      }
+
+      svg,
+      img {
+        width: 100%;
+        height: 100%;
+      }
+      svg {
+        overflow: visible;
+      }
+    }
+    &[data-flow-inline] {
+      width: 1em;
+      height: 1em;
+    }
+    &[data-interactive] {
+      cursor: pointer;
+    }
+    &[data-icon-text] {
+      -webkit-font-smoothing: antialiased;
+      text-rendering: optimizeLegibility;
+    }
+  }
+
+  .navi_icon > svg,
+  .navi_icon > img {
+    width: 100%;
+    height: 100%;
+  }
+  .navi_icon[data-width-fixed] > svg,
+  .navi_icon[data-width-fixed] > img {
+    width: 100%;
+    height: auto;
+  }
+  .navi_icon[data-height-fixed] > svg,
+  .navi_icon[data-height-fixed] > img {
+    width: auto;
+    height: 100%;
+  }
+  .navi_icon[data-width-fixed][data-height-fixed] > svg,
+  .navi_icon[data-width-fixed][data-height-fixed] > img {
+    width: 100%;
+    height: 100%;
+  }
 `;
 const REGULAR_SPACE = jsx("span", {
   "data-navi-space": "",
@@ -20349,6 +20946,7 @@ const shouldInjectSpacingBetween = (left, right) => {
  *   loading?: boolean,
  *   skeleton?: boolean,
  *   attachLastChild?: boolean,
+ *   emojiAsIcon?: boolean,
  *   preventSpaceUnderlines?: boolean,
  *   holdSpaceForStyle?: import("ignore:preact").JSX.CSSProperties,
  *   boldStable?: boolean,
@@ -20388,6 +20986,12 @@ const shouldInjectSpacingBetween = (left, right) => {
  *   truncation belongs outside the `Text` instead (see `docs/typography.md`).
  *   `Link` sets it on its own whenever it renders an end icon.
  *
+ * @param {boolean} [emojiAsIcon]
+ *   Renders every emoji found in the string children as an `Icon`, so it sits
+ *   in the line like a character and never makes the line taller than the
+ *   text. For free text a user typed (a message, a description) — the only
+ *   place an emoji is expected; see `docs/typography.md`.
+ *
  * @param {boolean} [preventSpaceUnderlines]
  *   Replaces real space characters between children with padding-based spaces.
  *   Useful inside `<a>` elements where browsers draw an underline under spaces.
@@ -20421,14 +21025,6 @@ const shouldInjectSpacingBetween = (left, right) => {
  *   internally for overlays such as the skeleton container.
  */
 const Text = props => {
-  const defaultRef = useRef();
-  const ref = props.ref || defaultRef;
-  return jsx(TextDispatcher, {
-    ...props,
-    ref: ref
-  });
-};
-const TextDispatcher = props => {
   if (props.loading || props.skeleton) {
     return jsx(TextSkeleton, {
       ...props
@@ -20454,9 +21050,8 @@ const TextDispatcher = props => {
   });
 };
 const TextShrinkWrap = props => {
-  const {
-    ref
-  } = props;
+  const defaultRef = useRef();
+  const ref = props.ref || defaultRef;
   const applyWidth = () => {
     const text = ref.current;
     // Reset any previously forced width so we measure the natural size
@@ -20497,19 +21092,21 @@ const TextShrinkWrap = props => {
       window.removeEventListener("resize", applyWidth);
     };
   }, []);
-  return jsx(TextDispatcher, {
+  return jsx(Text, {
     ...props,
+    ref: ref,
     "data-shrinkwrap": "",
     shrinkWrap: undefined
   });
 };
 const TextUI = props => {
-  import.meta.css = [css$10, "@jsenv/navi/src/text/text.jsx"];
+  import.meta.css = [css$_, "@jsenv/navi/src/text/text.jsx"];
   let {
     ref,
     spacing,
     preventSpaceUnderlines = false,
     attachLastChild = false,
+    emojiAsIcon = false,
     boldStable,
     holdSpaceForStyle,
     capitalize,
@@ -20540,6 +21137,11 @@ const TextUI = props => {
   } else {
     children = applySpacingOnTextChildren(children, resolvedSpacing, defaultSpace);
   }
+  if (emojiAsIcon) {
+    // After the spacing pass: an emoji glued to a word ("hello👋") must not
+    // get a separator injected as if it were a child element.
+    children = renderEmojiAsIcon(children);
+  }
   if (boldStable) {
     const {
       bold
@@ -20608,7 +21210,7 @@ const TextSkeleton = ({
     "aria-hidden": "true",
     children: "W"
   });
-  return jsx(TextDispatcher, {
+  return jsx(Text, {
     "data-skeleton": "",
     "data-loading": loading ? "" : undefined,
     ...props,
@@ -20624,7 +21226,7 @@ const TextOverflow = ({
   children,
   ...rest
 }) => {
-  return jsx(TextDispatcher, {
+  return jsx(Text, {
     block: true,
     as: "div",
     pre: noWrap === undefined ? true : undefined
@@ -20646,14 +21248,254 @@ const TextWithSelectRange = ({
   selectRange,
   ...props
 }) => {
-  useInitialTextSelection(ref, selectRange);
-  return jsx(TextDispatcher, {
+  const defaultRef = useRef();
+  const innerRef = ref || defaultRef;
+  useInitialTextSelection(innerRef, selectRange);
+  return jsx(Text, {
     ...props,
-    ref: ref,
+    ref: innerRef,
     selectRange: undefined
   });
 };
 
+/**
+ * Renders an icon — an inline SVG/emoji/text glyph that inherits the
+ * surrounding text's `currentColor` and (by default) its font size, so it sits
+ * on the text baseline like a character.
+ *
+ * Content comes from either `href` (references an external/sprite symbol via
+ * `<use>`) or `children` (an inline `<svg>` element, or a string for a
+ * text/emoji icon). All extra props are spread onto the underlying `Box`/`Text`
+ * (sizing, spacing, color, className, data-attributes, …).
+ *
+ * Render mode is chosen automatically:
+ * - `children` is a **string** → a text icon (`<Text data-icon-text>`).
+ * - **sized** (an explicit `width`/`height`, or `flex`/`grid`) → a block icon
+ *   (`<Box square>`), laid out as its own box rather than inline.
+ * - otherwise → an **inline char-like** icon that flows on the text baseline
+ *   (`data-icon-char`), aligned via `textAnchor`.
+ *
+ * Accessibility: an icon is treated as decorative (`aria-hidden`) by default
+ * whenever it has no explicit size and no `onClick`; give it an explicit
+ * `decorative={false}` (or make it interactive) when it conveys meaning.
+ *
+ * @param {object} props
+ * @param {string} [props.href] - URL/id of an external SVG symbol, rendered via
+ *   `<svg><use href></svg>`. Mutually exclusive with meaningful `children`.
+ * @param {import("ignore:preact").ComponentChildren} [props.children] - Inline icon
+ *   content: an `<svg>` element, or a string (renders as a text/emoji icon).
+ * @param {boolean} [props.decorative] - Marks the icon `aria-hidden`. Defaults
+ *   to `true` for an unsized, non-interactive icon; pass `false` for a
+ *   meaning-bearing icon that needs to be exposed to assistive tech.
+ * @param {(event: MouseEvent) => void} [props.onClick] - Makes the icon
+ *   interactive (`data-interactive`, pointer cursor) and non-decorative.
+ * @param {"line-top"|"char-top"|"center"|"char-bottom"|"line-bottom"} [props.textAnchor="center"]
+ *   - Vertical alignment within the surrounding text line for the inline
+ *   char-like mode, forwarded to `TextAnchor`: `"line-top"`/`"line-bottom"`
+ *   align to the line box edges, `"char-top"` to the ink ascent, `"center"`
+ *   centers on the line box, `"char-bottom"` sits on the baseline. See
+ *   `text_anchor.jsx`.
+ * @param {{ size?: number, verticalAlign?: string }} [props.lineLayout] -
+ *   Describes the surrounding line context (font size / vertical-align),
+ *   forwarded to `TextAnchor` so it recomputes the vertical correction when
+ *   that context changes.
+ * @param {string|number} [props.width] - Explicit width; `"auto"` clears it.
+ *   Any explicit size switches the icon to block (sized) mode.
+ * @param {string|number} [props.height] - Explicit height; `"auto"` clears it.
+ * @param {"allow"} [props.lineOverflow] - `"allow"` lets the icon be taller
+ *   than the box it sits in (a line of text, a control's slot) instead of being
+ *   capped by it. For an icon that is an affordance sized for the finger rather
+ *   than a character sized for reading.
+ * @param {boolean} [props.fillLine] - Sizes the icon on the line box (1lh)
+ *   rather than on the character box (1em), so it uses the full height of the
+ *   line without leaving it. Unlike `lineOverflow`, the icon still never
+ *   exceeds the line.
+ * @param {boolean} [props.square] - Keep a 1:1 box; combined with one explicit
+ *   dimension it fixes the other too.
+ * @param {boolean} [props.circle] - Like `square`, plus a circular shape.
+ * @param {string|number} [props.aspectRatio] - Fixes the second dimension from
+ *   the one explicit dimension.
+ * @param {"x"|"y"|boolean} [props.flex] - Forces block/flex layout; auto-set to
+ *   `"x"` when the icon is sized.
+ * @param {boolean} [props.grid] - Forces block/grid layout.
+ * @param {string} [props.className] - Merged with the base `"navi_icon"` class.
+ */
+const Icon = ({
+  href,
+  children,
+  decorative,
+  onClick,
+  textAnchor = "center",
+  lineLayout,
+  lineOverflow,
+  fillLine,
+  ...props
+}) => {
+  import.meta.css = [css$_, "@jsenv/navi/src/text/text.jsx"];
+  const innerChildren = href ? jsx("svg", {
+    width: "100%",
+    height: "100%",
+    children: jsx("use", {
+      href: href
+    })
+  }) : children;
+  let {
+    flex,
+    grid,
+    width,
+    height
+  } = props;
+  if (width === "auto") {
+    width = undefined;
+  }
+  if (height === "auto") {
+    height = undefined;
+  }
+  const hasExplicitWidth = width !== undefined;
+  const hasExplicitHeight = height !== undefined;
+  const widthFixed = hasExplicitWidth || hasExplicitHeight && (props.square || props.circle || props.aspectRatio);
+  const heightFixed = hasExplicitHeight || hasExplicitWidth && (props.square || props.circle || props.aspectRatio);
+  if (widthFixed || heightFixed) {
+    if (flex === undefined) {
+      flex = "x";
+    }
+  } else if (decorative === undefined && !onClick) {
+    decorative = true;
+  }
+  const ariaProps = decorative ? {
+    "aria-hidden": "true"
+  } : {};
+  const textRef = useRef();
+  if (typeof children === "string") {
+    return jsx(Text, {
+      ...props,
+      ...ariaProps,
+      "data-icon-text": "",
+      "data-line-overflow": lineOverflow,
+      "data-fill-line": fillLine ? "" : undefined,
+      children: children
+    });
+  }
+  if (flex || grid) {
+    return jsx(Box, {
+      square: true,
+      ...props,
+      ...ariaProps,
+      flex: flex,
+      baseClassName: "navi_icon",
+      "data-width-fixed": widthFixed ? "" : undefined,
+      "data-height-fixed": heightFixed ? "" : undefined,
+      "data-interactive": onClick ? "" : undefined,
+      "data-line-overflow": lineOverflow,
+      "data-fill-line": fillLine ? "" : undefined,
+      onClick: onClick,
+      children: innerChildren
+    });
+  }
+  return jsx(TextAnchor, {
+    childRef: textRef,
+    textAnchor: textAnchor,
+    textSize: props.size,
+    lineLayout: lineLayout,
+    children: jsxs(Text, {
+      ...props,
+      ...ariaProps,
+      className: withPropsClassName("navi_icon", props.className),
+      spacing: "pre",
+      "data-icon-char": "",
+      "data-line-overflow": lineOverflow,
+      "data-fill-line": fillLine ? "" : undefined,
+      "data-width-fixed": widthFixed ? "" : undefined,
+      "data-height-fixed": heightFixed ? "" : undefined,
+      "data-interactive": onClick ? "" : undefined,
+      onClick: onClick,
+      ref: textRef,
+      children: [jsx("span", {
+        style: "user-select:none",
+        children: "\u200B"
+      }), innerChildren]
+    })
+  });
+};
+
+// An emoji-presentation character (🌸), or a pictogram forced into emoji
+// presentation by VS16 (❤️), followed by its skin-tone modifiers and ZWJ
+// sequence. A flag is two regional indicators that must stay together.
+const EMOJI_REGEX = /\p{Regional_Indicator}{2}|(?:\p{Emoji_Presentation}|[\p{Extended_Pictographic}--\p{Emoji_Presentation}]\uFE0F)(?:[\p{Emoji_Modifier}\uFE0F]|\u200D\p{Extended_Pictographic}\uFE0F?)*/gv;
+
+/**
+ * What `emojiAsIcon` does, for something that renders text without going
+ * through `Text` (a callout's message): every emoji in the string children
+ * comes back wrapped in an `Icon`. The system emoji fonts have a taller
+ * ascent/descent than text fonts, so a raw emoji glyph makes its line taller
+ * than the lines around it; inside an Icon it is capped at 1em and centered on
+ * the line like any glyph icon.
+ *
+ * Children come back in the shape they arrived in: a string stays a string
+ * when it holds no emoji, and the array is only built once a child actually
+ * needs rewriting.
+ */
+const renderEmojiAsIcon = children => {
+  if (typeof children === "string") {
+    return renderEmojiInString(children);
+  }
+  const childArray = toChildArray(children);
+  let result = null;
+  let index = 0;
+  for (const child of childArray) {
+    if (typeof child === "string") {
+      const rendered = renderEmojiInString(child);
+      if (rendered !== child) {
+        if (result === null) {
+          result = childArray.slice(0, index);
+        }
+        for (const part of rendered) {
+          result.push(part);
+        }
+        index++;
+        continue;
+      }
+    }
+    if (result !== null) {
+      result.push(child);
+    }
+    index++;
+  }
+  if (result === null) {
+    return children;
+  }
+  return result;
+};
+const renderEmojiInString = string => {
+  let parts = null;
+  let lastIndex = 0;
+  for (const match of string.matchAll(EMOJI_REGEX)) {
+    if (parts === null) {
+      parts = [];
+    }
+    if (match.index > lastIndex) {
+      parts.push(string.slice(lastIndex, match.index));
+    }
+    parts.push(jsx(Icon, {
+      decorative: false,
+      children: jsx("span", {
+        children: match[0]
+      })
+    }));
+    lastIndex = match.index + match[0].length;
+  }
+  if (parts === null) {
+    return string;
+  }
+  if (lastIndex < string.length) {
+    parts.push(string.slice(lastIndex));
+  }
+  return parts;
+};
+// A callout message is free text like any other; see callout.jsx for why it
+// cannot import this itself.
+setCalloutMessageTextRenderer(renderEmojiAsIcon);
+
 const LIGHT_ACCENT_ATTRIBUTE = "data-accent-light";
 const VERY_LIGHT_ACCENT_ATTRIBUTE = "data-accent-very-light";
 const DARK_CONTRAST_ATTRIBUTE = "data-accent-needs-dark-fg";
@@ -20797,105 +21639,6 @@ const useActionStatus = (action) => {
   };
 };
 
-/**
- * A variant of useLayoutEffect that accounts for ancestor <dialog>/<details>
- * or popover visibility.
- *
- * Motivation: some effects (auto-scroll, measurement, focus) only make sense
- * when the element is actually presented on screen. A plain useLayoutEffect
- * fires on mount even when the component is inside a closed <dialog>, a
- * collapsed <details>, or a hidden popover, where scroll and layout operations
- * are no-ops.
- *
- * Behavior:
- *   - No <dialog>/<details>/[popover] ancestor → runs like a normal
- *     useLayoutEffect with the provided deps.
- *   - Inside a closed/hidden ancestor → skips the initial run; instead runs
- *     the callback once the ancestor opens — see @jsenv/dom's own
- *     observeAncestorOpenState for exactly how that's detected, and why it
- *     matters that it happens before the browser paints.
- *   - Inside an open ancestor → runs on mount AND every subsequent open.
- *
- * The callback's second argument is always a `navi_displayed` CustomEvent,
- * with `detail: { ancestor, ancestorType, becauseAncestorOpened }`:
- *   - No <dialog>/<details>/[popover]/[aria-expanded] ancestor at all →
- *     `{ ancestor: document, ancestorType: "document" }`.
- *   - Otherwise → `{ ancestor: <the matched element>, ancestorType: "dialog"
- *     | "popover" | "details" | "aria-expanded" }`.
- * `becauseAncestorOpened` distinguishes the two ways of coming on screen:
- *   - true — the element was already mounted and the ancestor just opened,
- *     revealing it along with everything else it holds. The opening has an
- *     owner (the ancestor's own transferFocus/openEffect), and what it reveals
- *     should defer to it — see use_auto_focus.js.
- *   - false — the element was mounted just now, into a surface already on
- *     screen (or into the plain document). Nothing else owns this appearance:
- *     what the element says about itself (an autofocus, a measurement) is the
- *     only word there is.
- *
- * Usage:
- *   useDisplayedLayoutEffect(ref, () => {
- *     scrollToSelected();
- *   }, []);
- */
-const useDisplayedLayoutEffect = (ref, callback, deps) => {
-  if (typeof callback !== "function") {
-    throw new TypeError("useDisplayedLayoutEffect: callback is not a function");
-  }
-
-  // Keep a stable ref so the open listener always calls the latest callback
-  // without needing to be re-registered when deps change.
-  const callbackRef = useRef(callback);
-  callbackRef.current = callback;
-
-  // Run on mount (or when deps change) — but only if the element is visible.
-  useLayoutEffect(() => {
-    const el = ref.current;
-    if (!el) {
-      return;
-    }
-    const ancestor = closestOpenableAncestor(el);
-    if (!ancestor) {
-      callbackRef.current(el, createDisplayedEvent(document, false));
-      return;
-    }
-    if (!isAncestorOpen(ancestor)) {
-      // Ancestor is closed — skip now; the observeAncestorOpenState call
-      // below will fire once it opens.
-      return;
-    }
-    callbackRef.current(el, createDisplayedEvent(ancestor, false));
-  }, deps);
-
-  // Re-run every time the ancestor opens.
-  useLayoutEffect(() => {
-    const el = ref.current;
-    if (!el) {
-      return undefined;
-    }
-    const ancestor = closestOpenableAncestor(el);
-    if (!ancestor) {
-      return undefined;
-    }
-    return observeAncestorOpenState(ancestor, ({ isOpen }) => {
-      if (!isOpen) {
-        return;
-      }
-      const lastEl = ref.current;
-      callbackRef.current(lastEl, createDisplayedEvent(ancestor, true));
-    });
-  }, []);
-};
-
-const createDisplayedEvent = (ancestor, becauseAncestorOpened) => {
-  return new CustomEvent("navi_displayed", {
-    detail: {
-      ancestor,
-      ancestorType: getAncestorOpenType(ancestor),
-      becauseAncestorOpened,
-    },
-  });
-};
-
 /**
  * Decides which element receives focus when a container (popover, dialog, …)
  * opens, and gives it back to where it came from when the container closes.
@@ -27435,13 +28178,11 @@ const useInteractiveProps = (props, {
   const [controlRootProps, controlHostProps] = splitControlProps(props);
   controlRootProps["navi-control"] = controlInfo.controlType;
   if (props.ownTarget) {
-    // "This press is mine" said in the DOM, because that is where it is read
-    // from the outside: by the controls above (see own_target.js), and by the
-    // two gesture readers below — the one that travels a box and the one that
-    // carries a piece, each with its own way of being told to keep out.
-    controlRootProps[OWN_TARGET_ATTRIBUTE] = "";
-    controlRootProps["data-no-drag-travel"] = "";
-    controlRootProps["data-drag-ignore"] = "";
+    // One attribute, in the DOM, because that is where the claim is read from —
+    // by the controls above and by the gesture readers below (see
+    // own_target.js). The prop is the ergonomic form of it and nothing more: an
+    // element an application draws itself writes the same attribute by hand.
+    controlRootProps[OWN_TARGET_ATTRIBUTE] = typeof props.ownTarget === "string" ? props.ownTarget : "";
   }
   const {
     "navi-control-proxy-for": naviProxyFor
@@ -27477,10 +28218,10 @@ const useInteractiveProps = (props, {
     });
   }
   {
-    const controlDisabled = useContext(DisabledContext);
-    const controlReadOnly = useContext(ReadOnlyContext);
+    const controlDisabledFromAbove = useContext(DisabledContext);
+    const controlReadOnlyFromAbove = useContext(ReadOnlyContext);
     const controlRequired = useContext(RequiredContext);
-    const controlLoading = useContext(LoadingContext$1);
+    const controlLoadingFromAbove = useContext(LoadingContext$1);
     const parentActionRequester = useContext(ActionRequesterContext);
     const actionStatus = useActionStatus(boundAction);
     const {
@@ -27490,6 +28231,16 @@ const useInteractiveProps = (props, {
       loading,
       optimistic
     } = props;
+
+    // `ownTarget="always"`: an affordance that writes nothing to the control it
+    // sits in has no business inheriting that control's state — a diskette
+    // saving a row into the reader's own address book stays pressable on a game
+    // nobody may edit. Its own props still hold; only what came from above is
+    // dropped (see own_target.js for the three modes).
+    const zoneStateApplies = !ownTargetIgnoresZoneState(props.ownTarget);
+    const controlDisabled = zoneStateApplies && controlDisabledFromAbove;
+    const controlReadOnly = zoneStateApplies && controlReadOnlyFromAbove;
+    const controlLoading = zoneStateApplies && controlLoadingFromAbove;
     const disabledResolved = disabled || controlDisabled;
     const requiredResolved = required || controlRequired;
     // Busy because the group above is running the action THIS control asked
@@ -27501,7 +28252,7 @@ const useInteractiveProps = (props, {
     // (`maxLengthGuard`) and this one would make it longer: it can be pointed
     // at, focused and pressed — and answers why (see readonly_constraint.js) —
     // but cannot be taken.
-    const readOnlyFromParentMaxLengthGuard = Boolean(uiStateController.parentUIStateController?.isChildBlockedByMaxLengthGuard?.(uiStateController));
+    const readOnlyFromParentMaxLengthGuard = Boolean(zoneStateApplies && uiStateController.parentUIStateController?.isChildBlockedByMaxLengthGuard?.(uiStateController));
     const readOnlyBase = readOnly || controlReadOnly || loadingBase || readOnlyFromParentMaxLengthGuard || controlInfo.readOnlyUncontrolled;
     // An optimistic control trusts its action to succeed: the state the user
     // just set stays visible and interactive while the action runs — no
@@ -27935,7 +28686,7 @@ const getAssociatedLabels = element => {
   return Array.from(element.labels);
 };
 
-installImportMetaCssBuild(import.meta);const css$$ = /* css */`
+installImportMetaCssBuild(import.meta);const css$Z = /* css */`
   @layer navi {
     .navi_button {
       --button-border-radius: var(--navi-control-border-radius);
@@ -28366,7 +29117,7 @@ installImportMetaCssBuild(import.meta);const css$$ = /* css */`
   }
 `;
 const ButtonUI = props => {
-  import.meta.css = [css$$, "@jsenv/navi/src/control/input/button_ui.jsx"];
+  import.meta.css = [css$Z, "@jsenv/navi/src/control/input/button_ui.jsx"];
   const {
     ref,
     // href/link
@@ -28379,6 +29130,7 @@ const ButtonUI = props => {
     icon,
     cta,
     spacing,
+    emojiAsIcon = true,
     // Whether the button draws the loading outline itself. A button that is
     // one half of a bigger control says no: what is busy is the control, and
     // the outline belongs around the whole of it (see split_button.jsx).
@@ -28436,6 +29188,7 @@ const ButtonUI = props => {
 
     type: "button",
     spacing: undefined,
+    emojiAsIcon: undefined,
     cta: undefined,
     pressEffect: undefined,
     loadingOutline: undefined,
@@ -28489,6 +29242,7 @@ const ButtonUI = props => {
       ...controlChildrenWrapperProps,
       children: jsx(ButtonContent, {
         spacing: spacing,
+        emojiAsIcon: emojiAsIcon,
         children: children
       })
     })]
@@ -28496,6 +29250,7 @@ const ButtonUI = props => {
 };
 const ButtonContent = ({
   spacing,
+  emojiAsIcon,
   children
 }) => {
   const boxForwardedProps = useContext(BoxForwardedPropsContext);
@@ -28503,6 +29258,7 @@ const ButtonContent = ({
     ...boxForwardedProps,
     display: "inherit",
     spacing: spacing,
+    emojiAsIcon: emojiAsIcon,
     className: "navi_button_content",
     children: [children, jsx(ButtonShadow, {})]
   });
@@ -28665,17 +29421,22 @@ const COMMAND_DEFAULT_PROPS_FACTORIES = {
 
 /**
  * @type {import("ignore:preact").FunctionComponent<{
- *   ownTarget?: boolean | "refuse",
+ *   ownTarget?: boolean | "refuse" | "always",
+ *   emojiAsIcon?: boolean,
  *   [key: string]: any,
  * }>}
- * @param {boolean|"refuse"} [ownTarget] A real target inside a zone that belongs
- *   to another control — a chip's cross on a picker's façade, an eye on a
- *   pressable row, a diskette inside a slide that travels. The press is this
- *   button's alone (no travel starts, no popup opens, nothing above answers) and
- *   its `onClick` waits for its own interaction gate instead of firing from the
- *   DOM. Where the zone around it is read-only, disabled or busy the button
- *   goes; `"refuse"` keeps it on screen refusing with a callout, for an
- *   affordance whose presence is information in itself.
+ * @param {boolean} [emojiAsIcon=true] Renders the emoji of the label as icons
+ *   so the button keeps the height of its text — `Text`'s prop, on by default
+ *   here. Pass `false` to let an emoji draw at its natural size.
+ * @param {boolean|"refuse"|"always"} [ownTarget] A real target inside a zone
+ *   that belongs to another control — a chip's cross on a picker's façade, an
+ *   eye on a pressable row, a diskette inside a slide that travels. The press is
+ *   this button's alone (no travel starts, no popup opens, no navi control above
+ *   answers) and its `onClick` waits for its own interaction gate instead of
+ *   firing from the DOM. What it does where the zone is read-only, disabled or
+ *   busy depends on whether it WRITES to the control it sits in: it goes by
+ *   default, `"refuse"` keeps it and refuses with a callout, `"always"` ignores
+ *   the zone's state entirely — for a gesture that never touched that control.
  */
 const Button = createComponentResolver([ButtonFirstResolver, ButtonRouteResolver, ButtonCommandPropResolver, ButtonUI]);
 
@@ -30096,7 +30857,7 @@ installImportMetaCssBuild(import.meta);/**
  * reaches the real container.
  */
 let openLocalDialogCount = 0;
-const css$_ = /* css */`
+const css$Y = /* css */`
   @layer navi {
     .navi_dialog {
       /* Min gap between the dialog and the edges of its container. Written
@@ -30684,7 +31445,7 @@ const css$_ = /* css */`
  * @param {import("ignore:preact").ComponentChildren} props.children
  */
 const Dialog = props => {
-  import.meta.css = [css$_, "@jsenv/navi/src/layout/dialog.jsx"];
+  import.meta.css = [css$Y, "@jsenv/navi/src/layout/dialog.jsx"];
   if (props.openController) {
     return jsx(ControlledDialog, {
       ...props
@@ -31676,7 +32437,7 @@ installImportMetaCssBuild(import.meta);/**
  * and applied.
  */
 let openLocalPopoverCount = 0;
-const css$Z = /* css */`
+const css$X = /* css */`
   @layer navi {
     .navi_popover {
       /* soft: user-configurable preferred max-height. Kept as a *default*
@@ -32136,7 +32897,7 @@ const css$Z = /* css */`
  * @param {import("ignore:preact").ComponentChildren} props.children
  */
 const Popover = props => {
-  import.meta.css = [css$Z, "@jsenv/navi/src/layout/popover.jsx"];
+  import.meta.css = [css$X, "@jsenv/navi/src/layout/popover.jsx"];
   if (props.openController) {
     return jsx(ControlledPopover, {
       ...props
@@ -33164,7 +33925,7 @@ installImportMetaCssBuild(import.meta);/**
  * event, and a caller replacing the body entirely then has one protocol to
  * follow — `--navi-confirm` for yes, anything that closes for no.
  */
-const css$Y = /* css */`
+const css$W = /* css */`
   /* The width lives on the body rather than on the popup, so that custom
      content (which replaces this body entirely) sizes itself instead of
      inheriting a ceiling meant for a sentence-long question. */
@@ -33301,7 +34062,7 @@ const ConfirmPopup = ({
   onAnswer,
   onClosed
 }) => {
-  import.meta.css = [css$Y, "@jsenv/navi/src/action/confirm_popup.jsx"];
+  import.meta.css = [css$W, "@jsenv/navi/src/action/confirm_popup.jsx"];
   const {
     mode,
     confirmLabel,
@@ -33385,7 +34146,7 @@ const defaultBody = (message, {
   });
 };
 
-installImportMetaCssBuild(import.meta);const css$X = /* css */`
+installImportMetaCssBuild(import.meta);const css$V = /* css */`
   .action_error {
     margin-top: 0;
     margin-bottom: 20px;
@@ -33410,7 +34171,7 @@ const ActionRenderer = ({
   children,
   disabled
 }) => {
-  import.meta.css = [css$X, "@jsenv/navi/src/action/action_renderer.jsx"];
+  import.meta.css = [css$V, "@jsenv/navi/src/action/action_renderer.jsx"];
   if (action === undefined) {
     throw new Error("ActionRenderer requires an action to render, but none was provided.");
   }
@@ -39035,7 +39796,7 @@ const ROUTE_TRAVEL_ATTRIBUTE = "data-navi-route-travel";
 // the root pictures must NOT move (they carry the whole viewport, blank bands
 // included).
 
-const css$W = /* css */`
+const css$U = /* css */`
   /* The marked region is a picture of its own for the length of a transition of
      OURS, and only then — the name is what makes the pages a picture the
      movement below can carry.
@@ -39464,7 +40225,7 @@ const RouteTransitionArea = ({
   children,
   ...rest
 }) => {
-  import.meta.css = [css$W, "@jsenv/navi/src/nav/route_transition.jsx"];
+  import.meta.css = [css$U, "@jsenv/navi/src/nav/route_transition.jsx"];
   const props = {
     ...rest,
     [TRANSITION_AREA_ATTRIBUTE]: ""
@@ -39521,7 +40282,7 @@ const RouteTransitionArea = ({
  * @returns {() => void} remove this relation.
  */
 const defineRouteTransition = (from, to, transition) => {
-  import.meta.css = [css$W, "@jsenv/navi/src/nav/route_transition.jsx"];
+  import.meta.css = [css$U, "@jsenv/navi/src/nav/route_transition.jsx"];
   const {
     type,
     duration
@@ -39557,7 +40318,7 @@ const defineRouteTransition = (from, to, transition) => {
  * @returns {() => void} remove this default.
  */
 const defineRouteDefaultTransition = transition => {
-  import.meta.css = [css$W, "@jsenv/navi/src/nav/route_transition.jsx"];
+  import.meta.css = [css$U, "@jsenv/navi/src/nav/route_transition.jsx"];
   const value = normalizeTransition(transition);
   defaultTransition = value;
   return () => {
@@ -40158,7 +40919,7 @@ const DRAGGED_ATTRIBUTE = "data-navi-route-travel-dragged";
 const TURNED_ATTRIBUTE = "data-navi-route-travel-turned";
 // The name the box wears while it travels, and only then (see nameForTravel).
 const TRAVEL_NAME = "navi-route-travel";
-const css$V = /* css */`
+const css$T = /* css */`
   /* The name that makes the page inside this box a picture of its own during a
      transition — rather than part of the one big picture the document takes, so
      the two pages can move past each other while everything else stays where it
@@ -40548,7 +41309,7 @@ const RouteTravel = ({
   children,
   ...rest
 }) => {
-  import.meta.css = [css$V, "@jsenv/navi/src/nav/route_travel.jsx"];
+  import.meta.css = [css$T, "@jsenv/navi/src/nav/route_travel.jsx"];
   const elementRef = useRef();
   const gestureRef = useRef(null);
   // The travel in hand: the transition keeping the picture of the page being
@@ -43109,402 +43870,6 @@ const PhoneSvg = () => {
   });
 };
 
-installImportMetaCssBuild(import.meta);// # TextAnchor — how it works
-const css$U = /* css */`
-  .navi_text_anchor {
-    vertical-align: baseline;
-    user-select: none;
-    overflow: hidden;
-  }
-`;
-
-/**
- * Positions children vertically relative to the surrounding text, correcting for font-size differences.
- *
- * Place this component around any inline element whose font-size differs from the surrounding text.
- * It renders an invisible anchor that inherits the surrounding text's font metrics, then shifts
- * the child so that its visual position matches the requested `textAnchor` value — regardless of
- * font-size, display type (inline, inline-block, inline-flex…), or the active `vertical-align`.
- *
- * @param {"line-top"|"char-top"|"center"|"char-bottom"|"line-bottom"} [textAnchor="char-bottom"]
- *   - `"line-top"`    — child top aligns with the top of the surrounding line box
- *   - `"char-top"`    — child top aligns with the top of visible characters (ink ascent)
- *   - `"center"`      — child is vertically centered on the surrounding line box
- *   - `"char-bottom"` — child bottom aligns to the text baseline (no correction, browser default)
- *   - `"line-bottom"` — child bottom aligns with the bottom of the surrounding line box
- * @param {{ size?: number, verticalAlign?: string }} [lineLayout]
- *   Describes the surrounding line context. Used as layout-effect dependencies so the correction
- *   reruns when the surrounding text's font-size or vertical-align changes.
- * @param {import("ignore:preact").RefObject} childRef — ref on the child element to reposition
- */
-const TextAnchor = ({
-  childRef,
-  children,
-  textAnchor = "char-bottom",
-  textKey,
-  textSize,
-  lineLayout
-}) => {
-  import.meta.css = [css$U, "@jsenv/navi/src/text/text_anchor.jsx"];
-  const anchorRef = useRef();
-
-  // Plain useLayoutEffect would also fire while an ancestor dialog/popover
-  // (e.g. a closed SidePanel) is still display:none — every rect involved
-  // reads 0×0 at that point, so the math trivially (and wrongly) resolves
-  // to topOffset 0: not a real "no correction needed" result, just a
-  // zero-by-zero coincidence that happens to look fine only because it
-  // leaves the browser's own default alignment untouched. The real
-  // correction then only gets applied later, on whatever unrelated
-  // re-render next happens to change one of this effect's own deps —
-  // which reads as the child "jumping" even though nothing about its own
-  // geometry changed. useDisplayedLayoutEffect skips the initial run in
-  // that case and reruns once the ancestor actually opens instead.
-  useDisplayedLayoutEffect(anchorRef, anchorEl => {
-    const childEl = childRef.current;
-    if (!anchorEl || !childEl) {
-      return;
-    }
-    // Only correct when the anchor lives in an inline formatting context.
-    // If the parent is a flex/grid container, inline layout rules don't apply
-    // and our font-metrics model is invalid.
-    const parentDisplay = getComputedStyle(anchorEl.parentElement).display;
-    if (parentDisplay !== "inline" && parentDisplay !== "inline-block" && parentDisplay !== "block") {
-      // we must hide the anchor otherwise it would affect layout without providing any benefit (would trigger flex gap for instance)
-      anchorEl.setAttribute("hidden", "");
-      setTopOffset(childEl, 0);
-      return;
-    }
-    anchorEl.removeAttribute("hidden");
-    const topOffset = computeTopOffset({
-      anchorEl,
-      childEl,
-      textAnchor
-    });
-    setTopOffset(childEl, topOffset);
-  }, [textAnchor, textKey, textSize, lineLayout?.size, lineLayout?.verticalAlign]);
-  return jsxs(Fragment$1, {
-    children: [children, jsx("span", {
-      ref: anchorRef,
-      className: "navi_text_anchor",
-      "aria-hidden": "true",
-      children: "\u200B"
-    })]
-  });
-};
-const setTopOffset = (childEl, topOffset) => {
-  // position:relative + top shifts the element visually.
-  // marginTop: -topOffset makes the layout box follow the visual position, so any container
-  // (button, link, box…) computes its own padding/border/height based on the real final position
-  // rather than the original unshifted one. This means a badge inside a button will symmetrically
-  // expand the button height instead of overflowing or being clipped.
-  // marginBottom: topOffset compensates the marginTop so the line height stays unchanged —
-  // the shift is purely a repositioning, not an inflation of the line.
-  if (!topOffset) {
-    childEl.style.position = "";
-    childEl.style.top = "";
-    childEl.style.marginTop = "";
-    childEl.style.marginBottom = "";
-    return;
-  }
-  childEl.style.position = "relative";
-  childEl.style.top = `${topOffset}px`;
-  childEl.style.marginTop = `${-topOffset}px`;
-  childEl.style.marginBottom = `${topOffset}px`;
-};
-const computeTopOffset = ({
-  anchorEl,
-  childEl,
-  textAnchor
-}) => {
-  if (textAnchor === "char-bottom") {
-    // Align child's bottom with the char's bottom = the baseline.
-    // The CSS spec says an inline-block with no text content has its baseline at its bottom margin edge.
-    // So the browser's default placement already puts the child's bottom at the line's baseline.
-    // No correction needed.
-    return 0;
-  }
-  // The anchor's rendered rect corresponds to the surrounding text's line box:
-  // top and bottom are the visual bounds of the line (including line-height).
-  const anchorRect = anchorEl.getBoundingClientRect();
-
-  // Measure the child's current rect, then subtract any previously applied top correction
-  // to recover its natural position — avoiding a style reset + reflow.
-  const childRect = childEl.getBoundingClientRect();
-  const childH = childRect.height;
-  const previousTop = parseFloat(childEl.style.top) || 0;
-  const childNaturalTop = childRect.top - previousTop;
-
-  // Compute desired child top Y based on textAnchor intention.
-  let desiredChildTopY = 0;
-  if (textAnchor === "line-top") {
-    desiredChildTopY = anchorRect.top;
-  } else if (textAnchor === "char-top") {
-    const anchorStyle = getComputedStyle(anchorEl);
-    const ctx = charTopCanvas.getContext("2d");
-    ctx.font = `${anchorStyle.fontWeight} ${anchorStyle.fontSize} ${anchorStyle.fontFamily}`;
-    const m = ctx.measureText("M");
-    const baselineY = anchorRect.bottom - m.fontBoundingBoxDescent;
-    desiredChildTopY = baselineY - m.actualBoundingBoxAscent;
-  } else if (textAnchor === "center") {
-    const anchorCenterY = (anchorRect.top + anchorRect.bottom) / 2;
-    desiredChildTopY = anchorCenterY - childH / 2;
-  } else if (textAnchor === "char-bottom") {
-    // Already handled above (early return 0), but guard here for completeness.
-    return 0;
-  } else if (textAnchor === "line-bottom") {
-    desiredChildTopY = anchorRect.bottom - childH;
-  } else {
-    return 0; // unknown textAnchor, no correction
-  }
-  return desiredChildTopY - childNaturalTop;
-};
-const charTopCanvas = document.createElement("canvas");
-
-installImportMetaCssBuild(import.meta);const css$T = /* css */`
-  @layer navi {
-    /* Ensure data attributes from box.jsx can win to update display */
-    .navi_icon {
-      display: inline-flex;
-      box-sizing: border-box;
-      max-width: 100%;
-      /* An icon never grows past the box it sits in, so a glyph can never make
-         a line of text taller than the text itself. lineOverflow="allow" opts
-         out, for an icon that is an affordance rather than a character — a
-         control's chevron or clear button, sized to be touched, not read. */
-      max-height: 100%;
-
-      &[data-line-overflow="allow"] {
-        max-height: none;
-      }
-    }
-  }
-
-  .navi_icon {
-    white-space: nowrap;
-    vertical-align: inherit;
-
-    &[data-icon-char] {
-      aspect-ratio: 1/1;
-      min-width: 0;
-      height: round(1em, 1px);
-      max-height: round(1em, 1px);
-      flex-grow: 0 !important;
-      align-items: center;
-      justify-content: center;
-
-      /* fillLine: measured on the line box (1lh) instead of the character box
-         (1em). The icon still stays inside the line — it just uses all of it,
-         which is what an icon standing on its own in a control's slot wants,
-         where a glyph sitting among letters wants to match their size. */
-      &[data-fill-line] {
-        height: round(1lh, 1px);
-        max-height: round(1lh, 1px);
-      }
-
-      svg,
-      img {
-        width: 100%;
-        height: 100%;
-      }
-      svg {
-        overflow: visible;
-      }
-    }
-    &[data-flow-inline] {
-      width: 1em;
-      height: 1em;
-    }
-    &[data-interactive] {
-      cursor: pointer;
-    }
-    &[data-icon-text] {
-      -webkit-font-smoothing: antialiased;
-      text-rendering: optimizeLegibility;
-    }
-  }
-
-  .navi_icon > svg,
-  .navi_icon > img {
-    width: 100%;
-    height: 100%;
-  }
-  .navi_icon[data-width-fixed] > svg,
-  .navi_icon[data-width-fixed] > img {
-    width: 100%;
-    height: auto;
-  }
-  .navi_icon[data-height-fixed] > svg,
-  .navi_icon[data-height-fixed] > img {
-    width: auto;
-    height: 100%;
-  }
-  .navi_icon[data-width-fixed][data-height-fixed] > svg,
-  .navi_icon[data-width-fixed][data-height-fixed] > img {
-    width: 100%;
-    height: 100%;
-  }
-`;
-
-/**
- * Renders an icon — an inline SVG/emoji/text glyph that inherits the
- * surrounding text's `currentColor` and (by default) its font size, so it sits
- * on the text baseline like a character.
- *
- * Content comes from either `href` (references an external/sprite symbol via
- * `<use>`) or `children` (an inline `<svg>` element, or a string for a
- * text/emoji icon). All extra props are spread onto the underlying `Box`/`Text`
- * (sizing, spacing, color, className, data-attributes, …).
- *
- * Render mode is chosen automatically:
- * - `children` is a **string** → a text icon (`<Text data-icon-text>`).
- * - **sized** (an explicit `width`/`height`, or `flex`/`grid`) → a block icon
- *   (`<Box square>`), laid out as its own box rather than inline.
- * - otherwise → an **inline char-like** icon that flows on the text baseline
- *   (`data-icon-char`), aligned via `textAnchor`.
- *
- * Accessibility: an icon is treated as decorative (`aria-hidden`) by default
- * whenever it has no explicit size and no `onClick`; give it an explicit
- * `decorative={false}` (or make it interactive) when it conveys meaning.
- *
- * @param {object} props
- * @param {string} [props.href] - URL/id of an external SVG symbol, rendered via
- *   `<svg><use href></svg>`. Mutually exclusive with meaningful `children`.
- * @param {import("ignore:preact").ComponentChildren} [props.children] - Inline icon
- *   content: an `<svg>` element, or a string (renders as a text/emoji icon).
- * @param {boolean} [props.decorative] - Marks the icon `aria-hidden`. Defaults
- *   to `true` for an unsized, non-interactive icon; pass `false` for a
- *   meaning-bearing icon that needs to be exposed to assistive tech.
- * @param {(event: MouseEvent) => void} [props.onClick] - Makes the icon
- *   interactive (`data-interactive`, pointer cursor) and non-decorative.
- * @param {"line-top"|"char-top"|"center"|"char-bottom"|"line-bottom"} [props.textAnchor="center"]
- *   - Vertical alignment within the surrounding text line for the inline
- *   char-like mode, forwarded to `TextAnchor`: `"line-top"`/`"line-bottom"`
- *   align to the line box edges, `"char-top"` to the ink ascent, `"center"`
- *   centers on the line box, `"char-bottom"` sits on the baseline. See
- *   `text_anchor.jsx`.
- * @param {{ size?: number, verticalAlign?: string }} [props.lineLayout] -
- *   Describes the surrounding line context (font size / vertical-align),
- *   forwarded to `TextAnchor` so it recomputes the vertical correction when
- *   that context changes.
- * @param {string|number} [props.width] - Explicit width; `"auto"` clears it.
- *   Any explicit size switches the icon to block (sized) mode.
- * @param {string|number} [props.height] - Explicit height; `"auto"` clears it.
- * @param {"allow"} [props.lineOverflow] - `"allow"` lets the icon be taller
- *   than the box it sits in (a line of text, a control's slot) instead of being
- *   capped by it. For an icon that is an affordance sized for the finger rather
- *   than a character sized for reading.
- * @param {boolean} [props.fillLine] - Sizes the icon on the line box (1lh)
- *   rather than on the character box (1em), so it uses the full height of the
- *   line without leaving it. Unlike `lineOverflow`, the icon still never
- *   exceeds the line.
- * @param {boolean} [props.square] - Keep a 1:1 box; combined with one explicit
- *   dimension it fixes the other too.
- * @param {boolean} [props.circle] - Like `square`, plus a circular shape.
- * @param {string|number} [props.aspectRatio] - Fixes the second dimension from
- *   the one explicit dimension.
- * @param {"x"|"y"|boolean} [props.flex] - Forces block/flex layout; auto-set to
- *   `"x"` when the icon is sized.
- * @param {boolean} [props.grid] - Forces block/grid layout.
- * @param {string} [props.className] - Merged with the base `"navi_icon"` class.
- */
-const Icon = ({
-  href,
-  children,
-  decorative,
-  onClick,
-  textAnchor = "center",
-  lineLayout,
-  lineOverflow,
-  fillLine,
-  ...props
-}) => {
-  import.meta.css = [css$T, "@jsenv/navi/src/text/icon.jsx"];
-  const innerChildren = href ? jsx("svg", {
-    width: "100%",
-    height: "100%",
-    children: jsx("use", {
-      href: href
-    })
-  }) : children;
-  let {
-    flex,
-    grid,
-    width,
-    height
-  } = props;
-  if (width === "auto") {
-    width = undefined;
-  }
-  if (height === "auto") {
-    height = undefined;
-  }
-  const hasExplicitWidth = width !== undefined;
-  const hasExplicitHeight = height !== undefined;
-  const widthFixed = hasExplicitWidth || hasExplicitHeight && (props.square || props.circle || props.aspectRatio);
-  const heightFixed = hasExplicitHeight || hasExplicitWidth && (props.square || props.circle || props.aspectRatio);
-  if (widthFixed || heightFixed) {
-    if (flex === undefined) {
-      flex = "x";
-    }
-  } else if (decorative === undefined && !onClick) {
-    decorative = true;
-  }
-  const ariaProps = decorative ? {
-    "aria-hidden": "true"
-  } : {};
-  const textRef = useRef();
-  if (typeof children === "string") {
-    return jsx(Text, {
-      ...props,
-      ...ariaProps,
-      "data-icon-text": "",
-      "data-line-overflow": lineOverflow,
-      "data-fill-line": fillLine ? "" : undefined,
-      children: children
-    });
-  }
-  if (flex || grid) {
-    return jsx(Box, {
-      square: true,
-      ...props,
-      ...ariaProps,
-      flex: flex,
-      baseClassName: "navi_icon",
-      "data-width-fixed": widthFixed ? "" : undefined,
-      "data-height-fixed": heightFixed ? "" : undefined,
-      "data-interactive": onClick ? "" : undefined,
-      "data-line-overflow": lineOverflow,
-      "data-fill-line": fillLine ? "" : undefined,
-      onClick: onClick,
-      children: innerChildren
-    });
-  }
-  return jsx(TextAnchor, {
-    childRef: textRef,
-    textAnchor: textAnchor,
-    textSize: props.size,
-    lineLayout: lineLayout,
-    children: jsxs(Text, {
-      ...props,
-      ...ariaProps,
-      className: withPropsClassName("navi_icon", props.className),
-      spacing: "pre",
-      "data-icon-char": "",
-      "data-line-overflow": lineOverflow,
-      "data-fill-line": fillLine ? "" : undefined,
-      "data-width-fixed": widthFixed ? "" : undefined,
-      "data-height-fixed": heightFixed ? "" : undefined,
-      "data-interactive": onClick ? "" : undefined,
-      onClick: onClick,
-      ref: textRef,
-      children: [jsx("span", {
-        style: "user-select:none",
-        children: "\u200B"
-      }), innerChildren]
-    })
-  });
-};
-
 /**
  * Hook that reactively checks if a URL is visited.
  * Re-renders when the visited URL set changes.
@@ -63066,7 +63431,8 @@ const useBadgeRegistry = (children, enabled) => {
  * not the same in each. Nothing is set up for a case that cannot happen: a
  * plain list is one element holding its children as-is — no registry, no
  * effect —, a capped one collects its badges but measures nothing, and only
- * shrinkWrap ever builds the measurement ghost.
+ * shrinkWrap on its own builds the measurement ghost: under maxLines the list
+ * is measured in place, once the rows are known.
  *
  * @param {import("ignore:preact").ComponentChildren} [fallback]
  *   Rendered in place of the badges when there is none. Without it an empty
@@ -63081,8 +63447,9 @@ const useBadgeRegistry = (children, enabled) => {
  *   Narrows the list down to its widest row so the last row isn't ragged.
  *   Defaults to true inside a <Picker> — the trigger draws a border around the
  *   list, so the ragged edge shows — and false elsewhere, where the work would
- *   often go unseen: opt in where an edge is visible. Ignored when maxLines is
- *   in play, which needs the full width to know where the rows fall.
+ *   often go unseen: opt in where an edge is visible. Composes with maxLines:
+ *   the rows are read at the full width first, and the list is narrowed once
+ *   the surplus is gone.
  * @param {number} [max]
  *   Caps how many badges are rendered; the surplus becomes a "+N" badge, which
  *   takes one of the max slots.
@@ -63106,11 +63473,10 @@ const BadgeList = props => {
     shrinkWrap = maxLinesFromAbove !== undefined
   } = props;
   if (maxLinesResolved !== undefined) {
-    // shrinkWrap is dropped on purpose: it narrows the list down to its widest
-    // row, which would re-wrap the badges under the cap just measured.
     return jsx(BadgeListMaxLines, {
       ...props,
-      maxLines: maxLinesResolved
+      maxLines: maxLinesResolved,
+      shrinkWrap: shrinkWrap
     });
   }
   if (shrinkWrap) {
@@ -63251,6 +63617,7 @@ const BadgeListMaxLines = ({
   children,
   max,
   maxLines,
+  shrinkWrap,
   ...boxProps
 }) => {
   const registry = useBadgeRegistry(children, true);
@@ -63272,8 +63639,29 @@ const BadgeListMaxLines = ({
   // out of the cap and nothing has to be watched.
   const watchesResize = fit !== null && fit.count > 1;
 
+  // The list's own width. While the rows are being read the list takes all the
+  // room it is given — a width kept from an earlier shrink wrap would fold the
+  // badges under it. Once the surplus is gone, shrinkWrap narrows the list to
+  // its widest row, measured where the badges stand: nothing is painted before
+  // the effect below has run, so no clone is needed.
+  useLayoutEffect(() => {
+    const visibleEl = visibleRef.current;
+    if (!visibleEl) {
+      return;
+    }
+    visibleEl.style.width = "";
+    if (fit === null || !shrinkWrap) {
+      return;
+    }
+    const widestRowWidth = measureWidestChildRow(visibleEl);
+    if (widestRowWidth !== null) {
+      visibleEl.style.width = `${Math.ceil(widestRowWidth)}px`;
+    }
+  }, [fit, shrinkWrap]);
+
   // Runs after every render, which is when the badges have registered and the
-  // DOM holds whatever this render asked for.
+  // DOM holds whatever this render asked for, at the width the effect above
+  // gave it.
   useLayoutEffect(() => {
     const visibleEl = visibleRef.current;
     if (!visibleEl) {
@@ -63308,7 +63696,8 @@ const BadgeListMaxLines = ({
       // And not every width change either. Nothing guarantees an ancestor whose
       // width does not follow its content (a column with align-items: start
       // sizes every row to what is inside it), so rendering every badge widens
-      // what is being watched and dropping the surplus narrows it right back.
+      // what is being watched and dropping the surplus — then shrink wrapping
+      // what is left — narrows it right back.
       // Those two widths are this list talking to itself; measuring again on
       // them never ends. Any other width is the room around it changing.
       const width = outerParent.getBoundingClientRect().width;
@@ -64177,7 +64566,7 @@ installImportMetaCssBuild(import.meta);const css$u = /* css */`
          means "open the picker". An own target is the exception, the same way
          the clear cross is one in the slot below: it says the press is aimed at
          IT, so it has to be reachable at all. */
-      [data-navi-own-target] {
+      [data-own-target] {
         pointer-events: auto;
       }
     }
@@ -75686,6 +76075,9 @@ const MessageBox = ({
   padding = "sm",
   icon,
   leftStripe,
+  // A message is free text: an emoji is expected in it, and must not push
+  // the first line down next to the icon and the close button.
+  emojiAsIcon = true,
   children,
   onClose,
   ...rest
@@ -75723,26 +76115,39 @@ const MessageBox = ({
         value: setHasTitleChild,
         children: [icon && jsx(Icon, {
           color: "var(--x-message-color)",
-          height: "1.5em",
+          height: "1lh",
           maxHeight: "auto",
           selfAlignY: "start",
           aspectRatio: "auto",
           children: icon
         }), jsx(Text, {
+          emojiAsIcon: emojiAsIcon,
           children: children
-        }), onClose && jsx(Button, {
-          action: onClose,
-          icon: true,
-          border: "none",
-          alignX: "center",
+        }), onClose &&
+        // A column as tall as the first line of the message, pinned to the
+        // top, the button centered in it: the close button stays level
+        // with the first line however many lines the message takes (same
+        // layout as Callout).
+        jsx(Box, {
+          flex: true,
           alignY: "center",
-          style: {
-            ":hover": {
-              backgroundColor: "rgba(0, 0, 0, 0.1)"
-            }
-          },
-          children: jsx(Icon, {
-            children: jsx(CloseSvg, {})
+          height: "1lh",
+          selfAlignY: "start",
+          shrink: false,
+          children: jsx(Button, {
+            action: onClose,
+            icon: true,
+            border: "none",
+            alignX: "center",
+            alignY: "center",
+            style: {
+              ":hover": {
+                backgroundColor: "rgba(0, 0, 0, 0.1)"
+              }
+            },
+            children: jsx(Icon, {
+              children: jsx(CloseSvg, {})
+            })
           })
         })]
       })
@@ -77830,5 +78235,5 @@ const UserSvg = () => jsx("svg", {
   })
 });
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, Expandable, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NumberSpin, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, Step, StepList, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, createAction, createAvailableConstraint, createI18n, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineNaviConfirmPopupOptions, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, formatDatetime, formatDay, formatDayRelative, formatMonth, formatNumber, formatTime, formatTimeRelative, getNowHours, getNowHoursRoundedToStep, interpolateText, isCellSelected, isColumnSelected, isRowSelected, isScrolling, isToday, languagesSignal, localStorageSignal, markErrorAsDisplayedBy, moveArrayItemByIndex, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, scrollActivitySignal, setBaseUrl, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useInputGroup, useKeyboardShortcuts, useNavState, useOrderedColumns, usePopupMode, useRouteStatus, useRunOnMount, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideValue, useStateArray, useTitleLevel, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
+export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, Expandable, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NumberSpin, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, Step, StepList, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, createAction, createAvailableConstraint, createI18n, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineNaviConfirmPopupOptions, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, formatDatetime, formatDay, formatDayRelative, formatMonth, formatNumber, formatTime, formatTimeRelative, getNowHours, getNowHoursRoundedToStep, interpolateText, isCellSelected, isColumnSelected, isRowSelected, isScrolling, isToday, languagesSignal, localStorageSignal, markErrorAsDisplayedBy, moveArrayItemByIndex, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, rawUrlPart, registerGlobalConstraint, reload, renderEmojiAsIcon, rerunActions, resource, route, routeAction, scrollActivitySignal, setBaseUrl, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useInputGroup, useKeyboardShortcuts, useNavState, useOrderedColumns, usePopupMode, useRouteStatus, useRunOnMount, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideValue, useStateArray, useTitleLevel, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
 //# sourceMappingURL=jsenv_navi.js.map