@pablozaiden/terminatui 0.2.0 → 0.3.0

package/src/tui/semantic/Label.tsx

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

package/src/tui/semantic/MenuButton.tsx

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

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/.devcontainer/devcontainer.json

@@ -1,19 +0,0 @@
-{
-	"name": "Ubuntu",
-	"image": "mcr.microsoft.com/devcontainers/base:noble",
-	"features": {
-		"ghcr.io/devcontainers/features/github-cli:1": {},
-		"ghcr.io/devcontainers/features/azure-cli:latest": {},
-		"ghcr.io/devcontainers/features/docker-outside-of-docker": {}
-	},
-	"postCreateCommand": "./.devcontainer/install-prerequisites.sh",
-	"customizations": {
-		"vscode": {
-			"extensions": [
-				"oven.bun-vscode",
-				"ms-azuretools.vscode-docker",
-				"SanjulaGanepola.github-local-actions"
-			]
-		}
-	}
-}

package/.devcontainer/install-prerequisites.sh

@@ -1,49 +0,0 @@
-#!/usr/bin/env bash
-
-set -e
-
-# if bun is not installed, install it
-if ! command -v bun &> /dev/null
-then
-    echo "Bun not found, installing..."
-    
-    curl -fsSL https://bun.com/install | bash
-
-    # manual fix for missing package.json issue
-    if [ ! -f "$HOME/.bun/install/global/package.json" ]; then
-        echo "Creating missing package.json for bun global..."
-        mkdir -p "$HOME/.bun/install/global"
-        echo '{}' > "$HOME/.bun/install/global/package.json"
-    fi
-
-
-    # add bun to PATH
-    export PATH="$HOME/.bun/bin:$PATH"
-fi
-
-# if there is no symlink for node, create it
-if ! command -v node &> /dev/null
-then
-    # discover the bun binary location
-    bunBinary=$(which bun)
-    echo "Bun binary located at: $bunBinary"
-    echo "Creating symlink for node to bun..."
-    mkdir -p $HOME/.local/bin
-    ln -sf "$bunBinary" "$HOME/.local/bin/node"
-fi
-
-export BUN_INSTALL_BIN=$HOME/.bun/bin
-export BUN_INSTALL_GLOBAL_DIR=$HOME/.bun/global
-
-# Ensure dirs exist and are owned by the current user
-mkdir -p "$BUN_INSTALL_BIN" "$BUN_INSTALL_GLOBAL_DIR"
-export PATH="$HOME/.bun/bin:$HOME/.bun/global/bin:${PATH}"
-
-# add the paths to bashrc and zshrc
-echo 'export PATH="$HOME/.bun/bin:$HOME/.bun/global/bin:${PATH}" ' >> $HOME/.bashrc
-echo 'export PATH="$HOME/.bun/bin:$HOME/.bun/global/bin:${PATH}" '>> $HOME/.zshrc
-
-# ensure $HOME/.local/bin is in PATH for current session and future shells
-export PATH="$HOME/.local/bin:$PATH"
-echo 'export PATH="$HOME/.local/bin:$PATH"' >> "$HOME/.bashrc"
-echo 'export PATH="$HOME/.local/bin:$PATH"' >> "$HOME/.zshrc"

package/.github/workflows/copilot-setup-steps.yml

@@ -1,32 +0,0 @@
-name: "Copilot Setup Steps"
-
-on:
-  workflow_dispatch:
-  push:
-    paths:
-      - .github/workflows/copilot-setup-steps.yml
-  pull_request:
-    paths:
-      - .github/workflows/copilot-setup-steps.yml
-
-jobs:
-  # The job MUST be called `copilot-setup-steps` or it will not be picked up by Copilot.
-  copilot-setup-steps:
-    runs-on: ubuntu-latest
-
-    permissions:
-      contents: read
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v6
-
-      - name: Install prerequisites
-        run: |
-          chmod +x ./.devcontainer/install-prerequisites.sh
-          ./.devcontainer/install-prerequisites.sh
-          echo "$HOME/.bun/bin" >> $GITHUB_PATH
-          echo "$HOME/.bun/global/bin" >> $GITHUB_PATH
-
-      - name: Install dependencies
-        run: bun install

package/.github/workflows/pull-request.yml

