create-slide-deck 0.1.0

package/template-minimal/src/reveal/core/design.ts

@@ -0,0 +1,46 @@
+export const C = {
+  white: "#FFFFFF",
+  black: "#000000",
+  body: "#313131",
+  muted: "#767676",
+  faint: "#F7F7F7",
+  line: "#BFBFBF",
+  soft: "#E7E6E6",
+  red: "#C00000",
+  redSoft: "#FFF3F3",
+  blue: "#00A6D6",
+  green: "#76B82A",
+  yellow: "#FFC000",
+  teal: "#1B556B",
+} as const;
+
+export function esc(value: string | number): string {
+  return String(value)
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+}
+
+const UNITLESS = new Set([
+  "opacity", "z-index", "font-weight", "line-height", "flex-grow",
+  "flex-shrink", "order", "zoom", "column-count", "fill-opacity",
+  "stroke-opacity", "stroke-miterlimit",
+]);
+
+export function style(obj: Record<string, string | number | undefined | null>): string {
+  return Object.entries(obj)
+    .filter((e): e is [string, string | number] => e[1] !== undefined && e[1] !== null)
+    .map(([key, value]) => {
+      if (typeof value === "number" && !UNITLESS.has(key)) return `${key}:${value}px`;
+      return `${key}:${value}`;
+    })
+    .join(";");
+}
+
+export function attrsToHtml(attrs: Record<string, string | number | boolean | undefined | null> = {}): string {
+  return Object.entries(attrs)
+    .filter((e): e is [string, string | number | boolean] => e[1] !== undefined && e[1] !== null && e[1] !== false)
+    .map(([key, value]) => (value === true ? esc(key) : `${esc(key)}="${esc(value as string | number)}"`))
+    .join(" ");
+}

package/template-minimal/src/reveal/core/layout.ts

