@valyrianjs/terminal 0.2.1 → 0.2.2

package/examples/docs/responsive-split.tsx

@@ -0,0 +1,186 @@
+import {
+  Fixed,
+  Pane,
+  Screen,
+  Split,
+  Text,
+  mountTerminal
+} from "@valyrianjs/terminal";
+import type {
+  TerminalMountOptions,
+  TerminalSession
+} from "@valyrianjs/terminal";
+
+interface ResponsiveSplitState {
+  running: boolean;
+}
+
+export interface ResponsiveSplitDemo {
+  session: TerminalSession;
+  dispatchKey(key: string): string;
+  output(): string;
+  ansiOutput(): string;
+  isRunning(): boolean;
+  destroy(): void;
+}
+
+function shouldRunSnapshot() {
+  return (
+    process.argv.includes("--snapshot") ||
+    process.env.VALYRIAN_TERMINAL_EXAMPLE_SNAPSHOT === "1" ||
+    !process.stdin.isTTY
+  );
+}
+
+export function App({
+  getSize
+}: {
+  getSize?: () => { cols: number; rows: number } | undefined;
+}) {
+  const terminalWidth = getSize?.()?.cols;
+  const layout = "3 columns";
+  const sizes = "25% / 1fr / 2fr";
+  const widthLabel = terminalWidth ? String(terminalWidth) : "auto";
+
+  return (
+    <Screen title="Workspace">
+      <Fixed position="top" size={3}>
+        <Text>{`Terminal width: ${widthLabel}`}</Text>
+        <Text>{`Layout: ${layout}`}</Text>
+        <Text>{`sizes: ${sizes}`}</Text>
+      </Fixed>
+      <Split
+        gap={1}
+        sizes={["25%", "1fr", "2fr"]}
+        breakpoints={[
+          {
+            maxCols: 72,
+            direction: "column",
+            sizes: ["1fr", "1fr", "1fr"],
+            gap: 0
+          }
+        ]}
+      >
+        <Pane
+          style={{
+            background: "#111827",
+            border: {
+              top: true,
+              right: true,
+              bottom: true,
+              left: true,
+              style: "solid",
+              color: "#2563eb"
+            }
+          }}
+        >
+          <Text>Inbox</Text>
+          <Text>3 unread</Text>
+        </Pane>
+        <Pane
+          style={{
+            background: "#172554",
+            border: {
+              top: true,
+              right: true,
+              bottom: true,
+              left: true,
+              style: "solid",
+              color: "#60a5fa"
+            }
+          }}
+        >
+          <Text>Preview</Text>
+          <Text>Welcome thread</Text>
+        </Pane>
+        <Pane
+          style={{
+            background: "#1f2937",
+            border: {
+              top: true,
+              right: true,
+              bottom: true,
+              left: true,
+              style: "solid",
+              color: "#a78bfa"
+            }
+          }}
+        >
+          <Text>Details</Text>
+          <Text>Owner: team</Text>
+        </Pane>
+      </Split>
+      <Fixed position="bottom" size={1}>
+        <Text>Resize the terminal to change layout | Ctrl+C: quit</Text>
+      </Fixed>
+    </Screen>
+  );
+}
+
+export function createResponsiveSplitDemo(
+  options: TerminalMountOptions = {}
+): ResponsiveSplitDemo {
+  let session: TerminalSession;
+  const state = {
+    running: true
+  };
+
+  function quit() {
+    state.running = false;
+    session.destroy();
+  }
+
+  session = mountTerminal(<App getSize={() => session?.size()} />, {
+    ...options,
+    keymap: {
+      ...options.keymap,
+      bindings: [
+        ...(options.keymap?.bindings || []),
+        { key: "CTRL_C", command: { id: "quit" }, scope: "global" }
+      ],
+      onCommand(command, context) {
+        if (command.id === "quit") {
+          quit();
+          return true;
+        }
+        return options.keymap?.onCommand?.(command, context);
+      }
+    }
+  });
+  session.update();
+
+  return {
+    session,
+    dispatchKey(key: string) {
+      return session.dispatchKey(key);
+    },
+    output() {
+      return session.output();
+    },
+    ansiOutput() {
+      return session.ansiOutput();
+    },
+    isRunning() {
+      return state.running;
+    },
+    destroy() {
+      state.running = false;
+      session.destroy();
+    }
+  };
+}
+
+if (import.meta.main) {
+  if (shouldRunSnapshot()) {
+    const demo = createResponsiveSplitDemo({
+      runtime: "headless",
+      cols: 40,
+      rows: 16
+    });
+    process.stdout.write(demo.output());
+    process.stdout.write("\n");
+    demo.destroy();
+  } else {
+    createResponsiveSplitDemo();
+  }
+}

