Onboarding previews
The animated miniatures on the onboarding cards: the background computer-use card, the notch and the menu bar.
The animated miniatures on the onboarding cards: the background computer-use card, the notch and the menu bar.
These APIs are part of the Cua Spaces app export for building Spaces UIs. They are source-available under FSL-1.1-MIT and ship for Swift only (import CuaSpacesFFI); the Rust tab shows the cua-spaces-ffi crate they come from. The open source SDK packages for Python, TypeScript and Kotlin do not include them.
app_driver_preview and app_presentation_preview return the miniatures of the AI agents and presentation cards; the *_frame functions give one frame of the loop and the *_still functions the frame shown with Reduce Motion. The onboarding flow itself is on Onboarding and settings.
AppDriverFrame record#Returned by app_driver_preview_frame, app_driver_preview_still.
| Field | Type | Default | Description |
|---|---|---|---|
pointer | AppPreviewPoint | The user's pointer tip. | |
pressed | bool | The user presses (drawn a little smaller). | |
selection | f64 | How much of the selected line is highlighted, 0 to 1 from its left. | |
agent | AppPreviewPoint | The agent cursor's tip. | |
agent_pressed / agentPressed | bool | The agent presses (drawn a little smaller). | |
ripple | f64 | The click rays, 0 hidden, else 0 to 1 through their burst (they grow out and fade). | |
checked | Vec<f64> | Each checkbox's tick, 0 to 1. |
AppDriverPreview record#Returned by app_driver_preview.
| Field | Type | Default | Description |
|---|---|---|---|
width | f64 | Stage width. | |
height | f64 | Stage height. | |
loop_ms / loopMs | u32 | One loop (ms). | |
back | AppPreviewWindow | The window the agent works in (behind). | |
front | AppPreviewWindow | The window the user works in (in front). | |
checkboxes | Vec<AppLogicalRect> | The back window's checkboxes, top to bottom. | |
labels | Vec<AppLogicalRect> | The label bar right of each checkbox. | |
lines | Vec<AppLogicalRect> | The front window's text lines (placeholder bars). | |
selected_line / selectedLine | u32 | The line the user selects (an index into lines). | |
pointer | Vec<AppPreviewPoint> | The user's pointer outline, tip at the origin (fill black, stroke white). | |
agent_pointer / agentPointer | Vec<AppPreviewPoint> | The agent cursor's outline, tip at the origin (fill agent_fill, stroke white, a soft glow of agent_fill). | |
agent_fill / agentFill | String | The agent cursor's fill. | |
agent_rays / agentRays | Vec<AppPreviewSegment> | The click rays, relative to the agent cursor's tip. |
AppMenuPreview record#| Field | Type | Default | Description |
|---|---|---|---|
icon | AppLogicalRect | The Cua Spaces icon (the tray template). | |
highlight | AppLogicalRect | The status item's highlight while pressed or open. | |
clock | String | The clock at the menu bar's right end. | |
clock_right / clockRight | f64 | Its right edge. | |
menu | AppLogicalRect | The menu. | |
radius | f64 | Its corner radius. | |
rows | Vec<AppMenuPreviewRow> | The rows, top to bottom (window.menu_bar for SPACES). | |
inset | f64 | Text and shortcut inset from the menu's edges. | |
font_size / fontSize | f64 | The rows' font size. |
AppMenuPreviewRow record#| Field | Type | Default | Description |
|---|---|---|---|
item | AppMenuItem | The core's item. | |
frame | AppLogicalRect | Its row on the stage. |
AppPresentationPreview record#Returned by app_presentation_preview.
| Field | Type | Default | Description |
|---|---|---|---|
menu_bar / menuBar | bool | The menu bar card (else the notch card). | |
width | f64 | Stage width. | |
height | f64 | Stage height. | |
menu_bar_height / menuBarHeight | f64 | The menu bar strip along the top. | |
loop_ms / loopMs | u32 | One loop (ms). | |
pointer | Vec<AppPreviewPoint> | The pointer's outline, tip at the origin (fill black, stroke white). | |
notch | Option<AppNotchPreview> | The notch card's miniature. | |
menu | Option<AppMenuPreview> | The menu bar card's miniature. |
AppPreviewFrame record#Returned by app_presentation_preview_frame, app_presentation_preview_still.
| Field | Type | Default | Description |
|---|---|---|---|
pointer | AppPreviewPoint | The pointer's tip. | |
pressed | bool | The pointer presses (drawn a little smaller). | |
hover | f64 | Notch: the hover cue, 0 to 1 (the closed notch and its tab grow by 1 + (hover_scale - 1) * hover horizontally, about the top centre). | |
open | f64 | Notch: the shape, closed 0 to open 1 (a spring: it can pass 1); menu: the menu's opacity. | |
content | f64 | Notch: the content's fade, 0 to 1 (it also grows from content_scale, anchored at the top); menu: the same as open. | |
tab | f64 | Notch: the tab, 1 shown to 0 tucked under the notch. | |
highlighted | Option<u32> | Menu: the row under the pointer (an enabled item), highlighted. | |
active | bool | Menu: the status item is highlighted (pressed, or its menu open). |
AppPreviewPoint record#| Field | Type | Default | Description |
|---|---|---|---|
x | f64 | Left. | |
y | f64 | Down. |
AppPreviewSegment record#| Field | Type | Default | Description |
|---|---|---|---|
from | AppPreviewPoint | Start. | |
to | AppPreviewPoint | End. |
AppPreviewWindow record#| Field | Type | Default | Description |
|---|---|---|---|
frame | AppLogicalRect | Its frame on the stage. | |
title_bar / titleBar | f64 | The title bar's height (the three window buttons sit in it). | |
radius | f64 | Corner radius. |
app_driver_preview#The AI agents page's background computer-use card: its miniature (an agent clicking in a background window while the user works in front).
func appDriverPreview() -> AppDriverPreviewReturns AppDriverPreview
app_driver_preview_frame#The card's miniature t_ms into its loop (it wraps).
func appDriverPreviewFrame(tMs: UInt32) -> AppDriverFrame| Parameter | Type | Default |
|---|---|---|
t_ms | u32 | required |
Returns AppDriverFrame
app_driver_preview_still#The card's miniature with Reduce Motion: mid-task, still.
func appDriverPreviewStill() -> AppDriverFrameReturns AppDriverFrame
app_presentation_preview#A presentation card's animated miniature (the notch card, or with
menu_bar the menu bar card).
func appPresentationPreview(menuBar: Bool) -> AppPresentationPreview| Parameter | Type | Default |
|---|---|---|
menu_bar | bool | required |
Returns AppPresentationPreview
app_presentation_preview_frame#The miniature t_ms into its loop (it wraps).
func appPresentationPreviewFrame(menuBar: Bool, tMs: UInt32) -> AppPreviewFrame| Parameter | Type | Default |
|---|---|---|
menu_bar | bool | required |
t_ms | u32 | required |
Returns AppPreviewFrame
app_presentation_preview_still#The miniature with Reduce Motion: expanded, still.
func appPresentationPreviewStill(menuBar: Bool) -> AppPreviewFrame| Parameter | Type | Default |
|---|---|---|
menu_bar | bool | required |
Returns AppPreviewFrame