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

package/dist/esm/components/settings/SettingsHub.js

@@ -2,23 +2,36 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * SettingsHub — the unified settings surface.
  *
- * Renders the declarative `ResolvedSettingsHubConfig` as a vertical `Tabs` rail beside a
- * content panel. Categories become labelled groups + separators rendered INSIDE
- * the `TabsList` (per the BetterStack reference) — the `Tabs` primitive stays the
- * section mechanism, so section state, keyboard roving, and `value`/
- * `onValueChange` all live on the primitive rather than a hand-rolled rail. A
- * section's `target` resolves to a framework panel, an auto-rendered resource
- * surface, a custom component, or a set of horizontal sub-tabs.
+ * Renders the declarative `ResolvedSettingsHubConfig` as a vertical NAVIGATION rail beside a
+ * content panel. Categories become labelled groups of links, each destination addressed by its own
+ * URL. A section's `target` resolves to a framework panel, an auto-rendered resource surface, a
+ * custom component, or a set of horizontal sub-tabs.
+ *
+ * The rail was a `Tabs`/`TabsList` until 2026-09-19, chosen so that section state and keyboard
+ * roving came from the primitive rather than being hand-rolled. It became navigation because a
+ * tablist switches panels WITHIN a view while these are thirty destinations that each own a URL —
+ * and the keyboard argument dissolves rather than transferring: roving tabindex is a tablist
+ * requirement, and navigation wants ordinary Tab order through links. See the rail's own comment.
+ *
+ * The SUB-TABS are still `Tabs`, correctly: Configuration/Connections inside one destination is
+ * exactly what a tablist is for.
  *
  * Mounted by `NavigationContentRenderer` for `NavigationContentType.SETTINGS_HUB`
  * (always in the overlay zone). The `sectionRef` prop pre-selects the open
  * section and is kept in sync so URL-driven section changes re-select the rail.
  */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { DisplayDirection } from '@wildo-ai/zod-decorators';
-import { CorePresetNames, FrontendComponentType } from '@wildo-ai/presets-components-models';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { ViewportBreakpoint } from '@wildo-ai/zod-decorators';
+import { CorePresetNames, FrontendComponentType, SelectableVariant, UIBehavior } from '@wildo-ai/presets-components-models';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/sections/tabs.js';
 import { Separator } from '../../components/layout/separator.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 { useUI } from '../../core/ui/useUI.js';
+import { cn } from '../../core/ui/cn.js';
 import { AppPage_SecuritySettings } from '../../components/auth/admin-config/AppPage_SecuritySettings.js';
 import { AppPage_AppearanceSettings } from './AppPage_AppearanceSettings.js';
 import { AppPage_InvitationsSettings } from './AppPage_InvitationsSettings.js';
@@ -28,9 +41,11 @@ import { AppPage_ConnectedAccountsSettings } from './AppPage_ConnectedAccountsSe
 import { ComponentRegistryService } from '../../core/components-registry/component-registry.frontend.service.js';
 import { ComponentNotInjected } from '../../core/components-registry/ComponentNotInjected.js';
 import { SettingsPanelRef, SettingsSectionTargetKind } from '../../core/config/settings-hub.frontend.schemas.js';
+import { CommonRoutePaths } from '../../core/runtime/routes.frontend.definitions.js';
 import { useVisibleSettingsHubConfig } from '../../core/config/useVisibleSettingsHubConfig.js';
 import { useI18n } from '../../core/i18n/useI18n.js';
 import { FeatureGate } from '../../core/features/FeatureGate.js';
+import { LoadingGate } from '../../core/loading/LoadingGate.js';
 import { SettingsResourceOperationPanel } from './SettingsResourceOperationPanel.js';
 // ──────────────────────────────────────────────────────────────
 // Config helpers
@@ -75,7 +90,7 @@ function SettingsEnginePanel({ panelRef }) {
             return _jsx(AppPage_ConnectedAccountsSettings, { ownerScope: ExternalProvider_Connection_OwnerScope.ORGANIZATION });
     }
 }
