create-slide-deck 0.1.0

package/template-full/src/reveal/decks/demo-showcase/slides.ts

@@ -0,0 +1,271 @@
+import { blockSlide, reactSlide } from "../../core/layout.ts";
+import type { ComponentName } from "./components/registry.ts";
+import type { Slide } from "../../core/types.ts";
+
+function cover(): Slide {
+  return reactSlide<ComponentName>({
+    title: "",
+    component: "DemoCover",
+    steps: 2,
+    notes: "Demo deck showcasing all available component patterns, libraries, and animation techniques.",
+  });
+}
+
+function forceGraph(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Force-Directed Graph",
+    component: "DemoForceGraph",
+    steps: 3,
+    notes: "d3-force for auto-layout network graphs. Nodes repel, links attract. Drag to interact.",
+  });
+}
+
+function sankeyFlow(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Sankey Flow Diagram",
+    component: "DemoSankey",
+    steps: 2,
+    notes: "d3-sankey for flow/energy diagrams. Width encodes magnitude.",
+  });
+}
+
+function animatedCounter(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Animated Counters",
+    component: "DemoCounter",
+    steps: 3,
+    notes: "animejs number animation, progress bars, and stagger effects.",
+  });
+}
+
+function handDrawn(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Hand-Drawn Style",
+    component: "DemoRough",
+    steps: 3,
+    notes: "roughjs for sketch-style diagrams. Breaks visual monotony.",
+  });
+}
+
+function iconWall(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Icon Showcase",
+    component: "DemoIconWall",
+    steps: 2,
+    notes: "lucide-react icons with stagger wave entrance via animejs.",
+  });
+}
+
+function codeWalkthrough(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Code Walkthrough",
+    component: "DemoCode",
+    steps: 4,
+    notes: "prismjs syntax highlighting with progressive line reveal.",
+  });
+}
+
+function radarChart(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Radar Chart",
+    component: "DemoRadar",
+    steps: 2,
+    notes: "d3-scale + d3-shape for multi-axis comparison.",
+  });
+}
+
+function timeline(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Animated Timeline",
+    component: "DemoTimeline",
+    steps: 5,
+    notes: "SVG timeline with animejs sequential node activation and path drawing.",
+  });
+}
+
+function cardFlip(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Card Flip",
+    component: "DemoCardFlip",
+    steps: 3,
+    notes: "CSS 3D perspective transforms for card flip effect.",
+  });
+}
+
+function mathFormula(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Math Formulas",
+    component: "DemoMath",
+    steps: 3,
+    notes: "KaTeX rendering for academic formulas with progressive reveal.",
+  });
+}
+
+function treemap(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Treemap",
+    component: "DemoTreemap",
+    steps: 2,
+    notes: "d3-hierarchy treemap with stagger zoom entrance.",
+  });
+}
+
+function interactiveTabs(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Interactive Tabs",
+    component: "DemoTabs",
+    steps: 3,
+    notes: "framer-motion layout animation for smooth tab switching.",
+  });
+}
+
+function pathAnimation(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Path Animation",
+    component: "DemoPath",
+    steps: 3,
+    notes: "animejs SVG path tracing, particle motion, and trail effects.",
+  });
+}
+
+function heatmap(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Heatmap Grid",
+    component: "DemoHeatmap",
+    steps: 2,
+    notes: "d3-scale color mapping with animejs wave fill animation.",
+  });
+}
+
+function fullbleedBars(): Slide {
+  return reactSlide<ComponentName>({
+    title: "",
+    component: "DemoFullbleedBars",
+    steps: 2,
+    notes: "Full-bleed horizontal bars — no cards, data IS the content.",
+  });
+}
+
+function dashboard(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Dashboard Layout",
+    component: "DemoDashboard",
+    steps: 2,
+    notes: "Asymmetric 2-column dashboard with chart + metrics.",
+  });
+}
+
+function bigText(): Slide {
+  return reactSlide<ComponentName>({
+    title: "",
+    component: "DemoBigText",
+    steps: 2,
+    notes: "Big typography + whitespace. Less is more.",
+  });
+}
+
+function beforeAfter(): Slide {
+  return reactSlide<ComponentName>({
+    title: "",
+    component: "DemoBeforeAfter",
+    steps: 3,
+    notes: "Before/After split comparison with color contrast.",
+  });
+}
+
+function screenshotAnnotate(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Screenshot + Annotation",
+    component: "DemoScreenshotAnnotate",
+    steps: 3,
+    notes: "Fake terminal screenshot with roughjs hand-drawn annotations.",
+  });
+}
+
+function fullbleedFlow(): Slide {
+  return reactSlide<ComponentName>({
+    title: "",
+    component: "DemoFullbleedFlow",
+    steps: 3,
+    notes: "Full-bleed chevron flow — edge to edge, no margins.",
+  });
+}
+
+function zoomFocus(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Zoom Focus",
+    component: "DemoZoomFocus",
+    steps: 3,
+    notes: "Prezi-like zoom into different regions of a diagram.",
+  });
+}
+
+function chatBubbles(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Chat / Dialogue",
+    component: "DemoChatBubbles",
+    steps: 4,
+    notes: "Conversation-style slide showing interactive dialogue.",
+  });
+}
+
+function stackedCards(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Stacked Cards",
+    component: "DemoStackedCards",
+    steps: 4,
+    notes: "Cards fan out from a stack like playing cards.",
+  });
+}
+
+function conceptMap(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Concept Map",
+    component: "DemoConceptMap",
+    steps: 4,
+    notes: "Mind map with animated branches and connections.",
+  });
+}
+
+function numberMorph(): Slide {
+  return reactSlide<ComponentName>({
+    title: "",
+    component: "DemoNumberMorph",
+    steps: 3,
+    notes: "Dramatic number morphing from old to new value.",
+  });
+}
+
+function arcProgress(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Arc Progress Gauges",
+    component: "DemoArcProgress",
+    steps: 2,
+    notes: "Circular progress indicators with animated fill.",
+  });
+}
+
+function evalMatrix(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Evaluation Matrix",
+    component: "DemoEvalMatrix",
+    steps: 3,
+    notes: "Visual comparison matrix with proportional bars.",
+  });
+}
+
+export function buildSlides(): Slide[] {
+  const builders = [
+    cover, forceGraph, sankeyFlow, animatedCounter, handDrawn,
+    iconWall, codeWalkthrough, radarChart, timeline, cardFlip,
+    mathFormula, treemap, interactiveTabs, pathAnimation, heatmap,
+    fullbleedBars, dashboard, bigText, beforeAfter, screenshotAnnotate, fullbleedFlow,
+    zoomFocus, chatBubbles, stackedCards, conceptMap, numberMorph, arcProgress, evalMatrix,
+  ];
+  const slides = builders.map((b) => b());
+  slides.forEach((slide, i) => {
+    const pageDiv = `\n<div class="page-no">${String(i + 1).padStart(2, "0")}</div>`;
+    if (!slide.html.includes('class="page-no"')) slide.html += pageDiv;
+  });
+  return slides;
+}

