@vsreact/core 0.0.21 → 0.0.23

package/dist/hostConfig.js

@@ -21,6 +21,7 @@ const eventPropNames = {
     onMouseUp: "mouseup",
     onMouseMove: "mousemove",
     onKeyDown: "keydown",
+    onKeyUp: "keyup",
     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.21";
+export declare const VERSION = "0.0.23";
 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.21";
+export const VERSION = "0.0.23";
 export { View, Text, Image, TextInput, NativeView } from "./primitives";
 export { render, unmount } from "./render";
 export { native } from "./native";

package/dist/primitives.d.ts

@@ -56,6 +56,8 @@ export interface CommonProps {
         makes the node focusable: click focuses it, Tab cycles, keys arrive
         here with web KeyboardEvent.key names. */
     onKeyDown?: (e: KeyEventPayload) => void;
+    /** Fires when a key seen by onKeyDown is released (node still focused). */
+    onKeyUp?: (e: KeyEventPayload) => void;
     onFocus?: () => void;
     onBlur?: () => void;
     /** Fires after layout whenever this node's root-space rect changes —
@@ -105,6 +107,7 @@ export declare function TextInput({ onChange, onSubmit, ...rest }: TextInputProp
     onDragEnd?: ((e: DragEventPayload) => void) | undefined;
     onMouseMove?: ((e: MouseMovePayload) => void) | undefined;
     onKeyDown?: ((e: KeyEventPayload) => void) | undefined;
+    onKeyUp?: ((e: KeyEventPayload) => void) | undefined;
     onLayout?: ((rect: LayoutRect) => void) | undefined;
 }, string | import("react").JSXElementConstructor<any>>;
 export interface NativeViewProps extends CommonProps {

package/dist/tw.js

@@ -51,6 +51,14 @@ const staticClasses = {
     "font-medium": { fontWeight: 500 },
     "font-semibold": { fontWeight: 600 },
     "font-bold": { fontWeight: 700 },
+    truncate: { numberOfLines: 1 },
+    uppercase: { textTransform: "uppercase" },
+    lowercase: { textTransform: "lowercase" },
+    capitalize: { textTransform: "capitalize" },
+    "normal-case": { textTransform: "none" },
+    underline: { textDecoration: "underline" },
+    "line-through": { textDecoration: "line-through" },
+    "no-underline": { textDecoration: "none" },
     "tracking-tighter": { letterSpacing: -0.8 },
     "tracking-tight": { letterSpacing: -0.4 },
     "tracking-normal": { letterSpacing: 0 },
@@ -63,6 +71,21 @@ const staticClasses = {
     "cursor-pointer": { cursor: "pointer" },
     "cursor-text": { cursor: "text" },
     "cursor-default": { cursor: "default" },
+    "cursor-grab": { cursor: "grab" },
+    "cursor-grabbing": { cursor: "grabbing" },
+    "cursor-move": { cursor: "move" },
+    "cursor-ns-resize": { cursor: "ns-resize" },
+    "cursor-ew-resize": { cursor: "ew-resize" },
+    "cursor-crosshair": { cursor: "crosshair" },
+    "cursor-not-allowed": { cursor: "not-allowed" },
+    "pointer-events-none": { pointerEvents: "none" },
+    "pointer-events-auto": { pointerEvents: "auto" },
+    "border-solid": { borderStyle: "solid" },
+    "border-dashed": { borderStyle: "dashed" },
+    "border-dotted": { borderStyle: "dotted" },
+    "object-contain": { objectFit: "contain" },
+    "object-cover": { objectFit: "cover" },
+    "object-fill": { objectFit: "fill" },
     shadow: { shadowColor: "#00000066", shadowRadius: 4, shadowOffsetY: 1 },
     "shadow-sm": { shadowColor: "#00000066", shadowRadius: 4, shadowOffsetY: 1 },
     "shadow-md": { shadowColor: "#00000066", shadowRadius: 8, shadowOffsetY: 2 },
@@ -287,9 +310,21 @@ function resolveClass(cls) {
             return Number.isFinite(n) ? { opacity: n / 100 } : undefined;
         }
         case "leading": {
+            if (rest.startsWith("[")) {
+                const px = parseLength(rest);
+                return typeof px === "number" ? { lineHeight: px } : undefined;
+            }
             const n = Number(rest);
             return Number.isFinite(n) ? { lineHeight: n * 4 } : undefined;
         }
+        case "line": {
+            // line-clamp-N (rest arrives as "clamp-N")
+            if (rest.startsWith("clamp-")) {
+                const n = Number(rest.slice("clamp-".length));
+                return Number.isFinite(n) && n > 0 ? { numberOfLines: n } : undefined;
+            }
+            return undefined;
+        }
         case "tracking": {
             // Named scale lives in staticClasses; arbitrary is px: tracking-[3].
             if (rest.startsWith("[")) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vsreact/core",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "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

@@ -820,3 +820,18 @@ describe("keyboard control model (0.0.20)", () => {
     expect(seen.at(-1)?.[1]).toBeCloseTo(0.49);
   });
 });
+
+describe("keyup wiring (0.0.22)", () => {
+  test("onKeyUp registers the keyup listener", () => {
+    const ups: string[] = [];
+    render(<Slider value={0.5} onChange={() => {}} />);
+    unmount();
+    batches.length = 0;
+    const { View: V } = require("./index");
+    render(<V onKeyUp={(e: any) => ups.push(e.key)} />);
+
+    const id = nodeWithListener("keyup");
+    dispatch({ kind: "event", nodeId: id, type: "keyup", payload: { key: "ArrowUp", shift: false, ctrl: false, alt: false, meta: false } });
+    expect(ups).toEqual(["ArrowUp"]);
+  });
+});

package/src/hostConfig.ts

@@ -32,6 +32,7 @@ const eventPropNames: Record<string, string> = {
   onMouseUp: "mouseup",
   onMouseMove: "mousemove",
   onKeyDown: "keydown",
+  onKeyUp: "keyup",
   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.21";
+export const VERSION = "0.0.23";
 
 export { View, Text, Image, TextInput, NativeView } from "./primitives";
 export type {

package/src/primitives.tsx

@@ -62,6 +62,8 @@ export interface CommonProps {
       makes the node focusable: click focuses it, Tab cycles, keys arrive
       here with web KeyboardEvent.key names. */
   onKeyDown?: (e: KeyEventPayload) => void;
+  /** Fires when a key seen by onKeyDown is released (node still focused). */
+  onKeyUp?: (e: KeyEventPayload) => void;
   onFocus?: () => void;
   onBlur?: () => void;
   /** Fires after layout whenever this node's root-space rect changes —
@@ -83,6 +85,8 @@ export function Text(props: TextProps) {
 
 export interface ImageProps extends CommonProps {
   src: string;
+  /** Style keys also work: objectFit ("contain" default | "cover" | "fill")
+      and tintColor (fills the image's alpha with a solid colour). */
 }
 
 export function Image(props: ImageProps) {

package/src/tw.test.ts

@@ -234,3 +234,31 @@ describe("zIndex (0.0.20)", () => {
     expect(tw("-z-1").style).toEqual({ zIndex: -1 });
   });
 });
