"""Blueprints — full-page layout motifs, the shadcn-Blocks analogue. Where a Hyperpart is one component + its contracts, a **Blueprint** is a whole page composed ONLY of published Hyperparts and Layout primitives — the thing you copy when you're starting a page, not a widget. Each renders to its own gallery sub-page (`blueprints/.html`); the page IS the snippet (a view-source disclosure shows the same string), so the docs can't drift from the demo. Layout responsiveness is intrinsic (the L1 primitives wrap on their own minimums, no media queries), which is what makes a Blueprint testable at any viewport — see tests/test_blueprints.py. """ from __future__ import annotations from dataclasses import dataclass, field @dataclass(frozen=True) class Blueprint: id: str title: str blurb: str partial: str # the full page BODY — rendered live AND shown as the snippet composes: tuple[str, ...] = field(default_factory=tuple) # Hyperpart ids used notes: str = "" BLUEPRINTS: list[Blueprint] = [ Blueprint( "workspace-drawer", "Workspace with drawer", "The app-shell motif: a sidebar of navigation, a content pane with a " "header cluster and a KPI grid, and a detail drawer on the native " ". The sidebar wraps under the content on narrow screens — " "no media query anywhere on this page.", # ── the page body (dz- source; the build reprefixes) ── '
' # side: navigation '" # content '
' '
' "

Dashboard

" '
' '' '' "
" '
' '
' '
Outstanding
' '
£12,450
' '
{svg:trending-up} +4.2% this week
' '
' '
Paid this month
' '
£48,900
' '
{svg:trending-up} +12.5%
' '
' '
Overdue
' '
3
' '
{svg:triangle-alert} needs attention
' "
" '
' "

Body copy sits in a centred reading measure inside the content " "pane — the same primitives compose at page scale and inside a card. " "Resize the window: the sidebar wraps under the content when the pane " "would get too narrow, and the KPI grid packs from three columns to " "one, with no breakpoints defined anywhere.

" "
" "
" "
" # the drawer: native , opened by the header button '' '
' '
' '

New invoice

' '
" '

A form would live here — the drawer ' "is the dialog Hyperpart unchanged: platform focus trap, Esc and " "backdrop close for free.

" '
' '' '' "
", composes=( "sidebar-layout", "stack", "cluster", "auto-grid", "center", "card", "button", "dialog", ), notes="Every class on this page is a published Hyperpart or Layout " "primitive — there is no page-specific CSS. The responsive behaviour " "is owned by the layout primitives (the sidebar's " "--dz-sidebar-content-min and the grid's " "--dz-grid-min), so the same composition works inside a " "narrower container without edits.", ), Blueprint( "master-detail", "Master–detail page", "The triage motif at page scale: a persistent record list beside a " "reading-measure detail pane. Selection is a hypermedia exchange — " "the item hx-gets its card into the pane; the composite wraps in a " "sidebar layout so the list docks beside the detail on wide screens " "and stacks above it on narrow ones.", '
' '
' '" '
' '
INV-001 · Acme
' '
£1,250.00
' '
Paid · 2 days ago
' '
' '
' "

Invoice INV-001

" "

The reading pane holds whatever the selected record needs — notes, " "an activity feed, a form. It keeps a comfortable measure regardless of " "how wide the screen gets, and drops below the list on a phone.

" '
' '' '{svg:circle-check}Paid' 'Net 30' "
" "
", composes=("sidebar-layout", "master-detail", "center", "stack", "cluster", "badge", "card"), notes="The master–detail composite is unchanged from its Hyperpart — " "the Blueprint only places it: the sidebar layout gives the LIST the " "fixed-ish pane and the reading measure caps the detail column. Two " "selections' worth of state live on the server; the page holds none.", ), Blueprint( "dashboard", "Dashboard", "KPI tiles in a packing grid, a capacity list with progress bars, and " "a status cluster — the at-a-glance motif. Column count is entirely " "intrinsic: the grid packs whatever fits above its minimum tile width.", '
' '
' "

Operations

" '' '{svg:circle-check}All systems normal' "
" '
' '
Requests
' '
1.2M
' '
{svg:trending-up} +8% today
' '
P95 latency
' '
184ms
' '
{svg:trending-up} within budget
' '
Error rate
' '
0.02%
' '
{svg:circle-check} nominal
' '
Queue depth
' '
37
' '
{svg:triangle-alert} draining
' "
" '
' "

Capacity

