Data & collections

Collection-heavy templates: KanbanPage (drag-and-drop board), CalendarPage (month/week/agenda), DocumentPage (a viewer with a facts aside) and MapPage (a full-bleed map with an optional results rail) composed into whole-page recipes.

Kanban and Calendar are client recipes (they own board / view state); Document and Map are server-safe shells that keep the heavy pdf.js / maplibre islands in caller-passed slots.

KanbanPage

A drag-and-drop board page: columns of cards over the ReportLayout, with optimistic move handling and per-column counts/footers.

Adoption Pipeline

Inbox

2

Maria Rivera
high
Luna · Beagle mix
· due Jun 30
Daniel Okafor
low
Biscuit · Hound
· due Jul 3

Vetting

1

Grace Chen
med
Maple · Lab mix
· due Jun 29

Foster

2

Elena Novak
home visit
Scout · Beagle
· since Jun 12
Theo Banks
med
Juniper · Terrier
· since Jun 18

Adopted

1

Carmen Flores
closed
Pepper · Beagle mix
· Jun 21

<KanbanPage> — TitleBar + "New application" action · region Select toolbar · controlled KanbanBoard with per-column counts · drag within / across columns (mouse · touch · keyboard)

columns (required): Columns → cards, forwarded to the controlled <KanbanBoard>.
onMove / resetSignal: onMove fires when a card settles in a new home (persist / mirror back into columns); bump resetSignal to snap the optimistic order back on a rejected move.
showCounts / columnFooter / renderCard: Per-column count Badge, per-column footer slot, and a card render override. Client recipe — it owns the board's drag state.

CalendarPage

A scheduling page: the STD <Calendar> over the ReportLayout with month / week / agenda views and event selection.

Events

June 2026

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

<CalendarPage> — TitleBar + "Add event" action · event-type Select toolbar (page filter) · uncontrolled Calendar owning month / week / day / agenda via its own toolbar · onSelectEvent peek below the frame

events (required): The full event set forwarded to <Calendar> (each view filters its own window).
view / cursor: defaultView (uncontrolled, default 'month'), or drive externally with controlled view + onViewChange / cursor + onCursorChange.
onSelectEvent: Fires on event click / Enter in any view. Client recipe — it owns view + cursor state.

DocumentPage

A document reader page: a full-height viewer with a metadata/facts aside and a provenance footer, over the DocumentLayout.

Vet Record — Bella

Provenance: uploaded via the foster portal on Jun 24, 2026 · SHA-256 a3f1…9c0e · last verified by Dr. Lena Ortiz, DVM.

<DocumentPage> — SSR-safe pdf.js viewer slot · facts DefGrid aside · provenance footer

viewer (required): The document viewer / preview slot — caller-built, e.g. a next/dynamic({ ssr: false }) <DocumentViewer src workerSrc /> island. → DocumentLayout viewer.
aside / asideWidth: Metadata / facts rail (a DefGrid / MetadataPanel of provenance); asideWidth default 320px.
footer: Provenance / closing actions. Server-safe shell; the pdf.js island rides the viewer slot.

MapPage

A geospatial page: a full-bleed map with an optional results/filters rail and toolbar, over the server-safe ListDetailLayout.

Coverage

<MapPage> with a rail — server recipe composing <ListDetailLayout> (detail = map, list = rail) · the maplibre <MapView> / <MapMarkers> client island rides the `map` slot, so the recipe stays server-safe · location-search Input + clickable results in the rail · rail collapses below the map on narrow screens

Service area

<MapPage> full-bleed (no `list`) — a bare full-height shell: RecipeHeader + a search `toolbar` + the full-bleed map, with no empty list pane · same client MapView island in the `map` slot

map (required): The full-bleed map — a caller-passed client island (<MapView height='100%'><MapMarkers /></MapView>). Keeps maplibre / WebGL OUT of this server recipe.
list / listWidth / listEnd: Optional results/filters rail beside the map (→ ListDetailLayout.list, default 360px; listEnd moves it trailing). Omit for a full-bleed map.
toolbar / footer: Optional toolbar above and footer below the map. Server-safe shell.