@waits/cadence 0.2.0

package/src/templates/changelog-reel.ts

@@ -0,0 +1,28 @@
+import type { ChangelogInput } from "../schema/beats";
+import { clip, cta, DEFAULT_BG, opener, type TBeat } from "./parts";
+import type { Template } from "./types";
+
+/**
+ * "The classic" — opener → a numbered changelog (data-table of the real
+ * features) → install closer. Deterministic and honest: no invented code, just
+ * the feature titles the adapter parsed and the real install command.
+ */
+export const changelogReel: Template = (m, opts = {}) => {
+  const bg = opts.background ?? DEFAULT_BG;
+  const beats: ChangelogInput["beats"] = [opener(m, bg, opts.headline)];
+
+  const rows = m.features.slice(0, 6).map((f, i) => [String(i + 1), clip(f.title)]);
+  if (rows.length) {
+    beats.push({
+      id: "changes",
+      durationInFrames: Math.min(320, 150 + rows.length * 24),
+      background: bg,
+      headline: "What's new.",
+      panel: { kind: "data-table", title: `${m.product} ${m.version}`, columns: ["#", "change"], rows },
+    });
+  }
+
+  const close = cta(m, bg);
+  if (close) beats.push(close);
+  return { format: opts.format ?? "16x9", beats };
+};

package/src/templates/feature-launch.ts

@@ -0,0 +1,26 @@
+import type { ChangelogInput } from "../schema/beats";
+import { clip, cta, DEFAULT_BG, opener } from "./parts";
+import type { Template } from "./types";
+
+/**
+ * "Feature launch" — opener → one title card per top feature → install. Cinematic,
+ * one feature gets one beat. Honest: just the real feature titles (no fake code).
+ */
+export const featureLaunch: Template = (m, opts = {}) => {
+  const bg = opts.background ?? DEFAULT_BG;
+  const beats: ChangelogInput["beats"] = [opener(m, bg, opts.headline)];
+
+  m.features.slice(0, 4).forEach((f, i) => {
+    beats.push({
+      id: `feature-${i}`,
+      durationInFrames: 140,
+      background: bg,
+      eyebrow: `feature ${i + 1}`,
+      headline: clip(f.title, 40),
+    });
+  });
+
+  const close = cta(m, bg);
+  if (close) beats.push(close);
+  return { format: opts.format ?? "16x9", beats };
+};

package/src/templates/index.ts

@@ -0,0 +1,13 @@
+import type { Template } from "./types";
+import { changelogReel } from "./changelog-reel";
+import { featureLaunch } from "./feature-launch";
+import { milestone } from "./milestone";
+
+/** Off-the-shelf templates. A manifest + a template name → a video. */
+export const TEMPLATES: Record<string, Template> = {
+  "changelog-reel": changelogReel,
+  "feature-launch": featureLaunch,
+  milestone,
+};
+
+export type { Template, TemplateOpts, BackgroundSpec } from "./types";

package/src/templates/milestone.ts

@@ -0,0 +1,25 @@
+import type { ChangelogInput } from "../schema/beats";
+import { cta, DEFAULT_BG, opener } from "./parts";
+import type { Template } from "./types";
+
+/**
+ * "Milestone" — opener → one big number → install. Uses `opts.stat` when given;
+ * otherwise an honest default drawn from the manifest (feature count this release).
+ */
+export const milestone: Template = (m, opts = {}) => {
+  const bg = opts.background ?? DEFAULT_BG;
+  const stat = opts.stat ?? { value: String(m.features.length), label: "new features", sub: `in ${m.version}` };
+  const beats: ChangelogInput["beats"] = [
+    opener(m, bg, opts.headline),
+    {
+      id: "stat",
+      durationInFrames: 170,
+      background: bg,
+      headline: "By the numbers.",
+      panel: { kind: "stat", value: stat.value, label: stat.label, sub: stat.sub },
+    },
+  ];
+  const close = cta(m, bg);
+  if (close) beats.push(close);
+  return { format: opts.format ?? "16x9", beats };
+};