package/examples/docs/style-system.tsx

@@ -0,0 +1,209 @@
+import { Button, Input, Pane, Screen, Text, mountTerminal } from "@valyrianjs/terminal";
+import type { TerminalMountOptions, TerminalSession, TerminalVisualState } from "@valyrianjs/terminal";
+
+type BuildStatus = "Ready" | "Building" | "Built";
+
+interface StyleSystemDemoState {
+  status: BuildStatus;
+  warnings: boolean;
+  note: string;
+  running: boolean;
+}
+
+export interface StyleSystemDemo {
+  session: TerminalSession;
+  dispatchKey(key: string): string;
+  output(): string;
+  ansiOutput(): string;
+  isRunning(): boolean;
+  destroy(): void;
+}
+
+const theme = {
+  styles: {
+    title: {
+      app: { color: "#88c0d0" }
+    },
+    button: {
+      primary: {
+        color: "#ffffff",
+        background: "#5e81ac",
+        padding: { left: 1, right: 1 },
+        focus: { color: "#eceff4", background: "#81a1c1" }
+      },
+      loading: { color: "#88c0d0" },
+      success: { color: "#a3be8c" }
+    },
+    panel: {
+      queue: {
+        border: { top: true, right: true, bottom: true, left: true, style: "solid", color: "#4b5563" },
+        padding: { left: 1, right: 1 },
+        dropTarget: { border: { top: true, right: true, bottom: true, left: true, style: "solid", color: "#8fbcbb" } }
+      },
+      cta: {
+        color: "#eceff4",
+        background: "#1f2328",
+        padding: { left: 2, right: 2 }
+      }
+    },
+    input: {
+      readonly: { color: "#777777" },
+      placeholder: { color: "#777777" }
+    },
+    state: {
+      success: { color: "#a3be8c" },
+      warning: { color: "#ebcb8b" },
+      loading: { color: "#88c0d0" },
+      readonly: { color: "#777777" },
+      expanded: { color: "#b48ead" },
+      dropTarget: { color: "#8fbcbb" },
+      muted: { color: "#6b7280" }
+    }
+  }
+};
+
+function createInitialState(): StyleSystemDemoState {
+  return {
+    status: "Ready",
+    warnings: true,
+    note: "local-preview-2026-05-29",
+    running: true
+  };
+}
+
+function nextBuildStatus(status: BuildStatus): BuildStatus {
+  if (status === "Ready") {
+    return "Building";
+  }
+  if (status === "Building") {
+    return "Built";
+  }
+  return "Building";
+}
+
+export function App({ state }: { state: StyleSystemDemoState }) {
+  const warningText = state.warnings ? "2 warnings" : "No warnings";
+  const statusState: TerminalVisualState = state.status === "Built"
+    ? "success"
+    : state.status === "Building"
+      ? "loading"
+      : state.warnings
+        ? "warning"
+        : "success";
+  const buildButtonState: TerminalVisualState | undefined = state.status === "Built" ? "success" : state.status === "Building" ? "loading" : undefined;
+
+  return (
+    <Screen title="Valyrian Preview Console">
+      <Text style="title.app">Valyrian Preview Console</Text>
+      <Text>Project   valyrianjs-terminal</Text>
+      <Text>Target    local preview</Text>
+      <Text state={statusState} styles={{ warning: "state.warning", success: "state.success", loading: "state.loading" }}>
+        {`Status    ${state.status}  ·  ${warningText}`}
+      </Text>
+
+      <Pane style="panel.queue" state="dropTarget" styles={{ dropTarget: "panel.queue.dropTarget" }}>
+        <Text>Build queue</Text>
+        <Text state="loading" styles={{ loading: "state.loading" }}>&gt; bundle-assets       loading</Text>
+        <Text state="readonly" styles={{ readonly: "state.readonly" }}>  config-check        readonly</Text>
+        <Text state="expanded" styles={{ expanded: "state.expanded" }}>  preview-server      expanded</Text>
+        <Text state="dropTarget" styles={{ dropTarget: "state.dropTarget" }}>  cache-warmup        drop target</Text>
+      </Pane>
+
+      <Text>Preview note</Text>
+      <Input
+        id="note"
+        value={state.note}
+        state="readonly"
+        styles={{ readonly: "input.readonly", placeholder: "input.placeholder" }}
+      />
+
+      <Pane width={24} style="panel.cta">
+        <Button
+          id="build"
+          style="button.primary"
+          state={buildButtonState}
+          styles={{ focus: "button.primary.focus", loading: "button.loading", success: "button.success" }}
+          onpress={() => {
+            state.status = nextBuildStatus(state.status);
+          }}
+        >
+          BUILD PREVIEW
+        </Button>
+      </Pane>
+
+      <Text state="muted" styles={{ muted: "state.muted" }}>Tab: focus   Enter: build   W: warnings   Ctrl+C: quit</Text>
+    </Screen>
+  );
+}
+
+export function createStyleSystemDemo(options: TerminalMountOptions = {}): StyleSystemDemo {
+  const state = createInitialState();
+  let session: TerminalSession;
+
+  function quit() {
+    state.running = false;
+    session.destroy();
+  }
+
+  session = mountTerminal(<App state={state} />, {
+    theme,
+    ...options,
+    keymap: {
+      ...options.keymap,
+      bindings: [
+        ...(options.keymap?.bindings || []),
+        { key: "w", command: { id: "warnings.toggle" }, scope: "global" },
+        { key: "W", command: { id: "warnings.toggle" }, scope: "global" },
+        { key: "CTRL_C", command: { id: "quit" }, scope: "global" }
+      ],
+      onCommand(command, context) {
+        if (command.id === "warnings.toggle") {
+          state.warnings = !state.warnings;
+          return true;
+        }
+        if (command.id === "quit") {
+          quit();
+          return true;
+        }
+        return options.keymap?.onCommand?.(command, context);
+      }
+    }
+  });
+
+  session.focus("build");
+
+  return {
+    session,
+    dispatchKey(key: string) {
+      return session.dispatchKey(key);
+    },
+    output() {
+      return session.output();
+    },
+    ansiOutput() {
+      return session.ansiOutput();
+    },
+    isRunning() {
+      return state.running;
+    },
+    destroy() {
+      state.running = false;
+      session.destroy();
+    }
+  };
+}
+
+function shouldRunSnapshot() {
+  return process.argv.includes("--snapshot") || process.env.VALYRIAN_TERMINAL_EXAMPLE_SNAPSHOT === "1" || !process.stdin.isTTY;
+}
+
+if (import.meta.main) {
+  if (shouldRunSnapshot()) {
+    const demo = createStyleSystemDemo({ runtime: "headless", cols: 56, rows: 18 });
+    process.stdout.write(demo.output());
+    process.stdout.write("\n");
+    demo.destroy();
+  } else {
+    createStyleSystemDemo();
+  }
+}

