create-slide-deck 0.1.0

package/template-full/src/reveal/decks/demo-showcase/components/demo-radar.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+import { scaleLinear } from "d3-scale";
+import { lineRadial, curveLinearClosed } from "d3-shape";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, SlideCanvas, vis } from "../../../core/presets.ts";
+
+const W = 1200, H = 560;
+const CX = W / 2, CY = H / 2 + 10;
+const RADIUS = 210;
+
+const AXES = ["Speed", "Accuracy", "Scalability", "Reliability", "Cost", "Usability"];
+const A_VALUES = [85, 70, 90, 75, 60, 80];
+const B_VALUES = [65, 90, 70, 85, 80, 75];
+
+const COLOR_A = "#2E6FDB";
+const COLOR_B = "#E8912D";
+
+const rScale = scaleLinear().domain([0, 100]).range([0, RADIUS]);
+
+// angle for axis i (start at top, clockwise)
+function angle(i: number) {
+  return (Math.PI * 2 * i) / AXES.length - Math.PI / 2;
+}
+
+function point(i: number, value: number) {
+  const r = rScale(value);
+  const a = angle(i);
+  return [CX + r * Math.cos(a), CY + r * Math.sin(a)];
+}
+
+function polygonPath(values: number[]) {
+  const gen = lineRadial<number>()
+    .angle(function (d, i) { return angle(i) + Math.PI / 2; })
+    .radius(function (d) { return rScale(d); })
+    .curve(curveLinearClosed);
+  // lineRadial draws around origin; translate via transform on the path's group instead.
+  return gen(values) || undefined;
+}
+
+export default function DemoRadar({ Reveal }: SlideComponentProps) {
+  const rings = [25, 50, 75, 100];
+
+  return (
+    <SlideCanvas Reveal={Reveal} W={W} H={H}>{function (step, instant) {
+      return (
+        <g style={{ fontFamily: CANVAS.fontFamily }}>
+          {/* Step 0: grid + axes + labels */}
+          <g style={vis(step, 0, instant)}>
+            {rings.map(function (rv, i) {
+              const pts = AXES.map(function (_, ai) {
+                const p = point(ai, rv);
+                return p[0] + "," + p[1];
+              }).join(" ");
+              return (
+                <polygon key={"ring" + i} points={pts}
+                  fill="none" stroke="#D8D8D8" strokeWidth="1" />
+              );
+            })}
+            {AXES.map(function (ax, i) {
+              const outer = point(i, 100);
+              const labelPt = point(i, 116);
+              const a = angle(i);
+              const anchor = Math.abs(Math.cos(a)) < 0.3 ? "middle"
+                : (Math.cos(a) > 0 ? "start" : "end");
+              return (
+                <g key={"ax" + i}>
+                  <line x1={CX} y1={CY} x2={outer[0]} y2={outer[1]}
+                    stroke="#C4C4C4" strokeWidth="1" />
+                  <text x={labelPt[0]} y={labelPt[1]} dy="0.35em"
+                    textAnchor={anchor} fontSize="16" fontWeight="700"
+                    fill="#313131">
+                    {ax}
+                  </text>
+                </g>
+              );
+            })}
+            <text x={CX} y={CY - 4} textAnchor="middle" fontSize="14" fill="#9a9a9a">0</text>
+            <text x={CX} y={CY - rScale(100) - 4} textAnchor="middle" fontSize="14" fill="#9a9a9a">100</text>
+          </g>
+
+          {/* polygons: lineRadial centers at origin, so wrap in translate(CX,CY) */}
+          <g transform={"translate(" + CX + "," + CY + ")"}>
+            {/* Step 1: System A */}
+            <g style={vis(step, 1, instant)}>
+              <path d={polygonPath(A_VALUES)}
+                fill={COLOR_A} fillOpacity="0.25"
+                stroke={COLOR_A} strokeWidth="2.5" />
+            </g>
+            {/* Step 2: System B */}
+            <g style={vis(step, 2, instant)}>
+              <path d={polygonPath(B_VALUES)}
+                fill={COLOR_B} fillOpacity="0.25"
+                stroke={COLOR_B} strokeWidth="2.5" />
+            </g>
+          </g>
+
+          {/* data point dots (absolute coords) */}
+          <g style={vis(step, 1, instant)}>
+            {A_VALUES.map(function (v, i) {
+              const p = point(i, v);
+              return <circle key={"da" + i} cx={p[0]} cy={p[1]} r="4" fill={COLOR_A} />;
+            })}
+          </g>
+          <g style={vis(step, 2, instant)}>
+            {B_VALUES.map(function (v, i) {
+              const p = point(i, v);
+              return <circle key={"db" + i} cx={p[0]} cy={p[1]} r="4" fill={COLOR_B} />;
+            })}
+          </g>
+
+          {/* Legend top-right */}
+          <g style={vis(step, 1, instant)} transform={"translate(" + (W - 220) + ", 40)"}>
+            <rect x="0" y="0" width="14" height="14" rx="3" fill={COLOR_A} />
+            <text x="22" y="12" fontSize="15" fontWeight="700" fill="#313131">System A</text>
+            <g style={vis(step, 2, instant)}>
+              <rect x="0" y="26" width="14" height="14" rx="3" fill={COLOR_B} />
+              <text x="22" y="38" fontSize="15" fontWeight="700" fill="#313131">System B</text>
+            </g>
+          </g>
+        </g>
+      );
+    }}</SlideCanvas>
+  );
+}

