npm - @saasicat/ui-vue - Versions diffs - 0.22.2 → 0.24.0 - Mend

@saasicat/ui-vue 0.22.2 → 0.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (119) hide show

package/README.md +1 -1
package/dist/{chunk-LY52T4N4.js → chunk-TQQMKWN6.js} +58 -1
package/dist/{chunk-XMMFN2WJ.js → chunk-VYMTWCTT.js} +51 -1
package/dist/client/index.cjs +57 -0
package/dist/client/index.d.cts +58 -1
package/dist/client/index.d.ts +58 -1
package/dist/client/index.js +15 -1
package/dist/index.cjs +321 -159
package/dist/index.d.cts +67 -4
package/dist/index.d.ts +67 -4
package/dist/index.js +72 -2
package/dist/quasar/index.cjs +116 -20
package/dist/quasar/index.d.cts +48 -3
package/dist/quasar/index.d.ts +48 -3
package/dist/quasar/index.js +58 -3
package/dist/{use-super-admin-i18n-CgTuNi8h.d.cts → use-sa-theme-B5t7oXph.d.cts} +51 -1
package/dist/{use-super-admin-i18n-CHNdsSlm.d.ts → use-sa-theme-OUBlaqgl.d.ts} +51 -1
package/package.json +5 -2
package/src/client/identity-accents.ts +129 -0
package/src/client/index.ts +1 -0
package/src/components/BundleVersionPublishDialog.vue +17 -17
package/src/components/KvBlock.vue +6 -6
package/src/components/MarketingPromotionsTab.vue +84 -80
package/src/components/MfaPromptDialog.vue +2 -2
package/src/components/TenantActionConfirmDialog.vue +5 -5
package/src/components/VersionDiffPreview.vue +18 -18
package/src/components/bundle-editor/BundleCreatePanel.vue +52 -52
package/src/components/bundle-editor/BundleFeaturesEditor.vue +20 -20
package/src/components/bundle-editor/BundlePlanCompatPicker.vue +33 -33
package/src/components/bundle-editor/BundleQuotasEditor.vue +26 -26
package/src/components/bundle-editor/BundleStatusBanner.vue +21 -21
package/src/components/bundle-editor/BundleVersionInlineEditor.vue +49 -49
package/src/components/bundle-editor/BundleVersionStrip.vue +30 -30
package/src/components/dialogs/PilotCreateDialog.vue +20 -20
package/src/components/dialogs/PilotEditDialog.vue +6 -6
package/src/components/dialogs/PromoCodeCreateDialog.vue +9 -9
package/src/components/dialogs/PromoCodeDialogFields.vue +64 -63
package/src/components/dialogs/PromoCodeEditDialog.vue +11 -11
package/src/components/dialogs/pilot-dialog.css +48 -48
package/src/components/plan/PlanCycleToggle.vue +9 -16
package/src/components/plan/PlanGrid.vue +30 -34
package/src/components/plan/PriceSummary.vue +35 -35
package/src/components/plan/PromoCodeInput.vue +26 -26
package/src/components/plan/PublicBundleGrid.vue +32 -28
package/src/components/plan-create-dialog/PlanCreateDialog.vue +50 -50
package/src/components/plan-detail/PlanDetail.vue +178 -157
package/src/components/plan-detail/PlanTitleEdit.vue +11 -11
package/src/components/plan-list/PlanList.vue +116 -100
package/src/components/plan-matrix/PlanMatrix.vue +97 -114
package/src/components/plan-review/PlanReview.vue +61 -57
package/src/components/plan-version-editor/PlanVersionEditor.vue +246 -203
package/src/components/wizard-stepper/WizardStepper.vue +17 -17
package/src/index.ts +1 -0
package/src/pages-standard/AdminLayout.vue +58 -37
package/src/pages-standard/AdminManifestErrorPage.vue +6 -6
package/src/pages-standard/AuditPage.vue +3 -3
package/src/pages-standard/BundlesPage.vue +37 -37
package/src/pages-standard/DashboardPage.vue +22 -19
package/src/pages-standard/DiscoveryPage.vue +55 -49
package/src/pages-standard/EmailHistoryPage.vue +53 -71
package/src/pages-standard/MarketingCatalogPage.vue +245 -221
package/src/pages-standard/PilotsPage.vue +7 -6
package/src/pages-standard/PlatformEmailPage.vue +18 -18
package/src/pages-standard/PromoCodeDetailPage.vue +3 -3
package/src/pages-standard/PromoCodesPage.vue +10 -7
package/src/pages-standard/SuperAdminLoginPage.vue +39 -25
package/src/pages-standard/SuperAdminSetupWizard.vue +44 -33
package/src/pages-standard/TenantDetailPage.vue +7 -7
package/src/pages-standard/TenantsPage.vue +16 -50
package/src/pages-standard/bundles-page/BundleAccordionList.vue +13 -13
package/src/pages-standard/discovery-page/CatalogEntryTransPanel.vue +24 -24
package/src/pages-standard/discovery-page/DiscoveryCapList.vue +22 -22
package/src/pages-standard/discovery-page/DiscoveryFeatureCard.vue +39 -39
package/src/pages-standard/discovery-page/DiscoveryQuotaCard.vue +26 -26
package/src/pages-standard/discovery-page/DiscoveryStatusControl.vue +1 -1
package/src/pages-standard/discovery-page/discovery-ui.ts +10 -7
package/src/pages-standard/marketing-catalog/MarketingCatalogAdmin.vue +2 -5
package/src/pages-standard/plan-versions/PlanDiffCard.vue +27 -20
package/src/pages-standard/plan-versions/PlanVersionsDiff.vue +24 -16
package/src/pages-standard/plan-versions/PlanVersionsTimeline.vue +45 -45
package/src/pages-standard/plans-page/PlanBundleOverview.vue +21 -15
package/src/pages-standard/plans-page/PlanPublishDialog.vue +4 -4
package/src/pages-standard/plans-page/PlansPageToast.vue +6 -6
package/src/pages-standard/sa-theme.css +9 -687
package/src/pages-standard/tenants/StatusPill.vue +13 -13
package/src/pages-standard/tenants/format.ts +11 -12
package/src/pages-tenant/LimitsRow.vue +4 -4
package/src/pages-tenant/MySubscriptionBundlesPage.vue +70 -61
package/src/pages-tenant/OnboardingConfigurator.vue +25 -25
package/src/pages-tenant/PackageSnapshotPanel.vue +10 -16
package/src/pages-tenant/PendingVersionBanner.vue +12 -12
package/src/pages-tenant/PlanChangeWizard.vue +22 -76
package/src/pages-tenant/TenantPlanSection.vue +19 -69
package/src/pages-tenant/UsageBar.vue +7 -7
package/src/pages-tenant/default-i18n.ts +113 -0
package/src/pages-tenant/tenant-plan-section/BundlePreviewDialog.vue +14 -14
package/src/pages-tenant/tenant-plan-section/TenantBundleStore.vue +10 -10
package/src/pages-tenant/tenant-plan-section/TenantFeatureMatrix.vue +2 -2
package/src/quasar/create-super-admin-app.ts +96 -1
package/src/quasar/dark-bridge.ts +66 -0
package/src/quasar/index.ts +1 -0
package/src/ui/theme/_breakpoints.scss +34 -0
package/src/ui/theme/base.css +50 -0
package/src/ui/theme/components/body.css +23 -0
package/src/ui/theme/components/button.css +158 -0
package/src/ui/theme/components/card.css +74 -0
package/src/ui/theme/components/field.css +38 -0
package/src/ui/theme/components/hero.css +46 -0
package/src/ui/theme/components/paginator.css +63 -0
package/src/ui/theme/components/section.css +67 -0
package/src/ui/theme/components/statistics.css +189 -0
package/src/ui/theme/components/table.css +60 -0
package/src/ui/theme/index.css +42 -0
package/src/ui/theme/tokens.legacy.css +147 -0
package/src/ui/theme/tokens.primitive.css +112 -0
package/src/ui/theme/tokens.scale.css +103 -0
package/src/ui/theme/tokens.semantic.dark.css +185 -0
package/src/ui/theme/tokens.semantic.light.css +242 -0
package/src/vue/use-sa-theme.ts +154 -0

