create-rezi 0.1.0-alpha.1

package/templates/dashboard/src/main.ts

@@ -0,0 +1,262 @@
+import { createApp, rgb, ui } from "@rezi-ui/core";
+import { createNodeBackend } from "@rezi-ui/node";
+
+type ServiceStatus = "healthy" | "warning" | "down";
+
+type Service = {
+  name: string;
+  region: string;
+  status: ServiceStatus;
+  latencyMs: number;
+  errorRate: number;
+};
+
+const services: readonly Service[] = [
+  { name: "Auth Gateway", region: "us-east", status: "healthy", latencyMs: 18, errorRate: 0.2 },
+  { name: "Billing", region: "us-west", status: "warning", latencyMs: 74, errorRate: 1.7 },
+  { name: "Search", region: "eu-central", status: "healthy", latencyMs: 32, errorRate: 0.4 },
+  { name: "Realtime", region: "ap-south", status: "warning", latencyMs: 96, errorRate: 2.1 },
+  { name: "Exports", region: "us-east", status: "down", latencyMs: 0, errorRate: 9.4 },
+];
+
+const incidents = [
+  "Exports queue is backing up (ETA 15m)",
+  "Realtime jitter above 90ms in ap-south",
+  "Billing retries spiked 2x from baseline",
+];
+
+const activity = [
+  "Deploy #491 rolled to 50%",
+  "Cache warm-up completed",
+  "Latency budget tightened to 80ms",
+  "Tracing sampling bumped to 20%",
+];
+
+type Filter = "all" | "healthy" | "warning" | "down";
+
+type State = {
+  selected: number;
+  filter: Filter;
+  pinned: string | null;
+  showHelp: boolean;
+};
+
+const app = createApp<State>({
+  backend: createNodeBackend(),
+  initialState: {
+    selected: 0,
+    filter: "all",
+    pinned: null,
+    showHelp: false,
+  },
+});
+
+const colors = {
+  accent: rgb(120, 200, 255),
+  muted: rgb(140, 150, 170),
+  panel: rgb(18, 22, 34),
+  panelAlt: rgb(22, 28, 44),
+  ok: rgb(120, 220, 160),
+  warn: rgb(255, 190, 120),
+  down: rgb(255, 120, 140),
+  ink: rgb(10, 14, 24),
+  inkSoft: rgb(30, 36, 54),
+};
+
+function statusColor(status: ServiceStatus) {
+  if (status === "healthy") return colors.ok;
+  if (status === "warning") return colors.warn;
+  return colors.down;
+}
+
+function filterServices(filter: Filter): Service[] {
+  if (filter === "all") return [...services];
+  return services.filter((svc) => svc.status === filter);
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, value));
+}
+
+function panel(title: string, children: ReturnType<typeof ui.column>[], flex = 1) {
+  return ui.box(
+    {
+      title,
+      flex,
+      border: "rounded",
+      px: 1,
+      py: 0,
+      style: { bg: colors.panel, fg: colors.muted },
+    },
+    children,
+  );
+}
+
+app.view((state) => {
+  const visible = filterServices(state.filter);
+  const selected = visible[state.selected] ?? visible[0] ?? services[0];
+  const pinned = state.pinned ?? selected?.name ?? "-";
+
+  return ui.column({ flex: 1, p: 1, gap: 1, items: "stretch" }, [
+    ui.row({ justify: "between", items: "center" }, [
+      ui.text("__APP_NAME__", { fg: colors.accent, bold: true }),
+      ui.row({ gap: 2, items: "center" }, [
+        ui.text("Filter", { fg: colors.muted }),
+        ui.text(state.filter.toUpperCase(), { fg: colors.accent, bold: true }),
+        ui.text("Pinned", { fg: colors.muted }),
+        ui.text(pinned, { fg: colors.ok, bold: true }),
+      ]),
+    ]),
+
+    ui.row({ flex: 1, gap: 1, items: "stretch" }, [
+      panel(
+        "Services",
+        [
+          ui.column(
+            { gap: 0 },
+            visible.map((svc, index) => {
+              const active = index === state.selected;
+              return ui.row(
+                {
+                  key: svc.name,
+                  gap: 1,
+                  style: {
+                    bg: active ? colors.inkSoft : undefined,
+                    fg: active ? colors.accent : colors.muted,
+                  },
+                },
+                [
+                  ui.text(active ? ">" : " "),
+                  ui.text(svc.name, { bold: active }),
+                  ui.text(`(${svc.region})`, { fg: colors.muted }),
+                  ui.text(svc.status.toUpperCase(), {
+                    fg: statusColor(svc.status),
+                    bold: true,
+                  }),
+                ],
+              );
+            }),
+          ),
+        ],
+        1,
+      ),
+
+      panel(
+        "Service Health",
+        [
+          ui.column({ gap: 1 }, [
+            ui.text(selected ? selected.name : "-", { fg: colors.accent, bold: true }),
+            ui.row({ gap: 2 }, [
+              ui.text(`Latency: ${selected ? selected.latencyMs : "-"} ms`),
+              ui.text(`Errors: ${selected ? selected.errorRate : "-"}%`, {
+                fg: selected && selected.errorRate > 2 ? colors.warn : colors.muted,
+              }),
+            ]),
+            ui.divider({ char: "-" }),
+            ui.text("Active incidents", { fg: colors.muted }),
+            ...incidents.map((line) => ui.text(`- ${line}`)),
+          ]),
+        ],
+        2,
+      ),
+
+      panel(
+        "Activity",
+        [
+          ui.column({ gap: 1 }, [
+            ui.text("Recent deploys", { fg: colors.muted }),
+            ...activity.map((line) => ui.text(`- ${line}`)),
+            ui.divider({ char: "-" }),
+            ui.text("Escalations", { fg: colors.muted }),
+            ui.text("- On-call rotation starts in 2h"),
+            ui.text("- 3 alerts awaiting acknowledgement"),
+          ]),
+        ],
+        1,
+      ),
+    ]),
+
+    state.showHelp
+      ? ui.box(
+          {
+            border: "rounded",
+            px: 1,
+            py: 0,
+            style: { bg: colors.panelAlt, fg: colors.muted },
+          },
+          [
+            ui.row({ gap: 1 }, [
+              ui.kbd(["up", "down"]),
+              ui.text("Move"),
+              ui.kbd("f"),
+              ui.text("Filter"),
+              ui.kbd("enter"),
+              ui.text("Pin"),
+              ui.kbd("?"),
+              ui.text("Help"),
+              ui.kbd("q"),
+              ui.text("Quit"),
+            ]),
+          ],
+        )
+      : ui.box({ px: 1, py: 0, style: { bg: colors.ink, fg: colors.muted } }, [
+          ui.row({ justify: "between", items: "center" }, [
+            ui.text("Status: nominal"),
+            ui.row({ gap: 1 }, [
+              ui.kbd("up/down"),
+              ui.text("Move"),
+              ui.kbd("f"),
+              ui.text("Filter"),
+              ui.kbd("?"),
+              ui.text("Help"),
+            ]),
+          ]),
+        ]),
+  ]);
+});
+
+app.keys({
+  q: () => app.stop(),
+  "ctrl+c": () => app.stop(),
+  up: () =>
+    app.update((s) => {
+      const list = filterServices(s.filter);
+      return { ...s, selected: clamp(s.selected - 1, 0, Math.max(0, list.length - 1)) };
+    }),
+  down: () =>
+    app.update((s) => {
+      const list = filterServices(s.filter);
+      return { ...s, selected: clamp(s.selected + 1, 0, Math.max(0, list.length - 1)) };
+    }),
+  k: () =>
+    app.update((s) => {
+      const list = filterServices(s.filter);
+      return { ...s, selected: clamp(s.selected - 1, 0, Math.max(0, list.length - 1)) };
+    }),
+  j: () =>
+    app.update((s) => {
+      const list = filterServices(s.filter);
+      return { ...s, selected: clamp(s.selected + 1, 0, Math.max(0, list.length - 1)) };
+    }),
+  f: () =>
+    app.update((s) => {
+      const next: Filter =
+        s.filter === "all"
+          ? "warning"
+          : s.filter === "warning"
+            ? "healthy"
+            : s.filter === "healthy"
+              ? "down"
+              : "all";
+      return { ...s, filter: next, selected: 0 };
+    }),
+  enter: () =>
+    app.update((s) => {
+      const list = filterServices(s.filter);
+      const svc = list[s.selected];
+      return { ...s, pinned: svc ? svc.name : s.pinned };
+    }),
+  "?": () => app.update((s) => ({ ...s, showHelp: !s.showHelp })),
+});
+
+await app.start();

