@opentui/solid 0.1.12 → 0.1.14

package/index.d.ts

@@ -1,5 +1,7 @@
 import { type CliRendererConfig } from "@opentui/core";
 import type { JSX } from "./jsx-runtime";
-export * from "./src/elements";
 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

@@ -6,7 +6,6 @@ import { createCliRenderer } from "@opentui/core";
 import {
   ASCIIFontRenderable,
   BoxRenderable,
-  GroupRenderable,
   InputRenderable,
   SelectRenderable,
   TabSelectRenderable,
@@ -38,7 +37,7 @@ 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 });
   };
@@ -94,15 +93,21 @@ var useTimeline = (timeline, initialValue, targetValue, options, startTime = 0)
 };
 
 // src/elements/index.ts
-var elements = {
-  ascii_font: ASCIIFontRenderable,
+var baseComponents = {
   box: BoxRenderable,
-  group: GroupRenderable,
+  text: TextRenderable,
   input: InputRenderable,
   select: SelectRenderable,
-  tab_select: TabSelectRenderable,
-  text: TextRenderable
+  ascii_font: ASCIIFontRenderable,
+  tab_select: TabSelectRenderable
 };
+var componentCatalogue = { ...baseComponents };
+function extend(objects) {
+  Object.assign(componentCatalogue, objects);
+}
+function getComponentCatalogue() {
+  return componentCatalogue;
+}
 
 // src/reconciler.ts
 import {
@@ -116,6 +121,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
@@ -142,6 +148,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;
@@ -195,6 +204,7 @@ class TextNode {
       }
     }
     textParent.content = styledText;
+    textParent.visible = styledText.toString() !== "";
     this.parent = parent;
   }
   remove(parent) {
@@ -253,9 +263,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);
   }
@@ -263,6 +291,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;
@@ -275,7 +307,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);
   }
@@ -284,6 +329,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,
@@ -292,7 +347,7 @@ var {
   createElement,
   createTextNode,
   insertNode,
-  insert: solidUniversalInsert,
+  insert,
   spread,
   setProp,
   mergeProps,
@@ -305,24 +360,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),
@@ -331,8 +385,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:")) {
@@ -429,18 +483,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) {
@@ -449,22 +510,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) {
@@ -472,31 +537,31 @@ 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;
   }
 });
@@ -519,9 +584,24 @@ export {
   useSelectionHandler,
   useRenderer,
   useKeyHandler,
+  use,
+  spread,
+  setProp,
   render,
   onResize,
-  elements,
+  mergeProps,
+  memo,
+  insertNode,
+  insert,
+  getComponentCatalogue,
+  extend,
+  effect,
+  createTextNode,
+  createElement,
   createComponentTimeline,
+  createComponent,
+  componentCatalogue,
+  baseComponents,
+  _render,
   RendererContext
 };

package/jsx-runtime.d.ts

@@ -1,13 +1,14 @@
 import { Renderable } from "@opentui/core"
