@getvitops/astro 7.0.0 → 8.0.0

package/src/components/Gallery.astro

@@ -1,32 +1,35 @@
 ---
 /**
- * A `.gallery` thumbnail grid whose triggers open per-image `.lightbox-dialog`s —
- * a fully working modal lightbox with zero JavaScript.
+ * A `.gallery` thumbnail grid whose triggers open a single `.lightbox-dialog`
+ * wrapping a `<Carousel />` of every image — 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.
+ *   - each thumbnail is a real `<a href="#slide-id">` into the carousel's own
+ *     `<li id="slide-id">`, so following it is ordinary fragment navigation —
+ *     no Invoker Commands, no polyfill, in every engine;
+ *   - `:has(:target)` in `patterns/lightbox.css` is what reveals the dialog once
+ *     that navigation lands, and the browser's own fragment scroll puts the
+ *     carousel on the right slide;
+ *   - prev/next, dots, arrow keys and swipe are the carousel's — reused, not
+ *     re-implemented, and already dual-path (native `::scroll-button()` /
+ *     `::scroll-marker` where the engine has them, real fallback buttons where
+ *     it doesn't).
  *
- * **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.
+ * **This component emits its own `<wc-gallery>`, wrapping its own `<Carousel />`
+ * (which emits its own `<wc-carousel>`)** — do NOT wrap either in one yourself.
+ * That is the tier-3 rule ("the wrapper emits its `<wc-*>` tag with the
+ * accessible fallback inside"). `<wc-gallery>` only intercepts a trigger click to
+ * `showModal()` the dialog and run the thumbnail → full-image view-transition
+ * morph; it does not step between slides — the nested `<wc-carousel>` does that,
+ * and if it never loads, the dialog is still a plain scroll-snap strip.
  *
- * `<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`).
+ * `enhance={false}` on `<Gallery />` still emits a real, working carousel inside
+ * the dialog (`enhance` is passed through) — the fallback here is not a stripped
+ * lightbox, it is a genuine one, because a scroll-snap carousel needs no
+ * `<wc-gallery>` at all to already have prev/next.
  *
  * Images take `string | ImageMetadata` via `<ResponsiveImage />`: a plain string
  * renders a raw `<img>` (unchanged from before `ImageMetadata` support existed);
@@ -36,6 +39,7 @@
  * why (no hard-coded closed format union).
  */
 import type { HTMLAttributes } from 'astro/types';
+import Carousel from './Carousel.astro';
 import ResponsiveImage from './ResponsiveImage.astro';
 import type { ImageFormat } from './ResponsiveImage.astro';
 
@@ -56,7 +60,7 @@ export interface GalleryImage {
 }
 
 export interface Props extends Omit<HTMLAttributes<'div'>, 'slot'> {
-  /** Accessible name for the grid. Required — an unnamed group is unfindable. */
+  /** Accessible name for the grid, and for the dialog it opens. Required. */
   label: string;
   images?: GalleryImage[];
   /** Passed to every `<Picture formats>`. Default `['avif', 'webp']`. */
@@ -67,21 +71,21 @@ export interface Props extends Omit<HTMLAttributes<'div'>, 'slot'> {
   gap?: string;
   /** `--gallery-aspect` — every thumbnail's box ratio. Default `1`. */
   aspect?: string;
-  /** Wrap prev/next past the ends instead of stopping there. */
+  /** Wrap prev/next past the ends instead of stopping there. Passed to `<Carousel loop>`. */
   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.
+   * Emit the `<wc-gallery>` wrapper (default `true`). Also controls `<Carousel
+   * enhance>` — set false where no runtime JS will ever load at all (an email, a
+   * PDF); the dialog still opens via `:target` and the carousel is still a real,
+   * scroll-snapping strip, just without the morph, autoplay-adjacent polish, or
+   * (outside Chromium today) prev/next buttons.
    */
   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 prefix for the dialog and slide 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;
 }
@@ -127,7 +131,6 @@ const Shell = enhance ? 'wc-gallery' : 'div';
   class:list={['gallery-shell', className]}
   role={role ?? 'group'}
   aria-label={label}
-  loop={enhance && loop ? '' : undefined}
   style={vars}
   {...rest}
 >
@@ -137,12 +140,7 @@ const Shell = enhance ? 'wc-gallery' : 'div';
         const thumb = img.thumb ?? img.src;
         return (
           <li class="gallery__item">
-            <button
-              class="gallery__trigger"
-              type="button"
-              command="show-modal"
-              commandfor={`${uid}-img-${i}`}
-            >
+            <a class="gallery__trigger" href={`#${uid}-img-${i}`}>
               <ResponsiveImage
                 src={thumb}
                 alt={img.alt}
@@ -154,42 +152,52 @@ const Shell = enhance ? 'wc-gallery' : 'div';
                 decoding={i === 0 ? undefined : 'async'}
               />
               <span class="visually-hidden">View full size</span>
-            </button>
+            </a>
           </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>
-    ))
-  }
+  <dialog id={uid} class="lightbox-dialog" closedby="any" aria-label={label}>
+    <Carousel
+      id={`${uid}-track`}
+      label={label}
+      class="lightbox-dialog__track"
+      enhance={enhance}
+      loop={loop}
+      hint={false}
+    >
+      {
+        images.map((img, i) => {
+          const thumb = img.thumb ?? img.src;
+          // A per-slide placeholder: whatever's already on screen (the
+          // thumbnail) stays painted in `.carousel__media`'s background until
+          // the full image finishes loading, so the view-transition morph
+          // never has an empty box as its target — see lightbox.css.
+          const placeholder = typeof thumb === 'string' ? `--lightbox-placeholder:url(${JSON.stringify(thumb)})` : '';
+          return (
+            <li class="carousel__slide" id={`${uid}-img-${i}`}>
+              <figure class="carousel__media" style={placeholder}>
+                <ResponsiveImage
+                  src={img.src}
+                  alt={img.alt}
+                  formats={formats}
+                  width={img.width}
+                  height={img.height}
+                  srcset={img.srcset}
+                  sizes={img.sizes}
+                  loading="lazy"
+                />
+                {img.caption && <figcaption class="carousel__caption font-caption">{img.caption}</figcaption>}
+              </figure>
+            </li>
+          );
+        })
+      }
+    </Carousel>
+    <a class="lightbox-dialog__close" href="#" aria-label="Close">&times;</a>
+  </dialog>
 </Shell>
 
 <style>

