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

package/package.json

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

package/templates/animation-lab/README.md

@@ -5,6 +5,7 @@ Scaffolded with `create-rezi` using the **__TEMPLATE_LABEL__** template.
 ## What This Template Demonstrates
 
 - Declarative animation hooks with first-class primitives: `useTransition`, `useSpring`, `useSequence`, `useStagger`.
+- Built-in easing presets in action (`linear`, quad, and cubic families).
 - 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.

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/cli-tool/README.md

@@ -4,10 +4,11 @@ Scaffolded with `create-rezi` using the **__TEMPLATE_LABEL__** template.
 
 ## What This Template Demonstrates
 
-- Multi-screen CLI workflow powered by first-party `createApp({ routes })` routing.
+- Multi-screen CLI workflow powered by first-party `createNodeApp({ routes })` routing.
 - Multi-file structure for maintainability (`types`, `theme`, `helpers`, `screens`, `main`).
 - Streamed logs + settings forms + global route keybindings.
 - Route shell pattern you can extend for additional screens.
+- `ui.page()` + `ui.panel()` composition with intent-based button styling.
 
 ## Screens
 

package/templates/cli-tool/src/screens/home.ts

@@ -8,7 +8,7 @@ export function buildHomeContent(state: CliState): VNode {
   const styles = stylesForTheme(state.themeName);
   const latest = state.logs[state.logs.length - 1];
 
-  return ui.box({ border: "rounded", px: 1, py: 0, style: styles.panelStyle }, [
+  return ui.panel({ title: "Overview", style: styles.panelStyle }, [
     ui.column({ gap: 1 }, [
       ui.text("Route-aware Home screen", { variant: "heading" }),
       ui.text(`Operator: ${state.operatorName}`),
@@ -32,20 +32,30 @@ export function renderHomeScreen(
   context: RouteRenderContext<CliState>,
   deps: HomeScreenDeps,
 ): VNode {
+  const styles = stylesForTheme(context.state.themeName);
+
   return renderShell({
     title: "Home",
     context,
     onNavigate: deps.onNavigate,
     onToggleHelp: deps.onToggleHelp,
-    body: ui.column({ gap: 1 }, [
-      buildHomeContent(context.state),
-      ui.row({ gap: 1, wrap: true }, [
-        ui.button({ id: "home-open-logs", label: "Open Logs", onPress: () => deps.onNavigate("logs") }),
-        ui.button({
-          id: "home-open-settings",
-          label: "Open Settings",
-          onPress: () => deps.onNavigate("settings"),
-        }),
+    body: ui.panel({ title: "Home Workspace", style: styles.panelStyle }, [
+      ui.column({ gap: 1 }, [
+        buildHomeContent(context.state),
+        ui.actions([
+          ui.button({
+            id: "home-open-logs",
+            label: "Open Logs",
+            intent: "primary",
+            onPress: () => deps.onNavigate("logs"),
+          }),
+          ui.button({
+            id: "home-open-settings",
+            label: "Open Settings",
+            intent: "secondary",
+            onPress: () => deps.onNavigate("settings"),
+          }),
+        ]),
       ]),
     ]),
   });

package/templates/cli-tool/src/screens/logs.ts

@@ -25,49 +25,53 @@ export function renderLogsScreen(
     context,
     onNavigate: deps.onNavigate,
     onToggleHelp: deps.onToggleHelp,
-    body: ui.column({ gap: 1 }, [
-      ui.row({ gap: 1, wrap: true }, [
-        ui.button({
-          id: "logs-toggle-refresh",
-          label: state.autoRefresh ? "Pause stream" : "Resume stream",
-          onPress: () => deps.dispatch({ type: "toggle-refresh" }),
-        }),
-        ui.button({
-          id: "logs-toggle-debug",
-          label: state.includeDebug ? "Hide debug" : "Show debug",
-          onPress: () => deps.dispatch({ type: "toggle-debug" }),
-        }),
-        ui.button({
-          id: "logs-clear",
-          label: "Clear logs",
-          onPress: () => deps.dispatch({ type: "clear-logs" }),
-        }),
-      ]),
-      ui.box({ border: "rounded", px: 1, py: 0, style: styles.panelStyle }, [
-        ui.logsConsole({
-          id: "logs-console",
-          entries: state.logs,
-          scrollTop: state.logsScrollTop,
-          expandedEntries: state.expandedLogIds,
-          ...(state.includeDebug
-            ? {}
-            : { levelFilter: Object.freeze(["info", "warn", "error"] as const) }),
-          onScroll: (scrollTop) => deps.dispatch({ type: "set-scroll-top", scrollTop }),
-          onEntryToggle: (entryId, expanded) =>
-            deps.dispatch({ type: "set-entry-expanded", entryId, expanded }),
-          onClear: () => deps.dispatch({ type: "clear-logs" }),
-        }),
-      ]),
-      ui.box({ border: "rounded", px: 1, py: 0, style: styles.panelStyle }, [
-        ui.column({ gap: 1 }, [
-          ui.text("Recent entries", { variant: "heading" }),
-          ...recent.map((entry) =>
-            ui.row({ key: entry.id, gap: 1, wrap: true }, [
-              ui.badge(entry.level.toUpperCase(), { variant: levelBadgeVariant(entry.level) }),
-              ui.text(entry.message, { textOverflow: "ellipsis", maxWidth: 60 }),
-            ]),
-          ),
-          ...(recent.length === 0 ? [ui.text("No log entries.", { style: styles.mutedStyle })] : []),
+    body: ui.panel({ title: "Logs Workspace", style: styles.panelStyle }, [
+      ui.column({ gap: 1 }, [
+        ui.actions([
+          ui.button({
+            id: "logs-toggle-refresh",
+            label: state.autoRefresh ? "Pause stream" : "Resume stream",
+            intent: state.autoRefresh ? "warning" : "primary",
+            onPress: () => deps.dispatch({ type: "toggle-refresh" }),
+          }),
+          ui.button({
+            id: "logs-toggle-debug",
+            label: state.includeDebug ? "Hide debug" : "Show debug",
+            intent: "secondary",
+            onPress: () => deps.dispatch({ type: "toggle-debug" }),
+          }),
+          ui.button({
+            id: "logs-clear",
+            label: "Clear logs",
+            intent: "danger",
+            onPress: () => deps.dispatch({ type: "clear-logs" }),
+          }),
+        ]),
+        ui.panel({ title: "Live Console", style: styles.panelStyle }, [
+          ui.logsConsole({
+            id: "logs-console",
+            entries: state.logs,
+            scrollTop: state.logsScrollTop,
+            expandedEntries: state.expandedLogIds,
+            ...(state.includeDebug
+              ? {}
+              : { levelFilter: Object.freeze(["info", "warn", "error"] as const) }),
+            onScroll: (scrollTop) => deps.dispatch({ type: "set-scroll-top", scrollTop }),
+            onEntryToggle: (entryId, expanded) =>
+              deps.dispatch({ type: "set-entry-expanded", entryId, expanded }),
+            onClear: () => deps.dispatch({ type: "clear-logs" }),
+          }),
+        ]),
+        ui.panel({ title: "Recent entries", style: styles.panelStyle }, [
+          ui.column({ gap: 1 }, [
+            ...recent.map((entry) =>
+              ui.row({ key: entry.id, gap: 1, wrap: true }, [
+                ui.badge(entry.level.toUpperCase(), { variant: levelBadgeVariant(entry.level) }),
+                ui.text(entry.message, { textOverflow: "ellipsis", maxWidth: 60 }),
+              ]),
+            ),
+            ...(recent.length === 0 ? [ui.text("No log entries.", { style: styles.mutedStyle })] : []),
+          ]),
         ]),
       ]),
     ]),

package/templates/cli-tool/src/screens/settings.ts

@@ -49,34 +49,40 @@ export function renderSettingsScreen(
     context,
     onNavigate: deps.onNavigate,
     onToggleHelp: deps.onToggleHelp,
-    body: ui.box({ border: "rounded", px: 1, py: 0 }, [
+    body: ui.panel("Profile Settings", [
       ui.column({ gap: 1 }, [
         ui.text("Profile", { variant: "heading" }),
-        ui.text("Operator"),
-        ui.input({
-          id: "settings-operator",
-          value: state.operatorName,
-          onInput: (operatorName) => deps.dispatch({ type: "set-operator", operatorName }),
+        ui.field({
+          label: "Operator",
+          children: ui.input({
+            id: "settings-operator",
+            value: state.operatorName,
+            onInput: (operatorName) => deps.dispatch({ type: "set-operator", operatorName }),
+          }),
         }),
-        ui.text("Environment"),
-        ui.select({
-          id: "settings-environment",
-          value: state.environment,
-          options: ENVIRONMENT_OPTIONS,
-          onChange: (value) => {
-            if (!isEnvironmentName(value)) return;
-            deps.dispatch({ type: "set-environment", environment: value });
-          },
+        ui.field({
+          label: "Environment",
+          children: ui.select({
+            id: "settings-environment",
+            value: state.environment,
+            options: ENVIRONMENT_OPTIONS,
+            onChange: (value) => {
+              if (!isEnvironmentName(value)) return;
+              deps.dispatch({ type: "set-environment", environment: value });
+            },
+          }),
         }),
-        ui.text("Theme"),
-        ui.select({
-          id: "settings-theme",
-          value: state.themeName,
-          options: THEME_OPTIONS,
-          onChange: (value) => {
-            if (!isThemeName(value)) return;
-            deps.dispatch({ type: "set-theme", themeName: value });
-          },
+        ui.field({
+          label: "Theme",
+          children: ui.select({
+            id: "settings-theme",
+            value: state.themeName,
+            options: THEME_OPTIONS,
+            onChange: (value) => {
+              if (!isThemeName(value)) return;
+              deps.dispatch({ type: "set-theme", themeName: value });
+            },
+          }),
         }),
         ui.checkbox({
           id: "settings-auto-refresh",

package/templates/cli-tool/src/screens/shell.ts

@@ -16,39 +16,59 @@ export function renderShell(options: ShellOptions): VNode {
   const styles = stylesForTheme(state.themeName);
   const theme = themeSpec(state.themeName);
 
-  const content = ui.column({ p: 1, gap: 1, items: "stretch", style: styles.rootStyle }, [
-    ui.box({ border: "rounded", px: 1, py: 0, style: styles.stripStyle }, [
-      ui.column({ gap: 1 }, [
-        ui.row({ gap: 1, wrap: true, items: "center" }, [
-          ui.text(`${PRODUCT_NAME} · ${options.title}`, { variant: "heading" }),
-          ui.badge(TEMPLATE_LABEL, { variant: "info" }),
-          ui.tag(`Theme ${theme.label}`, { variant: theme.badge }),
-          ui.badge(`Tick ${String(state.tick)}`, { variant: "default" }),
-          ui.status(state.autoRefresh ? "online" : "away", {
-            label: state.autoRefresh ? "Streaming" : "Paused",
+  const content = ui.page({
+    p: 1,
+    gap: 1,
+    header: ui.header({
+      title: `${PRODUCT_NAME} · ${options.title}`,
+      subtitle: PRODUCT_TAGLINE,
+      actions: [
+        ui.badge(TEMPLATE_LABEL, { variant: "info" }),
+        ui.tag(`Theme ${theme.label}`, { variant: theme.badge }),
+        ui.badge(`Tick ${String(state.tick)}`, { variant: "default" }),
+        ui.status(state.autoRefresh ? "online" : "away", {
+          label: state.autoRefresh ? "Streaming" : "Paused",
+        }),
+      ],
+    }),
+    body: ui.column({ gap: 1 }, [
+      ui.panel({ title: "Navigation", style: styles.stripStyle }, [
+        ui.actions([
+          ui.button({
+            id: "go-home",
+            label: "Home",
+            intent: "secondary",
+            onPress: () => options.onNavigate("home"),
+          }),
+          ui.button({
+            id: "go-logs",
+            label: "Logs",
+            intent: "secondary",
+            onPress: () => options.onNavigate("logs"),
+          }),
+          ui.button({
+            id: "go-settings",
+            label: "Settings",
+            intent: "secondary",
+            onPress: () => options.onNavigate("settings"),
+          }),
+          ui.button({
+            id: "toggle-help",
+            label: "Help",
+            intent: "link",
+            onPress: options.onToggleHelp,
           }),
         ]),
-        ui.text(PRODUCT_TAGLINE, { style: styles.mutedStyle }),
       ]),
+      options.body,
     ]),
-
-    ui.row({ gap: 1, wrap: true }, [
-      ui.button({ id: "go-home", label: "Home", onPress: () => options.onNavigate("home") }),
-      ui.button({ id: "go-logs", label: "Logs", onPress: () => options.onNavigate("logs") }),
-      ui.button({
-        id: "go-settings",
-        label: "Settings",
-        onPress: () => options.onNavigate("settings"),
-      }),
-      ui.button({ id: "toggle-help", label: "Help", onPress: options.onToggleHelp }),
-    ]),
-
-    options.body,
-
-    ui.text("Keys: F1/F2/F3 or Alt+1/2/3 · p toggle stream · h/? help · q quit", {
-      style: styles.mutedStyle,
+    footer: ui.statusBar({
+      left: [ui.text("Keys: F1/F2/F3 or Alt+1/2/3 · p toggle stream · h/? help · q quit", {
+        style: styles.mutedStyle,
+      })],
+      right: [ui.text(state.autoRefresh ? "Streaming" : "Paused", { style: styles.mutedStyle })],
     }),
-  ]);
+  });
 
   if (!state.showHelp) return content;
 
@@ -59,6 +79,7 @@ export function renderShell(options: ShellOptions): VNode {
       title: `${PRODUCT_NAME} Shortcuts`,
       width: 70,
       backdrop: "none",
+      initialFocus: "cli-help-close",
       returnFocusTo: "toggle-help",
       content: ui.column({ gap: 1 }, [
         ui.text("F1/F2/F3 : navigate to Home/Logs/Settings"),

package/templates/dashboard/README.md

@@ -8,6 +8,8 @@ Scaffolded with `create-rezi` using the **__TEMPLATE_LABEL__** template.
 - Deterministic telemetry updates via `useStream(...)` + async iterable ingestion.
 - Operator dashboard patterns: fleet summary, filtered list, service inspector, and help modal.
 - Theme cycling and keyboard-driven controls designed for fast operational workflows.
+- `ui.panel()` section composition with recipe-styled table defaults (`dsSize`/`dsTone`).
+- Wheel-scroll-friendly containers (`overflow: "scroll"`) for dense service lanes.
 
 ## File Layout
 

package/templates/dashboard/src/screens/overview.ts

@@ -1,5 +1,5 @@
 import type { VNode } from "@rezi-ui/core";
-import { ui } from "@rezi-ui/core";
+import { ui, when } from "@rezi-ui/core";
 import {
   filterLabel,
   fleetCounts,
@@ -23,7 +23,7 @@ type DashboardScreenHandlers = Readonly<{
 }>;
 
 function panel(title: string, body: readonly VNode[], style: Readonly<Record<string, unknown>>): VNode {
-  return ui.box({ title, border: "rounded", px: 1, py: 0, style }, body);
+  return ui.panel({ title, style }, body);
 }
 
 export function renderOverviewScreen(state: DashboardState, handlers: DashboardScreenHandlers): VNode {
@@ -59,86 +59,121 @@ export function renderOverviewScreen(state: DashboardState, handlers: DashboardS
 
   const uptimeSec = Math.max(1, Math.floor((Date.now() - state.startedAtMs) / 1000));
   const updateRate = (state.tick / uptimeSec).toFixed(2);
+  const inspectorContent =
+    when(
+      Boolean(selected),
+      () => {
+        const service = selected as NonNullable<typeof selected>;
+        return ui.column({ gap: 1 }, [
+          ui.row({ gap: 1, wrap: true }, [
+            ui.badge(service.name, { variant: statusBadge(service.status).variant }),
+            ui.tag(service.owner, { variant: "default" }),
+            ui.tag(service.region, { variant: "info" }),
+          ]),
+          ui.text(`Latency: ${formatLatency(service.latencyMs)}`),
+          ui.text(`Error Rate: ${formatErrorRate(service.errorRate)}`),
+          ui.text(`Traffic: ${formatTraffic(service.trafficRpm)}`),
+          ui.text(`Update rate: ${updateRate} Hz`, { style: styles.mutedStyle }),
+          ui.sparkline(service.history, { width: 18, min: 0, max: 220 }),
+        ]);
+      },
+      () => ui.text("No service selected.", { style: styles.mutedStyle }),
+    ) ?? ui.text("No service selected.", { style: styles.mutedStyle });
 
-  const content = ui.column({ p: 1, gap: 1, items: "stretch", style: styles.rootStyle }, [
-    ui.box({ border: "rounded", px: 1, py: 0, style: styles.stripStyle }, [
-      ui.column({ gap: 1 }, [
-        ui.row({ gap: 1, items: "center", wrap: true }, [
-          ui.text(PRODUCT_NAME, { variant: "heading" }),
-          ui.badge(TEMPLATE_LABEL, { variant: "info" }),
-          ui.badge(`Fleet ${health.label}`, { variant: health.variant }),
-          ui.status(state.paused ? "away" : "online", {
-            label: state.paused ? "Paused" : "Streaming",
-          }),
-          ui.spacer({ flex: 1 }),
-          ui.tag(`Theme ${theme.label}`, { variant: theme.badge }),
-        ]),
-        ui.text(PRODUCT_TAGLINE, { style: styles.mutedStyle }),
-      ]),
-    ]),
-
-    ui.row({ gap: 1, wrap: true }, [
-      ui.button({
-        id: "filter",
-        label: `Filter: ${filterLabel(state.filter)}`,
-        onPress: handlers.onCycleFilter,
-      }),
-      ui.button({
-        id: "theme",
-        label: "Cycle Theme",
-        onPress: handlers.onCycleTheme,
-      }),
-      ui.button({
-        id: "pause",
-        label: state.paused ? "Resume Stream" : "Pause Stream",
-        onPress: handlers.onTogglePause,
-      }),
-      ui.button({
-        id: "help",
-        label: "Help",
-        onPress: handlers.onToggleHelp,
-      }),
-    ]),
-
-    ui.row({ gap: 1, wrap: true, items: "stretch" }, [
+  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.badge(`Fleet ${health.label}`, { variant: health.variant }),
+        ui.status(state.paused ? "away" : "online", {
+          label: state.paused ? "Paused" : "Streaming",
+        }),
+        ui.tag(`Theme ${theme.label}`, { variant: theme.badge }),
+      ],
+    }),
+    body: ui.column({ gap: 1 }, [
       panel(
-        "Service Fleet",
+        "Actions",
         [
-          ui.row({ gap: 1, wrap: true }, [
-            ui.badge(`Healthy ${String(counts.healthy)}`, { variant: "success" }),
-            ui.badge(`Warning ${String(counts.warning)}`, { variant: "warning" }),
-            ui.badge(`Down ${String(counts.down)}`, { variant: "error" }),
+          ui.actions([
+            ui.button({
+              id: "filter",
+              label: `Filter: ${filterLabel(state.filter)}`,
+              intent: "secondary",
+              onPress: handlers.onCycleFilter,
+            }),
+            ui.button({
+              id: "theme",
+              label: "Cycle Theme",
+              intent: "secondary",
+              onPress: handlers.onCycleTheme,
+            }),
+            ui.button({
+              id: "pause",
+              label: state.paused ? "Resume Stream" : "Pause Stream",
+              intent: state.paused ? "primary" : "warning",
+              onPress: handlers.onTogglePause,
+            }),
+            ui.button({
+              id: "help",
+              label: "Help",
+              intent: "link",
+              onPress: handlers.onToggleHelp,
+            }),
           ]),
-          ...serviceRows,
         ],
         styles.panelStyle,
       ),
-      panel(
-        "Inspector",
-        selected
-          ? [
-              ui.column({ gap: 1 }, [
-                ui.row({ gap: 1, wrap: true }, [
-                  ui.badge(selected.name, { variant: statusBadge(selected.status).variant }),
-                  ui.tag(selected.owner, { variant: "default" }),
-                  ui.tag(selected.region, { variant: "info" }),
-                ]),
-                ui.text(`Latency: ${formatLatency(selected.latencyMs)}`),
-                ui.text(`Error Rate: ${formatErrorRate(selected.errorRate)}`),
-                ui.text(`Traffic: ${formatTraffic(selected.trafficRpm)}`),
-                ui.text(`Update rate: ${updateRate} Hz`, { style: styles.mutedStyle }),
-                ui.sparkline(selected.history, { width: 18, min: 0, max: 220 }),
-              ]),
-            ]
-          : [ui.text("No service selected.", { style: styles.mutedStyle })],
-        styles.panelStyle,
-      ),
+      ui.row({ gap: 1, wrap: true, items: "stretch" }, [
+        panel(
+          "Service Fleet",
+          [
+            ui.row({ gap: 1, wrap: true }, [
+              ui.badge(`Healthy ${String(counts.healthy)}`, { variant: "success" }),
+              ui.badge(`Warning ${String(counts.warning)}`, { variant: "warning" }),
+              ui.badge(`Down ${String(counts.down)}`, { variant: "error" }),
+            ]),
+            ui.box({ height: 10, overflow: "scroll", border: "none" }, [...serviceRows]),
+            ui.table({
+              id: "fleet-table",
+              columns: [
+                { key: "name", header: "Service", flex: 1 },
+                { key: "status", header: "Status", width: 8 },
+                { key: "latencyMs", header: "Latency", width: 9, align: "right" },
+              ],
+              data: visible,
+              getRowKey: (service) => service.id,
+              selection: selected ? [selected.id] : [],
+              selectionMode: "single",
+              onSelectionChange: (keys) => {
+                const key = keys[0];
+                if (typeof key === "string") handlers.onSelectService(key);
+              },
+              onRowPress: (row) => handlers.onSelectService(row.id),
+              dsSize: "sm",
+              dsTone: "default",
+            }),
+          ],
+          styles.panelStyle,
+        ),
+        panel(
+          "Inspector",
+          [inspectorContent],
+          styles.panelStyle,
+        ),
+      ]),
     ]),
-
-    ui.text("Keys: q quit · j/k or arrows move · f filter · t theme · p pause · h/? help", {
-      style: styles.mutedStyle,
+    footer: ui.statusBar({
+      left: [ui.text("Keys: q quit · j/k or arrows move · f filter · t theme · p pause · h/? help", {
+        style: styles.mutedStyle,
+      })],
+      right: [ui.text(`Tick ${String(state.tick)}`, { style: styles.mutedStyle })],
     }),
-  ]);
+  });
 
   if (!state.showHelp) return content;
 

package/templates/minimal/README.md

@@ -5,6 +5,7 @@ Scaffolded with `create-rezi` using the **__TEMPLATE_LABEL__** template.
 ## What This Template Demonstrates
 
 - A single-screen TUI with no routing overhead.
+- `ui.page()` layout shell with panelized sections and intent-based button actions.
 - Minimal state + reducer flow with just a few actions.
 - Keybindings for quit/help/theme/counter updates.
 - Signal-safe startup and shutdown pattern.

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
 // ---------------------------------------------------------------------------