# Component index 288 custom elements, grouped by the source family they live in. **Reading one component.** Its reference file path is derived from the tag — no search needed: `llms/components/.md` (e.g. `llms/components/lr-table.md`). Each is self-contained: import path, optional peers, properties, events, slots, CSS parts, themeable custom properties, a usage snippet, and known gotchas — a few hundred tokens instead of the whole catalog. **Importing.** Registration paths are stable aliases derived from the tag: `import '@aceshooting/lyra-ui/components/lr-table.js';` registers `` and remains valid if its internal family folder moves. Class-only `.class.js` entries intentionally keep their owning family path and do not register the tag. **Everything else.** Library-wide behavior (base class, events, form association, `locale`/ `strings`, TypeScript, frameworks, SSR): `llms/shared.md`. Design tokens: `llms/tokens.md`. Optional peers: `llms/peers.md`. Safe `wa-*`/`sl-*` migration: `llms/migration.md`. ## Form controls & inputs — `components/forms/` (29) - `lr-combobox` · lr-combobox.js · `stable` since `4.0.0` — a filterable single/multi select that combines a text input with a listbox. - `lr-option` · lr-option.js · `stable` since `4.0.0` — a selectable option for `` and ``. - `lr-select` · lr-select.js · `stable` since `4.0.0` — a plain closed-list dropdown: a direct `` counterpart to ``/``. - `lr-date-picker` · lr-date-picker.js · `experimental` since `4.0.0` — an inline month-grid calendar for picking a single date or a date range. - `lr-date-input` · lr-date-input.js · `experimental` since `4.0.0` — a date field with an attached calendar popover. - `lr-textarea` · lr-textarea.js · `stable` since `4.0.0` — a multiline plain-text input primitive, form-associated via the `FormAssociated` mixin (see ``/`` for th... - `lr-button` · lr-button.js · `stable` since `4.0.0` — a generic action-button primitive. - `lr-icon-button` · lr-icon-button.js · `stable` since `4.0.0` — an accessible icon-only action button. - `lr-input` · lr-input.js · `stable` since `4.0.0` — a single-line plain-text input primitive, the `lr-*` equivalent of a plain `wa-input`, form-associated via the `FormAssociated` mixin (sa... - `lr-number-input` · lr-number-input.js · `stable` since `4.0.0` — a numeric field with the complete `lr-input` form, validation, and native editing contract, plus its own increment/decrement stepper pair. - `lr-time-input` · lr-time-input.js · `stable` since `4.0.0` — a locale-aware segmented time field with an attached column picker. - `lr-native-time-input` · lr-native-time-input.js · `stable` since `8.0.0` — the browser-native time field preserved from Lyra 7. - `lr-phone-input` · lr-phone-input.js · `stable` since `4.0.0` — a country-aware telephone field whose form value is canonical E.164. - `lr-time-range` · lr-time-range.js · `stable` since `4.0.0` — a two-handle brush/scrubber over a numeric domain. - `lr-swatch-picker` · lr-swatch-picker.js · `stable` since `4.0.0` — - a single-select picker over a small, fixed set of color swatches with the WAI-ARIA APG `radiogroup` contract built in: `role="radiogrou... - `lr-checkbox` · lr-checkbox.js · `stable` since `4.0.0` — a boolean form control. - `lr-switch` · lr-switch.js · `stable` since `4.0.0` — a boolean toggle-switch form control. - `lr-slider` · lr-slider.js · `stable` since `4.0.0` — a numeric range control (e.g. - `lr-radio` · lr-radio.js · `stable` since `4.0.0` — a form-associated single-choice control. - `lr-radio-button` · lr-radio-button.js · `stable` since `8.0.0` — a single-choice control rendered as a button rather than a circle. - `lr-otp-input` · lr-otp-input.js · `stable` since `8.0.0` — a form-associated one-time-code field: several character segments that together hold one value. - `lr-radio-group` · lr-radio-group.js · `stable` since `4.0.0` — a labeled, keyboard-navigable group of radios. - `lr-checkbox-group` · lr-checkbox-group.js · `stable` since `4.0.0` — a form-associated group of `` elements. - `lr-token-input` · lr-token-input.js · `stable` since `4.0.0` — an editable, form-associated list of removable tokens. - `lr-code-editor` · lr-code-editor.js · `stable` since `4.0.0` — dependency-free multiline code editing surface with optional line numbers. - `lr-color-picker` · lr-color-picker.js · `stable` since `4.0.0` — a form-associated colour picker: a compact swatch trigger that opens a popover with a saturation/brightness grid, a hue slider, an option... - `lr-emoji-picker` · lr-emoji-picker.js · `stable` since `4.0.0` — a searchable, keyboard-navigable, form-associated emoji picker. - `lr-rubric-form` · lr-rubric-form.js · `stable` since `4.0.0` — a configurable annotation rubric (LangSmith annotation-queue style): score, category, and freeform-comment keys with a submit-and-next fl... - `lr-locale-picker` · lr-locale-picker.js · `stable` since `6.0.0` — a closed-list locale switcher over the library's own locale registry. ## Data display, dashboards & flow canvas — `components/data/` (26) - `lr-sparkline` · lr-sparkline.js · `stable` since `4.0.0` — a zero-dependency inline SVG trend chart. - `lr-stat` · lr-stat.js · `stable` since `4.0.0` — a KPI/stat card. - `lr-data-grid` · lr-data-grid.js · `experimental` since `4.0.0` — a virtualized data grid for client or server data, with sorting, filtering, grouping, trees, paging, pinning, resizing, reordering, selec... - `lr-table` · lr-table.js · `stable` since `4.0.0` — a sort/select-aware data table. - `lr-pagination` · lr-pagination.js · `stable` since `4.0.0` — controlled, server-friendly page navigation: a numbered page list with elided gaps, optional first/last controls, an optional item-range... - `lr-gauge` · lr-gauge.js · `stable` since `4.0.0` — a radial, full-circle ring, or linear meter. - `lr-funnel` · lr-funnel.js · `experimental` since `12.0.0` — a dependency-free conversion funnel: an ordered set of stages, each drawn as a bar whose length is that stage's share of the FIRST stage,... - `lr-word-cloud` · lr-word-cloud.js · `stable` since `4.0.0` — a zero-dependency SVG word/tag cloud. - `lr-heatmap` · lr-heatmap.js · `stable` since `4.0.0` — a Canvas heatmap with a DPR-aware, resize-aware redraw loop. - `lr-sequence-strip` · lr-sequence-strip.js · `stable` since `4.0.0` — a compact, one-thin-cell-per-item strip visualizing a sequence of categorical states, with an optional secondary per-cell marker. - `lr-tree` · lr-tree.js · `stable` since `4.0.0` — an expand/collapse hierarchy for graph/document navigation. - `lr-tree-item` · lr-tree-item.js · `stable` since `8.0.0` — one row of ``, in either of two child models. - `lr-flow-canvas` · lr-flow-canvas.js · `stable` since `4.0.0` — a pannable/zoomable DAG workflow canvas: positions HTML node cards, draws SVG edges between their handles, runs a shared layered auto-lay... - `lr-flow-node` · lr-flow-node.js · `stable` since `4.0.0` — the card a workflow node renders as: header/body/toolbar chrome, tool-lifecycle status tones, and the named connection-handle elements ed... - `lr-flow-minimap` · lr-flow-minimap.js · `stable` since `4.0.0` — a corner overview map of a `lr-flow-canvas`: scaled node rectangles plus a draggable viewport rectangle, for orientation and fast navigat... - `lr-flow-controls` · lr-flow-controls.js · `stable` since `4.0.0` — the canvas's button cluster: zoom in/out, fit, and interaction lock, so every flow surface ships the same affordances without hosts rebui... - `lr-flow-run-status` · lr-flow-run-status.js · `stable` since `9.0.0` — execution-state presentation for a `lr-flow-canvas`: pushes a `FlowRunDecorations` map into the resolved canvas (the canvas itself render... - `lr-context-meter` · lr-context-meter.js · `stable` since `4.0.0` — a segmented occupancy meter (bar or ring) for showing how a fixed capacity (a model's context window, a token budget, any consumable quot... - `lr-calendar` · lr-calendar.js · `stable` since `4.0.0` — responsive month calendar with event markers and agenda mode. - `lr-timeline` · lr-timeline.js · `stable` since `4.0.0` — an ordered, connected sequence of past-event rows (an audit trail, an agent action history, a changelog) composed from ``'s default slot. - `lr-file-tree` · lr-file-tree.js · `stable` since `4.0.0` — a file-explorer preset over `` + ``: path-keyed nodes with git-status/diff-count badges, lazy directory loading, a... - `lr-env-list` · lr-env-list.js · `stable` since `4.0.0` — masked key/value list for environment variables and secrets, with per-row reveal and copy. - `lr-document-library` · lr-document-library.js · `stable` since `4.1.0` — a searchable, filterable inventory of documents with versions, tags, owners, freshness, and bulk selection. - `lr-graph-query-builder` · lr-graph-query-builder.js · `stable` since `4.1.0` — an editor for a single typed relationship/path filter (`GraphQuery`) over a knowledge graph: start/end entity anchors, relationship-type... - `lr-condition-builder` · lr-condition-builder.js · `stable` since `9.0.0` — a composable structured-condition builder for tabular/dashboard data: a flat list of field/operator/value condition rows combined with on... ## Layout, navigation & structure — `components/layout/` (36) - `lr-multi-split` · lr-multi-split.js · `stable` since `9.0.0` — resizable panels for dashboard layouts. - `lr-split-panel` · lr-split-panel.js · `stable` since `8.0.0` — an accessible, draggable two-pane layout. - `lr-widget` · lr-widget.js · `stable` since `4.0.0` — a titled panel shell with an optional collapse toggle and an optional fullscreen-expand toggle. - `lr-carousel` · lr-carousel.js · `stable` since `4.0.0` — a scroll-snap carousel for arbitrary slotted content. - `lr-carousel-item` · lr-carousel-item.js · `stable` since `4.0.0` — an optional semantic wrapper for one child of ``. - `lr-button-group` · lr-button-group.js · `stable` since `4.0.0` — a responsive grouping primitive for related actions. - `lr-scroller` · lr-scroller.js · `stable` since `4.0.0` — a responsive overflow surface with optional previous and next controls. - `lr-tab-group` · lr-tab-group.js · `stable` since `8.0.0` — a tab strip composed from direct `` and `` children. - `lr-stepper` · lr-stepper.js · `stable` since `4.0.0` — ordered multi-step wizard/form navigation: label + index per step, current/completed/locked/error state, click-to-jump. - `lr-tab` · lr-tab.js · `stable` since `8.0.0` — one tab in a ``'s strip. - `lr-tab-panel` · lr-tab-panel.js · `stable` since `8.0.0` — the content revealed by the `` whose `panel` matches this element's `name`. - `lr-control-group` · lr-control-group.js · `stable` since `4.0.0` — a responsive layout primitive for a row of mixed form controls and action buttons (e.g. - `lr-reorder-list` · lr-reorder-list.js · `stable` since `6.0.0` — a generic vertical list of `` rows, reorderable via per-row move-up/move-down buttons (always available) or Ctrl/Cmd+Arr... - `lr-reorder-item` · lr-reorder-item.js · `stable` since `6.0.0` — one row inside ``. - `lr-segmented` · lr-segmented.js · `stable` since `4.0.0` — a single-select button row with the WAI-ARIA APG `radiogroup` contract built in: `role="radiogroup"`/`role="radio"`, roving tabindex, aut... - `lr-virtual-list` · lr-virtual-list.js · `stable` since `4.0.0` — a generic windowed/virtualized list host. - `lr-app-rail` · lr-app-rail.js · `stable` since `4.0.0` — a responsive navigation rail that adapts across three presentations as the *viewport* narrows (not this element's own inline size — see t... - `lr-app-rail-item` · lr-app-rail-item.js · `stable` since `4.0.0` — an explicit icon/label navigation item for ``. - `lr-app-rail-group` · lr-app-rail-group.js · `experimental` since `16.0.0` — a titled section of navigation items inside ``. - `lr-responsive-panel` · lr-responsive-panel.js · `stable` since `4.0.0` — the same slotted content either docked inline in the page's normal layout flow (desktop) or presented as a full-screen/ bottom-sheet over... - `lr-menu-label` · lr-menu-label.js · `stable` since `8.0.0` — a non-interactive section heading inside ``'s default slot. - `lr-menu` · lr-menu.js · `stable` since `4.0.0` — the inline semantic controller mapped from ``. - `lr-menu-item` · lr-menu-item.js · `stable` since `4.0.0` — a single action row inside ``'s default slot. - `lr-dropdown-item` · lr-dropdown-item.js · `stable` since `4.0.0` — the Web Awesome-compatible name for a menu item. - `lr-dock-panel` · lr-dock-panel.js · `stable` since `4.0.0` — a single panel docked to one edge of whatever contains it, resizable by dragging its inner edge. - `lr-card` · lr-card.js · `stable` since `4.0.0` — a generic, styled bordered content container: the "small bordered surface with padding" idiom common to hero highlights, clickable grid t... - `lr-command-palette` · lr-command-palette.js · `stable` since `4.0.0` — searchable application command menu with keyboard navigation. - `lr-details` · lr-details.js · `stable` since `4.0.0` — an accessible disclosure panel. - `lr-accordion` · lr-accordion.js · `stable` since `4.0.0` — coordinates accessible, vertically stacked expandable sections. - `lr-accordion-item` · lr-accordion-item.js · `stable` since `4.0.0` — an accessible expandable section for ``. - `lr-breadcrumb` · lr-breadcrumb.js · `stable` since `4.0.0` — a responsive navigation trail. - `lr-breadcrumb-item` · lr-breadcrumb-item.js · `stable` since `4.0.0` — one link, button, or current-page label in a breadcrumb. - `lr-dashboard-grid` · lr-dashboard-grid.js · `stable` since `4.1.0` — a responsive, keyboard-accessible widget grid: positions `layout` entries (`LyraDashboardCell`: `x`/`y`/`w`/`h` grid units + a widget des... - `lr-drilldown-panel` · lr-drilldown-panel.js · `stable` since `4.1.0` — a controlled navigation and category shell for related evidence, documents, entities, and host-rendered agent runs. - `lr-filter-bar` · lr-filter-bar.js · `stable` since `4.1.0` — a row of dashboard filters, each declared by the host (`filters`) rather than invented by this component: every filter composes an existi... - `lr-page` · lr-page.js · `stable` since `8.0.0` — a semantic application/page shell that derives its mobile or desktop presentation from its own allocated inline size. ## Overlays, status & feedback — `components/overlays/` (21) - `lr-toast` · lr-toast.js · `stable` since `4.0.0` — one placement-specific stacking toast region. - `lr-toast-item` · lr-toast-item.js · `stable` since `4.0.0` — a single toast notification. - `lr-empty` · lr-empty.js · `stable` since `4.0.0` — a generic empty/no-data state. - `lr-skeleton` · lr-skeleton.js · `stable` since `4.0.0` — a loading placeholder mirroring the public Web Awesome/Shoelace skeleton surface under the `lr-` prefix. - `lr-drawer` · lr-drawer.js · `stable` since `4.0.0` — a modal panel anchored to one logical edge of the viewport. - `lr-dialog` · lr-dialog.js · `stable` since `4.0.0` — a general-purpose modal/overlay. - `lr-chip` · lr-chip.js · `stable` since `4.0.0` — a small, content-agnostic pill for a short label: a tag, an active-filter/scope indicator, etc. - `lr-chip-group` · lr-chip-group.js · `stable` since `4.0.0` — a flex-wrap container for a set of `` children (plain light-DOM composition — direct children are the chips, the same shape ``, plus... - `lr-alert` · lr-alert.js · `stable` since `8.0.0` — a closed-by-default inline alert that can also move into the shared toast stack. - `lr-callout` · lr-callout.js · `stable` since `4.0.0` — an inline message surface for status, warning, and error content. - `lr-rating` · lr-rating.js · `stable` since `4.0.0` — a keyboard-accessible star rating control. ## Utilities, formatting & observers — `components/utility/` (20) - `lr-export-button` · lr-export-button.js · `stable` since `4.0.0` — a CSV/JSON download button, single-format or a format-choice menu. - `lr-copy-button` · lr-copy-button.js · `stable` since `4.0.0` — a standalone icon-only copy-to-clipboard affordance for a plain single/multi-line text value in a layout the consumer controls (e.g. - `lr-resize-observer` · lr-resize-observer.js · `stable` since `4.0.0` — observes the first-party or consumer-owned elements in its default slot and emits typed resize entries. - `lr-intersection-observer` · lr-intersection-observer.js · `stable` since `4.0.0` — observes slotted targets entering or leaving a viewport and emits the native intersection entries without adding layout or requiring cons... - `lr-mutation-observer` · lr-mutation-observer.js · `stable` since `4.0.0` — observes element children in the default slot and forwards native mutation records as a composed event. - `lr-json-viewer` · lr-json-viewer.js · `stable` since `4.0.0` — a collapsible, copyable tree view for an arbitrary JSON-serializable value (object/array/string/number/boolean/null/ undefined). - `lr-live-region` · lr-live-region.js · `stable` since `4.0.0` — a visually-hidden ARIA live region that throttles and coalesces announcements instead of relaying every call verbatim. - `lr-poll-status` · lr-poll-status.js · `stable` since `4.0.0` — a "next scheduled refresh" countdown with a built-in pause control: a ticking `M:SS` display counting down to the next scheduled action,... - `lr-mention-popover` · lr-mention-popover.js · `stable` since `4.0.0` — a caret-anchored, keyboard-navigable popover for `@`-mention and `/`-slash-command autocomplete inside a plain-text ``/`<input>... - `lr-diff-view` · lr-diff-view.js · `stable` since `4.0.0` — a real two-string line diff (Hirschberg LCS alignment), rendered as interleaved unified-diff output -- not diff-flavored syntax highlight... - `lr-icon` · lr-icon.js · `stable` since `4.0.0` — an SVG icon primitive. - `lr-visually-hidden` · lr-visually-hidden.js · `stable` since `8.0.0` — hides its content from sight while leaving it in the accessibility tree, so screen readers still announce it. - `lr-divider` · lr-divider.js · `stable` since `4.0.0` — a themeable semantic separator. - `lr-format-number` · lr-format-number.js · `stable` since `4.0.0` — locale-aware `Intl.NumberFormat` output. - `lr-format-date` · lr-format-date.js · `stable` since `4.0.0` — locale-aware `Intl.DateTimeFormat` output. - `lr-format-bytes` · lr-format-bytes.js · `stable` since `4.0.0` — locale-aware byte-size formatting. - `lr-relative-time` · lr-relative-time.js · `stable` since `4.0.0` — locale-aware relative time that can refresh automatically. - `lr-known-date` · lr-known-date.js · `stable` since `4.0.0` — a date a user already knows (a birthdate, a passport issue/expiry date) collected as three plain, labeled day/month/year number fields in... - `lr-random-content` · lr-random-content.js · `stable` since `4.0.0` — displays a randomly (or sequentially) chosen subset of its slotted children and hides the rest, for A/B copy testing, testimonial/quote r... - `lr-tour` · lr-tour.js · `stable` since `4.0.0` — - a spotlight-and-step guided walkthrough for first-run onboarding. ## Media, files & maps — `components/media/` (22) - `lr-flag` · lr-flag.js · `stable` since `4.0.0` — a country/language flag. - `lr-sequence-playback` · lr-sequence-playback.js · `stable` since `9.0.0` — steps a current index through `[0, itemCount)` on a fixed interval (play/pause), the common building block behind ad-hoc play-timers in t... - `lr-map` · lr-map.js · `stable` since `4.0.0` — a maplibre-gl wrapper with a declarative legend, choropleth GeoJSON layer, markers, and additive `dataLayers` GeoJSON overlays (arbitrary... - `lr-drop-zone` · lr-drop-zone.js · `experimental` since `16.0.0` — - a drag-and-drop region wrapper with no file input of its own. - `lr-file-input` · lr-file-input.js · `stable` since `4.0.0` — a drag-drop + click-to-browse file dropzone. - `lr-image-comparer` · lr-image-comparer.js · `stable` since `4.0.0` — compares two slotted surfaces with a keyboard- accessible range divider. - `lr-zoomable-frame` · lr-zoomable-frame.js · `stable` since `4.0.0` — a sandboxed iframe preview with discrete zoom controls. - `lr-pan-zoom` · lr-pan-zoom.js · `stable` since `8.0.0` — a scrollable frame for inspecting slotted or image content at a bounded zoom level. - `lr-attachment-chip` · lr-attachment-chip.js · `stable` since `4.0.0` — a compact chip representing one file queued for (or already part of) a chat message: a composer's pre-send attachment tray, or a sent mes... - `lr-file-icon` · lr-file-icon.js · `stable` since `4.0.0` — Displays a localized, tokenized file-type badge from a MIME type. - `lr-media-card` · lr-media-card.js · `stable` since `4.0.0` — a lightweight inline preview for one already-sent, already-available attachment inside a rendered chat message body (e.g. - `lr-attachment-trigger` · lr-attachment-trigger.js · `stable` since `4.0.0` — a compact attach affordance designed for a chat composer's start slot (see `<lr-chat-composer>`'s own `start` slot, which this drops stra... - `lr-avatar` · lr-avatar.js · `stable` since `4.0.0` — a small, fixed-size identity marker: an image, an `icon`-slotted fallback glyph, or an initials fallback, in that priority order. - `lr-animated-image` · lr-animated-image.js · `stable` since `4.0.0` — - displays an animated GIF/APNG/WebP with a play/pause control, defaulting to a frozen first frame both at rest and automatically under `... - `lr-animation` · lr-animation.js · `stable` since `4.0.0` — `<lr-animation>` declaratively animates its single slotted child through the native Web Animations API: a small curated preset catalog (`... - `lr-avatar-group` · lr-avatar-group.js · `stable` since `4.0.0` — stacks a set of slotted `<lr-avatar>` children into a single overlapping row (negative-margin overlap, ring border so each circle reads a... - `lr-lightbox` · lr-lightbox.js · `stable` since `4.0.0` — a full-screen, modal, click-to-enlarge image viewer with prev/next navigation across an ordered set of images. - `lr-qr-code` · lr-qr-code.js · `stable` since `4.0.0` — - encodes `value` as a QR symbol with the optional `qrcode` peer dependency (Reed-Solomon error correction and every other algorithmic st... - `lr-image-viewer` · lr-image-viewer.js · `stable` since `4.0.0` — full pan/zoom raster-image viewer with labeled region highlights and opt-in region annotation, the landing surface for `region`-anchored... - `lr-av-player` · lr-av-player.js · `stable` since `4.0.0` — audio/video player built on a native `<audio>`/`<video>` element, plus a cue transcript synced to `currentTime`, `time-range` anchor/high... - `lr-video` · lr-video.js · `experimental` since `8.0.0` — a native, inline video player with three custom-control presets, selectable captions, fullscreen and picture-in-picture capability gates,... - `lr-video-playlist` · lr-video-playlist.js · `experimental` since `8.0.0` — a direct-child `<lr-video>` playlist with a navigable current-item list. ## Charts — `components/charts/` (12) - `lr-chart` · lr-chart.js · `stable` since `4.0.0` — the core Chart.js wrapper used directly and by the typed Chart.js tags plus `<lr-histogram>`. - `lr-lite-chart` · lr-lite-chart.js · `stable` since `4.0.0` — a dependency-free bar/line chart, plain SVG/DOM rendering with zero peer dependencies (unlike `lr-chart`, which wraps `chart.js`). - `lr-line-chart` · lr-line-chart.js · `stable` since `4.0.0` — `<lr-chart>` with a `"line"` default and the mirrored writable type. - `lr-bar-chart` · lr-bar-chart.js · `stable` since `4.0.0` — `<lr-chart>` with a `"bar"` default. - `lr-pie-chart` · lr-pie-chart.js · `stable` since `4.0.0` — `<lr-chart>` with a `"pie"` default and the mirrored writable type. - `lr-doughnut-chart` · lr-doughnut-chart.js · `stable` since `4.0.0` — `<lr-chart>` with a `"doughnut"` default and the mirrored writable type. - `lr-radar-chart` · lr-radar-chart.js · `stable` since `4.0.0` — `<lr-chart>` with a `"radar"` default and the mirrored writable type. - `lr-polar-area-chart` · lr-polar-area-chart.js · `stable` since `4.0.0` — `<lr-chart>` with a `"polarArea"` default and the mirrored writable type. - `lr-bubble-chart` · lr-bubble-chart.js · `stable` since `4.0.0` — `<lr-chart>` with a `"bubble"` default and the mirrored writable type. - `lr-scatter-chart` · lr-scatter-chart.js · `stable` since `4.0.0` — `<lr-chart>` with a `"scatter"` default and the mirrored writable type. - `lr-histogram` · lr-histogram.js · `stable` since `4.0.0` — bins `values` into `bins` equal-width buckets and renders them as a bar chart. - `lr-box-plot` · lr-box-plot.js · `stable` since `4.0.0` — a box-and-whisker chart from precomputed five-number summaries (no raw sample data is shipped to the browser). ## Document & file viewers — `components/viewers/` (23) - `lr-document-preview` · lr-document-preview.js · `stable` since `4.0.0` — a format-dispatching viewer for one document/ attachment, plus the visual state machine for an async server-side conversion a host app ru... - `lr-document-viewer` · lr-document-viewer.js · `stable` since `4.0.0` — A dialog-hosted document viewer with a pluggable MIME-type renderer registry. - `lr-docx-viewer` · lr-docx-viewer.js · `stable` since `4.0.0` — Renders a DOCX document as sanitized semantic HTML using the optional `mammoth` converter and `dompurify` sanitizer peers. - `lr-email-viewer` · lr-email-viewer.js · `stable` since `4.0.0` — Parses `.eml` messages with the optional `postal-mime` peer and renders their HTML body only after DOMPurify sanitization and inside a pa... - `lr-calendar-viewer` · lr-calendar-viewer.js · `stable` since `4.0.0` — Parses `.ics` calendars with the optional `ical.js` peer and renders each VEVENT as plain text, preserving summaries, DATE/DATE-TIME sema... - `lr-archive-viewer` · lr-archive-viewer.js · `stable` since `4.0.0` — Lists names and declared uncompressed sizes in a ZIP archive without rendering entry contents or loading an archive parser. - `lr-ebook-viewer` · lr-ebook-viewer.js · `stable` since `4.0.0` — Renders an EPUB with the optional `epubjs` peer. - `lr-pptx-viewer` · lr-pptx-viewer.js · `stable` since `4.0.0` — Best-effort client-side PPTX viewer backed by `@aiden0z/pptx-renderer`. - `lr-svg-viewer` · lr-svg-viewer.js · `stable` since `4.0.0` — Fetches and safely renders an inline SVG document. - `lr-html-viewer` · lr-html-viewer.js · `stable` since `4.0.0` — Fetches and safely renders an inline HTML document. - `lr-dataset-viewer` · lr-dataset-viewer.js · `stable` since `4.0.0` — Fetches delimited text and renders a virtualized, accessible data table: a `role="table"` container with a sticky `role="row"` header, co... - `lr-contact-viewer` · lr-contact-viewer.js · `stable` since `4.0.0` — Fetches a vCard document and renders one accessible card per contact. - `lr-pdf-viewer` · lr-pdf-viewer.js · `stable` since `4.0.0` — Fetches PDF bytes and renders their pages with the optional `pdfjs-dist` peer. - `lr-spreadsheet-viewer` · lr-spreadsheet-viewer.js · `stable` since `4.0.0` — Fetches and renders `.xlsx` and legacy `.xls` workbooks with virtualized rows and sheet tabs. - `lr-csv-viewer` · lr-csv-viewer.js · `stable` since `4.0.0` — Fetches CSV text, parses quoted fields with PapaParse, and virtualizes its rows. - `lr-include` · lr-include.js · `stable` since `4.0.0` — `<lr-include>` loads an HTML fragment from `src` and transcludes it into the page as sanitized light-DOM content, so the fragment partici... - `lr-highlight-layer` · lr-highlight-layer.js · `stable` since `4.0.0` — a presentational overlay that paints highlight rectangles (percent-of-box coordinates) over positioned content and owns their activation,... - `lr-page-rail` · lr-page-rail.js · `stable` since `4.0.0` — a virtualized vertical thumbnail rail for page-addressed documents, with per-page highlight heat markers. - `lr-notebook-viewer` · lr-notebook-viewer.js · `stable` since `4.0.0` — read-only Jupyter notebook (nbformat 4.x) renderer, composing existing components per cell. - `lr-xml-viewer` · lr-xml-viewer.js · `stable` since `4.0.0` — collapsible, copyable, `DOMParser`-based tree view for XML documents, mirroring `lr-json-viewer`'s UX (`collapsed-depth`, `copyable`, str... - `lr-document-compare` · lr-document-compare.js · `stable` since `4.1.0` — side-by-side or inline comparison of two document versions, composed entirely from two existing primitives rather than reimplementing eit... - `lr-geojson-viewer` · lr-geojson-viewer.js · `stable` since `9.0.0` — document-registry bridge rendering a fetched GeoJSON file through `<lr-map>`'s `dataLayers`. - `lr-geojson-view` · lr-geojson-view.js · `stable` since `4.0.0` — Permanent compatibility class for the pre-v9 `lr-geojson-view` tag. ## Conversation & chat UI — `components/conversation/` (34) - `lr-markdown` · lr-markdown.js · `stable` since `4.0.0` — sanitized Markdown-to-HTML rendering (GFM tables, fenced code blocks, links, blockquotes) built on the optional peer dependencies `marked... - `lr-markdown-core` · lr-markdown-core.js · `stable` since `4.0.0` — a build-lean variant of `<lr-markdown>` for a consumer whose `languages` map already covers every language it will ever render. - `lr-chat-message` · lr-chat-message.js · `stable` since `4.0.0` — a role-based message bubble *shell* for a chat/ agent conversation surface. - `lr-typing-indicator` · lr-typing-indicator.js · `stable` since `4.0.0` — a purely presentational "assistant is responding" presence cue. - `lr-chat-composer` · lr-chat-composer.js · `stable` since `4.0.0` — the message input for a chat/agent conversation surface: an auto-resizing textarea plus a send/stop button. - `lr-stream-status` · lr-stream-status.js · `stable` since `4.0.0` — a compact status indicator for a single streaming connection (SSE, WebSocket, long-poll, …), with built-in heartbeat-aware stall detection. - `lr-conversation-item` · lr-conversation-item.js · `stable` since `4.0.0` — a selectable row representing one chat session in a history sidebar list. - `lr-model-select` · lr-model-select.js · `stable` since `4.0.0` — a provider/model picker that renders as a closed dropdown when a fixed `catalog` is available, or as a filterable free-text combobox when... - `lr-streaming-text` · lr-streaming-text.js · `stable` since `4.0.0` — a token-coalescing incremental text renderer for streaming assistant output, with an optional blinking cursor and auto-detected Markdown... - `lr-streaming-text-core` · lr-streaming-text-core.js · `experimental` since `16.0.0` — a build-lean `<lr-streaming-text>` variant for a consumer whose `languages` map already covers every fenced-code language it will ever st... - `lr-generation-metrics` · lr-generation-metrics.js · `stable` since `9.0.0` — a compact, ticking status readout shown alongside an in-progress AI response: elapsed time, token count, and token-throughput, plus a bui... - `lr-code-block` · lr-code-block.js · `stable` since `4.0.0` — fenced code display with optional lazy syntax highlighting and a copy button. - `lr-code-block-core` · lr-code-block-core.js · `stable` since `4.0.0` — a build-lean variant of `<lr-code-block>` for a consumer whose `languages` map already covers every language it will ever render. - `lr-model-settings-panel` · lr-model-settings-panel.js · `stable` since `4.0.0` — a fixed composition of `<lr-model-select>` and `<lr-slider>` into one agent-configuration card: pick a provider's model, then tune its sa... - `lr-audio-visualizer` · lr-audio-visualizer.js · `stable` since `4.0.0` — a presentational, canvas-drawn voice-activity visualization. - `lr-branch-picker` · lr-branch-picker.js · `stable` since `4.0.0` — the "‹ 2 / 5 ›" navigator across regenerated/edited variants of one message. - `lr-message-actions` · lr-message-actions.js · `stable` since `4.0.0` — the per-message action toolbar for `<lr-chat-message>`'s `actions` slot: opt-in built-ins (copy / regenerate / edit / feedback) that emit... - `lr-message-feedback` · lr-message-feedback.js · `stable` since `4.0.0` — thumbs up/down for one assistant message, with an optional inline detail step (categorical reason chips + a free-text comment) that opens... - `lr-push-to-talk` · lr-push-to-talk.js · `stable` since `4.0.0` — a mic capture button owning the full `getUserMedia` + `MediaRecorder` lifecycle: permission request, recording, optional chunked streamin... - `lr-transcript-feed` · lr-transcript-feed.js · `stable` since `4.0.0` — live captions for an in-progress voice session: speaker-grouped entries, interim-vs-final styling with in-place upgrades keyed by `id`, a... - `lr-handoff-divider` · lr-handoff-divider.js · `stable` since `4.0.0` — a labeled semantic separator marking control transfer between agents in a transcript ("Transferred to Research Agent"), with an optional... - `lr-chat-viewport` · lr-chat-viewport.js · `stable` since `4.0.0` — the transcript scroll container: owns stick-to-bottom behavior while an answer streams, the "jump to latest" pill, and the unread divider. - `lr-suggestion-chips` · lr-suggestion-chips.js · `stable` since `4.0.0` — starter prompts (empty thread) and follow-up suggestions (after a response) as a horizontally scrollable chip row; activation hands the p... - `lr-thread-list` · lr-thread-list.js · `stable` since `4.0.0` — the conversation sidebar: a grouped, searchable list of chat sessions with pin/archive/delete/rename affordances. - `lr-checkpoint` · lr-checkpoint.js · `stable` since `4.0.0` — an inline conversation restore point: a labeled marker between messages whose Restore affordance confirms inline, then hands the host a `... - `lr-usage-badge` · lr-usage-badge.js · `stable` since `4.0.0` — a compact, static resource strip for one message or run: tokens in/out, cost, latency, with a hover/focus tooltip breakdown. - `lr-widget-renderer` · lr-widget-renderer.js · `stable` since `4.0.0` — renders an agent-streamed declarative JSON widget tree through an allowlisted `type -> lyra tag` registry (see `registry.ts`/`resolve.ts`... - `lr-voice-picker` · lr-voice-picker.js · `stable` since `4.0.0` — a TTS voice selector over a host-supplied `catalog`, mirroring `lr-model-select`'s closed-dropdown/free-text-combobox dual mode, stale-va... - `lr-agent-workspace` · lr-agent-workspace.js · `stable` since `4.2.0` — a responsive, controlled shell for an AI conversation and its supporting agent state. - `lr-message-parts` · lr-message-parts.js · `stable` since `7.0.0` — renders ordered, interleavable provider-neutral AI message parts. - `lr-prompt-input` · lr-prompt-input.js · `stable` since `7.0.0` — a composed AI prompt surface combining the chat composer with attachments, model and voice selection, retrieval sources, mentions, slash... - `lr-prompt-queue` · lr-prompt-queue.js · `stable` since `7.0.0` — a controlled queue of follow-up prompts that can be edited, reordered, removed, or sent immediately while another agent turn is active. - `lr-selection-toolbar` · lr-selection-toolbar.js · `stable` since `7.0.0` — a nonmodal action toolbar positioned above selected text. - `lr-realtime-session` · lr-realtime-session.js · `stable` since `7.0.0` — a provider-neutral voice-session shell composing connection status, live activity, transcript, native capture, mute, interruption, and co... ## Agent tooling, tool calls & evaluation — `components/agent-tools/` (35) - `lr-tool-call-chip` · lr-tool-call-chip.js · `stable` since `4.0.0` — a compact inline pill representing one tool/ function call an agent made mid-conversation, e.g. - `lr-tool-result-view` · lr-tool-result-view.js · `stable` since `4.0.0` — renders a tool call's result via whichever custom renderer a host app has registered for it (see `registerToolRenderer()` in `registry.ts... - `lr-tool-result-dialog` · lr-tool-result-dialog.js · `stable` since `4.0.0` — a full tool-call detail overlay: a status/ duration header plus a `body` slot where a consumer typically places a `<lr-tab-group>` with I... - `lr-tool-select-dialog` · lr-tool-select-dialog.js · `stable` since `4.0.0` — a category-grouped, filterable, searchable tool-enablement dialog for picking which agent tools are available in a conversation. - `lr-thinking-panel` · lr-thinking-panel.js · `stable` since `4.0.0` — a collapsible panel for an AI agent's intermediate reasoning/"thinking" transcript, kept visually and semantically distinct from its fina... - `lr-stack-trace` · lr-stack-trace.js · `stable` since `4.0.0` — parses common V8/JS-TS, Firefox/Safari, and Python stack traces into a leading message plus activatable frames, splitting chained/caused-... - `lr-tool-approval-dialog` · lr-tool-approval-dialog.js · `stable` since `4.0.0` — a human-in-the-loop gate: presents one proposed tool/function call (`toolName` + `args`) and blocks an agent from executing it until a pe... - `lr-tool-param-form` · lr-tool-param-form.js · `stable` since `4.0.0` — renders one form control per top-level property of a JSON Schema object, for ad hoc tool invocation or approval-editing UIs (e.g. - `lr-result-card` · lr-result-card.js · `stable` since `4.0.0` — a small bordered card shell for a custom tool-result renderer's body (see `<lr-tool-result-view>`'s `registerToolRenderer()` in `../tool-... - `lr-result-field` · lr-result-field.js · `stable` since `4.0.0` — a single label/value row, meant for use inside a `<lr-result-card>` body (though it works standalone too). - `lr-compare-panel` · lr-compare-panel.js · `stable` since `4.0.0` — side-by-side A/B output comparison with a winner vote (LMSYS-arena / LangSmith-pairwise style): two slotted panes, a vote bar, synchroniz... - `lr-span-waterfall` · lr-span-waterfall.js · `stable` since `4.0.0` — the horizontal-timeline projection of the same `LyraSpan[]` `<lr-trace-tree>` consumes: a time axis, one row per span in start order, sta... - `lr-task-list` · lr-task-list.js · `stable` since `4.0.0` — a live, collapsible tracker for an agent's plan: ordered steps with per-step lifecycle status and one level of nested sub-steps, embedded... - `lr-terminal` · lr-terminal.js · `stable` since `4.0.0` — read-only ANSI console for streamed agent/tool output. - `lr-trace-tree` · lr-trace-tree.js · `stable` since `4.0.0` — a collapsible span hierarchy for one agent/LLM trace (Langfuse/LangSmith run-tree style): kind icon, name, status, an inline duration bar... - `lr-activity-feed` · lr-activity-feed.js · `stable` since `4.0.0` — an append-only streaming log of granular agent actions ("Searching the web…", "Read src/index.ts"), collapsing to a localized "Completed... - `lr-commit-card` · lr-commit-card.js · `stable` since `4.0.0` — compact commit summary (subject, author/time, diffstat, per-file changes) that links file rows out to a diff view. - `lr-test-results` · lr-test-results.js · `stable` since `4.0.0` — a pass/fail suite summary with per-status counts, status filter toggles, and per-test rows whose failures auto-expand by default and can... - `lr-confirm-bar` · lr-confirm-bar.js · `stable` since `4.0.0` — an inline, non-modal approve/deny block for one proposed action: the in-flow sibling of `<lr-tool-approval-dialog>` for confirmations tha... - `lr-browser-frame` · lr-browser-frame.js · `stable` since `4.0.0` — presentational "agent computer" viewport: a screenshot/frame stream (or slotted live media), read-only URL display, action-ping overlays,... - `lr-artifact-panel` · lr-artifact-panel.js · `stable` since `4.0.0` — shell around one agent-generated artifact: a title/kind header, a preview<->code toggle, version navigation with restore, a streaming ind... - `lr-agent-run` · lr-agent-run.js · `stable` since `4.1.0` — the top-level shell for one `AgentRun`: lifecycle-status badge, elapsed time, current step, model/cost summary, and built-in Cancel/Retry... - `lr-agent-trace` · lr-agent-trace.js · `stable` since `4.1.0` — a provider-neutral agent/LLM trace view: a span-kind filter row, a handoff quick-jump list, and the full trace hierarchy, all driven by o... - `lr-context-inspector` · lr-context-inspector.js · `stable` since `4.1.0` — an inspection view of the exact context assembled for a model call: per-segment token estimates via `<lr-context-meter>`, source attribut... - `lr-eval-dataset` · lr-eval-dataset.js · `stable` since `4.1.0` — dataset management for an evaluation suite: a filterable/taggable list of `EvalExample` rows, plus add/remove/import/export affordances. - `lr-eval-result` · lr-eval-result.js · `stable` since `4.1.0` — rubric scoring, human review, and comparison across a single evaluation example's runs (one per model or prompt version), LangSmith/Arize... - `lr-eval-run` · lr-eval-run.js · `stable` since `9.0.0` — an evaluation batch's live progress: an overall `<lr-progress-bar>` counting terminal (done/error/cancelled) examples against the batch t... - `lr-policy-summary` · lr-policy-summary.js · `stable` since `4.1.0` — a read-only list of guardrail, permission, privacy, and tool-policy decisions, each carrying an `allow` / `deny` / `needs-review` state a... - `lr-tool-timeline` · lr-tool-timeline.js · `stable` since `4.1.0` — a chronological list of an agent run's tool/function calls, each rendered through `<lr-tool-call-chip>` (name/status/duration) and `<lr-t... - `lr-agent-eval-dashboard` · lr-agent-eval-dashboard.js · `stable` since `6.2.0` — a controlled evaluation overview with metric cards, a trend chart, and run-status history. - `lr-approval-queue` · lr-approval-queue.js · `stable` since `6.2.0` — a controlled queue of tool calls that need human approval, with a keyboard-accessible request list and a single reused `<lr-tool-approval... - `lr-mcp-app` · lr-mcp-app.js · `stable` since `7.0.0` — hosts an MCP App-style executable UI resource in a uniquely-origin sandbox. - `lr-prompt-studio` · lr-prompt-studio.js · `stable` since `7.0.0` — a provider-neutral prompt-development workbench for ordered role messages, `{{variable}}` substitution, version selection, preview, save,... - `lr-json-schema-viewer` · lr-json-schema-viewer.js · `stable` since `9.0.0` — a recursive, selectable JSON Schema inspector with required-state, constraints, composition branches, `$ref` display, validation issues,... - `lr-subagent-panel` · lr-subagent-panel.js · `stable` since `7.0.0` — a controlled hierarchy of nested agent runs with lifecycle status, task/model context, progress, selection, cancellation, and retry intents. ## Retrieval, knowledge graph & grounding — `components/retrieval/` (30) - `lr-graph` · lr-graph.js · `stable` since `4.0.0` — a force-directed node-link diagram with pan/zoom/drag. - `lr-node-palette` · lr-node-palette.js · `stable` since `4.0.0` — the searchable, categorized node library for workflow editors: drag an item onto a canvas, or place it by keyboard. - `lr-graph-legend` · lr-graph-legend.js · `stable` since `4.0.0` — a node-type legend for a paired `lr-graph`: one swatch + label + count row per `lr-graph` node type, doubling as visibility filters. - `lr-entity-card` · lr-entity-card.js · `stable` since `4.0.0` — a dossier card for one `LyraEntity`: type badge, description, key/value property rows, degree, community chip, plus a built-in "focus in... - `lr-entity-chip` · lr-entity-chip.js · `stable` since `4.0.0` — an inline `@entity` mention for agent prose: flow content, keyboard-focusable, with a hover/focus preview popover. - `lr-neighbor-list` · lr-neighbor-list.js · `stable` since `4.0.0` — one entity's relationship rows: relation, direction, neighbor, with per-row navigate and expand-in-graph affordances. - `lr-path-strip` · lr-path-strip.js · `stable` since `4.0.0` — a linear node -> relation -> node chain rendering "why A connects to B" (GraphRAG local-search reasoning paths) as a compact, horizontall... - `lr-community-card` · lr-community-card.js · `stable` since `4.0.0` — a cluster/community summary card (GraphRAG community report): label, LLM summary excerpt, member count, member chips with overflow, and a... - `lr-chunk-inspector` · lr-chunk-inspector.js · `stable` since `4.0.0` — a ranked retrieved-chunks list: relevance score bars with tier tones, expandable chunk text, and the deep-link event that lands a chunk i... - `lr-source-picker` · lr-source-picker.js · `stable` since `4.0.0` — a checkbox tree/list scoping which sources ground the next answer: tri-state folders, select-all, type icons, search. - `lr-provenance-panel` · lr-provenance-panel.js · `stable` since `4.0.0` — the grounding breakdown for one answer: a sectioned disclosure panel (Entities / Relationships / Communities / Text chunks) composing thi... - `lr-mind-map` · lr-mind-map.js · `stable` since `4.0.0` — a radial expandable topic tree (NotebookLM Mind Maps): a spatial overview of a topic hierarchy where activating a topic drills in or hand... - `lr-citation-badge` · lr-citation-badge.js · `stable` since `4.0.0` — an inline `[n]` citation marker with a hover/ focus preview popover and confidence/verification-status coloring. - `lr-source-list` · lr-source-list.js · `stable` since `4.0.0` — a collapsible "Sources" panel for one chat message, grouping a set of `<lr-source-card>` children (its default-slot light-DOM children, p... - `lr-source-card` · lr-source-card.js · `stable` since `4.0.0` — one citation/source entry, meant to be a direct light-DOM child of `<lr-source-list>` (though it renders and functions fine standalone). - `lr-entity-dossier` · lr-entity-dossier.js · `stable` since `4.1.0` — a full entity detail surface: a persistent header (`lr-entity-card` plus an optional confidence `lr-stat`) above a `lr-tab-group` strip f... - `lr-grounding-summary` · lr-grounding-summary.js · `stable` since `4.1.0` — - the claim-level scorecard for one generated answer: supported/ unsupported claim counts, citation coverage, an optional confidence scor... - `lr-ingestion-queue` · lr-ingestion-queue.js · `stable` since `4.1.0` — a controlled list of documents moving through an ingestion pipeline (upload → text extraction → chunking → embedding → indexing), each ro... - `lr-knowledge-base` · lr-knowledge-base.js · `stable` since `4.1.0` — a source list for a retrieval knowledge base: sync status, indexing health, permissions, and per-row create/sync/pause/delete affordances. - `lr-knowledge-graph-explorer` · lr-knowledge-graph-explorer.js · `stable` since `4.1.0` — an orchestration-level surface for exploring a knowledge graph: the `lr-graph` canvas plus entity search, type filters, neighborhood expa... - `lr-memory-panel` · lr-memory-panel.js · `stable` since `4.1.0` — an agent's working memory surface: short-term context and long-term memories, each item's confidence and (optional) grounding provenance,... - `lr-retrieval-results` · lr-retrieval-results.js · `stable` since `4.1.0` — the orchestration-level ranked-chunk-list surface: takes raw `RetrievalChunk[]` (the shared retrieval-and-grounding type from `src/ai/typ... - `lr-retrieval-search` · lr-retrieval-search.js · `stable` since `4.1.0` — - the query bar for a retrieval/RAG surface: query text, an active- filter/scope chip row, a vector/keyword/hybrid mode selector, and loa... - `lr-retrieval-trace` · lr-retrieval-trace.js · `stable` since `4.1.0` — a retrieval pipeline's stage timeline (query rewriting, embedding, retrieval, reranking, filtering), rendered through `<lr-span-waterfall... - `lr-rag-answer` · lr-rag-answer.js · `stable` since `6.2.0` — a controlled grounded-answer surface combining sanitized Markdown, citation badges, a grounding assessment, and source previews. - `lr-embedding-explorer` · lr-embedding-explorer.js · `stable` since `6.2.0` — a dependency-free, accessible 2D embedding projection viewer. - `lr-knowledge-base-admin` · lr-knowledge-base-admin.js · `stable` since `6.2.0` — a responsive operations shell composing the existing controlled source inventory and ingestion queue into one tabbed knowledge-base view. - `lr-claim-evidence` · lr-claim-evidence.js · `stable` since `7.0.0` — a controlled claim-by-claim grounding audit. - `lr-retrieval-compare` · lr-retrieval-compare.js · `stable` since `7.0.0` — a side-by-side retrieval/reranking workbench that makes rank, overlap, and dense/sparse/rerank/final score changes inspectable. - `lr-rag-eval-dashboard` · lr-rag-eval-dashboard.js · `stable` since `7.0.0` — a controlled RAG quality overview with current metric cards, per-metric trends, evaluation slices, and run history.