Everything you need to build with styloviz

174 original glyphs on a 24px grid, resolved by name through one component or imported per icon for the smallest bundle. currentColor throughout, so an icon inherits its text colour in light and dark mode. Pro adds 513 more glyphs and the `sharp` and `duotone` weights.

Motion for any glyph in the kit — 27 presets plus a curated default per icon, driven by the Web Animations API with no CSS file and no animation library. Five triggers (hover, click, in-view, mount, manual) and `prefers-reduced-motion` honoured before anything plays.

9 variants × 6 styles × 5 sizes × 3 shapes — solid, outline, soft, ghost, link and gradient with loading states and icon support.

Single- and multi-line inputs with validation states, icons, addons, hints and character counting.

Single, multi-select, grouped and searchable dropdown with rich option rendering.

Accessible toggle for boolean settings in multiple sizes, colors and label positions.

Accessible checkboxes with 5 variants, 3 sizes, indeterminate state and ControlValueAccessor support.

Radio group with default, card and button-group styles. ControlValueAccessor for reactive forms.

Range slider with single-value and dual-handle range mode, tick marks and step control.

Numeric input with increment/decrement controls, prefix/suffix, min/max clamping and decimal precision.

7 semantic variants × 3 visual styles. Supports avatar, icon, selectable and removable modes.

Drag-and-drop and button-style file uploaders with type/size constraints and progress.

Command-palette style search with suggestions, filters and loading states.

Full-featured contenteditable editor with 9 toolbar groups — fonts, colors, alignment, lists, link/table/code, undo/redo, source view, fullscreen and word count.

Custom calendar picker with month/year navigation, today indicator, min/max constraints and day/month/year views.

9 premium multi-select tag-input variants: default, avatar, grouped, creatable, colors, token limit, async search, inline and overflow.

HSV gradient canvas picker with hue rail, alpha channel, hex input, preset swatches and 3 sizes.

The list of what is wrong at the top of a long form, with a way into each field — including the ones a collapsed group or a wizard step is currently hiding.

A set of chips that belongs to something — one tab stop for the whole row, arrows between members, and a name for the thing they are members of.

Edit one field where it is displayed — a value that reads as text until you click it, then becomes an input, then goes back. Text, textarea and select modes, with a save lifecycle that keeps the draft when the write fails.

4, 5 and 6-digit OTP/PIN inputs with auto-advance, paste support, arrow-key navigation, mask mode and status variants.

A phone number field with a country selector (local flag assets, no remote images) that masks the NATIONAL number against a per-country numbering plan — the country code stays in the picker, where it is already shown. The bundled plans are a best effort rather than an authority: numbering plans change more often than a release cycle, so the length check is a hint and `plans` lets a host supply its own.

Sign with a finger, a pen or a mouse. The signature is held as STROKES rather than pixels, so it survives a resize, undo removes a mark rather than a point, and export refuses to hand back a blank image from a pad nobody signed.

Star, heart, fire and thumb rating variants with half-star support, hover preview and 4 sizes.

4 style variants (default, pills, underline, bordered) with badge and icon support, full-width mode and two-way binding.

12h/24h scroll-column time picker with hour/minute/second wheels, AM/PM selector, Now button and 3 sizes.

8 built-in mask presets (phone, credit card, date, time, SSN, ZIP, IP) plus custom patterns, with 3 visual variants.

Searchable dropdown with grouping, sublabels, icons, disabled options, keyboard navigation and query highlighting.

Hierarchical picker in a body-portalled tree panel: single or multi-select, an ancestor-preserving filter with debounced server search, full keyboard control through aria-activedescendant, ControlValueAccessor support, and the loading / error / empty states inside the panel.

Renders a form from a JSON schema — conditional visibility, per-field validation, and a payload with hidden fields pruned out. The three things it exists for are the three a schema form silently gets wrong: a hidden field whose value is still submitted, a required field in a hidden branch that blocks the form with nothing on screen to fix, and a schema whose own mistakes never surface because it came from a database rather than a compiler.

Multi-level cascading select for hierarchical data (e.g. Country → State → City) with searchable mode, hover/click expand triggers, partial-path selection, multi-select with removable chips, async lazy-loaded children and full keyboard navigation.

