@wildo-ai/saas-frontend-lib 1.0.1 → 1.1.0

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

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AppPage_BillingSettings — the Settings Hub "Billing" panel: THE billing home.
+ *
+ * A bespoke `ENGINE_PANEL` (not a resource surface) composing the shared billing
+ * widgets over the aggregated `BillingContext` state (`GET_STATE`): subscription
+ * status, provider portal link, plan catalog + checkout, metered usage / credit
+ * pools, and invoice history. Every widget self-hydrates from `useBillingSafe()`
+ * (plan-name i18n, provider display name, safe checkout/portal execution), so
+ * this panel is pure composition — it passes NO data props.
+ *
+ * Why bespoke rather than `RESOURCE_OPERATION` sub-tabs (the previous shape):
+ * the billing child resources (subscriptions, invoice refs, usage records) are
+ * routed UNDER the billing account (`REQUIRES_CONTEXT` on the
+ * `BillingAccounts → children` edges), so an org-scoped generic panel cannot
+ * build their URLs (`FRONTEND_RESOURCE_NO_ENDPOINT_AVAILABLE`). The aggregated
+ * billing state IS org-addressable and auto-creates the billing account, which
+ * makes it the correct settings-surface data source.
+ *
+ * i18n follows the framework convention (same shape as
+ * `AppPage_InvitationsSettings`): `useI18n({ component })` requests this
+ * component's label namespace, the panel gates rendering on `isReady` so it
+ * never flashes raw key paths, and a thin `t(key)` reads each label. Copy is
+ * owned by the labelling pipeline (sibling `.labels.ts`) — no hardcoded
+ * fallback strings here.
+ */
+import { useCallback } from 'react';
+import { FrontendComponentType } from '@wildo-ai/presets-components-models';
+import { Card, CardContent, CardHeader, CardTitle } from '../../components/sections/card.js';
+import { Text } from '../../components/typography/text.js';
+import { SubscriptionStatus } from '../../components/billing/billing-subscription-status.js';
+import { BillingPortalLink } from '../../components/billing/billing-portal-link.js';
+import { PricingTable } from '../../components/billing/billing-pricing-table.js';
+import { UsageDashboard } from '../../components/billing/billing-usage-dashboard.js';
+import { InvoiceHistory } from '../../components/billing/billing-invoice-history.js';
+import { useBillingSafe } from '../../core/billing/useBilling.js';
+import { useI18n } from '../../core/i18n/useI18n.js';
+export const AppPage_BillingSettings = () => {
+    const billing = useBillingSafe();
+    const { tComponent, isReady } = useI18n({ component: FrontendComponentType.APP_LAYOUTS_BILLING_SETTINGS });
+    const t = useCallback((key) => tComponent(FrontendComponentType.APP_LAYOUTS_BILLING_SETTINGS, key), [tComponent]);
+    // Gate on label readiness so the panel never flashes raw key paths.
+    if (!isReady)
+        return null;
+    // The section itself is capability-gated (`billingEnabled`), so this state is
+    // only reachable when the hub config and the runtime capability disagree
+    // (e.g. billing flipped off between config loads). Render an honest message
+    // rather than an empty panel.
+    if (!billing?.isEnabled) {
+        return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t('disabledTitle') }) }), _jsx(CardContent, { children: _jsx(Text, { className: "text-sm text-muted-foreground", children: t('disabledDescription') }) })] }));
+    }
+    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') })] }), _jsxs("div", { className: "grid gap-group lg:grid-cols-2", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t('subscriptionHeading') }) }), _jsx(CardContent, { children: _jsx(SubscriptionStatus, {}) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t('manageHeading') }) }), _jsxs(CardContent, { className: "space-y-item-sm", children: [_jsx(Text, { className: "text-sm text-muted-foreground", children: t('manageDescription') }), _jsx(BillingPortalLink, {})] })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t('plansHeading') }) }), _jsx(CardContent, { children: _jsx(PricingTable, {}) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t('usageHeading') }) }), _jsx(CardContent, { children: _jsx(UsageDashboard, {}) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t('invoicesHeading') }) }), _jsx(CardContent, { children: _jsx(InvoiceHistory, {}) })] })] }));
+};
+//# sourceMappingURL=AppPage_BillingSettings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppPage_BillingSettings.js","sourceRoot":"","sources":["../../../../../src/components/settings/AppPage_BillingSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * AppPage_BillingSettings — the Settings Hub \"Billing\" panel: THE billing home.\n *\n * A bespoke `ENGINE_PANEL` (not a resource surface) composing the shared billing\n * widgets over the aggregated `BillingContext` state (`GET_STATE`): subscription\n * status, provider portal link, plan catalog + checkout, metered usage / credit\n * pools, and invoice history. Every widget self-hydrates from `useBillingSafe()`\n * (plan-name i18n, provider display name, safe checkout/portal execution), so\n * this panel is pure composition — it passes NO data props.\n *\n * Why bespoke rather than `RESOURCE_OPERATION` sub-tabs (the previous shape):\n * the billing child resources (subscriptions, invoice refs, usage records) are\n * routed UNDER the billing account (`REQUIRES_CONTEXT` on the\n * `BillingAccounts → children` edges), so an org-scoped generic panel cannot\n * build their URLs (`FRONTEND_RESOURCE_NO_ENDPOINT_AVAILABLE`). The aggregated\n * billing state IS org-addressable and auto-creates the billing account, which\n * makes it the correct settings-surface data source.\n *\n * i18n follows the framework convention (same shape as\n * `AppPage_InvitationsSettings`): `useI18n({ component })` requests this\n * component's label namespace, the panel gates rendering on `isReady` so it\n * never flashes raw key paths, and a thin `t(key)` reads each label. Copy is\n * owned by the labelling pipeline (sibling `.labels.ts`) — no hardcoded\n * fallback strings here.\n */\nimport React, { useCallback } from 'react';\nimport { FrontendComponentType } from '@wildo-ai/presets-components-models';\nimport { Card, CardContent, CardHeader, CardTitle } from '~wildo-frontend-lib/components/sections/card';\nimport { Text } from '~wildo-frontend-lib/components/typography/text';\nimport { SubscriptionStatus } from '~wildo-frontend-lib/components/billing/billing-subscription-status';\nimport { BillingPortalLink } from '~wildo-frontend-lib/components/billing/billing-portal-link';\nimport { PricingTable } from '~wildo-frontend-lib/components/billing/billing-pricing-table';\nimport { UsageDashboard } from '~wildo-frontend-lib/components/billing/billing-usage-dashboard';\nimport { InvoiceHistory } from '~wildo-frontend-lib/components/billing/billing-invoice-history';\nimport { useBillingSafe } from '~wildo-frontend-lib/core/billing/useBilling';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\n\nexport const AppPage_BillingSettings: React.FC = () => {\n  const billing = useBillingSafe();\n  const { tComponent, isReady } = useI18n({ component: FrontendComponentType.APP_LAYOUTS_BILLING_SETTINGS });\n\n  const t = useCallback(\n    (key: string) => tComponent(FrontendComponentType.APP_LAYOUTS_BILLING_SETTINGS, key),\n    [tComponent],\n  );\n\n  // Gate on label readiness so the panel never flashes raw key paths.\n  if (!isReady) return null;\n\n  // The section itself is capability-gated (`billingEnabled`), so this state is\n  // only reachable when the hub config and the runtime capability disagree\n  // (e.g. billing flipped off between config loads). Render an honest message\n  // rather than an empty panel.\n  if (!billing?.isEnabled) {\n    return (\n      <Card>\n        <CardHeader>\n          <CardTitle>{t('disabledTitle')}</CardTitle>\n        </CardHeader>\n        <CardContent>\n          <Text className=\"text-sm text-muted-foreground\">{t('disabledDescription')}</Text>\n        </CardContent>\n      </Card>\n    );\n  }\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      <div className=\"grid gap-group lg:grid-cols-2\">\n        <Card>\n          <CardHeader>\n            <CardTitle>{t('subscriptionHeading')}</CardTitle>\n          </CardHeader>\n          <CardContent>\n            {/* Self-hydrates: status/plan/period from the subscription, plan name\n                via billing-product i18n, manage action = safe customer portal. */}\n            <SubscriptionStatus />\n          </CardContent>\n        </Card>\n\n        <Card>\n          <CardHeader>\n            <CardTitle>{t('manageHeading')}</CardTitle>\n          </CardHeader>\n          <CardContent className=\"space-y-item-sm\">\n            <Text className=\"text-sm text-muted-foreground\">{t('manageDescription')}</Text>\n            <BillingPortalLink />\n          </CardContent>\n        </Card>\n      </div>\n\n      <Card>\n        <CardHeader>\n          <CardTitle>{t('plansHeading')}</CardTitle>\n        </CardHeader>\n        <CardContent>\n          {/* Self-hydrates: public active PLAN products scoped to the current\n              billing scope; select = checkout (no subscription) / portal (active). */}\n          <PricingTable />\n        </CardContent>\n      </Card>\n\n      <Card>\n        <CardHeader>\n          <CardTitle>{t('usageHeading')}</CardTitle>\n        </CardHeader>\n        <CardContent>\n          <UsageDashboard />\n        </CardContent>\n      </Card>\n\n      <Card>\n        <CardHeader>\n          <CardTitle>{t('invoicesHeading')}</CardTitle>\n        </CardHeader>\n        <CardContent>\n          <InvoiceHistory />\n        </CardContent>\n      </Card>\n    </div>\n  );\n};\n"]}

