{% from "chirpui/accordion.html" import accordion, accordion_item %}

{% call accordion(name="faq") %}
    {% call accordion_item("How do I sign up?", open=true) %}
        Click the Sign Up button and follow the steps.
    {% end %}
    {% call accordion_item("How do I reset my password?") %}
        Use the Forgot Password link on the login page.
    {% end %}
{% end %}

{% from "chirpui/action_bar.html" import action_bar, action_bar_item %}

{% call action_bar() %}
    {% call action_bar_item(icon="up", label="Vote up", count=42) %}{% end %}
    {% call action_bar_item(icon="comment", label="Comment", count=12) %}{% end %}
    {% call action_bar_item(icon="share", label="Share") %}{% end %}
{% end %}

{% from "chirpui/action_strip.html" import action_strip %}

{% call action_strip() %}
    {{ btn("Validate", variant="", icon="◎", ...) }}
    {{ btn("Migrate", href="/migrate", ...) }}
{% end %}

{% call action_strip(density="sm", wrap="scroll") %}
    {% slot primary %}
    {{ search_bar("q", variant="with-button") }}
    {% end %}
    {% slot controls %}
    {{ btn("Filters", variant="", size="sm") }}
    {% end %}
    {% slot actions %}
    {{ btn("Create", variant="primary", size="sm") }}
    {% end %}
{% end %}

{% from "chirpui/actions.html" import actions %}

{{ actions() }}

{% from "chirpui/param_override.html" import param_field, advanced_params, scope_indicator %}

{% call advanced_params() %}
    {{ param_field("temperature", value=0.9, default=0.7, widget="range",
                   min=0, max=2, step=0.1, label="Temperature") }}
    {{ param_field("model", value=none, default="gpt-4o", widget="select",
                   choices=models, label="Model",
                   locked=true, locked_reason="Set by your workspace admin") }}
{% end %}

{% from "chirpui/alert.html" import alert %}

    {% call alert(variant="success") %}
        Done! Your changes have been saved.
    {% end %}

    {% call alert(variant="error", dismissible=true) %}
        Something went wrong.
        {% slot header_actions %}<button>Retry</button>{% end %}
    {% end %}

    {% call alert(variant="warning", collapsible=true, open=false, icon="↑", title="Shortcut collisions") %}
        Long warning content revealed on expand.
    {% end %}

Variants: info (default), success, warning, error

{% from "chirpui/ambient.html" import ambient %}

{{ ambient() }}

{% from "chirpui/ambient_root.html" import ambient_root %}

{{ ambient_root() }}

{% from "chirpui/animated_counter.html" import animated_counter %}

{{ animated_counter(1250, label="Active Users") }}
{{ animated_counter(99, prefix="$", suffix="M", label="Revenue", variant="mono") }}

{% from "chirpui/animated_stat_card.html" import animated_stat_card %}

{{ animated_stat_card(1250, label="Active Users", trend="+12%", trend_direction="up") }}
{{ animated_stat_card(48, label="Revenue", prefix="$", suffix="M", effect="beam") }}

{% from "chirpui/forum_patterns.html" import answer_card %}

{% call answer_card() %}
  Content
{% end %}

import app_shell plus shell_outlet
provide brand / topbar / topbar_end / sidebar slots
fill topbar_leading for a non-anchor leading affordance (hamburger/back/
menu) — it escapes the brand-anchor trap, so put interactive controls
there, never inside the brand slot (which nests inside the brand <a>)
wrap the main slot with shell_outlet() for routed shells
enable sidebar_collapsible=true for the resizable shell variant
enable context_rail=true and fill the context_rail slot for the rail
enable nav_drawer=true for the mobile hamburger slide-over

{% from "chirpui/ascii.html" import ascii %}

{{ ascii() }}

{% from "chirpui/ascii_7seg.html" import ascii_7seg %}

    {{ ascii_7seg("99.97") }}
    {{ ascii_7seg("1234", label="UPTIME") }}
    {{ ascii_7seg("08:42", variant="accent") }}

Renders each character as a tall monospace glyph in a display frame.
Supports: 0-9, colon, period, dash, space.
Variants: default, accent, success, warning, error.

{% from "chirpui/ascii_badge.html" import ascii_badge %}

