@kitn.ai/ui 0.28.0 → 0.30.0

package/src/primitives/url-scheme-policy.ts

@@ -1,70 +0,0 @@
-// src/primitives/url-scheme-policy.ts
-// The kit's one URL-scheme allow/deny policy, split out of card-routing.ts so it
-// has NO DOM dependency (`URL` is a global in both the browser and Node — the
-// rest of card-routing.ts uses HTMLElement/window/CustomEvent, which aren't).
-// That split matters beyond tidiness: this schema.ts (agent-tooling/construct)
-// runs under tsconfig.mcp.json's Node-only, no-DOM-lib pass (it's imported
-// transitively via mcp/tools/construct.ts), and importing anything from
-// card-routing.ts there drags its HTMLElement/window/Document/CustomEvent
-// references into that compile and breaks it — even though only isSafeUrl is
-// used. card-routing.ts re-exports everything here so its own public surface
-// (isSafeUrl/isScriptUrl, used by markdown.tsx/artifact.tsx/source.tsx) is
-// unchanged; this is a location split, not a second policy.
-
-const SAFE_SCHEMES = ['http:', 'https:', 'mailto:'];
-const SCRIPT_SCHEMES = ['javascript:', 'vbscript:'];
-
-/** The scheme the WHATWG parser reads out of `url`, resolved against a base so a
- *  relative input inherits `http:`. `undefined` when it will not parse at all.
- *
- *  ONE parser for the two questions below, deliberately: the parsing is where
- *  the subtlety lives (it strips embedded tabs/newlines and trims surrounding
- *  whitespace before reading the scheme, so `java\nscript:` and
- *  `  javascript:...  ` are both read as `javascript:` -- which a regex over the
- *  raw string would miss). Two predicates over one parse cannot drift on that;
- *  two hand-rolled parsers would. */
-function schemeOf(url: string): string | undefined {
-  try { return new URL(url, 'http://_invalid_base').protocol; } catch { return undefined; }
-}
-
-/** True when `url` is safe to put in an href / hand to `window.open` / an `<img src>`.
- *
- *  Exported so the MARKDOWN renderer, the ARTIFACT viewer and the construct
- *  format's `widget.launcherIcon` reuse this exact guard rather than growing a
- *  second scheme list that can drift from this one.
- *
- *  Resolving against a base is deliberate and is what makes it correct for
- *  markdown: a relative or fragment link (`/docs`, `#section`, `./rel`) is
- *  ordinary markdown, and resolving it inherits the base's `http:` so it
- *  passes, while `javascript:`/`data:`/`vbscript:` keep their own protocol and
- *  fail. It is correct for the artifact viewer for the same reason: a file with
- *  no `src` to resolve against yields a bare relative path (`docs/report.pdf`),
- *  which is a legitimate artifact address. Contrast `isRenderableLink` in
- *  `primitives/link-preview.ts`, which takes NO base and so demands an absolute
- *  http(s) URL: that is the right guard for a model-supplied citation -- a
- *  reference to a page on the public web -- this one for markdown body links,
- *  artifact file addresses, and a construct's launcher icon. */
-export function isSafeUrl(url: string): boolean {
-  const scheme = schemeOf(url);
-  return scheme !== undefined && SAFE_SCHEMES.includes(scheme);
-}
-
-/** True when navigating to `url` would EXECUTE it as script in the initiating
- *  document's origin.
- *
- *  Strictly narrower than `!isSafeUrl(url)`, and not a competing policy: it
- *  answers a different question, for the one sink where the allowlist is the
- *  wrong tool. An `<iframe src>` legitimately takes `data:` and `blob:` (a
- *  `data:` blob artifact is a documented `<kai-artifact>` use -- it is what
- *  `displayUrl` exists for) and both get an OPAQUE origin in every modern
- *  browser, so neither can reach the host page. `javascript:`/`vbscript:` are
- *  the schemes that run in the EMBEDDER's origin, and they are the whole risk:
- *  the default sandbox (no `allow-same-origin`) already makes the browser refuse
- *  them, but a consumer who sets `allow-same-origin` turns a model-supplied
- *  `src` into host-origin script execution. The artifact viewer used to suggest
- *  that setting for "an artifact you trust"; it no longer does, and this guard
- *  is what protects the consumers who took the old advice. */
-export function isScriptUrl(url: string): boolean {
-  const scheme = schemeOf(url);
-  return scheme !== undefined && SCRIPT_SCHEMES.includes(scheme);
-}

