Add src/utils/brand.ts
/**
 * Brand Kit binding for the app.
 * We try (in order):
 *  - React context (if your app provides one) — TODO: you can wire this later
 *  - localStorage key "ibrandbiz_brandkit"
 *  - safe defaults
 */

export type BrandKit = {
  name?: string;
  fonts?: {
    heading?: string;
    body?: string;
  };
  colors: {
    primary: string;
    accent?: string;
    neutral?: string;
    [key: string]: string | undefined;
  };
  logo?: {
    dataUrl?: string; // base64 data URL
  };
};

const DEFAULT_BRAND: BrandKit = {
  name: "IBrandBiz",
  fonts: { heading: "Inter", body: "Inter" },
  colors: {
    primary: "#05445e",
    accent: "#f99f1b",
    neutral: "#d4f1f4",
  },
  logo: { dataUrl: "" },
};

export function useBrandKit(): BrandKit {
  // 1) If you later add a BrandKitContext, read it here.

  // 2) localStorage fallback
  try {
    const raw = localStorage.getItem("ibrandbiz_brandkit");
    if (raw) {
      const parsed = JSON.parse(raw);
      // Merge with defaults to avoid undefined fields
      return {
        name: parsed.name ?? DEFAULT_BRAND.name,
        fonts: {
          heading: parsed.fonts?.heading ?? DEFAULT_BRAND.fonts?.heading,
          body: parsed.fonts?.body ?? DEFAULT_BRAND.fonts?.body,
        },
        colors: {
          ...DEFAULT_BRAND.colors,
          ...(parsed.colors || {}),
        },
        logo: {
          dataUrl: parsed.logo?.dataUrl ?? DEFAULT_BRAND.logo?.dataUrl,
        },
      };
    }
  } catch {
    /* ignore */
  }

  // 3) Safe default
  return DEFAULT_BRAND;
}

Add src/utils/file.ts
export async function fileToDataUrl(file: File): Promise<string> {
  return new Promise<string>((resolve, reject) => {
    const reader = new FileReader();
    reader.onerror = () => reject(new Error("Failed to read file"));
    reader.onload = () => resolve(String(reader.result));
    reader.readAsDataURL(file);
  });
}

How it binds to your Brand Kit (today)

Reads from localStorage["ibrandbiz_brandkit"] if present, otherwise uses sane defaults.

Expected shape (you can save this anywhere in your app after the user creates a kit):

{
  "name": "Petals & Grace",
  "fonts": { "heading": "Manrope", "body": "Inter" },
  "colors": { "primary": "#05445e", "accent": "#f99f1b", "neutral": "#d4f1f4" },
  "logo": { "dataUrl": "data:image/png;base64,...." }
}


If your existing brand-kit state lives in a global store/context, just replace useBrandKit() to read from there—everything else will keep working.

What you get right now

Solid or image background (with a subtle dark overlay for contrast).

Title/subtitle with Brand Kit fonts.

Auto-placed logo (4 corners, resizable).

16:9 or 4:3 slide size.

One click: Generate PPTX (downloads immediately).