ui

cg.ui — the components a cg.Page is built from, each rendering itself to HTML.

1. Build. A page function under @PageBuilder() constructs components — Component subclasses whose annotated fields are their props — in document order; each attaches to the innermost open stack, with on a VStack or HStack nests them, and Title names the page. The standard vocabulary: VStack and HStack lay out, Divider and Padding separate; Markdown and Stat show words and figures; ImageViewer, Gallery, Timelapse and SplatViewer show captured or reconstructed files; Scatter plots columns against each other, Chart draws a specification in full and MapViewer maps; PageLink leads to the page of another value. The viewers are ImageViewer, SplatViewer and MapViewer rather than Image, Splat and Map because those names belong to the cg types they display. A suite declares its own by subclassing Component and implementing html.
2. Render. When the page is built, each component writes its HTML through one Render context: files it shows are staged under files/ and browser libraries it needs under lib/. A link is a PageLink or an of entry, nothing else: PageLink(value) leads to the page of a value loaded from the target, Gallery.of, Timelapse.of and MapViewer.of link each derived item to its container entry, and a plain value renders with no link.

@cg.ui.PageBuilder()
def courtyard(target: Courtyard) -> None:
    cg.ui.Title("Courtyard")
    cg.ui.Markdown("# Courtyard")
    with cg.ui.HStack():
        cg.ui.Stat("Sessions", 12)
        cg.ui.Stat("Coverage", 0.8)
    cg.ui.Timelapse.of(target.sessions, lambda s: s.photo)
    cg.ui.PageLink(target.sessions.values()[-1], title="Latest session")