package/src/components/Marquee.astro

@@ -0,0 +1,63 @@
+---
+/**
+ * A `.marquee` — content scrolling seamlessly along a track (a strip of
+ * testimonials, logos, a ticker).
+ *
+ * Tier-3 like `Counter.astro`: the pattern is pure CSS
+ * (`@getvitops/core/css/patterns/marquee.css`'s `@keyframes marquee-scroll`), and
+ * `<wc-marquee>` only fixes the seam gap by cloning `.marquee__content` enough
+ * times to cover the track — "how many copies cover this container" is a
+ * measurement CSS cannot make. With no JS (or `enhance={false}`), this still
+ * scrolls exactly as authored; it just isn't seamless with a short content run.
+ *
+ * **This component emits its own `<wc-marquee>`** — do NOT wrap it in one, same
+ * rule as `Counter.astro`/`Carousel.astro`.
+ *
+ * Put the items in the default slot — a list of `<ReviewCard>`s, logos,
+ * whatever scrolls. They become the one `.marquee__content` copy the element
+ * clones from.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+export interface Props extends Omit<HTMLAttributes<'div'>, 'slot'> {
+  /** Pause the scroll on hover (default false). */
+  pauseOnHover?: boolean;
+  /** Scroll in the opposite direction (default false). */
+  reverse?: boolean;
+  /** Scroll along the block axis instead of inline (default false). */
+  vertical?: boolean;
+  /**
+   * Emit the `<wc-marquee>` wrapper (default `true`).
+   *
+   * Set false where the element cannot run. The scroll animation still works —
+   * only the seamless-loop fixup goes.
+   */
+  enhance?: boolean;
+}
+
+const {
+  pauseOnHover = false,
+  reverse = false,
+  vertical = false,
+  enhance = true,
+  class: className,
+  ...rest
+} = Astro.props;
+
+const Shell = enhance ? 'wc-marquee' : 'div';
+---
+
+<Shell
+  class:list={[
+    'marquee',
+    pauseOnHover && 'marquee--pause-hover',
+    reverse && 'marquee--reverse',
+    vertical && 'marquee--vertical',
+    className,
+  ]}
+  {...rest}
+>
+  <div class="marquee__content">
+    <slot />
+  </div>
+</Shell>

package/src/components/ReviewCard.astro

