@getvitops/astro 5.0.0 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,234 @@
 # @getvitops/astro
 
+## 7.0.0
+
+### Major Changes
+
+- aad43b7: A gallery/lightbox that is a fully working modal lightbox with **zero JavaScript**, plus
+  `ImageMetadata` support in `<Carousel />`.
+
+  Only `@getvitops/core`, `generator` and `astro` change here. This changeset makes **no
+  consumer-facing change** to `utils`, `cli` or `vite` — they still ship in this release because
+  the six share one version, but from a different changeset (`localbusiness-schema.md`) that
+  touches `utils` and `generator` for an unrelated reason.
+
+  **Breaking — `css`/`bricks`/`tailwind` (all formats):** the `.lightbox` thumbnail grid is now
+  `.gallery`, so it composes with the dialog it opens (`.lightbox-dialog`, unchanged) rather than
+  sharing its name. `vitops lint --fix` cannot cover this: `movedTokens()` renames colour token
+  names only, and there is no class-rename mechanism in `@getvitops/cli`. Migrate by hand:
+
+  | Old                | New               |
+  | ------------------ | ----------------- |
+  | `.lightbox`        | `.gallery`        |
+  | `.lightbox__item`  | `.gallery__item`  |
+  | `.lightbox__thumb` | `.gallery__thumb` |
+
+  `.lightbox-dialog` and its `__content` / `__image` / `__close` / `__nav` / `__nav-button` /
+  `__caption` parts are unchanged.
+
+  **Added — `css`/`bricks`/`tailwind` (all formats):** `patterns/gallery.css` — the `.gallery` grid,
+  now on the token cascade (`--br-gallery` etc.) it only half-had before.
+
+  **Added — `wc`:** `<wc-gallery>` (`@getvitops/core/elements`). Wraps a `.gallery` grid of
+  `command="show-modal"` triggers and the `.lightbox-dialog`s they open. With no JS, each trigger is
+  a real Invoker Commands button for its own dialog — open and close both work. `<wc-gallery>` adds
+  what the fallback deliberately cannot contain: prev/next, arrow keys, swipe (horizontal to step,
+  vertical to dismiss), an announced image counter, neighbour preload, and a thumbnail → full-image
+  `document.startViewTransition` morph where supported. Prev/next can't exist in the fallback — a
+  second `show-modal` invoker inside an already-open dialog stacks a second modal rather than
+  replacing the first — so it is generated by the element, never authored, the same rule
+  `<wc-tree>`'s search field follows.
+
+  **Added — `astro`:** `<Gallery />` (`@getvitops/astro/components/Gallery.astro`) — emits a
+  `.gallery` grid plus one `.lightbox-dialog` per image and its own `<wc-gallery>`; do not wrap it in
+  one. Images take `string | ImageMetadata`, rendered through a new internal `<ResponsiveImage />`
+  helper: a plain string renders the same raw `<img>` every component here used before, unchanged;
+  an `astro:assets` import renders through `<Picture />` for AVIF/WebP derivatives.
+
+  **Changed — `astro`:** `<Carousel />`'s `CarouselSlide.src` now also accepts `ImageMetadata`,
+  through the same `<ResponsiveImage />` helper, plus a new `formats` prop. Every existing
+  string-`src` call site renders byte-identical markup — purely additive.
+
+  **Added — `wc`:** the Invoker Commands API (`<button command commandfor>`) polyfill
+  (`invokers-polyfill`, feature-detected via `@getvitops/core/polyfills`) — resolves the TODO
+  `polyfills.ts` carried since 4.0. `<wc-gallery>`'s fallback and `<Drawer />` (which already emitted
+  `command="show-modal"` unconditionally) both now get real cross-browser coverage rather than
+  depending on it being "too new to rely on yet." Fetched only in an engine that doesn't support the
+  API natively, so a current browser downloads none of it.
+
+  **Migration:** rename `.lightbox` → `.gallery` and `.lightbox__item`/`.lightbox__thumb` →
+  `.gallery__item`/`.gallery__thumb` wherever authored (see table above); everything else is
+  additive. Consumers using the CSS pattern with no JS need no other change — the fallback markup is
+  unchanged in shape, only the class names moved.
+
+### Minor Changes
+
+- **Added — `utils`.** `itemListGraph()`, a pure schema.org `ItemList` JSON-LD builder — a sibling
+  of `breadcrumbGraph()`/`localBusinessGraph()`. Extracted from `@getvitops/astro`'s `<Carousel />`
+  so any consumer can build a valid `ItemList` (Google's "all-in-one page" carousel format:
+  `ListItem.item` carrying `@type`/`name`/`url`) for content that isn't one of the six Google
+  carousel rich-result types (`Article`/`Recipe`/`Movie`/`Course`/`Restaurant`/`Product`) — the
+  entity type is no longer constrained to that set.
+
+  **Changed — `astro`.** `<Carousel />`'s `CarouselItem['type']` now accepts any string, not just
+  the six carousel rich-result types — non-breaking, the union only widens. It's a thin wrapper
+  over `itemListGraph()` now; behaviour for existing callers is unchanged.
+
+  No consumer-facing change in this release outside `utils` and `astro` — `generator`, `cli` and
+  `vite` still ship in this release only because the six share one version.
+
+  **Fixed — `core` (`css`/`bricks`/`tailwind` build output, all formats).** The CSS and HTML
+  authored inside Lit's `css`/`html` tagged templates in `<wc-*>` component sources previously
+  survived JS minification verbatim — a JS minifier treats a template literal's cooked text as
+  opaque, so `elements.js` shipped ~690 lines of indented, unminified CSS (and the equivalent in
+  HTML) inside an otherwise-minified 886-line file. Two source-level build transforms now collapse
+  both before bundling: `postcss` + `postcss-lit` + `cssnano` for `css` templates, `minify-html-literals`
+  (`conservativeCollapse: true`, so whitespace between inline elements in light-DOM components never
+  collapses to zero) for `html` templates. `elements.js` drops from 886 lines / ~101 KB to 49 lines /
+  ~96 KB. A second build step deduplicates the 17 `@license` comment blocks (only 6 are textually
+  distinct) down to one verbatim copy of each — required by BSD-3/MIT/Apache-2.0's notice-retention
+  terms either way, just no longer repeated once per source file that carries it. No API change;
+  build-time only, and none of the added tooling (`postcss`, `postcss-lit`, `cssnano`,
+  `minify-html-literals`) is a runtime or published dependency.
+
+- 7b391b3: Add `<wc-counter>` — animates a number from a start value to the value already in its fallback
+  text, on intersection. The stat/percentage figure in a media tile ("0 → 94%"), a KPI row, a
+  metrics band.
+
+  No consumer-facing change in this release outside `core`, `generator` and `astro` — `utils`,
+  `cli` and `vite` still ship in this release only because the six share one version.
+
+  **Added — `css`/`bricks`/`tailwind` (all formats):** `.counter` / `.counter__value` /
+  `.counter__presentation` (`patterns/counter.css`). A registered `--_n` custom property drives the
+  count via a plain CSS `@keyframes` animation — the interpolation and the easing curve are CSS's,
+  never duplicated in JS.
+
+  **Added — `wc` (`@getvitops/core`).** `<wc-counter>` parses the final value out of its own
+  `.counter__value` fallback text — never from a separate attribute, so the no-JS reading and the
+  animated reading can't disagree — and renders it back through `Intl.NumberFormat`, seeded from the
+  fallback text's own separators (a grouped `1,284` never animates through ungrouped intermediates).
+  `counter()` cannot do that part: no decimals, no locale grouping, which is the one thing here that
+  genuinely needs JavaScript.
+  - Triggers on intersection via a single shared `IntersectionObserver`, not on upgrade — a counter
+    below the fold that finished before the visitor scrolled to it would have done nothing.
+  - `prefers-reduced-motion: reduce` means don't animate at all, checked before the observer is even
+    created, with `patterns/counter.css`'s own reduced-motion query as a second belt.
+  - The accessible name stays the final value for the whole animation: `.counter__value` is toggled
+    to the framework's `.sr-only` utility while running, never hidden — `display: none`/`visibility:
+hidden` would pull it out of the accessible-name computation along with the visual hiding, and a
+    screen reader must never be read ~60 intermediate numbers. The animated text lives in a separate
+    `aria-hidden` presentation span it never reaches.
+  - `data-from` (default `0`), `data-duration` (ms, default `1200`), `data-easing` (`linear` |
+    `ease-in` | `ease-out` | `float-sine` | `float-bounce` — maps onto the real
+    `--custom-ease-*`/`--ease-float-*` tokens, so a curve edited in `animation.css` cannot drift out
+    of step with this element), `data-decimals` (inferred from the fallback text when absent).
+  - Never leaves an intermediate value on screen as the resting state: disconnecting mid-animation
+    restores the fallback immediately, and it was never mutated in the first place — only the
+    presentation span was ever written to.
+
+  **Added — `astro`.** `<Counter value="94%" />` emits its own `<wc-counter>` — do NOT wrap it in
+  one, same rule as `Gallery`/`Carousel`/`Tree`. `value` is the only source of the final figure;
+  there is no separate `to` prop, for the same one-source-of-truth reason the element itself parses
+  its fallback rather than taking a duplicate attribute. `enhance={false}` emits the bare fallback
+  for a page that cannot run `elements.js`.
+
+### Patch Changes
+
+- 2b50f9e: Extract the LocalBusiness JSON-LD builder out of `<LocalBusiness />` into a reusable
+  `localBusinessGraph()`, and add the location fields listing platforms (GBP, Bing Places, Apple
+  Business Connect) actually need.
+
+  **Added — `@getvitops/utils`.** `localBusinessGraph(options)` (+ its `LocalBusinessGraphOptions`,
+  `OpeningHoursSpecification` and `SpecialHoursSpecification` types) is now exported from
+  `@getvitops/utils`, alongside the existing `organizationGraph`/`articleGraph`/`breadcrumbGraph`/
+  `faqGraph` builders — same module, same shape, usable anywhere a JSON-LD graph is built outside an
+  Astro component.
+
+  **Added — `authoring`/`config` (`@getvitops/generator`).** Four new `organization.locations.<slug>`
+  fields: `hoursSpecial` (dated deviations from the recurring `hours` — holiday hours, a one-off
+  closure), `photos` (`ImageRefSchema[]` → JSON-LD `image`), `sameAs` (this location's own listing
+  URLs, distinct from `organization.sameAs`, which is the company overall), and `listings` (external
+  listing ids keyed by platform — `google` | `bing` | `apple` — not consumed by the generator today;
+  recorded so a future listings-sync command has a stable id to match against).
+
+  **Changed — `astro`.** `<LocalBusiness />`'s `Props` type is now `LocalBusinessGraphOptions`
+  (re-exported, not redefined) rather than a local interface that had drifted from what the builder
+  actually accepted. No markup or prop-name change for an existing consumer.
+
+- Updated dependencies [c0c092b]
+- Updated dependencies
+- Updated dependencies [aad43b7]
+- Updated dependencies [2b50f9e]
+- Updated dependencies [a6a8b39]
+- Updated dependencies [7b391b3]
+- Updated dependencies [eb9ac79]
+  - @getvitops/utils@7.0.0
+  - @getvitops/generator@7.0.0
+  - @getvitops/core@7.0.0
+  - @getvitops/vite@7.0.0
+
+## 6.0.0
+
+### Major Changes
+
+- Carousel rework: a scroll strip that is operable and discoverable with no JS in every engine, and
+  real controls where the scroll-marker pseudo-elements are missing.
+
+  `::scroll-button()`, `::scroll-marker` and `::scroll-marker-group` are still Chromium-only, and
+  there is no usable polyfill (the one prototype targets the superseded syntax and only re-parses
+  inline `<style>` elements). So the carousel no longer assumes them: `<wc-carousel>` builds real
+  prev/next `<button>`s and a real dot nav where they are absent, styled from the same declarations
+  as the native ones. Which branch is live is decided **by the stylesheet** — one `@supports` sets
+  `--carousel-native-nav: 1` and the element reads it back — so the condition is written once and
+  the two cannot disagree.
+
+  **Breaking — `.carousel` is now a shell and `.carousel__track` is the scroller** (all formats). The
+  hint and the controls need a home outside the scrollport, and absolute positioning against the
+  shell replaces `position: fixed` + `anchor-name`/`position-area`, which pinned controls to a
+  viewport corner in any engine without anchor positioning. The 5.x single-element form is still
+  styled via `:not(:has(> .carousel__track))` and is promoted by the element at runtime, but it is
+  deprecated: wrap your slides in `<ul class="carousel__track">`.
+
+  **Breaking — looping is opt-in.** `<wc-carousel loop>` clones the slides; the default no longer
+  does. Cloning triples the markup, duplicates every image element and makes the scrollbar report 3×
+  the real content. `autoplay` implies `loop`. Migration: add `loop`.
+
+  **Breaking — `[part='autoplay']` is now `.carousel__autoplay`** (aliased for one release; `part`
+  only crosses a shadow boundary and this element is light DOM, so it was never a part). The button
+  is also a child of the shell rather than the track, where it used to occupy a slide-width column.
+
+  **Breaking — the host role is `group`, not `region`.** `region` is a landmark, so every carousel
+  grew an entry in the landmark list. Pass `landmark` to `<Carousel />` where it really is one.
+
+  **Changed (visual)** — the scrollbar is visible by default (`scrollbar-width: thin`, was `none`)
+  and a "Scroll for more" hint renders above the strip; both dim once the visitor scrolls, via a
+  scroll-progress timeline where available and a `data-scrolled` attribute otherwise. Opt out with
+  `.carousel--no-scrollbar` and `hint={false}`. `@getvitops/core`'s `global.css` also gains a narrow
+  media reset (`max-inline-size: 100%` on replaced elements, `block-size: auto` on `img`/`video`) —
+  deliberately without `display: block`, which would change inline images in prose.
+
+  **Added** — `@getvitops/astro/components/Carousel.astro`, a tier-3 wrapper emitting semantic
+  `<ul>`/`<li>`/`<figure>` markup with the right per-slide image priorities: the first slide eager
+  and high (the LCP candidate), the rest `lazy`/`low`/`async`. `loading="lazy"` is honoured for
+  images clipped by a horizontal scroll container, so off-screen slides defer with no JavaScript at
+  all. Also new: `carousel--markers-below` and `carousel--no-scrollbar`, and
+  `--carousel-slide-aspect`, which keeps slide heights equal whatever each image's aspect ratio is.
+
+  **Fixed** — `::scroll-button()` glyphs sat off-centre in their circles (`global.css`'s `*` reset
+  does not reach a pseudo-element, so the button was `content-box` with the UA's `padding: 1px 6px`
+  and `inline-size` + `aspect-ratio` sized an ellipse); the hover state was a no-op (it set the same
+  token as the base rule); slide heights varied with each image's aspect ratio; navigation used
+  physical `left`/`right` and so put "previous" on the wrong side in RTL; cloned slides duplicated
+  their `id`s; and `scrollBy(clientWidth)` overshot whenever `--carousel-slide-size` was not `100%`.
+
+### Patch Changes
+
+- Updated dependencies
+  - @getvitops/core@6.0.0
+  - @getvitops/generator@6.0.0
+  - @getvitops/vite@6.0.0
+  - @getvitops/utils@6.0.0
+
 ## 5.0.0
 
 ### Major Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getvitops/astro",
-  "version": "5.0.0",
+  "version": "7.0.0",
   "description": "Astro integration for the Vitops design system — favicons/PWA, web-component scripts, and CSS, via a getvitops() integration + <Head /> component.",
   "license": "MIT",
   "files": [
@@ -16,6 +16,10 @@
     "src/ads.ts",
     "src/components/Subgrid.astro",
     "src/components/Cards.astro",
+    "src/components/Carousel.astro",
+    "src/components/Gallery.astro",
+    "src/components/ResponsiveImage.astro",
+    "src/components/Counter.astro",
     "src/components/NodeRenderer.astro",
     "src/components/WebComponentLoader.astro",
     "src/components/Icon.astro",
@@ -58,6 +62,9 @@
     "./Tracking.astro": "./src/components/Tracking.astro",
     "./components/Subgrid.astro": "./src/components/Subgrid.astro",
     "./components/Cards.astro": "./src/components/Cards.astro",
+    "./components/Carousel.astro": "./src/components/Carousel.astro",
+    "./components/Gallery.astro": "./src/components/Gallery.astro",
+    "./components/Counter.astro": "./src/components/Counter.astro",
     "./components/NodeRenderer.astro": "./src/components/NodeRenderer.astro",
     "./components/WebComponentLoader.astro": "./src/components/WebComponentLoader.astro",
     "./components/Icon.astro": "./src/components/Icon.astro",
@@ -75,10 +82,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@getvitops/core": "5.0.0",
-    "@getvitops/generator": "5.0.0",
-    "@getvitops/utils": "5.0.0",
-    "@getvitops/vite": "5.0.0"
+    "@getvitops/core": "7.0.0",
+    "@getvitops/utils": "7.0.0",
+    "@getvitops/generator": "7.0.0",
+    "@getvitops/vite": "7.0.0"
   },
   "devDependencies": {
     "@astrojs/sitemap": "^3.7.3",

package/src/components/Carousel.astro

@@ -0,0 +1,241 @@
+---
+/**
+ * A scroll-snap carousel that works with no JavaScript, in every engine.
+ *
+ * Tier-3 in the framework's terms — an authoring convenience that emits the right
+ * `.carousel` markup and requires **no runtime JS**. What it renders stands on its
+ * own:
+ *
+ *   - the slides are a real `<ul>`/`<li>`, so assistive tech announces list
+ *     position and count;
+ *   - the scroller carries `tabindex="0"`, so arrow keys scroll it — the keyboard
+ *     route the platform gives any focusable scroll container, and the reason
+ *     inclusive-components.design/a-content-slider/ focuses the scroller rather
+ *     than building a widget;
+ *   - `scroll-snap` and (in Chromium today) `::scroll-button()` / `::scroll-marker`
+ *     give buttons and dots with no script at all;
+ *   - a visible scrollbar and a "Scroll for more" hint say the strip scrolls, which
+ *     was the missing signal wherever those pseudo-elements are absent;
+ *   - off-screen images are lazy **without JS**: `loading="lazy"` is honoured for
+ *     images clipped by a horizontal scroll container, so there is no `data-src` +
+ *     IntersectionObserver dance to fail.
+ *
+ * **This component emits its own `<wc-carousel>`** — do NOT wrap it in one. That is
+ * the tier-3 rule ("the wrapper emits its `<wc-*>` tag with the accessible fallback
+ * inside"), and `Cards.astro`, `Tree.astro` and `CookieConsent.astro` all do the
+ * same. The element defers to an enclosing one, so a nested pair degrades to a
+ * no-op rather than cloning the same slides twice, but the single call is the
+ * intended shape.
+ *
+ * `<wc-carousel>` adds the opt-in cloned loop, autoplay, and — only where the
+ * browser lacks the scroll-marker pseudo-elements — real prev/next buttons and a
+ * real dot nav. If it never loads, that enhancement is all that is missing, which
+ * is why `enhance={false}` is a supported way to get the bare fragment.
+ *
+ * Three deliberate a11y choices:
+ *
+ *   - **The group role is on the shell, the list role stays on the `<ul>`.** The
+ *     inclusive-components article puts `role="region"` on the scroller because
+ *     there the scroller *is* the container; a shell lets us have real list
+ *     semantics *and* a named group. `group` rather than `region` because `region`
+ *     is a landmark and four carousels would grow four landmark entries — pass
+ *     `landmark` when the carousel really is a page-level landmark.
+ *   - **The visible hint is `aria-hidden`, and a separate `.sr-only` element is the
+ *     description.** The hint fades once the visitor scrolls, so as a description
+ *     it would go stale; and its text is about a pointer affordance, whereas what a
+ *     keyboard user needs described is the arrow keys. One string cannot honestly
+ *     be both.
+ *   - **`aria-describedby` sits on the `<ul>`**, which is the focusable thing, since
+ *     a description is announced on focus.
+ */
+import type { HTMLAttributes } from 'astro/types';
+import ResponsiveImage from './ResponsiveImage.astro';
+import type { ImageFormat } from './ResponsiveImage.astro';
+
+export interface CarouselSlide {
+  /** A plain string renders a raw `<img>`; an `astro:assets` import renders through
+   *  `<Picture />` for AVIF/WebP derivatives — see `ResponsiveImage.astro`. */
+  src: string | ImageMetadata;
+  alt: string;
+  /**
+   * Intrinsic size. Emitted as `width`/`height` so the UA derives an aspect ratio
+   * and the slide reserves space before the image lands. When unknown,
+   * `--carousel-slide-aspect` still reserves the box, so CLS is covered either way.
+   * Only meaningful for a plain-string `src` — an `ImageMetadata` source's natural
+   * size is already known.
+   */
+  width?: number;
+  height?: number;
+  /** Only meaningful for a plain-string `src` — see `ResponsiveImage.astro`. */
+  srcset?: string;
+  sizes?: string;
+  caption?: string;
+}
+
+export interface Props extends Omit<HTMLAttributes<'div'>, 'slot'> {
+  /** Accessible name. Required — an unnamed group is unfindable. */
+  label: string;
+  /** Image slides. Omit and use the default slot for richer slides. */
+  slides?: CarouselSlide[];
+  /** Passed to every `<Picture formats>` for an `ImageMetadata` slide. Default `['avif', 'webp']`. */
+  formats?: ImageFormat[];
+  /** Milliseconds between slides. Implies `loop`. */
+  autoplay?: number;
+  /**
+   * Clone the slides for a seamless infinite strip. **Off by default:** it triples
+   * the DOM and duplicates every image element, makes the scrollbar report 3× the
+   * real content, and most carousels do not want it.
+   */
+  loop?: boolean;
+  /** Prev/next controls. */
+  buttons?: boolean;
+  /** Dot navigation. */
+  markers?: boolean;
+  /** Dots below the strip rather than overlaid on it. */
+  markersBelow?: boolean;
+  /** CSS multicol paging. Chromium-only; degrades to a plain strip elsewhere. */
+  columns?: number;
+  /** Dim and inert the off-screen slides. */
+  inert?: boolean;
+  /** `scroll-snap-stop: always` — never skip a slide in one fling. */
+  forceStop?: boolean;
+  /** Hide the scrollbar. Costs the no-JS "this scrolls" signal; be deliberate. */
+  noScrollbar?: boolean;
+  /** `--carousel-slide-aspect`, the ratio every slide's media box takes. */
+  aspect?: string;
+  /** Visible affordance text. `false` removes it. */
+  hint?: string | false;
+  /** Expose as a landmark (`role="region"`) rather than `role="group"`. */
+  landmark?: boolean;
+  /**
+   * Emit the `<wc-carousel>` wrapper (default `true`).
+   *
+   * Set false where the element cannot run — an email, a PDF, a page that does not
+   * load `elements.js`. The carousel is unchanged; only the enhancement layer goes,
+   * so nothing is lost but the loop, autoplay and the non-Chromium control set.
+   */
+  enhance?: boolean;
+  /**
+   * Id prefix for the slide ids and the description. Defaults to a slug of
+   * `label`. Astro has no `useId`, and a random one would change on every build —
+   * so this is derived, deterministic and overridable when two carousels on a page
+   * share a label.
+   */
+  id?: string;
+}
+
+const {
+  label,
+  slides = [],
+  formats = ['avif', 'webp'],
+  autoplay,
+  loop = false,
+  buttons = true,
+  markers = true,
+  markersBelow = false,
+  columns,
+  inert = false,
+  forceStop = false,
+  noScrollbar = false,
+  aspect = '16 / 9',
+  hint = 'Scroll for more',
+  landmark = false,
+  enhance = true,
+  id,
+  class: className,
+  role,
+  style,
+  ...rest
+} = Astro.props;
+
+const uid =
+  id ??
+  `carousel-${
+    label
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-|-$/g, '') || 'x'
+  }`;
+
+const classes = [
+  'carousel',
+  buttons && 'carousel--scroll-buttons',
+  markers && 'carousel--scroll-markers',
+  markersBelow && 'carousel--markers-below',
+  columns && 'carousel--auto-pages',
+  inert && 'carousel--inert',
+  forceStop && 'carousel--force-stop',
+  noScrollbar && 'carousel--no-scrollbar',
+  className,
+];
+
+const vars = [
+  `--carousel-slide-aspect:${aspect}`,
+  columns ? `--carousel-columns:${columns}` : '',
+  style ?? '',
+]
+  .filter(Boolean)
+  .join(';');
+
+const Shell = enhance ? 'wc-carousel' : 'div';
+---
+
+<Shell
+  class:list={classes}
+  role={role ?? (landmark ? 'region' : 'group')}
+  aria-roledescription="carousel"
+  aria-label={label}
+  loop={enhance && (loop || (autoplay ?? 0) > 0) ? '' : undefined}
+  autoplay={enhance && autoplay ? autoplay : undefined}
+  style={vars}
+  {...rest}
+>
+  <ul
+    class="carousel__track"
+    role="list"
+    tabindex="0"
+    aria-label={label}
+    aria-describedby={`${uid}-desc`}
+  >
+    {
+      slides.map((slide, i) => (
+        <li class="carousel__slide" id={`${uid}-slide-${i + 1}`}>
+          <figure class="carousel__media">
+            {/* The first slide is the LCP candidate, so it is eager and high
+                priority; every later one is lazy, low and async. A horizontal
+                scroll container clips them, and `loading="lazy"` is honoured for
+                that, so this is genuinely JS-free deferral. `decoding` is left
+                unset on the first: `sync` can block the main thread, and the UA's
+                own choice for an eager LCP image is better than ours. */}
+            <ResponsiveImage
+              src={slide.src}
+              alt={slide.alt}
+              formats={formats}
+              srcset={slide.srcset}
+              sizes={slide.sizes}
+              width={slide.width}
+              height={slide.height}
+              loading={i === 0 ? 'eager' : 'lazy'}
+              fetchpriority={i === 0 ? 'high' : 'low'}
+              decoding={i === 0 ? undefined : 'async'}
+            />
+            {slide.caption && (
+              <figcaption class="carousel__caption font-caption">{slide.caption}</figcaption>
+            )}
+          </figure>
+        </li>
+      ))
+    }
+    <slot />
+  </ul>
+  {
+    hint !== false && (
+      <p class="carousel__hint font-footnote" aria-hidden="true">
+        {hint}
+      </p>
+    )
+  }
+  <p id={`${uid}-desc`} class="sr-only">
+    Use the left and right arrow keys, or scroll sideways, to move between slides.
+  </p>
+</Shell>

package/src/components/Counter.astro

@@ -0,0 +1,80 @@
+---
+/**
+ * A `.counter` figure that counts up from a start value to `value` once it
+ * scrolls into view — the stat/percentage figure in a media tile ("0 → 94%"),
+ * a KPI row, a metrics band.
+ *
+ * Tier-3 in the framework's terms — an authoring convenience that emits the
+ * right `.counter` markup and needs no runtime JS to be usable: with no JS,
+ * `value` is simply the number on the page, in plain semantic text. Nothing is
+ * missing, there is only no count-up.
+ *
+ * **This component emits its own `<wc-counter>`** — do NOT wrap it in one.
+ * That is the tier-3 rule ("the wrapper emits its `<wc-*>` tag with the
+ * accessible fallback inside"), and `Cards.astro`, `Carousel.astro`,
+ * `Tree.astro` and `Gallery.astro` all do the same. The element defers to an
+ * enclosing one, so a nested pair degrades to a no-op rather than
+ * double-enhancing, but the single call is the intended shape.
+ *
+ * `<wc-counter>` adds the count-up itself, triggered once the figure scrolls
+ * into view and skipped entirely under `prefers-reduced-motion: reduce`. If it
+ * never loads, that animation is all that's missing — set `enhance={false}`
+ * for the bare fragment (an email, a PDF, a page that doesn't load
+ * `elements.js`).
+ *
+ * `value` is the ONLY source of the final figure — there is no separate `to`
+ * prop. `<wc-counter>` parses it back out of the rendered text at runtime, so
+ * this component cannot render one number while claiming to animate to a
+ * different one.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+export interface Props extends Omit<HTMLAttributes<'span'>, 'slot'> {
+  /** The finished figure, e.g. `"94%"`, `"$1,234.50"`, `"1,284×"`. */
+  value: string | number;
+  /** Starting value the animation counts from. Default `0`. */
+  from?: number;
+  /** Animation duration in ms. Default `1200`. */
+  duration?: number;
+  /**
+   * A named curve from the framework's animation tokens — `--custom-ease-in`,
+   * `--custom-ease-out`, `--ease-float-sine`, `--ease-float-bounce` — or
+   * `"linear"`. Default `--custom-ease-out`. An unrecognised name is ignored.
+   */
+  easing?: 'linear' | 'ease-in' | 'ease-out' | 'float-sine' | 'float-bounce';
+  /** Decimal places to render. Inferred from `value`'s own text when absent. */
+  decimals?: number;
+  /**
+   * Emit the `<wc-counter>` wrapper (default `true`).
+   *
+   * Set false where the element cannot run — an email, a PDF, a page that
+   * does not load `elements.js`. `value` is unchanged; only the count-up
+   * animation goes.
+   */
+  enhance?: boolean;
+}
+
+const {
+  value,
+  from,
+  duration,
+  easing,
+  decimals,
+  enhance = true,
+  class: className,
+  ...rest
+} = Astro.props;
+
+const Shell = enhance ? 'wc-counter' : 'span';
+---
+
+<Shell
+  class:list={['counter', className]}
+  data-from={enhance ? from : undefined}
+  data-duration={enhance ? duration : undefined}
+  data-easing={enhance ? easing : undefined}
+  data-decimals={enhance ? decimals : undefined}
+  {...rest}
+>
+  <span class="counter__value">{value}</span>
+</Shell>

package/src/components/Gallery.astro

@@ -0,0 +1,210 @@
+---
+/**
+ * A `.gallery` thumbnail grid whose triggers open per-image `.lightbox-dialog`s —
+ * a fully working modal lightbox with zero JavaScript.
+ *
+ * Tier-3 in the framework's terms — an authoring convenience that emits the right
+ * `.gallery` / `.lightbox-dialog` markup and needs no runtime JS to be usable:
+ *
+ *   - each thumbnail is a real `command="show-modal" commandfor="…"` invoker
+ *     button for its own `<dialog>`, so open and close both work with the
+ *     Invoker Commands API alone (universal via `@getvitops/core/polyfills`);
+ *   - the dialogs are real `<dialog closedby="any">`, so Escape and a backdrop
+ *     click close them with no script either;
+ *   - what's missing without JS is prev/next — deliberately, because a
+ *     `command="show-modal"` button inside an already-open dialog would stack a
+ *     second modal on top rather than replace the first. That control is
+ *     generated by `<wc-gallery>`, never authored, the same rule `<wc-tree>`'s
+ *     search field follows: a control that does nothing is worse than none.
+ *
+ * **This component emits its own `<wc-gallery>`** — do NOT wrap it in one. That
+ * is the tier-3 rule ("the wrapper emits its `<wc-*>` tag with the accessible
+ * fallback inside"), and `Cards.astro`, `Carousel.astro` and `Tree.astro` all do
+ * the same. The element defers to an enclosing one, so a nested pair degrades to
+ * a no-op rather than double-enhancing, but the single call is the intended shape.
+ *
+ * `<wc-gallery>` adds prev/next, arrow keys, swipe, an image counter, neighbour
+ * preload and a thumbnail → full-image view-transition morph. If it never loads,
+ * that enhancement is all that's missing — set `enhance={false}` for the bare
+ * fragment (an email, a PDF, a page that doesn't load `elements.js`).
+ *
+ * Images take `string | ImageMetadata` via `<ResponsiveImage />`: a plain string
+ * renders a raw `<img>` (unchanged from before `ImageMetadata` support existed);
+ * an `astro:assets` import renders through `<Picture />` for AVIF/WebP
+ * derivatives. `formats` is passed straight through, including a value
+ * astro:assets doesn't recognise yet — see `ResponsiveImage.astro`'s docblock for
+ * why (no hard-coded closed format union).
+ */
+import type { HTMLAttributes } from 'astro/types';
+import ResponsiveImage from './ResponsiveImage.astro';
+import type { ImageFormat } from './ResponsiveImage.astro';
+
+export interface GalleryImage {
+  /** Full-size image, shown in the dialog. */
+  src: string | ImageMetadata;
+  /** Thumbnail. Defaults to `src` — for an `ImageMetadata` source, rendered at `thumbWidth`. */
+  thumb?: string | ImageMetadata;
+  /** Pixel width to request for the thumbnail derivative when `src`/`thumb` is `ImageMetadata`. */
+  thumbWidth?: number;
+  alt: string;
+  caption?: string;
+  width?: number;
+  height?: number;
+  /** Only meaningful when `src` is a plain string — see `ResponsiveImage.astro`. */
+  srcset?: string;
+  sizes?: string;
+}
+
+export interface Props extends Omit<HTMLAttributes<'div'>, 'slot'> {
+  /** Accessible name for the grid. Required — an unnamed group is unfindable. */
+  label: string;
+  images?: GalleryImage[];
+  /** Passed to every `<Picture formats>`. Default `['avif', 'webp']`. */
+  formats?: ImageFormat[];
+  /** `--gallery-thumb-size` — minimum thumbnail track width. Default `150px`. */
+  thumbSize?: string;
+  /** `--gallery-gap`. Default `0.5rem`. */
+  gap?: string;
+  /** `--gallery-aspect` — every thumbnail's box ratio. Default `1`. */
+  aspect?: string;
+  /** Wrap prev/next past the ends instead of stopping there. */
+  loop?: boolean;
+  /**
+   * Emit the `<wc-gallery>` wrapper (default `true`).
+   *
+   * Set false where the element cannot run — an email, a PDF, a page that does
+   * not load `elements.js`. The gallery is unchanged; only the enhancement
+   * layer goes, so nothing is lost but prev/next, swipe, the counter and the
+   * view-transition morph.
+   */
+  enhance?: boolean;
+  /**
+   * Id prefix for the dialog ids. Defaults to a slug of `label`. Astro has no
+   * `useId`, and a random one would change on every build — so this is derived,
+   * deterministic and overridable when two galleries on a page share a label.
+   */
+  id?: string;
+}
+
+const {
+  label,
+  images = [],
+  formats = ['avif', 'webp'],
+  thumbSize,
+  gap,
+  aspect,
+  loop = false,
+  enhance = true,
+  id,
+  class: className,
+  role,
+  style,
+  ...rest
+} = Astro.props;
+
+const uid =
+  id ??
+  `gallery-${
+    label
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-|-$/g, '') || 'x'
+  }`;
+
+const vars = [
+  thumbSize ? `--gallery-thumb-size:${thumbSize}` : '',
+  gap ? `--gallery-gap:${gap}` : '',
+  aspect ? `--gallery-aspect:${aspect}` : '',
+  style ?? '',
+]
+  .filter(Boolean)
+  .join(';');
+
+const Shell = enhance ? 'wc-gallery' : 'div';
+---
+
+<Shell
+  class:list={['gallery-shell', className]}
+  role={role ?? 'group'}
+  aria-label={label}
+  loop={enhance && loop ? '' : undefined}
+  style={vars}
+  {...rest}
+>
+  <ul class="gallery" role="list">
+    {
+      images.map((img, i) => {
+        const thumb = img.thumb ?? img.src;
+        return (
+          <li class="gallery__item">
+            <button
+              class="gallery__trigger"
+              type="button"
+              command="show-modal"
+              commandfor={`${uid}-img-${i}`}
+            >
+              <ResponsiveImage
+                src={thumb}
+                alt={img.alt}
+                formats={formats}
+                class="gallery__thumb"
+                width={typeof thumb === 'string' ? undefined : (img.thumbWidth ?? 400)}
+                loading={i === 0 ? 'eager' : 'lazy'}
+                fetchpriority={i === 0 ? 'high' : 'low'}
+                decoding={i === 0 ? undefined : 'async'}
+              />
+              <span class="visually-hidden">View full size</span>
+            </button>
+          </li>
+        );
+      })
+    }
+    <slot />
+  </ul>
+  {
+    images.map((img, i) => (
+      <dialog id={`${uid}-img-${i}`} class="lightbox-dialog" closedby="any" aria-label={img.alt}>
+        <div class="lightbox-dialog__content">
+          <ResponsiveImage
+            src={img.src}
+            alt={img.alt}
+            formats={formats}
+            class="lightbox-dialog__image"
+            width={img.width}
+            height={img.height}
+            srcset={img.srcset}
+            sizes={img.sizes}
+            loading="lazy"
+          />
+          {img.caption && <p class="lightbox-dialog__caption font-caption">{img.caption}</p>}
+        </div>
+        <button
+          class="lightbox-dialog__close"
+          type="button"
+          command="close"
+          commandfor={`${uid}-img-${i}`}
+          aria-label="Close"
+        >
+          &times;
+        </button>
+      </dialog>
+    ))
+  }
+</Shell>
+
+<style>
+  /* Icon-only trigger keeps its label for screen readers. Component-scoped
+     rather than the framework's `sr-only`: that one is in the generator's
+     TW_CLASH list, so the tailwind format ships no rule for it. */
+  .visually-hidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+</style>

package/src/components/ResponsiveImage.astro

@@ -0,0 +1,52 @@
+---
+/**
+ * Internal helper — turns `string | ImageMetadata` into markup, so `Gallery` and
+ * `Carousel` render images identically and cannot drift from each other.
+ *
+ * Not exported from `package.json`: it is packaging detail, not a pattern a
+ * consumer places on a page (same treatment as `TreeNode.astro`), so it carries
+ * no `TIERS` entry either — `tiers.test.ts` only scans `exports`.
+ *
+ * A plain `string` renders the raw `<img>` path every Astro component in this
+ * package already used before `ImageMetadata` support existed — unchanged, so
+ * every existing string-`src` call site keeps rendering byte-identical markup.
+ * An `ImageMetadata` (an `astro:assets` image import) renders through
+ * `<Picture />`, which is what gets a consumer AVIF/WebP derivatives instead of
+ * shipping whatever format the source file happens to be in.
+ *
+ * `formats` defaults to `['avif', 'webp']` and is passed straight through to
+ * `<Picture formats>` — including a value astro:assets doesn't recognise yet.
+ * That is deliberate: Astro's `VALID_OUTPUT_FORMATS` today is
+ * `avif/png/webp/jpeg/jpg/svg` (no JPEG-XL — the sharp service can't emit it), so
+ * hard-coding a closed format union here would need editing the day a service
+ * adds one. `ImageFormat` mirrors Astro's own `ImageOutputFormat`
+ * (`… | (string & {})`) for exactly that reason, defined locally rather than
+ * imported — `astro:assets`'s ambient module declaration doesn't export it, and
+ * reaching into `astro/dist/**` for a type is not a stable import.
+ */
+import { Picture } from 'astro:assets';
+import type { HTMLAttributes } from 'astro/types';
+
+export type ImageFormat = 'avif' | 'webp' | 'png' | 'jpeg' | 'jpg' | 'gif' | 'svg' | (string & {});
+
+export interface Props extends Omit<HTMLAttributes<'img'>, 'src' | 'alt'> {
+  src: string | ImageMetadata;
+  alt: string;
+  formats?: ImageFormat[];
+  /**
+   * Only meaningful when `src` is a plain `string` — Astro computes its own
+   * `srcset` for an `ImageMetadata` source and this is not merged with it.
+   */
+  srcset?: string;
+}
+
+const { src, alt, formats = ['avif', 'webp'], srcset, class: className, ...rest } = Astro.props;
+---
+
+{
+  typeof src === 'string' ? (
+    <img src={src} alt={alt} srcset={srcset} class={className} {...rest} />
+  ) : (
+    <Picture src={src} alt={alt} formats={formats} class={className} {...rest} />
+  )
+}