package/dist/esm/components/settings/AppPage_BillingSettings.labels.d.ts

@@ -0,0 +1,3 @@
+import { type LabellingUnitaryDef } from '@wildo-ai/presets-components-models';
+export declare const AppLayoutsBillingSettingsLabels: LabellingUnitaryDef[];
+//# sourceMappingURL=AppPage_BillingSettings.labels.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppPage_BillingSettings.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/settings/AppPage_BillingSettings.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAQ7C,eAAO,MAAM,+BAA+B,EAAE,mBAAmB,EAWhE,CAAC"}

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

@@ -0,0 +1,21 @@
+import { FrontendComponentType, LabelKind, registerComponentLabels, } from '@wildo-ai/presets-components-models';
+// Companion-only label metadata for the Settings Hub "Billing" panel (the
+// billing home). Statically scanned by the dev companion; NOT imported at
+// runtime, so it never ships in the browser bundle. The billing WIDGETS the
+// panel composes own their own label namespaces (subscription status, pricing
+// table, usage dashboard, invoice history, portal link) — only the panel's
+// framing copy lives here.
+export const AppLayoutsBillingSettingsLabels = [
+    { ref: 'pageTitle', kind: LabelKind.HEADING, purpose: 'Page title of the billing settings panel (the billing home)' },
+    { ref: 'pageDescription', kind: LabelKind.DESCRIPTION, purpose: 'One-sentence framing under the billing page title: manage the plan, monitor usage, review invoices' },
+    { ref: 'subscriptionHeading', kind: LabelKind.HEADING, purpose: 'Card heading over the current subscription status widget' },
+    { ref: 'manageHeading', kind: LabelKind.HEADING, purpose: 'Card heading over the billing-provider portal link (payment methods, renewals)' },
+    { ref: 'manageDescription', kind: LabelKind.DESCRIPTION, purpose: 'Explains that the provider portal is where payment details, renewals and plan changes are managed' },
+    { ref: 'plansHeading', kind: LabelKind.HEADING, purpose: 'Card heading over the plan comparison / pricing table' },
+    { ref: 'usageHeading', kind: LabelKind.HEADING, purpose: 'Card heading over the metered usage and credit-pool dashboard' },
+    { ref: 'invoicesHeading', kind: LabelKind.HEADING, purpose: 'Card heading over the invoice history list' },
+    { ref: 'disabledTitle', kind: LabelKind.HEADING, purpose: 'Heading shown when billing is not enabled for the current runtime' },
+    { ref: 'disabledDescription', kind: LabelKind.DESCRIPTION, purpose: 'Explains that billing is currently disabled for this application' },
+];
+registerComponentLabels(FrontendComponentType.APP_LAYOUTS_BILLING_SETTINGS, AppLayoutsBillingSettingsLabels);
+//# sourceMappingURL=AppPage_BillingSettings.labels.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppPage_BillingSettings.labels.js","sourceRoot":"","sources":["../../../../../src/components/settings/AppPage_BillingSettings.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,SAAS,EAET,uBAAuB,GACxB,MAAM,qCAAqC,CAAC;AAE7C,0EAA0E;AAC1E,0EAA0E;AAC1E,4EAA4E;AAC5E,8EAA8E;AAC9E,2EAA2E;AAC3E,2BAA2B;AAC3B,MAAM,CAAC,MAAM,+BAA+B,GAA0B;IACpE,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,6DAA6D,EAAE;IACrH,EAAE,GAAG,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,CAAC,WAAW,EAAE,OAAO,EAAE,oGAAoG,EAAE;IACtK,EAAE,GAAG,EAAE,qBAAqB,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,0DAA0D,EAAE;IAC5H,EAAE,GAAG,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,gFAAgF,EAAE;IAC5I,EAAE,GAAG,EAAE,mBAAmB,EAAE,IAAI,EAAE,SAAS,CAAC,WAAW,EAAE,OAAO,EAAE,mGAAmG,EAAE;IACvK,EAAE,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,uDAAuD,EAAE;IAClH,EAAE,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,+DAA+D,EAAE;IAC1H,EAAE,GAAG,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,4CAA4C,EAAE;IAC1G,EAAE,GAAG,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,mEAAmE,EAAE;IAC/H,EAAE,GAAG,EAAE,qBAAqB,EAAE,IAAI,EAAE,SAAS,CAAC,WAAW,EAAE,OAAO,EAAE,kEAAkE,EAAE;CACzI,CAAC;AAEF,uBAAuB,CAAC,qBAAqB,CAAC,4BAA4B,EAAE,+BAA+B,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 \"Billing\" panel (the\n// billing home). Statically scanned by the dev companion; NOT imported at\n// runtime, so it never ships in the browser bundle. The billing WIDGETS the\n// panel composes own their own label namespaces (subscription status, pricing\n// table, usage dashboard, invoice history, portal link) — only the panel's\n// framing copy lives here.\nexport const AppLayoutsBillingSettingsLabels: LabellingUnitaryDef[] = [\n  { ref: 'pageTitle', kind: LabelKind.HEADING, purpose: 'Page title of the billing settings panel (the billing home)' },\n  { ref: 'pageDescription', kind: LabelKind.DESCRIPTION, purpose: 'One-sentence framing under the billing page title: manage the plan, monitor usage, review invoices' },\n  { ref: 'subscriptionHeading', kind: LabelKind.HEADING, purpose: 'Card heading over the current subscription status widget' },\n  { ref: 'manageHeading', kind: LabelKind.HEADING, purpose: 'Card heading over the billing-provider portal link (payment methods, renewals)' },\n  { ref: 'manageDescription', kind: LabelKind.DESCRIPTION, purpose: 'Explains that the provider portal is where payment details, renewals and plan changes are managed' },\n  { ref: 'plansHeading', kind: LabelKind.HEADING, purpose: 'Card heading over the plan comparison / pricing table' },\n  { ref: 'usageHeading', kind: LabelKind.HEADING, purpose: 'Card heading over the metered usage and credit-pool dashboard' },\n  { ref: 'invoicesHeading', kind: LabelKind.HEADING, purpose: 'Card heading over the invoice history list' },\n  { ref: 'disabledTitle', kind: LabelKind.HEADING, purpose: 'Heading shown when billing is not enabled for the current runtime' },\n  { ref: 'disabledDescription', kind: LabelKind.DESCRIPTION, purpose: 'Explains that billing is currently disabled for this application' },\n];\n\nregisterComponentLabels(FrontendComponentType.APP_LAYOUTS_BILLING_SETTINGS, AppLayoutsBillingSettingsLabels);\n"]}

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

