refactor(docs): reimplement interactive demos in React, delete vendored JS

.pre-commit-config.yaml

@@ -70,3 +70,17 @@ repos:
         language: system
         files: ^dashboard/src/
         pass_filenames: false
+
+      - id: docs-lint
+        name: docs lint (biome)
+        entry: bash -c 'cd docs && pnpm exec biome ci app/'
+        language: system
+        files: ^docs/(app/|biome\.json)
+        pass_filenames: false
+
+      - id: docs-typecheck
+        name: docs typecheck (react-router typegen + tsc)
+        entry: bash -c 'cd docs && pnpm run typecheck'
+        language: system
+        files: ^docs/(app/|tsconfig\.json|package\.json)
+        pass_filenames: false

docs/app/app.css

@@ -8,5 +8,6 @@
 @import "./styles/changelog.css";
 @import "./styles/diagrams.css";
 @import "./styles/landing.css";
+@import "./styles/demos.css";
 @import "./styles/shiki.css";
 @import "./styles/sdk.css";

docs/app/components/demos/index.ts

@@ -0,0 +1,3 @@
+export { useRafLoop, useReducedMotion } from "./lib";
+export { DEMO_COMPONENTS, demoComponent } from "./registry";
+export type { DemoId, DemoProps } from "./types";

docs/app/components/demos/lib/index.ts

@@ -0,0 +1,2 @@
+export { useRafLoop } from "./use-raf-loop";
+export { useReducedMotion } from "./use-reduced-motion";

docs/app/components/demos/lib/use-raf-loop.ts

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * Run `callback` once per animation frame while `active` is true, passing the
+ * high-resolution timestamp. The loop is fully torn down (no dangling frame)
+ * when `active` flips false or the component unmounts, so a closed demo modal
+ * never leaves a RAF running.
+ *
+ * `callback` is held in a ref, so a demo can pass a fresh closure each render
+ * without restarting the loop.
+ */
+export function useRafLoop(
+  callback: (now: number) => void,
+  active: boolean,
+): void {
+  const cbRef = useRef(callback);
+  cbRef.current = callback;
+
+  useEffect(() => {
+    if (!active) return;
+    let frame = 0;
+    const tick = (now: number) => {
+      cbRef.current(now);
+      frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [active]);
+}

docs/app/components/demos/lib/use-reduced-motion.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+const QUERY = "(prefers-reduced-motion: reduce)";
+
+/**
+ * Reactively tracks the user's reduced-motion preference. Demos use it to render
+ * a single static frame instead of running their animation loop. SSR-safe:
+ * returns `false` until mounted on the client.
+ */
+export function useReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia(QUERY);
+    const update = () => setReduced(mq.matches);
+    update();
+    mq.addEventListener("change", update);
+    return () => mq.removeEventListener("change", update);
+  }, []);
+
+  return reduced;
+}