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

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":"AAAA,OAAO,EACL,qBAAqB,EACrB,SAAS,EAET,uBAAuB,GACxB,MAAM,qCAAqC,CAAC;AAE7C,6GAA6G;AAC7G,uHAAuH;AACvH,gHAAgH;AAChH,wFAAwF;AACxF,EAAE;AACF,uGAAuG;AACvG,6GAA6G;AAC7G,sHAAsH;AACtH,MAAM,CAAC,MAAM,6CAA6C,GAA0B;IAClF,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,qGAAqG,EAAE;IAC7J,EAAE,GAAG,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,CAAC,WAAW,EAAE,OAAO,EAAE,6MAA6M,EAAE;IAC/Q,EAAE,GAAG,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,+CAA+C,EAAE;IACzG,EAAE,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,qEAAqE,EAAE;IAC9H,EAAE,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,oGAAoG,EAAE;IAC7J,EAAE,GAAG,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,yDAAyD,EAAE;IACrH,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,kEAAkE,EAAE;IAC1H,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,CAAC,MAAM,EAAE,OAAO,EAAE,+BAA+B,EAAE;IACtF,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,CAAC,MAAM,EAAE,OAAO,EAAE,+BAA+B,EAAE;IACtF,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,CAAC,MAAM,EAAE,OAAO,EAAE,gCAAgC,EAAE;IACxF,EAAE,GAAG,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,4DAA4D,EAAE;IACvH,EAAE,GAAG,EAAE,iCAAiC,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,mEAAmE,EAAE;IAC/I,EAAE,GAAG,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,+CAA+C,EAAE;IAC1G,EAAE,GAAG,EAAE,kBAAkB,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,wHAAwH,EAAE;IACrL,EAAE,GAAG,EAAE,oBAAoB,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,gFAAgF,EAAE;IAC/I,EAAE,GAAG,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,kHAAkH,EAAE;IAC/K,EAAE,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,uGAAuG,EAAE;IAChK,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,iDAAiD,EAAE;IACvG,EAAE,GAAG,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,yJAAyJ,EAAE;IACtN,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,iFAAiF,EAAE;IACrI,EAAE,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,gEAAgE,EAAE;CAC5H,CAAC;AAEF,uBAAuB,CAAC,qBAAqB,CAAC,6CAA6C,EAAE,6CAA6C,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 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"]}

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

@@ -38,10 +38,24 @@
  * integration have different owners, different authorization and different readers, and the scope is
  * what keeps them apart at every call this panel makes.
  *
