@vsreact/core 0.0.11 → 0.0.12

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,
+    );
+  });
+});