@opentui/solid 0.1.23 → 0.1.25

package/index.js

@@ -1,21 +1,23 @@
 // @bun
 // index.ts
 import { createCliRenderer } from "@opentui/core";
+import { createTestRenderer } from "@opentui/core/testing";
 
 // src/elements/index.ts
 import {
   ASCIIFontRenderable,
   BoxRenderable,
-  InputRenderable,
+  InputRenderable as InputRenderable2,
   ScrollBoxRenderable,
-  SelectRenderable,
-  TabSelectRenderable,
-  TextRenderable
+  SelectRenderable as SelectRenderable2,
+  TabSelectRenderable as TabSelectRenderable2,
+  TextAttributes,
+  TextNodeRenderable as TextNodeRenderable3,
+  TextRenderable as TextRenderable3
 } from "@opentui/core";
 
 // src/elements/hooks.ts
 import {
-  getKeyHandler,
   Timeline
 } from "@opentui/core";
 import { createContext, createSignal, onCleanup, onMount, useContext } from "solid-js";
@@ -46,7 +48,8 @@ var useTerminalDimensions = () => {
   return terminalDimensions;
 };
 var useKeyboard = (callback) => {
-  const keyHandler = getKeyHandler();
+  const renderer = useRenderer();
+  const keyHandler = renderer.keyInput;
   onMount(() => {
     keyHandler.on("keypress", callback);
   });
@@ -54,6 +57,16 @@ var useKeyboard = (callback) => {
     keyHandler.off("keypress", callback);
   });
 };
+var usePaste = (callback) => {
+  const renderer = useRenderer();
+  const keyHandler = renderer.keyInput;
+  onMount(() => {
+    keyHandler.on("paste", callback);
+  });
+  onCleanup(() => {
+    keyHandler.off("paste", callback);
+  });
+};
 var useKeyHandler = useKeyboard;
 var useSelectionHandler = (callback) => {
   const renderer = useRenderer();
@@ -93,285 +106,421 @@ var useTimeline = (timeline, initialValue, targetValue, options, startTime = 0)
   }, 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/elements/extras.ts
+import { createEffect, createMemo as createMemo2, getOwner, onCleanup as onCleanup2, runWithOwner, splitProps, untrack as untrack2 } from "solid-js";
 
 // src/reconciler.ts
 import {
-  InputRenderable as InputRenderable2,
+  BaseRenderable,
+  createTextAttributes,
+  InputRenderable,
   InputRenderableEvents,
-  Renderable as Renderable2,
-  SelectRenderable as SelectRenderable2,
+  isTextNodeRenderable,
+  parseColor,
+  Renderable,
+  RootTextNodeRenderable,
+  SelectRenderable,
   SelectRenderableEvents,
-  StyledText,
-  TabSelectRenderable as TabSelectRenderable2,
+  TabSelectRenderable,
   TabSelectRenderableEvents,
-  TextRenderable as TextRenderable3
+  TextNodeRenderable,
+  TextRenderable
 } 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);