package/src/components/Tree.astro

@@ -10,9 +10,12 @@
  *     position and depth. A `<div>` soup looks identical and tells a screen-reader
  *     user nothing about where they are;
  *   - every branch is a native `<details>`/`<summary>`, so expanded state and
- *     keyboard operation come from the platform. No `role="tree"`, no
- *     `aria-expanded` bookkeeping — a hand-rolled ARIA tree that loses its JS is
- *     worse than no ARIA at all;
+ *     keyboard operation come from the platform with no JS at all. This
+ *     fallback carries no `role="tree"` and no `aria-expanded` bookkeeping —
+ *     those aren't hand-rolled into markup that would be silently wrong the
+ *     instant JS failed to load; `<wc-tree>` applies them on upgrade, over a
+ *     DOM it unwraps for the purpose (branches lose their `<details>`/
+ *     `<summary>` entirely — see that element's own docblock for why and how);
  *   - nodes carry ids, so any node is linkable without JS.
  *
  * **This component emits its own `<wc-tree>`** — do NOT wrap it in one. That is the
@@ -22,9 +25,11 @@
  * element now defers to an enclosing one, so it degrades to a no-op rather than two
  * duelling toolbars, but the single call is the intended shape.
  *
- * `<wc-tree>` upgrades it with filter, expand/collapse-all and deep-linking. If
- * that never loads, only those three conveniences are missing — which is why
- * `enhance={false}` is a supported way to get the bare fragment.
+ * `<wc-tree>` upgrades it with WAI-ARIA tree semantics, roving-tabindex keyboard
+ * navigation, filter, expand/collapse-all and hash deep-linking. If that never
+ * loads, the fallback above — native nested `<details>`, Tab-and-Enter — is all
+ * that remains, which is why `enhance={false}` is a supported way to get the
+ * bare fragment on its own.
  */
 import type { TreeItem } from './tree.ts';
 import TreeNode from './TreeNode.astro';

package/src/components/TreeNode.astro

@@ -6,13 +6,23 @@
  *
  *   - a **branch** wraps its label in `<details>`/`<summary>` — a native
  *     disclosure button, so expanded state is announced and keyboard operation
- *     is free. The child `<ul>` lives inside the `<details>`, which is what makes
- *     it collapse with no JS.
+ *     is free with no JS. The child `<ul>` lives inside the `<details>`, which
+ *     is what makes it collapse with no JS.
  *   - a **leaf** is a plain `.tree__content` row. A `<details>` with nothing to
  *     disclose would still render a control and announce as collapsible.
  *
+ * That description is the NO-JS contract only. `<wc-tree>` unwraps every
+ * branch's `<details>`/`<summary>` on upgrade — see its own docblock — so once
+ * it loads, "keyboard operation is free" stops meaning native Tab-and-Enter and
+ * starts meaning that element's roving-tabindex arrow-key navigation instead,
+ * and `role="treeitem"`/`role="group"` replace the `<li>`'s and `<ul>`'s
+ * implicit `listitem`/`list` roles. The markup below never changes to reflect
+ * that — it's the fallback `<wc-tree>` reads and transforms, not two things to
+ * keep in sync.
+ *
  * The item class sits on the `<li>` in both cases, so `<wc-tree>`'s filter treats
- * leaves and branches as one kind of thing and hiding one hides its whole row.
+ * leaves and branches as one kind of thing and hiding one hides its whole row —
+ * true before and after upgrade, since the transform preserves the class.
  */
 import type { TreeItem } from './tree.ts';
 

package/src/schemas/Carousel.astro

@@ -1,33 +1,12 @@
 ---
-export interface CarouselItem {
-  type: 'Article' | 'Recipe' | 'Movie' | 'Course' | 'Restaurant' | 'Product';
-  name: string;
-  url: string;
-  image?: string;
-  description?: string;
-}
+import { itemListGraph } from '@getvitops/utils';
+import type { ItemListEntry, ItemListGraphOptions } from '@getvitops/utils';
 
-export interface Props {
-  items: CarouselItem[];
-}
+export type { ItemListEntry };
+export type CarouselItem = ItemListEntry;
+export type Props = ItemListGraphOptions;
 
-const { items } = Astro.props;
-
-const jsonLd = {
-  '@context': 'https://schema.org',
-  '@type': 'ItemList',
-  itemListElement: items.map((item, index) => ({
-    '@type': 'ListItem',
-    position: index + 1,
-    item: {
-      '@type': item.type,
-      name: item.name,
-      url: item.url,
-      ...(item.image && { image: item.image }),
-      ...(item.description && { description: item.description }),
-    },
-  })),
-};
+const jsonLd = itemListGraph(Astro.props);
 ---
 
 <script is:inline type="application/ld+json" set:html={JSON.stringify(jsonLd)} />

package/src/schemas/LocalBusiness.astro

@@ -1,154 +1,10 @@
 ---
-export interface OpeningHoursSpecification {
-  dayOfWeek: ('Monday' | 'Tuesday' | 'Wednesday' | 'Thursday' | 'Friday' | 'Saturday' | 'Sunday')[];
-  opens: string;
-  closes: string;
-  validFrom?: string;
-  validThrough?: string;
-}
+import { localBusinessGraph } from '@getvitops/utils';
+import type { LocalBusinessGraphOptions } from '@getvitops/utils';
 
-export interface Props {
-  type?: 'LocalBusiness' | 'Restaurant' | 'Store' | 'MedicalBusiness' | 'FinancialService' | 'FoodEstablishment' | 'HealthAndBeautyBusiness' | 'HomeAndConstructionBusiness' | 'LegalService' | 'LodgingBusiness' | 'ProfessionalService' | 'SportsActivityLocation';
-  name: string;
-  description?: string;
-  url?: string;
-  telephone?: string;
-  email?: string;
-  image?: string | string[];
-  priceRange?: string;
-  address: {
-    streetAddress: string;
-    addressLocality: string;
-    addressRegion?: string;
-    postalCode: string;
-    addressCountry: string;
-  };
-  geo?: {
-    latitude: number;
-    longitude: number;
-  };
-  openingHoursSpecification?: OpeningHoursSpecification[];
-  aggregateRating?: {
-    ratingValue: number;
-    reviewCount?: number;
-    ratingCount?: number;
-    bestRating?: number;
-    worstRating?: number;
-  };
-  review?: {
-    author: string;
-    datePublished: string;
-    reviewBody: string;
-    reviewRating?: {
-      ratingValue: number;
-      bestRating?: number;
-      worstRating?: number;
-    };
-  }[];
-  servesCuisine?: string[];
-  menu?: string;
-  acceptsReservations?: boolean;
-  hasMenu?: string;
-  paymentAccepted?: string[];
-  currenciesAccepted?: string;
-  areaServed?: string[];
-  sameAs?: string[];
-}
+export type Props = LocalBusinessGraphOptions;
 
-const {
-  type = 'LocalBusiness',
-  name,
-  description,
-  url,
-  telephone,
-  email,
-  image,
-  priceRange,
-  address,
-  geo,
-  openingHoursSpecification,
-  aggregateRating,
-  review,
-  servesCuisine,
-  menu,
-  acceptsReservations,
-  hasMenu,
-  paymentAccepted,
-  currenciesAccepted,
-  areaServed,
-  sameAs,
-} = Astro.props;
-
-const jsonLd = {
-  '@context': 'https://schema.org',
-  '@type': type,
-  name,
-  ...(description && { description }),
-  ...(url && { url }),
-  ...(telephone && { telephone }),
-  ...(email && { email }),
-  ...(image && { image: Array.isArray(image) ? image : [image] }),
-  ...(priceRange && { priceRange }),
-  address: {
-    '@type': 'PostalAddress',
-    streetAddress: address.streetAddress,
-    addressLocality: address.addressLocality,
-    ...(address.addressRegion && { addressRegion: address.addressRegion }),
-    postalCode: address.postalCode,
-    addressCountry: address.addressCountry,
-  },
-  ...(geo?.latitude != null && geo?.longitude != null && {
-    geo: {
-      '@type': 'GeoCoordinates',
-      latitude: geo.latitude,
-      longitude: geo.longitude,
-    },
-  }),
-  ...(openingHoursSpecification && {
-    openingHoursSpecification: openingHoursSpecification.map(spec => ({
-      '@type': 'OpeningHoursSpecification',
-      dayOfWeek: spec.dayOfWeek,
-      opens: spec.opens,
-      closes: spec.closes,
-      ...(spec.validFrom && { validFrom: spec.validFrom }),
-      ...(spec.validThrough && { validThrough: spec.validThrough }),
-    })),
-  }),
-  ...(aggregateRating && {
-    aggregateRating: {
-      '@type': 'AggregateRating',
-      ratingValue: aggregateRating.ratingValue,
-      ...(aggregateRating.reviewCount && { reviewCount: aggregateRating.reviewCount }),
-      ...(aggregateRating.ratingCount && { ratingCount: aggregateRating.ratingCount }),
-      bestRating: aggregateRating.bestRating ?? 5,
-      worstRating: aggregateRating.worstRating ?? 1,
-    },
-  }),
-  ...(review && {
-    review: review.map(r => ({
-      '@type': 'Review',
-      author: { '@type': 'Person', name: r.author },
-      datePublished: r.datePublished,
-      reviewBody: r.reviewBody,
-      ...(r.reviewRating && {
-        reviewRating: {
-          '@type': 'Rating',
-          ratingValue: r.reviewRating.ratingValue,
-          bestRating: r.reviewRating.bestRating ?? 5,
-          worstRating: r.reviewRating.worstRating ?? 1,
-        },
-      }),
-    })),
-  }),
-  ...(servesCuisine && { servesCuisine }),
-  ...(menu && { menu }),
-  ...(acceptsReservations !== undefined && { acceptsReservations }),
-  ...(hasMenu && { hasMenu }),
-  ...(paymentAccepted && { paymentAccepted }),
-  ...(currenciesAccepted && { currenciesAccepted }),
-  ...(areaServed && { areaServed }),
-  ...(sameAs && { sameAs }),
-};
+const jsonLd = localBusinessGraph(Astro.props);
 ---
 
 <script is:inline type="application/ld+json" set:html={JSON.stringify(jsonLd)} />