Z

Zyeon-AI/zyeon-ui-components/ui

Files

CodeInfo

A/B Test Resultab-test-resultAn 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.

AccordionaccordionA zero-dependency accessible disclosure list — single or multiple expansion, grid-rows animation, and full APG keyboard support.

Action Sheetaction-sheetAn 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.

Activity Feedactivity-feedA 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.

Activity Heatmapactivity-heatmapA GitHub-style contribution grid — daily counts as a five-step color scale over a windowed week-by-week calendar, with four data states.

Add to Calendaradd-to-calendarA split button that hands one event to Google, Outlook, Office 365 or Yahoo and writes a spec-correct .ics in the browser — real IANA zones with a generated VTIMEZONE, exclusive all-day ends, 75-octet folding and a validated RRULE.

Address Formaddress-formA postal address form driven by a country rule table: per-country field set, field order and labels, state dropdown or free text or nothing, postal codes that are required, optional or absent, blur-time validation, correct autocomplete tokens, and an announced clear when a value cannot follow you to the next country.

Agent Graphagent-graphA 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.

Agent Handoffagent-handoffAn 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 Inboxagent-inboxA 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 Permissionsagent-permissionsA 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.

Agent Planagent-planAn 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.

Agent Rosteragent-rosterA 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 Statusagent-statusA 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.

Agent Stepsagent-stepsA 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.

AI Badgeai-badgeA 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.

AI Disclaimerai-disclaimerThe '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 Form Assistai-form-assistModel-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.

AI Selection Menuai-selection-menuAn 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.

Amount Keypadamount-keypadAn 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.

Anchor Headinganchor-headingA heading that owns its anchor — a stable id de-duplicated against the live document, non-ASCII kept instead of stripped, a permanently focusable link that fades in on hover, and one click that deep-links, updates the hash and copies the absolute URL.

Animated Beamanimated-beamConnect two interface nodes with a responsive animated SVG beam.

Animated Listanimated-listA flex column that staggers items in on first mount, pops in new entries, and exits removed ones while the rest smoothly re-flow into place.

Animated Tabsanimated-tabsA controlled tab strip with a sliding active indicator — underline and pill variants animated via motion layout animation.

Animated Textanimated-textCharacter-level text animation — typewriter, scramble and flowing gradient variants in one component.

Animated Tooltipanimated-tooltipA self-contained hover/focus tooltip with a spring pop-in, reduced-motion fallback and an arrow callout — no Radix dependency.

Annotated Textannotated-textProse 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.

AnnouncementannouncementA compact inline announcement link with an optional label, icon and directional CTA cue.

AnnouncerannouncerA 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.

Anomaly Listanomaly-listA 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.

Answer Highlightanswer-highlightThe 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.

Answer Metric Cardanswer-metric-cardAn 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 Sourcesanswer-sourcesThe 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.

API Changelog Diffapi-changelog-diffAn endpoint-level diff between two API versions — routes grouped as removed, changed, deprecated and added, each expandable to the field-level story, with breaking changes counted apart from additive ones and every deprecation shown with its sunset date and whole days remaining.

API Endpointapi-endpointA collapsible API reference card with a monochrome-safe method badge, grouped parameter tables, expandable response examples, and a generated Copy-as-cURL command that reports failure honestly.

API Error Cardapi-error-cardAn 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.

API Key Fieldapi-key-fieldA settings-page secret field with fixed-length masking, reveal/hide with optional auto re-mask, copy-to-clipboard with a visible failure fallback, and a two-step confirm before regenerating.

App Launcherapp-launcherA nine-dot app switcher: a grid button that drops a portalled tile grid of real links, with arrow-key grid navigation, groups, pinned and recent rows, and a search box once the suite outgrows a 3x3.

App Update Sheetapp-update-sheetA 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.

Artifact Panelartifact-panelA 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.

Assignee Pickerassignee-pickerA 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.

Assistant Avatarassistant-avatarAn 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.

Attachment Trayattachment-trayThe 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.

Audio Playeraudio-playerA minimal token-styled audio player card — play/pause, seek, and mm:ss time over a native <audio> element.

Audio Transcriptaudio-transcriptA timestamped, speaker-labelled transcript synced to a playhead — the spoken line highlights and stays in view until the reader scrolls away, any line seeks to its exact start, and search steps through every hit.

Audio Trimmeraudio-trimmerA 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.

Audio Visualizeraudio-visualizerA real-time AnalyserNode visualizer — spectrum bars, oscilloscope, radial ring or segmented level meter, driven by a stream, an audio element or an analyser you own.

Audio Waveformaudio-waveformA canvas amplitude waveform with a click/drag/keyboard seek slider — takes precomputed peaks or decodes a src itself, highlights regions, and stays a controlled display while your own audio element plays.

Audit Trailaudit-trailA compliance-grade activity log — one readable sentence per event, day separators, expandable before/after diffs, and real loading/empty/error states.

AuroraauroraAn animated aurora-gradient background container — theme-token blobs drifting in pure CSS.

Autosize Textareaautosize-textareaA textarea that grows with its content via CSS field-sizing with a scrollHeight-based JS fallback, capped between minRows and maxRows.

Availability Pickeravailability-pickerA week × time-slot grid you brush to declare when you are free — paint/erase drag strokes, keyboard painting, blocked slots and an optional group heatmap.

Avatar Groupavatar-groupAn overlapping avatar stack with ring cutouts, letter fallbacks for broken images, and a computed +N overflow chip.

Avatar Statusavatar-statusOne 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.

Avatar Uploadavatar-uploadThe 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.

Back Buttonback-buttonA 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.

Balanced Headingbalanced-headingA 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.

Bank Details Formbank-details-formPayout 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 IBAN mod-97 check, the ABA weighted checksum, entered values carried across a country switch, and the account masked to its last four after entry.

BannerbannerA page-top announcement bar with info, accent and destructive variants, a real action link and consumer-owned dismissal.

BarcodebarcodeA 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.

Batch Jobsbatch-jobsA 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.

Bento Gridbento-gridA responsive tiling layout of mixed-size feature cards, with a pointer-tracked glow and honest click affordances.

Bokeh Lightsbokeh-lightsSlowly floating out-of-focus light discs on one canvas — seeded for a reproducible picture, painted from a pre-rendered sprite instead of a per-frame blur, with an opacity lever that keeps overlaid copy readable.

Border Trace Buttonborder-trace-buttonA native button with an animated border trace and reduced-motion fallback.

Bottom Navbottom-navA mobile tab bar with badges, safe-area padding and an indicator that measures the active item and glides to it.

Breadcrumb Dropdownbreadcrumb-dropdownA 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.

BreadcrumbsbreadcrumbsAn accessible breadcrumb trail with collapsible overflow — first item + ellipsis + last items once maxItems is exceeded.

Bulk Action Barbulk-action-barA floating toolbar that mounts once rows are selected — inline actions, an overflow "More" menu, and a live-announced count.

Business Hoursbusiness-hoursA 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.

Button Groupbutton-groupA 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.

BYOK Setupbyok-setupA 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.

Cache Indicatorcache-indicatorA 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.

Calculator Inputcalculator-inputA 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.

Calendar Monthcalendar-monthA 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.

CalloutcalloutAn 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.

Camera Capturecamera-captureA real getUserMedia webcam capturer — live preview, countdown shutter, mirrored canvas export, and a keep/retake review that returns a JPEG Blob.

Canvas Reveal Hovercanvas-reveal-hoverA panel that reveals a seeded dot matrix on a canvas beneath its content — squares ignite outward from where the pointer or focus entered, and dissolve in a scattered order when it leaves.

CarouselcarouselAn embla-powered slide carousel with autoplay (hover-pause, reduced-motion aware), looped or bounded navigation, arrow buttons and synced pagination dots.

Cascading Selectcascading-selectDependent 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.

Changelog Listchangelog-listUser-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 per-release permalinks.

Char Counterchar-counterA grapheme-accurate character budget for any input or textarea — a warning band, an explicit over-limit state, a caliber prop so the count matches the server, and a hard cap that trims the paste out loud instead of swallowing it.

3D Bar Gridchart-3d-barsAn orbitable WebGL 3D bar grid — categories along X, series lanes along Z, height as value — with runtime chart-token materials, hover tooltips and four contract-driven states.

3D Donutchart-3d-donutA four-state 3D extruded donut on react-three-fiber — hovered slices lift and slide outward with a drei Html tooltip, the compact total floats in the hole, and a keyboard-focusable DOM legend mirrors the hover, all themed by runtime-resolved chart tokens.

3D Funnelchart-3d-funnelA four-state 3D funnel of stacked truncated cones whose radii track stage values, with orbit controls, per-stage conversion labels via Html, and theme tokens resolved into WebGL materials at runtime.

3D Globe Arcschart-3d-globeA four-state 3D globe with a graticule, value-sized lat/lng markers and elevated great-circle arcs between origin/destination pairs, coloured at runtime from the live chart tokens.

3D Heightmap Matrixchart-3d-heightmapA four-state 3D lego-plot matrix — rows × columns of WebGL columns whose height and colour intensity both encode one value, with runtime-resolved theme tokens, orbit controls and hover tooltips.

3D Network Graphchart-3d-networkA four-state 3D node-link graph on react-three-fiber — spheres sized by degree, one line-segment pass for all edges, a deterministic golden-angle layout, hover tooltips, and theme tokens resolved into WebGL materials at runtime.

3D Radial Barschart-3d-radial-barsA four-state 3D radial bar chart on react-three-fiber — bars ring a center with height encoding value, orbit camera, hover tooltips and runtime-resolved theme tokens, driven by one zod contract.

3D Ribbon Serieschart-3d-ribbonA four-state multi-series 3D ribbon chart on react-three-fiber — one extruded lane per series, theme tokens resolved into WebGL materials at runtime, hover isolates a ribbon.

3D Scatter Cloudchart-3d-scatterAn orbitable four-state 3D scatter cloud on react-three-fiber — cluster-colored spheres inside axis grid planes, chart tokens resolved to WebGL at runtime and re-resolved on theme flips, with drei Html tooltips and an sr-only data table.

3D Surface Plotchart-3d-surfaceA four-state rotatable 3D surface from a z-value grid — vertex colors lerped between runtime-resolved chart tokens by height, a subtle wireframe overlay, orbit controls and hover tooltips, with SSR never touching WebGL.

Adjacency Matrixchart-adjacency-matrixA 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.

Agent Trajectorychart-agent-trajectoryA four-state agent-run timeline: every step a measured segment on the run's own clock coloured by kind, retries nested as attempts inside the step they re-attempt, generated tokens per step on a second track, and a wall-time-versus-generation mix apportioned by largest remainder so the shares add to exactly 100.

Aging WIPchart-aging-wipA 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.

Alluvial Diagramchart-alluvialA 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.

Anomaly Timelinechart-anomaly-timelineA 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.

Arc Diagramchart-arc-diagramA 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.

Area Chart (Stacked)chart-area-stackedA 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.

Attention Headschart-attention-headsA small-multiples grid of causal attention maps — one miniature token-by-token heat matrix 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 attention mass split into four disjoint shares that add to exactly 100.

Autocorrelation (ACF)chart-autocorrelationA four-state ACF/PACF stem plot that computes the correlations from the raw series itself — one stem per lag against a ±1.96/√n band, lags outside it carried by shape as well as colour, and a radiogroup that pairs or isolates the two panels.

Axis Brushchart-axis-brushA 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.

Badminton Shot Mixchart-badminton-shot-mixA four-state badminton shot-mix chart — one 100% stacked bar per game across five fixed shot types with largest-remainder shares and an attack-share tick under each row.

Grouped Bar Chartchart-bar-groupedA four-state grouped bar chart that flips to horizontal rows when columns would go under 10px, textures every series so colour is never the only cue, and keeps missing readings distinct from measured zeros.

Bar Chart · Interactivechart-bar-interactiveAn interactive bar chart card with per-series big-number toggles that switch which series the bars plot.

Bar Racechart-bar-raceA 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.

Baseball Spray Chartchart-baseball-sprayA 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 Strike Zonechart-baseball-strike-zoneA 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 Win Probabilitychart-baseball-win-probabilityA 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.

Basketball Lineup Stintschart-basketball-lineup-stintsA 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.

Basketball Momentum Runchart-basketball-momentumA 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 Shot Zoneschart-basketball-shot-zonesA 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.

Beeswarmchart-beeswarmA 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.

PCA Biplotchart-biplotA 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.

Bland-Altman Plotchart-bland-altmanA four-state Bland-Altman agreement plot that computes bias and ±1.96 SD limits of agreement from raw measurement pairs, drawing a solid bias line, dashed labelled limit lines, and out-of-limits pairs in the destructive tone.

Blocker Impactchart-blocker-impactA 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.

Body Load Mapchart-body-mapA four-state anatomical body map in hand-rolled SVG — mirrored front and back silhouettes whose muscle areas shade with one chart token at stepped opacity, hatching for areas nobody reported, leader-lined labels on the worst areas, and a ranked list with the front/back split and a flag line.

Box Plotchart-boxplotA four-state box plot comparing distributions side by side: R-7 quartiles, Tukey 1.5×IQR whiskers on real observations, de-overlapped outliers, and raw points for groups too small for quartiles.

Bracket Replaychart-bracket-replayA four-state playable knockout bracket — a 16-entrant draw revealed round by round with seed-aware upset chips, structural feed validation and a champion cell that fills at the end.

Break Point Ledgerchart-break-point-ledgerA four-state break-point ledger for a tennis match — one track bar per player per set showing chances vs converted with conversion labels, a match totals row and per-bar hover detail.

Chart Bubblechart-bubbleA 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.

Bullet Chartchart-bulletA four-state bullet chart: one row per KPI with its own scale, a measure bar against a target tick and qualitative bands, plus clamped off-scale markers.

Bump Chartchart-bumpA four-state bump chart: one line per entity on a reversed integer position scale, competition ranking for ties, edge labels at both ends, and a broken line wherever an entity is off the board.

Chart Burndownchart-burndownA 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.

Calendar Heatmapchart-calendar-heatmapA 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.

Calibration Curvechart-calibrationA 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.

Candlestick Chartchart-candlestickA four-state OHLC candlestick chart: hollow-up / solid-down bodies, wicks, doji and limit-locked sessions kept visible, and a full-OHLC tooltip.

Chord Diagramchart-chordA 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.

Circle Packingchart-circle-packingA 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.

Climate Stripeschart-climate-stripesOne 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.

Cohort Retention Gridchart-cohort-retentionA triangular cohort-retention table — one row per entry cohort, one column per period since signup, cells that carry both a colour-graded rate and its absolute count, with unobserved periods left blank instead of zeroed.

Combo Chart (Dual Axis)chart-combo-dual-axisA 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.

Confusion Matrixchart-confusion-matrixA 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.

Connected Scatterchart-connected-scatterA 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.

Contact Heightchart-contact-heightA four-state contact-height chart in hand-rolled SVG — one stepped density ridge per wing on a shared centimetre axis, strike-zone tiers cut from the player's own standing height, the 91.4 cm net cord marked, the ideal-window share printed per wing and a call-out when a wing is being struck below the knee too often.

Context Windowchart-context-windowA 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.

Contourchart-contourA 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.

Control Chartchart-controlA four-state SPC control chart that estimates its own limits from the moving range and flags every rule violation with the rule it broke.

Correlogramchart-correlogramA 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.

Cost-Quality Frontierchart-cost-quality-frontierA four-state price/quality plane for a model shortlist — the Pareto frontier drawn through the non-dominated models, dominated ones greyed and told which model beat them, and a movable iso-value line that names the best buy at the reader's own quality-per-dollar exchange rate.

Court Position Ladderchart-court-position-ladderA four-state pickleball position ladder — points grouped by the deepest position reached (baseline, transition, kitchen) with won/lost splits, advance connectors and per-rung win rates.

Court Zone Win Ratechart-court-zone-winrateA four-state tennis court choropleth in hand-rolled SVG — the player's own half split into nine ITF-derived zones tinted diverging around a 50% point win rate, low-sample zones hatched.

Coverage Heat Replaychart-coverage-heat-replayA four-state playable coverage heatmap — presence-time heat accumulates over a scrubbable match clock on an ITF-true half court, with set markers and stable full-match opacity steps.

Cricket Manhattanchart-cricket-manhattanA 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.

Cricket Wagon Wheelchart-cricket-wagon-wheelA 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.

Critical Pathchart-critical-pathA 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.

Cumulative Flow Diagramchart-cumulative-flowA 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.

Cycle Time Scatterchart-cycle-time-scatterA 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.

Data Mixturechart-data-mixtureA 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.

Decision Curve Analysischart-decision-curveA four-state decision curve: net benefit against threshold probability, one line per strategy read against treat-all and treat-none references derived from the prevalence, with the useful threshold range banded and the leading strategy called out wherever you scan.

Dendrogramchart-dendrogramA 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.

Deuce / Ad Splitchart-deuce-ad-splitA four-state deuce-versus-ad court split for one server — the same metrics mirrored around the centre mark, every row drawn as a rate of its own side's whole so two unequal samples compare fairly, mix members apportioned by largest remainder into exactly-filled 100% strips, wide gaps flagged toward the better half, and per-row disclosure for the counts behind each rate.

Difference Area Chartchart-difference-areaA 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.

Donut Chart · Center Statchart-donut-statA four-state donut widget with a center stat and value/percentage legend, driven by one zod contract.

Doubles Formationchart-doubles-formationA four-state doubles serve-formation card in hand-rolled SVG — a real tennis, badminton or pickleball court drawn in metres from the rulebook, a vertical tab list where each formation's row carries its usage share and win rate on one bar, and four role-coloured player markers that glide to the new stance when the formation changes.

Draw Pathchart-draw-pathA four-state draw path — one seed's route round by round with each projected opponent's rating, head-to-head and arrival odds that add to exactly 100, faint branches for whoever could arrive instead, and Elo win chances compounded into a survival bar.

Drawdown (Underwater)chart-drawdownA four-state underwater drawdown chart in plain SVG — percent below the running peak hanging from a zero line, each dip shaded with its trough marked, a labelled max-drawdown call-out, and a recovery read-out that flags what is still under water, all derived from a raw level series.

Drift Monitorchart-drift-monitorA four-state feature-drift board: one threshold-banded strip per feature on a shared PSI/KL scale with the warn and alert rules drawn across every row, the prediction-drift lane on top, the worst offender named with its per-window trend, and a window tab-strip that re-reads the whole card.

Dumbbell Chartchart-dumbbellA 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.

ECDFchart-ecdfA 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.

Elevation Profilechart-elevation-profileA 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.

Elo Ratingschart-elo-ratingsA four-state arena ratings card: one line per model with a confidence band derived from its battle count, releases annotated with the rating move they produced, a standings ladder that flags statistically tied neighbours, and a pairwise win-rate matrix that doubles as the keyboard-navigable control surface.

Embedding Projectionchart-embedding-projectionA 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 cluster-versus-label cross-tab apportioned to exactly 100, and a derived caveat naming the groups whose between-blob distances carry no meaning.

Error Barschart-error-barsA 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.

Eval Leaderboardchart-eval-leaderboardA model × benchmark leaderboard: every column normalised in its own direction with the raw score printed and the per-column best marked, rank with movement arrows against the previous snapshot, and a weighted index whose whole-percent weights are apportioned by largest remainder and always total 100.

Event Timelinechart-event-timelineA 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.

Fatigue and Freshnesschart-fatigue-freshnessA four-state performance-management chart (CTL/ATL/TSB) in hand-rolled SVG — fitness and fatigue as slow and fast exponential averages of daily training stress, form shaded around zero with separate fresh and fatigued fills, race-day markers through both panes, and a full pointer-plus-keyboard day readout.

Focus Timechart-focus-timeA 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.

Forest Plotchart-forest-plotA four-state meta-analysis forest plot in hand-rolled SVG — weight-sized squares with CI whiskers per study against a vertical null line, a pooled summary diamond, log or linear axis, and disclosed repair of dirty extraction data.

Form Guidechart-form-guideA four-state team form guide that ranks teams by points, with last-N W/D/L result chips, a hand-rolled rolling points-per-game sparkline on a fixed shared scale, and season totals per row.

Front Wall Targetschart-front-wall-targetsA four-state squash front-wall map in hand-rolled SVG — the wall face with WSF tin, service and out lines, strikes dotted by shot type in color plus shape, tin and out hits hollow.

Funnel Chartchart-funnelA four-state conversion funnel: tapering bands with a minimum width, plus per-stage counts, step conversion and cumulative conversion.

Funnel Plotchart-funnel-plotA 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.

Gait Cycle Polarchart-gait-cycleA four-state polar phase chart of one cyclic movement in hand-rolled SVG — left and right drawn as closed loops around 0–100% of the cycle with the gap between them shaded, phase sectors labelled at the rim, and an asymmetry index printed signed as well as absolute.

Chart Ganttchart-ganttA 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.

Gauge Chartchart-gaugeA four-state needle dial that reads one metric against contract-driven threshold bands, with explicit boundary attribution and an out-of-range caret.

GPU Utilizationchart-gpu-utilizationA four-state cluster-utilisation card: a device-by-time SM occupancy strip, one memory line per device group read against the HBM ceiling, and idle stalls drawn as selectable bubbles sized by their duration, with the idle share, the longest stall and a wall-clock budget totalling exactly 100% all derived in-component.

Head-to-Head Historychart-h2h-historyA four-state head-to-head rivalry ledger — one row per meeting on a center-spine timeline with the score on the winner's side, surface chips in fixed colors, and a running tally with per-surface splits.

Heatmap Matrixchart-heatmap-matrixA rows × columns value grid with sequential and diverging colour scales — the diverging arms stay symmetric around the centre, the domain is fixable so two grids stay comparable, and missing values never render as zero.

Hexbin Density Plotchart-hexbinA 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.

Histogramchart-histogramA four-state distribution chart that bins raw values itself — auto / fixed-count / fixed-width bins with optional percentile reference lines.

Hockey Rink Shotschart-hockey-rink-shotsA 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.

Horizonchart-horizonA 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.

Heart Rate Zoneschart-hr-zonesA 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.

HRV Frequency Spectrumchart-hrv-spectrumA four-state HRV frequency-domain card in plain SVG — the power spectral density drawn as an area, cut at the exact VLF / LF / HF edges and integrated by the trapezoid rule into each band's absolute power and share, with an LF:HF readout, a normalised-units toggle, and the power that falls in no band drawn bare and counted out loud.

Iciclechart-icicleA 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.

Kitchen Dink Mapchart-kitchen-dink-mapA four-state pickleball dink map in hand-rolled SVG — the opponent's kitchen drawn from USA Pickleball dimensions, dinks dotted by outcome (in / too deep / net / wide) with per-outcome shares.

Lactate Threshold Curvechart-lactate-curveA four-state blood-lactate step test in plain SVG — a monotone curve through the measured stages, LT1 and LT2 as labelled vertical guides, the three training zones derived from those two intensities and shaded, and an optional heart-rate line on its own right axis.

Learning Curvechart-learning-curveA four-state learning curve in plain SVG — training and validation score against training-set size, each inside a ±1 SD band the component computes from the raw per-fold scores, with the converged gap bracketed on the plot and classified as high variance, still learning, high bias or converged against a target line.

Legend Togglechart-legend-toggleA 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.

Lift Curvechart-lift-curveA 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 Divergingchart-likert-divergingA 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.

Line Call Reviewchart-line-call-reviewA challenge ledger that plots every line-call review by the millimetres between ball and paint — both drawn at real scale — emphasising overturned calls, and tracking each player's per-set allowance spent against what is still in hand.

Multi-Series Line Chartchart-line-multiA four-state multi-series line chart whose shared crosshair reads every series at the hovered x, ranked by value, with null gaps left broken.

Lollipop Chartchart-lollipopA 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.

Marginal Histogramchart-marginal-histogramA four-state scatter plot with a binned distribution along each axis — three regions on one shared, pixel-aligned coordinate system, linked by hover.

Marimekko Chartchart-marimekkoA 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.

Market Depthchart-market-depthA 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.

Match Stats Mirrorchart-match-stats-mirrorA four-state broadcast-style match stats panel — mirrored bars for two players around a centered label column, count rows split by share and percent rows on a 0-100 half scale.

Match Workloadchart-match-workloadA four-state card for the physical cost of one match: distance and direction changes per set as paired bars on independent scales, a cumulative distance lane, and a tabbed per-set panel with work-to-rest and the average-to-peak movement speed range.

Milestone Healthchart-milestone-healthA 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.

Point Momentum Runchart-momentum-runA four-state point-by-point tennis momentum strip in hand-rolled SVG — one tick per point above or below the centre line, consecutive points by the same player merged into run blocks whose width is the streak length, break points drawn as taller ticks, breaks of serve as capped full-height hairlines, set dividers with a derived game score under each set, and the longest run per player printed.

Movement Trailchart-movement-trailA four-state playable movement replay — one player's tracked path on an ITF-true half court with recency-faded trail, live distance and speed readouts, play/scrub/speed controls.

Net Clearancechart-net-clearanceA four-state tennis net-clearance chart in hand-rolled SVG: a side elevation with the net drawn to scale at the left, every tracked shot one mark placed by the height it passed the cord against the depth it landed, the coached clearance window banded, netted balls stacked on the net in the destructive token, median crosshairs, a forehand/backhand filter and a screen-reader depth-zone table.

Net Pointschart-net-pointsA four-state tennis net-points ledger — one 100% stacked outcome bar per approach type (won at net / passed / lobbed / error) with largest-remainder shares, per-group success rates and a totals bar.

Network Forcechart-network-forceA four-state force-directed relationship graph in plain SVG — a hand-written repulsion, spring and gravity simulation that converges and then stops, draggable nodes that anchor where you drop them, colour by group or by degree, and hover to light a node’s neighbours.

OKR Treechart-okr-treeA 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.

Pacing Strategychart-pacing-strategyA four-state pacing chart for one athlete against a plan — diverging bars of the seconds each split banked or lost around a target baseline, the cumulative banked time overlaid on a right axis whose zero shares a row with it, and the finish read against the target.

Padel Wall Playchart-padel-wall-playA four-state padel wall-play ledger — direct, back-wall, side-wall and double-wall rows sized by shot count and split won vs lost, with usage shares and token-stroke bounce glyphs.

Parallel Coordinateschart-parallel-coordinatesA 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.

Pareto Chartchart-paretoA 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.

Partial Dependence + ICEchart-partial-dependenceA four-state partial dependence plot drawn over the ICE bundle it is the average of — one faint line per instance under the bold mean, a centred (c-ICE) 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 how much training data supports each reading.

Partner Chemistrychart-partner-chemistryA 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 minimum-match bar hatched out of the colour ramp and the verdict, each player's own average on the diagonal to read chemistry against, a per-player lens on the row headers, and a load strip whose largest-remainder widths always add to exactly 100%.

Pass Networkchart-pass-networkA four-state soccer pass network on a hand-rolled SVG pitch — players at their average positions sized by ball touches with jersey numbers inside, passing links drawn only above a count threshold, and hover or focus to light one player's connections while the rest dim.

