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

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

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AppPage_AgentWorkOverrideRateSettings — the Settings Hub "Override rate" panel (#1599).
+ *
+ * How often the current organization's experts override its agents' proposals over a window, grouped by agent,
+ * tool, case or reviewer. It calls `POST /agent-work/override-rate` for the organization the caller is working in
+ * (the route admits an organization-wide administrator of that organization, or the application's super
+ * administrator) and renders each group's counts:
+ *
+ * - accepted, accepted with modifications and rejected are the decisions the rate is computed from;
+ * - `notDecided` (lapsed, withdrawn, requester authority lapsed) is shown beside them and never enters the rate;
+ * - a group in which nothing was decided has a `null` rate, rendered as "nothing decided", never as 0 %: a rate of
+ *   zero decisions is not a rate of zero.
+ *
+ * Bespoke rather than a resource surface because the rate is not a row: it is an aggregate the engine computes on
+ * request from the decision records.
+ *
+ * i18n: `useI18n({ component })` requests this panel's namespace, the panel renders nothing until the bundle is
+ * ready, and every word is a key in `AppPage_AgentWorkOverrideRateSettings.labels.ts`.
+ */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { ButtonSize, FrontendComponentType } from '@wildo-ai/presets-components-models';
+import { AgentWorkDecisionGrouping, isWildoBackendError } from '@wildo-ai/saas-models';
+import { Card, CardContent } from '../../components/sections/card.js';
+import { Tabs, TabsList, TabsTrigger } from '../../components/sections/tabs.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../components/sections/table.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';
+const COMPONENT = FrontendComponentType.APP_LAYOUTS_AGENT_WORK_OVERRIDE_RATE_SETTINGS;
+/**
+ * The windows the panel offers, in days. Each is within the route's `AGENT_WORK_MAX_WINDOW_DAYS` (366), which the
+ * request schema refuses beyond.
+ */
+export var AgentWorkOverrideRateWindow;
+(function (AgentWorkOverrideRateWindow) {
+    AgentWorkOverrideRateWindow[AgentWorkOverrideRateWindow["LAST_30_DAYS"] = 30] = "LAST_30_DAYS";
+    AgentWorkOverrideRateWindow[AgentWorkOverrideRateWindow["LAST_90_DAYS"] = 90] = "LAST_90_DAYS";
+    AgentWorkOverrideRateWindow[AgentWorkOverrideRateWindow["LAST_365_DAYS"] = 365] = "LAST_365_DAYS";
+})(AgentWorkOverrideRateWindow || (AgentWorkOverrideRateWindow = {}));
+const WINDOWS = [
+    AgentWorkOverrideRateWindow.LAST_30_DAYS,
+    AgentWorkOverrideRateWindow.LAST_90_DAYS,
+    AgentWorkOverrideRateWindow.LAST_365_DAYS,
+];
+const GROUPINGS = Object.values(AgentWorkDecisionGrouping);
+/** The label key of a grouping's tab and column heading. One key per `AgentWorkDecisionGrouping` member. */
+export function groupingLabelKey(grouping) {
+    return `groupBy_${grouping}`;
+}
+/** The label key of a window button. One key per `AgentWorkOverrideRateWindow` member. */
+export function windowLabelKey(window) {
+    return `window_${window}`;
+}
+/** The group's identity under the chosen grouping, or `undefined` when the records carried none (shown as such). */
+export function overrideRateGroupKey(group, grouping) {
+    switch (grouping) {
+        case AgentWorkDecisionGrouping.AGENT:
+            return group.key.agentRef;
+        case AgentWorkDecisionGrouping.TOOL:
+            return group.key.toolName;
+        case AgentWorkDecisionGrouping.CASE:
+            return group.key.caseRef ? `${group.key.caseRef.resourceType}:${group.key.caseRef.resourceId}` : undefined;
+        case AgentWorkDecisionGrouping.DECIDER:
+            return group.key.deciderUserId;
+    }
+}
+/**
+ * The rate as a reader should see it. `null` is "nothing was decided in this group" and is returned as `null` so
+ * the caller renders that sentence; it is never formatted as 0 %.
+ */
+export function formatOverrideRate(rate, locale) {
+    if (rate === null)
+        return null;
+    return new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 1 }).format(rate);
+}
+export const AppPage_AgentWorkOverrideRateSettings = () => {
+    const { tComponent, isReady, currentLanguage } = useI18n({ component: COMPONENT });
+    const { currentOrganizationId } = useUserOrgs();
+    const t = useCallback((key) => tComponent(COMPONENT, key), [tComponent]);
+    const [grouping, setGrouping] = useState(AgentWorkDecisionGrouping.AGENT);
+    const [windowDays, setWindowDays] = useState(AgentWorkOverrideRateWindow.LAST_90_DAYS);
+    const [summary, setSummary] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        // No organization selected: nothing to ask for, and the panel says so rather than waiting forever.
+        if (!currentOrganizationId) {
+            setError(null);
+            setLoading(false);
+            return;
+        }
+        let cancelled = false;
+        const to = new Date();
+        const from = new Date(to.getTime() - windowDays * 24 * 60 * 60_000);
+        setLoading(true);
+        setError(null);
+        getManualCallsHttpClient()
+            .summarizeAgentWorkOverrideRate({ from: from.toISOString(), to: to.toISOString(), groupBy: grouping, organizationId: currentOrganizationId })
+            .then((result) => { if (!cancelled)
+            setSummary(result); })
+            .catch((caught) => {
+            if (cancelled)
+                return;
+            // The panel says it failed whatever the cause (a refused request included), so it never sits on "loading";
+            // a backend error is then rethrown for the application's error surfacing.
+            setError(t('errorGeneric'));
+            if (isWildoBackendError(caught))
+                throw caught;
+        })
+            .finally(() => { if (!cancelled)
+            setLoading(false); });
+        return () => { cancelled = true; };
+    }, [currentOrganizationId, grouping, windowDays, t]);
+    const groups = useMemo(() => summary?.groupBy === grouping ? summary.groups : [], [summary, grouping]);
+    // A regroup keeps the previous grouping's summary until the new one arrives: that is loading, not "no decisions".
+    const awaitingGrouping = loading || (summary !== null && summary.groupBy !== grouping);
+    if (!isReady)
+        return null;
+    return (_jsxs("div", { className: "flex flex-col gap-section", 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: "flex flex-wrap items-center justify-between gap-section", children: [_jsx(Tabs, { value: grouping, onValueChange: (value) => setGrouping(value), children: _jsx(TabsList, { children: GROUPINGS.map((value) => (_jsx(TabsTrigger, { value: value, "data-ref": value, children: t(groupingLabelKey(value)) }, value))) }) }), _jsx("div", { className: "flex gap-element", role: "group", "aria-label": t('windowLabel'), children: WINDOWS.map((value) => (_jsx(Button, { size: ButtonSize.SM, variant: value === windowDays ? ButtonVariants_Variant.DEFAULT : ButtonVariants_Variant.OUTLINE, "aria-pressed": value === windowDays, onClick: () => setWindowDays(value), children: t(windowLabelKey(value)) }, value))) })] }), error && (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: error }) })), !(error && groups.length === 0) && (_jsx(Card, { children: _jsx(CardContent, { className: "p-card", children: !currentOrganizationId ? (_jsx(Text, { className: "text-sm text-muted-foreground", children: t('noOrganization') })) : awaitingGrouping && groups.length === 0 ? (_jsx(Text, { className: "text-sm text-muted-foreground", children: t('loading') })) : groups.length === 0 ? (_jsx(Text, { className: "text-sm text-muted-foreground", children: t('empty') })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: t(groupingLabelKey(grouping)) }), _jsx(TableHead, { children: t('columnAccepted') }), _jsx(TableHead, { children: t('columnAcceptedWithModifications') }), _jsx(TableHead, { children: t('columnRejected') }), _jsx(TableHead, { children: t('columnNotDecided') }), _jsx(TableHead, { children: t('columnOverrideRate') })] }) }), _jsx(TableBody, { children: groups.map((group, index) => {
+                                    const key = overrideRateGroupKey(group, grouping);
+                                    const rate = formatOverrideRate(group.overrideRate, currentLanguage);
+                                    return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: key ?? t('unattributed') }), _jsx(TableCell, { children: group.accepted }), _jsx(TableCell, { children: group.acceptedWithModifications }), _jsx(TableCell, { children: group.rejected }), _jsx(TableCell, { children: group.notDecided }), _jsx(TableCell, { children: rate ?? t('nothingDecided') })] }, key ?? `unattributed-${index}`));
+                                }) })] })) }) }))] }));
+};
+//# sourceMappingURL=AppPage_AgentWorkOverrideRateSettings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppPage_AgentWorkOverrideRateSettings.js","sourceRoot":"","sources":["../../../../../src/components/settings/AppPage_AgentWorkOverrideRateSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * AppPage_AgentWorkOverrideRateSettings — the Settings Hub \"Override rate\" panel (#1599).\n *\n * How often the current organization's experts override its agents' proposals over a window, grouped by agent,\n * tool, case or reviewer. It calls `POST /agent-work/override-rate` for the organization the caller is working in\n * (the route admits an organization-wide administrator of that organization, or the application's super\n * administrator) and renders each group's counts:\n *\n * - accepted, accepted with modifications and rejected are the decisions the rate is computed from;\n * - `notDecided` (lapsed, withdrawn, requester authority lapsed) is shown beside them and never enters the rate;\n * - a group in which nothing was decided has a `null` rate, rendered as \"nothing decided\", never as 0 %: a rate of\n *   zero decisions is not a rate of zero.\n *\n * Bespoke rather than a resource surface because the rate is not a row: it is an aggregate the engine computes on\n * request from the decision records.\n *\n * i18n: `useI18n({ component })` requests this panel's namespace, the panel renders nothing until the bundle is\n * ready, and every word is a key in `AppPage_AgentWorkOverrideRateSettings.labels.ts`.\n */\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { ButtonSize, FrontendComponentType } from '@wildo-ai/presets-components-models';\nimport { AgentWorkDecisionGrouping, isWildoBackendError, type AgentWorkOverrideRate, type AgentWorkOverrideRateGroup } from '@wildo-ai/saas-models';\nimport { Card, CardContent } from '~wildo-frontend-lib/components/sections/card';\nimport { Tabs, TabsList, TabsTrigger } from '~wildo-frontend-lib/components/sections/tabs';\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~wildo-frontend-lib/components/sections/table';\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 { getManualCallsHttpClient } from '~wildo-frontend-lib/core/requests/wildo-http-client-manual-calls.frontend.service';\n\nconst COMPONENT = FrontendComponentType.APP_LAYOUTS_AGENT_WORK_OVERRIDE_RATE_SETTINGS;\n\n/**\n * The windows the panel offers, in days. Each is within the route's `AGENT_WORK_MAX_WINDOW_DAYS` (366), which the\n * request schema refuses beyond.\n */\nexport enum AgentWorkOverrideRateWindow {\n  LAST_30_DAYS = 30,\n  LAST_90_DAYS = 90,\n  LAST_365_DAYS = 365,\n}\nconst WINDOWS: readonly AgentWorkOverrideRateWindow[] = [\n  AgentWorkOverrideRateWindow.LAST_30_DAYS,\n  AgentWorkOverrideRateWindow.LAST_90_DAYS,\n  AgentWorkOverrideRateWindow.LAST_365_DAYS,\n];\nconst GROUPINGS: readonly AgentWorkDecisionGrouping[] = Object.values(AgentWorkDecisionGrouping);\n\n/** The label key of a grouping's tab and column heading. One key per `AgentWorkDecisionGrouping` member. */\nexport function groupingLabelKey(grouping: AgentWorkDecisionGrouping): string {\n  return `groupBy_${grouping}`;\n}\n/** The label key of a window button. One key per `AgentWorkOverrideRateWindow` member. */\nexport function windowLabelKey(window: AgentWorkOverrideRateWindow): string {\n  return `window_${window}`;\n}\n\n/** The group's identity under the chosen grouping, or `undefined` when the records carried none (shown as such). */\nexport function overrideRateGroupKey(group: AgentWorkOverrideRateGroup, grouping: AgentWorkDecisionGrouping): string | undefined {\n  switch (grouping) {\n    case AgentWorkDecisionGrouping.AGENT:\n      return group.key.agentRef;\n    case AgentWorkDecisionGrouping.TOOL:\n      return group.key.toolName;\n    case AgentWorkDecisionGrouping.CASE:\n      return group.key.caseRef ? `${group.key.caseRef.resourceType}:${group.key.caseRef.resourceId}` : undefined;\n    case AgentWorkDecisionGrouping.DECIDER:\n      return group.key.deciderUserId;\n  }\n}\n\n/**\n * The rate as a reader should see it. `null` is \"nothing was decided in this group\" and is returned as `null` so\n * the caller renders that sentence; it is never formatted as 0 %.\n */\nexport function formatOverrideRate(rate: number | null, locale: string): string | null {\n  if (rate === null) return null;\n  return new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 1 }).format(rate);\n}\n\nexport const AppPage_AgentWorkOverrideRateSettings: React.FC = () => {\n  const { tComponent, isReady, currentLanguage } = useI18n({ component: COMPONENT });\n  const { currentOrganizationId } = useUserOrgs();\n  const t = useCallback((key: string) => tComponent(COMPONENT, key), [tComponent]);\n\n  const [grouping, setGrouping] = useState<AgentWorkDecisionGrouping>(AgentWorkDecisionGrouping.AGENT);\n  const [windowDays, setWindowDays] = useState<AgentWorkOverrideRateWindow>(AgentWorkOverrideRateWindow.LAST_90_DAYS);\n  const [summary, setSummary] = useState<AgentWorkOverrideRate | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    // No organization selected: nothing to ask for, and the panel says so rather than waiting forever.\n    if (!currentOrganizationId) {\n      setError(null);\n      setLoading(false);\n      return;\n    }\n    let cancelled = false;\n    const to = new Date();\n    const from = new Date(to.getTime() - windowDays * 24 * 60 * 60_000);\n    setLoading(true);\n    setError(null);\n    getManualCallsHttpClient()\n      .summarizeAgentWorkOverrideRate({ from: from.toISOString(), to: to.toISOString(), groupBy: grouping, organizationId: currentOrganizationId })\n      .then((result) => { if (!cancelled) setSummary(result); })\n      .catch((caught: unknown) => {\n        if (cancelled) return;\n        // The panel says it failed whatever the cause (a refused request included), so it never sits on \"loading\";\n        // a backend error is then rethrown for the application's error surfacing.\n        setError(t('errorGeneric'));\n        if (isWildoBackendError(caught)) throw caught;\n      })\n      .finally(() => { if (!cancelled) setLoading(false); });\n    return () => { cancelled = true; };\n  }, [currentOrganizationId, grouping, windowDays, t]);\n\n  const groups = useMemo(() => summary?.groupBy === grouping ? summary.groups : [], [summary, grouping]);\n  // A regroup keeps the previous grouping's summary until the new one arrives: that is loading, not \"no decisions\".\n  const awaitingGrouping = loading || (summary !== null && summary.groupBy !== grouping);\n\n  if (!isReady) return null;\n\n  return (\n    <div className=\"flex flex-col gap-section\">\n      <h3 className=\"text-base font-semibold tracking-tight\">{t('pageTitle')}</h3>\n      <Text className=\"text-sm text-muted-foreground\">{t('pageDescription')}</Text>\n\n      <div className=\"flex flex-wrap items-center justify-between gap-section\">\n        <Tabs value={grouping} onValueChange={(value) => setGrouping(value as AgentWorkDecisionGrouping)}>\n          <TabsList>\n            {GROUPINGS.map((value) => (\n              <TabsTrigger key={value} value={value} data-ref={value}>{t(groupingLabelKey(value))}</TabsTrigger>\n            ))}\n          </TabsList>\n        </Tabs>\n        <div className=\"flex gap-element\" role=\"group\" aria-label={t('windowLabel')}>\n          {WINDOWS.map((value) => (\n            <Button\n              key={value}\n              size={ButtonSize.SM}\n              variant={value === windowDays ? ButtonVariants_Variant.DEFAULT : ButtonVariants_Variant.OUTLINE}\n              aria-pressed={value === windowDays}\n              onClick={() => setWindowDays(value)}\n            >\n              {t(windowLabelKey(value))}\n            </Button>\n          ))}\n        </div>\n      </div>\n\n      {error && (\n        <Alert variant=\"destructive\">\n          <AlertDescription>{error}</AlertDescription>\n        </Alert>\n      )}\n\n      {/* A failed fetch with nothing to show for this grouping says so in the alert above, and nothing else. */}\n      {!(error && groups.length === 0) && (\n      <Card>\n        <CardContent className=\"p-card\">\n          {!currentOrganizationId ? (\n            <Text className=\"text-sm text-muted-foreground\">{t('noOrganization')}</Text>\n          ) : awaitingGrouping && groups.length === 0 ? (\n            <Text className=\"text-sm text-muted-foreground\">{t('loading')}</Text>\n          ) : groups.length === 0 ? (\n            <Text className=\"text-sm text-muted-foreground\">{t('empty')}</Text>\n          ) : (\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead>{t(groupingLabelKey(grouping))}</TableHead>\n                  <TableHead>{t('columnAccepted')}</TableHead>\n                  <TableHead>{t('columnAcceptedWithModifications')}</TableHead>\n                  <TableHead>{t('columnRejected')}</TableHead>\n                  <TableHead>{t('columnNotDecided')}</TableHead>\n                  <TableHead>{t('columnOverrideRate')}</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {groups.map((group, index) => {\n                  const key = overrideRateGroupKey(group, grouping);\n                  const rate = formatOverrideRate(group.overrideRate, currentLanguage);\n                  return (\n                    <TableRow key={key ?? `unattributed-${index}`}>\n                      <TableCell>{key ?? t('unattributed')}</TableCell>\n                      <TableCell>{group.accepted}</TableCell>\n                      <TableCell>{group.acceptedWithModifications}</TableCell>\n                      <TableCell>{group.rejected}</TableCell>\n                      <TableCell>{group.notDecided}</TableCell>\n                      <TableCell>{rate ?? t('nothingDecided')}</TableCell>\n                    </TableRow>\n                  );\n                })}\n              </TableBody>\n            </Table>\n          )}\n        </CardContent>\n      </Card>\n      )}\n    </div>\n  );\n};\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppPage_AgentWorkOverrideRateSettings.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/settings/AppPage_AgentWorkOverrideRateSettings.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAU7C,eAAO,MAAM,6CAA6C,EAAE,mBAAmB,EAsB9E,CAAC"}

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