package/src/templates/parts.ts

@@ -0,0 +1,32 @@
+import type { UpdateManifest } from "../adapters/types";
+import type { ChangelogInput } from "../schema/beats";
+import type { BackgroundSpec } from "./types";
+
+export type TBeat = ChangelogInput["beats"][number];
+
+/** Shared building blocks so every template stays consistent + honest. */
+/** The default backdrop: procedural, theme-colored, no asset / no API key. */
+export const DEFAULT_BG: BackgroundSpec = { shapes: true };
+export const clip = (s: string, n = 52) => (s.length > n ? s.slice(0, n - 1).trimEnd() + "…" : s);
+
+export const opener = (m: UpdateManifest, bg: BackgroundSpec, headline?: string): TBeat => ({
+  id: "opener",
+  durationInFrames: 150,
+  background: bg,
+  eyebrow: `new in ${m.product}`,
+  headline: headline ?? `${m.version} is out.`,
+});
+
+/** Install closer — only when the manifest actually knows the install command. */
+export const cta = (m: UpdateManifest, bg: BackgroundSpec): TBeat | null =>
+  m.install
+    ? {
+        id: "cta",
+        durationInFrames: 160,
+        background: bg,
+        headline: "Get it.",
+        layout: "center",
+        code: { filename: "terminal", lang: "bash", source: m.install },
+        badge: `v${m.version}`,
+      }
+    : null;

package/src/templates/types.ts

@@ -0,0 +1,31 @@
+import type { UpdateManifest } from "../adapters/types";
+import type { ChangelogInput, Format } from "../schema/beats";
+
+/** Loose background (authoring shape; defaults filled at render-validate time). */
+export type BackgroundSpec = {
+  src?: string;
+  treatment?: "kenburns" | "static";
+  gradient?: [string, string];
+  angle?: number;
+  solid?: string;
+  /** Procedural theme-colored backdrop — the default. */
+  shapes?: boolean;
+};
+
+export type TemplateOpts = {
+  format?: Format;
+  /** Resolved background (style pack): image / gradient / solid. */
+  background?: BackgroundSpec;
+  /** Optional headline override for the opener. */
+  headline?: string;
+  /** For the milestone template: a big number to feature. */
+  stat?: { value: string; label: string; sub?: string };
+};
+
+/**
+ * A Template turns a parsed UpdateManifest into beats — deterministically, with
+ * no LLM and no fabricated code (it only shows what the manifest actually knows:
+ * feature titles + the real install command). The brain/skill path adds honest
+ * code on top; templates are the no-LLM path the GitHub Action uses.
+ */
+export type Template = (manifest: UpdateManifest, opts?: TemplateOpts) => ChangelogInput;

package/src/theme/default.ts

@@ -0,0 +1,39 @@
+import type { ThemeConfig } from "./types";
+
+/** The default theme — warm tinted-neutrals, blue accent, gold version marker. */
+export const defaultTheme: ThemeConfig = {
+  name: "default",
+  fonts: {
+    display: "Sora, ui-sans-serif, system-ui, sans-serif",
+    body: "Public Sans, ui-sans-serif, system-ui, sans-serif",
+    mono: "Fira Code, SFMono-Regular, Menlo, monospace",
+    note: "Caveat, cursive",
+  },
+  colors: {
+    ink: "#111111",
+    paper: "#fafafa",
+    paperElevated: "#ffffff",
+    chrome: "#f0f0f0",
+    hairline: "#e5e5e5",
+    hairlineHover: "#dddddd",
+    textMuted: "rgba(0,0,0,0.65)",
+    textDim: "rgba(0,0,0,0.12)",
+    signalBlue: "#2563eb",
+    signalBlueSoft: "rgba(37,99,235,0.10)",
+    signalBlueBorder: "rgba(37,99,235,0.33)",
+    markerPink: "#ff00aa",
+    gold: "#c08a2e",
+    goldSoft: "rgba(192,138,46,0.16)",
+    titleWhite: "#f7f6f2",
+    successGreen: "#22c55e",
+    warningYellow: "#eab308",
+    dangerRed: "#ef4444",
+    infoBlue: "#3b82f6",
+    accentTeal: "#1588b2",
+  },
+  floatShadow: "0 30px 80px rgba(30,41,59,0.28), 0 2px 6px rgba(30,41,59,0.12)",
+  codeBg: "#f7f5ee",
+  caretBg: "rgba(252,249,242,0.95)",
+  codeTheme: { fg: "#1f2937", kw: "#0e9488", nw: "#8250df", str: "#c2410c", num: "#7c3aed", fn: "#2563eb", punct: "#5b6470", comment: "#9aa0a6" },
+  backdrop: ["#e6edff", "#f8faff"],
+};

