@opentui/solid 0.0.0-20250908-4906ddad

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,38 @@
+# @opentui/solid
+
+Solid.js support for [OpenTUI](https://github.com/sst/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 index.tsx`.

package/index.d.ts

@@ -0,0 +1,7 @@
+import { type CliRendererConfig } from "@opentui/core";
+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

@@ -0,0 +1,628 @@
+// @bun
+// index.ts
+import { createCliRenderer } from "@opentui/core";
+
+// src/elements/index.ts
+import {
+  ASCIIFontRenderable,
+  BoxRenderable,
+  InputRenderable,
+  ScrollBoxRenderable,
+  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.width, height: renderer.height });
+  const callback = (width, height) => {
+    setTerminalDimensions({ width, height });
+  };
+  onResize(callback);
+  return terminalDimensions;
+};
+var useKeyboard = (callback) => {
+  const keyHandler = getKeyHandler();
+  onMount(() => {
+    keyHandler.on("keypress", callback);
+  });
+  onCleanup(() => {
+    keyHandler.off("keypress", callback);
+  });
+};
+var useKeyHandler = useKeyboard;
+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 baseComponents = {
+  box: BoxRenderable,
+  text: TextRenderable,
+  input: InputRenderable,
+  select: SelectRenderable,
+  ascii_font: ASCIIFontRenderable,
+  tab_select: TabSelectRenderable,
+  scrollbox: ScrollBoxRenderable
+};
+var componentCatalogue = { ...baseComponents };
+function extend(objects) {
+  Object.assign(componentCatalogue, objects);
+}
+function getComponentCatalogue() {
+  return componentCatalogue;
+}
+
+// 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 { useContext as useContext2 } from "solid-js";
+import { createRenderer } from "solid-js/universal";
+
+// 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;
+var isTextChunk = (node) => {
+  return typeof node === "object" && "__isChunk" in node;
+};
+
+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) {
+      if (anchor instanceof Renderable) {
+        console.warn("text node can't be anchored to Renderable");
+        return;
+      } else if (isTextChunk(anchor)) {
+        anchor = ChunkToTextNodeMap.get(anchor);
+      }
+      const anchorIndex = anchor ? styledText.chunks.indexOf(anchor.chunk) : -1;
+      if (anchorIndex === -1) {
+        log("anchor not found");
+        styledText = styledText.insert(this.chunk);
+      } else {
+        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;
+    textParent.visible = textParent.textLength !== 0;
+    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);
+        process.nextTick(() => {
+          if (!this.textParent)
+            return;
+          if (!this.textParent.parent) {
+            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
+var logId = (node) => {
+  if (!node)
+    return;
+  if (isTextChunk(node)) {
+    return node.plainText;
+  }
+  return node.id;
+};
+function _insertNode(parent, node, anchor) {
+  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);
+  }
+  if (!(parent instanceof Renderable2)) {
+    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;
+      }
+      return el.id === anchor.id;
+    });
+    parent.add(node, anchorIndex);
+  } else {
+    parent.add(node);
+  }
+}
+function _removeNode(parent, node) {
+  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);
+  }
+  if (parent instanceof Renderable2 && node instanceof Renderable2) {
+    parent.remove(node.id);
+    process.nextTick(() => {
+      if (!node.parent) {
+        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,
+  memo,
+  createComponent,
+  createElement,
+  createTextNode,
+  insertNode,
+  insert,
+  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 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: _createTextNode,
+  replaceText(textNode, value) {
+    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),
+      plainText: value
+    };
+    textNode.replaceText(newChunk);
+  },
+  setProperty(node, name, value, prev) {
+    if (node instanceof TextNode || isTextChunk(node)) {
+      console.warn("Cannot set property on text node:", logId(node));
+      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(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:", logId(node));
+      return;
+    }
+    log("Parent found:", logId(parent), "for node:", logId(node));
+    return parent;
+  },
+  getFirstChild(node) {
+    log("Getting first child of node:", logId(node));
+    if (node instanceof TextRenderable3) {
+      const chunk = node.content.chunks[0];
+      if (chunk) {
+        return TextNode.getTextNodeFromChunk(chunk);
+      } else {
+        return;
+      }
+    }
+    if (node instanceof TextNode || isTextChunk(node)) {
+      return;
+    }
+    const firstChild = node.getChildren()[0];
+    if (!firstChild) {
+      log("No first child found for node:", logId(node));
+      return;
+    }
+    log("First child found:", logId(firstChild), "for node:", logId(node));
+    return firstChild;
+  },
+  getNextSibling(node) {
+    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:", logId(node));
+      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:", logId(node));
+          return;
+        }
+        const nextSibling2 = siblings2[index2 + 1];
+        if (!nextSibling2) {
+          log("Next sibling is null for node:", logId(node));
+          return;
+        }
+        return TextNode.getTextNodeFromChunk(nextSibling2);
+      }
+      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:", logId(node));
+      return;
+    }
+    const nextSibling = siblings[index + 1];
+    if (!nextSibling) {
+      log("Next sibling is null for node:", logId(node));
+      return;
+    }
+    log("Next sibling found:", logId(nextSibling), "for node:", logId(node));
+    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,
+  useKeyboard,
+  useKeyHandler,
+  use,
+  spread,
+  setProp,
+  render,
+  onResize,
+  mergeProps,
+  memo,
+  insertNode,
+  insert,
+  getComponentCatalogue,
+  extend,
+  effect,
+  createTextNode,
+  createElement,
+  createComponentTimeline,
+  createComponent,
+  componentCatalogue,
+  baseComponents,
+  _render,
+  RendererContext
+};

