create-slide-deck 0.1.0

package/template-minimal/src/reveal/components/auto-layout.ts

@@ -0,0 +1,229 @@
+/**
+ * Generic empty-slot finder for slide annotations.
+ *
+ * Given a canvas size, a list of occupied rectangles, and a desired slot size,
+ * finds the best position that:
+ *   1. Does not overlap any occupied rect (with margin)
+ *   2. Maximizes distance from occupied rects (use empty space well)
+ *   3. Optionally stays close to a "near" point (e.g. the active node)
+ *
+ * Usage:
+ *   const pos = findEmptySlot({
+ *     canvasW: 1200, canvasH: 700,
+ *     occupied: [ {x:10, y:10, w:200, h:150}, ... ],
+ *     slotW: 500, slotH: 160,
+ *     margin: 16,
+ *     near: { x: 300, y: 100 },   // optional: prefer positions near this point
+ *   });
+ *   // pos = { x, y }
+ */
+
+export interface Rect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface FindEmptySlotOpts {
+  canvasW: number;
+  canvasH: number;
+  occupied: Rect[];
+  slotW: number;
+  slotH: number;
+  margin?: number;
+  near?: Point | null;
+  step?: number;
+}
+
+export interface FindLargestSlotOpts {
+  canvasW: number;
+  canvasH: number;
+  occupied: Rect[];
+  maxW?: number;
+  maxH?: number;
+  margin?: number;
+  step?: number;
+  near?: Point | null;
+}
+
+interface CascadeNode {
+  step: number;
+  id: string;
+  col: number;
+  row: number;
+}
+
+export interface NodeOccupiedRectsOpts {
+  nx: (col: number) => number;
+  ny: (row: number) => number;
+  iconR: number;
+  labelH?: number;
+}
+
+function rectsOverlap(a: Rect, b: Rect, gap: number): boolean {
+  return !(a.x + a.w + gap <= b.x || b.x + b.w + gap <= a.x ||
+           a.y + a.h + gap <= b.y || b.y + b.h + gap <= a.y);
+}
+
+function rectMinDist(slot: Rect, rect: Rect): number {
+  const dx = Math.max(rect.x - (slot.x + slot.w), slot.x - (rect.x + rect.w), 0);
+  const dy = Math.max(rect.y - (slot.y + slot.h), slot.y - (rect.y + rect.h), 0);
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+export function findEmptySlot({
+  canvasW,
+  canvasH,
+  occupied,
+  slotW,
+  slotH,
+  margin = 16,
+  near = null,
+  step = 16,
+}: FindEmptySlotOpts): Point {
+  let bestPos: Point = { x: margin, y: canvasH - slotH - margin };
+  let bestScore = -Infinity;
+
+  for (let y = margin; y + slotH <= canvasH - margin; y += step) {
+    for (let x = margin; x + slotW <= canvasW - margin; x += step) {
+      const slot: Rect = { x: x, y: y, w: slotW, h: slotH };
+
+      let overlaps = false;
+      for (let i = 0; i < occupied.length; i++) {
+        if (rectsOverlap(slot, occupied[i], margin)) {
+          overlaps = true;
+          break;
+        }
+      }
+      if (overlaps) continue;
+
+      let minDist = Infinity;
+      for (let j = 0; j < occupied.length; j++) {
+        const d = rectMinDist(slot, occupied[j]);
+        if (d < minDist) minDist = d;
+      }
+
+      // Small bonus for not being jammed against a node, but cap it low
+      let score = Math.min(minDist, 30) * 0.5;
+
+      // Primary: stay as close as possible to the active node
+      if (near) {
+        const dx = (x + slotW / 2) - near.x;
+        const dy = (y + slotH / 2) - near.y;
+        score -= Math.sqrt(dx * dx + dy * dy) * 0.8;
+      }
+
+      // Slight preference for horizontally centered positions
+      const cxDist = Math.abs(x + slotW / 2 - canvasW / 2);
+      score -= cxDist * 0.02;
+
+      if (score > bestScore) {
+        bestScore = score;
+        bestPos = { x: x, y: y };
+      }
+    }
+  }
+
+  return bestPos;
+}
+
+/**
+ * Find the largest empty rectangle in the canvas that doesn't overlap any occupied rect.
+ * Returns { x, y, w, h }. If maxW/maxH are provided, the result is capped.
+ */
+export function findLargestSlot({
+  canvasW, canvasH, occupied,
+  maxW, maxH,
+  margin = 14,
+  step = 18,
+  near = null,
+}: FindLargestSlotOpts): Rect {
+  maxW = maxW || (canvasW - 2 * margin);
+  maxH = maxH || (canvasH - 2 * margin);
+
+  let best: Rect | null = null;
+  let bestScore = -Infinity;
+
+  for (let y = margin; y < canvasH - margin - 60; y += step) {
+    for (let x = margin; x < canvasW - margin - 60; x += step) {
+      let inside = false;
+      for (let i = 0; i < occupied.length; i++) {
+        const r = occupied[i];
+        if (x >= r.x - margin && x < r.x + r.w + margin &&
+            y >= r.y - margin && y < r.y + r.h + margin) {
+          inside = true; break;
+        }
+      }
+      if (inside) continue;
+
+      let w = Math.min(canvasW - margin - x, maxW);
+      for (let i = 0; i < occupied.length; i++) {
+        const r = occupied[i];
+        const rl = r.x - margin;
+        if (rl > x && rl < x + w &&
+            y < r.y + r.h + margin && y + maxH > r.y - margin) {
+          w = Math.min(w, rl - x);
+        }
+      }
+
+      let h = Math.min(canvasH - margin - y, maxH);
+      for (let i = 0; i < occupied.length; i++) {
+        const r = occupied[i];
+        const rt = r.y - margin;
+        if (rt > y && rt < y + h &&
+            x < r.x + r.w + margin && x + w > r.x - margin) {
+          h = Math.min(h, rt - y);
+        }
+      }
+
+      if (w < 60 || h < 60) continue;
+
+      const area = w * h;
+      let score = area;
+      if (near) {
+        const dx = (x + w / 2) - near.x;
+        const dy = (y + h / 2) - near.y;
+        score -= Math.sqrt(dx * dx + dy * dy) * 50;
+      }
+
+      if (score > bestScore) {
+        bestScore = score;
+        best = { x: x, y: y, w: w, h: h };
+      }
+    }
+  }
+
+  return best || { x: margin, y: margin, w: maxW, h: maxH };
+}
+
+/**
+ * Build occupied rectangles from cascade nodes that are visible at a given step.
+ * Each node becomes a bounding rect covering its icon circle + label area.
+ */
+export function nodeOccupiedRects(
+  nodes: CascadeNode[],
+  visibleStep: number,
+  { nx, ny, iconR, labelH = 50 }: NodeOccupiedRectsOpts,
+): Rect[] {
+  const rects: Rect[] = [];
+  for (let i = 0; i < nodes.length; i++) {
+    const n = nodes[i];
+    if (n.step > visibleStep) continue;
+    const cx = nx(n.col);
+    const cy = ny(n.row);
+    const r = (n.id === "dns" || n.id === "users") ? iconR + 4 : iconR;
+    rects.push({
+      x: cx - r - 12,
+      y: cy - r - 30,
+      w: 2 * (r + 12),
+      h: 2 * r + 30 + labelH,
+    });
+  }
+  return rects;
+}

package/template-minimal/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-minimal/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-minimal/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);
+}