create-slide-deck 0.1.0

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

@@ -0,0 +1,188 @@
+import React from "react";
+import { CANVAS, useRevealStep } from "../../../core/presets.ts";
+import type { SlideComponentProps } from "../../../core/types.ts";
+
+const TITLE = "Component Showcase";
+const SUBTITLE = "A gallery of React + Reveal.js techniques";
+
+// Decorative dots scattered around the edges of the canvas.
+const DOTS = [
+  { x: "8%", y: "14%", c: "#4361ee", r: 8 },
+  { x: "18%", y: "78%", c: "#f72585", r: 6 },
+  { x: "88%", y: "22%", c: "#4cc9f0", r: 7 },
+  { x: "92%", y: "70%", c: "#3a0ca3", r: 9 },
+  { x: "30%", y: "10%", c: "#4cc9f0", r: 5 },
+  { x: "72%", y: "86%", c: "#4361ee", r: 7 },
+  { x: "6%", y: "48%", c: "#f72585", r: 6 },
+  { x: "95%", y: "46%", c: "#4361ee", r: 5 },
+  { x: "50%", y: "8%", c: "#3a0ca3", r: 6 },
+  { x: "60%", y: "90%", c: "#4cc9f0", r: 8 },
+];
+
+export default function DemoCover({ Reveal }: SlideComponentProps) {
+  const ref = useRevealStep(Reveal);
+  const step = ref[0], ready = ref[1], instant = ref[2];
+
+  const titleRef = React.useRef<HTMLHeadingElement>(null);
+  const subtitleRef = React.useRef<HTMLParagraphElement>(null);
+  const dotsRef = React.useRef<HTMLDivElement>(null);
+
+  // Step 0: stagger letters of the title.
+  React.useEffect(function () {
+    const anime = (window as any).anime;
+    if (!anime || !titleRef.current) return;
+    const letters = titleRef.current.querySelectorAll(".cover-letter");
+    if (step < 0) {
+      letters.forEach(function (el: any) { el.style.opacity = 0; });
+      return;
+    }
+    if (instant) {
+      letters.forEach(function (el: any) {
+        el.style.opacity = 1;
+        el.style.transform = "none";
+      });
+      return;
+    }
+    anime.animate(letters, {
+      opacity: [0, 1],
+      translateY: [40, 0],
+      scale: [0.6, 1],
+      easing: "outElastic(1, 0.6)",
+      duration: 1200,
+      delay: anime.stagger(45),
+    });
+  }, [step, instant]);
+
+  // Step 1: subtitle fades in.
+  React.useEffect(function () {
+    const anime = (window as any).anime;
+    if (!anime || !subtitleRef.current) return;
+    const visible = step >= 1;
+    if (instant) {
+      subtitleRef.current.style.opacity = String(visible ? 1 : 0);
+      subtitleRef.current.style.transform = "none";
+      return;
+    }
+    if (visible) {
+      anime.animate(subtitleRef.current, {
+        opacity: [0, 1],
+        translateY: [16, 0],
+        easing: "outCubic",
+        duration: 700,
+      });
+    } else {
+      subtitleRef.current.style.opacity = String(0);
+    }
+  }, [step, instant]);
+
+  // Step 2: decorative dots pop in with stagger.
+  React.useEffect(function () {
+    const anime = (window as any).anime;
+    if (!anime || !dotsRef.current) return;
+    const dots = dotsRef.current.querySelectorAll(".cover-dot");
+    const visible = step >= 2;
+    if (instant) {
+      dots.forEach(function (el: any) {
+        el.style.opacity = visible ? 1 : 0;
+        el.style.transform = "none";
+      });
+      return;
+    }
+    if (visible) {
+      anime.animate(dots, {
+        opacity: [0, 1],
+        scale: [0, 1],
+        easing: "spring(1, 80, 10, 0)",
+        duration: 900,
+        delay: anime.stagger(80),
+      });
+    } else {
+      dots.forEach(function (el: any) { el.style.opacity = 0; });
+    }
+  }, [step, instant]);
+
+  return (
+    <div
+      style={{
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)",
+        fontFamily: CANVAS.fontFamily,
+        color: "#fff",
+        overflow: "hidden",
+        opacity: ready ? 1 : 0,
+        transition: "opacity 0.2s ease",
+        borderRadius: 8,
+      }}
+    >
+      <div ref={dotsRef} style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
+        {DOTS.map(function (d, i) {
+          return (
+            <span
+              key={i}
+              className="cover-dot"
+              style={{
+                position: "absolute",
+                left: d.x,
+                top: d.y,
+                width: d.r * 2,
+                height: d.r * 2,
+                borderRadius: "50%",
+                background: d.c,
+                opacity: 0,
+                boxShadow: "0 0 16px " + d.c,
+              }}
+            />
+          );
+        })}
+      </div>
+
+      <h1
+        ref={titleRef}
+        style={{
+          fontSize: 72,
+          fontWeight: 900,
+          margin: 0,
+          letterSpacing: "0.02em",
+          textAlign: "center",
+          zIndex: 1,
+        }}
+      >
+        {TITLE.split("").map(function (ch, i) {
+          return (
+            <span
+              key={i}
+              className="cover-letter"
+              style={{
+                display: "inline-block",
+                opacity: 0,
+                whiteSpace: "pre",
+              }}
+            >
+              {ch === " " ? " " : ch}
+            </span>
+          );
+        })}
+      </h1>
+
+      <p
+        ref={subtitleRef}
+        style={{
+          fontSize: 26,
+          fontWeight: 500,
+          marginTop: 24,
+          color: "#c9c9e8",
+          opacity: 0,
+          zIndex: 1,
+        }}
+      >
+        {SUBTITLE}
+      </p>
+    </div>
+  );
+}

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

