create-slide-deck 0.1.0

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

@@ -0,0 +1,257 @@
+import React from "react";
+import { CANVAS, useRevealStep } from "../../../core/presets.ts";
+import type { SlideComponentProps } from "../../../core/types.ts";
+
+const anime = typeof window !== "undefined" ? (window as any).anime : null;
+
+// side: "left" = Engineer (blue), "right" = SRCA System (purple)
+const MESSAGES = [
+  {
+    side: "left",
+    who: "E",
+    text: "Service latency spiked to 2.8s on the orders endpoint",
+  },
+  {
+    side: "right",
+    who: "S",
+    text: "Analyzing traces... Found 3 anomalous spans in the orders → payments path",
+  },
+  {
+    side: "left",
+    who: "E",
+    text: "What's the root cause?",
+  },
+  {
+    side: "right",
+    who: "S",
+    text:
+      "Root cause: payments-db connection pool exhausted (max_connections=50, active=50). Confidence: 94.2%",
+  },
+];
+
+const STYLE: Record<string, { bubble: string; avatar: string }> = {
+  left: { bubble: "#e8f0fe", avatar: "#4361ee" },
+  right: { bubble: "#f3e8ff", avatar: "#7c3aed" },
+};
+
+function Bubble(props: { msg: any; visible: boolean; instant: boolean }) {
+  const msg = props.msg;
+  const visible = props.visible;
+  const instant = props.instant;
+  const ref = React.useRef<HTMLDivElement>(null);
+  const done = React.useRef(false);
+  const isLeft = msg.side === "left";
+  const pal = STYLE[msg.side];
+
+  React.useEffect(function () {
+    const el = ref.current;
+    if (!el) return;
+
+    if (!visible) {
+      // Pre-position off-screen so the entrance reads cleanly when revealed.
+      done.current = false;
+      el.style.opacity = String(0);
+      el.style.transform = "translateX(" + (isLeft ? -40 : 40) + "px)";
+      return;
+    }
+
+    if (done.current) {
+      el.style.opacity = String(1);
+      el.style.transform = "translateX(0px)";
+      return;
+    }
+    done.current = true;
+
+    if (instant || !anime || !anime.animate) {
+      el.style.opacity = String(1);
+      el.style.transform = "translateX(0px)";
+      return;
+    }
+
+    el.style.opacity = String(0);
+    el.style.transform = "translateX(" + (isLeft ? -40 : 40) + "px)";
+    anime.animate(el, {
+      opacity: [0, 1],
+      translateX: [isLeft ? -40 : 40, 0],
+      duration: 450,
+      ease: "outCubic",
+    });
+  }, [visible, instant, isLeft]);
+
+  const avatar = (
+    <div
+      style={{
+        flex: "0 0 auto",
+        width: 36,
+        height: 36,
+        borderRadius: "50%",
+        background: pal.avatar,
+        color: "#ffffff",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: 16,
+        fontWeight: 800,
+      }}
+    >
+      {msg.who}
+    </div>
+  );
+
+  return (
+    <div
+      ref={ref}
+      style={{
+        display: "flex",
+        flexDirection: isLeft ? "row" : "row-reverse",
+        alignItems: "flex-end",
+        gap: 10,
+        opacity: 0,
+        willChange: "transform, opacity",
+      }}
+    >
+      {avatar}
+      <div
+        style={{
+          position: "relative",
+          maxWidth: "65%",
+          background: pal.bubble,
+          color: "#1f2937",
+          padding: "16px 20px",
+          borderRadius: 16,
+          fontSize: 16,
+          fontWeight: 500,
+          lineHeight: 1.45,
+          boxShadow: "0 2px 6px rgba(0,0,0,0.08)",
+        }}
+      >
+        {msg.text}
+        <span
+          style={
+            isLeft
+              ? {
+                  position: "absolute",
+                  left: -7,
+                  bottom: 10,
+                  width: 0,
+                  height: 0,
+                  borderTop: "7px solid transparent",
+                  borderBottom: "7px solid transparent",
+                  borderRight: "8px solid " + pal.bubble,
+                }
+              : {
+                  position: "absolute",
+                  right: -7,
+                  bottom: 10,
+                  width: 0,
+                  height: 0,
+                  borderTop: "7px solid transparent",
+                  borderBottom: "7px solid transparent",
+                  borderLeft: "8px solid " + pal.bubble,
+                }
+          }
+        />
+      </div>
+    </div>
+  );
+}
+
+function SummaryCard(props: { visible: boolean; instant: boolean }) {
+  const visible = props.visible;
+  const instant = props.instant;
+  const ref = React.useRef<HTMLDivElement>(null);
+  const done = React.useRef(false);
+
+  React.useEffect(function () {
+    const el = ref.current;
+    if (!el) return;
+    if (!visible) {
+      done.current = false;
+      el.style.opacity = String(0);
+      el.style.transform = "translateY(16px)";
+      return;
+    }
+    if (done.current) {
+      el.style.opacity = String(1);
+      el.style.transform = "translateY(0px)";
+      return;
+    }
+    done.current = true;
+    if (instant || !anime || !anime.animate) {
+      el.style.opacity = String(1);
+      el.style.transform = "translateY(0px)";
+      return;
+    }
+    el.style.opacity = String(0);
+    el.style.transform = "translateY(16px)";
+    anime.animate(el, {
+      opacity: [0, 1],
+      translateY: [16, 0],
+      duration: 450,
+      ease: "outCubic",
+    });
+  }, [visible, instant]);
+
+  return (
+    <div
+      ref={ref}
+      style={{
+        marginTop: 8,
+        alignSelf: "center",
+        background: "#ecfdf5",
+        border: "1px solid #059669",
+        color: "#065f46",
+        padding: "12px 22px",
+        borderRadius: 12,
+        fontSize: 16,
+        fontWeight: 700,
+        opacity: 0,
+        willChange: "transform, opacity",
+      }}
+    >
+      Diagnosed in 4.2 min vs. 30+ min manual
+    </div>
+  );
+}
+
+export default function DemoChatBubbles(props: SlideComponentProps) {
+  const Reveal = props.Reveal;
+  const ref = useRevealStep(Reveal);
+  const step = ref[0], ready = ref[1], instant = ref[2];
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        background: "#ffffff",
+        opacity: ready ? 1 : 0,
+        transition: "opacity 0.2s ease",
+        fontFamily: CANVAS.fontFamily,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        boxSizing: "border-box",
+      }}
+    >
+      <div
+        style={{
+          width: "100%",
+          maxWidth: 900,
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+          padding: "0 24px",
+          boxSizing: "border-box",
+        }}
+      >
+        {MESSAGES.map(function (m, i) {
+          return (
+            <Bubble key={"m" + i} msg={m} visible={step >= i} instant={instant} />
+          );
+        })}
+        <SummaryCard visible={step >= MESSAGES.length} instant={instant} />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,136 @@
+import React from "react";
+import Prism from "prismjs";
+import { CANVAS, useRevealStep } from "../../../core/presets.ts";
+import type { SlideComponentProps } from "../../../core/types.ts";
+
+const CODE = [
+  "async function loadUsers(url) {",
+  "  const cache = new Map();",
+  "  let attempt = 0;",
+  "  const max = 3;",
+  "",
+  "  const res = await fetch(url);",
+  "  const data = await res.json();",
+  "  const active = data.filter(u => u.active);",
+  "  cache.set(url, active);",
+  "  return active;",
+  "",
+  "  // retry handled by caller",
+  "  } catch (err) {",
+  "    console.error('load failed', err);",
+  "    throw err;",
+  "}",
+].join("\n");
+
+// Groups of 1-based line ranges that light up per step.
+const GROUPS: (number[] | null)[] = [
+  null,            // step 0: nothing highlighted
+  [1, 4],          // step 1: signature + setup
+  [5, 9],          // step 2: main logic
+  [10, 14],        // step 3: error handling
+];
+
+const PRISM_CSS = "\
+.dc-code .token.keyword{color:#569cd6;}\
+.dc-code .token.string{color:#ce9178;}\
+.dc-code .token.function{color:#dcdcaa;}\
+.dc-code .token.comment{color:#6a9955;}\
+.dc-code .token.number{color:#b5cea8;}\
+.dc-code .token.boolean{color:#569cd6;}\
+.dc-code .token.operator{color:#d4d4d4;background:transparent;}\
+.dc-code .token.punctuation{color:#d4d4d4;}\
+.dc-code .token.class-name{color:#4ec9b0;}\
+.dc-code .token.property{color:#9cdcfe;}";
+
+function highlightLine(line: string) {
+  return Prism.highlight(line, Prism.languages.javascript, "javascript");
+}
+
+export default function DemoCode({ Reveal }: SlideComponentProps) {
+  const ref = useRevealStep(Reveal);
+  const step = ref[0], ready = ref[1], instant = ref[2];
+
+  const lines = CODE.split("\n");
+  const active = GROUPS[step] || null;
+
+  function lineStyle(idx: number) {
+    const n = idx + 1;
+    const on = active && n >= active[0] && n <= active[1];
+    return {
+      display: "flex",
+      padding: "0 14px",
+      background: on ? "rgba(38,79,120,0.30)" : "transparent",
+      borderLeft: on ? "3px solid #d7ba7d" : "3px solid transparent",
+      transition: instant ? "none" : "background 0.4s ease, border-color 0.4s ease",
+    };
+  }
+
+  return (
+    <div style={{
+      opacity: ready ? 1 : 0,
+      transition: "opacity 0.2s ease",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 30,
+      fontFamily: CANVAS.fontFamily,
+      width: "100%",
+      height: "100%",
+    }}>
+      <style dangerouslySetInnerHTML={{ __html: PRISM_CSS }} />
+
+      <div style={{
+        background: "#1e1e1e",
+        borderRadius: 12,
+        padding: "20px 0",
+        boxShadow: "0 8px 30px rgba(0,0,0,0.35)",
+        fontFamily: "'JetBrains Mono','Consolas','Courier New',monospace",
+        fontSize: 17,
+        lineHeight: 1.55,
+        color: "#d4d4d4",
+        minWidth: 640,
+        maxWidth: 720,
+      }} className="dc-code">
+        {lines.map(function (line, idx) {
+          return (
+            <div key={idx} style={lineStyle(idx)}>
+              <span style={{
+                width: 34,
+                flex: "0 0 auto",
+                textAlign: "right",
+                paddingRight: 16,
+                color: "#6e7681",
+                userSelect: "none",
+              }}>{idx + 1}</span>
+              <span
+                style={{ whiteSpace: "pre", flex: 1 }}
+                dangerouslySetInnerHTML={{ __html: highlightLine(line) || "&nbsp;" }}
+              />
+            </div>
+          );
+        })}
+      </div>
+
+      <div style={{
+        opacity: step >= 4 ? 1 : 0,
+        transition: instant ? "none" : "opacity 0.45s ease",
+        width: 300,
+        flex: "0 0 auto",
+        background: "#ffffff",
+        borderRadius: 14,
+        padding: "24px 26px",
+        boxShadow: "0 6px 24px rgba(0,0,0,0.12)",
+      }}>
+        <div style={{ fontSize: 19, fontWeight: 800, color: "#4361ee", marginBottom: 12 }}>
+          Fetch-process-guard
+        </div>
+        <div style={{ fontSize: 15, fontWeight: 600, color: "#555", lineHeight: 1.55 }}>
+          Set up state and bounds, await the network call, then filter and cache
+          the result. Errors are logged and re-thrown so the caller can decide
+          whether to retry.
+        </div>
+      </div>
+    </div>
+  );
+}