ComponentLibrary & Primitives

Structured academic abstract block.

FAQ + publication disclosure — native details/summary, zero-JS, single-mode + slot composition.

Funding + acknowledgments + ethics block.

Editorial vertical timeline — maroon spine, mono timestamps, gold-ringed current node. Milestones, ingest feeds, session history.

Docusaurus-style admonitions — 8 variants including compliance and tip.

A–Z jump bar — anchor mode for in-page jumps, emit mode for filter-in-place.

Top-of-page dismissable strip for site-wide notices. localStorage-backed dismissal memory.

Custom Tauri titlebar — traffic lights (Mac) / min-max-close (Win/Linux), brand + toolbar slots, drag regions. Replaces native window decoration.

Waffle-button popover for hopping between TTI portals — registry-fed via useTuxApps(), registry order everywhere, current tile carries aria-current.

AI output container — header + actions + body slot. Wraps generated code, docs, exported datasets.

Multi-author byline with affiliations + ORCID.

Identity mark primitive — photo with initials fallback + optional status dot. Extracted from TuxUserMenu.

Unified status & taxonomy badge — classification tiers, lifecycle states, bold modes, status dots, leading icons, and facet counts.

Environment label — corner ribbon, top stripe, or inline pill. preview/beta/dev tones.

Single oversized metric — three sizes, three tones, three style variants.

Standalone pull quote — centered or magazine-style drop-cap. Variant-aware rule + face.

‹ N of M › navigator for response alternatives. Lives in TuxChatMessage's #header-trailing slot.

Page-depth nav — home icon, italic intermediates, pipe rules collapsing to chevron on narrow.

Semantic intent prop — primary, secondary, ghost, destructive (fills on hover).

Pulled-aside editorial accent — fact / stat / quote with style-variant left rule.

Orbital research capability medallions with concentric gold and maroon halos.

Single image + caption + credit. 16:9 / 1:1 / 4:3 / 3:4 aspect, full / wide / right alignment.

Static or linked — linked mode has corner-drop hover + appearing arrow.

Horizontal scroll of cards — eyebrow + display title + arrows + dots. Wraps UCarousel.

Full-bleed band of media-forward cards — \"browse our programs\" pattern, 2/3/4-up.

TTI center / division marker.

Native SVG area chart — overlay or stacked variants, end-of-area labels, paired with TuxBigStat for the KPI-strip composition.

Native SVG bar chart — single / grouped / stacked variants, vertical or horizontal, optional comparison overlay (projection vs actual).

Share-of-total donut — center stat slot, slice-label colored to wedge, minSlice% auto-folds tiny slices into Other.

Editorial wrapper that ties native chart components into the TUX type system.

270° arc gauge for single-target metrics — needle + tone bands, or radial-progress variant. Use sparingly.

Texas-flavored geographic charts.

Matrix heatmap on the sequential map ramps — crashes by day × hour, corridor demand by month. 2-D keyboard cursor, honest null cells.

Distribution over raw samples — nice 1/2/5 bin edges, dashed gold p50/p95 percentile rules, normalize-to-share mode. The reliability chart.

Native SVG line chart — end-of-line value labels, optional previous-period overlay + confidence band, auto SR summary.

Correlation plot — x vs y dots, optional linear-regression trendline + R², bubble-chart mode via per-point size.

Radial counterpart to `TuxTreemap`.

Conversational speech bubble and floating assistant launcher primitive for interactive queries.

One conversation turn — user or assistant role, citations slot, tool row. Powers tti-ai-chat.

Academic citation export menu.

Numbered source list under an assistant message — title + path + score in a 3-col grid.

Standalone Shiki code block — filename, line numbers, copy. Lazy-loads grammar on mount.

Mandatory emergency alert banner — Rellis Code Maroon. Three severities, non-themed colors.

Standardized action ribbon — contextual actions, search filter, and bulk selection mode.

Global ⌘K jump — search + grouped commands + keyboard nav, native <dialog>.

Peer-review / editorial threads — root + replies, @mentions, resolve/reopen, edit/delete own.

Architectural portal hero with diagonal chamfer cut, gold accent block, and framed photography.

Chat input with optional compliance scope banner — model picker, corpus attach, ⌘↵ send.

TuxModal preset for destructive-action confirmation.

Directory card — portrait + name + role + typed contact rows. Vertical or horizontal.

Token-utilization meter — pill + conic ring + popover with input/output/cost. Tone-codes success/warning/error.

Right-rail surface for chat grounding context (corpus, retrieval, usage). Slot-driven chrome.

Sidebar history of past conversations grouped by temporal bucket (TODAY / YESTERDAY / …).

Privacy notice — bottom-right or full-width strip. localStorage-backed decision memory; categories slot.

Linear corridor visualization.

Big promotional block — three tones, three style variants, action slot.

Research-deliverable table — numbered caption, uncertainty cells (value ± CI), footnote anchors, totals row, source citation. Static (printable).

Term/definition pairs — native dl/dt/dd. Inline or stacked, editorial or data emphasis.

Mermaid diagrams-as-code — flowcharts, sequences, ERDs. Lazy-loaded ~3MB; brand-themed.