package/template-full/src/reveal/decks/demo-showcase/components/demo-rough.tsx

@@ -0,0 +1,169 @@
+import React from "react";
+import rough from "roughjs";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, useRevealStep } from "../../../core/presets.ts";
+
+const SVGNS = "http://www.w3.org/2000/svg";
+
+const BOXES = [
+  { id: "frontend", label: "Frontend", x: 80, y: 200, w: 220, h: 140, fill: "#a8dadc" },
+  { id: "backend", label: "Backend", x: 490, y: 200, w: 220, h: 140, fill: "#f1faee" },
+  { id: "database", label: "Database", x: 900, y: 200, w: 220, h: 140, fill: "#a8dadc" },
+];
+
+// Arrows connect box edges left-to-right.
+const ARROWS = [
+  { from: 300, to: 490, y: 270 },
+  { from: 710, to: 900, y: 270 },
+];
+
+function center(box: { x: number; y: number; w: number; h: number }) {
+  return { x: box.x + box.w / 2, y: box.y + box.h / 2 };
+}
+
+export default function DemoRough({ Reveal }: SlideComponentProps) {
+  const ref = useRevealStep(Reveal);
+  const step = ref[0], ready = ref[1], instant = ref[2];
+
+  const svgRef = React.useRef<SVGSVGElement>(null);
+  const boxLayer = React.useRef<SVGGElement>(null);
+  const arrowLayer = React.useRef<SVGGElement>(null);
+  const highlightLayer = React.useRef<SVGGElement>(null);
+
+  function clearLayer(layer: SVGGElement | null) {
+    if (!layer) return;
+    while (layer.firstChild) layer.removeChild(layer.firstChild);
+  }
+
+  // Step 0: draw the boxes in hand-drawn style.
+  React.useEffect(function () {
+    const svgEl = svgRef.current;
+    const layer = boxLayer.current;
+    if (!svgEl || !layer) return;
+    clearLayer(layer);
+    if (step < 0) return;
+    const rc = rough.svg(svgEl);
+    BOXES.forEach(function (b) {
+      const node = rc.rectangle(b.x, b.y, b.w, b.h, {
+        roughness: 2,
+        fill: b.fill,
+        fillStyle: "hachure",
+        fillWeight: 2,
+        stroke: "#457b9d",
+        strokeWidth: 2.5,
+      });
+      layer.appendChild(node);
+    });
+  }, [step >= 0]);
+
+  // Step 1: draw connecting arrows with animejs stagger reveal.
+  React.useEffect(function () {
+    const svgEl = svgRef.current;
+    const layer = arrowLayer.current;
+    if (!svgEl || !layer) return;
+    clearLayer(layer);
+    if (step < 1) return;
+    const rc = rough.svg(svgEl);
+    const groups: SVGGElement[] = [];
+    ARROWS.forEach(function (a) {
+      const g = document.createElementNS(SVGNS, "g");
+      const line = rc.line(a.from, a.y, a.to - 6, a.y, {
+        roughness: 1.8,
+        stroke: "#e63946",
+        strokeWidth: 3,
+      });
+      g.appendChild(line);
+      // Simple arrow head drawn with two rough lines.
+      const head1 = rc.line(a.to - 6, a.y, a.to - 22, a.y - 12, { roughness: 1.5, stroke: "#e63946", strokeWidth: 3 });
+      const head2 = rc.line(a.to - 6, a.y, a.to - 22, a.y + 12, { roughness: 1.5, stroke: "#e63946", strokeWidth: 3 });
+      g.appendChild(head1);
+      g.appendChild(head2);
+      layer.appendChild(g);
+      groups.push(g);
+    });
+    const anime = (window as any).anime;
+    if (!anime || instant) {
+      groups.forEach(function (g) { g.style.opacity = "1"; });
+      return;
+    }
+    groups.forEach(function (g) { g.style.opacity = "0"; });
+    anime.animate(groups, {
+      opacity: [0, 1],
+      translateX: [-20, 0],
+      duration: 600,
+      easing: "outCubic",
+      delay: anime.stagger(220),
+    });
+  }, [step >= 1, instant]);
+
+  // Step 3: rough circle highlight around the bottleneck (backend).
+  React.useEffect(function () {
+    const svgEl = svgRef.current;
+    const layer = highlightLayer.current;
+    if (!svgEl || !layer) return;
+    clearLayer(layer);
+    if (step < 3) return;
+    const rc = rough.svg(svgEl);
+    const c = center(BOXES[1]);
+    const circle = rc.circle(c.x, c.y, 300, {
+      roughness: 2.2,
+      stroke: "#e63946",
+      strokeWidth: 3.5,
+      fill: "rgba(230,57,70,0.05)",
+      fillStyle: "solid",
+    });
+    layer.appendChild(circle);
+  }, [step >= 3]);
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontFamily: CANVAS.fontFamily,
+        opacity: ready ? 1 : 0,
+        transition: "opacity 0.2s ease",
+      }}
+    >
+      <svg ref={svgRef} viewBox="0 0 1200 560" style={{ width: "100%", height: "100%", display: "block" }}>
+        <g ref={boxLayer} />
+        <g ref={arrowLayer} />
+        <g ref={highlightLayer} />
+
+        {/* Step 2: labels inside each box (plain SVG text over rough boxes). */}
+        <g style={{ opacity: step >= 2 ? 1 : 0, transition: instant ? "none" : "opacity 0.45s ease" }}>
+          {BOXES.map(function (b) {
+            const c = center(b);
+            return (
+              <text
+                key={b.id}
+                x={c.x}
+                y={c.y}
+                textAnchor="middle"
+                dominantBaseline="central"
+                style={{ fontSize: 26, fontWeight: 800, fill: "#1d3557" }}
+              >
+                {b.label}
+              </text>
+            );
+          })}
+        </g>
+
+        {/* Step 3: bottleneck annotation. */}
+        <g style={{ opacity: step >= 3 ? 1 : 0, transition: instant ? "none" : "opacity 0.45s ease" }}>
+          <text
+            x={center(BOXES[1]).x}
+            y={center(BOXES[1]).y - 175}
+            textAnchor="middle"
+            style={{ fontSize: 22, fontWeight: 900, fill: "#e63946" }}
+          >
+            bottleneck
+          </text>
+        </g>
+      </svg>
+    </div>
+  );
+}

