@vsreact/core 0.0.1 → 0.0.3

package/dist/animation.d.ts

@@ -0,0 +1,38 @@
+export type EasingFn = (t: number) => number;
+export declare const Easing: {
+    linear: EasingFn;
+    outCubic: EasingFn;
+    inOutCubic: EasingFn;
+    outExpo: EasingFn;
+    outBack: EasingFn;
+    outQuint: EasingFn;
+};
+export interface TweenOptions {
+    /** Milliseconds the tween runs for (after the delay). */
+    duration: number;
+    delay?: number;
+    easing?: EasingFn;
+    onComplete?: () => void;
+}
+/** Eased progress 0→1 that starts when the component mounts. */
+export declare function useTween({ duration, delay, easing, onComplete }: TweenOptions): number;
+export declare function lerp(from: number, to: number, t: number): number;
+export interface SpringOptions {
+    /** Spring constant — higher snaps faster. Default 170. */
+    stiffness?: number;
+    /** Velocity drag — higher settles with less bounce. Default 24. */
+    damping?: number;
+    mass?: number;
+    /** Distance from target below which the spring snaps and stops. */
+    restDelta?: number;
+}
+/** One semi-implicit Euler integration step; exported for tests and for
+    driving springs from your own loops. Returns [position, velocity]. */
+export declare function springStep(position: number, velocity: number, target: number, { stiffness, damping, mass }: SpringOptions, dtMs: number): [number, number];
+/**
+ * A value that springs toward `target` whenever it changes — for
+ * interactive motion where a fixed-duration tween feels wrong (toggle
+ * thumbs, drawers, meters chasing levels). Runs on the host timer like
+ * useTween; starts at rest on the initial target.
+ */
+export declare function useSpring(target: number, options?: SpringOptions): number;

package/dist/animation.js

