Part 4: Brand-aware Charts + Final Builder wiring. This one is short and snappy.

1) src/components/FinanceCharts.tsx (patch)

Inject brand fonts + palette into charts.

// src/components/FinanceCharts.tsx
import React from "react";
import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid } from "recharts";
import { useBrandKitStore } from "../state/useBrandKitStore";

export function FinanceCharts({ data }:{ data: any[] }) {
  const brand = useBrandKitStore((s)=> s.getCurrentKit());

  return (
    <div className="w-full h-64" style={{ fontFamily: brand?.fontBody || "Inter, sans-serif" }}>
      <ResponsiveContainer>
        <LineChart data={data}>
          <CartesianGrid strokeDasharray="3 3" stroke={brand?.secondary || "#e5e7eb"} />
          <XAxis dataKey="month" stroke={brand?.primary || "#111827"} />
          <YAxis stroke={brand?.primary || "#111827"} />
          <Tooltip contentStyle={{ fontFamily: brand?.fontBody || "Inter" }} />
          <Line type="monotone" dataKey="profit" stroke={brand?.primary || "#6D28D9"} strokeWidth={3} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

2) src/components/CustomChartBuilder.tsx (optional patch)

If you want user-generated visuals (e.g., SWOT, personas) tinted.

// src/components/CustomChartBuilder.tsx
import React from "react";
import { useBrandKitStore } from "../state/useBrandKitStore";

export function CustomChartBuilder(){
  const brand = useBrandKitStore((s)=> s.getCurrentKit());

  return (
    <div className="rounded-xl border p-4" style={{ fontFamily: brand?.fontBody || "Inter" }}>
      <h3 className="text-lg font-semibold" style={{ color: brand?.primary }}>Custom Visual</h3>
      <p style={{ color: brand?.accent || "#374151" }}>Drag & drop chart builder coming soon…</p>
    </div>
  );
}

3) src/pages/Builder.v7.tsx (final wiring)

Just slot the updated charts in with everything else.

// src/pages/Builder.v7.tsx
import React from "react";
import { OutlineEditorV2 } from "../components/OutlineEditor.v2";
import { SectionEditor } from "../components/SectionEditor";
import { FinancialsPanel } from "../components/FinancialsPanel";
import { TemplatesPanel } from "../components/TemplatesPanel";
import { CoverDesigner } from "../components/CoverDesigner";
import { BrandKitPanel } from "../components/BrandKitPanel";
import { BrandKitManager } from "../components/BrandKitManager";
import { FinanceCharts } from "../components/FinanceCharts";
import { usePlanStoreV2 } from "../state/usePlanStore.v2";

export default function BuilderV7(){
  const sections = usePlanStoreV2((s)=> s.sections);
  const first = sections[0];
  const fakeData = [
    { month: "Jan", profit: 2000 },
    { month: "Feb", profit: 3500 },
    { month: "Mar", profit: 1500 },
    { month: "Apr", profit: 5000 },
  ];

  return (
    <div className="grid 2xl:grid-cols-[1.1fr_0.9fr] gap-8 p-6">
      <div className="space-y-6">
        <h2 className="text-xl font-semibold">Outline</h2>
        <OutlineEditorV2 />
        {first && <div className="mt-6"><SectionEditor sectionId={first.id} /></div>}
        <div className="mt-6">
          <h2 className="text-xl font-semibold mb-2">Financial Charts</h2>
          <FinanceCharts data={fakeData} />
        </div>
      </div>

      <div className="space-y-8">
        <div>
          <h2 className="text-xl font-semibold mb-2">Brand Kit Manager</h2>
          <BrandKitManager />
        </div>
        <div>
          <h2 className="text-xl font-semibold mb-2">Brand Kit</h2>
          <BrandKitPanel />
        </div>
        <div>
          <h2 className="text-xl font-semibold mb-2">Cover & Theme</h2>
          <CoverDesigner />
        </div>
        <div>
          <h2 className="text-xl font-semibold mb-2">Visual Templates</h2>
          <TemplatesPanel />
        </div>
        <div>
          <h2 className="text-xl font-semibold mb-2">Financial Tools</h2>
          <FinancialsPanel />
        </div>
      </div>
    </div>
  );
}


✅ Now you’ve got:

Multi-brand kits saved per user

Brand-aware covers (exportable PNG)

Brand-aware financial charts + templates

Builder v7 with everything wired tight