package/template-full/src/reveal/decks/demo-showcase/components/demo-sankey.tsx

@@ -0,0 +1,144 @@
+import React from "react";
+import { sankey, sankeyLinkHorizontal, sankeyJustify } from "d3-sankey";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, SlideCanvas, vis } from "../../../core/presets.ts";
+
+const W = 1200, H = 560;
+const PAD = { top: 40, right: 150, bottom: 40, left: 150 };
+
+// column index -> color
+const COL_COLOR = ["#2E6FDB", "#3FA34D", "#E8912D"];
+
+const NODES = [
+  { name: "User Requests", col: 0 },
+  { name: "System Events", col: 0 },
+  { name: "Scheduled Tasks", col: 0 },
+  { name: "Load Balancer", col: 1 },
+  { name: "Auth Check", col: 1 },
+  { name: "Business Logic", col: 1 },
+  { name: "Data Store", col: 1 },
+  { name: "Success Response", col: 2 },
+  { name: "Error Response", col: 2 },
+];
+
+function idx(name: string) {
+  for (let i = 0; i < NODES.length; i++) if (NODES[i].name === name) return i;
+  return -1;
+}
+
+const LINKS: [string, string, number][] = [
+  ["User Requests", "Load Balancer", 50],
+  ["System Events", "Load Balancer", 20],
+  ["Scheduled Tasks", "Business Logic", 15],
+  ["Load Balancer", "Auth Check", 70],
+  ["Auth Check", "Business Logic", 55],
+  ["Auth Check", "Error Response", 15],
+  ["Business Logic", "Data Store", 50],
+  ["Business Logic", "Error Response", 20],
+  ["Data Store", "Success Response", 42],
+  ["Data Store", "Error Response", 8],
+];
+
+// links that belong to the error flow path (highlighted red at step 2)
+function isErrorLink(l: any) {
+  const tName = NODES[l.target.index].name;
+  return tName === "Error Response";
+}
+
+function computeSankey() {
+  const nodes = NODES.map(function (n) { return { name: n.name, col: n.col }; });
+  const links = LINKS.map(function (l) {
+    return { source: idx(l[0]), target: idx(l[1]), value: l[2] };
+  });
+  const gen = sankey()
+    .nodeWidth(22)
+    .nodePadding(26)
+    .nodeAlign(sankeyJustify)
+    .extent([[PAD.left, PAD.top], [W - PAD.right, H - PAD.bottom]]);
+  return gen({ nodes: nodes, links: links } as any);
+}
+
+export default function DemoSankey({ Reveal }: SlideComponentProps) {
+  const ref = React.useState<any>(null);
+  const layout = ref[0], setLayout = ref[1];
+
+  React.useEffect(function () {
+    setLayout(computeSankey());
+  }, []);
+
+  return (
+    <SlideCanvas Reveal={Reveal} W={W} H={H}>{function (step: number, instant: boolean) {
+      if (!layout) return null;
+      const pathGen = sankeyLinkHorizontal();
+
+      return (
+        <g style={{ fontFamily: CANVAS.fontFamily }}>
+          <defs>
+            {layout.links.map(function (l: any, i: number) {
+              const sc = COL_COLOR[layout.nodes[l.source.index].col];
+              const tc = COL_COLOR[layout.nodes[l.target.index].col];
+              return (
+                <linearGradient key={"g" + i} id={"sk-grad-" + i}
+                  gradientUnits="userSpaceOnUse"
+                  x1={l.source.x1} x2={l.target.x0}>
+                  <stop offset="0%" stopColor={sc} />
+                  <stop offset="100%" stopColor={tc} />
+                </linearGradient>
+              );
+            })}
+          </defs>
+
+          {/* Step 1: links */}
+          <g style={vis(step, 1, instant)}>
+            {layout.links.map(function (l: any, i: number) {
+              const err = step >= 2 && isErrorLink(l);
+              return (
+                <path key={"lk" + i} d={pathGen(l) || undefined}
+                  fill="none"
+                  stroke={err ? "#C00000" : "url(#sk-grad-" + i + ")"}
+                  strokeOpacity={err ? 0.75 : 0.4}
+                  strokeWidth={Math.max(1.5, l.width)}
+                  style={{ transition: instant ? "none" : "stroke 0.4s ease, stroke-opacity 0.4s ease" }} />
+              );
+            })}
+            {/* link value labels */}
+            {layout.links.map(function (l: any, i: number) {
+              const mx = (l.source.x1 + l.target.x0) / 2;
+              const my = (l.y0 + l.y1) / 2;
+              return (
+                <text key={"lv" + i} x={mx} y={my} dy="0.35em"
+                  textAnchor="middle" fontSize="14" fontWeight="700"
+                  fill="#5a5a5a" pointerEvents="none">
+                  {l.value}
+                </text>
+              );
+            })}
+          </g>
+
+          {/* Step 0: nodes */}
+          <g style={vis(step, 0, instant)}>
+            {layout.nodes.map(function (n: any, i: number) {
+              const w = n.x1 - n.x0;
+              const h = Math.max(2, n.y1 - n.y0);
+              const leftCol = n.col === 0;
+              const rightCol = n.col === 2;
+              const lx = leftCol ? n.x0 - 8 : (rightCol ? n.x1 + 8 : n.x0 + w / 2);
+              const anchor: "end" | "start" | "middle" = leftCol ? "end" : (rightCol ? "start" : "middle");
+              const ly = leftCol || rightCol ? (n.y0 + n.y1) / 2 : n.y0 - 6;
+              return (
+                <g key={"nd" + i}>
+                  <rect x={n.x0} y={n.y0} width={w} height={h} rx="5" ry="5"
+                    fill={COL_COLOR[n.col]} stroke="#fff" strokeWidth="1.5" />
+                  <text x={lx} y={ly} dy="0.35em" textAnchor={anchor}
+                    fontSize="14" fontWeight="700" fill="#313131">
+                    {n.name}
+                  </text>
+                </g>
+              );
+            })}
+          </g>
+        </g>
+      );
+    }}</SlideCanvas>
+  );
+}

