@opentui/solid 0.1.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 opentui
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,36 @@
+# @opentui/solid
+
+Solid.js support for OpenTUI.
+
+## Installation
+
+```bash
+bun install solid-js @opentui/solid
+```
+
+## Usage
+
+1. Add jsx config to tsconfig.json:
+```json
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "@opentui/solid"
+  }
+}
+```
+
+2. Add preload script to bunfig.toml:
+```toml
+preload = ["@opentui/solid/preload"]
+```
+
+3. Add render function to index.tsx:
+```tsx
+import { render } from "@opentui/solid";
+
+render(() => <text>Hello, World!</text>);
+```
+
+
+4. Run with `bun --conditions=browser index.tsx`.

package/index.d.ts

@@ -0,0 +1,5 @@
+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 { type JSX };

package/index.js

@@ -0,0 +1,449 @@
+// @bun
+// index.ts
+import { createCliRenderer } from "@opentui/core";
+
+// 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();
+var useRenderer = () => {
+  const renderer = useContext(RendererContext);
+  if (!renderer) {
+    throw new Error("No renderer found");
+  }
+  return renderer;
+};
+var onResize = (callback) => {
+  const renderer = useRenderer();
+  onMount(() => {
+    renderer.on("resize", callback);
+  });
+  onCleanup(() => {
+    renderer.off("resize", callback);
+  });
+};
+var useTerminalDimensions = () => {
+  const renderer = useRenderer();
+  const [terminalDimensions, setTerminalDimensions] = createSignal({ width: renderer.terminalWidth, height: renderer.terminalHeight });
+  const callback = (width, height) => {
+    setTerminalDimensions({ width, height });
+  };
+  onResize(callback);
+  return terminalDimensions;
+};
+var useKeyHandler = (callback) => {
+  const keyHandler = getKeyHandler();
+  onMount(() => {
+    keyHandler.on("keypress", callback);
+  });
+  onCleanup(() => {
+    keyHandler.off("keypress", callback);
+  });
+};
+var useSelectionHandler = (callback) => {
+  const renderer = useRenderer();
+  onMount(() => {
+    renderer.on("selection", callback);
+  });
+  onCleanup(() => {
+    renderer.off("selection", callback);
+  });
+};
+var createComponentTimeline = (options = {}) => {
+  const renderer = useRenderer();
+  const timeline = new Timeline(options);
+  const frameCallback = async (dt) => timeline.update(dt);
+  onMount(() => {
+    if (options.autoplay !== false) {
+      timeline.play();
+    }
+    renderer.setFrameCallback(frameCallback);
+  });
+  onCleanup(() => {
+    renderer.removeFrameCallback(frameCallback);
+    timeline.pause();
+  });
+  return timeline;
+};
+var useTimeline = (timeline, initialValue, targetValue, options, startTime = 0) => {
+  const [store, setStore] = createSignal(initialValue);
+  const { onUpdate, ...animationOptions } = options;
+  timeline.add(store(), {
+    ...targetValue,
+    ...animationOptions,
+    onUpdate: (values) => {
+      setStore({ ...values.targets[0] });
+      onUpdate?.(values);
+    }
+  }, startTime);
+  return store;
+};
+
+// src/elements/index.ts
+var elements = {
+  ascii_font: ASCIIFontRenderable,
+  box: BoxRenderable,
+  group: GroupRenderable,
+  input: InputRenderable,
+  select: SelectRenderable,
+  tab_select: TabSelectRenderable,
+  text: TextRenderable
+};
+
+// src/reconciler.ts
+import {
+  GroupRenderable as GroupRenderable2,
+  InputRenderable as InputRenderable2,
+  InputRenderableEvents,
+  Renderable,
+  SelectRenderable as SelectRenderable2,
+  SelectRenderableEvents,
+  StyledText,
+  TabSelectRenderable as TabSelectRenderable2,
+  TabSelectRenderableEvents,
+  TextRenderable as TextRenderable2
+} from "@opentui/core";
+import { createRenderer } from "solid-js/universal";
+
+// 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/reconciler.ts
+class TextNode {
+  id;
+  chunk;
+  parent;
+  constructor(chunk) {
+    this.id = getNextId("text-node");
+    this.chunk = chunk;
+  }
+}
+var ChunkToTextNodeMap = new WeakMap;
+var log = (...args) => {
+  console.log("[Reconciler]", ...args);
+};
+function _insertNode(parent, node, anchor) {
+  log("Inserting node:", node.id, "into parent:", parent.id, "with anchor:", anchor?.id);
+  if (node instanceof TextNode) {
+    if (!(parent instanceof TextRenderable2)) {
+      console.warn(`Cannot insert text:"${node.chunk.plainText}" unless wrapped with a <text> element.`);
+      const ghostNode = new GroupRenderable2(getNextId("ghost-group"), {});
+      ghostNode.getLayoutNode().yogaNode.setDisplay(2);
+      if (parent instanceof Renderable) {
+        parent.add(ghostNode);
+      }
+      return;
+    }
+    const styledText = parent.content;
+    if (anchor && anchor instanceof TextNode) {
+      const anchorIndex = styledText.chunks.indexOf(anchor.chunk);
+      if (anchorIndex == -1) {
+        console.log("anchor not found");
+        return;
+      }
+      styledText.insert(node.chunk, anchorIndex);
+    } else {
+      const firstChunk = parent.content.chunks[0];
+      if (firstChunk && !ChunkToTextNodeMap.has(firstChunk)) {
+        styledText.replace(node.chunk, firstChunk);
+      } else {
+        styledText.insert(node.chunk);
+      }
+    }
+    parent.content = styledText;
+    node.parent = parent;
+    return;
+  }
+  if (!(parent instanceof Renderable)) {
+    return;
+  }
+  if (anchor) {
+    const anchorIndex = parent.getChildren().findIndex((el) => 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 (parent instanceof TextRenderable2 && node instanceof TextNode) {
+    ChunkToTextNodeMap.delete(node.chunk);
+    const styledText = parent.content;
+    styledText.remove(node.chunk);
+    parent.content = styledText;
+  } else if (parent instanceof Renderable && node instanceof Renderable) {
+    node.destroyRecursively();
+    parent.remove(node.id);
+  }
+}
+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 element = new elements[tagName](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);
+    ChunkToTextNodeMap.set(chunk, textNode);
+    return textNode;
+  },
+  replaceText(textNode, value) {
+    log("Replacing text:", value, "in node:", textNode.id);
+    if (textNode instanceof Renderable)
+      return;
+    const newChunk = {
+      __isChunk: true,
+      text: new TextEncoder().encode(value),
+      plainText: value
+    };
+    const parent = textNode.parent;
+    if (!parent) {
+      log("No parent found for text node:", textNode.id);
+      return;
+    }
+    if (parent instanceof TextRenderable2) {
+      const styledText = parent.content;
+      styledText.replace(newChunk, textNode.chunk);
+      parent.content = styledText;
+      textNode.chunk = newChunk;
+      ChunkToTextNodeMap.set(newChunk, textNode);
+    }
+  },
+  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 TextRenderable2) {
+      const chunk = node.content.chunks[0];
+      if (chunk) {
+        return ChunkToTextNodeMap.get(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 TextRenderable2) {
+        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 ChunkToTextNodeMap.get(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;
+  }
+});
+
+// index.ts
+var render = async (node, renderConfig = {}) => {
+  const renderer = await createCliRenderer(renderConfig);
+  _render(() => createComponent(RendererContext.Provider, {
+    get value() {
+      return renderer;
+    },
+    get children() {
+      return createComponent(node, {});
+    }
+  }), renderer.root);
+};
+export {
+  useTimeline,
+  useTerminalDimensions,
+  useSelectionHandler,
+  useRenderer,
+  useKeyHandler,
+  render,
+  onResize,
+  elements,
+  createComponentTimeline,
+  RendererContext
+};

package/jsx-runtime.d.ts

@@ -0,0 +1,31 @@
+import { Renderable } from "@opentui/core";
+import {
+  ASCIIFontElementProps,
+  BoxElementProps,
+  GroupElementProps,
+  InputElementProps,
+  SelectElementProps,
+  TabSelectElementProps,
+  TextElementProps,
+} from "./src/elements/index";
+
+declare namespace JSX {
+  // Replace Node with Renderable
+  type Element = Renderable | ArrayElement | (string & {}) | number | boolean | null | undefined;
+
+  interface ArrayElement extends Array<Element> {}
+
+  interface IntrinsicElements {
+    ascii_font: ASCIIFontElementProps;
+    box: BoxElementProps;
+    group: GroupElementProps;
+    input: InputElementProps;
+    select: SelectElementProps;
+    tab_select: TabSelectElementProps;
+    text: TextElementProps;
+  }
+
+  interface ElementChildrenAttribute {
+    children: {};
+  }
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@opentui/solid",
+  "module": "index.js",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "type": "module",
+  "version": "0.1.6",
+  "description": "SolidJS renderer for OpenTUI",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sst/opentui",
+    "directory": "packages/solid"
+  },
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "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"
+    },
+    "./jsx-runtime": "./jsx-runtime.d.ts",
+    "./jsx-dev-runtime": "./jsx-runtime.d.ts"
+  },
+  "dependencies": {
+    "@opentui/core": "0.1.6"
+  },
+  "devDependencies": {
+    "@types/babel__core": "^7.20.5",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "@babel/core": "^7.28.0",
+    "@babel/preset-typescript": "^7.27.1",
+    "babel-preset-solid": "^1.9.9",
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.9.9",
+    "typescript": "^5"
+  }
+}