" '
' '
' '
' '
' "
", composes=("stack", "cluster", "auto-grid", "card", "badge", "progress"), notes="The KPI grid's --dz-grid-min is the only tuning " "knob on the page. The progress bars demonstrate the public " "custom-property knob (--dz-progress-value) at page " "scale — inline per-record values, CSS owns the mapping.", ), Blueprint( "auth", "Auth page", "The centred single-card motif: a sign-in form in a reading measure, " "vertically composed with the stack. The same card works for sign-up, " "reset, and 2FA steps.", '
' '
' "

Sign in

" '
' '
' '
' '' '' "
" '
' '' '' '

At least 12 characters.

' "
" '
' '' 'Forgot password?' "
" "
", composes=("center", "stack", "cluster", "card", "field", "button"), notes="The card is the only surface; the page owns no chrome. The " "form reuses the dz-form-* field triad (label / input / " "hint) — error states key off aria-invalid exactly as " "the field Hyperpart documents.", ), Blueprint( "saas-shell", "SaaS app shell", "The modern SaaS/admin frame: persistent left navigation, a sticky " "top bar with the collapse toggle, and a ROUTED main workspace — nav " "links swap only the main slot, so the shell, sidebar state, and " "scroll survive every navigation. Collapse persists via a cookie the " "server reads, so first paint is always correct.", '
' '" '
' '
' '
' '
' '' "
" '
Acme Ops
' '
' '' "
" '
' '

Dashboard

' '
' '
Outstanding
' '
£12,450
' '
Paid
' '
£48,900
' "
", composes=("app-shell", "stack", "auto-grid", "card", "button"), notes="Routing is one attribute per link: hx-get the page " "fragment, hx-target="#main-content" — the " "server returns only the workspace body, and everything else (shell, " "sidebar collapse state, focus, scroll) persists. In Dazzle this is " "the workspace pattern: every example app's views render inside this " "shell. The collapse toggle writes the dz_sidebar cookie " "so the SERVER renders data-dz-sidebar correctly on the " "next full page load — state-in-DOM at SSR, no client hydration flash.", ), Blueprint( "record-page", "Record full page", "The owned-URL home for a record after a drawer peek. Same asset as the " "drawer hypermedia peek (Aurora Substation), but a full document: KPI " "grid, tabs, activity, and primary actions — shareable, refreshable, " "Back-friendly. Peek is GET ?peek=1 fragment; this page is GET /records/{id}.", '
' '

' '← Gallery · Drawer' " · full page (not a widened drawer)

" '
' "
" '
Asset
' '

Aurora Substation

' "
" '
' '' '{svg:circle-check}Online' '" '" "
" '
' '
' '
Region
' '
North
' '
Grid cluster A
' '
' '
Load
' '
82%
' '
{svg:trending-up} +4% today
' '
' '
Open WOs
' '
2
' '
{svg:triangle-alert} needs dispatch
' '
' '
Commissioned
' '
2019
' '
Last inspection 14 June
' "
" # Honest selection strip (tabs Hyperpart): buttons + aria-current — # NOT role=tablist without roving tabindex (selection-strip-honest). '
' '
' '' '' '' "
" '
' '
' '" '
' '
Primary contact
' "
Maya Reyes · Operations
" '
Feeder
' "
N-GRID-14 · 33 kV
" "
" '" '" "
" "
", composes=( "stack", "cluster", "auto-grid", "card", "badge", "button", "alert", "tabs", ), notes="Paired with the Drawer hypermedia peek: the drawer " "loads GET …?peek=1 into drawer__body; this " "Blueprint is the owned document for the same record. " "Open full page is navigation (a real href), " "not a CSS maximize of the dialog. Expand/Restore is a separate job " "(data-dz-drawer-expand toggles resting width ↔ " "xl) — do not label it “full page.” " "See stems/host-chrome-symmetry.md › Peek vs full page.", ), # ── Story-driven ops motifs (docs/guides/story-to-composition.md) ── Blueprint( "ops-queue", "Ops work queue", "The agent job page: KPI pressure strip, a dual-lock review queue with " "attention rows and inline actions, plus a mutation toast — not a CRUD " "table of every entity. Mirrors support_tickets ticket_queue.", '
' '
' "
" '
Workspace
' '

Ticket queue

' "
" '
' '' '{svg:triangle-alert}3 critical' '' "
" '
' '
' '
Open
' '
18
' '
' '
In progress
' '
7
' '
' '
Critical
' '
3
' "
" '
' '
' '
' '
' 'Billing charge failed — Acme' 'critical
' '

SLA breaches at 16:00 — assign now.

