@wildo-ai/saas-frontend-lib 1.1.9 → 1.1.11

package/dist/esm/core/navigation/NavigationContentAreas.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * NavigationContentAreas
  *
@@ -12,6 +12,7 @@ import { NavigationZoneName, OverlayAppearance, } from '@wildo-ai/saas-models';
 import { ViewportBreakpoint, DisplayDirection } from '@wildo-ai/zod-decorators';
 import { NavigationZoneContentModel } from '@wildo-ai/saas-models';
 import { useNavigationState } from './useNavigationState.js';
+import { ZoneChromeProvider, ZoneChromeRow } from './ZoneChromeContext.js';
 import { zoneIsCollapsedAtViewport } from './zone-collapse.js';
 import { useResponsiveZoneMigration } from './useResponsiveZoneMigration.js';
 import { NavigationUtils } from './navigation.utils.js';
@@ -24,6 +25,8 @@ import { useI18n } from '../../core/i18n/useI18n.js';
 import { resolveComponentLabel } from '../../core/i18n/component-label-resolution.utils.js';
 import { useResourceRegistry } from '../../core/resources/useResourceRegistry.js';
 import { useOverlayTitle } from './useOverlayTitle.js';
+import { useZoneEntryOrganizationHold } from './useZoneEntryOrganizationHold.js';
+import { LoadingSpinner } from '../../components/feedback/loading-spinner.js';
 import { ErrorModalContent } from '../../core/errors/ErrorModalContent.js';
 import { resolveVisibleEntryIndex } from './zone-visible-entry.js';
 import { Tabs, TabsList, TabsTrigger } from '../../components/sections/tabs.js';
@@ -40,6 +43,7 @@ import { useVisibleSettingsHubConfig } from '../../core/config/useVisibleSetting
 import { settingsSectionNeedsWideFrame } from '../../core/config/settings-hub-presentation.frontend.utils.js';
 import { LoggerFrontendService } from '../../core/monitoring/logger.frontend.service.js';
 import { AppLayout_Home } from '../../components/app/AppLayout_Home.js';
+import { AppLayout_DecisionInbox } from '../../components/app/AppLayout_DecisionInbox.js';
 import { SettingsHub } from '../../components/settings/SettingsHub.js';
 import { EnginePageRef } from '../../core/config/launcher-items.frontend.schemas.js';
 import { CommonRoutePaths } from '../../core/runtime/routes.frontend.definitions.js';
@@ -62,6 +66,11 @@ const logger = LoggerFrontendService.getLogger();
 const logDebug = logger.debugByType('NavigationContentAreas');
 logger.setDebugTypeLogging('NavigationContentAreas', false);
 // Note: useOverlayTitle hook is in useOverlayTitle.ts for React Fast Refresh compatibility.
+/** What draws each engine page. Total over `EnginePageRef`: a page added there is a compile error here until it is drawn. */
+const ENGINE_PAGE_COMPONENTS = {
+    [EnginePageRef.HOME]: AppLayout_Home,
+    [EnginePageRef.DECISIONS]: AppLayout_DecisionInbox,
+};
 /**
  * Default entry ID when no navigation entry ID is available.
  */