@@ -0,0 +1,90 @@
+// Frame-driven animation for VSReacT. Tweens run on the host timer (16ms
+// ticks through the C++ Scheduler) and re-render by setting React state, so
+// every animated style flows through the normal setProps → repaint path.
+import { useEffect, useRef, useState } from "react";
+export const Easing = {
+    linear: ((t) => t),
+    outCubic: ((t) => 1 - Math.pow(1 - t, 3)),
+    inOutCubic: ((t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2),
+    outExpo: ((t) => (t >= 1 ? 1 : 1 - Math.pow(2, -10 * t))),
+    outBack: ((t) => {
+        const c1 = 1.70158;
+        const c3 = c1 + 1;
+        return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+    }),
+    outQuint: ((t) => 1 - Math.pow(1 - t, 5)),
+};
+const FRAME_MS = 16;
+/** Eased progress 0→1 that starts when the component mounts. */
+export function useTween({ duration, delay = 0, easing = Easing.outCubic, onComplete }) {
+    const [progress, setProgress] = useState(0);
+    const doneRef = useRef(false);
+    const completeRef = useRef(onComplete);
+    completeRef.current = onComplete;
+    useEffect(() => {
+        let elapsed = -delay;
+        const id = setInterval(() => {
+            elapsed += FRAME_MS;
+            if (elapsed <= 0)
+                return;
+            const t = Math.min(1, elapsed / duration);
+            setProgress(easing(t));
+            if (t >= 1) {
+                clearInterval(id);
+                if (!doneRef.current) {
+                    doneRef.current = true;
+                    completeRef.current?.();
+                }
+            }
+        }, FRAME_MS);
+        return () => clearInterval(id);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return progress;
+}
+export function lerp(from, to, t) {
+    return from + (to - from) * t;
+}
+/** One semi-implicit Euler integration step; exported for tests and for
+    driving springs from your own loops. Returns [position, velocity]. */
+export function springStep(position, velocity, target, { stiffness = 170, damping = 24, mass = 1 }, dtMs) {
+    const dt = dtMs / 1000;
+    const acceleration = (-stiffness * (position - target) - damping * velocity) / mass;
+    const v = velocity + acceleration * dt;
+    return [position + v * dt, v];
+}
+/**
+ * A value that springs toward `target` whenever it changes — for
+ * interactive motion where a fixed-duration tween feels wrong (toggle
+ * thumbs, drawers, meters chasing levels). Runs on the host timer like
+ * useTween; starts at rest on the initial target.
+ */
+export function useSpring(target, options = {}) {
+    const [value, setValue] = useState(target);
+    const state = useRef({ position: target, velocity: 0 });
+    const targetRef = useRef(target);
+    targetRef.current = target;
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
+    useEffect(() => {
+        const restDelta = optionsRef.current.restDelta ?? 0.001;
+        if (Math.abs(state.current.position - targetRef.current) <= restDelta &&
+            Math.abs(state.current.velocity) <= restDelta) {
+            return;
+        }
+        const id = setInterval(() => {
+            const s = state.current;
+            const [p, v] = springStep(s.position, s.velocity, targetRef.current, optionsRef.current, FRAME_MS);
+            s.position = p;
+            s.velocity = v;
+            if (Math.abs(p - targetRef.current) <= restDelta && Math.abs(v) <= restDelta) {
+                s.position = targetRef.current;
+                s.velocity = 0;
+                clearInterval(id);
+            }
+            setValue(s.position);
+        }, FRAME_MS);
+        return () => clearInterval(id);
+    }, [target]);
+    return value;
+}

package/dist/bridge.d.ts

@@ -0,0 +1,7 @@
+export type Op = unknown[];
+export declare function queueOp(op: Op): void;
+export declare function flushOps(): void;
+export type EventHandler = (payload: unknown) => void;
+export declare function setHandlers(nodeId: number, handlers: Map<string, EventHandler>): void;
+export declare function removeHandlers(nodeId: number): void;
+export declare function addNativeListener(name: string, cb: EventHandler): () => void;

package/dist/bridge.js

@@ -0,0 +1,49 @@
+// JS side of the mutation/event bridge. Ops queue up during a React commit
+// and flush to C++ as one JSON batch; C++ pushes events back through the
+// __vsreact_dispatch global registered here.
+import { fireTimer } from "./runtime";
+let queue = [];
+export function queueOp(op) {
+    queue.push(op);
+}
+export function flushOps() {
+    if (queue.length === 0)
+        return;
+    const json = JSON.stringify(queue);
+    queue = [];
+    globalThis.__vsreact_flush?.(json);
+}
+const eventHandlers = new Map();
+export function setHandlers(nodeId, handlers) {
+    if (handlers.size === 0)
+        eventHandlers.delete(nodeId);
+    else
+        eventHandlers.set(nodeId, handlers);
+}
+export function removeHandlers(nodeId) {
+    eventHandlers.delete(nodeId);
+}
+const nativeListeners = new Map();
+export function addNativeListener(name, cb) {
+    let set = nativeListeners.get(name);
+    if (!set)
+        nativeListeners.set(name, (set = new Set()));
+    set.add(cb);
+    return () => {
+        set.delete(cb);
+        if (set.size === 0)
+            nativeListeners.delete(name);
+    };
+}
+globalThis.__vsreact_dispatch = (json) => {
+    const msg = JSON.parse(json);
+    if (msg.kind === "timer" && msg.id !== undefined) {
+        fireTimer(msg.id);
+    }
+    else if (msg.kind === "event" && msg.nodeId !== undefined && msg.type) {
+        eventHandlers.get(msg.nodeId)?.get(msg.type)?.(msg.payload);
+    }
+    else if (msg.kind === "native" && msg.name) {
+        nativeListeners.get(msg.name)?.forEach((cb) => cb(msg.payload));
+    }
+};

package/dist/controls.d.ts

@@ -0,0 +1,126 @@
+/** Vertical-drag-to-value mapping shared by Knob (and tested in isolation). */
+export declare function dragToValue(startValue: number, dy: number, sensitivity?: number): number;
+export interface KnobProps {
+    value: number;
+    text?: string;
+    label?: string;
+    size?: number;
+    disabled?: boolean;
+    trackColor?: string;
+    valueColor?: string;
+    onChange: (value: number) => void;
+    onBegin?: () => void;
+    onEnd?: () => void;
+}
+export declare function Knob({ value, text, label, size, disabled, trackColor, valueColor, onChange, onBegin, onEnd, }: KnobProps): import("react").JSX.Element;
+export interface ParamKnobProps {
+    paramId: string;
+    label?: string;
+    size?: number;
+    trackColor?: string;
+    valueColor?: string;
+}
+/** A Knob bound to an APVTS parameter (via ParameterBridge). */
+export declare function ParamKnob({ paramId, label, size, trackColor, valueColor }: ParamKnobProps): import("react").JSX.Element;
+export interface SliderProps {
+    value: number;
+    /** Track length when horizontal (default 160). */
+    width?: number;
+    /** Track length when vertical (default 160). */
+    height?: number;
+    /** Vertical fader — drag up for more, fill rises from the bottom. */
+    vertical?: boolean;
+    label?: string;
+    disabled?: boolean;
+    trackColor?: string;
+    valueColor?: string;
+    onChange: (value: number) => void;
+    onBegin?: () => void;
+    onEnd?: () => void;
+}
+export declare function Slider({ value, width, height, vertical, label, disabled, trackColor, valueColor, onChange, onBegin, onEnd, }: SliderProps): import("react").JSX.Element;
+export interface ParamSliderProps {
+    paramId: string;
+    label?: string;
+    width?: number;
+    height?: number;
+    vertical?: boolean;
+}
+/** A Slider bound to an APVTS parameter (via ParameterBridge). */
+export declare function ParamSlider({ paramId, label, width, height, vertical }: ParamSliderProps): import("react").JSX.Element;
+export interface ToggleProps {
+    on: boolean;
+    label?: string;
+    /** Track height; width is 1.8×. Default 22. */
+    size?: number;
+    disabled?: boolean;
+    trackColor?: string;
+    onColor?: string;
+    thumbColor?: string;
+    onChange: (on: boolean) => void;
+}
+/** A switch with a spring-animated thumb — bypass, on/off, A/B. */
+export declare function Toggle({ on, label, size, disabled, trackColor, onColor, thumbColor, onChange, }: ToggleProps): import("react").JSX.Element;
+export interface ParamToggleProps {
+    paramId: string;
+    label?: string;
+    size?: number;
+    trackColor?: string;
+    onColor?: string;
+    thumbColor?: string;
+}
+/** A Toggle bound to a bool-style APVTS parameter (on = value ≥ 0.5). */
+export declare function ParamToggle({ paramId, label, ...rest }: ParamToggleProps): import("react").JSX.Element;
+export interface XYPadProps {
+    /** Normalized 0..1. */
+    x: number;
+    /** Normalized 0..1 — 1 is the TOP of the pad (drag up for more). */
+    y: number;
+    width?: number;
+    height?: number;
+    label?: string;
+    disabled?: boolean;
+    trackColor?: string;
+    valueColor?: string;
+    onChange: (x: number, y: number) => void;
+    onBegin?: () => void;
+    onEnd?: () => void;
+}
+/** A 2D drag pad with crosshair — filter cutoff/resonance, pan/depth… */
+export declare function XYPad({ x, y, width, height, label, disabled, trackColor, valueColor, onChange, onBegin, onEnd, }: XYPadProps): import("react").JSX.Element;
+export interface ParamXYPadProps {
+    paramX: string;
+    paramY: string;
+    width?: number;
+    height?: number;
+    label?: string;
+    trackColor?: string;
+    valueColor?: string;
+}
+/** An XYPad driving two APVTS parameters at once. */
+export declare function ParamXYPad({ paramX, paramY, label, ...rest }: ParamXYPadProps): import("react").JSX.Element;
+export interface SegmentedProps {
+    options: string[];
+    index: number;
+    label?: string;
+    disabled?: boolean;
+    trackColor?: string;
+    activeColor?: string;
+    textColor?: string;
+    activeTextColor?: string;
+    onChange: (index: number) => void;
+}
+/** A row of exclusive options — oscillator shapes, filter modes, A/B/C. */
+export declare function Segmented({ options, index, label, disabled, trackColor, activeColor, textColor, activeTextColor, onChange, }: SegmentedProps): import("react").JSX.Element;
+export interface ParamSegmentedProps {
+    paramId: string;
+    options: string[];
+    label?: string;
+    trackColor?: string;
+    activeColor?: string;
+    textColor?: string;
+    activeTextColor?: string;
+}
+/** A Segmented bound to a choice-style APVTS parameter: the normalized
+    value maps to an option index (index / (count − 1)). */
+export declare function ParamSegmented({ paramId, options, label, ...rest }: ParamSegmentedProps): import("react").JSX.Element;

package/dist/controls.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The built-in VST controls — knobs, sliders, toggles, XY pads, segmented
+// switches — drawn by the VSReacT painter and driven by drag gestures.
+// Each has a Param* variant bound to an APVTS parameter.
+import { useRef } from "react";
+import { View, Text } from "./primitives";
+import { useParameter } from "./parameters";
+import { useSpring } from "./animation";
+const clamp01 = (v) => Math.min(1, Math.max(0, v));
+/** Vertical-drag-to-value mapping shared by Knob (and tested in isolation). */
+export function dragToValue(startValue, dy, sensitivity = 0.005) {
+    return clamp01(startValue - dy * sensitivity);
+}
+const ARC_START = -135;
+const ARC_END = 135;
+export function Knob({ value, text, label, size = 64, disabled, trackColor = "#2A2F27", valueColor = "#C6F135", onChange, onBegin, onEnd, }) {
+    const startValue = useRef(0);
+    return (_jsxs(View, { className: "items-center gap-2", children: [_jsx(View, { className: `items-center justify-center ${disabled ? "opacity-40" : "cursor-pointer"}`, style: {
+                    width: size,
+                    height: size,
+                    arcTrackColor: trackColor,
+                    arcColor: valueColor,
+                    arcStart: ARC_START,
+                    arcEnd: ARC_END,
+                    arcValueEnd: ARC_START + (ARC_END - ARC_START) * Math.min(1, Math.max(0, value)),
+                    arcThickness: Math.max(3, size * 0.08),
+                }, onDragStart: disabled
+                    ? undefined
+                    : () => {
+                        startValue.current = value;
+                        onBegin?.();
+                    }, onDrag: disabled ? undefined : (e) => onChange(dragToValue(startValue.current, e.dy)), onDragEnd: disabled ? undefined : () => onEnd?.(), children: text !== undefined ? (_jsx(Text, { className: "text-text font-bold text-center", style: { fontSize: Math.max(10, size * 0.16) }, children: text })) : null }), label !== undefined ? (_jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })) : null] }));
+}
+/** A Knob bound to an APVTS parameter (via ParameterBridge). */
+export function ParamKnob({ paramId, label, size, trackColor, valueColor }) {
+    const param = useParameter(paramId);
+    return (_jsx(Knob, { value: param.value, text: param.text, label: label ?? param.name.toUpperCase(), size: size, trackColor: trackColor, valueColor: valueColor, onChange: param.set, onBegin: param.begin, onEnd: param.end }));
+}
+export function Slider({ value, width = 160, height = 160, vertical, label, disabled, trackColor = "#2A2F27", valueColor = "#C6F135", onChange, onBegin, onEnd, }) {
+    const startValue = useRef(0);
+    const clamped = clamp01(value);
+    const onDragStart = disabled
+        ? undefined
+        : () => {
+            startValue.current = clamped;
+            onBegin?.();
+        };
+    const onDragEnd = disabled ? undefined : () => onEnd?.();
+    if (vertical) {
+        return (_jsxs(View, { className: "items-center gap-2", children: [_jsxs(View, { className: `w-[18] relative ${disabled ? "opacity-40" : "cursor-pointer"}`, style: { height }, onDragStart: onDragStart, onDrag: disabled ? undefined : (e) => onChange(clamp01(startValue.current - e.dy / height)), onDragEnd: onDragEnd, children: [_jsx(View, { className: "absolute w-[4] rounded-full left-[7] top-0 bottom-0", style: { backgroundColor: trackColor } }), _jsx(View, { className: "absolute w-[4] rounded-full left-[7] bottom-0", style: { height: clamped * height, backgroundColor: valueColor } }), _jsx(View, { className: "absolute w-[12] h-[12] rounded-full left-[3]", style: { top: (1 - clamped) * (height - 12), backgroundColor: valueColor } })] }), label !== undefined ? (_jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })) : null] }));
+    }
+    return (_jsxs(View, { className: "gap-2", children: [_jsxs(View, { className: `h-[18] justify-center relative ${disabled ? "opacity-40" : "cursor-pointer"}`, style: { width }, onDragStart: onDragStart, onDrag: disabled ? undefined : (e) => onChange(clamp01(startValue.current + e.dx / width)), onDragEnd: onDragEnd, children: [_jsx(View, { className: "h-[4] rounded-full", style: { backgroundColor: trackColor } }), _jsx(View, { className: "absolute h-[4] rounded-full top-[7]", style: { width: clamped * width, backgroundColor: valueColor } }), _jsx(View, { className: "absolute w-[12] h-[12] rounded-full top-[3]", style: { left: clamped * (width - 12), backgroundColor: valueColor } })] }), label !== undefined ? (_jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })) : null] }));
+}
+/** A Slider bound to an APVTS parameter (via ParameterBridge). */
+export function ParamSlider({ paramId, label, width, height, vertical }) {
+    const param = useParameter(paramId);
+    return (_jsx(Slider, { value: param.value, label: label ?? param.name.toUpperCase(), width: width, height: height, vertical: vertical, onChange: param.set, onBegin: param.begin, onEnd: param.end }));
+}
+/** A switch with a spring-animated thumb — bypass, on/off, A/B. */
+export function Toggle({ on, label, size = 22, disabled, trackColor = "#2A2F27", onColor = "#C6F135", thumbColor = "#F4F4F5", onChange, }) {
+    const t = useSpring(on ? 1 : 0, { stiffness: 300, damping: 28 });
+    const trackWidth = Math.round(size * 1.8);
+    const thumb = size - 6;
+    const travel = trackWidth - thumb - 6;
+    return (_jsxs(View, { className: "items-center gap-2", children: [_jsx(View, { className: `relative rounded-full ${disabled ? "opacity-40" : "cursor-pointer"}`, style: { width: trackWidth, height: size, backgroundColor: on ? onColor : trackColor }, onClick: disabled ? undefined : () => onChange(!on), children: _jsx(View, { className: "absolute rounded-full", style: {
+                        width: thumb,
+                        height: thumb,
+                        top: 3,
+                        left: 3 + clamp01(t) * travel,
+                        backgroundColor: thumbColor,
+                    } }) }), label !== undefined ? (_jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })) : null] }));
+}
+/** A Toggle bound to a bool-style APVTS parameter (on = value ≥ 0.5). */
+export function ParamToggle({ paramId, label, ...rest }) {
+    const param = useParameter(paramId);
+    return (_jsx(Toggle, { on: param.value >= 0.5, label: label ?? param.name.toUpperCase(), onChange: (next) => {
+            param.begin();
+            param.set(next ? 1 : 0);
+            param.end();
+        }, ...rest }));
+}
+/** A 2D drag pad with crosshair — filter cutoff/resonance, pan/depth… */
+export function XYPad({ x, y, width = 160, height = 160, label, disabled, trackColor = "#161B17", valueColor = "#C6F135", onChange, onBegin, onEnd, }) {
+    const start = useRef({ x: 0, y: 0 });
+    const cxv = clamp01(x);
+    const cyv = clamp01(y);
+    const thumb = 14;
+    const tx = cxv * (width - thumb);
+    const ty = (1 - cyv) * (height - thumb);
+    return (_jsxs(View, { className: "items-center gap-2", children: [_jsxs(View, { className: `relative rounded-lg overflow-hidden border ${disabled ? "opacity-40" : "cursor-pointer"}`, style: { width, height, backgroundColor: trackColor, borderColor: "#00000055" }, onDragStart: disabled
+                    ? undefined
+                    : () => {
+                        start.current = { x: cxv, y: cyv };
+                        onBegin?.();
+                    }, onDrag: disabled
+                    ? undefined
+                    : (e) => onChange(clamp01(start.current.x + e.dx / width), clamp01(start.current.y - e.dy / height)), onDragEnd: disabled ? undefined : () => onEnd?.(), children: [_jsx(View, { className: "absolute left-0 right-0 h-[1]", style: { top: ty + thumb / 2, backgroundColor: valueColor, opacity: 0.35 } }), _jsx(View, { className: "absolute top-0 bottom-0 w-[1]", style: { left: tx + thumb / 2, backgroundColor: valueColor, opacity: 0.35 } }), _jsx(View, { className: "absolute rounded-full", style: { width: thumb, height: thumb, left: tx, top: ty, backgroundColor: valueColor } })] }), label !== undefined ? (_jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })) : null] }));
+}
+/** An XYPad driving two APVTS parameters at once. */
+export function ParamXYPad({ paramX, paramY, label, ...rest }) {
+    const px = useParameter(paramX);
+    const py = useParameter(paramY);
+    return (_jsx(XYPad, { x: px.value, y: py.value, label: label ?? `${px.name} / ${py.name}`.toUpperCase(), onChange: (nx, ny) => {
+            px.set(nx);
+            py.set(ny);
+        }, onBegin: () => {
+            px.begin();
+            py.begin();
+        }, onEnd: () => {
+            px.end();
+            py.end();
+        }, ...rest }));
+}
+/** A row of exclusive options — oscillator shapes, filter modes, A/B/C. */
+export function Segmented({ options, index, label, disabled, trackColor = "#2A2F27", activeColor = "#C6F135", textColor = "#a1a1aa", activeTextColor = "#09090b", onChange, }) {
+    const current = Math.min(options.length - 1, Math.max(0, index));
+    return (_jsxs(View, { className: "items-center gap-2", children: [_jsx(View, { className: `flex-row rounded-lg p-[3] gap-[3] ${disabled ? "opacity-40" : ""}`, style: { backgroundColor: trackColor }, children: options.map((option, i) => (_jsx(View, { className: `px-3 py-[6] rounded-md ${disabled ? "" : "cursor-pointer"}`, style: { backgroundColor: i === current ? activeColor : "#00000000" }, onClick: disabled ? undefined : () => onChange(i), children: _jsx(Text, { className: "text-[11] font-bold tracking-wide", style: { color: i === current ? activeTextColor : textColor }, children: option }) }, `${option}-${i}`))) }), label !== undefined ? (_jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })) : null] }));
+}
+/** A Segmented bound to a choice-style APVTS parameter: the normalized
+    value maps to an option index (index / (count − 1)). */
+export function ParamSegmented({ paramId, options, label, ...rest }) {
+    const param = useParameter(paramId);
+    const count = Math.max(1, options.length);
+    const index = Math.round(param.value * (count - 1));
+    return (_jsx(Segmented, { options: options, index: index, label: label ?? param.name.toUpperCase(), onChange: (i) => {
+            param.begin();
+            param.set(count <= 1 ? 0 : i / (count - 1));
+            param.end();
+        }, ...rest }));
+}