+
+describe("typography (0.0.22)", () => {
+  test("truncate and line-clamp", () => {
+    expect(tw("truncate").style).toEqual({ numberOfLines: 1 });
+    expect(tw("line-clamp-3").style).toEqual({ numberOfLines: 3 });
+  });
+
+  test("case transforms and decorations", () => {
+    expect(tw("uppercase").style).toEqual({ textTransform: "uppercase" });
+    expect(tw("capitalize").style).toEqual({ textTransform: "capitalize" });
+    expect(tw("underline").style).toEqual({ textDecoration: "underline" });
+    expect(tw("line-through").style).toEqual({ textDecoration: "line-through" });
+  });
+
+  test("arbitrary leading is px", () => {
+    expect(tw("leading-[18]").style).toEqual({ lineHeight: 18 });
+    expect(tw("leading-5").style).toEqual({ lineHeight: 20 });
+  });
+});
+
+describe("input & media classes (0.0.23)", () => {
+  test("pointer events, border styles, object fit", () => {
+    expect(tw("pointer-events-none").style).toEqual({ pointerEvents: "none" });
+    expect(tw("border-dashed").style).toEqual({ borderStyle: "dashed" });
+    expect(tw("object-cover").style).toEqual({ objectFit: "cover" });
+    expect(tw("cursor-grab").style).toEqual({ cursor: "grab" });
+  });
+});