@@ -106,8 +115,9 @@ export function getContentKey(content, entryId) {
          * section. Every other case above keys on what the content IS plus the entry suffix, because
          * for those the entry and the component genuinely are the same thing. For the hub they are not:
          * `sectionRef` / `subTabRef` are VIEW STATE inside a single surface, and the component is
-         * written to reconcile them as props — `SettingsHub` carries two effects whose comments exist
-         * entirely to explain how it adopts a changed `sectionRef` without resetting.
+         * written to reconcile them as props — `SettingsHub` derives its open section from
+         * `sectionRef` and its gated config on every render, so a changed `sectionRef` is adopted without
+         * a remount (#2190 replaced the two effects that used to do this).
          *
          * Until 2026-09-20 this type had no case at all and fell to a `default` returning
          * `unknown-${entryId}`. `useSettingsHubOverlaySync` emits a NAVIGATION_REPLACE carrying a fresh
@@ -182,12 +192,12 @@ export const NavigationContentRenderer = ({ content, zone, initiator, entryId })
         return (_jsx(React.Suspense, { fallback: _jsx("div", { className: "h-8 animate-pulse motion-reduce:animate-none bg-muted rounded", "aria-hidden": "true" }), children: _jsx(CustomComponent, { contextResourceIdentifiers: content.contextResourceIdentifiers }) }, contentKey));
     }
     if (content.contentType === NavigationContentType.ENGINE_PAGE) {
-        switch (content.pageRef) {
-            case EnginePageRef.HOME:
-                return _jsx(AppLayout_Home, {}, contentKey);
-            default:
-                return (_jsxs("div", { className: "p-container text-sm text-muted-foreground", children: ["Unknown engine page: ", String(content.pageRef)] }, contentKey));
-        }
+        // Total over the engine pages, so a page added to `EnginePageRef` cannot be routed and then drawn as nothing (#2527).
+        const EnginePage = ENGINE_PAGE_COMPONENTS[content.pageRef];
+        // A persisted entry naming a page that no longer exists draws the not-injected placeholder, never English from code.
+        return EnginePage
+            ? _jsx(EnginePage, {}, contentKey)
+            : _jsx(ComponentNotInjected, { componentType: String(content.pageRef), componentName: String(content.pageRef) }, contentKey);
     }
     if (content.contentType === NavigationContentType.SETTINGS_HUB) {
         return _jsx(SettingsHub, { sectionRef: content.sectionRef, subTabRef: content.subTabRef }, contentKey);
@@ -299,10 +309,16 @@ const ZoneTabBar = ({ zone, entries, activeEntryId, onSelect }) => (_jsx(Tabs, {
  * that does not exist cannot be partitioned on.
  *
  * @see NavigationZoneState.activeTabId
+ *
+ * Exported for its own test: which entries it mounts, and which it holds for the organization they address
+ * (#2276), is observable only by rendering it.
  */
-const ZoneContentRenderer = ({ zone, fallback, emptyState }) => {
+export const ZoneContentRenderer = ({ zone, fallback, emptyState }) => {
     const { getTopEntry, getZoneState, setActiveTab } = useNavigationState();
     const { navigationLayout } = useUI();
+    // Whether an entry must wait for the session to be in the organization it addresses (#2276). Asked per entry during
+    // render, so an entry the controller pushes into another organization never mounts its content in the previous one.
+    const isHeldForOrganization = useZoneEntryOrganizationHold();
     const topEntry = getTopEntry(zone);
     const zoneState = getZoneState(zone);
     /*
@@ -368,7 +384,13 @@ const ZoneContentRenderer = ({ zone, fallback, emptyState }) => {
                         // of it (blurring any focused descendant), so no focused node is
                         // ever left inside a hidden ancestor. React 19 renders the
                         // boolean `inert` prop as the native HTML attribute.
-                        inert: !isTop, children: _jsx(NavigationContentRenderer, { content: entry.content, zone: entry.zone, initiator: entry.initiator, entryId: entry.id }) }, getContentKey(entry.content, entry.id)));
+                        inert: !isTop, children: isHeldForOrganization(entry) ? (
+                        /*
+                         * The entry addresses an organization the session is about to be in (#2276): its content mounts once
+                         * it is, so none of its reads, and no reader of the current organization inside it, answers for the
+                         * previous one. Same placeholder as the route outlet's hold; only TOP entries are visible anyway.
+                         */
+                        _jsx("div", { className: "flex items-center justify-center w-full min-h-[200px]", children: _jsx(LoadingSpinner, {}) })) : (_jsx(NavigationContentRenderer, { content: entry.content, zone: entry.zone, initiator: entry.initiator, entryId: entry.id })) }, getContentKey(entry.content, entry.id)));
                 })] }));
     }
     if (fallback) {
@@ -605,7 +627,7 @@ function fitSidePanelsBesidePrimary(panels, budget) {
  */
 export var ContentAreaRenderBranch;
 (function (ContentAreaRenderBranch) {
-    /** Mobile, or a layout declaring no adjacent zone: the container itself scrolls. */
+    /** A layout declaring no adjacent zone: the container itself scrolls. Never chosen by the viewport (#2116). */
     ContentAreaRenderBranch["SINGLE_ZONE"] = "single-zone";
     /** An adjacent zone is declared and none of the declared adjacent zones is resizable. */
     ContentAreaRenderBranch["MULTI_ZONE_STATIC"] = "multi-zone-static";
@@ -619,30 +641,27 @@ export var ContentAreaRenderBranch;
  * resizable choice required the pane to be shown, so a resizable layout with a `COLLAPSE` pane
  * remounted the page a record was opened from at the moment the record opened beside it.
  *
- * ## Why this still reads `isMobile` while everything else asks `zoneIsCollapsedAtViewport`
+ * ## Why it takes no viewport input (#2116)
  *
- * Three functions now answer a viewport question about zones, and they answer three DIFFERENT
- * questions — checked 2026-09-25 rather than assumed:
+ * It used to choose SINGLE_ZONE on a phone, so that the outer container owned the scroll there. That put the
+ * primary zone's page under a different parent on either side of the MOBILE breakpoint, and React keeps a
+ * subtree's state only while its path to the root is unchanged: resizing a window, or rotating a tablet, across
+ * the breakpoint REMOUNTED the page and threw away its selection, search, scroll position and unsaved input.
+ * Measured on Wonder Todos (2026-09-30): a probe mark on the toolbar survived 1400 → 768px and was gone at 638px.
  *
- * | function | question | input |
- * |---|---|---|
- * | `zoneIsCollapsedAtViewport` | may content LAND in this pane, and is it drawn? | breakpoint + content-area fit |
- * | `resolveEmphasizedZone` | may this pane be expanded to fill? | whether it is SHOWN |
- * | this one | which TREE do we render? | the DECLARATION, plus mobile |
+ * The multi-zone tree already renders correctly with every adjacent pane collapsed: at VERT_TABLET the panes are
+ * collapsed (`zoneIsCollapsedAtViewport`) and `react-resizable-panels` normalises the lone primary panel to full
+ * width. A phone is the same case one breakpoint further, so it now takes the same tree. Structure follows the
+ * DECLARATION only; the viewport decides what is drawn (the side panes, gated on `showSecondary` /
+ * `showCompanion`), as emphasis already does by hiding zones in place. Which box scrolls on a phone moves from the
+ * outer container to the primary column: both are full-height `overflow-auto` boxes, and every consumer finds the
+ * scroll box by `[data-content-area]`, which both carry.
  *
- * The mobile term is not a collapse test. It chooses the single-column tree for a phone, where the
- * outer container owns the scroll; every wider viewport gets the multi-zone tree whose primary COLUMN
- * owns it. That choice must not flip as a pane opens and closes, which is exactly what #640 fixed, so
- * it cannot take the collapse predicate — a pane collapsed by a narrow content area would remount the
- * page underneath.
- *
- * At VERT_TABLET the two therefore disagree on purpose: the branch is multi-zone and the panes are
- * collapsed, so the panel group renders with primary alone and `react-resizable-panels` normalises
- * the single panel to full width. Verified, not assumed — both adjacent panels are gated on
- * `showSecondary` / `showCompanion` below.
+ * Rejected: rendering primary's content into a detached node each branch adopts (`react-reverse-portal`). It works,
+ * but it keeps two trees to maintain for one difference that no longer needs a tree of its own.
  */
 export function resolveContentAreaRenderBranch(input) {
-    if (input.isMobile || (!input.hasSecondaryZone && !input.hasCompanionZone)) {
+    if (!input.hasSecondaryZone && !input.hasCompanionZone) {
         return ContentAreaRenderBranch.SINGLE_ZONE;
     }
     const resizable = (input.hasSecondaryZone && !!input.split?.resizable)
@@ -851,6 +870,8 @@ const ZoneEmptyStatePlaceholder = () => {
         : '';
     return (_jsx("div", { className: "flex h-full items-center justify-center p-container", "data-zone-empty-state": "true", children: _jsx("p", { className: "max-w-xs text-center text-sm text-muted-foreground", children: label }) }));
 };
+/** A pane control drawn over the pane's content (its own sticky row): it needs its own ground and pointer events. */
+const ZONE_CONTROL_FLOATING_CLASS = 'pointer-events-auto bg-surface-raised/80 backdrop-blur-sm';
 /**
  * The one control of zone EMPHASIS — "give this pane the whole content area", and its inverse.
  *
@@ -866,7 +887,7 @@ const ZoneEmptyStatePlaceholder = () => {
  * at all is the worse outcome, and is what the empty-string era shipped. `''` below is only the
  * not-yet-ready state.
  */
-const ZoneEmphasisToggle = ({ emphasized, onToggle }) => {
+const ZoneEmphasisToggle = ({ emphasized, onToggle, floating = true }) => {
     const { tComponent, isReady } = useI18n({ component: FrontendComponentType.APP_LAYOUTS_MAIN_CONTAINER });
     const { renderIcon } = useIconRegistry();
     const label = isReady
@@ -878,7 +899,7 @@ const ZoneEmphasisToggle = ({ emphasized, onToggle }) => {
         : '';
     // The sticky row is `ZoneChrome`'s — this control is one item in it, so that adding a second one
     // cannot produce two stacked stickies that drift apart.
-    return (_jsx(Button, { type: "button", size: ButtonSize.ICON_SM, variant: ButtonVariants_Variant.GHOST, className: "pointer-events-auto bg-surface-raised/80 backdrop-blur-sm", "aria-pressed": emphasized, "aria-label": label || undefined, title: label || undefined, "data-zone-emphasis-toggle": emphasized ? 'restore' : 'expand', onClick: onToggle, children: renderIcon(emphasized ? StandardIconReference.MINIMIZE : StandardIconReference.MAXIMIZE, { size: IconSize.SM }) }));
+    return (_jsx(Button, { type: "button", size: ButtonSize.ICON_SM, variant: ButtonVariants_Variant.GHOST, className: floating ? ZONE_CONTROL_FLOATING_CLASS : undefined, "aria-pressed": emphasized, "aria-label": label || undefined, title: label || undefined, "data-zone-emphasis-toggle": emphasized ? 'restore' : 'expand', onClick: onToggle, children: renderIcon(emphasized ? StandardIconReference.MINIMIZE : StandardIconReference.MAXIMIZE, { size: IconSize.SM }) }));
 };
 /**
  * The control that CLOSES an adjacent pane, drawn beside the emphasis toggle.
@@ -898,7 +919,7 @@ const ZoneEmphasisToggle = ({ emphasized, onToggle }) => {
  *
  * Distinct from `goBack`, which pops ONE entry: see `dismissZone` in the controller.
  */
-const ZoneDismissControl = ({ onDismiss }) => {
+const ZoneDismissControl = ({ onDismiss, floating = true }) => {
     const { tComponent, isReady } = useI18n({ component: FrontendComponentType.APP_LAYOUTS_MAIN_CONTAINER });
     const { renderIcon } = useIconRegistry();
     const label = isReady
@@ -908,7 +929,7 @@ const ZoneDismissControl = ({ onDismiss }) => {
             key: 'zoneDismiss',
         })
         : '';
-    return (_jsx(Button, { type: "button", size: ButtonSize.ICON_SM, variant: ButtonVariants_Variant.GHOST, className: "pointer-events-auto bg-surface-raised/80 backdrop-blur-sm", "aria-label": label || undefined, title: label || undefined, "data-zone-dismiss": "true", onClick: onDismiss, children: renderIcon(StandardIconReference.CLOSE, { size: IconSize.SM }) }));
+    return (_jsx(Button, { type: "button", size: ButtonSize.ICON_SM, variant: ButtonVariants_Variant.GHOST, className: floating ? ZONE_CONTROL_FLOATING_CLASS : undefined, "aria-label": label || undefined, title: label || undefined, "data-zone-dismiss": "true", onClick: onDismiss, children: renderIcon(StandardIconReference.CLOSE, { size: IconSize.SM }) }));
 };
 /**
  * The ARIA name of each content zone, and of the divider between two of them.
@@ -958,7 +979,17 @@ const ZONE_REGION_LABEL_KEYS = {
  * One row rather than two stacked stickies, so the controls cannot drift apart as either is added to
  * or removed from a pane.
  */
-const ZoneChrome = ({ emphasized, onToggleEmphasis, onDismiss }) => (_jsxs("div", { className: "pointer-events-none sticky top-0 z-10 flex justify-end gap-element", children: [_jsx(ZoneEmphasisToggle, { emphasized: emphasized, onToggle: onToggleEmphasis }), onDismiss && _jsx(ZoneDismissControl, { onDismiss: onDismiss })] }));
+const ZoneChrome = ({ emphasized, onToggleEmphasis, onDismiss }) => (
+// The header this pane is showing may hold the same controls (see `ZoneChromeContext`); the row then
+// steps aside while its bar is on screen, and comes back out of the flow once the bar is scrolled past.
+_jsxs(ZoneChromeRow, { children: [_jsx(ZoneEmphasisToggle, { emphasized: emphasized, onToggle: onToggleEmphasis }), onDismiss && _jsx(ZoneDismissControl, { onDismiss: onDismiss })] }));
+/**
+ * A pane's chrome AND its content, with the chrome offered to the content: the record header the pane
+ * shows may claim the controls for its bar, and the pane's own row steps aside while it does (see
+ * `ZoneChromeContext`). Used at every mount site, so no pane can offer them in one layout and not in
+ * another.
+ */
+const ZoneChromeHost = ({ zone, emphasized, onToggleEmphasis, onDismiss, children }) => (_jsxs(ZoneChromeProvider, { zone: zone, controls: (_jsxs(_Fragment, { children: [_jsx(ZoneEmphasisToggle, { emphasized: emphasized, onToggle: onToggleEmphasis, floating: false }), onDismiss && _jsx(ZoneDismissControl, { onDismiss: onDismiss, floating: false })] })), children: [_jsx(ZoneChrome, { emphasized: emphasized, onToggleEmphasis: onToggleEmphasis, onDismiss: onDismiss }), children] }));
 export const NavigationContentAreas = ({ routerChildren }) => {
     // Reconcile the Settings Hub overlay with the URL. Mounted here — once,
     // persistently in the authenticated shell — rather than in the `/settings`
@@ -1074,9 +1105,9 @@ export const NavigationContentAreas = ({ routerChildren }) => {
     });
     /*
      * A zone occupies space for one of two reasons, and they are different questions: it HAS content,
-     * or it has none and its resolved behavior reserves the pane for a placeholder. `!isMobile` still
-     * gates both — below the breakpoint the responsive-collapse path owns the zone, and reserving an
-     * empty strip on a phone would be the worst possible reading of EMPTY_STATE.
+     * or it has none and its resolved behavior reserves the pane for a placeholder. Both are gated on the pane
+     * not being COLLAPSED (`zoneIsCollapsedAtViewport`, below) — on a phone it always is, so the responsive-collapse
+     * path owns the zone, and reserving an empty strip on a phone would be the worst reading of EMPTY_STATE.
      */
     /*
      * One element for all four zone render sites. A shared node rather than four `<ZoneEmptyStatePlaceholder />`
@@ -1160,7 +1191,7 @@ export const NavigationContentAreas = ({ routerChildren }) => {
      * themselves, and the static branch's dividers (`staticZoneDividers`). The choice is
      * `resolveContentAreaRenderBranch`.
      */
-    const renderBranch = resolveContentAreaRenderBranch({ isMobile, hasSecondaryZone, hasCompanionZone, split });
+    const renderBranch = resolveContentAreaRenderBranch({ hasSecondaryZone, hasCompanionZone, split });
     const focusPrimary = useCallback(() => setFocusedZone(NavigationZoneName.PRIMARY), [setFocusedZone]);
     const focusSecondary = useCallback(() => setFocusedZone(NavigationZoneName.SECONDARY), [setFocusedZone]);
     const focusCompanion = useCallback(() => setFocusedZone(NavigationZoneName.COMPANION), [setFocusedZone]);
@@ -1229,13 +1260,13 @@ export const NavigationContentAreas = ({ routerChildren }) => {
             return null;
         return computePanelSizes(zones, split, showSecondary, showCompanion, containerWidth);
     }, [zones, split, showSecondary, showCompanion, containerWidth]);
-    // ── Single-zone layout (mobile or no side zones) ──
+    // ── Single-zone layout (no side zones declared) ──
     if (renderBranch === ContentAreaRenderBranch.SINGLE_ZONE) {
         return (_jsx(Surface, { asChild: true, emitPolicyVars: false, variant: SurfaceVariant.SHELL, policyOverride: NON_CANONICAL_SHELL_SURFACE_POLICY_OVERRIDE, children: _jsx("div", { ref: containerRef, className: `h-full overflow-auto p-container ${contentAreaSurface}`, "data-content-area": "primary", 
-                /* The branch every PHONE renders. It carried neither the landmark nor the focus tracking the
-                   multi-zone containers got, so the accessibility pass was absent on exactly the devices a
-                   screen reader is most often used on — and the source guardrail missed it because it only
-                   matched the attribute alone on its own line. */
+                /* The branch a layout declaring no adjacent zone renders, at every width; since #2116 a phone gets it
+                   only for such a layout. It once carried neither the landmark nor the focus tracking the multi-zone
+                   containers got — and the source guardrail missed it because it only matched the attribute alone
+                   on its own line. */
                 onPointerDown: focusPrimary, onFocus: focusPrimary, ...regionProps(NavigationZoneName.PRIMARY), children: _jsx(ZoneContentWidthBoundary, { geometry: primaryZoneGeometry, children: _jsx(ZoneContentRenderer, { zone: NavigationZoneName.PRIMARY, fallback: routerChildren }) }) }) }));
     }
     // ── Multi-zone resizable layout ──
@@ -1263,17 +1294,17 @@ export const NavigationContentAreas = ({ routerChildren }) => {
                                    pointer, so the zone they are working in was never recorded — and every zone-scoped
                                    gesture (emphasis, dismiss, back) read the last MOUSE zone instead. React's onFocus
                                    is focusin, so anything focused anywhere inside the pane reports it. */
-                                onFocus: focusPrimary, ...regionProps(NavigationZoneName.PRIMARY), children: _jsx(ZoneContentWidthBoundary, { geometry: primaryZoneGeometry, children: _jsx(ZoneContentRenderer, { zone: NavigationZoneName.PRIMARY, fallback: routerChildren }) }) }) }), showSecondary && panelSizes.secondary && (_jsxs(_Fragment, { children: [emphasized === null && _jsx(ResizableHandle, { withHandle: true, disabled: panelSizes.secondary.frozen, "aria-label": resizeHandleLabel }), _jsx(ResizablePanel, { defaultSize: panelSizes.secondary.defaultSize, minSize: panelSizes.secondary.minSize, maxSize: panelSizes.secondary.maxSize, id: "nav-secondary", order: 2, className: cn('h-full', secondaryHidden && 'hidden'), "data-zone-hidden": secondaryHidden || undefined, children: _jsxs("div", { className: "h-full overflow-auto p-container", "data-content-area": "secondary", "data-zone-emphasized": emphasized === NavigationZoneName.SECONDARY || undefined, onPointerDown: focusSecondary, 
+                                onFocus: focusPrimary, ...regionProps(NavigationZoneName.PRIMARY), children: _jsx(ZoneContentWidthBoundary, { geometry: primaryZoneGeometry, children: _jsx(ZoneContentRenderer, { zone: NavigationZoneName.PRIMARY, fallback: routerChildren }) }) }) }), showSecondary && panelSizes.secondary && (_jsxs(_Fragment, { children: [emphasized === null && _jsx(ResizableHandle, { withHandle: true, disabled: panelSizes.secondary.frozen, "aria-label": resizeHandleLabel }), _jsx(ResizablePanel, { defaultSize: panelSizes.secondary.defaultSize, minSize: panelSizes.secondary.minSize, maxSize: panelSizes.secondary.maxSize, id: "nav-secondary", order: 2, className: cn('h-full', secondaryHidden && 'hidden'), "data-zone-hidden": secondaryHidden || undefined, children: _jsx("div", { className: "h-full overflow-auto p-container", "data-content-area": "secondary", "data-zone-emphasized": emphasized === NavigationZoneName.SECONDARY || undefined, onPointerDown: focusSecondary, 
                                         /* Focus, not only pointer: a keyboard reader tabbing into a pane never presses a
                                            pointer, so the zone they are working in was never recorded — and every zone-scoped
                                            gesture (emphasis, dismiss, back) read the last MOUSE zone instead. React's onFocus
                                            is focusin, so anything focused anywhere inside the pane reports it. */
-                                        onFocus: focusSecondary, ...regionProps(NavigationZoneName.SECONDARY), children: [_jsx(ZoneChrome, { emphasized: emphasized === NavigationZoneName.SECONDARY, onToggleEmphasis: toggleSecondaryEmphasis, onDismiss: secondaryIsDismissable ? dismissSecondary : undefined }), _jsx(ZoneContentWidthBoundary, { geometry: secondaryZoneGeometry, children: _jsx(ZoneContentRenderer, { zone: NavigationZoneName.SECONDARY, emptyState: zoneEmptyStatePlaceholder }) })] }) })] })), showCompanion && panelSizes.companion && (_jsxs(_Fragment, { children: [emphasized === null && _jsx(ResizableHandle, { withHandle: true, disabled: panelSizes.companion.frozen, "aria-label": resizeHandleLabel }), _jsx(ResizablePanel, { defaultSize: panelSizes.companion.defaultSize, minSize: panelSizes.companion.minSize, maxSize: panelSizes.companion.maxSize, id: "nav-companion", order: 3, className: cn('h-full', companionHidden && 'hidden'), "data-zone-hidden": companionHidden || undefined, children: _jsxs("div", { className: "h-full overflow-auto p-container", "data-content-area": "companion", "data-zone-emphasized": emphasized === NavigationZoneName.COMPANION || undefined, onPointerDown: focusCompanion, 
+                                        onFocus: focusSecondary, ...regionProps(NavigationZoneName.SECONDARY), children: _jsx(ZoneChromeHost, { zone: NavigationZoneName.SECONDARY, emphasized: emphasized === NavigationZoneName.SECONDARY, onToggleEmphasis: toggleSecondaryEmphasis, onDismiss: secondaryIsDismissable ? dismissSecondary : undefined, children: _jsx(ZoneContentWidthBoundary, { geometry: secondaryZoneGeometry, children: _jsx(ZoneContentRenderer, { zone: NavigationZoneName.SECONDARY, emptyState: zoneEmptyStatePlaceholder }) }) }) }) })] })), showCompanion && panelSizes.companion && (_jsxs(_Fragment, { children: [emphasized === null && _jsx(ResizableHandle, { withHandle: true, disabled: panelSizes.companion.frozen, "aria-label": resizeHandleLabel }), _jsx(ResizablePanel, { defaultSize: panelSizes.companion.defaultSize, minSize: panelSizes.companion.minSize, maxSize: panelSizes.companion.maxSize, id: "nav-companion", order: 3, className: cn('h-full', companionHidden && 'hidden'), "data-zone-hidden": companionHidden || undefined, children: _jsx("div", { className: "h-full overflow-auto p-container", "data-content-area": "companion", "data-zone-emphasized": emphasized === NavigationZoneName.COMPANION || undefined, onPointerDown: focusCompanion, 
                                         /* Focus, not only pointer: a keyboard reader tabbing into a pane never presses a
                                            pointer, so the zone they are working in was never recorded — and every zone-scoped
                                            gesture (emphasis, dismiss, back) read the last MOUSE zone instead. React's onFocus
                                            is focusin, so anything focused anywhere inside the pane reports it. */
-                                        onFocus: focusCompanion, ...regionProps(NavigationZoneName.COMPANION), children: [_jsx(ZoneChrome, { emphasized: emphasized === NavigationZoneName.COMPANION, onToggleEmphasis: toggleCompanionEmphasis, onDismiss: companionIsDismissable ? dismissCompanion : undefined }), _jsx(ZoneContentWidthBoundary, { geometry: companionZoneGeometry, children: _jsx(ZoneContentRenderer, { zone: NavigationZoneName.COMPANION, emptyState: zoneEmptyStatePlaceholder }) })] }) })] }))] }) }) }));
+                                        onFocus: focusCompanion, ...regionProps(NavigationZoneName.COMPANION), children: _jsx(ZoneChromeHost, { zone: NavigationZoneName.COMPANION, emphasized: emphasized === NavigationZoneName.COMPANION, onToggleEmphasis: toggleCompanionEmphasis, onDismiss: companionIsDismissable ? dismissCompanion : undefined, children: _jsx(ZoneContentWidthBoundary, { geometry: companionZoneGeometry, children: _jsx(ZoneContentRenderer, { zone: NavigationZoneName.COMPANION, emptyState: zoneEmptyStatePlaceholder }) }) }) }) })] }))] }) }) }));
     }
     /*
      * ── Multi-zone STATIC layout (zones present, none resizable) ──
@@ -1314,17 +1345,17 @@ export const NavigationContentAreas = ({ routerChildren }) => {
                        pointer, so the zone they are working in was never recorded — and every zone-scoped
                        gesture (emphasis, dismiss, back) read the last MOUSE zone instead. React's onFocus
                        is focusin, so anything focused anywhere inside the pane reports it. */
