@vsreact/core 0.0.5 → 0.0.7

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

@@ -18,6 +18,12 @@ export interface LayoutRect {
   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;
@@ -25,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;

package/src/visualizers.tsx

@@ -0,0 +1,148 @@
+// Audio visualizers — bar-based displays fed by arrays of values
+// (typically pushed from C++ via useNativeEvent). For audio-rate scopes,
+// host a juce::Component with <NativeView>; these cover the JS-rate
+// cases: spectrum bars, envelope history, waveform overviews.
+
+import { useEffect, useState } from "react";
+import { View, Text } from "./primitives";
+
+const clamp01 = (v: number) => Math.min(1, Math.max(0, v));
+
+/** Pure rolling-window step (exported for tests): drop the oldest, push
+    the newest, pad with zeros to `length`. */
+export function pushRolling(previous: number[], value: number, length: number): number[] {
+  const next = previous.slice(Math.max(0, previous.length - length + 1));
+  next.push(value);
+  while (next.length < length) next.unshift(0);
+  return next;
+}
+
+/** A rolling window of the last `length` values — turns a live scalar
+    (meter level, envelope) into data for <Waveform>/<Bars> history. */
+export function useRollingBuffer(value: number, length = 64): number[] {
+  const [buffer, setBuffer] = useState<number[]>(() => Array(length).fill(0));
+
+  useEffect(() => {
+    setBuffer((previous) => pushRolling(previous, value, length));
+  }, [value, length]);
+
+  return buffer;
+}
+
+export interface BarsProps {
+  /** One bar per entry, 0..1. */
+  values: number[];
+  width?: number;
+  height?: number;
+  /** Gap between bars. Default 2. */
+  gap?: number;
+  /** Bars at or above this turn hot. Default 0.85; 1 disables. */
+  hotFrom?: number;
+  trackColor?: string;
+  color?: string;
+  hotColor?: string;
+  label?: string;
+}
+
+/** Bottom-anchored bars — spectrum analyzers, band meters. */
+export function Bars({
+  values,
+  width = 160,
+  height = 60,
+  gap = 2,
+  hotFrom = 0.85,
+  trackColor = "#141714",
+  color = "#C6F135",
+  hotColor = "#FF4545",
+  label,
+}: BarsProps) {
+  const bars = (
+    <View
+      className="flex-row items-end rounded overflow-hidden px-[2]"
+      style={{ width, height, backgroundColor: trackColor, columnGap: gap }}
+    >
+      {values.map((value, index) => {
+        const level = clamp01(value);
+        return (
+          <View
+            key={index}
+            className="flex-1 rounded-[1]"
+            style={{
+              height: Math.max(1, level * (height - 4)),
+              backgroundColor: level >= hotFrom ? hotColor : color,
+            }}
+          />
+        );
+      })}
+    </View>
+  );
+
+  if (label === undefined) return bars;
+
+  return (
+    <View className="items-center gap-2">
+      {bars}
+      <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
+    </View>
+  );
+}
+
+export interface WaveformProps {
+  /** One bar per entry, −1..1 (or 0..1 — bars mirror around the centre). */
+  values: number[];
+  width?: number;
+  height?: number;
+  gap?: number;
+  trackColor?: string;
+  color?: string;
+  /** Draw the centre line. Default true. */
+  centerLine?: boolean;
+  centerLineColor?: string;
+  label?: string;
+}
+
+/** Centre-mirrored bars — waveform overviews, envelope history. */
+export function Waveform({
+  values,
+  width = 160,
+  height = 60,
+  gap = 2,
+  trackColor = "#141714",
+  color = "#C6F135",
+  centerLine = true,
+  centerLineColor = "#FFFFFF22",
+  label,
+}: WaveformProps) {
+  const wave = (
+    <View
+      className="relative flex-row items-center rounded overflow-hidden px-[2]"
+      style={{ width, height, backgroundColor: trackColor, columnGap: gap }}
+    >
+      {centerLine ? (
+        <View
+          className="absolute left-0 right-0 h-[1]"
+          style={{ top: height / 2, backgroundColor: centerLineColor }}
+        />
+      ) : null}
+      {values.map((value, index) => (
+        <View
+          key={index}
+          className="flex-1 rounded-[1]"
+          style={{
+            height: Math.max(1, Math.min(1, Math.abs(value)) * (height - 4)),
+            backgroundColor: color,
+          }}
+        />
+      ))}
+    </View>
+  );
+
+  if (label === undefined) return wave;
+
+  return (
+    <View className="items-center gap-2">
+      {wave}
+      <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
+    </View>
+  );
+}