@pablozaiden/terminatui 0.2.0 → 0.3.0-beta-1

package/src/tui/semantic/MenuItem.tsx

@@ -0,0 +1,7 @@
+import type { MenuItemProps } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function MenuItem(props: MenuItemProps) {
+    const renderer = useRenderer();
+    return renderer.components.MenuItem(props);
+}

package/src/tui/semantic/Overlay.tsx

@@ -0,0 +1,7 @@
+import type { OverlayProps } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function Overlay(props: OverlayProps) {
+    const renderer = useRenderer();
+    return renderer.components.Overlay(props);
+}

package/src/tui/semantic/Panel.tsx

@@ -0,0 +1,7 @@
+import type { PanelProps } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function Panel(props: PanelProps) {
+    const renderer = useRenderer();
+    return renderer.components.Panel(props);
+}

package/src/tui/semantic/ScrollView.tsx

@@ -0,0 +1,9 @@
+import type { ScrollViewProps, ScrollViewRef } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function ScrollView(props: ScrollViewProps) {
+    const renderer = useRenderer();
+    return renderer.components.ScrollView(props);
+}
+
+export type { ScrollViewRef };

package/src/tui/semantic/Select.tsx

@@ -0,0 +1,7 @@
+import type { SelectProps } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function Select(props: SelectProps) {
+    const renderer = useRenderer();
+    return renderer.components.Select(props);
+}

package/src/tui/semantic/Spacer.tsx

@@ -0,0 +1,7 @@
+import type { SpacerProps } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function Spacer(props: SpacerProps) {
+    const renderer = useRenderer();
+    return renderer.components.Spacer(props);
+}

package/src/tui/semantic/Spinner.tsx

@@ -0,0 +1,7 @@
+import type { SpinnerProps } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function Spinner(props: SpinnerProps) {
+    const renderer = useRenderer();
+    return renderer.components.Spinner(props);
+}

package/src/tui/semantic/TextInput.tsx

@@ -0,0 +1,7 @@
+import type { TextInputProps } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function TextInput(props: TextInputProps) {
+    const renderer = useRenderer();
+    return renderer.components.TextInput(props);
+}

package/src/tui/semantic/Value.tsx

@@ -0,0 +1,7 @@
+import type { ValueProps } from "./types.ts";
+import { useRenderer } from "../context/RendererContext.tsx";
+
+export function Value(props: ValueProps) {
+    const renderer = useRenderer();
+    return renderer.components.Value(props);
+}

package/src/tui/semantic/types.ts

