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

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

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Subscribes to navigation events via NavigationContext.
  */
 import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { NavigationZoneName, OverlayAppearance, } from '@wildo-ai/saas-models';
 import { ViewportBreakpoint, DisplayDirection } from '@wildo-ai/zod-decorators';
 import { NavigationZoneContentModel } from '@wildo-ai/saas-models';
@@ -21,6 +21,7 @@ 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 { ErrorModalContent } from '../../core/errors/ErrorModalContent.js';
 import { resolveVisibleEntryIndex } from './zone-visible-entry.js';
 import { Tabs, TabsList, TabsTrigger } from '../../components/sections/tabs.js';
 import { ResourceOperationSurface } from '../../components/resources/ResourceOperationSurface.js';
@@ -31,7 +32,9 @@ import { CompositeView } from '../../components/views/composite-view/CompositeVi
 const ChartView = React.lazy(() => import('../../components/views/chart-view/ChartView.js'));
 import { ResizablePanelGroup, ResizablePanel, ResizableHandle, } from '../../components/layout/resizable.js';
 import { OverlayContainer } from '../../components/overlays/containers/OverlayContainer.js';
-import { getNavigationOverlayClassName, overlayAppearanceToContainerMode, SETTINGS_HUB_NAVIGATION_OVERLAY_CLASS_NAME, } from '../../components/overlays/containers/navigation-overlay-container.utils.js';
+import { getNavigationOverlayClassName, getSettingsHubNavigationOverlayClassName, overlayAppearanceToContainerMode, } from '../../components/overlays/containers/navigation-overlay-container.utils.js';
+import { useVisibleSettingsHubConfig } from '../../core/config/useVisibleSettingsHubConfig.js';
+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 { SettingsHub } from '../../components/settings/SettingsHub.js';
@@ -44,9 +47,14 @@ import { resolveInsertedChartView } from '../../core/config/chart-view.frontend.
 import { Surface } from '../../components/sections/surface.js';
 import { cn } from '../../core/ui/cn.js';
 import { NON_CANONICAL_SHELL_SURFACE_POLICY_OVERRIDE } from '../../core/ui/surface-a11y.utils.js';
-import { resolvePrimaryDestinationAdjacentZoneOnEmpty, resolveZoneEmptyBehavior, zoneOccupiesSpaceWhenEmpty, } from './zone-empty-behavior.js';
+import { Button, ButtonVariants_Variant } from '../../components/actions/button.js';
+import { ButtonSize } from '@wildo-ai/presets-components-models';
+import { useIconRegistry } from '../../core/icons/useIconRegistry.js';
+import { IconSize, StandardIconReference } from '../../core/icons/icon-registry.frontend.schemas.js';
+import { escapeRestoresEmphasis, resolveEmphasizedZone } from './zone-emphasis.js';
+import { resolvePrimaryDestinationAdjacentZoneOnEmpty, resolveZoneEmptyBehavior, zoneIsDismissable, zoneOccupiesSpaceWhenEmpty, } from './zone-empty-behavior.js';
 import { resolveAdjacentZoneContentGeometry, resolvePrimaryZoneContentGeometry, zoneContentGeometryToBoundaryClassName, zoneContentGeometryToPolicyOverride, } from './zone-content-geometry.js';
-import { primaryDestinationDeclarationIsKnown } from './primary-destination-layout.js';
+import { primaryDestinationDeclarationIsKnown, resolveHomeCompositeDestination } from './primary-destination-layout.js';
 const logger = LoggerFrontendService.getLogger();
 const logDebug = logger.debugByType('NavigationContentAreas');
 logger.setDebugTypeLogging('NavigationContentAreas', false);
@@ -59,8 +67,11 @@ const NO_ENTRY_KEY = 'no-entry';
  * Generate a unique key for navigation content to force React re-renders
  * when content changes even if the component type stays the same.
  * Uses NavigationContentType enum values as key prefixes for consistency.
+ *
+ * Exported for its own test: this is a pure function whose whole effect is whether React PRESERVES
+ * or DESTROYS a mounted surface, and that is not observable from anything else in this module.
  */
