# Docs

- [Introduction](/docs): Zyeon UI — components with source, prompt, and concept map included.

- **Buttons**
- [Effect Button](/docs/buttons/effect-button): One button, seven visual effects — shimmer, shine, spotlight, glow, gradient, glass and ripple as cva variants.
- [Stateful Button](/docs/buttons/stateful-button): An action button with a built-in idle → loading → success/error state machine — stable width, live-region announcements, auto-reset.
- [Slide to Confirm](/docs/buttons/slide-to-confirm): A drag-to-the-end confirmation control — a track and thumb that replace a risky one-tap action with a deliberate slide gesture.
- [Theme Toggle](/docs/buttons/theme-toggle-button): A sun/moon theme toggle button with a rotate-and-scale cross-fade — fully controlled and host-agnostic, wire it to any theme provider.
- [Magnetic Button](/docs/buttons/magnetic-button): A button that drifts toward the cursor within a sensing radius, then springs back on leave.
- [Copy Button](/docs/buttons/copy-button): A ghost icon or label button that writes text to the clipboard and flashes a timed "Copied" confirmation.
- [Scroll to Top](/docs/buttons/scroll-to-top): A floating button that fades in past a scroll threshold and smoothly scrolls its container back to the top.
- [Like Button](/docs/buttons/like-button): A social toggle that fills its icon, bursts a ring of particles and rolls the counter on every tap.
- [Share Button](/docs/buttons/share-button): A share trigger whose targets fan out on an arc or a rail, one 40ms step apart, with outside-click and Esc dismissal.
- [Download Button](/docs/buttons/download-button): A download CTA that fills like a liquid gauge as the transfer advances, then settles into a checked or retryable state.
- [Split Button](/docs/buttons/split-button): A primary action welded to an arrow segment that opens its own keyboard-navigable action menu.
- [Gradient Border Button](/docs/buttons/gradient-border-button): A rotating conic-gradient ring around a solid core, so the border carries the colour and the label keeps full contrast.
- [FAB Menu](/docs/buttons/fab-menu): A floating action button that fans a labelled column of secondary actions upward, with staggered entry and focus handling.
- [Hold to Confirm](/docs/buttons/hold-to-confirm): A press-and-hold confirmation button — a charge bar that replaces a risky one-tap action with a deliberate hold gesture.
- [Border Trace Button](/docs/buttons/border-trace-button): A native button whose token-colored border segment traces the control on hover or keyboard focus.
- [Install PWA Button](/docs/buttons/install-pwa-button): An "Install app" button that catches beforeinstallprompt at module scope, hides itself when it cannot act, and falls back to written steps on iOS.
- [Record Button](/docs/buttons/record-button): A record control with a real idle → recording → processing → done state machine, drift-free elapsed timer, and an optional hold-to-record gesture with slide-away cancel.
- [Button Group](/docs/buttons/button-group): A welded row or column of independent actions — 1px seams, outer corners only, an unclipped focus ring, and a measured unweld when the row stops fitting.
- [Toggle Group](/docs/buttons/toggle-group): A row or column of independent aria-pressed toggles — one tab stop per option, optional min/max limits that refuse out loud, and per-item disabled reasons.
- [Export Button](/docs/buttons/export-button): An export menu for a data table — row scope, a column subset, a live size estimate on every format, and a row that generates, ticks or turns into Retry without the menu closing under it.
- [Oauth Buttons](/docs/buttons/oauth-buttons): A third-party sign-in row whose brand colours arrive as props — one provider goes in flight, the rest lock without ever going natively disabled, and the last-used one stays marked.
- [Payment Buttons](/docs/buttons/payment-buttons): An express-checkout wallet row — availability decides what is offered at all, brand paint and marks arrive as props, and a dismissed sheet is never dressed up as a failure.
- [Print Button](/docs/buttons/print-button): A print trigger that prepares the page before the dialog opens — a cancellable async hook, a print scope class, and a restore raced between afterprint, the print media query and a timeout.
- [Follow Button](/docs/buttons/follow-button): A follow / unfollow toggle with the hover-to-unfollow reveal, an optimistic follower count that rolls back when the request is refused, and a busy state that never uses native disabled.
- [Vote Buttons](/docs/buttons/vote-buttons): An up and down vote pair with the score between them — exclusive directions, optimistic score maths where a swap is worth two points, and a rollback when the server refuses.
- [Add to Calendar](/docs/buttons/add-to-calendar): A split button that writes one event to Google, Outlook, Office 365 or Yahoo — and generates a spec-correct .ics in the browser for Apple Calendar and everything else.