package/src/theme/derive.ts

@@ -0,0 +1,119 @@
+import { defaultTheme } from "./default";
+import type { CodeTheme, ThemeConfig, ThemeFonts } from "./types";
+
+/** "#abc" | "#aabbcc" → {r,g,b}. */
+function parseHex(hex: string): { r: number; g: number; b: number } {
+  let h = hex.replace("#", "").trim();
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  return { r: parseInt(h.slice(0, 2), 16), g: parseInt(h.slice(2, 4), 16), b: parseInt(h.slice(4, 6), 16) };
+}
+const rgba = (hex: string, a: number) => {
+  const { r, g, b } = parseHex(hex);
+  return `rgba(${r},${g},${b},${a})`;
+};
+
+/** hex → HSL (h 0-360, s/l 0-100). */
+function hexToHsl(hex: string): [number, number, number] {
+  const { r, g, b } = parseHex(hex);
+  const rn = r / 255, gn = g / 255, bn = b / 255;
+  const mx = Math.max(rn, gn, bn), mn = Math.min(rn, gn, bn), d = mx - mn;
+  const l = (mx + mn) / 2;
+  let h = 0;
+  const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
+  if (d !== 0) {
+    if (mx === rn) h = ((gn - bn) / d) % 6;
+    else if (mx === gn) h = (bn - rn) / d + 2;
+    else h = (rn - gn) / d + 4;
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  return [h, s * 100, l * 100];
+}
+/** HSL → hex. */
+function hslToHex(h: number, s: number, l: number): string {
+  h = ((h % 360) + 360) % 360;
+  s /= 100;
+  l /= 100;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = l - c / 2;
+  let [r, g, b] = [0, 0, 0];
+  if (h < 60) [r, g, b] = [c, x, 0];
+  else if (h < 120) [r, g, b] = [x, c, 0];
+  else if (h < 180) [r, g, b] = [0, c, x];
+  else if (h < 240) [r, g, b] = [0, x, c];
+  else if (h < 300) [r, g, b] = [x, 0, c];
+  else [r, g, b] = [c, 0, x];
+  const to = (v: number) => Math.round((v + m) * 255).toString(16).padStart(2, "0");
+  return `#${to(r)}${to(g)}${to(b)}`;
+}
+
+/**
+ * A readable syntax palette tied to the accent: keywords sit at the accent's
+ * complement, functions take the accent, numbers a violet rotation, strings a
+ * fixed warm tone (kept independent so they never clash). Punctuation/comments
+ * are low-saturation grays carrying a hint of the accent hue.
+ */
+function deriveCodeTheme(accent: string): CodeTheme {
+  const [h] = hexToHsl(accent);
+  return {
+    fg: hslToHex(h, 16, 20),
+    kw: hslToHex(h + 165, 62, 40),
+    nw: hslToHex(h + 90, 55, 46),
+    str: hslToHex(28, 72, 42),
+    num: hslToHex(h + 270, 60, 50),
+    fn: hslToHex(h, 70, 46),
+    punct: hslToHex(h, 10, 42),
+    comment: hslToHex(h, 8, 62),
+  };
+}
+
+/** Light [from, to] gradient (pale tints of the accent) for the procedural backdrop. */
+function deriveBackdrop(accent: string): [string, string] {
+  const [h] = hexToHsl(accent);
+  return [hslToHex(h, 58, 90), hslToHex(h + 14, 42, 97)];
+}
+
+/**
+ * Derive a full ThemeConfig from a brand accent (+ optional neutrals/fonts). The
+ * accent drives links/badges/the one pointing color, a matching code palette, and
+ * the default backdrop. This is brand extraction's output (and the base every
+ * named library theme is minted from) — give one color, get a complete theme.
+ */
+export function deriveTheme(opts: {
+  name?: string;
+  accent: string;
+  ink?: string;
+  paper?: string;
+  gold?: string;
+  markerPink?: string;
+  fonts?: ThemeFonts;
+}): ThemeConfig {
+  const base = defaultTheme;
+  const ink = opts.ink ?? base.colors.ink;
+  const paper = opts.paper ?? base.colors.paper;
+  return {
+    name: opts.name ?? "brand",
+    fonts: opts.fonts ?? base.fonts,
+    colors: {
+      ...base.colors,
+      ink,
+      paper,
+      paperElevated: "#ffffff",
+      textMuted: rgba(ink, 0.65),
+      textDim: rgba(ink, 0.12),
+      signalBlue: opts.accent,
+      signalBlueSoft: rgba(opts.accent, 0.1),
+      signalBlueBorder: rgba(opts.accent, 0.3),
+      infoBlue: opts.accent,
+      markerPink: opts.markerPink ?? base.colors.markerPink,
+      gold: opts.gold ?? base.colors.gold,
+      goldSoft: rgba(opts.gold ?? base.colors.gold, 0.16),
+    },
+    floatShadow: base.floatShadow,
+    codeBg: base.codeBg,
+    caretBg: base.caretBg,
+    codeTheme: deriveCodeTheme(opts.accent),
+    backdrop: deriveBackdrop(opts.accent),
+  };
+}

package/src/theme/index.ts

@@ -0,0 +1,33 @@
+import type { ThemeConfig } from "./types";
+import { defaultTheme } from "./default";
+import { slateTheme } from "./slate";
+import { LIBRARY } from "./library";
+
+export type { ThemeConfig, ThemeColors } from "./types";
+
+/** Registry of built-in themes. Add a brand's extracted theme here (or load it). */
+export const THEMES: Record<string, ThemeConfig> = {
+  default: defaultTheme,
+  slate: slateTheme,
+  ...LIBRARY,
+};
+
+/**
+ * The active theme, selected at bundle time (env vars Remotion inlines into the
+ * bundle). A full extracted theme can be injected as JSON via
+ * `REMOTION_VIDEO_THEME_JSON`; otherwise a named preset via `REMOTION_VIDEO_THEME`.
+ * `scripts/render.ts` sets these from `--theme-file` / `--theme`; Studio → `default`.
+ */
+function resolveActiveTheme(): ThemeConfig {
+  const json = process.env.REMOTION_VIDEO_THEME_JSON;
+  if (json) {
+    try {
+      return JSON.parse(json) as ThemeConfig;
+    } catch {
+      /* fall through to a named preset */
+    }
+  }
+  return THEMES[process.env.REMOTION_VIDEO_THEME ?? "default"] ?? defaultTheme;
+}
+
+export const activeTheme: ThemeConfig = resolveActiveTheme();

package/src/theme/library.ts

@@ -0,0 +1,60 @@
+import { deriveTheme } from "./derive";
+import type { ThemeConfig } from "./types";
+
+/**
+ * The named theme library. Each is minted from one accent via `deriveTheme`
+ * (which generates a matching code palette + backdrop), with per-theme fonts and
+ * optional neutral/marker overrides. `default` and `slate` stay hand-authored in
+ * their own files; everything here is registered alongside them in `index.ts`.
+ */
+const S = (f: string) => `${f}, ui-sans-serif, system-ui, sans-serif`;
+const M = (f: string) => `${f}, SFMono-Regular, Menlo, monospace`;
+const R = (f: string) => `${f}, Georgia, "Times New Roman", serif`;
+const NOTE = "Caveat, cursive";
+
+type Spec = {
+  accent: string;
+  ink?: string;
+  paper?: string;
+  gold?: string;
+  marker?: string;
+  display: string;
+  body: string;
+  mono: string;
+};
+
+const COOL_INK = "#0f172a";
+
+const SPECS: Record<string, Spec> = {
+  cobalt: { accent: "#2f5fff", ink: COOL_INK, paper: "#f5f7fb", display: S("Manrope"), body: S("Manrope"), mono: M("JetBrains Mono") },
+  emerald: { accent: "#10b981", display: S("Space Grotesk"), body: S("Inter"), mono: M("Fira Code") },
+  amber: { accent: "#d97706", paper: "#fbf8f3", gold: "#b45309", display: S("Sora"), body: S("Public Sans"), mono: M("IBM Plex Mono") },
+  crimson: { accent: "#e11d48", marker: "#0ea5e9", display: S("Archivo"), body: S("Inter"), mono: M("Space Mono") },
+  violet: { accent: "#7c3aed", display: S("Plus Jakarta Sans"), body: S("Inter"), mono: M("JetBrains Mono") },
+  teal: { accent: "#0d9488", paper: "#f3f8f7", display: S("Outfit"), body: S("Inter"), mono: M("Fira Code") },
+  indigo: { accent: "#4338ca", ink: COOL_INK, display: S("Inter"), body: S("Inter"), mono: M("IBM Plex Mono") },
+  sky: { accent: "#0ea5e9", paper: "#f4f9fc", display: S("Figtree"), body: S("Figtree"), mono: M("JetBrains Mono") },
+  sunset: { accent: "#f97316", marker: "#7c3aed", display: S("Epilogue"), body: S("Inter"), mono: M("Fira Code") },
+  rose: { accent: "#f43f5e", paper: "#fdf6f7", display: S("DM Sans"), body: S("DM Sans"), mono: M("Fira Code") },
+  lime: { accent: "#65a30d", display: S("Space Grotesk"), body: S("Work Sans"), mono: M("Space Mono") },
+  grape: { accent: "#9333ea", marker: "#22c55e", display: S("Manrope"), body: S("Inter"), mono: M("Space Mono") },
+  forest: { accent: "#15803d", ink: "#14241b", paper: "#f4f7f3", display: R("Fraunces"), body: R("Spectral"), mono: M("JetBrains Mono") },
+  editorial: { accent: "#9333ea", ink: "#1a1a1a", paper: "#fbfaf8", display: R("Playfair Display"), body: R("Spectral"), mono: M("IBM Plex Mono") },
+  graphite: { accent: "#475569", ink: COOL_INK, paper: "#f6f7f8", marker: "#ef4444", display: S("Geist"), body: S("Geist"), mono: M("Geist Mono") },
+  mono: { accent: "#111111", paper: "#f5f5f5", marker: "#2563eb", display: S("Geist"), body: S("Geist"), mono: M("Geist Mono") },
+};
+
+export const LIBRARY: Record<string, ThemeConfig> = Object.fromEntries(
+  Object.entries(SPECS).map(([name, s]) => [
+    name,
+    deriveTheme({
+      name,
+      accent: s.accent,
+      ink: s.ink,
+      paper: s.paper,
+      gold: s.gold,
+      markerPink: s.marker,
+      fonts: { display: s.display, body: s.body, mono: s.mono, note: NOTE },
+    }),
+  ]),
+);

package/src/theme/slate.ts

@@ -0,0 +1,39 @@
+import type { ThemeConfig } from "./types";
+
+/** A cooler contrasting theme — slate neutrals, indigo accent, copper marker. */
+export const slateTheme: ThemeConfig = {
+  name: "slate",
+  fonts: {
+    display: "Inter, ui-sans-serif, system-ui, sans-serif",
+    body: "Inter, ui-sans-serif, system-ui, sans-serif",
+    mono: "JetBrains Mono, SFMono-Regular, Menlo, monospace",
+    note: "Caveat, cursive",
+  },
+  colors: {
+    ink: "#0f172a",
+    paper: "#f6f7f9",
+    paperElevated: "#ffffff",
+    chrome: "#eef1f4",
+    hairline: "#e2e8f0",
+    hairlineHover: "#cbd5e1",
+    textMuted: "rgba(15,23,42,0.62)",
+    textDim: "rgba(15,23,42,0.12)",
+    signalBlue: "#4f46e5",
+    signalBlueSoft: "rgba(79,70,229,0.10)",
+    signalBlueBorder: "rgba(79,70,229,0.30)",
+    markerPink: "#e11d8f",
+    gold: "#b5762a",
+    goldSoft: "rgba(181,118,42,0.16)",
+    titleWhite: "#f8fafc",
+    successGreen: "#16a34a",
+    warningYellow: "#d97706",
+    dangerRed: "#dc2626",
+    infoBlue: "#4f46e5",
+    accentTeal: "#0e7490",
+  },
+  floatShadow: "0 30px 80px rgba(15,23,42,0.30), 0 2px 6px rgba(15,23,42,0.14)",
+  codeBg: "#f4f6f8",
+  caretBg: "rgba(248,250,252,0.95)",
+  codeTheme: { fg: "#0f172a", kw: "#0891b2", nw: "#7c3aed", str: "#b45309", num: "#9333ea", fn: "#4f46e5", punct: "#64748b", comment: "#94a3b8" },
+  backdrop: ["#eceafd", "#f7f8fc"],
+};

package/src/theme/types.ts

@@ -0,0 +1,67 @@
+/**
+ * A video theme. The engine reads colors/shadow/code surfaces from the active
+ * theme; nothing in the components hardcodes a brand. Fonts are loaded separately
+ * (see brand/fonts.ts) and become themeable with custom fonts later.
+ */
+export type ThemeColors = {
+  ink: string;
+  paper: string;
+  paperElevated: string;
+  chrome: string;
+  hairline: string;
+  hairlineHover: string;
+  textMuted: string;
+  textDim: string;
+  /** The single pointing accent. */
+  signalBlue: string;
+  signalBlueSoft: string;
+  signalBlueBorder: string;
+  /** One human-flourish color. */
+  markerPink: string;
+  /** Version / NEW marker (eyebrow + pill). */
+  gold: string;
+  goldSoft: string;
+  /** Warm off-white for headlines over imagery. */
+  titleWhite: string;
+  successGreen: string;
+  warningYellow: string;
+  dangerRed: string;
+  infoBlue: string;
+  accentTeal: string;
+};
+
+/** Syntax-highlight palette for the code window. */
+export type CodeTheme = {
+  fg: string;
+  kw: string; // keywords (import/const/await)
+  nw: string; // new / constructor
+  str: string; // strings
+  num: string; // numbers
+  fn: string; // functions / types
+  punct: string; // punctuation
+  comment: string;
+};
+
+/** Font family stacks (must reference families loaded in brand/fonts.ts). */
+export type ThemeFonts = {
+  display: string;
+  body: string;
+  mono: string;
+  note: string;
+};
+
+export type ThemeConfig = {
+  name: string;
+  colors: ThemeColors;
+  fonts: ThemeFonts;
+  /** Floating window/panel shadow. */
+  floatShadow: string;
+  /** Code window background. */
+  codeBg: string;
+  /** Typewriter caret fill. */
+  caretBg: string;
+  /** Syntax colors. */
+  codeTheme: CodeTheme;
+  /** Light [from, to] gradient for the procedural default backdrop (Background "shapes"). */
+  backdrop?: [string, string];
+};