@vsreact/core 0.0.1 → 0.0.3

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+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 { useNativeEvent } from "./hooks";
+export { configureTheme, tw } from "./tw";
+export type { Style, ResolvedClasses } from "./tw";
+export { cx } from "./cx";
+export type { ClassValue } from "./cx";
+export { useTween, useSpring, springStep, lerp, Easing } from "./animation";
+export type { TweenOptions, SpringOptions, EasingFn } from "./animation";
+export { useParameter } from "./parameters";
+export type { ParameterState, ParameterHandle } from "./parameters";
+export { Knob, Slider, Toggle, XYPad, Segmented, ParamKnob, ParamSlider, ParamToggle, ParamXYPad, ParamSegmented, dragToValue, } from "./controls";
+export type { KnobProps, SliderProps, ToggleProps, XYPadProps, SegmentedProps, ParamKnobProps, ParamSliderProps, ParamToggleProps, ParamXYPadProps, ParamSegmentedProps, } from "./controls";
+export type { DragEventPayload } from "./primitives";

package/dist/index.js

@@ -0,0 +1,13 @@
+// @vsreact/core 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 { useNativeEvent } from "./hooks";
+export { configureTheme, tw } from "./tw";
+export { cx } from "./cx";
+export { useTween, useSpring, springStep, lerp, Easing } from "./animation";
+export { useParameter } from "./parameters";
+export { Knob, Slider, Toggle, XYPad, Segmented, ParamKnob, ParamSlider, ParamToggle, ParamXYPad, ParamSegmented, 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,156 @@
+// The full Tailwind v3 color palette.
+const palettes = {
+    slate: {
+        "50": "#f8fafc", "100": "#f1f5f9", "200": "#e2e8f0", "300": "#cbd5e1",
+        "400": "#94a3b8", "500": "#64748b", "600": "#475569", "700": "#334155",
+        "800": "#1e293b", "900": "#0f172a", "950": "#020617",
+    },
+    gray: {
+        "50": "#f9fafb", "100": "#f3f4f6", "200": "#e5e7eb", "300": "#d1d5db",
+        "400": "#9ca3af", "500": "#6b7280", "600": "#4b5563", "700": "#374151",
+        "800": "#1f2937", "900": "#111827", "950": "#030712",
+    },
+    stone: {
+        "50": "#fafaf9", "100": "#f5f5f4", "200": "#e7e5e4", "300": "#d6d3d1",
+        "400": "#a8a29e", "500": "#78716c", "600": "#57534e", "700": "#44403c",
+        "800": "#292524", "900": "#1c1917", "950": "#0c0a09",
+    },
+    orange: {
+        "50": "#fff7ed", "100": "#ffedd5", "200": "#fed7aa", "300": "#fdba74",
+        "400": "#fb923c", "500": "#f97316", "600": "#ea580c", "700": "#c2410c",
+        "800": "#9a3412", "900": "#7c2d12", "950": "#431407",
+    },
+    yellow: {
+        "50": "#fefce8", "100": "#fef9c3", "200": "#fef08a", "300": "#fde047",
+        "400": "#facc15", "500": "#eab308", "600": "#ca8a04", "700": "#a16207",
+        "800": "#854d0e", "900": "#713f12", "950": "#422006",
+    },
+    green: {
+        "50": "#f0fdf4", "100": "#dcfce7", "200": "#bbf7d0", "300": "#86efac",
+        "400": "#4ade80", "500": "#22c55e", "600": "#16a34a", "700": "#15803d",
+        "800": "#166534", "900": "#14532d", "950": "#052e16",
+    },
+    teal: {
+        "50": "#f0fdfa", "100": "#ccfbf1", "200": "#99f6e4", "300": "#5eead4",
+        "400": "#2dd4bf", "500": "#14b8a6", "600": "#0d9488", "700": "#0f766e",
+        "800": "#115e59", "900": "#134e4a", "950": "#042f2e",
+    },
+    cyan: {
+        "50": "#ecfeff", "100": "#cffafe", "200": "#a5f3fc", "300": "#67e8f9",
+        "400": "#22d3ee", "500": "#06b6d4", "600": "#0891b2", "700": "#0e7490",
+        "800": "#155e75", "900": "#164e63", "950": "#083344",
+    },
+    blue: {
+        "50": "#eff6ff", "100": "#dbeafe", "200": "#bfdbfe", "300": "#93c5fd",
+        "400": "#60a5fa", "500": "#3b82f6", "600": "#2563eb", "700": "#1d4ed8",
+        "800": "#1e40af", "900": "#1e3a8a", "950": "#172554",
+    },
+    indigo: {
+        "50": "#eef2ff", "100": "#e0e7ff", "200": "#c7d2fe", "300": "#a5b4fc",
+        "400": "#818cf8", "500": "#6366f1", "600": "#4f46e5", "700": "#4338ca",
+        "800": "#3730a3", "900": "#312e81", "950": "#1e1b4b",
+    },
+    violet: {
+        "50": "#f5f3ff", "100": "#ede9fe", "200": "#ddd6fe", "300": "#c4b5fd",
+        "400": "#a78bfa", "500": "#8b5cf6", "600": "#7c3aed", "700": "#6d28d9",
+        "800": "#5b21b6", "900": "#4c1d95", "950": "#2e1065",
+    },
+    purple: {
+        "50": "#faf5ff", "100": "#f3e8ff", "200": "#e9d5ff", "300": "#d8b4fe",
+        "400": "#c084fc", "500": "#a855f7", "600": "#9333ea", "700": "#7e22ce",
+        "800": "#6b21a8", "900": "#581c87", "950": "#3b0764",
+    },
+    fuchsia: {
+        "50": "#fdf4ff", "100": "#fae8ff", "200": "#f5d0fe", "300": "#f0abfc",
+        "400": "#e879f9", "500": "#d946ef", "600": "#c026d3", "700": "#a21caf",
+        "800": "#86198f", "900": "#701a75", "950": "#4a044e",
+    },
+    pink: {
+        "50": "#fdf2f8", "100": "#fce7f3", "200": "#fbcfe8", "300": "#f9a8d4",
+        "400": "#f472b6", "500": "#ec4899", "600": "#db2777", "700": "#be185d",
+        "800": "#9d174d", "900": "#831843", "950": "#500724",
+    },
+    rose: {
+        "50": "#fff1f2", "100": "#ffe4e6", "200": "#fecdd3", "300": "#fda4af",
+        "400": "#fb7185", "500": "#f43f5e", "600": "#e11d48", "700": "#be123c",
+        "800": "#9f1239", "900": "#881337", "950": "#4c0519",
+    },
+    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;