docs: build out full API reference site in apps/docs

14 static pages across 3 sections:

Introduction
- /docs/getting-started — quick-start guide with SSE endpoint + React chat example

Core
- /docs/core — Signal, Observable, Channel, Session, Action API reference
- /docs/capability — CapabilityRegistry, all 9 built-in probes, custom probe example
- /docs/policy — PolicyEngine, PermissionPolicy, ConcurrencyPolicy, RateLimitPolicy, ComposedPolicy

Modalities
- /docs/text — TextChannel, streamTokens, accumulateText
- /docs/agent — AgentChannel, AgentStreamFrame types, tool registration, SSE contract
- /docs/audio — AudioChannel, MicrophoneSource, AudioWorkletSink, createVad
- /docs/video — VideoChannel, CameraSource, CanvasSink, camera preview example
- /docs/motion — PointerSource, DeviceOrientationSource, GestureRecognizer (tap/swipe/pinch)

Framework Adapters
- /docs/react — SessionProvider, useSignal, useChannel, useAction, useAgent
- /docs/vue — provideSession, all composables with template examples
- /docs/solid — createSessionProvider, all primitives with JSX examples
- /docs/wc — <muix-session>, <muix-channel> attributes and events

Tooling
- /docs/devtools — SessionInspector, ChannelTracer, <muix-devtools> panel, React usage

Shared: sidebar layout, dark-mode CSS variables, monospace code blocks.
Landing page (/) replaced Turborepo scaffold with MUIX package table.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: bretuobay

apps/docs/app/docs/agent/page.tsx

@@ -0,0 +1,94 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = { title: "@muix/agent" };
+
+export default function AgentPage() {
+  return (
+    <>
+      <h1>@muix/agent</h1>
+      <p style={{ color: "var(--muted)", marginTop: "0.5rem" }}>
+        LLM streaming over SSE/NDJSON with tool-use support. OpenAI-compatible wire format.
+      </p>
+
+      <h2>AgentChannel</h2>
+      <p>
+        Extends <code>Channel&lt;AgentMessage, AgentStreamFrame&gt;</code>.
+        Call <code>sendMessage()</code> (not <code>send()</code>) to start a
+        streaming conversation turn; the method returns an <code>Action</code>{" "}
+        you can cancel mid-stream.
+      </p>
+      <pre>{`import { createAgentChannel } from "@muix/agent";
+
+const channel = createAgentChannel({
+  endpoint: "/api/chat",   // your SSE endpoint
+  // headers: { Authorization: "Bearer ..." },
+});
+
+await channel.open();
+
+const action = channel.sendMessage({
+  role: "user",
+  content: "Summarise the MUIX framework in one paragraph.",
+});
+
+channel.observe().subscribe({
+  next: ({ data: frame }) => {
+    if (frame.type === "delta")   console.log(frame.content);
+    if (frame.type === "done")    console.log("stream finished");
+    if (frame.type === "error")   console.error(frame.content);
+  },
+});
+
+// Cancel mid-stream
+action.cancel();`}</pre>
+
+      <h2>AgentStreamFrame</h2>
+      <table>
+        <thead><tr><th>type</th><th>Meaning</th><th>Fields</th></tr></thead>
+        <tbody>
+          <tr><td><code>delta</code></td><td>Incremental token</td><td><code>content: string</code></td></tr>
+          <tr><td><code>tool_call</code></td><td>Tool invocation request</td><td><code>toolCall: {"{ name, args }"}</code></td></tr>
+          <tr><td><code>tool_result</code></td><td>Tool response (after execution)</td><td><code>content: string</code></td></tr>
+          <tr><td><code>done</code></td><td>Stream completed</td><td><code>finishReason</code></td></tr>
+          <tr><td><code>error</code></td><td>Server-side error</td><td><code>content: string</code></td></tr>
+        </tbody>
+      </table>
+
+      <h2>Tool registration</h2>
+      <pre>{`import { createAgentChannel } from "@muix/agent";
+
+const channel = createAgentChannel({ endpoint: "/api/chat" });
+
+channel.registerTool({
+  name: "get_weather",
+  description: "Get current weather for a city",
+  parameters: {
+    type: "object",
+    properties: {
+      city: { type: "string", description: "City name" },
+    },
+    required: ["city"],
+  },
+  execute: async ({ city }) => {
+    const data = await fetch(\`/api/weather?city=\${city}\`).then(r => r.json());
+    return JSON.stringify(data);
+  },
+});
+
+// AgentChannel handles the tool_calls → execute → tool_result round-trip automatically`}</pre>
+
+      <h2>SSE endpoint contract</h2>
+      <p>
+        Your endpoint must return <code>Content-Type: text/event-stream</code> with
+        OpenAI-compatible delta frames:
+      </p>
+      <pre>{`data: {"choices":[{"delta":{"content":"Hello"}}]}
+
+data: {"choices":[{"delta":{"content":" world"}}]}
+
+data: [DONE]`}</pre>
+
+      <p>NDJSON is also supported — one JSON object per line, no <code>data:</code> prefix.</p>
+    </>
+  );
+}

