paintcannon-react 0.0.1

package/README.md

@@ -0,0 +1,213 @@
+# paintcannon-react
+
+A React reconciler for `paintcannon`, built for fast terminal UIs.
+
+`paintcannon-react` lets you render React components into PaintCannon's
+Rust-backed terminal renderer. It is intended as a faster, no-flicker
+alternative for terminal React interfaces that would otherwise use Ink.
+
+![A cannon shooting paint](https://raw.githubusercontent.com/synthetic-lab/paintcannon/refs/heads/main/paintcannon-shot.png)
+
+## Installation
+
+`paintcannon` and `react` are peer dependencies, so install them alongside the
+reconciler:
+
+```bash
+npm install --save paintcannon paintcannon-react react
+```
+
+## Usage
+
+```tsx
+import React, { useState } from "react";
+import { Button, Div, Span, render } from "paintcannon-react";
+
+function Counter(): React.ReactElement {
+  const [count, setCount] = useState(0);
+
+  return (
+    <Div
+      style={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 1,
+        backgroundColor: "#020617",
+        color: "#e2e8f0",
+      }}
+    >
+      <Span style={{ color: "#38bdf8" }}>paintcannon-react</Span>
+      <Button
+        style={{
+          border: "chunky-rounded",
+          borderColor: "#fb923c",
+          backgroundColor: count % 2 === 0 ? "#0f172a" : "#7c2d12",
+          color: "#f8fafc",
+          padding: "1 2",
+          cursor: "pointer",
+        }}
+        onClick={() => {
+          setCount(value => value + 1);
+        }}
+      >
+        Clicked {count} times
+      </Button>
+    </Div>
+  );
+}
+
+const app = render(<Counter />, {
+  alternateScreen: true,
+  captureMouse: true,
+});
+
+await app.waitUntilExit();
+```
+
+## API differences from Ink
+
+PaintCannon-React isn't 100% drop-in compatible with Ink: the primary
+difference is that PaintCannon expects you to use PaintCannon's native
+`<input>` and `<textarea>` components for input, rather than relying on custom
+JS reimplementations of input handling on top of React. Although this is
+_different_ thank Ink, this comes with a significant performance win: typing in
+PaintCannon is much lower latency as a result.
+
+PaintCannon is also somewhat less restrictive thank Ink: you aren't required to
+wrap text content in `<Text>` nodes. Text content Just Works inside PaintCannon
+components, just like with a regular browser.
+
+## Host Components
+
+PaintCannon exposes the following host components that mirror a subset of the
+DOM API:
+
+- `Div`
+- `Span`
+- `Input`
+- `Textarea`
+- `Button`
+- `Form`
+
+These components map to PaintCannon's DOM-like core API and support typed style
+props, bubbling events, forms, focus handling, controlled inputs, and mouse
+interactions. The subset of the React-DOM props they support is as follows:
+
+### Common props:
+
+All host components accept:
+
+- `children?: React.ReactNode`
+- `style?: CSSStyleProperties`
+- `ref?: React.Ref<Element>`
+
+All host components accept these event props:
+
+- `onKeyDown`
+- `onKeyUp`
+- `onClick`
+- `onMouseEnter`
+- `onMouseLeave`
+- `onMouseMove`
+- `onFocus`
+- `onBlur`
+- `onSubmit`
+- `onChange`
+- `onTransitionStart`
+- `onTransitionEnd`
+- `onScroll`
+
+`style` accepts the following CSS property names. Kebab-case and camelCase are
+both supported:
+
+- `display`
+- `overflow`
+- `overflow-x` / `overflowX`
+- `overflow-y` / `overflowY`
+- `image-rendering` / `imageRendering`
+- `flex-direction` / `flexDirection`
+- `flex-wrap` / `flexWrap`
+- `flex-flow` / `flexFlow`
+- `flex-basis` / `flexBasis`
+- `flex-grow` / `flexGrow`
+- `flex-shrink` / `flexShrink`
+- `flex`
+- `justify-content` / `justifyContent`
+- `align-items` / `alignItems`
+- `align-self` / `alignSelf`
+- `align-content` / `alignContent`
+- `justify-items` / `justifyItems`
+- `justify-self` / `justifySelf`
+- `gap`
+- `row-gap` / `rowGap`
+- `column-gap` / `columnGap`
+- `padding`
+- `padding-top` / `paddingTop`
+- `padding-right` / `paddingRight`
+- `padding-bottom` / `paddingBottom`
+- `padding-left` / `paddingLeft`
+- `margin`
+- `margin-top` / `marginTop`
+- `margin-right` / `marginRight`
+- `margin-bottom` / `marginBottom`
+- `margin-left` / `marginLeft`
+- `width`
+- `height`
+- `min-height` / `minHeight`
+- `max-height` / `maxHeight`
+- `white-space` / `whiteSpace`
+- `border`
+- `border-top` / `borderTop`
+- `border-right` / `borderRight`
+- `border-bottom` / `borderBottom`
+- `border-left` / `borderLeft`
+- `border-color` / `borderColor`
+- `color`
+- `placeholder-color` / `placeholderColor`
+- `transition`
+- `background`
+- `background-color` / `backgroundColor`
+- `selection-background-color` / `selectionBackgroundColor`
+- `cursor`
+- `grid-template-columns` / `gridTemplateColumns`
+- `grid-template-rows` / `gridTemplateRows`
+- `grid-auto-columns` / `gridAutoColumns`
+- `grid-auto-rows` / `gridAutoRows`
+- `grid-auto-flow` / `gridAutoFlow`
+- `grid-column` / `gridColumn`
+- `grid-row` / `gridRow`
+- `grid-column-start` / `gridColumnStart`
+- `grid-column-end` / `gridColumnEnd`
+- `grid-row-start` / `gridRowStart`
+- `grid-row-end` / `gridRowEnd`
+
+### Per-component props:
+
+- `Div`: shared props, plus `scrollLeft?: number` and `scrollTop?: number`.
+- `Span`: shared props, plus `scrollLeft?: number` and `scrollTop?: number`.
+- `Form`: shared props, plus `scrollLeft?: number` and `scrollTop?: number`.
+- `Button`: shared props, plus `type?: "submit" | "button"`,
+  `scrollLeft?: number`, and `scrollTop?: number`.
+- `Input`: shared props, plus `type?: "text"`, `value?: string`,
+  `placeholder?: string`, `cursorPosition?: number`, and
+  `autoFocus?: boolean`.
+- `Textarea`: shared props, plus `value?: string`, `placeholder?: string`,
+  `cursorPosition?: number`, `autoFocus?: boolean`, `scrollLeft?: number`, and
+  `scrollTop?: number`. `Textarea` does not accept a `type` prop.
+
+## Hooks
+
+`paintcannon-react` includes:
+
+- `useApp()` for exiting the rendered app from inside React.
+- `useAnimation()` for requestAnimationFrame-driven animations that share a
+  single render cycle.
+
+## Core Runtime
+
+This package depends on `paintcannon`, which provides the NAPI-RS native
+renderer and DOM-like API.

package/dist/src/hooks/app-context.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { PaintCannon } from 'paintcannon';
+export type PaintCannonReactApp = {
+    readonly paintCannon: PaintCannon;
+    exit(errorOrResult?: unknown): void;
+    waitUntilExit(): Promise<unknown>;
+};
+export declare const AppContext: React.Context<PaintCannonReactApp | undefined>;

package/dist/src/hooks/app-context.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const AppContext = React.createContext(undefined);

package/dist/src/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { AppContext, useApp, type PaintCannonReactApp } from "./use-app.ts";
+export { AnimationContext, AnimationScheduler, useAnimation, type AnimationOptions, type AnimationResult, } from "./use-animation.ts";

package/dist/src/hooks/index.js

@@ -0,0 +1,2 @@
+export { AppContext, useApp } from "./use-app.js";
+export { AnimationContext, AnimationScheduler, useAnimation, } from "./use-animation.js";

package/dist/src/hooks/use-animation.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import type { PaintCannon } from "paintcannon";
+type AnimationCallback = (currentTime: number) => void;
+type AnimationSubscription = {
+    startTime: number;
+    unsubscribe(): void;
+};
+type AnimationContextValue = {
+    subscribe(callback: AnimationCallback, interval: number | undefined): AnimationSubscription;
+};
+export type AnimationOptions = {
+    interval?: number;
+    isActive?: boolean;
+};
+export type AnimationResult = {
+    readonly frame: number;
+    readonly time: number;
+    readonly delta: number;
+    readonly reset: () => void;
+};
+export declare const AnimationContext: React.Context<AnimationContextValue | undefined>;
+export declare function useAnimation(options?: AnimationOptions): AnimationResult;
+export declare class AnimationScheduler implements AnimationContextValue {
+    private readonly paintCannon;
+    private nextId;
+    private animationFrameId;
+    private readonly subscribers;
+    subscribe(callback: AnimationCallback, interval: number | undefined): AnimationSubscription;
+    constructor(paintCannon: PaintCannon);
+    stop(): void;
+    private scheduleAnimationFrame;
+    private cancelAnimationFrame;
+    private tick;
+}
+export {};

package/dist/src/hooks/use-animation.js

@@ -0,0 +1,120 @@
+import React from "react";
+export const AnimationContext = React.createContext(undefined);
+const maximumTimerInterval = 2_147_483_647;
+const zeroAnimationState = { frame: 0, time: 0, delta: 0 };
+export function useAnimation(options = {}) {
+    const { interval, isActive = true } = options;
+    const safeInterval = interval === undefined ? undefined : normalizeAnimationInterval(interval);
+    const animation = React.useContext(AnimationContext);
+    if (animation === undefined) {
+        throw new Error("useAnimation() must be used inside a paintcannon-react render tree");
+    }
+    const [resetKey, setResetKey] = React.useState(0);
+    const [state, setState] = React.useState(zeroAnimationState);
+    const lastRenderTimeRef = React.useRef(0);
+    const previousOptionsRef = React.useRef({ isActive, safeInterval, resetKey });
+    const previousOptions = previousOptionsRef.current;
+    const shouldReset = isActive &&
+        (safeInterval !== previousOptions.safeInterval ||
+            !previousOptions.isActive ||
+            resetKey !== previousOptions.resetKey);
+    const reset = React.useCallback(() => {
+        setResetKey(value => value + 1);
+    }, []);
+    React.useLayoutEffect(() => {
+        if (!isActive) {
+            return undefined;
+        }
+        setState(zeroAnimationState);
+        let startTime = 0;
+        const subscription = animation.subscribe(currentTime => {
+            const elapsed = currentTime - startTime;
+            const delta = currentTime - lastRenderTimeRef.current;
+            lastRenderTimeRef.current = currentTime;
+            setState(previous => ({
+                frame: safeInterval === undefined ? previous.frame + 1 : Math.floor(elapsed / safeInterval),
+                time: elapsed,
+                delta,
+            }));
+        }, safeInterval);
+        startTime = subscription.startTime;
+        lastRenderTimeRef.current = subscription.startTime;
+        return subscription.unsubscribe;
+    }, [animation, isActive, safeInterval, resetKey]);
+    React.useLayoutEffect(() => {
+        previousOptionsRef.current = { isActive, safeInterval, resetKey };
+    }, [isActive, safeInterval, resetKey]);
+    if (shouldReset) {
+        return { ...zeroAnimationState, reset };
+    }
+    return { ...state, reset };
+}
+export class AnimationScheduler {
+    paintCannon;
+    nextId = 1;
+    animationFrameId;
+    subscribers = new Map();
+    subscribe(callback, interval) {
+        const id = this.nextId;
+        this.nextId += 1;
+        const startTime = performance.now();
+        this.subscribers.set(id, {
+            callback,
+            interval,
+            nextTime: interval === undefined ? startTime : startTime + interval,
+        });
+        this.scheduleAnimationFrame();
+        return {
+            startTime,
+            unsubscribe: () => {
+                this.subscribers.delete(id);
+                if (this.subscribers.size === 0) {
+                    this.cancelAnimationFrame();
+                }
+            },
+        };
+    }
+    constructor(paintCannon) {
+        this.paintCannon = paintCannon;
+    }
+    stop() {
+        this.cancelAnimationFrame();
+        this.subscribers.clear();
+    }
+    scheduleAnimationFrame() {
+        if (this.animationFrameId !== undefined || this.subscribers.size === 0) {
+            return;
+        }
+        this.animationFrameId = this.paintCannon.requestAnimationFrame(timestamp => {
+            this.animationFrameId = undefined;
+            this.tick(timestamp);
+        });
+    }
+    cancelAnimationFrame() {
+        if (this.animationFrameId === undefined) {
+            return;
+        }
+        this.paintCannon.cancelAnimationFrame(this.animationFrameId);
+        this.animationFrameId = undefined;
+    }
+    tick(currentTime) {
+        for (const subscriber of this.subscribers.values()) {
+            if (subscriber.interval === undefined) {
+                subscriber.callback(currentTime);
+                continue;
+            }
+            if (subscriber.nextTime <= currentTime) {
+                const intervalsElapsed = Math.max(1, Math.floor((currentTime - subscriber.nextTime) / subscriber.interval) + 1);
+                subscriber.nextTime += subscriber.interval * intervalsElapsed;
+                subscriber.callback(currentTime);
+            }
+        }
+        this.scheduleAnimationFrame();
+    }
+}
+function normalizeAnimationInterval(interval) {
+    if (!Number.isFinite(interval)) {
+        return maximumTimerInterval;
+    }
+    return Math.min(maximumTimerInterval, Math.max(1, interval));
+}

package/dist/src/hooks/use-app.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { PaintCannon } from "paintcannon";
+export type PaintCannonReactApp = {
+    readonly paintCannon: PaintCannon;
+    exit(errorOrResult?: unknown): void;
+    waitUntilExit(): Promise<unknown>;
+};
+export declare const AppContext: React.Context<PaintCannonReactApp | undefined>;
+export declare function useApp(): PaintCannonReactApp;

package/dist/src/hooks/use-app.js

@@ -0,0 +1,9 @@
+import React from "react";
+export const AppContext = React.createContext(undefined);
+export function useApp() {
+    const app = React.useContext(AppContext);
+    if (app === undefined) {
+        throw new Error("useApp() must be used inside a paintcannon-react render tree");
+    }
+    return app;
+}

package/dist/src/host-components/button/button.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonElement as PaintButtonElement } from "paintcannon";
+import type { CommonProps, HostComponent, Scrollable } from "../shared.ts";
+export type Props = CommonProps & Partial<Scrollable> & {
+    type?: "submit" | "button";
+};
+export type Element = PaintButtonElement;
+export declare const type: "paintcannon.button";
+export declare const Component: HostComponent<Props, Element>;