-function SettingsTargetRenderer({ target, resolveSubTabLabel, }) {
+function SettingsTargetRenderer({ target, resolveSubTabLabel, subTabRef, onSubTabChange, }) {
     switch (target.kind) {
         case SettingsSectionTargetKind.ENGINE_PANEL:
             return _jsx(SettingsEnginePanel, { panelRef: target.panelRef });
@@ -89,22 +104,106 @@ function SettingsTargetRenderer({ target, resolveSubTabLabel, }) {
         case SettingsSectionTargetKind.RESOURCE_OPERATION:
             return (_jsx(SettingsResourceOperationPanel, { resourceType: target.resourceType, operation: target.operation, operationVariant: target.operationVariant }));
         case SettingsSectionTargetKind.SUB_TABS:
-            return _jsx(SettingsSubTabs, { target: target, resolveSubTabLabel: resolveSubTabLabel });
+            return (_jsx(SettingsSubTabs, { target: target, resolveSubTabLabel: resolveSubTabLabel, subTabRef: subTabRef, onSubTabChange: onSubTabChange }));
     }
 }
-function SettingsSubTabs({ target, resolveSubTabLabel, }) {
-    const [active, setActive] = useState(target.subTabs[0]?.ref);
+/**
+ * The sub-tab strip inside one section.
+ *
+ * The active tab is URL-DRIVEN since 2026-09-17. It used to be `useState(target.subTabs[0]?.ref)` —
+ * local state that read nothing from the URL — so all twenty-one sub-tab panels in the shipped
+ * catalogue were unaddressable: every link to a sub-tabbed section opened its FIRST tab, and
+ * "Single sign-on → Connections" could not be sent to anybody. That contradicted the hub's own
+ * contract, which is that the URL is its single source of truth, and it made the outcome banner a
+ * connect-callback renders depend on tab ORDER rather than on the URL it returns to.
+ *
+ * A `subTabRef` the section does not declare is IGNORED rather than refused: the tab falls back to
+ * the first entry, so a stale bookmark or a hand-typed segment still opens the section instead of an
+ * error. `onSubTabChange` writes the selection back, which is what makes the strip a navigation
+ * control rather than a widget with a URL beside it.
+ */
+function SettingsSubTabs({ target, resolveSubTabLabel, subTabRef, onSubTabChange, }) {
+    const active = target.subTabs.some(subTab => subTab.ref === subTabRef)
+        ? subTabRef
+        : target.subTabs[0]?.ref;
     if (target.subTabs.length === 0)
         return null;
-    return (_jsxs(Tabs, { value: active, onValueChange: setActive, children: [_jsx(TabsList, { children: target.subTabs.map(subTab => (
+    return (_jsxs(Tabs, { value: active, onValueChange: next => onSubTabChange?.(next), children: [_jsx(TabsList, { children: target.subTabs.map(subTab => (
                 // `data-ref` is the i18n-independent automation hook (labels are
                 // runtime-translated; e2e drives must never key off them).
                 _jsx(TabsTrigger, { value: subTab.ref, "data-ref": subTab.ref, children: resolveSubTabLabel(subTab.ref, subTab.label) }, subTab.ref))) }), target.subTabs.map(subTab => (_jsx(TabsContent, { value: subTab.ref, children: _jsx(SettingsTargetRenderer, { target: subTab.target, resolveSubTabLabel: resolveSubTabLabel }) }, subTab.ref)))] }));
 }
-export function SettingsHub({ sectionRef }) {
+/**
+ * A rail item's layout classes — full-width, left-aligned, icon-tolerant.
+ *
+ * Carried here rather than reused from the tab trigger because the rail is no longer a tab: this is
+ * a navigation item and owns its own shape. Only the SELECTED treatment is shared, and that comes
+ * from the theme recipe rather than from a copied class string, so a theme change still reaches
+ * both.
+ */
+const RAIL_ITEM_CLASSES = "inline-flex w-full cursor-pointer items-center justify-start gap-1.5 whitespace-nowrap rounded-md px-card-sm py-item text-sm font-medium no-underline [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+export function SettingsHub({ sectionRef, subTabRef }) {
     const config = useVisibleSettingsHubConfig();
     const categories = useMemo(() => orderedCategories(config), [config]);
     const [active, setActive] = useState(() => resolveActiveSection(config, sectionRef));
+    const routerNavigate = useNavigate();
+    /*
+     * In-hub navigation WRITES the URL. Until 2026-09-17 it did not, at either level: the rail set
+     * local state and the sub-tab strip held its own, so the address bar kept whatever section the
+     * hub was opened at. Deep-linking IN worked and linking OUT never did — you could be looking at
+     * Administration → Single sign-on → Connections with `/settings/profile` in the address bar, and
+     * no sequence of clicks produced a URL for where you were.
+     *
+     * REPLACE rather than push, deliberately. A settings rail is a switcher, not a trail: pushing
+     * would make Back walk every section a person browsed before leaving the hub, which is the
+     * behaviour the overlay's own dismiss already owns. Replace keeps the address bar truthful and
+     * leaves Back meaning "leave settings".
+     *
+     * The overlay reconciler converges on the new URL — it keys on section AND sub-tab, so a tab
+     * switch inside one section is seen as a change rather than as already-correct. There is no loop:
+     * only a user gesture calls these, and the reconciler emits no navigation of its own.
+     */
+    // The SECTION half of this used to be `navigateToSection`, which the rail's triggers called. The
+    // rail's links now carry `to` + `replace` themselves, and `active` is driven by the URL-sync
+    // effect below — so the helper had no caller left. The SUB-TAB half stays: those really are tabs.
+    const handleSubTabChange = useCallback((nextSubTabRef) => {
+        if (!active)
+            return;
+        routerNavigate(`${CommonRoutePaths.settings}/${active}/${nextSubTabRef}`, { replace: true });
+    }, [active, routerNavigate]);
+    /*
+     * On a small screen the hub is a BACK-STACK rather than two panes.
+     *
+     * It had no responsive treatment at all before 2026-09-17 — a fixed `w-60 shrink-0` rail at every
+     * width, which is 240px of a ~375px viewport, and the rail is now thirty entries rather than
+     * sixteen. The back-stack is chosen over a drawer or a collapsed select because the panel BELOW
+     * already works this way: `SettingsSectionNavigationHost` keeps a section's own drill-ins
+     * (view → edit → back) inside the panel, so mobile becomes the same mechanism one level up
+     * instead of a second navigation concept.
+     *
+     * WHICH screen shows is the URL's business, not local state: `/settings` is the list and
+     * `/settings/:sectionRef` is a section. That falls out of the hub's own contract — the URL is its
+     * single source of truth — and it means Back, a deep link and a shared link all agree without any
+     * of them being special-cased.
+     *
+     * Both panes stay MOUNTED and only their classes change. `field-chrome-and-sections.md` Gotcha 1b
+     * records what the alternative costs: a chrome that swapped element structure across a breakpoint
+     * remounted its control and dropped a pending edit on resize. Hiding is a class here for exactly
+     * that reason.
+     */
+    const { UIConfig, getRecipe } = useUI();
+    /*
+     * The rail item's SELECTED styling comes from the theme's SELECTABLE/FILLED recipe — the same one
+     * the vertical tab trigger used, so the rail looks exactly as it did and still follows whatever a
+     * theme dresses it in. The recipe keys on `data-state`, which each link sets from `active`.
+     */
+    const railItemRecipe = getRecipe(UIBehavior.SELECTABLE, SelectableVariant.FILLED);
+    const { renderIcon } = useIconRegistry();
+    const isMobile = UIConfig?.currentBreakpoint === ViewportBreakpoint.MOBILE;
+    const mobileShowsSection = isMobile && Boolean(sectionRef);
+    const handleBackToSections = useCallback(() => {
+        routerNavigate(CommonRoutePaths.settings, { replace: true });
+    }, [routerNavigate]);
     const { tComponent, tSettingsHubCategory, tSettingsHubSection, isReady } = useI18n({
         component: FrontendComponentType.APP_LAYOUTS_SETTINGS_HUB,
     });
@@ -116,6 +215,11 @@ export function SettingsHub({ sectionRef }) {
     // category/section labels keep their config-authored `fallbackLabel` (the
     // required contract of `tSettingsHubCategory` / `tSettingsHubSection`).
     const t = useCallback((key) => tComponent(FrontendComponentType.APP_LAYOUTS_SETTINGS_HUB, key), [tComponent]);
+    /** The pushed section's own label — the mobile header's only cue for where you are. */
+    const activeSectionLabel = useMemo(() => {
+        const section = config.sections.find(candidate => candidate.ref === active);
+        return section ? tSettingsHubSection(section.ref, section.label) : undefined;
+    }, [config.sections, active, tSettingsHubSection]);
     // Keep the rail in sync with URL-driven section changes (deep-link / browser
     // nav). Keyed on `sectionRef` ALONE — deliberately not on `config` as well.
     // The gated config is derived from live signals (scope, roles, features,
@@ -129,6 +233,31 @@ export function SettingsHub({ sectionRef }) {
             return;
         setActive(previous => (previous === sectionRef ? previous : sectionRef));
     }, [sectionRef]);
+    /*
+     * Bring the OPEN section into view when it is not — and only then.
+     *
+     * The rail carries thirty destinations and scrolls, so a cold load or a deep link at a section
+     * near the bottom (`/settings/webhooks`) renders a list scrolled to the top with nothing on it
+     * marked: the one cue that says where you are is off screen, and the reader has to scroll a list
+     * of thirty to find out.
+     *
+     * `block: 'nearest'` is what makes this safe to run on every section change rather than only on
+     * mount: it is defined to move the container by the MINIMUM needed, so an item already fully
+     * visible — the ordinary case when somebody clicks the rail — is not scrolled at all. That is the
+     * whole reason it is 'nearest' and not 'center', which would yank the list on every click and
+     * replace one annoyance with another.
+     *
+     * It pairs with, and does not substitute for, the key fix in `getContentKey`: this positions the
+     * rail, that one stops the rail being rebuilt (and its scroll offset discarded) on every click.
+     * Without the key fix this would fire into a freshly mounted `<nav>` each time and merely make the
+     * reset land somewhere else.
+     */
+    const activeRailItemRef = useRef(null);
+    useEffect(() => {
+        if (!active)
+            return;
+        activeRailItemRef.current?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    }, [active]);
     // Adopt a section from the config ONLY when the current one is not (or is no
     // longer) selectable — first resolve after an async gating signal lands, or a
     // section disappearing because the user's roles/features changed. Anything
@@ -141,30 +270,48 @@ export function SettingsHub({ sectionRef }) {
         // changes is the effect above.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [config]);
-    // Gate on label readiness so the hub chrome never flashes raw key paths —
-    // copy is pipeline-owned with no inline fallback, matching the hosted panels.
-    if (!isReady)
-        return null;
-    return (
-    // `min-w-0` is REQUIRED: this is the grid item of the (fixed-width) dialog surface.
-    // Without it the item keeps its default `min-width: auto` and cannot shrink below its
-    // content's min-content width — a wide field row (e.g. a file card with a long
-    // filename, or a text input) then pushes the whole two-pane body past the dialog edge,
-    // and the dialog's `overflow-x: hidden` clips the right side of every field. `min-w-0`
-    // lets the item fit the track so the content pane (and its form) reflow within it.
-    _jsxs("div", { className: "flex h-full min-h-0 flex-col min-w-0", children: [_jsx("header", { className: "flex h-14 shrink-0 items-center border-b px-card-lg", children: _jsx("h2", { className: "text-base font-semibold tracking-tight", children: t('title') }) }), _jsxs(Tabs, { orientation: DisplayDirection.VERTICAL, value: active, onValueChange: setActive, className: "flex min-h-0 flex-1", children: [_jsx(TabsList, { "aria-label": t('sectionsNavLabel'), className: "w-60 shrink-0 overflow-y-auto border-e px-card-sm py-card", children: categories.map((category, index) => {
-                            const sections = sectionsForCategory(config, category.ref);
-                            if (sections.length === 0)
-                                return null;
-                            return (_jsxs(React.Fragment, { children: [index > 0 && _jsx(Separator, { className: "my-item" }), _jsx("div", { role: "presentation", className: "px-card-sm py-card-sm text-xs font-medium uppercase tracking-wider text-muted-foreground", children: tSettingsHubCategory(category.ref, category.label) }), sections.map(section => (
-                                    // `data-ref` = i18n-independent automation hook (see sub-tabs above).
-                                    _jsx(TabsTrigger, { value: section.ref, "data-ref": section.ref, children: tSettingsHubSection(section.ref, section.label) }, section.ref)))] }, category.ref));
-                        }) }), _jsx("div", { className: "min-w-0 flex-1 overflow-y-auto p-card-lg", children: config.sections.map(section => (_jsx(TabsContent, { value: section.ref, className: "mt-0", children: section.entitlementFeatureId ? (
-                            // Section SURVIVED because the app OFFERS this feature
-                            // (`runtimeAvailability` capability = plan-independent
-                            // `isFeatureOffered`). Render its body through the entitlement gate:
-                            // entitled → the config surface; offered-but-not-entitled → the
-                            // policy-driven upgrade/add-on prompt (never a silent disappearance).
-                            _jsx(FeatureGate, { featureId: section.entitlementFeatureId, children: _jsx(SettingsTargetRenderer, { target: section.target, resolveSubTabLabel: tSettingsHubSection }) })) : (_jsx(SettingsTargetRenderer, { target: section.target, resolveSubTabLabel: tSettingsHubSection })) }, section.ref))) })] })] }));
+    /*
+     * Gate on label readiness so the hub chrome never flashes raw key paths — copy is pipeline-owned
+     * with no inline fallback, matching the hosted panels.
+     *
+     * Through `LoadingGate` rather than `if (!isReady) return null`, which is what this was until
+     * 2026-09-17. Returning null is correct about the raw keys and wrong about everything else: the
+     * overlay is already open and mounted by the time the hub renders, so a null gave a person an
+     * empty dialog with no indication that anything was coming — and the wait got longer as the rail
+     * grew. `LoadingGate` keeps the same guarantee (children are not rendered until ready) and lets
+     * the ENCLOSING SURFACE POLICY choose the treatment, which for an overlay is to overlay the
+     * children rather than to blank them. The hub does not pick a visual here on purpose: that choice
+     * belongs to the surface it is hosted in, and hard-coding a skeleton would override a policy the
+     * design system already owns.
+     */
+    return (_jsx(LoadingGate, { readiness: [{ id: 'settings-hub-labels', isReady }], children: _jsxs("div", { className: "flex h-full min-h-0 flex-col min-w-0", children: [_jsxs("header", { className: "flex h-14 shrink-0 items-center gap-item border-b px-card-lg", children: [mobileShowsSection && (_jsx(Button, { variant: ButtonVariants_Variant.GHOST, size: ButtonSize.ICON_SM, "aria-label": t('backToSections'), onClick: handleBackToSections, children: renderIcon(StandardIconReference.BACK, { size: IconSize.SM }) })), _jsx("h2", { className: "truncate text-base font-semibold tracking-tight", children: mobileShowsSection ? activeSectionLabel ?? t('title') : t('title') })] }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsx("nav", { "aria-label": t('sectionsNavLabel'), className: cn('overflow-y-auto px-card-sm py-card', 
+                            // Desktop: the fixed rail beside the content. Mobile: the full-width first screen of the
+                            // back-stack, with no divider because there is nothing beside it.
+                            isMobile ? 'w-full flex-1' : 'w-60 shrink-0 border-e', mobileShowsSection && 'hidden'), children: categories.map((category, index) => {
+                                const sections = sectionsForCategory(config, category.ref);
+                                if (sections.length === 0)
+                                    return null;
+                                const categoryLabelId = `settings-hub-category-${category.ref}`;
+                                return (_jsxs(React.Fragment, { children: [index > 0 && _jsx(Separator, { className: "my-item" }), _jsx("div", { id: categoryLabelId, className: "px-card-sm py-card-sm text-xs font-medium uppercase tracking-wider text-muted-foreground", children: tSettingsHubCategory(category.ref, category.label) }), _jsx("div", { role: "group", "aria-labelledby": categoryLabelId, children: sections.map(section => {
+                                                const isActive = section.ref === active;
+                                                return (
+                                                // `data-ref` = i18n-independent automation hook (see sub-tabs above).
+                                                _jsx(Link, { 
+                                                    // Only the OPEN item is tracked — the effect above needs one element, and a
+                                                    // ref on all thirty would be thirty callbacks re-created every render.
+                                                    ref: isActive ? activeRailItemRef : undefined, to: `${CommonRoutePaths.settings}/${section.ref}`, replace: true, "data-ref": section.ref, "aria-current": isActive ? 'page' : undefined, "data-state": isActive ? 'active' : 'inactive', className: cn(RAIL_ITEM_CLASSES, 
+                                                    // Composed part by part, exactly as the tab trigger does — `getRecipe`
+                                                    // returns a STRUCTURE (base / states / motion), not a class string, and
+                                                    // handing the object to `cn()` silently yields nothing. That is how the
+                                                    // first cut of this lost the selected fill while every other class held.
+                                                    railItemRecipe.base, railItemRecipe.states.focus, railItemRecipe.states.selected, railItemRecipe.motion.transition), children: tSettingsHubSection(section.ref, section.label) }, section.ref));
+                                            }) })] }, category.ref));
+                            }) }), _jsx("div", { className: cn('min-w-0 flex-1 overflow-y-auto p-card-lg', isMobile && !mobileShowsSection && 'hidden'), children: config.sections.filter(section => section.ref === active).map(section => (_jsx(React.Fragment, { children: section.entitlementFeatureId ? (
+                                // Section SURVIVED because the app OFFERS this feature
+                                // (`runtimeAvailability` capability = plan-independent
+                                // `isFeatureOffered`). Render its body through the entitlement gate:
+                                // entitled → the config surface; offered-but-not-entitled → the
+                                // policy-driven upgrade/add-on prompt (never a silent disappearance).
+                                _jsx(FeatureGate, { featureId: section.entitlementFeatureId, children: _jsx(SettingsTargetRenderer, { target: section.target, resolveSubTabLabel: tSettingsHubSection, subTabRef: section.ref === active ? subTabRef : undefined, onSubTabChange: handleSubTabChange }) })) : (_jsx(SettingsTargetRenderer, { target: section.target, resolveSubTabLabel: tSettingsHubSection, subTabRef: section.ref === active ? subTabRef : undefined, onSubTabChange: handleSubTabChange })) }, section.ref))) })] })] }) }));
 }
 //# sourceMappingURL=SettingsHub.js.map

package/dist/esm/components/settings/SettingsHub.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsHub.js","sourceRoot":"","sources":["../../../../src/components/settings/SettingsHub.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * SettingsHub — the unified settings surface.\n *\n * Renders the declarative `ResolvedSettingsHubConfig` as a vertical `Tabs` rail beside a\n * content panel. Categories become labelled groups + separators rendered INSIDE\n * the `TabsList` (per the BetterStack reference) — the `Tabs` primitive stays the\n * section mechanism, so section state, keyboard roving, and `value`/\n * `onValueChange` all live on the primitive rather than a hand-rolled rail. A\n * section's `target` resolves to a framework panel, an auto-rendered resource\n * surface, a custom component, or a set of horizontal sub-tabs.\n *\n * Mounted by `NavigationContentRenderer` for `NavigationContentType.SETTINGS_HUB`\n * (always in the overlay zone). The `sectionRef` prop pre-selects the open\n * section and is kept in sync so URL-driven section changes re-select the rail.\n */\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { DisplayDirection } from '@wildo-ai/zod-decorators';\nimport { CorePresetNames, FrontendComponentType } from '@wildo-ai/presets-components-models';\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '~wildo-frontend-lib/components/sections/tabs';\nimport { Separator } from '~wildo-frontend-lib/components/layout/separator';\nimport { AppPage_SecuritySettings } from '~wildo-frontend-lib/components/auth/admin-config/AppPage_SecuritySettings';\nimport { AppPage_AppearanceSettings } from './AppPage_AppearanceSettings';\nimport { AppPage_InvitationsSettings } from './AppPage_InvitationsSettings';\nimport { AppPage_BillingSettings } from './AppPage_BillingSettings';\nimport { ExternalProvider_Connection_OwnerScope } from '@wildo-ai/external-connectors-models';\nimport { AppPage_ConnectedAccountsSettings } from './AppPage_ConnectedAccountsSettings';\nimport { ComponentRegistryService } from '~wildo-frontend-lib/core/components-registry/component-registry.frontend.service';\nimport { ComponentNotInjected } from '~wildo-frontend-lib/core/components-registry/ComponentNotInjected';\nimport { SettingsPanelRef, SettingsSectionTargetKind } from '~wildo-frontend-lib/core/config/settings-hub.frontend.schemas';\nimport type {\n  ResolvedSettingsHubConfig,\n  SettingsCategory,\n  SettingsSection,\n  SettingsSectionTarget,\n  SettingsSubTabsTarget,\n} from '~wildo-frontend-lib/core/config/settings-hub.frontend.schemas';\nimport { useVisibleSettingsHubConfig } from '~wildo-frontend-lib/core/config/useVisibleSettingsHubConfig';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { FeatureGate } from '~wildo-frontend-lib/core/features/FeatureGate';\nimport { SettingsResourceOperationPanel } from './SettingsResourceOperationPanel';\n\n// ──────────────────────────────────────────────────────────────\n// Config helpers\n// ──────────────────────────────────────────────────────────────\n\nfunction orderedCategories(config: ResolvedSettingsHubConfig): SettingsCategory[] {\n  return [...config.categories].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));\n}\n\nfunction sectionsForCategory(config: ResolvedSettingsHubConfig, categoryRef: string): SettingsSection[] {\n  return config.sections\n    .filter(section => section.categoryRef === categoryRef)\n    .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));\n}\n\n/** Resolve the section to open: requested → config default → first section. */\nfunction resolveActiveSection(config: ResolvedSettingsHubConfig, sectionRef?: string): string | undefined {\n  if (sectionRef && config.sections.some(section => section.ref === sectionRef)) return sectionRef;\n  if (config.defaultSectionRef && config.sections.some(section => section.ref === config.defaultSectionRef)) {\n    return config.defaultSectionRef;\n  }\n  return config.sections[0]?.ref;\n}\n\n// ──────────────────────────────────────────────────────────────\n// Target rendering (function declarations → hoisted for mutual recursion\n// between a SUB_TABS target and its leaf targets)\n// ──────────────────────────────────────────────────────────────\n\nfunction SettingsEnginePanel({ panelRef }: { panelRef: SettingsPanelRef }): React.JSX.Element {\n  switch (panelRef) {\n    case SettingsPanelRef.SECURITY:\n      return <AppPage_SecuritySettings />;\n    case SettingsPanelRef.APPEARANCE:\n      return <AppPage_AppearanceSettings />;\n    case SettingsPanelRef.INVITATIONS:\n      return <AppPage_InvitationsSettings />;\n    case SettingsPanelRef.BILLING:\n      return <AppPage_BillingSettings />;\n    case SettingsPanelRef.CONNECTED_ACCOUNTS:\n      return <AppPage_ConnectedAccountsSettings ownerScope={ExternalProvider_Connection_OwnerScope.USER} />;\n    case SettingsPanelRef.ORGANIZATION_CONNECTED_ACCOUNTS:\n      // The scope is passed EXPLICITLY at both sites rather than left to the component's default.\n      // A default is invisible at the call site, and the one thing a reader must be able to see here\n      // is whose account each panel connects.\n      return <AppPage_ConnectedAccountsSettings ownerScope={ExternalProvider_Connection_OwnerScope.ORGANIZATION} />;\n  }\n}\n\n/** Resolves a display label for a section/sub-tab ref, falling back to the authored label. */\ntype SettingsLabelResolver = (ref: string, fallbackLabel: string) => string;\n\nfunction SettingsTargetRenderer({\n  target,\n  resolveSubTabLabel,\n}: {\n  target: SettingsSectionTarget;\n  resolveSubTabLabel: SettingsLabelResolver;\n}): React.JSX.Element {\n  switch (target.kind) {\n    case SettingsSectionTargetKind.ENGINE_PANEL:\n      return <SettingsEnginePanel panelRef={target.panelRef} />;\n    case SettingsSectionTargetKind.CUSTOM_COMPONENT: {\n      const CustomComponent = ComponentRegistryService.resolve(\n        target.componentRef as unknown as FrontendComponentType,\n        CorePresetNames.DEFAULT,\n      );\n      if (!CustomComponent) {\n        return <ComponentNotInjected componentType={target.componentRef} componentName={target.componentRef} />;\n      }\n      return (\n        <React.Suspense fallback={<div className=\"h-8 animate-pulse motion-reduce:animate-none bg-muted rounded\" aria-hidden=\"true\" />}>\n          <CustomComponent />\n        </React.Suspense>\n      );\n    }\n    case SettingsSectionTargetKind.RESOURCE_OPERATION:\n      return (\n        <SettingsResourceOperationPanel\n          resourceType={target.resourceType}\n          operation={target.operation}\n          operationVariant={target.operationVariant}\n        />\n      );\n    case SettingsSectionTargetKind.SUB_TABS:\n      return <SettingsSubTabs target={target} resolveSubTabLabel={resolveSubTabLabel} />;\n  }\n}\n\nfunction SettingsSubTabs({\n  target,\n  resolveSubTabLabel,\n}: {\n  target: SettingsSubTabsTarget;\n  resolveSubTabLabel: SettingsLabelResolver;\n}): React.JSX.Element | null {\n  const [active, setActive] = useState<string | undefined>(target.subTabs[0]?.ref);\n  if (target.subTabs.length === 0) return null;\n  return (\n    <Tabs value={active} onValueChange={setActive}>\n      <TabsList>\n        {target.subTabs.map(subTab => (\n          // `data-ref` is the i18n-independent automation hook (labels are\n          // runtime-translated; e2e drives must never key off them).\n          <TabsTrigger key={subTab.ref} value={subTab.ref} data-ref={subTab.ref}>\n            {resolveSubTabLabel(subTab.ref, subTab.label)}\n          </TabsTrigger>\n        ))}\n      </TabsList>\n      {target.subTabs.map(subTab => (\n        <TabsContent key={subTab.ref} value={subTab.ref}>\n          {/* Leaf targets only (schema forbids nested sub-tabs); the resolver is\n              still threaded to satisfy the shared renderer signature. */}\n          <SettingsTargetRenderer target={subTab.target} resolveSubTabLabel={resolveSubTabLabel} />\n        </TabsContent>\n      ))}\n    </Tabs>\n  );\n}\n\n// ──────────────────────────────────────────────────────────────\n// Hub\n// ──────────────────────────────────────────────────────────────\n\nexport interface SettingsHubProps {\n  /** Section to pre-open; falls back to the config default. */\n  sectionRef?: string;\n}\n\nexport function SettingsHub({ sectionRef }: SettingsHubProps): React.JSX.Element {\n  const config = useVisibleSettingsHubConfig();\n  const categories = useMemo(() => orderedCategories(config), [config]);\n  const [active, setActive] = useState<string | undefined>(() => resolveActiveSection(config, sectionRef));\n\n  const { tComponent, tSettingsHubCategory, tSettingsHubSection, isReady } = useI18n({\n    component: FrontendComponentType.APP_LAYOUTS_SETTINGS_HUB,\n  });\n  // Hub chrome labels (title, rail aria-label) read from the scoped component\n  // namespace. Copy is owned by the labelling pipeline (declared in the sibling\n  // `.labels.ts`), so there are deliberately no inline fallback strings — the\n  // hub gates on `isReady` below, the same convention as the panels it hosts\n  // (`AppPage_SecuritySettings` / `AppPage_AppearanceSettings`). The dynamic\n  // category/section labels keep their config-authored `fallbackLabel` (the\n  // required contract of `tSettingsHubCategory` / `tSettingsHubSection`).\n  const t = useCallback(\n    (key: string) => tComponent(FrontendComponentType.APP_LAYOUTS_SETTINGS_HUB, key),\n    [tComponent],\n  );\n\n  // Keep the rail in sync with URL-driven section changes (deep-link / browser\n  // nav). Keyed on `sectionRef` ALONE — deliberately not on `config` as well.\n  // The gated config is derived from live signals (scope, roles, features,\n  // runtime capabilities), so its identity churns independently of its content;\n  // with `config` in the deps this ran after essentially every render and\n  // re-asserted the requested-or-default section, which overwrote the section\n  // the user had just clicked in the rail. The rail then looked inert: the\n  // click did select, and the effect immediately put it back.\n  useEffect(() => {\n    if (!sectionRef) return;\n    setActive(previous => (previous === sectionRef ? previous : sectionRef));\n  }, [sectionRef]);\n\n  // Adopt a section from the config ONLY when the current one is not (or is no\n  // longer) selectable — first resolve after an async gating signal lands, or a\n  // section disappearing because the user's roles/features changed. Anything\n  // broader would re-run the reset described above.\n  useEffect(() => {\n    setActive(previous =>\n      previous && config.sections.some(section => section.ref === previous)\n        ? previous\n        : resolveActiveSection(config, sectionRef),\n    );\n    // `sectionRef` is read as the fallback preference only; following ITS\n    // changes is the effect above.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [config]);\n\n  // Gate on label readiness so the hub chrome never flashes raw key paths —\n  // copy is pipeline-owned with no inline fallback, matching the hosted panels.\n  if (!isReady) return null;\n\n  return (\n    // `min-w-0` is REQUIRED: this is the grid item of the (fixed-width) dialog surface.\n    // Without it the item keeps its default `min-width: auto` and cannot shrink below its\n    // content's min-content width — a wide field row (e.g. a file card with a long\n    // filename, or a text input) then pushes the whole two-pane body past the dialog edge,\n    // and the dialog's `overflow-x: hidden` clips the right side of every field. `min-w-0`\n    // lets the item fit the track so the content pane (and its form) reflow within it.\n    <div className=\"flex h-full min-h-0 flex-col min-w-0\">\n      <header className=\"flex h-14 shrink-0 items-center border-b px-card-lg\">\n        <h2 className=\"text-base font-semibold tracking-tight\">{t('title')}</h2>\n      </header>\n      <Tabs\n        orientation={DisplayDirection.VERTICAL}\n        value={active}\n        onValueChange={setActive}\n        className=\"flex min-h-0 flex-1\"\n      >\n        <TabsList\n          aria-label={t('sectionsNavLabel')}\n          className=\"w-60 shrink-0 overflow-y-auto border-e px-card-sm py-card\"\n        >\n          {categories.map((category, index) => {\n            const sections = sectionsForCategory(config, category.ref);\n            if (sections.length === 0) return null;\n            return (\n              <React.Fragment key={category.ref}>\n                {index > 0 && <Separator className=\"my-item\" />}\n                <div\n                  role=\"presentation\"\n                  className=\"px-card-sm py-card-sm text-xs font-medium uppercase tracking-wider text-muted-foreground\"\n                >\n                  {tSettingsHubCategory(category.ref, category.label)}\n                </div>\n                {sections.map(section => (\n                  // `data-ref` = i18n-independent automation hook (see sub-tabs above).\n                  <TabsTrigger key={section.ref} value={section.ref} data-ref={section.ref}>\n                    {tSettingsHubSection(section.ref, section.label)}\n                  </TabsTrigger>\n                ))}\n              </React.Fragment>\n            );\n          })}\n        </TabsList>\n        <div className=\"min-w-0 flex-1 overflow-y-auto p-card-lg\">\n          {config.sections.map(section => (\n            <TabsContent key={section.ref} value={section.ref} className=\"mt-0\">\n              {section.entitlementFeatureId ? (\n                // Section SURVIVED because the app OFFERS this feature\n                // (`runtimeAvailability` capability = plan-independent\n                // `isFeatureOffered`). Render its body through the entitlement gate:\n                // entitled → the config surface; offered-but-not-entitled → the\n                // policy-driven upgrade/add-on prompt (never a silent disappearance).\n                <FeatureGate featureId={section.entitlementFeatureId}>\n                  <SettingsTargetRenderer target={section.target} resolveSubTabLabel={tSettingsHubSection} />\n                </FeatureGate>\n              ) : (\n                <SettingsTargetRenderer target={section.target} resolveSubTabLabel={tSettingsHubSection} />\n              )}\n            </TabsContent>\n          ))}\n        </div>\n      </Tabs>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"SettingsHub.js","sourceRoot":"","sources":["../../../../../src/components/settings/SettingsHub.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * SettingsHub — the unified settings surface.\n *\n * Renders the declarative `ResolvedSettingsHubConfig` as a vertical NAVIGATION rail beside a\n * content panel. Categories become labelled groups of links, each destination addressed by its own\n * URL. A section's `target` resolves to a framework panel, an auto-rendered resource surface, a\n * custom component, or a set of horizontal sub-tabs.\n *\n * The rail was a `Tabs`/`TabsList` until 2026-09-19, chosen so that section state and keyboard\n * roving came from the primitive rather than being hand-rolled. It became navigation because a\n * tablist switches panels WITHIN a view while these are thirty destinations that each own a URL —\n * and the keyboard argument dissolves rather than transferring: roving tabindex is a tablist\n * requirement, and navigation wants ordinary Tab order through links. See the rail's own comment.\n *\n * The SUB-TABS are still `Tabs`, correctly: Configuration/Connections inside one destination is\n * exactly what a tablist is for.\n *\n * Mounted by `NavigationContentRenderer` for `NavigationContentType.SETTINGS_HUB`\n * (always in the overlay zone). The `sectionRef` prop pre-selects the open\n * section and is kept in sync so URL-driven section changes re-select the rail.\n */\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Link, useNavigate } from 'react-router-dom';\nimport { ViewportBreakpoint } from '@wildo-ai/zod-decorators';\nimport { CorePresetNames, FrontendComponentType, SelectableVariant, UIBehavior } from '@wildo-ai/presets-components-models';\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '~wildo-frontend-lib/components/sections/tabs';\nimport { Separator } from '~wildo-frontend-lib/components/layout/separator';\nimport { Button, ButtonVariants_Variant } from '~wildo-frontend-lib/components/actions/button';\nimport { ButtonSize } from '@wildo-ai/presets-components-models';\nimport { useIconRegistry } from '~wildo-frontend-lib/core/icons/useIconRegistry';\nimport { IconSize, StandardIconReference } from '~wildo-frontend-lib/core/icons/icon-registry.frontend.schemas';\nimport { useUI } from '~wildo-frontend-lib/core/ui/useUI';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { AppPage_SecuritySettings } from '~wildo-frontend-lib/components/auth/admin-config/AppPage_SecuritySettings';\nimport { AppPage_AppearanceSettings } from './AppPage_AppearanceSettings';\nimport { AppPage_InvitationsSettings } from './AppPage_InvitationsSettings';\nimport { AppPage_BillingSettings } from './AppPage_BillingSettings';\nimport { ExternalProvider_Connection_OwnerScope } from '@wildo-ai/external-connectors-models';\nimport { AppPage_ConnectedAccountsSettings } from './AppPage_ConnectedAccountsSettings';\nimport { ComponentRegistryService } from '~wildo-frontend-lib/core/components-registry/component-registry.frontend.service';\nimport { ComponentNotInjected } from '~wildo-frontend-lib/core/components-registry/ComponentNotInjected';\nimport { SettingsPanelRef, SettingsSectionTargetKind } from '~wildo-frontend-lib/core/config/settings-hub.frontend.schemas';\nimport type {\n  ResolvedSettingsHubConfig,\n  SettingsCategory,\n  SettingsSection,\n  SettingsSectionTarget,\n  SettingsSubTabsTarget,\n} from '~wildo-frontend-lib/core/config/settings-hub.frontend.schemas';\nimport { CommonRoutePaths } from '~wildo-frontend-lib/core/runtime/routes.frontend.definitions';\nimport { useVisibleSettingsHubConfig } from '~wildo-frontend-lib/core/config/useVisibleSettingsHubConfig';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { FeatureGate } from '~wildo-frontend-lib/core/features/FeatureGate';\nimport { LoadingGate } from '~wildo-frontend-lib/core/loading/LoadingGate';\nimport { SettingsResourceOperationPanel } from './SettingsResourceOperationPanel';\n\n// ──────────────────────────────────────────────────────────────\n// Config helpers\n// ──────────────────────────────────────────────────────────────\n\nfunction orderedCategories(config: ResolvedSettingsHubConfig): SettingsCategory[] {\n  return [...config.categories].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));\n}\n\nfunction sectionsForCategory(config: ResolvedSettingsHubConfig, categoryRef: string): SettingsSection[] {\n  return config.sections\n    .filter(section => section.categoryRef === categoryRef)\n    .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));\n}\n\n/** Resolve the section to open: requested → config default → first section. */\nfunction resolveActiveSection(config: ResolvedSettingsHubConfig, sectionRef?: string): string | undefined {\n  if (sectionRef && config.sections.some(section => section.ref === sectionRef)) return sectionRef;\n  if (config.defaultSectionRef && config.sections.some(section => section.ref === config.defaultSectionRef)) {\n    return config.defaultSectionRef;\n  }\n  return config.sections[0]?.ref;\n}\n\n// ──────────────────────────────────────────────────────────────\n// Target rendering (function declarations → hoisted for mutual recursion\n// between a SUB_TABS target and its leaf targets)\n// ──────────────────────────────────────────────────────────────\n\nfunction SettingsEnginePanel({ panelRef }: { panelRef: SettingsPanelRef }): React.JSX.Element {\n  switch (panelRef) {\n    case SettingsPanelRef.SECURITY:\n      return <AppPage_SecuritySettings />;\n    case SettingsPanelRef.APPEARANCE:\n      return <AppPage_AppearanceSettings />;\n    case SettingsPanelRef.INVITATIONS:\n      return <AppPage_InvitationsSettings />;\n    case SettingsPanelRef.BILLING:\n      return <AppPage_BillingSettings />;\n    case SettingsPanelRef.CONNECTED_ACCOUNTS:\n      return <AppPage_ConnectedAccountsSettings ownerScope={ExternalProvider_Connection_OwnerScope.USER} />;\n    case SettingsPanelRef.ORGANIZATION_CONNECTED_ACCOUNTS:\n      // The scope is passed EXPLICITLY at both sites rather than left to the component's default.\n      // A default is invisible at the call site, and the one thing a reader must be able to see here\n      // is whose account each panel connects.\n      return <AppPage_ConnectedAccountsSettings ownerScope={ExternalProvider_Connection_OwnerScope.ORGANIZATION} />;\n  }\n}\n\n/** Resolves a display label for a section/sub-tab ref, falling back to the authored label. */\ntype SettingsLabelResolver = (ref: string, fallbackLabel: string) => string;\n\nfunction SettingsTargetRenderer({\n  target,\n  resolveSubTabLabel,\n  subTabRef,\n  onSubTabChange,\n}: {\n  target: SettingsSectionTarget;\n  resolveSubTabLabel: SettingsLabelResolver;\n  subTabRef?: string;\n  onSubTabChange?: (subTabRef: string) => void;\n}): React.JSX.Element {\n  switch (target.kind) {\n    case SettingsSectionTargetKind.ENGINE_PANEL:\n      return <SettingsEnginePanel panelRef={target.panelRef} />;\n    case SettingsSectionTargetKind.CUSTOM_COMPONENT: {\n      const CustomComponent = ComponentRegistryService.resolve(\n        target.componentRef,\n        CorePresetNames.DEFAULT,\n      );\n      if (!CustomComponent) {\n        return <ComponentNotInjected componentType={target.componentRef} componentName={target.componentRef} />;\n      }\n      return (\n        <React.Suspense fallback={<div className=\"h-8 animate-pulse motion-reduce:animate-none bg-muted rounded\" aria-hidden=\"true\" />}>\n          <CustomComponent />\n        </React.Suspense>\n      );\n    }\n    case SettingsSectionTargetKind.RESOURCE_OPERATION:\n      return (\n        <SettingsResourceOperationPanel\n          resourceType={target.resourceType}\n          operation={target.operation}\n          operationVariant={target.operationVariant}\n        />\n      );\n    case SettingsSectionTargetKind.SUB_TABS:\n      return (\n        <SettingsSubTabs\n          target={target}\n          resolveSubTabLabel={resolveSubTabLabel}\n          subTabRef={subTabRef}\n          onSubTabChange={onSubTabChange}\n        />\n      );\n  }\n}\n\n/**\n * The sub-tab strip inside one section.\n *\n * The active tab is URL-DRIVEN since 2026-09-17. It used to be `useState(target.subTabs[0]?.ref)` —\n * local state that read nothing from the URL — so all twenty-one sub-tab panels in the shipped\n * catalogue were unaddressable: every link to a sub-tabbed section opened its FIRST tab, and\n * \"Single sign-on → Connections\" could not be sent to anybody. That contradicted the hub's own\n * contract, which is that the URL is its single source of truth, and it made the outcome banner a\n * connect-callback renders depend on tab ORDER rather than on the URL it returns to.\n *\n * A `subTabRef` the section does not declare is IGNORED rather than refused: the tab falls back to\n * the first entry, so a stale bookmark or a hand-typed segment still opens the section instead of an\n * error. `onSubTabChange` writes the selection back, which is what makes the strip a navigation\n * control rather than a widget with a URL beside it.\n */\nfunction SettingsSubTabs({\n  target,\n  resolveSubTabLabel,\n  subTabRef,\n  onSubTabChange,\n}: {\n  target: SettingsSubTabsTarget;\n  resolveSubTabLabel: SettingsLabelResolver;\n  subTabRef?: string;\n  onSubTabChange?: (subTabRef: string) => void;\n}): React.JSX.Element | null {\n  const active = target.subTabs.some(subTab => subTab.ref === subTabRef)\n    ? subTabRef\n    : target.subTabs[0]?.ref;\n  if (target.subTabs.length === 0) return null;\n  return (\n    <Tabs value={active} onValueChange={next => onSubTabChange?.(next)}>\n      <TabsList>\n        {target.subTabs.map(subTab => (\n          // `data-ref` is the i18n-independent automation hook (labels are\n          // runtime-translated; e2e drives must never key off them).\n          <TabsTrigger key={subTab.ref} value={subTab.ref} data-ref={subTab.ref}>\n            {resolveSubTabLabel(subTab.ref, subTab.label)}\n          </TabsTrigger>\n        ))}\n      </TabsList>\n      {target.subTabs.map(subTab => (\n        <TabsContent key={subTab.ref} value={subTab.ref}>\n          {/* Leaf targets only (schema forbids nested sub-tabs); the resolver is\n              still threaded to satisfy the shared renderer signature. */}\n          <SettingsTargetRenderer target={subTab.target} resolveSubTabLabel={resolveSubTabLabel} />\n        </TabsContent>\n      ))}\n    </Tabs>\n  );\n}\n\n/**\n * A rail item's layout classes — full-width, left-aligned, icon-tolerant.\n *\n * Carried here rather than reused from the tab trigger because the rail is no longer a tab: this is\n * a navigation item and owns its own shape. Only the SELECTED treatment is shared, and that comes\n * from the theme recipe rather than from a copied class string, so a theme change still reaches\n * both.\n */\nconst RAIL_ITEM_CLASSES =\n  \"inline-flex w-full cursor-pointer items-center justify-start gap-1.5 whitespace-nowrap rounded-md px-card-sm py-item text-sm font-medium no-underline [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\";\n\n// ──────────────────────────────────────────────────────────────\n// Hub\n// ──────────────────────────────────────────────────────────────\n\nexport interface SettingsHubProps {\n  /** Section to pre-open; falls back to the config default. */\n  sectionRef?: string;\n  /** Sub-tab of `sectionRef` to pre-open; ignored when the section declares no such tab. */\n  subTabRef?: string;\n}\n\nexport function SettingsHub({ sectionRef, subTabRef }: SettingsHubProps): React.JSX.Element {\n  const config = useVisibleSettingsHubConfig();\n  const categories = useMemo(() => orderedCategories(config), [config]);\n  const [active, setActive] = useState<string | undefined>(() => resolveActiveSection(config, sectionRef));\n  const routerNavigate = useNavigate();\n\n  /*\n   * In-hub navigation WRITES the URL. Until 2026-09-17 it did not, at either level: the rail set\n   * local state and the sub-tab strip held its own, so the address bar kept whatever section the\n   * hub was opened at. Deep-linking IN worked and linking OUT never did — you could be looking at\n   * Administration → Single sign-on → Connections with `/settings/profile` in the address bar, and\n   * no sequence of clicks produced a URL for where you were.\n   *\n   * REPLACE rather than push, deliberately. A settings rail is a switcher, not a trail: pushing\n   * would make Back walk every section a person browsed before leaving the hub, which is the\n   * behaviour the overlay's own dismiss already owns. Replace keeps the address bar truthful and\n   * leaves Back meaning \"leave settings\".\n   *\n   * The overlay reconciler converges on the new URL — it keys on section AND sub-tab, so a tab\n   * switch inside one section is seen as a change rather than as already-correct. There is no loop:\n   * only a user gesture calls these, and the reconciler emits no navigation of its own.\n   */\n  // The SECTION half of this used to be `navigateToSection`, which the rail's triggers called. The\n  // rail's links now carry `to` + `replace` themselves, and `active` is driven by the URL-sync\n  // effect below — so the helper had no caller left. The SUB-TAB half stays: those really are tabs.\n\n  const handleSubTabChange = useCallback((nextSubTabRef: string) => {\n    if (!active) return;\n    routerNavigate(`${CommonRoutePaths.settings}/${active}/${nextSubTabRef}`, { replace: true });\n  }, [active, routerNavigate]);\n\n  /*\n   * On a small screen the hub is a BACK-STACK rather than two panes.\n   *\n   * It had no responsive treatment at all before 2026-09-17 — a fixed `w-60 shrink-0` rail at every\n   * width, which is 240px of a ~375px viewport, and the rail is now thirty entries rather than\n   * sixteen. The back-stack is chosen over a drawer or a collapsed select because the panel BELOW\n   * already works this way: `SettingsSectionNavigationHost` keeps a section's own drill-ins\n   * (view → edit → back) inside the panel, so mobile becomes the same mechanism one level up\n   * instead of a second navigation concept.\n   *\n   * WHICH screen shows is the URL's business, not local state: `/settings` is the list and\n   * `/settings/:sectionRef` is a section. That falls out of the hub's own contract — the URL is its\n   * single source of truth — and it means Back, a deep link and a shared link all agree without any\n   * of them being special-cased.\n   *\n   * Both panes stay MOUNTED and only their classes change. `field-chrome-and-sections.md` Gotcha 1b\n   * records what the alternative costs: a chrome that swapped element structure across a breakpoint\n   * remounted its control and dropped a pending edit on resize. Hiding is a class here for exactly\n   * that reason.\n   */\n  const { UIConfig, getRecipe } = useUI();\n  /*\n   * The rail item's SELECTED styling comes from the theme's SELECTABLE/FILLED recipe — the same one\n   * the vertical tab trigger used, so the rail looks exactly as it did and still follows whatever a\n   * theme dresses it in. The recipe keys on `data-state`, which each link sets from `active`.\n   */\n  const railItemRecipe = getRecipe(UIBehavior.SELECTABLE, SelectableVariant.FILLED);\n  const { renderIcon } = useIconRegistry();\n  const isMobile = UIConfig?.currentBreakpoint === ViewportBreakpoint.MOBILE;\n  const mobileShowsSection = isMobile && Boolean(sectionRef);\n\n  const handleBackToSections = useCallback(() => {\n    routerNavigate(CommonRoutePaths.settings, { replace: true });\n  }, [routerNavigate]);\n\n\n  const { tComponent, tSettingsHubCategory, tSettingsHubSection, isReady } = useI18n({\n    component: FrontendComponentType.APP_LAYOUTS_SETTINGS_HUB,\n  });\n  // Hub chrome labels (title, rail aria-label) read from the scoped component\n  // namespace. Copy is owned by the labelling pipeline (declared in the sibling\n  // `.labels.ts`), so there are deliberately no inline fallback strings — the\n  // hub gates on `isReady` below, the same convention as the panels it hosts\n  // (`AppPage_SecuritySettings` / `AppPage_AppearanceSettings`). The dynamic\n  // category/section labels keep their config-authored `fallbackLabel` (the\n  // required contract of `tSettingsHubCategory` / `tSettingsHubSection`).\n  const t = useCallback(\n    (key: string) => tComponent(FrontendComponentType.APP_LAYOUTS_SETTINGS_HUB, key),\n    [tComponent],\n  );\n\n  /** The pushed section's own label — the mobile header's only cue for where you are. */\n  const activeSectionLabel = useMemo(() => {\n    const section = config.sections.find(candidate => candidate.ref === active);\n    return section ? tSettingsHubSection(section.ref, section.label) : undefined;\n  }, [config.sections, active, tSettingsHubSection]);\n\n  // Keep the rail in sync with URL-driven section changes (deep-link / browser\n  // nav). Keyed on `sectionRef` ALONE — deliberately not on `config` as well.\n  // The gated config is derived from live signals (scope, roles, features,\n  // runtime capabilities), so its identity churns independently of its content;\n  // with `config` in the deps this ran after essentially every render and\n  // re-asserted the requested-or-default section, which overwrote the section\n  // the user had just clicked in the rail. The rail then looked inert: the\n  // click did select, and the effect immediately put it back.\n  useEffect(() => {\n    if (!sectionRef) return;\n    setActive(previous => (previous === sectionRef ? previous : sectionRef));\n  }, [sectionRef]);\n\n  /*\n   * Bring the OPEN section into view when it is not — and only then.\n   *\n   * The rail carries thirty destinations and scrolls, so a cold load or a deep link at a section\n   * near the bottom (`/settings/webhooks`) renders a list scrolled to the top with nothing on it\n   * marked: the one cue that says where you are is off screen, and the reader has to scroll a list\n   * of thirty to find out.\n   *\n   * `block: 'nearest'` is what makes this safe to run on every section change rather than only on\n   * mount: it is defined to move the container by the MINIMUM needed, so an item already fully\n   * visible — the ordinary case when somebody clicks the rail — is not scrolled at all. That is the\n   * whole reason it is 'nearest' and not 'center', which would yank the list on every click and\n   * replace one annoyance with another.\n   *\n   * It pairs with, and does not substitute for, the key fix in `getContentKey`: this positions the\n   * rail, that one stops the rail being rebuilt (and its scroll offset discarded) on every click.\n   * Without the key fix this would fire into a freshly mounted `<nav>` each time and merely make the\n   * reset land somewhere else.\n   */\n  const activeRailItemRef = useRef<HTMLAnchorElement | null>(null);\n  useEffect(() => {\n    if (!active) return;\n    activeRailItemRef.current?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n  }, [active]);\n\n  // Adopt a section from the config ONLY when the current one is not (or is no\n  // longer) selectable — first resolve after an async gating signal lands, or a\n  // section disappearing because the user's roles/features changed. Anything\n  // broader would re-run the reset described above.\n  useEffect(() => {\n    setActive(previous =>\n      previous && config.sections.some(section => section.ref === previous)\n        ? previous\n        : resolveActiveSection(config, sectionRef),\n    );\n    // `sectionRef` is read as the fallback preference only; following ITS\n    // changes is the effect above.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [config]);\n\n  /*\n   * Gate on label readiness so the hub chrome never flashes raw key paths — copy is pipeline-owned\n   * with no inline fallback, matching the hosted panels.\n   *\n   * Through `LoadingGate` rather than `if (!isReady) return null`, which is what this was until\n   * 2026-09-17. Returning null is correct about the raw keys and wrong about everything else: the\n   * overlay is already open and mounted by the time the hub renders, so a null gave a person an\n   * empty dialog with no indication that anything was coming — and the wait got longer as the rail\n   * grew. `LoadingGate` keeps the same guarantee (children are not rendered until ready) and lets\n   * the ENCLOSING SURFACE POLICY choose the treatment, which for an overlay is to overlay the\n   * children rather than to blank them. The hub does not pick a visual here on purpose: that choice\n   * belongs to the surface it is hosted in, and hard-coding a skeleton would override a policy the\n   * design system already owns.\n   */\n  return (\n    <LoadingGate readiness={[{ id: 'settings-hub-labels', isReady }]}>\n      {/*\n        `min-w-0` is REQUIRED: this is the grid item of the (fixed-width) dialog surface.\n        Without it the item keeps its default `min-width: auto` and cannot shrink below its\n        content's min-content width — a wide field row (e.g. a file card with a long\n        filename, or a text input) then pushes the whole two-pane body past the dialog edge,\n        and the dialog's `overflow-x: hidden` clips the right side of every field. `min-w-0`\n        lets the item fit the track so the content pane (and its form) reflow within it.\n      */}\n      <div className=\"flex h-full min-h-0 flex-col min-w-0\">\n      <header className=\"flex h-14 shrink-0 items-center gap-item border-b px-card-lg\">\n        {mobileShowsSection && (\n          <Button\n            variant={ButtonVariants_Variant.GHOST}\n            size={ButtonSize.ICON_SM}\n            aria-label={t('backToSections')}\n            onClick={handleBackToSections}\n          >\n            {renderIcon(StandardIconReference.BACK, { size: IconSize.SM })}\n          </Button>\n        )}\n        {/* On mobile the header names the SECTION you pushed into — without it the back-stack loses\n            the one cue that says where you are, since the rail that said so is off screen. */}\n        <h2 className=\"truncate text-base font-semibold tracking-tight\">\n          {mobileShowsSection ? activeSectionLabel ?? t('title') : t('title')}\n        </h2>\n      </header>\n      <div className=\"flex min-h-0 flex-1\">\n        {/*\n          * The rail is NAVIGATION, not a tablist, and until 2026-09-19 it was rendered as one —\n          * thirty `<button role=\"tab\">` in a `TabsList`. Three things followed, all measured on the\n          * running application:\n          *\n          *  - No destination could be OPENED any other way. `/settings/members` is a real route the\n          *    hub already writes to the address bar, but with no `href` there was nothing to\n          *    ⌘-click, middle-click or \"copy link address\" — the one gesture an operator uses to\n          *    send a colleague to a setting.\n          *  - The ARIA pattern was wrong for what this is. A tablist switches panels WITHIN a view;\n          *    a list of destinations that each own a URL is navigation (WAI-ARIA APG). That is not a\n          *    preference — it decides what an assistive technology announces and how it is reached.\n          *  - The category headings carried `role=\"presentation\"`, so they were invisible to\n          *    assistive technology, and a tablist cannot nest labelled groups anyway. That left AT\n          *    users with a flat list of thirty items containing NINE duplicated names — \"General\",\n          *    \"Entitlements\", \"API keys\", \"Connected accounts\", \"Single sign-on\", \"User\n          *    provisioning\", \"Audit streaming\", \"Webhooks\" and \"Audit log\" each appear under two\n          *    scopes — with nothing to tell the pairs apart.\n          *\n          * A `<nav>` of grouped links fixes all three at once, and the keyboard concern the previous\n          * shape was chosen for DISSOLVES rather than needing to be reimplemented: roving tabindex\n          * is a tablist requirement. Navigation uses ordinary Tab order through links, which is what\n          * a reader expects and what the browser already does.\n          *\n          * `replace` is kept from the old `navigateToSection` and for its reason: a settings rail is\n          * a switcher, not a trail, so Back means \"leave settings\" rather than walking every section\n          * somebody browsed.\n          */}\n        <nav\n          aria-label={t('sectionsNavLabel')}\n          className={cn(\n            'overflow-y-auto px-card-sm py-card',\n            // Desktop: the fixed rail beside the content. Mobile: the full-width first screen of the\n            // back-stack, with no divider because there is nothing beside it.\n            isMobile ? 'w-full flex-1' : 'w-60 shrink-0 border-e',\n            mobileShowsSection && 'hidden',\n          )}\n        >\n          {categories.map((category, index) => {\n            const sections = sectionsForCategory(config, category.ref);\n            if (sections.length === 0) return null;\n            const categoryLabelId = `settings-hub-category-${category.ref}`;\n            return (\n              <React.Fragment key={category.ref}>\n                {index > 0 && <Separator className=\"my-item\" />}\n                {/* Named, not decorative: this heading is the ONLY thing distinguishing the nine\n                    section labels that appear under two scopes, so it has to reach AT. */}\n                <div\n                  id={categoryLabelId}\n                  className=\"px-card-sm py-card-sm text-xs font-medium uppercase tracking-wider text-muted-foreground\"\n                >\n                  {tSettingsHubCategory(category.ref, category.label)}\n                </div>\n                <div role=\"group\" aria-labelledby={categoryLabelId}>\n                  {sections.map(section => {\n                    const isActive = section.ref === active;\n                    return (\n                      // `data-ref` = i18n-independent automation hook (see sub-tabs above).\n                      <Link\n                        key={section.ref}\n                        // Only the OPEN item is tracked — the effect above needs one element, and a\n                        // ref on all thirty would be thirty callbacks re-created every render.\n                        ref={isActive ? activeRailItemRef : undefined}\n                        to={`${CommonRoutePaths.settings}/${section.ref}`}\n                        replace\n                        data-ref={section.ref}\n                        aria-current={isActive ? 'page' : undefined}\n                        data-state={isActive ? 'active' : 'inactive'}\n                        className={cn(\n                          RAIL_ITEM_CLASSES,\n                          // Composed part by part, exactly as the tab trigger does — `getRecipe`\n                          // returns a STRUCTURE (base / states / motion), not a class string, and\n                          // handing the object to `cn()` silently yields nothing. That is how the\n                          // first cut of this lost the selected fill while every other class held.\n                          railItemRecipe.base,\n                          railItemRecipe.states.focus,\n                          railItemRecipe.states.selected,\n                          railItemRecipe.motion.transition,\n                        )}\n                      >\n                        {tSettingsHubSection(section.ref, section.label)}\n                      </Link>\n                    );\n                  })}\n                </div>\n              </React.Fragment>\n            );\n          })}\n        </nav>\n        <div\n          className={cn(\n            'min-w-0 flex-1 overflow-y-auto p-card-lg',\n            isMobile && !mobileShowsSection && 'hidden',\n          )}\n        >\n          {/*\n            * ONE section renders — the active one. `TabsContent` unmounts its inactive panels\n            * anyway, so this is the same mounting behaviour written directly rather than delegated\n            * to a primitive the rail no longer uses.\n            */}\n          {config.sections.filter(section => section.ref === active).map(section => (\n            <React.Fragment key={section.ref}>\n              {section.entitlementFeatureId ? (\n                // Section SURVIVED because the app OFFERS this feature\n                // (`runtimeAvailability` capability = plan-independent\n                // `isFeatureOffered`). Render its body through the entitlement gate:\n                // entitled → the config surface; offered-but-not-entitled → the\n                // policy-driven upgrade/add-on prompt (never a silent disappearance).\n                <FeatureGate featureId={section.entitlementFeatureId}>\n                  <SettingsTargetRenderer\n                    target={section.target}\n                    resolveSubTabLabel={tSettingsHubSection}\n                    subTabRef={section.ref === active ? subTabRef : undefined}\n                    onSubTabChange={handleSubTabChange}\n                  />\n                </FeatureGate>\n              ) : (\n                <SettingsTargetRenderer\n                  target={section.target}\n                  resolveSubTabLabel={tSettingsHubSection}\n                  subTabRef={section.ref === active ? subTabRef : undefined}\n                  onSubTabChange={handleSubTabChange}\n                />\n              )}\n            </React.Fragment>\n          ))}\n        </div>\n      </div>\n    </div>\n    </LoadingGate>\n  );\n}\n"]}

package/dist/esm/components/settings/SettingsHub.labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsHub.labels.d.ts","sourceRoot":"","sources":["../../../../src/components/settings/SettingsHub.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAO7C,eAAO,MAAM,2BAA2B,EAAE,mBAAmB,EAG5D,CAAC"}
+{"version":3,"file":"SettingsHub.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/settings/SettingsHub.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAO7C,eAAO,MAAM,2BAA2B,EAAE,mBAAmB,EAM5D,CAAC"}

package/dist/esm/components/settings/SettingsHub.labels.js

@@ -7,6 +7,9 @@ import { FrontendComponentType, LabelKind, registerComponentLabels, } from '@wil
 export const AppLayoutsSettingsHubLabels = [
     { ref: 'title', kind: LabelKind.HEADING, purpose: 'Header title of the unified Settings Hub overlay' },
     { ref: 'sectionsNavLabel', kind: LabelKind.LABEL, purpose: 'Accessible label for the vertical settings-sections navigation rail' },
+    // Mobile only: the hub becomes a back-stack there (the rail is the first screen, a section is
+    // pushed over it), so this is the control that returns from a section to the list.
+    { ref: 'backToSections', kind: LabelKind.LABEL, purpose: 'Accessible label for the control that returns from a settings section to the sections list on a small screen' },
 ];
 registerComponentLabels(FrontendComponentType.APP_LAYOUTS_SETTINGS_HUB, AppLayoutsSettingsHubLabels);
 //# sourceMappingURL=SettingsHub.labels.js.map

package/dist/esm/components/settings/SettingsHub.labels.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsHub.labels.js","sourceRoot":"","sources":["../../../../src/components/settings/SettingsHub.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,SAAS,EAET,uBAAuB,GACxB,MAAM,qCAAqC,CAAC;AAE7C,8EAA8E;AAC9E,6EAA6E;AAC7E,+EAA+E;AAC/E,4EAA4E;AAC5E,oDAAoD;AACpD,MAAM,CAAC,MAAM,2BAA2B,GAA0B;IAChE,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,kDAAkD,EAAE;IACtG,EAAE,GAAG,EAAE,kBAAkB,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,qEAAqE,EAAE;CACnI,CAAC;AAEF,uBAAuB,CAAC,qBAAqB,CAAC,wBAAwB,EAAE,2BAA2B,CAAC,CAAC","sourcesContent":["import {\n  FrontendComponentType,\n  LabelKind,\n  type LabellingUnitaryDef,\n  registerComponentLabels,\n} from '@wildo-ai/presets-components-models';\n\n// Companion-only label metadata for the Settings Hub's fixed chrome (header +\n// rail aria-label). The DYNAMIC category/section labels are NOT here — those\n// live in the `settings_hub.*` namespace (tSettingsHubCategory/Section), keyed\n// by registry ref. Statically scanned by the dev companion; NOT imported at\n// runtime, so it never ships in the browser bundle.\nexport const AppLayoutsSettingsHubLabels: LabellingUnitaryDef[] = [\n  { ref: 'title', kind: LabelKind.HEADING, purpose: 'Header title of the unified Settings Hub overlay' },\n  { ref: 'sectionsNavLabel', kind: LabelKind.LABEL, purpose: 'Accessible label for the vertical settings-sections navigation rail' },\n];\n\nregisterComponentLabels(FrontendComponentType.APP_LAYOUTS_SETTINGS_HUB, AppLayoutsSettingsHubLabels);\n"]}
+{"version":3,"file":"SettingsHub.labels.js","sourceRoot":"","sources":["../../../../../src/components/settings/SettingsHub.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,SAAS,EAET,uBAAuB,GACxB,MAAM,qCAAqC,CAAC;AAE7C,8EAA8E;AAC9E,6EAA6E;AAC7E,+EAA+E;AAC/E,4EAA4E;AAC5E,oDAAoD;AACpD,MAAM,CAAC,MAAM,2BAA2B,GAA0B;IAChE,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,kDAAkD,EAAE;IACtG,EAAE,GAAG,EAAE,kBAAkB,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,qEAAqE,EAAE;IAClI,8FAA8F;IAC9F,mFAAmF;IACnF,EAAE,GAAG,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,8GAA8G,EAAE;CAC1K,CAAC;AAEF,uBAAuB,CAAC,qBAAqB,CAAC,wBAAwB,EAAE,2BAA2B,CAAC,CAAC","sourcesContent":["import {\n  FrontendComponentType,\n  LabelKind,\n  type LabellingUnitaryDef,\n  registerComponentLabels,\n} from '@wildo-ai/presets-components-models';\n\n// Companion-only label metadata for the Settings Hub's fixed chrome (header +\n// rail aria-label). The DYNAMIC category/section labels are NOT here — those\n// live in the `settings_hub.*` namespace (tSettingsHubCategory/Section), keyed\n// by registry ref. Statically scanned by the dev companion; NOT imported at\n// runtime, so it never ships in the browser bundle.\nexport const AppLayoutsSettingsHubLabels: LabellingUnitaryDef[] = [\n  { ref: 'title', kind: LabelKind.HEADING, purpose: 'Header title of the unified Settings Hub overlay' },\n  { ref: 'sectionsNavLabel', kind: LabelKind.LABEL, purpose: 'Accessible label for the vertical settings-sections navigation rail' },\n  // Mobile only: the hub becomes a back-stack there (the rail is the first screen, a section is\n  // pushed over it), so this is the control that returns from a section to the list.\n  { ref: 'backToSections', kind: LabelKind.LABEL, purpose: 'Accessible label for the control that returns from a settings section to the sections list on a small screen' },\n];\n\nregisterComponentLabels(FrontendComponentType.APP_LAYOUTS_SETTINGS_HUB, AppLayoutsSettingsHubLabels);\n"]}

package/dist/esm/components/settings/SettingsResourceOperationPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsResourceOperationPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/settings/SettingsResourceOperationPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAYvC,MAAM,WAAW,mCAAmC;IAClD,2DAA2D;IAC3D,YAAY,EAAE,MAAM,CAAC;IACrB,4DAA4D;IAC5D,SAAS,EAAE,MAAM,CAAC;IAClB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAiCD,wBAAgB,8BAA8B,CAAC,EAC7C,YAAY,EACZ,SAAS,EACT,gBAAgB,GACjB,EAAE,mCAAmC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAuDzD"}
+{"version":3,"file":"SettingsResourceOperationPanel.d.ts","sourceRoot":"","sources":["../../../../../src/components/settings/SettingsResourceOperationPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAanD,MAAM,WAAW,mCAAmC;IAClD,2DAA2D;IAC3D,YAAY,EAAE,MAAM,CAAC;IACrB,4DAA4D;IAC5D,SAAS,EAAE,MAAM,CAAC;IAClB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAiCD,wBAAgB,8BAA8B,CAAC,EAC7C,YAAY,EACZ,SAAS,EACT,gBAAgB,GACjB,EAAE,mCAAmC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA6EzD"}

package/dist/esm/components/settings/SettingsResourceOperationPanel.js

@@ -31,9 +31,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @see settings-hub.frontend.schemas.ts — `SettingsResourceOperationTarget`
  * @see core/runtime/AppRouter.tsx — `ResourcePageWrapper`, the routed counterpart
  */
-import { useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 import { useResourceRegistry } from '../../core/resources/useResourceRegistry.js';
 import { useAppScopeSafe } from '../../core/scope/useAppScope.js';
+import { ApplicationContext } from '../../core/runtime/ApplicationContext.shared.js';
 import { ScopeUtilsService } from '../../core/scope/scope.utils.frontend.service.js';
 import { frontendResourceUtils } from '../../core/resources/frontend-resource.utils.js';
 import { SettingsSectionNavigationHost } from './SettingsSectionNavigationHost.js';
@@ -66,6 +67,28 @@ function SettingsResourceUnavailable({ message }) {
 export function SettingsResourceOperationPanel({ resourceType, operation, operationVariant, }) {
     const { registry } = useResourceRegistry();
     const appScope = useAppScopeSafe();
+    /*
+     * The application id comes from APP CONFIG, not from the scope.
+     *
+     * `AppScopeContext` derives `currentApplicationId` by decoding the access token, and the token's
+     * claims carry `userId` and no `applicationId` (measured on the running stack, issue #283), so
+     * that value is null in every session. The comment below this hook has always said it injects
+     * "(org/user/app)" identifiers; the app third never had a value to inject.
+     *
+     * That was invisible while nothing application-scoped was placed in the hub, and it stops being
+     * invisible the moment something is: `primaryScopeToContextIdentifiers` turns the id into the
+     * `{ applications: <id> }` context identifier, which is what `buildParentResourcesRequirements`
+     * needs to build an APPLICATION-scoped resource's parent edge. Without it the section renders a
+     * query with no scope — the section exists, and shows nothing that belongs to this application.
+     *
+     * Read through `useContext` rather than `useApplication()` because that hook THROWS outside its
+     * provider, and a settings panel must not crash the tree that hosts it. The scope value stays as
+     * a fallback so adding the claim to the token later needs no second edit here.
+     */
+    const applicationContext = useContext(ApplicationContext);
+    const currentApplicationId = applicationContext?.appIdentity?.applicationId
+        ?? appScope?.currentApplicationId
+        ?? null;
     const resourceContext = useMemo(() => {
         const config = registry.resourceConfigurations[resourceType];
         if (!config)
@@ -78,7 +101,7 @@ export function SettingsResourceOperationPanel({ resourceType, operation, operat
         const contextResourceIdentifiers = ScopeUtilsService.buildResourceOperationContextIdentifiers({
             currentUserId: appScope?.currentUserId,
             currentOrganizationId: appScope?.currentOrganizationId,
-            currentApplicationId: appScope?.currentApplicationId,
+            currentApplicationId,
             currentAnonymousUserId: appScope?.currentAnonymousUserId,
             primaryScope: config.resourcePrimaryScope,
             liveAppScopeContextResourceIdentifiers: appScope?.buildContextResourceIdentifiers?.(),
@@ -93,7 +116,7 @@ export function SettingsResourceOperationPanel({ resourceType, operation, operat
             contextResourceIdentifiers,
             parentResourcesRequirements,
         });
-    }, [registry, resourceType, operation, operationVariant, appScope]);
+    }, [registry, resourceType, operation, operationVariant, appScope, currentApplicationId]);
     if (!resourceContext) {
         return (_jsx(SettingsResourceUnavailable, { message: `Settings surface unavailable for ${resourceType} (${operation}).` }));
     }