@cascadetui/solid 0.1.1

package/jsx-runtime.d.ts

@@ -0,0 +1,51 @@
+import { Renderable } from "@cascadetui/core"
+import type {
+  AsciiFontProps,
+  BoxProps,
+  CodeProps,
+  ExtendedIntrinsicElements,
+  InputProps,
+  LinkProps,
+  MarkdownProps,
+  CascadeComponents,
+  ScrollBoxProps,
+  SelectProps,
+  SpanProps,
+  TabSelectProps,
+  TextareaProps,
+  TextProps,
+} from "./src/types/elements"
+import type { DomNode } from "./dist"
+
+declare namespace JSX {
+  // Replace Node with Renderable
+  type Element = DomNode | ArrayElement | string | number | boolean | null | undefined
+
+  type ArrayElement = Array<Element>
+
+  interface IntrinsicElements extends ExtendedIntrinsicElements<CascadeComponents> {
+    box: BoxProps
+    text: TextProps
+    span: SpanProps
+    input: InputProps
+    select: SelectProps
+    ascii_font: AsciiFontProps
+    tab_select: TabSelectProps
+    scrollbox: ScrollBoxProps
+    code: CodeProps
+    textarea: TextareaProps
+    markdown: MarkdownProps
+
+    b: SpanProps
+    strong: SpanProps
+    i: SpanProps
+    em: SpanProps
+    u: SpanProps
+    br: {}
+    a: LinkProps
+  }
+
+  interface ElementChildrenAttribute {
+    children: {}
+  }
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@cascadetui/solid",
+  "module": "index.js",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "type": "module",
+  "version": "0.1.1",
+  "description": "SolidJS renderer for Cascade",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kirosnn/cascade",
+    "directory": "packages/solid"
+  },
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "require": "./index.js"
+    },
+    "./preload": {
+      "import": "./scripts/preload.ts"
+    },
+    "./bun-plugin": {
+      "types": "./scripts/solid-plugin.d.ts",
+      "import": "./scripts/solid-plugin.ts"
+    },
+    "./jsx-runtime": "./jsx-runtime.d.ts",
+    "./jsx-dev-runtime": "./jsx-runtime.d.ts"
+  },
+  "dependencies": {
+    "@babel/core": "7.28.0",
+    "@babel/preset-typescript": "7.27.1",
+    "@cascadetui/core": "0.1.1",
+    "babel-plugin-module-resolver": "5.0.2",
+    "babel-preset-solid": "1.9.9",
+    "s-js": "^0.4.9"
+  },
+  "devDependencies": {
+    "@types/babel__core": "7.20.5",
+    "@types/bun": "latest",
+    "@types/node": "^24.0.0",
+    "typescript": "^5"
+  },
+  "peerDependencies": {
+    "solid-js": "1.9.9"
+  }
+}

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.d.ts

@@ -0,0 +1,3 @@
+import { type BunPlugin } from "bun";
+declare const solidTransformPlugin: BunPlugin;
+export default solidTransformPlugin;

package/scripts/solid-plugin.ts

@@ -0,0 +1,53 @@
+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: /[\\/]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()
+      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: "@cascadetui/solid",
+              generate: "universal",
+            },
+          ],
+          [ts],
+        ],
+      })
+      return {
+        contents: transforms?.code ?? "",
+        loader: "js",
+      }
+    })
+  },
+}
+
+export default solidTransformPlugin

package/src/elements/extras.d.ts

@@ -0,0 +1,41 @@
+import { type DomNode } from "../reconciler";
+import type { JSX } from "../../jsx-runtime";
+import type { ValidComponent, ComponentProps } from "solid-js";
+/**
+ * Renders components somewhere else in the DOM
+ *
+ * Useful for inserting modals and tooltips outside of an cropping layout. If no mount point is given, the portal is inserted on the root renderable; it is wrapped in a `<box>`
+ *
+ * @description https://docs.solidjs.com/reference/components/portal
+ */
+export declare function Portal(props: {
+    mount?: DomNode;
+    ref?: (el: {}) => void;
+    children: JSX.Element;
+}): DomNode;
+export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
+    [K in keyof P]: P[K];
+} & {
+    component: T | undefined;
+};
+/**
+ * Renders an arbitrary component or element with the given props
+ *
+ * This is a lower level version of the `Dynamic` component, useful for
+ * performance optimizations in libraries. Do not use this unless you know
+ * what you are doing.
+ * ```typescript
+ * const element = () => multiline() ? 'textarea' : 'input';
+ * createDynamic(element, { value: value() });
+ * ```
+ * @description https://docs.solidjs.com/reference/components/dynamic
+ */
+export declare function createDynamic<T extends ValidComponent>(component: () => T | undefined, props: ComponentProps<T>): JSX.Element;
+/**
+ * Renders an arbitrary custom or native component and passes the other props
+ * ```typescript
+ * <Dynamic component={multiline() ? 'textarea' : 'input'} value={value()} />
+ * ```
+ * @description https://docs.solidjs.com/reference/components/dynamic
+ */
+export declare function Dynamic<T extends ValidComponent>(props: DynamicProps<T>): JSX.Element;