@@ -1,27 +0,0 @@
-name: Pull Request
-
-on:
-  pull_request:
-    branches: [ "main" ]
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    environment: PR
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v6
-
-      - name: Install prerequisites
-        run: |
-          chmod +x .devcontainer/install-prerequisites.sh
-          ./.devcontainer/install-prerequisites.sh
-          echo "$HOME/.bun/bin" >> $GITHUB_PATH
-          echo "$HOME/.bun/global/bin" >> $GITHUB_PATH
-
-      - name: Install dependencies
-        run: bun install
-
-      - name: Run tests
-        run: bun test

package/.github/workflows/release-npm-package.yml

@@ -1,81 +0,0 @@
-name: Release NPM Package
-
-on:
-  release:
-    types: [published]
-  workflow_dispatch:
-    inputs:
-      tag:
-        description: 'Release tag (e.g., v1.2.3)'
-        required: true
-
-jobs:
-  publish:
-    name: Publish Package
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      id-token: write
-    steps:
-      - name: Determine release tag
-        id: get_tag
-        run: |
-          echo "Event name: ${{ github.event_name }}"
-          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
-            TAG="${{ github.event.inputs.tag }}"
-          else
-            TAG="${{ github.event.release.tag_name }}"
-          fi
-
-          # if the tag is empty, exit with error
-          if [ -z "$TAG" ]; then
-            echo "Error: Tag is empty"
-            exit 1
-          fi
-
-          # Strip 'v' prefix if present
-          VERSION="${TAG#v}"
-
-          echo "Using tag: $TAG"
-          echo "Using version: $VERSION"
-
-          echo "tag=$TAG" >> $GITHUB_OUTPUT
-          echo "version=$VERSION" >> $GITHUB_OUTPUT
-
-      - name: Checkout repository
-        uses: actions/checkout@v6
-        with:
-          ref: ${{ steps.get_tag.outputs.tag }}
-
-      - name: Install bun
-        run: |
-          curl -fsSL https://bun.com/install | bash
-          echo "$HOME/.bun/bin" >> $GITHUB_PATH
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '24'
-          registry-url: 'https://registry.npmjs.org'
-
-      - name: Set package version
-        run: |
-          VERSION="${{ steps.get_tag.outputs.version }}"
-          jq --arg version "$VERSION" '.version = $version' package.json > package.json.tmp && mv package.json.tmp package.json
-
-      - name: Verify package version
-        run: |
-          EXPECTED_VERSION="${{ steps.get_tag.outputs.version }}"
-          ACTUAL_VERSION=$(jq -r '.version' package.json)
-          if [ "$EXPECTED_VERSION" != "$ACTUAL_VERSION" ]; then
-            echo "Error: Version mismatch. Expected $EXPECTED_VERSION, got $ACTUAL_VERSION"
-            exit 1
-          fi
-          echo "Version verified: $ACTUAL_VERSION"
-
-      - name: Install dependencies
-        run: bun install
-      - name: Build package
-        run: bun run build
-
-      - name: Publish Package
-        run: npm publish --no-build

package/AGENTS.md

@@ -1,31 +0,0 @@
-Default to using Bun instead of Node.js.
-
-- Use `bun <file>` instead of `node <file>` or `ts-node <file>`
-- Use `bun test` instead of `jest` or `vitest`
-- Use `bun build <file.html|file.ts|file.css>` instead of `webpack` or `esbuild`
-- Use `bun install` instead of `npm install` or `yarn install` or `pnpm install`
-- Use `bun run <script>` instead of `npm run <script>` or `yarn run <script>` or `pnpm run <script>`
-- Use `bunx <package> <command>` instead of `npx <package> <command>`
-- Bun automatically loads .env, so don't use dotenv.
-
-## APIs
-
-- Prefer `Bun.file` over `node:fs`'s readFile/writeFile
-- Bun.$`ls` instead of execa.
-
-## Testing
-
-Always run `bun run build` before running tests, to make sure there are no build errors.
-Use `bun run test` to run all the tests.
-
-Always run `bun run test` when you think you are done making changes.
-
-```ts#index.test.ts
-import { test, expect } from "bun:test";
-
-test("hello world", () => {
-  expect(1).toBe(1);
-});
-```
-
-For more information, read the Bun API docs in `node_modules/bun-types/docs/**.mdx`.