@getvitops/generator 7.0.0 → 8.0.1

package/CHANGELOG.md

@@ -1,5 +1,124 @@
 # @getvitops/generator
 
+## 8.0.1
+
+### Patch Changes
+
+- @getvitops/utils@8.0.1
+
+## 8.0.0
+
+### Major Changes
+
+- Rebuild the lightbox on one dialog + the existing carousel, fixing the flicker on
+  prev/next and the stutter on open.
+
+  **Breaking (`css`/`bricks` and `tailwind` formats — `.lightbox-dialog`'s markup
+  contract changed):**
+
+  - `<Gallery />` now emits ONE `<dialog class="lightbox-dialog">` per gallery,
+    wrapping a `<Carousel />`, instead of one dialog per image. A `.gallery__trigger`
+    is now a plain `<a href="#slide-id">`, not a `command="show-modal"` button.
+  - `.lightbox-dialog__content` / `__image` / `__nav` / `__nav-button` /
+    `__caption` are gone. The dialog's child is `.lightbox-dialog__track` (a
+    `.carousel`) — prev/next, dots, arrow keys and swipe are the carousel's,
+    reused rather than reimplemented. `.lightbox-dialog__close` is unchanged.
+  - `<wc-gallery>` no longer builds nav buttons or steps between images — the
+    nested `<wc-carousel>` does. It fires `gallery-open` (unchanged shape) and
+    re-emits the carousel's own stepping as `gallery-change`.
+  - `packages/core/src/web-components/utils/gallery.ts` dropped `keyToAction` and
+    `swipeAction` (the carousel's own key/swipe handling covers both now).
+    `stepIndex`/`preloadTargets` are unchanged.
+
+  **Why:** stepping used to close one `<dialog>` and open another, which made
+  `animation.css`'s top-layer driver play a full exit-then-entry transition on
+  every step — visible as a flicker on prev/next, by construction, not a bug to
+  tune away. Opening also awaited the full image's `decode()` before starting the
+  view-transition morph, so the dialog visibly stalled on a slow network. One
+  dialog containing one carousel makes the first failure mode unrepresentable
+  (stepping is a scroll, not a close/open pair) and removes the wait for the
+  second (the morph starts immediately, painting the thumbnail as a CSS
+  background placeholder until the full image arrives).
+
+  **Also improved, not just fixed:** the no-JS fallback is no longer a _stripped_
+  lightbox — it's a genuine one. Each trigger is ordinary fragment navigation
+  (`:has(:target)` in `lightbox.css` reveals the dialog), which needs no Invoker
+  Commands polyfill in any engine, and it now has working prev/next with no
+  JavaScript at all — the previous per-dialog fallback had no way to express that.
+
+  **Migration:** a consumer using `<Gallery />` needs no changes — the component's
+  props are unchanged. Anyone who hand-authored `.lightbox-dialog` markup (per
+  `docs/concepts/patterns.md` / `docs/css/classes.md`) must move to the new single-
+  dialog-wrapping-a-carousel shape; see `patterns.astro`'s "Gallery, hand-authored"
+  demo for the reference markup. `<wc-gallery>` consumers listening for
+  `gallery-change` keep the same event shape (`{ index, total }`).
+
+### Minor Changes
+
+- Add Google Business Profile reviews: fetch, cache, render.
+
+  - **`vitops reviews`** (new CLI command) fetches a client's GBP reviews (legacy v4 API — the only
+    one that has them) and writes them to `.vitops/reviews.json`, meant to be committed so a build
+    never needs a live Google credential. `--dry` prints the plan; `--check` diffs against the cache
+    without writing. Requires the same `VITOPS_GOOGLE_CLIENT_ID`/`_CLIENT_SECRET`/`_REFRESH_TOKEN` (or
+    ADC login) `search setup` uses, scoped to `business.manage` — **and the calling GCP project must
+    be allowlisted by Google first**, a separate one-time approval from every other Google API here.
+  - **`site.reviews`** (config): which `organization.locations` to fetch, and per-location
+    `featured`/`minRating`/`sort`/`limit` selection. `schema` (JSON-LD) and `avatars` both default to
+    **off** — see the migration notes below.
+  - **`@getvitops/utils/reviews`** (new subpath): the pure plan/select/merge functions plus the GBP
+    fetcher and cache reader/writer, mirroring `./indexing`'s pure/IO split.
+  - **`<ReviewCard>`** (new Astro component, `@getvitops/astro`): one review card from a cache entry.
+    No web component — nothing here needs progressive enhancement. Composes the existing
+    `schemas/Review.astro` for JSON-LD only when both `schema` and `itemReviewed` are passed.
+  - **`<Marquee>`** (new Astro component): the tier-3 wrapper `wc-marquee`/`marquee.css` was missing.
+  - **`.review` pattern** (`css`/`bricks` and `tailwind` formats): a new config-generated
+    `patterns.items.review` entry plus `packages/core/css/patterns/review.css` for the structural
+    parts (rating, identity, body, reply, source link). Two new semantic icon names, `star` and
+    `star-half`, across every icon set.
+
+  **Migration:** no breaking change. A site adding `site.reviews` should read the "Google reviews"
+  section in AGENTS.md before enabling `schema` — Google's structured-data policy treats a business
+  marking up reviews of itself as ineligible for review rich results and risks a manual action, which
+  is why it defaults off.
+
+- Repo-wide simplification pass: de-boilerplate the CLI, dedupe shared cache/plan
+  primitives in `@getvitops/utils`, drop dead code, and tighten dependency hygiene.
+
+  No breaking changes. (`vitops icons`'s `--site` flag was briefly going to be renamed to
+  `--input` for consistency with the other `Config`-anchored commands — deferred rather than
+  spending a major bump on a rename with no other breaking change riding along; it stays
+  `--site` for now.)
+
+  **Fixed:**
+
+  - `@getvitops/core`'s 12 runtime deps (`lit`, both `@oddbird` polyfills, both
+    `@webcomponents` packages, `colorjs.io`, etc.) were listed as `dependencies` despite
+    being bundled into `dist/elements.js`/`dist/polyfills.js`/`dist/deferred.js` — a
+    consumer installed them twice for nothing. Moved to `devDependencies`; no change to
+    what ships.
+  - Deleted `old-css-lib/` (59 files), superseded by `packages/core/css/` since the
+    in-memory bundling change — no consumer-facing effect, it was not part of any
+    published output.
+  - Deleted a dead Astro module (`packages/astro/src/scripts/deferred.ts`) that had
+    silently diverged from `packages/core/src/js/deferred.ts` and had zero importers.
+
+  **No consumer-facing change in `@getvitops/vite`** beyond the fixed-group version bump —
+  task-graph and caching fixes internal to this repo's own build.
+
+  Everything else (the `cli.ts` file split into `commands/{search,ads}.ts`, shared
+  `json-store.ts`/`plan-format.ts` helpers in `@getvitops/utils`, a `.github/actions/setup`
+  composite action, restatement-comment cleanup) is internal refactoring with no change to
+  any published API, CLI flag, or generated output.
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies [a84839b]
+  - @getvitops/utils@8.0.0
+
 ## 7.0.0
 
 ### Major Changes
