Live, owner-facing previews of every pattern in the catalog — the Class A diagram family, the Class B artifact templates, and the surface-shell page pattern this gallery itself consumes.

owner preview >> do not vendor

Class A // diagram patterns
Class A // static

diagram-static-H

Horizontal cascade tree: a root fans right into sections, then nodes // group boxes + held + legacy states.

Class A // static

diagram-static-V

Vertical centered spine: a top-anchored trunk drops through centered stages // for linear top-down structure.

Class A // static

diagram-static-SEQ

Sequence / stepped chain: an ordered left-to-right progression of stages with per-step notes.

Class A // static

diagram-static-FLOW

Convergence flow: fields converge into a resolved slot, realization reconverges into conformance. Both previews render the same full-chrome shell off one source model // static is topology-only, interactive adds node inspection + pinning.

static (full chrome, topology only) //
interactive (full chrome + node inspection) //
Class A // interactive

diagram-interactive-spine

Interactive IA state spine: a pan/zoom spine whose nodes carry an inspector + Spectral State color // color encodes state only.

Class B // project-output artifacts
Class B // document

output-artifact

The Class B output-artifact document template: title + metadata + weighted sections + provenance footer // line-intensity typographic system.

Class B // sealed interactive archive

message-archive

One sealed, self-contained archive per merged conversation timeline: two-party and group bubble modes, four explicit attachment states, offline search + year jump. Participant color encodes identity, never state. Both previews render the SAME canonical template off one source // they differ only in the pattern-local role values.

default-ASK (the ASK-preferred visual default) //
AA-compliant (accessibility-tuned roles + chrome) //
Surface patterns
Surface // page shell

surface-shell

Shared page shell for a family of public surfaces: an identity-mark slot, surface identity, lede, an optional status badge, an optional control slot, the rule that closes the header, and the flush-right footer that closes the page. Header left, footer right — the reading path opens and closes where the eye does. It owns the chrome around the payload and never the payload. It inherits Tier 1 + Tier 2 but hard-codes no consumer's Tier 3, so a consumer fills the slot with its own mark. This gallery, the repo root, and the style guide all consume it — the preview is its Tier-3-neutral specimen. Not Class A and not Class B.

Live previews follow system light/dark appearance // append #light or #dark to any preview URL for a fixed-theme check.

Previews under _preview/ are generated by tools/gen-pattern-previews.mjs from the canonical shells // re-run it + git diff --exit-code patterns/_preview/ to confirm no drift. Each preview opens from this gallery or directly via file:// from a clean clone — no server, and no local _dsa-tokens mirror: source, helper, engine, styles, and exporter all resolve from the canonical pattern bundle, with DS-root tokens and fonts. This gallery holds two independent relationships, and they carry different maintenance verbs.

This live page consumes the canonical assets it references — surface-shell.css for its own chrome, colors_and_type.css, and the wordmark pairings — by direct same-repo reference, and is hand-maintained. It is never regenerated: when an owner contract changes, verify this page's rendering, landmarks, interaction, and behavior.

The generated preview set under _preview/ is what this gallery catalogs. It is regenerated from the canonical pattern sources — re-run the generator, then pass --check, generated-set parity, and visual verification whenever an adopted pattern changes.

Both are first-party same-repo consumption: no copied bundle, no downstream vendor obligation.