@saasicat/ui-vue 0.22.2 → 0.24.0

package/README.md

@@ -98,7 +98,7 @@ own call: `i18n.locales` narrows the set, `i18n.additionalLocales` adds
 languages the platform does not ship, `i18n.overrides` replaces individual
 strings, and `i18n.switcher: false` drops the control entirely. Components read
 the catalog via `useSaMessages('<namespace>')` / `useSuperAdminI18n()`.
-See [handbook §8.6](https://github.com/uelker70/saasicat/blob/main/docs/handbook.md#86-ui-language-i18n).
+See [handbook §8.7](https://github.com/uelker70/saasicat/blob/main/docs/handbook.md#87-ui-language-i18n).
 
 ## Build
 

package/dist/{chunk-LY52T4N4.js → chunk-TQQMKWN6.js}

@@ -125,6 +125,60 @@ function useSaMessages(namespace) {
   return computed(() => messages.value[namespace]);
 }
 
+// src/vue/use-sa-theme.ts
+import {
+  computed as computed2,
+  inject as inject2,
+  isRef as isRef2,
+  ref as ref2,
+  watch as watch2
+} from "vue";
+var SCHEMES = ["light", "dark", "system"];
+var STORAGE_KEY = "saasicat.theme.scheme";
+function isScheme(value) {
+  return typeof value === "string" && SCHEMES.includes(value);
+}
+function systemScheme() {
+  const value = ref2("light");
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return { value, unsubscribe: () => {
+    } };
+  }
+  const query = window.matchMedia("(prefers-color-scheme: dark)");
+  value.value = query.matches ? "dark" : "light";
+  const onChange = (event) => {
+    value.value = event.matches ? "dark" : "light";
+  };
+  query.addEventListener("change", onChange);
+  return { value, unsubscribe: () => query.removeEventListener("change", onChange) };
+}
+function createSaTheme(options = {}) {
+  const storage = options.storage ?? defaultKvStore();
+  const persist = options.persist !== false;
+  const provided = options.scheme;
+  const appOwnsIt = isRef2(provided);
+  const stored = persist && !appOwnsIt ? storage.get(STORAGE_KEY) : null;
+  const scheme = isRef2(provided) ? provided : ref2(isScheme(stored) ? stored : provided ?? "system");
+  const { value: system, unsubscribe } = systemScheme();
+  const stopPersisting = persist && !appOwnsIt ? watch2(scheme, (next) => storage.set(STORAGE_KEY, next)) : null;
+  return {
+    scheme,
+    resolved: computed2(() => scheme.value === "system" ? system.value : scheme.value),
+    dispose: () => {
+      unsubscribe();
+      stopPersisting?.();
+    }
+  };
+}
+var SA_THEME_KEY = /* @__PURE__ */ Symbol.for("@saasicat/ui-vue/SA_THEME");
+var fallbackTheme = null;
+function useSaTheme() {
+  const injected = inject2(SA_THEME_KEY, null);
+  if (injected) return injected;
+  fallbackTheme ??= createSaTheme({ persist: false });
+  return fallbackTheme;
+}
+
 export {
   SUPER_ADMIN_BRAND_KEY,
   SUPER_ADMIN_ENDPOINTS_KEY,
@@ -140,5 +194,8 @@ export {
   SUPER_ADMIN_I18N_KEY,
   createSuperAdminI18n,
   useSuperAdminI18n,
-  useSaMessages
+  useSaMessages,
+  createSaTheme,
+  SA_THEME_KEY,
+  useSaTheme
 };

package/dist/{chunk-XMMFN2WJ.js → chunk-VYMTWCTT.js}

@@ -630,6 +630,49 @@ function countPlans(resolved) {
   };
 }
 
+// src/client/identity-accents.ts
+var IDENTITY_ACCENTS = [
+  "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)"
+];
+var IDENTITY_ACCENT_VALUES = [
+  "#1d4ed8",
+  "#6d28d9",
+  "#047857",
+  "#b45309",
+  "#0369a1",
+  "#b91c1c"
+];
+var IDENTITY_NEUTRAL_VALUE = "#64748b";
+var IDENTITY_NEUTRAL = "var(--sa-color-identity-neutral)";
+function identityAccentAt(index) {
+  if (!Number.isFinite(index) || index < 0) return IDENTITY_NEUTRAL;
+  return IDENTITY_ACCENTS[Math.floor(index) % IDENTITY_ACCENTS.length];
+}
+var WELL_KNOWN = {
+  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)"
+};
+function identityAccentFor(key, overrides = {}, index = -1) {
+  return overrides[key] ?? WELL_KNOWN[key] ?? identityAccentAt(index);
+}
+function identityChipStyle(accent) {
+  return {
+    background: `color-mix(in srgb, ${accent} 8%, transparent)`,
+    color: accent,
+    borderColor: `color-mix(in srgb, ${accent} 20%, transparent)`
+  };
+}
+
 export {
   ADMIN_UI_VERSION,
   HttpJsonError,
@@ -658,5 +701,12 @@ export {
   isFutureScheduled,
   isExpired,
   resolvePlans,
-  countPlans
+  countPlans,
+  IDENTITY_ACCENTS,
+  IDENTITY_ACCENT_VALUES,
+  IDENTITY_NEUTRAL_VALUE,
+  IDENTITY_NEUTRAL,
+  identityAccentAt,
+  identityAccentFor,
+  identityChipStyle
 };

package/dist/client/index.cjs

@@ -30,6 +30,10 @@ __export(client_exports, {
   DEFAULT_SA_LOCALE: () => DEFAULT_SA_LOCALE,
   DEFAULT_STANDARD_PAGE_ROUTES: () => DEFAULT_STANDARD_PAGE_ROUTES,
   HttpJsonError: () => HttpJsonError,
+  IDENTITY_ACCENTS: () => IDENTITY_ACCENTS,
+  IDENTITY_ACCENT_VALUES: () => IDENTITY_ACCENT_VALUES,
+  IDENTITY_NEUTRAL: () => IDENTITY_NEUTRAL,
+  IDENTITY_NEUTRAL_VALUE: () => IDENTITY_NEUTRAL_VALUE,
   ManifestLoadError: () => ManifestLoadError,
   ManifestLoader: () => ManifestLoader,
   MissingHandlerError: () => MissingHandlerError,
@@ -49,6 +53,9 @@ __export(client_exports, {
   formatCurrency: () => formatCurrency,
   formatMessage: () => formatMessage,
   getJson: () => getJson,
+  identityAccentAt: () => identityAccentAt,
+  identityAccentFor: () => identityAccentFor,
+  identityChipStyle: () => identityChipStyle,
   isCurrentlyValid: () => isCurrentlyValid,
   isExpired: () => isExpired,
   isFutureScheduled: () => isFutureScheduled,
@@ -3856,6 +3863,49 @@ function countPlans(resolved) {
     tenants: resolved.reduce((sum, p) => sum + p.tenantCount, 0)
   };
 }
+
+// src/client/identity-accents.ts
+var IDENTITY_ACCENTS = [
+  "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)"
+];
+var IDENTITY_ACCENT_VALUES = [
+  "#1d4ed8",
+  "#6d28d9",
+  "#047857",
+  "#b45309",
+  "#0369a1",
+  "#b91c1c"
+];
+var IDENTITY_NEUTRAL_VALUE = "#64748b";
+var IDENTITY_NEUTRAL = "var(--sa-color-identity-neutral)";
+function identityAccentAt(index) {
+  if (!Number.isFinite(index) || index < 0) return IDENTITY_NEUTRAL;
+  return IDENTITY_ACCENTS[Math.floor(index) % IDENTITY_ACCENTS.length];
+}
+var WELL_KNOWN = {
+  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)"
+};
+function identityAccentFor(key, overrides = {}, index = -1) {
+  return overrides[key] ?? WELL_KNOWN[key] ?? identityAccentAt(index);
+}
+function identityChipStyle(accent) {
+  return {
+    background: `color-mix(in srgb, ${accent} 8%, transparent)`,
+    color: accent,
+    borderColor: `color-mix(in srgb, ${accent} 20%, transparent)`
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ADMIN_UI_VERSION,
@@ -3868,6 +3918,10 @@ function countPlans(resolved) {
   DEFAULT_SA_LOCALE,
   DEFAULT_STANDARD_PAGE_ROUTES,
   HttpJsonError,
+  IDENTITY_ACCENTS,
+  IDENTITY_ACCENT_VALUES,
+  IDENTITY_NEUTRAL,
+  IDENTITY_NEUTRAL_VALUE,
   ManifestLoadError,
   ManifestLoader,
   MissingHandlerError,
@@ -3887,6 +3941,9 @@ function countPlans(resolved) {
   formatCurrency,
   formatMessage,
   getJson,
+  identityAccentAt,
+  identityAccentFor,
+  identityChipStyle,
   isCurrentlyValid,
   isExpired,
   isFutureScheduled,

package/dist/client/index.d.cts

@@ -389,4 +389,61 @@ interface PlanCounts {
 }
 declare function countPlans<P extends PlanRowLike, V extends PlanVersionLike>(resolved: readonly ResolvedPlan<P, V>[]): PlanCounts;
 
-export { ADMIN_UI_VERSION, type AdminPromoListFilter, type AdminPromoListRow, type AdminResourceClientOptions, type BatchColumnData, BatchColumnDriftError, BatchColumnFetcher, type BatchColumnFetcherOptions, type BatchColumnRow, type BatchColumnValue, BootLoadError, BootLoader, type BootLoaderOptions, type BuildRouteEntry, type CachedManifestEntry, DEFAULT_STANDARD_PAGE_ROUTES, HttpClient, HttpJsonError, KvStore, type LoginBootProject, type LoginBrandFallback, type LoginBranding, ManifestLoadError, ManifestLoader, type ManifestLoaderOptions, type MessageParams, type NavBuilderOptions, type ParamStyle, type PlanCounts, type PlanRowLike, type PlanVersionLike, type ResolvePlansInput, type ResolvedPlan, SaLocale, type SidebarItem, type SidebarSection, buildRoutes, buildSidebar, countPlans, createAdminResourceClient, defaultSectionOrder, formatCurrency, formatMessage, getJson, isCurrentlyValid, isExpired, isFutureScheduled, isProductionBoot, postJson, resolveExtension, resolveLoginBranding, resolvePlans, todayIsoDate, trimTrailingSlashes };
+/**
+ * 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.
+ */
+declare const IDENTITY_ACCENTS: readonly string[];
+/**
+ * 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.
+ */
+declare const IDENTITY_ACCENT_VALUES: readonly string[];
+/** The stored counterpart of `IDENTITY_NEUTRAL`. */
+declare const IDENTITY_NEUTRAL_VALUE = "#64748b";
+/** For "no identity yet", and for the entry tier that should stay quiet. */
+declare 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.
+ */
+declare function identityAccentAt(index: number): string;
+/**
+ * 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.
+ */
+declare function identityAccentFor(key: string, overrides?: Readonly<Record<string, string>>, index?: number): string;
+/**
+ * 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.
+ */
+declare function identityChipStyle(accent: string): Record<string, string>;
+
+export { ADMIN_UI_VERSION, type AdminPromoListFilter, type AdminPromoListRow, type AdminResourceClientOptions, type BatchColumnData, BatchColumnDriftError, BatchColumnFetcher, type BatchColumnFetcherOptions, type BatchColumnRow, type BatchColumnValue, BootLoadError, BootLoader, type BootLoaderOptions, type BuildRouteEntry, type CachedManifestEntry, DEFAULT_STANDARD_PAGE_ROUTES, HttpClient, HttpJsonError, IDENTITY_ACCENTS, IDENTITY_ACCENT_VALUES, IDENTITY_NEUTRAL, IDENTITY_NEUTRAL_VALUE, KvStore, type LoginBootProject, type LoginBrandFallback, type LoginBranding, ManifestLoadError, ManifestLoader, type ManifestLoaderOptions, type MessageParams, type NavBuilderOptions, type ParamStyle, type PlanCounts, type PlanRowLike, type PlanVersionLike, type ResolvePlansInput, type ResolvedPlan, SaLocale, type SidebarItem, type SidebarSection, buildRoutes, buildSidebar, countPlans, createAdminResourceClient, defaultSectionOrder, formatCurrency, formatMessage, getJson, identityAccentAt, identityAccentFor, identityChipStyle, isCurrentlyValid, isExpired, isFutureScheduled, isProductionBoot, postJson, resolveExtension, resolveLoginBranding, resolvePlans, todayIsoDate, trimTrailingSlashes };

package/dist/client/index.d.ts

@@ -389,4 +389,61 @@ interface PlanCounts {
 }
 declare function countPlans<P extends PlanRowLike, V extends PlanVersionLike>(resolved: readonly ResolvedPlan<P, V>[]): PlanCounts;
 
-export { ADMIN_UI_VERSION, type AdminPromoListFilter, type AdminPromoListRow, type AdminResourceClientOptions, type BatchColumnData, BatchColumnDriftError, BatchColumnFetcher, type BatchColumnFetcherOptions, type BatchColumnRow, type BatchColumnValue, BootLoadError, BootLoader, type BootLoaderOptions, type BuildRouteEntry, type CachedManifestEntry, DEFAULT_STANDARD_PAGE_ROUTES, HttpClient, HttpJsonError, KvStore, type LoginBootProject, type LoginBrandFallback, type LoginBranding, ManifestLoadError, ManifestLoader, type ManifestLoaderOptions, type MessageParams, type NavBuilderOptions, type ParamStyle, type PlanCounts, type PlanRowLike, type PlanVersionLike, type ResolvePlansInput, type ResolvedPlan, SaLocale, type SidebarItem, type SidebarSection, buildRoutes, buildSidebar, countPlans, createAdminResourceClient, defaultSectionOrder, formatCurrency, formatMessage, getJson, isCurrentlyValid, isExpired, isFutureScheduled, isProductionBoot, postJson, resolveExtension, resolveLoginBranding, resolvePlans, todayIsoDate, trimTrailingSlashes };
+/**
+ * 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.
+ */
+declare const IDENTITY_ACCENTS: readonly string[];
+/**
+ * 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.
+ */
+declare const IDENTITY_ACCENT_VALUES: readonly string[];
+/** The stored counterpart of `IDENTITY_NEUTRAL`. */
+declare const IDENTITY_NEUTRAL_VALUE = "#64748b";
+/** For "no identity yet", and for the entry tier that should stay quiet. */
+declare 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.
+ */
+declare function identityAccentAt(index: number): string;
+/**
+ * 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.
+ */
+declare function identityAccentFor(key: string, overrides?: Readonly<Record<string, string>>, index?: number): string;
+/**
+ * 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.
+ */
+declare function identityChipStyle(accent: string): Record<string, string>;
+
+export { ADMIN_UI_VERSION, type AdminPromoListFilter, type AdminPromoListRow, type AdminResourceClientOptions, type BatchColumnData, BatchColumnDriftError, BatchColumnFetcher, type BatchColumnFetcherOptions, type BatchColumnRow, type BatchColumnValue, BootLoadError, BootLoader, type BootLoaderOptions, type BuildRouteEntry, type CachedManifestEntry, DEFAULT_STANDARD_PAGE_ROUTES, HttpClient, HttpJsonError, IDENTITY_ACCENTS, IDENTITY_ACCENT_VALUES, IDENTITY_NEUTRAL, IDENTITY_NEUTRAL_VALUE, KvStore, type LoginBootProject, type LoginBrandFallback, type LoginBranding, ManifestLoadError, ManifestLoader, type ManifestLoaderOptions, type MessageParams, type NavBuilderOptions, type ParamStyle, type PlanCounts, type PlanRowLike, type PlanVersionLike, type ResolvePlansInput, type ResolvedPlan, SaLocale, type SidebarItem, type SidebarSection, buildRoutes, buildSidebar, countPlans, createAdminResourceClient, defaultSectionOrder, formatCurrency, formatMessage, getJson, identityAccentAt, identityAccentFor, identityChipStyle, isCurrentlyValid, isExpired, isFutureScheduled, isProductionBoot, postJson, resolveExtension, resolveLoginBranding, resolvePlans, todayIsoDate, trimTrailingSlashes };

package/dist/client/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 {
   DEFAULT_SA_LOCALE,
   SA_INTL_LOCALES,
@@ -55,6 +62,10 @@ export {
   DEFAULT_SA_LOCALE,
   DEFAULT_STANDARD_PAGE_ROUTES,
   HttpJsonError,
+  IDENTITY_ACCENTS,
+  IDENTITY_ACCENT_VALUES,
+  IDENTITY_NEUTRAL,
+  IDENTITY_NEUTRAL_VALUE,
   ManifestLoadError,
   ManifestLoader,
   MissingHandlerError,
@@ -74,6 +85,9 @@ export {
   formatCurrency,
   formatMessage,
   getJson,
+  identityAccentAt,
+  identityAccentFor,
+  identityChipStyle,
   isCurrentlyValid,
   isExpired,
   isFutureScheduled,