@@ -1012,28 +1131,20 @@ hidden` would pull it out of the accessible-name computation along with the visu
   {
     "designSystem": {
       "themes": {
-        "default": {
-          /* … */
-        },
+        "default": {/* … */},
       },
     },
     "organization": {
       "name": "Acme",
       "contact": "hq",
       "locations": {
-        "hq": {
-          /* … */
-        },
+        "hq": {/* … */},
       },
     },
     "site": {
       "defaultLocale": "en",
-      "domains": {
-        /* … */
-      },
-      "analytics": {
-        /* … */
-      },
+      "domains": {/* … */},
+      "analytics": {/* … */},
     },
   }
   ```
@@ -1198,7 +1309,7 @@ open-fade-in"` composes slide and fade. Applied at zero specificity with identit
   Also new, and worth wiring at the same time — **`gitLastmod()` for real sitemap dates**:
 
   ```js
-  import vitops, { gitLastmod } from '@getvitops/astro';
+  import vitops, { gitLastmod } from "@getvitops/astro";
   vitops({ sitemap: { serialize: await gitLastmod() } });
   ```
 
@@ -1383,8 +1494,8 @@ open-fade-in"` composes slide and fade. Applied at zero specificity with identit
 
   ```js
   vitops({
-    analytics: { googleAnalytics: 'G-XXXXXXXXXX', plausible: 'acme.com' },
-    consent: { policyUrl: '/legal/cookies' },
+    analytics: { googleAnalytics: "G-XXXXXXXXXX", plausible: "acme.com" },
+    consent: { policyUrl: "/legal/cookies" },
   });
   ```
 