package/scripts/preload.ts

@@ -0,0 +1,4 @@
+import solidTransformPlugin from "./solid-plugin";
+import { plugin, type BunPlugin } from "bun";
+
+plugin(solidTransformPlugin);

package/scripts/solid-plugin.ts

@@ -0,0 +1,58 @@
+import { transformAsync } from "@babel/core";
+// @ts-expect-error - Types not important.
+import ts from "@babel/preset-typescript";
+// @ts-expect-error - Types not important.
+import solid from "babel-preset-solid";
+import { type BunPlugin } from "bun";
+
+const solidTransformPlugin: BunPlugin = {
+  name: "bun-plugin-solid",
+  setup: (build) => {
+    // build.onLoad({ filter: /\.(js|ts)$/ }, async (args) => {
+    //   const { readFile } = await import("node:fs/promises");
+    //   const code = await readFile(args.path, "utf8");
+    //   const transforms = await transformAsync(code, {
+    //     filename: args.path,
+    //     // env: {
+    //     //   development: {
+    //     //     plugins: ["solid-refresh/babel"],
+    //     //   },
+    //     // },
+    //     presets: [[ts, {}]],
+    //   });
+    //   return {
+    //     contents: transforms.code,
+    //     loader: "js",
+    //   };
+    // });
+    build.onLoad({ filter: /\.(js|ts)x$/ }, async (args) => {
+      const { readFile } = await import("node:fs/promises");
+      const code = await readFile(args.path, "utf8");
+      const transforms = await transformAsync(code, {
+        filename: args.path,
+        // env: {
+        //   development: {
+        //     plugins: [["solid-refresh/babel", { "bundler": "esm" }]],
+        //   },
+        // },
+        // plugins: [["solid-refresh/babel", { bundler: "esm" }]],
+        presets: [
+          [
+            solid,
+            {
+              moduleName: "@opentui/solid/reconciler",
+              generate: "universal",
+            },
+          ],
+          [ts],
+        ],
+      });
+      return {
+        contents: transforms?.code ?? "",
+        loader: "js",
+      };
+    });
+  },
+};
+
+export default solidTransformPlugin;

