@vsreact/core 0.0.19 → 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.19";
+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.19";
+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/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

@@ -303,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.19",
+  "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.19";
+export const VERSION = "0.0.20";
 
 export { View, Text, Image, TextInput, NativeView } from "./primitives";
 export type {

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

@@ -226,3 +226,11 @@ describe("per-side borders + inner shadow (0.0.19)", () => {
     });
   });
 });
+
+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

@@ -310,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;
   }