package/dist/src/host-components/button/button.js

@@ -0,0 +1,3 @@
+import { typeString } from "../shared.js";
+export const type = typeString("paintcannon.button");
+export const Component = type;

package/dist/src/host-components/button/reconcile-button.d.ts

@@ -0,0 +1,6 @@
+import type { PaintCannon } from "paintcannon";
+import * as button from "./button.ts";
+import type { MountedComponent } from "../mounted.ts";
+import { type ApplyCommonProps } from "../reconcile-shared.ts";
+export declare function create(paintCannon: PaintCannon, props: button.Props, applyCommonProps: ApplyCommonProps): MountedComponent<typeof button>;
+export declare function applyProps(node: button.Element, oldProps: Partial<button.Props>, newProps: button.Props, applyCommonProps: ApplyCommonProps): void;

package/dist/src/host-components/button/reconcile-button.js

@@ -0,0 +1,14 @@
+import * as button from "./button.js";
+import { applyScrollableProps } from "../reconcile-shared.js";
+export function create(paintCannon, props, applyCommonProps) {
+    const node = paintCannon.createElement("button");
+    applyProps(node, {}, props, applyCommonProps);
+    return { kind: "element", type: button.type, props, children: [], node };
+}
+export function applyProps(node, oldProps, newProps, applyCommonProps) {
+    applyCommonProps(node, oldProps, newProps);
+    if (newProps.type !== undefined) {
+        node.type = newProps.type;
+    }
+    applyScrollableProps(node, newProps);
+}

