@saasicat/ui-vue 0.23.0 → 0.24.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { BootLoaderOptions, ManifestLoaderOptions, BuildRouteEntry, SidebarSection, NavBuilderOptions, BatchColumnData, BatchColumnFetcherOptions, BootLoader, ManifestLoader } from './client/index.js';
-export { ADMIN_UI_VERSION, AdminPromoListFilter, AdminPromoListRow, AdminResourceClientOptions, BatchColumnDriftError, BatchColumnFetcher, BatchColumnRow, BatchColumnValue, BootLoadError, CachedManifestEntry, DEFAULT_STANDARD_PAGE_ROUTES, HttpJsonError, LoginBootProject, LoginBrandFallback, LoginBranding, ManifestLoadError, MessageParams, ParamStyle, PlanCounts, PlanRowLike, PlanVersionLike, ResolvePlansInput, ResolvedPlan, SidebarItem, buildRoutes, buildSidebar, countPlans, createAdminResourceClient, defaultSectionOrder, formatCurrency, formatMessage, getJson, isCurrentlyValid, isExpired, isFutureScheduled, isProductionBoot, postJson, resolveExtension, resolveLoginBranding, resolvePlans, todayIsoDate, trimTrailingSlashes } from './client/index.js';
+export { ADMIN_UI_VERSION, AdminPromoListFilter, AdminPromoListRow, AdminResourceClientOptions, BatchColumnDriftError, BatchColumnFetcher, BatchColumnRow, BatchColumnValue, BootLoadError, CachedManifestEntry, DEFAULT_STANDARD_PAGE_ROUTES, HttpJsonError, IDENTITY_ACCENTS, IDENTITY_ACCENT_VALUES, IDENTITY_NEUTRAL, IDENTITY_NEUTRAL_VALUE, LoginBootProject, LoginBrandFallback, LoginBranding, ManifestLoadError, MessageParams, ParamStyle, PlanCounts, PlanRowLike, PlanVersionLike, ResolvePlansInput, ResolvedPlan, SidebarItem, buildRoutes, buildSidebar, countPlans, createAdminResourceClient, defaultSectionOrder, formatCurrency, formatMessage, getJson, identityAccentAt, identityAccentFor, identityChipStyle, isCurrentlyValid, isExpired, isFutureScheduled, isProductionBoot, postJson, resolveExtension, resolveLoginBranding, resolvePlans, todayIsoDate, trimTrailingSlashes } from './client/index.js';
 import { H as HttpClient, e as ActionRegistry, A as ActionHandler, K as KvStore, S as SaLocale } from './catalog-DJcfm5N2.js';
 export { f as ActionDefNotInManifestError, D as DEFAULT_SA_LOCALE, g as HttpResponse, M as MessageTree, h as MissingHandlerError, P as PartialMessages, R as ResolvedAction, i as SA_INTL_LOCALES, j as SA_LOCALES, k as SA_LOCALE_LABELS, l as SA_MESSAGES, m as SaBuiltinLocale, n as SaCatalog, o as SaCatalogOptions, c as SaLocaleDefinition, b as SaLocaleOption, a as SaMessages, d as SaMessagesOverrides, T as TranslationOf, p as createSaCatalog, q as defaultHttpClient, r as defaultKvStore, s as defineMessages, t as isSaBuiltinLocale, u as mergeMessages, v as resolveMessages } from './catalog-DJcfm5N2.js';
 import { A as ActionsMap, a as SuperAdminBrand, b as SuperAdminEndpoints, E as ExtensionsMap, c as SuperAdminLoginAdapter } from './use-sa-theme-OUBlaqgl.js';
@@ -1777,5 +1777,68 @@ declare const DEFAULT_I18N_DE: TenantPlanSectionI18n;
 declare const DEFAULT_I18N_EN: TenantPlanSectionI18n;
 /** Default map for the given UI locale — fallback layer under the `i18n` prop. */
 declare function defaultTenantPlanSectionI18n(locale: SaLocale): TenantPlanSectionI18n;
+/**
+ * The strings `PlanChangeWizard` takes.
+ *
+ * A projection of `TenantPlanSectionI18n` with the `wizard` prefix dropped, so
+ * the wizard's own template reads `i18n.stepChoose` rather than
+ * `i18n.wizardStepChoose`.
+ */
+interface PlanChangeWizardI18n {
+    title: string;
+    close: string;
+    currentLabel: string;
+    cycleMonthly: string;
+    cycleYearly: string;
+    badgeCurrent: string;
+    badgePopular: string;
+    priceUnitMonthly: string;
+    priceUnitYearly: string;
+    priceOnRequest: string;
+    stepChoose: string;
+    stepChooseIntro: string;
+    stepPreview: string;
+    stepConfirm: string;
+    next: string;
+    back: string;
+    previewLoading: string;
+    effectiveAtLabel: string;
+    effectiveImmediate: string;
+    prorationTitle: string;
+    prorationLine: string;
+    prorationDays: string;
+    limitsTitle: string;
+    limitsUsed: string;
+    limitsCurrent: string;
+    limitsTarget: string;
+    featuresGained: string;
+    featuresLost: string;
+    blockersTitle: string;
+    confirmImmediate: string;
+    confirmScheduled: string;
+    confirmAction: string;
+    confirmInProgress: string;
+    confirmPriceTitle: string;
+    confirmProratedNow: string;
+    confirmRecurringNext: string;
+    confirmRecurringFrom: string;
+    perCycleMonthly: string;
+    perCycleYearly: string;
+    confirmTrialNote: string;
+    confirmRecurringTrialEnd: string;
+    changeTypeUpgrade: string;
+    changeTypeDowngrade: string;
+    changeTypeCycle: string;
+    changeTypeNoop: string;
+}
+/**
+ * Builds the wizard's strings from the section's.
+ *
+ * Here rather than inline in `TenantPlanSection.vue`, because the wizard is an
+ * exported component: a consumer who mounts it directly would otherwise have to
+ * reproduce all 44 keys of this mapping by hand, and a visual fixture had to do
+ * exactly that before it moved.
+ */
+declare function planChangeWizardI18n(i18n: TenantPlanSectionI18n): PlanChangeWizardI18n;
 
