@vsreact/core 0.0.13 → 0.0.14

package/dist/components.d.ts

@@ -16,6 +16,8 @@ export { PianoKeyboard } from "./keyboard";
 export type { PianoKeyboardProps } from "./keyboard";
 export { StepSequencer } from "./sequencer";
 export type { StepSequencerProps } from "./sequencer";
+export { Tabs, Disclosure } from "./layout";
+export type { TabsProps, DisclosureProps } from "./layout";
 export { ADSREnvelope, ParamADSREnvelope, PitchBend, ModWheel, ParamModWheel, ParamPitchBend, } from "./synth";
 export type { ADSRKey, ADSREnvelopeProps, ParamADSREnvelopeProps, PitchBendProps, ModWheelProps, ParamModWheelProps, ParamPitchBendProps, } from "./synth";
 export { MacroPad, ParamMacroPad, HardwareKnob, ParamHardwareKnob, Crossfader, ParamCrossfader, PulseOrb, } from "./specialty";

package/dist/components.js

@@ -14,5 +14,6 @@ export { NumberBox, Checkbox, RadioGroup, ParamNumberBox, ParamCheckbox, ParamRa
 export { ProgressBar, Spinner } from "./feedback";
 export { PianoKeyboard } from "./keyboard";
 export { StepSequencer } from "./sequencer";
+export { Tabs, Disclosure } from "./layout";
 export { ADSREnvelope, ParamADSREnvelope, PitchBend, ModWheel, ParamModWheel, ParamPitchBend, } from "./synth";
 export { MacroPad, ParamMacroPad, HardwareKnob, ParamHardwareKnob, Crossfader, ParamCrossfader, PulseOrb, } from "./specialty";

package/dist/hooks.d.ts

@@ -14,6 +14,14 @@ export declare function useLayoutRect(): [LayoutRect | null, (rect: LayoutRect)
  *   useNativeEvent("download:progress", (p) => setProgress(p.ratio));
  */
 export declare function useNativeEvent(name: string, handler: (payload: any) => void): void;
+/**
+ * The latest payload of a C++ event, held as state — the one-liner for
+ * native → UI data feeds:
+ *
+ *   const meter = useNativeValue("meter", { level: 0 });
+ *   <Meter value={meter.level} />
+ */
+export declare function useNativeValue<T = any>(name: string, initial: T): T;
 /**
  * The value, but only after it has stopped changing for `delayMs` —
  * classic input debouncing for expensive native calls:

package/dist/hooks.js

@@ -23,6 +23,18 @@ export function useNativeEvent(name, handler) {
     handlerRef.current = handler;
     useEffect(() => native.on(name, (payload) => handlerRef.current(payload)), [name]);
 }
+/**
+ * The latest payload of a C++ event, held as state — the one-liner for
+ * native → UI data feeds:
+ *
+ *   const meter = useNativeValue("meter", { level: 0 });
+ *   <Meter value={meter.level} />
+ */
+export function useNativeValue(name, initial) {
+    const [value, setValue] = useState(initial);
+    useNativeEvent(name, setValue);
+    return value;
+}
 /**
  * The value, but only after it has stopped changing for `delayMs` —
  * classic input debouncing for expensive native calls:

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { View, Text, Image, TextInput, NativeView } from "./primitives";
 export type { CommonProps, TextProps, ImageProps, TextInputProps, NativeViewProps, } from "./primitives";
 export { render, unmount } from "./render";
 export { native } from "./native";
-export { useNativeEvent, useDebounced, useThrottled, usePrevious, useToggle, useInterval, useHover, useLayoutRect, } from "./hooks";
+export { useNativeEvent, useNativeValue, useDebounced, useThrottled, usePrevious, useToggle, useInterval, useHover, useLayoutRect, } from "./hooks";
 export { useOverlay, OverlayLayer } from "./overlay";
 export { Tooltip, Modal } from "./popover";
 export type { TooltipProps, ModalProps } from "./popover";
@@ -32,6 +32,8 @@ export { PianoKeyboard } from "./keyboard";
 export type { PianoKeyboardProps } from "./keyboard";
 export { StepSequencer } from "./sequencer";
 export type { StepSequencerProps } from "./sequencer";
+export { Tabs, Disclosure } from "./layout";
+export type { TabsProps, DisclosureProps } from "./layout";
 export { ADSREnvelope, ParamADSREnvelope, PitchBend, ModWheel, ParamModWheel, ParamPitchBend, adsrLevelAt, } from "./synth";
 export type { ADSRKey, ADSREnvelopeProps, ParamADSREnvelopeProps, PitchBendProps, ModWheelProps, ParamModWheelProps, ParamPitchBendProps, } from "./synth";
 export { mapRange, formatDb, formatHz, formatMs, formatPercent, formatSemitones, midiNoteName, midiNoteToHz, hzToMidiNote, } from "./format";

package/dist/index.js

@@ -5,7 +5,7 @@ import "./bridge";
 export { View, Text, Image, TextInput, NativeView } from "./primitives";
 export { render, unmount } from "./render";
 export { native } from "./native";
-export { useNativeEvent, useDebounced, useThrottled, usePrevious, useToggle, useInterval, useHover, useLayoutRect, } from "./hooks";
+export { useNativeEvent, useNativeValue, useDebounced, useThrottled, usePrevious, useToggle, useInterval, useHover, useLayoutRect, } from "./hooks";
 export { useOverlay, OverlayLayer } from "./overlay";
 export { Tooltip, Modal } from "./popover";
 export { Button } from "./button";
@@ -20,6 +20,7 @@ export { NumberBox, Checkbox, RadioGroup, ParamNumberBox, ParamCheckbox, ParamRa
 export { ProgressBar, Spinner } from "./feedback";
 export { PianoKeyboard } from "./keyboard";
 export { StepSequencer } from "./sequencer";
+export { Tabs, Disclosure } from "./layout";
 export { ADSREnvelope, ParamADSREnvelope, PitchBend, ModWheel, ParamModWheel, ParamPitchBend, adsrLevelAt, } from "./synth";
 export { mapRange, formatDb, formatHz, formatMs, formatPercent, formatSemitones, midiNoteName, midiNoteToHz, hzToMidiNote, } from "./format";
 export { MacroPad, ParamMacroPad, HardwareKnob, ParamHardwareKnob, Crossfader, ParamCrossfader, PulseOrb, } from "./specialty";

package/dist/layout.d.ts

@@ -0,0 +1,37 @@
+import { type ReactNode } from "react";
+export interface TabsProps {
+    labels: string[];
+    /** Controlled active tab; omit to let Tabs manage it. */
+    index?: number;
+    /** Starting tab when uncontrolled. Default 0. */
+    defaultIndex?: number;
+    onChange?: (index: number) => void;
+    /** Fixed width; defaults to content width. */
+    width?: number;
+    /** Space between the bar and the panel. Default 12. */
+    gap?: number;
+    accentColor?: string;
+    textColor?: string;
+    activeTextColor?: string;
+    trackColor?: string;
+    /** One panel per label (a lone child works for label-driven UIs). */
+    children?: ReactNode | ReactNode[];
+}
+/** The page switcher — MAIN / FX / SETTINGS. A themed tab bar with an
+    underline indicator; renders the active panel below it. */
+export declare function Tabs({ labels, index, defaultIndex, onChange, width, gap, accentColor, textColor, activeTextColor, trackColor, children, }: TabsProps): import("react").JSX.Element;
+export interface DisclosureProps {
+    title: string;
+    /** Controlled open state; omit to let Disclosure manage it. */
+    open?: boolean;
+    /** Starting state when uncontrolled. Default false. */
+    defaultOpen?: boolean;
+    onChange?: (open: boolean) => void;
+    width?: number;
+    textColor?: string;
+    accentColor?: string;
+    children?: ReactNode;
+}
+/** A collapsible section row — "ADVANCED", "MODULATION". Click the
+    header to fold the content in and out. */
+export declare function Disclosure({ title, open, defaultOpen, onChange, width, textColor, accentColor, children, }: DisclosureProps): import("react").JSX.Element;

package/dist/layout.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Workspace structure — tabs for multi-page plugin UIs and the
+// disclosure row for collapsible settings sections.
+import { useState } from "react";
+import { View, Text } from "./primitives";
+const clampIndex = (i, count) => Math.min(Math.max(0, count - 1), Math.max(0, i));
+/** The page switcher — MAIN / FX / SETTINGS. A themed tab bar with an
+    underline indicator; renders the active panel below it. */
+export function Tabs({ labels, index, defaultIndex = 0, onChange, width, gap = 12, accentColor = "#C6F135", textColor = "#7c8087", activeTextColor = "#ECF2E8", trackColor = "#FFFFFF14", children, }) {
+    const [internal, setInternal] = useState(defaultIndex);
+    const current = clampIndex(index ?? internal, labels.length);
+    const select = (i) => {
+        setInternal(i);
+        onChange?.(i);
+    };
+    const panels = Array.isArray(children) ? children : children !== undefined ? [children] : [];
+    return (_jsxs(View, { style: width !== undefined ? { width } : undefined, children: [_jsxs(View, { className: "flex-row relative", style: { columnGap: 4 }, children: [_jsx(View, { className: "absolute left-0 right-0 h-[1]", style: { bottom: 0, backgroundColor: trackColor } }), labels.map((label, i) => (_jsxs(View, { className: "items-center cursor-pointer px-3 pt-1", onClick: () => select(i), children: [_jsx(Text, { className: "text-[11] font-bold tracking-widest", style: { color: i === current ? activeTextColor : textColor }, children: label }), _jsx(View, { className: "rounded-full self-stretch", style: {
+                                    height: 2,
+                                    marginTop: 6,
+                                    backgroundColor: i === current ? accentColor : "#00000000",
+                                } })] }, `${label}-${i}`)))] }), panels.length > 0 ? (_jsx(View, { style: { marginTop: gap }, children: panels[Math.min(current, panels.length - 1)] })) : null] }));
+}
+/** A collapsible section row — "ADVANCED", "MODULATION". Click the
+    header to fold the content in and out. */
+export function Disclosure({ title, open, defaultOpen = false, onChange, width, textColor = "#a1a1aa", accentColor = "#C6F135", children, }) {
+    const [internal, setInternal] = useState(defaultOpen);
+    const isOpen = open ?? internal;
+    const toggle = () => {
+        setInternal(!isOpen);
+        onChange?.(!isOpen);
+    };
+    return (_jsxs(View, { style: width !== undefined ? { width } : undefined, children: [_jsxs(View, { className: "flex-row items-center gap-2 cursor-pointer py-1", onClick: toggle, children: [_jsx(Text, { className: "text-[10] font-bold", style: { color: accentColor, width: 10 }, children: isOpen ? "▾" : "▸" }), _jsx(Text, { className: "text-[11] font-bold tracking-widest", style: { color: textColor }, children: title })] }), isOpen ? _jsx(View, { className: "pt-2 pl-5", children: children }) : null] }));
+}

package/dist/meter.d.ts

@@ -22,6 +22,9 @@ export interface MeterProps {
     thickness?: number;
     /** Horizontal bar instead of the vertical default. */
     horizontal?: boolean;
+    /** Fill from the top (vertical) / right (horizontal) — gain-reduction
+        meters. Default false. */
+    reverse?: boolean;
     /** Show the peak-hold line. Default true. */
     peak?: boolean;
     holdMs?: number;
@@ -34,4 +37,4 @@ export interface MeterProps {
     label?: string;
 }
 /** A natively painted level meter with hot zone + peak hold. */
-export declare function Meter({ value, length, thickness, horizontal, peak, holdMs, decayPerSecond, hotFrom, trackColor, color, hotColor, label, }: MeterProps): import("react").JSX.Element;
+export declare function Meter({ value, length, thickness, horizontal, reverse, peak, holdMs, decayPerSecond, hotFrom, trackColor, color, hotColor, label, }: MeterProps): import("react").JSX.Element;

package/dist/meter.js

@@ -34,14 +34,22 @@ export function usePeakHold(value, options = {}) {
     return Math.max(peak, value);
 }
 /** 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, }) {
+export function Meter({ value, length = 120, thickness = 10, horizontal, reverse = false, peak = true, holdMs, decayPerSecond, hotFrom = 0.85, trackColor = "#141714", color = "#C6F135", hotColor = "#FF4545", label, }) {
     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 ? (_jsxs(View, { className: "relative rounded overflow-hidden", style: { width: length, height: thickness, backgroundColor: trackColor }, children: [_jsx(View, { className: "absolute left-0 top-0 bottom-0", style: { width: fill, backgroundColor: color } }), hotFill > 0 ? (_jsx(View, { className: "absolute top-0 bottom-0", style: { left: hot * length, width: hotFill, backgroundColor: hotColor } })) : null, peak && peakAt > 2 ? (_jsx(View, { className: "absolute top-0 bottom-0 w-[2]", style: { left: peakAt - 2, backgroundColor: held >= hot ? hotColor : color } })) : null] })) : (_jsxs(View, { className: "relative rounded overflow-hidden", style: { width: thickness, height: length, backgroundColor: trackColor }, children: [_jsx(View, { className: "absolute bottom-0 left-0 right-0", style: { height: fill, backgroundColor: color } }), hotFill > 0 ? (_jsx(View, { className: "absolute left-0 right-0", style: { bottom: hot * length, height: hotFill, backgroundColor: hotColor } })) : null, peak && peakAt > 2 ? (_jsx(View, { className: "absolute left-0 right-0 h-[2]", style: { bottom: peakAt - 2, backgroundColor: held >= hot ? hotColor : color } })) : null] }));
+    const bar = horizontal ? (_jsxs(View, { className: "relative rounded overflow-hidden", style: { width: length, height: thickness, backgroundColor: trackColor }, children: [_jsx(View, { className: "absolute top-0 bottom-0", style: reverse ? { right: 0, width: fill, backgroundColor: color } : { left: 0, width: fill, backgroundColor: color } }), hotFill > 0 ? (_jsx(View, { className: "absolute top-0 bottom-0", style: reverse
+                    ? { right: hot * length, width: hotFill, backgroundColor: hotColor }
+                    : { left: hot * length, width: hotFill, backgroundColor: hotColor } })) : null, peak && peakAt > 2 ? (_jsx(View, { className: "absolute top-0 bottom-0 w-[2]", style: reverse
+                    ? { right: peakAt - 2, backgroundColor: held >= hot ? hotColor : color }
+                    : { left: peakAt - 2, backgroundColor: held >= hot ? hotColor : color } })) : null] })) : (_jsxs(View, { className: "relative rounded overflow-hidden", style: { width: thickness, height: length, backgroundColor: trackColor }, children: [_jsx(View, { className: "absolute left-0 right-0", style: reverse ? { top: 0, height: fill, backgroundColor: color } : { bottom: 0, height: fill, backgroundColor: color } }), hotFill > 0 ? (_jsx(View, { className: "absolute left-0 right-0", style: reverse
+                    ? { top: hot * length, height: hotFill, backgroundColor: hotColor }
+                    : { bottom: hot * length, height: hotFill, backgroundColor: hotColor } })) : null, peak && peakAt > 2 ? (_jsx(View, { className: "absolute left-0 right-0 h-[2]", style: reverse
+                    ? { top: peakAt - 2, backgroundColor: held >= hot ? hotColor : color }
+                    : { bottom: peakAt - 2, backgroundColor: held >= hot ? hotColor : color } })) : null] }));
     if (label === undefined)
         return bar;
     return (_jsxs(View, { className: "items-center gap-2", children: [bar, _jsx(Text, { className: "text-faint text-[10] font-bold tracking-widest", children: label })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vsreact/core",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Write React. Ship native VST. A React renderer for JUCE audio plugins — QuickJS + Yoga + juce::Graphics, no webview.",
   "keywords": [
     "react",

package/src/components.ts

@@ -68,6 +68,8 @@ export { PianoKeyboard } from "./keyboard";
 export type { PianoKeyboardProps } from "./keyboard";
 export { StepSequencer } from "./sequencer";
 export type { StepSequencerProps } from "./sequencer";
+export { Tabs, Disclosure } from "./layout";
+export type { TabsProps, DisclosureProps } from "./layout";
 export {
   ADSREnvelope,
   ParamADSREnvelope,

package/src/hooks.ts

@@ -29,6 +29,19 @@ export function useNativeEvent(name: string, handler: (payload: any) => void): v
   useEffect(() => native.on(name, (payload) => handlerRef.current(payload)), [name]);
 }
 
+/**
+ * The latest payload of a C++ event, held as state — the one-liner for
+ * native → UI data feeds:
+ *
+ *   const meter = useNativeValue("meter", { level: 0 });
+ *   <Meter value={meter.level} />
+ */
+export function useNativeValue<T = any>(name: string, initial: T): T {
+  const [value, setValue] = useState<T>(initial);
+  useNativeEvent(name, setValue);
+  return value;
+}
+
 /**
  * The value, but only after it has stopped changing for `delayMs` —
  * classic input debouncing for expensive native calls:

package/src/index.ts

@@ -15,6 +15,7 @@ export { render, unmount } from "./render";
 export { native } from "./native";
 export {
   useNativeEvent,
+  useNativeValue,
   useDebounced,
   useThrottled,
   usePrevious,
@@ -94,6 +95,8 @@ export { PianoKeyboard } from "./keyboard";
 export type { PianoKeyboardProps } from "./keyboard";
 export { StepSequencer } from "./sequencer";
 export type { StepSequencerProps } from "./sequencer";
+export { Tabs, Disclosure } from "./layout";
+export type { TabsProps, DisclosureProps } from "./layout";
 export {
   ADSREnvelope,
   ParamADSREnvelope,

package/src/layout.test.tsx

@@ -0,0 +1,127 @@
+import { beforeEach, describe, expect, test } from "bun:test";
+
+const batches: unknown[][][] = [];
+
+(globalThis as Record<string, any>).__vsreact_flush = (json: string) => {
+  batches.push(JSON.parse(json));
+};
+(globalThis as Record<string, any>).__vsreact_nativeCall = () => "null";
+
+import { render, unmount, View, Text, Tabs, Disclosure, Meter, useNativeValue } from "./index";
+
+const allOps = () => batches.flat();
+const opsNamed = (name: string) => allOps().filter((op: any) => op[0] === name);
+const dispatch = (msg: unknown) =>
+  (globalThis as Record<string, any>).__vsreact_dispatch(JSON.stringify(msg));
+
+const nodesWithListener = (type: string): number[] => {
+  const seen = new Set<number>();
+  for (const op of opsNamed("setProps") as any[]) {
+    if (op[2]?.listeners?.includes(type)) seen.add(op[1]);
+  }
+  return [...seen];
+};
+
+const textsSet = (): string[] =>
+  (opsNamed("setText") as any[]).map((op) => op[2]).filter((t) => typeof t === "string");
+
+beforeEach(() => {
+  unmount();
+  batches.length = 0;
+});
+
+describe("Tabs", () => {
+  test("uncontrolled: clicking a tab switches the panel", async () => {
+    render(
+      <Tabs labels={["MAIN", "FX"]}>
+        <Text>main-panel</Text>
+        <Text>fx-panel</Text>
+      </Tabs>,
+    );
+
+    expect(textsSet()).toContain("main-panel");
+    expect(textsSet()).not.toContain("fx-panel");
+
+    const tabs = nodesWithListener("click");
+    expect(tabs).toHaveLength(2);
+    dispatch({ kind: "event", nodeId: tabs[1], type: "click" });
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(textsSet()).toContain("fx-panel");
+  });
+
+  test("controlled: reports the click, renders the given index", () => {
+    const seen: number[] = [];
+    render(
+      <Tabs labels={["A", "B", "C"]} index={2} onChange={(i) => seen.push(i)}>
+        <Text>a</Text>
+        <Text>b</Text>
+        <Text>c</Text>
+      </Tabs>,
+    );
+
+    expect(textsSet()).toContain("c");
+    const tabs = nodesWithListener("click");
+    dispatch({ kind: "event", nodeId: tabs[0], type: "click" });
+    expect(seen).toEqual([0]);
+  });
+});
+
+describe("Disclosure", () => {
+  test("closed by default; clicking the header reveals the content", async () => {
+    render(
+      <Disclosure title="ADVANCED">
+        <Text>secret-settings</Text>
+      </Disclosure>,
+    );
+
+    expect(textsSet()).not.toContain("secret-settings");
+
+    const header = nodesWithListener("click")[0];
+    dispatch({ kind: "event", nodeId: header, type: "click" });
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(textsSet()).toContain("secret-settings");
+  });
+});
+
+describe("Meter reverse", () => {
+  test("reverse anchors the vertical fill to the top", () => {
+    render(<Meter value={0.5} length={100} peak={false} reverse />);
+
+    const fill: any = (opsNamed("setProps") as any[]).find(
+      (op) => op[2]?.style?.height === 42.5 || op[2]?.style?.height === 50,
+    );
+    expect(fill).toBeDefined();
+    expect(fill[2].style.top).toBe(0);
+    expect(fill[2].style.bottom).toBeUndefined();
+  });
+
+  test("default still fills from the bottom", () => {
+    render(<Meter value={0.5} length={100} peak={false} />);
+
+    const fill: any = (opsNamed("setProps") as any[]).find(
+      (op) => (op[2]?.style?.height === 42.5 || op[2]?.style?.height === 50) && op[2]?.style?.bottom === 0,
+    );
+    expect(fill).toBeDefined();
+  });
+});
+
+describe("useNativeValue", () => {
+  test("holds the latest payload of a native event", async () => {
+    const seen: number[] = [];
+    function App() {
+      const meter = useNativeValue("meter", { level: 0 });
+      seen.push(meter.level);
+      return <View />;
+    }
+
+    render(<App />);
+    await new Promise((r) => setTimeout(r, 0));
+
+    dispatch({ kind: "native", name: "meter", payload: { level: 0.8 } });
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(seen.at(-1)).toBe(0.8);
+  });
+});

package/src/layout.tsx

@@ -0,0 +1,136 @@
+// Workspace structure — tabs for multi-page plugin UIs and the
+// disclosure row for collapsible settings sections.
+
+import { useState, type ReactNode } from "react";
+import { View, Text } from "./primitives";
+
+const clampIndex = (i: number, count: number) => Math.min(Math.max(0, count - 1), Math.max(0, i));
+
+export interface TabsProps {
+  labels: string[];
+  /** Controlled active tab; omit to let Tabs manage it. */
+  index?: number;
+  /** Starting tab when uncontrolled. Default 0. */
+  defaultIndex?: number;
+  onChange?: (index: number) => void;
+  /** Fixed width; defaults to content width. */
+  width?: number;
+  /** Space between the bar and the panel. Default 12. */
+  gap?: number;
+  accentColor?: string;
+  textColor?: string;
+  activeTextColor?: string;
+  trackColor?: string;
+  /** One panel per label (a lone child works for label-driven UIs). */
+  children?: ReactNode | ReactNode[];
+}
+
+/** The page switcher — MAIN / FX / SETTINGS. A themed tab bar with an
+    underline indicator; renders the active panel below it. */
+export function Tabs({
+  labels,
+  index,
+  defaultIndex = 0,
+  onChange,
+  width,
+  gap = 12,
+  accentColor = "#C6F135",
+  textColor = "#7c8087",
+  activeTextColor = "#ECF2E8",
+  trackColor = "#FFFFFF14",
+  children,
+}: TabsProps) {
+  const [internal, setInternal] = useState(defaultIndex);
+  const current = clampIndex(index ?? internal, labels.length);
+
+  const select = (i: number) => {
+    setInternal(i);
+    onChange?.(i);
+  };
+
+  const panels: ReactNode[] = Array.isArray(children) ? children : children !== undefined ? [children] : [];
+
+  return (
+    <View style={width !== undefined ? { width } : undefined}>
+      <View className="flex-row relative" style={{ columnGap: 4 }}>
+        <View
+          className="absolute left-0 right-0 h-[1]"
+          style={{ bottom: 0, backgroundColor: trackColor }}
+        />
+        {labels.map((label, i) => (
+          <View
+            key={`${label}-${i}`}
+            className="items-center cursor-pointer px-3 pt-1"
+            onClick={() => select(i)}
+          >
+            <Text
+              className="text-[11] font-bold tracking-widest"
+              style={{ color: i === current ? activeTextColor : textColor }}
+            >
+              {label}
+            </Text>
+            <View
+              className="rounded-full self-stretch"
+              style={{
+                height: 2,
+                marginTop: 6,
+                backgroundColor: i === current ? accentColor : "#00000000",
+              }}
+            />
+          </View>
+        ))}
+      </View>
+      {panels.length > 0 ? (
+        <View style={{ marginTop: gap }}>{panels[Math.min(current, panels.length - 1)]}</View>
+      ) : null}
+    </View>
+  );
+}
+
+export interface DisclosureProps {
+  title: string;
+  /** Controlled open state; omit to let Disclosure manage it. */
+  open?: boolean;
+  /** Starting state when uncontrolled. Default false. */
+  defaultOpen?: boolean;
+  onChange?: (open: boolean) => void;
+  width?: number;
+  textColor?: string;
+  accentColor?: string;
+  children?: ReactNode;
+}
+
+/** A collapsible section row — "ADVANCED", "MODULATION". Click the
+    header to fold the content in and out. */
+export function Disclosure({
+  title,
+  open,
+  defaultOpen = false,
+  onChange,
+  width,
+  textColor = "#a1a1aa",
+  accentColor = "#C6F135",
+  children,
+}: DisclosureProps) {
+  const [internal, setInternal] = useState(defaultOpen);
+  const isOpen = open ?? internal;
+
+  const toggle = () => {
+    setInternal(!isOpen);
+    onChange?.(!isOpen);
+  };
+
+  return (
+    <View style={width !== undefined ? { width } : undefined}>
+      <View className="flex-row items-center gap-2 cursor-pointer py-1" onClick={toggle}>
+        <Text className="text-[10] font-bold" style={{ color: accentColor, width: 10 }}>
+          {isOpen ? "▾" : "▸"}
+        </Text>
+        <Text className="text-[11] font-bold tracking-widest" style={{ color: textColor }}>
+          {title}
+        </Text>
+      </View>
+      {isOpen ? <View className="pt-2 pl-5">{children}</View> : null}
+    </View>
+  );
+}

package/src/meter.tsx

@@ -67,6 +67,9 @@ export interface MeterProps {
   thickness?: number;
   /** Horizontal bar instead of the vertical default. */
   horizontal?: boolean;
+  /** Fill from the top (vertical) / right (horizontal) — gain-reduction
+      meters. Default false. */
+  reverse?: boolean;
   /** Show the peak-hold line. Default true. */
   peak?: boolean;
   holdMs?: number;
@@ -85,6 +88,7 @@ export function Meter({
   length = 120,
   thickness = 10,
   horizontal,
+  reverse = false,
   peak = true,
   holdMs,
   decayPerSecond,
@@ -108,19 +112,27 @@ export function Meter({
       style={{ width: length, height: thickness, backgroundColor: trackColor }}
     >
       <View
-        className="absolute left-0 top-0 bottom-0"
-        style={{ width: fill, backgroundColor: color }}
+        className="absolute top-0 bottom-0"
+        style={reverse ? { right: 0, width: fill, backgroundColor: color } : { left: 0, width: fill, backgroundColor: color }}
       />
       {hotFill > 0 ? (
         <View
           className="absolute top-0 bottom-0"
-          style={{ left: hot * length, width: hotFill, backgroundColor: hotColor }}
+          style={
+            reverse
+              ? { right: hot * length, width: hotFill, backgroundColor: hotColor }
+              : { 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 }}
+          style={
+            reverse
+              ? { right: peakAt - 2, backgroundColor: held >= hot ? hotColor : color }
+              : { left: peakAt - 2, backgroundColor: held >= hot ? hotColor : color }
+          }
         />
       ) : null}
     </View>
@@ -130,19 +142,27 @@ export function Meter({
       style={{ width: thickness, height: length, backgroundColor: trackColor }}
     >
       <View
-        className="absolute bottom-0 left-0 right-0"
-        style={{ height: fill, backgroundColor: color }}
+        className="absolute left-0 right-0"
+        style={reverse ? { top: 0, height: fill, backgroundColor: color } : { bottom: 0, height: fill, backgroundColor: color }}
       />
       {hotFill > 0 ? (
         <View
           className="absolute left-0 right-0"
-          style={{ bottom: hot * length, height: hotFill, backgroundColor: hotColor }}
+          style={
+            reverse
+              ? { top: hot * length, height: hotFill, backgroundColor: hotColor }
+              : { 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 }}
+          style={
+            reverse
+              ? { top: peakAt - 2, backgroundColor: held >= hot ? hotColor : color }
+              : { bottom: peakAt - 2, backgroundColor: held >= hot ? hotColor : color }
+          }
         />
       ) : null}
     </View>