@valyrianjs/terminal 0.1.1 → 0.2.0

package/docs/core-concepts.md

@@ -1,93 +1,181 @@
 # Core Concepts
 
-This guide explains the package mental model before going into runtime details or the API reference.
+This document explains the mental model for ValyrianJS Terminal. Read it after [Getting Started](./getting-started.md), then use the Cookbook, Primitive Gallery, and interaction guides before opening the API Reference as a lookup document.
 
-## 1. Terminal-First Primitives
+## Primitives
 
-`valyrianjs-terminal` does not render HTML or browser components. Its primitives generate their own terminal nodes, which are then converted into plain text or an ANSI frame.
+ValyrianJS Terminal renders terminal nodes, not HTML. The public primitives are grouped by role:
 
-The core pieces are grouped like this:
+- layout: `Screen`, `Box`, `View`, `Pane`, `Split`, `Fixed`, `Overlay`, `FocusScope`, `Table`, `Row`, `Td`
+- content: `Text`, `LogView`
+- interaction: `Input`, `Editor`, `Button`, `List`, `ScrollView`
 
-- layout: `Screen`, `Box`, `View`, `Text`, `Table`, `Row`, `Td`
-- interaction: `Input`, `Button`, `List`, `ScrollView`
+`Screen` is the usual root. `Box`, `View`, `Pane`, and `Split` compose rows and columns. See [Primitive Gallery](./primitive-gallery.md) for a practical map of every primitive and complete mini apps such as [`examples/docs/primitive-layout-shell.tsx`](../examples/docs/primitive-layout-shell.tsx), which runs with `bun examples/docs/primitive-layout-shell.tsx` and exits with `Ctrl+C`. `Fixed` reserves top, bottom, left, or right regions when it is a direct child of `Screen` or `Pane`. `Overlay` draws a clipped region over the current frame.
 
-Think of it as a text UI DSL, not as a visual adaptation of the DOM.
+`Screen`, `Box`, `View`, `Pane`, and `Split` use block-like layout defaults inside a render or session context. `Box`, `View`, and `Pane` take available width by default and keep content height by default. `Split` takes the available render area by default because it needs both axes to divide cells. Explicit numeric `width` and `height` always win. Use `fill` when a block surface should consume the full available height instead of stacking at content height.
 
-## 2. Two Working Modes
+## Static render vs mounted session
 
-There are two main entrypoints:
+There are two main entry points:
 
-- `renderTerminal()` to generate plain text from a terminal tree
-- `mountTerminal()` to create an interactive session with focus, keyboard, mouse, and optional writes to streams
+- `renderTerminal()` returns plain text for a terminal tree.
+- `mountTerminal()` creates a `TerminalSession` with focus, dispatch, output, lifecycle, and optional stream integration.
 
-Simple rule:
+Use `renderTerminal()` for static output, examples, and snapshots. Use `mountTerminal()` when a UI needs interaction or repeated renders.
 
-- if you only want to inspect content, use `renderTerminal()`
-- if you need interaction or a live runtime, use `mountTerminal()`
+Related example: [`examples/docs/hello.tsx`](../examples/docs/hello.tsx). Run it with `bun examples/docs/hello.tsx`, press `Enter` for details, and quit with `Ctrl+C`.
 
-## 3. State Lives Outside the Library
+```tsx
+import { Screen, Text, renderTerminal } from "@valyrianjs/terminal";
 
-The library renders whatever your UI function returns with the current state. It does not manage an application store for you.
+const output = renderTerminal(
+  <Screen title="Static">
+    <Text>Hello terminal</Text>
+  </Screen>
+);
 
-That means:
+console.log(output);
+```
 
-- your handlers mutate external state
-- `mountTerminal()` re-evaluates the render function
-- `session.update()` is only needed when you mutated state outside a handler that already triggers a rerender
+## State lives outside the renderer
 
-## 4. `id` Is the Key to Interaction
+Keep application state in your app layer. The renderer turns the tree returned by your function into terminal output using the state your app provides.
 
-Interactive nodes can render without an `id`, but you lose much of the programmatic control.
+Related example: [`examples/docs/component-composition.tsx`](../examples/docs/component-composition.tsx). Run it with `bun examples/docs/component-composition.tsx`, switch cards with `N/P`, and quit with `Ctrl+C`.
 