package/dist/src/host-components/button.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonElement as PaintButtonElement } from 'paintcannon';
+import type { CommonProps, HostComponent, Scrollable } from './shared.ts';
+export type Props = CommonProps & Partial<Scrollable> & {
+    type?: 'submit' | 'button';
+};
+export type Element = PaintButtonElement;
+export declare const type: "paintcannon.button";
+export declare const Component: HostComponent<Props, Element>;

package/dist/src/host-components/button.js

@@ -0,0 +1,3 @@
+import { typeString } from "./shared.js";
+export const type = typeString('paintcannon.button');
+export const Component = type;

package/dist/src/host-components/div/div.d.ts

@@ -0,0 +1,6 @@
+import type { DivElement as PaintDivElement } from "paintcannon";
+import type { CommonProps, HostComponent, Scrollable } from "../shared.ts";
+export type Props = CommonProps & Partial<Scrollable>;
+export type Element = PaintDivElement;
+export declare const type: "paintcannon.div";
+export declare const Component: HostComponent<Props, Element>;

package/dist/src/host-components/div/div.js

@@ -0,0 +1,3 @@
+import { typeString } from "../shared.js";
+export const type = typeString("paintcannon.div");
+export const Component = type;

package/dist/src/host-components/div/reconcile-div.d.ts

