@vsreact/core 0.0.3 → 0.0.5

package/src/overlay.tsx

@@ -0,0 +1,70 @@
+// The overlay layer — content that paints above everything else (menus,
+// tooltips, modals). render() mounts <OverlayLayer/> after your app
+// automatically, so painting order puts overlays on top and hit-testing
+// reaches them first. Position entries absolutely using rects from
+// onLayout / useLayoutRect.
+
+import { Fragment, useCallback, useEffect, useRef, useSyncExternalStore, type ReactNode } from "react";
+
+interface OverlayEntry {
+  key: number;
+  node: ReactNode;
+}
+
+let entries: OverlayEntry[] = [];
+const subscribers = new Set<() => void>();
+let nextOverlayKey = 1;
+
+function emit(): void {
+  for (const subscriber of subscribers) subscriber();
+}
+
+function setEntry(key: number, node: ReactNode): void {
+  entries = [...entries.filter((e) => e.key !== key), { key, node }];
+  emit();
+}
+
+function clearEntry(key: number): void {
+  if (!entries.some((e) => e.key === key)) return;
+  entries = entries.filter((e) => e.key !== key);
+  emit();
+}
+
+/** A per-component slot in the overlay layer. show() replaces the slot's
+    content; hide() removes it; unmounting cleans up automatically. */
+export function useOverlay(): {
+  show: (node: ReactNode) => void;
+  hide: () => void;
+} {
+  const key = useRef(0);
+  if (key.current === 0) key.current = nextOverlayKey++;
+
+  useEffect(() => {
+    const k = key.current;
+    return () => clearEntry(k);
+  }, []);
+
+  return {
+    show: useCallback((node: ReactNode) => setEntry(key.current, node), []),
+    hide: useCallback(() => clearEntry(key.current), []),
+  };
+}
+
+/** Mounted automatically by render() as the last sibling of your app. */
+export function OverlayLayer() {
+  const list = useSyncExternalStore(
+    (onStoreChange) => {
+      subscribers.add(onStoreChange);
+      return () => subscribers.delete(onStoreChange);
+    },
+    () => entries,
+  );
+
+  return (
+    <>
+      {list.map((entry) => (
+        <Fragment key={entry.key}>{entry.node}</Fragment>
+      ))}
+    </>
+  );
+}

package/src/parameters.ts

@@ -17,6 +17,36 @@ export interface ParameterHandle extends ParameterState {
   end: () => void;
 }
 
+export interface ParameterInfo {
+  id: string;
+  name: string;
+  label: string;
+  /** Normalized 0..1 snapshot at mount — use useParameter(id) for live values. */
+  value: number;
+  text: string;
+}
+
+/**
+ * Enumerates every APVTS parameter (via param:list) once at mount — the
+ * host's parameter set is fixed for the plugin's lifetime. Powers
+ * <GenericEditor/> and any auto-generated UI.
+ */
+export function useParameterList(): ParameterInfo[] {
+  const [list] = useState<ParameterInfo[]>(() => {
+    const result = native.call("param:list");
+    if (!Array.isArray(result)) return [];
+    return result.map((entry) => ({
+      id: String(entry?.id ?? ""),
+      name: String(entry?.name ?? entry?.id ?? ""),
+      label: String(entry?.label ?? ""),
+      value: Number(entry?.value ?? 0),
+      text: String(entry?.text ?? ""),
+    }));
+  });
+
+  return list;
+}
+
 export function useParameter(id: string): ParameterHandle {
   const [state, setState] = useState<ParameterState>(() => {
     const initial = native.call("param:get", { id });

package/src/primitives.tsx

@@ -10,6 +10,14 @@ export interface DragEventPayload {
   y: number;
 }
 
+/** A node's laid-out rect in root coordinates (scroll-adjusted). */
+export interface LayoutRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
 export interface CommonProps {
   className?: string;
   style?: Style;
@@ -24,6 +32,9 @@ export interface CommonProps {
   onDragStart?: (e: DragEventPayload) => void;
   onDrag?: (e: DragEventPayload) => void;
   onDragEnd?: (e: DragEventPayload) => void;
+  /** Fires after layout whenever this node's root-space rect changes —
+      the foundation for popovers, menus, and tooltips. */
+  onLayout?: (rect: LayoutRect) => void;
 }
 
 export function View(props: CommonProps) {

package/src/render.tsx

@@ -3,12 +3,14 @@ import { LegacyRoot } from "react-reconciler/constants";
 import type { ReactNode } from "react";
 import { hostConfig } from "./hostConfig";
 import { flushOps } from "./bridge";
+import { OverlayLayer } from "./overlay";
 
 const reconciler = Reconciler(hostConfig as any);
 
 let container: ReturnType<typeof reconciler.createContainer> | null = null;
 
-/** Mounts (or re-renders) the app into the plugin window. */
+/** Mounts (or re-renders) the app into the plugin window. The overlay
+    layer (menus, tooltips) mounts after the app so it paints on top. */
 export function render(element: ReactNode): void {
   if (!container) {
     container = reconciler.createContainer(
@@ -23,7 +25,15 @@ export function render(element: ReactNode): void {
     );
   }
 
-  reconciler.updateContainer(element, container, null, null);
+  reconciler.updateContainer(
+    <>
+      {element}
+      <OverlayLayer />
+    </>,
+    container,
+    null,
+    null,
+  );
   flushOps();
 }
 

package/src/tw.test.ts

@@ -137,3 +137,15 @@ describe("tw 0.0.3 additions", () => {
     expect(tw("text-6xl").style.fontSize).toBe(60);
   });
 });
+
+describe("negative spacing", () => {
+  test("negative margins and offsets", () => {
+    expect(tw("-mt-2").style).toEqual({ marginTop: -8 });
+    expect(tw("-mx-[10]").style).toEqual({ marginLeft: -10, marginRight: -10 });
+    expect(tw("-top-4").style).toEqual({ top: -16 });
+  });
+
+  test("negative percentages", () => {
+    expect(tw("-left-1/2").style).toEqual({ left: "-50%" });
+  });
+});

package/src/tw.ts

@@ -169,7 +169,12 @@ function resolveClass(cls: string): Style | undefined {
   const negative = cls.startsWith("-");
   const body = negative ? cls.slice(1) : cls;
 
-  const negate = (v: StyleValue): StyleValue => (negative && typeof v === "number" ? -v : v);
+  const negate = (v: StyleValue): StyleValue => {
+    if (!negative) return v;
+    if (typeof v === "number") return -v;
+    if (typeof v === "string" && v.endsWith("%")) return `-${v}`;
+    return v;
+  };
 
   const known = staticClasses[body];
   if (known && !negative) return known;