-You need a stable `id` if you want to:
+```tsx
+import { Button, Screen, Text, mountTerminal } from "@valyrianjs/terminal";
 
-- focus with `session.focus(id)`
-- activate with `session.click(id)`
-- participate in coordinate-based hitboxes
-- get consistent focus and navigation flows
+const state = { count: 0 };
 
-Practical recommendation: give an `id` to every `Input`, `Button`, `List`, and `ScrollView` that will live beyond a trivial test.
+function App() {
+  return (
+    <Screen title="Counter">
+      <Text>Count: {state.count}</Text>
+      <Button id="increment" onpress={() => {
+        state.count += 1;
+      }}>
+        Increment
+      </Button>
+    </Screen>
+  );
+}
 
-## 5. Focus and Hitboxes
+const session = mountTerminal(<App />);
 
-The session computes hitboxes from the current rendered frame. This enables two kinds of interaction:
+session.focus("increment");
+session.dispatchKey("ENTER");
 
-- by identifier: `focus(id)`, `click(id)`
-- by coordinates: `focusAt(x, y)`, `clickAt(x, y)`
+console.log(session.output());
+session.destroy();
+```
 
-Sequential focus also comes from the current tree:
+For larger UIs, Valyrian state modules can hold shared state outside the terminal tree. `createPulseStore` is useful when named transitions make state changes clearer.
 
-- `focusNext()`
-- `focusPrev()`
-- `dispatchKey("TAB")`
-- `dispatchKey("SHIFT_TAB")`
+Related example: [`examples/docs/employees-list.tsx`](../examples/docs/employees-list.tsx). Run it with `bun examples/docs/employees-list.tsx`, choose a person with `J/K` or arrows, and quit with `Ctrl+C`.
 
-If the tree changes, focus order and geometry change as well.
+```tsx
+import { createPulseStore } from "valyrian.js/pulses";
+import { Button, Screen, Text, mountTerminal } from "@valyrianjs/terminal";
 
-## 6. Plain Output vs ANSI Output
+const counter = createPulseStore(
+  { count: 0 },
+  {
+    increment(state) {
+      state.count += 1;
+    }
+  }
+);
 
-The package works with two useful representations:
+function App() {
+  return (
+    <Screen title="Pulse store">
+      <Text>Count: {counter.state.count}</Text>
+      <Button id="increment" onpress={() => counter.increment()}>
+        Increment
+      </Button>
+    </Screen>
+  );
+}
 
-- plain output: returned by `renderTerminal()` and `session.output()`
-- ANSI output: returned by `session.ansiOutput()` and, if you enable `ansi: true`, also written to `stdout`
+const session = mountTerminal(<App />);
 
-Use plain output for snapshots and tests. Use ANSI when you need cursor control, visual spans, focus, or integration with a real terminal.
+session.focus("increment");
+session.dispatchKey("ENTER");
 
-## 7. Streams and Cleanup
+console.log(session.output());
+session.destroy();
+```
 
-`mountTerminal()` can work without streams, but if you connect `stdin` and `stdout` the session enters real runtime mode.
+If components read Valyrian reactive state, the terminal refreshes when that state changes. Call `session.update()` for non-reactive state or for an explicit manual refresh.
 
-When you mount with `stdin`:
+## Valyrian.js modules as app-layer state and workflow
 
-- the session listens for `data`
-- it tries to enable raw mode if the stream supports it
-- it tries to restore it when you call `destroy()`
+Valyrian.js modules in terminal apps stay in the app layer. The terminal adapter renders terminal nodes, handles focus, dispatches input, and exposes session output. Your app still owns routing choices, command design, data loading, persistence, and state transitions.
 
-That is why `destroy()` is not optional when you connect real streams.
+Use `valyrian.js/pulses` and `valyrian.js/flux-store` for shared state, `valyrian.js/forms` for canonical input state, `valyrian.js/request` and `valyrian.js/query` for API and cached reads, `valyrian.js/tasks` for async actions, `valyrian.js/translate` and `valyrian.js/money` for user-facing formatting, and `valyrian.js/native-store` plus `valyrian.js/utils` for local settings and helper logic. When async work changes Valyrian reactive state read by components, the terminal refreshes automatically.
 
