create-slide-deck 0.1.0

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

@@ -0,0 +1,223 @@
+import React from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, useRevealStep } from "../../../core/presets.ts";
+
+const anime = typeof window !== "undefined" ? (window as any).anime : null;
+
+const COLORS = {
+  idle: "#e5e7eb",
+  idleStroke: "#cbd5e1",
+  blue: "#4361ee",
+  purple: "#7c3aed",
+  green: "#059669",
+  text: "#313131",
+  line: "#d1d5db",
+};
+
+// id, x, y, label, focusColor, cluster (1 = gateway cluster, 2 = orders cluster)
+const NODES = [
+  { id: "gateway", x: 230, y: 150, label: "Gateway", color: COLORS.blue, cluster: 1 },
+  { id: "auth", x: 430, y: 90, label: "Auth", color: COLORS.blue, cluster: 1 },
+  { id: "users", x: 430, y: 230, label: "Users", color: COLORS.blue, cluster: 1 },
+  { id: "orders", x: 720, y: 150, label: "Orders", color: COLORS.purple, cluster: 2 },
+  { id: "products", x: 940, y: 110, label: "Products", color: COLORS.purple, cluster: 2 },
+  { id: "database", x: 940, y: 320, label: "Database", color: COLORS.green, cluster: 2 },
+  { id: "cache", x: 620, y: 410, label: "Cache", color: COLORS.green, cluster: 0 },
+  { id: "queue", x: 300, y: 410, label: "Queue", color: COLORS.green, cluster: 0 },
+];
+
+const LINKS: [string, string][] = [
+  ["gateway", "auth"],
+  ["gateway", "users"],
+  ["gateway", "orders"],
+  ["auth", "users"],
+  ["orders", "products"],
+  ["orders", "database"],
+  ["products", "database"],
+  ["orders", "cache"],
+  ["users", "queue"],
+  ["gateway", "queue"],
+];
+
+const ANNOTATIONS: Record<string, string> = {
+  gateway: "Edge router, 12k rps",
+  auth: "JWT, p99 18ms",
+  users: "Profile store, OK",
+  orders: "p99 2.8s — degraded",
+  products: "Catalog cache miss",
+  database: "Pool exhausted 50/50",
+};
+
+// Per-step camera transform on the 1200x560 base canvas.
+// scale s, then translate so the region of interest is centered.
+const CAMERAS: Record<number, { s: number; tx: number; ty: number }> = {
+  0: { s: 1, tx: 0, ty: 0 },
+  1: { s: 2.0, tx: -330, ty: -130 },
+  2: { s: 2.0, tx: -1010, ty: -210 },
+  3: { s: 1, tx: 0, ty: 0 },
+};
+
+function nodeById(id: string) {
+  for (let i = 0; i < NODES.length; i++) if (NODES[i].id === id) return NODES[i];
+  return null;
+}
+
+// Which clusters are "focused" (colored) at a given step.
+function focusedClusters(step: number): Record<number, boolean> {
+  if (step === 1) return { 1: true };
+  if (step === 2) return { 2: true };
+  if (step >= 3) return { 1: true, 2: true };
+  return {};
+}
+
+// Detail annotations are visible only while zoomed into a single cluster.
+function annotationsVisible(step: number) {
+  return step === 1 || step === 2;
+}
+
+export default function DemoZoomFocus(props: SlideComponentProps) {
+  const Reveal = props.Reveal;
+  const ref = useRevealStep(Reveal);
+  const step = ref[0], ready = ref[1], instant = ref[2];
+  const camRef = React.useRef<SVGGElement>(null);
+  const lastStep = React.useRef<number | null>(null);
+
+  React.useEffect(function () {
+    const g = camRef.current;
+    if (!g) return;
+    const s = step < 0 ? 0 : step;
+    const cam = CAMERAS[s] || CAMERAS[0];
+    const transform =
+      "translate(" + cam.tx + "px," + cam.ty + "px) scale(" + cam.s + ")";
+
+    // Skip animation on first paint / slide reset / no actual change.
+    if (instant || lastStep.current === null || lastStep.current === s) {
+      g.style.transform = transform;
+      lastStep.current = s;
+      return;
+    }
+    lastStep.current = s;
+
+    if (!anime || !anime.animate) {
+      g.style.transform = transform;
+      return;
+    }
+    anime.animate(g, {
+      translateX: cam.tx,
+      translateY: cam.ty,
+      scale: cam.s,
+      duration: 800,
+      ease: "inOutQuad",
+    });
+  }, [step, instant]);
+
+  const s = step < 0 ? 0 : step;
+  const focus = focusedClusters(s);
+  const showAnno = annotationsVisible(s);
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        background: "#ffffff",
+        opacity: ready ? 1 : 0,
+        transition: "opacity 0.2s ease",
+        fontFamily: CANVAS.fontFamily,
+        overflow: "hidden",
+      }}
+    >
+      <svg viewBox="0 0 1200 560" style={{ width: "100%", height: "100%", display: "block" }}>
+        <g
+          ref={camRef}
+          style={{
+            transformOrigin: "0px 0px",
+            transformBox: "view-box",
+            willChange: "transform",
+          }}
+        >
+          {LINKS.map(function (lk, i: number) {
+            const a = nodeById(lk[0]);
+            const b = nodeById(lk[1]);
+            if (!a || !b) return null;
+            return (
+              <line
+                key={"lk" + i}
+                x1={a.x}
+                y1={a.y}
+                x2={b.x}
+                y2={b.y}
+                stroke={COLORS.line}
+                strokeWidth={1.5}
+              />
+            );
+          })}
+
+          {NODES.map(function (n) {
+            const lit = n.cluster !== 0 && focus[n.cluster];
+            const fill = lit ? n.color : COLORS.idle;
+            const stroke = lit ? n.color : COLORS.idleStroke;
+            const labelColor = lit ? "#ffffff" : COLORS.text;
+            return (
+              <g key={n.id} style={{ transition: instant ? "none" : "all 0.4s ease" }}>
+                <circle
+                  cx={n.x}
+                  cy={n.y}
+                  r={34}
+                  fill={fill}
+                  stroke={stroke}
+                  strokeWidth={2}
+                  style={{ transition: instant ? "none" : "fill 0.4s ease, stroke 0.4s ease" }}
+                />
+                <text
+                  x={n.x}
+                  y={n.y}
+                  textAnchor="middle"
+                  dominantBaseline="central"
+                  style={{
+                    fontFamily: CANVAS.fontFamily,
+                    fontSize: 15,
+                    fontWeight: 700,
+                    fill: labelColor,
+                    transition: instant ? "none" : "fill 0.4s ease",
+                  }}
+                >
+                  {n.label}
+                </text>
+
+                {showAnno && lit && ANNOTATIONS[n.id] ? (
+                  <g style={{ opacity: 1, transition: instant ? "none" : "opacity 0.4s ease" }}>
+                    <rect
+                      x={n.x - 60}
+                      y={n.y + 40}
+                      width={120}
+                      height={26}
+                      rx={6}
+                      fill="#ffffff"
+                      stroke={n.color}
+                      strokeWidth={1}
+                    />
+                    <text
+                      x={n.x}
+                      y={n.y + 53}
+                      textAnchor="middle"
+                      dominantBaseline="central"
+                      style={{
+                        fontFamily: CANVAS.fontFamily,
+                        fontSize: 14,
+                        fontWeight: 600,
+                        fill: n.color,
+                      }}
+                    >
+                      {ANNOTATIONS[n.id]}
+                    </text>
+                  </g>
+                ) : null}
+              </g>
+            );
+          })}
+        </g>
+      </svg>
+    </div>
+  );
+}

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