' 'opened 2h ago
' '
' '" '' "
" '
' '
' '
' 'SSO login loop — Globex' 'high
' 'opened 5h ago
' '
' '" '" "
" '
' '
' '
' 'Export CSV empty — Initech' 'medium
' 'opened yesterday
' '
' '" "
" "
" # Mutation feedback — page-chrome toast (decision 0011), not client state. '
' '
' '
' '
Ticket claimed
' '
Billing charge failed — Acme is yours.
' '
' '
" "
" '' '
' '
' '

Billing charge failed

' '
" '
' "

Peek fragment — enough to claim or escalate without leaving the queue. " "Full record is a separate owned URL.

" '
' '' '
", composes=( "stack", "cluster", "metrics", "queue", "badge", "button", "toast", "dialog", ), notes="Job page, not entity admin: metrics answer “how bad?”, queue rows " "answer “what next?”, toast answers “what just happened?”. Dual-lock " "roots: data-dz-metric-key, data-dz-queue-row, " "data-dz-toast-level. Dazzle expression: " "display: metrics + display: queue on " "ticket_queue.", ), Blueprint( "triage-drawer", "Triage with drawer", "Master list as a work queue beside a detail drawer: select a row, " "hx-get a peek fragment into the dialog body, keep the queue mounted. " "Full page remains a real navigation target.", '
' '
' '
' '

Triage

' '12 open
' '
' '
' '
' 'INV-441 · Acme overdue
' 'due today
' '
' '
' '
' '
' 'INV-390 · Globex dispute
' '

Customer waiting 3 days.

' '
' '
' '
' '
' 'INV-512 · Initech credit
' 'due Fri
' '
' "
" '
' '

Reading pane

' '

On wide screens the queue docks; ' "on a phone it stacks. The drawer is the hypermedia peek — same fragment " "contract as the record page, different chrome.

" '
' '
Hint
' "
Open a row to load the triage drawer. Prefer peek for decide-now; " "navigate to the full record for history and edit.
" "
" '' '
' '
' '

INV-441 · Acme

' '
" '
' '
' '
' 'overdue' 'Net 30
' "

£1,250.00 · last contact 2 days ago. Approve write-off or send " "reminder without losing the queue context.

" '
' '{svg:info}' '
' '
Peek, not full page
' '
' "Esc / backdrop close; full record is a real link below." "
" '
' '' "Open full page" '" "
", composes=( "sidebar-layout", "stack", "cluster", "queue", "badge", "button", "card", "dialog", "alert", ), notes="Compose queue + dialog; do not invent a client triage store. " "Selection is an exchange (button opens dialog; production wires " "hx-get into dialog__body). Full page is " "navigation — see record-page Blueprint and " "stems/host-chrome-symmetry.md.", ), Blueprint( "manager-sla-strip", "Manager SLA strip", "Metrics-first team home: KPI tiles, a status-list readiness strip, " "and a critical work queue — the manager job, not a personal assigned " "list. Mirrors support_tickets manager_ops.", '
' '
' "
" '
Manager
' '

Team ops

' "
" '' '{svg:circle-check}Within SLA band' "
" '
' '
' '
Open
' '
24
' '
' '
In progress
' '
11
' '
' '
Critical
' '
2
' '
' '
Resolved
' '
9
' "
" '
' '

SLA readiness

' '
    ' '
  • ' '' '
    ' '
    Ticket response SLA
    ' '
    ' "Warning 2h · breach 4h · critical 8h (business hours)
    " 'accent
    • ' '
  • ' '' '
    ' '
    Critical open
    ' '
    ' "Priority critical tickets must stay assigned
    " 'warning
    • ' '
  • ' '' '
    ' '
    Unassigned open
    ' '
    ' "Open tickets with no assignee block first response
    " 'warning
    • ' '
  • ' '' '
    ' '
    Resolved pending close
    ' '
    ' "Awaiting customer confirmation or agent close
    " 'positive
    • ' "
" '
' '

Critical queue

' '
' '
' '
' 'Production outage — North region
' '

Unassigned · breach in 40m

' '
" '
' '
' '
' 'Payment webhook storm
' 'assigned · Ada
' '
" "
", composes=("stack", "cluster", "metrics", "status-list", "queue", "badge", "button"), notes="Manager default workspace shape: metrics → readiness strip → " "focused queues. Avoid landing managers on empty “my assigned” lists " "when seed data assigns to agents (TR-52 class). Dual-lock roots: " "metric tiles, data-dz-status-entry, " "data-dz-queue-row.", ), ]