-## 8. Where to Go Next
+Read the dedicated guide at [`docs/valyrian-modules.md`](./valyrian-modules.md) for terminal-specific module patterns. Related complete demos: **Operations Workbench** ([`examples/docs/module-state-workbench.tsx`](../examples/docs/module-state-workbench.tsx)), **API Operations Dashboard** ([`examples/docs/module-api-dashboard.tsx`](../examples/docs/module-api-dashboard.tsx)), and **Billing/Settings Wizard** ([`examples/docs/module-form-workflow.tsx`](../examples/docs/module-form-workflow.tsx)). Run them with `bun examples/docs/module-state-workbench.tsx`, `bun examples/docs/module-api-dashboard.tsx`, or `bun examples/docs/module-form-workflow.tsx`, try the keys shown in each footer, and quit with `Ctrl+C`.
 
-- `docs/interaction-model.md` explains what each interactive primitive does
-- `docs/session-runtime.md` explains lifecycle, streams, clipboard, coordinates, and mouse support
-- `docs/cookbook.md` shows short recipes for common tasks
-- `docs/api-reference.md` works as a point reference
+## Stable ids and focus
+
+Interactive nodes can render without an `id`, but stable ids are required for most programmatic interaction.
+
+Use stable ids when you need:
+
+- `session.focus(id)`
+- `session.click(id)`
+- `focusAt(x, y)` or `clickAt(x, y)` to resolve a hitbox consistently
+- keyboard traversal with predictable focus order
+
+Practical rule: give every long-lived `Input`, `Editor`, `Button`, `List`, and `ScrollView` an `id`.
+
+Focus belongs to the `TerminalSession`; app state remains yours. `FocusScope` can bound sequential traversal inside a local group, and `Overlay trapFocus` can keep traversal inside an overlay while it is present.
+
+## Styling and visual states
+
+Use `theme.styles` for named recipes with hex colors, border, and padding. The default theme already gives `Button`, `Input`, and `List` app-like base, focus, selection, current, hover, loading, and disabled styles, so `<Button><Text>Ok</Text></Button>` renders as a styled control without per-instance chrome. When a primitive has a matching `<element>.base` recipe, the renderer applies it automatically before instance styles. Components still use `style` for their base recipe, `styles` to map visual states to recipes, and `state` when the app owns a visual status. Raw span serialization tokens belong to low-level renderer integrations; normal styling uses semantic styles and hex colors.
+
+Related example: [`examples/docs/style-system.tsx`](../examples/docs/style-system.tsx). Run it with `bun examples/docs/style-system.tsx`, try `Tab`, `Enter`, and `W`, and quit with `Ctrl+C`.
+
+Common states include `focus`, `hover`, `disabled`, and `loading`. Controls can use `pressed`, `checked`, `unchecked`, and `indeterminate`. Navigation can use `selected`, `current`, `expanded`, and `collapsed`. Entry fields can use `invalid`, `valid`, `readonly`, `placeholder`, `selection`, `editing`, and `submitted`. Content can use `empty`, `error`, `warning`, `success`, and `muted`. Pointer-style composition can use `dragging`, `dropTarget`, and `capturing`.
+
+Use `style={{ background: "#111111" }}` or a theme recipe to fill a surface. `margin` is not included; compose spacing with layout, padding, and explicit text when needed.
+
+## Plain text vs ANSI output
+
+The package exposes two output representations:
+
+- plain text: `renderTerminal()` and `session.output()`
+- ANSI output: `session.ansiOutput()` and app-runtime `stdout` writes
+
+Plain text belongs to `renderTerminal()`, `session.output()`, snapshots, and scripted checks. ANSI output is for runtime integration when a terminal needs cursor movement or style spans.
+
+Keep ordinary rendered content as text. Do not build normal app behavior by placing escape sequences in `Text`, input values, list rows, or log entries. Use semantic spans, themes, and the documented runtime output paths instead.
+
+Style borders are opt-in through style recipes. Plain output remains readable, and ANSI output applies style spans when supported.
+
+## Cleanup and lifecycle
+
+`mountTerminal()` can run without streams, which is useful for examples and scripted interaction. When you connect real streams, cleanup matters.
+
+The session lifecycle is:
+
+1. mount with `mountTerminal()`
+2. read `output()` or `ansiOutput()`
+3. dispatch input or mutate state
+4. call `update()` when needed
+5. call `destroy()` when finished
+
+When `stdin` is connected, the session may attach listeners, enable raw mode when supported, and resume the stream. `destroy()` removes listeners and restores terminal state where the connected streams support it.
+
+Connected streams follow terminal and runtime capabilities. Use [Session Runtime](./session-runtime.md) when integrating with `stdin`, `stdout`, resize events, clipboard adapters, or mouse input.
+
+## Where to go next
+
+- [Cookbook](./cookbook.md) for practical recipes.
+- [Primitive Gallery](./primitive-gallery.md) for choosing and composing public terminal primitives.
+- [Interaction Model](./interaction-model.md) for focus, keys, mouse, and event payloads.
+- [Session Runtime](./session-runtime.md) for common usage and advanced host integration.
+- [Valyrian Modules](./valyrian-modules.md) for terminal app patterns with Valyrian.js modules.
+- [API Reference](./api-reference.md) for props and session methods.

