create-slide-deck 0.1.0

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

@@ -0,0 +1,104 @@
+import React from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, SlideCanvas, vis } from "../../../core/presets.ts";
+import { FAULT_TYPES as TYPES } from "../../../data/benchmark.ts";
+
+const COL_W = 320;
+const COL_GAP = 40;
+const PAD_X = 50;
+const CHART_H = 130;
+const CHART_W = 240;
+const SVG_W = 3 * COL_W + 2 * COL_GAP + 2 * PAD_X;
+const SVG_H = 520;
+
+function colX(i: number) { return PAD_X + i * (COL_W + COL_GAP); }
+
+function MiniChart({ type, x, y }: { type: number; x: number; y: number }) {
+  const barW = 36;
+  const gap = 12;
+  let heights: number[];
+  let colors: string[];
+  let labels: { i: number; text: string; color: string }[] = [];
+
+  if (type === 0) {
+    heights = [18, 110, 15, 20, 16];
+    colors = ["#ddd", "#C00000", "#ddd", "#ddd", "#ddd"];
+    labels = [{ i: 1, text: "injected", color: "#C00000" }];
+  } else if (type === 1) {
+    heights = [14, 16, 13, 15, 14];
+    colors = ["#ddd", "#ddd", "#ddd", "#ddd", "#ddd"];
+    labels = [{ i: 2, text: "no signal", color: "#767676" }];
+  } else {
+    heights = [16, 42, 20, 100, 18];
+    colors = ["#ddd", "#E8912D", "#ddd", "#76B82A", "#ddd"];
+    labels = [
+      { i: 1, text: "root cause", color: "#E8912D" },
+      { i: 3, text: "loudest", color: "#76B82A" },
+    ];
+  }
+
+  const totalW = 5 * barW + 4 * gap;
+  const startX = x + (CHART_W - totalW) / 2;
+
+  return (
+    <g>
+      <rect x={x - 10} y={y - 10} width={CHART_W + 20} height={CHART_H + 20} rx="10" fill="#F8F8F8" stroke="#eee" strokeWidth="1" />
+      {heights.map(function (h, i) {
+        const bx = startX + i * (barW + gap);
+        const by = y + CHART_H - h;
+        return <rect key={i} x={bx} y={by} width={barW} height={h} rx="4" fill={colors[i]} />;
+      })}
+      {labels.map(function (l) {
+        const bx = startX + l.i * (barW + gap) + barW / 2;
+        const lh = heights[l.i];
+        return <text key={l.i} x={bx} y={y + CHART_H - lh - 8} textAnchor="middle" fontSize="14" fontWeight="800" fill={l.color} fontFamily={CANVAS.fontFamily}>{l.text}</text>;
+      })}
+    </g>
+  );
+}
+
+export default function BenchDeficiency({ Reveal }: SlideComponentProps) {
+  return (
+    <SlideCanvas Reveal={Reveal} W={SVG_W} H={SVG_H}>{(step, instant) => <>
+
+      {TYPES.map(function (t, i) {
+        const x = colX(i);
+        const chartX = x + (COL_W - CHART_W) / 2;
+
+        return (
+          <g key={i} style={vis(step, i, instant)}>
+            <MiniChart type={i} x={chartX} y={20} />
+
+            <text x={x + COL_W / 2} y={220} textAnchor="middle" fontSize="42" fontWeight="900" fill={t.color} fontFamily={CANVAS.fontFamily}>{t.pct}%</text>
+
+            <text x={x + COL_W / 2} y={250} textAnchor="middle" fontSize="14" fontWeight="800" fill={t.color} fontFamily={CANVAS.fontFamily}>{t.label}</text>
+
+            <text x={x + COL_W / 2} y={280} textAnchor="middle" fontSize="22" fontWeight="900" fill="#313131" fontFamily={CANVAS.fontFamily}>{t.title}</text>
+
+            <foreignObject x={x} y={294} width={COL_W} height={60}>
+              <div style={{ textAlign: "center", fontFamily: CANVAS.fontFamily }}>
+                <div style={{ fontSize: 16, fontWeight: 700, color: "#767676", lineHeight: 1.3 }}>{t.desc}</div>
+                <div style={{ fontSize: 14, fontWeight: 700, color: t.color, marginTop: 4 }}>{t.detail}</div>
+              </div>
+            </foreignObject>
+          </g>
+        );
+      })}
+
+      <g style={vis(step, 3, instant)}>
+        <text x={SVG_W / 2} y={SVG_H - 68} textAnchor="middle" fontSize="22" fontWeight="800" fill="#313131" fontFamily={CANVAS.fontFamily}>
+          <tspan fill="#C00000" fontWeight="900">68%</tspan>
+          <tspan fill="#767676"> trivially easy + </tspan>
+          <tspan fill="#767676" fontWeight="900">18%</tspan>
+          <tspan fill="#767676"> no signal = </tspan>
+          <tspan fill="#C00000" fontWeight="900" fontSize="28">86%</tspan>
+          <tspan> fail to test causal reasoning</tspan>
+        </text>
+        <text x={SVG_W / 2} y={SVG_H - 34} textAnchor="middle" fontSize="18" fontWeight="700" fill="#767676" fontFamily={CANVAS.fontFamily}>
+          <tspan fill="#C00000" fontWeight="900">99%</tspan>
+          <tspan> of cases lack complete observability data</tspan>
+        </text>
+      </g>
+    </>}</SlideCanvas>
+  );
+}

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

