@wildo-ai/saas-frontend-lib 1.1.5 → 1.1.7

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

@@ -12,8 +12,11 @@ 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 { zoneIsCollapsedAtViewport } from './zone-collapse.js';
+import { useResponsiveZoneMigration } from './useResponsiveZoneMigration.js';
 import { NavigationUtils } from './navigation.utils.js';
-import { useHostedPaneRouteSync, useNavigationController, useSettingsHubOverlaySync, useStructuralZoneBackForwardSync } from './useNavigationController.js';
+import { useNavigationController } from './useNavigationController.js';
+import { useHostedPaneRouteSync, useSettingsHubOverlaySync, useStructuralZoneBackForwardSync } from './useNavigationRouterSync.js';
 import { NavigationZone, NavigationContentType } from './navigation.schemas.js';
 import { CorePresetNames, FrontendComponentType, PlacementSide, ShellAppearance, SurfaceVariant } from '@wildo-ai/presets-components-models';
 import { useUI } from '../../core/ui/useUI.js';
@@ -205,6 +208,40 @@ export const NavigationContentRenderer = ({ content, zone, initiator, entryId })
     }
     return null;
 };
+/**
+ * The DOM ids joining a zone tab to the stack entry it reveals.
+ *
+ * ## The tab bar was promising panels that did not exist
+ *
+ * Radix gives every `TabsTrigger` an `aria-controls` naming the `TabsContent` with the same value,
+ * and a tabbed zone renders no `TabsContent` at all — its "panels" are the persistent stack entries,
+ * rendered by `ZoneContentRenderer` as a SIBLING of the tab bar rather than inside the `Tabs` root,
+ * so Radix cannot see them. Every trigger therefore carried an `aria-controls` pointing at nothing:
+ * a dangling IDREF, which axe reports as a CRITICAL `aria-valid-attr-value` and which a screen
+ * reader renders as "tab 1 of 3" for tabs that control nothing findable. The same defect was
+ * measured on the quick-filter tabs (#1411).
+ *
+ * ## Why the answer here is the OPPOSITE of the one that fixed those
+ *
+ * `ResourceCollectionQuickFilterTabs` stopped being tabs, because its panel genuinely did not exist
+ * — the collection below re-fetches, and a tab is a promise that activating it reveals A PANEL. Here
+ * the panels are real: every stack entry is mounted, one visible and the rest `inert`, which is
+ * exactly the tab pattern. So the fix is to make the existing relationship VISIBLE to assistive
+ * technology rather than to withdraw the claim — the trigger names its panel, the panel names its
+ * trigger, and both ids are derived from the same pair so they cannot drift.
+ *
+ * Wiring by hand, rather than wrapping the entries in `TabsContent`, keeps ONE rendering path for
+ * both content models: the persistent mount, `display: contents` on the visible entry and `inert` on
+ * the rest are shared with `SINGLE`, and `TabsContent` would add a wrapper element that the
+ * "no extra wrapper div" invariant on that renderer exists to avoid.
+ *
+ * Entry ids are generated strings that never reach a CSS selector, but a DOM id has to be a single
+ * token for an IDREF to resolve, so anything outside the safe set is folded to `_`.
+ */
+export function zoneTabDomIds(zone, entryId) {
+    const token = `${zone}-${entryId.replace(/[^A-Za-z0-9_-]/g, '_')}`;
+    return { tabId: `nav-zone-tab-${token}`, panelId: `nav-zone-tabpanel-${token}` };
+}
 /**
  * The tab bar of a `NavigationZoneContentModel.TABBED` zone — one trigger per stack entry.
  *
@@ -217,11 +254,18 @@ export const NavigationContentRenderer = ({ content, zone, initiator, entryId })
  * first for exactly the entries (composite views, engine pages) whose titles are hardest to get
  * right.
  */
