@agent-native/core-corpus 0.213.1 → 0.216.0

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

@@ -0,0 +1,264 @@
+import { authoredDeck, slideRoot } from "./a-shared.js";
+
+// guard:allow-raw-color — authored slide palette, not app chrome.
+const [navy, ink, muted, teal, surface] = [
+  "#0A0F1C", // guard:allow-raw-color
+  "#E6EAF2", // guard:allow-raw-color
+  "#8B96AC", // guard:allow-raw-color
+  "#2DD4BF", // guard:allow-raw-color
+  "#111A2D", // guard:allow-raw-color
+];
+// guard:allow-raw-color — authored data colors, not app chrome.
+const [amber, loss, gridline] = ["#F5B64C", "#F4776F", "#1F2A42"];
+
+const tokens = `--deck-bg:${navy};--deck-ink:${ink};--deck-muted:${muted};--deck-accent:${teal};--deck-surface:${surface};--deck-heading-font:'IBM Plex Sans',sans-serif;--deck-body-font:'IBM Plex Sans',sans-serif;--deck-radius:6px;--qt-amber:${amber};--qt-loss:${loss};--qt-grid:${gridline};`;
+
+const mono = "font-family:'JetBrains Mono',monospace;";
+const h1 =
+  "font-family:'IBM Plex Sans',sans-serif;font-weight:700;letter-spacing:-0.02em;margin:0;";
+const label = `${mono}font-size:14px;letter-spacing:0.04em;text-transform:uppercase;color:var(--deck-muted);`;
+
+const slide = (page: number, body: string) =>
+  slideRoot(
+    tokens,
+    "font-family:'IBM Plex Sans',sans-serif;padding:24px 40px 26px;display:flex;flex-direction:column;",
+    `<div style="${mono}display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--deck-muted);padding-bottom:12px;border-bottom:1px solid var(--qt-grid);"><span style="display:flex;align-items:center;gap:10px;"><span style="width:8px;height:8px;background:var(--deck-accent);"></span><span style="color:var(--deck-ink);">QBR / Q0 20XX</span></span><span>SAMPLE DATA</span><span>0${page} / 06</span></div>${body}`,
+  );
+
+const delta = (value: string, up = true) =>
+  `<span style="${mono}display:inline-block;padding:2px 7px;border-radius:4px;font-size:14px;font-weight:700;background:color-mix(in srgb,${up ? "var(--deck-accent)" : "var(--qt-loss)"} 16%,transparent);color:${up ? "var(--deck-accent)" : "var(--qt-loss)"};">${value}</span>`;
+
+function band(points: readonly number[], w: number, h: number, t: number) {
+  const xy = points.map((v, i) => [(i / (points.length - 1)) * w, h - v * h]);
+  const top = xy.map(
+    ([x, y]) => `${x.toFixed(1)}px ${(y - t / 2).toFixed(1)}px`,
+  );
+  const bottom = xy
+    .reverse()
+    .map(([x, y]) => `${x.toFixed(1)}px ${(y + t / 2).toFixed(1)}px`);
+  return `polygon(${[...top, ...bottom].join(",")})`;
+}
+
+function area(points: readonly number[], w: number, h: number) {
+  const xy = points.map(
+    (v, i) =>
+      `${((i / (points.length - 1)) * w).toFixed(1)}px ${(h - v * h).toFixed(1)}px`,
+  );
+  return `polygon(0px ${h}px,${xy.join(",")},${w}px ${h}px)`;
+}
+
+const cover = [0.18, 0.24, 0.22, 0.35, 0.41, 0.52, 0.58, 0.74];
+const actual = [0.42, 0.46, 0.44, 0.55, 0.58, 0.63, 0.61, 0.72];
+const target = [0.5, 0.52, 0.54, 0.56, 0.58, 0.6, 0.62, 0.64];
+
+const kpi = (
+  name: string,
+  value: string,
+  change: string,
+  pct: number,
+  up = true,
+) =>
+  `<div style="background:var(--deck-surface);border:1px solid var(--qt-grid);border-radius:var(--deck-radius);padding:16px 18px;display:flex;flex-direction:column;"><span style="${label}">${name}</span><span style="display:flex;align-items:baseline;justify-content:space-between;margin-top:10px;"><span style="font-size:38px;font-weight:700;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;">${value}</span>${delta(change, up)}</span><span style="position:relative;display:block;height:6px;margin-top:16px;border-radius:3px;background:var(--qt-grid);"><span style="display:block;height:6px;width:${pct}%;border-radius:3px;background:${up ? "var(--deck-accent)" : "var(--qt-loss)"};"></span><span style="position:absolute;left:80%;top:-4px;height:14px;border-left:2px solid var(--qt-amber);"></span></span><span style="${mono}margin-top:8px;font-size:14px;color:var(--deck-muted);">00% of plan</span></div>`;
+
+const months = [
+  [30, 8],
+  [34, 9],
+  [31, 12],
+  [38, 11],
+  [42, 13],
+  [40, 16],
+  [47, 15],
+  [51, 18],
+  [49, 20],
+  [56, 21],
+  [60, 24],
+  [66, 26],
+];
+
+const bars = months
+  .map(
+    ([core, expansion]) =>
+      `<div style="flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;"><span style="height:${expansion}%;background:var(--qt-amber);border-radius:2px 2px 0 0;"></span><span style="height:${core}%;background:var(--deck-accent);"></span></div>`,
+  )
+  .join("");
+
+const monthLabels = months
+  .map((_, i) => `<span style="flex:1;text-align:center;">M${i + 1}</span>`)
+  .join("");
+
+const gridLines = (count: number, labels: readonly string[], gutter = 0) =>
+  Array.from(
+    { length: count },
+    (_, i) =>
+      `<div style="position:absolute;left:0;right:0;top:${(i / (count - 1)) * 100}%;border-top:1px ${i === count - 1 ? "solid" : "dashed"} var(--qt-grid);"><span style="${mono}position:absolute;left:${gutter}px;top:${gutter ? -10 : -20}px;font-size:14px;color:var(--deck-muted);">${labels[i]}</span></div>`,
+  ).join("");
+
+const segment = (
+  name: string,
+  cells: readonly string[],
+  mix: number,
+  total = false,
+) =>
+  `<tr style="border-top:1px solid ${total ? "var(--deck-muted)" : "var(--qt-grid)"};${total ? "font-weight:700;" : ""}"><td style="padding:15px 0;font-size:16px;">${name}</td>${cells.map((c) => `<td style="${mono}padding:15px 0 15px 16px;text-align:right;font-size:15px;color:${c.startsWith("+") ? "var(--deck-accent)" : c.startsWith("-") ? "var(--qt-loss)" : "var(--deck-ink)"};">${c}</td>`).join("")}<td style="padding:15px 0 15px 24px;width:170px;"><span style="display:block;height:10px;border-radius:2px;background:var(--qt-grid);"><span style="display:block;height:10px;width:${mix}%;border-radius:2px;background:${total ? "var(--deck-ink)" : "var(--deck-accent)"};"></span></span></td></tr>`;
+
+const guide = (name: string, lo: number, hi: number, base: number) =>
+  `<div style="display:grid;grid-template-columns:120px 1fr;align-items:center;gap:18px;padding:24px 0 20px;border-top:1px solid var(--qt-grid);"><span style="font-size:16px;font-weight:700;">${name}</span><span style="position:relative;height:36px;"><span style="position:absolute;left:0;right:0;top:12px;border-top:1px dashed var(--qt-grid);"></span><span style="position:absolute;left:${lo}%;width:${hi - lo}%;top:6px;height:12px;border-radius:6px;background:color-mix(in srgb,var(--deck-accent) 28%,transparent);"></span><span style="position:absolute;left:${base}%;top:2px;width:4px;height:20px;margin-left:-2px;border-radius:2px;background:var(--deck-accent);"></span><span style="${mono}position:absolute;left:${lo}%;top:22px;font-size:14px;color:var(--deck-muted);">$00.0M</span><span style="${mono}position:absolute;left:${hi}%;top:22px;transform:translateX(-100%);font-size:14px;color:var(--deck-muted);">$00.0M</span></span></div>`;
+
+export const QUARTERLY_DECK = authoredDeck(
+  "starter-qbr",
+  "Quarterly business review",
+  "quarterly",
+  "A disciplined dark data-terminal review: KPI scorecard, revenue and retention charts, a segment table, and guidance for next quarter.",
+  [
+    {
+      layout: "title",
+      content: slide(
+        1,
+        `<div style="display:grid;grid-template-columns:1fr 420px;gap:36px;flex:1;margin-top:34px;">
+<div style="display:flex;flex-direction:column;">
+<h1 style="${h1}font-size:58px;line-height:1.02;">Q0 20XX<br>business review</h1>
+<p style="margin:16px 0 0;font-size:19px;line-height:1.45;color:var(--deck-muted);max-width:400px;">Results, drivers, and the plan for next quarter, prepared for the leadership team.</p>
+<span style="${mono}margin-top:auto;font-size:14px;color:var(--deck-muted);">Finance / Name Surname / 20XX-00-00</span>
+</div>
+<div style="position:relative;border:1px solid var(--qt-grid);border-radius:var(--deck-radius);background:var(--deck-surface);padding:16px 18px;">
+<div style="display:flex;justify-content:space-between;"><span style="${label}">Revenue, 8 qtrs</span>${delta("+00.0%")}</div>
+<div style="position:relative;height:180px;margin-top:22px;">
+<div style="position:absolute;inset:0;clip-path:${area(cover, 382, 180)};background:linear-gradient(180deg,color-mix(in srgb,var(--deck-accent) 34%,transparent),transparent);"></div>
+<div style="position:absolute;inset:0;clip-path:${band(cover, 382, 180, 3)};background:var(--deck-accent);"></div>
+<span style="position:absolute;right:-6px;top:${180 - 0.74 * 180 - 6}px;width:12px;height:12px;border-radius:50%;background:var(--deck-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--deck-accent) 25%,transparent);"></span>
+</div>
+<div style="${mono}display:flex;justify-content:space-between;margin-top:10px;font-size:14px;color:var(--deck-muted);"><span>Q0-7</span><span style="color:var(--deck-ink);font-weight:700;">$00.0M</span></div>
+</div>
+</div>
+<div style="display:grid;grid-template-columns:repeat(4,1fr);margin-top:22px;border-top:1px solid var(--qt-grid);">
+<div style="padding:14px 16px 0 0;"><span style="${label}">Revenue</span><span style="display:flex;align-items:baseline;gap:10px;margin-top:6px;"><span style="font-size:26px;font-weight:700;">$00.0M</span>${delta("+0.0%")}</span></div>
+<div style="padding:14px 16px 0;border-left:1px solid var(--qt-grid);"><span style="${label}">Gross margin</span><span style="display:flex;align-items:baseline;gap:10px;margin-top:6px;"><span style="font-size:26px;font-weight:700;">00.0%</span>${delta("+0.0pt")}</span></div>
+<div style="padding:14px 16px 0;border-left:1px solid var(--qt-grid);"><span style="${label}">Net retention</span><span style="display:flex;align-items:baseline;gap:10px;margin-top:6px;"><span style="font-size:26px;font-weight:700;">000%</span>${delta("-0.0pt", false)}</span></div>
+<div style="padding:14px 0 0 16px;border-left:1px solid var(--qt-grid);"><span style="${label}">Customers</span><span style="display:flex;align-items:baseline;gap:10px;margin-top:6px;"><span style="font-size:26px;font-weight:700;">0,000</span>${delta("+000")}</span></div>
+</div>`,
+      ),
+      notes:
+        "Open with the four headline numbers, then say in one sentence whether the quarter beat plan. Every figure and chart shape is sample data; replace them from your finance system before presenting.",
+    },
+    {
+      layout: "content",
+      content: slide(
+        2,
+        `<div style="display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:22px;">
+<h1 style="${h1}font-size:36px;line-height:1.05;">Scorecard</h1>
+<p style="margin:0;font-size:16px;line-height:1.45;color:var(--deck-muted);max-width:430px;">Five of six metrics finished ahead of plan. The amber tick marks the plan for each metric.</p>
+</div>
+<div style="display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:14px;flex:1;margin-top:20px;">
+${kpi("Revenue", "$00.0M", "+0.0%", 92)}
+${kpi("Annual recurring", "$00.0M", "+0.0%", 88)}
+${kpi("Gross margin", "00.0%", "+0.0pt", 84)}
+${kpi("Net retention", "000%", "-0.0pt", 71, false)}
+${kpi("New customers", "000", "+00", 96)}
+${kpi("Burn multiple", "0.0x", "+0.0x", 82)}
+</div>`,
+      ),
+      notes:
+        "Scan the grid left to right and call out the one metric that missed. Replace every value, delta, and bar with actuals; keep the plan marker at each metric's real target.",
+    },
+    {
+      layout: "content",
+      // guard:allow-unscoped — static sample HTML mentions “from teams”; this template contains no database query
+      content: slide(
+        3,
+        `<div style="display:grid;grid-template-columns:1fr 250px;gap:32px;flex:1;margin-top:22px;">
+<div style="display:flex;flex-direction:column;">
+<h1 style="${h1}font-size:32px;line-height:1.05;">Revenue by month</h1>
+<div style="display:flex;gap:18px;margin-top:10px;font-size:14px;color:var(--deck-muted);"><span style="display:flex;align-items:center;gap:8px;"><span style="width:10px;height:10px;background:var(--deck-accent);"></span>Core subscriptions</span><span style="display:flex;align-items:center;gap:8px;"><span style="width:10px;height:10px;background:var(--qt-amber);"></span>Expansion</span></div>
+<div style="position:relative;height:270px;margin-top:34px;">
+${gridLines(4, ["$0.0M", "$0.0M", "$0.0M", "$0"])}
+<div style="position:absolute;left:64px;right:0;top:0;bottom:0;display:flex;gap:10px;">${bars}</div>
+<div style="${mono}position:absolute;left:calc(64px + (100% - 64px) * 0.75 + 4px);right:0;top:-24px;padding-top:4px;border-top:1px solid var(--deck-ink);font-size:14px;text-align:center;">THIS QUARTER</div>
+</div>
+<div style="${mono}display:flex;gap:10px;margin:8px 0 0 64px;font-size:14px;color:var(--deck-muted);">${monthLabels}</div>
+</div>
+<div style="border-left:1px solid var(--qt-grid);padding-left:24px;display:flex;flex-direction:column;gap:18px;">
+<span style="${label}">What drove it</span>
+<div><h3 style="margin:0 0 4px;font-size:17px;font-weight:700;">Annual upgrades</h3><p style="margin:0;font-size:15px;line-height:1.45;color:var(--deck-muted);">Most expansion came from teams moving to annual plans in M10 to M12.</p></div>
+<div><h3 style="margin:0 0 4px;font-size:17px;font-weight:700;">Price change</h3><p style="margin:0;font-size:15px;line-height:1.45;color:var(--deck-muted);">New list prices applied to new customers from M7.</p></div>
+<div><h3 style="margin:0 0 4px;font-size:17px;font-weight:700;">Seasonality</h3><p style="margin:0;font-size:15px;line-height:1.45;color:var(--deck-muted);">M6 dipped with the usual mid-year slowdown.</p></div>
+</div>
+</div>`,
+      ),
+      notes:
+        "Walk the chart from left to right, then land on the three drivers. The bars are illustrative shapes; rebuild them from your monthly revenue, and relabel months to match your fiscal calendar.",
+    },
+    {
+      layout: "content",
+      content: slide(
+        4,
+        `<div style="display:grid;grid-template-columns:1fr 240px;gap:32px;flex:1;margin-top:22px;">
+<div style="display:flex;flex-direction:column;">
+<h1 style="${h1}font-size:32px;line-height:1.05;">Net retention against target</h1>
+<div style="display:flex;gap:18px;margin-top:10px;font-size:14px;color:var(--deck-muted);"><span style="display:flex;align-items:center;gap:8px;"><span style="width:16px;height:3px;background:var(--deck-accent);"></span>Actual</span><span style="display:flex;align-items:center;gap:8px;"><span style="width:16px;border-top:2px dashed var(--qt-amber);"></span>Target</span></div>
+<div style="position:relative;height:250px;margin-top:30px;margin-left:56px;">
+${gridLines(5, ["000%", "000%", "000%", "000%", "00%"], -56)}
+<div style="position:absolute;inset:0;clip-path:${area(actual, 574, 250)};background:linear-gradient(180deg,color-mix(in srgb,var(--deck-accent) 22%,transparent),transparent);"></div>
+<div style="position:absolute;inset:0;clip-path:${band(target, 574, 250, 2.5)};background:repeating-linear-gradient(90deg,var(--qt-amber) 0 9px,transparent 9px 15px);"></div>
+<div style="position:absolute;inset:0;clip-path:${band(actual, 574, 250, 3)};background:var(--deck-accent);"></div>
+<span style="position:absolute;right:-6px;top:${250 - 0.72 * 250 - 6}px;width:12px;height:12px;border-radius:50%;background:var(--deck-accent);"></span>
+<div style="${mono}position:absolute;left:0;right:0;bottom:-28px;display:flex;justify-content:space-between;font-size:14px;color:var(--deck-muted);"><span>Q0-7</span><span>Q0-6</span><span>Q0-5</span><span>Q0-4</span><span>Q0-3</span><span>Q0-2</span><span>Q0-1</span><span>Q0</span></div>
+</div>
+</div>
+<div style="border-left:1px solid var(--qt-grid);padding-left:24px;display:flex;flex-direction:column;gap:22px;">
+<div><span style="${label}">This quarter</span><span style="display:block;margin-top:6px;font-size:40px;font-weight:700;letter-spacing:-0.02em;">000%</span>${delta("+0.0pt vs target")}</div>
+<div><span style="${label}">Gross churn</span><span style="display:block;margin-top:6px;font-size:40px;font-weight:700;letter-spacing:-0.02em;">0.0%</span>${delta("-0.0pt QoQ", false)}</div>
+<p style="margin:auto 0 0;font-size:15px;line-height:1.45;color:var(--deck-muted);">Retention crossed target in Q0-1 after the onboarding changes shipped.</p>
+</div>
+</div>`,
+      ),
+      notes:
+        "Point to where the actual line crosses the target and explain what changed. Both series are sample shapes; regenerate them from your cohort data and keep the target line honest.",
+    },
+    {
+      layout: "content",
+      content: slide(
+        5,
+        `<div style="display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:22px;">
+<h1 style="${h1}font-size:32px;line-height:1.05;">Performance by segment</h1>
+<p style="margin:0;font-size:15px;line-height:1.45;color:var(--deck-muted);max-width:380px;">Mid-market carried the quarter; self-serve contracted as we raised prices.</p>
+</div>
+<table style="width:100%;border-collapse:collapse;margin-top:22px;">
+<thead><tr style="${label}"><th style="text-align:left;font-weight:400;padding:0 0 10px;">Segment</th><th style="text-align:right;font-weight:400;padding:0 0 10px 16px;">Revenue</th><th style="text-align:right;font-weight:400;padding:0 0 10px 16px;">QoQ</th><th style="text-align:right;font-weight:400;padding:0 0 10px 16px;">YoY</th><th style="text-align:right;font-weight:400;padding:0 0 10px 16px;">Margin</th><th style="text-align:left;font-weight:400;padding:0 0 10px 24px;">Mix</th></tr></thead>
+<tbody>
+${segment("Enterprise", ["$00.0M", "+0.0%", "+00.0%", "00.0%"], 38)}
+${segment("Mid-market", ["$00.0M", "+0.0%", "+00.0%", "00.0%"], 31)}
+${segment("Small business", ["$0.0M", "+0.0%", "+0.0%", "00.0%"], 17)}
+${segment("Self-serve", ["$0.0M", "-0.0%", "-0.0%", "00.0%"], 9)}
+${segment("Partners", ["$0.0M", "+0.0%", "+00.0%", "00.0%"], 5)}
+${segment("Total", ["$00.0M", "+0.0%", "+00.0%", "00.0%"], 100, true)}
+</tbody></table>`,
+      ),
+      notes:
+        "Read the total row first, then explain the one segment that moved against the trend. All figures are placeholders; paste your segment actuals and recompute the mix bars.",
+    },
+    {
+      layout: "content",
+      content: slide(
+        6,
+        `<div style="display:grid;grid-template-columns:1fr 300px;gap:36px;flex:1;margin-top:22px;">
+<div style="display:flex;flex-direction:column;">
+<h1 style="${h1}font-size:32px;line-height:1.05;">Guidance for Q0 + 1</h1>
+<p style="margin:10px 0 18px;font-size:15px;line-height:1.45;color:var(--deck-muted);">Ranges show low and high cases; the bright marker is the base case we plan against.</p>
+${guide("Revenue", 18, 72, 50)}
+${guide("Gross margin", 34, 80, 60)}
+${guide("Operating cost", 22, 58, 40)}
+<span style="${mono}margin-top:auto;font-size:14px;color:var(--deck-muted);">Sample ranges. Replace with your finance model.</span>
+</div>
+<div style="align-self:start;margin-top:52px;background:var(--deck-surface);border:1px solid var(--qt-grid);border-radius:var(--deck-radius);padding:18px 20px;display:flex;flex-direction:column;gap:16px;">
+<span style="${label}">Priorities</span>
+<div style="display:grid;grid-template-columns:28px 1fr;gap:8px;"><span style="${mono}font-size:14px;color:var(--qt-amber);">P1</span><span style="font-size:16px;line-height:1.4;">Lift net retention above target in every segment</span></div>
+<div style="display:grid;grid-template-columns:28px 1fr;gap:8px;"><span style="${mono}font-size:14px;color:var(--qt-amber);">P2</span><span style="font-size:16px;line-height:1.4;">Launch annual plans for small business</span></div>
+<div style="display:grid;grid-template-columns:28px 1fr;gap:8px;"><span style="${mono}font-size:14px;color:var(--qt-amber);">P3</span><span style="font-size:16px;line-height:1.4;">Hold operating cost growth below revenue growth</span></div>
+</div>
+</div>`,
+      ),
+      notes:
+        "Frame the ranges as the conditions for each case, not predictions. Replace the ranges and base-case markers with your finance model, and name an owner for each priority.",
+    },
+  ],
+);

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

