Concepts Overview

Tuffex Components

Tuffex (@talex-touch/tuffex) is the Vue 3 component family powering the Talex Touch ecosystem: one set of components serves the desktop CoreBox, plugin surfaces, and this docs site itself. Components are split into suites — Basics carries the everyday interface body, Pro carries rich interaction and visual expression, AI carries AI-native interfaces, and Data carries visualization plus the standalone charts package. The suite switcher at the top of the sidebar adds Concepts as a fifth, documentation-only tab alongside these four component suites, and picking a tab takes you straight to that suite's overview.

• Live specimens: every suite page opens with a preview grid — Basics, Pro, AI, Data — where each cell is a real, interactive component; click its name to open the docs.
• Per-suite imports: the @talex-touch/tuffex/base, /pro and /ai entries load on demand; the chart family ships as the standalone @talex-touch/tuffex-charts package.

Installation

Three import shapes — per component, per suite barrel, or the root entry — plus the stylesheet each one needs. Start at Installation.

Design Foundations

The bottom layer of every component's visual is a set of --tx-* design tokens: the font stack with its size/weight scale, and color semantics for both light and dark themes (primary, success/warning/danger, layered text and fill). Components never define their own visuals — they consume this layer, so re-theming means changing tokens, and app-side customization should land on the same layer. The full inventory lives in Design Foundations.

Theming

Where Foundations lists the tokens, Theming is how you override them: global tokens, the dark and high-contrast selectors, the AI suite's own --tx-bui-* layer, and the ~300 per-component hooks that retheme one component or one subtree.

Icons

TxIcon decides what an icon string is rather than making the caller declare it — an Iconify class, one of seven builtin glyphs, an emoji, or an explicit URL / file source. Icons covers that resolution order and how an app teaches the component to load icons from its own storage.

Accessibility

Focus rings on :focus-visible, prefers-reduced-motion handling, the high-contrast palette, and the ARIA conventions the components share — along with a plain account of where coverage stops. See Accessibility.

Utils

Public helper functions that ship alongside the components, exported from the root entry and the ./utils subpath: nextZIndex for unified overlay stacking, toast notifications, dialog orchestration, environment guards (hasWindow and friends), haptics and animation helpers. The components themselves go through this same layer, so reusing it keeps app behavior consistent. The full API lives in Utils.

Composed Workspace Demo

This demo validates component composition in a realistic admin slice: search input, switch, button, status badges, progress, and selectable table work together in one responsive panel.

Tutorial Path

• Start with Composing Tuffex interfaces to learn the “actions → status → data” page structure.
• Start dashboard headers from the “Operations status panel” pattern, then expand into tables, trend charts, navigation settings, and detail drawers.
• For list pages, keep keyword search, scope filtering, and no-match recovery in one path with TxSearchInput, TxSearchSelect, and TxSearchEmpty.
• For data lists, use TxDataTable for the main body, TxPagination for navigation, and TxSkeleton / TxLayoutSkeleton for waiting states.
• For settings pages and admin shells, use TxTabs for fixed sections, TxDropdownMenu / TxPopover for lightweight actions and short notes, and TxDrawer for dense configuration.
• Data regions must design loading, empty, and error recovery paths together; prefer TxLoadingState, TxEmptyState, and TxErrorState.
• Task feedback paths should mount TxToastHost for notifications, use TxTooltip for action hints, TxLoadingOverlay for local blocking refreshes, and TxSpinner for inline waiting.
• Permission orchestration paths should use TxTree for scope, TxTreeSelect for owner team, TxTransfer for resource grants, and TxTimeline for audit progress.
• Release configuration paths should use TxCascader for release scope, TxFlatSelect for package and rollout choices, TxSegmentedSlider for risk tiers, TxSlider for traffic ramps, and TxTagInput for short metadata.
• Use the grouped component list below for detail pages; the sidebar only highlights migration states that still need attention, while reviewed pages are marked as Verified in the sync dashboard.
• Dashboard pages should compose TxDataTable, TxStatusBadge, TxProgressBar, and chart components instead of hand-writing one-off SVG/status UI.

Migration Dashboard

• In progress: this page is still being edited; demos/API may change.
• AI migrated: migration is complete, but source-code verification is recommended.
• Reviewed: manually reviewed.

Suite Overview

Each suite has one overview page carrying its own live preview and its own component list — the first entry under that suite's sidebar tab.

Concepts is the fifth suite tab — documentation-only, with no component entry of its own. This page is that tab's overview: library positioning, design foundations and utils above, the full component index below.

Basics