package/dist/cx.d.ts

@@ -0,0 +1,6 @@
+export type ClassValue = string | number | null | false | undefined | ClassValue[] | Record<string, unknown>;
+/**
+ * `cx("flex", active && "bg-red-500", { "opacity-40": disabled })`
+ * → `"flex bg-red-500 opacity-40"`.
+ */
+export declare function cx(...inputs: ClassValue[]): string;

package/dist/cx.js

@@ -0,0 +1,26 @@
+// cx — compose conditional className strings (a tiny clsx).
+/**
+ * `cx("flex", active && "bg-red-500", { "opacity-40": disabled })`
+ * → `"flex bg-red-500 opacity-40"`.
+ */
+export function cx(...inputs) {
+    const out = [];
+    for (const input of inputs) {
+        if (!input && input !== 0)
+            continue;
+        if (typeof input === "string" || typeof input === "number") {
+            out.push(String(input));
+        }
+        else if (Array.isArray(input)) {
+            const nested = cx(...input);
+            if (nested)
+                out.push(nested);
+        }
+        else if (typeof input === "object") {
+            for (const [key, value] of Object.entries(input))
+                if (value)
+                    out.push(key);
+        }
+    }
+    return out.join(" ");
+}

package/dist/hooks.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Subscribes to a C++ event (RootView::sendNativeEvent) for the lifetime
+ * of the component. The handler can close over fresh state — it is kept
+ * current without resubscribing.
+ *
+ *   useNativeEvent("download:progress", (p) => setProgress(p.ratio));
+ */
+export declare function useNativeEvent(name: string, handler: (payload: any) => void): void;