+// src/renderer/universal.js
+import { createRoot, createRenderEffect, createMemo, createComponent, untrack, mergeProps } from "solid-js";
+var memo = (fn) => createMemo(() => fn());
+function createRenderer({
+  createElement,
+  createTextNode,
+  createSlotNode,
+  isTextNode,
+  replaceText,
+  insertNode,
+  removeNode,
+  setProperty,
+  getParentNode,
+  getFirstChild,
+  getNextSibling
+}) {
+  function insert(parent, accessor, marker, initial) {
+    if (marker !== undefined && !initial)
+      initial = [];
+    if (typeof accessor !== "function")
+      return insertExpression(parent, accessor, initial, marker);
+    createRenderEffect((current) => insertExpression(parent, accessor(), current, marker), initial);
   }
-  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);
+  function insertExpression(parent, value, current, marker, unwrapArray) {
+    while (typeof current === "function")
+      current = current();
+    if (value === current)
+      return current;
+    const t = typeof value, multi = marker !== undefined;
+    if (t === "string" || t === "number") {
+      if (t === "number")
+        value = value.toString();
+      if (multi) {
+        let node = current[0];
+        if (node && isTextNode(node)) {
+          replaceText(node, value);
+        } else
+          node = createTextNode(value);
+        current = cleanChildren(parent, current, marker, node);
+      } else {
+        if (current !== "" && typeof current === "string") {
+          replaceText(getFirstChild(parent), current = value);
+        } else {
+          cleanChildren(parent, current, marker, createTextNode(value));
+          current = value;
+        }
+      }
+    } else if (value == null || t === "boolean") {
+      current = cleanChildren(parent, current, marker);
+    } else if (t === "function") {
+      createRenderEffect(() => {
+        let v = value();
+        while (typeof v === "function")
+          v = v();
+        current = insertExpression(parent, v, current, marker);
+      });
+      return () => current;
+    } else if (Array.isArray(value)) {
+      const array = [];
+      if (normalizeIncomingArray(array, value, unwrapArray)) {
+        createRenderEffect(() => current = insertExpression(parent, array, current, marker, true));
+        return () => current;
+      }
+      if (array.length === 0) {
+        const replacement = cleanChildren(parent, current, marker);
+        if (multi)
+          return current = replacement;
+      } else {
+        if (Array.isArray(current)) {
+          if (current.length === 0) {
+            appendNodes(parent, array, marker);
+          } else
+            reconcileArrays(parent, current, array);
+        } else if (current == null || current === "") {
+          appendNodes(parent, array);
+        } else {
+          reconcileArrays(parent, multi && current || [getFirstChild(parent)], array);
+        }
+      }
+      current = array;
+    } else {
+      if (Array.isArray(current)) {
+        if (multi)
+          return current = cleanChildren(parent, current, marker, value);
+        cleanChildren(parent, current, null, value);
+      } else if (current == null || current === "" || !getFirstChild(parent)) {
+        insertNode(parent, value);
+      } else
+        replaceNode(parent, value, getFirstChild(parent));
+      current = value;
+    }
+    return current;
   }
-};
-
-// 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;
+  function normalizeIncomingArray(normalized, array, unwrap) {
+    let dynamic = false;
+    for (let i = 0, len = array.length;i < len; i++) {
+      let item = array[i], t;
+      if (item == null || item === true || item === false)
+        ;
+      else if (Array.isArray(item)) {
+        dynamic = normalizeIncomingArray(normalized, item) || dynamic;
+      } else if ((t = typeof item) === "string" || t === "number") {
+        normalized.push(createTextNode(item));
+      } else if (t === "function") {
+        if (unwrap) {
+          while (typeof item === "function")
+            item = item();
+          dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item]) || dynamic;
+        } else {
+          normalized.push(item);
+          dynamic = true;
+        }
+      } else
+        normalized.push(item);
     }
-    textParent.content = textParent.content.replace(newChunk, this.chunk);
-    this.chunk = newChunk;
-    ChunkToTextNodeMap.set(newChunk, this);
-  }
-  static getTextNodeFromChunk(chunk) {
-    return ChunkToTextNodeMap.get(chunk);
+    return dynamic;
   }
-  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);
+  function reconcileArrays(parentNode, a, b) {
+    let bLength = b.length, aEnd = a.length, bEnd = bLength, aStart = 0, bStart = 0, after = getNextSibling(a[aEnd - 1]), map = null;
+    while (aStart < aEnd || bStart < bEnd) {
+      if (a[aStart] === b[bStart]) {
+        aStart++;
+        bStart++;
+        continue;
       }
-      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);
+      while (a[aEnd - 1] === b[bEnd - 1]) {
+        aEnd--;
+        bEnd--;
       }
-    } else {
-      const firstChunk = textParent.content.chunks[0];
-      if (firstChunk && !ChunkToTextNodeMap.has(firstChunk)) {
-        styledText = styledText.replace(this.chunk, firstChunk);
+      if (aEnd === aStart) {
+        const node = bEnd < bLength ? bStart ? getNextSibling(b[bStart - 1]) : b[bEnd - bStart] : after;
+        while (bStart < bEnd)
+          insertNode(parentNode, b[bStart++], node);
+      } else if (bEnd === bStart) {
+        while (aStart < aEnd) {
+          if (!map || !map.has(a[aStart]))
+            removeNode(parentNode, a[aStart]);
+          aStart++;
+        }
+      } else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
+        const node = getNextSibling(a[--aEnd]);
+        insertNode(parentNode, b[bStart++], getNextSibling(a[aStart++]));
+        insertNode(parentNode, b[--bEnd], node);
+        a[aEnd] = b[bEnd];
       } else {
-        styledText = styledText.insert(this.chunk);
+        if (!map) {
+          map = new Map;
+          let i = bStart;
+          while (i < bEnd)
+            map.set(b[i], i++);
+        }
+        const index = map.get(a[aStart]);
+        if (index != null) {
+          if (bStart < index && index < bEnd) {
+            let i = aStart, sequence = 1, t;
+            while (++i < aEnd && i < bEnd) {
+              if ((t = map.get(a[i])) == null || t !== index + sequence)
+                break;
+              sequence++;
+            }
+            if (sequence > index - bStart) {
+              const node = a[aStart];
+              while (bStart < index)
+                insertNode(parentNode, b[bStart++], node);
+            } else
+              replaceNode(parentNode, b[bStart++], a[aStart++]);
+          } else
+            aStart++;
+        } else
+          removeNode(parentNode, a[aStart++]);
       }
     }
