@valyrianjs/terminal 0.2.1 → 0.2.2

package/examples/docs/module-utils.tsx

@@ -0,0 +1,168 @@
+import { get, pick, set } from "valyrian.js/utils";
+import { Pane, Screen, Text, mountTerminal } from "@valyrianjs/terminal";
+import type { TerminalMountOptions, TerminalSession } from "@valyrianjs/terminal";
+
+interface ModuleDemo {
+  session: TerminalSession;
+  dispatchKey(key: string): string;
+  output(): string;
+  ansiOutput(): string;
+  isRunning(): boolean;
+  destroy(): void;
+}
+
+type AccountPayload = {
+  account: { name: string; plan: string; region?: string; owner: { name: string; email: string } };
+  usage: { seats: number; projects: number; lastLogin: string };
+  billing: { status: string; renewal: string };
+};
+type InspectorState = { selected: number; filter: "all" | "account"; record: AccountPayload };
+type FieldRow = { group: string; label: string; value: string };
+type AccountSummaryKey = "name" | "plan" | "region";
+
+const PANEL_STYLE = { color: "#f8fafc", background: "#111827", padding: { left: 1, right: 1 } };
+const FOOTER_STYLE = { color: "#dbeafe", background: "#1e293b" };
+
+function shouldRunSnapshot() {
+  return process.argv.includes("--snapshot") || process.env.VALYRIAN_TERMINAL_EXAMPLE_SNAPSHOT === "1" || !process.stdin.isTTY;
+}
+
+function createRecord(): AccountPayload {
+  const record: AccountPayload = {
+    account: { name: "Northwind", plan: "Team", owner: { name: "Ada Lovelace", email: "ada@example.test" } },
+    usage: { seats: 12, projects: 4, lastLogin: "2026-05-29" },
+    billing: { status: "current", renewal: "2026-06-15" }
+  };
+  set(record, "account.region", "MX");
+  return record;
+}
+
+function buildRows(record: AccountPayload, filter: InspectorState["filter"]): FieldRow[] {
+  const safeAccount = pick<AccountPayload["account"], AccountSummaryKey>(record.account, ["name", "plan", "region"]);
+  const rows = [
+    { group: "account", label: "Account", value: String(get(safeAccount, "name", "unknown")) },
+    { group: "account", label: "Plan", value: String(get(safeAccount, "plan", "none")) },
+    { group: "account", label: "Region", value: String(get(safeAccount, "region", "unknown")) },
+    { group: "owner", label: "Owner", value: String(get(record, "account.owner.name", "unknown")) },
+    { group: "usage", label: "Seats", value: String(get(record, "usage.seats", 0)) },
+    { group: "usage", label: "Projects", value: String(get(record, "usage.projects", 0)) },
+    { group: "billing", label: "Billing", value: String(get(record, "billing.status", "unknown")) }
+  ];
+  return filter === "account" ? rows.filter((row) => row.group === "account") : rows;
+}
+
+export function App({ state }: { state: InspectorState }) {
+  const rows = buildRows(state.record, state.filter);
+  const selected = rows[state.selected] || rows[0];
+
+  return (
+    <Screen title="Account Data Inspector">
+      <Text style={{ color: "#ffffff", background: "#020617" }}>Account Data Inspector</Text>
+      <Pane style={PANEL_STYLE}>
+        <Text>Account Data Inspector</Text>
+        <Text>{`Filter: ${state.filter === "account" ? "account fields" : "all groups"}`}</Text>
+        {rows.map((row, index) => (
+          <Text>{`${index === state.selected ? ">" : " "} [${row.group}] ${row.label}: ${row.value}`}</Text>
+        ))}
+        <Text>{`Selected field: ${selected.label}`}</Text>
+      </Pane>
+      <Text style={FOOTER_STYLE}>J/K select field   F filter group   R reset   Ctrl+C: quit</Text>
+    </Screen>
+  );
+}
+
+export function createModuleUtilsDemo(options: TerminalMountOptions = {}): ModuleDemo {
+  const state: InspectorState = { selected: 0, filter: "all", record: createRecord() };
+  let running = true;
+  let session: TerminalSession;
+
+  function quit() {
+    running = false;
+    session.destroy();
+  }
+
+  function clampSelection() {
+    const count = buildRows(state.record, state.filter).length;
+    state.selected = Math.min(state.selected, Math.max(0, count - 1));
+  }
+
+  session = mountTerminal(<App state={state} />, {
+    ...options,
+    cols: options.cols ?? 92,
+    rows: options.rows ?? 20,
+    keymap: {
+      ...options.keymap,
+      bindings: [
+        ...(options.keymap?.bindings || []),
+        { key: "j", command: { id: "inspector.next" }, scope: "global" },
+        { key: "J", command: { id: "inspector.next" }, scope: "global" },
+        { key: "k", command: { id: "inspector.previous" }, scope: "global" },
+        { key: "K", command: { id: "inspector.previous" }, scope: "global" },
+        { key: "f", command: { id: "inspector.filter" }, scope: "global" },
+        { key: "F", command: { id: "inspector.filter" }, scope: "global" },
+        { key: "r", command: { id: "inspector.reset" }, scope: "global" },
+        { key: "R", command: { id: "inspector.reset" }, scope: "global" },
+        { key: "CTRL_C", command: { id: "quit" }, scope: "global" }
+      ],
+      onCommand(command, context) {
+        if (command.id === "inspector.next") {
+          const count = buildRows(state.record, state.filter).length;
+          state.selected = (state.selected + 1) % count;
+          return true;
+        }
+        if (command.id === "inspector.previous") {
+          const count = buildRows(state.record, state.filter).length;
+          state.selected = (state.selected - 1 + count) % count;
+          return true;
+        }
+        if (command.id === "inspector.filter") {
+          state.filter = state.filter === "all" ? "account" : "all";
+          clampSelection();
+          return true;
+        }
+        if (command.id === "inspector.reset") {
+          state.selected = 0;
+          state.filter = "all";
+          state.record = createRecord();
+          return true;
+        }
+        if (command.id === "quit") {
+          quit();
+          return true;
+        }
+        return options.keymap?.onCommand?.(command, context);
+      }
+    }
+  });
+
+  return {
+    session,
+    dispatchKey(key: string) {
+      return session.dispatchKey(key);
+    },
+    output() {
+      return session.output();
+    },
+    ansiOutput() {
+      return session.ansiOutput();
+    },
+    isRunning() {
+      return running;
+    },
+    destroy() {
+      running = false;
+      session.destroy();
+    }
+  };
+}
+
+if (import.meta.main) {
+  if (shouldRunSnapshot()) {
+    const demo = createModuleUtilsDemo({ runtime: "headless", cols: 92, rows: 20 });
+    process.stdout.write(demo.output());
+    process.stdout.write("\n");
+    demo.destroy();
+  } else {
+    createModuleUtilsDemo();
+  }
+}