package/template-full/src/reveal/decks/fse26-rca/components/aws-cascade.tsx

@@ -0,0 +1,295 @@
+import React from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { findEmptySlot, nodeOccupiedRects } from "../../../components/auto-layout.ts";
+import { NODE, DETAIL, TAG, EDGE, CANVAS, annotationStyle, illustrationStyle, annotationTitleStyle, vis, visExact, SlideCanvas } from "../../../core/presets.ts";
+
+const CASCADE = [
+  { id: "dns",    label: "DNS Race",       sub: "root cause",       color: "#E8912D", bg: "#FFF8F0", col: 0, row: 0, step: 0 },
+  { id: "dynamo", label: "DynamoDB",       sub: "API failure",      color: "#C00000", bg: "#FFF3F3", col: 1, row: 0, step: 1 },
+  { id: "dwfm",   label: "DWFM",          sub: "lease collapse",   color: "#1B556B", bg: "#F2F8FB", col: 2, row: 0, step: 2 },
+  { id: "ec2",    label: "EC2",            sub: "launch failure",   color: "#00A6D6", bg: "#F0F9FD", col: 3, row: 0, step: 3 },
+  { id: "net",    label: "Network Mgr",    sub: "state backlog",    color: "#7B61FF", bg: "#F6F3FF", col: 3, row: 1, step: 4 },
+  { id: "nlb",    label: "NLB",            sub: "health flip-flop", color: "#C00000", bg: "#FFF3F3", col: 2, row: 1, step: 5 },
+  { id: "users",  label: "Users",          sub: "service down",     color: "#900",    bg: "#FFF0F0", col: 1, row: 1, step: 6 },
+];
+
+const ICON_PATHS = {
+  dns: "M12 9v4m0 4h.01M3 12a9 9 0 1 0 18 0 9 9 0 0 0-18 0z",
+  dynamo: "M4 7c0-1.66 3.58-3 8-3s8 1.34 8 3M4 7v10c0 1.66 3.58 3 8 3s8-1.34 8-3V7M4 12c0 1.66 3.58 3 8 3s8-1.34 8-3",
+  dwfm: "M2 5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm0 10a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zM6 7h.01M6 19h.01",
+  ec2: "M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z",
+  net: "M9 2h6v6H9zM1 16h6v6H1zm16 0h6v6h-6zM12 8v4M4 16l8-4 8 4",
+  nlb: "M12 2v4M6.34 6.34l2.83 2.83M2 12h4M18 12h4M17.66 6.34l-2.83 2.83M12 12a4 4 0 1 0 0 .01",
+  users: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75",
+};
+
+const DETAIL_W = DETAIL.width;
+const DETAIL_H = DETAIL.height;
+
+const DETAILS = [
+  { vb: "0 0 130 56",
+    illustration: (
+      <g>
+        <circle cx="22" cy="22" r="16" fill="none" stroke="#E8912D" strokeWidth="2" strokeDasharray="5 3" />
+        <text x="22" y="27" textAnchor="middle" fontSize="14" fill="#E8912D" fontWeight="900">A</text>
+        <circle cx="68" cy="22" r="16" fill="none" stroke="#E8912D" strokeWidth="2" strokeDasharray="5 3" />
+        <text x="68" y="27" textAnchor="middle" fontSize="14" fill="#E8912D" fontWeight="900">B</text>
+        <line x1="38" y1="22" x2="52" y2="22" stroke="#C00000" strokeWidth="3" />
+        <text x="45" y="15" textAnchor="middle" fontSize="16" fill="#C00000" fontWeight="900">!</text>
+        <text x="45" y="46" textAnchor="middle" fontSize="14" fill="#999" fontWeight="700">DNS Enactor</text>
+      </g>
+    ),
+    lines: ["Two DNS Enactors race on the same endpoint"],
+  },
+  { vb: "0 0 170 65",
+    illustration: (
+      <g>
+        <rect x="4" y="2" width="142" height="60" rx="6" fill="none" stroke="#C00000" strokeWidth="2" />
+        <text x="75" y="18" textAnchor="middle" fontSize="14" fill="#999" fontWeight="700">dynamodb.us-east-1</text>
+        <text x="75" y="30" textAnchor="middle" fontSize="14" fill="#bbb" fontWeight="600">.amazonaws.com</text>
+        <line x1="14" y1="36" x2="132" y2="36" stroke="#eee" strokeWidth="1.5" />
+        <text x="75" y="52" textAnchor="middle" fontSize="14" fill="#C00000" fontWeight="900">IPs: (empty)</text>
+        <line x1="40" y1="42" x2="110" y2="56" stroke="#C00000" strokeWidth="2.5" />
+        <line x1="110" y1="42" x2="40" y2="56" stroke="#C00000" strokeWidth="2.5" />
+      </g>
+    ),
+    lines: ["All IPs removed from regional DNS endpoint"],
+  },
+  { vb: "0 0 160 90",
+    illustration: (
+      <g>
+        <rect x="4" y="4" width="28" height="34" rx="3" fill="none" stroke="#1B556B" strokeWidth="2" />
+        <rect x="8" y="10" width="20" height="3" rx="1" fill="#1B556B" opacity="0.3" />
+        <rect x="8" y="16" width="20" height="3" rx="1" fill="#1B556B" opacity="0.3" />
+        <rect x="8" y="22" width="20" height="3" rx="1" fill="#1B556B" opacity="0.3" />
+        <text x="18" y="54" textAnchor="middle" fontSize="14" fill="#999" fontWeight="700">hosts</text>
+        <line x1="36" y1="20" x2="54" y2="20" stroke="#1B556B" strokeWidth="1.5" strokeDasharray="3 2" />
+        <circle cx="80" cy="20" r="14" fill="none" stroke="#C00000" strokeWidth="2" />
+        <line x1="80" y1="10" x2="80" y2="20" stroke="#C00000" strokeWidth="2" />
+        <line x1="80" y1="20" x2="88" y2="25" stroke="#C00000" strokeWidth="2" />
+        <line x1="70" y1="10" x2="90" y2="30" stroke="#C00000" strokeWidth="2.5" />
+        <text x="80" y="54" textAnchor="middle" fontSize="14" fill="#999" fontWeight="700">expired</text>
+      </g>
+    ),
+    lines: ["Leases expire, congestive collapse on recovery"],
+  },
+  { vb: "-10 -6 120 68",
+    illustration: (
+      <g>
+        <path d="M56 30h-32a12 12 0 0 1-1-24 16 16 0 0 1 30 4 10 10 0 0 1-1 20z" fill="none" stroke="#00A6D6" strokeWidth="2" />
+        <line x1="24" y1="12" x2="40" y2="28" stroke="#C00000" strokeWidth="3" />
+        <line x1="40" y1="12" x2="24" y2="28" stroke="#C00000" strokeWidth="3" />
+        <text x="32" y="44" textAnchor="middle" fontSize="14" fill="#999" fontWeight="700">new instances</text>
+      </g>
+    ),
+    lines: ["No available hosts for any new instance launches"],
+  },
+  { vb: "0 0 140 76",
+    illustration: (
+      <g>
+        <rect x="8" y="38" width="14" height="16" rx="2" fill="#7B61FF" opacity="0.2" />
+        <rect x="26" y="28" width="14" height="26" rx="2" fill="#7B61FF" opacity="0.4" />
+        <rect x="44" y="18" width="14" height="36" rx="2" fill="#7B61FF" opacity="0.6" />
+        <rect x="62" y="8" width="14" height="46" rx="2" fill="#7B61FF" opacity="0.8" />
+        <rect x="80" y="2" width="14" height="52" rx="2" fill="#7B61FF" />
+        <line x1="4" y1="56" x2="98" y2="56" stroke="#7B61FF" strokeWidth="2" />
+        <text x="52" y="66" textAnchor="middle" fontSize="14" fill="#999" fontWeight="700">propagation backlog</text>
+      </g>
+    ),
+    lines: ["Network state changes queue faster than processed"],
+  },
+  { vb: "0 0 110 60",
+    illustration: (
+      <g>
+        <circle cx="12" cy="18" r="10" fill="#76B82A" opacity="0.5" />
+        <text x="12" y="22" textAnchor="middle" fontSize="14" fill="white" fontWeight="900">OK</text>
+        <circle cx="38" cy="18" r="10" fill="#C00000" opacity="0.5" />
+        <text x="38" y="22" textAnchor="middle" fontSize="14" fill="white" fontWeight="900">X</text>
+        <circle cx="64" cy="18" r="10" fill="#76B82A" opacity="0.5" />
+        <text x="64" y="22" textAnchor="middle" fontSize="14" fill="white" fontWeight="900">OK</text>
+        <path d="M6 40 L16 34 L26 42 L36 32 L46 42 L56 34 L66 40" fill="none" stroke="#C00000" strokeWidth="2" />
+        <text x="38" y="52" textAnchor="middle" fontSize="14" fill="#999" fontWeight="700">health checks</text>
+      </g>
+    ),
+    lines: ["Health checks flip between healthy and unhealthy"],
+  },
+  { vb: "0 0 140 50",
+    illustration: (
+      <g>
+        <rect x="4" y="4" width="26" height="18" rx="3" fill="none" stroke="#900" strokeWidth="2" />
+        <rect x="36" y="4" width="26" height="18" rx="3" fill="none" stroke="#900" strokeWidth="2" />
+        <rect x="68" y="4" width="26" height="18" rx="3" fill="none" stroke="#900" strokeWidth="2" />
+        <text x="17" y="17" textAnchor="middle" fontSize="14" fill="#900" fontWeight="900">503</text>
+        <text x="49" y="17" textAnchor="middle" fontSize="14" fill="#900" fontWeight="900">503</text>
+        <text x="81" y="17" textAnchor="middle" fontSize="14" fill="#900" fontWeight="900">503</text>
+        <text x="49" y="38" textAnchor="middle" fontSize="14" fill="#900" fontWeight="800">15h+ total outage</text>
+      </g>
+    ),
+    lines: ["Snapchat, Zoom, Slack ... connection timeouts, service down"],
+  },
+];
+
+const COL_W = 210;
+const ROW_H = 155;
+const GAP_X = 70;
+const GAP_Y = 30;
+const PAD_X = 24;
+const PAD_Y = 50;
+const ICON_R = NODE.radius;
+
+function nx(col: number) { return PAD_X + col * (COL_W + GAP_X) + COL_W / 2; }
+function ny(row: number) { return PAD_Y + row * (ROW_H + GAP_Y) + ICON_R + 8; }
+
+const LINKS = [
+  { from: 0, to: 1, dir: "h",     step: 1 },
+  { from: 1, to: 2, dir: "h",     step: 2 },
+  { from: 2, to: 3, dir: "h",     step: 3 },
+  { from: 3, to: 4, dir: "v",     step: 4 },
+  { from: 4, to: 5, dir: "h-rev", step: 5 },
+  { from: 5, to: 6, dir: "h-rev", step: 6 },
+];
+
+const DURATION_LABELS = [
+  { text: "~3h", col: 1, row: 0, step: 1 },
+  { text: "~3h", col: 2, row: 0, step: 2 },
+  { text: "~8h", col: 3, row: 0, step: 3 },
+  { text: "~4h", col: 3, row: 1, step: 4 },
+  { text: "~9h", col: 2, row: 1, step: 5 },
+  { text: "15h+", col: 1, row: 1, step: 6 },
+];
+
+// vis, visExact imported from presets
+
+function arrowPath(x1: number, y1: number, x2: number, y2: number, vertical: boolean) {
+  if (vertical) { const m = (y1+y2)/2; return `M${x1},${y1} C${x1},${m} ${x2},${m} ${x2},${y2}`; }
+  const m = (x1+x2)/2; return `M${x1},${y1} C${m},${y1} ${m},${y2} ${x2},${y2}`;
+}
+
+function anchorPt(n: (typeof CASCADE)[number], side: string) {
+  const cx = nx(n.col), cy = ny(n.row);
+  const r = (n.id === "dns" || n.id === "users") ? NODE.radiusAccent : ICON_R;
+  switch (side) {
+    case "right":  return [cx + r + 6, cy];
+    case "left":   return [cx - r - 6, cy];
+    case "bottom": return [cx, cy + r + 48];
+    case "top":    return [cx, cy - r - 14];
+    default:       return [cx, cy];
+  }
+}
+
+function NodeIcon({ node, visible, instant }: { node: (typeof CASCADE)[number]; visible: number; instant: boolean }) {
+  const cx = nx(node.col), cy = ny(node.row);
+  const isAccent = node.id === "dns" || node.id === "users";
+  const r = isAccent ? NODE.radiusAccent : ICON_R;
+  const strokeW = isAccent ? NODE.strokeWidthAccent : NODE.strokeWidth;
+  const iSz = NODE.iconSize + 8;
+  return (
+    <g style={vis(visible, node.step, instant)}>
+      <circle cx={cx} cy={cy} r={r + 6} fill={node.bg} />
+      <circle cx={cx} cy={cy} r={r} fill="white" stroke={node.color} strokeWidth={strokeW} />
+      {isAccent && <circle cx={cx} cy={cy} r={r + 10} fill="none" stroke={node.color} strokeWidth="2" strokeDasharray="4 4" opacity="0.5" />}
+      <g transform={`translate(${cx - iSz/2}, ${cy - iSz/2})`}>
+        <svg width={iSz} height={iSz} viewBox="0 0 24 24" fill="none" stroke={node.color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d={(ICON_PATHS as any)[node.id]} />
+        </svg>
+      </g>
+      <text x={cx} y={cy+r+24} textAnchor="middle" fontSize={NODE.labelFont} fontWeight="900" fill={NODE.labelColor} fontFamily={CANVAS.fontFamily}>{node.label}</text>
+      <text x={cx} y={cy+r+44} textAnchor="middle" fontSize={NODE.subFont} fontWeight="700" fill={node.color} fontFamily={CANVAS.fontFamily}>{node.sub}</text>
+      {node.id === "dns" && (
+        <g style={vis(visible, 0, instant)}>
+          <rect x={cx-60} y={cy-r-28} width="120" height={TAG.pillHeight} rx={TAG.pillRadius} fill={node.color} />
+          <text x={cx} y={cy-r-12} textAnchor="middle" fontSize={TAG.pillFont} fontWeight="800" fill="white" fontFamily={CANVAS.fontFamily} letterSpacing="0.5">ROOT CAUSE</text>
+        </g>
+      )}
+      {node.id === "users" && (
+        <g style={vis(visible, 6, instant)}>
+          <rect x={cx-74} y={cy-r-28} width="148" height={TAG.pillHeight} rx={TAG.pillRadius} fill={node.color} />
+          <text x={cx} y={cy-r-12} textAnchor="middle" fontSize={TAG.pillFont} fontWeight="800" fill="white" fontFamily={CANVAS.fontFamily} letterSpacing="0.5">LOUDEST SYMPTOM</text>
+        </g>
+      )}
+    </g>
+  );
+}
+
+function DetailAnnotation({ detail, step, currentStep, svgW, svgH, instant }: { detail: (typeof DETAILS)[number]; step: number; currentStep: number; svgW: number; svgH: number; instant: boolean }) {
+  const node = CASCADE[step];
+  const occupied = nodeOccupiedRects(CASCADE, step, { nx, ny, iconR: ICON_R, labelH: 54 });
+  const pos = findEmptySlot({
+    canvasW: svgW,
+    canvasH: svgH,
+    occupied,
+    slotW: DETAIL_W,
+    slotH: DETAIL_H,
+    margin: DETAIL.margin,
+    near: { x: nx(node.col), y: ny(node.row) },
+    step: DETAIL.scanStep,
+  });
+  return (
+    <g style={visExact(currentStep, step, instant)}>
+      <rect x={pos.x} y={pos.y} width={DETAIL_W} height={DETAIL_H} rx="12"
+        fill="white" fillOpacity={DETAIL.bgOpacity} stroke="none" />
+      <foreignObject x={pos.x} y={pos.y} width={DETAIL_W} height={DETAIL_H}>
+        <div style={annotationStyle()}>
+          <svg style={illustrationStyle()} viewBox={detail.vb}>
+            {detail.illustration}
+          </svg>
+          <div style={{ flex: "1 1 auto", display: "flex", flexDirection: "column", justifyContent: "center", gap: 4 }}>
+            <div style={annotationTitleStyle()}>
+              {detail.lines[0]}
+            </div>
+            {detail.lines[1] && (
+              <div style={{ fontSize: DETAIL.bodyFont, fontWeight: 700, color: DETAIL.bodyColor, lineHeight: 1.3 }}>
+                {detail.lines[1]}
+              </div>
+            )}
+          </div>
+        </div>
+      </foreignObject>
+    </g>
+  );
+}
+
+const SVG_W = 4 * COL_W + 3 * GAP_X + 2 * PAD_X;
+const SVG_H = 2 * ROW_H + GAP_Y + 2 * PAD_Y + 240;
+
+// getStep imported from presets
+
+export default function AwsCascade({ Reveal }: SlideComponentProps) {
+  return (
+    <SlideCanvas Reveal={Reveal} W={SVG_W} H={SVG_H}>{(step, instant) => <>
+      <defs>
+        <marker id="cascade-arr" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+          <path d="M 0 0 L 10 5 L 0 10 z" fill="#C00000" />
+        </marker>
+        <filter id="detail-shadow" x="-4%" y="-4%" width="108%" height="116%">
+          <feDropShadow dx="0" dy="2" stdDeviation="6" floodOpacity="0.1" />
+        </filter>
+      </defs>
+
+      {LINKS.map((link, i) => {
+        const from = CASCADE[link.from], to = CASCADE[link.to];
+        let p1, p2, vert = false;
+        if (link.dir === "h") { p1 = anchorPt(from, "right"); p2 = anchorPt(to, "left"); }
+        else if (link.dir === "h-rev") { p1 = anchorPt(from, "left"); p2 = anchorPt(to, "right"); }
+        else { p1 = anchorPt(from, "bottom"); p2 = anchorPt(to, "top"); vert = true; }
+        return <path key={i} d={arrowPath(p1[0], p1[1], p2[0], p2[1], vert)}
+          fill="none" stroke="#C00000" strokeWidth="2.5" strokeLinecap="round"
+          strokeDasharray={vert ? "6 4" : "none"} markerEnd="url(#cascade-arr)"
+          style={vis(step, link.step, instant)} />;
+      })}
+
+      {CASCADE.map((n) => <NodeIcon key={n.id} node={n} visible={step} instant={instant} />)}
+
+      {DURATION_LABELS.map((d, i) => {
+        const cx = nx(d.col), cy = ny(d.row);
+        const node = CASCADE.find(n => n.col === d.col && n.row === d.row);
+        const r = (node && (node.id === "dns" || node.id === "users")) ? ICON_R + 4 : ICON_R;
+        return <text key={i} x={cx+r+8} y={cy-r+6} fontSize={TAG.font} fontWeight="800"
+          fill={node?.color || "#999"} fontFamily="Aptos, Arial, sans-serif" opacity="0.7"
+          style={vis(step, d.step, instant)}>{d.text}</text>;
+      })}
+
+      {DETAILS.map((d, i) => <DetailAnnotation key={i} detail={d} step={i} currentStep={step} svgW={SVG_W} svgH={SVG_H} instant={instant} />)}
+    </>}</SlideCanvas>
+  );
+}

package/template-full/src/reveal/decks/fse26-rca/components/bench-compare.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, SlideCanvas, vis } from "../../../core/presets.ts";
+import { BENCH_DIMS as DIMS } from "../../../data/benchmark.ts";
+
+const W = 1000, H = 440;
+const ROW_H = 42;
+const BAR_MAX = 220;
+const OURS_X = 260;
+const BEST_X = 640;
+const LABEL_X = 240;
+
+export default function BenchCompare({ Reveal }: SlideComponentProps) {
+  let maxVal = 0;
+  for (let i = 0; i < DIMS.length; i++) {
+    const m = Math.max(DIMS[i].ours, DIMS[i].best);
+    if (m > maxVal) maxVal = m;
+  }
+
+  return (
+    <SlideCanvas Reveal={Reveal} W={W} H={H}>{(step, instant) => <>
+
+      <g style={vis(step, -1, instant)}>
+        <text x={OURS_X + BAR_MAX / 2} y="20" textAnchor="middle" fontSize="16" fontWeight="900" fill="#C00000" fontFamily={CANVAS.fontFamily}>Ours</text>
+        <text x={BEST_X + BAR_MAX / 2} y="20" textAnchor="middle" fontSize="16" fontWeight="900" fill="#767676" fontFamily={CANVAS.fontFamily}>Best Existing</text>
+        <line x1={OURS_X} y1="28" x2={OURS_X + BAR_MAX} y2="28" stroke="#C00000" strokeWidth="2" />
+        <line x1={BEST_X} y1="28" x2={BEST_X + BAR_MAX} y2="28" stroke="#ddd" strokeWidth="2" />
+      </g>
+
+      {DIMS.map(function (d, i) {
+        const y = 40 + i * ROW_H;
+        const localMax = Math.max(d.ours, d.best);
+        const oursW = (d.ours / localMax) * BAR_MAX;
+        const bestW = (d.best / localMax) * BAR_MAX;
+        const oursColor = d.higher ? "#C00000" : "#E8912D";
+        const bestColor = "#bbb";
+        const revealStep = Math.floor(i / 2);
+
+        return (
+          <g key={i} style={vis(step, revealStep, instant)}>
+            <text x={LABEL_X} y={y + ROW_H / 2 + 1} textAnchor="end" dominantBaseline="middle"
+              fontSize="14" fontWeight="800" fill="#313131" fontFamily={CANVAS.fontFamily}>{d.label}</text>
+
+            <rect x={OURS_X} y={y + 6} width={oursW} height={ROW_H - 16} rx="4" fill={oursColor} fillOpacity="0.15" stroke={oursColor} strokeWidth="1.5" />
+            <text x={OURS_X + oursW + 8} y={y + ROW_H / 2 + 1} dominantBaseline="middle"
+              fontSize="15" fontWeight="900" fill={oursColor} fontFamily={CANVAS.fontFamily}>{d.oursF}</text>
+
+            <rect x={BEST_X} y={y + 6} width={bestW} height={ROW_H - 16} rx="4" fill={bestColor} fillOpacity="0.15" stroke={bestColor} strokeWidth="1" />
+            <text x={BEST_X + bestW + 8} y={y + ROW_H / 2 - 3} dominantBaseline="middle"
+              fontSize="14" fontWeight="800" fill="#767676" fontFamily={CANVAS.fontFamily}>{d.bestF}</text>
+            <text x={BEST_X + bestW + 8} y={y + ROW_H / 2 + 11} dominantBaseline="middle"
+              fontSize="14" fontWeight="600" fill="#999" fontFamily={CANVAS.fontFamily}>{d.bestDs}</text>
+          </g>
+        );
+      })}
+
+      <g style={vis(step, 4, instant)}>
+        <text x={W / 2} y={H - 10} textAnchor="middle" fontSize="16" fontWeight="800" fill="#313131" fontFamily={CANVAS.fontFamily}>
+          Balanced realism across all dimensions
+        </text>
+      </g>
+    </>}</SlideCanvas>
+  );
+}