@vsreact/core 0.0.18 → 0.0.20

package/dist/controls.d.ts

@@ -1,5 +1,10 @@
+import type { KeyEventPayload } from "./primitives";
 /** Vertical-drag-to-value mapping shared by Knob (and tested in isolation). */
 export declare function dragToValue(startValue: number, dy: number, sensitivity?: number): number;
+/** Web <input type="range"> keyboard model for a normalized control:
+    arrows ±0.01 (shift = ±0.001 fine), PageUp/Down ±0.1, Home/End 0/1.
+    Returns the new value, or null for keys the control doesn't own. */
+export declare function sliderKeyTarget(value: number, e: KeyEventPayload): number | null;
 export interface KnobProps {
     value: number;
     text?: string;

package/dist/controls.js

@@ -13,6 +13,30 @@ const clamp01 = (v) => Math.min(1, Math.max(0, v));
 export function dragToValue(startValue, dy, sensitivity = 0.005) {
     return clamp01(startValue - dy * sensitivity);
 }
+/** Web <input type="range"> keyboard model for a normalized control:
+    arrows ±0.01 (shift = ±0.001 fine), PageUp/Down ±0.1, Home/End 0/1.
+    Returns the new value, or null for keys the control doesn't own. */
+export function sliderKeyTarget(value, e) {
+    const step = e.shift ? 0.001 : 0.01;
+    switch (e.key) {
+        case "ArrowUp":
+        case "ArrowRight":
+            return clamp01(value + step);
+        case "ArrowDown":
+        case "ArrowLeft":
+            return clamp01(value - step);
+        case "PageUp":
+            return clamp01(value + 0.1);
+        case "PageDown":
+            return clamp01(value - 0.1);
+        case "Home":
+            return 0;
+        case "End":
+            return 1;
+        default:
+            return null;
+    }
+}
 const ARC_START = -135;
 const ARC_END = 135;
 export function Knob({ value, text, label, size = 64, disabled, defaultValue, bipolar, wheelSensitivity = 0.4, trackColor = "#2A2F27", valueColor = "#C6F135", onChange, onBegin, onEnd, }) {
@@ -42,7 +66,13 @@ export function Knob({ value, text, label, size = 64, disabled, defaultValue, bi
                         onBegin?.();
                     }, onDrag: disabled ? undefined : (e) => onChange(dragToValue(startValue.current, e.dy)), onDragEnd: disabled ? undefined : () => onEnd?.(), onDoubleClick: disabled || defaultValue === undefined ? undefined : () => nudge(defaultValue), onWheel: disabled || wheelSensitivity === 0
                     ? undefined
-                    : (e) => nudge(clamped + e.dy * wheelSensitivity), 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] }));
+                    : (e) => nudge(clamped + e.dy * wheelSensitivity), onKeyDown: disabled
+                    ? undefined
+                    : (e) => {
+                        const target = sliderKeyTarget(clamped, e);
+                        if (target !== null)
+                            nudge(target);
+                    }, 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 — double-click resets to the
     host's default, the wheel nudges, gestures stay automation-safe. */