@@ -0,0 +1,63 @@
+import type { ComponentType } from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import DemoCover from "./demo-cover.tsx";
+import DemoForceGraph from "./demo-force-graph.tsx";
+import DemoSankey from "./demo-sankey.tsx";
+import DemoCounter from "./demo-counter.tsx";
+import DemoRough from "./demo-rough.tsx";
+import DemoIconWall from "./demo-icon-wall.tsx";
+import DemoCode from "./demo-code.tsx";
+import DemoRadar from "./demo-radar.tsx";
+import DemoTimeline from "./demo-timeline.tsx";
+import DemoCardFlip from "./demo-card-flip.tsx";
+import DemoMath from "./demo-math.tsx";
+import DemoTreemap from "./demo-treemap.tsx";
+import DemoTabs from "./demo-tabs.tsx";
+import DemoPath from "./demo-path.tsx";
+import DemoHeatmap from "./demo-heatmap.tsx";
+import DemoFullbleedBars from "./demo-fullbleed-bars.tsx";
+import DemoDashboard from "./demo-dark-dashboard.tsx";
+import DemoBigText from "./demo-bigtext.tsx";
+import DemoBeforeAfter from "./demo-before-after.tsx";
+import DemoScreenshotAnnotate from "./demo-screenshot-annotate.tsx";
+import DemoFullbleedFlow from "./demo-fullbleed-flow.tsx";
+import DemoZoomFocus from "./demo-zoom-focus.tsx";
+import DemoChatBubbles from "./demo-chat-bubbles.tsx";
+import DemoStackedCards from "./demo-stacked-cards.tsx";
+import DemoConceptMap from "./demo-concept-map.tsx";
+import DemoNumberMorph from "./demo-number-morph.tsx";
+import DemoArcProgress from "./demo-arc-progress.tsx";
+import DemoEvalMatrix from "./demo-eval-matrix.tsx";
+
+export const components = {
+  DemoCover,
+  DemoForceGraph,
+  DemoSankey,
+  DemoCounter,
+  DemoRough,
+  DemoIconWall,
+  DemoCode,
+  DemoRadar,
+  DemoTimeline,
+  DemoCardFlip,
+  DemoMath,
+  DemoTreemap,
+  DemoTabs,
+  DemoPath,
+  DemoHeatmap,
+  DemoFullbleedBars,
+  DemoDashboard,
+  DemoBigText,
+  DemoBeforeAfter,
+  DemoScreenshotAnnotate,
+  DemoFullbleedFlow,
+  DemoZoomFocus,
+  DemoChatBubbles,
+  DemoStackedCards,
+  DemoConceptMap,
+  DemoNumberMorph,
+  DemoArcProgress,
+  DemoEvalMatrix,
+} satisfies Record<string, ComponentType<SlideComponentProps>>;
+
+export type ComponentName = keyof typeof components;

