@opentui/solid 0.0.0-20250908-4906ddad → 0.0.0-20250915-f5db043a

package/dist/index.d.ts

@@ -0,0 +1,88 @@
+export function useTimeline(timeline: any, initialValue: any, targetValue: any, options: any, startTime?: number): import("solid-js").Accessor<any>;
+export function useTerminalDimensions(): import("solid-js").Accessor<{
+    width: any;
+    height: any;
+}>;
+export function useSelectionHandler(callback: any): void;
+export function useRenderer(): any;
+export function useKeyboard(callback: any): void;
+export function useKeyHandler(callback: any): void;
+export var use: <A, T>(fn: (element: any, arg: A) => T, element: any, arg: A) => T;
+export var textNodeKeys: string[];
+export var spread: <T>(node: any, accessor: (() => T) | T, skipChildren?: boolean) => void;
+export var setProp: <T>(node: any, name: string, value: T, prev?: T | undefined) => T;
+export function render(node: any, renderConfig?: {}): Promise<void>;
+export function onResize(callback: any): void;
+export var mergeProps: (...sources: unknown[]) => unknown;
+export var memo: <T>(fn: () => T, equal: boolean) => () => T;
+export var insertNode: (parent: any, node: any, anchor?: any) => void;
+export var insert: <T>(parent: any, accessor: T | (() => T), marker?: any | null, initial?: any) => any;
+export function getComponentCatalogue(): {
+    box: typeof BoxRenderable;
+    text: typeof TextRenderable;
+    input: typeof InputRenderable;
+    select: typeof SelectRenderable;
+    ascii_font: typeof ASCIIFontRenderable;
+    tab_select: typeof TabSelectRenderable;
+    scrollbox: typeof ScrollBoxRenderable;
+    span: typeof SpanRenderable;
+    strong: typeof BoldSpanRenderable;
+    b: typeof BoldSpanRenderable;
+    em: typeof ItalicSpanRenderable;
+    i: typeof ItalicSpanRenderable;
+    u: typeof UnderlineSpanRenderable;
+    br: typeof LineBreakRenderable;
+};
+export function extend(objects: any): void;
+export var effect: <T>(fn: (prev?: T) => T, init?: T) => void;
+export var createTextNode: (value: string) => any;
+export var createElement: (tag: string) => any;
+export function createComponentTimeline(options?: {}): Timeline;
+export var createComponent: <T>(Comp: (props: T) => any, props: T) => any;
+export namespace componentCatalogue {
+    export { BoxRenderable as box };
+    export { TextRenderable as text };
+    export { InputRenderable as input };
+    export { SelectRenderable as select };
+    export { ASCIIFontRenderable as ascii_font };
+    export { TabSelectRenderable as tab_select };
+    export { ScrollBoxRenderable as scrollbox };
+    export { SpanRenderable as span };
+    export { BoldSpanRenderable as strong };
+    export { BoldSpanRenderable as b };
+    export { ItalicSpanRenderable as em };
+    export { ItalicSpanRenderable as i };
+    export { UnderlineSpanRenderable as u };
+    export { LineBreakRenderable as br };
+}
+export namespace baseComponents { }
+export var _render: (code: () => any, node: any) => () => void;
+export class UnderlineSpanRenderable extends TextModifierRenderable {
+    constructor(options: any);
+}
+export var RendererContext: import("solid-js").Context<any>;
+export class LineBreakRenderable extends SpanRenderable {
+    add(): number;
+}
+export class ItalicSpanRenderable extends TextModifierRenderable {
+    constructor(options: any);
+}
+export class BoldSpanRenderable extends TextModifierRenderable {
+    constructor(options: any);
+}
+import { BoxRenderable } from "@opentui/core";
+import { TextRenderable } from "@opentui/core";
+import { InputRenderable } from "@opentui/core";
+import { SelectRenderable } from "@opentui/core";
+import { ASCIIFontRenderable } from "@opentui/core";
+import { TabSelectRenderable } from "@opentui/core";
+import { ScrollBoxRenderable } from "@opentui/core";
+declare class SpanRenderable extends TextNodeRenderable {
+    constructor(_ctx: any, options: any);
+    _ctx: any;
+}
+import { Timeline } from "@opentui/core";
+declare class TextModifierRenderable extends SpanRenderable {
+}
+import { TextNodeRenderable } from "@opentui/core";
+export {};

package/index.js

@@ -10,6 +10,8 @@ import {
   ScrollBoxRenderable,
   SelectRenderable,
   TabSelectRenderable,
+  TextAttributes,
+  TextNodeRenderable,
   TextRenderable
 } from "@opentui/core";
 