@@ -0,0 +1,60 @@
+---
+/**
+ * One `.review` card, from a `vitops reviews` cache entry
+ * (`@getvitops/utils/reviews`'s `Review`).
+ *
+ * Pure tier-3: `.review` is a config-generated pattern
+ * (`patterns.items.review`), so this needs no runtime JS, no `<wc-*>` tag, and
+ * therefore no `enhance` prop. Put several inside `<Carousel>` slides or
+ * `<Marquee>` items — there is no group component.
+ *
+ * **Named `ReviewCard`, not `Review`.** `../schemas/Review.astro` already owns
+ * that name for the JSON-LD builder this component composes when `schema` is
+ * true; two same-named components differing only by directory is a needless
+ * import trap.
+ *
+ * **`schema` defaults to false.** Google's structured-data policy treats a
+ * business marking up reviews of itself as ineligible for review rich results,
+ * and risks a manual action — see AGENTS.md's Reviews section. Pass
+ * `itemReviewed` (the business the review is of) only when you have deliberately
+ * decided to emit it anyway; without it, `schema` is a no-op.
+ *
+ * **`avatar` defaults to false.** A reviewer's photo is a Google-hosted URL —
+ * rendering it by default would put a third-party request on every page and
+ * depend on a link that isn't guaranteed to stay live. With it off,
+ * `.review__initials` carries the author's initials instead.
+ */
+import type { ComponentProps, HTMLAttributes } from 'astro/types';
+import type { Review } from '@getvitops/utils/reviews';
+import ReviewCardBody from './ReviewCardBody.astro';
+import SchemaReview from '../schemas/Review.astro';
+
+export interface Props extends Omit<HTMLAttributes<'article'>, 'slot'> {
+  review: Review;
+  /** Emit `Review` JSON-LD via `../schemas/Review.astro` (default false). */
+  schema?: boolean;
+  /** Required for `schema` to take effect — the business this review is of. */
+  itemReviewed?: ComponentProps<typeof SchemaReview>['itemReviewed'];
+  /** Render the reviewer's Google-hosted avatar photo (default false). */
+  avatar?: boolean;
+}
+
+const { review, schema = false, itemReviewed, avatar = false, ...rest } = Astro.props;
+---
+
+{
+  schema && itemReviewed ? (
+    <SchemaReview
+      itemReviewed={itemReviewed}
+      reviewRating={{ ratingValue: review.rating }}
+      author={{ name: review.author }}
+      datePublished={review.publishedAt}
+      reviewBody={review.text}
+      publisher={{ name: 'Google', type: 'Organization' }}
+    >
+      <ReviewCardBody review={review} avatar={avatar} {...rest} />
+    </SchemaReview>
+  ) : (
+    <ReviewCardBody review={review} avatar={avatar} {...rest} />
+  )
+}

package/src/components/ReviewCardBody.astro

@@ -0,0 +1,67 @@
+---
+/**
+ * The `.review` markup itself — split out of `ReviewCard.astro` purely so it can
+ * be rendered twice (once bare, once wrapped in `../schemas/Review.astro`'s
+ * JSON-LD `<script>`) without duplicating the template. Not a public export;
+ * `ReviewCard.astro` is the tier-3 entry point.
+ */
+import type { HTMLAttributes } from 'astro/types';
+import type { Review } from '@getvitops/utils/reviews';
+import Icon from './Icon.astro';
+
+export interface Props extends Omit<HTMLAttributes<'article'>, 'slot'> {
+  review: Review;
+  avatar: boolean;
+}
+
+const { review, avatar, class: className, ...rest } = Astro.props;
+
+const initials = review.author
+  .split(/\s+/)
+  .filter(Boolean)
+  .slice(0, 2)
+  .map((w) => w[0]?.toUpperCase())
+  .join('');
+
+const full = Math.floor(review.rating);
+const hasHalf = review.rating - full >= 0.5;
+---
+
+<article class:list={['review', className]} {...rest}>
+  <header class="review__header">
+    {
+      avatar && review.authorPhoto ? (
+        <img class="review__avatar" src={review.authorPhoto} alt="" loading="lazy" />
+      ) : (
+        <span class="review__initials" aria-hidden="true">{initials}</span>
+      )
+    }
+    <div class="review__identity">
+      <cite class="review__author">{review.author}</cite>
+      <time class="review__date" datetime={review.publishedAt}>
+        {new Date(review.publishedAt).toLocaleDateString()}
+      </time>
+    </div>
+    <span class="review__stars" role="img" aria-label={`${review.rating} out of 5 stars`}>
+      {Array.from({ length: 5 }, (_, i) => {
+        const half = i === full && hasHalf;
+        const empty = i >= full && !half;
+        return (
+          <Icon
+            name={half ? 'star-half' : 'star'}
+            class:list={['review__star', empty && 'review__star--empty']}
+          />
+        );
+      })}
+    </span>
+  </header>
+  {review.text && <blockquote class="review__body">{review.text}</blockquote>}
+  {
+    review.reply && (
+      <footer class="review__reply">
+        <p class="review__reply-author">Response from the owner</p>
+        <p>{review.reply.text}</p>
+      </footer>
+    )
+  }
+</article>