@@ -0,0 +1,34 @@
+import { FrontendComponentType, LabelKind, registerComponentLabels, } from '@wildo-ai/presets-components-models';
+// Companion-only label metadata for the override-rate settings panel (#1599): keys + kind + per-key purpose.
+// Statically scanned by the dev companion to generate the `components.APP_LAYOUTS_AGENT_WORK_OVERRIDE_RATE_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_AGENT_WORK_OVERRIDE_RATE_SETTINGS, ...)`.
+//
+// The grouping and window words are literal refs, one per member of `AgentWorkDecisionGrouping` and of
+// `AgentWorkOverrideRateWindow` (the scan reads literals). Nothing checks yet that they stay total over both
+// vocabularies: the panel's unit test that would is owed (#1599), so a member added to either must add its word here.
+export const AppLayoutsAgentWorkOverrideRateSettingsLabels = [
+    { ref: 'pageTitle', kind: LabelKind.HEADING, purpose: 'Heading of the panel showing how often the organization’s experts override its AI agents’ proposals' },
+    { ref: 'pageDescription', kind: LabelKind.DESCRIPTION, purpose: 'One sentence under the heading: the rate counts proposals an expert modified or rejected, among those an expert decided; proposals nobody decided (expired, withdrawn) are counted apart and never enter it' },
+    { ref: 'groupBy_agent', kind: LabelKind.LABEL, purpose: 'Tab and column heading: the rate per AI agent' },
+    { ref: 'groupBy_tool', kind: LabelKind.LABEL, purpose: 'Tab and column heading: the rate per tool the agent proposed to use' },
+    { ref: 'groupBy_case', kind: LabelKind.LABEL, purpose: 'Tab and column heading: the rate per case (the record the work was about, e.g. a matter or a file)' },
+    { ref: 'groupBy_decider', kind: LabelKind.LABEL, purpose: 'Tab and column heading: the rate per expert who decided' },
+    { ref: 'windowLabel', kind: LabelKind.LABEL, purpose: 'Accessible name of the group of buttons choosing the time window' },
+    { ref: 'window_30', kind: LabelKind.BUTTON, purpose: 'Button: show the last 30 days' },
+    { ref: 'window_90', kind: LabelKind.BUTTON, purpose: 'Button: show the last 90 days' },
+    { ref: 'window_365', kind: LabelKind.BUTTON, purpose: 'Button: show the last 365 days' },
+    { ref: 'columnAccepted', kind: LabelKind.LABEL, purpose: 'Column heading: proposals the expert accepted as they were' },
+    { ref: 'columnAcceptedWithModifications', kind: LabelKind.LABEL, purpose: 'Column heading: proposals the expert accepted after changing them' },
+    { ref: 'columnRejected', kind: LabelKind.LABEL, purpose: 'Column heading: proposals the expert rejected' },
+    { ref: 'columnNotDecided', kind: LabelKind.LABEL, purpose: 'Column heading: proposals nobody decided (expired, withdrawn, or the requester lost authority); never part of the rate' },
+    { ref: 'columnOverrideRate', kind: LabelKind.LABEL, purpose: 'Column heading: the share of decided proposals the expert modified or rejected' },
+    { ref: 'nothingDecided', kind: LabelKind.MESSAGE, purpose: 'Shown in place of the rate when nothing was decided in the group: there is no rate, which is not the same as 0 %' },
+    { ref: 'unattributed', kind: LabelKind.LABEL, purpose: 'Shown for a group whose records carry no value for the grouping (for example a decision with no tool)' },
+    { ref: 'loading', kind: LabelKind.MESSAGE, purpose: 'Shown while the override rate is being computed' },
+    { ref: 'noOrganization', kind: LabelKind.MESSAGE, purpose: 'Shown when no organization is selected, so there is no override rate to show. Name the rate with the same term as the panel heading and the rate column' },
+    { ref: 'empty', kind: LabelKind.MESSAGE, purpose: 'Shown when no expert decision on an agent’s proposal was recorded in the window' },
+    { ref: 'errorGeneric', kind: LabelKind.MESSAGE, purpose: 'Generic error shown when the override rate could not be loaded' },
+];
+registerComponentLabels(FrontendComponentType.APP_LAYOUTS_AGENT_WORK_OVERRIDE_RATE_SETTINGS, AppLayoutsAgentWorkOverrideRateSettingsLabels);
+//# sourceMappingURL=AppPage_AgentWorkOverrideRateSettings.labels.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppPage_AgentWorkOverrideRateSettings.labels.js","sourceRoot":"","sources":["../../../../../src/components/settings/AppPage_AgentWorkOverrideRateSettings.labels.ts"],"names":[],"mappings":"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","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 override-rate settings panel (#1599): keys + kind + per-key purpose.\n// Statically scanned by the dev companion to generate the `components.APP_LAYOUTS_AGENT_WORK_OVERRIDE_RATE_SETTINGS.*`\n// bundle; NOT imported at runtime, so it never ships in the browser bundle. Keep in lock-step with the keys the\n// component reads via `tComponent(APP_LAYOUTS_AGENT_WORK_OVERRIDE_RATE_SETTINGS, ...)`.\n//\n// The grouping and window words are literal refs, one per member of `AgentWorkDecisionGrouping` and of\n// `AgentWorkOverrideRateWindow` (the scan reads literals). Nothing checks yet that they stay total over both\n// vocabularies: the panel's unit test that would is owed (#1599), so a member added to either must add its word here.\nexport const AppLayoutsAgentWorkOverrideRateSettingsLabels: LabellingUnitaryDef[] = [\n  { ref: 'pageTitle', kind: LabelKind.HEADING, purpose: 'Heading of the panel showing how often the organization’s experts override its AI agents’ proposals' },\n  { ref: 'pageDescription', kind: LabelKind.DESCRIPTION, purpose: 'One sentence under the heading: the rate counts proposals an expert modified or rejected, among those an expert decided; proposals nobody decided (expired, withdrawn) are counted apart and never enter it' },\n  { ref: 'groupBy_agent', kind: LabelKind.LABEL, purpose: 'Tab and column heading: the rate per AI agent' },\n  { ref: 'groupBy_tool', kind: LabelKind.LABEL, purpose: 'Tab and column heading: the rate per tool the agent proposed to use' },\n  { ref: 'groupBy_case', kind: LabelKind.LABEL, purpose: 'Tab and column heading: the rate per case (the record the work was about, e.g. a matter or a file)' },\n  { ref: 'groupBy_decider', kind: LabelKind.LABEL, purpose: 'Tab and column heading: the rate per expert who decided' },\n  { ref: 'windowLabel', kind: LabelKind.LABEL, purpose: 'Accessible name of the group of buttons choosing the time window' },\n  { ref: 'window_30', kind: LabelKind.BUTTON, purpose: 'Button: show the last 30 days' },\n  { ref: 'window_90', kind: LabelKind.BUTTON, purpose: 'Button: show the last 90 days' },\n  { ref: 'window_365', kind: LabelKind.BUTTON, purpose: 'Button: show the last 365 days' },\n  { ref: 'columnAccepted', kind: LabelKind.LABEL, purpose: 'Column heading: proposals the expert accepted as they were' },\n  { ref: 'columnAcceptedWithModifications', kind: LabelKind.LABEL, purpose: 'Column heading: proposals the expert accepted after changing them' },\n  { ref: 'columnRejected', kind: LabelKind.LABEL, purpose: 'Column heading: proposals the expert rejected' },\n  { ref: 'columnNotDecided', kind: LabelKind.LABEL, purpose: 'Column heading: proposals nobody decided (expired, withdrawn, or the requester lost authority); never part of the rate' },\n  { ref: 'columnOverrideRate', kind: LabelKind.LABEL, purpose: 'Column heading: the share of decided proposals the expert modified or rejected' },\n  { ref: 'nothingDecided', kind: LabelKind.MESSAGE, purpose: 'Shown in place of the rate when nothing was decided in the group: there is no rate, which is not the same as 0 %' },\n  { ref: 'unattributed', kind: LabelKind.LABEL, purpose: 'Shown for a group whose records carry no value for the grouping (for example a decision with no tool)' },\n  { ref: 'loading', kind: LabelKind.MESSAGE, purpose: 'Shown while the override rate is being computed' },\n  { ref: 'noOrganization', kind: LabelKind.MESSAGE, purpose: 'Shown when no organization is selected, so there is no override rate to show. Name the rate with the same term as the panel heading and the rate column' },\n  { ref: 'empty', kind: LabelKind.MESSAGE, purpose: 'Shown when no expert decision on an agent’s proposal was recorded in the window' },\n  { ref: 'errorGeneric', kind: LabelKind.MESSAGE, purpose: 'Generic error shown when the override rate could not be loaded' },\n];\n\nregisterComponentLabels(FrontendComponentType.APP_LAYOUTS_AGENT_WORK_OVERRIDE_RATE_SETTINGS, AppLayoutsAgentWorkOverrideRateSettingsLabels);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"AppPage_AppearanceSettings.d.ts","sourceRoot":"","sources":["../../../../src/components/settings/AppPage_AppearanceSettings.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,KAA+B,MAAM,OAAO,CAAC;AAwIpD,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EA0E9C,CAAC"}
+{"version":3,"file":"AppPage_AppearanceSettings.d.ts","sourceRoot":"","sources":["../../../../../src/components/settings/AppPage_AppearanceSettings.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,KAA+B,MAAM,OAAO,CAAC;AAsIpD,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAqE9C,CAAC"}

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

@@ -37,8 +37,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from 'react';
 import { DesignSystemToken, DesignTokenRenderMode, FrontendComponentType, getDesignTokenValue, } from '@wildo-ai/presets-components-models';
 import { UserTheme } from '@wildo-ai/saas-models';
-import { Card, CardContent } from '../../components/sections/card.js';
-import { Text } from '../../components/typography/text.js';
 import { Label } from '../../components/typography/label.js';
 import { RadioGroupRoot, RadioGroupItem } from '../../components/form/controls/enum/radio.js';
 import { cn } from '../../core/ui/cn.js';
@@ -117,14 +115,14 @@ export const AppPage_AppearanceSettings = () => {
     // pipeline, so there are deliberately no inline fallback strings here.
     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') })] }), _jsx(Card, { children: _jsx(CardContent, { className: "p-card", children: _jsx(RadioGroupRoot, { value: themePreference, onValueChange: (value) => selectTheme(value), "aria-label": t('themeHeading'), className: "grid-cols-1 gap-item sm:grid-cols-3", children: THEME_OPTIONS.map((option) => {
-                            const optionId = `appearance-theme-${option}`;
-                            const isSelected = themePreference === option;
-                            return (_jsxs(Label, { htmlFor: optionId, className: cn('flex cursor-pointer flex-col gap-element rounded-lg border p-card-sm font-normal transition-colors', 
-                                // The whole tile is the target, and selection is carried by
-                                // the tile itself as well as by the radio — a 12px dot is not
-                                // enough signal next to a picture.
-                                isSelected ? 'border-primary ring-1 ring-primary' : 'hover:border-primary/40'), children: [_jsx(ThemePreview, { option: option, light: lightPalette, dark: darkPalette }), _jsxs("div", { className: "flex items-center gap-element-xs", children: [_jsx(RadioGroupItem, { id: optionId, value: option }), _jsx("span", { className: "text-sm font-medium", children: t(THEME_OPTION_LABEL_KEYS[option]) })] })] }, option));
-                        }) }) }) })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-section", children: [_jsx("h3", { className: "text-base font-semibold tracking-tight", children: t('pageTitle') }), _jsx(RadioGroupRoot, { value: themePreference, onValueChange: (value) => selectTheme(value), "aria-label": t('themeHeading'), className: "grid-cols-1 gap-item sm:grid-cols-3", children: THEME_OPTIONS.map((option) => {
+                    const optionId = `appearance-theme-${option}`;
+                    const isSelected = themePreference === option;
+                    return (_jsxs(Label, { htmlFor: optionId, className: cn('flex cursor-pointer flex-col gap-element rounded-lg border p-card-sm font-normal transition-colors', 
+                        // The whole tile is the target, and selection is carried by
+                        // the tile itself as well as by the radio — a 12px dot is not
+                        // enough signal next to a picture.
+                        isSelected ? 'border-primary ring-1 ring-primary' : 'hover:border-primary/40'), children: [_jsx(ThemePreview, { option: option, light: lightPalette, dark: darkPalette }), _jsxs("div", { className: "flex items-center gap-element-xs", children: [_jsx(RadioGroupItem, { id: optionId, value: option }), _jsx("span", { className: "text-sm font-medium", children: t(THEME_OPTION_LABEL_KEYS[option]) })] })] }, option));
+                }) })] }));
 };
 //# sourceMappingURL=AppPage_AppearanceSettings.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppPage_AppearanceSettings.js","sourceRoot":"","sources":["../../../../src/components/settings/AppPage_AppearanceSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * AppPage_AppearanceSettings — the Settings Hub \"Appearance\" panel.\n *\n * A bespoke `ENGINE_PANEL` (not a resource surface) that surfaces the app's\n * theme system: a Light / Dark / System selector. It reads the chosen preference\n * from `useThemePreferenceControl().themePreference` and commits changes through\n * that hook's `selectTheme`, which both applies the theme locally AND durably\n * records it on the user's preferences — see `useThemePreferenceControl` for why\n * the local half alone was actively harmful.\n *\n * ## Each option shows the theme, it does not describe it\n *\n * Theme is the one setting whose control can render its own result, and every\n * mature product does exactly that (VS Code, GitHub, Notion, Linear). The\n * previous version was three text radios with descriptions that restated their\n * own labels — \"Light / Always use the light theme.\" — so the reader learned\n * nothing a preview shows instantly, and had to commit to a look sight-unseen.\n *\n * The tiles are painted from the app's OWN design tokens resolved per mode (see\n * `resolveModePalette`), not from hardcoded greys, so an app that retunes its\n * palette retunes its previews. `System` shows both halves because that is\n * literally what it means.\n *\n * i18n follows the framework convention (same shape as `AppPage_SecuritySettings`):\n * `useI18n({ component })` requests this component's label namespace, the panel\n * gates rendering on `isReady` so it never flashes raw key paths, and a thin\n * `t(key)` reads each label. Label copy is owned entirely by the labelling\n * pipeline (declared in the sibling `.labels.ts`) — the component carries NO\n * hardcoded fallback strings.\n *\n * The selector reuses the framework radio control (`RadioGroupRoot` /\n * `RadioGroupItem`) + typography `Label` rather than a hand-rolled\n * `role=\"radio\"` group, so `radiogroup`/`radio` roles, roving focus,\n * `aria-checked`, and the selection indicator all come from the primitives.\n */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n  DesignSystemToken,\n  DesignTokenRenderMode,\n  FrontendComponentType,\n  getDesignTokenValue,\n  type DesignTokenConfiguration,\n} from '@wildo-ai/presets-components-models';\nimport { UserTheme } from '@wildo-ai/saas-models';\nimport { Card, CardContent } from '~wildo-frontend-lib/components/sections/card';\nimport { Text } from '~wildo-frontend-lib/components/typography/text';\nimport { Label } from '~wildo-frontend-lib/components/typography/label';\nimport { RadioGroupRoot, RadioGroupItem } from '~wildo-frontend-lib/components/form/controls/enum/radio';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { useUI } from '~wildo-frontend-lib/core/ui/useUI';\nimport { useThemePreferenceControl } from '~wildo-frontend-lib/core/ui/useThemePreferenceControl';\n\n/** Theme options, in display order. */\nconst THEME_OPTIONS = [UserTheme.LIGHT, UserTheme.DARK, UserTheme.AUTO] as const;\n\n/** Label keys (resolved via `t`) for each theme option's name. */\nconst THEME_OPTION_LABEL_KEYS: Record<UserTheme, string> = {\n  [UserTheme.LIGHT]: 'themeLight',\n  [UserTheme.DARK]: 'themeDark',\n  [UserTheme.AUTO]: 'themeSystem',\n};\n\n/** The tokens a preview tile paints with — the smallest set that reads as \"an app\". */\nconst PREVIEW_TOKENS = [\n  DesignSystemToken.BACKGROUND,\n  DesignSystemToken.FOREGROUND,\n  DesignSystemToken.MUTED,\n  DesignSystemToken.MUTED_FOREGROUND,\n  DesignSystemToken.PRIMARY,\n  DesignSystemToken.BORDER,\n] as const;\n\ntype PreviewPalette = Record<(typeof PREVIEW_TOKENS)[number], string>;\n\n/**\n * Resolve the preview palette for ONE mode, independently of the mode the app is\n * currently in.\n *\n * This cannot be done with CSS alone, and the asymmetry is worth knowing before\n * anyone \"simplifies\" it. The dark palette is a plain `.dark { … }` class, so a\n * subtree can opt into it — but the LIGHT palette lives on `:root`, which only\n * ever matches `<html>`. Inside a dark app every descendant inherits the dark\n * values and there is no selector that restores the light ones. So a light\n * preview shown while the app is dark has to be given explicit values, which is\n * what the design-token configuration carries (`lightValue` / `darkValue` on\n * every `LIGHT_DARK` token).\n *\n * Falls back to `var(--token)` for any token the app did not configure. That\n * resolves correctly for the CURRENT mode and approximates the other — a\n * degraded preview rather than a broken one, and only reachable in an app that\n * declares no colour tokens at all.\n */\nfunction resolveModePalette(\n  tokens: Partial<Record<DesignSystemToken, DesignTokenConfiguration>> | undefined,\n  customTokens: Partial<Record<string, DesignTokenConfiguration>> | undefined,\n  mode: DesignTokenRenderMode,\n): PreviewPalette {\n  const resolve = (token: (typeof PREVIEW_TOKENS)[number]): string => {\n    const configuration = tokens?.[token] ?? customTokens?.[token];\n    return configuration ? getDesignTokenValue(configuration, mode) : `var(--${token})`;\n  };\n\n  return PREVIEW_TOKENS.reduce<PreviewPalette>(\n    (palette, token) => ({ ...palette, [token]: resolve(token) }),\n    {} as PreviewPalette,\n  );\n}\n\n/**\n * A miniature of the running app in one mode: page ground, a sidebar rail with\n * two nav lines, a content card with a heading line, a body line, and the accent.\n * Colours come in as explicit values so one tile can render light while the app\n * around it is dark.\n */\nconst ThemePreviewPane: React.FC<{ palette: PreviewPalette; className?: string }> = ({ palette, className }) => (\n  <div\n    className={cn('flex h-full w-full gap-[3px] p-[5px]', className)}\n    style={{ backgroundColor: palette[DesignSystemToken.BACKGROUND] }}\n  >\n    {/* Sidebar rail */}\n    <div\n      className=\"flex w-1/4 shrink-0 flex-col gap-[3px] rounded-[3px] p-[3px]\"\n      style={{ backgroundColor: palette[DesignSystemToken.MUTED] }}\n    >\n      <div className=\"h-[3px] w-full rounded-full\" style={{ backgroundColor: palette[DesignSystemToken.PRIMARY] }} />\n      <div className=\"h-[3px] w-3/4 rounded-full\" style={{ backgroundColor: palette[DesignSystemToken.MUTED_FOREGROUND], opacity: 0.5 }} />\n      <div className=\"h-[3px] w-2/3 rounded-full\" style={{ backgroundColor: palette[DesignSystemToken.MUTED_FOREGROUND], opacity: 0.5 }} />\n    </div>\n\n    {/* Content card */}\n    <div\n      className=\"flex flex-1 flex-col gap-[4px] rounded-[3px] border p-[4px]\"\n      style={{ backgroundColor: palette[DesignSystemToken.MUTED], borderColor: palette[DesignSystemToken.BORDER] }}\n    >\n      <div className=\"h-[4px] w-2/3 rounded-full\" style={{ backgroundColor: palette[DesignSystemToken.FOREGROUND] }} />\n      <div className=\"h-[3px] w-full rounded-full\" style={{ backgroundColor: palette[DesignSystemToken.MUTED_FOREGROUND], opacity: 0.55 }} />\n      <div className=\"h-[3px] w-4/5 rounded-full\" style={{ backgroundColor: palette[DesignSystemToken.MUTED_FOREGROUND], opacity: 0.55 }} />\n      <div className=\"mt-auto h-[6px] w-2/5 rounded-[2px]\" style={{ backgroundColor: palette[DesignSystemToken.PRIMARY] }} />\n    </div>\n  </div>\n);\n\n/**\n * The preview for one option. `AUTO` is rendered as both palettes split down the\n * middle — the convention every OS-following theme picker uses, and the only\n * honest depiction of an option whose result depends on the device.\n */\nconst ThemePreview: React.FC<{ option: UserTheme; light: PreviewPalette; dark: PreviewPalette }> = ({ option, light, dark }) => {\n  if (option === UserTheme.AUTO) {\n    return (\n      <div aria-hidden=\"true\" className=\"flex h-16 w-full overflow-hidden rounded-md border\">\n        <div className=\"w-1/2 overflow-hidden\">\n          {/* Fixed at twice the half-width so each side renders a WHOLE miniature\n              clipped down the middle, rather than two squashed ones. */}\n          <div className=\"h-full w-[200%]\"><ThemePreviewPane palette={light} /></div>\n        </div>\n        <div className=\"w-1/2 overflow-hidden\">\n          <div className=\"ms-[-100%] h-full w-[200%]\"><ThemePreviewPane palette={dark} /></div>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div aria-hidden=\"true\" className=\"h-16 w-full overflow-hidden rounded-md border\">\n      <ThemePreviewPane palette={option === UserTheme.DARK ? dark : light} />\n    </div>\n  );\n};\n\nexport const AppPage_AppearanceSettings: React.FC = () => {\n  const { tComponent, isReady } = useI18n({ component: FrontendComponentType.APP_LAYOUTS_APPEARANCE_SETTINGS });\n  const { designSystemConfiguration } = useUI();\n  const { themePreference, selectTheme } = useThemePreferenceControl();\n\n  const t = useCallback(\n    (key: string) => tComponent(FrontendComponentType.APP_LAYOUTS_APPEARANCE_SETTINGS, key),\n    [tComponent],\n  );\n\n  const lightPalette = useMemo(\n    () => resolveModePalette(designSystemConfiguration?.tokens, designSystemConfiguration?.customTokens, DesignTokenRenderMode.LIGHT),\n    [designSystemConfiguration],\n  );\n  const darkPalette = useMemo(\n    () => resolveModePalette(designSystemConfiguration?.tokens, designSystemConfiguration?.customTokens, DesignTokenRenderMode.DARK),\n    [designSystemConfiguration],\n  );\n\n  // Gate on label readiness so the panel never flashes raw key paths — the same\n  // convention as `AppPage_SecuritySettings`. Copy is owned by the labelling\n  // pipeline, so there are deliberately no inline fallback strings here.\n  if (!isReady) return null;\n\n  return (\n    <div className=\"flex flex-col gap-section\">\n      {/* `h3`, not `h2`: the hub's own header owns the `h2` for this dialog, so a\n          panel heading is one level below it. */}\n      <div className=\"flex flex-col gap-item-xs\">\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      {/* No inner card header: it used to repeat the panel heading and its\n          description almost verbatim (\"Appearance Settings / Customize your app's\n          look and feel\" above \"Theme Selection / Choose light, dark, or system\n          theme\"), which was four lines of chrome introducing three tiles. The\n          group keeps its accessible name through `aria-label`. */}\n      <Card>\n        <CardContent className=\"p-card\">\n          <RadioGroupRoot\n            value={themePreference}\n            onValueChange={(value) => selectTheme(value as UserTheme)}\n            aria-label={t('themeHeading')}\n            className=\"grid-cols-1 gap-item sm:grid-cols-3\"\n          >\n            {THEME_OPTIONS.map((option) => {\n              const optionId = `appearance-theme-${option}`;\n              const isSelected = themePreference === option;\n              return (\n                <Label\n                  key={option}\n                  htmlFor={optionId}\n                  className={cn(\n                    'flex cursor-pointer flex-col gap-element rounded-lg border p-card-sm font-normal transition-colors',\n                    // The whole tile is the target, and selection is carried by\n                    // the tile itself as well as by the radio — a 12px dot is not\n                    // enough signal next to a picture.\n                    isSelected ? 'border-primary ring-1 ring-primary' : 'hover:border-primary/40',\n                  )}\n                >\n                  <ThemePreview option={option} light={lightPalette} dark={darkPalette} />\n                  <div className=\"flex items-center gap-element-xs\">\n                    <RadioGroupItem id={optionId} value={option} />\n                    <span className=\"text-sm font-medium\">{t(THEME_OPTION_LABEL_KEYS[option])}</span>\n                  </div>\n                </Label>\n              );\n            })}\n          </RadioGroupRoot>\n        </CardContent>\n      </Card>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"AppPage_AppearanceSettings.js","sourceRoot":"","sources":["../../../../../src/components/settings/AppPage_AppearanceSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * AppPage_AppearanceSettings — the Settings Hub \"Appearance\" panel.\n *\n * A bespoke `ENGINE_PANEL` (not a resource surface) that surfaces the app's\n * theme system: a Light / Dark / System selector. It reads the chosen preference\n * from `useThemePreferenceControl().themePreference` and commits changes through\n * that hook's `selectTheme`, which both applies the theme locally AND durably\n * records it on the user's preferences — see `useThemePreferenceControl` for why\n * the local half alone was actively harmful.\n *\n * ## Each option shows the theme, it does not describe it\n *\n * Theme is the one setting whose control can render its own result, and every\n * mature product does exactly that (VS Code, GitHub, Notion, Linear). The\n * previous version was three text radios with descriptions that restated their\n * own labels — \"Light / Always use the light theme.\" — so the reader learned\n * nothing a preview shows instantly, and had to commit to a look sight-unseen.\n *\n * The tiles are painted from the app's OWN design tokens resolved per mode (see\n * `resolveModePalette`), not from hardcoded greys, so an app that retunes its\n * palette retunes its previews. `System` shows both halves because that is\n * literally what it means.\n *\n * i18n follows the framework convention (same shape as `AppPage_SecuritySettings`):\n * `useI18n({ component })` requests this component's label namespace, the panel\n * gates rendering on `isReady` so it never flashes raw key paths, and a thin\n * `t(key)` reads each label. Label copy is owned entirely by the labelling\n * pipeline (declared in the sibling `.labels.ts`) — the component carries NO\n * hardcoded fallback strings.\n *\n * The selector reuses the framework radio control (`RadioGroupRoot` /\n * `RadioGroupItem`) + typography `Label` rather than a hand-rolled\n * `role=\"radio\"` group, so `radiogroup`/`radio` roles, roving focus,\n * `aria-checked`, and the selection indicator all come from the primitives.\n */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n  DesignSystemToken,\n  DesignTokenRenderMode,\n  FrontendComponentType,\n  getDesignTokenValue,\n  type DesignTokenConfiguration,\n} from '@wildo-ai/presets-components-models';\nimport { UserTheme } from '@wildo-ai/saas-models';\nimport { Label } from '~wildo-frontend-lib/components/typography/label';\nimport { RadioGroupRoot, RadioGroupItem } from '~wildo-frontend-lib/components/form/controls/enum/radio';\nimport { cn } from '~wildo-frontend-lib/core/ui/cn';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { useUI } from '~wildo-frontend-lib/core/ui/useUI';\nimport { useThemePreferenceControl } from '~wildo-frontend-lib/core/ui/useThemePreferenceControl';\n\n/** Theme options, in display order. */\nconst THEME_OPTIONS = [UserTheme.LIGHT, UserTheme.DARK, UserTheme.AUTO] as const;\n\n/** Label keys (resolved via `t`) for each theme option's name. */\nconst THEME_OPTION_LABEL_KEYS: Record<UserTheme, string> = {\n  [UserTheme.LIGHT]: 'themeLight',\n  [UserTheme.DARK]: 'themeDark',\n  [UserTheme.AUTO]: 'themeSystem',\n};\n\n/** The tokens a preview tile paints with — the smallest set that reads as \"an app\". */\nconst PREVIEW_TOKENS = [\n  DesignSystemToken.BACKGROUND,\n  DesignSystemToken.FOREGROUND,\n  DesignSystemToken.MUTED,\n  DesignSystemToken.MUTED_FOREGROUND,\n  DesignSystemToken.PRIMARY,\n  DesignSystemToken.BORDER,\n] as const;\n\ntype PreviewPalette = Record<(typeof PREVIEW_TOKENS)[number], string>;\n\n/**\n * Resolve the preview palette for ONE mode, independently of the mode the app is\n * currently in.\n *\n * This cannot be done with CSS alone, and the asymmetry is worth knowing before\n * anyone \"simplifies\" it. The dark palette is a plain `.dark { … }` class, so a\n * subtree can opt into it — but the LIGHT palette lives on `:root`, which only\n * ever matches `<html>`. Inside a dark app every descendant inherits the dark\n * values and there is no selector that restores the light ones. So a light\n * preview shown while the app is dark has to be given explicit values, which is\n * what the design-token configuration carries (`lightValue` / `darkValue` on\n * every `LIGHT_DARK` token).\n *\n * Falls back to `var(--token)` for any token the app did not configure. That\n * resolves correctly for the CURRENT mode and approximates the other — a\n * degraded preview rather than a broken one, and only reachable in an app that\n * declares no colour tokens at all.\n */\nfunction resolveModePalette(\n  tokens: Partial<Record<DesignSystemToken, DesignTokenConfiguration>> | undefined,\n  customTokens: Partial<Record<string, DesignTokenConfiguration>> | undefined,\n  mode: DesignTokenRenderMode,\n): PreviewPalette {\n  const resolve = (token: (typeof PREVIEW_TOKENS)[number]): string => {\n    const configuration = tokens?.[token] ?? customTokens?.[token];\n    return configuration ? getDesignTokenValue(configuration, mode) : `var(--${token})`;\n  };\n\n  return PREVIEW_TOKENS.reduce<PreviewPalette>(\n    (palette, token) => ({ ...palette, [token]: resolve(token) }),\n    {} as PreviewPalette,\n  );\n}\n\n/**\n * A miniature of the running app in one mode: page ground, a sidebar rail with\n * two nav lines, a content card with a heading line, a body line, and the accent.\n * Colours come in as explicit values so one tile can render light while the app\n * around it is dark.\n */\nconst ThemePreviewPane: React.FC<{ palette: PreviewPalette; className?: string }> = ({ palette, className }) => (\n  <div\n    className={cn('flex h-full w-full gap-[3px] p-[5px]', className)}\n    style={{ backgroundColor: palette[DesignSystemToken.BACKGROUND] }}\n  >\n    {/* Sidebar rail */}\n    <div\n      className=\"flex w-1/4 shrink-0 flex-col gap-[3px] rounded-[3px] p-[3px]\"\n      style={{ backgroundColor: palette[DesignSystemToken.MUTED] }}\n    >\n      <div className=\"h-[3px] w-full rounded-full\" style={{ backgroundColor: palette[DesignSystemToken.PRIMARY] }} />\n      <div className=\"h-[3px] w-3/4 rounded-full\" style={{ backgroundColor: palette[DesignSystemToken.MUTED_FOREGROUND], opacity: 0.5 }} />\n      <div className=\"h-[3px] w-2/3 rounded-full\" style={{ backgroundColor: palette[DesignSystemToken.MUTED_FOREGROUND], opacity: 0.5 }} />\n    </div>\n\n    {/* Content card */}\n    <div\n      className=\"flex flex-1 flex-col gap-[4px] rounded-[3px] border p-[4px]\"\n      style={{ backgroundColor: palette[DesignSystemToken.MUTED], borderColor: palette[DesignSystemToken.BORDER] }}\n    >\n      <div className=\"h-[4px] w-2/3 rounded-full\" style={{ backgroundColor: palette[DesignSystemToken.FOREGROUND] }} />\n      <div className=\"h-[3px] w-full rounded-full\" style={{ backgroundColor: palette[DesignSystemToken.MUTED_FOREGROUND], opacity: 0.55 }} />\n      <div className=\"h-[3px] w-4/5 rounded-full\" style={{ backgroundColor: palette[DesignSystemToken.MUTED_FOREGROUND], opacity: 0.55 }} />\n      <div className=\"mt-auto h-[6px] w-2/5 rounded-[2px]\" style={{ backgroundColor: palette[DesignSystemToken.PRIMARY] }} />\n    </div>\n  </div>\n);\n\n/**\n * The preview for one option. `AUTO` is rendered as both palettes split down the\n * middle — the convention every OS-following theme picker uses, and the only\n * honest depiction of an option whose result depends on the device.\n */\nconst ThemePreview: React.FC<{ option: UserTheme; light: PreviewPalette; dark: PreviewPalette }> = ({ option, light, dark }) => {\n  if (option === UserTheme.AUTO) {\n    return (\n      <div aria-hidden=\"true\" className=\"flex h-16 w-full overflow-hidden rounded-md border\">\n        <div className=\"w-1/2 overflow-hidden\">\n          {/* Fixed at twice the half-width so each side renders a WHOLE miniature\n              clipped down the middle, rather than two squashed ones. */}\n          <div className=\"h-full w-[200%]\"><ThemePreviewPane palette={light} /></div>\n        </div>\n        <div className=\"w-1/2 overflow-hidden\">\n          <div className=\"ms-[-100%] h-full w-[200%]\"><ThemePreviewPane palette={dark} /></div>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div aria-hidden=\"true\" className=\"h-16 w-full overflow-hidden rounded-md border\">\n      <ThemePreviewPane palette={option === UserTheme.DARK ? dark : light} />\n    </div>\n  );\n};\n\nexport const AppPage_AppearanceSettings: React.FC = () => {\n  const { tComponent, isReady } = useI18n({ component: FrontendComponentType.APP_LAYOUTS_APPEARANCE_SETTINGS });\n  const { designSystemConfiguration } = useUI();\n  const { themePreference, selectTheme } = useThemePreferenceControl();\n\n  const t = useCallback(\n    (key: string) => tComponent(FrontendComponentType.APP_LAYOUTS_APPEARANCE_SETTINGS, key),\n    [tComponent],\n  );\n\n  const lightPalette = useMemo(\n    () => resolveModePalette(designSystemConfiguration?.tokens, designSystemConfiguration?.customTokens, DesignTokenRenderMode.LIGHT),\n    [designSystemConfiguration],\n  );\n  const darkPalette = useMemo(\n    () => resolveModePalette(designSystemConfiguration?.tokens, designSystemConfiguration?.customTokens, DesignTokenRenderMode.DARK),\n    [designSystemConfiguration],\n  );\n\n  // Gate on label readiness so the panel never flashes raw key paths — the same\n  // convention as `AppPage_SecuritySettings`. Copy is owned by the labelling\n  // pipeline, so there are deliberately no inline fallback strings here.\n  if (!isReady) return null;\n\n  return (\n    <div className=\"flex flex-col gap-section\">\n      {/* `h3`, not `h2`: the hub's own header owns the `h2` for this dialog, so a\n          panel heading is one level below it. No sub-heading under it: \"Customize\n          how the app looks\" restated \"Appearance\" above three pictures of exactly\n          that. */}\n      <h3 className=\"text-base font-semibold tracking-tight\">{t('pageTitle')}</h3>\n\n      {/* No card around the tiles, and no card header: each tile is already a\n          bordered, selectable surface, so a card around three cards was a frame\n          with nothing to separate. The header it once carried repeated the panel\n          heading and its description almost verbatim. The group keeps its\n          accessible name through `aria-label`. */}\n      <RadioGroupRoot\n        value={themePreference}\n        onValueChange={(value) => selectTheme(value as UserTheme)}\n        aria-label={t('themeHeading')}\n        className=\"grid-cols-1 gap-item sm:grid-cols-3\"\n      >\n        {THEME_OPTIONS.map((option) => {\n          const optionId = `appearance-theme-${option}`;\n          const isSelected = themePreference === option;\n          return (\n            <Label\n              key={option}\n              htmlFor={optionId}\n              className={cn(\n                'flex cursor-pointer flex-col gap-element rounded-lg border p-card-sm font-normal transition-colors',\n                // The whole tile is the target, and selection is carried by\n                // the tile itself as well as by the radio — a 12px dot is not\n                // enough signal next to a picture.\n                isSelected ? 'border-primary ring-1 ring-primary' : 'hover:border-primary/40',\n              )}\n            >\n              <ThemePreview option={option} light={lightPalette} dark={darkPalette} />\n              <div className=\"flex items-center gap-element-xs\">\n                <RadioGroupItem id={optionId} value={option} />\n                <span className=\"text-sm font-medium\">{t(THEME_OPTION_LABEL_KEYS[option])}</span>\n              </div>\n            </Label>\n          );\n        })}\n      </RadioGroupRoot>\n    </div>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"AppPage_AppearanceSettings.labels.d.ts","sourceRoot":"","sources":["../../../../src/components/settings/AppPage_AppearanceSettings.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAa7C,eAAO,MAAM,kCAAkC,EAAE,mBAAmB,EAUnE,CAAC"}
