@agent-native/core-corpus 0.214.0 → 0.216.0

package/corpus/templates/slides-2/server/lib/deck-templates/a-workshop.ts

@@ -0,0 +1,196 @@
+import { authoredDeck, slideRoot } from "./a-shared.js";
+
+// guard:allow-raw-color — authored slide palette, not app chrome.
+const [paper, ink, muted, marker, yellow, dot] = [
+  "#FBF9F3", // guard:allow-raw-color
+  "#23262D", // guard:allow-raw-color
+  "#5E626B", // guard:allow-raw-color
+  "#2C57D8", // guard:allow-raw-color
+  "#FFE68A", // guard:allow-raw-color
+  "#D6D1C4", // guard:allow-raw-color
+];
+// guard:allow-raw-color — authored sticky-note pastels, not app chrome.
+const [pink, sky, mint, peach] = ["#FFC7D4", "#BDE0FF", "#C7EFC1", "#FFD3A6"];
+
+const tokens = `--deck-bg:${paper};--deck-ink:${ink};--deck-muted:${muted};--deck-accent:${marker};--deck-surface:${yellow};--deck-heading-font:'Nunito',sans-serif;--deck-body-font:'Nunito',sans-serif;--deck-radius:4px;--ws-dot:${dot};--ws-pink:${pink};--ws-sky:${sky};--ws-mint:${mint};--ws-peach:${peach};`;
+
+const hand = "font-family:'Caveat',cursive;";
+const h1 =
+  "font-family:'Nunito',sans-serif;font-weight:700;letter-spacing:-0.02em;margin:0;";
+
+const slide = (body: string) =>
+  slideRoot(
+    tokens,
+    "font-family:'Nunito',sans-serif;background-image:radial-gradient(var(--ws-dot) 1.3px,transparent 1.7px);background-size:24px 24px;background-position:12px 12px;padding:40px 52px;display:flex;flex-direction:column;",
+    body,
+  );
+
+type Note = "surface" | "pink" | "sky" | "mint" | "peach";
+const noteColor = (note: Note) =>
+  note === "surface" ? "var(--deck-surface)" : `var(--ws-${note})`;
+
+const sticky = (note: Note, tilt: number, body: string, style = "") =>
+  `<div style="position:relative;background:${noteColor(note)};padding:18px 16px 16px;transform:rotate(${tilt}deg);box-shadow:0 8px 16px -6px color-mix(in srgb,var(--deck-ink) 30%,transparent);${style}"><span style="position:absolute;left:50%;top:-9px;width:64px;height:18px;margin-left:-32px;background:color-mix(in srgb,var(--deck-bg) 60%,transparent);transform:rotate(${-tilt * 1.5}deg);"></span>${body}</div>`;
+
+const highlight =
+  "background:linear-gradient(transparent 55%,var(--deck-surface) 55% 92%,transparent 92%);padding:0 4px;";
+
+const arrow = (style: string, width = 140, height = 70) =>
+  `<span aria-hidden="true" style="position:absolute;width:${width}px;height:${height}px;border:3px solid transparent;border-top-color:var(--deck-accent);border-radius:50%;${style}"><span style="position:absolute;right:-1px;top:${height / 2 - 14}px;width:13px;height:13px;border-right:3px solid var(--deck-accent);border-bottom:3px solid var(--deck-accent);transform:rotate(40deg);"></span></span>`;
+
+const circled = (n: number) =>
+  `<span style="${hand}display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border:2.5px solid var(--deck-accent);border-radius:52% 46% 55% 44%;font-size:24px;font-weight:700;color:var(--deck-accent);">${n}</span>`;
+
+const agenda = (time: string, title: string, minutes: string) =>
+  `<div style="display:grid;grid-template-columns:64px 1fr auto;align-items:baseline;gap:14px;padding:9px 0;border-bottom:2px dashed color-mix(in srgb,var(--deck-ink) 18%,transparent);"><span style="${hand}font-size:28px;font-weight:700;color:var(--deck-accent);">${time}</span><span style="font-size:19px;font-weight:700;">${title}</span><span style="font-size:15px;color:var(--deck-muted);">${minutes}</span></div>`;
+
+const cluster = (title: string, notes: readonly [Note, number, string][]) =>
+  `<div style="display:flex;flex-direction:column;gap:14px;"><h3 style="${hand}margin:0 0 4px;font-size:34px;font-weight:700;line-height:1;"><span style="${highlight}">${title}</span></h3>${notes.map(([note, tilt, text]) => sticky(note, tilt, `<span style="font-size:17px;line-height:1.3;font-weight:700;">${text}</span>`, "padding:14px 14px 12px;")).join("")}</div>`;
+
+const todo = (text: string, owner: string, done = false) =>
+  `<div style="display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;"><span style="position:relative;width:22px;height:22px;margin-top:2px;border:2.5px solid var(--deck-ink);border-radius:4px 6px 3px 5px;">${done ? `<span style="position:absolute;left:5px;top:-3px;width:9px;height:17px;border-right:3px solid var(--deck-accent);border-bottom:3px solid var(--deck-accent);transform:rotate(40deg);"></span>` : ""}</span><span style="font-size:18px;line-height:1.35;font-weight:700;">${text}<span style="${hand}display:block;font-size:22px;font-weight:400;color:var(--deck-muted);">${owner}</span></span></div>`;
+
+export const WORKSHOP_DECK = authoredDeck(
+  "starter-workshop-kit",
+  "Workshop kit",
+  "workshop",
+  "A playful whiteboard kit for facilitators: dotted paper, sticky notes, marker arrows, a timed agenda, an exercise, clustering, and a parking lot.",
+  [
+    {
+      layout: "title",
+      content: slide(
+        `<div style="display:grid;grid-template-columns:1fr 330px;gap:30px;height:100%;align-items:center;">
+<div>
+<h1 style="${h1}font-size:62px;line-height:1.02;">Mapping the <span style="${highlight}">customer journey</span></h1>
+<p style="${hand}margin:18px 0 0;font-size:34px;line-height:1.1;color:var(--deck-accent);max-width:420px;">A 90-minute working session for the whole team</p>
+<span style="display:block;margin-top:34px;font-size:16px;color:var(--deck-muted);">Facilitated by Name Surname &middot; Room 0 &middot; 20XX-00-00</span>
+</div>
+<div style="position:relative;height:400px;">
+${sticky("surface", -5, `<span style="${hand}font-size:30px;line-height:1.05;font-weight:700;">What do customers notice first?</span>`, "position:absolute;left:10px;top:10px;width:180px;height:150px;box-sizing:border-box;")}
+${sticky("pink", 6, `<span style="${hand}font-size:30px;line-height:1.05;font-weight:700;">Where do they get stuck?</span>`, "position:absolute;right:0;top:120px;width:170px;height:150px;box-sizing:border-box;")}
+${sticky("sky", -3, `<span style="${hand}font-size:30px;line-height:1.05;font-weight:700;">What would delight them?</span>`, "position:absolute;left:40px;top:246px;width:180px;height:140px;box-sizing:border-box;")}
+</div>
+</div>
+${arrow("left:470px;top:392px;transform:rotate(-4deg);", 140, 60)}`,
+      ),
+      notes:
+        "Welcome everyone and read the three questions on the sticky notes aloud; they frame the whole session. Replace the topic, facilitator, room, and date with your own details.",
+    },
+    {
+      layout: "content",
+      content: slide(
+        `<div style="display:grid;grid-template-columns:270px 1fr;gap:56px;height:100%;align-items:center;">
+<div style="display:flex;flex-direction:column;align-items:center;">
+<div style="position:relative;width:240px;height:240px;border-radius:50%;background:conic-gradient(var(--deck-accent) 0 11%,color-mix(in srgb,var(--deck-accent) 14%,var(--deck-bg)) 11% 100%);">
+<div style="position:absolute;inset:18px;border-radius:50%;background:var(--deck-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;"><span style="${hand}font-size:76px;font-weight:700;line-height:0.9;">90:00</span><span style="font-size:15px;color:var(--deck-muted);">minutes on the clock</span></div>
+</div>
+<span style="${hand}margin-top:16px;font-size:26px;color:var(--deck-accent);">first up: the warm-up</span>
+</div>
+<div>
+<h1 style="${h1}font-size:42px;line-height:1.05;">Today's plan</h1>
+<p style="margin:8px 0 14px;font-size:17px;line-height:1.45;color:var(--deck-muted);">Five blocks, each with a clear output. We will keep to time.</p>
+${agenda("0:00", "Warm-up and goals", "10 min")}
+${agenda("0:10", "Map the journey, stage by stage", "25 min")}
+${agenda("0:35", "Find the friction", "20 min")}
+${agenda("0:55", "Dot vote on what to fix", "15 min")}
+${agenda("1:10", "Owners and next steps", "20 min")}
+</div>
+</div>`,
+      ),
+      notes:
+        "Start a visible timer and point to where you are on the agenda at every transition. Adjust block names and timings to your session; keep each block tied to a concrete output.",
+    },
+    {
+      layout: "content",
+      content: slide(
+        `<h1 style="${h1}font-size:42px;line-height:1.05;">How we'll work together</h1>
+<p style="margin:10px 0 0;font-size:18px;line-height:1.45;color:var(--deck-muted);max-width:560px;">Four agreements that keep the session moving and make sure everyone is heard.</p>
+<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin:auto 0;">
+${sticky("surface", -3, `<span style="${hand}display:block;font-size:34px;font-weight:700;line-height:1;">Yes, and&hellip;</span><span style="display:block;margin-top:14px;font-size:16px;line-height:1.4;">Build on ideas before you judge them.</span>`, "height:220px;box-sizing:border-box;")}
+${sticky("pink", 2.5, `<span style="${hand}display:block;font-size:34px;font-weight:700;line-height:1;">Laptops closed</span><span style="display:block;margin-top:14px;font-size:16px;line-height:1.4;">Screens down unless you are the scribe.</span>`, "height:220px;box-sizing:border-box;margin-top:18px;")}
+${sticky("sky", -1.5, `<span style="${hand}display:block;font-size:34px;font-weight:700;line-height:1;">One voice at a time</span><span style="display:block;margin-top:14px;font-size:16px;line-height:1.4;">Hold the marker to hold the floor.</span>`, "height:220px;box-sizing:border-box;")}
+${sticky("mint", 3.5, `<span style="${hand}display:block;font-size:34px;font-weight:700;line-height:1;">Park it</span><span style="display:block;margin-top:14px;font-size:16px;line-height:1.4;">Good tangents go to the parking lot, not the bin.</span>`, "height:220px;box-sizing:border-box;margin-top:12px;")}
+</div>`,
+      ),
+      notes:
+        "Ask the group to agree to these out loud, and invite one more agreement from the room. Swap any rule that does not fit your team's culture.",
+    },
+    {
+      layout: "content",
+      content: slide(
+        `<div style="display:grid;grid-template-columns:1fr 370px;gap:56px;height:100%;">
+<div style="display:flex;flex-direction:column;">
+<h1 style="${h1}font-size:40px;line-height:1.05;">How might we?</h1>
+<p style="margin:10px 0 0;font-size:18px;line-height:1.45;color:var(--deck-muted);">Turn the friction you found into questions worth solving.</p>
+<div style="display:flex;flex-direction:column;gap:18px;margin-top:auto;">
+<div style="display:flex;gap:14px;align-items:center;">${circled(1)}<span style="font-size:18px;line-height:1.35;font-weight:700;">On your own, write one question per sticky.</span></div>
+<div style="display:flex;gap:14px;align-items:center;">${circled(2)}<span style="font-size:18px;line-height:1.35;font-weight:700;">In pairs, read them aloud and pick your best two.</span></div>
+<div style="display:flex;gap:14px;align-items:center;">${circled(3)}<span style="font-size:18px;line-height:1.35;font-weight:700;">Post them under the journey stage they belong to.</span></div>
+</div>
+<span style="${hand}display:inline-block;align-self:flex-start;margin-top:22px;padding:2px 14px;border:2.5px solid var(--deck-ink);border-radius:18px 14px 20px 12px;font-size:28px;font-weight:700;">8 minutes, then pairs</span>
+</div>
+<div style="position:relative;align-self:center;">
+${sticky("surface", 2, `<span style="${hand}display:block;font-size:40px;font-weight:700;line-height:1.3;">How might we <span style="display:inline-block;width:150px;border-bottom:2.5px solid var(--deck-ink);"></span> for <span style="display:inline-block;width:170px;border-bottom:2.5px solid var(--deck-ink);"></span> so that <span style="display:inline-block;width:120px;border-bottom:2.5px solid var(--deck-ink);"></span>?</span>`, "padding:32px 30px 30px;")}
+<span style="${hand}position:absolute;right:6px;top:-50px;font-size:26px;color:var(--deck-accent);transform:rotate(-3deg);">keep it open, not a solution</span>
+</div>
+</div>
+${arrow("left:330px;top:438px;transform:rotate(-16deg);", 175, 56)}`,
+      ),
+      notes:
+        "Model one example on the board before the timer starts. Keep people writing silently first; replace the prompt and timing with whatever your exercise needs.",
+    },
+    {
+      layout: "content",
+      content: slide(
+        `<div style="display:flex;justify-content:space-between;align-items:flex-end;gap:32px;">
+<h1 style="${h1}font-size:42px;line-height:1.05;">What we heard</h1>
+<p style="margin:0;max-width:360px;font-size:17px;line-height:1.45;color:var(--deck-muted);">Sticky notes grouped by stage. Add a dot to the ones you would fix first.</p>
+</div>
+<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:24px;">
+${cluster("Getting started", [
+  ["surface", -2, "Setup asks for things I don't have yet"],
+  ["surface", 1.5, "Not sure what to do after signing up"],
+  ["peach", -1, "The welcome email felt helpful"],
+])}
+${cluster("Day to day", [
+  ["pink", 2, "Hard to find last week's work"],
+  ["pink", -1.5, "Too many notifications, none that matter"],
+  ["pink", 1, "Sharing with a teammate takes four clicks"],
+])}
+${cluster("Getting help", [
+  ["sky", -2.5, "Help articles don't match the screens"],
+  ["surface", 1.5, "Can't tell if my ticket was seen"],
+  ["mint", -1, "Loved the quick reply from support"],
+])}
+</div>`,
+      ),
+      notes:
+        "Read a few notes from each cluster aloud before voting. These notes are examples; replace them with what your participants actually wrote.",
+    },
+    {
+      layout: "content",
+      content: slide(
+        `<h1 style="${h1}font-size:42px;line-height:1.05;">Before we go</h1>
+<div style="display:grid;grid-template-columns:1fr 330px;gap:48px;flex:1;margin-top:22px;">
+<div style="position:relative;border:3px dashed var(--deck-ink);border-radius:22px 16px 26px 14px;padding:18px 22px 22px;transform:rotate(-0.8deg);">
+<h3 style="${hand}margin:0;font-size:40px;font-weight:700;line-height:1;">Parking lot</h3>
+<p style="margin:4px 0 26px;font-size:16px;line-height:1.4;color:var(--deck-muted);">Good ideas we did not have time for today.</p>
+<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:18px;">
+${sticky("peach", -3, `<span style="${hand}font-size:28px;line-height:1.05;font-weight:700;">Pricing page confusion</span>`, "height:196px;box-sizing:border-box;padding:16px 12px 12px;")}
+${sticky("surface", 2.5, `<span style="${hand}font-size:28px;line-height:1.05;font-weight:700;">Mobile onboarding</span>`, "height:196px;box-sizing:border-box;padding:16px 12px 12px;margin-top:16px;")}
+${sticky("mint", -1.5, `<span style="${hand}font-size:28px;line-height:1.05;font-weight:700;">Ask sales what they hear</span>`, "height:196px;box-sizing:border-box;padding:16px 12px 12px;")}
+</div>
+</div>
+<div style="display:flex;flex-direction:column;gap:18px;">
+<h3 style="${hand}margin:0;font-size:40px;font-weight:700;line-height:1;color:var(--deck-accent);">Next steps</h3>
+${todo("Share the photos of the wall", "Name Surname, today", true)}
+${todo("Turn the top three votes into briefs", "Name Surname, by Friday")}
+${todo("Book a follow-up in two weeks", "Name Surname")}
+</div>
+</div>`,
+      ),
+      notes:
+        "Close by reading each next step with its owner and date, and confirm when the parking lot will be revisited. Replace the examples with what your group decided.",
+    },
+  ],
+);