Hierarchical doc-site sidebar — collapsible sections, search filter, persisted collapse state.

Single-column dropdown from a top-bar nav item. Composes inside TuxSiteNav.

High-performance Canvas and WebGL interactive telemetry charts, live multi-series telemetry, and massive dataset exploration with TUX design tokens.

Flagship publication reader parities MyTTI Inside Lane and EmDash CMS with switchable hero presentations, sticky TOC, and reading progress.

No-data placeholder — tinted icon circle, title, description, CTA slot.

Full-page 404/500/403/503 template — display-type code, recovery actions, support slot.

Institutional event row with emerald date chip, time, title, and RSVP/view action.

Floating Action Button. Material-pattern primary action; icon-only circle or extended pill. Honors safe-area-inset.

Institutional \"by the numbers\" — 3/4/5-up oversized stats, variant-aware numerals.

Auto-numbered caption for figures, tables, exhibits, equations.

Drag-and-drop file upload.

Left-rail facet panel — collapsible groups, checkbox lists with counts, applied-filter chips.

Full-viewport overlay for inspecting one piece of content — back + title + actions chrome, content slot. \"Open chart in focus mode.\"

Unified institutional footer \u2014 maroon contact and resources block over accessible legal baseline.

Inline footnote reference + hover preview.

Label + help + input + error stack.

Funder identity strip / chip.

Verified search and retrieval citation strip with domain badges and DLP verification status.

Atmospheric celestial and telemetry hero simulation inspired by OpenAI Sol with glowing corona, stardust sparks, constellation mesh, and seamless bottom dissolve.

Icon + headline + body grid — classic \"our services\" block, three tones, grid or list.

Header lockup — logo + wordmark. Lockup or text-only, horizontal or stacked, three levels.

IntersectionObserver sentinel that auto-fetches the next page. Honors prefers-reduced-motion + keyboard fallback.

Form-field label with (i) help — hover or click popover with the explanation. For ITAR rubrics, retention classes, classifier metrics.

Academic-style inline [N] citation pill — hover reveals title + URL + excerpt + score. Composes with TuxCitations footer list.

Token-styled <kbd> for shortcut hints. Mac/PC modifier normalization, three sizes, combo + sequence forms.

TTI lab / center identity card.

Categorized resource list — grouped headings, optional descriptions, featured-item left bar.

Full-width band of prominent links — footer-of-section navigation, three tones.

Explicit \"Load more\" button + remaining count + terminal divider when all loaded. SEO-friendly middle ground.

Library-agnostic map embed wrapper.

Standalone legend for embedded maps.

Research-typed map marker.

Textarea with markdown shortcuts.

Frame for interactive third-party MCP app output — app icon + name + window controls + skeleton. Sister to TuxArtifact.

Full-bleed hero band — overlay (drama) or split (editorial), three heights, three tones.

Full-width multi-column panel from a top-bar item, optional featured tile. Composes inside TuxSiteNav.

In-window File / Edit / View / Help menu strip for Windows / Linux Tauri shells. Skipped on Mac (system menu wins).

Neighborhood-grid inset for a single metro, intended for 4-up side-by-side layouts (Houston · DFW · Austin · San Antonio).

Stylized device chrome for screenshots — iOS (iPhone) or Android (Pixel) via platform prop. Doc-only marketing helper.

UModal with editorial rhythm — optional eyebrow, gold-bar underlined title.

News article list — date + thumbnail + headline + dek + read-more, stacked or grid.

Content-width primitive — default/wide/prose measures backed by --layout-* tokens; pairs with --tux-nav-height.

Eyebrow + gold-bar heading + subtitle — plain default, neutral or maroon panel, hero rhythm.

Page-number controls — squarified active page, ellipsis truncation, optional status line.

Academic paper metadata block.

Uniform image grid — photo (full color, captioned) or logo wall (grayscale-on-hover).

Richer-than-tooltip floating panel — title + body + actions. Maroon hairline rule under title. Click default; hover for read-only.

Two-tier institutional header matching tti.tamu.edu — Maroon utility bar + crisp brand ribbon + mobile drawer.

Turnkey institutional portal layout shell — sticky header, gold-rule breadcrumbs subnav, hero slot, feedback pill, and TuxFooter.

Research-program identity card.

Typographic shell for long-form markdown — H1/H2/H3/p/list/code/table/blockquote rhythm in one wrapper.

Long-form Q&A — always expanded, designed to be read top-to-bottom (companion to TuxAccordion).

Collapsible sidebar/rail navigation — native <details> disclosure groups (accessible without roleless aria-expanded), icon-only collapsed mode. tux-owned replacement for UNavigationMenu in app shells.

Light-touch helpful/question/disagree row. Lower friction than a feedback form; counts display-only.

Collapsible chain-of-thought reasoning drawer with duration and token velocity metrics.

Pinned entity summary bar — title, status badge, KPI metric chips, and primary action buttons.

Interactive dismissible chip — leading icon, three sizes, removable × or click-to-remove whole pill. Distinct from TuxBadge (decorative).