Percentile Bandschart-percentile-bandsA 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.

Pictogramchart-pictogramA 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.

Pitch Heatmapchart-pitch-heatmapA four-state soccer pitch touch-density heatmap in hand-rolled SVG — full pitch markings in border tokens, a zone grid shaded with one chart token at stepped opacity, a printed intensity legend and a direction-of-play arrow.

Player Percentile Pizzachart-player-pizzaA four-state scouting percentile pizza in hand-rolled SVG — one wedge per stat with radius as cohort percentile rank, wedges grouped and coloured by skill category, quartile guide rings, a rank badge at each tip, and keyboard-walkable slices with a shared readout.

Poincaré Plot (HRV)chart-poincare-plotA four-state Poincaré return map for heart-rate variability that derives SD1, SD2 and their ratio from the raw RR series in the 45°-rotated frame, draws the fitted one-SD ellipse about the cloud's own centroid on a forced-square equal-scale plot, and forms pairs only from beats the recording's clock agrees are successive.

Point Leveragechart-point-leverageA four-state point-leverage scatter in hand-rolled SVG — every point of a match plotted by the win-probability swing it could produce against match time, priced either by a supplied win-probability model or by a standard table keyed by game and set score, with a draggable high-leverage line, the biggest points ringed and labelled with their score, and each player's conversion above the line.

Points Racechart-points-raceA four-state playable pickleball points race — two staircase lines race to 11 under side-out or rally scoring derived from raw rally winners, with leader tinting, side-out ticks and game-point marks.

Polar Area Chartchart-polar-areaA 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.

Power Curvechart-power-curveA four-state cycling mean-maximal power curve on a log time axis — current period vs all-time best in two chart tokens, an optional dashed critical-power asymptote, and a pointer/keyboard scan that reads watts at any duration.

Precision-Recall Curvechart-pr-curveA four-state precision-recall card in plain SVG — one curve per model with AUC-PR in the legend, a dashed no-skill baseline at the prevalence, and optional muted iso-F1 guide arcs.

Pressure Pointschart-pressure-pointsA four-state pressure-points chart — win rate on break points, game points, deuce and tiebreaks as lollipops anchored to the player's overall baseline, low-sample situations rendered hollow.

Project Progresschart-project-progressA 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.

Punchcardchart-punchcardA 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.

Population Pyramidchart-pyramidA 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.

Q-Q Plotchart-qq-plotA 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.

Quantile Dot Plotchart-quantile-dot-plotA four-state quantile dot plot that turns a predictive distribution into countable outcomes — N equal-probability dots Wilkinson-binned into provably non-overlapping columns, an optional threshold that splits them, and both the counted share and the distribution's own probability reported side by side.

Race Splitschart-race-splitsA four-state race-splits spaghetti chart in plain SVG — every athlete's cumulative gap to the split leader against a zero baseline, direct-labelled line ends, lead changes and DNFs disclosed, and every split keyboard-reachable.

Radar Comparison Chartchart-radar-compareA four-state radar chart comparing two or three subjects across mixed-unit dimensions: each spoke is normalized 0-100 while the tooltip keeps the raw values.

Radial Bar Chartchart-radial-barConcentric 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.

Radial Progress Chartchart-radial-progressA four-state radial progress card: one concentric ring per metric against its own target, a summary number in the hole, and over-target rings capped at one lap with truncation marks instead of drawing through.

Raincloud Plotchart-raincloudA 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.

Rally Elevation Replaychart-rally-elevation-replayA four-state playable badminton rally replay — the shuttle tweens arc by arc across a BWF-true side elevation, stroke types in fixed colors and dashes, past arcs fading to muted trails.

Rally Length Outcomechart-rally-length-outcomeA four-state rally-length chart in hand-rolled SVG — points banded by shot count (pre-aggregated or binned from raw per-point shot counts), each band a bar split into points won and lost on a volume scale, the band's win rate as a dot on a fixed 0–100% scale sharing the same gridlines, the busiest band called out and a one-line verdict naming where points are won and leaked.

Rally Pattern Treechart-rally-pattern-treeA four-state rally pattern tree drawn as an icicle from the serve down — each row is the next shot, each branch is as wide as the rallies that took it and tinted by the win rate down it, with everything under the sample cut pruned and its share stated.

Rally Replaychart-rally-replayA four-state playable tennis rally replay in hand-rolled SVG — the ball tweens shot by shot across an ITF-true court with persisting bounce trails, play/pause, scrubber and speed control.

Range Area Chartchart-range-areaA 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.

Regression Scatterchart-regression-scatterA 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.

Release Readinesschart-release-readinessA 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.

Renkochart-renkoA 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.

Retrieval Recall@kchart-retrieval-recallA four-state RAG retrieval card: recall@k stacked over precision@k on one shared log-k axis, one line per retriever, with the shipped operating k marked and any measured k inspectable, an MRR@k readout, the per-query token spend of the cut, and a coverage bar whose percentages always total exactly 100.

Return Depthchart-return-depthA four-state tennis return-of-serve chart in hand-rolled SVG — returns grouped into depth bands laid out proportionally to real court metres, one bar per serve answered, the points-won rate per band overlaid on a fixed 0-100% axis, an average-depth caret placed at its own metre value over a scale court strip, and a written verdict on whether depth converts.

Return Positionchart-return-positionA four-state tennis return-position map in hand-rolled SVG — where the returner takes first and second serves relative to the baseline, with per-serve median-depth rules and inside/behind shares.

Review Turnaroundchart-review-turnaroundA 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.

Ridgeline Plotchart-ridgelineA 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.

Roadmap Swimlaneschart-roadmap-swimlanesA 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.

ROC Curvechart-rocA 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.

Rolling Averagechart-rolling-averageA 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.

Sankey Diagramchart-sankeyA four-state Sankey diagram that checks the books before it draws: flow conservation per node, cycle detection, longest-path layering, cross-layer ribbons and a minimum ribbon width, with an sr-only flow table.

Scaling Lawchart-scaling-lawA four-state log-log scaling plot that fits L = E + A·C^(−α) to the runs it is given — one power law per model family, with the exponent, the irreducible loss and R² printed, the stretch past the largest run hatched and projected, and compute shares apportioned so every filter state totals exactly 100.

Chart Scatter Matrixchart-scatter-matrixA 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.

Scatter Chart (Quadrants)chart-scatter-quadrantA four-state decision-matrix scatter chart: median or fixed crosshair, labelled tinted quadrants, collision fan-out and a screen-reader data table.

Score Tickerchart-score-tickerA four-state playable tennis scoreboard — derives games, sets, deuce and tiebreaks from a raw point feed and replays them point by point over a growing momentum strip with derived break/set/match point marks.

Season Resultschart-season-resultsA four-state season results strip — one surface-colored column per event on a fixed R64-to-W round ladder, title rings, month ticks and a win-loss-titles header.

Seasonalitychart-seasonalityA 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.

Serve Miss Mapchart-serve-miss-mapA four-state tennis serve fault map in hand-rolled SVG — both service boxes with a net band on their front edge and net / wide / long miss channels outside the lines, each shaded on one shared count ladder and labelled with its count and share, first serves and double faults in separate panels.

Serve Placement Zoneschart-serve-placementA four-state tennis serve placement map in hand-rolled SVG — the receiver's half court with tramlines, service line and centre line in border tokens, both service boxes cut into wide/body/T zones shaded by serve volume with one chart token at stepped opacity, each zone labelled with its count and win rate, and a hover or keyboard tooltip on every zone.

Serve +1 Patternschart-serve-plus-oneA four-state tennis serve +1 chart in hand-rolled SVG — serve target, then the +1 wing and direction, then won or lost, as three stacked node rows joined by bands whose width is points and whose colour is win rate against a benchmark, with a deuce/ad radiogroup, largest-remainder shares and the most-used and most-effective pattern named.

Serve Sequence Replaychart-serve-sequence-replayA four-state playable serve-placement build-up — serves land one by one into the service boxes with running in%, ace and fault counters recomputed at every scrub position.

Serve Speed Bandschart-serve-speed-bandsA four-state serve-speed distribution — first and second serves binned into fixed-width bands as overlaid stepped histograms with per-serve median ticks and a crosshair tooltip.

Serve Speed Replaychart-serve-speed-replayA four-state playable serve-speed replay — a dial needle kicks serve by serve while a band histogram builds beside it, linked by serve-number colors, with fastest and per-serve averages at every scrub point.

Serve Spin Mixchart-serve-spin-mixA four-state table-tennis serve-spin rose in hand-rolled SVG — five spin families at fixed compass anchors, wedge area true to usage share, win rate printed at each wedge tip.

Shot Direction Flowchart-shot-direction-flowA four-state tennis shot-direction map in hand-rolled SVG — curved arrows run from three contact corridors on the player's baseline to three landing corridors across the net, thickness carrying the shot count and a diverging chart-token ramp carrying each pattern's win rate against the player's own average, with the most-used and the most-effective line named.

Shot Mapchart-shot-mapA four-state basketball half-court shot chart in hand-rolled SVG — NBA court lines in border/muted tokens, made shots filled with chart-1 and misses hollow, a per-shot hover tooltip with keyboard walk, and an FG% header derived from the same shots array.

Speed vs Spinchart-shot-speed-spinA four-state tennis shot scatter in hand-rolled SVG: every tracked shot plotted at its own measured speed and spin, coloured by stroke from a fixed chart token, cut into four playing-style quadrants by the player's own median crosshair, with per-stroke median crosses, outcome-shaped marks and a legend of aria-pressed toggles that re-centres the split.

Shot Tempochart-shot-tempoA four-state rally-rhythm strip: the time between consecutive contacts mirrored around a centre line with one player per side, a rolling tempo band, flagged tempo breaks credited to the ball that bought the time, and a per-player tempo distribution across every rally.

Shuttle Landing Mapchart-shuttle-landingA four-state badminton landing map in hand-rolled SVG — the opponent's half drawn from BWF dimensions, shots dotted by type in color plus shape, out shots hollow, with front/mid/rear shares.

Shuttle Speed Decaychart-shuttle-speed-decayA four-state badminton speed-decay chart in hand-rolled SVG — one speed-against-distance curve per shot type on an axis that follows the longest flight, each curve marked where the receiver's racket meets it (or where it dies short of the rule), with flight time integrated from the curve itself, a draggable distance cursor exposed as a slider, and a shot-mix column apportioned by largest remainder.

Shuttle Trajectorychart-shuttle-trajectoryA four-state badminton flight-path chart in hand-rolled SVG — a side elevation with median arc and p25-p75 band per stroke type over a to-scale net, landing marks on the floor line.

Side-Out Scoringchart-side-out-scoringA four-state pickleball side-out strip — every service turn as a segment sized by points scored, colored by team and shaded by server number, with running-score marks and per-team summaries.

Sleep Stageschart-sleep-stagesA four-state sleep hypnogram with stage-colored segments stepping across fixed Awake/REM/Light/Deep lanes, plus time-in-stage summary bars with percentages, driven by one zod contract.

Slope Chartchart-slopeA four-state slope chart for two points in time: labels at both ends, a pooling avoidance pass that never moves the points, leader lines back to the real endpoint, and a same-unit refusal.

Small Multipleschart-small-multiplesA 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.

Soccer Pass Networkchart-soccer-pass-networkA 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 Shot Qualitychart-soccer-shot-qualityA 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.

Soccer Territory Flowchart-soccer-territory-flowA 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 xG Racechart-soccer-xg-raceA 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.

Spiral Timelinechart-spiralTime 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.

Sprint Force-Velocity Profilechart-sprint-profileA 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 labelled F0 and V0 intercepts, and the power parabola peaking at the optimal velocity on its own right axis.

Sprint Velocitychart-sprint-velocityA 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.

100% Stacked Bar Chartchart-stacked-bar-pctA four-state 100% stacked bar chart with largest-remainder rounding, so every bar's percentages add up to exactly 100.

Stamina Decaychart-stamina-decayA four-state stamina card in hand-rolled SVG — several match metrics stacked as small multiples over one shared elapsed-minute axis, each read against its own opening-window baseline, with a reader-chosen cut (end of set 1, 2, …) quantifying the drop-off in the metric's own unit and as a share of that baseline, a stated 1.5% noise floor before anything is called decay, and a minutes ledger apportioned by largest remainder.

Step Line Chartchart-step-lineA four-state step chart for discrete state over time — values hold flat then jump, with three step alignments, change markers and a change table.

Streamgraphchart-streamA 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.

Sunburst Chartchart-sunburstA 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.

Surface Splitschart-surface-splitsA four-state surface-by-surface record card — one win-loss bar per surface with paired service and return sub-bars, every lane on a 0-100% track carrying a tick at the player's own overall level, largest-remainder shares, and the strongest and weakest surfaces called out above a match floor.

Survival Curvechart-survivalA 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.

T Battle Replaychart-t-battle-replayA four-state playable squash T battle — two tracked players move on a WSF-true floor plan while T-control time accrues into a live share bar, with rally-end ticks on the scrubber.

T Dominancechart-t-dominanceA four-state squash T-control chart — one mirrored bar per game split at each player's share of rally time on the T against a 50% center rule, with game scores and a match row.

Team Availabilitychart-team-availabilityA 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.

Court Coveragechart-tennis-court-coverageA four-state tennis court-coverage map in hand-rolled SVG — the player's own half with tracked positions binned into a dwell-density field on a grid cut from the court's own lines, the weighted average position and the median recovery spot marked at their exact metre coordinates, a signed baseline-distance headline, a left/right balance bar and a keyboard-driven depth-band filter.

Groundstroke Depth Zoneschart-tennis-depth-zonesA four-state tennis groundstroke landing map in hand-rolled SVG — the opponent's half drawn in ITF metres and cut into short / mid-court / deep bands across the left, middle and right thirds, every zone shaded by volume with one chart token at stepped opacity and labelled with its count and share, headline reads for the percentage landing beyond the service box and in the middle third, raw landings drawn as dots at their own coordinates, and a forehand / backhand filter that re-derives every number.

Match Score Gridchart-tennis-score-gridA four-state tennis scoreboard rendered as a chart in plain HTML — one row per set and one cell per game in the order played, each cell's upper/lower half marking who won it while an outline means the serve was held, a solid fill means it was broken and a "TB" tag marks a tiebreak, with set scores (bracketed mini-score included), hold percentages, unfinished sets and retirements all counted from the same games array.

Ternary Plotchart-ternaryA 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.

Third Shot Outcomechart-third-shot-outcomeA four-state pickleball third-shot chart — drop, drive and lob rows pairing usage share with a 100% stacked won/neutral/lost bar, largest-remainder rounded, with per-row win rates.

Tidy Treechart-tidy-treeA 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.

Tiebreak Ledgerchart-tiebreak-ledgerA four-state tiebreak ledger — every tiebreak as a point-by-point strip with the serve above or below a hairline and mini-breaks hatched, plus a selectable scope driving the tiebreak record, serve-hold rates and a largest-remainder split of where the points went.

Tile Grid Mapchart-tile-mapA 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.

Token Latencychart-token-latencyA 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.

Token Usagechart-token-usageA four-state LLM spend card: stacked bars split every period's tokens into input, cached input, output and reasoning, a cost line derived in-component from per-million rates rides a second axis sharing one gridline set, and the cache-hit share plus the money the cache spread saved are called out above it.

Tornado Chartchart-tornadoA 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.

Tournament Schedulechart-tournament-scheduleA four-state order-of-play sheet in CSS grid — courts as columns down a vertical time axis, every match a block as long as its estimate, not-before slots floating dashed at the earliest minute they can start, live matches filling against their estimate, and the double bookings, rest gaps and court-time shares the schedule implies.

Trace Waterfallchart-trace-waterfallA 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.

Training Load ACWRchart-training-loadA four-state acute:chronic workload ratio chart — daily load bars with 7-day acute and 28-day chronic rolling-average lines, and the ACWR on a second axis banded into a 0.8–1.3 sweet spot and a >1.5 high-risk zone, all rolling math computed from raw days inside the component.

Training Runschart-training-runsA four-state training-runs card: loss against optimiser step for several concurrent experiments, each drawn as a debiased EMA over its own faint raw trace, with divergence and restart markers that shade and count the steps a rollback cost, an optional learning-rate schedule on a secondary axis, and a scan that reads every run at the same step and only calls a lead when it clears the step-to-step noise.

Treemapchart-treemapA 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.

UpSet Plotchart-upsetA 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.

Vector Fieldchart-vector-fieldA 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.

Venn Diagramchart-vennAn 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.

Violin Plotchart-violinA 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.

Volleyball Attack Laneschart-volleyball-attack-lanesA 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.

Volleyball Rotation Wheelchart-volleyball-rotation-wheelA 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.

Voronoi Territory Mapchart-voronoiA 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.

Waffle Chartchart-waffleA 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.

Waterfall Chartchart-waterfallA bridge chart of floating bars — derived opening/subtotal/closing anchors, hatched decreases, running-total connectors, slot-aware ticks and real loading/empty/error states.

Win Probabilitychart-win-probabilityA four-state in-game win probability chart in plain SVG — one line around a 50% midline, the band shaded toward whichever side is favoured in that side's chart token, key events pinned to the path as diamonds, and every readout reachable by pointer and keyboard alike.

Wind Rosechart-wind-roseA 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.

Winners vs Errorschart-winners-errorsA four-state tennis winners-and-errors ledger — one diverging bar per shot group with winners running right in a chart token, unforced errors left in the destructive token and forced errors extending the same bar as a solid muted segment, on one shared symmetric scale with a parity tick at each row's unforced count, the winners-per-unforced ratio per group and pooled overall, and the leakiest group called out above a sample floor.

WIP Limitschart-wip-limitsA 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.

Word Cloudchart-word-cloudA four-state word cloud that sizes terms by the square root of their count and packs them along a deterministic spiral, with every word a focusable button and a ranked list for screen readers.

Word Treechart-word-treeA 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.

Workload Balancechart-workload-balanceA 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.

xG Timelinechart-xg-timelineA four-state cumulative expected-goals step chart in plain SVG — two team staircase lines over 0–90+ minutes, emphasized goal dots with minute labels, a dashed half-time rule, and final xG totals in the header row.

Chat Bubblechat-bubbleA single message bubble with role-based alignment and color, an avatar slot, and a bouncing typing indicator for assembling chat message lists.

Chat Checkpointchat-checkpointA 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.

Chat Composerchat-composerA managed chat composer: one send⇄stop button slot, optimistic draft clear with restore-on-failure, AbortSignal handoff, IME-safe Enter and attachments with their own upload lifecycle.

Chat Day Dividerchat-day-dividerA 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.

Chat Importchat-importA 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.

Chat Message Actionschat-message-actionsHold 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.

Chat Mode Pickerchat-mode-pickerThe 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.

Chat Sidebarchat-sidebarA 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 Threadchat-threadA 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.

Chat Windowchat-windowA chat shell in three presentations — inline, docked and modal — with a focus trap, refcounted scroll lock and a resizable dock, that never re-creates the panel when you switch.

Checkbox Groupcheckbox-groupA 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.

Checkbox Treecheckbox-treeA multi-select hierarchical picker: parent↔child cascade with derived indeterminate parents, WAI-ARIA tree keyboard navigation, disabled subtrees, and search that auto-expands the path to every hit.

Chip Scrollerchip-scrollerA 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.

Choice Cardschoice-cardsA card-shaped radio or checkbox group — icon, title, description and badge per option, with roving-tabindex keyboard selection.

Circuit Boardcircuit-boardA seamlessly tiling PCB backdrop — seeded traces with 45°/90° corners, pads, vias and component footprints, plus an optional signal pulse.

Citation Chipcitation-chipThe 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.

Citation Listcitation-listThe numbered reference list under an AI answer — numbering derived the same way Citation Chip derives it so the markers and the list always agree, repeated sources merged with a citation count, graded trust that never relies on colour, and sources with no usable URL that refuse to become dead links.

Client Onlyclient-onlyRenders its children only after mount — the server and the first hydration render emit an equal-size fallback instead, so browser-only values (local time, localStorage, window) can never cause a hydration mismatch.

Code Blockcode-blockA copyable code panel with its own minimal regex syntax highlighter — line numbers, line highlighting, tabs and a wrap toggle, no external highlighting engine.

Code Inputcode-inputA 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.

Code Tourcode-tourAn annotated code walkthrough — numbered steps that each highlight a line range, show a note beside the code, and scroll the active range into view, with prev/next, a jump list and keyboard stepping.

Color Palettecolor-paletteA 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.

Color Pickercolor-pickerA hex-driven color picker with a saturation/value area, hue and alpha sliders, format-aware text input, swatches, and an optional eyedropper.

Column Pickercolumn-pickerA 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.

Column Profilecolumn-profileA 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.

ComboboxcomboboxA searchable dropdown selector — single or multi-select, grouped, creatable, with keyboard-driven filtering and chip overflow.

Command Palettecommand-paletteA ⌘K-style command palette — portal dialog, fuzzy subsequence search, grouped commands, recent items and full keyboard navigation.

Comment Threadcomment-threadA nested discussion tree — collapsible reply subtrees on a clickable thread line, optimistic voting, inline reply composer with a posting/failed lifecycle, controlled sorting, and a depth cap that hands deep threads off to a permalink.

Commit Cardcommit-cardOne 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.

Comparison Slidercomparison-sliderA draggable before/after comparison slider with clip-path reveal, pointer capture and full keyboard support.

Composer Attachmentscomposer-attachmentsAn attachment strip for a prompt composer — one list rendered as compact chips on the input's top edge or rich preview cards under it, with per-kind statistics, keyboard removal that hands focus to the neighbour, overflow collapse and four data states.

Computer Use Panelcomputer-use-panelA 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.

ConfetticonfettiA DOM-particle celebration burst layer — bump a counter to fire a delta-time normalized confetti burst inside a relative container.

Confidence Meterconfidence-meterA 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.

Confirm Dialogconfirm-dialogOne confirmation dialog for every destructive action — async pending, inline failure and type-to-confirm.

Conflict Resolverconflict-resolverA field-level three-way merge for concurrent edits — base/mine/theirs per field, only the genuinely conflicting fields asked about as radiogroups, bulk fill with per-field override, and a merged record on submit.

Connection Statusconnection-statusAn online / offline / reconnecting bar with an exponential-backoff retry countdown, a manual retry button and SSR-safe browser subscription.

ConstellationconstellationA drifting node network on one canvas — every pair closer than the link threshold is stroked with distance-faded opacity, queried through a spatial grid, with optional pointer attraction.

Content Credentialscontent-credentialsA 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.

Context Attachmentscontext-attachmentsThe context list attached to a conversation — files, links, snippets and selections with their token cost, under a budget meter that spells out reserve + attachments = used and names exactly which entries get dropped when the window overflows.

Context Inspectorcontext-inspectorA 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.

Context Limit Bannercontext-limit-bannerA 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.

Context Menucontext-menuRight-click, long-press or Shift+F10 menu that opens at the pointer — checkboxes, submenus, typeahead, and flipping bounded by the nearest clipping ancestor.

Context Peekcontext-peekThe 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.

Contrast Checkercontrast-checkerA 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.

Conversation Exportconversation-exportAn 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.

Conversation Summaryconversation-summaryA 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.

Conversation Titleconversation-titleAn 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.

Conversation Treeconversation-treeThe 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.

Cookie Consentcookie-consentA bottom-fixed cookie consent card with slide in/out animation that persists the visitor's accept/decline choice to localStorage.

Coordinates Inputcoordinates-inputA 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.

Copy Buttoncopy-buttonA ghost icon or label button that writes text to the clipboard and flashes a timed "Copied" confirmation.

Corner Ribboncorner-ribbonA diagonal corner badge draped over a card — NEW / SALE / POPULAR callouts that wrap any card content.

Cost Breakdowncost-breakdownAn 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.

CountdowncountdownA ticking days/hours/minutes/seconds countdown for launches and promotions, with a one-shot onComplete callback and SSR-safe hydration.

Country Pickercountry-pickerA 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, UN M49 region groups, localised names via Intl.DisplayNames, and a flag emoji that falls back to a code chip on platforms that have none.

Coverflow Carouselcoverflow-carouselA 3D perspective carousel whose covers sit on an arc — the centre faces the viewer while neighbours rotate away into depth with dimming and an optional masked reflection — driven by one continuous position that drag, horizontal wheel and arrow keys all share, with a plain scroll-snap fallback under reduced motion.

Credit Cardcredit-cardA flippable bank card display with a masked number, holder and expiry on the front, magstripe and a hidden CVC placeholder on the back.

Credit Card Formcredit-card-formCard entry with brand-aware grouping and maxLength, a Luhn check, MM/YY with a real expiry rule, blur-time errors, auto-advance and correct cc-* autocomplete — UI only, real payments belong in a PCI-compliant hosted field set.

Criteria Checklistcriteria-checklistA 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.

Cron Inputcron-inputA visual five-field cron builder — presets, hour/minute selects and weekday/month chips write the expression, pasting one parses back into them, with a plain-English summary and the next runs.

CSV Importcsv-importA three-step CSV importer — RFC 4180 parsing (quoted delimiters, embedded newlines, doubled quotes), delimiter and BOM detection, auto-guessed column mapping with duplicate and required-field gates, and a capped preview that reports ragged rows by line number.

Currency Convertercurrency-converterA 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.

Currency Inputcurrency-inputA money field that stays raw while you type and normalizes with Intl.NumberFormat on blur — grouping, fixed decimals, clamping, and a number | null value.

Cursor Trailcursor-trailA canvas pointer wake that samples the cursor once per animation frame and draws it as a tapering ribbon, an evenly spaced bead chain or drifting sparks, each node dissolving on its own lifetime.

Custom Cursorcustom-cursorA container-scoped pointer replacement: a spring-driven dot that follows the hand and opens into a difference-blended disc over interactive targets, hiding the native arrow only while the pointer is inside and never drawing on coarse pointers or under reduced motion.

Custom Instructionscustom-instructionsAn 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.

Dashboard Griddashboard-gridA 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.

Data Controlsdata-controlsAn 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.

Data Diff Tabledata-diff-tableA 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.

Data Grid Editabledata-grid-editableA spreadsheet-style editable data grid — per-column cell editors, roving-tabindex keyboard navigation, per-cell validation, async commits that show pending and roll back, TSV paste, sticky header and first column, plus real loading/empty/error states.

Data Listdata-listA 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.

Data Tabledata-tableA contract-driven interactive data table — controlled sort, tri-state row selection, sticky header, row actions, and real loading/empty/error states.

Dataset Browserdataset-browserA 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.

Date Pickerdate-pickerA typeable single-date field with a calendar panel — Intl-driven formatting and parsing, a complete keyboard grid, and refusals that keep what you typed.

Date Range Pickerdate-range-pickerA two-month range calendar with preset shortcuts (Today, Last 7/30 days, this/last month), hover preview and no date-library dependency.

Datetime Pickerdatetime-pickerA 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.

Density Toggledensity-toggleA compact / comfortable / spacious switch that publishes seven --density-* CSS variables to a whole subtree, with a 24px target floor the compact step cannot cross.

