C) Brand Kit page — Mark Mode, Colorways (1 or 2), 📌 Lock all

In your Brand Kit page (e.g., client/src/pages/BrandKit.tsx or src/pages/BrandKit/BrandKitPage.tsx):

State + helpers

import { StylePack, MarkMode, generateAiLogos } from "@/services/ai/logos";
import { rotateHue } from "@/utils/colors"; // if you have it; otherwise implement a small hue rotator

const [stylePack, setStylePack] = useState<StylePack>("balanced");
const [markMode,  setMarkMode]  = useState<MarkMode>("auto");
const [colorways, setColorways] = useState<1 | 2>(1);
const [favorites, setFavorites] = useState<Record<number, boolean>>({});
const [locks,     setLocks]     = useState<Record<number, boolean>>({});

const lockAll   = () => setLocks(Object.fromEntries((kit?.logos || []).map((_,i)=>[i,true])));
const unlockAll = () => setLocks({});


Controls (drop into your form toolbar next to Style Pack)

<label className="text-sm text-gray-600">Mark Mode:</label>
<select
  className="border rounded-lg px-3 py-2"
  value={markMode}
  onChange={e => setMarkMode(e.target.value as MarkMode)}
>
  <option value="auto">Auto</option>
  <option value="icon">Icon-only</option>
  <option value="wordmark">Keep wordmark</option>
</select>

<label className="text-sm text-gray-600">Colorways:</label>
<select
  className="border rounded-lg px-3 py-2"
  value={colorways}
  onChange={e => setColorways(Number(e.target.value) as 1|2)}
>
  <option value={1}>1</option>
  <option value={2}>2</option>
</select>

<button onClick={lockAll}   className="px-3 py-2 rounded-lg bg-gray-200">📌 Lock all</button>
<button onClick={unlockAll} className="px-3 py-2 rounded-lg bg-gray-200">🔓 Unlock all</button>


Generate AI — support 2 colorways (6 variants total)

const handleGenerateAI = async () => {
  if (!businessName || !kit) { alert("Enter a business name and generate a base kit first"); return; }

  const p1 = {
    primary: kit.palette.primary,
    secondary: kit.palette.secondary,
    accent: kit.palette.accent,
  };

  // roll a second palette by rotating hues slightly
  const p2 = {
    primary: rotateHue(kit.palette.primary, 24),
    secondary: rotateHue(kit.palette.secondary, 24),
    accent: rotateHue(kit.palette.accent, 24),
  };

  const run = async (palette: typeof p1) =>
    generateAiLogos({
      businessName, personality,
      palette, keywords: industry ? [industry] : [],
      stylePack, markMode,
    });

  let out = await run(p1);
  if (colorways === 2) {
    const out2 = await run(p2);
    // tag filenames to avoid collisions
    out = [
      ...out.map(v => ({ ...v, filename: v.filename.replace(".svg", "-cw1.svg") })),
      ...out2.map(v => ({ ...v, filename: v.filename.replace(".svg", "-cw2.svg") })),
    ];
  }

  setKit(prev => prev ? { ...prev, logos: out } : prev);
  setFavorites({});
  setLocks({});
};


Reroll still works as-is; it replaces the clicked index unless locked.