@gradial/aci 0.1.28 → 0.1.29

package/dist/collect/webvitals.js

@@ -0,0 +1,99 @@
+// Web vitals (design/04): eventName "rum.web_vital" with { vitalName,
+// vitalValue }. Captures LCP, FID, CLS, INP, TTFB and FCP via
+// PerformanceObserver. LCP/FID/FCP fire as their entries arrive; TTFB is read
+// once from the navigation entry on init; CLS and INP accumulate and are
+// reported on visibilitychange to hidden (session-window semantics). Each
+// vital is emitted at most once per page load — there is no SPA reset in this
+// first version. If PerformanceObserver is missing the collector is a no-op.
+// Errors are swallowed silently.
+export const WEB_VITAL_EVENT = "rum.web_vital";
+/**
+ * startWebVitals observes Core Web Vitals and emits one rum.web_vital per
+ * vital. Returns silently when PerformanceObserver is unavailable.
+ */
+export function startWebVitals(emit, env) {
+    const Observer = env.PerformanceObserver;
+    if (typeof Observer !== "function")
+        return;
+    const { performance: perf, debug } = env;
+    const url = env.window?.location?.href;
+    const doc = env.document;
+    const emitted = new Set();
+    const emitVital = (name, value) => {
+        if (emitted.has(name))
+            return;
+        emitted.add(name);
+        emit({
+            eventName: WEB_VITAL_EVENT,
+            url,
+            properties: { vitalName: name, vitalValue: value },
+        });
+    };
+    try {
+        const nav = perf?.getEntriesByType("navigation")[0];
+        if (nav && typeof nav.responseStart === "number" && typeof nav.requestStart === "number") {
+            emitVital("TTFB", nav.responseStart - nav.requestStart);
+        }
+    }
+    catch (err) {
+        debug?.("capture", { reason: "ttfb_failed", error: String(err) });
+    }
+    let clsValue = 0;
+    let inpWorst = 0;
+    const observe = (type, handler) => {
+        try {
+            const obs = new Observer((list) => {
+                try {
+                    for (const entry of list.getEntries())
+                        handler(entry);
+                }
+                catch (err) {
+                    debug?.("capture", { reason: `${type}_handler_failed`, error: String(err) });
+                }
+            });
+            obs.observe({ type, buffered: true });
+        }
+        catch (err) {
+            debug?.("capture", { reason: `${type}_observe_failed`, error: String(err) });
+        }
+    };
+    observe("largest-contentful-paint", (entry) => {
+        emitVital("LCP", entry.startTime);
+    });
+    observe("first-input", (entry) => {
+        emitVital("FID", entry.startTime);
+    });
+    observe("layout-shift", (entry) => {
+        if (entry.hadRecentInput)
+            return;
+        clsValue += entry.value ?? 0;
+    });
+    observe("event", (entry) => {
+        const value = entry.value ?? 0;
+        if (value > inpWorst)
+            inpWorst = value;
+    });
+    observe("paint", (entry) => {
+        if (entry.name === "first-contentful-paint") {
+            emitVital("FCP", entry.startTime);
+        }
+    });
+    const onHidden = () => {
+        try {
+            if (!emitted.has("CLS"))
+                emitVital("CLS", clsValue);
+            if (!emitted.has("INP"))
+                emitVital("INP", inpWorst);
+        }
+        catch (err) {
+            debug?.("capture", { reason: "visibility_handler_failed", error: String(err) });
+        }
+    };
+    if (doc) {
+        doc.addEventListener("visibilitychange", () => {
+            if (doc.visibilityState === "hidden")
+                onHidden();
+        });
+    }
+    env.window?.addEventListener("pagehide", onHidden);
+}

package/dist/content/index.d.ts

@@ -1,6 +1,7 @@
 export * from './provider.js';
 export * from './routes.js';
 export * from './types.js';
+export * from './personalization.js';
 export * from './cache.js';
 export * from './resolve-slots.js';
 export * from './assets.js';

