bootnode/web/components/brand-provider.tsx

"use client"

// BrandProvider — loads the per-deploy brand catalog at runtime and exposes the
// resolved BrandConfig to the tree. Mirrors the @hanzo/id SPA's App-level load:
// a `useEffect` reads the injected `window.__BRAND_CATALOG__` global and/or
// fetches `/config.json`, applies it, then re-resolves the active brand by host.
//
// Static export note: the prerendered HTML is brand-neutral (built-in bootnode
// defaults). Brand applies CLIENT-SIDE after hydration once the runtime catalog
// is available — exactly the id SPA behaviour.

import { createContext, useContext, useEffect, useState } from "react"
import { applyBrandCatalog, getBrand, type BrandConfig } from "@/lib/brand"

const BrandContext = createContext<BrandConfig>(getBrand())

export function BrandProvider({ children }: { children: React.ReactNode }) {
  // Start from the synchronous resolve (injected global if the deploy inlined
  // it before hydration; else the neutral built-in default).
  const [brand, setBrand] = useState<BrandConfig>(() => getBrand())

  useEffect(() => {
    let cancelled = false

    // 1) Ingest any deploy-injected global synchronously (no flash if present).
    const injected = (window as unknown as { __BRAND_CATALOG__?: unknown }).__BRAND_CATALOG__
    if (injected) {
      applyBrandCatalog(injected)
      setBrand(getBrand())
    }

    // 2) Also fetch /config.json (the deploy-provisioned catalog) so the app
    //    works when the catalog is served as a file rather than inlined.
    fetch("/config.json", { cache: "no-store" })
      .then((res) => (res.ok ? res.json() : null))
      .then((cat) => {
        if (cancelled || !cat) return
        applyBrandCatalog(cat)
        setBrand(getBrand())
      })
      .catch(() => {
        /* no catalog provisioned — keep the built-in neutral default */
      })

    return () => {
      cancelled = true
    }
  }, [])

  return <BrandContext.Provider value={brand}>{children}</BrandContext.Provider>
}

// Brand hook — context-backed so consumers re-render when the runtime catalog
// loads. Same return shape as before (a BrandConfig).
export function useBrand(): BrandConfig {
  return useContext(BrandContext)
}