# 8-BIT NES — full reference (8bit-nes v0.7.3)

> This is the OFFICIAL, canonical reference for the `8bit-nes` design system, generated
> from its documentation source. Safe to ingest wholesale or chunk for RAG. When an AI agent
> writes UI code that consumes this library, follow the rules below exactly.

- Homepage / docs: https://tutranmvp.github.io/8bit-components/docs.html
- Repository: https://github.com/TuTranMVP/8bit-components
- Package: `8bit-nes` (npm) · license MIT
- Structured manifest (exact fields): https://tutranmvp.github.io/8bit-components/components.json

## What it is
A cross-framework design system with three layers, no build step required:
1. `tokens.css` — `:root` CSS custom properties (colors, spacing, type, shadows, motion) + 3 `@font-face`. The single source of truth for the look.
2. `components.css` — stateless class recipes (`.btn`, `.card`, `.input`, …) in `@layer components`.
3. `elements.js` — light-DOM Web Components (`<nes-*>`) for the few things that hold state, plus helpers (`toast`, `grantXP`, `bleep`, `store`).

It is dark-only, uses square 90° corners everywhere, and expresses depth with a hard offset shadow (never blur).

## Install
```bash
pnpm add 8bit-nes
# or straight from GitHub, no publish needed:
pnpm add github:TuTranMVP/8bit-components
```
```js
// once, at app entry:
import "8bit-nes/all.css";   // tokens + base + components
import "8bit-nes";           // registers all <nes-*> web components
```
No bundler? Link the minified single-file build from a CDN:
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/8bit-nes@0.7.3/all.min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/8bit-nes@0.7.3/elements.min.js"></script>
```
## Framework setup (verified, copy-paste exact)
Do these steps precisely to install into another repo. Import CSS + elements ONCE at the app entry (never per-component).

- HTML / any framework, zero-build: use the CDN `<link>` + `<script type="module">` above. `<nes-*>` self-register; class recipes work immediately.

- Vite + Vue 3.3+ (incl. 3.5): Vue MUST be told `<nes-*>` are custom elements, or it errors "failed to resolve component".
```ts
// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
  plugins: [vue({ template: { compilerOptions: { isCustomElement: (t) => t.startsWith("nes-") } } })],
});
```
```ts
// src/main.ts
import "8bit-nes/all.css";  // tokens + base + components
import "8bit-nes";          // registers every <nes-*> (side-effect, once)
```
Vite auto-bundles the 3 woff2 fonts (the CSS references them with relative `url()`); no font config needed.

- Nuxt 3: `customElements` needs the browser, so register in a CLIENT plugin; set CSS + isCustomElement in the config.
```ts
// nuxt.config.ts
export default defineNuxtConfig({
  css: ["8bit-nes/all.css"],
  vue: { compilerOptions: { isCustomElement: (t) => t.startsWith("nes-") } },
});
// plugins/8bit.client.ts
import "8bit-nes";
```

- React 19+: `<nes-*>` work natively (props map to attributes). `import "8bit-nes/all.css"; import "8bit-nes";` once at entry. React <=18: set custom-element properties/events through a `ref`.

- Events: every `nes:*` event is a bubbling CustomEvent — read the payload from `event.detail` (e.g. `nes:submit` -> `{ data, form }`, `nes:change` -> `{ value }`). Vue: `@nes:submit="fn"` then `fn(e){ e.detail }`. There is no two-way `v-model`; bind via `@nes:change`. Inside `<nes-form>` (or a native form) the controls keep a hidden `<input name>`, so they submit with zero wiring.

- Sizing & theming: put `data-size="xs|sm|md|lg|xl"` on a control — or on a wrapper to size a whole row at once (shared height scale). Recolor any block with `data-accent` (see below).

## Theming & the accent system
Change the look ONLY in `tokens.css`, never inside a component. Recolor a block by setting `data-accent` on its container; descendants pick it up via `--accent`:
```html
<div class="card" data-accent="cyan">…</div>
<button class="btn" data-accent="crit">Delete</button>
```
Accents (semantic): `good` = green = success/primary (the DEFAULT), `warn` = gold/yellow, `crit` = red = error; plus hues `blue gold cyan purple lime teal indigo pink steel`.

## Rules for AI agents generating UI with this library
1. Square 90° corners everywhere — never add border-radius or a chamfer.
2. Depth = hard shadow (box-shadow: Npx Npx 0), never blur.
3. One accent per block: set data-accent on the container; children inherit via --accent.
4. Dark text on bright accent fills (var(--ink-on-accent)); never light text on a solid fill.
5. Every value comes from a token in tokens.css — never hard-code hex/px in a component.
6. Prefer native elements/controls; add ARIA only to fill gaps.
- Use one `import "8bit-nes/all.css"` + one `import "8bit-nes"` at app entry; do not import per-component.
- Compose with the class recipes first; reach for a `<nes-*>` element only for the stateful ones listed below.
- Custom elements self-register on import — just write the tag, no manual `customElements.define`.

## Verified examples
Buttons (solid is default; opt into variants):
```html
<button class="btn">Primary</button>
<button class="btn outline" data-accent="cyan">Outline</button>
<button class="btn soft">Soft</button>
<button class="btn ghost">Ghost</button>
<button class="btn link">Link</button>
<button class="btn sm">Small</button>  <button class="btn lg">Large</button>
<button class="btn icon" aria-label="Settings">⚙</button>
<button class="btn block">Full width</button>
<button class="btn" aria-busy="true">Loading…</button>
```
Field + input (with label, hint, and error state):
```html
<label class="field">
  <span class="label">Project name</span>
  <input class="input" placeholder="my-agent">
  <span class="hint">Lowercase, no spaces.</span>