@@ -1524,7 +1635,7 @@ inset(0 100% 0 0)`, and `clip-path` clips **hit-testing** as well as painting
 
   ```js
   // astro.config.mjs
-  getvitops({ css: { input: 'company.json', format: 'css' } });
+  getvitops({ css: { input: "company.json", format: "css" } });
   ```
 
   ```
@@ -1575,11 +1686,11 @@ inset(0 100% 0 0)`, and `clip-path` clips **hit-testing** as well as painting
   getvitops({
     fonts: [
       {
-        name: 'League Spartan',
-        provider: 'fontsource',
-        cssVariable: '--font-league-spartan',
-        weights: ['100 900'],
-        subsets: ['latin'],
+        name: "League Spartan",
+        provider: "fontsource",
+        cssVariable: "--font-league-spartan",
+        weights: ["100 900"],
+        subsets: ["latin"],
         preload: true,
       },
     ],
@@ -2450,7 +2561,7 @@ inset(0 100% 0 0)`, and `clip-path` clips **hit-testing** as well as painting
   ```js
   // astro.config.mjs
   getvitops({
-    css: { input: 'design-system.json', format: 'css', out: 'src/styles' },
+    css: { input: "design-system.json", format: "css", out: "src/styles" },
     editor: true,
   });
   ```

package/assets/css/global.css

@@ -75,3 +75,31 @@ body {
     scroll-padding-block-start: var(--top-offset, 0);
   }
 }
+
+/* The focus ring must survive Windows High Contrast Mode, and as generated it
+   does not. Every pattern's `ring: true` state (`generate.ts`) emits `outline:
+   none; box-shadow: 0 0 0 3px <color>;` — a deliberate choice the rest of the
+   time, since a box-shadow ring can follow a border-radius where a native
+   outline cannot. But `forced-colors: active` forces `box-shadow` to `none`
+   unconditionally (CSS Color Adjust Module), and this framework already asked
+   for no native outline either — so a keyboard user in forced-colors mode gets
+   NO focus indicator at all, on every `:focus-visible` element in every
+   format. This is the single most severe instance of the class of bug
+   `forced-colors`/`prefers-contrast` coverage exists to catch (AGENTS.md's
+   design-system-gaps notes on `--surface-glass`/`--overlay`/role solids are
+   the same class, decorative rather than safety-critical).
+
+   `!important`, deliberately, for the same reason `:root`'s `font-size` above
+   gets it: this must win regardless of which pattern's `vitops.components`
+   rule set `outline: none`, and `!important` outranks a normal-priority
+   declaration regardless of cascade layer. The colour is the token every
+   other ring already uses (`--color-border-focus`, from `ui-primary`,
+   contrast-checked as a non-text boundary) — forced-colors mode remaps
+   `outline-color` to a system colour automatically, so this is really only
+   asserting THAT an outline renders, not which colour it renders in. */
+@media (forced-colors: active) {
+  :focus-visible {
+    outline: 2px solid var(--color-border-focus) !important;
+    outline-offset: 2px !important;
+  }
+}