+ * ## One row per CONNECTION, never one per ref (#1727)
+ *
+ * A vendor can be served by several refs — an engine part and the add-on packages beside it — declared as one shared
+ * connection (`providers.sharedConnections`, #1725) that holds ONE grant (#1670). So both halves of this panel speak in
+ * connections: the chooser offers one entry per connection (the catalogue folds members into their base and names
+ * them in `servesRefs`), and the list above it shows one row per connection the owner holds — its vendor label, the
+ * features it serves, the scopes its consent has accumulated (#1671), one health state, one "grant more access" when a
+ * feature was refused for a missing scope, and one disconnect that says it ends access for every feature listed. A
+ * vendor served by one ref is a connection of one ref and reads as it always did.
+ *
+ * Vendor names are the i18n tree's `providers.<ref>.displayName` (`buildProviderDisplayNameLabelKey`), owned by the
+ * connection's BASE ref; a name nobody has authored renders the raw ref, so the gap looks like a gap.
+ *
  * assurance-control: WILDO.IDENTITY.DELEGATED_AUTHORIZATION — the surface on which a principal
  * authorizes this application to act toward a named third party on their behalf.
  */
 import React from 'react';
+import { type LinkedProviderConnectionView, type ProviderScopeReauthorizationOffer } from '@wildo-ai/saas-models';
 import { ExternalProvider_Connection_DelegationMode, ExternalProvider_Connection_OwnerScope } from '@wildo-ai/external-connectors-models';
 import { type ConnectableProviderView } from '../../core/requests/wildo-http-client-manual-calls.frontend.service';
 /**
@@ -118,6 +132,50 @@ export declare const buildConnectionTarget: (input: {
  * string its consent screen is about to show, and no text is invented for it.
  */
 export declare const describeRequestedScopes: (scopes: readonly string[], answers: Readonly<Record<string, string>>, pendingLabel: string) => string[];
+/**
+ * How one CONNECTION stands, as the list shows it (#1727) — one state for the connection, never one per ref.
+ *
+ * Ordered by what the person must do: a superseded row serves nothing any more, a disabled one resolves as absent, a
+ * refused one must be re-authorized; only then does the grant's own validation say whether it has been proven.
+ */
+export declare enum ConnectedAccountStanding {
+    /** Stored under a ref before that ref joined a shared connection: nothing reads it (#1670, no re-seal door). */
+    SUPERSEDED = "SUPERSEDED",
+    /** A row of it is disabled, so every ref it serves resolves it as absent. */
+    DISABLED = "DISABLED",
+    /** The vendor refused it: every ref it serves needs it re-authorized — said ONCE, on the connection. */
+    NEEDS_REAUTHORIZATION = "NEEDS_REAUTHORIZATION",
+    /** The vendor accepted it. */
+    WORKING = "WORKING",
+    /** Stored, and not yet proven either way. */
+    NOT_YET_USED = "NOT_YET_USED"
+}
+/** How the last disconnect on this screen ended — the notice it owes the person. */
+export declare enum ConnectedAccountDisconnectOutcome {
+    DISCONNECTED = "DISCONNECTED",
+    /** A row could not be deleted; rows already deleted stay deleted, and the list is read again either way. */
+    FAILED = "FAILED"
+}
+/** The standing of one connection, from the listing's fields. */
+export declare const connectedAccountStanding: (connection: LinkedProviderConnectionView) => ConnectedAccountStanding;
+/**
+ * What a pending re-authorization offer (#1671) still asks of THIS connection — `undefined` when nothing is left.
+ *
+ * The offer was composed when a call was refused; the connection may have been granted some of those scopes since
+ * (another re-authorization, a reconnect). So a scope the connection already records is dropped here rather than
+ * requested again — the start leg would refuse it as `SCOPES_ALREADY_GRANTED` anyway, and asking a person to consent
+ * to what they already granted is noise. An offer for another connection is not this connection's.
+ */
+export declare const pendingReauthorizationFor: (connection: LinkedProviderConnectionView, offer: ProviderScopeReauthorizationOffer | undefined) => {
+    requestableScopes: string[];
+    administratorConsentScopes: string[];
+    offer: ProviderScopeReauthorizationOffer;
+} | undefined;
+/**
+ * Every provider display-label key the panel may render (#1727): each connection's and each served ref's, from the
+ * catalogue and from the listing. The i18n tree's `providers.<ref>.displayName` is the only source of a vendor's name.
+ */
+export declare const collectConnectedAccountLabelKeys: (providers: readonly ConnectableProviderView[], connections: readonly LinkedProviderConnectionView[]) => string[];
 export interface ConnectedAccountsSettingsProps {
     /**
      * WHOSE account is being connected.

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

@@ -1 +1 @@
-{"version":3,"file":"AppPage_ConnectedAccountsSettings.d.ts","sourceRoot":"","sources":["../../../../../src/components/settings/AppPage_ConnectedAccountsSettings.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAIjF,OAAO,EACL,0CAA0C,EAC1C,sCAAsC,EAIvC,MAAM,sCAAsC,CAAC;AAU9C,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,mFAAmF,CAAC;AAa3F;;;;;;;;;GASG;AACH,eAAO,MAAM,uBAAuB,GAClC,WAAW,SAAS,uBAAuB,EAAE,EAC7C,YAAY,sCAAsC,KACjD,uBAAuB,EAExB,CAAC;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,6BAA6B,GACxC,UAAU,uBAAuB,EACjC,YAAY,sCAAsC,KACjD,0CAA0C,EAY5C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,qBAAqB,GAAI,OAAO;IAC3C,UAAU,EAAE,sCAAsC,CAAC;IACnD,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,UAAU,EAAE,0CAA0C,CAAC;IACvD,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B,KAAG;IACF,UAAU,EAAE,sCAAsC,CAAC;IACnD,UAAU,EAAE,0CAA0C,CAAC;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;CAUzB,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,uBAAuB,GAClC,QAAQ,SAAS,MAAM,EAAE,EACzB,SAAS,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EACzC,cAAc,MAAM,KACnB,MAAM,EAKP,CAAC;AA0CH,MAAM,WAAW,8BAA8B;IAC7C;;;;;OAKG;IACH,UAAU,EAAE,sCAAsC,CAAC;CACpD;AAED,eAAO,MAAM,iCAAiC,EAAE,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,8BAA8B,CAAC,CA0hB/F,CAAC"}
+{"version":3,"file":"AppPage_ConnectedAccountsSettings.d.ts","sourceRoot":"","sources":["../../../../../src/components/settings/AppPage_ConnectedAccountsSettings.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,OAAO,KAAmE,MAAM,OAAO,CAAC;AAGxF,OAAO,EAML,KAAK,4BAA4B,EACjC,KAAK,iCAAiC,EACvC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,0CAA0C,EAC1C,sCAAsC,EAIvC,MAAM,sCAAsC,CAAC;AAsB9C,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,mFAAmF,CAAC;AAa3F;;;;;;;;;GASG;AACH,eAAO,MAAM,uBAAuB,GAClC,WAAW,SAAS,uBAAuB,EAAE,EAC7C,YAAY,sCAAsC,KACjD,uBAAuB,EAExB,CAAC;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,6BAA6B,GACxC,UAAU,uBAAuB,EACjC,YAAY,sCAAsC,KACjD,0CAA0C,EAY5C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,qBAAqB,GAAI,OAAO;IAC3C,UAAU,EAAE,sCAAsC,CAAC;IACnD,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,UAAU,EAAE,0CAA0C,CAAC;IACvD,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B,KAAG;IACF,UAAU,EAAE,sCAAsC,CAAC;IACnD,UAAU,EAAE,0CAA0C,CAAC;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;CAUzB,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,uBAAuB,GAClC,QAAQ,SAAS,MAAM,EAAE,EACzB,SAAS,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EACzC,cAAc,MAAM,KACnB,MAAM,EAKP,CAAC;AAEH;;;;;GAKG;AACH,oBAAY,wBAAwB;IAClC,gHAAgH;IAChH,UAAU,eAAe;IACzB,6EAA6E;IAC7E,QAAQ,aAAa;IACrB,wGAAwG;IACxG,qBAAqB,0BAA0B;IAC/C,8BAA8B;IAC9B,OAAO,YAAY;IACnB,6CAA6C;IAC7C,YAAY,iBAAiB;CAC9B;AAED,oFAAoF;AACpF,oBAAY,iCAAiC;IAC3C,YAAY,iBAAiB;IAC7B,4GAA4G;IAC5G,MAAM,WAAW;CAClB;AAED,iEAAiE;AACjE,eAAO,MAAM,wBAAwB,GAAI,YAAY,4BAA4B,KAAG,wBAWnF,CAAC;AAWF;;;;;;;GAOG;AACH,eAAO,MAAM,yBAAyB,GACpC,YAAY,4BAA4B,EACxC,OAAO,iCAAiC,GAAG,SAAS,KACnD;IAAE,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAAC,0BAA0B,EAAE,MAAM,EAAE,CAAC;IAAC,KAAK,EAAE,iCAAiC,CAAA;CAAE,GAAG,SAOpH,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gCAAgC,GAC3C,WAAW,SAAS,uBAAuB,EAAE,EAC7C,aAAa,SAAS,4BAA4B,EAAE,KACnD,MAAM,EAG+B,CAAC;AA0LzC,MAAM,WAAW,8BAA8B;IAC7C;;;;;OAKG;IACH,UAAU,EAAE,sCAAsC,CAAC;CACpD;AAED,eAAO,MAAM,iCAAiC,EAAE,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,8BAA8B,CAAC,CAuuB/F,CAAC"}