@@ -95,6 +97,56 @@ var useTimeline = (timeline, initialValue, targetValue, options, startTime = 0)
 };
 
 // src/elements/index.ts
+class SpanRenderable extends TextNodeRenderable {
+  _ctx;
+  constructor(_ctx, options) {
+    super(options);
+    this._ctx = _ctx;
+  }
+}
+var textNodeKeys = ["span", "b", "strong", "i", "em", "u"];
+
+class TextModifierRenderable extends SpanRenderable {
+  constructor(options, modifier) {
+    super(null, options);
+    if (modifier === "b" || modifier === "strong") {
+      this.attributes = (this.attributes || 0) | TextAttributes.BOLD;
+    } else if (modifier === "i" || modifier === "em") {
+      this.attributes = (this.attributes || 0) | TextAttributes.ITALIC;
+    } else if (modifier === "u") {
+      this.attributes = (this.attributes || 0) | TextAttributes.UNDERLINE;
+    }
+  }
+}
+
+class BoldSpanRenderable extends TextModifierRenderable {
+  constructor(options) {
+    super(options, "b");
+  }
+}
+
+class ItalicSpanRenderable extends TextModifierRenderable {
+  constructor(options) {
+    super(options, "i");
+  }
+}
+
+class UnderlineSpanRenderable extends TextModifierRenderable {
+  constructor(options) {
+    super(options, "u");
+  }
+}
+
+class LineBreakRenderable extends SpanRenderable {
+  constructor(_ctx, options) {
+    super(null, options);
+    this.add();
+  }
+  add() {
+    return super.add(`
+`);
+  }
+}
 var baseComponents = {
   box: BoxRenderable,
   text: TextRenderable,
@@ -102,7 +154,14 @@ var baseComponents = {
   select: SelectRenderable,
   ascii_font: ASCIIFontRenderable,
   tab_select: TabSelectRenderable,
-  scrollbox: ScrollBoxRenderable
+  scrollbox: ScrollBoxRenderable,
+  span: SpanRenderable,
+  strong: BoldSpanRenderable,
+  b: BoldSpanRenderable,
+  em: ItalicSpanRenderable,
+  i: ItalicSpanRenderable,
+  u: UnderlineSpanRenderable,
+  br: LineBreakRenderable
 };
 var componentCatalogue = { ...baseComponents };
 function extend(objects) {
@@ -114,22 +173,24 @@ function getComponentCatalogue() {
 
 // src/reconciler.ts
 import {
+  BaseRenderable,
+  createTextAttributes,
   InputRenderable as InputRenderable2,
   InputRenderableEvents,
-  Renderable as Renderable2,
+  isTextNodeRenderable,
+  parseColor,
+  Renderable,
+  RootTextNodeRenderable,
   SelectRenderable as SelectRenderable2,
   SelectRenderableEvents,
-  StyledText,
   TabSelectRenderable as TabSelectRenderable2,
   TabSelectRenderableEvents,
-  TextRenderable as TextRenderable3
+  TextNodeRenderable as TextNodeRenderable2,
+  TextRenderable as TextRenderable2
 } 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) {
@@ -148,216 +209,76 @@ 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;
-  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
+class TextNode extends TextNodeRenderable2 {
+  static fromString(text, options = {}) {
+    const node = new TextNode(options);
+    node.add(text);
+    return node;
   }
 }
-
-// src/reconciler.ts
 var logId = (node) => {
   if (!node)
     return;
-  if (isTextChunk(node)) {
-    return node.plainText;
-  }
   return node.id;
 };
+var getNodeChildren = (node) => {
+  let children;
+  if (node instanceof TextRenderable2) {
+    children = node.getTextChildren();
+  } else {
+    children = node.getChildren();
+  }
+  return children;
+};
 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);
+  if (isTextNodeRenderable(node)) {
+    if (!(parent instanceof TextRenderable2) && !isTextNodeRenderable(parent)) {
+      log(`Text must have a <text> as a parent: ${parent.id} above ${node.id}`);
       return;
     }
   }
-  if (isTextChunk(node)) {
-    _insertNode(parent, _createTextNode(node), anchor);
+  if (!(parent instanceof BaseRenderable)) {
+    log("[INSERT]", "Tried to mount a non base renderable");
     return;
   }
-  if (node instanceof TextNode) {
-    return node.insert(parent, anchor);
-  }
-  if (!(parent instanceof Renderable2)) {
+  if (!anchor) {
+    parent.add(node);
     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);
+  const children = getNodeChildren(parent);
+  const anchorIndex = children.findIndex((el) => el.id === anchor.id);
+  if (anchorIndex === -1) {
+    log("[INSERT]", "Could not find anchor", logId(parent), logId(anchor), "[children]", ...children.map((c) => c.id));
   }
+  parent.add(node, anchorIndex);
 }
 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);
+  parent.remove(node.id);
+  process.nextTick(() => {
+    if (node instanceof Renderable && !node.parent) {
+      node.destroyRecursively();
+      return;
     }
-  }
-  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;
+  const id = getNextId("text-node");
+  if (typeof value === "number") {
+    value = value.toString();
+  }
+  return TextNode.fromString(value, { id });
+}
+function _getParentNode(childNode) {
+  log("Getting parent of node:", logId(childNode));
+  let parent = childNode.parent ?? undefined;
+  if (parent instanceof RootTextNodeRenderable) {
+    parent = parent.textParent ?? undefined;
+  }
+  return parent;
 }
 var {
   render: _render,
@@ -391,24 +312,11 @@ var {
   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));
+    if (!(textNode instanceof TextNode))
       return;
-    }
-    const newChunk = {
-      __isChunk: true,
-      text: new TextEncoder().encode(value),
-      plainText: value
-    };
-    textNode.replaceText(newChunk);
+    textNode.replace(value, 0);
   },
   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) {
@@ -419,8 +327,19 @@ var {
       }
       return;
     }
