create-rezi 0.1.0-alpha.30 → 0.1.0-alpha.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-rezi",
-  "version": "0.1.0-alpha.30",
+  "version": "0.1.0-alpha.31",
   "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.30"
+    "@rezi-ui/testkit": "0.1.0-alpha.31"
   }
 }

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

@@ -1,6 +1,5 @@
 import { exit } from "node:process";
-import { createApp } from "@rezi-ui/core";
-import { createNodeBackend } from "@rezi-ui/node";
+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";
@@ -11,16 +10,12 @@ function describeThrown(error: unknown): string {
   return String(error);
 }
 
-const app = createApp({
-  backend: createNodeBackend({
-    fpsCap: 30,
-    executionMode: "inline",
-  }),
+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,
   }),
-  config: { fpsCap: 30 },
+  config: { fpsCap: 30, executionMode: "inline" },
 });
 
 function dispatch(action: AnimationLabAction): void {

package/templates/minimal/src/screens/main-screen.ts

@@ -14,42 +14,56 @@ type ScreenHandlers = Readonly<{
 export function renderMainScreen(state: MinimalState, handlers: ScreenHandlers): VNode {
   const theme = themeSpec(state.themeName);
 
-  const content = ui.column({ p: 1, gap: 1 }, [
-    ui.box({ border: "rounded", px: 1, py: 0 }, [
-      ui.column({ gap: 1 }, [
-        ui.row({ gap: 1, wrap: true }, [
-          ui.text(PRODUCT_NAME, { variant: "heading" }),
-          ui.badge(TEMPLATE_LABEL, { variant: "info" }),
-          ui.tag(`Theme ${theme.label}`, { variant: theme.badge }),
-        ]),
-        ui.text(PRODUCT_TAGLINE),
-      ]),
-    ]),
-
-    ui.box({ title: "Counter", border: "rounded", px: 1, py: 0 }, [
-      ui.column({ gap: 1 }, [
-        ui.text(`Count: ${String(state.count)}`, { variant: "heading" }),
-        ui.row({ gap: 1, wrap: true }, [
-          ui.button({ id: "dec", label: "-1", onPress: handlers.onDecrement }),
-          ui.button({ id: "inc", label: "+1", onPress: handlers.onIncrement }),
-          ui.button({ id: "theme", label: "Cycle Theme", onPress: handlers.onCycleTheme }),
-          ui.button({ id: "help", label: "Help", onPress: handlers.onToggleHelp }),
+  const content = ui.page({
+    p: 1,
+    gap: 1,
+    header: ui.header({
+      title: PRODUCT_NAME,
+      subtitle: PRODUCT_TAGLINE,
+      actions: [
+        ui.badge(TEMPLATE_LABEL, { variant: "info" }),
+        ui.tag(`Theme ${theme.label}`, { variant: theme.badge }),
+      ],
+    }),
+    body: ui.column({ gap: 1 }, [
+      ui.panel("Counter", [
+        ui.column({ gap: 1 }, [
+          ui.text(`Count: ${String(state.count)}`, { variant: "heading" }),
+          ui.toolbar({ gap: 1 }, [
+            ui.button({ id: "dec", label: "-1", onPress: handlers.onDecrement }),
+            ui.button({
+              id: "inc",
+              label: "+1",
+              intent: "primary",
+              onPress: handlers.onIncrement,
+            }),
+            ui.button({ id: "theme", label: "Cycle Theme", onPress: handlers.onCycleTheme }),
+            ui.button({ id: "help", label: "Help", intent: "link", onPress: handlers.onToggleHelp }),
+          ]),
         ]),
       ]),
+      state.lastError
+        ? ui.panel("Alerts", [
+            ui.callout(state.lastError, {
+              title: "Example Error Pattern",
+              variant: "error",
+            }),
+            ui.actions([
+              ui.button({
+                id: "clear-error",
+                label: "Clear",
+                intent: "danger",
+                onPress: handlers.onClearError,
+              }),
+            ]),
+          ])
+        : ui.panel("Status", [ui.text("No runtime error. Press e to simulate one.")]),
     ]),
-
-    state.lastError
-      ? ui.column({ gap: 1 }, [
-          ui.callout(state.lastError, {
-            title: "Example Error Pattern",
-            variant: "error",
-          }),
-          ui.button({ id: "clear-error", label: "Clear", onPress: handlers.onClearError }),
-        ])
-      : ui.text("No runtime error. Press e to simulate one."),
-
-    ui.text("Keys: q quit · ? help · +/- counter · t theme · e error"),
-  ]);
+    footer: ui.statusBar({
+      left: [ui.status("online"), ui.text("Ready")],
+      right: [ui.text("Keys: q quit · ? help · +/- counter · t theme · e error")],
+    }),
+  });
 
   if (!state.showHelp) return content;
 

package/templates/stress-test/src/main.ts

@@ -3,7 +3,6 @@ import { devNull, tmpdir } from "node:os";
 import * as path from "node:path";
 import type { BadgeVariant, RichTextSpan, TextStyle, ThemeDefinition, VNode } from "@rezi-ui/core";
 import {
-  createApp,
   darkTheme,
   dimmedTheme,
   draculaTheme,
@@ -13,7 +12,7 @@ import {
   rgb,
   ui,
 } from "@rezi-ui/core";
-import { createNodeBackend } from "@rezi-ui/node";
+import { type NodeBackend, createNodeApp } from "@rezi-ui/node";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -693,7 +692,7 @@ let _lastViewMs = 0;
 
 let _backendPerfInFlight = false;
 let _lastBackendPerfSampleMs = 0;
-let _backend: ReturnType<typeof createNodeBackend> | null = null;
+let _backend: NodeBackend | null = null;
 
 let _memoryBallast: Buffer[] = [];
 let _memoryBallastBytes = 0;
@@ -976,16 +975,10 @@ function simulateTick(state: State, nowMs: number): State {
 // ---------------------------------------------------------------------------
 
 const initialNowMs = Date.now();
-const backend = createNodeBackend({
-  fpsCap: UI_FPS_CAP,
-  executionMode: "worker",
-});
-_backend = backend;
-
-const app = createApp<State>({
-  backend,
+const app = createNodeApp<State>({
   config: {
     fpsCap: UI_FPS_CAP,
+    executionMode: "worker",
     internal_onRender: (metrics) => {
       _lastRenderMs = round2(metrics.renderTime);
     },
@@ -1037,6 +1030,8 @@ const app = createApp<State>({
   },
 });
 
+_backend = app.backend;
+
 // ---------------------------------------------------------------------------
 // Actions
 // ---------------------------------------------------------------------------