-function getContentKey(content, entryId) {
+export function getContentKey(content, entryId) {
     const suffix = entryId || NO_ENTRY_KEY;
     const serializeContextResourceIdentifiers = (contextResourceIdentifiers) => Object.entries(contextResourceIdentifiers ?? {})
         .map(([key, value]) => `${key}:${value}`)
@@ -87,8 +98,39 @@ function getContentKey(content, entryId) {
             return `${content.contentType}-${content.resourceContext.resourceType}-${content.resourceContext.operationIdentifier}-${suffix}`;
         case NavigationContentType.ERROR_MODAL:
             return `${content.contentType}-${content.errorType}-${suffix}`;
-        default:
-            return `unknown-${entryId || Date.now()}`;
+        /*
+         * The settings hub is ONE destination, so its key carries NEITHER the entry id NOR the open
+         * 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.
+         *
+         * 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
+         * `generateStackEntryId()` on every section change, and the reducer stores it as the entry's
+         * `id` — so the key changed on every click in the rail and React DESTROYED and rebuilt the whole
+         * hub. The visible cost was the rail's own scroll position, which is DOM state on the `<nav>`
+         * element: with thirty destinations the list scrolls, and picking anything below the fold
+         * snapped it back to the top. The reconciliation the component was built for never ran, because
+         * there was never anything left to reconcile.
+         *
+         * Keying on the content type alone is safe because only the overlay TOP renders, and the
+         * reconciler's own contract is that at most one hub sits there (it REPLACEs rather than pushes
+         * when the top is already a hub).
+         */
+        case NavigationContentType.SETTINGS_HUB:
+            return content.contentType;
+        default: {
+            /*
+             * Total over `NavigationContentType`. The old fallback returned `unknown-${Date.now()}` when
+             * no entry id was supplied — a different key on every render, i.e. a remount loop — and it is
+             * what silently swallowed SETTINGS_HUB for as long as that case was missing. A member added
+             * without a case now fails to compile here instead of inheriting that behaviour.
+             */
+            const unhandledContent = content;
+            return `unknown-${unhandledContent.contentType}-${suffix}`;
+        }
     }
 }
 /**
@@ -145,7 +187,7 @@ export const NavigationContentRenderer = ({ content, zone, initiator, entryId })
         }
     }
     if (content.contentType === NavigationContentType.SETTINGS_HUB) {
-        return _jsx(SettingsHub, { sectionRef: content.sectionRef }, contentKey);
+        return _jsx(SettingsHub, { sectionRef: content.sectionRef, subTabRef: content.subTabRef }, contentKey);
     }
     if (content.contentType === NavigationContentType.INLINE_CREATE) {
         const resourceContext = {
@@ -158,7 +200,8 @@ export const NavigationContentRenderer = ({ content, zone, initiator, entryId })
         return (_jsx(ResourceOperationSurface, { resourceContext: resourceContext, navigationZone: zone, navigationInitiator: initiator }, contentKey));
     }
     if (content.contentType === NavigationContentType.ERROR_MODAL) {
-        return (_jsxs("div", { className: "space-y-element", children: [_jsx("div", { className: "text-base font-semibold", children: content.errorType }), _jsx("div", { className: "text-sm text-muted-foreground whitespace-pre-wrap", children: content.message }), content.context && (_jsx("pre", { className: "text-xs bg-muted p-card-sm rounded overflow-auto max-h-40", children: JSON.stringify(content.context, null, 2) }))] }, contentKey));
+        // Localized message only — never the raw type, reference or request context (#1159).
+        return _jsx(ErrorModalContent, { wildoError: content.wildoError }, contentKey);
     }
     return null;
 };
@@ -311,6 +354,11 @@ export function splitDividerOrientationToPanelGroupDirection(orientation) {
  */
 const FALLBACK_REFERENCE_WIDTH_PX = 1280;
 const MIN_PRIMARY_PERCENT = 25;
+/**
+ * The floor of a resizable side panel whose zone declares no `minWidth` — the same share primary is
+ * guaranteed, so neither side of a split can be dragged out of sight unless a zone asks for less.
+ */
+const UNDECLARED_SIDE_PANEL_FLOOR_PERCENT = MIN_PRIMARY_PERCENT;
 /**
  * Convert pixel width to percentage of actual container width.
  * Clamps between 5% and 70% to prevent degenerate layouts.
@@ -342,16 +390,6 @@ function useContainerWidth(ref) {
     }, [ref]);
     return width;
 }
-/**
- * Compute percentage-based panel sizes from the v3 SplitConfig and per-zone constraints.
- *
- * Uses `split.ratio` for primary↔secondary proportions and `split.companion?.ratio`
- * for companion proportions. Drag constraints come from per-zone `minWidth`/`maxWidth`
- * on ZoneConfig. Resizability is controlled by `split.resizable` and
- * `split.companion?.resizable`.
- *
- * PRIMARY always gets the remaining space (100% - sum of side panels).
- */
 /**
  * Reconcile a panel's ratio-derived default with its pixel-derived bounds.
  *
@@ -368,6 +406,197 @@ function useContainerWidth(ref) {
 function clampDefaultWithinBounds(defaultSize, minSize, maxSize) {
     return Math.min(Math.max(defaultSize, Math.min(minSize, maxSize)), maxSize);
 }
+/**
+ * The drag range of a side panel, in percent of the container.
+ *
+ * A NON-resizable panel has no drag, so both bounds collapse onto its default — that is what keeps a
+ * static split from rendering a handle that looks draggable.
+ *
+ * A RESIZABLE panel takes each bound from the zone's declared pixel width, and a bound the zone does
+ * NOT declare is left OPEN rather than frozen: the ceiling is whatever leaves primary its
+ * `MIN_PRIMARY_PERCENT`, and the floor is `UNDECLARED_SIDE_PANEL_FLOOR_PERCENT` — or the panel's own
+ * declared ratio share when that is smaller, so the floor never opens a pane wider than its author
+ * wrote (a `[85, 15]` companion opens at 15%, not 25%).
+ *
+ * Freezing an undeclared bound onto the default — which this used to do for both sides alike —
+ * rendered an enabled handle whose `aria-valuemin`, `aria-valuemax` and `aria-valuenow` were all
+ * equal, so a split declaring `resizable: true` with no `minWidth`/`maxWidth` (Wonder CRM's deal pane)
+ * could not be dragged at all (measured in a browser, issue #952).
+ *
+ * The floor is NOT 0, and that was measured too: with a 0 floor the same pane dragged inward to
+ * 0.2% of the width — 2px, the handle pinned to the window edge — while it still owned `?pane=` and
+ * still rendered the deal. The autosaved layout then reopened EVERY later pane at 0.2%, a newly
+ * clicked record loaded into a panel nobody could see, and the only way back was finding a 2px handle.
+ */
+function resolveSidePanelBounds(input) {
+    if (!input.isResizable)
+        return { minSize: input.defaultSize, maxSize: input.defaultSize };
+    const maxSize = input.maxWidthPx ? pxToPercent(input.maxWidthPx, input.containerWidth) : 100 - MIN_PRIMARY_PERCENT;
+    const floor = input.minWidthPx
+        ? pxToPercent(input.minWidthPx, input.containerWidth)
+        : Math.min(UNDECLARED_SIDE_PANEL_FLOOR_PERCENT, input.defaultSize);
+    /*
+     * A floor above the ceiling is handed to the panel library as a contradiction, exactly like a default
+     * below its floor. It happens two ways: a declared `maxWidth` narrower than the undeclared 25% floor
+     * (200px of a 1600px window is 13%), and an author declaring `minWidth` above `maxWidth`. The CEILING
+     * wins, as it already does for the default in `clampDefaultWithinBounds` — so one rule decides both (#1013).
+     */
+    return { minSize: Math.min(floor, maxSize), maxSize };
+}
+/** Tolerance for comparing percentages produced by floating-point scaling. */
+const PERCENT_EPSILON = 1e-9;
+/**
+ * Shrink the side panels' defaults until they fit beside primary's `MIN_PRIMARY_PERCENT` (#1013).
+ *
+ * Runs only when the shown side panels' defaults together exceed `budget` (`100 − MIN_PRIMARY_PERCENT`).
+ * Mutates the panels in place and leaves their defaults as WHOLE percents summing to exactly `budget`, so
+ * primary — `100 − Σ defaults` — opens at exactly its minimum and absorbs no fraction.
+ *
+ * ## Each panel's floor in this fit
+ *
+ * - **resizable** → its drag floor, `minSize`. Scaling a default below it hands `react-resizable-panels` a
+ *   `defaultSize < minSize` contradiction, which the library then "corrects" on its own terms — the layout
+ *   that opens is not the computed one. That was the defect: a `[30,70]` secondary beside a `[70,30]`
+ *   companion scaled to 53 + 23, the 23 below its 25% floor and the sides totalling 101% with primary.
+ * - **non-resizable** → `min(UNDECLARED_SIDE_PANEL_FLOOR_PERCENT, its declared share)`, the floor a
+ *   resizable zone gets when it declares none. A static pane has no drag range, but opening one out of sight
+ *   is the same defect #952 measured on a dragged one; and a pane its author declared narrower than 25% is
+ *   never widened to reach it. Its bounds are re-frozen onto whatever default it ends at.
+ *
+ * ## The answer, in order
+ *
+ * 1. **The floors fit** (the normal case) — every panel shrinks in PROPORTION to its declared share, and a
+ *    panel that would cross its floor stops AT it while the others shrink further (water-filling: pinning a
+ *    panel only lowers the scale left for the rest, so the loop terminates within one pass per panel). No
+ *    panel is ever scaled above its default — short of a fractional floor rounding up to its whole percent,
+ *    which stays under a ceiling that is itself whole — so no ceiling can be crossed.
+ * 2. **The floors do not fit** — two resizable panes whose floors together exceed `budget` (a 70% declared
+ *    `minWidth` beside a 25% floor). The FLOORS yield, each by the same fraction, and each panel's `minSize`
+ *    is lowered to the default it opens at, because that is now the smallest share the layout can give it.
+ *
+ * ## Why the floors yield, and not primary or the configuration
+ *
+ * - **Not primary.** Primary renders with `minSize={MIN_PRIMARY_PERCENT}`, so a primary default below it is
+ *   the same contradiction moved one panel over — and primary holds the page the panes were opened FROM.
+ * - **Not a configuration-time refusal or warning.** Floors are declared in PIXELS and become percentages of
+ *   a container measured at runtime, so whether they fit is a property of the WINDOW, not the declaration:
+ *   two 380px floors fit at 1600px and do not at 900px. No declaration is infeasible at every width either —
+ *   `pxToPercent` clamps a declared floor to ≥5% and an undeclared one is ≤25% — so a configuration check
+ *   would have nothing to refuse, and a warning would fire only on narrow windows, at render time.
+ *   Proportional yielding keeps the authors' RELATIVE intent (the pane asking for more still gets more).
+ *
+ * ## Rounding
+ *
+ * Largest remainder (Hamilton): every exact share is floored, and the points still owed to `budget` go to the
+ * largest fractions, earliest panel first on a tie. The exact shares already sum to `budget`, so at most one
+ * point is added per panel and only where a fraction exists — which keeps a panel inside integer bounds it
+ * was inside before rounding. Floors and ceilings are therefore taken to whole percents first (a floor up,
+ * a ceiling down); both already are, except a non-integer declared `ratio`, which moves by under a point.
+ * `Math.round` on each panel independently is what produced 53 + 23.
+ */
+function fitSidePanelsBesidePrimary(panels, budget) {
+    const declared = panels.map((panel) => panel.defaultSize);
+    const ceilings = panels.map((panel) => (panel.frozen ? Number.POSITIVE_INFINITY : Math.floor(panel.maxSize + PERCENT_EPSILON)));
+    const floors = panels.map((panel, index) => Math.min(Math.ceil((panel.frozen ? Math.min(UNDECLARED_SIDE_PANEL_FLOOR_PERCENT, panel.defaultSize) : panel.minSize) - PERCENT_EPSILON), ceilings[index]));
+    const totalFloor = floors.reduce((sum, floor) => sum + floor, 0);
+    let exact;
+    const floorsYield = totalFloor > budget;
+    if (floorsYield) {
+        exact = floors.map((floor) => (floor * budget) / totalFloor);
+    }
+    else {
+        const pinnedAtFloor = panels.map(() => false);
+        for (;;) {
+            const room = budget - floors.reduce((sum, floor, index) => sum + (pinnedAtFloor[index] ? floor : 0), 0);
+            const wanted = declared.reduce((sum, share, index) => sum + (pinnedAtFloor[index] ? 0 : share), 0);
+            const scale = wanted > 0 ? room / wanted : 0;
+            const crossing = declared.flatMap((share, index) => (!pinnedAtFloor[index] && share * scale < floors[index] - PERCENT_EPSILON ? [index] : []));
+            if (crossing.length === 0) {
+                exact = declared.map((share, index) => (pinnedAtFloor[index] ? floors[index] : share * scale));
+                break;
+            }
+            for (const index of crossing)
+                pinnedAtFloor[index] = true;
+        }
+    }
+    const rounded = exact.map((share) => Math.floor(share + PERCENT_EPSILON));
+    const owed = Math.round(exact.reduce((sum, share) => sum + share, 0)) - rounded.reduce((sum, share) => sum + share, 0);
+    const byLargestFraction = exact
+        .map((share, index) => ({ index, fraction: share - rounded[index] }))
+        .sort((a, b) => b.fraction - a.fraction || a.index - b.index);
+    for (let point = 0; point < owed; point += 1)
+        rounded[byLargestFraction[point].index] += 1;
+    panels.forEach((panel, index) => {
+        panel.defaultSize = rounded[index];
+        if (panel.frozen) {
+            panel.minSize = panel.defaultSize;
+            panel.maxSize = panel.defaultSize;
+        }
+        else if (floorsYield) {
+            panel.minSize = panel.defaultSize;
+        }
+    });
+}
+/**
+ * The three structures the content area can render. Each nests primary's content at a different
+ * depth, so moving between them REMOUNTS primary — which is why the choice is a function of the
+ * layout's DECLARATION and never of which panes are currently shown.
+ */
+export var ContentAreaRenderBranch;
+(function (ContentAreaRenderBranch) {
+    /** Mobile, or a layout declaring no adjacent zone: the container itself scrolls. */
+    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";
+    /** An adjacent zone is declared resizable — chosen even while that pane is collapsed. */
+    ContentAreaRenderBranch["MULTI_ZONE_RESIZABLE"] = "multi-zone-resizable";
+})(ContentAreaRenderBranch || (ContentAreaRenderBranch = {}));
+/**
+ * Choose the content area's render branch from the layout DECLARATION alone.
+ *
+ * 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.
+ */
+export function resolveContentAreaRenderBranch(input) {
+    if (input.isMobile || (!input.hasSecondaryZone && !input.hasCompanionZone)) {
+        return ContentAreaRenderBranch.SINGLE_ZONE;
+    }
+    const resizable = (input.hasSecondaryZone && !!input.split?.resizable)
+        || (input.hasCompanionZone && !!input.split?.companion?.resizable);
+    return resizable ? ContentAreaRenderBranch.MULTI_ZONE_RESIZABLE : ContentAreaRenderBranch.MULTI_ZONE_STATIC;
+}
+/**
+ * Which columns of the STATIC multi-zone layout draw a trailing divider.
+ *
+ * A divider separates a column from the column AFTER it, so it is drawn when that next column is
+ * SHOWN — never merely because it is declared. The static branch is chosen on DECLARATION (see
+ * `resolveContentAreaRenderBranch`), which means it routinely renders with every adjacent zone collapsed: a layout
+ * declaring `secondary` with `onEmpty: COLLAPSE` shows primary alone, full width, on every page that
+ * has nothing open beside it. Keying the divider on declaration drew a 1px border flush against the
+ * window edge there (issue #640), and the secondary column had the same defect one level over
+ * whenever a companion zone was declared and hidden.
+ *
+ * Exported and pure so the rule is pinned without the provider stack a render would need.
+ */
+export function staticZoneDividers(input) {
+    return {
+        primary: input.showSecondary || input.showCompanion,
+        // A hidden column draws nothing, so its divider is false rather than "whatever is beside it".
+        secondary: input.showSecondary && input.showCompanion,
+    };
+}
+/**
+ * Compute percentage-based panel sizes from the v3 SplitConfig and per-zone constraints.
+ *
+ * Uses `split.ratio` for primary↔secondary proportions and `split.companion?.ratio`
+ * for companion proportions. Resizability is controlled by `split.resizable` and
+ * `split.companion?.resizable`. Drag bounds come from `resolveSidePanelBounds`: a declared per-zone
+ * `minWidth`/`maxWidth`, or — on a resizable split — the undeclared floor and ceiling it documents.
+ * No side panel is collapsible (see the secondary zone below).
+ *
+ * PRIMARY always gets the remaining space (100% - sum of side panels).
+ */
 export function computePanelSizes(zones, split, showSecondary, showCompanion, containerWidth) {
     let usedPercent = 0;
     let secondary;
@@ -378,9 +607,13 @@ export function computePanelSizes(zones, split, showSecondary, showCompanion, co
         const defaultSize = ratio[1];
         usedPercent += defaultSize;
         const minPx = zone?.minWidth;
-        const maxPx = zone?.maxWidth;
-        const secondaryMin = isResizable && minPx ? pxToPercent(minPx, containerWidth) : defaultSize;
-        const secondaryMax = isResizable && maxPx ? pxToPercent(maxPx, containerWidth) : defaultSize;
+        const { minSize: secondaryMin, maxSize: secondaryMax } = resolveSidePanelBounds({
+            isResizable,
+            defaultSize,
+            minWidthPx: minPx,
+            maxWidthPx: zone?.maxWidth,
+            containerWidth,
+        });
         const secondaryDefault = clampDefaultWithinBounds(defaultSize, secondaryMin, secondaryMax);
         usedPercent += secondaryDefault - defaultSize;
         secondary = {
@@ -388,8 +621,8 @@ export function computePanelSizes(zones, split, showSecondary, showCompanion, co
             minSize: secondaryMin,
             maxSize: secondaryMax,
             /*
-             * A zone that declares a MINIMUM WIDTH is asking for a FLOOR, so it must not also be
-             * collapsible — `react-resizable-panels` treats `minSize` on a collapsible panel as a SNAP
+             * HISTORY (the current rule is the last paragraph): a zone that declares a MINIMUM WIDTH is asking
+             * for a FLOOR, so it must not also be collapsible —`react-resizable-panels` treats `minSize` on a collapsible panel as a SNAP
              * THRESHOLD rather than a limit, and a drag past it jumps to `collapsedSize` instead of
              * stopping.
              *
@@ -402,11 +635,14 @@ export function computePanelSizes(zones, split, showSecondary, showCompanion, co
              * content and still owns the URL, it is merely invisible — which is not `onEmpty`, and not
              * something a reader can undo except by finding the handle again.
              *
-             * A zone that declares no minimum keeps drag-to-collapse, which is a reasonable affordance when
-             * no floor was asked for.
+             * NO zone is collapsible any more. A zone that declared no minimum used to keep drag-to-collapse
+             * as "a reasonable affordance when no floor was asked for"; measured in a browser (#952), a pane
+             * dragged out of sight kept owning `?pane=`, kept rendering its record, and — through the
+             * autosaved layout — reopened invisible on every later open. An undeclared minimum is now a
+             * floor too (`UNDECLARED_SIDE_PANEL_FLOOR_PERCENT`), so the snap-past-the-floor trap above would
+             * apply to it as well. Closing a pane is navigation (Back, or a transition), never a drag. The
+             * panels are therefore rendered without `collapsible` at all (the library's default is false).
              */
-            collapsible: isResizable && !minPx,
-            collapsedSize: 0,
             frozen: !isResizable,
         };
     }
@@ -419,41 +655,31 @@ export function computePanelSizes(zones, split, showSecondary, showCompanion, co
         const defaultSize = ratio[1];
         usedPercent += defaultSize;
         const minPx = zone?.minWidth;
-        const maxPx = zone?.maxWidth;
-        const companionMin = isResizable && minPx ? pxToPercent(minPx, containerWidth) : defaultSize;
-        const companionMax = isResizable && maxPx ? pxToPercent(maxPx, containerWidth) : defaultSize;
+        const { minSize: companionMin, maxSize: companionMax } = resolveSidePanelBounds({
+            isResizable,
+            defaultSize,
+            minWidthPx: minPx,
+            maxWidthPx: zone?.maxWidth,
+            containerWidth,
+        });
         const companionDefault = clampDefaultWithinBounds(defaultSize, companionMin, companionMax);
         usedPercent += companionDefault - defaultSize;
         companion = {
             defaultSize: companionDefault,
             minSize: companionMin,
             maxSize: companionMax,
-            /* See the secondary zone above: a declared minimum is a floor, and a floor cannot collapse. */
-            collapsible: isResizable && !minPx,
-            collapsedSize: 0,
+            /* Not collapsible either — see the secondary zone above. */
             frozen: !isResizable,
         };
     }
     const maxSidePercent = 100 - MIN_PRIMARY_PERCENT;
+    const shownSides = [secondary, companion].filter((side) => side !== undefined);
     if (usedPercent > maxSidePercent) {
-        const scale = maxSidePercent / usedPercent;
-        if (secondary) {
-            secondary.defaultSize = Math.round(secondary.defaultSize * scale);
-            if (secondary.frozen) {
-                secondary.minSize = secondary.defaultSize;
-                secondary.maxSize = secondary.defaultSize;
-            }
-        }
-        if (companion) {
-            companion.defaultSize = Math.round(companion.defaultSize * scale);
-            if (companion.frozen) {
-                companion.minSize = companion.defaultSize;
-                companion.maxSize = companion.defaultSize;
-            }
-        }
-        usedPercent = maxSidePercent;
+        // Floors, rounding and the unsatisfiable case are all decided there (#1013).
+        fitSidePanelsBesidePrimary(shownSides, maxSidePercent);
     }
-    const primaryDefault = 100 - usedPercent;
+    // From the defaults the panels actually ended at, so primary absorbs every clamp and every rounding point.
+    const primaryDefault = 100 - shownSides.reduce((sum, side) => sum + side.defaultSize, 0);
     return { primaryDefault, secondary, companion };
 }
 /**
@@ -502,17 +728,12 @@ function ZoneContentWidthBoundary({ children, geometry }) {
  * `isReady` gates the text rather than the element: rendering the box immediately keeps the panel
  * geometry stable while the bundle resolves, which is the whole promise of EMPTY_STATE.
  *
- * The label resolves through `resolveComponentLabel`, NOT `tComponent` directly. `tComponent` returns
- * the KEY PATH on a miss — deliberately, so a missing label is visible in development — and rendering
- * that straight into the DOM puts `components.APP_LAYOUTS_MAIN_CONTAINER.zoneEmptyState` on the
- * reader's screen. That is exactly the defect `component-label-resolution.utils` was written for after
- * it shipped on the 404 page, and this was the eleventh site to make it: a brand-new engine label has
- * no translation in any application's bundle until the labelling pipeline regenerates, so the miss is
- * the DEFAULT state rather than an edge case.
- *
- * An empty pane until the label lands is the correct behaviour, not a compromise: that module's
- * standing constraint is that missing-key fallback belongs in the i18n runtime, where it can use the
- * configured fallback language, never in a component-local English literal.
+ * A brand-new engine label has no translation in any application's bundle until the labelling
+ * pipeline regenerates, so a miss is the DEFAULT state rather than an edge case — and it renders as
+ * `components.APP_LAYOUTS_MAIN_CONTAINER.zoneEmptyState`, the key somebody has to generate (#1414).
+ * This comment used to argue the opposite, that an empty pane until the label lands was correct; a
+ * pane that says nothing also says nothing about the label being owed. Never a component-local
+ * English literal either way.
  */
 const ZoneEmptyStatePlaceholder = () => {
     const { tComponent, isReady } = useI18n({ component: FrontendComponentType.APP_LAYOUTS_MAIN_CONTAINER });
@@ -525,6 +746,73 @@ 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 }) }));
 };
