3) Export — add Monochrome & Reverse assets automatically

src/services/kits/export.ts (full file)

import JSZip from "jszip";
import { saveAs } from "file-saver";
import { BrandKit } from "@/types/brand";

function injectBackground(svg: string, color: string) {
  // insert a full-bleed rect right after the opening <svg ...>
  return svg.replace(/<svg([^>]+)>/, (_m, attrs) => `<svg${attrs}><rect width="100%" height="100%" fill="${color}"/>`);
}

function recolor(svg: string, fillColor: string, strokeColor?: string) {
  let out = svg;

  // fills (skip fill="none")
  out = out.replace(/fill="(?!none)[^"]*"/gi, `fill="${fillColor}"`);
  // strokes
  if (strokeColor) {
    out = out.replace(/stroke="[^"]*"/gi, `stroke="${strokeColor}"`);
  } else {
    // if no strokeColor provided, default to fillColor
    out = out.replace(/stroke="[^"]*"/gi, `stroke="${fillColor}"`);
  }

  // if any elements rely on currentColor, set color
  out = out.replace(/<svg([^>]+)>/, (_m, attrs) => `<svg${attrs} style="color:${fillColor}">`);
  return out;
}

export async function downloadBrandKitZip(kit: BrandKit) {
  const zip = new JSZip();
  const baseFolderName = (kit.businessName || "brand").replace(/\s+/g, "-").toLowerCase();
  const folder = zip.folder(baseFolderName)!;

  // 1) original logos
  kit.logos.forEach(v => folder.file(v.filename, v.svg));

  // 2) monochrome (black) and reverse (white on primary bg)
  const mono = zip.folder(`${baseFolderName}-monochrome`)!;
  const rev  = zip.folder(`${baseFolderName}-reverse`)!;

  kit.logos.forEach(v => {
    const name = v.filename.replace(/\.svg$/i, "");
    // monochrome = black vector
    const monoSvg = recolor(v.svg, "#000000", "#000000");
    mono.file(`${name}-mono.svg`, monoSvg);

    // reverse = white on primary background
    const whiteSvg = recolor(v.svg, "#ffffff", "#ffffff");
    const reverseSvg = injectBackground(whiteSvg, kit.palette.primary);
    rev.file(`${name}-reverse.svg`, reverseSvg);
  });

  // palette preview
  const swatch = `
  <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="220">
    <rect x="0" y="0" width="200" height="220" fill="${kit.palette.primary}"/>
    <rect x="200" y="0" width="200" height="220" fill="${kit.palette.secondary}"/>
    <rect x="400" y="0" width="200" height="220" fill="${kit.palette.accent}"/>
    <rect x="600" y="0" width="200" height="220" fill="${kit.palette.neutral}"/>
    <rect x="800" y="0" width="200" height="220" fill="${kit.palette.surface}"/>
    <rect x="1000" y="0" width="200" height="220" fill="${kit.palette.textPrimary}"/>
  </svg>`;
  folder.file("palette.svg", swatch);

  // brand.json
  folder.file("brand.json", JSON.stringify(kit, null, 2));

  const blob = await zip.generateAsync({ type: "blob" });
  saveAs(blob, `${baseFolderName}-brand-kit.zip`);
}