-    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();
-          }
-        });
+  function cleanChildren(parent, current, marker, replacement) {
+    if (marker === undefined) {
+      let removed;
+      while (removed = getFirstChild(parent))
+        removeNode(parent, removed);
+      replacement && insertNode(parent, replacement);
+      return replacement;
+    }
+    const node = replacement || createSlotNode();
+    if (current.length) {
+      let inserted = false;
+      for (let i = current.length - 1;i >= 0; i--) {
+        const el = current[i];
+        if (node !== el) {
+          const isParent = getParentNode(el) === parent;
+          if (!inserted && !i)
+            isParent ? replaceNode(parent, node, el) : insertNode(parent, node, marker);
+          else
+            isParent && removeNode(parent, el);
+        } else
+          inserted = true;
       }
-    }
+    } else
+      insertNode(parent, node, marker);
+    return [node];
   }
-  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;
+  function appendNodes(parent, array, marker) {
+    for (let i = 0, len = array.length;i < len; i++)
+      insertNode(parent, array[i], marker);
+  }
+  function replaceNode(parent, newNode, oldNode) {
+    insertNode(parent, newNode, oldNode);
+    removeNode(parent, oldNode);
+  }
+  function spreadExpression(node, props, prevProps = {}, skipChildren) {
+    props || (props = {});
+    if (!skipChildren) {
+      createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
+    }
+    createRenderEffect(() => props.ref && props.ref(node));
+    createRenderEffect(() => {
+      for (const prop in props) {
+        if (prop === "children" || prop === "ref")
+          continue;
+        const value = props[prop];
+        if (value === prevProps[prop])
+          continue;
+        setProperty(node, prop, value, prevProps[prop]);
+        prevProps[prop] = value;
       }
-    }
-    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;
+    return prevProps;
   }
+  return {
+    render(code, element) {
+      let disposer;
+      createRoot((dispose) => {
+        disposer = dispose;
+        insert(element, code());
+      });
+      return disposer;
+    },
+    insert,
+    spread(node, accessor, skipChildren) {
+      if (typeof accessor === "function") {
+        createRenderEffect((current) => spreadExpression(node, accessor(), current, skipChildren));
+      } else
+        spreadExpression(node, accessor, undefined, skipChildren);
+    },
+    createElement,
+    createTextNode,
+    insertNode,
+    setProp(node, name, value, prev) {
+      setProperty(node, name, value, prev);
+      return value;
+    },
+    mergeProps,
+    effect: createRenderEffect,
+    memo,
+    createComponent,
+    use(fn, element, arg) {
+      return untrack(() => fn(element, arg));
+    }
+  };
 }
 