package/docs/getting-started.md

@@ -1,148 +1,267 @@
 # Getting Started
 
-This guide covers the minimum happy path to get started with `valyrianjs-terminal`.
+This guide creates a first functional terminal UI. You will configure JSX, create `main.tsx`, render a static frame, then mount an interactive session.
 
-## 1. Install the Packages
+## What you will build
+
+You will build a small note UI with:
+
+- a static render path for snapshots or one-off output
+- an interactive input path for keyboard-driven sessions
+- a simple bridge from local state to Valyrian state modules when the UI grows
+
+## Install
 
 ```bash
-npm install valyrianjs-terminal valyrian.js
+npm install @valyrianjs/terminal valyrian.js
 ```
 
-## 2. Start with Static Rendering
+## Configure JSX
 
-First validate layout and content without streams or the interactive runtime.
+Add this JSX config to your TypeScript configuration so TSX files can use Valyrian's automatic JSX runtime:
 
-```tsx
-/** @jsx v */
-/** @jsxFrag v.fragment */
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "valyrian.js"
+  }
+}
+```
+
+Manual `v(...)` nodes still work, but the examples below use TSX.
 
-import { v } from "valyrian.js";
-import { Screen, Text, renderTerminal } from "valyrianjs-terminal";
+## Create `main.tsx`
+
+Create `main.tsx` with a render-only first pass:
+
+```tsx
+import { Screen, Text, renderTerminal } from "@valyrianjs/terminal";
 
 const output = renderTerminal(
-  <Screen title="Status">
+  <Screen title="First terminal UI">
     <Text>Hello terminal</Text>
-    <Text>Status: ok</Text>
+    <Text>Status: ready</Text>
   </Screen>
 );
 
 console.log(output);
 ```
 
-Use this path when you want to:
+## Run it
 
-- generate snapshots
-- validate layout
-- test plain output without connecting `stdin` or `stdout`
+Use your TypeScript runner of choice for the run command. With Bun:
 
-## 3. Move to a Minimal Interactive Session
+```bash
+bun run main.tsx
+```
 
-Once you need text editing, focus management, or keyboard handling, switch to `mountTerminal()`.
+Expected plain output:
 
-```tsx
-/** @jsx v */
-/** @jsxFrag v.fragment */
+```text
+First terminal UI
+Hello terminal
+Status: ready
+```
+
+## Static rendering with `renderTerminal`
+
+Use `renderTerminal()` for deterministic plain-text output:
+
+- snapshots
+- examples in docs
+- layout checks
+- non-interactive command output
+
+This path fits snapshots, documentation examples, layout checks, and non-interactive command output. Move to `mountTerminal()` when the experience needs focus, keyboard input, clipboard behavior, mouse behavior, or repeated renders.
+
+## Interactive sessions with `mountTerminal`
 
-import { v } from "valyrian.js";
-import { Button, Input, Screen, Text, mountTerminal } from "valyrianjs-terminal";
+Switch to `mountTerminal()` when the UI needs focus, keyboard input, clipboard behavior, mouse behavior, or repeated renders.
+
+Replace `main.tsx` with this interactive version:
+
+Full example: [`examples/docs/interactive-note.tsx`](../examples/docs/interactive-note.tsx). Run it with `bun examples/docs/interactive-note.tsx`, type a note, press `Enter` to save, and quit with `Ctrl+C`.
+
+```tsx
+import { Button, Input, Screen, Text, mountTerminal } from "@valyrianjs/terminal";
 
 const state = { value: "", saved: "" };
 