package/dist/quasar/index.d.cts CHANGED Viewed

@@ -1,9 +1,9 @@
-import { Component, App } from 'vue';
+import { Component, App, WatchStopHandle } from 'vue';
 import { QuasarPluginOptions } from 'quasar';
 import { Pinia } from 'pinia';
 import { RouteRecordRaw, RouterHistory, Router } from 'vue-router';
 import { H as HttpClient } from '../catalog-DJcfm5N2.cjs';
-import { S as SuperAdminGuardOptions, a as SuperAdminBrand, b as SuperAdminEndpoints, E as ExtensionsMap, A as ActionsMap, c as SuperAdminLoginAdapter, U as UiNotify, I as InstallPlugin, d as SuperAdminI18nOptions, e as SuperAdminI18n } from '../use-super-admin-i18n-CgTuNi8h.cjs';
+import { S as SuperAdminGuardOptions, a as SuperAdminBrand, b as SuperAdminEndpoints, E as ExtensionsMap, A as ActionsMap, c as SuperAdminLoginAdapter, U as UiNotify, I as InstallPlugin, d as SuperAdminI18nOptions, e as SaThemeOptions, f as SuperAdminI18n, g as SaTheme } from '../use-sa-theme-B5t7oXph.cjs';
 import '@saasicat/types';
 interface CreateSuperAdminAppOptions extends SuperAdminGuardOptions {
@@ -66,6 +66,17 @@ interface CreateSuperAdminAppOptions extends SuperAdminGuardOptions {
      * runtime. Consumed via `useSuperAdminI18n()` / `useSaMessages()`.
      */
     i18n?: SuperAdminI18nOptions;
+    /**
+     * Optional: colour scheme. Default follows the operating system and
+     * remembers an explicit pick. The context is returned on the handle
+     * (`handle.theme`) — set `handle.theme.scheme.value = 'dark'` to switch at
+     * runtime, and read it anywhere via `useSaTheme()`.
+     *
+     * Whatever it resolves to is mirrored onto `<html data-sa-theme>` AND into
+     * Quasar's `Dark`, so the platform's surfaces and Quasar's own components
+     * never disagree.
+     */
+    theme?: SaThemeOptions;
 }
 interface SuperAdminAppHandle {
     app: App;
@@ -73,9 +84,27 @@ interface SuperAdminAppHandle {
     pinia: Pinia;
     /** i18n context of the shell — switch locale via `i18n.locale.value`. */
     i18n: SuperAdminI18n;
+    /** Colour scheme of the shell — switch via `theme.scheme.value`. */
+    theme: SaTheme;
     /** Mounts the app on a selector. Returns the root component instance. */
     mount: (selector: string | Element) => ReturnType<App['mount']>;
+    /**
+     * Releases what this helper attached to the DOCUMENT — the theme's
+     * `prefers-color-scheme` subscription and the bridge that mirrors it onto
+     * `data-sa-theme` and Quasar's `Dark`. Idempotent; it does not unmount the
+     * app, which is `handle.app.unmount()`.
+     *
+     * Only matters where a shell is torn down while the document survives: hot
+     * reload, a micro-frontend, a second shell in one page. Skip it and the old
+     * bridge keeps writing to the one document on the next OS theme change, and
+     * can overrule the scheme the new shell was given.
+     */
+    dispose: () => void;
 }
+/** Marks Quasar's teleported nodes so the theme can reach them. Exported so a
+ * test fixture can install the same config a real app gets — without it the
+ * `.sa-portal` rules are exercised by nothing. */
+declare const SA_PORTAL_CLASS = "sa-portal";
 /**
  * Universal bootstrap function for SuperAdmin apps. Replaces the `main.ts`
  * boilerplate duplicated per app today (Quasar + Pinia + Router + manifest
@@ -84,6 +113,22 @@ interface SuperAdminAppHandle {
  */
 declare function createSuperAdminApp(options: CreateSuperAdminAppOptions): SuperAdminAppHandle;
+/**
+ * Mirrors a theme context onto the document and Quasar. Returns the stop
+ * handle; `createSuperAdminApp()` wires this up for you.
+ *
+ * `immediate` is not optional: at bootstrap the stored pick is already resolved
+ * and nothing has painted yet, so a first-change-only watcher would render one
+ * frame in the wrong theme on every reload.
+ *
+ * That first tick MIRRORS, it does not negotiate — whatever `theme.resolved`
+ * says is written to Quasar, including `Dark.set(false)`. So a caller that
+ * bootstraps with Quasar already dark has to say so when it builds the theme,
+ * or its own choice is erased one line after it was applied.
+ * `createSuperAdminApp` does exactly that, seeding from `Dark.isActive`.
+ */
+declare function bindSaThemeToDocument(theme: SaTheme): WatchStopHandle;
 /**
  * Quasar-backed notify port: `position: 'top'` matches the convention the
  * standard pages used with their previous direct `$q.notify` calls.
@@ -92,4 +137,4 @@ declare const quasarNotify: UiNotify;
 /** Returns the app-provided notify port, falling back to the Quasar default. */
 declare function useSuperAdminNotify(): UiNotify;
-export { type CreateSuperAdminAppOptions, type SuperAdminAppHandle, createSuperAdminApp, quasarNotify, useSuperAdminNotify };
+export { type CreateSuperAdminAppOptions, SA_PORTAL_CLASS, type SuperAdminAppHandle, bindSaThemeToDocument, createSuperAdminApp, quasarNotify, useSuperAdminNotify };

package/dist/quasar/index.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
-import { Component, App } from 'vue';
+import { Component, App, WatchStopHandle } from 'vue';
 import { QuasarPluginOptions } from 'quasar';
 import { Pinia } from 'pinia';
 import { RouteRecordRaw, RouterHistory, Router } from 'vue-router';
 import { H as HttpClient } from '../catalog-DJcfm5N2.js';
-import { S as SuperAdminGuardOptions, a as SuperAdminBrand, b as SuperAdminEndpoints, E as ExtensionsMap, A as ActionsMap, c as SuperAdminLoginAdapter, U as UiNotify, I as InstallPlugin, d as SuperAdminI18nOptions, e as SuperAdminI18n } from '../use-super-admin-i18n-CHNdsSlm.js';
+import { S as SuperAdminGuardOptions, a as SuperAdminBrand, b as SuperAdminEndpoints, E as ExtensionsMap, A as ActionsMap, c as SuperAdminLoginAdapter, U as UiNotify, I as InstallPlugin, d as SuperAdminI18nOptions, e as SaThemeOptions, f as SuperAdminI18n, g as SaTheme } from '../use-sa-theme-OUBlaqgl.js';
 import '@saasicat/types';
 interface CreateSuperAdminAppOptions extends SuperAdminGuardOptions {
@@ -66,6 +66,17 @@ interface CreateSuperAdminAppOptions extends SuperAdminGuardOptions {
      * runtime. Consumed via `useSuperAdminI18n()` / `useSaMessages()`.
      */
     i18n?: SuperAdminI18nOptions;
+    /**
+     * Optional: colour scheme. Default follows the operating system and
+     * remembers an explicit pick. The context is returned on the handle
+     * (`handle.theme`) — set `handle.theme.scheme.value = 'dark'` to switch at
+     * runtime, and read it anywhere via `useSaTheme()`.
+     *
+     * Whatever it resolves to is mirrored onto `<html data-sa-theme>` AND into
+     * Quasar's `Dark`, so the platform's surfaces and Quasar's own components
+     * never disagree.
+     */
+    theme?: SaThemeOptions;
 }
 interface SuperAdminAppHandle {
     app: App;
@@ -73,9 +84,27 @@ interface SuperAdminAppHandle {
     pinia: Pinia;
     /** i18n context of the shell — switch locale via `i18n.locale.value`. */
     i18n: SuperAdminI18n;
+    /** Colour scheme of the shell — switch via `theme.scheme.value`. */
+    theme: SaTheme;
     /** Mounts the app on a selector. Returns the root component instance. */
     mount: (selector: string | Element) => ReturnType<App['mount']>;
+    /**
+     * Releases what this helper attached to the DOCUMENT — the theme's
+     * `prefers-color-scheme` subscription and the bridge that mirrors it onto
+     * `data-sa-theme` and Quasar's `Dark`. Idempotent; it does not unmount the
+     * app, which is `handle.app.unmount()`.
+     *
+     * Only matters where a shell is torn down while the document survives: hot
+     * reload, a micro-frontend, a second shell in one page. Skip it and the old
+     * bridge keeps writing to the one document on the next OS theme change, and
+     * can overrule the scheme the new shell was given.
+     */
+    dispose: () => void;
 }
+/** Marks Quasar's teleported nodes so the theme can reach them. Exported so a
+ * test fixture can install the same config a real app gets — without it the
+ * `.sa-portal` rules are exercised by nothing. */
+declare const SA_PORTAL_CLASS = "sa-portal";
 /**
  * Universal bootstrap function for SuperAdmin apps. Replaces the `main.ts`
  * boilerplate duplicated per app today (Quasar + Pinia + Router + manifest
@@ -84,6 +113,22 @@ interface SuperAdminAppHandle {
  */
 declare function createSuperAdminApp(options: CreateSuperAdminAppOptions): SuperAdminAppHandle;
+/**
+ * Mirrors a theme context onto the document and Quasar. Returns the stop
+ * handle; `createSuperAdminApp()` wires this up for you.
+ *
+ * `immediate` is not optional: at bootstrap the stored pick is already resolved
+ * and nothing has painted yet, so a first-change-only watcher would render one
+ * frame in the wrong theme on every reload.
+ *
+ * That first tick MIRRORS, it does not negotiate — whatever `theme.resolved`
+ * says is written to Quasar, including `Dark.set(false)`. So a caller that
+ * bootstraps with Quasar already dark has to say so when it builds the theme,
+ * or its own choice is erased one line after it was applied.
+ * `createSuperAdminApp` does exactly that, seeding from `Dark.isActive`.
+ */
+declare function bindSaThemeToDocument(theme: SaTheme): WatchStopHandle;
 /**
  * Quasar-backed notify port: `position: 'top'` matches the convention the
  * standard pages used with their previous direct `$q.notify` calls.
@@ -92,4 +137,4 @@ declare const quasarNotify: UiNotify;
 /** Returns the app-provided notify port, falling back to the Quasar default. */
 declare function useSuperAdminNotify(): UiNotify;
-export { type CreateSuperAdminAppOptions, type SuperAdminAppHandle, createSuperAdminApp, quasarNotify, useSuperAdminNotify };
+export { type CreateSuperAdminAppOptions, SA_PORTAL_CLASS, type SuperAdminAppHandle, bindSaThemeToDocument, createSuperAdminApp, quasarNotify, useSuperAdminNotify };

package/dist/quasar/index.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import {
+  SA_THEME_KEY,
   SUPER_ADMIN_ACTIONS_KEY,
   SUPER_ADMIN_BRAND_KEY,
   SUPER_ADMIN_ENDPOINTS_KEY,
@@ -10,8 +11,9 @@ import {
   SUPER_ADMIN_MANIFEST_KEY,
   SUPER_ADMIN_NOTIFY_KEY,
   buildNavigationGuard,
+  createSaTheme,
   createSuperAdminI18n
-} from "../chunk-LY52T4N4.js";
+} from "../chunk-TQQMKWN6.js";
 import {
   defaultHttpClient
 } from "../chunk-F7NRM6KI.js";
@@ -25,6 +27,33 @@ import {
   createWebHistory
 } from "vue-router";
+// src/quasar/dark-bridge.ts
+import { Dark } from "quasar";
+import { watch } from "vue";
+function bindSaThemeToDocument(theme) {
+  const toQuasar = watch(
+    theme.resolved,
+    (resolved) => {
+      if (typeof document !== "undefined") {
+        document.documentElement.setAttribute("data-sa-theme", resolved);
+      }
+      Dark.set(resolved === "dark");
+    },
+    { immediate: true }
+  );
+  const fromQuasar = watch(
+    () => Dark.isActive,
+    (isDark) => {
+      const asScheme = isDark ? "dark" : "light";
+      if (theme.resolved.value !== asScheme) theme.scheme.value = asScheme;
+    }
+  );
+  return () => {
+    toQuasar();
+    fromQuasar();
+  };
+}
 // src/quasar/notify.ts
 import { inject } from "vue";
 import { Notify } from "quasar";
@@ -42,13 +71,25 @@ function useSuperAdminNotify() {
 }
 // src/quasar/create-super-admin-app.ts
+var SA_PORTAL_CLASS = "sa-portal";
 var DEFAULT_QUASAR_OPTIONS = {
   plugins: { Notify: Notify2, Dialog, Loading },
   config: { notify: { position: "top-right", timeout: 3e3 } }
 };
 function createSuperAdminApp(options) {
   const app = createApp(options.rootComponent);
-  app.use(Quasar, options.quasarOptions ?? DEFAULT_QUASAR_OPTIONS);
+  const quasarOptions = options.quasarOptions ?? DEFAULT_QUASAR_OPTIONS;
+  const config = quasarOptions.config;
+  const existingPortalClass = config?.globalNodes?.class;
+  app.use(Quasar, {
+    ...quasarOptions,
+    config: {
+      ...quasarOptions.config,
+      globalNodes: {
+        class: [existingPortalClass, SA_PORTAL_CLASS].filter(Boolean).join(" ")
+      }
+    }
+  });
   const pinia = createPinia();
   app.use(pinia);
   const router = createRouter({
@@ -66,8 +107,15 @@ function createSuperAdminApp(options) {
     manifestEndpoint: options.endpoints.manifestEndpoint ?? `${options.endpoints.apiBase}/manifest`
   };
   const i18n = createSuperAdminI18n(options.i18n);
+  const configuredDark = options.quasarOptions?.config?.dark;
+  const theme = createSaTheme({
+    ...options.theme,
+    scheme: options.theme?.scheme ?? (typeof configuredDark === "boolean" ? configuredDark ? "dark" : "light" : void 0)
+  });
+  const stopThemeBridge = bindSaThemeToDocument(theme);
   app.provide(SUPER_ADMIN_BRAND_KEY, { tag: "SuperAdmin", ...options.brand });
   app.provide(SUPER_ADMIN_I18N_KEY, i18n);
+  app.provide(SA_THEME_KEY, theme);
   app.provide(SUPER_ADMIN_ENDPOINTS_KEY, endpoints);
   app.provide(SUPER_ADMIN_EXTENSIONS_KEY, options.extensions ?? {});
   app.provide(SUPER_ADMIN_ACTIONS_KEY, options.actions ?? {});
@@ -90,10 +138,17 @@ function createSuperAdminApp(options) {
     router,
     pinia,
     i18n,
-    mount: (selector) => app.mount(selector)
+    theme,
+    mount: (selector) => app.mount(selector),
+    dispose: () => {
+      stopThemeBridge();
+      theme.dispose();
+    }
   };
 }
 export {
+  SA_PORTAL_CLASS,
+  bindSaThemeToDocument,
   createSuperAdminApp,
   quasarNotify,
   useSuperAdminNotify

package/dist/{use-super-admin-i18n-CgTuNi8h.d.cts → use-sa-theme-B5t7oXph.d.cts} RENAMED Viewed

@@ -280,4 +280,54 @@ declare function useSuperAdminI18n(): SuperAdminI18n;
  */
 declare function useSaMessages<K extends keyof SaMessages>(namespace: K): ComputedRef<SaMessages[K]>;
-export { type ActionsMap as A, type ExtensionsMap as E, type InstallPlugin as I, type SuperAdminGuardOptions as S, type UiNotify as U, type SuperAdminBrand as a, type SuperAdminEndpoints as b, type SuperAdminLoginAdapter as c, type SuperAdminI18nOptions as d, type SuperAdminI18n as e, type ExtensionLoader as f, SA_LOCALE_STORAGE_KEY as g, SUPER_ADMIN_ACTIONS_KEY as h, SUPER_ADMIN_BRAND_KEY as i, SUPER_ADMIN_ENDPOINTS_KEY as j, SUPER_ADMIN_EXTENSIONS_KEY as k, SUPER_ADMIN_HTTP_KEY as l, SUPER_ADMIN_I18N_KEY as m, SUPER_ADMIN_LOGIN_ADAPTER_KEY as n, SUPER_ADMIN_MANIFEST_CLEAR_CACHE_KEY as o, SUPER_ADMIN_MANIFEST_KEY as p, SUPER_ADMIN_NOTIFY_KEY as q, type SuperAdminAuthGuardOptions as r, type SuperAdminLoginResult as s, type SuperAdminManifestGuardOptions as t, type UiNotifyKind as u, type UiNotifyOptions as v, buildNavigationGuard as w, createSuperAdminI18n as x, useSaMessages as y, useSuperAdminI18n as z };
+type SaColorScheme = 'light' | 'dark' | 'system';
+type SaResolvedScheme = 'light' | 'dark';
+interface SaTheme {
+    /** What the operator picked. Writable — assigning switches the theme. */
+    scheme: Ref<SaColorScheme>;
+    /** What that means right now: `'system'` resolved against the OS. */
+    resolved: ComputedRef<SaResolvedScheme>;
+    /**
+     * Releases the `prefers-color-scheme` subscription and the persistence
+     * watcher. Idempotent.
+     *
+     * Needed because this context outlives no component — nothing unmounts it.
+     * A second shell in the same document (hot reload, a micro-frontend, a
+     * second test file) would otherwise leave the first one subscribed, and the
+     * next change of the operating system's theme would drive TWO bridges, both
+     * writing `data-sa-theme` and Quasar's `Dark` onto the one document. The
+     * stale one can win, and then the new shell's explicit scheme is overruled
+     * by a context nobody holds a reference to any more.
+     */
+    dispose: () => void;
+}
+interface SaThemeOptions {
+    /** Starting scheme. Pass a `Ref` to keep the value in your own store. */
+    scheme?: SaColorScheme | Ref<SaColorScheme>;
+    /**
+     * Remember the operator's pick across reloads, default `true`. Ignored when
+     * `scheme` is a `Ref`: the app owns that value and persists it where it
+     * belongs. Same rule as the locale in `createSuperAdminI18n`.
+     */
+    persist?: boolean;
+    /** Injection seam for tests. */
+    storage?: KvStore;
+}
+/**
+ * Creates the theme context. `createSuperAdminApp()` makes one and the Quasar
+ * bridge mirrors it onto the document; call it directly only when bootstrapping
+ * by hand.
+ */
+declare function createSaTheme(options?: SaThemeOptions): SaTheme;
+declare const SA_THEME_KEY: InjectionKey<SaTheme>;
+/**
+ * The shell's theme context, or a shared unpersisted one outside a shell.
+ *
+ * Same shape as `useSuperAdminI18n()`, and for the same reason: a component
+ * mounted in isolation must render rather than throw, and the fallback must not
+ * write to real storage or two tests in one process would decide each other's
+ * outcome.
+ */
+declare function useSaTheme(): SaTheme;
+export { type ActionsMap as A, type UiNotifyOptions as B, buildNavigationGuard as C, createSaTheme as D, type ExtensionsMap as E, createSuperAdminI18n as F, useSaMessages as G, useSaTheme as H, type InstallPlugin as I, useSuperAdminI18n as J, type SuperAdminGuardOptions as S, type UiNotify as U, type SuperAdminBrand as a, type SuperAdminEndpoints as b, type SuperAdminLoginAdapter as c, type SuperAdminI18nOptions as d, type SaThemeOptions as e, type SuperAdminI18n as f, type SaTheme as g, type ExtensionLoader as h, SA_LOCALE_STORAGE_KEY as i, SA_THEME_KEY as j, SUPER_ADMIN_ACTIONS_KEY as k, SUPER_ADMIN_BRAND_KEY as l, SUPER_ADMIN_ENDPOINTS_KEY as m, SUPER_ADMIN_EXTENSIONS_KEY as n, SUPER_ADMIN_HTTP_KEY as o, SUPER_ADMIN_I18N_KEY as p, SUPER_ADMIN_LOGIN_ADAPTER_KEY as q, SUPER_ADMIN_MANIFEST_CLEAR_CACHE_KEY as r, SUPER_ADMIN_MANIFEST_KEY as s, SUPER_ADMIN_NOTIFY_KEY as t, type SaColorScheme as u, type SaResolvedScheme as v, type SuperAdminAuthGuardOptions as w, type SuperAdminLoginResult as x, type SuperAdminManifestGuardOptions as y, type UiNotifyKind as z };

package/dist/{use-super-admin-i18n-CHNdsSlm.d.ts → use-sa-theme-OUBlaqgl.d.ts} RENAMED Viewed

@@ -280,4 +280,54 @@ declare function useSuperAdminI18n(): SuperAdminI18n;
  */
 declare function useSaMessages<K extends keyof SaMessages>(namespace: K): ComputedRef<SaMessages[K]>;
-export { type ActionsMap as A, type ExtensionsMap as E, type InstallPlugin as I, type SuperAdminGuardOptions as S, type UiNotify as U, type SuperAdminBrand as a, type SuperAdminEndpoints as b, type SuperAdminLoginAdapter as c, type SuperAdminI18nOptions as d, type SuperAdminI18n as e, type ExtensionLoader as f, SA_LOCALE_STORAGE_KEY as g, SUPER_ADMIN_ACTIONS_KEY as h, SUPER_ADMIN_BRAND_KEY as i, SUPER_ADMIN_ENDPOINTS_KEY as j, SUPER_ADMIN_EXTENSIONS_KEY as k, SUPER_ADMIN_HTTP_KEY as l, SUPER_ADMIN_I18N_KEY as m, SUPER_ADMIN_LOGIN_ADAPTER_KEY as n, SUPER_ADMIN_MANIFEST_CLEAR_CACHE_KEY as o, SUPER_ADMIN_MANIFEST_KEY as p, SUPER_ADMIN_NOTIFY_KEY as q, type SuperAdminAuthGuardOptions as r, type SuperAdminLoginResult as s, type SuperAdminManifestGuardOptions as t, type UiNotifyKind as u, type UiNotifyOptions as v, buildNavigationGuard as w, createSuperAdminI18n as x, useSaMessages as y, useSuperAdminI18n as z };
+type SaColorScheme = 'light' | 'dark' | 'system';
+type SaResolvedScheme = 'light' | 'dark';
+interface SaTheme {
+    /** What the operator picked. Writable — assigning switches the theme. */
+    scheme: Ref<SaColorScheme>;
+    /** What that means right now: `'system'` resolved against the OS. */
+    resolved: ComputedRef<SaResolvedScheme>;
+    /**
+     * Releases the `prefers-color-scheme` subscription and the persistence
+     * watcher. Idempotent.
+     *
+     * Needed because this context outlives no component — nothing unmounts it.
+     * A second shell in the same document (hot reload, a micro-frontend, a
+     * second test file) would otherwise leave the first one subscribed, and the
+     * next change of the operating system's theme would drive TWO bridges, both
+     * writing `data-sa-theme` and Quasar's `Dark` onto the one document. The
+     * stale one can win, and then the new shell's explicit scheme is overruled
+     * by a context nobody holds a reference to any more.
+     */
+    dispose: () => void;
+}
+interface SaThemeOptions {
+    /** Starting scheme. Pass a `Ref` to keep the value in your own store. */
+    scheme?: SaColorScheme | Ref<SaColorScheme>;
+    /**
+     * Remember the operator's pick across reloads, default `true`. Ignored when
+     * `scheme` is a `Ref`: the app owns that value and persists it where it
+     * belongs. Same rule as the locale in `createSuperAdminI18n`.
+     */
+    persist?: boolean;
+    /** Injection seam for tests. */
+    storage?: KvStore;
+}
+/**
+ * Creates the theme context. `createSuperAdminApp()` makes one and the Quasar
+ * bridge mirrors it onto the document; call it directly only when bootstrapping
+ * by hand.
+ */
+declare function createSaTheme(options?: SaThemeOptions): SaTheme;
+declare const SA_THEME_KEY: InjectionKey<SaTheme>;
+/**
+ * The shell's theme context, or a shared unpersisted one outside a shell.
+ *
+ * Same shape as `useSuperAdminI18n()`, and for the same reason: a component
+ * mounted in isolation must render rather than throw, and the fallback must not
+ * write to real storage or two tests in one process would decide each other's
+ * outcome.
+ */
+declare function useSaTheme(): SaTheme;
+export { type ActionsMap as A, type UiNotifyOptions as B, buildNavigationGuard as C, createSaTheme as D, type ExtensionsMap as E, createSuperAdminI18n as F, useSaMessages as G, useSaTheme as H, type InstallPlugin as I, useSuperAdminI18n as J, type SuperAdminGuardOptions as S, type UiNotify as U, type SuperAdminBrand as a, type SuperAdminEndpoints as b, type SuperAdminLoginAdapter as c, type SuperAdminI18nOptions as d, type SaThemeOptions as e, type SuperAdminI18n as f, type SaTheme as g, type ExtensionLoader as h, SA_LOCALE_STORAGE_KEY as i, SA_THEME_KEY as j, SUPER_ADMIN_ACTIONS_KEY as k, SUPER_ADMIN_BRAND_KEY as l, SUPER_ADMIN_ENDPOINTS_KEY as m, SUPER_ADMIN_EXTENSIONS_KEY as n, SUPER_ADMIN_HTTP_KEY as o, SUPER_ADMIN_I18N_KEY as p, SUPER_ADMIN_LOGIN_ADAPTER_KEY as q, SUPER_ADMIN_MANIFEST_CLEAR_CACHE_KEY as r, SUPER_ADMIN_MANIFEST_KEY as s, SUPER_ADMIN_NOTIFY_KEY as t, type SaColorScheme as u, type SaResolvedScheme as v, type SuperAdminAuthGuardOptions as w, type SuperAdminLoginResult as x, type SuperAdminManifestGuardOptions as y, type UiNotifyKind as z };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@saasicat/ui-vue",
-  "version": "0.22.2",
+  "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",
@@ -41,6 +41,9 @@
     "./pages-standard/*": "./src/pages-standard/*",
     "./pages-tenant/*": "./src/pages-tenant/*",
     "./components/*": "./src/components/*",
+    "./theme.css": "./src/ui/theme/index.css",
+    "./theme/breakpoints": "./src/ui/theme/_breakpoints.scss",
+    "./theme/*": "./src/ui/theme/*",
     "./sa-theme.css": "./src/pages-standard/sa-theme.css",
     "./testing-e2e/*": {
       "import": {
@@ -58,7 +61,7 @@
     "src"
   ],
   "dependencies": {
-    "@saasicat/types": "^0.22.2"
+    "@saasicat/types": "^0.24.0"
   },
   "peerDependencies": {
     "pinia": "^2.0.0 || ^3.0.0",

package/src/client/identity-accents.ts ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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/BundleVersionPublishDialog.vue CHANGED Viewed

@@ -300,8 +300,8 @@ function formatValue(v: unknown): string {
     gap: 16px;
 }
 .bvpd__label {
-    font-size: 12px;
-    color: var(--q-grey-7, #757575);
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-muted);
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-bottom: 6px;
@@ -313,18 +313,18 @@ function formatValue(v: unknown): string {
     padding: 32px;
 }
 .bvpd__warnings {
-    border-left: 4px solid var(--q-warning, #f2c037);
+    border-left: 4px solid var(--sa-color-warning-strong);
 }
 .bvpd__neutral {
-    border-left: 4px solid var(--q-grey-7, #757575);
+    border-left: 4px solid var(--sa-color-border-strong);
 }
 .bvpd__regression {
-    border-left: 4px solid var(--q-negative, #c10015);
+    border-left: 4px solid var(--sa-color-negative);
 }
 .bvpd__validity {
     padding: 12px;
-    background: var(--sa-bg-surface-2);
-    border: 1px solid var(--sa-border);
+    background: var(--sa-color-bg-sunken);
+    border: 1px solid var(--sa-color-border);
     border-radius: 8px;
 }
 .bvpd__validity-grid {
@@ -335,36 +335,36 @@ function formatValue(v: unknown): string {
 .bvpd__field {
     display: grid;
     gap: 6px;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     font-weight: 700;
-    color: var(--sa-muted-dark);
+    color: var(--sa-color-fg-secondary);
 }
 .bvpd__input {
     min-height: 36px;
-    border: 1px solid #cbd5e1;
+    border: 1px solid var(--sa-color-border-strong);
     border-radius: 6px;
     padding: 0 10px;
     font: inherit;
-    color: var(--sa-heading);
-    background: #fff;
+    color: var(--sa-color-fg-heading);
+    background: var(--sa-color-bg-surface);
 }
 .bvpd__error {
     margin: 8px 0 0;
-    color: var(--q-negative, #c10015);
-    font-size: 12px;
+    color: var(--sa-color-negative);
+    font-size: var(--sa-text-sm);
     font-weight: 700;
 }
 .bvpd__list {
     margin: 8px 0 0;
     padding-left: 20px;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 .bvpd__old {
-    color: var(--q-negative, #c10015);
+    color: var(--sa-color-negative);
     text-decoration: line-through;
 }
 .bvpd__new {
-    color: var(--q-positive, #21ba45);
+    color: var(--sa-color-positive);
     font-weight: 600;
 }
 </style>