@vsreact/core 0.0.23 → 0.0.25

package/dist/hooks.d.ts

@@ -22,6 +22,16 @@ export declare function useNativeEvent(name: string, handler: (payload: any) =>
  *   <Meter value={meter.level} />
  */
 export declare function useNativeValue<T = any>(name: string, initial: T): T;
+export interface RootSize {
+    width: number;
+    height: number;
+}
+/**
+ * The editor's current size. The native side sends a "resize" event at
+ * mount (so this resolves on the first committed frame) and on every
+ * host resize — the foundation for resizable editors.
+ */
+export declare function useRootSize(): RootSize;
 /**
  * The value, but only after it has stopped changing for `delayMs` —
  * classic input debouncing for expensive native calls:

package/dist/hooks.js

@@ -35,6 +35,21 @@ export function useNativeValue(name, initial) {
     useNativeEvent(name, setValue);
     return value;
 }
+/**
+ * The editor's current size. The native side sends a "resize" event at
+ * mount (so this resolves on the first committed frame) and on every
+ * host resize — the foundation for resizable editors.
+ */
+export function useRootSize() {
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    useNativeEvent("resize", (payload) => {
+        const width = Number(payload?.width);
+        const height = Number(payload?.height);
+        if (Number.isFinite(width) && Number.isFinite(height))
+            setSize((s) => (s.width === width && s.height === height ? s : { width, height }));
+    });
+    return size;
+}
 /**
  * The value, but only after it has stopped changing for `delayMs` —
  * classic input debouncing for expensive native calls:

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,12 +1,13 @@
 import "./runtime";
 import "./bridge";
 /** The SDK version — stamp it on support dumps and analytics. */
-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 declare const VERSION = "0.0.25";
+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";
+export { useNativeEvent, useNativeValue, useRootSize, useDebounced, useThrottled, usePrevious, useToggle, useInterval, useHover, useLayoutRect, } from "./hooks";
+export type { RootSize } from "./hooks";
 export { useOverlay, OverlayLayer } from "./overlay";
 export { Tooltip, Modal } from "./popover";
 export type { TooltipProps, ModalProps } from "./popover";

package/dist/index.js

@@ -3,11 +3,11 @@
 import "./runtime";
 import "./bridge";
 /** The SDK version — stamp it on support dumps and analytics. */
-export const VERSION = "0.0.23";
-export { View, Text, Image, TextInput, NativeView } from "./primitives";
+export const VERSION = "0.0.25";
+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";
+export { useNativeEvent, useNativeValue, useRootSize, useDebounced, useThrottled, usePrevious, useToggle, useInterval, useHover, useLayoutRect, } from "./hooks";
 export { useOverlay, OverlayLayer } from "./overlay";
 export { Tooltip, Modal } from "./popover";
 export { Button } from "./button";

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

@@ -80,6 +80,18 @@ const staticClasses = {
     "cursor-not-allowed": { cursor: "not-allowed" },
     "pointer-events-none": { pointerEvents: "none" },
     "pointer-events-auto": { pointerEvents: "auto" },
+    hidden: { display: "none" },
+    invisible: { visibility: "hidden" },
+    visible: { visibility: "visible" },
+    "origin-center": { transformOriginX: 50, transformOriginY: 50 },
+    "origin-top": { transformOriginX: 50, transformOriginY: 0 },
+    "origin-bottom": { transformOriginX: 50, transformOriginY: 100 },
+    "origin-left": { transformOriginX: 0, transformOriginY: 50 },
+    "origin-right": { transformOriginX: 100, transformOriginY: 50 },
+    "origin-top-left": { transformOriginX: 0, transformOriginY: 0 },
+    "origin-top-right": { transformOriginX: 100, transformOriginY: 0 },
+    "origin-bottom-left": { transformOriginX: 0, transformOriginY: 100 },
+    "origin-bottom-right": { transformOriginX: 100, transformOriginY: 100 },
     "border-solid": { borderStyle: "solid" },
     "border-dashed": { borderStyle: "dashed" },
     "border-dotted": { borderStyle: "dotted" },

package/package.json

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

package/src/hooks.ts

@@ -42,6 +42,30 @@ export function useNativeValue<T = any>(name: string, initial: T): T {
   return value;
 }
 
+export interface RootSize {
+  width: number;
+  height: number;
+}
+
+/**
+ * The editor's current size. The native side sends a "resize" event at
+ * mount (so this resolves on the first committed frame) and on every
+ * host resize — the foundation for resizable editors.
+ */
+export function useRootSize(): RootSize {
+  const [size, setSize] = useState<RootSize>({ width: 0, height: 0 });
+
+  useNativeEvent("resize", (payload) => {
+    const width = Number(payload?.width);
+    const height = Number(payload?.height);
+
+    if (Number.isFinite(width) && Number.isFinite(height))
+      setSize((s) => (s.width === width && s.height === height ? s : { width, height }));
+  });
+
+  return size;
+}
+
 /**
  * The value, but only after it has stopped changing for `delayMs` —
  * classic input debouncing for expensive native calls:

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,21 +4,24 @@ import "./runtime";
 import "./bridge";
 
 /** The SDK version — stamp it on support dumps and analytics. */
-export const VERSION = "0.0.23";
+export const VERSION = "0.0.25";
 
-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";
 export {
   useNativeEvent,
   useNativeValue,
+  useRootSize,
   useDebounced,
   useThrottled,
   usePrevious,
@@ -27,6 +30,7 @@ export {
   useHover,
   useLayoutRect,
 } from "./hooks";
+export type { RootSize } from "./hooks";
 export { useOverlay, OverlayLayer } from "./overlay";
 export { Tooltip, Modal } from "./popover";
 export type { TooltipProps, ModalProps } from "./popover";

package/src/layout.test.tsx

@@ -125,3 +125,45 @@ 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 });
+  });
+});
+
+describe("useRootSize (0.0.25)", () => {
+  test("tracks resize events, ignores junk", async () => {
+    const { useRootSize } = require("./index");
+    let seen: any = null;
+    function Probe() {
+      seen = useRootSize();
+      return <View />;
+    }
+    render(<Probe />);
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(seen).toEqual({ width: 0, height: 0 });
+    dispatch({ kind: "native", name: "resize", payload: { width: 793, height: 496 } });
+    expect(seen).toEqual({ width: 793, height: 496 });
+    dispatch({ kind: "native", name: "resize", payload: { width: "nope" } });
+    expect(seen).toEqual({ width: 793, height: 496 });
+  });
+});