+/**
+ * The one control of zone EMPHASIS — "give this pane the whole content area", and its inverse.
+ *
+ * Drawn by the content areas rather than by whatever the pane holds, because emphasis is a property
+ * of the ZONE: a resource read, a composite view and a chart in the secondary zone all want the same
+ * gesture, and a control each of them re-implemented would be three controls that drift. It sits
+ * STICKY at the pane's top end corner so it is reachable at any scroll depth, and it is the same
+ * element in both states — the glyph and the word flip, the position does not, so the restore is
+ * where the reader's pointer already is.
+ *
+ * The word is the accessible name and the tooltip; the glyph is what is drawn. Until the labelling
+ * pipeline generates it, both carry the label's KEY (#1414) — an icon button with no accessible name
+ * 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 { tComponent, isReady } = useI18n({ component: FrontendComponentType.APP_LAYOUTS_MAIN_CONTAINER });
+    const { renderIcon } = useIconRegistry();
+    const label = isReady
+        ? resolveComponentLabel({
+            tComponent,
+            componentType: FrontendComponentType.APP_LAYOUTS_MAIN_CONTAINER,
+            key: emphasized ? 'zoneRestore' : 'zoneExpand',
+        })
+        : '';
+    // 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 }) }));
+};
+/**
+ * The control that CLOSES an adjacent pane, drawn beside the emphasis toggle.
+ *
+ * ## Offered only where closing gives something back
+ *
+ * A zone declaring `ZoneEmptyBehavior.COLLAPSE` yields its width the moment it empties — that is the
+ * "optional pane" shape: primary is full width until something splits into the pane, and narrows
+ * while the pane is open. Closing such a pane is a real gesture with a visible result, so it earns a
+ * control. A zone declaring `EMPTY_STATE` stays on screen when empty by its own declaration, so
+ * "closing" it would swap a record for a placeholder and return no room; offering the control there
+ * would be offering a button that appears to do nothing. The layout's own vocabulary decides, which
+ * is why this is derived rather than a second flag an application has to keep in step.
+ *
+ * It sits in the same sticky top-end row as {@link ZoneEmphasisToggle} and to the right of it, so the
+ * destructive-to-the-layout gesture is not where the reader's pointer lands for the reversible one.
+ *
+ * Distinct from `goBack`, which pops ONE entry: see `dismissZone` in the controller.
+ */
+const ZoneDismissControl = ({ onDismiss }) => {
+    const { tComponent, isReady } = useI18n({ component: FrontendComponentType.APP_LAYOUTS_MAIN_CONTAINER });
+    const { renderIcon } = useIconRegistry();
+    const label = isReady
+        ? resolveComponentLabel({
+            tComponent,
+            componentType: FrontendComponentType.APP_LAYOUTS_MAIN_CONTAINER,
+            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 }) }));
+};
+/**
+ * The sticky chrome row an adjacent zone carries: emphasis always, dismiss only where the layout
+ * collapses the zone when it is empty.
+ *
+ * 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 })] }));
 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`
@@ -541,10 +829,26 @@ 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 } = useNavigationState();
-    const { navigationLayout: resolvedNavigationLayout, UIConfig, shellAppearance, compositeViews } = useUI();
+    const { isZoneVisible, getZoneDepth, getTopContent, setFocusedZone, emphasizedZone, setEmphasizedZone } = 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 { navigationLayout: resolvedNavigationLayout, UIConfig, shellAppearance, compositeViews, homeDefinition } = useUI();
+    const location = useLocation();
     const containerRef = useRef(null);
     const containerWidth = useContainerWidth(containerRef);
+    /*
+     * Publish the measured width so the policy resolver can ask whether a SPLIT FITS before opening
+     * one. It is measured here — this component owns the container — and needed there, and no
+     * breakpoint can stand in for it: the content area is narrower than the window by the sidebar and
+     * by any pane already open. Written through an effect rather than during render because it is a
+     * measurement of the DOM this render produced.
+     */
+    useEffect(() => {
+        setContentAreaWidth(containerWidth > 0 ? containerWidth : undefined);
+    }, [containerWidth, setContentAreaWidth]);
     const isMobile = UIConfig?.currentBreakpoint === ViewportBreakpoint.MOBILE;
     const zones = resolvedNavigationLayout?.zones;
     const split = resolvedNavigationLayout?.split;
