here’s a tiny, in-page preview stencil that live-reflects the logo source, placement, and size (no other changes). Drop this into your existing PresentationTemplate.tsx.

1) Add state you already have in the file (just a reminder)

These were added earlier; keep them as-is:

type LogoPlacement = "none" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
const [useBrandLogo, setUseBrandLogo] = useLocalStorage<boolean>("pt.useBrandLogo", !!brand.logo?.dataUrl);
const [logoPlacement, setLogoPlacement] = useLocalStorage<LogoPlacement>("pt.logoPlacement", "top-right");
const [logoScale, setLogoScale] = useLocalStorage<number>("pt.logoScale", 1);

2) Add this helper near the top of the file (outside the component)
function placementToStyle(p: "none"|"top-left"|"top-right"|"bottom-left"|"bottom-right") {
  const base: React.CSSProperties = { position: "absolute" };
  if (p === "none") return { ...base, display: "none" };
  if (p.includes("top"))  base.top = "6%";  else base.bottom = "6%";
  if (p.includes("left")) base.left = "6%"; else base.right  = "6%";
  return base;
}

3) Inside the component, compute the effective logo for preview

Place this right after your other useLocalStorage lines:

const effectiveLogo: string | null = useBrandLogo ? (brand.logo?.dataUrl || null) : (logo || null);

4) Add the Preview Stencil UI block under the logo controls in the Brand Panel

Find the Logo section you recently updated and, after the placement/size controls block, paste this:

{/* Logo Placement Preview */}
<div className="mt-4">
  <div className="text-xs text-slate-400 mb-1">Logo placement preview</div>
  <div
    className={`relative w-full ${size === "16x9" ? "aspect-video" : "aspect-[4/3]"} rounded-lg border border-dashed border-white/15 bg-white`}
    title="Slide preview"
  >
    {/* faint viewport gridlines for context */}
    <div className="absolute inset-0 pointer-events-none">
      <div className="absolute inset-0" style={{ background:
        "linear-gradient(transparent 49.5%, rgba(0,0,0,0.05) 50%, transparent 50.5%), linear-gradient(90deg, transparent 49.5%, rgba(0,0,0,0.05) 50%, transparent 50.5%)"
      }} />
    </div>

    {/* Title bar hint */}
    <div className="absolute left-[6%] right-[6%] top-[28%] h-6 rounded" style={{ background: "rgba(0,0,0,0.05)" }} />
    {/* Body box hint */}
    <div className="absolute left-[6%] right-[6%] top-[42%] h-[30%] rounded" style={{ background: "rgba(0,0,0,0.05)" }} />

    {/* Logo image/placeholder */}
    <div
      style={{
        ...placementToStyle(logoPlacement),
        width: `${8 * logoScale}%`,
        aspectRatio: "1 / 1",
        display: logoPlacement === "none" ? "none" : "block",
        filter: "drop-shadow(0 2px 6px rgba(0,0,0,0.25))",
      }}
    >
      {effectiveLogo ? (
        <img
          src={effectiveLogo}
          alt="logo"
          className="w-full h-full object-contain"
        />
      ) : (
        <div className="w-full h-full rounded bg-black/80 text-white flex items-center justify-center text-[10px]">
          LOGO
        </div>
      )}
    </div>
  </div>
  <p className="mt-2 text-[11px] text-slate-400">
    This is a visual guide only. The PPTX export uses the same placement & scale on every slide.
  </p>
</div>


That’s it — the preview canvas is white (so your black icons/marks pop), honors 16:9 / 4:3, and moves/scales the logo live as users tweak Brand Kit vs Upload, corner placement, and size.