Dependency Listdependency-listAn auditable dependency tree — real semver comparison, graded staleness, ordered CVE severities, licence obligation classes, and the import chain behind every transitive package.

Description Listdescription-listA semantic key-value list for order details, profile echoes, and settings summaries, in a divided-rows or panel-grid layout.

Detection Overlaydetection-overlayObject-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.

Device Framedevice-frameA CSS-only phone or browser shell — drop a screenshot or a live component into a mockup for marketing pages, no iframe.

Dictation Buttondictation-buttonA 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.

Diff Confirmdiff-confirmA 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.

Diff Viewerdiff-viewerA GitHub-style text diff — unified or side-by-side, own LCS line matching with word-level highlights, foldable context, a pinned line-number gutter and guards for huge inputs.

Dimension Inputdimension-inputA paired width × height field with an aspect-ratio lock that freezes the ratio when you lock it, clamps both sides against min/max, and ships swap plus size/ratio presets.

DismissibledismissibleA close button for any content that remembers it was closed — for this tab, forever, or until the copy is versioned up — with an undo window before anything is written.

DockdockA macOS-style dock with proximity-based icon magnification, spring physics and hover label bubbles.

Dot Globedot-globeA 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.

Double Tap Heartdouble-tap-heartA media surface that likes on double tap, bursting a mark where the thumb landed while the first tap is left to the control underneath.

Download Buttondownload-buttonA download CTA that fills like a liquid gauge as the transfer advances, then settles into a checked or retryable state.

Download Rowdownload-rowA 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.

Drag Reorder Listdrag-reorder-listA 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.

DrawerdrawerA gesture-driven drawer for any edge — snap points, velocity-based settling, scroll-aware pull-to-close, focus trap and refcounted scroll lock. No vaul.

Drop Capdrop-capThe 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.

Dropdown Menudropdown-menuA generic dropdown menu — any trigger, structured rows (commands, checkboxes, radio groups, submenus), typeahead and clipping-aware placement.

DropzonedropzoneA native drag-and-drop file picker with accept/size/count validation, inline rejection reasons and a removable file list.

Duration Inputduration-inputA duration field normalized to seconds — carrying h/m/s spinbutton segments (type 90 minutes, get 1h 30m) or a free-text mode that parses "1h30", "90m" and "1:30".

Dynamic Islanddynamic-islandA notch-anchored live-activity pill that morphs between idle, compact, minimal and expanded presentations.

Edit Messageedit-messageIn-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.

Effect Buttoneffect-buttonOne button, seven visual effects (shimmer, shine, spotlight, glow, gradient, glass, ripple) as cva variants.

Elastic Drag Cardelastic-drag-cardA 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.

Embedding Mapembedding-mapA 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.

Emoji Pickeremoji-pickerA full emoji panel — 554 built-in emoji in 8 categories with bilingual search, skin tones, recents and a windowed arrow-key grid, inline or portalled beside a trigger.

Emoji Reactionemoji-reactionA reaction bar of tallied emoji chips plus a keyboard-navigable picker for adding one more.

Empty Stateempty-stateA centered empty-state panel with an icon chip, title, description and up to two actions — link actions render RSC-safe, onClick actions need a client boundary.

Env Diffenv-diffA 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.

Environment Switcherenvironment-switcherA four-state environment switcher that keeps the current deploy target visible with its tier tint, region and version, compares versions as real semver so a stale preview says so, states why blocked environments are out of reach, and gates guarded targets behind a confirm that can demand the environment name typed back.

Environment Variablesenvironment-variablesReview, reveal, and copy environment variables with sensitive values masked by default.

EqualizerequalizerA multi-band graphic equalizer — rotated native faders, a Catmull-Rom response curve through the handles, presets that glide, and a typed gain map out.

Error Boundaryerror-boundaryA 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.

Error Stateerror-stateAn error panel — inline/card/page density, safe unknown-error extraction, collapsible stack trace, a copyable error code and a real retry pending state.

Eval Scorecardeval-scorecardOne 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.

Event Cardevent-cardAn event card whose calendar tear-off survives cross-day, cross-month and cross-year spans, formats every instant in an explicit IANA zone, and drives an ordered capacity machine where ended outranks the seat count.

Exit Intentexit-intentA 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.

Export Buttonexport-buttonAn 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.

External Linkexternal-linkAn anchor that works out whether an href leaves your site — origin declared as a prop so server and client agree — then adds an icon, the rel=noopener patch and a screen-reader new-window hint to the ones that do, and nothing at all to the ones that do not.

FAB Menufab-menuA floating action button that fans a labelled column of secondary actions upward, with staggered entry and focus handling.

Fallback Noticefallback-noticeAn 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.

Feature Flag Listfeature-flag-listA 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, expandable targeting rules, and real loading/empty/error states.

Feature Flag Rolloutfeature-flag-rolloutThe rollout control for a single feature flag — a MurmurHash3 percentage gate with its estimated reach, ordered first-match-wins targeting rules, a live evaluation preview that names the deciding rule or hash bucket, and the drift between the configured split and what the service reports it is actually serving.

Feature Tablefeature-tableA contract-driven feature comparison matrix across plans or versions, rendered as a real semantic table with four data states.

Feedback Widgetfeedback-widgetA corner or inline feedback launcher with a sentiment radiogroup, category chips, message and optional email, driven by an idle → submitting → success → error submit state machine.

Few Shot Editorfew-shot-editorA 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.

File Change Listfile-change-listThe 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.

File Iconfile-iconAn 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.

File Previewfile-previewA preview card for any single file — image/video thumbnails, a working audio play bar, type icons with MIME-or-extension metadata, card/row/tile variants and leak-free object URLs.

File Treefile-treeAn accessible hierarchical file/folder tree with WAI-ARIA-nested treeitem/group markup, roving tabindex, and grid-rows expand animation.

File Upload Listfile-upload-listAn upload queue with per-file progress, pause/resume, retry, cancel and remove, a byte-weighted batch summary and throttled screen-reader announcements.

Filter Barfilter-barComposable filter bar for a table toolbar: an add-filter menu, one editable chip per active filter with its own remove button, portalled editors for select / multiselect / date-range / text / boolean, wrap-or-collapse overflow and Clear all.

Filter Chipsfilter-chipsA 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.

Filter Sheetfilter-sheetA bottom-edge filter panel with grouped facets, a staged draft, a live result count and an Apply bar padded clear of the home indicator.

Finetune Statusfinetune-statusOne 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.

Finger Draw Annotatefinger-draw-annotateMark 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.

FirefliesfirefliesWandering 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 instead of a per-frame gradient.

Fit Textfit-textOne 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.

Flame Graphflame-graphA four-state profiling flame graph — bar width is time, rows are stack depth, click any bar to zoom with a breadcrumb back, and a search that highlights matches across the whole profile with a matched-time readout.

Flickering Gridflickering-gridRender a responsive canvas grid with subtle, reduced-motion-aware flickering cells.

Flip Cardflip-cardA two-faced container that turns over on hover or click to swap a summary for its details.

Floating Navbarfloating-navbarA header that hides on scroll-down and reappears on scroll-up, giving long reading surfaces the vertical space back without losing the nav.

Follow Buttonfollow-buttonA 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.

Font Pickerfont-pickerA 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.

Form Fieldform-fieldA label + control wrapper that injects id, aria-describedby, invalid/required state, disabled and a character counter into whatever control you nest inside it.

Form Wizardform-wizardA multi-step form state machine — per-step validation gates (sync or async), focus moved to the first bad field, and a self-contained progress rail.

GalaxygalaxyA 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.

Gantt Chartgantt-chartA project schedule chart — sticky task column, adaptive day/week/month axis, progress-filled bars, milestone diamonds, finish-to-start dependency elbows, collapsible groups, and real loading/empty/error states.

Git Graphgit-graphA commit-DAG viewer with reusable swimlanes — topological ordering, lane reuse after merges, orphan roots, shallow-history tails, copyable full hashes and four data states.

Glitch Textglitch-textCyberpunk glitch headline — two pseudo-element copies tear the text into slices and slide, in pure CSS, dead still under reduced motion.

Cursor Glow Cardglow-cardA card whose surface and border light up around the pointer, with an optional group where the hovered card stays lit and its siblings dim.

Gradient Border Buttongradient-border-buttonA rotating conic-gradient ring around a solid core, so the border carries the colour and the label keeps full contrast.

Gradient Meshgradient-meshA full-bleed mesh-gradient wash — oversized blurred token blobs drifting past each other as an absolute background layer.

Gradient Pickergradient-pickerA CSS gradient editor: draggable stop rail with double-click insert, keyboard-reachable stops, an angle dial, and a read-only linear/radial/conic CSS string with copy.

Gradient Textgradient-textPolymorphic heading text painted with a token-driven gradient, optionally looping — no hex codes anywhere.

Grid Dotsgrid-dotsA zero-JS grid, dots or cross pattern background container with an optional radial fade mask — a pure server component.

Guardrail Traceguardrail-traceThe 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.

Health Check Listhealth-check-listA 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.

Hex Gridhex-gridA seamlessly tiling honeycomb backdrop — outlined, tinted or vertex-dotted, with an optional edge fade and a few seeded cells breathing on CSS alone.

Hexdump Viewerhexdump-viewerA 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.

Highlight Markerhighlight-markerHighlighter, underline or hand-drawn circle that wipes across a phrase when it scrolls into view.

Hold to Confirmhold-to-confirmA press-and-hold confirmation button — hold past a charge bar to fire an action, guarding destructive or irreversible operations against accidental taps.

Hold To Talkhold-to-talkA 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.

Holographic Foil Cardholo-foil-cardA card surface that behaves like trading-card holo stock — an iridescent gradient sheet, a fine foil grating and a specular highlight all re-aimed from the pointer, with an optional tilt.

Hover Cardhover-cardA 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.

Human Handoffhuman-handoffA bot-to-human escalation card that walks one ticket through request, queue, connecting, connected and an offline leave-your-address fallback.

Icon Pickericon-pickerA 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.

Image Accordionimage-accordionA row of tall image slices where the open panel widens to reveal its caption and link while the rest compress to labelled slivers, folding into a vertical stack on narrow screens.

Image Annotationimage-annotationClick-to-pin image annotation — numbered draggable markers with notes, stored as percentages of the image so they never drift when it resizes.

Image Cropperimage-cropperA drag/zoom/rotate image cropper with pointer + keyboard control that exports a real cropped Blob via canvas.

Image Generationimage-generationAn 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.

Image Placeholderimage-placeholderA progressive image loader — skeleton, blur-up or color placeholder, a 400ms cross-fade on load and an error panel when the URL fails.

Image Zoomimage-zoomA clickable thumbnail that opens a full-screen lightbox with a fade + scale transition, Esc/backdrop/click-to-close, and focus management.

Impersonation Bannerimpersonation-bannerThe bar support staff sees while acting as a customer — whose account this is, who is inside it, whether the grant may write, a live countdown to the automatic cut-off, and an exit that is never blocked.

Inbox Listinbox-listA 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.

Indexing Progressindexing-progressAn 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.

Infinite Scrollinfinite-scrollA 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.

InkinkDrops of ink opening into water on one canvas — ragged fronts that expand, thin and dissolve, with every overlap deepening like ink on paper.

Inline Completioninline-completionGhost 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.

Inline Editinline-editClick-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.

Inline Error Summaryinline-error-summaryA top-of-form error summary whose rows scroll to and focus the field they name — persistent polite live region, self-focusing panel, onNavigate hook for collapsed fields and a maxVisible overflow count.

Inline Picker Rowinline-picker-rowA 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.

Input Groupinput-groupA 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.

Install PWA Buttoninstall-pwa-buttonAn install CTA that catches beforeinstallprompt at module scope so a late-mounting button still gets it, and renders nothing at all when the app is installed, was refused recently, or cannot be installed here.

Interpreter Outputinterpreter-outputThe 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.

Invoice Summaryinvoice-summaryAn invoice / order total block — line items (quantity × unit), discounts, taxes with rates, shipping, total and amount due, all in integer minor units, with full and compact variants and four data states.

JSON Diffjson-diffA 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.

JSON Editorjson-editorAn editable JSON textarea with live syntax validation, exact line/column errors marked in a synced gutter, optional schema checking, and format/minify/copy/reset tools.

JSON Viewerjson-viewerA 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.

JWT Decoderjwt-decoderA 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.

Kanban Boardkanban-boardA contract-driven kanban board — dnd-kit drag and drop across and within columns, keyboard-accessible moves with live announcements, WIP limits that block over-filling, per-column scrolling, and real loading/empty/error states.

KbdkbdKeycap and key-combination display — semantic `<kbd>` markup with platform-aware glyphs (mod resolves to ⌘ on mac, Ctrl on windows).

Key Value Editorkey-value-editorAn 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.

Keyboard Accessorykeyboard-accessoryThe 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 Avoiderkeyboard-avoiderA 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.

Keyboard Mapkeyboard-mapA keyboard layout diagram with your app's shortcuts painted onto the caps — platform-correct glyphs and modifier order (⌘ ⌥ vs Ctrl Alt), whole-chord highlighting, and a readable binding list.

Kinetic Headlinekinetic-headlineA fixed headline with one rotating word slot whose width springs to each incoming word, so the rest of the line glides instead of jumping.

Knowledge Pickerknowledge-pickerA 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.

Labeling Queuelabeling-queueA 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.

Language Pickerlanguage-pickerA locale field that lists every language under its own name — 简体中文 beside Chinese (Simplified) — searchable by endonym, English name or BCP 47 tag, with RTL rows rendered in their own direction, optional translation completeness and a browser-language matching ladder.

Latency Breakdownlatency-breakdownPer-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.

Lazy Renderlazy-renderDefers mounting a subtree until it scrolls into view or the browser goes idle, holding its space with an explicitly reserved placeholder height.

LeaderboardleaderboardA ranked standings board — podium tiers, rank-change arrows, a highlighted current-user row with a pinned "your rank" bar, and real loading/empty/error states.

Light Beamslight-beamsAngled shafts of light falling from the top edge, each breathing on its own tempo and fading out before the bottom.

Lightbox Gallerylightbox-galleryA thumbnail grid that opens a full-screen lightbox with arrow navigation, a counter, captions and focus return.

LightninglightningBranching bolts struck at irregular intervals on one canvas - midpoint-displacement channels with recursive forks, a stacked glow, a decaying afterimage and a flash that lifts the whole surface.

Like Buttonlike-buttonA social toggle that fills its icon, bursts a ring of particles and rolls the counter on every tap.

Line Draw on Scrollline-draw-scrollSVG paths that draw themselves as the block scrolls through the viewport — lengths measured with getTotalLength(), dashoffset unwound per path, sequentially or in parallel.

Link Previewlink-previewAn inline link that reveals a hoverable preview card — thumbnail, title, description and domain — with edge-aware flipping and touch-safe degradation.

Link Underlinelink-underlineUnderline motion for inline body links — slide, center, wipe or thicken — drawn per line box so wrapped links keep a rule on every line, with descender clearance, a focus ring hover never draws, and text-decoration fallbacks for reduced motion, forced colors and print.

Liquid Distortion Imageliquid-distortion-imageA picture that ripples where the pointer touches it — an SVG feTurbulence + feDisplacementMap twin over the untouched original, masked to a soft lens that follows the cursor and settles back when it leaves.

List Index Barlist-index-barAn 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.

Live Captionslive-captionsA 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.

Live Cursorslive-cursorsA 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.

Loading Overlayloading-overlayA scrim that freezes one region or the whole viewport while work is in flight — delay-gated so short requests never flash, held for a minimum so it never blinks out, and inert underneath so Tab cannot walk into the frozen form.

Log Viewerlog-viewerA 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.

Logo Morphlogo-morphOne SVG shape that morphs between several logo or icon paths on a timer, on hover or from a controlled index, normalising the paths at runtime so their points pair up and cross-fading when they cannot.

Logprobs Viewerlogprobs-viewerToken-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.

Long Presslong-pressPress-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.

Lyrics Synclyrics-syncKaraoke-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.

Magnetic Buttonmagnetic-buttonA button that drifts toward the cursor within a sensing radius and springs back on leave, with a subtle reverse-parallax label.

Magnetic Gridmagnetic-gridA lattice of tiles that leans toward — or away from — the cursor, resolved for every tile from a single pointer listener with distance falloff.

Maintenance Bannermaintenance-bannerA scheduled-window maintenance 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.

Map Bottom Sheetmap-bottom-sheetA 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.

Markdown Editormarkdown-editorA textarea-based Markdown editor with a selection-aware toggling toolbar, ⌘B/⌘I/⌘K shortcuts, write/preview/split modes and a dependency-free preview renderer.

MarqueemarqueeA pure-CSS infinite scrolling belt for logo walls and testimonial strips — seamless loop, edge fade and hover pause.