@@ -0,0 +1,195 @@
+import type { ReactNode } from "react";
+
+export type Align = "flex-start" | "center" | "flex-end" | "stretch";
+export type Justify = "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+export type FlexDirection = "row" | "column";
+
+export interface Spacing {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
+
+export interface ThemeConfig {
+    colors: {
+        background: string;
+        panelBackground: string;
+        overlay: string;
+
+        text: string;
+        mutedText: string;
+        inverseText: string;
+
+        border: string;
+        focusBorder: string;
+
+        primary: string;
+        primaryText: string;
+
+        success: string;
+        warning: string;
+        error: string;
+
+        value: string;
+        code: string;
+
+        selectionBackground: string;
+        selectionText: string;
+    };
+}
+
+export type SemanticColor = keyof ThemeConfig["colors"];
+
+export interface LayoutProps {
+    flex?: number;
+    width?: number | string;
+    height?: number | string;
+
+    flexDirection?: FlexDirection;
+    alignItems?: Align;
+    justifyContent?: Justify;
+
+    gap?: number;
+    padding?: number | Spacing;
+
+    /** When set, should prevent the node from shrinking in flex layouts. */
+    noShrink?: boolean;
+}
+
+export type PanelSurface = "panel" | "overlay";
+
+export interface PanelProps extends LayoutProps {
+    title?: string;
+    focused?: boolean;
+    border?: boolean;
+    surface?: PanelSurface;
+
+    /** Renderer-level compact styling (e.g. no default padding). */
+    dense?: boolean;
+
+    children?: ReactNode;
+}
+
+export interface ContainerProps extends LayoutProps {
+    children?: ReactNode;
+}
+
+export interface ScrollViewRef {
+    scrollToTop: () => void;
+    scrollToBottom: () => void;
+    scrollToIndex: (index: number) => void;
+}
+
+export interface ScrollViewProps extends LayoutProps {
+    axis?: "vertical" | "horizontal" | "both";
+    stickyToEnd?: boolean;
+    focused?: boolean;
+    scrollRef?: (ref: ScrollViewRef | null) => void;
+    children?: ReactNode;
+}
+
+export interface OverlayProps {
+    zIndex?: number;
+    top?: number | string;
+    left?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+    width?: number | string;
+    height?: number | string;
+    children?: ReactNode;
+}
+
+export interface SpacerProps {
+    size: number;
+    axis?: "horizontal" | "vertical";
+}
+
+export interface SpinnerProps {
+    active: boolean;
+}
+
+export interface LabelProps {
+    color?: SemanticColor;
+    bold?: boolean;
+    italic?: boolean;
+    wrap?: boolean;
+    children: ReactNode;
+}
+
+export interface ValueProps {
+    color?: SemanticColor;
+    truncate?: boolean;
+    children: ReactNode;
+}
+
+export interface CodeProps {
+    color?: SemanticColor;
+    children: string;
+}
+
+export type CodeTokenType =
+    | "punctuation"
+    | "string"
+    | "number"
+    | "boolean"
+    | "null"
+    | "key"
+    | "unknown";
+
+export interface CodeToken {
+    type: CodeTokenType;
+    value: string;
+}
+
+export interface CodeHighlightProps {
+    tokens: CodeToken[];
+}
+
+export interface FieldProps {
+    label: string;
+    value: ReactNode;
+    selected?: boolean;
+    onActivate?: () => void;
+}
+
+export interface TextInputProps {
+    value: string;
+    placeholder?: string;
+    focused?: boolean;
+    onChange: (value: string) => void;
+    onSubmit?: () => void;
+}
+
+export interface SelectOption {
+    label: string;
+    value: string;
+}
+
+export interface SelectProps {
+    options: SelectOption[];
+    value: string;
+    focused?: boolean;
+    onChange: (value: string) => void;
+    onSubmit?: () => void;
+}
+
+export interface ButtonProps {
+    label: string;
+    selected?: boolean;
+    onActivate?: () => void;
+}
+
+export interface MenuButtonProps {
+    label: string;
+    selected?: boolean;
+    onActivate?: () => void;
+}
+
+export interface MenuItemProps {
+    label: string;
+    description?: string;
+    suffix?: string;
+    selected?: boolean;
+    onActivate?: () => void;
+}

package/src/tui/theme.ts

@@ -1,21 +1,32 @@
 /**
- * Default TUI theme colors.
+ * Default TUI theme.
+ *
+ * This is intentionally semantic: UI code should reference meanings
+ * (e.g. "error", "mutedText", "selectionBackground") rather than hardcoding colors.
  */
-export const Theme = {
-    background: "#0b0c10",
+export const SemanticColors = {
+    background: "#0f1117",
+    panelBackground: "#0f1117",
+    overlay: "#101218",
+
+    text: "#d6dde6",
+    mutedText: "#666666",
+    inverseText: "#0b0c10",
+    
     border: "#2c2f36",
-    borderFocused: "#5da9e9",
-    borderSelected: "#61afef",
-    label: "#c0cad6",
-    value: "#98c379",
-    actionButton: "#a0e8af",
-    header: "#a8b3c1",
-    statusText: "#d6dde6",
-    overlay: "#0e1117",
-    overlayTitle: "#e5c07b",
-    error: "#f78888",
+    focusBorder: "#5da9e9",
+
+    primary: "#61afef",
+    primaryText: "#0b0c10",
+
     success: "#98c379",
     warning: "#f5c542",
+    error: "#f78888",
+
+    value: "#98c379",
+    code: "#c0cad6",
+
+    selectionBackground: "#61afef",
+    selectionText: "#0b0c10",
 } as const;
 
-export type ThemeColors = typeof Theme;

package/src/tui/utils/buildCliCommand.ts

@@ -79,6 +79,7 @@ export function buildCliCommand<T extends OptionSchema>(
         }
     }
 
+    parts.push("--mode", "cli");
     return parts.join(" ");
 }
 

package/src/tui/utils/getEnumKeys.ts

@@ -0,0 +1,3 @@
+export function getEnumKeys<T extends Record<string, string | number>>(enumObj: T): string[] {
+    return Object.keys(enumObj).filter((key) => Number.isNaN(Number(key)));
+}

package/src/tui/utils/parameterPersistence.ts

@@ -47,6 +47,7 @@ export function loadPersistedParameters(
             return JSON.parse(content) as Record<string, unknown>;
         }
     } catch (error) {
+        
         // Silently ignore errors - just return empty object
         console.error(`Failed to load persisted parameters: ${error}`);
     }

package/src/types/command.ts

@@ -41,63 +41,3 @@ export type OptionValues<T extends OptionSchema> = {
   : unknown;
 };
 
