@vsreact/core 0.0.10 → 0.0.12

package/src/hostConfig.ts

@@ -1,164 +1,164 @@
-// react-reconciler host config (mutation mode). React commits become batched
-// mutation ops; event props become handler-registry entries + listener lists.
-
-import { DefaultEventPriority } from "react-reconciler/constants";
-import { queueOp, flushOps, setHandlers, removeHandlers, type EventHandler } from "./bridge";
-import { tw, type Style } from "./tw";
-
-export interface Instance {
-  id: number;
-  type: string;
-}
-
-export type TextInstance = Instance;
-
-let nextId = 1;
-
-const hostTypes: Record<string, string> = {
-  "vs-view": "view",
-  "vs-text": "text",
-  "vs-image": "image",
-  "vs-textinput": "textinput",
-  "vs-native": "native",
-};
-
-const eventPropNames: Record<string, string> = {
-  onClick: "click",
-  onDoubleClick: "dblclick",
-  onWheel: "wheel",
-  onMouseEnter: "mouseenter",
-  onMouseLeave: "mouseleave",
-  onMouseDown: "mousedown",
-  onMouseUp: "mouseup",
-  onDragStart: "dragstart",
-  onDrag: "drag",
-  onDragEnd: "dragend",
-  onLayout: "layout",
-  onChange: "change",
-  onSubmit: "submit",
-  onFocus: "focus",
-  onBlur: "blur",
-};
-
-function normalizeProps(props: Record<string, unknown>): {
-  payload: Record<string, unknown>;
-  handlers: Map<string, EventHandler>;
-} {
-  const payload: Record<string, unknown> = {};
-  const handlers = new Map<string, EventHandler>();
-  const listeners: string[] = [];
-
-  const resolved = typeof props.className === "string" ? tw(props.className) : { style: {} };
-  payload.style = { ...resolved.style, ...((props.style as Style) ?? {}) };
-  if (resolved.hoverStyle) payload.hoverStyle = resolved.hoverStyle;
-  if (resolved.activeStyle) payload.activeStyle = resolved.activeStyle;
-  if (resolved.focusStyle) payload.focusStyle = resolved.focusStyle;
-
-  for (const [key, value] of Object.entries(props)) {
-    if (value === undefined || key === "children" || key === "className" || key === "style")
-      continue;
-
-    const eventType = eventPropNames[key];
-
-    if (eventType && typeof value === "function") {
-      handlers.set(eventType, value as EventHandler);
-      listeners.push(eventType);
-      continue;
-    }
-
-    if (typeof value !== "function" && typeof value !== "object") payload[key] = value;
-  }
-
-  if (listeners.length > 0) payload.listeners = listeners;
-
-  return { payload, handlers };
-}
-
-function applyProps(instance: Instance, props: Record<string, unknown>): void {
-  const { payload, handlers } = normalizeProps(props);
-  setHandlers(instance.id, handlers);
-  queueOp(["setProps", instance.id, payload]);
-}
-
-export const hostConfig = {
-  supportsMutation: true,
-  supportsPersistence: false,
-  supportsHydration: false,
-  isPrimaryRenderer: true,
-  supportsMicrotasks: true,
-  scheduleMicrotask: (fn: () => void) => queueMicrotask(fn),
-  scheduleTimeout: (fn: (...args: unknown[]) => void, delay?: number) => setTimeout(fn, delay),
-  cancelTimeout: (id: ReturnType<typeof setTimeout>) => clearTimeout(id),
-  noTimeout: -1 as const,
-
-  getRootHostContext: () => ({}),
-  getChildHostContext: (parent: object) => parent,
-  getPublicInstance: (instance: Instance) => instance,
-  prepareForCommit: () => null,
-  resetAfterCommit: () => flushOps(),
-  shouldSetTextContent: () => false,
-
-  createInstance(type: string, props: Record<string, unknown>): Instance {
-    const hostType = hostTypes[type];
-    if (!hostType) throw new Error(`Unknown VSReacT element <${type}>`);
-
-    const instance: Instance = { id: nextId++, type: hostType };
-    queueOp(["create", instance.id, hostType]);
-    applyProps(instance, props);
-    return instance;
-  },
-
-  createTextInstance(text: string): TextInstance {
-    const instance: TextInstance = { id: nextId++, type: "rawtext" };
-    queueOp(["create", instance.id, "rawtext"]);
-    queueOp(["setText", instance.id, text]);
-    return instance;
-  },
-
-  appendInitialChild: (parent: Instance, child: Instance) =>
-    queueOp(["appendChild", parent.id, child.id]),
-  appendChild: (parent: Instance, child: Instance) =>
-    queueOp(["appendChild", parent.id, child.id]),
-  appendChildToContainer: (_container: unknown, child: Instance) =>
-    queueOp(["appendChild", 0, child.id]),
-  insertBefore: (parent: Instance, child: Instance, before: Instance) =>
-    queueOp(["insertBefore", parent.id, child.id, before.id]),
-  insertInContainerBefore: (_container: unknown, child: Instance, before: Instance) =>
-    queueOp(["insertBefore", 0, child.id, before.id]),
-  removeChild: (parent: Instance, child: Instance) =>
-    queueOp(["removeChild", parent.id, child.id]),
-  removeChildFromContainer: (_container: unknown, child: Instance) =>
-    queueOp(["removeChild", 0, child.id]),
-
-  finalizeInitialChildren: () => false,
-
-  prepareUpdate: () => true,
-
-  commitUpdate(
-    instance: Instance,
-    _updatePayload: unknown,
-    _type: string,
-    _prevProps: Record<string, unknown>,
-    nextProps: Record<string, unknown>,
-  ): void {
-    applyProps(instance, nextProps);
-  },
-
-  commitTextUpdate(instance: TextInstance, _oldText: string, newText: string): void {
-    queueOp(["setText", instance.id, newText]);
-  },
-
-  clearContainer: () => queueOp(["clearContainer"]),
-
-  detachDeletedInstance(instance: Instance): void {
-    removeHandlers(instance.id);
-  },
-
-  getCurrentEventPriority: () => DefaultEventPriority,
-  getInstanceFromNode: () => null,
-  getInstanceFromScope: () => null,
-  beforeActiveInstanceBlur: () => {},
-  afterActiveInstanceBlur: () => {},
-  prepareScopeUpdate: () => {},
-  preparePortalMount: () => {},
-};
+// react-reconciler host config (mutation mode). React commits become batched
+// mutation ops; event props become handler-registry entries + listener lists.
+
+import { DefaultEventPriority } from "react-reconciler/constants";
+import { queueOp, flushOps, setHandlers, removeHandlers, type EventHandler } from "./bridge";
+import { tw, type Style } from "./tw";
+
+export interface Instance {
+  id: number;
+  type: string;
+}
+
+export type TextInstance = Instance;
+
+let nextId = 1;
+
+const hostTypes: Record<string, string> = {
+  "vs-view": "view",
+  "vs-text": "text",
+  "vs-image": "image",
+  "vs-textinput": "textinput",
+  "vs-native": "native",
+};
+
+const eventPropNames: Record<string, string> = {
+  onClick: "click",
+  onDoubleClick: "dblclick",
+  onWheel: "wheel",
+  onMouseEnter: "mouseenter",
+  onMouseLeave: "mouseleave",
+  onMouseDown: "mousedown",
+  onMouseUp: "mouseup",
+  onDragStart: "dragstart",
+  onDrag: "drag",
+  onDragEnd: "dragend",
+  onLayout: "layout",
+  onChange: "change",
+  onSubmit: "submit",
+  onFocus: "focus",
+  onBlur: "blur",
+};
+
+function normalizeProps(props: Record<string, unknown>): {
+  payload: Record<string, unknown>;
+  handlers: Map<string, EventHandler>;
+} {
+  const payload: Record<string, unknown> = {};
+  const handlers = new Map<string, EventHandler>();
+  const listeners: string[] = [];
+
+  const resolved = typeof props.className === "string" ? tw(props.className) : { style: {} };
+  payload.style = { ...resolved.style, ...((props.style as Style) ?? {}) };
+  if (resolved.hoverStyle) payload.hoverStyle = resolved.hoverStyle;
+  if (resolved.activeStyle) payload.activeStyle = resolved.activeStyle;
+  if (resolved.focusStyle) payload.focusStyle = resolved.focusStyle;
+
+  for (const [key, value] of Object.entries(props)) {
+    if (value === undefined || key === "children" || key === "className" || key === "style")
+      continue;
+
+    const eventType = eventPropNames[key];
+
+    if (eventType && typeof value === "function") {
+      handlers.set(eventType, value as EventHandler);
+      listeners.push(eventType);
+      continue;
+    }
+
+    if (typeof value !== "function" && typeof value !== "object") payload[key] = value;
+  }
+
+  if (listeners.length > 0) payload.listeners = listeners;
+
+  return { payload, handlers };
+}
+
+function applyProps(instance: Instance, props: Record<string, unknown>): void {
+  const { payload, handlers } = normalizeProps(props);
+  setHandlers(instance.id, handlers);
+  queueOp(["setProps", instance.id, payload]);
+}
+
+export const hostConfig = {
+  supportsMutation: true,
+  supportsPersistence: false,
+  supportsHydration: false,
+  isPrimaryRenderer: true,
+  supportsMicrotasks: true,
+  scheduleMicrotask: (fn: () => void) => queueMicrotask(fn),
+  scheduleTimeout: (fn: (...args: unknown[]) => void, delay?: number) => setTimeout(fn, delay),
+  cancelTimeout: (id: ReturnType<typeof setTimeout>) => clearTimeout(id),
+  noTimeout: -1 as const,
+
+  getRootHostContext: () => ({}),
+  getChildHostContext: (parent: object) => parent,
+  getPublicInstance: (instance: Instance) => instance,
+  prepareForCommit: () => null,
+  resetAfterCommit: () => flushOps(),
+  shouldSetTextContent: () => false,
+
+  createInstance(type: string, props: Record<string, unknown>): Instance {
+    const hostType = hostTypes[type];
+    if (!hostType) throw new Error(`Unknown VSReacT element <${type}>`);
+
+    const instance: Instance = { id: nextId++, type: hostType };
+    queueOp(["create", instance.id, hostType]);
+    applyProps(instance, props);
+    return instance;
+  },
+
+  createTextInstance(text: string): TextInstance {
+    const instance: TextInstance = { id: nextId++, type: "rawtext" };
+    queueOp(["create", instance.id, "rawtext"]);
+    queueOp(["setText", instance.id, text]);
+    return instance;
+  },
+
+  appendInitialChild: (parent: Instance, child: Instance) =>
+    queueOp(["appendChild", parent.id, child.id]),
+  appendChild: (parent: Instance, child: Instance) =>
+    queueOp(["appendChild", parent.id, child.id]),
+  appendChildToContainer: (_container: unknown, child: Instance) =>
+    queueOp(["appendChild", 0, child.id]),
+  insertBefore: (parent: Instance, child: Instance, before: Instance) =>
+    queueOp(["insertBefore", parent.id, child.id, before.id]),
+  insertInContainerBefore: (_container: unknown, child: Instance, before: Instance) =>
+    queueOp(["insertBefore", 0, child.id, before.id]),
+  removeChild: (parent: Instance, child: Instance) =>
+    queueOp(["removeChild", parent.id, child.id]),
+  removeChildFromContainer: (_container: unknown, child: Instance) =>
+    queueOp(["removeChild", 0, child.id]),
+
+  finalizeInitialChildren: () => false,
+
+  prepareUpdate: () => true,
+
+  commitUpdate(
+    instance: Instance,
+    _updatePayload: unknown,
+    _type: string,
+    _prevProps: Record<string, unknown>,
+    nextProps: Record<string, unknown>,
+  ): void {
+    applyProps(instance, nextProps);
+  },
+
+  commitTextUpdate(instance: TextInstance, _oldText: string, newText: string): void {
+    queueOp(["setText", instance.id, newText]);
+  },
+
+  clearContainer: () => queueOp(["clearContainer"]),
+
+  detachDeletedInstance(instance: Instance): void {
+    removeHandlers(instance.id);
+  },
+
+  getCurrentEventPriority: () => DefaultEventPriority,
+  getInstanceFromNode: () => null,
+  getInstanceFromScope: () => null,
+  beforeActiveInstanceBlur: () => {},
+  afterActiveInstanceBlur: () => {},
+  prepareScopeUpdate: () => {},
+  preparePortalMount: () => {},
+};