+    if (isTextNodeRenderable(node)) {
+      if (name !== "style") {
+        return;
+      }
+      node.attributes |= createTextAttributes(value);
+      node.fg = value.fg ? parseColor(value.fg) : node.fg;
+      node.bg = value.bg ? parseColor(value.bg) : node.bg;
+      return;
+    }
     switch (name) {
       case "focused":
+        if (!(node instanceof Renderable))
+          return;
         if (value) {
           node.focus();
         } else {
@@ -503,37 +422,10 @@ var {
   },
   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;
-  },
+  getParentNode: _getParentNode,
   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];
+    const firstChild = getNodeChildren(node)[0];
     if (!firstChild) {
       log("No first child found for node:", logId(node));
       return;
@@ -543,34 +435,12 @@ var {
   },
   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;
+    const parent = _getParentNode(node);
     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 siblings = getNodeChildren(node);
     const index = siblings.indexOf(node);
     if (index === -1 || index === siblings.length - 1) {
       log("No next sibling found for node:", logId(node));
@@ -606,6 +476,7 @@ export {
   useKeyboard,
   useKeyHandler,
   use,
+  textNodeKeys,
   spread,
   setProp,
   render,
@@ -624,5 +495,9 @@ export {
   componentCatalogue,
   baseComponents,
   _render,
-  RendererContext
+  UnderlineSpanRenderable,
+  RendererContext,
+  LineBreakRenderable,
+  ItalicSpanRenderable,
+  BoldSpanRenderable
 };

package/jsx-runtime.d.ts

@@ -5,24 +5,36 @@ import type {
   ExtendedIntrinsicElements,
   InputProps,
   OpenTUIComponents,
+  ScrollBoxProps,
   SelectProps,
+  SpanProps,
   TabSelectProps,
   TextProps,
 } from "./src/types/elements"
+import type { DomNode } from "./dist"
 
 declare namespace JSX {
   // Replace Node with Renderable
-  type Element = Renderable | ArrayElement | (string & {}) | number | boolean | null | undefined
+  type Element = DomNode | ArrayElement | string | number | boolean | null | undefined
 
-  interface ArrayElement extends Array<Element> {}
+  type ArrayElement = Array<Element>
 
   interface IntrinsicElements extends ExtendedIntrinsicElements<OpenTUIComponents> {
     box: BoxProps
     text: TextProps
+    span: SpanProps
     input: InputProps
     select: SelectProps
     ascii_font: AsciiFontProps
     tab_select: TabSelectProps
+    scrollbox: ScrollBoxProps
+
+    b: SpanProps
+    strong: SpanProps
+    i: SpanProps
+    em: SpanProps
+    u: SpanProps
+    br: {}
   }
 
   interface ElementChildrenAttribute {

package/package.json

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

package/scripts/solid-plugin.ts

@@ -14,6 +14,12 @@ const solidTransformPlugin: BunPlugin = {
       const code = await file.text()
       return { contents: code, loader: "js" }
     })
+    build.onLoad({ filter: /\/node_modules\/solid-js\/store\/dist\/server\.js$/ }, async (args) => {
+      const path = args.path.replace("server.js", "store.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()

package/src/elements/index.d.ts

@@ -1,6 +1,28 @@
-import { ASCIIFontRenderable, BoxRenderable, InputRenderable, ScrollBoxRenderable, SelectRenderable, TabSelectRenderable, TextRenderable } from "@opentui/core";
+import { ASCIIFontRenderable, BoxRenderable, InputRenderable, ScrollBoxRenderable, SelectRenderable, TabSelectRenderable, TextNodeRenderable, TextRenderable, type RenderContext, type TextNodeOptions } from "@opentui/core";
 import type { RenderableConstructor } from "../types/elements";
 export * from "./hooks";
+declare class SpanRenderable extends TextNodeRenderable {
+    private readonly _ctx;
+    constructor(_ctx: RenderContext | null, options: TextNodeOptions);
+}
+export declare const textNodeKeys: readonly ["span", "b", "strong", "i", "em", "u"];
+export type TextNodeKey = (typeof textNodeKeys)[number];
+declare class TextModifierRenderable extends SpanRenderable {
+    constructor(options: any, modifier?: TextNodeKey);
+}
+export declare class BoldSpanRenderable extends TextModifierRenderable {
+    constructor(options: any);
+}
+export declare class ItalicSpanRenderable extends TextModifierRenderable {
+    constructor(options: any);
+}
+export declare class UnderlineSpanRenderable extends TextModifierRenderable {
+    constructor(options: any);
+}
+export declare class LineBreakRenderable extends SpanRenderable {
+    constructor(_ctx: RenderContext | null, options: TextNodeOptions);
+    add(): number;
+}
 export declare const baseComponents: {
     box: typeof BoxRenderable;
     text: typeof TextRenderable;
@@ -9,6 +31,13 @@ export declare const baseComponents: {
     ascii_font: typeof ASCIIFontRenderable;
     tab_select: typeof TabSelectRenderable;
     scrollbox: typeof ScrollBoxRenderable;
+    span: typeof SpanRenderable;
+    strong: typeof BoldSpanRenderable;
+    b: typeof BoldSpanRenderable;
+    em: typeof ItalicSpanRenderable;
+    i: typeof ItalicSpanRenderable;
+    u: typeof UnderlineSpanRenderable;
+    br: typeof LineBreakRenderable;
 };
 type ComponentCatalogue = Record<string, RenderableConstructor>;
 export declare const componentCatalogue: ComponentCatalogue;

package/src/reconciler.d.ts

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

package/src/types/elements.d.ts

@@ -1,5 +1,6 @@
-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";
+import type { ASCIIFontOptions, ASCIIFontRenderable, BaseRenderable, BoxOptions, BoxRenderable, InputRenderable, InputRenderableOptions, RenderableOptions, RenderContext, ScrollBoxOptions, ScrollBoxRenderable, SelectOption, SelectRenderable, SelectRenderableOptions, TabSelectOption, TabSelectRenderable, TabSelectRenderableOptions, TextNodeRenderable, TextOptions, TextRenderable } from "@opentui/core";
+import type { Ref } from "solid-js";
+import type { JSX } from "../../jsx-runtime";
 /** 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 */
@@ -7,7 +8,7 @@ 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;
+export type RenderableConstructor<TRenderable extends BaseRenderable = BaseRenderable> = 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 */
@@ -19,13 +20,16 @@ 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 & {
+type ComponentProps<TOptions extends RenderableOptions<TRenderable>, TRenderable extends BaseRenderable> = 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;
+type TextChildren = string | number | boolean | null | undefined | JSX.Element;
 export type TextProps = ComponentProps<TextOptions, TextRenderable> & {
-    children?: TextChildren | StyledText | TextChunk | Array<TextChildren | StyledText | TextChunk>;
+    children?: TextChildren | Array<TextChildren>;
+};
+export type SpanProps = ComponentProps<{}, TextNodeRenderable> & {
+    children?: TextChildren | Array<TextChildren>;
 };
 export type BoxProps = ComponentProps<ContainerProps<BoxOptions>, BoxRenderable>;
 export type InputProps = ComponentProps<InputRenderableOptions, InputRenderable> & {
@@ -47,6 +51,8 @@ export type TabSelectProps = ComponentProps<TabSelectRenderableOptions, TabSelec
 };
 export type ScrollBoxProps = ComponentProps<ContainerProps<ScrollBoxOptions>, ScrollBoxRenderable> & {
     focused?: boolean;
+    stickyScroll?: boolean;
+    stickyStart?: "bottom" | "top" | "left" | "right";
 };
 /** Convert renderable constructor to component props with proper style exclusions */
 export type ExtendedComponentProps<TConstructor extends RenderableConstructor, TOptions = ExtractRenderableOptions<TConstructor>> = TOptions & {

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

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