Velvet Studio 2.0
Components Playground Design System Patterns Rust Docs
AREA 10 · QUALITY MATRIX

Continuous Verification & Regression Testing

Every component, act, schema, and layout is verified by hermetic automated test suites in CI before shipping.

COMPONENT VERIFICATION

Complete Audit of All 40+ Components

Implementation status, test coverage, and render budget verification

ButtonImplementedSSR: 2 µs · CI: 100% PassPrimary interaction trigger. Pure CSS states, zero VDOM diffing, sub-microsecond event dispatch.
Icon ButtonImplementedSSR: 2 µs · CI: 100% PassCompact icon-only trigger with accessibility label and native anchor popover targeting.
LinkImplementedSSR: 1 µs · CI: 100% PassSemantic SPA navigation anchor. Direct route resolution with speculative prerender.
Split ActionImplementedSSR: 4 µs · CI: 100% PassDual-action segmented button: primary execution action coupled with dropdown choices.
Text InputImplementedSSR: 3 µs · CI: 100% PassSingle-line alphanumeric text control with HTML5 validation and AppError error binding.
SelectImplementedSSR: 3 µs · CI: 100% PassHigh-performance option picker with native dropdown rendering and zero layout shift.
SwitchImplementedSSR: 2 µs · CI: 100% PassBinary toggle switch using CSS pseudo-elements and native checkbox state under the hood.
SliderImplementedSSR: 2 µs · CI: 100% PassContinuous range slider for numeric inputs, color hue rotation, and volume adjustments.
FormBuilderImplementedSSR: 6 µs · CI: 100% PassType-safe declarative form compositor bound to closed acts with native submit handling.
AppError EnvelopeImplementedSSR: 2 µs · CI: 100% PassField-bound error message envelope rendered directly into the affected island.
Text & ProseImplementedSSR: 1 µs · CI: 100% PassSemantic typographic system featuring proportional scale, optical line-heights, and tone intent.
BadgeImplementedSSR: 1 µs · CI: 100% PassCompact semantic pill for statuses, versions, tags, and categorical indicators.
StackImplementedSSR: 1 µs · CI: 100% PassVertical layout primitive using flexbox with deterministic token gap control.
ClusterImplementedSSR: 1 µs · CI: 100% PassWrapping horizontal layout primitive for toolbars, chip rows, and tag groups.
Bento GridImplementedSSR: 4 µs · CI: 100% PassAsymmetric 2026 bento grid engine supporting custom column spans and responsive collapse.
CardImplementedSSR: 2 µs · CI: 100% PassPrimary elevated surface container with border tokens, rounded corners, and depth shadow.
Panel IconImplementedSSR: 3 µs · CI: 100% PassFeature container uniting icon glyph, title, subtitle kicker, and arbitrary View payload.
TabsImplementedSSR: 3 µs · CI: 100% PassSegmented navigation switch with active indicator and instant island view swapping.
BreadcrumbsImplementedSSR: 2 µs · CI: 100% PassHierarchical location indicator with chevron separators and aria-current='page'.
CSS Anchor PopoverImplementedSSR: 3 µs · CI: 100% PassUltra-modern popover positioning using native CSS Anchor Positioning and @starting-style.
Command Palette (⌘K)ImplementedSSR: 5 µs · CI: 100% PassGlobal keyboard-driven quick switcher and act dispatcher bound to ⌘K / Ctrl+K.
Notice BarImplementedSSR: 2 µs · CI: 100% PassInline contextual alert message with tone intent styling and icon integration.
Toast NotificationsImplementedSSR: 3 µs · CI: 100% PassTransient floating notifications in top/bottom tray with auto-dismiss and zero layout shift.
Table & QueryGridImplementedSSR: 8 µs · CI: 100% PassHigh-density data table supporting sticky column headers, sorting, and pagination without JS.
Metric KPIImplementedSSR: 1 µs · CI: 100% PassHigh-impact visual telemetry counter featuring large numeric glyph and explanatory label.
SVG Bars ChartImplementedSSR: 12 µs · CI: 100% PassPure Rust SVG telemetry bar graph rendered in under 15 microseconds without external JS.
SVG SparklineImplementedSSR: 8 µs · CI: 100% PassMicro-chart area sparkline showing trends and telemetry curves directly in table rows.
Closed Acts SystemImplementedSSR: 1 µs · CI: 100% PassSingle reducer, wire-safe typed enum acts shared across SSR, WASM, and MCP AI agents.
MCP AI ServerImplementedSSR: 20 µs · CI: 100% PassAutonomous Model Context Protocol endpoint exposing typed application acts to LLMs over JSON-RPC 2.0.
COMPATIBILITY

Cross-Platform & Browser Support Matrix

Zero JavaScript dependency enables universal support across all modern web standards

Browser Compatibility

Web platform standards
Obscura HeadlessVerified ✓ (100% WASM islands)
Chromium / BlinkVerified ✓ (CSS Anchor Positioning)
Firefox / GeckoVerified ✓ (Native HTML5 dialogs)
Safari / WebKitVerified ✓ (Color-mix light-dark)

Runtime Invariants

forbid(unsafe_code)
100% safe Rust across all product and framework crates.
Deterministic serialization with zero memory leaks.

Command Palette

PREVIEW VELVET 2.0

Select an item

Select or hover an item to inspect live route details, contracts, and schema bindings.

Route: /components
Latency: < 0.9 ms (SSR)
Contract: Pure Rust
↵ Open Esc Close

Keyboard Shortcuts

Command Palette / Search⌘K / Ctrl+K
Time-Travel Undo (Rollback)Ctrl+Z
Toggle Light / Dark ThemeMod+Shift+L
Cycle Layout ShellMod+Shift+F
Cycle Density ScaleMod+Shift+D
DevTools Drawer⌘I / Mod+I
High Contrast (WCAG AAA)Mod+Shift+C
Reduced MotionMod+Shift+M

Velvet DevTools

WASM Active
Schema, Acts & Autonomous MCP
POST /__act POST /__mcp GET /act.schema.json GET /openapi.json
HomeAct::Ping → island: count
AuthAct::SignIn → island: session-hint
Proc::UserRows → island: user-rows (q: text)
MCP Tools/List → endpoint: /__mcp (JSON-RPC 2.0)
Engine Telemetry & Allocations
0 Heap Allocs / span 0.1 ms Paint 12 800 M/s
Live Session Tape (Flight Recorder)
[0.00s] boot_catalog 12 pages, 16 routes verified
[0.02s] session_init WASM active, 0 heap allocs
Interactive Act Dispatcher
View Schema Ready
Active Island Inspector (DOM Morph Target)
No active islands on current page
Browser Self-Check (what YOUR browser runs)
waiting…
Autonomous MCP Tool Console
View Act Schema
Ready
Color Contrast & Accessibility
Text to Background 14.8:1 (AAA Pass ✓)

Settings

Språk / Language
Theme Mode
Design Style
Color Palette
Layout Shell
Density
Accessibility (WCAG AAA)