@vsreact/core 0.0.1 → 0.0.2

package/dist/animation.d.ts

@@ -0,0 +1,19 @@
+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;

package/dist/animation.js

@@ -0,0 +1,47 @@
+// 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;
+}

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,43 @@
+/** 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;
+    width?: number;
+    label?: string;
+    disabled?: boolean;
+    trackColor?: string;
+    valueColor?: string;
+    onChange: (value: number) => void;
+    onBegin?: () => void;
+    onEnd?: () => void;
+}
+export declare function Slider({ value, width, label, disabled, trackColor, valueColor, onChange, onBegin, onEnd, }: SliderProps): import("react").JSX.Element;
+export interface ParamSliderProps {
+    paramId: string;
+    label?: string;
+    width?: number;
+}
+/** A Slider bound to an APVTS parameter (via ParameterBridge). */
+export declare function ParamSlider({ paramId, label, width }: ParamSliderProps): import("react").JSX.Element;

package/dist/controls.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Knob and Slider — the classic VST controls, drawn by the VSReacT painter
+// (arc styles) and driven by drag gestures.
+import { useRef } from "react";
+import { View, Text } from "./primitives";
+import { useParameter } from "./parameters";
+/** Vertical-drag-to-value mapping shared by Knob (and tested in isolation). */
+export function dragToValue(startValue, dy, sensitivity = 0.005) {
+    return Math.min(1, Math.max(0, 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, label, disabled, trackColor = "#2A2F27", valueColor = "#C6F135", onChange, onBegin, onEnd, }) {
+    const startValue = useRef(0);
+    const clamped = Math.min(1, Math.max(0, value));
+    return (_jsxs(View, { className: "gap-2", children: [_jsxs(View, { className: `h-[18] justify-center relative ${disabled ? "opacity-40" : "cursor-pointer"}`, style: { width }, onDragStart: disabled
+                    ? undefined
+                    : () => {
+                        startValue.current = clamped;
+                        onBegin?.();
+                    }, onDrag: disabled
+                    ? undefined
+                    : (e) => onChange(Math.min(1, Math.max(0, startValue.current + e.dx / width))), onDragEnd: disabled ? undefined : () => onEnd?.(), 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 }) {
+    const param = useParameter(paramId);
+    return (_jsx(Slider, { value: param.value, label: label ?? param.name.toUpperCase(), width: width, onChange: param.set, onBegin: param.begin, onEnd: param.end }));
+}

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: () => { },
+};

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import "./runtime";
+import "./bridge";
+export { View, Text, Image, TextInput, NativeView } from "./primitives";
+export type { CommonProps, TextProps, ImageProps, TextInputProps, NativeViewProps, } from "./primitives";
+export { render, unmount } from "./render";
+export { native } from "./native";
+export { configureTheme, tw } from "./tw";
+export type { Style, ResolvedClasses } from "./tw";
+export { useTween, lerp, Easing } from "./animation";
+export type { TweenOptions, EasingFn } from "./animation";
+export { useParameter } from "./parameters";
+export type { ParameterState, ParameterHandle } from "./parameters";
+export { Knob, Slider, ParamKnob, ParamSlider, dragToValue } from "./controls";
+export type { KnobProps, SliderProps, ParamKnobProps, ParamSliderProps } from "./controls";
+export type { DragEventPayload } from "./primitives";

package/dist/index.js

@@ -0,0 +1,11 @@
+// vsreact public API. runtime must load first — it installs the
+// timer/console/microtask shims react depends on inside QuickJS.
+import "./runtime";
+import "./bridge";
+export { View, Text, Image, TextInput, NativeView } from "./primitives";
+export { render, unmount } from "./render";
+export { native } from "./native";
+export { configureTheme, tw } from "./tw";
+export { useTween, lerp, Easing } from "./animation";
+export { useParameter } from "./parameters";
+export { Knob, Slider, ParamKnob, ParamSlider, dragToValue } from "./controls";

package/dist/native.d.ts

@@ -0,0 +1,6 @@
+export declare const native: {
+    /** Synchronously invokes a C++ handler registered in RootOptions.onNativeCall. */
+    call(name: string, args?: unknown): any;
+    /** Subscribes to events pushed from C++ via RootView::sendNativeEvent. */
+    on(name: string, cb: (payload: any) => void): () => void;
+};

package/dist/native.js

@@ -0,0 +1,16 @@
+// App-level messaging with the C++ host.
+import { addNativeListener } from "./bridge";
+export const native = {
+    /** Synchronously invokes a C++ handler registered in RootOptions.onNativeCall. */
+    call(name, args) {
+        const fn = globalThis.__vsreact_nativeCall;
+        if (typeof fn !== "function")
+            return undefined;
+        const json = fn(name, JSON.stringify(args ?? null));
+        return json ? JSON.parse(json) : undefined;
+    },
+    /** Subscribes to events pushed from C++ via RootView::sendNativeEvent. */
+    on(name, cb) {
+        return addNativeListener(name, cb);
+    },
+};

package/dist/parameters.d.ts

@@ -0,0 +1,12 @@
+export interface ParameterState {
+    value: number;
+    text: string;
+    name: string;
+    label: string;
+}
+export interface ParameterHandle extends ParameterState {
+    set: (normalized: number) => void;
+    begin: () => void;
+    end: () => void;
+}
+export declare function useParameter(id: string): ParameterHandle;

package/dist/parameters.js

@@ -0,0 +1,33 @@
+// useParameter — two-way binding to a juce::AudioProcessorValueTreeState
+// parameter through vsreact::ParameterBridge. Values are normalized 0..1.
+import { useCallback, useEffect, useState } from "react";
+import { native } from "./native";
+export function useParameter(id) {
+    const [state, setState] = useState(() => {
+        const initial = native.call("param:get", { id });
+        return initial && typeof initial.value === "number"
+            ? {
+                value: initial.value,
+                text: String(initial.text ?? ""),
+                name: String(initial.name ?? id),
+                label: String(initial.label ?? ""),
+            }
+            : { value: 0, text: "", name: id, label: "" };
+    });
+    useEffect(() => native.on("param", (p) => {
+        if (p?.id === id)
+            setState((s) => ({ ...s, value: Number(p.value), text: String(p.text ?? "") }));
+    }), [id]);
+    const set = useCallback((normalized) => {
+        const value = Math.min(1, Math.max(0, normalized));
+        setState((s) => ({ ...s, value }));
+        native.call("param:set", { id, value });
+    }, [id]);
+    const begin = useCallback(() => {
+        native.call("param:begin", { id });
+    }, [id]);
+    const end = useCallback(() => {
+        native.call("param:end", { id });
+    }, [id]);
+    return { ...state, set, begin, end };
+}

package/dist/primitives.d.ts

@@ -0,0 +1,70 @@
+import { type ReactNode } from "react";
+import type { Style } from "./tw";
+export interface DragEventPayload {
+    /** Delta from the drag start, in root coordinates. */
+    dx: number;
+    dy: number;
+    /** Current pointer position in root coordinates. */
+    x: number;
+    y: number;
+}
+export interface CommonProps {
+    className?: string;
+    style?: Style;
+    children?: ReactNode;
+    /** Resets the scroll offset of an overflow-y-scroll container. */
+    scrollTop?: number;
+    onClick?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    onMouseDown?: () => void;
+    onMouseUp?: () => void;
+    onDragStart?: (e: DragEventPayload) => void;
+    onDrag?: (e: DragEventPayload) => void;
+    onDragEnd?: (e: DragEventPayload) => void;
+}
+export declare function View(props: CommonProps): import("react").ReactElement<CommonProps, string | import("react").JSXElementConstructor<any>>;
+export interface TextProps extends Omit<CommonProps, "children"> {
+    children?: ReactNode;
+}
+export declare function Text(props: TextProps): import("react").ReactElement<TextProps, string | import("react").JSXElementConstructor<any>>;
+export interface ImageProps extends CommonProps {
+    src: string;
+}
+export declare function Image(props: ImageProps): import("react").ReactElement<ImageProps, string | import("react").JSXElementConstructor<any>>;
+export interface TextInputProps extends Omit<CommonProps, "children" | "onChange" | "onSubmit"> {
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+}
+export declare function TextInput({ onChange, onSubmit, ...rest }: TextInputProps): import("react").ReactElement<{
+    onChange: ((payload: any) => void) | undefined;
+    onSubmit: ((payload: any) => void) | undefined;
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    style?: Style | undefined;
+    className?: string | undefined;
+    scrollTop?: number | undefined;
+    onClick?: (() => void) | undefined;
+    onMouseEnter?: (() => void) | undefined;
+    onMouseLeave?: (() => void) | undefined;
+    onMouseDown?: (() => void) | undefined;
+    onMouseUp?: (() => void) | undefined;
+    onDragStart?: ((e: DragEventPayload) => void) | undefined;
+    onDrag?: ((e: DragEventPayload) => void) | undefined;
+    onDragEnd?: ((e: DragEventPayload) => void) | undefined;
+}, string | import("react").JSXElementConstructor<any>>;
+export interface NativeViewProps extends CommonProps {
+    /** Id of a component factory registered in the C++ NativeRegistry. */
+    nativeId: string;
+}
+export declare function NativeView(props: NativeViewProps): import("react").ReactElement<NativeViewProps, string | import("react").JSXElementConstructor<any>>;

package/dist/primitives.js

@@ -0,0 +1,20 @@
+import { createElement } from "react";
+export function View(props) {
+    return createElement("vs-view", props);
+}
+export function Text(props) {
+    return createElement("vs-text", props);
+}
+export function Image(props) {
+    return createElement("vs-image", props);
+}
+export function TextInput({ onChange, onSubmit, ...rest }) {
+    return createElement("vs-textinput", {
+        ...rest,
+        onChange: onChange ? (payload) => onChange(String(payload?.value ?? "")) : undefined,
+        onSubmit: onSubmit ? (payload) => onSubmit(String(payload?.value ?? "")) : undefined,
+    });
+}
+export function NativeView(props) {
+    return createElement("vs-native", props);
+}

package/dist/render.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+/** Mounts (or re-renders) the app into the plugin window. */
+export declare function render(element: ReactNode): void;
+/** Unmounts the current app (used by hot reload teardown). */
+export declare function unmount(): void;

package/dist/render.js

@@ -0,0 +1,22 @@
+import Reconciler from "react-reconciler";
+import { LegacyRoot } from "react-reconciler/constants";
+import { hostConfig } from "./hostConfig";
+import { flushOps } from "./bridge";
+const reconciler = Reconciler(hostConfig);
+let container = null;
+/** Mounts (or re-renders) the app into the plugin window. */
+export function render(element) {
+    if (!container) {
+        container = reconciler.createContainer({}, LegacyRoot, null, false, null, "vsreact", (error) => console.error("[vsreact] recoverable error:", error), null);
+    }
+    reconciler.updateContainer(element, container, null, null);
+    flushOps();
+}
+/** Unmounts the current app (used by hot reload teardown). */
+export function unmount() {
+    if (container) {
+        reconciler.updateContainer(null, container, null, null);
+        flushOps();
+        container = null;
+    }
+}

package/dist/runtime.d.ts

@@ -0,0 +1,10 @@
+export type NativeFns = {
+    __vsreact_flush(json: string): void;
+    __vsreact_nativeCall(name: string, argsJson: string): string;
+    __vsreact_log(level: string, msg: string): void;
+    __vsreact_setTimer(id: number, ms: number): void;
+    __vsreact_clearTimer(id: number): void;
+};
+export declare const isHosted: boolean;
+/** Called by bridge.ts when C++ dispatches {kind:"timer",id}. */
+export declare function fireTimer(id: number): void;

package/dist/runtime.js

@@ -0,0 +1,68 @@
+// Environment shims for QuickJS. This module MUST be imported before react —
+// it provides the timer/console/microtask facilities react and the scheduler
+// expect. The __vsreact_* natives are registered by the C++ host; when absent
+// (e.g. under `bun test`) the shims fall back to the platform implementations.
+const g = globalThis;
+export const isHosted = typeof g.__vsreact_setTimer === "function";
+let nextTimerId = 1;
+const timers = new Map();
+/** Called by bridge.ts when C++ dispatches {kind:"timer",id}. */
+export function fireTimer(id) {
+    const entry = timers.get(id);
+    if (!entry)
+        return;
+    if (entry.intervalMs !== undefined)
+        g.__vsreact_setTimer(id, entry.intervalMs);
+    else
+        timers.delete(id);
+    entry.cb(...entry.args);
+}
+function stringify(value) {
+    if (typeof value === "string")
+        return value;
+    if (value instanceof Error)
+        return `${value.message}\n${value.stack ?? ""}`;
+    try {
+        return JSON.stringify(value) ?? String(value);
+    }
+    catch {
+        return String(value);
+    }
+}
+if (isHosted) {
+    g.setTimeout = ((cb, ms = 0, ...args) => {
+        const id = nextTimerId++;
+        timers.set(id, { cb, args });
+        g.__vsreact_setTimer(id, Math.max(0, ms | 0));
+        return id;
+    });
+    g.setInterval = ((cb, ms = 0, ...args) => {
+        const id = nextTimerId++;
+        const intervalMs = Math.max(1, ms | 0);
+        timers.set(id, { cb, args, intervalMs });
+        g.__vsreact_setTimer(id, intervalMs);
+        return id;
+    });
+    g.clearTimeout = g.clearInterval = ((id) => {
+        if (id !== undefined && timers.delete(id))
+            g.__vsreact_clearTimer(id);
+    });
+    const makeLog = (level) => (...args) => g.__vsreact_log(level, args.map(stringify).join(" "));
+    g.console = {
+        log: makeLog("log"),
+        info: makeLog("info"),
+        debug: makeLog("debug"),
+        warn: makeLog("warn"),
+        error: makeLog("error"),
+    };
+    g.queueMicrotask ??= (cb) => {
+        Promise.resolve().then(cb);
+    };
+    g.performance ??= { now: () => Date.now() };
+    // Typed loosely on purpose: the dist build has no Node/Bun types, and the
+    // shim only exists for libraries that probe NODE_ENV.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    g.process ??= { env: { NODE_ENV: "production" } };
+    g.self ??= g;
+    g.global ??= g;
+}

package/dist/theme.d.ts

@@ -0,0 +1,5 @@
+export type ThemeColors = Record<string, string>;
+export declare function setThemeColors(colors: ThemeColors): void;
+/** Resolves a color name ("zinc-900", "white", "accent", "lime-400/20",
+    "[#c6f135]") to "#rrggbb"/"#rrggbbaa", or undefined if unknown. */
+export declare function resolveColor(name: string): string | undefined;

package/dist/theme.js

@@ -0,0 +1,81 @@
+// Tailwind v3 palettes (the curated subset VSReacT ships with).
+const palettes = {
+    zinc: {
+        "50": "#fafafa", "100": "#f4f4f5", "200": "#e4e4e7", "300": "#d4d4d8",
+        "400": "#a1a1aa", "500": "#71717a", "600": "#52525b", "700": "#3f3f46",
+        "800": "#27272a", "900": "#18181b", "950": "#09090b",
+    },
+    neutral: {
+        "50": "#fafafa", "100": "#f5f5f5", "200": "#e5e5e5", "300": "#d4d4d4",
+        "400": "#a3a3a3", "500": "#737373", "600": "#525252", "700": "#404040",
+        "800": "#262626", "900": "#171717", "950": "#0a0a0a",
+    },
+    lime: {
+        "50": "#f7fee7", "100": "#ecfccb", "200": "#d9f99d", "300": "#bef264",
+        "400": "#a3e635", "500": "#84cc16", "600": "#65a30d", "700": "#4d7c0f",
+        "800": "#3f6212", "900": "#365314", "950": "#1a2e05",
+    },
+    red: {
+        "50": "#fef2f2", "100": "#fee2e2", "200": "#fecaca", "300": "#fca5a5",
+        "400": "#f87171", "500": "#ef4444", "600": "#dc2626", "700": "#b91c1c",
+        "800": "#991b1b", "900": "#7f1d1d", "950": "#450a0a",
+    },
+    amber: {
+        "50": "#fffbeb", "100": "#fef3c7", "200": "#fde68a", "300": "#fcd34d",
+        "400": "#fbbf24", "500": "#f59e0b", "600": "#d97706", "700": "#b45309",
+        "800": "#92400e", "900": "#78350f", "950": "#451a03",
+    },
+    emerald: {
+        "50": "#ecfdf5", "100": "#d1fae5", "200": "#a7f3d0", "300": "#6ee7b7",
+        "400": "#34d399", "500": "#10b981", "600": "#059669", "700": "#047857",
+        "800": "#065f46", "900": "#064e3b", "950": "#022c22",
+    },
+    sky: {
+        "50": "#f0f9ff", "100": "#e0f2fe", "200": "#bae6fd", "300": "#7dd3fc",
+        "400": "#38bdf8", "500": "#0ea5e9", "600": "#0284c7", "700": "#0369a1",
+        "800": "#075985", "900": "#0c4a6e", "950": "#082f49",
+    },
+};
+let themeColors = {};
+export function setThemeColors(colors) {
+    themeColors = { ...themeColors };
+    for (const [name, value] of Object.entries(colors))
+        themeColors[name] = value.toLowerCase();
+}
+/** Resolves a color name ("zinc-900", "white", "accent", "lime-400/20",
+    "[#c6f135]") to "#rrggbb"/"#rrggbbaa", or undefined if unknown. */
+export function resolveColor(name) {
+    let base = name;
+    let alpha;
+    const slash = name.lastIndexOf("/");
+    if (slash > 0) {
+        const pct = Number(name.slice(slash + 1));
+        if (Number.isFinite(pct)) {
+            base = name.slice(0, slash);
+            alpha = Math.round((pct / 100) * 255)
+                .toString(16)
+                .padStart(2, "0");
+        }
+    }
+    let hex;
+    if (base.startsWith("[#") && base.endsWith("]"))
+        hex = base.slice(1, -1).toLowerCase();
+    else if (base === "white")
+        hex = "#ffffff";
+    else if (base === "black")
+        hex = "#000000";
+    else if (base === "transparent")
+        hex = "#00000000";
+    else if (themeColors[base])
+        hex = themeColors[base];
+    else {
+        const dash = base.lastIndexOf("-");
+        if (dash > 0) {
+            const palette = palettes[base.slice(0, dash)];
+            hex = palette?.[base.slice(dash + 1)];
+        }
+    }
+    if (hex === undefined)
+        return undefined;
+    return alpha !== undefined && hex.length === 7 ? hex + alpha : hex;
+}

package/dist/tw.d.ts

@@ -0,0 +1,13 @@
+import { type ThemeColors } from "./theme";
+export type StyleValue = string | number;
+export type Style = Record<string, StyleValue>;
+export interface ResolvedClasses {
+    style: Style;
+    hoverStyle?: Style;
+    activeStyle?: Style;
+    focusStyle?: Style;
+}
+export declare function configureTheme(theme: {
+    colors?: ThemeColors;
+}): void;
+export declare function tw(classes: string): ResolvedClasses;

package/dist/tw.js

@@ -0,0 +1,260 @@
+import { resolveColor, setThemeColors } from "./theme";
+export function configureTheme(theme) {
+    if (theme.colors)
+        setThemeColors(theme.colors);
+    cache.clear();
+}
+const staticClasses = {
+    flex: {},
+    "flex-row": { flexDirection: "row" },
+    "flex-col": { flexDirection: "column" },
+    "flex-row-reverse": { flexDirection: "row-reverse" },
+    "flex-col-reverse": { flexDirection: "column-reverse" },
+    "flex-1": { flex: 1 },
+    "flex-auto": { flexGrow: 1, flexShrink: 1 },
+    "flex-none": { flexGrow: 0, flexShrink: 0 },
+    grow: { flexGrow: 1 },
+    "grow-0": { flexGrow: 0 },
+    shrink: { flexShrink: 1 },
+    "shrink-0": { flexShrink: 0 },
+    "flex-wrap": { flexWrap: "wrap" },
+    "flex-nowrap": { flexWrap: "nowrap" },
+    "items-start": { alignItems: "flex-start" },
+    "items-center": { alignItems: "center" },
+    "items-end": { alignItems: "flex-end" },
+    "items-stretch": { alignItems: "stretch" },
+    "items-baseline": { alignItems: "baseline" },
+    "justify-start": { justifyContent: "flex-start" },
+    "justify-center": { justifyContent: "center" },
+    "justify-end": { justifyContent: "flex-end" },
+    "justify-between": { justifyContent: "space-between" },
+    "justify-around": { justifyContent: "space-around" },
+    "justify-evenly": { justifyContent: "space-evenly" },
+    "self-start": { alignSelf: "flex-start" },
+    "self-center": { alignSelf: "center" },
+    "self-end": { alignSelf: "flex-end" },
+    "self-stretch": { alignSelf: "stretch" },
+    "self-auto": { alignSelf: "auto" },
+    absolute: { position: "absolute" },
+    relative: { position: "relative" },
+    "overflow-hidden": { overflow: "hidden" },
+    "overflow-visible": { overflow: "visible" },
+    "overflow-y-scroll": { overflow: "scroll" },
+    "overflow-scroll": { overflow: "scroll" },
+    "w-full": { width: "100%" },
+    "h-full": { height: "100%" },
+    "text-left": { textAlign: "left" },
+    "text-center": { textAlign: "center" },
+    "text-right": { textAlign: "right" },
+    "font-mono": { fontFamily: "monospace" },
+    "font-normal": { fontWeight: 400 },
+    "font-medium": { fontWeight: 500 },
+    "font-semibold": { fontWeight: 600 },
+    "font-bold": { fontWeight: 700 },
+    "tracking-tighter": { letterSpacing: -0.8 },
+    "tracking-tight": { letterSpacing: -0.4 },
+    "tracking-normal": { letterSpacing: 0 },
+    "tracking-wide": { letterSpacing: 0.4 },
+    "tracking-wider": { letterSpacing: 0.8 },
+    "tracking-widest": { letterSpacing: 1.6 },
+    border: { borderWidth: 1 },
+    "aspect-square": { aspectRatio: 1 },
+    "aspect-video": { aspectRatio: 16 / 9 },
+    "cursor-pointer": { cursor: "pointer" },
+    "cursor-text": { cursor: "text" },
+    "cursor-default": { cursor: "default" },
+    shadow: { shadowColor: "#00000066", shadowRadius: 4, shadowOffsetY: 1 },
+    "shadow-sm": { shadowColor: "#00000066", shadowRadius: 4, shadowOffsetY: 1 },
+    "shadow-md": { shadowColor: "#00000066", shadowRadius: 8, shadowOffsetY: 2 },
+    "shadow-lg": { shadowColor: "#00000066", shadowRadius: 12, shadowOffsetY: 4 },
+    "shadow-xl": { shadowColor: "#00000066", shadowRadius: 20, shadowOffsetY: 8 },
+};
+const textSizes = {
+    xs: 12, sm: 14, base: 16, lg: 18, xl: 20, "2xl": 24, "3xl": 30, "4xl": 36,
+};
+const radiusSizes = {
+    "": 4, sm: 2, md: 6, lg: 8, xl: 12, "2xl": 16, "3xl": 24, full: 9999,
+};
+const radiusCorners = {
+    "": ["borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius"],
+    t: ["borderTopLeftRadius", "borderTopRightRadius"],
+    b: ["borderBottomLeftRadius", "borderBottomRightRadius"],
+    l: ["borderTopLeftRadius", "borderBottomLeftRadius"],
+    r: ["borderTopRightRadius", "borderBottomRightRadius"],
+    tl: ["borderTopLeftRadius"],
+    tr: ["borderTopRightRadius"],
+    bl: ["borderBottomLeftRadius"],
+    br: ["borderBottomRightRadius"],
+};
+// Utilities whose value is a length on the 4px spacing scale.
+const lengthKeys = {
+    w: ["width"],
+    h: ["height"],
+    "min-w": ["minWidth"],
+    "min-h": ["minHeight"],
+    "max-w": ["maxWidth"],
+    "max-h": ["maxHeight"],
+    p: ["padding"],
+    px: ["paddingLeft", "paddingRight"],
+    py: ["paddingTop", "paddingBottom"],
+    pt: ["paddingTop"],
+    pr: ["paddingRight"],
+    pb: ["paddingBottom"],
+    pl: ["paddingLeft"],
+    m: ["margin"],
+    mx: ["marginLeft", "marginRight"],
+    my: ["marginTop", "marginBottom"],
+    mt: ["marginTop"],
+    mr: ["marginRight"],
+    mb: ["marginBottom"],
+    ml: ["marginLeft"],
+    gap: ["gap"],
+    "gap-x": ["columnGap"],
+    "gap-y": ["rowGap"],
+    top: ["top"],
+    right: ["right"],
+    bottom: ["bottom"],
+    left: ["left"],
+    inset: ["left", "right", "top", "bottom"],
+    basis: ["flexBasis"],
+};
+const warned = new Set();
+function warnUnknown(cls) {
+    if (warned.has(cls))
+        return;
+    warned.add(cls);
+    console.warn(`[vsreact] unknown class "${cls}" ignored`);
+}
+/** "4"→16, "1.5"→6, "px"→1, "1/2"→"50%", "full"→"100%", "[123]"→123, "[45%]"→"45%" */
+function parseLength(raw) {
+    if (raw.startsWith("[") && raw.endsWith("]")) {
+        const inner = raw.slice(1, -1);
+        if (inner.endsWith("%"))
+            return inner;
+        const n = Number(inner.replace(/px$/, ""));
+        return Number.isFinite(n) ? n : undefined;
+    }
+    if (raw === "px")
+        return 1;
+    if (raw === "full")
+        return "100%";
+    if (raw === "auto")
+        return "auto";
+    if (/^\d+\/\d+$/.test(raw)) {
+        const [num, den] = raw.split("/").map(Number);
+        return `${((num / den) * 100).toFixed(4).replace(/\.?0+$/, "")}%`;
+    }
+    const n = Number(raw);
+    return Number.isFinite(n) ? n * 4 : undefined;
+}
+function resolveClass(cls) {
+    const negative = cls.startsWith("-");
+    const body = negative ? cls.slice(1) : cls;
+    const negate = (v) => (negative && typeof v === "number" ? -v : v);
+    const known = staticClasses[body];
+    if (known && !negative)
+        return known;
+    // rounded, rounded-lg, rounded-t-lg, rounded-br-full, rounded-[10]
+    if (body === "rounded" || body.startsWith("rounded-")) {
+        const rest = body === "rounded" ? "" : body.slice("rounded-".length);
+        const parts = rest === "" ? [] : rest.split("-");
+        let corner = "";
+        let size = "";
+        if (parts.length === 1) {
+            if (parts[0] in radiusCorners)
+                corner = parts[0];
+            else
+                size = parts[0];
+        }
+        else if (parts.length === 2) {
+            [corner, size] = parts;
+        }
+        const corners = radiusCorners[corner];
+        const radius = size.startsWith("[") ? parseLength(size) : radiusSizes[size];
+        if (corners === undefined || radius === undefined)
+            return undefined;
+        if (corner === "")
+            return { borderRadius: radius };
+        const style = {};
+        for (const key of corners)
+            style[key] = radius;
+        return style;
+    }
+    const dash = body.indexOf("-");
+    if (dash <= 0)
+        return undefined;
+    // Longest matching length-utility prefix (handles gap-x-4 vs gap-4, min-w-*).
+    for (const prefix of Object.keys(lengthKeys).sort((a, b) => b.length - a.length)) {
+        if (body.startsWith(prefix + "-")) {
+            const value = parseLength(body.slice(prefix.length + 1));
+            if (value === undefined)
+                break;
+            const style = {};
+            for (const key of lengthKeys[prefix])
+                style[key] = negate(value);
+            return style;
+        }
+    }
+    const prefix = body.slice(0, dash);
+    const rest = body.slice(dash + 1);
+    switch (prefix) {
+        case "bg": {
+            const color = resolveColor(rest);
+            return color !== undefined ? { backgroundColor: color } : undefined;
+        }
+        case "text": {
+            if (rest in textSizes)
+                return { fontSize: textSizes[rest] };
+            const color = resolveColor(rest);
+            return color !== undefined ? { color } : undefined;
+        }
+        case "border": {
+            const n = Number(rest);
+            if (Number.isFinite(n))
+                return { borderWidth: n };
+            const color = resolveColor(rest);
+            return color !== undefined ? { borderColor: color } : undefined;
+        }
+        case "opacity": {
+            const n = Number(rest);
+            return Number.isFinite(n) ? { opacity: n / 100 } : undefined;
+        }
+        case "leading": {
+            const n = Number(rest);
+            return Number.isFinite(n) ? { lineHeight: n * 4 } : undefined;
+        }
+        case "flex": {
+            const n = Number(rest);
+            return Number.isFinite(n) ? { flex: n } : undefined;
+        }
+        default:
+            return undefined;
+    }
+}
+const cache = new Map();
+export function tw(classes) {
+    const cached = cache.get(classes);
+    if (cached)
+        return cached;
+    const result = { style: {} };
+    for (const cls of classes.split(/\s+/)) {
+        if (cls === "")
+            continue;
+        let bucket = "style";
+        let body = cls;
+        if (body.startsWith("hover:"))
+            [bucket, body] = ["hoverStyle", body.slice(6)];
+        else if (body.startsWith("active:"))
+            [bucket, body] = ["activeStyle", body.slice(7)];
+        else if (body.startsWith("focus:"))
+            [bucket, body] = ["focusStyle", body.slice(6)];
+        const resolved = resolveClass(body);
+        if (resolved === undefined) {
+            warnUnknown(cls);
+            continue;
+        }
+        result[bucket] = Object.assign(result[bucket] ?? {}, resolved);
+    }
+    cache.set(classes, result);
+    return result;
+}

package/package.json

@@ -1,29 +1,56 @@
 {
   "name": "@vsreact/core",
-  "version": "0.0.1",
+  "version": "0.0.2",
+  "description": "Write React. Ship native VST. A React renderer for JUCE audio plugins — QuickJS + Yoga + juce::Graphics, no webview.",
+  "keywords": [
+    "react",
+    "juce",
+    "vst",
+    "vst3",
+    "audio-plugin",
+    "renderer",
+    "quickjs",
+    "yoga",
+    "native",
+    "daw"
+  ],
   "type": "module",
   "license": "MIT",
+  "homepage": "https://vsreact.n9records.com",
+  "bugs": "https://github.com/N9RecordsTechnologiesIL/VSReacT/issues",
   "repository": {
     "type": "git",
     "url": "https://github.com/N9RecordsTechnologiesIL/VSReacT.git",
     "directory": "vsreact/js"
   },
-  "main": "src/index.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "bun": "./src/index.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
   "files": [
+    "dist",
     "src",
     "build.ts"
   ],
   "scripts": {
     "test": "bun test",
     "typecheck": "tsc --noEmit",
-    "build": "bun run build.ts"
+    "build": "bun run build.ts",
+    "build:dist": "tsc -p tsconfig.build.json",
+    "prepublishOnly": "bun run build:dist"
   },
   "dependencies": {
+    "@types/react": "^18.3.3",
     "react": "18.3.1",
     "react-reconciler": "0.29.2"
   },
   "devDependencies": {
-    "@types/react": "^18.3.3",
     "@types/react-reconciler": "0.28.8",
     "bun-types": "^1.3.14",
     "typescript": "^5.5.0"

package/src/runtime.ts

@@ -83,7 +83,10 @@ if (isHosted) {
   };
 
   g.performance ??= { now: () => Date.now() } as Performance;
-  g.process ??= { env: { NODE_ENV: "production" } } as unknown as typeof process;
+  // Typed loosely on purpose: the dist build has no Node/Bun types, and the
+  // shim only exists for libraries that probe NODE_ENV.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  g.process ??= { env: { NODE_ENV: "production" } } as any;
   g.self ??= g as unknown as Window & typeof globalThis;
   g.global ??= g;
 }