@vsreact/core 0.0.2 → 0.0.4

package/src/meter.tsx

@@ -0,0 +1,159 @@
+// Meter — the level meter every plugin needs: painted bar with a hot zone
+// and a peak-hold line that holds, then falls. Feed it any 0..1 value
+// (typically pushed from C++ via useNativeEvent).
+
+import { useEffect, useRef, useState } from "react";
+import { View, Text } from "./primitives";
+
+const clamp01 = (v: number) => Math.min(1, Math.max(0, v));
+
+export interface PeakHoldOptions {
+  /** How long a peak is held before it starts falling. Default 600ms. */
+  holdMs?: number;
+  /** Fall rate once the hold expires, in value/second. Default 1.5. */
+  decayPerSecond?: number;
+}
+
+export interface PeakHoldState {
+  peak: number;
+  heldForMs: number;
+}
+
+/** One peak-hold step (pure, testable): new peaks latch instantly and
+    reset the hold timer; after holdMs the peak decays toward the value. */
+export function peakHoldStep(
+  state: PeakHoldState,
+  value: number,
+  dtMs: number,
+  { holdMs = 600, decayPerSecond = 1.5 }: PeakHoldOptions = {},
+): PeakHoldState {
+  if (value >= state.peak) return { peak: value, heldForMs: 0 };
+
+  const heldForMs = state.heldForMs + dtMs;
+  if (heldForMs < holdMs) return { peak: state.peak, heldForMs };
+
+  return { peak: Math.max(value, state.peak - decayPerSecond * (dtMs / 1000)), heldForMs };
+}
+
+const FRAME_MS = 33; // meters read fine at ~30fps
+
+/** The held peak for a live value — drives the Meter's peak line. */
+export function usePeakHold(value: number, options: PeakHoldOptions = {}): number {
+  const [peak, setPeak] = useState(value);
+  const state = useRef<PeakHoldState>({ peak: value, heldForMs: 0 });
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      state.current = peakHoldStep(state.current, valueRef.current, FRAME_MS, optionsRef.current);
+      setPeak(state.current.peak);
+    }, FRAME_MS);
+
+    return () => clearInterval(id);
+  }, []);
+
+  return Math.max(peak, value);
+}
+
+export interface MeterProps {
+  /** Level 0..1. */
+  value: number;
+  /** Long-axis length. Default 120. */
+  length?: number;
+  /** Short-axis thickness. Default 10. */
+  thickness?: number;
+  /** Horizontal bar instead of the vertical default. */
+  horizontal?: boolean;
+  /** Show the peak-hold line. Default true. */
+  peak?: boolean;
+  holdMs?: number;
+  decayPerSecond?: number;
+  /** Where the fill turns hot, 0..1. Default 0.85. */
+  hotFrom?: number;
+  trackColor?: string;
+  color?: string;
+  hotColor?: string;
+  label?: string;
+}
+
+/** A natively painted level meter with hot zone + peak hold. */
+export function Meter({
+  value,
+  length = 120,
+  thickness = 10,
+  horizontal,
+  peak = true,
+  holdMs,
+  decayPerSecond,
+  hotFrom = 0.85,
+  trackColor = "#141714",
+  color = "#C6F135",
+  hotColor = "#FF4545",
+  label,
+}: MeterProps) {
+  const level = clamp01(value);
+  const held = usePeakHold(level, { holdMs, decayPerSecond });
+  const hot = clamp01(hotFrom);
+
+  const fill = Math.min(level, hot) * length;
+  const hotFill = level > hot ? (level - hot) * length : 0;
+  const peakAt = clamp01(held) * length;
+
+  const bar = horizontal ? (
+    <View
+      className="relative rounded overflow-hidden"
+      style={{ width: length, height: thickness, backgroundColor: trackColor }}
+    >
+      <View
+        className="absolute left-0 top-0 bottom-0"
+        style={{ width: fill, backgroundColor: color }}
+      />
+      {hotFill > 0 ? (
+        <View
+          className="absolute top-0 bottom-0"
+          style={{ left: hot * length, width: hotFill, backgroundColor: hotColor }}
+        />
+      ) : null}
+      {peak && peakAt > 2 ? (
+        <View
+          className="absolute top-0 bottom-0 w-[2]"
+          style={{ left: peakAt - 2, backgroundColor: held >= hot ? hotColor : color }}
+        />
+      ) : null}
+    </View>
+  ) : (
+    <View
+      className="relative rounded overflow-hidden"
+      style={{ width: thickness, height: length, backgroundColor: trackColor }}
+    >
+      <View
+        className="absolute bottom-0 left-0 right-0"
+        style={{ height: fill, backgroundColor: color }}
+      />
+      {hotFill > 0 ? (
+        <View
+          className="absolute left-0 right-0"
+          style={{ bottom: hot * length, height: hotFill, backgroundColor: hotColor }}
+        />
+      ) : null}
+      {peak && peakAt > 2 ? (
+        <View
+          className="absolute left-0 right-0 h-[2]"
+          style={{ bottom: peakAt - 2, backgroundColor: held >= hot ? hotColor : color }}
+        />
+      ) : null}
+    </View>
+  );
+
+  if (label === undefined) return bar;
+
+  return (
+    <View className="items-center gap-2">
+      {bar}
+      <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
+    </View>
+  );
+}

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/theme.ts

