@bsuite/theme 0.3.1 → 0.3.2

package/README.md

@@ -8,6 +8,8 @@ Universal D2C Neon Electric theme for the BSuite monorepo. Ships the canonical p
 - **Tailwind v3 preset** — drop-in `presets: [require('@bsuite/theme/tailwind-preset')]`
 - **Tailwind v4 `@theme` block** — `@import '@bsuite/theme/preset-v4.css'`
 - **`<ThemeProvider>`** + **`useTheme()`** with localStorage persistence + system preference
+- **`<BrandingProvider>`** + **`useBranding()`** for runtime tenant branding
+- **`usePlatformLogo()`** and `resolvePlatformLogo()` for shared light/dark/mark/favicon logo fallback selection
 - **`getThemeInitScript()`** — stringified JS for inline `<script>` tags to prevent FOUC
 
 ## Install
@@ -118,6 +120,27 @@ export function ThemeToggleButton() {
 
 The `resolvedTheme` always returns `'light'` or `'dark'` — use this when you need the _effective_ theme (it resolves `'system'` for you).
 
+## Runtime branding and platform logos
+
+Wrap BSuite apps in `BrandingProvider` when tenant/platform branding should be resolved from Supabase. Braden Corporate can pass `brand="braden"` to keep using static corporate tokens.
+
+```tsx
+import { BrandingProvider, usePlatformLogo } from '@bsuite/theme/react'
+
+function HeaderLogo() {
+  const { src, alt, isLoading } = usePlatformLogo({
+    slot: 'header',
+    scheme: 'light',
+    fallback: '/logos/bsuite.svg',
+  })
+
+  if (isLoading || !src) return null
+  return <img src={src} alt={alt} />
+}
+```
+
+Use `resolvePlatformLogo()` in non-React code or tests when you already have a branding payload and need the same fallback order without mounting a provider.
+
 ## Palette
 
 All 11 canonical electric colours are available via Tailwind classes:

package/dist/react/BrandingProvider.d.ts

@@ -1,37 +1,3 @@
-/**
- * BrandingProvider — runtime enterprise white-labelling
- * Version 0.3.0
- *
- * On mount:
- *  1. Calls supabase.rpc('branding_json_for_tenant') using the user's authed session.
- *  2. Validates each colour value is a well-formed oklch() string.
- *  3. Applies each key as a CSS custom property on document.documentElement.
- *  4. Caches the result in localStorage under BRANDING_STORAGE_KEY for FOUC prevention.
- *  5. Subscribes to tenant row changes via Supabase Realtime so branding updates
- *     propagate without a page reload (within ~1 second).
- *
- * Security / brand policies:
- *  - Only oklch() values are accepted for colour fields — hex/rgb/hsl are rejected.
- *  - --role-error and --role-destructive are NOT overridable by tenants.
- *    Colourblind policy (purple error) is a system-level requirement, not a brand pref.
- *  - brand="braden" short-circuits all Supabase calls — Braden corporate site uses
- *    static CSS tokens, not runtime tenant overrides.
- *
- * Environment flags:
- *  - VITE_ENABLE_BRANDING_OVERRIDE (default: 'true') — set 'false' as kill switch.
- *
- * Usage:
- *    <ThemeProvider>
- *      <BrandingProvider supabaseClient={supabase}>
- *        {children}
- *      </BrandingProvider>
- *    </ThemeProvider>
- *
- *   For Braden corporate (skips all RPC/Realtime):
- *    <BrandingProvider brand="braden" supabaseClient={supabase}>
- *      {children}
- *    </BrandingProvider>
- */
 import type { ReactNode } from 'react';
 import type { SupabaseClient } from '@supabase/supabase-js';
 export declare const BRANDING_STORAGE_KEY = "bsuite_tenant_branding";
@@ -44,8 +10,16 @@ export interface TenantBranding {
     accent?: string;
     /** Full logo URL (SVG or raster) */
     logo_url?: string;
+    /** Light-mode full logo URL (SVG or raster) */
+    logo_light_url?: string;
+    /** Dark-mode full logo URL (SVG or raster) */
+    logo_dark_url?: string;
     /** Mark / icon logo URL */
     mark_url?: string;
+    /** Favicon URL */
+    favicon_url?: string;
+    /** Display name used for default image alt text */
+    company_name?: string | null;
     /** Optional CSS font-family stack string */
     font_stack?: string | null;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"BrandingProvider.d.ts","sourceRoot":"","sources":["../../src/react/BrandingProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;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,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4DAA4D;IAC5D,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,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAA;IAC/B,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAC7B;AAED,eAAO,MAAM,eAAe,2DAA6D,CAAA;AAsJzF,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAE9C,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAA;IACnB,2DAA2D;IAC3D,cAAc,EAAE,cAAc,CAAA;IAC9B;;;;OAIG;IACH,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,KAAgB,EAChB,qBAA4B,GAC7B,EAAE,qBAAqB,2CA+FvB"}
+{"version":3,"file":"BrandingProvider.d.ts","sourceRoot":"","sources":["../../src/react/BrandingProvider.tsx"],"names":[],"mappings":"AAmCA,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,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC3B;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAA;IAC/B,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAC7B;AAED,eAAO,MAAM,eAAe,2DAA6D,CAAA;AAEzF,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAE9C,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAA;IACnB,2DAA2D;IAC3D,cAAc,EAAE,cAAc,CAAA;IAC9B;;;;OAIG;IACH,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AA6JD,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,KAAgB,EAChB,qBAA4B,GAC7B,EAAE,qBAAqB,2CA+EvB"}

package/dist/react/BrandingProvider.js

@@ -33,7 +33,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *      {children}
  *    </BrandingProvider>
  */
-import { createContext, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+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);
@@ -68,9 +68,17 @@ const BRANDING_CSS_MAP = {
     primary: '--primary',
     accent: '--accent',
     logo_url: '--logo-url',
+    logo_light_url: '--logo-light-url',
+    logo_dark_url: '--logo-dark-url',
     mark_url: '--mark-url',
+    favicon_url: '--favicon-url',
     font_stack: '--font-stack',
 };
+function setUrlCssVar(root, cssVar, value) {
+    const trimmed = value?.trim();
+    if (trimmed)
+        root.style.setProperty(cssVar, `url(${trimmed})`);
+}
 function applyBrandingToRoot(branding) {
     if (typeof document === 'undefined')
         return;
@@ -113,12 +121,11 @@ function applyBrandingToRoot(branding) {
             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})`);
-    }
+    setUrlCssVar(root, '--logo-url', branding.logo_url);
+    setUrlCssVar(root, '--logo-light-url', branding.logo_light_url);
+    setUrlCssVar(root, '--logo-dark-url', branding.logo_dark_url);
+    setUrlCssVar(root, '--mark-url', branding.mark_url);
+    setUrlCssVar(root, '--favicon-url', branding.favicon_url);
     if (branding.font_stack) {
         root.style.setProperty('--font-stack', branding.font_stack);
     }
@@ -233,6 +240,7 @@ export function BrandingProvider({ children, supabaseClient, brand = 'bsuite', a
             return;
         const channel = supabaseClient
             .channel('tenant-branding-updates')
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             .on('postgres_changes', { event: 'UPDATE', schema: 'public', table: 'tenants' }, (_payload) => { void fetchBranding(); })
             .subscribe();
         channelRef.current = channel;

package/dist/react/index.d.ts

@@ -3,6 +3,9 @@ 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 { BrandingProvider, BrandingContext, BRANDING_STORAGE_KEY, BRANDING_OVERRIDE_FLAG, } from './BrandingProvider';
 export type { TenantBranding, BrandingContextValue } from './BrandingProvider';
+export { useBranding } from './useBranding';
+export { resolvePlatformLogo, usePlatformLogo, } from './usePlatformLogo';
+export type { PlatformLogoHookResult, PlatformLogoOptions, PlatformLogoScheme, PlatformLogoSlot, PlatformLogoSource, ResolvedPlatformLogo, } from './usePlatformLogo';
 //# 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;AAC5C,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACpH,YAAY,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,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,EACL,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,oBAAoB,CAAA;AAC3B,YAAY,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EACL,mBAAmB,EACnB,eAAe,GAChB,MAAM,mBAAmB,CAAA;AAC1B,YAAY,EACV,sBAAsB,EACtB,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,GACrB,MAAM,mBAAmB,CAAA"}

package/dist/react/index.js

@@ -1,4 +1,6 @@
 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';
+export { BrandingProvider, BrandingContext, BRANDING_STORAGE_KEY, BRANDING_OVERRIDE_FLAG, } from './BrandingProvider';
+export { useBranding } from './useBranding';
+export { resolvePlatformLogo, usePlatformLogo, } from './usePlatformLogo';

package/dist/react/usePlatformLogo.d.ts

@@ -0,0 +1,29 @@
+import type { TenantBranding } from './BrandingProvider';
+export type PlatformLogoSlot = 'header' | 'sidebar' | 'auth' | 'favicon' | 'mark';
+export type PlatformLogoScheme = 'light' | 'dark';
+export type PlatformLogoSource = 'branding' | 'fallback' | 'none';
+export interface PlatformLogoOptions {
+    slot?: PlatformLogoSlot;
+    scheme?: PlatformLogoScheme;
+    fallback?: string | null;
+    fallbackBySlot?: Partial<Record<PlatformLogoSlot, string | null>>;
+    alt?: string;
+}
+export interface ResolvedPlatformLogo {
+    src: string | null;
+    alt: string;
+    slot: PlatformLogoSlot;
+    scheme: PlatformLogoScheme;
+    source: PlatformLogoSource;
+    isTenantLogo: boolean;
+    cssVariable: string;
+}
+export interface PlatformLogoHookResult extends ResolvedPlatformLogo {
+    branding: TenantBranding | null;
+    isLoading: boolean;
+    error: Error | null;
+    refresh: () => Promise<void>;
+}
+export declare function resolvePlatformLogo(branding: TenantBranding | null | undefined, options?: PlatformLogoOptions): ResolvedPlatformLogo;
+export declare function usePlatformLogo(options?: PlatformLogoOptions): PlatformLogoHookResult;
+//# sourceMappingURL=usePlatformLogo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePlatformLogo.d.ts","sourceRoot":"","sources":["../../src/react/usePlatformLogo.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAGxD,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAA;AACjF,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,MAAM,CAAA;AACjD,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAA;AAEjE,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC,CAAA;IACjE,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,oBAAoB;IACnC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;IAClB,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,gBAAgB,CAAA;IACtB,MAAM,EAAE,kBAAkB,CAAA;IAC1B,MAAM,EAAE,kBAAkB,CAAA;IAC1B,YAAY,EAAE,OAAO,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,sBAAuB,SAAQ,oBAAoB;IAClE,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAA;IAC/B,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAC7B;AA+CD,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,EAC3C,OAAO,GAAE,mBAAwB,GAChC,oBAAoB,CAiBtB;AAED,wBAAgB,eAAe,CAAC,OAAO,GAAE,mBAAwB,GAAG,sBAAsB,CAczF"}

package/dist/react/usePlatformLogo.js

@@ -0,0 +1,65 @@
+import { useMemo } from 'react';
+import { useBranding } from './useBranding';
+function cleanUrl(value) {
+    const trimmed = value?.trim();
+    return trimmed ? trimmed : null;
+}
+function getSlotFallback(options, slot) {
+    if (options.fallbackBySlot && Object.prototype.hasOwnProperty.call(options.fallbackBySlot, slot)) {
+        return cleanUrl(options.fallbackBySlot[slot] ?? null);
+    }
+    return cleanUrl(options.fallback ?? null);
+}
+function getCssVariable(slot, scheme) {
+    if (slot === 'favicon')
+        return '--favicon-url';
+    if (slot === 'mark')
+        return '--mark-url';
+    return scheme === 'dark' ? '--logo-dark-url' : '--logo-light-url';
+}
+function getCompanyName(branding) {
+    const name = branding?.company_name?.trim();
+    return name ? name : null;
+}
+function getLogoCandidates(branding, slot, scheme) {
+    if (!branding)
+        return [];
+    if (slot === 'favicon') {
+        return [branding.favicon_url, branding.mark_url, branding.logo_url, branding.logo_light_url, branding.logo_dark_url];
+    }
+    if (slot === 'mark') {
+        return [branding.mark_url, branding.logo_url, branding.logo_light_url, branding.logo_dark_url];
+    }
+    if (scheme === 'dark') {
+        return [branding.logo_dark_url, branding.logo_light_url, branding.logo_url, branding.mark_url];
+    }
+    return [branding.logo_light_url, branding.logo_url, branding.logo_dark_url, branding.mark_url];
+}
+export function resolvePlatformLogo(branding, options = {}) {
+    const slot = options.slot ?? 'header';
+    const scheme = options.scheme ?? 'light';
+    const brandingLogo = getLogoCandidates(branding, slot, scheme).map(cleanUrl).find(Boolean) ?? null;
+    const fallbackLogo = brandingLogo ? null : getSlotFallback(options, slot);
+    const source = brandingLogo ? 'branding' : fallbackLogo ? 'fallback' : 'none';
+    const companyName = getCompanyName(branding);
+    return {
+        src: brandingLogo ?? fallbackLogo,
+        alt: options.alt ?? (slot === 'favicon' ? '' : companyName ? `${companyName} logo` : 'Platform logo'),
+        slot,
+        scheme,
+        source,
+        isTenantLogo: source === 'branding',
+        cssVariable: getCssVariable(slot, scheme),
+    };
+}
+export function usePlatformLogo(options = {}) {
+    const { branding, isLoading, error, refresh } = useBranding();
+    const resolved = useMemo(() => resolvePlatformLogo(branding, options), [branding, options.alt, options.fallback, options.fallbackBySlot, options.scheme, options.slot]);
+    return {
+        ...resolved,
+        branding,
+        isLoading,
+        error,
+        refresh,
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsuite/theme",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "type": "module",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -11,7 +11,7 @@
     "url": "https://github.com/GaryOcean428/bsuite.git",
     "directory": "packages/theme"
   },
-  "description": "BSuite Universal theme \u2014 D2C Neon Electric + Braden Corporate baselines. Tailwind v4 preset, CSS vars (5-layer), role aliases, colourblind-safe tokens, eye-strain-safe text scale, BrandingProvider (runtime white-label). Used by BSU, CRM7, conduit, R80.3, throughput (D2C) and braden.com.au (Corporate).",
+  "description": "BSuite Universal theme — D2C Neon Electric + Braden Corporate baselines. Tailwind v4 preset, CSS vars (5-layer), role aliases, colourblind-safe tokens, eye-strain-safe text scale, BrandingProvider (runtime white-label). Used by BSU, CRM7, conduit, R80.3, throughput (D2C) and braden.com.au (Corporate).",
   "files": [
     "dist",
     "src/css",
@@ -43,7 +43,8 @@
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
     "typecheck": "tsc --noEmit",
-    "test": "vitest run"
+    "test": "vitest run",
+    "prepublishOnly": "pnpm build"
   },
   "peerDependencies": {
     "@supabase/supabase-js": ">=2.0.0",