@vsreact/core 0.0.18 → 0.0.19

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import "./runtime";
 import "./bridge";
 /** The SDK version — stamp it on support dumps and analytics. */
-export declare const VERSION = "0.0.18";
+export declare const VERSION = "0.0.19";
 export { View, Text, Image, TextInput, NativeView } from "./primitives";
 export type { CommonProps, TextProps, ImageProps, TextInputProps, NativeViewProps, } from "./primitives";
 export { render, unmount } from "./render";

package/dist/index.js

@@ -3,7 +3,7 @@
 import "./runtime";
 import "./bridge";
 /** The SDK version — stamp it on support dumps and analytics. */
-export const VERSION = "0.0.18";
+export const VERSION = "0.0.19";
 export { View, Text, Image, TextInput, NativeView } from "./primitives";
 export { render, unmount } from "./render";
 export { native } from "./native";

package/dist/parameters.js

@@ -37,10 +37,23 @@ export function useParameter(id) {
             : { value: 0, text: "", name: id, label: "", defaultValue: 0 };
     });
     useEffect(() => native.on("param", (p) => {
-        if (p?.id === id)
-            setState((s) => ({ ...s, value: Number(p.value), text: String(p.text ?? "") }));
+        if (p?.id !== id)
+            return;
+        // A malformed event must never poison good state: keep the previous
+        // value on non-finite numbers and the previous text when absent.
+        setState((s) => {
+            const value = Number(p.value);
+            return {
+                ...s,
+                value: Number.isFinite(value) ? value : s.value,
+                text: p.text == null ? s.text : String(p.text),
+            };
+        });
     }), [id]);
     const set = useCallback((normalized) => {
+        // NaN would round-trip into the APVTS as garbage — drop it here too.
+        if (!Number.isFinite(normalized))
+            return;
         const value = Math.min(1, Math.max(0, normalized));
         setState((s) => ({ ...s, value }));
         native.call("param:set", { id, value });

package/dist/tw.js

@@ -68,6 +68,21 @@ const staticClasses = {
     "shadow-md": { shadowColor: "#00000066", shadowRadius: 8, shadowOffsetY: 2 },
     "shadow-lg": { shadowColor: "#00000066", shadowRadius: 12, shadowOffsetY: 4 },
     "shadow-xl": { shadowColor: "#00000066", shadowRadius: 20, shadowOffsetY: 8 },
+    "shadow-inner": { insetShadowColor: "#0000000D", insetShadowRadius: 4, insetShadowOffsetY: 2 },
+    "border-t": { borderTopWidth: 1 },
+    "border-r": { borderRightWidth: 1 },
+    "border-b": { borderBottomWidth: 1 },
+    "border-l": { borderLeftWidth: 1 },
+    "bg-gradient-to-t": { gradientType: "linear", gradientAngle: 0 },
+    "bg-gradient-to-tr": { gradientType: "linear", gradientAngle: 45 },
+    "bg-gradient-to-r": { gradientType: "linear", gradientAngle: 90 },
+    "bg-gradient-to-br": { gradientType: "linear", gradientAngle: 135 },
+    "bg-gradient-to-b": { gradientType: "linear", gradientAngle: 180 },
+    "bg-gradient-to-bl": { gradientType: "linear", gradientAngle: 225 },
+    "bg-gradient-to-l": { gradientType: "linear", gradientAngle: 270 },
+    "bg-gradient-to-tl": { gradientType: "linear", gradientAngle: 315 },
+    "bg-gradient-radial": { gradientType: "radial" },
+    "bg-gradient-conic": { gradientType: "conic" },
 };
 const textSizes = {
     xs: 12, sm: 14, base: 16, lg: 18, xl: 20, "2xl": 24, "3xl": 30, "4xl": 36,
@@ -121,6 +136,8 @@ const lengthKeys = {
     "inset-x": ["left", "right"],
     "inset-y": ["top", "bottom"],
     basis: ["flexBasis"],
+    "translate-x": ["translateX"],
+    "translate-y": ["translateY"],
 };
 const warned = new Set();
 function warnUnknown(cls) {
@@ -214,6 +231,32 @@ function resolveClass(cls) {
             const color = resolveColor(rest);
             return color !== undefined ? { backgroundColor: color } : undefined;
         }
+        case "from": {
+            const color = resolveColor(rest);
+            return color !== undefined ? { gradientFrom: color } : undefined;
+        }
+        case "via": {
+            const color = resolveColor(rest);
+            return color !== undefined ? { gradientVia: color } : undefined;
+        }
+        case "to": {
+            const color = resolveColor(rest);
+            return color !== undefined ? { gradientTo: color } : undefined;
+        }
+        case "rotate": {
+            // Degrees, literal: rotate-45, -rotate-90, rotate-[10]
+            const deg = rest.startsWith("[") ? parseLength(rest) : Number(rest);
+            return typeof deg === "number" && Number.isFinite(deg) ? { rotate: negate(deg) } : undefined;
+        }
+        case "scale": {
+            // Percent named scale (scale-95), raw factor arbitrary (scale-[1.25])
+            if (rest.startsWith("[")) {
+                const factor = parseLength(rest);
+                return typeof factor === "number" ? { scale: factor } : undefined;
+            }
+            const percent = Number(rest);
+            return Number.isFinite(percent) ? { scale: percent / 100 } : undefined;
+        }
         case "text": {
             if (rest in textSizes)
                 return { fontSize: textSizes[rest] };
@@ -229,6 +272,13 @@ function resolveClass(cls) {
             const n = Number(rest);
             if (Number.isFinite(n))
                 return { borderWidth: n };
+            // Per-side widths (literal px like tw): border-t-2, border-b-[3]
+            const side = /^([trbl])-(.+)$/.exec(rest);
+            if (side) {
+                const key = { t: "borderTopWidth", r: "borderRightWidth", b: "borderBottomWidth", l: "borderLeftWidth" }[side[1]];
+                const width = side[2].startsWith("[") ? parseLength(side[2]) : Number(side[2]);
+                return typeof width === "number" && Number.isFinite(width) ? { [key]: width } : undefined;
+            }
             const color = resolveColor(rest);
             return color !== undefined ? { borderColor: color } : undefined;
         }

package/package.json

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

package/src/index.ts

@@ -4,7 +4,7 @@ import "./runtime";
 import "./bridge";
 
 /** The SDK version — stamp it on support dumps and analytics. */
-export const VERSION = "0.0.18";
+export const VERSION = "0.0.19";
 
 export { View, Text, Image, TextInput, NativeView } from "./primitives";
 export type {

package/src/parameters.ts

@@ -68,14 +68,25 @@ export function useParameter(id: string): ParameterHandle {
   useEffect(
     () =>
       native.on("param", (p) => {
-        if (p?.id === id)
-          setState((s) => ({ ...s, value: Number(p.value), text: String(p.text ?? "") }));
+        if (p?.id !== id) return;
+        // A malformed event must never poison good state: keep the previous
+        // value on non-finite numbers and the previous text when absent.
+        setState((s) => {
+          const value = Number(p.value);
+          return {
+            ...s,
+            value: Number.isFinite(value) ? value : s.value,
+            text: p.text == null ? s.text : String(p.text),
+          };
+        });
       }),
     [id],
   );
 
   const set = useCallback(
     (normalized: number) => {
+      // NaN would round-trip into the APVTS as garbage — drop it here too.
+      if (!Number.isFinite(normalized)) return;
       const value = Math.min(1, Math.max(0, normalized));
       setState((s) => ({ ...s, value }));
       native.call("param:set", { id, value });

package/src/params.test.tsx

@@ -0,0 +1,89 @@
+// 0.0.19 hardening: malformed param traffic must never poison good state.
+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: "320 ms", name: "Time", label: "ms", defaultValue: 0.5 };
+
+(globalThis as Record<string, any>).__vsreact_flush = (json: string) => {
+  batches.push(JSON.parse(json));
+};
+const defaultNativeCall = (name: string, argsJson: string) => {
+  const args = JSON.parse(argsJson);
+  nativeCalls.push({ name, args });
+  if (name === "param:get") return JSON.stringify(paramGetResult);
+  return "null";
+};
+(globalThis as Record<string, any>).__vsreact_nativeCall = defaultNativeCall;
+
+import { render, unmount, useParameter, View } from "./index";
+import type { ParameterHandle } from "./index";
+
+const dispatch = (msg: unknown) =>
+  (globalThis as Record<string, any>).__vsreact_dispatch(JSON.stringify(msg));
+
+let handle: ParameterHandle | null = null;
+
+function Probe({ id }: { id: string }) {
+  handle = useParameter(id);
+  return <View />;
+}
+
+const settle = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+beforeEach(() => {
+  unmount();
+  batches.length = 0;
+  nativeCalls.length = 0;
+  handle = null;
+  paramGetResult = { value: 0.5, text: "320 ms", name: "Time", label: "ms", defaultValue: 0.5 };
+  (globalThis as Record<string, any>).__vsreact_nativeCall = defaultNativeCall;
+});
+
+describe("useParameter hardening", () => {
+  test("initial state is the synchronous param:get snapshot", () => {
+    render(<Probe id="time" />);
+    expect(handle!.value).toBe(0.5);
+    expect(handle!.text).toBe("320 ms");
+  });
+
+  test("event with missing text keeps the previous text", async () => {
+    render(<Probe id="time" />);
+    await settle();
+
+    dispatch({ kind: "native", name: "param", payload: { id: "time", value: 0.75 } });
+    expect(handle!.value).toBe(0.75);
+    expect(handle!.text).toBe("320 ms");
+  });
+
+  test("event with a non-finite value keeps the previous value", async () => {
+    render(<Probe id="time" />);
+    await settle();
+
+    dispatch({ kind: "native", name: "param", payload: { id: "time", value: "wat", text: "junk" } });
+    expect(handle!.value).toBe(0.5);
+    expect(handle!.text).toBe("junk");
+  });
+
+  test("set(NaN) is dropped before it reaches the native side", async () => {
+    render(<Probe id="time" />);
+    await settle();
+    nativeCalls.length = 0;
+
+    handle!.set(Number.NaN);
+    expect(nativeCalls.filter((c) => c.name === "param:set")).toHaveLength(0);
+    expect(handle!.value).toBe(0.5);
+
+    handle!.set(0.25);
+    expect(nativeCalls.filter((c) => c.name === "param:set")).toHaveLength(1);
+  });
+
+  test("healthy events still update both fields", async () => {
+    render(<Probe id="time" />);
+    await settle();
+
+    dispatch({ kind: "native", name: "param", payload: { id: "time", value: 0.9, text: "901 ms" } });
+    expect(handle!.value).toBe(0.9);
+    expect(handle!.text).toBe("901 ms");
+  });
+});

package/src/tw.test.ts

@@ -167,3 +167,62 @@ describe("arbitrary letter spacing", () => {
     expect(tw("tracking-widest").style).toEqual({ letterSpacing: 1.6 });
   });
 });
+
+describe("gradients (0.0.19)", () => {
+  test("direction classes set type and angle", () => {
+    expect(tw("bg-gradient-to-r").style).toEqual({ gradientType: "linear", gradientAngle: 90 });
+    expect(tw("bg-gradient-to-tl").style).toEqual({ gradientType: "linear", gradientAngle: 315 });
+    expect(tw("bg-gradient-radial").style).toEqual({ gradientType: "radial" });
+    expect(tw("bg-gradient-conic").style).toEqual({ gradientType: "conic" });
+  });
+
+  test("from/via/to resolve palette and arbitrary colors", () => {
+    expect(tw("from-zinc-900").style).toEqual({ gradientFrom: "#18181b" });
+    expect(tw("via-lime-400").style).toEqual({ gradientVia: "#a3e635" });
+    expect(tw("to-[#102030]").style).toEqual({ gradientTo: "#102030" });
+  });
+
+  test("full stack composes", () => {
+    expect(tw("bg-gradient-to-b from-[#111111] to-[#222222]").style).toEqual({
+      gradientType: "linear",
+      gradientAngle: 180,
+      gradientFrom: "#111111",
+      gradientTo: "#222222",
+    });
+  });
+});
+
+describe("transforms (0.0.19)", () => {
+  test("rotate literal degrees + negative + arbitrary", () => {
+    expect(tw("rotate-45").style).toEqual({ rotate: 45 });
+    expect(tw("-rotate-90").style).toEqual({ rotate: -90 });
+    expect(tw("rotate-[10.5]").style).toEqual({ rotate: 10.5 });
+  });
+
+  test("scale percent + arbitrary factor", () => {
+    expect(tw("scale-95").style).toEqual({ scale: 0.95 });
+    expect(tw("scale-[1.25]").style).toEqual({ scale: 1.25 });
+  });
+
+  test("translate on the spacing scale", () => {
+    expect(tw("translate-x-4").style).toEqual({ translateX: 16 });
+    expect(tw("-translate-y-2").style).toEqual({ translateY: -8 });
+    expect(tw("translate-x-[7]").style).toEqual({ translateX: 7 });
+  });
+});
+
+describe("per-side borders + inner shadow (0.0.19)", () => {
+  test("side widths are literal px", () => {
+    expect(tw("border-t").style).toEqual({ borderTopWidth: 1 });
+    expect(tw("border-b-2").style).toEqual({ borderBottomWidth: 2 });
+    expect(tw("border-l-[3]").style).toEqual({ borderLeftWidth: 3 });
+  });
+
+  test("shadow-inner maps to inset shadow keys", () => {
+    expect(tw("shadow-inner").style).toEqual({
+      insetShadowColor: "#0000000D",
+      insetShadowRadius: 4,
+      insetShadowOffsetY: 2,
+    });
+  });
+});

package/src/tw.ts

@@ -79,6 +79,21 @@ const staticClasses: Record<string, Style> = {
   "shadow-md": { shadowColor: "#00000066", shadowRadius: 8, shadowOffsetY: 2 },
   "shadow-lg": { shadowColor: "#00000066", shadowRadius: 12, shadowOffsetY: 4 },
   "shadow-xl": { shadowColor: "#00000066", shadowRadius: 20, shadowOffsetY: 8 },
+  "shadow-inner": { insetShadowColor: "#0000000D", insetShadowRadius: 4, insetShadowOffsetY: 2 },
+  "border-t": { borderTopWidth: 1 },
+  "border-r": { borderRightWidth: 1 },
+  "border-b": { borderBottomWidth: 1 },
+  "border-l": { borderLeftWidth: 1 },
+  "bg-gradient-to-t": { gradientType: "linear", gradientAngle: 0 },
+  "bg-gradient-to-tr": { gradientType: "linear", gradientAngle: 45 },
+  "bg-gradient-to-r": { gradientType: "linear", gradientAngle: 90 },
+  "bg-gradient-to-br": { gradientType: "linear", gradientAngle: 135 },
+  "bg-gradient-to-b": { gradientType: "linear", gradientAngle: 180 },
+  "bg-gradient-to-bl": { gradientType: "linear", gradientAngle: 225 },
+  "bg-gradient-to-l": { gradientType: "linear", gradientAngle: 270 },
+  "bg-gradient-to-tl": { gradientType: "linear", gradientAngle: 315 },
+  "bg-gradient-radial": { gradientType: "radial" },
+  "bg-gradient-conic": { gradientType: "conic" },
 };
 
 const textSizes: Record<string, number> = {
@@ -136,6 +151,8 @@ const lengthKeys: Record<string, string[]> = {
   "inset-x": ["left", "right"],
   "inset-y": ["top", "bottom"],
   basis: ["flexBasis"],
+  "translate-x": ["translateX"],
+  "translate-y": ["translateY"],
 };
 
 const warned = new Set<string>();
@@ -223,6 +240,32 @@ function resolveClass(cls: string): Style | undefined {
       const color = resolveColor(rest);
       return color !== undefined ? { backgroundColor: color } : undefined;
     }
+    case "from": {
+      const color = resolveColor(rest);
+      return color !== undefined ? { gradientFrom: color } : undefined;
+    }
+    case "via": {
+      const color = resolveColor(rest);
+      return color !== undefined ? { gradientVia: color } : undefined;
+    }
+    case "to": {
+      const color = resolveColor(rest);
+      return color !== undefined ? { gradientTo: color } : undefined;
+    }
+    case "rotate": {
+      // Degrees, literal: rotate-45, -rotate-90, rotate-[10]
+      const deg = rest.startsWith("[") ? parseLength(rest) : Number(rest);
+      return typeof deg === "number" && Number.isFinite(deg) ? { rotate: negate(deg) } : undefined;
+    }
+    case "scale": {
+      // Percent named scale (scale-95), raw factor arbitrary (scale-[1.25])
+      if (rest.startsWith("[")) {
+        const factor = parseLength(rest);
+        return typeof factor === "number" ? { scale: factor } : undefined;
+      }
+      const percent = Number(rest);
+      return Number.isFinite(percent) ? { scale: percent / 100 } : undefined;
+    }
     case "text": {
       if (rest in textSizes) return { fontSize: textSizes[rest] };
       if (rest.startsWith("[") && !rest.startsWith("[#")) {
@@ -235,6 +278,15 @@ function resolveClass(cls: string): Style | undefined {
     case "border": {
       const n = Number(rest);
       if (Number.isFinite(n)) return { borderWidth: n };
+      // Per-side widths (literal px like tw): border-t-2, border-b-[3]
+      const side = /^([trbl])-(.+)$/.exec(rest);
+      if (side) {
+        const key = { t: "borderTopWidth", r: "borderRightWidth", b: "borderBottomWidth", l: "borderLeftWidth" }[
+          side[1] as "t" | "r" | "b" | "l"
+        ];
+        const width = side[2].startsWith("[") ? parseLength(side[2]) : Number(side[2]);
+        return typeof width === "number" && Number.isFinite(width) ? { [key]: width } : undefined;
+      }
       const color = resolveColor(rest);
       return color !== undefined ? { borderColor: color } : undefined;
     }