package/src/elements/hooks.d.ts

@@ -0,0 +1,16 @@
+import { Selection, Timeline, type AnimationOptions, type CliRenderer, type JSAnimation, type ParsedKey, type TimelineOptions } from "@opentui/core";
+export declare const RendererContext: import("solid-js").Context<CliRenderer | undefined>;
+export declare const useRenderer: () => CliRenderer;
+export declare const onResize: (callback: (width: number, height: number) => void) => void;
+export declare const useTerminalDimensions: () => import("solid-js").Accessor<{
+    width: number;
+    height: number;
+}>;
+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;
+export declare const useTimeline: <T extends Record<string, number>>(timeline: Timeline, initialValue: T, targetValue: T, options: AnimationOptions & {
+    onUpdate?: (values: JSAnimation & {
+        targets: T[];
+    }) => void;
+}, startTime?: number | string) => import("solid-js").Accessor<T>;

package/src/elements/index.d.ts

@@ -0,0 +1,55 @@
+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";
+export * from "./hooks";
+export declare const elements: {
+    ascii_font: typeof ASCIIFontRenderable;
+    box: typeof BoxRenderable;
+    group: typeof GroupRenderable;
+    input: typeof InputRenderable;
+    select: typeof SelectRenderable;
+    tab_select: typeof TabSelectRenderable;
+    text: typeof TextRenderable;
+};
+export type Element = keyof typeof elements;
+type RenderableNonStyleKeys = "buffered";
+type ElementProps<T extends RenderableOptions, K extends Renderable = Renderable, NonStyleKeys extends keyof T = RenderableNonStyleKeys> = {
+    style?: Omit<T, NonStyleKeys | RenderableNonStyleKeys>;
+    ref?: Ref<K>;
+} & T;
+type ContianerProps = {
+    children?: JSX.Element;
+};
+export type BoxElementProps = ElementProps<BoxOptions, BoxRenderable, "title"> & ContianerProps;
+export type BoxStyle = BoxElementProps["style"];
+export type GroupElementProps = ElementProps<RenderableOptions, GroupRenderable> & ContianerProps;
+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"];