{{ ascii_badge(text="deployed")                              {# ┤ deployed ├ }}

{% from "chirpui/ascii_border.html" import ascii_border %}

    {% call ascii_border() %}
        <p>Content in a terminal-style frame</p>
    {% end %}

    {% call ascii_border(variant="double") %}
        <h2>Double-line frame</h2>
    {% end %}

    {% call ascii_border(variant="rounded", glyph="✦") %}
        <p>Rounded corners with a glyph accent</p>
    {% end %}

Variants: single (default), double, rounded, heavy

{% from "chirpui/ascii_breaker_panel.html" import breaker_panel, breaker %}

    {% call breaker_panel(title="Services") %}
        {{ breaker("api", label="API", checked=true, variant="success") }}
        {{ breaker("db", label="DB", checked=true, variant="success") }}
        {{ breaker("cache", label="Cache", variant="danger") }}
        {{ breaker("queue", label="Queue") }}
    {% end %}

    With master switch (controls all):
    {% call breaker_panel(title="Production", master="main_power") %}
        {{ breaker("web", label="Web", checked=true) }}
        {{ breaker("worker", label="Worker", checked=true) }}
    {% end %}

Variants: default, heavy, double.
Size: sm, md (default).

Visual:
    ╔══════════════════════╗
    ║  PRODUCTION SYSTEMS  ║
    ╠══════════════════════╣
    ║  ┌───┐ ┌───┐ ┌───┐  ║
    ║  │███│ │███│ │░░░│  ║
    ║  │███│ │███│ │░░░│  ║
    ║  │░░░│ │░░░│ │███│  ║
    ║  │░░░│ │░░░│ │███│  ║
    ║  └───┘ └───┘ └───┘  ║
    ║   API    DB   Cache  ║
    ║  ■ ON  ■ ON  ■ OFF  ║
    ╚══════════════════════╝

{% from "chirpui/ascii_card.html" import ascii_card %}

    {% call ascii_card(title="Status") %}
        <p>All systems operational.</p>
    {% end %}

    {% call ascii_card(title="Deploy", variant="double", glyph="◆") %}
        <p>Last deploy: 2 hours ago</p>
    {% end %}

    {% call ascii_card() %}
        <p>Borderless content area</p>
    {% end %}

Variants: single (default), double, rounded, heavy.

Visual:
    ╭─── Status ──────────╮
    │                      │
    │ All systems           │
    │ operational.          │
    │                      │
    ╰──────────────────────╯

{% from "chirpui/ascii_checkbox.html" import ascii_checkbox, ascii_checkbox_group %}

    {{ ascii_checkbox("terms", label="Accept terms") }}
    {{ ascii_checkbox("notify", label="Email notifications", checked=true) }}

    {% call ascii_checkbox_group(legend="Options") %}
        {{ ascii_checkbox("opt_a", label="Enable logging") }}
        {{ ascii_checkbox("opt_b", label="Verbose output", checked=true) }}
        {{ ascii_checkbox("opt_c", label="Auto-restart") }}
    {% end %}

Variants: default, accent, success, danger.

{% from "chirpui/ascii_checkbox_group.html" import ascii_checkbox_group %}

{{ ascii_checkbox_group() }}

{% from "chirpui/ascii_divider.html" import ascii_divider %}

{{ ascii_divider()                        {# ──────────────────── }}

{% from "chirpui/ascii_empty.html" import ascii_empty %}

    {% call ascii_empty() %}{% end %}
    {% end %}

    {% call ascii_empty(glyph="~", heading="No results", description="Try a different search.", variant="muted") %}
        <button class="chirpui-button">Reset filters</button>
    {% end %}

Variants: default, muted, accent

{% from "chirpui/ascii_error.html" import ascii_error %}

    {% call ascii_error(code="404") %}
        <a href="/">Go home</a>
    {% end %}

    {% call ascii_error(code="500", heading="Something broke", description="We're looking into it.") %}
    {% end %}

Codes: 404, 403, 500, 503, timeout, empty

{% from "chirpui/ascii_fader.html" import ascii_fader, fader_bank %}

    {{ ascii_fader("volume", value=75, label="VOL") }}
    {{ ascii_fader("bass", value=40, label="BASS", variant="accent") }}

    {% call fader_bank() %}
        {{ ascii_fader("ch1", value=80, label="CH1") }}
        {{ ascii_fader("ch2", value=60, label="CH2") }}
        {{ ascii_fader("ch3", value=30, label="CH3") }}
        {{ ascii_fader("ch4", value=90, label="CH4") }}
    {% end %}

Variants: default, accent, success, warning, danger.
value: 0-100 (maps to 8 block levels).

{% from "chirpui/ascii_fader_bank.html" import ascii_fader_bank %}

{{ ascii_fader_bank() }}

{% from "chirpui/ascii_fill.html" import ascii_fill %}

{{ ascii_fill() }}

{% from "chirpui/ascii_fill_hover.html" import ascii_fill_hover %}

{{ ascii_fill_hover() }}

{% from "chirpui/ascii_indicator.html" import indicator, indicator_row %}

    {{ indicator("online", variant="success", blink=true) }}
    {{ indicator("error", variant="error", blink="fast") }}
    {{ indicator("standby", variant="muted") }}

    {% call indicator_row() %}
        {{ indicator("PWR", variant="success", blink=true) }}
        {{ indicator("NET", variant="success") }}
        {{ indicator("ERR", variant="error", blink="fast") }}
        {{ indicator("SYS", variant="warning", blink=true) }}
    {% end %}

Rows wrap by default for responsive layouts. Use indicator_row(nowrap=true) for a single-line strip.

Variants: success, warning, error, muted, accent.
Blink: true (steady pulse), "fast" (alarm), false (solid).
Glyph: ■ (default), ● (round), ◆ (diamond).

{% from "chirpui/ascii_indicator_row.html" import ascii_indicator_row %}

{{ ascii_indicator_row() }}

{% from "chirpui/ascii_knob.html" import ascii_knob %}

    {{ ascii_knob("volume", options=["Off", "Low", "Med", "High"], selected="Med") }}
    {{ ascii_knob("mode", options=["A", "B", "C"], selected="A", label="Mode") }}

The knob renders as a circular dial with a pointer:
    ╭─╮
    │◉│  ← current position indicator
    ╰─╯
Options are displayed as radio buttons styled as dial positions.

{% from "chirpui/ascii_modal.html" import ascii_modal, ascii_modal_trigger %}

    {{ ascii_modal_trigger("settings", label="Settings") }}

    {% call ascii_modal("settings", title="Settings") %}
        <p>Modal body content.</p>
    {% end %}

Variants: single (default), double, heavy.

Visual:
    ╔══════════════════════╗
    ║  Settings       [×]  ║
    ╠══════════════════════╣
    ║ Content              ║
    ╚══════════════════════╝

{% from "chirpui/ascii_modal_trigger.html" import ascii_modal_trigger %}

{{ ascii_modal_trigger() }}

{% from "chirpui/ascii_progress.html" import ascii_progress %}

    {{ ascii_progress(value=75) }}
    {{ ascii_progress(value=40, variant="accent", label="Loading") }}
    {{ ascii_progress(value=100, variant="success") }}

Values: 0-100 (percentage)

{% from "chirpui/ascii_radio.html" import ascii_radio %}

{{ ascii_radio() }}

{% from "chirpui/ascii_radio.html" import ascii_radio_group, ascii_radio %}

    {% call ascii_radio_group("priority", legend="Priority") %}
        {{ ascii_radio("priority", "low", label="Low") }}
        {{ ascii_radio("priority", "med", label="Medium", checked=true) }}
        {{ ascii_radio("priority", "high", label="High") }}
    {% end %}

Variants: default, accent.
Layout: vertical (default), horizontal.

{% from "chirpui/ascii_skeleton.html" import ascii_skeleton %}

{{ ascii_skeleton()                                  {# Single line }}

{% from "chirpui/ascii_sparkline.html" import ascii_sparkline %}

    {{ ascii_sparkline(values=[1, 3, 5, 7, 4, 2, 6]) }}
    {{ ascii_sparkline(values=[2, 8, 4, 6], variant="accent") }}
    {{ ascii_sparkline(values=[1, 2, 3, 4, 5, 6, 7, 8], variant="gradient") }}

Values are normalized to 1-8 range automatically.

{% from "chirpui/ascii_spinner.html" import ascii_spinner %}

{{ ascii_spinner()                              # Braille spinner (default) }}
{{ ascii_spinner(charset="box")                 # Box corners spinner }}
{{ ascii_spinner(charset="arrows", size="lg")   # Large arrow spinner }}
{{ ascii_spinner(charset="dots", label="Loading data...") }}

{% from "chirpui/ascii_stepper.html" import ascii_stepper %}

    {{ ascii_stepper(steps=["Build", "Test", "Deploy"], current=1) }}
    {{ ascii_stepper(steps=["Init", "Config", "Review", "Done"], current=2, variant="success") }}

current: 0-based index of active step. Steps before are complete, after are pending.
Variants: default, accent, success.

Visual:
    [✓]───[✓]───[●]───[○]───[○]
    Build  Test  Deploy Review Done

{% from "chirpui/ascii_toggle.html" import ascii_switch %}

{{ ascii_switch() }}

{% from "chirpui/ascii_tabs.html" import ascii_tabs, ascii_tab %}

    {% call ascii_tabs() %}
        {{ ascii_tab("overview", "Overview", active=true) }}
        {{ ascii_tab("details", "Details") }}
        {{ ascii_tab("logs", "Logs") }}
    {% end %}

With htmx:
    {% call ascii_tabs() %}
        {{ ascii_tab("overview", "Overview", url="/tabs/overview", hx_target="#panel", active=true) }}
        {{ ascii_tab("details", "Details", url="/tabs/details", hx_target="#panel") }}
    {% end %}

Variants: default, accent.
Contract: navigation links, not a roving-focus tabpanel controller.

Visual (active tab boxed):
    ┌──────────┐
    │ Overview  │  Details    Logs
    └──────────┴──────────────────

{% from "chirpui/ascii_table.html" import ascii_table, ascii_row %}

{% call ascii_table(headers=["Name", "Status", "Latency"]) %}
    {{ ascii_row("api-gateway", "Healthy", "23ms") }}
    {{ ascii_row("auth-service", "Healthy", "41ms") }}
{% end %}

Per-column alignment:
{% call ascii_table(headers=["Service", "Status", "Requests"], %}
                 align=["left", "center", "right"])
    {{ ascii_row("api-gateway", "Healthy", "12,847") }}
{% end %}

Variants: single (default), double, heavy, rounded.
Compact mode: compact=true for tighter spacing.
Striped rows: striped=true.
Caption: use the caption slot.

{% from "chirpui/ascii_tabs.html" import ascii_tabs, ascii_tab %}

    {% call ascii_tabs() %}
        {{ ascii_tab("overview", "Overview", active=true) }}
        {{ ascii_tab("details", "Details") }}
        {{ ascii_tab("logs", "Logs") }}
    {% end %}

With htmx:
    {% call ascii_tabs() %}
        {{ ascii_tab("overview", "Overview", url="/tabs/overview", hx_target="#panel", active=true) }}
        {{ ascii_tab("details", "Details", url="/tabs/details", hx_target="#panel") }}
    {% end %}

Variants: default, accent.
Contract: navigation links, not a roving-focus tabpanel controller.

Visual (active tab boxed):
    ┌──────────┐
    │ Overview  │  Details    Logs
    └──────────┴──────────────────

{% from "chirpui/ascii_ticker.html" import ascii_ticker %}

    {{ ascii_ticker("System healthy — 99.97% uptime — 0 errors — Next deploy in 2h") }}
    {{ ascii_ticker("BREAKING: New version deployed to production", variant="warning") }}

Variants: default, accent, success, warning, error.
Speed: slow, default, fast.

{% from "chirpui/ascii_tile_btn.html" import tile_btn, tile_grid %}

    {{ tile_btn("F1", label="EXEC") }}
    {{ tile_btn("◆", label="PWR", variant="success", lit=true) }}
    {{ tile_btn("■", label="STOP", variant="danger") }}

    Grid layout:
    {% call tile_grid(cols=4) %}
        {{ tile_btn("1", label="CH1") }}
        {{ tile_btn("2", label="CH2") }}
        {{ tile_btn("3", label="CH3") }}
        {{ tile_btn("4", label="CH4") }}
    {% end %}

Variants: default, success, warning, danger, accent.
lit=true starts in the "on" glow state.
toggle=true makes it a toggle button (checkbox).

{% from "chirpui/ascii_tile_grid.html" import ascii_tile_grid %}

{{ ascii_tile_grid() }}

{% from "chirpui/ascii_toggle.html" import ascii_toggle %}

{{ ascii_toggle() }}

{% from "chirpui/ascii_vu_meter.html" import ascii_vu_meter, vu_meter_stack %}

    {{ ascii_vu_meter("cpu", value=65, label="CPU") }}
    {{ ascii_vu_meter("mem", value=90, label="MEM", peak=true) }}

    {% call vu_meter_stack() %}
        {{ ascii_vu_meter("L", value=72, label="L") }}
        {{ ascii_vu_meter("R", value=68, label="R") }}
    {% end %}

Variants: default, accent, success, warning.
peak=true adds a peak hold marker.
width: number of cells (default 20).
animate=true adds a gentle bounce animation.

{% from "chirpui/ascii_vu_stack.html" import ascii_vu_stack %}

{{ ascii_vu_stack() }}

{% from "chirpui/aspect_ratio.html" import aspect_ratio %}

{% call aspect_ratio("16 / 9") %}
    <img src="/hero.jpg" alt="">
{% end %}

{% from "chirpui/file_item.html" import attachment_chip %}

{{ attachment_chip() }}

{% from "chirpui/aura.html" import aura %}
    {% from "chirpui/surface.html" import surface %}

    {% call aura(tone="accent", spread="md") %}
      {% call surface(variant="glass") %}…{% end %}
    {% end %}

    {% call aura(tone="warm", spread="lg", mirror=true) %}…{% end %}

Params:
    tone   — accent, warm, cool, muted, primary (token-driven tints)
    spread — sm (tight), md (default), lg (hero / wide blades)
    mirror — flip the gradient horizontally (e.g. panel column on the left)

See COMPONENT-OPTIONS.md § aura.

{% from "chirpui/aura_tone.html" import aura_tone %}

{{ aura_tone() }}

{% from "chirpui/aurora.html" import aurora %}

{% call aurora() %}
    <h1>Content over aurora</h1>
{% end %}

{% call aurora(variant="intense") %}
    <div>Vivid background</div>
{% end %}

{% from "chirpui/avatar.html" import avatar %}

{{ avatar(src="/img/user.jpg", alt="Alice") }}
{{ avatar(src="/img/user.jpg", alt="Alice", size="lg", status="online") }}
{{ avatar(initials="AB", alt="Alice Brown")  # fallback when no src }}
{{ avatar(src="/img/user.jpg", decorative=true)  # suppresses screen reader }}

{% from "chirpui/avatar_stack.html" import avatar_stack %}
{% from "chirpui/avatar.html" import avatar %}

{% call avatar_stack(max_visible=3) %}
    {{ avatar(src="/a.jpg", alt="Alice", size="sm") }}
    {{ avatar(src="/b.jpg", alt="Bob", size="sm") }}
    {{ avatar(src="/c.jpg", alt="Carol", size="sm") }}
{% end %}

{% call avatar_stack(max_visible=3, total=5) %}
    {{ avatar(...) }}
    {{ avatar(...) }}
    {{ avatar(...) }}
{% end %}
# Shows 3 avatars + "+2" overlay

{% from "chirpui/badge.html" import badge %}

{{ badge("Active", variant="success") }}
{{ badge("Grass", color="#78c850") }}
{{ badge("Fire", color="fire", fill="solid") }}
{{ badge("Tag", href="/tags/x") }}

{% from "chirpui/band.html" import band %}

{% call band(variant="elevated", width="inset", pattern="grid") %}
    {% slot header %}section_header("Featured"){% end %}
    {{ grid(cols=3) ...cards... end }}
{% end %}

{% call band(width="bleed", variant="accent") %}
    Full-bleed accent section content.
{% end %}

{% from "chirpui/bar_chart.html" import bar_chart %}

    {{ bar_chart(items=[ }}
        {"label": "create-rule", "value": 42},
        {"label": "debug-agent", "value": 18},
    ], max=50)

    {{ bar_chart(items=tag_counts, max=10, show_value=true, variant="gold") }}
    {{ bar_chart(items=..., label_href=lambda i: f"/skills?tag={i['label']}") }}

items: list of {label, value} or {label, value, href?}
max: scale for bar width (default: max of values)
show_value: show numeric value after bar (default: true)
variant: gold, radiant, success, muted (default: gold)
size: sm, md, lg (default: md)

{% from "chirpui/bento.html" import bento %}

{{ bento() }}

{% from "chirpui/bg_pattern.html" import bg_pattern %}

{{ bg_pattern() }}

{% from "chirpui/blade.html" import blade %}

{{ blade() }}

{% from "chirpui/layout.html" import block %}

{% call block() %}
  Content
{% end %}

{% from "chirpui/border_beam.html" import border_beam %}

{% call border_beam() %}
    <p>Content with glowing border</p>
{% end %}

{% call border_beam(variant="success") %}
    <p>Success-colored beam</p>
{% end %}

{% from "chirpui/bounce_in.html" import bounce_in %}

{{ bounce_in() }}

{% from "chirpui/breadcrumbs.html" import breadcrumbs %}

{{ breadcrumbs([ }}
    {"label": "Home", "href": "/"},
    {"label": "Docs", "href": "/docs"},
    {"label": "Getting Started"}
])

{% from "chirpui/button.html" import btn %}

{% call btn() %}
  Content
{% end %}

{% from "chirpui/btn_group.html" import btn_group %}

{{ btn_group() }}

{% from "chirpui/bulk_bar.html" import bulk_bar %}

{{ bulk_bar() }}

{% from "chirpui/calendar.html" import calendar %}

    {{ calendar(weeks=[[0,0,1,2,3,4,5],[6,7,8,...],...], }}
             month_label="January 2025",
             prev_url="/calendar/2024/12", next_url="/calendar/2025/2")

weeks: from calendar.monthcalendar(year, month) — 0 = empty cell.

{% from "chirpui/callout.html" import callout %}

    {% call callout(variant="info", title="Note") %}
        This is an informational callout with a title.
    {% end %}

    {% call callout(variant="warning", title="Tip") %}
        {% slot header_actions %}<button>Copy</button>{% end %}
        Body content.
    {% end %}

Variants: info, success, warning, error, neutral

{% from "chirpui/card.html" import card %}

    {% call card(title="My Card") %}
        <p>Card body content.</p>
    {% end %}

    {% call card(title="Settings", icon="⚙") %}
        {% slot header_actions %}<button>⋯</button>{% end %}
        <p>Body content.</p>
    {% end %}

    {% call card(title="Feature", variant="feature") %}
        {% slot media %}<img src="..." alt="...">{% end %}
        <p>Body content.</p>
        {% slot footer %}Tags or metadata here{% end %}
    {% end %}

    {% call card(title="Usage", attrs_map={"id": "usage-widget"}) %}
        <p>Stable id on the outer article for hx-target="#usage-widget".</p>
    {% end %}

Footer: use {% slot footer %} (preferred). The legacy footer= string parameter
still works but emits a ChirpUIDeprecationWarning.

{% from "chirpui/carousel.html" import carousel, carousel_slide %}

    {% call carousel(variant="compact", slide_count=4, show_dots=true) %}
        {% call carousel_slide(1) %}
            <div class="chirpui-card">...</div>
        {% end %}
        {% call carousel_slide(2) %}
            ...
        {% end %}
    {% end %}

Variants: compact (card strip), page (hero, one per viewport)

{% from "chirpui/media_patterns.html" import catalog_rail %}

{% call catalog_rail("actions") %}
  Content
{% end %}

{% from "chirpui/channel_card.html" import channel_card %}
    {% from "chirpui/button.html" import btn %}

    {% call channel_card(href="/channel/1", name="Dev Channel", subscribers="12.5K") %}
        {% slot body %}<p>Custom info</p>{% end %}
        {% slot actions %}btn("Subscribe", variant="primary"){% end %}
    {% end %}

DEPRECATED: use_slots parameter. Always use named slots (body, actions).
The use_slots=false path will be removed in a future release.

{% from "chirpui/chapter_list.html" import chapter_list, chapter_item %}

    {% call chapter_list(summary="Chapters") %}
        {{ chapter_item(title="Introduction", timestamp="0:00", href="/watch/1#t=0") }}
        {{ chapter_item(title="Setup", timestamp="2:34", href="/watch/1#t=154") }}
        {{ chapter_item(title="Demo", timestamp="5:12", href="/watch/1#t=312") }}
    {% end %}

Slots: summary_actions (actions next to summary).

{% from "chirpui/chapter_list.html" import chapter_list, chapter_item %}

    {% call chapter_list(summary="Chapters") %}
        {{ chapter_item(title="Introduction", timestamp="0:00", href="/watch/1#t=0") }}
        {{ chapter_item(title="Setup", timestamp="2:34", href="/watch/1#t=154") }}
        {{ chapter_item(title="Demo", timestamp="5:12", href="/watch/1#t=312") }}
    {% end %}

Slots: summary_actions (actions next to summary).

{% from "chirpui/chat_input.html" import composer %}
{% call composer(action="/send", name="message", send_key="enter",
                 stop_action="/abort", hx_target="#thread",
                 hx_swap="beforeend") %}
    {% slot attachments %}{% end %}
    {% slot suggestions %}{% end %}
{% end %}

{% from "chirpui/chat_layout.html" import chat_layout %}

    {% call chat_layout(show_activity=true, fill=true) %}
    {% slot messages %}
        <ul class="chirpui-message-thread">...</ul>
    {% end %}
    {% slot input %}
        <div class="chirpui-chat-input">...</div>
    {% end %}
    {% slot activity %}
        <aside>Model info, suggestions...</aside>
    {% end %}
    {% end %}

fill=true: adds chirpui-chat-layout--fill. For SSE/HTMX roots inside the messages
slot, add class chirpui-chat-layout__messages-body on the wrapper (see LAYOUT-VERTICAL.md).

{% from "chirpui/children.html" import children %}

{{ children() }}

{% from "chirpui/chip_group.html" import chip %}

{{ chip() }}

{% from "chirpui/chip_group.html" import chip_group %}

{% call chip_group() %}
  Content
{% end %}

{% from "chirpui/citations.html" import citation_chip, sources_summary, citation_modal %}
{{ citation_chip(index=1, title="Scope spec", href="https://x.test/doc",
                 source_id="src-1") }}
{{ sources_summary(sources=[{"id": "src-1", "title": "Scope spec",
                             "href": "https://x.test/doc", "relevance": "high"}]) }}

{% from "chirpui/clamp_2.html" import clamp_2 %}

{{ clamp_2() }}

{% from "chirpui/clamp_3.html" import clamp_3 %}

{{ clamp_3() }}

{% from "chirpui/click_jello.html" import click_jello %}

{{ click_jello() }}

{% from "chirpui/click_wobble.html" import click_wobble %}

{{ click_wobble() }}

{% from "chirpui/layout.html" import cluster %}

{% call cluster() %}
  Content
{% end %}

{% from "chirpui/code.html" import code %}

{{ code() }}

{% from "chirpui/code_block.html" import code_block %}

{{ code_block() }}

{% from "chirpui/code_block_wrapper.html" import code_block_wrapper %}

{{ code_block_wrapper() }}

{% from "chirpui/collapse.html" import collapse %}

{% call collapse(trigger="Click to expand", open=false) %}
    Hidden content here.
{% end %}

{% from "chirpui/combobox.html" import combobox %}

{{ combobox(name="country", label="Country",
            placeholder="Search countries…", value="us",
            options=[{"label": "Canada", "value": "ca"},
                     {"label": "United States", "value": "us"}]) }}

{{ combobox(name="tags", label="Tags", multiple=true,
            placeholder="Add tags…", options=[...]) }}

{% from "chirpui/command_bar.html" import command_bar %}

{{ command_bar() }}

{% from "chirpui/command_palette.html" import ( %}
    command_palette, command_palette_trigger, command_palette_item
)

{{ command_palette_trigger() }}
{% call command_palette(search_url="/search") %}
  {# optional initial/recent results

{% from "chirpui/comment.html" import comment, comment_thread %}
{% from "chirpui/avatar.html" import avatar %}

{% call comment(author="Alice", time="1h ago", avatar_src="/a.jpg") %}
    <p>Great post! Thanks for sharing.</p>
{% end %}

{% call comment(author="Bob", time="2h ago") %}
    <p>I agree with this.</p>
    {% slot actions %}<a href="/reply">Reply</a>{% end %}
{% end %}

{% from "chirpui/comment_thread.html" import comment_thread %}

{{ comment_thread() }}

{% from "chirpui/composer_shell.html" import composer_shell %}

{% call composer_shell("actions") %}
  Content
{% end %}

{% from "chirpui/confetti.html" import confetti, confetti_trigger %}

{{ confetti() }}

{{ confetti_trigger("Celebrate!", event="celebrate") }}

{# Or manually:

{% from "chirpui/config_row.html" import config_row_list, config_row_toggle, config_row_select, config_row_editable %}

{% call config_row_list() %}
    {{ config_row_toggle("acp.enabled", "ACP enabled", checked=config.acp.enabled, form_action="/config/set", attrs_map={...}) }}
    {{ config_row_select("logs.level", "Log level", options=[...], selected=config.logs.level, form_action="/config/set", attrs_map={...}) }}
    {{ config_row_editable("endpoint", config.acp.endpoint, edit_url="/config/edit/acp.endpoint", swap_id="acp-endpoint") }}
{% end %}

{% from "chirpui/config_row_list.html" import config_row_list %}

{{ config_row_list() }}

{% from "chirpui/confirm.html" import confirm_dialog, confirm_trigger %}

    {{ confirm_trigger("del-dlg", label="Delete") }}

    {% call confirm_dialog("del-dlg", title="Delete item?", message="This cannot be undone.", %}
                       confirm_label="Delete", cancel_label="Cancel", variant="danger",
                       confirm_url="/items/1/delete", confirm_method="POST")
    {% end %}

When confirm_url is provided, confirm submits the form (htmx or native).
Cancel closes the dialog via form method="dialog".

{% from "chirpui/constellation.html" import constellation %}

{% call constellation() %}
    <h1>Starfield hero</h1>
{% end %}

{% call constellation(variant="warm", density="dense") %}
    <p>Dense warm starfield</p>
{% end %}

{% from "chirpui/layout.html" import container %}

{% call container() %}
  Content
{% end %}

{% from "chirpui/context_menu.html" import context_menu %}

{% call context_menu(items=[
    {"label": "Open", "action": "open", "icon": "↗"},
    {"label": "Rename", "action": "rename"},
    {"label": "Delete", "action": "delete", "variant": "danger"},
], label="Right-click for actions") %}
    <div class="chirpui-surface">Right-click for actions</div>
{% end %}

{% from "chirpui/context_menu.html" import context_menu %}

{% call context_menu(items=[
    {"label": "Open", "action": "open", "icon": "↗"},
    {"label": "Rename", "action": "rename"},
    {"label": "Delete", "action": "delete", "variant": "danger"},
], label="Right-click for actions") %}
    <div class="chirpui-surface">Right-click for actions</div>
{% end %}

{% from "chirpui/conversation_item.html" import conversation_item %}
{% from "chirpui/avatar.html" import avatar %}

{% call conversation_item(href="/chat/1", name="Alice", preview="Hey!", unread=3, time="2m") %}
    {{ avatar(src="/alice.jpg", alt="Alice", size="sm") }}
    {% slot actions %}<button>⋯</button>{% end %}
{% end %}

{% from "chirpui/conversation_list.html" import conversation_list, conversation_item %}

{% call conversation_list() %}
    {% call conversation_item(href="/chat/1", name="Alice", preview="Hey there!", unread=2, time="2m") %}{% end %}
    {% end %}
    {% call conversation_item(href="/chat/2", name="Bob", preview="See you tomorrow", muted=true) %}{% end %}
    {% end %}
{% end %}

{% from "chirpui/copy_button.html" import copy_button %}
{{ copy_button("text to copy", label="Copy") }}

{% from "chirpui/counter_badge.html" import counter_badge %}

{{ counter_badge() }}

{% from "chirpui/cta_band.html" import cta_band %}

{{ cta_band( }}
    title="Start building",
    body="Improve each step of the lifecycle.",
    primary_label="Start",
    primary_href="/start",
    secondary_label="Get a demo",
    secondary_href="/demo",
)

{% from "chirpui/data_grid.html" import data_grid %}

{% call data_grid() %}
  Content
{% end %}

{% from "chirpui/data_table.html" import data_table %}

{{ data_table( }}
    title="Users",
    headers=["Name", "Status"],
    rows=[["Ada", "Active"]],
    filter_action="/users",
    current=1,
    total=4,
    url_pattern="/users?page={page}",
)

{% from "chirpui/date_picker.html" import date_picker %}

{{ date_picker(name="due", label="Due date", value="2025-01-15") }}
{{ date_picker(name="span", label="Date range", range=true,
               min="2025-01-01", max="2025-12-31") }}

{% from "chirpui/density.html" import density %}

{{ density() }}

{% from "chirpui/description_list.html" import description_list, description_item %}

    {{ description_list(items=[{"term": "Name", "detail": "Alice"}, {"term": "Email", "detail": "alice@example.com"}]) }}

    Or with slot:
    {% call description_list() %}
        {{ description_item("Name", "Alice") }}
        {{ description_item("Email", "alice@example.com") }}
    {% end %}

    {{ description_list(items=..., variant="horizontal") for term left, detail right layout. }}

    Modifiers: hoverable=true (row highlight on hover), divided=true (border between rows),
               relaxed=true (more vertical spacing).
    Icon support: description_item("Name", "Alice", icon="◇")
Slots: header (content above the list).

{% from "chirpui/detail_header.html" import detail_header %}

{% call detail_header("actions") %}
  Content
{% end %}

{% from "chirpui/display.html" import display %}

{{ display() }}

{% from "chirpui/divider.html" import divider, divider_text %}

{{ divider()  — line only }}
{{ divider("OR")  — line with text }}
{{ divider("OR", horizontal=true) }}
{{ divider("OR", variant="primary") }}

{% from "chirpui/dl.html" import dl %}

{{ dl() }}

{% from "chirpui/dnd.html" import dnd_list %}

{% call dnd_list() %}
  Content
{% end %}

{% from "chirpui/dock.html" import dock %}

{{ dock(items=[ }}
    {"icon": "home", "label": "Home", "href": "/"},
    {"icon": "search", "label": "Search", "href": "/search"},
    {"icon": "settings", "label": "Settings", "active": true},
])

{{ dock(items=[...], variant="glass", size="lg") }}

{% from "chirpui/document_header.html" import document_header %}

{% call document_header("README.md", path="docs/README.md", status="Draft") %}
{% slot actions %}<button type="button">Save</button>{% end %}
{% end %}

{% from "chirpui/donut.html" import donut %}

{{ donut(value=75, max=100) }}
{{ donut(value=3, max=5, text="3/5", variant="success") }}
{{ donut(value=42, max=100, caption="Uptime", size="lg") }}
{{ donut(value=40, max=100, caption="Success") }}

{% from "chirpui/drawer.html" import drawer, drawer_trigger %}

{{ drawer_trigger("side-drawer", label="Open panel") }}

{% call drawer("side-drawer", title="Filters", side="right") %}
    <p>Drawer content.</p>
{% end %}

{% from "chirpui/dropdown.html" import dropdown %}

{% call dropdown(label="Options") %}
    {% slot header %}<div class="chirpui-dropdown__header">Signed in as alice</div>{% end %}
    <a href="/settings">Settings</a>
    <a href="/profile">Profile</a>
    {% slot footer %}<a href="/logout">Log out</a>{% end %}
{% end %}

{% from "chirpui/dropdown_menu.html" import dropdown_menu, dropdown_select, dropdown_split %}
{% from "chirpui/button.html" import btn %}

{{ dropdown_menu(btn("Actions", icon="▾"), items=[...]) }}

{% from "chirpui/dropdown_menu.html" import dropdown_menu, dropdown_select, dropdown_split %}
{% from "chirpui/button.html" import btn %}

{{ dropdown_menu(btn("Actions", icon="▾"), items=[...]) }}

{% from "chirpui/empty_panel_state.html" import empty_panel_state %}

{% call empty_panel_state(title="No file selected", icon="docs") %}
<p>Select a file from the tree to start editing.</p>
{% slot actions %}<a href="/author">Browse</a>{% end %}
{% end %}

{% from "chirpui/empty.html" import empty_state %}

    {% call empty_state(icon="✧", title="No Projects") %}
        <p>Create your first project to get started.</p>
        {% slot actions %}btn("New Project", variant="primary"){% end %}
    {% end %}

    {% call empty_state(title="No items", action_label="Create", action_href="/new") %}
        <p>Get started by creating your first item.</p>
    {% end %}

    {% call empty_state(title="No results", code="query", search_hint="Try a different search term") %}
        <p>No matches found.</p>
    {% end %}

Docs wave extras: code, suggestions, search_hint (all data-in).

{% from "chirpui/entity_header.html" import entity_header %}

{% call entity_header(title="Chain: My Workflow", meta="3 steps · Updated 2h ago") %}
    {% slot actions %}
    {{ btn("Edit", href="/chains/1/edit") }}
    {{ confirm_trigger("del-chain", label="Delete") }}
    {% end %}
{% end %}

{% from "chirpui/fab.html" import fab %}

    {{ fab("search", aria_label="Search", href="/search") }}
    {{ fab("plus", aria_label="Create", variant="primary", corner="bottom-end", }}
        visibility="mobile-only", hx={"post": "/new", "target": "#main"})

`target` wires the FAB to open a native ``<dialog>`` via ``chirpuiDialogTarget()``
(focus returns to the FAB on close). Pair with ``command_palette_fab()`` for
mobile command-palette access.

hx={...} — preferred for htmx attributes on button FABs.

{% from "chirpui/facet_chip.html" import facet_chip %}

{{ facet_chip() }}

{% from "chirpui/feature_section.html" import feature_section, feature_stack %}

{% call feature_section(layout="split", variant="halo", reverse=true) %}
    {% slot eyebrow %}New{% end %}
    {% slot title %}Lightning fast builds{% end %}
    <p>Description text with details.</p>
    <ul><li>Bullet one</li><li>Bullet two</li></ul>
    {% slot actions %}btn("Get started", variant="primary"){% end %}
    {% slot media %}surface(...)...install_snippet(...){% end %}
{% end %}

{% call feature_stack() %}
    {{ feature_section(...)...end }}
    {{ feature_section(..., reverse=true)...end }}
{% end %}

{% from "chirpui/feature_section.html" import feature_section, feature_stack %}

{% call feature_section(layout="split", variant="halo", reverse=true) %}
    {% slot eyebrow %}New{% end %}
    {% slot title %}Lightning fast builds{% end %}
    <p>Description text with details.</p>
    <ul><li>Bullet one</li><li>Bullet two</li></ul>
    {% slot actions %}btn("Get started", variant="primary"){% end %}
    {% slot media %}surface(...)...install_snippet(...){% end %}
{% end %}

{% call feature_stack() %}
    {{ feature_section(...)...end }}
    {{ feature_section(..., reverse=true)...end }}
{% end %}

{% from "chirpui/forms.html" import field_wrapper %}

{% call field_wrapper() %}
  Content
{% end %}

{% from "chirpui/forms.html" import fieldset %}

{% call fieldset() %}
  Content
{% end %}

{% from "chirpui/file_tree.html" import file_tree %}

{% call file_tree(items=items, title="Files", show_icons=true) %}
{% slot actions %}<button type="button">Refresh</button>{% end %}
{% slot header %}<input type="search" placeholder="Filter files">{% end %}
{% slot footer %}<span>12 files</span>{% end %}
{% end %}

Linked branch parents:
{{ file_tree(items=items, branch_mode="linked") }}

{% from "chirpui/filter_bar.html" import filter_bar %}

{{ filter_bar() }}

{% from "chirpui/filter_chips.html" import filter_group, filter_chip %}

{% call filter_group(name="Type") %}
    {{ filter_chip("All", href="/", active=true) }}
    {{ filter_chip("Grass", color="#78c850", href="/g") }}
{% end %}

{% from "chirpui/workspace_primitives.html" import filter_rail %}

{% call filter_rail() %}
  Content
{% end %}

{% from "chirpui/filter_bar.html" import filter_row %}

{% call filter_row() %}
  Content
{% end %}

{% from "chirpui/flow.html" import flow %}

{{ flow() }}

{% from "chirpui/focus_ring.html" import focus_ring %}

{{ focus_ring() }}

{% from "chirpui/follow_ups.html" import suggestion_chips %}

{{ suggestion_chips() }}

{% from "chirpui/font_2xl.html" import font_2xl %}

{{ font_2xl() }}

{% from "chirpui/font_base.html" import font_base %}

{{ font_base() }}

{% from "chirpui/font_lg.html" import font_lg %}

{{ font_lg() }}

{% from "chirpui/font_medium.html" import font_medium %}

{{ font_medium() }}

{% from "chirpui/font_mono.html" import font_mono %}

{{ font_mono() }}

{% from "chirpui/font_sm.html" import font_sm %}

{{ font_sm() }}

{% from "chirpui/font_xl.html" import font_xl %}

{{ font_xl() }}

{% from "chirpui/font_xs.html" import font_xs %}

{{ font_xs() }}

{% from "chirpui/forms.html" import form %}

{% call form() %}
  Content
{% end %}

{% from "chirpui/forms.html" import form_actions %}

{% call form_actions() %}
  Content
{% end %}

{% from "chirpui/forms.html" import form_error_summary %}

{{ form_error_summary() }}

{% from "chirpui/layout.html" import frame %}

{% call frame() %}
  Content
{% end %}

{% from "chirpui/glitch_text.html" import glitch_text %}

{{ glitch_text("SYSTEM ERROR") }}
{{ glitch_text("HACK THE PLANET", variant="intense", tag="h1") }}

{% from "chirpui/glow_card.html" import glow_card %}

{% call glow_card() %}
    <h3>Feature</h3>
    <p>Description of feature</p>
{% end %}

{% call glow_card(variant="accent") %}
    <p>Accent-colored glow</p>
{% end %}

{% from "chirpui/gradient_text.html" import gradient_text %}

{{ gradient_text("Premium Feature") }}
{{ gradient_text("Shifting Colors", animated=true, tag="h2") }}

{% from "chirpui/grain.html" import grain %}

{% call grain() %}
    <img src="photo.jpg" alt="Vintage photo">
{% end %}

{% call grain(variant="heavy", animated=true) %}
    <div>Film-like background</div>
{% end %}

{% from "chirpui/layout.html" import grid %}

{% call grid() %}
  Content
{% end %}

{% from "chirpui/hero.html" import hero %}

    {% call hero(title="Welcome", subtitle="Build something great.", background="solid") %}
        <p>Some intro text.</p>
        {% slot actions %}<a href="/start" class="chirpui-btn chirpui-btn--primary">Get started</a>{% end %}
    {% end %}

Backgrounds: solid, muted, gradient, mesh, animated-gradient

{% from "chirpui/hero_effects.html" import hero_effects %}

{% call hero_effects(effect="particles") %}
    <h1>Welcome</h1>
    <p>Tagline with floating particles behind</p>
{% end %}

{% call hero_effects(effect="meteors", variant="accent") %}
    <h1>Launch Day</h1>
{% end %}

{% from "chirpui/holy_light.html" import holy_light %}

{% call holy_light() %}
    <h1>Radiant hero content</h1>
{% end %}

{% call holy_light(variant="silver", intensity="intense") %}
    <p>Silver divine light</p>
{% end %}

{% from "chirpui/hover_card.html" import hover_card %}

{% call hover_card(open_delay=200) %}
    {% slot trigger %}<button>Hover me</button>{% end %}
    <p>Preview content with richer detail.</p>
{% end %}

{% from "chirpui/hover_jello.html" import hover_jello %}

{{ hover_jello() }}

{% from "chirpui/hover_rubber.html" import hover_rubber %}

{{ hover_rubber() }}

{% from "chirpui/hover_wobble.html" import hover_wobble %}

{{ hover_wobble() }}

{% from "chirpui/icon_btn.html" import icon_btn %}

    {{ icon_btn("✕", aria_label="Close") }}
    {{ icon_btn("⚙", variant="ghost", size="lg", href="/settings", aria_label="Settings") }}
    {{ icon_btn("🗑", aria_label="Delete", hx={"delete": "/item/1", "target": "#list", "swap": "outerHTML"}) }}

hx={"post": "/url", "target": "#id"} — preferred for htmx attributes.
Individual hx_get/hx_post/hx_target/hx_swap kwargs override dict keys.

{% from "chirpui/index_card.html" import index_card %}

{{ index_card(href="/api/foo", title="foo", description="Does something.", badge="function") }}
{{ index_card(href="/docs/start", title="Getting Started", description="Quick start guide.") }}

{% from "chirpui/infinite_scroll.html" import infinite_scroll %}

{% call infinite_scroll(load_url="/feed?page=2", target="this", swap="beforeend") %}
    ... existing items ...
{% end %}

{% from "chirpui/inline.html" import inline %}

{{ inline() }}

{% from "chirpui/inline_counter.html" import inline_counter %}

{{ inline_counter() }}

{% from "chirpui/inline_edit_field.html" import inline_edit_field_display, inline_edit_field_form %}

{# Display block — swap target for edit form

{% from "chirpui/forms.html" import input_group %}

{% call input_group("prefix") %}
  Content
{% end %}

{% from "chirpui/input_otp.html" import input_otp %}

{{ input_otp("otp", length=6, label="Verification code") }}

{% from "chirpui/workspace_primitives.html" import inspector_panel %}

{% call inspector_panel() %}
  Content
{% end %}

{% from "chirpui/code.html" import install_snippet %}

{% call install_snippet() %}
  Content
{% end %}

{% from "chirpui/islands.html" import island_root %}

{% call island_root() %}
  Content
{% end %}

{% from "chirpui/item.html" import item %}

{{ item(title="Settings", description="Manage workspace preferences", href="/settings/") }}

{% from "chirpui/jello.html" import jello %}

{{ jello() }}

{% from "chirpui/kbd.html" import kbd %}

{{ kbd("⌘K") }}
{{ kbd(["Ctrl", "K"], size="sm") }}

{% from "chirpui/key_value_form.html" import key_value_form %}

{{ key_value_form() }}

{% from "chirpui/label.html" import ui_label %}

{{ ui_label("Email", for_id="email", required=true) }}

{% from "chirpui/label_overline.html" import label_overline %}
{{ label_overline("Section title", section=true, tag="h3") }}
{{ label_overline("Sub-label") }}

{% from "chirpui/latest_line.html" import latest_line %}

{{ latest_line() }}

{% from "chirpui/layout.html" import layer %}

{% call layer() %}
  Content
{% end %}

{% from "chirpui/marketing_patterns.html" import lifecycle_showcase %}

{{ lifecycle_showcase() }}

{% from "chirpui/link.html" import link %}

{{ link("Home", href="/") }}
{{ link("Docs", href="/docs", external=true) }}

{% from "chirpui/list.html" import list, list_item %}

{% call list_group() %}
    {% call list_item() %}Row one{% end %}
    {% call list_item() %}Row two{% end %}
{% end %}

{{ list_group(["Item 1", "Item 2", "Item 3"]) }}
{{ list_group([{"label": "A", "href": "/a"}, {"label": "B"}], linked=true) }}

{% from "chirpui/list_reset.html" import list_reset %}

{{ list_reset() }}

{% from "chirpui/live_badge.html" import live_badge %}

{{ live_badge() }}
{{ live_badge(viewers="2.4K") }}

{% from "chirpui/media_patterns.html" import live_event_card %}

{{ live_event_card() }}

{% from "chirpui/streaming.html" import streaming_block, copy_btn, prose %}

{% call streaming_block(streaming=true) %}
    Content or thinking...
{% end %}

{% call copy_btn(text="Copy", copy_text=answer_text) %}

{{ prose(content | markdown | safe(reason="markdown output")) }}

{% from "chirpui/logo.html" import logo %}

    {{ logo(text="ChirpUI", variant="text") }}
    {{ logo(image_src="/static/logo.svg", image_alt="ChirpUI", variant="image") }}
    {{ logo(text="ChirpUI", image_src="/static/logo.svg", href="/", variant="both") }}

Variants: text, image, both
Sizes: sm, md, lg
Align: start, center, end

{% from "chirpui/logo_cloud.html" import logo_cloud %}

{{ logo_cloud(items=[ }}
    {"name": "Acme", "src": "/static/acme.svg", "href": "/customers/acme"},
    {"name": "Globex"},
])

{% from "chirpui/marquee.html" import marquee %}

{{ marquee(items=["Acme Corp", "Globex", "Initech", "Umbrella"]) }}
{{ marquee(items=["Fast", "Reliable", "Secure"], speed="fast", reverse=true) }}

{% from "chirpui/mb_md.html" import mb_md %}

{{ mb_md() }}

{% from "chirpui/measure_lg.html" import measure_lg %}

{{ measure_lg() }}

{% from "chirpui/measure_md.html" import measure_md %}

{{ measure_md() }}

{% from "chirpui/measure_sm.html" import measure_sm %}

{{ measure_sm() }}

{% from "chirpui/media_patterns.html" import media_hero_shelf %}

{{ media_hero_shelf() }}

{% from "chirpui/media_object.html" import media_object, media_object_media, ... %}

    {% call media_object(align="start") %}
        {% slot media %}<img src="..." alt="...">{% end %}
        {% slot body %}<h3>Title</h3><p>Description.</p>{% end %}
        {% slot actions %}<button>Action</button>{% end %}
    {% end %}

Legacy: media_object_media, media_object_body, media_object_actions

{% from "chirpui/mention.html" import mention %}

{{ mention("alice", href="/user/alice") }}
{{ mention("bob")  # span if no href }}

{% from "chirpui/menubar.html" import menubar %}

{{ menubar(label="Application", items=[
    {"label": "File", "items": [
        {"label": "New", "action": "new"},
        {"label": "Open", "action": "open"},
    ]},
    {"label": "Edit", "items": [
        {"label": "Undo", "action": "undo"},
    ]},
]) }}

{% from "chirpui/menubar.html" import menubar %}

{{ menubar(label="Application", items=[
    {"label": "File", "items": [
        {"label": "New", "action": "new"},
        {"label": "Open", "action": "open"},
    ]},
    {"label": "Edit", "items": [
        {"label": "Undo", "action": "undo"},
    ]},
]) }}

{% from "chirpui/message_actions.html" import message_actions %}
{% call message_actions(is_last=true, copy_text=raw_markdown,
                        can_delete=true, delete_url="/m/42", delete_target="#m-42") %}
    {{ action_bar_item(icon="up", label="Good answer") }}
    {{ action_bar_item(icon="refresh", label="Regenerate") }}
{% end %}

{% from "chirpui/message_meta.html" import message_meta %}
{{ message_meta("claude-opus-4-8", "2:34 PM",
                usage={"input": 1820, "output": 412, "total": 2232}) }}

{% from "chirpui/message_reactions.html" import message_reactions %}

{{ message_reactions() }}

{% from "chirpui/message_thread.html" import message_thread, message_bubble %}

{% call message_thread() %}
    {% call message_bubble(align="left") %}
        ...
    {% end %}
    {% call message_bubble(align="right") %}
        ...
    {% end %}
{% end %}

{% from "chirpui/message_bubble.html" import message_bubble %}

{% call message_bubble(align="left", status="read") %}
    {% call avatar_slot() %}
        {{ avatar(src="...", alt="Alice", size="sm") }}
    {% end %}
    <p>Hello! How are you?</p>
    <time>2:34 PM</time>
    {% slot actions %}{{ message_actions(is_last=true, copy_text="Hello!") }}{% end %}
{% end %}

{% from "chirpui/meteor.html" import meteor %}

{% call meteor() %}
    <h1>Hero content with meteors</h1>
{% end %}

{% call meteor(count=6, variant="accent") %}
    <p>More streaks, accent color</p>
{% end %}

{% from "chirpui/metric_grid.html" import metric_card %}

{{ metric_card() }}

{% from "chirpui/metric_grid.html" import metric_grid %}

{% call metric_grid() %}
  Content
{% end %}

{% from "chirpui/workspace_primitives.html" import metric_strip %}

{% call metric_strip() %}
  Content
{% end %}

{% from "chirpui/min_w_0.html" import min_w_0 %}

{{ min_w_0() }}

{% from "chirpui/modal.html" import modal, modal_trigger %}

{{ modal_trigger("my-modal", label="Open Settings") }}

{% call modal("my-modal", title="Settings") %}
    <p>Modal body content.</p>
    {% fill footer %}
        <button class="chirpui-btn chirpui-btn--ghost" onclick="this.closest('dialog').close()">Cancel</button>
        <button class="chirpui-btn chirpui-btn--primary">Save</button>
    {% end %}
{% end %}

{% from "chirpui/model_card.html" import model_card %}

{{ model_card() }}

{% from "chirpui/forum_patterns.html" import moderation_queue_item %}

{% call moderation_queue_item("actions") %}
  Content
{% end %}

{% from "chirpui/mt_md.html" import mt_md %}

{{ mt_md() }}

{% from "chirpui/mt_sm.html" import mt_sm %}

{{ mt_sm() }}

{% from "chirpui/nav_link.html" import nav_link %}

{{ nav_link("/page-2", "Next page") }}

{% call nav_link("/details") %}View details{% end %}

{% from "chirpui/nav_pill.html" import nav_pill %}

{{ nav_pill() }}

{% from "chirpui/nav_progress.html" import nav_progress %}

{{ nav_progress() }}

{% from "chirpui/nav_tree.html" import nav_tree %}

{% call nav_tree(items=items, show_icons=false) %}
    slot header: version selector, search
{% end %}

{% from "chirpui/navbar.html" import navbar, navbar_link, navbar_end, navbar_dropdown %}

    {% call navbar(brand="My App", brand_url="/", use_slots=true) %}
        {{ navbar_link("/docs", "Docs", match="prefix") }}
        {{ navbar_link("/about", "About", match="exact") }}
        {% slot end %}btn("Login", href="/login"){% end %}
    {% end %}

    {% call navbar(brand_url="/", use_slots=true, brand_slot=true) %}
        {% slot brand %}logo(text="My App", image_src="/static/logo.svg", variant="both"){% end %}
        {{ navbar_link("/docs", "Docs", match="prefix") }}
    {% end %}

Legacy: wrap right-aligned content in navbar_end(). Add cls="chirpui-navbar--sticky" for sticky nav.

{% from "chirpui/navbar.html" import navbar, navbar_link, navbar_end, navbar_dropdown %}

    {% call navbar(brand="My App", brand_url="/", use_slots=true) %}
        {{ navbar_link("/docs", "Docs", match="prefix") }}
        {{ navbar_link("/about", "About", match="exact") }}
        {% slot end %}btn("Login", href="/login"){% end %}
    {% end %}

    {% call navbar(brand_url="/", use_slots=true, brand_slot=true) %}
        {% slot brand %}logo(text="My App", image_src="/static/logo.svg", variant="both"){% end %}
        {{ navbar_link("/docs", "Docs", match="prefix") }}
    {% end %}

Legacy: wrap right-aligned content in navbar_end(). Add cls="chirpui-navbar--sticky" for sticky nav.

{% from "chirpui/navigation_menu.html" import navigation_menu %}

{{ navigation_menu(label="Primary", items=[
    {"label": "Products", "children": [
        {"label": "Analytics", "href": "/products/analytics"},
        {"label": "Automation", "href": "/products/automation"},
    ]},
    {"label": "Pricing", "href": "/pricing"},
]) }}

{% from "chirpui/neon_text.html" import neon_text %}

{{ neon_text("OPEN") }}
{{ neon_text("LIVE", color="magenta", animation="pulse") }}
{{ neon_text("ARCADE", color="green", animation="flicker", tag="h1") }}

{% from "chirpui/notification_dot.html" import notification_dot %}

{% call notification_dot() %}
    <button>Inbox</button>
{% end %}

{% call notification_dot(variant="success", count=3) %}
    <span>Messages</span>
{% end %}

{% from "chirpui/number_scale.html" import number_scale %}

{{ number_scale() }}

{% from "chirpui/number_ticker.html" import number_ticker %}

{{ number_ticker(1250) }}
{{ number_ticker(99, prefix="$", suffix="+", variant="mono", size="xl") }}

{% from "chirpui/orbit.html" import orbit %}

{% call orbit(items=["🐍", "⚡", "🔥", "💎"]) %}
    <span style="font-size: 2rem">🌍</span>
{% end %}

{% call orbit(items=["A", "B", "C"], size="sm", speed="fast") %}
    <strong>⚙️</strong>
{% end %}

{% from "chirpui/overlay.html" import overlay %}

    <div style="position:relative;">
        <img src="hero.jpg" alt="...">
        {{ overlay("dark") }}
        <div style="position:absolute;inset:0;display:flex;align-items:flex-end;padding:1rem;">
            <h2>Text on image</h2>
        </div>
    </div>

Variants: dark, gradient-bottom, gradient-top

{% from "chirpui/page_fill.html" import page_fill %}

{{ page_fill() }}

{% from "chirpui/layout.html" import page_header %}

{% call page_header("actions") %}
  Content
{% end %}

{% from "chirpui/hero.html" import hero %}

    {% call hero(title="Welcome", subtitle="Build something great.", background="solid") %}
        <p>Some intro text.</p>
        {% slot actions %}<a href="/start" class="chirpui-btn chirpui-btn--primary">Get started</a>{% end %}
    {% end %}

Backgrounds: solid, muted, gradient, mesh, animated-gradient

{% from "chirpui/pagination.html" import pagination %}

{{ pagination(current=3, total=10, url_pattern="/items?page=...", }}
           hx_target="#item-list", hx_select="#main")

{% from "chirpui/panel.html" import panel %}

{% call panel(title="Tool Activity", scroll_body=true) %}
{% slot actions %}{{ btn("Clear", variant="ghost", size="sm") }}{% end %}
<div>Activity rows...</div>
{% slot footer %}<span class="chirpui-text-muted chirpui-ui-sm">Connected</span>{% end %}
{% end %}

{% from "chirpui/param_override.html" import param_field, advanced_params, scope_indicator %}

{% call advanced_params() %}
    {{ param_field("temperature", value=0.9, default=0.7, widget="range",
                   min=0, max=2, step=0.1, label="Temperature") }}
    {{ param_field("model", value=none, default="gpt-4o", widget="select",
                   choices=models, label="Model",
                   locked=true, locked_reason="Set by your workspace admin") }}
{% end %}

{% from "chirpui/params_table.html" import params_table %}

{{ params_table(rows=params, title="Parameters") }}
{{ params_table(rows=params, title="Returns", columns=["name", "type", "description"]) }}

{% from "chirpui/particle_bg.html" import particle_bg %}

{% call particle_bg() %}
    <h1>Hero with particles</h1>
{% end %}

{% call particle_bg(count=12, variant="accent") %}
    <p>More particles, accent color</p>
{% end %}

{% from "chirpui/placeholder_inline.html" import placeholder_inline %}

{{ placeholder_inline() }}

{% from "chirpui/playlist.html" import playlist, playlist_item %}

{% call playlist(title="Up next") %}
    {% call playlist_item(href="/watch/1", title="Video 1", duration="4:32", active=true) %}{% end %}
    {% end %}
    {% call playlist_item(href="/watch/2", title="Video 2", duration="8:15") %}{% end %}
    {% end %}
{% end %}

{% from "chirpui/playlist.html" import playlist, playlist_item %}

{% call playlist(title="Up next") %}
    {% call playlist_item(href="/watch/1", title="Video 1", duration="4:32", active=true) %}{% end %}
    {% end %}
    {% call playlist_item(href="/watch/2", title="Video 2", duration="8:15") %}{% end %}
    {% end %}
{% end %}

{% from "chirpui/popover.html" import popover %}

{% call popover(trigger_label="Filters") %}
    {% slot header %}<h3>Filters</h3>{% end %}
    <form>...</form>
    {% slot footer %}<button>Apply</button>{% end %}
{% end %}

{% from "chirpui/post_card.html" import post_card %}

    {% call post_card(name="Alice", handle="@alice", time="2h ago") %}
        {% slot avatar %}avatar(src="...", alt="Alice", size="md"){% end %}
        {% slot media %}<img src="sunset.jpg" alt="Sunset">{% end %}
        {% slot actions %}action_bar_item(icon="up", label="Vote up", count=42){% end %}
        <p>Check out this amazing sunset! 🌅</p>
    {% end %}

Legacy: post_card_header, post_card_body, post_card_media, post_card_actions
still available for backward compatibility.

{% from "chirpui/primary_nav.html" import primary_nav %}

{{ primary_nav() }}

{% from "chirpui/profile_header.html" import profile_header, profile_header_avatar, ... %}

    {% call profile_header(name="Alice", cover_url="/cover.jpg", use_slots=true) %}
        {% slot avatar %}avatar(initials="AC", alt="Alice", size="lg"){% end %}
        {% slot bio %}<p class="chirpui-profile-header__bio">Developer & designer</p>{% end %}
        {% slot stats %}stat(value="1.2K", label="Followers") stat(value="42", label="Following"){% end %}
        {% slot actions %}btn("Follow", variant="primary"){% end %}
    {% end %}

Legacy (default): profile_header_avatar, profile_header_info, profile_header_stats, profile_header_action

{% from "chirpui/progress.html" import progress %}

{{ progress() }}

{% from "chirpui/progress.html" import progress_bar %}

{{ progress_bar(value=60, max=100) }}
{{ progress_bar(value=75, max=100, color="#78c850") }}

{% from "chirpui/prose.html" import prose %}

{{ prose() }}

{% from "chirpui/prose_lg.html" import prose_lg %}

{{ prose_lg() }}

{% from "chirpui/prose_sm.html" import prose_sm %}

{{ prose_sm() }}

{% from "chirpui/pulsing_button.html" import pulsing_button %}

{{ pulsing_button("Try Now") }}
{{ pulsing_button("Go Live", icon="◎", href="/live") }}

{% from "chirpui/reaction_pill.html" import reaction_pill, message_reactions %}

{% call message_reactions() %}
    {{ reaction_pill(emoji="👍", count=3) }}
    {{ reaction_pill(emoji="❤", count=1) }}
{% end %}

{% from "chirpui/reasoning.html" import reasoning_block, tool_call_card %}
{% call reasoning_block(label_pending="Thinking…", label_done="Thought for 4s", done=true) %}
    <p>First I checked the schema…</p>
{% end %}
{{ tool_call_card("search_docs", status="done",
                  args=[{"term": "query", "detail": "css scope"}],
                  result="3 matches", files=["docs/CSS.md"]) }}

{% from "chirpui/rendered_content.html" import rendered_content %}

{% call rendered_content() %}
  Content
{% end %}

{% from "chirpui/resource_card.html" import resource_card %}

{{ resource_card() }}

{% from "chirpui/resource_index.html" import resource_index %}

{% call resource_index() %}
  Content
{% end %}

{% from "chirpui/workspace_primitives.html" import result_card %}

{% call result_card() %}
  Content
{% end %}

{% from "chirpui/workspace_primitives.html" import result_collection %}

{% call result_collection() %}
  Content
{% end %}

{% from "chirpui/result_slot.html" import result_slot %}

{{ result_slot() }}

{% from "chirpui/reveal_on_scroll.html" import reveal_on_scroll %}

    {% call reveal_on_scroll() %}
        <p>This content animates in when you scroll it into view.</p>
    {% end %}

See https://alpinejs.dev/plugins/intersect

{% from "chirpui/ripple_button.html" import ripple_button %}

{{ ripple_button("Click Me") }}
{{ ripple_button("Save", variant="primary") }}

{% from "chirpui/route_tabs.html" import render_route_tabs %}

{{ render_route_tabs() }}

{% from "chirpui/route_tabs.html" import route_tabs %}

{{ route_tabs() }}

{% from "chirpui/row_actions.html" import row_actions %}

{{ row_actions(items=[ }}
    {"label": "Edit", "href": "/items/1/edit"},
    {"label": "Duplicate", "action": "duplicate"},
    {"divider": true},
    {"label": "Delete", "href": "/items/1/delete", "variant": "danger", "icon": "✕"}
], id="row-1-actions")

{% from "chirpui/rubber_band.html" import rubber_band %}

{{ rubber_band() }}

{% from "chirpui/rune_field.html" import rune_field %}

{% call rune_field() %}
    <h1>Mystical content</h1>
{% end %}

{% call rune_field(variant="arcane") %}
    <p>Arcane styled runes</p>
{% end %}

{% from "chirpui/saved_view_strip.html" import saved_view_strip %}

{% call saved_view_strip() %}
  Content
{% end %}

{% from "chirpui/scanline.html" import scanline %}

{% call scanline() %}
    <p>Retro terminal text</p>
{% end %}

{% call scanline(variant="crt") %}
    <div>Full CRT feel with rounded corners and vignette</div>
{% end %}

{% from "chirpui/param_override.html" import param_field, advanced_params, scope_indicator %}

{% call advanced_params() %}
    {{ param_field("temperature", value=0.9, default=0.7, widget="range",
                   min=0, max=2, step=0.1, label="Temperature") }}
    {{ param_field("model", value=none, default="gpt-4o", widget="select",
                   choices=models, label="Model",
                   locked=true, locked_reason="Set by your workspace admin") }}
{% end %}

{% from "chirpui/scope_switcher.html" import scope_switcher %}

{{ scope_switcher() }}

{% from "chirpui/scroll_area.html" import scroll_area %}

{% call scroll_area(max_block_size="18rem") %}
    ...
{% end %}

{% from "chirpui/scroll_x.html" import scroll_x %}

{{ scroll_x() }}

{% from "chirpui/forms.html" import search_bar %}

{{ search_bar() }}

{% from "chirpui/search_header.html" import search_header %}

{{ search_header() }}

{% from "chirpui/layout.html" import section_collapsible %}

{% call section_collapsible() %}
  Content
{% end %}

{% from "chirpui/layout.html" import section_header %}

{% call section_header("actions") %}
  Content
{% end %}

{% from "chirpui/segmented_control.html" import segmented_control %}

{{ segmented_control(items=[ }}
    {"label": "Grid", "value": "grid", "active": true},
    {"label": "List", "value": "list"},
    {"label": "Table", "value": "table"},
], name="view_mode")

{{ segmented_control(items=[ }}
    {"label": "Day", "value": "day", "icon": "◎"},
    {"label": "Week", "value": "week"},
    {"label": "Month", "value": "month"},
], name="range", size="sm")

{% from "chirpui/selection_bar.html" import selection_bar %}

    {% call selection_bar(count=3) %}
        <a class="chirpui-btn chirpui-btn--sm chirpui-btn--secondary">Export selected</a>
        <a class="chirpui-btn chirpui-btn--sm chirpui-btn--secondary">Clear</a>
    {% end %}

Controlled mode (controlled=true): the bar is always in the DOM (no server
count>0 gate) and uses Alpine `x-show`/`x-text` hooks so an enclosing
`chirpuiGridSelection` scope can show/hide it and update the count with zero
server roundtrip. Used by data_grid. Default `controlled=false` is
byte-identical to the historical server-gated render.

{% from "chirpui/separator.html" import separator %}

{{ separator() }}
{{ separator(orientation="vertical", decorative=false) }}

{% from "chirpui/settings_row.html" import settings_row_list, settings_row %}

    {% call settings_row_list() %}
        {{ settings_row("Cursor IDE", status="Configured", detail="dori setup cursor") }}
        {{ settings_row("Skills directory", status="ok", detail="/path/to/skills") }}
    {% end %}

List modifiers: hoverable=true, divided=true, relaxed=true

{% from "chirpui/settings_row.html" import settings_row_list, settings_row %}

    {% call settings_row_list() %}
        {{ settings_row("Cursor IDE", status="Configured", detail="dori setup cursor") }}
        {{ settings_row("Skills directory", status="ok", detail="/path/to/skills") }}
    {% end %}

List modifiers: hoverable=true, divided=true, relaxed=true

{% from "chirpui/shell_action_form.html" import shell_action_form %}

{{ shell_action_form() }}

{% from "chirpui/shell_actions.html" import shell_actions_bar %}
    {{ shell_actions_bar(shell_actions) }}

kind="form" — POST form with optional HTMX (set hx_post, hx_target, … on ShellAction).
CSRF: {{ csrf_field() }} when include_csrf is true (Chirp provides csrf_field in globals).

id_suffix="" — append a per-instance suffix (e.g. "-drawer") to namespace the
overflow dropdown id and each menu action id when rendering the bar in two
{{ regions (e.g. a topbar copy plus a mobile drawer copy). Default "" preserves }}
the canonical ids, keeping every single-instance render byte-identical.
Threaded by shell_actions_bar into shell_action.

{% from "chirpui/shell_section.html" import shell_section %}

{{ shell_section() }}

{% from "chirpui/shimmer_button.html" import shimmer_button %}

{{ shimmer_button("Get Started") }}
{{ shimmer_button("Subscribe", variant="primary", size="lg") }}
{{ shimmer_button("Learn More", href="/docs", icon="→") }}

{% from "chirpui/shortcuts_help.html" import shortcuts_help, shortcuts_help_trigger %}
{{ shortcuts_help_trigger() }}
{{ shortcuts_help() }}

{% from "chirpui/sidebar.html" import sidebar, sidebar_link, sidebar_section, %}
shell_brand_link, shell_boosted_link

{% call sidebar() %}
    {% slot header %}<div class="chirpui-sidebar__brand">My App</div>{% end %}
    {% call sidebar_section("Main") %}
        {{ sidebar_link("/", "Home", match="exact") }}
        {{ sidebar_link("/dashboard", "Dashboard", match="prefix") }}
        {{ sidebar_link("/admin", "Admin", active=is_admin) }}
    {% end %}
    {% slot footer %}<span>v1.0</span>{% end %}
{% end %}

{% from "chirpui/sidebar.html" import sidebar, sidebar_link, sidebar_section, %}
shell_brand_link, shell_boosted_link

{% call sidebar() %}
    {% slot header %}<div class="chirpui-sidebar__brand">My App</div>{% end %}
    {% call sidebar_section("Main") %}
        {{ sidebar_link("/", "Home", match="exact") }}
        {{ sidebar_link("/dashboard", "Dashboard", match="prefix") }}
        {{ sidebar_link("/admin", "Admin", active=is_admin) }}
    {% end %}
    {% slot footer %}<span>v1.0</span>{% end %}
{% end %}

{% from "chirpui/signature.html" import signature %}

{{ signature(text="def foo(x: int, y: str = '') -> bool:", language="python") }}
{{ signature(text="GET /api/users") }}

{% from "chirpui/site_footer.html" import site_footer, footer_column, footer_link %}

{% call site_footer(layout="columns") %}
    {% slot brand %}
        <a href="/">Logo</a>
        <p>Tagline text.</p>
    {% end %}
    {% call footer_column(title="Product") %}
        {{ footer_link("/docs", "Docs") }}
        {{ footer_link("/pricing", "Pricing") }}
    {% end %}
    {% call footer_column(title="Company") %}
        {{ footer_link("/about", "About") }}
        {{ footer_link("https://github.com/...", "GitHub", external=true) }}
    {% end %}
    {% slot rule %}<span>•</span>{% end %}
    {% slot colophon %}© 2026 My Company{% end %}
{% end %}

{% from "chirpui/site_header.html" import site_header, site_nav_link %}

{% call site_header(brand_url="/", layout="start", variant="glass") %}
    {% slot brand %}<img src="/logo.svg" alt="Logo">{% end %}
    {% slot nav %}
        {{ site_nav_link("/docs", "Docs", glyph="#", match="prefix") }}
        {{ site_nav_link("/about", "About", match="exact") }}
    {% end %}
    {% slot tools %}theme_toggle(){% end %}
{% end %}

{% call site_header(layout="center-brand", variant="solid") %}
    {% slot nav %}left links{% end %}
    {% slot brand %}LOGO{% end %}
    {% slot nav_end %}right links{% end %}
    {% slot tools %}CTA button{% end %}
{% end %}

{% from "chirpui/site_header.html" import site_header, site_nav_link %}

{% call site_header(brand_url="/", layout="start", variant="glass") %}
    {% slot brand %}<img src="/logo.svg" alt="Logo">{% end %}
    {% slot nav %}
        {{ site_nav_link("/docs", "Docs", glyph="#", match="prefix") }}
        {{ site_nav_link("/about", "About", match="exact") }}
    {% end %}
    {% slot tools %}theme_toggle(){% end %}
{% end %}

{% call site_header(layout="center-brand", variant="solid") %}
    {% slot nav %}left links{% end %}
    {% slot brand %}LOGO{% end %}
    {% slot nav_end %}right links{% end %}
    {% slot tools %}CTA button{% end %}
{% end %}

{% from "chirpui/site_shell.html" import site_shell %}

{% call site_shell(ambient=true) %}
    {% slot header %}site_header(...){% end %}
    Page content here
    {% slot footer %}site_footer(...){% end %}
{% end %}

{% from "chirpui/skeleton.html" import skeleton %}

{{ skeleton() }}
{{ skeleton(width="200px", height="2rem") }}
{{ skeleton(variant="avatar") }}
{{ skeleton(variant="text", lines=3) }}
{{ skeleton(variant="card") }}

{% from "chirpui/slider.html" import slider %}

{{ slider("volume", value=40, min=0, max=100, label="Volume", show_value=true) }}

{% from "chirpui/sortable_list.html" import sortable_list, sortable_item %}

{% call sortable_list() %}
  for step in steps
    {% call sortable_item() %}
      ...
    {% end %}
  {% end %}
{% end %}

{% from "chirpui/citations.html" import citation_chip, sources_summary, citation_modal %}
{{ citation_chip(index=1, title="Scope spec", href="https://x.test/doc",
                 source_id="src-1") }}
{{ sources_summary(sources=[{"id": "src-1", "title": "Scope spec",
                             "href": "https://x.test/doc", "relevance": "high"}]) }}

{% from "chirpui/sparkle.html" import sparkle %}

{% call sparkle() %}
    <button>✨ Magic Button</button>
{% end %}

{% call sparkle(variant="gold", count=4) %}
    <h2>Golden text</h2>
{% end %}

{% from "chirpui/spinner.html" import spinner, spinner_thinking %}

{{ spinner()  # Mote pulse animation }}
{{ spinner(size="sm")  # Small size }}
{{ spinner(size="lg")  # Large size }}

{{ spinner_thinking()  # Spiral rotation animation }}

{% from "chirpui/spinner_thinking.html" import spinner_thinking %}

{{ spinner_thinking() }}