@tryvitris/website-harness 0.0.0-stage → 0.1.0-beta.5

package/bin/vitris-verify-performance.js

@@ -0,0 +1,44 @@
+#!/usr/bin/env node
+import {
+  measurePerformance
+} from "./chunks/chunk-IKNMBGGD.js";
+import {
+  previewServer
+} from "./chunks/chunk-WEFDVXFX.js";
+import {
+  buildVerified
+} from "./chunks/chunk-E5Y46VBX.js";
+import "./chunks/chunk-4GZCAWWK.js";
+import "./chunks/chunk-ANMJRJQ5.js";
+import "./chunks/chunk-HNORQ74T.js";
+import "./chunks/chunk-YCVGD2CG.js";
+import "./chunks/chunk-LKN75JGA.js";
+import "./chunks/chunk-YYPYYOEV.js";
+import "./chunks/chunk-GZDLXYZV.js";
+import "./chunks/chunk-T6PE4KN4.js";
+import "./chunks/chunk-7FS67SRF.js";
+
+// scripts/verify-performance.ts
+import { resolve, join } from "node:path";
+if (process.argv.includes("--help")) {
+  console.log("vitris-verify-performance --site DIR [--origin DEPLOYED_URL]\nThree fresh-profile mobile Lighthouse runs on home, representative and heaviest routes; writes build-bound reports. --origin checks an already deployed build without rebuilding.");
+} else {
+  const arg = (name) => {
+    const i = process.argv.indexOf(name);
+    return i < 0 ? void 0 : process.argv[i + 1];
+  };
+  const root = resolve(arg("--site") || "."), origin = arg("--origin");
+  if (origin && !/^https?:\/\//.test(origin)) throw new Error("--origin must be an HTTP(S) URL");
+  if (!origin) await buildVerified(root);
+  const server = origin ? void 0 : previewServer(join(root, "dist"), { compress: true });
+  if (server) await new Promise((r) => server.listen(0, "127.0.0.1", r));
+  try {
+    const report = await measurePerformance(root, origin || `http://127.0.0.1:${server.address().port}`, { remote: Boolean(origin), log: console.log });
+    if (report.failures.length) {
+      console.error(report.failures.join("\n"));
+      process.exitCode = 1;
+    }
+  } finally {
+    if (server) await new Promise((r) => server.close(() => r()));
+  }
+}

package/bin/vitris.js

@@ -0,0 +1,50 @@
+#!/usr/bin/env node
+import {
+  runCli
+} from "./chunks/chunk-B5I45LFD.js";
+import "./chunks/chunk-42IXFXUD.js";
+import "./chunks/chunk-54JC5L35.js";
+import "./chunks/chunk-VH7PM7KJ.js";
+import "./chunks/chunk-7VLBEAFW.js";
+import "./chunks/chunk-4DM5TTLG.js";
+import "./chunks/chunk-2NW7KSPA.js";
+import "./chunks/chunk-CBEJZO4L.js";
+import "./chunks/chunk-FYN4T4SV.js";
+import "./chunks/chunk-YQYHROLZ.js";
+import "./chunks/chunk-34H54KEY.js";
+import "./chunks/chunk-JCRGE6AL.js";
+import "./chunks/chunk-XL2DRAYI.js";
+import "./chunks/chunk-Z2UNY47A.js";
+import "./chunks/chunk-XGTHGWPW.js";
+import "./chunks/chunk-3CTBXY5K.js";
+import "./chunks/chunk-DSS2U2OM.js";
+import "./chunks/chunk-M4LNHYYR.js";
+import "./chunks/chunk-DRJQ4OOU.js";
+import "./chunks/chunk-PRLL7B63.js";
+import "./chunks/chunk-5OOPJNGN.js";
+import "./chunks/chunk-BBV7PMFC.js";
+import "./chunks/chunk-TY33XMHW.js";
+import "./chunks/chunk-R7YELY3C.js";
+import "./chunks/chunk-BIEDSEL2.js";
+import "./chunks/chunk-T7DGRVTP.js";
+import "./chunks/chunk-AUO5I56E.js";
+import "./chunks/chunk-6H3T46F5.js";
+import "./chunks/chunk-M2ETYSVJ.js";
+import "./chunks/chunk-FOXUQXTV.js";
+import "./chunks/chunk-IKNMBGGD.js";
+import "./chunks/chunk-WEFDVXFX.js";
+import "./chunks/chunk-E5Y46VBX.js";
+import "./chunks/chunk-4GZCAWWK.js";
+import "./chunks/chunk-ANMJRJQ5.js";
+import "./chunks/chunk-HNORQ74T.js";
+import "./chunks/chunk-YCVGD2CG.js";
+import "./chunks/chunk-LKN75JGA.js";
+import "./chunks/chunk-YYPYYOEV.js";
+import "./chunks/chunk-GZDLXYZV.js";
+import "./chunks/chunk-G7MNMULR.js";
+import "./chunks/chunk-T6PE4KN4.js";
+import "./chunks/chunk-7FS67SRF.js";
+
+// bin/vitris.ts
+var exitCode = await runCli(process.argv.slice(2));
+process.exit(exitCode);

package/blocks/CONVENTIONS.md

@@ -0,0 +1,121 @@
+# Block conventions
+
+Original vanilla blocks for Vitris agents. Inspired by modern small-business templates (Apex / Munch / Verdict visual language) — not a port of any paid library.
+
+## How agents use blocks
+
+These conventions govern library maintenance and optional block reuse. In `composition-v1`, a site author may consult an eligible block after describing the content relationship; the gallery and shortlist are not mandatory authoring steps. The procedure below applies to block selection and `blocks-v0` authoring.
+
+1. Open [`INDEX.md`](INDEX.md) and pick by **role** (hero, feature, faq, …) and **register** (trade / beauty / b2b / food / professional).
+2. Open the block's `README.md`. The **Slots** table lists every slot and whether it is optional; the **Example** is a complete, working authoring snippet — copy it, then swap copy and media.
+3. Copy `blocks/<category>/<name>/` into the site as `components/<your-kebab-name>/`. Rename the root class if you rename the folder (`c-<folder>`).
+4. Compose pages with authoring tags + optional `variant="…"`.
+
+Sites own their components. Blocks are copy sources in the kernel package (`node_modules/@vitris/kernel/blocks/`).
+
+`blocks/` is the source of truth. `scripts/generate-blocks.ts` only produced the first draft and refuses to overwrite the library without `--force`. After editing a README, regenerate the index with `node --experimental-strip-types scripts/write-blocks-index.ts`.
+
+## Previewing blocks
+
+From the kernel repo: `npm run blocks:serve` renders every block's README example (once per variant) into `dist/blocks/` and serves it at `http://127.0.0.1:4173/` (default theme, placeholder media, islands live). `npm run blocks:preview` only writes the files.
+
+From an installed package, run `vitris-blocks --out <output-directory>` (or `vitris-blocks --serve --out <output-directory>`). This is a compiled JavaScript bin; Node does not strip TypeScript under `node_modules`. The gallery marks image evidence current, stale, or unavailable, and supports job/role/media/geometry filters plus two-block comparison.
+
+Because the preview renders the README example, the example _is_ the visual spec. Keep it realistic: 3–4 cards, real-length copy, one CTA pair.
+
+## Anatomy of a block
+
+```
+blocks/<category>/<name>/
+  template.html   root `.c-<name>`; bare <slot> elements; layout classes only
+  styles.css      `.c-<name>…` rules on top of kernel primitives; tokens only
+  README.md       look line, metadata, Slots table, Example, variants
+  island.js       optional; kernel islands (`data-island="…"`) are preferred
+```
+
+### Slots carry the content classes
+
+Templates expose bare slots. Typography classes live on the slotted content so authors control emphasis without touching the template:
+
+```html
+<feature-grid-3>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Why homeowners call us first</p>
+  <h2 slot="heading">Built for Maine weather.</h2>
+  <p slot="lede" class="lede">Three things every crew member signs up for.</p>
+  <article slot="items" class="card">…</article>
+</feature-grid-3>
+```
+
+Heroes use the default slot for `<h1>` + `<p class="lede lede--lg">` + a `.btn-group`; named slots for `eyebrow`, `media`, and optional `proof`.
+
+### README contract (enforced by `src/blocks.test.ts`)
+
+- `## Slots` table: `| \`slot\` | description |`. Descriptions starting with "Optional" mark non-required slots. Every `<slot name>` in the template must appear here and vice-versa; the default slot is documented as `(default)`.
+- `## Example` fenced `html` block whose outer tag is `<name …>` and which fills every required slot.
+- The flattened example must not leave a stray `<slot>` or nest block elements inside `<p>`.
+
+## Section rhythm
+
+Four useful head patterns. Choose or adapt them to the section's job and surrounding rhythm:
+
+```html
+<!-- left-aligned (default for feature / services / process / about / team / blog) -->
+<div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div>
+
+<!-- centered (pricing / testimonial / FAQ / CTA cards / contact cards / menu / values / trust) -->
+<div class="section__head section__head--center">…</div>
+
+<!-- head + actions on one row (carousels, "All projects" links) -->
+<div class="section__head section__head--row"><div>…</div><div class="btn-group">…</div></div>
+
+<!-- editorial split: short label column left, heading + lede right (about / work / interior pages) -->
+<div class="section__head section__head--split"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div>
+```
+
+`.section__head` supplies a readable default measure and gap. Page-specific CSS may change those values where the composition needs it.
+
+Interior pages need a clear page purpose, one `h1`, and a useful opening. `hero/hero-page`, `hero/hero-service`, and `work/case-header` are starting points; a site-owned opening may fit better. Use `content/prose-split`, `content/list-split`, and `content/glossary` when their structure helps the reader. Plain semantic prose is also valid.
+
+## Spacing, borders, radii
+
+- Prefer semantic spacing tokens. `.grid`, `.split`, and `.card__body` are useful defaults; a site-owned layout may replace them. Control trailing margins so content does not create accidental gaps.
+- Border, surface, radius, and elevation follow the selected direction. `.card` variants provide available treatments, not required styling.
+- Give media explicit dimensions and a deliberate crop. `.frame` and `.ratio-*` are optional presentation helpers. A hero image that is the LCP candidate should use `fetchpriority="high"`.
+- Photo tiles with text over a scrim use `.photo-card` (`<a class="photo-card"><img><div class="photo-card__body"><h3>…</h3><p>…</p></div></a>`). The scrim and light text live in the primitive, so block CSS stays token-only.
+- Mosaics (`testimonial-mosaic`, `gallery-mosaic-split`) span tiles with `is-wide` / `is-tall` on the slotted tile. Fill every cell in the example — an empty cell reads as a bug.
+- Pill choices in forms use `<fieldset class="chips"><legend>…</legend><label><input type="radio"><span>…</span></label>…</fieldset>`; town lists and jump-navs reuse the same pill look.
+- Stats: `.stat` / `.stat__value` (`--step-4`), `.stat--sm` in bands. Prices: `.price` / `.price__amount` / `.price__period`.
+- Let long button labels reflow or change the layout so controls remain readable and reachable. On small screens, preserve essential navigation and actions; secondary actions may move into an accessible drawer.
+
+## Mobile
+
+Check blocks at mobile and desktop widths, and at intermediate widths where their content changes. These are examples, not universal geometry rules:
+
+- Photo grids may stack or remain two-up when crop, captions, and tap targets support that choice.
+- Stats can stack or pair according to label length and reading order.
+- Navbars retain the brand, primary route access, and important actions at narrow widths; drawer transformation is one option.
+- Tables must remain understandable and operable on narrow screens. A labeled responsive layout can be preferable to horizontal scrolling.
+
+## Dark bands
+
+Use `variant="dark"` where the block documents it (CTA / footer / quote / stats bands). That remaps tokens locally on the block root — not a global dark theme.
+
+For a dark *panel inside* a light block (founder quote, stat tiles, a CTA tile in a photo grid, the service-hero quote card) put `data-scheme="dark"` on that element — in the template or on the slotted tile. It remaps the same tokens, so `.card`, `.stat`, `.btn-outline` and friends adapt without any hex in block CSS.
+
+## Motion & islands
+
+- Scroll reveal stays on authoring tags (`motion="editorial"`).
+- Interactive widgets use `data-island="header|carousel|tabs|before-after|counter|lightbox"`.
+- `data-count-to` counts integers only — leave decimals (4.9) as static text.
+- No autoplay carousels, no scroll-jacking, no background video autoplay.
+- Tabs (`process-stepper`, `testimonial-switcher`, `feature-tabs`) hide panels with the `hidden` attribute. If a panel has its own `display` (e.g. `.photo-card` is flex), add `.c-x__panels > [hidden]{display:none}` or the hidden panel will still render.
+- No marquees — not for logos, not for CTA copy (`design-system/MASTER.md`). Use `trust-logos` / `trust-reviews` and a static `cta-band` instead, even when a reference site scrolls them.
+- Hover-expanding panels (`services-panels`) must also expand on `:focus-within`, and the first panel is open by default when nothing is hovered.
+
+## Icons
+
+Inline SVG with class `.icon` (see [`icons.md`](icons.md)). Stroke icons, currentColor, 24 viewBox. Filled glyphs (stars, play) set `fill: currentColor; stroke: none` locally.
+
+## Tokens only
+
+Block CSS must use `var(--color-*)`, `var(--space-*)`, `var(--step-*)`, `var(--radius*)`, `var(--shadow-*)`. No raw hex except inside documented dark variants / overlays / scrims that intentionally set a local palette. Use `color-mix(in srgb, var(--color-text) 85%, transparent)` for translucent overlays instead of `#000`.

package/blocks/INDEX.md

@@ -0,0 +1,130 @@
+# Vitris blocks index
+
+Original vanilla HTML/CSS block references. Copy a folder into a site `components/<name>/` and adapt. Use kernel primitives (`.section`, `.card`, `.grid`, …) and `variant="…"` on authoring tags.
+
+See [CONVENTIONS.md](CONVENTIONS.md) and [icons.md](icons.md).
+
+| Id | Look | Media | Registers | Variants |
+|----|------|-------|-----------|----------|
+| `about/about-awards` | Numbered awards / rankings list beside a photo. | optional photo | professional, b2b, beauty | (none) |
+| `about/about-credentials` | Credentials / licenses grid. | badge marks | trade, professional | (none) |
+| `about/about-founder` | Founder portrait beside a dark letter / quote panel. | one portrait | trade, food, beauty, professional | reverse |
+| `about/about-mission` | Centered mission statement. | optional background still | professional, beauty, food | dark |
+| `about/about-statement` | One big centered sentence with small inline photos — an editorial counterpoint. | 3–4 tiny inline photos | professional, beauty, b2b | left |
+| `about/about-story` | Heritage story split. | owner/place photo | all | reverse |
+| `about/about-timeline` | Horizontal milestones — year, photo, one line each. | one photo per milestone | trade, professional, food | (none) |
+| `about/about-values` | Values as three cards. | optional icons | professional, beauty, b2b | (none) |
+| `blog/blog-featured` | One featured + side list. | covers | professional, b2b | (none) |
+| `blog/blog-index` | Post card grid. | cover images | b2b, professional, food | (none) |
+| `blog/blog-post-header` | Article title block. | optional hero | all | (none) |
+| `contact/contact-cards` | Phone / email / address cards. | none | trade, professional | (none) |
+| `contact/contact-chips` | Lead form with pill choices (what / budget) beside a short intro. | none | b2b, beauty, professional, trade | (none) |
+| `contact/contact-hours` | Hours table + CTA. | none | trade, food, beauty | (none) |
+| `contact/contact-map` | Media/map still beside details. | map or storefront | trade, food, beauty | reverse |
+| `contact/contact-offices` | One card per location: map still, address, phone, email. | map or storefront still per office | professional, b2b, trade | (none) |
+| `contact/contact-phone-first` | A direct call path for businesses whose visitors need a conversation more than a form. Useful availability and alternate contact details remain visible. The example business and number are fictional. | none | trade, professional, food | (none) |
+| `contact/contact-split` | NAP + lead form. | optional map still | all | (none) |
+| `contact/contact-visit` | Location, hours, and access information without relying on a decorative map. The address gets prominence; practical notes answer what a visitor needs before traveling. This is a fictional teaching example. | none | food, beauty, professional, trade | (none) |
+| `contact/service-areas` | Towns we serve as chips, with a fallback line. | none | trade, beauty, food | (none) |
+| `content/glossary` | Term / definition grid — jargon a customer sees on an estimate. | none | trade, professional, b2b | (none) |
+| `content/list-split` | Label left, hairline rows right (values, process, challenge → result). | none | all | numbered |
+| `content/prose-split` | Short label left, prose right; optional facts row (client, date, scope). | none | all | (none) |
+| `content/specification-ledger` | A dense, readable fact ledger for product or service specifications. The heading introduces why the distinctions matter; rows keep units and limits visible. The example describes a fictional material offer. | none | b2b, trade, professional | (none) |
+| `cta/cta-band` | Full-width conversion band. | none | all | dark, accent |
+| `cta/cta-card` | Centered elevated CTA card. | optional media | beauty, food, b2b | muted |
+| `cta/cta-floating-bar` | Compact bottom/inline urgency bar (static). | none | trade, food | sticky, accent |
+| `cta/cta-inline` | Quiet one-line CTA: heading beside a button with the team's faces. | 2–3 tiny portraits | b2b, professional, beauty | center |
+| `cta/cta-newsletter` | Email capture strip. | none | food, beauty, b2b | dark |
+| `cta/cta-photo-fan` | Fanned polaroid photos over a centered closing CTA. | 5 square photos | trade, beauty, food | muted |
+| `cta/cta-split` | CTA copy + form or phone block. | optional | trade, professional | dark |
+| `faq/faq-accordion` | Default details/summary FAQ. | none | all | two-col |
+| `faq/faq-grouped` | Grouped FAQ with a sticky jump-nav and optional rating card. | none | trade, professional, b2b | (none) |
+| `faq/faq-split` | FAQ beside contact CTA. | none | trade, professional, b2b | (none) |
+| `faq/faq-tabs` | Categorized FAQ tabs. | none | b2b, professional | (none) |
+| `feature/feature-bento` | Mixed-span bento feature board. | mixed media tiles | b2b, beauty, food | (none) |
+| `feature/feature-compare-table` | "Why us" comparison table with a highlighted column. | none | trade, b2b, professional | dark |
+| `feature/feature-comparison` | Simple two-column compare cards. | optional | b2b, trade, professional | (none) |
+| `feature/feature-grid-3` | Three icon+title+blurb pillars. | icons or small media | all | center, cards |
+| `feature/feature-icon-list` | Dense checklist of capabilities. | icons | trade, b2b, professional | two-col |
+| `feature/feature-spotlight` | One large feature with side bullets. | hero media | beauty, food, b2b | reverse |
+| `feature/feature-stats-band` | Four stats with optional count-up. | none | trade, b2b, professional | dark |
+| `feature/feature-tabs` | Tabbed feature panels. | optional per-panel media | b2b, professional | pill |
+| `feature/feature-thumb-list` | Copy + large photo beside a stack of thumbnail cards. | one hero photo + 3–4 thumbnails | trade, b2b, beauty | dark, reverse |
+| `feature/feature-zigzag` | Alternating copy/media story rows. | media per row | trade, beauty, professional | (none) |
+| `footer/footer-columns` | Multi-column directory footer. | logo optional | all | dark |
+| `footer/footer-compact` | Brand + legal + cookie link. | logo optional | all | (none) |
+| `footer/footer-cta` | Mini CTA above compact footer. | none | trade, beauty, food | dark |
+| `footer/footer-social` | Social icons + NAP strip. | social icons | beauty, food, trade | (none) |
+| `footer/footer-wordmark` | Directory footer with a giant clipped wordmark. | logo optional | trade, b2b, beauty | dark |
+| `gallery/gallery-before-after` | Before/after project cases. | paired photos | trade | (none) |
+| `gallery/gallery-carousel` | Full-bleed project carousel. | photos | trade, beauty, food | (none) |
+| `gallery/gallery-grid` | Responsive photo grid. | photos | trade, beauty, food | four |
+| `gallery/gallery-masonry` | Mixed aspect gallery. | photos | beauty, food, trade | (none) |
+| `gallery/gallery-mosaic-split` | Copy beside a photo mosaic with one quote tile mixed in. | 5–6 photos | trade, beauty, food | reverse |
+| `hero/hero-asymmetric` | Diagonal balance: heavy type corner vs dense photo. | strong subject photo | beauty, professional, trade | reverse |
+| `hero/hero-before-after` | Trade showcase with draggable before/after beside copy. | paired before/after photos | trade | reverse |
+| `hero/hero-editorial` | Type-led hero with generous air — premium / professional. | optional small media | professional, b2b, beauty | center |
+| `hero/hero-evidence` | Type-led, no-photo opening with a quieter column for verified reasons to trust the business. The two columns carry different levels of emphasis; the proof is not a substitute for an invented testimonial or metric. This example is for the fictional Northline Counsel practice. | none | professional, b2b, trade | (none) |
+| `hero/hero-form` | Lead form in the fold beside value prop. | optional side media | trade, b2b, professional | dark |
+| `hero/hero-menu` | Restaurant/menu: headline + featured dishes strip. | food photography | food | center |
+| `hero/hero-overlay` | Full-bleed photo with scrim and dual CTAs — immersive home default. | darker LCP photo | trade, beauty, food | tall, center |
+| `hero/hero-page` | Interior page header: eyebrow + h1 left, intro right, optional photo band. | optional wide photo | all | center |
+| `hero/hero-product` | Product/mockup as architecture — b2b/agency. | device mockup or product still | b2b, professional | reverse |
+| `hero/hero-service` | Service page header: photo band with an overlapping title card and a dark quote card. | wide service photo | trade, beauty, professional | (none) |
+| `hero/hero-split` | 50/50 copy + media; default trade/home-service hero. | photo or illustration LCP | trade, beauty, food, professional | reverse, dark |
+| `hero/hero-statement` | One huge centered statement with a three-image filmstrip beneath — studio / agency opener. | 3 landscape stills | b2b, beauty, professional | dark |
+| `hero/hero-stats` | Headline with proof metrics under the fold of the hero. | optional LCP | trade, b2b, professional | dark |
+| `hero/hero-video-still` | Poster still with play affordance linking to content clip — never autoplay bg. | poster still | beauty, food, b2b | center |
+| `incentives/incentive-banner` | Promo / offer banner. | none | trade, beauty, food | accent |
+| `incentives/incentive-cards` | Offer cards (financing, warranty, gift). | optional icons | trade, beauty, professional | (none) |
+| `navbar/nav-announcement` | Announcement strip above sticky split nav. | logo optional | trade, beauty, food, b2b | accent |
+| `navbar/nav-centered` | Centered mark with flanking link clusters — beauty / premium. | logo preferred | beauty, food, professional | static |
+| `navbar/nav-minimal` | Logo + CTA only — landing / lead-capture pages. | logo optional | trade, b2b, beauty | static |
+| `navbar/nav-split` | Sticky blurred header: logo left, links center-right, filled CTA. | logo optional | trade, beauty, b2b, food, professional | static |
+| `navbar/nav-utility` | Dual-tier: slim utility row (phone/hours) + primary bar. B2B default. | logo optional | b2b, professional, trade | static |
+| `pricing/menu-featured` | Featured dishes with prices. | food photos | food | (none) |
+| `pricing/menu-sections` | Categorized menu lists. | optional | food, beauty | (none) |
+| `pricing/pricing-table` | Simple feature compare table. | none | b2b, professional | (none) |
+| `pricing/pricing-tiers` | Three pricing tiers. | none | b2b, professional, beauty | highlight-mid |
+| `pricing/pricing-toggle` | Monthly/annual toggle via tabs island. | none | b2b, professional | (none) |
+| `process/process-carousel` | Process cards in buttoned carousel. | optional | trade, beauty | (none) |
+| `process/process-split` | Copy + large how-it-works media. | illustration or photo | b2b, trade, beauty | reverse |
+| `process/process-stepper` | One large photo panel per step with a step strip below (tabs island). | one photo per step | professional, trade, beauty | (none) |
+| `process/process-steps` | Numbered horizontal/stacked steps. | optional icons | trade, b2b, professional | three |
+| `process/process-sticky` | Sticky intro column beside numbered steps with thumbnails. | one thumbnail per step | trade, beauty, b2b | dark |
+| `process/process-timeline` | Vertical timeline. | optional | professional, b2b, trade | (none) |
+| `services/services-cards` | Service cards with optional price. | card images optional | trade, beauty, professional, food | (none) |
+| `services/services-carousel` | Buttoned carousel for 4+ services. | card media | trade, beauty, food | (none) |
+| `services/services-list` | Editorial service list with CTA per row. | optional thumbs | professional, trade, b2b | (none) |
+| `services/services-menu` | Menu-style priced items. | food photos optional | food, beauty | two-col |
+| `services/services-packages` | Tiered packages / retainers. | none | b2b, professional, trade | highlight-mid |
+| `services/services-panels` | Horizontal photo panels — the hovered or focused one expands. | one photo per service | professional, beauty, trade | (none) |
+| `services/services-photo-grid` | Photo tiles with the service name over a scrim; optional dark CTA tile. | one photo per service | trade, professional, beauty | four |
+| `services/services-priority` | An unequal service index for a business with one primary offer and several supporting services. The featured service gets depth; the remaining rows stay easy to scan. Fictional Northline Counsel copy is used only for teaching. | none | professional, trade, b2b | (none) |
+| `stats/stats-cards` | Metric cards with labels. | none | b2b, trade | (none) |
+| `stats/stats-mosaic` | Dark stat tiles alternating with photos in one band. | 2 photos | professional, b2b, trade | (none) |
+| `stats/stats-row` | Inline four metrics. | none | trade, b2b, professional | dark |
+| `stats/stats-split` | Stat cluster beside copy. | optional media | professional, trade | (none) |
+| `team/team-featured` | Featured person + roster. | portraits | professional, beauty | reverse |
+| `team/team-grid` | Portrait grid of people. | portraits | professional, beauty, b2b, trade | three |
+| `team/team-list` | Compact name/role list. | optional avatars | professional, b2b | (none) |
+| `testimonial/testimonial-carousel` | Buttoned testimonial carousel. | portraits | trade, beauty, food | (none) |
+| `testimonial/testimonial-grid` | Three testimonial cards. | portraits optional | all | (none) |
+| `testimonial/testimonial-mosaic` | Bento of quote cards, stat tiles, and portraits. | 2–3 portraits | professional, b2b, beauty | (none) |
+| `testimonial/testimonial-platform` | Review-platform card: big rating, three recent reviews, "write a review" link. | small portraits | trade, beauty, food | dark |
+| `testimonial/testimonial-rating` | Star rating band with review count. | none | trade, beauty, food, professional | muted |
+| `testimonial/testimonial-spotlight` | Large quote with avatar attribution. | portrait optional | all | dark |
+| `testimonial/testimonial-switcher` | Pick a reviewer, read their quote (tabs island). | small portraits | trade, beauty, professional | avatars |
+| `testimonial/testimonial-wall` | Dense quote wall / press mentions. | press marks optional | b2b, professional | (none) |
+| `trust-strip/trust-badges` | Rating chip + cert badges row. | optional badge icons | trade, beauty, food, professional | muted |
+| `trust-strip/trust-certs` | Proof sentence over a row of certification tiles. | badge icons | trade, professional, beauty | muted |
+| `trust-strip/trust-logos` | Grayscale logo row under hero. | partner marks | trade, b2b, professional, food | muted |
+| `trust-strip/trust-quote` | Single spotlight quote as trust band. | optional portrait | all | dark |
+| `trust-strip/trust-reviews` | Avatar cluster + rating line + review-platform marks. | 3–5 tiny portraits, 2–4 platform marks | trade, beauty, food, professional | center |
+| `work/case-alternating` | Numbered case studies alternating photo and copy. | one photo per case | professional, b2b, trade | (none) |
+| `work/case-carousel` | One case per slide: copy left, image right, arrow nav. | one photo per case | b2b, professional, beauty | (none) |
+| `work/case-header` | Case study / project header: breadcrumb, title, meta, hero image, side CTA card. | one hero photo | professional, b2b, trade | (none) |
+| `work/project-evidence` | A project story led by one real image and a compact fact ledger. Captions explain what the image actually shows; facts remain independently verifiable. This example is for the fictional Tide &amp; Slate roofing company and uses a synthetic teaching image, never customer proof. | one project photo required | trade, professional, b2b | (none) |
+| `work/project-grid` | Portfolio grid: image, title, category. | one photo per project | b2b, beauty, trade, professional | two |
+
+Total: **120** blocks.

package/blocks/about/about-awards/README.md

@@ -0,0 +1,36 @@
+# about-awards
+
+Numbered awards / rankings list beside a photo.
+
+- **Category:** about
+- **Media:** optional photo
+- **Registers:** professional, b2b, beauty
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `media` | Optional `<img>` (4:3) under the head |
+| `awards` | 4–7 `<li><span>Award — Category</span><time>2026</time></li>` (first is highlighted) |
+
+## Example
+
+```html
+<about-awards>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Our awards</p>
+  <h2 slot="heading">Awards that reflect our work.</h2>
+  <p slot="lede" class="lede">Top rankings from the guides that lawyers actually trust — earned year after year.</p>
+  <img src="/media/harvest/award.jpg" alt="A glass award being handed over" width="1200" height="900" slot="media" loading="lazy">
+  <li slot="awards"><span>Chambers USA — Top Rated for Lawsuits</span><time>2026</time></li>
+  <li slot="awards"><span>The Legal 500 — Top Tier in Finance Law</span><time>2026</time></li>
+  <li slot="awards"><span>Benchmark Litigation — Top Tier Firm</span><time>2025</time></li>
+  <li slot="awards"><span>The American Lawyer — Litigation Team of the Year</span><time>2025</time></li>
+  <li slot="awards"><span>Law360 — Practice Group of the Year</span><time>2024</time></li>
+</about-awards>
+```
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/about/about-awards/styles.css

@@ -0,0 +1,13 @@
+.c-about-awards__grid{display:grid;gap:var(--space-6)}
+.c-about-awards__side{display:grid;gap:var(--space-5);align-content:start}
+.c-about-awards__side .section__head{margin-bottom:0}
+.c-about-awards__media:empty{display:none}
+.c-about-awards__list{list-style:none;margin:0;padding:0;counter-reset:award;align-self:center}
+.c-about-awards__list > li{display:grid;grid-template-columns:2.5rem minmax(0,1fr) auto;gap:var(--space-3);align-items:center;padding:var(--space-4) var(--space-4);border-bottom:1px solid var(--color-border);counter-increment:award}
+.c-about-awards__list > li::before{content:counter(award,decimal-leading-zero) ".";font-weight:600;color:var(--color-accent);font-variant-numeric:tabular-nums}
+.c-about-awards__list > li > span{font-weight:500}
+.c-about-awards__list > li > time{font-size:var(--step-0);color:var(--color-muted);font-variant-numeric:tabular-nums}
+.c-about-awards__list > li:first-child{background:var(--color-text);color:var(--color-bg);border-radius:var(--radius-md);border-bottom:0}
+.c-about-awards__list > li:first-child::before,.c-about-awards__list > li:first-child > time{color:inherit;opacity:.8}
+.c-about-awards__list > li:first-child + li{border-top:1px solid var(--color-border)}
+@media(min-width:900px){.c-about-awards__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--space-9)}}

