@vsreact/core 0.0.4 → 0.0.6

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

@@ -9,6 +9,8 @@ export interface ParameterState {
   text: string;
   name: string;
   label: string;
+  /** The host's normalized default — double-click-reset target. */
+  defaultValue: number;
 }
 
 export interface ParameterHandle extends ParameterState {
@@ -24,6 +26,7 @@ export interface ParameterInfo {
   /** Normalized 0..1 snapshot at mount — use useParameter(id) for live values. */
   value: number;
   text: string;
+  defaultValue: number;
 }
 
 /**
@@ -41,6 +44,7 @@ export function useParameterList(): ParameterInfo[] {
       label: String(entry?.label ?? ""),
       value: Number(entry?.value ?? 0),
       text: String(entry?.text ?? ""),
+      defaultValue: Number(entry?.defaultValue ?? 0),
     }));
   });
 
@@ -56,8 +60,9 @@ export function useParameter(id: string): ParameterHandle {
           text: String(initial.text ?? ""),
           name: String(initial.name ?? id),
           label: String(initial.label ?? ""),
+          defaultValue: Number(initial.defaultValue ?? 0),
         }
-      : { value: 0, text: "", name: id, label: "" };
+      : { value: 0, text: "", name: id, label: "", defaultValue: 0 };
   });
 
   useEffect(

package/src/popover.tsx

@@ -0,0 +1,137 @@
+// Tooltip + Modal — the dialog kit, built on the overlay layer and
+// onLayout. Both paint above everything via useOverlay.
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { View, Text } from "./primitives";
+import { useLayoutRect } from "./hooks";
+import { useOverlay } from "./overlay";
+
+export interface TooltipProps {
+  /** The tip text. */
+  label: string;
+  /** Hover dwell before showing. Default 450ms. */
+  delayMs?: number;
+  /** Gap between the child and the tip. Default 6. */
+  offset?: number;
+  backgroundColor?: string;
+  color?: string;
+  children: ReactNode;
+}
+
+/** Wraps its child; hovering it long enough shows a tip below. */
+export function Tooltip({
+  label,
+  delayMs = 450,
+  offset = 6,
+  backgroundColor = "#20241F",
+  color = "#d4d4d8",
+  children,
+}: TooltipProps) {
+  const [rect, onLayout] = useLayoutRect();
+  const [visible, setVisible] = useState(false);
+  const overlay = useOverlay();
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (!visible || rect === null) {
+      overlay.hide();
+      return;
+    }
+
+    overlay.show(
+      <View
+        className="absolute rounded-md border px-2 py-[4]"
+        style={{
+          left: rect.x,
+          top: rect.y + rect.height + offset,
+          backgroundColor,
+          borderColor: "#00000066",
+        }}
+      >
+        <Text className="text-[11]" style={{ color }}>
+          {label}
+        </Text>
+      </View>,
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible, rect, label, offset, backgroundColor, color]);
+
+  useEffect(
+    () => () => {
+      if (timer.current !== null) clearTimeout(timer.current);
+    },
+    [],
+  );
+
+  return (
+    <View
+      onLayout={onLayout}
+      onMouseEnter={() => {
+        if (timer.current !== null) clearTimeout(timer.current);
+        timer.current = setTimeout(() => setVisible(true), delayMs);
+      }}
+      onMouseLeave={() => {
+        if (timer.current !== null) clearTimeout(timer.current);
+        timer.current = null;
+        setVisible(false);
+      }}
+    >
+      {children}
+    </View>
+  );
+}
+
+export interface ModalProps {
+  open: boolean;
+  /** Backdrop click (and nothing else) calls this. */
+  onClose: () => void;
+  title?: string;
+  width?: number;
+  backgroundColor?: string;
+  backdropColor?: string;
+  children: ReactNode;
+}
+
+/** A centered dialog over a click-away backdrop — confirms, settings,
+    about boxes. Content is yours; the chrome is minimal. */
+export function Modal({
+  open,
+  onClose,
+  title,
+  width = 320,
+  backgroundColor = "#1C201B",
+  backdropColor = "#000000B0",
+  children,
+}: ModalProps) {
+  const overlay = useOverlay();
+
+  useEffect(() => {
+    if (!open) {
+      overlay.hide();
+      return;
+    }
+
+    overlay.show(
+      <View
+        className="absolute inset-0 items-center justify-center"
+        style={{ backgroundColor: backdropColor }}
+        onClick={onClose}
+      >
+        {/* swallow clicks inside the panel so they don't reach the backdrop */}
+        <View
+          className="rounded-xl border p-5 gap-3 shadow-xl"
+          style={{ width, backgroundColor, borderColor: "#00000066" }}
+          onClick={() => {}}
+        >
+          {title !== undefined ? (
+            <Text className="text-[13] font-bold tracking-wide">{title}</Text>
+          ) : null}
+          {children}
+        </View>
+      </View>,
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, title, width, backgroundColor, backdropColor, children]);
+
+  return null;
+}

package/src/primitives.tsx

@@ -10,6 +10,20 @@ 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;
+}
+
+/** Mouse-wheel payload. dy is JUCE's notch fraction (~0.1 per notch,
+    positive = wheel up). */
+export interface WheelEventPayload {
+  dy: number;
+}
+
 export interface CommonProps {
   className?: string;
   style?: Style;
@@ -17,6 +31,9 @@ export interface CommonProps {
   /** Resets the scroll offset of an overflow-y-scroll container. */
   scrollTop?: number;
   onClick?: () => void;
+  onDoubleClick?: () => void;
+  /** Wheel over this node (controls win the wheel over scroll containers). */
+  onWheel?: (e: WheelEventPayload) => void;
   onMouseEnter?: () => void;
   onMouseLeave?: () => void;
   onMouseDown?: () => void;
@@ -24,6 +41,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();
 }