package/template-full/src/reveal/decks/demo-showcase/demo.css

@@ -0,0 +1,237 @@
+/* Demo deck supplementary styles */
+
+/* KaTeX essential overrides */
+.katex-display {
+  margin: 0.5em 0;
+}
+.katex {
+  font-size: 1.4em;
+}
+
+/* Prism code block dark theme */
+.demo-code-block {
+  background: #1e1e1e;
+  border-radius: 12px;
+  padding: 24px 28px;
+  font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
+  font-size: 15px;
+  line-height: 1.6;
+  overflow: hidden;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
+}
+.demo-code-block .token.keyword { color: #569cd6; }
+.demo-code-block .token.string { color: #ce9178; }
+.demo-code-block .token.function { color: #dcdcaa; }
+.demo-code-block .token.comment { color: #6a9955; font-style: italic; }
+.demo-code-block .token.number { color: #b5cea8; }
+.demo-code-block .token.operator { color: #d4d4d4; }
+.demo-code-block .token.punctuation { color: #d4d4d4; }
+.demo-code-block .token.class-name { color: #4ec9b0; }
+.demo-code-block .token.boolean { color: #569cd6; }
+.demo-code-block .token.template-string { color: #ce9178; }
+
+/* Card flip 3D */
+.flip-card {
+  perspective: 1000px;
+  width: 280px;
+  height: 350px;
+}
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.6s ease;
+  transform-style: preserve-3d;
+}
+.flip-card-inner.flipped {
+  transform: rotateY(180deg);
+}
+.flip-card-inner.instant {
+  transition: none;
+}
+.flip-card-face {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 30px;
+  box-sizing: border-box;
+}
+.flip-card-front {
+  background: #fff;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+}
+.flip-card-back {
+  background: linear-gradient(135deg, #4361ee, #3a0ca3);
+  color: #fff;
+  transform: rotateY(180deg);
+}
+
+/* Demo grid for icon wall */
+.demo-icon-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  max-width: 700px;
+  margin: 0 auto;
+}
+.demo-icon-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 10px;
+  border-radius: 12px;
+  background: #f8f9fa;
+  transition: background 0.3s ease, transform 0.3s ease;
+}
+.demo-icon-cell.colored {
+  background: #fff;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+}
+.demo-icon-cell .icon-label {
+  margin-top: 10px;
+  font-size: 13px;
+  color: #666;
+  font-weight: 500;
+}
+
+/* Tab bar for demo-tabs */
+.demo-tab-bar {
+  display: flex;
+  gap: 0;
+  border-bottom: 2px solid #eee;
+  margin-bottom: 24px;
+}
+.demo-tab-btn {
+  padding: 12px 28px;
+  border: none;
+  background: none;
+  font-size: 16px;
+  font-weight: 600;
+  color: #999;
+  cursor: pointer;
+  position: relative;
+  transition: color 0.3s ease;
+}
+.demo-tab-btn.active {
+  color: #4361ee;
+}
+.demo-tab-content {
+  background: #fff;
+  border-radius: 12px;
+  padding: 32px;
+  min-height: 360px;
+  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
+}
+
+/* Counter cards */
+.demo-counter-row {
+  display: flex;
+  gap: 24px;
+  justify-content: center;
+}
+.demo-counter-card {
+  background: #fff;
+  border-radius: 16px;
+  padding: 28px 24px;
+  width: 220px;
+  text-align: center;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
+  border-top: 4px solid;
+}
+.demo-counter-value {
+  font-size: 42px;
+  font-weight: 800;
+  line-height: 1.2;
+}
+.demo-counter-label {
+  font-size: 14px;
+  color: #888;
+  margin-top: 6px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+.demo-progress-bar {
+  height: 6px;
+  border-radius: 3px;
+  background: #eee;
+  margin-top: 16px;
+  overflow: hidden;
+}
+.demo-progress-fill {
+  height: 100%;
+  border-radius: 3px;
+  width: 0%;
+  transition: width 1s ease;
+}
+
+/* Cover slide */
+.demo-cover {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+  color: #fff;
+  position: relative;
+  overflow: hidden;
+}
+.demo-cover-title {
+  font-size: 64px;
+  font-weight: 800;
+  letter-spacing: -1px;
+  margin: 0;
+}
+.demo-cover-title span {
+  display: inline-block;
+  opacity: 0;
+}
+.demo-cover-subtitle {
+  font-size: 22px;
+  color: rgba(255,255,255,0.6);
+  margin-top: 16px;
+  font-weight: 400;
+}
+.demo-cover-dot {
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0;
+}
+
+/* Formula cards */
+.demo-formula-card {
+  background: #fff;
+  border-radius: 16px;
+  padding: 24px 40px;
+  max-width: 900px;
+  margin: 0 auto 16px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
+}
+.demo-formula-label {
+  font-size: 16px;
+  font-weight: 700;
+  color: #4361ee;
+  margin-bottom: 8px;
+}
+
+/* Rough diagram */
+.demo-rough-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.demo-rough-container svg {
+  width: 1100px;
+  height: 500px;
+}

package/template-full/src/reveal/decks/demo-showcase/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Component Showcase — Demo Deck</title>
+</head>
+<body>
+  <svg class="global-svg-defs" width="0" height="0" aria-hidden="true" focusable="false">
+    <defs>
+      <marker id="arrow-gray" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="8.5" markerHeight="8.5" orient="auto-start-reverse">
+        <path d="M 0 0 L 10 5 L 0 10 z" fill="#BFBFBF"></path>
+      </marker>
+      <marker id="arrow-red" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="8.5" markerHeight="8.5" orient="auto-start-reverse">
+        <path d="M 0 0 L 10 5 L 0 10 z" fill="#C00000"></path>
+      </marker>
+    </defs>
+  </svg>
+  <div class="reveal">
+    <div class="slides"></div>
+  </div>
+  <script type="module" src="./main.ts"></script>
+</body>
+</html>

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

@@ -0,0 +1,7 @@
+import "katex/dist/katex.min.css";
+import "./demo.css";
+import { components } from "./components/registry.ts";
+import { buildSlides } from "./slides.ts";
+import { initDeck } from "../../core/deck-init.ts";
+
+initDeck({ buildSlides, components });