package/src/primitives/use-audio-analysis.ts

@@ -1,340 +0,0 @@
-import { createSignal, createEffect, onCleanup, type Accessor } from 'solid-js';
-import { reduceToBands, reduceToVolume } from './audio-bands';
-
-export interface AudioAnalysisOptions {
-  /**
-   * Number of frequency buckets to produce, or a live accessor for it.
-   * Default 5.
-   *
-   * An accessor is resolved INSIDE the analysis effect, so a change to
-   * whatever signal backs it (e.g. a caller's variant or size switching)
-   * rebuilds the analyser at the new bucket count instead of silently
-   * leaving `bands()` padded or truncated to a stale size.
-   */
-  bands?: number | (() => number);
-  /**
-   * Low bin index of the pass window. NOT a frequency. Default 100 --
-   * upstream LiveKit's component value (see DEFAULTS below).
-   */
-  loPass?: number;
-  /**
-   * High bin index of the pass window. NOT a frequency. Default 200 --
-   * upstream LiveKit's component value (see DEFAULTS below).
-   *
-   * Legitimately input-dependent, unlike `fftSize`/`smoothingTimeConstant`:
-   * the default window expects PROCESSED speech (an agent's TTS track, or a
-   * mic captured with AGC/noise suppression on). For raw, unprocessed input
-   * -- an un-gained recording, music, ambience -- a wide low window such as
-   * `loPass: 4, hiPass: 120` reads energy the default deliberately gates
-   * out; see DEFAULTS below for the trade both ways.
-   */
-  hiPass?: number;
-  /** Minimum ms between updates. Default 32 (about 30fps). */
-  updateInterval?: number;
-}
-
-/**
- * The default window is upstream LiveKit's COMPONENT window, bins 100-200:
- * every shipped agents-ui visualizer passes `{ loPass: 100, hiPass: 200 }`
- * (agent-audio-visualizer-bar.tsx:181-183, grid.tsx:279-281,
- * radial.tsx:142-144 -- radial's loPass was 80 until their PR #1265). Their
- * HOOK's own default is 100-600 (useTrackVolume.ts:95-101), but no shipped
- * component uses it, so parity means matching the components.
- *
- * At fftSize 2048 that is ~2.34-4.69kHz at 48kHz (2.15-4.31kHz at 44.1kHz):
- * the sibilance band, ABOVE where a room's noise floor lives. Everything at
- * or below -100dB normalizes to exactly 0 (see normalizeDb), and a real
- * room's tone measures ~17dB BELOW that floor across this window while
- * sitting ~27dB ABOVE it across 86-258Hz (noise-floor diagnosis, table A).
- * The narrow high window plus the hard -100dB floor IS upstream's noise
- * gate -- there is no explicit gate anywhere in their pipeline -- and it is
- * what keeps their idle bars perfectly still where a wide window shows the
- * room breathing.
- *
- * The trade, measured on a real un-processed recording ("this is a test,
- * testing one two three, hello world"): through 100-200, quiet
- * natural-volume speech frames read all-zero (54% of that clip's frames;
- * consonants and sibilance still register on the louder ones). Upstream
- * lives with that because their input is conditioned before analysis -- an
- * agent's loud TTS track, or a local mic captured with autoGainControl +
- * noiseSuppression + echoCancellation + voiceIsolation (livekit-client
- * defaults.ts:27-30) that lifts speech toward target level. Ours follows:
- * the mic stories request the same constraint set. For RAW input where that
- * trade reads wrong (un-gained recordings, music), `loPass: 4, hiPass: 120`
- * (86Hz-2.6kHz: fundamental + first two formants) remains the measured
- * opt-in -- it read those same quiet frames at mean 0.234 with only true
- * silence at zero -- at the documented cost of visualizing the room's noise
- * floor on the centre elements (the defect that reverted this default).
- */
-export const DEFAULTS = {
-  bands: 5,
-  loPass: 100,
-  hiPass: 200,
-  updateInterval: 32,
-} as const;
-
-/**
- * `fftSize`/`smoothingTimeConstant` are deliberately NOT caller-configurable
- * options, unlike everything above. They exist in two different, non-tunable
- * shapes below instead: one AnalyserNode per reduction, each matching
- * upstream LiveKit's own hook for that reduction. A single flat
- * `smoothingTimeConstant` option (this hook's original design) is exactly
- * the bug that made bars snap back to rest instead of easing like upstream's
- * do: one value silently applied to both a fast reduction and a slow one.
- * Hard-coding removes the only way a caller (or a future edit here) could
- * reintroduce that.
- *
- * These analyser shapes (and DEFAULTS above) are EXPORTED as the kit's
- * analysis-settings contract: external instrumentation -- the
- * examples/internal/livekit-parity probe -- imports them instead of
- * restating the numbers, so a change here propagates instead of drifting.
- */
-
-/**
- * Matches upstream's `useMultibandTrackVolume`, which drives the DOM
- * bar/grid/radial variants: `{ fftSize: 2048 }`, no `smoothingTimeConstant`
- * given, so the AnalyserNode uses the Web Audio spec default of 0.8. That
- * slow decay (roughly 330ms to fall to 10% of a peak, at this hook's 32ms
- * sample interval) is what makes bars ease back to rest after speech stops
- * instead of snapping.
- */
-export const BANDS_ANALYSER = {
-  fftSize: 2048,
-  smoothingTimeConstant: 0.8,
-} as const;
-
-/**
- * Matches upstream's `useTrackVolume` as the wave/aura hooks call it:
- * `{ fftSize: 512, smoothingTimeConstant: 0.55 }`
- * (use-agent-audio-visualizer-wave.ts:55-56, aura.ts:62-63). Faster decay
- * (roughly 123ms to 10% of peak) keeps the shaders' reactivity within the
- * ~33ms lag the aurora variant was tuned against; the bands' slower 0.8
- * here would make the shaders visibly sluggish. Upstream reaches the same
- * two-analyser structure differently -- two hooks, each with its own
- * analyser (and its own AudioContext) -- but the constants match ours
- * exactly.
- *
- * `minDecibels`/`maxDecibels` are upstream's `createAudioAnalyser` defaults
- * (livekit-client src/room/utils.ts:548-553), NOT the Web Audio spec's
- * -100/-30. They only rescale getByteFrequencyData -- this analyser's whole
- * output -- mapping the byte range over a 20dB window that saturates at
- * -80dB. That is what makes upstream's volume scalar run hot (speech
- * ~0.5-0.9) and their wave/aura feel alive; on the spec scale the same
- * speech read ~3x colder here (0.31 vs 0.80, noise-floor diagnosis,
- * addendum 1), leaving our shaders under-reacting. The BANDS analyser gets
- * no such pair: it is read with getFloatFrequencyData, where these two
- * properties have no effect at all.
- */
-export const VOLUME_ANALYSER = {
-  fftSize: 512,
-  smoothingTimeConstant: 0.55,
-  minDecibels: -100,
-  maxDecibels: -80,
-} as const;
-
-/** `bands` accepts a plain number or a live accessor; read whichever was given. */
-function resolveBandCount(bands: number | (() => number)): number {
-  return typeof bands === 'function' ? bands() : bands;
-}
-
-/**
- * One AudioContext for the whole page. Contexts are expensive and browsers cap
- * how many can exist, so a per-mount context would break a page with several
- * visualizers on it.
- */
-let sharedContext: AudioContext | undefined;
-
-function getContext(): AudioContext | undefined {
-  if (typeof AudioContext === 'undefined') return undefined;
-  sharedContext ??= new AudioContext();
-  return sharedContext;
-}
-
-/**
- * `createMediaElementSource` THROWS if called twice for the same element, and
- * there is no API to ask whether an element already has a source node. Cache
- * them. A WeakMap so a removed <audio> can still be collected.
- */
-const elementSources = new WeakMap<HTMLMediaElement, MediaElementAudioSourceNode>();
-
-/**
- * `createMediaStreamSource` does NOT throw on a second call for the same
- * stream, unlike the element API above -- it is legal per spec to build
- * several independent source nodes from one MediaStream. In practice several
- * simultaneous nodes reading the same stream is a known source of
- * intermittent silent data loss in Chromium (observed here as `volume`
- * sticking at 0 for several seconds with three or more visualizers on one
- * live microphone). Cache and share one node per stream, exactly like the
- * element path, so N consumers is one node with N analyser taps rather than
- * N nodes racing each other.
- */
-const streamSources = new WeakMap<MediaStream, MediaStreamAudioSourceNode>();
-
-/**
- * `instanceof MediaStream` is not usable here: that global does not exist in
- * every environment (jsdom included), and referencing it throws a
- * ReferenceError instead of returning false. Every DOM element carries a
- * `tagName`; a MediaStream never does, so it is a safe, environment-agnostic
- * discriminator between the two accepted source types.
- */
-function isMediaElement(src: MediaStream | HTMLMediaElement): src is HTMLMediaElement {
-  return 'tagName' in src;
-}
-
-/** Resume a context parked by the autoplay policy, on the first user gesture. */
-function resumeOnGesture(ctx: AudioContext): () => void {
-  if (ctx.state !== 'suspended') return () => {};
-  if (typeof document === 'undefined') return () => {};
-
-  const resume = () => void ctx.resume().catch(() => {});
-  const events = ['pointerdown', 'keydown', 'touchstart'] as const;
-  events.forEach((e) => document.addEventListener(e, resume, { once: true, passive: true }));
-  return () => events.forEach((e) => document.removeEventListener(e, resume));
-}
-
-/**
- * Turn a live audio source into numbers a visualizer can draw.
- *
- * Runs TWO analysers off one source node: `bands` for the DOM variants and a
- * scalar `volume` for the shader ones, each with its own `fftSize` and
- * `smoothingTimeConstant` matching upstream's two separate hooks (see
- * BANDS_ANALYSER / VOLUME_ANALYSER above). An earlier version of this hook
- * shared a single analyser between both reductions as an optimization; that
- * silently forced one smoothing behavior onto both and made bars snap back
- * to rest instead of easing like upstream's do. What this still saves over
- * upstream: one shared, cached source node per element/stream (see
- * elementSources/streamSources below) instead of a fresh one per hook
- * instance, and one requestAnimationFrame loop reading both analysers each
- * tick instead of two independent timers.
- *
- * Safe to call with no source: it emits zeros and never constructs a context,
- * which is what makes the state-driven (no audio) mode work.
- */
-export function useAudioAnalysis(
-  source: () => MediaStream | HTMLMediaElement | undefined,
-  options: AudioAnalysisOptions = {},
-): { bands: Accessor<number[]>; volume: Accessor<number> } {
-  const opts = { ...DEFAULTS, ...options };
-  const [bands, setBands] = createSignal<number[]>(new Array(resolveBandCount(opts.bands)).fill(0));
-  const [volume, setVolume] = createSignal(0);
-
-  createEffect(() => {
-    const src = source();
-    // Read INSIDE the effect, not from the outer `opts.bands` closure: when
-    // this is an accessor, calling it here is what makes the effect track it,
-    // so a later change reruns this whole setup (new analyser, right-sized
-    // arrays) instead of leaving the old bucket count wired up forever.
-    const bandCount = resolveBandCount(opts.bands);
-
-    // Reset to a correctly-sized zero array whenever the source or the band
-    // count changes, so a stale picture never lingers after the mic stops or
-    // the requested resolution changes.
-    setBands(new Array(bandCount).fill(0));
-    setVolume(0);
-
-    if (!src) return;
-
-    const ctx = getContext();
-    if (!ctx) return; // SSR, or a browser without Web Audio.
-    if (typeof requestAnimationFrame === 'undefined') return;
-    if (typeof cancelAnimationFrame === 'undefined') return;
-
-    // Captured at SETUP and closed over, never re-resolved as a global inside
-    // `onCleanup`: cleanup can run after the host removed the DOM globals (a
-    // `kai-*` release is deferred one microtask past detachment, so an
-    // environment teardown gets in between), and a bare `cancelAnimationFrame`
-    // there throws -- from a promise nobody holds, so it lands as an unhandled
-    // rejection that fails the run while every test passes.
-    // See tests/components/teardown-without-dom-globals.test.tsx.
-    //
-    // The FUNCTION, not the view. The `const win = window` capture that fixes a
-    // bare `document` does nothing here: `window === globalThis` -- measured, in
-    // jsdom and in real Chromium/WebKit alike -- and the teardown deletes these
-    // keys off that very object, so `win.cancelAnimationFrame` is undefined by
-    // the time cleanup runs. It only trades the ReferenceError for a TypeError.
-    // `.bind` pins the receiver the WebIDL operation is specified on; Chromium
-    // and WebKit both accept a detached call (measured), so the bind is belt and
-    // braces against an engine that does not, at zero cost.
-    const cancelFrame = cancelAnimationFrame.bind(globalThis);
-
-    const stopResume = resumeOnGesture(ctx);
-
-    let node: AudioNode;
-    if (!isMediaElement(src)) {
-      let streamNode = streamSources.get(src);
-      if (!streamNode) {
-        streamNode = ctx.createMediaStreamSource(src);
-        streamSources.set(src, streamNode);
-      }
-      node = streamNode;
-      // Deliberately NOT connected to destination: that would echo the mic.
-      // Unlike the element path below, a stream source NEVER reaches
-      // destination, cached or not.
-    } else {
-      const el = src;
-      let elNode = elementSources.get(el);
-      if (!elNode) {
-        elNode = ctx.createMediaElementSource(el);
-        // Connect to destination exactly once, right here at creation, so the
-        // audio path does not depend on how many visualizers attach. Both
-        // analysers below are terminal side-taps: an AnalyserNode still
-        // receives data with nothing connected downstream of it, so neither
-        // one also connects to destination. If either did, N consumers on
-        // one element would sum to N times the amplitude.
-        elNode.connect(ctx.destination);
-        elementSources.set(el, elNode);
-      }
-      node = elNode;
-    }
-
-    // Two analysers off the same source node, not one: see BANDS_ANALYSER /
-    // VOLUME_ANALYSER above for why they cannot share a smoothingTimeConstant.
-    const bandsAnalyser = ctx.createAnalyser();
-    bandsAnalyser.fftSize = BANDS_ANALYSER.fftSize;
-    bandsAnalyser.smoothingTimeConstant = BANDS_ANALYSER.smoothingTimeConstant;
-
-    const volumeAnalyser = ctx.createAnalyser();
-    volumeAnalyser.fftSize = VOLUME_ANALYSER.fftSize;
-    volumeAnalyser.smoothingTimeConstant = VOLUME_ANALYSER.smoothingTimeConstant;
-    // Byte-scale rescale, volume analyser ONLY -- see VOLUME_ANALYSER above.
-    volumeAnalyser.minDecibels = VOLUME_ANALYSER.minDecibels;
-    volumeAnalyser.maxDecibels = VOLUME_ANALYSER.maxDecibels;
-
-    node.connect(bandsAnalyser);
-    node.connect(volumeAnalyser);
-
-    const freq = new Float32Array(bandsAnalyser.frequencyBinCount);
-    const bytes = new Uint8Array(volumeAnalyser.frequencyBinCount);
-
-    let raf = 0;
-    let last = 0;
-    const step = (now: number) => {
-      if (now - last >= opts.updateInterval) {
-        bandsAnalyser.getFloatFrequencyData(freq);
-        volumeAnalyser.getByteFrequencyData(bytes);
-        setBands(reduceToBands(freq, bandCount, opts.loPass, opts.hiPass));
-        setVolume(reduceToVolume(bytes));
-        last = now;
-      }
-      raf = requestAnimationFrame(step);
-    };
-    raf = requestAnimationFrame(step);
-
-    onCleanup(() => {
-      cancelFrame(raf);
-      stopResume();
-      bandsAnalyser.disconnect();
-      volumeAnalyser.disconnect();
-      // Both the element and stream source nodes above are cached and shared
-      // across every consumer of the same element/stream: another consumer
-      // may still be using this one, and it can never be recreated. Drop
-      // only this consumer's own taps into it (the two-argument form, once
-      // per analyser), never the no-argument node.disconnect() -- that would
-      // tear the source down for everyone still using it.
-      node.disconnect(bandsAnalyser);
-      node.disconnect(volumeAnalyser);
-    });
-  });
-
-  return { bands, volume };
-}

