# 8-BIT NES > Cross-framework NES-arcade design system — CSS design tokens + class recipes + light-DOM web components (``). Zero build step, dark-only, square 90° corners, hard shadow. Official source of truth for the `8bit-nes` package (v0.16.0). Install: `pnpm add 8bit-nes` then `import "8bit-nes/all.css"; import "8bit-nes";`. Or CDN: `https://cdn.jsdelivr.net/npm/8bit-nes@0.16.0/all.min.css`. The look is themed entirely from `tokens.css`; recolor any block with `data-accent="blue|gold|cyan|purple|good|warn|crit|…"` (default accent `good` = green). Full machine-readable reference: [llms-full.txt](https://tutranmvp.github.io/8bit-components/llms-full.txt) · [components.json](https://tutranmvp.github.io/8bit-components/components.json). ## Getting started - [Introduction](https://tutranmvp.github.io/8bit-components/docs.html#/intro): A cross-framework component system with the feel of a 1985 arcade cabinet — square pixel boxes, hard shadows, chiptune, and XP. Modern-crisp, dark-only, zero build. - [Installation](https://tutranmvp.github.io/8bit-components/docs.html#/install): Add the package, import the CSS once, register the web components. Three environments, one result. - [Theming](https://tutranmvp.github.io/8bit-components/docs.html#/theming): One file is the source of truth. Change the look in tokens.css — never in a component. - [Layout & rhythm](https://tutranmvp.github.io/8bit-components/docs.html#/layout): Every scale in one place: space on 4px, size on 2px, integer type rungs, three weights, one stacking ladder, three breakpoints — all enforced by pnpm check. - [Colors](https://tutranmvp.github.io/8bit-components/docs.html#/colors): The full palette. Grounds, ink, and a base + deep pair for every brand and semantic accent — all tokens in tokens.css. ## Element - [Button](https://tutranmvp.github.io/8bit-components/docs.html#/button) — `.btn`: Primary action. Green (the primary accent) by default; set data-accent to recolor. Presses in on :active — the signature move. - [Badge](https://tutranmvp.github.io/8bit-components/docs.html#/badge) — `.badge`: Static status marker. Not interactive — for state you can read at a glance. - [Chip](https://tutranmvp.github.io/8bit-components/docs.html#/chip) — `.chip`: Toggleable filter or tag. Interactive — presses in, fills with its accent when active. - [Card](https://tutranmvp.github.io/8bit-components/docs.html#/card) — `.card`: Surface for grouped content. A left accent bar classifies it; hard border, hard shadow, square corners. - [Avatar](https://tutranmvp.github.io/8bit-components/docs.html#/avatar) — `.avatar`: User image or initials. Square by design so the hard shadow stays crisp; group them to overlap. - [Kbd](https://tutranmvp.github.io/8bit-components/docs.html#/kbd) — `.kbd`: Keyboard key hint. Inline, mono, inset — for shortcuts in prose. - [Separator](https://tutranmvp.github.io/8bit-components/docs.html#/separator) — `.separator`: Divider between content. Solid or dashed; horizontal or vertical. - [Icon](https://tutranmvp.github.io/8bit-components/docs.html#/icon) — ``: 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. - [Toolbar](https://tutranmvp.github.io/8bit-components/docs.html#/toolbar) — `.toolbar`: A row of actions that scrolls on a phone instead of reflowing under your thumb. - [Split view](https://tutranmvp.github.io/8bit-components/docs.html#/split) — ``: Two panes, one divider you can drag, arrow or double-click. Stacks with dir="column". ## Form - [Input](https://tutranmvp.github.io/8bit-components/docs.html#/input) — `.input`: Single-line text field. Recessed on the screen surface; focus flips the border to gold. - [Textarea](https://tutranmvp.github.io/8bit-components/docs.html#/textarea) — `.textarea`: Multi-line text. Vertically resizable, same recessed treatment as Input. - [Select](https://tutranmvp.github.io/8bit-components/docs.html#/select) — `.select`: Native select, restyled. Keeps the OS keyboard and mobile picker behaviour; gold chevron. - [Checkbox](https://tutranmvp.github.io/8bit-components/docs.html#/checkbox) — `.checkbox`: Boolean toggle in a list. Square box with a pixel check when on. - [Radio](https://tutranmvp.github.io/8bit-components/docs.html#/radio) — `.radio`: One-of-many choice. Same square box, filled solid when selected. - [Switch](https://tutranmvp.github.io/8bit-components/docs.html#/switch) — `.switch`: On/off setting with immediate effect. Green (good) accent by default. - [Field](https://tutranmvp.github.io/8bit-components/docs.html#/field) — `.field`: Label + control + hint/error wrapper. The .err modifier turns the whole field critical. - [ColorPicker](https://tutranmvp.github.io/8bit-components/docs.html#/colorpicker) — `.swatch`: Native color input, restyled as a square chip. The OS picker stays; only the swatch is themed. - [InputDate](https://tutranmvp.github.io/8bit-components/docs.html#/inputdate) — `.input[type="date"]`: Native date input in the 8-bit shell. Keeps the OS calendar; the picker glyph is tinted to the primary. - [InputTime](https://tutranmvp.github.io/8bit-components/docs.html#/inputtime) — `.input[type="time"]`: Native time input, same shell as InputDate. OS clock picker, tinted glyph. - [CheckboxGroup](https://tutranmvp.github.io/8bit-components/docs.html#/checkboxgroup) — `.control-group`: A
that groups related checkboxes under one legend. Add .row to lay them out horizontally. - [RadioGroup](https://tutranmvp.github.io/8bit-components/docs.html#/radiogroup) — `.control-group`: Same .control-group fieldset, holding radios that share a name (single choice). - [InputNumber](https://tutranmvp.github.io/8bit-components/docs.html#/inputnumber) — ``: A − [n] + stepper over a native number input. wires the buttons; value clamps to min/max/step. - [Switcher](https://tutranmvp.github.io/8bit-components/docs.html#/switcher) — ``: 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). - [InputRating](https://tutranmvp.github.io/8bit-components/docs.html#/inputrating) — ``: Star picker. Click or arrow-key to set; add readonly for a display-only score. size=lg enlarges it. - [PinInput](https://tutranmvp.github.io/8bit-components/docs.html#/pininput) — ``: One-time-code / PIN entry: N single-char cells that auto-advance, accept a full paste, and fire nes:complete. - [InputTags](https://tutranmvp.github.io/8bit-components/docs.html#/inputtags) — ``: Type + Enter (or comma) to add a chip; × or Backspace removes. Value is the ordered tag list. - [FileUpload](https://tutranmvp.github.io/8bit-components/docs.html#/fileupload) — ``: Click-or-drop zone over a native file input. Lists chosen files with a remove button; supports multiple + accept. - [Listbox](https://tutranmvp.github.io/8bit-components/docs.html#/listbox) — ``: An always-open selectable list with roving focus. Single by default; add multiple for many. Options via child JSON. - [InputMenu](https://tutranmvp.github.io/8bit-components/docs.html#/inputmenu) — ``: Free-text combobox: type to filter suggestions, or keep any typed value. Autocomplete without locking the input. - [SelectMenu](https://tutranmvp.github.io/8bit-components/docs.html#/selectmenu) — ``: Strict searchable single-select: a trigger shows the label; the popup adds a filter box; the value must be one of the options. - [Form](https://tutranmvp.github.io/8bit-components/docs.html#/form) — ``: A thin wrapper that runs native constraint validation, renders inline errors under each .field, and emits nes:submit with the data. - [Range](https://tutranmvp.github.io/8bit-components/docs.html#/range) — `.range`: Slider on a native . Recessed track, square accent thumb. Set data-accent to recolor. - [Segmented control](https://tutranmvp.github.io/8bit-components/docs.html#/segment) — `.segment`: A row of connected buttons for a single choice — the pressed one fills with the accent. Great for a difficulty or view switch. - [Number stepper](https://tutranmvp.github.io/8bit-components/docs.html#/stepper) — `.stepper`: A − [n] + control around a native number input. Wire the buttons to step the value. ## Feedback - [Alert](https://tutranmvp.github.io/8bit-components/docs.html#/alert) — `.callout`: Inline message with a semantic tone. Four shades map to meaning, not decoration. - [Progress](https://tutranmvp.github.io/8bit-components/docs.html#/progress) — `.pbar`: Determinate bar. Fills with a smooth ease so progress glides — striped so the amount reads at a glance. - [Skeleton](https://tutranmvp.github.io/8bit-components/docs.html#/skeleton) — `.skeleton`: Loading placeholder. The shimmer ticks in steps rather than gliding. - [Toast](https://tutranmvp.github.io/8bit-components/docs.html#/toast) — `toast()`: Transient confirmation. Fires from JS, auto-dismisses, and is announced politely. - [Spinner](https://tutranmvp.github.io/8bit-components/docs.html#/spinner) — `.spinner`: A square loader whose lit edges spin smoothly — a loader with no curve. Three sizes; accent-ready. - [Meter](https://tutranmvp.github.io/8bit-components/docs.html#/meter) — `.meter`: A discrete segmented gauge — HP / energy in blocks. Add .on to filled cells; good/warn/crit read as health states. - [Empty state](https://tutranmvp.github.io/8bit-components/docs.html#/empty) — `.empty`: The "no data" / "game over" panel. Square dashed edge, centered mono copy, and always an action out. - [Callout](https://tutranmvp.github.io/8bit-components/docs.html#/callout) — `.callout`: An inline aside inside a document — distinct from the page-level .banner. Seven kinds, each with its own accent and marker. - [Banner](https://tutranmvp.github.io/8bit-components/docs.html#/banner) — `.banner`: A full-width, page-level notice — distinct from the inline .callout box. Accent-tinted, optional dismiss. ## Navigation - [Tabs](https://tutranmvp.github.io/8bit-components/docs.html#/tabs) — ``: Switch between panels. Roving focus and arrow keys, built from [data-label] children. - [Breadcrumb](https://tutranmvp.github.io/8bit-components/docs.html#/breadcrumb) — `.breadcrumb`: Path to the current page. Mono, chevron-separated, last item current. - [Pagination](https://tutranmvp.github.io/8bit-components/docs.html#/pagination) — `.pagination`: Page through a list. The current page fills with the primary accent; ends disable. - [Steps](https://tutranmvp.github.io/8bit-components/docs.html#/steps) — `.steps`: Stage progression. Mark cleared stages .done and the active one aria-current — reads as NES "STAGE 1 · 2 · 3". - [Nav list](https://tutranmvp.github.io/8bit-components/docs.html#/navlist) — `.navlist`: Vertical sidebar navigation for app shells. Mark the current item with aria-current; recolor with data-accent. - [Map of Content](https://tutranmvp.github.io/8bit-components/docs.html#/toc) — ``: 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. ## Overlay - [Popover](https://tutranmvp.github.io/8bit-components/docs.html#/popover) — ``: An anchored panel in the top layer, so no ancestor's overflow can clip it. - [Confirm](https://tutranmvp.github.io/8bit-components/docs.html#/confirm) — `confirmDialog()`: A destructive confirm as a promise. Focus starts on Cancel, so Enter is never the answer you regret. - [Modal](https://tutranmvp.github.io/8bit-components/docs.html#/modal) — ``: Focus-trapping dialog on the native element. Opens with showModal(). - [Dropdown](https://tutranmvp.github.io/8bit-components/docs.html#/dropdown) — `
`: Disclosure menu on the native
element. Zero JavaScript. - [Tooltip](https://tutranmvp.github.io/8bit-components/docs.html#/tooltip) — `[data-tip]`: Label on hover or focus. Pure CSS via a data-tip attribute — no JavaScript. - [Drawer](https://tutranmvp.github.io/8bit-components/docs.html#/drawer) — ``: A side sheet on the native . Slides in from the edge with showModal(); add .start to come from the left. ## Data - [Table](https://tutranmvp.github.io/8bit-components/docs.html#/table) — `.table`: Rows of data. Mono uppercase headers, hover highlight, scrolls on overflow. - [Code block](https://tutranmvp.github.io/8bit-components/docs.html#/code) — ``: Drop code in — highlights it and wires the copy button. No manual markup, no dependency. - [Accordion](https://tutranmvp.github.io/8bit-components/docs.html#/accordion) — ``: Collapsible section. — the header button toggles the body. - [Stat](https://tutranmvp.github.io/8bit-components/docs.html#/stat) — `.stat`: A single big number with a label. Tabular figures; accent-colored. - [Rating](https://tutranmvp.github.io/8bit-components/docs.html#/rating) — `.rating`: A read-only score as a row of stars, filled up to .on. Gold by default; recolor with data-accent. - [Description list](https://tutranmvp.github.io/8bit-components/docs.html#/datalist) — `.datalist`: Key → value rows for a detail panel or settings summary. Built on native
. - [Timeline](https://tutranmvp.github.io/8bit-components/docs.html#/timeline) — `.timeline`: Vertical events on a connector line with square markers. Great for activity feeds and changelogs. - [Prose](https://tutranmvp.github.io/8bit-components/docs.html#/prose) — `.prose`: Drop rendered markdown / CMS HTML inside — it restores semantic rhythm, square bullets, and accent links. - [Tree](https://tutranmvp.github.io/8bit-components/docs.html#/tree) — ``: Hierarchical folder/file list. Expand/collapse, single or multiple selection, full keyboard nav. Data via child JSON. ## Chat - [Chat](https://tutranmvp.github.io/8bit-components/docs.html#/chat) — `.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. - [ChatMessages](https://tutranmvp.github.io/8bit-components/docs.html#/chatmessages) — ``: Scroll container that auto-sticks to the newest message while streaming — but won't yank the view if the reader scrolled up. - [ChatMessage](https://tutranmvp.github.io/8bit-components/docs.html#/chatmessage) — `.msg`: One message row: an avatar + a square bubble. .assistant sits left on the panel; .user mirrors right and tints with the accent. - [ChatPrompt](https://tutranmvp.github.io/8bit-components/docs.html#/chatprompt) — ``: The input: an auto-growing textarea + send button. Enter sends, Shift+Enter = newline. Fires nes:submit with the text, then clears. - [ChatPromptSubmit](https://tutranmvp.github.io/8bit-components/docs.html#/chatpromptsubmit) — `.chat-submit`: The send/stop button used inside ChatPrompt. Add .busy to turn the green send into a red stop. Usable standalone too. - [ChatReasoning](https://tutranmvp.github.io/8bit-components/docs.html#/chatreasoning) — `.reasoning`: A collapsed "thinking" block for reasoning tokens. Native
— zero JS. Dashed, mono, muted; the summary goes gold when open. - [ChatTool](https://tutranmvp.github.io/8bit-components/docs.html#/chattool) — `.tool`: Shows a tool/function call: name + status badge in the summary, args/result in the body. Native
; status via a .badge. - [ChatShimmer](https://tutranmvp.github.io/8bit-components/docs.html#/chatshimmer) — `.shimmer`: Streaming placeholder — a few shimmering lines shown while the assistant's first tokens are still on the way. Pure CSS. - [ChatPalette](https://tutranmvp.github.io/8bit-components/docs.html#/chatpalette) — `.chat-palette`: 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. - [Composer](https://tutranmvp.github.io/8bit-components/docs.html#/composer) — `.composer`: 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. - [Suggestions](https://tutranmvp.github.io/8bit-components/docs.html#/suggestions) — `.suggest`: 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. - [Citations](https://tutranmvp.github.io/8bit-components/docs.html#/citations) — `.cite`: 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. ## Agents - [Agent](https://tutranmvp.github.io/8bit-components/docs.html#/agent) — `.agent`: 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. - [Context usage](https://tutranmvp.github.io/8bit-components/docs.html#/usage) — `.usage`: A stacked token-budget bar — see how the context window is spent across system, history, tools and response, and how much is still free. - [Trace](https://tutranmvp.github.io/8bit-components/docs.html#/trace) — `.trace`: 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
for zero-JS expand of the tool I/O. - [Feedback bar](https://tutranmvp.github.io/8bit-components/docs.html#/feedback) — `.feedback`: 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. ## Editor - [Editor](https://tutranmvp.github.io/8bit-components/docs.html#/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. - [EditorToolbar](https://tutranmvp.github.io/8bit-components/docs.html#/editortoolbar) — `.editor-toolbar`: The format bar built into : bold/italic/underline/strike, H1/H2, lists, quote, inline code, link, and an AI (✦) button. Scrolls horizontally on mobile. - [EditorSuggestionMenu](https://tutranmvp.github.io/8bit-components/docs.html#/editorsuggestionmenu) — ` /`: The slash (/) command menu — the Notion-style way to insert blocks. Type / to open, keep typing to filter, ↑/↓ + Enter to pick. - [EditorMentionMenu](https://tutranmvp.github.io/8bit-components/docs.html#/editormentionmenu) — ` @`: The @-mention menu for referencing notes / people / entities — the backbone of a second-brain link graph. Options come from the editor's JSON config. - [EditorEmojiMenu](https://tutranmvp.github.io/8bit-components/docs.html#/editoremojimenu) — ` :`: The colon (:) emoji picker — type :name to filter a built-in set and insert the emoji. No dependency, no image sprite. - [EditorDragHandle](https://tutranmvp.github.io/8bit-components/docs.html#/editordraghandle) — `.editor-drag`: A grip (⠿) that appears at the start of the hovered block; drag it to reorder blocks. Pure HTML5 drag — no library. ## Typography - [Typography](https://tutranmvp.github.io/8bit-components/docs.html#/typography) — `.prose`: 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. - [CodePreview](https://tutranmvp.github.io/8bit-components/docs.html#/codepreview) — `.code-preview`: Live rendered result on top, its source below — the ::code-preview embed. The “here's the component, here's the code” block. - [CodeGroup](https://tutranmvp.github.io/8bit-components/docs.html#/codegroup) — ``: Tab between several code blocks in one frame — the ::code-group embed. Perfect for pnpm/npm/yarn or multi-language snippets. - [CodeCollapse](https://tutranmvp.github.io/8bit-components/docs.html#/codecollapse) — `
`: Hide a long code block behind a toggle — the ::code-collapse embed. Native
, zero JS. - [CodeTree](https://tutranmvp.github.io/8bit-components/docs.html#/codetree) — ``: 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. - [CardGroup](https://tutranmvp.github.io/8bit-components/docs.html#/cardgroup) — `.card-group`: A responsive grid of cards that reflows by itself — the ::card-group embed. Drop any number of .card children in. - [FieldGroup](https://tutranmvp.github.io/8bit-components/docs.html#/fieldgroup) — `.field-group`: A bordered list of prop / parameter rows — the ::field-group embed. The clean way to render an API or config reference. - [Prompt](https://tutranmvp.github.io/8bit-components/docs.html#/prompt) — `.prompt`: A single terminal / AI command line with an accent caret (❯) — the ::prompt embed. For showing commands or an agent's input. - [Terminal](https://tutranmvp.github.io/8bit-components/docs.html#/terminal) — `.terminal`: A multi-line shell session — command lines (❯) + output. For rendering the install/run steps an AI agent writes. - [Diff](https://tutranmvp.github.io/8bit-components/docs.html#/diff) — `.diff`: A code-diff block — added / removed / context lines with a +/− gutter. For rendering the patches an AI coding agent proposes. - [Tasklist](https://tutranmvp.github.io/8bit-components/docs.html#/tasklist) — `.tasklist`: A checklist — done + open items with square checkboxes. For rendering the plans / to-dos an AI agent emits (Markdown - [x]). ## Visualize - [Visualize](https://tutranmvp.github.io/8bit-components/docs.html#/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. - [Mermaid](https://tutranmvp.github.io/8bit-components/docs.html#/mermaid) — ``: Render a Mermaid diagram themed to the system. Streaming-safe (set .code per chunk) and AI-safe (strict). Mermaid isn't bundled. - [Walkthrough](https://tutranmvp.github.io/8bit-components/docs.html#/walkthrough) — ``: 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. - [Lens](https://tutranmvp.github.io/8bit-components/docs.html#/lens) — ``: See one concept from many angles — flow, sequence, data, trade-offs — as tabs. Pure composition over Tabs; deepens understanding. - [Zoom](https://tutranmvp.github.io/8bit-components/docs.html#/zoom) — ``: Pan + zoom any content — wheel, drag, buttons, keyboard. Wrap a big AI-generated diagram (or an image) to make it explorable. Zero-dep. - [Annotate](https://tutranmvp.github.io/8bit-components/docs.html#/annotate) — ``: Numbered hotspot markers with popovers, positioned over any image or diagram. Point at the parts to explain how something works. - [Compare](https://tutranmvp.github.io/8bit-components/docs.html#/compare) — ``: A before/after slider: two layers, a draggable divider. Compare two architectures, designs, or states side-by-side. - [Legend](https://tutranmvp.github.io/8bit-components/docs.html#/legend) — `.legend`: A compact color / shape key for a diagram. Pure CSS — one swatch per meaning, recolored with data-accent. ## Second Brain - [Graph](https://tutranmvp.github.io/8bit-components/docs.html#/graph) — ``: 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 to pan/zoom. - [Note card](https://tutranmvp.github.io/8bit-components/docs.html#/note) — `.note`: 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. - [Backlinks](https://tutranmvp.github.io/8bit-components/docs.html#/backlinks) — `.backlinks`: Linked references — the notes that point at this one, each with the sentence it was mentioned in. highlights the match. - [Wiki-link & Tag](https://tutranmvp.github.io/8bit-components/docs.html#/wikilink) — `.wikilink`: The inline glue of a vault: [[wiki-links]] between notes (dim when the target doesn't exist yet) and #tag pills to filter by. - [Properties](https://tutranmvp.github.io/8bit-components/docs.html#/props) — `.props`: Frontmatter / metadata as a clean key→value grid (Obsidian Properties). Values can hold tags, wiki-links or plain text. - [Outline](https://tutranmvp.github.io/8bit-components/docs.html#/outline) — `.outline`: The heading tree of the current note — jump around a long document. Indent by level, light the active heading on scroll. - [Activity heatmap](https://tutranmvp.github.io/8bit-components/docs.html#/heatmap) — `.heatmap`: A contribution grid — how many notes you touched each day. 7 rows of weekdays, columns of weeks, ink by level. - [Board](https://tutranmvp.github.io/8bit-components/docs.html#/board) — `.board`: A Kanban board — horizontally-scrolling columns of note cards. Give each column a data-accent for its top bar. - [Command palette](https://tutranmvp.github.io/8bit-components/docs.html#/palette) — `.palette`: A quick-switcher / command palette (Cmd-K): a search box over a result list. Drop it in a modal; wire filtering in JS. - [Search result](https://tutranmvp.github.io/8bit-components/docs.html#/result) — `.result`: One search hit or palette row: an icon, a title with the matched text ed, a dim path, and an optional key hint. - [Note embed](https://tutranmvp.github.io/8bit-components/docs.html#/embed) — `.embed`: A transcluded note (Obsidian ![[note]]): another note's content quoted inline, with a link back to the source. - [Maturity](https://tutranmvp.github.io/8bit-components/docs.html#/maturity) — `.maturity`: A digital-garden growth stage: 🌱 seedling · 🌿 budding · 🌳 evergreen — how ripe a note is, at a glance. - [Tag cloud](https://tutranmvp.github.io/8bit-components/docs.html#/tagcloud) — `.tag-cloud`: A weighted panel of tags with counts — the hottest topics grow bigger and greener. Tap one to filter the vault. - [Concept card](https://tutranmvp.github.io/8bit-components/docs.html#/concept) — `.concept`: A glossary / concept card: a term, its definition, and "see also" links — the atom of a knowledge base. - [Note stats](https://tutranmvp.github.io/8bit-components/docs.html#/notestats) — `.note-stats`: A compact meta bar for a note — word count, read time, and created / modified dates. ## OpenCode - [Workbench](https://tutranmvp.github.io/8bit-components/docs.html#/workbench) — `.workbench`: 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. - [Repo bar](https://tutranmvp.github.io/8bit-components/docs.html#/repobar) — `.repobar`: Which code am I looking at: repo · branch · dirty count, plus an actions slot. Identity only — live run telemetry belongs in the Status line. - [File tabs](https://tutranmvp.github.io/8bit-components/docs.html#/filetabs) — `.filetabs`: The open-buffer strip: which files are open, which is focused, which is unsaved. Scrolls sideways when the list grows. - [Status line](https://tutranmvp.github.io/8bit-components/docs.html#/statusline) — `.statusline`: 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. - [Sandbox](https://tutranmvp.github.io/8bit-components/docs.html#/sandbox) — `.sandbox`: The cloud dev container: is my machine alive, and what is it? A state light, a spec readout, and an actions slot. - [Plan](https://tutranmvp.github.io/8bit-components/docs.html#/plan) — `.plan`: 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. - [Permission](https://tutranmvp.github.io/8bit-components/docs.html#/perm) — `.perm`: 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. - [Diff stat](https://tutranmvp.github.io/8bit-components/docs.html#/diffstat) — `.diffstat`: The aggregate of a change set: N files, +added / -removed, and a proportional bar. The one-line answer to “how big is this?”. - [File change](https://tutranmvp.github.io/8bit-components/docs.html#/filechange) — `.filechange`: 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. - [Hunk](https://tutranmvp.github.io/8bit-components/docs.html#/hunk) — `.hunk`: A reviewable slice of a diff: range + scope + keep/revert actions, collapsible with native
. The body stays a plain .diff. - [DiffView](https://tutranmvp.github.io/8bit-components/docs.html#/diffview) — ``: 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. - [Checks](https://tutranmvp.github.io/8bit-components/docs.html#/checks) — `.checks`: Did it actually work: lint / types / unit / build — one row each, with the shared run-state vocabulary and an optional link to the logs. - [Run bar](https://tutranmvp.github.io/8bit-components/docs.html#/runbar) — `.runbar`: The process strip: stop/start, the command, the port it bound, and how long it took. One running task per bar. - [Logs](https://tutranmvp.github.io/8bit-components/docs.html#/logs) — ``: A streaming log surface: push lines, it follows the tail — unless you scrolled up, then it holds still. Ring-buffered and filterable by level. - [App preview](https://tutranmvp.github.io/8bit-components/docs.html#/preview) — ``: The running app in a framed viewport — URL bar, reload, and 375 / 768 / full widths. The pane that closes the vibe-coding loop. - [Stack trace](https://tutranmvp.github.io/8bit-components/docs.html#/stacktrace) — `.stacktrace`: The failure, readable: kind + message, then frames with your code lit and vendor frames dimmed, plus the action that starts the next agent loop. - [Checkpoints](https://tutranmvp.github.io/8bit-components/docs.html#/ckpt) — `.ckpt`: Time travel: every snapshot you can rewind to, with the one you're on marked. The safety net that makes fast, messy iteration safe. - [Deploy](https://tutranmvp.github.io/8bit-components/docs.html#/deploy) — `.deploy`: Where the code actually went: environment · URL · duration and commit. One row per environment — preview, staging, production. ## Optional - [Full flat-text reference for RAG](https://tutranmvp.github.io/8bit-components/llms-full.txt) - [Structured JSON manifest](https://tutranmvp.github.io/8bit-components/components.json) - [README](https://github.com/TuTranMVP/8bit-components/blob/main/README.md) - [Design rationale](https://github.com/TuTranMVP/8bit-components/blob/main/DESIGN.md) - [TypeScript types](https://github.com/TuTranMVP/8bit-components/blob/main/index.d.ts)