@bsuite/theme 0.4.1 → 0.5.0

package/dist/react/BrandingProvider.d.ts

@@ -47,5 +47,5 @@ export interface BrandingProviderProps {
      */
     applyPersistedOnMount?: boolean;
 }
-export declare function BrandingProvider({ children, supabaseClient, brand, applyPersistedOnMount, }: BrandingProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function BrandingProvider({ children, supabaseClient, brand, applyPersistedOnMount, }: BrandingProviderProps): import("react").JSX.Element;
 //# sourceMappingURL=BrandingProvider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BrandingProvider.d.ts","sourceRoot":"","sources":["../../src/react/BrandingProvider.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAO3D,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,+BAA+B;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,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;AA+KD,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,KAAgB,EAChB,qBAA4B,GAC7B,EAAE,qBAAqB,2CA+EvB"}
+{"version":3,"file":"BrandingProvider.d.ts","sourceRoot":"","sources":["../../src/react/BrandingProvider.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAO3D,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,+BAA+B;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,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;AA+KD,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,KAAgB,EAChB,qBAA4B,GAC7B,EAAE,qBAAqB,+BA4GvB"}

package/dist/react/BrandingProvider.js

@@ -214,6 +214,9 @@ export function BrandingProvider({ children, supabaseClient, brand = 'bsuite', a
     const [isLoading, setIsLoading] = useState(brand !== 'braden');
     const [error, setError] = useState(null);
     const channelRef = useRef(null);
+    // True when the last fetch was skipped (or failed) for lack of a session —
+    // the SIGNED_IN listener uses this to refetch exactly once when auth lands.
+    const needsAuthedRefetchRef = useRef(false);
     // ── Braden short-circuit ──────────────────────────────────────────────────
     // Braden corporate uses static CSS from @bsuite/theme/braden-css — no runtime
     // tenant overrides needed. Skip all Supabase calls entirely.
@@ -230,6 +233,18 @@ export function BrandingProvider({ children, supabaseClient, brand = 'bsuite', a
         setIsLoading(true);
         setError(null);
         try {
+            // branding_json_for_tenant is granted to `authenticated` only — calling
+            // it in anon context is a guaranteed PostgREST 401 (42501). Consumers
+            // can mount this provider before session hydration completes (or on
+            // genuinely public pages); skip the RPC and let defaults stand. The
+            // SIGNED_IN listener below refetches once auth arrives.
+            const { data: sessionData } = await supabaseClient.auth.getSession();
+            if (!sessionData.session) {
+                needsAuthedRefetchRef.current = true;
+                setIsLoading(false);
+                return;
+            }
+            needsAuthedRefetchRef.current = false;
             const { data, error: rpcError } = await supabaseClient.rpc('branding_json_for_tenant');
             if (rpcError)
                 throw new Error(rpcError.message);
@@ -261,6 +276,19 @@ export function BrandingProvider({ children, supabaseClient, brand = 'bsuite', a
     useEffect(() => {
         void fetchBranding();
     }, [fetchBranding]);
+    // Refetch once when a session arrives after an anon-skipped mount (session
+    // hydration race). Deferred via setTimeout: onAuthStateChange callbacks run
+    // while supabase-js holds the auth lock, and fetchBranding calls
+    // getSession() — invoking it inline would self-deadlock (see the suite-wide
+    // "never await supabase calls inside onAuthStateChange" rule).
+    useEffect(() => {
+        const { data: { subscription } } = supabaseClient.auth.onAuthStateChange((event) => {
+            if (event === 'SIGNED_IN' && needsAuthedRefetchRef.current) {
+                setTimeout(() => { void fetchBranding(); }, 0);
+            }
+        });
+        return () => { subscription.unsubscribe(); };
+    }, [supabaseClient, fetchBranding]);
     // Subscribe to Realtime tenant row changes
     useEffect(() => {
         if (!isBrandingEnabled())

package/dist/react/ThemeProvider.d.ts

@@ -11,5 +11,5 @@ export interface ThemeProviderProps {
      */
     storageKey?: string;
 }
-export declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): import("react").JSX.Element;
 //# sourceMappingURL=ThemeProvider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/react/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAyC,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,UAAU,CAAA;AAExG,eAAO,MAAM,YAAY,wDAA0D,CAAA;AAEnF,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAA;IACnB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AA6BD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAuB,EACvB,UAA8B,GAC/B,EAAE,kBAAkB,2CA4DpB"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/react/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAyC,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,UAAU,CAAA;AAExG,eAAO,MAAM,YAAY,wDAA0D,CAAA;AAEnF,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAA;IACnB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AA6BD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAuB,EACvB,UAA8B,GAC/B,EAAE,kBAAkB,+BA4DpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsuite/theme",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "type": "module",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -61,18 +61,18 @@
     }
   },
   "devDependencies": {
-    "@supabase/supabase-js": "^2.105.3",
+    "@supabase/supabase-js": "^2.108.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/node": "^24.12.2",
-    "@types/react": "^19.2.14",
+    "@types/node": "^25.9.2",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
+    "@vitejs/plugin-react": "^6.0.2",
     "jsdom": "^29.1.1",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "typescript": "~5.9.3",
-    "vite": "^8.0.10",
-    "vitest": "^4.1.5"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "typescript": "~6.0.3",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8"
   }
 }

package/src/css/braden.css

@@ -164,6 +164,11 @@
   --shadow-sm:  0 1px 2px oklch(0 0 0 / 0.08);
   --shadow-md:  0 4px 6px oklch(0 0 0 / 0.10), 0 2px 4px oklch(0 0 0 / 0.06);
   --shadow-lg:  0 10px 15px oklch(0 0 0 / 0.10), 0 4px 6px oklch(0 0 0 / 0.05);
+
+  /* Card glow is a dark-mode-only device (see .dark below); light mode
+     stays border-only, consistent with the corporate "no neon glow" rule. */
+  --glow-card:       none;
+  --glow-card-hover: none;
 }
 
 /* ============================================================
@@ -206,4 +211,20 @@
   --muted-foreground:var(--braden-dark-text-muted);
   --border:          oklch(0.30 0.020 250);
   --input:           oklch(0.30 0.020 250);
+
+  /*
+   * Card glow — Braden dark mode gets a restrained gold separation glow,
+   * NOT the D2C neon treatment (no cyan, lower alpha, same two-layer
+   * ring+halo shape for consumer-code parity with @bsuite/theme's D2C
+   * --glow-card). Source is --app-accent (Braden Gold), which is
+   * inherited from :root since this file does not rebind it per-mode.
+   * Deliberately more subdued than D2C to honour the "corporate
+   * subtle, no neon glow" shadow philosophy above, adapted for dark UI
+   * where SOME separation glow is still needed for surface legibility.
+   */
+  --card-glow-source: var(--app-accent, var(--braden-gold-500));
+  --glow-card:       0 0 0 1px color-mix(in oklch, var(--card-glow-source) 18%, transparent),
+                      0 0 10px -4px color-mix(in oklch, var(--card-glow-source) 20%, transparent);
+  --glow-card-hover: 0 0 0 1px color-mix(in oklch, var(--card-glow-source) 26%, transparent),
+                      0 0 14px -4px color-mix(in oklch, var(--card-glow-source) 28%, transparent);
 }

package/src/css/tokens-dark.css

@@ -77,8 +77,23 @@
   /* ===== Neon glow helpers ===== */
   --glow-button:       0 0 20px oklch(0.769 0.132 191.7 / 0.3);
   --glow-button-hover: 0 0 30px oklch(0.769 0.132 191.7 / 0.5);
-  --glow-card:         0 0 15px oklch(0.769 0.132 191.7 / 0.08);
-  --glow-card-hover:   0 0 25px oklch(0.769 0.132 191.7 / 0.15);
+
+  /*
+   * Card glow — subtle neon separation for card surfaces, dark mode only.
+   * Derived from the app's accent colour (--app-accent, falling back to
+   * the shared --role-accent default, matching the live vars.css) so
+   * per-tenant
+   * BrandingProvider overrides and per-app brand accents (Conduit green,
+   * R80.3 amber, etc.) automatically re-colour the glow. Two layers:
+   * a 1px accent ring (edge definition, replaces a hard border) plus a
+   * soft negative-spread halo (ambient separation). Kept subtle by
+   * design — this is surface separation, not a decorative outline.
+   */
+  --card-glow-source: var(--app-accent, var(--role-accent));
+  --glow-card:       0 0 0 1px color-mix(in oklch, var(--card-glow-source) 30%, transparent),
+                      0 0 14px -4px color-mix(in oklch, var(--card-glow-source) 35%, transparent);
+  --glow-card-hover: 0 0 0 1px color-mix(in oklch, var(--card-glow-source) 42%, transparent),
+                      0 0 20px -4px color-mix(in oklch, var(--card-glow-source) 48%, transparent);
 
   /* ===== Button shadow ===== */
   --button-shadow:       0 0 20px oklch(0.769 0.132 191.7 / 0.3);

package/src/css/vars.css

@@ -160,6 +160,16 @@
   --glow-strength:   0.4;
   --shadow-strength: 1;
 
+  /* ============================================================
+     CARD SURFACE GLOW — subtle neon separation, dark mode only.
+     Light mode keeps the existing border-only treatment (--role-border);
+     these resolve to `none` here so any consumer applying the utility
+     unconditionally (i.e. without a `dark:` guard) degrades safely.
+     ============================================================ */
+  --card-glow-source: var(--app-accent, var(--role-accent));
+  --glow-card:         none;
+  --glow-card-hover:   none;
+
   /* ============================================================
      SRGB FALLBACKS (for browsers without oklch support)
      Tested against Chrome 105-. Values are closest sRGB equivalents.
@@ -233,5 +243,22 @@
   --glow-strength:   0.6;
   --shadow-strength: 0.8;
 
+  /*
+   * Card glow — subtle neon separation for card surfaces, dark mode only.
+   * Derived from the app's accent colour (--app-accent, falling back to
+   * the shared --role-accent default) via color-mix() so per-tenant
+   * BrandingProvider overrides and per-app brand accents (Conduit green,
+   * R80.3 amber, etc.) automatically re-colour the glow. Two layers:
+   * a 1px accent ring (edge definition, replaces a hard border) plus a
+   * soft negative-spread halo (ambient separation). Kept subtle by
+   * design — this is surface separation, not a decorative outline.
+   */
+  --glow-card:
+    0 0 0 1px color-mix(in oklch, var(--card-glow-source) 30%, transparent),
+    0 0 14px -4px color-mix(in oklch, var(--card-glow-source) 35%, transparent);
+  --glow-card-hover:
+    0 0 0 1px color-mix(in oklch, var(--card-glow-source) 42%, transparent),
+    0 0 20px -4px color-mix(in oklch, var(--card-glow-source) 48%, transparent);
+
   /* Shadcn bridge picks up rebindings automatically via var() chain */
 }