package/dist/content/index.js

@@ -1,6 +1,7 @@
 export * from './provider.js';
 export * from './routes.js';
 export * from './types.js';
+export * from './personalization.js';
 export * from './cache.js';
 export * from './resolve-slots.js';
 export * from './assets.js';

package/dist/content/personalization.d.ts

@@ -0,0 +1,57 @@
+/** The single stable serving URL for the collect SDK (design/04). */
+export declare const COLLECT_SCRIPT_SRC = "/_aci/aci.js";
+/**
+ * The optional `personalization` block on the site config doc
+ * (`/config/site.json`, design/04 site config contract). Absent block or
+ * `collect` unset/false = personalization disabled: no tag is emitted.
+ */
+export interface SitePersonalizationConfig {
+    /** Master switch for the collect tag. Only `true` enables emission. */
+    collect?: boolean;
+    /**
+     * CMP preset for `data-aci-consent` (`c15t`, `onetrust`, `cookiebot`,
+     * `trustarc`, `manual`). Defaults to `manual` — only the JS consent API
+     * writes envelopes. Unknown values are passed through; the SDK falls back
+     * to `manual` at runtime (unknown-attribute tolerance, design/04).
+     */
+    consentPreset?: string;
+    /**
+     * Flat comma list of CMP categories that imply the personalization
+     * purpose. Omitted from the tag when unset — each preset ships a sane
+     * default inside the SDK.
+     */
+    consentCategories?: string;
+    /** Emit `data-aci-debug="1"` (structured console.debug diagnostics). */
+    debug?: boolean;
+}
+/**
+ * The minimal site-config surface tag emission reads: the site doc id (for
+ * the optional debug `data-aci-site` attribute) plus the personalization
+ * block. `KernelSiteConfig` satisfies this structurally.
+ */
+export interface PersonalizationSiteConfig {
+    id?: string;
+    personalization?: SitePersonalizationConfig;
+}
+/**
+ * Attributes of the emitted tag, in contract order. `defer` is a boolean
+ * attribute and is owned by the renderers (React prop / HTML literal).
+ */
+export interface CollectTagAttributes {
+    src: string;
+    "data-aci-consent": string;
+    "data-aci-consent-categories"?: string;
+    "data-aci-site"?: string;
+    "data-aci-debug"?: string;
+}
+/**
+ * collectTagAttributes derives the tag attributes from the site config, or
+ * returns null when personalization is disabled or absent (no tag).
+ */
+export declare function collectTagAttributes(siteConfig: PersonalizationSiteConfig | null | undefined): CollectTagAttributes | null;
+/**
+ * collectScriptTagHTML renders the contract tag as an HTML snippet for
+ * emitters without a React element seam (the Astro kit layout). Returns ""
+ * when personalization is disabled.
+ */
+export declare function collectScriptTagHTML(siteConfig: PersonalizationSiteConfig | null | undefined): string;

package/dist/content/personalization.js

