@vsreact/core 0.0.24 → 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/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.24";
+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.24";
+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/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.24",
+  "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/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.24";
+export const VERSION = "0.0.25";
 
 export { View, Text, Image, TextInput, NativeView, Svg, SvgPath } from "./primitives";
 export type {
@@ -21,6 +21,7 @@ export { native } from "./native";
 export {
   useNativeEvent,
   useNativeValue,
+  useRootSize,
   useDebounced,
   useThrottled,
   usePrevious,
@@ -29,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

@@ -148,3 +148,22 @@ describe("Svg primitives (0.0.24)", () => {
     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/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" },