package/templates/dashboard/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "types": ["node"],
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true
+  },
+  "include": ["src/**/*.ts"]
+}

package/templates/file-browser/README.md

@@ -0,0 +1,18 @@
+# __APP_NAME__
+
+Scaffolded with `npm create rezi` using the **__TEMPLATE_LABEL__** template.
+
+## Quickstart
+
+```bash
+npm install
+npm start
+```
+
+## Keybindings
+
+- `up` / `down` or `j` / `k`: Move selection
+- `enter`: Open directory / preview file
+- `backspace`: Go up
+- `h`: Toggle hidden files
+- `q`: Quit

package/templates/file-browser/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "__PACKAGE_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "tsx src/main.ts",
+    "dev": "tsx watch src/main.ts",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@rezi-ui/core": "^0.1.0-alpha.0",
+    "@rezi-ui/node": "^0.1.0-alpha.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.1",
+    "tsx": "^4.20.0",
+    "typescript": "^5.6.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/templates/file-browser/src/main.ts

@@ -0,0 +1,256 @@
+import { createApp, rgb, ui } from "@rezi-ui/core";
+import { createNodeBackend } from "@rezi-ui/node";
+
+type EntryType = "dir" | "file";
+
+type Entry = {
+  name: string;
+  type: EntryType;
+  size: string;
+  modified: string;
+  preview: string;
+};
+
+type Tree = Record<string, Entry[]>;
+
+const tree: Tree = {
+  "/": [
+    { name: "src", type: "dir", size: "-", modified: "2026-02-10", preview: "" },
+    { name: "docs", type: "dir", size: "-", modified: "2026-02-08", preview: "" },
+    {
+      name: "package.json",
+      type: "file",
+      size: "2 KB",
+      modified: "2026-02-07",
+      preview: '{\n  "name": "__APP_NAME__"\n}',
+    },
+    { name: ".env", type: "file", size: "1 KB", modified: "2026-02-05", preview: "API_KEY=***" },
+  ],
+  "/src": [
+    {
+      name: "main.ts",
+      type: "file",
+      size: "4 KB",
+      modified: "2026-02-10",
+      preview: "import { createApp } from '@rezi-ui/core'",
+    },
+    { name: "components", type: "dir", size: "-", modified: "2026-02-09", preview: "" },
+    { name: "styles", type: "dir", size: "-", modified: "2026-02-09", preview: "" },
+  ],
+  "/src/components": [
+    {
+      name: "Panel.ts",
+      type: "file",
+      size: "1 KB",
+      modified: "2026-02-09",
+      preview: "export function Panel() {}",
+    },
+    {
+      name: "StatusBar.ts",
+      type: "file",
+      size: "1 KB",
+      modified: "2026-02-09",
+      preview: "export function StatusBar() {}",
+    },
+  ],
+  "/docs": [
+    {
+      name: "overview.md",
+      type: "file",
+      size: "3 KB",
+      modified: "2026-02-08",
+      preview: "# Overview",
+    },
+    { name: "usage.md", type: "file", size: "2 KB", modified: "2026-02-08", preview: "# Usage" },
+  ],
+  "/src/styles": [
+    {
+      name: "tokens.ts",
+      type: "file",
+      size: "2 KB",
+      modified: "2026-02-08",
+      preview: "export const colors = {}",
+    },
+  ],
+};
+
+const colors = {
+  accent: rgb(120, 200, 255),
+  muted: rgb(140, 150, 170),
+  panel: rgb(18, 22, 34),
+  panelAlt: rgb(22, 28, 44),
+  ink: rgb(10, 14, 24),
+};
+
+type State = {
+  path: string;
+  selected: number;
+  showHidden: boolean;
+  opened: string | null;
+};
+
+const app = createApp<State>({
+  backend: createNodeBackend(),
+  initialState: {
+    path: "/",
+    selected: 0,
+    showHidden: false,
+    opened: null,
+  },
+});
+
+function clamp(value: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, value));
+}
+
+function joinPath(base: string, name: string): string {
+  if (base === "/") return `/${name}`;
+  return `${base}/${name}`;
+}
+
+function parentPath(path: string): string {
+  if (path === "/") return "/";
+  const parts = path.split("/").filter(Boolean);
+  parts.pop();
+  return `/${parts.join("/")}` || "/";
+}
+
+function listEntries(state: State): Entry[] {
+  const entries = tree[state.path] ?? [];
+  if (state.showHidden) return entries;
+  return entries.filter((entry) => !entry.name.startsWith("."));
+}
+
+function panel(title: string, children: ReturnType<typeof ui.column>[], flex = 1) {
+  return ui.box(
+    { title, flex, border: "rounded", px: 1, py: 0, style: { bg: colors.panel, fg: colors.muted } },
+    children,
+  );
+}
+
+app.view((state) => {
+  const entries = listEntries(state);
+  const selected = entries[state.selected];
+  const preview = selected?.preview || "Select a file to preview.";
+
+  return ui.column({ flex: 1, p: 1, gap: 1, items: "stretch" }, [
+    ui.row({ justify: "between", items: "center" }, [
+      ui.text("__APP_NAME__", { fg: colors.accent, bold: true }),
+      ui.text(`Path: ${state.path}`, { fg: colors.muted }),
+    ]),
+
+    ui.row({ flex: 1, gap: 1, items: "stretch" }, [
+      panel(
+        "Files",
+        [
+          ui.column(
+            { gap: 0 },
+            entries.map((entry, index) => {
+              const active = index === state.selected;
+              const prefix = active ? ">" : " ";
+              const marker = entry.type === "dir" ? "[D]" : "[F]";
+              return ui.text(`${prefix} ${marker} ${entry.name}`, {
+                key: entry.name,
+                fg: active ? colors.accent : colors.muted,
+                bold: active,
+              });
+            }),
+          ),
+        ],
+        1,
+      ),
+
+      panel(
+        "Details",
+        [
+          ui.column({ gap: 1 }, [
+            ui.text(selected ? selected.name : "-", { fg: colors.accent, bold: true }),
+            ui.text(`Type: ${selected?.type ?? "-"}`),
+            ui.text(`Size: ${selected?.size ?? "-"}`),
+            ui.text(`Modified: ${selected?.modified ?? "-"}`),
+            ui.divider({ char: "-" }),
+            ui.text("Preview", { fg: colors.muted }),
+            ui.text(preview),
+          ]),
+        ],
+        2,
+      ),
+
+      panel(
+        "Pinned",
+        [
+          ui.column({ gap: 1 }, [
+            ui.text("Last opened", { fg: colors.muted }),
+            ui.text(state.opened ?? "-"),
+            ui.text(""),
+            ui.text("Hidden files"),
+            ui.text(state.showHidden ? "Visible" : "Hidden"),
+          ]),
+        ],
+        1,
+      ),
+    ]),
+
+    ui.box({ px: 1, py: 0, style: { bg: colors.ink, fg: colors.muted } }, [
+      ui.row({ justify: "between", items: "center" }, [
+        ui.text("File browser ready"),
+        ui.row({ gap: 1 }, [
+          ui.kbd("up"),
+          ui.text("Move"),
+          ui.kbd("enter"),
+          ui.text("Open"),
+          ui.kbd("backspace"),
+          ui.text("Up"),
+          ui.kbd("h"),
+          ui.text("Hidden"),
+          ui.kbd("q"),
+          ui.text("Quit"),
+        ]),
+      ]),
+    ]),
+  ]);
+});
+
+app.keys({
+  q: () => app.stop(),
+  "ctrl+c": () => app.stop(),
+  up: () =>
+    app.update((s) => {
+      const entries = listEntries(s);
+      return { ...s, selected: clamp(s.selected - 1, 0, Math.max(0, entries.length - 1)) };
+    }),
+  down: () =>
+    app.update((s) => {
+      const entries = listEntries(s);
+      return { ...s, selected: clamp(s.selected + 1, 0, Math.max(0, entries.length - 1)) };
+    }),
+  k: () =>
+    app.update((s) => {
+      const entries = listEntries(s);
+      return { ...s, selected: clamp(s.selected - 1, 0, Math.max(0, entries.length - 1)) };
+    }),
+  j: () =>
+    app.update((s) => {
+      const entries = listEntries(s);
+      return { ...s, selected: clamp(s.selected + 1, 0, Math.max(0, entries.length - 1)) };
+    }),
+  h: () => app.update((s) => ({ ...s, showHidden: !s.showHidden, selected: 0 })),
+  backspace: () =>
+    app.update((s) => ({
+      ...s,
+      path: parentPath(s.path),
+      selected: 0,
+    })),
+  enter: () =>
+    app.update((s) => {
+      const entries = listEntries(s);
+      const entry = entries[s.selected];
+      if (!entry) return s;
+      if (entry.type === "dir") {
+        return { ...s, path: joinPath(s.path, entry.name), selected: 0 };
+      }
+      return { ...s, opened: joinPath(s.path, entry.name) };
+    }),
+});
+
+await app.start();

package/templates/file-browser/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "types": ["node"],
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true
+  },
+  "include": ["src/**/*.ts"]
+}

package/templates/form-app/README.md

@@ -0,0 +1,18 @@
+# __APP_NAME__
+
+Scaffolded with `npm create rezi` using the **__TEMPLATE_LABEL__** template.
+
+## Quickstart
+
+```bash
+npm install
+npm start
+```
+
+## Keybindings
+
+- `tab`: Move focus between fields
+- `ctrl+s`: Save
+- `ctrl+r`: Reset form
+- `ctrl+up` / `ctrl+down`: Switch section
+- `q`: Quit

package/templates/form-app/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "__PACKAGE_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "tsx src/main.ts",
+    "dev": "tsx watch src/main.ts",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@rezi-ui/core": "^0.1.0-alpha.0",
+    "@rezi-ui/node": "^0.1.0-alpha.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.1",
+    "tsx": "^4.20.0",
+    "typescript": "^5.6.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}