package/src/elements/hooks.d.ts

@@ -0,0 +1,36 @@
+import { PasteEvent, Selection, Timeline, type CliRenderer, type KeyEvent, type TimelineOptions } from "@cascadetui/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 interface UseKeyboardOptions {
+    /** Include release events - callback receives events with eventType: "release" */
+    release?: boolean;
+}
+/**
+ * Subscribe to keyboard events.
+ *
+ * By default, only receives press events (including key repeats with `repeated: true`).
+ * Use `options.release` to also receive release events.
+ *
+ * @example
+ * // Basic press handling (includes repeats)
+ * useKeyboard((e) => console.log(e.name, e.repeated ? "(repeat)" : ""))
+ *
+ * // With release events
+ * useKeyboard((e) => {
+ *   if (e.eventType === "release") keys.delete(e.name)
+ *   else keys.add(e.name)
+ * }, { release: true })
+ */
+export declare const useKeyboard: (callback: (key: KeyEvent) => void, options?: UseKeyboardOptions) => void;
+export declare const usePaste: (callback: (event: PasteEvent) => void) => void;
+/**
+ * @deprecated renamed to useKeyboard
+ */
+export declare const useKeyHandler: (callback: (key: KeyEvent) => void, options?: UseKeyboardOptions) => void;
+export declare const useSelectionHandler: (callback: (selection: Selection) => void) => void;
+export declare const useTimeline: (options?: TimelineOptions) => Timeline;

package/src/elements/index.d.ts

@@ -0,0 +1,72 @@
+import { ASCIIFontRenderable, BoxRenderable, CodeRenderable, DiffRenderable, InputRenderable, LineNumberRenderable, MarkdownRenderable, ScrollBoxRenderable, SelectRenderable, TabSelectRenderable, TextareaRenderable, TextNodeRenderable, TextRenderable, type RenderContext, type TextNodeOptions } from "@cascadetui/core";
+import type { RenderableConstructor } from "../types/elements";
+export * from "./hooks";
+export * from "./extras";
+export * from "./slot";
+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", "a"];
+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 interface LinkOptions extends TextNodeOptions {
+    href: string;
+}
+export declare class LinkRenderable extends SpanRenderable {
+    constructor(_ctx: RenderContext | null, options: LinkOptions);
+}
+export declare const baseComponents: {
+    box: typeof BoxRenderable;
+    text: typeof TextRenderable;
+    input: typeof InputRenderable;
+    select: typeof SelectRenderable;
+    textarea: typeof TextareaRenderable;
+    ascii_font: typeof ASCIIFontRenderable;
+    tab_select: typeof TabSelectRenderable;
+    scrollbox: typeof ScrollBoxRenderable;
+    code: typeof CodeRenderable;
+    diff: typeof DiffRenderable;
+    line_number: typeof LineNumberRenderable;
+    markdown: typeof MarkdownRenderable;
+    span: typeof SpanRenderable;
+    strong: typeof BoldSpanRenderable;
+    b: typeof BoldSpanRenderable;
+    em: typeof ItalicSpanRenderable;
+    i: typeof ItalicSpanRenderable;
+    u: typeof UnderlineSpanRenderable;
+    br: typeof LineBreakRenderable;
+    a: typeof LinkRenderable;
+};
+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/slot.d.ts

@@ -0,0 +1,38 @@
+import { BaseRenderable, TextNodeRenderable, Yoga } from "@cascadetui/core";
+declare class SlotBaseRenderable extends BaseRenderable {
+    constructor(id: string);
+    add(obj: BaseRenderable | unknown, index?: number): number;
+    getChildren(): BaseRenderable[];
+    remove(id: string): void;
+    insertBefore(obj: BaseRenderable | unknown, anchor: BaseRenderable | unknown): void;
+    getRenderable(id: string): BaseRenderable | undefined;
+    getChildrenCount(): number;
+    requestRender(): void;
+    findDescendantById(id: string): BaseRenderable | undefined;
+}
+export declare class TextSlotRenderable extends TextNodeRenderable {
+    protected slotParent?: SlotRenderable;
+    protected destroyed: boolean;
+    constructor(id: string, parent?: SlotRenderable);
+    destroy(): void;
+}
+export declare class LayoutSlotRenderable extends SlotBaseRenderable {
+    protected yogaNode: Yoga.Node;
+    protected slotParent?: SlotRenderable;
+    protected destroyed: boolean;
+    constructor(id: string, parent?: SlotRenderable);
+    getLayoutNode(): Yoga.Node;
+    updateFromLayout(): void;
+    updateLayout(): void;
+    onRemove(): void;
+    destroy(): void;
+}
+export declare class SlotRenderable extends SlotBaseRenderable {
+    layoutNode?: LayoutSlotRenderable;
+    textNode?: TextSlotRenderable;
+    protected destroyed: boolean;
+    constructor(id: string);
+    getSlotChild(parent: BaseRenderable): TextSlotRenderable | LayoutSlotRenderable;
+    destroy(): void;
+}
+export {};