@@ -0,0 +1,54 @@
+// Collect-tag emission (personalization-onboarding design/04): the script
+// tag is the customer-visible contract and the ONLY per-site configuration
+// surface (C-13). One stable URL — no hash plumbing, no versioned URL
+// (D-ONB-5). The framework emitters (Next createPage, the Astro kit layout)
+// both derive the tag from the site config's `personalization` block through
+// this module, so there is exactly one attribute-derivation code path.
+/** The single stable serving URL for the collect SDK (design/04). */
+export const COLLECT_SCRIPT_SRC = "/_aci/aci.js";
+const DEFAULT_CONSENT_PRESET = "manual";
+/**
+ * collectTagAttributes derives the tag attributes from the site config, or
+ * returns null when personalization is disabled or absent (no tag).
+ */
+export function collectTagAttributes(siteConfig) {
+    const personalization = siteConfig?.personalization;
+    if (personalization?.collect !== true)
+        return null;
+    const preset = personalization.consentPreset?.trim().toLowerCase() ||
+        DEFAULT_CONSENT_PRESET;
+    const attributes = {
+        src: COLLECT_SCRIPT_SRC,
+        "data-aci-consent": preset,
+    };
+    const categories = personalization.consentCategories?.trim();
+    if (categories)
+        attributes["data-aci-consent-categories"] = categories;
+    const site = siteConfig?.id?.trim();
+    if (site)
+        attributes["data-aci-site"] = site;
+    if (personalization.debug === true)
+        attributes["data-aci-debug"] = "1";
+    return attributes;
+}
+/**
+ * collectScriptTagHTML renders the contract tag as an HTML snippet for
+ * emitters without a React element seam (the Astro kit layout). Returns ""
+ * when personalization is disabled.
+ */
+export function collectScriptTagHTML(siteConfig) {
+    const attributes = collectTagAttributes(siteConfig);
+    if (!attributes)
+        return "";
+    const rendered = Object.entries(attributes)
+        .map(([name, value]) => ` ${name}="${escapeAttribute(value)}"`)
+        .join("");
+    return `<script defer${rendered}></script>`;
+}
+function escapeAttribute(value) {
+    return value
+        .replace(/&/g, "&amp;")
+        .replace(/"/g, "&quot;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+}

package/dist/content/types.d.ts

@@ -1,3 +1,4 @@
+import type { SitePersonalizationConfig } from './personalization.js';
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'outline' | 'ghost';
 export interface KernelImage {
     src: string;
@@ -78,6 +79,8 @@ export interface KernelSiteConfig {
         description?: string;
         siteName?: string;
     };
+    /** Personalization collect-tag config (design/04); absent = disabled. */
+    personalization?: SitePersonalizationConfig;
 }
 export interface KernelRouteMetadata {
     title: string;

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export type { Registry, RegistryEntry, AnyComponent } from './registry.js';
 export { blockRef, blockRefArray } from './types/block-ref.js';
 export type { BlockRef, BlockRefEntry, BlockRefMeta, BlockRefUnion } from './types/block-ref.js';
 export type { ComponentContract, ComponentContractID, ComponentContractValidator, ComponentRegistry, ComponentValidationContext, ComponentValidationIssue, InferComponentProps, } from './types/component.js';
-export { ImageSchema, imageAttrs, primaryImageSource, type Image, type ImageSource, type ImageAttrs, type ImageSlotContract, type SlotOutput, } from './types/image.js';
+export { ImageSchema, imageAttrs, primaryImageSource, type Image, type ImageFallback, type ImageSource, type ImageAttrs, type ImageSlotContract, type SlotOutput, } from './types/image.js';
 export { LinkSchema, type Link, type LinkTarget, type LinkResolverContext, resolveLink, resolveHref, assertSafeHref, normalizeLinkRel, } from './types/link.js';
 export { HeadingSchema, InlineContentSchema, RichTextValueSchema, type Heading, type InlineContent, type RichTextValue, } from './types/rich-text.js';
 export type { Config, RouteConfig, ExternalDependency, DAMConfig, } from './types/config.js';

package/dist/next/collect-script.d.ts

@@ -0,0 +1,12 @@
+import { type PersonalizationSiteConfig } from '../content/personalization.js';
+export interface CollectScriptProps {
+    siteConfig: PersonalizationSiteConfig | null | undefined;
+}
+/**
+ * CollectScript renders the personalization collect tag
+ * (`<script defer src="/_aci/aci.js" data-aci-consent="…">`, design/04) when
+ * the site config's `personalization` block enables collection, and nothing
+ * otherwise. createPage appends it to the page tree exactly once per page;
+ * sites composing their own pages can render it directly.
+ */
+export declare function CollectScript({ siteConfig }: CollectScriptProps): import("react").JSX.Element | null;

package/dist/next/collect-script.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { collectTagAttributes, } from '../content/personalization.js';
+/**
+ * CollectScript renders the personalization collect tag
+ * (`<script defer src="/_aci/aci.js" data-aci-consent="…">`, design/04) when
+ * the site config's `personalization` block enables collection, and nothing
+ * otherwise. createPage appends it to the page tree exactly once per page;
+ * sites composing their own pages can render it directly.
+ */
+export function CollectScript({ siteConfig }) {
+    const attributes = collectTagAttributes(siteConfig);
+    if (!attributes)
+        return null;
+    return _jsx("script", { defer: true, ...attributes });
+}

package/dist/next/config.js

@@ -13,6 +13,7 @@ export function withAci(nextConfig = {}, options = {}) {
     return {
         ...nextConfig,
         output: 'standalone',
+        outputFileTracingRoot: nextConfig.outputFileTracingRoot ?? process.cwd(),
         headers: async () => {
             const gradialHeaders = [
                 {

package/dist/next/index.d.ts

@@ -4,3 +4,4 @@ export { isPreviewMode } from './preview-mode.js';
 export { createPage, type CreatePageOptions, type SlotPropsFn } from './page.js';
 export { getSiteConfig, getFragment, getLayout, getPage, getRenderInput, routeFromNextParams } from './server.js';
 export { PageNotFoundError, FragmentNotFoundError, LayoutNotFoundError } from './server.js';
+export { CollectScript, type CollectScriptProps } from './collect-script.js';

package/dist/next/index.js

@@ -4,3 +4,4 @@ export { isPreviewMode } from './preview-mode.js';
 export { createPage } from './page.js';
 export { getSiteConfig, getFragment, getLayout, getPage, getRenderInput, routeFromNextParams } from './server.js';
 export { PageNotFoundError, FragmentNotFoundError, LayoutNotFoundError } from './server.js';
+export { CollectScript } from './collect-script.js';

package/dist/next/page.d.ts

@@ -27,6 +27,8 @@ export interface CreatePageOptions {
  *
  * The SDK owns param normalization, content loading, metadata generation,
  * notFound handling, layout resolution, and block rendering via the registry.
+ * When the site config enables personalization, the page tree also carries
+ * the collect script tag exactly once per page (design/04 contract tag).
  *
  * Release-scoped routes: when the middleware rewrites a public URL to
  * `/__r/{releaseId}/routes/{path}`, the catch-all slug becomes

package/dist/next/page.js

@@ -1,9 +1,10 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { notFound } from 'next/navigation.js';
 import { Fragment } from 'react';
 import { PageNotFoundError, routeFromNextParams, getRenderInput, getLayout, getFragment, } from './server.js';
 import { routeMetadataForContent, resolveSlots, } from '../content/index.js';
 import { renderBlocks } from './render.js';
+import { CollectScript } from './collect-script.js';
 /**
  * Creates the catch-all route handler for a Next.js ACI site.
  *
@@ -21,6 +22,8 @@ import { renderBlocks } from './render.js';
  *
  * The SDK owns param normalization, content loading, metadata generation,
  * notFound handling, layout resolution, and block rendering via the registry.
+ * When the site config enables personalization, the page tree also carries
+ * the collect script tag exactly once per page (design/04 contract tag).
  *
  * Release-scoped routes: when the middleware rewrites a public URL to
  * `/__r/{releaseId}/routes/{path}`, the catch-all slug becomes
@@ -69,7 +72,7 @@ export function createPage(registry, options) {
                 }
                 return (_jsx(Fragment, { children: renderedBlocks }, slot.name));
             }));
-            return _jsx(_Fragment, { children: renderedSlots.filter(Boolean) });
+            return (_jsxs(_Fragment, { children: [renderedSlots.filter(Boolean), _jsx(CollectScript, { siteConfig: input.siteConfig })] }));
         }
         catch (error) {
             if (error instanceof PageNotFoundError)

package/dist/providers/file.js

@@ -60,14 +60,7 @@ export class FileContentProvider {
         }
     }
     async manifest() {
-        this.#manifest ??= this.readJSON('manifest.json').catch(() => ({
-            manifestVersion: '0',
-            buildDigest: '',
-            siteConfigRef: '',
-            routes: {},
-            fragments: {},
-            layouts: {},
-        }));
+        this.#manifest ??= this.readJSON('manifest.json');
         return await this.#manifest;
     }
     async fetchRaw(key) {

package/dist/react/VideoPlayer.d.ts

@@ -17,6 +17,9 @@ export declare function VideoPlayer({ video, ...attrs }: VideoPlayerProps): impo
     rel?: string | undefined | undefined;
     content?: string | undefined | undefined;
     dir?: string | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
+    slot?: string | undefined | undefined;
+    style?: import("react").CSSProperties | undefined;
     children?: import("react").ReactNode;
     className?: string | undefined | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
@@ -31,12 +34,9 @@ export declare function VideoPlayer({ video, ...attrs }: VideoPlayerProps): impo
     contextMenu?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    hidden?: boolean | undefined | undefined;
     lang?: string | undefined | undefined;
     nonce?: string | undefined | undefined;
-    slot?: string | undefined | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
-    style?: import("react").CSSProperties | undefined;
     tabIndex?: number | undefined | undefined;
     translate?: "yes" | "no" | undefined | undefined;
     radioGroup?: string | undefined | undefined;

package/dist/react/index.d.ts

@@ -17,8 +17,8 @@ export declare function Image({ image, value, ...attrs }: ImageProps): import("r
     prefix?: string | undefined | undefined;
     width?: number | string | undefined | undefined;
     height?: number | string | undefined | undefined;
-    srcSet?: string | undefined | undefined;
     sizes?: string | undefined | undefined;
+    srcSet?: string | undefined | undefined;
     loading?: "eager" | "lazy" | undefined | undefined;
     decoding?: "async" | "auto" | "sync" | undefined | undefined;
     title?: string | undefined | undefined;
@@ -26,6 +26,9 @@ export declare function Image({ image, value, ...attrs }: ImageProps): import("r
     content?: string | undefined | undefined;
     referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     dir?: string | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
+    slot?: string | undefined | undefined;
+    style?: import("react").CSSProperties | undefined;
     children?: ReactNode;
     className?: string | undefined | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
@@ -42,12 +45,9 @@ export declare function Image({ image, value, ...attrs }: ImageProps): import("r
     contextMenu?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    hidden?: boolean | undefined | undefined;
     lang?: string | undefined | undefined;
     nonce?: string | undefined | undefined;
-    slot?: string | undefined | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
-    style?: import("react").CSSProperties | undefined;
     tabIndex?: number | undefined | undefined;
     translate?: "yes" | "no" | undefined | undefined;
     radioGroup?: string | undefined | undefined;

package/dist/react/index.js

@@ -12,9 +12,10 @@ export function Image({ image, value, ...attrs }) {
         assetId: '',
         versionId: '',
         alt: '',
+        fallback: { src: '', width: 0, height: 0 },
         sources: [],
     };
-    if (!resolved.sources.length) {
+    if (!resolved.fallback.src) {
         return createElement('img', {
             src: '',
             alt: resolved.alt,

package/dist/types/image.d.ts

@@ -1,12 +1,22 @@
 import { z } from 'zod';
-export interface ImageSource {
-    /** Derivative URL. */
+export interface ImageFallback {
+    /** Derivative URL for the base <img>. */
     src: string;
-    /** Intrinsic width in pixels. */
+    /** Intrinsic width in pixels (0 when the format carries none, e.g. SVG). */
     width: number;
-    /** Intrinsic height in pixels. */
+    /** Intrinsic height in pixels (0 when the format carries none). */
     height: number;
     /** MIME type hint, e.g. image/webp. */
+    type?: string;
+}
+export interface ImageSource {
+    /** srcset value — a single URL or a width-descriptor candidate list. */
+    srcset: string;
+    /** sizes attribute from the slot contract. */
+    sizes?: string;
+    /** Media query scoping this source (art direction). */
+    media?: string;
+    /** MIME type hint, e.g. image/webp. */
     type: string;
 }
 export interface Image {
@@ -18,7 +28,9 @@ export interface Image {
     versionId: string;
     /** Accessible description of the image content. */
     alt: string;
-    /** Responsive derivative variants produced for the asset slot. */
+    /** Base <img> rendition. */
+    fallback: ImageFallback;
+    /** <source> candidates produced for the asset slot. */
     sources: ImageSource[];
 }
 export interface ImageSlotContract {
@@ -31,10 +43,16 @@ export interface SlotOutput {
     widths: number[];
     media?: string;
 }
-export declare const ImageSourceSchema: z.ZodObject<{
+export declare const ImageFallbackSchema: z.ZodObject<{
     src: z.ZodString;
     width: z.ZodNumber;
     height: z.ZodNumber;
+    type: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+export declare const ImageSourceSchema: z.ZodObject<{
+    srcset: z.ZodString;
+    sizes: z.ZodOptional<z.ZodString>;
+    media: z.ZodOptional<z.ZodString>;
     type: z.ZodString;
 }, z.core.$strip>;
 export declare const ImageSchema: z.ZodObject<{
@@ -42,23 +60,31 @@ export declare const ImageSchema: z.ZodObject<{
     assetId: z.ZodString;
     versionId: z.ZodString;
     alt: z.ZodString;
-    sources: z.ZodArray<z.ZodObject<{
+    fallback: z.ZodObject<{
         src: z.ZodString;
         width: z.ZodNumber;
         height: z.ZodNumber;
+        type: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>;
+    sources: z.ZodArray<z.ZodObject<{
+        srcset: z.ZodString;
+        sizes: z.ZodOptional<z.ZodString>;
+        media: z.ZodOptional<z.ZodString>;
         type: z.ZodString;
     }, z.core.$strip>>;
 }, z.core.$strip>;
 export type ImageAttrs = Record<string, unknown>;
 /**
- * Picks the primary variant from an image's sources.
- * Uses the largest width; ties fall back to the first entry.
+ * The primary rendition of an image — its fallback (base <img>) entry.
  */
-export declare function primaryImageSource(image: Image): ImageSource;
+export declare function primaryImageSource(image: Image): ImageFallback;
 /**
  * Computes the full set of <img> attributes for an Image.
  *
  * Framework components (React <Picture>, Astro <img>, Svelte <img>) call this
- * and spread the result into their native element.  No HTML string serialization.
+ * and spread the result into their native element.  No HTML string
+ * serialization. Media-scoped sources need a <picture> wrapper and are not
+ * representable as plain <img> attributes, so srcset/sizes are taken from the
+ * first unscoped source only.
  */
 export declare function imageAttrs(image: Image, overrides?: ImageAttrs): ImageAttrs;

package/dist/types/image.js

@@ -2,10 +2,16 @@ import { z } from 'zod';
 // ---------------------------------------------------------------------------
 // Zod schema
 // ---------------------------------------------------------------------------
-export const ImageSourceSchema = z.object({
+export const ImageFallbackSchema = z.object({
     src: z.string().min(1),
     width: z.number().int().nonnegative(),
     height: z.number().int().nonnegative(),
+    type: z.string().min(1).optional(),
+});
+export const ImageSourceSchema = z.object({
+    srcset: z.string().min(1),
+    sizes: z.string().min(1).optional(),
+    media: z.string().min(1).optional(),
     type: z.string().min(1),
 });
 export const ImageSchema = z.object({
@@ -13,36 +19,33 @@ export const ImageSchema = z.object({
     assetId: z.string().min(1),
     versionId: z.string().min(1),
     alt: z.string(),
+    fallback: ImageFallbackSchema,
     sources: z.array(ImageSourceSchema).min(1),
 });
 /**
- * Picks the primary variant from an image's sources.
- * Uses the largest width; ties fall back to the first entry.
+ * The primary rendition of an image — its fallback (base <img>) entry.
  */
 export function primaryImageSource(image) {
-    return image.sources.reduce((largest, source) => source.width > largest.width ? source : largest, image.sources[0]);
+    return image.fallback;
 }
 /**
  * Computes the full set of <img> attributes for an Image.
  *
  * Framework components (React <Picture>, Astro <img>, Svelte <img>) call this
- * and spread the result into their native element.  No HTML string serialization.
+ * and spread the result into their native element.  No HTML string
+ * serialization. Media-scoped sources need a <picture> wrapper and are not
+ * representable as plain <img> attributes, so srcset/sizes are taken from the
+ * first unscoped source only.
  */
 export function imageAttrs(image, overrides = {}) {
-    const primary = primaryImageSource(image);
-    const srcset = image.sources
-        .map((s) => `${s.src} ${s.width}w`)
-        .join(', ');
-    const sizes = image.sources
-        .map((s) => `(max-width: ${s.width}px) ${s.width}px`)
-        .join(', ');
+    const unscoped = image.sources.find((s) => !s.media);
     return {
-        src: primary.src,
+        src: image.fallback.src,
         alt: image.alt,
-        width: primary.width > 0 ? primary.width : undefined,
-        height: primary.height > 0 ? primary.height : undefined,
-        srcSet: srcset || undefined,
-        sizes: sizes || undefined,
+        width: image.fallback.width > 0 ? image.fallback.width : undefined,
+        height: image.fallback.height > 0 ? image.fallback.height : undefined,
+        srcSet: unscoped?.srcset || undefined,
+        sizes: unscoped?.sizes || undefined,
         loading: 'lazy',
         decoding: 'async',
         ...overrides,

package/dist/types/media.d.ts

@@ -9,10 +9,16 @@ export declare const AssetSchema: z.ZodUnion<readonly [z.ZodObject<{
     assetId: z.ZodString;
     versionId: z.ZodString;
     alt: z.ZodString;
-    sources: z.ZodArray<z.ZodObject<{
+    fallback: z.ZodObject<{
         src: z.ZodString;
         width: z.ZodNumber;
         height: z.ZodNumber;
+        type: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>;
+    sources: z.ZodArray<z.ZodObject<{
+        srcset: z.ZodString;
+        sizes: z.ZodOptional<z.ZodString>;
+        media: z.ZodOptional<z.ZodString>;
         type: z.ZodString;
     }, z.core.$strip>>;
 }, z.core.$strip>, z.ZodObject<{
@@ -29,10 +35,16 @@ export declare const AssetSchema: z.ZodUnion<readonly [z.ZodObject<{
         assetId: z.ZodString;
         versionId: z.ZodString;
         alt: z.ZodString;
-        sources: z.ZodArray<z.ZodObject<{
+        fallback: z.ZodObject<{
             src: z.ZodString;
             width: z.ZodNumber;
             height: z.ZodNumber;
+            type: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>;
+        sources: z.ZodArray<z.ZodObject<{
+            srcset: z.ZodString;
+            sizes: z.ZodOptional<z.ZodString>;
+            media: z.ZodOptional<z.ZodString>;
             type: z.ZodString;
         }, z.core.$strip>>;
     }, z.core.$strip>>;

package/dist/types/video.d.ts

@@ -52,10 +52,16 @@ export declare const VideoSchema: z.ZodObject<{
         assetId: z.ZodString;
         versionId: z.ZodString;
         alt: z.ZodString;
-        sources: z.ZodArray<z.ZodObject<{
+        fallback: z.ZodObject<{
             src: z.ZodString;
             width: z.ZodNumber;
             height: z.ZodNumber;
+            type: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>;
+        sources: z.ZodArray<z.ZodObject<{
+            srcset: z.ZodString;
+            sizes: z.ZodOptional<z.ZodString>;
+            media: z.ZodOptional<z.ZodString>;
             type: z.ZodString;
         }, z.core.$strip>>;
     }, z.core.$strip>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradial/aci",
-  "version": "0.1.28",
+  "version": "0.1.29",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",