package/examples/docs/module-valyrian-core.tsx

@@ -0,0 +1,159 @@
+import { v } from "valyrian.js";
+import { Pane, Screen, Text, mountTerminal } from "@valyrianjs/terminal";
+import type { TerminalMountOptions, TerminalSession } from "@valyrianjs/terminal";
+
+interface ModuleDemo {
+  session: TerminalSession;
+  dispatchKey(key: string): string;
+  output(): string;
+  ansiOutput(): string;
+  isRunning(): boolean;
+  destroy(): void;
+}
+
+type Command = {
+  id: string;
+  name: string;
+  result: string;
+};
+
+type CommandPaletteState = {
+  selected: number;
+  result: string;
+  history: string[];
+};
+
+const COMMANDS: Command[] = [
+  { id: "open-incidents", name: "Open incident board", result: "Incident board opened" },
+  { id: "assign-oncall", name: "Assign on-call engineer", result: "On-call engineer assigned" },
+  { id: "publish-summary", name: "Publish shift summary", result: "Shift summary published" }
+];
+
+const INITIAL_RESULT = "Choose a command";
+const PANEL_STYLE = { color: "#f8fafc", background: "#111827", padding: { left: 1, right: 1 } };
+const FOOTER_STYLE = { color: "#dbeafe", background: "#1e293b" };
+
+function shouldRunSnapshot() {
+  return process.argv.includes("--snapshot") || process.env.VALYRIAN_TERMINAL_EXAMPLE_SNAPSHOT === "1" || !process.stdin.isTTY;
+}
+
+function clampSelection(index: number) {
+  return (index + COMMANDS.length) % COMMANDS.length;
+}
+
+const manualNode = v(Text, null, "Manual vnode: quick actions are composed with TSX rows");
+
+export function App({ state }: { state: CommandPaletteState }) {
+  return (
+    <Screen title="Terminal Command Palette">
+      <Text style={{ color: "#ffffff", background: "#020617" }}>Terminal Command Palette</Text>
+      <Pane style={PANEL_STYLE}>
+        <Text>Command Palette</Text>
+        {manualNode}
+        {COMMANDS.map((command, index) => (
+          <Text>{`${index === state.selected ? ">" : " "} ${command.name}`}</Text>
+        ))}
+        <Text>{`Result: ${state.result}`}</Text>
+        <Text>{`History: ${state.history.length ? state.history.join(" -> ") : "none"}`}</Text>
+      </Pane>
+      <Text style={FOOTER_STYLE}>J/K move   Enter run command   R reset   Ctrl+C: quit</Text>
+    </Screen>
+  );
+}
+
+export function createModuleValyrianCoreDemo(options: TerminalMountOptions = {}): ModuleDemo {
+  const state: CommandPaletteState = { selected: 0, result: INITIAL_RESULT, history: [] };
+  let running = true;
+  let session: TerminalSession;
+
+  function quit() {
+    running = false;
+    session.destroy();
+  }
+
+  function runSelectedCommand() {
+    const command = COMMANDS[state.selected];
+    state.result = command.result;
+    state.history = [...state.history.slice(-2), command.name];
+  }
+
+  function reset() {
+    state.selected = 0;
+    state.result = INITIAL_RESULT;
+    state.history = [];
+  }
+
+  session = mountTerminal(<App state={state} />, {
+    ...options,
+    cols: options.cols ?? 92,
+    rows: options.rows ?? 18,
+    keymap: {
+      ...options.keymap,
+      bindings: [
+        ...(options.keymap?.bindings || []),
+        { key: "j", command: { id: "palette.next" }, scope: "global" },
+        { key: "J", command: { id: "palette.next" }, scope: "global" },
+        { key: "k", command: { id: "palette.previous" }, scope: "global" },
+        { key: "K", command: { id: "palette.previous" }, scope: "global" },
+        { key: "ENTER", command: { id: "palette.run" }, scope: "global" },
+        { key: "r", command: { id: "palette.reset" }, scope: "global" },
+        { key: "R", command: { id: "palette.reset" }, scope: "global" },
+        { key: "CTRL_C", command: { id: "quit" }, scope: "global" }
+      ],
+      onCommand(command, context) {
+        if (command.id === "palette.next") {
+          state.selected = clampSelection(state.selected + 1);
+          return true;
+        }
+        if (command.id === "palette.previous") {
+          state.selected = clampSelection(state.selected - 1);
+          return true;
+        }
+        if (command.id === "palette.run") {
+          runSelectedCommand();
+          return true;
+        }
+        if (command.id === "palette.reset") {
+          reset();
+          return true;
+        }
+        if (command.id === "quit") {
+          quit();
+          return true;
+        }
+        return options.keymap?.onCommand?.(command, context);
+      }
+    }
+  });
+
+  return {
+    session,
+    dispatchKey(key: string) {
+      return session.dispatchKey(key);
+    },
+    output() {
+      return session.output();
+    },
+    ansiOutput() {
+      return session.ansiOutput();
+    },
+    isRunning() {
+      return running;
+    },
+    destroy() {
+      running = false;
+      session.destroy();
+    }
+  };
+}
+
+if (import.meta.main) {
+  if (shouldRunSnapshot()) {
+    const demo = createModuleValyrianCoreDemo({ runtime: "headless", cols: 92, rows: 18 });
+    process.stdout.write(demo.output());
+    process.stdout.write("\n");
+    demo.destroy();
+  } else {
+    createModuleValyrianCoreDemo();
+  }
+}