+{"version":3,"file":"AppPage_AppearanceSettings.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/settings/AppPage_AppearanceSettings.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAe7C,eAAO,MAAM,kCAAkC,EAAE,mBAAmB,EASnE,CAAC"}

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

@@ -9,10 +9,11 @@ import { FrontendComponentType, LabelKind, registerComponentLabels, } from '@wil
 // "Always use the light theme." under a label reading "Light" — a restatement
 // with no information in it, occupying the place where information belongs.
 // Each option now renders a preview of the theme it selects, which is the thing
-// a description could only ever approximate.
+// a description could only ever approximate. The panel's own sub-heading
+// (`pageDescription`, "Customize how the app looks") went for the same reason:
+// it restated the heading above three pictures of exactly that.
 export const AppLayoutsAppearanceSettingsLabels = [
     { ref: 'pageTitle', kind: LabelKind.HEADING, purpose: 'Heading for the Appearance panel — the plain area name only ("Appearance"); the enclosing dialog already says "Settings", so repeating it here says the word three times on one screen' },
-    { ref: 'pageDescription', kind: LabelKind.DESCRIPTION, purpose: 'Sub-heading explaining the Appearance panel customizes the local look-and-feel' },
     // Rendered only as the radio group's accessible name (`aria-label`), never as
     // visible text: the panel heading above it already titles the section, and a
     // second visible heading repeated it.

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

@@ -1 +1 @@
-{"version":3,"file":"AppPage_AppearanceSettings.labels.js","sourceRoot":"","sources":["../../../../src/components/settings/AppPage_AppearanceSettings.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,SAAS,EAET,uBAAuB,GACxB,MAAM,qCAAqC,CAAC;AAE7C,+EAA+E;AAC/E,6EAA6E;AAC7E,kFAAkF;AAClF,+EAA+E;AAC/E,0EAA0E;AAC1E,EAAE;AACF,2EAA2E;AAC3E,8EAA8E;AAC9E,4EAA4E;AAC5E,gFAAgF;AAChF,6CAA6C;AAC7C,MAAM,CAAC,MAAM,kCAAkC,GAA0B;IACvE,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,wLAAwL,EAAE;IAChP,EAAE,GAAG,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,CAAC,WAAW,EAAE,OAAO,EAAE,gFAAgF,EAAE;IAClJ,8EAA8E;IAC9E,6EAA6E;IAC7E,sCAAsC;IACtC,EAAE,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,uHAAuH,EAAE;IAChL,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,gJAAgJ,EAAE;IACvM,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,+IAA+I,EAAE;IACrM,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,wJAAwJ,EAAE;CACjN,CAAC;AAEF,uBAAuB,CAAC,qBAAqB,CAAC,+BAA+B,EAAE,kCAAkC,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 Appearance settings panel: keys + kind\n// + per-key purpose. Statically scanned by the dev companion to generate the\n// `components.APP_LAYOUTS_APPEARANCE_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_APPEARANCE_SETTINGS, ...)`.\n//\n// The per-option DESCRIPTIONS were removed rather than reworded. They read\n// \"Always use the light theme.\" under a label reading \"Light\" — a restatement\n// with no information in it, occupying the place where information belongs.\n// Each option now renders a preview of the theme it selects, which is the thing\n// a description could only ever approximate.\nexport const AppLayoutsAppearanceSettingsLabels: LabellingUnitaryDef[] = [\n  { ref: 'pageTitle', kind: LabelKind.HEADING, purpose: 'Heading for the Appearance panel — the plain area name only (\"Appearance\"); the enclosing dialog already says \"Settings\", so repeating it here says the word three times on one screen' },\n  { ref: 'pageDescription', kind: LabelKind.DESCRIPTION, purpose: 'Sub-heading explaining the Appearance panel customizes the local look-and-feel' },\n  // Rendered only as the radio group's accessible name (`aria-label`), never as\n  // visible text: the panel heading above it already titles the section, and a\n  // second visible heading repeated it.\n  { ref: 'themeHeading', kind: LabelKind.LABEL, purpose: 'Accessible name for the theme selector radio group, announced by screen readers in place of a visible section heading' },\n  { ref: 'themeLight', kind: LabelKind.LABEL, purpose: 'Name of the option that always uses the light theme; sits under a rendered preview of that theme, so it must be the bare name and nothing more' },\n  { ref: 'themeDark', kind: LabelKind.LABEL, purpose: 'Name of the option that always uses the dark theme; sits under a rendered preview of that theme, so it must be the bare name and nothing more' },\n  { ref: 'themeSystem', kind: LabelKind.LABEL, purpose: 'Name of the option that follows the operating-system color scheme; sits under a split light/dark preview, so it must be the bare name and nothing more' },\n];\n\nregisterComponentLabels(FrontendComponentType.APP_LAYOUTS_APPEARANCE_SETTINGS, AppLayoutsAppearanceSettingsLabels);\n"]}
+{"version":3,"file":"AppPage_AppearanceSettings.labels.js","sourceRoot":"","sources":["../../../../../src/components/settings/AppPage_AppearanceSettings.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,SAAS,EAET,uBAAuB,GACxB,MAAM,qCAAqC,CAAC;AAE7C,+EAA+E;AAC/E,6EAA6E;AAC7E,kFAAkF;AAClF,+EAA+E;AAC/E,0EAA0E;AAC1E,EAAE;AACF,2EAA2E;AAC3E,8EAA8E;AAC9E,4EAA4E;AAC5E,gFAAgF;AAChF,yEAAyE;AACzE,+EAA+E;AAC/E,gEAAgE;AAChE,MAAM,CAAC,MAAM,kCAAkC,GAA0B;IACvE,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,wLAAwL,EAAE;IAChP,8EAA8E;IAC9E,6EAA6E;IAC7E,sCAAsC;IACtC,EAAE,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,uHAAuH,EAAE;IAChL,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,gJAAgJ,EAAE;IACvM,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,+IAA+I,EAAE;IACrM,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,wJAAwJ,EAAE;CACjN,CAAC;AAEF,uBAAuB,CAAC,qBAAqB,CAAC,+BAA+B,EAAE,kCAAkC,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 Appearance settings panel: keys + kind\n// + per-key purpose. Statically scanned by the dev companion to generate the\n// `components.APP_LAYOUTS_APPEARANCE_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_APPEARANCE_SETTINGS, ...)`.\n//\n// The per-option DESCRIPTIONS were removed rather than reworded. They read\n// \"Always use the light theme.\" under a label reading \"Light\" — a restatement\n// with no information in it, occupying the place where information belongs.\n// Each option now renders a preview of the theme it selects, which is the thing\n// a description could only ever approximate. The panel's own sub-heading\n// (`pageDescription`, \"Customize how the app looks\") went for the same reason:\n// it restated the heading above three pictures of exactly that.\nexport const AppLayoutsAppearanceSettingsLabels: LabellingUnitaryDef[] = [\n  { ref: 'pageTitle', kind: LabelKind.HEADING, purpose: 'Heading for the Appearance panel — the plain area name only (\"Appearance\"); the enclosing dialog already says \"Settings\", so repeating it here says the word three times on one screen' },\n  // Rendered only as the radio group's accessible name (`aria-label`), never as\n  // visible text: the panel heading above it already titles the section, and a\n  // second visible heading repeated it.\n  { ref: 'themeHeading', kind: LabelKind.LABEL, purpose: 'Accessible name for the theme selector radio group, announced by screen readers in place of a visible section heading' },\n  { ref: 'themeLight', kind: LabelKind.LABEL, purpose: 'Name of the option that always uses the light theme; sits under a rendered preview of that theme, so it must be the bare name and nothing more' },\n  { ref: 'themeDark', kind: LabelKind.LABEL, purpose: 'Name of the option that always uses the dark theme; sits under a rendered preview of that theme, so it must be the bare name and nothing more' },\n  { ref: 'themeSystem', kind: LabelKind.LABEL, purpose: 'Name of the option that follows the operating-system color scheme; sits under a split light/dark preview, so it must be the bare name and nothing more' },\n];\n\nregisterComponentLabels(FrontendComponentType.APP_LAYOUTS_APPEARANCE_SETTINGS, AppLayoutsAppearanceSettingsLabels);\n"]}

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

@@ -3,8 +3,10 @@
  *
  * 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()`
+ * status (with its provider-portal action), plan catalog + checkout, metered
+ * usage / credit pools, and invoice history — each under its own heading, with no
+ * second card heading from the panel. The portal link renders only as a fallback
+ * when the subscription status cannot. 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.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"AppPage_BillingSettings.d.ts","sourceRoot":"","sources":["../../../../src/components/settings/AppPage_BillingSettings.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,KAAsB,MAAM,OAAO,CAAC;AAY3C,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EA2F3C,CAAC"}
+{"version":3,"file":"AppPage_BillingSettings.d.ts","sourceRoot":"","sources":["../../../../../src/components/settings/AppPage_BillingSettings.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,KAAsB,MAAM,OAAO,CAAC;AAa3C,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAmE3C,CAAC"}

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

@@ -4,8 +4,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * 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()`
+ * status (with its provider-portal action), plan catalog + checkout, metered
+ * usage / credit pools, and invoice history — each under its own heading, with no
+ * second card heading from the panel. The portal link renders only as a fallback
+ * when the subscription status cannot. 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.
  *
@@ -26,6 +28,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useCallback } from 'react';
 import { FrontendComponentType } from '@wildo-ai/presets-components-models';
