Text layers
({ value: l.id, label: l.label }))} />
{active === "headline" && (
)}
);
}
function PulseDesk({ onToast, onOpen }) {
const [steps, setSteps] = React.useState(["", "", "", ""]);
const [label, setLabel] = React.useState("Pulse");
const [footerText, setFooterText] = React.useState("leap.app");
const [useVisual, setUseVisual] = React.useState(true);
const [bgs, setBgs] = React.useState(DEFAULT_BGS);
const [bgIndex, setBgIndex] = React.useState(0);
const [activeLayer, setActiveLayer] = React.useState("headline");
const [tstyle, setTstyle] = React.useState({
eyebrow: { size: 30, style: "bold", color: "#FFFFFF" },
headline: { pos: "bottom", size: 58, style: "bold", color: "#FFFFFF" },
footer: { size: 30, style: "bold", color: "#FFFFFF" },
});
const [bakedUrl, setBakedUrl] = React.useState(null);
const [pickBg, setPickBg] = React.useState(false);
const fileRef = React.useRef(null);
const set = (i, v) => setSteps((s) => s.map((x, j) => (j === i ? v : x)));
const setLayer = (patch) => setTstyle((s) => ({ ...s, [activeLayer]: { ...s[activeLayer], ...patch } }));
const body = steps.filter((s) => s.trim()).join("\n\n");
const n = R.countChars(body);
const filled = steps.filter((s) => s.trim()).length;
const headline = (steps[0] || "").trim();
const bg = bgs[Math.min(bgIndex, bgs.length - 1)] || DEFAULT_BGS[0];
// assemble the text layers that get drawn on the visual
const text = {
eyebrow: { value: label || "Pulse", ...tstyle.eyebrow },
headline: { value: headline || "Your headline / number", ...tstyle.headline },
footer: { value: footerText || "leap.app", ...tstyle.footer },
};
// text content + placeholder for whichever layer is being edited
const layerValue = activeLayer === "eyebrow" ? label : activeLayer === "footer" ? footerText : steps[0];
const setLayerValue = activeLayer === "eyebrow" ? setLabel : activeLayer === "footer" ? setFooterText : (v) => set(0, v);
const layerPlaceholder = activeLayer === "eyebrow" ? "Pulse" : activeLayer === "footer" ? "leap.app" : "Your headline / number";
const prev = () => setBgIndex((i) => (i - 1 + bgs.length) % bgs.length);
const next = () => setBgIndex((i) => (i + 1) % bgs.length);
const genMore = () => { const more = generateBgs(3); setBgs((b) => [...b, ...more]); setBgIndex(bgs.length); onToast("Generated 3 more backgrounds"); };
const onUpload = async (e) => {
const f = (e.target.files || [])[0]; e.target.value = ""; if (!f) return;
const isGif = (f.type || "") === "image/gif";
const m = await window.LeapUpload.readAndHost(f); if (!m) return;
const opt = { id: "up" + Date.now(), type: "image", name: m.name, url: m.url, isGif: isGif, zoom: 1, rotate: 0, ox: 0, oy: 0 };
setBgs((b) => { const nb = [...b, opt]; setBgIndex(nb.length - 1); return nb; });
onToast((isGif ? "GIF" : "Image") + " added — zoom, turn or drag to position");
};
// pick a background from the account's asset library (primary path)
const addAssetBg = (a) => {
const opt = { id: "as" + a.id, type: "image", name: a.name, url: a.url, isGif: false, zoom: 1, rotate: 0, ox: 0, oy: 0 };
setBgs((b) => { const nb = [...b, opt]; setBgIndex(nb.length - 1); return nb; });
onToast(`Background “${a.name}” added — zoom, turn or drag to position`);
};
const updateBgFn = (i, fn) => setBgs((b) => b.map((x, j) => (j === i ? { ...x, ...fn(x) } : x)));
const zoomBy = (d) => updateBgFn(bgIndex, (x) => ({ zoom: Math.min(3, Math.max(0.4, (x.zoom || 1) + d)) }));
const turnBy = (deg) => updateBgFn(bgIndex, (x) => ({ rotate: (x.rotate || 0) + deg }));
const panTo = (ox, oy) => updateBgFn(bgIndex, () => ({ ox: Math.max(-60, Math.min(60, ox)), oy: Math.max(-60, Math.min(60, oy)) }));
const resetXf = () => updateBgFn(bgIndex, () => ({ zoom: 1, rotate: 0, ox: 0, oy: 0 }));
const delBg = (i) => {
if (bgs.length <= 1) { onToast("Keep at least one background — Generate or Upload another first", "error"); return; }
setBgs((b) => b.filter((_, j) => j !== i));
setBgIndex((x) => Math.max(0, Math.min(x > i ? x - 1 : x, bgs.length - 2)));
};
// bake the visual (async) whenever anything relevant changes → drives the
// assembled preview AND the attached post image (so text is always baked)
React.useEffect(() => {
let cancelled = false;
if (!useVisual) { setBakedUrl(null); return; }
if (bg.type === "image" && bg.isGif) { setBakedUrl(bg.url); return; }
bakePulseCanvas({ bg, text }).then((u) => { if (!cancelled) setBakedUrl(u); });
return () => { cancelled = true; };
}, [useVisual, bg, label, headline, footerText, tstyle]);
const create = async () => {
let media = [];
if (useVisual) {
const url = (bg.type === "image" && bg.isGif) ? bg.url : await bakePulseCanvas({ bg, text });
media = [{ kind: "image", url, altText: label + " visual" + (bg.isGif ? " (animated)" : ""), status: "ready" }];
}
const post = window.CroprStore.create({
title: label + " — " + (headline ? headline.slice(0, 40) : "new"),
series: "onchain_pulse", pillar: "pulse", channels: ["x_cropr"], status: "in_draft",
hookType: "number", campaign: label, proofMarked: true,
content: [{ channel: "x_cropr", format: "single", body, threadParts: null, media, article: null, derivedPost: null }],
});
onToast("Pulse draft created → opening in Composer");
onOpen(post.id);
};
return (
The 4-step Pulse formula
{D.PULSE_FORMULA.map((f, i) => (
}
{isImg && }