-export { ALL_ROWS, ActionHandler, ActionRegistry, ActionsMap, type ApiListResponse, BatchColumnData, BatchColumnFetcherOptions, type BillingCycleStr, BootLoader, BootLoaderOptions, BuildRouteEntry, type BulkItemKind, type BulkItemStatus, type BulkPublishItem, type BundleAddPreviewShape, type BundleCancelPreviewShape, type BundlePreviewIssueShape, type BundlePreviewShape, type BundlePreviewSnapshotShape, BundlesApiError, CATALOG_DEFAULT_LOCALE, type CatalogBundle, CatalogEntriesApiError, type CatalogPlan, type ConfirmDialogState, type CreateAdminRoutesOptions, type CreateManifestStoreOptions, type CreatePlatformLoadersOptions, DEFAULT_I18N_DE, DEFAULT_I18N_EN, DEFAULT_ROWS_PER_PAGE, DEFAULT_YEARLY_FACTOR, DiscoveryLoadError, type DraftPricing, ENTITLEMENT_INJECTION_KEY, type EmailHistoryDetail, type EmailHistoryFilter, type EmailHistoryListResult, type EmailHistoryResendResult, type EmailHistoryRow, type EmailHistoryStatus, type EntitlementSnapshotShape, ExtensionsMap, type FeatureRegistryEntry, type FeatureRouterGuardOptions, type FeatureRowMarkers, HttpClient, KvStore, ManifestLoader, ManifestLoaderOptions, type ManifestStoreActions, type ManifestStoreDefinition, type ManifestStoreState, MarketingProjectionsApiError, type MfaDialogState, NavBuilderOptions, PAGE_SIZE_OPTIONS, type PackageSnapshotShape, type PilotCopy, type PilotCreatePayload, type PilotCreateResult, type PilotEditPayload, type PilotEditResult, type PlanChangePreviewShape, type PlanSnapshotShape, PlannedOnlyFeatureError, PlansApiError, type PlatformEmailProvider, type PlatformEmailTestInput, type PlatformEmailTestResult, type PlatformEmailWriteInput, type PlatformLoaders, type PlatformTenantActionRow, type PlatformTenantActionTone, type PlatformTenantActionsOptions, type PlatformTenantActionsResult, type PriceLineItem, ProjectPageHost, type PromoCodeCreatePayload, type PromoCodeDurationType, type PromoCodePlanOption, type PromoCodeUpdatePayload, type PromoCodeValueType, type PromoState, type PromoStatus, PromotionsApiError, type QuotaMeta, type RedundantFeatureHintShape, type ResolvedTenantAction, SERVER_PAGE_SIZE_OPTIONS, SaLocale, SidebarSection, type SubscriptionBundleShape, type SubscriptionDraft, SuperAdminBrand, SuperAdminEndpoints, SuperAdminLoginAdapter, type TenantActionFlowProviders, type TenantActionInput, type TenantManifestNavItem, type TenantManifestShape, type TenantPlanSectionI18n, type TenantRowLike, TenantSubscriptionBundlesApiError, type UsageSnapshotShape, type UseActionsResult, type UseApiListOptions, type UseApiListResult, type UseAuditEntriesOptions, type UseAuditEntriesResult, type UseBatchColumnsResult, type UseBulkPublishOptions, type UseBulkPublishResult, type UseBundleVersionsMapOptions, type UseBundleVersionsMapResult, type UseBundleVersionsOptions, type UseBundleVersionsResult, type UseBundlesOptions, type UseBundlesResult, type UseCatalogEntriesOptions, type UseCatalogEntriesResult, type UseDiscoveryOptions, type UseDiscoveryResult, type UseEntitlementOptions, type UseEntitlementResult, type UseLivePlanVersionsOptions, type UseLivePlanVersionsResult, type UseManifestResult, type UseMarketingProjectionsOptions, type UseMarketingProjectionsResult, type UseNavResult, type UsePaginationResult, type UsePlanEditorOptions, type UsePlanEditorResult, type UsePlanVersionsOptions, type UsePlanVersionsResult, type UsePlansOptions, type UsePlansResult, type UsePromotionsOptions, type UsePromotionsResult, type UsePublicBootResult, type UseSubscriptionDraftOptions, type UseTenantActionFlowResult, type UseTenantBillingCatalogOptions, type UseTenantBillingCatalogResult, type UseTenantBillingOptions, type UseTenantBillingResult, type UseTenantManifestOptions, type UseTenantManifestResult, type UseTenantSubscriptionBundlesOptions, type UseTenantSubscriptionBundlesResult, type UseTenantsOptions, type UseTenantsResult, buildFeatureRegistry, buildFeatureRouterGuard, buildQuotaRegistry, createAdminRoutes, createManifestStore, createPlatformLoaders, createProjectPageHostRoute, defaultIconForActionKey, defaultTenantPlanSectionI18n, defaultToneForActionKey, provideEntitlement, useActions, useApiList, useAuditEntries, useBatchColumns, useBulkPublish, useBundleVersions, useBundleVersionsMap, useBundles, useCatalogEntries, useDiscovery, useEntitlement, useInjectedEntitlement, useLivePlanVersions, useManifest, useMarketingProjections, useNav, usePagination, usePlanEditor, usePlanVersions, usePlans, usePlatformTenantActions, usePromotions, usePublicBoot, useSubscriptionDraft, useSuperAdminActions, useSuperAdminBrand, useSuperAdminEndpoints, useSuperAdminExtensions, useSuperAdminHttp, useSuperAdminLoginAdapter, useSuperAdminManifest, useTenantActionFlow, useTenantBilling, useTenantBillingCatalog, useTenantManifest, useTenantSubscriptionBundles, useTenants };
+export { ALL_ROWS, ActionHandler, ActionRegistry, ActionsMap, type ApiListResponse, BatchColumnData, BatchColumnFetcherOptions, type BillingCycleStr, BootLoader, BootLoaderOptions, BuildRouteEntry, type BulkItemKind, type BulkItemStatus, type BulkPublishItem, type BundleAddPreviewShape, type BundleCancelPreviewShape, type BundlePreviewIssueShape, type BundlePreviewShape, type BundlePreviewSnapshotShape, BundlesApiError, CATALOG_DEFAULT_LOCALE, type CatalogBundle, CatalogEntriesApiError, type CatalogPlan, type ConfirmDialogState, type CreateAdminRoutesOptions, type CreateManifestStoreOptions, type CreatePlatformLoadersOptions, DEFAULT_I18N_DE, DEFAULT_I18N_EN, DEFAULT_ROWS_PER_PAGE, DEFAULT_YEARLY_FACTOR, DiscoveryLoadError, type DraftPricing, ENTITLEMENT_INJECTION_KEY, type EmailHistoryDetail, type EmailHistoryFilter, type EmailHistoryListResult, type EmailHistoryResendResult, type EmailHistoryRow, type EmailHistoryStatus, type EntitlementSnapshotShape, ExtensionsMap, type FeatureRegistryEntry, type FeatureRouterGuardOptions, type FeatureRowMarkers, HttpClient, KvStore, ManifestLoader, ManifestLoaderOptions, type ManifestStoreActions, type ManifestStoreDefinition, type ManifestStoreState, MarketingProjectionsApiError, type MfaDialogState, NavBuilderOptions, PAGE_SIZE_OPTIONS, type PackageSnapshotShape, type PilotCopy, type PilotCreatePayload, type PilotCreateResult, type PilotEditPayload, type PilotEditResult, type PlanChangePreviewShape, type PlanChangeWizardI18n, type PlanSnapshotShape, PlannedOnlyFeatureError, PlansApiError, type PlatformEmailProvider, type PlatformEmailTestInput, type PlatformEmailTestResult, type PlatformEmailWriteInput, type PlatformLoaders, type PlatformTenantActionRow, type PlatformTenantActionTone, type PlatformTenantActionsOptions, type PlatformTenantActionsResult, type PriceLineItem, ProjectPageHost, type PromoCodeCreatePayload, type PromoCodeDurationType, type PromoCodePlanOption, type PromoCodeUpdatePayload, type PromoCodeValueType, type PromoState, type PromoStatus, PromotionsApiError, type QuotaMeta, type RedundantFeatureHintShape, type ResolvedTenantAction, SERVER_PAGE_SIZE_OPTIONS, SaLocale, SidebarSection, type SubscriptionBundleShape, type SubscriptionDraft, SuperAdminBrand, SuperAdminEndpoints, SuperAdminLoginAdapter, type TenantActionFlowProviders, type TenantActionInput, type TenantManifestNavItem, type TenantManifestShape, type TenantPlanSectionI18n, type TenantRowLike, TenantSubscriptionBundlesApiError, type UsageSnapshotShape, type UseActionsResult, type UseApiListOptions, type UseApiListResult, type UseAuditEntriesOptions, type UseAuditEntriesResult, type UseBatchColumnsResult, type UseBulkPublishOptions, type UseBulkPublishResult, type UseBundleVersionsMapOptions, type UseBundleVersionsMapResult, type UseBundleVersionsOptions, type UseBundleVersionsResult, type UseBundlesOptions, type UseBundlesResult, type UseCatalogEntriesOptions, type UseCatalogEntriesResult, type UseDiscoveryOptions, type UseDiscoveryResult, type UseEntitlementOptions, type UseEntitlementResult, type UseLivePlanVersionsOptions, type UseLivePlanVersionsResult, type UseManifestResult, type UseMarketingProjectionsOptions, type UseMarketingProjectionsResult, type UseNavResult, type UsePaginationResult, type UsePlanEditorOptions, type UsePlanEditorResult, type UsePlanVersionsOptions, type UsePlanVersionsResult, type UsePlansOptions, type UsePlansResult, type UsePromotionsOptions, type UsePromotionsResult, type UsePublicBootResult, type UseSubscriptionDraftOptions, type UseTenantActionFlowResult, type UseTenantBillingCatalogOptions, type UseTenantBillingCatalogResult, type UseTenantBillingOptions, type UseTenantBillingResult, type UseTenantManifestOptions, type UseTenantManifestResult, type UseTenantSubscriptionBundlesOptions, type UseTenantSubscriptionBundlesResult, type UseTenantsOptions, type UseTenantsResult, buildFeatureRegistry, buildFeatureRouterGuard, buildQuotaRegistry, createAdminRoutes, createManifestStore, createPlatformLoaders, createProjectPageHostRoute, defaultIconForActionKey, defaultTenantPlanSectionI18n, defaultToneForActionKey, planChangeWizardI18n, provideEntitlement, useActions, useApiList, useAuditEntries, useBatchColumns, useBulkPublish, useBundleVersions, useBundleVersionsMap, useBundles, useCatalogEntries, useDiscovery, useEntitlement, useInjectedEntitlement, useLivePlanVersions, useManifest, useMarketingProjections, useNav, usePagination, usePlanEditor, usePlanVersions, usePlans, usePlatformTenantActions, usePromotions, usePublicBoot, useSubscriptionDraft, useSuperAdminActions, useSuperAdminBrand, useSuperAdminEndpoints, useSuperAdminExtensions, useSuperAdminHttp, useSuperAdminLoginAdapter, useSuperAdminManifest, useTenantActionFlow, useTenantBilling, useTenantBillingCatalog, useTenantManifest, useTenantSubscriptionBundles, useTenants };

