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

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

@@ -18,17 +18,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * hardcoded fallback strings here.
  */
 import { useCallback, useEffect, useState } from 'react';
-import { ButtonSize, FrontendComponentType } from '@wildo-ai/presets-components-models';
+import { ButtonSize, FrontendComponentType, LabellingTypes } from '@wildo-ai/presets-components-models';
 import { isWildoBackendError } from '@wildo-ai/saas-models';
-import { Card, CardContent, CardHeader, CardTitle } from '../../components/sections/card.js';
+import { Card, CardContent } from '../../components/sections/card.js';
 import { Button, ButtonVariants_Variant } from '../../components/actions/button.js';
 import { Text } from '../../components/typography/text.js';
 import { Alert, AlertDescription } from '../../components/overlays/containers/alert.js';
 import { useI18n } from '../../core/i18n/useI18n.js';
 import { useUserOrgs } from '../../core/security/useUserOrgs.js';
 import { getManualCallsHttpClient, } from '../../core/requests/wildo-http-client-manual-calls.frontend.service.js';
+/*
+ * The role words live in the application's `roles` labels, planned from every registered role, not in this
+ * panel's own namespace. Module-level so the requested set keeps one identity across renders.
+ */
+const INVITATION_ROLE_LABEL_NAMESPACES = [LabellingTypes.ROLES];
 export const AppPage_InvitationsSettings = () => {
-    const { tComponent, isReady } = useI18n({ component: FrontendComponentType.APP_LAYOUTS_INVITATIONS_SETTINGS });
+    const { tComponent, tRole, isReady } = useI18n({
+        component: FrontendComponentType.APP_LAYOUTS_INVITATIONS_SETTINGS,
+        keys: INVITATION_ROLE_LABEL_NAMESPACES,
+    });
     const { refreshOrganizations } = useUserOrgs();
     const t = useCallback((key) => tComponent(FrontendComponentType.APP_LAYOUTS_INVITATIONS_SETTINGS, key), [tComponent]);
     const [invitations, setInvitations] = useState([]);
@@ -101,13 +109,13 @@ export const AppPage_InvitationsSettings = () => {
     // Gate on label readiness so the panel never flashes raw key paths (Appearance convention).
     if (!isReady)
         return null;
-    return (_jsxs("div", { className: "flex flex-col gap-section", children: [_jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx("h3", { className: "text-base font-semibold tracking-tight", children: t('pageTitle') }), _jsx(Text, { className: "text-sm text-muted-foreground", children: t('pageDescription') })] }), error && (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: error }) })), successMsg && (_jsx(Alert, { children: _jsx(AlertDescription, { children: successMsg }) })), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t('listHeading') }) }), _jsx(CardContent, { children: loading ? (_jsx(Text, { className: "text-sm text-muted-foreground", children: t('loading') })) : invitations.length === 0 ? (_jsx(Text, { className: "text-sm text-muted-foreground", children: t('empty') })) : (
-                        /* Flush divided list — same settings-list geometry as the
-                           SETTINGS_ROW field chrome (label/meta inline-start, actions
-                           inline-end, `py-group` rhythm, `divide-y` hairline dividers) so
-                           this bespoke action panel reads as the same family as the
-                           decorator-driven settings surfaces. (Was per-row bordered boxes
-                           with `space-y-2`, a visually divergent pattern.) */
-                        _jsx("ul", { className: "divide-y divide-border", children: invitations.map((invitation) => (_jsxs("li", { className: "flex items-center justify-between gap-section py-group", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-item-xs", children: [_jsx(Text, { className: "font-medium", children: invitation.organizationName ?? t('unknownOrganization') }), invitation.roles.length > 0 && (_jsxs(Text, { className: "text-xs text-muted-foreground", children: [t('rolesPrefix'), " ", invitation.roles.join(', ')] }))] }), _jsxs("div", { className: "flex shrink-0 gap-element", children: [_jsx(Button, { variant: ButtonVariants_Variant.OUTLINE, size: ButtonSize.SM, disabled: busyId === invitation.membershipId, onClick: () => handleReject(invitation.membershipId), children: t('rejectButton') }), _jsx(Button, { size: ButtonSize.SM, disabled: busyId === invitation.membershipId, onClick: () => handleAccept(invitation.membershipId), children: t('acceptButton') })] })] }, invitation.membershipId))) })) })] })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-section", children: [_jsx("h3", { className: "text-base font-semibold tracking-tight", children: t('pageTitle') }), error && (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: error }) })), successMsg && (_jsx(Alert, { children: _jsx(AlertDescription, { children: successMsg }) })), _jsx(Card, { children: _jsx(CardContent, { className: "p-card", children: loading ? (_jsx(Text, { className: "text-sm text-muted-foreground", children: t('loading') })) : invitations.length === 0 ? (_jsx(Text, { className: "text-sm text-muted-foreground", children: t('empty') })) : (
+                    /* Flush divided list — same settings-list geometry as the
+                       SETTINGS_ROW field chrome (label/meta inline-start, actions
+                       inline-end, `py-group` rhythm, `divide-y` hairline dividers) so
+                       this bespoke action panel reads as the same family as the
+                       decorator-driven settings surfaces. (Was per-row bordered boxes
+                       with `space-y-2`, a visually divergent pattern.) */
+                    _jsx("ul", { className: "divide-y divide-border", children: invitations.map((invitation) => (_jsxs("li", { className: "flex items-center justify-between gap-section py-group", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-item-xs", children: [_jsx(Text, { className: "font-medium", children: invitation.organizationName ?? t('unknownOrganization') }), invitation.roles.length > 0 && (_jsxs(Text, { className: "text-xs text-muted-foreground", children: [t('rolesPrefix'), " ", invitation.roles.map((role) => tRole(role, 'label')).join(', ')] }))] }), _jsxs("div", { className: "flex shrink-0 gap-element", children: [_jsx(Button, { variant: ButtonVariants_Variant.OUTLINE, size: ButtonSize.SM, disabled: busyId === invitation.membershipId, onClick: () => handleReject(invitation.membershipId), children: t('rejectButton') }), _jsx(Button, { size: ButtonSize.SM, disabled: busyId === invitation.membershipId, onClick: () => handleAccept(invitation.membershipId), children: t('acceptButton') })] })] }, invitation.membershipId))) })) }) })] }));
 };
 //# sourceMappingURL=AppPage_InvitationsSettings.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppPage_InvitationsSettings.js","sourceRoot":"","sources":["../../../../src/components/settings/AppPage_InvitationsSettings.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAc,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,8CAA8C,CAAC;AACxG,OAAO,EAAE,MAAM,EAAE,sBAAsB,EAAE,MAAM,+CAA+C,CAAC;AAC/F,OAAO,EAAE,IAAI,EAAE,MAAM,gDAAgD,CAAC;AACtE,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,0DAA0D,CAAC;AACnG,OAAO,EAAE,OAAO,EAAE,MAAM,uCAAuC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAC5E,OAAO,EACL,wBAAwB,GAEzB,MAAM,mFAAmF,CAAC;AAE3F,MAAM,CAAC,MAAM,2BAA2B,GAAa,GAAG,EAAE;IACxD,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,EAAE,SAAS,EAAE,qBAAqB,CAAC,gCAAgC,EAAE,CAAC,CAAC;IAC/G,MAAM,EAAE,oBAAoB,EAAE,GAAG,WAAW,EAAE,CAAC;IAE/C,MAAM,CAAC,GAAG,WAAW,CACnB,CAAC,GAAW,EAAE,EAAE,CAAC,UAAU,CAAC,qBAAqB,CAAC,gCAAgC,EAAE,GAAG,CAAC,EACxF,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAA4B,EAAE,CAAC,CAAC;IAC9E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAC1D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAElE,MAAM,OAAO,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACrC,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,QAAQ,CAAC,IAAI,CAAC,CAAC;QACf,IAAI,CAAC;YACH,MAAM,GAAG,GAAG,MAAM,wBAAwB,EAAE,CAAC,wBAAwB,EAAE,CAAC;YACxE,cAAc,CAAC,GAAG,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC;QACxC,CAAC;QAAC,OAAO,CAAU,EAAE,CAAC;YACpB,IAAI,mBAAmB,CAAC,CAAC,CAAC;gBAAE,MAAM,CAAC,CAAC;YACpC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC;QAC9B,CAAC;gBAAS,CAAC;YACT,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAER,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,EAAE,CAAC;IACZ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,iFAAiF;IACjF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,UAAU;YAAE,OAAO;QACxB,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;QAC1D,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,YAAY,GAAG,WAAW,CAC9B,KAAK,EAAE,YAAoB,EAAE,EAAE;QAC7B,SAAS,CAAC,YAAY,CAAC,CAAC;QACxB,QAAQ,CAAC,IAAI,CAAC,CAAC;QACf,IAAI,CAAC;YACH,MAAM,wBAAwB,EAAE,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC;YAClE,8EAA8E;YAC9E,MAAM,oBAAoB,EAAE,CAAC;YAC7B,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC;YAClC,MAAM,OAAO,EAAE,CAAC;QAClB,CAAC;QAAC,OAAO,CAAU,EAAE,CAAC;YACpB,IAAI,mBAAmB,CAAC,CAAC,CAAC;gBAAE,MAAM,CAAC,CAAC;YACpC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC;QAC9B,CAAC;gBAAS,CAAC;YACT,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EACD,CAAC,OAAO,EAAE,oBAAoB,EAAE,CAAC,CAAC,CACnC,CAAC;IAEF,MAAM,YAAY,GAAG,WAAW,CAC9B,KAAK,EAAE,YAAoB,EAAE,EAAE;QAC7B,SAAS,CAAC,YAAY,CAAC,CAAC;QACxB,QAAQ,CAAC,IAAI,CAAC,CAAC;QACf,IAAI,CAAC;YACH,MAAM,wBAAwB,EAAE,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC;YAClE,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC;YAClC,MAAM,OAAO,EAAE,CAAC;QAClB,CAAC;QAAC,OAAO,CAAU,EAAE,CAAC;YACpB,IAAI,mBAAmB,CAAC,CAAC,CAAC;gBAAE,MAAM,CAAC,CAAC;YACpC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC;QAC9B,CAAC;gBAAS,CAAC;YACT,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EACD,CAAC,OAAO,EAAE,CAAC,CAAC,CACb,CAAC;IAEF,4FAA4F;IAC5F,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,OAAO,CACL,eAAK,SAAS,EAAC,2BAA2B,aACxC,eAAK,SAAS,EAAC,2BAA2B,aAGxC,aAAI,SAAS,EAAC,wCAAwC,YAAE,CAAC,CAAC,WAAW,CAAC,GAAM,EAC5E,KAAC,IAAI,IAAC,SAAS,EAAC,+BAA+B,YAAE,CAAC,CAAC,iBAAiB,CAAC,GAAQ,IACzE,EAEL,KAAK,IAAI,CACR,KAAC,KAAK,IAAC,OAAO,EAAC,aAAa,YAC1B,KAAC,gBAAgB,cAAE,KAAK,GAAoB,GACtC,CACT,EACA,UAAU,IAAI,CACb,KAAC,KAAK,cACJ,KAAC,gBAAgB,cAAE,UAAU,GAAoB,GAC3C,CACT,EAED,MAAC,IAAI,eACH,KAAC,UAAU,cACT,KAAC,SAAS,cAAE,CAAC,CAAC,aAAa,CAAC,GAAa,GAC9B,EACb,KAAC,WAAW,cACT,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,IAAI,IAAC,SAAS,EAAC,+BAA+B,YAAE,CAAC,CAAC,SAAS,CAAC,GAAQ,CACtE,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAC7B,KAAC,IAAI,IAAC,SAAS,EAAC,+BAA+B,YAAE,CAAC,CAAC,OAAO,CAAC,GAAQ,CACpE,CAAC,CAAC,CAAC;wBACF;;;;;8EAKsD;wBACtD,aAAI,SAAS,EAAC,wBAAwB,YACnC,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAC/B,cAEE,SAAS,EAAC,wDAAwD,aAElE,eAAK,SAAS,EAAC,mCAAmC,aAChD,KAAC,IAAI,IAAC,SAAS,EAAC,aAAa,YAAE,UAAU,CAAC,gBAAgB,IAAI,CAAC,CAAC,qBAAqB,CAAC,GAAQ,EAC7F,UAAU,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAC9B,MAAC,IAAI,IAAC,SAAS,EAAC,+BAA+B,aAC5C,CAAC,CAAC,aAAa,CAAC,OAAG,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAC1C,CACR,IACG,EACN,eAAK,SAAS,EAAC,2BAA2B,aACxC,KAAC,MAAM,IACL,OAAO,EAAE,sBAAsB,CAAC,OAAO,EACvC,IAAI,EAAE,UAAU,CAAC,EAAE,EACnB,QAAQ,EAAE,MAAM,KAAK,UAAU,CAAC,YAAY,EAC5C,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,YAEnD,CAAC,CAAC,cAAc,CAAC,GACX,EACT,KAAC,MAAM,IACL,IAAI,EAAE,UAAU,CAAC,EAAE,EACnB,QAAQ,EAAE,MAAM,KAAK,UAAU,CAAC,YAAY,EAC5C,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,YAEnD,CAAC,CAAC,cAAc,CAAC,GACX,IACL,KA3BD,UAAU,CAAC,YAAY,CA4BzB,CACN,CAAC,GACC,CACN,GACW,IACT,IACH,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n * AppPage_InvitationsSettings — the Settings Hub \"Invitations\" panel (Approach P).\n *\n * A bespoke `ENGINE_PANEL` (not a resource surface) that lets a signed-in user act on\n * THEIR OWN pending organization invitations in-app, without opening the emailed link.\n * It lists the caller's pending invitations — their own INVITED membership rows, resolved\n * server-side by userId-ownership via `GET /auth/invitations/mine` — and offers Accept /\n * Decline per row (Accept flips the row to ACTIVE; Decline deletes it) — calling the\n * authenticated `acceptMyInvitation` / `rejectMyInvitation` endpoints (no token, no new\n * session). On accept the caller becomes a member, so the panel refreshes the user's\n * organizations via `useUserOrgs().refreshOrganizations()` and re-lists.\n *\n * i18n follows the framework convention (same shape as `AppPage_AppearanceSettings`):\n * `useI18n({ component })` requests this component's label namespace, the panel gates\n * rendering on `isReady` so it never flashes raw key paths, and a thin `t(key)` reads\n * each label. Copy is owned by the labelling pipeline (sibling `.labels.ts`) — no\n * hardcoded fallback strings here.\n */\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { ButtonSize, FrontendComponentType } from '@wildo-ai/presets-components-models';\nimport { isWildoBackendError } from '@wildo-ai/saas-models';\nimport { Card, CardContent, CardHeader, CardTitle } from '~wildo-frontend-lib/components/sections/card';\nimport { Button, ButtonVariants_Variant } from '~wildo-frontend-lib/components/actions/button';\nimport { Text } from '~wildo-frontend-lib/components/typography/text';\nimport { Alert, AlertDescription } from '~wildo-frontend-lib/components/overlays/containers/alert';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { useUserOrgs } from '~wildo-frontend-lib/core/security/useUserOrgs';\nimport {\n  getManualCallsHttpClient,\n  type MyPendingInvitationView,\n} from '~wildo-frontend-lib/core/requests/wildo-http-client-manual-calls.frontend.service';\n\nexport const AppPage_InvitationsSettings: React.FC = () => {\n  const { tComponent, isReady } = useI18n({ component: FrontendComponentType.APP_LAYOUTS_INVITATIONS_SETTINGS });\n  const { refreshOrganizations } = useUserOrgs();\n\n  const t = useCallback(\n    (key: string) => tComponent(FrontendComponentType.APP_LAYOUTS_INVITATIONS_SETTINGS, key),\n    [tComponent],\n  );\n\n  const [invitations, setInvitations] = useState<MyPendingInvitationView[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [busyId, setBusyId] = useState<string | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  const [successMsg, setSuccessMsg] = useState<string | null>(null);\n\n  const refresh = useCallback(async () => {\n    setLoading(true);\n    setError(null);\n    try {\n      const res = await getManualCallsHttpClient().listMyPendingInvitations();\n      setInvitations(res.invitations ?? []);\n    } catch (e: unknown) {\n      if (isWildoBackendError(e)) throw e;\n      setError(t('errorGeneric'));\n    } finally {\n      setLoading(false);\n    }\n  }, [t]);\n\n  useEffect(() => {\n    refresh();\n  }, [refresh]);\n\n  // Auto-dismiss the success banner (same convention as AppPage_SecuritySettings).\n  useEffect(() => {\n    if (!successMsg) return;\n    const timer = setTimeout(() => setSuccessMsg(null), 5000);\n    return () => clearTimeout(timer);\n  }, [successMsg]);\n\n  const handleAccept = useCallback(\n    async (membershipId: string) => {\n      setBusyId(membershipId);\n      setError(null);\n      try {\n        await getManualCallsHttpClient().acceptMyInvitation(membershipId);\n        // The caller just became a member — refresh their org list before re-listing.\n        await refreshOrganizations();\n        setSuccessMsg(t('acceptSuccess'));\n        await refresh();\n      } catch (e: unknown) {\n        if (isWildoBackendError(e)) throw e;\n        setError(t('errorGeneric'));\n      } finally {\n        setBusyId(null);\n      }\n    },\n    [refresh, refreshOrganizations, t],\n  );\n\n  const handleReject = useCallback(\n    async (membershipId: string) => {\n      setBusyId(membershipId);\n      setError(null);\n      try {\n        await getManualCallsHttpClient().rejectMyInvitation(membershipId);\n        setSuccessMsg(t('rejectSuccess'));\n        await refresh();\n      } catch (e: unknown) {\n        if (isWildoBackendError(e)) throw e;\n        setError(t('errorGeneric'));\n      } finally {\n        setBusyId(null);\n      }\n    },\n    [refresh, t],\n  );\n\n  // Gate on label readiness so the panel never flashes raw key paths (Appearance convention).\n  if (!isReady) return null;\n\n  return (\n    <div className=\"flex flex-col gap-section\">\n      <div className=\"flex flex-col gap-item-xs\">\n        {/* `h3`, not `h2`: the Settings Hub header owns the `h2` for this dialog,\n            so a panel heading is one level below it. */}\n        <h3 className=\"text-base font-semibold tracking-tight\">{t('pageTitle')}</h3>\n        <Text className=\"text-sm text-muted-foreground\">{t('pageDescription')}</Text>\n      </div>\n\n      {error && (\n        <Alert variant=\"destructive\">\n          <AlertDescription>{error}</AlertDescription>\n        </Alert>\n      )}\n      {successMsg && (\n        <Alert>\n          <AlertDescription>{successMsg}</AlertDescription>\n        </Alert>\n      )}\n\n      <Card>\n        <CardHeader>\n          <CardTitle>{t('listHeading')}</CardTitle>\n        </CardHeader>\n        <CardContent>\n          {loading ? (\n            <Text className=\"text-sm text-muted-foreground\">{t('loading')}</Text>\n          ) : invitations.length === 0 ? (\n            <Text className=\"text-sm text-muted-foreground\">{t('empty')}</Text>\n          ) : (\n            /* Flush divided list — same settings-list geometry as the\n               SETTINGS_ROW field chrome (label/meta inline-start, actions\n               inline-end, `py-group` rhythm, `divide-y` hairline dividers) so\n               this bespoke action panel reads as the same family as the\n               decorator-driven settings surfaces. (Was per-row bordered boxes\n               with `space-y-2`, a visually divergent pattern.) */\n            <ul className=\"divide-y divide-border\">\n              {invitations.map((invitation) => (\n                <li\n                  key={invitation.membershipId}\n                  className=\"flex items-center justify-between gap-section py-group\"\n                >\n                  <div className=\"flex min-w-0 flex-col gap-item-xs\">\n                    <Text className=\"font-medium\">{invitation.organizationName ?? t('unknownOrganization')}</Text>\n                    {invitation.roles.length > 0 && (\n                      <Text className=\"text-xs text-muted-foreground\">\n                        {t('rolesPrefix')} {invitation.roles.join(', ')}\n                      </Text>\n                    )}\n                  </div>\n                  <div className=\"flex shrink-0 gap-element\">\n                    <Button\n                      variant={ButtonVariants_Variant.OUTLINE}\n                      size={ButtonSize.SM}\n                      disabled={busyId === invitation.membershipId}\n                      onClick={() => handleReject(invitation.membershipId)}\n                    >\n                      {t('rejectButton')}\n                    </Button>\n                    <Button\n                      size={ButtonSize.SM}\n                      disabled={busyId === invitation.membershipId}\n                      onClick={() => handleAccept(invitation.membershipId)}\n                    >\n                      {t('acceptButton')}\n                    </Button>\n                  </div>\n                </li>\n              ))}\n            </ul>\n          )}\n        </CardContent>\n      </Card>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"AppPage_InvitationsSettings.js","sourceRoot":"","sources":["../../../../../src/components/settings/AppPage_InvitationsSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * AppPage_InvitationsSettings — the Settings Hub \"Invitations\" panel (Approach P).\n *\n * A bespoke `ENGINE_PANEL` (not a resource surface) that lets a signed-in user act on\n * THEIR OWN pending organization invitations in-app, without opening the emailed link.\n * It lists the caller's pending invitations — their own INVITED membership rows, resolved\n * server-side by userId-ownership via `GET /auth/invitations/mine` — and offers Accept /\n * Decline per row (Accept flips the row to ACTIVE; Decline deletes it) — calling the\n * authenticated `acceptMyInvitation` / `rejectMyInvitation` endpoints (no token, no new\n * session). On accept the caller becomes a member, so the panel refreshes the user's\n * organizations via `useUserOrgs().refreshOrganizations()` and re-lists.\n *\n * i18n follows the framework convention (same shape as `AppPage_AppearanceSettings`):\n * `useI18n({ component })` requests this component's label namespace, the panel gates\n * rendering on `isReady` so it never flashes raw key paths, and a thin `t(key)` reads\n * each label. Copy is owned by the labelling pipeline (sibling `.labels.ts`) — no\n * hardcoded fallback strings here.\n */\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { ButtonSize, FrontendComponentType, LabellingTypes } from '@wildo-ai/presets-components-models';\nimport { isWildoBackendError } from '@wildo-ai/saas-models';\nimport { Card, CardContent } from '~wildo-frontend-lib/components/sections/card';\nimport { Button, ButtonVariants_Variant } from '~wildo-frontend-lib/components/actions/button';\nimport { Text } from '~wildo-frontend-lib/components/typography/text';\nimport { Alert, AlertDescription } from '~wildo-frontend-lib/components/overlays/containers/alert';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { useUserOrgs } from '~wildo-frontend-lib/core/security/useUserOrgs';\nimport {\n  getManualCallsHttpClient,\n  type MyPendingInvitationView,\n} from '~wildo-frontend-lib/core/requests/wildo-http-client-manual-calls.frontend.service';\n\n/*\n * The role words live in the application's `roles` labels, planned from every registered role, not in this\n * panel's own namespace. Module-level so the requested set keeps one identity across renders.\n */\nconst INVITATION_ROLE_LABEL_NAMESPACES = [LabellingTypes.ROLES];\n\nexport const AppPage_InvitationsSettings: React.FC = () => {\n  const { tComponent, tRole, isReady } = useI18n({\n    component: FrontendComponentType.APP_LAYOUTS_INVITATIONS_SETTINGS,\n    keys: INVITATION_ROLE_LABEL_NAMESPACES,\n  });\n  const { refreshOrganizations } = useUserOrgs();\n\n  const t = useCallback(\n    (key: string) => tComponent(FrontendComponentType.APP_LAYOUTS_INVITATIONS_SETTINGS, key),\n    [tComponent],\n  );\n\n  const [invitations, setInvitations] = useState<MyPendingInvitationView[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [busyId, setBusyId] = useState<string | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  const [successMsg, setSuccessMsg] = useState<string | null>(null);\n\n  const refresh = useCallback(async () => {\n    setLoading(true);\n    setError(null);\n    try {\n      const res = await getManualCallsHttpClient().listMyPendingInvitations();\n      setInvitations(res.invitations ?? []);\n    } catch (e: unknown) {\n      if (isWildoBackendError(e)) throw e;\n      setError(t('errorGeneric'));\n    } finally {\n      setLoading(false);\n    }\n  }, [t]);\n\n  useEffect(() => {\n    refresh();\n  }, [refresh]);\n\n  // Auto-dismiss the success banner (same convention as AppPage_SecuritySettings).\n  useEffect(() => {\n    if (!successMsg) return;\n    const timer = setTimeout(() => setSuccessMsg(null), 5000);\n    return () => clearTimeout(timer);\n  }, [successMsg]);\n\n  const handleAccept = useCallback(\n    async (membershipId: string) => {\n      setBusyId(membershipId);\n      setError(null);\n      try {\n        await getManualCallsHttpClient().acceptMyInvitation(membershipId);\n        // The caller just became a member — refresh their org list before re-listing.\n        await refreshOrganizations();\n        setSuccessMsg(t('acceptSuccess'));\n        await refresh();\n      } catch (e: unknown) {\n        if (isWildoBackendError(e)) throw e;\n        setError(t('errorGeneric'));\n      } finally {\n        setBusyId(null);\n      }\n    },\n    [refresh, refreshOrganizations, t],\n  );\n\n  const handleReject = useCallback(\n    async (membershipId: string) => {\n      setBusyId(membershipId);\n      setError(null);\n      try {\n        await getManualCallsHttpClient().rejectMyInvitation(membershipId);\n        setSuccessMsg(t('rejectSuccess'));\n        await refresh();\n      } catch (e: unknown) {\n        if (isWildoBackendError(e)) throw e;\n        setError(t('errorGeneric'));\n      } finally {\n        setBusyId(null);\n      }\n    },\n    [refresh, t],\n  );\n\n  // Gate on label readiness so the panel never flashes raw key paths (Appearance convention).\n  if (!isReady) return null;\n\n  return (\n    <div className=\"flex flex-col gap-section\">\n      {/* `h3`, not `h2`: the Settings Hub header owns the `h2` for this dialog,\n          so a panel heading is one level below it. No sub-heading: it restated\n          the Accept / Decline buttons each row carries. */}\n      <h3 className=\"text-base font-semibold tracking-tight\">{t('pageTitle')}</h3>\n\n      {error && (\n        <Alert variant=\"destructive\">\n          <AlertDescription>{error}</AlertDescription>\n        </Alert>\n      )}\n      {successMsg && (\n        <Alert>\n          <AlertDescription>{successMsg}</AlertDescription>\n        </Alert>\n      )}\n\n      {/* No card title: \"Pending Invitations\" repeated the panel heading one line\n          above it, and every row it could hold is by definition pending. */}\n      <Card>\n        <CardContent className=\"p-card\">\n          {loading ? (\n            <Text className=\"text-sm text-muted-foreground\">{t('loading')}</Text>\n          ) : invitations.length === 0 ? (\n            <Text className=\"text-sm text-muted-foreground\">{t('empty')}</Text>\n          ) : (\n            /* Flush divided list — same settings-list geometry as the\n               SETTINGS_ROW field chrome (label/meta inline-start, actions\n               inline-end, `py-group` rhythm, `divide-y` hairline dividers) so\n               this bespoke action panel reads as the same family as the\n               decorator-driven settings surfaces. (Was per-row bordered boxes\n               with `space-y-2`, a visually divergent pattern.) */\n            <ul className=\"divide-y divide-border\">\n              {invitations.map((invitation) => (\n                <li\n                  key={invitation.membershipId}\n                  className=\"flex items-center justify-between gap-section py-group\"\n                >\n                  <div className=\"flex min-w-0 flex-col gap-item-xs\">\n                    <Text className=\"font-medium\">{invitation.organizationName ?? t('unknownOrganization')}</Text>\n                    {invitation.roles.length > 0 && (\n                      <Text className=\"text-xs text-muted-foreground\">\n                        {/* Each role by its word, as a member directory shows it; a role with no word shows its key. */}\n                        {t('rolesPrefix')} {invitation.roles.map((role) => tRole(role, 'label')).join(', ')}\n                      </Text>\n                    )}\n                  </div>\n                  <div className=\"flex shrink-0 gap-element\">\n                    <Button\n                      variant={ButtonVariants_Variant.OUTLINE}\n                      size={ButtonSize.SM}\n                      disabled={busyId === invitation.membershipId}\n                      onClick={() => handleReject(invitation.membershipId)}\n                    >\n                      {t('rejectButton')}\n                    </Button>\n                    <Button\n                      size={ButtonSize.SM}\n                      disabled={busyId === invitation.membershipId}\n                      onClick={() => handleAccept(invitation.membershipId)}\n                    >\n                      {t('acceptButton')}\n                    </Button>\n                  </div>\n                </li>\n              ))}\n            </ul>\n          )}\n        </CardContent>\n      </Card>\n    </div>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"AppPage_InvitationsSettings.labels.d.ts","sourceRoot":"","sources":["../../../../src/components/settings/AppPage_InvitationsSettings.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAO7C,eAAO,MAAM,mCAAmC,EAAE,mBAAmB,EAapE,CAAC"}
+{"version":3,"file":"AppPage_InvitationsSettings.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/settings/AppPage_InvitationsSettings.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAW7C,eAAO,MAAM,mCAAmC,EAAE,mBAAmB,EAWpE,CAAC"}

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

@@ -4,10 +4,12 @@ import { FrontendComponentType, LabelKind, registerComponentLabels, } from '@wil
 // `components.APP_LAYOUTS_INVITATIONS_SETTINGS.*` bundle; NOT imported at runtime,
 // so it never ships in the browser bundle. Keep in lock-step with the keys the
 // component reads via `tComponent(APP_LAYOUTS_INVITATIONS_SETTINGS, ...)`.
+//
+// No sub-heading and no list heading: `pageDescription` restated the Accept /
+// Decline buttons, and `listHeading` ("Pending Invitations") restated the panel
+// heading directly above it. Both were removed with the text they rendered.
 export const AppLayoutsInvitationsSettingsLabels = [
     { ref: 'pageTitle', kind: LabelKind.HEADING, purpose: 'Heading for the Invitations settings panel (the user’s own pending org invitations)' },
-    { ref: 'pageDescription', kind: LabelKind.DESCRIPTION, purpose: 'Sub-heading explaining the panel lists organizations that invited this user, to accept or decline' },
-    { ref: 'listHeading', kind: LabelKind.HEADING, purpose: 'Section title above the list of pending invitations' },
     { ref: 'loading', kind: LabelKind.MESSAGE, purpose: 'Shown while the pending invitations are being loaded' },
     { ref: 'empty', kind: LabelKind.MESSAGE, purpose: 'Shown when the user has no pending invitations' },
     { ref: 'unknownOrganization', kind: LabelKind.LABEL, purpose: 'Fallback label for an invitation whose organization name could not be resolved' },

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

@@ -1 +1 @@
-{"version":3,"file":"AppPage_InvitationsSettings.labels.js","sourceRoot":"","sources":["../../../../src/components/settings/AppPage_InvitationsSettings.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,SAAS,EAET,uBAAuB,GACxB,MAAM,qCAAqC,CAAC;AAE7C,gFAAgF;AAChF,6EAA6E;AAC7E,mFAAmF;AACnF,+EAA+E;AAC/E,2EAA2E;AAC3E,MAAM,CAAC,MAAM,mCAAmC,GAA0B;IACxE,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,qFAAqF,EAAE;IAC7I,EAAE,GAAG,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,CAAC,WAAW,EAAE,OAAO,EAAE,mGAAmG,EAAE;IACrK,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,qDAAqD,EAAE;IAC/G,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,sDAAsD,EAAE;IAC5G,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,gDAAgD,EAAE;IACpG,EAAE,GAAG,EAAE,qBAAqB,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,gFAAgF,EAAE;IAChJ,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,uEAAuE,EAAE;IAC/H,EAAE,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,CAAC,MAAM,EAAE,OAAO,EAAE,+DAA+D,EAAE;IACzH,EAAE,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,CAAC,MAAM,EAAE,OAAO,EAAE,qCAAqC,EAAE;IAC/F,EAAE,GAAG,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,yDAAyD,EAAE;IACrH,EAAE,GAAG,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,0DAA0D,EAAE;IACtH,EAAE,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,0EAA0E,EAAE;CACtI,CAAC;AAEF,uBAAuB,CAAC,qBAAqB,CAAC,gCAAgC,EAAE,mCAAmC,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 Invitations settings panel: keys + kind\n// + per-key purpose. Statically scanned by the dev companion to generate the\n// `components.APP_LAYOUTS_INVITATIONS_SETTINGS.*` bundle; NOT imported at runtime,\n// so it never ships in the browser bundle. Keep in lock-step with the keys the\n// component reads via `tComponent(APP_LAYOUTS_INVITATIONS_SETTINGS, ...)`.\nexport const AppLayoutsInvitationsSettingsLabels: LabellingUnitaryDef[] = [\n  { ref: 'pageTitle', kind: LabelKind.HEADING, purpose: 'Heading for the Invitations settings panel (the user’s own pending org invitations)' },\n  { ref: 'pageDescription', kind: LabelKind.DESCRIPTION, purpose: 'Sub-heading explaining the panel lists organizations that invited this user, to accept or decline' },\n  { ref: 'listHeading', kind: LabelKind.HEADING, purpose: 'Section title above the list of pending invitations' },\n  { ref: 'loading', kind: LabelKind.MESSAGE, purpose: 'Shown while the pending invitations are being loaded' },\n  { ref: 'empty', kind: LabelKind.MESSAGE, purpose: 'Shown when the user has no pending invitations' },\n  { ref: 'unknownOrganization', kind: LabelKind.LABEL, purpose: 'Fallback label for an invitation whose organization name could not be resolved' },\n  { ref: 'rolesPrefix', kind: LabelKind.LABEL, purpose: 'Prefix before the list of roles the invitation grants (e.g. \"Roles:\")' },\n  { ref: 'acceptButton', kind: LabelKind.BUTTON, purpose: 'Button that accepts the invitation and joins the organization' },\n  { ref: 'rejectButton', kind: LabelKind.BUTTON, purpose: 'Button that declines the invitation' },\n  { ref: 'acceptSuccess', kind: LabelKind.MESSAGE, purpose: 'Confirmation shown after the user accepts an invitation' },\n  { ref: 'rejectSuccess', kind: LabelKind.MESSAGE, purpose: 'Confirmation shown after the user declines an invitation' },\n  { ref: 'errorGeneric', kind: LabelKind.MESSAGE, purpose: 'Generic error shown when listing/accepting/declining an invitation fails' },\n];\n\nregisterComponentLabels(FrontendComponentType.APP_LAYOUTS_INVITATIONS_SETTINGS, AppLayoutsInvitationsSettingsLabels);\n"]}
+{"version":3,"file":"AppPage_InvitationsSettings.labels.js","sourceRoot":"","sources":["../../../../../src/components/settings/AppPage_InvitationsSettings.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,SAAS,EAET,uBAAuB,GACxB,MAAM,qCAAqC,CAAC;AAE7C,gFAAgF;AAChF,6EAA6E;AAC7E,mFAAmF;AACnF,+EAA+E;AAC/E,2EAA2E;AAC3E,EAAE;AACF,8EAA8E;AAC9E,gFAAgF;AAChF,4EAA4E;AAC5E,MAAM,CAAC,MAAM,mCAAmC,GAA0B;IACxE,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,qFAAqF,EAAE;IAC7I,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,sDAAsD,EAAE;IAC5G,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,gDAAgD,EAAE;IACpG,EAAE,GAAG,EAAE,qBAAqB,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,gFAAgF,EAAE;IAChJ,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,uEAAuE,EAAE;IAC/H,EAAE,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,CAAC,MAAM,EAAE,OAAO,EAAE,+DAA+D,EAAE;IACzH,EAAE,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,CAAC,MAAM,EAAE,OAAO,EAAE,qCAAqC,EAAE;IAC/F,EAAE,GAAG,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,yDAAyD,EAAE;IACrH,EAAE,GAAG,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,0DAA0D,EAAE;IACtH,EAAE,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,0EAA0E,EAAE;CACtI,CAAC;AAEF,uBAAuB,CAAC,qBAAqB,CAAC,gCAAgC,EAAE,mCAAmC,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 Invitations settings panel: keys + kind\n// + per-key purpose. Statically scanned by the dev companion to generate the\n// `components.APP_LAYOUTS_INVITATIONS_SETTINGS.*` bundle; NOT imported at runtime,\n// so it never ships in the browser bundle. Keep in lock-step with the keys the\n// component reads via `tComponent(APP_LAYOUTS_INVITATIONS_SETTINGS, ...)`.\n//\n// No sub-heading and no list heading: `pageDescription` restated the Accept /\n// Decline buttons, and `listHeading` (\"Pending Invitations\") restated the panel\n// heading directly above it. Both were removed with the text they rendered.\nexport const AppLayoutsInvitationsSettingsLabels: LabellingUnitaryDef[] = [\n  { ref: 'pageTitle', kind: LabelKind.HEADING, purpose: 'Heading for the Invitations settings panel (the user’s own pending org invitations)' },\n  { ref: 'loading', kind: LabelKind.MESSAGE, purpose: 'Shown while the pending invitations are being loaded' },\n  { ref: 'empty', kind: LabelKind.MESSAGE, purpose: 'Shown when the user has no pending invitations' },\n  { ref: 'unknownOrganization', kind: LabelKind.LABEL, purpose: 'Fallback label for an invitation whose organization name could not be resolved' },\n  { ref: 'rolesPrefix', kind: LabelKind.LABEL, purpose: 'Prefix before the list of roles the invitation grants (e.g. \"Roles:\")' },\n  { ref: 'acceptButton', kind: LabelKind.BUTTON, purpose: 'Button that accepts the invitation and joins the organization' },\n  { ref: 'rejectButton', kind: LabelKind.BUTTON, purpose: 'Button that declines the invitation' },\n  { ref: 'acceptSuccess', kind: LabelKind.MESSAGE, purpose: 'Confirmation shown after the user accepts an invitation' },\n  { ref: 'rejectSuccess', kind: LabelKind.MESSAGE, purpose: 'Confirmation shown after the user declines an invitation' },\n  { ref: 'errorGeneric', kind: LabelKind.MESSAGE, purpose: 'Generic error shown when listing/accepting/declining an invitation fails' },\n];\n\nregisterComponentLabels(FrontendComponentType.APP_LAYOUTS_INVITATIONS_SETTINGS, AppLayoutsInvitationsSettingsLabels);\n"]}

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

@@ -1,13 +1,19 @@
 /**
  * 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
@@ -17,6 +23,8 @@ import React from 'react';
 export interface SettingsHubProps {
     /** Section to pre-open; falls back to the config default. */
     sectionRef?: string;
+    /** Sub-tab of `sectionRef` to pre-open; ignored when the section declares no such tab. */
+    subTabRef?: string;
 }
-export declare function SettingsHub({ sectionRef }: SettingsHubProps): React.JSX.Element;
+export declare function SettingsHub({ sectionRef, subTabRef }: SettingsHubProps): React.JSX.Element;
 //# sourceMappingURL=SettingsHub.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SettingsHub.d.ts","sourceRoot":"","sources":["../../../../src/components/settings/SettingsHub.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,KAAoD,MAAM,OAAO,CAAC;AAqJzE,MAAM,WAAW,gBAAgB;IAC/B,6DAA6D;IAC7D,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAoH/E"}
+{"version":3,"file":"SettingsHub.d.ts","sourceRoot":"","sources":["../../../../../src/components/settings/SettingsHub.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,KAA4D,MAAM,OAAO,CAAC;AA4MjF,MAAM,WAAW,gBAAgB;IAC/B,6DAA6D;IAC7D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA2T1F"}

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

@@ -2,35 +2,51 @@ 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';
 import { AppPage_BillingSettings } from './AppPage_BillingSettings.js';
 import { ExternalProvider_Connection_OwnerScope } from '@wildo-ai/external-connectors-models';
 import { AppPage_ConnectedAccountsSettings } from './AppPage_ConnectedAccountsSettings.js';
+import { AppPage_AgentWorkOverrideRateSettings } from './AppPage_AgentWorkOverrideRateSettings.js';
 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
@@ -73,9 +89,11 @@ function SettingsEnginePanel({ panelRef }) {
             // A default is invisible at the call site, and the one thing a reader must be able to see here
             // is whose account each panel connects.
             return _jsx(AppPage_ConnectedAccountsSettings, { ownerScope: ExternalProvider_Connection_OwnerScope.ORGANIZATION });
+        case SettingsPanelRef.AGENT_WORK_OVERRIDE_RATE:
+            return _jsx(AppPage_AgentWorkOverrideRateSettings, {});
     }
 }
-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 +107,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 +218,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 +236,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 +273,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