@vsreact/core 0.0.10 → 0.0.12

package/src/controls.tsx

@@ -152,6 +152,8 @@ export interface SliderProps {
   height?: number;
   /** Vertical fader — drag up for more, fill rises from the bottom. */
   vertical?: boolean;
+  /** Flat hardware-style bar thumb instead of the dot. */
+  barThumb?: boolean;
   label?: string;
   disabled?: boolean;
   /** Double-click resets to this (DAW convention). */
@@ -170,6 +172,7 @@ export function Slider({
   width = 160,
   height = 160,
   vertical,
+  barThumb,
   label,
   disabled,
   defaultValue,
@@ -223,10 +226,17 @@ export function Slider({
             className="absolute w-[4] rounded-full left-[7] bottom-0"
             style={{ height: clamped * height, backgroundColor: valueColor }}
           />
-          <View
-            className="absolute w-[12] h-[12] rounded-full left-[3]"
-            style={{ top: (1 - clamped) * (height - 12), backgroundColor: valueColor }}
-          />
+          {barThumb ? (
+            <View
+              className="absolute w-[18] h-[5] rounded-[2] left-0"
+              style={{ top: (1 - clamped) * (height - 5), backgroundColor: valueColor }}
+            />
+          ) : (
+            <View
+              className="absolute w-[12] h-[12] rounded-full left-[3]"
+              style={{ top: (1 - clamped) * (height - 12), backgroundColor: valueColor }}
+            />
+          )}
         </View>
         {label !== undefined ? (
           <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
@@ -251,10 +261,17 @@ export function Slider({
           className="absolute h-[4] rounded-full top-[7]"
           style={{ width: clamped * width, backgroundColor: valueColor }}
         />
-        <View
-          className="absolute w-[12] h-[12] rounded-full top-[3]"
-          style={{ left: clamped * (width - 12), backgroundColor: valueColor }}
-        />
+        {barThumb ? (
+          <View
+            className="absolute w-[5] h-[18] rounded-[2] top-0"
+            style={{ left: clamped * (width - 5), backgroundColor: valueColor }}
+          />
+        ) : (
+          <View
+            className="absolute w-[12] h-[12] rounded-full top-[3]"
+            style={{ left: clamped * (width - 12), backgroundColor: valueColor }}
+          />
+        )}
       </View>
       {label !== undefined ? (
         <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
@@ -295,6 +312,9 @@ export function ParamSlider({ paramId, label, ...rest }: ParamSliderProps) {
 export interface ToggleProps {
   on: boolean;
   label?: string;
+  /** Side captions, hardware style: <Toggle offLabel="OFF" onLabel="ON" />. */
+  offLabel?: string;
+  onLabel?: string;
   /** Track height; width is 1.8×. Default 22. */
   size?: number;
   disabled?: boolean;
@@ -308,6 +328,8 @@ export interface ToggleProps {
 export function Toggle({
   on,
   label,
+  offLabel,
+  onLabel,
   size = 22,
   disabled,
   trackColor = "#2A2F27",
@@ -322,21 +344,39 @@ export function Toggle({
 
   return (
     <View className="items-center gap-2">
-      <View
-        className={`relative rounded-full ${disabled ? "opacity-40" : "cursor-pointer"}`}
-        style={{ width: trackWidth, height: size, backgroundColor: on ? onColor : trackColor }}
-        onClick={disabled ? undefined : () => onChange(!on)}
-      >
+      <View className="flex-row items-center gap-2">
+        {offLabel !== undefined ? (
+          <Text
+            className="text-[9] font-bold tracking-widest"
+            style={{ color: on ? "#6f6e66" : "#ECF2E8" }}
+          >
+            {offLabel}
+          </Text>
+        ) : null}
         <View
-          className="absolute rounded-full"
-          style={{
-            width: thumb,
-            height: thumb,
-            top: 3,
-            left: 3 + clamp01(t) * travel,
-            backgroundColor: thumbColor,
-          }}
-        />
+          className={`relative rounded-full ${disabled ? "opacity-40" : "cursor-pointer"}`}
+          style={{ width: trackWidth, height: size, backgroundColor: on ? onColor : trackColor }}
+          onClick={disabled ? undefined : () => onChange(!on)}
+        >
+          <View
+            className="absolute rounded-full"
+            style={{
+              width: thumb,
+              height: thumb,
+              top: 3,
+              left: 3 + clamp01(t) * travel,
+              backgroundColor: thumbColor,
+            }}
+          />
+        </View>
+        {onLabel !== undefined ? (
+          <Text
+            className="text-[9] font-bold tracking-widest"
+            style={{ color: on ? "#ECF2E8" : "#6f6e66" }}
+          >
+            {onLabel}
+          </Text>
+        ) : null}
       </View>
       {label !== undefined ? (
         <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>

package/src/feedback.tsx

@@ -14,6 +14,9 @@ export interface ProgressBarProps {
   height?: number;
   /** Renders "42%" alongside the bar. Default false. */
   showPercent?: boolean;
+  /** Unknown duration — a segment sweeps the track and `value` is
+      ignored. Default false. */
+  indeterminate?: boolean;
   trackColor?: string;
   color?: string;
   label?: string;
@@ -25,24 +28,43 @@ export function ProgressBar({
   width = 200,
   height = 8,
   showPercent = false,
+  indeterminate = false,
   trackColor = "#2A2F27",
   color = "#C6F135",
   label,
 }: ProgressBarProps) {
   const level = clamp01(value);
 
+  // The indeterminate sweep: a 30%-width segment marching left → right.
+  const [sweep, setSweep] = useState(0);
+  useInterval(() => setSweep((t) => (t + 0.018) % 1), indeterminate ? 16 : null);
+  const segment = width * 0.3;
+
   const bar = (
     <View className="flex-row items-center gap-3">
       <View
-        className="rounded-full overflow-hidden"
+        className="rounded-full overflow-hidden relative"
         style={{ width, height, backgroundColor: trackColor }}
       >
-        <View
-          className="rounded-full"
-          style={{ width: level * width, height, backgroundColor: color }}
-        />
+        {indeterminate ? (
+          <View
+            className="rounded-full absolute"
+            style={{
+              left: sweep * (width + segment) - segment,
+              top: 0,
+              width: segment,
+              height,
+              backgroundColor: color,
+            }}
+          />
+        ) : (
+          <View
+            className="rounded-full"
+            style={{ width: level * width, height, backgroundColor: color }}
+          />
+        )}
       </View>
-      {showPercent ? (
+      {showPercent && !indeterminate ? (
         <Text className="text-faint text-[11] font-bold" style={{ width: 34 }}>
           {`${Math.round(level * 100)}%`}
         </Text>

package/src/format.ts

@@ -0,0 +1,62 @@
+// Value formatting for parameter readouts — the strings DAW users
+// expect next to a knob. Pure functions; pair them with NumberBox's
+// `format` prop or any Text.
+
+const trim = (value: number, decimals: number) => String(parseFloat(value.toFixed(decimals)));
+
+/** Linear interpolation of `value` from [inMin, inMax] to [outMin, outMax].
+    `clampOut` pins the result inside the output range. */
+export function mapRange(
+  value: number,
+  inMin: number,
+  inMax: number,
+  outMin: number,
+  outMax: number,
+  clampOut = false,
+): number {
+  const t = inMax === inMin ? 0 : (value - inMin) / (inMax - inMin);
+  const out = outMin + t * (outMax - outMin);
+  if (!clampOut) return out;
+  const lo = Math.min(outMin, outMax);
+  const hi = Math.max(outMin, outMax);
+  return Math.min(hi, Math.max(lo, out));
+}
+
+/** Decibels with an explicit sign: "+6.0 dB", "0.0 dB", "-12.5 dB".
+    -Infinity (a gain fader on the floor) reads "-inf dB". */
+export function formatDb(db: number, decimals = 1): string {
+  if (db === Number.NEGATIVE_INFINITY) return "-inf dB";
+  const text = db.toFixed(decimals);
+  return `${db > 0 && !text.startsWith("+") ? "+" : ""}${text} dB`;
+}
+
+/** Frequency with automatic kHz: "440 Hz", "1.2 kHz". */
+export function formatHz(hz: number, decimals = 1): string {
+  if (Math.abs(hz) >= 1000) return `${trim(hz / 1000, Math.max(decimals, 1))} kHz`;
+  return `${trim(hz, decimals)} Hz`;
+}
+
+/** Time with automatic seconds: "350 ms", "1.25 s". */
+export function formatMs(ms: number, decimals = 0): string {
+  if (Math.abs(ms) >= 1000) return `${trim(ms / 1000, Math.max(decimals, 2))} s`;
+  return `${trim(ms, decimals)} ms`;
+}
+
+/** A 0..1 value as "42%". */
+export function formatPercent(value01: number, decimals = 0): string {
+  return `${trim(value01 * 100, decimals)}%`;
+}
+
+/** Semitones with an explicit sign: "+7 st", "0 st", "-12 st". */
+export function formatSemitones(semitones: number, decimals = 0): string {
+  const text = trim(semitones, decimals);
+  return `${semitones > 0 && !text.startsWith("+") ? "+" : ""}${text} st`;
+}
+
+const NOTE_NAMES = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
+
+/** A MIDI note number as scientific pitch: 60 → "C4", 69 → "A4". */
+export function midiNoteName(note: number): string {
+  const n = Math.round(note);
+  return `${NOTE_NAMES[((n % 12) + 12) % 12]}${Math.floor(n / 12) - 1}`;
+}

package/src/hostConfig.test.tsx

@@ -1,120 +1,120 @@
-import { beforeEach, describe, expect, test } from "bun:test";
-import { useState } from "react";
-
-const batches: unknown[][][] = [];
-(globalThis as Record<string, any>).__vsreact_flush = (json: string) => {
-  batches.push(JSON.parse(json));
-};
-
-import { render, unmount, View, Text, TextInput } 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));
-
-beforeEach(() => {
-  unmount();
-  batches.length = 0;
-});
-
-describe("reconciler host config", () => {
-  test("initial mount emits create/setProps/append ops ending at the root", () => {
-    render(
-      <View className="p-4">
-        <Text>hi</Text>
-      </View>,
-    );
-
-    const ops = allOps();
-    const creates = opsNamed("create");
-
-    // view + text + rawtext
-    expect(creates.length).toBe(3);
-    const viewId = (creates.find((op: any) => op[2] === "view") as any)[1];
-    const textId = (creates.find((op: any) => op[2] === "text") as any)[1];
-    const rawId = (creates.find((op: any) => op[2] === "rawtext") as any)[1];
-
-    const viewProps: any = opsNamed("setProps").find((op: any) => op[1] === viewId);
-    expect(viewProps[2].style.padding).toBe(16);
-
-    expect(opsNamed("setText")).toContainEqual(["setText", rawId, "hi"]);
-    expect(opsNamed("appendChild")).toContainEqual(["appendChild", textId, rawId]);
-    expect(opsNamed("appendChild")).toContainEqual(["appendChild", viewId, textId]);
-    expect(opsNamed("appendChild")).toContainEqual(["appendChild", 0, viewId]);
-
-    // root attach comes after the subtree is assembled
-    const opNames = ops.map((op: any) => op.join(":"));
-    expect(opNames.indexOf(`appendChild:0:${viewId}`)).toBeGreaterThan(
-      opNames.indexOf(`appendChild:${viewId}:${textId}`),
-    );
-  });
-
-  test("click handlers register as listeners and receive dispatches", () => {
-    let clicks = 0;
-
-    render(<View onClick={() => clicks++} className="w-4" />);
-
-    const create: any = opsNamed("create")[0];
-    const props: any = opsNamed("setProps").find((op: any) => op[1] === create[1]);
-    expect(props[2].listeners).toEqual(["click"]);
-
-    dispatch({ kind: "event", nodeId: create[1], type: "click" });
-    expect(clicks).toBe(1);
-  });
-
-  test("state updates emit new setProps and setText", () => {
-    function Counter() {
-      const [count, setCount] = useState(0);
-      return (
-        <View onClick={() => setCount((c) => c + 1)}>
-          <Text>{`count:${count}`}</Text>
-        </View>
-      );
-    }
-
-    render(<Counter />);
-
-    const viewId = (opsNamed("create").find((op: any) => op[2] === "view") as any)[1];
-    batches.length = 0;
-
-    dispatch({ kind: "event", nodeId: viewId, type: "click" });
-
-    expect(opsNamed("setText").some((op: any) => op[2] === "count:1")).toBe(true);
-  });
-
-  test("TextInput onChange receives the plain string value", () => {
-    const seen: string[] = [];
-
-    render(<TextInput onChange={(v) => seen.push(v)} />);
-
-    const inputId = (opsNamed("create").find((op: any) => op[2] === "textinput") as any)[1];
-    dispatch({ kind: "event", nodeId: inputId, type: "change", payload: { value: "abc" } });
-
-    expect(seen).toEqual(["abc"]);
-  });
-
-  test("conditional removal emits removeChild", () => {
-    function Toggle({ on }: { on: boolean }) {
-      return <View>{on ? <View className="w-2" /> : null}</View>;
-    }
-
-    render(<Toggle on={true} />);
-    // React creates instances bottom-up: the inner view is created first.
-    const childId = (opsNamed("create")[0] as any)[1];
-    batches.length = 0;
-
-    render(<Toggle on={false} />);
-    expect(opsNamed("removeChild").some((op: any) => op[2] === childId)).toBe(true);
-  });
-
-  test("unmount clears the container", () => {
-    render(<View />);
-    batches.length = 0;
-    unmount();
-    const ops = allOps();
-    expect(ops.some((op: any) => op[0] === "removeChild" || op[0] === "clearContainer")).toBe(
-      true,
-    );
-  });
-});
+import { beforeEach, describe, expect, test } from "bun:test";
+import { useState } from "react";
+
+const batches: unknown[][][] = [];
+(globalThis as Record<string, any>).__vsreact_flush = (json: string) => {
+  batches.push(JSON.parse(json));
+};
+
+import { render, unmount, View, Text, TextInput } 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));
+
+beforeEach(() => {
+  unmount();
+  batches.length = 0;
+});
+
+describe("reconciler host config", () => {
+  test("initial mount emits create/setProps/append ops ending at the root", () => {
+    render(
+      <View className="p-4">
+        <Text>hi</Text>
+      </View>,
+    );
+
+    const ops = allOps();
+    const creates = opsNamed("create");
+
+    // view + text + rawtext
+    expect(creates.length).toBe(3);
+    const viewId = (creates.find((op: any) => op[2] === "view") as any)[1];
+    const textId = (creates.find((op: any) => op[2] === "text") as any)[1];
+    const rawId = (creates.find((op: any) => op[2] === "rawtext") as any)[1];
+
+    const viewProps: any = opsNamed("setProps").find((op: any) => op[1] === viewId);
+    expect(viewProps[2].style.padding).toBe(16);
+
+    expect(opsNamed("setText")).toContainEqual(["setText", rawId, "hi"]);
+    expect(opsNamed("appendChild")).toContainEqual(["appendChild", textId, rawId]);
+    expect(opsNamed("appendChild")).toContainEqual(["appendChild", viewId, textId]);
+    expect(opsNamed("appendChild")).toContainEqual(["appendChild", 0, viewId]);
+
+    // root attach comes after the subtree is assembled
+    const opNames = ops.map((op: any) => op.join(":"));
+    expect(opNames.indexOf(`appendChild:0:${viewId}`)).toBeGreaterThan(
+      opNames.indexOf(`appendChild:${viewId}:${textId}`),
+    );
+  });
+
+  test("click handlers register as listeners and receive dispatches", () => {
+    let clicks = 0;
+
+    render(<View onClick={() => clicks++} className="w-4" />);
+
+    const create: any = opsNamed("create")[0];
+    const props: any = opsNamed("setProps").find((op: any) => op[1] === create[1]);
+    expect(props[2].listeners).toEqual(["click"]);
+
+    dispatch({ kind: "event", nodeId: create[1], type: "click" });
+    expect(clicks).toBe(1);
+  });
+
+  test("state updates emit new setProps and setText", () => {
+    function Counter() {
+      const [count, setCount] = useState(0);
+      return (
+        <View onClick={() => setCount((c) => c + 1)}>
+          <Text>{`count:${count}`}</Text>
+        </View>
+      );
+    }
+
+    render(<Counter />);
+
+    const viewId = (opsNamed("create").find((op: any) => op[2] === "view") as any)[1];
+    batches.length = 0;
+
+    dispatch({ kind: "event", nodeId: viewId, type: "click" });
+
+    expect(opsNamed("setText").some((op: any) => op[2] === "count:1")).toBe(true);
+  });
+
+  test("TextInput onChange receives the plain string value", () => {
+    const seen: string[] = [];
+
+    render(<TextInput onChange={(v) => seen.push(v)} />);
+
+    const inputId = (opsNamed("create").find((op: any) => op[2] === "textinput") as any)[1];
+    dispatch({ kind: "event", nodeId: inputId, type: "change", payload: { value: "abc" } });
+
+    expect(seen).toEqual(["abc"]);
+  });
+
+  test("conditional removal emits removeChild", () => {
+    function Toggle({ on }: { on: boolean }) {
+      return <View>{on ? <View className="w-2" /> : null}</View>;
+    }
+
+    render(<Toggle on={true} />);
+    // React creates instances bottom-up: the inner view is created first.
+    const childId = (opsNamed("create")[0] as any)[1];
+    batches.length = 0;
+
+    render(<Toggle on={false} />);
+    expect(opsNamed("removeChild").some((op: any) => op[2] === childId)).toBe(true);
+  });
+
+  test("unmount clears the container", () => {
+    render(<View />);
+    batches.length = 0;
+    unmount();
+    const ops = allOps();
+    expect(ops.some((op: any) => op[0] === "removeChild" || op[0] === "clearContainer")).toBe(
+      true,
+    );
+  });
+});