package/corpus/templates/slides-2/server/lib/deck-templates/b-keynote.ts

@@ -0,0 +1,131 @@
+import { bDeck, bRoot, tint } from "./b-shared.js";
+
+const C = {
+  bg: "#050507", // guard:allow-raw-color — authored slide palette, not app chrome.
+  ink: "#F4F4F6", // guard:allow-raw-color — authored slide palette, not app chrome.
+  muted: "#9A9AA6", // guard:allow-raw-color — authored slide palette, not app chrome.
+  surface: "#111117", // guard:allow-raw-color — authored slide palette, not app chrome.
+  violet: "#7B5CFF", // guard:allow-raw-color — authored slide palette, not app chrome.
+  magenta: "#FF4F9E", // guard:allow-raw-color — authored slide palette, not app chrome.
+  amber: "#FFB45C", // guard:allow-raw-color — authored slide palette, not app chrome.
+};
+
+const TOKENS = `--deck-bg:${C.bg};--deck-ink:${C.ink};--deck-muted:${C.muted};--deck-accent:${C.violet};--deck-surface:${C.surface};--deck-heading-font:'Syne',sans-serif;--deck-body-font:'Geist',sans-serif;--deck-radius:28px;font-family:'Geist',sans-serif;`;
+
+const slide = (style: string, body: string) =>
+  bRoot(TOKENS, `clip-path:inset(0);${style}`, body);
+
+const H1 = `margin:0;font-family:'Syne',sans-serif;font-weight:700;color:var(--deck-ink);letter-spacing:-0.04em;`;
+const SOFT = tint(C.ink, 70);
+const LABEL = `font-size:14px;font-weight:500;letter-spacing:0.28em;text-transform:uppercase;color:var(--deck-muted);`;
+
+const horizon = (color: string) =>
+  `<div style="position:absolute;left:0;right:0;bottom:92px;height:1px;background:linear-gradient(90deg,transparent,${tint(color, 90)} 50%,transparent);"></div>`;
+
+const feature = (mark: string, title: string, body: string) => `
+  <div style="display:flex;flex-direction:column;gap:14px;padding-top:26px;border-top:1px solid ${tint(C.ink, 18)};">
+    ${mark}
+    <h2 style="margin:0;font-family:var(--deck-heading-font);font-weight:700;font-size:28px;line-height:1.05;letter-spacing:-0.03em;color:var(--deck-ink);">${title}</h2>
+    <p style="margin:0;font-size:17px;line-height:1.5;color:var(--deck-muted);">${body}</p>
+  </div>`;
+
+const spec = (value: string, unit: string, label: string) => `
+  <div style="display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:16px 0;border-bottom:1px solid ${tint(C.ink, 14)};">
+    <span style="font-family:var(--deck-heading-font);font-weight:700;font-size:42px;letter-spacing:-0.04em;color:var(--deck-ink);">${value}<span style="font-size:22px;color:var(--deck-muted);letter-spacing:-0.01em;"> ${unit}</span></span>
+    <span style="font-size:17px;color:var(--deck-muted);text-align:right;">${label}</span>
+  </div>`;
+
+export const KEYNOTE_DECK = bDeck(
+  "starter-keynote",
+  "Launch Keynote",
+  "keynote",
+  "A cinematic product launch: near-black stage, one luminous glow per slide, and enormous type that lands one idea at a time.",
+  [
+    [
+      "title",
+      slide(
+        `padding:72px 80px;align-items:center;justify-content:center;text-align:center;gap:26px;background:radial-gradient(70% 64% at 50% 122%,${C.violet} 0%,${tint(C.magenta, 55)} 40%,transparent 74%),radial-gradient(30% 22% at 50% 104%,${C.amber},transparent 80%),var(--deck-bg);`,
+        `${horizon(C.amber)}
+        <h1 style="${H1}font-size:112px;line-height:0.9;white-space:nowrap;">Meet Lumen.</h1>
+        <p style="margin:0;max-width:540px;font-size:22px;line-height:1.45;color:${SOFT};">The shortest path from a first idea to a finished thing. Replace this line with your one-sentence promise.</p>
+        <span style="position:absolute;left:0;right:0;bottom:40px;${LABEL}">Sample launch event · Month 00, 2026</span>`,
+      ),
+      "Open in silence and let the glow do the work. Replace the product name and the promise line with your own, then say the promise out loud exactly as written. The date line is a placeholder; set it to the real event date.",
+    ],
+    [
+      "statement",
+      slide(
+        `padding:80px;justify-content:flex-end;gap:28px;background:radial-gradient(55% 85% at 94% -14%,${C.violet} 0%,${tint(C.magenta, 35)} 46%,transparent 74%),var(--deck-bg);`,
+        `<h1 style="${H1}font-size:92px;line-height:0.95;max-width:780px;">Great work shouldn't <span style="color:var(--deck-muted);">wait on its tools.</span></h1>
+        <p style="margin:0;max-width:520px;font-size:21px;line-height:1.5;color:${SOFT};">For years the process got in the way of the product. Name the tension your audience already feels before you show them the answer.</p>`,
+      ),
+      "This is the problem beat. Keep it to one sentence and one breath. Swap in the frustration your audience recognizes; the muted half of the headline should be the part they nod at.",
+    ],
+    [
+      "statement",
+      slide(
+        `padding:64px 80px;align-items:center;justify-content:center;text-align:center;gap:6px;background:radial-gradient(34% 44% at 50% 44%,${tint(C.violet, 70)} 0%,${tint(C.magenta, 18)} 55%,transparent 78%),var(--deck-bg);`,
+        `<span style="font-family:var(--deck-heading-font);font-weight:700;font-size:210px;line-height:0.86;letter-spacing:-0.05em;color:var(--deck-ink);">00×</span>
+        <h1 style="${H1}font-size:44px;line-height:1.1;margin-top:18px;">faster, from first draft to final.</h1>
+        <p style="margin:12px 0 0;font-size:16px;line-height:1.5;color:var(--deck-muted);">Sample benchmark. Replace with a measured result and cite its source.</p>`,
+      ),
+      "The reveal. Click to this slide, pause, and let the number sit before you read the line under it. The 00× figure is a placeholder: only use a number you can source, and name the comparison and test conditions if asked.",
+    ],
+    [
+      "content",
+      slide(
+        `padding:72px 80px 64px;justify-content:space-between;background:radial-gradient(40% 50% at 8% -6%,${tint(C.violet, 55)},transparent 70%),var(--deck-bg);`,
+        `<div style="display:flex;justify-content:space-between;align-items:flex-end;gap:40px;">
+          <h1 style="${H1}font-size:64px;line-height:0.98;max-width:520px;">Three ideas. One product.</h1>
+          <p style="margin:0;max-width:280px;font-size:17px;line-height:1.5;color:var(--deck-muted);">Everything else in the launch hangs off these three. Keep each to a single line.</p>
+        </div>
+        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:40px;">
+          ${feature(`<div style="width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 35%,${C.ink},${C.violet} 55%,transparent 72%);"></div>`, "Instant", "Opens before you finish thinking about it. Describe your fastest moment here.")}
+          ${feature(`<div style="width:36px;height:36px;border-radius:10px;background:conic-gradient(from 200deg,${C.violet},${C.magenta},${C.amber},${C.violet});"></div>`, "Together", "Everyone on the same page, live. Describe how people share and collaborate.")}
+          ${feature(`<div style="box-sizing:border-box;width:36px;height:36px;border-radius:50%;border:2px solid ${C.amber};box-shadow:0 0 18px ${tint(C.amber, 60)};"></div>`, "Private", "Your work stays yours by default. Describe the promise you can keep.")}
+        </div>`,
+      ),
+      "Walk the three pillars left to right, about twenty seconds each. Rename them to your real features; if you have more than three, cut rather than shrink. Each description should be one plain sentence.",
+    ],
+    [
+      "content",
+      slide(
+        `padding:72px 80px 72px 500px;justify-content:center;gap:10px;background:radial-gradient(34% 58% at 26% 50%,${tint(C.violet, 40)},transparent 72%),var(--deck-bg);`,
+        `<div style="position:absolute;left:92px;top:110px;width:320px;height:320px;border-radius:50%;background:conic-gradient(from 210deg,${C.violet},${C.magenta},${C.amber},${C.violet});filter:blur(46px);opacity:0.55;"></div>
+        <div style="position:absolute;left:92px;top:110px;width:320px;height:320px;border-radius:50%;background:conic-gradient(from 210deg,${C.violet},${C.magenta},${C.amber},${C.violet});mask:radial-gradient(circle,transparent 60%,${C.ink} 61%);"></div>
+        <span style="position:absolute;left:92px;top:258px;width:320px;text-align:center;${LABEL}letter-spacing:0.2em;">Product render</span>
+        <h1 style="${H1}font-size:40px;line-height:1.02;margin-bottom:12px;">Built to disappear into your day.</h1>
+        <p style="margin:0 0 8px;font-size:17px;line-height:1.5;color:var(--deck-muted);">Sample specifications. Swap in verified figures before you present.</p>
+        ${spec("00", "hr", "Battery, typical use")}
+        ${spec("0.0", "kg", "Weight")}
+        ${spec("00", "ms", "Response time")}`,
+      ),
+      "The spec beat. Replace the ring with your product render when you have one; keep the three specs your audience asks about most. Every number here is a placeholder, so confirm each with engineering before the event.",
+    ],
+    [
+      "statement",
+      slide(
+        `padding:64px 80px;align-items:center;justify-content:center;text-align:center;gap:18px;background:radial-gradient(30% 22% at 50% 52%,${tint(C.violet, 42)},transparent 75%),var(--deck-bg);`,
+        `<div style="position:absolute;left:479px;top:0;width:2px;height:218px;background:linear-gradient(180deg,transparent,${tint(C.violet, 80)} 55%,${C.ink});box-shadow:0 0 22px 2px ${tint(C.violet, 70)};"></div>
+        <h1 style="${H1}font-size:76px;line-height:1;margin-top:120px;">One more thing.</h1>
+        <p style="margin:0;max-width:460px;font-size:19px;line-height:1.5;color:var(--deck-muted);">The surprise you saved for last. Keep this slide up for a full beat before you speak.</p>`,
+      ),
+      "Pause before you advance to this slide and again after it appears. Say the line, then cut to your reveal. If there is no surprise, delete this slide rather than filling it.",
+    ],
+    [
+      "title",
+      slide(
+        `padding:72px 80px;justify-content:space-between;background:radial-gradient(80% 75% at 0% 120%,${C.amber} 0%,${tint(C.magenta, 60)} 36%,${tint(C.violet, 25)} 58%,transparent 76%),var(--deck-bg);`,
+        `<span style="${LABEL}">Available</span>
+        <div style="display:flex;justify-content:space-between;align-items:flex-end;gap:40px;">
+          <h1 style="${H1}font-size:100px;line-height:0.9;white-space:nowrap;">Month 00.</h1>
+          <div style="flex:none;width:250px;display:flex;flex-direction:column;gap:10px;align-items:flex-end;text-align:right;padding-bottom:10px;">
+            <span style="font-family:var(--deck-heading-font);font-weight:700;font-size:40px;letter-spacing:-0.03em;">From $000</span>
+            <p style="margin:0;font-size:18px;line-height:1.5;color:${SOFT};">Pre-orders open today at yourproduct.example</p>
+          </div>
+        </div>`,
+      ),
+      "Close on the date, the price, and where to go. Read the date slowly. All three are placeholders; confirm availability, pricing, and the link before this slide goes on a stage.",
+    ],
+  ],
+);