package/assets/css/index.css

@@ -6,6 +6,7 @@
 @import './generated/type-tokens.css';
 @import './generated/tokens.css';
 @import './generated/typography.css';
+@import './generated/typography-headings.css';
 @import './layout.css';
 /* Must precede utilities.css: both are `vitops.utilities`, and utilities.css
    re-emits `.<bp>-flex` AFTER its own `.hidden` so `class="hidden md-flex"`
@@ -53,6 +54,7 @@
 @import './patterns/table.css';
 @import './patterns/details.css';
 @import './patterns/comment.css';
+@import './patterns/review.css';
 @import './patterns/banner.css';
 @import './patterns/consent.css';
 @import './patterns/list.css';

package/assets/css/patterns/gallery.css

@@ -6,10 +6,13 @@
  * concerns — "a grid of images" and "view one full-screen" — and only the dialog
  * half needs the `lightbox` name; the grid never was one.
  *
- * `<wc-gallery>` wraps this and augments the per-image `.lightbox-dialog`s it finds
- * with prev/next, arrow keys, swipe and a counter. With no JS each `.gallery__trigger`
- * is a real `command="show-modal" commandfor="…"` invoker for its own dialog, so the
- * grid + dialogs already form a working modal lightbox before any script runs.
+ * `<wc-gallery>` wraps this and the single `.lightbox-dialog` it opens, running the
+ * thumbnail → full-image view-transition morph; stepping between images is a
+ * `<wc-carousel>` scroll inside that dialog, not a second dialog. With no JS each
+ * `.gallery__trigger` is a real `<a href="#slide-id">` into the carousel's own
+ * `<li id="slide-id">`, and `:has(:target)` in lightbox.css is what reveals the
+ * dialog — so the grid + dialog already form a working modal lightbox, with
+ * prev/next, before any script runs.
  */
 
 wc-gallery {
@@ -40,6 +43,7 @@ wc-gallery {
   padding: 0;
   background: none;
   border: none;
+  text-decoration: none;
   cursor: pointer;
 
   &:focus-visible {

package/assets/css/patterns/lightbox.css

@@ -2,10 +2,17 @@
  * Lightbox — the full-screen `<dialog>` a gallery trigger opens.
  * Consumes the generated token cascade (src/css/generated/tokens.css).
  *
- * The thumbnail grid that drives this moved to `patterns/gallery.css`
+ * The thumbnail grid that drives this lives in `patterns/gallery.css`
  * (`.gallery` / `.gallery__item` / `.gallery__trigger` / `.gallery__thumb`) — this
  * partial owns only the dialog a trigger opens. `<Gallery />` emits both; this
  * file has no opinion on what triggers it.
+ *
+ * **One dialog, one carousel** — not one dialog per image. Stepping between
+ * images is a scroll inside an already-open dialog (`.carousel`, patterns/
+ * carousel.css), so there is no close-one/open-another sequence for the top-layer
+ * driver in animation.css to double-animate. `<wc-gallery>` only opens/closes;
+ * `<wc-carousel>` (nested inside, `<Gallery />` emits both tags) owns prev/next,
+ * dots, arrow keys and swipe — reused rather than re-implemented.
  */
 
 /* ── Lightbox dialog — full-screen, w/ view transitions ─────────────────────── */
@@ -22,7 +29,7 @@ dialog.lightbox-dialog {
   background: var(--lightbox-dialog-bg, oklch(0 0 0 / 0.92));
   color: #fff;
   display: grid;
-  place-items: center;
+  place-items: stretch;
 
   /* No scrim. Stated through popover.css's token rather than overriding its
      ::backdrop rule, so it keeps the shared fade timing. */
@@ -31,7 +38,8 @@ dialog.lightbox-dialog {
   /* The entry, as effect vars rather than a keyframe — same approach as
      dialog.css, and for the same reason: the top-layer driver in animation.css
      then animates this OUT too, which an `animation:` on `[open]` never does
-     (it only ever plays once, on open). */
+     (it only ever plays once, on open). Runs on real open/close ONLY — stepping
+     between slides never opens or closes this dialog, so it can never fire here. */
   --opacity-from: 0;
   --scale-x-from: 0.95;
   --scale-y-from: 0.95;
@@ -40,26 +48,138 @@ dialog.lightbox-dialog {
     display: grid;
   }
 
-  .lightbox-dialog__content {
-    position: relative;
-    max-inline-size: 90vw;
-    max-block-size: 90vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  /* ── No-JS fallback: `:target` + `:has()` ──────────────────────────────────
+     A `.gallery__trigger` is a real `<a href="#slide-id">`. Following it makes
+     that slide's `<li>` match `:target`, which this rule alone is what reveals
+     the dialog — no Invoker Commands, no polyfill, in every engine that has
+     `:has()` (Safari 15.4+, Chromium 105+, Firefox 121+). The browser's own
+     fragment-navigation scroll then lands the carousel on the right slide,
+     because the target lives inside `.carousel__track`.
+
+     `:not([open])` is load-bearing: once `<wc-gallery>` opens this for real via
+     `showModal()`, `[open]` is present and this rule must yield to it — a stale
+     `:target` from a previous no-JS visit must not fight the real modal, and
+     must not keep the dialog "open" by this rule alone once JS is stepping
+     between slides (which never changes the URL fragment). */
+  &:not([open]):has(:target) {
+    display: grid;
+    position: fixed;
+    inset: 0;
+    z-index: var(--lightbox-z, 100);
   }
 
-  .lightbox-dialog__image {
+  .lightbox-dialog__track {
     max-inline-size: 100%;
-    max-block-size: 90vh;
-    object-fit: contain;
-
-    /* `<wc-gallery>` assigns `view-transition-name: lightbox-active` to this and
-       the originating thumbnail at the moment it opens, then clears it on close —
-       that shared, runtime-assigned name is what morphs one into the other.
-       `match-element` (the auto-generated per-element name) does NOT do this: it
-       names each element uniquely, so it can never morph a thumbnail into a
-       different `<img>`. Do not put a `view-transition-name` here statically. */
+    /* Inert: `.carousel`'s implicit grid row is `auto`, so this percentage is
+       cyclic (CSS Sizing 3 §5.2) — it resolves against the row's own
+       content-derived size, i.e. against itself, and can never actually clamp
+       it. Kept only to state intent; the `<img>`/`<picture>` cap below is what
+       does the real work by capping the thing with an intrinsic size instead
+       of trying to cap a box that is sized BY that intrinsic size. */
+    max-block-size: 100%;
+
+    /* One source of truth for the slide's breathing room: the padding below
+       and the image's block cap both read these, so they cannot drift apart. */
+    --lightbox-pad-block: 5dvh;
+    --lightbox-pad-inline: 5dvw;
+
+    /* `.carousel__media`'s own rule reads this for its `object-fit` (default
+       `cover`, right for a thumbnail strip, wrong for a full image — nothing
+       here should be cropped). Nesting under `dialog.lightbox-dialog` gives
+       this whole block higher specificity than carousel.css's bare
+       `.carousel__media` rule regardless of import order, so it always wins.
+       Belt-and-braces only now: the image rule below sizes the box to the
+       image, so there's normally nothing left for `object-fit` to do. */
+    --carousel-media-fit: contain;
+
+    /* No `.carousel__track { max-block-size: 100% }` override here — same
+       cyclic-percentage trap as above, against `.carousel`'s own implicit
+       `auto` row. It has never applied. */
+
+    /* Breathing room against the edge-to-edge dialog, on the SLIDE rather than
+       the media box — a slide is the grid item `align-items: stretch` fills to
+       the track's full height, so padding here is what keeps the image off the
+       glass instead of the media box's aspect-ratio doing it. */
+    .carousel__slide {
+      box-sizing: border-box;
+      padding: var(--lightbox-pad-block) var(--lightbox-pad-inline);
+
+      /* carousel.css gives a slide `align-content: start` so a `cover`ed media
+         box (which fills the row) hugs the top. Here the media box is
+         deliberately SMALLER than the slide — it's sized to the image, not the
+         other way around — so it must be centred instead, or a 16/9 image
+         would hang from the top of a row sized by a 9/16 neighbour. */
+      align-content: center;
+    }
+
+    .carousel__media {
+      /* Full images vary wildly in ratio; drop carousel.css's fixed 16/9 box
+         (right for a thumbnail strip, wrong here) and let the image below
+         determine the box's size. carousel.css's `block-size: 100%` is
+         deliberately NOT reinstated here: against this slide's content-sized
+         `auto` row it's the same cyclic percentage as the caps above, and it
+         only ever resolved back to the content height it was meant to cap. */
+      aspect-ratio: unset;
+
+      /* Painted the instant a slide is visible, whether or not the full image
+         has loaded yet — the morph target is never an empty box. Set per-slide
+         by `<Gallery />` from the thumbnail URL; declared as a var rather than
+         a bare property so a slide that omits a thumb (no placeholder) simply
+         paints nothing extra. `contain` + `center` lands on the same rect the
+         image below resolves to, so the placeholder doesn't jump on load. */
+      background-image: var(--lightbox-placeholder, none);
+      background-size: contain;
+      background-position: center;
+      background-repeat: no-repeat;
+
+      /* `<wc-gallery>` assigns `view-transition-name: lightbox-active` to the
+         slide's `<img>` and the originating thumbnail at the moment it opens,
+         then clears it on close — that shared, runtime-assigned name is what
+         morphs one into the other. `match-element` (the auto-generated
+         per-element name) does NOT do this: it names each element uniquely,
+         so it can never morph a thumbnail into a different `<img>`. Do not put
+         a `view-transition-name` on the image here statically. */
+    }
+
+    /* THE FIX. carousel.css sizes the media to fill its box
+       (`inline-size`/`block-size: 100%`) so `object-fit: cover` has something
+       to crop — right for a thumbnail strip, backwards for a lightbox, where
+       the BOX should instead be sized to the image. With both axes `auto` and
+       both maxes set, the browser's replaced-element min/max algorithm
+       (CSS 2.1 §10.4) does a ratio-preserving clamp against whichever axis
+       binds — so the element's border box IS the visible image, with no
+       cyclic percentages and no dependency on how many rows the grid above
+       ends up with. That also matters for two things beyond sizing: it's the
+       `view-transition-name` target (WCGallery.ts), so the morph must not
+       land on an oversized box; and it keeps the letterbox area click-through
+       for the dialog's `closedby="any"`.
+
+       A DESCENDANT selector, not a direct-child `>`: an `ImageMetadata` src
+       renders `<picture><img></picture>` (ResponsiveImage.astro), and
+       carousel.css's own rule only reaches the non-replaced `<picture>` via
+       `> :is(img, picture, …)` — `object-fit` is a no-op there, and the real
+       `<img>` inside gets no sizing at all. This selector covers both the
+       bare-`<img>` demo and the `<picture>`-wrapped case. */
+    .carousel__media :is(img, picture) {
+      /* Undo carousel.css's `inline-size/block-size: 100%` — a fixed size on
+         either axis would defeat the ratio-preserving clamp below. */
+      inline-size: auto;
+      block-size: auto;
+      max-inline-size: 100%; /* of the padded slide, i.e. ~90dvw */
+      /* The one cap that actually binds (not a percentage, so not cyclic).
+         `--lightbox-caption-space` is 0 by default — nothing here uses a
+         caption today, but `<figcaption>` stacks below the image inside this
+         same box (Gallery.astro), so a captioned gallery must set it to
+         reserve room or the slide can exceed the viewport by that height. */
+      max-block-size: calc(
+        100dvh - 2 * var(--lightbox-pad-block) - var(--lightbox-caption-space, 0px)
+      );
+      margin-inline: auto; /* centre in the full-width figure; vertical centring is the slide's align-content */
+    }
+
+    .carousel__caption {
+      color: inherit;
+    }
   }
 
   .lightbox-dialog__close {
@@ -77,6 +197,9 @@ dialog.lightbox-dialog {
     display: flex;
     align-items: center;
     justify-content: center;
+    text-decoration: none;
+    font-size: 1.5rem;
+    line-height: 1;
     transition: background-color 0.15s ease;
     z-index: 10;
 
@@ -88,50 +211,4 @@ dialog.lightbox-dialog {
       outline-offset: 2px;
     }
   }
-
-  .lightbox-dialog__nav {
-    position: absolute;
-    inset-block: 0;
-    display: flex;
-    align-items: center;
-    padding: 1rem;
-
-    &[data-direction='prev'] {
-      inset-inline-start: 0;
-    }
-    &[data-direction='next'] {
-      inset-inline-end: 0;
-    }
-  }
-
-  .lightbox-dialog__nav-button {
-    inline-size: 3rem;
-    block-size: 3rem;
-    padding: 0;
-    background: var(--lightbox-nav-bg, transparent);
-    border: none;
-    border-radius: 50%;
-    color: inherit;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color 0.15s ease;
-
-    &:hover {
-      background: var(--lightbox-nav-hover-bg, oklch(1 0 0 / 0.15));
-    }
-    &:disabled {
-      opacity: 0.3;
-      cursor: not-allowed;
-    }
-  }
-
-  .lightbox-dialog__caption {
-    position: absolute;
-    inset-block-end: 0;
-    inset-inline: 0;
-    padding: 1rem 2rem;
-    text-align: center;
-  }
 }

package/assets/css/patterns/review.css

@@ -0,0 +1,91 @@
+/**
+ * Review — the `.review` card's structure only.
+ *
+ * Box chrome (border/padding/background/shadow) is CONFIG-GENERATED
+ * (`patterns.items.review` in design-system.json), the same split `card.css`
+ * documents. This partial holds what the framework owns: the internal layout —
+ * rating, identity, body, reply, source link.
+ */
+
+.review {
+  .review__header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .review__avatar {
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
+  /* Shown instead of `.review__avatar` when `avatars` is off (the default) — see
+     the config-generated pattern's rationale in AGENTS.md's Reviews section. */
+  .review__initials {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    border-radius: 50%;
+    background: var(--color-bg-neutral-muted);
+    color: var(--color-text-neutral);
+    font-weight: 600;
+    font-size: 0.875em;
+  }
+
+  .review__identity {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .review__author {
+    font-weight: 600;
+  }
+
+  .review__date {
+    font-size: 0.875em;
+    opacity: 0.7;
+  }
+
+  .review__stars {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.125rem;
+    margin-inline-start: auto;
+  }
+
+  .review__star--empty {
+    opacity: 0.35;
+  }
+
+  .review__body {
+    margin: 0;
+  }
+
+  .review__reply {
+    margin-inline-start: 1.5rem;
+    padding-inline-start: 1rem;
+    border-inline-start: 2px solid var(--color-bg-surface-muted);
+  }
+
+  .review__reply-author {
+    font-weight: 600;
+    font-size: 0.875em;
+  }
+
+  .review__source {
+    font-size: 0.875em;
+    align-self: start;
+  }
+}
+
+.review-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}