The everyday building blocks, importable through the @talex-touch/tuffex/base category entry. Suite page: Basics Suite. Design foundations live in Foundations; shared helpers in Utils.

General

• Button
• Icon
• Avatar
• Avatar Variants
• Tag
• Badge
• StatusBadge
• IconChip
• Kbd
• Divider

Form

• Form
• Input
• FlatInput
• Textarea
• NumberInput
• SearchInput
• TagInput
• ScrubField
• Select
• FlatSelect
• SearchSelect
• TreeSelect
• Cascader
• Picker
• DatePicker
• Radio
• FlatRadio
• Checkbox
• Switch
• Slider
• SegmentedSlider
• Rating
• FileUploader
• ImageUploader

Layout

• Container
• Flex
• Grid
• GridLayout
• Stack
• Splitter
• Scroll
• Collapse
• Card
• CardItem
• GroupBlock

Navigation

• Tabs
• TabBar
• NavBar
• SidebarNav
• Breadcrumb
• Steps
• Pagination
• DropdownMenu
• FlatDropdown
• ContextMenu

Data Display

• DataTable
• Tree
• SortableList
• Timeline
• Transfer
• StatCard
• CellLink
• DotIndicator
• FilterChips
• MarkdownView
• ImageGallery

Feedback

• Dialog
• Modal
• Drawer
• Popover
• Tooltip
• Toast
• Alert
• Progress
• ProgressBar
• Spinner
• LoadingOverlay
• SelectionActions

Status & Empty

• Empty
• EmptyState
• NoData
• NoSelection
• SearchEmpty
• ErrorState
• OfflineState
• PermissionState
• GuideState
• BlankSlate
• LoadingState
• Skeleton
• LayoutSkeleton

Pro

Rich interaction, visual effects and low-level primitives, importable through the @talex-touch/tuffex/pro category entry. Suite page: Pro Suite.

Interaction

• CommandPalette
• SearchPanel
• MarkdownEditor
• CodeEditor
• VirtualList
• VersionCapsule

Effects

• GlassSurface
• GradientBorder
• OutlineBorder
• BorderBeam
• CornerOverlay
• GradualBlur
• EdgeFadeMask
• GlowText
• KeyframeStrokeText
• TuffLogoStroke
• TextMorph
• TextTransformer
• Transition
• Stagger
• Fusion
• Liquid
• FlipOverlay

Primitives

• BaseSurface
• BaseAnchor
• Floating
• AutoSizer
• ResizeBox

AI Suite

AI-native interface components, partly adapted from Beautiful UI (MIT) — see the AI Suite page for full showcases — importable through the @talex-touch/tuffex/ai category entry.

Chat

• Chat
• ChatComposer
• PromptBar
• AttachmentTray
• MessageActions
• SuggestionChips
• TypingIndicator
• ConversationStream

Agents

• Agents
• AgentTrace
• TaskRows
• ToolCallCard
• ToolChips
• ToolConfirmation
• ApprovalCard
• WorkingIndicator

Reasoning

• AI Elements
• ChainOfThought
• ReasoningDisclosure
• ThinkingOrb
• StreamMarkdown
• CodeStream
• InlineCitation
• Sources

Context & Insight

• ContextCards
• ContextIndicator
• InsightCards
• RecommendationCard
• FineTuneCard

Data

Data visualization and charts: the main package's visualization components (imported through @talex-touch/tuffex/pro) plus the standalone @talex-touch/tuffex-charts package (kumo-shaped, no echarts). Suite page: Data Suite.

Charts

Docs for the standalone @talex-touch/tuffex-charts package (kumo), installed separately from the main tuffex package.

• Charts
• Chart Colors
• TimeseriesChart
• Maps
• SankeyChart
• Custom Chart

Visualization

• SparkChart
• AllocationBar
• DiffTable
• SignalMeter

Review Notes

• Hub scope: this page is the Concepts suite overview and the component documentation index; per-component API / props / best-practice details live in the linked component pages.
• Source registry: packages/tuffex/packages/components/src/components.ts defines the exported component slug set used by docs coverage.
• Demo registry: apps/nexus/app/components/content/demo-registry.ts maps each TuffDemoWrapper demo on this page to a standalone Vue demo file.
• Preview grid: apps/nexus/app/components/docs/DocsComponentsGallery.vue renders the live "Preview" grid on each suite page; it takes a required suite prop and renders that band only.
• Verified coverage: Coverage: apps/nexus/test/docs/tuffex-component-docs-coverage.test.ts verifies exported components have English and Chinese docs, localized hubs link documented components, and all demo references resolve to registered Vue files.