Thinking Out Loud and Process Transparency Questions

import React, { useState, useRef, useEffect } from "react";

/**
 * ToggleSwitch
 * Props:
 *  - checked (optional): controlled boolean
 *  - defaultChecked (optional): initial value for uncontrolled
 *  - onChange (optional): called with new boolean when toggled
 *  - id/aria-label/aria-labelledby accepted for accessibility
 */
function ToggleSwitch({
  checked,
  defaultChecked = false,
  onChange,
  id,
  "aria-label": ariaLabel,
  "aria-labelledby": ariaLabelledby,
  disabled = false,
}) {
  // If `checked` is undefined we manage internal state (uncontrolled).
  const isControlled = checked !== undefined;
  const [internalChecked, setInternalChecked] = useState(defaultChecked);
  const value = isControlled ? checked : internalChecked;

  const ref = useRef(null);

  // helper to toggle value and call onChange
  function toggle(next) {
    if (disabled) return;
    const newVal = next !== undefined ? next : !value;
    if (!isControlled) setInternalChecked(newVal);
    onChange && onChange(newVal);
  }

  // Support keyboard: Space toggles (standard for switches) and Enter toggles for some UAs
  function onKeyDown(e) {
    if (disabled) return;
    if (e.key === " " || e.key === "Spacebar" || e.key === "Enter") {
      e.preventDefault(); // prevent page scroll on Space
      toggle();
    }
  }

  return (
    // role="switch" + aria-checked exposes switch semantics to assistive tech.
    // tabIndex=0 makes it focusable; button could be used too but role="switch" is explicit.
    <div
      id={id}
      ref={ref}
      role="switch"
      tabIndex={disabled ? -1 : 0}
      aria-checked={value}
      aria-label={ariaLabel}
      aria-labelledby={ariaLabelledby}
      onClick={() => toggle()}
      onKeyDown={onKeyDown}
      aria-disabled={disabled}
      // simple inline styles for demo; in prod use CSS classes.
      style={{
        display: "inline-flex",
        alignItems: "center",
        width: 48,
        height: 28,
        background: value ? "#4caf50" : "#ccc",
        borderRadius: 16,
        padding: 4,
        cursor: disabled ? "not-allowed" : "pointer",
      }}
    >
      <div
        // visual handle
        style={{
          width: 20,
          height: 20,
          background: "#fff",
          borderRadius: "50%",
          transform: value ? "translateX(20px)" : "translateX(0)",
          transition: "transform 120ms",
        }}
      />
    </div>
  );
}

export default ToggleSwitch;

window.addEventListener('keydown', e => console.log('keydown', e.key, e.code, e.keyCode));
window.addEventListener('focusin', e => console.log('focusin', e.target));

/* Example structure */
const times = new Float64Array(n);
const values = new Float32Array(n);
const metas = new Array(n); // sparse objects only when needed

/* Pointer throttling */
function onPointerMove(e){
  lastEvent = e;
  if(!scheduled) {
    scheduled = true;
    requestAnimationFrame(() => { handlePointer(lastEvent); scheduled = false; });
  }
}