@@ -0,0 +1,21 @@
+/**
+ * AppPage_InvitationsSettings — the Settings Hub "Invitations" panel (Approach P).
+ *
+ * A bespoke `ENGINE_PANEL` (not a resource surface) that lets a signed-in user act on
+ * THEIR OWN pending organization invitations in-app, without opening the emailed link.
+ * It lists the caller's pending invitations — their own INVITED membership rows, resolved
+ * server-side by userId-ownership via `GET /auth/invitations/mine` — and offers Accept /
+ * Decline per row (Accept flips the row to ACTIVE; Decline deletes it) — calling the
+ * authenticated `acceptMyInvitation` / `rejectMyInvitation` endpoints (no token, no new
+ * session). On accept the caller becomes a member, so the panel refreshes the user's
+ * organizations via `useUserOrgs().refreshOrganizations()` and re-lists.
+ *
+ * i18n follows the framework convention (same shape as `AppPage_AppearanceSettings`):
+ * `useI18n({ component })` requests this component's label namespace, the panel gates
+ * rendering on `isReady` so it never flashes raw key paths, and a thin `t(key)` reads
+ * each label. Copy is owned by the labelling pipeline (sibling `.labels.ts`) — no
+ * hardcoded fallback strings here.
+ */
+import React from 'react';
+export declare const AppPage_InvitationsSettings: React.FC;
+//# sourceMappingURL=AppPage_InvitationsSettings.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppPage_InvitationsSettings.d.ts","sourceRoot":"","sources":["../../../../../src/components/settings/AppPage_InvitationsSettings.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,KAA2C,MAAM,OAAO,CAAC;AAchE,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EA4J/C,CAAC"}

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

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AppPage_InvitationsSettings — the Settings Hub "Invitations" panel (Approach P).
+ *
+ * A bespoke `ENGINE_PANEL` (not a resource surface) that lets a signed-in user act on
+ * THEIR OWN pending organization invitations in-app, without opening the emailed link.
+ * It lists the caller's pending invitations — their own INVITED membership rows, resolved
+ * server-side by userId-ownership via `GET /auth/invitations/mine` — and offers Accept /
+ * Decline per row (Accept flips the row to ACTIVE; Decline deletes it) — calling the
+ * authenticated `acceptMyInvitation` / `rejectMyInvitation` endpoints (no token, no new
+ * session). On accept the caller becomes a member, so the panel refreshes the user's
+ * organizations via `useUserOrgs().refreshOrganizations()` and re-lists.
+ *
+ * i18n follows the framework convention (same shape as `AppPage_AppearanceSettings`):
+ * `useI18n({ component })` requests this component's label namespace, the panel gates
+ * rendering on `isReady` so it never flashes raw key paths, and a thin `t(key)` reads
+ * each label. Copy is owned by the labelling pipeline (sibling `.labels.ts`) — no
+ * hardcoded fallback strings here.
+ */
+import { useCallback, useEffect, useState } from 'react';
+import { ButtonSize, FrontendComponentType } from '@wildo-ai/presets-components-models';
+import { isWildoBackendError } from '@wildo-ai/saas-models';
+import { Card, CardContent, CardHeader, CardTitle } 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';
+export const AppPage_InvitationsSettings = () => {
+    const { tComponent, isReady } = useI18n({ component: FrontendComponentType.APP_LAYOUTS_INVITATIONS_SETTINGS });
+    const { refreshOrganizations } = useUserOrgs();
+    const t = useCallback((key) => tComponent(FrontendComponentType.APP_LAYOUTS_INVITATIONS_SETTINGS, key), [tComponent]);
+    const [invitations, setInvitations] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [busyId, setBusyId] = useState(null);
+    const [error, setError] = useState(null);
+    const [successMsg, setSuccessMsg] = useState(null);
+    const refresh = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const res = await getManualCallsHttpClient().listMyPendingInvitations();
+            setInvitations(res.invitations ?? []);
+        }
+        catch (e) {
+            if (isWildoBackendError(e))
+                throw e;
+            setError(t('errorGeneric'));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [t]);
+    useEffect(() => {
+        refresh();
+    }, [refresh]);
+    // Auto-dismiss the success banner (same convention as AppPage_SecuritySettings).
+    useEffect(() => {
+        if (!successMsg)
+            return;
+        const timer = setTimeout(() => setSuccessMsg(null), 5000);
+        return () => clearTimeout(timer);
+    }, [successMsg]);
+    const handleAccept = useCallback(async (membershipId) => {
+        setBusyId(membershipId);
+        setError(null);
+        try {
+            await getManualCallsHttpClient().acceptMyInvitation(membershipId);
+            // The caller just became a member — refresh their org list before re-listing.
+            await refreshOrganizations();
+            setSuccessMsg(t('acceptSuccess'));
+            await refresh();
+        }
+        catch (e) {
+            if (isWildoBackendError(e))
+                throw e;
+            setError(t('errorGeneric'));
+        }
+        finally {
+            setBusyId(null);
+        }
+    }, [refresh, refreshOrganizations, t]);
+    const handleReject = useCallback(async (membershipId) => {
+        setBusyId(membershipId);
+        setError(null);
+        try {
+            await getManualCallsHttpClient().rejectMyInvitation(membershipId);
+            setSuccessMsg(t('rejectSuccess'));
+            await refresh();
+        }
+        catch (e) {
+            if (isWildoBackendError(e))
+                throw e;
+            setError(t('errorGeneric'));
+        }
+        finally {
+            setBusyId(null);
+        }
+    }, [refresh, t]);
+    // 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))) })) })] })] }));
+};
+//# sourceMappingURL=AppPage_InvitationsSettings.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,3 @@
+import { type LabellingUnitaryDef } from '@wildo-ai/presets-components-models';
+export declare const AppLayoutsInvitationsSettingsLabels: LabellingUnitaryDef[];
+//# sourceMappingURL=AppPage_InvitationsSettings.labels.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,22 @@
+import { FrontendComponentType, LabelKind, registerComponentLabels, } from '@wildo-ai/presets-components-models';
+// Companion-only label metadata for the Invitations settings panel: keys + kind
+// + per-key purpose. Statically scanned by the dev companion to generate the
+// `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, ...)`.
+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' },
+    { ref: 'rolesPrefix', kind: LabelKind.LABEL, purpose: 'Prefix before the list of roles the invitation grants (e.g. "Roles:")' },
+    { ref: 'acceptButton', kind: LabelKind.BUTTON, purpose: 'Button that accepts the invitation and joins the organization' },
+    { ref: 'rejectButton', kind: LabelKind.BUTTON, purpose: 'Button that declines the invitation' },
+    { ref: 'acceptSuccess', kind: LabelKind.MESSAGE, purpose: 'Confirmation shown after the user accepts an invitation' },
+    { ref: 'rejectSuccess', kind: LabelKind.MESSAGE, purpose: 'Confirmation shown after the user declines an invitation' },
+    { ref: 'errorGeneric', kind: LabelKind.MESSAGE, purpose: 'Generic error shown when listing/accepting/declining an invitation fails' },
+];
+registerComponentLabels(FrontendComponentType.APP_LAYOUTS_INVITATIONS_SETTINGS, AppLayoutsInvitationsSettingsLabels);
+//# sourceMappingURL=AppPage_InvitationsSettings.labels.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ *
+ * 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 from 'react';
+export interface SettingsHubProps {
+    /** Section to pre-open; falls back to the config default. */
+    sectionRef?: string;
+}
+export declare function SettingsHub({ sectionRef }: SettingsHubProps): React.JSX.Element;
+//# sourceMappingURL=SettingsHub.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsHub.d.ts","sourceRoot":"","sources":["../../../../../src/components/settings/SettingsHub.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,KAAoD,MAAM,OAAO,CAAC;AA4IzE,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,CA+F/E"}

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