package/src/reconciler.d.ts

@@ -0,0 +1,11 @@
+import { Renderable, type TextChunk } from "@opentui/core";
+declare class TextNode {
+    id: string;
+    chunk: TextChunk;
+    parent?: Renderable;
+    constructor(chunk: TextChunk);
+}
+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 {};

package/src/reconciler.js

@@ -0,0 +1,403 @@
+// @bun
+// src/reconciler.ts
+import {
+  GroupRenderable as GroupRenderable2,
+  InputRenderable as InputRenderable2,
+  InputRenderableEvents,
+  Renderable,
+  SelectRenderable as SelectRenderable2,
+  SelectRenderableEvents,
+  StyledText,
+  TabSelectRenderable as TabSelectRenderable2,
+  TabSelectRenderableEvents,
+  TextRenderable as TextRenderable2
+} 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/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/reconciler.ts
+class TextNode {
+  id;
+  chunk;
+  parent;
+  constructor(chunk) {
+    this.id = getNextId("text-node");
+    this.chunk = chunk;
+  }
+}
+var ChunkToTextNodeMap = new WeakMap;
+var log = (...args) => {
+  console.log("[Reconciler]", ...args);
+};
+function _insertNode(parent, node, anchor) {
+  log("Inserting node:", node.id, "into parent:", parent.id, "with anchor:", anchor?.id);
+  if (node instanceof TextNode) {
+    if (!(parent instanceof TextRenderable2)) {
+      console.warn(`Cannot insert text:"${node.chunk.plainText}" unless wrapped with a <text> element.`);
+      const ghostNode = new GroupRenderable2(getNextId("ghost-group"), {});
+      ghostNode.getLayoutNode().yogaNode.setDisplay(2);
+      if (parent instanceof Renderable) {
+        parent.add(ghostNode);
+      }
+      return;
+    }
+    const styledText = parent.content;
+    if (anchor && anchor instanceof TextNode) {
+      const anchorIndex = styledText.chunks.indexOf(anchor.chunk);
+      if (anchorIndex == -1) {
+        console.log("anchor not found");
+        return;
+      }
+      styledText.insert(node.chunk, anchorIndex);
+    } else {
+      const firstChunk = parent.content.chunks[0];
+      if (firstChunk && !ChunkToTextNodeMap.has(firstChunk)) {
+        styledText.replace(node.chunk, firstChunk);
+      } else {
+        styledText.insert(node.chunk);
+      }
+    }
+    parent.content = styledText;
+    node.parent = parent;
+    return;
+  }
+  if (!(parent instanceof Renderable)) {
+    return;
+  }
+  if (anchor) {
+    const anchorIndex = parent.getChildren().findIndex((el) => 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 (parent instanceof TextRenderable2 && node instanceof TextNode) {
+    ChunkToTextNodeMap.delete(node.chunk);
+    const styledText = parent.content;
+    styledText.remove(node.chunk);
+    parent.content = styledText;
+  } else if (parent instanceof Renderable && node instanceof Renderable) {
+    node.destroyRecursively();
+    parent.remove(node.id);
+  }
+}
+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 element = new elements[tagName](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);
+    ChunkToTextNodeMap.set(chunk, textNode);
+    return textNode;
+  },
+  replaceText(textNode, value) {
+    log("Replacing text:", value, "in node:", textNode.id);
+    if (textNode instanceof Renderable)
+      return;
+    const newChunk = {
+      __isChunk: true,
+      text: new TextEncoder().encode(value),
+      plainText: value
+    };
+    const parent = textNode.parent;
+    if (!parent) {
+      log("No parent found for text node:", textNode.id);
+      return;
+    }
+    if (parent instanceof TextRenderable2) {
+      const styledText = parent.content;
+      styledText.replace(newChunk, textNode.chunk);
+      parent.content = styledText;
+      textNode.chunk = newChunk;
+      ChunkToTextNodeMap.set(newChunk, textNode);
+    }
+  },
+  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 TextRenderable2) {
+      const chunk = node.content.chunks[0];
+      if (chunk) {
+        return ChunkToTextNodeMap.get(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 TextRenderable2) {
+        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 ChunkToTextNodeMap.get(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 = ChunkToTextNodeMap.get(current);
+      if (node) {
+        _removeNode(parent, node);
+      }
+    } else if (current instanceof StyledText) {
+      for (const chunk of current.chunks) {
+        const chunkNode = ChunkToTextNodeMap.get(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
+};

package/src/utils/id-counter.d.ts

@@ -0,0 +1 @@
+export declare function getNextId(elementType: string): string;