package/dist/hooks.js

@@ -0,0 +1,15 @@
+// Convenience hooks over the native bridge.
+import { useEffect, useRef } from "react";
+import { native } from "./native";
+/**
+ * Subscribes to a C++ event (RootView::sendNativeEvent) for the lifetime
+ * of the component. The handler can close over fresh state — it is kept
+ * current without resubscribing.
+ *
+ *   useNativeEvent("download:progress", (p) => setProgress(p.ratio));
+ */
+export function useNativeEvent(name, handler) {
+    const handlerRef = useRef(handler);
+    handlerRef.current = handler;
+    useEffect(() => native.on(name, (payload) => handlerRef.current(payload)), [name]);
+}

package/dist/hostConfig.d.ts

@@ -0,0 +1,44 @@
+export interface Instance {
+    id: number;
+    type: string;
+}
+export type TextInstance = Instance;
+export declare const hostConfig: {
+    supportsMutation: boolean;
+    supportsPersistence: boolean;
+    supportsHydration: boolean;
+    isPrimaryRenderer: boolean;
+    supportsMicrotasks: boolean;
+    scheduleMicrotask: (fn: () => void) => void;
+    scheduleTimeout: (fn: (...args: unknown[]) => void, delay?: number) => number;
+    cancelTimeout: (id: ReturnType<typeof setTimeout>) => void;
+    noTimeout: -1;
+    getRootHostContext: () => {};
+    getChildHostContext: (parent: object) => object;
+    getPublicInstance: (instance: Instance) => Instance;
+    prepareForCommit: () => null;
+    resetAfterCommit: () => void;
+    shouldSetTextContent: () => boolean;
+    createInstance(type: string, props: Record<string, unknown>): Instance;
+    createTextInstance(text: string): TextInstance;
+    appendInitialChild: (parent: Instance, child: Instance) => void;
+    appendChild: (parent: Instance, child: Instance) => void;
+    appendChildToContainer: (_container: unknown, child: Instance) => void;
+    insertBefore: (parent: Instance, child: Instance, before: Instance) => void;
+    insertInContainerBefore: (_container: unknown, child: Instance, before: Instance) => void;
+    removeChild: (parent: Instance, child: Instance) => void;
+    removeChildFromContainer: (_container: unknown, child: Instance) => void;
+    finalizeInitialChildren: () => boolean;
+    prepareUpdate: () => boolean;
+    commitUpdate(instance: Instance, _updatePayload: unknown, _type: string, _prevProps: Record<string, unknown>, nextProps: Record<string, unknown>): void;
+    commitTextUpdate(instance: TextInstance, _oldText: string, newText: string): void;
+    clearContainer: () => void;
+    detachDeletedInstance(instance: Instance): void;
+    getCurrentEventPriority: () => number;
+    getInstanceFromNode: () => null;
+    getInstanceFromScope: () => null;
+    beforeActiveInstanceBlur: () => void;
+    afterActiveInstanceBlur: () => void;
+    prepareScopeUpdate: () => void;
+    preparePortalMount: () => void;
+};