@@ -0,0 +1,143 @@
+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.
+ *
+ * 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 { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/sections/tabs.js';
+import { Separator } from '../../components/layout/separator.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 { 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 { useVisibleSettingsHubConfig } from '../../core/config/useVisibleSettingsHubConfig.js';
+import { useI18n } from '../../core/i18n/useI18n.js';
+import { FeatureGate } from '../../core/features/FeatureGate.js';
+import { SettingsResourceOperationPanel } from './SettingsResourceOperationPanel.js';
+// ──────────────────────────────────────────────────────────────
+// Config helpers
+// ──────────────────────────────────────────────────────────────
+function orderedCategories(config) {
+    return [...config.categories].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+}
+function sectionsForCategory(config, categoryRef) {
+    return config.sections
+        .filter(section => section.categoryRef === categoryRef)
+        .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+}
+/** Resolve the section to open: requested → config default → first section. */
+function resolveActiveSection(config, sectionRef) {
+    if (sectionRef && config.sections.some(section => section.ref === sectionRef))
+        return sectionRef;
+    if (config.defaultSectionRef && config.sections.some(section => section.ref === config.defaultSectionRef)) {
+        return config.defaultSectionRef;
+    }
+    return config.sections[0]?.ref;
+}
+// ──────────────────────────────────────────────────────────────
+// Target rendering (function declarations → hoisted for mutual recursion
+// between a SUB_TABS target and its leaf targets)
+// ──────────────────────────────────────────────────────────────
+function SettingsEnginePanel({ panelRef }) {
+    switch (panelRef) {
+        case SettingsPanelRef.SECURITY:
+            return _jsx(AppPage_SecuritySettings, {});
+        case SettingsPanelRef.APPEARANCE:
+            return _jsx(AppPage_AppearanceSettings, {});
+        case SettingsPanelRef.INVITATIONS:
+            return _jsx(AppPage_InvitationsSettings, {});
+        case SettingsPanelRef.BILLING:
+            return _jsx(AppPage_BillingSettings, {});
+    }
+}
+function SettingsTargetRenderer({ target, resolveSubTabLabel, }) {
+    switch (target.kind) {
+        case SettingsSectionTargetKind.ENGINE_PANEL:
+            return _jsx(SettingsEnginePanel, { panelRef: target.panelRef });
+        case SettingsSectionTargetKind.CUSTOM_COMPONENT: {
+            const CustomComponent = ComponentRegistryService.resolve(target.componentRef, CorePresetNames.DEFAULT);
+            if (!CustomComponent) {
+                return _jsx(ComponentNotInjected, { componentType: target.componentRef, componentName: target.componentRef });
+            }
+            return (_jsx(React.Suspense, { fallback: _jsx("div", { className: "h-8 animate-pulse motion-reduce:animate-none bg-muted rounded", "aria-hidden": "true" }), children: _jsx(CustomComponent, {}) }));
+        }
+        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 });
+    }
+}
+function SettingsSubTabs({ target, resolveSubTabLabel, }) {
+    const [active, setActive] = useState(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 => (
+                // `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 }) {
+    const config = useVisibleSettingsHubConfig();
+    const categories = useMemo(() => orderedCategories(config), [config]);
+    const [active, setActive] = useState(() => resolveActiveSection(config, sectionRef));
+    const { tComponent, tSettingsHubCategory, tSettingsHubSection, isReady } = useI18n({
+        component: FrontendComponentType.APP_LAYOUTS_SETTINGS_HUB,
+    });
+    // Hub chrome labels (title, rail aria-label) read from the scoped component
+    // namespace. Copy is owned by the labelling pipeline (declared in the sibling
+    // `.labels.ts`), so there are deliberately no inline fallback strings — the
+    // hub gates on `isReady` below, the same convention as the panels it hosts
+    // (`AppPage_SecuritySettings` / `AppPage_AppearanceSettings`). The dynamic
+    // 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]);
+    // Keep the rail in sync with URL-driven section changes (deep-link / browser
+    // nav). setState bails out on an unchanged value, so this cannot loop.
+    useEffect(() => {
+        const next = resolveActiveSection(config, sectionRef);
+        if (next)
+            setActive(next);
+    }, [config, sectionRef]);
+    // 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))) })] })] }));
+}
+//# sourceMappingURL=SettingsHub.js.map

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

@@ -0,0 +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 { 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  }\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). setState bails out on an unchanged value, so this cannot loop.\n  useEffect(() => {\n    const next = resolveActiveSection(config, sectionRef);\n    if (next) setActive(next);\n  }, [config, sectionRef]);\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"]}

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

@@ -0,0 +1,3 @@
+import { type LabellingUnitaryDef } from '@wildo-ai/presets-components-models';
+export declare const AppLayoutsSettingsHubLabels: LabellingUnitaryDef[];
+//# sourceMappingURL=SettingsHub.labels.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,12 @@
+import { FrontendComponentType, LabelKind, registerComponentLabels, } from '@wildo-ai/presets-components-models';
+// Companion-only label metadata for the Settings Hub's fixed chrome (header +
+// rail aria-label). The DYNAMIC category/section labels are NOT here — those
+// live in the `settings_hub.*` namespace (tSettingsHubCategory/Section), keyed
+// by registry ref. Statically scanned by the dev companion; NOT imported at
+// runtime, so it never ships in the browser bundle.
+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' },
+];
+registerComponentLabels(FrontendComponentType.APP_LAYOUTS_SETTINGS_HUB, AppLayoutsSettingsHubLabels);
+//# sourceMappingURL=SettingsHub.labels.js.map

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

@@ -0,0 +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"]}