+import { BillingStateSlice } from '@wildo-ai/saas-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';
@@ -49,6 +52,21 @@ export const AppPage_BillingSettings = () => {
     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, {}) })] })] }));
+    /*
+     * The billing widgets each carry their OWN heading and, where they are a card, their own surface: "Subscription
+     * Status", "Plans and pricing", "Usage", "Invoice history". The panel used to wrap each one in a card headed with
+     * the same word ("Subscription" over "Subscription Status", "Plans" over "Plans and pricing"), so every block was
+     * named twice. The panel now composes them bare, under its one page title.
+     *
+     * There is no separate "Manage billing" card any more. It said "Manage billing" four times (card heading, an
+     * explanatory sentence, the portal link's own heading and its button) for the action the subscription status
+     * already offers as its button. That button is offered whenever the billing account is readable, which is exactly
+     * when the portal link works — EXCEPT when the subscription status itself cannot render (one of the slices it
+     * needs is unavailable) and shows an alert instead. Only then does the panel fall back to the portal link, so the
+     * way to the provider's portal is never lost.
+     */
+    const billingAccountAvailable = billing.isSliceAvailable(BillingStateSlice.BILLING_ACCOUNT);
+    const subscriptionStatusRenders = [BillingStateSlice.SUBSCRIPTION, BillingStateSlice.PRODUCTS, BillingStateSlice.PRICES].every((slice) => billing.isSliceAvailable(slice));
+    return (_jsxs("div", { className: "flex flex-col gap-section", children: [_jsx("h3", { className: "text-base font-semibold tracking-tight", children: t('pageTitle') }), _jsx(SubscriptionStatus, {}), billingAccountAvailable && !subscriptionStatusRenders && _jsx(BillingPortalLink, {}), _jsx(PricingTable, {}), _jsx(UsageDashboard, {}), _jsx(InvoiceHistory, {})] }));
 };
 //# sourceMappingURL=AppPage_BillingSettings.js.map

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