package/jsx-runtime.d.ts

@@ -0,0 +1,31 @@
+import { Renderable } from "@opentui/core"
+import type {
+  AsciiFontProps,
+  BoxProps,
+  ExtendedIntrinsicElements,
+  InputProps,
+  OpenTUIComponents,
+  SelectProps,
+  TabSelectProps,
+  TextProps,
+} from "./src/types/elements"
+
+declare namespace JSX {
+  // Replace Node with Renderable
+  type Element = Renderable | ArrayElement | (string & {}) | number | boolean | null | undefined
+
+  interface ArrayElement extends Array<Element> {}
+
+  interface IntrinsicElements extends ExtendedIntrinsicElements<OpenTUIComponents> {
+    box: BoxProps
+    text: TextProps
+    input: InputProps
+    select: SelectProps
+    ascii_font: AsciiFontProps
+    tab_select: TabSelectProps
+  }
+
+  interface ElementChildrenAttribute {
+    children: {}
+  }
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@opentui/solid",
+  "module": "index.js",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "type": "module",
+  "version": "0.0.0-20250908-4906ddad",
+  "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"
+    },
+    "./preload": {
+      "import": "./scripts/preload.ts"
+    },
+    "./jsx-runtime": "./jsx-runtime.d.ts",
+    "./jsx-dev-runtime": "./jsx-runtime.d.ts"
+  },
+  "dependencies": {
+    "@opentui/core": "0.0.0-20250908-4906ddad",
+    "babel-plugin-module-resolver": "5.0.2",
+    "@babel/core": "7.28.0",
+    "@babel/preset-typescript": "7.27.1",
+    "babel-preset-solid": "1.9.9"
+  },
+  "devDependencies": {
+    "@types/babel__core": "7.20.5",
+    "@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,47 @@
+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: /\/node_modules\/solid-js\/dist\/server\.js$/ }, async (args) => {
+      const path = args.path.replace("server.js", "solid.js")
+      const file = Bun.file(path)
+      const code = await file.text()
+      return { contents: code, loader: "js" }
+    })
+    build.onLoad({ filter: /\.(js|ts)x$/ }, async (args) => {
+      const file = Bun.file(args.path)
+      const code = await file.text()
+      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",
+              generate: "universal",
+            },
+          ],
+          [ts],
+        ],
+      })
+      return {
+        contents: transforms?.code ?? "",
+        loader: "js",
+      }
+    })
+  },
+}
+
+export default solidTransformPlugin

package/src/elements/hooks.d.ts

@@ -0,0 +1,20 @@
+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 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;
+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,29 @@
+import { ASCIIFontRenderable, BoxRenderable, InputRenderable, ScrollBoxRenderable, SelectRenderable, TabSelectRenderable, TextRenderable } from "@opentui/core";
+import type { RenderableConstructor } from "../types/elements";
+export * from "./hooks";
+export declare const baseComponents: {
+    box: typeof BoxRenderable;
+    text: typeof TextRenderable;
+    input: typeof InputRenderable;
+    select: typeof SelectRenderable;
+    ascii_font: typeof ASCIIFontRenderable;
+    tab_select: typeof TabSelectRenderable;
+    scrollbox: typeof ScrollBoxRenderable;
+};
+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

@@ -0,0 +1,48 @@
+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.
+ */
+export declare class TextNode {
+    id: string;
+    chunk: TextChunk;
+    parent?: Renderable;
+    textParent?: TextRenderable | GhostTextRenderable;
+    constructor(chunk: TextChunk);
+    /**
+     * Replaces the current text chunk with a new one.
+     * @param newChunk The new text chunk to replace with.
+     */
+    replaceText(newChunk: TextChunk): void;
+    /**
+     * Retrieves the TextNode associated with a given TextChunk.
+     * @param chunk The text chunk to look up.
+     * @returns The associated TextNode or undefined if not found.
+     */
+    static getTextNodeFromChunk(chunk: TextChunk): TextNode | undefined;
+    /**
+     * Inserts this text node into the DOM structure.
+     * @param parent The parent DOM node.
+     * @param anchor The anchor node for positioning.
+     */
+    insert(parent: DomNode, anchor?: DomNode): void;
+    /**
+     * Removes this text node from the DOM structure.
+     * @param parent The parent DOM node.
+     */
+    remove(parent: DomNode): void;
+    /**
+     * Gets or creates a ghost text node for rendering text content.
+     * @param parent The parent renderable.
+     * @param anchor The anchor node for positioning.
+     * @returns The text renderable ghost node.
+     * @private
+     */
+    private getOrCreateTextGhostNode;
+}
+declare class GhostTextRenderable extends TextRenderable {
+    constructor(ctx: RenderContext, options: TextOptions);
+    static isGhostNode(node: DomNode): node is GhostTextRenderable;
+}
+export {};

package/src/reconciler.d.ts

@@ -0,0 +1,4 @@
+import { Renderable, type TextChunk } from "@opentui/core";
+import { TextNode } from "./elements/text-node";
+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 {};

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

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

package/src/utils/log.d.ts

@@ -0,0 +1 @@
+export declare const log: (...args: any[]) => void;