-class GhostTextRenderable extends TextRenderable2 {
-  constructor(ctx, options) {
-    super(ctx, options);
-  }
-  static isGhostNode(node) {
-    return node instanceof GhostTextRenderable;
+// src/renderer/index.ts
+import { mergeProps as mergeProps2 } from "solid-js";
+function createRenderer2(options) {
+  const renderer = createRenderer(options);
+  renderer.mergeProps = mergeProps2;
+  return renderer;
+}
+
+// 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/reconciler.ts
+class TextNode extends TextNodeRenderable {
+  static fromString(text, options = {}) {
+    const node = new TextNode(options);
+    node.add(text);
+    return node;
+  }
+}
 var logId = (node) => {
   if (!node)
     return;
-  if (isTextChunk(node)) {
-    return node.text;
-  }
   return node.id;
 };
+var getNodeChildren = (node) => {
+  let children;
+  if (node instanceof TextRenderable) {
+    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);
-      return;
-    }
+  if (node instanceof SlotRenderable) {
+    node.parent = parent;
+    node = node.getSlotChild(parent);
   }
-  if (isTextChunk(node)) {
-    _insertNode(parent, _createTextNode(node), anchor);
-    return;
+  if (anchor && anchor instanceof SlotRenderable) {
+    anchor = anchor.getSlotChild(parent);
   }
-  if (node instanceof TextNode) {
-    return node.insert(parent, anchor);
+  if (isTextNodeRenderable(node)) {
+    if (!(parent instanceof TextRenderable) && !isTextNodeRenderable(parent)) {
+      throw new Error(`Orphan text error: "${node.toChunks().map((c) => c.text).join("")}" must have a <text> as a parent: ${parent.id} above ${node.id}`);
+    }
   }
-  if (!(parent instanceof Renderable2)) {
-    return;
+  if (!(parent instanceof BaseRenderable)) {
+    console.error("[INSERT]", "Tried to mount a non base renderable");
+    throw new Error("Tried to mount a non base renderable");
   }
-  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 {
+  if (!anchor) {
     parent.add(node);
+    return;
+  }
+  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);
-    }
+  if (node instanceof SlotRenderable) {
+    node.parent = null;
+    node = node.getSlotChild(parent);
   }
-  if (node instanceof TextNode) {
-    return node.remove(parent);
-  }
-  if (parent instanceof Renderable2 && node instanceof Renderable2) {
+  if (isTextNodeRenderable(parent)) {
+    if (typeof node !== "string" && !isTextNodeRenderable(node)) {
+      console.warn("Node not a valid child of TextNode");
+    } else {
+      parent.remove(node);
+    }
+  } else {
     parent.remove(node.id);
-    process.nextTick(() => {
-      if (!node.parent) {
-        node.destroyRecursively();
-      }
-    });
   }
+  process.nextTick(() => {
+    if (node instanceof BaseRenderable && !node.parent) {
+      node.destroyRecursively();
+      return;
+    }
+  });
 }
 function _createTextNode(value) {
   log("Creating text node:", value);
-  const chunk = value && isTextChunk(value) ? value : {
-    __isChunk: true,
-    text: `${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 createSlotNode() {
+  const id = getNextId("slot-node");
+  log("Creating slot node", id);
+  return new SlotRenderable(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,
   effect,
-  memo,
-  createComponent,
+  memo: memo2,
+  createComponent: createComponent2,
   createElement,
   createTextNode,
   insertNode,
   insert,
   spread,
   setProp,
-  mergeProps,
+  mergeProps: mergeProps3,
   use
-} = createRenderer({
+} = createRenderer2({
   createElement(tagName) {
     log("Creating element:", tagName);
     const id = getNextId(tagName);
@@ -388,25 +537,14 @@ var {
     return element;
   },
   createTextNode: _createTextNode,
+  createSlotNode,
   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: 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) {
@@ -417,8 +555,23 @@ 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 "id":
+        log("Id mapped", node.id, "=", value);
+        node[name] = value;
+        break;
       case "focused":
+        if (!(node instanceof Renderable))
+          return;
         if (value) {
           node.focus();
         } else {
@@ -427,11 +580,11 @@ var {
         break;
       case "onChange":
         let event = undefined;
-        if (node instanceof SelectRenderable2) {
+        if (node instanceof SelectRenderable) {
           event = SelectRenderableEvents.SELECTION_CHANGED;
-        } else if (node instanceof TabSelectRenderable2) {
+        } else if (node instanceof TabSelectRenderable) {
           event = TabSelectRenderableEvents.SELECTION_CHANGED;
-        } else if (node instanceof InputRenderable2) {
+        } else if (node instanceof InputRenderable) {
           event = InputRenderableEvents.CHANGE;
         }
         if (!event)
@@ -444,7 +597,7 @@ var {
         }
         break;
       case "onInput":
-        if (node instanceof InputRenderable2) {
+        if (node instanceof InputRenderable) {
           if (value) {
             node.on(InputRenderableEvents.INPUT, value);
           }
@@ -454,7 +607,7 @@ var {
         }
         break;
       case "onSubmit":
-        if (node instanceof InputRenderable2) {
+        if (node instanceof InputRenderable) {
           if (value) {
             node.on(InputRenderableEvents.ENTER, value);
           }
@@ -464,14 +617,14 @@ var {
         }
         break;
       case "onSelect":
-        if (node instanceof SelectRenderable2) {
+        if (node instanceof SelectRenderable) {
           if (value) {
             node.on(SelectRenderableEvents.ITEM_SELECTED, value);
           }
           if (prev) {
             node.off(SelectRenderableEvents.ITEM_SELECTED, prev);
           }
-        } else if (node instanceof TabSelectRenderable2) {
+        } else if (node instanceof TabSelectRenderable) {
           if (value) {
             node.on(TabSelectRenderableEvents.ITEM_SELECTED, value);
           }
@@ -501,37 +654,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;
@@ -541,34 +667,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(parent);
     const index = siblings.indexOf(node);
     if (index === -1 || index === siblings.length - 1) {
       log("No next sibling found for node:", logId(node));
@@ -584,43 +688,293 @@ var {
   }
 });
 
+// src/elements/extras.ts
+function Portal(props) {
+  const renderer = useRenderer();
+  const marker = createSlotNode(), mount = () => props.mount || renderer.root, owner = getOwner();
+  let content;
+  createEffect(() => {
+    content || (content = runWithOwner(owner, () => createMemo2(() => props.children)));
+    const el = mount();
+    const container = createElement("box"), renderRoot = container;
+    Object.defineProperty(container, "_$host", {
+      get() {
+        return marker.parent;
+      },
+      configurable: true
+    });
+    insert(renderRoot, content);
+    el.add(container);
+    props.ref && props.ref(container);
+    onCleanup2(() => el.remove(container.id));
+  }, undefined, { render: true });
+  return marker;
+}
+function createDynamic(component, props) {
+  const cached = createMemo2(component);
+  return createMemo2(() => {
+    const component2 = cached();
+    switch (typeof component2) {
+      case "function":
+        return untrack2(() => component2(props));
+      case "string":
+        const el = createElement(component2);
+        spread(el, props);
+        return el;
+      default:
+        break;
+    }
+  });
+}
+function Dynamic(props) {
+  const [, others] = splitProps(props, ["component"]);
+  return createDynamic(() => props.component, others);
+}
+// src/elements/slot.ts
+import { BaseRenderable as BaseRenderable2, isTextNodeRenderable as isTextNodeRenderable2, TextNodeRenderable as TextNodeRenderable2, TextRenderable as TextRenderable2, Yoga } from "@opentui/core";
+
+class SlotBaseRenderable extends BaseRenderable2 {
+  constructor(id) {
+    super({
+      id
+    });
+  }
+  add(obj, index) {
+    throw new Error("Can't add children on an Slot renderable");
+  }
+  getChildren() {
+    return [];
+  }
+  remove(id) {}
+  insertBefore(obj, anchor) {
+    throw new Error("Can't add children on an Slot renderable");
+  }
+  getRenderable(id) {
+    return;
+  }
+  getChildrenCount() {
+    return 0;
+  }
+  requestRender() {}
+}
+
+class TextSlotRenderable extends TextNodeRenderable2 {
+  slotParent;
+  destroyed = false;
+  constructor(id, parent) {
+    super({ id });
+    this._visible = false;
+    this.slotParent = parent;
+  }
+  destroy() {
+    if (this.destroyed) {
+      return;
+    }
+    this.destroyed = true;
+    this.slotParent?.destroy();
+    super.destroy();
+  }
+}
+
+class LayoutSlotRenderable extends SlotBaseRenderable {
+  yogaNode;
+  slotParent;
+  destroyed = false;
+  constructor(id, parent) {
+    super(id);
+    this._visible = false;
+    this.slotParent = parent;
+    this.yogaNode = Yoga.default.Node.create();
+    this.yogaNode.setDisplay(Yoga.Display.None);
+  }
+  getLayoutNode() {
+    return this.yogaNode;
+  }
+  updateFromLayout() {}
+  updateLayout() {}
+  onRemove() {}
+  destroy() {
+    if (this.destroyed) {
+      return;
+    }
+    this.destroyed = true;
+    super.destroy();
+    this.slotParent?.destroy();
+  }
+}
+
+class SlotRenderable extends SlotBaseRenderable {
+  layoutNode;
+  textNode;
+  destroyed = false;
+  constructor(id) {
+    super(id);
+    this._visible = false;
+  }
+  getSlotChild(parent) {
+    if (isTextNodeRenderable2(parent) || parent instanceof TextRenderable2) {
+      if (!this.textNode) {
+        this.textNode = new TextSlotRenderable(`slot-text-${this.id}`, this);
+      }
+      return this.textNode;
+    }
+    if (!this.layoutNode) {
+      this.layoutNode = new LayoutSlotRenderable(`slot-layout-${this.id}`, this);
+    }
+    return this.layoutNode;
+  }
+  destroy() {
+    if (this.destroyed) {
+      return;
+    }
+    this.destroyed = true;
+    if (this.layoutNode) {
+      this.layoutNode.destroy();
+    }
+    if (this.textNode) {
+      this.textNode.destroy();
+    }
+  }
+}
+
+// src/elements/index.ts
+class SpanRenderable extends TextNodeRenderable3 {
+  _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: TextRenderable3,
+  input: InputRenderable2,
+  select: SelectRenderable2,
+  ascii_font: ASCIIFontRenderable,
+  tab_select: TabSelectRenderable2,
+  scrollbox: ScrollBoxRenderable,
+  span: SpanRenderable,
+  strong: BoldSpanRenderable,
+  b: BoldSpanRenderable,
+  em: ItalicSpanRenderable,
+  i: ItalicSpanRenderable,
+  u: UnderlineSpanRenderable,
+  br: LineBreakRenderable
+};
+var componentCatalogue = { ...baseComponents };
+function extend(objects) {
+  Object.assign(componentCatalogue, objects);
+}
+function getComponentCatalogue() {
+  return componentCatalogue;
+}
+
 // index.ts
 var render = async (node, renderConfig = {}) => {
   const renderer = await createCliRenderer(renderConfig);
-  _render(() => createComponent(RendererContext.Provider, {
+  _render(() => createComponent2(RendererContext.Provider, {
     get value() {
       return renderer;
     },
     get children() {
-      return createComponent(node, {});
+      return createComponent2(node, {});
     }
   }), renderer.root);
 };
+var testRender = async (node, renderConfig = {}) => {
+  const testSetup = await createTestRenderer(renderConfig);
+  _render(() => createComponent2(RendererContext.Provider, {
+    get value() {
+      return testSetup.renderer;
+    },
+    get children() {
+      return createComponent2(node, {});
+    }
+  }), testSetup.renderer.root);
+  return testSetup;
+};
 export {
   useTimeline,
   useTerminalDimensions,
   useSelectionHandler,
   useRenderer,
+  usePaste,
   useKeyboard,
   useKeyHandler,
   use,
+  textNodeKeys,
+  testRender,
   spread,
   setProp,
   render,
   onResize,
-  mergeProps,
-  memo,
+  mergeProps3 as mergeProps,
+  memo2 as memo,
   insertNode,
   insert,
   getComponentCatalogue,
   extend,
   effect,
   createTextNode,
+  createSlotNode,
   createElement,
+  createDynamic,
   createComponentTimeline,
-  createComponent,
+  createComponent2 as createComponent,
   componentCatalogue,
   baseComponents,
   _render,
-  RendererContext
+  UnderlineSpanRenderable,
+  TextSlotRenderable,
+  SlotRenderable,
+  RendererContext,
+  Portal,
+  LineBreakRenderable,
+  LayoutSlotRenderable,
+  ItalicSpanRenderable,
+  Dynamic,
+  BoldSpanRenderable
 };