@@ -0,0 +1,187 @@
+import type { Block, Slide, BlockSlideOptions, ReactSlideOptions } from "./types.ts";
+import { C, esc } from "./design.ts";
+import { defineSlide, htmlBlock, mountBlock, renderBlocks } from "./blocks.ts";
+
+export function placedHtml(
+  inner: string,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  {
+    id,
+    className = "",
+    fragment = true,
+    layer = "content",
+    css = {},
+  }: {
+    id?: string;
+    className?: string;
+    fragment?: boolean | number | null;
+    layer?: Block["layer"];
+    css?: Record<string, string | number>;
+  } = {},
+): Block {
+  return htmlBlock({
+    id,
+    html: inner,
+    x,
+    y,
+    w,
+    h,
+    className,
+    fragment,
+    layer,
+    css,
+  });
+}
+
+export function title(text: string): string {
+  return `<h1 class="slide-title">${esc(text)}</h1>`;
+}
+
+export function pageNo(n: number): string {
+  return `<div class="page-no">${String(n).padStart(2, "0")}</div>`;
+}
+
+export function svg(
+  width: number,
+  height: number,
+  body: string,
+  attrs: string = "",
+): string {
+  return `<svg class="native-svg" viewBox="0 0 ${width} ${height}" ${attrs}>${body}</svg>`;
+}
+
+export function blockSlide({
+  title: titleText,
+  blocks = [],
+  page,
+  notes = "",
+  html = "",
+  className = "native-slide",
+  attrs = {},
+}: BlockSlideOptions = {}): Slide {
+  const chrome = [
+    titleText ? title(titleText) : "",
+    html,
+    renderBlocks(blocks),
+    page !== undefined && page !== null ? pageNo(page) : "",
+  ].filter(Boolean).join("\n");
+  return defineSlide({ className, attrs, html: chrome, notes });
+}
+
+export function tag(text: string, color: string): string {
+  return `<span class="tag" style="border-color:${color};color:${color}">${esc(text)}</span>`;
+}
+
+export function at(
+  html: string,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  fragment: boolean | number | null = true,
+  className: string = "",
+): Block {
+  return placedHtml(html, x, y, w, h, { fragment, className });
+}
+
+export function claim(
+  text: string,
+  x: number,
+  y: number,
+  w: number,
+  color: string = C.red,
+  step: boolean | number | null = null,
+): Block {
+  return placedHtml(
+    `<div class="claim" style="color:${color}">${esc(text)}</div>`,
+    x,
+    y,
+    w,
+    80,
+    { fragment: step ?? true },
+  );
+}
+
+/**
+ * Shortcut for slides backed by a React mount component.
+ * Generates mountBlock + invisible fragment triggers automatically.
+ *
+ *   reactSlide({ title: "...", component: "FaultHeatmap", steps: 7, notes: "..." })
+ */
+export function reactSlide<C extends string = string>(
+  {
+    title: titleText,
+    component,
+    steps = 0,
+    notes = "",
+    page,
+    x = 20, y = 70, w = 1240, h = 640,
+  }: ReactSlideOptions<C>,
+): Slide {
+  return blockSlide({
+    title: titleText,
+    page,
+    blocks: [
+      mountBlock({
+        x, y, w, h,
+        fragment: false,
+        mount: { library: "react", exportName: component },
+      }),
+      ...Array.from({ length: steps }, function (_, i): Block {
+        return placedHtml(
+          '<span class="cascade-trigger"></span>',
+          0, 0, 1, 1,
+          { fragment: i }
+        );
+      }),
+    ],
+    notes,
+  });
+}
+
+export function statCard(
+  value: string,
+  description: string,
+  {
+    variant = "large-stat",
+    centered = false,
+    extra = "",
+  }: { variant?: string; centered?: boolean; extra?: string } = {},
+): string {
+  const cls = [variant, centered ? "centered" : ""].filter(Boolean).join(" ");
+  return `<div class="${cls}"><strong>${value}</strong><span>${esc(description)}</span>${extra}</div>`;
+}
+
+export function table(
+  headers: string[],
+  rows: string[][],
+  {
+    title: titleText = "",
+    highlightCol = -1,
+  }: { title?: string; highlightCol?: number } = {},
+): string {
+  const headCells = headers.map((h) => `<th>${esc(h)}</th>`).join("");
+  const bodyRows = rows.map((cells) =>
+    `<tr>${cells.map((c, i) =>
+      `<td${i === highlightCol ? ' class="red-cell"' : ""}>${esc(c)}</td>`
+    ).join("")}</tr>`
+  ).join("");
+  return `${titleText ? `<div class="table-title">${esc(titleText)}</div>` : ""}
+    <table class="native-table">
+      <thead><tr>${headCells}</tr></thead>
+      <tbody>${bodyRows}</tbody>
+    </table>`;
+}
+
+export function dotList(
+  titleText: string,
+  items: { label: string; color: string }[],
+): string {
+  const rows = items.map(({ label, color }) =>
+    `<div class="fault-dot-row"><span>${esc(label)}</span><b style="background:${color}"></b></div>`
+  ).join("");
+  return `<div class="fault-panel"><h3>${esc(titleText)}</h3>${rows}</div>`;
+}

package/template-minimal/src/reveal/core/mount-registry.ts

@@ -0,0 +1,41 @@
+import React from "react";
+import { createRoot, type Root } from "react-dom/client";
+import type { ComponentRegistry, MountContext } from "./types.ts";
+
+const roots = new WeakMap<Element, Root>();
+
+let registeredComponents: ComponentRegistry = {};
+
+export function registerComponents(components: ComponentRegistry): void {
+  registeredComponents = components;
+}
+
+export function hydrate(root: Element, ctx: MountContext): void {
+  root.querySelectorAll<HTMLElement>(".block-mount[data-mount-library]").forEach((el) => {
+    if (roots.has(el)) return;
+    const exportName = el.dataset.mountExport;
+    if (!exportName) return;
+    const Component = registeredComponents[exportName];
+    if (!Component) {
+      console.warn(`[mount-registry] component '${exportName}' not found in registry`);
+      return;
+    }
+    const propsStr = el.dataset.mountProps;
+    const extraProps = propsStr ? JSON.parse(propsStr) : {};
+    const reactRoot = createRoot(el);
+    reactRoot.render(
+      React.createElement(Component, { ...extraProps, Reveal: ctx.Reveal })
+    );
+    roots.set(el, reactRoot);
+  });
+}
+
+export function cleanup(root: Element): void {
+  root.querySelectorAll<HTMLElement>(".block-mount[data-mount-library]").forEach((el) => {
+    const reactRoot = roots.get(el);
+    if (reactRoot) {
+      reactRoot.unmount();
+      roots.delete(el);
+    }
+  });
+}