-/**
- * Context passed to command executors
- */
-export interface CommandContext<T extends OptionSchema = OptionSchema> {
-  options: OptionValues<T>;
-  args: string[];
-  commandPath: string[];
-}
-
-/**
- * Command executor function
- */
-export type CommandExecutor<T extends OptionSchema = OptionSchema> = (
-  ctx: CommandContext<T>
-) => void | Promise<void>;
-
-/**
- * Command definition
- */
-export interface Command<
-  T extends OptionSchema = OptionSchema,
-  R = void,
-> {
-  name: string;
-  description: string;
-  aliases?: string[];
-  hidden?: boolean;
-  options?: T;
-  subcommands?: Record<string, Command>;
-  examples?: Array<{ command: string; description: string }>;
-  execute: (ctx: CommandContext<T>) => R | Promise<R>;
-  beforeExecute?: (ctx: CommandContext<T>) => void | Promise<void>;
-  afterExecute?: (ctx: CommandContext<T>) => void | Promise<void>;
-}
-
-/**
- * TUI command with a render function
- */
-export interface TuiCommand<T extends OptionSchema = OptionSchema>
-  extends Omit<Command<T>, "execute"> {
-  render: (ctx: CommandContext<T>) => React.ReactNode;
-}
-
-/**
- * Define a CLI command
- */
-export function defineCommand<T extends OptionSchema = OptionSchema>(
-  config: Command<T>
-): Command<T> {
-  return config;
-}
-
-/**
- * Define a TUI command
- */
-export function defineTuiCommand<T extends OptionSchema = OptionSchema>(
-  config: TuiCommand<T>
-): TuiCommand<T> {
-  return config;
-}

package/examples/tui-app/commands/index.ts

@@ -1,4 +0,0 @@
-export { GreetCommand } from "./greet.ts";
-export { MathCommand } from "./math.ts";
-export { StatusCommand } from "./status.ts";
-export { ConfigCommand } from "./config/index.ts";

package/src/__tests__/colors.test.ts

@@ -1,127 +0,0 @@
-import { test, expect, describe } from "bun:test";
-import { colors, supportsColors } from "../cli/output/colors.ts";
-
-describe("colors", () => {
-  describe("basic colors", () => {
-    test("red wraps text", () => {
-      const result = colors.red("test");
-      expect(result).toContain("test");
-    });
-
-    test("green wraps text", () => {
-      const result = colors.green("test");
-      expect(result).toContain("test");
-    });
-
-    test("blue wraps text", () => {
-      const result = colors.blue("test");
-      expect(result).toContain("test");
-    });
-
-    test("yellow wraps text", () => {
-      const result = colors.yellow("test");
-      expect(result).toContain("test");
-    });
-
-    test("cyan wraps text", () => {
-      const result = colors.cyan("test");
-      expect(result).toContain("test");
-    });
-
-    test("gray wraps text", () => {
-      const result = colors.gray("test");
-      expect(result).toContain("test");
-    });
-  });
-
-  describe("styles", () => {
-    test("bold wraps text", () => {
-      const result = colors.bold("test");
-      expect(result).toContain("test");
-    });
-
-    test("dim wraps text", () => {
-      const result = colors.dim("test");
-      expect(result).toContain("test");
-    });
-
-    test("italic wraps text", () => {
-      const result = colors.italic("test");
-      expect(result).toContain("test");
-    });
-
-    test("underline wraps text", () => {
-      const result = colors.underline("test");
-      expect(result).toContain("test");
-    });
-
-    test("strikethrough wraps text", () => {
-      const result = colors.strikethrough("test");
-      expect(result).toContain("test");
-    });
-  });
-
-  describe("semantic colors", () => {
-    test("success includes checkmark and message", () => {
-      const result = colors.success("done");
-      expect(result).toContain("done");
-      expect(result).toContain("✓");
-    });
-
-    test("error includes message", () => {
-      const result = colors.error("failed");
-      expect(result).toContain("failed");
-    });
-
-    test("warning includes message", () => {
-      const result = colors.warning("caution");
-      expect(result).toContain("caution");
-    });
-
-    test("info includes message", () => {
-      const result = colors.info("note");
-      expect(result).toContain("note");
-    });
-  });
-
-  describe("chaining", () => {
-    test("can combine bold and red", () => {
-      const result = colors.bold(colors.red("test"));
-      expect(result).toContain("test");
-    });
-
-    test("can combine dim and italic", () => {
-      const result = colors.dim(colors.italic("test"));
-      expect(result).toContain("test");
-    });
-  });
-
-  describe("edge cases", () => {
-    test("handles empty string", () => {
-      const result = colors.red("");
-      expect(typeof result).toBe("string");
-    });
-
-    test("handles string with newlines", () => {
-      const result = colors.blue("line1\nline2");
-      expect(result).toContain("line1");
-      expect(result).toContain("line2");
-    });
-
-    test("handles string with special characters", () => {
-      const result = colors.green("test © ® ™");
-      expect(result).toContain("©");
-    });
-  });
-});
-
-describe("supportsColors", () => {
-  test("is a function", () => {
-    expect(typeof supportsColors).toBe("function");
-  });
-
-  test("returns a boolean", () => {
-    const result = supportsColors();
-    expect(typeof result).toBe("boolean");
-  });
-});

