2) Presentation Template reads the handoff + passes it to backend

Edit src/pages/business-assets/templates/PresentationTemplate.tsx

A) Read the saved handoff (near your other state):

const [coverDividers, setCoverDividers] = useLocalStorage<any>("pt.coverDividers", null);


B) Show a tiny status card (in the right column, e.g. above “Body Layouts”):

{coverDividers && (
  <div className="rounded-xl border border-emerald-500/40 bg-emerald-500/5 p-4 mb-4">
    <div className="text-sm font-medium text-emerald-300">Using Cover & Divider set from “Cover & Divider Templates”</div>
    <div className="text-xs text-emerald-200 mt-1">
      Style: <b>{coverDividers.style}</b> • Size: <b>{coverDividers.size}</b> • Title: <b>{coverDividers.content?.title}</b>
    </div>
    <div className="mt-2 flex gap-2">
      <button
        onClick={() => {
          const data = new Blob([JSON.stringify(coverDividers)], { type: "application/json" });
          const url = URL.createObjectURL(data);
          const a = document.createElement("a");
          a.href = url; a.download = "cover+dividers.json"; a.click();
          URL.revokeObjectURL(url);
        }}
        className="px-3 py-1.5 rounded-lg border border-white/10 hover:bg-white/5 text-xs"
      >
        View JSON
      </button>
      <button
        onClick={() => { setCoverDividers(null); }}
        className="px-3 py-1.5 rounded-lg border border-white/10 hover:bg-white/5 text-xs"
      >
        Remove
      </button>
    </div>
  </div>
)}


C) Include it in the payload (replace your buildConfig() function with this):

function buildConfig() {
  const effectiveLogo = useBrandLogo ? (brand.logo?.dataUrl || null) : (logo || null);
  return {
    size,
    brand: {
      name: brand.name,
      fonts,
      accents,
    },
    assets: {
      logoDataUrl: effectiveLogo,
      logoPlacement,
      logoScale,
    },
    selections: {
      layouts,
      infographics: infoPages,
    },
    coverDividers: coverDividers || null, // 👈 handoff
  };
}