/* educator-builder.jsx — Study Builder: walk a published deck slide-by-slide and style or gamify individual slides. Persists deck.enhance via DeckStore. */ function StudyBuilder({ deck, onClose, toast }) { const slides = deck.slides || []; const TOTAL = slides.length; const [enh, setEnh] = useState(() => JSON.parse(JSON.stringify(deck.enhance || {}))); const [idx, setIdx] = useState(0); const [preview, setPreview] = useState(false); const [saving, setSaving] = useState(false); const [rebuilding, setRebuilding] = useState(false); const [rprompt, setRprompt] = useState(""); const [proposing, setProposing] = useState(false); const [gprompt, setGprompt] = useState(""); const [showDeckNote, setShowDeckNote] = useState(false); const ratio = deck.ratio || 16 / 9; const cur = enh[idx] || {}; function patch(p) {setEnh((prev) => ({ ...prev, [idx]: { ...(prev[idx] || {}), ...p } }));} function patchGame(p) {setEnh((prev) => {const s = prev[idx] || {};const g = { ...(s.game || { type: "quiz", q: "", options: ["", "", "", ""], answer: 0, xp: 50 }), ...p };return { ...prev, [idx]: { ...s, game: g } };});} function clearSlide() {setEnh((prev) => {const n = { ...prev };delete n[idx];return n;});setRprompt("");} /* Accent applies to the slide ITSELF when it has been rebuilt in HTML: recolour the slide's HTML in place (previous accent hex → new one). */ function applyAccent(c) { setEnh((prev) => { const s = prev[idx] || {}; const p = { ...s, accent: c }; if (s.html) { const old = s.accent || "#f99d25"; if (old.toLowerCase() !== c.toLowerCase()) { try { const esc = old.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); p.html = s.html.replace(new RegExp(esc, "gi"), c); } catch (e) {} } } return { ...prev, [idx]: p }; }); } async function rebuildHtml() { if (rebuilding) return; if (!window.claude || !window.claude.complete) {toast && toast("AI rebuild runs in the live preview environment", "x");return;} setRebuilding(true); const accent = cur.accent || "#f99d25"; const styleHints = [cur.title && "title: " + cur.title, cur.caption && "caption: " + cur.caption].filter(Boolean).join("; "); const prompt = [ "You are rebuilding one slide of a professional training presentation as a single self-contained HTML document.", "Deck: \"" + deck.title + "\" — slide " + (idx + 1) + " of " + TOTAL + ".", rprompt.trim() ? "The trainer's instruction for this slide: \"" + rprompt.trim() + "\"" : "Recreate a clean, modern version of a training slide on this deck's topic.", styleHints ? "Existing slide metadata — " + styleHints + "." : "", "Requirements: Output ONLY raw HTML (a complete document starting with ). No markdown, no code fences, no commentary.", "The slide must fill a 16:9 stage: set html,body{margin:0;width:100vw;height:100vh;overflow:hidden} and a root .slide that is display:flex and fills the viewport.", "Use vw/vh-relative units for ALL sizing (font-size in vw, padding in vw) so it scales to any size. Base body font-size around 2.4vw, headings 4-6vw.", "Use a refined palette with accent " + accent + ". Inter/system sans-serif. No external images. Keep it concise and well-composed."]. filter(Boolean).join("\n"); try { let out = await window.claude.complete(prompt); out = (out || "").replace(/^```html\s*/i, "").replace(/^```\s*/i, "").replace(/```\s*$/i, "").trim(); if (!/<(!doctype|html|body|div|section)/i.test(out)) throw new Error("no html"); setEnh((prev) => ({ ...prev, [idx]: { ...(prev[idx] || {}), html: out, htmlPrompt: rprompt.trim() } })); toast && toast("Slide rebuilt in HTML ✓", "check"); } catch (e) { toast && toast("Rebuild failed — " + (e && e.message ? e.message : "try again in a moment"), "x"); } setRebuilding(false); } function revertHtml() {setEnh((prev) => {const s = { ...(prev[idx] || {}) };delete s.html;delete s.htmlPrompt;return { ...prev, [idx]: s };});} async function proposeGame() { if (proposing) return; if (!window.claude || !window.claude.complete) {toast && toast("AI runs in the live preview environment", "x");return;} setProposing(true); let content = ""; if (cur.html) content = cur.html.replace(//gi, " ").replace(//gi, " ").replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim().slice(0, 700);else content = [cur.title && "title: " + cur.title, cur.caption && "caption: " + cur.caption].filter(Boolean).join("; "); const prompt = [ "You design gamification for one slide of a professional training deck.", "Deck: \"" + deck.title + "\" — slide " + (idx + 1) + " of " + TOTAL + ".", content ? "Slide content: " + content : "No slide text available; infer a relevant question from the deck topic.", gprompt.trim() ? "Trainer guidance: \"" + gprompt.trim() + "\"" : "", "Propose ONE engaging interaction that checks understanding of THIS slide.", "Return ONLY a JSON object (no markdown, no commentary, no code fences) with keys:", 'type: one of "quiz", "poll", "reflect";', "q: the question or prompt text (concise);", 'options: array of exactly 4 short answer strings (for "reflect" use []);', 'answer: 0-based index of the correct option for "quiz" (0 otherwise);', "xp: one of 20, 50, 100, 200 (harder = more)."]. filter(Boolean).join("\n"); try { let out = await window.claude.complete(prompt); const m = (out || "").match(/\{[\s\S]*\}/); if (!m) throw new Error("no proposal returned"); const p = JSON.parse(m[0]); const type = ["quiz", "poll", "reflect"].includes(p.type) ? p.type : "quiz"; let options = Array.isArray(p.options) ? p.options.map((o) => String(o)).slice(0, 4) : []; if (type !== "reflect") {while (options.length < 4) options.push("");} const answer = Math.max(0, Math.min(3, parseInt(p.answer, 10) || 0)); const xp = [20, 50, 100, 200].includes(p.xp) ? p.xp : 50; setEnh((prev) => ({ ...prev, [idx]: { ...(prev[idx] || {}), game: { type, q: String(p.q || ""), options, answer, xp } } })); toast && toast("Gamification proposed ✓ — review & edit below", "check"); } catch (e) { toast && toast("Couldn't propose — " + (e && e.message ? e.message : "try again"), "x"); } setProposing(false); } function setGameType(type) { if (!type) {setEnh((prev) => {const s = { ...(prev[idx] || {}) };delete s.game;return { ...prev, [idx]: s };});return;} setEnh((prev) => {const s = prev[idx] || {};const ex = s.game || {};return { ...prev, [idx]: { ...s, game: { type, q: ex.q || "", options: ex.options || ["", "", "", ""], answer: ex.answer || 0, xp: ex.xp || (type === "kahoot" ? 100 : 50), time: ex.time || 20 } } };}); } async function save() { setSaving(true); const clean = {}; Object.keys(enh).forEach((k) => {const e = enh[k];if (e && (e.title || e.caption || e.frame || e.accent || e.game || e.html)) clean[k] = e;}); const gamified = Object.values(clean).some((e) => e.game); try { await window.DeckStore.save({ ...deck, enhance: clean, gamified }); toast && toast("Study saved — " + Object.keys(clean).length + " slides enhanced", "check"); onClose(true); } catch (e) {toast && toast("Save failed — deck may be too large", "x");} setSaving(false); } const g = cur.game; const slideHas = (i) => {const e = enh[i] || {};return { styled: !!(e.title || e.caption || e.frame), gamed: !!e.game, html: !!e.html };}; const lblStyle = { fontSize: 11, fontWeight: 800, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: ".07em", display: "block", marginBottom: 7 }; const inputStyle = { width: "100%", padding: "9px 12px", border: "1.5px solid var(--line)", borderRadius: 9, fontSize: 14, color: "var(--ink)", background: "var(--surface)", fontFamily: "var(--body)", outline: "none" }; return ReactDOM.createPortal(
{/* HEADER */}
Study Builder
{deck.title}
{/* BODY */}
{/* SLIDE RAIL */}
{slides.map((img, i) => { const m = slideHas(i); return ( ); })}
{/* CENTER PREVIEW */}
{cur.html ? : {"Slide} {cur.html && </> HTML}
{g && }
{idx + 1} / {TOTAL}
{/* INSPECTOR */}
Slide {idx + 1}
{(cur.title || cur.caption || cur.frame || cur.game) && }
{/* REBUILD IN HTML */}
Rebuild in HTML

Regenerate this slide as crisp, scalable HTML — describe how you want it different.