package/corpus/templates/slides-2/server/lib/deck-templates/b-lesson.ts

@@ -0,0 +1,209 @@
+import { bDeck, bRoot, tint } from "./b-shared.js";
+
+const C = {
+  cream: "#FFF8EE", // guard:allow-raw-color — authored slide palette, not app chrome.
+  navy: "#1E2650", // guard:allow-raw-color — authored slide palette, not app chrome.
+  muted: "#51587C", // guard:allow-raw-color — authored slide palette, not app chrome.
+  white: "#FFFFFF", // guard:allow-raw-color — authored slide palette, not app chrome.
+  coral: "#EF5B3A", // guard:allow-raw-color — authored slide palette, not app chrome.
+  teal: "#0E9679", // guard:allow-raw-color — authored slide palette, not app chrome.
+  sun: "#FFBC2B", // guard:allow-raw-color — authored slide palette, not app chrome.
+  blue: "#3F5BF2", // guard:allow-raw-color — authored slide palette, not app chrome.
+};
+
+const TOKENS = `--deck-bg:${C.cream};--deck-ink:${C.navy};--deck-muted:${C.muted};--deck-accent:${C.coral};--deck-surface:${C.white};--deck-heading-font:'Lexend',sans-serif;--deck-body-font:'Nunito',sans-serif;--deck-radius:22px;font-family:'Nunito',sans-serif;`;
+
+const TOTAL = 6;
+const H1 = `margin:0;font-family:'Lexend',sans-serif;font-weight:700;color:var(--deck-ink);letter-spacing:-0.03em;`;
+const HEAD = `font-family:var(--deck-heading-font);font-weight:600;letter-spacing:-0.02em;`;
+const CARD = `background:var(--deck-surface);border-radius:var(--deck-radius);box-shadow:0 2px 0 ${tint(C.navy, 8)},0 10px 24px -12px ${tint(C.navy, 25)};`;
+
+const lesson = (
+  n: number,
+  section: string,
+  color: string,
+  style: string,
+  body: string,
+) =>
+  bRoot(
+    TOKENS,
+    `padding:92px 64px 48px;gap:22px;${style}`,
+    `<div style="position:absolute;top:32px;left:64px;right:64px;display:flex;justify-content:space-between;align-items:center;">
+      <span style="display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--deck-ink);"><span style="width:12px;height:12px;border-radius:50%;background:${color};"></span>${section}<span style="color:var(--deck-muted);font-weight:600;">· Lesson 3.2</span></span>
+      <div style="display:flex;gap:6px;">${Array.from({ length: TOTAL }, (_, i) => `<span style="width:28px;height:8px;border-radius:4px;background:${i < n ? color : tint(C.navy, 12)};"></span>`).join("")}</div>
+    </div>
+    ${body}`,
+  );
+
+const badge = (label: string, color: string, size = 40) =>
+  `<span style="flex:none;width:${size}px;height:${size}px;border-radius:50%;background:${color};color:${C.white};display:flex;align-items:center;justify-content:center;${HEAD}font-weight:700;font-size:${Math.round(size * 0.45)}px;">${label}</span>`;
+
+const chip = (label: string, color: string) =>
+  `<span style="display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:var(--deck-surface);border:2px solid ${color};font-size:16px;font-weight:700;white-space:nowrap;"><span style="width:14px;height:14px;border-radius:50%;background:${color};"></span>${label}</span>`;
+
+const arrow = (color: string) =>
+  `<div style="display:flex;align-items:center;width:48px;"><div style="flex:1;height:4px;border-radius:2px;background:${color};"></div><div style="width:14px;height:16px;background:${color};clip-path:polygon(0 0,100% 50%,0 100%);"></div></div>`;
+
+const step = (n: number, color: string, title: string, text: string) => `
+  <div style="${CARD}position:relative;padding:22px 20px;display:flex;flex-direction:column;gap:10px;">
+    ${badge(String(n), color, 44)}
+    <h2 style="margin:4px 0 0;${HEAD}font-size:21px;line-height:1.15;">${title}</h2>
+    <p style="margin:0;font-size:16px;line-height:1.45;color:var(--deck-muted);">${text}</p>
+  </div>`;
+
+const option = (letter: string, text: string, color: string) =>
+  `<div style="${CARD}display:flex;align-items:center;gap:16px;padding:16px 20px;"><span style="flex:none;width:44px;height:44px;border-radius:12px;background:${tint(color, 16)};color:${color};display:flex;align-items:center;justify-content:center;${HEAD}font-weight:700;font-size:21px;">${letter}</span><span style="font-size:21px;font-weight:700;">${text}</span></div>`;
+
+const takeaway = (color: string, title: string, text: string) =>
+  `<li style="display:flex;gap:18px;align-items:flex-start;padding:16px 0;border-top:2px dashed ${tint(C.navy, 14)};"><span style="flex:none;width:18px;height:18px;margin-top:4px;border-radius:6px;background:${color};"></span><div><h2 style="margin:0 0 4px;${HEAD}font-size:21px;">${title}</h2><p style="margin:0;font-size:17px;line-height:1.45;color:var(--deck-muted);">${text}</p></div></li>`;
+
+export const LESSON_DECK = bDeck(
+  "starter-lesson",
+  "Course Lesson",
+  "education",
+  "A friendly, readable lesson module: learning objectives, a concept diagram, step-by-step process, a quick quiz, and a recap, color-coded by section.",
+  [
+    [
+      "title",
+      bRoot(
+        TOKENS,
+        `padding:64px;flex-direction:row;align-items:center;gap:40px;`,
+        `<div style="flex:1;display:flex;flex-direction:column;gap:22px;">
+          <span style="align-self:flex-start;padding:8px 14px;border-radius:999px;background:${tint(C.teal, 14)};color:${C.teal};font-size:15px;font-weight:800;">Module 3 · Lesson 2</span>
+          <h1 style="${H1}font-size:56px;line-height:1.04;">How plants turn light into food</h1>
+          <p style="margin:0;max-width:420px;font-size:20px;line-height:1.5;color:var(--deck-muted);">A 20-minute lesson on photosynthesis: what goes in, what comes out, and why it matters to us.</p>
+          <div style="display:flex;gap:10px;font-size:15px;font-weight:700;">
+            <span style="padding:8px 14px;border-radius:12px;background:var(--deck-surface);">20 min</span>
+            <span style="padding:8px 14px;border-radius:12px;background:var(--deck-surface);">3 activities</span>
+            <span style="padding:8px 14px;border-radius:12px;background:var(--deck-surface);">1 quiz</span>
+          </div>
+        </div>
+        <div aria-hidden="true" style="position:relative;width:360px;height:380px;flex:none;">
+          <div style="position:absolute;right:10px;top:0;width:170px;height:170px;border-radius:50%;background:${C.sun};box-shadow:0 0 0 22px ${tint(C.sun, 22)};"></div>
+          <div style="position:absolute;left:20px;top:110px;width:250px;height:220px;border-radius:0 100% 0 100%;background:${C.teal};"></div>
+          <div style="position:absolute;left:44px;top:130px;width:290px;height:4px;border-radius:2px;background:${tint(C.white, 45)};transform:rotate(41deg);transform-origin:left center;"></div>
+          <div style="position:absolute;left:36px;top:300px;width:58px;height:58px;border-radius:50% 0 50% 50%;background:${C.blue};transform:rotate(-45deg);"></div>
+        </div>`,
+      ),
+      "Open with a question before showing this slide: where does a tree's mass come from? Let a few students guess. The topic is an example; replace the title, module number, and timings with your own lesson.",
+    ],
+    [
+      "content",
+      lesson(
+        2,
+        "Goals",
+        C.blue,
+        `flex-direction:row;gap:40px;padding-top:88px;`,
+        `<div style="width:300px;flex:none;border-radius:var(--deck-radius);background:${C.blue};color:${C.white};padding:30px 28px;display:flex;flex-direction:column;justify-content:space-between;">
+          <h1 style="${H1}color:${C.white};font-size:40px;line-height:1.08;">By the end of this lesson, you can…</h1>
+          <p style="margin:0;font-size:17px;line-height:1.45;color:${tint(C.white, 85)};">Check yourself against these at the end. We'll come back to them.</p>
+        </div>
+        <ol style="list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;">
+          ${[
+            ["Name", "the three things a plant needs to make its own food."],
+            ["Explain", "where in the leaf photosynthesis happens."],
+            ["Describe", "what the plant releases, and why we depend on it."],
+          ]
+            .map(
+              ([verb, rest], i) =>
+                `<li style="${CARD}display:flex;align-items:center;gap:18px;padding:18px 22px;">${badge(String(i + 1), C.blue)}<span style="font-size:20px;line-height:1.4;"><b style="${HEAD}font-weight:700;color:${C.blue};">${verb}</b> ${rest}</span></li>`,
+            )
+            .join("")}
+        </ol>`,
+      ),
+      "Read the three objectives aloud and ask students to rate their confidence on each from 1 to 3. Replace them with your own; start each with an observable verb so you can check it at the end.",
+    ],
+    [
+      "content",
+      lesson(
+        3,
+        "Learn",
+        C.teal,
+        ``,
+        `<h1 style="${H1}font-size:38px;line-height:1.1;">Plants are tiny sugar factories</h1>
+        <div style="display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:center;flex:1;">
+          <div style="display:flex;flex-direction:column;gap:16px;">
+            <p style="margin:0;font-size:18px;line-height:1.5;">Inside each leaf, chloroplasts use light energy to turn water and carbon dioxide into sugar.</p>
+            <div style="border-radius:16px;background:${tint(C.teal, 12)};padding:14px 16px;font-size:16px;line-height:1.45;"><b style="color:${C.teal};">Key word:</b>&nbsp;<b>chlorophyll</b> is the green pigment that absorbs the light.</div>
+          </div>
+          <div style="display:flex;align-items:center;justify-content:space-between;">
+            <div style="display:flex;flex-direction:column;gap:12px;">${chip("Sunlight", C.sun)}${chip("Water", C.blue)}${chip("Carbon dioxide", C.muted)}</div>
+            ${arrow(C.navy)}
+            <div style="width:124px;height:116px;border-radius:0 100% 0 100%;background:${C.teal};color:${C.white};display:flex;align-items:center;justify-content:center;${HEAD}font-weight:700;font-size:18px;">Leaf</div>
+            ${arrow(C.navy)}
+            <div style="display:flex;flex-direction:column;gap:12px;">${chip("Glucose", C.coral)}${chip("Oxygen", C.teal)}</div>
+          </div>
+        </div>
+        <div style="border-radius:16px;background:var(--deck-surface);border:2px solid ${tint(C.navy, 10)};padding:14px 20px;display:flex;justify-content:center;gap:14px;align-items:baseline;font-size:19px;font-weight:700;">
+          <span>carbon dioxide + water</span><span style="color:${C.teal};font-size:15px;">— light →</span><span>glucose + oxygen</span>
+        </div>`,
+      ),
+      "Point to each input, then the leaf, then each output. Ask: which of these can we see, and which are invisible? The word equation at the bottom is the one line students should copy down.",
+    ],
+    [
+      "content",
+      lesson(
+        4,
+        "Learn",
+        C.teal,
+        ``,
+        `<div style="display:flex;justify-content:space-between;align-items:flex-end;gap:32px;">
+          <h1 style="${H1}font-size:38px;line-height:1.1;">Step by step, inside the chloroplast</h1>
+          <p style="margin:0;max-width:250px;font-size:16px;line-height:1.45;color:var(--deck-muted);">The same four steps happen in every green leaf, every sunny day.</p>
+        </div>
+        <div style="position:relative;margin:auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch;padding-top:10px;">
+          <div style="position:absolute;left:40px;right:40px;top:54px;height:0;border-top:3px dashed ${tint(C.navy, 22)};"></div>
+          ${step(1, C.sun, "Capture light", "Chlorophyll absorbs sunlight, mostly red and blue light.")}
+          ${step(2, C.blue, "Split water", "That energy splits water, releasing oxygen as a by-product.")}
+          ${step(3, C.teal, "Store energy", "The energy is held briefly in carrier molecules.")}
+          ${step(4, C.coral, "Build sugar", "Carbon dioxide from the air is built into glucose.")}
+        </div>`,
+      ),
+      "Go one card at a time. After step 2, ask where the oxygen we breathe comes from. Keep the colors consistent with the inputs on the previous slide so students can link them.",
+    ],
+    [
+      "content",
+      lesson(
+        5,
+        "Check",
+        C.coral,
+        ``,
+        `<h1 style="${H1}font-size:24px;line-height:1.2;color:${C.coral};">Check your understanding</h1>
+        <p style="margin:-8px 0 4px;font-family:var(--deck-heading-font);font-weight:600;font-size:32px;line-height:1.25;letter-spacing:-0.02em;max-width:760px;">Which gas do plants release into the air during photosynthesis?</p>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
+          ${option("A", "Carbon dioxide", C.blue)}
+          ${option("B", "Oxygen", C.teal)}
+          ${option("C", "Nitrogen", C.sun)}
+          ${option("D", "Hydrogen", C.coral)}
+        </div>
+        <div style="margin-top:auto;display:flex;align-items:center;gap:12px;font-size:17px;color:var(--deck-muted);"><span style="padding:6px 12px;border-radius:999px;background:${tint(C.coral, 14)};color:${C.coral};font-weight:800;font-size:15px;">Hint</span>Think back to step 2. Discuss with a partner for 30 seconds, then vote.</div>`,
+      ),
+      "Answer: B, oxygen. Give 30 seconds of partner talk, then have everyone vote at once with fingers (1 to 4) so nobody copies. If many choose A, revisit the inputs and outputs on slide 3.",
+    ],
+    [
+      "content",
+      lesson(
+        6,
+        "Recap",
+        C.sun,
+        `flex-direction:row;gap:36px;`,
+        `<div style="flex:1;display:flex;flex-direction:column;gap:8px;">
+          <h1 style="${H1}font-size:38px;line-height:1.1;margin-bottom:6px;">Three things to remember</h1>
+          <ul style="list-style:none;margin:0;padding:0;">
+            ${takeaway(C.sun, "Light is the energy source", "Chlorophyll captures it inside the chloroplasts.")}
+            ${takeaway(C.blue, "Water and carbon dioxide go in", "Roots bring water; leaves take in carbon dioxide.")}
+            ${takeaway(C.teal, "Glucose and oxygen come out", "The plant uses the sugar; we breathe the oxygen.")}
+          </ul>
+        </div>
+        <div style="width:270px;flex:none;align-self:stretch;border-radius:var(--deck-radius);background:var(--deck-ink);color:${C.white};padding:26px 24px;display:flex;flex-direction:column;justify-content:space-between;">
+          <div style="display:flex;flex-direction:column;gap:10px;">
+            <span style="font-size:15px;font-weight:800;color:${C.sun};">Next lesson</span>
+            <h2 style="margin:0;${HEAD}font-size:26px;line-height:1.15;">How cells release energy</h2>
+          </div>
+          <div style="border-top:1px solid ${tint(C.white, 25)};padding-top:14px;font-size:16px;line-height:1.45;color:${tint(C.white, 85)};"><b style="color:${C.white};">Before then:</b> find one plant at home and note where it gets its light.</div>
+        </div>`,
+      ),
+      "Ask students to revisit the three objectives from slide 2 and re-rate their confidence. Replace the next-lesson card and the homework prompt with your own sequence.",
+    ],
+  ],
+);