@wildo-ai/saas-frontend-lib 1.1.7 → 1.1.9

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 { 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"]}
+{"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;AAe7C,eAAO,MAAM,kCAAkC,EAAE,mBAAmB,EASnE,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.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,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"]}
+{"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.map

@@ -1 +1 @@
-{"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"}
+{"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.map

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

@@ -1 +1 @@
-{"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"}
+{"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"}