-                    onFocus: focusPrimary, ...regionProps(NavigationZoneName.PRIMARY), children: _jsx(ZoneContentWidthBoundary, { geometry: primaryZoneGeometry, children: _jsx(ZoneContentRenderer, { zone: NavigationZoneName.PRIMARY, fallback: routerChildren }) }) }), showSecondary && (_jsxs("div", { className: cn('h-full overflow-auto p-container', dividers.secondary && emphasized === null && (stacked ? 'border-b border-border' : 'border-e border-border'), secondaryHidden && 'hidden'), style: panelExtent(sidePanels.secondary, emphasized === NavigationZoneName.SECONDARY), "data-content-area": "secondary", "data-zone-hidden": secondaryHidden || undefined, "data-zone-emphasized": emphasized === NavigationZoneName.SECONDARY || undefined, onPointerDown: focusSecondary, 
+                    onFocus: focusPrimary, ...regionProps(NavigationZoneName.PRIMARY), children: _jsx(ZoneContentWidthBoundary, { geometry: primaryZoneGeometry, children: _jsx(ZoneContentRenderer, { zone: NavigationZoneName.PRIMARY, fallback: routerChildren }) }) }), showSecondary && (_jsx("div", { className: cn('h-full overflow-auto p-container', dividers.secondary && emphasized === null && (stacked ? 'border-b border-border' : 'border-e border-border'), secondaryHidden && 'hidden'), style: panelExtent(sidePanels.secondary, emphasized === NavigationZoneName.SECONDARY), "data-content-area": "secondary", "data-zone-hidden": secondaryHidden || undefined, "data-zone-emphasized": emphasized === NavigationZoneName.SECONDARY || undefined, onPointerDown: focusSecondary, 
                     /* Focus, not only pointer: a keyboard reader tabbing into a pane never presses a
                        pointer, so the zone they are working in was never recorded — and every zone-scoped
                        gesture (emphasis, dismiss, back) read the last MOUSE zone instead. React's onFocus
                        is focusin, so anything focused anywhere inside the pane reports it. */
-                    onFocus: focusSecondary, ...regionProps(NavigationZoneName.SECONDARY), children: [_jsx(ZoneChrome, { emphasized: emphasized === NavigationZoneName.SECONDARY, onToggleEmphasis: toggleSecondaryEmphasis, onDismiss: secondaryIsDismissable ? dismissSecondary : undefined }), _jsx(ZoneContentWidthBoundary, { geometry: secondaryZoneGeometry, children: _jsx(ZoneContentRenderer, { zone: NavigationZoneName.SECONDARY, emptyState: zoneEmptyStatePlaceholder }) })] })), showCompanion && (_jsxs("div", { className: cn('h-full overflow-auto p-container', companionHidden && 'hidden'), style: panelExtent(sidePanels.companion, emphasized === NavigationZoneName.COMPANION), "data-content-area": "companion", "data-zone-hidden": companionHidden || undefined, "data-zone-emphasized": emphasized === NavigationZoneName.COMPANION || undefined, onPointerDown: focusCompanion, 
+                    onFocus: focusSecondary, ...regionProps(NavigationZoneName.SECONDARY), children: _jsx(ZoneChromeHost, { zone: NavigationZoneName.SECONDARY, emphasized: emphasized === NavigationZoneName.SECONDARY, onToggleEmphasis: toggleSecondaryEmphasis, onDismiss: secondaryIsDismissable ? dismissSecondary : undefined, children: _jsx(ZoneContentWidthBoundary, { geometry: secondaryZoneGeometry, children: _jsx(ZoneContentRenderer, { zone: NavigationZoneName.SECONDARY, emptyState: zoneEmptyStatePlaceholder }) }) }) })), showCompanion && (_jsx("div", { className: cn('h-full overflow-auto p-container', companionHidden && 'hidden'), style: panelExtent(sidePanels.companion, emphasized === NavigationZoneName.COMPANION), "data-content-area": "companion", "data-zone-hidden": companionHidden || undefined, "data-zone-emphasized": emphasized === NavigationZoneName.COMPANION || undefined, onPointerDown: focusCompanion, 
                     /* Focus, not only pointer: a keyboard reader tabbing into a pane never presses a
                        pointer, so the zone they are working in was never recorded — and every zone-scoped
                        gesture (emphasis, dismiss, back) read the last MOUSE zone instead. React's onFocus
                        is focusin, so anything focused anywhere inside the pane reports it. */
-                    onFocus: focusCompanion, ...regionProps(NavigationZoneName.COMPANION), children: [_jsx(ZoneChrome, { emphasized: emphasized === NavigationZoneName.COMPANION, onToggleEmphasis: toggleCompanionEmphasis, onDismiss: companionIsDismissable ? dismissCompanion : undefined }), _jsx(ZoneContentWidthBoundary, { geometry: companionZoneGeometry, children: _jsx(ZoneContentRenderer, { zone: NavigationZoneName.COMPANION, emptyState: zoneEmptyStatePlaceholder }) })] }))] }) }));
+                    onFocus: focusCompanion, ...regionProps(NavigationZoneName.COMPANION), children: _jsx(ZoneChromeHost, { zone: NavigationZoneName.COMPANION, emphasized: emphasized === NavigationZoneName.COMPANION, onToggleEmphasis: toggleCompanionEmphasis, onDismiss: companionIsDismissable ? dismissCompanion : undefined, children: _jsx(ZoneContentWidthBoundary, { geometry: companionZoneGeometry, children: _jsx(ZoneContentRenderer, { zone: NavigationZoneName.COMPANION, emptyState: zoneEmptyStatePlaceholder }) }) }) }))] }) }));
 };
 // =============================================================================
 // Unified Overlay Component