Masked Inputmasked-inputA pattern-masked text field — 9/A/* slots with literal separators, masked and raw value on every change, and caret-preserving edits in the middle of the string.

Masonry Gridmasonry-gridA pure-CSS waterfall grid container that arranges children into responsive columns via break-inside-avoid wrappers, no measuring or JS required.

Math Formulamath-formulaA documented LaTeX subset rendered as native MathML with a styled CSS fallback — inline and block display, an accessible sentence derived from the source, copy-as-LaTeX, and an explicit caret-marked refusal for anything outside the subset.

Matrix Rainmatrix-rainFalling 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.

Matrix Ratingmatrix-ratingA survey matrix: statements down the side, one shared scale across the top, one native radio group per row, a pinned scale header, answered-row progress, and a stacked fallback instead of sideways scrolling.

MCP Install Buttonmcp-install-buttonA 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.

MCP Server Listmcp-server-listA 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.

Media Grid Selectablemedia-grid-selectableA multi-select photo/video grid with Shift range, cmd/ctrl toggle, two-dimensional arrow-key navigation, a selection cap, lazy thumbnails and type-icon fallbacks.

Meeting Plannermeeting-plannerFind 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.

Mega Menumega-menuA site nav bar whose entries drop a wide multi-column sheet across the whole navbar — portalled past clipping ancestors, hover intent with instant lateral switching, and an automatic accordion fallback.

Memory Listmemory-listThe 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.

Mention Inputmention-inputA plain-text textarea where a trigger character (default @) opens a caret-anchored, filtered picker — mentions, or repurposed for slash commands.

Menu Barmenu-barA desktop application menubar — one click opens, hover then travels between menus, with submenus, shortcut hints, checkable rows and a full roving keyboard.

Message Actionsmessage-actionsThe action bar under one chat message — revealed by hover, focus and touch alike (never hover alone), costing zero layout, with copy in either Markdown or plain text, an exclusive thumbs tri-state, a streaming-safe Regenerate and speech that stops when the message unmounts.

Message Branchmessage-branchA 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.

Message Listmessage-listAn AI transcript whose scroll behaves — glued to the newest token while streaming, released the instant the reader scrolls up, anchored when older pages land, and windowed so a 1000-turn thread stays a dozen nodes wide.

Message Searchmessage-searchIn-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.

Message Skeletonmessage-skeletonA 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.

Metaball Blobsmetaball-blobsA gooey organic background — token-tinted blobs drift on seeded Lissajous orbits and fuse into one body through an SVG alpha-threshold filter, optionally leaning toward the pointer.

MeteorsmeteorsA decorative diagonal shooting-star field for hero/card backdrops — deterministically scattered, pure CSS.

Metric Comparisonmetric-comparisonA period-over-period comparison table — current, previous, absolute change and change %, with polarity-aware tone, sortable columns, expandable breakdowns and four data states.

Mini Calendarmini-calendarA compact month grid for picking one date — keyboard-navigable, timezone-safe, with today, disabled days and event dots. No date library.

Mini Mapmini-mapA thumbnail navigator for any scroll container — a draggable viewport box over an auto-measured (or custom-drawn) silhouette, kept in sync by a passive rAF-throttled listener that writes transform straight to the DOM.

Mini Playermini-playerA 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.

Mobile App Barmobile-app-barA 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.

Mobile Search Barmobile-search-barA 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.

Model Cardmodel-cardOne 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.

Model Routermodel-routerA 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.

Model Selectormodel-selectorAn LLM model picker whose options carry context window, per-million input/output rates, capability badges and real availability — and can be filtered and sorted by them.

Moderation Noticemoderation-noticeContent-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.

Morphing Nav Indicatormorphing-nav-indicatorA nav landmark whose active indicator is one DOM-measured capsule that springs between items and morphs its width and height to fit any label, in pill or underline form.

Multi Selectmulti-selectA 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.

Nav Railnav-railA narrow vertical icon navigation bar that widens into a labelled column — keyboard-reachable tooltips, top/bottom zones, badges and a controllable expanded state.

NebulanebulaA layered interstellar cloud on canvas — token-tinted noise octaves drifting at different rates under a sparse star layer, with depth from parallax.

Noise Texturenoise-textureAn SVG turbulence grain layer that gives flat fills and gradients the tooth of print — optionally jittering like film.

Notch Inset Layoutnotch-inset-layoutA 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.

Notification Badgenotification-badgeA count bubble that wraps any element — rolling digits, a bump on change, max overflow, dot mode with a ping, and four corner placements.

Notification Centernotification-centerAn 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.

Number Inputnumber-inputA capsule quantity stepper with a decrement/increment button either side of a directly-editable, clamped numeric field.

Number Tickernumber-tickerA count-up number that eases from 0 to its target the first time it scrolls into view — Intl-formatted with prefix/suffix.

Oauth Buttonsoauth-buttonsA 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.

Ocr Viewerocr-viewerA 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.

Offline Banneroffline-bannerA 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.

Offline Indicatoroffline-indicatorAn 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.

Onboarding Touronboarding-tourA spotlight-style product walkthrough that dims the page, cuts a rounded hole around each step's real target, and positions an auto-flipping tooltip card beside it.

Open In Chatopen-in-chatA 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.

OrbitsorbitsConcentric orbital paths with bodies on real radii and periods — fading arc trails, a chord whenever two orbits line up, and one composed still frame when motion is off.

Order Trackingorder-trackingA 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.

Org Chartorg-chartA recursive org/hierarchy chart drawn with pure-CSS connector lines (sibling bus trimmed at both ends), collapsible subtrees, vertical or horizontal orientation, renderNode-swappable cards, and a keyboard-navigable WAI-ARIA tree that scrolls inside its own box instead of overflowing.

OTP Inputotp-inputA segmented verification-code field with auto-advance, paste-to-fill, optional grouping and masking.

Outline Fill Textoutline-fill-textStroked outline type whose solid copy is wiped in by an animated clip-path inset — on scroll, on hover, or on mount.

Overflow Tooltipoverflow-tooltipText that reveals itself in a tooltip only when it is really truncated — a width probe for single-line ellipsis, a height probe for line clamp, and nothing attached at all when it fits.

Package Infopackage-infoDisplay package versions, dependency groups, and upgrade status in a compact metadata panel.

Page Headerpage-headerAn app-shell page header — breadcrumb slot, icon, title, status meta and actions that wrap instead of squeeze, plus an optional controlled tab strip.

Page Transitionpage-transitionA route swap wrapper that holds the outgoing view until the incoming one is ready, cross-fades or slides the change, restores each route's scroll offset before paint and moves focus into the new view's heading — reduced to an instant swap under prefers-reduced-motion.

PaginationpaginationPage-number navigation with a sliding sibling window, edge pinning, and an ellipsis only when the page count actually needs one.

Cursor Paginationpagination-cursorA load-more control for cursor APIs — a synchronous in-flight guard so one cursor is never fetched twice, an optional intersection sentinel with a burst budget, retry that keeps the loaded rows, and a live-region count.

Pan Zoompan-zoomA 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.

Parallax Layersparallax-layersA depth wrapper — each child declares a depth and translates at that proportional rate as the container passes through the scrollport, with an optional pointer nudge, driven by one rAF-throttled listener and zero re-renders.

Partial Failure Summarypartial-failure-summaryThe receipt for one bulk action that half worked — the counts as a single actionable sentence, failures grouped by cause and expandable to the affected rows, an RFC 4180 failure report, and a retry whose scope follows whether the successes were committed or rolled back.

ParticlesparticlesAn interactive canvas particle field — dots, linked constellations, snow or fireflies that follow your text token and scatter from the pointer.

Passcode Lockpasscode-lockAn app lock screen with keypad passcode entry, biometric fallback, escalating attempt backoff and a terminal locked-out state.

Passkey Promptpasskey-promptA 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.

Password Generatorpassword-generatorA 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.

Password Inputpassword-inputA styled password field with a show/hide toggle and an optional heuristic strength meter.

Payment Buttonspayment-buttonsAn 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.

Paywall Sheetpaywall-sheetA 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.

PDF Viewerpdf-viewerA document viewer shell with a pluggable render layer — controlled paging synced to scroll, fit-width/fit-page zoom that re-fits on resize, thumbnail rail, text search, keyboard and pinch, named loading/404/damaged/encrypted states, and a native <object> fallback.

Percent Allocatorpercent-allocatorSplit a total across rows with largest-remainder rebalancing, per-row locks and min/max limits — the shares always add up to the target exactly.

Period Pickerperiod-pickerA whole-period picker — week, month, quarter or year — whose grid changes shape per granularity and whose value carries the resolved start and end instants.

Permission Matrixpermission-matrixAn editable roles × permissions grid: tri-state cells (allow / deny / inherit), collapsible permission groups, a pinned permission column, locked system-role columns, row/column bulk edits, and real loading/empty/error states.

Permission Primerpermission-primerA 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.

Permission Promptpermission-promptA pre-permission explainer card that says why camera, microphone, location, notification or clipboard access is needed before the browser's one-shot dialog is spent, with per-permission recovery steps and a retry once it's blocked.

Persona Editorpersona-editorAn 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.

Persona Pickerpersona-pickerChoose 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.

3D Marqueeperspective-marqueePresent media tiles in a responsive perspective marquee with explicit data states.

Phone Inputphone-inputA country dial-code picker fused to a number field — searchable self-drawn listbox, keyboard driven, emitting an E.164 string on every change.

Phone Number Inputphone-number-inputA mobile phone field that regroups digits as you type, picks the country from a bottom sheet, and normalises pasted international numbers into E.164.

Photo Stackphoto-stackA tilted deck of photos — drag, click or arrow-key the top one away and it cycles to the bottom, forever.

PII Detectorpii-detectorA 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.

Pinned Scroll Gallerypin-galleryA 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.

Pin Padpin-padA touch-first numeric keypad for PIN entry: 44px keys, masked dot indicator, deterministic shuffled layout, keyboard parity, and pending/error states.

Pinch Zoompinch-zoomA 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.

Pinned Messagespinned-messagesA 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.

Pivot Tablepivot-tableA 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.

PlasmaplasmaThe demoscene plasma field on one canvas — sines summed over x, y and time through a cyclic token palette, evaluated at low resolution and upscaled so full-bleed stays cheap.

Poll Composerpoll-composerA 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.

Poll Resultspoll-resultsA poll / survey 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.

PopconfirmpopconfirmA 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.

PopoverpopoverA click-triggered floating panel that portals past clipping ancestors, then flips, shifts and size-caps itself against the nearest scrollable boundary.

Print Buttonprint-buttonA 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.

PrismprismOne 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.

Product Cardproduct-cardA storefront product card: one stretched link over the whole card, variant swatches 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.

Product Galleryproduct-galleryA thumbnail rail driving one stage — pointer-tracked and keyboard-pannable magnification, inline video entries with duration chips, and a layout that follows its container.

Profile Cardprofile-cardOne person card in three densities — vertical, horizontal and compact — with presence dot, badges, stats, a stretched-link name and initials fallback.

Progress Meterprogress-meterOne progress contract in two geometries — a linear bar or a compact ring, each with determinate and indeterminate modes, four tones and four sizes.

Progress Toastprogress-toastA toast bound to one long job — determinate or indeterminate progress, a live percentage in its accessible name, cancel while it runs, and terminal states that hold long enough to read with a retry on failure.

Progressive Blurprogressive-blurA gradual-blur edge treatment — stacked backdrop-filter layers with geometrically growing radii, each masked to its own slice of the band, so content melts into frosted glass toward one edge instead of hitting a hard blur line.

Prompt Arenaprompt-arenaPairwise 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.

Prompt Diffprompt-diffA 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.

Prompt Enhancerprompt-enhancerAn "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.

Prompt Inputprompt-inputAn autosizing chat input with paste/drag/pick attachments, a streaming Send⇄Stop button, IME-safe submit and a character counter.

Prompt Libraryprompt-libraryA 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.

Prompt Railprompt-railA 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.

Prompt Variablesprompt-variablesAn 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.

ProseproseA 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.

Pull Menupull-menuAn 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.

Pull Quotepull-quoteEditorial pull quote for body copy: centered, floated left/right with the text wrapping around it, or bled past the measure — figure + blockquote + figcaption, with a decorative quote mark that never lands in the clipboard.

Pull To Refreshpull-to-refreshA 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.

QR Codeqr-codeA tokenized QR code renderer — encodes any string to SVG and inherits currentColor, auto-inverting in dark mode.

QR Loginqr-loginA phone-scan sign-in panel whose QR carries the secret while the screen shows only a derived pairing phrase, with expiry computed from expiresAt instead of trusted, scans attributed by device and approximate location so a wrong one can be rejected, and loading/empty/error handled as first-class branches.

QR Scannerqr-scannerA camera QR reader on the native BarcodeDetector with a pluggable decoder — an enforced scan frame, a throttled decode loop, a per-value cooldown, an image fallback, and a camera that is always released.

Query Builderquery-builderA recursive AND/OR condition tree — operator menus follow 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 what the tree means.

Queue Positionqueue-positionA 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.

Quote Replyquote-replyQuote-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.

RainrainLayered canvas rainfall — parallax sheets of streaks sheared by a wind prop, landing as ripples on an implied ground line.

Range Sliderrange-sliderA two-thumb range selector with a minimum gap, value bubbles, marks and full keyboard control.

Rate Limit Meterrate-limit-meterA 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.

Rate Limit Noticerate-limit-noticeA 429 panel whose cooldown recomputes from an absolute target instant, so a suspended tab wakes up to the right number — auto-unlock with milestone-only announcements and no auto-retry, remaining quota with icon/word/outline urgency, consecutive-backoff labelling and an upgrade CTA.

RatingratingAn accessible star rating input (whole or half steps) that doubles as a fractional read-only display.

Rating Promptrating-promptAn 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.

Rating Summaryrating-summaryA read-only review digest: average score, fractional stars and five distribution bars that double as star-filter toggles, plus a no-reviews state.

Reachability Pullreachability-pullOne-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.

Read Aloud Buttonread-aloud-buttonA 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.

Read Moreread-moreA line-clamped text block with an expand/collapse toggle that only appears when content actually overflows.

Reading Metareading-metaAn article byline strip that derives reading time in-component from the word count at a stated pace, switches from the total to how much is left once reading starts, collapses long author lists into "and N others", and renders every date from an ISO string with an explicit locale and time zone.

Reasoning Blockreasoning-blockA collapsible model-reasoning panel driven by the stream's lifecycle — auto-opens while tokens arrive, auto-collapses when they stop, and permanently stands down once the reader touches it.

Reasoning Timelinereasoning-timelineA 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.

Record Buttonrecord-buttonA record control with an idle → recording → processing → done state machine — drift-free elapsed timer, minimum/maximum take guards, and an optional hold-to-record gesture with slide-away cancel.

Recurrence Pickerrecurrence-pickerA calendar-language repeat editor that writes an RFC 5545 RRULE — frequency, interval, weekday chips, "second Tuesday" / "last day of the month", and a Never / N times / until-date ending — with the next dates previewed from the same rule evaluator.

Redacted Textredacted-textBlur, black-bar or character-mask a sensitive string with hover / click / press-and-hold reveal — where mask actually removes the plaintext from the DOM.

Regenerate Menuregenerate-menuA 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.

Regex Testerregex-testerA regex workbench with flag toggles, matches tinted in place under the caret, a capture-group table, verbatim engine errors, and a worker-backed time budget that survives catastrophic backtracking.

Relative Timerelative-timeAuto-refreshing 'time ago' text rendered as a real <time> element, formatted with Intl.RelativeTimeFormat and hydration-safe via useSyncExternalStore.

Release Healthrelease-healthA per-release client stability panel that derives adoption from session counts, checks crash-free session and user rates against the payload's own thresholds, reports the change from the previous release by semver precedence, and lists the top crash groups with the arithmetic of what it would take to clear the bar.

Repeater Fieldrepeater-fieldA 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.

Report Schedulerreport-schedulerA 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.

Request Historyrequest-historyA 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.

Request Waterfallrequest-waterfallA DevTools-style network waterfall — one adaptive time axis, bars segmented by DNS/connect/TLS/TTFB/download, hover-or-focus phase breakdowns, duration sorting, and real loading/empty/error states.

Resource Usageresource-usageA quota panel for heterogeneous resources — per-unit formatting (1024-based bytes, throughput, duration, cores, counts, money), unlimited rows with no bar at all, rescaled over-quota tracks, collapsible groups and usage sorting.

Response Feedbackresponse-feedbackThumbs 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.

Retrieval Resultsretrieval-resultsThe 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.

Retro Gridretro-gridAn 80s synthwave floor — a tiled grid laid flat in perspective, scrolling toward the viewer and dissolving into the horizon.

Retry Countdownretry-countdownA client-side backoff card that derives every wait from the schedule you pass — the attempt against its cap, a draining ring 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 hands over your escape hatch instead of a dead button.

Rewrite Previewrewrite-previewA 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.

Rich Text Toolbarrich-text-toolbarAn editor-agnostic formatting bar: grouped toggle buttons that never steal the editor's selection, collapse into an overflow menu by measurement, and walk on a single tab stop — plus a floating variant that follows the selection.

Ripple Ringsripple-ringsConcentric ripples expanding out of one origin — a pure CSS/DOM backdrop with an optional pointer-following origin and a static reduced-motion fallback.

Ruby Textruby-textRuby 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.

Run Comparisonrun-comparisonA 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.

Run Summaryrun-summaryThe 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.

Safe Areasafe-areaA CSS-only wrapper that keeps content clear of the notch, rounded corners, home indicator and landscape rails — per-edge opt-in, padding or margin, with a max() floor for devices that report no inset.

Safety Controlssafety-controlsPer-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.

Sampling Controlssampling-controlsA 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.

Sandbox Statussandbox-statusA 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.

Save Indicatorsave-indicatorAutosave status line for an editor toolbar — Saving… holds a minimum beat to avoid flicker, Saved fades back into "Last saved 3 minutes ago", and errors stay put with a Retry.

ScanlinesscanlinesA 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.

Schedule Calendarschedule-calendarA 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 real loading/empty/error states.

Scheduled Tasksscheduled-tasksA 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.

Schema Displayschema-displayDocument API operations, parameters, and nested schemas in an accessible expandable view.

Schema Formschema-formA form generated from a zod object schema — a control per field type, required markers and every verdict read from that same schema, typed values on submit, and an explicit notice for the shapes it will not generate.

Scramble Textscramble-textText that lands as random characters and decodes left to right, on mount, on scroll-in or on hover.

Scratch Cardscratch-cardA 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.

Screen Recorderscreen-recorderA real getDisplayMedia screen recorder — surface picker, optional microphone mixdown, live duration and size, and a preview you can download.

Screen Transitionscreen-transitionA 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.

Scroll Areascroll-areaA themed scroll container that keeps native scrolling untouched — the platform bar is hidden and a draggable thumb is drawn from scrollTop/scrollHeight, with edge fades and an end-reached callback.

Scroll Progressscroll-progressA thin fixed bar tracking page or container scroll position, written straight to the DOM with zero re-renders.

Scroll Restorationscroll-restorationRestores where each named scroll container was when a history entry was left, waiting for async content to come back before it lands.

Scroll Revealscroll-revealA variant-driven entrance wrapper — fade, slide, blur or scale any children in once they scroll into view, with an optional per-child stagger.

Scroll Shadowscroll-shadowA 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 or steals scrollbar width.

Scroll To Latestscroll-to-latestA 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.

Scroll to Topscroll-to-topA floating button that fades in past a scroll threshold and smoothly scrolls its container (or the window) back to the top.

Scroll Velocity Skewscroll-velocity-skewA wrapper that leans and slightly scales its content in proportion to scroll velocity, then eases back to neutral the moment scrolling stops.

Scrollbar Stylesscrollbar-stylesSix presets that re-skin the browser's own scrollbar in pure CSS — no JavaScript, no drawn thumb, and one capability-tiered sheet that keeps `::-webkit-scrollbar` and `scrollbar-width` from cancelling each other out.

Search Highlightsearch-highlightHighlights the parts of a text that match a search query — substring, per-word or fuzzy subsequence, with escaped queries, merged overlaps and a current-match cursor.

Search Inputsearch-inputA search field with an icon, a clear button that appears on value, an optional loading spinner, and a decorative shortcut hint.

Seat Pickerseat-pickerA zoomable SVG venue map for picking seats — section/row/seat keyboard navigation, per-seat spoken names, shape+pattern status encoding, a list fallback, max-seat and no-orphan rules.

Segmented Controlsegmented-controlAn iOS-style exclusive picker whose selected thumb slides between options, with cva sizes and full radiogroup keyboard support.

Session Expirysession-expiryA 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.

Session Listsession-listSigned-in devices with per-row and bulk sign-out — the current session is highlighted and never revocable, rejected revokes keep the row with a retry, and loading/empty/error are first-class states.

Settings Listsettings-listGrouped 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.

Share Buttonshare-buttonA share trigger whose targets fan out on an arc or a rail, one 40ms step apart, with outside-click and Esc dismissal.

Share Conversationshare-conversationA 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.

Share Sheetshare-sheetThe 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.

Shiny Textshiny-textA restrained inline shimmer — one narrow light band loops across muted text, for New badges and quiet links.

Shortcut Recordershortcut-recorderA field that records a keyboard shortcut by pressing it — swallows every key while recording, waits past the modifiers for a real key, and separates browser-reserved combos (refused) from ones that would override an existing binding (recorded, with a warning).

Shortcuts Dialogshortcuts-dialogA grouped keyboard cheat sheet bound to the ? key — platform-correct keycap glyphs, token-based filtering, focus trap and a refcounted scroll lock.

Sidebar Navsidebar-navA grouped app sidebar with collapsible sections, icons, badges, an active-item indicator and an icon-only collapsed rail.

Signature Padsignature-padA canvas signature capture surface with pointer-drawn strokes, undo/clear, and a PNG data URL export.

SilksilkFlowing 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.

SkeletonskeletonA loading-placeholder primitive — line, circle and rect shapes with pulse or shimmer motion — that mirrors the layout it stands in for.

Skip Linkskip-linkA hidden-until-focused link cluster that moves focus — not just the scroll — to a page landmark, clearing a sticky header by a configurable offset.

SLA Reportsla-reportA contract-side availability settlement — real period length, overlap-merged downtime, weighted or worst-service composite, an error budget that is allowed to read past 100%, and the service-credit rung the period landed on.

Slash Command Menuslash-command-menuA 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.

Slice Explorerslice-explorerA 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.

Slide to Confirmslide-to-confirmA slide-to-confirm control — drag the thumb to the end of the track to fire an action, guarding destructive or irreversible operations against accidental taps.

Slug Inputslug-inputA 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.

SmokesmokeRising turbulent smoke on one canvas — three scales of a single baked fBm tile, warped per band and thinning with height.

SnackbarsnackbarA bottom-edge message bar with one action, swipe-to-dismiss and a single-slot queue that never lets two share the thumb arc.

SnowsnowCanvas snowfall with per-flake sway, a foreground-bokeh depth ramp, and an optional drift that builds along the bottom edge and settles under its own angle of repose.

Social Proof Toastsocial-proof-toastA 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.

SonarsonarA canvas radar sweep — a rotating wedge with a decaying tail over concentric range rings, and prop-driven contacts that flare when the beam passes and fade until the next one.

Sort Buildersort-builderA 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.

Sortable Listsortable-listA drag-to-reorder list (settings, playlists, priority queues) built on dnd-kit with a keyboard-sortable fallback.

Source Sheetsource-sheetA 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.

Stat Card · Sparklinesparkline-stat-cardA KPI card — headline figure, tone-aware delta badge and a minimal sparkline — with four data states from one contract.

360 Spin Viewerspin-viewerA turntable image sequence scrubbed by horizontal drag, touch and arrow keys — one wrapping frame index, a preload gate that shows its progress before interaction is allowed, dead frames skipped instead of blanking the stage, and auto-spin that yields at the first interaction.

Spin Wheelspin-wheelA 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.

SpinnerspinnerOne indeterminate loader, seven shapes — three boxed (ring, dual-ring, bars) and four inline dot rows (dots, ellipsis, bounce, wave), with tone and count props.

Split Buttonsplit-buttonA primary action welded to an arrow segment that opens its own keyboard-navigable action menu.

Split Panesplit-paneA dependency-free resizable split layout — percentage flex-basis panes, percent or px per-pane minimums, double-click collapse, full keyboard resizing and an optional persisted layout.

Split Screen Hoversplit-screen-hoverFull-height panels that share one row and rebalance around the pointer — the hovered or focused panel takes the width and opens its copy while the others compress, dim and desaturate.

SpotlightspotlightA cursor-following radial glow background container — pointer coordinates track via ref-driven CSS variables, never React state.

Stack Tracestack-traceParse, inspect, and copy stack traces while preserving unrecognized raw frames.

StarfieldstarfieldA layered parallax star field on one canvas — 2-4 depth layers drifting or warping, seeded for a reproducible sky, with a faint-dust fallback on light surfaces.

Stat Cardstat-cardA KPI grid — label, big tabular figure and a tone-coded delta per metric — with loading, empty, error and ready driven by one contract.

Stateful Buttonstateful-buttonAn action button with a built-in idle → loading → success/error state machine — stable width, live-region announcements, auto-reset.

Status Badgestatus-badgeA presence and health indicator — colored dot or tinted pill, with status colors mapped to theme tokens and an optional liveness pulse.

Status Bar Mockstatus-bar-mockA 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.

Status Timelinestatus-timelineA read-only progress thread for an async run — per-stage icon + word, live elapsed time on the running stage, expandable failures and a settled-run summary, vertical or horizontal.

StepperstepperA horizontal wizard progress indicator — completed steps are clickable to go back, the current and future steps never are.

Steps Checkliststeps-checklistAn onboarding checklist that tracks setup progress — togglable steps with optional CTAs, expandable detail, a progress meter and a completion celebration.

Stick To Bottomstick-to-bottomA scroll container that follows its own bottom edge — appended content stays in view, a scroll up hands the position over for good, and a counted jump pill brings the reader back.

Sticky CTA Barsticky-cta-barA conversion bar that docks to the bottom or top edge once a sentinel element leaves the viewport, carrying a headline, a primary action and a dismissal that is remembered for the rest of the tab session.

Sticky Headersticky-headerAn in-flow page header that shrinks, blurs, or hides on scroll, exposing its scroll state as data attributes for consumers to style.

Sticky Section Liststicky-section-listA 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.

Sticky Stacksticky-stackMulti-level sticky section headers that shove each other out or pile up, with every parking line accumulated from measured header heights.

Stop Generatingstop-generatingOne 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.

StopwatchstopwatchA 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.

Stories Viewerstories-viewerA 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.

Streak Trackerstreak-trackerA 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.

Stream Inspectorstream-inspectorA 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.

Stream Stop Barstream-stop-barA 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.

Streaming Codestreaming-codeA 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.

Streaming Markdownstreaming-markdownA 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 Tablestreaming-tableA 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 Textstreaming-textAn incremental Markdown renderer for LLM output — finished blocks are frozen, half-written markup is closed speculatively, the caret rides the last character and screen readers hear the answer once.

Structured Outputstructured-outputA 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.

Success Checksuccess-checkAn SVG outcome mark that draws its ring and then its stroke — a check for success, a cross for failure.

Suggested Promptssuggested-promptsClick-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.

Swatch Pickerswatch-pickerAn accessible radiogroup of preset color swatches with roving tabindex, arrow-key navigation, and a contrast-safe selected check mark.

Swipe Actionsswipe-actionsA 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.

Swipe Cardsswipe-cardsA 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.

Swipe Pagerswipe-pagerFull-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.

Swipe To Replyswipe-to-replyA 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.

System Prompt Editorsystem-prompt-editorA 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.

Tab Overflowtab-overflowA measured tab strip that folds the tabs it cannot fit into a "More" menu — real tablist semantics, the selected tab is never collapsed, and no breakpoints anywhere.

Tags Inputtags-inputA chips input for free-form multi-value entry — Enter or comma commits, paste splits, duplicates shake, maxTags caps with a counter.

Task Queuetask-queueAn 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.

Tax ID Inputtax-id-inputA tax identifier field where the country picks the format — local label, printed prefix, mask and that jurisdiction's real checksum (EU VAT, UK VAT, EIN, ABN, GSTIN, CNPJ) — with an optional register-verification state on top.

TerminalterminalA terminal window that replays a scripted session — commands type out character by character, output blocks fade in, comments stay dim.

Test Resultstest-resultsSummarize test suites, outcomes, durations, and failure details across explicit data states.

Text Clip Mediatext-clip-mediaDisplay type whose glyphs become a window onto media — an image, a muted looping video or a token gradient fills the letters, leans away from the pointer, and degrades to a solid token whenever clipping is unsupported or the media never arrives.

Text Difftext-diffA 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.

Text Revealtext-revealWord-by-word or character-by-character text reveal triggered by scrolling into view, with a staggered fade-up-blur entrance.

Theme Customizertheme-customizerA 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.

Theme Toggletheme-toggle-buttonAn animated sun/moon theme toggle button — controlled and host-agnostic, with a rotate-and-scale icon cross-fade.

Thinking Indicatorthinking-indicatorA 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.

Threshold Editorthreshold-editorAn 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.

Throughput Meterthroughput-meterA 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.

Thumb Toolbarthumb-toolbarA 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.

Tilt Cardtilt-cardA card container that leans toward the pointer in 3D, with an optional gloss that tracks the cursor.

Time Pickertime-pickerA segmented hour:minute input with arrow-key stepping and a clock-button dropdown, normalizing to 24-hour "HH:mm" regardless of display format.

TimelinetimelineA contract-driven vertical timeline with done, active and upcoming milestone nodes and four data states.

Timeline Swimlanetimeline-swimlaneEvents 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.

Timezone Pickertimezone-pickerA searchable IANA time-zone field — ~90 zones grouped Popular / All, each row showing that zone's live local time and derived GMT offset, in a portalled panel no overflow-hidden card can clip.

Toast Stacktoast-stackA self-contained toast system — newest slides in, older ones stack behind it, hover expands the pile into a list.

TOC Scrollspytoc-scrollspyAn article outline that follows the reader — headings are watched with one IntersectionObserver and a rail slides to the current section.

Toggle Grouptoggle-groupA 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.

Toggle Switchtoggle-switchA switch with a sliding knob, Check/X icons fading inside the track, three sizes and a loading state.

Token Usage Metertoken-usage-meterAn 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.

Tokenizer Previewtokenizer-previewA 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.

Tone Selectortone-selectorA 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.

Tool Call Cardtool-call-cardOne agent tool call inline in a conversation — a first-class approval gate with a one-shot Approve/Decline, structured args and results, key-based redaction that keeps secrets out of the DOM, announced truncation for huge payloads, and real loading/empty/error states.

Tool Call Tracetool-call-traceAn agent's tool-call tree — nested sub-calls with a capped indent, structured args and results in expandable JSON, one shared duration unit, first-class running/failed calls, and real loading/empty/error states.

Tool Catalogtool-catalogA 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.

ToolbartoolbarA grouped application toolbar that measures itself and folds its lowest-priority actions into a portalled "More" menu — no breakpoints, roving tabindex, pressed toggles kept intact.

Toolbar Overflowtoolbar-overflowAn action bar that measures itself off-screen and moves the actions it cannot fit into a trailing overflow menu, lowest priority first.

Top Loading Bartop-loading-barA thin route and request bar that climbs asymptotically towards 99% while work is in flight — delay-gated so fast requests never flash, held for a minimum duration, with a controlled mode, top or bottom placement and an optional spinner.

TopographytopographyA seamlessly tiling contour-map backdrop traced from seeded hash noise — quiet relief lines for docs shells, auth screens and empty states.

Transfer Listtransfer-listA 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.

Translation Paneltranslation-panelA 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.

Translation Toggletranslation-toggleA 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.

Tree Maptree-mapA squarified treemap that tiles a hierarchy by value — nested groups, click-to-drill with a breadcrumb, rank-based shading and keyboard-reachable DOM tiles (no canvas).

Truncate Middletruncate-middleMiddle-ellipsis text that keeps both ends readable — a fixed head/tail cluster count, or as many characters as the measured width actually fits.

Type Scaletype-scaleA 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.

TypewritertypewriterA type-and-delete headline that cycles through a list of sentences with a blinking caret.

Typing Indicatortyping-indicatorA chat presence indicator — optional avatar, a receiver-side bubble of waving dots, and a name line that collapses for groups.

Undo Toastundo-toastAn optimistic-delete toast: the row disappears at once, a countdown ring holds the destructive commit, and hover or focus pauses the window.

Unit Inputunit-inputA number-plus-unit field for design tokens — 12px, 1.5rem, 50% — with arrow/wheel stepping, optional conversion on unit switch, and an auto state.

Unsaved Changes Guardunsaved-changes-guardA 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.

Upgrade Promptupgrade-promptAn 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.

Uptime Barsuptime-barsA 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.

Usage Alertsusage-alertsA 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.

Username Availabilityusername-availabilityA controlled handle field that gates a debounced availability check behind local rules, names the rule that broke, keeps unreachable separate from taken, and shows the normalised handle before submit.

Variable Font Scrollvariable-font-scrollA headline whose variable-font axes interpolate with scroll position, thickening character by character as it crosses the viewport and falling back to a static weight on non-variable families.

Variant Selectorvariant-selectorMulti-dimension product options resolved against a sparse SKU matrix — impossible combinations stay visible and struck through, availability converges from either direction, and dead ends name the one dimension to change.

Version Historyversion-historyA day-grouped snapshot list — preview a version, compare two, and roll one back behind a real confirmation with pending, failure and retry.

Vertical Textvertical-textVertical 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 copy would not gain from it.

Video Chaptersvideo-chaptersThe chapter list beside a player: chapters supply only a start time, the component derives every boundary, length and share of the runtime, marks the chapter holding the playhead, keeps it scrolled into view with an in-chapter progress sliver, and seeks on click or Enter.

Video Embedvideo-embedA lite YouTube/Vimeo facade — poster and play button until clicked, so the real iframe and its third-party script never load until the user opts in.

Video Generationvideo-generationA 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.

Video Hover Previewvideo-hover-previewA thumbnail card that plays a muted preview clip on hover or keyboard focus — delayed lazy load, pointer-x scrubbing, progress bar, and a poster fallback on error.

Video Playervideo-playerA custom control skin for a self-hosted <video> — pointer-capture scrubbing with preview time, buffered ranges, volume memory, speed menu, subtitles, fullscreen, PiP, keyboard shortcuts and a readable error state.

Video Playlistvideo-playlistA 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.

Scroll Scrubbed Videovideo-scrub-scrollA video whose playhead is driven by scroll position — a pinned section maps its scroll window onto currentTime with rAF-coalesced, readyState-guarded seeks, and falls back to the poster plus an ordinary play control under reduced motion, an unseekable source or a load error.

Video Timelinevideo-timelineA controlled scrub track with chapter-segmented rail, buffered ranges, keyframe hover previews and draggable in/out trim handles — delta dragging, frame-accurate keys, no player attached.

Virtual Gridvirtual-gridA hand-rolled two-dimensional window over a huge sparse matrix — only the cells near the viewport are in the DOM, with fixed or measured row heights and column widths.

Virtual Listvirtual-listA hand-rolled windowed list — renders only the visible rows of a huge array, with fixed or measured variable heights, imperative scroll control and infinite-scroll support.

Voice Orbvoice-orbA 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 Pickervoice-pickerPick 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.

Voice Recordervoice-recorderA real MediaRecorder-backed voice recorder — live AnalyserNode waveform, pause/resume, mic-permission handling, and a listen-before-you-send preview.

Voronoi Cellsvoronoi-cellsA slowly flowing Voronoi diagram on one canvas — organic cell walls, a tinted mosaic or separated pebbles, seeded so the same field comes back every time.

VortexvortexA canvas vortex — particles spiral into one point, winding faster as they fall, with comet tails made by fading the buffer instead of storing a path.

Vote Buttonsvote-buttonsAn 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.

Wallet Card Stackwallet-card-stackA 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.

Warp Tunnelwarp-tunnelA hyperspace speed tunnel on one canvas — seeded, tapered streaks leave a movable vanishing point and accelerate outward with perspective foreshortening.

Wave Dividerwave-dividerAn animated section seam of stacked SVG wave layers, each re-sampled every frame from two counter-travelling harmonics, with an opaque front wave painted in the next section's own theme token.

WaveswavesAn SVG wave divider and layered backdrop for section transitions and hero bottoms — pure CSS, no canvas.

Web Previewweb-previewA 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.

Web Search Cardweb-search-cardOne 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.

Webhook Logwebhook-logA 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.

Wheel Pickerwheel-pickerAn iOS-style drum picker: scroll-snap detents under the thumb, optional wrapping, unlandable rows, and the same turns from the keyboard and two chevrons.

Word Rotateword-rotateA jitter-free rotating word inside a headline, cycling through slide or fade transitions with zero layout shift.

Workspace Switcherworkspace-switcherA workspace / organization switcher: active workspace in the trigger, grouped searchable menu in a portalled panel, pinned create and settings footer.

World Clockworld-clockSeveral 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.

Select a component to view its code

Click on any item in the sidebar to get started

Select a component to view its information

A/B Test Resultab-test-resultAn 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.

AccordionaccordionA zero-dependency accessible disclosure list — single or multiple expansion, grid-rows animation, and full APG keyboard support.

Action Sheetaction-sheetAn 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.

Activity Feedactivity-feedA 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.

Activity Heatmapactivity-heatmapA GitHub-style contribution grid — daily counts as a five-step color scale over a windowed week-by-week calendar, with four data states.

Add to Calendaradd-to-calendarA split button that hands one event to Google, Outlook, Office 365 or Yahoo and writes a spec-correct .ics in the browser — real IANA zones with a generated VTIMEZONE, exclusive all-day ends, 75-octet folding and a validated RRULE.

Address Formaddress-formA postal address form driven by a country rule table: per-country field set, field order and labels, state dropdown or free text or nothing, postal codes that are required, optional or absent, blur-time validation, correct autocomplete tokens, and an announced clear when a value cannot follow you to the next country.

Agent Graphagent-graphA 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.

Agent Handoffagent-handoffAn 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 Inboxagent-inboxA 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 Permissionsagent-permissionsA 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.

Agent Planagent-planAn 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.

Agent Rosteragent-rosterA 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 Statusagent-statusA 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.

Agent Stepsagent-stepsA 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.

AI Badgeai-badgeA 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.

AI Disclaimerai-disclaimerThe '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 Form Assistai-form-assistModel-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.

AI Selection Menuai-selection-menuAn 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.

Amount Keypadamount-keypadAn 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.

Anchor Headinganchor-headingA heading that owns its anchor — a stable id de-duplicated against the live document, non-ASCII kept instead of stripped, a permanently focusable link that fades in on hover, and one click that deep-links, updates the hash and copies the absolute URL.

Animated Beamanimated-beamConnect two interface nodes with a responsive animated SVG beam.

Animated Listanimated-listA flex column that staggers items in on first mount, pops in new entries, and exits removed ones while the rest smoothly re-flow into place.

Animated Tabsanimated-tabsA controlled tab strip with a sliding active indicator — underline and pill variants animated via motion layout animation.

Animated Textanimated-textCharacter-level text animation — typewriter, scramble and flowing gradient variants in one component.

Animated Tooltipanimated-tooltipA self-contained hover/focus tooltip with a spring pop-in, reduced-motion fallback and an arrow callout — no Radix dependency.

Annotated Textannotated-textProse 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.

AnnouncementannouncementA compact inline announcement link with an optional label, icon and directional CTA cue.

AnnouncerannouncerA 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.

Anomaly Listanomaly-listA 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.

Answer Highlightanswer-highlightThe 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.

Answer Metric Cardanswer-metric-cardAn 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 Sourcesanswer-sourcesThe 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.

API Changelog Diffapi-changelog-diffAn endpoint-level diff between two API versions — routes grouped as removed, changed, deprecated and added, each expandable to the field-level story, with breaking changes counted apart from additive ones and every deprecation shown with its sunset date and whole days remaining.

API Endpointapi-endpointA collapsible API reference card with a monochrome-safe method badge, grouped parameter tables, expandable response examples, and a generated Copy-as-cURL command that reports failure honestly.

API Error Cardapi-error-cardAn 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.

API Key Fieldapi-key-fieldA settings-page secret field with fixed-length masking, reveal/hide with optional auto re-mask, copy-to-clipboard with a visible failure fallback, and a two-step confirm before regenerating.

App Launcherapp-launcherA nine-dot app switcher: a grid button that drops a portalled tile grid of real links, with arrow-key grid navigation, groups, pinned and recent rows, and a search box once the suite outgrows a 3x3.

App Update Sheetapp-update-sheetA 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.

Artifact Panelartifact-panelA 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.

Assignee Pickerassignee-pickerA 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.

Assistant Avatarassistant-avatarAn 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.

Attachment Trayattachment-trayThe 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.

Audio Playeraudio-playerA minimal token-styled audio player card — play/pause, seek, and mm:ss time over a native <audio> element.

Audio Transcriptaudio-transcriptA timestamped, speaker-labelled transcript synced to a playhead — the spoken line highlights and stays in view until the reader scrolls away, any line seeks to its exact start, and search steps through every hit.

Audio Trimmeraudio-trimmerA 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.

Audio Visualizeraudio-visualizerA real-time AnalyserNode visualizer — spectrum bars, oscilloscope, radial ring or segmented level meter, driven by a stream, an audio element or an analyser you own.

Audio Waveformaudio-waveformA canvas amplitude waveform with a click/drag/keyboard seek slider — takes precomputed peaks or decodes a src itself, highlights regions, and stays a controlled display while your own audio element plays.

Audit Trailaudit-trailA compliance-grade activity log — one readable sentence per event, day separators, expandable before/after diffs, and real loading/empty/error states.

AuroraauroraAn animated aurora-gradient background container — theme-token blobs drifting in pure CSS.

Autosize Textareaautosize-textareaA textarea that grows with its content via CSS field-sizing with a scrollHeight-based JS fallback, capped between minRows and maxRows.

Availability Pickeravailability-pickerA week × time-slot grid you brush to declare when you are free — paint/erase drag strokes, keyboard painting, blocked slots and an optional group heatmap.

Avatar Groupavatar-groupAn overlapping avatar stack with ring cutouts, letter fallbacks for broken images, and a computed +N overflow chip.

Avatar Statusavatar-statusOne 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.

Avatar Uploadavatar-uploadThe 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.

Back Buttonback-buttonA 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.

Balanced Headingbalanced-headingA 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.

Bank Details Formbank-details-formPayout 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 IBAN mod-97 check, the ABA weighted checksum, entered values carried across a country switch, and the account masked to its last four after entry.

BannerbannerA page-top announcement bar with info, accent and destructive variants, a real action link and consumer-owned dismissal.

BarcodebarcodeA 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.

Batch Jobsbatch-jobsA 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.

Bento Gridbento-gridA responsive tiling layout of mixed-size feature cards, with a pointer-tracked glow and honest click affordances.

Bokeh Lightsbokeh-lightsSlowly floating out-of-focus light discs on one canvas — seeded for a reproducible picture, painted from a pre-rendered sprite instead of a per-frame blur, with an opacity lever that keeps overlaid copy readable.

Border Trace Buttonborder-trace-buttonA native button with an animated border trace and reduced-motion fallback.

Bottom Navbottom-navA mobile tab bar with badges, safe-area padding and an indicator that measures the active item and glides to it.

Breadcrumb Dropdownbreadcrumb-dropdownA 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.

BreadcrumbsbreadcrumbsAn accessible breadcrumb trail with collapsible overflow — first item + ellipsis + last items once maxItems is exceeded.

Bulk Action Barbulk-action-barA floating toolbar that mounts once rows are selected — inline actions, an overflow "More" menu, and a live-announced count.

Business Hoursbusiness-hoursA 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.

Button Groupbutton-groupA 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.

BYOK Setupbyok-setupA 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.

Cache Indicatorcache-indicatorA 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.

Calculator Inputcalculator-inputA 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.

Calendar Monthcalendar-monthA 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.

CalloutcalloutAn 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.

Camera Capturecamera-captureA real getUserMedia webcam capturer — live preview, countdown shutter, mirrored canvas export, and a keep/retake review that returns a JPEG Blob.

Canvas Reveal Hovercanvas-reveal-hoverA panel that reveals a seeded dot matrix on a canvas beneath its content — squares ignite outward from where the pointer or focus entered, and dissolve in a scattered order when it leaves.

CarouselcarouselAn embla-powered slide carousel with autoplay (hover-pause, reduced-motion aware), looped or bounded navigation, arrow buttons and synced pagination dots.

Cascading Selectcascading-selectDependent 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.

Changelog Listchangelog-listUser-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 per-release permalinks.

Char Counterchar-counterA grapheme-accurate character budget for any input or textarea — a warning band, an explicit over-limit state, a caliber prop so the count matches the server, and a hard cap that trims the paste out loud instead of swallowing it.

3D Bar Gridchart-3d-barsAn orbitable WebGL 3D bar grid — categories along X, series lanes along Z, height as value — with runtime chart-token materials, hover tooltips and four contract-driven states.

3D Donutchart-3d-donutA four-state 3D extruded donut on react-three-fiber — hovered slices lift and slide outward with a drei Html tooltip, the compact total floats in the hole, and a keyboard-focusable DOM legend mirrors the hover, all themed by runtime-resolved chart tokens.

3D Funnelchart-3d-funnelA four-state 3D funnel of stacked truncated cones whose radii track stage values, with orbit controls, per-stage conversion labels via Html, and theme tokens resolved into WebGL materials at runtime.

3D Globe Arcschart-3d-globeA four-state 3D globe with a graticule, value-sized lat/lng markers and elevated great-circle arcs between origin/destination pairs, coloured at runtime from the live chart tokens.

3D Heightmap Matrixchart-3d-heightmapA four-state 3D lego-plot matrix — rows × columns of WebGL columns whose height and colour intensity both encode one value, with runtime-resolved theme tokens, orbit controls and hover tooltips.

3D Network Graphchart-3d-networkA four-state 3D node-link graph on react-three-fiber — spheres sized by degree, one line-segment pass for all edges, a deterministic golden-angle layout, hover tooltips, and theme tokens resolved into WebGL materials at runtime.

3D Radial Barschart-3d-radial-barsA four-state 3D radial bar chart on react-three-fiber — bars ring a center with height encoding value, orbit camera, hover tooltips and runtime-resolved theme tokens, driven by one zod contract.

3D Ribbon Serieschart-3d-ribbonA four-state multi-series 3D ribbon chart on react-three-fiber — one extruded lane per series, theme tokens resolved into WebGL materials at runtime, hover isolates a ribbon.

3D Scatter Cloudchart-3d-scatterAn orbitable four-state 3D scatter cloud on react-three-fiber — cluster-colored spheres inside axis grid planes, chart tokens resolved to WebGL at runtime and re-resolved on theme flips, with drei Html tooltips and an sr-only data table.

3D Surface Plotchart-3d-surfaceA four-state rotatable 3D surface from a z-value grid — vertex colors lerped between runtime-resolved chart tokens by height, a subtle wireframe overlay, orbit controls and hover tooltips, with SSR never touching WebGL.

Adjacency Matrixchart-adjacency-matrixA 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.

Agent Trajectorychart-agent-trajectoryA four-state agent-run timeline: every step a measured segment on the run's own clock coloured by kind, retries nested as attempts inside the step they re-attempt, generated tokens per step on a second track, and a wall-time-versus-generation mix apportioned by largest remainder so the shares add to exactly 100.

Aging WIPchart-aging-wipA 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.

Alluvial Diagramchart-alluvialA 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.

Anomaly Timelinechart-anomaly-timelineA 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.

Arc Diagramchart-arc-diagramA 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.

Area Chart (Stacked)chart-area-stackedA 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.

Attention Headschart-attention-headsA small-multiples grid of causal attention maps — one miniature token-by-token heat matrix 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 attention mass split into four disjoint shares that add to exactly 100.

Autocorrelation (ACF)chart-autocorrelationA four-state ACF/PACF stem plot that computes the correlations from the raw series itself — one stem per lag against a ±1.96/√n band, lags outside it carried by shape as well as colour, and a radiogroup that pairs or isolates the two panels.

Axis Brushchart-axis-brushA 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.

Badminton Shot Mixchart-badminton-shot-mixA four-state badminton shot-mix chart — one 100% stacked bar per game across five fixed shot types with largest-remainder shares and an attack-share tick under each row.

Grouped Bar Chartchart-bar-groupedA four-state grouped bar chart that flips to horizontal rows when columns would go under 10px, textures every series so colour is never the only cue, and keeps missing readings distinct from measured zeros.

Bar Chart · Interactivechart-bar-interactiveAn interactive bar chart card with per-series big-number toggles that switch which series the bars plot.

Bar Racechart-bar-raceA 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.

Baseball Spray Chartchart-baseball-sprayA 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 Strike Zonechart-baseball-strike-zoneA 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 Win Probabilitychart-baseball-win-probabilityA 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.

Basketball Lineup Stintschart-basketball-lineup-stintsA 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.

Basketball Momentum Runchart-basketball-momentumA 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 Shot Zoneschart-basketball-shot-zonesA 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.

Beeswarmchart-beeswarmA 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.

PCA Biplotchart-biplotA 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.

Bland-Altman Plotchart-bland-altmanA four-state Bland-Altman agreement plot that computes bias and ±1.96 SD limits of agreement from raw measurement pairs, drawing a solid bias line, dashed labelled limit lines, and out-of-limits pairs in the destructive tone.

Blocker Impactchart-blocker-impactA 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.

Body Load Mapchart-body-mapA four-state anatomical body map in hand-rolled SVG — mirrored front and back silhouettes whose muscle areas shade with one chart token at stepped opacity, hatching for areas nobody reported, leader-lined labels on the worst areas, and a ranked list with the front/back split and a flag line.

Box Plotchart-boxplotA four-state box plot comparing distributions side by side: R-7 quartiles, Tukey 1.5×IQR whiskers on real observations, de-overlapped outliers, and raw points for groups too small for quartiles.

Bracket Replaychart-bracket-replayA four-state playable knockout bracket — a 16-entrant draw revealed round by round with seed-aware upset chips, structural feed validation and a champion cell that fills at the end.

Break Point Ledgerchart-break-point-ledgerA four-state break-point ledger for a tennis match — one track bar per player per set showing chances vs converted with conversion labels, a match totals row and per-bar hover detail.

Chart Bubblechart-bubbleA 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.

Bullet Chartchart-bulletA four-state bullet chart: one row per KPI with its own scale, a measure bar against a target tick and qualitative bands, plus clamped off-scale markers.

Bump Chartchart-bumpA four-state bump chart: one line per entity on a reversed integer position scale, competition ranking for ties, edge labels at both ends, and a broken line wherever an entity is off the board.

Chart Burndownchart-burndownA 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.

Calendar Heatmapchart-calendar-heatmapA 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.

Calibration Curvechart-calibrationA 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.

Candlestick Chartchart-candlestickA four-state OHLC candlestick chart: hollow-up / solid-down bodies, wicks, doji and limit-locked sessions kept visible, and a full-OHLC tooltip.

Chord Diagramchart-chordA 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.

Circle Packingchart-circle-packingA 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.

Climate Stripeschart-climate-stripesOne 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.

Cohort Retention Gridchart-cohort-retentionA triangular cohort-retention table — one row per entry cohort, one column per period since signup, cells that carry both a colour-graded rate and its absolute count, with unobserved periods left blank instead of zeroed.

Combo Chart (Dual Axis)chart-combo-dual-axisA 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.

Confusion Matrixchart-confusion-matrixA 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.

Connected Scatterchart-connected-scatterA 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.

Contact Heightchart-contact-heightA four-state contact-height chart in hand-rolled SVG — one stepped density ridge per wing on a shared centimetre axis, strike-zone tiers cut from the player's own standing height, the 91.4 cm net cord marked, the ideal-window share printed per wing and a call-out when a wing is being struck below the knee too often.

Context Windowchart-context-windowA 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.

Contourchart-contourA 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.

Control Chartchart-controlA four-state SPC control chart that estimates its own limits from the moving range and flags every rule violation with the rule it broke.

Correlogramchart-correlogramA 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.

Cost-Quality Frontierchart-cost-quality-frontierA four-state price/quality plane for a model shortlist — the Pareto frontier drawn through the non-dominated models, dominated ones greyed and told which model beat them, and a movable iso-value line that names the best buy at the reader's own quality-per-dollar exchange rate.

Court Position Ladderchart-court-position-ladderA four-state pickleball position ladder — points grouped by the deepest position reached (baseline, transition, kitchen) with won/lost splits, advance connectors and per-rung win rates.

Court Zone Win Ratechart-court-zone-winrateA four-state tennis court choropleth in hand-rolled SVG — the player's own half split into nine ITF-derived zones tinted diverging around a 50% point win rate, low-sample zones hatched.

Coverage Heat Replaychart-coverage-heat-replayA four-state playable coverage heatmap — presence-time heat accumulates over a scrubbable match clock on an ITF-true half court, with set markers and stable full-match opacity steps.

Cricket Manhattanchart-cricket-manhattanA 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.

Cricket Wagon Wheelchart-cricket-wagon-wheelA 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.

Critical Pathchart-critical-pathA 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.

Cumulative Flow Diagramchart-cumulative-flowA 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.

Cycle Time Scatterchart-cycle-time-scatterA 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.

Data Mixturechart-data-mixtureA 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.

Decision Curve Analysischart-decision-curveA four-state decision curve: net benefit against threshold probability, one line per strategy read against treat-all and treat-none references derived from the prevalence, with the useful threshold range banded and the leading strategy called out wherever you scan.

Dendrogramchart-dendrogramA 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.

Deuce / Ad Splitchart-deuce-ad-splitA four-state deuce-versus-ad court split for one server — the same metrics mirrored around the centre mark, every row drawn as a rate of its own side's whole so two unequal samples compare fairly, mix members apportioned by largest remainder into exactly-filled 100% strips, wide gaps flagged toward the better half, and per-row disclosure for the counts behind each rate.

Difference Area Chartchart-difference-areaA 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.

Donut Chart · Center Statchart-donut-statA four-state donut widget with a center stat and value/percentage legend, driven by one zod contract.

Doubles Formationchart-doubles-formationA four-state doubles serve-formation card in hand-rolled SVG — a real tennis, badminton or pickleball court drawn in metres from the rulebook, a vertical tab list where each formation's row carries its usage share and win rate on one bar, and four role-coloured player markers that glide to the new stance when the formation changes.

Draw Pathchart-draw-pathA four-state draw path — one seed's route round by round with each projected opponent's rating, head-to-head and arrival odds that add to exactly 100, faint branches for whoever could arrive instead, and Elo win chances compounded into a survival bar.

Drawdown (Underwater)chart-drawdownA four-state underwater drawdown chart in plain SVG — percent below the running peak hanging from a zero line, each dip shaded with its trough marked, a labelled max-drawdown call-out, and a recovery read-out that flags what is still under water, all derived from a raw level series.

Drift Monitorchart-drift-monitorA four-state feature-drift board: one threshold-banded strip per feature on a shared PSI/KL scale with the warn and alert rules drawn across every row, the prediction-drift lane on top, the worst offender named with its per-window trend, and a window tab-strip that re-reads the whole card.

Dumbbell Chartchart-dumbbellA 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.

ECDFchart-ecdfA 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.

Elevation Profilechart-elevation-profileA 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.

Elo Ratingschart-elo-ratingsA four-state arena ratings card: one line per model with a confidence band derived from its battle count, releases annotated with the rating move they produced, a standings ladder that flags statistically tied neighbours, and a pairwise win-rate matrix that doubles as the keyboard-navigable control surface.

Embedding Projectionchart-embedding-projectionA 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 cluster-versus-label cross-tab apportioned to exactly 100, and a derived caveat naming the groups whose between-blob distances carry no meaning.

Error Barschart-error-barsA 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.

Eval Leaderboardchart-eval-leaderboardA model × benchmark leaderboard: every column normalised in its own direction with the raw score printed and the per-column best marked, rank with movement arrows against the previous snapshot, and a weighted index whose whole-percent weights are apportioned by largest remainder and always total 100.

Event Timelinechart-event-timelineA 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.

Fatigue and Freshnesschart-fatigue-freshnessA four-state performance-management chart (CTL/ATL/TSB) in hand-rolled SVG — fitness and fatigue as slow and fast exponential averages of daily training stress, form shaded around zero with separate fresh and fatigued fills, race-day markers through both panes, and a full pointer-plus-keyboard day readout.

Focus Timechart-focus-timeA 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.

Forest Plotchart-forest-plotA four-state meta-analysis forest plot in hand-rolled SVG — weight-sized squares with CI whiskers per study against a vertical null line, a pooled summary diamond, log or linear axis, and disclosed repair of dirty extraction data.

Form Guidechart-form-guideA four-state team form guide that ranks teams by points, with last-N W/D/L result chips, a hand-rolled rolling points-per-game sparkline on a fixed shared scale, and season totals per row.

Front Wall Targetschart-front-wall-targetsA four-state squash front-wall map in hand-rolled SVG — the wall face with WSF tin, service and out lines, strikes dotted by shot type in color plus shape, tin and out hits hollow.

Funnel Chartchart-funnelA four-state conversion funnel: tapering bands with a minimum width, plus per-stage counts, step conversion and cumulative conversion.

Funnel Plotchart-funnel-plotA 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.

Gait Cycle Polarchart-gait-cycleA four-state polar phase chart of one cyclic movement in hand-rolled SVG — left and right drawn as closed loops around 0–100% of the cycle with the gap between them shaded, phase sectors labelled at the rim, and an asymmetry index printed signed as well as absolute.

Chart Ganttchart-ganttA 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.

Gauge Chartchart-gaugeA four-state needle dial that reads one metric against contract-driven threshold bands, with explicit boundary attribution and an out-of-range caret.

GPU Utilizationchart-gpu-utilizationA four-state cluster-utilisation card: a device-by-time SM occupancy strip, one memory line per device group read against the HBM ceiling, and idle stalls drawn as selectable bubbles sized by their duration, with the idle share, the longest stall and a wall-clock budget totalling exactly 100% all derived in-component.

Head-to-Head Historychart-h2h-historyA four-state head-to-head rivalry ledger — one row per meeting on a center-spine timeline with the score on the winner's side, surface chips in fixed colors, and a running tally with per-surface splits.

Heatmap Matrixchart-heatmap-matrixA rows × columns value grid with sequential and diverging colour scales — the diverging arms stay symmetric around the centre, the domain is fixable so two grids stay comparable, and missing values never render as zero.

Hexbin Density Plotchart-hexbinA 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.

Histogramchart-histogramA four-state distribution chart that bins raw values itself — auto / fixed-count / fixed-width bins with optional percentile reference lines.

Hockey Rink Shotschart-hockey-rink-shotsA 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.

Horizonchart-horizonA 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.

Heart Rate Zoneschart-hr-zonesA 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.

HRV Frequency Spectrumchart-hrv-spectrumA four-state HRV frequency-domain card in plain SVG — the power spectral density drawn as an area, cut at the exact VLF / LF / HF edges and integrated by the trapezoid rule into each band's absolute power and share, with an LF:HF readout, a normalised-units toggle, and the power that falls in no band drawn bare and counted out loud.

Iciclechart-icicleA 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.

Kitchen Dink Mapchart-kitchen-dink-mapA four-state pickleball dink map in hand-rolled SVG — the opponent's kitchen drawn from USA Pickleball dimensions, dinks dotted by outcome (in / too deep / net / wide) with per-outcome shares.

Lactate Threshold Curvechart-lactate-curveA four-state blood-lactate step test in plain SVG — a monotone curve through the measured stages, LT1 and LT2 as labelled vertical guides, the three training zones derived from those two intensities and shaded, and an optional heart-rate line on its own right axis.

Learning Curvechart-learning-curveA four-state learning curve in plain SVG — training and validation score against training-set size, each inside a ±1 SD band the component computes from the raw per-fold scores, with the converged gap bracketed on the plot and classified as high variance, still learning, high bias or converged against a target line.

Legend Togglechart-legend-toggleA 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.

Lift Curvechart-lift-curveA 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 Divergingchart-likert-divergingA 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.

Line Call Reviewchart-line-call-reviewA challenge ledger that plots every line-call review by the millimetres between ball and paint — both drawn at real scale — emphasising overturned calls, and tracking each player's per-set allowance spent against what is still in hand.

Multi-Series Line Chartchart-line-multiA four-state multi-series line chart whose shared crosshair reads every series at the hovered x, ranked by value, with null gaps left broken.

Lollipop Chartchart-lollipopA 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.

Marginal Histogramchart-marginal-histogramA four-state scatter plot with a binned distribution along each axis — three regions on one shared, pixel-aligned coordinate system, linked by hover.

Marimekko Chartchart-marimekkoA 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.

Market Depthchart-market-depthA 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.

Match Stats Mirrorchart-match-stats-mirrorA four-state broadcast-style match stats panel — mirrored bars for two players around a centered label column, count rows split by share and percent rows on a 0-100 half scale.

Match Workloadchart-match-workloadA four-state card for the physical cost of one match: distance and direction changes per set as paired bars on independent scales, a cumulative distance lane, and a tabbed per-set panel with work-to-rest and the average-to-peak movement speed range.

Milestone Healthchart-milestone-healthA 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.

Point Momentum Runchart-momentum-runA four-state point-by-point tennis momentum strip in hand-rolled SVG — one tick per point above or below the centre line, consecutive points by the same player merged into run blocks whose width is the streak length, break points drawn as taller ticks, breaks of serve as capped full-height hairlines, set dividers with a derived game score under each set, and the longest run per player printed.

Movement Trailchart-movement-trailA four-state playable movement replay — one player's tracked path on an ITF-true half court with recency-faded trail, live distance and speed readouts, play/scrub/speed controls.

Net Clearancechart-net-clearanceA four-state tennis net-clearance chart in hand-rolled SVG: a side elevation with the net drawn to scale at the left, every tracked shot one mark placed by the height it passed the cord against the depth it landed, the coached clearance window banded, netted balls stacked on the net in the destructive token, median crosshairs, a forehand/backhand filter and a screen-reader depth-zone table.

Net Pointschart-net-pointsA four-state tennis net-points ledger — one 100% stacked outcome bar per approach type (won at net / passed / lobbed / error) with largest-remainder shares, per-group success rates and a totals bar.

Network Forcechart-network-forceA four-state force-directed relationship graph in plain SVG — a hand-written repulsion, spring and gravity simulation that converges and then stops, draggable nodes that anchor where you drop them, colour by group or by degree, and hover to light a node’s neighbours.

OKR Treechart-okr-treeA 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.

Pacing Strategychart-pacing-strategyA four-state pacing chart for one athlete against a plan — diverging bars of the seconds each split banked or lost around a target baseline, the cumulative banked time overlaid on a right axis whose zero shares a row with it, and the finish read against the target.

Padel Wall Playchart-padel-wall-playA four-state padel wall-play ledger — direct, back-wall, side-wall and double-wall rows sized by shot count and split won vs lost, with usage shares and token-stroke bounce glyphs.

Parallel Coordinateschart-parallel-coordinatesA 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.

Pareto Chartchart-paretoA 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.

Partial Dependence + ICEchart-partial-dependenceA four-state partial dependence plot drawn over the ICE bundle it is the average of — one faint line per instance under the bold mean, a centred (c-ICE) 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 how much training data supports each reading.

Partner Chemistrychart-partner-chemistryA 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 minimum-match bar hatched out of the colour ramp and the verdict, each player's own average on the diagonal to read chemistry against, a per-player lens on the row headers, and a load strip whose largest-remainder widths always add to exactly 100%.

Pass Networkchart-pass-networkA four-state soccer pass network on a hand-rolled SVG pitch — players at their average positions sized by ball touches with jersey numbers inside, passing links drawn only above a count threshold, and hover or focus to light one player's connections while the rest dim.

Percentile Bandschart-percentile-bandsA 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.

Pictogramchart-pictogramA 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.

Pitch Heatmapchart-pitch-heatmapA four-state soccer pitch touch-density heatmap in hand-rolled SVG — full pitch markings in border tokens, a zone grid shaded with one chart token at stepped opacity, a printed intensity legend and a direction-of-play arrow.

Player Percentile Pizzachart-player-pizzaA four-state scouting percentile pizza in hand-rolled SVG — one wedge per stat with radius as cohort percentile rank, wedges grouped and coloured by skill category, quartile guide rings, a rank badge at each tip, and keyboard-walkable slices with a shared readout.

Poincaré Plot (HRV)chart-poincare-plotA four-state Poincaré return map for heart-rate variability that derives SD1, SD2 and their ratio from the raw RR series in the 45°-rotated frame, draws the fitted one-SD ellipse about the cloud's own centroid on a forced-square equal-scale plot, and forms pairs only from beats the recording's clock agrees are successive.

Point Leveragechart-point-leverageA four-state point-leverage scatter in hand-rolled SVG — every point of a match plotted by the win-probability swing it could produce against match time, priced either by a supplied win-probability model or by a standard table keyed by game and set score, with a draggable high-leverage line, the biggest points ringed and labelled with their score, and each player's conversion above the line.

Points Racechart-points-raceA four-state playable pickleball points race — two staircase lines race to 11 under side-out or rally scoring derived from raw rally winners, with leader tinting, side-out ticks and game-point marks.

Polar Area Chartchart-polar-areaA 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.

Power Curvechart-power-curveA four-state cycling mean-maximal power curve on a log time axis — current period vs all-time best in two chart tokens, an optional dashed critical-power asymptote, and a pointer/keyboard scan that reads watts at any duration.

Precision-Recall Curvechart-pr-curveA four-state precision-recall card in plain SVG — one curve per model with AUC-PR in the legend, a dashed no-skill baseline at the prevalence, and optional muted iso-F1 guide arcs.

Pressure Pointschart-pressure-pointsA four-state pressure-points chart — win rate on break points, game points, deuce and tiebreaks as lollipops anchored to the player's overall baseline, low-sample situations rendered hollow.

Project Progresschart-project-progressA 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.

Punchcardchart-punchcardA 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.

Population Pyramidchart-pyramidA 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.

Q-Q Plotchart-qq-plotA 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.

Quantile Dot Plotchart-quantile-dot-plotA four-state quantile dot plot that turns a predictive distribution into countable outcomes — N equal-probability dots Wilkinson-binned into provably non-overlapping columns, an optional threshold that splits them, and both the counted share and the distribution's own probability reported side by side.

Race Splitschart-race-splitsA four-state race-splits spaghetti chart in plain SVG — every athlete's cumulative gap to the split leader against a zero baseline, direct-labelled line ends, lead changes and DNFs disclosed, and every split keyboard-reachable.

Radar Comparison Chartchart-radar-compareA four-state radar chart comparing two or three subjects across mixed-unit dimensions: each spoke is normalized 0-100 while the tooltip keeps the raw values.

Radial Bar Chartchart-radial-barConcentric 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.

Radial Progress Chartchart-radial-progressA four-state radial progress card: one concentric ring per metric against its own target, a summary number in the hole, and over-target rings capped at one lap with truncation marks instead of drawing through.

Raincloud Plotchart-raincloudA 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.

Rally Elevation Replaychart-rally-elevation-replayA four-state playable badminton rally replay — the shuttle tweens arc by arc across a BWF-true side elevation, stroke types in fixed colors and dashes, past arcs fading to muted trails.

Rally Length Outcomechart-rally-length-outcomeA four-state rally-length chart in hand-rolled SVG — points banded by shot count (pre-aggregated or binned from raw per-point shot counts), each band a bar split into points won and lost on a volume scale, the band's win rate as a dot on a fixed 0–100% scale sharing the same gridlines, the busiest band called out and a one-line verdict naming where points are won and leaked.

Rally Pattern Treechart-rally-pattern-treeA four-state rally pattern tree drawn as an icicle from the serve down — each row is the next shot, each branch is as wide as the rallies that took it and tinted by the win rate down it, with everything under the sample cut pruned and its share stated.

Rally Replaychart-rally-replayA four-state playable tennis rally replay in hand-rolled SVG — the ball tweens shot by shot across an ITF-true court with persisting bounce trails, play/pause, scrubber and speed control.

Range Area Chartchart-range-areaA 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.

Regression Scatterchart-regression-scatterA 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.

Release Readinesschart-release-readinessA 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.

Renkochart-renkoA 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.

Retrieval Recall@kchart-retrieval-recallA four-state RAG retrieval card: recall@k stacked over precision@k on one shared log-k axis, one line per retriever, with the shipped operating k marked and any measured k inspectable, an MRR@k readout, the per-query token spend of the cut, and a coverage bar whose percentages always total exactly 100.

Return Depthchart-return-depthA four-state tennis return-of-serve chart in hand-rolled SVG — returns grouped into depth bands laid out proportionally to real court metres, one bar per serve answered, the points-won rate per band overlaid on a fixed 0-100% axis, an average-depth caret placed at its own metre value over a scale court strip, and a written verdict on whether depth converts.

Return Positionchart-return-positionA four-state tennis return-position map in hand-rolled SVG — where the returner takes first and second serves relative to the baseline, with per-serve median-depth rules and inside/behind shares.

Review Turnaroundchart-review-turnaroundA 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.

Ridgeline Plotchart-ridgelineA 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.

Roadmap Swimlaneschart-roadmap-swimlanesA 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.

ROC Curvechart-rocA 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.

Rolling Averagechart-rolling-averageA 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.

Sankey Diagramchart-sankeyA four-state Sankey diagram that checks the books before it draws: flow conservation per node, cycle detection, longest-path layering, cross-layer ribbons and a minimum ribbon width, with an sr-only flow table.

Scaling Lawchart-scaling-lawA four-state log-log scaling plot that fits L = E + A·C^(−α) to the runs it is given — one power law per model family, with the exponent, the irreducible loss and R² printed, the stretch past the largest run hatched and projected, and compute shares apportioned so every filter state totals exactly 100.

Chart Scatter Matrixchart-scatter-matrixA 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.

Scatter Chart (Quadrants)chart-scatter-quadrantA four-state decision-matrix scatter chart: median or fixed crosshair, labelled tinted quadrants, collision fan-out and a screen-reader data table.

Score Tickerchart-score-tickerA four-state playable tennis scoreboard — derives games, sets, deuce and tiebreaks from a raw point feed and replays them point by point over a growing momentum strip with derived break/set/match point marks.

Season Resultschart-season-resultsA four-state season results strip — one surface-colored column per event on a fixed R64-to-W round ladder, title rings, month ticks and a win-loss-titles header.

Seasonalitychart-seasonalityA 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.

Serve Miss Mapchart-serve-miss-mapA four-state tennis serve fault map in hand-rolled SVG — both service boxes with a net band on their front edge and net / wide / long miss channels outside the lines, each shaded on one shared count ladder and labelled with its count and share, first serves and double faults in separate panels.

Serve Placement Zoneschart-serve-placementA four-state tennis serve placement map in hand-rolled SVG — the receiver's half court with tramlines, service line and centre line in border tokens, both service boxes cut into wide/body/T zones shaded by serve volume with one chart token at stepped opacity, each zone labelled with its count and win rate, and a hover or keyboard tooltip on every zone.

Serve +1 Patternschart-serve-plus-oneA four-state tennis serve +1 chart in hand-rolled SVG — serve target, then the +1 wing and direction, then won or lost, as three stacked node rows joined by bands whose width is points and whose colour is win rate against a benchmark, with a deuce/ad radiogroup, largest-remainder shares and the most-used and most-effective pattern named.

Serve Sequence Replaychart-serve-sequence-replayA four-state playable serve-placement build-up — serves land one by one into the service boxes with running in%, ace and fault counters recomputed at every scrub position.

Serve Speed Bandschart-serve-speed-bandsA four-state serve-speed distribution — first and second serves binned into fixed-width bands as overlaid stepped histograms with per-serve median ticks and a crosshair tooltip.

Serve Speed Replaychart-serve-speed-replayA four-state playable serve-speed replay — a dial needle kicks serve by serve while a band histogram builds beside it, linked by serve-number colors, with fastest and per-serve averages at every scrub point.

Serve Spin Mixchart-serve-spin-mixA four-state table-tennis serve-spin rose in hand-rolled SVG — five spin families at fixed compass anchors, wedge area true to usage share, win rate printed at each wedge tip.

Shot Direction Flowchart-shot-direction-flowA four-state tennis shot-direction map in hand-rolled SVG — curved arrows run from three contact corridors on the player's baseline to three landing corridors across the net, thickness carrying the shot count and a diverging chart-token ramp carrying each pattern's win rate against the player's own average, with the most-used and the most-effective line named.

Shot Mapchart-shot-mapA four-state basketball half-court shot chart in hand-rolled SVG — NBA court lines in border/muted tokens, made shots filled with chart-1 and misses hollow, a per-shot hover tooltip with keyboard walk, and an FG% header derived from the same shots array.

Speed vs Spinchart-shot-speed-spinA four-state tennis shot scatter in hand-rolled SVG: every tracked shot plotted at its own measured speed and spin, coloured by stroke from a fixed chart token, cut into four playing-style quadrants by the player's own median crosshair, with per-stroke median crosses, outcome-shaped marks and a legend of aria-pressed toggles that re-centres the split.

Shot Tempochart-shot-tempoA four-state rally-rhythm strip: the time between consecutive contacts mirrored around a centre line with one player per side, a rolling tempo band, flagged tempo breaks credited to the ball that bought the time, and a per-player tempo distribution across every rally.

Shuttle Landing Mapchart-shuttle-landingA four-state badminton landing map in hand-rolled SVG — the opponent's half drawn from BWF dimensions, shots dotted by type in color plus shape, out shots hollow, with front/mid/rear shares.

Shuttle Speed Decaychart-shuttle-speed-decayA four-state badminton speed-decay chart in hand-rolled SVG — one speed-against-distance curve per shot type on an axis that follows the longest flight, each curve marked where the receiver's racket meets it (or where it dies short of the rule), with flight time integrated from the curve itself, a draggable distance cursor exposed as a slider, and a shot-mix column apportioned by largest remainder.

Shuttle Trajectorychart-shuttle-trajectoryA four-state badminton flight-path chart in hand-rolled SVG — a side elevation with median arc and p25-p75 band per stroke type over a to-scale net, landing marks on the floor line.

Side-Out Scoringchart-side-out-scoringA four-state pickleball side-out strip — every service turn as a segment sized by points scored, colored by team and shaded by server number, with running-score marks and per-team summaries.

Sleep Stageschart-sleep-stagesA four-state sleep hypnogram with stage-colored segments stepping across fixed Awake/REM/Light/Deep lanes, plus time-in-stage summary bars with percentages, driven by one zod contract.

Slope Chartchart-slopeA four-state slope chart for two points in time: labels at both ends, a pooling avoidance pass that never moves the points, leader lines back to the real endpoint, and a same-unit refusal.

Small Multipleschart-small-multiplesA 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.

Soccer Pass Networkchart-soccer-pass-networkA 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 Shot Qualitychart-soccer-shot-qualityA 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.

Soccer Territory Flowchart-soccer-territory-flowA 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 xG Racechart-soccer-xg-raceA 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.

Spiral Timelinechart-spiralTime 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.

Sprint Force-Velocity Profilechart-sprint-profileA 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 labelled F0 and V0 intercepts, and the power parabola peaking at the optimal velocity on its own right axis.

Sprint Velocitychart-sprint-velocityA 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.

100% Stacked Bar Chartchart-stacked-bar-pctA four-state 100% stacked bar chart with largest-remainder rounding, so every bar's percentages add up to exactly 100.

Stamina Decaychart-stamina-decayA four-state stamina card in hand-rolled SVG — several match metrics stacked as small multiples over one shared elapsed-minute axis, each read against its own opening-window baseline, with a reader-chosen cut (end of set 1, 2, …) quantifying the drop-off in the metric's own unit and as a share of that baseline, a stated 1.5% noise floor before anything is called decay, and a minutes ledger apportioned by largest remainder.

Step Line Chartchart-step-lineA four-state step chart for discrete state over time — values hold flat then jump, with three step alignments, change markers and a change table.

Streamgraphchart-streamA 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.

Sunburst Chartchart-sunburstA 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.

Surface Splitschart-surface-splitsA four-state surface-by-surface record card — one win-loss bar per surface with paired service and return sub-bars, every lane on a 0-100% track carrying a tick at the player's own overall level, largest-remainder shares, and the strongest and weakest surfaces called out above a match floor.

Survival Curvechart-survivalA 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.

T Battle Replaychart-t-battle-replayA four-state playable squash T battle — two tracked players move on a WSF-true floor plan while T-control time accrues into a live share bar, with rally-end ticks on the scrubber.

T Dominancechart-t-dominanceA four-state squash T-control chart — one mirrored bar per game split at each player's share of rally time on the T against a 50% center rule, with game scores and a match row.

Team Availabilitychart-team-availabilityA 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.

Court Coveragechart-tennis-court-coverageA four-state tennis court-coverage map in hand-rolled SVG — the player's own half with tracked positions binned into a dwell-density field on a grid cut from the court's own lines, the weighted average position and the median recovery spot marked at their exact metre coordinates, a signed baseline-distance headline, a left/right balance bar and a keyboard-driven depth-band filter.

Groundstroke Depth Zoneschart-tennis-depth-zonesA four-state tennis groundstroke landing map in hand-rolled SVG — the opponent's half drawn in ITF metres and cut into short / mid-court / deep bands across the left, middle and right thirds, every zone shaded by volume with one chart token at stepped opacity and labelled with its count and share, headline reads for the percentage landing beyond the service box and in the middle third, raw landings drawn as dots at their own coordinates, and a forehand / backhand filter that re-derives every number.

Match Score Gridchart-tennis-score-gridA four-state tennis scoreboard rendered as a chart in plain HTML — one row per set and one cell per game in the order played, each cell's upper/lower half marking who won it while an outline means the serve was held, a solid fill means it was broken and a "TB" tag marks a tiebreak, with set scores (bracketed mini-score included), hold percentages, unfinished sets and retirements all counted from the same games array.

Ternary Plotchart-ternaryA 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.

Third Shot Outcomechart-third-shot-outcomeA four-state pickleball third-shot chart — drop, drive and lob rows pairing usage share with a 100% stacked won/neutral/lost bar, largest-remainder rounded, with per-row win rates.

Tidy Treechart-tidy-treeA 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.

Tiebreak Ledgerchart-tiebreak-ledgerA four-state tiebreak ledger — every tiebreak as a point-by-point strip with the serve above or below a hairline and mini-breaks hatched, plus a selectable scope driving the tiebreak record, serve-hold rates and a largest-remainder split of where the points went.

Tile Grid Mapchart-tile-mapA 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.

Token Latencychart-token-latencyA 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.

Token Usagechart-token-usageA four-state LLM spend card: stacked bars split every period's tokens into input, cached input, output and reasoning, a cost line derived in-component from per-million rates rides a second axis sharing one gridline set, and the cache-hit share plus the money the cache spread saved are called out above it.

Tornado Chartchart-tornadoA 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.

Tournament Schedulechart-tournament-scheduleA four-state order-of-play sheet in CSS grid — courts as columns down a vertical time axis, every match a block as long as its estimate, not-before slots floating dashed at the earliest minute they can start, live matches filling against their estimate, and the double bookings, rest gaps and court-time shares the schedule implies.

Trace Waterfallchart-trace-waterfallA 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.

Training Load ACWRchart-training-loadA four-state acute:chronic workload ratio chart — daily load bars with 7-day acute and 28-day chronic rolling-average lines, and the ACWR on a second axis banded into a 0.8–1.3 sweet spot and a >1.5 high-risk zone, all rolling math computed from raw days inside the component.

Training Runschart-training-runsA four-state training-runs card: loss against optimiser step for several concurrent experiments, each drawn as a debiased EMA over its own faint raw trace, with divergence and restart markers that shade and count the steps a rollback cost, an optional learning-rate schedule on a secondary axis, and a scan that reads every run at the same step and only calls a lead when it clears the step-to-step noise.

Treemapchart-treemapA 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.

UpSet Plotchart-upsetA 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.

Vector Fieldchart-vector-fieldA 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.

Venn Diagramchart-vennAn 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.

Violin Plotchart-violinA 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.

Volleyball Attack Laneschart-volleyball-attack-lanesA 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.

Volleyball Rotation Wheelchart-volleyball-rotation-wheelA 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.

Voronoi Territory Mapchart-voronoiA 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.

Waffle Chartchart-waffleA 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.

Waterfall Chartchart-waterfallA bridge chart of floating bars — derived opening/subtotal/closing anchors, hatched decreases, running-total connectors, slot-aware ticks and real loading/empty/error states.

Win Probabilitychart-win-probabilityA four-state in-game win probability chart in plain SVG — one line around a 50% midline, the band shaded toward whichever side is favoured in that side's chart token, key events pinned to the path as diamonds, and every readout reachable by pointer and keyboard alike.

Wind Rosechart-wind-roseA 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.

Winners vs Errorschart-winners-errorsA four-state tennis winners-and-errors ledger — one diverging bar per shot group with winners running right in a chart token, unforced errors left in the destructive token and forced errors extending the same bar as a solid muted segment, on one shared symmetric scale with a parity tick at each row's unforced count, the winners-per-unforced ratio per group and pooled overall, and the leakiest group called out above a sample floor.

WIP Limitschart-wip-limitsA 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.

Word Cloudchart-word-cloudA four-state word cloud that sizes terms by the square root of their count and packs them along a deterministic spiral, with every word a focusable button and a ranked list for screen readers.

Word Treechart-word-treeA 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.

Workload Balancechart-workload-balanceA 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.

xG Timelinechart-xg-timelineA four-state cumulative expected-goals step chart in plain SVG — two team staircase lines over 0–90+ minutes, emphasized goal dots with minute labels, a dashed half-time rule, and final xG totals in the header row.

Chat Bubblechat-bubbleA single message bubble with role-based alignment and color, an avatar slot, and a bouncing typing indicator for assembling chat message lists.

Chat Checkpointchat-checkpointA 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.

Chat Composerchat-composerA managed chat composer: one send⇄stop button slot, optimistic draft clear with restore-on-failure, AbortSignal handoff, IME-safe Enter and attachments with their own upload lifecycle.

Chat Day Dividerchat-day-dividerA 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.

Chat Importchat-importA 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.

Chat Message Actionschat-message-actionsHold 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.

Chat Mode Pickerchat-mode-pickerThe 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.

Chat Sidebarchat-sidebarA 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 Threadchat-threadA 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.

Chat Windowchat-windowA chat shell in three presentations — inline, docked and modal — with a focus trap, refcounted scroll lock and a resizable dock, that never re-creates the panel when you switch.

Checkbox Groupcheckbox-groupA 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.

Checkbox Treecheckbox-treeA multi-select hierarchical picker: parent↔child cascade with derived indeterminate parents, WAI-ARIA tree keyboard navigation, disabled subtrees, and search that auto-expands the path to every hit.

Chip Scrollerchip-scrollerA 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.

Choice Cardschoice-cardsA card-shaped radio or checkbox group — icon, title, description and badge per option, with roving-tabindex keyboard selection.

Circuit Boardcircuit-boardA seamlessly tiling PCB backdrop — seeded traces with 45°/90° corners, pads, vias and component footprints, plus an optional signal pulse.

Citation Chipcitation-chipThe 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.

Citation Listcitation-listThe numbered reference list under an AI answer — numbering derived the same way Citation Chip derives it so the markers and the list always agree, repeated sources merged with a citation count, graded trust that never relies on colour, and sources with no usable URL that refuse to become dead links.

Client Onlyclient-onlyRenders its children only after mount — the server and the first hydration render emit an equal-size fallback instead, so browser-only values (local time, localStorage, window) can never cause a hydration mismatch.

Code Blockcode-blockA copyable code panel with its own minimal regex syntax highlighter — line numbers, line highlighting, tabs and a wrap toggle, no external highlighting engine.

Code Inputcode-inputA 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.

Code Tourcode-tourAn annotated code walkthrough — numbered steps that each highlight a line range, show a note beside the code, and scroll the active range into view, with prev/next, a jump list and keyboard stepping.

Color Palettecolor-paletteA 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.

Color Pickercolor-pickerA hex-driven color picker with a saturation/value area, hue and alpha sliders, format-aware text input, swatches, and an optional eyedropper.

Column Pickercolumn-pickerA 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.

Column Profilecolumn-profileA 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.

ComboboxcomboboxA searchable dropdown selector — single or multi-select, grouped, creatable, with keyboard-driven filtering and chip overflow.

Command Palettecommand-paletteA ⌘K-style command palette — portal dialog, fuzzy subsequence search, grouped commands, recent items and full keyboard navigation.

Comment Threadcomment-threadA nested discussion tree — collapsible reply subtrees on a clickable thread line, optimistic voting, inline reply composer with a posting/failed lifecycle, controlled sorting, and a depth cap that hands deep threads off to a permalink.

Commit Cardcommit-cardOne 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.

Comparison Slidercomparison-sliderA draggable before/after comparison slider with clip-path reveal, pointer capture and full keyboard support.

Composer Attachmentscomposer-attachmentsAn attachment strip for a prompt composer — one list rendered as compact chips on the input's top edge or rich preview cards under it, with per-kind statistics, keyboard removal that hands focus to the neighbour, overflow collapse and four data states.

Computer Use Panelcomputer-use-panelA 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.

ConfetticonfettiA DOM-particle celebration burst layer — bump a counter to fire a delta-time normalized confetti burst inside a relative container.

Confidence Meterconfidence-meterA 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.

Confirm Dialogconfirm-dialogOne confirmation dialog for every destructive action — async pending, inline failure and type-to-confirm.

Conflict Resolverconflict-resolverA field-level three-way merge for concurrent edits — base/mine/theirs per field, only the genuinely conflicting fields asked about as radiogroups, bulk fill with per-field override, and a merged record on submit.

Connection Statusconnection-statusAn online / offline / reconnecting bar with an exponential-backoff retry countdown, a manual retry button and SSR-safe browser subscription.

ConstellationconstellationA drifting node network on one canvas — every pair closer than the link threshold is stroked with distance-faded opacity, queried through a spatial grid, with optional pointer attraction.

Content Credentialscontent-credentialsA 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.

Context Attachmentscontext-attachmentsThe context list attached to a conversation — files, links, snippets and selections with their token cost, under a budget meter that spells out reserve + attachments = used and names exactly which entries get dropped when the window overflows.

Context Inspectorcontext-inspectorA 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.

Context Limit Bannercontext-limit-bannerA 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.

Context Menucontext-menuRight-click, long-press or Shift+F10 menu that opens at the pointer — checkboxes, submenus, typeahead, and flipping bounded by the nearest clipping ancestor.

Context Peekcontext-peekThe 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.

Contrast Checkercontrast-checkerA 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.

Conversation Exportconversation-exportAn 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.

Conversation Summaryconversation-summaryA 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.

Conversation Titleconversation-titleAn 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.

Conversation Treeconversation-treeThe 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.

Cookie Consentcookie-consentA bottom-fixed cookie consent card with slide in/out animation that persists the visitor's accept/decline choice to localStorage.

Coordinates Inputcoordinates-inputA 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.

Copy Buttoncopy-buttonA ghost icon or label button that writes text to the clipboard and flashes a timed "Copied" confirmation.

Corner Ribboncorner-ribbonA diagonal corner badge draped over a card — NEW / SALE / POPULAR callouts that wrap any card content.

Cost Breakdowncost-breakdownAn 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.

CountdowncountdownA ticking days/hours/minutes/seconds countdown for launches and promotions, with a one-shot onComplete callback and SSR-safe hydration.

Country Pickercountry-pickerA 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, UN M49 region groups, localised names via Intl.DisplayNames, and a flag emoji that falls back to a code chip on platforms that have none.

Coverflow Carouselcoverflow-carouselA 3D perspective carousel whose covers sit on an arc — the centre faces the viewer while neighbours rotate away into depth with dimming and an optional masked reflection — driven by one continuous position that drag, horizontal wheel and arrow keys all share, with a plain scroll-snap fallback under reduced motion.

Credit Cardcredit-cardA flippable bank card display with a masked number, holder and expiry on the front, magstripe and a hidden CVC placeholder on the back.

Credit Card Formcredit-card-formCard entry with brand-aware grouping and maxLength, a Luhn check, MM/YY with a real expiry rule, blur-time errors, auto-advance and correct cc-* autocomplete — UI only, real payments belong in a PCI-compliant hosted field set.

Criteria Checklistcriteria-checklistA 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.

Cron Inputcron-inputA visual five-field cron builder — presets, hour/minute selects and weekday/month chips write the expression, pasting one parses back into them, with a plain-English summary and the next runs.

CSV Importcsv-importA three-step CSV importer — RFC 4180 parsing (quoted delimiters, embedded newlines, doubled quotes), delimiter and BOM detection, auto-guessed column mapping with duplicate and required-field gates, and a capped preview that reports ragged rows by line number.

Currency Convertercurrency-converterA 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.

Currency Inputcurrency-inputA money field that stays raw while you type and normalizes with Intl.NumberFormat on blur — grouping, fixed decimals, clamping, and a number | null value.

Cursor Trailcursor-trailA canvas pointer wake that samples the cursor once per animation frame and draws it as a tapering ribbon, an evenly spaced bead chain or drifting sparks, each node dissolving on its own lifetime.

Custom Cursorcustom-cursorA container-scoped pointer replacement: a spring-driven dot that follows the hand and opens into a difference-blended disc over interactive targets, hiding the native arrow only while the pointer is inside and never drawing on coarse pointers or under reduced motion.

Custom Instructionscustom-instructionsAn 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.

Dashboard Griddashboard-gridA 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.

Data Controlsdata-controlsAn 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.

Data Diff Tabledata-diff-tableA 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.

Data Grid Editabledata-grid-editableA spreadsheet-style editable data grid — per-column cell editors, roving-tabindex keyboard navigation, per-cell validation, async commits that show pending and roll back, TSV paste, sticky header and first column, plus real loading/empty/error states.

Data Listdata-listA 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.

Data Tabledata-tableA contract-driven interactive data table — controlled sort, tri-state row selection, sticky header, row actions, and real loading/empty/error states.

Dataset Browserdataset-browserA 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.

Date Pickerdate-pickerA typeable single-date field with a calendar panel — Intl-driven formatting and parsing, a complete keyboard grid, and refusals that keep what you typed.

Date Range Pickerdate-range-pickerA two-month range calendar with preset shortcuts (Today, Last 7/30 days, this/last month), hover preview and no date-library dependency.

Datetime Pickerdatetime-pickerA 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.

Density Toggledensity-toggleA compact / comfortable / spacious switch that publishes seven --density-* CSS variables to a whole subtree, with a 24px target floor the compact step cannot cross.

Dependency Listdependency-listAn auditable dependency tree — real semver comparison, graded staleness, ordered CVE severities, licence obligation classes, and the import chain behind every transitive package.

Description Listdescription-listA semantic key-value list for order details, profile echoes, and settings summaries, in a divided-rows or panel-grid layout.

Detection Overlaydetection-overlayObject-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.

Device Framedevice-frameA CSS-only phone or browser shell — drop a screenshot or a live component into a mockup for marketing pages, no iframe.

Dictation Buttondictation-buttonA 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.

Diff Confirmdiff-confirmA 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.

Diff Viewerdiff-viewerA GitHub-style text diff — unified or side-by-side, own LCS line matching with word-level highlights, foldable context, a pinned line-number gutter and guards for huge inputs.

Dimension Inputdimension-inputA paired width × height field with an aspect-ratio lock that freezes the ratio when you lock it, clamps both sides against min/max, and ships swap plus size/ratio presets.

DismissibledismissibleA close button for any content that remembers it was closed — for this tab, forever, or until the copy is versioned up — with an undo window before anything is written.

DockdockA macOS-style dock with proximity-based icon magnification, spring physics and hover label bubbles.

Dot Globedot-globeA 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.

Double Tap Heartdouble-tap-heartA media surface that likes on double tap, bursting a mark where the thumb landed while the first tap is left to the control underneath.

Download Buttondownload-buttonA download CTA that fills like a liquid gauge as the transfer advances, then settles into a checked or retryable state.

Download Rowdownload-rowA 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.

Drag Reorder Listdrag-reorder-listA 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.

DrawerdrawerA gesture-driven drawer for any edge — snap points, velocity-based settling, scroll-aware pull-to-close, focus trap and refcounted scroll lock. No vaul.

Drop Capdrop-capThe 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.

Dropdown Menudropdown-menuA generic dropdown menu — any trigger, structured rows (commands, checkboxes, radio groups, submenus), typeahead and clipping-aware placement.

DropzonedropzoneA native drag-and-drop file picker with accept/size/count validation, inline rejection reasons and a removable file list.

Duration Inputduration-inputA duration field normalized to seconds — carrying h/m/s spinbutton segments (type 90 minutes, get 1h 30m) or a free-text mode that parses "1h30", "90m" and "1:30".

Dynamic Islanddynamic-islandA notch-anchored live-activity pill that morphs between idle, compact, minimal and expanded presentations.

Edit Messageedit-messageIn-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.

Effect Buttoneffect-buttonOne button, seven visual effects (shimmer, shine, spotlight, glow, gradient, glass, ripple) as cva variants.

Elastic Drag Cardelastic-drag-cardA 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.

Embedding Mapembedding-mapA 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.

Emoji Pickeremoji-pickerA full emoji panel — 554 built-in emoji in 8 categories with bilingual search, skin tones, recents and a windowed arrow-key grid, inline or portalled beside a trigger.

Emoji Reactionemoji-reactionA reaction bar of tallied emoji chips plus a keyboard-navigable picker for adding one more.

Empty Stateempty-stateA centered empty-state panel with an icon chip, title, description and up to two actions — link actions render RSC-safe, onClick actions need a client boundary.

Env Diffenv-diffA 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.

Environment Switcherenvironment-switcherA four-state environment switcher that keeps the current deploy target visible with its tier tint, region and version, compares versions as real semver so a stale preview says so, states why blocked environments are out of reach, and gates guarded targets behind a confirm that can demand the environment name typed back.

Environment Variablesenvironment-variablesReview, reveal, and copy environment variables with sensitive values masked by default.

EqualizerequalizerA multi-band graphic equalizer — rotated native faders, a Catmull-Rom response curve through the handles, presets that glide, and a typed gain map out.

Error Boundaryerror-boundaryA 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.

Error Stateerror-stateAn error panel — inline/card/page density, safe unknown-error extraction, collapsible stack trace, a copyable error code and a real retry pending state.

Eval Scorecardeval-scorecardOne 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.

Event Cardevent-cardAn event card whose calendar tear-off survives cross-day, cross-month and cross-year spans, formats every instant in an explicit IANA zone, and drives an ordered capacity machine where ended outranks the seat count.

Exit Intentexit-intentA 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.

Export Buttonexport-buttonAn 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.

External Linkexternal-linkAn anchor that works out whether an href leaves your site — origin declared as a prop so server and client agree — then adds an icon, the rel=noopener patch and a screen-reader new-window hint to the ones that do, and nothing at all to the ones that do not.

FAB Menufab-menuA floating action button that fans a labelled column of secondary actions upward, with staggered entry and focus handling.

Fallback Noticefallback-noticeAn 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.

Feature Flag Listfeature-flag-listA 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, expandable targeting rules, and real loading/empty/error states.

Feature Flag Rolloutfeature-flag-rolloutThe rollout control for a single feature flag — a MurmurHash3 percentage gate with its estimated reach, ordered first-match-wins targeting rules, a live evaluation preview that names the deciding rule or hash bucket, and the drift between the configured split and what the service reports it is actually serving.

Feature Tablefeature-tableA contract-driven feature comparison matrix across plans or versions, rendered as a real semantic table with four data states.

Feedback Widgetfeedback-widgetA corner or inline feedback launcher with a sentiment radiogroup, category chips, message and optional email, driven by an idle → submitting → success → error submit state machine.

Few Shot Editorfew-shot-editorA 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.

File Change Listfile-change-listThe 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.

File Iconfile-iconAn 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.

File Previewfile-previewA preview card for any single file — image/video thumbnails, a working audio play bar, type icons with MIME-or-extension metadata, card/row/tile variants and leak-free object URLs.

File Treefile-treeAn accessible hierarchical file/folder tree with WAI-ARIA-nested treeitem/group markup, roving tabindex, and grid-rows expand animation.

File Upload Listfile-upload-listAn upload queue with per-file progress, pause/resume, retry, cancel and remove, a byte-weighted batch summary and throttled screen-reader announcements.

Filter Barfilter-barComposable filter bar for a table toolbar: an add-filter menu, one editable chip per active filter with its own remove button, portalled editors for select / multiselect / date-range / text / boolean, wrap-or-collapse overflow and Clear all.

Filter Chipsfilter-chipsA 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.

Filter Sheetfilter-sheetA bottom-edge filter panel with grouped facets, a staged draft, a live result count and an Apply bar padded clear of the home indicator.

Finetune Statusfinetune-statusOne 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.

Finger Draw Annotatefinger-draw-annotateMark 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.

FirefliesfirefliesWandering 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 instead of a per-frame gradient.

Fit Textfit-textOne 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.

Flame Graphflame-graphA four-state profiling flame graph — bar width is time, rows are stack depth, click any bar to zoom with a breadcrumb back, and a search that highlights matches across the whole profile with a matched-time readout.

Flickering Gridflickering-gridRender a responsive canvas grid with subtle, reduced-motion-aware flickering cells.

Flip Cardflip-cardA two-faced container that turns over on hover or click to swap a summary for its details.

Floating Navbarfloating-navbarA header that hides on scroll-down and reappears on scroll-up, giving long reading surfaces the vertical space back without losing the nav.

Follow Buttonfollow-buttonA 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.

Font Pickerfont-pickerA 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.

Form Fieldform-fieldA label + control wrapper that injects id, aria-describedby, invalid/required state, disabled and a character counter into whatever control you nest inside it.

Form Wizardform-wizardA multi-step form state machine — per-step validation gates (sync or async), focus moved to the first bad field, and a self-contained progress rail.

GalaxygalaxyA 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.

Gantt Chartgantt-chartA project schedule chart — sticky task column, adaptive day/week/month axis, progress-filled bars, milestone diamonds, finish-to-start dependency elbows, collapsible groups, and real loading/empty/error states.

Git Graphgit-graphA commit-DAG viewer with reusable swimlanes — topological ordering, lane reuse after merges, orphan roots, shallow-history tails, copyable full hashes and four data states.

Glitch Textglitch-textCyberpunk glitch headline — two pseudo-element copies tear the text into slices and slide, in pure CSS, dead still under reduced motion.

Cursor Glow Cardglow-cardA card whose surface and border light up around the pointer, with an optional group where the hovered card stays lit and its siblings dim.

Gradient Border Buttongradient-border-buttonA rotating conic-gradient ring around a solid core, so the border carries the colour and the label keeps full contrast.

Gradient Meshgradient-meshA full-bleed mesh-gradient wash — oversized blurred token blobs drifting past each other as an absolute background layer.

Gradient Pickergradient-pickerA CSS gradient editor: draggable stop rail with double-click insert, keyboard-reachable stops, an angle dial, and a read-only linear/radial/conic CSS string with copy.

Gradient Textgradient-textPolymorphic heading text painted with a token-driven gradient, optionally looping — no hex codes anywhere.

Grid Dotsgrid-dotsA zero-JS grid, dots or cross pattern background container with an optional radial fade mask — a pure server component.

Guardrail Traceguardrail-traceThe 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.

Health Check Listhealth-check-listA 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.

Hex Gridhex-gridA seamlessly tiling honeycomb backdrop — outlined, tinted or vertex-dotted, with an optional edge fade and a few seeded cells breathing on CSS alone.

Hexdump Viewerhexdump-viewerA 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.

Highlight Markerhighlight-markerHighlighter, underline or hand-drawn circle that wipes across a phrase when it scrolls into view.

Hold to Confirmhold-to-confirmA press-and-hold confirmation button — hold past a charge bar to fire an action, guarding destructive or irreversible operations against accidental taps.

Hold To Talkhold-to-talkA 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.

Holographic Foil Cardholo-foil-cardA card surface that behaves like trading-card holo stock — an iridescent gradient sheet, a fine foil grating and a specular highlight all re-aimed from the pointer, with an optional tilt.

Hover Cardhover-cardA 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.

Human Handoffhuman-handoffA bot-to-human escalation card that walks one ticket through request, queue, connecting, connected and an offline leave-your-address fallback.

Icon Pickericon-pickerA 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.

Image Accordionimage-accordionA row of tall image slices where the open panel widens to reveal its caption and link while the rest compress to labelled slivers, folding into a vertical stack on narrow screens.

Image Annotationimage-annotationClick-to-pin image annotation — numbered draggable markers with notes, stored as percentages of the image so they never drift when it resizes.

Image Cropperimage-cropperA drag/zoom/rotate image cropper with pointer + keyboard control that exports a real cropped Blob via canvas.

Image Generationimage-generationAn 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.

Image Placeholderimage-placeholderA progressive image loader — skeleton, blur-up or color placeholder, a 400ms cross-fade on load and an error panel when the URL fails.

Image Zoomimage-zoomA clickable thumbnail that opens a full-screen lightbox with a fade + scale transition, Esc/backdrop/click-to-close, and focus management.

Impersonation Bannerimpersonation-bannerThe bar support staff sees while acting as a customer — whose account this is, who is inside it, whether the grant may write, a live countdown to the automatic cut-off, and an exit that is never blocked.

Inbox Listinbox-listA 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.

Indexing Progressindexing-progressAn 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.

Infinite Scrollinfinite-scrollA 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.

InkinkDrops of ink opening into water on one canvas — ragged fronts that expand, thin and dissolve, with every overlap deepening like ink on paper.

Inline Completioninline-completionGhost 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.

Inline Editinline-editClick-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.

Inline Error Summaryinline-error-summaryA top-of-form error summary whose rows scroll to and focus the field they name — persistent polite live region, self-focusing panel, onNavigate hook for collapsed fields and a maxVisible overflow count.

Inline Picker Rowinline-picker-rowA 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.

Input Groupinput-groupA 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.

Install PWA Buttoninstall-pwa-buttonAn install CTA that catches beforeinstallprompt at module scope so a late-mounting button still gets it, and renders nothing at all when the app is installed, was refused recently, or cannot be installed here.

Interpreter Outputinterpreter-outputThe 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.

Invoice Summaryinvoice-summaryAn invoice / order total block — line items (quantity × unit), discounts, taxes with rates, shipping, total and amount due, all in integer minor units, with full and compact variants and four data states.

JSON Diffjson-diffA 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.

JSON Editorjson-editorAn editable JSON textarea with live syntax validation, exact line/column errors marked in a synced gutter, optional schema checking, and format/minify/copy/reset tools.

JSON Viewerjson-viewerA 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.

JWT Decoderjwt-decoderA 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.

Kanban Boardkanban-boardA contract-driven kanban board — dnd-kit drag and drop across and within columns, keyboard-accessible moves with live announcements, WIP limits that block over-filling, per-column scrolling, and real loading/empty/error states.

KbdkbdKeycap and key-combination display — semantic `<kbd>` markup with platform-aware glyphs (mod resolves to ⌘ on mac, Ctrl on windows).

Key Value Editorkey-value-editorAn 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.

Keyboard Accessorykeyboard-accessoryThe 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 Avoiderkeyboard-avoiderA 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.

Keyboard Mapkeyboard-mapA keyboard layout diagram with your app's shortcuts painted onto the caps — platform-correct glyphs and modifier order (⌘ ⌥ vs Ctrl Alt), whole-chord highlighting, and a readable binding list.

Kinetic Headlinekinetic-headlineA fixed headline with one rotating word slot whose width springs to each incoming word, so the rest of the line glides instead of jumping.

Knowledge Pickerknowledge-pickerA 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.

Labeling Queuelabeling-queueA 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.

Language Pickerlanguage-pickerA locale field that lists every language under its own name — 简体中文 beside Chinese (Simplified) — searchable by endonym, English name or BCP 47 tag, with RTL rows rendered in their own direction, optional translation completeness and a browser-language matching ladder.

Latency Breakdownlatency-breakdownPer-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.

Lazy Renderlazy-renderDefers mounting a subtree until it scrolls into view or the browser goes idle, holding its space with an explicitly reserved placeholder height.

LeaderboardleaderboardA ranked standings board — podium tiers, rank-change arrows, a highlighted current-user row with a pinned "your rank" bar, and real loading/empty/error states.

Light Beamslight-beamsAngled shafts of light falling from the top edge, each breathing on its own tempo and fading out before the bottom.

Lightbox Gallerylightbox-galleryA thumbnail grid that opens a full-screen lightbox with arrow navigation, a counter, captions and focus return.

LightninglightningBranching bolts struck at irregular intervals on one canvas - midpoint-displacement channels with recursive forks, a stacked glow, a decaying afterimage and a flash that lifts the whole surface.

Like Buttonlike-buttonA social toggle that fills its icon, bursts a ring of particles and rolls the counter on every tap.

Line Draw on Scrollline-draw-scrollSVG paths that draw themselves as the block scrolls through the viewport — lengths measured with getTotalLength(), dashoffset unwound per path, sequentially or in parallel.

Link Previewlink-previewAn inline link that reveals a hoverable preview card — thumbnail, title, description and domain — with edge-aware flipping and touch-safe degradation.

Link Underlinelink-underlineUnderline motion for inline body links — slide, center, wipe or thicken — drawn per line box so wrapped links keep a rule on every line, with descender clearance, a focus ring hover never draws, and text-decoration fallbacks for reduced motion, forced colors and print.

Liquid Distortion Imageliquid-distortion-imageA picture that ripples where the pointer touches it — an SVG feTurbulence + feDisplacementMap twin over the untouched original, masked to a soft lens that follows the cursor and settles back when it leaves.

List Index Barlist-index-barAn 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.

Live Captionslive-captionsA 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.

Live Cursorslive-cursorsA 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.

Loading Overlayloading-overlayA scrim that freezes one region or the whole viewport while work is in flight — delay-gated so short requests never flash, held for a minimum so it never blinks out, and inert underneath so Tab cannot walk into the frozen form.

Log Viewerlog-viewerA 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.

Logo Morphlogo-morphOne SVG shape that morphs between several logo or icon paths on a timer, on hover or from a controlled index, normalising the paths at runtime so their points pair up and cross-fading when they cannot.

Logprobs Viewerlogprobs-viewerToken-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.

Long Presslong-pressPress-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.

Lyrics Synclyrics-syncKaraoke-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.

Magnetic Buttonmagnetic-buttonA button that drifts toward the cursor within a sensing radius and springs back on leave, with a subtle reverse-parallax label.

Magnetic Gridmagnetic-gridA lattice of tiles that leans toward — or away from — the cursor, resolved for every tile from a single pointer listener with distance falloff.

Maintenance Bannermaintenance-bannerA scheduled-window maintenance 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.

Map Bottom Sheetmap-bottom-sheetA 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.

Markdown Editormarkdown-editorA textarea-based Markdown editor with a selection-aware toggling toolbar, ⌘B/⌘I/⌘K shortcuts, write/preview/split modes and a dependency-free preview renderer.

MarqueemarqueeA pure-CSS infinite scrolling belt for logo walls and testimonial strips — seamless loop, edge fade and hover pause.

Masked Inputmasked-inputA pattern-masked text field — 9/A/* slots with literal separators, masked and raw value on every change, and caret-preserving edits in the middle of the string.

Masonry Gridmasonry-gridA pure-CSS waterfall grid container that arranges children into responsive columns via break-inside-avoid wrappers, no measuring or JS required.

Math Formulamath-formulaA documented LaTeX subset rendered as native MathML with a styled CSS fallback — inline and block display, an accessible sentence derived from the source, copy-as-LaTeX, and an explicit caret-marked refusal for anything outside the subset.

Matrix Rainmatrix-rainFalling 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.

Matrix Ratingmatrix-ratingA survey matrix: statements down the side, one shared scale across the top, one native radio group per row, a pinned scale header, answered-row progress, and a stacked fallback instead of sideways scrolling.

MCP Install Buttonmcp-install-buttonA 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.

MCP Server Listmcp-server-listA 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.

Media Grid Selectablemedia-grid-selectableA multi-select photo/video grid with Shift range, cmd/ctrl toggle, two-dimensional arrow-key navigation, a selection cap, lazy thumbnails and type-icon fallbacks.

Meeting Plannermeeting-plannerFind 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.

Mega Menumega-menuA site nav bar whose entries drop a wide multi-column sheet across the whole navbar — portalled past clipping ancestors, hover intent with instant lateral switching, and an automatic accordion fallback.

Memory Listmemory-listThe 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.

Mention Inputmention-inputA plain-text textarea where a trigger character (default @) opens a caret-anchored, filtered picker — mentions, or repurposed for slash commands.

Menu Barmenu-barA desktop application menubar — one click opens, hover then travels between menus, with submenus, shortcut hints, checkable rows and a full roving keyboard.

Message Actionsmessage-actionsThe action bar under one chat message — revealed by hover, focus and touch alike (never hover alone), costing zero layout, with copy in either Markdown or plain text, an exclusive thumbs tri-state, a streaming-safe Regenerate and speech that stops when the message unmounts.

Message Branchmessage-branchA 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.

Message Listmessage-listAn AI transcript whose scroll behaves — glued to the newest token while streaming, released the instant the reader scrolls up, anchored when older pages land, and windowed so a 1000-turn thread stays a dozen nodes wide.

Message Searchmessage-searchIn-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.

Message Skeletonmessage-skeletonA 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.

Metaball Blobsmetaball-blobsA gooey organic background — token-tinted blobs drift on seeded Lissajous orbits and fuse into one body through an SVG alpha-threshold filter, optionally leaning toward the pointer.

MeteorsmeteorsA decorative diagonal shooting-star field for hero/card backdrops — deterministically scattered, pure CSS.

Metric Comparisonmetric-comparisonA period-over-period comparison table — current, previous, absolute change and change %, with polarity-aware tone, sortable columns, expandable breakdowns and four data states.

Mini Calendarmini-calendarA compact month grid for picking one date — keyboard-navigable, timezone-safe, with today, disabled days and event dots. No date library.

Mini Mapmini-mapA thumbnail navigator for any scroll container — a draggable viewport box over an auto-measured (or custom-drawn) silhouette, kept in sync by a passive rAF-throttled listener that writes transform straight to the DOM.

Mini Playermini-playerA 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.

Mobile App Barmobile-app-barA 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.

Mobile Search Barmobile-search-barA 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.

Model Cardmodel-cardOne 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.

Model Routermodel-routerA 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.

Model Selectormodel-selectorAn LLM model picker whose options carry context window, per-million input/output rates, capability badges and real availability — and can be filtered and sorted by them.

Moderation Noticemoderation-noticeContent-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.

Morphing Nav Indicatormorphing-nav-indicatorA nav landmark whose active indicator is one DOM-measured capsule that springs between items and morphs its width and height to fit any label, in pill or underline form.

Multi Selectmulti-selectA 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.

Nav Railnav-railA narrow vertical icon navigation bar that widens into a labelled column — keyboard-reachable tooltips, top/bottom zones, badges and a controllable expanded state.

NebulanebulaA layered interstellar cloud on canvas — token-tinted noise octaves drifting at different rates under a sparse star layer, with depth from parallax.

Noise Texturenoise-textureAn SVG turbulence grain layer that gives flat fills and gradients the tooth of print — optionally jittering like film.

Notch Inset Layoutnotch-inset-layoutA 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.

Notification Badgenotification-badgeA count bubble that wraps any element — rolling digits, a bump on change, max overflow, dot mode with a ping, and four corner placements.

Notification Centernotification-centerAn 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.

Number Inputnumber-inputA capsule quantity stepper with a decrement/increment button either side of a directly-editable, clamped numeric field.

Number Tickernumber-tickerA count-up number that eases from 0 to its target the first time it scrolls into view — Intl-formatted with prefix/suffix.

Oauth Buttonsoauth-buttonsA 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.

Ocr Viewerocr-viewerA 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.

Offline Banneroffline-bannerA 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.

Offline Indicatoroffline-indicatorAn 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.

Onboarding Touronboarding-tourA spotlight-style product walkthrough that dims the page, cuts a rounded hole around each step's real target, and positions an auto-flipping tooltip card beside it.

Open In Chatopen-in-chatA 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.

OrbitsorbitsConcentric orbital paths with bodies on real radii and periods — fading arc trails, a chord whenever two orbits line up, and one composed still frame when motion is off.

Order Trackingorder-trackingA 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.

Org Chartorg-chartA recursive org/hierarchy chart drawn with pure-CSS connector lines (sibling bus trimmed at both ends), collapsible subtrees, vertical or horizontal orientation, renderNode-swappable cards, and a keyboard-navigable WAI-ARIA tree that scrolls inside its own box instead of overflowing.

OTP Inputotp-inputA segmented verification-code field with auto-advance, paste-to-fill, optional grouping and masking.

Outline Fill Textoutline-fill-textStroked outline type whose solid copy is wiped in by an animated clip-path inset — on scroll, on hover, or on mount.

Overflow Tooltipoverflow-tooltipText that reveals itself in a tooltip only when it is really truncated — a width probe for single-line ellipsis, a height probe for line clamp, and nothing attached at all when it fits.

Package Infopackage-infoDisplay package versions, dependency groups, and upgrade status in a compact metadata panel.

Page Headerpage-headerAn app-shell page header — breadcrumb slot, icon, title, status meta and actions that wrap instead of squeeze, plus an optional controlled tab strip.

Page Transitionpage-transitionA route swap wrapper that holds the outgoing view until the incoming one is ready, cross-fades or slides the change, restores each route's scroll offset before paint and moves focus into the new view's heading — reduced to an instant swap under prefers-reduced-motion.

PaginationpaginationPage-number navigation with a sliding sibling window, edge pinning, and an ellipsis only when the page count actually needs one.

Cursor Paginationpagination-cursorA load-more control for cursor APIs — a synchronous in-flight guard so one cursor is never fetched twice, an optional intersection sentinel with a burst budget, retry that keeps the loaded rows, and a live-region count.

Pan Zoompan-zoomA 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.

Parallax Layersparallax-layersA depth wrapper — each child declares a depth and translates at that proportional rate as the container passes through the scrollport, with an optional pointer nudge, driven by one rAF-throttled listener and zero re-renders.

Partial Failure Summarypartial-failure-summaryThe receipt for one bulk action that half worked — the counts as a single actionable sentence, failures grouped by cause and expandable to the affected rows, an RFC 4180 failure report, and a retry whose scope follows whether the successes were committed or rolled back.

ParticlesparticlesAn interactive canvas particle field — dots, linked constellations, snow or fireflies that follow your text token and scatter from the pointer.

Passcode Lockpasscode-lockAn app lock screen with keypad passcode entry, biometric fallback, escalating attempt backoff and a terminal locked-out state.

Passkey Promptpasskey-promptA 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.

Password Generatorpassword-generatorA 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.

Password Inputpassword-inputA styled password field with a show/hide toggle and an optional heuristic strength meter.

Payment Buttonspayment-buttonsAn 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.

Paywall Sheetpaywall-sheetA 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.

PDF Viewerpdf-viewerA document viewer shell with a pluggable render layer — controlled paging synced to scroll, fit-width/fit-page zoom that re-fits on resize, thumbnail rail, text search, keyboard and pinch, named loading/404/damaged/encrypted states, and a native <object> fallback.

Percent Allocatorpercent-allocatorSplit a total across rows with largest-remainder rebalancing, per-row locks and min/max limits — the shares always add up to the target exactly.

Period Pickerperiod-pickerA whole-period picker — week, month, quarter or year — whose grid changes shape per granularity and whose value carries the resolved start and end instants.

Permission Matrixpermission-matrixAn editable roles × permissions grid: tri-state cells (allow / deny / inherit), collapsible permission groups, a pinned permission column, locked system-role columns, row/column bulk edits, and real loading/empty/error states.

Permission Primerpermission-primerA 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.

Permission Promptpermission-promptA pre-permission explainer card that says why camera, microphone, location, notification or clipboard access is needed before the browser's one-shot dialog is spent, with per-permission recovery steps and a retry once it's blocked.

Persona Editorpersona-editorAn 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.

Persona Pickerpersona-pickerChoose 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.

3D Marqueeperspective-marqueePresent media tiles in a responsive perspective marquee with explicit data states.

Phone Inputphone-inputA country dial-code picker fused to a number field — searchable self-drawn listbox, keyboard driven, emitting an E.164 string on every change.

Phone Number Inputphone-number-inputA mobile phone field that regroups digits as you type, picks the country from a bottom sheet, and normalises pasted international numbers into E.164.

Photo Stackphoto-stackA tilted deck of photos — drag, click or arrow-key the top one away and it cycles to the bottom, forever.

PII Detectorpii-detectorA 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.

Pinned Scroll Gallerypin-galleryA 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.

Pin Padpin-padA touch-first numeric keypad for PIN entry: 44px keys, masked dot indicator, deterministic shuffled layout, keyboard parity, and pending/error states.

Pinch Zoompinch-zoomA 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.

Pinned Messagespinned-messagesA 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.

Pivot Tablepivot-tableA 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.

PlasmaplasmaThe demoscene plasma field on one canvas — sines summed over x, y and time through a cyclic token palette, evaluated at low resolution and upscaled so full-bleed stays cheap.

Poll Composerpoll-composerA 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.

Poll Resultspoll-resultsA poll / survey 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.

PopconfirmpopconfirmA 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.

PopoverpopoverA click-triggered floating panel that portals past clipping ancestors, then flips, shifts and size-caps itself against the nearest scrollable boundary.

Print Buttonprint-buttonA 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.

PrismprismOne 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.

Product Cardproduct-cardA storefront product card: one stretched link over the whole card, variant swatches 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.

Product Galleryproduct-galleryA thumbnail rail driving one stage — pointer-tracked and keyboard-pannable magnification, inline video entries with duration chips, and a layout that follows its container.

Profile Cardprofile-cardOne person card in three densities — vertical, horizontal and compact — with presence dot, badges, stats, a stretched-link name and initials fallback.

Progress Meterprogress-meterOne progress contract in two geometries — a linear bar or a compact ring, each with determinate and indeterminate modes, four tones and four sizes.

Progress Toastprogress-toastA toast bound to one long job — determinate or indeterminate progress, a live percentage in its accessible name, cancel while it runs, and terminal states that hold long enough to read with a retry on failure.

Progressive Blurprogressive-blurA gradual-blur edge treatment — stacked backdrop-filter layers with geometrically growing radii, each masked to its own slice of the band, so content melts into frosted glass toward one edge instead of hitting a hard blur line.

Prompt Arenaprompt-arenaPairwise 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.

Prompt Diffprompt-diffA 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.

Prompt Enhancerprompt-enhancerAn "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.

Prompt Inputprompt-inputAn autosizing chat input with paste/drag/pick attachments, a streaming Send⇄Stop button, IME-safe submit and a character counter.

Prompt Libraryprompt-libraryA 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.

Prompt Railprompt-railA 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.

Prompt Variablesprompt-variablesAn 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.

ProseproseA 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.

Pull Menupull-menuAn 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.

Pull Quotepull-quoteEditorial pull quote for body copy: centered, floated left/right with the text wrapping around it, or bled past the measure — figure + blockquote + figcaption, with a decorative quote mark that never lands in the clipboard.

Pull To Refreshpull-to-refreshA 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.

QR Codeqr-codeA tokenized QR code renderer — encodes any string to SVG and inherits currentColor, auto-inverting in dark mode.

QR Loginqr-loginA phone-scan sign-in panel whose QR carries the secret while the screen shows only a derived pairing phrase, with expiry computed from expiresAt instead of trusted, scans attributed by device and approximate location so a wrong one can be rejected, and loading/empty/error handled as first-class branches.

QR Scannerqr-scannerA camera QR reader on the native BarcodeDetector with a pluggable decoder — an enforced scan frame, a throttled decode loop, a per-value cooldown, an image fallback, and a camera that is always released.

Query Builderquery-builderA recursive AND/OR condition tree — operator menus follow 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 what the tree means.

Queue Positionqueue-positionA 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.

Quote Replyquote-replyQuote-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.

RainrainLayered canvas rainfall — parallax sheets of streaks sheared by a wind prop, landing as ripples on an implied ground line.

Range Sliderrange-sliderA two-thumb range selector with a minimum gap, value bubbles, marks and full keyboard control.

Rate Limit Meterrate-limit-meterA 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.

Rate Limit Noticerate-limit-noticeA 429 panel whose cooldown recomputes from an absolute target instant, so a suspended tab wakes up to the right number — auto-unlock with milestone-only announcements and no auto-retry, remaining quota with icon/word/outline urgency, consecutive-backoff labelling and an upgrade CTA.

RatingratingAn accessible star rating input (whole or half steps) that doubles as a fractional read-only display.

Rating Promptrating-promptAn 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.

Rating Summaryrating-summaryA read-only review digest: average score, fractional stars and five distribution bars that double as star-filter toggles, plus a no-reviews state.

Reachability Pullreachability-pullOne-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.

Read Aloud Buttonread-aloud-buttonA 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.

Read Moreread-moreA line-clamped text block with an expand/collapse toggle that only appears when content actually overflows.

Reading Metareading-metaAn article byline strip that derives reading time in-component from the word count at a stated pace, switches from the total to how much is left once reading starts, collapses long author lists into "and N others", and renders every date from an ISO string with an explicit locale and time zone.

Reasoning Blockreasoning-blockA collapsible model-reasoning panel driven by the stream's lifecycle — auto-opens while tokens arrive, auto-collapses when they stop, and permanently stands down once the reader touches it.

Reasoning Timelinereasoning-timelineA 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.

Record Buttonrecord-buttonA record control with an idle → recording → processing → done state machine — drift-free elapsed timer, minimum/maximum take guards, and an optional hold-to-record gesture with slide-away cancel.

Recurrence Pickerrecurrence-pickerA calendar-language repeat editor that writes an RFC 5545 RRULE — frequency, interval, weekday chips, "second Tuesday" / "last day of the month", and a Never / N times / until-date ending — with the next dates previewed from the same rule evaluator.

Redacted Textredacted-textBlur, black-bar or character-mask a sensitive string with hover / click / press-and-hold reveal — where mask actually removes the plaintext from the DOM.

Regenerate Menuregenerate-menuA 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.

Regex Testerregex-testerA regex workbench with flag toggles, matches tinted in place under the caret, a capture-group table, verbatim engine errors, and a worker-backed time budget that survives catastrophic backtracking.

Relative Timerelative-timeAuto-refreshing 'time ago' text rendered as a real <time> element, formatted with Intl.RelativeTimeFormat and hydration-safe via useSyncExternalStore.

Release Healthrelease-healthA per-release client stability panel that derives adoption from session counts, checks crash-free session and user rates against the payload's own thresholds, reports the change from the previous release by semver precedence, and lists the top crash groups with the arithmetic of what it would take to clear the bar.

Repeater Fieldrepeater-fieldA 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.

Report Schedulerreport-schedulerA 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.

Request Historyrequest-historyA 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.

Request Waterfallrequest-waterfallA DevTools-style network waterfall — one adaptive time axis, bars segmented by DNS/connect/TLS/TTFB/download, hover-or-focus phase breakdowns, duration sorting, and real loading/empty/error states.

Resource Usageresource-usageA quota panel for heterogeneous resources — per-unit formatting (1024-based bytes, throughput, duration, cores, counts, money), unlimited rows with no bar at all, rescaled over-quota tracks, collapsible groups and usage sorting.

Response Feedbackresponse-feedbackThumbs 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.

Retrieval Resultsretrieval-resultsThe 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.

Retro Gridretro-gridAn 80s synthwave floor — a tiled grid laid flat in perspective, scrolling toward the viewer and dissolving into the horizon.

Retry Countdownretry-countdownA client-side backoff card that derives every wait from the schedule you pass — the attempt against its cap, a draining ring 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 hands over your escape hatch instead of a dead button.

Rewrite Previewrewrite-previewA 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.

Rich Text Toolbarrich-text-toolbarAn editor-agnostic formatting bar: grouped toggle buttons that never steal the editor's selection, collapse into an overflow menu by measurement, and walk on a single tab stop — plus a floating variant that follows the selection.

Ripple Ringsripple-ringsConcentric ripples expanding out of one origin — a pure CSS/DOM backdrop with an optional pointer-following origin and a static reduced-motion fallback.

Ruby Textruby-textRuby 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.

Run Comparisonrun-comparisonA 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.

Run Summaryrun-summaryThe 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.

Safe Areasafe-areaA CSS-only wrapper that keeps content clear of the notch, rounded corners, home indicator and landscape rails — per-edge opt-in, padding or margin, with a max() floor for devices that report no inset.

Safety Controlssafety-controlsPer-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.

Sampling Controlssampling-controlsA 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.

Sandbox Statussandbox-statusA 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.

Save Indicatorsave-indicatorAutosave status line for an editor toolbar — Saving… holds a minimum beat to avoid flicker, Saved fades back into "Last saved 3 minutes ago", and errors stay put with a Retry.

ScanlinesscanlinesA 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.

Schedule Calendarschedule-calendarA 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 real loading/empty/error states.

Scheduled Tasksscheduled-tasksA 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.

Schema Displayschema-displayDocument API operations, parameters, and nested schemas in an accessible expandable view.

Schema Formschema-formA form generated from a zod object schema — a control per field type, required markers and every verdict read from that same schema, typed values on submit, and an explicit notice for the shapes it will not generate.

Scramble Textscramble-textText that lands as random characters and decodes left to right, on mount, on scroll-in or on hover.

Scratch Cardscratch-cardA 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.

Screen Recorderscreen-recorderA real getDisplayMedia screen recorder — surface picker, optional microphone mixdown, live duration and size, and a preview you can download.

Screen Transitionscreen-transitionA 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.

Scroll Areascroll-areaA themed scroll container that keeps native scrolling untouched — the platform bar is hidden and a draggable thumb is drawn from scrollTop/scrollHeight, with edge fades and an end-reached callback.

Scroll Progressscroll-progressA thin fixed bar tracking page or container scroll position, written straight to the DOM with zero re-renders.

Scroll Restorationscroll-restorationRestores where each named scroll container was when a history entry was left, waiting for async content to come back before it lands.

Scroll Revealscroll-revealA variant-driven entrance wrapper — fade, slide, blur or scale any children in once they scroll into view, with an optional per-child stagger.

Scroll Shadowscroll-shadowA 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 or steals scrollbar width.

Scroll To Latestscroll-to-latestA 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.

Scroll to Topscroll-to-topA floating button that fades in past a scroll threshold and smoothly scrolls its container (or the window) back to the top.

Scroll Velocity Skewscroll-velocity-skewA wrapper that leans and slightly scales its content in proportion to scroll velocity, then eases back to neutral the moment scrolling stops.

Scrollbar Stylesscrollbar-stylesSix presets that re-skin the browser's own scrollbar in pure CSS — no JavaScript, no drawn thumb, and one capability-tiered sheet that keeps `::-webkit-scrollbar` and `scrollbar-width` from cancelling each other out.

Search Highlightsearch-highlightHighlights the parts of a text that match a search query — substring, per-word or fuzzy subsequence, with escaped queries, merged overlaps and a current-match cursor.

Search Inputsearch-inputA search field with an icon, a clear button that appears on value, an optional loading spinner, and a decorative shortcut hint.

Seat Pickerseat-pickerA zoomable SVG venue map for picking seats — section/row/seat keyboard navigation, per-seat spoken names, shape+pattern status encoding, a list fallback, max-seat and no-orphan rules.

Segmented Controlsegmented-controlAn iOS-style exclusive picker whose selected thumb slides between options, with cva sizes and full radiogroup keyboard support.

Session Expirysession-expiryA 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.

Session Listsession-listSigned-in devices with per-row and bulk sign-out — the current session is highlighted and never revocable, rejected revokes keep the row with a retry, and loading/empty/error are first-class states.

Settings Listsettings-listGrouped 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.

Share Buttonshare-buttonA share trigger whose targets fan out on an arc or a rail, one 40ms step apart, with outside-click and Esc dismissal.

Share Conversationshare-conversationA 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.

Share Sheetshare-sheetThe 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.

Shiny Textshiny-textA restrained inline shimmer — one narrow light band loops across muted text, for New badges and quiet links.

Shortcut Recordershortcut-recorderA field that records a keyboard shortcut by pressing it — swallows every key while recording, waits past the modifiers for a real key, and separates browser-reserved combos (refused) from ones that would override an existing binding (recorded, with a warning).

Shortcuts Dialogshortcuts-dialogA grouped keyboard cheat sheet bound to the ? key — platform-correct keycap glyphs, token-based filtering, focus trap and a refcounted scroll lock.

Sidebar Navsidebar-navA grouped app sidebar with collapsible sections, icons, badges, an active-item indicator and an icon-only collapsed rail.

Signature Padsignature-padA canvas signature capture surface with pointer-drawn strokes, undo/clear, and a PNG data URL export.

SilksilkFlowing 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.

SkeletonskeletonA loading-placeholder primitive — line, circle and rect shapes with pulse or shimmer motion — that mirrors the layout it stands in for.

Skip Linkskip-linkA hidden-until-focused link cluster that moves focus — not just the scroll — to a page landmark, clearing a sticky header by a configurable offset.

SLA Reportsla-reportA contract-side availability settlement — real period length, overlap-merged downtime, weighted or worst-service composite, an error budget that is allowed to read past 100%, and the service-credit rung the period landed on.

Slash Command Menuslash-command-menuA 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.

Slice Explorerslice-explorerA 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.

Slide to Confirmslide-to-confirmA slide-to-confirm control — drag the thumb to the end of the track to fire an action, guarding destructive or irreversible operations against accidental taps.

Slug Inputslug-inputA 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.

SmokesmokeRising turbulent smoke on one canvas — three scales of a single baked fBm tile, warped per band and thinning with height.

SnackbarsnackbarA bottom-edge message bar with one action, swipe-to-dismiss and a single-slot queue that never lets two share the thumb arc.

SnowsnowCanvas snowfall with per-flake sway, a foreground-bokeh depth ramp, and an optional drift that builds along the bottom edge and settles under its own angle of repose.

Social Proof Toastsocial-proof-toastA 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.

SonarsonarA canvas radar sweep — a rotating wedge with a decaying tail over concentric range rings, and prop-driven contacts that flare when the beam passes and fade until the next one.

Sort Buildersort-builderA 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.

Sortable Listsortable-listA drag-to-reorder list (settings, playlists, priority queues) built on dnd-kit with a keyboard-sortable fallback.

Source Sheetsource-sheetA 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.

Stat Card · Sparklinesparkline-stat-cardA KPI card — headline figure, tone-aware delta badge and a minimal sparkline — with four data states from one contract.

360 Spin Viewerspin-viewerA turntable image sequence scrubbed by horizontal drag, touch and arrow keys — one wrapping frame index, a preload gate that shows its progress before interaction is allowed, dead frames skipped instead of blanking the stage, and auto-spin that yields at the first interaction.

Spin Wheelspin-wheelA 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.

SpinnerspinnerOne indeterminate loader, seven shapes — three boxed (ring, dual-ring, bars) and four inline dot rows (dots, ellipsis, bounce, wave), with tone and count props.

Split Buttonsplit-buttonA primary action welded to an arrow segment that opens its own keyboard-navigable action menu.

Split Panesplit-paneA dependency-free resizable split layout — percentage flex-basis panes, percent or px per-pane minimums, double-click collapse, full keyboard resizing and an optional persisted layout.

Split Screen Hoversplit-screen-hoverFull-height panels that share one row and rebalance around the pointer — the hovered or focused panel takes the width and opens its copy while the others compress, dim and desaturate.

SpotlightspotlightA cursor-following radial glow background container — pointer coordinates track via ref-driven CSS variables, never React state.

Stack Tracestack-traceParse, inspect, and copy stack traces while preserving unrecognized raw frames.

StarfieldstarfieldA layered parallax star field on one canvas — 2-4 depth layers drifting or warping, seeded for a reproducible sky, with a faint-dust fallback on light surfaces.

Stat Cardstat-cardA KPI grid — label, big tabular figure and a tone-coded delta per metric — with loading, empty, error and ready driven by one contract.

Stateful Buttonstateful-buttonAn action button with a built-in idle → loading → success/error state machine — stable width, live-region announcements, auto-reset.

Status Badgestatus-badgeA presence and health indicator — colored dot or tinted pill, with status colors mapped to theme tokens and an optional liveness pulse.

Status Bar Mockstatus-bar-mockA 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.

Status Timelinestatus-timelineA read-only progress thread for an async run — per-stage icon + word, live elapsed time on the running stage, expandable failures and a settled-run summary, vertical or horizontal.

StepperstepperA horizontal wizard progress indicator — completed steps are clickable to go back, the current and future steps never are.

Steps Checkliststeps-checklistAn onboarding checklist that tracks setup progress — togglable steps with optional CTAs, expandable detail, a progress meter and a completion celebration.

Stick To Bottomstick-to-bottomA scroll container that follows its own bottom edge — appended content stays in view, a scroll up hands the position over for good, and a counted jump pill brings the reader back.

Sticky CTA Barsticky-cta-barA conversion bar that docks to the bottom or top edge once a sentinel element leaves the viewport, carrying a headline, a primary action and a dismissal that is remembered for the rest of the tab session.

Sticky Headersticky-headerAn in-flow page header that shrinks, blurs, or hides on scroll, exposing its scroll state as data attributes for consumers to style.

Sticky Section Liststicky-section-listA 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.

Sticky Stacksticky-stackMulti-level sticky section headers that shove each other out or pile up, with every parking line accumulated from measured header heights.

Stop Generatingstop-generatingOne 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.

StopwatchstopwatchA 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.

Stories Viewerstories-viewerA 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.

Streak Trackerstreak-trackerA 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.

Stream Inspectorstream-inspectorA 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.

Stream Stop Barstream-stop-barA 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.

Streaming Codestreaming-codeA 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.

Streaming Markdownstreaming-markdownA 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 Tablestreaming-tableA 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 Textstreaming-textAn incremental Markdown renderer for LLM output — finished blocks are frozen, half-written markup is closed speculatively, the caret rides the last character and screen readers hear the answer once.

Structured Outputstructured-outputA 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.

Success Checksuccess-checkAn SVG outcome mark that draws its ring and then its stroke — a check for success, a cross for failure.

Suggested Promptssuggested-promptsClick-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.

Swatch Pickerswatch-pickerAn accessible radiogroup of preset color swatches with roving tabindex, arrow-key navigation, and a contrast-safe selected check mark.

Swipe Actionsswipe-actionsA 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.

Swipe Cardsswipe-cardsA 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.

Swipe Pagerswipe-pagerFull-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.

Swipe To Replyswipe-to-replyA 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.

System Prompt Editorsystem-prompt-editorA 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.

Tab Overflowtab-overflowA measured tab strip that folds the tabs it cannot fit into a "More" menu — real tablist semantics, the selected tab is never collapsed, and no breakpoints anywhere.

Tags Inputtags-inputA chips input for free-form multi-value entry — Enter or comma commits, paste splits, duplicates shake, maxTags caps with a counter.

Task Queuetask-queueAn 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.

Tax ID Inputtax-id-inputA tax identifier field where the country picks the format — local label, printed prefix, mask and that jurisdiction's real checksum (EU VAT, UK VAT, EIN, ABN, GSTIN, CNPJ) — with an optional register-verification state on top.

TerminalterminalA terminal window that replays a scripted session — commands type out character by character, output blocks fade in, comments stay dim.

Test Resultstest-resultsSummarize test suites, outcomes, durations, and failure details across explicit data states.

Text Clip Mediatext-clip-mediaDisplay type whose glyphs become a window onto media — an image, a muted looping video or a token gradient fills the letters, leans away from the pointer, and degrades to a solid token whenever clipping is unsupported or the media never arrives.

Text Difftext-diffA 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.

Text Revealtext-revealWord-by-word or character-by-character text reveal triggered by scrolling into view, with a staggered fade-up-blur entrance.

Theme Customizertheme-customizerA 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.

Theme Toggletheme-toggle-buttonAn animated sun/moon theme toggle button — controlled and host-agnostic, with a rotate-and-scale icon cross-fade.

Thinking Indicatorthinking-indicatorA 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.

Threshold Editorthreshold-editorAn 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.

Throughput Meterthroughput-meterA 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.

Thumb Toolbarthumb-toolbarA 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.

Tilt Cardtilt-cardA card container that leans toward the pointer in 3D, with an optional gloss that tracks the cursor.

Time Pickertime-pickerA segmented hour:minute input with arrow-key stepping and a clock-button dropdown, normalizing to 24-hour "HH:mm" regardless of display format.

TimelinetimelineA contract-driven vertical timeline with done, active and upcoming milestone nodes and four data states.

Timeline Swimlanetimeline-swimlaneEvents 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.

Timezone Pickertimezone-pickerA searchable IANA time-zone field — ~90 zones grouped Popular / All, each row showing that zone's live local time and derived GMT offset, in a portalled panel no overflow-hidden card can clip.

Toast Stacktoast-stackA self-contained toast system — newest slides in, older ones stack behind it, hover expands the pile into a list.

TOC Scrollspytoc-scrollspyAn article outline that follows the reader — headings are watched with one IntersectionObserver and a rail slides to the current section.

Toggle Grouptoggle-groupA 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.

Toggle Switchtoggle-switchA switch with a sliding knob, Check/X icons fading inside the track, three sizes and a loading state.

Token Usage Metertoken-usage-meterAn 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.

Tokenizer Previewtokenizer-previewA 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.

Tone Selectortone-selectorA 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.

Tool Call Cardtool-call-cardOne agent tool call inline in a conversation — a first-class approval gate with a one-shot Approve/Decline, structured args and results, key-based redaction that keeps secrets out of the DOM, announced truncation for huge payloads, and real loading/empty/error states.

Tool Call Tracetool-call-traceAn agent's tool-call tree — nested sub-calls with a capped indent, structured args and results in expandable JSON, one shared duration unit, first-class running/failed calls, and real loading/empty/error states.

Tool Catalogtool-catalogA 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.

ToolbartoolbarA grouped application toolbar that measures itself and folds its lowest-priority actions into a portalled "More" menu — no breakpoints, roving tabindex, pressed toggles kept intact.

Toolbar Overflowtoolbar-overflowAn action bar that measures itself off-screen and moves the actions it cannot fit into a trailing overflow menu, lowest priority first.

Top Loading Bartop-loading-barA thin route and request bar that climbs asymptotically towards 99% while work is in flight — delay-gated so fast requests never flash, held for a minimum duration, with a controlled mode, top or bottom placement and an optional spinner.

TopographytopographyA seamlessly tiling contour-map backdrop traced from seeded hash noise — quiet relief lines for docs shells, auth screens and empty states.

Transfer Listtransfer-listA 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.

Translation Paneltranslation-panelA 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.

Translation Toggletranslation-toggleA 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.

Tree Maptree-mapA squarified treemap that tiles a hierarchy by value — nested groups, click-to-drill with a breadcrumb, rank-based shading and keyboard-reachable DOM tiles (no canvas).

Truncate Middletruncate-middleMiddle-ellipsis text that keeps both ends readable — a fixed head/tail cluster count, or as many characters as the measured width actually fits.

Type Scaletype-scaleA 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.

TypewritertypewriterA type-and-delete headline that cycles through a list of sentences with a blinking caret.

Typing Indicatortyping-indicatorA chat presence indicator — optional avatar, a receiver-side bubble of waving dots, and a name line that collapses for groups.

Undo Toastundo-toastAn optimistic-delete toast: the row disappears at once, a countdown ring holds the destructive commit, and hover or focus pauses the window.

Unit Inputunit-inputA number-plus-unit field for design tokens — 12px, 1.5rem, 50% — with arrow/wheel stepping, optional conversion on unit switch, and an auto state.

Unsaved Changes Guardunsaved-changes-guardA 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.

Upgrade Promptupgrade-promptAn 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.

Uptime Barsuptime-barsA 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.

Usage Alertsusage-alertsA 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.

Username Availabilityusername-availabilityA controlled handle field that gates a debounced availability check behind local rules, names the rule that broke, keeps unreachable separate from taken, and shows the normalised handle before submit.

Variable Font Scrollvariable-font-scrollA headline whose variable-font axes interpolate with scroll position, thickening character by character as it crosses the viewport and falling back to a static weight on non-variable families.

Variant Selectorvariant-selectorMulti-dimension product options resolved against a sparse SKU matrix — impossible combinations stay visible and struck through, availability converges from either direction, and dead ends name the one dimension to change.

Version Historyversion-historyA day-grouped snapshot list — preview a version, compare two, and roll one back behind a real confirmation with pending, failure and retry.

Vertical Textvertical-textVertical 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 copy would not gain from it.

Video Chaptersvideo-chaptersThe chapter list beside a player: chapters supply only a start time, the component derives every boundary, length and share of the runtime, marks the chapter holding the playhead, keeps it scrolled into view with an in-chapter progress sliver, and seeks on click or Enter.

Video Embedvideo-embedA lite YouTube/Vimeo facade — poster and play button until clicked, so the real iframe and its third-party script never load until the user opts in.

Video Generationvideo-generationA 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.

Video Hover Previewvideo-hover-previewA thumbnail card that plays a muted preview clip on hover or keyboard focus — delayed lazy load, pointer-x scrubbing, progress bar, and a poster fallback on error.

Video Playervideo-playerA custom control skin for a self-hosted <video> — pointer-capture scrubbing with preview time, buffered ranges, volume memory, speed menu, subtitles, fullscreen, PiP, keyboard shortcuts and a readable error state.

Video Playlistvideo-playlistA 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.

Scroll Scrubbed Videovideo-scrub-scrollA video whose playhead is driven by scroll position — a pinned section maps its scroll window onto currentTime with rAF-coalesced, readyState-guarded seeks, and falls back to the poster plus an ordinary play control under reduced motion, an unseekable source or a load error.

Video Timelinevideo-timelineA controlled scrub track with chapter-segmented rail, buffered ranges, keyframe hover previews and draggable in/out trim handles — delta dragging, frame-accurate keys, no player attached.

Virtual Gridvirtual-gridA hand-rolled two-dimensional window over a huge sparse matrix — only the cells near the viewport are in the DOM, with fixed or measured row heights and column widths.

Virtual Listvirtual-listA hand-rolled windowed list — renders only the visible rows of a huge array, with fixed or measured variable heights, imperative scroll control and infinite-scroll support.

Voice Orbvoice-orbA 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 Pickervoice-pickerPick 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.

Voice Recordervoice-recorderA real MediaRecorder-backed voice recorder — live AnalyserNode waveform, pause/resume, mic-permission handling, and a listen-before-you-send preview.

Voronoi Cellsvoronoi-cellsA slowly flowing Voronoi diagram on one canvas — organic cell walls, a tinted mosaic or separated pebbles, seeded so the same field comes back every time.

VortexvortexA canvas vortex — particles spiral into one point, winding faster as they fall, with comet tails made by fading the buffer instead of storing a path.

Vote Buttonsvote-buttonsAn 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.

Wallet Card Stackwallet-card-stackA 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.

Warp Tunnelwarp-tunnelA hyperspace speed tunnel on one canvas — seeded, tapered streaks leave a movable vanishing point and accelerate outward with perspective foreshortening.

Wave Dividerwave-dividerAn animated section seam of stacked SVG wave layers, each re-sampled every frame from two counter-travelling harmonics, with an opaque front wave painted in the next section's own theme token.

WaveswavesAn SVG wave divider and layered backdrop for section transitions and hero bottoms — pure CSS, no canvas.

Web Previewweb-previewA 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.

Web Search Cardweb-search-cardOne 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.

Webhook Logwebhook-logA 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.

Wheel Pickerwheel-pickerAn iOS-style drum picker: scroll-snap detents under the thumb, optional wrapping, unlandable rows, and the same turns from the keyboard and two chevrons.

Word Rotateword-rotateA jitter-free rotating word inside a headline, cycling through slide or fade transitions with zero layout shift.

Workspace Switcherworkspace-switcherA workspace / organization switcher: active workspace in the trigger, grouped searchable menu in a portalled panel, pinned create and settings footer.

World Clockworld-clockSeveral 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.

Select a component to view its code

Click on any item in the sidebar to get started

Select a component to view its information