package/blocks/about/about-awards/template.html

@@ -0,0 +1 @@
+<section class="c-about-awards section"><div class="wrap c-about-awards__grid"><div class="c-about-awards__side"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="frame ratio-4x3 c-about-awards__media"><slot name="media"></slot></div></div><ol class="c-about-awards__list"><slot name="awards"></slot></ol></div></section>

package/blocks/about/about-credentials/README.md

@@ -0,0 +1,33 @@
+# about-credentials
+
+Credentials / licenses grid.
+
+- **Category:** about
+- **Media:** badge marks
+- **Registers:** trade, professional
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `items` | 4 or 8 `.card` items with `.icon-tile`, `<h3>` (short), `<p>` (number / issuer) |
+
+## Example
+
+```html
+<about-credentials>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Credentials</p>
+  <h2 slot="heading">Licensed, certified, and insured — in writing</h2>
+  <p slot="lede" class="lede">Ask for the certificates. We bring them to every estimate.</p>
+  <div slot="items" class="card"><div class="card__body"><span class="icon-tile icon-tile--round"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3 4 6v6c0 5 3.5 8.5 8 9 4.5-.5 8-4 8-9V6l-8-3z"/><path d="m9 12 2 2 4-4"/></svg></span><h3>Maine contractor license</h3><p>#RC-20419 · active since 2009</p></div></div>
+  <div slot="items" class="card"><div class="card__body"><span class="icon-tile icon-tile--round"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="9" r="6"/><path d="m8.5 14-1.5 7 5-3 5 3-1.5-7"/></svg></span><h3>GAF Master Elite</h3><p>Top 2% of roofers nationally</p></div></div>
+  <div slot="items" class="card"><div class="card__body"><span class="icon-tile icon-tile--round"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span><h3>Fully insured</h3><p>$2M liability · workers' comp</p></div></div>
+  <div slot="items" class="card"><div class="card__body"><span class="icon-tile icon-tile--round"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0"/><path d="M16 4.5a3.5 3.5 0 0 1 0 7"/><path d="M17.5 14a6.5 6.5 0 0 1 4 6"/></svg></span><h3>BBB A+ rated</h3><p>Accredited since 2012</p></div></div>
+</about-credentials>
+```
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/about/about-credentials/block.meta.json

