create-slide-deck 0.1.0

package/template-full/src/reveal/components/charts.tsx

@@ -0,0 +1,213 @@
+import React from "react";
+import type { ReactNode } from "react";
+import { CANVAS, MIN_FONT } from "../core/presets.ts";
+
+/**
+ * Reusable SVG chart primitives.
+ * Each is a plain function returning an SVG sub-tree (not a full component).
+ */
+
+export interface HorizontalBarItem {
+  label: string;
+  value: number;
+  maxValue?: number;
+  color?: string;
+  bold?: boolean;
+  extra?: ReactNode;
+}
+
+export interface HorizontalBarsProps {
+  items?: HorizontalBarItem[];
+  x?: number;
+  y?: number;
+  barX?: number;
+  barMaxW?: number;
+  rowH?: number;
+  labelFont?: number;
+  valueFont?: number;
+  fontFamily?: string;
+}
+
+export interface BubbleMatrixRow {
+  label: string;
+  values?: number[];
+}
+
+export interface BubbleMatrixProps {
+  rows?: BubbleMatrixRow[];
+  columns?: string[];
+  x?: number;
+  y?: number;
+  colW?: number;
+  rowH?: number;
+  maxR?: number;
+  colorFn?: (value: number) => string;
+  fontFamily?: string;
+  headerFont?: number;
+  labelFont?: number;
+}
+
+export interface StatStackItem {
+  value: string | number;
+  label: string;
+}
+
+export interface StatStackProps {
+  items?: StatStackItem[];
+  cx?: number;
+  y?: number;
+  gap?: number;
+  valueFont?: number;
+  labelFont?: number;
+  color?: string;
+  fontFamily?: string;
+}
+
+/**
+ * Labeled horizontal bar chart.
+ * items: { label, value, maxValue, color, bold, extra }[]  (extra: optional JSX after the bar)
+ */
+export function HorizontalBars(props: HorizontalBarsProps): ReactNode {
+  const items = props.items || [];
+  const x = props.x || 0;
+  const y = props.y || 0;
+  const barX = props.barX != null ? props.barX : x + 120;
+  const barMaxW = props.barMaxW || 240;
+  const rowH = props.rowH || 32;
+  const labelFont = Math.max(props.labelFont || 13, MIN_FONT - 1);
+  const valueFont = Math.max(props.valueFont || 13, MIN_FONT - 1);
+  const fontFamily = props.fontFamily || CANVAS.fontFamily;
+
+  return items.map(function (item, i) {
+    const ry = y + i * rowH;
+    const cy = ry + rowH / 2;
+    const maxValue = item.maxValue || 1;
+    const barW = (item.value / maxValue) * barMaxW;
+    const weight = item.bold ? 900 : 700;
+
+    return React.createElement(
+      "g",
+      { key: i },
+      React.createElement(
+        "text",
+        {
+          x: barX - 8, y: cy, textAnchor: "end", dominantBaseline: "middle",
+          fontSize: labelFont, fontWeight: weight, fill: item.color || "#313131",
+          fontFamily: fontFamily,
+        },
+        item.label
+      ),
+      React.createElement("rect", {
+        x: barX, y: ry + 5, width: barW, height: rowH - 12, rx: 3,
+        fill: item.color || "#00A6D6", fillOpacity: 0.18,
+        stroke: item.color || "#00A6D6", strokeWidth: item.bold ? 2 : 1,
+      }),
+      React.createElement(
+        "text",
+        {
+          x: barX + barW + 6, y: cy, dominantBaseline: "middle",
+          fontSize: valueFont, fontWeight: 900, fill: item.color || "#313131",
+          fontFamily: fontFamily,
+        },
+        item.value
+      ),
+      item.extra != null
+        ? React.createElement("g", { transform: "translate(0," + cy + ")" }, item.extra)
+        : null
+    );
+  });
+}
+
+/**
+ * Grid of sized/colored bubbles.
+ * rows: { label, values: number[] }[]
+ * columns: string[] headers
+ */
+export function BubbleMatrix(props: BubbleMatrixProps): ReactNode {
+  const rows = props.rows || [];
+  const columns = props.columns || [];
+  const x = props.x || 0;
+  const y = props.y || 0;
+  const colW = props.colW || 50;
+  const rowH = props.rowH || 17;
+  const maxR = props.maxR || 7;
+  const colorFn = props.colorFn || function () { return "#00A6D6"; };
+  const fontFamily = props.fontFamily || CANVAS.fontFamily;
+  const headerFont = Math.max(props.headerFont || 12, MIN_FONT - 2);
+  const labelFont = Math.max(props.labelFont || 12.5, MIN_FONT - 2);
+
+  function colX(i: number) { return x + colW * (i + 0.5); }
+
+  const headers = columns.map(function (c, i) {
+    return React.createElement(
+      "text",
+      {
+        key: "h" + i, x: colX(i), y: y - 10, textAnchor: "middle",
+        fontSize: headerFont, fontWeight: 800, fill: "#313131", fontFamily: fontFamily,
+      },
+      c
+    );
+  });
+
+  const body = rows.map(function (r, ri) {
+    const ry = y + ri * rowH;
+    const cy = ry + rowH / 2;
+    const label = React.createElement(
+      "text",
+      {
+        key: "l", x: x - 14, y: cy, textAnchor: "end", dominantBaseline: "middle",
+        fontSize: labelFont, fontWeight: 700, fill: "#313131", fontFamily: fontFamily,
+      },
+      r.label
+    );
+    const bubbles = (r.values || []).map(function (v, ci) {
+      const rad = v <= 0 ? 3 : 4 + v * (maxR - 4);
+      return React.createElement("circle", {
+        key: ci, cx: colX(ci), cy: cy, r: rad,
+        fill: colorFn(v), fillOpacity: v <= 0 ? 0.5 : 0.9,
+      });
+    });
+    return React.createElement("g", { key: ri }, label, bubbles);
+  });
+
+  return React.createElement("g", null, headers, body);
+}
+
+/**
+ * Large stat numbers stacked vertically.
+ * items: { value, label }[]
+ */
+export function StatStack(props: StatStackProps): ReactNode {
+  const items = props.items || [];
+  const cx = props.cx || 0;
+  const y = props.y || 0;
+  const gap = props.gap || 62;
+  const valueFont = props.valueFont || 36;
+  const labelFont = Math.max(props.labelFont || 16, MIN_FONT);
+  const color = props.color || "#76B82A";
+  const fontFamily = props.fontFamily || CANVAS.fontFamily;
+
+  return items.map(function (item, i) {
+    const iy = y + i * gap;
+    return React.createElement(
+      "g",
+      { key: i },
+      React.createElement(
+        "text",
+        {
+          x: cx, y: iy, textAnchor: "middle",
+          fontSize: valueFont, fontWeight: 900, fill: color, fontFamily: fontFamily,
+        },
+        item.value
+      ),
+      React.createElement(
+        "text",
+        {
+          x: cx, y: iy + labelFont + 4, textAnchor: "middle",
+          fontSize: labelFont, fontWeight: 700, fill: "#555", fontFamily: fontFamily,
+        },
+        item.label
+      )
+    );
+  });
+}

