@vsreact/core 0.0.22 → 0.0.24

package/dist/hostConfig.js

@@ -10,6 +10,8 @@ const hostTypes = {
     "vs-image": "image",
     "vs-textinput": "textinput",
     "vs-native": "native",
+    "vs-svg": "svg",
+    "vs-svgpath": "svgpath",
 };
 const eventPropNames = {
     onClick: "click",

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import "./runtime";
 import "./bridge";
 /** The SDK version — stamp it on support dumps and analytics. */
-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 declare const VERSION = "0.0.24";
+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";
 export { native } from "./native";
 export { useNativeEvent, useNativeValue, useDebounced, useThrottled, usePrevious, useToggle, useInterval, useHover, useLayoutRect, } from "./hooks";

package/dist/index.js

@@ -3,8 +3,8 @@
 import "./runtime";
 import "./bridge";
 /** The SDK version — stamp it on support dumps and analytics. */
-export const VERSION = "0.0.22";
-export { View, Text, Image, TextInput, NativeView } from "./primitives";
+export const VERSION = "0.0.24";
+export { View, Text, Image, TextInput, NativeView, Svg, SvgPath } from "./primitives";
 export { render, unmount } from "./render";
 export { native } from "./native";
 export { useNativeEvent, useNativeValue, useDebounced, useThrottled, usePrevious, useToggle, useInterval, useHover, useLayoutRect, } from "./hooks";

package/dist/primitives.d.ts

@@ -73,6 +73,30 @@ export interface ImageProps extends CommonProps {
     src: string;
 }
 export declare function Image(props: ImageProps): import("react").ReactElement<ImageProps, string | import("react").JSXElementConstructor<any>>;
+export interface SvgProps extends CommonProps {
+    /** "minX minY width height" — path coordinates map from this box onto the
+        node's layout frame (like the web's preserveAspectRatio="none"). */
+    viewBox: string;
+}
+/** Vector container: lays out like a View, paints its <SvgPath> children
+    scaled from viewBox space. Icon sets port directly — rename attributes
+    and drop each path's `d` in. */
+export declare function Svg(props: SvgProps): import("react").ReactElement<SvgProps, string | import("react").JSXElementConstructor<any>>;
+export interface SvgPathProps {
+    /** SVG path data ("M12 2 L22 22 …") — parsed once and cached. */
+    d: string;
+    /** Fill color; SVG's default black. "none" for stroke-only paths. */
+    fill?: string;
+    stroke?: string;
+    /** Stroke width in viewBox units (scales with the frame, like SVG). */
+    strokeWidth?: number;
+    strokeCap?: "butt" | "round" | "square";
+    strokeJoin?: "miter" | "round" | "bevel";
+    /** Dash pattern in viewBox units, e.g. "4 2". */
+    strokeDash?: string;
+    fillRule?: "nonzero" | "evenodd";
+}
+export declare function SvgPath(props: SvgPathProps): import("react").ReactElement<SvgPathProps, string | import("react").JSXElementConstructor<any>>;
 export interface TextInputProps extends Omit<CommonProps, "children" | "onChange" | "onSubmit"> {
     value?: string;
     defaultValue?: string;

package/dist/primitives.js

@@ -8,6 +8,15 @@ export function Text(props) {
 export function Image(props) {
     return createElement("vs-image", props);
 }
+/** Vector container: lays out like a View, paints its <SvgPath> children
+    scaled from viewBox space. Icon sets port directly — rename attributes
+    and drop each path's `d` in. */
+export function Svg(props) {
+    return createElement("vs-svg", props);
+}
+export function SvgPath(props) {
+    return createElement("vs-svgpath", props);
+}
 export function TextInput({ onChange, onSubmit, ...rest }) {
     return createElement("vs-textinput", {
         ...rest,

package/dist/tw.js

@@ -71,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 },

package/package.json

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

package/src/hostConfig.ts

@@ -20,6 +20,8 @@ const hostTypes: Record<string, string> = {
   "vs-image": "image",
   "vs-textinput": "textinput",
   "vs-native": "native",
+  "vs-svg": "svg",
+  "vs-svgpath": "svgpath",
 };
 
 const eventPropNames: Record<string, string> = {

package/src/index.ts

@@ -4,15 +4,17 @@ import "./runtime";
 import "./bridge";
 
 /** The SDK version — stamp it on support dumps and analytics. */
-export const VERSION = "0.0.22";
+export const VERSION = "0.0.24";
 
-export { View, Text, Image, TextInput, NativeView } from "./primitives";
+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";
 export { native } from "./native";

package/src/layout.test.tsx

@@ -125,3 +125,26 @@ describe("useNativeValue", () => {
     expect(seen.at(-1)).toBe(0.8);
   });
 });
+
+describe("Svg primitives (0.0.24)", () => {
+  test("Svg + SvgPath create their node types with data props", async () => {
+    const { Svg, SvgPath } = require("./index");
+    render(
+      <Svg viewBox="0 0 24 24" style={{ width: 24, height: 24 }}>
+        <SvgPath d="M12 2 L22 22 L2 22 Z" fill="#ff0000" />
+        <SvgPath d="M2 12 H22" fill="none" stroke="#00ff00" strokeWidth={2} strokeDash="4 2" />
+      </Svg>,
+    );
+
+    const creates = allOps().filter((op: any) => op[0] === "create");
+    expect(creates.some((op: any) => op[2] === "svg")).toBe(true);
+    expect(creates.filter((op: any) => op[2] === "svgpath")).toHaveLength(2);
+
+    const propOps = allOps().filter((op: any) => op[0] === "setProps");
+    const svgProps: any = propOps.find((op: any) => op[2]?.viewBox);
+    expect(svgProps[2].viewBox).toBe("0 0 24 24");
+
+    const pathProps: any = propOps.find((op: any) => op[2]?.strokeDash);
+    expect(pathProps[2]).toMatchObject({ d: "M2 12 H22", fill: "none", stroke: "#00ff00", strokeWidth: 2 });
+  });
+});

package/src/primitives.tsx

@@ -85,12 +85,46 @@ 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) {
   return createElement("vs-image", props);
 }
 
+export interface SvgProps extends CommonProps {
+  /** "minX minY width height" — path coordinates map from this box onto the
+      node's layout frame (like the web's preserveAspectRatio="none"). */
+  viewBox: string;
+}
+
+/** Vector container: lays out like a View, paints its <SvgPath> children
+    scaled from viewBox space. Icon sets port directly — rename attributes
+    and drop each path's `d` in. */
+export function Svg(props: SvgProps) {
+  return createElement("vs-svg", props);
+}
+
+export interface SvgPathProps {
+  /** SVG path data ("M12 2 L22 22 …") — parsed once and cached. */
+  d: string;
+  /** Fill color; SVG's default black. "none" for stroke-only paths. */
+  fill?: string;
+  stroke?: string;
+  /** Stroke width in viewBox units (scales with the frame, like SVG). */
+  strokeWidth?: number;
+  strokeCap?: "butt" | "round" | "square";
+  strokeJoin?: "miter" | "round" | "bevel";
+  /** Dash pattern in viewBox units, e.g. "4 2". */
+  strokeDash?: string;
+  fillRule?: "nonzero" | "evenodd";
+}
+
+export function SvgPath(props: SvgPathProps) {
+  return createElement("vs-svgpath", props);
+}
+
 export interface TextInputProps extends Omit<CommonProps, "children" | "onChange" | "onSubmit"> {
   value?: string;
   defaultValue?: string;

package/src/tw.test.ts

@@ -253,3 +253,12 @@ describe("typography (0.0.22)", () => {
     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

@@ -82,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 },