39 Primitives
AUP defines cross-platform semantic primitives. Each declares what to render — the runtime decides how. Agents compose these building blocks into any UI.
Layout
Container and structural primitives for organizing UI elements.
Universal container. Supports column, row, grid, stack, overlay-grid layouts. Tabs, collapsible panels, backgrounds, stagger animations.
Modal dialogs, toast notifications, bottom sheets, popovers, command palettes, and confirm prompts.
Slide deck / carousel. Supports auto-play, loop, and navigation controls.
Iframe container for full-page isolation. Bridge API for postMessage communication with the parent surface.
Scrolling ticker / marquee for live data feeds.
Content
Primitives for displaying text, media, data visualizations, and rich content.
Text display with heading levels (1-6), scale (xs-2xl), intent (info/success/warning/error), markdown rendering, count-up animation.
Images, video, and audio with responsive sizing and format support.
Data visualization: bar, line, pie, doughnut, area, radar. Static data or live AFS binding via src.
Data table with columns, sorting, row selection, pagination. Supports live data via src.
Rich text / code editor with syntax highlighting and markdown support.
Date picker and calendar view with event display.
Time display with formatting options, relative time, and countdown.
Lunar phase visualization based on date.
Astrological natal chart visualization.
3D globe visualization with markers and data overlays.
Interactive map with markers, routes, and geolocation.
Input
Form controls and interactive inputs for user data collection.
All input types: text, password, textarea, number, email, url, date, time, select, toggle, slider, checkbox, radio, file, color. State-bound.
Buttons and clickable triggers. Variants: primary, secondary, destructive, ghost. Supports icon, loading, disabled states.
Command palette / search bar with fuzzy matching and keyboard navigation.
Data
Primitives for browsing and displaying data from AFS paths.
AFS data list with layout (list/grid/masonry/slideshow/table) x itemStyle (row/card/compact/media/hero) matrix. Filter, sort, paginate.
Navigation list with breadcrumb, back button, and hierarchical path browsing.
Elevated container connecting to AFS paths or remote AUP servers. WebSocket auto-reconnect, multi-view discovery.
Specialized financial chart with candlestick, OHLC, and volume data.
Visual
Rich visual and interactive display primitives.
Large hero section with background image/video, title, subtitle, and call-to-action.
WebGL-powered animated hero background with particle effects.
Photo story / gallery with captions and scroll-linked transitions.
Scroll-linked animation sections for storytelling.
Expandable text+image card with smooth reveal animation.
Text with highlighted segments and annotation overlays.
HTML5 Canvas for custom drawing, games, and interactive graphics.
3D progress bar with WebGL rendering.
Communication
Real-time communication and terminal interaction primitives.
Live broadcast overlay with TV-style graphics package (roles + overlay themes).
Terminal emulator with command input and output display.
Block reveal animation for content entrance effects.
Typewriter-style text animation.
System
System-level and utility primitives.
Placeholder for content that will be loaded later. Shows skeleton/shimmer state.
Fallback renderer for unrecognized primitive types.
Formatted data cell for tables — handles numbers, dates, currencies, percentages.
Classic xeyes widget — follows mouse cursor.