@opentui/solid 0.1.13 → 0.1.15

package/index.d.ts

@@ -3,4 +3,5 @@ import type { JSX } from "./jsx-runtime";
 export declare const render: (node: () => JSX.Element, renderConfig?: CliRendererConfig) => Promise<void>;
 export * from "./src/reconciler";
 export * from "./src/elements";
+export * from "./src/types/elements";
 export { type JSX };

package/index.js

@@ -7,6 +7,7 @@ import {
   ASCIIFontRenderable,
   BoxRenderable,
   InputRenderable,
+  ScrollBoxRenderable,
   SelectRenderable,
   TabSelectRenderable,
   TextRenderable
@@ -37,14 +38,14 @@ var onResize = (callback) => {
 };
 var useTerminalDimensions = () => {
   const renderer = useRenderer();
-  const [terminalDimensions, setTerminalDimensions] = createSignal({ width: renderer.terminalWidth, height: renderer.terminalHeight });
+  const [terminalDimensions, setTerminalDimensions] = createSignal({ width: renderer.width, height: renderer.height });
   const callback = (width, height) => {
     setTerminalDimensions({ width, height });
   };
   onResize(callback);
   return terminalDimensions;
 };
-var useKeyHandler = (callback) => {
+var useKeyboard = (callback) => {
   const keyHandler = getKeyHandler();
   onMount(() => {
     keyHandler.on("keypress", callback);
@@ -53,6 +54,7 @@ var useKeyHandler = (callback) => {
     keyHandler.off("keypress", callback);
   });
 };
+var useKeyHandler = useKeyboard;
 var useSelectionHandler = (callback) => {
   const renderer = useRenderer();
   onMount(() => {
@@ -93,14 +95,22 @@ var useTimeline = (timeline, initialValue, targetValue, options, startTime = 0)
 };
 
 // src/elements/index.ts
-var elements = {
-  ascii_font: ASCIIFontRenderable,
+var baseComponents = {
   box: BoxRenderable,
+  text: TextRenderable,
   input: InputRenderable,
   select: SelectRenderable,
+  ascii_font: ASCIIFontRenderable,
   tab_select: TabSelectRenderable,
-  text: TextRenderable
+  scrollbox: ScrollBoxRenderable
 };
+var componentCatalogue = { ...baseComponents };
+function extend(objects) {
+  Object.assign(componentCatalogue, objects);
+}
+function getComponentCatalogue() {
+  return componentCatalogue;
+}
 
 // src/reconciler.ts
 import {
@@ -114,6 +124,7 @@ import {
   TabSelectRenderableEvents,
   TextRenderable as TextRenderable3
 } from "@opentui/core";
+import { useContext as useContext2 } from "solid-js";
 import { createRenderer } from "solid-js/universal";
 
 // src/elements/text-node.ts
@@ -140,6 +151,9 @@ var log = (...args) => {
 // src/elements/text-node.ts
 var GHOST_NODE_TAG = "text-ghost";
 var ChunkToTextNodeMap = new WeakMap;
+var isTextChunk = (node) => {
+  return typeof node === "object" && "__isChunk" in node;
+};
 
 class TextNode {
   id;
@@ -193,6 +207,7 @@ class TextNode {
       }
     }
     textParent.content = styledText;
+    textParent.visible = styledText.toString() !== "";
     this.parent = parent;
   }
   remove(parent) {
@@ -251,9 +266,27 @@ class GhostTextRenderable extends TextRenderable2 {
 }
 
 // src/reconciler.ts
-import { useContext as useContext2 } from "solid-js";
+var logId = (node) => {
+  if (!node)
+    return;
+  if (isTextChunk(node)) {
+    return node.plainText;
+  }
+  return node.id;
+};
 function _insertNode(parent, node, anchor) {
-  log("Inserting node:", node.id, "into parent:", parent.id, "with anchor:", anchor?.id);
+  log("Inserting node:", logId(node), "into parent:", logId(parent), "with anchor:", logId(anchor), node instanceof TextNode);
+  if (node instanceof StyledText) {
+    log("Inserting styled text:", node.toString());
+    for (const chunk of node.chunks) {
+      _insertNode(parent, _createTextNode(chunk), anchor);
+      return;
+    }
+  }
+  if (isTextChunk(node)) {
+    _insertNode(parent, _createTextNode(node), anchor);
+    return;
+  }
   if (node instanceof TextNode) {
     return node.insert(parent, anchor);
   }
@@ -261,6 +294,10 @@ function _insertNode(parent, node, anchor) {
     return;
   }
   if (anchor) {
+    if (isTextChunk(anchor)) {
+      console.warn("Cannot add non text node with text chunk anchor");
+      return;
+    }
     const anchorIndex = parent.getChildren().findIndex((el) => {
       if (anchor instanceof TextNode) {
         return el.id === anchor.textParent?.id;
@@ -273,7 +310,20 @@ function _insertNode(parent, node, anchor) {
   }
 }
 function _removeNode(parent, node) {
-  log("Removing node:", node.id, "from parent:", parent.id);
+  log("Removing node:", logId(node), "from parent:", logId(parent));
+  if (isTextChunk(node)) {
+    const textNode = TextNode.getTextNodeFromChunk(node);
+    if (textNode) {
+      _removeNode(parent, textNode);
+    }
+  } else if (node instanceof StyledText) {
+    for (const chunk of node.chunks) {
+      const textNode = TextNode.getTextNodeFromChunk(chunk);
+      if (!textNode)
+        continue;
+      _removeNode(parent, textNode);
+    }
+  }
   if (node instanceof TextNode) {
     return node.remove(parent);
   }
@@ -282,6 +332,16 @@ function _removeNode(parent, node) {
     node.destroyRecursively();
   }
 }
+function _createTextNode(value) {
+  log("Creating text node:", value);
+  const chunk = value && isTextChunk(value) ? value : {
+    __isChunk: true,
+    text: new TextEncoder().encode(`${value}`),
+    plainText: `${value}`
+  };
+  const textNode = new TextNode(chunk);
+  return textNode;
+}
 var {
   render: _render,
   effect,
@@ -290,7 +350,7 @@ var {
   createElement,
   createTextNode,
   insertNode,
-  insert: solidUniversalInsert,
+  insert,
   spread,
   setProp,
   mergeProps,
@@ -303,24 +363,23 @@ var {
     if (!solidRenderer) {
       throw new Error("No renderer found");
     }
+    const elements = getComponentCatalogue();
+    if (!elements[tagName]) {
+      throw new Error(`[Reconciler] Unknown component type: ${tagName}`);
+    }
     const element = new elements[tagName](solidRenderer, { id });
     log("Element created with id:", id);
     return element;
   },
-  createTextNode(value) {
-    log("Creating text node:", value);
-    const chunk = typeof value === "object" && "__isChunk" in value ? value : {
-      __isChunk: true,
-      text: new TextEncoder().encode(`${value}`),
-      plainText: `${value}`
-    };
-    const textNode = new TextNode(chunk);
-    return textNode;
-  },
+  createTextNode: _createTextNode,
   replaceText(textNode, value) {
-    log("Replacing text:", value, "in node:", textNode.id);
+    log("Replacing text:", value, "in node:", logId(textNode));
     if (textNode instanceof Renderable2)
       return;
+    if (isTextChunk(textNode)) {
+      console.warn("Cannot replace text on text chunk", logId(textNode));
+      return;
+    }
     const newChunk = {
       __isChunk: true,
       text: new TextEncoder().encode(value),
@@ -329,8 +388,8 @@ var {
     textNode.replaceText(newChunk);
   },
   setProperty(node, name, value, prev) {
-    if (node instanceof TextNode) {
-      console.warn("Cannot set property on text node:", node.id);
+    if (node instanceof TextNode || isTextChunk(node)) {
+      console.warn("Cannot set property on text node:", logId(node));
       return;
     }
     if (name.startsWith("on:")) {
@@ -427,18 +486,25 @@ var {
   },
   insertNode: _insertNode,
   removeNode: _removeNode,
-  getParentNode(node) {
-    log("Getting parent of node:", node.id);
+  getParentNode(childNode) {
+    log("Getting parent of node:", logId(childNode));
+    let node = childNode;
+    if (isTextChunk(childNode)) {
+      const parentTextNode = TextNode.getTextNodeFromChunk(childNode);
+      if (!parentTextNode)
+        return;
+      node = parentTextNode;
+    }
     const parent = node.parent;
     if (!parent) {
-      log("No parent found for node:", node.id);
+      log("No parent found for node:", logId(node));
       return;
     }
-    log("Parent found:", parent.id, "for node:", node.id);
+    log("Parent found:", logId(parent), "for node:", logId(node));
     return parent;
   },
   getFirstChild(node) {
-    log("Getting first child of node:", node.id);
+    log("Getting first child of node:", logId(node));
     if (node instanceof TextRenderable3) {
       const chunk = node.content.chunks[0];
       if (chunk) {
@@ -447,22 +513,26 @@ var {
         return;
       }
     }
-    if (node instanceof TextNode) {
+    if (node instanceof TextNode || isTextChunk(node)) {
       return;
     }
     const firstChild = node.getChildren()[0];
     if (!firstChild) {
-      log("No first child found for node:", node.id);
+      log("No first child found for node:", logId(node));
       return;
     }
-    log("First child found:", firstChild.id, "for node:", node.id);
+    log("First child found:", logId(firstChild), "for node:", logId(node));
     return firstChild;
   },
   getNextSibling(node) {
-    log("Getting next sibling of node:", node.id);
+    log("Getting next sibling of node:", logId(node));
+    if (isTextChunk(node)) {
+      console.warn("Cannot get next sibling of text chunk");
+      return;
+    }
     const parent = node.parent;
     if (!parent) {
-      log("No parent found for node:", node.id);
+      log("No parent found for node:", logId(node));
       return;
     }
     if (node instanceof TextNode) {
@@ -470,73 +540,34 @@ var {
         const siblings2 = parent.content.chunks;
         const index2 = siblings2.indexOf(node.chunk);
         if (index2 === -1 || index2 === siblings2.length - 1) {
-          log("No next sibling found for node:", node.id);
+          log("No next sibling found for node:", logId(node));
           return;
         }
         const nextSibling2 = siblings2[index2 + 1];
         if (!nextSibling2) {
-          log("Next sibling is null for node:", node.id);
+          log("Next sibling is null for node:", logId(node));
           return;
         }
         return TextNode.getTextNodeFromChunk(nextSibling2);
       }
-      console.warn("Text parent is not a text node:", node.id);
+      console.warn("Text parent is not a text node:", logId(node));
       return;
     }
     const siblings = parent.getChildren();
     const index = siblings.indexOf(node);
     if (index === -1 || index === siblings.length - 1) {
-      log("No next sibling found for node:", node.id);
+      log("No next sibling found for node:", logId(node));
       return;
     }
     const nextSibling = siblings[index + 1];
     if (!nextSibling) {
-      log("Next sibling is null for node:", node.id);
+      log("Next sibling is null for node:", logId(node));
       return;
     }
-    log("Next sibling found:", nextSibling.id, "for node:", node.id);
+    log("Next sibling found:", logId(nextSibling), "for node:", logId(node));
     return nextSibling;
   }
 });
-var insertStyledText = (parent, value, current, marker) => {
-  while (typeof current === "function")
-    current = current();
-  if (value === current)
-    return current;
-  if (current) {
-    if (typeof current === "object" && "__isChunk" in current) {
-      const node = TextNode.getTextNodeFromChunk(current);
-      if (node) {
-        _removeNode(parent, node);
-      }
-    } else if (current instanceof StyledText) {
-      for (const chunk of current.chunks) {
-        const chunkNode = TextNode.getTextNodeFromChunk(chunk);
-        if (!chunkNode)
-          continue;
-        _removeNode(parent, chunkNode);
-      }
-    }
-  }
-  if (value instanceof StyledText) {
-    log("Inserting styled text:", value.toString());
-    for (const chunk of value.chunks) {
-      insertNode(parent, createTextNode(chunk), marker);
-    }
-    return value;
-  } else if (value && typeof value === "object" && "__isChunk" in value) {
-    insertNode(parent, createTextNode(value), marker);
-    return value;
-  }
-  return solidUniversalInsert(parent, value, marker, current);
-};
-var insert = (parent, accessor, marker, initial) => {
-  if (marker !== undefined && !initial)
-    initial = [];
-  if (typeof accessor !== "function")
-    return insertStyledText(parent, accessor, initial, marker);
-  effect((current) => insertStyledText(parent, accessor(), current, marker), initial);
-};
 
 // index.ts
 var render = async (node, renderConfig = {}) => {
@@ -555,10 +586,10 @@ export {
   useTerminalDimensions,
   useSelectionHandler,
   useRenderer,
+  useKeyboard,
   useKeyHandler,
   use,
   spread,
-  solidUniversalInsert,
   setProp,
   render,
   onResize,
@@ -566,12 +597,15 @@ export {
   memo,
   insertNode,
   insert,
-  elements,
+  getComponentCatalogue,
+  extend,
   effect,
   createTextNode,
   createElement,
   createComponentTimeline,
   createComponent,
+  componentCatalogue,
+  baseComponents,
   _render,
   RendererContext
 };

package/jsx-runtime.d.ts

@@ -1,12 +1,14 @@
 import { Renderable } from "@opentui/core"
-import {
-  ASCIIFontElementProps,
-  BoxElementProps,
-  InputElementProps,
-  SelectElementProps,
-  TabSelectElementProps,
-  TextElementProps,
-} from "./src/elements/index"
+import type {
+  AsciiFontProps,
+  BoxProps,
+  ExtendedIntrinsicElements,
+  InputProps,
+  OpenTUIComponents,
+  SelectProps,
+  TabSelectProps,
+  TextProps,
+} from "./src/types/elements"
 
 declare namespace JSX {
   // Replace Node with Renderable
@@ -14,13 +16,13 @@ declare namespace JSX {
 
   interface ArrayElement extends Array<Element> {}
 
-  interface IntrinsicElements {
-    ascii_font: ASCIIFontElementProps
-    box: BoxElementProps
-    input: InputElementProps
-    select: SelectElementProps
-    tab_select: TabSelectElementProps
-    text: TextElementProps
+  interface IntrinsicElements extends ExtendedIntrinsicElements<OpenTUIComponents> {
+    box: BoxProps
+    text: TextProps
+    input: InputProps
+    select: SelectProps
+    ascii_font: AsciiFontProps
+    tab_select: TabSelectProps
   }
 
   interface ElementChildrenAttribute {

package/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "types": "index.d.ts",
   "type": "module",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "SolidJS renderer for OpenTUI",
   "license": "MIT",
   "repository": {
@@ -25,7 +25,7 @@
     "./jsx-dev-runtime": "./jsx-runtime.d.ts"
   },
   "dependencies": {
-    "@opentui/core": "0.1.13",
+    "@opentui/core": "0.1.15",
     "babel-plugin-module-resolver": "5.0.2",
     "@babel/core": "7.28.0",
     "@babel/preset-typescript": "7.27.1",

package/src/elements/hooks.d.ts

@@ -6,6 +6,10 @@ export declare const useTerminalDimensions: () => import("solid-js").Accessor<{
     width: number;
     height: number;
 }>;
+export declare const useKeyboard: (callback: (key: ParsedKey) => void) => void;
+/**
+ * @deprecated renamed to useKeyboard
+ */
 export declare const useKeyHandler: (callback: (key: ParsedKey) => void) => void;
 export declare const useSelectionHandler: (callback: (selection: Selection) => void) => void;
 export declare const createComponentTimeline: (options?: TimelineOptions) => Timeline;

package/src/elements/index.d.ts

@@ -1,52 +1,29 @@
-import type { ASCIIFontOptions, BoxOptions, InputRenderableOptions, Renderable, RenderableOptions, SelectOption, SelectRenderableOptions, StyledText, TabSelectOption, TabSelectRenderableOptions, TextChunk, TextOptions } from "@opentui/core";
-import { ASCIIFontRenderable, BoxRenderable, InputRenderable, SelectRenderable, TabSelectRenderable, TextRenderable } from "@opentui/core";
-import type { JSX, Ref } from "solid-js";
+import { ASCIIFontRenderable, BoxRenderable, InputRenderable, ScrollBoxRenderable, SelectRenderable, TabSelectRenderable, TextRenderable } from "@opentui/core";
+import type { RenderableConstructor } from "../types/elements";
 export * from "./hooks";
-export declare const elements: {
-    ascii_font: typeof ASCIIFontRenderable;
+export declare const baseComponents: {
     box: typeof BoxRenderable;
+    text: typeof TextRenderable;
     input: typeof InputRenderable;
     select: typeof SelectRenderable;
+    ascii_font: typeof ASCIIFontRenderable;
     tab_select: typeof TabSelectRenderable;
-    text: typeof TextRenderable;
-};
-export type Element = keyof typeof elements;
-type RenderableNonStyleKeys = "buffered";
-type ElementProps<T extends RenderableOptions<K>, K extends Renderable = Renderable, NonStyleKeys extends keyof T = RenderableNonStyleKeys> = {
-    style?: Omit<T, NonStyleKeys | RenderableNonStyleKeys>;
-    ref?: Ref<K>;
-} & T;
-type ContainerProps = {
-    children?: JSX.Element;
-};
-export type BoxElementProps = ElementProps<BoxOptions, BoxRenderable, "title"> & ContainerProps;
-export type BoxStyle = BoxElementProps["style"];
-export type InputElementProps = ElementProps<InputRenderableOptions, InputRenderable, "value" | "maxLength" | "placeholder"> & {
-    onInput?: (value: string) => void;
-    onSubmit?: (value: string) => void;
-    onChange?: (value: string) => void;
-    focused?: boolean;
-};
-export type InputStyle = InputElementProps["style"];
-type TabSelectEventCallback = (index: number, option: TabSelectOption) => void;
-export type TabSelectElementProps = ElementProps<TabSelectRenderableOptions, TabSelectRenderable, "options" | "showScrollArrows" | "showDescription" | "wrapSelection"> & {
-    onSelect?: TabSelectEventCallback;
-    onChange?: TabSelectEventCallback;
-    focused?: boolean;
-};
-export type TabSelectStyle = TabSelectElementProps["style"];
-type SelectEventCallback = (index: number, option: SelectOption) => void;
-export type SelectElementProps = ElementProps<SelectRenderableOptions, SelectRenderable, "options" | "showScrollIndicator" | "wrapSelection" | "fastScrollStep"> & {
-    onSelect?: SelectEventCallback;
-    onChange?: SelectEventCallback;
-    focused?: boolean;
-};
-export type SelectStyle = SelectElementProps["style"];
-type TextChildTypes = (string & {}) | number | boolean | null | undefined;
-type TextProps = {
-    children: TextChildTypes | StyledText | TextChunk | Array<TextChildTypes | TextChunk>;
+    scrollbox: typeof ScrollBoxRenderable;
 };
-export type ASCIIFontElementProps = ElementProps<ASCIIFontOptions, ASCIIFontRenderable, "text" | "selectable"> & {};
-export type ASCIIFontStyle = ASCIIFontElementProps["style"];
-export type TextElementProps = ElementProps<TextOptions, TextRenderable, "content" | "selectable"> & TextProps;
-export type TextStyle = TextElementProps["style"];
+type ComponentCatalogue = Record<string, RenderableConstructor>;
+export declare const componentCatalogue: ComponentCatalogue;
+/**
+ * Extend the component catalogue with new renderable components
+ *
+ * @example
+ * ```tsx
+ * // Extend with an object of components
+ * extend({
+ *   consoleButton: ConsoleButtonRenderable,
+ *   customBox: CustomBoxRenderable
+ * })
+ * ```
+ */
+export declare function extend<T extends ComponentCatalogue>(objects: T): void;
+export declare function getComponentCatalogue(): ComponentCatalogue;
+export type { ExtendedComponentProps, ExtendedIntrinsicElements, RenderableConstructor } from "../types/elements";

package/src/elements/text-node.d.ts

@@ -1,5 +1,6 @@
 import { Renderable, TextRenderable, type RenderContext, type TextChunk, type TextOptions } from "@opentui/core";
 import { type DomNode } from "../reconciler";
+export declare const isTextChunk: (node: any) => node is TextChunk;
 /**
  * Represents a text node in the SolidJS reconciler.
  */

package/src/reconciler.d.ts

@@ -1,5 +1,4 @@
-import { Renderable } from "@opentui/core";
+import { Renderable, type TextChunk } from "@opentui/core";
 import { TextNode } from "./elements/text-node";
-export type DomNode = Renderable | TextNode;
-export declare const _render: (code: () => DomNode, node: DomNode) => () => void, effect: <T>(fn: (prev?: T) => T, init?: T) => void, memo: <T>(fn: () => T, equal: boolean) => () => T, createComponent: <T>(Comp: (props: T) => DomNode, props: T) => DomNode, createElement: (tag: string) => DomNode, createTextNode: (value: string) => DomNode, insertNode: (parent: DomNode, node: DomNode, anchor?: DomNode | undefined) => void, solidUniversalInsert: <T>(parent: any, accessor: T | (() => T), marker?: any | null, initial?: any) => DomNode, spread: <T>(node: any, accessor: (() => T) | T, skipChildren?: boolean) => void, setProp: <T>(node: DomNode, name: string, value: T, prev?: T | undefined) => T, mergeProps: (...sources: unknown[]) => unknown, use: <A, T>(fn: (element: DomNode, arg: A) => T, element: DomNode, arg: A) => T;
-export declare const insert: typeof solidUniversalInsert;
+export type DomNode = Renderable | TextNode | TextChunk;
+export declare const _render: (code: () => DomNode, node: DomNode) => () => void, effect: <T>(fn: (prev?: T) => T, init?: T) => void, memo: <T>(fn: () => T, equal: boolean) => () => T, createComponent: <T>(Comp: (props: T) => DomNode, props: T) => DomNode, createElement: (tag: string) => DomNode, createTextNode: (value: string) => DomNode, insertNode: (parent: DomNode, node: DomNode, anchor?: DomNode | undefined) => void, insert: <T>(parent: any, accessor: T | (() => T), marker?: any | null, initial?: any) => DomNode, spread: <T>(node: any, accessor: (() => T) | T, skipChildren?: boolean) => void, setProp: <T>(node: DomNode, name: string, value: T, prev?: T | undefined) => T, mergeProps: (...sources: unknown[]) => unknown, use: <A, T>(fn: (element: DomNode, arg: A) => T, element: DomNode, arg: A) => T;

package/src/types/elements.d.ts

@@ -0,0 +1,67 @@
+import type { ASCIIFontOptions, ASCIIFontRenderable, BoxOptions, BoxRenderable, InputRenderable, InputRenderableOptions, Renderable, RenderableOptions, RenderContext, ScrollBoxOptions, ScrollBoxRenderable, SelectOption, SelectRenderable, SelectRenderableOptions, StyledText, TabSelectOption, TabSelectRenderable, TabSelectRenderableOptions, TextChunk, TextOptions, TextRenderable } from "@opentui/core";
+import type { JSX, Ref } from "solid-js";
+/** Properties that should not be included in the style prop */
+export type NonStyledProps = "id" | "buffered" | "live" | "enableLayout" | "selectable" | "renderAfter" | "renderBefore" | `on${string}`;
+/** Solid-specific props for all components */
+export type ElementProps<TRenderable = unknown> = {
+    ref?: Ref<TRenderable>;
+};
+/** Base type for any renderable constructor */
+export type RenderableConstructor<TRenderable extends Renderable = Renderable> = new (ctx: RenderContext, options: any) => TRenderable;
+/** Extract the options type from a renderable constructor */
+type ExtractRenderableOptions<TConstructor> = TConstructor extends new (ctx: RenderContext, options: infer TOptions) => any ? TOptions : never;
+/** Extract the renderable type from a constructor */
+type ExtractRenderable<TConstructor> = TConstructor extends new (ctx: RenderContext, options: any) => infer TRenderable ? TRenderable : never;
+/** Determine which properties should be excluded from styling for different renderable types */
+export type GetNonStyledProperties<TConstructor> = TConstructor extends RenderableConstructor<TextRenderable> ? NonStyledProps | "content" : TConstructor extends RenderableConstructor<BoxRenderable> ? NonStyledProps | "title" : TConstructor extends RenderableConstructor<ASCIIFontRenderable> ? NonStyledProps | "text" | "selectable" : TConstructor extends RenderableConstructor<InputRenderable> ? NonStyledProps | "placeholder" | "value" : NonStyledProps;
+/** Base props for container components that accept children */
+type ContainerProps<TOptions> = TOptions & {
+    children?: JSX.Element;
+};
+/** Smart component props that automatically determine excluded properties */
+type ComponentProps<TOptions extends RenderableOptions<TRenderable>, TRenderable extends Renderable> = TOptions & {
+    style?: Partial<Omit<TOptions, GetNonStyledProperties<RenderableConstructor<TRenderable>>>>;
+} & ElementProps<TRenderable>;
+/** Valid text content types for Text component children */
+type TextChildren = (string & {}) | number | boolean | null | undefined;
+export type TextProps = ComponentProps<TextOptions, TextRenderable> & {
+    children?: TextChildren | StyledText | TextChunk | Array<TextChildren | StyledText | TextChunk>;
+};
+export type BoxProps = ComponentProps<ContainerProps<BoxOptions>, BoxRenderable>;
+export type InputProps = ComponentProps<InputRenderableOptions, InputRenderable> & {
+    focused?: boolean;
+    onInput?: (value: string) => void;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+};
+export type SelectProps = ComponentProps<SelectRenderableOptions, SelectRenderable> & {
+    focused?: boolean;
+    onChange?: (index: number, option: SelectOption | null) => void;
+    onSelect?: (index: number, option: SelectOption | null) => void;
+};
+export type AsciiFontProps = ComponentProps<ASCIIFontOptions, ASCIIFontRenderable>;
+export type TabSelectProps = ComponentProps<TabSelectRenderableOptions, TabSelectRenderable> & {
+    focused?: boolean;
+    onChange?: (index: number, option: TabSelectOption | null) => void;
+    onSelect?: (index: number, option: TabSelectOption | null) => void;
+};
+export type ScrollBoxProps = ComponentProps<ContainerProps<ScrollBoxOptions>, ScrollBoxRenderable> & {
+    focused?: boolean;
+};
+/** Convert renderable constructor to component props with proper style exclusions */
+export type ExtendedComponentProps<TConstructor extends RenderableConstructor, TOptions = ExtractRenderableOptions<TConstructor>> = TOptions & {
+    children?: JSX.Element;
+    style?: Partial<Omit<TOptions, GetNonStyledProperties<TConstructor>>>;
+} & ElementProps<ExtractRenderable<TConstructor>>;
+/** Helper type to create JSX element properties from a component catalogue */
+export type ExtendedIntrinsicElements<TComponentCatalogue extends Record<string, RenderableConstructor>> = {
+    [TComponentName in keyof TComponentCatalogue]: ExtendedComponentProps<TComponentCatalogue[TComponentName]>;
+};
+/**
+ * Global augmentation interface for extended components
+ * This will be augmented by user code using module augmentation
+ */
+export interface OpenTUIComponents {
+    [componentName: string]: RenderableConstructor;
+}
+export {};