Contenteditable input with @mention autocomplete — a cursor-anchored suggestion dropdown, keyboard navigation and styled mention chips. Supports single- or multi-line entry and multi-trigger mode (@ people, # topics, / commands).

Semantic fieldset wrapper for grouping related form fields, with vertical/horizontal layout, bordered or filled variants, fused (seamless) edges and an optional collapsible toggle.

A primary action button fused to a chevron dropdown of secondary actions — composed from Button, the fused Input Group and Dropdown Menu, not a new control built from scratch.

KPI metric cards with sparklines, trend chips and four layout variants.

Premium, dark-first KPI card with a gradient hairline border, ambient accent glow, gradient icon token and an inline gradient sparkline.

A table that becomes a list of records when there is no room to be a table. Below the breakpoint the markup stops claiming to be a table and becomes a list of real <dl> label/value pairs — the structure HTML already has for this — with sorting, selection and row actions rebuilt rather than lost, and nothing dropped.

Sortable, paginated table with row selection, badge cells and a loading skeleton — plus premium toolbar, column filters, inline editing, expandable rows and bulk actions.

Market-ready list patterns: default, checklist, nested tree, virtualized, grouped, template cards, call history and infinite scrolling.

User avatar with initials fallback, status indicator, size and shape variants.

Compact status and category labels with 7 semantic variants and 3 visual styles.

9 premium variations: horizontal, alternate zigzag, numbered stepper, check stepper, activity feed, status tracker, rich card, date-grouped and interactive (clickable rows).

Portfolio roadmaps with command bus, undo/redo, drag & drop, dependency engine, a computed critical path (real forward/backward pass, total float in days, all four link types with lag), baselines, resource leveling, MS Project XML import/export and row virtualization.

Cross-tab summarization with a field configurator reachable by drag OR by keyboard — dimensions, six aggregators, expand/collapse subtotals, sort-by-measure, top-N filter, a cardinality guard, Excel/PDF export that matches the grid cell for cell, and server-side aggregation.

Nested AND/OR condition builder — add/remove rules and groups, typed operators per field (string / number / date / enum / boolean), a serializable JSON expression out and import of a saved one back in, and a debounced queryChange output that pairs with a data-table's server-side filtering.

8 global-market variants: sprint board, CRM pipeline, helpdesk, compact, swimlanes, collapsible columns, rich headers and fixed-header scrolling.

8 premium variants: collapsible tree, file explorer, tri-state checkboxes, org chart, tree table, searchable, drag & drop reordering and lazy load. Lazy loading, the tree-table columns and drag & drop reordering are Pro (`sv-tree-view-pro`); the free component renders the nodes you give it.

8 premium color-palette variants with interactive tooltips, shape options, stats badges and full dark-mode support.

A dashboard grid that lays out YOUR widgets — ordered, hideable, reorderable by keyboard, one arrangement per width, layout persisted — with eight ready compositions to start from and your own template inside any card.

Auto-playing image carousel with dots, lines, numbers or no indicator, prev/next arrows and a slide counter.

Grid, masonry and strip layouts with a lightbox viewer, keyboard navigation and selectable mode.

Native HTML5 drag-and-drop reorderable list with priority badges, keyboard move alternatives and item removal.

Month, week, day and agenda views (plus a planner week time-grid) with color-coded event chips, keyboard navigation, a today highlight and opt-in drag-to-create. Emits the visible date range so you fetch only what is on screen, and `view` / `focusedDate` are two-way bindable for deep links.

Micro-chart small enough to live in a table cell, list row or stat card. Four encodings — line, area, bar and win/loss — with optional smoothing, last-point and extreme markers, a dashed reference baseline and a pinnable domain. Pure SVG, zero dependencies.

Read-only source display with a zero-dependency highlighter for 9 languages. Four variants — block, multi-file tabs, diff (unified or split with per-hunk accept/reject) and terminal — plus streaming-safe rendering, line numbers, soft wrap, line highlighting, copy-to-clipboard, and a render cap for files too long to draw in full.

Threaded comment display with depth-limited nested replies, an inline reply box, emoji reactions, relative timestamps and an avatar/initials fallback.

Dual-list transfer widget for moving items between a source and target panel, with per-panel search, check-all and move-all controls.

Code 128, EAN-13 and EAN-8 rendered as SVG from a real encoder: mod-103 and mod-10 check characters computed rather than trusted, EAN-13's leading digit carried in the left-half parity, subset-C packing so a long serial fits the label, spec quiet zones, and a module width snapped to whole device pixels. Refuses to draw what cannot scan, and says why.

Crop, with the parts that silently corrupt the result handled: EXIF orientation, the browser's canvas ceiling, and a quality setting PNG ignores. An image cropper fails by producing a picture rather than an error, so it reports what the crop will actually produce rather than what was selected.

A before/after wipe that admits when it is not one: it measures both images' intrinsic sizes and says so when their aspect ratios disagree, because then part of what the reader sees as "the change" is the crop. Operated as a real ARIA slider — arrows, page keys, Home and End — which almost no implementation of this control is.

Self-contained canvas QR encoder with no external dependencies. Supports error-correction levels L/M/Q/H, an optional center logo, custom colors and PNG download.

Renders N items then collapses the overflow into a "+N more" badge, chip or text indicator — with an optional dropdown listing the hidden items and automatic width-based overflow.

Safe Markdown renderer built for token-by-token output. Renders a parsed token model through Angular bindings — no innerHTML and no bypassSecurityTrust, so untrusted content can never become markup. Headings, lists (incl. tasks), tables with alignment, blockquotes and inline emphasis; fenced code delegates to sv-code-block.

Media card with a configurable image position (top/left/right), four aspect ratios, gradient overlay, badge and content/action projection slots.

Key–value list for the detail panel of a record — real <dl>/<dt>/<dd> semantics, 1–4 responsive columns with per-item span, horizontal or vertical layouts, and a value that is missing told apart from one that is blank.

Expandable tree over any value — the panel a webhook inspector, an admin tool or a debug drawer needs. Tells NaN from null, a Map from an empty object and a cycle from a shared reference. Masks secrets in the value as well as on screen, lists accessors without invoking them, discloses the own properties `Object.entries` silently drops, holds a total row ceiling rather than only a per-container one, and carries a full tree keyboard model with copy-path and copy-value.

Text truncation using CSS line-clamp with ResizeObserver overflow detection, an optional gradient fade and an animated Show more / Show less toggle.

File attachment item with a MIME-type-aware icon badge, formatted size, upload progress, success/error status and download/remove actions — in card, row or compact layouts.

Responsive CSS Grid container for arbitrary tiles — auto-fill or fixed columns, configurable gap and minimum column width, an optional uniform aspect ratio and masonry progressive enhancement.

Locale-aware money formatting with an optional compare-at price and an auto-calculated discount, shown as a badge or inline text. Minor units are scaled by the currency rather than by a hardcoded 100, the rounding rule is stated rather than implied, and ranges, credits and a stated tax basis are first-class.

Premium commerce product card composing price and rating with a wishlist toggle, badge, colour swatches, add-to-cart and an out-of-stock state. Grid and list layouts.

Real-estate listing card — pageable photo strip with the real gallery count, status ribbon, price with derived price-per-area, a beds/baths/parking/area row that keeps zero and unknown apart, amenity chips, save and compare toggles and an agent line. Grid, list and wide layouts.

Cart / checkout totals panel that renders the server quote verbatim and badges any locally-derived total as an estimate. Shipping / tax / discount rows, inclusive-tax mode, arbitrary extra lines, and content slots for a coupon field and checkout button. All arithmetic runs on integer minor units, so the visible rows always add up to the visible total.

A single cart row: image, title, variant, quantity stepper and a computed line total, with remove and save-for-later actions. Bursts of quantity clicks settle into one write, which rolls back if the server rejects it. Stock caps the stepper rather than only hinting, and a price that moved since the item went into the cart says so. Default and compact densities.

A saved address elegantly displayed — label, default / shipping-billing badges, and edit / remove / set-default actions — plus a companion sv-address-form whose field list comes from the country rather than the template: labels, order and required-ness are all data, so a UK address submits without a county and a Hong Kong one renders no postal code at all. Verification is a six-state enum that never blocks submit, and removing the default address asks where the badge goes next. Cards support a selectable (radio) mode for checkout address pickers.

A premium payment-card visual that updates live as the user types: auto-detects the brand from the number, formats the digits (incl. Amex 4-6-5), and flips to the back for the CVC. Display-only — the number and CVC are masked by default, and it never collects or transmits card data. Five gradient themes.

A premium gift-card / e-gift visual: a locale-formatted denomination or remaining balance, a redeemable code that is masked, gated behind the host's own authorization and re-hidden on a timer, plus redeemed / void / expired states, a zone-aware expiry, recipient, sender and an optional greeting. Five gradient themes with a decorative ribbon and shimmer.

A premium faceted filter panel for product listings: collapsible groups for checkbox lists, color swatches, star ratings and a price range, with per-option counts, a live active-filter chip row and a one-click clear-all. Selection is exposed through two-way selected / price models and a consolidated change output.

A native `<kbd>` wrapper for rendering keyboard shortcuts and hint keys, with three visual variants and two sizes so every shortcut hint in the kit shares one styled source instead of one-off utility classes.

A dependency-free password guidance meter that pairs alongside any text input — a segmented bar, a strength band, and up to three suggestions. Length carries three of the four points and character variety adds the fourth, so a passphrase outranks a short password stuffed with symbols. It advises and never blocks: a heuristic run in the browser cannot measure how guessable a password is, so the only real evidence — a breach lookup — comes in as an input the host owns.

Reaction button with 4 icon variants (heart, thumbs-up, star, clap), burst particle animation on toggle, and an optimistic count that rolls back when the write fails. 3 sizes.

Pure-SVG grouped bar chart with vertical/horizontal orientation and animated bars.

12 variants: line, spline, step, dashed, custom animation, inversed, zones, multi-colored, stacked, 100% stacked, trend lines and strip lines. A missing reading is drawn as a break in the line, not as a zero. Pure SVG.

Animated SVG donut plus a gradient variant with per-slice radial gradients and staggered entrance.

4 variants: default pie, variable radius, custom legend template and smart labels. Optional largest-first ordering and long-tail grouping into a single Other slice. Pure SVG with entrance animations and hover effects.

6 real-time variants: live spline, live stock (OHLC), dynamic data source, click-to-add point, live sorting and a continuous live stream. Every timer is cleared while its tab is hidden, and a variant that generates its own data states the gap on the way back. Pure SVG.

Distribution of a sample: five bin-width rules, count / density / cumulative measures, an optional kernel density curve, a rug, and mean / median / quantile markers. The rule that shaped the picture is always stated. Pure SVG.

Open/high/low/close sessions on an ordinal axis, with direction carried by the body fill as well as the colour, an optional volume pane and a logarithmic price scale. Pure SVG.

X/Y scatter with a third dimension carried by the bubble size. Multi-series, animated scale-in entrance, hover and keyboard selection. Pure SVG.

Stage funnel and hierarchy pyramid. Width is the value and every band is the same height, which the chart states under the plot — the area of a band is not its value. Pure SVG.

Independent left and right y-axes with bars and lines on either. Both scales and their ranges are stated under the plot, because each axis fills the full height and the crossing point is an artefact of that. Pure SVG.

Area and line series on a date-time category axis, with day / month / year zoom levels. Labels take the application locale; a bare YYYY-MM-DD is read as a calendar day in local time rather than as UTC midnight. Pure SVG.

What is left once bubble, funnel, multi-axis and date-time became families of their own: chart export to PNG/SVG/PDF, the high-performance renderer, and the two axis-labelling treatments.

Multi-series radar/spider chart with configurable axes, fill/stroke mode, dot markers, level grid and auto-positioned labels. States under the plot when the spokes are on different scales, and that the shape depends on the order of the axes. Pure SVG.

Half-circle gauge with colored range bands, animated progress arc, needle, tick marks, an optional target notch and configurable min/max. The active band and the distance to the target are written out, not left to colour. Pure SVG.

Multi-series scatter plot with data-driven axes, hexagonal density binning above 2,000 points, a canvas paint path above 1,200, hover tooltip and legend. Pure SVG.

Flow diagram with reproducible column layout, cubic-bezier flow paths, width-proportional links and hover tooltip. Cyclic graphs are ranked rather than collapsed, and any flow it cannot draw is named under the diagram. Pure SVG.

Value-per-region map. Equal-area projection by default, quantile / equal-interval / threshold class breaks, an explicit no-data fill and legend entry, a hatch for figures the host flags as estimates, and one tab stop with arrow-key navigation. Bring your own GeoJSON or TopoJSON — adapters and a simplifier are included. Pure SVG.

Points of interest on a projected map, over an optional base layer of shapes. Markers that would overlap merge into one pin that states its own count, so the map never shows fewer things than it has. Shares the choropleth's projections and fitting. Pure SVG.

Squarified treemap with 4 visual variants: corporate solid, mosaic card grid, dark blueprint and hierarchy explorer. Supports nested data. Pure SVG.

Featured measure against a comparative target and qualitative bands, horizontal or vertical, on a shared or per-row scale. Pure SVG.

Distribution chart with Tukey 1.5×IQR whiskers, outlier dots, an optional mean marker, raw-samples or server-computed summaries, and a value axis that is deliberately not zero-based. Pure SVG.

Concentric progress rings, one per track, with per-track scales, a configurable sweep and start angle, a centre readout and a legend. States under the plot what concentric arcs cannot be read for, and marks any track past the end of its scale. Pure SVG.

Nightingale rose / polar area chart with area-proportional (√) or linear radius scaling, padded wedges, labelled grid rings and a configurable start angle. Pure SVG.

Row × column heatmap with 4 variants (default, calendar, blocks, glow), 9 color schemes (viridis, magma and cividis sampled from the published colormaps, plus six single-hue ramps), a no-jump tooltip and ambient hover glow. Pure CSS.

2 orientations with floating bars, dashed connectors, increase/decrease/total color-coding, data labels, tooltips and per-bar entrance animations. Pure SVG.

Linear progress with indeterminate, striped, animated and glow modes across 5 variants and 4 sizes.

Circular SVG progress indicator in xs–xl sizes with default, gradient, dashed and glow variants and a custom label slot.

Loading indicators in 4 styles (border, dots, pulse, bars), 5 sizes, 8 color variants and an optional fullscreen overlay.

Hover/click/focus-triggered tooltip with 4 positions, 6 theme variants and a configurable show delay.

Dismissible alert banners in 5 semantic variants and multiple display styles.

Imperative toast stack with 4 variants, 6 anchor positions, action callbacks and an auto-dismiss timer.

6 premium variants: dropdown, drawer, inline, activity feed, compact and grouped — with mark-as-read, dismiss, search, tab filtering and inline actions.

Premium dialog overlay with 6 semantic variants, 7 sizes, bottom-sheet & loading states, slot-based projection, focus trap and ESC/backdrop close.

Premium slide-over panel from any edge with 6 semantic variants, 6 sizes, overlay/push modes, built-in variant-styled footer actions, loading & non-modal states, and ESC/backdrop close.

Premium anchored panel with 7 variants, 8 auto-flipping placements, an optional pointer arrow, click/hover/manual triggers, and header/subtitle/close.

The application menu bar — File · Edit · View. One tab stop with a roving tabindex, Left/Right between menus that carries the open menu along, hover that switches only once something is open, and first-letter type-ahead. The panels are Dropdown Menu, so portalling, flipping and the in-panel keyboard model are shared rather than copied.

Premium action menu with checkbox/radio items, 2 themes, 3 sizes, groups, descriptions, badges, header/footer slots, type-ahead keyboard nav and auto-flipping placement.

The right-click context menu built on Dropdown Menu — same items, theming and keyboard nav, opened at the cursor via `triggerMode="contextmenu"` or the public `openAt(x, y)` method instead of a click-toggled trigger.

Focused confirmation modal with 6 variants, 3 sizes, a type-to-confirm guard, single-button acknowledge mode, loading state, custom labels and async support.

Spotlight-style launcher with light/dark variants, 3 sizes, fuzzy search, ⌘K shortcut, grouped results, query highlighting, recent history, async/remote loading, disabled commands and keyboard navigation.

8 onboarding variants: modal (free) plus slideshow, tooltip, spotlight, beacon, checklist, progress steps and announcement (Pro). Portal-based overlay with keyboard navigation.

Loading placeholders with wave/pulse animations and preset layouts.

Full-page or inline empty states with icons, titles and action buttons.

Success / error / warning / info / empty result pages with semantic SVG icons, a title, description and content/action projection slots.

Floating panel anchored to a trigger element in 4 positions and 3 alignments — for quick-view cards, mini forms and rich detail panels. A Popover preset: new code should use `sv-popover` with `SV_POPOUT_PRESET`; `sv-popout` stays supported until the next major.

4 visual variants, 5 separator styles, a sibling-page dropdown switcher, badges, disabled crumbs, collapsible middle crumbs, a loading skeleton, and full keyboard support.

6 visual styles (underline, pills, boxed, lifted, border-card, unstyled), dismissible and scrollable tabs, vertical layout, keyboard navigation and lazy panels.

Smart page-window with ellipsis, a page-size selector, 3 variants and 3 sizes.

7 variants — six wizard styles (default, pill, minimal, icon, dot, line) plus a non-interactive tracker — all free, plus horizontal/vertical orientation. Linear wizard mode, guard rules, and telemetry are available in the Pro package.

10 varieties: default, flush, separated, filled, multi-expand, icon placements, badges & subtitles and disabled items. Sizes (sm / md / lg), CSS-grid animation and keyboard navigation are free; multi-expand is available in the Pro package.

The reusable half of a dashboard sidebar: grouped items, sub-navigation, a collapsed rail and a mobile drawer — with no router dependency and no brand welded in. Bring your own header and footer.

Back and Up as two different controls, because they are two different promises: back is history and may leave the site, up is hierarchy and is always defined. A back control with nothing behind it goes up rather than dead-ending, and says which it did.

Compact navigation as a single native select: grouped destinations, the current one shown, and the platform picker on touch. The small form of a tab strip or an anchor rail.

Multi-column dropdown header navigation. Top-level items link directly or open a mega panel with columns of links (headings, descriptions, badges, icons) and an optional featured promo. Opens on hover or click, with a hover bridge, animated panel and keyboard support.

An "on this page" navigation list that tracks scroll position with an IntersectionObserver and smooth-scrolls to a section on click. Vertical (side-rail) and horizontal (pill-row) layouts.

5 visual variants (default, glass, bordered, elevated, ghost) and 3 sizes, with grouped action buttons, separators and an actionClick output.

Horizontal and vertical resizable panels with a drag handle, collapsible sides, a two-way splitAt model and optional layout persistence.

Floating action button with up/down/left/right expand directions, a custom action list, pulse animation, tooltip labels and viewport-aware positioning that auto-flips and clamps so the menu never leaves the screen.

Fixed scroll-progress ring overlay with circle/rounded/pill shapes, four premium appearances (solid, glass, gradient, outline) and a configurable show threshold.

Horizontal and vertical dividers with solid/dashed/dotted/gradient/text/icon variants and start/center/end alignment.

Copy button in inline, block and icon-only variants with success feedback, the async Clipboard API and an execCommand fallback for older browsers.

Animated height expand/collapse container using pure JS measurement (no @angular/animations) with lazy content rendering and accessible aria-hidden handling.

Animated count-up display with easing functions, IntersectionObserver start-on-view, prefix/suffix, thousands separator, decimal precision, auto-fit (scales down so large values never overflow) and reduced-motion support. Includes premium `odometer` (rolling reels), `scramble`, and `currency` (Intl) variants.

A styled scrollbar drawn over a genuinely scrolling element — never in place of one. Minimum grabbable thumb with the track arithmetic corrected for it, click-to-page on the track, and edge fades that are the only affordance a hidden scrollbar leaves.

Pin an element while the page scrolls, with the placeholder that stops the jump. Optional container boundary so a pinned sidebar parks at the end of its section instead of floating over the footer.

A repeating overlay tiled from the ROTATED bounding box, so the marks neither collide nor gap at an angle. Staggered rows, an opacity band that says which way it is wrong, and a signature a host can compare against to detect tampering.

Premium multi-column marketing / commerce footer: a brand block (logo, tagline, socials), configurable link columns, an optional newsletter signup, and a bottom bar with copyright, legal links and payment chips. Default, minimal and always-dark variants.

4 premium chat variants: fullscreen assistant, floating widget, embedded panel and compact sidebar — with streaming indicators, tool/function-call cards, file attachments, copyable code blocks and markdown-ready messages.

5 variants: `feed` (priority-ordered list), `grid` (confidence-ring cards), `inline` (single featured insight), `panel` (detailed insight with evidence) and `anomaly` (the baseline behind each claim) — with confidence provenance, evidence links, trend arrows, sparklines and action buttons.

4 variants: overview KPI grid, usage breakdown (donut + bars), cost trend area chart and model comparison table for LLM usage and cost analysis.

4 variants: `feed` (filterable event feed with opt-in step replay), `timeline`, `compact` (dense table with expandable rows) and `trace` (span waterfall with a step-detail panel). Tracks agent runs, tool calls, LLM steps and retrieval operations. Events are shown in arrival order, clock skew is reported rather than re-sorted, and every variant caps its rows and says when it has.

5 variants: grid card gallery, list view, template editor, picker modal and playground (two templates side by side on one set of variables) — with variable injection, token counter, usage stats, category filter and version history.

4 variants: dropdown picker, card grid, side-by-side comparison and settings panel — with provider badges, capability tags and latency/cost/context indicators.

4 variants: overview dashboard, source management, ingestion pipeline and health monitoring — with index stats, sync progress, pipeline stages, an alert list, and opt-in file upload that adds and indexes new sources.

4 variants: canvas node graph, list step editor, template gallery and run history — with a column-layout DAG, enable/disable toggles, category filter and execution logs.

Inbox for work an agent is doing on its own: queued, running, done. Progress derived from a plan that checks itself off, an ETA extrapolated from observed pace, and cancel or retry per task. Four variants — inbox, compact, grouped and detail.

Registry for the tools and MCP servers an agent is connected to. Connection lifecycle and health, credential expiry, per-tool parameter schemas, usage and error rates, a scope permission matrix and a recent call log. Four variants — grid, table, permissions and detail.

Human-in-the-loop gate for an action an agent proposes but has not taken. Editable arguments, a risk level that arms destructive actions, a diff of what will change, a cost estimate, an expiry countdown and always-allow memory. Four variants — inline, modal, inbox queue and policy record.

Reasoning-summary display for a reasoning model. Streams token by token, stays open while the model thinks, then collapses itself to a summary chip the moment it finishes — the lifecycle that separates it from a timeline. Four variants: inline chip, numbered steps, streaming and nested. Per-step kind, status, latency, tokens and attributed confidence; sub-thoughts render recursively; content goes through sv-streaming-markdown so nothing reaches the DOM as markup. `[disclosure]` governs what a viewer may see, and a step’s verbatim provider reasoning is off unless asked for by name.

Inspector for the tool / function calls an agent makes. 4 variants: compact one-line pills, expanded disclosure, streaming (arguments filling in) and error (message, stack trace and retry) — with per-call latency and token attribution, and recursive sub-calls.

5 variants: summary (semicircle gauge + breakdown + KPIs), topics (stacked sentiment bars), timeline (SVG area + volume), feed (filter pills + source badges + score bars) and aspects (sentiment per subject — what is loved and what is hated).

4 variants: toolbar (actions + readability stats + live editor), tone picker with preview, suggestions (accept/reject rewrite cards) and history (revision timeline with diff).

Numbered citations attached to an answer, with the coverage strip that names the passages nothing supports. 3 variants: inline chips, source cards and a side panel.

A voice turn with a level meter driven by measured amplitude, interim-vs-final transcript rendering, and barge-in as a real transition. 3 variants: button, transcript and call.

Two eval runs compared honestly: pass rates with their intervals, the cases that actually flipped, and a delta that stays grey when the sample cannot support it. 3 variants: summary, compare and cases.

Safety policy as an operating surface: the rules, what they caught, and the answer the policy actually produced. 3 variants: rules, feed and redaction preview.

Conversation and generated document side by side, with a revision history that records why each version says what it says. 3 variants: split, focus and history.

A 2D projection of an embedding space with clusters and lasso selection, drawn without inviting the false reading every t-SNE plot invites. 3 variants: scatter, clusters and selection.

The AI pack's privacy contract, on screen: what is masked, what is deliberately not, which rules do not compile, whether content can be unmasked, copied or sent to analytics — and what a policy let through when run against real prompts, transcripts and tool arguments. 4 variants: policy, scan, retention and surfaces.