@@ -0,0 +1,6 @@
+import type { PaintCannon } from "paintcannon";
+import * as div from "./div.ts";
+import type { MountedComponent } from "../mounted.ts";
+import { type ApplyCommonProps } from "../reconcile-shared.ts";
+export declare function create(paintCannon: PaintCannon, props: div.Props, applyCommonProps: ApplyCommonProps): MountedComponent<typeof div>;
+export declare function applyProps(node: div.Element, oldProps: Partial<div.Props>, newProps: div.Props, applyCommonProps: ApplyCommonProps): void;

package/dist/src/host-components/div/reconcile-div.js

@@ -0,0 +1,10 @@
+import * as div from "./div.js";
+import { applyScrollableElementProps } from "../reconcile-shared.js";
+export function create(paintCannon, props, applyCommonProps) {
+    const node = paintCannon.createElement("div");
+    applyProps(node, {}, props, applyCommonProps);
+    return { kind: "element", type: div.type, props, children: [], node };
+}
+export function applyProps(node, oldProps, newProps, applyCommonProps) {
+    applyScrollableElementProps(node, oldProps, newProps, applyCommonProps);
+}

package/dist/src/host-components/div.d.ts

@@ -0,0 +1,6 @@
+import type { DivElement as PaintDivElement } from 'paintcannon';
+import type { CommonProps, HostComponent, Scrollable } from './shared.ts';
+export type Props = CommonProps & Partial<Scrollable>;
+export type Element = PaintDivElement;
+export declare const type: "paintcannon.div";
+export declare const Component: HostComponent<Props, Element>;