package/dist/hostConfig.js

@@ -0,0 +1,118 @@
+// react-reconciler host config (mutation mode). React commits become batched
+// mutation ops; event props become handler-registry entries + listener lists.
+import { DefaultEventPriority } from "react-reconciler/constants";
+import { queueOp, flushOps, setHandlers, removeHandlers } from "./bridge";
+import { tw } from "./tw";
+let nextId = 1;
+const hostTypes = {
+    "vs-view": "view",
+    "vs-text": "text",
+    "vs-image": "image",
+    "vs-textinput": "textinput",
+    "vs-native": "native",
+};
+const eventPropNames = {
+    onClick: "click",
+    onMouseEnter: "mouseenter",
+    onMouseLeave: "mouseleave",
+    onMouseDown: "mousedown",
+    onMouseUp: "mouseup",
+    onDragStart: "dragstart",
+    onDrag: "drag",
+    onDragEnd: "dragend",
+    onChange: "change",
+    onSubmit: "submit",
+    onFocus: "focus",
+    onBlur: "blur",
+};
+function normalizeProps(props) {
+    const payload = {};
+    const handlers = new Map();
+    const listeners = [];
+    const resolved = typeof props.className === "string" ? tw(props.className) : { style: {} };
+    payload.style = { ...resolved.style, ...(props.style ?? {}) };
+    if (resolved.hoverStyle)
+        payload.hoverStyle = resolved.hoverStyle;
+    if (resolved.activeStyle)
+        payload.activeStyle = resolved.activeStyle;
+    if (resolved.focusStyle)
+        payload.focusStyle = resolved.focusStyle;
+    for (const [key, value] of Object.entries(props)) {
+        if (value === undefined || key === "children" || key === "className" || key === "style")
+            continue;
+        const eventType = eventPropNames[key];
+        if (eventType && typeof value === "function") {
+            handlers.set(eventType, value);
+            listeners.push(eventType);
+            continue;
+        }
+        if (typeof value !== "function" && typeof value !== "object")
+            payload[key] = value;
+    }
+    if (listeners.length > 0)
+        payload.listeners = listeners;
+    return { payload, handlers };
+}
+function applyProps(instance, props) {
+    const { payload, handlers } = normalizeProps(props);
+    setHandlers(instance.id, handlers);
+    queueOp(["setProps", instance.id, payload]);
+}
+export const hostConfig = {
+    supportsMutation: true,
+    supportsPersistence: false,
+    supportsHydration: false,
+    isPrimaryRenderer: true,
+    supportsMicrotasks: true,
+    scheduleMicrotask: (fn) => queueMicrotask(fn),
+    scheduleTimeout: (fn, delay) => setTimeout(fn, delay),
+    cancelTimeout: (id) => clearTimeout(id),
+    noTimeout: -1,
+    getRootHostContext: () => ({}),
+    getChildHostContext: (parent) => parent,
+    getPublicInstance: (instance) => instance,
+    prepareForCommit: () => null,
+    resetAfterCommit: () => flushOps(),
+    shouldSetTextContent: () => false,
+    createInstance(type, props) {
+        const hostType = hostTypes[type];
+        if (!hostType)
+            throw new Error(`Unknown VSReacT element <${type}>`);
+        const instance = { id: nextId++, type: hostType };
+        queueOp(["create", instance.id, hostType]);
+        applyProps(instance, props);
+        return instance;
+    },
+    createTextInstance(text) {
+        const instance = { id: nextId++, type: "rawtext" };
+        queueOp(["create", instance.id, "rawtext"]);
+        queueOp(["setText", instance.id, text]);
+        return instance;
+    },
+    appendInitialChild: (parent, child) => queueOp(["appendChild", parent.id, child.id]),
+    appendChild: (parent, child) => queueOp(["appendChild", parent.id, child.id]),
+    appendChildToContainer: (_container, child) => queueOp(["appendChild", 0, child.id]),
+    insertBefore: (parent, child, before) => queueOp(["insertBefore", parent.id, child.id, before.id]),
+    insertInContainerBefore: (_container, child, before) => queueOp(["insertBefore", 0, child.id, before.id]),
+    removeChild: (parent, child) => queueOp(["removeChild", parent.id, child.id]),
+    removeChildFromContainer: (_container, child) => queueOp(["removeChild", 0, child.id]),
+    finalizeInitialChildren: () => false,
+    prepareUpdate: () => true,
+    commitUpdate(instance, _updatePayload, _type, _prevProps, nextProps) {
+        applyProps(instance, nextProps);
+    },
+    commitTextUpdate(instance, _oldText, newText) {
+        queueOp(["setText", instance.id, newText]);
+    },
+    clearContainer: () => queueOp(["clearContainer"]),
+    detachDeletedInstance(instance) {
+        removeHandlers(instance.id);
+    },
+    getCurrentEventPriority: () => DefaultEventPriority,
+    getInstanceFromNode: () => null,
+    getInstanceFromScope: () => null,
+    beforeActiveInstanceBlur: () => { },
+    afterActiveInstanceBlur: () => { },
+    prepareScopeUpdate: () => { },
+    preparePortalMount: () => { },
+};