@@ -571,7 +875,27 @@ export const NavigationContentAreas = ({ routerChildren }) => {
      * selected. Precedence is destination → zone → COLLAPSE, so a layout authoring neither behaves
      * exactly as it did before this existed.
      */
-    const primaryTopContent = getTopContent(NavigationZoneName.PRIMARY);
+    /*
+     * A COMPOSITE HOME is a destination primary's STACK never receives (#1278).
+     *
+     * `homeDefinition.compositeViewReference` renders its view in place at `/`, as the router's own
+     * children, so `getTopContent(PRIMARY)` answers for a stack the home never wrote to — and every
+     * layout declaration that view carries (`adjacentZoneOnEmpty`, and the two geometry fields) was
+     * therefore unreadable on the one URL the application opens at. The fallback names the destination
+     * that is genuinely there; `resolveHomeCompositeDestination` carries the measurement and the reason
+     * it is scoped to the root path.
+     */
+    const primaryStackTop = getTopContent(NavigationZoneName.PRIMARY);
+    /*
+     * OVERRIDE, not a fallback — measured: the stack top at `/` is an ENGINE_PAGE, so a `??` here
+     * changed nothing. `resolveHomeCompositeDestination` carries why, and refuses to displace any
+     * destination that is not the home's own engine page.
+     */
+    const primaryTopContent = resolveHomeCompositeDestination({
+        homeCompositeViewRef: homeDefinition?.compositeViewReference,
+        isAppRootPath: location.pathname === '/',
+        primaryStackTop,
+    }) ?? primaryStackTop;
     const destinationOnEmptyOverride = useMemo(() => resolvePrimaryDestinationAdjacentZoneOnEmpty({ primaryContent: primaryTopContent, compositeViews }), [primaryTopContent, compositeViews]);
     /*
      * How much of PRIMARY the current destination occupies (#176) — read from the same declaration the
@@ -636,23 +960,98 @@ export const NavigationContentAreas = ({ routerChildren }) => {
         && (secondaryHasContent || (primaryDestinationKnown && zoneOccupiesSpaceWhenEmpty(secondaryOnEmpty)));
     const showCompanion = !isMobile && hasCompanionZone
         && (companionHasContent || (primaryDestinationKnown && zoneOccupiesSpaceWhenEmpty(companionOnEmpty)));
-    const anyMultiZone = hasSecondaryZone || hasCompanionZone;
-    const isResizable = !isMobile && ((showSecondary && !!split?.resizable) ||
-        (showCompanion && !!split?.companion?.resizable));
+    /*
+     * BOTH branch decisions key on what the layout DECLARES, never on whether a pane is currently shown.
+     *
+     * The three branches nest primary's content at different depths (single-zone: container → boundary;
+     * static: container → column → boundary; resizable: container → group → panel → column → boundary).
+     * React reconciles by position and type, so a branch change as a pane opens or closes REMOUNTS
+     * primary's whole content tree — its form state, its scroll position, every fetch it owns.
+     *
+     * The resizable choice used to require the pane to be SHOWN. On Wonder CRM — `resizable: true` with a
+     * `COLLAPSE` secondary, the one layout that declares both — every page therefore rendered the static
+     * branch until a deal opened beside it, and the opening swapped to the resizable branch and remounted
+     * the dashboard the deal was opened from (found while fixing #640). The resizable branch renders
+     * correctly with primary alone: `computePanelSizes` gives it 100%, and the side panels carry the
+     * `id` + `order` that `react-resizable-panels` requires of conditionally rendered panels.
+     *
+     * Structure follows the declaration; only what is drawn follows what is shown — the side panels
+     * themselves, and the static branch's dividers (`staticZoneDividers`). The choice is
+     * `resolveContentAreaRenderBranch`.
+     */
+    const renderBranch = resolveContentAreaRenderBranch({ isMobile, hasSecondaryZone, hasCompanionZone, split });
     const focusPrimary = useCallback(() => setFocusedZone(NavigationZoneName.PRIMARY), [setFocusedZone]);
     const focusSecondary = useCallback(() => setFocusedZone(NavigationZoneName.SECONDARY), [setFocusedZone]);
     const focusCompanion = useCallback(() => setFocusedZone(NavigationZoneName.COMPANION), [setFocusedZone]);
+    /*
+     * ZONE EMPHASIS — an adjacent pane given the whole content area (`NavigationContextType.emphasizedZone`).
+     *
+     * Re-derived every render from what is actually shown, so a request the layout cannot honour right
+     * now (mobile, an emptied pane) yields the area back without touching the request; the pure rule
+     * is `resolveEmphasizedZone`. Honoured by HIDING the other structural zones in place rather than by
+     * rendering a different tree: the panel group, its ids and its persisted layout survive, and so
+     * does every zone's mounted content — a reader who expands a pane and restores it finds the list
+     * exactly where it was, with nothing refetched. A hidden flex item takes no room, so the remaining
+     * panel fills the group whatever its declared size.
+     */
+    const emphasized = resolveEmphasizedZone({
+        requested: emphasizedZone,
+        isMobile,
+        secondaryShown: showSecondary,
+        companionShown: showCompanion,
+    });
+    const overlayOpen = getZoneDepth(NavigationZone.OVERLAY) > 0;
+    useEffect(() => {
+        if (emphasized === null)
+            return undefined;
+        const onKeyDown = (event) => {
+            if (!escapeRestoresEmphasis({ key: event.key, emphasized: true, overlayOpen, target: event.target }))
+                return;
+            setEmphasizedZone(null);
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, [emphasized, overlayOpen, setEmphasizedZone]);
+    const toggleSecondaryEmphasis = useCallback(() => setEmphasizedZone(emphasized === NavigationZoneName.SECONDARY ? null : NavigationZoneName.SECONDARY), [emphasized, setEmphasizedZone]);
+    const toggleCompanionEmphasis = useCallback(() => setEmphasizedZone(emphasized === NavigationZoneName.COMPANION ? null : NavigationZoneName.COMPANION), [emphasized, setEmphasizedZone]);
+    /*
+     * ─── DISMISSING a pane ──────────────────────────────────────────────────────────────────────────
+     *
+     * Offered where, and only where, closing the pane gives the width back — a zone whose resolved
+     * empty behavior is COLLAPSE. The resolution is the SAME one `showSecondary`/`showCompanion` read
+     * two dozen lines above (`zoneOccupiesSpaceWhenEmpty` is its inverse by construction), so the
+     * control cannot appear on a pane that would stay put nor be withheld from one that would go.
+     *
+     * Content is the second condition and it is not redundant with the zone being SHOWN: an
+     * EMPTY_STATE zone is shown while empty, and a COLLAPSE zone is only ever shown with content —
+     * but reading the content directly is what keeps the control off a placeholder if that ever
+     * changes. Emphasis is deliberately NOT a condition: closing an emphasized pane is the fastest way
+     * back to the list, and hiding the control there would strand the reader on the toggle.
+     */
+    const dismissSecondary = useCallback(() => {
+        setEmphasizedZone(null);
+        dismissZone(NavigationZoneName.SECONDARY);
+    }, [dismissZone, setEmphasizedZone]);
+    const dismissCompanion = useCallback(() => {
+        setEmphasizedZone(null);
+        dismissZone(NavigationZoneName.COMPANION);
+    }, [dismissZone, setEmphasizedZone]);
+    const secondaryIsDismissable = zoneIsDismissable({ hasContent: secondaryHasContent, behavior: secondaryOnEmpty });
+    const companionIsDismissable = zoneIsDismissable({ hasContent: companionHasContent, behavior: companionOnEmpty });
+    const primaryHidden = emphasized !== null;
+    const secondaryHidden = emphasized !== null && emphasized !== NavigationZoneName.SECONDARY;
+    const companionHidden = emphasized !== null && emphasized !== NavigationZoneName.COMPANION;
     const panelSizes = useMemo(() => {
         if (!zones)
             return null;
         return computePanelSizes(zones, split, showSecondary, showCompanion, containerWidth);
     }, [zones, split, showSecondary, showCompanion, containerWidth]);
     // ── Single-zone layout (mobile or no side zones) ──
-    if (!anyMultiZone || isMobile) {
+    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 }) }) }) }));
     }
     // ── Multi-zone resizable layout ──