-import {
-  ASCIIFontElementProps,
-  BoxElementProps,
-  GroupElementProps,
-  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
@@ -15,14 +16,13 @@ declare namespace JSX {
 
   interface ArrayElement extends Array<Element> {}
 
-  interface IntrinsicElements {
-    ascii_font: ASCIIFontElementProps
-    box: BoxElementProps
-    group: GroupElementProps
-    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.12",
+  "version": "0.1.14",
   "description": "SolidJS renderer for OpenTUI",
   "license": "MIT",
   "repository": {
@@ -18,11 +18,6 @@
       "import": "./index.js",
       "require": "./index.js"
     },
-    "./reconciler": {
-      "types": "./src/reconciler.d.ts",
-      "import": "./src/reconciler.js",
-      "require": "./src/reconciler.js"
-    },
     "./preload": {
       "import": "./scripts/preload.ts"
     },
@@ -30,7 +25,7 @@
     "./jsx-dev-runtime": "./jsx-runtime.d.ts"
   },
   "dependencies": {
-    "@opentui/core": "0.1.12",
+    "@opentui/core": "0.1.14",
     "babel-plugin-module-resolver": "5.0.2",
     "@babel/core": "7.28.0",
     "@babel/preset-typescript": "7.27.1",

package/scripts/solid-plugin.ts

@@ -29,7 +29,7 @@ const solidTransformPlugin: BunPlugin = {
           [
             solid,
             {
-              moduleName: "@opentui/solid/reconciler",
+              moduleName: "@opentui/solid",
               generate: "universal",
             },
           ],

package/src/elements/index.d.ts

@@ -1,55 +1,28 @@
-import type { ASCIIFontOptions, BoxOptions, InputRenderableOptions, Renderable, RenderableOptions, SelectOption, SelectRenderableOptions, StyledText, TabSelectOption, TabSelectRenderableOptions, TextChunk, TextOptions } from "@opentui/core";
-import { ASCIIFontRenderable, BoxRenderable, GroupRenderable, InputRenderable, SelectRenderable, TabSelectRenderable, TextRenderable } from "@opentui/core";
-import type { JSX, Ref } from "solid-js";
+import { ASCIIFontRenderable, BoxRenderable, InputRenderable, 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;
-    group: typeof GroupRenderable;
+    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 GroupElementProps = ElementProps<RenderableOptions, GroupRenderable> & ContainerProps;
-export type GroupStyle = GroupElementProps["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>;
 };
-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,64 @@
+import type { ASCIIFontOptions, ASCIIFontRenderable, BoxOptions, BoxRenderable, InputRenderable, InputRenderableOptions, Renderable, RenderableOptions, RenderContext, 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;
+};
+/** 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 {};

package/src/reconciler.js

@@ -1,481 +0,0 @@
-// @bun
-// src/reconciler.ts
-import {
-  InputRenderable as InputRenderable2,
-  InputRenderableEvents,
-  Renderable as Renderable2,
-  SelectRenderable as SelectRenderable2,
-  SelectRenderableEvents,
-  StyledText,
-  TabSelectRenderable as TabSelectRenderable2,
-  TabSelectRenderableEvents,
-  TextRenderable as TextRenderable3
-} from "@opentui/core";
-import { createRenderer } from "solid-js/universal";
-
-// src/elements/index.ts
-import {
-  ASCIIFontRenderable,
-  BoxRenderable,
-  GroupRenderable,
-  InputRenderable,
-  SelectRenderable,
-  TabSelectRenderable,
-  TextRenderable
-} from "@opentui/core";
-
-// src/elements/hooks.ts
-import {
-  getKeyHandler,
-  Timeline
-} from "@opentui/core";
-import { createContext, createSignal, onCleanup, onMount, useContext } from "solid-js";
-var RendererContext = createContext();
-
-// src/elements/index.ts
-var elements = {
-  ascii_font: ASCIIFontRenderable,
-  box: BoxRenderable,
-  group: GroupRenderable,
-  input: InputRenderable,
-  select: SelectRenderable,
-  tab_select: TabSelectRenderable,
-  text: TextRenderable
-};
-
-// src/elements/text-node.ts
-import { Renderable, TextRenderable as TextRenderable2 } from "@opentui/core";
-
-// src/utils/id-counter.ts
-var idCounter = new Map;
-function getNextId(elementType) {
-  if (!idCounter.has(elementType)) {
-    idCounter.set(elementType, 0);
-  }
-  const value = idCounter.get(elementType) + 1;
-  idCounter.set(elementType, value);
-  return `${elementType}-${value}`;
-}
-
-// src/utils/log.ts
-var log = (...args) => {
-  if (process.env.DEBUG) {
-    console.log("[Reconciler]", ...args);
-  }
-};
-
-// src/elements/text-node.ts
-var GHOST_NODE_TAG = "text-ghost";
-var ChunkToTextNodeMap = new WeakMap;
-
-class TextNode {
-  id;
-  chunk;
-  parent;
-  textParent;
-  constructor(chunk) {
-    this.id = getNextId("text-node");
-    this.chunk = chunk;
-    ChunkToTextNodeMap.set(chunk, this);
-  }
-  replaceText(newChunk) {
-    const textParent = this.textParent;
-    if (!textParent) {
-      log("No parent found for text node:", this.id);
-      return;
-    }
-    textParent.content = textParent.content.replace(newChunk, this.chunk);
-    this.chunk = newChunk;
-    ChunkToTextNodeMap.set(newChunk, this);
-  }
-  static getTextNodeFromChunk(chunk) {
-    return ChunkToTextNodeMap.get(chunk);
-  }
-  insert(parent, anchor) {
-    if (!(parent instanceof Renderable)) {
-      log("Attaching text node to parent text node, impossible");
-      return;
-    }
-    let textParent;
-    if (!(parent instanceof TextRenderable2)) {
-      textParent = this.getOrCreateTextGhostNode(parent, anchor);
-    } else {
-      textParent = parent;
-    }
-    this.textParent = textParent;
-    let styledText = textParent.content;
-    if (anchor && anchor instanceof TextNode) {
-      const anchorIndex = styledText.chunks.indexOf(anchor.chunk);
-      if (anchorIndex === -1) {
-        log("anchor not found");
-        return;
-      }
-      styledText = styledText.insert(this.chunk, anchorIndex);
-    } else {
-      const firstChunk = textParent.content.chunks[0];
-      if (firstChunk && !ChunkToTextNodeMap.has(firstChunk)) {
-        styledText = styledText.replace(this.chunk, firstChunk);
-      } else {
-        styledText = styledText.insert(this.chunk);
-      }
-    }
-    textParent.content = styledText;
-    this.parent = parent;
-  }
-  remove(parent) {
-    if (!(parent instanceof Renderable)) {
-      ChunkToTextNodeMap.delete(this.chunk);
-      return;
-    }
-    if (parent === this.textParent && parent instanceof TextRenderable2) {
-      ChunkToTextNodeMap.delete(this.chunk);
-      parent.content = parent.content.remove(this.chunk);
-      return;
-    }
-    if (this.textParent) {
-      ChunkToTextNodeMap.delete(this.chunk);
-      let styledText = this.textParent.content;
-      styledText = styledText.remove(this.chunk);
-      if (styledText.chunks.length > 0) {
-        this.textParent.content = styledText;
-      } else {
-        this.parent?.remove(this.textParent.id);
-        this.textParent.destroyRecursively();
-      }
-    }
-  }
-  getOrCreateTextGhostNode(parent, anchor) {
-    if (anchor instanceof TextNode && anchor.textParent) {
-      return anchor.textParent;
-    }
-    const children = parent.getChildren();
-    if (anchor instanceof Renderable) {
-      const anchorIndex = children.findIndex((el) => el.id === anchor.id);
-      const beforeAnchor = children[anchorIndex - 1];
-      if (beforeAnchor instanceof GhostTextRenderable) {
-        return beforeAnchor;
-      }
-    }
-    const lastChild = children.at(-1);
-    if (lastChild instanceof GhostTextRenderable) {
-      return lastChild;
-    }
-    const ghostNode = new GhostTextRenderable(parent.ctx, {
-      id: getNextId(GHOST_NODE_TAG)
-    });
-    insertNode(parent, ghostNode, anchor);
-    return ghostNode;
-  }
-}
-
-class GhostTextRenderable extends TextRenderable2 {
-  constructor(ctx, options) {
-    super(ctx, options);
-  }
-  static isGhostNode(node) {
-    return node instanceof GhostTextRenderable;
-  }
-}
-
-// src/reconciler.ts
-import { useContext as useContext2 } from "solid-js";
-function _insertNode(parent, node, anchor) {
-  log("Inserting node:", node.id, "into parent:", parent.id, "with anchor:", anchor?.id);
-  if (node instanceof TextNode) {
-    return node.insert(parent, anchor);
-  }
-  if (!(parent instanceof Renderable2)) {
-    return;
-  }
-  if (anchor) {
-    const anchorIndex = parent.getChildren().findIndex((el) => {
-      if (anchor instanceof TextNode) {
-        return el.id === anchor.textParent?.id;
-      }
-      return el.id === anchor.id;
-    });
-    parent.add(node, anchorIndex);
-  } else {
-    parent.add(node);
-  }
-}
-function _removeNode(parent, node) {
-  log("Removing node:", node.id, "from parent:", parent.id);
-  if (node instanceof TextNode) {
-    return node.remove(parent);
-  }
-  if (parent instanceof Renderable2 && node instanceof Renderable2) {
-    parent.remove(node.id);
-    node.destroyRecursively();
-  }
-}
-var {
-  render: _render,
-  effect,
-  memo,
-  createComponent,
-  createElement,
-  createTextNode,
-  insertNode,
-  insert: solidUniversalInsert,
-  spread,
-  setProp,
-  mergeProps,
-  use
-} = createRenderer({
-  createElement(tagName) {
-    log("Creating element:", tagName);
-    const id = getNextId(tagName);
-    const solidRenderer = useContext2(RendererContext);
-    if (!solidRenderer) {
-      throw new Error("No renderer found");
-    }
-    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;
-  },
-  replaceText(textNode, value) {
-    log("Replacing text:", value, "in node:", textNode.id);
-    if (textNode instanceof Renderable2)
-      return;
-    const newChunk = {
-      __isChunk: true,
-      text: new TextEncoder().encode(value),
-      plainText: value
-    };
-    textNode.replaceText(newChunk);
-  },
-  setProperty(node, name, value, prev) {
-    if (node instanceof TextNode) {
-      console.warn("Cannot set property on text node:", node.id);
-      return;
-    }
-    if (name.startsWith("on:")) {
-      const eventName = name.slice(3);
-      if (value) {
-        node.on(eventName, value);
-      }
-      if (prev) {
-        node.off(eventName, prev);
-      }
-      return;
-    }
-    switch (name) {
-      case "focused":
-        if (value) {
-          node.focus();
-        } else {
-          node.blur();
-        }
-        break;
-      case "onChange":
-        let event = undefined;
-        if (node instanceof SelectRenderable2) {
-          event = SelectRenderableEvents.SELECTION_CHANGED;
-        } else if (node instanceof TabSelectRenderable2) {
-          event = TabSelectRenderableEvents.SELECTION_CHANGED;
-        } else if (node instanceof InputRenderable2) {
-          event = InputRenderableEvents.CHANGE;
-        }
-        if (!event)
-          break;
-        if (value) {
-          node.on(event, value);
-        }
-        if (prev) {
-          node.off(event, prev);
-        }
-        break;
-      case "onInput":
-        if (node instanceof InputRenderable2) {
-          if (value) {
-            node.on(InputRenderableEvents.INPUT, value);
-          }
-          if (prev) {
-            node.off(InputRenderableEvents.INPUT, prev);
-          }
-        }
-        break;
-      case "onSubmit":
-        if (node instanceof InputRenderable2) {
-          if (value) {
-            node.on(InputRenderableEvents.ENTER, value);
-          }
-          if (prev) {
-            node.off(InputRenderableEvents.ENTER, prev);
-          }
-        }
-        break;
-      case "onSelect":
-        if (node instanceof SelectRenderable2) {
-          if (value) {
-            node.on(SelectRenderableEvents.ITEM_SELECTED, value);
-          }
-          if (prev) {
-            node.off(SelectRenderableEvents.ITEM_SELECTED, prev);
-          }
-        } else if (node instanceof TabSelectRenderable2) {
-          if (value) {
-            node.on(TabSelectRenderableEvents.ITEM_SELECTED, value);
-          }
-          if (prev) {
-            node.off(TabSelectRenderableEvents.ITEM_SELECTED, prev);
-          }
-        }
-        break;
-      case "style":
-        for (const prop in value) {
-          const propVal = value[prop];
-          if (prev !== undefined && propVal === prev[prop])
-            continue;
-          node[prop] = propVal;
-        }
-        break;
-      case "text":
-      case "content":
-        node[name] = typeof value === "string" ? value : Array.isArray(value) ? value.join("") : `${value}`;
-        break;
-      default:
-        node[name] = value;
-    }
-  },
-  isTextNode(node) {
-    return node instanceof TextNode;
-  },
-  insertNode: _insertNode,
-  removeNode: _removeNode,
-  getParentNode(node) {
-    log("Getting parent of node:", node.id);
-    const parent = node.parent;
-    if (!parent) {
-      log("No parent found for node:", node.id);
-      return;
-    }
-    log("Parent found:", parent.id, "for node:", node.id);
-    return parent;
-  },
-  getFirstChild(node) {
-    log("Getting first child of node:", node.id);
-    if (node instanceof TextRenderable3) {
-      const chunk = node.content.chunks[0];
-      if (chunk) {
-        return TextNode.getTextNodeFromChunk(chunk);
-      } else {
-        return;
-      }
-    }
-    if (node instanceof TextNode) {
-      return;
-    }
-    const firstChild = node.getChildren()[0];
-    if (!firstChild) {
-      log("No first child found for node:", node.id);
-      return;
-    }
-    log("First child found:", firstChild.id, "for node:", node.id);
-    return firstChild;
-  },
-  getNextSibling(node) {
-    log("Getting next sibling of node:", node.id);
-    const parent = node.parent;
-    if (!parent) {
-      log("No parent found for node:", node.id);
-      return;
-    }
-    if (node instanceof TextNode) {
-      if (parent instanceof TextRenderable3) {
-        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);
-          return;
-        }
-        const nextSibling2 = siblings2[index2 + 1];
-        if (!nextSibling2) {
-          log("Next sibling is null for node:", node.id);
-          return;
-        }
-        return TextNode.getTextNodeFromChunk(nextSibling2);
-      }
-      console.warn("Text parent is not a text node:", node.id);
-      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);
-      return;
-    }
-    const nextSibling = siblings[index + 1];
-    if (!nextSibling) {
-      log("Next sibling is null for node:", node.id);
-      return;
-    }
-    log("Next sibling found:", nextSibling.id, "for node:", node.id);
-    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);
-};
-export {
-  use,
-  spread,
-  solidUniversalInsert,
-  setProp,
-  mergeProps,
-  memo,
-  insertNode,
-  insert,
-  effect,
-  createTextNode,
-  createElement,
-  createComponent,
-  _render
-};