@@ -1,7 +1,82 @@
 export type ThemeColors = Record<string, string>;
 
-// Tailwind v3 palettes (the curated subset VSReacT ships with).
+// The full Tailwind v3 color palette.
 const palettes: Record<string, Record<string, string>> = {
+  slate: {
+    "50": "#f8fafc", "100": "#f1f5f9", "200": "#e2e8f0", "300": "#cbd5e1",
+    "400": "#94a3b8", "500": "#64748b", "600": "#475569", "700": "#334155",
+    "800": "#1e293b", "900": "#0f172a", "950": "#020617",
+  },
+  gray: {
+    "50": "#f9fafb", "100": "#f3f4f6", "200": "#e5e7eb", "300": "#d1d5db",
+    "400": "#9ca3af", "500": "#6b7280", "600": "#4b5563", "700": "#374151",
+    "800": "#1f2937", "900": "#111827", "950": "#030712",
+  },
+  stone: {
+    "50": "#fafaf9", "100": "#f5f5f4", "200": "#e7e5e4", "300": "#d6d3d1",
+    "400": "#a8a29e", "500": "#78716c", "600": "#57534e", "700": "#44403c",
+    "800": "#292524", "900": "#1c1917", "950": "#0c0a09",
+  },
+  orange: {
+    "50": "#fff7ed", "100": "#ffedd5", "200": "#fed7aa", "300": "#fdba74",
+    "400": "#fb923c", "500": "#f97316", "600": "#ea580c", "700": "#c2410c",
+    "800": "#9a3412", "900": "#7c2d12", "950": "#431407",
+  },
+  yellow: {
+    "50": "#fefce8", "100": "#fef9c3", "200": "#fef08a", "300": "#fde047",
+    "400": "#facc15", "500": "#eab308", "600": "#ca8a04", "700": "#a16207",
+    "800": "#854d0e", "900": "#713f12", "950": "#422006",
+  },
+  green: {
+    "50": "#f0fdf4", "100": "#dcfce7", "200": "#bbf7d0", "300": "#86efac",
+    "400": "#4ade80", "500": "#22c55e", "600": "#16a34a", "700": "#15803d",
+    "800": "#166534", "900": "#14532d", "950": "#052e16",
+  },
+  teal: {
+    "50": "#f0fdfa", "100": "#ccfbf1", "200": "#99f6e4", "300": "#5eead4",
+    "400": "#2dd4bf", "500": "#14b8a6", "600": "#0d9488", "700": "#0f766e",
+    "800": "#115e59", "900": "#134e4a", "950": "#042f2e",
+  },
+  cyan: {
+    "50": "#ecfeff", "100": "#cffafe", "200": "#a5f3fc", "300": "#67e8f9",
+    "400": "#22d3ee", "500": "#06b6d4", "600": "#0891b2", "700": "#0e7490",
+    "800": "#155e75", "900": "#164e63", "950": "#083344",
+  },
+  blue: {
+    "50": "#eff6ff", "100": "#dbeafe", "200": "#bfdbfe", "300": "#93c5fd",
+    "400": "#60a5fa", "500": "#3b82f6", "600": "#2563eb", "700": "#1d4ed8",
+    "800": "#1e40af", "900": "#1e3a8a", "950": "#172554",
+  },
+  indigo: {
+    "50": "#eef2ff", "100": "#e0e7ff", "200": "#c7d2fe", "300": "#a5b4fc",
+    "400": "#818cf8", "500": "#6366f1", "600": "#4f46e5", "700": "#4338ca",
+    "800": "#3730a3", "900": "#312e81", "950": "#1e1b4b",
+  },
+  violet: {
+    "50": "#f5f3ff", "100": "#ede9fe", "200": "#ddd6fe", "300": "#c4b5fd",
+    "400": "#a78bfa", "500": "#8b5cf6", "600": "#7c3aed", "700": "#6d28d9",
+    "800": "#5b21b6", "900": "#4c1d95", "950": "#2e1065",
+  },
+  purple: {
+    "50": "#faf5ff", "100": "#f3e8ff", "200": "#e9d5ff", "300": "#d8b4fe",
+    "400": "#c084fc", "500": "#a855f7", "600": "#9333ea", "700": "#7e22ce",
+    "800": "#6b21a8", "900": "#581c87", "950": "#3b0764",
+  },
+  fuchsia: {
+    "50": "#fdf4ff", "100": "#fae8ff", "200": "#f5d0fe", "300": "#f0abfc",
+    "400": "#e879f9", "500": "#d946ef", "600": "#c026d3", "700": "#a21caf",
+    "800": "#86198f", "900": "#701a75", "950": "#4a044e",
+  },
+  pink: {
+    "50": "#fdf2f8", "100": "#fce7f3", "200": "#fbcfe8", "300": "#f9a8d4",
+    "400": "#f472b6", "500": "#ec4899", "600": "#db2777", "700": "#be185d",
+    "800": "#9d174d", "900": "#831843", "950": "#500724",
+  },
+  rose: {
+    "50": "#fff1f2", "100": "#ffe4e6", "200": "#fecdd3", "300": "#fda4af",
+    "400": "#fb7185", "500": "#f43f5e", "600": "#e11d48", "700": "#be123c",
+    "800": "#9f1239", "900": "#881337", "950": "#4c0519",
+  },
   zinc: {
     "50": "#fafafa", "100": "#f4f4f5", "200": "#e4e4e7", "300": "#d4d4d8",
     "400": "#a1a1aa", "500": "#71717a", "600": "#52525b", "700": "#3f3f46",

package/src/tw.test.ts

@@ -111,3 +111,41 @@ describe("tw resolver", () => {
     expect(r.style.backgroundColor).toBe("#27272a");
   });
 });