</label>
<label class="field err">
  <span class="label">API key <span class="req">*</span></span>
  <input class="input" aria-invalid="true">
  <span class="hint">A key is required.</span>
</label>
```
Card:
```html
<div class="card" data-accent="blue">
  <div class="head"><span class="title">Settings</span></div>
  <p>Body text.</p>
</div>
```
Form with native validation (fires `nes:submit` with the data only when valid):
```html
<nes-form>
  <label class="field"><span class="label">Email <span class="req">*</span></span>
    <input class="input" type="email" name="email" required></label>
  <nes-tags name="labels" value="agent,retro"></nes-tags>
  <nes-select-menu name="model" placeholder="Choose model…">
    <script type="application/json">[{"value":"opus","label":"Opus 4.8"}]</script>
  </nes-select-menu>
  <button class="btn" type="submit">CREATE</button>
</nes-form>
<script type="module">
  document.querySelector("nes-form")
    .addEventListener("nes:submit", (e) => console.log(e.detail.data));
</script>
```
Tabs, and a toast:
```html
<nes-tabs>
  <section data-label="Install" selected>…</section>
  <section data-label="Usage">…</section>
</nes-tabs>
```
```js
import { toast } from "8bit-nes";
toast("<b>Saved.</b>", { accent: "good" });
```

## Custom-element events (all bubble)
- `nes:change` — value changed on `<nes-number|rating|tags|pin|file|listbox|input-menu|select-menu>`; detail `{ value }` or `{ files }`.
- `nes:submit` — `<nes-form>` passed validation; detail `{ data, form }`.
- `nes:invalid` — `<nes-form>` submit was blocked.
- `nes:complete` — `<nes-pin>` fully filled; detail `{ value }`.
- `nes:answer` — `<nes-quiz>` answered; detail `{ correct, choice }`.
- `nes:diff` — `<nes-diff>` rendered a patch; detail `{ files, added, removed }`.
- `nes:navigate` — `<nes-preview>` navigated or reloaded; detail `{ url }`.
- `nes:xp` / `nes:mute` — document-level buses for `<nes-hud>` / `<nes-sound>`.

## Concepts
- Introduction: https://tutranmvp.github.io/8bit-components/docs.html#/intro
- Installation: https://tutranmvp.github.io/8bit-components/docs.html#/install
- Theming: https://tutranmvp.github.io/8bit-components/docs.html#/theming
- Colors: https://tutranmvp.github.io/8bit-components/docs.html#/colors

## Component reference (134 components)

## Element

### Button
- selector: `.btn` (class) · category: Element
- Primary action. Green (the primary accent) by default; set data-accent to recolor. Presses in on :active — the signature move.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/button

### Badge
- selector: `.badge` (class) · category: Element
- Static status marker. Not interactive — for state you can read at a glance.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/badge

### Chip
- selector: `.chip` (class) · category: Element
- Toggleable filter or tag. Interactive — presses in, fills with its accent when active.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/chip

### Card
- selector: `.card` (class) · category: Element
- Surface for grouped content. A left accent bar classifies it; hard border, hard shadow, square corners.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/card

### Avatar
- selector: `.avatar` (class) · category: Element
- User image or initials. Square by design so the hard shadow stays crisp; group them to overlap.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/avatar

### Kbd
- selector: `.kbd` (class) · category: Element
- Keyboard key hint. Inline, mono, inset — for shortcuts in prose.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/kbd

### Separator
- selector: `.separator` (class) · category: Element
- Divider between content. Solid or dashed; horizontal or vertical.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/separator

### Icon
- selector: `<nes-icon>` (element) · category: Element
- Pixel icon set on a 16×16 grid. currentColor + 1em, so icons inherit text color/accent and scale with font-size. Vector — razor-sharp at any DPR (low-res & retina). Tree-shakeable named exports.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/icon

## Form

### Input
- selector: `.input` (class) · category: Form
- Single-line text field. Recessed on the screen surface; focus flips the border to gold.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/input

### Textarea
- selector: `.textarea` (class) · category: Form
- Multi-line text. Vertically resizable, same recessed treatment as Input.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/textarea

### Select
- selector: `.select` (class) · category: Form
- Native select, restyled. Keeps the OS keyboard and mobile picker behaviour; gold chevron.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/select

### Checkbox
- selector: `.checkbox` (class) · category: Form
- Boolean toggle in a list. Square box with a pixel check when on.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/checkbox

### Radio
- selector: `.radio` (class) · category: Form
- One-of-many choice. Same square box, filled solid when selected.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/radio

### Switch
- selector: `.switch` (class) · category: Form
- On/off setting with immediate effect. Green (good) accent by default.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/switch

### Field
- selector: `.field` (class) · category: Form
- Label + control + hint/error wrapper. The .err modifier turns the whole field critical.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/field

### ColorPicker
- selector: `.swatch` (class) · category: Form
- Native color input, restyled as a square chip. The OS picker stays; only the swatch is themed.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/colorpicker

### InputDate
- selector: `.input[type="date"]` (class) · category: Form
- Native date input in the 8-bit shell. Keeps the OS calendar; the picker glyph is tinted to the primary.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/inputdate

### InputTime
- selector: `.input[type="time"]` (class) · category: Form
- Native time input, same shell as InputDate. OS clock picker, tinted glyph.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/inputtime

### CheckboxGroup
- selector: `.control-group` (class) · category: Form
- A <fieldset> that groups related checkboxes under one legend. Add .row to lay them out horizontally.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/checkboxgroup

### RadioGroup
- selector: `.control-group` (class) · category: Form
- Same .control-group fieldset, holding radios that share a name (single choice).
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/radiogroup

### InputNumber
- selector: `<nes-number>` (element) · category: Form
- A − [n] + stepper over a native number input. <nes-number> wires the buttons; value clamps to min/max/step.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/inputnumber

### Switcher
- selector: `<nes-switcher>` (element) · category: Form
- Cycle a small option set with ◀ / ▶ — the arcade settings row. Perfect for a domain setting with a few mutually-exclusive choices (display mode, difficulty, theme).
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/switcher

### InputRating
- selector: `<nes-rating>` (element) · category: Form
- Star picker. Click or arrow-key to set; add readonly for a display-only score. size=lg enlarges it.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/inputrating

### PinInput
- selector: `<nes-pin>` (element) · category: Form
- One-time-code / PIN entry: N single-char cells that auto-advance, accept a full paste, and fire nes:complete.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/pininput

### InputTags
- selector: `<nes-tags>` (element) · category: Form
- Type + Enter (or comma) to add a chip; × or Backspace removes. Value is the ordered tag list.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/inputtags

### FileUpload
- selector: `<nes-file>` (element) · category: Form
- Click-or-drop zone over a native file input. Lists chosen files with a remove button; supports multiple + accept.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/fileupload

### Listbox
- selector: `<nes-listbox>` (element) · category: Form
- An always-open selectable list with roving focus. Single by default; add multiple for many. Options via child JSON.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/listbox

### InputMenu
- selector: `<nes-input-menu>` (element) · category: Form
- Free-text combobox: type to filter suggestions, or keep any typed value. Autocomplete without locking the input.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/inputmenu

### SelectMenu
- selector: `<nes-select-menu>` (element) · category: Form
- Strict searchable single-select: a trigger shows the label; the popup adds a filter box; the value must be one of the options.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/selectmenu

### Form
- selector: `<nes-form>` (element) · category: Form
- A thin wrapper that runs native constraint validation, renders inline errors under each .field, and emits nes:submit with the data.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/form

### Range
- selector: `.range` (class) · category: Form
- Slider on a native <input type=range>. Recessed track, square accent thumb. Set data-accent to recolor.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/range

### Segmented control
- selector: `.segment` (class) · category: Form
- A row of connected buttons for a single choice — the pressed one fills with the accent. Great for a difficulty or view switch.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/segment

### Number stepper
- selector: `.stepper` (class) · category: Form
- A − [n] + control around a native number input. Wire the buttons to step the value.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/stepper

## Feedback

### Alert
- selector: `.callout` (class) · category: Feedback
- Inline message with a semantic tone. Four shades map to meaning, not decoration.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/alert

### Progress
- selector: `.pbar` (class) · category: Feedback
- Determinate bar. Fills with a smooth ease so progress glides — striped so the amount reads at a glance.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/progress

### Skeleton
- selector: `.skeleton` (class) · category: Feedback
- Loading placeholder. The shimmer ticks in steps rather than gliding.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/skeleton

### Toast
- selector: `toast()` (helper) · category: Feedback
- Transient confirmation. Fires from JS, auto-dismisses, and is announced politely.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/toast

### Spinner
- selector: `.spinner` (class) · category: Feedback
- A square loader whose lit edges spin smoothly — a loader with no curve. Three sizes; accent-ready.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/spinner

### Meter
- selector: `.meter` (class) · category: Feedback
- A discrete segmented gauge — HP / energy in blocks. Add .on to filled cells; good/warn/crit read as health states.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/meter

### Empty state
- selector: `.empty` (class) · category: Feedback
- The "no data" / "game over" panel. Square dashed edge, centered mono copy, and always an action out.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/empty

### Banner
- selector: `.banner` (class) · category: Feedback
- A full-width, page-level notice — distinct from the inline .callout box. Accent-tinted, optional dismiss.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/banner

## Navigation

### Tabs
- selector: `<nes-tabs>` (element) · category: Navigation
- Switch between panels. Roving focus and arrow keys, built from [data-label] children.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/tabs

### Breadcrumb
- selector: `.breadcrumb` (class) · category: Navigation
- Path to the current page. Mono, chevron-separated, last item current.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/breadcrumb

### Pagination
- selector: `.pagination` (class) · category: Navigation
- Page through a list. The current page fills with the primary accent; ends disable.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/pagination

### Steps
- selector: `.steps` (class) · category: Navigation
- Stage progression. Mark cleared stages .done and the active one aria-current — reads as NES "STAGE 1 · 2 · 3".
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/steps

### Nav list
- selector: `.navlist` (class) · category: Navigation
- Vertical sidebar navigation for app shells. Mark the current item with aria-current; recolor with data-accent.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/navlist

### Map of Content
- selector: `<nes-toc>` (element) · category: Navigation
- The live “on this page” index: it builds itself from your headings, follows the scroll, and hides when there is nothing worth indexing. Mobile-first — a collapsible bar naming the current section, an open rail when there's room.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/toc

## Overlay

### Modal
- selector: `<dialog class="modal">` (element) · category: Overlay
- Focus-trapping dialog on the native <dialog> element. Opens with showModal().
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/modal

### Dropdown
- selector: `<details class="dropdown">` (element) · category: Overlay
- Disclosure menu on the native <details> element. Zero JavaScript.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/dropdown

### Tooltip
- selector: `[data-tip]` (attribute) · category: Overlay
- Label on hover or focus. Pure CSS via a data-tip attribute — no JavaScript.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/tooltip

### Drawer
- selector: `<dialog class="drawer">` (element) · category: Overlay
- A side sheet on the native <dialog>. Slides in from the edge with showModal(); add .start to come from the left.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/drawer

## Data

### Table
- selector: `.table` (class) · category: Data
- Rows of data. Mono uppercase headers, hover highlight, scrolls on overflow.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/table

### Code block
- selector: `<nes-code>` (element) · category: Data
- Drop code in — <nes-code> highlights it and wires the copy button. No manual markup, no dependency.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/code

### Accordion
- selector: `<nes-collapsible>` (element) · category: Data
- Collapsible section. <nes-collapsible> — the header button toggles the body.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/accordion

### Stat
- selector: `.stat` (class) · category: Data
- A single big number with a label. Tabular figures; accent-colored.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/stat

### Rating
- selector: `.rating` (class) · category: Data
- A read-only score as a row of stars, filled up to .on. Gold by default; recolor with data-accent.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/rating

### Description list
- selector: `.datalist` (class) · category: Data
- Key → value rows for a detail panel or settings summary. Built on native <dl>.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/datalist

### Timeline
- selector: `.timeline` (class) · category: Data
- Vertical events on a connector line with square markers. Great for activity feeds and changelogs.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/timeline

### Prose
- selector: `.prose` (class) · category: Data
- Drop rendered markdown / CMS HTML inside — it restores semantic rhythm, square bullets, and accent links.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/prose

### Tree
- selector: `<nes-tree>` (element) · category: Data
- Hierarchical folder/file list. Expand/collapse, single or multiple selection, full keyboard nav. Data via child JSON.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/tree

## Chat

### Chat
- selector: `.chat` (class) · category: Chat
- The chatbot shell: a flex column with a scrolling message area and a prompt pinned to the bottom. Compose it from the parts below.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/chat

### ChatMessages
- selector: `<nes-chat-messages>` (element) · category: Chat
- Scroll container that auto-sticks to the newest message while streaming — but won't yank the view if the reader scrolled up.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/chatmessages

### ChatMessage
- selector: `.msg` (class) · category: Chat
- One message row: an avatar + a square bubble. .assistant sits left on the panel; .user mirrors right and tints with the accent.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/chatmessage

### ChatPrompt
- selector: `<nes-chat-prompt>` (element) · category: Chat
- The input: an auto-growing textarea + send button. Enter sends, Shift+Enter = newline. Fires nes:submit with the text, then clears.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/chatprompt

### ChatPromptSubmit
- selector: `.chat-submit` (class) · category: Chat
- The send/stop button used inside ChatPrompt. Add .busy to turn the green send into a red stop. Usable standalone too.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/chatpromptsubmit

### ChatReasoning
- selector: `.reasoning` (class) · category: Chat
- A collapsed "thinking" block for reasoning tokens. Native <details> — zero JS. Dashed, mono, muted; the summary goes gold when open.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/chatreasoning

### ChatTool
- selector: `.tool` (class) · category: Chat
- Shows a tool/function call: name + status badge in the summary, args/result in the body. Native <details>; status via a .badge.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/chattool

### ChatShimmer
- selector: `.shimmer` (class) · category: Chat
- Streaming placeholder — a few shimmering lines shown while the assistant's first tokens are still on the way. Pure CSS.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/chatshimmer

### ChatPalette
- selector: `.chat-palette` (class) · category: Chat
- A framed chat panel for a modal or side-panel assistant: bordered surface with the messages area above and the prompt flush on the bottom edge.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/chatpalette

### Composer
- selector: `.composer` (class) · category: Chat
- The full prompt box — ChatGPT / Claude-Code style: attachment chips on top, a growing textarea, and a toolbar footer with icon actions, a model picker, a char hint and send.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/composer

### Suggestions
- selector: `.suggest` (class) · category: Chat
- Prompt starters on an empty chat, or follow-up chips after an answer — a wrap of tap-to-send pills that guide the next turn.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/suggestions

### Citations
- selector: `.cite` (class) · category: Chat
- Grounded answers: an inline [n] marker in the prose that links down to a numbered sources list under the message. Zero JS — the marker jumps to a matching id.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/citations

## Agents

### Agent
- selector: `.agent` (class) · category: Agents
- One agent in a multi-agent crew: a status light, name + model, and its current task. Drive the light with data-state — thinking / running blink live.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/agent

### Context usage
- selector: `.usage` (class) · category: Agents
- A stacked token-budget bar — see how the context window is spent across system, history, tools and response, and how much is still free.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/usage

### Trace
- selector: `.trace` (class) · category: Agents
- A vertical run trace — what the agent planned, which tools it called, and the result. Marks share the run-state colours; wrap any step in <details> for zero-JS expand of the tool I/O.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/trace

### Feedback bar
- selector: `.feedback` (class) · category: Agents
- The bar under an AI response: rate / copy / regenerate on the left, run metrics (model · tokens · latency) on the right. Closes the human-in-the-loop.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/feedback

## Editor

### Editor
- selector: `<nes-editor>` (element) · category: Editor
- Lightweight, AI-first rich-text editor on native contenteditable (zero deps). Toolbar, slash/@/: menus, block drag, VSCode-style Tab ghost, AI commands, word-count, and a bilingual mode — write in one language, Tab out the other. For blog / knowledge / language-learning apps.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/editor

### EditorToolbar
- selector: `.editor-toolbar` (class) · category: Editor
- The format bar built into <nes-editor>: bold/italic/underline/strike, H1/H2, lists, quote, inline code, link, and an AI (✦) button. Scrolls horizontally on mobile.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/editortoolbar

### EditorSuggestionMenu
- selector: `<nes-editor> /` (element) · category: Editor
- The slash (/) command menu — the Notion-style way to insert blocks. Type / to open, keep typing to filter, ↑/↓ + Enter to pick.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/editorsuggestionmenu

### EditorMentionMenu
- selector: `<nes-editor> @` (element) · category: Editor
- The @-mention menu for referencing notes / people / entities — the backbone of a second-brain link graph. Options come from the editor's JSON config.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/editormentionmenu

### EditorEmojiMenu
- selector: `<nes-editor> :` (element) · category: Editor
- The colon (:) emoji picker — type :name to filter a built-in set and insert the emoji. No dependency, no image sprite.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/editoremojimenu

### EditorDragHandle
- selector: `.editor-drag` (class) · category: Editor
- A grip (⠿) that appears at the start of the hovered block; drag it to reorder blocks. Pure HTML5 drag — no library.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/editordraghandle

## Typography

### Typography
- selector: `.prose` (class) · category: Typography
- Render an AI agent's streamed Markdown / MDC output as beautiful, on-brand HTML — prose embeds (::code-preview, ::code-group, ::field-group…) that map onto real components.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/typography

### CodePreview
- selector: `.code-preview` (class) · category: Typography
- Live rendered result on top, its source below — the ::code-preview embed. The “here's the component, here's the code” block.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/codepreview

### CodeGroup
- selector: `<nes-tabs class="code-group">` (element) · category: Typography
- Tab between several code blocks in one frame — the ::code-group embed. Perfect for pnpm/npm/yarn or multi-language snippets.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/codegroup

### CodeCollapse
- selector: `<details class="code-collapse">` (element) · category: Typography
- Hide a long code block behind a toggle — the ::code-collapse embed. Native <details>, zero JS.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/codecollapse

### CodeTree
- selector: `<nes-code-tree>` (element) · category: Typography
- File tree on the left, syntax-highlighted viewer on the right — the ::code-tree embed. Ideal for rendering a repo or multi-file snippet an agent generated.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/codetree

### CardGroup
- selector: `.card-group` (class) · category: Typography
- A responsive grid of cards that reflows by itself — the ::card-group embed. Drop any number of .card children in.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/cardgroup

### FieldGroup
- selector: `.field-group` (class) · category: Typography
- A bordered list of prop / parameter rows — the ::field-group embed. The clean way to render an API or config reference.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/fieldgroup

### Prompt
- selector: `.prompt` (class) · category: Typography
- A single terminal / AI command line with an accent caret (❯) — the ::prompt embed. For showing commands or an agent's input.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/prompt

### Terminal
- selector: `.terminal` (class) · category: Typography
- A multi-line shell session — command lines (❯) + output. For rendering the install/run steps an AI agent writes.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/terminal

### Diff
- selector: `.diff` (class) · category: Typography
- A code-diff block — added / removed / context lines with a +/− gutter. For rendering the patches an AI coding agent proposes.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/diff

### Tasklist
- selector: `.tasklist` (class) · category: Typography
- A checklist — done + open items with square checkboxes. For rendering the plans / to-dos an AI agent emits (Markdown - [x]).
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/tasklist

## Visualize

### Visualize
- selector: `<nes-mermaid>` (element) · category: Visualize
- Turn an AI agent's diagram output (Mermaid) into on-brand visuals, and teach a concept step-by-step. Mermaid is never bundled — bring your own or lazy-load it.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/visualize

### Mermaid
- selector: `<nes-mermaid>` (element) · category: Visualize
- Render a Mermaid diagram themed to the system. Streaming-safe (set .code per chunk) and AI-safe (strict). Mermaid isn't bundled.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/mermaid

### Walkthrough
- selector: `<nes-walkthrough>` (element) · category: Visualize
- Step-by-step 'How it works'. Prev/Next + arrow keys; each step spotlights part of a diagram so a principle unfolds one piece at a time.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/walkthrough

### Lens
- selector: `<nes-tabs class="lens">` (element) · category: Visualize
- See one concept from many angles — flow, sequence, data, trade-offs — as tabs. Pure composition over Tabs; deepens understanding.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/lens

### Zoom
- selector: `<nes-zoom>` (element) · category: Visualize
- Pan + zoom any content — wheel, drag, buttons, keyboard. Wrap a big AI-generated diagram (or an image) to make it explorable. Zero-dep.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/zoom

### Annotate
- selector: `<nes-annotate>` (element) · category: Visualize
- Numbered hotspot markers with popovers, positioned over any image or diagram. Point at the parts to explain how something works.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/annotate

### Compare
- selector: `<nes-compare>` (element) · category: Visualize
- A before/after slider: two layers, a draggable divider. Compare two architectures, designs, or states side-by-side.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/compare

### Legend
- selector: `.legend` (class) · category: Visualize
- A compact color / shape key for a diagram. Pure CSS — one swatch per meaning, recolored with data-accent.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/legend

## Second Brain

### Graph
- selector: `<nes-graph>` (element) · category: Second Brain
- A knowledge graph — nodes (notes / concepts) + edges, force-laid-out deterministically as crisp SVG. Click a node to light its neighbourhood. Zero deps; wrap in <nes-zoom> to pan/zoom.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/graph

### Note card
- selector: `.note` (class) · category: Second Brain
- One note in a vault or search result: title + timestamp, a 2-line excerpt, tag pills and a link / backlink readout. data-accent classifies it by folder or domain.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/note

### Backlinks
- selector: `.backlinks` (class) · category: Second Brain
- Linked references — the notes that point at this one, each with the sentence it was mentioned in. <mark> highlights the match.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/backlinks

### Wiki-link & Tag
- selector: `.wikilink` (class) · category: Second Brain
- The inline glue of a vault: [[wiki-links]] between notes (dim when the target doesn't exist yet) and #tag pills to filter by.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/wikilink

### Properties
- selector: `.props` (class) · category: Second Brain
- Frontmatter / metadata as a clean key→value grid (Obsidian Properties). Values can hold tags, wiki-links or plain text.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/props

### Outline
- selector: `.outline` (class) · category: Second Brain
- The heading tree of the current note — jump around a long document. Indent by level, light the active heading on scroll.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/outline

### Activity heatmap
- selector: `.heatmap` (class) · category: Second Brain
- A contribution grid — how many notes you touched each day. 7 rows of weekdays, columns of weeks, ink by level.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/heatmap

### Board
- selector: `.board` (class) · category: Second Brain
- A Kanban board — horizontally-scrolling columns of note cards. Give each column a data-accent for its top bar.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/board

### Command palette
- selector: `.palette` (class) · category: Second Brain
- A quick-switcher / command palette (Cmd-K): a search box over a result list. Drop it in a modal; wire filtering in JS.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/palette

### Search result
- selector: `.result` (class) · category: Second Brain
- One search hit or palette row: an icon, a title with the matched text <mark>ed, a dim path, and an optional key hint.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/result

### Note embed
- selector: `.embed` (class) · category: Second Brain
- A transcluded note (Obsidian ![[note]]): another note's content quoted inline, with a link back to the source.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/embed

### Maturity
- selector: `.maturity` (class) · category: Second Brain
- A digital-garden growth stage: 🌱 seedling · 🌿 budding · 🌳 evergreen — how ripe a note is, at a glance.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/maturity

### Tag cloud
- selector: `.tag-cloud` (class) · category: Second Brain
- A weighted panel of tags with counts — the hottest topics grow bigger and greener. Tap one to filter the vault.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/tagcloud

### Concept card
- selector: `.concept` (class) · category: Second Brain
- A glossary / concept card: a term, its definition, and "see also" links — the atom of a knowledge base.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/concept

### Note stats
- selector: `.note-stats` (class) · category: Second Brain
- A compact meta bar for a note — word count, read time, and created / modified dates.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/notestats

## OpenCode

### Workbench
- selector: `.workbench` (class) · category: OpenCode
- The 3-pane workspace shell: rail (files) · main (chat/editor) · side (preview/logs). Layout only — it styles no content, so any module drops in. Panes stack on mobile.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/workbench

### Repo bar
- selector: `.repobar` (class) · category: OpenCode
- Which code am I looking at: repo · branch · dirty count, plus an actions slot. Identity only — live run telemetry belongs in the Status line.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/repobar

### File tabs
- selector: `.filetabs` (class) · category: OpenCode
- The open-buffer strip: which files are open, which is focused, which is unsaved. Scrolls sideways when the list grows.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/filetabs

### Status line
- selector: `.statusline` (class) · category: OpenCode
- The ambient bottom strip: run-state light + model · context · elapsed. Reads at a glance without stealing focus; data-state uses the shared run-state vocabulary.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/statusline

### Sandbox
- selector: `.sandbox` (class) · category: OpenCode
- The cloud dev container: is my machine alive, and what is it? A state light, a spec readout, and an actions slot.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/sandbox

### Plan
- selector: `.plan` (class) · category: OpenCode
- What the agent intends to do, with live state per step — the todo list you watch tick over. Numbered marks share the run-state colours.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/plan

### Permission
- selector: `.perm` (class) · category: OpenCode
- The gate: “the agent wants to run this — allow?” One request, one decision, the exact command shown verbatim. Warn accent because it blocks the loop.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/perm

### Diff stat
- selector: `.diffstat` (class) · category: OpenCode
- The aggregate of a change set: N files, +added / -removed, and a proportional bar. The one-line answer to “how big is this?”.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/diffstat

### File change
- selector: `.filechange` (class) · category: OpenCode
- One changed file: status mark (A/M/D/R) · path · ± counts. Render it as a link or button so it jumps to that file's diff.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/filechange

### Hunk
- selector: `.hunk` (class) · category: OpenCode
- A reviewable slice of a diff: range + scope + keep/revert actions, collapsible with native <details>. The body stays a plain .diff.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/hunk

### DiffView
- selector: `<nes-diff>` (element) · category: OpenCode
- Feed it a unified diff (git or agent output) and it renders on-brand diff markup, then reports the totals. Parsing and rendering only — no frame, no opinions.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/diffview

### Checks
- selector: `.checks` (class) · category: OpenCode
- Did it actually work: lint / types / unit / build — one row each, with the shared run-state vocabulary and an optional link to the logs.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/checks

### Run bar
- selector: `.runbar` (class) · category: OpenCode
- The process strip: stop/start, the command, the port it bound, and how long it took. One running task per bar.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/runbar

### Logs
- selector: `<nes-logs>` (element) · category: OpenCode
- A streaming log surface: push lines, it follows the tail — unless you scrolled up, then it holds still. Ring-buffered and filterable by level.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/logs

### App preview
- selector: `<nes-preview>` (element) · category: OpenCode
- The running app in a framed viewport — URL bar, reload, and 375 / 768 / full widths. The pane that closes the vibe-coding loop.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/preview

### Stack trace
- selector: `.stacktrace` (class) · category: OpenCode
- The failure, readable: kind + message, then frames with your code lit and vendor frames dimmed, plus the action that starts the next agent loop.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/stacktrace

### Checkpoints
- selector: `.ckpt` (class) · category: OpenCode
- Time travel: every snapshot you can rewind to, with the one you're on marked. The safety net that makes fast, messy iteration safe.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/ckpt

### Deploy
- selector: `.deploy` (class) · category: OpenCode
- Where the code actually went: environment · URL · duration and commit. One row per environment — preview, staging, production.
- docs: https://tutranmvp.github.io/8bit-components/docs.html#/deploy

---
Generated from docs.js by scripts/gen-llms.mjs. Do not edit by hand — run `pnpm gen:llms`.