@@ -0,0 +1,35 @@
+import type {
+  DeckTemplate,
+  DeckTemplateCategory,
+  DeckTemplateSlide,
+} from "../deck-templates.js";
+
+export type AuthoredSlide = Omit<DeckTemplateSlide, "id">;
+
+export function authoredDeck(
+  id: string,
+  title: string,
+  category: DeckTemplateCategory,
+  description: string,
+  slides: readonly AuthoredSlide[],
+): DeckTemplate {
+  return {
+    id,
+    title,
+    description,
+    category,
+    aspectRatio: "16:9",
+    width: 960,
+    height: 540,
+    isBuiltIn: true,
+    version: 1,
+    slides: slides.map((slide, index) => ({
+      id: `${id}-${index + 1}`,
+      ...slide,
+    })),
+  };
+}
+
+export function slideRoot(tokens: string, style: string, body: string): string {
+  return `<div class="fmd-slide" style="${tokens}width:960px;height:540px;box-sizing:border-box;padding:0;display:flex;flex-direction:column;position:relative;clip-path:inset(0);background:var(--deck-bg);color:var(--deck-ink);"><div style="position:relative;flex:1;min-height:0;box-sizing:border-box;${style}">${body}</div></div>`;
+}

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

@@ -0,0 +1,188 @@
+import { authoredDeck, slideRoot } from "./a-shared.js";
+
+// guard:allow-raw-color — authored slide palette, not app chrome.
+const [bg, ink, muted, accent, surface, line] = [
+  "#FAFAF9", // guard:allow-raw-color
+  "#17171C", // guard:allow-raw-color
+  "#686874", // guard:allow-raw-color
+  "#4655D4", // guard:allow-raw-color
+  "#F1F1F3", // guard:allow-raw-color
+  "#E2E2E7", // guard:allow-raw-color
+];
+// guard:allow-raw-color — authored status colors, not app chrome.
+const [ok, warn, risk] = ["#16774A", "#94600F", "#B53333"];
+
+const tokens = `--deck-bg:${bg};--deck-ink:${ink};--deck-muted:${muted};--deck-accent:${accent};--deck-surface:${surface};--deck-heading-font:'Geist',sans-serif;--deck-body-font:'Geist',sans-serif;--deck-radius:10px;--up-line:${line};--up-ok:${ok};--up-warn:${warn};--up-risk:${risk};`;
+
+const mono = "font-family:'Geist Mono',monospace;";
+const h1 =
+  "font-family:'Geist',sans-serif;font-weight:600;letter-spacing:-0.035em;margin:0;";
+
+const slide = (page: number, body: string) =>
+  slideRoot(
+    tokens,
+    "font-family:'Geist',sans-serif;padding:30px 44px 28px;display:flex;flex-direction:column;",
+    `<div style="display:flex;align-items:center;justify-content:space-between;font-size:14px;padding-bottom:14px;border-bottom:1px solid var(--up-line);"><span style="display:flex;align-items:center;gap:10px;"><span style="width:14px;height:14px;border-radius:4px;background:var(--deck-accent);"></span><span style="font-weight:600;">Platform team</span><span style="color:var(--deck-muted);">Weekly readout</span></span><span style="${mono}color:var(--deck-muted);">WK 00 · 20XX-00-00 · ${page}/5</span></div>${body}`,
+  );
+
+const chip = (tone: "ok" | "warn" | "risk" | "idle", label: string) => {
+  const color = tone === "idle" ? "var(--deck-muted)" : `var(--up-${tone})`;
+  return `<span style="display:inline-flex;align-self:flex-start;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font-size:14px;font-weight:500;white-space:nowrap;background:color-mix(in srgb,${color} 11%,transparent);color:${color};"><span style="width:6px;height:6px;border-radius:50%;background:currentColor;"></span>${label}</span>`;
+};
+
+const avatar = (initials: string) =>
+  `<span style="display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--deck-surface);border:1px solid var(--up-line);font-size:14px;font-weight:600;letter-spacing:-0.02em;margin-right:8px;">${initials}</span>`;
+
+const row = (
+  id: string,
+  change: string,
+  owner: string,
+  status: string,
+  note: string,
+) =>
+  `<tr style="border-top:1px solid var(--up-line);"><td style="${mono}padding:15px 12px 11px 0;color:var(--deck-muted);">${id}</td><td style="padding:15px 12px;font-weight:500;">${change}</td><td style="padding:15px 12px;white-space:nowrap;">${avatar(owner)}</td><td style="padding:15px 12px;">${status}</td><td style="padding:15px 0 11px 12px;color:var(--deck-muted);">${note}</td></tr>`;
+
+const bar = (label: string, pct: number, tone: string, value: string) =>
+  `<div style="display:grid;grid-template-columns:132px 1fr 44px;align-items:center;gap:12px;font-size:15px;"><span>${label}</span><span style="height:8px;border-radius:4px;background:var(--deck-surface);"><span style="display:block;height:8px;width:${pct}%;border-radius:4px;background:${tone};"></span></span><span style="${mono}text-align:right;color:var(--deck-muted);">${value}</span></div>`;
+
+const weeks = [18, 26, 31, 40, 46, 52, 61, 67, 0, 0, 0, 0]
+  .map((h, i) =>
+    h
+      ? `<span style="flex:1;height:${h + 22}%;border-radius:3px 3px 0 0;background:var(--deck-accent);opacity:${i === 7 ? 1 : 0.55};"></span>`
+      : `<span style="flex:1;height:${90 + 3 * (i - 8)}%;border-radius:3px 3px 0 0;border:1px dashed var(--up-line);border-bottom:none;"></span>`,
+  )
+  .join("");
+
+const gantt = (
+  label: string,
+  start: number,
+  span: number,
+  tone: string,
+  text: string,
+) =>
+  `<div style="display:grid;grid-template-columns:150px repeat(6,1fr);align-items:center;height:54px;border-top:1px solid var(--up-line);font-size:15px;"><span style="font-weight:500;">${label}</span><span style="grid-column:${start + 1}/span ${span};height:28px;margin:0 3px;border-radius:6px;background:${tone};display:flex;align-items:center;padding:0 10px;font-size:14px;white-space:nowrap;">${text}</span></div>`;
+
+export const UPDATE_DECK = authoredDeck(
+  "starter-product-readout",
+  "Product team readout",
+  "update",
+  "A quiet, precise weekly readout: status at a glance, a shipped table, a progress chart, open decisions, and the next six weeks.",
+  [
+    {
+      layout: "title",
+      content: slide(
+        1,
+        `<h1 style="${h1}margin-top:72px;font-size:58px;line-height:1.02;">Platform readout,<br>week 00</h1>
+<p style="margin:16px 0 0;font-size:20px;line-height:1.45;color:var(--deck-muted);max-width:560px;">What shipped, what moved, and the two decisions we need from this room.</p>
+<div style="margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr) 1.5fr;border:1px solid var(--up-line);border-radius:var(--deck-radius);background:var(--deck-bg);">
+<div style="padding:16px 18px;">${chip("ok", "Shipped")}<span style="display:block;margin-top:12px;font-size:36px;font-weight:600;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;">00</span><span style="font-size:14px;color:var(--deck-muted);">items this cycle</span></div>
+<div style="padding:16px 18px;border-left:1px solid var(--up-line);">${chip("warn", "In progress")}<span style="display:block;margin-top:12px;font-size:36px;font-weight:600;letter-spacing:-0.03em;">00</span><span style="font-size:14px;color:var(--deck-muted);">carried forward</span></div>
+<div style="padding:16px 18px;border-left:1px solid var(--up-line);">${chip("risk", "At risk")}<span style="display:block;margin-top:12px;font-size:36px;font-weight:600;letter-spacing:-0.03em;">0</span><span style="font-size:14px;color:var(--deck-muted);">need a decision</span></div>
+<div style="padding:16px 18px;border-left:1px solid var(--up-line);display:flex;flex-direction:column;"><span style="font-size:14px;font-weight:500;">Quarter goal</span><span style="display:flex;align-items:baseline;gap:8px;margin-top:14px;"><span style="font-size:36px;font-weight:600;letter-spacing:-0.03em;">00%</span><span style="font-size:14px;color:var(--deck-muted);">of Q0 scope complete</span></span><span style="margin-top:auto;height:8px;border-radius:4px;background:var(--deck-surface);"><span style="display:block;width:62%;height:8px;border-radius:4px;background:var(--deck-accent);"></span></span></div>
+</div>`,
+      ),
+      notes:
+        "Give the headline in one sentence: what shipped and what you need. The counts are placeholders; fill them from your tracker before the meeting and keep the at-risk number honest.",
+    },
+    {
+      layout: "content",
+      content: slide(
+        2,
+        `<div style="display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-top:28px;">
+<h1 style="${h1}font-size:36px;line-height:1.05;">Shipped this cycle</h1>
+<p style="margin:0;font-size:16px;line-height:1.45;color:var(--deck-muted);max-width:360px;">Five changes reached production. Two need a small follow-up next week.</p>
+</div>
+<table style="margin-top:22px;width:100%;border-collapse:collapse;font-size:15px;line-height:1.3;">
+<thead><tr style="text-align:left;font-size:14px;color:var(--deck-muted);"><th style="font-weight:500;padding:0 12px 10px 0;width:92px;">ID</th><th style="font-weight:500;padding:0 12px 10px;">Change</th><th style="font-weight:500;padding:0 12px 10px;width:60px;">Owner</th><th style="font-weight:500;padding:0 12px 10px;width:140px;">Status</th><th style="font-weight:500;padding:0 0 10px 12px;width:210px;">Note</th></tr></thead>
+<tbody>
+${row("PLT-000", "Faster search indexing", "AB", chip("ok", "Shipped"), "Sample: p95 down 00%")}
+${row("PLT-000", "Single sign-on for workspaces", "CD", chip("ok", "Shipped"), "Rolled out to all plans")}
+${row("PLT-000", "Audit log export", "EF", chip("ok", "Shipped"), "Docs update pending")}
+${row("PLT-000", "Usage-based billing meter", "GH", chip("warn", "In progress"), "Behind by one week")}
+${row("PLT-000", "Regional data residency", "IJ", chip("risk", "At risk"), "Blocked on vendor review")}
+</tbody></table>`,
+      ),
+      notes:
+        "Read the table top to bottom and spend your time on the last two rows. Replace IDs, owners, and notes with your tracker's data; keep the sample note format short enough to fit one line.",
+    },
+    {
+      layout: "content",
+      content: slide(
+        3,
+        `<div style="display:grid;grid-template-columns:300px 1fr;gap:40px;flex:1;margin-top:28px;">
+<div style="display:flex;flex-direction:column;">
+<h1 style="${h1}font-size:36px;line-height:1.05;">Progress toward the Q0 goal</h1>
+<p style="margin:14px 0 0;font-size:16px;line-height:1.5;color:var(--deck-muted);">Scope burned steadily through week eight. The remaining work is concentrated in billing and residency.</p>
+<div style="margin-top:auto;padding-top:18px;border-top:1px solid var(--up-line);"><span style="display:block;font-size:40px;font-weight:600;letter-spacing:-0.03em;">00 pts</span><span style="font-size:15px;color:var(--deck-muted);">remaining across three workstreams</span></div>
+<div style="margin-top:24px;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--deck-muted);"><span style="display:flex;align-items:center;gap:8px;"><span style="width:10px;height:10px;border-radius:2px;background:var(--deck-accent);"></span>Completed scope, cumulative</span><span style="display:flex;align-items:center;gap:8px;"><span style="width:10px;height:10px;border-radius:2px;border:1px dashed var(--deck-muted);"></span>Planned, not yet started</span></div>
+</div>
+<div style="border:1px solid var(--up-line);border-radius:var(--deck-radius);padding:18px 20px;display:flex;flex-direction:column;">
+<div style="display:flex;justify-content:space-between;font-size:14px;"><span style="font-weight:500;">Cumulative scope by week</span><span style="${mono}color:var(--deck-muted);">W1 to W12</span></div>
+<div style="position:relative;display:flex;align-items:flex-end;gap:8px;height:150px;margin-top:14px;padding-bottom:1px;border-bottom:1px solid var(--up-line);">${weeks}<span style="position:absolute;left:66.6%;top:-6px;bottom:0;border-left:1px dashed var(--deck-ink);"></span><span style="${mono}position:absolute;left:67.6%;top:-8px;font-size:14px;">today</span></div>
+<div style="display:flex;flex-direction:column;gap:12px;margin-top:20px;">
+${bar("Search", 100, "var(--up-ok)", "100%")}
+${bar("Identity", 86, "var(--deck-accent)", "00%")}
+${bar("Billing", 48, "var(--up-warn)", "00%")}
+${bar("Residency", 21, "var(--up-risk)", "00%")}
+</div>
+</div>
+</div>`,
+      ),
+      notes:
+        "Point at the today line first, then the two lagging workstreams. Chart heights and percentages are sample shapes; replace them with your real burn-up before presenting.",
+    },
+    {
+      layout: "content",
+      content: slide(
+        4,
+        `<h1 style="${h1}margin-top:28px;font-size:36px;line-height:1.05;">Two decisions we need today</h1>
+<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px;flex:1;">
+<div style="border:1px solid var(--up-line);border-radius:var(--deck-radius);padding:20px 22px;display:flex;flex-direction:column;">
+${chip("risk", "At risk")}
+<h3 style="margin:14px 0 6px;font-size:20px;font-weight:600;letter-spacing:-0.02em;">Data residency slips past Q0</h3>
+<p style="margin:0;font-size:15px;line-height:1.5;color:var(--deck-muted);">Vendor security review has not started. Without it, the EU region cannot launch this quarter.</p>
+<dl style="display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:16px 0 0;font-size:15px;"><dt style="${mono}color:var(--deck-muted);">Owner</dt><dd style="margin:0;">Name Surname</dd><dt style="${mono}color:var(--deck-muted);">Decide by</dt><dd style="margin:0;">Friday, W1</dd><dt style="${mono}color:var(--deck-muted);">If we wait</dt><dd style="margin:0;">Launch moves a full quarter</dd></dl>
+<div style="margin-top:auto;display:flex;flex-direction:column;gap:8px;font-size:15px;">
+<div style="display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;background:var(--deck-surface);"><span style="${mono}color:var(--deck-muted);">A</span><span>Escalate the review this week</span><span style="font-size:14px;font-weight:500;color:var(--deck-accent);">Recommended</span></div>
+<div style="display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;border:1px solid var(--up-line);"><span style="${mono}color:var(--deck-muted);">B</span><span>Move the launch to Q0 + 1</span><span></span></div>
+</div>
+</div>
+<div style="border:1px solid var(--up-line);border-radius:var(--deck-radius);padding:20px 22px;display:flex;flex-direction:column;">
+${chip("warn", "Needs decision")}
+<h3 style="margin:14px 0 6px;font-size:20px;font-weight:600;letter-spacing:-0.02em;">Billing meter scope</h3>
+<p style="margin:0;font-size:15px;line-height:1.5;color:var(--deck-muted);">Metering every event doubles the work. Metering daily totals ships on time.</p>
+<dl style="display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:16px 0 0;font-size:15px;"><dt style="${mono}color:var(--deck-muted);">Owner</dt><dd style="margin:0;">Name Surname</dd><dt style="${mono}color:var(--deck-muted);">Decide by</dt><dd style="margin:0;">Wednesday, W1</dd><dt style="${mono}color:var(--deck-muted);">If we wait</dt><dd style="margin:0;">Invoices slip two weeks</dd></dl>
+<div style="margin-top:auto;display:flex;flex-direction:column;gap:8px;font-size:15px;">
+<div style="display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;background:var(--deck-surface);"><span style="${mono}color:var(--deck-muted);">A</span><span>Ship daily totals first</span><span style="font-size:14px;font-weight:500;color:var(--deck-accent);">Recommended</span></div>
+<div style="display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;border:1px solid var(--up-line);"><span style="${mono}color:var(--deck-muted);">B</span><span>Hold for per-event metering</span><span></span></div>
+</div>
+</div>
+</div>`,
+      ),
+      notes:
+        "Ask for each decision explicitly and write the answer into the deck before you leave the room. Replace both examples with your real trade-offs, and keep a recommendation on every one.",
+    },
+    {
+      layout: "content",
+      content: slide(
+        5,
+        `<div style="display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-top:28px;">
+<h1 style="${h1}font-size:36px;line-height:1.05;">The next six weeks</h1>
+<p style="margin:0;font-size:16px;line-height:1.45;color:var(--deck-muted);max-width:380px;">Finish billing, unblock residency, and start the reliability track.</p>
+</div>
+<div style="margin-top:24px;position:relative;">
+<div style="${mono}display:grid;grid-template-columns:150px repeat(6,1fr);font-size:14px;color:var(--deck-muted);padding-bottom:8px;"><span></span><span>W1</span><span>W2</span><span>W3</span><span>W4</span><span>W5</span><span>W6</span></div>
+${gantt("Billing", 1, 3, "color-mix(in srgb,var(--up-warn) 16%,transparent)", "Daily totals, then invoices")}
+${gantt("Residency", 2, 4, "color-mix(in srgb,var(--up-risk) 13%,transparent)", "Vendor review and EU region")}
+${gantt("Reliability", 3, 4, "color-mix(in srgb,var(--deck-accent) 14%,transparent)", "On-call and error budgets")}
+${gantt("Search", 1, 2, "var(--deck-surface)", "Tuning and cleanup")}
+${gantt("Identity", 5, 2, "var(--deck-surface)", "SCIM provisioning")}
+<span style="position:absolute;left:calc(150px + (100% - 150px) / 6 * 4);top:26px;bottom:0;border-left:1px dashed var(--deck-ink);"></span>
+</div>
+<div style="margin-top:auto;display:flex;gap:24px;font-size:14px;color:var(--deck-muted);"><span style="display:flex;align-items:center;gap:8px;"><span style="width:14px;border-top:1px dashed var(--deck-ink);"></span>Planned release, end of W4</span><span>Owners and dates are placeholders.</span></div>`,
+      ),
+      notes:
+        "Show the plan as commitments, not wishes: every bar needs an owner. Replace the workstreams and spans with your own schedule, and move the release marker to your real date.",
+    },
+  ],
+);