+
+describe("tw 0.0.3 additions", () => {
+  test("full Tailwind palette resolves", () => {
+    expect(tw("bg-blue-500").style.backgroundColor).toBe("#3b82f6");
+    expect(tw("text-rose-400").style.color).toBe("#fb7185");
+    expect(tw("border-slate-700").style.borderColor).toBe("#334155");
+    expect(tw("bg-violet-950").style.backgroundColor).toBe("#2e1065");
+    expect(tw("bg-teal-500/50").style.backgroundColor).toBe("#14b8a680");
+  });
+
+  test("size-* sets width and height together", () => {
+    expect(tw("size-10").style).toEqual({ width: 40, height: 40 });
+    expect(tw("size-[13]").style).toEqual({ width: 13, height: 13 });
+    expect(tw("size-full").style).toEqual({ width: "100%", height: "100%" });
+  });
+
+  test("inset-x / inset-y", () => {
+    expect(tw("inset-x-2").style).toEqual({ left: 8, right: 8 });
+    expect(tw("inset-y-0").style).toEqual({ top: 0, bottom: 0 });
+  });
+
+  test("larger text sizes", () => {
+    expect(tw("text-5xl").style.fontSize).toBe(48);
+    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

@@ -83,6 +83,7 @@ const staticClasses: Record<string, Style> = {
 
 const textSizes: Record<string, number> = {
   xs: 12, sm: 14, base: 16, lg: 18, xl: 20, "2xl": 24, "3xl": 30, "4xl": 36,
+  "5xl": 48, "6xl": 60,
 };
 
 const radiusSizes: Record<string, number> = {
@@ -105,6 +106,7 @@ const radiusCorners: Record<string, string[]> = {
 const lengthKeys: Record<string, string[]> = {
   w: ["width"],
   h: ["height"],
+  size: ["width", "height"],
   "min-w": ["minWidth"],
   "min-h": ["minHeight"],
   "max-w": ["maxWidth"],
@@ -131,6 +133,8 @@ const lengthKeys: Record<string, string[]> = {
   bottom: ["bottom"],
   left: ["left"],
   inset: ["left", "right", "top", "bottom"],
+  "inset-x": ["left", "right"],
+  "inset-y": ["top", "bottom"],
   basis: ["flexBasis"],
 };
 
@@ -165,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;