{ "name": "8bit-nes", "version": "0.16.0", "title": "8-BIT NES", "description": "Cross-framework NES-arcade design system: CSS design tokens + class recipes + light-DOM web components. Zero build, dark-only, square 90° corners, hard shadow.", "official": true, "homepage": "https://tutranmvp.github.io/8bit-components", "docs": "https://tutranmvp.github.io/8bit-components/docs.html", "repository": "https://github.com/TuTranMVP/8bit-components", "license": "MIT", "install": { "npm": "pnpm add 8bit-nes", "github": "pnpm add github:TuTranMVP/8bit-components", "import": [ "import \"8bit-nes/all.css\";", "import \"8bit-nes\";" ], "cdnCss": "https://cdn.jsdelivr.net/npm/8bit-nes@0.16.0/all.min.css", "cdnJs": "https://cdn.jsdelivr.net/npm/8bit-nes@0.16.0/elements.min.js" }, "conventions": { "prefix": "nes-", "accentAttribute": "data-accent", "accents": [ "blue", "gold", "cyan", "purple", "lime", "teal", "indigo", "pink", "steel", "good", "warn", "crit" ], "primaryAccent": "good", "events": [ "nes:change", "nes:submit", "nes:invalid", "nes:complete", "nes:answer", "nes:diff", "nes:navigate", "nes:xp", "nes:mute" ], "rules": [ "Square 90° corners everywhere — never add border-radius or a chamfer.", "Depth = hard shadow (box-shadow: Npx Npx 0), never blur.", "One accent per block: set data-accent on the container; children inherit via --accent.", "Dark text on bright accent fills (var(--ink-on-accent)); never light text on a solid fill.", "Every value comes from a token in tokens.css — never hard-code hex/px in a component.", "Prefer native elements/controls; add ARIA only to fill gaps." ] }, "concepts": [ { "id": "intro", "name": "Introduction", "description": "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.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/intro" }, { "id": "install", "name": "Installation", "description": "Add the package, import the CSS once, register the web components. Three environments, one result.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/install" }, { "id": "theming", "name": "Theming", "description": "One file is the source of truth. Change the look in tokens.css — never in a component.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/theming" }, { "id": "layout", "name": "Layout & rhythm", "description": "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.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/layout" }, { "id": "colors", "name": "Colors", "description": "The full palette. Grounds, ink, and a base + deep pair for every brand and semantic accent — all tokens in tokens.css.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/colors" } ], "components": [ { "id": "button", "name": "Button", "category": "Element", "selector": ".btn", "kind": "class", "description": "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" }, { "id": "badge", "name": "Badge", "category": "Element", "selector": ".badge", "kind": "class", "description": "Static status marker. Not interactive — for state you can read at a glance.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/badge" }, { "id": "chip", "name": "Chip", "category": "Element", "selector": ".chip", "kind": "class", "description": "Toggleable filter or tag. Interactive — presses in, fills with its accent when active.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/chip" }, { "id": "card", "name": "Card", "category": "Element", "selector": ".card", "kind": "class", "description": "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" }, { "id": "avatar", "name": "Avatar", "category": "Element", "selector": ".avatar", "kind": "class", "description": "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" }, { "id": "kbd", "name": "Kbd", "category": "Element", "selector": ".kbd", "kind": "class", "description": "Keyboard key hint. Inline, mono, inset — for shortcuts in prose.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/kbd" }, { "id": "separator", "name": "Separator", "category": "Element", "selector": ".separator", "kind": "class", "description": "Divider between content. Solid or dashed; horizontal or vertical.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/separator" }, { "id": "icon", "name": "Icon", "category": "Element", "selector": "", "kind": "element", "description": "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" }, { "id": "input", "name": "Input", "category": "Form", "selector": ".input", "kind": "class", "description": "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" }, { "id": "textarea", "name": "Textarea", "category": "Form", "selector": ".textarea", "kind": "class", "description": "Multi-line text. Vertically resizable, same recessed treatment as Input.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/textarea" }, { "id": "select", "name": "Select", "category": "Form", "selector": ".select", "kind": "class", "description": "Native select, restyled. Keeps the OS keyboard and mobile picker behaviour; gold chevron.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/select" }, { "id": "checkbox", "name": "Checkbox", "category": "Form", "selector": ".checkbox", "kind": "class", "description": "Boolean toggle in a list. Square box with a pixel check when on.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/checkbox" }, { "id": "radio", "name": "Radio", "category": "Form", "selector": ".radio", "kind": "class", "description": "One-of-many choice. Same square box, filled solid when selected.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/radio" }, { "id": "switch", "name": "Switch", "category": "Form", "selector": ".switch", "kind": "class", "description": "On/off setting with immediate effect. Green (good) accent by default.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/switch" }, { "id": "field", "name": "Field", "category": "Form", "selector": ".field", "kind": "class", "description": "Label + control + hint/error wrapper. The .err modifier turns the whole field critical.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/field" }, { "id": "colorpicker", "name": "ColorPicker", "category": "Form", "selector": ".swatch", "kind": "class", "description": "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" }, { "id": "inputdate", "name": "InputDate", "category": "Form", "selector": ".input[type=\"date\"]", "kind": "class", "description": "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" }, { "id": "inputtime", "name": "InputTime", "category": "Form", "selector": ".input[type=\"time\"]", "kind": "class", "description": "Native time input, same shell as InputDate. OS clock picker, tinted glyph.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/inputtime" }, { "id": "checkboxgroup", "name": "CheckboxGroup", "category": "Form", "selector": ".control-group", "kind": "class", "description": "A
that groups related checkboxes under one legend. Add .row to lay them out horizontally.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/checkboxgroup" }, { "id": "radiogroup", "name": "RadioGroup", "category": "Form", "selector": ".control-group", "kind": "class", "description": "Same .control-group fieldset, holding radios that share a name (single choice).", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/radiogroup" }, { "id": "inputnumber", "name": "InputNumber", "category": "Form", "selector": "", "kind": "element", "description": "A − [n] + stepper over a native number input. wires the buttons; value clamps to min/max/step.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/inputnumber" }, { "id": "switcher", "name": "Switcher", "category": "Form", "selector": "", "kind": "element", "description": "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" }, { "id": "inputrating", "name": "InputRating", "category": "Form", "selector": "", "kind": "element", "description": "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" }, { "id": "pininput", "name": "PinInput", "category": "Form", "selector": "", "kind": "element", "description": "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" }, { "id": "inputtags", "name": "InputTags", "category": "Form", "selector": "", "kind": "element", "description": "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" }, { "id": "fileupload", "name": "FileUpload", "category": "Form", "selector": "", "kind": "element", "description": "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" }, { "id": "listbox", "name": "Listbox", "category": "Form", "selector": "", "kind": "element", "description": "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" }, { "id": "inputmenu", "name": "InputMenu", "category": "Form", "selector": "", "kind": "element", "description": "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" }, { "id": "selectmenu", "name": "SelectMenu", "category": "Form", "selector": "", "kind": "element", "description": "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" }, { "id": "form", "name": "Form", "category": "Form", "selector": "", "kind": "element", "description": "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" }, { "id": "alert", "name": "Alert", "category": "Feedback", "selector": ".callout", "kind": "class", "description": "Inline message with a semantic tone. Four shades map to meaning, not decoration.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/alert" }, { "id": "progress", "name": "Progress", "category": "Feedback", "selector": ".pbar", "kind": "class", "description": "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" }, { "id": "skeleton", "name": "Skeleton", "category": "Feedback", "selector": ".skeleton", "kind": "class", "description": "Loading placeholder. The shimmer ticks in steps rather than gliding.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/skeleton" }, { "id": "toast", "name": "Toast", "category": "Feedback", "selector": "toast()", "kind": "helper", "description": "Transient confirmation. Fires from JS, auto-dismisses, and is announced politely.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/toast" }, { "id": "toolbar", "name": "Toolbar", "category": "Element", "selector": ".toolbar", "kind": "class", "description": "A row of actions that scrolls on a phone instead of reflowing under your thumb.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/toolbar" }, { "id": "split", "name": "Split view", "category": "Element", "selector": "", "kind": "element", "description": "Two panes, one divider you can drag, arrow or double-click. Stacks with dir=\"column\".", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/split" }, { "id": "popover", "name": "Popover", "category": "Overlay", "selector": "", "kind": "element", "description": "An anchored panel in the top layer, so no ancestor's overflow can clip it.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/popover" }, { "id": "confirm", "name": "Confirm", "category": "Overlay", "selector": "confirmDialog()", "kind": "helper", "description": "A destructive confirm as a promise. Focus starts on Cancel, so Enter is never the answer you regret.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/confirm" }, { "id": "tabs", "name": "Tabs", "category": "Navigation", "selector": "", "kind": "element", "description": "Switch between panels. Roving focus and arrow keys, built from [data-label] children.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/tabs" }, { "id": "breadcrumb", "name": "Breadcrumb", "category": "Navigation", "selector": ".breadcrumb", "kind": "class", "description": "Path to the current page. Mono, chevron-separated, last item current.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/breadcrumb" }, { "id": "pagination", "name": "Pagination", "category": "Navigation", "selector": ".pagination", "kind": "class", "description": "Page through a list. The current page fills with the primary accent; ends disable.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/pagination" }, { "id": "modal", "name": "Modal", "category": "Overlay", "selector": "", "kind": "element", "description": "Focus-trapping dialog on the native element. Opens with showModal().", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/modal" }, { "id": "dropdown", "name": "Dropdown", "category": "Overlay", "selector": "
", "kind": "element", "description": "Disclosure menu on the native
element. Zero JavaScript.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/dropdown" }, { "id": "tooltip", "name": "Tooltip", "category": "Overlay", "selector": "[data-tip]", "kind": "attribute", "description": "Label on hover or focus. Pure CSS via a data-tip attribute — no JavaScript.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/tooltip" }, { "id": "table", "name": "Table", "category": "Data", "selector": ".table", "kind": "class", "description": "Rows of data. Mono uppercase headers, hover highlight, scrolls on overflow.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/table" }, { "id": "code", "name": "Code block", "category": "Data", "selector": "", "kind": "element", "description": "Drop code in — highlights it and wires the copy button. No manual markup, no dependency.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/code" }, { "id": "accordion", "name": "Accordion", "category": "Data", "selector": "", "kind": "element", "description": "Collapsible section. — the header button toggles the body.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/accordion" }, { "id": "stat", "name": "Stat", "category": "Data", "selector": ".stat", "kind": "class", "description": "A single big number with a label. Tabular figures; accent-colored.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/stat" }, { "id": "range", "name": "Range", "category": "Form", "selector": ".range", "kind": "class", "description": "Slider on a native . Recessed track, square accent thumb. Set data-accent to recolor.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/range" }, { "id": "segment", "name": "Segmented control", "category": "Form", "selector": ".segment", "kind": "class", "description": "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" }, { "id": "spinner", "name": "Spinner", "category": "Feedback", "selector": ".spinner", "kind": "class", "description": "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" }, { "id": "meter", "name": "Meter", "category": "Feedback", "selector": ".meter", "kind": "class", "description": "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" }, { "id": "empty", "name": "Empty state", "category": "Feedback", "selector": ".empty", "kind": "class", "description": "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" }, { "id": "steps", "name": "Steps", "category": "Navigation", "selector": ".steps", "kind": "class", "description": "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" }, { "id": "drawer", "name": "Drawer", "category": "Overlay", "selector": "", "kind": "element", "description": "A side sheet on the native . Slides in from the edge with showModal(); add .start to come from the left.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/drawer" }, { "id": "rating", "name": "Rating", "category": "Data", "selector": ".rating", "kind": "class", "description": "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" }, { "id": "stepper", "name": "Number stepper", "category": "Form", "selector": ".stepper", "kind": "class", "description": "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" }, { "id": "callout", "name": "Callout", "category": "Feedback", "selector": ".callout", "kind": "class", "description": "An inline aside inside a document — distinct from the page-level .banner. Seven kinds, each with its own accent and marker.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/callout" }, { "id": "banner", "name": "Banner", "category": "Feedback", "selector": ".banner", "kind": "class", "description": "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" }, { "id": "navlist", "name": "Nav list", "category": "Navigation", "selector": ".navlist", "kind": "class", "description": "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" }, { "id": "toc", "name": "Map of Content", "category": "Navigation", "selector": "", "kind": "element", "description": "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" }, { "id": "datalist", "name": "Description list", "category": "Data", "selector": ".datalist", "kind": "class", "description": "Key → value rows for a detail panel or settings summary. Built on native
.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/datalist" }, { "id": "timeline", "name": "Timeline", "category": "Data", "selector": ".timeline", "kind": "class", "description": "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" }, { "id": "prose", "name": "Prose", "category": "Data", "selector": ".prose", "kind": "class", "description": "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" }, { "id": "tree", "name": "Tree", "category": "Data", "selector": "", "kind": "element", "description": "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" }, { "id": "chat", "name": "Chat", "category": "Chat", "selector": ".chat", "kind": "class", "description": "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" }, { "id": "chatmessages", "name": "ChatMessages", "category": "Chat", "selector": "", "kind": "element", "description": "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" }, { "id": "chatmessage", "name": "ChatMessage", "category": "Chat", "selector": ".msg", "kind": "class", "description": "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" }, { "id": "chatprompt", "name": "ChatPrompt", "category": "Chat", "selector": "", "kind": "element", "description": "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" }, { "id": "chatpromptsubmit", "name": "ChatPromptSubmit", "category": "Chat", "selector": ".chat-submit", "kind": "class", "description": "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" }, { "id": "chatreasoning", "name": "ChatReasoning", "category": "Chat", "selector": ".reasoning", "kind": "class", "description": "A collapsed \"thinking\" block for reasoning tokens. Native
— zero JS. Dashed, mono, muted; the summary goes gold when open.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/chatreasoning" }, { "id": "chattool", "name": "ChatTool", "category": "Chat", "selector": ".tool", "kind": "class", "description": "Shows a tool/function call: name + status badge in the summary, args/result in the body. Native
; status via a .badge.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/chattool" }, { "id": "chatshimmer", "name": "ChatShimmer", "category": "Chat", "selector": ".shimmer", "kind": "class", "description": "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" }, { "id": "chatpalette", "name": "ChatPalette", "category": "Chat", "selector": ".chat-palette", "kind": "class", "description": "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" }, { "id": "composer", "name": "Composer", "category": "Chat", "selector": ".composer", "kind": "class", "description": "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" }, { "id": "suggestions", "name": "Suggestions", "category": "Chat", "selector": ".suggest", "kind": "class", "description": "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" }, { "id": "citations", "name": "Citations", "category": "Chat", "selector": ".cite", "kind": "class", "description": "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" }, { "id": "agent", "name": "Agent", "category": "Agents", "selector": ".agent", "kind": "class", "description": "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" }, { "id": "usage", "name": "Context usage", "category": "Agents", "selector": ".usage", "kind": "class", "description": "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" }, { "id": "trace", "name": "Trace", "category": "Agents", "selector": ".trace", "kind": "class", "description": "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.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/trace" }, { "id": "feedback", "name": "Feedback bar", "category": "Agents", "selector": ".feedback", "kind": "class", "description": "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" }, { "id": "editor", "name": "Editor", "category": "Editor", "selector": "", "kind": "element", "description": "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" }, { "id": "editortoolbar", "name": "EditorToolbar", "category": "Editor", "selector": ".editor-toolbar", "kind": "class", "description": "The format bar built into : 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" }, { "id": "editorsuggestionmenu", "name": "EditorSuggestionMenu", "category": "Editor", "selector": " /", "kind": "element", "description": "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" }, { "id": "editormentionmenu", "name": "EditorMentionMenu", "category": "Editor", "selector": " @", "kind": "element", "description": "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" }, { "id": "editoremojimenu", "name": "EditorEmojiMenu", "category": "Editor", "selector": " :", "kind": "element", "description": "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" }, { "id": "editordraghandle", "name": "EditorDragHandle", "category": "Editor", "selector": ".editor-drag", "kind": "class", "description": "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" }, { "id": "typography", "name": "Typography", "category": "Typography", "selector": ".prose", "kind": "class", "description": "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" }, { "id": "codepreview", "name": "CodePreview", "category": "Typography", "selector": ".code-preview", "kind": "class", "description": "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" }, { "id": "codegroup", "name": "CodeGroup", "category": "Typography", "selector": "", "kind": "element", "description": "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" }, { "id": "codecollapse", "name": "CodeCollapse", "category": "Typography", "selector": "
", "kind": "element", "description": "Hide a long code block behind a toggle — the ::code-collapse embed. Native
, zero JS.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/codecollapse" }, { "id": "codetree", "name": "CodeTree", "category": "Typography", "selector": "", "kind": "element", "description": "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" }, { "id": "cardgroup", "name": "CardGroup", "category": "Typography", "selector": ".card-group", "kind": "class", "description": "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" }, { "id": "fieldgroup", "name": "FieldGroup", "category": "Typography", "selector": ".field-group", "kind": "class", "description": "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" }, { "id": "prompt", "name": "Prompt", "category": "Typography", "selector": ".prompt", "kind": "class", "description": "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" }, { "id": "terminal", "name": "Terminal", "category": "Typography", "selector": ".terminal", "kind": "class", "description": "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" }, { "id": "diff", "name": "Diff", "category": "Typography", "selector": ".diff", "kind": "class", "description": "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" }, { "id": "tasklist", "name": "Tasklist", "category": "Typography", "selector": ".tasklist", "kind": "class", "description": "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" }, { "id": "visualize", "name": "Visualize", "category": "Visualize", "selector": "", "kind": "element", "description": "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" }, { "id": "mermaid", "name": "Mermaid", "category": "Visualize", "selector": "", "kind": "element", "description": "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" }, { "id": "walkthrough", "name": "Walkthrough", "category": "Visualize", "selector": "", "kind": "element", "description": "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" }, { "id": "lens", "name": "Lens", "category": "Visualize", "selector": "", "kind": "element", "description": "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" }, { "id": "zoom", "name": "Zoom", "category": "Visualize", "selector": "", "kind": "element", "description": "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" }, { "id": "annotate", "name": "Annotate", "category": "Visualize", "selector": "", "kind": "element", "description": "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" }, { "id": "compare", "name": "Compare", "category": "Visualize", "selector": "", "kind": "element", "description": "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" }, { "id": "legend", "name": "Legend", "category": "Visualize", "selector": ".legend", "kind": "class", "description": "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" }, { "id": "graph", "name": "Graph", "category": "Second Brain", "selector": "", "kind": "element", "description": "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.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/graph" }, { "id": "note", "name": "Note card", "category": "Second Brain", "selector": ".note", "kind": "class", "description": "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" }, { "id": "backlinks", "name": "Backlinks", "category": "Second Brain", "selector": ".backlinks", "kind": "class", "description": "Linked references — the notes that point at this one, each with the sentence it was mentioned in. highlights the match.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/backlinks" }, { "id": "wikilink", "name": "Wiki-link & Tag", "category": "Second Brain", "selector": ".wikilink", "kind": "class", "description": "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" }, { "id": "props", "name": "Properties", "category": "Second Brain", "selector": ".props", "kind": "class", "description": "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" }, { "id": "outline", "name": "Outline", "category": "Second Brain", "selector": ".outline", "kind": "class", "description": "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" }, { "id": "heatmap", "name": "Activity heatmap", "category": "Second Brain", "selector": ".heatmap", "kind": "class", "description": "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" }, { "id": "board", "name": "Board", "category": "Second Brain", "selector": ".board", "kind": "class", "description": "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" }, { "id": "palette", "name": "Command palette", "category": "Second Brain", "selector": ".palette", "kind": "class", "description": "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" }, { "id": "result", "name": "Search result", "category": "Second Brain", "selector": ".result", "kind": "class", "description": "One search hit or palette row: an icon, a title with the matched text ed, a dim path, and an optional key hint.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/result" }, { "id": "embed", "name": "Note embed", "category": "Second Brain", "selector": ".embed", "kind": "class", "description": "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" }, { "id": "maturity", "name": "Maturity", "category": "Second Brain", "selector": ".maturity", "kind": "class", "description": "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" }, { "id": "tagcloud", "name": "Tag cloud", "category": "Second Brain", "selector": ".tag-cloud", "kind": "class", "description": "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" }, { "id": "concept", "name": "Concept card", "category": "Second Brain", "selector": ".concept", "kind": "class", "description": "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" }, { "id": "notestats", "name": "Note stats", "category": "Second Brain", "selector": ".note-stats", "kind": "class", "description": "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" }, { "id": "workbench", "name": "Workbench", "category": "OpenCode", "selector": ".workbench", "kind": "class", "description": "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" }, { "id": "repobar", "name": "Repo bar", "category": "OpenCode", "selector": ".repobar", "kind": "class", "description": "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" }, { "id": "filetabs", "name": "File tabs", "category": "OpenCode", "selector": ".filetabs", "kind": "class", "description": "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" }, { "id": "statusline", "name": "Status line", "category": "OpenCode", "selector": ".statusline", "kind": "class", "description": "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" }, { "id": "sandbox", "name": "Sandbox", "category": "OpenCode", "selector": ".sandbox", "kind": "class", "description": "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" }, { "id": "plan", "name": "Plan", "category": "OpenCode", "selector": ".plan", "kind": "class", "description": "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" }, { "id": "perm", "name": "Permission", "category": "OpenCode", "selector": ".perm", "kind": "class", "description": "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" }, { "id": "diffstat", "name": "Diff stat", "category": "OpenCode", "selector": ".diffstat", "kind": "class", "description": "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" }, { "id": "filechange", "name": "File change", "category": "OpenCode", "selector": ".filechange", "kind": "class", "description": "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" }, { "id": "hunk", "name": "Hunk", "category": "OpenCode", "selector": ".hunk", "kind": "class", "description": "A reviewable slice of a diff: range + scope + keep/revert actions, collapsible with native
. The body stays a plain .diff.", "docs": "https://tutranmvp.github.io/8bit-components/docs.html#/hunk" }, { "id": "diffview", "name": "DiffView", "category": "OpenCode", "selector": "", "kind": "element", "description": "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" }, { "id": "checks", "name": "Checks", "category": "OpenCode", "selector": ".checks", "kind": "class", "description": "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" }, { "id": "runbar", "name": "Run bar", "category": "OpenCode", "selector": ".runbar", "kind": "class", "description": "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" }, { "id": "logs", "name": "Logs", "category": "OpenCode", "selector": "", "kind": "element", "description": "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" }, { "id": "preview", "name": "App preview", "category": "OpenCode", "selector": "", "kind": "element", "description": "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" }, { "id": "stacktrace", "name": "Stack trace", "category": "OpenCode", "selector": ".stacktrace", "kind": "class", "description": "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" }, { "id": "ckpt", "name": "Checkpoints", "category": "OpenCode", "selector": ".ckpt", "kind": "class", "description": "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" }, { "id": "deploy", "name": "Deploy", "category": "OpenCode", "selector": ".deploy", "kind": "class", "description": "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" } ], "counts": { "concepts": 5, "components": 139 } }