-const session = mountTerminal(() => (
-  <Screen title="Quick Note">
-    <Input
-      id="note"
-      value={state.value}
-      placeholder="Write a quick note"
-      onchange={(event) => {
-        state.value = event.value;
-      }}
-      onsubmit={(event) => {
-        state.saved = event.value;
-      }}
-    />
-    <Button
-      id="save"
-      onpress={() => {
-        state.saved = state.value;
-      }}
-    >
-      Save
-    </Button>
-    <Text>{state.saved || "Nothing saved yet"}</Text>
-  </Screen>
-));
+function App() {
+  return (
+    <Screen title="Quick note">
+      <Input
+        id="note"
+        value={state.value}
+        placeholder="Write a quick note"
+        onchange={(event) => {
+          state.value = event.value;
+        }}
+        onsubmit={(event) => {
+          state.saved = event.value;
+        }}
+      />
+      <Button
+        id="save"
+        onpress={() => {
+          state.saved = state.value;
+        }}
+      >
+        Save
+      </Button>
+      <Text>{state.saved || "Nothing saved yet"}</Text>
+    </Screen>
+  );
+}
+
+const session = mountTerminal(<App />);
 
 session.focus("note");
 session.dispatchKey("H");
 session.dispatchKey("i");
+session.dispatchKey("ENTER");
 
 console.log(session.output());
+session.destroy();
 ```
 
-Practical rule: give stable `id` values to `Input`, `Button`, `List`, and `ScrollView` if you want to use focus, coordinates, or programmatic interaction.
+This example uses programmatic key dispatch for a complete first project. In a real terminal session, pass compatible `stdin` and `stdout` options and call `destroy()` when the session is done.
 
-## 4. Understand the Minimum Lifecycle
+For styled surfaces and visual states, run `bun examples/docs/style-system.tsx`, try `Tab`, `Enter`, and `W`, and quit with `Ctrl+C`; or open [`examples/docs/style-system.tsx`](../examples/docs/style-system.tsx). For responsive columns and rows, run `bun examples/docs/responsive-split.tsx`, resize the terminal to change the layout, and quit with `Ctrl+C`; or open [`examples/docs/responsive-split.tsx`](../examples/docs/responsive-split.tsx).
 
-The session does not store your application state; it re-evaluates the render function with the current external state.
+## Add state when the UI grows
 
-```tsx
-/** @jsx v */
-/** @jsxFrag v.fragment */
+Small examples can use local state. As the UI grows, keep application state in your app layer and use Valyrian state modules such as `createPulseStore` when named transitions fit your app.
+
+Related example: [`examples/docs/component-composition.tsx`](../examples/docs/component-composition.tsx). Run it with `bun examples/docs/component-composition.tsx`, switch cards with `N/P`, and quit with `Ctrl+C`.
 
-import { v } from "valyrian.js";
-import { Screen, Text, mountTerminal } from "valyrianjs-terminal";
+```tsx
+import { createPulseStore } from "valyrian.js/pulses";
+import { Button, Screen, Text, mountTerminal } from "@valyrianjs/terminal";
+
+const counter = createPulseStore(
+  { count: 0 },
+  {
+    increment(state) {
+      state.count += 1;
+    }
+  }
+);
 
-const state = { count: 0 };
+function App() {
+  return (
+    <Screen title="Counter">
+      <Text>Count: {counter.state.count}</Text>
+      <Button id="increment" onpress={() => counter.increment()}>
+        Increment
+      </Button>
+    </Screen>
+  );
+}
 
-const session = mountTerminal(() => (
-  <Screen>
-    <Text>Count: {state.count}</Text>
-  </Screen>
-));
+const session = mountTerminal(<App />);
 
-state.count += 1;
-session.update();
+session.focus("increment");
+session.dispatchKey("ENTER");
 
 console.log(session.output());
 session.destroy();
 ```
 
-Quick summary:
+ValyrianJS Terminal renders the current state and reports events while your app layer owns product state, routing, and workflow choices.
 
-- `output()` returns the current frame as plain text
-- `ansiOutput()` returns the current frame as full ANSI output
-- `update()` re-evaluates the render function
-- `destroy()` removes listeners and cleans up `stdin` when applicable
+## Compose reusable components
 