@@ -0,0 +1,85 @@
+{
+  "schemaVersion": 1,
+  "id": "about/about-credentials",
+  "revision": 1,
+  "status": "draft",
+  "owner": "Vitris design library",
+  "sourceHash": "67c4b5ac710eba9e6928561d97aa942a17613cfe9d38f18a3793ded544610dca",
+  "fit": {
+    "visitorJobs": [
+      "Verify credentials and relevant qualifications"
+    ],
+    "pageRoles": [
+      "proof"
+    ],
+    "useWhen": [
+      "Verify credentials and relevant qualifications"
+    ],
+    "avoidWhen": [
+      "The content or media cannot support this composition"
+    ]
+  },
+  "content": {
+    "requiredSlots": [
+      "heading",
+      "items"
+    ],
+    "optionalSlots": [
+      "eyebrow",
+      "lede"
+    ],
+    "testedItemCounts": [
+      1
+    ]
+  },
+  "media": {
+    "min": 0,
+    "max": 8,
+    "optionalBehavior": "Recompose without empty media frames when media is optional",
+    "aspect": [
+      "content-dependent"
+    ]
+  },
+  "composition": {
+    "hierarchy": "credentials grid",
+    "alignment": "centered",
+    "density": "compact",
+    "mediaProminence": "low",
+    "geometry": [
+      "grid",
+      "proof"
+    ],
+    "boundary": "section boundary adapts to adjacent content"
+  },
+  "adaptation": {
+    "flexible": [
+      "spacing",
+      "surface treatment",
+      "type scale"
+    ],
+    "invariants": [
+      "semantic reading order",
+      "one clear section purpose"
+    ],
+    "customWhen": [
+      "The visitor job needs a different hierarchy"
+    ]
+  },
+  "responsive": {
+    "readingOrder": "DOM order follows the visitor narrative",
+    "reflow": "Stack or resize according to content",
+    "crop": "Keep important subjects visible"
+  },
+  "interaction": {
+    "behavior": "Native links and controls",
+    "islands": []
+  },
+  "evidence": {
+    "provenance": [
+      "Original Vitris block source"
+    ],
+    "testedContexts": [],
+    "accessibility": [],
+    "previewManifest": "../../../design-system/block-previews/v1/about--about-credentials.json"
+  }
+}