package/template-full/src/reveal/core/blocks.ts

@@ -0,0 +1,172 @@
+import type { Block, BlockOptions, Slide, SlideOptions, StepNote, LayerName } from "./types.ts";
+import { attrsToHtml, esc, style } from "./design.ts";
+
+const LAYER_Z: Record<LayerName, number> = {
+  background: 0,
+  connector: 1,
+  content: 2,
+  overlay: 3,
+  chrome: 4,
+};
+
+export function fragmentMeta(
+  fragment: boolean | number | null | undefined,
+  animation = "fade-in",
+): { classes: string[]; attrs: Record<string, number | undefined> } {
+  if (fragment === null || fragment === undefined || fragment === false) {
+    return { classes: [], attrs: {} };
+  }
+  const classes = ["fragment", animation].filter(Boolean);
+  const attrs = Number.isInteger(fragment) ? { "data-fragment-index": fragment as number } : {};
+  return { classes, attrs };
+}
+
+export function createBlock({
+  id,
+  kind = "html",
+  html = "",
+  src,
+  alt = "",
+  x,
+  y,
+  w,
+  h,
+  layer = "content",
+  fragment = null,
+  animation = "fade-in",
+  className = "",
+  attrs = {},
+  css = {},
+  styleText = "",
+  flow = false,
+  mount = null,
+}: BlockOptions = {}): Block {
+  return {
+    id,
+    kind,
+    html,
+    src,
+    alt,
+    x,
+    y,
+    w,
+    h,
+    layer,
+    fragment,
+    animation,
+    className,
+    attrs,
+    css,
+    styleText,
+    flow,
+    mount,
+  };
+}
+
+export function htmlBlock(options: BlockOptions = {}): Block {
+  return createBlock({ kind: "html", ...options });
+}
+
+export function svgBlock(options: BlockOptions = {}): Block {
+  return createBlock({ kind: "svg", ...options });
+}
+
+export function imageBlock(options: BlockOptions = {}): Block {
+  return createBlock({ kind: "image", ...options });
+}
+
+export function mountBlock(options: BlockOptions = {}): Block {
+  return createBlock({ kind: "mount", ...options });
+}
+
+function blockInner(block: Block): string {
+  if (block.kind === "image") {
+    return `<img class="block-image" src="${esc(block.src ?? "")}" alt="${esc(block.alt ?? "")}">`;
+  }
+
+  if (block.kind === "mount") {
+    const mountAttrs = attrsToHtml({
+      "data-mount-library": block.mount?.library,
+      "data-mount-export": block.mount?.exportName,
+      "data-mount-props": block.mount?.props ? JSON.stringify(block.mount.props) : undefined,
+    });
+    return `<div class="block-mount" ${mountAttrs}>${block.html ?? ""}</div>`;
+  }
+
+  return block.html ?? "";
+}
+
+export function renderBlock(block: Block | string): string {
+  if (typeof block === "string") return block;
+
+  const fragment = fragmentMeta(block.fragment, block.animation);
+  const classes = [
+    block.flow ? "slide-flow-block" : "slide-positioned-block",
+    "slide-block",
+    `block-${block.kind}`,
+    `layer-${block.layer}`,
+    ...fragment.classes,
+    block.className,
+  ].filter(Boolean);
+
+  const positionStyle: Record<string, string | number | undefined> = block.flow
+    ? {}
+    : {
+      left: block.x,
+      top: block.y,
+      width: block.w,
+      height: block.h,
+      "z-index": LAYER_Z[block.layer] ?? LAYER_Z.content,
+    };
+  const styleAttr = [style({ ...positionStyle, ...block.css }), block.styleText]
+    .filter(Boolean)
+    .join(";");
+
+  const attrs = attrsToHtml({
+    "data-block-id": block.id,
+    "data-block-kind": block.kind,
+    "data-layer": block.layer,
+    ...block.attrs,
+    ...fragment.attrs,
+  });
+  const attrText = attrs ? ` ${attrs}` : "";
+  const styleHtml = styleAttr ? ` style="${esc(styleAttr)}"` : "";
+
+  return `<div class="${classes.map(esc).join(" ")}"${attrText}${styleHtml}>${blockInner(block)}</div>`;
+}
+
+export function renderBlocks(blocks: (Block | string)[] = []): string {
+  return blocks.flat().filter(Boolean).map(renderBlock).join("\n");
+}
+
+export function stepNote({ step, visible, say, why, next }: StepNote): string {
+  return [
+    `Step: ${step}`,
+    `Visible: ${visible}`,
+    `Say: ${say}`,
+    why ? `Why: ${why}` : "",
+    next ? `Next: ${next}` : "",
+  ].filter(Boolean).join("\n");
+}
+
+export function renderNotes(notes: string | (string | StepNote)[] = ""): string {
+  if (Array.isArray(notes)) {
+    return notes.map((note) => (typeof note === "string" ? note : stepNote(note))).join("\n\n");
+  }
+  return notes;
+}
+
+export function defineSlide({
+  className = "native-slide",
+  attrs = {},
+  html = "",
+  blocks = [],
+  notes = "",
+}: SlideOptions = {}): Slide {
+  return {
+    className,
+    attrs,
+    html: [html, renderBlocks(blocks)].filter(Boolean).join("\n"),
+    notes: renderNotes(notes),
+  };
+}