package/src/primitives.tsx

@@ -93,6 +93,38 @@ 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

@@ -262,3 +262,17 @@ describe("input & media classes (0.0.23)", () => {
     expect(tw("cursor-grab").style).toEqual({ cursor: "grab" });
   });
 });
+
+describe("layout & robustness classes (0.0.25)", () => {
+  test("hidden vs invisible", () => {
+    expect(tw("hidden").style).toEqual({ display: "none" });
+    expect(tw("invisible").style).toEqual({ visibility: "hidden" });
+    expect(tw("visible").style).toEqual({ visibility: "visible" });
+  });
+
+  test("percent translate and transform origin", () => {
+    expect(tw("translate-x-1/2").style).toEqual({ translateX: "50%" });
+    expect(tw("-translate-y-1/2").style).toEqual({ translateY: "-50%" });
+    expect(tw("origin-top-left").style).toEqual({ transformOriginX: 0, transformOriginY: 0 });
+  });
+});

package/src/tw.ts

@@ -91,6 +91,18 @@ const staticClasses: Record<string, Style> = {
   "cursor-not-allowed": { cursor: "not-allowed" },
   "pointer-events-none": { pointerEvents: "none" },
   "pointer-events-auto": { pointerEvents: "auto" },
+  hidden: { display: "none" },
+  invisible: { visibility: "hidden" },
+  visible: { visibility: "visible" },
+  "origin-center": { transformOriginX: 50, transformOriginY: 50 },
+  "origin-top": { transformOriginX: 50, transformOriginY: 0 },
+  "origin-bottom": { transformOriginX: 50, transformOriginY: 100 },
+  "origin-left": { transformOriginX: 0, transformOriginY: 50 },
+  "origin-right": { transformOriginX: 100, transformOriginY: 50 },
+  "origin-top-left": { transformOriginX: 0, transformOriginY: 0 },
+  "origin-top-right": { transformOriginX: 100, transformOriginY: 0 },
+  "origin-bottom-left": { transformOriginX: 0, transformOriginY: 100 },
+  "origin-bottom-right": { transformOriginX: 100, transformOriginY: 100 },
   "border-solid": { borderStyle: "solid" },
   "border-dashed": { borderStyle: "dashed" },
   "border-dotted": { borderStyle: "dotted" },