package/src/tw.ts

@@ -62,6 +62,14 @@ const staticClasses: Record<string, Style> = {
   "font-medium": { fontWeight: 500 },
   "font-semibold": { fontWeight: 600 },
   "font-bold": { fontWeight: 700 },
+  truncate: { numberOfLines: 1 },
+  uppercase: { textTransform: "uppercase" },
+  lowercase: { textTransform: "lowercase" },
+  capitalize: { textTransform: "capitalize" },
+  "normal-case": { textTransform: "none" },
+  underline: { textDecoration: "underline" },
+  "line-through": { textDecoration: "line-through" },
+  "no-underline": { textDecoration: "none" },
   "tracking-tighter": { letterSpacing: -0.8 },
   "tracking-tight": { letterSpacing: -0.4 },
   "tracking-normal": { letterSpacing: 0 },
@@ -74,6 +82,21 @@ const staticClasses: Record<string, Style> = {
   "cursor-pointer": { cursor: "pointer" },
   "cursor-text": { cursor: "text" },
   "cursor-default": { cursor: "default" },
+  "cursor-grab": { cursor: "grab" },
+  "cursor-grabbing": { cursor: "grabbing" },
+  "cursor-move": { cursor: "move" },
+  "cursor-ns-resize": { cursor: "ns-resize" },
+  "cursor-ew-resize": { cursor: "ew-resize" },
+  "cursor-crosshair": { cursor: "crosshair" },
+  "cursor-not-allowed": { cursor: "not-allowed" },
+  "pointer-events-none": { pointerEvents: "none" },
+  "pointer-events-auto": { pointerEvents: "auto" },
+  "border-solid": { borderStyle: "solid" },
+  "border-dashed": { borderStyle: "dashed" },
+  "border-dotted": { borderStyle: "dotted" },
+  "object-contain": { objectFit: "contain" },
+  "object-cover": { objectFit: "cover" },
+  "object-fill": { objectFit: "fill" },
   shadow: { shadowColor: "#00000066", shadowRadius: 4, shadowOffsetY: 1 },
   "shadow-sm": { shadowColor: "#00000066", shadowRadius: 4, shadowOffsetY: 1 },
   "shadow-md": { shadowColor: "#00000066", shadowRadius: 8, shadowOffsetY: 2 },
@@ -295,9 +318,21 @@ function resolveClass(cls: string): Style | undefined {
       return Number.isFinite(n) ? { opacity: n / 100 } : undefined;
     }
     case "leading": {
+      if (rest.startsWith("[")) {
+        const px = parseLength(rest);
+        return typeof px === "number" ? { lineHeight: px } : undefined;
+      }
       const n = Number(rest);
       return Number.isFinite(n) ? { lineHeight: n * 4 } : undefined;
     }
+    case "line": {
+      // line-clamp-N (rest arrives as "clamp-N")
+      if (rest.startsWith("clamp-")) {
+        const n = Number(rest.slice("clamp-".length));
+        return Number.isFinite(n) && n > 0 ? { numberOfLines: n } : undefined;
+      }
+      return undefined;
+    }
     case "tracking": {
       // Named scale lives in staticClasses; arbitrary is px: tracking-[3].
       if (rest.startsWith("[")) {