@opentui/solid 0.1.24 → 0.1.26

package/dist/index.d.ts

@@ -1,10 +1,11 @@
-export function useTimeline(timeline: any, initialValue: any, targetValue: any, options: any, startTime?: number): import("solid-js").Accessor<any>;
+export function useTimeline(options?: {}): Timeline;
 export function useTerminalDimensions(): import("solid-js").Accessor<{
     width: any;
     height: any;
 }>;
 export function useSelectionHandler(callback: any): void;
 export function useRenderer(): any;
+export function usePaste(callback: any): void;
 export function useKeyboard(callback: any): void;
 export function useKeyHandler(callback: any): void;
 export function use(fn: any, element: any, arg: any): any;
@@ -15,6 +16,7 @@ export function testRender(node: any, renderConfig?: {}): Promise<{
     mockMouse: import("@opentui/core/testing").MockMouse;
     renderOnce: () => Promise<void>;
     captureCharFrame: () => string;
+    resize: (width: number, height: number) => void;
 }>;
 export function spread(node: any, accessor: any, skipChildren: any): void;
 export function setProp(node: any, name: any, value: any, prev: any): any;
@@ -32,6 +34,7 @@ export function getComponentCatalogue(): {
     ascii_font: typeof ASCIIFontRenderable;
     tab_select: typeof TabSelectRenderable2;
     scrollbox: typeof ScrollBoxRenderable;
+    code: typeof CodeRenderable;
     span: typeof SpanRenderable;
     strong: typeof BoldSpanRenderable;
     b: typeof BoldSpanRenderable;
@@ -46,7 +49,6 @@ export var createTextNode: any;
 export function createSlotNode(): SlotRenderable;
 export var createElement: any;
 export function createDynamic(component: any, props: any): import("solid-js").Accessor<any>;
-export function createComponentTimeline(options?: {}): Timeline;
 declare var createComponent2: typeof createComponent;
 export namespace componentCatalogue {
     export { BoxRenderable as box };
@@ -56,6 +58,7 @@ export namespace componentCatalogue {
     export { ASCIIFontRenderable as ascii_font };
     export { TabSelectRenderable2 as tab_select };
     export { ScrollBoxRenderable as scrollbox };
+    export { CodeRenderable as code };
     export { SpanRenderable as span };
     export { BoldSpanRenderable as strong };
     export { BoldSpanRenderable as b };
@@ -102,6 +105,7 @@ export function Dynamic(props: any): import("solid-js").Accessor<any>;
 export class BoldSpanRenderable extends TextModifierRenderable {
     constructor(options: any);
 }
+import { Timeline } from "@opentui/core";
 import { mergeProps } from "solid-js";
 import { BoxRenderable } from "@opentui/core";
 import { TextRenderable as TextRenderable3 } from "@opentui/core";
@@ -110,12 +114,12 @@ import { SelectRenderable as SelectRenderable2 } from "@opentui/core";
 import { ASCIIFontRenderable } from "@opentui/core";
 import { TabSelectRenderable as TabSelectRenderable2 } from "@opentui/core";
 import { ScrollBoxRenderable } from "@opentui/core";
+import { CodeRenderable } from "@opentui/core";
 declare class SpanRenderable extends TextNodeRenderable3 {
     constructor(_ctx: any, options: any);
     _ctx: any;
 }
 import { createRenderEffect } from "solid-js";
-import { Timeline } from "@opentui/core";
 import { createComponent } from "solid-js";
 declare class TextModifierRenderable extends SpanRenderable {
 }
@@ -126,6 +130,7 @@ declare class SlotBaseRenderable extends BaseRenderable {
     remove(id: any): void;
     insertBefore(obj: any, anchor: any): void;
     getRenderable(id: any): void;
+    findDescendantById(id: any): void;
 }
 import { Yoga } from "@opentui/core";
 import { BaseRenderable } from "@opentui/core";

package/index.d.ts

@@ -8,6 +8,7 @@ export declare const testRender: (node: () => JSX.Element, renderConfig?: TestRe
     mockMouse: import("@opentui/core/testing").MockMouse;
     renderOnce: () => Promise<void>;
     captureCharFrame: () => string;
+    resize: (width: number, height: number) => void;
 }>;
 export * from "./src/reconciler";
 export * from "./src/elements";

package/index.js

@@ -1,12 +1,13 @@
 // @bun
 // index.ts
-import { createCliRenderer } from "@opentui/core";
+import { createCliRenderer, engine as engine2 } from "@opentui/core";
 import { createTestRenderer } from "@opentui/core/testing";
 
 // src/elements/index.ts
 import {
   ASCIIFontRenderable,
   BoxRenderable,
+  CodeRenderable,
   InputRenderable as InputRenderable2,
   ScrollBoxRenderable,
   SelectRenderable as SelectRenderable2,
@@ -18,7 +19,7 @@ import {
 
 // src/elements/hooks.ts
 import {
-  getKeyHandler,
+  engine,
   Timeline
 } from "@opentui/core";
 import { createContext, createSignal, onCleanup, onMount, useContext } from "solid-js";
@@ -49,7 +50,8 @@ var useTerminalDimensions = () => {
   return terminalDimensions;
 };
 var useKeyboard = (callback) => {
-  const keyHandler = getKeyHandler();
+  const renderer = useRenderer();
+  const keyHandler = renderer.keyInput;
   onMount(() => {
     keyHandler.on("keypress", callback);
   });
@@ -57,6 +59,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();
@@ -67,35 +79,20 @@ var useSelectionHandler = (callback) => {
     renderer.off("selection", callback);
   });
 };
-var createComponentTimeline = (options = {}) => {
-  const renderer = useRenderer();
+var useTimeline = (options = {}) => {
   const timeline = new Timeline(options);
-  const frameCallback = async (dt) => timeline.update(dt);
   onMount(() => {
     if (options.autoplay !== false) {
       timeline.play();
     }
-    renderer.setFrameCallback(frameCallback);
+    engine.register(timeline);
   });
   onCleanup(() => {
-    renderer.removeFrameCallback(frameCallback);
     timeline.pause();
+    engine.unregister(timeline);
   });
   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/extras.ts
 import { createEffect, createMemo as createMemo2, getOwner, onCleanup as onCleanup2, runWithOwner, splitProps, untrack as untrack2 } from "solid-js";
 
@@ -297,7 +294,7 @@ function createRenderer({
       while (removed = getFirstChild(parent))
         removeNode(parent, removed);
       replacement && insertNode(parent, replacement);
-      return "";
+      return replacement;
     }
     const node = replacement || createSlotNode();
     if (current.length) {
@@ -428,6 +425,7 @@ var getNodeChildren = (node) => {
 function _insertNode(parent, node, anchor) {
   log("Inserting node:", logId(node), "into parent:", logId(parent), "with anchor:", logId(anchor), node instanceof TextNode);
   if (node instanceof SlotRenderable) {
+    node.parent = parent;
     node = node.getSlotChild(parent);
   }
   if (anchor && anchor instanceof SlotRenderable) {
@@ -456,6 +454,7 @@ function _insertNode(parent, node, anchor) {
 function _removeNode(parent, node) {
   log("Removing node:", logId(node), "from parent:", logId(parent));
   if (node instanceof SlotRenderable) {
+    node.parent = null;
     node = node.getSlotChild(parent);
   }
   if (isTextNodeRenderable(parent)) {
@@ -553,6 +552,10 @@ var {
       return;
     }
     switch (name) {
+      case "id":
+        log("Id mapped", node.id, "=", value);
+        node[name] = value;
+        break;
       case "focused":
         if (!(node instanceof Renderable))
           return;
@@ -656,7 +659,7 @@ var {
       log("No parent found for node:", logId(node));
       return;
     }
-    const siblings = getNodeChildren(node);
+    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));
@@ -740,6 +743,9 @@ class SlotBaseRenderable extends BaseRenderable2 {
     return 0;
   }
   requestRender() {}
+  findDescendantById(id) {
+    return;
+  }
 }
 
 class TextSlotRenderable extends TextNodeRenderable2 {
@@ -880,6 +886,7 @@ var baseComponents = {
   ascii_font: ASCIIFontRenderable,
   tab_select: TabSelectRenderable2,
   scrollbox: ScrollBoxRenderable,
+  code: CodeRenderable,
   span: SpanRenderable,
   strong: BoldSpanRenderable,
   b: BoldSpanRenderable,
@@ -899,6 +906,7 @@ function getComponentCatalogue() {
 // index.ts
 var render = async (node, renderConfig = {}) => {
   const renderer = await createCliRenderer(renderConfig);
+  engine2.attach(renderer);
   _render(() => createComponent2(RendererContext.Provider, {
     get value() {
       return renderer;
@@ -910,6 +918,7 @@ var render = async (node, renderConfig = {}) => {
 };
 var testRender = async (node, renderConfig = {}) => {
   const testSetup = await createTestRenderer(renderConfig);
+  engine2.attach(testSetup.renderer);
   _render(() => createComponent2(RendererContext.Provider, {
     get value() {
       return testSetup.renderer;
@@ -925,6 +934,7 @@ export {
   useTerminalDimensions,
   useSelectionHandler,
   useRenderer,
+  usePaste,
   useKeyboard,
   useKeyHandler,
   use,
@@ -945,7 +955,6 @@ export {
   createSlotNode,
   createElement,
   createDynamic,
-  createComponentTimeline,
   createComponent2 as createComponent,
   componentCatalogue,
   baseComponents,

package/jsx-runtime.d.ts

@@ -2,6 +2,7 @@ import { Renderable } from "@opentui/core"
 import type {
   AsciiFontProps,
   BoxProps,
+  CodeProps,
   ExtendedIntrinsicElements,
   InputProps,
   OpenTUIComponents,
@@ -28,6 +29,7 @@ declare namespace JSX {
     ascii_font: AsciiFontProps
     tab_select: TabSelectProps
     scrollbox: ScrollBoxProps
+    code: CodeProps
 
     b: SpanProps
     strong: SpanProps

package/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "types": "index.d.ts",
   "type": "module",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "description": "SolidJS renderer for OpenTUI",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
   "dependencies": {
     "@babel/core": "7.28.0",
     "@babel/preset-typescript": "7.27.1",
-    "@opentui/core": "0.1.24",
+    "@opentui/core": "0.1.26",
     "babel-plugin-module-resolver": "5.0.2",
     "babel-preset-solid": "1.9.9",
     "s-js": "^0.4.9"

package/src/elements/hooks.d.ts

@@ -1,4 +1,4 @@
-import { Selection, Timeline, type AnimationOptions, type CliRenderer, type JSAnimation, type ParsedKey, type TimelineOptions } from "@opentui/core";
+import { PasteEvent, Selection, Timeline, type CliRenderer, type KeyEvent, 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;
@@ -6,15 +6,11 @@ export declare const useTerminalDimensions: () => import("solid-js").Accessor<{
     width: number;
     height: number;
 }>;
-export declare const useKeyboard: (callback: (key: ParsedKey) => void) => void;
+export declare const useKeyboard: (callback: (key: KeyEvent) => void) => void;
+export declare const usePaste: (callback: (event: PasteEvent) => void) => void;
 /**
  * @deprecated renamed to useKeyboard
  */
-export declare const useKeyHandler: (callback: (key: ParsedKey) => void) => void;
+export declare const useKeyHandler: (callback: (key: KeyEvent) => 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>;
+export declare const useTimeline: (options?: TimelineOptions) => Timeline;

package/src/elements/index.d.ts

@@ -1,4 +1,4 @@
-import { ASCIIFontRenderable, BoxRenderable, InputRenderable, ScrollBoxRenderable, SelectRenderable, TabSelectRenderable, TextNodeRenderable, TextRenderable, type RenderContext, type TextNodeOptions } from "@opentui/core";
+import { ASCIIFontRenderable, BoxRenderable, CodeRenderable, InputRenderable, ScrollBoxRenderable, SelectRenderable, TabSelectRenderable, TextNodeRenderable, TextRenderable, type RenderContext, type TextNodeOptions } from "@opentui/core";
 import type { RenderableConstructor } from "../types/elements";
 export * from "./hooks";
 export * from "./extras";
@@ -33,6 +33,7 @@ export declare const baseComponents: {
     ascii_font: typeof ASCIIFontRenderable;
     tab_select: typeof TabSelectRenderable;
     scrollbox: typeof ScrollBoxRenderable;
+    code: typeof CodeRenderable;
     span: typeof SpanRenderable;
     strong: typeof BoldSpanRenderable;
     b: typeof BoldSpanRenderable;

package/src/elements/slot.d.ts

@@ -8,6 +8,7 @@ declare class SlotBaseRenderable extends BaseRenderable {
     getRenderable(id: string): BaseRenderable | undefined;
     getChildrenCount(): number;
     requestRender(): void;
+    findDescendantById(id: string): BaseRenderable | undefined;
 }
 export declare class TextSlotRenderable extends TextNodeRenderable {
     protected slotParent?: SlotRenderable;

package/src/types/elements.d.ts

@@ -1,4 +1,4 @@
-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 { ASCIIFontOptions, ASCIIFontRenderable, BaseRenderable, BoxOptions, BoxRenderable, CodeOptions, CodeRenderable, 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 */
@@ -14,7 +14,7 @@ type ExtractRenderableOptions<TConstructor> = TConstructor extends new (ctx: Ren
 /** 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;
+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" : TConstructor extends RenderableConstructor<CodeRenderable> ? NonStyledProps | "content" | "filetype" | "syntaxStyle" | "treeSitterClient" : NonStyledProps;
 /** Base props for container components that accept children */
 type ContainerProps<TOptions> = TOptions & {
     children?: JSX.Element;
@@ -54,6 +54,7 @@ export type ScrollBoxProps = ComponentProps<ContainerProps<ScrollBoxOptions>, Sc
     stickyScroll?: boolean;
     stickyStart?: "bottom" | "top" | "left" | "right";
 };
+export type CodeProps = ComponentProps<CodeOptions, CodeRenderable>;
 /** Convert renderable constructor to component props with proper style exclusions */
 export type ExtendedComponentProps<TConstructor extends RenderableConstructor, TOptions = ExtractRenderableOptions<TConstructor>> = TOptions & {
     children?: JSX.Element;