-## 5. When to Connect Streams
+Terminal UIs are regular Valyrian component trees. Extract small components when a screen repeats a pattern, pass scalar props for simple labels, pass object props for domain rows, and render arrays as lists of components.
 
-Connect `stdin`, `stdout`, and `ansi: true` only when you are ready to run a real terminal UI.
+Full example: [`examples/docs/component-composition.tsx`](../examples/docs/component-composition.tsx). Run it with `bun examples/docs/component-composition.tsx`, switch cards with `N/P`, and quit with `Ctrl+C`.
 
 ```tsx
-/** @jsx v */
-/** @jsxFrag v.fragment */
+import { Screen, Text, mountTerminal } from "@valyrianjs/terminal";
 
-import { v } from "valyrian.js";
-import { Screen, Text, mountTerminal } from "valyrianjs-terminal";
+function StatusBadge() {
+  return <Text>Status: Ready</Text>;
+}
 
-const session = mountTerminal(() => (
-  <Screen title="Live App">
-    <Text>Streaming to the terminal</Text>
-  </Screen>
-), {
-  stdin: process.stdin,
-  stdout: process.stdout,
-  ansi: true
-});
+function Greeting({ name }: { name: string }) {
+  return <Text>Hello, {name}</Text>;
+}
+
+function App() {
+  return (
+    <Screen title="Components">
+      <StatusBadge />
+      <Greeting name="Maya" />
+    </Screen>
+  );
+}
+
+const session = mountTerminal(<App />);
+
+console.log(session.output());
+session.destroy();
 ```
 
-For tests or snapshots, `renderTerminal()` or `mountTerminal()` without streams is usually enough.
+`StatusBadge` demonstrates a component with no props: it always renders the same terminal content. `Greeting` demonstrates a scalar prop: the parent keeps the value and passes a plain string into the reusable component.
+
+Full example: [`examples/docs/employees-list.tsx`](../examples/docs/employees-list.tsx). Run it with `bun examples/docs/employees-list.tsx`, choose a person with `J/K` or arrows, and quit with `Ctrl+C`.
+
+```tsx
+import { Screen, Text, mountTerminal } from "@valyrianjs/terminal";
+
+type EmployeeData = {
+  name: string;
+  role: string;
+};
+
+const employees: EmployeeData[] = [
+  { name: "Ana", role: "Design" },
+  { name: "Luis", role: "Support" },
+  { name: "Maya", role: "Engineering" }
+];
+
+function Employee({ data }: { data: EmployeeData }) {
+  return <Text>{`${data.name} — ${data.role}`}</Text>;
+}
+
+function Employees({ items }: { items: EmployeeData[] }) {
+  return (
+    <>
+      {items.map((employee) => (
+        <Employee data={employee} />
+      ))}
+    </>
+  );
+}
+
+function App() {
+  return (
+    <Screen title="Team">
+      <Employees items={employees} />
+    </Screen>
+  );
+}
+
+const session = mountTerminal(<App />);
+
+console.log(session.output());
+session.destroy();
+```
+
+`Employee data={...}` demonstrates an object prop for a domain row. `Employees items={...}` demonstrates list composition: the parent owns the array and maps each item into a reusable child component.
+
+Use the same composition rules as any declarative terminal tree:
+
+- Treat components as small JSX functions that receive props and return terminal elements.
+- The app owns state, data loading, routing decisions, and effects. When components read Valyrian reactive state, external async changes refresh the terminal automatically. Use `session.update()` for non-reactive state or an explicit manual refresh.
+- Use stable `id` values when focus or programmatic dispatch targets a specific interactive node.
+- Keep terminal-specific behavior in public primitives, props, and events instead of hidden component side effects.
 
-## Next Reading
+## Next steps
 
-- `docs/core-concepts.md`
-- `docs/interaction-model.md`
-- `docs/session-runtime.md`
-- `docs/cookbook.md`
-- `docs/api-reference.md`
+- [Core Concepts](./core-concepts.md) for the package mental model.
+- [Cookbook](./cookbook.md) for practical recipes after the first project.
+- [Interaction Model](./interaction-model.md) for focus, keyboard, mouse, and events.
+- [Session Runtime](./session-runtime.md) for stream and host integration.
+- [API Reference](./api-reference.md) for props, payloads, and session methods.