@vsreact/core 0.0.1 → 0.0.3

package/dist/tw.js

@@ -0,0 +1,264 @@
+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,
+    "5xl": 48, "6xl": 60,
+};
+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"],
+    size: ["width", "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"],
+    "inset-x": ["left", "right"],
+    "inset-y": ["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.3",
+  "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/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",
+    );
+  });
+});

package/src/animation.ts

@@ -68,3 +68,74 @@ export function useTween({ duration, delay = 0, easing = Easing.outCubic, onComp
 export function lerp(from: number, to: number, t: number): number {
   return from + (to - from) * t;
 }
+
+// ── springs ────────────────────────────────────────────────────────────
+
+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 function springStep(
+  position: number,
+  velocity: number,
+  target: number,
+  { stiffness = 170, damping = 24, mass = 1 }: SpringOptions,
+  dtMs: number,
+): [number, number] {
+  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: number, options: SpringOptions = {}): number {
+  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/src/controls.test.tsx

@@ -0,0 +1,131 @@
+import { beforeEach, describe, expect, test } from "bun:test";
+
+const batches: unknown[][][] = [];
+const nativeCalls: Array<{ name: string; args: any }> = [];
+let paramGetResult: any = { value: 0.5, text: "0.0 dB", name: "Gain", label: "dB" };
+
+(globalThis as Record<string, any>).__vsreact_flush = (json: string) => {
+  batches.push(JSON.parse(json));
+};
+(globalThis as Record<string, any>).__vsreact_nativeCall = (name: string, argsJson: string) => {
+  const args = JSON.parse(argsJson);
+  nativeCalls.push({ name, args });
+  if (name === "param:get") return JSON.stringify(paramGetResult);
+  return "null";
+};
+
+import { render, unmount, Slider, Toggle, XYPad, Segmented, ParamSegmented, ParamToggle } from "./index";
+
+const allOps = () => batches.flat();
+const opsNamed = (name: string) => allOps().filter((op: any) => op[0] === name);
+const dispatch = (msg: unknown) =>
+  (globalThis as Record<string, any>).__vsreact_dispatch(JSON.stringify(msg));
+
+/** First node id whose registered listeners include `type`. */
+const nodeWithListener = (type: string): number => {
+  const props: any = opsNamed("setProps").find((op: any) => op[2]?.listeners?.includes(type));
+  expect(props).toBeDefined();
+  return props[1];
+};
+
+beforeEach(() => {
+  unmount();
+  batches.length = 0;
+  nativeCalls.length = 0;
+  paramGetResult = { value: 0.5, text: "0.0 dB", name: "Gain", label: "dB" };
+});
+
+describe("vertical Slider", () => {
+  test("drag up increases the value; fill rises from the bottom", () => {
+    const seen: number[] = [];
+    render(<Slider vertical height={100} value={0.5} onChange={(v) => seen.push(v)} />);
+
+    const id = nodeWithListener("drag");
+    dispatch({ kind: "event", nodeId: id, type: "dragstart", payload: { dx: 0, dy: 0, x: 0, y: 0 } });
+    dispatch({ kind: "event", nodeId: id, type: "drag", payload: { dx: 0, dy: -25, x: 0, y: -25 } });
+    expect(seen.at(-1)).toBeCloseTo(0.75);
+
+    dispatch({ kind: "event", nodeId: id, type: "drag", payload: { dx: 0, dy: 80, x: 0, y: 80 } });
+    expect(seen.at(-1)).toBe(0); // clamped
+
+    // Fill height reflects the (still-controlled) 0.5 value.
+    const fill: any = opsNamed("setProps").find((op: any) => op[2]?.style?.height === 50);
+    expect(fill).toBeDefined();
+  });
+});
+
+describe("Toggle", () => {
+  test("click flips; disabled ignores clicks", () => {
+    const seen: boolean[] = [];
+    render(<Toggle on={false} onChange={(v) => seen.push(v)} />);
+
+    const id = nodeWithListener("click");
+    dispatch({ kind: "event", nodeId: id, type: "click" });
+    expect(seen).toEqual([true]);
+
+    unmount();
+    batches.length = 0;
+    render(<Toggle on disabled onChange={(v) => seen.push(v)} />);
+    expect(opsNamed("setProps").some((op: any) => op[2]?.listeners?.includes("click"))).toBe(false);
+  });
+
+  test("ParamToggle reads the param and writes a begin/set/end gesture", () => {
+    paramGetResult = { value: 0, text: "Off", name: "Bypass", label: "" };
+    render(<ParamToggle paramId="bypass" />);
+
+    const id = nodeWithListener("click");
+    dispatch({ kind: "event", nodeId: id, type: "click" });
+
+    const names = nativeCalls.map((c) => c.name);
+    expect(names).toContain("param:begin");
+    expect(names).toContain("param:end");
+    const set = nativeCalls.find((c) => c.name === "param:set");
+    expect(set?.args).toEqual({ id: "bypass", value: 1 });
+  });
+});
+
+describe("XYPad", () => {
+  test("drag maps both axes: right = +x, up = +y, clamped", () => {
+    const seen: Array<[number, number]> = [];
+    render(
+      <XYPad x={0.5} y={0.5} width={100} height={100} onChange={(x, y) => seen.push([x, y])} />,
+    );
+
+    const id = nodeWithListener("drag");
+    dispatch({ kind: "event", nodeId: id, type: "dragstart", payload: { dx: 0, dy: 0, x: 0, y: 0 } });
+    dispatch({ kind: "event", nodeId: id, type: "drag", payload: { dx: 25, dy: -25, x: 0, y: 0 } });
+    expect(seen.at(-1)?.[0]).toBeCloseTo(0.75);
+    expect(seen.at(-1)?.[1]).toBeCloseTo(0.75);
+
+    dispatch({ kind: "event", nodeId: id, type: "drag", payload: { dx: 999, dy: 999, x: 0, y: 0 } });
+    expect(seen.at(-1)).toEqual([1, 0]);
+  });
+});
+
+describe("Segmented", () => {
+  test("clicking a segment reports its index", () => {
+    const seen: number[] = [];
+    render(<Segmented options={["SINE", "SAW", "SQR"]} index={0} onChange={(i) => seen.push(i)} />);
+
+    const clickables = opsNamed("setProps").filter((op: any) =>
+      op[2]?.listeners?.includes("click"),
+    );
+    expect(clickables.length).toBe(3);
+
+    dispatch({ kind: "event", nodeId: (clickables[2] as any)[1], type: "click" });
+    expect(seen).toEqual([2]);
+  });
+
+  test("ParamSegmented maps value→index and writes index/(n−1)", () => {
+    paramGetResult = { value: 0.5, text: "Saw", name: "Shape", label: "" };
+    render(<ParamSegmented paramId="shape" options={["SINE", "SAW", "SQR"]} />);
+
+    const clickables = opsNamed("setProps").filter((op: any) =>
+      op[2]?.listeners?.includes("click"),
+    );
+    dispatch({ kind: "event", nodeId: (clickables[0] as any)[1], type: "click" });
+
+    const set = nativeCalls.find((c) => c.name === "param:set");
+    expect(set?.args).toEqual({ id: "shape", value: 0 });
+  });
+});