@sigx/runtime-terminal 0.1.0

package/README.md

@@ -0,0 +1,40 @@
+# @sigx/runtime-terminal
+
+Terminal UI components for the Sigx runtime (demo/experimental).
+
+## Components
+
+- `Button` - a focusable, clickable control.
+- `Input` - a focusable text input with two-way `sync` binding via `value`.
+- `ProgressBar` - a read-only progress indicator.
+- `Checkbox` - a focusable checkbox with two-way `sync` binding via `value`.
+
+## `Checkbox` Usage
+
+The `Checkbox` component uses two-way `sync` binding. That means you can write:
+
+```tsx
+/** @jsxImportSource @sigx/terminal */
+import { signal, renderTerminal, Checkbox } from '@sigx/terminal';
+
+const state = signal({ enabled: true });
+
+renderTerminal(
+    <Checkbox sync={() => state.enabled} label="Enabled" />,
+    { clearConsole: true }
+);
+```
+
+When the user presses Space or Enter while the `Checkbox` is focused, it will emit `update:value` and `change` events in addition to toggling the visual state.
+
+Props:
+
+- `value` (sync) - boolean - current value (two-way binding via `sync`).
+- `label` - string - optional label to display.
+- `autofocus` - boolean - focus on mount.
+- `disabled` - boolean - disable interaction.
+
+Events:
+
+- `update:value` - emitted when the value changes (used by `sync`).
+- `change` - emitted with the new value when toggled.

package/dist/components/Button.d.ts

@@ -0,0 +1,7 @@
+/** @jsxImportSource @sigx/runtime-core */
+import { type DefineEvent } from '@sigx/runtime-core';
+export declare const Button: import("@sigx/runtime-core").ComponentFactory<{
+    label?: string | undefined;
+} & {
+    dropShadow?: boolean | undefined;
+} & DefineEvent<"click">, void, {}>;

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,12 @@
+/** @jsxImportSource @sigx/runtime-core */
+import { type DefineEvent } from '@sigx/runtime-core';
+export declare const Checkbox: import("@sigx/runtime-core").ComponentFactory<{
+    value?: boolean | undefined;
+} & DefineEvent<"update:value", boolean> & {
+    label?: string | undefined;
+} & {
+    autofocus?: boolean | undefined;
+} & {
+    disabled?: boolean | undefined;
+} & DefineEvent<"change", boolean>, void, {}>;
+export default Checkbox;

package/dist/components/Input.d.ts

@@ -0,0 +1,11 @@
+/** @jsxImportSource @sigx/runtime-core */
+import { type DefineEvent } from '@sigx/runtime-core';
+export declare const Input: import("@sigx/runtime-core").ComponentFactory<{
+    value?: string | undefined;
+} & DefineEvent<"update:value", string> & {
+    placeholder?: string | undefined;
+} & {
+    autofocus?: boolean | undefined;
+} & {
+    label?: string | undefined;
+} & DefineEvent<"input", string> & DefineEvent<"submit", string>, void, {}>;

package/dist/components/ProgressBar.d.ts

@@ -0,0 +1,13 @@
+export declare const ProgressBar: import("@sigx/runtime-core").ComponentFactory<{
+    value?: number | undefined;
+} & {
+    max?: number | undefined;
+} & {
+    width?: number | undefined;
+} & {
+    char?: string | undefined;
+} & {
+    emptyChar?: string | undefined;
+} & {
+    color?: string | undefined;
+}, void, {}>;

package/dist/focus.d.ts

@@ -0,0 +1,8 @@
+export declare const focusState: import("@sigx/reactivity").Signal<{
+    activeId: string | null;
+}>;
+export declare function registerFocusable(id: string): void;
+export declare function unregisterFocusable(id: string): void;
+export declare function focus(id: string): void;
+export declare function focusNext(): void;
+export declare function focusPrev(): void;

package/dist/index.d.ts

@@ -0,0 +1,59 @@
+import './types.js';
+export * from './focus';
+export * from './components/Input';
+export * from './components/ProgressBar';
+export * from './components/Button';
+export * from './components/Checkbox';
+export interface TerminalNode {
+    type: 'root' | 'element' | 'text' | 'comment';
+    tag?: string;
+    text?: string;
+    props: Record<string, any>;
+    children: TerminalNode[];
+    parentNode?: TerminalNode | null;
+}
+export declare const render: (element: import("@sigx/runtime-core").JSXElement, container: TerminalNode, appContext?: import("@sigx/runtime-core").AppContext) => void, createApp: (rootComponent: any) => {
+    mount(selectorOrContainer: string | TerminalNode): void;
+};
+export declare function renderNodeToLines(node: TerminalNode): string[];
+type KeyHandler = (key: string) => void;
+export declare function onKey(handler: KeyHandler): () => boolean;
+export interface RenderTerminalOptions {
+    clearConsole?: boolean;
+}
+export declare function renderTerminal(app: any, options?: RenderTerminalOptions): {
+    unmount: () => void;
+};
+/**
+ * Mount function for Terminal environments.
+ * Use this with defineApp().mount() to render to the terminal.
+ *
+ * @example
+ * ```tsx
+ * import { defineApp } from '@sigx/runtime-core';
+ * import { terminalMount } from '@sigx/runtime-terminal';
+ *
+ * const app = defineApp(<Counter />);
+ * app.use(loggingPlugin)
+ *    .mount({ clearConsole: true }, terminalMount);
+ * ```
+ */
+export declare const terminalMount: (component: any, options: RenderTerminalOptions, appContext?: any) => (() => void);
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            box: TerminalAttributes;
+            text: TerminalAttributes;
+            br: TerminalAttributes;
+        }
+        interface TerminalAttributes {
+            color?: 'red' | 'green' | 'blue' | 'yellow' | 'cyan' | 'white' | 'black' | string;
+            backgroundColor?: 'red' | 'green' | 'blue' | 'yellow' | 'cyan' | 'white' | 'black' | string;
+            border?: 'single' | 'double' | 'rounded' | 'none';
+            borderColor?: 'red' | 'green' | 'blue' | 'yellow' | 'cyan' | 'white' | 'black' | string;
+            dropShadow?: boolean;
+            label?: string;
+            children?: any;
+        }
+    }
+}