apps/docs/app/docs/audio/page.tsx

@@ -0,0 +1,80 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = { title: "@muix/audio" };
+
+export default function AudioPage() {
+  return (
+    <>
+      <h1>@muix/audio</h1>
+      <p style={{ color: "var(--muted)", marginTop: "0.5rem" }}>
+        Microphone capture, AudioWorklet playback, and voice activity detection.
+      </p>
+
+      <h2>AudioChannel</h2>
+      <p>
+        Extends <code>Channel&lt;AudioFrame, AudioFrame&gt;</code>. Carries raw
+        PCM data between sources and sinks.
+      </p>
+      <pre>{`import { createAudioChannel } from "@muix/audio";
+
+const ch = createAudioChannel({ sampleRate: 48000, channelCount: 1 });
+await ch.open();`}</pre>
+
+      <h2>AudioFrame</h2>
+      <pre>{`interface AudioFrame {
+  buffer: Float32Array;   // PCM samples in [-1, 1]
+  sampleRate: number;
+  channelCount: number;
+  timestamp: number;      // AudioContext.currentTime
+}`}</pre>
+
+      <h2>MicrophoneSource</h2>
+      <p>
+        Captures audio via <code>getUserMedia</code> and pumps{" "}
+        <code>AudioFrame</code> objects into a channel using an inline{" "}
+        <code>AudioWorkletNode</code> (no deprecated <code>ScriptProcessorNode</code>).
+      </p>
+      <pre>{`import { MicrophoneSource, createAudioChannel } from "@muix/audio";
+
+const channel = createAudioChannel();
+const mic = new MicrophoneSource({
+  echoCancellation: true,
+  noiseSuppression: true,
+});
+
+await channel.open();
+await mic.start(channel);   // acquires getUserMedia
+
+// ... later
+await mic.stop();           // releases the MediaStream`}</pre>
+
+      <h2>AudioWorkletSink</h2>
+      <p>Receives frames from a channel and plays them via <code>AudioContext</code>.</p>
+      <pre>{`import { AudioWorkletSink } from "@muix/audio";
+
+const sink = new AudioWorkletSink();
+await sink.start(channel);
+
+await sink.stop();`}</pre>
+
+      <h2>Voice Activity Detection</h2>
+      <p>
+        <code>createVad</code> wraps a channel observable and annotates each
+        frame with an RMS level and a <code>isSpeech</code> flag. Uses a
+        sliding silence-pad window to avoid rapid toggling.
+      </p>
+      <pre>{`import { createVad } from "@muix/audio";
+
+const vadStream = createVad(channel.observe(), {
+  threshold: 0.01,        // RMS below this = silence
+  silencePadFrames: 10,   // frames of silence before flipping isSpeech → false
+});
+
+vadStream.subscribe({
+  next: ({ frame, vad }) => {
+    console.log(vad.isSpeech, vad.rms.toFixed(3));
+  },
+});`}</pre>
+    </>
+  );
+}

apps/docs/app/docs/capability/page.tsx