-const ZoneTabTrigger = ({ entry }) => {
-    const { title } = useOverlayTitle(entry);
-    return _jsx(TabsTrigger, { value: entry.id, children: title });
+const ZoneTabTrigger = ({ zone, entry }) => {
+    // Sibling tabs must be told apart: a record's read tab and its edit tab keep their own operations' titles.
+    const { title } = useOverlayTitle(entry, { keepOperationTitle: true });
+    const { tabId, panelId } = zoneTabDomIds(zone, entry.id);
+    /*
+     * `id` and `aria-controls` are written AFTER Radix's own, and that ordering is what makes this
+     * work: the primitive spreads the caller's props last, so ours replace the generated pair that
+     * pointed at a `TabsContent` this zone never renders.
+     */
+    return _jsx(TabsTrigger, { value: entry.id, id: tabId, "aria-controls": panelId, children: title });
 };
-const ZoneTabBar = ({ zone, entries, activeEntryId, onSelect }) => (_jsx(Tabs, { value: activeEntryId, onValueChange: (entryId) => onSelect(zone, entryId), "data-zone-tab-bar": zone, children: _jsx(TabsList, { children: entries.map(entry => _jsx(ZoneTabTrigger, { entry: entry }, entry.id)) }) }));
+const ZoneTabBar = ({ zone, entries, activeEntryId, onSelect }) => (_jsx(Tabs, { value: activeEntryId, onValueChange: (entryId) => onSelect(zone, entryId), "data-zone-tab-bar": zone, children: _jsx(TabsList, { children: entries.map(entry => _jsx(ZoneTabTrigger, { zone: zone, entry: entry }, entry.id)) }) }));
 /**
  * Render a zone's content using **persistent stack rendering**.
  *
@@ -292,7 +336,24 @@ const ZoneContentRenderer = ({ zone, fallback, emptyState }) => {
                      * refetch on every switch, which is the behaviour tabs exist to avoid.
                      */
                     const isTop = index === visibleEntryIndex;
-                    return (_jsx("div", { style: { display: isTop ? 'contents' : 'none' }, 
+                    /*
+                     * Only a TABBED zone's entries are panels. In `SINGLE` the hidden entries are history, not
+                     * parallel choices, and labelling them `tabpanel` would announce a tab set with no tabs.
+                     */
+                    const tabPanelProps = isTabbed
+                        ? (() => {
+                            const { tabId, panelId } = zoneTabDomIds(zone, entry.id);
+                            /*
+                             * No `tabIndex`. WAI-ARIA asks for a focusable panel when the panel holds nothing
+                             * focusable, but this wrapper is `display: contents` while visible, and an element
+                             * that generates no box cannot take focus — a `tabIndex={0}` here was a claim the
+                             * browser ignores. The panels hold resource views, which carry their own focusable
+                             * controls.
+                             */
+                            return { role: 'tabpanel', id: panelId, 'aria-labelledby': tabId };
+                        })()
+                        : undefined;
+                    return (_jsx("div", { ...tabPanelProps, style: { display: isTop ? 'contents' : 'none' }, 
                         // Non-top stack entries stay mounted (to preserve their state
                         // across depth navigation) but must be hidden from both layout
                         // and assistive technology. We use `inert` rather than
@@ -557,6 +618,28 @@ export var ContentAreaRenderBranch;
  * Deliberately takes no "is a pane shown" input: see `ContentAreaRenderBranch`. Before issue #640 the
  * 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`
+ *
+ * Three functions now answer a viewport question about zones, and they answer three DIFFERENT
+ * questions — checked 2026-09-25 rather than assumed:
+ *
+ * | 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 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.
  */
 export function resolveContentAreaRenderBranch(input) {
     if (input.isMobile || (!input.hasSecondaryZone && !input.hasCompanionZone)) {
@@ -579,6 +662,28 @@ export function resolveContentAreaRenderBranch(input) {
  *
  * Exported and pure so the rule is pinned without the provider stack a render would need.
  */
+/**
+ * The side-panel percentages the STATIC branch renders, clamped so primary keeps its floor.
+ *
+ * The resizable branch has clamped since #1013 (`fitSidePanelsBesidePrimary`, `MIN_PRIMARY_PERCENT`).
+ * The static branch applied the two authored ratios raw — and they come from DIFFERENT tuples
+ * (`split.ratio[1]` and `split.companion.ratio[1]`), so nothing related them: `ratio: [30, 70]` plus
+ * `companion: { ratio: [30, 70] }` rendered two 70% panes and crushed primary to a sliver, with no
+ * clamp and without consulting `minWidth`/`maxWidth` at all.
+ *
+ * Proportional rather than truncating, so an author who over-declares keeps the RELATIVE weight they
+ * asked for — 70/70 becomes 37.5/37.5, not 70/5.
+ */
+export function clampStaticSidePanels(input) {
+    const secondary = input.showSecondary ? Math.max(0, input.secondaryPercent) : 0;
+    const companion = input.showCompanion ? Math.max(0, input.companionPercent) : 0;
+    const total = secondary + companion;
+    const ceiling = 100 - MIN_PRIMARY_PERCENT;
+    if (total <= ceiling || total === 0)
+        return { secondary, companion };
+    const scale = ceiling / total;
+    return { secondary: secondary * scale, companion: companion * scale };
+}
 export function staticZoneDividers(input) {
     return {
         primary: input.showSecondary || input.showCompanion,
@@ -805,6 +910,47 @@ const ZoneDismissControl = ({ onDismiss }) => {
         : '';
     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 }) }));
 };
+/**
+ * The ARIA name of each content zone, and of the divider between two of them.
+ *
+ * ## Why a pane needs a name at all
+ *
+ * The three zones are plain `div`s. Sighted, the split IS the explanation — a list on the left, the
+ * record it opened on the right. To a screen reader there was nothing: no landmark to jump between,
+ * no way to tell which pane the cursor was in, and after a click in the list that opened a record in
+ * the pane, no way to find the record except by walking the whole document. `role="region"` with a
+ * name makes each pane a LANDMARK, which is the one navigation affordance that answers all three.
+ *
+ * ## Not `role="main"`, deliberately
+ *
+ * `main` is a document-level landmark and there may be exactly one. Claiming it for primary would
+ * take the decision away from the shell that hosts these areas — the design philosophy is explicit
+ * that shell-level `main` landmarks are an application OPT-IN, not a framework default — and an
+ * embedded content area would then fight its host for the same landmark. Three peer regions say what
+ * is true (three content areas, each named) without claiming which one is the document's subject.
+ *
+ * The name comes from the labelling pipeline like every other display string. Until it is generated
+ * the key itself is the name (#1414): an unnamed region is DROPPED from the landmark list entirely,
+ * so a visibly-wrong name is strictly better than a pane that cannot be reached — and it looks
+ * missing, which is what makes someone author it.
+ */
+function useZoneAccessibleNames() {
+    const { tComponent, isReady } = useI18n({ component: FrontendComponentType.APP_LAYOUTS_MAIN_CONTAINER });
+    const label = useCallback((key) => (isReady
+        ? resolveComponentLabel({ tComponent, componentType: FrontendComponentType.APP_LAYOUTS_MAIN_CONTAINER, key }) || undefined
+        : undefined), [tComponent, isReady]);
+    const regionProps = useCallback((zone) => ({
+        role: 'region',
+        'aria-label': label(ZONE_REGION_LABEL_KEYS[zone]),
+    }), [label]);
+    return { regionProps, resizeHandleLabel: label('zoneResizeHandle') };
+}
+/** One key per zone, total over the vocabulary so a fourth zone cannot be added unnamed. */
+const ZONE_REGION_LABEL_KEYS = {
+    [NavigationZoneName.PRIMARY]: 'zoneRegionPrimary',
+    [NavigationZoneName.SECONDARY]: 'zoneRegionSecondary',
+    [NavigationZoneName.COMPANION]: 'zoneRegionCompanion',
+};
 /**
  * The sticky chrome row an adjacent zone carries: emphasis always, dismiss only where the layout
  * collapses the zone when it is empty.
@@ -829,12 +975,13 @@ export const NavigationContentAreas = ({ routerChildren }) => {
     // Always-mounted for the same reason as the two above: the pane is never the router's route —
     // the browser URL is the host's — so no route element ever mounts a sync hook for it.
     useHostedPaneRouteSync();
-    const { isZoneVisible, getZoneDepth, getTopContent, setFocusedZone, emphasizedZone, setEmphasizedZone } = useNavigationState();
+    const { isZoneVisible, getZoneDepth, getTopContent, setFocusedZone, emphasizedZone, setEmphasizedZone, reconcileCollapsedZones, state: navigationState } = useNavigationState();
     // Only `dismissZone` is taken here: the pane's close control is drawn by the content areas
     // (emphasis and dismissal are both properties of the ZONE, not of what it holds), and the
     // controller is where the URL write that must accompany a closed pane already lives.
     const { dismissZone } = useNavigationController();
     const { setContentAreaWidth } = useNavigationState();
+    const { regionProps, resizeHandleLabel } = useZoneAccessibleNames();
     const { navigationLayout: resolvedNavigationLayout, UIConfig, shellAppearance, compositeViews, homeDefinition } = useUI();
     const location = useLocation();
     const containerRef = useRef(null);
@@ -956,9 +1103,43 @@ export const NavigationContentAreas = ({ routerChildren }) => {
      * question is to change no structure.
      */
     const primaryDestinationKnown = useMemo(() => primaryDestinationDeclarationIsKnown({ primaryContent: primaryTopContent, compositeViews }), [primaryTopContent, compositeViews]);
-    const showSecondary = !isMobile && hasSecondaryZone
+    /*
+     * A pane is hidden when it is COLLAPSED, not merely when the viewport is mobile.
+     *
+     * These read `!isMobile` until 2026-09-25 while the resolver collapsed at MOBILE **and**
+     * VERT_TABLET — so between 768 and 1023px a declared `responsiveCollapse` retargeted every click
+     * away from the pane and the pane went on rendering. With `onEmpty: EMPTY_STATE` that is a
+     * permanent "select an item" placeholder beside a list whose clicks land somewhere else. Both
+     * sides ask `zoneIsCollapsedAtViewport` now, so they cannot disagree.
+     */
+    const secondaryCollapsed = zoneIsCollapsedAtViewport({
+        zoneConfig: zones?.secondary,
+        viewport: UIConfig?.currentBreakpoint,
+        contentAreaWidth: containerWidth,
+    });
+    const companionCollapsed = zoneIsCollapsedAtViewport({
+        zoneConfig: zones?.companion,
+        viewport: UIConfig?.currentBreakpoint,
+        contentAreaWidth: containerWidth,
+    });
+    /*
+     * Collapse is not only a PLACEMENT rule. A pane that collapses while holding content leaves that
+     * content in a zone nothing renders, so the entries already there are evacuated — to primary or to
+     * the overlay, whichever the zone's own `responsiveCollapse` declares — and returned when the
+     * viewport gives the zone back. Placed beside the two `zoneIsCollapsedAtViewport` calls above
+     * because it answers the same question from the same inputs; it asks the shared owner rather than
+     * taking these booleans, so it can tell PUSH from OVERLAY, which a boolean cannot carry.
+     */
+    useResponsiveZoneMigration({
+        zones,
+        viewport: UIConfig?.currentBreakpoint,
+        contentAreaWidth: containerWidth,
+        reconcileCollapsedZones,
+        navigationState,
+    });
+    const showSecondary = !secondaryCollapsed && hasSecondaryZone
         && (secondaryHasContent || (primaryDestinationKnown && zoneOccupiesSpaceWhenEmpty(secondaryOnEmpty)));
-    const showCompanion = !isMobile && hasCompanionZone
+    const showCompanion = !companionCollapsed && hasCompanionZone
         && (companionHasContent || (primaryDestinationKnown && zoneOccupiesSpaceWhenEmpty(companionOnEmpty)));
     /*
      * BOTH branch decisions key on what the layout DECLARES, never on whether a pane is currently shown.
@@ -999,6 +1180,8 @@ export const NavigationContentAreas = ({ routerChildren }) => {
         isMobile,
         secondaryShown: showSecondary,
         companionShown: showCompanion,
+        secondaryHasContent,
+        companionHasContent,
     });
     const overlayOpen = getZoneDepth(NavigationZone.OVERLAY) > 0;
     useEffect(() => {
@@ -1048,7 +1231,12 @@ export const NavigationContentAreas = ({ routerChildren }) => {
     }, [zones, split, showSecondary, showCompanion, containerWidth]);
     // ── Single-zone layout (mobile or no side zones) ──
     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", children: _jsx(ZoneContentWidthBoundary, { geometry: primaryZoneGeometry, children: _jsx(ZoneContentRenderer, { zone: NavigationZoneName.PRIMARY, fallback: routerChildren }) }) }) }));
+        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. */
+                onPointerDown: focusPrimary, onFocus: focusPrimary, ...regionProps(NavigationZoneName.PRIMARY), children: _jsx(ZoneContentWidthBoundary, { geometry: primaryZoneGeometry, children: _jsx(ZoneContentRenderer, { zone: NavigationZoneName.PRIMARY, fallback: routerChildren }) }) }) }));
     }
     // ── Multi-zone resizable layout ──
     if (renderBranch === ContentAreaRenderBranch.MULTI_ZONE_RESIZABLE && panelSizes) {
@@ -1070,14 +1258,73 @@ export const NavigationContentAreas = ({ routerChildren }) => {
          * material runtime works here rather than being silently inert. `Slot` composes its own ref with
          * the child's, so `containerRef` keeps receiving the node.
          */
-        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 ${contentAreaSurface}`, children: _jsxs(ResizablePanelGroup, { direction: splitDirection, autoSaveId: "nav-zones", className: "h-full", children: [_jsx(ResizablePanel, { defaultSize: panelSizes.primaryDefault, minSize: MIN_PRIMARY_PERCENT, id: "nav-primary", order: 1, className: cn('h-full', primaryHidden && 'hidden'), "data-zone-hidden": primaryHidden || undefined, children: _jsx("div", { className: `h-full p-container ${primaryZoneGeometry.fillsHeight ? 'overflow-hidden' : 'overflow-auto'}`, "data-content-area": "primary", onPointerDown: focusPrimary, 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 }), _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, 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 }), _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, 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 }) })] }) })] }))] }) }) }));
+        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 ${contentAreaSurface}`, children: _jsxs(ResizablePanelGroup, { direction: splitDirection, autoSaveId: "nav-zones", className: "h-full", children: [_jsx(ResizablePanel, { defaultSize: panelSizes.primaryDefault, minSize: MIN_PRIMARY_PERCENT, id: "nav-primary", order: 1, className: cn('h-full', primaryHidden && 'hidden'), "data-zone-hidden": primaryHidden || undefined, children: _jsx("div", { className: `h-full p-container ${primaryZoneGeometry.fillsHeight ? 'overflow-hidden' : 'overflow-auto'}`, "data-content-area": "primary", onPointerDown: focusPrimary, 
+                                /* 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: 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, 
+                                        /* 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, 
+                                        /* 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 }) })] }) })] }))] }) }) }));
     }
-    // ── Multi-zone static layout (zones present but not resizable) ──
-    // Use ratio-based widths when available, fall back to equal distribution.
-    const secondaryRatio = split?.ratio?.[1] ?? 50;
-    const companionRatio = split?.companion?.ratio?.[1] ?? 30;
+    /*
+     * ── Multi-zone STATIC layout (zones present, none resizable) ──
+     *
+     * Two things this branch did not do until 2026-09-25, both of which made a declaration silently
+     * inert on exactly the layouts that declare no `resizable`:
+     *
+     * 1. It never read `split.orientation`. Only the resizable branch did, so `orientation: HORIZONTAL`
+     *    on a non-resizable layout produced a side-by-side split — the opposite of what it says.
+     *    `DisplayDirection` names the DIVIDER, so a VERTICAL divider stacks content in a ROW; the
+     *    inversion is the same one `splitDividerOrientationToPanelGroupDirection` owns for the other
+     *    branch.
+     * 2. It applied the authored ratios raw, with no primary floor — see `clampStaticSidePanels`.
+     *
+     * The percentage drives `width` in a row and `height` in a column, which is why the two are chosen
+     * together rather than hard-coding `width`.
+     */
+    /*
+     * `stacked` is the STACKING AXIS, and it is the inverse of the declared DIVIDER orientation — the
+     * same inversion `splitDividerOrientationToPanelGroupDirection` owns for the resizable branch, and
+     * the one that inverted every split in the framework until #174. A HORIZONTAL divider stacks the
+     * panes top over bottom; a VERTICAL divider (the default) puts them side by side.
+     *
+     * Derived THROUGH that function rather than re-tested here, so the two branches cannot disagree
+     * about which way round it goes.
+     */
+    const stacked = splitDividerOrientationToPanelGroupDirection(split?.orientation) === DisplayDirection.VERTICAL;
+    const sidePanels = clampStaticSidePanels({
+        secondaryPercent: split?.ratio?.[1] ?? 50,
+        companionPercent: split?.companion?.ratio?.[1] ?? 30,
+        showSecondary,
+        showCompanion,
+    });
+    const panelExtent = (percent, isEmphasized) => (stacked ? { height: isEmphasized ? '100%' : `${percent}%` } : { width: isEmphasized ? '100%' : `${percent}%` });
     const dividers = staticZoneDividers({ showSecondary, showCompanion });
-    return (_jsx(Surface, { asChild: true, emitPolicyVars: false, variant: SurfaceVariant.SHELL, policyOverride: NON_CANONICAL_SHELL_SURFACE_POLICY_OVERRIDE, children: _jsxs("div", { ref: containerRef, className: `h-full flex ${contentAreaSurface}`, children: [_jsx("div", { className: cn('flex-1 h-full overflow-auto p-container', dividers.primary && emphasized === null && 'border-e border-border', primaryHidden && 'hidden'), "data-content-area": "primary", "data-zone-hidden": primaryHidden || undefined, onPointerDown: focusPrimary, 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 && 'border-e border-border', secondaryHidden && 'hidden'), style: { width: emphasized === NavigationZoneName.SECONDARY ? '100%' : `${secondaryRatio}%` }, "data-content-area": "secondary", "data-zone-hidden": secondaryHidden || undefined, "data-zone-emphasized": emphasized === NavigationZoneName.SECONDARY || undefined, onPointerDown: focusSecondary, 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: { width: emphasized === NavigationZoneName.COMPANION ? '100%' : `${companionRatio}%` }, "data-content-area": "companion", "data-zone-hidden": companionHidden || undefined, "data-zone-emphasized": emphasized === NavigationZoneName.COMPANION || undefined, onPointerDown: focusCompanion, 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 }) })] }))] }) }));
+    return (_jsx(Surface, { asChild: true, emitPolicyVars: false, variant: SurfaceVariant.SHELL, policyOverride: NON_CANONICAL_SHELL_SURFACE_POLICY_OVERRIDE, children: _jsxs("div", { ref: containerRef, className: cn('h-full flex', stacked ? 'flex-col' : 'flex-row', contentAreaSurface), children: [_jsx("div", { className: cn('flex-1 h-full overflow-auto p-container', dividers.primary && emphasized === null && (stacked ? 'border-b border-border' : 'border-e border-border'), primaryHidden && 'hidden'), "data-content-area": "primary", "data-zone-hidden": primaryHidden || undefined, onPointerDown: focusPrimary, 
+                    /* 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: 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, 
+                    /* 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, 
+                    /* 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 }) })] }))] }) }));
 };
 // =============================================================================
 // Unified Overlay Component
@@ -1131,6 +1378,7 @@ const NavigationOverlay = () => {
                 ? NavigationUtils.resolveBrowserUrlForZoneEntry({
                     zone: NavigationZoneName.SECONDARY,
                     entryUrlPath: secondaryTop.urlPath,
+                    paneContent: secondaryTop.content,
                     currentBrowserUrl: primaryUrl,
                     getZoneState,
                 })