@@ -0,0 +1,402 @@
+import React from "react";
+import { hierarchy, tree as d3tree } from "d3-hierarchy";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { findLargestSlot } from "../../../components/auto-layout.ts";
+import { NODE, CANVAS, SlideCanvas, vis } from "../../../core/presets.ts";
+
+const NODES = [
+  { id: "system",    label: "TrainTicket",      color: "#1B556B", cx: 80,  cy: 230 },
+  { id: "load",      label: "Dynamic load",     color: "#76B82A", cx: 250, cy: 60  },
+  { id: "fault",     label: "Fault controller",  color: "#C00000", cx: 430, cy: 60  },
+  { id: "telemetry", label: "Telemetry",         color: "#00A6D6", cx: 430, cy: 400 },
+  { id: "validator", label: "SLI validator",     color: "#76B82A", cx: 250, cy: 400 },
+];
+
+const ICON_PATHS = {
+  system:    "M2 20h20M4 20V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16M12 12h.01M8 12h.01M16 12h.01",
+  load:      "M22 12h-4l-3 9L9 3l-3 9H2",
+  fault:     "M13 2L3 14h9l-1 8 10-12h-9l1-8z",
+  telemetry: "M4 7V4a2 2 0 0 1 2-2h8.5L20 7.5V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3M8 12h8M8 16h8M8 8h2",
+  validator: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10zM9 12l2 2 4-4",
+};
+
+const LINKS = [
+  { from: 0, to: 1, nodeStep: 1 },
+  { from: 1, to: 2, nodeStep: 2 },
+  { from: 2, to: 3, nodeStep: 3 },
+  { from: 3, to: 4, nodeStep: 4 },
+  { from: 4, to: 0, nodeStep: 4 },
+];
+
+const STEP_MAP = [
+  { node: 0 }, { node: 1 }, { node: 1 }, { node: 1 },
+  { node: 1 }, { node: 1 }, { node: 1 },
+  { node: 2 }, { node: 3 }, { node: 4 },
+];
+
+const TITLES = [
+  "50 services with realistic dependencies",
+  "Booking Request", "3 required parameters",
+  "Seat & Insurance options", "Passenger selection methods",
+  "Recursive sub-workflows", "36 API combinations per booking flow",
+  "31 fault types across 7 categories",
+  "Metrics, logs, traces from all services",
+  "84.4% filtered — only impacting cases kept",
+];
+
+const LOAD_W = 760, LOAD_H = 280;
+
+const VBS = {
+  0: "0 0 360 200",
+  1: "0 0 " + LOAD_W + " " + LOAD_H,
+  2: "0 0 280 110",
+  3: "0 0 280 100",
+  4: "0 0 280 110",
+};
+
+function nodeForStep(step: number) {
+  if (step < 0 || step >= STEP_MAP.length) return -1;
+  return STEP_MAP[step].node;
+}
+
+function maxStepForNode(nodeIdx: number) {
+  let max = -1;
+  for (let i = 0; i < STEP_MAP.length; i++) {
+    if (STEP_MAP[i].node <= nodeIdx && i > max) max = i;
+  }
+  return max;
+}
+
+function anim(delay: number, instant: boolean) {
+  if (instant) return { opacity: 1 };
+  return { opacity: 0, animation: "blFadeIn 0.4s ease " + delay + "s forwards" };
+}
+
+function SystemIllust({ instant }: { instant: boolean }) {
+  const nodes: [number, number, string, string | null][] = [
+    [60,50,"#1B556B","order"],[150,35,"#00A6D6","travel"],[240,55,"#76B82A","seat"],
+    [300,110,"#1B556B","pay"],[210,125,"#E8912D","route"],[105,118,"#00A6D6","auth"],
+    [45,148,"#76B82A",null],[165,170,"#C00000",null],
+  ];
+  const lines: [number, number, number, number][] = [
+    [60,50,150,35],[150,35,240,55],[240,55,300,110],[300,110,210,125],
+    [210,125,105,118],[105,118,60,50],[105,118,45,148],[210,125,165,170],
+    [150,35,210,125],[60,50,105,118],
+  ];
+  return (
+    <g>
+      {lines.map(function(l,i) {
+        return <line key={"l"+i} x1={l[0]} y1={l[1]} x2={l[2]} y2={l[3]} stroke="#ddd" strokeWidth="1.5" style={anim(0.1+i*0.05, instant)} />;
+      })}
+      {nodes.map(function(n,i) {
+        return (
+          <g key={"n"+i} style={anim(0.3+i*0.1, instant)}>
+            <circle cx={n[0]} cy={n[1]} r={14} fill="white" stroke={n[2]} strokeWidth="2.5" />
+            {n[3] && <text x={n[0]} y={n[1]-20} textAnchor="middle" fontSize="14" fontWeight="700" fill="#999">{n[3]}</text>}
+          </g>
+        );
+      })}
+    </g>
+  );
+}
+
+const LOAD_TREE = {
+  n: "Booking Request", step: 0, color: "#76B82A", style: "root",
+  children: [
+    { n: "Passenger", step: 1, color: "#00A6D6", style: "param", count: 6,
+      children: [
+        { n: "Query", step: 3, style: "leaf", tag: "1" },
+        { n: "Modify", step: 3, style: "leaf", tag: "1" },
+        { n: "Create New", step: 3, color: "#C00000", style: "highlight",
+          children: [
+            { n: "ID Number", step: 4, color: "#C00000", style: "sub",
+              children: [
+                { n: "Generate", step: 4, style: "leaf" },
+                { n: "Retrieve", step: 4, style: "leaf" },
+              ]},
+            { n: "Passenger Name", step: 4, color: "#C00000", style: "sub",
+              children: [
+                { n: "Generate", step: 4, style: "leaf" },
+                { n: "Retrieve", step: 4, style: "leaf" },
+              ]},
+          ]},
+      ]},
+    { n: "Seat Preference", step: 1, color: "#00A6D6", style: "param", count: 3,
+      children: [
+        { n: "Window", step: 2, style: "leaf" },
+        { n: "Aisle", step: 2, style: "leaf" },
+        { n: "Random", step: 2, style: "leaf" },
+      ]},
+    { n: "Insurance", step: 1, color: "#00A6D6", style: "param", count: 2,
+      children: [
+        { n: "Add", step: 2, style: "leaf" },
+        { n: "Skip", step: 2, style: "leaf" },
+      ]},
+  ],
+};
+
+const loadRoot = hierarchy(LOAD_TREE as any);
+d3tree().size([LOAD_W - 120, LOAD_H - 70]).separation(function(a, b) {
+  return a.parent === b.parent ? 1.1 : 1.5;
+})(loadRoot);
+const loadNodes = loadRoot.descendants();
+const loadLinks = loadRoot.links();
+
+function LoadIllust({ subStep, instant }: { subStep: number; instant: boolean }) {
+  const gc = "#76B82A", rc = "#C00000";
+  const pad = 10;
+  return (
+    <g transform={"translate(" + (pad + 40) + "," + 14 + ")"}>
+      {loadLinks.map(function(link, i) {
+        const s = link.source.data, t = link.target.data;
+        const linkStep = t.step;
+        return (
+          <line key={"e" + i} x1={link.source.x} y1={link.source.y}
+            x2={link.target.x} y2={link.target.y}
+            stroke="#ccc" strokeWidth="1"
+            style={vis(subStep, linkStep, instant)} />
+        );
+      })}
+
+      {loadNodes.map(function(nd, i) {
+        const d = nd.data;
+        let w, h = 24, fs = 12, stroke = "#999", sw = 1, dash = "3 2", fw = 700, tc = "#666";
+        if (d.style === "root") { w = 140; h = 28; fs = 14; stroke = d.color; sw = 2; dash = "none"; fw = 800; tc = d.color; }
+        else if (d.style === "param") { w = 130; h = 26; fs = 13; stroke = d.color; sw = 1.5; dash = "none"; fw = 800; tc = d.color; }
+        else if (d.style === "highlight") { w = 92; h = 25; fs = 13; stroke = d.color; sw = 1.5; dash = "none"; fw = 800; tc = d.color; }
+        else if (d.style === "sub") { w = 104; stroke = d.color || "#999"; tc = d.color || "#666"; }
+        else { w = 74; }
+
+        return (
+          <g key={"n" + i} style={vis(subStep, d.step, instant)}>
+            <rect x={nd.x! - w/2} y={nd.y! - h/2} width={w} height={h} rx="4"
+              fill="white" stroke={stroke} strokeWidth={sw} strokeDasharray={dash} />
+            <text x={nd.x!} y={nd.y! + 5} textAnchor="middle" fontSize={fs}
+              fontWeight={fw} fill={tc} fontFamily={CANVAS.fontFamily}>{d.n}</text>
+            {d.tag && <text x={nd.x!} y={nd.y! + h/2 + 14} textAnchor="middle" fontSize="14" fontWeight="700" fill="#999">{d.tag}</text>}
+            {d.count && <text x={nd.x!} y={nd.y! + h/2 + 16} textAnchor="middle" fontSize="14" fontWeight="900" fill={gc}>{d.count}</text>}
+          </g>
+        );
+      })}
+
+      <g style={vis(subStep, 4, instant)}>
+        <text x={LOAD_W / 2} y={LOAD_H - 36} textAnchor="middle" fontSize="14" fontWeight="800" fill={rc} fontFamily={CANVAS.fontFamily}>Create New: 2 x 2 = 4 paths  |  Query: 1  |  Modify: 1  |  Total: 1 + 1 + 4 = 6</text>
+      </g>
+
+      <g style={vis(subStep, 5, instant)}>
+        <text x={LOAD_W / 2} y={LOAD_H - 10} textAnchor="middle" fontSize="14" fontWeight="900" fill="#313131" fontFamily={CANVAS.fontFamily}>6 x 3 x 2 = 36 combinations</text>
+      </g>
+    </g>
+  );
+}
+
+function FaultIllust({ instant }: { instant: boolean }) {
+  const cats: [number, number, string, string, number][] = [
+    [30,25,"CPU","#C00000",0.1],[90,25,"HTTP","#1B556B",0.25],[150,25,"DNS","#E8912D",0.4],
+    [30,65,"Network","#76B82A",0.55],[90,65,"Code","#7B61FF",0.7],[150,65,"Time","#00A6D6",0.85],
+    [210,45,"Disk","#999",1.0],
+  ];
+  return (
+    <g>
+      {cats.map(function(c, i) {
+        return (
+          <g key={i} style={anim(c[4], instant)}>
+            <rect x={c[0]-24} y={c[1]-12} width="48" height="24" rx="6" fill={c[3]} fillOpacity="0.12" stroke={c[3]} strokeWidth="1.5" />
+            <text x={c[0]} y={c[1]+4} textAnchor="middle" fontSize="10" fontWeight="800" fill={c[3]}>{c[2]}</text>
+          </g>
+        );
+      })}
+    </g>
+  );
+}
+
+function TelemetryIllust({ instant }: { instant: boolean }) {
+  return (
+    <g>
+      <g style={anim(0.1, instant)}>
+        <text x="38" y="8" textAnchor="middle" fontSize="10" fontWeight="700" fill="#00A6D6">metrics</text>
+        <line x1="6" y1="75" x2="70" y2="75" stroke="#ddd" strokeWidth="1" />
+        <line x1="6" y1="75" x2="6" y2="10" stroke="#ddd" strokeWidth="1" />
+        <polyline points="10,55 22,50 34,45 42,22 50,30 58,40 66,42" fill="none" stroke="#00A6D6" strokeWidth="2" />
+      </g>
+      <g style={anim(0.5, instant)}>
+        <text x="118" y="8" textAnchor="middle" fontSize="10" fontWeight="700" fill="#1B556B">logs</text>
+        <rect x="82" y="14" width="72" height="11" rx="2" fill="#F5F5F5" stroke="#ddd" strokeWidth="0.8" />
+        <text x="86" y="22" fontSize="8" fill="#999" fontWeight="600">INFO  ok</text>
+        <rect x="82" y="28" width="72" height="11" rx="2" fill="#FFF3F3" stroke="#C00000" strokeWidth="1" />
+        <text x="86" y="36" fontSize="8" fill="#C00000" fontWeight="800">ERROR refused</text>
+        <rect x="82" y="42" width="72" height="11" rx="2" fill="#F5F5F5" stroke="#ddd" strokeWidth="0.8" />
+        <text x="86" y="50" fontSize="8" fill="#999" fontWeight="600">WARN  slow</text>
+      </g>
+      <g style={anim(0.9, instant)}>
+        <text x="196" y="8" textAnchor="middle" fontSize="10" fontWeight="700" fill="#76B82A">traces</text>
+        <rect x="168" y="18" width="55" height="9" rx="2" fill="#00A6D6" fillOpacity="0.25" />
+        <rect x="178" y="32" width="40" height="9" rx="2" fill="#76B82A" fillOpacity="0.25" />
+        <rect x="188" y="46" width="30" height="9" rx="2" fill="#C00000" fillOpacity="0.25" />
+      </g>
+    </g>
+  );
+}
+
+function ValidatorIllust({ instant }: { instant: boolean }) {
+  return (
+    <g>
+      <g style={anim(0.1, instant)}>
+        <text x="30" y="14" fontSize="10" fontWeight="700" fill="#999">9,152 injections</text>
+      </g>
+      {[0,1,2,3,4,5,6,7,8,9].map(function(i) {
+        const x = 10 + (i % 5) * 22;
+        const y = 22 + Math.floor(i / 5) * 22;
+        const pass = i === 2 || i === 7;
+        return (
+          <g key={i} style={anim(0.3 + i * 0.08, instant)}>
+            <rect x={x} y={y} width="16" height="16" rx="3"
+              fill={pass ? "#76B82A" : "#eee"} fillOpacity={pass ? 0.3 : 1}
+              stroke={pass ? "#76B82A" : "#ddd"} strokeWidth={pass ? 2 : 1} />
+            {!pass && <line x1={x+3} y1={y+3} x2={x+13} y2={y+13} stroke="#ccc" strokeWidth="1.5" />}
+            {!pass && <line x1={x+13} y1={y+3} x2={x+3} y2={y+13} stroke="#ccc" strokeWidth="1.5" />}
+          </g>
+        );
+      })}
+      <g style={anim(1.2, instant)}>
+        <line x1="130" y1="20" x2="130" y2="60" stroke="#ddd" strokeWidth="1" />
+        <text x="140" y="30" fontSize="10" fontWeight="800" fill="#C00000">84.4% silent</text>
+        <text x="140" y="44" fontSize="10" fontWeight="700" fill="#999">no user impact</text>
+      </g>
+      <g style={anim(1.5, instant)}>
+        <line x1="130" y1="68" x2="180" y2="68" stroke="#76B82A" strokeWidth="1.5" />
+        <text x="140" y="82" fontSize="10" fontWeight="900" fill="#76B82A">1,430 cases</text>
+        <text x="140" y="94" fontSize="10" fontWeight="700" fill="#999">validated impact</text>
+      </g>
+    </g>
+  );
+}
+
+const R = 30;
+const ICON_SZ = 22;
+const SVG_W = 1100;
+const SVG_H = 480;
+const MAX_D_W = 740;
+const MAX_D_H = 470;
+
+function curvedPath(x1: number, y1: number, x2: number, y2: number) {
+  const mx = (x1 + x2) / 2;
+  const my = (y1 + y2) / 2;
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const len = Math.sqrt(dx * dx + dy * dy);
+  const nx = -dy / len * 30;
+  const ny = dx / len * 30;
+  return "M" + x1 + "," + y1 + " Q" + (mx + nx) + "," + (my + ny) + " " + x2 + "," + y2;
+}
+
+function edgePoints(n1: typeof NODES[number], n2: typeof NODES[number]) {
+  const dx = n2.cx - n1.cx;
+  const dy = n2.cy - n1.cy;
+  const len = Math.sqrt(dx * dx + dy * dy);
+  const ux = dx / len;
+  const uy = dy / len;
+  return {
+    x1: n1.cx + ux * (R + 6),
+    y1: n1.cy + uy * (R + 6),
+    x2: n2.cx - ux * (R + 6),
+    y2: n2.cy - uy * (R + 6),
+  };
+}
+
+function LoopNode({ node, step, idx, instant }: { node: typeof NODES[number]; step: number; idx: number; instant: boolean }) {
+  const curNode = nodeForStep(step);
+  const isCurrent = curNode === idx;
+  const isVisible = step >= 0 && idx <= curNode;
+  const op = isVisible ? (isCurrent ? 1 : 0.5) : 0;
+  const tr = instant ? "none" : "opacity 0.4s ease";
+  const r = isCurrent ? R + 4 : R;
+
+  return (
+    <g style={{ opacity: op, transition: tr }}>
+      <circle cx={node.cx} cy={node.cy} r={r + 6} fill={node.color + "11"} />
+      <circle cx={node.cx} cy={node.cy} r={r} fill="white" stroke={node.color} strokeWidth={isCurrent ? 3.5 : 2.5} />
+      <g transform={"translate(" + (node.cx - ICON_SZ / 2) + "," + (node.cy - ICON_SZ / 2) + ")"}>
+        <svg width={ICON_SZ} height={ICON_SZ} viewBox="0 0 24 24" fill="none"
+          stroke={node.color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d={(ICON_PATHS as Record<string, string>)[node.id]} />
+        </svg>
+      </g>
+      <text x={node.cx} y={node.cy + r + 18} textAnchor="middle" fontSize="16" fontWeight="900"
+        fill={NODE.labelColor} fontFamily={CANVAS.fontFamily}>{node.label}</text>
+    </g>
+  );
+}
+
+function renderIllust(step: number, instant: boolean) {
+  const curNode = nodeForStep(step);
+  if (curNode === 0) return <SystemIllust instant={instant} />;
+  if (curNode === 1) { const sub = step - 1; return <LoadIllust subStep={sub} instant={instant} />; }
+  if (curNode === 2) return <FaultIllust instant={instant} />;
+  if (curNode === 3) return <TelemetryIllust instant={instant} />;
+  if (curNode === 4) return <ValidatorIllust instant={instant} />;
+  return null;
+}
+
+export default function BenchLoop({ Reveal }: SlideComponentProps) {
+  return (
+    <SlideCanvas Reveal={Reveal} W={SVG_W} H={SVG_H}>{(step, instant) => {
+      const tr = instant ? "none" : "opacity 0.4s ease";
+      const curNode = nodeForStep(step);
+      const curVb = curNode >= 0 ? (VBS as Record<number, string>)[curNode] : "0 0 240 120";
+
+      const occ = [];
+      for (let ni = 0; ni <= Math.min(curNode, NODES.length - 1); ni++) {
+        const nd = NODES[ni];
+        occ.push({ x: nd.cx - R - 12, y: nd.cy - R - 20, w: 2 * (R + 12), h: 2 * R + 20 + 30 });
+      }
+      const slot = step >= 0 ? findLargestSlot({
+        canvasW: SVG_W, canvasH: SVG_H, occupied: occ,
+        maxW: MAX_D_W, maxH: MAX_D_H, margin: 14, step: 16,
+      }) : { x: 530, y: 30, w: 560, h: 420 };
+
+      return (<>
+      <defs>
+        <marker id="loop-arr" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+          <path d="M 0 0 L 10 5 L 0 10 z" fill="#BFBFBF" />
+        </marker>
+        <style>{"\n@keyframes blFadeIn { from { opacity: 0; } to { opacity: 1; } }\n"}</style>
+      </defs>
+
+      {LINKS.map(function (link, i) {
+        const n1 = NODES[link.from], n2 = NODES[link.to];
+        const e = edgePoints(n1, n2);
+        const linkVisible = curNode >= link.nodeStep;
+        return <path key={i} d={curvedPath(e.x1, e.y1, e.x2, e.y2)}
+          fill="none" stroke="#BFBFBF" strokeWidth="2.5" strokeLinecap="round"
+          markerEnd="url(#loop-arr)" style={{ opacity: linkVisible ? 0.6 : 0, transition: tr }} />;
+      })}
+
+      {NODES.map(function (n, i) {
+        return <LoopNode key={n.id} node={n} step={step} idx={i} instant={instant} />;
+      })}
+
+      {step >= 0 && curNode >= 0 && (
+        <g key={"detail-" + curNode + "-" + step}>
+          <rect x={slot.x} y={slot.y} width={slot.w} height={slot.h} rx="12"
+            fill="white" fillOpacity="0.85" stroke="none" />
+          <foreignObject x={slot.x} y={slot.y} width={slot.w} height={slot.h}>
+            <div style={{
+              width: "100%", height: "100%", display: "flex", flexDirection: "column",
+              alignItems: "center", justifyContent: "center",
+              fontFamily: CANVAS.fontFamily, padding: "12px 20px", boxSizing: "border-box",
+            }}>
+              <svg style={{ flex: "1 1 auto", width: "100%", maxHeight: "82%" }} viewBox={curVb}>
+                {renderIllust(step, instant)}
+              </svg>
+              <div style={{ marginTop: 8, fontSize: 18, fontWeight: 800, color: "#313131", textAlign: "center", lineHeight: 1.3 }}>
+                {TITLES[step] || ""}
+              </div>
+            </div>
+          </foreignObject>
+        </g>
+      )}
+      </>);
+    }}</SlideCanvas>
+  );
+}

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

@@ -0,0 +1,78 @@
+import React from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, MIN_FONT, SlideCanvas, vis } from "../../../core/presets.ts";
+
+const W = 1200, H = 560;
+const R = 46;
+const CY = 280;
+
+const C = { red: "#C00000", green: "#76B82A", label: "#313131", sub: "#767676" };
+
+function IconNode({ cx, color, label, sub, children }: { cx: number; color: string; label: string; sub: string; children: React.ReactNode }) {
+  const iconScale = (R * 1.45) / 24;
+  const tx = cx - 12 * iconScale;
+  const ty = CY - 12 * iconScale;
+  return (
+    <g>
+      <circle cx={cx} cy={CY} r={R} fill={color} fillOpacity={0.08} stroke={color} strokeWidth={4} />
+      <g transform={"translate(" + tx + "," + ty + ") scale(" + iconScale + ")"} stroke={color} color={color}>
+        {children}
+      </g>
+      <text x={cx} y={CY + R + 38} textAnchor="middle" fontSize={24} fontWeight={900} fill={C.label} fontFamily={CANVAS.fontFamily}>
+        {label}
+      </text>
+      <text x={cx} y={CY + R + 64} textAnchor="middle" fontSize={MIN_FONT} fontWeight={600} fill={C.sub} fontFamily={CANVAS.fontFamily}>
+        {sub}
+      </text>
+    </g>
+  );
+}
+
+function Arrow({ fromX, toX, instant, step, req }: { fromX: number; toX: number; instant: boolean; step: number; req: number }) {
+  const gap = R + 14;
+  const x1 = fromX + gap;
+  const x2 = toX - gap;
+  return (
+    <g style={vis(step, req, instant)}>
+      <line x1={x1} y1={CY} x2={x2} y2={CY} stroke={C.green} strokeWidth={3} markerEnd="url(#bn-arrow-green)" />
+    </g>
+  );
+}
+
+export default function BenchNeeds({ Reveal }: SlideComponentProps) {
+  const x0 = W * 0.2, x1 = W * 0.5, x2 = W * 0.8;
+  return (
+    <SlideCanvas Reveal={Reveal} W={W} H={H}>{(step, instant) => <>
+      <defs>
+        <marker id="bn-arrow-green" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+          <path d="M0,0 L10,5 L0,10 z" fill={C.green} />
+        </marker>
+      </defs>
+
+      <Arrow fromX={x0} toX={x1} instant={instant} step={step} req={1} />
+      <Arrow fromX={x1} toX={x2} instant={instant} step={step} req={2} />
+
+      <g style={vis(step, 0, instant)}>
+        <IconNode cx={x0} color={C.red} label="Known source" sub="where fault starts">
+          <path d="M8 2l1.88 1.88M14.12 3.88 16 2M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" fill="none" strokeWidth="2" strokeLinecap="round" />
+          <path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" fill="none" strokeWidth="2" />
+          <path d="M12 20v-9M6.53 9C4.6 8.8 3 7.1 3 5M6 13H2M3 21c0-2.1 1.7-3.9 3.8-4M20.97 5c0 2.1-1.6 3.8-3.5 4M22 13h-4M17.2 17c2.1.1 3.8 1.9 3.8 4" fill="none" strokeWidth="2" strokeLinecap="round" />
+        </IconNode>
+      </g>
+
+      <g style={vis(step, 1, instant)}>
+        <IconNode cx={x1} color={C.green} label="Propagation path" sub="path is preserved">
+          <circle cx="6" cy="19" r="2" fill="none" strokeWidth="2" />
+          <circle cx="18" cy="5" r="2" fill="none" strokeWidth="2" />
+          <path d="M6 17V7a5 5 0 0 1 5-5h1a5 5 0 0 1 5 5v10a5 5 0 0 0 5 5h1" fill="none" strokeWidth="2" strokeLinecap="round" />
+        </IconNode>
+      </g>
+
+      <g style={vis(step, 2, instant)}>
+        <IconNode cx={x2} color={C.green} label="User impact" sub="impact is validated">
+          <path d="m12 14 4-4M3.34 19a10 10 0 1 1 17.32 0" fill="none" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        </IconNode>
+      </g>
+    </>}</SlideCanvas>
+  );
+}