create-rezi 0.1.0-alpha.51 → 0.1.0-alpha.53

package/README.md

@@ -66,5 +66,11 @@ Scaffolded templates now follow the same baseline structure:
 - `src/main.ts`
 - `src/__tests__/`
 
+Template theming convention:
+
+- `src/theme.ts` is the canonical source for theme catalogs and style helpers.
+- Screens should derive visual styling from active theme tokens instead of hardcoded RGB/hex literals.
+- `stress-test` is the current exception and keeps theme/catalog wiring in `src/main.ts`.
+
 For template descriptions and highlights, see:
 https://rezitui.dev/docs/getting-started/create-rezi/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-rezi",
-  "version": "0.1.0-alpha.51",
+  "version": "0.1.0-alpha.53",
   "description": "Scaffold a Rezi terminal UI app.",
   "license": "Apache-2.0",
   "homepage": "https://rezitui.dev",
@@ -28,6 +28,6 @@
     "bun": ">=1.3.0"
   },
   "devDependencies": {
-    "@rezi-ui/testkit": "0.1.0-alpha.51"
+    "@rezi-ui/testkit": "0.1.0-alpha.53"
   }
 }

package/templates/animation-lab/README.md

@@ -9,12 +9,12 @@ Scaffolded with `create-rezi` using the **__TEMPLATE_LABEL__** template.
 - Canvas-driven reactor visualization combined with charts, gauges, and staggered module rails.
 - Reducer-managed animation targets with deterministic tick updates.
 - Responsive layout that adapts to terminal resize events.
-- Keyboard controls for autoplay, single-step, vector tuning, burst impulses, and palette cycling.
+- Keyboard controls for autoplay, single-step, vector tuning, burst impulses, phase cycling, and theme cycling.
 
 ## File Layout
 
 - `src/types.ts`: animation state and action contracts.
-- `src/theme.ts`: template identity constants.
+- `src/theme.ts`: template identity + built-in theme catalog.
 - `src/helpers/state.ts`: viewport normalization + reducer transitions.
 - `src/helpers/keybindings.ts`: key to command resolver.
 - `src/screens/reactor-lab.ts`: reactor field screen renderer.
@@ -41,4 +41,5 @@ bun run start
 - Arrow keys: Nudge drift/flux/orbit vectors
 - `b`: Burst impulse
 - `r`: Randomized retarget
-- `m`: Cycle color palette
+- `m`: Cycle phase
+- `t`: Cycle theme preset

package/templates/animation-lab/package.json

@@ -8,7 +8,7 @@
     "dev": "tsx watch src/main.ts",
     "build": "tsc --pretty false",
     "typecheck": "tsc --noEmit",