package/examples/docs/theme-colors.tsx

@@ -0,0 +1,225 @@
+import { Screen, Text, mountTerminal } from "@valyrianjs/terminal";
+import type {
+  TerminalMountOptions,
+  TerminalSession
+} from "@valyrianjs/terminal";
+
+interface ThemeColorsState {
+  palette: "day" | "night";
+  changedTo: "day" | "night" | "";
+  running: boolean;
+}
+
+export interface ThemeColorsDemo {
+  session: TerminalSession;
+  dispatchKey(key: string): string;
+  output(): string;
+  ansiOutput(): string;
+  isRunning(): boolean;
+  destroy(): void;
+}
+
+const paletteNames = {
+  day: "Day",
+  night: "Night"
+} as const;
+
+const swatchStyles = {
+  day: {
+    primary: "swatch.day.primary",
+    success: "swatch.day.success",
+    warning: "swatch.day.warning",
+    danger: "swatch.day.danger",
+    muted: "swatch.day.muted"
+  },
+  night: {
+    primary: "swatch.night.primary",
+    success: "swatch.night.success",
+    warning: "swatch.night.warning",
+    danger: "swatch.night.danger",
+    muted: "swatch.night.muted"
+  }
+} as const;
+
+const theme = {
+  styles: {
+    swatch: {
+      day: {
+        primary: {
+          color: "#ffffff",
+          background: "#2563eb",
+          padding: { left: 1, right: 1 }
+        },
+        success: {
+          color: "#052e16",
+          background: "#86efac",
+          padding: { left: 1, right: 1 }
+        },
+        warning: {
+          color: "#451a03",
+          background: "#fbbf24",
+          padding: { left: 1, right: 1 }
+        },
+        danger: {
+          color: "#ffffff",
+          background: "#dc2626",
+          padding: { left: 1, right: 1 }
+        },
+        muted: {
+          color: "#111827",
+          background: "#d1d5db",
+          padding: { left: 1, right: 1 }
+        }
+      },
+      night: {
+        primary: {
+          color: "#dbeafe",
+          background: "#1d4ed8",
+          padding: { left: 1, right: 1 }
+        },
+        success: {
+          color: "#dcfce7",
+          background: "#15803d",
+          padding: { left: 1, right: 1 }
+        },
+        warning: {
+          color: "#fef3c7",
+          background: "#b45309",
+          padding: { left: 1, right: 1 }
+        },
+        danger: {
+          color: "#fee2e2",
+          background: "#b91c1c",
+          padding: { left: 1, right: 1 }
+        },
+        muted: {
+          color: "#e5e7eb",
+          background: "#374151",
+          padding: { left: 1, right: 1 }
+        }
+      }
+    }
+  }
+};
+
+function createInitialState(): ThemeColorsState {
+  return { palette: "day", changedTo: "", running: true };
+}
+
+function shouldRunSnapshot() {
+  return (
+    process.argv.includes("--snapshot") ||
+    process.env.VALYRIAN_TERMINAL_EXAMPLE_SNAPSHOT === "1" ||
+    !process.stdin.isTTY
+  );
+}
+
+export function App({ state }: { state: ThemeColorsState }) {
+  const paletteLabel = paletteNames[state.palette];
+  const swatches = swatchStyles[state.palette];
+  const feedback = state.changedTo
+    ? `Changed to ${paletteNames[state.changedTo]} palette`
+    : "Tab/1/2 changes the palette";
+
+  return (
+    <Screen title="Theme tokens">
+      <Text>{`Palette: ${paletteLabel}`}</Text>
+      <Text>{feedback}</Text>
+      <Text style={swatches.primary}>Primary App action</Text>
+      <Text style={swatches.success}>Success Completed</Text>
+      <Text style={swatches.warning}>Warning Needs review</Text>
+      <Text style={swatches.danger}>Danger Destructive</Text>
+      <Text style={swatches.muted}>Muted Secondary text</Text>
+      <Text styles={{ muted: swatches.muted }} state="muted">
+        Tab/1/2 palette | Ctrl+C: quit
+      </Text>
+    </Screen>
+  );
+}
+
+export function createThemeColorsDemo(
+  options: TerminalMountOptions = {}
+): ThemeColorsDemo {
+  const state = createInitialState();
+  let session: TerminalSession;
+
+  function quit() {
+    state.running = false;
+    session.destroy();
+  }
+
+  function setPalette(palette: ThemeColorsState["palette"]) {
+    state.palette = palette;
+    state.changedTo = palette;
+  }
+
+  function switchPalette() {
+    setPalette(state.palette === "day" ? "night" : "day");
+  }
+
+  session = mountTerminal(<App state={state} />, {
+    theme,
+    ...options,
+    keymap: {
+      ...options.keymap,
+      bindings: [
+        ...(options.keymap?.bindings || []),
+        { key: "Tab", command: { id: "palette.switch" }, scope: "global" },
+        { key: "TAB", command: { id: "palette.switch" }, scope: "global" },
+        { key: "1", command: { id: "palette.day" }, scope: "global" },
+        { key: "2", command: { id: "palette.night" }, scope: "global" },
+        { key: "CTRL_C", command: { id: "quit" }, scope: "global" }
+      ],
+      onCommand(command, context) {
+        if (command.id === "palette.switch") {
+          switchPalette();
+          return true;
+        }
+        if (command.id === "palette.day") {
+          setPalette("day");
+          return true;
+        }
+        if (command.id === "palette.night") {
+          setPalette("night");
+          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 state.running;
+    },
+    destroy() {
+      state.running = false;
+      session.destroy();
+    }
+  };
+}
+
+if (import.meta.main) {
+  if (shouldRunSnapshot()) {
+    const demo = createThemeColorsDemo({ runtime: "headless", cols: 64, rows: 10 });
+    process.stdout.write(demo.output());
+    process.stdout.write("\n");
+    demo.destroy();
+  } else {
+    createThemeColorsDemo();
+  }
+}