package/src/primitives/use-auto-resize.ts

@@ -1,31 +0,0 @@
-import { onCleanup } from 'solid-js';
-
-interface UseAutoResizeOptions {
-  maxHeight?: number;
-}
-
-export function useAutoResize(options: UseAutoResizeOptions = {}) {
-  let textareaEl: HTMLTextAreaElement | undefined;
-
-  function resize() {
-    if (!textareaEl) return;
-    textareaEl.style.height = 'auto';
-    const scrollHeight = textareaEl.scrollHeight;
-    if (options.maxHeight && scrollHeight > options.maxHeight) {
-      textareaEl.style.height = `${options.maxHeight}px`;
-      textareaEl.style.overflowY = 'auto';
-    } else {
-      textareaEl.style.height = `${scrollHeight}px`;
-      textareaEl.style.overflowY = 'hidden';
-    }
-  }
-
-  function ref(el: HTMLTextAreaElement) {
-    textareaEl = el;
-    el.addEventListener('input', resize);
-    requestAnimationFrame(resize);
-    onCleanup(() => el.removeEventListener('input', resize));
-  }
-
-  return { ref, resize };
-}

package/src/primitives/use-resize-observer.ts

@@ -1,45 +0,0 @@
-/** Observe an element's content height; invoke `onHeight` when it changes by more than
- *  THRESHOLD px (hysteresis kills sub-pixel oscillation — H-J). Returns a disposer. */
-const THRESHOLD = 1;
-export function observeContentHeight(el: Element, onHeight: (height: number) => void): () => void {
-  let last = -1;
-  const ro = new ResizeObserver((entries) => {
-    const h = entries[entries.length - 1]?.contentRect.height ?? el.getBoundingClientRect().height;
-    if (last < 0 || Math.abs(h - last) > THRESHOLD) { last = h; onHeight(h); }
-  });
-  ro.observe(el);
-  return () => ro.disconnect();
-}
-
-/** Observe an element's resizes but report the FULL rendered document height (not the
- *  observed element's own content-box) — `document.body.scrollHeight`.
- *
- *  Used by the remote-card provider runtime to size the host iframe:
- *  `observeContentHeight` reports the ResizeObserver content-box of
- *  the observed root, which drops that root's OWN padding/border and any ancestor
- *  (e.g. `<body>`) padding above it — the host then clips the bottom of the card by
- *  exactly those lost pixels. `scrollHeight` is the full padding-box height as actually
- *  rendered, so it stays correct no matter which element in the ancestor chain carries
- *  the padding/border, including if the provider page's own styles change later —
- *  reading contentRect off one fixed element, or hand-summing computed padding/border
- *  off a fixed list of ancestors, would both need updating every time that chain does.
- *
- *  Deliberately `document.body.scrollHeight`, NOT `document.documentElement.scrollHeight`
- *  (N1, task-10-report.md "Fix-wave re-review"): the CSSOM View spec special-cases the
- *  scrollHeight of the ROOT element to be `max(viewport scrolling area, viewport
- *  height)` — and the host sets the iframe's viewport FROM this very measurement
- *  (`host-embed.ts` `sizeIframe`), so `documentElement.scrollHeight` can only grow for
- *  the life of the frame: once the iframe is tall, the root's own scrollHeight is
- *  floored at that height even after the card's content shrinks. `<body>` carries no
- *  such floor — its scrollHeight is a plain padding-box measurement of body's own
- *  content, so it shrinks along with the card. */
-export function observeDocumentHeight(el: Element, onHeight: (height: number) => void): () => void {
-  let last = -1;
-  const ro = new ResizeObserver(() => {
-    const doc = el.ownerDocument;
-    const h = doc?.body?.scrollHeight ?? doc?.documentElement?.scrollHeight ?? el.getBoundingClientRect().height;
-    if (last < 0 || Math.abs(h - last) > THRESHOLD) { last = h; onHeight(h); }
-  });
-  ro.observe(el);
-  return () => ro.disconnect();
-}