package/src/index.ts

@@ -90,4 +90,35 @@ export type {
 } from "./fields";
 export { ProgressBar, Spinner } from "./feedback";
 export type { ProgressBarProps, SpinnerProps } from "./feedback";
+export { PianoKeyboard } from "./keyboard";
+export type { PianoKeyboardProps } from "./keyboard";
+export { StepSequencer } from "./sequencer";
+export type { StepSequencerProps } from "./sequencer";
+export {
+  mapRange,
+  formatDb,
+  formatHz,
+  formatMs,
+  formatPercent,
+  formatSemitones,
+  midiNoteName,
+} from "./format";
+export {
+  MacroPad,
+  ParamMacroPad,
+  HardwareKnob,
+  ParamHardwareKnob,
+  Crossfader,
+  ParamCrossfader,
+  PulseOrb,
+} from "./specialty";
+export type {
+  MacroPadProps,
+  ParamMacroPadProps,
+  HardwareKnobProps,
+  ParamHardwareKnobProps,
+  CrossfaderProps,
+  ParamCrossfaderProps,
+  PulseOrbProps,
+} from "./specialty";
 export type { DragEventPayload, LayoutRect, WheelEventPayload } from "./primitives";

package/src/keyboard.tsx

@@ -0,0 +1,151 @@
+// The playable piano keyboard — preview a patch without touching the
+// host. Views only (white row + absolutely-positioned blacks); press
+// for note-on, release for note-off, drag across keys for glissando.
+
+import { useRef, useState } from "react";
+import { View, Text } from "./primitives";
+import { midiNoteName } from "./format";
+
+const BLACK_SEMIS = new Set([1, 3, 6, 8, 10]);
+const isBlack = (note: number) => BLACK_SEMIS.has(((note % 12) + 12) % 12);
+
+export interface PianoKeyboardProps {
+  /** MIDI note of the leftmost key (snapped down to a white key).
+      Default 48 (C3). */
+  startNote?: number;
+  /** Whole octaves; the keyboard ends on the top C. Default 2. */
+  octaves?: number;
+  /** Width of one white key. Default 24. */
+  whiteKeyWidth?: number;
+  /** White-key height; blacks are 60% of it. Default 96. */
+  height?: number;
+  /** Externally-held notes (host MIDI in) — painted active. */
+  heldNotes?: number[];
+  /** Prints "C3" on each C. Default true. */
+  showOctaveLabels?: boolean;
+  disabled?: boolean;
+  whiteColor?: string;
+  blackColor?: string;
+  activeColor?: string;
+  borderColor?: string;
+  onNoteOn?: (note: number) => void;
+  onNoteOff?: (note: number) => void;
+}
+
+export function PianoKeyboard({
+  startNote = 48,
+  octaves = 2,
+  whiteKeyWidth = 24,
+  height = 96,
+  heldNotes,
+  showOctaveLabels = true,
+  disabled,
+  whiteColor = "#ECF2E8",
+  blackColor = "#17191C",
+  activeColor = "#C6F135",
+  borderColor = "#00000066",
+  onNoteOn,
+  onNoteOff,
+}: PianoKeyboardProps) {
+  const [pressed, setPressed] = useState<number | null>(null);
+  const active = useRef<number | null>(null);
+
+  // Snap the start onto a white key so the layout math stays honest.
+  let base = Math.round(startNote);
+  while (isBlack(base)) base += 1;
+
+  const whiteCount = Math.max(1, Math.round(octaves)) * 7 + 1;
+  const blackWidth = whiteKeyWidth * 0.62;
+  const blackHeight = height * 0.6;
+
+  const whites: number[] = [];
+  const blacks: Array<{ note: number; left: number }> = [];
+  for (let note = base; whites.length < whiteCount; note++) {
+    if (isBlack(note)) {
+      blacks.push({ note, left: whites.length * whiteKeyWidth - blackWidth / 2 });
+    } else {
+      whites.push(note);
+    }
+  }
+
+  const press = (note: number) => {
+    if (active.current === note) return;
+    if (active.current !== null) onNoteOff?.(active.current);
+    active.current = note;
+    setPressed(note);
+    onNoteOn?.(note);
+  };
+
+  const release = () => {
+    if (active.current === null) return;
+    onNoteOff?.(active.current);
+    active.current = null;
+    setPressed(null);
+  };
+
+  /** The key under an approximate pointer position (glissando). */
+  const noteAt = (x: number, y: number): number => {
+    if (y <= blackHeight) {
+      for (const black of blacks) {
+        if (x >= black.left && x <= black.left + blackWidth) return black.note;
+      }
+    }
+    const index = Math.min(whiteCount - 1, Math.max(0, Math.floor(x / whiteKeyWidth)));
+    return whites[index];
+  };
+
+  const isActive = (note: number) =>
+    pressed === note || (heldNotes !== undefined && heldNotes.includes(note));
+
+  const keyHandlers = (note: number, centerX: number, centerY: number) =>
+    disabled
+      ? {}
+      : {
+          onMouseDown: () => press(note),
+          onMouseUp: release,
+          onDrag: (e: { dx: number; dy: number }) => press(noteAt(centerX + e.dx, centerY + e.dy)),
+          onDragEnd: release,
+        };
+
+  return (
+    <View
+      className={`flex-row relative ${disabled ? "opacity-40" : "cursor-pointer"}`}
+      style={{ width: whiteCount * whiteKeyWidth, height }}
+    >
+      {whites.map((note, i) => (
+        <View
+          key={note}
+          className="border rounded-b-[3] justify-end items-center pb-1"
+          style={{
+            width: whiteKeyWidth,
+            height,
+            backgroundColor: isActive(note) ? activeColor : whiteColor,
+            borderColor,
+          }}
+          {...keyHandlers(note, (i + 0.5) * whiteKeyWidth, height * 0.8)}
+        >
+          {showOctaveLabels && ((note % 12) + 12) % 12 === 0 ? (
+            <Text className="text-[8] font-bold" style={{ color: "#00000088" }}>
+              {midiNoteName(note)}
+            </Text>
+          ) : null}
+        </View>
+      ))}
+      {blacks.map((black) => (
+        <View
+          key={black.note}
+          className="absolute border rounded-b-[3]"
+          style={{
+            left: black.left,
+            top: 0,
+            width: blackWidth,
+            height: blackHeight,
+            backgroundColor: isActive(black.note) ? activeColor : blackColor,
+            borderColor,
+          }}
+          {...keyHandlers(black.note, black.left + blackWidth / 2, blackHeight / 2)}
+        />
+      ))}
+    </View>
+  );
+}