@@ -0,0 +1,66 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = { title: "@muix/capability" };
+
+export default function CapabilityPage() {
+  return (
+    <>
+      <h1>@muix/capability</h1>
+      <p style={{ color: "var(--muted)", marginTop: "0.5rem" }}>
+        Browser feature detection with graceful degradation and fallback chains.
+      </p>
+
+      <h2>Core concepts</h2>
+      <ul>
+        <li><strong>probe()</strong> — detect availability without requesting permissions.</li>
+        <li><strong>acquire()</strong> — obtain the native handle (may prompt the user).</li>
+        <li><strong>negotiate()</strong> — try a capability then its fallbacks; return the first available.</li>
+      </ul>
+
+      <h2>CapabilityRegistry</h2>
+      <pre>{`import { createCapabilityRegistry, microphoneCapability } from "@muix/capability";
+
+const registry = createCapabilityRegistry();
+registry.register(microphoneCapability);
+
+const status = await registry.probe("media:microphone");
+// "available" | "unavailable" | "degraded" | "denied" | "unknown"
+
+const { descriptor, status: s } = await registry.negotiate("media:microphone");
+const stream = await descriptor.acquire();   // MediaStream
+await descriptor.release(stream);`}</pre>
+
+      <h2>Built-in probes</h2>
+      <table>
+        <thead><tr><th>ID</th><th>Export</th><th>Returns</th></tr></thead>
+        <tbody>
+          <tr><td><code>media:microphone</code></td><td><code>microphoneCapability</code></td><td><code>MediaStream</code></td></tr>
+          <tr><td><code>media:camera</code></td><td><code>cameraCapability</code></td><td><code>MediaStream</code></td></tr>
+          <tr><td><code>media:screen</code></td><td><code>screenCaptureCapability</code></td><td><code>MediaStream</code></td></tr>
+          <tr><td><code>speech:synthesis</code></td><td><code>speechSynthesisCapability</code></td><td><code>SpeechSynthesis</code></td></tr>
+          <tr><td><code>speech:recognition</code></td><td><code>speechRecognitionCapability</code></td><td>recognition instance</td></tr>
+          <tr><td><code>webrtc</code></td><td><code>webRTCCapability</code></td><td><code>RTCPeerConnection</code></td></tr>
+          <tr><td><code>xr:immersive-vr</code></td><td><code>immersiveVrCapability</code></td><td>XR session handle</td></tr>
+          <tr><td><code>xr:immersive-ar</code></td><td><code>immersiveArCapability</code></td><td>XR session handle</td></tr>
+          <tr><td><code>xr:inline</code></td><td><code>inlineXrCapability</code></td><td>XR session handle</td></tr>
+        </tbody>
+      </table>
+
+      <h2>Custom capability</h2>
+      <pre>{`import type { CapabilityDescriptor } from "@muix/capability";
+
+const bluetoothCapability: CapabilityDescriptor<BluetoothDevice> = {
+  id: "bluetooth",
+  description: "Web Bluetooth API",
+  probe: async () =>
+    "bluetooth" in navigator ? "available" : "unavailable",
+  acquire: () =>
+    navigator.bluetooth.requestDevice({ acceptAllDevices: true }),
+  release: async () => {},
+  fallbacks: [],
+};
+
+registry.register(bluetoothCapability);`}</pre>
+    </>
+  );
+}

apps/docs/app/docs/core/page.tsx