package/template-minimal/src/reveal/core/presets.ts

@@ -0,0 +1,189 @@
+import React, { useState, useEffect, type ReactNode, type CSSProperties } from "react";
+import type { RevealInstance } from "./types.ts";
+
+export const MIN_FONT = 14;
+
+export const FONT = {
+  hero: 64,
+  heading: 40,
+  title: 20,
+  body: 16,
+  caption: 14,
+} as const;
+
+export const COLOR = {
+  text: "#313131",
+  muted: "#767676",
+  bg: "#ffffff",
+  bgSubtle: "rgba(67, 97, 238, 0.04)",
+  border: "#e5e7eb",
+  blue: "#4361ee",
+  purple: "#7c3aed",
+  pink: "#f72585",
+  cyan: "#4cc9f0",
+  green: "#059669",
+  orange: "#f78166",
+  success: "#059669",
+  danger: "#dc2626",
+  warn: "#d97706",
+  series: ["#4361ee", "#7c3aed", "#f72585", "#4cc9f0", "#059669", "#f78166"],
+} as const;
+
+export const NODE = {
+  radius: 42,
+  radiusAccent: 46,
+  iconSize: 28,
+  strokeWidth: 3,
+  strokeWidthAccent: 4,
+  labelFont: 20,
+  subFont: 15,
+  labelColor: "#313131",
+} as const;
+
+export const DETAIL = {
+  width: 580,
+  height: 220,
+  margin: 14,
+  scanStep: 14,
+  illustrationRatio: 0.5,
+  titleFont: 20,
+  bodyFont: 16,
+  titleColor: "#313131",
+  bodyColor: "#767676",
+  bgOpacity: 0.85,
+} as const;
+
+export const TAG = {
+  font: 14,
+  pillFont: 14,
+  pillHeight: 24,
+  pillRadius: 12,
+} as const;
+
+export const EDGE = {
+  color: "#BFBFBF",
+  colorCascade: "#C00000",
+  width: 2.5,
+  markerSize: 7,
+} as const;
+
+export const CANVAS = {
+  fontFamily: "Aptos, Arial, sans-serif",
+} as const;
+
+export function annotationStyle(): CSSProperties {
+  return {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    fontFamily: CANVAS.fontFamily,
+    gap: 20,
+    padding: "12px 24px",
+    boxSizing: "border-box",
+  };
+}
+
+export function illustrationStyle(): CSSProperties {
+  return {
+    flex: "0 0 auto",
+    width: (DETAIL.illustrationRatio * 100) + "%",
+    maxHeight: "100%",
+  };
+}
+
+export function annotationTitleStyle(): CSSProperties {
+  return {
+    fontSize: DETAIL.titleFont,
+    fontWeight: 800,
+    color: DETAIL.titleColor,
+    lineHeight: 1.4,
+  };
+}
+
+export function annotationBodyStyle(): CSSProperties {
+  return {
+    fontSize: DETAIL.bodyFont,
+    fontWeight: 700,
+    color: DETAIL.bodyColor,
+    lineHeight: 1.3,
+  };
+}
+
+export function vis(cur: number, req: number, instant: boolean): CSSProperties {
+  const show = cur >= req ? 1 : 0;
+  return { opacity: show, transition: instant ? "none" : "opacity 0.45s ease" };
+}
+
+export function visExact(cur: number, req: number, instant: boolean): CSSProperties {
+  const show = cur === req ? 1 : 0;
+  return { opacity: show, transition: instant ? "none" : "opacity 0.35s ease" };
+}
+
+export function getStep(Reveal: RevealInstance): number {
+  if (!Reveal) return -1;
+  const slide = Reveal.getCurrentSlide();
+  if (!slide) return -1;
+  const visible = slide.querySelectorAll(".fragment.visible[data-fragment-index]");
+  let max = -1;
+  visible.forEach(function (el) {
+    const idx = parseInt(el.getAttribute("data-fragment-index") || "", 10);
+    if (!isNaN(idx) && idx > max) max = idx;
+  });
+  return max;
+}
+
+export function useRevealStep(Reveal: RevealInstance | null): [number, boolean, boolean] {
+  const [step, setStep] = useState(-1);
+  const [ready, setReady] = useState(false);
+  const [instant, setInstant] = useState(true);
+
+  useEffect(function () {
+    if (!Reveal) return;
+    const sync = function () { setStep(getStep(Reveal)); };
+    const onFragment = function () { setInstant(false); sync(); };
+    const onSlideChanged = function () {
+      setInstant(true);
+      setReady(false);
+      setStep(-1);
+      requestAnimationFrame(function () {
+        sync();
+        setReady(true);
+        requestAnimationFrame(function () { setInstant(false); });
+      });
+    };
+    Reveal.on("fragmentshown", onFragment);
+    Reveal.on("fragmenthidden", onFragment);
+    Reveal.on("slidechanged", onSlideChanged);
+    requestAnimationFrame(function () {
+      sync();
+      setReady(true);
+      requestAnimationFrame(function () { setInstant(false); });
+    });
+    return function () {
+      Reveal.off("fragmentshown", onFragment);
+      Reveal.off("fragmenthidden", onFragment);
+      Reveal.off("slidechanged", onSlideChanged);
+    };
+  }, [Reveal]);
+
+  return [step, ready, instant];
+}
+
+interface SlideCanvasProps {
+  Reveal: RevealInstance;
+  W?: number;
+  H?: number;
+  children: (step: number, instant: boolean) => ReactNode;
+}
+
+export function SlideCanvas(props: SlideCanvasProps) {
+  const [step, ready, instant] = useRevealStep(props.Reveal);
+  return React.createElement("svg", {
+    viewBox: "0 0 " + (props.W || 1200) + " " + (props.H || 560),
+    style: { width: "100%", height: "100%", display: "block",
+             opacity: ready ? 1 : 0, transition: "opacity 0.2s ease" },
+  }, props.children(step, instant));
+}

