@vsreact/core 0.0.20 → 0.0.22

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.20";
+export declare const VERSION = "0.0.22";
 export { View, Text, Image, TextInput, NativeView } from "./primitives";
 export type { CommonProps, TextProps, ImageProps, TextInputProps, NativeViewProps, } from "./primitives";
 export { render, unmount } from "./render";
@@ -22,7 +22,7 @@ export { useTween, useSpring, springStep, lerp, Easing } from "./animation";
 export type { TweenOptions, SpringOptions, EasingFn } from "./animation";
 export { useParameter, useParameterList } from "./parameters";
 export type { ParameterState, ParameterHandle, ParameterInfo } from "./parameters";
-export { Knob, Slider, Toggle, XYPad, Segmented, Select, GenericEditor, ParamKnob, ParamSlider, ParamToggle, ParamXYPad, ParamSegmented, ParamSelect, dragToValue, } from "./controls";
+export { Knob, Slider, Toggle, XYPad, Segmented, Select, GenericEditor, ParamKnob, ParamSlider, ParamToggle, ParamXYPad, ParamSegmented, ParamSelect, dragToValue, sliderKeyTarget, } from "./controls";
 export type { KnobProps, SliderProps, ToggleProps, XYPadProps, SegmentedProps, SelectProps, GenericEditorProps, ParamKnobProps, ParamSliderProps, ParamToggleProps, ParamXYPadProps, ParamSegmentedProps, ParamSelectProps, } from "./controls";
 export { Meter, RingMeter, usePeakHold, peakHoldStep } from "./meter";
 export type { MeterProps, RingMeterProps, PeakHoldOptions, PeakHoldState } from "./meter";
@@ -43,4 +43,4 @@ export type { ADSRKey, ADSREnvelopeProps, ParamADSREnvelopeProps, PitchBendProps
 export { mapRange, formatDb, formatHz, formatMs, formatPercent, formatSemitones, midiNoteName, midiNoteToHz, hzToMidiNote, } from "./format";
 export { MacroPad, ParamMacroPad, HardwareKnob, ParamHardwareKnob, Crossfader, ParamCrossfader, PulseOrb, } from "./specialty";
 export type { MacroPadProps, ParamMacroPadProps, HardwareKnobProps, ParamHardwareKnobProps, CrossfaderProps, ParamCrossfaderProps, PulseOrbProps, } from "./specialty";
-export type { DragEventPayload, LayoutRect, WheelEventPayload } from "./primitives";
+export type { DragEventPayload, LayoutRect, WheelEventPayload, KeyEventPayload, MouseMovePayload } from "./primitives";

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.20";
+export const VERSION = "0.0.22";
 export { View, Text, Image, TextInput, NativeView } from "./primitives";
 export { render, unmount } from "./render";
 export { native } from "./native";
@@ -16,7 +16,7 @@ export { configureTheme, tw } from "./tw";
 export { cx } from "./cx";
 export { useTween, useSpring, springStep, lerp, Easing } from "./animation";
 export { useParameter, useParameterList } from "./parameters";
-export { Knob, Slider, Toggle, XYPad, Segmented, Select, GenericEditor, ParamKnob, ParamSlider, ParamToggle, ParamXYPad, ParamSegmented, ParamSelect, dragToValue, } from "./controls";
+export { Knob, Slider, Toggle, XYPad, Segmented, Select, GenericEditor, ParamKnob, ParamSlider, ParamToggle, ParamXYPad, ParamSegmented, ParamSelect, dragToValue, sliderKeyTarget, } from "./controls";
 export { Meter, RingMeter, usePeakHold, peakHoldStep } from "./meter";
 export { EQCurve, biquadMagnitudeDb, eqResponseDb, eqXToHz, eqHzToX } from "./eq";
 export { NumberBox, Checkbox, RadioGroup, ParamNumberBox, ParamCheckbox, ParamRadioGroup, snapToStep, } from "./fields";

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 },
@@ -287,9 +295,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.20",
+  "version": "0.0.22",
   "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.20";
+export const VERSION = "0.0.22";
 
 export { View, Text, Image, TextInput, NativeView } from "./primitives";
 export type {
@@ -57,6 +57,7 @@ export {
   ParamSegmented,
   ParamSelect,
   dragToValue,
+  sliderKeyTarget,
 } from "./controls";
 export type {
   KnobProps,
@@ -149,4 +150,4 @@ export type {
   ParamCrossfaderProps,
   PulseOrbProps,
 } from "./specialty";
-export type { DragEventPayload, LayoutRect, WheelEventPayload } from "./primitives";
+export type { DragEventPayload, LayoutRect, WheelEventPayload, KeyEventPayload, MouseMovePayload } from "./primitives";

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 —

package/src/tw.test.ts

@@ -234,3 +234,22 @@ 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 });
+  });
+});

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 },
@@ -295,9 +303,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("[")) {