package/dist/src/host-components/div.js

@@ -0,0 +1,3 @@
+import { typeString } from "./shared.js";
+export const type = typeString('paintcannon.div');
+export const Component = type;

package/dist/src/host-components/form/form.d.ts

@@ -0,0 +1,6 @@
+import type { FormElement as PaintFormElement } from "paintcannon";
+import type { CommonProps, HostComponent, Scrollable } from "../shared.ts";
+export type Props = CommonProps & Partial<Scrollable>;
+export type Element = PaintFormElement;
+export declare const type: "paintcannon.form";
+export declare const Component: HostComponent<Props, Element>;

package/dist/src/host-components/form/form.js

@@ -0,0 +1,3 @@
+import { typeString } from "../shared.js";
+export const type = typeString("paintcannon.form");
+export const Component = type;

package/dist/src/host-components/form/reconcile-form.d.ts

@@ -0,0 +1,6 @@
+import type { PaintCannon } from "paintcannon";
+import * as form from "./form.ts";
+import type { MountedComponent } from "../mounted.ts";
+import { type ApplyCommonProps } from "../reconcile-shared.ts";
+export declare function create(paintCannon: PaintCannon, props: form.Props, applyCommonProps: ApplyCommonProps): MountedComponent<typeof form>;
+export declare function applyProps(node: form.Element, oldProps: Partial<form.Props>, newProps: form.Props, applyCommonProps: ApplyCommonProps): void;

package/dist/src/host-components/form/reconcile-form.js

@@ -0,0 +1,10 @@
+import * as form from "./form.js";
+import { applyScrollableElementProps } from "../reconcile-shared.js";
+export function create(paintCannon, props, applyCommonProps) {
+    const node = paintCannon.createElement("form");
+    applyProps(node, {}, props, applyCommonProps);
+    return { kind: "element", type: form.type, props, children: [], node };
+}
+export function applyProps(node, oldProps, newProps, applyCommonProps) {
+    applyScrollableElementProps(node, oldProps, newProps, applyCommonProps);
+}

package/dist/src/host-components/form.d.ts

@@ -0,0 +1,6 @@
+import type { FormElement as PaintFormElement } from 'paintcannon';
+import type { CommonProps, HostComponent, Scrollable } from './shared.ts';
+export type Props = CommonProps & Partial<Scrollable>;
+export type Element = PaintFormElement;
+export declare const type: "paintcannon.form";
+export declare const Component: HostComponent<Props, Element>;