package/blocks/about/about-credentials/styles.css

@@ -0,0 +1,4 @@
+.c-about-credentials__grid .card__body{align-items:center;justify-items:center;text-align:center;padding:var(--space-5) var(--space-4);gap:var(--space-2)}
+.c-about-credentials__grid .card__body > h3{font-size:var(--step-1)}
+.c-about-credentials__grid .card__body > p{font-size:var(--step-0)}
+.c-about-credentials__grid .card__body > .icon-tile{margin-bottom:var(--space-2)}

package/blocks/about/about-credentials/template.html

@@ -0,0 +1 @@
+<section class="c-about-credentials section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="grid grid--4 c-about-credentials__grid"><slot name="items"></slot></div></div></section>

package/blocks/about/about-founder/README.md

@@ -0,0 +1,35 @@
+# about-founder
+
+Founder portrait beside a dark letter / quote panel.
+
+- **Category:** about
+- **Media:** one portrait
+- **Registers:** trade, food, beauty, professional
+- **Variants:** reverse
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `media` | `<img>` portrait (4:5) |
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `quote` | 1–3 `<p>` paragraphs in the founder's voice |
+| `byline` | `<div><strong>Name</strong><span>Role</span></div>` |
+
+## Example
+
+```html
+<about-founder>
+  <img src="/media/harvest/founder.jpg" alt="Sam Calloway holding a hard hat on a job site" width="1200" height="1500" slot="media" loading="lazy">
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">From the founder</p>
+  <h2 slot="heading">A different way to build a roofing company.</h2>
+  <p slot="quote">“I started Harbor after one bad hail season too many — watching out-of-town crews patch roofs, cash the check, and leave before the first leak showed up.</p>
+  <p slot="quote">Every roof we build comes with the same promise: the person who shakes your hand on day one walks the finished roof with you at the end. And the warranty is in writing, so you can hold us to it.”</p>
+  <div slot="byline"><strong>Sam Calloway</strong><span>Founder &amp; master roofer</span></div>
+</about-founder>
+```
+
+Variants: `<about-founder variant="reverse">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/about/about-founder/styles.css

@@ -0,0 +1,9 @@
+.c-about-founder__grid{display:grid;gap:var(--space-4)}
+.c-about-founder__media{overflow:hidden;border-radius:var(--radius-lg);background:var(--color-surface-2);min-height:20rem}
+.c-about-founder__media img{width:100%;height:100%;object-fit:cover}
+.c-about-founder__panel{display:grid;gap:var(--space-4);align-content:center;padding:var(--space-7) var(--space-6);border-radius:var(--radius-lg)}
+.c-about-founder__panel h2{font-size:var(--step-3)}
+.c-about-founder__quote{margin:0;display:grid;gap:var(--space-3)}
+.c-about-founder__quote p{margin:0;font-size:var(--step-1);line-height:1.6}
+.c-about-founder__byline{margin-top:var(--space-2)}
+@media(min-width:900px){.c-about-founder__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:stretch}.c-about-founder__media{min-height:0}.c-about-founder__panel{padding:var(--space-8) var(--space-8)}.c-about-founder--reverse .c-about-founder__media{order:2}}

package/blocks/about/about-founder/template.html

@@ -0,0 +1 @@
+<section class="c-about-founder section"><div class="wrap c-about-founder__grid"><div class="c-about-founder__media"><slot name="media"></slot></div><div class="c-about-founder__panel" data-scheme="dark"><slot name="eyebrow"></slot><slot name="heading"></slot><blockquote class="c-about-founder__quote"><slot name="quote"></slot></blockquote><div class="byline c-about-founder__byline"><slot name="byline"></slot></div></div></div></section>

package/blocks/about/about-mission/README.md

@@ -0,0 +1,31 @@
+# about-mission
+
+Centered mission statement.
+
+- **Category:** about
+- **Media:** optional background still
+- **Registers:** professional, beauty, food
+- **Variants:** dark
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional eyebrow |
+| `(default)` | `<h2>` (a single strong sentence) + one `<p class="lede">` |
+| `actions` | Optional 1 button |
+
+## Example
+
+```html
+<about-mission>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">What we believe</p>
+  <h2>Good work is the marketing.</h2>
+  <p class="lede">We don't run ads. Every job we book comes from a neighbor who saw the last one — so we treat every roof like the whole street is watching. Because it is.</p>
+  <a slot="actions" class="btn-outline" href="/reviews">Read the reviews</a>
+</about-mission>
+```
+
+Variants: `<about-mission variant="dark">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.