@jsenv/navi 0.27.66 → 0.27.68

package/dist/jsenv_navi.js

@@ -17418,7 +17418,7 @@ const createCalloutManager = (
       return;
     }
     const resolvedAnchorElement =
-      anchorElement || controller.elementRef.current;
+      anchorElement || controller.ref.current;
     const removeCloseOnCleanup = addTeardown?.(() => {
       requestCloseCallout(new CustomEvent("cleanup"), "cleanup");
     });
@@ -17443,7 +17443,7 @@ const createCalloutManager = (
           tokenData.onClose?.();
         }
         tokens.clear();
-        const element = controller.elementRef.current;
+        const element = controller.ref.current;
         if (
           shouldTransferFocusFromCallout &&
           element &&
@@ -19491,7 +19491,7 @@ const REQUIRED_CONSTRAINT = {
       }
       return {
         message: naviI18n("constraint.required.radio"),
-        target: field.elementRef.current,
+        target: field.ref.current,
       };
     }
     if (type === "radio") {
@@ -19505,7 +19505,7 @@ const REQUIRED_CONSTRAINT = {
       }
       return {
         message: naviI18n("constraint.required.radio"),
-        target: field.elementRef.current,
+        target: field.ref.current,
       };
     }
 
@@ -19517,7 +19517,7 @@ const REQUIRED_CONSTRAINT = {
       }
       return {
         message: naviI18n("constraint.required.checkbox_group"),
-        target: field.elementRef.current,
+        target: field.ref.current,
       };
     }
     if (type === "checkbox") {
@@ -20356,7 +20356,7 @@ const createControlValidation = (
 
   const checkValidity = ({
     event,
-    requester = controller.elementRef.current,
+    requester = controller.ref.current,
     fromRequestAction,
   } = {}) => {
     if (fromRequestAction) {
@@ -20399,7 +20399,7 @@ const createControlValidation = (
       ...DEFAULT_CONSTRAINT_SET,
       ...dynamicConstraintSet,
     ]);
-    const elementSig = getElementSignature(controller.elementRef.current);
+    const elementSig = getElementSignature(controller.ref.current);
     debugUIState(
       event,
       `check ${elementSig}: ${constraintSet.size} constraints`,
@@ -20454,7 +20454,7 @@ const createControlValidation = (
     if (activeFailedConstraintInfo) {
       const titleLess = controller.controlHostProps.title === undefined;
       if (titleLess) {
-        const element = controller.elementRef.current;
+        const element = controller.ref.current;
         if (element) {
           element.setAttribute(
             "title",
@@ -20465,7 +20465,7 @@ const createControlValidation = (
     } else {
       const titleLess = controller.controlHostProps.title === undefined;
       if (titleLess) {
-        const element = controller.elementRef.current;
+        const element = controller.ref.current;
         if (element) {
           element.removeAttribute("title");
         }
@@ -20479,7 +20479,7 @@ const createControlValidation = (
       !compareTwoJsValues(constraintValidityState, newConstraintValidityState)
     ) {
       constraintValidityState = newConstraintValidityState;
-      const element = controller.elementRef.current;
+      const element = controller.ref.current;
       if (element) {
         debugUIState(
           event,
@@ -20529,7 +20529,7 @@ const createControlValidation = (
     event,
     { report = false, fromRequestAction = false } = {},
   ) => {
-    const elementSig = getElementSignature(controller.elementRef.current);
+    const elementSig = getElementSignature(controller.ref.current);
     const isValid = checkValidity({ event, fromRequestAction });
     if (failingManagedControlValidity) {
       // Group/form case: find the actual failing leaf and report on it.
@@ -21022,7 +21022,7 @@ const createControlInteraction = (
     // Keep title attribute in sync for accessibility.
     const titleLess = !controller.controlHostProps?.title;
     if (titleLess) {
-      const element = controller.elementRef.current;
+      const element = controller.ref.current;
       if (element) {
         if (interactionFailedConstraintInfo) {
           element.setAttribute(
@@ -21236,7 +21236,7 @@ const tryActionAfterInteractionAllowed = (
   if (controller) {
     const proxyTargetController = findControlProxyTargetController(controller);
     if (proxyTargetController) {
-      elementForAction = proxyTargetController.elementRef.current;
+      elementForAction = proxyTargetController.ref.current;
     }
     const activeController = proxyTargetController ?? controller;
     uiState = activeController?.uiState;
@@ -22344,6 +22344,36 @@ const createControlRules = (
   };
 };
 
+/**
+ * Returns a stable object that is mutated across renders.
+ * Closures that capture the returned reference always read current values
+ * because the same object reference is reused — no stale captures.
+ *
+ * - `init(scope)` — called **once** on mount. Receives the (initially empty)
+ *   stable scope object and returns properties to assign to it. Use this to
+ *   create anything that must live for the component's full lifetime: signals,
+ *   pubsub pairs, the controller object itself, etc.
+ *
+ * - `update(scope)` — called on every subsequent render. Receives the current
+ *   scope and returns properties to update. Use this to sync mutable values
+ *   (current props, parent controller, etc.) and run side-effectful logic like
+ *   checking whether a controlled `state` prop changed.
+ */
+const useRenderScope = (init, update) => {
+  const scopeRef = useRef();
+  let scope = scopeRef.current;
+  if (!scope) {
+    scope = {};
+    scopeRef.current = scope;
+    const initScope = init(scope);
+    Object.assign(scope, initScope);
+  } else {
+    const updateScope = update(scope);
+    Object.assign(scope, updateScope);
+  }
+  return scope;
+};
+
 /**
  * Minimal interface that any object placed in `ParentUIStateControllerContext` must satisfy.
  * Implemented by `useUIGroupStateController`, `useUIFacadeStateController`, and
@@ -22359,7 +22389,7 @@ const createControlRules = (
  *   onChildUIAction(child, e, { stateChanged: boolean }): void; // Called when a child fires a UI action
  *   unregisterChild(child): void; // Called on child unmount
  *   props: Object;
- *   elementRef: Ref; // Used to dispatch DOM events
+ *   ref: Ref; // Used to dispatch DOM events
  *   getManagedControls(): UIStateController[]; // Returns controls whose validity is managed by this controller
  * }
  * ```
@@ -22395,7 +22425,7 @@ const ParentUIStateControllerContext = createContext();
  * **internalBehavior events** (e.g. radio_sibling_uncheck, state_prop re-sync):
  * skip reactions and parent notification — they are programmatic, not user-initiated.
  *
- * The controller exposes `elementRef` so parent groups can dispatch DOM events on children
+ * The controller exposes `ref` so parent groups can dispatch DOM events on children
  * (e.g. `resetUIState` cascading `navi_reset_ui_state`).
  */
 const useUIStateController = (
@@ -22413,522 +22443,512 @@ const useUIStateController = (
   const debugUIState = useDebugUIState();
   const debugFocus = useDebugFocus();
 
-  const uiStateControllerRef = useRef();
   const parentUIStateController = useContext(ParentUIStateControllerContext);
   const formContext = useContext(FormContext);
-  const { id, uiAction } = props;
-  const ref = props.ref;
-  const isProxy = Boolean(props["navi-control-proxy-for"]);
   if (persists === undefined && formContext) {
     persists = true;
   }
   const controlType = controlInfo.controlType;
   const isRadio = controlType === "input" && props.type === "radio";
-  const [
-    notifyParentAboutChildMount,
-    notifyParentAboutChildUIAction,
-    notifyParentAboutChildUnmount,
-  ] = useParentControllerNotifiers(
-    parentUIStateController,
-    uiStateControllerRef,
-    controlType,
-    debugUIState,
-  );
-  useLayoutEffect(() => {
-    const controller = uiStateControllerRef.current;
-    const el = ref.current;
-    if (el) {
-      el.__uiStateController__ = controller;
-    }
-    notifyParentAboutChildMount();
-    return () => {
-      if (el && el.__uiStateController__ === controller) {
-        delete el.__uiStateController__;
-      }
-      notifyParentAboutChildUnmount();
-      onUIStateControllerDestroyed(controller);
-    };
-  }, []);
+  const isProxy = Boolean(props["navi-control-proxy-for"]);
 
-  const existingUIStateController = uiStateControllerRef.current;
-  if (existingUIStateController) {
-    existingUIStateController._checkForUpdates({
-      props,
-      controlInfo,
-    });
-    return existingUIStateController;
-  }
-  const { stateInitial } = controlInfo;
-  debugUIState(
-    `Creating "${controlType}" ui state controller - initial state:`,
-    JSON.stringify(stateInitial),
-  );
-  const [publishUIState, subscribeUIState] = createPubSub();
-  const ownUIStateSignal = signal(stateInitial);
-  const inherit =
-    controlType === "button" &&
-    !controlInfo.hasStateProp &&
-    parentUIStateController;
-  const uiStateSignal = inherit
-    ? computed(() => {
-        const parentUIState = parentUIStateController.uiStateSignal.value;
-        const ownUIState = ownUIStateSignal.value;
-        return ownUIState || parentUIState;
-      })
-    : ownUIStateSignal;
+  const scope = useRenderScope(
+    // ── init: runs once on mount ───────────────────────────────────────────
+    // Creates the controller and all long-lived objects. Captures first-render
+    // values for stable config (controlType, isRadio…); live values are read
+    // through `s` which is always updated by `update` before any method call.
+    (s) => {
+      const parentUiStateSignalHolder = signal(
+        parentUIStateController?.uiStateSignal ?? null,
+      );
+      const { stateInitial } = controlInfo;
+      debugUIState(
+        `Creating "${controlType}" ui state controller - initial state:`,
+        JSON.stringify(stateInitial),
+      );
+      const [publishUIState, subscribeUIState] = createPubSub();
+      const ownUIStateSignal = signal(stateInitial);
+      const inherit =
+        controlType === "button" &&
+        !controlInfo.hasStateProp &&
+        parentUIStateController;
+      const uiStateSignal = inherit
+        ? computed(() => {
+            const parentSig = parentUiStateSignalHolder.value;
+            const parentUIState = parentSig?.value;
+            const ownUIState = ownUIStateSignal.value;
+            return ownUIState || parentUIState;
+          })
+        : ownUIStateSignal;
 
-  const uiStateController = {
-    _checkForUpdates: ({ props, controlInfo }) => {
-      // Raw Preact props from the current render. These are the component's input props,
-      // not the resolved/curated host props. useInteractiveProps overwrites
-      // uiStateController.controlHostProps with the resolved subset on every render.
-      uiStateController.props = props;
-      uiStateController.id = props.id; // never suppoed to changed, not supported for now
-      uiStateController.name = props.name;
+      const controller = {
+        controlType,
+        parentUIStateController,
+        parentUiStateSignalHolder,
+        isProxy,
+        allowNameless,
 
-      const { value, hasStateProp, state } = controlInfo;
-      uiStateController.value = value;
-      if (hasStateProp) {
-        uiStateController.hasStateProp = true;
-        const currentState = uiStateController.state;
-        if (compareTwoJsValues(state, currentState)) ; else {
-          uiStateController.state = state;
-          uiStateController.setUIState(
-            state,
-            new CustomEvent("state_prop_change"),
+        props,
+        ref: props.ref,
+        id: props.id,
+        name: props.name,
+
+        state: stateInitial,
+        uiState: stateInitial,
+        uiStateSignal,
+        value: controlInfo.value,
+
+        facadeChild: null,
+        getManagedControls: () => {
+          if (controller.facadeChild) {
+            const child = controller.facadeChild;
+            const childManaged = child.getManagedControls();
+            if (childManaged.length > 0) return childManaged;
+            return [child];
+          }
+          return [];
+        },
+        onUIAction: (e, { skipCommand } = {}) => {
+          if (controlType === "button" && controller.controlHostProps.name) {
+            const buttonName = controller.controlHostProps.name;
+            const parentController = controller.parentUIStateController;
+            if (parentController && parentController.wantRequesterButtonState) {
+              const currentState = parentController.uiState;
+              const mergedState = {
+                ...currentState,
+                [buttonName]: controller.uiState,
+              };
+              parentController.syncInternalState(mergedState);
+              debugUIState(
+                `merging button state into parent control group:`,
+                mergedState,
+              );
+            }
+          }
+          // Trigger uiAction/command side effects without changing UI state.
+          const currentUIState = controller.uiState;
+          s.uiActionInternal?.(currentUIState, e);
+          if (s.uiAction) {
+            debugUIState(`calling uiAction for ${controlType}`, currentUIState);
+            s.uiAction(currentUIState, e);
+          }
+          if (skipCommand) ; else {
+            const command = controller.controlHostProps.command;
+            if (command) {
+              const element = controller.ref.current;
+              if (element) {
+                debugUIState(
+                  `triggering command "${command}" for "${controlType}"`,
+                );
+                triggerNaviCommand(element, command, e);
+              }
+            }
+          }
+        },
+        setUIState: (newUIState, e) => {
+          const guardResult = controller.rules.guard.checkUIState(
+            newUIState,
+            e,
           );
-        }
-      } else if (uiStateController.hasStateProp) {
-        uiStateController.hasStateProp = false;
-        uiStateController.state = stateInitial;
-      }
-    },
-
-    controlType,
-    parentUIStateController,
-    isProxy,
-    allowNameless,
-    elementRef: ref,
-    props,
-
-    id: props.id,
-    name: props.name,
-    state: stateInitial,
-    uiState: stateInitial,
-    uiStateSignal,
-    value: controlInfo.value,
-
-    facadeChild: null,
-    getManagedControls: () => {
-      if (uiStateController.facadeChild) {
-        const child = uiStateController.facadeChild;
-        const childManaged = child.getManagedControls();
-        if (childManaged.length > 0) {
-          return childManaged;
-        }
-        return [child];
-      }
-      return [];
-    },
-    onUIAction: (e, { skipCommand } = {}) => {
-      if (controlType === "button" && uiStateController.controlHostProps.name) {
-        const buttonName = uiStateController.controlHostProps.name;
-        const parentController = uiStateController.parentUIStateController;
-        if (parentController && parentController.wantRequesterButtonState) {
-          const currentState = parentController.uiState;
-          const mergedState = {
-            ...currentState,
-            [buttonName]: uiStateController.uiState,
-          };
-          parentController.syncInternalState(mergedState);
-          debugUIState(
-            `merging button state into parent control group:`,
-            mergedState,
+          if (guardResult) {
+            if (Object.hasOwn(guardResult, "fixedValue")) {
+              newUIState = guardResult.fixedValue;
+              // fall through — continue with truncated value (callout already shown by guard)
+            } else {
+              return false;
+            }
+          }
+          const controllerSig = getElementSignature(
+            e.currentTarget || controller.ref.current,
           );
-        }
-      }
-      // Trigger uiAction/command side effects without changing UI state.
-      const currentUIState = uiStateController.uiState;
-      uiActionInternal?.(currentUIState, e);
-      if (uiAction) {
-        debugUIState(`calling uiAction for ${controlType}`, currentUIState);
-        uiAction(currentUIState, e);
-      }
-      if (skipCommand) ; else {
-        const command = uiStateController.controlHostProps.command;
-        if (command) {
-          const element = uiStateController.elementRef.current;
-          if (element) {
+          const currentUIState = controller.uiState;
+          const stateIsTheSame = compareTwoJsValues(newUIState, currentUIState);
+          if (stateIsTheSame) {
+            if (controlType === "button" || controlType === "link") {
+              if (!isInternalEvent(e)) {
+                controller.onUIAction(e);
+              }
+              return true;
+            }
             debugUIState(
-              `triggering command "${command}" for "${controlType}"`,
+              e,
+              `${controllerSig}.setUIState(${JSON.stringify(newUIState)}, "${e.type}") -> state unchanged, no update needed`,
             );
-            triggerNaviCommand(element, command, e);
+            if (
+              controlType === "input" &&
+              controller.controlHostProps.type === "radio" &&
+              !isInternalEvent(e)
+            ) {
+              s.parentUIStateController?.onChildUIAction(controller, e, {
+                stateChanged: false,
+              });
+            }
+            if (e.currentTarget === null) {
+              // A stale/reused event (currentTarget is null) means this is a debounced
+              // callback firing the original input event after a timeout. The state hasn't
+              // changed and this is not a live user gesture — skip uiAction and command.
+              return false;
+            }
+            if (e.type === "state_prop_change") {
+              // state_prop_change with the same uiState means the state prop was updated
+              // to match what the user already has in the UI (e.g. action completed and
+              // synced state back). No real user gesture — skip uiAction and command.
+              return false;
+            }
+            if (e.type === "change") {
+              // "change" fires after "input" for native inputs (date, color, etc.).
+              // The "input" event already updated the state and fired uiAction.
+              // When state is unchanged here it means "input" already ran — skip to
+              // avoid a duplicate uiAction on the same user gesture.
+              return false;
+            }
+            controller.onUIAction(e);
+            return false;
           }
-        }
-      }
-    },
-    setUIState: (newUIState, e) => {
-      const guardResult = uiStateController.rules.guard.checkUIState(
-        newUIState,
-        e,
-      );
-      if (guardResult) {
-        if (Object.hasOwn(guardResult, "fixedValue")) {
-          newUIState = guardResult.fixedValue;
-          // fall through — continue with truncated value (callout already shown by guard)
-        } else {
-          return false;
-        }
-      }
-      const controllerSig = getElementSignature(e.currentTarget || ref.current);
-      // if (persists) {
-      //   setNavState(prop);
-      // }
-      const currentUIState = uiStateController.uiState;
-      const stateIsTheSame = compareTwoJsValues(newUIState, currentUIState);
-      if (stateIsTheSame) {
-        if (controlType === "button" || controlType === "link") {
-          if (!isInternalEvent(e)) {
-            uiStateController.onUIAction(e);
+          // set immediatly (don't wait for preact re-render) so ui is in the right state for:
+          // - side effect
+          // - any "input" event that might be dispatched below
+          syncDomState(newUIState, e);
+          controller.uiState = newUIState;
+          ownUIStateSignal.value = newUIState;
+          const controlProxyFor =
+            controller.controlHostProps["navi-control-proxy-for"];
+          // Radio group: when a radio becomes checked, uncheck all siblings.
+          // We only update their UIState — no parent notification, no synthetic
+          // input event (the browser never fires input on the unchecked radios,
+          // and we don't want to trigger their action flow with a stale DOM value).
+          // Uses the in-memory registry instead of DOM queries so this works even
+          // when sibling items are virtualized (not in the DOM).
+          // Form scoping is preserved by comparing parentUIStateController references.
+          if (isRadio && newUIState && controller.name && !controlProxyFor) {
+            const siblings = getRadioSiblings(controller);
+            if (siblings) {
+              const siblingUncheckEvent = new CustomEvent(
+                "radio_sibling_uncheck",
+                { detail: {} },
+              );
+              chainEvent(siblingUncheckEvent, e);
+              for (const siblingController of siblings) {
+                if (siblingController === controller) continue;
+                if (
+                  siblingController.parentUIStateController !==
+                  s.parentUIStateController
+                ) {
+                  continue;
+                }
+                siblingController.setUIState(undefined, siblingUncheckEvent);
+              }
+            }
           }
-          return true;
-        }
-        debugUIState(
-          e,
-          `${controllerSig}.setUIState(${JSON.stringify(newUIState)}, "${e.type}") -> state unchanged, no update needed`,
-        );
-        if (
-          controlType === "input" &&
-          uiStateController.controlHostProps.type === "radio" &&
-          !isInternalEvent(e)
-        ) {
-          notifyParentAboutChildUIAction(e, { stateChanged: false });
-        }
-        // A stale/reused event (currentTarget is null) means this is a debounced
-        // callback firing the original input event after a timeout. The state hasn't
-        // changed and this is not a live user gesture — skip uiAction and command.
-        if (e.currentTarget === null) {
-          return false;
-        }
-        // state_prop_change with the same uiState means the state prop was updated
-        // to match what the user already has in the UI (e.g. action completed and
-        // synced state back). No real user gesture — skip uiAction and command.
-        if (e.type === "state_prop_change") {
-          return false;
-        }
-        // "change" fires after "input" for native inputs (date, color, etc.).
-        // The "input" event already updated the state and fired uiAction.
-        // When state is unchanged here it means "input" already ran — skip to
-        // avoid a duplicate uiAction on the same user gesture.
-        if (e.type === "change") {
-          return false;
-        }
-        uiStateController.onUIAction(e);
-        return false;
-      }
-      // set immediatly (don't wait for preact re-render) so ui is in the right state for:
-      // - side effect
-      // - any "input" event that might be dispatched below
-      syncDomState(newUIState, e);
-      uiStateController.uiState = newUIState;
-      ownUIStateSignal.value = newUIState;
-      // Radio group: when a radio becomes checked, uncheck all siblings.
-      // We only update their UIState — no parent notification, no synthetic
-      // input event (the browser never fires input on the unchecked radios,
-      // and we don't want to trigger their action flow with a stale DOM value).
-      // Uses the in-memory registry instead of DOM queries so this works even
-      // when sibling items are virtualized (not in the DOM).
-      // Form scoping is preserved by comparing parentUIStateController references.
-      const controlProxyFor =
-        uiStateController.controlHostProps["navi-control-proxy-for"];
-      if (isRadio && newUIState && uiStateController.name && !controlProxyFor) {
-        const siblings = getRadioSiblings(uiStateController);
-        if (siblings) {
-          const siblingUncheckEvent = new CustomEvent("radio_sibling_uncheck", {
-            detail: {},
-          });
-          chainEvent(siblingUncheckEvent, e);
-          for (const siblingController of siblings) {
-            if (siblingController === uiStateController) {
-              continue;
+          debugUIState(e, `publishUIState(${JSON.stringify(newUIState)})`);
+          publishUIState(newUIState, e);
+          const el = controller.ref.current;
+          // Always notify the element that its UI state changed.
+          // Listeners use this to stay in sync (e.g. input_effect.js tracks currentState,
+          // useUIState subscribes for reactive updates). Separate from navi_set_ui_state
+          // which is the command; navi_ui_state_change is the notification.
+          if (el) {
+            dispatchInternalCustomEvent(el, "navi_ui_state_change", {
+              event: e,
+              value: newUIState,
+            });
+          }
+          if (!controlProxyFor) {
+            // When this controller is a real input that has a visible proxy
+            // (linked via `navi-control-proxy-for`), mirror the new state to the
+            // proxy DOM synchronously. Otherwise the proxy would only catch up
+            // later through a React re-render — visible as e.g. two radios
+            // appearing checked at once between the real input update and the
+            // next render (radio_sibling_uncheck case).
+            const proxyController = findProxyController(s.id);
+            if (proxyController) {
+              // Find any mounted controller that declared itself as a proxy for this one.
+              // Communicates directly to the proxy controller — no DOM query needed.
+              const mirrorEvent = new CustomEvent("proxy_mirror_state", {
+                detail: {},
+              });
+              chainEvent(mirrorEvent, e);
+              proxyController.setUIState(newUIState, mirrorEvent);
+            }
+          }
+          if (isInternalEvent(e)) {
+            if (e.type === "facade_child_mount_sync") {
+              const wasEmptyString =
+                currentUIState === "" && newUIState === undefined;
+              const wasUndefinedNowEmpty =
+                currentUIState === undefined && newUIState === "";
+              if (wasEmptyString) {
+                console.warn(
+                  `[navi] Picker mount sync changed state from "" to undefined. ` +
+                    `This will call uiAction on mount, which is likely unintended. ` +
+                    `Initialise the signal with undefined instead of "" to avoid this.`,
+                );
+              } else if (wasUndefinedNowEmpty) {
+                console.warn(
+                  `[navi] Picker mount sync changed state from undefined to "". ` +
+                    `This will call uiAction on mount, which is likely unintended. ` +
+                    `The child component is emitting "" for an empty value — it should emit undefined instead.`,
+                );
+              }
+            }
+            // initial_state_push is pure initialization (equivalent to defaultValue on the
+            // child itself): skip uiAction entirely so no side effects fire on mount.
+            if (e.type !== "initial_state_push") {
+              // Still fire uiAction so external listeners (e.g. signals) stay in
+              // sync, but do NOT fire the command and do NOT notify the parent —
+              // both would cause an infinite loop when a parent cascades state
+              // down to its children (child command would re-trigger the cascade).
+              controller.onUIAction(e, { skipCommand: true });
+            }
+            if (e.type === "facade_propagate_up") {
+              // Exception: when the facade propagates a child state change up to the
+              // real picker input, also notify the parent group (e.g. Form) so it
+              // keeps its cached aggregated state in sync and fires its own uiAction.
+              // This is consistent with how a direct Input inside a Form behaves:
+              // the Form's uiAction fires on every value change.
+              s.parentUIStateController?.onChildUIAction(controller, e, {
+                stateChanged: true,
+              });
             }
             if (
-              siblingController.parentUIStateController !==
-              parentUIStateController
+              e.type === "state_prop_change" &&
+              s.parentUIStateController &&
+              !s.parentUIStateController.hasStateProp
             ) {
-              continue;
+              // Exception: state_prop_change can only fire on a control with its own
+              // controlled state/value prop (see hasStateProp above) — groups never
+              // cascade state down into such children (they're explicitly skipped,
+              // see shouldPropagateStateToChild/hasStateProp checks), so this change
+              // can never be an echo of the parent's own cascade. The loop risk this
+              // suppression exists for only applies when the parent itself just pushed
+              // this value down, which requires the parent to be controlled (have its
+              // own state/value prop). When the parent is "stateless" (uncontrolled),
+              // notifying it is always safe and necessary — otherwise its aggregated
+              // state silently drifts out of sync with this child.
+              s.parentUIStateController.onChildUIAction(controller, e, {
+                stateChanged: true,
+              });
             }
-            siblingController.setUIState(undefined, siblingUncheckEvent);
-          }
-        }
-      }
-      debugUIState(e, `publishUIState(${JSON.stringify(newUIState)})`);
-      publishUIState(newUIState, e);
-      const el = ref.current;
-      // Always notify the element that its UI state changed.
-      // Listeners use this to stay in sync (e.g. input_effect.js tracks currentState,
-      // useUIState subscribes for reactive updates). Separate from navi_set_ui_state
-      // which is the command; navi_ui_state_change is the notification.
-      if (el) {
-        dispatchInternalCustomEvent(el, "navi_ui_state_change", {
-          event: e,
-          value: newUIState,
-        });
-      }
-      // When this controller is a real input that has a visible proxy
-      // (linked via `navi-control-proxy-for`), mirror the new state to the
-      // proxy DOM synchronously. Otherwise the proxy would only catch up
-      // later through a React re-render — visible as e.g. two radios
-      // appearing checked at once between the real input update and the
-      // next render (radio_sibling_uncheck case).
-      if (!controlProxyFor) {
-        // Find any mounted controller that declared itself as a proxy for this one.
-        // Communicates directly to the proxy controller — no DOM query needed.
-        const proxyController = findProxyController(id);
-        if (proxyController) {
-          const mirrorEvent = new CustomEvent("proxy_mirror_state", {
-            detail: {},
-          });
-          chainEvent(mirrorEvent, e);
-          proxyController.setUIState(newUIState, mirrorEvent);
-        }
-      }
-      if (isInternalEvent(e)) {
-        if (e.type === "facade_child_mount_sync") {
-          // Warn when the picker's initial signal value is "" but the list
-          // resolved to undefined (no selection). These are semantically
-          // equivalent but technically different, so the mount-sync registers
-          // as a state change and fires uiAction unexpectedly.
-          // Fix: initialise the signal with undefined instead of "".
-          const wasEmptyString =
-            currentUIState === "" && newUIState === undefined;
-          const wasUndefinedNowEmpty =
-            currentUIState === undefined && newUIState === "";
-          if (wasEmptyString) {
-            console.warn(
-              `[navi] Picker mount sync changed state from "" to undefined. ` +
-                `This will call uiAction on mount, which is likely unintended. ` +
-                `Initialise the signal with undefined instead of "" to avoid this.`,
-            );
-          } else if (wasUndefinedNowEmpty) {
-            console.warn(
-              `[navi] Picker mount sync changed state from undefined to "". ` +
-                `This will call uiAction on mount, which is likely unintended. ` +
-                `The child component is emitting "" for an empty value — it should emit undefined instead.`,
-            );
+            return true;
           }
-        }
-        // initial_state_push is pure initialization (equivalent to defaultValue on the
-        // child itself): skip uiAction entirely so no side effects fire on mount.
-        if (e.type !== "initial_state_push") {
-          // Still fire uiAction so external listeners (e.g. signals) stay in
-          // sync, but do NOT fire the command and do NOT notify the parent —
-          // both would cause an infinite loop when a parent cascades state
-          // down to its children (child command would re-trigger the cascade).
-          uiStateController.onUIAction(e, {
-            skipCommand: true,
-          });
-        }
-        // Exception: when the facade propagates a child state change up to the
-        // real picker input, also notify the parent group (e.g. Form) so it
-        // keeps its cached aggregated state in sync and fires its own uiAction.
-        // This is consistent with how a direct Input inside a Form behaves:
-        // the Form's uiAction fires on every value change.
-        if (e.type === "facade_propagate_up") {
-          notifyParentAboutChildUIAction(e, { stateChanged: true });
-        }
-        // Exception: state_prop_change can only fire on a control with its own
-        // controlled state/value prop (see hasStateProp above) — groups never
-        // cascade state down into such children (they're explicitly skipped,
-        // see shouldPropagateStateToChild/hasStateProp checks), so this change
-        // can never be an echo of the parent's own cascade. The loop risk this
-        // suppression exists for only applies when the parent itself just pushed
-        // this value down, which requires the parent to be controlled (have its
-        // own state/value prop). When the parent is "stateless" (uncontrolled),
-        // notifying it is always safe and necessary — otherwise its aggregated
-        // state silently drifts out of sync with this child.
-        if (
-          e.type === "state_prop_change" &&
-          parentUIStateController &&
-          !parentUIStateController.hasStateProp
-        ) {
-          notifyParentAboutChildUIAction(e, { stateChanged: true });
-        }
-        return true;
-      }
-      notifyParentAboutChildUIAction(e, { stateChanged: true });
-      if (controlProxyFor) {
-        // Proxy: forward the state change to the real input.
-        // Use a dedicated internal event so that when the real input's setUIState
-        // sees stateIsTheSame=true (already updated by the real input's own flow),
-        // it does NOT fire notifyParentAboutChildUIAction(stateChanged=false) back
-        // to the group — which would trigger the group action with a stale value.
-        const targetController = getUIStateControllerById(controlProxyFor);
-        if (targetController) {
-          debugUIState(
-            e,
-            `forwarding set_ui_state "${newUIState}" to ${getElementSignature(targetController.elementRef.current)}`,
-          );
-          const forwardEvent = new CustomEvent("proxy_forward_set_ui_state", {
-            detail: {},
+          s.parentUIStateController?.onChildUIAction(controller, e, {
+            stateChanged: true,
           });
-          chainEvent(forwardEvent, e);
-          targetController.setUIState(newUIState, forwardEvent);
-        }
-      }
-      let syntheticInputFired = false;
-      if (el) {
-        // Dispatch a synthetic "input" event so external listeners see the new
-        // value. Skip when an input event on this element already exists in the chain.
-        const existingInputEvent = findEvent(e, (eInChain) => {
-          return eInChain.type === "input" && eInChain.target === el;
-        });
-        if (!existingInputEvent) {
-          if (el.tagName === "INPUT") {
-            if (el.type === "radio" || el.type === "checkbox") {
+          if (controlProxyFor) {
+            // Proxy: forward the state change to the real input.
+            // Use a dedicated internal event so that when the real input's setUIState
+            // sees stateIsTheSame=true (already updated by the real input's own flow),
+            // it does NOT fire notifyParentAboutChildUIAction(stateChanged=false) back
+            // to the group — which would trigger the group action with a stale value.
+            const targetController = getUIStateControllerById(controlProxyFor);
+            if (targetController) {
               debugUIState(
                 e,
-                "dispatching synthetic input event without data for checkbox/radio",
+                `forwarding set_ui_state "${newUIState}" to ${getElementSignature(targetController.ref.current)}`,
               );
-              el.dispatchEvent(new Event("input", { bubbles: true }));
-              syntheticInputFired = true;
-            } else {
-              debugUIState(
-                e,
-                `dispatching synthetic input event with data "${newUIState}" for input`,
+              const forwardEvent = new CustomEvent(
+                "proxy_forward_set_ui_state",
+                { detail: {} },
               );
-              el.dispatchEvent(
-                new InputEvent("input", {
-                  bubbles: true,
-                  cancelable: true,
-                  inputType: "insertText",
-                  data: newUIState,
-                }),
-              );
-              syntheticInputFired = true;
+              chainEvent(forwardEvent, e);
+              targetController.setUIState(newUIState, forwardEvent);
             }
           }
-          // TODO: select, textarea
-        }
-      }
-      // When a synthetic "input" event was dispatched, the stateIsTheSame path
-      // already called onUIAction via the input event handler — skip here to
-      // avoid a duplicate uiAction on the same user gesture.
-      if (!syntheticInputFired) {
-        uiStateController.onUIAction(e);
-      }
-      // Sync validity after state change: re-check constraints against the new value.
-      // Internal events (programmatic) → silent check only.
-      // User events → full sync (may open/close callout).
-      if (isInternalEvent(e)) {
-        uiStateController.rules.validation.checkValidity({ event: e });
-      } else {
-        uiStateController.rules.validation.syncValidity(e);
-      }
-      return true;
-    },
-    clearUIState: (e) => {
-      // Radio and checkbox "unchecked" state is `undefined`, not `""`.
-      // Passing `""` would set checked=true because `"" !== undefined`.
-      const isCheckable =
-        controlType === "input" &&
-        (props.type === "radio" || props.type === "checkbox");
-      uiStateController.setUIState(isCheckable ? undefined : "", e);
-    },
-    resetUIState: (e) => {
-      uiStateController.setUIState(uiStateController.state, e);
-    },
-    onActionEnd: async (e) => {
-      debugUIState(`"${controlType}" actionEnd called`);
-      // wait for preact to re-render to update readonly as action end side effects are runned
-      // await new Promise((r) => requestAnimationFrame(r));
-      uiStateController.rules.validation.syncValidity(e);
-    },
-    onActionError: (e) => {
-      debugUIState(`"${controlType}" actionError called`);
-      uiStateController.rules.validation.syncValidity(e, { report: true });
-    },
-    subscribe: subscribeUIState,
-    // Leaf controls don't aggregate children, but they act as a transparent
-    // pass-through so that controls nested inside them (e.g. an Input inside
-    // a List.Item) can bubble up registration to the nearest group ancestor.
-    registerChild: (childUIStateController, options) => {
-      if (parentUIStateController) {
-        parentUIStateController.registerChild(childUIStateController, options);
-      }
-    },
-    unregisterChild: (childUIStateController) => {
-      if (parentUIStateController) {
-        parentUIStateController.unregisterChild(childUIStateController);
-      }
+          // Dispatch a synthetic "input" event so external listeners see the new
+          // value. Skip when an input event on this element already exists in the chain.
+          let syntheticInputFired = false;
+          if (el) {
+            const existingInputEvent = findEvent(e, (eInChain) => {
+              return eInChain.type === "input" && eInChain.target === el;
+            });
+            if (!existingInputEvent) {
+              if (el.tagName === "INPUT") {
+                if (el.type === "radio" || el.type === "checkbox") {
+                  debugUIState(
+                    e,
+                    "dispatching synthetic input event without data for checkbox/radio",
+                  );
+                  el.dispatchEvent(new Event("input", { bubbles: true }));
+                  syntheticInputFired = true;
+                } else {
+                  debugUIState(
+                    e,
+                    `dispatching synthetic input event with data "${newUIState}" for input`,
+                  );
+                  el.dispatchEvent(
+                    new InputEvent("input", {
+                      bubbles: true,
+                      cancelable: true,
+                      inputType: "insertText",
+                      data: newUIState,
+                    }),
+                  );
+                  syntheticInputFired = true;
+                }
+              }
+              // TODO: select, textarea
+            }
+          }
+          if (!syntheticInputFired) {
+            // When a synthetic "input" event was dispatched, the stateIsTheSame path
+            // already called onUIAction via the input event handler — skip here to
+            // avoid a duplicate uiAction on the same user gesture.
+            controller.onUIAction(e);
+          }
+          // Sync validity after state change: re-check constraints against the new value.
+          // Internal events (programmatic) → silent check only.
+          // User events → full sync (may open/close callout).
+          if (isInternalEvent(e)) {
+            controller.rules.validation.checkValidity({ event: e });
+          } else {
+            controller.rules.validation.syncValidity(e);
+          }
+          return true;
+        },
+        clearUIState: (e) => {
+          // Radio and checkbox "unchecked" state is `undefined`, not `""`.
+          // Passing `""` would set checked=true because `"" !== undefined`.
+          const isCheckable =
+            controlType === "input" &&
+            (props.type === "radio" || props.type === "checkbox");
+          controller.setUIState(isCheckable ? undefined : "", e);
+        },
+        resetUIState: (e) => {
+          controller.setUIState(controller.state, e);
+        },
+        onActionEnd: async (e) => {
+          debugUIState(`"${controlType}" actionEnd called`);
+          // wait for preact to re-render to update readonly as action end side effects are runned
+          // await new Promise((r) => requestAnimationFrame(r));
+          controller.rules.validation.syncValidity(e);
+        },
+        onActionError: (e) => {
+          debugUIState(`"${controlType}" actionError called`);
+          controller.rules.validation.syncValidity(e, { report: true });
+        },
+        subscribe: subscribeUIState,
+        // Leaf controls act as a transparent pass-through so that controls
+        // nested inside them (e.g. an Input inside a List.Item) can bubble
+        // up registration to the nearest group ancestor.
+        registerChild: (childUIStateController, options) => {
+          s.parentUIStateController?.registerChild(
+            childUIStateController,
+            options,
+          );
+        },
+        unregisterChild: (childUIStateController) => {
+          s.parentUIStateController?.unregisterChild(childUIStateController);
+        },
+        onChildUIAction: (childUIStateController, e, options) => {
+          s.parentUIStateController?.onChildUIAction(
+            childUIStateController,
+            e,
+            options,
+          );
+        },
+      };
+      const rules = createControlRules(controller, {
+        debugPopup,
+        debugInteraction,
+        debugUIState,
+        debugFocus,
+      });
+      controller.rules = rules;
+
+      // Include all values that controller methods read from the scope so they
+      // are available immediately — even if no re-render happens before the
+      // first user interaction (update only runs on re-renders, not on mount).
+      return {
+        controller,
+        ref: props.ref,
+        id: props.id,
+        name: props.name,
+        props,
+        controlInfo,
+        uiAction: props.uiAction,
+        uiActionInternal,
+        parentUIStateController,
+        parentUiStateSignalHolder,
+      };
     },
-    onChildUIAction: (childUIStateController, e, options) => {
-      if (parentUIStateController) {
-        parentUIStateController.onChildUIAction(
-          childUIStateController,
-          e,
-          options,
-        );
+    // ── update: runs every render after the first ─────────────────────────
+    // Syncs public-facing fields and handles controlled state prop changes.
+    (s) => {
+      const { controller } = s;
+      // Raw Preact props from the current render. These are the component's input props,
+      // not the resolved/curated host props. useInteractiveProps overwrites
+      // uiStateController.controlHostProps with the resolved subset on every render.
+      controller.props = props;
+      // Re-sync to this render's ref object. It's normally stable, but it can
+      // legitimately change identity (e.g. switching from an internal fallback
+      // ref to a forwarded one, or across an interrupted/resumed render such as
+      // a Suspense boundary resolving) — if we kept the original ref forever,
+      // `ref.current` would be stuck at whatever it was at creation time, even
+      // after the controller has moved on to a different, live DOM node.
+      controller.ref = props.ref;
+      controller.id = props.id; // never supposed to change, not supported for now
+      controller.name = props.name;
+      controller.parentUIStateController = parentUIStateController;
+      const { value, hasStateProp, state, stateInitial } = controlInfo;
+      controller.value = value;
+      if (hasStateProp) {
+        controller.hasStateProp = true;
+        const currentState = controller.state;
+        if (!compareTwoJsValues(state, currentState)) {
+          controller.state = state;
+          controller.setUIState(state, new CustomEvent("state_prop_change"));
+        }
+      } else if (controller.hasStateProp) {
+        controller.hasStateProp = false;
+        controller.state = stateInitial;
       }
+      return {
+        ref: props.ref,
+        id: props.id,
+        name: props.name,
+        props,
+        controlInfo,
+        uiAction: props.uiAction,
+        uiActionInternal,
+        parentUIStateController,
+      };
     },
-  };
-  uiStateControllerRef.current = uiStateController;
-  const rules = createControlRules(uiStateController, {
-    debugPopup,
-    debugInteraction,
-    debugUIState,
-    debugFocus,
-  });
-  uiStateController.rules = rules;
-  return uiStateController;
-};
-const NO_PARENT = [() => {}, () => {}, () => {}];
-const useParentControllerNotifiers = (
-  parentUIStateController,
-  uiStateControllerRef,
-  controlType,
-  debugUIState,
-) => {
-  return useMemo(() => {
-    if (!parentUIStateController) {
-      return NO_PARENT;
-    }
+  );
+  scope.parentUiStateSignalHolder.value =
+    parentUIStateController?.uiStateSignal ?? null;
 
-    const parentControlType = parentUIStateController.controlType;
-    const notifyParentAboutChildMount = () => {
-      const uiStateController = uiStateControllerRef.current;
-      debugUIState(`"${controlType}" registering into "${parentControlType}"`);
-      parentUIStateController.registerChild(uiStateController);
+  const { controller } = scope;
+  const controllerRef = controller.ref;
+  useLayoutEffect(() => {
+    const el = controllerRef.current;
+    if (el) {
+      el.__uiStateController__ = controller;
+    }
+    return () => {
+      if (el && el.__uiStateController__ === controller) {
+        delete el.__uiStateController__;
+      }
+      onUIStateControllerDestroyed(controller);
     };
+  }, [controllerRef]);
 
-    const notifyParentAboutChildUIAction = (
-      e,
-      { stateChanged, silent = false },
-    ) => {
-      const uiStateController = uiStateControllerRef.current;
-      debugUIState(
-        `"${controlType}" notifying "${parentControlType}" of child ui action (stateChanged: ${stateChanged})`,
-      );
-      parentUIStateController.onChildUIAction(uiStateController, e, {
-        stateChanged,
-        silent,
-      });
-    };
+  const { parentUIStateController: parentController } = scope;
+  useLayoutEffect(() => {
+    if (!parentController) {
+      return undefined;
+    }
 
-    const notifyParentAboutChildUnmount = () => {
-      const uiStateController = uiStateControllerRef.current;
+    debugUIState(`"${controlType}" registering into "${parent.controlType}"`);
+    parentController.registerChild(controller);
+    return () => {
       debugUIState(
-        `"${controlType}" unregistering from "${parentControlType}"`,
+        `"${controlType}" unregistering from "${parent.controlType}"`,
       );
-      parentUIStateController.unregisterChild(uiStateController);
+      parentController.unregisterChild(controller);
     };
+  }, [parentController]);
 
-    return [
-      notifyParentAboutChildMount,
-      notifyParentAboutChildUIAction,
-      notifyParentAboutChildUnmount,
-    ];
-  }, []);
+  return controller;
 };
 
 /**
@@ -23083,9 +23103,8 @@ const useUIGroupStateController = (
   const parentUIStateController = useContext(ParentUIStateControllerContext);
   const hasValueProp = Object.hasOwn(props, "value");
   const hasDefaultValueProp = Object.hasOwn(props, "defaultValue");
-  const { id, name, value, defaultValue, uiAction, command } = props;
+  const { id, name, value, defaultValue, uiAction } = props;
   const ref = props.ref;
-  const uiActionRef = useRef(uiAction);
   const fallbackState =
     stateType === "array"
       ? EMPTY_ARRAY
@@ -23094,9 +23113,7 @@ const useUIGroupStateController = (
         : undefined;
   const childUIStateControllerArrayRef = useRef([]);
   const childUIStateControllerArray = childUIStateControllerArrayRef.current;
-  const controllerRef = useRef();
-  // Tracks children this controller rejected and delegated upward (bubble-up
-  // registration). Used to forward onChildUIAction and unregisterChild.
+  // Tracks children rejected by the filter and delegated upward (bubble-up).
   const delegatedChildrenRef = useRef(new Map());
 
   const groupIsRenderingRef = useRef(false);
@@ -23104,103 +23121,8 @@ const useUIGroupStateController = (
   groupIsRenderingRef.current = true;
   pendingChangeRef.current = false;
 
-  const [
-    notifyParentAboutChildMount,
-    notifyParentAboutChildUIAction,
-    notifyParentAboutChildUnmount,
-  ] = useParentControllerNotifiers(
-    parentUIStateController,
-    controllerRef,
-    controlType,
-    debugUIGroup,
-  );
-  useLayoutEffect(() => {
-    const controller = controllerRef.current;
-    const el = ref.current;
-    if (el) {
-      el.__uiStateController__ = controller;
-    }
-    notifyParentAboutChildMount();
-    return () => {
-      notifyParentAboutChildUnmount();
-      onUIStateControllerDestroyed(controller);
-    };
-  }, []);
-
-  const onChange = (e, { notifyExternal }) => {
-    if (groupIsRenderingRef.current) {
-      pendingChangeRef.current = true;
-      return;
-    }
-    const aggChildState = resolvedAggregateChildStates(
-      childUIStateControllerArray,
-      fallbackState,
-    );
-    const groupUIState =
-      aggChildState === undefined ? fallbackState : aggChildState;
-    debugUIGroup(
-      e,
-      `${controlType}.getUIState -> ${JSON.stringify(groupUIState)}`,
-    );
-    const groupUIStateController = controllerRef.current;
-    if (notifyExternal === true) {
-      applyState(groupUIState, e);
-    } else if (notifyExternal === "silent") {
-      // Silent mount/unmount sync: update state without triggering uiAction/command,
-      // but still notify parent (e.g. facade) so it can track the current child state.
-      groupUIStateController.syncInternalState(groupUIState, e);
-      notifyParentAboutChildUIAction(e, {
-        stateChanged: true,
-        silent: true,
-      });
-    } else {
-      groupUIStateController.syncInternalState(groupUIState, e);
-    }
-  };
-
-  // Applies the aggregated state: updates signal, fires uiAction/command/navi_ui_state_change,
-  // and notifies the parent. Called both from onChange (after child UI action) and from
-  // setUIState (after cascading to children).
-  const applyState = (newUIState, e, { internalBehavior = false } = {}) => {
-    const groupUIStateController = controllerRef.current;
-    const currentUIState = groupUIStateController.uiState;
-    groupUIStateController.uiState = newUIState;
-    uiStateSignal.value = newUIState;
-    debugUIGroup(
-      e,
-      `${controlType}.applyState(${JSON.stringify(newUIState)}, "${e.type}") -> updates from ${JSON.stringify(currentUIState)} to ${JSON.stringify(newUIState)}`,
-    );
-    publishUIState(newUIState);
-    // Notify the parent (facade) BEFORE firing the command so that when a
-    // command like --navi-send closes the picker, the picker input already
-    // holds the new value.
-    notifyParentAboutChildUIAction(e, { stateChanged: true });
-    groupUIStateController.onUIAction(e, {
-      skipCommand: internalBehavior,
-    });
-    const el = ref.current;
-    if (el) {
-      dispatchInternalCustomEvent(el, "navi_ui_state_change", {
-        event: e,
-        value: newUIState,
-      });
-    }
-  };
-
-  useLayoutEffect(() => {
-    groupIsRenderingRef.current = false;
-    if (pendingChangeRef.current) {
-      pendingChangeRef.current = false;
-      onChange(new CustomEvent(`${controlType}_batched_ui_state_update`), {
-        notifyExternal: "silent",
-      });
-    }
-  });
-
   const isMonitoringChild = (childUIStateController) => {
-    if (childUIStateController.isProxy) {
-      return false;
-    }
+    if (childUIStateController.isProxy) return false;
     if (
       resolvedChildControlFilter &&
       !resolvedChildControlFilter(childUIStateController)
@@ -23210,350 +23132,411 @@ const useUIGroupStateController = (
     return true;
   };
   const shouldPropagateStateToChild = (childUIStateController) => {
-    if (!isMonitoringChild(childUIStateController)) {
-      return false;
-    }
-    if (childUIStateController.controlType === "button") {
-      return false;
-    }
-    if (childUIStateController.controlType === "link") {
-      return false;
-    }
+    if (!isMonitoringChild(childUIStateController)) return false;
+    if (childUIStateController.controlType === "button") return false;
+    if (childUIStateController.controlType === "link") return false;
     return true;
   };
 
-  const existingController = controllerRef.current;
-  if (existingController) {
-    const prevValue = existingController.value;
-    const prevHasValueProp = existingController.hasValueProp;
-    existingController.props = props;
-    existingController.id = id;
-    existingController.name = name;
-    existingController.value = value;
-    existingController.defaultValue = defaultValue;
-    existingController.hasValueProp = hasValueProp;
-    existingController.hasDefaultValueProp = hasDefaultValueProp;
-    uiActionRef.current = uiAction;
-    // When the controlled value prop changes (or when becoming controlled for the
-    // first time), silently cascade to children that have no individual state prop.
-    if (
-      hasValueProp &&
-      (!prevHasValueProp || !compareTwoJsValues(value, prevValue))
-    ) {
-      const propagateDownEvent = new CustomEvent(
-        "propagate_down_set_ui_state",
-        { detail: {} },
+  const scope = useRenderScope(
+    // ── init: runs once on mount ───────────────────────────────────────────
+    (s) => {
+      debugUIGroup(
+        `Creating "${controlType}" ui state controller (monitoring some descendants ui state(s))"`,
       );
-      for (const childUIStateController of childUIStateControllerArray) {
-        if (!shouldPropagateStateToChild(childUIStateController)) {
-          continue;
-        }
-        if (childUIStateController.hasStateProp) {
-          continue;
+      const [publishUIState, subscribeUIState] = createPubSub();
+      const uiStateSignal = signal(fallbackState);
+
+      // onChange and applyState live inside init so they close over the stable
+      // signals/pubsub without needing external refs.
+      const onChange = (e, { notifyExternal }) => {
+        if (groupIsRenderingRef.current) {
+          pendingChangeRef.current = true;
+          return;
         }
-        const childNewState = existingController.distributeChildUIState(
-          value,
-          childUIStateController,
+        const aggChildState = resolvedAggregateChildStates(
+          childUIStateControllerArray,
+          fallbackState,
         );
-        if (childNewState === CANNOT_DERIVE) {
-          continue;
-        }
-        childUIStateController.setUIState(childNewState, propagateDownEvent);
-      }
-      existingController.syncInternalState(value);
-    }
-    return existingController;
-  }
-  debugUIGroup(
-    `Creating "${controlType}" ui state controller (monitoring some descendants ui state(s))"`,
-  );
-
-  const [publishUIState, subscribeUIState] = createPubSub();
-  const uiStateSignal = signal(fallbackState);
-  const groupUIStateController = {
-    controlType,
-    id,
-    name,
-    value,
-    defaultValue,
-    hasValueProp,
-    hasDefaultValueProp,
-    props,
-    uiState: fallbackState,
-    uiStateSignal,
-    wantRequesterButtonState,
-    elementRef: ref,
-    getPropFromState: (uiState) => uiState,
-    distributeChildUIState: resolvedDistributeChildUIState,
-    // Cascades newUIState to each monitored child via resolvedDistributeChildUIState,
-    // then re-aggregates and fires this group's own reactions.
-    setUIState: (newUIState, e) => {
-      if (
-        stateType === "object" &&
-        (newUIState === null || typeof newUIState !== "object")
-      ) {
-        console.warn(
-          `[${controlType}] setUIState received a non-object value: ${JSON.stringify(newUIState)} (expected an object). Ignoring.`,
-          newUIState,
-        );
-        return;
-      }
-      if (stateType === "array" && !Array.isArray(newUIState)) {
-        console.warn(
-          `[${controlType}] setUIState received a non-array value: ${JSON.stringify(newUIState)} (expected an array). Ignoring.`,
-          newUIState,
+        const groupUIState =
+          aggChildState === undefined ? fallbackState : aggChildState;
+        debugUIGroup(
+          e,
+          `${controlType}.getUIState -> ${JSON.stringify(groupUIState)}`,
         );
-        return;
-      }
-      // initial_state_push propagates silently (no uiAction anywhere in the chain);
-      // regular updates use propagate_down_set_ui_state which fires uiAction on children.
-      const propagateEventType =
-        e.type === "initial_state_push"
-          ? "initial_state_push"
-          : "propagate_down_set_ui_state";
-      const propagateDownEvent = new CustomEvent(propagateEventType, {
-        detail: {},
-      });
-      chainEvent(propagateDownEvent, e);
-      for (const childUIStateController of childUIStateControllerArray) {
-        if (!shouldPropagateStateToChild(childUIStateController)) {
-          continue;
+        const { controller } = s;
+        if (notifyExternal === true) {
+          applyState(groupUIState, e);
+        } else if (notifyExternal === "silent") {
+          controller.syncInternalState(groupUIState, e);
+          s.parentUIStateController?.onChildUIAction(controller, e, {
+            stateChanged: true,
+            silent: true,
+          });
+        } else {
+          controller.syncInternalState(groupUIState, e);
         }
-        const childNewState = resolvedDistributeChildUIState(
-          newUIState,
-          childUIStateController,
+      };
+
+      const applyState = (newUIState, e, { internalBehavior = false } = {}) => {
+        const { controller } = s;
+        const currentUIState = controller.uiState;
+        controller.uiState = newUIState;
+        uiStateSignal.value = newUIState;
+        debugUIGroup(
+          e,
+          `${controlType}.applyState(${JSON.stringify(newUIState)}, "${e.type}") -> updates from ${JSON.stringify(currentUIState)} to ${JSON.stringify(newUIState)}`,
         );
-        if (childNewState === CANNOT_DERIVE) {
-          continue;
-        }
-        childUIStateController.setUIState(childNewState, propagateDownEvent);
-      }
-      // Re-aggregate from children and apply — do NOT call onChange to avoid a loop
-      // (onChange would call setUIState again, which would cascade again).
-      const aggChildState = resolvedAggregateChildStates(
-        childUIStateControllerArray,
-        fallbackState,
-      );
-      const groupUIState =
-        aggChildState === undefined ? fallbackState : aggChildState;
-      if (e.type === "initial_state_push") {
-        // Silent initialization: update state without firing uiAction or notifying parent.
-        groupUIStateController.syncInternalState(groupUIState);
-        return;
-      }
-      applyState(groupUIState, e, { internalBehavior: true });
-    },
-    // Called on mount/unmount/render-batch: updates state silently with no external reactions.
-    syncInternalState: (newUIState) => {
-      const currentUIState = groupUIStateController.uiState;
-      if (newUIState === currentUIState) {
-        return;
-      }
-      groupUIStateController.uiState = newUIState;
-      uiStateSignal.value = newUIState;
-      publishUIState(newUIState);
-    },
-    // Called when a child UI action does NOT change the aggregated value (e.g. radio re-clicked).
-    // Fires uiAction + command without touching state or the action pipeline.
-    onUIAction: (e, { skipCommand } = {}) => {
-      const currentUIState = groupUIStateController.uiState;
-      const uiAction = uiActionRef.current;
-      uiAction?.(currentUIState, e);
-      uiActionInternal?.(currentUIState, e);
-      if (skipCommand) ; else if (command) {
-        const el = ref.current;
+        publishUIState(newUIState);
+        s.parentUIStateController?.onChildUIAction(controller, e, {
+          stateChanged: true,
+        });
+        controller.onUIAction(e, { skipCommand: internalBehavior });
+        const el = controller.ref.current;
         if (el) {
-          triggerNaviCommand(el, command, e);
+          dispatchInternalCustomEvent(el, "navi_ui_state_change", {
+            event: e,
+            value: newUIState,
+          });
         }
-      }
-    },
-    registerChild: (
-      childUIStateController,
-      // { bubbled = false } = {}
-    ) => {
-      if (!isMonitoringChild(childUIStateController)) {
-        // Filter rejected this child.
-        if (!allowCapture && parentUIStateController) {
-          // Not a boundary — bubble the child up to the nearest ancestor.
-          delegatedChildrenRef.current.set(
+      };
+
+      const controller = {
+        controlType,
+        id,
+        name,
+        value,
+        defaultValue,
+        hasValueProp,
+        hasDefaultValueProp,
+        props,
+        uiState: fallbackState,
+        uiStateSignal,
+        wantRequesterButtonState,
+        ref,
+        getPropFromState: (uiState) => uiState,
+        distributeChildUIState: resolvedDistributeChildUIState,
+        setUIState: (newUIState, e) => {
+          if (
+            stateType === "object" &&
+            (newUIState === null || typeof newUIState !== "object")
+          ) {
+            console.warn(
+              `[${controlType}] setUIState received a non-object value: ${JSON.stringify(newUIState)} (expected an object). Ignoring.`,
+              newUIState,
+            );
+            return;
+          }
+          if (stateType === "array" && !Array.isArray(newUIState)) {
+            console.warn(
+              `[${controlType}] setUIState received a non-array value: ${JSON.stringify(newUIState)} (expected an array). Ignoring.`,
+              newUIState,
+            );
+            return;
+          }
+          const propagateEventType =
+            e.type === "initial_state_push"
+              ? "initial_state_push"
+              : "propagate_down_set_ui_state";
+          const propagateDownEvent = new CustomEvent(propagateEventType, {
+            detail: {},
+          });
+          chainEvent(propagateDownEvent, e);
+          for (const childUIStateController of childUIStateControllerArray) {
+            if (!shouldPropagateStateToChild(childUIStateController)) continue;
+            const childNewState = resolvedDistributeChildUIState(
+              newUIState,
+              childUIStateController,
+            );
+            if (childNewState === CANNOT_DERIVE) continue;
+            childUIStateController.setUIState(
+              childNewState,
+              propagateDownEvent,
+            );
+          }
+          const aggChildState = resolvedAggregateChildStates(
+            childUIStateControllerArray,
+            fallbackState,
+          );
+          const groupUIState =
+            aggChildState === undefined ? fallbackState : aggChildState;
+          if (e.type === "initial_state_push") {
+            controller.syncInternalState(groupUIState);
+            return;
+          }
+          applyState(groupUIState, e, { internalBehavior: true });
+        },
+        syncInternalState: (newUIState) => {
+          const currentUIState = controller.uiState;
+          if (newUIState === currentUIState) return;
+          controller.uiState = newUIState;
+          uiStateSignal.value = newUIState;
+          publishUIState(newUIState);
+        },
+        onUIAction: (e, { skipCommand } = {}) => {
+          const currentUIState = controller.uiState;
+          s.uiAction?.(currentUIState, e);
+          s.uiActionInternal?.(currentUIState, e);
+          if (!skipCommand && controller.props.command) {
+            const el = controller.ref.current;
+            if (el) triggerNaviCommand(el, controller.props.command, e);
+          }
+        },
+        registerChild: (childUIStateController) => {
+          if (!isMonitoringChild(childUIStateController)) {
+            const currentParent = s.parentUIStateController;
+            if (!allowCapture && currentParent) {
+              delegatedChildrenRef.current.set(
+                childUIStateController,
+                currentParent,
+              );
+              currentParent.registerChild(childUIStateController);
+            }
+            return;
+          }
+          const childControlType = childUIStateController.controlType;
+          childUIStateControllerArray.push(childUIStateController);
+          debugUIGroup(
+            `${controlType}.registerChild("${childControlType}") -> registered (total: ${childUIStateControllerArray.length})`,
+          );
+          if (!childUIStateController.hasStateProp) {
+            const initialEvent = new CustomEvent("initial_state_push", {
+              detail: {},
+            });
+            if (controller.hasValueProp) {
+              const childNewState = resolvedDistributeChildUIState(
+                controller.value,
+                childUIStateController,
+              );
+              if (childNewState !== CANNOT_DERIVE) {
+                childUIStateController.setUIState(childNewState, initialEvent);
+              }
+            } else if (controller.hasDefaultValueProp) {
+              const childNewState = resolvedDistributeChildUIState(
+                controller.defaultValue,
+                childUIStateController,
+              );
+              if (childNewState !== CANNOT_DERIVE) {
+                childUIStateController.setUIState(childNewState, initialEvent);
+              }
+            }
+          }
+          onChange(new CustomEvent(`${childControlType}_mount`), {
+            notifyExternal: "silent",
+          });
+        },
+        onChildUIAction: (
+          childUIStateController,
+          e,
+          { stateChanged, silent },
+        ) => {
+          const delegatedTo = delegatedChildrenRef.current.get(
             childUIStateController,
-            parentUIStateController,
           );
-          parentUIStateController.registerChild(childUIStateController);
-        }
-        // allowCapture=true: hard boundary, stop bubbling and drop silently.
-        // No parent: end of chain, drop silently.
-        return;
-      }
-      const childControlType = childUIStateController.controlType;
-      childUIStateControllerArray.push(childUIStateController);
-      debugUIGroup(
-        `${controlType}.registerChild("${childControlType}") -> registered (total: ${childUIStateControllerArray.length})`,
-      );
-      // Auto-derive child's initial state from the group's value/defaultValue
-      // when the child has no individually-controlled state prop.
-      // Use initial_state_push so uiAction does not fire during mount initialization.
-      if (!childUIStateController.hasStateProp) {
-        const initialEvent = new CustomEvent("initial_state_push", {
-          detail: {},
-        });
-        if (groupUIStateController.hasValueProp) {
-          // Controlled: always cascade current group value (even undefined = deselect all).
-          const childNewState = resolvedDistributeChildUIState(
-            groupUIStateController.value,
+          if (delegatedTo) {
+            delegatedTo.onChildUIAction(childUIStateController, e, {
+              stateChanged,
+              silent,
+            });
+            return;
+          }
+          if (!isMonitoringChild(childUIStateController)) return;
+          const childControlType = childUIStateController.controlType;
+          debugUIGroup(
+            `${controlType}.onChildUIAction("${childControlType}") stateChanged=${stateChanged} -> child state: ${JSON.stringify(
+              childUIStateController.uiState,
+            )}`,
+          );
+          if (stateChanged) {
+            onChange(e, { notifyExternal: silent ? "silent" : true });
+          } else {
+            controller.onUIAction(e);
+          }
+        },
+        unregisterChild: (childUIStateController) => {
+          const delegatedTo = delegatedChildrenRef.current.get(
             childUIStateController,
           );
-          if (childNewState !== CANNOT_DERIVE) {
-            childUIStateController.setUIState(childNewState, initialEvent);
+          if (delegatedTo) {
+            delegatedChildrenRef.current.delete(childUIStateController);
+            delegatedTo.unregisterChild(childUIStateController);
+            return;
           }
-        } else if (groupUIStateController.hasDefaultValueProp) {
-          // Uncontrolled: set initial state from defaultValue on mount.
-          const childNewState = resolvedDistributeChildUIState(
-            groupUIStateController.defaultValue,
+          if (!isMonitoringChild(childUIStateController)) return;
+          const childControlType = childUIStateController.controlType;
+          const index = childUIStateControllerArray.indexOf(
             childUIStateController,
           );
-          if (childNewState !== CANNOT_DERIVE) {
-            childUIStateController.setUIState(childNewState, initialEvent);
+          if (index === -1) {
+            debugUIGroup(
+              `${controlType}.unregisterChild("${childControlType}") -> not found`,
+            );
+            return;
           }
-        }
-      }
-      onChange(new CustomEvent(`${childControlType}_mount`), {
-        notifyExternal: "silent",
-        // childUIStateController,
+          childUIStateControllerArray.splice(index, 1);
+          debugUIGroup(
+            `${controlType}.unregisterChild("${childControlType}") -> unregisteed (remaining: ${childUIStateControllerArray.length})`,
+          );
+          onChange(new CustomEvent(`${childControlType}_unmount`), {
+            notifyExternal: "silent",
+          });
+        },
+        resetUIState: (e) => {
+          const ev = new CustomEvent("propagate_down_reset_ui_state", {
+            detail: {},
+          });
+          chainEvent(ev, e);
+          for (const c of childUIStateControllerArray) {
+            if (shouldPropagateStateToChild(c)) c.resetUIState(ev);
+          }
+          onChange(e, { notifyExternal: true });
+        },
+        clearUIState: (e) => {
+          const ev = new CustomEvent("propagate_down_clear_ui_state", {
+            detail: {},
+          });
+          chainEvent(ev, e);
+          for (const c of childUIStateControllerArray) {
+            if (
+              !isMonitoringChild(c) ||
+              c.controlType === "button" ||
+              c.controlType === "link"
+            ) {
+              continue;
+            }
+            c.clearUIState(ev);
+          }
+          onChange(e, { notifyExternal: true });
+        },
+        onActionEnd: (e) => {
+          controller.rules.validation.syncValidity(e);
+        },
+        onActionError: (e) => {
+          controller.rules.validation.syncValidity(e, { report: true });
+        },
+        findChildById: (searchId) => {
+          for (const c of childUIStateControllerArray) {
+            if (c.id === searchId) return c;
+          }
+          return null;
+        },
+        getChildControllers: () => childUIStateControllerArray,
+        getManagedControls: () => {
+          if (!cascadeValidationToChildren) return [];
+          return childUIStateControllerArray.slice();
+        },
+        subscribe: subscribeUIState,
+      };
+      const rules = createControlRules(controller, {
+        debugPopup,
+        debugInteraction,
+        debugUIState: debugUIGroup,
+        debugFocus,
       });
+      controller.rules = rules;
+
+      // Include all values read by controller methods so they are immediately
+      // available, even if the user interacts before the first re-render.
+      return {
+        controller,
+        _onChange: onChange,
+        ref,
+        parentUIStateController,
+        uiAction,
+        uiActionInternal,
+      };
     },
-    onChildUIAction: (childUIStateController, e, { stateChanged, silent }) => {
-      const delegatedTo = delegatedChildrenRef.current.get(
-        childUIStateController,
-      );
-      if (delegatedTo) {
-        // Forward UI action for delegated children — we don't aggregate them,
-        // but their parent (who adopted them) needs to know about the change.
-        delegatedTo.onChildUIAction(childUIStateController, e, {
-          stateChanged,
-          silent,
-        });
-        return;
-      }
-      if (!isMonitoringChild(childUIStateController)) {
-        return;
-      }
-      const childControlType = childUIStateController.controlType;
-      debugUIGroup(
-        `${controlType}.onChildUIAction("${childControlType}") stateChanged=${stateChanged} -> child state: ${JSON.stringify(
-          childUIStateController.uiState,
-        )}`,
-      );
-      if (stateChanged) {
-        if (silent) {
-          // Silent update: keep the group's cached state in sync without firing
-          // uiAction, command, or action pipeline. Used when e.g. the picker facade
-          // propagates a child state change up through an internal event path.
-          onChange(e, { notifyExternal: "silent" });
-        } else {
-          // Value changed: re-aggregate and fire all reactions (uiAction, command, action pipeline).
-          onChange(e, { notifyExternal: true });
+    // ── update: runs every render after the first ─────────────────────────
+    (s) => {
+      const { controller } = s;
+      const prevValue = controller.value;
+      const prevHasValueProp = controller.hasValueProp;
+      controller.props = props;
+      controller.ref = ref;
+      controller.id = id;
+      controller.name = name;
+      controller.value = value;
+      controller.defaultValue = defaultValue;
+      controller.hasValueProp = hasValueProp;
+      controller.hasDefaultValueProp = hasDefaultValueProp;
+      if (
+        hasValueProp &&
+        (!prevHasValueProp || !compareTwoJsValues(value, prevValue))
+      ) {
+        const propagateDownEvent = new CustomEvent(
+          "propagate_down_set_ui_state",
+          { detail: {} },
+        );
+        for (const childUIStateController of childUIStateControllerArray) {
+          if (!shouldPropagateStateToChild(childUIStateController)) continue;
+          if (childUIStateController.hasStateProp) continue;
+          const childNewState = controller.distributeChildUIState(
+            value,
+            childUIStateController,
+          );
+          if (childNewState === CANNOT_DERIVE) continue;
+          childUIStateController.setUIState(childNewState, propagateDownEvent);
         }
-      } else {
-        // Value unchanged (e.g. radio re-clicked): fire uiAction + command only.
-        groupUIStateController.onUIAction(e);
+        controller.syncInternalState(value);
       }
+
+      return {
+        ref,
+        parentUIStateController,
+        uiAction,
+        uiActionInternal,
+        id,
+        name,
+        value,
+        defaultValue,
+        hasValueProp,
+        hasDefaultValueProp,
+        props,
+      };
     },
-    unregisterChild: (childUIStateController) => {
-      const delegatedTo = delegatedChildrenRef.current.get(
-        childUIStateController,
-      );
-      if (delegatedTo) {
-        delegatedChildrenRef.current.delete(childUIStateController);
-        delegatedTo.unregisterChild(childUIStateController);
-        return;
-      }
-      if (!isMonitoringChild(childUIStateController)) {
-        return;
-      }
-      const childControlType = childUIStateController.controlType;
-      const index = childUIStateControllerArray.indexOf(childUIStateController);
-      if (index === -1) {
-        debugUIGroup(
-          `${controlType}.unregisterChild("${childControlType}") -> not found`,
-        );
-        return;
-      }
-      childUIStateControllerArray.splice(index, 1);
+  );
+
+  const { controller } = scope;
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (el) {
+      el.__uiStateController__ = controller;
+    }
+    return () => {
+      onUIStateControllerDestroyed(controller);
+    };
+  }, []);
+
+  const { parentUIStateController: parentController } = scope;
+  useLayoutEffect(() => {
+    if (!parentController) {
+      return undefined;
+    }
+
+    debugUIGroup(
+      `"${controlType}" registering into "${parentController.controlType}"`,
+    );
+    parentController.registerChild(controller);
+    return () => {
       debugUIGroup(
-        `${controlType}.unregisterChild("${childControlType}") -> unregisteed (remaining: ${childUIStateControllerArray.length})`,
-      );
-      onChange(new CustomEvent(`${childControlType}_unmount`), {
-        notifyExternal: "silent",
-        // childUIStateController,
-      });
-    },
-    resetUIState: (e) => {
-      const propagateDownResetEvent = new CustomEvent(
-        "propagate_down_reset_ui_state",
-        { detail: {} },
+        `"${controlType}" unregistering from "${parentController.controlType}"`,
       );
-      chainEvent(propagateDownResetEvent, e);
-      for (const childUIStateController of childUIStateControllerArray) {
-        if (!shouldPropagateStateToChild(childUIStateController)) {
-          continue;
-        }
-        childUIStateController.resetUIState(propagateDownResetEvent);
-      }
-      onChange(e, { notifyExternal: true });
-    },
-    clearUIState: (e) => {
-      const propagateDownClearEvent = new CustomEvent(
-        "propagate_down_clear_ui_state",
-        { detail: {} },
+      parentController.unregisterChild(controller);
+    };
+  }, [parentController]);
+
+  useLayoutEffect(() => {
+    groupIsRenderingRef.current = false;
+    if (pendingChangeRef.current) {
+      pendingChangeRef.current = false;
+      scope._onChange(
+        new CustomEvent(`${controlType}_batched_ui_state_update`),
+        { notifyExternal: "silent" },
       );
-      chainEvent(propagateDownClearEvent, e);
-      for (const childUIStateController of childUIStateControllerArray) {
-        if (!isMonitoringChild(childUIStateController)) {
-          continue;
-        }
-        if (childUIStateController.controlType === "button") {
-          continue;
-        }
-        if (childUIStateController.controlType === "link") {
-          continue;
-        }
-        childUIStateController.clearUIState(propagateDownClearEvent);
-      }
-      onChange(e, { notifyExternal: true });
-    },
-    onActionEnd: (e) => {
-      groupUIStateController.rules.validation.syncValidity(e);
-    },
-    onActionError: (e) => {
-      groupUIStateController.rules.validation.syncValidity(e, { report: true });
-    },
-    findChildById: (id) => {
-      for (const childUIStateController of childUIStateControllerArray) {
-        if (childUIStateController.id === id) {
-          return childUIStateController;
-        }
-      }
-      return null;
-    },
-    getChildControllers: () => childUIStateControllerArray,
-    getManagedControls: () => {
-      if (!cascadeValidationToChildren) {
-        return [];
-      }
-      return childUIStateControllerArray.slice();
-    },
-    subscribe: subscribeUIState,
-  };
-  controllerRef.current = groupUIStateController;
-  const rules = createControlRules(groupUIStateController, {
-    debugPopup,
-    debugInteraction,
-    debugUIState: debugUIGroup,
-    debugFocus,
+    }
   });
-  groupUIStateController.rules = rules;
-  return groupUIStateController;
+
+  return controller;
 };
 // Stable reference for an empty selection so the action always receives an
 // array (never undefined) and callers don't get a new reference each render.
@@ -23592,6 +23575,141 @@ const useUIFacadeStateController = (props, realUIStateController) => {
   const debugUIState = useDebugUIState();
   const debugFocus = useDebugFocus();
 
+  // The facade controller's closures (registerChild/unregisterChild/onChildUIAction)
+  // must not capture `realUIStateController` directly: that parameter can legitimately
+  // point to a different controller instance on a later render (e.g. the picker's own
+  // controller getting recreated). Instead, closures read `s.realUIStateController`
+  // from the stable scope object, which is kept current by `update` on every render.
+  const scope = useRenderScope(
+    // ── init: runs once on mount ───────────────────────────────────────────
+    (s) => {
+      const canRegisterAsFacadeChild = (childController) => {
+        if (childController.controlType === "button") return false;
+        if (childController.controlType === "link") return false;
+        if (childController.controlType === "facade") return false;
+        if (childController.isProxy) return false;
+        if (childController.props["navi-list"]) {
+          // Controls with navi-list act as standalone list navigators and should
+          // not be treated as the picker's synced child.
+          return false;
+        }
+        if (
+          props.type === "controlgroup" &&
+          childController.controlType !== "control_group"
+        ) {
+          // ignore non control group registration (input outside the control group for instance)
+          return false;
+        }
+        if (
+          props.type === "array" &&
+          childController.controlType !== "checkbox_group"
+        ) {
+          // only selectable list expose array, ignore others
+          return false;
+        }
+        return true;
+      };
+
+      const facadeUIStateController = {
+        controlType: "facade",
+        props,
+        ref: realUIStateController.ref,
+        uiStateSignal: realUIStateController.uiStateSignal,
+        controlHostProps: realUIStateController.controlHostProps,
+        registerChild: (child) => {
+          if (!canRegisterAsFacadeChild(child)) {
+            return;
+          }
+          const childType = child.controlType;
+          if (firstChildControllerRef.current) {
+            console.warn(
+              `[useUIFacadeStateController] A second child ("${childType}"${child.name ? ` name="${child.name}"` : ""}) tried to register in the picker facade. ` +
+                `The facade only syncs with the first child — wrap multiple controls in a single ControlGroup.`,
+              child,
+            );
+          } else {
+            debugUIState(
+              `[useUIFacadeStateController] "${childType}"${child.name ? ` name="${child.name}"` : ""} registered as the first child in the picker facade.`,
+            );
+            firstChildControllerRef.current = child;
+            s.realUIStateController.facadeChild = child;
+            // If the picker already has a meaningful state (from value or defaultValue),
+            // push it to the child on registration so it reflects the pre-set value
+            // without firing uiAction (equivalent to defaultValue on the child itself).
+            const initialState = s.realUIStateController.uiState;
+            if (initialState !== undefined) {
+              updatingRef.current = true;
+              const initialEvent = new CustomEvent("initial_state_push", {
+                detail: {},
+              });
+              child.setUIState(initialState, initialEvent);
+              updatingRef.current = false;
+            }
+          }
+        },
+        unregisterChild: (child) => {
+          if (firstChildControllerRef.current === child) {
+            firstChildControllerRef.current = null;
+            s.realUIStateController.facadeChild = null;
+          }
+        },
+        getManagedControls: () => {
+          const child = firstChildControllerRef.current;
+          if (!child) {
+            return [];
+          }
+          return child.getManagedControls();
+        },
+        onChildUIAction: (child, e, { stateChanged, silent = false }) => {
+          if (!stateChanged) {
+            return;
+          }
+          if (child !== firstChildControllerRef.current) {
+            return;
+          }
+          updatingRef.current = true;
+          // Use a different event type for silent (mount/unmount) syncs so that
+          // the picker's setUIState does not fire navi_change or action pipelines.
+          const eventType = silent
+            ? "facade_child_mount_sync"
+            : "facade_propagate_up";
+          const propagateUpEvent = new CustomEvent(eventType, {
+            detail: {},
+          });
+          chainEvent(propagateUpEvent, e);
+          s.realUIStateController.setUIState(child.uiState, propagateUpEvent);
+          updatingRef.current = false;
+        },
+      };
+      const rules = createControlRules(facadeUIStateController, {
+        debugPopup,
+        debugInteraction,
+        debugUIState,
+        debugFocus,
+      });
+      facadeUIStateController.rules = rules;
+
+      // No initial checkValidity() here — the facade has no controlHostProps and no children
+      // have registered yet, so any check would be a no-op. The real validity check happens
+      // when child controllers trigger UI actions through the facade.
+      return {
+        controller: facadeUIStateController,
+        realUIStateController,
+      };
+    },
+    // ── update: runs every render after the first ─────────────────────────
+    (s) => {
+      s.controller.props = props;
+      s.controller.ref = realUIStateController.ref;
+      s.controller.uiStateSignal = realUIStateController.uiStateSignal;
+      s.controller.controlHostProps = realUIStateController.controlHostProps;
+
+      return {
+        realUIStateController,
+      };
+    },
+  );
+
   useLayoutEffect(() => {
     return realUIStateController.subscribe((newUIState, e) => {
       if (updatingRef.current) {
@@ -23610,132 +23728,9 @@ const useUIFacadeStateController = (props, realUIStateController) => {
       child.setUIState(newUIState, propagateDownEvent);
       updatingRef.current = false;
     });
-  }, []);
-
-  const canRegisterAsFacadeChild = (childController) => {
-    if (childController.controlType === "button") {
-      return false;
-    }
-    if (childController.controlType === "link") {
-      return false;
-    }
-    if (childController.controlType === "facade") {
-      return false;
-    }
-    if (childController.isProxy) {
-      return false;
-    }
-    if (childController.props["navi-list"]) {
-      // Controls with navi-list act as standalone list navigators and should
-      // not be treated as the picker's synced child.
-      return false;
-    }
-    if (
-      props.type === "controlgroup" &&
-      childController.controlType !== "control_group"
-    ) {
-      // ignore non control group registration (input outside the control group for instance)
-      return false;
-    }
-    if (
-      props.type === "array" &&
-      childController.controlType !== "checkbox_group"
-    ) {
-      // only selectable list expose array, ignore others
-      return false;
-    }
-    return true;
-  };
-
-  const controllerRef = useRef();
-  if (controllerRef.current) {
-    return controllerRef.current;
-  }
+  }, [realUIStateController]);
 
-  const facadeUIStateController = {
-    controlType: "facade",
-    props,
-    elementRef: realUIStateController.elementRef,
-    uiStateSignal: realUIStateController.uiStateSignal,
-    registerChild: (child) => {
-      if (!canRegisterAsFacadeChild(child)) {
-        return;
-      }
-      const childType = child.controlType;
-      if (firstChildControllerRef.current) {
-        console.warn(
-          `[useUIFacadeStateController] A second child ("${childType}"${child.name ? ` name="${child.name}"` : ""}) tried to register in the picker facade. ` +
-            `The facade only syncs with the first child — wrap multiple controls in a single ControlGroup.`,
-          child,
-        );
-      } else {
-        debugUIState(
-          `[useUIFacadeStateController] "${childType}"${child.name ? ` name="${child.name}"` : ""} registered as the first child in the picker facade.`,
-        );
-        firstChildControllerRef.current = child;
-        realUIStateController.facadeChild = child;
-        // If the picker already has a meaningful state (from value or defaultValue),
-        // push it to the child on registration so it reflects the pre-set value
-        // without firing uiAction (equivalent to defaultValue on the child itself).
-        const initialState = realUIStateController.uiState;
-        if (initialState !== undefined) {
-          updatingRef.current = true;
-          const initialEvent = new CustomEvent("initial_state_push", {
-            detail: {},
-          });
-          child.setUIState(initialState, initialEvent);
-          updatingRef.current = false;
-        }
-      }
-    },
-    unregisterChild: (child) => {
-      if (firstChildControllerRef.current === child) {
-        firstChildControllerRef.current = null;
-        realUIStateController.facadeChild = null;
-      }
-    },
-    getManagedControls: () => {
-      const child = firstChildControllerRef.current;
-      if (!child) {
-        return [];
-      }
-      return child.getManagedControls();
-    },
-    onChildUIAction: (child, e, { stateChanged, silent = false }) => {
-      if (!stateChanged) {
-        return;
-      }
-      if (child !== firstChildControllerRef.current) {
-        return;
-      }
-      updatingRef.current = true;
-      // Use a different event type for silent (mount/unmount) syncs so that
-      // the picker's setUIState does not fire navi_change or action pipelines.
-      const eventType = silent
-        ? "facade_child_mount_sync"
-        : "facade_propagate_up";
-      const propagateUpEvent = new CustomEvent(eventType, {
-        detail: {},
-      });
-      chainEvent(propagateUpEvent, e);
-      realUIStateController.setUIState(child.uiState, propagateUpEvent);
-      updatingRef.current = false;
-    },
-  };
-  controllerRef.current = facadeUIStateController;
-  const rules = createControlRules(facadeUIStateController, {
-    debugPopup,
-    debugInteraction,
-    debugUIState,
-    debugFocus,
-  });
-  facadeUIStateController.rules = rules;
-  facadeUIStateController.controlHostProps =
-    realUIStateController.controlHostProps;
-  // No initial checkValidity() here — the facade has no controlHostProps and no children
-  // have registered yet, so any check would be a no-op. The real validity check happens
-  // when child controllers trigger UI actions through the facade.
-  return facadeUIStateController;
+  return scope.controller;
 };
 
 /**
@@ -23977,7 +23972,7 @@ const useControlProps = (props, {
       return true;
     };
     const syncUIStateWithDOM = e => {
-      const controlEl = e.currentTarget || uiStateController.elementRef.current;
+      const controlEl = e.currentTarget || uiStateController.ref.current;
       const value = readControlValue(controlEl);
       uiStateController.setUIState(value, e);
     };
@@ -23987,7 +23982,6 @@ const useControlProps = (props, {
     const triggerUIAction = e => {
       syncUIStateWithDOM(e);
     };
-    const wasCheckedAtMousedownRef = useRef(false);
     const getDefaultEventReactionDefinitions = () => {
       const keyDownDefault = e => {
         const defaultAction = getKeyboardEventDefaultAction(e);
@@ -24202,16 +24196,20 @@ const useControlProps = (props, {
             }
             return keyDownDefault(e);
           },
-          mouseDown: e => {
-            wasCheckedAtMousedownRef.current = e.currentTarget.checked;
-          },
           click: e => {
-            if (isRadio && wasCheckedAtMousedownRef.current) {
-              // When a radio is already checked and gets clicked, the browser does NOT
-              // fire an input event (state doesn't change), so asAction never runs.
-              // We still want uiAction + command to fire. We can tell whether the click
-              // is on an already-checked radio by looking at wasCheckedAtMousedownRef:
-              // if it was checked at mousedown, the input event won't come, so we do it here.
+            // When a radio is already checked and gets clicked, the browser does NOT
+            // fire an input event (state doesn't change), so syncUIStateWithDOM never
+            // runs. We still want uiAction + command to fire. We can tell whether the
+            // click is on an already-checked radio by comparing our own tracked
+            // uiState (value when checked, undefined when not — see toDomProps) to
+            // this radio's value: it's still the PRE-click value here, since it's
+            // only updated later by the "input" handler. Reading the DOM `.checked`
+            // instead would not work: the browser applies the checked toggle before
+            // dispatching "click", so `.checked` is already the POST-click value
+            // whether or not this was already the checked radio — and worse, a click
+            // that lands on the <label> (not the <input>) never fires "mousedown" on
+            // the input at all, so a DOM-snapshot-at-mousedown approach misses it.
+            if (isRadio && uiStateController.uiState !== undefined) {
               return {
                 name: `click on checked radio`,
                 allowed: () => triggerUIAction(e),
@@ -24394,7 +24392,7 @@ const useControlProps = (props, {
         debounce: actionDebounce,
         debugInteraction
       });
-    }, [actionEvent, actionAfterChange, actionDebounce, hasNaviChangeEventReaction]);
+    }, [actionEvent, actionAfterChange, actionDebounce, hasNaviChangeEventReaction, ref]);
     const refComposed = useComposeElementRef(refCallback, ref);
     const onPaste = e => {
       props.onPaste?.(e);
@@ -24800,7 +24798,7 @@ const useInteractiveProps = (props, {
           }
         }));
       }
-    }, [disabledResolved, readOnlyResolved]);
+    }, [disabledResolved, readOnlyResolved, ref]);
     useLayoutEffect(() => {
       return () => {
         const element = ref.current;
@@ -25002,7 +25000,7 @@ const useInteractiveProps = (props, {
         // already aggregated the new state by now, so uiStateSignal is correct.
         const parentController = uiStateController.parentUIStateController;
         if (parentController && (parentController.controlType === "radio_group" || parentController.controlType === "checkbox_group")) {
-          const parentEl = parentController.elementRef.current;
+          const parentEl = parentController.ref.current;
           if (parentEl) {
             const originalEvent = e.detail.eventChain[0];
             dispatchRequestAction(parentEl, {
@@ -33944,20 +33942,24 @@ const InputTextualFirstResolver = props => {
   });
 };
 const InputTextual = createComponentResolver([InputTextualFirstResolver, InputWithListResolver, InputWithSuggestionsResolver, InputTypeResolver, InputModeResolver, InputHeadlessResolver, InputTextualUI]);
-const RealInput = props => {
-  const autoSelectReadOnlyProps = useAutoSelectReadOnly(props);
+const RealInput = ({
+  maxLength,
+  ...domProps
+}) => {
+  const autoSelectReadOnlyProps = useAutoSelectReadOnly(domProps);
   return jsx(Box, {
-    ...props,
+    ...domProps,
     as: "input",
     baseClassName: "navi_control_input",
     ...autoSelectReadOnlyProps,
-    // Never set native maxLength — our guard handles it. maxLength stays in
-    // inputControlHostProps so form validation constraints still read it.
-    maxLength: undefined
-    // But do expose it (needed by navi_input_full event)
-    ,
-
-    "navi-max-length": props.maxLength
+    // Never set native maxLength — our guard handles it. Omitting it entirely
+    // avoids a Preact quirk: setting maxLength={undefined} on a fresh DOM element
+    // (e.g. after a Suspense remount) causes Preact to run `el.maxLength = ""`
+    // which coerces to 0 (Number("") = 0), capping the input at 0 characters.
+    // see https://github.com/preactjs/preact/issues/2677
+    // The JS value stays accessible via the navi-max-length attribute and via
+    // inputControlHostProps (which the validation system reads directly).
+    "navi-max-length": maxLength
   });
 };
 const InputStyleCSSVars = {
@@ -36209,6 +36211,11 @@ const PickerCustom = props => {
           }
           const pickerEl = ref.current;
           const inputEl = getPickerInput(pickerEl);
+          const valueAtClose = getUIStateFromElement(inputEl);
+          if (compareTwoJsValues(valueAtClose, valueAtOpen)) {
+            // Value unchanged — no action to run, but still allow the close.
+            return;
+          }
           dispatchRequestAction(inputEl, {
             event: requestCloseEvent,
             name: "picker request close",