@@ -0,0 +1,166 @@
+import React from "react";
+import { CANVAS, useRevealStep } from "../../../core/presets.ts";
+import type { SlideComponentProps } from "../../../core/types.ts";
+
+const SERIES = [62, 58, 65, 49, 53, 41, 44, 33, 29, 22];
+
+const METRICS = [
+  { name: "MTTR", value: 4.2, suffix: "min", decimals: 1, dot: "#3fb950",
+    trend: "down", trendColor: "#3fb950", spark: [9, 8, 7, 6, 5, 4], best: false },
+  { name: "Precision", value: 94.7, suffix: "%", decimals: 1, dot: "#58a6ff",
+    trend: "up", trendColor: "#3fb950", spark: [80, 84, 86, 90, 92, 95], best: true },
+  { name: "Coverage", value: 87.3, suffix: "%", decimals: 1, dot: "#bc8cff",
+    trend: "flat", trendColor: "#8b949e", spark: [85, 86, 87, 86, 87, 87], best: false },
+];
+
+function pathFor(vals: number[], w: number, h: number, pad: number) {
+  const max = Math.max.apply(null, vals);
+  const min = Math.min.apply(null, vals);
+  const range = max - min || 1;
+  const n = vals.length;
+  return vals.map(function (v, i) {
+    const x = pad + (i / (n - 1)) * (w - 2 * pad);
+    const y = pad + (1 - (v - min) / range) * (h - 2 * pad);
+    return (i === 0 ? "M" : "L") + x.toFixed(1) + " " + y.toFixed(1);
+  }).join(" ");
+}
+
+function Sparkline({ vals, color }: { vals: number[]; color: string }) {
+  const w = 40, h = 16;
+  return (
+    <svg width={w} height={h} style={{ display: "block" }}>
+      <path d={pathFor(vals, w, h, 2)} fill="none" stroke={color}
+        strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function TrendArrow({ trend, color }: { trend: string; color: string }) {
+  const sym = trend === "down" ? "↓" : trend === "up" ? "↑" : "→";
+  return <span style={{ color: color, fontSize: 18, fontWeight: 700 }}>{sym}</span>;
+}
+
+function useCountUp(target: number, active: boolean, instant: boolean) {
+  const st = React.useState(0);
+  const val = st[0], setVal = st[1];
+  React.useEffect(function () {
+    if (!active) { setVal(0); return; }
+    if (instant) { setVal(target); return; }
+    let start: number | null = null;
+    const dur = 800;
+    let raf: number;
+    function frame(t: number) {
+      if (start === null) start = t;
+      const p = Math.min(1, (t - start) / dur);
+      const eased = 1 - Math.pow(1 - p, 3);
+      setVal(target * eased);
+      if (p < 1) raf = requestAnimationFrame(frame);
+    }
+    raf = requestAnimationFrame(frame);
+    return function () { if (raf) cancelAnimationFrame(raf); };
+  }, [active, instant, target]);
+  return val;
+}
+
+function MetricRow({ m, step, instant, idx }: { m: any; step: number; instant: boolean; idx: number }) {
+  const active = step >= 1;
+  const val = useCountUp(m.value, active, instant);
+  const display = active ? val.toFixed(m.decimals) : (0).toFixed(m.decimals);
+  const pulse = step >= 2 && m.best;
+  return (
+    <div style={{
+      display: "flex", alignItems: "center", gap: 16,
+      padding: "12px 18px", borderRadius: 10,
+      boxShadow: pulse ? "0 0 0 1px rgba(67,97,238,0.3), 0 0 20px rgba(67,97,238,0.1)" : "0 1px 4px rgba(0,0,0,0.04)",
+      background: pulse ? "rgba(67,97,238,0.05)" : "#fafafa",
+      transition: instant ? "none" : "box-shadow 0.4s ease, background 0.4s ease",
+    }}>
+      <span style={{
+        width: 10, height: 10, borderRadius: "50%", background: m.dot,
+        boxShadow: "0 0 10px " + m.dot, flex: "0 0 auto",
+      }} />
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ color: "#888", fontSize: 14, fontWeight: 600 }}>{m.name}</div>
+        <div style={{ color: "#1a1a1a", fontSize: 36, fontWeight: 800, lineHeight: 1.1 }}>
+          {display}<span style={{ fontSize: 18, fontWeight: 600, color: "#999", marginLeft: 4 }}>{m.suffix}</span>
+        </div>
+      </div>
+      <div style={{ display: "flex", alignItems: "center", gap: 10, flex: "0 0 auto" }}>
+        <Sparkline vals={m.spark} color={m.trendColor} />
+        <TrendArrow trend={m.trend} color={m.trendColor} />
+      </div>
+    </div>
+  );
+}
+
+export default function DemoDarkDashboard({ Reveal }: SlideComponentProps) {
+  const ref = useRevealStep(Reveal);
+  const step = ref[0], ready = ref[1], instant = ref[2];
+
+  const CW = 600, CH = 360;
+  const pad = 30;
+  const linePath = pathFor(SERIES, CW, CH, pad);
+  const areaPath = linePath + " L" + (CW - pad) + " " + (CH - pad) + " L" + pad + " " + (CH - pad) + " Z";
+
+  const chartShown = step >= 0;
+  const n = SERIES.length;
+  const max = Math.max.apply(null, SERIES), min = Math.min.apply(null, SERIES);
+  const range = max - min || 1;
+
+  return (
+    <div style={{
+      width: "100%", height: "100%", boxSizing: "border-box",
+      background: "#ffffff",
+      display: "flex", alignItems: "stretch", gap: 0,
+      padding: "36px 44px", fontFamily: CANVAS.fontFamily,
+      opacity: ready ? 1 : 0, transition: "opacity 0.2s ease",
+    }}>
+      {/* Left: area chart 55% */}
+      <div style={{ flex: "0 0 55%", display: "flex", flexDirection: "column", justifyContent: "center" }}>
+        <div style={{ color: "#666", fontSize: 15, fontWeight: 600, marginBottom: 8, letterSpacing: 0.3 }}>
+          Detection Time
+        </div>
+        <svg viewBox={"0 0 " + CW + " " + CH} style={{ width: "100%", height: "auto", display: "block" }}>
+          <defs>
+            <linearGradient id="ddAreaFill" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="#4361ee" stopOpacity="0.25" />
+              <stop offset="100%" stopColor="#4361ee" stopOpacity="0.02" />
+            </linearGradient>
+            <linearGradient id="ddLine" x1="0" y1="0" x2="1" y2="0">
+              <stop offset="0%" stopColor="#4361ee" />
+              <stop offset="100%" stopColor="#7c3aed" />
+            </linearGradient>
+          </defs>
+          <g style={{
+            opacity: chartShown ? 1 : 0,
+            clipPath: "inset(0 " + (chartShown ? "0%" : "100%") + " 0 0)",
+            transition: instant ? "none" : "clip-path 0.9s ease, opacity 0.3s ease",
+          }}>
+            <path d={areaPath} fill="url(#ddAreaFill)" />
+            <path d={linePath} fill="none" stroke="url(#ddLine)" strokeWidth={3}
+              strokeLinecap="round" strokeLinejoin="round" />
+            {SERIES.map(function (v, i) {
+              const x = pad + (i / (n - 1)) * (CW - 2 * pad);
+              const y = pad + (1 - (v - min) / range) * (CH - 2 * pad);
+              return (
+                <g key={i}>
+                  <circle cx={x} cy={y} r={5} fill="#fff" stroke="#4361ee" strokeWidth={2.5} />
+                </g>
+              );
+            })}
+          </g>
+        </svg>
+      </div>
+
+      {/* Right: metrics 45% */}
+      <div style={{
+        flex: "0 0 45%", display: "flex", flexDirection: "column",
+        justifyContent: "center", gap: 14, paddingLeft: 36,
+      }}>
+        {METRICS.map(function (m, i) {
+          return <MetricRow key={m.name} m={m} step={step} instant={instant} idx={i} />;
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,191 @@
+import React from "react";
+import { CANVAS, vis, useRevealStep } from "../../../core/presets.ts";
+import type { SlideComponentProps } from "../../../core/types.ts";
+
+const anime = (typeof window !== "undefined") ? (window as any).anime : null;
+
+const COLUMNS = [
+  { key: "top1", label: "Top-1", base: [37, 99, 235] },   // blue
+  { key: "top3", label: "Top-3", base: [147, 51, 234] },  // purple
+  { key: "top5", label: "Top-5", base: [219, 39, 119] },  // pink
+  { key: "speed", label: "Speed", base: [5, 150, 105] },  // green
+];
+
+// rows: [Top-1, Top-3, Top-5, Speed("Nx")]
+const ROWS = [
+  { name: "SRCA", vals: [94.2, 97.1, 98.8], speed: 4.2 },
+  { name: "MicroRCA", vals: [78.3, 85.2, 91.4], speed: 8.7 },
+  { name: "CloudRCA", vals: [72.1, 80.5, 88.2], speed: 12.3 },
+  { name: "DiagFusion", vals: [68.5, 76.3, 84.1], speed: 15.8 },
+  { name: "Sage", vals: [58.4, 67.2, 75.6], speed: 22.1 },
+];
+
+// speed: lower is better -> normalize inversely for bar width
+const SPEED_MAX = 22.1;
+const SPEED_MIN = 4.2;
+function speedFrac(s: number) {
+  // best (smallest) -> widest
+  const f = (SPEED_MAX - s) / (SPEED_MAX - SPEED_MIN);
+  return 0.25 + f * 0.75; // keep a visible minimum
+}
+
+function fillColor(base: number[], frac: number) {
+  // higher frac -> more saturated/opaque
+  const alpha = 0.35 + frac * 0.6;
+  return "rgba(" + base[0] + "," + base[1] + "," + base[2] + "," + alpha.toFixed(3) + ")";
+}
+
+export default function DemoEvalMatrix(props: SlideComponentProps) {
+  const Reveal = props.Reveal;
+  const ref = useRevealStep(Reveal);
+  const step = ref[0], ready = ref[1], instant = ref[2];
+
+  // progress 0..1 per cell, indexed [row][col]
+  const initCells = function (): number[][] {
+    return ROWS.map(function () { return COLUMNS.map(function () { return 0; }); });
+  };
+  const cellsRef = React.useState(initCells);
+  const cells = cellsRef[0], setCells = cellsRef[1];
+
+  const playedRef = React.useRef(false);
+
+  React.useEffect(function () {
+    if (step >= 1) {
+      if (playedRef.current) return;
+      playedRef.current = true;
+
+      const setOne = function (r: number, c: number, v: number) {
+        setCells(function (prev) {
+          const next = prev.map(function (row) { return row.slice(); });
+          next[r][c] = v;
+          return next;
+        });
+      };
+
+      if (!anime || !anime.animate) {
+        ROWS.forEach(function (_, r) {
+          COLUMNS.forEach(function (_, c) { setOne(r, c, 1); });
+        });
+        return;
+      }
+
+      ROWS.forEach(function (_, r) {
+        COLUMNS.forEach(function (_, c) {
+          const obj = { v: 0 };
+          const delay = (r + c) * 70; // diagonal stagger top-left -> bottom-right
+          anime.animate(obj, {
+            v: 1,
+            duration: 700,
+            delay: delay,
+            ease: "outCubic",
+            update: function () { setOne(r, c, obj.v); },
+          });
+        });
+      });
+    } else {
+      playedRef.current = false;
+      setCells(initCells());
+    }
+  }, [step]);
+
+  const nameColW = 130;
+
+  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",
+    }}>
+      <div style={{ width: "100%", maxWidth: 1100 }}>
+        {/* column headers */}
+        <div style={Object.assign({
+          display: "grid",
+          gridTemplateColumns: nameColW + "px repeat(4, 1fr)",
+          gap: 18, alignItems: "center", marginBottom: 18,
+        }, vis(step, 0, instant))}>
+          <div></div>
+          {COLUMNS.map(function (col) {
+            const highlight = step >= 3 && col.key === "top1";
+            return (
+              <div key={col.key} style={{
+                textAlign: "center", fontSize: 14, fontWeight: 800,
+                color: "rgb(" + col.base[0] + "," + col.base[1] + "," + col.base[2] + ")",
+                textTransform: "uppercase", letterSpacing: 0.5,
+                background: highlight ? fillColor(col.base, 0.0) : "transparent",
+                borderRadius: 8,
+                padding: highlight ? "4px 0" : "4px 0",
+                boxShadow: highlight ? "0 0 0 2px rgba(" + col.base.join(",") + ",0.5)" : "none",
+                transition: instant ? "none" : "box-shadow 0.4s ease",
+              }}>{col.label}</div>
+            );
+          })}
+        </div>
+
+        {/* rows */}
+        {ROWS.map(function (row, r) {
+          const isSrca = r === 0;
+          const dim = step >= 2 && !isSrca;
+          const highlightRow = step >= 2 && isSrca;
+          return (
+            <div key={row.name} style={{
+              display: "grid",
+              gridTemplateColumns: nameColW + "px repeat(4, 1fr)",
+              gap: 18, alignItems: "center", marginBottom: 14,
+              opacity: (step >= 0 ? 1 : 0) * (dim ? 0.45 : 1),
+              transition: instant ? "none" : "opacity 0.4s ease",
+              paddingLeft: 10,
+              borderLeft: highlightRow ? "5px solid #2563eb" : "5px solid transparent",
+            }}>
+              <div style={{
+                fontSize: 16, fontWeight: 800,
+                color: highlightRow ? "#1d4ed8" : "#374151",
+                textAlign: "left",
+              }}>{row.name}</div>
+
+              {COLUMNS.map(function (col, c) {
+                let raw: number, frac: number, text: string;
+                if (col.key === "speed") {
+                  raw = row.speed;
+                  frac = speedFrac(raw);
+                  text = raw.toFixed(1) + "x";
+                } else {
+                  raw = row.vals[c];
+                  frac = raw / 100;
+                  text = raw.toFixed(1);
+                }
+                const prog = (cells[r] && cells[r][c]) || 0;
+                const widthPct = Math.max(0, Math.min(1, frac)) * 100 * prog;
+                const colHi = step >= 3 && col.key === "top1";
+                return (
+                  <div key={col.key} style={{
+                    position: "relative", height: 28,
+                    background: "#f3f4f6", borderRadius: 14,
+                    overflow: "hidden",
+                    boxShadow: colHi ? "0 0 0 2px rgba(" + col.base.join(",") + ",0.55)" : "none",
+                    transition: instant ? "none" : "box-shadow 0.4s ease",
+                  }}>
+                    <div style={{
+                      position: "absolute", top: 0, left: 0, bottom: 0,
+                      width: widthPct + "%",
+                      background: fillColor(col.base, frac),
+                      borderRadius: 14,
+                    }}></div>
+                    <div style={{
+                      position: "absolute", top: 0, left: 0, right: 0, bottom: 0,
+                      display: "flex", alignItems: "center", justifyContent: "center",
+                      fontSize: 14, fontWeight: 800,
+                      color: prog > 0.01 ? "#1f2937" : "#9ca3af",
+                      fontVariantNumeric: "tabular-nums",
+                    }}>{text}</div>
+                  </div>
+                );
+              })}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}