@@ -69,10 +99,17 @@ export function Slider({ value, width = 160, height = 160, vertical, barThumb, l
     const onWheel = disabled || wheelSensitivity === 0
         ? undefined
         : (e) => nudge(clamped + e.dy * wheelSensitivity);
+    const onKeyDown = disabled
+        ? undefined
+        : (e) => {
+            const target = sliderKeyTarget(clamped, e);
+            if (target !== null)
+                nudge(target);
+        };
     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, onDoubleClick: onDoubleClick, onWheel: onWheel, 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 } }), barThumb ? (_jsx(View, { className: "absolute w-[18] h-[5] rounded-[2] left-0", style: { top: (1 - clamped) * (height - 5), 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: "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, onDoubleClick: onDoubleClick, onWheel: onWheel, onKeyDown: onKeyDown, 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 } }), barThumb ? (_jsx(View, { className: "absolute w-[18] h-[5] rounded-[2] left-0", style: { top: (1 - clamped) * (height - 5), 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, onDoubleClick: onDoubleClick, onWheel: onWheel, 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 } }), barThumb ? (_jsx(View, { className: "absolute w-[5] h-[18] rounded-[2] top-0", style: { left: clamped * (width - 5), 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] }));
+    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, onDoubleClick: onDoubleClick, onWheel: onWheel, onKeyDown: onKeyDown, 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 } }), barThumb ? (_jsx(View, { className: "absolute w-[5] h-[18] rounded-[2] top-0", style: { left: clamped * (width - 5), 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 — double-click resets to the
     host's default, the wheel nudges, gestures stay automation-safe. */
@@ -86,7 +123,12 @@ export function Toggle({ on, label, offLabel, onLabel, size = 22, disabled, trac
     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: [_jsxs(View, { className: "flex-row items-center gap-2", children: [offLabel !== undefined ? (_jsx(Text, { className: "text-[9] font-bold tracking-widest", style: { color: on ? "#6f6e66" : "#ECF2E8" }, children: offLabel })) : null, _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: {
+    return (_jsxs(View, { className: "items-center gap-2", children: [_jsxs(View, { className: "flex-row items-center gap-2", children: [offLabel !== undefined ? (_jsx(Text, { className: "text-[9] font-bold tracking-widest", style: { color: on ? "#6f6e66" : "#ECF2E8" }, children: offLabel })) : null, _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), onKeyDown: disabled
+                            ? undefined
+                            : (e) => {
+                                if (e.key === "Enter" || e.key === " ")
+                                    onChange(!on);
+                            }, children: _jsx(View, { className: "absolute rounded-full", style: {
                                 width: thumb,
                                 height: thumb,
                                 top: 3,
@@ -118,7 +160,18 @@ export function XYPad({ x, y, width = 160, height = 160, label, disabled, trackC
                         onBegin?.();
                     }, onDrag: disabled
                     ? undefined
-                    : (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] }));
+                    : (e) => onChange(clamp01(start.current.x + e.dx / width), clamp01(start.current.y - e.dy / height)), onDragEnd: disabled ? undefined : () => onEnd?.(), onKeyDown: disabled
+                    ? undefined
+                    : (e) => {
+                        const step = e.shift ? 0.001 : 0.01;
+                        const dx = e.key === "ArrowRight" ? step : e.key === "ArrowLeft" ? -step : 0;
+                        const dy = e.key === "ArrowUp" ? step : e.key === "ArrowDown" ? -step : 0;
+                        if (dx === 0 && dy === 0)
+                            return;
+                        onBegin?.();
+                        onChange(clamp01(cxv + dx), clamp01(cyv + dy));
+                        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] }));
 }
 /** An XYPad driving two APVTS parameters at once. */
 export function ParamXYPad({ paramX, paramY, label, ...rest }) {

package/dist/hostConfig.js

@@ -19,6 +19,8 @@ const eventPropNames = {
     onMouseLeave: "mouseleave",
     onMouseDown: "mousedown",
     onMouseUp: "mouseup",
+    onMouseMove: "mousemove",
+    onKeyDown: "keydown",
     onDragStart: "dragstart",
     onDrag: "drag",
     onDragEnd: "dragend",

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.20";
 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.20";
 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/primitives.d.ts

@@ -20,6 +20,20 @@ export interface LayoutRect {
 export interface WheelEventPayload {
     dy: number;
 }
+/** Web-style key event: key names match KeyboardEvent.key ("ArrowUp",
+    "Enter", "Escape", " ", "a"). */
+export interface KeyEventPayload {
+    key: string;
+    shift: boolean;
+    ctrl: boolean;
+    alt: boolean;
+    meta: boolean;
+}
+/** Root-space pointer position. */
+export interface MouseMovePayload {
+    x: number;
+    y: number;
+}
 export interface CommonProps {
     className?: string;
     style?: Style;
@@ -37,6 +51,13 @@ export interface CommonProps {
     onDragStart?: (e: DragEventPayload) => void;
     onDrag?: (e: DragEventPayload) => void;
     onDragEnd?: (e: DragEventPayload) => void;
+    onMouseMove?: (e: MouseMovePayload) => void;
+    /** Declaring onKeyDown (or onFocus/onBlur, or a focus: style variant)
+        makes the node focusable: click focuses it, Tab cycles, keys arrive
+        here with web KeyboardEvent.key names. */
+    onKeyDown?: (e: KeyEventPayload) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
     /** Fires after layout whenever this node's root-space rect changes —
         the foundation for popovers, menus, and tooltips. */
     onLayout?: (rect: LayoutRect) => void;
@@ -82,6 +103,8 @@ export declare function TextInput({ onChange, onSubmit, ...rest }: TextInputProp
     onDragStart?: ((e: DragEventPayload) => void) | undefined;
     onDrag?: ((e: DragEventPayload) => void) | undefined;
     onDragEnd?: ((e: DragEventPayload) => void) | undefined;
+    onMouseMove?: ((e: MouseMovePayload) => void) | undefined;
+    onKeyDown?: ((e: KeyEventPayload) => void) | undefined;
     onLayout?: ((rect: LayoutRect) => void) | undefined;
 }, string | import("react").JSXElementConstructor<any>>;
 export interface NativeViewProps extends CommonProps {

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;
         }
@@ -253,6 +303,10 @@ function resolveClass(cls) {
             const n = Number(rest);
             return Number.isFinite(n) ? { flex: n } : undefined;
         }
+        case "z": {
+            const z = rest.startsWith("[") ? parseLength(rest) : Number(rest);
+            return typeof z === "number" && Number.isFinite(z) ? { zIndex: negate(z) } : undefined;
+        }
         default:
             return undefined;
     }

package/package.json

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

package/src/controls.test.tsx

@@ -15,7 +15,7 @@ const defaultNativeCall = (name: string, argsJson: string) => {
 };
 (globalThis as Record<string, any>).__vsreact_nativeCall = defaultNativeCall;
 
-import { render, unmount, Slider, Toggle, XYPad, Segmented, ParamSegmented, ParamToggle } from "./index";
+import { render, unmount, Knob, Slider, Toggle, XYPad, Segmented, ParamSegmented, ParamToggle } from "./index";
 
 const allOps = () => batches.flat();
 const opsNamed = (name: string) => allOps().filter((op: any) => op[0] === name);
@@ -773,3 +773,50 @@ describe("0.0.11 — flagship visuals", () => {
     expect(bar[2].style.top).toBeCloseTo(0.5 * 95);
   });
 });
+
+describe("keyboard control model (0.0.20)", () => {
+  test("Knob responds to arrows / paging / Home-End via keydown", () => {
+    const seen: number[] = [];
+    render(<Knob value={0.5} onChange={(v) => seen.push(v)} />);
+
+    const id = nodeWithListener("keydown");
+    const press = (key: string, shift = false) =>
+      dispatch({ kind: "event", nodeId: id, type: "keydown", payload: { key, shift, ctrl: false, alt: false, meta: false } });
+
+    press("ArrowUp");
+    expect(seen.at(-1)).toBeCloseTo(0.51);
+    press("ArrowDown", true);
+    expect(seen.at(-1)).toBeCloseTo(0.499);
+    press("PageUp");
+    expect(seen.at(-1)).toBeCloseTo(0.6);
+    press("Home");
+    expect(seen.at(-1)).toBe(0);
+    press("End");
+    expect(seen.at(-1)).toBe(1);
+    const count = seen.length;
+    press("Escape");
+    expect(seen.length).toBe(count); // unowned keys ignored
+  });
+
+  test("Toggle flips on Enter and Space", () => {
+    const seen: boolean[] = [];
+    render(<Toggle on={false} onChange={(v) => seen.push(v)} />);
+
+    const id = nodeWithListener("keydown");
+    dispatch({ kind: "event", nodeId: id, type: "keydown", payload: { key: "Enter", shift: false, ctrl: false, alt: false, meta: false } });
+    expect(seen.at(-1)).toBe(true);
+    dispatch({ kind: "event", nodeId: id, type: "keydown", payload: { key: " ", shift: false, ctrl: false, alt: false, meta: false } });
+    expect(seen.at(-1)).toBe(true); // controlled: still !on
+  });
+
+  test("XYPad arrows move both axes", () => {
+    const seen: Array<[number, number]> = [];
+    render(<XYPad x={0.5} y={0.5} onChange={(x, y) => seen.push([x, y])} />);
+
+    const id = nodeWithListener("keydown");
+    dispatch({ kind: "event", nodeId: id, type: "keydown", payload: { key: "ArrowRight", shift: false, ctrl: false, alt: false, meta: false } });
+    expect(seen.at(-1)?.[0]).toBeCloseTo(0.51);
+    dispatch({ kind: "event", nodeId: id, type: "keydown", payload: { key: "ArrowDown", shift: false, ctrl: false, alt: false, meta: false } });
+    expect(seen.at(-1)?.[1]).toBeCloseTo(0.49);
+  });
+});

package/src/controls.tsx

@@ -4,6 +4,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import { View, Text } from "./primitives";
+import type { KeyEventPayload } from "./primitives";
 import { useParameter, useParameterList } from "./parameters";
 import { useSpring } from "./animation";
 import { useLayoutRect } from "./hooks";
@@ -16,6 +17,31 @@ export function dragToValue(startValue: number, dy: number, sensitivity = 0.005)
   return clamp01(startValue - dy * sensitivity);
 }
 
+/** Web <input type="range"> keyboard model for a normalized control:
+    arrows ±0.01 (shift = ±0.001 fine), PageUp/Down ±0.1, Home/End 0/1.
+    Returns the new value, or null for keys the control doesn't own. */
+export function sliderKeyTarget(value: number, e: KeyEventPayload): number | null {
+  const step = e.shift ? 0.001 : 0.01;
+  switch (e.key) {
+    case "ArrowUp":
+    case "ArrowRight":
+      return clamp01(value + step);
+    case "ArrowDown":
+    case "ArrowLeft":
+      return clamp01(value - step);
+    case "PageUp":
+      return clamp01(value + 0.1);
+    case "PageDown":
+      return clamp01(value - 0.1);
+    case "Home":
+      return 0;
+    case "End":
+      return 1;
+    default:
+      return null;
+  }
+}
+
 const ARC_START = -135;
 const ARC_END = 135;
 
@@ -98,6 +124,14 @@ export function Knob({
             ? undefined
             : (e) => nudge(clamped + e.dy * wheelSensitivity)
         }
+        onKeyDown={
+          disabled
+            ? undefined
+            : (e) => {
+                const target = sliderKeyTarget(clamped, e);
+                if (target !== null) nudge(target);
+              }
+        }
       >
         {text !== undefined ? (
           <Text
@@ -205,6 +239,12 @@ export function Slider({
     disabled || wheelSensitivity === 0
       ? undefined
       : (e: { dy: number }) => nudge(clamped + e.dy * wheelSensitivity);
+  const onKeyDown = disabled
+    ? undefined
+    : (e: KeyEventPayload) => {
+        const target = sliderKeyTarget(clamped, e);
+        if (target !== null) nudge(target);
+      };
 
   if (vertical) {
     return (
@@ -217,6 +257,7 @@ export function Slider({
           onDragEnd={onDragEnd}
           onDoubleClick={onDoubleClick}
           onWheel={onWheel}
+          onKeyDown={onKeyDown}
         >
           <View
             className="absolute w-[4] rounded-full left-[7] top-0 bottom-0"
@@ -255,6 +296,7 @@ export function Slider({
         onDragEnd={onDragEnd}
         onDoubleClick={onDoubleClick}
         onWheel={onWheel}
+        onKeyDown={onKeyDown}
       >
         <View className="h-[4] rounded-full" style={{ backgroundColor: trackColor }} />
         <View
@@ -357,6 +399,13 @@ export function Toggle({
           className={`relative rounded-full ${disabled ? "opacity-40" : "cursor-pointer"}`}
           style={{ width: trackWidth, height: size, backgroundColor: on ? onColor : trackColor }}
           onClick={disabled ? undefined : () => onChange(!on)}
+          onKeyDown={
+            disabled
+              ? undefined
+              : (e) => {
+                  if (e.key === "Enter" || e.key === " ") onChange(!on);
+                }
+          }
         >
           <View
             className="absolute rounded-full"
@@ -477,6 +526,19 @@ export function XYPad({
                 )
         }
         onDragEnd={disabled ? undefined : () => onEnd?.()}
+        onKeyDown={
+          disabled
+            ? undefined
+            : (e) => {
+                const step = e.shift ? 0.001 : 0.01;
+                const dx = e.key === "ArrowRight" ? step : e.key === "ArrowLeft" ? -step : 0;
+                const dy = e.key === "ArrowUp" ? step : e.key === "ArrowDown" ? -step : 0;
+                if (dx === 0 && dy === 0) return;
+                onBegin?.();
+                onChange(clamp01(cxv + dx), clamp01(cyv + dy));
+                onEnd?.();
+              }
+        }
       >
         <View
           className="absolute left-0 right-0 h-[1]"

package/src/hostConfig.ts

@@ -30,6 +30,8 @@ const eventPropNames: Record<string, string> = {
   onMouseLeave: "mouseleave",
   onMouseDown: "mousedown",
   onMouseUp: "mouseup",
+  onMouseMove: "mousemove",
+  onKeyDown: "keydown",
   onDragStart: "dragstart",
   onDrag: "drag",
   onDragEnd: "dragend",

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.20";
 
 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/primitives.tsx

@@ -24,6 +24,22 @@ export interface WheelEventPayload {
   dy: number;
 }
 
+/** Web-style key event: key names match KeyboardEvent.key ("ArrowUp",
+    "Enter", "Escape", " ", "a"). */
+export interface KeyEventPayload {
+  key: string;
+  shift: boolean;
+  ctrl: boolean;
+  alt: boolean;
+  meta: boolean;
+}
+
+/** Root-space pointer position. */
+export interface MouseMovePayload {
+  x: number;
+  y: number;
+}
+
 export interface CommonProps {
   className?: string;
   style?: Style;
@@ -41,6 +57,13 @@ export interface CommonProps {
   onDragStart?: (e: DragEventPayload) => void;
   onDrag?: (e: DragEventPayload) => void;
   onDragEnd?: (e: DragEventPayload) => void;
+  onMouseMove?: (e: MouseMovePayload) => void;
+  /** Declaring onKeyDown (or onFocus/onBlur, or a focus: style variant)
+      makes the node focusable: click focuses it, Tab cycles, keys arrive
+      here with web KeyboardEvent.key names. */
+  onKeyDown?: (e: KeyEventPayload) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
   /** Fires after layout whenever this node's root-space rect changes —
       the foundation for popovers, menus, and tooltips. */
   onLayout?: (rect: LayoutRect) => void;

package/src/tw.test.ts

@@ -167,3 +167,70 @@ 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,
+    });
+  });
+});
+
+describe("zIndex (0.0.20)", () => {
+  test("z classes", () => {
+    expect(tw("z-10").style).toEqual({ zIndex: 10 });
+    expect(tw("z-[3]").style).toEqual({ zIndex: 3 });
+    expect(tw("-z-1").style).toEqual({ zIndex: -1 });
+  });
+});

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;
     }
@@ -258,6 +310,10 @@ function resolveClass(cls: string): Style | undefined {
       const n = Number(rest);
       return Number.isFinite(n) ? { flex: n } : undefined;
     }
+    case "z": {
+      const z = rest.startsWith("[") ? parseLength(rest) : Number(rest);
+      return typeof z === "number" && Number.isFinite(z) ? { zIndex: negate(z) } : undefined;
+    }
     default:
       return undefined;
   }