@getvitops/astro 4.1.0 → 6.0.0

package/dist/routes/conversion.d.mts

@@ -11,9 +11,12 @@ interface ConversionRouteOptions {
   /** Where notifications go. Build it from your site config. */
   context: NotifyContext;
   /**
-   * The Workers `send_email` binding for this request, e.g.
-   * `(locals) => locals.runtime.env.EMAIL`. Omit it in dev and the notification
-   * is printed instead of sent.
+   * The Workers `send_email` binding for this request, e.g. `() => env.EMAIL`
+   * with `env` imported from `cloudflare:workers`. Omit it in dev and the
+   * notification is printed instead of sent.
+   *
+   * Not `(locals) => locals.runtime.env.EMAIL` — Astro removed `locals.runtime`
+   * in v6, and this package peers on `>= 7`.
    */
   binding?: (locals: unknown) => EmailBinding | undefined;
   /**

package/dist/routes/conversion.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"conversion.d.mts","names":[],"sources":["../../src/routes/conversion.ts"],"mappings":";;;;;UAgCiB,wBAAA;EACf,OAAA,EAAS,OAAO;EAChB,MAAA;AAAA;AAAA,UAGe,sBAAA;EAe+B;EAb9C,OAAA,EAAS,aAAA;EAeT;;AAAG;AA0BL;;EAnCE,OAAA,IAAW,MAAA,cAAoB,YAAA;EAmCc;;;;EA9B7C,QAAA,IAAY,IAAA,EAAM,MAAA;EAiC4C;EA/B9D,QAAA,IAAY,MAAA,EAAQ,OAAA,CAAQ,UAAA,QAAkB,MAAA;EA+BuB;EA7BrE,GAAA;AAAA;;;;;;;;;AA6B8E;;iBAHhE,qBAAA,CAAsB,OAAA,EAAS,sBAAA;EAG/B,OAAA;EAAA;AAAA,GAAqB,wBAAA,KAA2B,OAAA,CAAQ,QAAA"}
+{"version":3,"file":"conversion.d.mts","names":[],"sources":["../../src/routes/conversion.ts"],"mappings":";;;;;UAkDiB,wBAAA;EACf,OAAA,EAAS,OAAO;EAChB,MAAA;AAAA;AAAA,UAGe,sBAAA;EAiDD;EA/Cd,OAAA,EAAS,aAAA;EA+CK;;;;;;AAAgE;;EAtC9E,OAAA,IAAW,MAAA,cAAoB,YAAA;;;;;EAK/B,QAAA,IAAY,IAAA,EAAM,MAAA;;EAElB,QAAA,IAAY,MAAA,EAAQ,OAAA,CAAQ,UAAA,QAAkB,MAAA;;EAE9C,GAAA;AAAA;;;;;;;;;;;iBA0Bc,qBAAA,CAAsB,OAAA,EAAS,sBAAA;EAG/B,OAAA;EAAA;AAAA,GAAqB,wBAAA,KAA2B,OAAA,CAAQ,QAAA"}

package/dist/routes/conversion.mjs

@@ -16,17 +16,35 @@ import { parseTrackingCookie } from "@getvitops/utils/tracking";
 * to fight rather than mount. The handler takes the parsed body and an optional
 * `validate`; everything else is the caller's.
 *
+* The path matters: the capture script beacons `tel:` conversions at
+* `TRACKING_ENDPOINT` (`/api/track`, exported from `@getvitops/astro/tracking`),
+* and the integration warns at build if no route answers it.
+*
 * ```ts
 * // src/pages/api/track.ts
 * export const prerender = false;
+* import { env } from 'cloudflare:workers';
 * import { createConversionRoute } from '@getvitops/astro/routes';
-* import config from '../../site.config.json';
 *
 * export const POST = createConversionRoute({
-*   context: toNotifyContext(config),
-*   binding: (locals) => locals.runtime?.env?.EMAIL,
+*   context: {
+*     // A bare address is shorthand for `{ provider: 'cloudflare', to }`.
+*     notifications: { email: 'sales@acme.ca' },
+*     canonical: 'https://acme.ca',
+*     organizationName: 'Acme',
+*   },
+*   binding: () => env.EMAIL,
 * });
 * ```
+*
+* Two things this example used to get wrong, both of which cost a consumer real
+* time. It read the binding off `locals.runtime.env`, which Astro removed in v6
+* — and because the resulting throw precedes the response, Astro re-reads the
+* request and reports a misleading "Body has already been used" instead of the
+* actual error. This package peers on `astro >= 7`, so that form could not work
+* for any supported consumer; `import { env } from 'cloudflare:workers'` is the
+* current one. It also called a `toNotifyContext(config)` helper that does not
+* exist — `context` is a plain `NotifyContext`, built however you like.
 */
 /** Fields that are never part of a submission's meaning. */
 const CONTROL_FIELDS = new Set(["event", "phone"]);

package/dist/routes/conversion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"conversion.mjs","names":[],"sources":["../../src/routes/conversion.ts"],"sourcesContent":["/**\n * The conversion endpoint, as a factory.\n *\n * A site's contact form and its `tel:` beacon both mean the same thing — someone\n * got in touch — and both want the same treatment: read the attribution cookie\n * off the request, build the event, notify whoever the config says. That is the\n * same three lines in every project, so it ships here.\n *\n * What deliberately does **not** ship here is validation and business rules. A\n * consumer's form has its own required fields, its own spam handling and its own\n * response shape, and baking a guess at those in would make the factory something\n * to fight rather than mount. The handler takes the parsed body and an optional\n * `validate`; everything else is the caller's.\n *\n * ```ts\n * // src/pages/api/track.ts\n * export const prerender = false;\n * import { createConversionRoute } from '@getvitops/astro/routes';\n * import config from '../../site.config.json';\n *\n * export const POST = createConversionRoute({\n *   context: toNotifyContext(config),\n *   binding: (locals) => locals.runtime?.env?.EMAIL,\n * });\n * ```\n */\nimport { type EmailBinding, notify, type NotifyContext } from '@getvitops/utils/notify';\nimport { parseTrackingCookie } from '@getvitops/utils/tracking';\nimport type { ConversionEvent } from '@getvitops/utils/tracking';\n\n/** The subset of Astro's `APIContext` this needs — typed structurally so the\n * factory does not pin an Astro version. */\nexport interface ConversionRequestContext {\n  request: Request;\n  locals?: unknown;\n}\n\nexport interface ConversionRouteOptions {\n  /** Where notifications go. Build it from your site config. */\n  context: NotifyContext;\n  /**\n   * The Workers `send_email` binding for this request, e.g.\n   * `(locals) => locals.runtime.env.EMAIL`. Omit it in dev and the notification\n   * is printed instead of sent.\n   */\n  binding?: (locals: unknown) => EmailBinding | undefined;\n  /**\n   * Reject a submission before anything is sent. Return a message to refuse.\n   * This is where a consumer puts required-field checks and spam rules.\n   */\n  validate?: (body: Record<string, unknown>) => string | null;\n  /** Called with every channel outcome, delivered or not. Defaults to console. */\n  onResult?: (result: Awaited<ReturnType<typeof notify>>) => void;\n  /** Injected in tests. */\n  now?: () => number;\n}\n\n/** Fields that are never part of a submission's meaning. */\nconst CONTROL_FIELDS = new Set(['event', 'phone']);\n\nfunction toFormData(body: Record<string, unknown>): Record<string, string> {\n  const out: Record<string, string> = {};\n  for (const [key, value] of Object.entries(body)) {\n    if (CONTROL_FIELDS.has(key)) continue;\n    if (value === undefined || value === null) continue;\n    out[key] = String(value);\n  }\n  return out;\n}\n\n/**\n * Build a POST handler for conversions.\n *\n * Returns 204 for a beacon and 200 with `{ success }` for a form, matching what\n * `navigator.sendBeacon` and a fetch-submitting form each expect.\n *\n * **A failed notification does not fail the request.** The visitor has already\n * submitted; refusing them because our mail did not go out turns a lost\n * notification into a lost conversion. Failures are reported through `onResult`.\n */\nexport function createConversionRoute(options: ConversionRouteOptions) {\n  const { context, binding, validate, onResult, now = Date.now } = options;\n\n  return async ({ request, locals }: ConversionRequestContext): Promise<Response> => {\n    let body: Record<string, unknown>;\n    try {\n      const parsed: unknown = await request.json();\n      if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {\n        return Response.json({ success: false, error: 'Malformed request.' }, { status: 400 });\n      }\n      body = parsed as Record<string, unknown>;\n    } catch {\n      return Response.json({ success: false, error: 'Malformed request.' }, { status: 400 });\n    }\n\n    const isCall = body['event'] === 'call';\n    if (isCall && typeof body['phone'] !== 'string') {\n      return Response.json({ success: false, error: 'Missing phone.' }, { status: 400 });\n    }\n\n    const refusal = validate?.(body);\n    if (refusal) return Response.json({ success: false, error: refusal }, { status: 400 });\n\n    const event: ConversionEvent = {\n      type: isCall ? 'call' : 'form',\n      ...(isCall\n        ? { phone: String(body['phone']).replace(/^tel:/, '') }\n        : { formData: toFormData(body) }),\n      tracking: parseTrackingCookie(request.headers.get('cookie')),\n      userAgent: request.headers.get('user-agent') ?? undefined,\n      // Cloudflare's own header first; `x-forwarded-for` is the portable fallback\n      // and may carry a proxy chain, whose first entry is the client.\n      ip:\n        request.headers.get('cf-connecting-ip') ??\n        request.headers.get('x-forwarded-for')?.split(',')[0]?.trim() ??\n        undefined,\n      at: now(),\n    };\n\n    const result = await notify(event, context, { email: binding?.(locals) });\n\n    if (onResult) onResult(result);\n    else\n      for (const r of result.results) {\n        if (!r.sent) console.warn(`[vitops] notification not sent (${r.channel}): ${r.reason}`);\n      }\n\n    return isCall ? new Response(null, { status: 204 }) : Response.json({ success: true });\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,MAAM,iBAAiB,IAAI,IAAI,CAAC,SAAS,OAAO,CAAC;AAEjD,SAAS,WAAW,MAAuD;CACzE,MAAM,MAA8B,CAAC;CACrC,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,IAAI,GAAG;EAC/C,IAAI,eAAe,IAAI,GAAG,GAAG;EAC7B,IAAI,UAAU,UAAa,UAAU,MAAM;EAC3C,IAAI,OAAO,OAAO,KAAK;CACzB;CACA,OAAO;AACT;;;;;;;;;;;AAYA,SAAgB,sBAAsB,SAAiC;CACrE,MAAM,EAAE,SAAS,SAAS,UAAU,UAAU,MAAM,KAAK,QAAQ;CAEjE,OAAO,OAAO,EAAE,SAAS,aAA0D;EACjF,IAAI;EACJ,IAAI;GACF,MAAM,SAAkB,MAAM,QAAQ,KAAK;GAC3C,IAAI,OAAO,WAAW,YAAY,WAAW,QAAQ,MAAM,QAAQ,MAAM,GACvE,OAAO,SAAS,KAAK;IAAE,SAAS;IAAO,OAAO;GAAqB,GAAG,EAAE,QAAQ,IAAI,CAAC;GAEvF,OAAO;EACT,QAAQ;GACN,OAAO,SAAS,KAAK;IAAE,SAAS;IAAO,OAAO;GAAqB,GAAG,EAAE,QAAQ,IAAI,CAAC;EACvF;EAEA,MAAM,SAAS,KAAK,aAAa;EACjC,IAAI,UAAU,OAAO,KAAK,aAAa,UACrC,OAAO,SAAS,KAAK;GAAE,SAAS;GAAO,OAAO;EAAiB,GAAG,EAAE,QAAQ,IAAI,CAAC;EAGnF,MAAM,UAAU,WAAW,IAAI;EAC/B,IAAI,SAAS,OAAO,SAAS,KAAK;GAAE,SAAS;GAAO,OAAO;EAAQ,GAAG,EAAE,QAAQ,IAAI,CAAC;EAkBrF,MAAM,SAAS,MAAM,OAAO;GAf1B,MAAM,SAAS,SAAS;GACxB,GAAI,SACA,EAAE,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,QAAQ,SAAS,EAAE,EAAE,IACpD,EAAE,UAAU,WAAW,IAAI,EAAE;GACjC,UAAU,oBAAoB,QAAQ,QAAQ,IAAI,QAAQ,CAAC;GAC3D,WAAW,QAAQ,QAAQ,IAAI,YAAY,KAAK;GAGhD,IACE,QAAQ,QAAQ,IAAI,kBAAkB,KACtC,QAAQ,QAAQ,IAAI,iBAAiB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE,KAAK,KAC5D;GACF,IAAI,IAAI;EAGsB,GAAG,SAAS,EAAE,OAAO,UAAU,MAAM,EAAE,CAAC;EAExE,IAAI,UAAU,SAAS,MAAM;OAE3B,KAAK,MAAM,KAAK,OAAO,SACrB,IAAI,CAAC,EAAE,MAAM,QAAQ,KAAK,mCAAmC,EAAE,QAAQ,KAAK,EAAE,QAAQ;EAG1F,OAAO,SAAS,IAAI,SAAS,MAAM,EAAE,QAAQ,IAAI,CAAC,IAAI,SAAS,KAAK,EAAE,SAAS,KAAK,CAAC;CACvF;AACF"}
+{"version":3,"file":"conversion.mjs","names":[],"sources":["../../src/routes/conversion.ts"],"sourcesContent":["/**\n * The conversion endpoint, as a factory.\n *\n * A site's contact form and its `tel:` beacon both mean the same thing — someone\n * got in touch — and both want the same treatment: read the attribution cookie\n * off the request, build the event, notify whoever the config says. That is the\n * same three lines in every project, so it ships here.\n *\n * What deliberately does **not** ship here is validation and business rules. A\n * consumer's form has its own required fields, its own spam handling and its own\n * response shape, and baking a guess at those in would make the factory something\n * to fight rather than mount. The handler takes the parsed body and an optional\n * `validate`; everything else is the caller's.\n *\n * The path matters: the capture script beacons `tel:` conversions at\n * `TRACKING_ENDPOINT` (`/api/track`, exported from `@getvitops/astro/tracking`),\n * and the integration warns at build if no route answers it.\n *\n * ```ts\n * // src/pages/api/track.ts\n * export const prerender = false;\n * import { env } from 'cloudflare:workers';\n * import { createConversionRoute } from '@getvitops/astro/routes';\n *\n * export const POST = createConversionRoute({\n *   context: {\n *     // A bare address is shorthand for `{ provider: 'cloudflare', to }`.\n *     notifications: { email: 'sales@acme.ca' },\n *     canonical: 'https://acme.ca',\n *     organizationName: 'Acme',\n *   },\n *   binding: () => env.EMAIL,\n * });\n * ```\n *\n * Two things this example used to get wrong, both of which cost a consumer real\n * time. It read the binding off `locals.runtime.env`, which Astro removed in v6\n * — and because the resulting throw precedes the response, Astro re-reads the\n * request and reports a misleading \"Body has already been used\" instead of the\n * actual error. This package peers on `astro >= 7`, so that form could not work\n * for any supported consumer; `import { env } from 'cloudflare:workers'` is the\n * current one. It also called a `toNotifyContext(config)` helper that does not\n * exist — `context` is a plain `NotifyContext`, built however you like.\n */\nimport { type EmailBinding, notify, type NotifyContext } from '@getvitops/utils/notify';\nimport { parseTrackingCookie } from '@getvitops/utils/tracking';\nimport type { ConversionEvent } from '@getvitops/utils/tracking';\n\n/** The subset of Astro's `APIContext` this needs — typed structurally so the\n * factory does not pin an Astro version. */\nexport interface ConversionRequestContext {\n  request: Request;\n  locals?: unknown;\n}\n\nexport interface ConversionRouteOptions {\n  /** Where notifications go. Build it from your site config. */\n  context: NotifyContext;\n  /**\n   * The Workers `send_email` binding for this request, e.g. `() => env.EMAIL`\n   * with `env` imported from `cloudflare:workers`. Omit it in dev and the\n   * notification is printed instead of sent.\n   *\n   * Not `(locals) => locals.runtime.env.EMAIL` — Astro removed `locals.runtime`\n   * in v6, and this package peers on `>= 7`.\n   */\n  binding?: (locals: unknown) => EmailBinding | undefined;\n  /**\n   * Reject a submission before anything is sent. Return a message to refuse.\n   * This is where a consumer puts required-field checks and spam rules.\n   */\n  validate?: (body: Record<string, unknown>) => string | null;\n  /** Called with every channel outcome, delivered or not. Defaults to console. */\n  onResult?: (result: Awaited<ReturnType<typeof notify>>) => void;\n  /** Injected in tests. */\n  now?: () => number;\n}\n\n/** Fields that are never part of a submission's meaning. */\nconst CONTROL_FIELDS = new Set(['event', 'phone']);\n\nfunction toFormData(body: Record<string, unknown>): Record<string, string> {\n  const out: Record<string, string> = {};\n  for (const [key, value] of Object.entries(body)) {\n    if (CONTROL_FIELDS.has(key)) continue;\n    if (value === undefined || value === null) continue;\n    out[key] = String(value);\n  }\n  return out;\n}\n\n/**\n * Build a POST handler for conversions.\n *\n * Returns 204 for a beacon and 200 with `{ success }` for a form, matching what\n * `navigator.sendBeacon` and a fetch-submitting form each expect.\n *\n * **A failed notification does not fail the request.** The visitor has already\n * submitted; refusing them because our mail did not go out turns a lost\n * notification into a lost conversion. Failures are reported through `onResult`.\n */\nexport function createConversionRoute(options: ConversionRouteOptions) {\n  const { context, binding, validate, onResult, now = Date.now } = options;\n\n  return async ({ request, locals }: ConversionRequestContext): Promise<Response> => {\n    let body: Record<string, unknown>;\n    try {\n      const parsed: unknown = await request.json();\n      if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {\n        return Response.json({ success: false, error: 'Malformed request.' }, { status: 400 });\n      }\n      body = parsed as Record<string, unknown>;\n    } catch {\n      return Response.json({ success: false, error: 'Malformed request.' }, { status: 400 });\n    }\n\n    const isCall = body['event'] === 'call';\n    if (isCall && typeof body['phone'] !== 'string') {\n      return Response.json({ success: false, error: 'Missing phone.' }, { status: 400 });\n    }\n\n    const refusal = validate?.(body);\n    if (refusal) return Response.json({ success: false, error: refusal }, { status: 400 });\n\n    const event: ConversionEvent = {\n      type: isCall ? 'call' : 'form',\n      ...(isCall\n        ? { phone: String(body['phone']).replace(/^tel:/, '') }\n        : { formData: toFormData(body) }),\n      tracking: parseTrackingCookie(request.headers.get('cookie')),\n      userAgent: request.headers.get('user-agent') ?? undefined,\n      // Cloudflare's own header first; `x-forwarded-for` is the portable fallback\n      // and may carry a proxy chain, whose first entry is the client.\n      ip:\n        request.headers.get('cf-connecting-ip') ??\n        request.headers.get('x-forwarded-for')?.split(',')[0]?.trim() ??\n        undefined,\n      at: now(),\n    };\n\n    const result = await notify(event, context, { email: binding?.(locals) });\n\n    if (onResult) onResult(result);\n    else\n      for (const r of result.results) {\n        if (!r.sent) console.warn(`[vitops] notification not sent (${r.channel}): ${r.reason}`);\n      }\n\n    return isCall ? new Response(null, { status: 204 }) : Response.json({ success: true });\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+EA,MAAM,iBAAiB,IAAI,IAAI,CAAC,SAAS,OAAO,CAAC;AAEjD,SAAS,WAAW,MAAuD;CACzE,MAAM,MAA8B,CAAC;CACrC,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,IAAI,GAAG;EAC/C,IAAI,eAAe,IAAI,GAAG,GAAG;EAC7B,IAAI,UAAU,UAAa,UAAU,MAAM;EAC3C,IAAI,OAAO,OAAO,KAAK;CACzB;CACA,OAAO;AACT;;;;;;;;;;;AAYA,SAAgB,sBAAsB,SAAiC;CACrE,MAAM,EAAE,SAAS,SAAS,UAAU,UAAU,MAAM,KAAK,QAAQ;CAEjE,OAAO,OAAO,EAAE,SAAS,aAA0D;EACjF,IAAI;EACJ,IAAI;GACF,MAAM,SAAkB,MAAM,QAAQ,KAAK;GAC3C,IAAI,OAAO,WAAW,YAAY,WAAW,QAAQ,MAAM,QAAQ,MAAM,GACvE,OAAO,SAAS,KAAK;IAAE,SAAS;IAAO,OAAO;GAAqB,GAAG,EAAE,QAAQ,IAAI,CAAC;GAEvF,OAAO;EACT,QAAQ;GACN,OAAO,SAAS,KAAK;IAAE,SAAS;IAAO,OAAO;GAAqB,GAAG,EAAE,QAAQ,IAAI,CAAC;EACvF;EAEA,MAAM,SAAS,KAAK,aAAa;EACjC,IAAI,UAAU,OAAO,KAAK,aAAa,UACrC,OAAO,SAAS,KAAK;GAAE,SAAS;GAAO,OAAO;EAAiB,GAAG,EAAE,QAAQ,IAAI,CAAC;EAGnF,MAAM,UAAU,WAAW,IAAI;EAC/B,IAAI,SAAS,OAAO,SAAS,KAAK;GAAE,SAAS;GAAO,OAAO;EAAQ,GAAG,EAAE,QAAQ,IAAI,CAAC;EAkBrF,MAAM,SAAS,MAAM,OAAO;GAf1B,MAAM,SAAS,SAAS;GACxB,GAAI,SACA,EAAE,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,QAAQ,SAAS,EAAE,EAAE,IACpD,EAAE,UAAU,WAAW,IAAI,EAAE;GACjC,UAAU,oBAAoB,QAAQ,QAAQ,IAAI,QAAQ,CAAC;GAC3D,WAAW,QAAQ,QAAQ,IAAI,YAAY,KAAK;GAGhD,IACE,QAAQ,QAAQ,IAAI,kBAAkB,KACtC,QAAQ,QAAQ,IAAI,iBAAiB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE,KAAK,KAC5D;GACF,IAAI,IAAI;EAGsB,GAAG,SAAS,EAAE,OAAO,UAAU,MAAM,EAAE,CAAC;EAExE,IAAI,UAAU,SAAS,MAAM;OAE3B,KAAK,MAAM,KAAK,OAAO,SACrB,IAAI,CAAC,EAAE,MAAM,QAAQ,KAAK,mCAAmC,EAAE,QAAQ,KAAK,EAAE,QAAQ;EAG1F,OAAO,SAAS,IAAI,SAAS,MAAM,EAAE,QAAQ,IAAI,CAAC,IAAI,SAAS,KAAK,EAAE,SAAS,KAAK,CAAC;CACvF;AACF"}

package/dist/tracking-CmSfxWC3.mjs

@@ -0,0 +1,47 @@
+//#region src/tracking.ts
+/** The cookie the capture script writes. Mirrors `TRACKING_COOKIE` in utils. */
+const TRACKING_COOKIE = "_ac";
+/**
+* Where the capture script sends its `tel:` conversion beacon.
+*
+* The route itself is the consumer's to write (`createConversionRoute()` in
+* `@getvitops/astro/routes`), so this is the one place the two halves agree on
+* a path. It was a bare literal inside the inlined script: a consumer who named
+* the file anything else got a silent 404 on every beacon and lost conversions
+* with no error anywhere to explain it. Exported so a consumer can assert
+* against it, mirrored in `scripts/tracking.ts` because that file is inlined
+* into the document and cannot import, and pinned by `tracking.test.ts`.
+*/
+const TRACKING_ENDPOINT = "/api/track";
+/**
+* Resolve the tracking config into what the component emits.
+*
+* Two warnings, both about the same failure — a persistent identifier written
+* with no way for the visitor to decline, or a permission asked for with no way
+* to answer. Returned as data rather than logged here so the check is a test
+* rather than a line someone might scroll past, exactly as `resolveAnalytics`
+* does.
+*/
+function resolveTracking(opts, ctx = {}) {
+	const warnings = [];
+	const category = opts?.category ?? "marketing";
+	const enabled = opts?.enabled === true;
+	if (!enabled) return {
+		enabled: false,
+		category,
+		cookies: [],
+		warnings
+	};
+	if (!ctx.consent) warnings.push(`tracking is on, so this site writes the \`${"_ac"}\` cookie — a 90-day identifier tying a visitor to the ad that brought them — and \`consent\` is off, so it is written for every visitor with no way to decline. Set \`consent: true\`.`);
+	else if (ctx.consentCategories && !ctx.consentCategories.includes(category)) warnings.push(`tracking demands the \`${category}\` consent category, but the banner offers ${ctx.consentCategories.join(", ") || "nothing"}. Add \`${category}\` to \`consent.categories\`, or the visitor is asked about something the banner never names.`);
+	return {
+		enabled,
+		category,
+		cookies: ["_ac"],
+		warnings
+	};
+}
+
+//#endregion
+export { TRACKING_ENDPOINT as n, resolveTracking as r, TRACKING_COOKIE as t };
+//# sourceMappingURL=tracking-CmSfxWC3.mjs.map

package/dist/tracking-CmSfxWC3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tracking-CmSfxWC3.mjs","names":[],"sources":["../src/tracking.ts"],"sourcesContent":["/**\n * The `<Tracking />` resolution layer — tracking config in, what to emit out.\n *\n * Separate from `Tracking.astro` for the same reason `analytics.ts` is separate\n * from `Analytics.astro`: everything decidable is a pure function asserted in\n * `tracking.test.ts`, and the component only renders what this returns.\n *\n * The one decision here is **which consent category the `_ac` cookie waits on**,\n * and it is stated rather than inferred. `_ac` is a 90-day identifier tying a\n * visitor to the ad that brought them, so `marketing` is the default — but a site\n * using click IDs purely for its own campaign reporting may reasonably file it\n * under `analytics`, and that is the consumer's call to make, not ours to guess.\n */\n\n/** Which consent category the attribution cookie waits on. */\nexport type TrackingCategory = 'marketing' | 'analytics';\n\nexport interface GetvitopsTrackingOptions {\n  /** Capture ad click IDs and UTMs into `_ac`. */\n  enabled?: boolean;\n  /** Default `marketing`. */\n  category?: TrackingCategory;\n  /** Informational; capture recognises every known click-ID parameter regardless. */\n  platforms?: string[];\n}\n\n/** The cookie the capture script writes. Mirrors `TRACKING_COOKIE` in utils. */\nexport const TRACKING_COOKIE = '_ac';\n\n/**\n * Where the capture script sends its `tel:` conversion beacon.\n *\n * The route itself is the consumer's to write (`createConversionRoute()` in\n * `@getvitops/astro/routes`), so this is the one place the two halves agree on\n * a path. It was a bare literal inside the inlined script: a consumer who named\n * the file anything else got a silent 404 on every beacon and lost conversions\n * with no error anywhere to explain it. Exported so a consumer can assert\n * against it, mirrored in `scripts/tracking.ts` because that file is inlined\n * into the document and cannot import, and pinned by `tracking.test.ts`.\n */\nexport const TRACKING_ENDPOINT = '/api/track';\n\nexport interface ResolvedTracking {\n  enabled: boolean;\n  category: TrackingCategory;\n  /** Cookie names to clear on revoke — rides on `data-consent-cookies`. */\n  cookies: string[];\n  /** Configuration problems, as prose. The integration logs these. */\n  warnings: string[];\n}\n\nexport interface ResolveTrackingContext {\n  /** Is the consent gate enabled on this site (`vitops({ consent })`)? */\n  consent?: boolean;\n  /** Categories the banner offers, so we can catch a demand with no row. */\n  consentCategories?: readonly string[];\n}\n\n/**\n * Resolve the tracking config into what the component emits.\n *\n * Two warnings, both about the same failure — a persistent identifier written\n * with no way for the visitor to decline, or a permission asked for with no way\n * to answer. Returned as data rather than logged here so the check is a test\n * rather than a line someone might scroll past, exactly as `resolveAnalytics`\n * does.\n */\nexport function resolveTracking(\n  opts: GetvitopsTrackingOptions | undefined,\n  ctx: ResolveTrackingContext = {},\n): ResolvedTracking {\n  const warnings: string[] = [];\n  const category: TrackingCategory = opts?.category ?? 'marketing';\n  const enabled = opts?.enabled === true;\n\n  if (!enabled) return { enabled: false, category, cookies: [], warnings };\n\n  if (!ctx.consent) {\n    warnings.push(\n      `tracking is on, so this site writes the \\`${TRACKING_COOKIE}\\` cookie — a 90-day ` +\n        'identifier tying a visitor to the ad that brought them — and `consent` is off, so it ' +\n        'is written for every visitor with no way to decline. Set `consent: true`.',\n    );\n  } else if (ctx.consentCategories && !ctx.consentCategories.includes(category)) {\n    // The banner would be raised for a category it renders no row for: the\n    // visitor is asked a question the form does not show them.\n    warnings.push(\n      `tracking demands the \\`${category}\\` consent category, but the banner offers ` +\n        `${ctx.consentCategories.join(', ') || 'nothing'}. Add \\`${category}\\` to ` +\n        '`consent.categories`, or the visitor is asked about something the banner never names.',\n    );\n  }\n\n  return { enabled, category, cookies: [TRACKING_COOKIE], warnings };\n}\n"],"mappings":";;AA2BA,MAAa,kBAAkB;;;;;;;;;;;;AAa/B,MAAa,oBAAoB;;;;;;;;;;AA2BjC,SAAgB,gBACd,MACA,MAA8B,CAAC,GACb;CAClB,MAAM,WAAqB,CAAC;CAC5B,MAAM,WAA6B,MAAM,YAAY;CACrD,MAAM,UAAU,MAAM,YAAY;CAElC,IAAI,CAAC,SAAS,OAAO;EAAE,SAAS;EAAO;EAAU,SAAS,CAAC;EAAG;CAAS;CAEvE,IAAI,CAAC,IAAI,SACP,SAAS,KACP,mDAA6D,wLAG/D;MACK,IAAI,IAAI,qBAAqB,CAAC,IAAI,kBAAkB,SAAS,QAAQ,GAG1E,SAAS,KACP,0BAA0B,SAAS,6CAC9B,IAAI,kBAAkB,KAAK,IAAI,KAAK,UAAU,UAAU,SAAS,8FAExE;CAGF,OAAO;EAAE;EAAS;EAAU,SAAS,MAAgB;EAAG;CAAS;AACnE"}

package/dist/tracking-DdEKExlE.d.mts

@@ -0,0 +1,65 @@
+//#region src/tracking.d.ts
+/**
+ * The `<Tracking />` resolution layer — tracking config in, what to emit out.
+ *
+ * Separate from `Tracking.astro` for the same reason `analytics.ts` is separate
+ * from `Analytics.astro`: everything decidable is a pure function asserted in
+ * `tracking.test.ts`, and the component only renders what this returns.
+ *
+ * The one decision here is **which consent category the `_ac` cookie waits on**,
+ * and it is stated rather than inferred. `_ac` is a 90-day identifier tying a
+ * visitor to the ad that brought them, so `marketing` is the default — but a site
+ * using click IDs purely for its own campaign reporting may reasonably file it
+ * under `analytics`, and that is the consumer's call to make, not ours to guess.
+ */
+/** Which consent category the attribution cookie waits on. */
+type TrackingCategory = 'marketing' | 'analytics';
+interface GetvitopsTrackingOptions {
+  /** Capture ad click IDs and UTMs into `_ac`. */
+  enabled?: boolean;
+  /** Default `marketing`. */
+  category?: TrackingCategory;
+  /** Informational; capture recognises every known click-ID parameter regardless. */
+  platforms?: string[];
+}
+/** The cookie the capture script writes. Mirrors `TRACKING_COOKIE` in utils. */
+declare const TRACKING_COOKIE = "_ac";
+/**
+ * Where the capture script sends its `tel:` conversion beacon.
+ *
+ * The route itself is the consumer's to write (`createConversionRoute()` in
+ * `@getvitops/astro/routes`), so this is the one place the two halves agree on
+ * a path. It was a bare literal inside the inlined script: a consumer who named
+ * the file anything else got a silent 404 on every beacon and lost conversions
+ * with no error anywhere to explain it. Exported so a consumer can assert
+ * against it, mirrored in `scripts/tracking.ts` because that file is inlined
+ * into the document and cannot import, and pinned by `tracking.test.ts`.
+ */
+declare const TRACKING_ENDPOINT = "/api/track";
+interface ResolvedTracking {
+  enabled: boolean;
+  category: TrackingCategory;
+  /** Cookie names to clear on revoke — rides on `data-consent-cookies`. */
+  cookies: string[];
+  /** Configuration problems, as prose. The integration logs these. */
+  warnings: string[];
+}
+interface ResolveTrackingContext {
+  /** Is the consent gate enabled on this site (`vitops({ consent })`)? */
+  consent?: boolean;
+  /** Categories the banner offers, so we can catch a demand with no row. */
+  consentCategories?: readonly string[];
+}
+/**
+ * Resolve the tracking config into what the component emits.
+ *
+ * Two warnings, both about the same failure — a persistent identifier written
+ * with no way for the visitor to decline, or a permission asked for with no way
+ * to answer. Returned as data rather than logged here so the check is a test
+ * rather than a line someone might scroll past, exactly as `resolveAnalytics`
+ * does.
+ */
+declare function resolveTracking(opts: GetvitopsTrackingOptions | undefined, ctx?: ResolveTrackingContext): ResolvedTracking;
+//#endregion
+export { TRACKING_ENDPOINT as a, TRACKING_COOKIE as i, ResolveTrackingContext as n, TrackingCategory as o, ResolvedTracking as r, resolveTracking as s, GetvitopsTrackingOptions as t };
+//# sourceMappingURL=tracking-DdEKExlE.d.mts.map

package/dist/tracking-DdEKExlE.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tracking-DdEKExlE.d.mts","names":[],"sources":["../src/tracking.ts"],"mappings":";;AAeA;;;;AAA4B;AAE5B;;;;;;;;KAFY,gBAAA;AAAA,UAEK,wBAAA;EAUJ;EARX,OAAA;;EAEA,QAAA,GAAW,gBAAgB;EAMD;EAJ1B,SAAA;AAAA;;cAIW,eAAA;AAaiB;AAE9B;;;;;;;;;;AAF8B,cAAjB,iBAAA;AAAA,UAEI,gBAAA;EACf,OAAA;EACA,QAAA,EAAU,gBAAgB;EAS1B;EAPA,OAAA;EAqBc;EAnBd,QAAA;AAAA;AAAA,UAGe,sBAAA;EAkBV;EAhBL,OAAA;EAiBiB;EAfjB,iBAAiB;AAAA;;;;;;AAeA;;;;iBAHH,eAAA,CACd,IAAA,EAAM,wBAAA,cACN,GAAA,GAAK,sBAAA,GACJ,gBAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getvitops/astro",
-  "version": "4.1.0",
+  "version": "6.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,7 @@
     "src/ads.ts",
     "src/components/Subgrid.astro",
     "src/components/Cards.astro",
+    "src/components/Carousel.astro",
     "src/components/NodeRenderer.astro",
     "src/components/WebComponentLoader.astro",
     "src/components/Icon.astro",
@@ -32,7 +33,8 @@
     "src/tracking.ts",
     "src/components/Tree.astro",
     "src/components/TreeNode.astro",
-    "src/components/tree.ts"
+    "src/components/tree.ts",
+    "src/exports/tracking.ts"
   ],
   "type": "module",
   "types": "./dist/index.d.mts",
@@ -45,6 +47,10 @@
       "types": "./dist/routes/conversion.d.mts",
       "import": "./dist/routes/conversion.mjs"
     },
+    "./tracking": {
+      "types": "./dist/exports/tracking.d.mts",
+      "import": "./dist/exports/tracking.mjs"
+    },
     "./Head.astro": "./src/components/Head.astro",
     "./Seo.astro": "./src/components/Seo.astro",
     "./Analytics.astro": "./src/components/Analytics.astro",
@@ -53,6 +59,7 @@
     "./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/NodeRenderer.astro": "./src/components/NodeRenderer.astro",
     "./components/WebComponentLoader.astro": "./src/components/WebComponentLoader.astro",
     "./components/Icon.astro": "./src/components/Icon.astro",
@@ -70,10 +77,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@getvitops/core": "4.1.0",
-    "@getvitops/generator": "4.1.0",
-    "@getvitops/vite": "4.1.0",
-    "@getvitops/utils": "4.1.0"
+    "@getvitops/core": "6.0.0",
+    "@getvitops/generator": "6.0.0",
+    "@getvitops/utils": "6.0.0",
+    "@getvitops/vite": "6.0.0"
   },
   "devDependencies": {
     "@astrojs/sitemap": "^3.7.3",

package/src/components/Cards.astro

@@ -1,34 +1,48 @@
 ---
 /**
- * Cards — a `Subgrid` whose items are `card`s. The child's own class and style
- * ride along, so `<article class="bg-surface-muted">` becomes `<li class="card bg-surface-muted">`.
+ * Cards — a `Subgrid` whose cards are clickable across their whole area, with their
+ * text still selectable.
  *
- * The class has to be put on the `<li>` we hand to Subgrid rather than written
- * into the slotted element: `serialize()` returns a node's *inner* HTML, so the
- * element carrying the attribute is discarded on the way through.
+ * **This component emits its own `<wc-cards>`** — do NOT wrap it in one. That is the
+ * tier-3 rule ("the wrapper emits its `<wc-*>` tag with the accessible fallback
+ * inside"), and `Tree.astro` and `CookieConsent.astro` do the same.
+ * `<wc-cards><Cards /></wc-cards>` nests two elements governing the same cards; the
+ * inner one defers to the enclosing one so it degrades to a no-op rather than two
+ * forwarded clicks, but the single call is the intended shape.
+ *
+ *   <Cards>
+ *     <li class="card subgrid-card">
+ *       <p class="font-eyebrow">Service</p>
+ *       <p class="font-heading"><a class="link" href="/a">Title</a></p>
+ *       <p>Blurb…</p>
+ *     </li>
+ *   </Cards>
+ *
+ * The fallback is the card's own link, so with no JS every card is still reachable —
+ * only the click-anywhere convenience is missing, and the pointer cursor comes from
+ * the element too, so the affordance never appears without the behaviour.
+ *
+ * **`<Subgrid>` is the unenhanced form**, which is why there is no `enhance={false}`
+ * prop: a flag would be a second way to say the same thing. Reach for
+ * `.stretched-link` instead when you want whole-card clicking with no JS at all and
+ * can accept that the card's text stops being selectable.
+ *
+ * It no longer parses the slot to add `class="card"`. That was its only job, and it is
+ * what forced `Subgrid` to rebuild every child as an `<li>` — see that file. Write the
+ * class on the item.
  */
 import type { HTMLAttributes } from 'astro/types';
 import Subgrid from './Subgrid.astro';
-import { parseRenderedSlots, getAttribute, serialize } from '@getvitops/utils';
-
-export interface Props extends HTMLAttributes<'ul'> {}
 
-const { class: className, ...rest } = Astro.props;
+export interface Props extends HTMLAttributes<'ul'> {
+  as?: 'ul' | 'ol' | 'div';
+  /** Selector for the cards the element governs. Defaults to `.card`. */
+  item?: string;
+}
 
-const nodes = parseRenderedSlots(await Astro.slots.render('default'));
-const slots = nodes.filter(node => 'tagName' in node).map(node => ({
-  html: serialize(node),
-  class: getAttribute(node, 'class'),
-  style: getAttribute(node, 'style'),
-}));
+const { item, ...rest } = Astro.props;
 ---
 
-<Subgrid
-  role="list"
-  class={className}
-  {...rest}
->
-  {slots.map((slot) => (
-    <li class:list={["card", slot.class]} style={slot.style} set:html={slot.html}></li>
-  ))}
-</Subgrid>
+<wc-cards item={item}>
+  <Subgrid {...rest}><slot /></Subgrid>
+</wc-cards>

package/src/components/Carousel.astro

@@ -0,0 +1,230 @@
+---
+/**
+ * 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';
+
+export interface CarouselSlide {
+  src: string;
+  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.
+   */
+  width?: number;
+  height?: number;
+  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[];
+  /** 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 = [],
+  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. */}
+            <img
+              src={slide.src}
+              alt={slide.alt}
+              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>