@vsreact/core 0.0.2 → 0.0.3

package/dist/animation.d.ts

@@ -17,3 +17,22 @@ export interface TweenOptions {
 /** 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

@@ -45,3 +45,46 @@ export function useTween({ duration, delay = 0, easing = Easing.outCubic, onComp
 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/controls.d.ts

@@ -24,7 +24,12 @@ export interface ParamKnobProps {
 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;
@@ -33,11 +38,89 @@ export interface SliderProps {
     onBegin?: () => void;
     onEnd?: () => void;
 }
-export declare function Slider({ value, width, label, disabled, trackColor, valueColor, onChange, onBegin, onEnd, }: SliderProps): import("react").JSX.Element;
+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 }: ParamSliderProps): import("react").JSX.Element;
+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

@@ -1,12 +1,15 @@
 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.
+// 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 Math.min(1, Math.max(0, startValue - dy * sensitivity));
+    return clamp01(startValue - dy * sensitivity);
 }
 const ARC_START = -135;
 const ARC_END = 135;
@@ -33,20 +36,95 @@ 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, }) {
+export function Slider({ value, width = 160, height = 160, vertical, 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
+    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
                     : () => {
-                        startValue.current = clamped;
+                        start.current = { x: cxv, y: cyv };
                         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] }));
+                    : (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] }));
 }
-/** A Slider bound to an APVTS parameter (via ParameterBridge). */
-export function ParamSlider({ paramId, label, width }) {
+/** 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);
-    return (_jsx(Slider, { value: param.value, label: label ?? param.name.toUpperCase(), width: width, onChange: param.set, onBegin: param.begin, onEnd: param.end }));
+    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/index.d.ts

@@ -4,12 +4,15 @@ 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 { useTween, lerp, Easing } from "./animation";
-export type { TweenOptions, EasingFn } from "./animation";
+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, ParamKnob, ParamSlider, dragToValue } from "./controls";
-export type { KnobProps, SliderProps, ParamKnobProps, ParamSliderProps } from "./controls";
+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

@@ -1,11 +1,13 @@
-// vsreact public API. runtime must load first — it installs the
+// @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 { useTween, lerp, Easing } from "./animation";
+export { cx } from "./cx";
+export { useTween, useSpring, springStep, lerp, Easing } from "./animation";
 export { useParameter } from "./parameters";
-export { Knob, Slider, ParamKnob, ParamSlider, dragToValue } from "./controls";
+export { Knob, Slider, Toggle, XYPad, Segmented, ParamKnob, ParamSlider, ParamToggle, ParamXYPad, ParamSegmented, dragToValue, } from "./controls";

package/dist/theme.js

@@ -1,5 +1,80 @@
-// Tailwind v3 palettes (the curated subset VSReacT ships with).
+// 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",

package/dist/tw.js

@@ -71,6 +71,7 @@ const staticClasses = {
 };
 const textSizes = {
     xs: 12, sm: 14, base: 16, lg: 18, xl: 20, "2xl": 24, "3xl": 30, "4xl": 36,
+    "5xl": 48, "6xl": 60,
 };
 const radiusSizes = {
     "": 4, sm: 2, md: 6, lg: 8, xl: 12, "2xl": 16, "3xl": 24, full: 9999,
@@ -90,6 +91,7 @@ const radiusCorners = {
 const lengthKeys = {
     w: ["width"],
     h: ["height"],
+    size: ["width", "height"],
     "min-w": ["minWidth"],
     "min-h": ["minHeight"],
     "max-w": ["maxWidth"],
@@ -116,6 +118,8 @@ const lengthKeys = {
     bottom: ["bottom"],
     left: ["left"],
     inset: ["left", "right", "top", "bottom"],
+    "inset-x": ["left", "right"],
+    "inset-y": ["top", "bottom"],
     basis: ["flexBasis"],
 };
 const warned = new Set();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vsreact/core",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Write React. Ship native VST. A React renderer for JUCE audio plugins — QuickJS + Yoga + juce::Graphics, no webview.",
   "keywords": [
     "react",

package/src/animation.test.tsx

@@ -1,5 +1,6 @@
 import { describe, expect, test } from "bun:test";
-import { Easing, lerp } from "./animation";
+import { Easing, lerp, springStep } from "./animation";
+import { cx } from "./cx";
 
 describe("animation", () => {
   test("easing curves start at 0 and end at 1", () => {
@@ -20,3 +21,57 @@ describe("animation", () => {
     expect(lerp(4, 4, 0.3)).toBe(4);
   });
 });
+
+describe("springStep", () => {
+  const settle = (options = {}) => {
+    let p = 0;
+    let v = 0;
+    for (let i = 0; i < 600; i++) [p, v] = springStep(p, v, 1, options, 16);
+    return [p, v];
+  };
+
+  test("converges to the target and comes to rest", () => {
+    const [p, v] = settle();
+    expect(p).toBeCloseTo(1, 3);
+    expect(Math.abs(v)).toBeLessThan(0.001);
+  });
+
+  test("accelerates toward the target from rest", () => {
+    const [p1, v1] = springStep(0, 0, 1, {}, 16);
+    expect(v1).toBeGreaterThan(0);
+    expect(p1).toBeGreaterThan(0);
+    expect(p1).toBeLessThan(1);
+  });
+
+  test("underdamped springs overshoot; overdamped don't", () => {
+    let p = 0;
+    let v = 0;
+    let peak = 0;
+    for (let i = 0; i < 600; i++) {
+      [p, v] = springStep(p, v, 1, { stiffness: 300, damping: 8 }, 16);
+      peak = Math.max(peak, p);
+    }
+    expect(peak).toBeGreaterThan(1.01);
+
+    p = 0;
+    v = 0;
+    peak = 0;
+    for (let i = 0; i < 600; i++) {
+      [p, v] = springStep(p, v, 1, { stiffness: 120, damping: 40 }, 16);
+      peak = Math.max(peak, p);
+    }
+    expect(peak).toBeLessThanOrEqual(1.001);
+  });
+});
+
+describe("cx", () => {
+  test("joins strings and skips falsy values", () => {
+    expect(cx("flex", false && "hidden", undefined, null, "", "gap-2")).toBe("flex gap-2");
+  });
+
+  test("supports arrays and object maps", () => {
+    expect(cx(["flex", ["items-center"]], { "opacity-40": true, "cursor-pointer": false })).toBe(
+      "flex items-center opacity-40",
+    );
+  });
+});