package/dist/index.js

@@ -8,6 +8,10 @@ import {
   BootLoader,
   DEFAULT_STANDARD_PAGE_ROUTES,
   HttpJsonError,
+  IDENTITY_ACCENTS,
+  IDENTITY_ACCENT_VALUES,
+  IDENTITY_NEUTRAL,
+  IDENTITY_NEUTRAL_VALUE,
   ManifestLoadError,
   ManifestLoader,
   MissingHandlerError,
@@ -17,6 +21,9 @@ import {
   createAdminResourceClient,
   defaultSectionOrder,
   getJson,
+  identityAccentAt,
+  identityAccentFor,
+  identityChipStyle,
   isCurrentlyValid,
   isExpired,
   isFutureScheduled,
@@ -27,7 +34,7 @@ import {
   resolvePlans,
   todayIsoDate,
   trimTrailingSlashes
-} from "./chunk-XMMFN2WJ.js";
+} from "./chunk-VYMTWCTT.js";
 import {
   SA_LOCALE_STORAGE_KEY,
   SA_THEME_KEY,
@@ -2826,6 +2833,55 @@ var DEFAULT_I18N_EN = {
 function defaultTenantPlanSectionI18n(locale) {
   return locale === "en" ? DEFAULT_I18N_EN : DEFAULT_I18N_DE;
 }
+function planChangeWizardI18n(i18n) {
+  return {
+    title: i18n.wizardTitle,
+    close: i18n.wizardClose,
+    currentLabel: i18n.wizardCurrent,
+    cycleMonthly: i18n.cycleMonthly,
+    cycleYearly: i18n.cycleYearly,
+    badgeCurrent: i18n.wizardBadgeCurrent,
+    badgePopular: i18n.wizardBadgePopular,
+    priceUnitMonthly: i18n.wizardPriceUnitMonthly,
+    priceUnitYearly: i18n.wizardPriceUnitYearly,
+    priceOnRequest: i18n.wizardPriceOnRequest,
+    stepChoose: i18n.wizardStepChoose,
+    stepChooseIntro: i18n.wizardStepChooseIntro,
+    stepPreview: i18n.wizardStepPreview,
+    stepConfirm: i18n.wizardStepConfirm,
+    next: i18n.wizardNext,
+    back: i18n.wizardBack,
+    previewLoading: i18n.wizardPreviewLoading,
+    effectiveAtLabel: i18n.wizardEffectiveAtLabel,
+    effectiveImmediate: i18n.wizardEffectiveImmediate,
+    prorationTitle: i18n.wizardProrationTitle,
+    prorationLine: i18n.wizardProrationLine,
+    prorationDays: i18n.wizardProrationDays,
+    limitsTitle: i18n.wizardLimitsTitle,
+    limitsUsed: i18n.wizardLimitsUsed,
+    limitsCurrent: i18n.wizardLimitsCurrent,
+    limitsTarget: i18n.wizardLimitsTarget,
+    featuresGained: i18n.wizardFeaturesGained,
+    featuresLost: i18n.wizardFeaturesLost,
+    blockersTitle: i18n.wizardBlockersTitle,
+    confirmImmediate: i18n.wizardConfirmImmediate,
+    confirmScheduled: i18n.wizardConfirmScheduled,
+    confirmAction: i18n.wizardConfirmAction,
+    confirmInProgress: i18n.wizardConfirmInProgress,
+    confirmPriceTitle: i18n.wizardConfirmPriceTitle,
+    confirmProratedNow: i18n.wizardConfirmProratedNow,
+    confirmRecurringNext: i18n.wizardConfirmRecurringNext,
+    confirmRecurringFrom: i18n.wizardConfirmRecurringFrom,
+    perCycleMonthly: i18n.wizardConfirmPerCycleMonthly,
+    perCycleYearly: i18n.wizardConfirmPerCycleYearly,
+    confirmTrialNote: i18n.wizardConfirmTrialNote,
+    confirmRecurringTrialEnd: i18n.wizardConfirmRecurringTrialEnd,
+    changeTypeUpgrade: i18n.wizardChangeTypeUpgrade,
+    changeTypeDowngrade: i18n.wizardChangeTypeDowngrade,
+    changeTypeCycle: i18n.wizardChangeTypeCycle,
+    changeTypeNoop: i18n.wizardChangeTypeNoop
+  };
+}
 export {
   ADMIN_UI_VERSION,
   ALL_ROWS,
@@ -2847,6 +2903,10 @@ export {
   DiscoveryLoadError,
   ENTITLEMENT_INJECTION_KEY,
   HttpJsonError,
+  IDENTITY_ACCENTS,
+  IDENTITY_ACCENT_VALUES,
+  IDENTITY_NEUTRAL,
+  IDENTITY_NEUTRAL_VALUE,
   ManifestLoadError,
   ManifestLoader,
   MarketingProjectionsApiError,
@@ -2899,12 +2959,16 @@ export {
   formatCurrency,
   formatMessage,
   getJson,
+  identityAccentAt,
+  identityAccentFor,
+  identityChipStyle,
   isCurrentlyValid,
   isExpired,
   isFutureScheduled,
   isProductionBoot,
   isSaBuiltinLocale,
   mergeMessages,
+  planChangeWizardI18n,
   postJson,
   provideEntitlement,
   resolveExtension,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasicat/ui-vue",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "Vue 3 components, resource clients and composables for the SuperAdmin UI shell. Provides boot and manifest loaders, navigation, actions and standard pages.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -61,7 +61,7 @@
     "src"
   ],
   "dependencies": {
-    "@saasicat/types": "^0.23.0"
+    "@saasicat/types": "^0.24.0"
   },
   "peerDependencies": {
     "pinia": "^2.0.0 || ^3.0.0",

package/src/client/identity-accents.ts

@@ -0,0 +1,129 @@
+// The one categorical palette, and the one way to tint from it.
+//
+// Five components used to carry their own six-colour ramp of hex literals —
+// `PlanList` and `PlanMatrix` byte for byte identical, `tenants/format.ts`
+// silently different (the same plan got one colour on the plans page and
+// another on the tenants page), `PromoCodesPage`, `MarketingPromotionsTab` and
+// `discovery-ui.ts` each with a third opinion. Every one of them was applied
+// through a `:style` binding, so none of them followed the theme: the plan mark
+// measured 2.96:1 on a dark surface and was carried as a named contrast
+// exception because there was no role to point it at.
+//
+// There is now one ramp, it lives in the theme, and it has a value per theme.
+//
+// A consumer may still hand in its own colours — `planAccents` is a public prop
+// and takes any CSS colour. That keeps working because every helper here mixes
+// rather than concatenates: `#7c3aed` + `'15'` needs a hex, and
+// `color-mix(in srgb, X 8%, transparent)` needs only a colour, which a
+// `var(--sa-color-identity-2)` also is.
+
+/**
+ * The categorical ramp, in the order an unnamed series should walk it.
+ *
+ * Seven entries, six of them hues plus the neutral. Long enough that a realistic
+ * plan list does not wrap, short enough that the colours stay tellable apart —
+ * a longer ramp is not a better one, it is a wheel of near-neighbours.
+ */
+export const IDENTITY_ACCENTS: readonly string[] = [
+    'var(--sa-color-identity-1)',
+    'var(--sa-color-identity-2)',
+    'var(--sa-color-identity-3)',
+    'var(--sa-color-identity-4)',
+    'var(--sa-color-identity-5)',
+    'var(--sa-color-identity-6)',
+];
+
+/**
+ * The same ramp as concrete colours, for values that are STORED rather than
+ * painted.
+ *
+ * A promotion's colour is data: the operator picks it, it goes over the wire,
+ * a database column holds it, and `CreatePromotionDto` caps it at 16
+ * characters. `var(--sa-color-identity-1)` is 28 and would fail validation on
+ * every create — which is exactly what happened when the swatches above were
+ * pointed at the token form. A token is paint; this is a value.
+ *
+ * These are the LIGHT theme's values, because a stored colour has to mean one
+ * thing wherever it is later rendered. `identity-accents-match-theme.test.js`
+ * binds each one to its role, so the two halves of the ramp cannot drift.
+ */
+export const IDENTITY_ACCENT_VALUES: readonly string[] = [
+    '#1d4ed8',
+    '#6d28d9',
+    '#047857',
+    '#b45309',
+    '#0369a1',
+    '#b91c1c',
+];
+
+/** The stored counterpart of `IDENTITY_NEUTRAL`. */
+export const IDENTITY_NEUTRAL_VALUE = '#64748b';
+
+/** For "no identity yet", and for the entry tier that should stay quiet. */
+export const IDENTITY_NEUTRAL = 'var(--sa-color-identity-neutral)';
+
+/**
+ * The accent for the nth member of a series, wrapping when the series is longer
+ * than the ramp.
+ *
+ * A negative or non-finite index yields the neutral rather than throwing:
+ * callers derive it from `findIndex`, which answers -1 for "not in the list",
+ * and a missing row is exactly the "no identity yet" case.
+ */
+export function identityAccentAt(index: number): string {
+    if (!Number.isFinite(index) || index < 0) return IDENTITY_NEUTRAL;
+    return IDENTITY_ACCENTS[Math.floor(index) % IDENTITY_ACCENTS.length]!;
+}
+
+/**
+ * The stable accent for a well-known key, so the standard plan tiers look the
+ * same on every screen that draws them.
+ *
+ * The tiers below are the ones the three former maps agreed on. `STARTER` and
+ * `BASIC` share the neutral because both are the entry tier — the earlier maps
+ * gave them two different greys, which said "these differ" about two things
+ * that do not.
+ */
+const WELL_KNOWN: Readonly<Record<string, string>> = {
+    STARTER: IDENTITY_NEUTRAL,
+    BASIC: IDENTITY_NEUTRAL,
+    STANDARD: 'var(--sa-color-identity-1)',
+    PRO: 'var(--sa-color-identity-2)',
+    PROFESSIONAL: 'var(--sa-color-identity-2)',
+    BUSINESS: 'var(--sa-color-identity-5)',
+    ENTERPRISE: 'var(--sa-color-identity-3)',
+};
+
+/**
+ * The accent for a key, in the order the product decides it.
+ *
+ * 1. what the consumer supplied, because it is their brand;
+ * 2. the well-known tier, so `ENTERPRISE` is the same colour everywhere;
+ * 3. the ramp position, so an unknown key still gets a stable colour;
+ * 4. the neutral.
+ */
+export function identityAccentFor(
+    key: string,
+    overrides: Readonly<Record<string, string>> = {},
+    index = -1,
+): string {
+    return overrides[key] ?? WELL_KNOWN[key] ?? identityAccentAt(index);
+}
+
+/**
+ * The three-part chip style every one of these sites was hand-rolling: a wash
+ * of the accent, the accent as text, a firmer edge of it.
+ *
+ * `color-mix()` rather than the `accent + '15'` string concatenation it
+ * replaces. That trick only worked on a six-digit hex — it silently produced
+ * garbage for `rgb()`, for a named colour and for anything a consumer might
+ * reasonably pass — and it could never have worked for a `var()`, which is why
+ * these palettes could not follow the theme in the first place.
+ */
+export function identityChipStyle(accent: string): Record<string, string> {
+    return {
+        background: `color-mix(in srgb, ${accent} 8%, transparent)`,
+        color: accent,
+        borderColor: `color-mix(in srgb, ${accent} 20%, transparent)`,
+    };
+}

package/src/client/index.ts

@@ -26,3 +26,4 @@ export * from './admin-resource-client.js';
 export * from './i18n/index.js';
 export * from './login-branding.js';
 export * from './resolve-plans.js';
+export * from './identity-accents.js';

package/src/components/MarketingPromotionsTab.vue

@@ -361,7 +361,11 @@ const cycleOptions = computed<Array<{ id: PromotionBillingCycle; label: string }
     { id: 'yearly', label: common.value.yearly },
     { id: 'both', label: common.value.both },
 ]);
-const COLORS = ['#10b981', '#dc2626', '#f59e0b', '#2563eb', '#7c3aed', '#0f172a'];
+import { IDENTITY_ACCENT_VALUES } from '../client/identity-accents.js';
+
+// Concrete values, not tokens: every swatch here is PATCHed to
+// `/catalog/promotions` and stored, and the DTO caps `color` at 16 characters.
+const COLORS = IDENTITY_ACCENT_VALUES;
 
 const today = new Date();
 
@@ -550,7 +554,7 @@ async function onAdd(): Promise<void> {
         validFrom: new Date().toISOString().slice(0, 10),
         validTo: new Date(today.getTime() + 30 * 86400000).toISOString().slice(0, 10),
         priority: 5,
-        color: '#2563eb',
+        color: IDENTITY_ACCENT_VALUES[0],
         i18n: { [DEFAULT_LOCALE]: { badge: 'Aktion' } },
     });
     expandedId.value = created.id;

package/src/components/bundle-editor/BundleVersionInlineEditor.vue

@@ -506,7 +506,7 @@ function recordsEqual(a: Record<string, number>, b: Record<string, number>): boo
     grid-template-columns: 1fr 1fr;
     gap: 18px;
 }
-@media (max-width: 1100px) {
+@media (max-width: 1023.98px) {
     .bve-grid {
         grid-template-columns: 1fr;
     }

package/src/components/dialogs/PromoCodeDialogFields.vue

@@ -265,6 +265,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { identityChipStyle } from '../../client/identity-accents.js';
 import { formatMessage } from '../../client/i18n/format.js';
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { PromoCodeDurationType, PromoCodePlanOption, PromoCodeValueType } from './types.js';
@@ -376,7 +377,7 @@ function togglePlan(key: string): void {
 
 function planChipStyle(p: PromoCodePlanOption): Record<string, string> {
     if (!isPlanSelected(p.key) || !p.color) return {};
-    return { borderColor: p.color, background: `${p.color}12`, color: p.color };
+    return { ...identityChipStyle(p.color), borderColor: p.color };
 }
 
 const previewValue = computed(() => {
@@ -452,7 +453,7 @@ const advancedOpen = defineModel<boolean>('advancedOpen', { default: false });
     grid-template-columns: 1fr 1fr;
 }
 
-@media (max-width: 600px) {
+@media (max-width: 599.98px) {
     .pc-grid--2 {
         grid-template-columns: 1fr;
     }

package/src/components/plan-create-dialog/PlanCreateDialog.vue

@@ -497,7 +497,7 @@ function onCancel(): void {
     display: inline-flex;
 }
 
-@media (max-width: 540px) {
+@media (max-width: 599.98px) {
     .pcd-row--2col,
     .pcd-choice-grid {
         grid-template-columns: 1fr;

package/src/components/plan-detail/PlanDetail.vue

@@ -579,10 +579,15 @@ async function executeTerminate(): Promise<void> {
     font-weight: 700;
 }
 .pd-timeline-seg.draft {
+    /* Hatched from the two warning TINTS, not from the saturated amber.
+     * `--sa-color-warning-strong` is a border and icon tone: it put the label
+     * at 2.34:1 in light and 1.34:1 in dark on every second stripe. The tinted
+     * pair is what the guide documents for text on a status surface, and what
+     * `.live` above already uses. */
     background: repeating-linear-gradient(
         135deg,
-        var(--sa-color-warning-border) 0 8px,
-        var(--sa-color-warning-strong) 8px 16px
+        var(--sa-color-warning-surface) 0 8px,
+        var(--sa-color-warning-surface-strong) 8px 16px
     );
     color: var(--sa-color-warning-fg);
     font-weight: 700;
@@ -1004,7 +1009,7 @@ async function executeTerminate(): Promise<void> {
     flex: 1;
 }
 
-@media (max-width: 1180px) {
+@media (max-width: 1023.98px) {
     .pd-body {
         grid-template-columns: 1fr;
     }

package/src/components/plan-list/PlanList.vue

@@ -45,11 +45,7 @@
                             <div class="sa-plan-list-plan-name">
                                 <div
                                     class="sa-plan-list-plan-mark"
-                                    :style="{
-                                        background: planAccent(p.planKey) + '15',
-                                        color: planAccent(p.planKey),
-                                        borderColor: planAccent(p.planKey) + '33',
-                                    }"
+                                    :style="identityChipStyle(planAccent(p.planKey))"
                                 >
                                     {{ p.planKey.slice(0, 3) }}
                                 </div>
@@ -415,6 +411,7 @@
 import { resolvePlans, type ResolvedPlan } from '../../client/resolve-plans.js';
 import { computed, ref } from 'vue';
 import type { PlanRow, PlanVersionRow } from '@saasicat/types';
+import { identityAccentFor, identityChipStyle } from '../../client/identity-accents.js';
 import { formatMessage } from '../../client/i18n/format.js';
 import { formatCurrency } from '../../client/i18n/currency.js';
 import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
@@ -456,24 +453,12 @@ const common = useSaMessages('common');
 // `clearable` emits null, not '' — see Quasar's use-field clearValue().
 const search = ref<string | null>('');
 
-const DEFAULT_ACCENTS: Record<string, string> = {
-    STARTER: '#64748b',
-    STANDARD: '#2563eb',
-    PRO: '#7c3aed',
-    PROFESSIONAL: '#7c3aed',
-    BUSINESS: '#0ea5e9',
-    ENTERPRISE: '#0f766e',
-    BASIC: '#475569',
-};
-const FALLBACK_ACCENTS = ['#2563eb', '#7c3aed', '#0f766e', '#f59e0b', '#0ea5e9', '#ef4444'];
-
 function planAccent(planKey: string): string {
-    const provided = props.planAccents[planKey];
-    if (provided) return provided;
-    const def = DEFAULT_ACCENTS[planKey];
-    if (def) return def;
-    const idx = props.plans.findIndex((p) => p.planKey === planKey);
-    return FALLBACK_ACCENTS[idx % FALLBACK_ACCENTS.length] ?? FALLBACK_ACCENTS[0]!;
+    return identityAccentFor(
+        planKey,
+        props.planAccents,
+        props.plans.findIndex((p) => p.planKey === planKey),
+    );
 }
 
 const resolvedPlans = computed(() =>
@@ -566,7 +551,13 @@ function hasAnyPublished(row: ResolvedPlan<PlanRow, PlanVersionRow>): boolean {
     background: var(--sa-color-bg-surface);
     border: 1px solid var(--sa-color-border);
     border-radius: 10px;
-    overflow: hidden;
+    /* Scrolls rather than clips. `overflow: hidden` was here to keep the corner
+     * radius, and it also cut the six-column grid off below ~790px — six data
+     * columns squeezed into a phone are not readable anyway, so the honest
+     * answer is the same as for the tab bar: let it scroll. `hidden` on the
+     * cross axis keeps the radius doing its job. */
+    overflow-x: auto;
+    overflow-y: hidden;
 }
 .sa-plan-list-toolbar {
     display: flex;
@@ -590,6 +581,10 @@ function hasAnyPublished(row: ResolvedPlan<PlanRow, PlanVersionRow>): boolean {
 .sa-plan-list-list {
     display: grid;
     grid-template-columns: 1.6fr 0.9fr 0.7fr 0.9fr 1.4fr 160px;
+    /* So the scroll above has something to scroll: without a content floor the
+     * tracks shrink to the container and the cells overflow individually,
+     * which is the clipped state rather than a scrollable one. */
+    min-width: max-content;
     /* Stretch, not centre. Every row is `display: contents`, so its cells are
      * grid items in their own right — and a centred item is only as tall as its
      * own content. The row's hover background is painted per cell, so the band

package/src/components/plan-matrix/PlanMatrix.vue

@@ -272,10 +272,7 @@
                                 <span
                                     v-if="hasFeature(p, fKey)"
                                     class="pm-check"
-                                    :style="{
-                                        background: planAccent(p.planKey) + '15',
-                                        color: planAccent(p.planKey),
-                                    }"
+                                    :style="identityChipStyle(planAccent(p.planKey))"
                                 >
                                     <svg
                                         width="12"
@@ -323,10 +320,7 @@
                             <span
                                 v-if="hasBundle(p, bKey)"
                                 class="pm-check"
-                                :style="{
-                                    background: planAccent(p.planKey) + '15',
-                                    color: planAccent(p.planKey),
-                                }"
+                                :style="identityChipStyle(planAccent(p.planKey))"
                             >
                                 <svg
                                     width="12"
@@ -384,6 +378,7 @@ import { computed } from 'vue';
  */
 const NBSP = '\u00A0';
 import type { PlanRow, PlanVersionRow } from '@saasicat/types';
+import { identityAccentFor, identityChipStyle } from '../../client/identity-accents.js';
 import { formatMessage } from '../../client/i18n/format.js';
 import { formatCurrency } from '../../client/i18n/currency.js';
 import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
@@ -477,24 +472,12 @@ function validFromLabel(validFrom: string): string {
     return formatMessage(msg.value.matrix.validFrom, { date: validFrom.slice(0, 10) });
 }
 
-const DEFAULT_ACCENTS: Record<string, string> = {
-    STARTER: '#64748b',
-    STANDARD: '#2563eb',
-    PRO: '#7c3aed',
-    PROFESSIONAL: '#7c3aed',
-    BUSINESS: '#0ea5e9',
-    ENTERPRISE: '#0f766e',
-    BASIC: '#475569',
-};
-const FALLBACK_ACCENTS = ['#2563eb', '#7c3aed', '#0f766e', '#f59e0b', '#0ea5e9', '#ef4444'];
-
 function planAccent(planKey: string): string {
-    const provided = props.planAccents[planKey];
-    if (provided) return provided;
-    const def = DEFAULT_ACCENTS[planKey];
-    if (def) return def;
-    const idx = props.plans.findIndex((p) => p.planKey === planKey);
-    return FALLBACK_ACCENTS[idx % FALLBACK_ACCENTS.length] ?? FALLBACK_ACCENTS[0]!;
+    return identityAccentFor(
+        planKey,
+        props.planAccents,
+        props.plans.findIndex((p) => p.planKey === planKey),
+    );
 }
 
 const resolvedPlans = computed<ResolvedPlan[]>(() =>

package/src/components/plan-review/PlanReview.vue

@@ -676,7 +676,7 @@ function onPublish(): void {
     line-height: 1.5;
 }
 
-@media (max-width: 1100px) {
+@media (max-width: 1023.98px) {
     .pr-grid {
         grid-template-columns: 1fr;
     }

package/src/components/plan-version-editor/PlanVersionEditor.vue

@@ -760,6 +760,10 @@ function emitSave(): void {
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
+    /* The editor reflows on ITS OWN width, not the window's — see the
+       `@container` rules at the end of this block. */
+    container-type: inline-size;
+    container-name: pve;
     /* A full view rather than a modal: the columns stretch to the content area
        AdminPage already sizes. */
     height: 100%;
@@ -1546,13 +1550,28 @@ function emitSave(): void {
     display: inline-flex;
 }
 
-/* ── Responsive ────────────────────────────────────────────────── */
-@media (max-width: 1280px) {
+/* ── Responsive ────────────────────────────────────────────────────
+ *
+ * On the CONTAINER's width, not the viewport's, because the viewport is not
+ * what this grid has to fit into. The admin drawer is 240px and collapsible, so
+ * a viewport threshold is wrong in one of its two states by construction — and
+ * with the drawer open at 1024–1100px the old viewport rule left 784–860px for
+ * `320px 1fr 360px`, squeezing the middle column to 104–180px and clipping its
+ * form controls behind `overflow: hidden`.
+ *
+ * The thresholds are the widths the columns actually need:
+ *   1060px  →  320 + 360 fixed leaves ≥ 380px for the basket
+ *    780px  →  below this the three-column form is not usable at all
+ *
+ * These are container queries, so they are not viewport breakpoints and the
+ * Quasar-band rule does not reach them; `@container` needs no newer browser
+ * than the theme already requires. */
+@container pve (max-width: 1060px) {
     .pve-body {
         grid-template-columns: 320px 1fr 360px;
     }
 }
-@media (max-width: 1100px) {
+@container pve (max-width: 780px) {
     .pve-body {
         grid-template-columns: 1fr;
         overflow-y: auto;

package/src/pages-standard/BundlesPage.vue

@@ -754,7 +754,7 @@ const classifyDiff = computed(() => props.classifyDiff);
     grid-template-columns: minmax(280px, 360px) 1fr;
     gap: 18px;
 }
-@media (max-width: 980px) {
+@media (max-width: 1023.98px) {
     .sa-bd-grid {
         grid-template-columns: 1fr;
     }