package/template-full/src/reveal/decks/demo-showcase/components/demo-screenshot-annotate.tsx

@@ -0,0 +1,181 @@
+import React from "react";
+import rough from "roughjs";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, useRevealStep } from "../../../core/presets.ts";
+
+const SVGNS = "http://www.w3.org/2000/svg";
+
+// Each line: [time, level, service, message]
+const LOG = [
+  { t: "10:23:41", lvl: "INFO", svc: "gateway", msg: "request /api/orders (uid=3847)" },
+  { t: "10:23:41", lvl: "INFO", svc: "auth", msg: "token validated (uid=3847)" },
+  { t: "10:23:42", lvl: "WARN", svc: "orders", msg: "slow query: 2847ms (threshold: 500ms)" },
+  { t: "10:23:44", lvl: "ERROR", svc: "payments", msg: "connection timeout to payments-db" },
+  { t: "10:23:44", lvl: "ERROR", svc: "orders", msg: "upstream failure: payments (retry 1/3)" },
+  { t: "10:23:45", lvl: "ERROR", svc: "gateway", msg: "503 Service Unavailable" },
+];
+
+const LVL_COLOR: Record<string, string> = { INFO: "#4ade80", WARN: "#facc15", ERROR: "#f87171" };
+
+// Terminal geometry in the 1200x560 overlay coordinate space.
+const TERM = { x: 90, y: 70, w: 760, h: 360 };
+const LINE_H = 44;
+const FIRST_LINE_Y = TERM.y + 78; // baseline of first log line
+const WARN_INDEX = 2;
+const ERROR_INDICES = [3, 4, 5];
+
+function lineCenterY(i: number) {
+  return FIRST_LINE_Y + i * LINE_H - 6;
+}
+
+export default function DemoScreenshotAnnotate({ Reveal }: SlideComponentProps) {
+  const ref = useRevealStep(Reveal);
+  const step = ref[0], ready = ref[1], instant = ref[2];
+
+  const svgRef = React.useRef<SVGSVGElement>(null);
+  const circleLayer = React.useRef<SVGGElement>(null);
+  const arrowLayer = React.useRef<SVGGElement>(null);
+  const boxLayer = React.useRef<SVGGElement>(null);
+
+  function clearLayer(layer: SVGGElement | null) {
+    if (!layer) return;
+    while (layer.firstChild) layer.removeChild(layer.firstChild);
+  }
+
+  // Step 1: rough red circle around the WARN line (the root cause).
+  React.useEffect(function () {
+    const svgEl = svgRef.current, layer = circleLayer.current;
+    if (!svgEl || !layer) return;
+    clearLayer(layer);
+    if (step < 1) return;
+    const rc = rough.svg(svgEl);
+    const cy = lineCenterY(WARN_INDEX);
+    const node = rc.ellipse(TERM.x + 360, cy, 660, 60, {
+      roughness: 2,
+      stroke: "#ef4444",
+      strokeWidth: 3,
+    });
+    layer.appendChild(node);
+  }, [step >= 1]);
+
+  // Step 2: rough arrows from each ERROR line back to the WARN line.
+  React.useEffect(function () {
+    const svgEl = svgRef.current;
+    const layer = arrowLayer.current;
+    if (!svgEl || !layer) return;
+    clearLayer(layer);
+    if (step < 2) return;
+    const rc = rough.svg(svgEl);
+    const targetX = TERM.x + 690;
+    const targetY = lineCenterY(WARN_INDEX);
+    ERROR_INDICES.forEach(function (idx: number) {
+      const sy = lineCenterY(idx);
+      const sx = TERM.x + 700;
+      // Curve outward to the right of the terminal then back to the WARN line.
+      const bend = sx + 70;
+      const path = rc.curve(
+        [[sx, sy], [bend, (sy + targetY) / 2], [targetX + 8, targetY + 18]],
+        { roughness: 1.8, stroke: "#f97316", strokeWidth: 2.5 }
+      );
+      layer.appendChild(path);
+      // Arrow head near the WARN line.
+      const h1 = rc.line(targetX + 8, targetY + 18, targetX - 6, targetY + 8, { roughness: 1.4, stroke: "#f97316", strokeWidth: 2.5 });
+      const h2 = rc.line(targetX + 8, targetY + 18, targetX + 22, targetY + 4, { roughness: 1.4, stroke: "#f97316", strokeWidth: 2.5 });
+      layer.appendChild(h1);
+      layer.appendChild(h2);
+    });
+  }, [step >= 2]);
+
+  // Step 3: rough rectangle annotation box to the right.
+  React.useEffect(function () {
+    const svgEl = svgRef.current, layer = boxLayer.current;
+    if (!svgEl || !layer) return;
+    clearLayer(layer);
+    if (step < 3) return;
+    const rc = rough.svg(svgEl);
+    const node = rc.rectangle(900, 220, 250, 130, {
+      roughness: 2,
+      stroke: "#ef4444",
+      strokeWidth: 3,
+      fill: "rgba(239,68,68,0.06)",
+      fillStyle: "solid",
+    });
+    layer.appendChild(node);
+  }, [step >= 3]);
+
+  return (
+    <div style={{
+      position: "relative", width: "100%", height: "100%",
+      display: "flex", alignItems: "center", justifyContent: "center",
+      fontFamily: CANVAS.fontFamily,
+      opacity: ready ? 1 : 0, transition: "opacity 0.2s ease",
+    }}>
+      {/* The fake terminal screenshot, positioned to match TERM geometry. */}
+      <div style={{
+        position: "absolute",
+        left: (TERM.x / 1200 * 100) + "%",
+        top: (TERM.y / 560 * 100) + "%",
+        width: (TERM.w / 1200 * 100) + "%",
+        height: (TERM.h / 560 * 100) + "%",
+        background: "#1a1a1a",
+        borderRadius: 8,
+        boxShadow: "0 12px 40px rgba(0,0,0,0.35)",
+        overflow: "hidden",
+        fontFamily: "Menlo, Consolas, monospace",
+        opacity: step >= 0 ? 1 : 0,
+        transition: instant ? "none" : "opacity 0.4s ease",
+      }}>
+        {/* Title bar with traffic lights */}
+        <div style={{
+          height: 30, background: "#2a2a2a", display: "flex",
+          alignItems: "center", gap: 8, padding: "0 14px",
+        }}>
+          <span style={{ width: 11, height: 11, borderRadius: "50%", background: "#ff5f56" }} />
+          <span style={{ width: 11, height: 11, borderRadius: "50%", background: "#ffbd2e" }} />
+          <span style={{ width: 11, height: 11, borderRadius: "50%", background: "#27c93f" }} />
+          <span style={{ marginLeft: 12, color: "#888", fontSize: 14 }}>service.log</span>
+        </div>
+        {/* Log lines */}
+        <div style={{ padding: "12px 18px" }}>
+          {LOG.map(function (l, i: number) {
+            return (
+              <div key={i} style={{
+                fontSize: 14, lineHeight: "30px", whiteSpace: "nowrap",
+                fontFamily: "Menlo, Consolas, monospace",
+              }}>
+                <span style={{ color: "#6b7280" }}>[{l.t}]</span>{" "}
+                <span style={{ color: LVL_COLOR[l.lvl], fontWeight: 700 }}>
+                  {l.lvl.padEnd(5, " ")}
+                </span>{" "}
+                <span style={{ color: "#93c5fd" }}>{l.svc.padEnd(9, " ")}</span>
+                <span style={{ color: "#d1d5db" }}>{"→ " + l.msg}</span>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* roughjs annotation overlay, full canvas */}
+      <svg ref={svgRef} viewBox="0 0 1200 560" style={{
+        position: "absolute", inset: 0, width: "100%", height: "100%",
+        pointerEvents: "none",
+      }}>
+        <g ref={circleLayer} />
+        <g ref={arrowLayer} />
+        <g ref={boxLayer} />
+        {/* Step 3: annotation text inside the rough box. */}
+        <g style={{ opacity: step >= 3 ? 1 : 0, transition: instant ? "none" : "opacity 0.45s ease" }}>
+          <text x="925" y="258" style={{ fontSize: 17, fontWeight: 900, fill: "#dc2626", fontFamily: CANVAS.fontFamily }}>
+            Root cause:
+          </text>
+          <text x="925" y="288" style={{ fontSize: 15, fontWeight: 600, fill: "#1a1a1a", fontFamily: CANVAS.fontFamily }}>
+            slow DB query
+          </text>
+          <text x="925" y="312" style={{ fontSize: 15, fontWeight: 600, fill: "#1a1a1a", fontFamily: CANVAS.fontFamily }}>
+            triggers cascade
+          </text>
+        </g>
+      </svg>
+    </div>
+  );
+}