Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Display source card

Linear: AUT-127

Tray-popover card that shows which screen is selected for recording. Header carries the display name, size, favourite glyph, resolution pill, and chevron; body holds the mock preview frame.

States

StateStory
Built-in Retina, selecteddisplay-source-built-in-retina
Open chevron (picker showing)display-source-selected
Unavailable (permissions)display-source-unavailable
Wide preview (21:9)display-preview-wide
Small preview (16:10 single window)display-preview-small

API

#![allow(unused)]
fn main() {
use ui_storybook::components::{DisplaySourceCard, DisplaySourceView};
use ui_storybook::fixtures::devices::sample_display_source;

view! {
    <DisplaySourceCard view=sample_display_source(true) open=false />
}
}

DisplaySourceView carries the static metadata (name, size, dimensions, favorite, selected) plus a DisplayPreviewView for the preview frame.

Preview frame

DisplayPreviewFrame is the mocked canvas. It renders a titlebar strip + a body containing positioned PreviewWindowChips. Each chip is a colored rounded rect at a percentage offset / size — the deterministic "non-Wisp fallback" called out in the spec.

Deterministic, SSR-stable

The preview is CSS-positioned divs, not a <canvas>. SSR renders identical bytes every time the storybook exports, so the snapshot gate doesn't churn. A future Wisp-backed PNG export can land via the existing wisp-export-stories harness without changing this component's API.

Aspect-ratio helper

aspect_ratio_css(num, den) -> String produces "<num> / <den>" for the CSS aspect-ratio property, falling back to "1 / 1" when the denominator is zero. Unit-tested.

Composition

flowchart TD
    Card[DisplaySourceCard] --> Header[header]
    Header --> Name[display-source-name]
    Header --> Size[size pill]
    Header --> Star[favourite ★]
    Header --> Dims[resolution pill]
    Header --> Chevron[chevron]
    Card --> Frame[DisplayPreviewFrame]
    Frame --> Titlebar[mac-window titlebar]
    Frame --> Body[preview body]
    Body --> Chip[PreviewWindowChip × N]
    Body --> Overlay[overlay label]
    Card --> Banner[unavailable banner?]