package/src/schemas/Article.astro

@@ -1,6 +1,6 @@
 ---
-import { articleGraph } from '@getvitops/utils';
-import type { ArticleGraphOptions } from '@getvitops/utils';
+import { articleGraph } from '@getvitops/utils/schema';
+import type { ArticleGraphOptions } from '@getvitops/utils/schema';
 
 export type Props = ArticleGraphOptions;
 

package/src/schemas/Breadcrumb.astro

@@ -1,6 +1,6 @@
 ---
-import { breadcrumbGraph } from '@getvitops/utils';
-import type { BreadcrumbGraphOptions, BreadcrumbItem } from '@getvitops/utils';
+import { breadcrumbGraph } from '@getvitops/utils/schema';
+import type { BreadcrumbGraphOptions, BreadcrumbItem } from '@getvitops/utils/schema';
 
 export type { BreadcrumbItem };
 export type Props = BreadcrumbGraphOptions;

package/src/schemas/Carousel.astro

@@ -1,6 +1,6 @@
 ---
-import { itemListGraph } from '@getvitops/utils';
-import type { ItemListEntry, ItemListGraphOptions } from '@getvitops/utils';
+import { itemListGraph } from '@getvitops/utils/schema';
+import type { ItemListEntry, ItemListGraphOptions } from '@getvitops/utils/schema';
 
 export type { ItemListEntry };
 export type CarouselItem = ItemListEntry;

package/src/schemas/FAQ.astro

@@ -5,8 +5,8 @@
  * NOTE: Google recommends FAQ markup only for authoritative government
  * and health sites. For other sites, consider using QAPage schema instead.
  */
-import { faqGraph } from '@getvitops/utils';
-import type { FAQGraphOptions, FAQItem } from '@getvitops/utils';
+import { faqGraph } from '@getvitops/utils/schema';
+import type { FAQGraphOptions, FAQItem } from '@getvitops/utils/schema';
 
 export type { FAQItem };
 export type Props = FAQGraphOptions;

package/src/schemas/LocalBusiness.astro

@@ -1,6 +1,6 @@
 ---
-import { localBusinessGraph } from '@getvitops/utils';
-import type { LocalBusinessGraphOptions } from '@getvitops/utils';
+import { localBusinessGraph } from '@getvitops/utils/schema';
+import type { LocalBusinessGraphOptions } from '@getvitops/utils/schema';
 
 export type Props = LocalBusinessGraphOptions;
 

package/src/schemas/Organization.astro

@@ -1,6 +1,6 @@
 ---
-import { organizationGraph } from '@getvitops/utils';
-import type { OrganizationGraphOptions } from '@getvitops/utils';
+import { organizationGraph } from '@getvitops/utils/schema';
+import type { OrganizationGraphOptions } from '@getvitops/utils/schema';
 
 export type Props = OrganizationGraphOptions;
 

package/src/scripts/tracking.ts

@@ -1,5 +1,8 @@
 // Ad conversion tracking: capture click IDs from the landing URL, track tel:
-// clicks. Form enhancement is in form-enhance.ts.
+// clicks. Form submission itself goes through `createConversionRoute()`
+// (`@getvitops/astro/routes`), which handles both the no-JS `<form
+// method="post">` path and a fetch-based one — there is no separate
+// form-enhancement script here.
 //
 // Runs early and ungated on purpose. Reading the query string is not storage and
 // needs nobody's permission; *keeping* it does. So the capture is synchronous —
@@ -100,7 +103,6 @@ function persist(): void {
     ts: existing?.['ts'] ?? Date.now(),
   };
 
-  // Remove undefined values before serializing
   const clean = Object.fromEntries(Object.entries(merged).filter(([, v]) => v !== undefined));
 
   const expires = new Date(Date.now() + COOKIE_DAYS * 864e5).toUTCString();

package/virtual.d.ts

@@ -1,14 +1,3 @@
-/**
- * Astro generates the real types for `astro:env/*` into a consumer's
- * `.astro/` on `astro sync`, which never runs for this package — so the
- * import typechecks nowhere but a consumer project. Declared here at the
- * shape `plan-features.ts` actually uses; the runtime value comes from
- * Astro's env schema, and this file cannot import it.
- */
-declare module 'astro:env/server' {
-  export const SITE_PLAN: string | undefined;
-}
-
 /** Types for the virtual module the getvitops() integration provides to <Head />. */
 declare module 'virtual:getvitops/head' {
   interface FaviconLink {