@@ -0,0 +1,151 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = { title: "@muix/core" };
+
+export default function CorePage() {
+  return (
+    <>
+      <h1>@muix/core</h1>
+      <p style={{ color: "var(--muted)", marginTop: "0.5rem" }}>
+        The foundation — Signal, Observable, Channel, Session, Action, EventBus.
+        Zero runtime dependencies.
+      </p>
+
+      <h2>Signal</h2>
+      <p>
+        A reactive value container. Naming is TC39 Signals proposal-compatible;
+        the implementation is a lightweight own build (~150 lines).
+      </p>
+      <pre>{`import { createSignal, createComputed } from "@muix/core";
+
+const count = createSignal(0);
+count.set(1);
+count.update((n) => n + 1);   // → 2
+count.peek();                  // read without subscribing
+
+const doubled = createComputed(
+  () => count.value * 2,
+  [count],
+);
+
+const sub = count.observe().subscribe({ next: (v) => console.log(v) });
+sub.unsubscribe();`}</pre>
+      <table>
+        <thead><tr><th>Member</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td><code>value</code></td><td>Current value (tracked read)</td></tr>
+          <tr><td><code>peek()</code></td><td>Read without creating a subscription side-effect</td></tr>
+          <tr><td><code>set(v)</code></td><td>Set new value; notifies listeners only if <code>!equals(prev, next)</code></td></tr>
+          <tr><td><code>update(fn)</code></td><td>Derive next value from current</td></tr>
+          <tr><td><code>observe()</code></td><td>Returns an <code>Observable&lt;T&gt;</code>; emits current value immediately on subscribe</td></tr>
+        </tbody>
+      </table>
+
+      <h2>Observable</h2>
+      <p>
+        TC39-compatible push stream (~200 lines). Implements{" "}
+        <code>[Symbol.observable]()</code> for RxJS interop.
+      </p>
+      <pre>{`import { Observable } from "@muix/core";
+
+const obs = new Observable<number>((observer) => {
+  observer.next(1);
+  observer.next(2);
+  observer.complete();
+  return () => { /* cleanup */ };
+});
+
+const sub = obs.subscribe({
+  next: (v) => console.log(v),
+  error: (e) => console.error(e),
+  complete: () => console.log("done"),
+});
+
+sub.unsubscribe();`}</pre>
+
+      <h2>Channel</h2>
+      <p>
+        Duplex streaming primitive built on{" "}
+        <code>ReadableStream</code> / <code>WritableStream</code> (WHATWG Streams).
+        Provides native backpressure, pause/resume, and composable piping.
+      </p>
+      <pre>{`import { createChannel } from "@muix/core";
+
+const ch = createChannel<string>({ highWaterMark: 16 });
+await ch.open();
+
+// Write
+await ch.send("hello");
+
+// Observe (non-locking)
+ch.observe().subscribe({ next: (frame) => console.log(frame.data) });
+
+// Pipe through a TransformStream
+const upper = ch.pipe(new TransformStream({
+  transform: (chunk, ctrl) => ctrl.enqueue(chunk.toUpperCase()),
+}));
+
+ch.pause();   // backpressure
+ch.resume();
+await ch.close();`}</pre>
+      <table>
+        <thead><tr><th>Member</th><th>Description</th></tr></thead>
+        <tbody>
+          <tr><td><code>status</code></td><td><code>ReadonlySignal&lt;ChannelStatus&gt;</code> — <code>idle | open | paused | closed | errored</code></td></tr>
+          <tr><td><code>source.readable</code></td><td>WHATWG <code>ReadableStream&lt;ChannelFrame&lt;Out&gt;&gt;</code></td></tr>
+          <tr><td><code>sink.writable</code></td><td>WHATWG <code>WritableStream&lt;ChannelFrame&lt;In&gt;&gt;</code></td></tr>
+          <tr><td><code>send(data)</code></td><td>Enqueue a frame; awaits if paused</td></tr>
+          <tr><td><code>observe()</code></td><td>Non-locking Observable over outbound frames</td></tr>
+          <tr><td><code>pipe(transform)</code></td><td>Returns a new downstream Channel</td></tr>
+        </tbody>
+      </table>
+
+      <h2>Session</h2>
+      <p>
+        A lifecycle container that owns channels and dispatches actions.
+      </p>
+      <pre>{`import { createSession } from "@muix/core";
+
+const session = createSession({ id: "chat" });
+await session.start();
+
+const ch = session.addChannel<string>("messages");
+await ch.open();
+
+const action = session.dispatch({
+  id: "fetch-summary",
+  execute: async function* (signal) {
+    yield { type: "progress", percent: 50 };
+    return "done";
+  },
+});
+
+await session.suspend();
+await session.resume();
+await session.terminate();`}</pre>
+
+      <h2>Action</h2>
+      <p>
+        Cancellable async unit of work. Uses <code>AbortSignal</code> for
+        cancellation. Named <code>toPromise()</code> (not <code>.then()</code>)
+        to avoid the JavaScript thenable trap.
+      </p>
+      <pre>{`const action = session.dispatch({
+  id: "my-action",
+  execute: async function* (signal) {
+    for (let i = 0; i < 10; i++) {
+      if (signal.aborted) return;
+      yield { type: "progress", percent: i * 10 };
+    }
+    return "result";
+  },
+});
+
+// Reactive status
+action.status.observe().subscribe({ next: console.log });
+
+action.cancel("user cancelled");
+const result = await action.toPromise();`}</pre>
+    </>
+  );
+}