package/template-minimal/src/reveal/core/runtime.ts

@@ -0,0 +1,141 @@
+import type { RevealInstance, ComponentRegistry, MountContext } from "./types.ts";
+import * as mountRegistry from "./mount-registry.ts";
+
+declare global {
+  interface SVGPathElement {
+    _rcaDrawable?: any;
+  }
+}
+
+function connectorLength(path: SVGPathElement): number {
+  try {
+    return path.getTotalLength();
+  } catch {
+    return 0;
+  }
+}
+
+function prepareConnector(path: SVGPathElement, anime: any): void {
+  if (anime?.svg?.createDrawable) {
+    const isVisible = path.classList.contains("visible");
+    path._rcaDrawable = anime.svg.createDrawable(path, 0, isVisible ? 1 : 0)[0];
+    return;
+  }
+  const length = connectorLength(path);
+  if (!length) return;
+  path.dataset.length = String(length);
+  path.style.strokeDasharray = String(length);
+  path.style.strokeDashoffset = path.classList.contains("visible") ? "0" : String(length);
+}
+
+function animateConnector(path: SVGPathElement, anime: any): void {
+  if (anime?.svg?.createDrawable) {
+    const drawable = path._rcaDrawable || anime.svg.createDrawable(path, 0, 0)[0];
+    path._rcaDrawable = drawable;
+    anime.animate(drawable, {
+      draw: ["0 0", "0 1"],
+      duration: 420,
+      ease: "outCubic",
+    });
+    return;
+  }
+  const length = Number(path.dataset.length || connectorLength(path));
+  if (!length) return;
+  path.style.strokeDasharray = String(length);
+  path.style.strokeDashoffset = String(length);
+  anime.animate(path, {
+    strokeDashoffset: [length, 0],
+    duration: 420,
+    ease: "outCubic",
+  });
+}
+
+function resetConnector(path: SVGPathElement): void {
+  if (path._rcaDrawable) {
+    path._rcaDrawable.setAttribute("draw", "0 0");
+    return;
+  }
+  const length = Number(path.dataset.length || connectorLength(path));
+  if (!length) return;
+  path.style.strokeDashoffset = String(length);
+}
+
+function animateNode(fragment: Element, anime: any): void {
+  if (!fragment.querySelector(".icon-node, .claim, .large-stat, .pill, .result-box, .chart-shell")) return;
+  anime.animate(fragment, {
+    opacity: [0, 1],
+    scale: [0.965, 1],
+    duration: 260,
+    ease: "outQuad",
+  });
+}
+
+function prepareSlide(slide: Element, anime: any): void {
+  slide.querySelectorAll<SVGPathElement>("path[data-connector='true']").forEach((path) => prepareConnector(path, anime));
+}
+
+function connectorsForFragment(fragment: Element): SVGPathElement[] {
+  const slide = fragment.closest("section");
+  const index = fragment.getAttribute("data-fragment-index");
+  if (!slide || index === null) return [];
+  return [...slide.querySelectorAll<SVGPathElement>(`path[data-connector='true'][data-fragment-index="${index}"]`)];
+}
+
+export function installRuntime(
+  Reveal: RevealInstance,
+  anime: any,
+  components: ComponentRegistry
+): void {
+  if (!Reveal || !anime?.animate) return;
+
+  mountRegistry.registerComponents(components);
+
+  const ctx: MountContext = { anime, Reveal };
+
+  Reveal.on("ready", (event: any) => {
+    prepareSlide(event.currentSlide, anime);
+    mountRegistry.hydrate(event.currentSlide, ctx);
+  });
+
+  Reveal.on("slidechanged", (event: any) => {
+    const mounts: NodeListOf<HTMLElement> = event.currentSlide.querySelectorAll(".block-mount");
+    mounts.forEach((el: HTMLElement) => { el.style.visibility = "hidden"; });
+
+    prepareSlide(event.currentSlide, anime);
+    mountRegistry.hydrate(event.currentSlide, ctx);
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        mounts.forEach((el: HTMLElement) => { el.style.visibility = ""; });
+      });
+    });
+  });
+
+  Reveal.on("fragmentshown", (event: any) => {
+    const fragment = event.fragment as Element;
+    if (fragment.matches("path[data-connector='true']")) {
+      animateConnector(fragment as unknown as SVGPathElement, anime);
+    } else {
+      connectorsForFragment(fragment).forEach((path) => {
+        animateConnector(path, anime);
+      });
+      animateNode(fragment, anime);
+      mountRegistry.hydrate(fragment, ctx);
+    }
+  });
+
+  Reveal.on("fragmenthidden", (event: any) => {
+    const fragment = event.fragment as Element;
+    if (fragment.matches("path[data-connector='true']")) {
+      resetConnector(fragment as unknown as SVGPathElement);
+    } else {
+      connectorsForFragment(fragment).forEach(resetConnector);
+    }
+  });
+
+  document.querySelectorAll<Element>(".reveal .slides section").forEach((slide) => {
+    prepareSlide(slide, anime);
+  });
+  const initialSlide = Reveal.getCurrentSlide();
+  if (initialSlide) mountRegistry.hydrate(initialSlide, ctx);
+}