package/src/reconciler.d.ts

@@ -0,0 +1,5 @@
+import { BaseRenderable } from "@cascadetui/core";
+import { SlotRenderable } from "./elements";
+export type DomNode = BaseRenderable;
+export declare function createSlotNode(): SlotRenderable;
+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/renderer/index.d.ts

@@ -0,0 +1,3 @@
+import type { RendererOptions, Renderer } from "./universal.js";
+export type { RendererOptions, Renderer } from "./universal.js";
+export declare function createRenderer<NodeType>(options: RendererOptions<NodeType>): Renderer<NodeType>;

package/src/renderer/universal.d.ts

@@ -0,0 +1,29 @@
+export function createRenderer({ createElement, createTextNode, createSlotNode, isTextNode, replaceText, insertNode, removeNode, setProperty, getParentNode, getFirstChild, getNextSibling, }: {
+    createElement: any;
+    createTextNode: any;
+    createSlotNode: any;
+    isTextNode: any;
+    replaceText: any;
+    insertNode: any;
+    removeNode: any;
+    setProperty: any;
+    getParentNode: any;
+    getFirstChild: any;
+    getNextSibling: any;
+}): {
+    render(code: any, element: any): undefined;
+    insert: (parent: any, accessor: any, marker: any, initial: any) => any;
+    spread(node: any, accessor: any, skipChildren: any): void;
+    createElement: any;
+    createTextNode: any;
+    insertNode: any;
+    setProp(node: any, name: any, value: any, prev: any): any;
+    mergeProps: typeof mergeProps;
+    effect: typeof createRenderEffect;
+    memo: (fn: any) => import("solid-js").Accessor<any>;
+    createComponent: typeof createComponent;
+    use(fn: any, element: any, arg: any): any;
+};
+import { mergeProps } from "solid-js";
+import { createRenderEffect } from "solid-js";
+import { createComponent } from "solid-js";

package/src/types/elements.d.ts

@@ -0,0 +1,91 @@
+import type { ASCIIFontOptions, ASCIIFontRenderable, BaseRenderable, BoxOptions, BoxRenderable, CodeOptions, CodeRenderable, InputRenderable, InputRenderableOptions, KeyEvent, MarkdownOptions, MarkdownRenderable, RenderableOptions, RenderContext, ScrollBoxOptions, ScrollBoxRenderable, SelectOption, SelectRenderable, SelectRenderableOptions, TabSelectOption, TabSelectRenderable, TabSelectRenderableOptions, TextareaOptions, TextareaRenderable, TextNodeRenderable, TextOptions, TextRenderable } from "@cascadetui/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 */
+export type ElementProps<TRenderable = unknown> = {
+    ref?: Ref<TRenderable>;
+};
+/** Base type for any renderable constructor */
+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 */
+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" : TConstructor extends RenderableConstructor<CodeRenderable> ? NonStyledProps | "content" | "filetype" | "syntaxStyle" | "treeSitterClient" : TConstructor extends RenderableConstructor<MarkdownRenderable> ? NonStyledProps | "content" | "syntaxStyle" | "treeSitterClient" | "conceal" | "renderNode" : 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 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 | JSX.Element;
+export type TextProps = ComponentProps<TextOptions, TextRenderable> & {
+    children?: TextChildren | Array<TextChildren>;
+};
+export type SpanProps = ComponentProps<{}, TextNodeRenderable> & {
+    children?: TextChildren | Array<TextChildren>;
+};
+export type LinkProps = SpanProps & {
+    href: string;
+};
+export type BoxProps = ComponentProps<ContainerProps<BoxOptions>, BoxRenderable> & {
+    focused?: boolean;
+};
+export type InputProps = ComponentProps<InputRenderableOptions, InputRenderable> & {
+    focused?: boolean;
+    onInput?: (value: string) => void;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+};
+export type TextareaProps = ComponentProps<TextareaOptions, TextareaRenderable> & {
+    focused?: boolean;
+    onSubmit?: () => void;
+    onContentChange?: (value: string) => void;
+    onCursorChange?: (value: {
+        line: number;
+        visualColumn: number;
+    }) => void;
+    onKeyDown?: (event: KeyEvent) => void;
+    onKeyPress?: (event: KeyEvent) => 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;
+    stickyScroll?: boolean;
+    stickyStart?: "bottom" | "top" | "left" | "right";
+};
+export type CodeProps = ComponentProps<CodeOptions, CodeRenderable>;
+export type MarkdownProps = ComponentProps<MarkdownOptions, MarkdownRenderable>;
+/** 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 CascadeComponents {
+    [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;