- **Inputs**
- [Rating](/docs/inputs/rating): A star rating that is both an accessible input (whole or half steps) and a fractional read-only display.
- [Tags Input](/docs/inputs/tags-input): A chips input for free-form multi-value entry — Enter or comma commits, paste splits, duplicates shake, maxTags caps with a counter.
- [Dropzone](/docs/inputs/dropzone): A drag-and-drop file picker built on a native file input — per-file accept, size and count validation with visible rejection reasons.
- [Password Input](/docs/inputs/password-input): A styled password field with a show/hide toggle and an optional heuristic strength meter.
- [Search Input](/docs/inputs/search-input): A styled search field with an icon, a clear button that appears once there's a value, an optional loading spinner, and a decorative shortcut hint.
- [Autosize Textarea](/docs/inputs/autosize-textarea): A textarea that grows with its content, from a minimum row count up to a capped maximum before it scrolls internally.
- [Number Input](/docs/inputs/number-input): A capsule quantity stepper — decrement/input/increment — with clamping, boundary-disabled buttons, and keyboard arrow stepping.
- [Swatch Picker](/docs/inputs/swatch-picker): An accessible grid of preset color swatches — radiogroup semantics, roving tabindex, and a contrast-safe selected check mark.
- [OTP Input](/docs/inputs/otp-input): A segmented verification-code field with auto-advance, paste-to-fill, optional grouping and masking.
- [Range Slider](/docs/inputs/range-slider): A two-thumb range selector with a minimum gap, value bubbles, marks and full keyboard control.
- [Toggle Switch](/docs/inputs/toggle-switch): A switch with a sliding knob, Check/X icons fading inside the track, three sizes and a loading state.
- [Currency Input](/docs/inputs/currency-input): A money field that stays raw while you type and normalizes with Intl.NumberFormat on blur — grouping, fixed decimals, clamping, and a number | null value.
- [Phone Input](/docs/inputs/phone-input): A country dial-code picker fused to a number field — searchable self-drawn listbox, keyboard driven, emitting an E.164 string on every change.
- [Inline Edit](/docs/inputs/inline-edit): Click-to-edit text that swaps a button for an input in place — pending state on async saves, rollback with the failure reason, and no width jump.
- [Choice Cards](/docs/inputs/choice-cards): A card-shaped radio or checkbox group — icon, title, description and badge per option, with roving-tabindex keyboard selection.
- [Filter Chips](/docs/inputs/filter-chips): A wrapping row of toggle chips for narrowing a list — per-facet counts, single or multi select, and a Clear all that only appears when something is on.
- [Signature Pad](/docs/inputs/signature-pad): A canvas signature capture surface with pointer-drawn strokes, undo/clear, and a PNG data URL export.
- [Combobox](/docs/inputs/combobox): A searchable dropdown selector — single or multi-select, grouped, creatable, with keyboard-driven filtering.
- [Date Range Picker](/docs/inputs/date-range-picker): A two-month range calendar with preset shortcuts (Today / Last 7 days / Last 30 days / This month / Last month) — the standard filter for SaaS reports and dashboards.
- [Time Picker](/docs/inputs/time-picker): A segmented hour:minute input — type digits or arrow-step, plus a clock-button dropdown of minuteStep candidates — always normalized to 24-hour "HH:mm" regardless of display format.
- [Color Picker](/docs/inputs/color-picker): A hex-driven color picker — saturation/value area, hue and alpha sliders, a format-aware text field, quick swatches, and an optional native eyedropper.
- [Prompt Input](/docs/inputs/prompt-input): An autosizing chat input with attachments, streaming stop/send, IME-safe submit and a character counter.
- [Mention Input](/docs/inputs/mention-input): A plain-text textarea where a trigger character (default @) opens a caret-anchored, filtered picker — mentions, or repurposed for slash commands.
- [API Key Field](/docs/inputs/api-key-field): A settings-page secret field — fixed-length mask, reveal/hide with optional auto re-mask, copy-to-clipboard with a visible failure fallback, and a two-step confirm before regenerating.
- [Form Wizard](/docs/inputs/form-wizard): A multi-step form state machine — per-step validation gates (sync or async), focus moved to the first failing field, and a self-contained progress rail.
- [File Upload List](/docs/inputs/file-upload-list): An upload queue — per-file progress, pause/resume, retry, cancel and remove, with a byte-weighted batch summary and throttled announcements.
- [Checkbox Tree](/docs/inputs/checkbox-tree): A multi-select hierarchical picker with parent-child cascade, derived indeterminate parents, and full WAI-ARIA tree keyboard navigation.
- [Duration Input](/docs/inputs/duration-input): A duration field that normalizes to seconds — segmented h/m/s spinbuttons that carry (type 90 minutes, get 1h 30m), or a free-text mode that parses "1h30", "90m" and "1:30".
- [Masked Input](/docs/inputs/masked-input): A generic pattern-masked text field — 9/A/* slots with literal separators, both the masked and the bare value on every change, and a caret that survives edits in the middle of the string.
- [Filter Bar](/docs/inputs/filter-bar): A composable filter bar for the toolbar above a table: an add-filter menu, one editable chip per active filter, and portalled editors for select, multiselect, date range, text and boolean fields.
- [Emoji Picker](/docs/inputs/emoji-picker): A full emoji panel — category nav, search, skin tone, recents and a windowed, arrow-key-navigable grid, inline or portalled.
- [Form Field](/docs/inputs/form-field): A label + control wrapper that wires id, aria-describedby, invalid, required, disabled and a character counter onto whatever control you put inside it.
- [Credit Card Form](/docs/inputs/credit-card-form): Card entry with brand-aware grouping and maxLength, a Luhn check, MM/YY with a real expiry rule, blur-time errors and auto-advance — UI only, real payments belong in Stripe Elements.
- [Availability Picker](/docs/inputs/availability-picker): A week × time-slot grid you brush with the pointer to declare when you are free — paint/erase strokes, keyboard painting, blocked slots and an optional group heatmap.
- [Environment Variables](/docs/inputs/environment-variables): A four-state configuration panel with secret masking, explicit reveal, and guarded clipboard actions.
- [Slug Input](/docs/inputs/slug-input): A URL field that transliterates the title as you type, detaches the moment you edit it by hand, and debounces an availability check with clickable -2 / -3 suggestions.
- [Unit Input](/docs/inputs/unit-input): A number-plus-unit field for design tokens — 12px, 1.5rem, 50% — with arrow/wheel stepping, optional conversion on unit switch, and an auto state.
- [Repeater Field](/docs/inputs/repeater-field): A generic controlled array field — add, remove, move, and drag-sort rows of any shape, with min/max clamping and stable row ids that never remount a focused input.
- [Timezone Picker](/docs/inputs/timezone-picker): A searchable IANA time-zone field — ~90 zones grouped Popular / All, each row showing that zone's live local time and GMT offset, with a portalled panel that no overflow-hidden card can clip.
- [Cron Input](/docs/inputs/cron-input): A visual builder for five-field cron — presets, hour/minute dropdowns and weekday/month chips write the expression, pasting an expression parses straight back into them, with a plain-English summary and the next runs underneath.
- [Address Form](/docs/inputs/address-form): A postal address form whose rows, row order, labels and validation all come from the country — state dropdown and ZIP+4 in the US, postcode-first in Japan, no postal code at all in Hong Kong.
- [Rich Text Toolbar](/docs/inputs/rich-text-toolbar): An editor-agnostic formatting bar — grouped toggle buttons that never steal the selection, collapse into an overflow menu, and walk on one tab stop.
- [JSON Editor](/docs/inputs/json-editor): A textarea-based JSON editor with live syntax validation, exact line and column reporting, a synced line gutter, optional schema checking, and format/minify/copy/reset tools.
- [Query Builder](/docs/inputs/query-builder): A recursive AND/OR condition tree — the operator menu follows the field's type, any condition can be turned into a nested group up to a depth cap, and a read-only SQL-ish expression shows exactly what the tree means.
- [Pin Pad](/docs/inputs/pin-pad): A touch-first numeric keypad for PIN entry — big keys, masked dot indicator, optional shuffled layout, and pending/error states.
- [Percent Allocator](/docs/inputs/percent-allocator): Split a total across rows with largest-remainder rebalancing, per-row locks and min/max limits — the shares always add up to the target exactly.
- [Markdown Editor](/docs/inputs/markdown-editor): A textarea-based Markdown editor with a selection-aware toggling toolbar, ⌘B/⌘I/⌘K shortcuts and a dependency-free preview renderer.
- [Language Picker](/docs/inputs/language-picker): An interface-language field that lists every option under its own name — 简体中文 next to Chinese (Simplified) — with endonym, English name and BCP 47 tag all searchable, RTL rows rendered in their own direction, optional translation completeness and a browser-language matching ladder.
- [Dimension Input](/docs/inputs/dimension-input): A paired width × height field with a real aspect-ratio lock — the ratio is frozen when you lock it, and min/max rolls the edited side back instead of letting its partner escape.
- [Gradient Picker](/docs/inputs/gradient-picker): A CSS gradient editor — draggable stop rail, angle dial, per-stop colour editing, and a live read-only linear/radial/conic CSS string.
- [Shortcut Recorder](/docs/inputs/shortcut-recorder): A field that captures a keyboard shortcut by pressing it — swallows every key while recording, waits for a real key past the modifiers, and tells reserved combos apart from ones that would override an existing binding.
- [CSV Import](/docs/inputs/csv-import): A three-step CSV importer — RFC 4180 parsing, delimiter and BOM detection, auto-guessed column mapping with duplicate and required gates, and a capped preview that reports ragged rows by line number.
- [Recurrence Picker](/docs/inputs/recurrence-picker): A calendar-language repeat editor that writes an RFC 5545 RRULE — frequency, interval, weekdays, “second Tuesday” / “last day of the month”, and a Never / N times / until-date ending — with the next dates previewed from the same evaluator.
- [Seat Picker](/docs/inputs/seat-picker): A zoomable SVG venue map for picking seats — arrow-key navigation across sections, rows and seats, a spoken name on every seat, shape + pattern status encoding, a list fallback, and out-loud refusals for max-seat and orphan-seat rules.
- [Variant Selector](/docs/inputs/variant-selector): Multi-dimension product options resolved against a sparse SKU matrix — impossible combinations stay in place struck through, availability converges from either direction, and every dead end names the way out.
- [Model Selector](/docs/inputs/model-selector): An LLM model picker where every option carries its context window, per-million input/output rate, capability set and whether your key can actually call it — and those fields drive the filtering.
- [Date Picker](/docs/inputs/date-picker): A typeable single-date field with a calendar panel — Intl-driven formatting and parsing, a complete keyboard grid, and refusals that keep what you typed.
- [Input Group](/docs/inputs/input-group): A composable affix shell for one field — static text, icon slots and interactive trailing controls flush inside a single border, with size, invalid and disabled flowing down to every slot.
- [Icon Picker](/docs/inputs/icon-picker): A searchable icon grid in a popover — the pickable set is a name → component map you supply, paged into bounded windows, with combobox keyboard navigation and recents.
- [Multi Select](/docs/inputs/multi-select): A multi-selection field: removable chips with a +N collapse in the trigger, a searchable checkbox listbox, select-all / clear, group headings, and a cap that refuses out loud.
- [Checkbox Group](/docs/inputs/checkbox-group): A flat fieldset of checkboxes with a genuinely indeterminate select-all, per-row descriptions, shift-range selection, and min/max limits that answer with a message instead of a dead control.
- [Assignee Picker](/docs/inputs/assignee-picker): A people picker with searchable presence-aware rows, a first-class Unassigned option, a recently-assigned shortcut group, single or multi assignment, blocked rows that say why, and four data states.
- [Password Generator](/docs/inputs/password-generator): A crypto-backed password generator with a length slider, required character sets, look-alike exclusion, a live entropy readout and an explicit refusal for impossible rule sets.
- [Key Value Editor](/docs/inputs/key-value-editor): An editable list of flat key/value pairs — drag or Alt+Arrow to reorder, switch a row off instead of deleting it, paste a block of Key: value lines, and see both halves of every duplicate key.
- [Sort Builder](/docs/inputs/sort-builder): A multi-key sort composer — ordered field plus direction rules, drag or keyboard reprioritising, direction wording that follows the field type, and a live plain-language summary of the whole chain.
- [Cascading Select](/docs/inputs/cascading-select): Dependent selects — country then region then city: each rung loads from the one above, changing an upper rung clears the lower ones out loud, and an answer for a rung the reader already left is discarded.
- [Business Hours](/docs/inputs/business-hours): A weekly opening-hours editor — per-day open/closed switches, split shifts, blocks that cross midnight, overlap detection that follows the spill into the next day, and a plain-language summary.
- [Datetime Picker](/docs/inputs/datetime-picker): A calendar grid beside an hour/minute/second ladder that emits one Date — min and max bound the combined instant, not the day, so the max day narrows the hours.
- [Period Picker](/docs/inputs/period-picker): A whole-period picker — week, month, quarter or year — whose grid changes shape per granularity and whose value carries the resolved start and end instants.
- [Code Input](/docs/inputs/code-input): A monospace code field with an aligned line gutter, indent-aware Tab, bracket auto-close, regex syntax tinting and error markers fed by a diagnostics prop.
- [Matrix Rating](/docs/inputs/matrix-rating): A survey matrix: statements down the side, one shared scale across the top, one native radio group per row, a pinned scale, answered-row progress, and a stacked fallback instead of sideways scrolling.
- [Transfer List](/docs/inputs/transfer-list): A dual listbox: two multi-selectable panes with per-side search and counts, move / move-all buttons between them, and a keyboard move that reports what travelled and where focus landed.
- [Schema Form](/docs/inputs/schema-form): A form generated from a zod object schema — one control per field type, required markers and every verdict read from that same schema, typed values on submit, and an explicit notice for shapes it will not guess at.
- [Font Picker](/docs/inputs/font-picker): A typeface field where every option is rendered in its own face — grouped sans / serif / mono / display, previewed with your own pangram, with system stacks always present and remote families fetched through an injected loader that reports loading and failure per font.
- [Poll Composer](/docs/inputs/poll-composer): A create-a-poll form — a question, 2 to 10 reorderable option rows, duplicate answers marked on both halves, an allow-multiple switch, a duration menu and a live ballot preview, emitting a typed draft on every edit.
- [Calculator Input](/docs/inputs/calculator-input): A number field that does arithmetic — type =2+3*4 or plain 2+3*4 and it commits 14, parsed by a hand-rolled parser that never calls eval.
- [Coordinates Input](/docs/inputs/coordinates-input): A latitude/longitude pair that reads decimal degrees or DMS in either field, re-prints between the two on a toggle, names the field that leaves ±90 / ±180, and splits a pasted pair across both inputs.
- [Meeting Planner](/docs/inputs/meeting-planner): Find a time across time zones — participant rows over one shared 24-hour track, a draggable column that reads the same instant in every zone, hour snapping with Shift for half hours, and working hours derived from Intl.
- [Char Counter](/docs/inputs/char-counter): A character budget for any input or textarea — grapheme-accurate counting, a warning band, an explicit over-limit state, and a hard cap that trims the paste instead of swallowing it.
- [Country Picker](/docs/inputs/country-picker): A country field whose value is always the ISO 3166-1 alpha-2 code — 243 countries, searchable by name, either ISO code or calling code, pinned rows on top and UN M49 region groups.
- [Tax ID Input](/docs/inputs/tax-id-input): A tax identifier field that knows what it is asking for — the country picks the local name, prefix and mask, and validation runs that jurisdiction's real checksum instead of a generic regex.
- [Bank Details Form](/docs/inputs/bank-details-form): Payout details whose fields follow the country — IBAN and BIC for SEPA, sort code and account number for the UK, routing and account number for the US — with a real mod-97 IBAN check, the ABA weighted checksum, and the account masked after entry.
- [Username Availability](/docs/inputs/username-availability): A controlled handle field that gates a debounced availability check behind local rules, names the rule that broke, tells unreachable apart from taken, and shows the normalised handle before submit.

- **Display**
- [Number Ticker](/docs/display/number-ticker): A count-up number that eases from 0 to its target the first time it scrolls into view — Intl-formatted, prefix/suffix aware.
- [Status Badge](/docs/display/status-badge): A presence and health indicator — colored dot or tinted pill, with status colors mapped to theme tokens and an optional liveness pulse.
- [Avatar Group](/docs/display/avatar-group): An overlapping avatar stack with ring cutouts, letter fallbacks for broken images, and a computed +N overflow chip.
- [Timeline](/docs/display/timeline): A contract-driven vertical timeline with done, active and upcoming milestones and four data states.
- [Kbd](/docs/display/kbd): Keyboard keycap and key-combination display, rendered as real `<kbd>` markup with platform-aware glyphs for mod/cmd/ctrl/alt.
- [Credit Card](/docs/display/credit-card): A flippable bank card display — masked number, holder and expiry on the front, magstripe and a hidden CVC placeholder on the back.
- [Accordion](/docs/display/accordion): A zero-dependency accessible disclosure list — single or multiple expansion, grid-rows animation, and full APG keyboard support.
- [Empty State](/docs/display/empty-state): A centered empty-state panel — icon chip, title, description and up to two actions — for any non-data-contract blank surface.
- [Chat Bubble](/docs/display/chat-bubble): A single message bubble — role-based alignment and color, avatar slot, and a bouncing typing indicator — for assembling chat and support message lists.
- [Relative Time](/docs/display/relative-time): Auto-refreshing "time ago" text — renders a real `<time>` element, formats with Intl.RelativeTimeFormat, and stays hydration-safe by reading the clock through useSyncExternalStore.
- [Description List](/docs/display/description-list): A semantic key-value list for order details, profile echoes, and settings summaries, in a divided-rows or panel-grid layout.
- [QR Code](/docs/display/qr-code): A tokenized QR code renderer — encodes any string to SVG and inherits `currentColor`, so it auto-inverts in dark mode.
- [Countdown](/docs/display/countdown): A ticking days/hours/minutes/seconds countdown for launches and promotions, with a one-shot onComplete callback and SSR-safe hydration.
- [Activity Heatmap](/docs/display/activity-heatmap): A GitHub-style contribution grid — a week-by-week calendar of daily counts as a five-step color scale, with four data states.
- [Stat Card](/docs/display/stat-card): A KPI grid — label, big tabular figure and a tone-coded delta per metric — with loading, empty, error and ready driven by one contract.
- [Terminal](/docs/display/terminal): A terminal window that replays a scripted session — commands type out character by character, output blocks fade in, comments stay dim.
- [Mini Calendar](/docs/display/mini-calendar): A compact month grid for picking one date — keyboard-navigable, timezone-safe, with today, disabled days and event dots. No date library.
- [Tilt Card](/docs/display/tilt-card): A card container that leans toward the pointer in 3D, with an optional gloss that tracks the cursor.
- [Notification Badge](/docs/display/notification-badge): A count bubble that wraps any element — rolling digits, a bump on change, max overflow, dot mode with a ping, and four corner placements.
- [Flip Card](/docs/display/flip-card): A two-faced container that turns over on hover or click to swap a summary for its details.
- [Bento Grid](/docs/display/bento-grid): A responsive tiling layout of mixed-size feature cards, with a pointer-tracked glow and honest click affordances.
- [Corner Ribbon](/docs/display/corner-ribbon): A diagonal corner badge draped over a card — NEW / SALE / POPULAR callouts that wrap any card content.
- [Feature Table](/docs/display/feature-table): A contract-driven feature comparison matrix across plans or versions, rendered as a real semantic table with four data states.
- [Sortable List](/docs/display/sortable-list): A drag-to-reorder list for settings, playlists, or priority queues, built on dnd-kit with a fully keyboard-operable fallback.
- [Animated List](/docs/display/animated-list): A flex column that staggers items in on first mount and pops, exits and re-flows them as children are added or removed.
- [Code Block](/docs/display/code-block): A self-contained, copyable code panel with its own regex syntax highlighter — line numbers, line highlighting, tabs and a wrap toggle, zero external highlighting engine.
- [JSON Viewer](/docs/display/json-viewer): A collapsible, searchable JSON tree viewer with type-colored values, per-node copy value/path, and safe rendering of circular refs and every JS edge-case value.
- [Page Header](/docs/display/page-header): The app-shell page header — breadcrumb slot, icon, title, status meta, actions and an optional controlled tab strip, all responsive to a narrow container.
- [Bulk Action Bar](/docs/display/bulk-action-bar): A floating toolbar that mounts once rows are selected — inline actions, an overflow "More" menu, and a live-announced count.
- [Virtual List](/docs/display/virtual-list): A hand-rolled windowed list — renders only the visible rows (+ overscan) of a huge array, with fixed or measured variable row heights, imperative scroll control, and infinite-scroll support.
- [Scroll Reveal](/docs/display/scroll-reveal): A variant-driven entrance wrapper — fade, slide, blur or scale any children in once they scroll into view, with an optional per-child stagger.
- [Data Table](/docs/display/data-table): A contract-driven interactive data table — controlled sort, tri-state selection, sticky header, row actions, and real loading/empty/error states.
- [Kanban Board](/docs/display/kanban-board): A contract-driven kanban board — dnd-kit drag and drop across and within columns, keyboard-accessible moves with live announcements, WIP limits that refuse over-filling, and real loading/empty/error states.
- [Schedule Calendar](/docs/display/schedule-calendar): A day/week time grid — events placed by the minute, overlapping ones packed side by side, an all-day row, a caller-supplied current-time line, click-to-create slots and four data states.
- [Notification Center](/docs/display/notification-center): An inbox popover for the app bell — grouped rows, tab filters, per-row and bulk read management, clipping-aware placement, and real loading/empty/error states.
- [Log Viewer](/docs/display/log-viewer): A runtime log console — level filters with counts, search highlighting with hit-to-hit jumps, tail-follow that pauses on manual scroll, and windowed rendering for huge buffers.
- [Comment Thread](/docs/display/comment-thread): A nested discussion tree — collapsible reply subtrees, optimistic voting, an inline reply composer with a posting/failed lifecycle, and a depth cap that hands deep threads off to a permalink.
- [Chat Thread](/docs/display/chat-thread): A contract-driven conversation stream — sender grouping, day and unread dividers, streaming append, load-older with position kept, and a scroll that never gets stolen from the reader.
- [Profile Card](/docs/display/profile-card): One person card in three densities (vertical, horizontal, compact) with presence dot, badges, stats, a stretched-link name and initials fallback.
- [Rating Summary](/docs/display/rating-summary): A review digest: average score, fractional star row and per-bucket distribution bars that double as filter toggles.
- [Product Card](/docs/display/product-card): A storefront product card — one stretched link, variants that swap the photo, a discount derived from the was-price, a sold-out veil and a four-phase Add to cart that never fakes success.
- [Diff Viewer](/docs/display/diff-viewer): A GitHub-style text diff — unified or side-by-side, own LCS line matching with word-level highlights, foldable context and a pinned line-number gutter.
- [Uptime Bars](/docs/display/uptime-bars): A status-page availability strip — one bar per day bucketed into operational / degraded / partial / major, with hover-or-focus incident detail and a width-aware day window.
- [Steps Checklist](/docs/display/steps-checklist): A dismissible onboarding checklist — jump-around completion, a required-only progress bar, per-step expandable instructions with a CTA, and a dependency-free celebration state.
- [Split Pane](/docs/display/split-pane): A dependency-free resizable split layout — percentage flex-basis panes, per-pane percent/px minimums, double-click collapse, full keyboard resizing, and an optional layout that survives reloads.
- [Settings List](/docs/display/settings-list): Grouped settings rows — label and description on the left, your own control on the right, with whole-row links, badges, disabled rows and a danger zone.
- [Scroll Area](/docs/display/scroll-area): A themed scroll container that keeps native scrolling untouched — the platform bar is hidden and a draggable thumb is drawn from scrollTop/scrollHeight, with optional edge fades and an end-reached callback.
- [Package Info](/docs/display/package-info): A contract-driven package change card with version, dependency, loading, empty and error states.
- [Animated Beam](/docs/display/animated-beam): A resize-aware SVG connection that carries a token-colored highlight between referenced interface nodes.
- [Test Results](/docs/display/test-results): A four-state test report with derived progress, expandable suites, and readable failure stacks.
- [Schema Display](/docs/display/schema-display): An accessible API operation viewer with parameters, request and response schemas, recursive fields, depth guards, and four fetch states.
- [Stack Trace](/docs/display/stack-trace): A contract-driven V8 stack trace inspector with controlled expansion, copy feedback, frame filtering, and four explicit data states.
- [Leaderboard](/docs/display/leaderboard): A ranked standings board — podium tiers, rank-change arrows, a highlighted current-user row with a pinned "your rank" bar, and loading/empty/error/ready from one contract.
- [Invoice Summary](/docs/display/invoice-summary): A contract-driven invoice / order total block — line items, discounts, taxes, shipping and amount due, computed in integer minor units with four data states.
- [Request Waterfall](/docs/display/request-waterfall): A DevTools-style network waterfall — one adaptive time axis, per-request bars segmented by DNS/connect/TLS/TTFB/download, hover-or-focus phase breakdowns, duration sorting, and real loading/empty/error states.
- [Org Chart](/docs/display/org-chart): A recursive org/hierarchy chart with pure-CSS connector lines, collapsible subtrees, vertical or horizontal orientation, and full WAI-ARIA tree semantics.
- [API Endpoint](/docs/display/api-endpoint): A collapsible API reference card — method badge, highlighted path placeholders, grouped parameter tables, expandable response examples, and a Copy-as-cURL button that never lies about failing.
- [Gantt Chart](/docs/display/gantt-chart): A project schedule chart — a sticky task column, an adaptive day/week/month axis, progress-filled bars, milestone diamonds, finish-to-start dependency elbows, collapsible groups and real loading/empty/error states.
- [Inbox List](/docs/display/inbox-list): A triage-ready message list — unread by weight and dot, Shift-range multi-select with a bulk bar, keyboard shortcuts, hover-and-focus row actions, and real loading/empty/error states.
- [Audit Trail](/docs/display/audit-trail): A compliance-grade activity log — every event reads as one sentence (who did what to which object, when), grouped by day, with expandable before/after diffs and four data states.
- [Permission Matrix](/docs/display/permission-matrix): An editable roles × permissions grid — tri-state cells (allow / deny / inherit), grouped collapsible rows, a pinned permission column, locked system roles, and real loading/empty/error states.
- [Data Grid Editable](/docs/display/data-grid-editable): A spreadsheet-style editable grid — per-type cell editors, roving-tabindex keyboard navigation, per-cell validation, async commits that roll back, TSV paste and sticky header plus first column.
- [Session List](/docs/display/session-list): Signed-in devices with per-row and bulk sign-out — the current session is highlighted and never revocable, failures keep the row, and staleness is shown in words, not just colour.
- [Changelog List](/docs/display/changelog-list): User-facing release notes — one block per version, entries grouped by kind with an icon and a word, a sticky version rail on wide containers, and real permalinks per release.
- [Tree Map](/docs/display/tree-map): A squarified treemap that tiles a hierarchy by value — nested groups, click-to-drill with a breadcrumb, rank-based shading and keyboard-reachable DOM tiles.
- [Toolbar](/docs/display/toolbar): A grouped application toolbar that measures itself and folds its lowest-priority actions into a "More" menu — no breakpoints, roving tabindex, portalled overflow menu.
- [Version History](/docs/display/version-history): A day-grouped snapshot list for documents and configs — pick one to preview, tick two to compare, and roll one back behind a real confirmation with pending, failure and retry.
- [Mini Map](/docs/display/mini-map): A thumbnail navigator for any scroll container — a draggable viewport box over an auto-measured silhouette of the content, kept in sync by a passive rAF-throttled listener that writes transform straight to the DOM.
- [Git Graph](/docs/display/git-graph): A commit-DAG viewer — topological rows, reusable swimlanes for branches and merges, copyable hashes, and four data states.
- [Poll Results](/docs/display/poll-results): A poll result readout — one bar per option with largest-remainder percentages that always total exactly 100%, tie-aware leader badges, a your-vote marker, and a ballot view that hides the counts until the visitor votes.
- [Resource Usage](/docs/display/resource-usage): A quota panel for heterogeneous resources — per-unit formatting, unlimited rows that draw no bar, rescaled over-quota tracks, collapsible groups and usage sorting.
- [Metric Comparison](/docs/display/metric-comparison): A period-over-period comparison table — this period, last period, absolute change and change %, with polarity-aware tone, sortable columns, expandable breakdowns and four data states.
- [Token Usage Meter](/docs/display/token-usage-meter): An LLM quota panel — tokens used vs quota, split by model with separate input/output prices, an exact cost estimate, days to reset and a burn-rate projection, in four contract-driven states.
- [Tool Call Trace](/docs/display/tool-call-trace): An agent's tool-call tree — nested sub-calls with an indent that stops growing, structured arguments and results in expandable JSON, one shared duration unit, first-class running and failed calls, and four data states.
- [Event Card](/docs/display/event-card): An event card with a calendar tear-off that survives cross-day, cross-month and cross-year spans, day boundaries computed in an explicit IANA zone, and an ordered capacity machine where “ended” outranks every seat count.
- [Keyboard Map](/docs/display/keyboard-map): A keyboard layout diagram that paints your app's bound shortcuts onto the keys — platform-correct glyphs and modifier order, whole-chord highlighting, and a readable binding list.
- [Scrollbar Styles](/docs/display/scrollbar-styles): Six presets that re-skin the browser's own scrollbar in pure CSS — no JavaScript, no drawn thumb, and one capability-tiered sheet that keeps the webkit pseudo-elements and the standard properties from cancelling each other out.
- [Feature Flag List](/docs/display/feature-flag-list): A per-environment feature flag table — production toggles gated behind a confirmation that repeats the flag key, rollout percentage kept orthogonal to on/off, optimistic switches that roll back one at a time, and expandable targeting rules.
- [Webhook Log](/docs/display/webhook-log): A webhook delivery log with the retry lifecycle built in — outcome classes that keep timeouts separate from status codes, a countdown to the next attempt derived from an injected clock, masked credential headers, collapsed payloads with honest truncation, and a guarded replay confirmation.
- [Citation List](/docs/display/citation-list): The numbered reference list under an AI answer — numbering derived exactly the way Citation Chip derives it so the markers and the list can never disagree, repeated sources merged with a citation count, graded trust that never leans on colour, and sources with no usable URL that refuse to become dead links.
- [Dependency List](/docs/display/dependency-list): An auditable dependency tree with real semver comparison, graded staleness, ordered CVE severities, licence obligation classes and import paths.
- [SLA Report](/docs/display/sla-report): A contract-side availability settlement — real period length, overlap-merged downtime, a weighted or worst-service composite, an error budget allowed to read past 100%, and the service-credit rung the period landed on.
- [Infinite Scroll](/docs/display/infinite-scroll): A sentinel-driven feed with four first-class data states — a failed page keeps every row already loaded, the in-flight lock is a ref so no page is ever fetched twice, and the manual trigger plus a role=feed keyboard walk make it reachable without a mouse.
- [Swipe Actions](/docs/display/swipe-actions): A list row whose horizontal drag uncovers real action buttons — resistance, velocity snapping, a full-swipe commit, a second press for destructive actions, and the same actions on the keyboard.
- [Activity Feed](/docs/display/activity-feed): A grouped activity stream — consecutive entries that share a verb and a target fold into one line, with day separators, an unread boundary and four data states.
- [Stopwatch](/docs/display/stopwatch): A count-up stopwatch with start/pause/reset and lap recording, timed off a monotonic clock so laps stay exact and a throttled background tab never loses time.
- [Calendar Month](/docs/display/calendar-month): A month grid of events — multi-day bars packed into shared lanes, a "+N more" day peek, today and out-of-month cells distinguished, configurable week start and four data states.
- [Timeline Swimlane](/docs/display/timeline-swimlane): Events across parallel resource lanes on one shared time axis, with overlap stacking, hour/day/week zoom, a caller-supplied now marker and four data states.
- [Dashboard Grid](/docs/display/dashboard-grid): A draggable, resizable widget grid: widgets snap to a column grid, collisions push neighbours down deterministically, and every accepted change emits the whole layout for the consumer to persist.
- [Column Picker](/docs/display/column-picker): A table column manager: show/hide toggles, drag or keyboard reorder, pinned columns that refuse to hide with a reason, search and reset — emitting the ordered visible set.
- [Type Scale](/docs/display/type-scale): A living typography specimen: every step set in real type, its px, rem, leading and tracking read back off the DOM, with copy-the-token rows and a heading / paragraph / numerals switcher.
- [Color Palette](/docs/display/color-palette): A live specimen sheet for a theme's color tokens — chips grouped by role, values read back from the DOM, ink/fill pairing previews and one-click copy.
- [Contrast Checker](/docs/display/contrast-checker): A WCAG contrast readout for one colour pair — resolved through the live cascade, composited on a canvas, with AA/AAA verdicts and the nearest passing lightness.
- [Avatar Status](/docs/display/avatar-status): One avatar carrying its own state — initials derived from the name, a presence ring whose word joins the accessible name, a corner badge slot, five sizes and a circle or squircle frame.
- [Barcode](/docs/display/barcode): A vector Code 128 / EAN-13 renderer — automatic subset switching, a real check digit, spec quiet zones, and a refusal that names what cannot be encoded.
- [World Clock](/docs/display/world-clock): Several time zones on one card — rows ticking on one shared minute timer, with Intl-derived offsets and DST, yesterday/tomorrow markers, and a working-hours band that shows the overlap with your own day.
- [Pivot Table](/docs/display/pivot-table): A cross-tabulation grid over flat records — row and column dimensions, sum/count/average, subtotals, a grand total, expandable row groups, and real loading/empty/error states.
- [Flame Graph](/docs/display/flame-graph): A four-state profiling flame graph — bar width is time, rows are stack depth, click to zoom with a breadcrumb back, and a search that highlights matches across the whole profile with a matched-time readout.
- [Code Tour](/docs/display/code-tour): An annotated walkthrough of one file — numbered steps that each highlight a line range, a note beside the code, and a pane that scrolls the active range into view.
- [Env Diff](/docs/display/env-diff): A key × environment configuration diff — every cell judged against one baseline column, secrets compared by fingerprint so no value is ever rendered, and a live count of what promoting one environment into another would change.
- [Data List](/docs/display/data-list): A read-only key/value list that folds from two columns to stacked pairs on container width, with per-row copy, focus-revealed truncation and an explicit em dash for empty fields.
- [Regex Tester](/docs/display/regex-tester): A regex workbench: flag toggles, matches tinted in place, a group table, the engine's own error text, and a worker-backed budget that survives catastrophic backtracking.
- [Theme Customizer](/docs/display/theme-customizer): A live design-token editor: a radius slider plus hue and saturation per colour role, previewed light and dark side by side on real controls, and exported as the :root / .dark CSS you paste.
- [Streak Tracker](/docs/display/streak-tracker): A habit-streak card — the live run with a tiered flame, this week as seven day cells, a spendable freeze wallet and an at-risk countdown, all derived from an injected instant.
- [Order Tracking](/docs/display/order-tracking): A shipment tracking card — a four-stage rail, an ETA derived from an injected instant, exceptions that interrupt without colour alone, per-parcel tabs and a copyable tracking number.
- [Live Cursors](/docs/display/live-cursors): A multiplayer cursor overlay — labelled peer pointers interpolated between low-rate updates, chart-token colour per peer, idle fade, relayed click ripples and a spoken roster, with the transport left to you.
- [JSON Diff](/docs/display/json-diff): A structural diff of two JSON values as one tree — added, removed and changed keys marked by sign and wording as well as colour, changed leaves showing before → after inline, unchanged subtrees folded behind counts, and arrays paired by index or by an identity field.
- [JWT Decoder](/docs/display/jwt-decoder): A paste-a-token JWT inspector: header and payload as labelled claims, registered claims explained, exp/nbf/iat judged against an injected instant, and a permanent notice that the signature is never verified.
- [Hexdump Viewer](/docs/display/hexdump-viewer): A windowed hex dump whose offset gutter, hex pane and ASCII pane share one selection, with 8/16/32 bytes per row and copy of the selected range as hex or text.
- [Spin Wheel](/docs/display/spin-wheel): A prize wheel that reveals an outcome drawn somewhere else — weighted SVG slices, a flick or a button to start, ticking deceleration onto a pre-computed angle, and a one-shot settle.
- [Currency Converter](/docs/display/currency-converter): A two-way money converter: type in either field and the other recomputes through a rate table you pass in, with per-currency Intl decimals, a rate breakdown line and an as-of / stale note.
- [Column Profile](/docs/display/column-profile): A per-column profiling panel — inferred type, missing rate, distinct count and a mini distribution per column, expandable into percentiles, top values or a time span.
- [Anomaly List](/docs/display/anomaly-list): A triage queue for detector output — each row compares the observed value against its baseline band, states the deviation in σ or %, marks the point on a sparkline, and can be acknowledged, ignored or called a false positive.
- [Threshold Editor](/docs/display/threshold-editor): An alert rule editor where every rule is metric + comparison + threshold + a sustained duration + severity — and each one is replayed against recorded samples, so the number of pages it would have produced is on screen before anyone saves.
- [Run Comparison](/docs/display/run-comparison): A side-by-side experiment comparison — one column per run, hyperparameter and metric rows, differences lit up against a baseline you can move, a best value per metric decided by contract-declared polarity, and a frozen label column.
- [A/B Test Result](/docs/display/ab-test-result): An experiment readout that turns two conversion counts into a relative lift, its confidence interval, a significance verdict and a sample-size progress line — with every degenerate input handled as its own branch.
- [Slice Explorer](/docs/display/slice-explorer): A dimension breakdown you can drill: pick a metric and a dimension, rank every value by its contribution, click one to make it a filter, and step back through a breadcrumb — with contribution computed correctly for rates, not just for totals.
- [Report Scheduler](/docs/display/report-scheduler): A recurring-delivery manager for reports — frequency, send time, IANA zone, recipients and format per subscription, each row carrying its next run, and an editor that previews the next runs as real instants before you save.
- [Data Diff Table](/docs/display/data-diff-table): A row-level diff of two dataset snapshots — rows matched on a key, change kind derived from the data, and a missing field told apart from a null one.
- [Scroll Shadow](/docs/display/scroll-shadow): A scroll container whose edges dissolve wherever the content continues — all four sides judged independently, drawn as a mask on the scroller so nothing overlays the content.
- [Stick To Bottom](/docs/display/stick-to-bottom): A scroll container that follows its own bottom edge — appended content stays in view until the reader scrolls up, and then the position is theirs, with a counted way back.
- [Lazy Render](/docs/display/lazy-render): Defers mounting a subtree until it scrolls into view or the browser goes idle, holding its space with an explicitly reserved placeholder height.
- [Virtual Grid](/docs/display/virtual-grid): Two-dimensional windowing — only the cells near the viewport exist in the DOM, with fixed or per-track measured row heights and column widths, and no virtualization library.
- [Sticky Stack](/docs/display/sticky-stack): Multi-level sticky section headers that park and shove one another, with every parking line accumulated from the measured heights of the headers above it.
- [Safe Area](/docs/display/safe-area): A wrapper that pads or offsets content by the OS safe-area insets — notch, rounded corners, home indicator, landscape side rails — with a max() floor for devices that report none.
- [Client Only](/docs/display/client-only): A wrapper that renders its children only after mount — the server and the first hydration render both emit the fallback, so browser-only values can never produce a hydration mismatch.
- [Density Toggle](/docs/display/density-toggle): A compact / comfortable / spacious switch that publishes seven --density-* CSS variables to a whole subtree, with a 24px target floor the compact step cannot cross.
- [Custom Cursor](/docs/display/custom-cursor): A pointer replacement scoped to one container — a spring-driven dot that opens into a difference-blended disc over anything interactive, hides the native arrow only while you are inside the box, and never draws on a coarse pointer or under reduced motion.
- [Cursor Trail](/docs/display/cursor-trail): A canvas wake that follows the pointer — frame-sampled positions drawn as a tapering ribbon, an even bead chain or drifting sparks, dissolving on their own lifetime and never mounted on touch or under reduced motion.
- [Cursor Glow Card](/docs/display/glow-card): A card whose surface and border light up around the pointer, with an optional group where the hovered card stays lit and its siblings dim.
- [Holographic Foil Card](/docs/display/holo-foil-card): A card surface that behaves like trading-card holo stock — an iridescent sheet, a fine foil grating and a specular highlight all re-aimed from the pointer.
- [Elastic Drag Card](/docs/display/elastic-drag-card): A card you can grab and fling — it chases the pointer on a spring, tilts with its own drag velocity, and springs home or docks into a snap point on release.
- [Magnetic Grid](/docs/display/magnetic-grid): A lattice of tiles that leans toward — or away from — the cursor, resolved for every tile from a single pointer listener with distance falloff.
- [Canvas Reveal Hover](/docs/display/canvas-reveal-hover): A panel that answers the pointer with a seeded dot matrix on a canvas beneath its content — squares ignite outward from where the cursor crossed the border, and dissolve when it leaves.
- [Split Screen Hover](/docs/display/split-screen-hover): Full-height panels that share one row and rebalance around the pointer — the hovered or focused panel takes the width and opens its copy, the rest compress and dim.
- [Parallax Layers](/docs/display/parallax-layers): A depth wrapper — each child declares a depth and translates at that rate as the container passes the viewport, with an optional pointer nudge, one rAF and no re-renders.
- [Scroll Velocity Skew](/docs/display/scroll-velocity-skew): A wrapper that leans and slightly scales its content in proportion to scroll velocity, then eases back to neutral the moment scrolling stops.
- [Logo Morph](/docs/display/logo-morph): One SVG shape that travels between several logo or icon paths — normalised at runtime so the points pair up, and cross-fading instead of tearing when they cannot.
- [Wave Divider](/docs/display/wave-divider): A live seam between two sections — stacked wave layers re-sampled every frame from two counter-travelling harmonics, with an opaque front wave painted in the next section's own token.
- [Line Draw on Scroll](/docs/display/line-draw-scroll): SVG paths that draw themselves as the block scrolls through the viewport, dashoffset unwinding stroke by stroke.
- [API Changelog Diff](/docs/display/api-changelog-diff): An endpoint-level diff between two API versions — grouped by added, removed, changed and deprecated, expandable to the field-level story, with breaking counted apart from additive and every sunset window counted in whole days.
- [QR Login](/docs/display/qr-login): A phone-scan sign-in panel that walks waiting → scanned → approved → expired, attributes the scan so a wrong one can be rejected, and shows a derived pairing phrase instead of the code.
- [Release Health](/docs/display/release-health): A per-release stability readout — adoption derived from session counts, crash-free session and user rates against the payload's own bars, the change from the previous release by semver precedence, and the top crash groups with what it would take to clear the bar.
- [Feature Flag Rollout](/docs/display/feature-flag-rollout): The rollout control for one flag — a hashed percentage gate with its estimated reach, ordered first-match-wins targeting rules, and a live evaluation preview that names the deciding rule or bucket.

- **Feedback**
- [Spinner](/docs/feedback/spinner): One indeterminate loader, seven shapes — three boxed (ring, dual-ring, bars) and four inline dot rows (dots, ellipsis, bounce, wave), colored by a single tone prop or plain currentColor.
- [Progress Meter](/docs/feedback/progress-meter): One progress contract, two geometries — a linear bar or a compact ring, both with determinate and indeterminate modes, four tones and four sizes.
- [Banner](/docs/feedback/banner): A page-top announcement bar with info, accent and destructive variants, a real action link and consumer-owned dismissal.
- [Animated Tooltip](/docs/feedback/animated-tooltip): A self-contained hover/focus tooltip with a spring pop-in and a reduced-motion fallback — no Radix or floating-ui required.
- [Skeleton](/docs/feedback/skeleton): A loading-placeholder primitive — line, circle and rect shapes with pulse or shimmer motion — that mirrors the layout it stands in for.
- [Callout](/docs/feedback/callout): An inline highlight box for docs, forms and explanatory copy — info, success, warning and danger variants with a tinted accent bar and default icon per variant.
- [Scroll Progress](/docs/feedback/scroll-progress): A thin fixed bar that tracks page or container scroll position by writing transform directly to the DOM — no React state, no re-renders.
- [Typing Indicator](/docs/feedback/typing-indicator): A chat presence indicator — optional avatar, a receiver-side bubble of waving dots, and a name line that collapses for groups.
- [Emoji Reaction](/docs/feedback/emoji-reaction): A reaction bar of tallied emoji chips plus a keyboard-navigable picker for adding one more.
- [Confirm Dialog](/docs/feedback/confirm-dialog): One confirmation dialog for every destructive action — async pending, inline failure and type-to-confirm.
- [Success Check](/docs/feedback/success-check): An SVG outcome mark that draws its ring and then its stroke — a check for success, a cross for failure.
- [Toast Stack](/docs/feedback/toast-stack): A self-contained toast system — newest slides in, older ones stack behind it, hover expands the pile into a list.
- [Confetti](/docs/feedback/confetti): A DOM-particle celebration burst layer — bump a counter to fire confetti at any point inside a relative container.
- [Cookie Consent](/docs/feedback/cookie-consent): A bottom-fixed cookie consent bar that persists the visitor's accept/decline choice to localStorage and never re-appears once decided.
- [Onboarding Tour](/docs/feedback/onboarding-tour): A spotlight-style product walkthrough — dims the page, cuts a rounded hole around each step's real target, and positions an auto-flipping tooltip card beside it.
- [Error State](/docs/feedback/error-state): An error panel — inline/card/page density, safe unknown-error extraction, a collapsible stack trace, a copyable error code and a real retry pending state.
- [Drawer](/docs/feedback/drawer): An edge-anchored drawer with drag-to-dismiss, snap points and scroll-aware pull-to-close — hand-rolled, no vaul.
- [Popover](/docs/feedback/popover): A click-triggered floating panel that portals past clipping ancestors, then flips, shifts and size-caps itself against the nearest scrollable boundary.
- [Hover Card](/docs/feedback/hover-card): A hover-and-focus card for arbitrary rich content — avatar, stats, links, buttons — with an open delay, a close grace period the pointer can cross into, clip-aware flipping and tap-to-toggle on touch.
- [Feedback Widget](/docs/feedback/feedback-widget): A corner feedback launcher and collect-and-send panel with a real idle → submitting → success → error state machine.
- [Loading Overlay](/docs/feedback/loading-overlay): A scrim that freezes one region or the whole viewport while work is in flight — delay-gated so short requests never flash, min-duration held so it never blinks out, and inert underneath so Tab cannot walk into the frozen form.
- [Shortcuts Dialog](/docs/feedback/shortcuts-dialog): A grouped keyboard cheat sheet on the ? key — platform-correct glyphs, live filtering, focus trap and a body-counted scroll lock.
- [Top Loading Bar](/docs/feedback/top-loading-bar): A thin route and request bar that climbs asymptotically while work is in flight, with a delay grace period, a minimum visible duration, a controlled mode and an optional spinner.
- [Error Boundary](/docs/feedback/error-boundary): A real React error boundary — keyed remount on reset, automatic recovery when resetKeys change, a consecutive-failure guard, onError reporting with the component stack, and dev-only stack details.
- [Announcement](/docs/feedback/announcement): A compact inline announcement link with an optional label, icon and directional CTA cue.
- [Save Indicator](/docs/feedback/save-indicator): The autosave line from a document editor's toolbar — Saving… holds a minimum beat, Saved fades back to "Last saved 3 minutes ago", and an error stays put with a Retry.
- [Permission Prompt](/docs/feedback/permission-prompt): A pre-permission explainer card that says why a capability is needed before the browser's one-shot dialog is spent, with per-permission recovery steps once it's blocked.
- [Connection Status](/docs/feedback/connection-status): An online / offline / reconnecting bar with an exponential-backoff retry countdown, a manual retry button and SSR-safe browser subscription.
- [Inline Error Summary](/docs/feedback/inline-error-summary): A top-of-form error summary where every row scrolls to and focuses the field it names — persistent live region, self-focusing panel, and an onNavigate hook for fields inside collapsed sections.
- [Health Check List](/docs/feedback/health-check-list): A self-diagnostics panel — one independently re-runnable probe per row, shape-plus-word statuses, expandable evidence, real fix actions and a counts-and-verdict summary.
- [Status Timeline](/docs/feedback/status-timeline): A read-only progress thread for an async run — icon plus word per stage, a live clock on the running one, expandable failures and a settled-run summary.
- [Diff Confirm](/docs/feedback/diff-confirm): A confirmation dialog that shows the change list first — grouped create/update/delete counts, expandable before → after rows, type-to-confirm past a destructive threshold, and a failure state that keeps the plan on screen.
- [Rate Limit Notice](/docs/feedback/rate-limit-notice): A 429 panel with a self-correcting cooldown clock — absolute-instant countdown, auto-unlock with milestone-only announcements, remaining quota with two urgency levels, consecutive-backoff labelling and an upgrade CTA.
- [Conflict Resolver](/docs/feedback/conflict-resolver): A field-level three-way merge for concurrent edits — base/mine/theirs per field, only the genuinely conflicting ones asked about, bulk fill with per-field override, and a merged record on submit.
- [Popconfirm](/docs/feedback/popconfirm): A confirmation anchored to the control that raised it — non-modal, keyboard-complete, one-shot, with a pending state and an inline rejection that keeps the panel open.
- [Pull To Refresh](/docs/feedback/pull-to-refresh): A pull-down-to-refresh wrapper: a rubber-banded drag claimed only while the scroller is at the top, a threshold that arms the release, an async refresh held until it settles, and a keyboard-reachable refresh button.
- [Undo Toast](/docs/feedback/undo-toast): An optimistic-delete toast: the row disappears at once, a countdown ring holds the destructive commit, and hover or focus pauses the window.
- [Offline Indicator](/docs/feedback/offline-indicator): An offline bar for apps that queue work — it names the changes waiting, proves reconnection with an injected probe instead of navigator.onLine, and replays the queue with a per-action verdict instead of declaring success.
- [Session Expiry](/docs/feedback/session-expiry): A sign-out warning that arms at a threshold before an injected expiry instant — live countdown, one-shot refresh, a closed state that says why, and cross-tab dismissal over BroadcastChannel.
- [Maintenance Banner](/docs/feedback/maintenance-banner): A scheduled-window notice that counts down to the start, switches to an in-progress state with an elapsed bar, and clears itself once the window ends — every verdict derived from an injected instant.
- [Unsaved Changes Guard](/docs/feedback/unsaved-changes-guard): A three-way exit for unsaved work — beforeunload armed only while dirty, in-app navigation held through an injected navigate handler, and a save / discard / stay dialog instead of the browser's bare prompt.
- [Progress Toast](/docs/feedback/progress-toast): A toast bound to one long job — determinate or indeterminate progress, a live percentage and time left in the progressbar's aria-valuetext, cancel while it runs, and terminal states that stay long enough to read with a retry on failure.
- [Social Proof Toast](/docs/feedback/social-proof-toast): A rotating recent-activity notice: one entry every N seconds at most, paused by hover, focus and a hidden tab, with a mute control that reports back through a callback.
- [Exit Intent](/docs/feedback/exit-intent): A leave-detector and its surface — a pointer crossing the top edge or a fast scroll-up opens a dismissable payload once per session, and never over a field somebody is typing into.
- [Passkey Prompt](/docs/feedback/passkey-prompt): A passkey enrolment card that asks the device what it can do before offering anything, runs the WebAuthn ceremony you inject through an AbortSignal, and treats a closed sheet as a retriable answer instead of an error.
- [Announcer](/docs/feedback/announcer): A screen-reader announcement centre — two always-mounted live regions, a queue that spaces messages out, an invisible marker that forces repeats to be read, and a timed clear.
- [Dismissible](/docs/feedback/dismissible): A wrapper that adds a close button to any content and remembers it was closed — for this tab, forever, or until the copy is versioned up — with an undo window before anything is written.
- [Overflow Tooltip](/docs/feedback/overflow-tooltip): Text that reveals itself in a tooltip only when it is really truncated — width probe for a single line, height probe for a line clamp, and nothing at all when it fits.
- [Retry Countdown](/docs/feedback/retry-countdown): A backoff card that derives every wait from the schedule you pass — attempt against the cap, a ring draining to the next automatic attempt, a retry-now that skips the wait, the reason the last attempt failed, and a terminal state at the cap that offers your escape hatch instead of a dead button.
- [Impersonation Banner](/docs/feedback/impersonation-banner): The bar support staff sees while acting as a customer — whose account this is, who is inside it, what the grant may write, a live countdown to the automatic cut-off, and an exit that is never blocked.
- [Partial Failure Summary](/docs/feedback/partial-failure-summary): The receipt for one bulk action that half worked — counts as a sentence, failures grouped by cause, and a retry scoped by whether the successes were committed or rolled back.

- **Navigation**
- [Dock](/docs/navigation/dock): A macOS-style dock — icon tiles magnify as the cursor approaches, with spring physics and pure-CSS label bubbles.
- [Animated Tabs](/docs/navigation/animated-tabs): A controlled tab strip whose active indicator glides between tabs — underline and pill variants via motion layout animation.
- [Breadcrumbs](/docs/navigation/breadcrumbs): An accessible hierarchical breadcrumb trail with collapsible overflow — keeps deep paths short until the consumer asks to see the middle.
- [Pagination](/docs/navigation/pagination): Page-number navigation with a sliding sibling window, edge pinning, and an ellipsis only when the page count actually needs one.
- [Stepper](/docs/navigation/stepper): A horizontal wizard progress indicator — completed steps are clickable to go back, the current and future steps never are.
- [File Tree](/docs/navigation/file-tree): An accessible, keyboard-navigable hierarchical file/folder tree with expand-collapse disclosure and controlled selection.
- [Bottom Nav](/docs/navigation/bottom-nav): A mobile tab bar with badges, safe-area padding and an indicator that measures the active item and glides to it.
- [Segmented Control](/docs/navigation/segmented-control): An iOS-style exclusive picker whose selected thumb slides between options, with cva sizes and full radiogroup keyboard support.
- [TOC Scrollspy](/docs/navigation/toc-scrollspy): An article outline that follows the reader — headings are watched with one IntersectionObserver and a rail slides to the current section.
- [Sidebar Nav](/docs/navigation/sidebar-nav): A grouped app sidebar with collapsible sections, icons, badges, an active-item indicator and an icon-only collapsed rail.
- [Link Preview](/docs/navigation/link-preview): An inline link that reveals a hoverable preview card — thumbnail, title, description and domain — with edge-aware flipping and touch-safe degradation.
- [Floating Navbar](/docs/navigation/floating-navbar): A header that hides on scroll-down and reappears on scroll-up, giving long reading surfaces the vertical space back without losing the nav.
- [Command Palette](/docs/navigation/command-palette): A ⌘K-style command palette — portal dialog, fuzzy subsequence search, grouped commands, recent items and full keyboard navigation.
- [Sticky Header](/docs/navigation/sticky-header): An in-flow page header that stays pinned to the top and reacts to scroll — shrinking its height, gaining a blurred glass surface, or hiding on scroll-down.
- [Mega Menu](/docs/navigation/mega-menu): A site navigation bar whose entries drop a wide multi-column sheet across the whole navbar — portalled past clipping ancestors, opened with hover intent, and folded into an accordion when it gets narrow.
- [Context Menu](/docs/navigation/context-menu): A right-click / long-press menu that opens at the pointer — checkbox rows, submenus, typeahead, and flipping bounded by the nearest clipping ancestor.
- [Dropdown Menu](/docs/navigation/dropdown-menu): A generic dropdown menu — any trigger, structured rows (commands, checkboxes, radio groups, submenus), typeahead and clipping-aware placement.
- [Workspace Switcher](/docs/navigation/workspace-switcher): A workspace / organization switcher — active workspace in the trigger, grouped searchable menu in a portalled panel, pinned create + settings footer.
- [App Launcher](/docs/navigation/app-launcher): A nine-dot app switcher — a grid button that drops a portalled tile grid, with real links, grid keyboard navigation, groups, pinned and recent rows, and a search box once the suite outgrows a 3×3.
- [Nav Rail](/docs/navigation/nav-rail): A narrow vertical icon navigation bar that widens into a labelled column — keyboard-reachable tooltips, top/bottom zones, badges and a controllable expanded state.
- [Cursor Pagination](/docs/navigation/pagination-cursor): A load-more control for cursor APIs — one cursor is never fetched twice, the scroll sentinel has a budget, retries keep the rows already on screen, and the count is announced.
- [Tab Overflow](/docs/navigation/tab-overflow): A measured tab strip that folds the tabs it cannot fit into a "More" menu, and never lets the selected tab be the one that disappears.
- [Skip Link](/docs/navigation/skip-link): A hidden-until-focused link cluster that moves focus — not just the scroll — to a page landmark, clearing a sticky header by a configurable offset.
- [Toolbar Overflow](/docs/navigation/toolbar-overflow): An action bar that measures itself off-screen and moves the actions it cannot fit into a trailing overflow menu, lowest priority first.
- [Menu Bar](/docs/navigation/menu-bar): A desktop application menubar — one click opens, hover then travels between menus, with submenus, shortcut hints, checkable rows and a full roving keyboard.
- [Back Button](/docs/navigation/back-button): A back control that traverses history when there is an in-app page behind it and follows a real href when the visitor arrived cold — so a deep link never dead-ends.
- [Breadcrumb Dropdown](/docs/navigation/breadcrumb-dropdown): A breadcrumb trail that measures itself and folds the middle segments it cannot fit into a dropdown, keeping the root and the current page painted at every width.
- [Page Transition](/docs/navigation/page-transition): A route swap wrapper: it holds the outgoing view until the incoming one is ready, animates the change, puts each route's scroll offset back and moves focus into the new view.
- [Scroll Restoration](/docs/navigation/scroll-restoration): Remembers where every scroll container was when a history entry was left and puts it back on Back — including the inner panes the browser never restores.
- [Morphing Nav Indicator](/docs/navigation/morphing-nav-indicator): A nav landmark whose active indicator is one DOM-measured capsule that travels and reshapes to fit any label, driven by a spring you can tune.
- [Sticky CTA Bar](/docs/navigation/sticky-cta-bar): A conversion bar that arrives once a sentinel element — usually the hero's own CTA — leaves the viewport, docks to the bottom or top edge, and stays dismissed for the rest of the session.
- [Environment Switcher](/docs/navigation/environment-switcher): A four-state environment switcher that tints the target you are pointed at, compares deploy versions as real semver so a stale preview says so, blocks what your role cannot enter with the reason, and gates production behind a typed confirm.

- **Media**
- [Marquee](/docs/media/marquee): A pure-CSS infinite scrolling belt for logo walls and testimonial strips — seamless loop, edge fade, hover pause.
- [Comparison Slider](/docs/media/comparison-slider): A draggable before/after slider — two aligned layers, one clip-path divider, works with any ReactNode.
- [Image Zoom](/docs/media/image-zoom): A clickable thumbnail that opens a full-screen lightbox — fade + scale transition, click/Esc to close, focus managed.
- [Carousel](/docs/media/carousel): An embla-powered slide carousel — autoplay with hover-pause, looped or bounded navigation, arrow buttons and synced pagination dots.
- [Masonry Grid](/docs/media/masonry-grid): A pure-CSS waterfall grid that stacks children into responsive columns without measuring layout.
- [Video Embed](/docs/media/video-embed): A lite facade for YouTube/Vimeo — a poster and play button stand in for the real iframe until the user clicks, so no third-party embed script ever loads uninvited.
- [Lightbox Gallery](/docs/media/lightbox-gallery): A thumbnail grid that opens a full-screen lightbox with arrow navigation, a counter, captions and focus return.
- [Image Placeholder](/docs/media/image-placeholder): A progressive image loader — skeleton, blur-up or color placeholder, a 400ms cross-fade on load and an error panel when the URL fails.
- [Photo Stack](/docs/media/photo-stack): A tilted deck of photos — drag, click or arrow-key the top one away and it cycles to the bottom, forever.
- [Audio Player](/docs/media/audio-player): A minimal audio player card wrapping the native <audio> element — play/pause, seek, and mm:ss time, fully token-styled.
- [Device Frame](/docs/media/device-frame): A CSS-only phone or browser shell for framing a screenshot or a live component in marketing layouts.
- [Voice Recorder](/docs/media/voice-recorder): A real MediaRecorder-backed voice recorder — live AnalyserNode waveform, pause/resume, mic-permission handling, and a listen-before-you-send preview.
- [Image Cropper](/docs/media/image-cropper): A drag/zoom/rotate image cropper with pointer + keyboard control that exports a real cropped Blob via canvas.
- [Video Player](/docs/media/video-player): A self-hosted video player with a custom control skin — scrub with buffered ranges, volume memory, speed menu, subtitles, fullscreen, PiP, keyboard shortcuts and a real error state.
- [Video Hover Preview](/docs/media/video-hover-preview): A thumbnail card that plays a muted clip on hover or keyboard focus — dwell-delayed lazy load, pointer-x scrubbing, hairline progress, and a poster fallback when the clip fails.
- [Camera Capture](/docs/media/camera-capture): A real getUserMedia webcam capturer — live preview, countdown shutter, mirrored canvas export, and a keep/retake review step that hands back a JPEG Blob.
- [3D Marquee](/docs/media/perspective-marquee): A four-state image collection that drifts through staggered lanes on a responsive, perspective-tilted plane.
- [Image Annotation](/docs/media/image-annotation): Click an image to drop numbered pins, drag them around and attach a note — coordinates stored as percentages of the picture, so they never drift when the image resizes.
- [Audio Waveform](/docs/media/audio-waveform): A canvas waveform with a click/drag/keyboard scrubber — feed it precomputed peaks or let it decode a src, and it reports seeks while your own audio element plays.
- [Media Grid Selectable](/docs/media/media-grid-selectable): A multi-select photo and video grid — Shift range, cmd/ctrl toggle, two-dimensional arrow keys, a selection cap, lazy thumbnails and type-icon fallbacks.
- [Audio Visualizer](/docs/media/audio-visualizer): A canvas spectrum, waveform, ring or level meter driven by a real AnalyserNode — you own the mic, it only reads it.
- [File Preview](/docs/media/file-preview): A per-file preview card — image/video thumbnails, a working audio play bar, type icons with metadata, card/row/tile variants and leak-free object URLs.
- [PDF Viewer](/docs/media/pdf-viewer): A document viewer shell with a pluggable render layer — controlled paging synced to scroll, fit-width/fit-page zoom that re-fits on resize, a thumbnail rail, text search, keyboard and pinch, and named loading / 404 / damaged / encrypted states.
- [Video Timeline](/docs/media/video-timeline): A controlled scrub track with chapter segments, buffered ranges, keyframe hover previews and draggable in/out trim handles — delta dragging, frame-accurate keys, no player attached.
- [QR Scanner](/docs/media/qr-scanner): A camera QR reader on the native BarcodeDetector with a pluggable decoder — framed scan region, throttled decode loop, per-value cooldown, and a camera that is always released.
- [Screen Recorder](/docs/media/screen-recorder): A real getDisplayMedia screen recorder — surface picker, optional microphone mixdown, live duration and size, and a preview you can download.
- [Audio Transcript](/docs/media/audio-transcript): A timestamped, speaker-labelled transcript that follows the playhead, hands scrolling back the moment the reader takes over, and seeks to the exact start of any line you click or search for.
- [Pan Zoom](/docs/media/pan-zoom): A pan-and-zoom viewport for content of known size — wheel, pinch and drag anchored under the pointer, a fit / actual-size toolbar, and a full keyboard path.
- [Video Playlist](/docs/media/video-playlist): A queue that sits beside your player — thumbnail rows with duration and watched progress, a now-playing marker, cancellable autoplay-next, shuffle and repeat, and a keyboard-walkable listbox.
- [Avatar Upload](/docs/media/avatar-upload): The whole avatar flow in one control — pick or drop, refuse with a spoken reason, crop square, upload with a progress ring and cancel, and keep the crop when the transfer fails.
- [File Icon](/docs/media/file-icon): An extension-to-icon mark — nine file families, a four-step size scale, tints drawn from your own tokens, and the extension printed whenever the type is unknown.
- [Audio Trimmer](/docs/media/audio-trimmer): A waveform you cut on: two handles bound the kept region, everything outside dims, zoom follows the selection, and a preview starts at the in point and stops itself at the out point.
- [Product Gallery](/docs/media/product-gallery): A thumbnail rail driving one stage — pointer-tracked and keyboard-pannable magnification, inline video entries with duration chips, and a layout that follows its container.
- [Stories Viewer](/docs/media/stories-viewer): A story-format viewer — one segmented progress bar per item, tap zones for previous/next, press-and-hold to pause, and auto-advance across image and video stories.
- [Swipe Cards](/docs/media/swipe-cards): A two-verdict card deck — the top card tilts under the pointer, stamps its verdict as it nears the threshold, commits on distance or flick, and answers to arrow keys, buttons and an undo stack just the same.
- [Scratch Card](/docs/media/scratch-card): A canvas foil erased under the pointer, with a coverage threshold that opens the card itself and a Reveal button that does the same from the keyboard.
- [Equalizer](/docs/media/equalizer): A multi-band graphic equalizer — rotated native faders, a Catmull-Rom response curve through the handles, presets that glide, and a typed gain map out.
- [Lyrics Sync](/docs/media/lyrics-sync): Karaoke-style synced lyrics — an injected playhead lights each line, word by word where word timings exist, keeps it on the anchor until you scroll away, and turns every line into a seek target.
- [Scroll Scrubbed Video](/docs/media/video-scrub-scroll): A pinned section whose scroll distance drives the video playhead — rAF-coalesced seeks, readyState-guarded, collapsing to a poster and a play control when motion or seeking is off the table.
- [Liquid Distortion Image](/docs/media/liquid-distortion-image): A picture that ripples where the pointer touches it — an SVG feTurbulence + feDisplacementMap twin, masked to a soft lens that follows the cursor and settles back when it leaves.
- [Image Accordion](/docs/media/image-accordion): A row of tall image slices where the open panel widens to reveal its caption while the rest compress to labelled slivers.
- [Coverflow Carousel](/docs/media/coverflow-carousel): A 3D perspective ring of covers — the centre faces you, neighbours rotate away into depth with dimming and an optional reflection, driven by one continuous position that drag, horizontal wheel and arrow keys all share.
- [Pinned Scroll Gallery](/docs/media/pin-gallery): A section that pins while its gallery travels sideways — vertical scroll drives a horizontal track of cards, with a progress rail, per-item snap points and a plain scroll-snap scroller when motion is off.
- [Video Chapters](/docs/media/video-chapters): The chapter list beside a player: start times go in, every length, boundary and share of the runtime comes out derived, with the chapter holding the playhead marked, kept in view and filling a progress sliver.
- [360 Spin Viewer](/docs/media/spin-viewer): A turntable image sequence scrubbed by drag, touch and arrow keys — wrapping at both ends, preloaded behind a progress state, and skipping frames that fail.

- **Text**
- [Animated Text](/docs/text/animated-text): Character-level text animation — typewriter, scramble and flowing gradient as one component's variants.
- [Word Rotate](/docs/text/word-rotate): A jitter-free rotating word inside a headline — cycles through a word list with a slide or fade transition and never shifts layout width.
- [Text Reveal](/docs/text/text-reveal): Text that reveals word-by-word or character-by-character as it scrolls into view, with a staggered fade-up-blur entrance.
- [Typewriter](/docs/text/typewriter): A type-and-delete headline that cycles through a list of sentences with a blinking caret.
- [Gradient Text](/docs/text/gradient-text): Polymorphic heading text painted with a token-driven gradient, optionally looping — no hex codes anywhere.
- [Scramble Text](/docs/text/scramble-text): Text that lands as random characters and decodes left to right, on mount, on scroll-in or on hover.
- [Shiny Text](/docs/text/shiny-text): A restrained inline shimmer — one narrow light band loops across muted text, for New badges and quiet links.
- [Highlight Marker](/docs/text/highlight-marker): Highlighter, underline or hand-drawn circle that wipes across a phrase when it scrolls into view.
- [Read More](/docs/text/read-more): A line-clamped text block with an expand/collapse toggle that only appears when content actually overflows.
- [Redacted Text](/docs/text/redacted-text): Blur, black-bar or character-mask a sensitive string with hover / click / press-and-hold reveal — where mask actually removes the plaintext from the DOM.
- [Truncate Middle](/docs/text/truncate-middle): Middle-ellipsis text that keeps both ends readable — a fixed head/tail count, or as many grapheme clusters as the measured width actually fits.
- [Glitch Text](/docs/text/glitch-text): Cyberpunk glitch headline — two pseudo-element copies tear the text into slices and slide, in pure CSS, dead still under reduced motion.
- [Search Highlight](/docs/text/search-highlight): Marks the parts of a text that match a search query — substring, per-word or fuzzy, with escaped queries and a current-match cursor.
- [Fit Text](/docs/text/fit-text): One line of text scaled until it exactly fills the width it was given — headline, KPI number or cover title, sized from a real browser measurement instead of an estimate.
- [Balanced Heading](/docs/text/balanced-heading): A heading that breaks its lines to even lengths instead of stranding one word on the last line — pure CSS text-wrap with a copy-safe fallback for engines that lack it.
- [Pull Quote](/docs/text/pull-quote): An editorial pull quote for body copy — centered, floated left or right with text wrapping around it, or bled past the measure.
- [Link Underline](/docs/text/link-underline): Underline motion for inline body links — slide, center, wipe or thicken — that survives line wraps, descenders, reduced motion and forced colors.
- [Prose](/docs/text/prose): A typographic wrapper for CMS or Markdown HTML: token-only vertical rhythm, heading scale, lists, quotes, code, tables and figures, with size, measure and compact axes.
- [Ruby Text](/docs/text/ruby-text): Ruby annotations for CJK and phonetic glosses — parsed from an inline notation or paired arrays, with a parenthesised fallback, per-annotation alignment and leading reserved up front so hiding the readings never reflows the paragraph.
- [Drop Cap](/docs/text/drop-cap): The oversized opening letter, floated across N lines with its cap-top and baseline solved from the font's metrics — hangs an opening quotation mark and skips short paragraphs.
- [Text Diff](/docs/text/text-diff): A word- or sentence-level diff of two prose versions — one unified flow or two columns, with insertions and deletions marked by underline, strikethrough and screen-reader wording instead of colour alone.
- [Vertical Text](/docs/text/vertical-text): Vertical CJK writing mode — right-to-left columns whose length is a character count, short Latin and digit runs stood upright as tate-chū-yoko, kinsoku column breaks, and an automatic fallback to horizontal when the script would not gain from it.
- [Annotated Text](/docs/text/annotated-text): Prose with notes attached — marked phrases carry a numbered marker, the note opens on hover or focus, and every note is also listed in full under the passage.
- [Anchor Heading](/docs/text/anchor-heading): A heading that owns its anchor — a stable id de-duplicated against the live document, a permanently focusable link that fades in on hover, and one click that deep-links and copies the URL.
- [External Link](/docs/text/external-link): An anchor that decides whether an href leaves your site — SSR-stable, origin declared as a prop — then adds an icon, the noopener patch and a new-window announcement to the ones that do, and nothing at all to the ones that do not.
- [Kinetic Headline](/docs/text/kinetic-headline): A fixed sentence with one rotating slot whose width springs to each incoming word, so the rest of the line glides instead of snapping.
- [Variable Font Scroll](/docs/text/variable-font-scroll): A headline whose variable-font axes interpolate with scroll position, thickening character by character as it crosses the viewport.
- [Outline Fill Text](/docs/text/outline-fill-text): Stroked outline type whose solid copy is wiped in by an animated inset — on scroll, on hover, or on mount.
- [Text Clip Media](/docs/text/text-clip-media): Display type used as a window onto media — a photo, a muted clip or a token gradient fills the glyphs, leans away from the pointer, and degrades to a solid token when the media never arrives.
- [Math Formula](/docs/text/math-formula): A documented LaTeX subset rendered as MathML with a styled CSS fallback — inline and block display, an accessible sentence derived from the source, copy-as-LaTeX, and an explicit refusal for anything outside the subset.
- [Reading Meta](/docs/text/reading-meta): An article byline strip that derives its reading estimate from the word count and switches from the total to what is left once the reader has started.

- **Backgrounds**
- [Grid Dots](/docs/backgrounds/grid-dots): A pure-CSS grid, dot or cross pattern container with a radial fade — a zero-JS decorative backdrop for hero and section surfaces.
- [Aurora](/docs/backgrounds/aurora): An animated aurora-gradient background container — theme-token blobs drifting in pure CSS.
- [Spotlight](/docs/backgrounds/spotlight): A cursor-following radial glow container for section backgrounds — CSS-var tracking with zero re-renders.
- [Meteors](/docs/backgrounds/meteors): A decorative diagonal shooting-star field for hero sections and card backdrops — pure CSS, deterministically scattered.
- [Gradient Mesh](/docs/backgrounds/gradient-mesh): A full-bleed mesh-gradient wash — oversized blurred token blobs drifting past each other as an absolute background layer.
- [Retro Grid](/docs/backgrounds/retro-grid): An 80s synthwave floor — a tiled grid laid flat in perspective, scrolling toward the viewer and dissolving into the horizon.
- [Light Beams](/docs/backgrounds/light-beams): Angled shafts of light falling from the top edge, each breathing on its own tempo and fading out before the bottom.
- [Noise Texture](/docs/backgrounds/noise-texture): An SVG turbulence grain layer that gives flat fills and gradients the tooth of print — optionally jittering like film.
- [Waves](/docs/backgrounds/waves): An SVG wave divider and layered backdrop for section transitions and hero bottoms — pure CSS, no canvas.
- [Particles](/docs/backgrounds/particles): An interactive canvas particle field — dots, linked constellations, snow or fireflies, painted in your text token and scattered by the pointer.
- [Flickering Grid](/docs/backgrounds/flickering-grid): A deterministic canvas square grid with softly changing opacity, responsive density controls and a reduced-motion still frame.
- [Ripple Rings](/docs/backgrounds/ripple-rings): Concentric ripples expanding out of one origin — a pure CSS/DOM sonar backdrop for heroes, empty states and CTA bands.
- [Topography](/docs/backgrounds/topography): A seamlessly tiling contour-map backdrop traced from seeded hash noise — quiet relief lines for docs shells, auth screens and empty states.
- [Starfield](/docs/backgrounds/starfield): A layered parallax star field on one canvas — 2–4 depth layers drifting or warping, seeded so the same sky comes back every time.
- [Hex Grid](/docs/backgrounds/hex-grid): A seamlessly tiling honeycomb backdrop — outlined, tinted or vertex-dotted, with an optional edge fade and a few seeded cells breathing on CSS alone.
- [Circuit Board](/docs/backgrounds/circuit-board): A seamlessly tiling PCB backdrop — seeded traces with 45°/90° corners, pads, vias and component footprints, plus an optional signal pulse.
- [Voronoi Cells](/docs/backgrounds/voronoi-cells): A slowly flowing Voronoi diagram on one canvas — organic cell walls, tinted mosaic or separated pebbles, seeded so the same field comes back every time.
- [Bokeh Lights](/docs/backgrounds/bokeh-lights): Slowly floating out-of-focus light discs on one canvas — seeded for a reproducible picture, blitted from a pre-rendered sprite instead of a per-frame blur.
- [Scanlines](/docs/backgrounds/scanlines): A CRT line grille whose pitch is snapped to the display's physical pixel grid, with an optional one-pixel-per-step roll and a WCAG-clamped flicker.
- [Matrix Rain](/docs/backgrounds/matrix-rain): Falling glyph columns on one canvas — every column keeps its own speed, length and bright head, and glyphs swap in place so the stream reads as changing rather than scrolling.
- [Rain](/docs/backgrounds/rain): Layered canvas rainfall — parallax sheets of streaks sheared by a wind prop, landing as ripples on an implied ground line.
- [Snow](/docs/backgrounds/snow): Canvas snowfall with per-flake sway, a depth ramp from soft foreground bokeh to crisp distant specks, and an optional drift that builds along the bottom edge and settles.
- [Fireflies](/docs/backgrounds/fireflies): Wandering points of light on one canvas — each walks its own eased random path and flashes on its own period, with the glow blitted from a sprite baked once.
- [Constellation](/docs/backgrounds/constellation): A drifting node network on one canvas — every pair closer than the link threshold is stroked, opacity falling off with distance, with optional pointer attraction.
- [Lightning](/docs/backgrounds/lightning): Branching bolts struck at irregular intervals on one canvas — fractal channels with a bright core, a stacked glow, a decaying afterimage and a flash that lifts the whole surface.
- [Plasma](/docs/backgrounds/plasma): The demoscene plasma field on one canvas — sines summed over x, y and time, mapped through a cyclic token palette at low resolution and upscaled to fill the container.
- [Smoke](/docs/backgrounds/smoke): Rising turbulent smoke on one canvas — three scales of a single baked fBm tile, warped per band and thinning with height.
- [Vortex](/docs/backgrounds/vortex): A canvas vortex — particles spiral into one point, winding faster as they fall, trailing comet tails made by fading the buffer instead of storing a path.
- [Silk](/docs/backgrounds/silk): Flowing bands of light on one inline SVG — stacked sine ribbons, each a soft gradient between two chart tokens, drifting slowly enough to read as fabric.
- [Sonar](/docs/backgrounds/sonar): A radar sweep on one canvas — a rotating wedge with a decaying tail over concentric range rings, and contacts that flare when the beam passes and fade until the next one.
- [Nebula](/docs/backgrounds/nebula): A layered interstellar cloud on canvas — token-tinted noise octaves drifting at different rates under a sparse star layer, with depth from parallax.
- [Ink](/docs/backgrounds/ink): Drops of ink opening into water on one canvas — ragged fronts that expand, thin and dissolve, with every overlap deepening like ink on paper.
- [Prism](/docs/backgrounds/prism): One beam split at an implied prism edge into a slowly drifting fan of token-coloured bands — additive light on dark surfaces, subtractive ink on light ones.
- [Galaxy](/docs/backgrounds/galaxy): A spiral galaxy on one canvas — stars threaded onto logarithmic arms, a disc that rotates differentially, and a bright core, all painted in your theme tokens.
- [Orbits](/docs/backgrounds/orbits): Concentric orbital paths with bodies at their own periods — fading arc trails, a chord whenever two orbits line up, and radii and periods as props so the field can encode real values.
- [Dot Globe](/docs/backgrounds/dot-globe): A rotating sphere of dots on one canvas — lat/lng places or a Fibonacci lattice, projected orthographically with a dimmed far hemisphere, pulsing markers and optional drag-to-spin.
- [Metaball Blobs](/docs/backgrounds/metaball-blobs): A gooey organic background — token-tinted blobs drift on seeded orbits and fuse into one body through an SVG alpha-threshold filter, optionally leaning toward the pointer.
- [Warp Tunnel](/docs/backgrounds/warp-tunnel): A hyperspace speed tunnel on one canvas — tapered streaks leave a movable vanishing point and accelerate outward with perspective foreshortening.
- [Progressive Blur](/docs/backgrounds/progressive-blur): A gradual-blur edge treatment — stacked backdrop-filter layers with geometrically growing radii, each masked to its own slice, so content melts into frosted glass toward one edge.

- **Charts**
- [Donut Chart · Center Stat](/docs/charts/chart-donut-stat): A four-state donut widget with a headline stat in the hole and a value/percentage legend, driven by one contract.
- [Bar Chart · Interactive](/docs/charts/chart-bar-interactive): A four-state bar chart card with per-series big-number toggles that switch which series the bars plot.
- [Stat Card · Sparkline](/docs/charts/sparkline-stat-card): A KPI card — headline figure, tone-aware delta badge and a minimal sparkline — with four data states from one contract.
- [Area Chart (Stacked)](/docs/charts/chart-area-stacked): A four-state stacked area chart card whose legend chips toggle single series, re-stacking the survivors and rescaling the y-axis, with a per-series plus total tooltip.
- [Multi-Series Line Chart](/docs/charts/chart-line-multi): A four-state multi-series line chart whose shared crosshair reads every series at the hovered x, ranked by value, with null gaps left broken.
- [Radial Progress Chart](/docs/charts/chart-radial-progress): Concentric progress rings — one ring per metric against its own target, a summary number in the hole, and over-target values capped at one lap instead of drawing through.
- [Funnel Chart](/docs/charts/chart-funnel): A four-state conversion funnel pairing a tapering silhouette with per-stage counts, step conversion and cumulative conversion.
- [Scatter Chart (Quadrants)](/docs/charts/chart-scatter-quadrant): A four-state decision-matrix scatter chart with a median or fixed crosshair, labelled quadrants, collision fan-out and a screen-reader data table.
- [Radar Comparison Chart](/docs/charts/chart-radar-compare): A four-state radar chart that compares two or three subjects across mixed-unit dimensions, normalizing each spoke to 0–100 while the tooltip keeps the raw numbers.
- [Waterfall Chart](/docs/charts/chart-waterfall): A bridge chart whose floating bars break an opening balance into the increases and decreases that produce the closing balance, with derived anchor totals and step connectors.
- [Gauge Chart](/docs/charts/chart-gauge): A needle dial for one metric against contract-driven threshold bands, with explicit boundary attribution and an out-of-range caret.
- [Bullet Chart](/docs/charts/chart-bullet): A four-state bullet chart — one row per KPI with its own scale, a measure bar read against a target tick and qualitative bands, and honest markers when a value or target falls off the scale.
- [Candlestick Chart](/docs/charts/chart-candlestick): A four-state OHLC candlestick chart: hollow-up / solid-down bodies drawn as a custom recharts shape, with doji and limit-locked sessions kept visible as a 2px line.
- [Histogram](/docs/charts/chart-histogram): A four-state distribution chart that bins raw values itself — auto / fixed-count / fixed-width bins with optional percentile reference lines.
- [100% Stacked Bar Chart](/docs/charts/chart-stacked-bar-pct): A four-state 100% stacked bar chart whose segments are apportioned with largest-remainder rounding, so every bar's percentages add up to exactly 100.
- [Step Line Chart](/docs/charts/chart-step-line): A four-state step chart for discrete state over time — the value holds flat and then jumps, with before/middle/after alignment, change markers and a change table.
- [Range Area Chart](/docs/charts/chart-range-area): A four-state range-area card: a center line inside one or two nested uncertainty bands, with contradictory bounds repaired and disclosed instead of drawn as crossed polygons.
- [Sankey Diagram](/docs/charts/chart-sankey): A four-state Sankey that checks the books before it draws — per-node flow conservation, cycle detection, longest-path layering, ribbons that skip layers, and an sr-only flow table.
- [Cohort Retention Grid](/docs/charts/chart-cohort-retention): A triangular cohort-retention table — one row per entry cohort, one column per period since signup, colour-graded cells that also print their own percentage and absolute count.
- [Heatmap Matrix](/docs/charts/chart-heatmap-matrix): A generic rows × columns value grid with sequential and diverging colour scales, a configurable domain, and missing values kept distinct from zero.
- [Grouped Bar Chart](/docs/charts/chart-bar-grouped): A four-state grouped bar chart that flips to horizontal rows when columns would go thinner than 10px, textures every series so colour is never the only cue, and keeps gaps distinct from zeros.
- [Pareto Chart](/docs/charts/chart-pareto): A four-state Pareto chart — bars ranked high to low with a cumulative-percentage curve on a second axis, a configurable 80% line, and the crossing bar named in words.
- [Box Plot](/docs/charts/chart-boxplot): A four-state box plot comparing distributions side by side — R-7 quartiles, Tukey 1.5×IQR whiskers that stop on real observations, de-overlapped outliers, and raw points for groups too small for quartiles.
- [Bump Chart](/docs/charts/chart-bump): A four-state bump chart that plots position instead of value — reversed integer rows, competition ranking for ties, edge labels at both ends, and a broken line wherever an entity is off the board.
- [Slope Chart](/docs/charts/chart-slope): A four-state slope chart for two points in time — labelled at both ends, with a pooling label-avoidance pass, leader lines that go back to the real endpoint, and a same-unit check that refuses to draw a slope across two dimensions.
- [Sunburst Chart](/docs/charts/chart-sunburst): A four-state zoomable sunburst in hand-rolled SVG — concentric rings whose sweeps compose exactly, click-to-zoom with a breadcrumb, keyboard-walkable slices and an sr-only breakdown table.
- [Chord Diagram](/docs/charts/chart-chord): A four-state chord diagram drawn in plain SVG — entities on a ring sized by inflow plus outflow, bezier ribbons sized by volume, symmetric pairs or directed arrowheads, a keyboard-walkable ring and an sr-only flow table.
- [Violin Plot](/docs/charts/chart-violin): A four-state violin plot that estimates each group's density itself — Silverman bandwidth, a quartile box inside the silhouette, prominence-tested peak detection and an sr-only stats table.
- [Ridgeline Plot](/docs/charts/chart-ridgeline): A four-state ridgeline (joyplot) that estimates every row's density itself — one shared axis, overlapping curves, keyboard-walkable rows with a peak and median readout, and a pinnable median comparison line.
- [Parallel Coordinates](/docs/charts/chart-parallel-coordinates): A four-state parallel coordinates plot for mixed-unit records — per-axis normalisation, drag-to-brush filtering that dims rather than deletes, draggable axis order, and a rank-correlation reading for every neighbouring pair.
- [Chart Scatter Matrix](/docs/charts/chart-scatter-matrix): A SPLOM whose panels share one domain per variable, brushes a record across every panel at once, puts distributions on the diagonal and Pearson r on the upper triangle, and states its panel cap instead of melting on 20 variables.
- [Marimekko Chart](/docs/charts/chart-marimekko): A four-state mosaic chart where column width is each column's share of the total and stacked height is its internal mix, so a cell's area is its share of everything — with a minimum-width floor, texture tiers past the fifth band, and labels that drop out cell by cell.
- [Dumbbell Chart](/docs/charts/chart-dumbbell): A four-state dumbbell chart — one row per category, two dots joined by a bar on one shared scale, ranked by valence-aware change with direction carried by shape, arrow and row order as well as colour.
- [Streamgraph](/docs/charts/chart-stream): A four-state streamgraph whose bands stack on a wiggle-minimising baseline — inside-out ordering, overshoot-free monotone curves, a per-column readout and an sr-only series-by-tick table.
- [Chart Bubble](/docs/charts/chart-bubble): A four-state bubble chart in plain SVG: area-proportional radii from a zero baseline, hue paired with fill texture for the fourth dimension, and an optional time slider that interpolates positions between snapshots.
- [Population Pyramid](/docs/charts/chart-pyramid): A four-state back-to-back band chart — two cohorts mirrored on one shared scale, with per-side totals, an earlier period overlaid as dashed outlines, and every band keyboard-reachable with a readout.
- [Hexbin Density Plot](/docs/charts/chart-hexbin): A four-state hexbin that bins the raw scatter itself — nearest-centre binning, sqrt / linear / quantile bands, colour paired with hexagon size, a live bin-radius control and a ranked screen-reader table.
- [Word Cloud](/docs/charts/chart-word-cloud): A four-state word cloud that sizes terms by the square root of their count and packs them along a deterministic spiral, with every word focusable (a button once onSelect is wired) and a ranked list for screen readers.
- [Venn Diagram](/docs/charts/chart-venn): An area-proportional Venn for two or three sets that measures what it drew and falls back to a labelled region table when circles cannot tell the truth.
- [Polar Area Chart](/docs/charts/chart-polar-area): A Nightingale rose where every period owns an equal angle and the radius is area-corrected, drawing measured zeros, missing readings and below-zero periods each in their own way.
- [Radial Bar Chart](/docs/charts/chart-radial-bar): Concentric arc bars — one ring per category on one shared ceiling, with a per-ring target tick, capped overflow, anticlockwise negatives and an sr-only value table.
- [Tile Grid Map](/docs/charts/chart-tile-map): A grid cartogram where every region is an equal-size tile at a hand-supplied grid position, classed by quantile, equal interval or manual breaks — choropleth readability with no projection and no geographic data.
- [Chart Burndown](/docs/charts/chart-burndown): A four-state sprint burndown: remaining work against an ideal that only burns on working days, scope changes drawn as steps, and a projected finish from a burn rate a descope cannot fake.
- [Cumulative Flow Diagram](/docs/charts/chart-cumulative-flow): A four-state cumulative flow diagram that reads band thickness as work in progress and the horizontal gap between the arrival and delivery curves as approximate lead time, annotated on the plot and reachable by keyboard.
- [Control Chart](/docs/charts/chart-control): A four-state SPC control chart that estimates its own limits from the moving range and flags every rule violation with the rule it broke.
- [Waffle Chart](/docs/charts/chart-waffle): A four-state waffle (square pie) that apportions categories onto a countable grid with largest-remainder rounding, reserves a cell for shares worth less than one, and keeps the palette readable past five categories.
- [Arc Diagram](/docs/charts/chart-arc-diagram): A four-state arc diagram in plain SVG — nodes on one sequence-preserving baseline, half-ellipse arcs sized by weight, back-edges below the axis, hover to raise a node's arcs, and a keyboard walk over an sr-only node and arc table.
- [Combo Chart (Dual Axis)](/docs/charts/chart-combo-dual-axis): A four-state bar-plus-line combo chart whose two axes are built from one shared row structure, so a zero reading lands on the same gridline in both units and no gridline is meaningful on only one scale.
- [Legend Toggle](/docs/charts/chart-legend-toggle): A standalone, controlled chart legend — aria-pressed chips in a roving-tabindex toolbar, double-click or Enter to isolate one series, show-all / hide-all, and a guard that keeps the last series from blanking the chart.
- [Bar Race](/docs/charts/chart-bar-race): A four-state bar chart race — rows re-rank by transform so an overtake glides instead of cutting, with play/pause, timeline scrubbing, speed gears and a declared top-N board.
- [Small Multiples](/docs/charts/chart-small-multiples): A four-state trellis grid — one repeated mark per category, every panel on one shared y scale with a free-scale toggle that states its cost, axis labels only on the edge panels, and a measured column count that wraps rather than shrinking cells past legibility.
- [Beeswarm](/docs/charts/chart-beeswarm): A four-state beeswarm that keeps every observation — greedy collision-free placement that never moves a dot along the value axis, grouped rows, hover and keyboard readouts per point, and an out-loud sampling notice instead of a silent cap.
- [Lollipop Chart](/docs/charts/chart-lollipop): A four-state lollipop chart — one hairline and one dot per category on a shared scale, ranked, with an optional reference baseline and a second dimension carried by dot size or shade.
- [Icicle](/docs/charts/chart-icicle): A four-state linear-partition hierarchy chart in DOM blocks — one level per row or column, length proportional to value, click-to-drill with a breadcrumb, honest label truncation with tooltips, and an sr-only breakdown table.
- [Horizon](/docs/charts/chart-horizon): A four-state horizon chart that folds each series into stacked bands and encodes magnitude as depth of colour, so a dozen dense time series fit in a screenful — one shared band scale, mirrored or split negatives, and a column cursor that reads every lane at the same instant.
- [Punchcard](/docs/charts/chart-punchcard): A weekday × hour dot grid — every Monday 09:00 folded into one bucket, dot area on a square-root scale, switchable size / colour / both encodings and the aggregation timezone stated on the card.
- [Alluvial Diagram](/docs/charts/chart-alluvial): A four-state alluvial that re-draws the same categories at every reading — band width is how many members moved, one global category order chosen by measured crossing cost, and a retained / arrived / left readout for whatever you point at.
- [Error Bars](/docs/charts/chart-error-bars): A four-state categorical error-bar chart: one point estimate per category with an interval whose meaning — SD, SE, CI or custom bounds — is declared in the contract and printed in the legend, tooltip and data table.
- [Regression Scatter](/docs/charts/chart-regression-scatter): A four-state scatter that fits its own least-squares trend — linear, logarithmic or exponential — draws the confidence or prediction band beside R², slope and sample size, flags outliers by studentised residual, and refuses to invent a fit it cannot compute.
- [Marginal Histogram](/docs/charts/chart-marginal-histogram): A four-state scatter plot with a binned distribution along each axis — three regions on one shared, pixel-aligned coordinate system, linked by hover.
- [Contour](/docs/charts/chart-contour): A four-state 2-D density contour plot — Gaussian KDE on a grid, marching-squares rings drawn at highest-density levels, a live smoothing slider, an optional raw scatter underneath, and a hard sample floor under which it refuses to smooth at all.
- [Survival Curve](/docs/charts/chart-survival): A four-state Kaplan–Meier card — stepped survival curves computed from raw follow-up times, censoring ticks on the curve, a log-log confidence band and a numbers-at-risk table pinned to the axis.
- [Tornado Chart](/docs/charts/chart-tornado): A four-state sensitivity chart — one row per driver, low and high segments measured out from a base-case line that is never assumed to be zero, ranked by swing into a funnel, on an axis that is never forced symmetric.
- [Seasonality](/docs/charts/chart-seasonality): A four-state seasonal decomposition card — one series split into trend, season and residual across three panels on one shared x axis, with anomalous residuals marked against a robust cut-off and undecomposable feeds refused instead of fitted.
- [Connected Scatter](/docs/charts/chart-connected-scatter): A four-state connected scatter: both axes carry a metric, the stops are joined in time order, and direction is encoded four ways — a width ramp, pixel-spaced arrowheads, a start ring against a terminal arrowhead, and named endpoint labels.
- [Lift Curve](/docs/charts/chart-lift-curve): A four-state gain and lift curve for model evaluation — a cumulative capture curve read against the random diagonal and the perfect-model bound, with key quantiles marked and degenerate inputs named instead of drawn.
- [Likert Diverging](/docs/charts/chart-likert-diverging): A four-state diverging Likert chart — one row per question with the negative options stacked leftward and the positive rightward around a shared centre, a neutral band that either straddles the axis or steps out of the bar, a switchable percentage base and net-score sorting.
- [Axis Brush](/docs/charts/chart-axis-brush): A time-axis brush: drag a window over a thumbnail sparkline and it emits that window for every other chart on the page to filter by.
- [Network Force](/docs/charts/chart-network-force): A four-state force-directed relationship graph in plain SVG — a hand-written repulsion, spring and gravity simulation that converges and then stops, nodes you can drag and anchor, colour by group or by degree, and hover to light a node's neighbours and fade the rest.
- [Treemap](/docs/charts/chart-treemap): A four-state squarified treemap in hand-rolled SVG — two levels tiled by area, branches fenced and named, click-to-zoom with a breadcrumb, spatial arrow-key navigation and an sr-only breakdown table.
- [Calendar Heatmap](/docs/charts/chart-calendar-heatmap): A year of days as one week-column grid — quantile or linear colour steps with the bounds printed on the legend, measured zero kept apart from no data, and every tile reachable by keyboard.
- [Chart Gantt](/docs/charts/chart-gantt): A four-state schedule chart — lanes that pack overlapping work into sub-rows, an axis that follows the span from minutes to years, progress-filled bars, finish-to-start arrows that flag the dependencies the dates do not honour, and a now line from an injected instant.
- [Raincloud Plot](/docs/charts/chart-raincloud): A four-state raincloud that stacks a half-violin density, a Tukey box summary and the jittered raw readings in three lanes on one shared scale — id-hashed jitter, keyboard-walkable rows with landmark announcements, and an out-loud sampling notice.
- [Dendrogram](/docs/charts/chart-dendrogram): A four-state hierarchical-clustering tree where every bracket sits at the height its two sides merged at, with a cut-height slider that colours and letters the resulting clusters, folded wedges instead of dropped tips, and counted refusals for loops, danglers and double-claimed joins.
- [Tidy Tree](/docs/charts/chart-tidy-tree): A four-state node-link hierarchy on a Reingold–Tilford tidy layout — contour-packed coordinates from a pure function, foldable branches, curved, elbow or straight links, either orientation, and a flat ARIA tree over the drawing.
- [Circle Packing](/docs/charts/chart-circle-packing): A four-state zoomable circle packing in hand-rolled SVG — front-chain sibling packing with a verified smallest enclosing circle, area strictly proportional to value, zoom as a re-projection rather than a re-layout, keyboard-walkable circles and an sr-only breakdown table.
- [Voronoi Territory Map](/docs/charts/chart-voronoi): A four-state Voronoi tessellation that derives territory from seed positions — half-plane clipping, an optional capacity-weighted power diagram, map colouring so no two neighbours share a fill, direct labels elided to the cell that holds them, and a lift on hover or focus.
- [Adjacency Matrix](/docs/charts/chart-adjacency-matrix): A graph drawn as its adjacency matrix — one node set on both axes, cells carrying edge weight, reorderable by name, degree or cluster, with a row-and-column crosshair, directed or symmetric halves, and a foldable triangle.
- [Spiral Timeline](/docs/charts/chart-spiral): Time wound onto an Archimedean coil — one ring per period, so the same phase of every turn lands on one radial line — with bars or dots on the coil, a floating zero baseline, measured zeros told apart from windows the series never covered, and a single-ring series refused rather than drawn.
- [Ternary Plot](/docs/charts/chart-ternary): A four-state ternary plot in plain SVG — three-part compositions normalised to 100% on an equilateral triangle, with three gridline families, edge-rotated axis ticks, shaded classification zones and a keyboard-reachable mark per row.
- [Market Depth](/docs/charts/chart-market-depth): A four-state order-book depth chart: mirrored cumulative bid and ask staircases meeting at the spread, an exact step outline, a hover and keyboard readout of price, size and cumulative total at any level, and a refusal when the book crosses itself.
- [Difference Area Chart](/docs/charts/chart-difference-area): A four-state difference area: two series with the gap between them shaded, the fill and hatch flipping wherever the lead changes hands, and every crossing marked, counted and keyboard-reachable.
- [Pictogram](/docs/charts/chart-pictogram): A four-state ISOTYPE unit chart: one row per category, icons repeated at a stated one-icon-equals-N scale, the last icon clipped to the leftover instead of shrunk, and unusable rows dropped and counted in view.
- [Q-Q Plot](/docs/charts/chart-qq-plot): A four-state quantile-quantile plot that ranks the sample itself — ppoints plotting positions, a resistant quartile reference line, a pointwise order-statistic band, and tail departures named on the plot instead of left to the eye.
- [ROC Curve](/docs/charts/chart-roc): A four-state ROC card — one curve per model with its AUC, the chance diagonal, and a draggable, keyboard-reachable threshold handle that reads TPR, FPR and the counts behind them at every cutoff.
- [Confusion Matrix](/docs/charts/chart-confusion-matrix): A predicted × actual grid that reads as raw counts or row/column normalized shares, with per-class recall and precision margins, a hatched off-diagonal, and undefined rates kept apart from zero.
- [Calibration Curve](/docs/charts/chart-calibration): A four-state reliability diagram — binned predicted probability against observed frequency, read off the diagonal, with Wilson intervals, a shared-axis count strip and every bin reachable from the keyboard.
- [UpSet Plot](/docs/charts/chart-upset): A four-state UpSet plot for set overlaps a Venn cannot draw — a dots-and-lines membership matrix under sorted size bars, per-set totals on the left, and disjoint columns that add up instead of double-counting.
- [ECDF](/docs/charts/chart-ecdf): A four-state empirical CDF that bins nothing — one step curve per group on a shared percent axis, percentiles read off the steps themselves, named crossings between curves, a keyboard-driven scan line and a vertex cap that states its own error.
- [Wind Rose](/docs/charts/chart-wind-rose): A compass rose of directional frequencies, where each sampled direction owns its wedge, stacks its magnitude classes from the hub outward, and is read against labelled percent-of-total rings with calm counted in the hub.
- [Correlogram](/docs/charts/chart-correlogram): A correlation matrix drawn half as coefficient-shaped glyphs and half as numbers, with non-significant pairs hatched instead of blanked and the axes reorderable by hierarchical clustering.
- [PCA Biplot](/docs/charts/chart-biplot): A four-state PCA biplot that draws observation scores and variable loading arrows on one equal-aspect plane, puts explained variance in the axis titles, and states the arrow scale factor instead of hiding it.
- [Percentile Bands](/docs/charts/chart-percentile-bands): A four-state percentile fan: nested p50/p90/p99 bands over time with the median line on top, an SLO rule whose breach stretches are interpolated, counted and keyboard-reachable, and an optional log axis for a tail that dwarfs the median.
- [Trace Waterfall](/docs/charts/chart-trace-waterfall): A four-state request waterfall — nested spans on one shared relative clock, phase segments inside each bar, self-placing duration labels, an interval-attributed critical path ruled over exactly the stretch each span was blocking, and a collapsible tree the arrow keys can walk.
- [Climate Stripes](/docs/charts/chart-climate-stripes): One stripe per period coloured by its distance from a baseline — a symmetric diverging ramp, a reference window that can be pinned so two strips compare, anchor labels, and unmeasured periods kept apart from average ones.
- [Event Timeline](/docs/charts/chart-event-timeline): A four-state timeline of instants — one lane per track, a shape per kind, marks that crowd into one counted cluster instead of overlapping, brush-or-keyboard zoom into any window, and a now marker from an injected instant.
- [Renko](/docs/charts/chart-renko): A four-state renko chart: one brick per box of price on a zero-anchored grid, time compressed out of the axis, hollow-up and solid-down bricks, two-box reversals marked, a derived-or-given box size, and a refusal when the box is too small to draw.
- [Word Tree](/docs/charts/chart-word-tree): A four-state word tree that branches raw phrases out from a root term — ribbon width is that continuation's share, every word is a focusable button that re-roots the tree, and the breadcrumb walks back.
- [Vector Field](/docs/charts/chart-vector-field): A four-state quiver plot on a derived lattice: one centred arrow per node carrying direction, length and colour, evenly spaced streamlines traced through the same data, holes that stay holes, and a keyboard-reachable readout on every vector.
- [3D Bar Grid](/docs/charts/chart-3d-bars): A four-state WebGL bar grid — categories along X, series lanes along Z, orbitable boxes on a ground grid with hover tooltips, driven by one contract.
- [3D Scatter Cloud](/docs/charts/chart-3d-scatter): An orbitable WebGL scatter cloud with cluster-colored spheres, axis grids and DOM tooltips, chart tokens resolved to three.js at runtime.
- [3D Surface Plot](/docs/charts/chart-3d-surface): A four-state rotatable 3D surface from a z-value grid — vertex colors lerped between chart tokens by height, a subtle wireframe overlay and hover tooltips.
- [3D Globe Arcs](/docs/charts/chart-3d-globe): A four-state 3D globe with graticule, value-sized location markers and elevated great-circle arcs between origin/destination pairs, coloured from the live chart tokens.
- [3D Ribbon Series](/docs/charts/chart-3d-ribbon): A four-state multi-series 3D ribbon chart on react-three-fiber — one extruded lane per series, theme tokens resolved into WebGL materials, hover isolates a ribbon.
- [3D Donut](/docs/charts/chart-3d-donut): An extruded WebGL donut on react-three-fiber — hovered slices lift and slide outward, the total floats in the hole, and a DOM legend keeps the numbers honest.
- [3D Network Graph](/docs/charts/chart-3d-network): A four-state 3D node-link graph on react-three-fiber — degree-sized spheres, one line-segment pass for all edges, a deterministic golden-angle layout and theme tokens resolved into WebGL materials at runtime.
- [3D Funnel](/docs/charts/chart-3d-funnel): A four-state pipeline funnel of stacked 3D truncated cones — orbitable with damped controls, per-stage conversion labels, and theme tokens resolved into WebGL materials at runtime.
- [3D Heightmap Matrix](/docs/charts/chart-3d-heightmap): A four-state 3D lego-plot matrix — rows × columns of WebGL columns whose height and colour intensity both encode one value, with orbit controls and hover tooltips.
- [3D Radial Bars](/docs/charts/chart-3d-radial-bars): A four-state 3D radial bar chart on react-three-fiber — bars ring a center, height encodes value, theme tokens resolved at runtime for WebGL, orbit camera and hover tooltips.
- [Shot Map](/docs/charts/chart-shot-map): A four-state basketball half-court shot chart in hand-rolled SVG, with made/missed dots, a per-shot hover tooltip and an FG% header.
- [Pitch Heatmap](/docs/charts/chart-pitch-heatmap): A hand-rolled SVG soccer pitch whose zone grid shades by event count — one chart token at stepped opacity, printed legend bounds, a direction-of-play arrow, and every zone readable by pointer, keyboard or screen reader.
- [Pass Network](/docs/charts/chart-pass-network): A four-state soccer pass network in hand-rolled SVG — players at their average positions on a pitch, marker area by touches, edges by pass count above a threshold, hover to light one player's links.
- [xG Timeline](/docs/charts/chart-xg-timeline): A cumulative expected-goals step chart — two team lines over 90+ minutes, emphasized goal dots with minute labels, a half-time rule, and final xG totals in the header.
- [Win Probability](/docs/charts/chart-win-probability): A four-state in-game win probability chart: one line around a 50% midline, the band shaded toward whichever side is favoured in that side's chart token, and key events pinned to the path — named on hover, focus and in the readout.
- [Training Load ACWR](/docs/charts/chart-training-load): A four-state training-load chart: daily load bars, 7-day acute and 28-day chronic rolling averages, and the acute:chronic ratio with a sweet-spot band and a high-risk zone — all rolling math done inside the component.
- [Heart Rate Zones](/docs/charts/chart-hr-zones): A four-state workout view that colors a session strip by heart-rate zone and totals time-in-zone into share-labelled bars, from bpm samples and zone floors.
- [Race Splits](/docs/charts/chart-race-splits): A four-state race-splits spaghetti chart: every athlete's cumulative gap to the split leader against a zero baseline, lines named at their ends, lead changes and DNFs disclosed, every split keyboard-reachable.
- [Form Guide](/docs/charts/chart-form-guide): A four-state team form guide — ranked rows of W/D/L result chips, a rolling points-per-game sparkline and season totals, driven by one contract.
- [Player Percentile Pizza](/docs/charts/chart-player-pizza): A scouting percentile pizza in hand-rolled SVG — one wedge per stat, radius as cohort percentile rank, wedges grouped and coloured by skill category, with guide rings at 25/50/75.
- [Power Curve](/docs/charts/chart-power-curve): A four-state cycling mean-maximal power curve on a log time axis — current period vs all-time best, an optional dashed critical-power asymptote, and a scan that reads watts at any duration.
- [Elevation Profile](/docs/charts/chart-elevation-profile): A four-state route elevation profile in plain SVG — the distance-vs-elevation area split into flat, moderate and steep runs by grade, labelled climb bands measured from the samples underneath them, and a hover or keyboard readout of km, elevation and grade.
- [Sleep Stages](/docs/charts/chart-sleep-stages): A four-state sleep hypnogram — stage-colored segments stepping across fixed Awake/REM/Light/Deep lanes over the night, with time-in-stage summary bars and percentages.
- [Fatigue and Freshness](/docs/charts/chart-fatigue-freshness): A four-state performance-management chart: fitness (CTL) and fatigue (ATL) as exponential averages of daily training stress, form (TSB) shaded around zero, race days flagged.
- [Bland-Altman Plot](/docs/charts/chart-bland-altman): A four-state method-agreement plot — pair differences against pair means, with a computed bias line, dashed ±1.96 SD limits of agreement, and out-of-limits pairs flagged in the destructive tone.
- [Forest Plot](/docs/charts/chart-forest-plot): A four-state meta-analysis forest plot — weight-sized squares with CI whiskers per study against a vertical null line, and a pooled summary diamond.
- [Funnel Plot](/docs/charts/chart-funnel-plot): A four-state publication-bias funnel plot in plain SVG — effect size against inverted standard error, shaded 95%/99% pseudo confidence contours around the pooled effect, flagged outliers and Egger's test.
- [Precision-Recall Curve](/docs/charts/chart-pr-curve): A four-state precision-recall card — one curve per model with its AUC-PR in the legend, a dashed no-skill baseline at the prevalence, and optional muted iso-F1 guide arcs.
- [Rolling Average](/docs/charts/chart-rolling-average): A four-state rolling-average smoother: the raw noisy series stays visible as faint dots over a hairline, the trailing-window mean is drawn on top, a ±1 SD band from the same window is shaded under it, and the window size is named in the legend.
- [Anomaly Timeline](/docs/charts/chart-anomaly-timeline): A four-state anomaly-detection timeline: one metric line with the detector's flagged readings marked as destructive diamonds, anomalous stretches hatched, ribboned and counted, and an optional expected-range band the line is judged against.
- [Lactate Threshold Curve](/docs/charts/chart-lactate-curve): A four-state blood-lactate step test: a monotone curve through the measured stages, LT1 and LT2 as labelled guides, the three training zones derived from those two intensities, and an optional heart-rate line on its own right axis.
- [Gait Cycle Polar](/docs/charts/chart-gait-cycle): A four-state polar phase chart of one cyclic movement — left and right as closed loops round 0–100% of the cycle, the gap between them shaded, phase sectors labelled at the rim, and an asymmetry index printed signed as well as absolute.
- [Serve Placement Zones](/docs/charts/chart-serve-placement): A four-state tennis serve map — the receiver's half court in hand-rolled SVG, both service boxes cut into wide/body/T zones shaded by serve volume and labelled with count plus win rate.
- [Pacing Strategy](/docs/charts/chart-pacing-strategy): A four-state pacing chart for one athlete against a plan — diverging bars of seconds banked or lost per split around a target baseline, with the cumulative banked time overlaid on a right axis and the finish read against the target.
- [Autocorrelation (ACF)](/docs/charts/chart-autocorrelation): A four-state ACF/PACF stem plot that computes the correlations from the raw series — one stem per lag against a ±1.96/√n band, lags outside it emphasised by shape as well as colour, and a toggle between the two panels.
- [Quantile Dot Plot](/docs/charts/chart-quantile-dot-plot): A four-state quantile dot plot that turns a predictive distribution into countable outcomes — N equal-probability dots stacked into non-overlapping columns, an optional threshold that splits them, and the share on each side reported as a number you can verify by counting.
- [Decision Curve Analysis](/docs/charts/chart-decision-curve): A four-state decision curve: net benefit against threshold probability, one line per strategy against treat-all and treat-none references derived from the prevalence, with the useful threshold range banded and the leading strategy called out as you scan.
- [Poincaré Plot (HRV)](/docs/charts/chart-poincare-plot): A four-state Poincaré return map for heart-rate variability that derives its own statistics — SD1, SD2 and their ratio measured in the 45°-rotated frame, an ellipse drawn from exactly those two numbers about the cloud's centroid, and pairs formed only from beats the recording's own clock agrees are successive.
- [Sprint Force-Velocity Profile](/docs/charts/chart-sprint-profile): A four-state sprint force-velocity-power profile derived from split times alone — a mono-exponential velocity fit over the measured segments, the linear force-velocity line it implies with its F0 and V0 intercepts, and the power parabola peaking at the optimal velocity on its own axis.
- [Partial Dependence + ICE](/docs/charts/chart-partial-dependence): A four-state partial dependence plot with the ICE bundle it is the average of — one faint line per instance under the bold mean, a centring toggle that re-bases every curve on the first grid point, curves that move against the average dashed and counted, and a decile rug showing where the training data actually lives.
- [Learning Curve](/docs/charts/chart-learning-curve): A four-state learning curve: training and validation score against training-set size, each inside a ±1 SD band computed from the per-fold scores, with the gap at the largest size bracketed and read as high variance, still converging, still learning, high bias or converged.
- [Body Load Map](/docs/charts/chart-body-map): Front and back human silhouettes in hand-rolled SVG whose muscle areas shade by reported load or soreness — one chart token at stepped opacity, hatching for areas nobody reported, leader-lined labels on the worst areas and a ranked list underneath.
- [HRV Frequency Spectrum](/docs/charts/chart-hrv-spectrum): A four-state HRV power spectrum in plain SVG: the density estimate drawn as an area, cut and shaded at the VLF / LF / HF edges, each band integrated by the trapezoid rule into its own power and share, with an LF:HF readout and a normalised-units toggle.
- [Drawdown (Underwater)](/docs/charts/chart-drawdown): A four-state underwater chart derived from a raw level series — percent below the running peak hanging from a zero line, every dip shaded and ranked, the max-drawdown trough labelled, and a recovery read-out that flags what is still under water.
- [Groundstroke Depth Zones](/docs/charts/chart-tennis-depth-zones): A four-state tennis groundstroke landing map in hand-rolled SVG — the opponent's half cut into short / mid-court / deep bands across the left, middle and right thirds, shaded by volume, with the "beyond the service box" and "middle third" reads printed above it and a forehand / backhand filter that re-derives both.
- [Court Coverage](/docs/charts/chart-tennis-court-coverage): A four-state tennis court-coverage map — the player's own half in hand-rolled SVG, tracked positions binned into a dwell-density field with the average position, the median recovery spot, a baseline-distance readout and a left/right balance bar.
- [Rally Length Outcome](/docs/charts/chart-rally-length-outcome): A four-state rally-length chart — points banded by shot count, each band a bar split into won and lost, the band's win rate as a dot on a fixed 0–100% scale, the busiest band called out and a one-line verdict.
- [Serve Miss Map](/docs/charts/chart-serve-miss-map): A four-state tennis fault map in hand-rolled SVG — both service boxes with a net band on the front edge, and net / wide / long miss channels shaded by count and labelled with count plus share, first and second serves side by side.
- [Winners vs Errors](/docs/charts/chart-winners-errors): A four-state winners-and-errors ledger — one diverging bar per shot group with winners one way, unforced errors the other and forced errors extending the same bar, plus the winners-per-unforced ratio and the group that leaks most.
- [Return Depth](/docs/charts/chart-return-depth): A four-state return-of-serve chart — returns grouped into depth bands laid out to real court metres, one bar per serve answered, the points-won rate overlaid on a second axis, and a verdict on whether depth converts.
- [Match Score Grid](/docs/charts/chart-tennis-score-grid): A tennis scoreboard drawn as a chart — one row per set, one cell per game marked with who served and who won it, breaks emphasised, tiebreaks tagged with their mini-score, and hold percentages counted from the same games.
- [Point Momentum Run](/docs/charts/chart-momentum-run): A four-state point-by-point momentum strip — one tick per point above or below the centre line, consecutive points by the same player merged into run blocks, break points and breaks of serve flagged, set dividers drawn and the longest run per player printed.
- [Speed vs Spin](/docs/charts/chart-shot-speed-spin): A four-state shot scatter — every tracked shot plotted at its own speed and spin, coloured by stroke, split into four playing-style quadrants by the player's own medians, with a legend that toggles a stroke in or out.
- [Contact Height](/docs/charts/chart-contact-height): A four-state contact-height chart — one density ridge per wing on a shared centimetre axis, strike-zone tiers cut from the player's own height, the net cord marked, and the ideal-window share printed per wing.
- [Shot Direction Flow](/docs/charts/chart-shot-direction-flow): A four-state tennis pattern map in hand-rolled SVG — curved arrows from the three contact corridors on the player's baseline to the three landing corridors across the net, thick for shot count and coloured by win rate, naming the most-used and the most-effective line.
- [Net Clearance](/docs/charts/chart-net-clearance): A four-state side elevation of shot quality — height over the net cord against landing depth, with the coached window banded, netted balls stacked on a to-scale net and median crosshairs.
- [Break Point Ledger](/docs/charts/chart-break-point-ledger): A four-state per-set break-point ledger — one track per player per set sized by chances earned, a filled overlay for chances converted, "3/7 · 43%" labels, a pooled match totals row on the same scale, and hover/keyboard tooltips.
- [Pressure Points](/docs/charts/chart-pressure-points): A four-state pressure-situation profile — one horizontal lollipop per situation stemming from the player's overall win-rate baseline, above in chart-2 and below in chart-5, "62% (n=34)" labels, and hollow dots for samples under a contract-supplied floor.
- [Match Stats Mirror](/docs/charts/chart-match-stats-mirror): A four-state broadcast-style head-to-head panel — mirrored bars from a centre label column, count rows split the pair's total while percent rows keep an honest 0–100 half-scale, the higher side at full fill and the lower faded, hairlines for zeros.
- [Serve Speed Bands](/docs/charts/chart-serve-speed-bands): A four-state tennis serve-speed distribution in hand-rolled SVG — first and second serves binned into fixed-width bands and drawn as two overlaid stepped outlines with translucent fills, an exact median line per series, and a crosshair hover that reads both counts for the band under the pointer.
- [Net Points](/docs/charts/chart-net-points): A four-state tennis net-approach composition card — one horizontal 100% stacked bar per way of coming in (won at net / passed / lobbed / error, largest-remainder shares), per-group n and success rate, a totals bar, segment tooltips, and a muted hairline for ways in that were never used.
- [Court Zone Win Rate](/docs/charts/chart-court-zone-winrate): A four-state tennis choropleth in hand-rolled SVG — the player's own half cut into a 3×3 grid derived from ITF court lines (deuce / middle / ad lanes × net / mid / baseline depths), each zone tinted by how far its point win rate sits from 50%, thin samples hatched, every zone hover- and keyboard-readable.
- [Kitchen Dink Map](/docs/charts/chart-kitchen-dink-map): A four-state pickleball dink placement map in hand-rolled SVG — the opponent's kitchen to true scale with the net on the bottom edge, every tracked dink a dot coloured by outcome (in, too deep, net, wide), a count-and-share column apportioned by largest remainder, per-dot tooltips and arrow-key walking.
- [Third Shot Outcome](/docs/charts/chart-third-shot-outcome): A four-state pickleball third-shot report in hand-rolled SVG — one row per choice (drop, drive, lob) with its usage share, a 100% stacked won / neutral / lost bar apportioned by largest remainder, per-row n and point-win labels, a totals row, segment tooltips and arrow-key walking.
- [Side-Out Scoring](/docs/charts/chart-side-out-scoring): A four-state pickleball side-out scoring strip in hand-rolled SVG — every service turn a team-coloured segment as wide as the points it scored, zero-point turns kept as hairline ticks, server 2 in a lighter fill, running-score stamps under the strip, a pinned final score and per-team points-per-turn and best-turn summaries.
- [Court Position Ladder](/docs/charts/chart-court-position-ladder): A four-state pickleball ladder chart — points grouped by the deepest court position the team reached (baseline, transition, kitchen), each rung a won/lost split bar sized to its share of all points, with connector arrows carrying the share that advanced past the rung below.
- [Shuttle Landing Map](/docs/charts/chart-shuttle-landing): A four-state badminton landing map in hand-rolled SVG — the opponent's half drawn from BWF dimensions, every shot a dot whose colour AND shape carry the stroke (clear, drop, smash, net shot), out shots hollow past the lines, with a front/mid/rear depth panel cut on the real service lines.
- [Badminton Shot Mix](/docs/charts/chart-badminton-shot-mix): A four-state badminton composition chart — one horizontal 100% stacked bar per game across five fixed strokes (clear, drop, smash, drive, net), largest-remainder shares, an attack-share tick (smash + drive) under every bar, per-game totals at the row end and a pooled match row.
- [Serve Spin Mix](/docs/charts/chart-serve-spin-mix): A four-state table-tennis serve rose — five spin families at fixed semantic anchors, each wedge's area its share of serves, the win rate printed at every wedge tip and the total serve count in the hub.
- [T Dominance](/docs/charts/chart-t-dominance): A four-state squash T-control card — one mirrored bar per game split at each player's share of rally time on the T around a 50% centre rule, the score under every bar, a match row on top, and the games that defied the T called out.
- [Padel Wall Play](/docs/charts/chart-padel-wall-play): A four-state padel wall-play ledger — one bar per wall-interaction class (direct, back wall, side wall, double wall) sized by shot count on a shared scale, split into points won and lost, with usage shares, win rates and a bounce glyph per class.
- [Head-to-Head History](/docs/charts/chart-h2h-history): A four-state rivalry ledger — one row per meeting on a center-spine timeline with the score and a surface chip on the winner's side, a running tally with per-surface splits, and the closing streak named in the header.
- [Return Position](/docs/charts/chart-return-position): A four-state return-position map — where the returner stood at contact against first and second serves, on a to-scale ITF baseline view with per-serve median-depth rules, inside/behind shares, per-dot tooltips and a keyboard walk.
- [Season Results](/docs/charts/chart-season-results): A four-state season-results strip — one surface-coloured column per event on a fixed R64-to-W round ladder, title rings, month ticks that keep the off-season visible, a win–loss headline and per-surface event shares.
- [Front Wall Targets](/docs/charts/chart-front-wall-targets): A four-state squash wall map in hand-rolled SVG — the front wall drawn face-on from WSF markings (hatched tin, service line, out line), every strike a dot whose colour AND shape carry the shot type, tin and out strikes hollow, with largest-remainder type shares and a repair guard that keeps heights honest to their calls.
- [Shuttle Trajectory](/docs/charts/chart-shuttle-trajectory): A four-state badminton flight-signature chart in hand-rolled SVG — the full 13.40 m court seen from the side with a to-scale net at centre, each stroke type aggregated into a median parabolic arc with a p25–p75 band, dash patterns as second identity, landing marks on the floor and physics guards that lift impossible arcs over the cord.
- [Rally Replay](/docs/charts/chart-rally-replay): A playable top-down replay of one tennis rally in hand-rolled SVG — the ball tweens along each shot's curved path over a to-scale ITF singles court, landed shots persist as trails with walkable bounce dots, and play / scrub / speed controls drive a single timeline that starts parked at the finished point.
- [Movement Trail](/docs/charts/chart-movement-trail): A four-state, scrubbable replay of one tennis player's movement — their own half court in hand-rolled SVG, the path fading with age and thickening with speed, a play/scrub/speed transport driven by a single timeline position, and a readout of distance and pace at any moment.
- [Serve Sequence Replay](/docs/charts/chart-serve-sequence-replay): A replayable tennis serve chart — the receiver's half court in hand-rolled SVG, dots landing serve by serve under play/scrub/speed controls, with running in%, ace and fault counters recomputed at every position.
- [Score Ticker](/docs/charts/chart-score-ticker): A point-by-point tennis scoreboard replay — fed nothing but who won each rally, it derives games, deuce, tiebreaks and sets with real scoring rules, then plays the whole sequence back over a growing momentum strip with derived break, set and match points.
- [Points Race](/docs/charts/chart-points-race): A four-state pickleball points-race replay in hand-rolled SVG — two staircase step-lines climb one point per rally under derived side-out or rally scoring, the gap tinted with the leader's colour, side-out and game-point ticks on the axis, and rAF playback with play/pause, a rally scrubber and 1×/2×/4× speeds that parks on the final score.
- [Rally Elevation Replay](/docs/charts/chart-rally-elevation-replay): A four-state badminton rally replay in hand-rolled SVG — one rally played back shot by shot over a side-on 13.40 m court, the shuttle tweening along exact parabolic arcs under rAF playback with play/pause, a timeline scrubber and 1×/2×/4× speed, completed arcs persisting as muted strokes with walkable landing ticks, and physics guards that lift impossible arcs over the cord.
- [Coverage Heat Replay](/docs/charts/chart-coverage-heat-replay): A four-state, scrubbable tennis coverage heatmap — presence time per half-metre cell accumulating over the match clock in hand-rolled SVG, with play/pause and speed controls, set markers on the rail, a colour scale fixed against the full match, and a busiest-zone readout recomputed at any moment.
- [Bracket Replay](/docs/charts/chart-bracket-replay): A four-state playable knockout bracket — a 16-entrant draw revealed round by round with play/pause, a round scrubber, seed-aware upset chips, structural feed repair and a champion cell that fills at the end.
- [Serve Speed Replay](/docs/charts/chart-serve-speed-replay): A four-state tennis serve-speed replay in hand-rolled SVG — a 240° dial whose needle kicks to each serve while a fixed-band histogram builds up one tick at a time, with play/pause, an index scrubber, speed gears, a persistent fastest-so-far ring marker and a scrub-time readout row.
- [T Battle Replay](/docs/charts/chart-t-battle-replay): A four-state playable squash T-control replay — two tracked dots move on a metre-true WSF floor plan, a control ring on the T tints toward whoever holds it, controlled time accrues into a mirrored share bar, and rally-end ticks mark the scrubber with a running score.
- [Soccer Pass Network](/docs/charts/chart-soccer-pass-network): A replayable soccer pass network in hand-rolled SVG — raw completed passes cut into match windows, a disc at each player's average position sized by involvements, lines weighted by passes exchanged, and a play / pause / step / scrub transport running on a real match clock.
- [Soccer xG Race](/docs/charts/chart-soccer-xg-race): A four-state expected-goals race replayed on the match clock — cumulative xG staircases that grow only as far as the playhead, with real transport buttons, a running scoreline and goal chips that jump the clock.
- [Soccer Territory Flow](/docs/charts/chart-soccer-territory-flow): A four-state replay of which third of the pitch a match was played in, minute by minute — a stacked territory band, a field-tilt momentum lane, jump-to-event markers and a play / step / scrub transport on the match clock.
- [Soccer Shot Quality](/docs/charts/chart-soccer-shot-quality): A four-state soccer shot map that replays a match shot by shot — marks placed on the attacking half, sized by xG, shaped by outcome, driven by a real play / pause / step / scrub transport on the football clock.
- [Basketball Shot Zones](/docs/charts/chart-basketball-shot-zones): A four-state NBA half-court zone chart in hand-rolled SVG — six rule-book zones tinted by points per shot against a league bar, replayed attempt by attempt with a real quarter-and-game-clock transport.
- [Basketball Momentum Run](/docs/charts/chart-basketball-momentum): A four-state basketball momentum replay — the score margin as a stepped mountain over the game clock, unanswered runs called out as banded spans, timeouts and lead changes marked, driven by a real play / pause / step / scrub transport.
- [Basketball Lineup Stints](/docs/charts/chart-basketball-lineup-stints): A four-state basketball rotation chart — one lane per player across the game clock, every shift drawn from check-in to check-out and marked by its plus-minus, with a play/step/scrub transport whose playhead reads out the live five in quarter-and-clock time.
- [Volleyball Rotation Wheel](/docs/charts/chart-volleyball-rotation-wheel): A four-state volleyball rotation wheel that replays a match rally by rally — six slots in serve order, side-out % on the left of each slot and hatched point-scoring % on the right, driven by a play / step / scrub transport on a set-and-rotation clock.
- [Chart Volleyball Attack Lanes](/docs/charts/chart-volleyball-attack-lanes): A four-state volleyball attack-lane replay in hand-rolled SVG — tapered corridors run out of the setter's hands to each hitter and across the net, thickening swing by swing as the match replays under a set / score / rotation transport.
- [Baseball Strike Zone](/docs/charts/chart-baseball-strike-zone): A four-state strike zone from the catcher's view — pitch type by colour, outcome by shape, called-strike-chance shading, and a transport that replays the at-bat pitch by pitch with the count moving as it goes.
- [Baseball Spray Chart](/docs/charts/chart-baseball-spray): A batted-ball spray chart on a to-scale field — direction and distance from home plate, outcome by shape, and a transport that replays a stretch of games ball by ball while the running line fills in.
- [Baseball Win Probability](/docs/charts/chart-baseball-win-probability): A four-state baseball win probability replay — a stepped line over the half-inning axis with leverage shading behind it, key plays called out by the swing they were worth, driven by a real play / pause / step / scrub transport.
- [Hockey Rink Shots](/docs/charts/chart-hockey-rink-shots): A four-state full-sheet hockey shot map in hand-rolled SVG — danger zones from the slot outward, marks that carry the team in colour and the outcome in shape, period-and-clock playback, and a shot-attempt differential rail under the ice.
- [Cricket Wagon Wheel](/docs/charts/chart-cricket-wagon-wheel): A playable cricket wagon wheel in hand-rolled SVG — every scoring shot drawn from the striker's stumps out to where the ball finished, coloured and shaped by the runs it brought, with the eight region totals riding the rope and a ball-by-ball transport clocked in overs.
- [Cricket Manhattan](/docs/charts/chart-cricket-manhattan): A four-state cricket Manhattan chart in hand-rolled SVG — runs off every over as a skyline, wickets as drops under the axis, a cumulative worm on a second scale, two innings on one shared over axis, and a real transport that plays the match forward over by over.
- [Scaling Law](/docs/charts/chart-scaling-law): A four-state log-log scaling plot that fits L = E + A·C^(−α) to the runs it is given — one power law per model family, exponent, irreducible loss and R² printed, with the stretch past the largest run hatched and projected.
- [Token Usage](/docs/charts/chart-token-usage): A four-state LLM spend card: stacked bars split input, cached input, output and reasoning tokens per period, with the cache-hit share called out and a cost line derived in-component from per-million rates.
- [Attention Heads](/docs/charts/chart-attention-heads): A small-multiples grid of causal attention maps — one miniature per (layer, head), sortable by row entropy or previous-token mass, with the picked head enlarged beside it under token labels on both axes and its mass split into four shares that add to exactly 100.
- [Embedding Projection](/docs/charts/chart-embedding-projection): A four-state 2-D embedding projection in plain SVG: clusters wrapped in trimmed convex-hull blobs with numbered centroid badges, a nearest-mark hover readout that prints the item's own text, a cross-tab that always adds to 100, and a caveat naming the groups whose distances mean nothing.
- [Eval Leaderboard](/docs/charts/chart-eval-leaderboard): A model × benchmark leaderboard: every column normalised in its own direction, cells shaded with the raw score printed, per-column bests marked, rank with movement arrows against the previous snapshot, and a weighted index whose whole-percent weights always total 100.
- [Training Runs](/docs/charts/chart-training-runs): A four-state training-runs card: loss against optimiser step for several concurrent experiments, each a debiased EMA over its own faint raw trace, with divergence and restart markers, an optional learning-rate schedule on a secondary axis, and a scan that reads every run at the same step and says whether the lead survives the noise.
- [Token Latency](/docs/charts/chart-token-latency): A four-state LLM serving-latency scatter: time to first token against time per output token for every request, nearest-rank p50/p95 crosshairs, an inclusive budget crosshair that cuts the plane into four filterable zones, and queue/prefill/decode phase bars for the median and p95 requests.
- [Context Window](/docs/charts/chart-context-window): A four-state context-window budget bar: the assembled prompt packed part by part, the reply's reserve subtracted from the window instead of stacked on top of it, the overflow framed against the budget that actually applies, and the tokens the eviction order takes first cut out of the part that owns them.
- [Cost-Quality Frontier](/docs/charts/chart-cost-quality-frontier): A four-state price/quality scatter for a model shortlist — Pareto frontier drawn through the non-dominated models, dominated ones greyed and named their beater, and a movable iso-value line that names the best buy at the reader's own quality-per-dollar rate.
- [Elo Ratings](/docs/charts/chart-elo-ratings): An arena leaderboard over time — one line per model with a confidence band derived from its battle count, releases annotated with the move they produced, and a pairwise win-rate matrix that doubles as the card's control surface.
- [Retrieval Recall@k](/docs/charts/chart-retrieval-recall): A four-state RAG retrieval card: recall@k over precision@k against a log k axis, one line per retriever, with the shipped operating k marked, an MRR@k readout and a coverage bar whose percentages always total 100.
- [Drift Monitor](/docs/charts/chart-drift-monitor): A four-state drift board: one banded strip per feature on a shared PSI scale with the warn and alert rules drawn across every row, the prediction-drift lane on top, and the worst offender named — pick any window from the tick row to read the whole card at that moment.
- [Agent Trajectory](/docs/charts/chart-agent-trajectory): A four-state agent-run timeline — every step a measured segment on the run's own clock, coloured by kind, retries nested inside the step they re-attempt, tokens generated per step on a second track, and a wall-time-versus-generation mix apportioned by largest remainder so the shares add to exactly 100.
- [Data Mixture](/docs/charts/chart-data-mixture): A four-state training-mixture card: one composition bar per training stage split by data domain, with per-domain epochs so upsampling reads as the gap between unique tokens and tokens seen.
- [GPU Utilization](/docs/charts/chart-gpu-utilization): A four-state cluster-utilisation card: a device-by-time SM occupancy strip, one memory line per device group against the HBM ceiling, and idle stalls drawn as bubbles sized by their duration — with the idle share, the longest stall and a wall-clock budget that totals exactly 100% derived in-component.
- [Tournament Schedule · Order of Play](/docs/charts/chart-tournament-schedule): A four-state order-of-play sheet — courts as columns against a vertical time axis, every match a block as long as its estimate, floating "not before" slots, live progress, and the double bookings and rest gaps the sheet implies.
- [Draw Path](/docs/charts/chart-draw-path): A four-state seeded route through a draw — one round per rail station with the projected opponent's rating and head-to-head, faint branches for whoever could arrive instead, Elo win chances compounded into a survival bar, and a tab panel for each round's whole field.
- [Serve +1 Patterns](/docs/charts/chart-serve-plus-one): A four-state tennis serve +1 flow in hand-rolled SVG — serve target, then the +1 wing and direction, then won or lost, joined by bands sized by points and coloured by win rate against a benchmark, with the most-used and the most-effective pattern named.
- [Rally Pattern Tree](/docs/charts/chart-rally-pattern-tree): An icicle tree of shot sequences rooted at the serve — branch width is the rallies that took it, tint is the win rate down it, and everything under the sample cut is pruned with its share stated.
- [Surface Splits](/docs/charts/chart-surface-splits): A four-state surface-by-surface record card — win-loss bars with paired service and return sub-bars, each read against a tick at the player's own overall level, and the strongest and weakest surfaces called out above a match floor.
- [Stamina Decay](/docs/charts/chart-stamina-decay): A four-state stamina card — several match metrics stacked as small multiples over one shared minute axis, each read against its own opening-window baseline, with the drop-off after a chosen cut quantified in the metric's own unit and as a share of that baseline.
- [Doubles Formation](/docs/charts/chart-doubles-formation): A four-state doubles serve-formation card — a real tennis, badminton or pickleball court in metres, one tab per formation with its usage share and win rate, and four player markers that glide to the new stance.
- [Shuttle Speed Decay](/docs/charts/chart-shuttle-speed-decay): A four-state badminton physics chart in hand-rolled SVG — one speed-against-distance curve per shot type, each marked where the receiver's racket meets it, with the flight time integrated from the curve itself and a distance cursor you can drag or arrow along.
- [Deuce / Ad Split](/docs/charts/chart-deuce-ad-split): A four-state deuce-versus-ad court split — one server's metrics mirrored around the centre mark, every row drawn as a rate of its own side's whole so two different sample sizes compare fairly, mixes apportioned by largest remainder, and the wide gaps flagged toward the better half.
- [Tiebreak Ledger](/docs/charts/chart-tiebreak-ledger): A four-state tiebreak ledger — every tiebreak as a point-by-point strip with the serve above or below the line, mini-breaks hatched, plus a selectable scope driving the record, the hold rates and a largest-remainder split of where the points went.
- [Shot Tempo](/docs/charts/chart-shot-tempo): A four-state rally-rhythm strip — the time between consecutive contacts mirrored around a centre line, one player per side, with a rolling tempo band, flagged tempo breaks and a cross-rally distribution.
- [Line Call Review](/docs/charts/chart-line-call-review): A challenge ledger that plots every review by the millimetres between ball and line, drawn against the paint and the ball at true scale, with each player's per-set allowance spent or still in hand.
- [Match Workload](/docs/charts/chart-match-workload): A four-state card for the physical bill of a match — distance and direction changes per set as paired bars on their own scales, a cumulative distance lane, and a tabbed per-set panel with work-to-rest and the average-to-peak speed range.
- [Partner Chemistry](/docs/charts/chart-partner-chemistry): A four-state doubles pairing grid — one roster on both axes, the lower triangle carrying each partnership's win rate over its match count, samples under the bar hatched out of every read, each player's own average on the diagonal to compare against, and a load strip whose widths are largest-remainder shares of the season.
- [Point Leverage](/docs/charts/chart-point-leverage): Every point of a match plotted by how much of the win probability it could swing, with a draggable high-leverage line and per-player conversion above it.
- [Project Progress](/docs/charts/chart-project-progress): A four-state rail of projects — one segmented bar per project split into done, in progress, blocked and not started with largest-remainder shares that add to exactly 100, an owner, a due date counted in whole calendar days, a schedule-line tick and a health chip derived from all of it.
- [Sprint Velocity](/docs/charts/chart-sprint-velocity): A four-state sprint velocity chart — commitment against delivered as paired bars, scope pulled in mid-sprint hatched as its own segment, and a rolling-window band projected over the sprints still to come.
- [Workload Balance](/docs/charts/chart-workload-balance): A four-state diverging load chart — every person measured out from their own capacity line, over-allocation running one way and idle headroom the other on one shared scale, with a tolerance band, an aggregate meter that the per-person picture argues against, and a greedy plan naming who to move work from and to.
- [Cycle Time Scatter](/docs/charts/chart-cycle-time-scatter): A four-state cycle time scatter that derives its own p50, p85 and p95 by nearest rank, spends its single accent on the focus percentile and the items that broke it, and measures a stated service level against the number the data actually supports.
- [Aging WIP](/docs/charts/chart-aging-wip): A four-state aging chart for a team board — every item still in progress plotted by column against how many days it has been in flight, read against the percentile bands this board's own finished work actually hit.
- [WIP Limits](/docs/charts/chart-wip-limits): A four-state work-in-progress card: every board column read against its own limit, with a breach as an explicit state and a column that was never capped kept out of the verdict entirely.
- [Critical Path](/docs/charts/chart-critical-path): A four-state task dependency board that derives the schedule from durations and links alone — a forward and backward pass, total and free float per task, the zero-float route drawn in the one accent colour, and a cyclic plan named rather than walked forever.
- [Roadmap Swimlanes](/docs/charts/chart-roadmap-swimlanes): A four-state roadmap board — epics as bars across coarse time buckets in per-team lanes, deliberately without dates or dependency arrows, leading on how loaded one quarter is and flagging the lanes that are over the capacity they stated.
- [OKR Tree](/docs/charts/chart-okr-tree): A four-state objective tree whose parents are the weighted rollup of their children, with sibling weights that do not sum to 1 either normalised out loud or drawn at the scale they actually describe.
- [Review Turnaround](/docs/charts/chart-review-turnaround): A four-state review-turnaround card — one lane per reviewer on one shared time axis, the wait for a first look nested inside the wait to merge, a p90 tail whisker, the pooled team median as a dashed rule, and an oversized headline that retargets to whichever reviewer you pick.
- [Focus Time](/docs/charts/chart-focus-time): A four-state per-person day timeline that derives focus blocks from the gaps a calendar leaves, splits them into usable time and scraps at a stated minimum, and leads with the fragmentation score that falls out of the split.
- [Blocker Impact](/docs/charts/chart-blocker-impact): A four-state blocker ranking whose bar is a transitive blast radius counted once per task, split into what only that blocker holds versus what is also stuck behind someone else, with the board's held-up share apportioned to exactly 100 percent.
- [Release Readiness](/docs/charts/chart-release-readiness): A four-state go/no-go board that rolls per-workstream checks, sign-offs and open blockers into one derived verdict, leads with the single number that reaches zero exactly when the release is clear, and refuses to call an unread board.
- [Team Availability](/docs/charts/chart-team-availability): A four-state week-by-week coverage card — one oversized coverage number for the week you picked, a rail of week bars against a target line, and a per-person day grid where partial days stay fractions instead of being rounded to whole days off.
- [Milestone Health](/docs/charts/chart-milestone-health): A four-state milestone slip chart — every row runs from the committed baseline to today's forecast on one shared date axis, with earlier forecasts left behind as a faded trail, a recorded RAG status, per-milestone confidence, and the worst open slip printed as the one number the card leads with.

- **AI**
- [Chat Sidebar](/docs/ai/chat-sidebar): A conversation-history sidebar — calendar-day groups cut in the display time zone, in-place rename with rollback, delete confirmed by title, pinning, local search with its own no-match state, and real loading/empty/error branches.
- [Chat Window](/docs/ai/chat-window): A chat shell in three presentations — inline, docked and modal — where switching never re-creates the panel, so the draft, caret and reading position survive.
- [Streaming Text](/docs/ai/streaming-text): An incremental Markdown renderer for LLM output — frozen blocks, speculative closing of half-written markup, an inline cursor and one screen-reader announcement per answer.
- [Message List](/docs/ai/message-list): An AI transcript whose scroll behaves — glued to the newest token while streaming, released the instant you scroll up, anchored when older pages land, and windowed so a 1000-turn thread stays 12 nodes wide.
- [Chat Composer](/docs/ai/chat-composer): A message composer that owns the send⇄stop run — clears the draft on send, aborts on stop, restores it on failure, and gates send on attachment uploads.
- [Message Actions](/docs/ai/message-actions): The action bar under one chat message — revealed by hover, focus and touch alike, costing zero layout, with copy in either Markdown or plain text, an exclusive thumbs tri-state and speech that stops when the message unmounts.
- [Reasoning Block](/docs/ai/reasoning-block): A collapsible thinking panel whose open/closed state is driven by the stream's lifecycle — and permanently yields to the reader the moment they touch it.
- [Tool Call Card](/docs/ai/tool-call-card): One agent tool call inline in the conversation — a first-class approval gate with one-shot Approve/Decline, structured args and results, key-based redaction that never puts the secret in the DOM, announced truncation for huge payloads, and four data states.
- [Citation Chip](/docs/ai/citation-chip): The inline [n] marker that trails a sentence in an AI answer — an inline box that cannot change the paragraph's line height, with a source card portalled past every clipping bubble.
- [Suggested Prompts](/docs/ai/suggested-prompts): Click-to-send conversation starters and follow-ups — a wrapping strip of one-shot cards that latches after the first pick, goes inert while the assistant streams, and re-rolls without collapsing the row.
- [Artifact Panel](/docs/ai/artifact-panel): A side panel for the file the assistant keeps rewriting — a revision rail with the prompt behind each one, preview / source / changes, per-revision scroll memory, and copy plus download that always take the revision you are looking at.
- [Agent Steps](/docs/ai/agent-steps): A live agent run whose plan is still being written — steps stream in without moving what is already on screen, failures retry in place, and a replan cancels the rest of the plan instead of failing it.
- [Context Attachments](/docs/ai/context-attachments): The context list hanging off a conversation — files, links, snippets and selections with their token cost, under a budget meter that names exactly which entries get dropped when the window overflows.
- [Prompt Library](/docs/ai/prompt-library): A saved-prompt library with fill-in-the-blank templates — search across title, body and tags, faceted categories, a variable form ordered by first appearance, and a preview that is character-for-character what gets inserted.
- [Message Branch](/docs/ai/message-branch): A compact pager for the sibling variants of one reply — an id-stable selection that survives late arrivals, follow-the-tip on regenerate, ends that never steal focus, and one announcement per move.
- [Chat Day Divider](/docs/ai/chat-day-divider): A muted separator for chat transcripts — day chip, unread watermark and context event — that derives Today/Yesterday from calendar days, relabels itself at local midnight, and can pin to the top while its day scrolls.
- [Message Skeleton](/docs/ai/message-skeleton): A chat-shaped loading placeholder — seeded conversation rhythm, alternating bubbles or document rows, a sweep phase-shifted through the thread, and one late screen-reader announcement.
- [Streaming Markdown](/docs/ai/streaming-markdown): A progressive Markdown renderer for LLM streams that paints only what can no longer change — the ambiguous tail waits in a buffer instead of flashing raw markup.
- [Streaming Table](/docs/ai/streaming-table): A table that renders while its rows are still arriving — the header locks the column geometry on frame one, cells still in flight shimmer in place, and the footer count settles into a total.
- [Streaming Code](/docs/ai/streaming-code): A code panel that renders while the model is still writing it — caret on the last line, frozen finished lines, regex tinting, copy-what-arrived and auto-scroll the reader can break.
- [Model Compare](/docs/ai/model-compare): A side-by-side arena for two answers to one prompt — per-side streaming states, derived speed, optional blind names, and a vote that fires exactly once.
- [Pinned Messages](/docs/ai/pinned-messages): A pinned-messages strip for a conversation — one chip per pin, as many as genuinely fit measured against the real container, the rest collapsed into a +N more panel, unpin behind a confirmation that fires once, and real loading/empty/error states.
- [Message Search](/docs/ai/message-search): In-conversation search that expands from an icon into a field — debounced dispatch, a hit counter walked with Enter and Shift+Enter, and a result list of role, time and an excerpt with the query emphasised.
- [Edit Message](/docs/ai/edit-message): In-place editor for a message that was already sent — it states how many replies the fork will drop, guards the draft on cancel, keeps it on a rejected resubmit, and never forks for unchanged text.
- [Quote Reply](/docs/ai/quote-reply): Quote-and-reply for a transcript — a floating Quote action over a text selection, a dismissible quote chip above the composer, and a whole-message fallback.
- [Conversation Summary](/docs/ai/conversation-summary): A compaction seam for long chats — a hairline marker that reports how many earlier messages were summarized, discloses the bullet summary, and offers a restore that can only fire once.
- [Scroll To Latest](/docs/ai/scroll-to-latest): A floating jump-to-latest pill for a growing chat viewport — a sentinel decides when the reader has left the floor, arrivals since then ride in the badge, and one click re-pins follow mode.
- [Read Aloud Button](/docs/ai/read-aloud-button): A per-message listen toggle — progress ring, tiny equalizer and a speed pill — driven by the browser's speech engine or by your own TTS callbacks.
- [Translation Toggle](/docs/ai/translation-toggle): A per-message translation affordance — a pill that names the detected source language, crossfades between original and translation while the box tweens between their measured heights, re-aims at another target language from a menu, and stands in with a skeleton shaped by the source while a request is in flight.
- [AI Disclaimer](/docs/ai/ai-disclaimer): The 'AI can make mistakes. Check important info.' line — inline, banner and details-popover chromes, role=note so it never interrupts, and a one-shot dismissal that hands persistence to the app.
- [AI Badge](/docs/ai/ai-badge): A provenance chip for AI-touched content — generated / assisted / human-edited, with the model and timestamp behind a tooltip or popover and a contrast-safe overlay mode for images.
- [Stop Generating](/docs/ai/stop-generating): One button slot for the whole run — Stop while tokens arrive, Continue generating when the reply hit its length cap, nothing when idle, with a scoped Esc binding and a one-shot lock on both actions.
- [Regenerate Menu](/docs/ai/regenerate-menu): A split retry control for one assistant answer — the button half re-runs it, the chevron opens a menu with a model submenu that marks the current model and an inline instruction field, and every path emits one discriminated action.
- [Response Feedback](/docs/ai/response-feedback): Thumbs up or down on one AI answer, with a follow-up panel of reason chips and a comment, and exactly one submission per message — locked into a receipt when it lands.
- [Share Conversation](/docs/ai/share-conversation): A publish-a-link share dialog for a chat thread — server-issued URL, optimistic visibility and attachment writes with rollback, copy feedback and a destructive revoke confirm.
- [Conversation Export](/docs/ai/conversation-export): An export menu for a whole conversation — scope radio, a size estimate on every format, and a row that spins, ticks or turns into Retry without the menu ever closing under it.
- [Answer Sources](/docs/ai/answer-sources): The numbered favicon cards behind one AI answer — a scrolling strip or an expandable list, the retrieved excerpt one hover or one Tab away, dead sources that refuse to link, and four data states.
- [Confidence Meter](/docs/ai/confidence-meter): A response-confidence reading — segmented bar or small ring banded by your own cut points, with a 'why' disclosure that breaks the score into per-signal factor rows.
- [Moderation Notice](/docs/ai/moderation-notice): Content-policy interruption states for chat — blocked input, withheld response and softened answer, with category chips that cross-highlight the flagged passage, a one-shot appeal action, and role=alert only when something was actually stopped.
- [Slash Command Menu](/docs/ai/slash-command-menu): A caret-anchored "/" command popup for a textarea you already own — sectioned list, roving keyboard cursor, and one commit that either inserts a token or fires an action.
- [Dictation Button](/docs/ai/dictation-button): A composer mic that turns speech into committed text — toggle or hold-to-talk, an amplitude ring, a live interim chip, and exactly one transcript per session.
- [Prompt Variables](/docs/ai/prompt-variables): An inline template filler — every {{variable}} slot becomes a chip-sized text, select or number editor inside the sentence, repeats mirror the first one live, and the preview is byte-identical to what gets sent.
- [Prompt Enhancer](/docs/ai/prompt-enhancer): An "improve my prompt" affordance for a prompt field — a shimmering request state, a word-level diff of the rewrite, and a one-shot Accept with undo.
- [Persona Picker](/docs/ai/persona-picker): Choose the assistant persona a turn runs under — seeded avatar cards or a compact combobox, capability tags, the system-prompt fragment each persona quietly injects, unavailable rows that say why, and four data states.
- [Tone Selector](/docs/ai/tone-selector): A radio-group row of rewrite tones where every pill carries a sample phrase, and the custom tone applies only once its free-text instruction is committed.
- [Sampling Controls](/docs/ai/sampling-controls): A controlled panel for temperature, top-p, max tokens and the penalties — editable value badges, a worded creative-to-precise scale, per-parameter revert, and a nudge when temperature and top-p are tuned together.
- [System Prompt Editor](/docs/ai/system-prompt-editor): A system-prompt editing surface: an autosizing monospace field with placeholder highlighting painted behind the caret, a live token estimate against a budget, presets that insert without destroying work, and an unsaved bar that owns Save and Discard.
- [Chat Mode Picker](/docs/ai/chat-mode-picker): The composer's capability chips — web search, deep research, canvas, image — with a plan gate, a context gate, a cap, conflicting pairs, and a set that repairs itself when the model changes.
- [Context Limit Banner](/docs/ai/context-limit-banner): A context-window warning that escalates from a quiet notice to a blocking wall — a thin usage meter with threshold ticks, rising-edge-only announcements, dismissal that re-arms on escalation, and the three exits out of a full conversation.
- [Agent Inbox](/docs/ai/agent-inbox): A human-in-the-loop queue of everything your agents parked on a person — triage ranking, overdue flags, one-shot inline Approve/Deny, grouping by agent or urgency, and four data states.
- [Agent Plan](/docs/ai/agent-plan): An agent's plan while it is still a draft — ordered steps with their rationale, risk chips on the dangerous ones, per-step include/exclude, inline rewriting, a live duration and cost estimate for the steps you kept, and a one-shot Approve or Request changes.
- [Task Queue](/docs/ai/task-queue): An agent work queue — live progress and the current step for running tasks, drag-to-reprioritise queued ones with a keyboard path, one-shot cancel and retry per row, a concurrency budget in the header, and four data states.
- [Agent Status](/docs/ai/agent-status): A compact agent state chip — a dot and a label morphing through idle, thinking, tool use, waiting-on-you and failure, with a drift-free phase clock and one polite announcement per phase.
- [Run Summary](/docs/ai/run-summary): The receipt for one finished agent run — outcome and reason, a duration/token/cost stat strip, and an expandable per-model table that says so when its rows don't add up to the headline totals.
- [Chat Checkpoint](/docs/ai/chat-checkpoint): A conversation save point that guards its own restore — named marker, live age, auto vs manual origin, an "N messages since" cost line, and a one-shot rollback that explains the fork before it happens.
- [Computer Use Panel](/docs/ai/computer-use-panel): A computer-use session viewer — screenshots with the agent's click, type, scroll and drag markers drawn on them, a synced action log you step through with the arrow keys, and live follow-and-takeover.
- [Web Preview](/docs/ai/web-preview): A browser pane an agent drives — read-only address bar, a history scrubber that follows the newest page until you step back, a load bar, fit-to-pane width presets and a console drawer.
- [MCP Server List](/docs/ai/mcp-server-list): A four-state MCP connections manager — transport and live status per server, an enable switch that is intent while status stays reality, cached tool chips with an honest count, and per-row reconnect or authorize.
- [Tool Catalog](/docs/ai/tool-catalog): A searchable registry of the tools an agent may call — source facets with live counts, per-tool allow switches, parameter tables that open themselves when the query lands inside a signature, and four data states.
- [Agent Handoff](/docs/ai/agent-handoff): An agent-to-agent handoff marker — from/to avatars, a track that marches while the transfer is in flight, the reason control moved, chips for the context passed along, and who holds the run; compact divider and detailed card variants.
- [Agent Roster](/docs/ai/agent-roster): A multi-agent fleet panel — per-agent state dot, model chip, current-task line and capacity bar, attention-first sorting, a real listbox keyboard path, and four data states.
- [Agent Graph](/docs/ai/agent-graph): A workflow DAG drawn in pure SVG from nodes and edges alone — layered auto-layout with crossing reduction, typed node shapes, status tints, flowing active wires, loop-back routing and four data states.
- [Inline Completion](/docs/ai/inline-completion): Ghost text for a textarea — a caret-aligned mirror paints the model's continuation in muted type, Tab accepts it, Cmd/Ctrl+Right takes one word, Esc dismisses.
- [File Change List](/docs/ai/file-change-list): The files an agent touched — middle-truncated paths, A/M/D/R marks, churn bars scaled across the whole run, one-shot Accept/Revert per file plus a bulk bar, and a slot for the inline diff.
- [Interpreter Output](/docs/ai/interpreter-output): The result of one code-interpreter run — source collapsed by default, stdout / stderr / rich results behind tabs derived from what actually arrived, the exception pinned above them, tail-capped output that sticks while it streams, and a one-shot Re-run.
- [Human Handoff](/docs/ai/human-handoff): A bot-to-human escalation card that walks one ticket through request, queue, connecting, connected and an offline leave-your-address fallback.
- [Scheduled Tasks](/docs/ai/scheduled-tasks): A list of scheduled agent automations — a human cadence next to a live countdown to the next run, the last run's outcome inline, a pause switch, a one-shot manual trigger, the failure printed on the row that broke, and four data states.
- [Retrieval Results](/docs/ai/retrieval-results): The RAG retrieval step opened up — ranked chunk cards with source and page, a similarity bar carrying the pipeline cutoff, whole-word query emphasis, a used-in-answer badge wired to its citation number, and a threshold divider that refuses to lie.
- [Knowledge Picker](/docs/ai/knowledge-picker): A grounding-scope selector for collections, files and links — tri-state collections that cascade only over what is actually selectable, per-source document and chunk counts with index freshness, an accounting bar that prices the selection in chunks, and four data states.
- [Indexing Progress](/docs/ai/indexing-progress): An ingest pipeline board — per-source parse → chunk → embed chips, a byte-weighted aggregate with a derived ETA, failures that keep the stage they died at behind a one-shot retry, and a completed summary.
- [Web Search Card](/docs/ai/web-search-card): One web-search step inline in a conversation — the queries the model typed, the pages that came back, which ones it actually read and which ended up cited, with a data-driven reading shimmer and four data states.
- [Voice Orb](/docs/ai/voice-orb): A voice-session orb — layered token gradients that breathe when idle, ripple to a 0..1 amplitude while listening, swirl while thinking and pulse while speaking.
- [Voice Chat](/docs/ai/voice-chat): A realtime voice session panel — speaking orb, word-by-word live captions, mute, mic picker, connection meter, session clock, and an end-of-call summary.
- [Live Captions](/docs/ai/live-captions): A broadcast-style caption bar for a live recogniser feed — interim words render muted and solidify when finalised, a rolling two-line window follows the speech, speaker chips carry the turn, and the panel hides itself after silence.
- [Voice Picker](/docs/ai/voice-picker): Pick the TTS voice a reply is spoken in — cards or a combobox, language and accent chips, neutral timbre tags, and a play button that auditions without selecting, with exactly one sample sounding at a time.
- [Model Card](/docs/ai/model-card): One model's spec sheet — context window, max output and cutoff, tri-state capability chips, per-million-token pricing with the cached-read discount, benchmark bars that switch to a signed comparison against a baseline, and a deprecation notice that names the successor.
- [Cost Breakdown](/docs/ai/cost-breakdown): An LLM cost receipt — every metered line as quantity × rate = amount in micro-unit money that keeps sub-cent charges, grouping by model or kind, a highlighted prompt-caching savings line, and four contract-driven states.
- [Eval Scorecard](/docs/ai/eval-scorecard): One evaluation run at a glance — an overall dial marked with the pass gate, per-criterion bars carrying their own gate ticks and baseline deltas, regressions called out by name, and the worst failing cases disclosed on the row that owns them.
- [Logprobs Viewer](/docs/ai/logprobs-viewer): Token-level probabilities for a model response — the answer itself heat-tinted by uncertainty on one chart token, dotted-underlined below a live threshold, with top-k alternatives as probability bars on hover, focus or arrow key.
- [Finetune Status](/docs/ai/finetune-status): One fine-tune run as a card — a pipeline strip that keeps the stage a stopped run died at, derived step/epoch progress, a scrubbable train/validation loss sparkline with broken eval gaps, hyperparameter rows, a checkpoint radiogroup that re-targets the deploy action, and a one-shot cancel behind an inline destructive confirm.
- [Batch Jobs](/docs/ai/batch-jobs): A batch inference jobs table — middle-truncated copyable job ids, a stacked done/failed/pending bar per job, spend so far, age and ETA derived from an injected clock, an expandable failed-request preview, a one-shot cancel, partial-result downloads, and four data states.
- [Safety Controls](/docs/ai/safety-controls): Per-category content thresholds on a four-rung scale — a plain-language line for what each rung actually does, strictness presets that batch-set every row, policy floors and locked rows, and an unsaved-changes bar that names the filters you are about to loosen.
- [Memory List](/docs/ai/memory-list): The things an assistant remembers about someone, as a list they can audit — inline editing behind a one-editor lock, a two-step bin that fires exactly once, an add box that refuses duplicates, per-memory and master switches, the "used in this chat" highlight, and four data states.
- [Custom Instructions](/docs/ai/custom-instructions): An end-user preference form for assistant instructions: autosizing questions with example popovers, per-field character budgets, one switch that gates every field without erasing it, and a Save / Cancel bar whose Cancel stays undoable.
- [Model Router](/docs/ai/model-router): A routing policy panel — ordered first-match-wins rules with testable condition chips, per-rule switches with optimistic rollback, a health-aware fallback chain, and a prompt tester that names the rule which claims a request and the ones never asked.
- [Cache Indicator](/docs/ai/cache-indicator): A prompt-cache chip for one request — hit / partial / miss / write derived from the token counts, a tooltip breakdown of cached vs fresh tokens and money saved, and a self-correcting TTL ring that flips the chip to expired and fires onExpire exactly once.
- [Tokenizer Preview](/docs/ai/tokenizer-preview): A tokenizer playground for input text — alternating-tinted token chunks from a deterministic built-in splitter or your own, token/char/word counts, a live cost estimate at an editable per-Mtok rate, and markers for whitespace and unusually long tokens.
- [Few Shot Editor](/docs/ai/few-shot-editor): A few-shot example manager — paired input/output cards you add, duplicate, drag-reorder and switch off, with per-example and total token estimates against a budget, and gentle hints for blank outputs and near-duplicate inputs.
- [Embedding Map](/docs/ai/embedding-map): A 2-D embedding scatter in pure SVG — clusters carried by chart token and mark shape, centroid names that yield instead of overlapping, a query wired to the retriever's own ranking, and four data states.
- [Structured Output](/docs/ai/structured-output): A JSON-mode response rendered through its schema — labelled rows in schema order, kind-aware values, field-level expected-vs-got validation, pending fields while the stream runs, off-schema keys kept, and a raw JSON view.
- [PII Detector](/docs/ai/pii-detector): A pre-send privacy scan — detected emails, phones, cards, IDs and names underlined by category, a hover or focus popover per entity, a mask-or-keep decision on each, and a masked preview of exactly what will be sent.
- [Thinking Indicator](/docs/ai/thinking-indicator): A transcript-line thinking status — a highlight sweeping the label, a phase walk that never lies about progress, a clock that only appears once the wait is real, and a fade-out that hands the slot to the answer.
- [Queue Position](/docs/ai/queue-position): A generation-queue waiting room — a position dial that rolls down through every place it passes, a drain bar measured from where you joined, a self-correcting ETA, an optimistic notify-me switch and an arm-before-you-lose-it leave action.
- [Conversation Title](/docs/ai/conversation-title): An auto-generated chat title — a sparkle provenance hint, click-to-edit rename with a length counter, and a regenerate button that shimmer-cycles candidate names before settling.
- [AI Selection Menu](/docs/ai/ai-selection-menu): An Ask-AI row that floats over a text selection — action shortcuts, submenus, a free-form question field, one captured excerpt and a keyboard path in.
- [Rewrite Preview](/docs/ai/rewrite-preview): A prose rewrite review panel — sentence-level tints, per-paragraph Accept / Keep verdicts, measured delta chips and a one-shot Apply that hands back the merged draft.
- [Assistant Avatar](/docs/ai/assistant-avatar): An assistant identity chip whose ring carries the state — a portrait or a seed-derived token gradient inside, ripples while listening, a conic sweep while thinking, equalizer ticks while speaking.
- [Image Generation](/docs/ai/image-generation): An image-generation result card — the prompt above a variations grid that blurs up and scans while it renders, per-image download / upscale / vary, a first-class safety-blocked state, and the seed behind whichever variation you pick.
- [Video Generation](/docs/ai/video-generation): A text-to-video render as one card — prompt, a storyboard that fills in frame by frame, a staged bar that cannot rewind, a poster with a duration chip when it lands, and a failure that keeps the frames it managed to make.
- [Chatbot Widget](/docs/ai/chatbot-widget): An embeddable support chat widget — launcher bubble with an acknowledged unread badge, a panel that keeps its draft when minimised, quick replies, and a rating row on the way out.
- [AI Answer](/docs/ai/ai-answer): A search-answer section — the question, the sources it stands on, prose whose every sentence carries a numbered chip back to a source, follow-ups, and a streaming pass where sources land before the text.
- [Research Report](/docs/ai/research-report): The finished output of a deep-research run — prose whose citation numbers are derived from one walk of the data, per-section source chips, an outline that follows the reader, and a methodology footer that shows the queries run and the sources rejected.
- [Agent Dashboard](/docs/ai/agent-dashboard): An agent-ops overview — KPI tiles whose trends are derived, a runs-over-time bar chart, a recent-runs table whose failing rows expand to the error line, and a live-agent rail that filters the table without moving the window figures.
- [Assistant Welcome](/docs/ai/assistant-welcome): A first-run assistant hero — greeting, capability cards and starter chips that prefill the host's composer instead of sending, over a token-only animated accent.
- [API Error Card](/docs/ai/api-error-card): An LLM API failure card whose recovery is chosen by error class — a countdown ring with one-shot opt-in auto-retry for 429s, a key-settings exit for auth, a status-page exit for overload, and trim / summarize exits when the context is too long.
- [Stream Inspector](/docs/ai/stream-inspector): A developer feed of the raw frames of one streamed model response — per-frame offsets and gaps, a TTFT marker line, header stats, stall marking with jump-to-next, delta folding, tail-follow with break-away and a pretty/raw toggle per row.
- [Prompt Diff](/docs/ai/prompt-diff): A word-level diff of two prompt versions — split or unified columns, version chips with author, date and run count, side swap, per-version copy and a one-shot restore.
- [Throughput Meter](/docs/ai/throughput-meter): A live tokens-per-second readout — rolling sparkline, time to first token, current-vs-average delta, a stall flag raised by the meter's own clock, and a run summary when the stream ends.
- [Context Inspector](/docs/ai/context-inspector): A stacked map of the assembled prompt — system, tools, files, memory and history as proportional slices with per-entry token costs, an expandable breakdown that never hides what it didn't itemise, a reply-headroom band that warns before the answer stops fitting, and a what-if preview of every evictable entry.
- [Guardrail Trace](/docs/ai/guardrail-trace): The safety evaluation of one request, rule by rule — a verdict header derived from the rules rather than asserted beside them, matched-span excerpts with per-rule rationale, verdict filter chips, a passing-row budget that can never hide a block, and four data states.
- [Conversation Tree](/docs/ai/conversation-tree): The branching map of a whole chat — a flat parentId list nested into a vertical tree, the current path lit as a continuous spine, abandoned forks folded into counted stubs, WAI-ARIA tree keyboard navigation, and four data states.
- [Agent Permissions](/docs/ai/agent-permissions): A capability-scoping panel for one agent — per-tool switches with risk bands, a spend cap metered against what is already spent, an add-and-remove domain allowlist, an ordered file-access scale with policy ceilings, and an unsaved-changes bar that counts every change that expands the agent's authority.
- [Latency Breakdown](/docs/ai/latency-breakdown): Per-request phase bars — queue, TTFT, generation and tool time on one shared scale, with a floor that keeps sub-pixel phases visible, a legend that ranks the runs by a phase, and a p50/p95 footer that names the population it came from.
- [Prompt Arena](/docs/ai/prompt-arena): Pairwise prompt results as a scoreboard you can act on — an A/tie/B split bar, a verdict gated by a Wilson interval instead of a raw lead, sampled matchups with their own vote splits, the two outputs for one input on demand, and a rerun that fires exactly once.
- [Dataset Browser](/docs/ai/dataset-browser): A prompt/completion dataset row by row — one-line pair previews, quality-flag chips with the rule behind each one, the full pair one click away, OR'd flag filters, and a selection that survives filtering feeding a bulk export/remove bar.
- [Labeling Queue](/docs/ai/labeling-queue): A one-item-at-a-time human labeling queue — number-key label buttons, skip and flag escapes, a resumable "34 / 200" progress bar, undo for the last call, an all-done screen, and a one-shot lock per item so a double press can never double-label.
- [Detection Overlay](/docs/ai/detection-overlay): Object-detection results drawn over the picture they came from — per-class tinted boxes with label and confidence chips, a live confidence gate, a class legend, and a rail whose hover, focus and selection stay in sync with the boxes.
- [OCR Viewer](/docs/ai/ocr-viewer): A scanned page beside the text read off it, kept in sync both ways — hover or focus a line to light up its source box, click a box to focus its line, with low-confidence words underlined in place.
- [Upgrade Prompt](/docs/ai/upgrade-prompt): An in-feature paywall — usage note, benefit bullets, a two-tier mini compare, an async upgrade CTA and a "remind me tomorrow" snooze that round-trips through the host, as a banner or as an overlay that blurs only its own box.
- [Usage Alerts](/docs/ai/usage-alerts): A budget alert-rule manager — threshold tripwires on a scale that runs past 100%, per-rule channels, a one-shot test send with a real in-flight state, and a fired-alert history waiting to be acknowledged, in four contract-driven states.
- [Request History](/docs/ai/request-history): A playground's run rail — every request with the model and knobs it was sent with, pinned favourites kept above the churn, one click to load a run back into the editor, and a confirmation when that would overwrite your draft.
- [Open In Chat](/docs/ai/open-in-chat): A provider menu that turns the content on the page into a written prompt and hands it to ChatGPT, Claude, Cursor or the clipboard — deeplink when it fits the URL, copy when it does not.
- [MCP Install Button](/docs/ai/mcp-install-button): A one-click MCP install control — one server description, translated per client into a Claude Code command, a Claude Desktop or VS Code config or a Cursor deeplink, with copy feedback, placeholder env keys and a verify-connection check.
- [Commit Card](/docs/ai/commit-card): One agent commit as a card — a Conventional Commits badge parsed out of the raw git message, the files it touched behind an announced cap, an agent and timestamp line, a two-step one-shot revert, and a grouped rail for a whole run.
- [Sandbox Status](/docs/ai/sandbox-status): A sandbox lifecycle card — provisioning through reclaimed, CPU / memory meters, an uptime clock that freezes on teardown, and restart / tear-down behind a confirm and a one-shot lock.
- [Fallback Notice](/docs/ai/fallback-notice): An inline "answered by a backup model" notice — the failed primary and the model that answered as a chip chain, reason-class copy, and a one-shot retry-with-primary button that suppresses itself when a retry cannot help.
- [Persona Editor](/docs/ai/persona-editor): An authoring form for one assistant persona: a seed-derived face with a deterministic shuffle, trait chips that refuse rather than truncate, a tone select, budgeted instructions, a preview bubble recomposed on every keystroke, and a save bar that names which fields moved.
- [Content Credentials](/docs/ai/content-credentials): A C2PA-flavoured provenance panel — a four-rung signature verdict, the signing issuer, the created/edited/exported chain, an expandable raw manifest, and a compact chip that opens the whole thing in a popover.
- [Rate Limit Meter](/docs/ai/rate-limit-meter): A live request-budget meter — a rolling-window gauge, a burst-dot timeline of recent calls, an escalating severity band, an expiry-aware forecast of when the limit lands, and a reset countdown once it does.
- [BYOK Setup](/docs/ai/byok-setup): A bring-your-own-key card — configurable provider slots, a masked field that cleans what you paste and checks the shape per provider, a cancellable live test with latency or a reason, a storage disclaimer that never leaves, and removal behind a confirm.
- [Data Controls](/docs/ai/data-controls): An AI privacy panel where every control saves on its own — a training consent switch with a plain-language consequence line, a retention scale that warns when it deletes nothing, an export job with progress, and a type-to-confirm deletion.
- [Chat Import](/docs/ai/chat-import): A staged importer for assistant exports — reads ChatGPT, Claude and JSON-Lines files, previews the conversations it recovered with per-item checkboxes, and ends on a summary that names every skipped item and why.
- [AI Form Assist](/docs/ai/ai-form-assist): Model-filled form fields — a sparkle per row, ghost-rendered values with a confidence tint, source popovers, a staggered fill-all wave, and per-field accept, dismiss and undo.
- [Translation Panel](/docs/ai/translation-panel): A document beside its machine translation, aligned segment by segment — hover or focus a pair and both halves light up, with per-segment translated / waiting / failed states, a swappable language header, a formality control and progress over the whole job.
- [Composer Attachments](/docs/ai/composer-attachments): The strip of things already attached to the next message — compact chips on the composer's top edge or rich preview cards under its bottom edge, each printing only the statistics its own kind actually has.

- **Mobile**
- [Mobile App Bar](/docs/mobile/mobile-app-bar): A phone screen header whose large in-flow title scrolls away and crossfades into a 44px bar, with the bar's surface bleeding under the safe-area top inset.
- [Dynamic Island](/docs/mobile/dynamic-island): A notch-anchored live-activity pill that morphs between idle, compact, minimal and expanded presentations.
- [Status Bar Mock](/docs/mobile/status-bar-mock): A mocked OS status bar — clock, cellular, Wi-Fi, battery — that fills the safe-area band above a phone screen, with notch, Dynamic Island, punch-hole and flat glass.
- [Notch Inset Layout](/docs/mobile/notch-inset-layout): A screen shell that lays itself out from the insets the device actually reports — filling, passing under, or stepping away from the notch, island, corner arcs and home-indicator lane.
- [Screen Transition](/docs/mobile/screen-transition): A push/pop screen stack with an interactive left-edge back swipe, a parallaxing under-layer and a drag that stays cancellable until you let go.
- [Thumb Toolbar](/docs/mobile/thumb-toolbar): A bottom action bar sized to the thumb-reach arc: a hand-side overflow key that opens its menu upward, press-and-slide selection, safe-area padding and a full keyboard path.
- [Reachability Pull](/docs/mobile/reachability-pull): One-handed mode as a wrapper: a pull on the home-indicator strip brings the whole screen down into the thumb arc — sliding, shrinking or leaning into a corner — with a button, arrow keys, Escape, a tap and a timeout that all send it back.
- [List Index Bar](/docs/mobile/list-index-bar): An edge-hugging A–Z rail that jumps a sectioned list from one continuous thumb drag, with a magnified preview bubble, dot compression and a full keyboard path.
- [Action Sheet](/docs/mobile/action-sheet): An OS-style sheet of grouped choices raised from the bottom edge, with a destructive tone, a detached Cancel, drag-to-dismiss and safe-area padding.
- [Context Peek](/docs/mobile/context-peek): The long-press peek: the held target lifts out of a blurred page and its actions resolve under the finger, as a menu, an icon toolbar or an expanded preview card.
- [Share Sheet](/docs/mobile/share-sheet): The system share surface: a subject header you can pull down to dismiss, a swipeable recents rail, a 4-up app grid and an activity list, on one scrollable sheet with safe-area padding.
- [Permission Primer](/docs/mobile/permission-primer): A pre-permission sheet that spends the phone's one-shot system dialog on purpose — reasons first, a swipe or a button to refuse, and a Settings round trip that re-checks itself when the app comes back.
- [Rating Prompt](/docs/mobile/rating-prompt): An in-app review request that rises from the bottom edge, forks a happy answer to the store and an unhappy one into a private message box, and refuses to render once the remembered outcome says it has already asked.
- [App Update Sheet](/docs/mobile/app-update-sheet): A bottom-edge update prompt with release notes, an installed-versus-available comparison and a download state machine — postponable, or a required gate that refuses to be dismissed.
- [Paywall Sheet](/docs/mobile/paywall-sheet): A subscription paywall that rises from the bottom edge — plan radio rows, trial framing, restore purchases and the auto-renew fine print under a pinned, safe-area action bar.
- [Filter Sheet](/docs/mobile/filter-sheet): A bottom-edge filter panel with grouped facets, a staged draft, a live result count and an Apply bar padded clear of the home indicator.
- [Long Press](/docs/mobile/long-press): Press-and-hold on any row or tile — a ring, bar or swell charges under the finger, drift hands the gesture back to the scroller, and the completion fires exactly once, with a tap, a held key and a 44px button all reaching the same action.
- [Double Tap Heart](/docs/mobile/double-tap-heart): A media surface that likes on double tap, bursting a mark where the thumb landed while the first tap is left to the control underneath.
- [Pinch Zoom](/docs/mobile/pinch-zoom): A photo you pinch, drag and double-tap inside its own frame: fit is 100%, every edge is a rubber band, and the sideways swipe past an edge is reported to the host instead of performed.
- [Swipe Pager](/docs/mobile/swipe-pager): Full-width paged views under a horizontal drag — the deck tracks the finger 1:1, resists past the first and last page, commits on flick or distance, and reports position through a dot, bar or counter rail.
- [Drag Reorder List](/docs/mobile/drag-reorder-list): A touch list where a press-and-hold lifts a row under the finger, the gap opens live, the edges auto-scroll, and space plus arrow keys do the identical job.
- [Swipe To Reply](/docs/mobile/swipe-to-reply): A chat row whose sideways swipe arms a reply — the row tracks the thumb, a mark fills the gutter behind it, and past the threshold releasing commits and springs the row straight back.
- [Amount Keypad](/docs/mobile/amount-keypad): An in-app currency keypad that replaces the software keyboard — oversized live-grouped digits, decimal-point or cash-register entry, and a delete key that repeats on hold.
- [Keyboard Accessory](/docs/mobile/keyboard-accessory): The bar that rides on top of the software keyboard: previous / next field travel, quick-insert chips, and a Done key that hands focus back on purpose.
- [Keyboard Avoider](/docs/mobile/keyboard-avoider): A screen container that keeps its content and pinned footer clear of the software keyboard by the height the visual viewport actually reports — resize the frame, lift the frame, or ride only the bar.
- [Wheel Picker](/docs/mobile/wheel-picker): An iOS-style drum picker: scroll-snap detents under the thumb, optional wrapping, unlandable rows, and the same turns from the keyboard and two chevrons.
- [Finger Draw Annotate](/docs/mobile/finger-draw-annotate): Mark up a photo with a finger — pen, arrow and highlighter in a thumb-reachable dock, per-mark undo, a caret and arrow keys as the equal non-touch path, and a flattened PNG export.
- [Mobile Search Bar](/docs/mobile/mobile-search-bar): A phone search field that turns the screen into search mode — Cancel, a scope bar and recent searches — measured against the software keyboard and padded off the notch.
- [Chip Scroller](/docs/mobile/chip-scroller): A one-line filter chip rail that snaps under the thumb, fades at whichever edge still has chips behind it, and pins the off-screen count where it stays reachable.
- [Inline Picker Row](/docs/mobile/inline-picker-row): A settings row that expands in place to reveal its picker — slide a thumb across the options and lift to choose, instead of pushing a whole screen.
- [Phone Number Input](/docs/mobile/phone-number-input): A mobile phone field that regroups digits as you type, picks the country from a bottom sheet, and normalises pasted international numbers into E.164.
- [Answer Metric Card](/docs/mobile/answer-metric-card): An in-chat metric card for a phone — headline, delta chip and a thumb-scrubbed sparkline, bar row or intensity strip whose readout is hoisted into the header, out from under the finger.
- [Answer Highlight](/docs/mobile/answer-highlight): The conclusion of an AI answer stated first — four monochrome priority levels across plain, rule, KPI and icon compositions, plus a rail that pins the verdict below the notch once the reader has thumbed past the card.
- [Criteria Checklist](/docs/mobile/criteria-checklist): A live rule-satisfaction panel for a field being typed on a phone: a row per rule, a two-column grid, or a one-line summary of the next thing to fix — chosen from the keyboard height the visual viewport actually reports.
- [Reasoning Timeline](/docs/mobile/reasoning-timeline): A thumb-scrubbed reasoning chain for phones — the running node is called out on an inverted card, resolved nodes fold into a count, and the window never becomes a nested scroller.
- [Chat Message Actions](/docs/mobile/chat-message-actions): Hold one chat bubble and its quick reactions plus that message's actions come up against it — as an anchored menu, a compact toolbar or a sheet from the bottom edge.
- [Hold To Talk](/docs/mobile/hold-to-talk): A press-and-hold voice-message button: the strip takes over the composer with a live waveform, sliding up locks the recording hands-free, sliding toward the edge discards it, releasing sends it — and every one of those has a key or a button.
- [Prompt Rail](/docs/mobile/prompt-rail): A one-line rail of conversation starters that scrolls under the thumb and folds itself away — on a flick, on a key, or the moment the thread starts.
- [Attachment Tray](/docs/mobile/attachment-tray): The composer's + tray: a source panel that opens at the software keyboard's own height and pushes the composer up instead of covering it, driven by drag or button.
- [Source Sheet](/docs/mobile/source-sheet): A citation opened as a bottom sheet instead of a popover — the passage in the thumb arc, the cited line lifted clear of the sheet, and a way back to where you were reading.
- [Stream Stop Bar](/docs/mobile/stream-stop-bar): A bottom-edge run bar for a streaming answer — it mints the AbortSignal, stops the run from the thumb arc, climbs above the soft keyboard, and flicks away to uncover the text it covers.
- [Snackbar](/docs/mobile/snackbar): A bottom-edge message bar with one action, swipe-to-dismiss and a single-slot queue that never lets two share the thumb arc.
- [Offline Banner](/docs/mobile/offline-banner): A safe-area connectivity banner for phones that lists the changes waiting, sends them when the link returns, and can be swiped into a peek tab that keeps the count.
- [Mini Player](/docs/mobile/mini-player): A now-playing bar docked above the tab bar that a swipe up, a tap or a key morphs into a full-screen player, with safe-area padding and a read-only timeline when no seek handler is wired.
- [Download Row](/docs/mobile/download-row): A per-transfer mobile row whose rate and ETA disappear the moment bytes stop arriving, with pause, resume, retry and a press-and-hold cancel that answers to the keyboard.
- [Sticky Section List](/docs/mobile/sticky-section-list): A grouped mobile list whose section headers pin to the safe-area line and push each other out, with a thumb-arc pager that walks the sections and reports the one being read.
- [Pull Menu](/docs/mobile/pull-menu): An overscroll quick-action menu: pull a list past its top to reveal actions, the one under your thumb arms as you keep pulling or slide sideways, and releasing runs it.
- [Map Bottom Sheet](/docs/mobile/map-bottom-sheet): A map with a draggable sheet over it: detents, velocity settling, and a map that lifts its focal point by half of whatever the sheet covers.
- [Passcode Lock](/docs/mobile/passcode-lock): An app lock screen with keypad passcode entry, biometric fallback, escalating attempt backoff and a terminal locked-out state.
- [Wallet Card Stack](/docs/mobile/wallet-card-stack): A phone-screen wallet: cards overlap so only a tappable strip of each shows, tapping one lifts it to the top safe-area edge and tucks the rest under the bottom, and a downward drag — or Escape — puts it back.

- **Hooks**
- [useCopyToClipboard](/docs/hooks/use-copy-to-clipboard): A clipboard-copy hook with an auto-resetting copied state and a non-throwing error channel.
- [useDebounceValue](/docs/hooks/use-debounce-value): A generic hook that returns a value only after it has stopped changing for a delay, with no flash on first render.
- [useLocalStorage](/docs/hooks/use-local-storage): An SSR-safe localStorage-backed state hook, kept in sync across same-tab instances and other tabs.
- [useMediaQuery](/docs/hooks/use-media-query): An SSR-safe hook that subscribes to a CSS media query and returns whether it currently matches.
- [useIntersectionObserver](/docs/hooks/use-intersection-observer): A callback-ref hook that reports whether an element is intersecting its viewport, with an optional one-shot "reveal once" mode.
- [useClickOutside](/docs/hooks/use-click-outside): A hook that runs a handler when a pointer interaction lands outside one or more referenced elements.
- [useKeyboardShortcut](/docs/hooks/use-keyboard-shortcut): A hook that binds human-readable key combos like mod+k to a handler, with platform-aware modifiers and an input-focus guard.
- [useWindowSize](/docs/hooks/use-window-size): A hook that tracks the viewport size with per-frame or debounced commits and an explicit not-ready state before hydration.
- [useMousePosition](/docs/hooks/use-mouse-position): A hook that tracks pointer position, optionally relative to an element, with clamped 0..1 normalized coordinates.
- [useInterval](/docs/hooks/use-interval): A declarative setInterval hook with a nullable delay, an always-fresh callback, and pause/resume controls.
- [useScrollDirection](/docs/hooks/use-scroll-direction): A scroll-direction hook that only re-renders on up/down flips, with a displacement threshold to ignore jitter.
- [useOnline](/docs/hooks/use-online): An SSR-safe hook that subscribes to the browser's online/offline events and returns whether the device currently has a network connection.
- [useToggle](/docs/hooks/use-toggle): A boolean-state hook with a fixed toggle/setTrue/setFalse/set action set that keeps a stable reference across renders.
- [useTimeout](/docs/hooks/use-timeout): A declarative one-shot setTimeout hook with a latest-ref callback, a null-to-pause delay, and reset/clear controls.
- [useThrottleValue](/docs/hooks/use-throttle-value): A generic hook that lets the first value in a window through immediately, then trickles at most one update per interval while the source keeps changing.
- [usePrevious](/docs/hooks/use-previous): A hook that returns the last distinct value (Object.is) before the current one, with a read-only render and an effect-committed snapshot, so values created during render are safe.
- [useHover](/docs/hooks/use-hover): A callback-ref hover hook for driving non-visual side effects, not styling.
- [useEventListener](/docs/hooks/use-event-listener): A type-safe window/document/element event listener hook with a latest-ref handler, so it never stale-closures and never rebinds on handler change.
- [useScrollLock](/docs/hooks/use-scroll-lock): A controlled body-scroll lock hook with measured scrollbar compensation and a body-level lock count that cooperates with overlays carrying their own copy of the lock.
- [useSessionStorage](/docs/hooks/use-session-storage): An SSR-safe sessionStorage-backed state hook, kept in sync across same-tab instances only.
- [useDocumentTitle](/docs/hooks/use-document-title): A hook that syncs document.title to a value for as long as a component is mounted, restoring the pre-mount title on unmount.
- [useCountdown](/docs/hooks/use-countdown): A duration-based countdown state machine — seconds-granularity ticking with start/pause/reset and a once-only onComplete.
- [useFullscreen](/docs/hooks/use-fullscreen): A hook that puts a single element into and out of the browser's native fullscreen mode, keeping a `fullscreen` boolean in sync — including when the user presses Esc.
- [useIdle](/docs/hooks/use-idle): A user-idle detection hook that flips a boolean after a period of no pointer, keyboard, wheel, or touch activity.
- [useAsync](/docs/hooks/use-async): A one-call async state machine — idle/pending/success/error with last-call-wins race protection, AbortSignal cancellation and unmount-safe resolves.
- [useDragScroll](/docs/hooks/use-drag-scroll): Grab-to-scroll a container with pointer drags, momentum glide, and click suppression after a drag.
- [useLongPress](/docs/hooks/use-long-press): A press-and-hold gesture hook — pointer-captured, move-tolerant, keyboard-reachable, with 0–1 progress for your own ring.
- [useSwipe](/docs/hooks/use-swipe): A pointer-event swipe hook with direction locking, distance-or-velocity commit, and live follow-the-finger state.
- [useResizeObserver](/docs/hooks/use-resize-observer): A callback-ref hook that measures an element's own size with ResizeObserver — selectable box model, rAF-batched or debounced commits, and no resize-loop errors.
- [useGeolocation](/docs/hooks/use-geolocation): Reads or continuously tracks the browser's geolocation as a six-state machine, with an explicit request()/stop() pair and honest denied / unavailable / timeout branches.
- [usePageVisibility](/docs/hooks/use-page-visibility): An SSR-safe hook that subscribes to document visibility so polling, timers and video can pause when the tab goes to the background, and reports how long the user was away.
- [useBroadcastChannel](/docs/hooks/use-broadcast-channel): An SSR-safe hook that broadcasts messages between same-origin tabs over BroadcastChannel, with capability detection and an optional local echo.
- [useUndoRedo](/docs/hooks/use-undo-redo): A state container with linear undo/redo history — keystroke coalescing, forced breakpoints, a bounded stack, and stable callbacks.
- [useControllableState](/docs/hooks/use-controllable-state): A useState-shaped hook that lets one component serve both controlled (value/onChange) and uncontrolled (defaultValue) callers, with a stable setter and prop-accurate updaters.
- [useSelection](/docs/hooks/use-selection): A list multi-selection state machine — Shift range, ⌘/Ctrl toggle, tri-state select-all, and automatic pruning when items change.
- [usePagination](/docs/hooks/use-pagination): Headless pagination state — clamped page, page count, item range, a client-side slice() and the ellipsis page sequence, controlled or uncontrolled.
- [useFocusTrap](/docs/hooks/use-focus-trap): A hook that keeps keyboard focus inside a container — moves focus in, cycles Tab, defers Escape to you, and returns focus to the trigger.
- [useRovingTabindex](/docs/hooks/use-roving-tabindex): A roving-tabindex hook that collapses a whole control group into one Tab stop — arrow keys inside, with horizontal/vertical/grid lanes, disabled-item skipping, loop-or-stop, Home/End and typeahead.
- [usePermission](/docs/hooks/use-permission): Subscribes to navigator.permissions for one name or a whole panel of them — query only, never request — folding Firefox's rejections, Safari's gaps, unknown names and insecure origins into one honest unsupported state with a reason.
- [useWebShare](/docs/hooks/use-web-share): Opens the native share sheet and degrades honestly — a cancelled sheet is reported as dismissed rather than an error, files are checked with canShare first, and the fallback's own success or failure is reported as such.
- [useSpeechRecognition](/docs/hooks/use-speech-recognition): Speech-to-text on the Web Speech API — interim vs settled transcripts, a continuous mode that survives the engine's silence timeout without becoming unstoppable, and errors split into benign / recoverable / blocked.
- [useMutationObserver](/docs/hooks/use-mutation-observer): A callback-ref hook that watches DOM changes with MutationObserver — filtered attributes, rAF-batched records, and a disconnect/write/observe guard against self-feeding loops.
- [useStep](/docs/hooks/use-step): A step machine for multi-step flows — async can-go-next gates with a pending flag, visited/completed sets, loop, clamping when steps change, controlled or uncontrolled.
- [useList](/docs/hooks/use-list): Array state with every mutation you keep hand-writing — push, insertAt, move, upsert and friends, all batch-safe, out-of-range-safe, and reference-stable.
- [useClipboardPaste](/docs/hooks/use-clipboard-paste): Catches pasted images, files and rich text — page-wide or scoped to a ref — draining clipboardData synchronously, gating files through accept/maxFiles with an itemised rejection list, plus an optional permission-checked active read.
- [useWakeLock](/docs/hooks/use-wake-lock): A screen wake lock hook that keeps the display on for as long as a task lasts — and re-acquires the lock the browser silently takes away every time the tab goes to the background.
- [useHash](/docs/hooks/use-hash): An SSR-safe hook that reads and writes the URL hash as shareable UI state, using pushState/replaceState instead of assigning location.hash.
- [useNotification](/docs/hooks/use-notification): Sends desktop notifications behind a gesture-gated requestPermission() that never throws, keeps the permission state live, registers every notification by tag so close(tag) works, and skips notifications while the page is visible.
- [useOptimistic](/docs/hooks/use-optimistic): Keyed optimistic updates for plain props and plain event handlers — props always reclaim, sync throws become rejections, per-key de-duplication, out-of-order resolves lose, and failures are readable.
- [useEventSource](/docs/hooks/use-event-source): Subscribe to a Server-Sent Events stream with a four-state connection machine, capped exponential-backoff reconnects, named-event subscriptions and callbacks that never re-open the stream.
- [useQueryParam](/docs/hooks/use-query-param): An SSR-safe hook that keeps one piece of component state in a URL query parameter — typed codecs, defaults kept out of the URL, replace by default, and every instance on the page in sync.
- [useIndexedDb](/docs/hooks/use-indexed-db): An async IndexedDB-backed store hook with loading state, versioned upgrades, blocked-deadlock handling, quota errors, key-range queries and cross-tab sync.
- [useMap](/docs/hooks/use-map): Map-shaped React state: set, setAll, remove, replace and reset over a real Map, with any key type, copy-on-write updates, no-op bail-outs and a never-changing actions object.
- [useRaf](/docs/hooks/use-raf): A requestAnimationFrame loop hook that hands every frame a delta/elapsed payload, with start/stop controls, an fps cap and automatic hidden-tab suspension.
- [useScript](/docs/hooks/use-script): An on-demand external script loader hook that reports idle, loading, ready or error and keeps exactly one deduped tag per src across every caller.
- [useFocusWithin](/docs/hooks/use-focus-within): A callback-ref hook that reports whether focus is inside a subtree — no flicker when focus moves between children, and it still flips off when the focused node is removed.
- [usePrefersReducedMotion](/docs/hooks/use-prefers-reduced-motion): An SSR-safe hook that reports whether the user has asked the system to reduce motion, and updates live when the OS setting changes.
- [useCookie](/docs/hooks/use-cookie): A cookie-as-state hook with typed attributes, cross-instance sync, an SSR-safe default snapshot, and writes that refuse instead of silently vanishing over the 4 KB cap.
- [useRetry](/docs/hooks/use-retry): A retry loop for one async call: exponential backoff with full jitter, a shouldRetry predicate, a live countdown to the next attempt, and cancellation that clears every timer.
- [usePoll](/docs/hooks/use-poll): A polling hook that pauses in hidden tabs, catches up on return, skips a tick while a request is still in flight, and backs off through a dynamic interval.
- [useVisualViewport](/docs/hooks/use-visual-viewport): A hook that tracks the visual viewport — size, offsets and pinch scale — and derives the keyboard occlusion so a bottom bar can sit above the on-screen keyboard.
- [useNetworkInfo](/docs/hooks/use-network-info): A useSyncExternalStore hook that reports connection quality rather than reachability — effectiveType, downlink, rtt and saveData normalised to nullable fields, plus one coarse quality label.
- [useBattery](/docs/hooks/use-battery): Reads battery level, charging state and time remaining from the Battery Status API, with a four-way support status and a low-power flag that fails open when no reading is available.
- [useVibrate](/docs/hooks/use-vibrate): A Vibration API hook that plays a normalized haptic pattern from a user gesture, names every refusal instead of failing silently, honours a page-wide haptics mute, and cancels the pattern it owns on unmount.
- [useFormPersist](/docs/hooks/use-form-persist): A form-draft hook: debounced writes into a versioned storage envelope, an explicit restore offer at mount, and a one-call clear after a successful submit.
- [useMutationQueue](/docs/hooks/use-mutation-queue): A durable offline write queue: enqueue with an optimistic id that doubles as an idempotency key, persist it so a reload keeps the work, drain in order when the connection returns, and park a poisoned write instead of letting it block the rest.
- [useDragDropFiles](/docs/hooks/use-drag-drop-files): File drag and drop as props to spread — a dragenter/dragleave depth counter nested children cannot flicker, an honest drag-time validity preview, dropped folders walked through the FileSystem entry API, and every refusal itemised with a typed reason.
- [useLocale](/docs/hooks/use-locale): The reader's resolved locale, time zone, first day of week and numbering system, plus memoised Intl formatters that print the same bytes on the server and after hydration.
- [useMediaRecorder](/docs/hooks/use-media-recorder): MediaRecorder as a hook — start / pause / resume / stop, a live duration that excludes pauses, a container negotiated against what the browser really supports, permission and unsupported as first-class states, and every track released on unmount.
- [useWebSocket](/docs/hooks/use-websocket): One WebSocket as a hook — a four-state connection machine, jittered backoff reconnects gated by a shouldReconnect predicate, an ordered outbound queue that covers the outage, JSON with a raw escape hatch, and a heartbeat that catches sockets that are open but dead.
- [useEyeDropper](/docs/hooks/use-eye-dropper): The screen eyedropper as a hook: open() resolves to a typed outcome — picked, canceled, unsupported or failed — instead of throwing, with hydration-safe support detection, a one-pick-at-a-time guard, and an AbortSignal that unmount fires for you.
- [useSound](/docs/hooks/use-sound): A pooled Audio hook for short UI sounds — preloaded voices so fast triggers overlap instead of cutting each other off, a page-wide mute and master volume, every refusal named, and every element released on unmount.
- [useWorker](/docs/hooks/use-worker): Run a pure function off the main thread: the function is stringified into a Blob worker, every call is a promise matched back by id so out-of-order completions land on the right caller, transferables move in both directions, task errors reject without replacing the worker, and everything is terminated on unmount.
- [useFps](/docs/hooks/use-fps): A frame-rate probe that reports rolling fps over a sliding window of requestAnimationFrame timestamps, counts jank frames, and pauses instead of reporting zero while the tab is hidden.
- [useTextToSpeech](/docs/hooks/use-text-to-speech): The browser speech engine as a hook — speak/pause/resume/cancel, a voice list that survives the async voiceschanged population, word boundary events mapped back into your own string, and a cancel on unmount so navigation never leaves a voice talking.

- **Blocks**
- [Pricing Table](/docs/blocks/pricing-table): A four-state pricing section with a data-derived monthly/yearly toggle and a highlighted recommended tier.
- [Testimonials](/docs/blocks/testimonials): A masonry wall of customer quote cards with avatars, driven by one contract through all four data states.
- [Stats Section](/docs/blocks/stats-section): A marketing KPI band of big formatted numbers with hairline dividers, driven by a four-state contract.
- [FAQ Section](/docs/blocks/faq-section): A four-state FAQ accordion block with a self-contained, dependency-free disclosure list and smooth grid-rows expansion.
- [Hero Section](/docs/blocks/hero-section): A props-driven landing hero — eyebrow, headline, dual CTAs, social-proof bar and an optional visual that collapses to a centred column when omitted.
- [Feature Grid](/docs/blocks/feature-grid): A four-state feature section of equal-weight icon cards, with optional real "learn more" links and no cap on how many render.
- [CTA Band](/docs/blocks/cta-band): A closing call-to-action strip — headline, one supporting line and a primary/secondary CTA pair, in four surfaces and two layouts.
- [Logo Cloud](/docs/blocks/logo-cloud): A trusted-by logo wall that optically equalises logos of wildly different aspect ratios, as a static grid or a reduced-motion-aware marquee.
- [Newsletter Signup](/docs/blocks/newsletter-signup): An email capture band built around its submit state machine — submitting, confirmed, already-subscribed, and a failure that keeps the address you typed.
- [Site Footer](/docs/blocks/site-footer): A contract-driven site footer with a brand block, named social links, mobile-collapsible link columns and a legal bottom bar.
- [Team Grid](/docs/blocks/team-grid): A four-state team section — equal-height member cards with initials-fallback avatars, optional bios and real social links, groupable by department.
- [Contact Section](/docs/blocks/contact-section): A contact block whose subject is the submit state machine — sending, confirmed, or failed with every character preserved — beside contact rows that derive their own mailto/tel/map links.
- [Blog Card Grid](/docs/blocks/blog-card-grid): A four-state article grid — one stretched link per card with the category and author still independently clickable, a featured post spanning two columns, and deliberate, configurable line clamping so mismatched title lengths still line up.
- [Auth Card](/docs/blocks/auth-card): One card for sign-in, sign-up and reset, built around a typed rejection union — wrong credentials, address taken, rate limited — with correct autocomplete tokens per mode.
- [Dashboard Shell](/docs/blocks/dashboard-shell): An app shell with a pinned top bar, a collapsible sidebar that becomes a modal drawer on mobile, and a main region that is the page's only scroll container.
- [Integration Grid](/docs/blocks/integration-grid): A four-state integrations directory: debounced search and category facets that really filter, a truthful result count, and per-card connect / disconnect with pending, failure and retry.
- [Metric Overview](/docs/blocks/metric-overview): A dashboard KPI row — one shared range switcher over comparable cards, deltas coloured by each metric's polarity, and a sparkline per card.
- [Error Page](/docs/blocks/error-page): A full-viewport error page for 404 / 403 / 500 / offline / maintenance, with per-type copy, history-aware recovery actions and a copyable error ID.
- [Roadmap Board](/docs/blocks/roadmap-board): A public product roadmap in planned / in-progress / shipped lanes, where each entry can be upvoted optimistically — and the count rolls back with a visible error when the server refuses.
- [Job Listings](/docs/blocks/job-listings): A four-state careers board — roles grouped by department, three filters that genuinely combine, a live result count, and salary ranges whose absence is spelled out instead of left blank.
- [Settings Page](/docs/blocks/settings-page): A settings page shell — section nav, per-section save, and an unsaved-changes guard that stops a section switch with save / discard / cancel instead of dropping the edit.
- [API Keys Panel](/docs/blocks/api-keys-panel): A four-state API key manager built around show-the-secret-once — the reveal cannot be closed until the user confirms they saved it, revoking repeats the key's name, and every key says whether it has ever been used.
- [Billing History](/docs/blocks/billing-history): A four-state invoice list — per-currency money through Intl, a six-state lifecycle with partial-refund arithmetic, real filters, pagination, and PDF links that never render as dead buttons.
- [Notification Preferences](/docs/blocks/notification-preferences): An events × channels notification matrix that saves per switch, with locked always-on rows, a disconnected channel column, bulk row/column actions and midnight-spanning quiet hours.
- [Two-Factor Setup](/docs/blocks/two-factor-setup): The enable-2FA flow built around its one irreversible step — recovery codes are rendered once, the finish button refuses to fire until they are saved, and finishing wipes them from the DOM.
- [Usage Dashboard](/docs/blocks/usage-dashboard): A period-scoped usage block — headline, quota bar, cumulative burn-up curve and per-dimension breakdown all derived from one bucket array, plus a run-rate projection stated apart from actual usage.
- [Empty Dashboard](/docs/blocks/empty-dashboard): A first-run dashboard page — welcome copy, a setup checklist that counts done and skipped separately, a labelled skeleton of the dashboard-to-be, and a confirmed sample-data escape hatch.
- [Search Results](/docs/blocks/search-results): A four-state search results page — query echo, keyword highlighting, faceted filters whose counts are the real post-click result count, and pagination that snaps back to page 1 on every filter change.
- [Checkout Form](/docs/blocks/checkout-form): A one-page checkout — contact, delivery address, payment method and a summary whose tax, delivery and fees are derived from the form in the same render, so the money can never lag the address.
- [Order Confirmation](/docs/blocks/order-confirmation): The page you land on once the money has moved — a dictatable, one-click-copyable order number, an itemised table whose money is refined to add up, a delivery window rather than a promised day, ship / pickup / digital fulfillment, and print styles that survive paper.
- [Feature Comparison](/docs/blocks/feature-comparison): A dated us-vs-competitors capability table — yes / partial / no / not-disclosed told apart by shape and word, numeric rows with a per-row unit, a frozen capability column, and a verified-on date measured against an injected now.
- [Case Study Grid](/docs/blocks/case-study-grid): A four-state customer-story grid where the quantified result is the first-class field: every metric carries value, unit, direction and a required baseline (or says it has none), industry and company-size facets really filter with truthful counts, and logos of any aspect ratio are optically area-matched.
- [Status Page](/docs/blocks/status-page): A public status page whose overall banner is derived from the worst service state and open incident, with per-service 90-day uptime strips, timestamped incident updates and upcoming maintenance windows.
- [NPS Survey](/docs/blocks/nps-survey): A whole Net Promoter Score round in one block: a keyboard-reachable 0–10 scale, a follow-up question reworded per detractor / passive / promoter bucket, an optional contact-me box, and a one-submission-per-session thank-you.
- [Invite Team](/docs/blocks/invite-team): A four-state invite panel: a paste-a-list email field with per-address reasons, a role per invite, a seat meter that blocks over-allocation, undoable revoke and a copyable join link.
- [Help Center](/docs/blocks/help-center): A support landing block whose search ranks titles, keywords and summaries, whose topic cards report honest counts, and whose zero result offers a topic or a human instead of a dead end.
- [Referral Program](/docs/blocks/referral-program): A four-state referral panel: the personal invite link with copy and templated share targets, tier progress counted from the referral list itself, every referred person with their stage and reward, and the program terms behind a disclosure.
- [App Download](/docs/blocks/app-download): A get-the-app block that promotes the store matching the visitor's device, encodes the smart link into a scannable QR for desktop visitors, and renders the store badges you supply instead of redrawing brand marks.
- [Cookie Preferences](/docs/blocks/cookie-preferences): A granular cookie consent manager: one row per category with plain-language copy and a vendor-count disclosure, a locked strictly-necessary row, equal-weight accept-all / reject-all / save-selection, and a saved-choice strip that re-opens the editor.
- [Subscription Manager](/docs/blocks/subscription-manager): A manage-plan block — the running plan with its renewal countdown and seat overage, usage against the plan's own limits, prorated plan changes, and a cancellation that states what is lost and when access actually ends.
- [Onboarding Checklist](/docs/blocks/onboarding-checklist): A getting-started panel driven by a task contract: a progress ring, rows that expand to a description and one real action, instructions that collapse themselves once a task is ticked, an honest time-left figure, and an inline celebration whose dismiss says where to find the panel again.
- [Feature Announcement](/docs/blocks/feature-announcement): A what's-new surface — modal dialog or anchored popover — that steps through the features a reader has not seen yet and reports every seen id plus the reason it closed.
- [API Playground](/docs/blocks/api-playground): A try-it console that generates parameter, header and body editors from an operation definition, sends the request through an injected fetcher, and reports status, timing, size and headers with a pretty/raw toggle.
- [Pricing Calculator](/docs/blocks/pricing-calculator): An interactive estimator whose billable axes re-derive the bill on every change — switching tier by itself when a cap is crossed, and naming the cheaper plan when another one wins.
- [Cart Drawer](/docs/blocks/cart-drawer): A slide-out cart panel whose money re-derives on every change — quantity steppers that refuse with a reason, an undoable remove, a promo field driven by the host's verdict, and free-shipping progress.
- [Age Gate](/docs/blocks/age-gate): A date-of-birth gate with three explicit boxes, a real calendar behind them, and a minimum-age rule whose refusal is honest and always offers a way out.
- [Waitlist](/docs/blocks/waitlist): A viral waitlist block: validated email capture, a joined panel that reports your place and derives the rest of the maths, a referral link worth a stated number of places, and a leaderboard teaser that pins your own row.
- [Scrollytelling Panel](/docs/blocks/scrollytelling-panel): A pinned visual beside stepped copy, where an IntersectionObserver reading line hands the frame to whichever step you are reading.
- [Sticky Footer Reveal](/docs/blocks/sticky-footer-reveal): A footer that sits behind the page — the content is an opaque sheet on a higher z-index and the last screenful of scroll slides it off the pinned footer, with a plain in-flow fallback when nothing scrolls.
- [Feature Hover Preview](/docs/blocks/feature-hover-preview): A feature list where hovering or focusing a row cross-fades the preview panel beside it, with a measured accent rail on the active row and media inline on touch.
- [Danger Zone](/docs/blocks/account-danger-zone): A settings-page danger zone — one row per irreversible action with its consequences itemised, a type-the-resource-name gate, grace windows dated from the payload's own clock, and blocked actions that name their blocker instead of a dead button.
- [Webhooks Manager](/docs/blocks/webhooks-manager): A four-state webhook endpoint manager — event multi-select, reveal-and-rotate signing secrets with the overlap window stated, test sends that explain when they are blocked, and per-endpoint deliveries with retry.
- [Data Export Request](/docs/blocks/data-export-request): A GDPR-style data export block — pick scopes against live size estimates, confirm a request that states what the archive contains and who can open it, watch a build that never dresses a queue position up as progress, and download a link that visibly counts down to its own expiry.
- [SSO Setup](/docs/blocks/sso-setup): A four-state SAML/OIDC connection panel — copyable values in both directions, DNS domain proof, claim mapping, a test verdict that names the broken setting, and an enforcement switch that spells out who gets locked out.
- [Trust Center](/docs/blocks/trust-center): The public security page a B2B buyer asks for — audit dates measured against each report's own refresh cycle, a filterable subprocessor table with DPA links, plain-language practices, uptime, and when a human last reviewed the page.
- [Legal Consent](/docs/blocks/legal-consent): A versioned terms and privacy acceptance panel: what changed since the version on file, full text that must actually be reached before its box unlocks, separable consents, and the record it hands back.
- [Seat Management](/docs/blocks/seat-management): A member roster crossed with the seat ledger — who holds a billable, free, invited or deactivated seat, the cost of adding or removing one previewed before it is committed, an overage warning with both of its exits, and a bulk deactivation that says what it frees before it says what it saves.
- [Incident Composer](/docs/blocks/incident-composer): The operator-side form for writing a status-page update — state picker, per-component impact, live email/SMS/webhook preview and a derived subscriber reach, with resolve behind a confirm.