Page-sized canvas (letter / a4) for PDF + print. Stats, charts, prose go inside.

Drop-in print stylesheet; hides chrome, paginates with data-print-break attrs.

Long-form web-hosted narrative — cover, byline, lede, sticky TOC, body, footer.

Researcher profile card.

\"Showing 1–24 of 412 corridors · 24 per page\". Pairs with TuxPagination / TuxLoadMore / TuxInfiniteScroll.

Interactive data grid — sticky header, row selection, expandable detail, sort + filter chips, bulk-action bar. Corridor-class operational surfaces.

Canonical WYSIWYG — Tiptap-based, 7 toolbar groups, tables, task lists, source-mode toggle, full-screen, syntax highlighting.

AASHTO/TxDOT geometric highway cross-section with 2D CAD blueprint profile and 3D pitched spatial perspective analysis.

Relational query UI — field + operator + value rows, AND/OR groupers, nestable. Sister to faceted TuxFilterPanel.

EmDash-inspired circular reading-progress button that smoothly scrolls back to the top of the page.

Branded search bar — bordered input + uppercase action button. Regular / slim / focus state.

Editorial section heading — ALL-CAPS, tracked-out, maroon underline.

Modal overlay listing every wired keyboard shortcut — combos vs sequences, opens on ?. Sibling to TuxCommandPalette.

Sidebar widget wrapper — eyebrow + maroon underline + content. Default/bordered/filled.

Newsletter signup — email input + uppercase action + consent. Three tones, three style variants.

Top-bar with TuxIdentity + utility nav + primary nav. Hosts TuxDropdown / TuxMegaMenu items.

Loading-state placeholder — primitive shapes + 6 composed presets. Honors prefers-reduced-motion.

Edge-anchored drawer — row detail, filter panel, mobile nav, action sheet. Right/left/bottom anchors, native <dialog>.

Inline mini trend line — no axes, optional area fill, last-point dot, delta arrow. Native SVG.

5-column institutional metrics banner mapping the Comm spectrum palette with icon headers and colored footers.

5-band responsive institutional brand color ribbon.

Branded app-launch overlay — brand mark + maroon hairline + status. Bridges Tauri window-show → Vue hydrate gap. Fades when loaded.

In-page master-detail layout — resizable list + detail + optional bottom pane. Width persists via localStorage. URL-bound selection.

Before/after stat block with delta + tone. Direct or inverted polarity (down-is-good metrics). Row / stack / inline layouts.

Operational state chip — ok / warning / unknown / critical / pending / maintenance. Class API is kit/css/tux-ops.css so CGI overlays and Vue share pixels.

Transient-notification host + useTuxToast() bus — polite live region, sticky errors, reduced-motion aware, Tauri OS-notification escalation.

Numbered-circle multi-step indicator — funding application, IRB submission, study onboarding.

Horizontal row of clickable prompt-suggestion chips. Empty-state composer or post-response follow-ups.

Bottom-anchored 3-5 mobile tabs — icon + label, maroon top-edge active rule, safe-area-inset-bottom honored. Tauri Mobile target.

UTable with tux chrome, automatic status-cell rendering via TuxBadge.

Auto-numbered caption for tables.

Editorial tabs with maroon active underline. Horizontal + vertical orientations; `bold` intent for eyebrow-rhythm labels.

Onboarding/guided-tour tooltip — image, body, Next/Skip, step counter. On-brand variant for high emphasis.

Attributed quotes with portrait + name + role — grid or row layout, three style variants.

Service launcher grid with eggshell background, line icons, titles, and descriptive subtitles.

Article table-of-contents — sticky right rail with IntersectionObserver-driven active state.

Agent tool execution and command event card with status indicators, elapsed timing, and diff stats.

Keyboard-accessible hover-help with optional title + hairline rule. Tuned max-width (~22ch).

Hierarchical list — sitemap, corpus + filesystem browser, BI dataset explorer. Mono leaf labels, sand guide lines, persistence.

Squarified hierarchical-size viz — Corridor Ops' headline chart, drill-in, no external library.

Scientific transportation measurement primitive — mph ↔ km/h, VMT ↔ VKT, kip ↔ kN, ± CI, highway stationing, and global US ↔ SI toggle.

The suite's one identity affordance — cluster chip or rail-footer mount, state-complete (loading / signed-out / signed-in / local-only / error), law-fixed menu order.

The trailing app-control cluster — search · notifications · theme · waffle · identity in law-fixed DOM order. Registry-fed waffle + role=status theme announcements.

Error list at the top of a long form.

Tableau / Power BI / Apache Superset / Grafana iframe wrapper with poster fallback.

Small-multiples layout primitive — 2/3/4-up panes with shared editorial header. Container-queried.

R artifact wrapper — image / svg / htmlwidget — with source-line caption gutter.

Host-OS + Tauri detection for platform-adaptive chrome.

Composable: Material-style tap-feedback ripple on a target element. Opt-in only; honors prefers-reduced-motion.

Composable: pointer/touch swipe detection with directional callbacks. Requires a11y-pair button per platform-awareness doctrine.