package/src/__tests__/commandClass.test.ts

@@ -1,130 +0,0 @@
-import { describe, test, expect } from "bun:test";
-import { Command, type CommandResult } from "../core/command.ts";
-import type { AppContext } from "../core/context.ts";
-import type { OptionSchema, OptionValues } from "../types/command.ts";
-
-// Test command with options
-class TestCommand extends Command<{ name: { type: "string"; description: string } }> {
-  readonly name = "test";
-  readonly description = "A test command";
-  readonly options = {
-    name: { type: "string" as const, description: "Name option" },
-  };
-
-  executedWith: OptionValues<typeof this.options> | null = null;
-
-  override async execute(
-    _ctx: AppContext,
-    opts: OptionValues<typeof this.options>
-  ): Promise<CommandResult> {
-    this.executedWith = opts;
-    return { success: true, message: "Executed" };
-  }
-}
-
-// Simple command without options
-class SimpleCommand extends Command<OptionSchema> {
-  readonly name = "simple";
-  readonly description = "A simple command";
-  readonly options = {};
-
-  executed = false;
-
-  override async execute(_ctx: AppContext): Promise<CommandResult> {
-    this.executed = true;
-    return { success: true, message: "Done" };
-  }
-}
-
-describe("Command", () => {
-  describe("core properties", () => {
-    test("has name", () => {
-      const cmd = new TestCommand();
-      expect(cmd.name).toBe("test");
-    });
-
-    test("has description", () => {
-      const cmd = new TestCommand();
-      expect(cmd.description).toBe("A test command");
-    });
-
-    test("has options", () => {
-      const cmd = new TestCommand();
-      expect(cmd.options).toEqual({
-        name: { type: "string", description: "Name option" },
-      });
-    });
-  });
-
-  describe("optional metadata", () => {
-    test("subCommands defaults to undefined", () => {
-      const cmd = new TestCommand();
-      expect(cmd.subCommands).toBeUndefined();
-    });
-
-    test("examples defaults to undefined", () => {
-      const cmd = new TestCommand();
-      expect(cmd.examples).toBeUndefined();
-    });
-
-    test("longDescription defaults to undefined", () => {
-      const cmd = new TestCommand();
-      expect(cmd.longDescription).toBeUndefined();
-    });
-  });
-
-  describe("supportsCli", () => {
-    test("returns true for command with execute", () => {
-      const cmd = new TestCommand();
-      expect(cmd.supportsCli()).toBe(true);
-    });
-  });
-
-  describe("supportsTui", () => {
-    test("returns true for command with execute", () => {
-      const cmd = new TestCommand();
-      expect(cmd.supportsTui()).toBe(true);
-    });
-  });
-
-  describe("both modes", () => {
-    test("command supports both CLI and TUI", () => {
-      const cmd = new TestCommand();
-      expect(cmd.supportsCli()).toBe(true);
-      expect(cmd.supportsTui()).toBe(true);
-    });
-  });
-
-  describe("validate", () => {
-    test("passes for command with execute", () => {
-      const cmd = new TestCommand();
-      expect(() => cmd.validate()).not.toThrow();
-    });
-  });
-
-  describe("subcommands", () => {
-    test("hasSubCommands returns false when no subcommands", () => {
-      const cmd = new TestCommand();
-      expect(cmd.hasSubCommands()).toBe(false);
-    });
-
-    test("hasSubCommands returns true when subcommands exist", () => {
-      const cmd = new TestCommand();
-      cmd.subCommands = [new SimpleCommand()];
-      expect(cmd.hasSubCommands()).toBe(true);
-    });
-
-    test("getSubCommand finds subcommand by name", () => {
-      const cmd = new TestCommand();
-      const subCmd = new SimpleCommand();
-      cmd.subCommands = [subCmd];
-      expect(cmd.getSubCommand("simple")).toBe(subCmd);
-    });
-
-    test("getSubCommand returns undefined for unknown name", () => {
-      const cmd = new TestCommand();
-      cmd.subCommands = [new SimpleCommand()];
-      expect(cmd.getSubCommand("unknown")).toBeUndefined();
-    });
-  });
-});