package/template-full/src/reveal/core/deck-init.ts

@@ -0,0 +1,60 @@
+import Reveal from "reveal.js";
+import RevealNotes from "reveal.js/plugin/notes";
+import "reveal.js/reveal.css";
+import * as anime from "animejs";
+import "../theme.css";
+import { installRuntime } from "./runtime.ts";
+import type { Slide, ComponentRegistry, DeckConfig } from "./types.ts";
+
+function injectSlides(slides: Slide[]): void {
+  const container = document.querySelector(".slides");
+  if (!container) return;
+  slides.forEach((slide) => {
+    const section = document.createElement("section");
+    if (slide.className) section.className = slide.className;
+    if (slide.attrs) {
+      Object.keys(slide.attrs).forEach((k) => {
+        const v = slide.attrs![k];
+        if (v !== undefined && v !== null) section.setAttribute(k, String(v));
+      });
+    }
+    section.innerHTML = slide.html;
+    if (slide.notes) {
+      const aside = document.createElement("aside");
+      aside.className = "notes";
+      aside.textContent = slide.notes;
+      section.appendChild(aside);
+    }
+    container.appendChild(section);
+  });
+}
+
+export async function initDeck<C extends ComponentRegistry>(config: DeckConfig<C>): Promise<void> {
+  const slides = typeof config.buildSlides === "function"
+    ? await config.buildSlides()
+    : config.buildSlides;
+  injectSlides(slides);
+
+  const deck = new (Reveal as any)({
+    width: 1280,
+    height: 720,
+    margin: 0.04,
+    minScale: 0.2,
+    maxScale: 2.0,
+    controls: true,
+    controlsTutorial: true,
+    progress: true,
+    slideNumber: "c/t",
+    overview: true,
+    keyboard: true,
+    hash: true,
+    fragmentInURL: true,
+    center: false,
+    transition: "none",
+    backgroundTransition: "none",
+    plugins: [RevealNotes],
+  });
+
+  await deck.initialize();
+  installRuntime(deck, anime, config.components);
+}

package/template-full/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-full/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>`;
+}