@bsuite/theme 0.1.2 → 0.2.0

package/dist/react/BrandingProvider.d.ts

@@ -0,0 +1,63 @@
+/**
+ * BrandingProvider — runtime enterprise white-labelling
+ *
+ * On mount:
+ *  1. Calls supabase.rpc('branding_json_for_tenant') using the user's authed session.
+ *  2. Applies each key as a CSS custom property on document.documentElement.
+ *  3. Caches the result in localStorage under BRANDING_STORAGE_KEY for FOUC prevention.
+ *  4. Subscribes to tenant row changes via Supabase Realtime so branding updates
+ *     propagate without a page reload (within ~1 second).
+ *
+ * Environment flags:
+ *  - VITE_ENABLE_BRANDING_OVERRIDE (default: 'true') — set to 'false' to disable
+ *    entirely without code changes (emergency kill switch).
+ *
+ * Usage:
+ *  Wrap BrandingProvider inside ThemeProvider so branding CSS vars override theme defaults:
+ *
+ *    <ThemeProvider>
+ *      <BrandingProvider supabaseClient={supabase}>
+ *        {children}
+ *      </BrandingProvider>
+ *    </ThemeProvider>
+ */
+import type { ReactNode } from 'react';
+import type { SupabaseClient } from '@supabase/supabase-js';
+export declare const BRANDING_STORAGE_KEY = "bsuite_tenant_branding";
+export declare const BRANDING_OVERRIDE_FLAG = "VITE_ENABLE_BRANDING_OVERRIDE";
+/** Shape returned by the branding_json_for_tenant RPC */
+export interface TenantBranding {
+    /** Primary action colour as an OKLCH string, e.g. "oklch(0.55 0.22 265)" */
+    primary?: string;
+    /** Accent / secondary colour as an OKLCH string */
+    accent?: string;
+    /** Full logo URL (SVG or raster) */
+    logo_url?: string;
+    /** Mark / icon logo URL */
+    mark_url?: string;
+    /** Optional CSS font-family stack string */
+    font_stack?: string | null;
+}
+export interface BrandingContextValue {
+    /** Current resolved branding, or null if no tenant override */
+    branding: TenantBranding | null;
+    /** True while the initial RPC call is in flight */
+    isLoading: boolean;
+    /** Any error from the RPC call */
+    error: Error | null;
+    /** Manually trigger a branding refresh */
+    refresh: () => Promise<void>;
+}
+export declare const BrandingContext: import("react").Context<BrandingContextValue | undefined>;
+export interface BrandingProviderProps {
+    children: ReactNode;
+    /** Authenticated Supabase client from the consuming app */
+    supabaseClient: SupabaseClient;
+    /**
+     * If true, apply persisted branding immediately on mount (before the RPC
+     * resolves) to prevent FOUC. Default: true.
+     */
+    applyPersistedOnMount?: boolean;
+}
+export declare function BrandingProvider({ children, supabaseClient, applyPersistedOnMount, }: BrandingProviderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BrandingProvider.d.ts.map

package/dist/react/BrandingProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrandingProvider.d.ts","sourceRoot":"","sources":["../../src/react/BrandingProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAUH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAE3D,eAAO,MAAM,oBAAoB,2BAA2B,CAAA;AAC5D,eAAO,MAAM,sBAAsB,kCAAkC,CAAA;AAErE,yDAAyD;AACzD,MAAM,WAAW,cAAc;IAC7B,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC3B;AAED,MAAM,WAAW,oBAAoB;IACnC,+DAA+D;IAC/D,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAA;IAC/B,mDAAmD;IACnD,SAAS,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,0CAA0C;IAC1C,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAC7B;AAED,eAAO,MAAM,eAAe,2DAA6D,CAAA;AAqFzF,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAA;IACnB,2DAA2D;IAC3D,cAAc,EAAE,cAAc,CAAA;IAC9B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,qBAA4B,GAC7B,EAAE,qBAAqB,2CAyFvB"}

package/dist/react/BrandingProvider.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * BrandingProvider — runtime enterprise white-labelling
+ *
+ * On mount:
+ *  1. Calls supabase.rpc('branding_json_for_tenant') using the user's authed session.
+ *  2. Applies each key as a CSS custom property on document.documentElement.
+ *  3. Caches the result in localStorage under BRANDING_STORAGE_KEY for FOUC prevention.
+ *  4. Subscribes to tenant row changes via Supabase Realtime so branding updates
+ *     propagate without a page reload (within ~1 second).
+ *
+ * Environment flags:
+ *  - VITE_ENABLE_BRANDING_OVERRIDE (default: 'true') — set to 'false' to disable
+ *    entirely without code changes (emergency kill switch).
+ *
+ * Usage:
+ *  Wrap BrandingProvider inside ThemeProvider so branding CSS vars override theme defaults:
+ *
+ *    <ThemeProvider>
+ *      <BrandingProvider supabaseClient={supabase}>
+ *        {children}
+ *      </BrandingProvider>
+ *    </ThemeProvider>
+ */
+import { createContext, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+export const BRANDING_STORAGE_KEY = 'bsuite_tenant_branding';
+export const BRANDING_OVERRIDE_FLAG = 'VITE_ENABLE_BRANDING_OVERRIDE';
+export const BrandingContext = createContext(undefined);
+const BRANDING_CSS_MAP = {
+    primary: '--primary',
+    accent: '--accent',
+    logo_url: '--logo-url',
+    mark_url: '--mark-url',
+    font_stack: '--font-stack',
+};
+function applyBrandingToRoot(branding) {
+    if (typeof document === 'undefined')
+        return;
+    const root = document.documentElement;
+    if (!branding) {
+        // Remove any previously applied overrides
+        Object.values(BRANDING_CSS_MAP).forEach((cssVar) => {
+            if (cssVar)
+                root.style.removeProperty(cssVar);
+        });
+        // Also remove aliased vars
+        root.style.removeProperty('--accent-primary');
+        root.style.removeProperty('--app-primary');
+        root.style.removeProperty('--app-accent');
+        root.removeAttribute('data-branding-loaded');
+        return;
+    }
+    if (branding.primary) {
+        root.style.setProperty('--primary', branding.primary);
+        root.style.setProperty('--accent-primary', branding.primary);
+        root.style.setProperty('--app-primary', branding.primary);
+        root.style.setProperty('--ring', branding.primary);
+    }
+    if (branding.accent) {
+        root.style.setProperty('--accent', branding.accent);
+        root.style.setProperty('--accent-secondary', branding.accent);
+        root.style.setProperty('--app-accent', branding.accent);
+    }
+    if (branding.logo_url) {
+        root.style.setProperty('--logo-url', `url(${branding.logo_url})`);
+    }
+    if (branding.mark_url) {
+        root.style.setProperty('--mark-url', `url(${branding.mark_url})`);
+    }
+    if (branding.font_stack) {
+        root.style.setProperty('--font-stack', branding.font_stack);
+    }
+    root.setAttribute('data-branding-loaded', 'true');
+}
+function persistBranding(branding) {
+    try {
+        if (branding) {
+            localStorage.setItem(BRANDING_STORAGE_KEY, JSON.stringify(branding));
+        }
+        else {
+            localStorage.removeItem(BRANDING_STORAGE_KEY);
+        }
+    }
+    catch {
+        // localStorage not available — silently ignore
+    }
+}
+function loadPersistedBranding() {
+    try {
+        const raw = localStorage.getItem(BRANDING_STORAGE_KEY);
+        if (!raw)
+            return null;
+        return JSON.parse(raw);
+    }
+    catch {
+        return null;
+    }
+}
+function isBrandingEnabled() {
+    try {
+        // Vite env var — only present in client bundles that set it
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const flag = import.meta.env;
+        const value = flag?.VITE_ENABLE_BRANDING_OVERRIDE ?? flag?.['VITE_ENABLE_BRANDING_OVERRIDE'];
+        if (value === 'false' || value === '0')
+            return false;
+    }
+    catch {
+        // Not in a Vite context — default to enabled
+    }
+    return true;
+}
+export function BrandingProvider({ children, supabaseClient, applyPersistedOnMount = true, }) {
+    const [branding, setBranding] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const channelRef = useRef(null);
+    const fetchBranding = useCallback(async () => {
+        if (!isBrandingEnabled()) {
+            setIsLoading(false);
+            return;
+        }
+        setIsLoading(true);
+        setError(null);
+        try {
+            const { data, error: rpcError } = await supabaseClient.rpc('branding_json_for_tenant');
+            if (rpcError) {
+                throw new Error(rpcError.message);
+            }
+            const resolved = data ?? null;
+            setBranding(resolved);
+            applyBrandingToRoot(resolved);
+            persistBranding(resolved);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error(String(err)));
+            // On error keep any persisted branding applied (already done at mount)
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [supabaseClient]);
+    // Apply persisted branding immediately to prevent FOUC
+    useEffect(() => {
+        if (applyPersistedOnMount && isBrandingEnabled()) {
+            const persisted = loadPersistedBranding();
+            if (persisted) {
+                applyBrandingToRoot(persisted);
+                setBranding(persisted);
+            }
+        }
+    }, [applyPersistedOnMount]);
+    // Fetch fresh branding on mount
+    useEffect(() => {
+        void fetchBranding();
+    }, [fetchBranding]);
+    // Subscribe to Realtime tenant row changes so branding propagates without reload
+    useEffect(() => {
+        if (!isBrandingEnabled())
+            return;
+        const channel = supabaseClient
+            .channel('tenant-branding-updates')
+            .on('postgres_changes', {
+            event: 'UPDATE',
+            schema: 'public',
+            table: 'tenants',
+            // filter is applied server-side via RLS — only own tenant rows are received
+        }, (_payload) => {
+            // Re-fetch to get the full branding_json_for_tenant RPC result
+            void fetchBranding();
+        })
+            .subscribe();
+        channelRef.current = channel;
+        return () => {
+            if (channelRef.current) {
+                void supabaseClient.removeChannel(channelRef.current);
+                channelRef.current = null;
+            }
+        };
+    }, [supabaseClient, fetchBranding]);
+    const value = useMemo(() => ({ branding, isLoading, error, refresh: fetchBranding }), [branding, isLoading, error, fetchBranding]);
+    return _jsx(BrandingContext.Provider, { value: value, children: children });
+}

package/dist/react/index.d.ts

@@ -3,4 +3,6 @@ export type { ThemeProviderProps } from './ThemeProvider';
 export { useTheme } from './useTheme';
 export type { ThemeContextValue, ThemeMode, ResolvedTheme } from '../index';
 export { THEME_STORAGE_KEY } from '../index';
+export { BrandingProvider, BrandingContext, BRANDING_STORAGE_KEY, BRANDING_OVERRIDE_FLAG } from './BrandingProvider';
+export type { TenantBranding, BrandingContextValue } from './BrandingProvider';
 //# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,iBAAiB,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,iBAAiB,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACpH,YAAY,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/react/index.js

@@ -1,3 +1,4 @@
 export { ThemeProvider } from './ThemeProvider';
 export { useTheme } from './useTheme';
 export { THEME_STORAGE_KEY } from '../index';
+export { BrandingProvider, BrandingContext, BRANDING_STORAGE_KEY, BRANDING_OVERRIDE_FLAG } from './BrandingProvider';

package/dist/react/useBranding.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Access the current tenant branding values and loading state.
+ *
+ * Must be used inside a <BrandingProvider>.
+ *
+ * @example
+ *   const { branding, isLoading } = useBranding()
+ *   const logoUrl = branding?.logo_url ?? '/logos/default-logo.svg'
+ */
+export declare function useBranding(): import("./BrandingProvider").BrandingContextValue;
+//# sourceMappingURL=useBranding.d.ts.map

package/dist/react/useBranding.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBranding.d.ts","sourceRoot":"","sources":["../../src/react/useBranding.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH,wBAAgB,WAAW,sDAM1B"}

package/dist/react/useBranding.js

@@ -0,0 +1,18 @@
+import { useContext } from 'react';
+import { BrandingContext } from './BrandingProvider';
+/**
+ * Access the current tenant branding values and loading state.
+ *
+ * Must be used inside a <BrandingProvider>.
+ *
+ * @example
+ *   const { branding, isLoading } = useBranding()
+ *   const logoUrl = branding?.logo_url ?? '/logos/default-logo.svg'
+ */
+export function useBranding() {
+    const ctx = useContext(BrandingContext);
+    if (!ctx) {
+        throw new Error('useBranding must be used within a <BrandingProvider>');
+    }
+    return ctx;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsuite/theme",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "type": "module",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -46,18 +46,24 @@
     "prepublishOnly": "pnpm build"
   },
   "peerDependencies": {
+    "@supabase/supabase-js": ">=2.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "tailwindcss": ">=3.4.0"
   },
   "peerDependenciesMeta": {
+    "@supabase/supabase-js": {
+      "optional": true
+    },
     "tailwindcss": {
       "optional": true
     }
   },
   "devDependencies": {
+    "@supabase/supabase-js": "^2.49.4",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@types/node": "^20.0.0",
     "@types/react": "^18.3.28",
     "@vitejs/plugin-react": "^5.2.0",
     "jsdom": "^28.1.0",