-    if (isResizable && panelSizes) {
+    if (renderBranch === ContentAreaRenderBranch.MULTI_ZONE_RESIZABLE && panelSizes) {
         const splitDirection = splitDividerOrientationToPanelGroupDirection(split?.orientation);
         /*
          * `Surface asChild` wraps the plain container DIV, exactly as the single-zone branch above and
@@ -671,13 +1070,14 @@ 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: "h-full", 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: [_jsx(ResizableHandle, { withHandle: true, disabled: panelSizes.secondary.frozen }), _jsx(ResizablePanel, { defaultSize: panelSizes.secondary.defaultSize, minSize: panelSizes.secondary.minSize, maxSize: panelSizes.secondary.maxSize, collapsible: panelSizes.secondary.collapsible, collapsedSize: panelSizes.secondary.collapsedSize, id: "nav-secondary", order: 2, className: "h-full", children: _jsx("div", { className: "h-full overflow-auto p-container", "data-content-area": "secondary", onPointerDown: focusSecondary, children: _jsx(ZoneContentWidthBoundary, { geometry: secondaryZoneGeometry, children: _jsx(ZoneContentRenderer, { zone: NavigationZoneName.SECONDARY, emptyState: zoneEmptyStatePlaceholder }) }) }) })] })), showCompanion && panelSizes.companion && (_jsxs(_Fragment, { children: [_jsx(ResizableHandle, { withHandle: true, disabled: panelSizes.companion.frozen }), _jsx(ResizablePanel, { defaultSize: panelSizes.companion.defaultSize, minSize: panelSizes.companion.minSize, maxSize: panelSizes.companion.maxSize, collapsible: panelSizes.companion.collapsible, collapsedSize: panelSizes.companion.collapsedSize, id: "nav-companion", order: 3, className: "h-full", children: _jsx("div", { className: "h-full overflow-auto p-container", "data-content-area": "companion", onPointerDown: focusCompanion, children: _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, 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 }) })] }) })] }))] }) }) }));
     }
     // ── 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;
-    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: "flex-1 h-full border-e border-border overflow-auto p-container", "data-content-area": "primary", onPointerDown: focusPrimary, children: _jsx(ZoneContentWidthBoundary, { geometry: primaryZoneGeometry, children: _jsx(ZoneContentRenderer, { zone: NavigationZoneName.PRIMARY, fallback: routerChildren }) }) }), showSecondary && (_jsx("div", { className: `h-full overflow-auto p-container ${(hasCompanionZone || showCompanion) ? 'border-e border-border' : ''}`, style: { width: `${secondaryRatio}%` }, "data-content-area": "secondary", onPointerDown: focusSecondary, children: _jsx(ZoneContentWidthBoundary, { geometry: secondaryZoneGeometry, children: _jsx(ZoneContentRenderer, { zone: NavigationZoneName.SECONDARY, emptyState: zoneEmptyStatePlaceholder }) }) })), showCompanion && (_jsx("div", { className: "h-full overflow-auto p-container", style: { width: `${companionRatio}%` }, "data-content-area": "companion", onPointerDown: focusCompanion, children: _jsx(ZoneContentWidthBoundary, { geometry: companionZoneGeometry, children: _jsx(ZoneContentRenderer, { zone: NavigationZoneName.COMPANION, emptyState: zoneEmptyStatePlaceholder }) }) }))] }) }));
+    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 }) })] }))] }) }));
 };
 // =============================================================================
 // Unified Overlay Component
@@ -740,8 +1140,17 @@ const NavigationOverlay = () => {
         }
         closeOverlay();
     }, [closeOverlay, routerNavigate, topEntry, state.zones, getZoneState]);
+    /*
+     * The hub's width follows what the OPEN section renders — a record column at the historical width,
+     * a table wider — derived from the section's declared target rather than authored per section. The
+     * hook runs unconditionally (it must; hooks have no other order) and its result is read only for a
+     * SETTINGS_HUB top entry.
+     */
+    const visibleSettingsHub = useVisibleSettingsHubConfig();
+    const { registry: settingsRegistry } = useResourceRegistry();
+    const resolveLayoutSectionAppearance = useCallback((resourceType) => settingsRegistry.resourceConfigurations[resourceType]?.frontendConfiguration?.layout?.defaultDisplaySectionAppearance, [settingsRegistry]);
     const overlayClassName = topEntry?.content.contentType === NavigationContentType.SETTINGS_HUB
-        ? SETTINGS_HUB_NAVIGATION_OVERLAY_CLASS_NAME
+        ? getSettingsHubNavigationOverlayClassName(settingsSectionNeedsWideFrame(visibleSettingsHub.sections, topEntry.content.sectionRef ?? visibleSettingsHub.defaultSectionRef, resolveLayoutSectionAppearance))
         : getNavigationOverlayClassName(mode);
     return (_jsx(OverlayContainer, { open: isOpen, onOpenChange: handleOpenChange, title: title || undefined, titleVisuallyHidden: true, config: {
             mode,