View API
The shared View SDK exposes a small retained-UI recipe API over PocketJS. It tracks state reads, reconciles compatible nodes, maps styles to native properties and routes press input through the host's hit testing.
State and mounting
| API | Behavior |
|---|---|
View.state(initial) | Returns frozen { get, set, update }; tracked reads mark dependent render text/tree dirty |
View.mount(render, onDataChanged?) | Mounts exactly one render function and optional file-data refresh callback, then installs tick/data/input hooks |
View.measureText(text, style?) | Measures through the baked native font slot |
View.viewport | Frozen host viewport with width, height, orientation, scale, layoutWidth and layoutHeight |
View.colors | Frozen named ABGR color map |
Primitive recipes
| Primitive | Responsibility |
|---|---|
Box(props) | Generic native View node; multiple flow children require explicit direction |
Row(props) | Box with row direction |
Column(props) | Box with column direction |
Text(props|string|number) | Native text node; text may be a tracked function |
Pressable(props) | Box requiring onPress; participates in native hit testing/feedback |
Pi Design components
| Component | Key props |
|---|---|
Screen | full viewport; accepts children/style |
Card | surface defaults; accepts children/style |
Header | title, metaTop, metaBottom, onBack, accent |
PageIntro | eyebrow, title, description, tone |
SectionHeading | title, detail, optional action label affordance |
ActionButton | label, onPress, disabled, tone |
Badge | label, tone |
EmptyState | icon, title, detail, compact, tone |
MetricCard | label, value, tone |
StatusBar | text, tone, dark |
NavigationBar | Array of label, onPress and active navigation items |
ScrollButton | direction: "up" | "down", onPress |
ScrollRail | onUp, onDown |
Keyboard | layer: "lower" | "upper" | "symbols", onKey |
Sparkline | Viewport-aware values, labels, tone and empty-state chart recipe |
Layout styles
Numeric dimensions are design units scaled exactly once by the SDK. Portrait uses a 720×1280 reference canvas and landscape uses 800×480. Size properties also accept "full".
width height minWidth minHeight maxWidth maxHeight
padding paddingX paddingY paddingTop paddingRight paddingBottom paddingLeft
margin marginX marginY marginTop marginRight marginBottom marginLeft
gap direction justify align grow shrink basis wrap
position top right bottom left display overflow zIndex hitPass| Property | Accepted names |
|---|---|
direction | row, column |
justify | start, center, end, between, around |
align | start, center, end, stretch |
position | relative, absolute |
display | flex, none |
overflow | visible, hidden |
Visual, text and transform styles
background radius opacity borderColor borderWidth shadow
color fontSize fontWeight textAlign lineHeight tracking
translateX translateY scale rotate scaleX scaleY originX originY
arcStart arcSweep arcWidthfontWeight is regular or bold.fontSize uses body, lg, xl; thetitle slot is available in bold. textAlign is left, center or right.
Named colors and tones
canvas surface shell shellMuted text heading muted subtle border disabled
white accent accentSoft info infoSoft success successSoft
warning warningText warningSoft danger dangerSoft dangerOnDarkBadge accepts neutral, info, success, warning and danger tones. Shared components intentionally own common visual semantics; Apps own the conditions that select a tone.
Input behavior
Pointer down resolves the nearest pressable ancestor and applies pressed feedback by darkening its background or lowering opacity. Pointer up restores the value. Tap calls onPressand returns its event to the host. Keep handlers synchronous and return an event; long work belongs to an Action.
Authoritative source: system/view-sdk.js ↗.