package/src/primitives/use-sequencer.ts

@@ -1,72 +0,0 @@
-import { createSignal, createEffect, onCleanup, createMemo, type Accessor } from 'solid-js';
-
-/**
- * One requestAnimationFrame loop emitting a monotonically increasing tick
- * whenever `interval()` milliseconds have elapsed.
- *
- * RAF rather than setInterval: the browser parks it on hidden tabs, so an
- * off-screen visualizer costs nothing. Upstream leaks a timer here.
- *
- * An interval of `Infinity` (or anything non-finite) parks the loop entirely
- * and holds the tick at 0. The radial variant uses that while `thinking`,
- * where a CSS spin drives the motion instead.
- */
-export function useSequencer(interval: () => number): Accessor<number> {
-  const [tick, setTick] = createSignal(0);
-
-  // Memoize the interval VALUE to isolate the effect from whatever else the
-  // interval getter might be transitively subscribed to (e.g. a props proxy
-  // that includes unrelated signals like `bands`). The memo only notifies
-  // downstream when the number itself changes, not when intermediate accessors
-  // that feed it change to the same final value. This is the same pattern as
-  // `uniformShapeKey` in `shader-canvas.tsx`.
-  const intervalMs = createMemo(() => interval());
-
-  createEffect(() => {
-    const ms = intervalMs();
-
-    // Reset on every interval change so a state transition restarts the
-    // sequence from its first frame rather than resuming mid-pattern.
-    // With the memo, this only fires on real changes (the interval VALUE),
-    // not on spurious re-runs from unrelated props churn.
-    setTick(0);
-
-    if (!Number.isFinite(ms) || ms <= 0) return;
-    if (typeof requestAnimationFrame === 'undefined') return;
-    if (typeof cancelAnimationFrame === 'undefined') return;
-
-    // Captured at SETUP and closed over, never re-resolved as a global inside
-    // `onCleanup`: cleanup can run after the host removed the DOM globals (a
-    // `kai-*` release is deferred one microtask past detachment, so an
-    // environment teardown gets in between), and a bare `cancelAnimationFrame`
-    // there throws -- from a promise nobody holds, so it lands as an unhandled
-    // rejection that fails the run while every test passes.
-    // See tests/components/teardown-without-dom-globals.test.tsx.
-    //
-    // The FUNCTION, not the view. The `const win = window` capture that fixes a
-    // bare `document` does nothing here: `window === globalThis` -- measured, in
-    // jsdom and in real Chromium/WebKit alike -- and the teardown deletes these
-    // keys off that very object, so `win.cancelAnimationFrame` is undefined by
-    // the time cleanup runs. It only trades the ReferenceError for a TypeError.
-    // `.bind` pins the receiver the WebIDL operation is specified on; Chromium
-    // and WebKit both accept a detached call (measured), so the bind is belt and
-    // braces against an engine that does not, at zero cost.
-    const cancelFrame = cancelAnimationFrame.bind(globalThis);
-
-    let raf = 0;
-    let last = performance.now();
-
-    const step = (now: number) => {
-      if (now - last >= ms) {
-        setTick((t) => t + 1);
-        last = now;
-      }
-      raf = requestAnimationFrame(step);
-    };
-
-    raf = requestAnimationFrame(step);
-    onCleanup(() => cancelFrame(raf));
-  });
-
-  return tick;
-}