@@ -1 +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"]}
+{"version":3,"file":"AppPage_BillingSettings.js","sourceRoot":"","sources":["../../../../../src/components/settings/AppPage_BillingSettings.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,8CAA8C,CAAC;AACxG,OAAO,EAAE,IAAI,EAAE,MAAM,gDAAgD,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oEAAoE,CAAC;AACxG,OAAO,EAAE,iBAAiB,EAAE,MAAM,4DAA4D,CAAC;AAC/F,OAAO,EAAE,YAAY,EAAE,MAAM,8DAA8D,CAAC;AAC5F,OAAO,EAAE,cAAc,EAAE,MAAM,gEAAgE,CAAC;AAChG,OAAO,EAAE,cAAc,EAAE,MAAM,gEAAgE,CAAC;AAChG,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,OAAO,EAAE,OAAO,EAAE,MAAM,uCAAuC,CAAC;AAEhE,MAAM,CAAC,MAAM,uBAAuB,GAAa,GAAG,EAAE;IACpD,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,EAAE,SAAS,EAAE,qBAAqB,CAAC,4BAA4B,EAAE,CAAC,CAAC;IAE3G,MAAM,CAAC,GAAG,WAAW,CACnB,CAAC,GAAW,EAAE,EAAE,CAAC,UAAU,CAAC,qBAAqB,CAAC,4BAA4B,EAAE,GAAG,CAAC,EACpF,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,oEAAoE;IACpE,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,8EAA8E;IAC9E,yEAAyE;IACzE,4EAA4E;IAC5E,8BAA8B;IAC9B,IAAI,CAAC,OAAO,EAAE,SAAS,EAAE,CAAC;QACxB,OAAO,CACL,MAAC,IAAI,eACH,KAAC,UAAU,cACT,KAAC,SAAS,cAAE,CAAC,CAAC,eAAe,CAAC,GAAa,GAChC,EACb,KAAC,WAAW,cACV,KAAC,IAAI,IAAC,SAAS,EAAC,+BAA+B,YAAE,CAAC,CAAC,qBAAqB,CAAC,GAAQ,GACrE,IACT,CACR,CAAC;IACJ,CAAC;IAED;;;;;;;;;;;;OAYG;IACH,MAAM,uBAAuB,GAAG,OAAO,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC;IAC5F,MAAM,yBAAyB,GAAG,CAAC,iBAAiB,CAAC,YAAY,EAAE,iBAAiB,CAAC,QAAQ,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC,KAAK,CAC5H,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAC3C,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,2BAA2B,aAGxC,aAAI,SAAS,EAAC,wCAAwC,YAAE,CAAC,CAAC,WAAW,CAAC,GAAM,EAI5E,KAAC,kBAAkB,KAAG,EACrB,uBAAuB,IAAI,CAAC,yBAAyB,IAAI,KAAC,iBAAiB,KAAG,EAI/E,KAAC,YAAY,KAAG,EAEhB,KAAC,cAAc,KAAG,EAElB,KAAC,cAAc,KAAG,IACd,CACP,CAAC;AACJ,CAAC,CAAC","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 (with its provider-portal action), plan catalog + checkout, metered\n * usage / credit pools, and invoice history — each under its own heading, with no\n * second card heading from the panel. The portal link renders only as a fallback\n * when the subscription status cannot. 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 { BillingStateSlice } from '@wildo-ai/saas-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  /*\n   * The billing widgets each carry their OWN heading and, where they are a card, their own surface: \"Subscription\n   * Status\", \"Plans and pricing\", \"Usage\", \"Invoice history\". The panel used to wrap each one in a card headed with\n   * the same word (\"Subscription\" over \"Subscription Status\", \"Plans\" over \"Plans and pricing\"), so every block was\n   * named twice. The panel now composes them bare, under its one page title.\n   *\n   * There is no separate \"Manage billing\" card any more. It said \"Manage billing\" four times (card heading, an\n   * explanatory sentence, the portal link's own heading and its button) for the action the subscription status\n   * already offers as its button. That button is offered whenever the billing account is readable, which is exactly\n   * when the portal link works — EXCEPT when the subscription status itself cannot render (one of the slices it\n   * needs is unavailable) and shows an alert instead. Only then does the panel fall back to the portal link, so the\n   * way to the provider's portal is never lost.\n   */\n  const billingAccountAvailable = billing.isSliceAvailable(BillingStateSlice.BILLING_ACCOUNT);\n  const subscriptionStatusRenders = [BillingStateSlice.SUBSCRIPTION, BillingStateSlice.PRODUCTS, BillingStateSlice.PRICES].every(\n    (slice) => billing.isSliceAvailable(slice),\n  );\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, so a panel heading is one level\n          below it. No description under it: the blocks below ARE the plan, usage and invoices it used to list. */}\n      <h3 className=\"text-base font-semibold tracking-tight\">{t('pageTitle')}</h3>\n\n      {/* Self-hydrates: status/plan/period from the subscription, plan name via billing-product i18n, manage\n          action = safe customer portal. */}\n      <SubscriptionStatus />\n      {billingAccountAvailable && !subscriptionStatusRenders && <BillingPortalLink />}\n\n      {/* Self-hydrates: public active PLAN products scoped to the current billing scope; select = checkout (no\n          subscription) / portal (active). */}\n      <PricingTable />\n\n      <UsageDashboard />\n\n      <InvoiceHistory />\n    </div>\n  );\n};\n"]}

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

@@ -1 +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"}
+{"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;AAU7C,eAAO,MAAM,+BAA+B,EAAE,mBAAmB,EAIhE,CAAC"}

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

@@ -2,18 +2,13 @@ import { FrontendComponentType, LabelKind, registerComponentLabels, } from '@wil
 // 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.
+// panel composes own their own label namespaces AND their own headings
+// (subscription status, pricing table, usage dashboard, invoice history, portal
+// link) — so the panel carries only its page title and the disabled state. The
+// per-widget card headings and the page description it used to carry named each
+// block a second time and were removed.
 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' },
 ];

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

@@ -1 +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"]}
+{"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,uEAAuE;AACvE,gFAAgF;AAChF,+EAA+E;AAC/E,gFAAgF;AAChF,wCAAwC;AACxC,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,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 AND their own headings\n// (subscription status, pricing table, usage dashboard, invoice history, portal\n// link) — so the panel carries only its page title and the disabled state. The\n// per-widget card headings and the page description it used to carry named each\n// block a second time and were removed.\nexport const AppLayoutsBillingSettingsLabels: LabellingUnitaryDef[] = [\n  { ref: 'pageTitle', kind: LabelKind.HEADING, purpose: 'Page title of the billing settings panel (the billing home)' },\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"]}