package/dist/src/host-components/form.js

@@ -0,0 +1,3 @@
+import { typeString } from "./shared.js";
+export const type = typeString('paintcannon.form');
+export const Component = type;

package/dist/src/host-components/index.d.ts

@@ -0,0 +1,14 @@
+export * from "./shared.ts";
+export * from "./mounted.ts";
+export * as button from "./button/button.ts";
+export * as div from "./div/div.ts";
+export * as form from "./form/form.ts";
+export * as input from "./input/input.ts";
+export * as reconcileButton from "./button/reconcile-button.ts";
+export * as reconcileDiv from "./div/reconcile-div.ts";
+export * as reconcileForm from "./form/reconcile-form.ts";
+export * as reconcileInput from "./input/reconcile-input.ts";
+export * as reconcileSpan from "./span/reconcile-span.ts";
+export * as reconcileTextarea from "./textarea/reconcile-textarea.ts";
+export * as span from "./span/span.ts";
+export * as textarea from "./textarea/textarea.ts";

package/dist/src/host-components/index.js

@@ -0,0 +1,14 @@
+export * from "./shared.js";
+export * from "./mounted.js";
+export * as button from "./button/button.js";
+export * as div from "./div/div.js";
+export * as form from "./form/form.js";
+export * as input from "./input/input.js";
+export * as reconcileButton from "./button/reconcile-button.js";
+export * as reconcileDiv from "./div/reconcile-div.js";
+export * as reconcileForm from "./form/reconcile-form.js";
+export * as reconcileInput from "./input/reconcile-input.js";
+export * as reconcileSpan from "./span/reconcile-span.js";
+export * as reconcileTextarea from "./textarea/reconcile-textarea.js";
+export * as span from "./span/span.js";
+export * as textarea from "./textarea/textarea.js";

package/dist/src/host-components/input/input.d.ts

@@ -0,0 +1,8 @@
+import type { InputElement as PaintInputElement } from "paintcannon";
+import type { HostComponent, TextControlProps } from "../shared.ts";
+export type Props = TextControlProps & {
+    type?: "text";
+};
+export type Element = PaintInputElement;
+export declare const type: "paintcannon.input";
+export declare const Component: HostComponent<Props, Element>;

package/dist/src/host-components/input/input.js

@@ -0,0 +1,3 @@
+import { typeString } from "../shared.js";
+export const type = typeString("paintcannon.input");
+export const Component = type;

package/dist/src/host-components/input/reconcile-input.d.ts

@@ -0,0 +1,6 @@
+import type { PaintCannon } from "paintcannon";
+import * as input from "./input.ts";
+import type { MountedComponent } from "../mounted.ts";
+import { type ApplyCommonProps } from "../reconcile-shared.ts";
+export declare function create(paintCannon: PaintCannon, props: input.Props, applyCommonProps: ApplyCommonProps): MountedComponent<typeof input>;
+export declare function applyProps(node: input.Element, oldProps: Partial<input.Props>, newProps: input.Props, applyCommonProps: ApplyCommonProps): void;

package/dist/src/host-components/input/reconcile-input.js

@@ -0,0 +1,14 @@
+import * as input from "./input.js";
+import { applyTextControlProps } from "../reconcile-shared.js";
+export function create(paintCannon, props, applyCommonProps) {
+    const node = paintCannon.createElement("input");
+    applyProps(node, {}, props, applyCommonProps);
+    return { kind: "element", type: input.type, props, children: [], node };
+}
+export function applyProps(node, oldProps, newProps, applyCommonProps) {
+    applyCommonProps(node, oldProps, newProps);
+    if (newProps.type !== undefined) {
+        node.type = newProps.type;
+    }
+    applyTextControlProps(node, oldProps, newProps);
+}

package/dist/src/host-components/input.d.ts

@@ -0,0 +1,8 @@
+import type { InputElement as PaintInputElement } from 'paintcannon';
+import type { HostComponent, TextControlProps } from './shared.ts';
+export type Props = TextControlProps & {
+    type?: 'text';
+};
+export type Element = PaintInputElement;
+export declare const type: "paintcannon.input";
+export declare const Component: HostComponent<Props, Element>;

package/dist/src/host-components/input.js

@@ -0,0 +1,3 @@
+import { typeString } from "./shared.js";
+export const type = typeString('paintcannon.input');
+export const Component = type;