@vsreact/core 0.0.25 → 0.0.26

package/dist/hostConfig.js

@@ -2,6 +2,7 @@
 // mutation ops; event props become handler-registry entries + listener lists.
 import { DefaultEventPriority } from "react-reconciler/constants";
 import { queueOp, flushOps, setHandlers, removeHandlers } from "./bridge";
+import { commitProps, releaseNode } from "./transitions";
 import { tw } from "./tw";
 let nextId = 1;
 const hostTypes = {
@@ -64,7 +65,8 @@ function normalizeProps(props) {
 function applyProps(instance, props) {
     const { payload, handlers } = normalizeProps(props);
     setHandlers(instance.id, handlers);
-    queueOp(["setProps", instance.id, payload]);
+    // The transition engine queues the op — tweened when the style asks for it.
+    commitProps(instance.id, payload);
 }
 export const hostConfig = {
     supportsMutation: true,
@@ -115,6 +117,7 @@ export const hostConfig = {
     clearContainer: () => queueOp(["clearContainer"]),
     detachDeletedInstance(instance) {
         removeHandlers(instance.id);
+        releaseNode(instance.id);
     },
     getCurrentEventPriority: () => DefaultEventPriority,
     getInstanceFromNode: () => null,

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.25";
+export declare const VERSION = "0.0.26";
 export { View, Text, Image, TextInput, NativeView, Svg, SvgPath } from "./primitives";
 export type { CommonProps, TextProps, ImageProps, TextInputProps, NativeViewProps, SvgProps, SvgPathProps, } 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.25";
+export const VERSION = "0.0.26";
 export { View, Text, Image, TextInput, NativeView, Svg, SvgPath } from "./primitives";
 export { render, unmount } from "./render";
 export { native } from "./native";

package/dist/primitives.d.ts

@@ -15,10 +15,11 @@ export interface LayoutRect {
     width: number;
     height: number;
 }
-/** Mouse-wheel payload. dy is JUCE's notch fraction (~0.1 per notch,
-    positive = wheel up). */
+/** Mouse-wheel payload. Deltas are JUCE's notch fraction (~0.1 per notch,
+    dy positive = wheel up; dx nonzero on trackpads/tilt wheels). */
 export interface WheelEventPayload {
     dy: number;
+    dx: number;
 }
 /** Web-style key event: key names match KeyboardEvent.key ("ArrowUp",
     "Enter", "Escape", " ", "a"). */
@@ -38,8 +39,10 @@ export interface CommonProps {
     className?: string;
     style?: Style;
     children?: ReactNode;
-    /** Resets the scroll offset of an overflow-y-scroll container. */
+    /** Resets the vertical scroll offset of an overflow-scroll container. */
     scrollTop?: number;
+    /** Resets the horizontal scroll offset of an overflow-scroll container. */
+    scrollLeft?: number;
     onClick?: () => void;
     onDoubleClick?: () => void;
     /** Wheel over this node (controls win the wheel over scroll containers). */
@@ -67,8 +70,34 @@ export interface CommonProps {
 export declare function View(props: CommonProps): import("react").ReactElement<CommonProps, string | import("react").JSXElementConstructor<any>>;
 export interface TextProps extends Omit<CommonProps, "children"> {
     children?: ReactNode;
+    /** Opt this text into selection (drag to select, double-click for a word,
+        Ctrl/Cmd+C copies). Text is NOT selectable by default. Equivalent to
+        the `select-text` class / `userSelect: "text"` style key. */
+    selectable?: boolean;
 }
-export declare function Text(props: TextProps): import("react").ReactElement<TextProps, string | import("react").JSXElementConstructor<any>>;
+export declare function Text({ selectable, ...props }: TextProps): import("react").ReactElement<{
+    children?: ReactNode;
+    style?: Style | undefined;
+    className?: string | undefined;
+    scrollTop?: number | undefined;
+    scrollLeft?: number | undefined;
+    onClick?: (() => void) | undefined;
+    onDoubleClick?: (() => void) | undefined;
+    onWheel?: ((e: WheelEventPayload) => void) | undefined;
+    onMouseEnter?: (() => void) | undefined;
+    onMouseLeave?: (() => void) | undefined;
+    onMouseDown?: (() => void) | undefined;
+    onMouseUp?: (() => void) | undefined;
+    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;
+    onKeyUp?: ((e: KeyEventPayload) => void) | undefined;
+    onFocus?: (() => void) | undefined;
+    onBlur?: (() => void) | undefined;
+    onLayout?: ((rect: LayoutRect) => void) | undefined;
+}, string | import("react").JSXElementConstructor<any>>;
 export interface ImageProps extends CommonProps {
     src: string;
 }
@@ -119,6 +148,7 @@ export declare function TextInput({ onChange, onSubmit, ...rest }: TextInputProp
     style?: Style | undefined;
     className?: string | undefined;
     scrollTop?: number | undefined;
+    scrollLeft?: number | undefined;
     onClick?: (() => void) | undefined;
     onDoubleClick?: (() => void) | undefined;
     onWheel?: ((e: WheelEventPayload) => void) | undefined;

package/dist/primitives.js

@@ -2,7 +2,9 @@ import { createElement } from "react";
 export function View(props) {
     return createElement("vs-view", props);
 }
-export function Text(props) {
+export function Text({ selectable, ...props }) {
+    if (selectable)
+        props = { ...props, style: { userSelect: "text", ...props.style } };
     return createElement("vs-text", props);
 }
 export function Image(props) {

package/dist/transitions.d.ts

@@ -0,0 +1,23 @@
+import type { Style } from "./tw";
+type Payload = Record<string, unknown> & {
+    style?: Style;
+};
+export type TransitionEasingName = "linear" | "ease-in" | "ease-out" | "ease-in-out";
+/** "#rrggbb" or "#rrggbbaa" → [r,g,b,a]; undefined for anything else. */
+export declare function parseHexColor(value: unknown): [number, number, number, number] | undefined;
+export declare function lerpHexColor(from: string, to: string, t: number): string;
+/** The animatable keys that differ between two styles, honoring the
+    transitionProperty group. Exported for tests. */
+export declare function transitionKeys(prev: Style, next: Style, property: string): string[];
+/** Interpolated patch for the animated keys at eased progress t. Exported
+    for tests. */
+export declare function interpolateStyle(from: Style, to: Style, keys: string[], t: number): Style;
+/** Style patch at loop phase t (0→1). Exported for tests. */
+export declare const animationPresets: Record<string, (t: number) => Style>;
+export declare const animationDurations: Record<string, number>;
+/** hostConfig's single entry point: queue this commit's setProps, animated
+    when the style asks for it. */
+export declare function commitProps(nodeId: number, payload: Payload): void;
+/** Unmount cleanup — hostConfig.detachDeletedInstance. */
+export declare function releaseNode(nodeId: number): void;
+export {};

package/dist/transitions.js

@@ -0,0 +1,205 @@
+// CSS transitions and keyframe presets, driven from JS. When a commit changes
+// a node whose style carries transitionDuration, the changed animatable keys
+// tween from their *currently displayed* values instead of jumping; animate-*
+// classes run keyframe loops. Every frame re-sends the node's full payload
+// (setProps replaces wholesale) with the animated keys patched — the same
+// traffic a useTween re-render produces, without the component code.
+//
+// Honest limit: native-side hover/active/focus style merges don't transition
+// (they never round-trip through JS). Animate those with onMouseEnter state.
+import { queueOp, flushOps } from "./bridge";
+import { Easing } from "./animation";
+const easings = {
+    linear: Easing.linear,
+    "ease-in": (t) => t * t * t,
+    "ease-out": Easing.outCubic,
+    "ease-in-out": Easing.inOutCubic,
+};
+/** Keys each transitionProperty group may animate. "colors" is any *Color/
+    color key; "all" is every animatable difference. */
+const transformKeys = ["rotate", "scale", "translateX", "translateY"];
+const defaultKeys = [
+    "color", "backgroundColor", "borderColor", "opacity",
+    ...transformKeys, "blurRadius", "backdropBlurRadius",
+];
+function keysForProperty(property, candidates) {
+    switch (property) {
+        case "all":
+            return candidates;
+        case "colors":
+            return candidates.filter((k) => /color/i.test(k));
+        case "opacity":
+            return candidates.filter((k) => k === "opacity");
+        case "transform":
+            return candidates.filter((k) => transformKeys.includes(k));
+        case "none":
+            return [];
+        default:
+            return candidates.filter((k) => defaultKeys.includes(k));
+    }
+}
+// ── value interpolation ────────────────────────────────────────────────
+/** "#rrggbb" or "#rrggbbaa" → [r,g,b,a]; undefined for anything else. */
+export function parseHexColor(value) {
+    if (typeof value !== "string" || !/^#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/.test(value))
+        return undefined;
+    const n = (i) => parseInt(value.slice(i, i + 2), 16);
+    return [n(1), n(3), n(5), value.length === 9 ? n(7) : 255];
+}
+export function lerpHexColor(from, to, t) {
+    const a = parseHexColor(from);
+    const b = parseHexColor(to);
+    const hex = (i) => Math.round(a[i] + (b[i] - a[i]) * t)
+        .toString(16)
+        .padStart(2, "0");
+    const alpha = a[3] !== 255 || b[3] !== 255 ? hex(3) : "";
+    return `#${hex(0)}${hex(1)}${hex(2)}${alpha}`;
+}
+function isAnimatablePair(from, to) {
+    if (typeof from === "number" && typeof to === "number")
+        return Number.isFinite(from) && Number.isFinite(to);
+    return parseHexColor(from) !== undefined && parseHexColor(to) !== undefined;
+}
+/** The animatable keys that differ between two styles, honoring the
+    transitionProperty group. Exported for tests. */
+export function transitionKeys(prev, next, property) {
+    const candidates = Object.keys(next).filter((key) => prev[key] !== next[key] && isAnimatablePair(prev[key], next[key]));
+    return keysForProperty(property, candidates);
+}
+/** Interpolated patch for the animated keys at eased progress t. Exported
+    for tests. */
+export function interpolateStyle(from, to, keys, t) {
+    const patch = {};
+    for (const key of keys) {
+        const a = from[key];
+        const b = to[key];
+        patch[key] =
+            typeof a === "number" && typeof b === "number"
+                ? a + (b - a) * t
+                : lerpHexColor(String(a), String(b), t);
+    }
+    return patch;
+}
+// ── keyframe presets (animate-*) ───────────────────────────────────────
+/** Style patch at loop phase t (0→1). Exported for tests. */
+export const animationPresets = {
+    spin: (t) => ({ rotate: 360 * t }),
+    pulse: (t) => ({ opacity: t < 0.5 ? 1 - t : t }), // 1 → 0.5 → 1
+    bounce: (t) => {
+        // dip up and settle, roughly the web's bounce
+        const k = t < 0.5 ? Easing.outCubic(t * 2) : 1 - Easing.inOutCubic((t - 0.5) * 2);
+        return { translateY: `${(-25 * k).toFixed(2)}%` };
+    },
+};
+export const animationDurations = {
+    spin: 1000,
+    pulse: 2000,
+    bounce: 1000,
+};
+const FRAME_MS = 16;
+const lastStyles = new Map();
+const activeTransitions = new Map();
+const activeAnimations = new Map();
+let driver;
+function ensureDriver() {
+    if (driver !== undefined)
+        return;
+    driver = setInterval(tick, FRAME_MS);
+}
+function stopDriverIfIdle() {
+    if (driver !== undefined && activeTransitions.size === 0 && activeAnimations.size === 0) {
+        clearInterval(driver);
+        driver = undefined;
+    }
+}
+function send(nodeId, payload, patch) {
+    queueOp(["setProps", nodeId, { ...payload, style: { ...payload.style, ...patch } }]);
+}
+function tick() {
+    const now = Date.now();
+    for (const [nodeId, tr] of [...activeTransitions]) {
+        const t = Math.min(1, Math.max(0, (now - tr.start) / tr.duration));
+        const target = tr.payload.style ?? {};
+        send(nodeId, tr.payload, interpolateStyle(tr.from, target, tr.keys, tr.easing(t)));
+        if (t >= 1) {
+            activeTransitions.delete(nodeId);
+            lastStyles.set(nodeId, target);
+        }
+    }
+    for (const [nodeId, anim] of activeAnimations) {
+        const phase = ((now - anim.start) % anim.duration) / anim.duration;
+        send(nodeId, anim.payload, animationPresets[anim.name](phase));
+    }
+    flushOps();
+    stopDriverIfIdle();
+}
+/** The currently displayed style for a node (mid-flight interpolation when a
+    transition is running, else the last committed style). */
+function displayedStyle(nodeId) {
+    const tr = activeTransitions.get(nodeId);
+    if (!tr)
+        return lastStyles.get(nodeId);
+    const t = Math.min(1, Math.max(0, (Date.now() - tr.start) / tr.duration));
+    return { ...tr.payload.style, ...interpolateStyle(tr.from, tr.payload.style ?? {}, tr.keys, tr.easing(t)) };
+}
+/** hostConfig's single entry point: queue this commit's setProps, animated
+    when the style asks for it. */
+export function commitProps(nodeId, payload) {
+    const next = payload.style ?? {};
+    const prev = displayedStyle(nodeId);
+    lastStyles.set(nodeId, next);
+    // Keyframe preset loops (animate-*).
+    const name = typeof next.animationName === "string" ? next.animationName : undefined;
+    if (name !== undefined && animationPresets[name] !== undefined) {
+        const running = activeAnimations.get(nodeId);
+        const duration = typeof next.animationDuration === "number" && next.animationDuration > 0
+            ? next.animationDuration
+            : animationDurations[name];
+        activeAnimations.set(nodeId, {
+            payload,
+            name,
+            duration,
+            // A re-render mid-loop keeps the phase; a fresh class starts at 0.
+            start: running !== undefined && running.name === name ? running.start : Date.now(),
+        });
+        ensureDriver();
+        queueOp(["setProps", nodeId, payload]);
+        return;
+    }
+    if (activeAnimations.delete(nodeId))
+        stopDriverIfIdle();
+    // Property transitions.
+    const duration = typeof next.transitionDuration === "number" ? next.transitionDuration : 0;
+    const property = typeof next.transitionProperty === "string" ? next.transitionProperty : "default";
+    if (prev !== undefined && duration > 0 && property !== "none") {
+        const keys = transitionKeys(prev, next, property);
+        if (keys.length > 0) {
+            const from = {};
+            for (const key of keys)
+                from[key] = prev[key];
+            const delay = typeof next.transitionDelay === "number" ? next.transitionDelay : 0;
+            const easingName = String(next.transitionEasing ?? "ease-in-out");
+            activeTransitions.set(nodeId, {
+                payload,
+                from,
+                keys,
+                start: Date.now() + delay,
+                duration,
+                easing: easings[easingName] ?? easings["ease-in-out"],
+            });
+            ensureDriver();
+            // Land this commit at the old values so nothing jumps before frame 1.
+            send(nodeId, payload, from);
+            return;
+        }
+    }
+    activeTransitions.delete(nodeId);
+    queueOp(["setProps", nodeId, payload]);
+}
+/** Unmount cleanup — hostConfig.detachDeletedInstance. */
+export function releaseNode(nodeId) {
+    lastStyles.delete(nodeId);
+    activeTransitions.delete(nodeId);
+    activeAnimations.delete(nodeId);
+    stopDriverIfIdle();
+}

package/dist/tw.js

@@ -40,7 +40,13 @@ const staticClasses = {
     "overflow-hidden": { overflow: "hidden" },
     "overflow-visible": { overflow: "visible" },
     "overflow-y-scroll": { overflow: "scroll" },
+    "overflow-x-scroll": { overflow: "scroll" },
     "overflow-scroll": { overflow: "scroll" },
+    // overflow:"scroll" only engages the axes whose content actually
+    // overflows, so auto is the same key.
+    "overflow-auto": { overflow: "scroll" },
+    "overflow-y-auto": { overflow: "scroll" },
+    "overflow-x-auto": { overflow: "scroll" },
     "w-full": { width: "100%" },
     "h-full": { height: "100%" },
     "text-left": { textAlign: "left" },
@@ -80,6 +86,8 @@ const staticClasses = {
     "cursor-not-allowed": { cursor: "not-allowed" },
     "pointer-events-none": { pointerEvents: "none" },
     "pointer-events-auto": { pointerEvents: "auto" },
+    "select-text": { userSelect: "text" },
+    "select-none": { userSelect: "none" },
     hidden: { display: "none" },
     invisible: { visibility: "hidden" },
     visible: { visibility: "visible" },
@@ -98,6 +106,22 @@ const staticClasses = {
     "object-contain": { objectFit: "contain" },
     "object-cover": { objectFit: "cover" },
     "object-fill": { objectFit: "fill" },
+    blur: { blurRadius: 8 },
+    "blur-none": { blurRadius: 0 },
+    "blur-sm": { blurRadius: 4 },
+    "blur-md": { blurRadius: 12 },
+    "blur-lg": { blurRadius: 16 },
+    "blur-xl": { blurRadius: 24 },
+    "blur-2xl": { blurRadius: 40 },
+    "blur-3xl": { blurRadius: 64 },
+    "backdrop-blur": { backdropBlurRadius: 8 },
+    "backdrop-blur-none": { backdropBlurRadius: 0 },
+    "backdrop-blur-sm": { backdropBlurRadius: 4 },
+    "backdrop-blur-md": { backdropBlurRadius: 12 },
+    "backdrop-blur-lg": { backdropBlurRadius: 16 },
+    "backdrop-blur-xl": { backdropBlurRadius: 24 },
+    "backdrop-blur-2xl": { backdropBlurRadius: 40 },
+    "backdrop-blur-3xl": { backdropBlurRadius: 64 },
     shadow: { shadowColor: "#00000066", shadowRadius: 4, shadowOffsetY: 1 },
     "shadow-sm": { shadowColor: "#00000066", shadowRadius: 4, shadowOffsetY: 1 },
     "shadow-md": { shadowColor: "#00000066", shadowRadius: 8, shadowOffsetY: 2 },
@@ -118,6 +142,20 @@ const staticClasses = {
     "bg-gradient-to-tl": { gradientType: "linear", gradientAngle: 315 },
     "bg-gradient-radial": { gradientType: "radial" },
     "bg-gradient-conic": { gradientType: "conic" },
+    transition: { transitionProperty: "default", transitionDuration: 150 },
+    "transition-all": { transitionProperty: "all", transitionDuration: 150 },
+    "transition-colors": { transitionProperty: "colors", transitionDuration: 150 },
+    "transition-opacity": { transitionProperty: "opacity", transitionDuration: 150 },
+    "transition-transform": { transitionProperty: "transform", transitionDuration: 150 },
+    "transition-none": { transitionProperty: "none" },
+    "ease-linear": { transitionEasing: "linear" },
+    "ease-in": { transitionEasing: "ease-in" },
+    "ease-out": { transitionEasing: "ease-out" },
+    "ease-in-out": { transitionEasing: "ease-in-out" },
+    "animate-spin": { animationName: "spin", animationDuration: 1000 },
+    "animate-pulse": { animationName: "pulse", animationDuration: 2000 },
+    "animate-bounce": { animationName: "bounce", animationDuration: 1000 },
+    "animate-none": { animationName: "none" },
 };
 const textSizes = {
     xs: 12, sm: 14, base: 16, lg: 18, xl: 20, "2xl": 24, "3xl": 30, "4xl": 36,
@@ -321,6 +359,24 @@ function resolveClass(cls) {
             const n = Number(rest);
             return Number.isFinite(n) ? { opacity: n / 100 } : undefined;
         }
+        case "blur": {
+            // Named sizes live in staticClasses; arbitrary is px: blur-[6].
+            if (rest.startsWith("[")) {
+                const radius = parseLength(rest);
+                if (typeof radius === "number")
+                    return { blurRadius: radius };
+            }
+            return undefined;
+        }
+        case "backdrop": {
+            // backdrop-blur-[6] (named backdrop-blur-* sizes are static classes)
+            if (rest.startsWith("blur-[")) {
+                const radius = parseLength(rest.slice("blur-".length));
+                if (typeof radius === "number")
+                    return { backdropBlurRadius: radius };
+            }
+            return undefined;
+        }
         case "leading": {
             if (rest.startsWith("[")) {
                 const px = parseLength(rest);
@@ -350,6 +406,19 @@ function resolveClass(cls) {
             const n = Number(rest);
             return Number.isFinite(n) ? { flex: n } : undefined;
         }
+        case "duration": {
+            // Milliseconds, literal (duration-150, duration-[320]).
+            const ms = rest.startsWith("[") ? parseLength(rest) : Number(rest);
+            return typeof ms === "number" && Number.isFinite(ms) && ms >= 0
+                ? { transitionDuration: ms }
+                : undefined;
+        }
+        case "delay": {
+            const ms = rest.startsWith("[") ? parseLength(rest) : Number(rest);
+            return typeof ms === "number" && Number.isFinite(ms) && ms >= 0
+                ? { transitionDelay: ms }
+                : undefined;
+        }
         case "z": {
             const z = rest.startsWith("[") ? parseLength(rest) : Number(rest);
             return typeof z === "number" && Number.isFinite(z) ? { zIndex: negate(z) } : undefined;

package/package.json

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

package/src/gaps.test.tsx

@@ -0,0 +1,205 @@
+// 0.0.26 "honest gaps" round: selection opt-in, blur classes, transitions,
+// animate-* presets, horizontal scroll surface.
+
+import { beforeEach, describe, expect, test } from "bun:test";
+import { useState } from "react";
+
+const batches: unknown[][][] = [];
+(globalThis as Record<string, any>).__vsreact_flush = (json: string) => {
+  batches.push(JSON.parse(json));
+};
+
+import { render, unmount, View, Text } from "./index";
+import { tw } from "./tw";
+import {
+  animationDurations,
+  animationPresets,
+  interpolateStyle,
+  lerpHexColor,
+  parseHexColor,
+  transitionKeys,
+} from "./transitions";
+
+const allOps = () => batches.flat();
+const opsNamed = (name: string) => allOps().filter((op: any) => op[0] === name);
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+beforeEach(() => {
+  unmount();
+  batches.length = 0;
+});
+
+describe("tw: 0.0.26 classes", () => {
+  test("overflow-x and auto variants map to overflow scroll", () => {
+    for (const cls of ["overflow-x-scroll", "overflow-x-auto", "overflow-auto", "overflow-y-auto"])
+      expect(tw(cls).style.overflow).toBe("scroll");
+  });
+
+  test("select-text / select-none map to userSelect", () => {
+    expect(tw("select-text").style.userSelect).toBe("text");
+    expect(tw("select-none").style.userSelect).toBe("none");
+  });
+
+  test("blur scale, arbitrary blur, and backdrop-blur", () => {
+    expect(tw("blur").style.blurRadius).toBe(8);
+    expect(tw("blur-sm").style.blurRadius).toBe(4);
+    expect(tw("blur-3xl").style.blurRadius).toBe(64);
+    expect(tw("blur-[6]").style.blurRadius).toBe(6);
+    expect(tw("backdrop-blur").style.backdropBlurRadius).toBe(8);
+    expect(tw("backdrop-blur-xl").style.backdropBlurRadius).toBe(24);
+    expect(tw("backdrop-blur-[10]").style.backdropBlurRadius).toBe(10);
+  });
+
+  test("transition groups, duration, delay, easing", () => {
+    expect(tw("transition").style).toEqual({ transitionProperty: "default", transitionDuration: 150 });
+    expect(tw("transition-colors").style.transitionProperty).toBe("colors");
+    expect(tw("transition-none").style.transitionProperty).toBe("none");
+    expect(tw("duration-300").style.transitionDuration).toBe(300);
+    expect(tw("duration-[320]").style.transitionDuration).toBe(320);
+    expect(tw("delay-75").style.transitionDelay).toBe(75);
+    expect(tw("ease-out").style.transitionEasing).toBe("ease-out");
+    expect(tw("ease-in-out").style.transitionEasing).toBe("ease-in-out");
+  });
+
+  test("animate presets carry name and default duration", () => {
+    expect(tw("animate-spin").style).toEqual({ animationName: "spin", animationDuration: 1000 });
+    expect(tw("animate-pulse").style.animationName).toBe("pulse");
+    expect(tw("animate-bounce").style.animationName).toBe("bounce");
+    expect(tw("animate-none").style.animationName).toBe("none");
+  });
+});
+
+describe("transitions: pure helpers", () => {
+  test("parseHexColor handles 6 and 8 digit hex only", () => {
+    expect(parseHexColor("#ff0080")).toEqual([255, 0, 128, 255]);
+    expect(parseHexColor("#ff008040")).toEqual([255, 0, 128, 64]);
+    expect(parseHexColor("red")).toBeUndefined();
+    expect(parseHexColor("#fff")).toBeUndefined();
+    expect(parseHexColor(12)).toBeUndefined();
+  });
+
+  test("lerpHexColor midpoints and alpha promotion", () => {
+    expect(lerpHexColor("#000000", "#ffffff", 0.5)).toBe("#808080");
+    expect(lerpHexColor("#000000", "#ffffff", 0)).toBe("#000000");
+    expect(lerpHexColor("#00000000", "#000000", 1)).toBe("#000000ff");
+  });
+
+  test("transitionKeys diffs only animatable changes in the group", () => {
+    const prev = { opacity: 0, backgroundColor: "#000000", width: 10, flexDirection: "row" };
+    const next = { opacity: 1, backgroundColor: "#ffffff", width: 20, flexDirection: "column" };
+
+    expect(transitionKeys(prev, next, "all").sort()).toEqual(["backgroundColor", "opacity", "width"]);
+    expect(transitionKeys(prev, next, "colors")).toEqual(["backgroundColor"]);
+    expect(transitionKeys(prev, next, "opacity")).toEqual(["opacity"]);
+    expect(transitionKeys(prev, next, "none")).toEqual([]);
+    // default group: opacity+colors+transform, not width
+    expect(transitionKeys(prev, next, "default").sort()).toEqual(["backgroundColor", "opacity"]);
+  });
+
+  test("transitionKeys skips keys missing an endpoint or non-animatable", () => {
+    expect(transitionKeys({}, { opacity: 1 }, "all")).toEqual([]);
+    expect(transitionKeys({ translateX: "50%" }, { translateX: "0%" }, "all")).toEqual([]);
+  });
+
+  test("interpolateStyle blends numbers and colors", () => {
+    const patch = interpolateStyle(
+      { opacity: 0, color: "#000000" },
+      { opacity: 1, color: "#ffffff" },
+      ["opacity", "color"],
+      0.5,
+    );
+    expect(patch.opacity).toBeCloseTo(0.5, 5);
+    expect(patch.color).toBe("#808080");
+  });
+
+  test("presets: spin is linear rotation, pulse dips to 0.5, bounce returns home", () => {
+    expect(animationPresets.spin(0).rotate).toBe(0);
+    expect(animationPresets.spin(0.25).rotate).toBe(90);
+    expect(animationPresets.pulse(0).opacity).toBe(1);
+    expect(animationPresets.pulse(0.5).opacity).toBe(0.5);
+    expect(animationPresets.pulse(1).opacity).toBe(1);
+    expect(animationPresets.bounce(0).translateY).toBe("0.00%");
+    expect(String(animationPresets.bounce(0.5).translateY)).toBe("-25.00%");
+    expect(animationDurations.spin).toBe(1000);
+  });
+});
+
+describe("selection + scroll props through the bridge", () => {
+  test("<Text selectable> lands userSelect:'text' in the style payload", () => {
+    render(<Text selectable>copy me</Text>);
+
+    const create: any = opsNamed("create").find((op: any) => op[2] === "text");
+    const props: any = opsNamed("setProps").find((op: any) => op[1] === create[1]);
+    expect(props[2].style.userSelect).toBe("text");
+  });
+
+  test("plain <Text> stays unselectable (no userSelect key)", () => {
+    render(<Text>plain</Text>);
+
+    const create: any = opsNamed("create").find((op: any) => op[2] === "text");
+    const props: any = opsNamed("setProps").find((op: any) => op[1] === create[1]);
+    expect(props[2].style.userSelect).toBeUndefined();
+    expect(props[2].selectable).toBeUndefined(); // consumed, not forwarded
+  });
+
+  test("scrollLeft passes through like scrollTop", () => {
+    render(<View className="overflow-x-scroll" scrollLeft={12} scrollTop={4} />);
+
+    const props: any = opsNamed("setProps")[0];
+    expect(props[2].scrollLeft).toBe(12);
+    expect(props[2].scrollTop).toBe(4);
+    expect(props[2].style.overflow).toBe("scroll");
+  });
+});
+
+describe("transition engine end-to-end", () => {
+  test("a style change with transitionDuration tweens instead of jumping", async () => {
+    function Fader() {
+      const [on, setOn] = useState(false);
+      return (
+        <View
+          onClick={() => setOn(true)}
+          style={{ opacity: on ? 1 : 0, transitionDuration: 60, transitionProperty: "all" }}
+        />
+      );
+    }
+
+    render(<Fader />);
+
+    const create: any = opsNamed("create")[0];
+    const nodeId = create[1];
+
+    (globalThis as Record<string, any>).__vsreact_dispatch(
+      JSON.stringify({ kind: "event", nodeId, type: "click" }),
+    );
+
+    await sleep(160);
+
+    const styleOps = opsNamed("setProps")
+      .filter((op: any) => op[1] === nodeId)
+      .map((op: any) => op[2].style.opacity);
+
+    // The commit lands at the old value, frames climb, the last hits 1 exactly.
+    expect(styleOps[styleOps.length - 1]).toBe(1);
+    expect(styleOps.some((o: number) => o > 0 && o < 1)).toBe(true);
+  });
+
+  test("animate-spin keeps emitting rotate frames until unmounted", async () => {
+    render(<View className="animate-spin" />);
+
+    const create: any = opsNamed("create")[0];
+    const nodeId = create[1];
+
+    await sleep(80);
+    unmount();
+    const count = opsNamed("setProps").filter(
+      (op: any) => op[1] === nodeId && typeof op[2].style.rotate === "number",
+    ).length;
+    expect(count).toBeGreaterThan(2);
+
+    batches.length = 0;
+    await sleep(60);
+    // no frames after unmount
+    expect(opsNamed("setProps").filter((op: any) => op[1] === nodeId).length).toBe(0);
+  });
+});

package/src/hostConfig.ts

@@ -3,6 +3,7 @@
 
 import { DefaultEventPriority } from "react-reconciler/constants";
 import { queueOp, flushOps, setHandlers, removeHandlers, type EventHandler } from "./bridge";
+import { commitProps, releaseNode } from "./transitions";
 import { tw, type Style } from "./tw";
 
 export interface Instance {
@@ -82,7 +83,8 @@ function normalizeProps(props: Record<string, unknown>): {
 function applyProps(instance: Instance, props: Record<string, unknown>): void {
   const { payload, handlers } = normalizeProps(props);
   setHandlers(instance.id, handlers);
-  queueOp(["setProps", instance.id, payload]);
+  // The transition engine queues the op — tweened when the style asks for it.
+  commitProps(instance.id, payload);
 }
 
 export const hostConfig = {
@@ -157,6 +159,7 @@ export const hostConfig = {
 
   detachDeletedInstance(instance: Instance): void {
     removeHandlers(instance.id);
+    releaseNode(instance.id);
   },
 
   getCurrentEventPriority: () => DefaultEventPriority,

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.25";
+export const VERSION = "0.0.26";
 
 export { View, Text, Image, TextInput, NativeView, Svg, SvgPath } from "./primitives";
 export type {

package/src/primitives.tsx

@@ -18,10 +18,11 @@ export interface LayoutRect {
   height: number;
 }
 
-/** Mouse-wheel payload. dy is JUCE's notch fraction (~0.1 per notch,
-    positive = wheel up). */
+/** Mouse-wheel payload. Deltas are JUCE's notch fraction (~0.1 per notch,
+    dy positive = wheel up; dx nonzero on trackpads/tilt wheels). */
 export interface WheelEventPayload {
   dy: number;
+  dx: number;
 }
 
 /** Web-style key event: key names match KeyboardEvent.key ("ArrowUp",
@@ -44,8 +45,10 @@ export interface CommonProps {
   className?: string;
   style?: Style;
   children?: ReactNode;
-  /** Resets the scroll offset of an overflow-y-scroll container. */
+  /** Resets the vertical scroll offset of an overflow-scroll container. */
   scrollTop?: number;
+  /** Resets the horizontal scroll offset of an overflow-scroll container. */
+  scrollLeft?: number;
   onClick?: () => void;
   onDoubleClick?: () => void;
   /** Wheel over this node (controls win the wheel over scroll containers). */
@@ -77,9 +80,14 @@ export function View(props: CommonProps) {
 
 export interface TextProps extends Omit<CommonProps, "children"> {
   children?: ReactNode; // strings/numbers (and fragments of them)
+  /** Opt this text into selection (drag to select, double-click for a word,
+      Ctrl/Cmd+C copies). Text is NOT selectable by default. Equivalent to
+      the `select-text` class / `userSelect: "text"` style key. */
+  selectable?: boolean;
 }
 
-export function Text(props: TextProps) {
+export function Text({ selectable, ...props }: TextProps) {
+  if (selectable) props = { ...props, style: { userSelect: "text", ...props.style } };
   return createElement("vs-text", props);
 }
 

package/src/transitions.ts

@@ -0,0 +1,262 @@
+// CSS transitions and keyframe presets, driven from JS. When a commit changes
+// a node whose style carries transitionDuration, the changed animatable keys
+// tween from their *currently displayed* values instead of jumping; animate-*
+// classes run keyframe loops. Every frame re-sends the node's full payload
+// (setProps replaces wholesale) with the animated keys patched — the same
+// traffic a useTween re-render produces, without the component code.
+//
+// Honest limit: native-side hover/active/focus style merges don't transition
+// (they never round-trip through JS). Animate those with onMouseEnter state.
+
+import { queueOp, flushOps } from "./bridge";
+import { Easing, type EasingFn } from "./animation";
+import type { Style, StyleValue } from "./tw";
+
+type Payload = Record<string, unknown> & { style?: Style };
+
+export type TransitionEasingName = "linear" | "ease-in" | "ease-out" | "ease-in-out";
+
+const easings: Record<TransitionEasingName, EasingFn> = {
+  linear: Easing.linear,
+  "ease-in": (t) => t * t * t,
+  "ease-out": Easing.outCubic,
+  "ease-in-out": Easing.inOutCubic,
+};
+
+/** Keys each transitionProperty group may animate. "colors" is any *Color/
+    color key; "all" is every animatable difference. */
+const transformKeys = ["rotate", "scale", "translateX", "translateY"];
+const defaultKeys = [
+  "color", "backgroundColor", "borderColor", "opacity",
+  ...transformKeys, "blurRadius", "backdropBlurRadius",
+];
+
+function keysForProperty(property: string, candidates: string[]): string[] {
+  switch (property) {
+    case "all":
+      return candidates;
+    case "colors":
+      return candidates.filter((k) => /color/i.test(k));
+    case "opacity":
+      return candidates.filter((k) => k === "opacity");
+    case "transform":
+      return candidates.filter((k) => transformKeys.includes(k));
+    case "none":
+      return [];
+    default:
+      return candidates.filter((k) => defaultKeys.includes(k));
+  }
+}
+
+// ── value interpolation ────────────────────────────────────────────────
+
+/** "#rrggbb" or "#rrggbbaa" → [r,g,b,a]; undefined for anything else. */
+export function parseHexColor(value: unknown): [number, number, number, number] | undefined {
+  if (typeof value !== "string" || !/^#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/.test(value)) return undefined;
+  const n = (i: number) => parseInt(value.slice(i, i + 2), 16);
+  return [n(1), n(3), n(5), value.length === 9 ? n(7) : 255];
+}
+
+export function lerpHexColor(from: string, to: string, t: number): string {
+  const a = parseHexColor(from)!;
+  const b = parseHexColor(to)!;
+  const hex = (i: number) =>
+    Math.round(a[i] + (b[i] - a[i]) * t)
+      .toString(16)
+      .padStart(2, "0");
+  const alpha = a[3] !== 255 || b[3] !== 255 ? hex(3) : "";
+  return `#${hex(0)}${hex(1)}${hex(2)}${alpha}`;
+}
+
+function isAnimatablePair(from: StyleValue | undefined, to: StyleValue | undefined): boolean {
+  if (typeof from === "number" && typeof to === "number") return Number.isFinite(from) && Number.isFinite(to);
+  return parseHexColor(from) !== undefined && parseHexColor(to) !== undefined;
+}
+
+/** The animatable keys that differ between two styles, honoring the
+    transitionProperty group. Exported for tests. */
+export function transitionKeys(prev: Style, next: Style, property: string): string[] {
+  const candidates = Object.keys(next).filter(
+    (key) => prev[key] !== next[key] && isAnimatablePair(prev[key], next[key]),
+  );
+  return keysForProperty(property, candidates);
+}
+
+/** Interpolated patch for the animated keys at eased progress t. Exported
+    for tests. */
+export function interpolateStyle(from: Style, to: Style, keys: string[], t: number): Style {
+  const patch: Style = {};
+  for (const key of keys) {
+    const a = from[key];
+    const b = to[key];
+    patch[key] =
+      typeof a === "number" && typeof b === "number"
+        ? a + (b - a) * t
+        : lerpHexColor(String(a), String(b), t);
+  }
+  return patch;
+}
+
+// ── keyframe presets (animate-*) ───────────────────────────────────────
+
+/** Style patch at loop phase t (0→1). Exported for tests. */
+export const animationPresets: Record<string, (t: number) => Style> = {
+  spin: (t) => ({ rotate: 360 * t }),
+  pulse: (t) => ({ opacity: t < 0.5 ? 1 - t : t }), // 1 → 0.5 → 1
+  bounce: (t) => {
+    // dip up and settle, roughly the web's bounce
+    const k = t < 0.5 ? Easing.outCubic(t * 2) : 1 - Easing.inOutCubic((t - 0.5) * 2);
+    return { translateY: `${(-25 * k).toFixed(2)}%` };
+  },
+};
+
+export const animationDurations: Record<string, number> = {
+  spin: 1000,
+  pulse: 2000,
+  bounce: 1000,
+};
+
+// ── the shared frame driver ────────────────────────────────────────────
+
+interface ActiveTransition {
+  payload: Payload;
+  from: Style;
+  keys: string[];
+  start: number;
+  duration: number;
+  easing: EasingFn;
+}
+
+interface ActiveAnimation {
+  payload: Payload;
+  name: string;
+  start: number;
+  duration: number;
+}
+
+const FRAME_MS = 16;
+const lastStyles = new Map<number, Style>();
+const activeTransitions = new Map<number, ActiveTransition>();
+const activeAnimations = new Map<number, ActiveAnimation>();
+let driver: ReturnType<typeof setInterval> | undefined;
+
+function ensureDriver(): void {
+  if (driver !== undefined) return;
+  driver = setInterval(tick, FRAME_MS);
+}
+
+function stopDriverIfIdle(): void {
+  if (driver !== undefined && activeTransitions.size === 0 && activeAnimations.size === 0) {
+    clearInterval(driver);
+    driver = undefined;
+  }
+}
+
+function send(nodeId: number, payload: Payload, patch: Style): void {
+  queueOp(["setProps", nodeId, { ...payload, style: { ...payload.style, ...patch } }]);
+}
+
+function tick(): void {
+  const now = Date.now();
+
+  for (const [nodeId, tr] of [...activeTransitions]) {
+    const t = Math.min(1, Math.max(0, (now - tr.start) / tr.duration));
+    const target = tr.payload.style ?? {};
+    send(nodeId, tr.payload, interpolateStyle(tr.from, target, tr.keys, tr.easing(t)));
+
+    if (t >= 1) {
+      activeTransitions.delete(nodeId);
+      lastStyles.set(nodeId, target);
+    }
+  }
+
+  for (const [nodeId, anim] of activeAnimations) {
+    const phase = ((now - anim.start) % anim.duration) / anim.duration;
+    send(nodeId, anim.payload, animationPresets[anim.name](phase));
+  }
+
+  flushOps();
+  stopDriverIfIdle();
+}
+
+/** The currently displayed style for a node (mid-flight interpolation when a
+    transition is running, else the last committed style). */
+function displayedStyle(nodeId: number): Style | undefined {
+  const tr = activeTransitions.get(nodeId);
+  if (!tr) return lastStyles.get(nodeId);
+  const t = Math.min(1, Math.max(0, (Date.now() - tr.start) / tr.duration));
+  return { ...tr.payload.style, ...interpolateStyle(tr.from, tr.payload.style ?? {}, tr.keys, tr.easing(t)) };
+}
+
+/** hostConfig's single entry point: queue this commit's setProps, animated
+    when the style asks for it. */
+export function commitProps(nodeId: number, payload: Payload): void {
+  const next = payload.style ?? {};
+  const prev = displayedStyle(nodeId);
+  lastStyles.set(nodeId, next);
+
+  // Keyframe preset loops (animate-*).
+  const name = typeof next.animationName === "string" ? next.animationName : undefined;
+
+  if (name !== undefined && animationPresets[name] !== undefined) {
+    const running = activeAnimations.get(nodeId);
+    const duration =
+      typeof next.animationDuration === "number" && next.animationDuration > 0
+        ? next.animationDuration
+        : animationDurations[name];
+
+    activeAnimations.set(nodeId, {
+      payload,
+      name,
+      duration,
+      // A re-render mid-loop keeps the phase; a fresh class starts at 0.
+      start: running !== undefined && running.name === name ? running.start : Date.now(),
+    });
+    ensureDriver();
+    queueOp(["setProps", nodeId, payload]);
+    return;
+  }
+
+  if (activeAnimations.delete(nodeId)) stopDriverIfIdle();
+
+  // Property transitions.
+  const duration = typeof next.transitionDuration === "number" ? next.transitionDuration : 0;
+  const property = typeof next.transitionProperty === "string" ? next.transitionProperty : "default";
+
+  if (prev !== undefined && duration > 0 && property !== "none") {
+    const keys = transitionKeys(prev, next, property);
+
+    if (keys.length > 0) {
+      const from: Style = {};
+      for (const key of keys) from[key] = prev[key];
+
+      const delay = typeof next.transitionDelay === "number" ? next.transitionDelay : 0;
+      const easingName = String(next.transitionEasing ?? "ease-in-out") as TransitionEasingName;
+
+      activeTransitions.set(nodeId, {
+        payload,
+        from,
+        keys,
+        start: Date.now() + delay,
+        duration,
+        easing: easings[easingName] ?? easings["ease-in-out"],
+      });
+      ensureDriver();
+
+      // Land this commit at the old values so nothing jumps before frame 1.
+      send(nodeId, payload, from);
+      return;
+    }
+  }
+
+  activeTransitions.delete(nodeId);
+  queueOp(["setProps", nodeId, payload]);
+}
+
+/** Unmount cleanup — hostConfig.detachDeletedInstance. */
+export function releaseNode(nodeId: number): void {
+  lastStyles.delete(nodeId);
+  activeTransitions.delete(nodeId);
+  activeAnimations.delete(nodeId);
+  stopDriverIfIdle();
+}

package/src/tw.ts

@@ -51,7 +51,13 @@ const staticClasses: Record<string, Style> = {
   "overflow-hidden": { overflow: "hidden" },
   "overflow-visible": { overflow: "visible" },
   "overflow-y-scroll": { overflow: "scroll" },
+  "overflow-x-scroll": { overflow: "scroll" },
   "overflow-scroll": { overflow: "scroll" },
+  // overflow:"scroll" only engages the axes whose content actually
+  // overflows, so auto is the same key.
+  "overflow-auto": { overflow: "scroll" },
+  "overflow-y-auto": { overflow: "scroll" },
+  "overflow-x-auto": { overflow: "scroll" },
   "w-full": { width: "100%" },
   "h-full": { height: "100%" },
   "text-left": { textAlign: "left" },
@@ -91,6 +97,8 @@ const staticClasses: Record<string, Style> = {
   "cursor-not-allowed": { cursor: "not-allowed" },
   "pointer-events-none": { pointerEvents: "none" },
   "pointer-events-auto": { pointerEvents: "auto" },
+  "select-text": { userSelect: "text" },
+  "select-none": { userSelect: "none" },
   hidden: { display: "none" },
   invisible: { visibility: "hidden" },
   visible: { visibility: "visible" },
@@ -109,6 +117,22 @@ const staticClasses: Record<string, Style> = {
   "object-contain": { objectFit: "contain" },
   "object-cover": { objectFit: "cover" },
   "object-fill": { objectFit: "fill" },
+  blur: { blurRadius: 8 },
+  "blur-none": { blurRadius: 0 },
+  "blur-sm": { blurRadius: 4 },
+  "blur-md": { blurRadius: 12 },
+  "blur-lg": { blurRadius: 16 },
+  "blur-xl": { blurRadius: 24 },
+  "blur-2xl": { blurRadius: 40 },
+  "blur-3xl": { blurRadius: 64 },
+  "backdrop-blur": { backdropBlurRadius: 8 },
+  "backdrop-blur-none": { backdropBlurRadius: 0 },
+  "backdrop-blur-sm": { backdropBlurRadius: 4 },
+  "backdrop-blur-md": { backdropBlurRadius: 12 },
+  "backdrop-blur-lg": { backdropBlurRadius: 16 },
+  "backdrop-blur-xl": { backdropBlurRadius: 24 },
+  "backdrop-blur-2xl": { backdropBlurRadius: 40 },
+  "backdrop-blur-3xl": { backdropBlurRadius: 64 },
   shadow: { shadowColor: "#00000066", shadowRadius: 4, shadowOffsetY: 1 },
   "shadow-sm": { shadowColor: "#00000066", shadowRadius: 4, shadowOffsetY: 1 },
   "shadow-md": { shadowColor: "#00000066", shadowRadius: 8, shadowOffsetY: 2 },
@@ -129,6 +153,20 @@ const staticClasses: Record<string, Style> = {
   "bg-gradient-to-tl": { gradientType: "linear", gradientAngle: 315 },
   "bg-gradient-radial": { gradientType: "radial" },
   "bg-gradient-conic": { gradientType: "conic" },
+  transition: { transitionProperty: "default", transitionDuration: 150 },
+  "transition-all": { transitionProperty: "all", transitionDuration: 150 },
+  "transition-colors": { transitionProperty: "colors", transitionDuration: 150 },
+  "transition-opacity": { transitionProperty: "opacity", transitionDuration: 150 },
+  "transition-transform": { transitionProperty: "transform", transitionDuration: 150 },
+  "transition-none": { transitionProperty: "none" },
+  "ease-linear": { transitionEasing: "linear" },
+  "ease-in": { transitionEasing: "ease-in" },
+  "ease-out": { transitionEasing: "ease-out" },
+  "ease-in-out": { transitionEasing: "ease-in-out" },
+  "animate-spin": { animationName: "spin", animationDuration: 1000 },
+  "animate-pulse": { animationName: "pulse", animationDuration: 2000 },
+  "animate-bounce": { animationName: "bounce", animationDuration: 1000 },
+  "animate-none": { animationName: "none" },
 };
 
 const textSizes: Record<string, number> = {
@@ -329,6 +367,22 @@ function resolveClass(cls: string): Style | undefined {
       const n = Number(rest);
       return Number.isFinite(n) ? { opacity: n / 100 } : undefined;
     }
+    case "blur": {
+      // Named sizes live in staticClasses; arbitrary is px: blur-[6].
+      if (rest.startsWith("[")) {
+        const radius = parseLength(rest);
+        if (typeof radius === "number") return { blurRadius: radius };
+      }
+      return undefined;
+    }
+    case "backdrop": {
+      // backdrop-blur-[6] (named backdrop-blur-* sizes are static classes)
+      if (rest.startsWith("blur-[")) {
+        const radius = parseLength(rest.slice("blur-".length));
+        if (typeof radius === "number") return { backdropBlurRadius: radius };
+      }
+      return undefined;
+    }
     case "leading": {
       if (rest.startsWith("[")) {
         const px = parseLength(rest);
@@ -357,6 +411,19 @@ function resolveClass(cls: string): Style | undefined {
       const n = Number(rest);
       return Number.isFinite(n) ? { flex: n } : undefined;
     }
+    case "duration": {
+      // Milliseconds, literal (duration-150, duration-[320]).
+      const ms = rest.startsWith("[") ? parseLength(rest) : Number(rest);
+      return typeof ms === "number" && Number.isFinite(ms) && ms >= 0
+        ? { transitionDuration: ms }
+        : undefined;
+    }
+    case "delay": {
+      const ms = rest.startsWith("[") ? parseLength(rest) : Number(rest);
+      return typeof ms === "number" && Number.isFinite(ms) && ms >= 0
+        ? { transitionDelay: ms }
+        : undefined;
+    }
     case "z": {
       const z = rest.startsWith("[") ? parseLength(rest) : Number(rest);
       return typeof z === "number" && Number.isFinite(z) ? { zIndex: negate(z) } : undefined;