package/src/native.ts

@@ -1,18 +1,18 @@
-// App-level messaging with the C++ host.
-
-import { addNativeListener, type EventHandler } from "./bridge";
-
-export const native = {
-  /** Synchronously invokes a C++ handler registered in RootOptions.onNativeCall. */
-  call(name: string, args?: unknown): any {
-    const fn = (globalThis as Record<string, any>).__vsreact_nativeCall;
-    if (typeof fn !== "function") return undefined;
-    const json = fn(name, JSON.stringify(args ?? null));
-    return json ? JSON.parse(json) : undefined;
-  },
-
-  /** Subscribes to events pushed from C++ via RootView::sendNativeEvent. */
-  on(name: string, cb: (payload: any) => void): () => void {
-    return addNativeListener(name, cb as EventHandler);
-  },
-};
+// App-level messaging with the C++ host.
+
+import { addNativeListener, type EventHandler } from "./bridge";
+
+export const native = {
+  /** Synchronously invokes a C++ handler registered in RootOptions.onNativeCall. */
+  call(name: string, args?: unknown): any {
+    const fn = (globalThis as Record<string, any>).__vsreact_nativeCall;
+    if (typeof fn !== "function") return undefined;
+    const json = fn(name, JSON.stringify(args ?? null));
+    return json ? JSON.parse(json) : undefined;
+  },
+
+  /** Subscribes to events pushed from C++ via RootView::sendNativeEvent. */
+  on(name: string, cb: (payload: any) => void): () => void {
+    return addNativeListener(name, cb as EventHandler);
+  },
+};