-    "test": "tsx --test src/__tests__"
+    "test": "tsx --test src/__tests__/*.test.ts"
   },
   "dependencies": {
     "@rezi-ui/core": "^0.1.0-alpha.17",

package/templates/animation-lab/src/__tests__/keybindings.test.ts

@@ -9,5 +9,6 @@ test("animation lab keybinding map resolves expected commands", () => {
   assert.equal(resolveAnimationLabCommand("right"), "nudge-right");
   assert.equal(resolveAnimationLabCommand("b"), "burst");
   assert.equal(resolveAnimationLabCommand("m"), "cycle-phase");
+  assert.equal(resolveAnimationLabCommand("t"), "cycle-theme");
   assert.equal(resolveAnimationLabCommand("x"), undefined);
 });

package/templates/animation-lab/src/__tests__/reducer.test.ts

@@ -1,6 +1,7 @@
 import assert from "node:assert/strict";
 import test from "node:test";
 import { createInitialState, reduceAnimationLabState } from "../helpers/state.js";
+import { DEFAULT_THEME_NAME } from "../theme.js";
 
 test("animation lab reducer advances and keeps bounds", () => {
   const initial = createInitialState();
@@ -39,3 +40,10 @@ test("animation lab reducer supports nudge and phase cycle", () => {
   assert.ok(cycled.driftTarget > initial.driftTarget);
   assert.ok(cycled.fluxTarget > initial.fluxTarget);
 });
+
+test("animation lab reducer cycles theme", () => {
+  const initial = createInitialState();
+  assert.equal(initial.themeName, DEFAULT_THEME_NAME);
+  const next = reduceAnimationLabState(initial, { type: "cycle-theme" });
+  assert.notEqual(next.themeName, initial.themeName);
+});

package/templates/animation-lab/src/helpers/keybindings.ts

@@ -8,7 +8,8 @@ export type AnimationLabCommand =
   | "nudge-down"
   | "burst"
   | "randomize"
-  | "cycle-phase";
+  | "cycle-phase"
+  | "cycle-theme";
 
 const COMMAND_MAP: Readonly<Record<string, AnimationLabCommand>> = Object.freeze({
   q: "quit",
@@ -23,6 +24,7 @@ const COMMAND_MAP: Readonly<Record<string, AnimationLabCommand>> = Object.freeze
   b: "burst",
   r: "randomize",
   m: "cycle-phase",
+  t: "cycle-theme",
 });
 
 export function resolveAnimationLabCommand(key: string): AnimationLabCommand | undefined {

package/templates/animation-lab/src/helpers/state.ts

@@ -1,3 +1,4 @@
+import { DEFAULT_THEME_NAME, cycleThemeName } from "../theme.js";
 import type { AnimationLabAction, AnimationLabState, NudgePayload } from "../types.js";
 
 const MODULE_SET: readonly string[] = Object.freeze([
@@ -48,6 +49,7 @@ export function createInitialState(viewport?: Viewport): AnimationLabState {
   return Object.freeze({
     tick: 0,
     phase: 0,
+    themeName: DEFAULT_THEME_NAME,
     viewportCols: layout.viewportCols,
     viewportRows: layout.viewportRows,
     panelOpacity: 0.9,
@@ -84,6 +86,7 @@ function advanceState(previous: AnimationLabState): AnimationLabState {
   return Object.freeze({
     tick: nextTick,
     phase: previous.phase,
+    themeName: previous.themeName,
     viewportCols: previous.viewportCols,
     viewportRows: previous.viewportRows,
     panelOpacity: clamp(panelOpacityTarget, 0.3, 1),
@@ -126,6 +129,13 @@ export function reduceAnimationLabState(
     });
   }
 
+  if (action.type === "cycle-theme") {
+    return Object.freeze({
+      ...previous,
+      themeName: cycleThemeName(previous.themeName),
+    });
+  }
+
   if (action.type === "burst") {
     return applyNudge(previous, { burstDelta: 0.9 });
   }

package/templates/animation-lab/src/main.ts

@@ -3,6 +3,7 @@ import { createNodeApp } from "@rezi-ui/node";
 import { resolveAnimationLabCommand } from "./helpers/keybindings.js";
 import { createInitialState, reduceAnimationLabState } from "./helpers/state.js";
 import { renderReactorLab } from "./screens/reactor-lab.js";
+import { cycleThemeName, themeSpec } from "./theme.js";
 import type { AnimationLabAction, NudgePayload } from "./types.js";
 
 function describeThrown(error: unknown): string {
@@ -10,16 +11,30 @@ function describeThrown(error: unknown): string {
   return String(error);
 }
 
+const initialState = createInitialState({
+  cols: typeof process.stdout.columns === "number" ? process.stdout.columns : 96,
+  rows: typeof process.stdout.rows === "number" ? process.stdout.rows : 32,
+});
+
 const app = createNodeApp({
-  initialState: createInitialState({
-    cols: typeof process.stdout.columns === "number" ? process.stdout.columns : 96,
-    rows: typeof process.stdout.rows === "number" ? process.stdout.rows : 32,
-  }),
+  initialState,
+  theme: themeSpec(initialState.themeName).theme,
   config: { fpsCap: 30, executionMode: "inline" },
 });
 
+let activeThemeName = initialState.themeName;
+
 function dispatch(action: AnimationLabAction): void {
-  app.update((previous) => reduceAnimationLabState(previous, action));
+  if (action.type === "cycle-theme") {
+    activeThemeName = cycleThemeName(activeThemeName);
+    app.setTheme(themeSpec(activeThemeName).theme);
+  }
+
+  app.update((previous) => {
+    const next = reduceAnimationLabState(previous, action);
+    activeThemeName = next.themeName;
+    return next;
+  });
 }
 
 let stopping = false;
@@ -97,6 +112,11 @@ function applyCommand(command: ReturnType<typeof resolveAnimationLabCommand>): v
     return;
   }
 
+  if (command === "cycle-theme") {
+    dispatch({ type: "cycle-theme" });
+    return;
+  }
+
   if (command === "randomize") {
     dispatch({ type: "nudge", payload: randomNudge() });
     return;
@@ -145,6 +165,7 @@ app.keys({
   b: () => applyCommand(resolveAnimationLabCommand("b")),
   r: () => applyCommand(resolveAnimationLabCommand("r")),
   m: () => applyCommand(resolveAnimationLabCommand("m")),
+  t: () => applyCommand(resolveAnimationLabCommand("t")),
 });
 
 app.onEvent((event) => {